:root {
    --serif: "Lora", Georgia, "Times New Roman", serif;
    --sans: "Inter", "Segoe UI", Arial, sans-serif;
}

[data-scope-target][hidden] { display: none !important; }
.table-actions { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.table-actions form { margin: 0; }
.table-actions button { padding: 0; border: 0; background: transparent; cursor: pointer; }

/* Selector de variantes: primero talla, después los colores válidos de esa talla. */
.variant-step { margin-top: 24px; }
.variant-step + .variant-step { margin-top: 20px; }
.variant-step .form-label span { display: inline-flex; align-items: center; gap: 9px; }
.variant-step .form-label b {
    display: inline-grid; place-items: center; width: 25px; height: 25px;
    border-radius: 50%; color: #fff; background: var(--red); font-size: 12px;
}
.size-option-list, .color-option-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 11px; }
.size-option, .color-option { position: relative; cursor: pointer; }
.size-option input, .color-option input { position: absolute; opacity: 0; pointer-events: none; }
.size-option span {
    display: grid; min-width: 54px; min-height: 45px; place-items: center; padding: 8px 15px;
    border: 1px solid #cfc7be; border-radius: 3px; background: #fff; color: var(--ink);
    font: 600 14px/1 var(--sans); transition: .18s ease;
}
.size-option input:checked + span { border-color: var(--red); color: var(--red); box-shadow: inset 0 0 0 1px var(--red); background: #fff8f7; }
.size-option input:focus-visible + span, .color-option input:focus-visible + span { outline: 3px solid rgba(168,36,51,.2); outline-offset: 2px; }
.size-option input:disabled + span { opacity: .42; text-decoration: line-through; cursor: not-allowed; background: #f3f0ec; }
.color-option[hidden] { display: none !important; }
.color-option > span {
    display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 1px solid #d8d0c8; border-radius: 50%; background: #fff; transition: .18s ease;
}
.color-option i { width: 26px; height: 26px; border: 1px solid rgba(0,0,0,.18); border-radius: 50%; background: var(--variant-color); }
.color-option input:checked + span { border-color: var(--red); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--red); }
.color-option input:disabled + span { opacity: .35; cursor: not-allowed; }
.variant-selection-summary { margin: 12px 0 0; color: #655d56; font: 500 12px/1.5 var(--sans); }
.form-label small[data-selected-color-name] { color: var(--ink); font-weight: 600; text-transform: none; letter-spacing: 0; }
.tailoring-note { margin: 12px 0 0; color: #746b63; font: 400 11px/1.5 var(--sans); }
.tailoring-note a { color: var(--red); font-weight: 600; text-decoration: underline; }

/* Matriz administrativa de tallas y colores. */
.variant-matrix { display: grid; gap: 12px; }
.variant-matrix-intro { padding: 16px 18px; border-left: 3px solid var(--red); background: #faf6f2; }
.variant-matrix-intro strong { color: var(--ink); font: 700 15px/1.3 var(--sans); }
.variant-matrix-intro p { margin: 4px 0 0; color: #6f665e; font: 400 13px/1.5 var(--sans); }
.variant-matrix-row { overflow: hidden; border: 1px solid #ded7d0; border-radius: 4px; background: #fff; }
.variant-size-toggle { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer; }
.variant-size-toggle input { width: 18px; height: 18px; accent-color: var(--red); }
.variant-size-toggle span { color: var(--ink); font: 700 16px/1.2 var(--sans); }
.variant-size-toggle small { color: #786f67; font: 400 12px/1.2 var(--sans); }
.variant-size-toggle input:disabled ~ * { opacity: .5; }
.variant-matrix-row.is-active { border-color: rgba(168,36,51,.48); }
.variant-matrix-row.is-active .variant-size-toggle { background: #fff8f7; }
.variant-color-grid { display: none; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 10px; padding: 14px; border-top: 1px solid #eee8e2; background: #fcfaf8; }
.variant-matrix-row.is-active .variant-color-grid { display: grid; }
.variant-color-card { padding: 12px; border: 1px solid #ddd6cf; border-radius: 4px; background: #fff; opacity: .68; }
.variant-color-card.is-selected { border-color: var(--red); opacity: 1; box-shadow: 0 5px 18px rgba(81,42,37,.07); }
.variant-color-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.variant-color-toggle input { width: 17px; height: 17px; accent-color: var(--red); }
.variant-color-toggle i { width: 20px; height: 20px; border: 1px solid rgba(0,0,0,.2); border-radius: 50%; background: var(--matrix-color); }
.variant-color-toggle strong { color: var(--ink); font: 600 13px/1.2 var(--sans); }
.variant-stock-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; min-width: 0; margin-top: 12px; }
.variant-stock-fields label { min-width: 0; color: #6c635b; font: 500 11px/1.2 var(--sans); white-space: nowrap; }
.variant-stock-fields input { width: 100%; margin-top: 5px; padding: 9px; border: 1px solid #d7d0c9; border-radius: 3px; color: var(--ink); background: #fff; font: 500 13px/1 var(--sans); }
.variant-color-builder { display: none; padding: 14px; border-top: 1px solid #eee8e2; background: #fcfaf8; }
.variant-matrix-row.is-active .variant-color-builder { display: block; }
.variant-new-colors { display: grid; gap: 10px; }
.variant-new-color { position: relative; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 20px; align-items: end; padding: 14px 52px 14px 14px; border: 1px solid #ddd6cf; border-radius: 4px; background: #fff; }
.color-identity { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 10px; min-width: 0; align-items: end; }
.color-identity .field { min-width: 0; }
.color-picker { position: relative; width: 48px; height: 43px; overflow: hidden; border: 1px solid #d7d0c9; border-radius: 3px; cursor: pointer; }
.color-picker input { position: absolute; inset: -8px; width: 64px; height: 59px; opacity: 0; cursor: pointer; }
.color-picker i { display: block; width: 100%; height: 100%; pointer-events: none; }
.variant-new-color .field input { margin-top: 5px; }
.remove-color { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 50%; color: #8b8179; background: #f4efea; font: 400 19px/1 var(--sans); }
.remove-color:hover { color: #fff; background: var(--red); }
.add-color { margin-top: 12px; }
.variant-matrix-empty { padding: 22px; border: 1px dashed #cabfb5; text-align: center; background: #fcfaf8; }
.variant-matrix-empty strong { color: var(--ink); font: 700 15px/1.3 var(--sans); }
.variant-matrix-empty p { margin: 5px 0 0; color: #746b63; font: 400 12px/1.5 var(--sans); }
.compact-heading { margin-top: 42px; }
.existing-size-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin-bottom: 18px; }
.existing-size-card { width: 100%; margin: 0 !important; }
.existing-size-card > summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 18px; align-items: center; }
.existing-size-card > summary span { color: var(--ink); font: 700 15px/1.2 var(--sans); }
.existing-size-card > summary small { grid-column: 1; overflow: hidden; color: #786f67; font: 400 11px/1.4 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.existing-size-card > summary::after { grid-column: 2; grid-row: 1 / 3; align-self: center; float: none; }
.existing-size-card[open] > summary { margin-bottom: 12px; }
.variant-matrix.compact { margin-top: 0; }
.variant-matrix.compact .variant-matrix-row { border: 0; }
.variant-matrix.compact .variant-color-builder { padding: 0; border: 0; background: transparent; }

/* Páginas de confección y sorteos. */
.experience-hero { min-height: 610px; display: grid; grid-template-columns: 1.15fr .85fr; background: var(--ivory); }
.experience-hero > div { align-self: center; padding: 80px clamp(30px,8vw,120px); }
.experience-hero h1 { max-width: 720px; margin: 20px 0; color: var(--ink); font: 400 clamp(48px,6vw,82px)/1.03 var(--serif); letter-spacing: -.03em; }
.experience-hero > div > p { max-width: 600px; margin: 0 0 28px; color: var(--muted); font: 400 16px/1.8 var(--sans); }
.experience-hero > div > small { display: block; margin-top: 12px; color: #776e66; font: 500 11px/1.4 var(--sans); }
.experience-hero aside { display: flex; flex-direction: column; justify-content: flex-end; padding: 55px; color: #fff; background: linear-gradient(145deg,#7f202a,#281d1d); }
.experience-hero aside > span { color: rgba(255,255,255,.18); font: 400 clamp(90px,12vw,170px)/.8 var(--serif); }
.experience-hero aside p { margin: 45px 0 0; font: 400 clamp(28px,3vw,43px)/1.25 var(--serif); }
.giveaway-hero aside { background: linear-gradient(145deg,#171616,#743541); }
.live-time { display: flex; flex-direction: column; gap: 7px; margin: 26px 0; padding: 17px 20px; border-left: 3px solid var(--red); background: #fff; }
.live-time small { color: var(--red); font: 600 9px/1.2 var(--sans); letter-spacing: .15em; }
.live-time strong { color: var(--ink); font: 500 19px/1.3 var(--serif); }
.social-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.experience-process { padding: 90px clamp(24px,7vw,105px); }
.experience-process .section-head > p { max-width: 310px; color: var(--muted); font: 400 13px/1.6 var(--sans); }
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); }
.process-grid.three { grid-template-columns: repeat(3,1fr); }
.process-grid article { min-height: 230px; padding: 28px; border-right: 1px solid var(--line); }
.process-grid article:last-child { border: 0; }
.process-grid b { color: var(--red); font: 500 11px/1 var(--sans); }
.process-grid h3 { margin: 38px 0 12px; color: var(--ink); font: 500 23px/1.2 var(--serif); }
.process-grid p { margin: 0; color: var(--muted); font: 400 12px/1.7 var(--sans); }
.experience-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 90px clamp(24px,9vw,135px); color: #fff; background: #171616; }
.experience-benefits h2,.prize-showcase h2 { margin: 14px 0 20px; font: 400 clamp(35px,4vw,53px)/1.1 var(--serif); }
.experience-benefits > div > p { max-width: 530px; color: #aaa29c; font: 400 14px/1.8 var(--sans); }
.benefit-list { display: grid; }
.benefit-list article { display: grid; grid-template-columns: 36px 1fr; gap: 15px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.benefit-list article > span { color: #df6673; }
.benefit-list h3 { margin: 0 0 5px; font: 500 19px/1.2 var(--serif); }
.benefit-list p { margin: 0; color: #99918b; font: 400 11px/1.6 var(--sans); }
.experience-cta { padding: 75px 20px; text-align: center; background: var(--ivory); }
.experience-cta > span { color: var(--red); font: 600 10px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.experience-cta h2 { margin: 12px 0 25px; font: 400 48px/1.1 var(--serif); }
.prize-showcase { padding: 90px clamp(24px,7vw,105px); color: #fff; background: #171616; }
.prize-showcase > div:last-child { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 35px; }
.prize-showcase article { padding: 28px; border: 1px solid rgba(255,255,255,.15); }
.prize-showcase article > span { color: #df6673; font: 600 10px/1 var(--sans); }
.prize-showcase h3 { margin: 40px 0 10px; font: 500 23px/1.2 var(--serif); }
.prize-showcase p { margin: 0; color: #aaa29c; font: 400 12px/1.7 var(--sans); }
.experience-note { display: grid; grid-template-columns: 150px 1fr; gap: 35px; max-width: 900px; margin: 60px auto; padding: 28px; border: 1px solid var(--line); }
.experience-note strong { color: var(--red); font: 500 20px/1.3 var(--serif); }
.experience-note p { margin: 0; color: var(--muted); font: 400 12px/1.7 var(--sans); }

@media (max-width: 900px) {
    .experience-hero { grid-template-columns: 1fr; }
    .experience-hero aside { min-height: 360px; }
    .process-grid { grid-template-columns: repeat(2,1fr); }
    .process-grid article:nth-child(2) { border-right: 0; }
    .process-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .experience-benefits { gap: 45px; }
}

@media (max-width: 620px) {
    .variant-size-toggle { grid-template-columns: auto 1fr; }
    .variant-size-toggle small { grid-column: 2; }
    .variant-color-grid { grid-template-columns: 1fr; }
    .variant-new-color { grid-template-columns: 1fr; }
    .existing-size-grid { grid-template-columns: 1fr; }
    .experience-hero { grid-template-columns: 1fr; }
    .experience-hero > div { padding: 65px 24px; }
    .experience-hero aside { min-height: 360px; padding: 35px 24px; }
    .process-grid,.process-grid.three { grid-template-columns: 1fr; }
    .process-grid article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .experience-benefits { grid-template-columns: 1fr; gap: 35px; padding: 65px 24px; }
    .prize-showcase > div:last-child { grid-template-columns: 1fr; }
    .experience-note { grid-template-columns: 1fr; margin: 35px 20px; }
}

html {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--sans);
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, blockquote,
.page-heading h1,
.section-heading h2,
.form-card h2,
.panel h2,
.product-meta h3,
.product-copy h1 {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.018em;
}

/* Tienda: textos comerciales y controles con tamaño de lectura cómodo. */
.announcement,
.eyebrow,
.product-meta > span,
.product-label,
.sold-out {
    font-size: 10px;
}

.store-nav > a,
.header-actions > a,
.text-link {
    font-size: 12px;
}

.btn {
    font-size: 11px;
    letter-spacing: .055em;
}

.hero h1,
.page-hero h1,
.collection-hero h1,
.product-copy h1,
.checkout-head h1,
.auth-panel h1,
.account-hero h1,
.success-page h1,
.editorial-page h1,
.error-page h1 {
    font-weight: 500;
    line-height: 1.12;
}

.hero-copy > p,
.product-description,
.editorial-page .lead {
    font-size: 16px;
    line-height: 1.75;
}

.product-meta h3 {
    font-size: 20px;
    line-height: 1.38;
}

.product-meta p,
.product-price strong {
    font-size: 13px;
}

.form-label,
.checkout-form label,
.auth-form label,
.quantity-form label,
.buy-row label {
    font-size: 10px;
}

.variant b,
.choice-grid b,
.product-benefits strong {
    font-size: 12px;
}

.variant em,
.variant small,
.choice-grid small,
.product-benefits small,
.cart-copy p,
.order-summary > small,
.summary-secure,
.checkout-form legend small,
.checkout-note,
.checkout-products strong,
.checkout-products small {
    font-size: 10px;
    line-height: 1.5;
}

.order-summary > div:not(.checkout-products):not(.applied-coupon):not(.shipping-progress),
.site-footer p,
.site-footer a {
    font-size: 12px;
}

/* Administración: tablas y cifras priorizan rapidez y claridad. */
.admin-shell,
.admin-auth {
    font-size: 14px;
}

.admin-nav a {
    font-size: 13.5px;
    font-weight: 500;
}

/* Scroll integrado del menú administrativo. */
.admin-nav {
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: #8f2c39 #252323;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.admin-nav::-webkit-scrollbar {
    width: 7px;
}

.admin-nav::-webkit-scrollbar-track {
    margin-block: 5px;
    border-radius: 999px;
    background: #252323;
}

.admin-nav::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 2px solid #252323;
    border-radius: 999px;
    background: #8f2c39;
}

.admin-nav::-webkit-scrollbar-thumb:hover {
    background: #d04a59;
}

.admin-nav::-webkit-scrollbar-corner {
    background: transparent;
}

/* El menú móvil de la tienda conserva el mismo acabado. */
@media (max-width: 820px) {
    .store-nav {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #a82433 #252323;
        scrollbar-gutter: stable;
        overscroll-behavior: contain;
    }

    .store-nav::-webkit-scrollbar { width: 6px; }
    .store-nav::-webkit-scrollbar-track { background: #252323; }
    .store-nav::-webkit-scrollbar-thumb {
        border: 1px solid #252323;
        border-radius: 999px;
        background: #a82433;
    }
    .store-nav::-webkit-scrollbar-thumb:hover { background: #d04a59; }
}

.admin-topbar > div:first-of-type strong {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 17px;
}

.admin-topbar > div:first-of-type span,
.overline,
.field > span,
.filter-bar label > span {
    font-size: 10px;
}

.page-heading h1 {
    font-weight: 500;
    line-height: 1.14;
}

.page-heading p,
.section-heading p {
    font-size: 14px;
    line-height: 1.6;
}

.form-card h2,
.panel h2,
.section-heading h2,
.module-card h2,
.scan-result h2,
.login-card h1 {
    font-weight: 500;
    line-height: 1.3;
}

.button {
    font-size: 11.5px;
}

.data-table th {
    font-size: 10px;
    letter-spacing: .065em;
}

.data-table td {
    font-size: 13px;
    line-height: 1.45;
}

.cell-subtitle,
.data-table td > small,
.field small,
.panel-heading p,
.form-card-heading p,
.detail-list dt,
.timeline small {
    font-size: 10.5px;
    line-height: 1.45;
}

.detail-list dd {
    font-size: 13px;
    line-height: 1.5;
}

.metric-card > strong,
.stock-summary strong,
.scan-stock strong,
.module-total strong,
.order-totals .grand-total,
.pos-total strong {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: -0.025em;
}

.metric-card > span,
.metric-card small,
.metric-card a,
.stock-summary span,
.status-badge {
    font-size: 10px;
}

.scanner-form input,
.data-table code,
code {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 540px) {
    body {
        font-size: 15px;
    }

    .hero h1,
    .collection-hero h1,
    .page-hero h1,
    .account-hero h1 {
        line-height: 1.15;
    }
}

/* Página de contacto */
.contact-hero {
    min-height: 420px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    padding: 75px clamp(25px, 8vw, 120px);
    background: var(--ivory);
    overflow: hidden;
}

.contact-hero h1 {
    margin: 16px 0;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1.05;
}

.contact-hero p {
    max-width: 580px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
}

.contact-monogram {
    justify-self: center;
    color: #a8243312;
    font: 600 clamp(120px, 17vw, 250px)/1 var(--serif);
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr);
    gap: clamp(40px, 7vw, 100px);
    padding: 85px clamp(25px, 8vw, 120px);
}

.contact-intro h2,
.contact-help h2 {
    margin: 12px 0 18px;
    font-size: clamp(32px, 4vw, 48px);
}

.contact-intro p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 28px;
}

.contact-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--ink);
}

.contact-cards article {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 16px;
    min-height: 190px;
    padding: 27px 22px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.contact-cards article:nth-child(2n) { border-right: 0; }
.contact-cards article > span,
.contact-cards small { color: var(--red); font-size: 10px; }
.contact-cards h3 { margin: 9px 0 12px; font-size: 22px; }
.contact-cards p { margin: 0; color: var(--muted); line-height: 1.65; }
.contact-cards a { display: block; margin: 7px 0; font-weight: 600; overflow-wrap: anywhere; }
.contact-cards a:hover { color: var(--red); }

.contact-help {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    padding: 75px clamp(25px, 8vw, 120px);
    background: #181717;
    color: #fff;
}

.contact-help > div:last-child { border-top: 1px solid #ffffff44; }
.contact-help a { display: flex; justify-content: space-between; gap: 25px; padding: 20px 0; border-bottom: 1px solid #ffffff22; }
.contact-help a span { color: #aaa39e; font-size: 12px; text-align: right; }
.contact-help a:hover strong { color: #e66a78; }

@media (max-width: 820px) {
    .contact-hero,
    .contact-layout,
    .contact-help { grid-template-columns: 1fr; }
    .contact-monogram { display: none; }
    .contact-layout { padding-block: 60px; }
}

@media (max-width: 540px) {
    .contact-hero { min-height: 360px; padding: 55px 22px; }
    .contact-hero h1 { font-size: 50px; }
    .contact-cards { grid-template-columns: 1fr; }
    .contact-cards article { border-right: 0; min-height: auto; }
    .contact-help { gap: 25px; padding: 55px 22px; }
    .contact-help a { flex-direction: column; gap: 6px; }
    .contact-help a span { text-align: left; }
}

/* Navegación móvil: panel claro, táctil y por encima del overlay. */
@media (max-width: 820px) {
    .site-header {
        z-index: 70;
    }

    .store-nav {
        z-index: 80;
        width: min(360px, 88vw);
        height: 100vh;
        height: 100dvh;
        padding: 82px 24px 32px;
        background: #fffdf9;
        color: var(--ink);
        box-shadow: 18px 0 55px rgba(20, 16, 14, .2);
        visibility: hidden;
        pointer-events: none;
        transition: transform .28s ease, visibility 0s linear .28s;
        scrollbar-color: #a82433 #eee8e1;
    }

    .menu-open .store-nav {
        visibility: visible;
        pointer-events: auto;
        transition: transform .28s ease, visibility 0s;
    }

    .store-nav > a {
        display: flex;
        align-items: center;
        min-height: 54px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
        color: var(--ink);
        font: 500 18px/1.3 var(--sans);
        letter-spacing: 0;
    }

    .store-nav > a:hover,
    .store-nav > a:focus-visible {
        color: var(--red);
        background: var(--red-soft);
        outline: none;
    }

    .store-nav > a.active {
        padding-left: 18px;
        color: var(--red);
        background: #fbf0f1;
        box-shadow: inset 3px 0 var(--red);
    }

    .store-nav > button {
        top: 17px;
        right: 18px;
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        padding: 0;
        border-radius: 50%;
        color: var(--ink);
        background: var(--ivory);
        font: 400 28px/1 var(--sans);
    }

    .store-nav > button:hover,
    .store-nav > button:focus-visible {
        color: #fff;
        background: var(--red);
        outline: 3px solid rgba(168, 36, 51, .16);
    }

    .store-nav-overlay {
        z-index: 60;
        background: rgba(24, 20, 19, .58);
        backdrop-filter: blur(2px);
    }

    .store-nav::-webkit-scrollbar-track { background: #eee8e1; }
    .store-nav::-webkit-scrollbar-thumb { border-color: #eee8e1; }
}

/* Checkout sin cobro y avisos de verificación. */
.checkout-free-order {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 35px;
    padding: 20px;
    border: 1px solid #c9dfd0;
    background: #f1f7f3;
}
.checkout-free-order[hidden], [data-payment-section][hidden] { display: none; }
.checkout-free-order > span {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: #2f7550;
    color: #fff;
}
.checkout-free-order strong { display: block; font-size: 13px; }
.checkout-free-order p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.product-promotion-name { display: block; margin-top: 8px; color: var(--red); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.product-promotion-name[hidden], .product-price [hidden] { display: none; }
.cart-price del { display: block; margin-top: 4px; color: #9a9189; font-size: 10px; }
.store-notice-warning { border-color: #e5d29f; color: #735b1b; }
.store-notice-warning > span { background: #fbf2d8; }

/* Selección de sede para recojo en tienda. */
.choice-grid.two-options { grid-template-columns: repeat(2, 1fr); }
.choice-grid.single { grid-template-columns: 1fr; }
.pickup-location-field { margin: 0 0 20px; padding: 18px; border: 1px solid var(--line); background: var(--ivory); }
.pickup-location-field[hidden] { display: none; }
.pickup-location-field > label { display: block; }
.pickup-location-field select { display: block; width: 100%; margin-top: 7px; padding: 12px; border: 1px solid var(--line); background: #fff; }
.pickup-location-options article { display: grid; gap: 5px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pickup-location-options article[hidden] { display: none; }
.pickup-location-options strong { font-size: 12px; }
.pickup-location-options span,
.pickup-location-options small { color: var(--muted); font-size: 9px; line-height: 1.5; }
@media(max-width:540px) { .choice-grid.two-options { grid-template-columns: 1fr; } }