:root{
--white:#FFFFFF;
--snow:#F6F8FB;
--cloud:#EDF1F7;
--ink:#0E1B30;
--body-c:#54617A;
--mist:#8C96A9;
--navy:#0B1E3A;
--navy-2:#102A52;
--navy-deep:#071527;
--blue:#1E5AA5;
--blue-2:#3E7BC4;
--sky:#A9C7E4;
--gold:#B48D33;
--gold-2:#D4AF5E;
--line:rgba(14,27,48,.13);
--line-soft:rgba(14,27,48,.07);
--line-dark:rgba(240,246,252,.17);
--line-dark-soft:rgba(240,246,252,.09);
--sh-s:0 10px 28px rgba(14,27,48,.07);
--sh-m:0 22px 48px rgba(14,27,48,.16);
--ease:cubic-bezier(.22,1,.36,1);
--fs-h1:clamp(2.25rem, 1.15rem + 3.9vw, 3.8rem);
--fs-h2:clamp(1.6rem, 1.15rem + 1.8vw, 2.45rem);
--serif:"Cormorant Garamond", Georgia, serif;
--sans:"Poppins", "Helvetica Neue", Arial, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:var(--sans);
font-weight:400;
font-size:16px;
line-height:1.75;
color:var(--ink);
background:var(--white);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1360px;margin-inline:auto;padding-inline:clamp(20px,5vw,64px)}
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--d,0s);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}
/* ---------- announcement ---------- */
.announce{
background:var(--navy);color:rgba(240,246,252,.82);
font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;font-weight:400;
text-align:center;padding:.75em 1.2em;
}
.announce b{color:var(--gold-2);font-weight:500}
.an-mob{display:none}
/* ---------- header ---------- */
.site-head{
position:sticky;top:0;z-index:60;
background:var(--white);
border-bottom:1px solid var(--line-soft);
transition:box-shadow .45s ease;
}
.site-head.scrolled{box-shadow:0 10px 30px rgba(14,27,48,.09)}
.head-in{
display:flex;align-items:center;justify-content:space-between;gap:2rem;
height:96px;color:var(--ink);
}
.brand{display:flex;align-items:center;flex-shrink:0}
.logo-img{height:72px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:clamp(1.3rem,2.4vw,2.4rem)}
.nav-links a{
font-size:.72rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
color:#3A4763;padding:.4em 0;position:relative;transition:color .35s ease;
white-space:nowrap;
}
.nav-links a::after{
content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
background:var(--gold);transform:scaleX(0);transform-origin:right;
transition:transform .45s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--blue)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left}
.head-actions{display:flex;align-items:center;gap:1.05rem;flex-shrink:0}
.icon-link{display:inline-flex;padding:.35rem;color:var(--ink);transition:color .3s ease,transform .3s var(--ease)}
.icon-link:hover{color:var(--blue);transform:translateY(-2px)}
.icon-link svg{width:21px;height:21px}
.head-cta{
font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
color:#fff;background:var(--navy);border:1px solid var(--navy);padding:.9em 1.8em;border-radius:3px;
transition:background .35s ease,color .35s ease,border-color .35s ease;white-space:nowrap;
}
.head-cta:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--navy)}
.burger{display:none;width:42px;height:42px;position:relative;z-index:75}
.burger span{
position:absolute;left:9px;width:24px;height:1.6px;background:var(--ink);
transition:transform .4s var(--ease),top .4s var(--ease);
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:25px}
.burger.open span:nth-child(1){top:20px;transform:rotate(45deg)}
.burger.open span:nth-child(2){top:20px;transform:rotate(-45deg)}
/* mobile menu */
.mnav{
position:fixed;inset:0;z-index:70;background:var(--white);color:var(--ink);
display:flex;flex-direction:column;justify-content:center;
padding:clamp(76px,16vw,96px) clamp(24px,7vw,56px) clamp(24px,7vw,56px);
overflow-y:auto;-webkit-overflow-scrolling:touch;
opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease;
}
.mnav.open{opacity:1;visibility:visible}
.m-close{
position:absolute;top:clamp(14px,3.5vw,26px);right:clamp(14px,4vw,30px);
width:50px;height:50px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:var(--navy);background:var(--snow);border:1px solid var(--line);
opacity:0;transform:scale(.85);
transition:background .35s ease,color .35s ease,border-color .35s ease,opacity .4s ease,transform .45s var(--ease);
}
.mnav.open .m-close{opacity:1;transform:none;transition-delay:.1s}
.m-close:hover,.m-close:focus-visible{background:var(--navy);color:#fff;border-color:var(--navy)}
.m-close svg{width:23px;height:23px}
.mnav .m-links{display:flex;flex-direction:column}
.mnav .m-links a{
font-size:clamp(1.3rem,5.4vw,1.7rem);font-weight:300;letter-spacing:.1em;text-transform:uppercase;
padding:.5em 0;border-bottom:1px solid var(--line-soft);display:flex;align-items:baseline;gap:1rem;color:var(--ink);
transform:translateY(14px);opacity:0;transition:transform .6s var(--ease),opacity .6s ease,color .3s ease;
}
.mnav.open .m-links a{transform:none;opacity:1}
.mnav .m-links a i{font-style:normal;font-size:.6rem;letter-spacing:.22em;color:var(--gold)}
.mnav .m-links a:hover{color:var(--blue)}
.mnav .m-foot{margin-top:2.6rem;font-size:.8rem;color:var(--body-c);display:flex;flex-direction:column;gap:.3rem}
.mnav .m-foot a:hover{color:var(--blue)}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.8em;
font-size:.73rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
padding:1.05em 2.2em;border:1px solid transparent;border-radius:3px;
transition:background .4s ease,color .4s ease,border-color .4s ease,transform .4s var(--ease),box-shadow .4s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-solid-light{background:#fff;color:var(--navy)}
.btn-solid-light:hover{background:var(--gold-2);color:var(--navy)}
.btn-ghost-light{border-color:rgba(240,246,252,.45);color:#F3F7FB}
.btn-ghost-light:hover{border-color:var(--gold-2);color:var(--gold-2)}
.btn-solid-navy{background:var(--navy);color:#fff}
.btn-solid-navy:hover{background:var(--gold-2);color:var(--navy);box-shadow:var(--sh-s)}
.btn-solid-gold{background:var(--gold-2);color:var(--navy)}
.btn-solid-gold:hover{background:#fff;color:var(--navy)}
.tlink{
display:inline-flex;align-items:center;gap:.7em;
font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);
padding-bottom:.45em;border-bottom:1px solid var(--line);
transition:color .35s ease,border-color .35s ease;
}
.tlink .arr{transition:transform .4s var(--ease)}
.tlink:hover{color:var(--gold);border-color:var(--gold)}
.tlink:hover .arr{transform:translateX(5px)}
/* ---------- shared type ---------- */
.eyebrow{
display:inline-flex;align-items:center;gap:.9em;
font-size:.68rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
}
.eyebrow::before{content:"";width:2.2rem;height:1px;background:var(--gold);opacity:.65}
.h1{font-size:var(--fs-h1);font-weight:300;line-height:1.14;letter-spacing:-.012em}
.h2{font-size:var(--fs-h2);font-weight:300;line-height:1.22;letter-spacing:-.008em;color:var(--ink)}
.lead{font-size:1.05rem;line-height:1.9;color:var(--body-c);font-weight:300}
.serif-line{font-family:var(--serif);font-style:italic;font-weight:400}
/* ---------- hero ---------- */
.hero{
position:relative;color:#F3F7FB;
min-height:clamp(580px, calc(100svh - 136px), 880px);
display:flex;flex-direction:column;overflow:hidden;background:var(--navy);
}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg .slide{position:absolute;inset:0;opacity:0}
.hero-bg .slide img{width:100%;height:100%;object-fit:cover}
.slide-1{animation:fadeA 18s ease-in-out infinite}
.slide-2{animation:fadeB 18s ease-in-out infinite}
.slide-1 img{object-position:60% 50%;animation:kbIn 18s ease-in-out infinite}
.slide-2 img{object-position:50% 62%;animation:kbOut 18s ease-in-out infinite}
@keyframes fadeA{0%{opacity:1}42%{opacity:1}50%{opacity:0}92%{opacity:0}100%{opacity:1}}
@keyframes fadeB{0%{opacity:0}42%{opacity:0}50%{opacity:1}92%{opacity:1}100%{opacity:0}}
@keyframes kbIn{0%{transform:scale(1)}50%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes kbOut{0%{transform:scale(1.07)}50%{transform:scale(1)}100%{transform:scale(1.07)}}
.hero-scrim{
position:absolute;inset:0;z-index:1;
background:
linear-gradient(100deg, rgba(6,15,30,.9) 0%, rgba(6,15,30,.66) 40%, rgba(8,20,40,.3) 72%, rgba(6,15,30,.44) 100%),
linear-gradient(0deg, rgba(6,15,30,.8) 0%, rgba(6,15,30,0) 32%);
}
.hero-in{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;width:100%}
.hero .hero-strip{width:100%}
.hero-copy{margin-block:auto;max-width:620px;padding-block:clamp(2.5rem,5vw,4rem)}
.hero-copy .eyebrow{color:var(--gold-2)}
.hero-copy .eyebrow::before{background:var(--gold-2)}
.hero-copy h1{margin-top:1.5rem;color:#fff}
.hero-copy h1 .rowline{display:block}
.hero-sub{
margin-top:1.6rem;max-width:32rem;
font-size:1rem;font-weight:300;line-height:1.95;color:rgba(233,241,249,.8);
}
.hero-ctas{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem}
.hero-dots{position:relative;display:flex;gap:.55rem;margin-top:2.8rem}
.hero-dots i{width:26px;height:2px;background:rgba(240,246,252,.28);position:relative;overflow:hidden}
.hero-dots i::after{content:"";position:absolute;inset:0;background:var(--gold-2);opacity:0}
.hero-dots i:nth-child(1)::after{animation:fadeA 18s ease-in-out infinite}
.hero-dots i:nth-child(2)::after{animation:fadeB 18s ease-in-out infinite}
.hero-strip{
position:relative;z-index:2;border-top:1px solid var(--line-dark-soft);
display:flex;flex-wrap:wrap;
}
.hero-strip .cell{
flex:1 1 200px;display:flex;align-items:center;gap:.9em;justify-content:center;
padding:1.35rem 1rem;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
color:rgba(233,241,249,.75);border-left:1px solid var(--line-dark-soft);white-space:nowrap;
}
.hero-strip .cell:first-child{border-left:none}
.hero-strip .cell svg{width:19px;height:19px;color:var(--gold-2);flex-shrink:0}
.spark{position:absolute;z-index:1;color:#fff;opacity:0;pointer-events:none}
.spark svg{width:100%;height:100%}
.spark-1{width:22px;height:22px;top:34%;left:70%;animation:twinkle 4.6s ease-in-out 1.2s infinite}
.spark-2{width:14px;height:14px;top:56%;left:61%;animation:twinkle 5.4s ease-in-out 2.8s infinite}
.spark-3{width:10px;height:10px;top:45%;left:80%;animation:twinkle 6.2s ease-in-out .4s infinite}
@keyframes twinkle{
0%,100%{opacity:0;transform:scale(.5) rotate(0deg)}
50%{opacity:.85;transform:scale(1) rotate(18deg)}
}
/* ---------- intro ---------- */
.intro{background:var(--white);padding-block:clamp(84px,11vw,136px)}
.intro-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2.5rem,6vw,7rem);align-items:start}
.intro-grid h2{margin-top:1.6rem}
.intro-copy p+p{margin-top:1.4rem}
.intro-copy .charm{font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.75;color:var(--blue)}
.stats{
margin-top:clamp(3.5rem,7vw,5.5rem);border-top:1px solid var(--line);
display:grid;grid-template-columns:repeat(3,1fr);
}
.stat{padding:2rem 1.5rem 0;border-left:1px solid var(--line)}
.stat:first-child{border-left:none;padding-left:0}
.stat .num{font-family:var(--serif);font-size:clamp(2.1rem,3.6vw,3rem);font-weight:400;line-height:1;color:var(--blue)}
.stat .lbl{margin-top:.7rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
/* ---------- featured products ---------- */
.featured{background:var(--snow);border-top:1px solid var(--line-soft);padding-block:clamp(84px,11vw,136px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(2.6rem,5vw,4.2rem)}
.sec-head h2{margin-top:1.5rem}
.sec-head .tlink{flex-shrink:0;margin-bottom:.5rem}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2vw,2rem)}
.card{
background:#fff;border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;
display:flex;flex-direction:column;box-shadow:var(--sh-s);
transition:box-shadow .5s ease,transform .5s var(--ease),border-color .5s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-m);border-color:rgba(180,141,51,.4)}
.card-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff}
.card-img img{width:100%;height:100%;object-fit:contain;padding:9%;transition:transform 1.1s var(--ease)}
.card:hover .card-img img{transform:scale(1.06)}
.card-tag{
position:absolute;top:14px;left:14px;font-size:.6rem;font-weight:500;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold);background:rgba(255,255,255,.94);
border:1px solid rgba(180,141,51,.4);border-radius:2px;padding:.5em 1em;z-index:2;
}
.card-info{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;gap:.45rem;flex:1;border-top:1px solid var(--line-soft)}
.card-info .woocommerce-loop-product__title{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.card-info .name{display:block;font-size:.95rem;font-weight:400;line-height:1.45;color:var(--ink);transition:color .3s ease}
.card:hover .card-info .name{color:var(--blue)}
.card-info .spec{font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.card-info .price{margin-top:auto;padding-top:.9rem;font-size:1.02rem;font-weight:500;color:var(--blue);display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.card-info .view{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:0;transform:translateX(-6px);transition:opacity .4s ease,transform .4s var(--ease)}
.card:hover .view{opacity:1;transform:none}
/* ---------- craftsmanship ---------- */
.craft{position:relative;background:var(--navy);color:#F3F7FB;padding-block:clamp(92px,12vw,156px);overflow:hidden}
.craft::before{
content:"";position:absolute;top:-30%;right:-10%;width:760px;height:760px;border-radius:50%;
background:radial-gradient(circle, rgba(62,123,196,.16) 0%, rgba(62,123,196,0) 62%);pointer-events:none;
}
.craft-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(700px,84vw);opacity:.05;color:var(--gold-2);pointer-events:none}
.craft-in{position:relative;text-align:center;max-width:820px;margin-inline:auto}
.craft-in .eyebrow{color:var(--gold-2);justify-content:center}
.craft-in .eyebrow::before{display:none}
.craft-quote{
margin-top:1.8rem;font-family:var(--serif);font-style:italic;font-weight:400;
font-size:clamp(1.9rem,1.2rem + 2.9vw,3.2rem);line-height:1.25;color:#fff;
}
.craft-quote em{font-style:italic;color:var(--gold-2);display:block}
.craft-sub{margin:1.8rem auto 0;max-width:36rem;font-size:.97rem;font-weight:300;line-height:1.95;color:rgba(233,241,249,.68)}
.craft-cols{
margin-top:clamp(3.4rem,7vw,5.4rem);border-top:1px solid var(--line-dark-soft);
display:grid;grid-template-columns:repeat(4,1fr);text-align:left;position:relative;
}
.craft-col{padding:2.2rem 1.8rem 0;border-left:1px solid var(--line-dark-soft)}
.craft-col:first-child{border-left:none;padding-left:0}
.craft-col svg{width:36px;height:36px;color:var(--gold-2);transition:transform .5s var(--ease)}
.craft-col:hover svg{transform:translateY(-5px) scale(1.05)}
.craft-col h3{margin-top:1.3rem;font-size:.78rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.craft-col p{margin-top:.7rem;font-size:.87rem;font-weight:300;line-height:1.8;color:rgba(196,213,230,.72)}
/* ---------- categories ---------- */
.cats{background:var(--white);padding-block:clamp(84px,11vw,136px)}
.cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.1rem,1.8vw,1.8rem)}
.cat-card{
position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;display:block;
box-shadow:var(--sh-s);background:var(--navy-2);
transition:transform .55s var(--ease),box-shadow .55s ease;
}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--sh-m)}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.cat-card:hover img{transform:scale(1.07)}
.cat-veil{
position:absolute;inset:0;
background:linear-gradient(180deg, rgba(7,20,38,.06) 30%, rgba(7,20,38,.46) 68%, rgba(6,16,31,.88) 100%);
transition:background .5s ease;
}
.cat-txt{position:absolute;left:1.4rem;right:1.4rem;bottom:1.3rem;color:#fff}
.cat-txt .cn{font-size:.98rem;font-weight:500;letter-spacing:.06em;line-height:1.35}
.cat-txt .cc{margin-top:.35rem;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);display:flex;align-items:center;gap:.7em}
.cat-txt .cc .arr{opacity:0;transform:translateX(-6px);transition:opacity .4s ease,transform .45s var(--ease)}
.cat-card:hover .cc .arr{opacity:1;transform:none}
.cat-line{position:absolute;left:1.4rem;right:1.4rem;bottom:4.6rem;height:1px;background:var(--gold-2);opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .5s ease,transform .6s var(--ease)}
.cat-card:hover .cat-line{opacity:.7;transform:scaleX(1)}
/* ---------- giveaway ---------- */
.giveaway{background:var(--white);padding-bottom:clamp(84px,11vw,136px)}
.give-panel{
position:relative;background:linear-gradient(155deg,#0F2A50 0%,#081831 100%);
border:1px solid rgba(212,175,94,.45);border-radius:18px;
padding:clamp(2.6rem,6vw,5rem);color:#F3F7FB;
display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,5vw,5rem);align-items:center;
overflow:hidden;box-shadow:var(--sh-m);
}
.give-panel::before{
content:"";position:absolute;top:-35%;right:-12%;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle, rgba(212,175,94,.16) 0%, rgba(212,175,94,0) 65%);pointer-events:none;
}
.give-panel::after{
content:"";position:absolute;inset:10px;border:1px solid rgba(212,175,94,.2);border-radius:12px;pointer-events:none;
}
.give-panel .eyebrow{color:var(--gold-2)}
.give-panel .eyebrow::before{background:var(--gold-2)}
.give-copy h2{margin-top:1.5rem;color:#fff}
.give-copy .lead{margin-top:1.4rem;max-width:34rem;color:rgba(233,241,249,.78)}
.give-copy strong{color:var(--gold-2);font-weight:500}
.give-micro{margin-top:1.8rem;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(196,213,230,.55)}
.give-cta{margin-top:2.2rem;position:relative;z-index:2}
.give-art{
position:relative;text-align:center;border-left:1px solid rgba(212,175,94,.35);
padding:1.5rem 0 1.5rem clamp(2rem,4vw,4rem);
}
.give-art .g1{font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-2)}
.give-art .g2{font-family:var(--serif);font-style:italic;font-size:clamp(2.5rem,4.8vw,3.9rem);line-height:1.12;color:#fff;margin-top:1rem}
.give-art .g3{margin-top:1.2rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,241,249,.62)}
.give-art svg{width:28px;height:28px;color:var(--gold-2);margin:1.4rem auto 0}
/* ---------- assurance ---------- */
.assure{background:var(--snow);border-top:1px solid var(--line-soft);padding-block:clamp(80px,10vw,120px)}
.assure-head{text-align:center;max-width:560px;margin:0 auto clamp(3rem,6vw,4.4rem)}
.assure-head .eyebrow{justify-content:center}
.assure-head .eyebrow::before{display:none}
.assure-head h2{margin-top:1.4rem}
.assure-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.assure-col{padding:2.4rem 1.9rem 0;border-left:1px solid var(--line)}
.assure-col:first-child{border-left:none;padding-left:0}
.assure-col svg{width:36px;height:36px;color:var(--blue);transition:transform .5s var(--ease),color .4s ease}
.assure-col:hover svg{transform:translateY(-5px) scale(1.05);color:var(--gold)}
.assure-col h3{margin-top:1.3rem;font-size:.78rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.assure-col p{margin-top:.7rem;font-size:.87rem;font-weight:300;line-height:1.85;color:var(--body-c)}
/* ---------- final cta ---------- */
.cta{position:relative;background:var(--navy);color:#F3F7FB;padding-block:clamp(96px,13vw,164px);overflow:hidden;text-align:center}
.cta::before{
content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);
width:900px;height:900px;border-radius:50%;
background:radial-gradient(circle, rgba(212,175,94,.15) 0%, rgba(212,175,94,0) 62%);
pointer-events:none;
}
.cta-in{position:relative;max-width:760px;margin-inline:auto}
.cta .serif-line{font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--gold-2);letter-spacing:.04em}
.cta h2{margin-top:1.2rem;font-size:clamp(1.9rem,1.2rem + 2.8vw,3.15rem);font-weight:300;line-height:1.2;letter-spacing:-.01em;color:#fff}
.cta p{margin:1.7rem auto 0;max-width:31rem;font-size:.97rem;font-weight:300;line-height:1.95;color:rgba(233,241,249,.7)}
.cta-btns{margin-top:2.8rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.cta-contact{
margin-top:3.2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.6rem;
font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,241,249,.55);
}
.cta-contact a{transition:color .3s ease}
.cta-contact a:hover{color:var(--gold-2)}
/* ---------- footer ---------- */
.foot{background:var(--navy-deep);color:rgba(233,241,249,.78)}
.foot-top{
display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2.4fr));
gap:clamp(2.5rem,5vw,4.5rem);padding-block:clamp(64px,8vw,92px) clamp(48px,6vw,68px);
}
.foot-brand .fb-mark{display:flex;align-items:center;gap:.9rem}
.foot-brand .fb-mark svg{width:34px;height:34px;color:var(--gold-2);flex-shrink:0}
.foot-brand .fb-name{display:flex;flex-direction:column;line-height:1.35}
.foot-brand .fb-name .n{font-size:.9rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#fff}
.foot-brand .fb-name .t{font-family:var(--serif);font-style:italic;font-size:.82rem;color:var(--gold-2)}
.foot-brand p{margin-top:1.5rem;max-width:21rem;font-size:.88rem;font-weight:300;line-height:1.9;color:rgba(196,213,230,.6)}
.foot h4{font-size:.66rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-2);margin-bottom:1.4rem}
.foot-col li{margin-bottom:.65rem}
.foot-col a{font-size:.86rem;font-weight:300;color:rgba(233,241,249,.75);transition:color .3s ease}
.foot-col a:hover{color:var(--gold-2)}
.foot-col .sub{display:block;font-size:.7rem;color:rgba(196,213,230,.42);margin-top:.1rem}
.foot-bottom{
border-top:1px solid var(--line-dark-soft);
padding-block:1.6rem;display:flex;flex-wrap:wrap;gap:.8rem 2.5rem;align-items:center;justify-content:space-between;
font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(196,213,230,.42);
}
/* ---------- whatsapp (single header entry point) ---------- */
/* There is exactly one WhatsApp control on the site: an icon in the header
action row. No floating bubble — see clearcut_whatsapp_icon(). */
.wa-link svg{width:19px;height:19px}
.wa-link:hover{color:#25D366}
/* ---------- responsive ---------- */
/* The header carries a logo, the menu, four icons and the CTA button. Between a
roomy desktop and the 1220px breakpoint the rhythm is tightened so the menu is
never clipped, while the CTA button stays visible. */
@media (max-width:1400px){
.nav-links{gap:1.5rem}
.nav-links a{letter-spacing:.15em}
.head-actions{gap:.8rem}
}
@media (max-width:1220px){
.head-cta{display:none}
.nav-links{gap:1.4rem}
.nav-links a{font-size:.69rem;letter-spacing:.15em}
.head-in{height:88px}
.logo-img{height:64px}
.hero-strip .cell{font-size:.63rem;letter-spacing:.11em;padding:1.2rem .8rem}
}
@media (max-width:1100px){
.prod-grid{grid-template-columns:repeat(2,1fr)}
.cats-grid{grid-template-columns:repeat(2,1fr)}
.craft-cols{grid-template-columns:repeat(2,1fr)}
.craft-col{padding:2.2rem 1.8rem 0}
.craft-col:nth-child(odd){border-left:none;padding-left:0}
.craft-col:nth-child(n+3){margin-top:1rem}
.assure-grid{grid-template-columns:repeat(2,1fr)}
.assure-col{padding:2.4rem 1.9rem 0}
.assure-col:nth-child(odd){border-left:none;padding-left:0}
.assure-col:nth-child(n+3){margin-top:1.4rem}
}
@media (max-width:980px){
.nav-links{display:none}
.burger{display:block}
.head-in{height:86px}
.logo-img{height:66px}
.intro-grid{grid-template-columns:1fr;gap:2.2rem}
.give-panel{grid-template-columns:1fr}
.give-art{border-left:none;border-top:1px solid rgba(212,175,94,.35);padding:2.4rem 0 .5rem;text-align:left}
.give-art svg{margin-left:0}
.foot-top{grid-template-columns:1fr 1fr;gap:2.8rem}
}
@media (max-width:640px){
body{font-size:15px}
.announce{font-size:.64rem;letter-spacing:.12em;padding:.8em 1.1em;line-height:1.6}
.an-desk{display:none}
.an-2{display:none}
.an-mob{display:inline}
.head-in{height:80px;gap:.9rem}
.logo-img{height:62px}
.head-actions{gap:.35rem}
.icon-link{padding:.3rem}
.icon-link svg{width:20px;height:20px}
.burger{width:42px;height:42px}
.burger span{left:9px}
.mnav .m-links a{font-size:clamp(1.28rem,5.2vw,1.6rem);padding:.52em 0}
.mnav .m-foot{font-size:.85rem;margin-top:2.2rem;gap:.42rem}
.btn{font-size:.75rem;letter-spacing:.14em;padding:1.1em 2rem}
.tlink{font-size:.74rem;letter-spacing:.14em}
.eyebrow{font-size:.7rem;letter-spacing:.2em}
.hero-scrim{
background:
linear-gradient(180deg, rgba(6,15,30,.74) 0%, rgba(6,15,30,.6) 50%, rgba(6,15,30,.86) 100%);
}
/* hero: fully centred composition on mobile */
.hero-copy{padding-block:2.6rem;text-align:center;margin-inline:auto}
.hero-copy .eyebrow{justify-content:center}
.hero-copy h1{margin-top:1.3rem}
.hero-sub{font-size:.98rem;line-height:1.85;margin-inline:auto;margin-top:1.4rem}
.hero-ctas{justify-content:center;margin-top:2.2rem}
.hero-ctas .btn{width:100%;max-width:340px}
.hero-dots{margin-top:2.2rem;justify-content:center}
.hero-strip{flex-direction:column;align-items:flex-start;gap:0;border-top:1px solid var(--line-dark-soft)}
.hero-strip .cell{flex:0 0 auto;border-left:none;border-top:1px solid var(--line-dark-soft);justify-content:center;padding:1.05rem 0;width:100%;font-size:.68rem;letter-spacing:.13em}
.hero-strip .cell:first-child{border-top:none}
.stats{grid-template-columns:1fr;border-top:none}
.stat{border-left:none;border-top:1px solid var(--line);padding:1.6rem 0 0;margin-bottom:1.6rem}
.stat:first-child{padding-top:1.6rem;border-top:1px solid var(--line)}
.sec-head{flex-direction:column;align-items:flex-start;gap:1.6rem}
.prod-grid{grid-template-columns:1fr}
.cats-grid{grid-template-columns:1fr}
.cat-card{aspect-ratio:3/2}
.craft-cols{grid-template-columns:1fr;border-top:none}
.craft-col{border-left:none;padding:1.9rem 0 0}
.craft-col:nth-child(n+2){margin-top:.4rem;border-top:1px solid var(--line-dark-soft)}
.assure-grid{grid-template-columns:1fr;border-top:none}
.assure-col{border-left:none;padding:1.9rem 0 0}
.assure-col:nth-child(n+2){margin-top:.6rem;border-top:1px solid var(--line)}
.give-panel{border-radius:14px}
.foot-top{grid-template-columns:1fr;gap:2.6rem}
.foot-bottom{flex-direction:column;align-items:flex-start;gap:.5rem}
.cta-btns .btn{width:100%;max-width:340px}
.cta-contact{max-width:none;font-size:.76rem;letter-spacing:.13em;color:rgba(233,241,249,.78)}
/* small-text legibility (mobile only) */
.stat .lbl,.card-info .spec,.size-table caption{color:#6F7891}
.stat .lbl{font-size:.72rem;letter-spacing:.16em}
.card-info .spec{font-size:.72rem;letter-spacing:.14em}
.card-info .name{font-size:1rem}
.cat-txt .cn{font-size:1.02rem}
.cat-txt .cc{font-size:.68rem;letter-spacing:.16em}
.craft-col p,.assure-col p{font-size:.92rem;line-height:1.85}
.craft-col p{color:rgba(205,220,235,.82)}
.craft-sub{font-size:1rem;line-height:1.9;color:rgba(233,241,249,.78)}
.give-copy .lead{color:rgba(233,241,249,.86)}
.give-micro{font-size:.7rem;letter-spacing:.11em;line-height:1.7;color:rgba(205,220,235,.72)}
.foot-brand p{font-size:.92rem;color:rgba(205,220,235,.74)}
.foot-col a{font-size:.92rem}
.foot-col .sub{font-size:.75rem;color:rgba(205,220,235,.6)}
.foot-bottom{font-size:.72rem;letter-spacing:.11em;line-height:1.7;color:rgba(205,220,235,.6)}
.size-steps p{font-size:.96rem}
.size-table th{font-size:.65rem;letter-spacing:.12em}
.size-table td{font-size:.84rem}
.page-hero .ph-sub{font-size:.98rem;line-height:1.85}
}
@media (min-width:641px) and (max-width:1100px){
.cats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:400px){
.wrap{padding-inline:18px}
.head-in{height:78px;gap:.6rem}
.logo-img{height:60px}
.head-actions{gap:.1rem}
.give-panel{padding:2rem 1.4rem}
.announce{font-size:.6rem;letter-spacing:.1em}
.m-close{width:46px;height:46px}
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
html{scroll-behavior:auto}
[data-reveal]{opacity:1;transform:none}
.slide-1{opacity:1}
.slide-2{opacity:0}
.spark{display:none}
}
/* =========================================================================
SHOP / WOOCOMMERCE COMPONENTS
In WordPress these map to WooCommerce templates + Elementor global widgets.
========================================================================= */
/* ---------- page hero (shared by all inner pages) ---------- */
.page-hero{position:relative;background:var(--navy);color:#F3F7FB;padding-block:clamp(42px,5vw,66px);overflow:hidden}
.page-hero::before{content:"";position:absolute;top:-60%;right:-8%;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle, rgba(212,175,94,.16) 0%, rgba(212,175,94,0) 62%);pointer-events:none}
.page-hero .wrap{position:relative}
.page-hero .eyebrow{color:var(--gold-2)}
.page-hero .eyebrow::before{background:var(--gold-2)}
.page-hero h1{margin-top:1.1rem;font-size:clamp(1.85rem, 1.15rem + 2.2vw, 2.75rem);font-weight:300;line-height:1.16;letter-spacing:-.01em;color:#fff}
.page-hero .ph-sub{margin-top:1rem;max-width:38rem;font-size:1rem;font-weight:300;line-height:1.9;color:rgba(233,241,249,.78)}
/* ---------- breadcrumbs (WooCommerce woocommerce-breadcrumb) ---------- */
.woocommerce-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.55em;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,241,249,.6)}
.woocommerce-breadcrumb a{transition:color .3s ease}
.woocommerce-breadcrumb a:hover{color:var(--gold-2)}
.woocommerce-breadcrumb .sep{opacity:.45}
.crumb-light{color:var(--mist)}
.crumb-light a:hover{color:var(--blue)}
/* ---------- toolbar / filters ---------- */
.shop-main{background:var(--white);padding-block:clamp(48px,6vw,76px)}
.shop-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.shop-side{position:sticky;top:118px}
.side-block+.side-block{margin-top:2.4rem;padding-top:2.4rem;border-top:1px solid var(--line-soft)}
.side-block h3{font-size:.66rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.cat-list li+li{margin-top:.15rem}
.cat-list a{
display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
font-size:.9rem;font-weight:300;color:var(--body-c);padding:.5em .7em;border-radius:4px;
transition:background .3s ease,color .3s ease;
}
.cat-list a .n{font-size:.72rem;color:var(--mist)}
.cat-list a:hover{background:var(--snow);color:var(--blue)}
.cat-list a.active{background:var(--navy);color:#fff}
.cat-list a.active .n{color:var(--gold-2)}
.side-note{font-size:.84rem;font-weight:300;line-height:1.8;color:var(--body-c)}
.side-note strong{color:var(--ink);font-weight:500}
.shop-bar{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
padding-bottom:1.3rem;margin-bottom:1.8rem;border-bottom:1px solid var(--line-soft);
}
.woocommerce-result-count{font-size:.8rem;font-weight:300;color:var(--body-c);margin:0}
.woocommerce-result-count b{color:var(--ink);font-weight:500}
.shop-tools{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.field-wrap{position:relative;display:flex;align-items:center}
.field-wrap svg{position:absolute;left:.85rem;width:15px;height:15px;color:var(--mist);pointer-events:none}
.search-field,.orderby{
font-family:inherit;font-size:.82rem;font-weight:300;color:var(--ink);
background:var(--white);border:1px solid var(--line);border-radius:4px;
padding:.72em 1em;transition:border-color .3s ease,box-shadow .3s ease;
}
.search-field{padding-left:2.4rem;min-width:200px}
.search-field:focus,.orderby:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,90,165,.1)}
.orderby{cursor:pointer;padding-right:2.2em;appearance:none;
background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath d='M1 1.5 6 6.5l5-5' stroke='%2354617A' stroke-width='1.3' fill='none'/%3e%3c/svg%3e");
background-repeat:no-repeat;background-position:right .9em center;background-size:10px}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.chip{
font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
padding:.6em 1.1em;border:1px solid var(--line);border-radius:100px;color:var(--body-c);
background:var(--white);transition:all .3s ease;white-space:nowrap;
}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
/* ---------- product grid (WooCommerce ul.products) ---------- */
/* Only the product list itself is the grid. Related / up-sell / cross-sell
wrappers also carry the .products class and must stay block-level. */
ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.1rem,1.8vw,1.8rem)}
/* The WooCommerce grid needs its own breakpoints — .prod-grid covers the
homepage strip only, and without these the shop stayed four across on a phone. */
@media (max-width:1180px){ ul.products{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ ul.products{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ ul.products{gap:.9rem} }
.products.cols-3{grid-template-columns:repeat(3,1fr)}
.product-empty{padding:4rem 1rem;text-align:center;color:var(--body-c);font-weight:300;grid-column:1/-1}
.product-empty svg{width:38px;height:38px;color:var(--mist);margin:0 auto 1.2rem}
.card-img .onsale,.card-img .out-of-stock{
position:absolute;top:12px;right:12px;z-index:2;
font-size:.58rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
padding:.5em .9em;border-radius:2px;
}
.card-img .onsale{background:var(--gold-2);color:var(--navy)}
.card-img .out-of-stock{background:rgba(11,30,58,.9);color:#fff}
.card-info del{color:var(--mist);font-weight:300;font-size:.86rem;margin-right:.45em;text-decoration:line-through}
.card-info ins{text-decoration:none}
.card-actions{display:flex;gap:.5rem;padding:0 1.6rem 1.5rem}
.btn-cart{
flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
padding:.95em 1em;border-radius:3px;border:1px solid var(--navy);background:var(--navy);color:#fff;
transition:background .35s ease,color .35s ease,border-color .35s ease;cursor:pointer;
}
.btn-cart:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--navy)}
.btn-cart[disabled]{background:var(--cloud);border-color:var(--cloud);color:var(--mist);cursor:not-allowed}
.btn-cart svg{width:14px;height:14px}
.btn-cart.added{background:#1B7A4B;border-color:#1B7A4B;color:#fff}
/* ---------- single product ---------- */
/* WordPress puts "single-product" on , so this must stay scoped to the
section element or it pads the whole document. The WooCommerce product page
gets its spacing from .shop-main instead. */
section.single-product{background:var(--white);padding-block:clamp(48px,6vw,80px)}
.sp-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2.2rem,5vw,4.5rem);align-items:start}
.sp-gallery{position:relative;background:var(--snow);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;aspect-ratio:1/1}
.sp-gallery img{width:100%;height:100%;object-fit:contain;padding:7%}
.sp-thumbs{display:flex;gap:.7rem;margin-top:.9rem;flex-wrap:wrap}
.sp-thumbs button{width:72px;height:72px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;padding:0;transition:border-color .3s ease}
.sp-thumbs button.active,.sp-thumbs button:hover{border-color:var(--blue)}
.sp-thumbs img{width:100%;height:100%;object-fit:contain;padding:8%}
.sp-summary .cat-line{font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.sp-summary h1{margin-top:1rem;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);font-weight:300;line-height:1.25;color:var(--ink)}
.sp-price{margin-top:1.2rem;font-size:1.7rem;font-weight:500;color:var(--blue);display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.sp-price del{font-size:1.05rem;color:var(--mist);font-weight:300}
.sp-price .save{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;background:var(--gold-2);color:var(--navy);padding:.45em .9em;border-radius:2px}
.sp-vat{margin-top:.4rem;font-size:.74rem;color:var(--mist);font-weight:300}
.sp-stock{margin-top:1.3rem;display:inline-flex;align-items:center;gap:.6em;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.sp-stock.in{color:#1B7A4B}
.sp-stock.out{color:#9A3B3B}
.sp-stock i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}
.sp-desc{margin-top:1.5rem;font-size:.95rem;font-weight:300;line-height:1.9;color:var(--body-c)}
.sp-cart{margin-top:1.9rem;display:flex;gap:.8rem;flex-wrap:wrap;align-items:stretch}
.qty-box{display:flex;align-items:center;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.qty-box button{width:44px;font-size:1.1rem;color:var(--body-c);transition:background .3s ease,color .3s ease}
.qty-box button:hover{background:var(--snow);color:var(--blue)}
.qty-box input{width:52px;text-align:center;border:none;font-family:inherit;font-size:.95rem;color:var(--ink);padding:.85em 0;-moz-appearance:textfield}
.qty-box input::-webkit-outer-spin-button,.qty-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-box input:focus{outline:none}
.sp-cart .btn{flex:1;min-width:190px}
.sp-meta{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:.55rem}
.sp-meta p{font-size:.82rem;font-weight:300;color:var(--body-c)}
.sp-meta span{color:var(--mist);letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;margin-right:.6em}
.sp-assure{margin-top:1.8rem;display:grid;gap:.9rem}
.sp-assure div{display:flex;gap:.9rem;align-items:flex-start;font-size:.85rem;font-weight:300;color:var(--body-c);line-height:1.65}
.sp-assure svg{width:22px;height:22px;color:var(--blue);flex-shrink:0;margin-top:.1rem}
/* ---------- cart / checkout tables ---------- */
.shop_table{width:100%;border-collapse:collapse;table-layout:fixed}
.shop_table col.c-item{width:40%}
.shop_table col.c-price{width:14%}
.shop_table col.c-qty{width:19%}
.shop_table col.c-sub{width:17%}
.shop_table col.c-rm{width:10%}
.shop_table th{
text-align:left;font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold);padding:0 .9rem 1rem;border-bottom:1px solid var(--line);
}
.shop_table th:last-child,.shop_table td:last-child{text-align:right}
.shop_table td{padding:1.25rem .9rem;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.shop_table tbody tr:last-child td{border-bottom:1px solid var(--line)}
.cart-item{display:flex;gap:1.1rem;align-items:center}
.cart-item>a{flex-shrink:0;display:block;line-height:0}
.cart-item img{width:76px;height:76px;object-fit:contain;background:var(--snow);border:1px solid var(--line-soft);border-radius:8px;padding:6px;flex-shrink:0}
.cart-item .ci-name{font-size:.92rem;font-weight:400;color:var(--ink);line-height:1.45}
.cart-item .ci-cat{margin-top:.2rem;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.product-price,.product-subtotal{font-size:.95rem;color:var(--ink);white-space:nowrap}
.product-subtotal{font-weight:500;color:var(--blue)}
.remove-item{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--mist);transition:background .3s ease,color .3s ease}
.remove-item:hover{background:#FBEDED;color:#9A3B3B}
.remove-item svg{width:15px;height:15px}
.shop_table .qty-box{max-width:100%}
.shop_table .qty-box button{width:36px}
.shop_table .qty-box input{width:40px;font-size:.9rem}
.cart-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:flex-start;margin-top:1.8rem}
/* ---------- coupon (WooCommerce .coupon / .checkout_coupon) ---------- */
.coupon{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.coupon label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.input-text{
font-family:inherit;font-size:.88rem;font-weight:300;color:var(--ink);background:var(--white);
border:1px solid var(--line);border-radius:4px;padding:.85em 1em;transition:border-color .3s ease,box-shadow .3s ease;width:100%;
}
.input-text::placeholder{color:var(--mist)}
.input-text:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,90,165,.1)}
.coupon .input-text{width:auto;min-width:190px;text-transform:uppercase;letter-spacing:.08em}
.coupon-msg{margin-top:.75rem;font-size:.82rem;font-weight:300;display:none}
.coupon-msg.show{display:block}
.coupon-msg.ok{color:#1B7A4B}
.coupon-msg.err{color:#9A3B3B}
.applied-coupons{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.5rem}
.coupon-tag{
display:inline-flex;align-items:center;gap:.6em;font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
background:#EAF3EA;color:#1B7A4B;border:1px solid rgba(27,122,75,.3);border-radius:100px;padding:.5em .5em .5em 1em;
}
.coupon-tag button{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#1B7A4B;transition:background .3s ease}
.coupon-tag button:hover{background:rgba(27,122,75,.16)}
.coupon-tag svg{width:11px;height:11px}
.coupon-hint{margin-top:.7rem;font-size:.76rem;font-weight:300;color:var(--mist);line-height:1.7}
.woocommerce-form-coupon-toggle{
background:var(--snow);border:1px solid var(--line-soft);border-left:3px solid var(--gold);
border-radius:4px;padding:1rem 1.2rem;margin-bottom:1.8rem;
font-size:.88rem;font-weight:300;color:var(--body-c);display:flex;align-items:center;gap:.7em;flex-wrap:wrap;
}
.woocommerce-form-coupon-toggle svg{width:18px;height:18px;color:var(--gold);flex-shrink:0}
.showcoupon{color:var(--blue);font-weight:500;border-bottom:1px solid rgba(30,90,165,.4);transition:color .3s ease,border-color .3s ease}
.showcoupon:hover{color:var(--gold);border-color:var(--gold)}
.checkout_coupon{
border:1px solid var(--line);border-radius:8px;padding:1.4rem;margin-bottom:1.8rem;background:var(--white);
display:none;
}
.checkout_coupon.open{display:block}
.checkout_coupon p{font-size:.85rem;font-weight:300;color:var(--body-c);margin-bottom:1rem}
/* ---------- totals ---------- */
.cart_totals,.order-summary{
background:var(--snow);border:1px solid var(--line-soft);border-radius:14px;padding:clamp(1.4rem,2.5vw,2rem);
}
.cart_totals h2,.order-summary h2{font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem}
.totals-row{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;font-size:.9rem;font-weight:300;color:var(--body-c);border-bottom:1px solid var(--line-soft)}
.totals-row span:last-child{color:var(--ink);font-weight:400;white-space:nowrap}
.totals-row.discount span:last-child{color:#1B7A4B;font-weight:500}
.totals-row.free span:last-child{color:#1B7A4B;font-weight:500}
.totals-row small{display:block;font-size:.72rem;color:var(--mist);margin-top:.15rem}
.order-total{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding-top:1.2rem;margin-top:.6rem;border-top:2px solid var(--navy)}
.order-total .lbl{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.order-total .amt{font-size:1.5rem;font-weight:500;color:var(--blue)}
.totals-vat{margin-top:.5rem;text-align:right;font-size:.74rem;color:var(--mist);font-weight:300}
.cart_totals .btn,.order-summary .btn{width:100%;margin-top:1.5rem}
.mini-items{margin-bottom:1.2rem;display:flex;flex-direction:column;gap:.9rem;max-height:340px;overflow-y:auto}
.mini-item{display:flex;gap:.9rem;align-items:center}
.mini-item>img{flex:0 0 54px}
.mini-item img{width:54px;height:54px;object-fit:contain;background:#fff;border:1px solid var(--line-soft);border-radius:6px;padding:4px;flex-shrink:0}
.mini-item .mi-n{font-size:.82rem;font-weight:300;color:var(--ink);line-height:1.4}
.mini-item .mi-q{font-size:.7rem;color:var(--mist);margin-top:.15rem}
.mini-item .mi-p{margin-left:auto;font-size:.85rem;font-weight:500;color:var(--ink);white-space:nowrap}
/* ---------- checkout form ---------- */
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.checkout-side{position:sticky;top:118px}
.checkout h3,.form-block h3{
font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
padding-bottom:.9rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line-soft);
display:flex;align-items:center;gap:.8em;
}
.checkout h3 .step{
width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;
display:inline-flex;align-items:center;justify-content:center;font-size:.68rem;letter-spacing:0;flex-shrink:0;
}
.form-block+.form-block{margin-top:2.6rem}
.form-row{display:grid;gap:1rem 1.2rem;grid-template-columns:1fr 1fr}
.form-row.full{grid-template-columns:1fr}
.form-field{display:flex;flex-direction:column;gap:.45rem}
.form-field label{font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--body-c)}
.form-field label .req{color:#9A3B3B}
.form-field textarea.input-text{min-height:96px;resize:vertical;font-family:inherit}
.form-field select.input-text{cursor:pointer;appearance:none;
background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath d='M1 1.5 6 6.5l5-5' stroke='%2354617A' stroke-width='1.3' fill='none'/%3e%3c/svg%3e");
background-repeat:no-repeat;background-position:right 1em center;background-size:11px;padding-right:2.4em}
.wc_payment_methods{display:flex;flex-direction:column;gap:.8rem}
.wc_payment_method{border:1px solid var(--line);border-radius:8px;transition:border-color .3s ease,background .3s ease}
.wc_payment_method:has(input:checked){border-color:var(--blue);background:var(--snow)}
.wc_payment_method label{display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.2rem;cursor:pointer;font-size:.9rem;font-weight:400;color:var(--ink)}
.wc_payment_method input{accent-color:var(--blue);width:17px;height:17px;flex-shrink:0}
.wc_payment_method .pm-tag{margin-left:auto;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.payment_box{padding:0 1.2rem 1.1rem 3.5rem;font-size:.83rem;font-weight:300;line-height:1.75;color:var(--body-c);display:none}
.wc_payment_method:has(input:checked) .payment_box{display:block}
.woocommerce-privacy-policy-text{margin-top:1.5rem;font-size:.8rem;font-weight:300;line-height:1.8;color:var(--mist)}
.woocommerce-privacy-policy-text a{color:var(--blue);border-bottom:1px solid rgba(30,90,165,.35)}
.shipping-methods{display:flex;flex-direction:column;gap:.7rem}
.ship-method{display:flex;align-items:center;gap:.9rem;border:1px solid var(--line);border-radius:8px;padding:1rem 1.2rem;cursor:pointer;transition:border-color .3s ease,background .3s ease;font-size:.9rem;color:var(--ink)}
.ship-method:has(input:checked){border-color:var(--blue);background:var(--snow)}
.ship-method input{accent-color:var(--blue);width:17px;height:17px;flex-shrink:0}
.ship-method .sm-price{margin-left:auto;font-weight:500;white-space:nowrap}
.ship-method .sm-sub{display:block;font-size:.74rem;color:var(--mist);font-weight:300;margin-top:.15rem}
.ship-method.is-free .sm-price{color:#1B7A4B}
/* ---------- notices / empty states ---------- */
.woocommerce-info,.woocommerce-message{
display:flex;align-items:flex-start;gap:.9rem;
background:var(--snow);border:1px solid var(--line-soft);border-left:3px solid var(--blue);
border-radius:4px;padding:1.1rem 1.3rem;font-size:.88rem;font-weight:300;color:var(--body-c);line-height:1.7;
}
.woocommerce-message{border-left-color:#1B7A4B}
.woocommerce-info svg,.woocommerce-message svg{width:19px;height:19px;color:var(--blue);flex-shrink:0;margin-top:.15rem}
.woocommerce-message svg{color:#1B7A4B}
.empty-state{text-align:center;padding:clamp(3rem,7vw,5.5rem) 1rem;max-width:460px;margin-inline:auto}
.empty-state svg{width:52px;height:52px;color:var(--mist);margin:0 auto 1.6rem}
.empty-state h2{font-size:1.35rem;font-weight:300;color:var(--ink)}
.empty-state p{margin-top:.9rem;font-size:.93rem;font-weight:300;color:var(--body-c);line-height:1.85}
.empty-state .btn{margin-top:1.8rem}
/* ---------- checkout progress ---------- */
.co-steps{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.4rem}
.co-steps li{display:flex;align-items:center;gap:.6em;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,241,249,.5)}
.co-steps li i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(233,241,249,.3);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:.66rem}
.co-steps li.done{color:rgba(233,241,249,.8)}
.co-steps li.done i{background:rgba(212,175,94,.2);border-color:var(--gold-2);color:var(--gold-2)}
.co-steps li.current{color:#fff}
.co-steps li.current i{background:var(--gold-2);border-color:var(--gold-2);color:var(--navy);font-weight:600}
/* ---------- order received ---------- */
.order-received{background:var(--white);padding-block:clamp(52px,7vw,88px)}
.or-badge{width:74px;height:74px;border-radius:50%;background:#EAF3EA;display:flex;align-items:center;justify-content:center;margin:0 auto 1.8rem}
.or-badge svg{width:34px;height:34px;color:#1B7A4B}
.woocommerce-order-overview{
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line-soft);
border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;margin-top:2.4rem;
}
.woocommerce-order-overview li{background:var(--white);padding:1.4rem 1.2rem;text-align:center}
.woocommerce-order-overview .lbl{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.woocommerce-order-overview strong{display:block;margin-top:.5rem;font-size:.98rem;font-weight:500;color:var(--ink)}
/* ---------- account ---------- */
.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,3vw,2.6rem);align-items:start}
.account-card{background:var(--white);border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--sh-s);padding:clamp(1.6rem,3vw,2.4rem)}
.account-card h2{font-size:1.15rem;font-weight:400;color:var(--ink);margin-bottom:.6rem}
.account-card p.hint{font-size:.87rem;font-weight:300;color:var(--body-c);line-height:1.8;margin-bottom:1.6rem}
.form-stack{display:flex;flex-direction:column;gap:1.1rem}
.check-row{display:flex;align-items:center;gap:.6em;font-size:.85rem;font-weight:300;color:var(--body-c)}
.check-row input{accent-color:var(--blue);width:16px;height:16px}
.form-foot{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.form-foot a{font-size:.82rem;color:var(--blue);font-weight:300}
.form-foot a:hover{color:var(--gold)}
/* ---------- about / content pages ---------- */
.rich{background:var(--white);padding-block:clamp(56px,8vw,110px)}
.rich-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.4rem,6vw,6rem);align-items:start}
.rich-body p{font-size:1rem;font-weight:300;line-height:1.95;color:var(--body-c)}
.rich-body p+p{margin-top:1.3rem}
.rich-body h3{margin-top:2.2rem;font-size:1.08rem;font-weight:500;color:var(--ink);letter-spacing:.01em}
.rich-body h3+p{margin-top:.8rem}
.pull{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.6;color:var(--blue);
border-left:2px solid var(--gold);padding-left:1.5rem;margin:2.2rem 0}
.tick-list{margin-top:1.5rem;display:flex;flex-direction:column;gap:.9rem}
.tick-list li{display:flex;gap:.9rem;align-items:flex-start;font-size:.95rem;font-weight:300;line-height:1.8;color:var(--body-c)}
.tick-list svg{width:19px;height:19px;color:var(--gold);flex-shrink:0;margin-top:.32rem}
.figure-frame{position:relative}
.figure-frame::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid rgba(180,141,51,.42);border-radius:14px;pointer-events:none}
.figure-frame img{width:100%;border-radius:14px;position:relative;aspect-ratio:4/5;object-fit:cover}
.figure-frame figcaption{margin-top:1.4rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
/* ---------- FAQ accordion ---------- */
.faq-wrap{background:var(--white);padding-block:clamp(56px,8vw,104px)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2.4rem,5vw,5rem);align-items:start}
.faq-side{position:sticky;top:120px}
.faq-group+.faq-group{margin-top:2.8rem}
.faq-group>h2{font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-q{
width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;text-align:left;
padding:1.3rem 0;font-size:1rem;font-weight:400;color:var(--ink);transition:color .3s ease;
}
.faq-q:hover{color:var(--blue)}
.faq-q .ic{flex-shrink:0;width:22px;height:22px;position:relative;margin-top:.25rem}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;background:var(--gold);transition:transform .4s var(--ease),opacity .3s ease}
.faq-q .ic::before{top:10px;left:2px;width:18px;height:1.5px}
.faq-q .ic::after{top:1px;left:10.5px;width:1.5px;height:20px}
.faq-item.open .faq-q .ic::after{transform:rotate(90deg);opacity:0}
.faq-a{overflow:hidden;max-height:0;transition:max-height .5s var(--ease)}
.faq-a-in{padding:0 0 1.5rem;font-size:.94rem;font-weight:300;line-height:1.9;color:var(--body-c);max-width:56ch}
.faq-a-in a{color:var(--blue);border-bottom:1px solid rgba(30,90,165,.35)}
.faq-a-in p+p{margin-top:.9rem}
/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.4rem,5vw,5rem);align-items:start}
.contact-cards{display:flex;flex-direction:column;gap:1rem}
.contact-card{
display:flex;gap:1.1rem;align-items:flex-start;background:var(--white);border:1px solid var(--line-soft);
border-radius:12px;padding:1.4rem 1.5rem;box-shadow:var(--sh-s);
transition:transform .45s var(--ease),box-shadow .45s ease,border-color .45s ease;
}
.contact-card:hover{transform:translateY(-3px);box-shadow:var(--sh-m);border-color:rgba(180,141,51,.4)}
.contact-card svg{width:26px;height:26px;color:var(--blue);flex-shrink:0;margin-top:.15rem}
.contact-card h3{font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.contact-card .v{margin-top:.45rem;font-size:1rem;font-weight:400;color:var(--ink);word-break:break-word}
.contact-card .s{margin-top:.3rem;font-size:.82rem;font-weight:300;color:var(--body-c)}
.contact-form{background:var(--white);border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--sh-s);padding:clamp(1.6rem,3.5vw,2.8rem)}
/* ---------- policy pages ---------- */
.policy{background:var(--white);padding-block:clamp(52px,7vw,96px)}
.policy-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.policy-nav{position:sticky;top:120px}
.policy-nav h3{font-size:.66rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.policy-nav a{display:block;font-size:.88rem;font-weight:300;color:var(--body-c);padding:.5em 0;border-bottom:1px solid var(--line-soft);transition:color .3s ease,padding-left .3s ease}
.policy-nav a:hover{color:var(--blue);padding-left:.4rem}
.policy-body section+section{margin-top:2.8rem}
.policy-body h2{font-size:1.2rem;font-weight:400;color:var(--ink);scroll-margin-top:130px}
.policy-body h2 .num{color:var(--gold);font-family:var(--serif);margin-right:.5rem}
.policy-body p{margin-top:.9rem;font-size:.95rem;font-weight:300;line-height:1.9;color:var(--body-c)}
.policy-body ul{margin-top:.9rem;display:flex;flex-direction:column;gap:.6rem}
.policy-body ul li{display:flex;gap:.8rem;font-size:.95rem;font-weight:300;line-height:1.85;color:var(--body-c)}
.policy-body ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:.72rem}
/* ---------- related ---------- */
.related{background:var(--snow);border-top:1px solid var(--line-soft);padding-block:clamp(56px,7vw,96px)}
/* ---------- cart count badge ---------- */
.cart-link{position:relative}
.cart-count{
position:absolute;top:-3px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
background:var(--gold-2);color:var(--navy);font-size:.6rem;font-weight:600;
display:none;align-items:center;justify-content:center;line-height:1;
}
.cart-count.show{display:flex}
/* ---------- shop responsive ---------- */
@media (max-width:1100px){
.products{grid-template-columns:repeat(3,1fr)}
.products.cols-3{grid-template-columns:repeat(2,1fr)}
.shop-layout{grid-template-columns:1fr;gap:2rem}
.shop-side{position:static}
.cat-list{display:flex;flex-wrap:wrap;gap:.5rem}
.cat-list li+li{margin-top:0}
.cat-list a{border:1px solid var(--line);border-radius:100px;padding:.55em 1.1em;font-size:.82rem}
.side-block.hide-mob{display:none}
.checkout-layout{grid-template-columns:1fr}
.checkout-side{position:static;order:-1}
.checkout-side.is-cart{order:0}
.sp-grid{grid-template-columns:1fr;gap:2rem}
.rich-grid,.faq-grid,.contact-grid{grid-template-columns:1fr;gap:2.4rem}
.faq-side{position:static}
.policy-grid{grid-template-columns:1fr}
.policy-nav{position:static;display:none}
}
@media (max-width:820px){
.account-grid{grid-template-columns:1fr}
.shop_table{table-layout:auto}
.shop_table colgroup{display:none}
.shop_table thead{display:none}
.shop_table td{display:block;border:none;padding:.35rem 0;text-align:left !important}
.shop_table tbody tr{display:block;padding:1.2rem 0;border-bottom:1px solid var(--line-soft)}
.shop_table td[data-t]::before{content:attr(data-t) " ";font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin-right:.5em}
.shop_table td.td-item{padding-bottom:.9rem}
.shop_table td.td-remove{position:absolute;right:0;top:1.2rem;padding:0}
.shop_table tbody tr{position:relative;padding-right:40px}
}
@media (max-width:640px){
.products{grid-template-columns:repeat(2,1fr)}
.products.cols-3{grid-template-columns:repeat(2,1fr)}
.card-info{padding:1rem 1rem 1.2rem}
.card-actions{padding:0 1rem 1.1rem}
.btn-cart{font-size:.62rem;letter-spacing:.1em;padding:.9em .6em}
.btn-cart .lbl-full{display:none}
.form-row{grid-template-columns:1fr}
.shop-bar{flex-direction:column;align-items:stretch}
.shop-tools{flex-direction:column;align-items:stretch}
.search-field{min-width:0;width:100%}
.coupon{flex-direction:column;align-items:stretch}
.coupon .input-text{min-width:0;width:100%}
.coupon .btn{width:100%}
.cart-actions{flex-direction:column}
.cart-actions .btn{width:100%}
.sp-cart{flex-direction:column}
.sp-cart .btn{min-width:0;width:100%}
.qty-box{align-self:flex-start}
.woocommerce-order-overview{grid-template-columns:1fr}
.page-hero{padding-block:clamp(44px,7vw,64px)}
.co-steps{gap:.45rem 1rem}
.co-steps li{font-size:.62rem;letter-spacing:.1em}
}
@media (max-width:400px){
.products{grid-template-columns:1fr}
.products.cols-3{grid-template-columns:1fr}
}
/* ---------- ring size page ---------- */
/* ---------- ring size page ---------- */
.page-hero{position:relative;background:var(--navy);color:#F3F7FB;padding-block:clamp(64px,9vw,108px);overflow:hidden}
.page-hero::before{content:"";position:absolute;top:-60%;right:-8%;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle, rgba(212,175,94,.16) 0%, rgba(212,175,94,0) 62%);pointer-events:none}
.page-hero .eyebrow::before{background:var(--gold-2)}
.sizes{background:var(--white);padding-block:clamp(72px,9vw,118px)}
.sizes-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.sizes h2{margin-top:1.5rem}
.sizes .lead{margin-top:1.3rem;max-width:26rem}
.size-steps{margin-top:2.4rem;border-top:1px solid var(--line)}
.size-steps li{display:flex;gap:1.4rem;padding:1.35rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.size-steps .sn{font-family:var(--serif);font-size:1.55rem;color:var(--blue);line-height:1;flex-shrink:0;width:1.1em}
.size-note{margin-top:1.6rem;font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.7;color:var(--blue)}
.sizes .tlink{margin-top:1.8rem}
.size-card{
background:#fff;border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--sh-s);
padding:clamp(1.5rem,3vw,2.6rem);
display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.8rem);
}
.size-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.size-table caption{text-align:left;font-size:.62rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding-bottom:1rem}
.size-table td:first-child{font-weight:500;letter-spacing:.08em;color:var(--blue)}
.size-table td:last-child{color:var(--body-c)}
.size-table tbody tr:last-child td{border-bottom:none}
.size-table tbody tr:hover td{background:var(--snow)}
.size-cta{position:relative;background:var(--navy);color:#F3F7FB;text-align:center;padding-block:clamp(72px,9vw,110px);overflow:hidden}
.size-cta::before{content:"";position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:760px;height:760px;border-radius:50%;background:radial-gradient(circle, rgba(212,175,94,.14) 0%, rgba(212,175,94,0) 62%);pointer-events:none}
.size-cta .in{position:relative;max-width:640px;margin-inline:auto}
.size-cta h2{color:#fff;margin-top:1rem}
.size-cta p{margin:1.4rem auto 0;max-width:30rem;font-size:.95rem;font-weight:300;line-height:1.9;color:rgba(233,241,249,.7)}
.size-cta .cta-btns{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.sizes-grid{grid-template-columns:1fr;gap:2.6rem}
.size-card{grid-template-columns:1fr}
.size-cta .cta-btns .btn{width:100%;max-width:340px}
/* =========================================================================
WOOCOMMERCE NATIVE MARKUP MAPPING
The rules above were authored against WooCommerce's own class names, so
most of the store is styled with no template overrides at all. This block
maps the remaining pieces of WooCommerce's real output (which uses tables
and rows rather than the divs used in the static prototype).
========================================================================= */
/* --- notices ------------------------------------------------------------ */
.woocommerce-notices-wrapper{margin-bottom:1.6rem}
.woocommerce-error{
list-style:none;display:flex;flex-direction:column;gap:.4rem;
background:#FBEDED;border:1px solid rgba(154,59,59,.28);border-left:3px solid #9A3B3B;
border-radius:4px;padding:1.1rem 1.3rem;font-size:.88rem;font-weight:300;color:#7A2E2E;
}
.woocommerce-message{background:#EAF3EA;border-color:rgba(27,122,75,.28);border-left-color:#1B7A4B;color:#1B5F3C}
.woocommerce-info a,.woocommerce-message a,.woocommerce-error a{color:var(--blue);font-weight:500}
.woocommerce-info .button,.woocommerce-message .button{margin-left:auto}
/* --- WooCommerce buttons inherit the theme button ----------------------- */
.woocommerce .button,.wp-element-button,button.button,input.button,a.button,
button[type="submit"].button,.woocommerce-Button{
display:inline-flex;align-items:center;justify-content:center;gap:.8em;
font-family:var(--sans);font-size:.73rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
padding:1.05em 2.2em;border:1px solid var(--navy);border-radius:3px;
background:var(--navy);color:#fff;cursor:pointer;
transition:background .4s ease,color .4s ease,border-color .4s ease,transform .4s var(--ease);
}
.woocommerce .button:hover,button.button:hover,input.button:hover,a.button:hover,.woocommerce-Button:hover{
background:var(--gold-2);border-color:var(--gold-2);color:var(--navy);transform:translateY(-2px);
}
.woocommerce .button.alt,button.button.alt,.checkout-button,#place_order{
background:var(--gold-2);border-color:var(--gold-2);color:var(--navy);
}
.woocommerce .button.alt:hover,button.button.alt:hover,.checkout-button:hover,#place_order:hover{
background:var(--navy);border-color:var(--navy);color:#fff;
}
.checkout-button,#place_order{width:100%;margin-top:1.5rem}
button.button[disabled],.woocommerce .button.disabled{opacity:.5;cursor:not-allowed;transform:none}
/* --- cart page: WooCommerce uses a real table --------------------------- */
.woocommerce-cart-form__contents .product-thumbnail img{
width:76px;height:76px;object-fit:contain;background:var(--snow);
border:1px solid var(--line-soft);border-radius:8px;padding:6px;
}
.woocommerce-cart-form__contents td.product-thumbnail{width:96px}
.woocommerce-cart-form__contents td.product-name a{font-size:.94rem;color:var(--ink);font-weight:400;line-height:1.45}
.woocommerce-cart-form__contents td.product-name a:hover{color:var(--blue)}
.woocommerce-cart-form__contents .product-price,
.woocommerce-cart-form__contents .product-subtotal{font-size:.95rem;color:var(--ink)}
.woocommerce-cart-form__contents .product-subtotal{font-weight:500;color:var(--blue)}
.woocommerce-cart-form__contents td.product-remove{width:46px;text-align:right}
.woocommerce-cart-form__contents .product-remove a.remove{
width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
border-radius:50%;color:var(--mist);font-size:1.2rem;line-height:1;text-decoration:none;
transition:background .3s ease,color .3s ease;
}
.woocommerce-cart-form__contents .product-remove a.remove:hover{background:#FBEDED;color:#9A3B3B}
.woocommerce-cart-form__contents td.actions{padding-top:1.6rem}
.woocommerce-cart-form__contents td.actions .coupon{float:none;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
/* --- quantity input ----------------------------------------------------- */
.quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.quantity input.qty{
width:56px;text-align:center;border:none;font-family:inherit;font-size:.95rem;color:var(--ink);
padding:.85em 0;-moz-appearance:textfield;background:transparent;
}
.quantity input.qty::-webkit-outer-spin-button,.quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quantity input.qty:focus{outline:none}
.quantity .ccc-qty-btn{width:40px;font-size:1.1rem;color:var(--body-c);background:none;border:none;cursor:pointer;transition:background .3s ease,color .3s ease;padding:0;line-height:2.6}
.quantity .ccc-qty-btn:hover{background:var(--snow);color:var(--blue)}
/* --- cart totals (WooCommerce renders
rows) ------------------------ */
.cart_totals table.shop_table{table-layout:auto;border:none}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td{
border:none;border-bottom:1px solid var(--line-soft);padding:.72rem 0;
font-size:.9rem;font-weight:300;color:var(--body-c);text-align:left;letter-spacing:0;text-transform:none;
}
.cart_totals table.shop_table td{text-align:right;color:var(--ink);font-weight:400}
.cart_totals tr.order-total th,.cart_totals tr.order-total td{
border-bottom:none;border-top:2px solid var(--navy);padding-top:1.2rem;
}
.cart_totals tr.order-total th{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.cart_totals tr.order-total td{font-size:1.5rem;font-weight:500;color:var(--blue)}
.cart_totals tr.cart-discount td{color:#1B7A4B;font-weight:500}
.cart_totals tr.cart-discount a{font-size:.72rem;color:var(--mist)}
.cart_totals .woocommerce-shipping-methods{list-style:none;margin:0;text-align:right}
.cart_totals .woocommerce-shipping-destination{font-size:.76rem;color:var(--mist);margin-top:.4rem}
.woocommerce-shipping-calculator{margin-top:.6rem;font-size:.8rem}
.woocommerce-shipping-calculator a{color:var(--blue)}
/* --- checkout ----------------------------------------------------------- */
.woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr;gap:0}
.woocommerce-billing-fields h3,.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,#order_review_heading{
font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
padding-bottom:.9rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line-soft);
}
.woocommerce-shipping-fields,.woocommerce-additional-fields{margin-top:2.6rem}
.woocommerce form .form-row{display:flex;flex-direction:column;gap:.45rem;margin:0 0 1rem}
.woocommerce form .form-row label{font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--body-c)}
.woocommerce form .form-row .required{color:#9A3B3B;text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single{
font-family:inherit;font-size:.88rem;font-weight:300;color:var(--ink);background:var(--white);
border:1px solid var(--line);border-radius:4px;padding:.85em 1em;width:100%;height:auto;
transition:border-color .3s ease,box-shadow .3s ease;
}
.woocommerce form .form-row textarea{min-height:96px;resize:vertical}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,90,165,.1)}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:inherit;padding:0;color:var(--ink)}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:8px}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%}
@media (min-width:641px){
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:calc(50% - .6rem);display:inline-flex;vertical-align:top}
.woocommerce form .form-row-first{margin-right:1.2rem}
}
#order_review{margin-top:0}
#order_review table.shop_table{table-layout:auto}
#order_review table.shop_table th,#order_review table.shop_table td{
border:none;border-bottom:1px solid var(--line-soft);padding:.72rem 0;font-size:.9rem;
font-weight:300;color:var(--body-c);text-align:left;letter-spacing:0;text-transform:none;
}
#order_review table.shop_table td{text-align:right;color:var(--ink)}
#order_review table.shop_table thead th{
font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
#order_review tr.order-total th{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-bottom:none;border-top:2px solid var(--navy);padding-top:1.2rem}
#order_review tr.order-total td{font-size:1.5rem;font-weight:500;color:var(--blue);border-bottom:none;border-top:2px solid var(--navy);padding-top:1.2rem}
#order_review .product-name{color:var(--ink);font-weight:400}
#order_review .product-quantity{color:var(--mist);font-weight:300}
.woocommerce-checkout #payment{background:transparent;border-radius:0;margin-top:1.6rem}
.woocommerce-checkout #payment ul.payment_methods{border:none;padding:0;display:flex;flex-direction:column;gap:.8rem}
.woocommerce-checkout #payment div.form-row{padding:0}
.woocommerce-checkout #payment .payment_box{
background:transparent;padding:0 1.2rem 1.1rem 3.5rem;margin:0;
font-size:.83rem;font-weight:300;line-height:1.75;color:var(--body-c);
}
.woocommerce-checkout #payment .payment_box::before{display:none}
.woocommerce-checkout #payment ul.payment_methods li{
border:1px solid var(--line);border-radius:8px;list-style:none;padding:0;
transition:border-color .3s ease,background .3s ease;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked){border-color:var(--blue);background:var(--snow)}
.woocommerce-checkout #payment ul.payment_methods li label{
display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.2rem;cursor:pointer;
font-size:.9rem;font-weight:400;color:var(--ink);
}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio]{accent-color:var(--blue);width:17px;height:17px;flex-shrink:0;margin:0}
.woocommerce-checkout #payment ul.payment_methods li img{max-height:26px;width:auto;margin-left:auto}
.woocommerce-terms-and-conditions-wrapper{margin-top:1.4rem;font-size:.85rem;font-weight:300;color:var(--body-c)}
.woocommerce-privacy-policy-text p{font-size:.8rem;font-weight:300;line-height:1.8;color:var(--mist)}
/* --- shipping method radio list ---------------------------------------- */
ul#shipping_method{list-style:none;margin:0;display:flex;flex-direction:column;gap:.5rem;text-align:left}
ul#shipping_method li{display:flex;align-items:center;gap:.7rem;font-size:.88rem;color:var(--ink)}
ul#shipping_method input[type=radio]{accent-color:var(--blue);width:16px;height:16px}
ul#shipping_method label{font-weight:300}
ul#shipping_method .amount{font-weight:500;color:var(--ink)}
/* --- single product ----------------------------------------------------- */
.single-product div.product{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2.2rem,5vw,4.5rem);align-items:start}
.single-product div.product .woocommerce-product-gallery{
background:var(--snow);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;
}
.single-product div.product .woocommerce-product-gallery__image img{border-radius:12px}
.single-product div.product .product_title{
font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);font-weight:300;line-height:1.25;color:var(--ink);margin-top:.6rem;
}
.single-product div.product p.price,.single-product div.product span.price{
font-size:1.7rem;font-weight:500;color:var(--blue);display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem;
}
.single-product div.product p.price del{font-size:1.05rem;color:var(--mist);font-weight:300;opacity:1}
.single-product div.product p.price ins{text-decoration:none}
.single-product div.product .woocommerce-product-details__short-description{
margin-top:1.5rem;font-size:.95rem;font-weight:300;line-height:1.9;color:var(--body-c);
}
.single-product div.product form.cart{margin-top:1.9rem;display:flex;gap:.8rem;flex-wrap:wrap;align-items:stretch}
.single-product div.product form.cart .button{flex:1;min-width:190px}
.single-product div.product .product_meta{
margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line-soft);
font-size:.82rem;font-weight:300;color:var(--body-c);display:flex;flex-direction:column;gap:.55rem;
}
.single-product div.product .product_meta > span{display:block}
.single-product div.product .product_meta .sku_wrapper,
.single-product div.product .product_meta .posted_in,
.single-product div.product .product_meta .tagged_as{font-size:.82rem}
.single-product div.product .product_meta a{color:var(--blue)}
.single-product div.product .stock.in-stock{color:#1B7A4B;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-top:1.3rem}
.single-product div.product .stock.out-of-stock{color:#9A3B3B;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-top:1.3rem}
.woocommerce-tabs{grid-column:1/-1;margin-top:clamp(2.5rem,5vw,4rem)}
.woocommerce-tabs ul.tabs{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--line);margin:0 0 2rem;padding:0}
.woocommerce-tabs ul.tabs li{margin:0}
.woocommerce-tabs ul.tabs li a{
display:block;padding:.9em 1.4em;font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:var(--body-c);border-bottom:2px solid transparent;transition:color .3s ease,border-color .3s ease;
}
.woocommerce-tabs ul.tabs li.active a,.woocommerce-tabs ul.tabs li a:hover{color:var(--blue);border-bottom-color:var(--gold)}
.woocommerce-tabs .panel h2{font-size:1.15rem;font-weight:400;color:var(--ink);margin-bottom:1rem}
.woocommerce-tabs .panel p{font-size:.95rem;font-weight:300;line-height:1.9;color:var(--body-c)}
.woocommerce-tabs table.shop_attributes th{text-transform:none;letter-spacing:0;color:var(--ink);font-weight:500;font-size:.88rem}
.woocommerce-tabs table.shop_attributes td{font-weight:300;color:var(--body-c)}
.related.products,.up-sells.products,.cross-sells{grid-column:1/-1;margin-top:clamp(3rem,6vw,5rem)}
.related.products > h2,.up-sells > h2,.cross-sells > h2{
font-size:var(--fs-h2);font-weight:300;color:var(--ink);margin-bottom:2rem;
}
@media (max-width:900px){ .single-product div.product{grid-template-columns:1fr} }
/* --- archive / shop ----------------------------------------------------- */
.woocommerce-products-header{display:none}
ul.products{margin:0;padding:0;list-style:none}
.woocommerce-ordering select{
font-family:inherit;font-size:.82rem;font-weight:300;color:var(--ink);background:var(--white);
border:1px solid var(--line);border-radius:4px;padding:.72em 2.2em .72em 1em;cursor:pointer;
}
.woocommerce-pagination{margin-top:3rem;text-align:center}
.woocommerce-pagination ul.page-numbers{list-style:none;display:inline-flex;gap:.4rem;border:none;margin:0;padding:0}
.woocommerce-pagination ul.page-numbers li{border:none;margin:0}
.woocommerce-pagination .page-numbers{
display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 .8em;
border:1px solid var(--line);border-radius:4px;font-size:.85rem;color:var(--body-c);
transition:all .3s ease;background:var(--white);
}
.woocommerce-pagination .page-numbers.current,.woocommerce-pagination .page-numbers:hover{
background:var(--navy);border-color:var(--navy);color:#fff;
}
.woocommerce .woocommerce-result-count{margin:0}
/* --- my account --------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line-soft)}
.woocommerce-MyAccount-navigation li a{
display:block;padding:.85em .2em;font-size:.88rem;font-weight:300;color:var(--body-c);
transition:color .3s ease,padding-left .3s ease;
}
.woocommerce-MyAccount-navigation li a:hover{color:var(--blue);padding-left:.4rem}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--blue);font-weight:500}
.woocommerce-MyAccount-content p{font-size:.95rem;font-weight:300;line-height:1.9;color:var(--body-c)}
@media (min-width:901px){
.woocommerce-account .woocommerce{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
}
/* --- YITH wishlist / compare buttons stay on-brand ---------------------- */
.yith-wcwl-add-to-wishlist a,.woocommerce a.compare{
font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--body-c);
transition:color .3s ease;
}
.yith-wcwl-add-to-wishlist a:hover,.woocommerce a.compare:hover{color:var(--gold)}
/* --- Elementor: let full-width sections breathe ------------------------- */
.elementor-section.elementor-section-boxed > .elementor-container{max-width:1360px}
/* --- header search panel (theme) ---------------------------------------- */
.head-search{border-top:1px solid var(--line-soft);background:var(--white);padding-block:1.4rem}
.head-search-form{display:flex;gap:.7rem;align-items:center;position:relative}
.head-search-form > svg{position:absolute;left:1rem;width:16px;height:16px;color:var(--mist);pointer-events:none}
.head-search-form .search-field{flex:1;padding-left:2.6rem;min-width:0}
.head-search-form .btn{flex-shrink:0}
@media (max-width:640px){ .head-search-form{flex-direction:column;align-items:stretch} .head-search-form > svg{top:1.05rem} .head-search-form .btn{width:100%} }
/* --- accessibility ------------------------------------------------------- */
.screen-reader-text{
border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important;
}
.skip-link{
position:absolute;left:-9999px;top:0;z-index:100000;background:var(--navy);color:#fff;
padding:1em 1.6em;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
}
.skip-link:focus{left:0}
/* --- submenus in the primary nav ---------------------------------------- */
.nav-links{position:relative}
.nav-links .sub-menu{
position:absolute;top:100%;left:0;min-width:220px;background:var(--white);
border:1px solid var(--line-soft);border-radius:6px;box-shadow:var(--sh-m);
padding:.6rem 0;display:none;flex-direction:column;z-index:20;
}
.nav-links .sub-menu a{padding:.6em 1.2em;font-size:.72rem}
.nav-links .sub-menu a::after{display:none}
/* =========================================================================
LIVE-SITE CONFLICT FIXES
Diagnosed against the running site. WooCommerce ships
.woocommerce img, .woocommerce-page img { height:auto; max-width:100% }
(specificity 0,1,1) and Shop Addon Pro ships a bare `img { max-width }`.
On any WooCommerce page those beat single-class rules such as .logo-img
(0,1,0) and the logo rendered at its natural 1129px height.
Fixed by raising specificity with a parent class rather than !important,
so the rules stay overridable and maintainable.
========================================================================= */
.site-head .logo-img{height:72px;width:auto;display:block;max-width:none}
.card .card-img img{height:100%;width:100%;object-fit:contain}
.cats-grid .cat-card img{height:100%;width:100%;object-fit:cover}
.hero .hero-bg .slide img{height:100%;width:100%;object-fit:cover}
.rich .figure-frame img{height:auto;width:100%;aspect-ratio:4/5;object-fit:cover}
.cart-item > a img,.woocommerce-cart-form__contents .product-thumbnail img{height:76px;width:76px;object-fit:contain}
.mini-items .mini-item img{height:54px;width:54px;object-fit:contain}
.single-product div.product .woocommerce-product-gallery img{height:auto;width:100%}
@media (max-width:1220px){ .site-head .logo-img{height:64px} }
@media (max-width:980px){ .site-head .logo-img{height:66px} }
@media (max-width:640px){ .site-head .logo-img{height:62px} }
@media (max-width:400px){ .site-head .logo-img{height:60px} }
/* -------------------------------------------------------------------------
Header must never widen the page, whatever menu is assigned to it.
The design is built for roughly six top-level items; if a longer menu is
assigned the nav now scrolls within itself instead of pushing the page out.
---------------------------------------------------------------------- */
.head-in{min-width:0}
.head-in > .brand,.head-in > .head-actions{flex-shrink:0}
.nav-links{
flex:1 1 auto;min-width:0;flex-wrap:nowrap;
overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
justify-content:center;
}
.nav-links::-webkit-scrollbar{display:none}
/* Final safety net: nothing may scroll the document sideways.
`clip` rather than `hidden` so position:sticky keeps working. */
html,body{overflow-x:clip;max-width:100%}
/* =========================================================================
WOOCOMMERCE LAYOUT CONFLICTS (diagnosed live on the shop archive)
========================================================================= */
/* WooCommerce's own float grid sets li.product{float:left;width:22.05%},
which collapsed the CSS-grid cards to 43px wide. Neutralise it. */
.woocommerce ul.products,.woocommerce-page ul.products{margin:0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product-category,.woocommerce-page ul.products li.product-category,
/* Below 768px WooCommerce re-floats the cards from a selector scoped with
#content, so the same depth is needed to keep the grid intact on phones. */
.woocommerce #content ul.products li.product,.woocommerce-page #content ul.products li.product,
.woocommerce #content ul.products li.product-category,.woocommerce-page #content ul.products li.product-category{
width:auto;float:none;margin:0;clear:none;
}
.woocommerce ul.products li.product a img,.woocommerce-page ul.products li.product a img{margin:0;box-shadow:none}
/* WooCommerce sets its own price colour at 0,4,0, which beat
".card-info .price" (0,2,0). Match its depth instead of using !important. */
.woocommerce ul.products li.product .card-info .price,
.woocommerce-page ul.products li.product .card-info .price{color:var(--blue)}
.woocommerce ul.products li.product .card-info .price del,
.woocommerce-page ul.products li.product .card-info .price del{color:var(--mist);font-weight:300}
.woocommerce ul.products li.product .card-info .price ins,
.woocommerce-page ul.products li.product .card-info .price ins{color:var(--blue);text-decoration:none;background:none}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--blue)}
/* Long category names stay to two lines on a card. */
.card-info .spec{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* YITH Compare / Wishlist sit beside Add to cart and squash it. Stack them. */
.card-actions{flex-wrap:wrap;gap:.5rem}
.card-actions .btn-cart{flex:1 1 100%;white-space:nowrap}
.card-actions .compare,.card-actions .yith-wcwl-add-to-wishlist{
flex:1 1 100%;display:block;text-align:center;margin:0;
font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
padding:.75em 1em;border:1px solid var(--line);border-radius:3px;color:var(--body-c);
transition:border-color .3s ease,color .3s ease;
}
.card-actions .compare:hover{border-color:var(--gold);color:var(--gold)}
/* Subcategory tiles, when a category archive shows subcategories. */
ul.products li.product-category{background:#fff;border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;box-shadow:var(--sh-s);transition:transform .5s var(--ease),box-shadow .5s ease}
ul.products li.product-category:hover{transform:translateY(-5px);box-shadow:var(--sh-m)}
ul.products li.product-category > a{display:block;text-decoration:none}
ul.products li.product-category img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;margin:0}
ul.products li.product-category h2,ul.products li.product-category .woocommerce-loop-category__title{font-size:.95rem;font-weight:400;line-height:1.45;color:var(--ink);padding:1.2rem 1.3rem .3rem;margin:0}
ul.products li.product-category .count{display:block;padding:0 1.3rem 1.3rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);background:none}
/* ========================================================================== *
* WooCommerce core-layout reconciliation
* WooCommerce still ships a float-based grid whose selectors are scoped with
* #content (e.g. ".woocommerce #content div.product div.images"). Those beat a
* plain class selector on ID count alone, so the rules below match that depth
* rather than reaching for !important.
* ========================================================================== */
/* Single product: undo the 48% floated columns so the theme grid can place
the gallery and summary in their tracks. */
.woocommerce #content div.product div.images.woocommerce-product-gallery,
.woocommerce-page #content div.product div.images.woocommerce-product-gallery,
.woocommerce #content div.product div.summary.entry-summary,
.woocommerce-page #content div.product div.summary.entry-summary{width:auto;float:none;margin:0}
.woocommerce #content div.product .woocommerce-tabs,
.woocommerce #content div.product .related,
.woocommerce #content div.product .up-sells,
.woocommerce #content div.product .cross-sells{clear:both;width:auto;float:none}
.woocommerce div.product .woocommerce-product-gallery{overflow:hidden}
.woocommerce div.product .woocommerce-product-gallery img.zoomImg{max-width:none}
/* The primary product CTA keeps the brand gold rather than WooCommerce purple. */
.woocommerce #content div.product form.cart button.single_add_to_cart_button,
.woocommerce #content div.product form.cart button.single_add_to_cart_button.alt{
background-color:var(--gold-2);border-color:var(--gold-2);color:#fff;
}
.woocommerce #content div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce #content div.product form.cart button.single_add_to_cart_button.alt:hover{
background-color:var(--gold);border-color:var(--gold);color:#fff;
}
/* Related / up-sell / cross-sell wrappers also carry the .products class, which
would otherwise turn the whole section into the product grid. Only the inner
ul.products is the grid. */
.woocommerce section.related.products,
.woocommerce section.up-sells.products,
.woocommerce section.cross-sells.products,
.woocommerce div.related.products,
.woocommerce div.up-sells.products,
.woocommerce div.cross-sells.products{display:block}
/* My account: WooCommerce's clearfix pseudo-elements become grid items inside
the theme's two-column grid and displaced the navigation. */
@media (min-width:901px){
.woocommerce-account #content .woocommerce::before,
.woocommerce-account #content .woocommerce::after{content:none}
.woocommerce-account #content .woocommerce-MyAccount-navigation,
.woocommerce-account #content .woocommerce-MyAccount-content{width:auto;float:none;margin:0}
}
/* Price filter widget: WooCommerce's default mauve is off-brand. */
.price_slider_wrapper .ui-slider .ui-slider-range{background-color:var(--blue)}
.price_slider_wrapper .ui-slider .ui-slider-handle{background-color:var(--gold-2);border:none}
.price_slider_wrapper .ui-slider{background-color:var(--line)}