@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500;600;700&display=swap');
/* ============================================================
   SOR Luxury Cards — category pages + product pages.
   Served by Wix HTTP function. Edit src/backend/http-functions.js
   then git push + wix publish to deploy.
   The @import above makes EB Garamond self-loading, so the design's
   font no longer depends on the Custom Code <link> font line.
   ============================================================ */

/* ── Card container ── */
[id^="comp-lvoxau18__"] {
    background: #F8F5F0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(60,40,20,0.06) !important;
    padding: 12px !important;
    transition: transform 200ms ease, box-shadow 200ms ease !important;
    overflow: hidden !important;
}
[id^="comp-lvoxau18__"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(60,40,20,0.12) !important;
}

/* ── Product image ── */
[id^="comp-lvoxdhg2__"] {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* ── Horizontal rule below image — gold tint ── */
[id^="comp-lxj586hh__"] {
    background: rgba(201,168,90,0.25) !important;
    opacity: 1 !important;
}

/* ── Title — pulled up, centered serif ── */
[id^="comp-lvoxfngn__"] {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    text-align: center !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    color: #2a2a2a !important;
    margin-top: 6px !important;
    padding: 0 12px !important;
}
[id^="comp-lvoxfngn__"] * {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    color: #2a2a2a !important;
}
[id^="comp-lvoxfngn__"]::after {
    content: "\25C6";
    display: block;
    text-align: center;
    color: #c9a85a;
    font-size: 10px;
    margin: 10px auto;
    letter-spacing: 0.5em;
}

/* ── PRICE label — small caps, centered ──
   It shrink-wrapped to ~99px inside its grid parent and sat ~14px right of
   the card centre. Force full-width + stretch so text-align:center actually
   centres it across the whole card. */
[id^="comp-lxdje6o9__"] {
    display: block !important;
    width: 100% !important;
    justify-self: stretch !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    text-align: center !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    color: #888 !important;
    margin: 0 auto 6px !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    visibility: visible !important;
    overflow: visible !important;
}
[id^="comp-lxdje6o9__"] * {
    text-align: center !important;
    width: 100% !important;
}

/* ── Force price row to be its own block, NOT overlapping with size ──
   The price VALUE sits inside this row (unlike the PRICE label, which is a
   separate full-width grid item). Wix gives this row left:14px AND nests the
   value in a fixed 293px sub-grid that left-aligns it — net result the price
   read ~17px left of centre. Reset the row's left offset and widen the inner
   wrappers / sub-grid to full width so the centred text lands on card centre. */
[id^="comp-lxdlh8f0__"] {
    position: relative !important;
    display: block !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    height: auto !important;
    left: 0 !important;
    right: auto !important;
}
[id^="comp-lxdlh8f0__"] > div {
    width: 100% !important;
}
[id^="comp-lxdlh8f0__"] > div > div {
    width: 100% !important;
    grid-template-columns: 1fr !important;
}

/* ── Price — large centered serif ──
   Velo writes the price via .text, so Wix wraps it in the element's default
   theme markup: <h6 class="font_6" style="font-size:16px"> ... </h6>.
   That inline 16px on the inner <h6> beat our 36px (which sat on the wrapper,
   not the <h6>), and the wrapper shrink-wrapped to the text width (~89px) so
   text-align:center had nothing to center within. Force size onto the inner
   nodes and make the wrapper span its grid track so it actually centers. */
[id^="comp-lvoxlait__"] {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    font-size: 28px !important;
    text-align: center !important;
    color: #1a1a1a !important;
    padding-left: 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-decoration: none !important;
    width: 100% !important;
    justify-self: stretch !important;
    left: 0 !important;
    margin: 0 auto !important;
    display: block !important;
}
[id^="comp-lvoxlait__"],
[id^="comp-lvoxlait__"] * {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    font-size: 28px !important;
    text-align: center !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
}
[id^="comp-lvoxlait__"] s,
[id^="comp-lvoxlait__"] strike,
[id^="comp-lvoxlait__"] del,
[id^="comp-lvoxlait__"] [style*="text-decoration: line-through"],
[id^="comp-lvoxlait__"] [style*="line-through"] {
    display: none !important;
    visibility: hidden !important;
}

/* ── Grid reorder — SIZE between price and pills ──
   The card's inner grid (an anonymous div two levels inside the card)
   auto-sizes its rows to content — verified: row 5 grew 73px→101px when
   the price became 36px, which a fixed-px track could not do. So we can
   reassign rows without crushing anyone:
     row 5 = price (unchanged)   row 6 = SIZE   row 7 = pills   row 8 = cart
   Previously SIZE used grid-row:auto and auto-placed into the empty row 7,
   landing BELOW the pills. */
[id^="comp-lvoxau18__"] [id^="comp-lxsxt05n__"] {
    grid-area: unset !important;
    grid-row: 6 / 7 !important;
    grid-column: 1 / -1 !important;
    clear: both !important;
    float: none !important;
    display: block !important;
}
[id^="comp-lvoxau18__"] [id^="comp-lxsxsm8i__"] {
    grid-row: 7 / 8 !important;
}

/* ── Divider below price ── */
[id^="comp-lxdlh8f0__"]::after {
    content: "";
    display: block;
    width: 80%;
    height: 1px;
    background: rgba(201,168,90,0.25);
    margin: 12px auto;
}

/* ── Size row inner wrapper — flatten the single-cell sub-grid to block ──
   Inside the size row, the SIZE label and value live in a one-column
   sub-grid, BOTH in the same cell; the value is nudged right by left:42px
   so they read as "SIZE: 2x4" on one line. Force that wrapper to block flow
   so the two stack vertically (label on top, value below), like the PRICE
   block where label and value are already separate grid rows. */
[id^="comp-lxsxt05n__"] > div,
[id^="comp-lxsxt05n__"] > div > div {
    display: block !important;
    width: 100% !important;
}

/* ── SIZE label — block, centered small caps (matches PRICE label) ── */
[id^="comp-lvoxhsxy__"] {
    display: block !important;
    text-align: center !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    color: #888 !important;
    margin: 0 auto 6px !important;
    width: 100% !important;
    justify-self: stretch !important;
    padding: 0 !important;
    left: 0 !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
}
[id^="comp-lvoxhsxy__"] * {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    color: #888 !important;
    text-align: center !important;
    width: 100% !important;
}

/* ── Size value — block, centered large serif (price treatment, 24px) ──
   24px keeps the $36px price as the visual anchor while the size still
   reads as a substantial serif value. As with price, the value text sits
   in a default <h6 style="font-size:16px"> from Velo's .text, so the size
   must be forced onto the inner nodes, and left:0 cancels the 42px offset. */
[id^="comp-lvoxjbmb__"] {
    display: block !important;
    text-align: center !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    line-height: 1.1 !important;
    width: 100% !important;
    left: 0 !important;
    margin: 0 auto !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
}
[id^="comp-lvoxjbmb__"] * {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    text-align: center !important;
}

/* ── Force size row to be its own block BELOW price row ── */
[id^="comp-lxsxt05n__"] {
    position: relative !important;
    display: block !important;
    text-align: center !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
    margin: 8px auto !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
}
[id^="comp-lxsxt05n__"]::after {
    content: "";
    display: block;
    width: 80%;
    height: 1px;
    background: rgba(201,168,90,0.25);
    margin: 12px auto;
}

/* ── Pills container ── */
[id^="comp-lxsxsm8i__"] {
    padding-top: 0 !important;
    overflow: visible !important;
    height: auto !important;
}

/* ── BRUTE-FORCE: nuke every background/radius on every descendant ── */
[id^="comp-lxsxsm8i__"] * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ── Pill rows — cream-gold gradient (ribbon-matched), symmetric framing ──
   comp-lxdod0pb/lxdohki0/lxdokaps are full-row-width (300px) strips, one per
   perk row, so backgrounding them yields a row-wide pill. The blue/lavender
   look was NOT a real fill (every element computes transparent) — it was the
   warm cream reading cool next to the green icons + dark text; giving the row
   an explicit cream-gold fill removes that read. Equal padding + margin +
   border on ALL four sides so the three pills are framed identically (the old
   rule used border-bottom only + a "last row no border" exception, which made
   them look uneven). Lighter than the ribbon so they relate without competing.
   Comes AFTER the brute-force transparent rule above so the fill wins. */
[id^="comp-lxdod0pb__"],
[id^="comp-lxdohki0__"],
[id^="comp-lxdokaps__"] {
    background: linear-gradient(135deg, #ece4cc 0%, #f5efe0 50%, #ece4cc 100%) !important;
    background-color: #ece4cc !important;
    background-image: linear-gradient(135deg, #ece4cc 0%, #f5efe0 50%, #ece4cc 100%) !important;
    border: 1px solid rgba(201,168,90,0.3) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    margin: 6px 0 !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 1px 2px rgba(60,40,20,0.06) !important;
}

/* ── Direct children of pills container — ensure row stacking ── */
[id^="comp-lxsxsm8i__"] > [id^="comp-"]:not(:last-child),
[id^="comp-lxsxsm8i__"] > interact-element:not(:last-child) > [id^="comp-"] {
    border-bottom: 1px solid rgba(201,168,90,0.18) !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
}

/* ── Pill text content ──
   The text is a top-aligned SIBLING of the pill strip (not a child), so the
   pill's padding doesn't centre it — it rendered 8px above the band centre
   while the green icon (also a sibling) was already centred. translateY(8px)
   drops the text onto the band centre with no reflow. */
[id^="comp-lvoxoi0e__"],
[id^="comp-lvoxp85o__"],
[id^="comp-lvzfkacq__"] {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 13px !important;
    color: #4a3a20 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
    display: block !important;
    transform: translateY(8px) !important;
}
[id^="comp-lvoxoi0e__"] *,
[id^="comp-lvoxp85o__"] *,
[id^="comp-lvzfkacq__"] * {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 13px !important;
    color: #4a3a20 !important;
    border-radius: 0 !important;
}

/* ── Pill icons ── */
[id^="comp-lxdwazrw__"],
[id^="comp-lxdwazrv__"],
[id^="comp-lxdwazru__"] {
    display: inline-block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}

/* ── HIDE — only elements we actually want gone ── */
[id^="comp-lvzdja05__"],
[id^="comp-lvoxmuco__"],
[id^="comp-lvoxnhk1__"],
[id^="comp-lxdlcpwp__"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
}
[id^="comp-lvoxmuco__"]:not([data-show="true"]),
[id^="comp-lvoxnhk1__"]:not([data-show="true"]) {
    display: none !important;
    height: 0 !important;
}

/* ── Mobile — additional scale-down ──
   Descendant (*) selectors are included for size value, SIZE label and pill
   text because their visible text lives in inner <h6>/<span> nodes that the
   desktop "… *" rules size at equal specificity; without * here the inner
   nodes would keep their desktop size on mobile. Appended last so it wins on
   source order when max-width:750px matches. */
@media (max-width: 750px) {
    [id^="comp-lvoxau18__"] {
        padding: 10px !important;
    }
    [id^="comp-lvoxfngn__"],
    [id^="comp-lvoxfngn__"] * {
        font-size: 15px !important;
    }
    [id^="comp-lvoxlait__"],
    [id^="comp-lvoxlait__"] * {
        font-size: 24px !important;
    }
    [id^="comp-lvoxjbmb__"],
    [id^="comp-lvoxjbmb__"] * {
        font-size: 17px !important;
    }
    [id^="comp-lxdje6o9__"],
    [id^="comp-lvoxhsxy__"],
    [id^="comp-lvoxhsxy__"] * {
        font-size: 9px !important;
        letter-spacing: 0.2em !important;
    }
    [id^="comp-lvoxoi0e__"],
    [id^="comp-lvoxp85o__"],
    [id^="comp-lvzfkacq__"],
    [id^="comp-lvoxoi0e__"] *,
    [id^="comp-lvoxp85o__"] *,
    [id^="comp-lvzfkacq__"] * {
        font-size: 12px !important;
    }
    [id^="comp-lxsxsm8i__"] > *:not(:last-child) {
        padding-bottom: 6px !important;
        margin-bottom: 6px !important;
    }
}

/* ── Add to Cart button — medium luxurious green ──
   The yellow lives on the <button> root (StylableButton…__root) inside the
   cart wrapper; override its background. The cart icon SVG is dark, so lighten
   it to keep contrast on the green. */
[id^="comp-lvoxsf1l__"] button,
[id^="comp-lvoxsf1l__"] [class*="StylableButton"],
[id^="comp-lvoxsf1l__"] [role="button"] {
    background-color: #5a7d4a !important;
    background: #5a7d4a !important;
    background-image: none !important;
    border-color: #5a7d4a !important;
    transition: background-color 200ms ease !important;
}
[id^="comp-lvoxsf1l__"] button:hover,
[id^="comp-lvoxsf1l__"] [class*="StylableButton"]:hover,
[id^="comp-lvoxsf1l__"] [role="button"]:hover {
    background-color: #4a6a3a !important;
    background: #4a6a3a !important;
}
[id^="comp-lvoxsf1l__"] button svg,
[id^="comp-lvoxsf1l__"] button svg * {
    fill: #F8F5F0 !important;
    color: #F8F5F0 !important;
}

/* ── "One of a Kind" ribbon — clean gold rectangle (no coupon notch) ──
   Investigation: the banner is an SVG in comp-lvoz2x9e with two paths —
   path[data-color=1] is the ticket shape WITH semicircular coupon notches in
   its geometry, path[data-color=2] is the dashed perforation line. The notch
   lives in path1's d-attribute, which CSS can't rewrite, so hiding path2
   (Option A) removes only the dashes, not the notch. Option B: hide the SVG and
   render the text element (comp-lvozckax) as a clean gold rectangle, keeping
   its -37° corner rotation. Gold gradient matches the site's top band.

   CLIP/BLEED: the card's natural overflow:clip DOES clip this ribbon as long
   as it stays position:RELATIVE (in-flow). (An earlier attempt failed only
   because it used position:absolute, which re-anchored the ribbon's containing
   block above the card and escaped the clip — verified by headless experiment;
   relative + wide is clipped identically to a forced clip-path on the card.)
   So we keep it relative and offset it up-and-left so BOTH ends bleed past the
   card's top and left edges and get clipped — a continuous corner banner with
   no visible clean end. Compact corner accent: width 200, explicit rotate(-37deg)
   about center center (so the origin stays centred as the width changes); flex
   centering keeps "One of a Kind" centred on the band. Visible band ~36% of card
   width (was ~68%). BLEED BALANCE: top/left tuned to -22/22 so the left and top
   bleeds are EQUAL (~35px each) — the visible parallelogram then sits symmetric
   about the corner diagonal, and the text is dead-centre of the visible band
   (measured lengthwise margins 49/50px, centroid delta 0px). */
[id^="comp-lvoz2x9e__"] {
    display: none !important;
}
[id^="comp-lvozckax__"] {
    background: linear-gradient(135deg, #c9b88c 0%, #ece4cc 50%, #c9b88c 100%) !important;
    border: 1px solid rgba(139,109,56,0.4) !important;
    box-shadow: 0 1px 4px rgba(60,40,20,0.18) !important;
    position: relative !important;
    top: 22px !important;
    left: -22px !important;
    width: 200px !important;
    min-width: 200px !important;
    padding: 4px 12px !important;
    box-sizing: border-box !important;
    transform: rotate(-37deg) !important;
    transform-origin: center center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
[id^="comp-lvozckax__"] * {
    background: transparent !important;
    color: #4a3a20 !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    white-space: nowrap !important;
}

/* ── Product grid — 3 columns on desktop (>=751px); mobile unchanged ──
   The repeater is a <fluid-columns-repeater> custom element (no id) that lays
   its cards out as JS-driven MASONRY with position:absolute. We convert it to a
   real CSS grid and force the cards back to position:relative so they flow into
   columns. Scoped under comp-lvoxau0k (this repeater's wrapper) and gated to
   >=751px so Wix's mobile layout is untouched.

   WHY 3 AND NOT 4: the card's INTERNAL layout is fixed-pixel (~353px wide:
   image 350, hr 353, title 325, pills 300, plus an absolutely-positioned cart),
   authored by Wix for a 353px card. With the 1400px max-width cap, 4 columns
   yields <=309px cards at any viewport, so that fixed content overflows and is
   clipped by the card. 3 columns yields ~381px cards (content area ~357px) where
   everything fits with NO internal changes. 4 columns would require rebuilding
   the card internals to be fluid — out of scope per "don't change internals". */
@media (min-width: 751px) {
    [id^="comp-lvoxau0k"] fluid-columns-repeater {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 28px !important;                 /* more separation between cards */
        height: auto !important;
        width: 100% !important;
        max-width: 1400px !important;         /* cap on ultra-wide monitors */
        padding-left: 40px !important;        /* breathing room from viewport edges */
        padding-right: 40px !important;
        box-sizing: border-box !important;    /* padding stays inside the 100%/1400 width */
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 0 auto !important;            /* center when capped on wide screens */
        transform: none !important;
    }
    [id^="comp-lvoxau0k"] fluid-columns-repeater > [id^="comp-lvoxau18__"] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    /* ── Collapse leftover masonry height (kills the huge empty gap before the
       footer/pagination) ── The CSS-grid override makes the cards shorter than
       the original masonry, but the id-less grid container directly holding
       comp-lvoxau0k keeps a fixed row (grid-template-rows ...6292px...) from the
       masonry. Reset that row + the wrapper heights to auto so the section
       shrinks to the grid and the pagination/footer sit right below the cards. */
    div:has(> [id="comp-lvoxau0k"]) {
        grid-template-rows: auto !important;
        height: auto !important;
    }
    [id^="comp-lvoxau0k"] {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* ── Mobile ribbon — smaller + corner-anchored (<=750px) ──
   Placed AFTER the base ribbon rules so it wins at mobile widths. On the Wix
   mobile view (renders at ~320px) the desktop 200px ribbon sat ~24px inside
   the left edge (floating into the photo). Shrink it and offset it up-and-left
   so both ends bleed past the card's top/left edges and clip into the corner.
   Verified via iPhone emulation: leftBleed ~4px, topBleed ~18px, text centred
   and fits. NOTE: the other two requested mobile fixes (card side padding and
   the empty gap above Add-to-Cart) are NOT achievable from this CSS — Wix
   renders mobile with a separate JS-driven (Thunderbolt) layout that controls
   card width (flex) and the card height / cart position (masonry). Verified by
   inline !important tests: forcing card width overflows the fixed-width content,
   and forcing card/grid height + grid-template-rows does not move the cart or
   close the gap. Those belong in the Wix Editor mobile view, not here. */
@media (max-width: 750px) {
    [id^="comp-lvozckax__"] {
        width: 150px !important;
        min-width: 150px !important;
        top: 12px !important;
        left: -46px !important;
        padding: 3px 10px !important;
        transform: rotate(-37deg) !important;
        transform-origin: center center !important;
    }
    [id^="comp-lvozckax__"] * {
        font-size: 11px !important;
    }
}

/* ============================================================
   PRODUCT PAGES (/product-page/*) — loaded once the Custom Code
   scope script also allows '/product-page/'. None of these comp
   IDs / data-hooks exist on the category page (verified), and none
   of the category rules above match product-page elements, so the
   two layouts stay cleanly separated. Page-level comp IDs here have
   NO "__" suffix, so selectors use the bare id prefix.
   ============================================================ */

/* ── ADD TO CART → cream-gold gradient, dark serif (Wix Stores data-hook) ── */
[id^="comp-lt8qxaa2"] button[data-hook="add-to-cart"] {
    background: linear-gradient(135deg, #c9b88c 0%, #ece4cc 50%, #c9b88c 100%) !important;
    background-color: #c9b88c !important;
    background-image: linear-gradient(135deg, #c9b88c 0%, #ece4cc 50%, #c9b88c 100%) !important;
    color: #4a3a20 !important;
    border-color: rgba(139,109,56,0.4) !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-weight: 600 !important;
}
[id^="comp-lt8qxaa2"] button[data-hook="add-to-cart"] * {
    color: #4a3a20 !important;
    font-family: 'EB Garamond', Georgia, serif !important;
}
[id^="comp-lt8qxaa2"] button[data-hook="add-to-cart"]:hover {
    background: linear-gradient(135deg, #b8a87a 0%, #d4c5a0 50%, #b8a87a 100%) !important;
}

/* ── Buy Now → medium green, light serif ── */
[id^="comp-lt8qxaa2"] button[data-hook="buy-now-button"] {
    background: #5a7d4a !important;
    background-color: #5a7d4a !important;
    background-image: none !important;
    color: #F8F5F0 !important;
    border-color: #5a7d4a !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-weight: 600 !important;
}
[id^="comp-lt8qxaa2"] button[data-hook="buy-now-button"] * {
    color: #F8F5F0 !important;
    font-family: 'EB Garamond', Georgia, serif !important;
}
[id^="comp-lt8qxaa2"] button[data-hook="buy-now-button"]:hover {
    background: #4a6a3a !important;
    background-color: #4a6a3a !important;
}

/* ── Related Products — match category card aesthetic (Wix Stores gallery) ── */
[id^="comp-kpl6h6kb"] [data-hook="product-item-root"] {
    background: #F8F5F0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(60,40,20,0.06) !important;
    padding: 10px !important;
    transition: transform 200ms ease, box-shadow 200ms ease !important;
}
[id^="comp-kpl6h6kb"] [data-hook="product-item-root"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(60,40,20,0.12) !important;
}
[id^="comp-kpl6h6kb"] [data-hook="product-item-name"],
[id^="comp-kpl6h6kb"] [data-hook="product-item-name"] * {
    font-family: 'EB Garamond', Georgia, serif !important;
    color: #2a2a2a !important;
}
[id^="comp-kpl6h6kb"] [data-hook="product-item-price-to-pay"],
[id^="comp-kpl6h6kb"] [data-hook="prices-container"] * {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 18px !important;
    color: #1a1a1a !important;
}
/* "One of a Kind" ribbon → cream-gold gradient (was yellow) */
[id^="comp-kpl6h6kb"] [data-hook="RibbonDataHook.RibbonOnImage"] {
    background: linear-gradient(135deg, #c9b88c 0%, #ece4cc 50%, #c9b88c 100%) !important;
    background-color: #ece4cc !important;
    color: #4a3a20 !important;
    border: 1px solid rgba(139,109,56,0.4) !important;
    font-family: 'EB Garamond', Georgia, serif !important;
}
[id^="comp-kpl6h6kb"] [data-hook="RibbonDataHook.RibbonOnImage"] * {
    color: #4a3a20 !important;
    font-family: 'EB Garamond', Georgia, serif !important;
}

/* ============================================================
   SEARCH PAGE (/search) — hide the native Wix Site Search UI.
   It is replaced by the custom rug filter embed (#html3). The
   native search is a TPA that ignores Velo .collapse()/.hide(),
   so it is removed via CSS here. Requires '/search' in the
   Custom Code URL gate so this loader runs on the search page.
   These hooks only exist on /search, so the rules are inert
   everywhere else.
   ============================================================ */
/* ============================================================
   SEARCH PAGE (/search) — hide the native Wix Site Search UI.
   Replaced by the custom rug filter embed. The native search is
   a TPA that ignores Velo .collapse(); search-results-root holds
   only the native filter + results (the embed is a separate
   sibling element), so hiding it leaves the embed visible.
   Inert on other pages (this hook only exists on /search).
   ============================================================ */
[data-hook="search-results-root"] {
    display: none !important;
}