/* ============================================================
 * hmgiftcard · Configurador en ficha de producto (v2)
 * Preview volteable + selector de diseño + importe libre.
 * Este CSS sólo se carga en la ficha del producto tarjeta.
 * ============================================================ */

/* ── Sustituir el precio base (1 €) por el importe elegido, y ocultar el contador ── */
.product-prices .product-price,
.product-prices .current-price,
.product-prices .tax-shipping-delivery-label,
.product-quantity .qty,
#product .product-quantity .qty { display: none !important; }
.product-prices { text-align: center; }
.hmgc-price-live {
	display: block;
	font-family: var(--hk-font-serif, Georgia, serif);
	font-size: 32px;
	font-weight: 600;
	color: var(--hk-accent, #8A4A4A);
	line-height: 1.2;
	margin: 2px 0 6px;
}

/* ── Preview volteable ───────────────────────────────────────────────────── */
.hmgc-preview {
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.hmgc-preview--docked { margin: 8px 0 0; }
.hmgc-preview--mobile { margin: 6px 0 18px; }

.hmgc-card3d {
	position: relative;
	width: 100%;
	max-width: 600px;
	aspect-ratio: 1.6 / 1;
	perspective: 1400px;
	cursor: pointer;
}
.hmgc-card3d .hmgc-face {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	box-shadow: 0 18px 40px rgba(58,44,40,.18);
	transition: transform .7s cubic-bezier(.2,.7,.2,1);
	transform-style: preserve-3d;
}
.hmgc-face--front { transform: rotateY(0deg); }
.hmgc-face--back  { transform: rotateY(180deg); }
.hmgc-card3d.is-flipped .hmgc-face--front { transform: rotateY(-180deg); }
.hmgc-card3d.is-flipped .hmgc-face--back  { transform: rotateY(0deg); }

/* La cara compuesta (hmgiftcard-card.css) rellena la cara del flip */
.hmgc-face .hmgc-cardface,
.hmgc-face .hmgc-cardback { width: 100%; height: 100%; box-shadow: none; border-radius: 16px; }

.hmgc-flip-btn {
	background: none;
	border: 1px solid var(--hk-line, #EBDDD0);
	color: var(--hk-ink-2, #6B5852);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 8px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.hmgc-flip-btn:hover { background: var(--hk-accent, #8A4A4A); color: var(--hk-cream, #FBF6EF); border-color: var(--hk-accent, #8A4A4A); }
.hmgc-flip-ic { display: inline-block; }

/* ── Panel del configurador ──────────────────────────────────────────────── */
.hmgc-form { font-family: var(--hk-font-sans, sans-serif); color: var(--hk-ink, #3A2C28); }
.hmgc-form__panel {
	background: var(--hk-white, #fff);
	border: 1px solid var(--hk-line, #EBDDD0);
	border-radius: var(--hk-radius-lg, 18px);
	overflow: hidden;
	box-shadow: var(--hk-shadow-soft, 0 8px 24px rgba(58,44,40,.06));
}
.hmgc-form__header {
	background: var(--hk-accent, #8A4A4A);
	color: var(--hk-cream, #FBF6EF);
	padding: 18px 22px;
}
.hmgc-form__icon { font-size: 20px; }
.hmgc-form__title { margin: 4px 0 2px; font-size: 17px; color: #fff; }
.hmgc-form__subtitle { margin: 0; font-size: 12px; opacity: .85; }
.hmgc-form__body { padding: 20px 22px; }

.hmgc-field { margin-bottom: 16px; }
.hmgc-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hk-accent, #8A4A4A);
	margin-bottom: 7px;
}
.hmgc-required { color: var(--hk-accent, #8A4A4A); }
.hmgc-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--hk-ink-3, #9A8780); }
.hmgc-input, .hmgc-textarea {
	width: 100%;
	background: #fff;
	border: 1px solid var(--hk-line, #EBDDD0);
	border-radius: var(--hk-radius-sm, 8px);
	padding: 11px 13px;
	font-size: 14px;
	color: var(--hk-ink, #3A2C28);
}
.hmgc-input:focus, .hmgc-textarea:focus { outline: none; border-color: var(--hk-accent, #8A4A4A); box-shadow: 0 0 0 3px rgba(138,74,74,.1); }
.hmgc-help { font-size: 11px; color: var(--hk-ink-3, #9A8780); margin-top: 5px; }
.hmgc-row { display: flex; gap: 12px; }
.hmgc-field--half { flex: 1; }
.hmgc-field--third { flex: 0 0 34%; }
.hmgc-field--two-thirds { flex: 1; }

/* ── Modo base / desde cero ── */
.hmgc-mode { display: flex; gap: 8px; margin-bottom: 16px; }
.hmgc-mode-btn {
	flex: 1; padding: 10px; border-radius: 999px;
	border: 1px solid var(--hk-line, #EBDDD0);
	background: transparent; color: var(--hk-ink-2, #6B5852);
	font-size: 12px; font-weight: 600; cursor: pointer;
	transition: all .15s ease;
}
.hmgc-mode-btn.is-active { background: var(--hk-accent, #8A4A4A); color: var(--hk-cream, #FBF6EF); border-color: var(--hk-accent, #8A4A4A); }

/* Selector de bases (12 mini caras compuestas) */
.hmgc-base-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hmgc-base-opt {
	padding: 0; border: 2px solid transparent; border-radius: 10px;
	background: transparent; cursor: pointer; overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}
.hmgc-base-opt:hover { transform: translateY(-2px); }
.hmgc-base-opt .hmgc-cardface { display: block; box-shadow: none; border-radius: 8px; }
.hmgc-base-opt.is-active { border-color: var(--hk-accent, #8A4A4A); }

/* Paleta de colores (modo desde cero) */
.hmgc-palette { display: flex; gap: 8px; flex-wrap: wrap; }
.hmgc-color-opt {
	width: 30px; height: 30px; border-radius: 999px;
	border: 1px solid var(--hk-line, #EBDDD0); cursor: pointer;
	outline: 2px solid transparent; outline-offset: 2px;
}
.hmgc-color-opt.is-active { outline-color: var(--hk-accent, #8A4A4A); }

/* Selector de motivos (modo desde cero) */
.hmgc-motif-picker {
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
	max-height: 168px; overflow-y: auto; padding: 2px;
}
.hmgc-motif-opt {
	aspect-ratio: 1; padding: 7px; border-radius: 8px;
	border: 1.5px solid transparent; background: var(--hk-paper, #F5EAE2); cursor: pointer;
}
.hmgc-motif-opt.is-active { border-color: var(--hk-accent, #8A4A4A); background: rgba(138,74,74,.10); }
.hmgc-motif-ic {
	display: block; width: 100%; height: 100%;
	background-color: var(--hk-ink-2, #6B5852);
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
}

/* ── Importe ── */
.hmgc-amount-quick { display: flex; gap: 8px; margin-bottom: 10px; }
.hmgc-amount-chip {
	flex: 1;
	background: var(--hk-paper, #F5EAE2);
	border: 1px solid var(--hk-line, #EBDDD0);
	border-radius: 999px;
	padding: 9px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--hk-ink, #3A2C28);
	cursor: pointer;
	transition: all .15s ease;
}
.hmgc-amount-chip:hover { border-color: var(--hk-accent, #8A4A4A); }
.hmgc-amount-chip.is-active { background: var(--hk-accent, #8A4A4A); color: var(--hk-cream, #FBF6EF); border-color: var(--hk-accent, #8A4A4A); }
.hmgc-amount-input { position: relative; }
.hmgc-amount-input .hmgc-input { font-size: 24px; font-weight: 700; text-align: center !important; padding-right: 38px; padding-left: 38px; font-family: var(--hk-font-serif, Georgia, serif); }
.hmgc-amount-cur { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--hk-ink-3, #9A8780); pointer-events: none; }
/* quitar las flechas del number para que el centrado sea limpio */
.hmgc-amount-input .hmgc-input::-webkit-outer-spin-button,
.hmgc-amount-input .hmgc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hmgc-amount-input .hmgc-input { -moz-appearance: textfield; }

/* ── Radios / checkbox / fecha ── */
.hmgc-send-options { display: flex; gap: 18px; }
.hmgc-radio-label, .hmgc-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.hmgc-date-picker { margin-top: 10px; }
.hmgc-char-count { font-size: 11px; color: var(--hk-ink-3, #9A8780); margin-top: 5px; text-align: right; }

.hmgc-physical-toggle { background: var(--hk-paper, #F5EAE2); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.hmgc-physical-price { color: var(--hk-accent, #8A4A4A); }
.hmgc-physical-note { font-size: 12px; color: var(--hk-ink-3, #9A8780); margin: 6px 0 0; }
.hmgc-physical-address { border: 1px dashed var(--hk-line, #EBDDD0); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.hmgc-address-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hk-accent, #8A4A4A); margin: 0 0 10px; }

/* ── Errores ── */
.hmgc-errors {
	background: #fbeaea;
	border: 1px solid #e0b4b4;
	border-radius: 8px;
	padding: 12px 16px;
	margin-top: 14px;
	color: #8a2b2b;
	font-size: 13px;
}
.hmgc-errors ul { margin: 0; padding-left: 18px; }

/* ── Aviso de ampliar ── */
.hmgc-zoom-hint { font-size: 11px; color: var(--hk-ink-3, #9A8780); }

/* ── Separador de sección (datos del envío) ── */
.hmgc-section-sep { margin: 22px 0 16px; padding-top: 18px; border-top: 1px solid var(--hk-line, #EBDDD0); }
.hmgc-section-title { display: block; font-family: var(--hk-font-serif, Georgia, serif); font-size: 16px; color: var(--hk-ink, #3A2C28); }
.hmgc-section-note { margin: 4px 0 0; font-size: 12px; color: var(--hk-ink-3, #9A8780); line-height: 1.5; }

/* ── Lightbox: tarjeta en grande ── */
.hmgc-card3d { cursor: zoom-in; }
.hmgc-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(40,30,28,.82);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 24px;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.hmgc-lb-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hmgc-card3d--lb { width: min(92vw, 860px); max-width: 860px; cursor: pointer; }
.hmgc-card3d--lb .hmgc-face { border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.hmgc-lb-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,.15);
	color: #fff;
	border: none;
	font-size: 20px;
	cursor: pointer;
}
.hmgc-lb-close:hover { background: rgba(255,255,255,.28); }
.hmgc-lb-actions .hmgc-flip-btn { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.hmgc-lb-actions .hmgc-flip-btn:hover { background: #fff; color: var(--hk-accent, #8A4A4A); border-color: #fff; }

/* ── Botón add-to-cart en estado cargando ── */
.hmgc-loading { opacity: .6; pointer-events: none; }

/* El tema (chrome.css) fuerza `body #product .col-product-info * { text-align:left !important }`
   (especificidad 1,1,1). Lo ganamos con más especificidad para centrar la tarjeta, el importe
   y todos los botones del configurador (chips, modo…). */
body #product .col-product-info .hmgc-cardface > *,
body #product .col-product-info .hmgc-cardback > *,
body[id^="product"] .col-product-info .hmgc-cardface > *,
body[id^="product"] .col-product-info .hmgc-cardback > *,
body #product .col-product-info .hmgc-amount-input .hmgc-input,
body[id^="product"] .col-product-info .hmgc-amount-input .hmgc-input,
body #product .col-product-info #hmgc-gift-form button,
body[id^="product"] .col-product-info #hmgc-gift-form button {
	text-align: center !important;
}

@media (max-width: 480px) {
	.hmgc-row { flex-direction: column; gap: 0; }
	.hmgc-field--third, .hmgc-field--two-thirds { flex: 1; }
}