:root {
    --paper: #fbf7ef;
    --paper-warm: #f5ece1;
    --white: #fffdf8;
    --ink: #211615;
    --muted: #75635d;
    --wine: #6b1429;
    --line: rgba(33, 22, 21, 0.12);
    --soft-line: rgba(107, 20, 41, 0.12);
    --blush: #fff1e9;
    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body: "Inter", Arial, sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

* {
    box-sizing: border-box;
}

/* Safety net: an uploaded photo/video's native resolution must never dictate page layout.
   Specific components (product hero, gallery thumbs, cards) already crop via object-fit inside
   a fixed-size box; this is the fallback for anything that isn't, so a very large/high-res file
   always scales down to fit instead of stretching its container or the page. */
img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-body);
    background:
        linear-gradient(90deg, rgba(33, 22, 21, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, #fffaf3 0%, var(--paper) 52%, #f8efe6 100%);
    background-size: calc((100vw - 96px) / 6) 100%, auto;
    overflow-x: hidden;
}

@media (min-width: 981px) {
    html,
    body {
        height: 100%;
        overflow: hidden;
    }
}

button,
a {
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

.page-shell {
    width: 100%;
    height: 100svh;
    min-height: 0;
    display: grid;
    grid-template-rows: 112px minmax(0, 1fr);
}

/* Unified header: identical structure/sizing to the customer app's header (menu, logo,
   notifications) so the storefront, product page, account page, and app all read as one
   product instead of the nav-menu-plus-cart-plus-account layout this replaced. */
.site-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 112px;
    padding: 0 clamp(24px, 4vw, 72px);
}

.site-icon-btn {
    position: relative;
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--wine);
    background: rgba(255, 253, 248, 0.8);
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(33, 22, 21, 0.08);
    transition: transform 220ms var(--ease), border-color 220ms ease, background 220ms ease;
}

.site-icon-btn:hover {
    border-color: rgba(107, 20, 41, 0.3);
    background: var(--white);
    transform: translateY(-2px);
}

.site-icon-btn svg {
    width: 19px;
    height: 19px;
}

.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.brand-logo {
    display: block;
    height: 90px;
    width: auto;
    max-width: 300px;
    object-fit: contain;
    filter: drop-shadow(0 18px 20px rgba(107, 20, 41, 0.13));
}

.cart-count {
    position: absolute;
    right: -4px;
    top: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--wine);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
}

.cart-count[hidden] {
    display: none;
}

.section-stage {
    min-width: 0;
    min-height: 0;
}

.screen-section {
    display: none;
}

.screen-section.is-visible {
    width: min(100%, 1308px);
    height: calc(100svh - 112px);
    min-height: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(390px, 0.94fr) minmax(500px, 1.06fr);
    gap: clamp(24px, 3vw, 44px);
    padding: 10px clamp(24px, 3.6vw, 48px) 24px;
}

.content-column,
.visual-column {
    min-width: 0;
    align-self: stretch;
}

.content-column {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(24px, 2.45vw, 34px);
    border: 1px solid var(--soft-line);
    background:
        radial-gradient(circle at 92% 8%, rgba(107, 20, 41, 0.06), transparent 36%),
        linear-gradient(145deg, rgba(255, 253, 248, 0.95), rgba(251, 247, 239, 0.74));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 28px 90px rgba(33, 22, 21, 0.08);
    transform: perspective(1200px) rotateX(var(--panel-tilt-x, 0deg)) rotateY(var(--panel-tilt-y, 0deg));
    transition: transform 260ms var(--ease), box-shadow 260ms ease, border-color 260ms ease;
}

.content-column:hover {
    border-color: rgba(107, 20, 41, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 34px 110px rgba(107, 20, 41, 0.12);
}

.content-column::before {
    content: "";
    width: 44px;
    height: 1px;
    margin-bottom: 18px;
    background: var(--wine);
}

h1 {
    margin: 0;
    max-width: 9ch;
    min-height: 1.84em;
    color: var(--wine);
    font-family: var(--font-display);
    font-size: clamp(52px, 4.4vw, 76px);
    font-weight: 600;
    line-height: 0.92;
    text-shadow: 0 16px 34px rgba(107, 20, 41, 0.08);
}

h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 500;
}

