:root {
    --shop-ink: #241f20;
    --shop-muted: #70676a;
    --shop-paper: #faf7f3;
    --shop-surface: #ffffff;
    --shop-soft: #f4eee9;
    --shop-line: #e7ddd7;
    --shop-brand: #81313b;
    --shop-brand-strong: #682630;
    --shop-brand-soft: #f3e4e6;
    --shop-on-brand: #ffffff;
    --shop-error: #b42318;
    --shop-error-soft: #fff1ef;
    --shop-success: #4f6f5a;
    --shop-success-soft: #eaf1ec;
    --shop-warning-soft: #f7efdd;
    --shop-shadow: 0 4px 16px rgba(73, 49, 51, 0.035);
    --shop-shadow-hover: 0 8px 24px rgba(73, 49, 51, 0.07);
    --shop-font-body: "Manrope", "Segoe UI", sans-serif;
    --shop-font-display: "Fraunces", Georgia, serif;
}

html[data-theme="dark"] {
    --shop-ink: #f7f1ed;
    --shop-muted: #c4b7b8;
    --shop-paper: #151214;
    --shop-surface: #211b1e;
    --shop-soft: #2d2528;
    --shop-line: #493c40;
    --shop-brand: #e9959e;
    --shop-brand-strong: #f2b1b8;
    --shop-brand-soft: #482a30;
    --shop-on-brand: #241f20;
    --shop-error: #ffb4a9;
    --shop-error-soft: #44231f;
    --shop-success: #9fc4aa;
    --shop-success-soft: #263a2d;
    --shop-warning-soft: #493d27;
    --shop-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    --shop-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.24);
}

body {
    background: var(--shop-paper) !important;
    color: var(--shop-ink);
    font-family: var(--shop-font-body);
    font-size: 16px;
    line-height: 1.55;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

.shop-heading {
    color: var(--shop-ink);
    font-family: var(--shop-font-display);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.12;
}

.shop-eyebrow {
    color: var(--shop-brand);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.shop-muted { color: var(--shop-muted); }

.has-shop-nav .text-xs {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.shop-surface {
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: 1.35rem;
    box-shadow: var(--shop-shadow);
}

.shop-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.9375rem;
    font-weight: 700;
    gap: 0.45rem;
    justify-content: center;
    min-height: 44px;
    padding: 0.65rem 1rem;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.shop-btn:hover { transform: translateY(-1px); }
.shop-btn:focus-visible, .shop-chip:focus-visible, .shop-card-action:focus-visible, .shop-product-media-trigger:focus-visible, .shop-product-gallery button:focus-visible, .shop-buy-mode:focus-visible, .shop-options-close:focus-visible, .shop-options-image-button:focus-visible, .shop-cart-photo:focus-visible {
    outline: 3px solid rgba(164, 63, 75, 0.28);
    outline: 3px solid color-mix(in srgb, var(--shop-brand) 35%, transparent);
    outline-offset: 2px;
}
.shop-btn:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }
.shop-btn-primary { background: var(--shop-brand); color: var(--shop-on-brand); box-shadow: none; }
.shop-btn-primary:hover { background: var(--shop-brand-strong); }
.shop-btn-secondary { background: var(--shop-surface); border-color: var(--shop-line); color: var(--shop-ink); }
.shop-btn-secondary:hover { border-color: var(--shop-brand); color: var(--shop-brand); }
.shop-btn-quiet { background: transparent; color: var(--shop-brand); }
.shop-btn-danger { background: transparent; border-color: var(--shop-error); color: var(--shop-error); }

.shop-input, .shop-select {
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: 0.9rem;
    color: var(--shop-ink);
    font-size: 1rem;
    min-height: 46px;
    padding: 0.7rem 0.9rem;
    width: 100%;
}
.shop-input:focus, .shop-select:focus {
    border-color: var(--shop-brand);
    box-shadow: 0 0 0 3px rgba(164, 63, 75, 0.14);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-brand) 15%, transparent);
    outline: none;
}

.shop-search-wrap { position: relative; }
.shop-search-wrap svg { color: var(--shop-muted); left: 0.9rem; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); width: 1.15rem; }
.shop-search-wrap .shop-input { padding-left: 2.8rem; }

.shop-chip {
    align-items: center;
    background: var(--shop-soft);
    border: 1px solid var(--shop-line);
    border-radius: 999px;
    color: var(--shop-ink);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 700;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    transition: 150ms ease;
}
.shop-chip:hover { border-color: var(--shop-brand); }
.shop-chip.is-active { background: var(--shop-brand); border-color: var(--shop-brand); color: var(--shop-on-brand); }

.shop-store-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: 1.2rem;
    color: var(--shop-ink);
    display: flex;
    flex-direction: column;
    min-height: 210px;
    padding: 1.35rem;
    transition: 180ms ease;
}
.shop-store-card:hover { border-color: var(--shop-brand); box-shadow: var(--shop-shadow-hover); transform: translateY(-3px); }
.shop-store-letter { align-items: center; background: var(--shop-brand-soft); border-radius: 1rem; color: var(--shop-brand); display: flex; font-family: var(--shop-font-display); font-size: 1.45rem; font-weight: 600; height: 3.25rem; justify-content: center; width: 3.25rem; }
.shop-store-heading { align-items: center; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; justify-content: space-between; margin-bottom: 1rem; }
.shop-store-heading-title { font-size: clamp(1.25rem, 2vw, 1.6rem); min-width: 0; overflow-wrap: anywhere; }
.shop-store-heading-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.shop-store-change { font-size: 0.875rem; padding: 0.5rem 0.6rem; }

