/* Product Detail Page (PDP) — Theme Archetype Impulse parity
 *
 * The original Dynamis Jewelry PDP uses:
 *   - 2-column grid:    .grid.grid--product-images--partial
 *   - Image (left):     .grid__item.medium-up--one-half.product-single__sticky
 *   - Info (right):     .grid__item.medium-up--one-half > .product-single__meta
 *
 * The original theme.css already defines all the meta-block typography
 * (.product-single__title, .product__price, .product__policies, etc.). This
 * file only adds:
 *   - The 2-column grid layout (`.product-single` is a flex column that
 *     contains the .grid container; we set grid template columns).
 *   - Vertical thumbnail strip on the left of the main image.
 *   - Sales-point, tab, and collapsible styling (matching the same look as
 *     the quick-shop modal — see quick-shop.css for the same patterns).
 *   - Add-to-cart button styling.
 *   - Share buttons.
 *   - Customer reviews stub.
 *   - "Recently viewed" + "You may also like" carousel wrappers.
 */

/* ----------------------------------------------------------------------
 * 1. Page-width container & grid layout
 * ---------------------------------------------------------------------- */

/* The original Archetype theme does NOT use CSS Grid for the PDP layout.
 * It uses a block-level `.grid` container with two `medium-up--one-half`
 * children (each is 50% of the container width). The two halves stack
 * vertically on small screens via `.grid__item` with `small--one-whole`. */
.product-template .page-width {
    max-width: 1500px;
    margin: 0 auto;
    padding: 24px 40px 0;
}

.product-template .product-single {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}

.product-template .product-single__grid {
    display: block; /* The original `.grid` is `display: block`. */
    width: 100%;
}

.product-template .product-single__grid > .grid__item {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    padding-left: 17px; /* The original uses `--grid-gutter: 17px` */
    padding-right: 17px;
    box-sizing: border-box;
}

/* The photos container is ALSO a grid__item, but it needs flex
 * internally (for thumbs + main image side-by-side). The `inline-block`
 * rule above is overridden here with higher specificity. */
.product-template .product-single__grid > .grid__item.product-single__photos {
    display: flex;
    flex-direction: row;
    /* `align-items: flex-start` so the slideshow keeps its natural
     * square size (aspect-ratio: 1/1). The thumb strip's height is
     * synced to the slideshow's height via JavaScript (see
     * product-slideshow.js → syncThumbHeight). When the strip has
     * more thumbs than fit, `overflow-y: auto` makes it scroll. */
    align-items: flex-start;
    gap: 15px;
}

@media (max-width: 749px) {
    .product-template .product-single__grid > .grid__item {
        width: 100%;
    }
}

/* ----------------------------------------------------------------------
 * 2. Photos (left column)
 * ---------------------------------------------------------------------- */

/* Note: `.product-single__photos` display is set in section 1 above
 * (`.product-template .product-single__grid > .grid__item.product-single__photos`)
 * so it overrides the generic `inline-block` on `.grid__item`. */

.product-template .product-single__sticky {
    /* The original "sticky" container keeps the image visible when the
     * user scrolls through long product info. We use position: sticky
     * so the image stays in view while info scrolls past. The original
     * theme uses `top: 20px` (not 24px). */
    position: sticky;
    top: 20px;
}

/* Slideshow viewport — mirrors the Flickity .flickity-viewport pattern
 * used in the quick-shop modal. The original theme uses a SQUARE
 * 1:1 aspect ratio for the main image. Each slide is absolutely
 * positioned and the track is animatable via translateX.
 *
 * IMPORTANT: The viewport is the same width as the main image — NOT the
 * full column. Thumbs live to the LEFT in a separate 80px-wide strip. */