.subtitle {
    margin: 14px 0 0;
    min-height: 1.1em;
    color: var(--wine);
    font-family: var(--font-display);
    font-size: clamp(22px, 1.55vw, 28px);
    font-style: italic;
    font-weight: 500;
    line-height: 1.08;
}

.section-copy {
    max-width: 42ch;
    margin: 12px 0 0;
    min-height: 5.34em;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.66;
}

.ritual-signals {
    margin-top: 18px;
    min-height: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ritual-signals span {
    min-height: 30px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: rgba(33, 22, 21, 0.72);
    background: rgba(255, 253, 248, 0.54);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.product-meta {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.price-block {
    display: flex;
}

.price-current {
    min-width: 104px;
    margin: 0;
    padding: 8px 16px 9px;
    border: 1px solid rgba(107, 20, 41, 0.16);
    border-radius: 999px;
    color: var(--wine);
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    background:
        linear-gradient(135deg, rgba(255, 253, 248, 0.94), rgba(255, 241, 233, 0.72));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 14px 34px rgba(107, 20, 41, 0.08);
}

.product-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stock-message {
    min-height: 14px;
    margin: -2px 0 0;
    color: var(--wine);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.stock-message:empty {
    display: none;
}

.primary-action,
.secondary-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 24px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 14px 32px rgba(33, 22, 21, 0.06);
    transition: transform 260ms var(--ease), border-color 220ms ease, background 260ms ease, color 220ms ease, box-shadow 260ms var(--ease);
}

.primary-action {
    border: 1px solid var(--wine);
    background: linear-gradient(135deg, var(--wine), #8a1f38);
    color: var(--white);
}

.secondary-action {
    border: 1px solid rgba(107, 20, 41, 0.24);
    background: rgba(255, 253, 248, 0.38);
    color: var(--wine);
}

.primary-action:hover,
.secondary-action:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 20px 42px rgba(107, 20, 41, 0.16);
}

.primary-action:active,
.secondary-action:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 8px 18px rgba(107, 20, 41, 0.14);
    transition-duration: 100ms;
}

.secondary-action:hover {
    border-color: var(--wine);
    background: var(--white);
}

.recommendations-panel {
    width: 100%;
    margin-top: auto;
    padding-top: 24px;
}

.recommendations-title {
    margin: 0 0 10px;
    color: rgba(107, 20, 41, 0.84);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.product-card-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mini-product-card {
    width: 100%;
    min-width: 0;
    position: relative;
    height: 88px;
    min-height: 88px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 3px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(107, 20, 41, 0.08);
    border-radius: 22px;
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.98), transparent 42%),
        linear-gradient(145deg, rgba(255, 241, 233, 0.9), rgba(255, 250, 245, 0.96));
    cursor: pointer;
    text-align: left;
    box-shadow: 0 14px 34px rgba(107, 20, 41, 0.08);
    transform: perspective(900px) rotateX(var(--card-tilt-x, 0deg)) rotateY(var(--card-tilt-y, 0deg));
    transition: opacity 200ms ease, transform 220ms var(--ease), box-shadow 220ms ease, border-color 220ms ease;
}

.mini-product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.52) 42%, transparent 72%);
    opacity: 0;
    transform: translateX(-38%);
    transition: opacity 220ms ease, transform 520ms var(--ease);
    pointer-events: none;
}

.mini-product-card:hover {
    border-color: rgba(107, 20, 41, 0.18);
    box-shadow: 0 18px 44px rgba(107, 20, 41, 0.14);
    transform: translateY(-3px) perspective(900px) rotateX(var(--card-tilt-x, 0deg)) rotateY(var(--card-tilt-y, 0deg));
}

.mini-product-card:hover::after {
    opacity: 1;
    transform: translateX(42%);
}

.mini-product-card.is-hidden {
    display: none;
}