.shop-hero {
    background: var(--shop-soft);
    border: 1px solid var(--shop-line);
    border-radius: 1.5rem;
    color: var(--shop-ink);
    overflow: hidden;
    padding: clamp(1.4rem, 4vw, 3rem);
    position: relative;
}
.shop-hero-title { font-family: var(--shop-font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.18; }
.shop-hero-copy { color: var(--shop-muted); }
.shop-hero .shop-input { border: 1px solid var(--shop-line); box-shadow: none; }
.shop-category-shortcuts { border-top: 1px solid var(--shop-line); margin-top: 1.25rem; padding-top: 1rem; }
.shop-category-shortcut:focus-visible { outline: 3px solid var(--shop-brand); outline-offset: 2px; }
.shop-category-shortcuts-rail { display: flex; flex-wrap: wrap; gap: 0.6rem 0.65rem; padding: 0.2rem 0; }
.shop-category-shortcut { align-items: center; background: var(--shop-surface); border: 1px solid var(--shop-line); border-radius: 999px; color: var(--shop-ink); display: inline-flex; font-size: 0.95rem; font-weight: 600; justify-content: center; max-width: 18rem; min-height: 44px; overflow: hidden; padding: 0.62rem 1rem; scroll-snap-align: start; text-overflow: ellipsis; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease; white-space: nowrap; }
.shop-category-shortcut:hover { background: var(--shop-brand-soft); border-color: var(--shop-brand); color: var(--shop-brand); transform: translateY(-1px); }
.shop-browse-welcome { border-radius: 1.1rem; margin-bottom: 1.5rem; padding: clamp(1rem, 2vw, 1.5rem); }
.shop-browse-welcome-main { align-items: center; display: grid; gap: 0.9rem; }
.shop-browse-welcome .shop-hero-copy { font-size: 0.875rem; margin: 0; }
.shop-browse-search { align-items: stretch; display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr) auto; }
.shop-browse-search .shop-input { min-width: 0; }
.shop-browse-welcome .shop-category-shortcuts { border: 0; margin-top: 0.9rem; padding: 0; }
.shop-browse-welcome .shop-category-shortcut { font-size: 0.875rem; max-width: 100%; padding: 0.45rem 0.85rem; white-space: normal; overflow-wrap: anywhere; }
.shop-category-shortcuts-expandable .shop-category-shortcuts-rail { padding: 0; position: relative; }
.shop-category-shortcuts-rail.is-collapsed { overflow: hidden; }
.shop-category-shortcut.is-shortcut-hidden { visibility: hidden; }
.shop-category-shortcuts-expandable .shop-category-shortcut:hover { transform: none; }
.shop-category-shortcuts-expandable .shop-category-shortcut:focus-visible { outline-offset: -3px; }
.shop-category-shortcuts-toggle { font-size: 0.875rem; margin-top: 0.35rem; padding: 0.5rem 0; }
.shop-category-shortcuts-toggle svg { width: 1rem; }
.shop-category-shortcuts-toggle svg.is-expanded { transform: rotate(180deg); }