.product-template .product-slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: transparent;
    /* In a flex container (photos = `display: flex; flex-direction: row`),
     * this child fills the remaining width after the 80px thumbs strip
     * (because the strip has `flex-shrink: 0`). The aspect-ratio then
     * forces the height to equal the width, giving a perfectly square
     * image. */
    flex: 0 1 auto;
}
.product-template .product-slideshow__track {
    position: relative;
    width: 100%;
    height: 100%;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Disable transition for the initial transform write on page load.
 * Without this, setting `translateX(0%)` after the page is painted
 * causes the browser to animate from identity matrix to 0 — a
 * pointless ~350ms slide-in animation when the page first appears. */
.product-template .product-slideshow__track.no-transition {
    transition: none;
}

.product-template .product-main-slide {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.product-template .product-slideshow .image-wrap {
    /* The original theme uses the classic padding-bottom: 100% trick
     * to enforce a 1:1 aspect ratio. The image inside then fills it
     * absolutely with object-fit. */
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    background: transparent;
}

.product-template .product-slideshow img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CRITICAL: The original Shopify theme.css sets
 * `.image-wrap img:not([role="presentation"]) { opacity: 0; }`
 * as part of its AOS (Animate On Scroll) fade-in pattern — JS adds
 * an `animate-me` class to reveal them. Our clone doesn't ship the
 * AOS trigger for the product template, so without this override the
 * images stay invisible (opacity: 0). Force the images visible. */
.product-template .product-slideshow img,
.product-template .product-slideshow .image-wrap img {
    opacity: 1;
}

/* Also force the `.animate-me` class to be visible if it gets added
 * later by AOS or any other library. */
.product-template .product-slideshow .animate-me {
    opacity: 1;
    transform: none;
}

/* PhotoSwipe zoom button — the original theme has a small SVG icon in
 * the top-right corner of the main image. */
.product-template .product__photo-zoom {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e5e5e5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Thumbnail strip — VERTICAL strip on the LEFT of the main image
 *
 * The original Archetype theme renders thumbs as a vertical 80px-wide
 * strip beside the main image. Each thumb is 76×76 with NO border
 * (the active state uses different styling). The `order: -1` pushes
 * thumbs to the LEFT in the flex container.
 *
 * IMPORTANT — height constraint:
 *   The original `.product__photos` (parent of thumbs + main image) is
 *   exactly the same height as the main image viewport (e.g. 604px).
 *   We replicate this here by giving the photos container `height: 100%`
 *   and matching the strip's height. The strip's height is set in
 *   section 1 (the flex container override) so it matches the
 *   slideshow. When there are more thumbs than fit, the strip scrolls
 *   internally (overflow-y: auto). */
.product-template .product__thumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Fixed 80px width matching the original `.product__thumbs`. The
     * `order: -1` pushes it to the LEFT of the main image. */
    width: 80px;
    flex-shrink: 0;
    order: -1;
    /* The strip's height is synced to the slideshow's height via JS
     * (see product-slideshow.js → syncThumbHeight). When there are
     * more thumbs than fit, the strip scrolls internally. The
     * explicit `max-height` is also set in JS but we set a baseline
     * here as a fallback before JS loads. */
    max-height: 100%;
    align-self: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    /* Firefox: hide the scrollbar completely. The strip is still
     * scrollable via wheel/touch but no bar is rendered. */
    scrollbar-width: none;
    /* IE/Edge legacy: hide scrollbar. */
    -ms-overflow-style: none;
}

/* The scrollbar is fully hidden so it doesn't appear as a visible
 * grey bar on the strip (matching the original Archetype theme which
 * has no scrollbar visible on its thumb strip). The strip is still
 * internally scrollable when there are more thumbs than fit, but the
 * scrollbar itself takes no visual space. */
.product-template .product__thumbs::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

.product-template .product__thumbs::-webkit-scrollbar-track {
    background: transparent;
}

.product-template .product__thumbs::-webkit-scrollbar-thumb {
    background: transparent;
}

.product-template .product__thumb {
    cursor: pointer;
    border: 0; /* No border on the thumb itself — original has `border: 0px` */
    box-sizing: border-box;
    /* INCREASED from 8px → 12px gap between thumbs for better visual
     * separation. The original Archetype uses a similarly generous
     * spacing in its product layouts. */
    margin-bottom: 12px;
    transition: opacity 0.2s ease;
    background: transparent;
    overflow: hidden;
    /* Active state is indicated via opacity / outline, NOT border. */
}

.product-template .product__thumb:last-child {
    margin-bottom: 0;
}

.product-template .product__thumb img {
    display: block;
    width: 76px;
    height: 76px;
    /* The original theme uses `object-fit: fill` (NOT cover) for
     * thumbnails. Fills the entire 76×76 box, potentially
     * stretching the image slightly. */
    object-fit: fill;
}

.product-template .product__thumb.is-active {
    /* The original indicates the active thumb via a slight opacity
     * reduction OR outline. We use outline to match the clean look
     * (avoid border on the thumb which would shift the layout). */
    outline: 1px solid #000;
    outline-offset: -1px;
}

.product-template .product__thumb:hover:not(.is-active) {
    opacity: 0.7;
}



/* ----------------------------------------------------------------------
 * 3. Meta (right column)
 * ---------------------------------------------------------------------- */

.product-template .product-single__meta {
    padding: 0;
}

/* All meta blocks get a bottom margin so they breathe the same way the
 * original did (each block is `margin-bottom: 25px` in the original theme).
 *
 * IMPORTANT: `.product-block--tab` is excluded — the 25px bottom margin
 * breaks the 1px border-collapse pattern that the quick-view popup uses
 * (consecutive tabs need to share a single 1px divider via `margin-top: -1px`
 * overlap, not a 25px gap). The tabs manage their own spacing. */
.product-template .product-single__meta .product-block:not(.product-block--tab) {
    margin-bottom: 25px;
}

/* Title (.product-single__title) — the original uses Tenor Sans at
 * calc(--typeHeaderSize * .85) = 36px * 0.85 = 30.6px, weight 400,
 * line-height: 1 (exact, no extra spacing), margin-bottom: 10px,
 * text-transform: uppercase. */
.product-template .product-single__title {
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: calc(var(--typeHeaderSize, 36px) * 0.85);
    font-weight: 400;
    line-height: 1;
    margin: 0 0 10px;
    color: #000;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* Price + "Shipping calculated at checkout" — same structure as quick-shop. */
.product-template .product-block--price {
    /* The original wraps the price + shipping in a single block with
     * margin-bottom: 25px (same as all product-block children). */
    margin-bottom: 25px;
}

.product-template .product__price {
    font-family: "Trirong", serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--colorPrice, #1c1d1d);
    letter-spacing: 0.45px;
    line-height: 1.4;
    margin-bottom: 0;
}

.product-template .product__policies {
    /* The original Archetype theme uses the body text color (`#000`)
     * for the "Shipping calculated at checkout" line. NOT a muted
     * gray — the muted look was a misread of the original. The
     * `font-size: .85em` (= 15.3px from the 18px .product-single base)
     * comes from theme.css. */
    font-family: "Trirong", serif;
    font-size: 15.3px;
    color: #000;
    letter-spacing: 0.45px;
    line-height: 1.4;
    margin-top: 8px;
    margin-bottom: 0;
}

.product-template .product__policies a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    position: relative;
    display: inline-block;
    padding-bottom: 1px;
    transition: border-bottom-color 0.2s ease;
}

.product-template .product__policies a:hover {
    border-bottom-color: rgba(0, 0, 0, 0.6);
}

/* ----------------------------------------------------------------------
 * 4. Add to cart button
 * ---------------------------------------------------------------------- */

.product-template .product__add-to-cart {
    width: 100%;
    background: transparent;
    color: #000;
    border: 1px solid #000;
    border-radius: 0;
    padding: 13px 20px;
    height: 50px;
    font-family: "Trirong", serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4.2px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    margin-bottom: 25px;
}

.product-template .product__add-to-cart:hover:not(:disabled) {
    opacity: 0.7;
}

.product-template .product__add-to-cart:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ----------------------------------------------------------------------
 * 5. Sales points — 9 items, vertical, 25×25 icon + Trirong 18px text
 * ---------------------------------------------------------------------- */

.product-template .product-block--sales-point {
    margin-top: 0;
    margin-bottom: 0;
}

.product-template .product-block--sales-point .sales-points {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-template .product-block--sales-point .sales-point {
    display: block;
    line-height: 25.2px;
    margin-bottom: 8px;
}

.product-template .product-block--sales-point .icon-and-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-template .product-block--sales-point .icon-and-text svg {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    fill: #000;
    /* Reset the `margin-right: 10px` set by the global
     * `.sales-point .icon` rule in theme.css. Our flex container
     * (`.icon-and-text`) already provides a `gap: 10px` between the
     * SVG and the text — without this reset the visual gap becomes
     * 20px (10px flex-gap + 10px svg margin-right). */
    margin-right: 0;
}

.product-template .product-block--sales-point .icon-and-text span {
    font-family: "Trirong", serif;
    font-size: 18px;
    font-weight: 400;
    color: #000;
    letter-spacing: 0.025em;
    line-height: 1.4;
}

/* ----------------------------------------------------------------------
 * 6. Short description (between tabs and form)
 * ---------------------------------------------------------------------- */

.product-template .product-single__meta .rte {
    font-family: "Trirong", serif;
    font-size: 18px;
    line-height: 1.4;
    color: #000;
    letter-spacing: 0.025em;
}

.product-template .product-single__meta .rte a {
    color: #000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    text-decoration: none;
    transition: border-bottom-color 0.2s ease;
}

.product-template .product-single__meta .rte a:hover {
    border-bottom-color: rgba(0, 0, 0, 0.6);
}

/* ----------------------------------------------------------------------
 * 7. Tabs (collapsible) — How to Measure, Lifetime Warranty, etc.
 *
 * Mirrors the visual style of the quick-view popup tabs so the PDP
 * tabs match the popup tabs exactly. The wrapper carries the top
 * border (first child only) and the bottom border (every wrapper).
 * The trigger has `border-top: 0` so consecutive tabs share a single
 * 1px line via the `margin-top: -1px` overlap on the next wrapper.
 * The chevron icon is the small 10/12px variety (matching the popup),
 * NOT the larger 28×16 wide chevron used elsewhere.
 * ---------------------------------------------------------------------- */

.product-template .product-block--tabs {
    /* The wrapper that contains all tabs is given a fully bordered
     * "khung" (frame) so the whole group reads as a single bordered
     * column, matching the quick-view popup. The inner tab wrappers
     * carry only the bottom border (the top border is provided by
     * this container, the left/right borders are also on this
     * container so the inner tabs sit flush against the frame). */
    margin-top: 24px;
    border: 1px solid #e8e8e1;
    /* The inner tabs have `margin-top: -1px` on the wrapper to share
     * a single 1px divider between rows. For the FIRST tab, we need
     * to cancel that offset so it sits flush against the container's
     * top border instead of overlapping it (which would create a
     * doubled 1px line). */
    margin-bottom: 0;
}

.product-template .product-block--tabs > .product-block--tab {
    margin-bottom: 0;
}

/* Collapse consecutive tabs into a single bordered column, matching
 * the original Archetype theme's collapse-1px pattern. The first tab
 * gets the top border; each wrapper carries the bottom border. */
.product-template .product-block--tab + .product-block--tab {
    margin-top: 0;
}

.product-template .product-block--tab .collapsibles-wrapper--border-bottom {
    border-bottom: 1px solid #e8e8e1;
    padding: 0;
    margin: 0;
}

/* The first wrapper's top border is provided by the outer
 * `.product-block--tabs` container, so the inner wrapper does NOT
 * add its own top border (otherwise it would double-up). */
.product-template .product-block--tab:first-child .collapsibles-wrapper--border-bottom {
    border-top: 0;
}

/* Collapse wrapper: every wrapper AFTER the first pulls up by 1px
 * so its border-bottom overlaps with the previous wrapper's
 * border-bottom, creating a single shared 1px divider between rows. */
.product-template .product-block--tab + .product-block--tab .collapsibles-wrapper--border-bottom {
    margin-top: -1px;
}

/* The LAST wrapper keeps its border-bottom so the frame closes at
 * the bottom. */
.product-template .product-block--tab:last-child .collapsibles-wrapper--border-bottom {
    border-bottom: 1px solid #e8e8e1;
}

.product-template .product-block--tab .collapsible-trigger-btn {
    /* Matches the quick-view popup's `.collapsible-trigger-btn--borders`
     * rule: 3 of 4 borders (top/left/right) on the trigger, bottom on
     * the wrapper. Using `border-top: 0` so the wrapper's top border
     * is the only divider for the first tab. */
    width: 100%;
    background: transparent;
    border: 0;
    border-top: 0 !important;
    border-bottom: 0;
    text-align: left;
    white-space: nowrap;
    padding: 12px 50px 12px 15px;
    cursor: pointer;
    color: #000;
    font-family: "Trirong", serif;
    font-size: 14.4px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    transition: color 0.2s ease-out;
}

@media (min-width: 769px) {
    .product-template .product-block--tab .collapsible-trigger-btn {
        padding: 15px 50px 15px 15px;
    }
}

.product-template .product-block--tab .collapsible-trigger-btn:hover {
    color: #555;
}

/* No border-bottom override on the last child — the wrapper's
 * `border-bottom: 1px solid #e8e8e1` handles the bottom edge. */
.product-template .product-block--tab:last-child .collapsible-trigger-btn {
    border-bottom: 0;
}

/* Pull-up overlap so the next trigger sits flush against the
 * border-bottom of the previous wrapper. */
.product-template .product-block--tab .collapsible-content.is-open + .collapsibles-wrapper--border-bottom {
    margin-top: -1px;
}

.product-template .product-block--tab .collapsible-trigger__icon {
    display: block;
    position: absolute;
    right: 15px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
}

.product-template .product-block--tab .collapsible-trigger__icon svg {
    display: block;
    width: 12px;
    height: 12px;
    stroke: #000;
    fill: none;
    transition: transform 0.1s ease-in;
}

.product-template .product-block--tab .collapsible-trigger[aria-expanded="true"] .collapsible-trigger__icon svg {
    transform: scaleY(-1);
}

.product-template .product-block--tab .collapsible-content {
    height: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-template .product-block--tab .collapsible-content.is-open {
    height: auto;
    max-height: 1500px;
    margin-bottom: 30px;
}

.product-template .product-block--tab:last-child .collapsible-content.is-open {
    margin-bottom: -1px;
}

.product-template .product-block--tab .collapsible-content.is-open .collapsible-content__inner {
    animation: collapsibleInnerRise 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes collapsibleInnerRise {
    from { transform: translateY(40px); }
    to   { transform: translateY(0); }
}

.product-template .product-block--tab .collapsible-content__inner {
    padding: 0 15px 20px;
    font-family: "Trirong", serif;
    font-size: 16.56px;
    line-height: 1.6;
    color: #555;
    letter-spacing: 0.45px;
}

/* When a tab is open, give the content some breathing room above so
 * it doesn't sit flush against the trigger text. */
.product-template .product-block--tab .collapsible-content.is-open .collapsible-content__inner {
    padding-top: 16px;
}

/* ----------------------------------------------------------------------
 * 8. Share buttons
 *
 * Sits below the tabs with no top divider — the previous 1px
 * border-top has been removed so the share icons flow naturally from
 * the tabs above. The icons are centered horizontally (matching the
 * quick-view modal's centered share row).
 *
 * These rules are intentionally scoped WITHOUT `.product-template` so
 * they apply to BOTH the product detail page AND the quick-view modal,
 * since both render the same `<x-product-tabs>` component.
 * ---------------------------------------------------------------------- */

.product-block--share {
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
    text-align: center;
}

.social-sharing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.social-sharing__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #000;
    text-decoration: none;
    font-family: "Trirong", serif;
    font-size: 13px;
    transition: opacity 0.2s ease;
}

.social-sharing__link:hover {
    opacity: 0.6;
}

.social-sharing__link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.social-sharing__title {
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
}

/* ----------------------------------------------------------------------
 * 9. "You may also like" + "Recently viewed" + "Customer reviews" sections
 * ---------------------------------------------------------------------- */

.product-template .product-section {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 0 24px;
}

/* "hr--large" divider — used between lower-layout sections (between
 * You-may-also-like and Recently-viewed). Matches the original
 * Archetype theme's `.hr--large`: a 1px solid line in the same
 * #e8e8e1 family used by the tab triggers, with 45px of vertical
 * breathing room on each side. The divider is wrapped in
 * `.page-width` (matches the original) so it sits inside the same
 * horizontal gutter as the rest of the page content. */
.product-template .page-width > .hr--large {
    height: 1px;
    border: 0;
    border-top: 1px solid #e8e8e1;
    margin: 45px 0;
    background: transparent;
}

/* Inline price/sales-points divider — thin 1px rule that the original
 * Archetype theme renders between the price block and the sales-points
 * list (inside the meta column). Matches `.product-block__divider`. */
.product-template .product-block__divider {
    height: 1px;
    border: 0;
    border-top: 1px solid #e8e8e1;
    background: transparent;
    margin: 0;
}

/* "Back to [Collection]" link — mirrors the original Archetype
 * theme's `.btn .btn--small .return-link` button. Renders centered,
 * with the arrow icon + collection name. The section uses 0 top
 * margin (Recently viewed already provides the spacing) and 75px
 * bottom margin so Customer reviews has the same 75px breathing room
 * as the other sections. */
.product-template .product-return-link {
    margin-top: 0;
    margin-bottom: 75px;
    text-align: center;
}

.product-template .product-return-link .return-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #000;
    background: transparent;
    color: #000;
    font-family: "Trirong", serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 4.2px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.product-template .product-return-link .return-link:hover {
    opacity: 0.7;
}

.product-template .product-return-link .return-link .icon-arrow-left {
    width: 50px;
    height: 15px;
    fill: #000;
    stroke: #000;
    stroke-width: 0;
}

/* Lower-layout sections — matches the original Archetype theme.
 * Each section (You may also like / Recently viewed / Customer reviews)
 * is wrapped in `.product-section` and given 75px vertical breathing
 * room, matching the original's spacing. */
.product-template .product-section {
    margin-top: 75px;
    margin-bottom: 75px;
}

.product-template .product-section .section-header {
    text-align: center;
    /* Original Archetype uses 50px below the section header. */
    margin-bottom: 50px;
}

.product-template .section-header__title {
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    /* Original title size is 23.4px (calc-based; matches 1.3 * 18px base).
     * We use 23.4px for pixel parity with the original Archetype theme. */
    font-size: 23.4px;
    font-weight: 400;
    color: #000;
    margin: 0;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* Customer reviews — full reviews section matching the original
 * Archetype theme's Klaviyo Reviews block layout:
 *   - Cream background (#faf8f5)
 *   - 2-column summary grid (rating summary + review list)
 *   - Star breakdown with horizontal bars
 *   - Inline write-a-review form (toggle button)
 *   - Star colors use the brand gold (#c9a96e) matching the rest
 *     of the codebase. */
.product-template .product-reviews {
    background: #faf8f5;
    padding: 40px 0;
    margin-top: 0;
    margin-bottom: 0;
}

.product-template .product-reviews__summary {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.product-template .product-reviews__summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* --- Left column: rating summary --- */
.product-template .product-reviews__summary-left {
    text-align: left;
}

.product-template .product-reviews__average {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    color: #1c1d1d;
    font-family: "Trirong", serif;
}

.product-template .product-reviews__average-value {
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
}

.product-template .product-reviews__average-denominator {
    font-size: 18px;
    color: #777;
}

.product-template .product-reviews__stars {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1;
}

.product-template .product-reviews__star {
    color: #c9a96e;
    font-size: inherit;
}

.product-template .product-reviews__star--empty {
    color: #d6d2cb;
}

.product-template .product-reviews__count {
    font-family: "Trirong", serif;
    font-size: 13px;
    color: #777;
    margin: 0 0 24px;
}

.product-template .product-reviews__breakdown {
    margin-bottom: 24px;
}

.product-template .product-reviews__breakdown-row {
    display: grid;
    grid-template-columns: 60px 1fr 50px;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    font-family: "Trirong", serif;
    font-size: 13px;
}

.product-template .product-reviews__breakdown-label {
    color: #1c1d1d;
}

.product-template .product-reviews__breakdown-bar {
    display: block;
    height: 6px;
    background: #e8e6e1;
    border-radius: 3px;
    overflow: hidden;
}

.product-template .product-reviews__breakdown-fill {
    display: block;
    height: 100%;
    background: #c9a96e;
    transition: width 0.3s ease;
}

.product-template .product-reviews__breakdown-pct {
    color: #777;
    text-align: right;
}

.product-template .product-reviews__write-btn {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid #000;
    background: transparent;
    color: #000;
    font-family: "Trirong", serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4.2px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.product-template .product-reviews__write-btn:hover {
    opacity: 0.7;
}

/* --- Right column: review list --- */
.product-template .product-reviews__summary-right {
    min-height: 200px;
}

.product-template .product-reviews__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-template .product-reviews__item {
    padding: 20px 0;
    border-bottom: 1px solid #e8e6e1;
}

.product-template .product-reviews__item:last-child {
    border-bottom: none;
}

.product-template .product-reviews__item-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.product-template .product-reviews__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1c1d1d;
    color: #faf8f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
}

.product-template .product-reviews__item-name {
    font-family: "Trirong", serif;
    font-size: 14px;
    color: #1c1d1d;
    font-weight: 600;
}

.product-template .product-reviews__item-date {
    font-family: "Trirong", serif;
    font-size: 12px;
    color: #777;
}

.product-template .product-reviews__item-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 14px;
    line-height: 1;
}

.product-template .product-reviews__item-title {
    font-family: "Trirong", serif;
    font-size: 16px;
    font-weight: 600;
    color: #1c1d1d;
    margin: 0 0 8px;
}

.product-template .product-reviews__item-body {
    font-family: "Trirong", serif;
    font-size: 14px;
    color: #1c1d1d;
    line-height: 1.6;
    margin: 0;
}

.product-template .product-reviews__empty {
    font-family: "Trirong", serif;
    font-size: 14px;
    color: #777;
    line-height: 1.6;
    text-align: center;
    padding: 40px 20px;
}

/* --- Inline form (Write a review) --- */
.product-template .product-reviews__form-wrap {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #e8e6e1;
}

.product-template .product-reviews__form {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    padding: 32px;
    border: 1px solid #e8e6e1;
    text-align: left;
}

.product-template .product-reviews__form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.product-template .product-reviews__form-row {
    margin-bottom: 16px;
}

.product-template .product-reviews__form-label {
    display: block;
    font-family: "Trirong", serif;
    font-size: 13px;
    font-weight: 600;
    color: #1c1d1d;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-template .product-reviews__form input[type="text"],
.product-template .product-reviews__form input[type="email"],
.product-template .product-reviews__form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e8e6e1;
    background: #fff;
    font-family: "Trirong", serif;
    font-size: 14px;
    color: #1c1d1d;
    box-sizing: border-box;
}

.product-template .product-reviews__form input[type="text"]:focus,
.product-template .product-reviews__form input[type="email"]:focus,
.product-template .product-reviews__form textarea:focus {
    outline: none;
    border-color: #1c1d1d;
}

.product-template .product-reviews__form-hint {
    display: block;
    font-family: "Trirong", serif;
    font-size: 11px;
    color: #777;
    margin-top: 4px;
}

.product-template .product-reviews__form-stars {
    display: inline-flex;
    gap: 4px;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.product-template .product-reviews__form-stars input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.product-template .product-reviews__form-stars label {
    cursor: pointer;
    font-size: 28px;
    color: #d6d2cb;
    line-height: 1;
    transition: color 0.15s ease;
}

.product-template .product-reviews__form-stars label:hover,
.product-template .product-reviews__form-stars label:hover ~ label,
.product-template .product-reviews__form-stars input[type="radio"]:checked ~ label {
    color: #c9a96e;
}

.product-template .product-reviews__form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.product-template .product-reviews__submit {
    padding: 12px 24px;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    font-family: "Trirong", serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4.2px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.product-template .product-reviews__submit:hover {
    opacity: 0.85;
}

.product-template .product-reviews__cancel {
    background: none;
    border: 0;
    color: #777;
    font-family: "Trirong", serif;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.product-template .product-reviews__cancel:hover {
    color: #1c1d1d;
}

/* Honeypot — hidden from real visitors, but bots tend to fill it. */
.product-template .product-reviews__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Flash messages */
.product-template .product-reviews__flash {
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid;
    font-family: "Trirong", serif;
    font-size: 14px;
    line-height: 1.5;
}

.product-template .product-reviews__flash--success {
    background: #e9f5ec;
    border-color: #2e7d32;
    color: #2e7d32;
}

.product-template .product-reviews__flash--error {
    background: #fbeaea;
    border-color: #c62828;
    color: #c62828;
}

.product-template .product-reviews__flash ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 989px) {
    .product-template .product-reviews__summary-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .product-template .product-reviews__form-grid {
        grid-template-columns: 1fr;
    }
    .product-template .product-reviews__summary-left {
        text-align: center;
    }
    .product-template .product-reviews__breakdown-row {
        grid-template-columns: 50px 1fr 40px;
    }
}

/* ======================================================================
 * Wishlist heart icon — used on product cards (overlay), PDP (inline
 * with title) and quick-shop modal.
 *
 * Structure:
 *   <button class="wishlist-heart wishlist-heart--{size} [is-active]"
 *           data-wishlist-toggle data-product-id="…">
 *       <svg><path/></svg>
 *   </button>
 *
 * Two SVG paths (outline + filled) are stacked — only the filled one
 * is visible when .is-active is present. The CSS uses opacity rather
 * than display:none so the SVG doesn't reflow on toggle.
 * ====================================================================== */

.wishlist-heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    cursor: pointer;
    color: #1c1d1d;
    padding: 0;
    transition: transform 0.18s ease, background-color 0.18s ease,
                box-shadow 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.wishlist-heart:hover,
.wishlist-heart:focus-visible {
    transform: scale(1.08);
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    outline: none;
}

.wishlist-heart:disabled {
    opacity: 0.6;
    cursor: progress;
}

.wishlist-heart--sm {
    width: 28px;
    height: 28px;
}
.wishlist-heart--md {
    width: 36px;
    height: 36px;
}
.wishlist-heart--lg {
    width: 44px;
    height: 44px;
}

.wishlist-heart__icon {
    width: 60%;
    height: 60%;
    display: block;
}

.wishlist-heart__filled {
    opacity: 0;
    transition: opacity 0.18s ease;
}

.wishlist-heart.is-active {
    color: #c9a96e; /* theme gold accent — same as the "Dynamis" badge */
}

.wishlist-heart.is-active .wishlist-heart__outline {
    opacity: 0;
}
.wishlist-heart.is-active .wishlist-heart__filled {
    opacity: 1;
}

/* Product card overlay: pinned top-right of the image-mask.
 * Sits above the lazy-loaded image so the heart is always reachable
 * even if the image hasn't decoded yet. */
.grid-product__wishlist {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
}

/* PDP / quick-shop: inline with the title block, right-aligned on
 * desktop and below the title on mobile. */
.product-single__wishlist {
    margin-top: 12px;
    display: flex;
    justify-content: flex-start;
}

/* Account wishlist grid: tighter card spacing + Remove form below each
 * card. Mirrors the 4-column grid the collection page uses on
 * medium-up. */
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
}

@media (min-width: 750px) {
    .wishlist-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.wishlist-grid__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wishlist-grid__remove-form {
    margin: 0;
    text-align: center;
}

.wishlist-grid__remove {
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: 12px;
    color: #777;
    text-decoration: underline;
    cursor: pointer;
    text-underline-offset: 3px;
}

.wishlist-grid__remove:hover {
    color: #1c1d1d;
}

.wishlist-grid__pagination {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.account-section--empty {
    text-align: center;
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

/* Header wishlist icon bubble — mirrors the cart-link__bubble styling
 * (count badge that hides itself at 0). */
.wishlist-link__bubble {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #1c1d1d;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0;
    box-sizing: border-box;
}

.site-nav__link--icon {
    position: relative;
}

@media (max-width: 749px) {
    /* On mobile the heart on product cards sits a bit closer to the
     * corner so it doesn't overlap with the quick-view button that
     * the theme renders below it. */
    .grid-product__wishlist {
        top: 6px;
        left: 6px;
    }
}

/* ======================================================================
 * CMS pages — generic single-column layout used by /pages/{slug}
 * (About, FAQ, Warranty, Shipping Policy, …).
 *
 * Width is capped at the same `page-width` container the theme uses
 * for the rest of the storefront so the page reads naturally next
 * to a collection grid on the back button. The body uses the `.rte`
 * class so the Filament RichEditor's HTML (h1-h4, ul, blockquote,
 * tables, iframes) inherits the typography already defined for
 * product descriptions.
 * ====================================================================== */

.cms-page {
    padding: 48px 0 96px;
}

.cms-page__header {
    text-align: center;
    margin-bottom: 40px;
}

.cms-page__title {
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
    letter-spacing: 0.02em;
}

.cms-page__body {
    max-width: 760px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
}

.cms-page__body :where(h1, h2, h3, h4) {
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}

.cms-page__body :where(ul, ol) {
    padding-left: 1.4em;
}

.cms-page__body :where(blockquote) {
    border-left: 3px solid #1c1d1d;
    padding-left: 16px;
    margin: 24px 0;
    font-style: italic;
    color: #555;
}

.cms-page__body :where(table) {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
}

.cms-page__body :where(table th, table td) {
    padding: 10px 12px;
    border-bottom: 1px solid #e8e8e1;
    text-align: left;
}

.cms-page__body :where(table th) {
    font-weight: 600;
}

/* ======================================================================
 * Blog — list grid + single post layout.
 *
 * Two visual zones:
 *   - blog-index__grid : 12-col grid of cards, 3 per row on desktop,
 *     2 on tablet, 1 on mobile.
 *   - blog-post        : single-column page-width article with a wide
 *     hero image, meta line, and the body rendered through the .rte
 *     class so it inherits the typography from the CMS pages.
 * ====================================================================== */

.blog-index,
.blog-post {
    padding: 48px 0 96px;
}

.blog-index__header,
.blog-post__header {
    text-align: center;
    margin-bottom: 48px;
}

.blog-index__title,
.blog-post__title {
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 12px;
    letter-spacing: 0.02em;
}

.blog-index__intro {
    color: #555;
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
}

.blog-index__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px 24px;
}

@media (min-width: 750px) {
    .blog-index__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 990px) {
    .blog-index__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.blog-card {
    display: flex;
    flex-direction: column;
}

.blog-card__link {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.blog-card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: #f5f5f5;
    border-radius: 6px;
}

.blog-card__image--placeholder {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e1 100%);
}

.blog-card__meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.blog-card__title {
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: 22px;
    line-height: 1.25;
    margin: 0;
    font-weight: 400;
}

.blog-card__excerpt {
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.blog-index__pagination {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}

.blog-index__empty {
    text-align: center;
    color: #777;
    font-size: 16px;
}

/* Single post */
.blog-post__hero {
    width: 100%;
    aspect-ratio: 21 / 9;
    background-size: cover;
    background-position: center;
    margin-bottom: 40px;
}

.blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.blog-post__body {
    max-width: 760px;
    margin: 40px auto 0;
    font-size: 17px;
    line-height: 1.75;
}

.blog-post__body :where(h1, h2, h3, h4) {
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}

.blog-post__body :where(blockquote) {
    border-left: 3px solid #1c1d1d;
    padding-left: 18px;
    margin: 28px 0;
    font-style: italic;
    color: #555;
}

.blog-post__related {
    margin-top: 80px;
    padding-top: 48px;
    border-top: 1px solid #e8e8e1;
}

.blog-post__related-title {
    text-align: center;
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 32px;
    letter-spacing: 0.02em;
}

.blog-post__related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 750px) {
    .blog-post__related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.blog-related-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.blog-related-card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: #f5f5f5;
    border-radius: 6px;
}

.blog-related-card__title {
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    font-weight: 400;
}

.blog-related-card__date {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

/* ======================================================================
 * Locale + currency switcher — rendered inline in the header
 * between the user icon and the wishlist/cart icons.
 *
 * Visual goal: small, compact, almost invisible until the visitor
 * hovers. We deliberately don't make this a flag-pill — it's a
 * power-user control, not a marketing surface.
 * ====================================================================== */

.site-nav__preferences {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px;
}

.locale-switcher,
.currency-switcher {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.locale-switcher__select,
.currency-switcher__select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 4px 20px 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231c1d1d' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 8px;
}

.locale-switcher__select:hover,
.currency-switcher__select:hover,
.locale-switcher__select:focus-visible,
.currency-switcher__select:focus-visible {
    border-color: rgba(0, 0, 0, 0.15);
    outline: none;
}

.locale-switcher__submit,
.currency-switcher__submit {
    margin-left: 4px;
    background: transparent;
    border: 1px solid currentColor;
    padding: 2px 6px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 2px;
}

@media (max-width: 749px) {
    .site-nav__preferences {
        display: none;
    }
}

/* ======================================================================
 * Search results + predictive dropdown.
 *
 * The `.predictive-results` block already exists in the theme's
 * default CSS — we only need to light it up with the modern
 * visual design (3-zone layout: products left, posts/pages right).
 * ====================================================================== */

.search-results {
    padding: 48px 0 96px;
}

.search-results__header {
    margin-bottom: 40px;
}

.search-results__title {
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 24px;
    letter-spacing: 0.02em;
}

.search-results__form {
    display: flex;
    gap: 8px;
}

.search-results__input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
}

.search-results__input:focus {
    outline: none;
    border-color: #1c1d1d;
}

.search-results__submit {
    padding: 12px 24px;
    background: #1c1d1d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.search-results__section {
    margin-bottom: 56px;
}

.search-results__section-title {
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 24px;
    letter-spacing: 0.02em;
    display: flex;
    align-items: baseline;
    gap: 8px;
    border-bottom: 1px solid #e8e8e1;
    padding-bottom: 12px;
}

.search-results__count {
    color: #888;
    font-size: 14px;
    font-family: inherit;
    font-weight: 400;
}

.search-results__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 16px;
}

@media (min-width: 990px) {
    .search-results__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.search-results__empty {
    color: #777;
    font-size: 15px;
}

.search-results__posts {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-results__posts li {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.search-results__posts li a {
    color: #1c1d1d;
    text-decoration: none;
    font-size: 15px;
}

.search-results__posts li a:hover {
    text-decoration: underline;
}

.search-results__posts li time {
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.search-results__pagination {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.search-results__hint {
    color: #777;
    font-size: 15px;
}

.predictive-results {
    background: #fff;
    border-top: 1px solid #e8e8e1;
    padding: 24px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.predictive-results.hide {
    display: none;
}

.predictive-result__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 990px) {
    .predictive-result__layout {
        grid-template-columns: 2fr 1fr;
    }
}

.predictive-result__products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 750px) {
    .predictive-result__products {
        grid-template-columns: repeat(3, 1fr);
    }
}

.predictive-result__product {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.predictive-result__image {
    width: 100%;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.predictive-result__image--placeholder {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e1 100%);
}

.predictive-result__name {
    font-size: 13px;
    line-height: 1.4;
    color: #1c1d1d;
}

.predictive-result__other h3 {
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 12px;
    color: #888;
    font-weight: 500;
}

.predictive-result__other ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.predictive-result__other li {
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

.predictive-result__other li a {
    color: #1c1d1d;
    text-decoration: none;
    font-size: 14px;
}

.predictive-result__other li a:hover {
    text-decoration: underline;
}

.predictive-result__empty {
    color: #777;
    font-size: 14px;
    text-align: center;
    padding: 24px 0;
    grid-column: 1 / -1;
}

/* ======================================================================
 * Coupon block — sits inside the checkout summary, between Subtotal
 * and Shipping. Two visual states:
 *   - empty: small input + "Apply" button
 *   - applied: "Coupon: SUMMER10 — 10% off" with a "Remove" link
 * ====================================================================== */

.checkout-summary__coupon {
    margin: 12px 0;
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.checkout-summary__coupon-form {
    display: flex;
    gap: 8px;
}

.checkout-summary__coupon-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.checkout-summary__coupon-input:focus {
    outline: none;
    border-color: #1c1d1d;
}

.checkout-summary__coupon-submit {
    padding: 8px 16px;
    background: #1c1d1d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.checkout-summary__coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f5f5f0;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
}

.checkout-summary__coupon-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checkout-summary__coupon-discount {
    color: #1c1d1d;
    font-weight: 600;
}

.checkout-summary__coupon-remove button {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 12px;
    text-decoration: underline;
    padding: 0;
    font-family: inherit;
}

.checkout-summary__coupon-error {
    margin-top: 8px;
    color: #b04040;
    font-size: 12px;
}

/* ======================================================================
 * Newsletter popup — full-screen overlay with a centred dialog.
 * Hidden by default; the JS toggle adds `.is-visible` after 30s
 * (or sooner if the user clicks anyway). The `hidden` attribute
 * keeps it out of the DOM for visitors who already dismissed or
 * subscribed (set server-side from a cookie).
 * ====================================================================== */

.newsletter-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.newsletter-popup.is-visible {
    display: flex;
}

.newsletter-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 29, 29, 0.45);
}

.newsletter-popup__dialog {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
    padding: 48px 40px 32px;
    max-width: 460px;
    width: 90%;
    text-align: center;
    z-index: 1;
    animation: newsletter-popup-in 320ms ease-out;
}

@keyframes newsletter-popup-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.newsletter-popup__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #1c1d1d;
    padding: 4px;
    line-height: 0;
}

.newsletter-popup__title {
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 12px;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.newsletter-popup__body {
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 24px;
}

.newsletter-popup__form {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.newsletter-popup__input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}

.newsletter-popup__input:focus {
    outline: none;
    border-color: #1c1d1d;
}

.newsletter-popup__submit {
    padding: 10px 18px;
    background: #1c1d1d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.newsletter-popup__status {
    font-size: 13px;
    margin: 0 0 12px;
    min-height: 1em;
}

.newsletter-popup__status.is-error { color: #b04040; }
.newsletter-popup__status.is-success { color: #1e7a3c; }

.newsletter-popup__no-thanks {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 12px;
    text-decoration: underline;
    padding: 0;
    font-family: inherit;
}

@media (max-width: 540px) {
    .newsletter-popup__dialog {
        padding: 40px 24px 24px;
    }

    .newsletter-popup__form {
        flex-direction: column;
    }
}

/* ======================================================================
 * Cookie consent banner — full-width bottom bar on first visit,
 * hidden after a choice is recorded. The customise panel appears
 * inline below the bar when the user clicks "Customise".
 * ====================================================================== */

.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: #1c1d1d;
    color: #fff;
    padding: 16px 0;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
}

.cookie-consent__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cookie-consent__text {
    margin: 0;
    flex: 1;
    min-width: 280px;
    font-size: 14px;
    line-height: 1.5;
}

.cookie-consent__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cookie-consent__btn {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: transparent;
    color: #fff;
    transition: background 120ms ease;
}

.cookie-consent__btn--accept {
    background: #fff;
    color: #1c1d1d;
}

.cookie-consent__btn--reject {
    border-color: rgba(255, 255, 255, 0.4);
}

.cookie-consent__btn--custom {
    border-color: rgba(255, 255, 255, 0.4);
}

.cookie-consent__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.cookie-consent__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #fafafa;
    color: #1c1d1d;
    border-top: 2px solid #1c1d1d;
    padding: 24px 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}

.cookie-consent__panel-title {
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 16px;
    letter-spacing: 0.02em;
}

.cookie-consent__toggle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #e8e8e1;
    border-radius: 4px;
    cursor: pointer;
}

.cookie-consent__toggle input {
    margin-right: 8px;
    accent-color: #1c1d1d;
}

.cookie-consent__toggle span {
    font-weight: 600;
    font-size: 14px;
}

.cookie-consent__toggle small {
    color: #666;
    font-size: 12px;
    margin-left: 22px;
}

.cookie-consent__btn--save {
    background: #1c1d1d;
    color: #fff;
    margin-top: 8px;
}

/* ======================================================================
 * Cosmetic: sold-out badge + stock label + sticky ATC on mobile.
 * ====================================================================== */

/* Sold-out + featured badge on product cards. Sits absolutely over
 * the image on the top-right corner — matching the user-requested
 * position. Wishlist heart has been moved to the top-left to keep
 * the two overlays from clashing. */
.grid-product__tag,
.grid-product__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 2;
    pointer-events: none;
}

.grid-product__tag--sold-out,
.grid-product__badge--sold-out {
    color: #b04040;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

.grid-product__tag--featured,
.grid-product__badge--featured {
    color: #1c1d1d;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

/* Stock label on PDP — sits above the ATC button. */
.product__stock {
    font-size: 13px;
    margin: 0 0 12px;
    font-weight: 500;
}

.product__stock--in { color: #2e7d32; }
.product__stock--low { color: #c27900; }
.product__stock--out { color: #b04040; }

.product__add-to-cart:disabled {
    background: #cccccc;
    border-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Mobile sticky ATC — at small widths the ATC button sticks to
 * the bottom of the viewport so the visitor can always reach it
 * after scrolling through reviews, etc. We hide it on desktop
 * where the regular flow is fine. */
@media (max-width: 749px) {
    .product__add-to-cart {
        position: sticky;
        bottom: 0;
        z-index: 9;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    }
}

/* ======================================================================
 * Cosmetic: T&C checkbox on checkout.
 * ====================================================================== */

.checkout-form__terms {
    margin: 16px 0 24px;
}

.checkout-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
}

.checkout-checkbox__input {
    margin: 3px 0 0;
    accent-color: #1c1d1d;
    flex-shrink: 0;
}

.checkout-checkbox__label {
    color: #555;
}

.checkout-checkbox__label a {
    color: #1c1d1d;
    text-decoration: underline;
}

/* ======================================================================
 * Cosmetic: testimonial slider.
 * ====================================================================== */

.testimonial-slider {
    padding: 56px 0 32px;
    text-align: center;
}

.testimonial-slider__title {
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 400;
    margin: 0 0 32px;
    letter-spacing: 0.02em;
}

.testimonial-slider__empty {
    color: #777;
    font-size: 14px;
    max-width: 480px;
    margin: 0 auto;
}

.testimonial-slider__track {
    position: relative;
    overflow: hidden;
    max-width: 720px;
    margin: 0 auto;
    height: 180px;
}

.testimonial-card {
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    transition: transform 320ms ease;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.testimonial-card__rating {
    margin-bottom: 12px;
}

.testimonial-card__star {
    color: #d1d1d1;
    font-size: 18px;
    margin: 0 2px;
}

.testimonial-card__star.is-active {
    color: #d4a800;
}

.testimonial-card__quote {
    font-family: "Trirong", "Tenor Sans", "Cormorant Garamond", serif;
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 16px;
    color: #1c1d1d;
    font-style: italic;
}

.testimonial-card__author {
    font-size: 13px;
    color: #555;
}

.testimonial-card__product {
    margin-left: 6px;
    color: #888;
}

.testimonial-slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.testimonial-slider__btn {
    background: transparent;
    border: 1px solid #1c1d1d;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    color: #1c1d1d;
    line-height: 1;
    transition: background 120ms ease;
}

.testimonial-slider__btn:hover {
    background: #1c1d1d;
    color: #fff;
}

.testimonial-slider__position {
    font-size: 13px;
    color: #888;
    min-width: 60px;
}

/* ----------------------------------------------------------------------
 * Mobile Overrides for Product Photos (Swipe Slider + Dots)
 * ---------------------------------------------------------------------- */
@media (max-width: 749px) {
    /* Remove huge desktop padding so image is edge-to-edge */
    .product-template .page-width {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }
    .product-template .product-single {
        padding: 0;
    }
    
    /* Stack the photos and info, remove flex row */
    .product-template .product-single__grid > .grid__item.product-single__photos {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Add standard mobile padding back to the meta (text) column */
    .product-template .product-single__grid > .grid__item.product-single__meta {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
    }
    
    /* Hide vertical thumbnails on mobile */
    .product-template .product__thumbs.small--hide {
        display: none !important;
    }
    
    /* Make slideshow full width */
    .product-template .product-slideshow {
        width: 100%;
        flex: none;
    }
    
    /* Dots styling */
    .product-template .product-slideshow__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;
        padding: 15px 0 0;
        margin: 0;
    }
    .product-template .product-slideshow__dot {
        width: 8px;
        height: 8px;
        background-color: #000;
        border-radius: 50%;
        margin: 0 6px;
        opacity: 0.25;
        cursor: pointer;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .product-template .product-slideshow__dot.is-selected {
        opacity: 1;
        transform: scale(1.2);
    }
}
@media (min-width: 750px) {
    .product-template .product-slideshow__dots {
        display: none !important;
    }
}