.mini-card-thumb {
    grid-row: 1 / 3;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 10px 24px rgba(33, 22, 21, 0.08);
}

.mini-card-thumb img,
.mini-card-thumb video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.mini-card-copy {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: 4px;
    align-self: end;
}

.mini-card-name {
    color: var(--wine);
    font-family: var(--font-display);
    font-size: clamp(19px, 1.28vw, 24px);
    font-weight: 600;
    line-height: 0.98;
}

.mini-card-size {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.12;
    font-weight: 800;
    text-transform: uppercase;
}

.mini-card-price {
    color: var(--wine);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.visual-column {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 78px;
    gap: 12px;
}

.product-visual-panel {
    position: relative;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 28px 90px rgba(33, 22, 21, 0.1);
    transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 280ms var(--ease), box-shadow 280ms ease;
}

.product-visual-panel:hover {
    box-shadow: 0 34px 110px rgba(33, 22, 21, 0.13);
}

/* Positioned absolutely against the panel (not sized via CSS Grid/percentage-height) so the
   box is always exactly the panel's own fixed size no matter the source file's native
   resolution or orientation - a portrait/tall upload can no longer inflate the panel or spill
   past it. object-fit: cover fills the box edge-to-edge with no letterbox gaps, cropping any
   part of the image/video that doesn't match the box's own proportions. */
.product-visual-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: opacity 180ms ease, transform 420ms var(--ease), filter 240ms ease;
}

.product-visual-video {
    background: var(--white);
}

.product-visual-media.is-hidden {
    display: none;
}

.product-visual-media.is-swapping {
    opacity: 0;
    transform: scale(1.01);
}

/* Horizontally scrollable so any number of admin-uploaded images/videos fit without squeezing
   or leaving empty grid slots - a fixed 3-column grid broke as soon as a product had anything
   other than exactly 3 media items. */
.thumb-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.gallery-thumb {
    flex: 0 0 78px;
    width: 78px;
    height: 78px;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    opacity: 0.76;
    box-shadow: 0 14px 32px rgba(33, 22, 21, 0.08);
    transition: opacity 200ms ease, border-color 200ms ease, transform 200ms var(--ease);
}

.gallery-thumb.is-selected,
.gallery-thumb:hover {
    border-color: rgba(107, 20, 41, 0.28);
    opacity: 1;
    transform: translateY(-2px);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.gallery-thumb span {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--wine);
    background: rgba(116, 17, 42, 0.08);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.cart-drawer.is-open {
    opacity: 1;
    pointer-events: auto;
}

.drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(33, 22, 21, 0.32);
}

.drawer-panel {
    position: absolute;
    right: 18px;
    top: 18px;
    bottom: 18px;
    width: min(420px, calc(100vw - 36px));
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 18px;
    padding: 26px;
    background: var(--white);
    box-shadow: 0 34px 100px rgba(33, 22, 21, 0.22);
    transform: translateX(18px);
    transition: transform 220ms ease;
}

.cart-drawer.is-open .drawer-panel {
    transform: translateX(0);
}

.drawer-head,
.cart-summary > div,
.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.drawer-head button,
.cart-remove {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 28px;
}

.site-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(33, 22, 21, 0.32);
}

.site-modal {
    width: 100%;
    max-width: 340px;
    padding: 28px 26px;
    background: var(--white);
    box-shadow: 0 34px 100px rgba(33, 22, 21, 0.22);
    text-align: center;
}

.site-modal h2 {
    margin: 0 0 6px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 24px;
}

.site-modal-logo {
    display: block;
    height: 44px;
    width: auto;
    margin: 0 auto 18px;
    object-fit: contain;
}

.site-menu-list {
    display: grid;
    gap: 2px;
    text-align: left;
}