.shop-category {
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: 1.35rem;
    overflow: hidden;
}
.shop-category-head { align-items: center; background: linear-gradient(115deg, var(--shop-soft), var(--shop-surface)); border: 0; color: var(--shop-ink); display: flex; gap: 1rem; padding: 1rem; text-align: left; width: 100%; }
.shop-browse-category-title { font-size: 1.375rem; margin-bottom: 0.75rem; }
.shop-category-previews { display: grid; gap: 1.25rem; }
.shop-category-preview { padding: 0.9rem; }
.shop-category-preview .shop-category-head-compact { background: transparent; border-radius: 0.35rem; gap: 0.75rem; justify-content: space-between; margin-bottom: 0.6rem; min-height: 44px; padding: 0.2rem 0; }
.shop-category-heading-content { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; min-width: 0; }
.shop-category-heading-name { color: var(--shop-ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.shop-category-heading-count { color: var(--shop-muted); font-size: 0.8125rem; }
.shop-category-heading-link { color: var(--shop-brand); flex-shrink: 0; font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.shop-category-head-compact:hover .shop-category-heading-link { text-decoration: underline; text-underline-offset: 3px; }
.shop-category-image { align-items: center; background: var(--shop-surface); border-radius: 1rem; display: flex; height: 5rem; justify-content: center; overflow: hidden; width: 5rem; }
.shop-category-product-card { background: var(--shop-paper); border: 1px solid var(--shop-line); border-radius: 1rem; color: var(--shop-ink); overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.shop-category-product-card:hover { border-color: var(--shop-brand); box-shadow: var(--shop-shadow-hover); transform: translateY(-2px); }
.shop-category-product-image { align-items: center; aspect-ratio: 4 / 5; background: linear-gradient(145deg, var(--shop-soft), var(--shop-surface)); display: flex; justify-content: center; overflow: hidden; padding: 0.5rem; }

.shop-product-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); justify-content: center; }
.shop-product-card { animation: shop-card-in 220ms ease-out both; background: var(--shop-surface); border: 1px solid var(--shop-line); border-radius: 1rem; display: flex; flex-direction: column; overflow: hidden; scroll-margin-top: 6rem; transition: border-color 180ms ease; }
.shop-product-card:hover { border-color: color-mix(in srgb, var(--shop-brand) 46%, var(--shop-line)); }
.shop-product-card.is-featured { border-color: var(--shop-brand); box-shadow: 0 0 0 3px var(--shop-brand-soft), var(--shop-shadow); }
.shop-product-media { background: linear-gradient(145deg, var(--shop-soft), var(--shop-surface)); border-bottom: 1px solid var(--shop-line); }
.shop-product-media-trigger { aspect-ratio: 4 / 5; background: transparent; border: 0; cursor: zoom-in; display: block; overflow: hidden; position: relative; width: 100%; }
.shop-product-media-image { height: 100%; object-fit: contain; padding: clamp(0.4rem, 2vw, 0.85rem); transition: transform 260ms ease; width: 100%; }
.shop-product-media-trigger:hover .shop-product-media-image { transform: scale(1.025); }
.shop-product-media-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; left: 0.75rem; max-width: calc(100% - 1.5rem); position: absolute; top: 0.75rem; }
.shop-product-media-badge { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 999px; color: #3c3834; font-size: 0.76rem; font-weight: 700; padding: 0.42rem 0.65rem; }
.shop-product-media-badge.is-assorted { background: rgba(255, 244, 216, 0.94); border-color: rgba(209, 155, 29, 0.25); color: #6f4b00; }
.shop-product-media-zoom { align-items: center; background: rgba(36, 31, 32, 0.82); border-radius: 50%; bottom: 0.65rem; color: #fff; display: inline-flex; height: 2.2rem; justify-content: center; position: absolute; right: 0.65rem; width: 2.2rem; }
.shop-product-media-zoom svg { height: 1rem; width: 1rem; }
.shop-product-media-placeholder { align-items: center; aspect-ratio: 4 / 5; color: var(--shop-muted); display: flex; flex-direction: column; font-size: 0.82rem; font-weight: 800; gap: 0.75rem; justify-content: center; }
.shop-product-media-placeholder svg { opacity: 0.55; width: 3rem; }
.shop-product-gallery { align-items: center; background: var(--shop-surface); border-top: 1px solid var(--shop-line); display: flex; gap: 0.55rem; min-height: 4.9rem; overflow-x: auto; padding: 0.6rem 0.75rem; }
.shop-product-gallery-thumb, .shop-product-gallery-count { background: var(--shop-soft); border: 1px solid var(--shop-line); border-radius: 0.75rem; flex: 0 0 auto; height: 3.6rem; overflow: hidden; width: 3.6rem; }
.shop-product-gallery-thumb:first-child { border-color: var(--shop-brand); box-shadow: 0 0 0 2px var(--shop-brand-soft); }
.shop-product-gallery-thumb img { height: 100%; object-fit: contain; width: 100%; }
.shop-product-gallery-count { align-items: center; color: var(--shop-brand); display: flex; font-size: 0.8rem; font-weight: 800; justify-content: center; }
.shop-product-identity { display: flex; flex: 1; flex-direction: column; padding: 1.1rem; }
.shop-product-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0; }
.shop-product-tags span { background: var(--shop-soft); border-radius: 0.35rem; color: var(--shop-muted); font-size: 0.8125rem; font-weight: 500; padding: 0.2rem 0.45rem; }
.shop-product-code { color: var(--shop-muted); font-size: 0.8125rem; margin-top: 0.2rem; }
.shop-product-details { border-bottom: 1px solid var(--shop-line); margin-bottom: 1rem; padding-bottom: 1rem; }
.shop-product-description { color: var(--shop-muted); font-size: 0.9375rem; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-line; }
.shop-product-title-row { align-items: flex-start; display: flex; gap: 0.75rem; justify-content: space-between; }
.shop-product-title { color: var(--shop-ink); font-family: var(--shop-font-body); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; }
.shop-product-format-badge { background: var(--shop-warning-soft); border-radius: 999px; color: var(--shop-ink); flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; padding: 0.4rem 0.58rem; }
.shop-product-format-badge.is-unit { background: var(--shop-brand-soft); color: var(--shop-brand); }
.shop-product-card-summary { align-items: stretch; display: flex; flex-direction: column; gap: 0.8rem; margin-top: auto; padding-top: 0.9rem; }
.shop-product-presentations { color: var(--shop-muted); font-size: 0.8125rem; font-weight: 500; line-height: 1.4; margin-top: 0.45rem; }
.shop-product-from-price { color: var(--shop-ink); font-size: 1.25rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.025em; margin-top: 0.3rem; }
.shop-product-options-button { flex: 0 0 auto; }
.shop-card-prices { min-width: 0; }
.shop-card-prices dl { display: grid; gap: 0.5rem; }
.shop-card-price-row { align-items: baseline; display: grid; gap: 0.35rem 0.75rem; grid-template-columns: minmax(0, 1fr) auto; }
.shop-card-price-row dt { align-items: center; color: var(--shop-muted); display: flex; flex-wrap: wrap; font-size: 0.85rem; font-weight: 600; gap: 0.35rem; }
.shop-card-price-row dd { color: var(--shop-ink); font-size: 0.95rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.015em; margin: 0; text-align: right; }
.shop-wholesale-badge { background: var(--shop-brand-soft); border-radius: 999px; color: var(--shop-brand); font-size: 0.8125rem; font-weight: 600; padding: 0.16rem 0.45rem; }
.shop-card-price-note { color: var(--shop-muted); font-size: 0.8125rem; line-height: 1.5; margin-top: 0.65rem; }
.shop-wholesale-help { margin-top: 0.35rem; }
.shop-wholesale-help summary { align-content: center; color: var(--shop-brand); cursor: pointer; font-size: 0.8125rem; min-height: 44px; }
.shop-wholesale-help summary:focus-visible { border-radius: 0.25rem; outline: 2px solid var(--shop-brand); outline-offset: 2px; }
.shop-wholesale-help .shop-card-price-note { margin: 0 0 0.4rem; }
.shop-option-wholesale-help { margin: 0 1rem 0.5rem; }
.shop-purchase-section { margin-top: auto; }
.shop-purchase-section.has-divider { border-top: 1px solid var(--shop-line); margin-top: 0; }
.shop-purchase-heading { align-items: center; background: var(--shop-soft); display: flex; gap: 0.75rem; justify-content: space-between; padding: 0.8rem 1rem; }
.shop-purchase-heading h5 { color: var(--shop-ink); font-size: 0.95rem; font-weight: 700; margin-top: 0.1rem; }
.shop-assorted-mark, .shop-unit-mark { border-radius: 999px; flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; padding: 0.4rem 0.58rem; }
.shop-assorted-mark { background: var(--shop-warning-soft); color: var(--shop-ink); }
.shop-unit-mark { background: var(--shop-brand-soft); color: var(--shop-brand); }
.shop-bundle-note { background: var(--shop-warning-soft); border-radius: 0.75rem; color: var(--shop-ink); font-size: 0.82rem; line-height: 1.45; margin: 0.75rem 1rem 0; padding: 0.75rem; }
.shop-option-row { align-items: center; border-top: 1px solid var(--shop-line); display: flex; gap: 0.8rem; justify-content: space-between; padding: 0.9rem 1rem; }
.shop-money { color: var(--shop-ink); font-size: 1.12rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; }

.shop-options-backdrop { align-items: flex-end; background: rgba(24, 20, 18, 0.72); display: flex; inset: 0; justify-content: center; padding-top: 3rem; position: fixed; z-index: 45; }
.shop-options-panel { animation: shop-panel-in 200ms ease-out both; background: var(--shop-surface); border: 1px solid var(--shop-line); border-radius: 1.4rem 1.4rem 0 0; box-shadow: 0 -20px 60px rgba(25, 17, 13, 0.2); max-height: calc(100vh - 3rem); overflow-y: auto; width: 100%; }
.shop-options-header { align-items: flex-start; backdrop-filter: blur(14px); background: rgba(255, 255, 255, 0.94); background: color-mix(in srgb, var(--shop-surface) 94%, transparent); border-bottom: 1px solid var(--shop-line); display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 1.1rem; position: sticky; top: 0; z-index: 2; }
.shop-options-close { align-items: center; background: var(--shop-soft); border: 1px solid var(--shop-line); border-radius: 50%; color: var(--shop-ink); display: flex; flex: 0 0 auto; font-size: 1.6rem; height: 2.75rem; justify-content: center; line-height: 1; width: 2.75rem; }
.shop-options-layout { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.shop-options-media { background: linear-gradient(145deg, var(--shop-soft), var(--shop-surface)); border-bottom: 1px solid var(--shop-line); }
.shop-options-image-button { aspect-ratio: 16 / 10; background: transparent; border: 0; cursor: zoom-in; display: block; overflow: hidden; position: relative; width: 100%; }
.shop-options-image-button img { height: 100%; object-fit: contain; padding: 1rem; width: 100%; }
.shop-options-image-button span { backdrop-filter: blur(10px); background: rgba(36, 31, 32, 0.82); border-radius: 999px; bottom: 0.8rem; color: #fff; font-size: 0.76rem; font-weight: 700; padding: 0.48rem 0.72rem; position: absolute; right: 0.8rem; }
.shop-options-content { min-width: 0; padding: 1.1rem; }
.shop-buy-mode-grid { display: grid; gap: 0.7rem; margin-top: 1rem; }
.shop-buy-mode { background: var(--shop-soft); border: 2px solid transparent; border-radius: 1rem; color: var(--shop-muted); min-height: 6rem; padding: 1rem; text-align: left; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.shop-buy-mode:hover { border-color: var(--shop-brand); transform: translateY(-1px); }
.shop-buy-mode.is-active { background: var(--shop-brand-soft); border-color: var(--shop-brand); color: var(--shop-ink); }
.shop-buy-mode-title { color: var(--shop-ink); display: block; font-family: var(--shop-font-body); font-size: 1.08rem; font-weight: 600; margin-bottom: 0.3rem; }
.shop-buy-mode span:last-child { display: block; font-size: 0.84rem; font-weight: 600; }
.shop-options-prompt { background: var(--shop-soft); border-radius: 1rem; color: var(--shop-muted); display: flex; flex-direction: column; font-size: 0.87rem; gap: 0.25rem; margin-top: 1rem; padding: 1rem; }
.shop-options-prompt strong { color: var(--shop-ink); }
.shop-option-section { border: 1px solid var(--shop-line); border-radius: 1.1rem; margin-top: 1rem; overflow: hidden; }
.shop-option-section-title { align-items: center; background: var(--shop-soft); display: flex; gap: 1rem; justify-content: space-between; padding: 1rem; }
.shop-option-list .shop-option-row:first-child { border-top: 0; }
.shop-bundle-groups { display: grid; gap: 0.75rem; padding: 1rem; }
.shop-bundle-group { border: 1px solid var(--shop-line); border-radius: 0.95rem; overflow: hidden; }
.shop-bundle-heading { align-items: center; background: var(--shop-soft); cursor: pointer; display: grid; gap: 0.55rem; grid-template-columns: minmax(0, 1fr) auto 1rem; list-style: none; padding: 0.85rem; }
.shop-bundle-heading::-webkit-details-marker { display: none; }
.shop-bundle-heading::marker { content: ''; }
.shop-bundle-heading:focus-visible { outline: 3px solid var(--shop-brand); outline-offset: -3px; }
.shop-bundle-heading-label { align-items: center; display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; min-width: 0; }
.shop-presentation-badge { background: var(--shop-brand-soft); border-radius: 999px; color: var(--shop-brand); display: inline-flex; font-size: 0.75rem; font-weight: 800; padding: 0.35rem 0.6rem; white-space: nowrap; }
.shop-bundle-availability { color: var(--shop-muted); font-size: 0.8rem; font-weight: 600; }
.shop-bundle-heading-price { display: flex; flex-direction: column; text-align: right; }
.shop-bundle-heading-price small { color: var(--shop-muted); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.shop-bundle-heading-price strong { color: var(--shop-ink); font-size: 0.95rem; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.shop-bundle-chevron { color: var(--shop-muted); height: 1rem; transition: transform 160ms ease; width: 1rem; }
.shop-bundle-group[open] .shop-bundle-chevron { transform: rotate(180deg); }
.shop-bundle-row { align-items: center; border-top: 1px solid var(--shop-line); display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: space-between; padding: 0.85rem; }
.shop-bundle-identity { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.shop-bundle-code { background: var(--shop-brand-soft); border: 1px solid var(--shop-line); border-radius: 0.55rem; color: var(--shop-brand); display: inline-block; font-size: 0.88rem; font-variant-numeric: tabular-nums; font-weight: 800; overflow-wrap: anywhere; padding: 0.35rem 0.6rem; }
.shop-bundle-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.45rem; margin-left: auto; }
.shop-bundle-actions .shop-btn { font-size: 0.8rem; padding: 0.55rem 0.7rem; }
.shop-composition-trigger svg { flex: 0 0 auto; height: 1rem; width: 1rem; }
.shop-composition-view { margin-inline: auto; max-width: 45rem; }
.shop-composition-content { padding: 1.25rem; }
.shop-composition-content h4 { font-size: clamp(1.6rem, 4vw, 2.15rem); margin-top: 0.35rem; }
.shop-composition-content h4:focus { outline: none; }
.shop-composition-identity { align-items: center; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.shop-composition-intro { font-size: 0.9rem; margin-top: 0.85rem; }
.shop-composition-colors { display: grid; gap: 0.9rem; margin-top: 1.2rem; }
.shop-composition-color { border: 1px solid var(--shop-line); border-radius: 0.9rem; overflow: hidden; }
.shop-composition-color-heading { align-items: center; background: var(--shop-soft); display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: space-between; padding: 0.8rem 1rem; }
.shop-composition-color-heading h5 { color: var(--shop-ink); font-size: 0.95rem; font-weight: 800; overflow-wrap: anywhere; }
.shop-composition-color-heading span { color: var(--shop-muted); font-size: 0.8rem; font-weight: 600; }
.shop-composition-color ul { list-style: none; padding: 0.35rem 1rem; }
.shop-composition-color li { align-items: baseline; color: var(--shop-muted); display: flex; gap: 0.75rem; justify-content: space-between; padding: 0.55rem 0; }
.shop-composition-color li + li { border-top: 1px solid var(--shop-line); }
.shop-composition-color li > span { color: var(--shop-ink); font-weight: 400; }
.shop-composition-color li > span strong { font-size: inherit; font-weight: 800; white-space: normal; }
.shop-composition-color li strong { color: var(--shop-ink); font-size: 0.9rem; white-space: nowrap; }
.shop-composition-total { color: var(--shop-ink); font-size: 1rem; margin-top: 1.1rem; text-align: right; }
.shop-composition-note { background: var(--shop-warning-soft); border-radius: 0.8rem; color: var(--shop-ink); font-size: 0.85rem; margin-top: 0.8rem; padding: 0.85rem; }
.shop-composition-footer { align-items: center; background: var(--shop-surface); border-top: 1px solid var(--shop-line); bottom: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between; padding: 1rem 1.25rem; position: sticky; }
.shop-composition-price { display: flex; flex-direction: column; font-size: 0.8rem; gap: 0.15rem; }
.shop-composition-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.shop-composition-action-help { flex-basis: 100%; font-size: 0.75rem; line-height: 1.5; margin: 0; }
.shop-options-panel.is-composition { display: flex; flex-direction: column; height: calc(100dvh - 3rem); overflow: hidden; }
.shop-options-panel.is-composition .shop-options-header { flex-shrink: 0; }
.shop-options-panel.is-composition .shop-composition-view { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; width: 100%; }
.shop-options-panel.is-composition .shop-composition-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.shop-options-panel.is-composition .shop-composition-footer { flex-shrink: 0; position: static; }
.shop-unit-selectors { display: grid; gap: 1.1rem; padding: 1rem; }
.shop-unit-selection { align-items: center; border-top: 1px solid var(--shop-line); display: flex; gap: 1rem; justify-content: space-between; padding: 1rem; }
.shop-unit-selection-action { align-items: center; display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 0.75rem; }
.shop-unit-price { display: flex; flex-direction: column; gap: 0.2rem; }

@keyframes shop-panel-in {
    from { opacity: 0; transform: translateY(1.25rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shop-card-in {
    from { opacity: 0; transform: translateY(0.4rem); }
    to { opacity: 1; transform: translateY(0); }
}

.shop-filter-panel { background: var(--shop-surface); border: 1px solid var(--shop-line); border-radius: 1.1rem; padding: 1rem; }
.shop-filter-panel-heading { display: grid; gap: 0.25rem; margin-bottom: 1rem; }
.shop-filter-title, .shop-filter-caption { color: var(--shop-ink); font-family: var(--shop-font-body); font-size: 0.9375rem; font-weight: 600; }
.shop-filter-help { color: var(--shop-muted); font-size: 0.8125rem; line-height: 1.5; margin-bottom: 0.65rem; }
.shop-filter-unit-help { border-top: 1px solid var(--shop-line); margin-top: 1rem; padding-top: 0.85rem; }
.shop-filter-footer { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: flex-end; margin-top: 1rem; }
.shop-active-filters { margin-bottom: 1rem; }
.shop-filter-caption { margin-bottom: 0.5rem; }
.shop-filter-caption .shop-muted { font-size: 0.8125rem; font-weight: 400; }
.shop-active-filter-list { align-items: center; display: flex; flex-wrap: wrap; gap: 0 0.4rem; }
.shop-active-filter { align-items: center; background: transparent; border: 0; border-radius: 999px; color: var(--shop-brand); cursor: pointer; display: inline-flex; font-size: 0.75rem; font-weight: 500; max-width: 100%; min-height: 44px; padding: 0.4rem 0; text-align: left; }
.shop-active-filter > span { background: var(--shop-brand-soft); border: 1px solid var(--shop-line); border-radius: 999px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; padding: 0.25rem 0.65rem; }
.shop-active-filter:hover > span { border-color: var(--shop-brand); }
.shop-active-filter:focus-visible { outline: 2px solid var(--shop-brand); outline-offset: 2px; }
.shop-clear-filters { font-size: 0.8125rem; padding: 0.5rem; }
.shop-results-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; margin-bottom: 1rem; }
.shop-results-count { color: var(--shop-muted); font-size: 0.875rem; }
.shop-sort-control { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 100%; }
.shop-sort-control label { color: var(--shop-ink); font-size: 0.875rem; font-weight: 600; }
.shop-sort-control .shop-select { flex: 1; font-size: 0.875rem; min-width: 0; width: auto; }
.shop-filter-group + .shop-filter-group { border-top: 1px solid var(--shop-line); margin-top: 1rem; padding-top: 1rem; }

.shop-cart-line { align-items: center; border: 1px solid var(--shop-line); border-radius: 1rem; display: grid; gap: 0.9rem; grid-template-columns: 5rem minmax(0, 1fr) auto; padding: 1rem; }
.shop-cart-photo { align-items: center; align-self: start; background: transparent; border: 0; color: var(--shop-brand); display: flex; flex-direction: column; font-size: 0.75rem; font-weight: 700; gap: 0.35rem; width: 5rem; }
.shop-cart-photo-frame { align-items: center; aspect-ratio: 4 / 5; background: linear-gradient(145deg, var(--shop-soft), var(--shop-surface)); border: 1px solid var(--shop-line); border-radius: 0.8rem; display: flex; justify-content: center; overflow: hidden; width: 100%; }
.shop-cart-photo-frame img { height: 100%; object-fit: contain; padding: 0.25rem; transition: transform 180ms ease; width: 100%; }
.shop-cart-photo:not(.is-empty):hover .shop-cart-photo-frame img { transform: scale(1.04); }
.shop-cart-photo-frame svg { color: var(--shop-muted); opacity: 0.55; width: 1.7rem; }
.shop-cart-photo-label { line-height: 1; }
.shop-cart-photo.is-empty { color: var(--shop-muted); }
.shop-qty { align-items: center; background: var(--shop-soft); border-radius: 999px; display: inline-flex; padding: 0.2rem; }
.shop-qty button { align-items: center; border-radius: 50%; display: flex; height: 2.75rem; justify-content: center; width: 2.75rem; }
.shop-qty span { min-width: 2rem; text-align: center; }
.shop-summary { background: var(--shop-soft); border-radius: 1rem; padding: 1rem; }
.shop-success-note { background: var(--shop-success-soft); border-radius: 0.8rem; color: var(--shop-success); padding: 0.75rem; }
.shop-options-feedback { font-size: 0.85rem; line-height: 1.5; margin-top: 0.65rem; overflow-wrap: anywhere; }
.shop-options-feedback-error { background: var(--shop-error-soft); border-radius: 0.8rem; color: var(--shop-error); padding: 0.75rem; }
.shop-badge-brand { background: var(--shop-brand-soft); color: var(--shop-brand); }
.shop-wholesale-text { color: var(--shop-brand); }
.shop-selection-in-cart { color: var(--shop-success); font-size: 0.8125rem; font-weight: 600; }
.shop-cart-price-label { color: var(--shop-muted); font-size: 0.8125rem; margin-top: 0.35rem; }
.shop-cart-quantity-label { color: var(--shop-muted); flex-basis: 100%; font-size: 0.8125rem; text-align: right; }
.shop-confirm-summary { align-items: baseline; background: var(--shop-soft); border-radius: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; margin: 1rem 0 0.75rem; padding: 1rem; }
.shop-image-backdrop { align-items: center; background: rgba(21, 18, 20, 0.86); display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 60; }
.shop-image-viewer { background: var(--shop-surface); border: 1px solid var(--shop-line); border-radius: 1.2rem; display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); max-width: 56rem; overflow: hidden; width: 100%; }
.shop-image-header { align-items: center; border-bottom: 1px solid var(--shop-line); display: flex; flex-shrink: 0; gap: 1rem; justify-content: space-between; padding: 0.8rem 1rem; }
.shop-image-name { color: var(--shop-ink); font-weight: 600; overflow-wrap: anywhere; }
.shop-image-header .shop-muted { font-size: 0.8125rem; }
.shop-image-stage { background: var(--shop-soft); flex: 1 1 auto; min-height: 8rem; overflow: auto; overscroll-behavior: contain; position: relative; }
.shop-image-stage > img { display: block; height: min(55dvh, 36rem); object-fit: contain; width: 100%; }
.shop-image-stage.is-zoomed > img { height: auto; max-height: none; max-width: none; width: 200%; }
.shop-image-state { padding: 2rem; text-align: center; }
.shop-image-controls { align-items: center; display: flex; flex-shrink: 0; gap: 0.6rem; justify-content: center; padding: 0.65rem 1rem; }
.shop-image-thumbnails { display: flex; flex-shrink: 0; gap: 0.5rem; overflow-x: auto; padding: 0.25rem 1rem 0.65rem; }
.shop-image-thumbnails button { background: var(--shop-soft); border: 2px solid var(--shop-line); border-radius: 0.6rem; flex: 0 0 3.5rem; height: 3.5rem; overflow: hidden; }
.shop-image-thumbnails button[aria-current="true"] { border-color: var(--shop-brand); }
.shop-image-thumbnails button:focus-visible { outline: 3px solid var(--shop-brand); outline-offset: 2px; }
.shop-image-thumbnails img { height: 100%; object-fit: contain; width: 100%; }
.shop-image-help { flex-shrink: 0; font-size: 0.8125rem; padding: 0 1rem 0.8rem; text-align: center; }

/* Superficies y lectura: la fotografía y los títulos principales llevan el protagonismo. */
.shop-category-head, .shop-category-product-image, .shop-product-media,
.shop-options-media, .shop-cart-photo-frame { background: var(--shop-soft); }
.shop-options-header .shop-heading, .shop-option-section-title .shop-heading {
    font-family: var(--shop-font-body);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.4;
}
.shop-product-tags span, .shop-presentation-badge, .shop-assorted-mark,
.shop-unit-mark, .shop-cart-photo, .shop-composition-action-help,
.shop-bundle-availability, .shop-composition-price {
    font-size: 0.8125rem;
}
.shop-product-from-price { font-weight: 700; }
.shop-cart-line .font-bold { font-weight: 600; }

.shop-quote-access-space { height: 6.5rem; }
.shop-quote-access { align-items: center; background: var(--shop-surface); border: 1px solid var(--shop-line); border-radius: 1rem; bottom: 1rem; box-shadow: var(--shop-shadow-hover); display: flex; gap: 1rem; max-width: calc(100% - 2rem); padding: 0.75rem; position: fixed; right: 1rem; z-index: 35; }
.shop-quote-access-summary { display: flex; flex-direction: column; min-width: 0; }
.shop-quote-access-caption { color: var(--shop-muted); font-size: 0.75rem; }
.shop-quote-access-total { color: var(--shop-ink); font-size: 0.9375rem; font-variant-numeric: tabular-nums; font-weight: 700; overflow-wrap: anywhere; }
.shop-quote-access-empty { color: var(--shop-ink); font-size: 0.8125rem; }
.shop-quote-access-button { flex-shrink: 0; font-size: 0.875rem; }
.shop-quote-access-button svg { flex-shrink: 0; width: 1rem; }
.shop-quote-access-count { font-variant-numeric: tabular-nums; white-space: nowrap; }

.shop-nav { background: rgba(255, 255, 255, 0.96); background: color-mix(in srgb, var(--shop-surface) 94%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--shop-line); position: sticky; top: 0; z-index: 30; }
.shop-brand-link { align-items: center; border-radius: 0.65rem; display: inline-flex; min-height: 44px; padding: 0.2rem; }
.shop-brand-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--shop-brand) 35%, transparent); outline-offset: 2px; }
.shop-brand-logo { display: block; filter: none; height: 2.35rem; object-fit: contain; transition: opacity 160ms ease, transform 160ms ease; width: auto; }
.shop-brand-link:hover .shop-brand-logo { opacity: 0.82; transform: translateY(-1px); }
html[data-theme="dark"] .shop-brand-logo { filter: brightness(0) invert(1); }
.shop-mobile-nav { background: var(--shop-surface); border-top: 1px solid var(--shop-line); bottom: 0; display: none; left: 0; position: fixed; right: 0; z-index: 32; }
.shop-mobile-nav a { color: var(--shop-muted); flex: 1; font-size: 0.82rem; font-weight: 700; padding: 0.65rem 0.3rem; text-align: center; }
html[data-theme="dark"] .shop-nav { background: var(--shop-surface); }

@media (min-width: 768px) {
    .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 28rem)); }
    .shop-buy-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .shop-browse-welcome-main { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; }
    .shop-options-backdrop { align-items: center; padding: 2rem; }
    .shop-options-panel { border-radius: 1.4rem; max-height: min(90vh, 52rem); max-width: 64rem; }
    .shop-options-panel.is-composition { height: min(90dvh, 52rem); }
    .shop-options-layout { grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr); }
    .shop-options-media { border-bottom: 0; border-right: 1px solid var(--shop-line); }
    .shop-options-image-button { aspect-ratio: 4 / 5; }
    .shop-options-content { padding: 1.4rem; }
}

@media (max-width: 639px) {
    .shop-options-feedback { font-size: 0.8rem; line-height: 1.35; padding: 0.5rem 0.65rem; }
    body.has-shop-nav { padding-bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px)); }
    .shop-mobile-nav { display: flex; height: calc(3.25rem + env(safe-area-inset-bottom, 0px)); }
    .shop-mobile-nav a { align-items: center; display: flex; justify-content: center; }
    .shop-quote-access-space { height: 7rem; }
    .shop-quote-access { border-bottom: 0; border-left: 0; border-radius: 0; border-right: 0; bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px)); box-shadow: none; gap: 0.65rem; justify-content: space-between; left: 0; max-width: none; padding: 0.65rem 0.75rem; right: 0; }
    .shop-quote-access-button { gap: 0.35rem; padding: 0.6rem 0.75rem; }
    .shop-mobile-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }
    .shop-brand-logo { height: 2.05rem; }
    .shop-category-shortcut { font-size: 0.9rem; max-width: 15rem; }
    .shop-option-row { align-items: stretch; flex-direction: column; }
    .shop-option-row .shop-btn { width: 100%; }
    .shop-product-title-row, .shop-purchase-heading { align-items: flex-start; flex-direction: column; }
    .shop-product-card-summary { align-items: stretch; flex-direction: column; }
    .shop-product-options-button { width: 100%; }
    .shop-cart-line { align-items: start; grid-template-columns: 4.35rem minmax(0, 1fr); padding: 0.8rem; }
    .shop-cart-photo { width: 4.35rem; }
    .shop-cart-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .shop-option-section-title, .shop-unit-selection { align-items: stretch; flex-direction: column; }
    .shop-unit-selection-action { justify-content: space-between; }
    .shop-bundle-groups { padding: 0.75rem; }
    .shop-bundle-heading { grid-template-columns: minmax(0, 1fr) 1rem; }
    .shop-bundle-heading-price { align-items: flex-start; flex-direction: column; gap: 0.15rem; grid-column: 1; grid-row: 2; text-align: left; }
    .shop-bundle-heading-price small { letter-spacing: 0; text-transform: none; }
    .shop-bundle-chevron { grid-column: 2; grid-row: 1 / 3; }
    .shop-bundle-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-left: 0; width: 100%; }
    .shop-composition-content { padding: 1rem; }
    .shop-composition-footer { padding: 0.85rem 1rem max(0.85rem, env(safe-area-inset-bottom)); }
    .shop-composition-footer .shop-btn { width: 100%; }
    .shop-composition-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}