@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@400;500;600;700&display=swap');/* =====================================================================   COW & GOAT - FULL CUSTOM CSS (cleaned)   Fonts: Cormorant Garamond (headings) + Jost (body)   Section gap is controlled by --sec-gap (see LUXURY block near the bottom)   All product-page animations live in ONE block at the very end.   ===================================================================== */:root {  color-scheme: light;  --oat: #EAE2D0; --oat-soft: #F3EDE0; --espresso: #1C140E; --espresso-2: #241A12;  --leather: #6E3B26; --leather-lt: #8A5236; --oxblood: #7A2331; --oxblood-lt: #932B3B;  --brass: #B4894C; --brass-lt: #D8B478; --cream: #F7F1E4; --ink: #241A12;  --compare-img-before: url("https://dna3n15iwxmh8.cloudfront.net/0bdf4dc9c85a2f7522431045be3a981b/79063f464f16bdb35ab76acacc8593fc_1790757508.png");  --compare-img-after: url("https://dna3n15iwxmh8.cloudfront.net/0bdf4dc9c85a2f7522431045be3a981b/b609846ef80e2b9f7479d6a09113a323_1790757508.png");  padding-top: env(safe-area-inset-top, 0px);  padding-bottom: env(safe-area-inset-bottom, 0px);}html { scroll-padding-top: 84px; scroll-behavior: smooth; }* { box-sizing: border-box; }.mt-\[90px\] { margin-top: 120px; }body { margin: 0; color: var(--ink); font-family: 'Jost', sans-serif; -webkit-font-smoothing: antialiased; }img { max-width: 100%; display: block; }h1, h2, h3 { margin: 0; }a { color: inherit; text-decoration: none; }button { cursor: pointer; }/* keep page the only scroller (needed for scroll-driven animations) */html, body { overflow-x: clip !important; }.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(18px, 4.6vw, 40px); }.stitch { border: 1.5px dashed rgba(180,137,76,.55); }/* reveal-on-scroll */.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }.reveal.in { opacity: 1; transform: none; }@media (prefers-reduced-motion: reduce) {  .reveal { opacity: 1; transform: none; transition: none; }  html { scroll-behavior: auto; }}/* ---------- announcement bar ---------- */.topbar { background: var(--espresso); color: var(--cream); font-size: 12.5px; letter-spacing: .02em; }.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 38px; gap: 24px; }.topbar .left { display: flex; gap: 22px; opacity: .85; white-space: nowrap; overflow: hidden; }.topbar .right { display: flex; align-items: center; gap: 8px; color: var(--brass-lt); font-weight: 600; flex-shrink: 0; white-space: nowrap; }@media (max-width: 760px) { .topbar .left span:nth-child(2), .topbar .left span:nth-child(3) { display: none; } }@media (max-width: 420px) {  .topbar .left { display: none; }  .topbar .right span { max-width: 62vw; overflow: hidden; text-overflow: ellipsis; }}/* ---------- header ---------- */header { position: sticky; top: 0; z-index: 50; background: var(--oat-soft); border-bottom: 1px solid rgba(110,59,38,.18); transition: box-shadow .3s ease, background .3s ease; }header.scrolled { box-shadow: 0 8px 24px rgba(28,20,14,.10); background: var(--cream); }.header-inner { display: flex; align-items: center; justify-content: space-between; height: clamp(66px, 9vw, 84px); gap: clamp(12px, 3vw, 32px); }.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }.brand-badge { width: clamp(38px, 6vw, 48px); height: clamp(38px, 6vw, 48px); border-radius: 50%; border: 1.5px solid var(--leather); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: clamp(12px, 2vw, 15px); color: var(--leather); background: var(--cream); overflow: hidden; flex-shrink: 0; }.brand-badge img { width: 100%; height: 100%; object-fit: cover; }.brand-text { line-height: 1.05; min-width: 0; }.brand-text .name { font-weight: 600; font-size: clamp(16px, 2.6vw, 21px); color: var(--espresso); white-space: nowrap; }.brand-text .tag { font-size: 10.5px; letter-spacing: .06em; color: var(--leather); font-style: italic; }@media (max-width: 480px) { .brand-text .tag { display: none; } }nav { display: flex; gap: clamp(18px, 2.6vw, 34px); }nav a { position: relative; font-size: 14.5px; font-weight: 500; color: var(--espresso-2); padding: 6px 0; }nav a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--brass); transition: width .3s ease; }nav a:hover::after, nav a.active::after { width: 100%; }nav a.active { color: var(--oxblood); }@media (max-width: 940px) {  nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; z-index: 49; background: var(--cream); border-bottom: 1px solid rgba(110,59,38,.18); box-shadow: 0 14px 24px rgba(28,20,14,.10); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .3s ease; }  header.nav-open nav { max-height: 320px; opacity: 1; }  nav a { padding: 15px clamp(18px,4.6vw,40px); border-bottom: 1px solid rgba(110,59,38,.1); font-size: 15px; }  nav a::after { display: none; }  nav a.active { background: rgba(122,35,49,.06); }}.header-tools { display: flex; align-items: center; gap: clamp(10px,1.6vw,18px); flex-shrink: 0; }.search-box { display: flex; align-items: center; gap: 8px; background: var(--cream); border: 1px solid rgba(110,59,38,.25); border-radius: 999px; padding: 9px 16px; width: clamp(150px, 15vw, 230px); transition: border-color .25s ease, width .25s ease; }.search-box:focus-within { border-color: var(--brass); }.search-box input { border: none; outline: none; background: none; font-size: 13.5px; width: 100%; color: var(--ink); min-width: 0; }.search-box svg { flex-shrink: 0; opacity: .6; }@media (max-width: 1180px) { .search-box { display: none; } }.icon-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(110,59,38,.22); background: var(--cream); display: flex; align-items: center; justify-content: center; transition: border-color .25s ease, transform .2s ease; }.icon-btn:hover { border-color: var(--brass); transform: translateY(-2px); }.icon-btn .count { position: absolute; top: -5px; right: -5px; background: var(--oxblood); color: #fff; font-size: 10px; font-weight: 700; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }.icon-row { display: flex; gap: clamp(6px,1vw,10px); }@media (max-width: 480px) { .icon-row .icon-btn:first-child { display: none; } }.menu-btn { display: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(110,59,38,.22); background: var(--cream); align-items: center; justify-content: center; flex-shrink: 0; }@media (max-width: 940px) { .menu-btn { display: flex; } }/* ---------- hero ---------- */.hero { display: grid; grid-template-columns: minmax(300px, 44%) 1fr; min-height: 74vh; background: var(--espresso); padding-top: 42px; }.hero-copy { color: var(--cream); padding: clamp(40px,7vw,70px) clamp(24px,5vw,56px) clamp(40px,7vw,70px) clamp(20px,4vw,40px); display: flex; flex-direction: column; justify-content: center; gap: 20px; position: relative; }.hero-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }.hero-slide-stack { position: relative; min-height: clamp(150px, 24vw, 190px); }.hero-slide-text { position: absolute; inset: 0 auto auto 0; width: 100%; display: flex; flex-direction: column; gap: 20px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }#hero-r1:checked ~ .hero-copy .hero-slide-stack .hero-slide-text[data-slide="0"],#hero-r2:checked ~ .hero-copy .hero-slide-stack .hero-slide-text[data-slide="1"],#hero-r3:checked ~ .hero-copy .hero-slide-stack .hero-slide-text[data-slide="2"] { opacity: 1; visibility: visible; transform: none; position: relative; transition: opacity .5s ease .1s, transform .5s ease .1s; }.hero-copy .eyebrow { font-size: 12.5px; letter-spacing: .14em; color: var(--brass-lt); font-weight: 600; }.hero-copy h1 { font-size: clamp(38px, 4.6vw, 58px); line-height: 1.04; font-weight: 500; color: var(--cream); }.hero-copy h1 em { font-style: italic; font-weight: 500; color: var(--brass-lt); display: block; margin-top: 2px; }.hero-copy p { font-size: 15.5px; line-height: 1.65; color: rgba(247,241,228,.72); max-width: 38ch; }.hero-cta { display: flex; align-items: center; gap: 18px; margin-top: 4px; }.btn-primary { background: var(--oxblood); color: #fff; border: none; padding: 15px 30px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: .01em; transition: background .25s ease, transform .2s ease; display: inline-flex; align-items: center; gap: 9px; }.btn-primary:hover { background: var(--oxblood-lt); transform: translateY(-2px); }.hero-note { font-size: 12.5px; color: rgba(247,241,228,.55); }.hero-visual { position: relative; overflow: hidden; background: var(--leather); }.hero-slide-img { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }#hero-r1:checked ~ .hero-visual .hero-slide-img[data-slide="0"],#hero-r2:checked ~ .hero-visual .hero-slide-img[data-slide="1"],#hero-r3:checked ~ .hero-visual .hero-slide-img[data-slide="2"] { opacity: 1; pointer-events: auto; }.hero-slide-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }.hero-visual::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--espresso) 0%, rgba(28,20,14,.15) 16%, rgba(28,20,14,0) 40%); }.hero-visual::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(28,20,14,.55) 0%, rgba(28,20,14,0) 32%); }.hero-quality { position: absolute; right: 34px; top: 34px; z-index: 2; font-style: italic; color: var(--cream); font-size: 19px; line-height: 1.25; text-align: right; }.hero-quality .rule { width: 44px; height: 1.5px; background: var(--brass-lt); margin: 8px 0 0 auto; }/* hero slider UI */.hero-slider-ui { position: absolute; left: 34px; right: 34px; bottom: 28px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 16px; }.hero-count { display: flex; align-items: center; gap: 8px; font-style: italic; color: var(--cream); font-size: 14px; }.hero-count i { width: 22px; height: 1px; background: rgba(247,241,228,.4); display: inline-block; }.hero-count-num { display: none; color: var(--brass-lt); font-weight: 600; }#hero-r1:checked ~ .hero-visual .hero-count-num[data-for="0"],#hero-r2:checked ~ .hero-visual .hero-count-num[data-for="1"],#hero-r3:checked ~ .hero-visual .hero-count-num[data-for="2"] { display: inline; }.hero-dots { display: flex; gap: 8px; }.hero-dot { width: 8px; height: 8px; border-radius: 50%; cursor: pointer; background: rgba(247,241,228,.35); border: 1px solid rgba(247,241,228,.5); transition: background .3s ease, transform .2s ease, width .3s ease; }.hero-dot:hover { background: rgba(247,241,228,.6); }#hero-r1:checked ~ .hero-visual .hero-dots .hero-dot[data-for="0"],#hero-r2:checked ~ .hero-visual .hero-dots .hero-dot[data-for="1"],#hero-r3:checked ~ .hero-visual .hero-dots .hero-dot[data-for="2"] { background: var(--brass-lt); border-color: var(--brass-lt); width: 20px; }.hero-arrows { display: flex; gap: 8px; }.arrow-set { display: none; gap: 8px; }#hero-r1:checked ~ .hero-visual .arrow-set[data-for="0"],#hero-r2:checked ~ .hero-visual .arrow-set[data-for="1"],#hero-r3:checked ~ .hero-visual .arrow-set[data-for="2"] { display: flex; }.hero-arrow { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(247,241,228,.35); background: rgba(28,20,14,.35); backdrop-filter: blur(2px); cursor: pointer; color: var(--cream); display: flex; align-items: center; justify-content: center; transition: border-color .25s ease, background .25s ease, transform .2s ease; }.hero-arrow:hover { border-color: var(--brass-lt); background: rgba(28,20,14,.6); transform: translateY(-2px); }@media (max-width: 980px) and (min-width: 861px) {  .hero { grid-template-columns: minmax(280px,48%) 1fr; }  .hero-copy p { max-width: 32ch; }}@media (max-width: 860px) {  .hero-slider-ui { left: 20px; right: 20px; bottom: 18px; }  .hero-arrow { width: 32px; height: 32px; }  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto; }  .hero-visual { height: 50vh; order: 1; }  .hero-visual::before { background: linear-gradient(0deg, var(--espresso) 0%, rgba(28,20,14,0) 30%); }  .hero-copy { order: 2; padding: clamp(32px,7vw,46px) clamp(20px,5vw,24px); text-align: left; }  .hero-quality { font-size: 15px; top: 20px; right: 20px; }}@media (max-width: 420px) {  .hero-visual { height: 42vh; }  .hero-cta { flex-wrap: wrap; gap: 12px; }  .btn-primary { padding: 14px 24px; font-size: 13.5px; }}/* ---------- features strip ---------- */.features { background: var(--oat-soft); border-bottom: 1px solid rgba(110,59,38,.15); }.features .wrap { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,2.6vw,20px); padding: clamp(20px,3vw,26px) clamp(18px,4.6vw,40px); }.feature { display: flex; align-items: center; gap: 12px; min-width: 0; }.feature .ic { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--cream); border: 1px solid rgba(110,59,38,.2); display: flex; align-items: center; justify-content: center; color: var(--leather); }.feature b { display: block; font-size: 13.5px; color: var(--espresso-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.feature span { font-size: 12px; color: var(--leather); }@media (max-width: 860px) { .features .wrap { grid-template-columns: repeat(2,1fr); } }@media (max-width: 420px) { .features .wrap { grid-template-columns: 1fr; } .feature b { white-space: normal; } }/* ---------- (unused for now) shop-by-category grid ---------- */.shop-by-category { background: #fff; padding-top: env(safe-area-inset-top,0px); padding-bottom: env(safe-area-inset-bottom,0px); }.shop-by-category * { box-sizing: border-box; }.sbc-wrap { max-width: 1240px; margin: 0 auto; padding: 56px 32px 72px; }.sbc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }.sbc-head-left { display: flex; align-items: baseline; gap: 22px; flex: 1; min-width: 0; }.sbc-title { font-weight: 700; font-size: clamp(26px, 3.4vw, 38px); margin: 0; color: #231f1c; white-space: nowrap; }.sbc-rule { height: 1px; background: #e4dfd5; flex: 1; min-width: 24px; }.sbc-view-all { display: inline-flex; align-items: center; gap: 8px; color: #231f1c; font-size: 15px; white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color .25s ease, color .25s ease; }.sbc-view-all svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.4,0,.2,1); }.sbc-view-all:hover { color: #a3401f; border-color: #a3401f; }.sbc-view-all:hover svg { transform: translateX(4px); }.sbc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }.sbc-item { background: #efebe4; border-radius: 6px; padding: 28px 20px 26px; text-align: center; color: #231f1c; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(14px); animation: sbc-rise .6s cubic-bezier(.22,.7,.32,1) forwards; }.sbc-item:nth-child(1) { animation-delay: .05s; }.sbc-item:nth-child(2) { animation-delay: .13s; }.sbc-item:nth-child(3) { animation-delay: .21s; }.sbc-item:nth-child(4) { animation-delay: .29s; }.sbc-item:nth-child(5) { animation-delay: .37s; }@keyframes sbc-rise { to { opacity: 1; transform: translateY(0); } }.sbc-thumb { width: 100%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; overflow: hidden; }.sbc-thumb img { width: 88%; height: 88%; object-fit: contain; background: transparent; transition: transform .45s cubic-bezier(.22,.7,.32,1); filter: drop-shadow(0 10px 16px rgba(35,31,28,.16)); }.sbc-item:hover .sbc-thumb img { transform: scale(1.06) translateY(-3px); }.sbc-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; }.sbc-arrow { color: #a3401f; font-size: 17px; line-height: 1; display: inline-block; transition: transform .3s cubic-bezier(.4,0,.2,1); }.sbc-item:hover .sbc-arrow { transform: translateX(5px); }@media (max-width: 980px) { .sbc-grid { grid-template-columns: repeat(3, 1fr); } }@media (max-width: 620px) {  .sbc-wrap { padding: 40px 18px 56px; }  .sbc-head { align-items: center; }  .sbc-rule { display: none; }  .sbc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }  .sbc-item { padding: 20px 14px; }  .sbc-name { font-size: 14.5px; }}@media (prefers-reduced-motion: reduce) {  .sbc-item, .sbc-thumb img, .sbc-arrow, .sbc-view-all svg { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }}/* ---------- home tabs (Hot Deals / Featured / New Arrivals) ---------- */.hpcp-tabs { width: 100%; }.hpcp-tab-row { align-items: center; gap: 20px; flex-wrap: wrap; padding: 0 16px; margin-bottom: 12px; }@media (min-width: 768px) { .hpcp-tab-row { gap: 32px; padding: 0 32px; margin-bottom: 20px; } }@media (min-width: 1536px) { .hpcp-tab-row { padding: 0 64px; } }.hpcp-tab { position: relative; background: transparent; border: none; cursor: pointer; padding: 0 0 6px; color: #9CA3AF; transition: color .2s ease; }.hpcp-tab:hover { color: #4B5563; }.hpcp-tab:focus { outline: none; }.hpcp-tab-active { color: var(--color-primary, #1a1a1a); }.hpcp-tab-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; border-radius: 1px; animation: hpcp-underline .25s ease-out; }@keyframes hpcp-underline { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }.hpcp-content { min-height: 80px; }.hpcp-fade-enter-active, .hpcp-fade-leave-active { transition: opacity .25s ease, transform .25s ease; }.hpcp-fade-enter-from, .hpcp-fade-leave-to { opacity: 0; transform: translateY(10px); }@media (prefers-reduced-motion: reduce) {  .hpcp-tab-active::after, .hpcp-fade-enter-active, .hpcp-fade-leave-active { animation: none !important; transition: none !important; }}/* ---------- video banner ---------- */.video-banner { position: relative; width: 100%; aspect-ratio: 24 / 7; overflow: hidden; }.video-banner-media { width: 100%; height: 100%; object-fit: cover; display: block; }.video-banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 5%; background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%); color: #fff; }.video-banner-title { font-weight: bold; margin-bottom: 10px; }.video-banner-desc { font-size: clamp(12px, 1.2vw, 16px); margin-bottom: 18px; max-width: 400px; }.video-banner-btn { background: #ff5722; color: #fff; padding: 10px 22px; border-radius: 6px; font-size: 14px; font-weight: 600; display: inline-block; transition: background .3s ease; }.video-banner-btn:hover { background: #e64a19; }@media (max-width: 600px) {  .video-banner { aspect-ratio: 16 / 9; }  .video-banner-overlay { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 100%); align-items: center; text-align: center; }  .video-banner-desc { max-width: 90%; }}/* ---------- (unused for now) category showcase slider ---------- */.category-showcase-section { background: #fff; padding-top: env(safe-area-inset-top,0px); padding-bottom: env(safe-area-inset-bottom,0px); }.category-showcase-section * { box-sizing: border-box; }.csx-wrap { max-width: 1440px; margin: 0 auto; padding: 28px 20px 36px; }.csx-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }.csx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }.csx-eyebrow { margin: 0 0 6px; }.csx-title { font-weight: 700; font-size: clamp(24px, 3.2vw, 34px); letter-spacing: .3px; margin: 0; color: #161412; }.csx-nav { display: flex; gap: 10px; flex-shrink: 0; }.csx-arrow { display: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #d8d3c8; background: #fff; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }.csx-arrow:hover { background: #161412; border-color: #161412; transform: translateY(-1px); }.csx-arrow:hover svg { stroke: #fff; }.csx-arrow svg { width: 16px; height: 16px; stroke: #161412; transition: stroke .2s ease; }#csx-r1:checked ~ .csx-head .csx-show-r1,#csx-r2:checked ~ .csx-head .csx-show-r2,#csx-r3:checked ~ .csx-head .csx-show-r3,#csx-r4:checked ~ .csx-head .csx-show-r4,#csx-r5:checked ~ .csx-head .csx-show-r5,#csx-r6:checked ~ .csx-head .csx-show-r6 { display: flex; }.csx-viewport { overflow: hidden; }.csx-track { display: flex; gap: 16px; transition: transform .45s cubic-bezier(.22,.7,.32,1); }.csx-card { position: relative; flex: 0 0 25%; display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 3/4; background: #efebe4; }.csx-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.22,.7,.32,1); }.csx-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,8,.62) 0%, rgba(10,9,8,.18) 40%, rgba(10,9,8,0) 62%); transition: opacity .35s ease; }.csx-card:hover img { transform: scale(1.07); }.csx-card:hover::after { opacity: .85; }.csx-label { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; color: #fff; font-size: 18px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; transition: transform .35s cubic-bezier(.22,.7,.32,1); }.csx-card:hover .csx-label { transform: translateY(-4px); }#csx-r2:checked ~ .csx-viewport .csx-track { transform: translateX(-25%); }#csx-r3:checked ~ .csx-viewport .csx-track, #csx-r4:checked ~ .csx-viewport .csx-track, #csx-r5:checked ~ .csx-viewport .csx-track, #csx-r6:checked ~ .csx-viewport .csx-track { transform: translateX(-50%); }@media (max-width: 1024px) {  .csx-card { flex-basis: 38%; }  #csx-r2:checked ~ .csx-viewport .csx-track { transform: translateX(-38%); }  #csx-r3:checked ~ .csx-viewport .csx-track { transform: translateX(-76%); }  #csx-r4:checked ~ .csx-viewport .csx-track { transform: translateX(-114%); }  #csx-r5:checked ~ .csx-viewport .csx-track, #csx-r6:checked ~ .csx-viewport .csx-track { transform: translateX(-128%); }}@media (max-width: 640px) {  .csx-wrap { padding: 22px 16px 28px; }  .csx-head { align-items: center; }  .csx-card { flex-basis: 62%; }  .csx-track { gap: 12px; }  .csx-label { font-size: 15px; left: 14px; right: 14px; bottom: 12px; }  #csx-r2:checked ~ .csx-viewport .csx-track { transform: translateX(-62%); }  #csx-r3:checked ~ .csx-viewport .csx-track { transform: translateX(-124%); }  #csx-r4:checked ~ .csx-viewport .csx-track { transform: translateX(-186%); }  #csx-r5:checked ~ .csx-viewport .csx-track { transform: translateX(-248%); }  #csx-r6:checked ~ .csx-viewport .csx-track { transform: translateX(-272%); }}@media (prefers-reduced-motion: reduce) {  .csx-card img, .csx-card::after, .csx-label, .csx-arrow, .csx-track { transition: none !important; }}/* ---------- our mission ---------- */.om-section { background: #fff; padding-top: env(safe-area-inset-top,0px); padding-bottom: env(safe-area-inset-bottom,0px); }.om-section * { box-sizing: border-box; }.om-wrap { max-width: 820px; margin: 0 auto; padding: 56px 24px 64px; text-align: center; }.om-eyebrow { margin: 0 0 10px; opacity: 0; animation: om-rise .6s cubic-bezier(.22,.7,.32,1) forwards; }.om-title { margin: 0 0 20px; opacity: 0; animation: om-rise .6s cubic-bezier(.22,.7,.32,1) .1s forwards; }.om-divider { width: 0; height: 2px; background: #a3401f; margin: 0 auto 26px; animation: om-line .6s cubic-bezier(.22,.7,.32,1) .3s forwards; }.om-text { font-size: 15.5px; line-height: 1.75; color: #4b473f; margin: 0; opacity: 0; animation: om-rise .6s cubic-bezier(.22,.7,.32,1) .22s forwards; }@keyframes om-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }@keyframes om-line { to { width: 56px; } }@media (max-width: 640px) { .om-wrap { padding: 44px 20px 48px; } .om-text { font-size: 14.5px; } }@media (prefers-reduced-motion: reduce) {  .om-eyebrow, .om-title, .om-divider, .om-text { animation: none !important; opacity: 1 !important; transform: none !important; width: 56px !important; }}/* ---------- crafted with care (home) ---------- */.cwc-section { background: #fff; padding-top: env(safe-area-inset-top,0px); padding-bottom: env(safe-area-inset-bottom,0px); }.cwc-section * { box-sizing: border-box; }.cwc-wrap { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }.cwc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }.cwc-copy { opacity: 0; transform: translateX(-16px); animation: cwc-in-left .6s cubic-bezier(.22,.7,.32,1) forwards; }.cwc-title { margin: 0 0 20px; }.cwc-copy p { font-size: 15.5px; line-height: 1.75; color: #4b473f; margin: 0 0 18px; }.cwc-copy p:last-of-type { margin-bottom: 28px; }.cwc-btn { display: inline-block; padding: 13px 26px; border: 1px solid #161412; border-radius: 4px; color: #161412; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: background .25s ease, color .25s ease; }.cwc-btn:hover { background: #161412; color: #fff; }.cwc-media { opacity: 0; transform: translateX(16px); animation: cwc-in-right .6s cubic-bezier(.22,.7,.32,1) .1s forwards; }.cwc-media img { width: 100%; height: 100%; aspect-ratio: 4/4; object-fit: cover; border-radius: 16px; display: block; }@keyframes cwc-in-left { to { opacity: 1; transform: translateX(0); } }@keyframes cwc-in-right { to { opacity: 1; transform: translateX(0); } }@media (max-width: 860px) {  .cwc-grid { grid-template-columns: 1fr; gap: 32px; }  .cwc-media { order: -1; }  .cwc-media img { aspect-ratio: 16/10; border-radius: 12px; }}@media (max-width: 480px) {  .cwc-wrap { padding: 36px 18px; }  .cwc-title { margin-bottom: 14px; }  .cwc-copy p { font-size: 14.5px; }}@media (prefers-reduced-motion: reduce) {  .cwc-copy, .cwc-media { animation: none !important; opacity: 1 !important; transform: none !important; }}/* ---------- footer ---------- */.mf-footer { background: #1c140e; color: #efe9df; padding-bottom: env(safe-area-inset-bottom,0px); position: relative; }.mf-footer * { box-sizing: border-box; }.mf-wrap { max-width: 1320px; margin: 0 auto; padding: 56px 24px 0; }.mf-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(239,233,223,.12); }.mf-fade { opacity: 0; transform: translateY(16px); animation: mf-rise .6s cubic-bezier(.22,.7,.32,1) forwards; }.mf-top > *:nth-child(1) { animation-delay: .02s; }.mf-top > *:nth-child(2) { animation-delay: .08s; }.mf-top > *:nth-child(3) { animation-delay: .14s; }.mf-top > *:nth-child(4) { animation-delay: .20s; }@keyframes mf-rise { to { opacity: 1; transform: translateY(0); } }.mf-badges { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }.mf-logo { height: 44px; width: auto; }.mf-badge { height: 44px; width: auto; }.mf-brand-text { font-size: 13.5px; line-height: 1.75; color: #c9c0b1; max-width: 340px; margin: 0 0 14px; }.mf-readmore { display: inline-block; color: #efe9df; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: opacity .25s ease; }.mf-readmore:hover { opacity: .7; }.mf-col-title { font-size: 14px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #efe9df; margin: 0 0 20px; }.mf-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }.mf-links a { position: relative; display: inline-block; color: #c9c0b1; font-size: 14px; transition: color .25s ease; }.mf-links a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: #efe9df; transition: width .3s cubic-bezier(.22,.7,.32,1); }.mf-links a:hover { color: #efe9df; }.mf-links a:hover::after { width: 100%; }.mf-social { display: flex; gap: 10px; flex-wrap: wrap; }.mf-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(239,233,223,.25); display: flex; align-items: center; justify-content: center; color: #efe9df; transition: background .25s ease, border-color .25s ease, transform .25s ease; }.mf-social a svg { width: 14px; height: 14px; }.mf-social a:hover { background: #efe9df; border-color: #efe9df; color: #1c140e; transform: translateY(-3px); }.mf-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 20px 0; opacity: 0; animation: mf-rise .6s cubic-bezier(.22,.7,.32,1) .26s forwards; }.mf-copy { font-size: 12.5px; color: #a89e8d; margin: 0; }.mf-pay { display: flex; gap: 8px; align-items: center; }.mf-pay img { height: 20px; width: auto; border-radius: 3px; }@media (max-width: 980px) {  .mf-top { grid-template-columns: 1fr 1fr; row-gap: 36px; }  .mf-brand-block { grid-column: 1 / -1; }}@media (max-width: 560px) {  .mf-wrap { padding: 44px 18px 0; }  .mf-top { grid-template-columns: 1fr; row-gap: 30px; padding-bottom: 32px; }  .mf-brand-block { grid-column: auto; }  .mf-badges { flex-wrap: wrap; }  .mf-bottom { flex-direction: column; align-items: flex-start; padding: 18px 0 26px; }}@media (prefers-reduced-motion: reduce) {  .mf-fade, .mf-bottom, .mf-links a, .mf-social a { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }}/* ---------- product detail: accordion ---------- */.product-accordion .accordion-content { font-size: 14px; line-height: 1.75; }.product-accordion .accordion-content p { margin: 0 0 12px; }.product-accordion .accordion-content ul { list-style: disc; margin: 0 0 14px; padding-left: 22px; }.product-accordion .accordion-content ol { list-style: decimal; margin: 0 0 14px; padding-left: 22px; }.product-accordion .accordion-content li { margin: 0 0 6px; }.product-accordion .accordion-content h1, .product-accordion .accordion-content h2, .product-accordion .accordion-content h3, .product-accordion .accordion-content h4 { font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; color: #111827; margin: 16px 0 8px; }.product-accordion .accordion-content h1:first-child, .product-accordion .accordion-content h2:first-child, .product-accordion .accordion-content h3:first-child { margin-top: 0; }.product-accordion .accordion-content strong, .product-accordion .accordion-content b { color: #374151; font-weight: 600; }.product-accordion .accordion-content img { max-width: 100%; height: auto; }.product-accordion .accordion-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }.product-accordion .accordion-content th, .product-accordion .accordion-content td { padding: 8px 12px; border: 1px solid #e5e7eb; }.product-accordion button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.product-accordion button { transition: color .2s ease; }.product-accordion button:hover { color: #7a1220; opacity: 1; }/* ---------- brand marquee ---------- */@keyframes brand-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }.brand-marquee__track { animation: brand-marquee-scroll 45s linear infinite; will-change: transform; }.brand-marquee__item { -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0 currentColor; transition: -webkit-text-fill-color .5s ease, -webkit-text-stroke-width .5s ease; }@media (hover: hover) { .brand-marquee:hover .brand-marquee__item { -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1.2px; } }@keyframes brand-marquee-outline {  0%, 40% { -webkit-text-fill-color: currentColor; -webkit-text-stroke-width: 0; }  50%, 90% { -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1.2px; }  100% { -webkit-text-fill-color: currentColor; -webkit-text-stroke-width: 0; }}@media (hover: none) { .brand-marquee__item { animation: brand-marquee-outline 10s ease-in-out infinite; } }@media (max-width: 767px) { .brand-marquee__track { animation-duration: 30s; } }@media (prefers-reduced-motion: reduce) { .brand-marquee__track, .brand-marquee__item { animation: none; } }/* ---------- product description (v-html) ---------- */.product-description-content { color: #4b5563; line-height: 1.8; }.product-description-content h1, .product-description-content h2, .product-description-content h3, .product-description-content h4 { font-family: inherit; color: #111827; font-weight: 700; line-height: 1.3; margin: 28px 0 12px; }.product-description-content h1:first-child, .product-description-content h2:first-child, .product-description-content h3:first-child { margin-top: 0; }.product-description-content h1 { font-size: 24px; }.product-description-content h2 { font-size: 20px; }.product-description-content h3 { font-size: 18px; }.product-description-content h4 { font-size: 16px; }.product-description-content p { margin: 0 0 14px; }.product-description-content ul { list-style: none; margin: 0 0 20px; padding: 0; }.product-description-content ul li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px dashed #e5e7eb; margin: 0; }.product-description-content ul li:last-child { border-bottom: 0; }.product-description-content ul li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: #7a1220; }.product-description-content ul li strong, .product-description-content ul li b { color: #111827; font-weight: 600; }.product-description-content ol { margin: 0 0 20px; padding-left: 22px; }.product-description-content ol li { padding: 4px 0; }.product-description-content img { max-width: 100%; height: auto; border-radius: 12px; }.product-description-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }.product-description-content th, .product-description-content td { padding: 10px 14px; border: 1px solid #e5e7eb; }.product-description-content th { background: #f9fafb; color: #111827; text-align: left; }img.responsive-image.preview-box { border-radius: 15px; }/* ---------- product gallery layout (old zoomer) ---------- */.image-inner-wrapper { position: relative; }#zoomWrapper > div { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 16px; width: 100%; }#zoomWrapper [class*="thumb-list"], #zoomWrapper [class*="thumbs"] { order: 0 !important; flex: 0 0 84px !important; width: 84px !important; max-height: 520px; overflow-y: auto; overflow-x: hidden; display: flex !important; flex-direction: column !important; gap: 12px; margin: 0 !important; padding: 0 !important; scrollbar-width: none; }#zoomWrapper [class*="thumb-list"]::-webkit-scrollbar, #zoomWrapper [class*="thumbs"]::-webkit-scrollbar { display: none; }#zoomWrapper [class*="thumb"] img { width: 100% !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: border-color .2s ease, opacity .2s ease; opacity: .85; }#zoomWrapper [class*="thumb"] img:hover, #zoomWrapper [class*="chosen"] img, #zoomWrapper [class*="active"] img, #zoomWrapper [class*="selected"] img { border-color: #7a1220; opacity: 1; }#zoomWrapper [class*="preview"], #zoomWrapper [class*="responsive-image"], #zoomWrapper [class*="img-box"] { order: 1 !important; flex: 1 1 auto !important; min-width: 0; border-radius: 16px; overflow: hidden; position: relative; background: #f3f4f6; }#zoomWrapper [class*="preview"] img, #zoomWrapper [class*="responsive-image"] img { width: 100% !important; height: auto; display: block; border-radius: 16px; }#zoomWrapper [class*="controller"], #zoomWrapper [class*="control"] { display: none !important; }@media (max-width: 767px) {  #zoomWrapper > div { flex-direction: column !important; }  #zoomWrapper [class*="preview"], #zoomWrapper [class*="responsive-image"] { order: 0 !important; width: 100%; }  #zoomWrapper [class*="thumb-list"], #zoomWrapper [class*="thumbs"] { order: 1 !important; flex-direction: row !important; width: 100% !important; flex-basis: auto !important; max-height: none; overflow-x: auto; overflow-y: hidden; }  #zoomWrapper [class*="thumb"] img { width: 64px !important; }}/* ---------- trust badges (+ hover) ---------- */.trust-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; padding: 22px 0; margin-top: 6px; border-bottom: 1px solid #e5e7eb; }@media (min-width: 640px) { .trust-badges { grid-template-columns: repeat(4, 1fr); } }.trust-badge { display: flex; align-items: flex-start; gap: 10px; cursor: default; transition: transform .35s cubic-bezier(.22,.7,.32,1); }.trust-badge__icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #faf3ee; color: #7a1220; display: flex; align-items: center; justify-content: center; transition: background-color .3s ease, color .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }.trust-badge__icon svg { width: 18px; height: 18px; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }.trust-badge__text { display: flex; flex-direction: column; min-width: 0; }.trust-badge__text strong { font-size: 12.5px; font-weight: 600; color: #111827; line-height: 1.3; transition: color .25s ease; }.trust-badge__text em { font-style: normal; font-size: 11.5px; color: #6b7280; line-height: 1.3; transition: transform .3s ease; }@media (hover: hover) {  .trust-badge:hover { transform: translateY(-4px); }  .trust-badge:hover .trust-badge__icon { background: #7a1220; color: #fff; transform: scale(1.12) rotate(-8deg); box-shadow: 0 8px 18px rgba(122,18,32,.28); }  .trust-badge:hover .trust-badge__icon svg { transform: scale(1.08) rotate(8deg); }  .trust-badge:hover .trust-badge__text strong { color: #7a1220; }  .trust-badge:hover .trust-badge__text em { transform: translateX(3px); }}/* ---------- "Crafted With Care" feature band (+ hover) ---------- */.craft-band { background: #faf7f2; border-top: 1px solid #e9e2d8; border-bottom: 1px solid #e9e2d8; }.craft-band__inner { max-width: 1400px; margin: 0 auto; padding: 56px 24px 64px; }.craft-band__head { text-align: center; margin-bottom: 40px; }.craft-band__eyebrow { display: inline-block; margin-bottom: 8px; }.craft-band__title { margin: 0; position: relative; padding-bottom: 18px; }.craft-band__title::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 56px; height: 2px; background: #7a1220; transform: translateX(-50%); }.craft-band__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }@media (min-width: 768px) { .craft-band__grid { grid-template-columns: repeat(4, 1fr); } }.craft-band__item { text-align: center; transition: transform .4s cubic-bezier(.22,.7,.32,1); }.craft-band__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #7a1220; border: 1px solid #e9e2d8; margin-bottom: 16px; transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }.craft-band__icon svg { width: 26px; height: 26px; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }.craft-band__item-title { font-size: 15px; font-weight: 600; color: #111827; margin: 0 0 8px; transition: color .25s ease, letter-spacing .3s ease; }.craft-band__item-desc { font-size: 13px; line-height: 1.7; color: #6b7280; margin: 0; transition: color .25s ease; }@media (hover: hover) {  .craft-band__item:hover { transform: translateY(-6px); }  .craft-band__item:hover .craft-band__icon { background: #7a1220; color: #fff; border-color: #7a1220; transform: scale(1.1) rotate(-6deg); box-shadow: 0 12px 24px rgba(122,18,32,.28); }  .craft-band__item:hover .craft-band__icon svg { transform: rotate(6deg) scale(1.08); }  .craft-band__item:hover .craft-band__item-title { color: #7a1220; letter-spacing: .3px; }  .craft-band__item:hover .craft-band__item-desc { color: #374151; }}/* ---------- small polish: swatches, share icons ---------- */.attr-value { transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; }.attr-value:hover { transform: translateY(-1px); }.attr-value.border-primary, .attr-value.border-black { box-shadow: 0 0 0 3px rgba(122,18,32,.12); }.product-share a { transition: transform .2s ease, opacity .2s ease; }.product-share a:hover { transform: translateY(-2px); opacity: .8; }/* ---------- category detail page ---------- */.cat-list-wrp { margin-top: 32px; }/* ---------- compare slider (Elegant Contrast / Refined Presence) ---------- */.compare-showcase { padding: clamp(48px, 8vw, 96px) 20px; background: #fff; }.compare-showcase__inner { max-width: 1100px; margin: 0 auto; text-align: center; }.compare-showcase__eyebrow { margin: 0 0 10px; }.compare-showcase__title { margin: 0 0 clamp(28px, 4vw, 44px); }.compare-slider { position: relative; width: 100%; aspect-ratio: 3 / 2; max-height: 640px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #1a1a1a; box-shadow: 0 20px 50px rgba(0,0,0,.18); --reveal: 50%; }.compare-slider__after { position: absolute; inset: 0; background-image: var(--compare-img-after); background-size: cover; background-position: center; }.compare-slider__before { position: absolute; inset: 0; background-image: var(--compare-img-before); background-size: cover; background-position: center; clip-path: inset(0 calc(100% - var(--reveal)) 0 0); }.compare-slider__handle { position: absolute; top: 0; bottom: 0; left: var(--reveal); width: 2px; background: rgba(255,255,255,.9); transform: translateX(-1px); pointer-events: none; z-index: 2; }.compare-slider__handle-dot { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 4px 14px rgba(0,0,0,.35); animation: compare-handle-hint 1.8s ease-out 2; }.compare-slider__handle-dot::before, .compare-slider__handle-dot::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transform: translateY(-50%); }.compare-slider__handle-dot::before { left: 10px; border-right: 6px solid #111827; }.compare-slider__handle-dot::after { right: 10px; border-left: 6px solid #111827; }@keyframes compare-handle-hint {  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,.5); }  50% { box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 0 12px rgba(255,255,255,0); }}.compare-slider__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 3; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; }.compare-slider__range::-webkit-slider-runnable-track { -webkit-appearance: none; width: 100%; height: 100%; background: transparent; }.compare-slider__range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; background: transparent; cursor: ew-resize; }.compare-slider__range::-moz-range-track { width: 100%; height: 100%; background: transparent; border: none; }.compare-slider__range::-moz-range-thumb { width: 24px; height: 24px; background: transparent; border: none; cursor: ew-resize; }.compare-slider__label { position: absolute; bottom: 20px; z-index: 2; padding: 8px 16px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(2px); pointer-events: none; }.compare-slider__label--left { left: 20px; }.compare-slider__label--right { right: 20px; }@media (max-width: 640px) {  .compare-slider { aspect-ratio: 4 / 5; border-radius: 14px; }  .compare-slider__label { font-size: 10.5px; padding: 6px 12px; bottom: 14px; }  .compare-slider__label--left { left: 14px; }  .compare-slider__label--right { right: 14px; }  .compare-slider__handle-dot { width: 36px; height: 36px; }}@media (prefers-reduced-motion: reduce) { .compare-slider__handle-dot { animation: none; } }/* ---------- header mega menu (horizontal menu) ---------- */.horizontal-menu-wrapper.relative { margin: auto; }.hmenu-item { position: relative; }.hmenu-subitem { position: relative; }.hmenu-link { position: relative; padding: 10px 2px; color: #111827; transition: color .25s ease, letter-spacing .3s ease, transform .3s cubic-bezier(.22,.7,.32,1); }.hmenu-link::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 0; height: 2px; background: #7a1220; transition: width .25s ease; }.hmenu-item:hover > .hmenu-link::after, .hmenu-link.active::after { width: 100%; }.hmenu-arrow { transition: transform .25s ease; }.hmenu-item:hover > .flex > .hmenu-arrow { transform: rotate(180deg); }.hmenu-panel { position: absolute; top: 100%; left: -12px; min-width: 220px; margin-top: 10px; background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(17,24,39,.14); border: 1px solid #f0f0f0; padding: 10px 6px; z-index: 40; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; }.hmenu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }.hmenu-item:hover > .hmenu-panel, .hmenu-item:focus-within > .hmenu-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }.hmenu-panel.hmenu-panel--fixed { position: fixed; top: var(--panel-top, auto); left: var(--panel-left, auto); margin-top: 0; }.hmenu-panel--more { min-width: 420px; }.hmenu-panel--more .hmenu-sublist { columns: 2; column-gap: 20px; }.hmenu-sublist { list-style: none; margin: 0; padding: 0; }.hmenu-sublink { display: block; padding: 9px 12px; border-radius: 8px; color: #374151; font-size: 14px; position: relative; background-image: linear-gradient(#7a1220, #7a1220); background-repeat: no-repeat; background-position: 6px center; background-size: 3px 0; transition: color .2s ease, background-color .2s ease, background-size .25s cubic-bezier(.22,.7,.32,1), padding-left .25s cubic-bezier(.22,.7,.32,1); }.hmenu-sublink::before { content: none !important; display: none !important; }.hmenu-subitem__row { display: flex; align-items: center; justify-content: space-between; }.hmenu-subarrow { color: #9ca3af; transition: transform .2s ease, color .2s ease; }.hmenu-subitem:hover > .hmenu-subitem__row .hmenu-subarrow { color: #7a1220; transform: translateX(2px); }.hmenu-panel--flyout { top: -11px; left: 100%; margin-top: 0; margin-left: 6px; transform: translateX(-8px); }.hmenu-panel--flyout::before { left: -6px; right: auto; top: 0; bottom: 0; width: 6px; height: auto; }.hmenu-subitem:hover > .hmenu-panel--flyout, .hmenu-subitem:focus-within > .hmenu-panel--flyout { opacity: 1; transform: translateX(0); pointer-events: auto; }.hmenu-panel--flyout.hmenu-panel--fixed { margin-left: 0; }/* hover states */.hmenu-item:hover > .hmenu-link, .hmenu-item:hover > .flex > .hmenu-link { color: #7a1220; letter-spacing: .3px; transform: translateY(-1px); opacity: 1; }.hmenu-item:hover > .flex > .hmenu-link::after { width: 100%; }.hmenu-item:hover > .flex > .hmenu-arrow { color: #7a1220; }.hmenu-panel .hmenu-subitem .hmenu-sublink:hover,.hmenu-panel .hmenu-subitem:hover > .hmenu-subitem__row > .hmenu-sublink,.hmenu-panel .hmenu-subitem .hmenu-sublink.active { background-color: #faf3ee; background-image: linear-gradient(#7a1220, #7a1220); background-repeat: no-repeat; background-position: 6px center; background-size: 3px 55%; color: #7a1220; padding-left: 18px; opacity: 1; }/* "More" list uses 2 columns: never split an item between the columns */.hmenu-panel--more .hmenu-sublist > li, .hmenu-sublist > .hmenu-subitem { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }@media (max-width: 1023px) {  .hmenu-panel, .hmenu-panel--more, .hmenu-panel--flyout, .hmenu-panel--fixed { position: static !important; top: auto !important; left: auto !important; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; border: 0; margin: 0 0 0 14px; padding: 2px 0 2px 10px; border-left: 2px solid #f0f0f0; }  .hmenu-panel--more .hmenu-sublist { columns: 1; }  .hmenu-arrow, .hmenu-subarrow { display: none; }}/* items fade + slide in one after another when a panel opens */@keyframes hmenuItemIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }@keyframes hmenuItemFade { from { opacity: 0; } to { opacity: 1; } }@media (min-width: 1024px) {  .hmenu-item:hover > .hmenu-panel .hmenu-sublist > li, .hmenu-subitem:hover > .hmenu-panel--flyout .hmenu-sublist > li { animation: hmenuItemIn .35s cubic-bezier(.22,.7,.32,1) backwards; }  .hmenu-item:hover > .hmenu-panel--more .hmenu-sublist > li { animation-name: hmenuItemFade; }  .hmenu-sublist > li:nth-child(1) { animation-delay: .03s !important; }  .hmenu-sublist > li:nth-child(2) { animation-delay: .06s !important; }  .hmenu-sublist > li:nth-child(3) { animation-delay: .09s !important; }  .hmenu-sublist > li:nth-child(4) { animation-delay: .12s !important; }  .hmenu-sublist > li:nth-child(5) { animation-delay: .15s !important; }  .hmenu-sublist > li:nth-child(6) { animation-delay: .18s !important; }  .hmenu-sublist > li:nth-child(7) { animation-delay: .21s !important; }  .hmenu-sublist > li:nth-child(n+8) { animation-delay: .24s !important; }}@media (prefers-reduced-motion: reduce) {  .hmenu-link, .hmenu-sublink { transition: none !important; }  .hmenu-sublist > li { animation: none !important; }}/* =====================================================================   PRODUCT CARD - HOME (.card.grid-mode)   ===================================================================== */@keyframes cgShine { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }@keyframes cgHeartPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }@keyframes cgReveal {  0% { opacity: 0; transform: translateY(34px) scale(.95); filter: blur(4px); }  60% { filter: blur(0); }  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }}@keyframes cgInfoIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }@keyframes cgImgIn { from { opacity: 0; transform: scale(.85) rotate(-4deg); } to { opacity: 1; transform: scale(1) rotate(0); } }.card.grid-mode {  --cg-brand: #6b0f1a; --cg-ink: #1c1411; --cg-muted: #7a6f68; --cg-cream: #f6f1ea; --cg-line: #eee6dc; --cg-sale: #c8102e; --cg-gold: #c9a45c;  position: relative; background: #fff !important; border: 1px solid var(--cg-line) !important; border-radius: 20px !important; overflow: hidden; box-shadow: 0 2px 10px rgba(40,20,10,.05); height: 100%;  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease !important;  animation: cgReveal .8s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--cg-i, 0) * 120ms);}.card.grid-mode:hover { border-color: transparent !important; }.card.grid-mode::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--cg-gold), var(--cg-brand)); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.8,.2,1); pointer-events: none; z-index: 3; }.card.grid-mode:hover::after { transform: scaleX(1); }.card.grid-mode > a.relative { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 65%, #fff 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, var(--cg-cream) 0%, #fff 100%); padding: 14px; }.card.grid-mode > a.relative picture { width: 100%; height: 100%; display: block; }.card.grid-mode .thumb { background: transparent !important; mix-blend-mode: multiply; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(60,30,10,.18)); transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease; animation: cgImgIn .9s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--cg-i, 0) * 120ms + 180ms); }.card.grid-mode:hover .thumb { transform: scale(1.1) rotate(-2deg) translateY(-4px); filter: drop-shadow(0 20px 18px rgba(60,30,10,.25)); }.card.grid-mode > a.relative::after { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform: translateX(-130%) skewX(-20deg); pointer-events: none; z-index: 1; }.card.grid-mode:hover > a.relative::after { animation: cgShine .9s ease; }.card.grid-mode > a.relative button { transition: transform .25s ease, box-shadow .25s ease; }.card.grid-mode > a.relative button:hover { animation: cgHeartPop .45s ease; box-shadow: 0 6px 14px rgba(107,15,26,.25); }.card.grid-mode .info { padding: 8px 16px 20px !important; gap: 2px; }.card.grid-mode .info > * { animation: cgInfoIn .6s ease backwards; animation-delay: calc(var(--cg-i, 0) * 120ms + 350ms); }.card.grid-mode .info > *:nth-child(n+2) { animation-delay: calc(var(--cg-i, 0) * 120ms + 450ms); }.card.grid-mode .info > *:nth-child(n+4) { animation-delay: calc(var(--cg-i, 0) * 120ms + 550ms); }.card.grid-mode .head h1 { font-size: 15px !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: .1px; color: var(--cg-ink) !important; margin: 6px 0 4px !important; min-height: 2.7em; transition: color .3s ease, letter-spacing .3s ease; display: -webkit-box; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; overflow: hidden; }.card.grid-mode .name-product-link:hover h1 { color: var(--cg-brand) !important; letter-spacing: .4px; }.card.grid-mode .description { font-size: 12px !important; color: var(--cg-muted) !important; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: normal !important; }.card.grid-mode .info a.block { text-align: center; padding: 8px 0 4px; text-decoration: none; }.card.grid-mode .info a.block * { line-height: 1.5; }.card.grid-mode .info a.block [class*="line-through"], .card.grid-mode .info a.block del, .card.grid-mode .info a.block s { color: #a79d95 !important; font-size: 12.5px !important; }.card.grid-mode .info a.block [class*="text-red"], .card.grid-mode .info a.block [style*="color: red"] { color: var(--cg-sale) !important; font-size: 12px !important; font-weight: 600; }.card.grid-mode .tag-wrapper .tag { background: var(--cg-cream); border-radius: 999px; padding: 3px 8px; font-size: 11px; transition: transform .25s ease; }.card.grid-mode .tag-wrapper .tag:hover { transform: translateY(-2px); }.card.grid-mode .info button, .card.grid-mode .info [class*="btn"] { border-radius: 999px !important; background-color: transparent !important; background-image: linear-gradient(var(--cg-brand), var(--cg-brand)) !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: 0% 100% !important; color: var(--cg-brand) !important; border: 1.5px solid var(--cg-brand) !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .8px; text-transform: uppercase; transition: background-size .45s cubic-bezier(.2,.8,.2,1), color .3s ease, box-shadow .3s ease, transform .2s ease !important; }.card.grid-mode .info button:hover, .card.grid-mode .info [class*="btn"]:hover { background-size: 100% 100% !important; color: #fff !important; box-shadow: 0 10px 20px rgba(107,15,26,.3); }.card.grid-mode .info button:active, .card.grid-mode .info [class*="btn"]:active { transform: scale(.96); }.card.grid-mode > a.relative ~ *, .card.grid-mode > legend { z-index: 2; }/* staggered reveal step per card */.card.grid-mode:nth-child(1), :nth-child(1) > .card.grid-mode { --cg-i: 0; }.card.grid-mode:nth-child(2), :nth-child(2) > .card.grid-mode { --cg-i: 1; }.card.grid-mode:nth-child(3), :nth-child(3) > .card.grid-mode { --cg-i: 2; }.card.grid-mode:nth-child(4), :nth-child(4) > .card.grid-mode { --cg-i: 3; }.card.grid-mode:nth-child(5), :nth-child(5) > .card.grid-mode { --cg-i: 4; }.card.grid-mode:nth-child(6), :nth-child(6) > .card.grid-mode { --cg-i: 5; }.card.grid-mode:nth-child(7), :nth-child(7) > .card.grid-mode { --cg-i: 6; }.card.grid-mode:nth-child(n+8), :nth-child(n+8) > .card.grid-mode { --cg-i: 7; }@media (max-width: 1023px) {  .card.grid-mode .head h1 { font-size: 14px !important; }  .card.grid-mode > a.relative { padding: 10px; }}@media (max-width: 640px) {  .card.grid-mode { border-radius: 14px !important; }  .card.grid-mode:hover .thumb { transform: scale(1.04); }  .card.grid-mode .info { padding: 4px 10px 14px !important; }  .card.grid-mode .head h1 { font-size: 13px !important; min-height: 2.7em; }  .card.grid-mode .info button, .card.grid-mode .info [class*="btn"] { font-size: 11px !important; letter-spacing: .4px; }}@media (prefers-reduced-motion: reduce) {  .card.grid-mode, .card.grid-mode *, .card.grid-mode::after, .card.grid-mode .thumb, .card.grid-mode .info > * { animation: none !important; transition: none !important; }}/* =====================================================================   PRODUCT CARD - CATEGORY PAGE (.card[data-id])   ===================================================================== */@keyframes cgpReveal {  0% { opacity: 0; transform: translateY(34px) scale(.95); filter: blur(4px); }  60% { filter: blur(0); }  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }}@keyframes cgpImgIn { from { opacity: 0; transform: scale(.85) rotate(-4deg); } to { opacity: 1; transform: scale(1) rotate(0); } }@keyframes cgpInfoIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }@keyframes cgpShine { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }@keyframes cgpHeartPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }.card[data-id] {  --cg-brand: #6b0f1a; --cg-ink: #1c1411; --cg-muted: #7a6f68; --cg-cream: #f6f1ea; --cg-line: #eee6dc; --cg-sale: #c8102e; --cg-gold: #c9a45c;  position: relative; background: #fff !important; border: 1px solid var(--cg-line) !important; border-radius: 20px !important; overflow: hidden; box-shadow: 0 2px 10px rgba(40,20,10,.05); height: 100%;  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease !important;  animation: cgpReveal .8s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--cg-i, 0) * 120ms);}.card[data-id]:hover { border-color: transparent !important; }.card[data-id]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--cg-gold), var(--cg-brand)); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.8,.2,1); pointer-events: none; z-index: 3; }.card[data-id]:hover::after { transform: scaleX(1); }.card[data-id]:nth-child(4n+1), :nth-child(4n+1) > .card[data-id] { --cg-i: 0; }.card[data-id]:nth-child(4n+2), :nth-child(4n+2) > .card[data-id] { --cg-i: 1; }.card[data-id]:nth-child(4n+3), :nth-child(4n+3) > .card[data-id] { --cg-i: 2; }.card[data-id]:nth-child(4n+4), :nth-child(4n+4) > .card[data-id] { --cg-i: 3; }.card[data-id] > a.relative { display: block; width: 100%; aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 65%, #fff 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, var(--cg-cream) 0%, #fff 100%); padding: 14px; }.card[data-id] > a.relative picture { display: block; width: 100%; height: 100%; }.card[data-id] .thumb { width: 100% !important; height: 100% !important; background: transparent !important; mix-blend-mode: multiply; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(60,30,10,.18)); transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease; animation: cgpImgIn .9s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--cg-i, 0) * 120ms + 180ms); }.card[data-id]:hover .thumb { transform: scale(1.1) rotate(-2deg) translateY(-4px); filter: drop-shadow(0 20px 18px rgba(60,30,10,.25)); }.card[data-id] > a.relative::after { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform: translateX(-130%) skewX(-20deg); pointer-events: none; z-index: 1; }.card[data-id]:hover > a.relative::after { animation: cgpShine .9s ease; }.card[data-id] > a.relative button { transition: transform .25s ease, box-shadow .25s ease; }.card[data-id] > a.relative button:hover { animation: cgpHeartPop .45s ease; box-shadow: 0 6px 14px rgba(107,15,26,.25); }.card[data-id] .info { padding: 8px 16px 20px !important; gap: 2px; }.card[data-id] .info > * { animation: cgpInfoIn .6s ease backwards; animation-delay: calc(var(--cg-i, 0) * 120ms + 350ms); }.card[data-id] .info > *:nth-child(n+2) { animation-delay: calc(var(--cg-i, 0) * 120ms + 450ms); }.card[data-id] .info > *:nth-child(n+4) { animation-delay: calc(var(--cg-i, 0) * 120ms + 550ms); }.card[data-id] .head h1, .card[data-id] .head h3 { font-size: 15px !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: .1px; color: var(--cg-ink) !important; margin: 6px 0 4px !important; min-height: 2.7em; transition: color .3s ease, letter-spacing .3s ease; display: -webkit-box; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; overflow: hidden; }.card[data-id] .name-product-link:hover h1, .card[data-id] .name-product-link:hover h3 { color: var(--cg-brand) !important; letter-spacing: .4px; }.card[data-id] .info > .head { font-size: 11px !important; font-weight: 500 !important; letter-spacing: 1.2px; text-transform: uppercase; color: #a79d95 !important; }.card[data-id] .description { font-size: 12px !important; color: var(--cg-muted) !important; line-height: 1.5 !important; word-break: normal !important; }.card[data-id] .info [class*="line-through"], .card[data-id] .info del, .card[data-id] .info s { color: #a79d95 !important; font-size: 12.5px !important; }.card[data-id] .info [class*="text-red"], .card[data-id] .info [style*="color: red"] { color: var(--cg-sale) !important; font-size: 12px !important; font-weight: 600; }.card[data-id] .tag-wrapper .tag { background: var(--cg-cream); border-radius: 999px; padding: 3px 8px; font-size: 11px; transition: transform .25s ease; }.card[data-id] .tag-wrapper .tag:hover { transform: translateY(-2px); }.card[data-id] .info button, .card[data-id] .info [class*="btn"] { border-radius: 999px !important; background-color: transparent !important; background-image: linear-gradient(var(--cg-brand), var(--cg-brand)) !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: 0% 100% !important; color: var(--cg-brand) !important; border: 1.5px solid var(--cg-brand) !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .8px; text-transform: uppercase; transition: background-size .45s cubic-bezier(.2,.8,.2,1), color .3s ease, box-shadow .3s ease, transform .2s ease !important; }.card[data-id] .info button:hover, .card[data-id] .info [class*="btn"]:hover { background-size: 100% 100% !important; color: #fff !important; box-shadow: 0 10px 20px rgba(107,15,26,.3); }.card[data-id] .info button:active, .card[data-id] .info [class*="btn"]:active { transform: scale(.96); }@media (max-width: 1023px) {  .card[data-id] .head h1, .card[data-id] .head h3 { font-size: 14px !important; }  .card[data-id] > a.relative { padding: 10px; }}@media (max-width: 640px) {  .card[data-id] { border-radius: 14px !important; }  .card[data-id]:hover .thumb { transform: scale(1.04); }  .card[data-id] .info { padding: 4px 10px 14px !important; }  .card[data-id] .head h1, .card[data-id] .head h3 { font-size: 13px !important; min-height: 2.7em; }  .card[data-id] .info button, .card[data-id] .info [class*="btn"] { font-size: 11px !important; letter-spacing: .4px; }  .card[data-id]:nth-child(2n+1), :nth-child(2n+1) > .card[data-id] { --cg-i: 0; }  .card[data-id]:nth-child(2n+2), :nth-child(2n+2) > .card[data-id] { --cg-i: 1; }}@media (prefers-reduced-motion: reduce) {  .card[data-id], .card[data-id] *, .card[data-id]::after { animation: none !important; transition: none !important; }}/* hovered card must not run into the row above */.card[data-id], .card.grid-mode { margin-bottom: 16px; position: relative; z-index: 1; }.card[data-id]:hover, .card.grid-mode:hover { transform: translateY(-3px) !important; z-index: 5; box-shadow: 0 14px 28px rgba(60,25,10,.14) !important; }.grid.gap-4.mt-4.grid-cols-2.md\:grid-cols-3.xl\:grid-cols-3 { padding-bottom: 25px; }/* mobile: hide horizontal category menu label */span.block.px-6.md\:px-8.py-3.font-semibold.lg\:hidden.flex.border-b.border-gray-100.curser-pointer.items-center { display: none; }/* =====================================================================   HOME "Shop by Categories" slider (.category-block)   ===================================================================== */.category-block { --cb-title-size: clamp(26px, 2.2vw, 36px); --cb-title-gap: 22px; --cb-arrow: 40px; --cb-gap: 16px; --cb-ink: #111; overflow: hidden; }@supports (overflow: clip) { .category-block { overflow: visible; overflow-x: clip; } }@media (max-width: 639px) { .category-block { --cb-title-size: 24px; --cb-arrow: 34px; --cb-gap: 12px; --cb-title-gap: 16px; } }.category-block h3.title { position: relative !important; z-index: 0 !important; font-family: Georgia, "Times New Roman", Times, serif !important; font-weight: 700 !important; color: var(--cb-ink) !important; font-size: var(--cb-title-size) !important; line-height: 1.2 !important; text-align: left !important; margin-bottom: var(--cb-title-gap) !important; }.category-block h3.title::before { content: "Build your style"; display: block; margin-bottom: 8px; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: #6b6b6b; }.category-block .slide-show { position: relative !important; z-index: 1; overflow: visible !important; margin-left: calc(var(--cb-gap) / -2) !important; margin-right: calc(var(--cb-gap) / -2) !important; clip-path: inset(-120px calc(var(--cb-gap) / 2) -40px calc(var(--cb-gap) / 2)); }.category-block .slide-show .category { padding-left: calc(var(--cb-gap) / 2) !important; padding-right: calc(var(--cb-gap) / 2) !important; }.category-block .slide-show a { display: block; color: inherit; text-decoration: none; }.category-block .slide-show .swiper-button-prev, .category-block .slide-show .swiper-button-next { position: absolute !important; top: calc(-1 * (var(--cb-title-size) * .6 + var(--cb-title-gap) + var(--cb-arrow) / 2)) !important; bottom: auto !important; margin: 0 !important; width: var(--cb-arrow) !important; height: var(--cb-arrow) !important; display: flex !important; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #d6d6d6; background: #fff !important; background-image: none !important; color: var(--cb-ink); cursor: pointer; z-index: 2; pointer-events: auto; transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease; }.category-block .slide-show .swiper-button-prev::after, .category-block .slide-show .swiper-button-next::after { content: none !important; display: none !important; }.category-block .slide-show .swiper-button-next { left: auto !important; right: calc(var(--cb-gap) / 2) !important; }.category-block .slide-show .swiper-button-prev { left: auto !important; right: calc(var(--cb-gap) / 2 + var(--cb-arrow) + 8px) !important; }.category-block .slide-show .swiper-button-prev:hover, .category-block .slide-show .swiper-button-next:hover { background: var(--cb-ink) !important; border-color: var(--cb-ink); color: #fff; }.category-block .slide-show .swiper-button-prev.swiper-button-disabled { opacity: 0 !important; visibility: hidden; pointer-events: none; }.category-block .slide-show .swiper-button-next.swiper-button-disabled { opacity: 1 !important; background: #cfcfcf !important; border-color: #cfcfcf; color: #111; pointer-events: none; }.category-block .slide-show .swiper-button-prev.swiper-button-lock, .category-block .slide-show .swiper-button-next.swiper-button-lock { display: none !important; }.category-block .slide-show .swiper-button-prev:focus-visible, .category-block .slide-show .swiper-button-next:focus-visible { outline: 2px solid var(--cb-ink); outline-offset: 2px; }.category-block .slide-show .swiper-button-prev > *, .category-block .slide-show .swiper-button-next > * { pointer-events: none !important; }.category-block .slide-show .swiper-button-prev > div, .category-block .slide-show .swiper-button-next > div { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center; justify-content: center; background: transparent !important; box-shadow: none !important; color: inherit !important; font-size: 14px !important; }.cb-card { text-align: left; }.cb-image { position: relative; padding-top: 133.333% !important; margin-bottom: 0 !important; border-radius: 10px !important; overflow: hidden; isolation: isolate; background-color: #1b1411; }.cb-image picture { position: absolute; inset: 0; display: block; }.cb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .7s cubic-bezier(.22,.61,.36,1); will-change: transform; }.cb-card:hover .cb-img { transform: scale(1.07); }.cb-img--none { object-fit: contain; padding: 28%; opacity: .45; }.cb-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,6,4,.62) 0%, rgba(10,6,4,.18) 38%, rgba(10,6,4,0) 62%); pointer-events: none; }.cb-name { position: absolute; left: 18px; right: 18px; bottom: 22px; z-index: 2; color: #fff !important; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .4s ease; }.cb-card:hover .cb-name { transform: translateY(-6px); }.cb-name--plain { position: static; color: #111 !important; margin-top: 10px; }.cb-desc { margin-top: 6px; font-size: 13px; line-height: 1.5; color: #6b6b6b; }@media (max-width: 639px) { .cb-name { left: 14px; right: 14px; bottom: 16px; font-size: 13px; } }@media (prefers-reduced-motion: reduce) {  .cb-img, .cb-name { transition: none !important; }  .cb-card:hover .cb-img, .cb-card:hover .cb-name { transform: none !important; }}/* =====================================================================   LUXURY TYPOGRAPHY + CONSISTENT SECTION SPACING   Headings: Cormorant Garamond | Body: Jost   Change --sec-gap to make ALL home page section gaps bigger / smaller   ===================================================================== */body {  --font-heading: 'Cormorant Garamond', 'Times New Roman', serif;  --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;  --sec-gap: clamp(56px, 8vw, 104px);  --lux-ink: #1c140e; --lux-text: #4b473f; --lux-accent: #7a1220;}/* 1. FONTS: one body font, one heading font */body, body p, body a, body li, body label, body button, body input, body select, body textarea, body td, body th, body small { font-family: var(--font-body) !important; }h1, h2, h3, h4, h5, .hero-quality, .hpcp-tab, .video-banner-title, .sbc-title, .csx-title, .om-title, .cwc-title, .craft-band__title, .compare-showcase__title, .category-block h3.title { font-family: var(--font-heading) !important; color: var(--lux-ink); font-weight: 600; letter-spacing: 0; }.video-banner-title { color: #fff; }/* product names in cards are small -> keep body font so they stay crisp */.card.grid-mode .head h1, .card[data-id] .head h1, .card[data-id] .head h3 { font-family: var(--font-body) !important; }body p { color: var(--lux-text); line-height: 1.75; }.video-banner-desc { color: #fff; }.mf-footer p, .mf-footer a { color: inherit; }.mf-brand-text, .mf-copy { color: #c9c0b1; }/* 2. Section titles: same size everywhere */.om-title, .cwc-title, .compare-showcase__title, .craft-band__title { font-size: clamp(30px, 3.8vw, 46px) !important; line-height: 1.12; }.category-block { --cb-title-size: clamp(30px, 3.8vw, 46px); }.category-block h3.title { font-weight: 600 !important; color: var(--lux-ink) !important; }.hpcp-tab { font-size: clamp(20px, 2.4vw, 28px) !important; font-weight: 600; }.video-banner-title { font-size: clamp(22px, 3.4vw, 42px) !important; }/* 3. Small eyebrow labels: same style everywhere */.om-eyebrow, .csx-eyebrow, .compare-showcase__eyebrow, .craft-band__eyebrow, .hero-copy .eyebrow, .category-block h3.title::before { font-family: var(--font-body) !important; font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }.om-eyebrow, .csx-eyebrow, .compare-showcase__eyebrow, .craft-band__eyebrow { color: var(--lux-accent); }/* 4. Buttons: same luxury feel */.btn-primary, .cwc-btn, .video-banner-btn { letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px; font-weight: 600; }/* 5. EQUAL GAPS BETWEEN HOME SECTIONS   Every section gets HALF the gap on top and bottom, so two neighbouring sections always add up to --sec-gap. */[role="main"] > .flex.flex-wrap.mt-20 { margin-bottom: 0 !important; }/*.features *//*{*//*	 margin-bottom: calc(var(--sec-gap) / 2);*/	 /*}*/.category-block { margin: 0 !important; padding-block: calc(var(--sec-gap) / 2); }.hpcp-tabs { padding-block: calc(var(--sec-gap) / 2); }.custom-banner-block-2 { margin-block: calc(var(--sec-gap) / 2); }.om-section, .cwc-section, .compare-showcase { padding-block: 0 !important; }.om-wrap, .cwc-wrap { padding-top: calc(var(--sec-gap) / 2) !important; padding-bottom: calc(var(--sec-gap) / 2) !important; }.compare-showcase__inner { padding-block: calc(var(--sec-gap) / 2); }/*.mf-footer *//*{*//*	 margin-top: calc(var(--sec-gap) / 2);*/	 /*}*//* =====================================================================   HAMBURGER MENU BUTTON - all 3 lines the same length   ===================================================================== */.menuBtn svg rect { width: 25.567px; }/* =====================================================================   CATEGORY LIST (category page sidebar) - hover animation   ===================================================================== */.category-list-wrapper .list-group a { position: relative; text-indent: 0; transition: color .25s ease, text-indent .3s cubic-bezier(.22,.7,.32,1), background-color .25s ease, letter-spacing .3s ease; }.category-list-wrapper .list-group a::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: #7a1220; border-radius: 0 3px 3px 0; transform: translateY(-50%); transition: height .3s cubic-bezier(.22,.7,.32,1); pointer-events: none; }.category-list-wrapper .list-group a:hover { color: #7a1220; text-indent: 10px; letter-spacing: .2px; background-color: #faf3ee; opacity: 1; }.category-list-wrapper .list-group a:hover::before, .category-list-wrapper .list-group a.active::before { height: 60%; }.category-list-wrapper .category > div:hover > .child-arrow { color: #7a1220; }@media (prefers-reduced-motion: reduce) {  .category-list-wrapper .list-group a, .category-list-wrapper .list-group a::before { transition: none; }}/* =====================================================================   ADD TO CART component   fresh state : div.add-to-cart > button.add-to-cart > span.button-label + span.button-pre-icon ( + )   selected    : div.add-to-cart > div.detail-count-btn-wrapper > button( - ) + input + button( + )   ===================================================================== *//* 1. QTY STEPPER ( - 3 + ) : every screen size */:is(.card.grid-mode, .card[data-id]) .info div.add-to-cart:has(> .detail-count-btn-wrapper) { height: auto !important; min-height: 0 !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; width: 100% !important; min-width: 0 !important; max-width: 140px !important; margin-inline: auto !important; }:is(.card.grid-mode, .card[data-id]) .info div.add-to-cart .detail-count-btn-wrapper,:is(.card.grid-mode, .card[data-id]) .info div.add-to-cart .detail-count-btn-wrapper:hover { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 4px; width: 100% !important; height: auto !important; min-width: 0 !important; padding: 3px !important; background-color: var(--cg-cream) !important; background-image: none !important; color: var(--cg-brand) !important; border: 1.5px solid var(--cg-brand) !important; border-radius: 999px !important; box-shadow: none !important; transform: none !important; overflow: hidden; }/* - and + : round buttons */:is(.card.grid-mode, .card[data-id]) .info div.add-to-cart .detail-count-btn-wrapper > button { flex: 0 0 28px !important; width: 28px !important; min-width: 28px !important; height: 28px !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50% !important; background-color: #fff !important; background-image: none !important; color: var(--cg-brand) !important; border: 1.5px solid var(--cg-brand) !important; box-shadow: none !important; letter-spacing: 0 !important; }:is(.card.grid-mode, .card[data-id]) .info div.add-to-cart .detail-count-btn-wrapper > button:hover { background-color: var(--cg-brand) !important; background-image: none !important; color: #fff !important; box-shadow: none !important; }:is(.card.grid-mode, .card[data-id]) .info div.add-to-cart .detail-count-btn-wrapper > button i { font-size: 16px !important; line-height: 1; margin: 0 !important; color: inherit !important; background: transparent !important; }/* the number: always dark maroon + visible */:is(.card.grid-mode, .card[data-id]) .info div.add-to-cart .detail-count-btn-wrapper > input { flex: 1 1 auto; width: auto !important; min-width: 0 !important; height: auto !important; padding: 0 !important; background: transparent !important; color: var(--cg-brand) !important; -webkit-text-fill-color: var(--cg-brand) !important; border: 0 !important; box-shadow: none !important; outline: none; text-align: center; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; }/* 2. the "+" segment never turns into a dark grey box */:is(.card.grid-mode, .card[data-id]) .info div.add-to-cart .button-pre-icon,:is(.card.grid-mode, .card[data-id]) .info div.add-to-cart:hover .button-pre-icon { background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; }/* 3. ADD TO CART / SELECT OPTIONS on phones + tablets */@media (max-width: 1023px) {  :is(.card.grid-mode, .card[data-id]) .info div.add-to-cart:not(:has(> .detail-count-btn-wrapper)) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; border-radius: 999px !important; }  :is(.card.grid-mode, .card[data-id]) .info div.add-to-cart > button { display: flex !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; overflow: hidden; white-space: nowrap; }  :is(.card.grid-mode, .card[data-id]) .info div.add-to-cart > button .button-label { flex: 1 1 0% !important; min-width: 0 !important; padding: 0 6px !important; text-align: center !important; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; font-size: clamp(8.5px, 2.6vw, 11.5px) !important; letter-spacing: clamp(0px, .35vw, .5px) !important; }  :is(.card.grid-mode, .card[data-id]) .info div.add-to-cart > button .button-pre-icon { flex: 0 0 28px !important; width: 28px !important; height: 100% !important; margin: 0 !important; display: flex !important; align-items: center; justify-content: center; }  :is(.card.grid-mode, .card[data-id]) .info div.add-to-cart > button .button-pre-icon i { font-size: 14px !important; line-height: 1; margin: 0 !important; }}/* 4. SELECT OPTIONS POPUP (phones + tablets) */@media (max-width: 1023px) {  /* Close (X): a small ROUND button with the icon in the middle */  :is(.card.grid-mode, .card[data-id]) button:has(> i):not(:has(span)):not(.detail-count-btn-wrapper > button):not(a button),  :is(.card.grid-mode, .card[data-id]) button:has(> svg):not(:has(span)):not(.detail-count-btn-wrapper > button):not(a button),  :is(.card.grid-mode, .card[data-id]) button:has([class*="bi-x"]):not(.detail-count-btn-wrapper > button):not(a button),  :is(.card.grid-mode, .card[data-id]) button[aria-label*="lose" i]:not(a button),  :is(.card.grid-mode, .card[data-id]) button[class*="close" i]:not(a button) { flex: 0 0 28px !important; width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; min-height: 28px !important; padding: 0 !important; margin: 0 0 8px auto !important; display: flex !important; align-items: center !important; justify-content: center !important; align-self: flex-end !important; border-radius: 50% !important; letter-spacing: 0 !important; line-height: 1; overflow: hidden; }  :is(.card.grid-mode, .card[data-id]) button:has(> i):not(:has(span)):not(.detail-count-btn-wrapper > button):not(a button) i,  :is(.card.grid-mode, .card[data-id]) button:has([class*="bi-x"]):not(.detail-count-btn-wrapper > button):not(a button) i { font-size: 15px !important; line-height: 1; margin: 0 !important; }  :is(.card.grid-mode, .card[data-id]) button:has(> svg):not(:has(span)):not(.detail-count-btn-wrapper > button):not(a button) svg { width: 12px; height: 12px; margin: 0 !important; }  /* Size options (3+ buttons in one group): wrap, natural width */  :is(.card.grid-mode, .card[data-id]) :has(> button ~ button ~ button) { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; max-width: 100%; min-width: 0; padding: 2px 2px 6px; }  :is(.card.grid-mode, .card[data-id]) :has(> button ~ button ~ button) > button { flex: 0 0 auto !important; width: auto !important; min-width: 38px !important; max-width: 100% !important; height: auto !important; padding: 5px 12px !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 12px !important; letter-spacing: .3px !important; line-height: 1.2; text-align: center; white-space: nowrap; }}/* =====================================================================   VARIANT OPTIONS (.attr-value swatches) - wrap onto new lines   ===================================================================== */*:has(> .attr-value) { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center; gap: 10px 10px; width: 100%; max-width: 100%; overflow: visible !important; white-space: normal !important; }*:has(> .attr-value) > .attr-value { flex: 0 0 auto !important; width: auto !important; min-width: 0; margin: 0 !important; }/* =====================================================================   HOME PAGE ENTRANCE ANIMATIONS (hero, features, categories, tabs, video)   ===================================================================== */@keyframes saFadeUp { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }@keyframes saFadeDown { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }@keyframes saFadeLeft { from { opacity: 0; translate: -40px 0; } to { opacity: 1; translate: 0 0; } }@keyframes saZoomOut { from { transform: scale(1.14); } to { transform: scale(1); } }@keyframes saFadeIn { from { opacity: 0; } to { opacity: 1; } }.hero-visual { animation: saFadeIn 1s ease both; }.hero-slide-img img { animation: saZoomOut 1.8s cubic-bezier(.22,.7,.32,1) both; }.hero-copy .hero-slide-stack { animation: saFadeLeft .9s cubic-bezier(.22,.7,.32,1) .15s both; }.hero-copy .hero-cta { animation: saFadeUp .8s cubic-bezier(.22,.7,.32,1) .45s both; }.hero-quality { animation: saFadeDown .9s ease .7s both; }.hero-slider-ui { animation: saFadeUp .8s ease .9s both; }.features .feature { animation: saFadeUp .7s cubic-bezier(.22,.7,.32,1) both; }.features .feature:nth-child(1) { animation-delay: .05s; }.features .feature:nth-child(2) { animation-delay: .15s; }.features .feature:nth-child(3) { animation-delay: .25s; }.features .feature:nth-child(4) { animation-delay: .35s; }.category-block h3.title { animation: saFadeUp .7s cubic-bezier(.22,.7,.32,1) both; }.category-block .cb-card { animation: saFadeUp .8s cubic-bezier(.22,.7,.32,1) both; }.category-block .swiper-slide:nth-child(1) .cb-card { animation-delay: .10s; }.category-block .swiper-slide:nth-child(2) .cb-card { animation-delay: .20s; }.category-block .swiper-slide:nth-child(3) .cb-card { animation-delay: .30s; }.category-block .swiper-slide:nth-child(4) .cb-card { animation-delay: .40s; }.category-block .swiper-slide:nth-child(n+5) .cb-card { animation-delay: .50s; }.category-block .swiper-button-prev, .category-block .swiper-button-next { animation: saFadeIn .8s ease .5s both; }.hpcp-tab-row .hpcp-tab { animation: saFadeDown .6s cubic-bezier(.22,.7,.32,1) both; }.hpcp-tab-row .hpcp-tab:nth-child(1) { animation-delay: .05s; }.hpcp-tab-row .hpcp-tab:nth-child(2) { animation-delay: .15s; }.hpcp-tab-row .hpcp-tab:nth-child(3) { animation-delay: .25s; }.video-banner-media { animation: saZoomOut 2s cubic-bezier(.22,.7,.32,1) both; }.video-banner-title { animation: saFadeUp .8s cubic-bezier(.22,.7,.32,1) .2s both; }.video-banner-desc { animation: saFadeUp .8s cubic-bezier(.22,.7,.32,1) .4s both; }.video-banner-btn { animation: saFadeUp .8s cubic-bezier(.22,.7,.32,1) .6s both; }@media (prefers-reduced-motion: reduce) {  .hero-visual, .hero-slide-img img, .hero-copy .hero-slide-stack, .hero-copy .hero-cta, .hero-quality, .hero-slider-ui, .features .feature, .category-block h3.title, .category-block .cb-card, .category-block .swiper-button-prev, .category-block .swiper-button-next, .hpcp-tab-row .hpcp-tab, .video-banner-media, .video-banner-title, .video-banner-desc, .video-banner-btn { animation: none !important; }}/* =====================================================================   PRODUCT ZOOM LIGHTBOX - prev / next arrows   ===================================================================== */.zoom-arrow { cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .2s ease; }/* inline style has background:#fff, so !important is needed here */.zoom-arrow:hover { background: #7a1220 !important; color: #fff !important; }@media (max-width: 640px) {  .zoom-arrow { width: 38px !important; height: 38px !important; }  .zoom-arrow[aria-label="Previous image"] { left: 10px !important; }  .zoom-arrow[aria-label="Next image"] { right: 10px !important; }}/* =====================================================================   COLOUR SWATCHES (variant images) - same look on desktop + mobile   44px rounded square, image fills it, selected swatch gets a maroon   border + ring outside the box.   ===================================================================== */.attr-values:has(.attr-value img) { padding: 4px !important; margin-right: 0 !important; gap: 12px !important; }.attr-values .attr-value:has(img) { width: 44px !important; height: 44px !important; min-width: 44px !important; margin: 0 !important; padding: 0 !important; overflow: visible; border-radius: 10px; box-shadow: none !important; }.attr-values .attr-value:has(img) > button { display: block; width: 100%; height: 100%; min-width: 0 !important; padding: 3px !important; }.attr-values .attr-value:has(img) picture { display: block; width: 100%; height: 100%; }.attr-values .attr-value:has(img) img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 7px; }.attr-values .attr-value:has(img).border-primary, .attr-values .attr-value:has(img).border-black { border-color: #7a1220; outline: 2px solid #7a1220; outline-offset: 2px; }/* =====================================================================   PRODUCT PAGE ANIMATIONS  (ONE block - keep this LAST)   A. Intro: plays ONCE when the page loads (time-based, staggered)   B. Top-of-page scroll reveals (breadcrumb, title, reviews wrapper)   C. Lower sections: scroll-driven, animate on the way DOWN and UP   D. LOCK: JS adds  body.pv-anim-done  (after the intro / on the first      variant click). From then on nothing in the details column, image      or breadcrumb can animate again, so variant clicks never replay it.   E. Related product cards never replay their reveal   F. Reduced motion   ===================================================================== */@keyframes pv-fade-up { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }@keyframes pv-wipe-in {  from { opacity: 0; translate: -18px 0; clip-path: inset(-20px 100% -20px -20px); }  to   { opacity: 1; translate: 0 0;     clip-path: inset(-20px); }}@keyframes pvx-up  { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }@keyframes pvx-pop { from { opacity: 0; scale: .6; translate: 0 10px; } to { opacity: 1; scale: 1; translate: 0 0; } }@keyframes bd-in        { from { opacity: 0; translate: 0 44px; } to { opacity: 1; translate: 0 0; } }@keyframes bd-out       { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -44px; } }@keyframes bd-zoom-in   { from { opacity: 0; scale: .94; translate: 0 30px; } to { opacity: 1; scale: 1; translate: 0 0; } }@keyframes bd-zoom-out  { from { opacity: 1; scale: 1; translate: 0 0; } to { opacity: 0; scale: .94; translate: 0 -30px; } }@keyframes bd-pop-in    { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }@keyframes bd-pop-out   { from { opacity: 1; scale: 1; } to { opacity: 0; scale: .5; } }@keyframes bd-line-in   { from { transform: translateX(-50%) scaleX(0); } to { transform: translateX(-50%) scaleX(1); } }@keyframes bd-line-out  { from { transform: translateX(-50%) scaleX(1); } to { transform: translateX(-50%) scaleX(0); } }/* ---------- A. INTRO (page load, one after another) ---------- */.product-view-wrapper .product-details > :not(.main-title-wrapper):not(.product-details-wrapper):not(.product-accordion):not(.trust-badges),.product-view-wrapper .product-details-wrapper > *,.product-view-wrapper .attr-name,.product-view-wrapper .trust-badge,.product-view-wrapper .product-accordion > *,.product-view-wrapper .product-share {  animation: pvx-up .8s cubic-bezier(.22,.61,.36,1) var(--d, 0s) backwards;}.product-view-wrapper .attr-values .attr-value {  animation: pvx-pop .55s cubic-bezier(.34,1.56,.64,1) var(--d, 0s) backwards;}/* delays (--d) : top -> bottom */.product-view-wrapper .product-details > :nth-child(1)   { --d: .10s; }.product-view-wrapper .product-details > :nth-child(2)   { --d: .18s; }.product-view-wrapper .product-details > :nth-child(3)   { --d: .26s; }.product-view-wrapper .product-details > :nth-child(4)   { --d: .34s; }.product-view-wrapper .product-details > :nth-child(5)   { --d: .42s; }.product-view-wrapper .product-details > :nth-child(6)   { --d: .50s; }.product-view-wrapper .product-details > :nth-child(7)   { --d: .58s; }.product-view-wrapper .product-details > :nth-child(8)   { --d: .66s; }.product-view-wrapper .product-details > :nth-child(n+9) { --d: .74s; }/* short description, SKU, attributes, tags */.product-view-wrapper .product-details-wrapper > :nth-child(1)   { --d: .20s; }.product-view-wrapper .product-details-wrapper > :nth-child(2)   { --d: .30s; }.product-view-wrapper .product-details-wrapper > :nth-child(3)   { --d: .40s; }.product-view-wrapper .product-details-wrapper > :nth-child(4)   { --d: .50s; }.product-view-wrapper .product-details-wrapper > :nth-child(n+5) { --d: .60s; }/* variants: title fades, swatches pop one by one */.product-view-wrapper .attr-name { --d: .45s; }.product-view-wrapper .attr-values .attr-value:nth-child(1)   { --d: .55s; }.product-view-wrapper .attr-values .attr-value:nth-child(2)   { --d: .62s; }.product-view-wrapper .attr-values .attr-value:nth-child(3)   { --d: .69s; }.product-view-wrapper .attr-values .attr-value:nth-child(4)   { --d: .76s; }.product-view-wrapper .attr-values .attr-value:nth-child(5)   { --d: .83s; }.product-view-wrapper .attr-values .attr-value:nth-child(n+6) { --d: .90s; }/* trust badges, accordion (Description), share */.product-view-wrapper .trust-badge:nth-child(1)          { --d: .80s; }.product-view-wrapper .trust-badge:nth-child(2)          { --d: .88s; }.product-view-wrapper .trust-badge:nth-child(3)          { --d: .96s; }.product-view-wrapper .trust-badge:nth-child(n+4)        { --d: 1.04s; }.product-view-wrapper .product-accordion > :nth-child(1)   { --d: 1.0s; }.product-view-wrapper .product-accordion > :nth-child(2)   { --d: 1.1s; }.product-view-wrapper .product-accordion > :nth-child(n+3) { --d: 1.2s; }.product-view-wrapper .product-share { --d: 1.3s; }/* ---------- B. TOP-OF-PAGE SCROLL REVEALS ---------- */.product-view-wrapper .breadcrumb,.product-view-wrapper > .flex.flex-col { animation-name: pv-fade-up; animation-fill-mode: both; }.product-view-wrapper .product-details > .main-title-wrapper { animation-name: pv-wipe-in; animation-fill-mode: both; }@supports (animation-timeline: view()) {  .product-view-wrapper .breadcrumb,  .product-view-wrapper .product-details > .main-title-wrapper,  .product-view-wrapper > .flex.flex-col { animation-timing-function: linear; animation-timeline: view(); animation-range: entry 0% entry 60%; }}@supports not (animation-timeline: view()) {  .product-view-wrapper .breadcrumb,  .product-view-wrapper .product-details > .main-title-wrapper,  .product-view-wrapper > .flex.flex-col { animation-duration: .7s; animation-timing-function: cubic-bezier(.22,.61,.36,1); }}/* ---------- C. LOWER SECTIONS (scroll down AND up) ---------- */@supports (animation-timeline: view()) {  .craft-band__head,  .craft-band__item,  .product-view-wrapper > .w-full,                          /* product resources */  .product-view-wrapper .related-products-wrapper,  .product-view-wrapper .space-y-6 .space-y-6 > * {         /* review cards */    animation: bd-in linear both, bd-out linear none;    animation-timeline: view(), view();    animation-range: entry 0% entry 60%, exit 40% exit 100%;  }  .product-view-wrapper .brand-marquee {    animation: bd-zoom-in linear both, bd-zoom-out linear none;    animation-timeline: view(), view();    animation-range: entry 0% entry 70%, exit 30% exit 100%;  }  .craft-band__icon {    animation: bd-pop-in linear both, bd-pop-out linear none;    animation-timeline: view(), view();    animation-range: entry 15% entry 85%, exit 15% exit 85%;  }  .craft-band__title::after {    animation: bd-line-in linear both, bd-line-out linear none;    animation-timeline: view(), view();    animation-range: entry 20% entry 90%, exit 10% exit 80%;  }  /* stagger the 4 "Crafted With Care" items */  .craft-band__item:nth-child(1) { animation-range: entry 0%  entry 55%, exit 45% exit 100%; }  .craft-band__item:nth-child(2) { animation-range: entry 8%  entry 63%, exit 37% exit 92%; }  .craft-band__item:nth-child(3) { animation-range: entry 16% entry 71%, exit 29% exit 84%; }  .craft-band__item:nth-child(4) { animation-range: entry 24% entry 79%, exit 21% exit 76%; }}/* ---------- D. LOCK (JS adds body.pv-anim-done) ---------- */body.pv-anim-done .product-view-wrapper .breadcrumb,body.pv-anim-done .product-view-wrapper .image-wrapper,body.pv-anim-done .product-view-wrapper .image-wrapper *,body.pv-anim-done .product-view-wrapper .product-details,body.pv-anim-done .product-view-wrapper .product-details * { animation: none !important; }/* ---------- E. related cards: no time-based reveal inside the product page ---------- */.product-view-wrapper .card,.product-view-wrapper .card *:not(button) { animation: none !important; }/* ---------- F. REDUCED MOTION ---------- */@media (prefers-reduced-motion: reduce) {  .product-view-wrapper *, .craft-band__title::after { animation: none !important; }}/* =====================================================================   CHECKOUT PAGE - LOAD ANIMATION (paste at the VERY END of custom CSS)   ===================================================================== */@keyframes co-up   { from { opacity: 0; translate: 0 30px; }  to { opacity: 1; translate: 0 0; } }@keyframes co-left { from { opacity: 0; translate: -34px 0; } to { opacity: 1; translate: 0 0; } }@keyframes co-right{ from { opacity: 0; translate: 34px 0; }  to { opacity: 1; translate: 0 0; } }/* breadcrumb */.content-wrapper:has(.cart-inner-wrapper, .inner-content-wrapper) .breadcrumb {  animation: co-up .7s cubic-bezier(.22,.61,.36,1) .05s backwards;}/* left column: checkout form  |  right column: order summary */.cart-inner-wrapper > :nth-child(1) { animation: co-left  .8s cubic-bezier(.22,.61,.36,1) .15s backwards; }.cart-inner-wrapper > :nth-child(2) { animation: co-right .8s cubic-bezier(.22,.61,.36,1) .30s backwards; }/* phones: columns are stacked, so use a simple fade-up instead */@media (max-width: 767px) {  .cart-inner-wrapper > :nth-child(1),  .cart-inner-wrapper > :nth-child(2) { animation-name: co-up; }  .cart-inner-wrapper > :nth-child(1) { animation-delay: .30s; }  /* reversed order on mobile */  .cart-inner-wrapper > :nth-child(2) { animation-delay: .15s; }}/* empty cart message */.inner-content-wrapper { animation: co-up .8s cubic-bezier(.22,.61,.36,1) .15s backwards; }@media (prefers-reduced-motion: reduce) {  .content-wrapper .breadcrumb,  .cart-inner-wrapper > *,  .inner-content-wrapper { animation: none !important; }}/* =====================================================================   ORDER SUMMARY PAGE - LOAD ANIMATION (paste AFTER the checkout CSS)   ===================================================================== *//* back link (< Back) */.content-wrapper > .cart-link {  animation: co-up .7s cubic-bezier(.22,.61,.36,1) .05s backwards;}/* page title row */.content-wrapper > .md\:flex.items-start {  animation: co-up .7s cubic-bezier(.22,.61,.36,1) .12s backwards;}/* the wrapper itself must not animate here (its 2 columns do) */.inner-content-wrapper.cart-inner-wrapper {  animation: none;}/* left: order details  |  right: cart summary */.inner-content-wrapper.cart-inner-wrapper > .detail-wrapper {  animation: co-left .8s cubic-bezier(.22,.61,.36,1) .2s backwards;}.inner-content-wrapper.cart-inner-wrapper > .product-info-wrapper {  animation: co-right .8s cubic-bezier(.22,.61,.36,1) .35s backwards;}/* below 1024px the columns are stacked (details first, summary below) */@media (max-width: 1023px) {  .inner-content-wrapper.cart-inner-wrapper > .detail-wrapper,  .inner-content-wrapper.cart-inner-wrapper > .product-info-wrapper { animation-name: co-up; }  .inner-content-wrapper.cart-inner-wrapper > .detail-wrapper       { animation-delay: .2s; }  .inner-content-wrapper.cart-inner-wrapper > .product-info-wrapper { animation-delay: .35s; }}@media (prefers-reduced-motion: reduce) {  .content-wrapper > .cart-link,  .content-wrapper > .md\:flex.items-start,  .inner-content-wrapper.cart-inner-wrapper > * { animation: none !important; }}/* =====================================================================   ALL CATEGORIES PAGE - LOAD ANIMATION (paste at the VERY END of custom CSS)   ===================================================================== */@keyframes ac-up { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }/* breadcrumb */.content-wrapper:has(> .main-wrapper) > .breadcrumb {  animation: ac-up .7s cubic-bezier(.22,.61,.36,1) .05s backwards;}/* page heading (h1-tag-snippet) */.main-wrapper > :first-child {  animation: ac-up .7s cubic-bezier(.22,.61,.36,1) .12s backwards;}/* white card that holds all the categories */.main-wrapper .all-category-inner-wrapper {  animation: ac-up .8s cubic-bezier(.22,.61,.36,1) .2s backwards;}/* every category block, one after another */.main-wrapper .all-category-inner-wrapper > .item {  animation: ac-up .7s cubic-bezier(.22,.61,.36,1) var(--d, .3s) backwards;}.main-wrapper .all-category-inner-wrapper > .item:nth-child(1)    { --d: .30s; }.main-wrapper .all-category-inner-wrapper > .item:nth-child(2)    { --d: .38s; }.main-wrapper .all-category-inner-wrapper > .item:nth-child(3)    { --d: .46s; }.main-wrapper .all-category-inner-wrapper > .item:nth-child(4)    { --d: .54s; }.main-wrapper .all-category-inner-wrapper > .item:nth-child(5)    { --d: .62s; }.main-wrapper .all-category-inner-wrapper > .item:nth-child(6)    { --d: .70s; }.main-wrapper .all-category-inner-wrapper > .item:nth-child(7)    { --d: .78s; }.main-wrapper .all-category-inner-wrapper > .item:nth-child(8)    { --d: .86s; }.main-wrapper .all-category-inner-wrapper > .item:nth-child(n+9)  { --d: .94s; }@media (prefers-reduced-motion: reduce) {  .content-wrapper > .breadcrumb,  .main-wrapper > :first-child,  .main-wrapper .all-category-inner-wrapper,  .main-wrapper .all-category-inner-wrapper > .item { animation: none !important; }}/* =====================================================================   HEADER - LOAD ANIMATION (topbar, menu button, logo, menu, icons)   (paste at the VERY END of custom CSS)   NOTE: only "backwards" fill is used, so after the intro the header has   no transform left and the dropdown menus keep working normally.   ===================================================================== */@keyframes hd-down { from { opacity: 0; translate: 0 -22px; } to { opacity: 1; translate: 0 0; } }@keyframes hd-pop  { from { opacity: 0; scale: .6; translate: 0 -8px; } to { opacity: 1; scale: 1; translate: 0 0; } }/* announcement bar */#header .topbar {  animation: hd-down .7s cubic-bezier(.22,.61,.36,1) backwards;}#header .topbar .left  { animation: hd-down .7s cubic-bezier(.22,.61,.36,1) .15s backwards; }#header .topbar .right { animation: hd-down .7s cubic-bezier(.22,.61,.36,1) .25s backwards; }/* left side: hamburger button, logo, category menu (one after another) */#header .header-wrapper > .relative > .flex-1 > * {  animation: hd-down .7s cubic-bezier(.22,.61,.36,1) var(--d, .2s) backwards;}#header .header-wrapper > .relative > .flex-1 > :nth-child(1) { --d: .20s; }#header .header-wrapper > .relative > .flex-1 > :nth-child(2) { --d: .30s; }#header .header-wrapper > .relative > .flex-1 > :nth-child(3) { --d: .42s; }/* right side: major actions + location */#header .action-header > :not(.right-header) {  animation: hd-down .7s cubic-bezier(.22,.61,.36,1) .40s backwards;}/* right side icons: search, currency, user/login, cart (pop one by one) */#header .right-header > * {  animation: hd-pop .6s cubic-bezier(.34,1.56,.64,1) var(--d, .5s) backwards;}#header .right-header > :nth-child(1) { --d: .48s; }#header .right-header > :nth-child(2) { --d: .56s; }#header .right-header > :nth-child(3) { --d: .64s; }#header .right-header > :nth-child(4) { --d: .72s; }#header .right-header > :nth-child(n+5) { --d: .80s; }@media (prefers-reduced-motion: reduce) {  #header .topbar, #header .topbar .left, #header .topbar .right,  #header .header-wrapper > .relative > .flex-1 > *,  #header .action-header > :not(.right-header),  #header .right-header > * { animation: none !important; }}/* =====================================================================   CATEGORY PAGE - LOAD ANIMATION (sidebar, banner, breadcrumb)   (paste at the VERY END of custom CSS)   Only "backwards" fill + translate property are used, so nothing is   left on the elements afterwards (the fixed sidebar keeps working).   ===================================================================== */@keyframes cp-up   { from { opacity: 0; translate: 0 26px; }  to { opacity: 1; translate: 0 0; } }@keyframes cp-left { from { opacity: 0; translate: -30px 0; } to { opacity: 1; translate: 0 0; } }@keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }/* left sidebar: category list, then the filters */.cat-list-wrp > * {  animation: cp-left .8s cubic-bezier(.22,.61,.36,1) var(--d, .1s) backwards;}.cat-list-wrp > :nth-child(1) { --d: .10s; }.cat-list-wrp > :nth-child(2) { --d: .22s; }.cat-list-wrp > :nth-child(n+3) { --d: .34s; }/* banner (the slider inside is not touched) */.cat-list-wrp ~ .bg-gray-50 > .relative.w-full {  animation: cp-fade .9s ease .05s backwards;}/* category name on the banner */.cat-list-wrp ~ .bg-gray-50 .banner-title {  animation: cp-up .8s cubic-bezier(.22,.61,.36,1) .30s backwards;}/* breadcrumb */.cat-list-wrp ~ .bg-gray-50 .breadcrumb {  animation: cp-up .7s cubic-bezier(.22,.61,.36,1) .20s backwards;}@media (prefers-reduced-motion: reduce) {  .cat-list-wrp > *,  .cat-list-wrp ~ .bg-gray-50 > .relative.w-full,  .cat-list-wrp ~ .bg-gray-50 .banner-title,  .cat-list-wrp ~ .bg-gray-50 .breadcrumb { animation: none !important; }}/*Loader Icon */.cj-loader {    --cj-ink: #1c140e;    --cj-base: rgba(28, 20, 14, .16);    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    gap: 22px;}/* dark theme */@media (prefers-color-scheme: dark) {    .cj-loader { --cj-ink: #e7e7e7; --cj-base: rgba(231, 231, 231, .18); }}[data-theme="dark"] .cj-loader,.dark .cj-loader { --cj-ink: #e7e7e7; --cj-base: rgba(231, 231, 231, .18); }.cj-loader__logo {    display: block;    width: 140px;          /* logo size - maru karanna */    max-width: 60vw;    height: auto;    animation: cj-breathe 2s ease-in-out infinite;}/* stitched line */.cj-loader__stitch {    position: relative;    width: 140px;    max-width: 60vw;    height: 2px;    background: repeating-linear-gradient(90deg, var(--cj-base) 0 6px, transparent 6px 11px);    overflow: hidden;}.cj-loader__stitch span {    position: absolute;    inset: 0;    background: repeating-linear-gradient(90deg, var(--cj-ink) 0 6px, transparent 6px 11px);    -webkit-mask: linear-gradient(90deg, transparent, #000 50%, transparent) no-repeat;            mask: linear-gradient(90deg, transparent, #000 50%, transparent) no-repeat;    -webkit-mask-size: 45% 100%;            mask-size: 45% 100%;    animation: cj-sweep 1.6s cubic-bezier(.45, 0, .55, 1) infinite;}@keyframes cj-breathe {    0%, 100% { opacity: .55; transform: scale(.985); }    50%      { opacity: 1;   transform: scale(1); }}@keyframes cj-sweep {    0%   { -webkit-mask-position: -60% 0; mask-position: -60% 0; }    100% { -webkit-mask-position: 160% 0; mask-position: 160% 0; }}@media (prefers-reduced-motion: reduce) {    .cj-loader__logo,    .cj-loader__stitch span { animation-duration: 4s; }}/*header transprent *//* Header smooth transitions */#header {  transition: background-color .35s ease, box-shadow .35s ease !important;}#header .topbar {  overflow: hidden;  transition: height .35s ease, max-height .35s ease, opacity .25s ease, padding .35s ease;}#header.is-scrolled {  background-color: rgba(255, 255, 255, 0.55) !important;  -webkit-backdrop-filter: saturate(180%) blur(16px) !important;  backdrop-filter: saturate(180%) blur(16px) !important;  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;  border-bottom: 1px solid rgba(255, 255, 255, 0.4);}#header.is-scrolled .topbar {  height: 0 !important;  max-height: 0 !important;  min-height: 0 !important;  padding: 0 !important;  opacity: 0;}/* ===== FIX: search icon animation replay + fixed overlay breaking ===== *//* 1. Search icon ekata intro animation eka epa (open/close karaddi replay wenne nae) *//* 2. Search open welawedi backdrop-filter eka ain karanna,      ethakota fixed overlay/drawer eka header eka athule trap wenne nae *//* intro iwara una passe header eke animation siyalla off */html.hd-intro-done #header .right-header > *,html.hd-intro-done #header .right-header > * *,html.hd-intro-done #header .header-wrapper > .relative > .flex-1 > *,html.hd-intro-done #header .action-header > * {  animation: none !important;}/* search open welawedi fixed overlay eka header ekata trap wenna epa */#header:has(.input-group.active) {  -webkit-backdrop-filter: none !important;  backdrop-filter: none !important;  background-color: #fff !important;  transition: none !important;}.search-wrapper .overlay {  width: 100vw;  height: 100vh;  height: 100dvh;}/* ===== FIX: horizontal menu at 1024px - 1279px ===== *//* ===== FIX: horizontal menu at 1024px+ (desktop only) ===== */@media (min-width: 1024px) {  .horizontal-menu-wrapper,  .horizontal-menu-wrapper .list-group {    display: flex;    align-items: center;    min-width: 0;  }  .horizontal-menu-wrapper .hmenu {    display: flex !important;    flex-wrap: nowrap !important;    align-items: center;    margin: 0;    padding: 0;  }  .horizontal-menu-wrapper .hmenu-item {    flex: 0 0 auto;    margin-left: 6px !important;    margin-right: 6px !important;  }  .horizontal-menu-wrapper .hmenu-link,  .horizontal-menu-wrapper .hmenu-item a {    white-space: nowrap !important;    line-height: 1.2;    padding: 8px 2px;  }  .horizontal-menu-wrapper .hmenu-item .flex.items-center {    flex-wrap: nowrap;    white-space: nowrap;  }}/* 1024px - 1279px: tikak podi karanna */@media (min-width: 1024px) and (max-width: 1279px) {  .horizontal-menu-wrapper .hmenu-link {    font-size: 13px;    letter-spacing: 0;  }  .horizontal-menu-wrapper .hmenu-item {    margin-left: 4px !important;    margin-right: 4px !important;  }  #header .ml-4.lg\:ml-8 {    margin-left: 14px !important;  }  #header .right-header > * {    margin-left: 10px !important;  }  #header .search-wrapper {    margin-left: 10px !important;  }}/* ===== FIX: blur eka header ekata nemei, ::before ekata ===== *//* header ekata thama backdrop-filter nae (fixed children trap wenne nae) */#header.is-scrolled {  background-color: transparent !important;  -webkit-backdrop-filter: none !important;  backdrop-filter: none !important;  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;  border-bottom: 0 !important;}/* glass layer eka header eka pichchala */#header::before {  content: "";  position: absolute;  inset: 0;  z-index: -1;  pointer-events: none;  background-color: transparent;  transition: background-color .35s ease;}#header.is-scrolled::before {  background-color: rgba(255, 255, 255, 0.55);  -webkit-backdrop-filter: saturate(180%) blur(16px);  backdrop-filter: saturate(180%) blur(16px);  border-bottom: 1px solid rgba(255, 255, 255, 0.4);}/* ===== CATEGORY SKELETON (site gray) ===== */.category-block.cb-sk { --cb-gap: 16px; --cb-cols: 1.5; }@media (min-width: 640px)  { .category-block.cb-sk { --cb-cols: 2; } }@media (min-width: 1024px) { .category-block.cb-sk { --cb-cols: 3; } }@media (min-width: 1280px) { .category-block.cb-sk { --cb-cols: 4; } }@media (max-width: 639px)  { .category-block.cb-sk { --cb-gap: 12px; } }@keyframes cbSkShimmer {  from { background-position: 200% 0; }  to   { background-position: -200% 0; }}.cb-sk-eyebrow,.cb-sk-title,.cb-sk-image {  background: linear-gradient(90deg, #e6e6e6 25%, #f5f5f5 50%, #e6e6e6 75%);  background-size: 200% 100%;  animation: cbSkShimmer 1.6s linear infinite;}.cb-sk-eyebrow { width: 110px; height: 11px; border-radius: 4px; margin-bottom: 12px; }.cb-sk-title {  width: clamp(180px, 28vw, 340px);  height: clamp(30px, 3.8vw, 46px);  border-radius: 6px;  margin-bottom: 22px;}.cb-sk-track {  display: grid;  grid-auto-flow: column;  grid-auto-columns: calc((100% - (var(--cb-cols) - 1) * var(--cb-gap)) / var(--cb-cols));  gap: var(--cb-gap);  overflow: hidden;}.cb-sk-card { min-width: 0; }.cb-sk-image { position: relative; width: 100%; padding-top: 133.333%; border-radius: 10px; }@media (prefers-reduced-motion: reduce) {  .cb-sk-eyebrow, .cb-sk-title, .cb-sk-image { animation: none; }}/* ===== FILTER: selected state clearly visible ===== *//* checkbox circle eka (unchecked) */.filter-check {  -webkit-appearance: none;  appearance: none;  position: relative;  flex: 0 0 auto;  width: 22px;  height: 22px;  margin-top: 0 !important;  border: 1.5px solid #d1d5db;  border-radius: 50%;  background: #fff;  cursor: pointer;  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;}.filter-check:hover {  border-color: #7a1220;}/* selected */.filter-check:checked {  background-color: #7a1220;  border-color: #7a1220;  box-shadow: 0 0 0 3px rgba(122, 18, 32, .15);}/* tick mark */.filter-check:checked::after {  content: "";  position: absolute;  left: 50%;  top: 46%;  width: 5px;  height: 10px;  border: solid #fff;  border-width: 0 2px 2px 0;  transform: translate(-50%, -50%) rotate(45deg);}.filter-check:active {  transform: scale(.92);}/* selected option eke text eka maroon + bold */.filter-check:checked + span {  color: #7a1220;  font-weight: 700;}.filter-check:focus-visible {  outline: 2px solid #7a1220;  outline-offset: 2px;}/* ===== FOOTER LOGO: full white ===== */.mf-footer .mf-logo {  filter: brightness(0) invert(1);  -webkit-filter: brightness(0) invert(1);}.mf-footer .mf-logo {  filter: brightness(0) invert(1);  opacity: .95;}/* =====================================================================   SELECT OPTIONS POPUP - CSS ONLY (no HTML change needed)   Selected option = the button that already has the "border-black" class.   Rules use the #SelectOptionPopup id so they beat the product-card rules.   (paste at the VERY END of custom CSS)   ===================================================================== *//* ---------- option buttons (size / colour ...) : NOT selected ---------- */#SelectOptionPopup .flex-wrap > button {  display: inline-flex !important;  align-items: center !important;  justify-content: center !important;  gap: 6px;  flex: 0 0 auto !important;  width: auto !important;  min-width: 42px !important;  min-height: 36px !important;  height: auto !important;  margin: 0 !important;  padding: 6px 16px !important;  border-radius: 999px !important;  border: 1.5px solid #d1d5db !important;  background-color: #fff !important;  background-image: none !important;  color: #374151 !important;  box-shadow: none !important;  font-size: 13px !important;  font-weight: 500 !important;  letter-spacing: 0 !important;  text-transform: none !important;  line-height: 1.2 !important;  white-space: nowrap;  transform: none !important;  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease !important;}/* hover (only real mouse hover, so it does not "stick" after a tap on phones) */@media (hover: hover) {  #SelectOptionPopup .flex-wrap > button:not(:disabled):not(.border-black):hover {    border-color: #7a1220 !important;    color: #7a1220 !important;    background-color: #faf3ee !important;    background-image: none !important;    box-shadow: none !important;  }}/* ---------- option buttons : SELECTED ---------- */#SelectOptionPopup .flex-wrap > button.border-black,#SelectOptionPopup .flex-wrap > button.border-black:hover,#SelectOptionPopup .flex-wrap > button.border-black:active {  background-color: #7a1220 !important;  background-image: none !important;  border-color: #7a1220 !important;  color: #fff !important;  font-weight: 700 !important;  box-shadow: 0 0 0 3px rgba(122, 18, 32, .18) !important;}/* little tick mark inside the selected option */#SelectOptionPopup .flex-wrap > button.border-black::before {  content: "";  flex: 0 0 auto;  width: 5px;  height: 9px;  border: solid #fff;  border-width: 0 2px 2px 0;  transform: rotate(45deg) translateY(-1px);  margin-right: 2px;}/* ---------- not available ---------- */#SelectOptionPopup .flex-wrap > button:disabled {  opacity: .4 !important;  cursor: not-allowed;  background-color: #f9fafb !important;  color: #9ca3af !important;  text-decoration: line-through;}#SelectOptionPopup .flex-wrap > button.border-black:disabled {  opacity: .7 !important;  background-color: #7a1220 !important;  color: #fff !important;  text-decoration: none;}#SelectOptionPopup .flex-wrap > button:focus-visible {  outline: 2px solid #7a1220;  outline-offset: 2px;}/* ---------- close (X) : no border, no fill ---------- */#SelectOptionPopup .justify-end > button,#SelectOptionPopup .justify-end > button:hover,#SelectOptionPopup .justify-end > button:active,#SelectOptionPopup .justify-end > button:focus {  border: 0 !important;  outline: 0;  background: transparent !important;  background-image: none !important;  box-shadow: none !important;  color: #111827 !important;  transform: none !important;  animation: none !important;}#SelectOptionPopup .justify-end > button:hover { color: #7a1220 !important; }#SelectOptionPopup .justify-end > button:focus-visible { outline: 2px solid #7a1220; outline-offset: 2px; }#SelectOptionPopup .justify-end > button i { color: inherit !important; }@media (prefers-reduced-motion: reduce) {  #SelectOptionPopup .flex-wrap > button { transition: none !important; }}