.site-menu-list a,
.site-menu-list button {
    display: block;
    width: 100%;
    padding: 12px 8px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.site-menu-list a:hover,
.site-menu-list button:hover {
    color: var(--wine);
}

.site-menu-divider {
    height: 1px;
    margin: 10px 0;
    background: var(--line);
}

.site-notif-empty {
    margin: 6px 0 20px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.site-modal .secondary-action {
    width: 100%;
    margin-top: 6px;
}

.cart-items {
    display: grid;
    align-content: start;
    gap: 12px;
    overflow: auto;
}

.cart-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.cart-item h3 {
    margin: 0 0 5px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
}

.cart-item p,
.cart-empty {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-item-actions button:not(.cart-remove) {
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.cart-summary {
    display: grid;
    gap: 16px;
}

.cart-summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.cart-summary strong {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 600;
}

.cart-summary .primary-action:disabled {
    opacity: 0.44;
    cursor: not-allowed;
    transform: none;
}

.primary-action:disabled,
.secondary-action:disabled {
    opacity: 0.46;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 980px) {
    .page-shell {
        grid-template-rows: 96px auto;
    }

    .screen-section.is-visible {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .content-column,
    .visual-column {
        width: 100%;
    }

    .content-column {
        min-height: auto;
        height: auto;
    }

    /* Flex column, not grid-template-rows: the panel's actual height on the product page is
       aspect-ratio-driven now (#shop .product-visual-panel, align-self: start - it never
       stretches to fill a grid track), so a fixed minmax() row height could disagree with the
       panel's real rendered height and let the thumb-strip's row overlap it. Flex just stacks
       each child at its own natural height with a fixed gap - nothing to keep in sync. */
    .visual-column {
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: auto;
    }

    /* align-self: start means something different once the parent switched from grid to flex
       above - in a flex column it now controls the CROSS axis (width), not vertical stretch, so
       the panel stopped stretching to full width. With no explicit width of its own (its image
       is position: absolute and contributes nothing to intrinsic sizing) and no width, its
       aspect-ratio had nothing to compute a height from - the panel was collapsing to ~0 and the
       "main image" was effectively invisible, only the thumbnail strip showed. Force it back to
       full width here so aspect-ratio has something real to work with. */
    #shop .product-visual-panel {
        align-self: stretch;
    }

    /* Product page only: show media (image/video) before product details on mobile-width layouts, matching standard ecommerce PDP order. Home hero is untouched. */
    #shop.screen-section.is-visible .visual-column {
        order: -1;
    }
}

@media (max-width: 700px) {
    body {
        background-size: 50% 100%, auto;
    }

    .page-shell {
        grid-template-rows: 94px auto;
    }

    .site-header {
        min-height: 94px;
        padding: 0 16px;
    }

    .brand-logo {
        height: 62px;
        max-width: 190px;
    }

    .site-icon-btn {
        width: 40px;
        height: 40px;
    }

    .site-icon-btn svg {
        width: 17px;
        height: 17px;
    }

    .screen-section.is-visible {
        padding: 0 18px 28px;
        gap: 22px;
    }

    .content-column {
        padding: 22px 18px;
    }

    h1 {
        font-size: clamp(58px, 17vw, 88px);
        min-height: auto;
    }

    .subtitle {
        margin-top: 18px;
        font-size: 25px;
    }

    .section-copy {
        font-size: 12.5px;
        min-height: auto;
    }

    .product-meta {
        margin-top: 24px;
        gap: 10px;
    }

    .product-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .price-current {
        width: 100%;
        font-size: 38px;
        text-align: center;
    }

    .primary-action,
    .secondary-action {
        width: 100%;
        padding: 0 10px;
    }

    .recommendations-panel {
        padding-top: 26px;
    }

    .product-card-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .mini-product-card {
        grid-template-columns: 76px minmax(0, 1fr);
        min-height: 106px;
        height: 106px;
        padding: 14px;
        border-radius: 22px;
    }

    .mini-card-thumb {
        width: 76px;
        height: 76px;
    }

    .mini-card-name {
        font-size: 27px;
    }

    .mini-card-size {
        font-size: 11px;
    }

    .mini-card-price {
        font-size: 21px;
    }

    .visual-column {
        gap: 10px;
    }

    .product-visual-panel::after {
        inset: 10px;
    }

    .gallery-thumb {
        flex-basis: 76px;
        width: 76px;
        height: 76px;
    }
}