/** Shopify CDN: Minification failed
Line 5758:0 Unexpected "}"
**/
/* =============================================
JOHN WHITE SHOES — v3 WORLD CLASS
Antiqued Brass / Heritage / Mobile-First
============================================= */
:root {
--black: #FAF7F2;
--black-l: #F5F0E8;
--char: #EDE8E0;
--graph: #E5DFD5;
--bdr: #DDD7CD;
--bdr2: #D0C8BE;
--ac: #7A6548;
--ac-l: #8B7355;
--ac-d: #5F4E35;
--ac-m: rgba(122,101,72,.10);
--ac-g: rgba(122,101,72,.06);
--cr: #2C2420;
--warm: #3A332E;
--sm: #564E47;
--mt: #5D554E;
--lt: #D1C9BE;
--fd: 'Playfair Display', Georgia, serif;
--fb: 'Cormorant Garamond', Garamond, serif;
--fs: 'Outfit', sans-serif;
--e: cubic-bezier(.16,1,.3,1);
--e2: cubic-bezier(.25,1,.5,1);
--nh: 60px;
--ah: 34px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
*:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.skip-link{position:absolute;top:-100%;left:1rem;background:var(--ac);color:var(--cr);padding:.6rem 1.2rem;font-family:var(--fs);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;z-index:10000;text-decoration:none;transition:top .2s}.skip-link:focus{top:.5rem}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}.marq-t{animation:none !important}.cur{display:none !important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{scroll-behavior:smooth;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ac-d) var(--black)}
body{font-family:var(--fb);background:var(--black);color:var(--cr);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.65}
::selection{background:var(--ac);color:var(--cr)}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:var(--black)}::-webkit-scrollbar-thumb{background:var(--ac-d);border-radius:2px}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;background:none;font-family:inherit}ul{list-style:none}
/* ANNOUNCEMENT */
.ann{height:var(--ah);background:var(--char);border-bottom:1px solid var(--bdr);display:flex;align-items:center;overflow:hidden;position:relative;z-index:1001;transition:height .35s var(--e),opacity .35s}
.ann-t{display:flex;gap:2.5rem;animation:annS 30s linear infinite;white-space:nowrap}
.ann-i{font-family:var(--fs);font-size:.58rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--sm);display:flex;align-items:center;gap:.45rem}
.ann-i svg{width:12px;height:12px;stroke:var(--ac);fill:none;stroke-width:1.5}
@keyframes annS{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* NAV */
.nw{position:fixed;top:0;left:0;right:0;z-index:1000}
.nw.sc .ann{height:0;opacity:0;border:none}
nav{height:var(--nh);padding:0 clamp(1rem,3vw,2.5rem);display:flex;align-items:center;justify-content:space-between;background:rgba(9,9,9,.55);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-bottom:1px solid rgba(122,101,72,.04);transition:all .45s var(--e)}
.nw.sc nav{background:rgba(9,9,9,.96);border-bottom-color:rgba(122,101,72,.1)}
.nl{font-family:var(--fd);font-size:1.1rem;font-weight:500;letter-spacing:.05em;flex-shrink:0}.nl em{color:var(--ac);font-style:normal}
.nc{display:flex;align-items:center;height:100%}
.ni{position:relative;height:100%;display:flex;align-items:center;padding:0 1.1rem}
.ni>a{font-family:var(--fs);font-size:.6rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:.3rem;height:100%;color:var(--cr);transition:color .3s}
.ni>a:hover{color:var(--ac-l)}
.ni>a .chv{width:7px;height:7px;stroke:var(--sm);fill:none;stroke-width:2;transition:transform .3s,stroke .3s}
.ni:hover>a .chv{transform:rotate(180deg);stroke:var(--ac)}
.ni>a::after{content:'';position:absolute;bottom:0;left:1.1rem;right:1.1rem;height:1.5px;background:var(--ac);transform:scaleX(0);transition:transform .4s var(--e);transform-origin:left}
.ni:hover>a::after{transform:scaleX(1)}
/* Mega menu */
.mm{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);width:700px;padding:2.2rem 2.5rem;background:#FAF7F2;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid #DDD7CD;border-top:2px solid var(--ac);box-shadow:0 16px 48px rgba(44,36,32,.12),0 4px 12px rgba(44,36,32,.06);opacity:0;visibility:hidden;transition:all .3s var(--e);pointer-events:none}
.ni:hover .mm{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:all}
.mg{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:2rem}
.mc-h{display:block;font-family:var(--fs);font-size:.68rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--ac);margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:1px solid #DDD7CD}
.mc a{display:block;font-family:var(--fb);font-size:1rem;font-weight:400;color:#2C2420;padding:.35rem 0;transition:color .25s,padding-left .3s}
.mc a:hover{color:var(--ac);padding-left:.35rem}
.mf{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid #DDD7CD}
.mf img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)}
.mf:hover img{transform:scale(1.04)}
.mf-l{position:absolute;bottom:0;left:0;right:0;padding:.9rem;background:linear-gradient(to top,rgba(44,36,32,.85),transparent)}
.mf-l span{font-family:var(--fs);font-size:.62rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:#C4A96C}
.mf-l p{font-family:var(--fd);font-size:.9rem;color:#FAF7F2;margin-top:.15rem}
/* Nav right */
.nr{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.nav-cta{font-family:var(--fs);font-size:.55rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--cr);background:var(--ac);padding:.5rem 1.3rem;transition:all .35s var(--e)}
.nav-cta:hover{background:var(--ac-l);transform:translateY(-1px)}
.nic{display:flex;align-items:center;justify-content:center;position:relative}
.nic svg{width:17px;height:17px;stroke:var(--cr);fill:none;stroke-width:1.5;transition:stroke .3s}
.nic:hover svg{stroke:var(--ac)}
.cc{position:absolute;top:-5px;right:-7px;width:14px;height:14px;border-radius:50%;background:var(--ac);color:var(--cr);font-family:var(--fs);font-size:.46rem;font-weight:500;display:flex;align-items:center;justify-content:center}
.cc.bounce{animation:cartBounce .5s var(--e)}
@keyframes cartBounce{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
/* Mobile nav */
.nt{display:none;flex-direction:column;gap:5px;padding:4px;z-index:1002;cursor:pointer}
.nt span{width:19px;height:1.5px;background:var(--cr);display:block;transition:all .3s var(--e)}
.nt.act span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}.nt.act span:nth-child(2){opacity:0}.nt.act span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}
.mob{display:none;position:fixed;inset:0;background:rgba(9,9,9,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:999;padding:calc(var(--nh) + var(--ah) + 1.5rem) 1.5rem 1.5rem;overflow-y:auto;flex-direction:column;gap:.3rem}
.mob.open{display:flex}
.mob a{font-family:var(--fd);font-size:1.5rem;font-weight:400;padding:.65rem 0;color:var(--cr);border-bottom:1px solid var(--bdr);display:block;opacity:0;transform:translateY(15px);transition:opacity .4s,transform .4s}
.mob.open a{opacity:1;transform:translateY(0)}
.mob a:nth-child(1){transition-delay:.1s}.mob a:nth-child(2){transition-delay:.15s}.mob a:nth-child(3){transition-delay:.2s}.mob a:nth-child(4){transition-delay:.25s}.mob a:nth-child(5){transition-delay:.3s}
.mob-sub{padding-left:1rem}.mob-sub a{font-family:var(--fb);font-size:1rem;font-weight:300;color:var(--sm);border-bottom-color:var(--bdr)}
@media(max-width:900px){.nc{display:none}.nt{display:flex}.nav-cta{display:none}nav{padding:0 .8rem}}
/* BUTTONS */
.btn-p{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--fs);font-size:.58rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;background:var(--ac);color:var(--cr);padding:.75rem 1.8rem;transition:all .35s var(--e);position:relative;overflow:hidden}
.btn-p::before{content:'';position:absolute;inset:0;background:var(--ac-l);transform:translateY(101%);transition:transform .4s var(--e)}.btn-p:hover::before{transform:translateY(0)}
.btn-p span,.btn-p .ar{position:relative;z-index:1}.btn-p .ar{transition:transform .3s}.btn-p:hover .ar{transform:translateX(4px)}
.btn-g{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--fs);font-size:.58rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--cr);border:1px solid rgba(122,101,72,.3);padding:.75rem 1.8rem;position:relative;overflow:hidden;transition:all .4s var(--e)}
.btn-g::before{content:'';position:absolute;inset:0;background:var(--ac);transform:translateX(-101%);transition:transform .4s var(--e)}.btn-g:hover::before{transform:translateX(0)}.btn-g:hover{border-color:var(--ac)}
.btn-g span{position:relative;z-index:1}
/* UTILITIES */
.slabel{font-family:var(--fs);font-size:.54rem;font-weight:300;letter-spacing:.45em;text-transform:uppercase;color:var(--ac);display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.slabel::before{content:'';width:22px;height:1px;background:var(--ac-d)}
.va{font-family:var(--fs);font-size:.58rem;font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);display:flex;align-items:center;gap:.4rem;transition:gap .35s var(--e)}.va:hover{gap:.8rem}
/* SCROLL REVEAL */
.rv{opacity:0;transform:translateY(35px);transition:opacity .7s var(--e),transform .7s var(--e)}.rv.vis{opacity:1;transform:translateY(0)}
.rvl{opacity:0;transform:translateX(-35px);transition:opacity .7s var(--e),transform .7s var(--e)}.rvl.vis{opacity:1;transform:translateX(0)}
.rvr{opacity:0;transform:translateX(35px);transition:opacity .7s var(--e),transform .7s var(--e)}.rvr.vis{opacity:1;transform:translateX(0)}
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}[data-d="5"]{transition-delay:.4s}[data-d="6"]{transition-delay:.48s}
/* BREADCRUMB */
.bread{padding:.7rem clamp(1.2rem,3.5vw,4.5rem);font-family:var(--fs);font-size:.56rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--sm);margin-top:calc(var(--nh) + var(--ah));background:var(--black-l);border-bottom:1px solid var(--bdr)}
.bread a{color:var(--sm);transition:color .25s}.bread a:hover{color:var(--ac)}
.bread span{margin:0 .4rem;color:var(--bdr2)}
/* MARQUEE */
.marq{padding:1rem 0;overflow:hidden;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);background:var(--black)}
.marq-t{display:flex;gap:2rem;animation:marqA 35s linear infinite;white-space:nowrap;width:max-content}
.marq-i{font-family:var(--fd);font-size:clamp(.8rem,1.1vw,1rem);font-weight:400;color:var(--bdr2);display:flex;align-items:center;gap:2rem}
.marq-d{width:3px;height:3px;background:var(--ac-d);border-radius:50%}
@keyframes marqA{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* SOCIAL PROOF */
.sp{padding:1.5rem clamp(1.2rem,3.5vw,3.5rem);background:var(--char);border-bottom:1px solid var(--bdr)}
.sp-in{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,3.5vw,3.5rem);flex-wrap:wrap}
.sp-r{display:flex;align-items:center;gap:.35rem}
.sp-r .stars{display:flex;gap:1px}.sp-r .stars svg{width:12px;height:12px;fill:var(--ac)}
.sp-r span{font-family:var(--fd);font-size:.95rem;font-weight:500}
.sp-l{font-family:var(--fs);font-size:.54rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--sm);margin-top:.25rem;text-align:center}
/* AS FEATURED IN */
.afi{padding:clamp(2.5rem,4.5vw,3.5rem) clamp(1.2rem,3.5vw,3.5rem);background:var(--black);border-bottom:1px solid var(--bdr);position:relative;overflow:hidden}
.afi::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(122,101,72,.035),transparent 55%),radial-gradient(ellipse at 80% 50%,rgba(122,101,72,.025),transparent 55%);pointer-events:none}
.afi-line{width:50px;height:1px;background:var(--ac);margin:0 auto 1.2rem;opacity:.5}
.afi-h{font-family:var(--fd);font-size:.72rem;font-weight:400;letter-spacing:.4em;text-transform:uppercase;color:var(--ac);text-align:center;margin-bottom:1.6rem;position:relative}
.afi-row{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;position:relative}
.afi-item{display:flex;align-items:center;justify-content:center;padding:.6rem clamp(1.5rem,2.8vw,2.5rem);position:relative;transition:opacity .3s}
.afi-item:not(:last-child)::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);height:20px;width:1px;background:rgba(122,101,72,.18)}
.afi-item:hover{opacity:.7}
.afi-t{font-family:var(--fd);font-size:clamp(.78rem,1.1vw,.92rem);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,235,227,.7);white-space:nowrap;user-select:none;text-align:center;line-height:1.3}
.afi-t span{display:block;font-family:var(--fd);font-size:.6rem;font-weight:300;font-style:italic;letter-spacing:.05em;text-transform:none;color:rgba(240,235,227,.55);margin-top:.15rem}
.afi-line-b{width:32px;height:1px;background:var(--ac);margin:1.4rem auto 0;opacity:.25}
@media(max-width:700px){.afi-item:not(:last-child)::after{display:none}.afi-row{gap:.3rem}}
/* NEWSLETTER */
.nl-sec{padding:clamp(3.5rem,7vw,6rem) clamp(1.2rem,3.5vw,4.5rem);background:var(--black-l);text-align:center;position:relative;overflow:hidden}
.nl-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,var(--ac-g),transparent 55%);pointer-events:none}
.nl-in{position:relative;max-width:480px;margin:0 auto}
.nl-sec h2{font-family:var(--fd);font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:400;line-height:1.2;margin-bottom:.6rem}
.nl-sec h2 em{color:var(--ac);font-style:italic}
.nl-sec p{font-family:var(--fb);font-size:.92rem;font-weight:300;color:var(--sm);line-height:1.8;margin-bottom:1.6rem}
.nl-f{display:flex;max-width:400px;margin:0 auto}
.nl-f input{flex:1;background:transparent;border:1px solid var(--bdr);border-right:none;padding:.7rem .9rem;font-family:var(--fb);font-size:.88rem;color:var(--cr);outline:none;transition:border-color .3s}
.nl-f input::placeholder{color:var(--mt)}.nl-f input:focus{border-color:var(--ac)}
.nl-f button{background:var(--ac);color:var(--cr);border:1px solid var(--ac);font-family:var(--fs);font-size:.54rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;padding:.7rem 1.3rem;transition:background .3s;white-space:nowrap}
.nl-f button:hover{background:var(--ac-l)}
@media(max-width:480px){.nl-f{flex-direction:column}.nl-f input{border-right:1px solid var(--bdr);border-bottom:none}}
/* FOOTER */
footer{padding:clamp(2.5rem,5vw,4rem) clamp(1.2rem,3.5vw,4.5rem) 1.2rem;background:var(--black);border-top:1px solid var(--bdr)}
.ft-in{max-width:1100px;margin:0 auto}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:1.8rem;padding-bottom:2.2rem;border-bottom:1px solid var(--bdr)}
.ft-brand h3{font-family:var(--fd);font-size:1.1rem;font-weight:500;margin-bottom:.5rem}.ft-brand h3 em{color:var(--ac);font-style:normal}
.ft-brand p{font-family:var(--fb);font-size:.82rem;font-weight:300;line-height:1.8;color:var(--sm);max-width:250px}
.ft-h{display:block;font-family:var(--fs);font-size:.56rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--ac);margin-bottom:.8rem}
.ft-col a{display:block;font-family:var(--fb);font-size:.82rem;font-weight:300;color:var(--sm);padding:.2rem 0;transition:color .25s}.ft-col a:hover{color:var(--ac)}
.ft-bot{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;flex-wrap:wrap;gap:.7rem}
.ft-copy{font-family:var(--fs);font-size:.54rem;font-weight:300;letter-spacing:.08em;color:var(--mt)}
.ft-soc{display:flex;gap:.8rem}
.ft-soc a{font-family:var(--fs);font-size:.54rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--sm);transition:color .25s}.ft-soc a:hover{color:var(--ac)}
@media(max-width:767px){.ft-top{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
@media(max-width:480px){.ft-top{grid-template-columns:1fr}}
/* BACK TO TOP — small, subtle, never overlaps */
.btt{position:fixed;bottom:1rem;right:.75rem;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(44,36,32,.35);color:#FAF7F2;font-size:.6rem;opacity:0;visibility:hidden;transition:all .35s var(--e);z-index:8;border-radius:50%}
.btt.vis{opacity:.6;visibility:visible}
.btt:hover{opacity:1;background:rgba(44,36,32,.6);transform:translateY(-2px)}
/* Product pages: sit above sticky ATC bar */
@media (max-width: 767px) {
.template-product .btt { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* GRAIN */
.grain{position:fixed;inset:0;opacity:.015;pointer-events:none;z-index:9998;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px}
/* FAQ ACCORDION */
.faq-item{border-bottom:1px solid var(--bdr)}
.faq-q{padding:1.1rem 0;font-family:var(--fs);font-size:.65rem;font-weight:400;letter-spacing:.08em;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--cr);transition:color .3s}
.faq-q:hover{color:var(--ac)}
.faq-q span{font-size:1rem;transition:transform .3s;flex-shrink:0;margin-left:.8rem}
.faq-item.active .faq-q span{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--e)}
.faq-item.active .faq-a{max-height:300px}
.faq-a p{font-family:var(--fb);font-size:.9rem;font-weight:300;line-height:1.85;color:var(--sm);padding-bottom:1.1rem}
/* COOKIE CONSENT */
.ck-banner{position:fixed;bottom:0;left:0;right:0;background:var(--char);border-top:1px solid var(--bdr);padding:1rem clamp(1.2rem,3.5vw,3.5rem);z-index:9999;transform:translateY(100%);transition:transform .5s var(--e);display:flex;align-items:center}
.ck-banner.vis{transform:translateY(0)}
.ck-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;max-width:1200px;margin:0 auto;width:100%}
.ck-in p{font-family:var(--fb);font-size:.82rem;font-weight:300;color:var(--sm);line-height:1.6;flex:1}
.ck-in p a{color:var(--ac);text-decoration:underline}
.ck-btns{display:flex;gap:.5rem;flex-shrink:0}
.ck-accept{font-family:var(--fs);font-size:.54rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;background:var(--ac);color:var(--cr);border:1px solid var(--ac);padding:.6rem 1.5rem;cursor:pointer;transition:background .3s}
.ck-accept:hover{background:var(--ac-l)}
.ck-manage{font-family:var(--fs);font-size:.54rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;background:transparent;color:var(--sm);border:1px solid var(--bdr);padding:.6rem 1.2rem;cursor:pointer;transition:all .3s}
.ck-manage:hover{border-color:var(--ac);color:var(--cr)}
@media(max-width:600px){.ck-in{flex-direction:column;text-align:center}.ck-btns{width:100%;justify-content:center}}
/* SEARCH OVERLAY */
.search-overlay{position:fixed;inset:0;background:rgba(9,9,9,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:9990;opacity:0;visibility:hidden;transition:all .35s var(--e);display:flex;align-items:flex-start;justify-content:center;padding-top:clamp(6rem,15vh,12rem)}
.search-overlay.open{opacity:1;visibility:visible}
.search-in{width:90%;max-width:580px}
.search-top{display:flex;gap:.8rem;align-items:center;border-bottom:1px solid var(--bdr);padding-bottom:1rem}
.search-input{flex:1;background:none;border:none;font-family:var(--fd);font-size:clamp(1.4rem,3vw,2rem);font-weight:400;color:var(--cr);outline:none}
.search-input::placeholder{color:var(--mt)}
.search-close{background:none;border:none;font-size:1.2rem;color:var(--sm);cursor:pointer;padding:.3rem;transition:color .3s}
.search-close:hover{color:var(--cr)}
.search-hints{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.search-hint-label{font-family:var(--fs);font-size:.52rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--mt);margin-right:.3rem}
.search-hints a{font-family:var(--fb);font-size:.85rem;font-weight:300;color:var(--sm);padding:.4rem .9rem;border:1px solid var(--bdr);text-decoration:none;transition:all .3s}
.search-hints a:hover{border-color:var(--ac);color:var(--cr)}
/* EXIT-INTENT POPUP */
.exit-popup{position:fixed;inset:0;background:rgba(9,9,9,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:9995;opacity:0;visibility:hidden;transition:all .4s var(--e);display:flex;align-items:center;justify-content:center}
.exit-popup.open{opacity:1;visibility:visible}
.exit-in{background:var(--char);border:1px solid var(--bdr);padding:clamp(2rem,4vw,3.5rem);max-width:440px;width:90%;position:relative;text-align:center}
.exit-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.1rem;color:var(--sm);cursor:pointer;transition:color .3s;padding:.3rem}
.exit-close:hover{color:var(--cr)}
.exit-content .slabel{margin-bottom:.6rem}
.exit-content h3{font-family:var(--fd);font-size:clamp(1.5rem,2.8vw,2rem);font-weight:400;line-height:1.2;margin-bottom:.8rem}
.exit-content h3 em{color:var(--ac);font-style:italic}
.exit-content p{font-family:var(--fb);font-size:.88rem;font-weight:300;color:var(--sm);line-height:1.7;margin-bottom:1.4rem}
.exit-form{display:flex;max-width:360px;margin:0 auto 1rem}
.exit-form input{flex:1;background:transparent;border:1px solid var(--bdr);border-right:none;padding:.65rem .8rem;font-family:var(--fb);font-size:.85rem;color:var(--cr);outline:none;transition:border-color .3s}
.exit-form input:focus{border-color:var(--ac)}
.exit-form button{background:var(--ac);color:var(--cr);border:1px solid var(--ac);font-family:var(--fs);font-size:.52rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;padding:.65rem 1.2rem;cursor:pointer;transition:background .3s;white-space:nowrap}
.exit-form button:hover{background:var(--ac-l)}
.exit-note{font-family:var(--fb);font-size:.72rem;font-weight:300;color:var(--mt)}
.exit-popup.success .exit-form{opacity:.5;pointer-events:none}
@media(max-width:480px){.exit-form{flex-direction:column}.exit-form input{border-right:1px solid var(--bdr);border-bottom:none}}
/* BACK IN STOCK */
.bis-trigger{display:none;font-family:var(--fb);font-size:.75rem;font-weight:300;color:var(--ac);cursor:pointer;margin-top:.3rem;text-decoration:underline;transition:opacity .3s}
.bis-trigger:hover{opacity:.7}
.bis-form{display:none;margin-top:.5rem;gap:.4rem}
.bis-form.open{display:flex}
.bis-form input{flex:1;background:transparent;border:1px solid var(--bdr);padding:.45rem .6rem;font-family:var(--fb);font-size:.78rem;color:var(--cr);outline:none}
.bis-form button{background:var(--ac);color:var(--cr);border:none;font-family:var(--fs);font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;padding:.45rem .8rem;cursor:pointer}
/* ── ANNOUNCEMENT BAR — stays dark ── */
.ann{background:#2C2420;border-bottom:1px solid rgba(255,255,255,.08)}
.ann-i{color:#D1C9BE}
.ann-i svg{stroke:var(--ac)}
/* ── NAV — dark chocolate brown, premium ── */
nav{background:rgba(44,36,32,.85);border-bottom:1px solid rgba(122,101,72,.1)}
.nw.sc nav{background:rgba(44,36,32,.97);border-bottom-color:rgba(122,101,72,.15)}
.ni>a{color:#FAF7F2}
.ni>a .chv{stroke:#D1C9BE}
.nl{color:#FAF7F2}
.nic svg{stroke:#FAF7F2}
.nt span{background:#FAF7F2}
.nav-cta{color:#FAF7F2}
.cc{color:#FAF7F2}
.skip-link{color:#FAF7F2}
.btt{color:#FAF7F2}
/* ── MEGA MENU — cream dropdown ── */
.mm{background:#FAF7F2 !important;border:1px solid #DDD7CD !important;border-top:2px solid var(--ac) !important;box-shadow:0 16px 48px rgba(44,36,32,.12),0 4px 12px rgba(44,36,32,.06) !important}
.mc-h{color:var(--ac) !important;border-bottom:1px solid #DDD7CD !important;font-size:.68rem !important}
.mc a{color:#2C2420 !important;font-size:1rem !important}
.mc a:hover{color:var(--ac) !important}
.mf{border:1px solid #DDD7CD !important}
.mf-l{background:linear-gradient(to top,rgba(44,36,32,.85),transparent) !important}
.mf-l p{color:#FAF7F2 !important}
/* ── MOBILE NAV — dark overlay ── */
.mob{background:rgba(44,36,32,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.mob a{color:#FAF7F2;border-bottom:1px solid rgba(255,255,255,.08)}
.mob-sub a{color:#D1C9BE;border-bottom-color:rgba(255,255,255,.06)}
.nt.act span{background:#2C2420}
/* ── FOOTER — stays dark ── */
footer{background:#1F1815;border-top:1px solid #C4A96C}
.ft-top{border-bottom:1px solid rgba(255,255,255,.08)}
.ft-brand h3{color:#FAF7F2}.ft-brand h3 em{color:var(--ac)}
.ft-brand p{color:#D1C9BE}
.ft-h{color:var(--ac)}
.ft-col a{color:#D1C9BE}.ft-col a:hover{color:var(--ac)}
.ft-copy{color:#A59E96}
.ft-soc a{color:#D1C9BE}.ft-soc a:hover{color:var(--ac)}
.ft-bot{border-top-color:rgba(255,255,255,.08)}
/* ── SOCIAL PROOF BAR — subtle warm tint ── */
.sp{background:#EDE8E0;border-bottom:1px solid #DDD7CD}
/* ── MARQUEE — light border ── */
.marq{border-top:1px solid #DDD7CD;border-bottom:1px solid #DDD7CD;background:#FAF7F2}
.marq-i{color:#D0C8BE}
/* ── BREADCRUMB — light bg ── */
.bread{background:#F5F0E8;border-bottom:1px solid #DDD7CD}
/* ── NEWSLETTER — warm bg ── */
.nl-sec{background:#EDE8E0}
.nl-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(122,101,72,.06),transparent 55%);pointer-events:none}
.nl-f input{border:1px solid #D0C8BE;border-right:none;color:#2C2420}
.nl-f input::placeholder{color:#A09890}
.nl-f button{color:#FAF7F2}
@media(max-width:480px){.nl-f input{border-right:1px solid #D0C8BE;border-bottom:none}}
/* ── AS FEATURED IN — warm ── */
.afi{background:#FAF7F2;border-bottom:1px solid #DDD7CD}
.afi-t{color:rgba(44,36,32,.5)}
.afi-t span{color:rgba(44,36,32,.7)}
.afi-item:not(:last-child)::after{background:rgba(44,36,32,.12)}
/* ── SEARCH OVERLAY — dark ── */
.search-overlay{background:rgba(44,36,32,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.search-top{border-bottom:1px solid rgba(255,255,255,.1)}
.search-input{color:#FAF7F2}
.search-input::placeholder{color:#A59E96}
.search-close{color:#D1C9BE}
.search-close:hover{color:#FAF7F2}
.search-hint-label{color:#A59E96}
.search-hints a{color:#D1C9BE;border:1px solid rgba(255,255,255,.08)}
.search-hints a:hover{border-color:var(--ac);color:#FAF7F2}
/* ── EXIT POPUP — dark ── */
.exit-popup{background:rgba(44,36,32,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.exit-in{background:#2C2420;border:1px solid rgba(255,255,255,.08)}
.exit-close{color:#D1C9BE}
.exit-close:hover{color:#FAF7F2}
.exit-content h3{color:#FAF7F2}
.exit-content h3 em{color:var(--ac)}
.exit-content p{color:#D1C9BE}
.exit-form input{border:1px solid rgba(255,255,255,.1);border-right:none;color:#FAF7F2}
.exit-form input:focus{border-color:var(--ac)}
.exit-form button{color:#FAF7F2}
.exit-note{color:#A59E96}
@media(max-width:480px){.exit-form input{border-right:1px solid rgba(255,255,255,.1);border-bottom:none}}
/* ── COOKIE BANNER — dark (legacy .ck-banner, kept for safety) ── */
.ck-banner{background:#2C2420;border-top:1px solid rgba(255,255,255,.08)}
.ck-in p{color:#D1C9BE}
.ck-in p a{color:var(--ac)}
.ck-accept{color:#FAF7F2;background:var(--ac);border:1px solid var(--ac)}
.ck-manage{color:#D1C9BE;border:1px solid rgba(255,255,255,.08)}
.ck-manage:hover{border-color:var(--ac);color:#FAF7F2}
/* ── SHOPIFY NATIVE COOKIE BANNER — minimal override (22 Apr 2026) ──
Hidden by default; revealed by jw-custom.js on delay/scroll/product triggers.
Brand-aligned: dark bg, brass accent, ultra-compact on mobile. */
/* Minimal, subtle cookie pill — bottom-left corner, compact on all screens */
#shopify-pc__banner.shopify-pc__banner__dialog{
position:fixed!important;
left:1rem!important;right:auto!important;
bottom:1rem!important;top:auto!important;
width:auto!important;max-width:268px!important;
background:rgba(28,22,18,.82)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(196,169,108,.16)!important;
border-radius:8px!important;
padding:.6rem .7rem!important;
box-shadow:0 6px 20px rgba(0,0,0,.22);
font-family:'Manrope',system-ui,-apple-system,sans-serif!important;
opacity:0;pointer-events:none;transform:translateY(12px);
transition:opacity .4s ease,transform .45s cubic-bezier(.2,.6,.25,1);
z-index:9998!important;
}
body.jw-ck-show #shopify-pc__banner.shopify-pc__banner__dialog{
opacity:1;pointer-events:auto;transform:translateY(0);
}
#shopify-pc__banner .shopify-pc__banner__wrapper{
display:flex!important;flex-direction:column!important;align-items:stretch;gap:.4rem;
max-width:none!important;margin:0!important;padding:0!important;width:100%;
}
#shopify-pc__banner .shopify-pc__banner__body{flex:none;min-width:0;padding:0!important;margin:0!important}
#shopify-pc__banner .shopify-pc__banner__body h2{display:none!important}
#shopify-pc__banner .shopify-pc__banner__body p{
font-size:.62rem!important;line-height:1.4!important;
color:#C7BFB5!important;margin:0!important;font-weight:300!important;
}
#shopify-pc__banner .shopify-pc__banner__body p a{color:#C4A96C!important;text-decoration:underline}
#shopify-pc__banner .shopify-pc__banner__btns{
display:flex!important;gap:.4rem!important;flex-shrink:0;margin:0!important;padding:0!important;align-items:center;flex-wrap:nowrap;
}
#shopify-pc__banner .shopify-pc__banner__btn-accept,
#shopify-pc__banner .shopify-pc__banner__btn-decline{flex:1 1 50%;min-width:0;}
/* Manage Preferences hidden on the compact pill — policy is reachable via
the "Learn more" link and the footer Privacy page. */
#shopify-pc__banner .shopify-pc__banner__btn-manage-prefs{display:none!important;}
#shopify-pc__banner button{
font-family:'Outfit',sans-serif!important;
font-size:.48rem!important;font-weight:500!important;
letter-spacing:.1em!important;text-transform:uppercase!important;
padding:.4rem .6rem!important;cursor:pointer;border-radius:4px!important;
transition:all .25s ease!important;line-height:1!important;white-space:nowrap;
}
#shopify-pc__banner .shopify-pc__banner__btn-accept{
background:#C4A96C!important;color:#1C1612!important;border:1px solid #C4A96C!important;flex:1 1 auto;
}
#shopify-pc__banner .shopify-pc__banner__btn-accept:hover{background:#B89456!important;border-color:#B89456!important}
#shopify-pc__banner .shopify-pc__banner__btn-decline{
background:transparent!important;color:#D1C9BE!important;
border:1px solid rgba(255,255,255,.18)!important;flex:1 1 auto;
}
#shopify-pc__banner .shopify-pc__banner__btn-decline:hover{
color:#FAF7F2!important;border-color:rgba(196,169,108,.45)!important;
}
#shopify-pc__banner .shopify-pc__banner__btn-manage-prefs{display:none!important;}
@media(max-width:640px){
#shopify-pc__banner.shopify-pc__banner__dialog{
left:.8rem!important;right:.8rem!important;bottom:.8rem!important;
max-width:none!important;width:auto!important;
padding:.8rem .9rem!important;
}
#shopify-pc__banner .shopify-pc__banner__body p{font-size:.68rem!important;line-height:1.4!important}
/* Accept/Decline side-by-side to keep the pill short */
#shopify-pc__banner .shopify-pc__banner__btns{
flex-direction:row!important;flex-wrap:nowrap!important;gap:.4rem!important;
}
#shopify-pc__banner .shopify-pc__banner__btn-accept,
#shopify-pc__banner .shopify-pc__banner__btn-decline{
flex:1 1 50%!important;min-width:0!important;
}
}
/* Preferences modal — brand-aligned */
#shopify-pc__prefs{font-family:'Manrope',system-ui,-apple-system,sans-serif!important}
#shopify-pc__prefs .shopify-pc__prefs__dialog{background:#1C1612!important;color:#D1C9BE!important;border:1px solid rgba(196,169,108,.18)!important;border-radius:0!important}
#shopify-pc__prefs h2,#shopify-pc__prefs h3{color:#FAF7F2!important;font-family:'Cormorant Garamond',serif!important;font-weight:400!important}
#shopify-pc__prefs button.shopify-pc__prefs__btn-save{background:#C4A96C!important;color:#1C1612!important;border-color:#C4A96C!important}
/* ── FAQ on cream ── */
.faq-item{border-bottom:1px solid #DDD7CD}
.faq-q{color:#2C2420}
/* ── BUTTONS — ensure light text ── */
.btn-p{color:#FAF7F2}
.btn-g{color:#2C2420;border:1px solid rgba(122,101,72,.3)}
/* ── BACK IN STOCK ── */
.bis-form input{border:1px solid #DDD7CD;color:#2C2420}
.bis-form button{color:#FAF7F2}
/* ── PRODUCT CARDS on cream ── */
.pc{background:#F5F0E8;border:1px solid #DDD7CD}
.pc:hover{border-color:rgba(122,101,72,.25)}
.pc-img{background:#EDE8E0}
.pc-badge{color:#FAF7F2}
.pc-qb{color:#FAF7F2}
.pc-info{background:#F5F0E8}
.pc{flex:0 0 clamp(230px,18vw,275px);scroll-snap-align:start;background:var(--black-l);border:1px solid var(--bdr);transition:border-color .35s;display:block}
.pc:hover{border-color:rgba(122,101,72,.18)}
.pc-img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--char)}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)}.pc:hover .pc-img img{transform:scale(1.04)}
.pc-badge{position:absolute;top:.6rem;left:.6rem;font-family:var(--fs);font-size:.5rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;background:var(--ac);color:var(--cr);padding:.22rem .55rem}
.pc-qb{position:absolute;bottom:0;left:0;right:0;background:var(--ac);color:var(--cr);font-family:var(--fs);font-size:.55rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:.6rem;transform:translateY(100%);transition:transform .35s var(--e)}.pc:hover .pc-qb{transform:translateY(0)}
.pc-info{padding:.85rem}
.pc-name{font-family:var(--fd);font-size:.9rem;font-weight:500;margin-bottom:.1rem}
.pc-type{font-family:var(--fs);font-size:.56rem;font-weight:300;letter-spacing:.08em;text-transform:uppercase;color:var(--sm);margin-bottom:.4rem}
.pc-pr{display:flex;align-items:center;gap:.4rem}
.pc-price{font-family:var(--fd);font-size:.95rem;color:var(--ac)}
.pc-old{font-family:var(--fb);font-size:.82rem;color:var(--mt);text-decoration:line-through}
.pc-sw{display:flex;gap:.25rem;margin-top:.4rem}
.sw{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--bdr);transition:border-color .25s}.sw:hover{border-color:var(--ac)}
.hero{position:relative;height:100vh;height:100dvh;min-height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:calc(var(--nh) + var(--ah))}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 28% 42%,rgba(122,101,72,.035) 0%,transparent 50%),radial-gradient(ellipse at 72% 62%,rgba(122,101,72,.02) 0%,transparent 45%),var(--black)}
.hero-vl{position:absolute;inset:0;pointer-events:none}
.hero-vl span{position:absolute;width:1px;height:100%;background:linear-gradient(to bottom,transparent,rgba(122,101,72,.04),transparent)}.hero-vl span:nth-child(1){left:20%}.hero-vl span:nth-child(2){left:40%;opacity:.5}.hero-vl span:nth-child(3){left:60%}.hero-vl span:nth-child(4){left:80%;opacity:.5}
.hero-c{position:relative;z-index:2;text-align:center;max-width:780px;padding:0 1.2rem}
.hero-est{font-family:var(--fs);font-size:.54rem;font-weight:300;letter-spacing:.5em;text-transform:uppercase;color:var(--ac);margin-bottom:1.4rem;opacity:0;animation:fu .8s var(--e) .15s forwards}
.hero-t{font-family:var(--fd);font-weight:400;line-height:1.04;margin-bottom:.8rem}
.hl1{display:block;font-size:clamp(2.2rem,5.5vw,4.2rem);overflow:hidden}
.hl2{display:block;font-size:clamp(2.7rem,6.5vw,5rem);color:var(--ac);font-style:italic;overflow:hidden;margin-top:-.05em}
.hw{display:inline-block;opacity:0;transform:translateY(105%);animation:wu .9s var(--e) forwards}
.hl1 .hw:nth-child(1){animation-delay:.35s}.hl1 .hw:nth-child(2){animation-delay:.5s}.hl2 .hw{animation-delay:.65s}
@keyframes wu{to{opacity:1;transform:translateY(0)}}
@keyframes fu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.hero-sub{font-family:var(--fb);font-size:clamp(.92rem,1.2vw,1.05rem);font-weight:300;color:var(--sm);line-height:1.85;max-width:420px;margin:0 auto 2rem;opacity:0;animation:fu .8s var(--e) .9s forwards}
.hero-act{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;opacity:0;animation:fu .8s var(--e) 1.1s forwards}
.hero-trust{position:absolute;bottom:0;left:0;right:0;padding:1rem clamp(1.2rem,3.5vw,3.5rem);display:flex;justify-content:center;gap:clamp(1.2rem,3vw,3rem);border-top:1px solid rgba(122,101,72,.05);background:rgba(9,9,9,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;animation:fu .8s var(--e) 1.5s forwards;flex-wrap:wrap}
.ti{display:flex;align-items:center;gap:.4rem;font-family:var(--fs);font-size:.56rem;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:var(--sm)}
.ti svg{width:13px;height:13px;stroke:var(--ac);fill:none;stroke-width:1.5}
.ti .tst{display:flex;gap:1px}.ti .tst svg{width:10px;height:10px;fill:var(--ac);stroke:none}
.hero-scr{position:absolute;bottom:4.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;opacity:0;animation:fu .8s var(--e) 1.7s forwards;z-index:3}
.hero-scr span{font-family:var(--fs);font-size:.52rem;font-weight:300;letter-spacing:.3em;text-transform:uppercase;color:var(--mt)}
.scl{width:1px;height:30px;background:var(--graph);position:relative;overflow:hidden}.scl::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--ac);animation:sp 2s ease infinite}
@keyframes sp{0%{top:-100%}100%{top:100%}}
@media(max-width:600px){.hero-trust{gap:.8rem;padding:.8rem}.ti{font-size:.52rem}.hero-scr{bottom:3.8rem}}
/* Heritage */
.hrt{padding:clamp(3.5rem,8vw,7rem) clamp(1.2rem,3.5vw,4.5rem);position:relative;overflow:hidden}
.hrt-g{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,4.5vw,4rem);align-items:center;max-width:1100px;margin:0 auto}
.hrt-vis{position:relative;overflow:hidden}.hrt-iw{aspect-ratio:3/4;overflow:hidden;position:relative}
.hrt-i{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}.hrt-vis:hover .hrt-i{transform:scale(1.03)}
.hrt-yr{position:absolute;bottom:1rem;left:1rem;font-family:var(--fd);font-size:clamp(3rem,7vw,5.5rem);font-weight:700;color:rgba(122,101,72,.06);line-height:1;pointer-events:none}
.hrt-txt h2{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;line-height:1.2;margin-bottom:1rem}.hrt-txt h2 em{color:var(--ac);font-style:italic}
.hrt-txt p{font-family:var(--fb);font-size:clamp(.92rem,1.05vw,1rem);font-weight:300;line-height:1.9;color:var(--sm);margin-bottom:.8rem}
.hrt-st{display:flex;gap:1.8rem;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--bdr)}
.st .sn{font-family:var(--fd);font-size:clamp(1.5rem,2.3vw,2rem);font-weight:400;color:var(--ac);line-height:1}
.st .sl{font-family:var(--fs);font-size:.54rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--sm);margin-top:.25rem}
@media(max-width:900px){.hrt-g{grid-template-columns:1fr}}
/* Categories */
.cats{padding:clamp(3.5rem,7vw,6rem) clamp(1.2rem,3.5vw,4.5rem);background:var(--black-l)}
.cats-h{max-width:1100px;margin:0 auto 2rem;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem}
.cats-h h2{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400}.cats-h h2 em{color:var(--ac);font-style:italic}
.cg{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.cat-card{position:relative;aspect-ratio:3/4;overflow:hidden;cursor:pointer;background:var(--char);display:block}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e),filter .5s;filter:brightness(.55) saturate(.85)}
.cat-card:hover img{transform:scale(1.05);filter:brightness(.35) saturate(.85)}
.cat-card-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.3rem;z-index:2}
.cat-card-tag{font-family:var(--fs);font-size:.52rem;font-weight:300;letter-spacing:.3em;text-transform:uppercase;color:var(--ac);margin-bottom:.2rem}
.cat-card h3{font-family:var(--fd);font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:400;transition:transform .4s var(--e)}.cat-card:hover h3{transform:translateY(-4px)}
.cat-card-cta{font-family:var(--fs);font-size:.56rem;font-weight:300;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:.4rem;margin-top:.3rem;opacity:0;transform:translateY(8px);transition:all .35s var(--e)}.cat-card:hover .cat-card-cta{opacity:1;transform:translateY(0)}
.cat-card::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;background:var(--ac);transition:width .5s var(--e);z-index:3}.cat-card:hover::after{width:100%}
@media(max-width:767px){.cg{grid-template-columns:1fr}.cat-card{aspect-ratio:16/9}}
/* Featured */
.feat{padding:clamp(3.5rem,7vw,6rem) 0}
.feat-h{max-width:1100px;margin:0 auto 1.5rem;padding:0 clamp(1.2rem,3.5vw,4.5rem);display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem}
.feat-h h2{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400}.feat-h h2 em{color:var(--ac);font-style:italic}
.pt{display:flex;gap:1rem;padding:0 clamp(1.2rem,3.5vw,4.5rem);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.pt::-webkit-scrollbar{display:none}.pt:active{cursor:grabbing}
/* Craftsmanship */
.craft{position:relative;min-height:100vh;display:flex;overflow:hidden}
.craft-s{flex:1;position:sticky;top:var(--nh);height:calc(100vh - var(--nh));display:flex;flex-direction:column;justify-content:center;padding:clamp(1.5rem,3.5vw,3.5rem);background:var(--black);z-index:2}
.craft-s h2{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;line-height:1.2;margin-bottom:1rem}.craft-s h2 em{color:var(--ac);font-style:italic}
.craft-s>p{font-family:var(--fb);font-size:.95rem;font-weight:300;line-height:1.9;color:var(--sm);max-width:360px;margin-bottom:1.5rem}
.cs-list{display:flex;flex-direction:column;gap:.65rem}
.cs{display:flex;gap:.7rem;padding:.7rem;border:1px solid var(--bdr);transition:all .35s var(--e)}
.cs:hover{border-color:rgba(122,101,72,.2);background:var(--ac-m)}
.cs-n{font-family:var(--fd);font-size:1.3rem;color:var(--ac);opacity:.3;line-height:1;flex-shrink:0}
.cs h4{font-family:var(--fs);font-size:.6rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.15rem}
.cs p{font-family:var(--fb);font-size:.85rem;font-weight:300;color:var(--sm);line-height:1.6}
.craft-r{flex:1;background:var(--char)}
.craft-p{height:100vh;position:relative;overflow:hidden}.craft-p img{width:100%;height:100%;object-fit:cover}
.craft-p-c{position:absolute;bottom:1.2rem;left:1rem;font-family:var(--fs);font-size:.52rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,235,227,.5)}
@media(max-width:900px){.craft{flex-direction:column}.craft-s{position:relative;height:auto}.craft-p{height:50vh}}
/* Outlet */
.outlet{padding:clamp(3.5rem,7vw,6rem) clamp(1.2rem,3.5vw,4.5rem);background:linear-gradient(135deg,var(--char),var(--black-l));position:relative;overflow:hidden}
.outlet::before{content:'OUTLET';position:absolute;right:-1.5rem;top:50%;transform:translateY(-50%) rotate(90deg);font-family:var(--fd);font-size:clamp(4rem,10vw,9rem);font-weight:700;color:rgba(122,101,72,.025);pointer-events:none}
.outlet-in{max-width:1100px;margin:0 auto}
.outlet-g{display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem;align-items:center}
.outlet-txt h2{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;line-height:1.2;margin-bottom:.8rem}.outlet-txt h2 em{color:var(--ac);font-style:italic}
.outlet-txt p{font-family:var(--fb);font-size:.95rem;font-weight:300;line-height:1.9;color:var(--sm);margin-bottom:1.5rem}
.og{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.o-item{position:relative;background:var(--black);border:1px solid var(--bdr);overflow:hidden;transition:border-color .35s;display:block}
.o-item:hover{border-color:rgba(122,101,72,.18)}
.oi-img{aspect-ratio:1;overflow:hidden;background:var(--graph)}.oi-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}.o-item:hover .oi-img img{transform:scale(1.04)}
.oi-info{padding:.6rem}
.oi-name{font-family:var(--fd);font-size:.82rem;font-weight:500;margin-bottom:.1rem}
.oi-pr{display:flex;align-items:center;gap:.4rem}
.oi-old{font-family:var(--fb);font-size:.78rem;color:var(--mt);text-decoration:line-through}
.oi-new{font-family:var(--fd);font-size:.9rem;color:var(--ac)}
.oi-tag{position:absolute;top:.45rem;right:.45rem;background:var(--ac-d);color:var(--cr);font-family:var(--fs);font-size:.5rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .5rem}
@media(max-width:900px){.outlet-g{grid-template-columns:1fr}}
/* Editorial */
.ed{padding:clamp(3.5rem,7vw,6rem) clamp(1.2rem,3.5vw,4.5rem);background:var(--black)}
.ed-in{max-width:1100px;margin:0 auto}
.ed-h{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}
.ed-h h2{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400}.ed-h h2 em{color:var(--ac);font-style:italic}
.edg{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:.8rem}
.ed-card{cursor:pointer;display:block}
.ed-card-img{overflow:hidden;background:var(--char)}
.ed-card:first-child .ed-card-img{aspect-ratio:3/4}
.ed-card:not(:first-child) .ed-card-img{aspect-ratio:4/3}
.ed-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e);filter:brightness(.78)}.ed-card:hover .ed-card-img img{transform:scale(1.04);filter:brightness(1)}
.ed-card-b{padding:.8rem 0}
.ed-card-tag{font-family:var(--fs);font-size:.52rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--ac);margin-bottom:.3rem}
.ed-card h3{font-family:var(--fd);font-size:clamp(.9rem,1.2vw,1.08rem);font-weight:400;line-height:1.35;margin-bottom:.2rem;transition:color .3s}.ed-card:hover h3{color:var(--ac)}
.ed-card p{font-family:var(--fb);font-size:.82rem;font-weight:300;line-height:1.7;color:var(--sm)}
@media(max-width:767px){.edg{grid-template-columns:1fr}.ed-card:first-child .ed-card-img{aspect-ratio:16/9}}
/* Reviews strip */
.rev-strip{padding:clamp(3rem,6vw,5rem) clamp(1.2rem,3.5vw,4.5rem);background:var(--char);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}
.rev-strip-in{max-width:1100px;margin:0 auto;text-align:center}
.rev-strip h2{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;margin-bottom:1.5rem}.rev-strip h2 em{color:var(--ac);font-style:italic}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.rev-card{padding:1.5rem;border:1px solid var(--bdr);text-align:left;transition:border-color .3s}
.rev-card:hover{border-color:rgba(122,101,72,.15)}
.rev-stars{display:flex;gap:1px;margin-bottom:.6rem}.rev-stars svg{width:12px;height:12px;fill:var(--ac)}
.rev-card blockquote{font-family:var(--fb);font-size:.9rem;font-weight:300;line-height:1.75;color:var(--sm);font-style:italic;margin-bottom:.7rem}
.rev-author{font-family:var(--fs);font-size:.54rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--sm)}
@media(max-width:700px){.rev-grid{grid-template-columns:1fr}}
/* Homepage: light nav text over hero */
.nw:not(.sc) nav{background:rgba(9,9,9,.35)}
.nw:not(.sc) .ni>a{color:#FAF7F2}
.nw:not(.sc) .ni>a .chv{stroke:#D1C9BE}
.nw:not(.sc) .nl{color:#FAF7F2}
.nw:not(.sc) .nic svg{stroke:#FAF7F2}
.nw:not(.sc) .nt span{background:#FAF7F2}
/* Cream theme fixes — homepage */
.hero::after{background:linear-gradient(to bottom,rgba(44,36,32,.25),rgba(44,36,32,.65))}
.hero-content h1{color:#FAF7F2}
.hero-content h1 em{color:var(--ac)}
.hero-content p{color:rgba(250,247,242,.8)}
.hero-content .btn-p{color:#FAF7F2}
.hero-content .btn-g{color:#FAF7F2;border-color:rgba(250,247,242,.3)}
.cat-card::after{background:linear-gradient(to top,rgba(44,36,32,.75),transparent 60%)}
.cat-card h3{color:#FAF7F2}
.cat-card span{color:#FAF7F2}
.craft-sec{background:#EDE8E0}
.craft-img::after{background:linear-gradient(to right,rgba(237,232,224,0),#EDE8E0)}
.out-sec{background:#F5F0E8}
.out-card{background:#EDE8E0;border:1px solid #DDD7CD}
.out-card:hover{border-color:rgba(122,101,72,.2)}
.rv-sec{background:#FAF7F2}
.jn-sec{background:#F5F0E8}
.jn-card{background:#EDE8E0;border:1px solid #DDD7CD}
.jn-card:hover{border-color:rgba(122,101,72,.2)}
.jn-meta{color:#A09890}
.oi-img{background:#E5DFD5}
.oi-badge{color:#FAF7F2}
/* Hero trust bar text — light on dark backdrop */
.hero-trust .ti{color:#D1C9BE}
.hero-trust .ti svg{stroke:var(--ac)}
/* ── ACCENT ON DARK — lighter brass for readability ── */
.ft-h{color:#C4A96C !important}
.ft-col a:hover{color:#C4A96C !important}
.ft-soc a:hover{color:#C4A96C !important}
.mc-h{color:#7A6548 !important}
.mc a:hover{color:#7A6548 !important}
.mf-l span{color:#C4A96C !important;font-size:.62rem !important}
.mob a:hover{color:#C4A96C !important}
.search-hints a:hover{border-color:#C4A96C !important;color:#FAF7F2 !important}
.exit-content h3 em{color:#C4A96C !important}
.ck-in p a{color:#C4A96C !important}
.ann-i svg{stroke:#C4A96C !important}
.exit-form input:focus{border-color:#C4A96C !important}
.bis-trigger{color:#C4A96C !important}
/* ── FOOTER MUTED TEXT — lighter for dark bg readability ── */
.ft-copy{color:#A59E96 !important}
/* ── PLACEHOLDER TEXT — darker for readability ── */
input::placeholder,textarea::placeholder{color:#7A7068 !important}
.nl-f input::placeholder{color:#7A7068 !important}
.search-input::placeholder{color:#A59E96 !important}
/* ── LOGO IMAGE ── */
.nl-img{height:32px;width:auto;display:block;transition:filter .3s,opacity .3s}
.nl{display:flex;align-items:center}
@media(max-width:900px){.nl-img{height:26px}}
/* Homepage: white logo over hero, dark when scrolled */
.nw:not(.sc) .nl-img{filter:brightness(0) invert(1)}
.nw.sc .nl-img{filter:none}
/* ── HERO TRUST BAR — high readability ── */
.hero-trust{background:rgba(44,36,32,.75) !important;backdrop-filter:blur(16px) !important;-webkit-backdrop-filter:blur(16px) !important;border-top:1px solid rgba(196,169,108,.15) !important}
.hero-trust .ti{color:#FAF7F2 !important;font-size:.6rem !important;font-weight:300 !important;letter-spacing:.14em !important}
.hero-trust .ti svg{stroke:#C4A96C !important}
.hero-trust .ti .tst svg{fill:#C4A96C !important}
@media(max-width:600px){.hero-trust .ti{font-size:.54rem !important}}
/* ── FONT SIZE READABILITY BUMP ── */
/* Minimum 0.75rem (12px) for all UI text, 0.85rem for body copy */
.ann-i{font-size:.75rem !important}
.sp-l{font-size:.75rem !important}
.afi-h{font-size:.85rem !important}
.mc-h{font-size:.75rem !important}
.ft-h{font-size:.75rem !important}
.ft-copy{font-size:.75rem !important}
.ft-soc a{font-size:.75rem !important}
.slabel{font-size:.72rem !important}
.pc-badge{font-size:.68rem !important}
.pc-type{font-size:.72rem !important}
.nav-cta{font-size:.72rem !important}
.va{font-size:.75rem !important}
.bread{font-size:.7rem !important}
.bread span{margin:0 .5rem}
.cc{font-size:.56rem !important}
.ck-accept,.ck-manage{font-size:.7rem !important}
.ni>a{font-size:.72rem !important}
.ct-block h4{font-size:.72rem !important}
.form-group label{font-size:.72rem !important}
.faq-q{font-size:.8rem !important}
.prod-trust span{font-size:.72rem !important}
.exit-form button{font-size:.68rem !important}
.nl-f button{font-size:.7rem !important}
.btn-p{font-size:.7rem !important}
.btn-g{font-size:.7rem !important}
.cat-card-tag{font-size:.65rem !important}
.cat-card-cta{font-size:.68rem !important}
.ed-card-tag{font-size:.65rem !important}
.craft-p-c{font-size:.65rem !important}
.oi-tag{font-size:.62rem !important}
.cs h4{font-size:.72rem !important}
.mf-l span{font-size:.65rem !important}
/* ── FONT FLOOR — 12px (0.75rem) minimum ── */
.jw-cats__card-label{font-size:.75rem !important}
.jw-cats__card-count{font-size:.44rem !important}
.jw-story__badge-text{font-size:.75rem !important}
.jw-journal__card-tag{font-size:.75rem !important}
.jw-hero__scroll span{font-size:.72rem !important}
.hero-scr span{font-size:.72rem !important}
.jw-trust-badge{font-size:.75rem !important}
.rev-author{font-size:.72rem !important}
.search-hint-label{font-size:.65rem !important}
.exit-note{font-size:.78rem !important}
/* ── BODY COPY READABILITY ── */
.hrt-txt p{font-size:1.05rem !important;line-height:1.9 !important}
.craft-s>p{font-size:1.05rem !important;line-height:1.9 !important}
.outlet-txt p{font-size:1.05rem !important;line-height:1.9 !important}
.ed-card p{font-size:.9rem !important;line-height:1.75 !important}
.rev-card blockquote{font-size:.95rem !important;line-height:1.8 !important}
.faq-a p{font-size:.95rem !important;line-height:1.9 !important}
.ft-brand p{font-size:.88rem !important;line-height:1.85 !important}
.ft-col a{font-size:.88rem !important}
.nl-sec p{font-size:1rem !important;line-height:1.85 !important}
.exit-content p{font-size:.95rem !important;line-height:1.8 !important}
.ck-in p{font-size:.88rem !important;line-height:1.7 !important}
.mc a{font-size:1rem !important}
.cs p{font-size:.9rem !important;line-height:1.7 !important}
/* ── Override Symmetry's root variables ── */
:root {
--body-bg-color: 250,247,242 !important;
--bg-color: 250,247,242 !important;
--body-text-color: 44,36,32 !important;
--text-color: 44,36,32 !important;
--heading-color: 44,36,32 !important;
--body-heading-color: 44,36,32 !important;
--link-color: 122,101,72 !important;
--body-link-color: 122,101,72 !important;
--btn-bg-color: 122,101,72 !important;
--btn-bg-hover-color: 139,115,85 !important;
}
/* Symmetry body */
body.template-product,
body.template-collection,
body.template-cart,
body.template-blog,
body.template-article,
body.template-search,
body.template-list-collections,
body.template-customers-login,
body.template-customers-register,
body.template-customers-account,
body.template-customers-order,
body.template-customers-addresses {
background: #FAF7F2 !important;
color: #2C2420 !important;
font-family: 'Cormorant Garamond', Garamond, serif !important;
}
/* Container */
.container, main, #content, .cf {
background: transparent !important;
}
/* ── Symmetry Product Page ── */
.product-title, .product-area h1 {
font-family: 'Playfair Display', Georgia, serif !important;
color: #2C2420 !important;
}
.product-info__price .price__current {
font-family: 'Playfair Display', Georgia, serif !important;
color: #7A6548 !important;
}
.price__was, .price--compare {
color: #6E665F !important;
}
.price-label--sale {
background: #7A6548 !important;
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
border-radius: 0 !important;
}
.product-price--on-sale .price__current {
color: #7A6548 !important;
}
/* Variant picker — see consolidated block in "Size selector boxes" section below */
/* Buttons */
.btn, .btn--primary, .add-to-cart,
.shopify-payment-button button {
background: #7A6548 !important;
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .62rem !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
border: none !important;
border-radius: 0 !important;
}
.btn:hover, .btn--primary:hover,
.add-to-cart:hover {
background: #8B7355 !important;
}
.btn--secondary, .btn--outline {
background: transparent !important;
color: #2C2420 !important;
border: 1px solid #DDD7CD !important;
}
.btn--secondary:hover, .btn--outline:hover {
background: #7A6548 !important;
border-color: #7A6548 !important;
color: #FAF7F2 !important;
}
/* Product gallery — see consolidated block below */
/* ── Product Accordion / Collapsible Tabs ── */
/* Remove Symmetry's 50px margin — tight stacking */
.template-product .product-info-accordion .disclosure {
margin-bottom: 0 !important;
}
/* Stack accordions with no gap between them */
.template-product .product-info-accordion {
border-top: 1px solid #DDD7CD !important;
margin-top: 0 !important;
}
/* Remove double border when accordions are adjacent */
.template-product .product-info-accordion + .product-info-accordion {
margin-top: 0 !important;
}
.template-product .product-info-accordion + .product-info-accordion .disclosure {
border-top: none !important;
}
/* Last accordion gets bottom border */
.template-product .product-info-accordion:last-of-type {
border-bottom: 1px solid #DDD7CD !important;
}
/* Summary / title row */
/* Right-rail product info accordion ONLY (Details & Materials, Delivery & Returns, Care
Instructions). Uppercase is intentional here — brand-style sidebar labels. The FAQ
"Common Questions" disclosures are scoped out so they render in title case to match the
contact-page FAQs. */
.template-product .product-info-accordion summary,
.template-product .product-info-accordion .disclosure__title {
font-family: 'Outfit', sans-serif !important;
font-size: .62rem !important;
font-weight: 400 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: #2C2420 !important;
padding: .9rem 0 !important;
}
/* FAQ section disclosure titles on PDP: inherit the universal .section-collapsible-tabs
rules below so Common Questions matches the contact-page FAQ exactly. The previous
override (font-size .95rem, padding 1rem 0) made PDP look "old" vs. contact's refined
.72rem styling. */
.template-product .section-collapsible-tabs .disclosure__title {
text-transform: none !important;
letter-spacing: .06em !important;
}
/* Icon beside title */
.template-product .product-info-accordion .with-icon .icon {
color: #7A6548 !important;
}
/* Plus/minus indicator — brass */
.template-product .disclosure__title::before,
.template-product .disclosure__title::after {
background-color: #7A6548 !important;
}
/* ── Collapsible tabs (FAQ sections) — brand styling ── */
.section-collapsible-tabs .collapsible-tabs__heading {
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important;
font-weight: 400 !important;
color: #2C2420 !important;
margin-bottom: 1rem !important;
}
.section-collapsible-tabs .disclosure__title {
font-family: 'Outfit', sans-serif !important;
font-size: .72rem !important;
font-weight: 400 !important;
letter-spacing: .06em !important;
color: #2C2420 !important;
padding: .85rem 0 !important;
}
@media (max-width: 600px) {
.section-collapsible-tabs .disclosure__title {
font-size: .66rem !important;
padding: .7rem 0 !important;
}
.section-collapsible-tabs .collapsible-tabs__heading {
font-size: clamp(.95rem, 1.6vw, 1.2rem) !important;
margin-bottom: .75rem !important;
}
}
.section-collapsible-tabs .disclosure__content {
font-family: 'Cormorant Garamond', serif !important;
font-size: .9rem !important;
font-weight: 300 !important;
line-height: 1.8 !important;
color: #635A53 !important;
padding-bottom: 1rem !important;
}
.section-collapsible-tabs .disclosure__content a {
color: #7A6548 !important;
text-decoration: underline !important;
}
.section-collapsible-tabs .collapsible-tabs__tab {
border-color: #E8E2D9 !important;
}
/* Content area */
.template-product .disclosure__content {
padding-bottom: 1.2rem !important;
font-family: 'Cormorant Garamond', serif !important;
font-size: .95rem !important;
font-weight: 300 !important;
line-height: 1.85 !important;
color: #635A53 !important;
}
/* Bold labels inside content (e.g. "Upper:", "Sole:") */
.template-product .disclosure__content strong {
font-weight: 600 !important;
color: #2C2420 !important;
}
/* Lists inside accordion content */
.template-product .disclosure__content ul {
list-style: none !important;
padding-left: 0 !important;
margin: .6rem 0 !important;
}
.template-product .disclosure__content li {
position: relative !important;
padding-left: 1rem !important;
margin-bottom: .3rem !important;
}
.template-product .disclosure__content li::before {
content: '\2022' !important;
position: absolute !important;
left: 0 !important;
color: #7A6548 !important;
}
/* Product description — standalone text above accordions */
.template-product .product-description {
margin-top: 1.2rem !important;
margin-bottom: 0 !important;
padding-bottom: 1rem !important;
border-bottom: none !important;
font-family: 'Cormorant Garamond', serif !important;
font-size: .95rem !important;
font-weight: 300 !important;
line-height: 1.85 !important;
color: #635A53 !important;
}
.template-product .product-description p {
margin-bottom: .8rem !important;
}
.template-product .product-description p:last-child {
margin-bottom: 0 !important;
}
/* Lists inside description — bullet dots, matching body font */
.template-product .product-description ul {
list-style: none !important;
padding-left: 0 !important;
margin: .6rem 0 !important;
}
.template-product .product-description li {
position: relative !important;
padding-left: 1rem !important;
margin-bottom: .3rem !important;
}
.template-product .product-description li::before {
content: '\2022' !important;
position: absolute !important;
left: 0 !important;
color: #7A6548 !important;
}
.template-product .product-description strong {
font-weight: 600 !important;
color: #2C2420 !important;
}
/* Sub-headings inside description (h3/h4) */
.template-product .product-description h3,
.template-product .product-description h4 {
font-family: 'Outfit', sans-serif !important;
font-size: .6rem !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #2C2420 !important;
margin-top: 1.2rem !important;
margin-bottom: .4rem !important;
}
/* Sticky ATC */
.sticky-atc {
background: rgba(250,247,242,.97) !important;
backdrop-filter: blur(20px) !important;
border-top: 1px solid #DDD7CD !important;
}
.sticky-atc__details__title {
font-family: 'Playfair Display', Georgia, serif !important;
color: #2C2420 !important;
}
/* Breadcrumbs */
.breadcrumbs, .breadcrumbs a {
font-family: 'Outfit', sans-serif !important;
font-size: .6rem !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #6E665F !important;
}
.breadcrumbs a:hover { color: #7A6548 !important; }
/* ── Symmetry Collection Page ── */
.product-block { background: transparent !important; }
.product-block__image {
background: #EDE8E0 !important;
overflow: hidden !important;
}
.product-block__image img {
transition: transform 0.9s cubic-bezier(.19,1,.22,1) !important;
}
.product-block:hover .product-block__image img {
transform: scale(1.04) !important;
}
.product-block__title {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: .88rem !important;
color: #2C2420 !important;
}
.product-block__title a:hover { color: #7A6548 !important; }
.product-block__price .price__current {
font-family: 'Playfair Display', Georgia, serif !important;
color: #7A6548 !important;
}
.product-label--sale {
background: #7A6548 !important;
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
border-radius: 0 !important;
border: none !important;
}
.product-label--new-in,
.product-label--new-in span {
background: transparent !important;
color: #7A6548 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .5rem !important;
letter-spacing: .14em !important;
border: none !important;
box-shadow: none !important;
}
.product-label--sale span {
color: #FAF7F2 !important;
background: transparent !important;
border: none !important;
}
.price-label--sale,
span.price-label--sale {
background: #7A6548 !important;
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .5rem !important;
letter-spacing: .1em !important;
border: none !important;
border-radius: 0 !important;
padding: .15rem .45rem !important;
}
.product-price--on-sale .price__current {
color: #7A6548 !important;
}
/* Faceted filters */
.faceted-filters { background: #EDE8E0 !important; border: 1px solid #DDD7CD !important; }
/* ── Cart Drawer — Base ── */
.cart-drawer {
background: #2C2420 !important;
color: #FAF7F2 !important;
}
/* ── Layout: force cart-form to fit inside drawer ── */
cart-form.cart-drawer {
flex: 1 1 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Content scrolls, cross-sell flows after items */
.cart-drawer__content {
justify-content: flex-start !important;
}
/* Footer — pinned at bottom, always visible when cart has items */
.cart-drawer__footer {
flex: 0 0 auto !important;
border-top: none !important;
background: rgba(255,255,255,.02) !important;
padding-top: .25rem !important;
}
.cart-drawer__footer:not(.cart-drawer__footer--hidden) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Scrollbar on content area */
.cart-drawer__content::-webkit-scrollbar {
width: 3px !important;
}
.cart-drawer__content::-webkit-scrollbar-track {
background: transparent !important;
}
.cart-drawer__content::-webkit-scrollbar-thumb {
background: rgba(122,101,72,.4) !important;
border-radius: 2px !important;
}
.cart-drawer__content {
scrollbar-width: thin !important;
scrollbar-color: rgba(122,101,72,.4) transparent !important;
}
/* Header */
.cart-drawer__header {
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.cart-drawer h2, .cart-drawer h3,
.cart-drawer .cart-drawer__title {
font-family: 'Playfair Display', Georgia, serif !important;
color: #FAF7F2 !important;
font-size: 1.1rem !important;
}
.cart-drawer .cart-drawer__title-count {
font-family: 'Outfit', sans-serif !important;
font-size: .7em !important;
font-weight: 300 !important;
color: #D1C9BE !important;
}
/* Close button */
.cart-drawer .drawer__close-btn {
color: #D1C9BE !important;
transition: color .25s !important;
}
.cart-drawer .drawer__close-btn:hover {
color: #FAF7F2 !important;
}
/* ── Cart Items ── */
/* Item separator — single subtle line, override theme's border-top */
.cart-drawer .cart-item {
border: none !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
/* Larger product image in cart */
.cart-drawer .cart-item__image {
width: 140px !important;
}
.cart-drawer .cart-item__title {
font-family: 'Playfair Display', Georgia, serif !important;
color: #FAF7F2 !important;
font-size: .88rem !important;
font-weight: 500 !important;
line-height: 1.3 !important;
}
.cart-drawer .cart-item__title a {
color: #FAF7F2 !important;
}
/* Variant labels (Size: 9, Colour: Black) */
.cart-drawer .cart-item__variant {
font-family: 'Outfit', sans-serif !important;
font-size: .62rem !important;
color: #D1C9BE !important;
letter-spacing: .04em !important;
line-height: 1.5 !important;
}
.cart-drawer .cart-item__variant-label {
color: #A59E96 !important;
}
/* Item price */
.cart-drawer .cart-item__price {
font-family: 'Playfair Display', Georgia, serif !important;
color: #C4A96C !important;
font-size: .9rem !important;
}
.cart-drawer .cart-item__selling-price {
color: #C4A96C !important;
}
/* Compare-at / struck-out prices */
.cart-drawer .struck-out-price {
color: #A59E96 !important;
opacity: .7 !important;
}
/* Remove link — always visible in drawer (base theme hides on mobile) */
.cart-drawer .cart-item__remove {
display: block !important;
margin-top: 6px !important;
font-family: 'Outfit', sans-serif !important;
font-size: .55rem !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: #A59E96 !important;
text-decoration: none !important;
border-bottom: none !important;
transition: color .25s !important;
}
.cart-drawer .cart-item__remove:hover {
color: #FAF7F2 !important;
}
/* ── Footer (pinned) ── */
.cart-drawer .subtotal {
font-family: 'Playfair Display', Georgia, serif !important;
color: #FAF7F2 !important;
font-size: 1rem !important;
}
.cart-drawer .subtotal .theme-money {
color: #C4A96C !important;
font-size: 1.05rem !important;
}
/* Tax / shipping text */
.cart-drawer .cart-policies {
font-family: 'Outfit', sans-serif !important;
font-size: .6rem !important;
color: #A59E96 !important;
letter-spacing: .04em !important;
}
.cart-drawer .cart-policies a {
color: #D1C9BE !important;
text-decoration: underline !important;
}
/* Order note */
.cart-drawer .toggle-target-toggler--is-hidden {
font-family: 'Outfit', sans-serif !important;
font-size: .6rem !important;
letter-spacing: .08em !important;
color: #D1C9BE !important;
}
.cart-drawer .cart-drawer__note textarea {
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.1) !important;
color: #FAF7F2 !important;
font-family: 'Cormorant Garamond', serif !important;
font-size: .88rem !important;
}
/* Applied discount chip — compact, no surrounding dividers (updated 16 May 2026) */
.cart-drawer .cart-item__item-discounts{
margin: .4rem 0 0 !important;
padding: 0 !important;
border: none !important;
}
.cart-drawer .cart-discount-list{
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.cart-drawer .cart-discount,
.cart-drawer .cart-discount--inline{
display: inline-flex !important;
align-items: center !important;
gap: .35rem !important;
padding: .2rem .55rem !important;
margin: 0 !important;
background: rgba(196,169,108,.08) !important;
border: 1px solid rgba(196,169,108,.2) !important;
border-radius: 3px !important;
width: auto !important;
}
.cart-drawer .cart-discount__label{
display: inline-flex !important;
align-items: center !important;
gap: .3rem !important;
}
.cart-drawer .cart-discount__title {
font-family: 'Outfit', sans-serif !important;
color: #C4A96C !important;
font-size: .55rem !important;
font-weight: 400 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.cart-drawer .cart-discount__amount {
color: #C4A96C !important;
font-family: 'Outfit', sans-serif !important;
font-size: .55rem !important;
font-weight: 400 !important;
letter-spacing: .04em !important;
margin-left: .25rem !important;
}
.cart-drawer .cart-discount__icon{
display: inline-flex !important;
align-items: center !important;
}
.cart-drawer .cart-discount__icon svg {
color: #C4A96C !important;
width: 11px !important;
height: 11px !important;
}
/* Free shipping bar — hidden in drawer */
.cart-drawer .free-shipping-bar,
.cart-drawer .free-shipping-bar__message,
.cart-drawer .free-shipping-bar__bar {
display: none !important;
}
/* Hide the free shipping bar container + its border */
.cart-drawer .cart-drawer__content-item:has(.free-shipping-bar) {
display: none !important;
}
/* ── Cross-sell / "You may also like" ── */
.cart-drawer .cart-item-upsells {
border-top: 1px solid rgba(255,255,255,.06) !important;
padding-bottom: 8px !important;
}
/* Uniform product images in cross-sell — force consistent square sizing */
.cart-drawer .cart-item-upsells .image-cont {
overflow: hidden !important;
background: #EDE8E0 !important;
border-radius: 3px !important;
}
/* Force square aspect ratio regardless of product image dimensions */
.cart-drawer .cart-item-upsells .img-ar {
--aspect-ratio: 1 !important;
}
.cart-drawer .cart-item-upsells .img-ar::before {
padding-top: 100% !important;
}
/* All images fill the square box uniformly */
.cart-drawer .cart-item-upsells .image-cont img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
padding: 4% !important;
}
/* Section heading */
.cart-drawer .cart-item-upsells .product-info-label {
font-family: 'Outfit', sans-serif !important;
font-size: .58rem !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #D1C9BE !important;
}
/* Carousel nav arrows — styled for dark drawer */
.cart-drawer .cart-item-upsells .slider-nav {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
gap: 6px !important;
}
.cart-drawer .cart-item-upsells .slider-nav__btn {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 30px !important;
height: 30px !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(255,255,255,.15) !important;
border-radius: 50% !important;
background: rgba(255,255,255,.05) !important;
color: #D1C9BE !important;
padding: 0 !important;
transition: border-color .25s, color .25s, background .25s !important;
}
.cart-drawer .cart-item-upsells .slider-nav__btn:hover {
border-color: rgba(196,169,108,.4) !important;
color: #FAF7F2 !important;
background: rgba(255,255,255,.08) !important;
}
.cart-drawer .cart-item-upsells .slider-nav__btn svg {
width: 16px !important;
height: 16px !important;
}
.cart-drawer .cart-item-upsells .slider-nav__btn[disabled] {
opacity: .3 !important;
visibility: visible !important;
}
/* Override colour scheme on cross-sell carousel — force dark theme throughout */
.cart-drawer .collection-slider.use-color-scheme,
.cart-drawer .cart-item-upsells .use-color-scheme--1,
.cart-drawer .cart-item-upsells [class*="use-color-scheme"] {
--heading-color: 250, 247, 242 !important;
--text-color: 209, 201, 190 !important;
--link-color: 209, 201, 190 !important;
--body-text-color: 209, 201, 190 !important;
--body-bg-color: 44, 36, 32 !important;
--bg: transparent !important;
--bg-color: 44, 36, 32 !important;
--color-scheme-1-text-color: 209, 201, 190 !important;
--color-scheme-1-head-color: 250, 247, 242 !important;
--color-scheme-1-link-color: 209, 201, 190 !important;
--color-scheme-1-color: 44, 36, 32 !important;
color: rgb(209, 201, 190) !important;
background: transparent !important;
}
/* Force transparent background on ALL card containers — only .image-cont keeps cream */
.cart-drawer .cart-item-upsells .product-block,
.cart-drawer .cart-item-upsells .block-inner,
.cart-drawer .cart-item-upsells .block-inner-inner,
.cart-drawer .cart-item-upsells .slider__item,
.cart-drawer .cart-item-upsells .product-block__detail,
.cart-drawer .cart-item-upsells .product-block__detail .inner,
.cart-drawer .cart-item-upsells .product-block__detail .innerer,
.cart-drawer .cart-item-upsells .product-link,
.cart-drawer .cart-item-upsells .product-grid,
.cart-drawer .cart-item-upsells .collection-slider {
background: transparent !important;
background-color: transparent !important;
}
/* Tighten product card spacing inside drawer */
.cart-drawer .product-grid .product-block__detail {
margin-bottom: 8px !important;
padding: 6px 4px 0 !important;
text-align: left !important;
}
.cart-drawer .product-block .block-inner .vendor {
margin: .4em 0 .2em !important;
display: none !important;
}
/* Product card titles — cream on dark */
.cart-drawer .product-block__title {
color: #FAF7F2 !important;
font-family: 'Playfair Display', Georgia, serif !important;
font-size: .76rem !important;
font-weight: 500 !important;
line-height: 1.3 !important;
}
.cart-drawer .product-block__title a {
color: #FAF7F2 !important;
}
.cart-drawer .product-block__title a:hover {
color: #C4A96C !important;
}
/* Product card prices — brass */
.cart-drawer .product-block .price,
.cart-drawer .product-block .price__current,
.cart-drawer .product-block .product-price {
color: #C4A96C !important;
font-family: 'Playfair Display', Georgia, serif !important;
font-size: .8rem !important;
}
.cart-drawer .product-block .price__was {
color: #A59E96 !important;
}
/* Product card images — cream bg, rounded, full-width within card */
.cart-drawer .product-block .image-cont {
background: #EDE8E0 !important;
border-radius: 3px !important;
max-width: 100% !important;
margin: 0 !important;
}
/* ═══════════════════════════════════════════════════════════
CART DRAWER CROSS-SELLS — unified card design
White image tile → text directly on dark drawer bg, no gap, no double-card.
═══════════════════════════════════════════════════════════ */
/* (Swatches now shown in 2x2 — see YOU MAY LIKE section below) */
/* Kill quick-buy hooks */
.cart-drawer .cart-item-upsells .product-block__quick-buy,
.cart-drawer .cart-item-upsells .product-quick-buy-container,
.cart-drawer .cart-item-upsells .quick-buy-btn-wrap,
.cart-drawer .cart-item-upsells .product-block__quick-add {
display: none !important;
}
/* Force detail block transparent (no second white card) + zero gap above */
.cart-drawer .cart-item-upsells .product-block__detail,
.cart-drawer .cart-item-upsells .product-block__detail .inner,
.cart-drawer .cart-item-upsells .product-block__detail .innerer {
background: transparent !important;
background-color: transparent !important;
margin: 0 !important;
padding: .55rem .15rem 0 !important;
text-align: left !important;
border: none !important;
}
/* Make sure the card wrapper has no background bleed either */
.cart-drawer .cart-item-upsells .slider__item,
.cart-drawer .cart-item-upsells .product-block,
.cart-drawer .cart-item-upsells .product-block .block-inner,
.cart-drawer .cart-item-upsells .product-block .block-inner-inner,
.cart-drawer .cart-item-upsells .product-link {
background: transparent !important;
background-color: transparent !important;
}
/* Image tile — clean white square, no border-radius for premium editorial feel */
.cart-drawer .cart-item-upsells .image-cont {
background: #FFFFFF !important;
border-radius: 0 !important;
border: none !important;
margin: 0 !important;
}
.cart-drawer .cart-item-upsells .image-cont img {
padding: 6% !important;
}
/* Title — Playfair, cream on dark, 2-line clamp */
.cart-drawer .cart-item-upsells .product-block__title,
.cart-drawer .cart-item-upsells .product-block__title a,
.cart-drawer .cart-item-upsells .product-block__title a:visited,
.cart-drawer .cart-item-upsells .product-block__title a:hover {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: .82rem !important;
font-weight: 400 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
margin: 0 0 .25rem !important;
color: #FAF7F2 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.cart-drawer .cart-item-upsells .product-block__title a:hover {
color: #C4A96C !important;
}
/* Hide category/vendor eyebrow — keeps it minimal */
.cart-drawer .cart-item-upsells .product-block__subtitle,
.cart-drawer .cart-item-upsells .product-block__vendor,
.cart-drawer .cart-item-upsells .vendor {
display: none !important;
}
/* Price — brass Playfair, compact */
.cart-drawer .cart-item-upsells .product-block__price,
.cart-drawer .cart-item-upsells .product-price,
.cart-drawer .cart-item-upsells .price,
.cart-drawer .cart-item-upsells .price__default,
.cart-drawer .cart-item-upsells .price__current,
.cart-drawer .cart-item-upsells .price .amount {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: .8rem !important;
font-weight: 400 !important;
color: #C4A96C !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: 0 !important;
}
.cart-drawer .cart-item-upsells .price__was,
.cart-drawer .cart-item-upsells .price--compare {
color: #A59E96 !important;
font-size: .72rem !important;
margin-right: .35rem !important;
text-decoration: line-through !important;
}
/* Sale badge — brass, top-left of image tile, smaller */
.cart-drawer .cart-item-upsells .product-label,
.cart-drawer .cart-item-upsells .product-label--sale,
.cart-drawer .cart-item-upsells .price-label--sale {
font-family: 'Outfit', sans-serif !important;
font-size: .48rem !important;
letter-spacing: .14em !important;
padding: .25rem .55rem !important;
background: #7A6548 !important;
color: #FAF7F2 !important;
border: none !important;
}
/* General buttons in drawer (not checkout) */
.cart-drawer .cart-item-upsells .btn,
.cart-drawer .cart-info-block .btn {
background: #7A6548 !important;
color: #FAF7F2 !important;
}
/* ── Cross-sell: comprehensive text colour overrides ── */
/* Catch-all: every text element inside the cross-sell area must be light */
.cart-drawer .cart-item-upsells,
.cart-drawer .cart-item-upsells .product-block,
.cart-drawer .cart-item-upsells .product-block__detail,
.cart-drawer .cart-item-upsells .product-block__detail .inner,
.cart-drawer .cart-item-upsells .product-block__detail .innerer,
.cart-drawer .cart-item-upsells .product-link,
.cart-drawer .cart-item-upsells .product-link:not(.btn),
.cart-drawer .cart-item-upsells .block-inner,
.cart-drawer .cart-item-upsells .block-inner-inner {
color: #D1C9BE !important;
}
/* Product titles — cream */
.cart-drawer .cart-item-upsells .product-block__title,
.cart-drawer .cart-item-upsells .product-block__title a,
.cart-drawer .cart-item-upsells .product-block__title a:visited {
color: #FAF7F2 !important;
}
/* Product subtitles */
.cart-drawer .cart-item-upsells .product-block__subtitle {
color: #D1C9BE !important;
}
/* Prices — brass */
.cart-drawer .cart-item-upsells .product-price,
.cart-drawer .cart-item-upsells .price,
.cart-drawer .cart-item-upsells .price__default,
.cart-drawer .cart-item-upsells .price__current,
.cart-drawer .cart-item-upsells .price .amount,
.cart-drawer .cart-item-upsells .price__from,
.cart-drawer .cart-item-upsells .price-label {
color: #C4A96C !important;
}
/* Compare-at / was prices */
.cart-drawer .cart-item-upsells .price__was,
.cart-drawer .cart-item-upsells .price--compare {
color: #A59E96 !important;
}
/* Vendor text */
.cart-drawer .cart-item-upsells .vendor {
color: #A59E96 !important;
}
/* Product labels (sale / new badges) */
.cart-drawer .cart-item-upsells .product-label {
color: #FAF7F2 !important;
}
/* Sale badge — brass bg */
.cart-drawer .cart-item-upsells .product-label--sale,
.cart-drawer .cart-item-upsells .image-label {
background: rgba(122,101,72,.85) !important;
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .52rem !important;
letter-spacing: .1em !important;
}
/* ── Cross-sell: kill vertical lines on product cards ── */
/* Hide image-page-buttons (prev/next arrows on product images) */
.cart-drawer .cart-item-upsells .image-page-button,
.cart-drawer .cart-item-upsells .image-page-button--previous,
.cart-drawer .cart-item-upsells .image-page-button--next {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.cart-drawer .cart-item-upsells .image-page-button::after,
.cart-drawer .cart-item-upsells .image-page-button::before {
display: none !important;
content: none !important;
}
/* Remove any borders on slider items */
.cart-drawer .cart-item-upsells .slider__item {
border: none !important;
border-left: none !important;
border-right: none !important;
border-inline-start: none !important;
border-inline-end: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Remove borders/shadows on product blocks and their inner wrappers */
.cart-drawer .cart-item-upsells .product-block,
.cart-drawer .cart-item-upsells .product-block .block-inner,
.cart-drawer .cart-item-upsells .product-block .block-inner-inner,
.cart-drawer .cart-item-upsells .product-block__detail,
.cart-drawer .cart-item-upsells .product-block__detail .inner,
.cart-drawer .cart-item-upsells .product-block__detail .innerer {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Kill pseudo-elements on block-inner that could create lines */
.cart-drawer .cart-item-upsells .block-inner::before,
.cart-drawer .cart-item-upsells .block-inner::after {
display: none !important;
content: none !important;
}
/* Remove scrollbar track/thumb decorations from slider */
.cart-drawer .cart-item-upsells .slider::-webkit-scrollbar {
display: none !important;
}
.cart-drawer .cart-item-upsells .slider::-webkit-scrollbar-track,
.cart-drawer .cart-item-upsells .slider::-webkit-scrollbar-thumb {
display: none !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.cart-drawer .cart-item-upsells .slider {
scrollbar-width: none !important;
}
/* Remove any borders on the product grid */
.cart-drawer .cart-item-upsells .product-grid {
border: none !important;
box-shadow: none !important;
}
/* Remove image dots (pagination dots below images) */
.cart-drawer .cart-item-upsells .product-block__image-dots {
display: none !important;
}
/* ── Forms / Inputs ── */
input, select, textarea {
background: #FAF7F2 !important;
border: 1px solid #DDD7CD !important;
color: #2C2420 !important;
font-family: 'Cormorant Garamond', serif !important;
border-radius: 0 !important;
}
input::placeholder, textarea::placeholder { color: #7A7068 !important; }
input:focus, select:focus, textarea:focus {
border-color: #7A6548 !important;
outline: none !important;
box-shadow: 0 0 0 1px #7A6548 !important;
}
/* ── Search ── */
.predictive-search { background: #2C2420 !important; }
.predictive-search input {
font-family: 'Playfair Display', Georgia, serif !important;
color: #FAF7F2 !important;
}
/* ── Pagination ── */
.pagination {
border-top: 1px solid #DDD7CD !important;
padding-top: 1.5rem !important;
margin-top: 1.5rem !important;
text-align: center !important;
}
.pagination a, .pagination span {
font-family: 'Outfit', sans-serif !important;
font-size: .72rem !important;
font-weight: 400 !important;
letter-spacing: .06em !important;
color: #635A53 !important;
padding: .4rem .7rem !important;
transition: color .25s, background .25s !important;
}
.pagination a:hover {
color: #7A6548 !important;
}
.pagination .current,
.pagination .pagination__item--current {
color: #FAF7F2 !important;
background: #7A6548 !important;
}
/* ── Empty filter state ── */
.template-collection .collection-listing--empty,
.template-collection .no-results,
.template-collection .collection--empty {
font-family: 'Cormorant Garamond', serif !important;
font-size: 1.05rem !important;
font-weight: 300 !important;
color: #635A53 !important;
text-align: center !important;
padding: clamp(3rem, 6vw, 5rem) 1.5rem !important;
}
/* ── Miscellaneous ── */
hr, .divider { border-color: #DDD7CD !important; }
/* ── Section headings ── */
.section-title {
font-family: 'Playfair Display', Georgia, serif !important;
color: #2C2420 !important;
}
/* Footer override — compact on desktop too */
#pagefooter, .section-footer {
background: #2C2420 !important;
border-top: 1px solid rgba(255,255,255,.08) !important;
color: #FAF7F2 !important;
}
.section-footer__row--blocks {
padding-top: 35px !important;
padding-bottom: 30px !important;
}
.section-footer__row-lower {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.section-footer h4, .section-footer__menu-block__title {
font-family: 'Outfit', sans-serif !important;
font-size: .62rem !important;
letter-spacing: .28em !important;
text-transform: uppercase !important;
color: #C4A96C !important;
}
.section-footer a {
color: #D1C9BE !important;
font-family: 'Cormorant Garamond', serif !important;
}
.section-footer a:hover { color: #C4A96C !important; }
.section-footer__lower, .section-footer__copyright {
border-top: 1px solid rgba(255,255,255,.08) !important;
color: #A59E96 !important;
}
.section-footer__payment-icons svg { opacity: 0.5 !important; }
/* Announcement bar */
.announcement-bar {
background: #2C2420 !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
padding-top: .35rem !important;
padding-bottom: .35rem !important;
}
.announcement-bar a, .announcement-bar__announcement {
color: #D1C9BE !important;
font-family: 'Outfit', sans-serif !important;
font-size: .62rem !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
/* ── SYMMETRY HEADER — dark chocolate brown, premium ── */
.section-header,
.pageheader,
page-header,
#pageheader {
background: #2C2420 !important;
background-color: #2C2420 !important;
--header-bg-col: #2C2420 !important;
border-bottom: 1px solid #4A3F38 !important;
}
/* Logo area — match header, remove bottom border line */
.pageheader .logo-area {
background: transparent !important;
color: #FAF7F2 !important;
border-bottom: none !important;
border-top: none !important;
}
/* Hide the separate nav bar but keep dropdowns functional */
#main-nav {
height: 0 !important;
overflow: visible !important;
position: relative !important;
z-index: 3999 !important;
}
#main-nav .navigation--main {
visibility: hidden !important;
overflow: visible !important;
border: 0 !important;
}
#main-nav .navigation--main .navigation__tier-1 {
height: 0 !important;
}
#main-nav .navigation--main .navigation__tier-1 > .navigation__item > .navigation__link,
#main-nav .navigation--main .navigation__tier-1 > .navigation__item > .navigation__children-toggle {
display: none !important;
}
#main-nav .navigation .navigation__item--show-children .navigation__tier-2-container {
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
top: 0 !important;
background: #FAF7F2 !important;
border-top: 2px solid #7A6548 !important;
border-bottom: 1px solid #DDD7CD !important;
box-shadow: 0 12px 40px rgba(44,36,32,.1), 0 4px 12px rgba(44,36,32,.05) !important;
}
/* Hide breadcrumbs / browse trees on all pages */
.breadcrumbs {
display: none !important;
}
/* Force the inline proxy nav to always show — override inline-menu-center layout */
@media (min-width: 768px) {
/* ── Single-bar header: logo left | nav centre | icons right ── */
/* Grid container */
.pageheader--layout-inline-menu-center .logo-area {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
gap: 0 !important;
}
/* Column 1 — Logo (left) */
.pageheader--layout-inline-menu-center .logo-area__middle {
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: start !important;
position: static !important;
order: unset !important;
flex: unset !important;
margin: 0 !important;
max-width: none !important;
text-align: left !important;
}
/* Column 2 — Nav links (dead centre) */
.pageheader--layout-inline-menu-center .logo-area__left {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: center !important;
position: static !important;
display: block !important;
flex: unset !important;
order: unset !important;
margin: 0 !important;
overflow: visible !important;
width: auto !important;
min-width: 0 !important;
}
.pageheader--layout-inline-menu-center .logo-area__left__inner {
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 0 !important;
transform: none !important;
overflow: visible !important;
}
/* Column 3 — Icons (right, vertically centred) */
.pageheader--layout-inline-menu-center .logo-area__right {
grid-column: 3 !important;
grid-row: 1 !important;
justify-self: end !important;
align-self: stretch !important;
display: flex !important;
align-items: center !important;
position: static !important;
flex: unset !important;
margin: 0 !important;
}
}
/* Reset ALL absolute positioning inside the nav — let grid handle layout.
Force-show inline nav at desktop regardless of pageheader--layout-inline-permitted
(the theme's JS width-fit check intermittently fails on the homepage and removes
that class, which previously hid the menu on / desktop). */
@media (min-width: 768px) {
.pageheader .logo-area__left,
.pageheader .logo-area__left__inner,
.pageheader .navigation--left,
.pageheader .navigation--left .navigation__tier-1-container,
.pageheader .navigation--left .navigation__tier-1 {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.pageheader .navigation--left {
position: static !important;
height: auto !important;
width: auto !important;
}
.pageheader .navigation--left .navigation__tier-1-container {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
margin-top: 0 !important;
width: auto !important;
}
.pageheader .navigation--left .navigation__tier-1 > .navigation__item {
display: list-item !important;
visibility: visible !important;
}
}
.pageheader .navigation.navigation--left {
border: 0 !important;
color: inherit !important;
}
.pageheader .navigation.navigation--left .navigation__tier-1 {
background: transparent !important;
border: none !important;
display: flex !important;
align-items: center !important;
gap: 0 !important;
}
/* Inline nav link colours — cream on dark */
.pageheader .navigation--left .navigation__link {
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .68rem !important;
font-weight: 300 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
padding: 8px .9rem !important;
white-space: nowrap !important;
}
/* Centre nav vertically — stretch column then flex-center content */
@media (min-width: 768px) {
.pageheader--layout-inline-menu-center .logo-area__left {
align-self: stretch !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.pageheader .logo-area__left__inner {
display: flex !important;
align-items: center !important;
}
.pageheader .navigation--left {
display: flex !important;
align-items: center !important;
}
.pageheader .navigation--left .navigation__tier-1-container {
display: flex !important;
align-items: center !important;
}
}
.pageheader .navigation--left .navigation__link:hover {
color: #C4A96C !important;
}
.pageheader .navigation--left .featured-link > .navigation__link {
color: #C4A96C !important;
font-weight: 400 !important;
}
/* Pageheader — single unified bar, even spacing */
#pageheader {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
.pageheader .logo-area {
align-items: center !important;
}
.pageheader__layout {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
/* Nav links — cream on dark header */
.navigation__link {
font-family: 'Outfit', sans-serif !important;
font-size: .72rem !important;
font-weight: 400 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
color: #FAF7F2 !important;
transition: color .25s !important;
}
.navigation__link:hover { color: #C4A96C !important; }
.navigation__tier-1 > .navigation__item > .navigation__link::before {
background-color: #C4A96C !important;
transform: scaleX(0) !important;
transition: transform .25s ease !important;
}
.navigation__tier-1 > .navigation__item > .navigation__link:hover::before {
transform: scaleX(1) !important;
}
/* Hide the permanent active-page underline */
.navigation__tier-1 > .navigation__item.navigation__item--active > .navigation__link::before {
transform: scaleX(0) !important;
}
.navigation__tier-1 > .navigation__item.navigation__item--active > .navigation__link:hover::before {
transform: scaleX(1) !important;
}
.logotext {
font-family: 'Playfair Display', Georgia, serif !important;
color: #FAF7F2 !important;
}
/* ── MEGA MENU / DROPDOWN — cream, readable ── */
.navigation .navigation__tier-2-container {
background: #FAF7F2 !important;
border-top: 2px solid #7A6548 !important;
border-bottom: 1px solid #DDD7CD !important;
box-shadow: 0 12px 40px rgba(44,36,32,.1), 0 4px 12px rgba(44,36,32,.05) !important;
}
.navigation .navigation__tier-2 .navigation__link,
.navigation .navigation__tier-3 .navigation__link {
font-family: 'Outfit', sans-serif !important;
font-size: .72rem !important;
font-weight: 300 !important;
letter-spacing: .08em !important;
color: #2C2420 !important;
padding: 6px 0 !important;
transition: color .2s, padding-left .2s !important;
}
.navigation .navigation__tier-2 .navigation__link:hover,
.navigation .navigation__tier-3 .navigation__link:hover {
color: #7A6548 !important;
padding-left: 4px !important;
}
/* Column titles in mega menu */
.navigation .navigation__columns .navigation__column-title {
font-family: 'Outfit', sans-serif !important;
font-size: .62rem !important;
font-weight: 400 !important;
letter-spacing: .2em !important;
text-transform: uppercase !important;
color: #7A6548 !important;
opacity: 1 !important;
padding-bottom: 10px !important;
margin-bottom: 6px !important;
border-bottom: 1px solid #DDD7CD !important;
}
/* Promo images in mega menu */
.menu-promotion__text {
font-family: 'Outfit', sans-serif !important;
font-size: .7rem !important;
font-weight: 400 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: #2C2420 !important;
padding-top: 8px !important;
}
.menu-promotion__image img {
border: 1px solid #DDD7CD !important;
transition: transform .6s cubic-bezier(.19,1,.22,1) !important;
}
.menu-promotion__image:hover img {
transform: scale(1.03) !important;
}
/* Small dropdown (non-mega) */
.navigation .navigation__item--with-small-menu > .navigation__tier-2-container {
background: #FAF7F2 !important;
border: 1px solid #DDD7CD !important;
border-top: 2px solid #7A6548 !important;
box-shadow: 0 8px 24px rgba(44,36,32,.08) !important;
}
/* hCaptcha hide rules removed 22 Apr — over-aggressive selectors broke other parts of
the site. Revisit later with a narrower fix once we identify the exact widget element. */
/* ── Brand-aligned colour swatches for filter sidebar + variant pickers ──
Shopify's auto-colour for names like "Red"/"Blue"/"Green" maps to bright primary hex
values that clash with the heritage palette. Override common colour names with rich,
muted, brand-appropriate tones. data-swatch matches lowercase variant value. */
[data-swatch="red"],
[data-swatch="oxblood"],
[data-swatch="burgundy"],
[data-swatch="wine"],
[data-swatch="cordovan"],
[data-swatch="merlot"] { --swatch-background-color: #5C2018 !important; --native-swatch-color: #5C2018 !important; }
[data-swatch="brown"],
[data-swatch="dark brown"],
[data-swatch="chocolate"],
[data-swatch="espresso"] { --swatch-background-color: #3E2A1E !important; --native-swatch-color: #3E2A1E !important; }
[data-swatch="tan"],
[data-swatch="cognac"],
[data-swatch="caramel"],
[data-swatch="chestnut"],
[data-swatch="walnut"] { --swatch-background-color: #8A5A38 !important; --native-swatch-color: #8A5A38 !important; }
[data-swatch="light brown"],
[data-swatch="honey"],
[data-swatch="camel"] { --swatch-background-color: #B4865A !important; --native-swatch-color: #B4865A !important; }
[data-swatch="black"] { --swatch-background-color: #1A1714 !important; --native-swatch-color: #1A1714 !important; }
[data-swatch="navy"],
[data-swatch="dark blue"],
[data-swatch="midnight"] { --swatch-background-color: #1F2A40 !important; --native-swatch-color: #1F2A40 !important; }
[data-swatch="blue"] { --swatch-background-color: #2D4866 !important; --native-swatch-color: #2D4866 !important; }
[data-swatch="green"],
[data-swatch="dark green"],
[data-swatch="forest"],
[data-swatch="hunter"] { --swatch-background-color: #2E3D26 !important; --native-swatch-color: #2E3D26 !important; }
[data-swatch="olive"],
[data-swatch="khaki"],
[data-swatch="loden"] { --swatch-background-color: #6B6638 !important; --native-swatch-color: #6B6638 !important; }
[data-swatch="grey"],
[data-swatch="gray"],
[data-swatch="charcoal"] { --swatch-background-color: #4A4640 !important; --native-swatch-color: #4A4640 !important; }
[data-swatch="light grey"],
[data-swatch="light gray"],
[data-swatch="stone"] { --swatch-background-color: #B8B0A4 !important; --native-swatch-color: #B8B0A4 !important; }
[data-swatch="cream"],
[data-swatch="ivory"],
[data-swatch="off white"],
[data-swatch="off-white"] { --swatch-background-color: #EDE8E0 !important; --native-swatch-color: #EDE8E0 !important; }
[data-swatch="white"] { --swatch-background-color: #FAF7F2 !important; --native-swatch-color: #FAF7F2 !important; box-shadow: inset 0 0 0 1px #DDD7CD; }
[data-swatch="beige"],
[data-swatch="sand"] { --swatch-background-color: #C9B89A !important; --native-swatch-color: #C9B89A !important; }
[data-swatch="suede"],
[data-swatch="taupe"] { --swatch-background-color: #8B7B68 !important; --native-swatch-color: #8B7B68 !important; }
[data-swatch="burgundy suede"],
[data-swatch="oxblood suede"] { --swatch-background-color: #5C2018 !important; --native-swatch-color: #5C2018 !important; }
[data-swatch="brown suede"] { --swatch-background-color: #5A3E2A !important; --native-swatch-color: #5A3E2A !important; }
[data-swatch="navy suede"] { --swatch-background-color: #2A3548 !important; --native-swatch-color: #2A3548 !important; }
/* Small dropdown — pin to viewport via position:fixed so JS can centre it precisely
under the proxy-nav trigger using viewport coordinates (no offsetParent maths needed). */
@media (min-width: 1025px) {
#main-nav .navigation .navigation__item--with-small-menu > .navigation__tier-2-container {
position: fixed !important;
top: var(--theme-header-height, 88px) !important;
width: max-content !important;
min-width: 200px !important;
max-width: 280px !important;
transform: none !important;
margin: 0 !important;
}
}
/* Featured/Sale nav link */
.navigation .featured-link > .navigation__link {
color: #7A6548 !important;
font-weight: 500 !important;
}
/* ── MOBILE NAV — dark overlay ── */
.mobile-navigation-drawer {
background: #2C2420 !important;
}
/* Mobile submenu: proper left padding so links don't touch the edge */
.mobile-navigation-drawer .navigation__tier-2 {
padding-left: 8px !important;
}
/* Hide "Shop Now" promo text in mobile menu if present */
.mobile-navigation-drawer .navigation__mobile-promo,
.mobile-navigation-drawer .menu-promotion {
display: none !important;
}
/* Cart count — small, subtle */
.cart-link__bubble, .header-cart-link__count {
background: #7A6548 !important;
color: #FAF7F2 !important;
border: none !important;
box-shadow: none !important;
}
/* Hide reviews widget on heritage story section */
.jw-story-section [class*="trustpilot"],
.jw-story-section [class*="reviews"],
.jw-story-section [data-trustpilot],
.jw-story-section iframe[src*="trustpilot"],
.jw-story-section iframe[src*="reviews"],
.jw-story-section .trustpilot-widget,
.jw-story-section .reviewsio-widget {
display: none !important;
}
/* Scrolling banner */
.scrolling-banner {
background: #EDE8E0 !important;
border-top: 1px solid #DDD7CD !important;
border-bottom: 1px solid #DDD7CD !important;
}
.scrolling-banner__text {
font-family: 'Playfair Display', Georgia, serif !important;
color: #2C2420 !important;
}
/* Testimonials */
.testimonials blockquote, .testimonials .quote {
font-family: 'Cormorant Garamond', serif !important;
font-style: italic !important;
color: #2C2420 !important;
}
/* Logo list */
.logo-list { background: #FAF7F2 !important; }
.logo-list img { filter: brightness(0) invert(0.4) !important; opacity: 0.4 !important; }
.logo-list img:hover { opacity: 0.7 !important; }
/* Newsletter */
.newsletter { background: #EDE8E0 !important; }
/* Rich text */
.rich-text { background: #FAF7F2 !important; }
/* Gallery */
.gallery-item__overlay { background: rgba(44,36,32,0.4) !important; }
.gallery-item__text { font-family: 'Playfair Display', Georgia, serif !important; color: #FAF7F2 !important; }
/* Image with text */
.image-with-text { background: #FAF7F2 !important; }
/* Video sections */
.background-video, .video-with-text { background: #FAF7F2 !important; }
/* Contact form */
.main-contact { background: #FAF7F2 !important; }
/* Cross page promos */
.cross-page-promos { background: #EDE8E0 !important; border-top: 1px solid #DDD7CD !important; }
.cross-page-promos a { color: #635A53 !important; }
.cross-page-promos svg { stroke: #7A6548 !important; }
/* Compact messages / store messages */
.compact-messages, .store-messages { background: #FAF7F2 !important; }
.compact-messages svg, .store-messages svg { color: #7A6548 !important; }
/* Featured collection heading override */
.section-title .rte a { color: #7A6548 !important; }
/* Added notification */
.added-notification {
background: #2C2420 !important;
border: 1px solid rgba(255,255,255,.08) !important;
color: #FAF7F2 !important;
}
/* Pop-up */
.pop-up__panel { background: #2C2420 !important; color: #FAF7F2 !important; }
/* ═══════════════════════════════════════════
SEARCH PAGE
═══════════════════════════════════════════ */
/* Search page header — warm cream bg */
.template-search .page-header,
.template-search .search-header {
background: #EDE8E0 !important;
border-bottom: 1px solid #DDD7CD !important;
padding: clamp(2rem, 4vw, 3rem) clamp(1.2rem, 3.5vw, 4.5rem) !important;
text-align: center !important;
}
/* Search input on search page */
.template-search .search-form input,
.template-search .search__input {
font-family: 'Playfair Display', serif !important;
font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
color: #2C2420 !important;
background: #FAF7F2 !important;
border: 1px solid #DDD7CD !important;
border-radius: 0 !important;
padding: .8rem 1rem !important;
}
.template-search .search-form input:focus,
.template-search .search__input:focus {
border-color: #7A6548 !important;
box-shadow: 0 0 0 1px #7A6548 !important;
}
/* Search results heading */
.template-search .pagetitle,
.template-search h1,
.template-search .search-results__heading {
font-family: 'Outfit', sans-serif !important;
font-size: .72rem !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #635A53 !important;
margin-bottom: 1.5rem !important;
}
/* Search results — product blocks matching collection style */
.template-search .product-block {
background: #F5F0E8 !important;
border: 1px solid #DDD7CD !important;
transition: border-color .35s !important;
overflow: hidden !important;
}
.template-search .product-block:hover {
border-color: rgba(122,101,72,.25) !important;
}
.template-search .product-block .image-cont {
background: #EDE8E0 !important;
}
.template-search .product-block__title a {
font-family: 'Playfair Display', serif !important;
font-size: .9rem !important;
color: #2C2420 !important;
}
.template-search .product-block .price {
font-family: 'Playfair Display', serif !important;
color: #7A6548 !important;
}
/* No results state */
.template-search .search--empty,
.template-search .no-results {
text-align: center !important;
padding: clamp(3rem, 6vw, 5rem) 1.5rem !important;
min-height: 40vh !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.template-search .search--empty h2,
.template-search .no-results h2 {
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important;
color: #2C2420 !important;
margin-bottom: .8rem !important;
}
.template-search .search--empty p,
.template-search .no-results p {
font-family: 'Cormorant Garamond', serif !important;
font-size: 1rem !important;
color: #635A53 !important;
}
/* ═══════════════════════════════════════════
404 PAGE
═══════════════════════════════════════════ */
.template-404 main { background: #FAF7F2 !important; }
.template-404 main {
min-height: 50vh !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: clamp(3rem, 8vw, 6rem) 1.5rem !important;
}
.template-404 .pagetitle,
.template-404 h1 {
font-family: 'Playfair Display', serif !important;
font-size: clamp(2rem, 4vw, 3rem) !important;
font-weight: 400 !important;
color: #2C2420 !important;
margin-bottom: .8rem !important;
}
.template-404 .rte,
.template-404 main p {
font-family: 'Cormorant Garamond', serif !important;
font-size: 1.05rem !important;
font-weight: 300 !important;
line-height: 1.85 !important;
color: #635A53 !important;
max-width: 420px !important;
margin-bottom: 1.8rem !important;
}
.template-404 .btn,
.template-404 .btn--primary {
background: #7A6548 !important;
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .65rem !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
min-height: 48px !important;
padding: .75rem 2rem !important;
transition: background .35s !important;
}
.template-404 .btn:hover,
.template-404 .btn--primary:hover {
background: #8B7355 !important;
}
/* ═══ ANNOUNCEMENT BAR — SCROLLING MARQUEE ═══ */
.announcement-bar__announcements {
animation: jw-ann-scroll 30s linear infinite !important;
white-space: nowrap !important;
}
.announcement__text, .announcement__text a,
.announcement-bar__link, .announcement-bar a {
color: #D1C9BE !important;
font-family: 'Outfit', sans-serif !important;
font-size: .62rem !important;
font-weight: 300 !important;
letter-spacing: .2em !important;
text-transform: uppercase !important;
}
.announcement__text a:hover,
.announcement-bar a:hover {
color: #C4A96C !important;
}
.announcement-button {
color: #D1C9BE !important;
}
/* Announcement bar icons */
.announcement-bar svg,
.announcement__text svg {
stroke: #C4A96C !important;
fill: none !important;
width: 12px !important;
height: 12px !important;
}
@keyframes jw-ann-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ═══ MEGA MENU — featured image card ═══ */
.navigation__mega-menu__promo-image,
.meganav__promo-image {
border: 1px solid rgba(255,255,255,.06) !important;
overflow: hidden !important;
}
.navigation__mega-menu__promo-image img,
.meganav__promo-image img {
transition: transform .7s cubic-bezier(.19,1,.22,1) !important;
}
.navigation__mega-menu__promo-image:hover img,
.meganav__promo-image:hover img {
transform: scale(1.04) !important;
}
/* Mega menu link text styling */
.navigation__mega-menu a,
.meganav a {
font-family: 'Cormorant Garamond', serif !important;
font-size: .92rem !important;
font-weight: 300 !important;
}
/* Mobile nav drawer — see dedicated @media block near end of file */
/* Mobile nav hamburger — cream on dark header */
.mobile-menu-toggle__bar,
.header__mobile-menu-toggle .icon-bar {
background: #FAF7F2 !important;
}
/* Header icon buttons — cream on dark header, visually matched sizes */
.header__icon-btn svg,
.header__icon-link svg,
.header-account-link svg {
stroke: #FAF7F2 !important;
width: 18px !important;
height: 18px !important;
stroke-width: 1.3 !important;
}
/* Search icon — slightly smaller to match bag visually */
.show-search-link svg,
.search-link svg {
stroke: #FAF7F2 !important;
width: 17px !important;
height: 17px !important;
stroke-width: 1.3 !important;
}
/* Cart/bag icon — slightly larger to match search visually */
.cart-link__icon svg {
stroke: #FAF7F2 !important;
width: 19px !important;
height: 19px !important;
stroke-width: 1.2 !important;
}
.header__icon-btn:hover svg,
.header__icon-link:hover svg,
.header-account-link:hover svg,
.cart-link:hover svg {
stroke: #C4A96C !important;
}
/* Header text labels — hide Search and Cart (icons are enough) */
.show-search-link__text,
.cart-link__label {
display: none !important;
}
/* Keep Account label — person icon is less universally clear */
.header-account-link__text {
font-family: 'Outfit', sans-serif !important;
font-size: .56rem !important;
font-weight: 300 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #FAF7F2 !important;
}
.header-account-link:hover .header-account-link__text {
color: #C4A96C !important;
}
/* Cart link — remove any box/border/background */
.cart-link,
.cart-link__icon {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
position: relative !important;
}
/* Remove the invisible rectangle in bag icon SVG */
.cart-link__icon svg g path:first-child {
fill: none !important;
stroke: none !important;
}
/* Ensure bag icon has no fill on the bag shape */
.cart-link__icon svg path[d*="5.357"] {
fill: none !important;
}
/* Cart count bubble — offset to top-right, not overlapping bag */
.cart-link__bubble, .header-cart-link__count,
.cart-link__count {
font-family: 'Outfit', sans-serif !important;
font-size: 8px !important;
font-weight: 500 !important;
background: #7A6548 !important;
color: #FAF7F2 !important;
min-width: 14px !important;
height: 14px !important;
line-height: 14px !important;
padding: 0 3px !important;
border-radius: 7px !important;
text-align: center !important;
position: absolute !important;
top: -6px !important;
right: -8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ── Collection Hero / Page Header ── */
.template-collection .page-header,
.template-collection .page-header--with-background {
background: #EDE8E0 !important;
border-bottom: 1px solid #DDD7CD !important;
text-align: center !important;
}
.template-collection .page-header .page-header__inner {
text-align: center !important;
}
.template-collection .pagetitle,
.template-collection .page-header h1 {
font-family: 'Playfair Display', serif !important;
font-size: clamp(2rem, 3.8vw, 3rem) !important;
font-weight: 400 !important;
text-align: center !important;
}
/* When on dark image overlay — clean white text */
.template-collection .image-overlay .pagetitle,
.template-collection .page-header--with-background .pagetitle,
.template-collection .text-overlay__title {
color: #FAF7F2 !important;
text-shadow: 0 1px 8px rgba(0,0,0,.5), 0 4px 24px rgba(0,0,0,.2) !important;
letter-spacing: .06em !important;
}
/* When no image — dark charcoal banner to match jw-collection-header */
.template-collection .page-header:not(.page-header--with-background) {
background: #2C2420 !important;
padding: clamp(1.8rem,3.5vw,2.8rem) clamp(1.2rem,3.5vw,3.5rem) !important;
border-bottom: none !important;
}
.template-collection .page-header:not(.page-header--with-background) .pagetitle {
color: #FAF7F2 !important;
font-size: clamp(1.3rem,2.5vw,1.8rem) !important;
letter-spacing: .06em !important;
}
.template-collection .page-header .rte,
.template-collection .page-header p,
.template-collection .collection-description {
font-family: 'Cormorant Garamond', serif !important;
font-size: .95rem !important;
font-weight: 300 !important;
color: #635A53 !important;
max-width: 440px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
/* Description text on image overlay — readable white */
.template-collection .text-overlay__rte,
.template-collection .text-overlay__rte p,
.template-collection .page-header--with-background .rte {
color: rgba(250,247,242,.8) !important;
text-shadow: 0 1px 6px rgba(0,0,0,.4) !important;
max-width: 440px !important;
}
/* ── Utility bar / Sort / Filter toggle ── */
.template-collection .utility-bar,
.template-collection .collection-listing__utility {
border-bottom: 1px solid #DDD7CD !important;
background: #FAF7F2 !important;
}
.template-collection .utility-bar__item {
border: none !important;
background: none !important;
padding: 0 !important;
}
.template-collection .toggle-btn {
font-family: 'Outfit', sans-serif !important;
font-size: .56rem !important;
font-weight: 300 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #635A53 !important;
border: 1px solid #DDD7CD !important;
padding: .5rem .9rem !important;
transition: all .25s !important;
display: inline-flex !important;
align-items: center !important;
gap: .5rem !important;
white-space: nowrap !important;
overflow: visible !important;
}
.toggle-btn svg, .toggle-btn .icon {
width: 14px !important;
height: 14px !important;
flex-shrink: 0 !important;
position: static !important;
}
.toggle-btn::after, .toggle-btn::before {
content: none !important;
display: none !important;
}
/* Hide the chevron arrow inside filter button — overlaps text */
.toggle-btn .toggle-btn__chevron {
display: none !important;
}
.template-collection .toggle-btn:hover,
.template-collection .toggle-btn.toggle-btn--revealed-desktop {
border-color: #7A6548 !important;
color: #7A6548 !important;
}
/* ── Sort dropdown ── */
link-dropdown, link-dropdown.link-dropdown, .link-dropdown {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: none !important;
padding: 0 !important;
}
.template-collection .link-dropdown__button,
.template-collection .sort-dropdown-heading,
.link-dropdown__button {
font-family: 'Outfit', sans-serif !important;
font-size: .56rem !important;
font-weight: 300 !important;
letter-spacing: .06em !important;
color: #635A53 !important;
border: 1px solid #DDD7CD !important;
background: transparent !important;
outline: none !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
gap: .35rem !important;
padding: .5rem .8rem !important;
white-space: nowrap !important;
}
.link-dropdown__button:focus, .link-dropdown__button:hover,
.link-dropdown__button[aria-expanded="true"] {
border-color: #7A6548 !important;
outline: none !important;
box-shadow: none !important;
}
.link-dropdown__button-text { overflow: visible !important; white-space: nowrap !important; }
.link-dropdown__button-icon { display: inline-flex !important; position: static !important; transform: none !important; margin: 0 !important; flex-shrink: 0 !important; }
.link-dropdown__button-icon svg { width: 10px !important; height: 10px !important; }
.template-collection .link-dropdown__options {
background: rgba(44, 36, 32, .98) !important;
border: 1px solid rgba(255,255,255,.06) !important;
border-top: 2px solid #7A6548 !important;
backdrop-filter: blur(20px) !important;
}
.template-collection .link-dropdown__link {
font-family: 'Outfit', sans-serif !important;
font-size: .56rem !important;
color: #D1C9BE !important;
letter-spacing: .06em !important;
}
.template-collection .link-dropdown__link:hover,
.template-collection .link-dropdown__link--active {
color: #C4A96C !important;
}
/* ── Product count ── */
.template-collection .product-count,
.template-collection .collection-listing__count {
font-family: 'Outfit', sans-serif !important;
font-size: .56rem !important;
font-weight: 300 !important;
color: #6E665F !important;
letter-spacing: .08em !important;
}
/* ── Filter sidebar ── */
.template-collection .filter-container {
border-right: 1px solid #DDD7CD !important;
}
.template-collection .filter-group__title,
.template-collection .filter-heading,
.template-collection .cc-accordion__title {
font-family: 'Outfit', sans-serif !important;
font-size: .58rem !important;
font-weight: 400 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
color: #7A6548 !important;
}
.template-collection .filter-group__item label,
.template-collection .filter-group a,
.template-collection .cc-accordion__panel label {
font-family: 'Cormorant Garamond', serif !important;
font-size: .9rem !important;
font-weight: 300 !important;
color: #635A53 !important;
}
.template-collection .filter-group__item label:hover,
.template-collection .filter-group a:hover {
color: #7A6548 !important;
}
.template-collection .filter-group__item input:checked + label,
.template-collection .active-filter {
color: #7A6548 !important;
font-weight: 400 !important;
}
/* Size filter pills (if using tag-based filtering) */
.template-collection .tag-filter,
.template-collection .filter-tag {
font-family: 'Outfit', sans-serif !important;
font-size: .52rem !important;
font-weight: 300 !important;
color: #635A53 !important;
border: 1px solid #DDD7CD !important;
background: transparent !important;
padding: .35rem .65rem !important;
transition: all .25s !important;
}
.template-collection .tag-filter:hover,
.template-collection .tag-filter.active,
.template-collection .filter-tag--active {
border-color: #7A6548 !important;
color: #7A6548 !important;
}
.template-collection .tag-filter.active,
.template-collection .filter-tag--active {
background: #7A6548 !important;
color: #FAF7F2 !important;
}
/* ── Product Grid ── */
.template-collection .collection-listing,
.template-collection .filters-adjacent {
background: #FAF7F2 !important;
}
.template-collection .product-grid {
gap: 2rem 1.75rem !important;
}
/* Cap collection grid width on large viewports so cards feel curated, not poster-sized.
Heritage peers (Trickers, C&J, Grenson) sit in the 340-360px card range — this lands us there. */
@media (min-width: 1100px) {
.template-collection .product-grid,
.template-collection .products-list,
.template-collection .collection-listing .product-list {
max-width: 1440px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: clamp(1.5rem, 2vw, 2.5rem) !important;
padding-right: clamp(1.5rem, 2vw, 2.5rem) !important;
box-sizing: border-box !important;
}
}
/* ── Product Cards ── */
.template-collection .product-block {
background: #ffffff !important;
border: 1px solid #E8E5E1 !important;
transition: border-color .35s !important;
overflow: hidden !important;
}
.template-collection .product-block:hover {
border-color: rgba(122,101,72,.25) !important;
}
/* Product image */
.template-collection .product-block .image-cont,
.template-collection .product-block .image-label-wrap {
background: #ffffff !important;
}
.template-collection .product-block .image-cont img {
transition: transform .7s cubic-bezier(.19,1,.22,1) !important;
}
.template-collection .product-block:hover .image-cont img {
transform: scale(1.04) !important;
}
/* Soft cross-fade between primary and secondary product images on hover — applies everywhere
(collection grid, related products, you-may-also-like, search results, cart upsells).
Theme default is 50-100ms (snap). Override to ~700ms ease-in-out for a heritage feel. */
.image-cont--with-secondary-image .product-block__image,
.image-cont--with-secondary-image.image-cont--same-aspect-ratio .product-block__image,
.image-cont--with-secondary-image.image-cont--same-aspect-ratio .product-block__image--active{
transition: opacity .7s cubic-bezier(.4,0,.2,1) !important;
}
@media (min-width: 960px){
.image-cont--with-secondary-image.image-cont--same-aspect-ratio:hover .product-block__image--active,
.image-cont--with-secondary-image.image-cont--same-aspect-ratio:hover .product-block__image--show-on-hover{
transition: opacity .7s cubic-bezier(.4,0,.2,1) !important;
}
}
/* Product info — matches JW Featured Collection card spacing */
.template-collection .product-block__detail {
padding: .5rem .75rem .35rem !important;
background: #ffffff !important;
margin-bottom: 0 !important;
min-height: 7.2rem !important;
}
@media (max-width: 767px) {
.template-collection .product-block__detail {
min-height: 5.8rem !important;
}
}
.product-block .block-inner, .product-block .block-inner-inner { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.product-block__detail .inner, .product-block__detail .innerer { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.template-collection .product-block__title { margin-bottom: .1rem !important; }
.template-collection .product-block__subtitle,
.template-collection .product-block .vendor { margin-bottom: .25rem !important; }
.product-block .product-price { margin-bottom: 0 !important; }
.product-block-options { margin: .45rem 0 0 !important; padding-bottom: 0 !important; }
.product-block-options__inner { padding-bottom: 0 !important; margin-bottom: 0 !important; gap: 6px !important; display: flex !important; flex-wrap: wrap !important; }
.template-collection .product-block__title a {
font-family: 'Playfair Display', serif !important;
font-size: .9rem !important;
font-weight: 500 !important;
color: #2C2420 !important;
text-decoration: none !important;
}
.template-collection .product-block__subtitle,
.template-collection .product-block .vendor {
font-family: 'Outfit', sans-serif !important;
font-size: .56rem !important;
font-weight: 300 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: #635A53 !important;
}
/* Price — always inline (price + strikethrough + sale badge on one line) */
.template-collection .product-block .product-price,
.template-collection .product-block .price {
font-family: 'Playfair Display', serif !important;
font-size: .95rem !important;
color: #7A6548 !important;
}
.product-block .product-price,
.product-block .product-price--block {
flex-wrap: nowrap !important;
align-items: baseline !important;
}
.product-block .price,
.product-block .price__default {
display: flex !important;
flex-wrap: nowrap !important;
align-items: baseline !important;
gap: .3em !important;
}
.product-block .price-label {
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.template-collection .product-block .price--compare,
.template-collection .product-block .was-price {
font-family: 'Cormorant Garamond', serif !important;
font-size: .82rem !important;
color: #6E665F !important;
text-decoration: line-through !important;
white-space: nowrap !important;
}
/* Product labels / badges */
.template-collection .product-label {
font-family: 'Outfit', sans-serif !important;
font-size: .54rem !important;
font-weight: 400 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
background: #7A6548 !important;
color: #FAF7F2 !important;
padding: .22rem .55rem !important;
border-radius: 0 !important;
}
/* Quick buy button — subtle overlay, matches "You may also like" style */
.template-collection .quickbuy-toggle,
.template-collection .product-block .btn--secondary {
background: rgba(122,101,72,.55) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .5rem !important;
font-weight: 300 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
border: none !important;
border-radius: 0 !important;
padding: .45rem .8rem !important;
min-height: 0 !important;
line-height: 1.1 !important;
transition: transform .35s cubic-bezier(.19,1,.22,1), background .25s !important;
}
.template-collection .quickbuy-toggle:hover {
background: rgba(122,101,72,.78) !important;
}
/* Colour swatches on product cards — bumped from 36→44px (22 Apr) so colour variants are
easier to scan without zooming. Heritage peers (C&J ~40, Grenson ~44, Trickers ~42).
Applies to: collection grid, related-products, search results, any Symmetry product card. */
.template-collection .product-block-options__item,
.product-block-options .product-block-options__item,
.product-block .product-block-options__item,
.jw-fc__card-swatch {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
border-radius: 3px !important;
border: 1px solid rgba(122,101,72,.22) !important;
overflow: hidden !important;
background: #FFFFFF !important;
padding: 0 !important;
cursor: pointer !important;
margin: 0 !important;
}
.product-block-options,
.jw-fc__card-swatches {
gap: 8px !important;
}
@media (max-width: 600px) {
.template-collection .product-block-options__item,
.product-block-options .product-block-options__item,
.product-block .product-block-options__item,
.jw-fc__card-swatch {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
}
}
.product-block-options .product-block-options__item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.product-block-options__item__text { display: none !important; }
.template-collection .product-block-options__item:hover,
.template-collection .product-block-options__item--active {
border-color: #7A6548 !important;
}
.template-collection .product-block-options__item__text {
font-family: 'Outfit', sans-serif !important;
font-size: .52rem !important;
color: #635A53 !important;
}
/* ── Related Collections Links (sub-nav) ── */
.template-collection .related-collection-links a {
font-family: 'Outfit', sans-serif !important;
font-size: .54rem !important;
font-weight: 300 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #635A53 !important;
border: 1px solid #DDD7CD !important;
padding: .45rem .85rem !important;
}
.template-collection .related-collection-links a:hover,
.template-collection .related-collection-links a.active {
border-color: #7A6548 !important;
color: #7A6548 !important;
}
/* ── Quick buy modal ── */
.template-collection .quickbuy__inner,
.template-collection .quickbuy-form {
background: #FAF7F2 !important;
border: 1px solid #DDD7CD !important;
}
.template-collection .quickbuy__inner .product-title {
font-family: 'Playfair Display', serif !important;
color: #2C2420 !important;
}
.template-collection .quickbuy__inner .btn--primary,
.template-collection .quickbuy-form .btn--primary {
background: #7A6548 !important;
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .58rem !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
}
.template-collection .quickbuy__inner .btn--primary:hover,
.template-collection .quickbuy-form .btn--primary:hover {
background: #8B7355 !important;
}
/* ── Image overlay for collection header ── */
.template-collection .image-overlay--bg-shadow::after,
.image-overlay--bg-shadow::after {
background: linear-gradient(to bottom, rgba(20,16,14,.55) 0%, rgba(20,16,14,.7) 50%, rgba(20,16,14,.82) 100%) !important;
}
.template-collection .image-overlay .pagetitle,
.image-overlay .pagetitle,
.page-header--with-background .pagetitle,
.page-header--with-background h1 {
font-family: 'Playfair Display', serif !important;
color: #D8CFC3 !important;
text-shadow: 0 2px 15px rgba(0,0,0,.4) !important;
}
.template-collection .image-overlay .rte,
.template-collection .image-overlay p,
.image-overlay .rte,
.image-overlay p,
.page-header--with-background .rte,
.page-header--with-background p {
font-family: 'Cormorant Garamond', serif !important;
color: #C4B9AB !important;
text-shadow: 0 1px 6px rgba(0,0,0,.3) !important;
}
/* ── Article page title overlay — readable over light blog illustrations ── */
.template-article .image-overlay--bg-full .image-overlay__image::after {
background: linear-gradient(
to bottom,
rgba(20, 16, 14, .32) 0%,
rgba(20, 16, 14, .52) 35%,
rgba(20, 16, 14, .68) 100%
) !important;
}
.template-article .page-header--with-background h1,
.template-article .text-overlay__title {
color: #FAF7F2 !important;
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.4rem, 2.8vw, 2.1rem) !important;
line-height: 1.3 !important;
font-weight: 400 !important;
text-shadow:
0 2px 20px rgba(0, 0, 0, .5),
0 1px 3px rgba(0, 0, 0, .3) !important;
letter-spacing: .04em !important;
}
/* ── Layout switch icons ── */
.template-collection .layout-switchers { display: none !important; }
.template-collection .layout-switch {
border: 1px solid #DDD7CD !important;
color: #635A53 !important;
padding: .35rem !important;
}
.template-collection .layout-switch--active,
.template-collection .layout-switch:hover {
border-color: #7A6548 !important;
color: #7A6548 !important;
}
/* ── "No products" message ── */
.template-collection .collection-listing--empty {
font-family: 'Cormorant Garamond', serif !important;
color: #635A53 !important;
}
/* Product title */
.template-product .product-title,
.template-product h1.product-title {
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
font-weight: 400 !important;
color: #2C2420 !important;
}
/* Product type / vendor */
.template-product .product-subtitle,
.template-product .cc-product-type {
font-family: 'Outfit', sans-serif !important;
font-size: .58rem !important;
font-weight: 300 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #635A53 !important;
}
/* Product price */
.template-product .product-price,
.template-product .price {
font-family: 'Playfair Display', serif !important;
font-size: 1.2rem !important;
color: #7A6548 !important;
}
.template-product .price--compare,
.template-product .was-price {
font-family: 'Playfair Display', serif !important;
font-size: 1rem !important;
color: #B8B0A8 !important;
text-decoration: line-through !important;
}
/* Hide entire price-descriptors — contains payment terms + inventory transfers
that cause layout jump between price and variant picker on variant change */
.template-product .price-descriptors {
display: none !important;
}
/* Stock / inventory indicator — refined to match JWS premium theme */
.template-product .product-inventory {
font-family: 'Outfit', sans-serif !important;
font-size: .56rem !important;
font-weight: 300 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: #7A6548 !important;
margin: 4px 0 !important;
}
.template-product .product-inventory .icon,
.template-product .product-inventory .icon-container {
margin-inline-end: 6px !important;
}
.template-product .product-inventory .icon svg {
width: 14px !important;
height: 14px !important;
stroke: #7A6548 !important;
}
.template-product .product-inventory .icon circle {
fill: #FAF7F2 !important;
}
/* Low stock — subtle warm amber, not alarming */
.template-product .product-inventory--low {
color: #9B7E4A !important;
}
.template-product .product-inventory--low .icon svg {
stroke: #9B7E4A !important;
}
/* Pulse animation — muted, brass tone */
.template-product .product-inventory--pulse .icon-container::before {
background: rgba(122, 101, 72, .25) !important;
}
/* Breathing room between header and product content */
.section-main-product.page-section-spacing {
margin-top: 0 !important;
padding-top: 24px !important;
}
/* Move "You may also like" above "Common Questions" on all screens */
.template-product #content > .container {
display: flex !important;
flex-direction: column !important;
}
.template-product #content > .container > [id*="__main"] { order: 1 !important; }
.template-product #content > .container > [id*="related"] { order: 2 !important; }
.template-product #content > .container > [id*="faq"] { order: 3 !important; }
.template-product #content > .container > [id*="recently"] { order: 4 !important; }
/* Tighten gap between main product section and next section */
.section-main-product.page-section-spacing {
margin-bottom: 0 !important;
}
.section-main-product .spaced-row {
margin-bottom: 20px !important;
}
@media (max-width: 767px) {
.section-main-product .spaced-row {
margin-bottom: 16px !important;
}
}
/* Hide share icons — not needed on product page */
.template-product .social-share {
display: none !important;
}
/* Hide the duplicate breadcrumb section below the header */
.template-product .page-header {
display: none !important;
}
.template-product .breadcrumbs,
.template-product .breadcrumb {
font-family: 'Outfit', sans-serif !important;
font-size: .52rem !important;
font-weight: 300 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #6E665F !important;
margin-top: 0 !important;
padding: .6rem 0 .4rem !important;
}
.template-product .breadcrumbs a,
.template-product .breadcrumb a {
color: #635A53 !important;
transition: color .25s !important;
}
.template-product .breadcrumbs a:hover {
color: #7A6548 !important;
}
/* Hide prev/next product navigation from breadcrumb bar */
.template-product .breadcrumbs-prod-nav {
display: none !important;
}
/* Product gallery — see consolidated block below */
/* Add to cart / Buy button */
.template-product .btn--primary,
.template-product .add-to-cart,
.template-product .product-form__cart-submit {
background: #7A6548 !important;
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .6rem !important;
font-weight: 400 !important;
letter-spacing: .2em !important;
text-transform: uppercase !important;
border: none !important;
border-radius: 0 !important;
transition: background .35s !important;
}
.template-product .btn--primary:hover,
.template-product .add-to-cart:hover {
background: #8B7355 !important;
}
/* Sold out button */
.template-product .btn--primary[disabled],
.template-product .add-to-cart[disabled] {
background: #DDD7CD !important;
color: #6E665F !important;
}
/* Size / variant selectors */
.template-product .product-block-options__item,
.template-product .swatch-element label,
.template-product .variant-input__item label {
border: 1px solid #DDD7CD !important;
font-family: 'Outfit', sans-serif !important;
font-size: .56rem !important;
color: #635A53 !important;
transition: all .25s !important;
}
.template-product .product-block-options__item:hover,
.template-product .swatch-element label:hover,
.template-product .variant-input__item label:hover {
border-color: #7A6548 !important;
color: #7A6548 !important;
}
.template-product .product-block-options__item--active,
.template-product .swatch-element input:checked + label,
.template-product .variant-input__item input:checked + label {
border-color: #7A6548 !important;
background: #7A6548 !important;
color: #FAF7F2 !important;
}
/* Quantity selector */
.template-product .quantity-adjuster,
.template-product .product-qty {
border: 1px solid #DDD7CD !important;
font-family: 'Outfit', sans-serif !important;
}
.template-product .quantity-adjuster__button {
color: #635A53 !important;
}
/* Product description / details accordion — see consolidated block above */
/* RTE content typography */
.template-product .rte {
font-family: 'Cormorant Garamond', serif !important;
font-size: .95rem !important;
font-weight: 300 !important;
line-height: 1.85 !important;
color: #635A53 !important;
}
/* Trust badges under add to cart */
.template-product .product-trust,
.template-product .product-policies {
font-family: 'Outfit', sans-serif !important;
font-size: .52rem !important;
font-weight: 300 !important;
letter-spacing: .1em !important;
color: #6E665F !important;
}
.template-product .product-trust svg,
.template-product .product-policies svg {
stroke: #7A6548 !important;
}
/* Klarna / payment badge */
.template-product .klarna-badge,
.template-product .payment-badge {
font-family: 'Outfit', sans-serif !important;
font-size: .52rem !important;
color: #6E665F !important;
}
/* Product sale badge */
.template-product .product-label {
background: #7A6548 !important;
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .52rem !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
}
/* Complementary products / upsell */
.template-product .product-recommendations__title,
.template-product .you-may-also-like__title,
.template-product .section-title,
.template-product .related-products h2 {
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important;
font-weight: 400 !important;
color: #2C2420 !important;
text-align: center !important;
margin-bottom: 1.5rem !important;
}
/* Dynamic checkout / Buy-it-now — ghost outline style */
.template-product .shopify-payment-button .shopify-payment-button__button,
.template-product .shopify-payment-button__button--unbranded {
background: transparent !important;
color: #2C2420 !important;
border: 1.5px solid #DDD7CD !important;
font-family: 'Outfit', sans-serif !important;
font-size: .65rem !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
min-height: 48px !important;
transition: all .35s !important;
}
.template-product .shopify-payment-button .shopify-payment-button__button:hover,
.template-product .shopify-payment-button__button--unbranded:hover {
background: #7A6548 !important;
border-color: #7A6548 !important;
color: #FAF7F2 !important;
}
/* ── 1. Remove image dots everywhere ── */
body .product-block__image-dots,
body .product-block__image-dot {
display: none !important;
}
/* ── 2. NEW ARRIVAL label — subtle text only ── */
/* ── 3. SALE label — brass ── */
/* ── 4. Crossed-out price smaller ── */
body .product-block .price__was,
body .product-block .price--compare,
body .template-collection .product-block .price__was {
font-size: .88rem !important;
color: #A59E96 !important;
}
/* ── 5. Colour swatch images — 42px ── */
/* ── 6. Featured sort dropdown — single border ── */
body .link-dropdown .link-dropdown__button {
border: 1px solid #DDD7CD !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
font-family: 'Outfit', sans-serif !important;
font-size: .56rem !important;
padding: .5rem .8rem !important;
display: inline-flex !important;
align-items: center !important;
gap: .35rem !important;
}
body .link-dropdown .link-dropdown__button:focus,
body .link-dropdown .link-dropdown__button[aria-expanded="true"] {
border: 1px solid #7A6548 !important;
outline: none !important;
box-shadow: none !important;
}
/* ── 7. Tighten card bottom spacing ── */
/* ── 8. Collection header — warm cream not white ── */
/* ── 11. Filter button clean ── */
/* ── 12. "You may also like" prices/badges ── */
body .product-recommendations .price-label--sale,
body .related-products .price-label--sale {
background: #7A6548 !important;
color: #FAF7F2 !important;
border: none !important;
}
/* Product info area */
body .template-product .product-detail-container,
body .template-product .product-area__details {
padding-top: 0 !important;
}
/* NEW ARRIVAL label on product page */
/* ── Collection page: product card image background white ── */
body .template-collection .product-block .image-cont,
body .template-collection .product-block__image,
body .product-block .image-cont {
background: #ffffff !important;
}
/* Card info area */
/* ── Accordion tabs on product page ── */
body .template-product .cc-accordion__title,
body .template-product .accordion__heading {
font-family: 'Outfit', sans-serif !important;
font-size: .6rem !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #2C2420 !important;
border-bottom: 1px solid #E8E3DB !important;
padding: .8rem 0 !important;
}
body .template-product .cc-accordion__panel,
body .template-product .accordion__content {
font-family: 'Cormorant Garamond', serif !important;
font-size: .92rem !important;
font-weight: 300 !important;
line-height: 1.8 !important;
color: #635A53 !important;
padding: .6rem 0 .8rem !important;
}
body .template-product .cc-accordion__icon svg {
stroke: #7A6548 !important;
}
/* ── NEW ARRIVAL label on product page — subtle ── */
/* NEW ARRIVAL label on product page — subtle text */
/* ── Price filter boxes — remove inner borders/lines ── */
body .faceted-filters .price-filter,
body .faceted-filters input[type="number"],
body .price-filter__input,
body .filter-group input[type="number"] {
border: 1px solid #DDD7CD !important;
outline: none !important;
box-shadow: none !important;
font-family: 'Outfit', sans-serif !important;
font-size: .8rem !important;
color: #2C2420 !important;
background: transparent !important;
padding: .4rem .6rem !important;
-moz-appearance: textfield !important;
-webkit-appearance: none !important;
}
/* Remove the inner dividing line in price range boxes */
body .price-filter__field,
body .price-filter__range-group {
border: none !important;
box-shadow: none !important;
}
body .price-filter__field-prefix,
body .field__prefix {
border: none !important;
border-right: none !important;
color: #635A53 !important;
}
body .price-filter__field-input,
body .field__input {
border: none !important;
border-left: none !important;
}
body .price-filter__field,
body .faceted-filters .field {
border: 1px solid #DDD7CD !important;
border-radius: 0 !important;
overflow: hidden !important;
}
body .price-filter__field *,
body .faceted-filters .field * {
border: none !important;
box-shadow: none !important;
}
/* Hidden radio buttons — use fixed positioning to prevent
scroll-into-view on focus (smooth scroll makes it visible) */
.template-product .opt-btn {
position: fixed !important;
top: 0 !important;
left: -100% !important;
opacity: 0 !important;
}
/* ── Size/text option buttons (excludes image & colour swatches) ── */
.template-product .opt-label--btn {
border: 1px solid #DDD7CD !important;
background: transparent !important;
color: #2C2420 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .68rem !important;
font-weight: 400 !important;
letter-spacing: .04em !important;
border-radius: 0 !important;
min-height: 44px !important;
margin: 0 !important;
padding: .5rem .8rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: nowrap !important;
transition: border-color .25s, background .25s, color .25s !important;
}
.template-product .opt-label--btn:hover {
border-color: #7A6548 !important;
color: #7A6548 !important;
}
/* Selected size button */
.template-product .opt-btn:checked + .opt-label--btn {
background: #7A6548 !important;
border-color: #7A6548 !important;
color: #FAF7F2 !important;
}
/* Unavailable/sold out size buttons */
.template-product .opt-btn.is-unavailable + .opt-label--btn {
opacity: .4 !important;
text-decoration: line-through !important;
pointer-events: none !important;
}
/* Size option container — 4-column grid */
.template-product .option-selector[data-selector-type="listed"] .option-selector__btns {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
}
/* Option label text — prevent wrapping */
.template-product .opt-label .js-value {
white-space: nowrap !important;
}
/* Option section label (COLOUR, SIZE) — quiet, receding */
.template-product .option-selector .label,
.template-product .option-selector legend {
font-family: 'Outfit', sans-serif !important;
font-size: .5rem !important;
font-weight: 300 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #9B9088 !important;
margin-bottom: 6px !important;
}
/* ── Colour/image swatches — keep native Symmetry layout, brass accents only ── */
.template-product .opt-label--image,
.template-product .opt-label--swatch {
border-radius: 0 !important;
transition: border-color .25s, box-shadow .25s !important;
}
/* Selected colour swatch — brass border, no background fill */
.template-product .opt-btn:checked + .opt-label--image,
.template-product .opt-btn:checked + .opt-label--swatch {
border-color: #7A6548 !important;
box-shadow: 0 0 0 1px #7A6548 !important;
}
/* Swatch ::after overlay border — brass when selected */
.template-product .opt-btn:checked + .opt-label--image::after,
.template-product .opt-btn:checked + .opt-label--swatch::after {
border-color: #7A6548 !important;
box-shadow: 0 0 0 1px #7A6548 !important;
}
/* Swatch hover — subtle brass hint */
.template-product .opt-label--image:hover,
.template-product .opt-label--swatch:hover {
border-color: rgba(122,101,72,.4) !important;
}
/* Unavailable colour swatches */
.template-product .opt-btn.is-unavailable + .opt-label--image,
.template-product .opt-btn.is-unavailable + .opt-label--swatch {
opacity: .4 !important;
}
/* Size guide link — see consolidated block in STEP 5 */
/* ── Filter button — already fixed in core above ── */
/* ── Featured sort dropdown — already fixed in core above ── */
/* ── Consolidated: Image dots ── */
.product-block__image-dots { display: none !important; }
/* ── Consolidated: Logo ── */
.section-header, .section-header .logo, .header__wrapper,
body .pageheader, body .pageheader .logo, body .header .logo {
overflow: visible !important;
}
body .section-header .logo,
body .pageheader .logo,
body .header .logo {
padding: 6px 0 !important;
}
body .section-header .logo img,
body .header .logo img,
body .logo img {
max-height: 50px !important;
width: auto !important;
object-fit: contain !important;
display: block !important;
filter: brightness(0) invert(1) !important;
}
body .header--transparent:not(.header--stuck) .logo img,
body .nw:not(.sc) .logo img {
filter: brightness(0) invert(1) !important;
}
body .header--stuck .logo img,
body .nw.sc .logo img {
filter: brightness(0) invert(1) !important;
}
/* Trust badges — 2x2 grid */
.jw-trust-badges {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
margin-top: 1rem !important;
padding: 0 !important;
border: 1px solid #DDD7CD !important;
}
.jw-trust-badge {
display: flex !important;
align-items: center !important;
gap: .4rem !important;
font-family: 'Outfit', sans-serif !important;
font-size: .5rem !important;
font-weight: 300 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: #6E665F !important;
padding: .55rem .6rem !important;
border-bottom: 1px solid #DDD7CD !important;
border-right: 1px solid #DDD7CD !important;
flex: none !important;
}
.jw-trust-badge:nth-child(2n) { border-right: none !important; }
.jw-trust-badge svg { color: #7A6548 !important; stroke: #7A6548 !important; flex-shrink: 0 !important; width: 15px !important; height: 15px !important; }
/* Desktop 2x2 grid: remove bottom border from last row only */
@media (min-width: 601px) {
.jw-trust-badge:nth-last-child(-n+2) { border-bottom: none !important; }
}
/* Mobile single column: all badges have bottom border except last */
@media (max-width: 600px) {
.jw-trust-badges { grid-template-columns: 1fr !important; }
.jw-trust-badge { border-right: none !important; border-bottom: 1px solid #DDD7CD !important; }
.jw-trust-badge:last-child { border-bottom: none !important; }
}
/* ── Hide non-sale labels on collection cards (New Arrival etc.) ── */
.template-collection .product-label:not(.product-label--sale) {
display: none !important;
}
/* Sale badge — keep visible */
.template-collection .product-label--sale {
display: block !important;
}
/* ═══════════════════════════════════════════
STEP 5 — Product Page Trust & CTAs
═══════════════════════════════════════════ */
/* Product title */
.template-product .product-title,
.template-product h1.product-title {
font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important;
margin-bottom: 4px !important;
line-height: 1.2 !important;
}
/* Title row — gap above title, no borders */
.template-product .title-row {
margin-bottom: 0 !important;
margin-top: 6px !important;
border: none !important;
}
/* Remove ALL lines/borders above product title area */
.template-product .product-column-right,
.template-product .detail,
.template-product .product-form,
.template-product .product-info-block:first-child,
.template-product .product-info {
border-top: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Remove any separator from the product form wrapper */
.template-product product-form.js-product {
border-top: none !important;
}
.template-product .product-form::before,
.template-product .detail::before {
display: none !important;
content: none !important;
}
/* Product price — larger, tight margins */
.template-product .product-price,
.template-product .price {
font-size: 1.35rem !important;
}
/* Price container — keep theme flex layout, just control margins */
.template-product .price-container {
margin-bottom: 0 !important;
}
/* Hide payment terms / instalments (not used) */
.template-product .price-descriptors {
display: none !important;
}
/* Kill carousel height animation — prevents layout shift on variant change */
.template-product carousel-slider[data-dynamic-height="true"] {
transition: none !important;
}
/* ── Compact product info spacing ── */
/* Variant picker rows — tighter spacing */
.template-product .product-form .input-row {
margin: 16px 0 !important;
}
/* Space between option selectors (e.g. colour → size) */
.template-product .product-form .option-selector {
margin-bottom: 16px !important;
}
/* Fieldset — natural block display, no border */
.template-product fieldset.option-selector {
border: none !important;
padding: 0 !important;
margin: 0 0 16px 0 !important;
}
/* Option label (SIZE, COLOUR) — block display */
.template-product .product-form .option-selector .label,
.template-product .product-form .option-selector legend.label {
display: block !important;
float: none !important;
margin-bottom: 10px !important;
padding: 0 !important;
line-height: 1.4 !important;
}
/* Selected value text (e.g. "Black", "UK 9") — this is the prominent part */
.template-product .option-selector__label-value {
font-size: 0.6rem !important;
font-weight: 400 !important;
letter-spacing: .04em !important;
text-transform: none !important;
color: #2C2420 !important;
margin-left: 6px !important;
}
/* Colour label — tidy gap above swatches */
.template-product .option-selector:has(.opt-label--swatch) .label,
.template-product .option-selector:has(.opt-label--image) .label,
.template-product .option-selector:has(.opt-label--swatch) legend.label,
.template-product .option-selector:has(.opt-label--image) legend.label {
margin-bottom: 8px !important;
}
/* Size label — selected value alongside (e.g. "SIZE UK 9") */
.template-product .option-selector[data-option="Size"] .option-selector__label-value {
font-size: 0.6rem !important;
font-weight: 400 !important;
letter-spacing: .04em !important;
text-transform: none !important;
color: #2C2420 !important;
}
/* Swatch/button container */
.template-product .option-selector .option-selector__btns {
margin: 0 !important;
}
/* Buy buttons row — less top margin */
.template-product .buy-buttons-row {
margin: 20px 0 !important;
}
/* CTA gap — generous space above Add to Bag */
.template-product .product-form .quantity-submit-row .quantity-submit-row__submit {
margin-top: 20px !important;
margin-bottom: 8px !important;
}
/* Size buttons — grid gap (matches main rule) */
.template-product .option-selector[data-selector-type="listed"] .option-selector__btns {
gap: 8px !important;
}
/* Colour swatch container — tight grid matching size picker */
.template-product .option-selector:not([data-selector-type="listed"]) .option-selector__btns {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(44px, 52px)) !important;
gap: 6px !important;
justify-content: start !important;
}
/* Colour swatches — compact squares */
.template-product .option-selector .opt-label--image,
.template-product .option-selector .opt-label--swatch {
margin: 0 !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
position: relative !important;
z-index: auto !important;
}
/* Dynamic checkout buttons (Shop Pay, Apple Pay, Google Pay) — show on product pages */
.shopify-payment-button__more-options {
display: none !important;
}
.template-product .shopify-payment-button,
.template-product .product-dynamic-payment-button {
display: block !important;
margin-top: 8px !important;
}
/* ATC button — full-width, larger, touch-friendly */
.template-product .btn--primary,
.template-product .add-to-cart,
.template-product .product-form__cart-submit {
width: 100% !important;
min-height: 54px !important;
font-size: .65rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background .35s, transform .2s !important;
}
.template-product .btn--primary:hover,
.template-product .add-to-cart:hover {
transform: translateY(-1px) !important;
}
/* Size guide — positioned below size buttons via absolute placement */
/* Fieldset is the positioning anchor, with bottom padding for the link */
.template-product fieldset.option-selector[data-option="Size"] {
position: relative !important;
padding-bottom: 34px !important;
}
/* Remove the size guide from the inline flex row */
.template-product fieldset.option-selector[data-option="Size"] > .flex.justify-between > modal-opener {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
}
/* Hide the ruler icon */
.template-product .size-chart-link__icon {
display: none !important;
}
/* Size guide link — subtle, sits in theme's natural flex row with SIZE label */
body .template-product .size-chart-link,
body .template-product .size-guide-link,
body .template-product button.size-chart-link,
body .template-product modal-opener .size-chart-link {
font-family: 'Outfit', sans-serif !important;
font-size: 13px !important;
font-weight: 300 !important;
color: #A89E95 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
text-decoration: none !important;
border: none !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
cursor: pointer !important;
transition: color .25s !important;
}
/* Override .text-sm on the button */
body .template-product .size-chart-link.text-sm {
font-size: 13px !important;
}
.template-product .size-chart-link .size-chart-link__text,
.template-product .size-chart-link .size-chart-link__text.underline {
font-size: 13px !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(122,101,72,.2) !important;
padding-bottom: 1px !important;
color: inherit !important;
}
body .template-product .size-chart-link:hover,
body .template-product .size-guide-link:hover {
color: #7A6548 !important;
}
body .template-product .size-chart-link:hover .size-chart-link__text {
border-bottom-color: #7A6548 !important;
}
/* ═══════════════════════════════════════════
STEP 6 — Collection Page Cards
═══════════════════════════════════════════ */
/* Card hover shadow */
.template-collection .product-block:hover {
box-shadow: 0 4px 20px rgba(44,36,32,.06) !important;
border-color: rgba(122,101,72,.3) !important;
}
/* Quick-buy slides up on hover (desktop) */
@media (min-width: 901px) {
.template-collection .quickbuy-toggle,
.template-collection .product-block .btn--secondary {
transform: translateY(100%) !important;
transition: transform .35s cubic-bezier(.19,1,.22,1) !important;
}
.template-collection .product-block:hover .quickbuy-toggle,
.template-collection .product-block:hover .btn--secondary {
transform: translateY(0) !important;
}
}
/* Quick-buy always visible on mobile */
@media (max-width: 900px) {
.template-collection .quickbuy-toggle,
.template-collection .product-block .btn--secondary {
transform: translateY(0) !important;
position: relative !important;
}
}
/* ── Collection page — mobile fixes ── */
@media (max-width: 767px) {
/* Utility bar — align filter left, layout icons right */
.template-collection .utility-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: .5rem 0 !important;
gap: .5rem !important;
}
.template-collection .utility-bar__left {
flex: 0 0 auto !important;
}
.template-collection .utility-bar__centre {
display: none !important;
}
.template-collection .utility-bar__right {
flex: 0 0 auto !important;
min-height: 0 !important;
}
/* Layout switch — clean aligned buttons */
.template-collection .layout-switchers {
gap: 6px !important;
}
.template-collection .layout-switch {
width: 34px !important;
height: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
.template-collection .layout-switch svg {
width: 18px !important;
height: 18px !important;
}
/* Product card spacing — consistent within cards */
.template-collection .product-block__detail {
padding: .55rem .7rem .5rem !important;
}
.template-collection .product-block__title a {
font-size: .82rem !important;
}
}
/* Active filter tags — brass pills */
.template-collection .active-filter-tag,
.template-collection .filter-tag--active,
.template-collection .tag-filter.active {
background: #7A6548 !important;
color: #FAF7F2 !important;
border-color: #7A6548 !important;
border-radius: 20px !important;
padding: .35rem .8rem !important;
}
/* ═══════════════════════════════════════════
STEP 7 — Cart Drawer
═══════════════════════════════════════════ */
/* Drawer shell width */
cart-drawer.drawer {
width: min(88%, 420px) !important;
}
/* Trust message bar — above checkout button */
/* .cart-drawer__footer::before trust strip removed 16 May 2026 per AK. */
/* Checkout button — full-width, prominent, always visible */
.cart-drawer .checkout-buttons {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.cart-drawer .checkout-buttons .btn,
.cart-drawer .checkout-buttons .btn--large,
.cart-drawer .checkout-buttons .btn--wide,
.cart-drawer .checkout-buttons a {
width: 100% !important;
min-height: 52px !important;
background: #C4A96C !important;
color: #2C2420 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .65rem !important;
font-weight: 400 !important;
letter-spacing: .2em !important;
text-transform: uppercase !important;
text-decoration: none !important;
border: none !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background .25s, color .25s !important;
box-sizing: border-box !important;
}
.cart-drawer .checkout-buttons .btn:hover,
.cart-drawer .checkout-buttons a:hover {
background: #D4B97C !important;
color: #2C2420 !important;
}
/* ── Cart Drawer — Mobile Optimisation ── */
@media (max-width: 767px) {
/* Cart item image — larger on mobile */
.cart-drawer .cart-item__image {
width: 120px !important;
min-width: 120px !important;
padding-inline-end: 14px !important;
}
/* Quantity selector — remove scale, use explicit small sizing */
.cart-drawer .buttoned-input {
transform: none !important;
}
.cart-drawer .buttoned-input a {
min-width: 36px !important;
min-height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 6px !important;
}
/* iOS zoom prevention — override the .72rem with 16px */
.cart-drawer .buttoned-input input {
font-size: 16px !important;
width: 2em !important;
height: 2em !important;
}
/* Cart item title — slightly tighter on mobile */
.cart-drawer .cart-item__title {
font-size: .82rem !important;
}
/* Drawer title — slightly smaller */
.cart-drawer .cart-drawer__title {
font-size: .95rem !important;
}
/* Trust bar — smaller font, allow wrapping */
.cart-drawer__footer::before {
font-size: .44rem !important;
line-height: 1.6 !important;
letter-spacing: .06em !important;
padding: .35rem .6rem !important;
}
/* Checkout button — adequate touch target on mobile */
.cart-drawer .checkout-buttons .btn,
.cart-drawer .checkout-buttons a {
min-height: 48px !important;
}
/* Footer — tighter padding on mobile */
.cart-drawer__footer {
padding: 10px var(--gutter-content) calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Subtotal — slightly smaller */
.cart-drawer .subtotal {
font-size: .9rem !important;
}
.cart-drawer .subtotal .theme-money {
font-size: .95rem !important;
}
/* Cross-sell titles & prices — smaller on mobile */
.cart-drawer .product-block__title {
font-size: .68rem !important;
}
.cart-drawer .product-block .price,
.cart-drawer .product-block .price__current,
.cart-drawer .product-block .product-price {
font-size: .72rem !important;
}
/* Cross-sell heading — smaller */
.cart-drawer .cart-item-upsells .product-info-label {
font-size: .5rem !important;
}
/* Remove excess gap after "You may like" section */
.cart-drawer .cart-item-upsells {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.cart-drawer .cart-item-upsells .collection-slider {
padding-bottom: 4px !important;
}
.cart-drawer .product-grid .product-block__detail {
margin-bottom: 4px !important;
padding: 4px 2px 0 !important;
}
/* Mobile carousel arrows — always visible */
.cart-drawer .cart-item-upsells .slider-nav {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
gap: 6px !important;
}
.cart-drawer .cart-item-upsells .slider-nav__btn {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 28px !important;
height: 28px !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(255,255,255,.15) !important;
border-radius: 50% !important;
background: rgba(255,255,255,.05) !important;
color: #D1C9BE !important;
padding: 0 !important;
transition: border-color .25s, color .25s !important;
}
.cart-drawer .cart-item-upsells .slider-nav__btn:hover {
border-color: rgba(196,169,108,.4) !important;
color: #FAF7F2 !important;
}
.cart-drawer .cart-item-upsells .slider-nav__btn svg {
width: 14px !important;
height: 14px !important;
}
}
/* ═══════════════════════════════════════════
CART PAGE
═══════════════════════════════════════════ */
/* Cart page title */
.template-cart .pagetitle,
.template-cart h1 {
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important;
font-weight: 400 !important;
color: #2C2420 !important;
text-align: center !important;
margin-bottom: 1.5rem !important;
}
/* Cart item titles */
.template-cart .cart__item-title,
.template-cart .cart-item__title,
.template-cart .cart__product-title {
font-family: 'Playfair Display', serif !important;
font-size: .95rem !important;
font-weight: 400 !important;
color: #2C2420 !important;
}
/* Cart prices — brass */
.template-cart .cart__item-price,
.template-cart .cart-item__price,
.template-cart .cart__price {
font-family: 'Playfair Display', serif !important;
color: #7A6548 !important;
}
/* Cart subtotal */
.template-cart .cart__subtotal,
.template-cart .cart-subtotal,
.template-cart .cart__total {
font-family: 'Playfair Display', serif !important;
font-size: 1.2rem !important;
color: #2C2420 !important;
border-top: 1px solid #DDD7CD !important;
padding-top: 1rem !important;
}
/* Checkout button on cart page */
.template-cart .btn--primary,
.template-cart .cart__checkout-button {
background: #7A6548 !important;
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .65rem !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
min-height: 52px !important;
width: 100% !important;
max-width: 400px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background .35s !important;
}
.template-cart .btn--primary:hover,
.template-cart .cart__checkout-button:hover {
background: #8B7355 !important;
}
/* Empty cart state */
.template-cart .cart--empty,
.template-cart .empty-page-content {
text-align: center !important;
padding: clamp(3rem, 6vw, 5rem) 1.5rem !important;
min-height: 40vh !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.template-cart .cart--empty h2,
.template-cart .empty-page-content h2 {
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important;
color: #2C2420 !important;
margin-bottom: .8rem !important;
}
.template-cart .cart--empty p,
.template-cart .empty-page-content p {
font-family: 'Cormorant Garamond', serif !important;
font-size: 1rem !important;
color: #635A53 !important;
margin-bottom: 1.5rem !important;
}
/* Quantity adjuster on cart page */
.template-cart .quantity-adjuster,
.template-cart .cart__qty {
border: 1px solid #DDD7CD !important;
font-family: 'Outfit', sans-serif !important;
border-radius: 0 !important;
}
.template-cart .quantity-adjuster__button {
color: #635A53 !important;
}
/* Trust text bar above checkout */
.template-cart .cart__footer::before {
content: 'Free UK Delivery · Free 30-Day Returns · Secure Checkout' !important;
display: block !important;
font-family: 'Outfit', sans-serif !important;
font-size: .56rem !important;
font-weight: 300 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: #635A53 !important;
text-align: center !important;
padding: .7rem 1rem !important;
margin-bottom: 1rem !important;
border: 1px solid #DDD7CD !important;
background: #F5F0E8 !important;
}
/* ── Cart Drawer enhancements ── */
/* Cart item images — white background, prominent sizing */
.cart-drawer .cart-item__image img {
background: #ffffff !important;
border-radius: 3px !important;
border: 1px solid rgba(255,255,255,.08) !important;
aspect-ratio: 4/5 !important;
object-fit: contain !important;
padding: 4% !important;
width: 100% !important;
height: auto !important;
}
/* Quantity controls — compact */
.cart-drawer .buttoned-input {
border: 1px solid rgba(255,255,255,.1) !important;
background: transparent !important;
border-radius: 0 !important;
transform: scale(.88) !important;
transform-origin: left center !important;
}
.cart-drawer .buttoned-input a {
color: #D1C9BE !important;
transition: color .25s !important;
padding: 0 5px !important;
}
.cart-drawer .buttoned-input a:hover {
color: #FAF7F2 !important;
}
.cart-drawer .buttoned-input a svg {
width: 11px !important;
height: 11px !important;
}
.cart-drawer .buttoned-input input {
font-family: 'Outfit', sans-serif !important;
font-size: .72rem !important;
color: #FAF7F2 !important;
background: transparent !important;
width: 1.9em !important;
height: 1.9em !important;
}
.cart-drawer .buttoned-input input:hover,
.cart-drawer .buttoned-input input:focus {
background: transparent !important;
}
/* Empty state */
.cart-drawer__empty-content {
background: #2C2420 !important;
color: #D1C9BE !important;
}
.cart-drawer__empty-content .majortitle {
font-family: 'Playfair Display', Georgia, serif !important;
color: #FAF7F2 !important;
}
.cart-drawer__empty-content .rte {
font-family: 'Cormorant Garamond', serif !important;
font-size: 1rem !important;
color: #D1C9BE !important;
}
.cart-drawer__empty-content .icon--large {
color: #7A6548 !important;
}
/* Empty state button — specificity bumped to beat the cart-drawer
continue-link rule (.cart-drawer a[href="/collections/all"]) which
was hijacking the colour because the button IS a link to /collections/all. */
.cart-drawer .cart-drawer__empty-content .btn.btn,
.cart-drawer .cart-drawer__empty-content a[href="/collections/all"].btn,
.cart-drawer__empty-content .btn {
background: #C4A96C !important;
color: #2C2420 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .65rem !important;
font-weight: 400 !important;
letter-spacing: .2em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
padding: 1rem 2rem !important;
min-height: 50px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: background .25s, color .25s !important;
}
.cart-drawer .cart-drawer__empty-content .btn.btn:hover,
.cart-drawer .cart-drawer__empty-content a[href="/collections/all"].btn:hover,
.cart-drawer__empty-content .btn:hover {
background: #2C2420 !important;
color: #FAF7F2 !important;
}
/* Continue shopping link */
.cart-drawer .cart-drawer__continue,
.cart-drawer a[href="/collections/all"] {
font-family: 'Outfit', sans-serif !important;
font-size: .6rem !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #C4A96C !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(196,169,108,.3) !important;
transition: border-color .25s !important;
}
.cart-drawer .cart-drawer__continue:hover {
border-bottom-color: #C4A96C !important;
}
/* Inventory notice */
.cart-drawer .product-inventory {
font-family: 'Outfit', sans-serif !important;
font-size: .55rem !important;
letter-spacing: .06em !important;
}
.cart-drawer .product-inventory--low {
color: #C4A96C !important;
}
/* ═══════════════════════════════════════════
STEP 8 — Header & Footer Polish
═══════════════════════════════════════════ */
/* Announcement bar — taller */
.announcement-bar {
min-height: 36px !important;
}
/* Nav links — spacing & vertical centering */
.navigation--left .navigation__tier-1-container {
top: 50% !important;
transform: translateY(-50%) !important;
margin-top: 0 !important;
}
.navigation__tier-1 > .navigation__item > .navigation__link {
padding: 16px 1.1rem !important;
font-size: .74rem !important;
font-weight: 400 !important;
letter-spacing: .18em !important;
}
/* Hover underline — tight to text */
.navigation__tier-1 > .navigation__item > .navigation__link::before {
bottom: 4px !important;
}
/* Sale/Outlet nav link — gold accent on dark header */
.navigation__link[href*="sale"],
.navigation__link[href*="Sale"],
.navigation__link[href*="outlet"],
.navigation__link[href*="Outlet"] {
color: #C4A96C !important;
font-weight: 500 !important;
}
/* Mobile nav touch targets — see dedicated @media block near end of file */
/* Footer — brass top border accent */
#pagefooter, .section-footer {
border-top: 2px solid #7A6548 !important;
}
/* Footer column titles — gold + bottom border */
.section-footer h4,
.section-footer__menu-block__title {
color: #C4A96C !important;
padding-bottom: .5rem !important;
border-bottom: 1px solid rgba(196,169,108,.2) !important;
margin-bottom: .6rem !important;
}
/* Footer links — Cormorant Garamond */
.section-footer a {
font-family: 'Cormorant Garamond', serif !important;
font-size: .92rem !important;
line-height: 2 !important;
}
/* Payment icons — subtle */
.section-footer__payment-icons svg { opacity: 0.6 !important; }
/* Copyright — subtle */
.section-footer__lower, .section-footer__copyright {
font-family: 'Outfit', sans-serif !important;
font-size: .56rem !important;
color: #A59E96 !important;
}
/* ═══════════════════════════════════════════
STEP 9 — Global Button & CTA Improvements
═══════════════════════════════════════════ */
/* All primary buttons — touch-friendly */
.btn, .btn--primary, .add-to-cart,
.shopify-payment-button button {
min-height: 48px !important;
font-size: .65rem !important;
}
/* Ghost/secondary buttons — thicker border */
.btn--secondary, .btn--outline,
.btn-g {
border-width: 1.5px !important;
}
/* Exit-intent popup — dark + larger */
.exit-in {
background: #2C2420 !important;
border: 1px solid rgba(196,169,108,.15) !important;
max-width: 480px !important;
}
.exit-content h3 {
font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
}
.exit-form input {
min-height: 46px !important;
}
.exit-form button {
min-height: 46px !important;
font-size: .625rem !important;
}
/* ═══════════════════════════════════════════
STEP 10 — Mobile Experience
═══════════════════════════════════════════ */
@media (max-width: 900px) {
/* Touch targets — 44px minimum */
.btn, .btn--primary, .btn--secondary,
.add-to-cart, .shopify-payment-button button,
.toggle-btn, .link-dropdown__button {
min-height: 44px !important;
}
/* Form inputs — 44px, 16px font (prevents iOS zoom) */
input, select, textarea {
min-height: 44px !important;
font-size: 16px !important;
}
/* Section padding — tighter on mobile */
.jw-cats, .jw-story, .jw-journal,
.feat, .craft, .outlet, .rev-strip,
.nl-sec, .ed, .afi {
padding-top: 2.5rem !important;
padding-bottom: 2.5rem !important;
}
/* Product quick-buy — always visible */
.pc-qb {
transform: translateY(0) !important;
position: relative !important;
}
}
@media (max-width: 767px) {
/* Hero height — fixed 560px (no viewport units = no iOS address-bar jitter) */
.jw-hero {
height: 560px !important;
min-height: 0 !important;
}
/* Mobile: force solid (non-transparent) header so it doesn't overlap the
hero video's top edge. Transparent header is desktop-only. */
.pageheader--transparent,
.pageheader--transparent-permitted {
background: #2C2420 !important;
}
.pageheader--transparent .pageheader__inner,
.pageheader--transparent-permitted .pageheader__inner {
background: transparent !important;
}
.pageheader--transparent .navigation__link,
.pageheader--transparent-permitted .navigation__link {
color: #FAF7F2 !important;
}
/* Push hero content + video below the mobile header so the top isn't clipped. */
.template-index .jw-hero,
.jw-hero {
margin-top: 0 !important;
}
.template-index main#content {
padding-top: var(--theme-header-height, 64px) !important;
}
/* ── Lock mobile logo to ONE size + ONE image source.
The header renders TWO ![]()
elements when transparent is enabled
(.logo__image and .logo__image-transparent) and the theme cross-fades
between them on scroll. They have different intrinsic dimensions so
the visible "logo size" appears to change. Hide the transparent
variant entirely on mobile and pin the main one to a fixed box. */
body .pageheader .logo__image-transparent,
body .pageheader--transparent .logo__image-transparent,
body .pageheader--transparent-permitted .logo__image-transparent {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
body .pageheader .logo__image,
body .pageheader--transparent .logo__image,
body .pageheader--transparent-permitted .logo__image,
body .pageheader--stuck .logo__image,
body .pageheader--sticky .logo__image {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
body .pageheader .logo,
body .pageheader.pageheader--transparent .logo,
body .pageheader.pageheader--transparent-permitted .logo,
body .pageheader--stuck .logo,
body .pageheader.pageheader--sticky .logo,
body .pageheader .logo-area__middle,
body .pageheader .logo-area__middle--logo-image {
width: auto !important;
max-width: 85px !important;
height: auto !important;
transform: none !important;
transition: none !important;
}
body .pageheader .logo img,
body .pageheader.pageheader--transparent .logo img,
body .pageheader.pageheader--transparent-permitted .logo img,
body .pageheader--stuck .logo img,
body .pageheader.pageheader--sticky .logo img,
body .header--stuck .logo img,
body .nw.sc .logo img,
body .logo img,
body .logo .logo__image {
width: 85px !important;
max-width: 85px !important;
min-width: 85px !important;
height: 42px !important;
max-height: 42px !important;
object-fit: contain !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
/* Category grid — 2-col on tablet */
.jw-cats__grid {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 480px) {
/* Category grid — 1-col on phone */
.jw-cats__grid {
grid-template-columns: 1fr !important;
}
}
/* ═══════════════════════════════════════════
STEP 12 — Exit-Intent Popup Visual Refresh
═══════════════════════════════════════════ */
.exit-popup .exit-in {
background: #2C2420 !important;
border: 1px solid rgba(196,169,108,.15) !important;
max-width: 480px !important;
}
.exit-popup .exit-content h3 {
font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
color: #FAF7F2 !important;
}
.exit-popup .exit-form input {
min-height: 46px !important;
font-size: .88rem !important;
}
.exit-popup .exit-form button {
min-height: 46px !important;
font-size: .625rem !important;
}
/* ═══════════════════════════════════════════
CONSOLIDATED PRODUCT GALLERY
Single authoritative block for all gallery styles
═══════════════════════════════════════════ */
/* Page-level product area — cream background */
body .template-product .product-area,
body .template-product .product-section,
body .template-product .product-info {
background: #FAF7F2 !important;
}
/* Gallery container — clean white to match product images */
.template-product .media-gallery {
background: transparent !important;
}
/* Main image wrapper — transparent, no border (borders on individual items) */
.template-product .media-gallery .main-image {
background: transparent !important;
border: none !important;
overflow: visible !important;
}
/* Carousel main image — white bg, padded, subtle border */
.template-product .media-gallery carousel-slider {
display: block !important;
background: #ffffff !important;
border: 1px solid #E8E5E1 !important;
overflow: hidden !important;
position: relative !important;
}
/* Inner padding on the slider so shoes don't touch edges.
Reduced from 5% so the boot sits more centred in its frame and the gallery feels less catalogue-like. */
.template-product .media-gallery carousel-slider .slider__item {
padding: 2.5% !important;
background: #ffffff !important;
}
/* PDP column split — rebalance from theme's 62/38 to 55/45 so the buy column has breathing room.
Heritage peers (C&J, Grenson, Mr Porter) all sit in this range. */
@media (min-width: 1040px) {
.template-product .product-info .media-gallery-size-large {
width: 55% !important;
}
.template-product .product-info .media-gallery-size-large + .product-column-right {
width: calc(45% - 44px) !important;
max-width: 560px !important;
}
}
/* Hide the redundant gallery thumbnail strip on desktop PDPs.
The carousel arrows + dots already let users navigate; the thumbnail row underneath
was reading as an extra section. Mobile keeps thumbnails for swipe alternative. */
@media (min-width: 768px) {
.template-product .media-gallery .thumbnails,
.template-product .media-gallery carousel-slider.thumbnails {
display: none !important;
}
}
/* Gallery images — contain, don't crop the shoes */
.template-product .media-gallery .product-media--image {
background: #ffffff !important;
}
.template-product .media-gallery .product-media--image img,
.template-product .media-gallery .main-image .theme-img {
object-fit: contain !important;
transition: transform 0.4s ease !important;
}
.template-product .media-gallery carousel-slider:hover .product-media--image img {
transform: scale(1.03) !important;
}
/* Carousel arrows — always visible, bottom-right, branded */
.template-product .media-gallery .slider-nav--floating {
position: absolute !important;
bottom: 14px !important;
right: 14px !important;
top: auto !important;
left: auto !important;
display: flex !important;
gap: 6px !important;
z-index: 4 !important;
opacity: 1 !important;
}
.template-product .media-gallery .slider-nav--floating .slider-nav__btn {
position: static !important;
width: 38px !important;
height: 38px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: opacity .25s !important;
}
.template-product .media-gallery .slider-nav__btn--style-2 svg {
stroke: #7A6548 !important;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
}
.template-product .media-gallery .slider-nav__btn--style-2::after {
background: rgba(250,247,242,.92) !important;
border: 1px solid #E8E3DB !important;
border-radius: 0 !important;
}
.template-product .media-gallery .slider-nav__btn--style-2:hover::after {
background: #FAF7F2 !important;
border-color: #7A6548 !important;
}
.template-product .media-gallery .slider-nav__btn--style-2:hover svg {
stroke: #2C2420 !important;
}
/* ── Columns-1 vertical stacked gallery ── */
@media (min-width: 768px) {
/* Show the MAIN image carousel on desktop (inside .main-image only) */
.template-product .media-gallery--layout-columns-1 .main-image > carousel-slider.mobile-only {
display: block !important;
}
/* Carousel arrows — visible on desktop */
.template-product .media-gallery--layout-columns-1 .main-image .slider-nav--floating.desktop-only {
display: flex !important;
}
/* HIDE the thumbnail strip (separate carousel-slider outside .main-image) */
.template-product .media-gallery--layout-columns-1 > .media-gallery__inner > carousel-slider.thumbnails {
display: none !important;
}
/* Collage wrapper — display:contents removes the box (so JS offsetParent
returns null, preventing scroll-to-reveal on variant change) while
keeping the child images visible in the layout. */
.template-product .media-gallery--layout-columns-1 .product-media-collage {
display: contents !important;
}
/* Hide first collage image — it's already shown in the carousel above */
.template-product .media-gallery--layout-columns-1 .product-media-collage__item:first-child {
display: none !important;
}
/* Space between carousel and second collage image */
.template-product .media-gallery--layout-columns-1 .product-media-collage__item:nth-child(2) {
margin-top: 12px !important;
}
}
/* Each stacked image — padded, clean borders, proper spacing */
.template-product .product-media-collage__item {
background: #ffffff !important;
border: 1px solid #E8E5E1 !important;
overflow: hidden !important;
margin-bottom: 12px !important;
border-radius: 0 !important;
padding: 5% !important;
}
.template-product .product-media-collage__item:last-child {
margin-bottom: 0 !important;
}
.template-product .product-media-collage__item img {
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: contain !important;
transition: transform 0.4s ease !important;
}
.template-product .product-media-collage__item:hover img {
transform: scale(1.02) !important;
}
/* Sticky product info — stays pinned while scrolling through images */
.template-product .product-form.sticky-content-container {
top: calc(20px + var(--theme-sticky-header-height, 0px)) !important;
align-self: flex-start !important;
}
/* ── Product Thumbnails (mobile) ──
On columns-1 layout, thumbnails only show on mobile (<768px).
Target with high specificity to override main.css defaults (65px). */
/* Base thumbnail styles (all viewports, for when thumbnails render) */
.template-product .thumbnails .thumbnail {
border: 1px solid #E8E5E1 !important;
transition: border-color .25s !important;
cursor: pointer !important;
overflow: hidden !important;
background: #ffffff !important;
display: block !important;
}
/* Mobile thumbnail strip — the primary view for columns-1 gallery */
@media (max-width: 767px) {
/* Container: horizontal scroll, no wrapping, clean spacing */
.template-product carousel-slider.thumbnails {
margin-inline-end: 0 !important;
margin-bottom: 12px !important;
}
.template-product carousel-slider.thumbnails .slider {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.template-product carousel-slider.thumbnails .slider__grid {
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
padding: 12px 0 4px !important;
margin: 0 !important;
}
/* Each thumbnail: fixed 76px squares, proper tap targets */
.template-product carousel-slider.thumbnails .slider__item {
flex: 0 0 76px !important;
width: 76px !important;
min-width: 76px !important;
max-width: none !important;
padding: 0 !important;
padding-inline-end: 0 !important;
list-style: none !important;
}
/* Thumbnail image container: square with subtle border */
.template-product carousel-slider.thumbnails .thumbnail {
aspect-ratio: 1 / 1 !important;
padding: 4px !important;
border: 1px solid #E8E5E1 !important;
}
/* Thumbnail image: fill the square cleanly */
.template-product carousel-slider.thumbnails .thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Active state: brass border */
.template-product carousel-slider.thumbnails .is-active .thumbnail {
border-color: #7A6548 !important;
}
/* Active indicator bar — brass */
.template-product carousel-slider.thumbnails .thumbnail::after {
background: #7A6548 !important;
height: 2px !important;
}
/* Hide carousel nav arrows on thumbnail strip */
.template-product carousel-slider.thumbnails .slider-nav {
display: none !important;
}
}
/* Thumbnail hover/active — all viewports */
.template-product .thumbnails .thumbnail:hover {
border-color: rgba(122,101,72,.4) !important;
}
.template-product .thumbnails .is-active .thumbnail {
border-color: #7A6548 !important;
}
.template-product .thumbnails .thumbnail::after {
background: #7A6548 !important;
}
.template-product .thumbnails .thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Mobile gallery — swipe indicators & scroll snap */
@media (max-width: 767px) {
.template-product .media-gallery .slider {
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
}
.template-product .media-gallery .slider__item {
scroll-snap-align: center !important;
}
/* Brass swipe indicator dots */
.template-product .media-gallery .slider__dots .slider__dot,
.template-product .slider-nav__dot {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background: #DDD7CD !important;
border: none !important;
transition: background .25s, transform .25s !important;
}
.template-product .media-gallery .slider__dots .slider__dot--active,
.template-product .slider-nav__dot--active {
background: #7A6548 !important;
transform: scale(1.3) !important;
}
}
/* Desktop zoom cursor */
@media (min-width: 1025px) {
.template-product .media-gallery .main-image {
cursor: zoom-in !important;
}
}
/* ── Recently Viewed — single scrollable row, compact ── */
.template-product .jw-rv {
background: #E5DFD5 !important;
border-top: none !important;
padding-top: clamp(2rem, 4vw, 3rem) !important;
padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}
.template-product .jw-rv__head {
margin-bottom: clamp(.8rem, 1.5vw, 1.2rem) !important;
}
.template-product .jw-rv__grid {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
gap: clamp(.6rem, 1.2vw, 1rem) !important;
padding-bottom: 4px !important;
scrollbar-width: none !important;
}
.template-product .jw-rv__grid::-webkit-scrollbar {
display: none !important;
}
.template-product .jw-rv__card {
flex: 0 0 160px !important;
min-width: 160px !important;
}
@media (max-width: 600px) {
.template-product .jw-rv__card {
flex: 0 0 140px !important;
min-width: 140px !important;
}
}
.template-product .jw-rv__img {
background: #FAF7F2 !important;
}
/* ── Common Questions — consistent spacing with other sections ── */
.template-product .section-collapsible-tabs {
background: #FAF7F2 !important;
padding: clamp(2rem, 4vw, 3rem) 0 !important;
margin: 0 !important;
border: none !important;
}
.template-product .section-collapsible-tabs .collapsible-tabs {
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
}
.template-product .section-collapsible-tabs .collapsible-tabs__heading {
text-align: center !important;
margin-top: 0 !important;
margin-bottom: .8rem !important;
}
.template-product .section-collapsible-tabs .collapsible-tabs__tab,
.template-product .section-collapsible-tabs .collapsible-tabs__block {
text-align: left !important;
max-width: var(--reading-container-width, 800px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ── Related Products ("You may also like") — warm stone block ── */
.related-products {
background: #E5DFD5 !important;
border-top: 1px solid #DDD7CD !important;
margin-top: 0 !important;
padding: clamp(1.2rem, 2vw, 1.8rem) 0 clamp(1rem, 1.8vw, 1.6rem) !important;
}
.related-products .hometitle {
margin-bottom: 1rem !important;
}
.related-products > .container {
padding-top: 0 !important;
}
/* Cap the entire related-products container narrower than the page max so cards don't
blow up to 450px+. Targeting the .container is more reliable than targeting .product-grid
(which is several wrappers deep). 1080px = ~250px cards at 4 cols, matching peers. */
@media (min-width: 1100px) {
.related-products .container,
.related-products .container.fully-spaced-row {
max-width: 1080px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: clamp(1.5rem, 2vw, 2.5rem) !important;
padding-right: clamp(1.5rem, 2vw, 2.5rem) !important;
}
.related-products .collection-listing,
.related-products .related-collection {
max-width: 100% !important;
}
.related-products .product-grid {
column-gap: 1.25rem !important;
row-gap: 1.5rem !important;
}
}
/* Wider screens — give a bit more room but stay restrained. */
@media (min-width: 1500px) {
.related-products .container,
.related-products .container.fully-spaced-row {
max-width: 1180px !important;
}
}
/* Stop the page from auto-scrolling when a size variant is clicked.
Browser's scroll-anchoring tries to keep the focused button in view, but
inventory level + buy button height changes were causing a downward jump.
Disabling overflow-anchor on the buy column eliminates the jump. */
.template-product .product-info,
.template-product .product-column-right {
overflow-anchor: none !important;
}
.template-product .variant-input-wrap input,
.template-product .variant-input-wrap label,
.template-product .variant-picker__option {
scroll-margin-top: 120px !important;
}
/* Section heading */
.related-products .hometitle {
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
font-weight: 400 !important;
color: #2C2420 !important;
margin-bottom: 1.5rem !important;
}
/* Card container */
.related-products .product-block {
background: #FAF7F2 !important;
border: 1px solid #E8E5E1 !important;
transition: border-color .35s !important;
overflow: hidden !important;
}
.related-products .product-block:hover {
border-color: rgba(122,101,72,.3) !important;
}
/* Card image area — slight contrast from card bg */
.related-products .product-block .image-cont {
background: #ffffff !important;
}
.related-products .product-block .image-cont img {
transition: transform .7s cubic-bezier(.19,1,.22,1) !important;
}
.related-products .product-block:hover .image-cont img {
transform: scale(1.04) !important;
}
/* Card detail area — tight top, minimal bottom */
.related-products .product-block__detail {
padding: .5rem .75rem .35rem !important;
}
.related-products .product-block__detail .inner,
.related-products .product-block__detail .innerer {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Product title — slight breathing room above */
.related-products .product-block__title {
font-family: 'Playfair Display', serif !important;
font-size: .85rem !important;
font-weight: 500 !important;
color: #2C2420 !important;
margin-bottom: .15rem !important;
}
.related-products .product-block__title a {
color: inherit !important;
text-decoration: none !important;
}
.related-products .product-block__title a:hover {
color: #7A6548 !important;
}
/* Price — balanced sizing */
.related-products .product-block .product-price {
margin-bottom: .3rem !important;
}
.related-products .product-block .price,
.related-products .product-block .price__default {
font-family: 'Playfair Display', serif !important;
font-size: .85rem !important;
color: #7A6548 !important;
align-items: baseline !important;
}
.related-products .product-block .price__current {
font-size: .85rem !important;
color: #7A6548 !important;
}
/* Compare-at / was price — tighter gap, more legible */
.related-products .product-block .price__was {
font-family: 'Playfair Display', serif !important;
font-size: .78rem !important;
color: #8A8079 !important;
opacity: 1 !important;
text-decoration: line-through !important;
margin-left: .2rem !important;
}
/* "From" label */
.related-products .product-block .price__from {
font-family: 'Outfit', sans-serif !important;
font-size: .55rem !important;
letter-spacing: .06em !important;
color: #635A53 !important;
}
/* Colour swatches — separated from price, tight at bottom */
.related-products .product-block-options {
margin-top: .5rem !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.related-products .product-block-options__inner {
gap: 6px !important;
display: flex !important;
flex-wrap: wrap !important;
}
/* Mobile: keep up to 3 swatches on one line, wrap only at 4+ */
@media (max-width: 767px) {
.related-products .product-block-options__inner {
flex-wrap: nowrap !important;
}
.related-products .product-block-options__inner:has(.product-block-options__item:nth-child(4)) {
flex-wrap: wrap !important;
}
.related-products .product-block-options__item {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
}
}
.related-products .product-block-options__item {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
border-radius: 2px !important;
border: 1px solid #DDD7CD !important;
overflow: hidden !important;
padding: 0 !important;
cursor: pointer !important;
transition: border-color .25s !important;
}
.related-products .product-block-options__item:hover {
border-color: rgba(122,101,72,.4) !important;
}
.related-products .product-block-options__item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* "+X more" label */
.related-products .product-block-options__more-label {
font-family: 'Outfit', sans-serif !important;
font-size: .5rem !important;
color: #7A6548 !important;
letter-spacing: .06em !important;
}
/* Quick buy button — whisper-thin bar, doesn't crowd the image */
.related-products .quickbuy-toggle,
.related-products .product-block .btn--secondary {
background: rgba(122,101,72,.55) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .4rem !important;
font-weight: 300 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
border: none !important;
border-radius: 0 !important;
padding: .25rem .6rem !important;
min-height: 0 !important;
line-height: 1.1 !important;
}
.related-products .quickbuy-toggle:hover {
background: rgba(122,101,72,.78) !important;
}
/* Slide up on hover — desktop only */
@media (min-width: 901px) {
.related-products .quickbuy-toggle,
.related-products .product-block .btn--secondary {
transform: translateY(100%) !important;
transition: transform .35s cubic-bezier(.19,1,.22,1), background .25s !important;
}
.related-products .product-block:hover .quickbuy-toggle,
.related-products .product-block:hover .btn--secondary {
transform: translateY(0) !important;
}
}
/* Always visible on mobile */
@media (max-width: 900px) {
.related-products .quickbuy-toggle,
.related-products .product-block .btn--secondary {
transform: translateY(0) !important;
position: relative !important;
}
}
/* Product labels/badges */
.related-products .product-label {
font-family: 'Outfit', sans-serif !important;
font-size: .5rem !important;
font-weight: 400 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
background: #7A6548 !important;
color: #FAF7F2 !important;
padding: .2rem .5rem !important;
border-radius: 0 !important;
}
/* ═══════════════════════════════════════════
MOBILE & RESPONSIVE — Consolidated
3 tiers: ≤767 Mobile, 768–1024 Tablet, ≥1025 Desktop
═══════════════════════════════════════════ */
/* -- Mega menu overflow fix -- */
@media (max-width: 1024px) {
.navigation .navigation__tier-2-container,
.navigation__tier-2 {
min-width: 0 !important;
width: 100% !important;
max-width: 100vw !important;
}
}
/* -- Touch targets: 44×44px minimum on tablet and below -- */
@media (max-width: 1024px) {
.navigation__link,
.toggle-btn,
.link-dropdown__button,
.pagination a,
.pagination span,
.filter-group__item label,
.faceted-filters label,
.cc-accordion__title,
.quantity-adjuster__button {
min-height: 44px !important;
min-width: 44px !important;
display: inline-flex !important;
align-items: center !important;
}
/* Cart quantity buttons */
.quantity-adjuster__button {
padding: .5rem !important;
}
}
/* -- iOS input zoom prevention: 16px min on all inputs -- */
@media (max-width: 767px) {
input, select, textarea {
font-size: 16px !important;
}
/* Mobile typography floor — never below 14px on body text */
body,
.rte,
.product-description,
.accordion__content,
.cc-accordion__panel {
font-size: max(14px, .88rem) !important;
}
/* Newsletter form — stack on narrow screens */
.nl-f,
.newsletter .form-group,
.newsletter form {
max-width: 100% !important;
}
.nl-f input,
.newsletter input[type="email"] {
max-width: 100% !important;
width: 100% !important;
}
/* Product grid — 2 columns with adequate spacing */
.product-grid,
.collection-listing .product-list {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .5rem !important;
}
.product-block__title a {
font-size: .82rem !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
/* Sticky header — max 15% viewport */
.section-header,
.pageheader {
max-height: 15vh !important;
}
.section-header .logo img,
.pageheader .logo img {
max-height: 36px !important;
}
/* Navigation padding — equal top/bottom for centred logo */
.pageheader__layout,
.header__wrapper {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.section-header .logo,
.pageheader .logo {
padding: 4px 0 !important;
display: flex !important;
align-items: center !important;
}
}
/* ── Collection page — visual rhythm & contrast ── */
/* Reviews section on collection pages — dark contrast block */
.template-collection .jw-reviews {
background: #2C2420 !important;
padding: clamp(2.5rem, 5vw, 4rem) clamp(1.2rem, 3.5vw, 3.5rem) !important;
}
.template-collection .jw-reviews .rev-label,
.template-collection .jw-reviews .rev-heading {
color: #FAF7F2 !important;
}
.template-collection .jw-reviews .rev-heading em {
color: #C4A96C !important;
}
.template-collection .jw-reviews .rev-card {
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.06) !important;
}
.template-collection .jw-reviews .rev-card blockquote {
color: #D1C9BE !important;
}
.template-collection .jw-reviews .rev-author {
color: #A59E96 !important;
}
.template-collection .jw-reviews .rev-stars svg {
fill: #C4A96C !important;
}
/* -- Content visibility for below-fold sections -- */
.jw-craftsmanship,
.jw-outlet,
.jw-journal,
.jw-reviews,
.jw-newsletter,
.jw-featured-in,
.feat,
.craft,
.outlet,
.ed,
.rev-strip,
.nl-sec,
.afi,
.section-footer {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}
}
/* ═══════════════════════════════════════════════════════
Mobile Nav Drawer — Typography, Spacing & Touch Targets
═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Tier-1 nav links */
.mobile-navigation-drawer .navigation__tier-1 > .navigation__item > .navigation__link {
font-family: 'Playfair Display', serif !important;
font-size: 1.1rem !important;
font-weight: 400 !important;
color: #FAF7F2 !important;
padding: 14px 20px !important;
min-height: 48px !important;
}
/* Tier-1 expand toggle (chevron) — match link height */
.mobile-navigation-drawer .navigation__tier-1 > .navigation__item > .navigation__children-toggle {
min-height: 48px !important;
padding: 14px 20px !important;
color: rgba(250,247,242,.5) !important;
}
/* Item dividers — on the item, not the link; remove from last item */
.mobile-navigation-drawer .navigation__tier-1 > .navigation__item {
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.mobile-navigation-drawer .navigation__tier-1 > .navigation__item:last-child {
border-bottom: none !important;
}
/* Tier-2 links (submenu) */
.mobile-navigation-drawer .navigation__tier-2 > .navigation__item > .navigation__link {
font-family: 'Cormorant Garamond', serif !important;
font-size: 0.95rem !important;
font-weight: 400 !important;
color: #D1C9BE !important;
padding: 12px 20px !important;
min-height: 44px !important;
}
/* Tier-2 expand toggle */
.mobile-navigation-drawer .navigation__tier-2 > .navigation__item > .navigation__children-toggle {
min-height: 44px !important;
color: rgba(209,201,190,.5) !important;
}
/* Tier-2 item dividers */
.mobile-navigation-drawer .navigation__tier-2 > .navigation__item {
border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
/* Tier-3 links (deep submenu) */
.mobile-navigation-drawer .navigation__tier-3 > .navigation__item > .navigation__link {
font-family: 'Cormorant Garamond', serif !important;
font-size: 0.875rem !important;
font-weight: 300 !important;
color: rgba(209,201,190,.7) !important;
padding: 10px 20px 10px 32px !important;
min-height: 40px !important;
}
/* Hover — brass accent, all tiers */
.mobile-navigation-drawer .navigation__link:hover {
color: #C4A96C !important;
}
/* Close button — icon only, no nav link bloat */
.mobile-navigation-drawer .mobile-nav-toggle {
font-size: 0 !important;
min-height: auto !important;
border-bottom: none !important;
color: #FAF7F2 !important;
padding: 12px 20px !important;
}
/* Back button — visible, cream arrow, prominent tap target */
.mobile-navigation-drawer .mobile-nav-back {
font-size: 0 !important;
min-height: 48px !important;
border-bottom: none !important;
color: #FAF7F2 !important;
padding: 12px 20px !important;
display: flex !important;
align-items: center !important;
}
/* Ensure back button is visible when child menu is open */
.mobile-navigation-drawer--child-open .mobile-nav-back {
visibility: visible !important;
opacity: 1 !important;
}
.mobile-navigation-drawer .mobile-nav-back svg {
width: 24px !important;
height: 24px !important;
stroke: #FAF7F2 !important;
stroke-width: 2 !important;
}
.mobile-navigation-drawer .mobile-nav-toggle svg {
width: 20px !important;
height: 20px !important;
stroke: #FAF7F2 !important;
}
/* Drawer header — flex layout, sits above tier-2 slide-in */
.mobile-navigation-drawer .navigation__mobile-header {
border-bottom: 1px solid rgba(255,255,255,.1) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 52px !important;
position: relative !important;
z-index: 5 !important;
background: #2C2420 !important;
}
/* Tier-2 container — sits below header, proper background */
.mobile-navigation-drawer .navigation__tier-2-container {
top: 52px !important;
background: #2C2420 !important;
}
.mobile-navigation-drawer .navigation__tier-2-container > .container {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Tier-2 submenu links — comfortable padding from edges */
.mobile-navigation-drawer .navigation__tier-2 > .navigation__item > .navigation__link {
padding-left: 28px !important;
padding-right: 28px !important;
}
.mobile-navigation-drawer .navigation__tier-2 > .navigation__item > .navigation__children-toggle {
padding-left: 12px !important;
padding-right: 28px !important;
}
/* Mobile nav title (shown when in submenu) */
.mobile-navigation-drawer .mobile-nav-title {
font-family: 'Playfair Display', serif !important;
font-size: 0.95rem !important;
font-weight: 400 !important;
color: #FAF7F2 !important;
letter-spacing: 0.03em !important;
}
/* Drawer footer — remove double borders */
.mobile-navigation-drawer__footer {
border-top: none !important;
margin-top: 0 !important;
}
.mobile-navigation-drawer__footer .announcement-bar__link {
border-top: 1px solid rgba(255,255,255,.08) !important;
color: #D1C9BE !important;
font-family: 'Cormorant Garamond', serif !important;
font-size: 0.85rem !important;
padding: 14px 0 !important;
margin: 0 20px !important;
}
/* Footer area — smaller text */
.mobile-navigation-drawer__footer a {
font-size: 0.85rem !important;
font-family: 'Cormorant Garamond', serif !important;
color: #D1C9BE !important;
min-height: 44px !important;
display: flex !important;
align-items: center !important;
}
/* Social icons — subtle border, proper sizing */
.mobile-navigation-drawer__footer .social {
border-top: 1px solid rgba(255,255,255,.06) !important;
padding: 14px 0 !important;
}
.mobile-navigation-drawer__footer .social a {
min-height: auto !important;
border-bottom: none !important;
font-size: inherit !important;
color: rgba(250,247,242,.5) !important;
}
.mobile-navigation-drawer__footer .social a:hover {
color: #C4A96C !important;
}
.mobile-navigation-drawer__footer .social a svg {
width: 18px !important;
height: 18px !important;
}
/* Localization selector — subtle styling */
.mobile-navigation-drawer__footer .header-localization .localization__selector {
border-top: 1px solid rgba(255,255,255,.06) !important;
}
.mobile-navigation-drawer__footer .header-localization .custom-select__btn {
color: #D1C9BE !important;
font-family: 'Outfit', sans-serif !important;
font-size: 0.75rem !important;
letter-spacing: 0.08em !important;
}
/* Featured products title */
.mobile-navigation-drawer .navigation__mobile-products-title {
font-family: 'Playfair Display', serif !important;
font-size: 0.95rem !important;
color: #FAF7F2 !important;
}
/* Navigation list — reduce bottom margin */
.mobile-navigation-drawer .navigation {
margin-bottom: 16px !important;
}
/* Sale/Outlet link — brass in mobile drawer */
.mobile-navigation-drawer .navigation__link[href*="sale"],
.mobile-navigation-drawer .navigation__link[href*="Sale"],
.mobile-navigation-drawer .navigation__link[href*="outlet"],
.mobile-navigation-drawer .navigation__link[href*="Outlet"] {
color: #C4A96C !important;
font-weight: 500 !important;
}
}
/* ═══════════════════════════════════════════════════════
Mobile Homepage — Section Overrides
═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* ── Categories (Shoes, Boots, Loafers, Sneakers) ── */
/* Reduce card height from 3:4 portrait to square */
.jw-cats__card {
aspect-ratio: 1/1 !important;
}
/* Tighten bottom padding to close gap before "As Featured In" */
.jw-cats {
padding-bottom: 2rem !important;
}
/* ── "As Featured In" — clean mobile layout ── */
.jw-afi {
padding: 1.5rem 1.2rem !important;
}
.jw-afi__line {
margin-bottom: 0.8rem !important;
}
.jw-afi__heading {
font-size: 0.65rem !important;
letter-spacing: 0.3em !important;
margin-bottom: 1rem !important;
}
.jw-afi__row {
flex-direction: column !important;
align-items: center !important;
gap: 0 !important;
}
.jw-afi__item {
padding: 0.4rem 0 !important;
}
/* Remove vertical separators — they don't work in a column */
.jw-afi__item:not(:last-child)::after {
display: none !important;
}
.jw-afi__name {
font-size: 0.7rem !important;
letter-spacing: 0.12em !important;
}
.jw-afi__name span {
font-size: 0.55rem !important;
}
.jw-afi__line-b {
margin-top: 0.8rem !important;
}
/* ── "Modern Gentleman" video block — fixed 440px (no iOS jitter) ── */
.jw-lvid {
height: 440px !important;
}
/* ── "Our Heritage" video block — match Modern Gentleman ── */
.jw-hvid {
height: 440px !important;
}
/* ── Heritage Story image — less tall ── */
.jw-story__image-wrap {
aspect-ratio: 4/3 !important;
}
/* ── Heritage badge (1919 Northampton) — smaller on mobile ── */
.jw-story__badge {
padding: 0.5rem 0.6rem !important;
bottom: 0.8rem !important;
right: 0.8rem !important;
}
.jw-story__badge-year {
font-size: 0.95rem !important;
}
.jw-story__badge-text {
font-size: 0.5rem !important;
}
/* ── "As Featured In" — hide Drapers on mobile ── */
.jw-afi__item:nth-child(3) {
display: none !important;
}
/* ── Craftsmanship / Art of Making — icon beside number, compact cards ── */
.jw-craft__card {
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-template-rows: auto auto auto !important;
column-gap: 0.5rem !important;
row-gap: 0 !important;
padding: 0.8rem 1rem 1rem !important;
align-items: start !important;
}
/* Icon — first column, first row */
.jw-craft__card svg {
grid-column: 1 !important;
grid-row: 1 !important;
width: 20px !important;
height: 20px !important;
margin-bottom: 0 !important;
align-self: center !important;
}
/* Number — second column, first row (beside icon) */
.jw-craft__card-num {
grid-column: 2 !important;
grid-row: 1 !important;
font-size: 1.05rem !important;
margin-bottom: 0.2rem !important;
align-self: center !important;
}
/* Title — spans both columns, second row */
.jw-craft__card-title {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
font-size: 0.88rem !important;
margin-bottom: 0.25rem !important;
margin-top: 0.4rem !important;
}
/* Text — spans both columns, third row */
.jw-craft__card-text {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
font-size: 0.82rem !important;
line-height: 1.65 !important;
}
.jw-craft__grid {
gap: 0.8rem !important;
}
.jw-craft {
padding-top: 2.5rem !important;
padding-bottom: 2.5rem !important;
}
/* ── Outlet — taller section, larger cards ── */
.jw-outlet {
padding-top: clamp(3.5rem, 8vw, 5rem) !important;
padding-bottom: clamp(3.5rem, 8vw, 5rem) !important;
}
.jw-outlet__card-img {
aspect-ratio: 3/4 !important;
}
.jw-outlet__card-name {
font-size: 0.9rem !important;
}
.jw-outlet__card-now {
font-size: 0.92rem !important;
}
.jw-outlet__title {
font-size: clamp(1.8rem, 5vw, 2.2rem) !important;
}
/* ── Background video (above Outlet) — match JW video block heights ── */
.video-section--background .height--fixed {
--image-height: 600px !important;
max-height: clamp(420px, 65vh, 600px) !important;
}
/* ── Footer — mobile: compact and tight ── */
.section-footer {
padding: 1.2rem 1rem !important;
}
.section-footer__row--blocks {
gap: .8rem !important;
}
.section-footer__title {
font-size: 0.62rem !important;
margin-bottom: 0.2rem !important;
}
.section-footer a {
font-size: 0.8rem !important;
line-height: 1.5 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.section-footer__menu-block__menu li {
margin-bottom: 0 !important;
padding: 0 !important;
}
.section-footer__lower,
.section-footer__copyright {
font-size: 0.5rem !important;
padding-top: .6rem !important;
}
.section-footer__payment-icons svg {
width: 24px !important;
height: auto !important;
}
/* Currency / localization selector — compact */
.section-footer__localization .localization__selector {
max-width: 180px !important;
}
.section-footer__localization .custom-select__btn {
font-size: 0.72rem !important;
padding: 6px 10px !important;
min-height: 32px !important;
}
.section-footer__localization .custom-select__btn svg {
width: 14px !important;
height: 14px !important;
}
.section-footer__localization .localization__grid {
gap: 6px !important;
}
/* Social icons — smaller */
.section-footer .social a {
margin-inline-end: 6px !important;
margin-bottom: 3px !important;
}
.section-footer .social a svg {
width: 16px !important;
height: 16px !important;
}
.section-footer .social a img {
height: 16px !important;
}
.section-footer .social--large {
--icon-size: 16px !important;
}
/* Tighten gaps between footer blocks */
.section-footer__text-block__social:not(:last-child) .social {
margin-bottom: 6px !important;
}
.section-footer__row__col {
margin-bottom: 0 !important;
}
.section-footer__menu-block__menu {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Lower bar — minimal */
.section-footer__lower {
margin-top: .3rem !important;
padding-top: .3rem !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
gap: 0 !important;
}
.section-footer__row-lower {
padding-top: 6px !important;
padding-bottom: 4px !important;
}
.section-footer__row-lower .section-footer__row__col {
padding: 1px 0 !important;
}
/* Currency selector — reduce space below */
.section-footer__localization {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Payment icons — reduce gap when localization present */
.section-footer__row-container--with-localization .section-footer__payment-icons {
margin-top: 0 !important;
margin-bottom: 0.5rem !important;
}
/* Footer section — trim bottom padding */
.section-footer {
padding-bottom: 0 !important;
}
.section-footer__row--blocks {
padding-bottom: 10px !important;
}
.section-footer__row-container:last-child {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Hide duplicate lower menu (Returns, Shipping etc. already in main footer) */
.section-footer__lower-menu {
display: none !important;
}
/* Hide duplicate copyright (already shown above) */
.section-footer .copyright {
display: none !important;
}
}
/* =============================================
BLOG / ARTICLE PAGES — mobile spacing
============================================= */
/* Blog listing: reduce excessive 50px article padding on mobile */
@media (max-width: 767px) {
.article-list .article {
padding-top: 20px !important;
padding-bottom: 16px !important;
}
.article-list .article:first-child {
padding-top: 12px !important;
}
}
/* =============================================
POLICY PAGES
============================================= */
.jw-pol{background:#FAF7F2}
/* Policy body typography */
.jw-pol__body{max-width:960px;margin:0 auto;padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,5rem)}
.jw-pol__body p,
.jw-pol__body li{font-family:'Cormorant Garamond',Garamond,serif;font-size:1rem;font-weight:300;line-height:1.85;color:#4A423B}
.jw-pol__body p{margin-bottom:1.1rem}
.jw-pol__body h1,.jw-pol__body h2,.jw-pol__body h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;color:#2C2420}
.jw-pol__body h2{font-size:clamp(1.15rem,1.8vw,1.4rem);margin:2.5rem 0 .8rem;padding-bottom:.5rem;border-bottom:1px solid #E8E2D9}
.jw-pol__body h3{font-size:clamp(1rem,1.4vw,1.15rem);margin:2rem 0 .6rem}
.jw-pol__body strong{color:#2C2420;font-family:'Outfit',sans-serif;font-size:.88rem;font-weight:400;letter-spacing:.015em}
.jw-pol__body a{color:#7A6548;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.jw-pol__body a:hover{color:#5F4E35}
.jw-pol__body ul,.jw-pol__body ol{margin:.8rem 0 1.2rem 1.5rem}
.jw-pol__body li{margin-bottom:.45rem}
.jw-pol__body table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-family:'Outfit',sans-serif;font-size:.82rem}
.jw-pol__body th{background:#2C2420;color:#FAF7F2;padding:.7rem .8rem;text-align:left;font-weight:400;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase}
.jw-pol__body td{padding:.6rem .8rem;border:1px solid #DDD7CD}
.jw-pol__body tr:nth-child(even) td{background:#F5F0E8}
.jw-pol__body hr{border:none;border-top:1px solid #E8E2D9;margin:2rem 0}
/* Hide the "Discover" / Quick Buy button that appears on product card hover, globally.
Theme setting controls this too (Settings → Product cards → Quick buy = Off), but the
CSS hide is belt-and-braces so it's gone on every template/section. */
.quickbuy-toggle.btn,
.product-block .quickbuy-toggle.btn,
.product-block__quickbuy,
.image-cont__buttons .quickbuy-toggle,
.quickbuy-container,
.jw-fc__card-qb {
display: none !important;
}
/* The product image itself stays a normal link to the PDP — only the floating Quick Buy
panel/button is suppressed. */
/* ── Inner Circle newsletter popup (modal) ── */
.ic-pop{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:1rem}
.ic-pop[aria-hidden="false"]{display:flex}
.ic-pop__backdrop{position:absolute;inset:0;background:rgba(20,15,10,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .35s ease}
.ic-pop[aria-hidden="false"] .ic-pop__backdrop{opacity:1}
.ic-pop__card{position:relative;display:flex;background:#FAF7F2;width:100%;max-width:760px;max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(20,15,10,.45);transform:translateY(20px);opacity:0;transition:transform .45s cubic-bezier(.19,1,.22,1) .05s, opacity .45s ease .05s}
.ic-pop[aria-hidden="false"] .ic-pop__card{transform:translateY(0);opacity:1}
.ic-pop__close{position:absolute;top:14px;right:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#2C2420;cursor:pointer;z-index:2;border-radius:50%;transition:background .2s}
.ic-pop__close:hover{background:rgba(44,36,32,.08)}
/* Decorative left plate (heritage card) */
.ic-pop__plate{flex:0 0 38%;background:#2C2420;color:#FAF7F2;display:flex;align-items:center;justify-content:center;padding:2.5rem 1.5rem;text-align:center}
.ic-pop__plate-inner{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.ic-pop__plate-eyebrow{font-family:'Outfit',sans-serif;font-size:.55rem;font-weight:300;letter-spacing:.3em;text-transform:uppercase;color:#C4A96C}
.ic-pop__plate-year{font-family:'Playfair Display',serif;font-size:3rem;font-weight:400;line-height:1;color:#FAF7F2;margin:.2rem 0}
.ic-pop__plate-rule{width:40px;height:1px;background:#C4A96C;margin:.5rem 0}
.ic-pop__plate-caption{font-family:'Cormorant Garamond',serif;font-size:.95rem;font-weight:300;color:#D1C9BE;line-height:1.5}
/* Right body */
.ic-pop__body{flex:1 1 auto;padding:clamp(2rem,3.5vw,3rem) clamp(1.5rem,3vw,2.5rem);display:flex;flex-direction:column;justify-content:center}
.ic-pop__eyebrow{font-family:'Outfit',sans-serif;font-size:.56rem;font-weight:300;letter-spacing:.3em;text-transform:uppercase;color:#7A6548;margin-bottom:.5rem}
.ic-pop__title{font-family:'Playfair Display',serif;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:400;color:#2C2420;margin-bottom:.7rem;line-height:1.15}
.ic-pop__title em{color:#7A6548;font-style:italic}
.ic-pop__sub{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:300;color:#4A413A;line-height:1.6;margin-bottom:1.4rem}
.ic-pop__field{display:flex;border:1px solid #DDD7CD;background:#fff}
.ic-pop__field input[type="email"]{flex:1 1 auto;padding:.85rem 1rem;border:none;background:transparent;font-family:'Outfit',sans-serif;font-size:.85rem;color:#2C2420;outline:none}
.ic-pop__field input[type="email"]::placeholder{color:#9B9088}
.ic-pop__submit{flex:0 0 auto;padding:0 1.4rem;background:#2C2420;color:#FAF7F2;border:none;font-family:'Outfit',sans-serif;font-size:.65rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .25s}
.ic-pop__submit:hover{background:#7A6548}
.ic-pop__skip{margin-top:1rem;background:none;border:none;color:#9B9088;font-family:'Outfit',sans-serif;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;align-self:flex-start;padding:.3rem 0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ic-pop__skip:hover{color:#2C2420}
.ic-pop__err{font-family:'Cormorant Garamond',serif;color:#A04040;font-size:.9rem;margin-bottom:.8rem}
.ic-pop__ok{font-family:'Cormorant Garamond',serif;color:#2C2420;font-size:1rem;line-height:1.5;background:#F5F0E8;padding:1rem 1.2rem;border-left:3px solid #C4A96C}
@media (max-width:600px){
/* Compact mobile layout — plate becomes a single-line eyebrow strip */
.ic-pop__card{flex-direction:column;max-height:88vh;max-width:94vw}
.ic-pop__plate{flex:0 0 auto;padding:.75rem 1rem}
.ic-pop__plate-inner{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem}
.ic-pop__plate-eyebrow{font-size:.5rem;letter-spacing:.28em;margin:0}
.ic-pop__plate-year{font-size:1.05rem;font-weight:400;margin:0;line-height:1}
.ic-pop__plate-rule{display:none}
.ic-pop__plate-caption{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-family:'Outfit',sans-serif;font-weight:300;line-height:1.2;color:#D1C9BE}
.ic-pop__body{padding:1.25rem 1.1rem 1.1rem}
.ic-pop__eyebrow{margin-bottom:.35rem}
.ic-pop__title{font-size:1.35rem;margin-bottom:.45rem;line-height:1.15}
.ic-pop__sub{font-size:.92rem;line-height:1.45;margin-bottom:.9rem}
.ic-pop__field input[type="email"]{padding:.7rem .8rem;font-size:.82rem}
.ic-pop__submit{padding:0 1.1rem;font-size:.6rem}
.ic-pop__skip{margin-top:.6rem;font-size:.55rem}
.ic-pop__close{top:8px;right:8px;width:28px;height:28px}
}
/* Full-bleed banner headers — break out of .container max-width */
.container.cf > .shopify-section.jw-ch-section,
.container.cf > .shopify-section.jw-ob-section,
.container > .jw-ch-section,
.container > .jw-ob-section{
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
width:100vw !important;
max-width:100vw !important;
padding-left:0 !important;
padding-right:0 !important;
box-sizing:border-box !important;
}
.container.cf > .shopify-section.jw-ch-section > .jw-ch,
.container.cf > .shopify-section.jw-ob-section > .jw-ob{
width:100% !important;
max-width:none !important;
}
.jw-pol__body blockquote{border-left:3px solid #C4A96C;margin:1.5rem 0;padding:.8rem 1.2rem;font-style:italic;color:#635A53}
/* ──────────────────────────────────────────────────────────────────────
GLOBAL PRODUCT CARD — "Contained Heritage" (22 Apr 2026)
Bordered cards, warm-stone body, soft-ivory image panel, brass hover,
refined sale badge as image overlay. Applied everywhere product cards
render: collection grids, search, featured-collection, related/"you
may also like", PDP cross-sells. Cart-drawer has its own explicit
overrides at ~1424 / ~1477 and is intentionally excluded.
────────────────────────────────────────────────────────────────────── */
.product-block {
background: #EDE8E0 !important; /* warm stone — distinct from page cream */
border: 1px solid #D9D2C5 !important; /* visible heritage frame */
border-radius: 2px !important;
transition: border-color .35s, box-shadow .35s, transform .35s !important;
overflow: hidden !important;
}
.product-block:hover {
border-color: rgba(122,101,72,.45) !important;
box-shadow: 0 6px 18px -8px rgba(44,36,32,.18) !important;
}
.product-block .image-cont {
background: #F8F5EF !important; /* soft ivory — recedes, not shouty white */
}
.product-block .image-cont img {
transition: transform .7s cubic-bezier(.19,1,.22,1) !important;
}
.product-block:hover .image-cont img {
transform: scale(1.04) !important;
}
/* Card detail block — more generous padding, clearer hierarchy */
.product-block .product-block__detail {
padding: .85rem 1rem .9rem !important;
}
.product-block .product-block__title {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: .95rem !important;
font-weight: 500 !important;
letter-spacing: .005em !important;
color: #2C2420 !important;
margin-bottom: .35rem !important;
}
/* Price hierarchy — strikethrough first (anchor), bold current (decision),
both kept legible. Overrides the faint #999 strikethrough across the site. */
.product-block .product-price,
.product-block .price {
font-family: 'Playfair Display', Georgia, serif !important;
align-items: baseline !important;
}
/* Match homepage Best Sellers EXACTLY (.jw-bs__card-price / .jw-bs__card-old).
Sale price: Playfair Display .86rem brass.
Strikethrough: Cormorant Garamond .82rem light grey.
Updated 13 May 2026 to mirror Banff card typography. */
.product-block .price__current {
font-family: 'Playfair Display', serif !important;
font-size: .86rem !important;
font-weight: 400 !important;
color: #2C2420 !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
}
.product-block .price--on-sale .price__current {
color: #7A6548 !important; /* brass — same as .jw-bs__card-sale */
font-weight: 400 !important;
}
.product-block .price__was {
font-family: 'Cormorant Garamond', serif !important;
font-size: .92rem !important; /* bumped from .82 — readable anchor */
font-weight: 500 !important; /* was 400 — adds weight for clarity */
color: #6B5F54 !important; /* darker walnut grey — clearly readable, still subordinate to brass sale price */
text-decoration: line-through !important;
text-decoration-thickness: 1.5px !important; /* was 1px — strikethrough is visible at a glance */
text-decoration-color: #6B5F54 !important; /* matches text colour — no faded line */
letter-spacing: 0 !important;
line-height: 1.2 !important;
margin: 0 !important;
}
.product-block .price__from {
font-family: 'Outfit', sans-serif !important;
font-size: .56rem !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: #8A8079 !important;
}
/* Hide the price-row "Sale" pill — redundant now that strikethrough +
image overlay both communicate the same thing. Reduces visual noise. */
.product-block .price-label--sale,
.product-block span.price-label--sale {
display: none !important;
}
/* Sale price ORDER — strikethrough first, sale price second (anchor effect).
Matches Banff homepage layout (was £180 → current £129). HTML emits
current→was so we override via flex `order`. */
.product-block .price--on-sale .price__default {
display: inline-flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: baseline !important;
flex-wrap: wrap !important;
gap: .4rem !important;
}
.product-block .price--on-sale .price__from { order: 1 !important; }
.product-block .price--on-sale .price__was { order: 2 !important; }
.product-block .price--on-sale .price__current { order: 3 !important; }
/* Also apply the reorder to PDP price (outside .product-block scope) */
.product-price--on-sale .price__default,
.price.price--on-sale > .price__default {
display: inline-flex !important;
align-items: baseline !important;
flex-wrap: wrap !important;
gap: .4rem !important;
}
.price--on-sale .price__from { order: 1 !important; }
.price--on-sale .price__was { order: 2 !important; }
.price--on-sale .price__current { order: 3 !important; }
/* ── Sale badge — refined brass marker, top-left of image ──
Replaces the oversized pill. Tiny, ALL-CAPS, brass on ivory. */
.product-block .image-cont .product-label-container,
.product-block .image-label-wrap .product-label-container {
top: 10px !important;
left: 10px !important;
right: auto !important;
bottom: auto !important;
align-items: flex-start !important;
justify-content: flex-start !important;
}
.product-block .product-label {
margin: 0 0 4px 0 !important;
}
.product-block .product-label--sale > span,
.product-block .product-label--new-in > span,
.product-block .product-label--meta > span,
.product-block .product-label--stock > span {
font-family: 'Outfit', sans-serif !important;
font-size: .5rem !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
padding: .32em .7em !important;
border-radius: 1px !important;
line-height: 1 !important;
font-weight: 500 !important;
}
.product-block .product-label--sale > span {
background: #7A6548 !important;
color: #FAF7F2 !important;
border: none !important;
box-shadow: 0 1px 3px rgba(44,36,32,.18) !important;
}
.product-block .product-label--new-in > span {
background: #FAF7F2 !important;
color: #7A6548 !important;
border: 1px solid rgba(122,101,72,.35) !important;
box-shadow: none !important;
}
.product-block .product-label--stock > span {
background: #2C2420 !important;
color: #FAF7F2 !important;
}
/* Colour swatches below price — give them breathing room from price row */
.product-block .product-block-options {
margin-top: .55rem !important;
}
/* ── Related-products section — align with new global card style ──
Section keeps its warm-stone backdrop but cards now inherit the same
treatment as everywhere else, so "You may also like" looks consistent
with collection grid rather than being a one-off. */
.related-products .product-block {
background: #EDE8E0 !important;
border: 1px solid #D9D2C5 !important;
}
.related-products .product-block .image-cont {
background: #F8F5EF !important;
}
/* ── Collection grid — a touch more air between cards on desktop ── */
@media (min-width: 768px) {
.template-collection .product-grid,
.collection-listing .product-grid {
column-gap: 1.5rem !important;
row-gap: 2rem !important;
}
}
/* ── Mobile polish — keep the same card treatment but tighter padding ── */
@media (max-width: 767px) {
.product-block .product-block__detail {
padding: .7rem .75rem .75rem !important;
}
.product-block .product-block__title {
font-size: .85rem !important;
}
.product-block .price__current {
font-size: .92rem !important;
}
.product-block .price__was {
font-size: .75rem !important;
}
}
/* JWS — Secure-checkout footer line (replaces Shopify payment icon strip, 30 Apr 2026) */
.section-footer__secure-line{
font-family:'Outfit',sans-serif;
font-size:.62rem;
font-weight:300;
letter-spacing:.22em;
text-transform:uppercase;
color:#A89F95;
margin:0;
padding:.4rem 0;
}
.section-footer__payment-icons{display:none !important;}
/* ============================================================
JWS — Footer lower row redesign (30 Apr 2026)
3 zones: ghost currency (L) · copyright (C) · secure line (R)
============================================================ */
.section-footer__row-lower{
display:flex !important;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:1rem 2.25rem;
padding:1.5rem 0 1.75rem !important;
border-top:1px solid rgba(196,169,108,.18);
margin-top:1.25rem;
}
.section-footer__row-lower .section-footer__row__col{display:contents}
.section-footer__row-lower .section-footer__localization{
order:1;flex:0 0 auto;margin:0 !important;padding:0 !important;
}
.section-footer__row-lower .section-footer__localization .localization__selector{max-width:none !important}
.section-footer__row-lower .section-footer__localization .custom-select__btn{
background:transparent !important;
border:1px solid rgba(196,169,108,.38) !important;
color:#C4A96C !important;
font-family:'Outfit',sans-serif !important;
font-size:.6rem !important;
font-weight:300 !important;
letter-spacing:.22em !important;
text-transform:uppercase !important;
padding:.7rem 1.05rem !important;
border-radius:0 !important;
min-height:0 !important;
transition:border-color .25s,color .25s !important;
}
.section-footer__row-lower .section-footer__localization .custom-select__btn:hover{
border-color:#C4A96C !important;color:#EDE8E0 !important;
}
.section-footer__row-lower .section-footer__localization .custom-select__btn svg{
stroke:#C4A96C !important;width:10px !important;height:10px !important;
}
.section-footer__row-lower .copyright{
order:2;flex:1 1 auto;
display:block !important;
text-align:center;
margin:0 !important;padding:0 !important;
font-family:'Outfit',sans-serif !important;
font-size:.6rem !important;font-weight:300 !important;
letter-spacing:.22em !important;text-transform:uppercase !important;
color:#A89F95 !important;
}
.section-footer__row-lower .copyright .copy,
.section-footer__row-lower .copyright a{color:inherit !important;font-size:inherit !important;letter-spacing:inherit !important;text-transform:inherit !important}
.section-footer__row-lower .section-footer__secure-line{
order:3;flex:0 0 auto;
margin:0;text-align:right;
color:#A89F95;
font-family:'Outfit',sans-serif;
font-size:.6rem;font-weight:300;
letter-spacing:.22em;text-transform:uppercase;
}
.section-footer__row-lower .section-footer__lower-menu{display:none !important}
@media(max-width:800px){
.section-footer__row-lower{
justify-content:center !important;
text-align:center;
gap:.85rem 1.25rem !important;
padding:1.1rem 0 1.35rem !important;
}
.section-footer__row-lower .section-footer__localization,
.section-footer__row-lower .copyright,
.section-footer__row-lower .section-footer__secure-line{flex:1 1 100% !important;text-align:center !important}
.section-footer__row-lower .section-footer__localization{margin:0 auto !important;display:flex !important;justify-content:center !important}
.section-footer .copyright{display:block !important}
}
/* ═══════════════════════════════════════════════════════════════════════════
DESKTOP LOGO LOCK — added 12 May 2026 (AK note)
The theme renders TWO ![]()
elements (.logo__image + .logo__image-transparent)
and cross-fades between them on header state transitions (scroll into sticky,
megamenu hover, etc.). They have different intrinsic dimensions so the visible
logo APPEARS to grow/shrink. Mobile has the equivalent lock at line ~4705.
Lock both variants to ONE fixed size for desktop in every header state.
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
/* Hide the transparent variant entirely — use only .logo__image */
body .pageheader .logo__image-transparent,
body .pageheader--transparent .logo__image-transparent,
body .pageheader--transparent-permitted .logo__image-transparent,
body .pageheader--stuck .logo__image-transparent,
body .pageheader.pageheader--sticky .logo__image-transparent {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* Force the main image visible across all states */
body .pageheader .logo__image,
body .pageheader--transparent .logo__image,
body .pageheader--transparent-permitted .logo__image,
body .pageheader--stuck .logo__image,
body .pageheader.pageheader--sticky .logo__image {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Remove any transitions / transforms on the logo container itself */
body .pageheader .logo,
body .pageheader.pageheader--transparent .logo,
body .pageheader.pageheader--transparent-permitted .logo,
body .pageheader--stuck .logo,
body .pageheader.pageheader--sticky .logo,
body .pageheader .logo-area__middle,
body .pageheader .logo-area__middle--logo-image {
transform: none !important;
transition: none !important;
}
/* Lock all logo img dimensions across every state — desktop */
body .pageheader .logo img,
body .pageheader .logo .logo__image,
body .pageheader.pageheader--transparent .logo img,
body .pageheader.pageheader--transparent-permitted .logo img,
body .pageheader--stuck .logo img,
body .pageheader.pageheader--sticky .logo img,
body .header--stuck .logo img,
body .nw.sc .logo img,
body .nw:not(.sc) .logo img,
body .header--transparent:not(.header--stuck) .logo img,
body .logo img,
body .section-header .logo img,
body .header .logo img {
width: 78px !important;
max-width: 78px !important;
min-width: 78px !important;
height: auto !important;
max-height: 40px !important;
object-fit: contain !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
PRODUCT CARD UNIFICATION — 12 May 2026
Apply Best Sellers card aesthetic to .product-block (used site-wide:
collection pages, related products, cart drawer, search results, etc.).
The product-block snippet already wires up prev/next arrows + hover image
swap — this is just visual styling to match the homepage Best Sellers card.
Excludes .product-block--landscape so horizontal variants stay distinct.
═══════════════════════════════════════════════════════════════════════════ */
.product-block:not(.product-block--landscape){
background:#ffffff !important;
border:1px solid #E8E5E1 !important;
transition:border-color .35s !important;
overflow:hidden !important;
}
.product-block:not(.product-block--landscape):hover{
border-color:rgba(122,101,72,.3) !important;
}
/* Image area — square 1:1, white bg */
.product-block:not(.product-block--landscape) .image-cont{
aspect-ratio:1/1 !important;
background:#ffffff !important;
overflow:hidden !important;
}
.product-block:not(.product-block--landscape) .product-block__image img{
object-fit:contain !important;
object-position:center bottom !important;
padding:0 !important;
transition:transform .7s cubic-bezier(.19,1,.22,1) !important;
}
.product-block:not(.product-block--landscape):hover .product-block__image--active img{
transform:scale(1.04) !important;
}
/* Detail / info area — centred, tight */
.product-block:not(.product-block--landscape) .product-block__detail{
padding:.25rem .7rem .7rem !important;
background:#ffffff !important;
text-align:center !important;
}
.product-block:not(.product-block--landscape) .product-block__title{
font-family:'Playfair Display',serif !important;
font-size:.82rem !important;
font-weight:500 !important;
color:#2C2420 !important;
margin:0 0 .1rem !important;
line-height:1.2 !important;
}
.product-block:not(.product-block--landscape) .product-block__subtitle{
font-family:'Outfit',sans-serif !important;
font-size:.5rem !important;
font-weight:300 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
color:#7A6548 !important;
margin:0 0 .35rem !important;
}
.product-block:not(.product-block--landscape) .product-block__price,
.product-block:not(.product-block--landscape) .price{
font-family:'Playfair Display',serif !important;
font-size:.86rem !important;
color:#2C2420 !important;
}
.product-block:not(.product-block--landscape) .price--on-sale .price-item--regular,
.product-block:not(.product-block--landscape) .price-item--regular.price-item--sale-context{
color:#A59E96 !important;
text-decoration:line-through !important;
font-family:'Cormorant Garamond',serif !important;
font-size:.78rem !important;
margin-left:.4rem !important;
}
.product-block:not(.product-block--landscape) .price--on-sale .price-item--sale,
.product-block:not(.product-block--landscape) .price-item--sale{
color:#7A6548 !important;
}
/* Variant swatches — 50×50 to match Best Sellers */
.product-block:not(.product-block--landscape) .product-block-options{
display:flex !important;
gap:7px !important;
justify-content:center !important;
flex-wrap:wrap !important;
margin-top:.55rem !important;
padding:0 !important;
}
.product-block:not(.product-block--landscape) .product-block-options--swatch .product-block-options__item{
width:50px !important;
height:50px !important;
border-radius:3px !important;
border:1px solid rgba(122,101,72,.22) !important;
overflow:hidden !important;
background:#FFFFFF !important;
transition:border-color .25s,transform .25s !important;
cursor:pointer !important;
padding:0 !important;
margin:0 !important;
}
.product-block:not(.product-block--landscape) .product-block-options--swatch .product-block-options__item:hover{
border-color:#7A6548 !important;
transform:scale(1.06) !important;
}
.product-block:not(.product-block--landscape) .product-block-options--swatch .product-block-options__item img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
border-radius:2px !important;
}
.product-block:not(.product-block--landscape) .product-block-options__more-label{
font-family:'Outfit',sans-serif !important;
font-size:.7rem !important;
font-weight:400 !important;
color:#7A6548 !important;
background:#FAF7F2 !important;
letter-spacing:.04em !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:50px !important;
height:50px !important;
border-radius:3px !important;
border:1px solid #DDD7CD !important;
}
/* Image carousel arrows — cream pill with brass-on-hover */
.product-block:not(.product-block--landscape) .image-page-button{
background:rgba(250,247,242,.92) !important;
color:#2C2420 !important;
border:1px solid rgba(122,101,72,.18) !important;
width:36px !important;
height:36px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
transition:background .25s,border-color .25s,color .25s !important;
z-index:3 !important;
}
.product-block:not(.product-block--landscape) .image-page-button:hover{
background:#fff !important;
border-color:#7A6548 !important;
color:#7A6548 !important;
}
/* Sale / new / out-of-stock badges */
.product-block:not(.product-block--landscape) .product-label,
.product-block:not(.product-block--landscape) .product-label-detail{
font-family:'Outfit',sans-serif !important;
font-size:.46rem !important;
font-weight:400 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
background:#2C2420 !important;
color:#FAF7F2 !important;
padding:.25rem .55rem !important;
border-radius:0 !important;
}
.product-block:not(.product-block--landscape) .product-label--sale{
background:#7A6548 !important;
}
/* Image dots — quieter to avoid competing with arrows */
.product-block:not(.product-block--landscape) .product-block__image-dots{
display:none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
PRODUCT CARD UNIFICATION — addendum 12 May 2026
Override aspect ratio via --aspect-ratio variable + force white card.
═══════════════════════════════════════════════════════════════════════════ */
.product-block:not(.product-block--landscape){
--aspect-ratio: 1 !important;
background:#ffffff !important;
}
.product-block:not(.product-block--landscape) .image-cont,
.product-block:not(.product-block--landscape) .image-cont .img-ar{
background:#ffffff !important;
aspect-ratio:1/1 !important;
}
.product-block:not(.product-block--landscape) .image-cont .img-ar::before{
padding-top:100% !important;
}
/* The whole product-block can be a flex/scroll item in some sections; force grid behaviour
in COLLECTION pages (sections/main-collection.liquid grid wrappers) by neutralising the
flex sizing that targets the horizontal-scroll variant. */
body.template-collection .product-block:not(.product-block--landscape){
flex:initial !important;
max-width:none !important;
padding-inline-start:0 !important;
padding:0 !important;
}
/* Make sure the centred text-align actually wins over any inherited left-align */
.product-block:not(.product-block--landscape) .product-block__detail,
.product-block:not(.product-block--landscape) .product-block__detail *{
text-align:center !important;
}
.product-block:not(.product-block--landscape) .product-block__detail .price{
display:block !important;
justify-content:center !important;
}
.product-block:not(.product-block--landscape) .product-block__detail .price > *{
display:inline-block !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
PRODUCT CARD UNIFICATION — price + sale badge fixes (12 May 2026)
1. Centre the price cluster (current price + old strikethrough)
2. Move the inline "Sale" pill OUT of the price row; show as top-left overlay
═══════════════════════════════════════════════════════════════════════════ */
/* Centre the price elements horizontally (was inline left-aligned) */
.product-block:not(.product-block--landscape) .price{
display:flex !important;
justify-content:center !important;
align-items:baseline !important;
flex-wrap:wrap !important;
gap:.4rem !important;
text-align:center !important;
}
.product-block:not(.product-block--landscape) .price > *,
.product-block:not(.product-block--landscape) .price__container{
display:inline-flex !important;
align-items:baseline !important;
text-align:center !important;
}
.product-block:not(.product-block--landscape) .price__regular,
.product-block:not(.product-block--landscape) .price__sale{
display:inline-flex !important;
gap:.4rem !important;
align-items:baseline !important;
justify-content:center !important;
}
/* Sale price = current price in brass; old price strikethrough beside it */
.product-block:not(.product-block--landscape) .price-item--sale{
font-family:'Playfair Display',serif !important;
font-size:.86rem !important;
color:#7A6548 !important;
}
.product-block:not(.product-block--landscape) .price-item--regular,
.product-block:not(.product-block--landscape) .price--on-sale .price-item--regular{
font-family:'Cormorant Garamond',serif !important;
font-size:.78rem !important;
color:#A59E96 !important;
text-decoration:line-through !important;
}
/* HIDE the inline "Sale" pill — we move it to the top-left overlay */
.product-block:not(.product-block--landscape) .price .price-label,
.product-block:not(.product-block--landscape) .price__badge,
.product-block:not(.product-block--landscape) .price__sale-badge,
.product-block:not(.product-block--landscape) .price-item__label,
.product-block:not(.product-block--landscape) .badge.price__badge-sale{
display:none !important;
}
/* Top-left badge overlay (rendered by product-label.liquid snippet) */
.product-block:not(.product-block--landscape) .product-label-container{
position:absolute !important;
top:.6rem !important;
left:.6rem !important;
z-index:3 !important;
display:flex !important;
flex-direction:column !important;
gap:.3rem !important;
pointer-events:none !important;
}
.product-block:not(.product-block--landscape) .product-label{
display:inline-block !important;
font-family:'Outfit',sans-serif !important;
font-size:.46rem !important;
font-weight:400 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
padding:.3rem .6rem !important;
border-radius:0 !important;
line-height:1 !important;
background:#2C2420 !important;
color:#FAF7F2 !important;
border:0 !important;
}
.product-block:not(.product-block--landscape) .product-label--sale{
background:#7A6548 !important;
color:#FAF7F2 !important;
}
.product-block:not(.product-block--landscape) .product-label--new-in,
.product-block:not(.product-block--landscape) .product-label--stock{
background:#2C2420 !important;
color:#FAF7F2 !important;
}
.product-block:not(.product-block--landscape) .product-label > span{
display:inline-block !important;
color:inherit !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
PRODUCT CARD UNIFICATION — price ordering + CSS-only sale badge (12 May 2026)
1. Swap price order: strikethrough (regular) FIRST, then sale price.
2. Force-centre the price cluster (overrides any inherited left-align).
3. CSS-only SALE badge in top-left of image (uses :has() to detect sale).
═══════════════════════════════════════════════════════════════════════════ */
/* Belt-and-braces centring: all price wrappers + force flex on the inner row */
.product-block:not(.product-block--landscape) .product-block__price,
.product-block:not(.product-block--landscape) .product-block__detail > div,
.product-block:not(.product-block--landscape) .product-block__detail .price{
display:flex !important;
flex-direction:row !important;
justify-content:center !important;
align-items:baseline !important;
flex-wrap:wrap !important;
text-align:center !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}
/* Swap the visual order: regular (strikethrough) FIRST, sale price AFTER */
.product-block:not(.product-block--landscape) .price-item--regular,
.product-block:not(.product-block--landscape) .price__regular,
.product-block:not(.product-block--landscape) .price--on-sale .price-item--regular{
order:1 !important;
}
.product-block:not(.product-block--landscape) .price-item--sale,
.product-block:not(.product-block--landscape) .price__sale,
.product-block:not(.product-block--landscape) .price--on-sale .price-item--sale{
order:2 !important;
}
/* CSS-only sale badge — uses :has() to detect .price--on-sale on the card.
Doesn't depend on the product-label snippet rendering anything. */
.product-block:not(.product-block--landscape){
position:relative !important;
}
.product-block:not(.product-block--landscape) .image-cont{
position:relative !important;
}
.product-block:not(.product-block--landscape):has(.price--on-sale) .image-cont::before{
content:'SALE';
position:absolute;
top:.7rem;
left:.7rem;
z-index:4;
font-family:'Outfit',sans-serif;
font-size:.46rem;
font-weight:400;
letter-spacing:.18em;
text-transform:uppercase;
padding:.35rem .65rem;
background:#7A6548;
color:#FAF7F2;
line-height:1;
pointer-events:none;
}
/* ═══════════════════════════════════════════════════════════════════════════
PRODUCT CARD UNIFICATION — exact price-text match with homepage (13 May 2026)
Mirror the homepage Best Sellers price styling onto .product-block prices.
Homepage uses: .jw-bs__card-price (Playfair .86rem #2C2420) + sale modifier
#7A6548 brass; .jw-bs__card-old (Cormorant .82rem #A59E96 strikethrough).
Targets the ACTUAL classes emitted by snippets/price.liquid:
.price__current (sale/regular) + .price__was (compare strikethrough).
═══════════════════════════════════════════════════════════════════════════ */
/* Full-price (no sale): Playfair, .86rem, dark walnut */
.product-block:not(.product-block--landscape) .price:not(.price--on-sale) .price__current{
font-family:'Playfair Display',serif !important;
font-size:.86rem !important;
font-weight:400 !important;
color:#2C2420 !important;
text-decoration:none !important;
letter-spacing:0 !important;
line-height:1.2 !important;
}
/* Sale price (current discounted): Playfair, .86rem, brass (matches .jw-bs__card-sale) */
.product-block:not(.product-block--landscape) .price--on-sale .price__current{
font-family:'Playfair Display',serif !important;
font-size:.86rem !important;
font-weight:400 !important;
color:#7A6548 !important;
letter-spacing:0 !important;
line-height:1.2 !important;
text-decoration:none !important;
}
/* Old price (strikethrough): Cormorant .92rem #6B5F54 with 1.5px strike — legible anchor
(matches updated .jw-bs__card-old on the homepage Best Sellers card) */
.product-block:not(.product-block--landscape) .price--on-sale .price__was,
.product-block:not(.product-block--landscape) .price__was{
font-family:'Cormorant Garamond',serif !important;
font-size:.92rem !important;
font-weight:500 !important;
color:#6B5F54 !important;
text-decoration:line-through !important;
text-decoration-thickness:1.5px !important;
text-decoration-color:#6B5F54 !important;
letter-spacing:0 !important;
line-height:1.2 !important;
margin:0 !important;
}
/* Gap between strikethrough + sale matches homepage (.4rem) */
.product-block:not(.product-block--landscape) .price--on-sale .price__default,
.product-block:not(.product-block--landscape) .price__default{
gap:.4rem !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
PRODUCT CARD UNIFICATION — FULL VISUAL PARITY WITH BANFF (13 May 2026)
──────────────────────────────────────────────────────────────────────────
Source of truth: .jw-bs__card-* in sections/jw-best-sellers.liquid.
Goal: every .product-block on the site (collection grid, related, search,
cart drawer upsells) renders pixel-equivalent to the homepage card.
This block is the LAST WORD — it intentionally sits at the file tail with
`body` prefix + !important so it outranks all earlier .product-block rules
without needing to delete them (avoids regressions in landscape/cart variants).
═══════════════════════════════════════════════════════════════════════════ */
/* Info container — Banff: padding:.25rem .7rem .7rem; white bg; centred. */
body .product-block:not(.product-block--landscape) .product-block__detail,
body .template-collection .product-block:not(.product-block--landscape) .product-block__detail,
body .related-products .product-block:not(.product-block--landscape) .product-block__detail{
padding: .25rem .7rem .7rem !important;
background: #ffffff !important;
text-align: center !important;
min-height: 0 !important;
}
/* Zero out every intermediate wrapper inside the info container so spacing is
driven ONLY by the elements themselves (title/subtitle/price/swatches). */
body .product-block:not(.product-block--landscape) .product-block__detail .inner,
body .product-block:not(.product-block--landscape) .product-block__detail .innerer,
body .product-block:not(.product-block--landscape) .product-block__detail .product-link,
body .product-block:not(.product-block--landscape) .product-block__detail > a,
body .product-block:not(.product-block--landscape) .product-block__detail .inner > a,
body .product-block:not(.product-block--landscape) .product-block__detail .innerer > a{
padding: 0 !important;
margin: 0 !important;
text-align: center !important;
display: block !important;
text-decoration: none !important;
color: inherit !important;
background: transparent !important;
border: 0 !important;
}
/* Title — Banff: Playfair Display .82rem weight 500 #2C2420 mb .1rem line 1.2 */
body .product-block:not(.product-block--landscape) .product-block__title,
body .product-block:not(.product-block--landscape) .product-block__title a{
font-family: 'Playfair Display', serif !important;
font-size: .82rem !important;
font-weight: 500 !important;
color: #2C2420 !important;
line-height: 1.2 !important;
margin: 0 0 .1rem !important;
text-decoration: none !important;
text-align: center !important;
}
body .product-block:not(.product-block--landscape) .product-block__title a:hover{
color: #7A6548 !important;
}
/* Subtitle / product type — Banff: Outfit .5rem weight 300, .16em tracking,
uppercase, brass #7A6548, margin-bottom .35rem */
body .product-block:not(.product-block--landscape) .product-block__subtitle,
body .product-block:not(.product-block--landscape) .vendor{
font-family: 'Outfit', sans-serif !important;
font-size: .5rem !important;
font-weight: 300 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
color: #7A6548 !important;
margin: 0 0 .35rem !important;
text-align: center !important;
}
/* Price row — already styled above; reinforce centring + zero outer margin */
body .product-block:not(.product-block--landscape) .product-price,
body .product-block:not(.product-block--landscape) .product-block__price{
margin: 0 !important;
text-align: center !important;
justify-content: center !important;
}
body .product-block:not(.product-block--landscape) .price,
body .product-block:not(.product-block--landscape) .price__default{
justify-content: center !important;
}
/* PRICE ORDER (re-stated at higher specificity) — strikethrough LEFT, sale RIGHT.
HTML emits .price__current then .price__was; we flip via flex order. */
body .product-block:not(.product-block--landscape) .price--on-sale .price__default{
display: inline-flex !important;
flex-direction: row !important;
align-items: baseline !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: .4rem !important;
}
body .product-block:not(.product-block--landscape) .price--on-sale .price__from { order: 1 !important; }
body .product-block:not(.product-block--landscape) .price--on-sale .price__was { order: 2 !important; }
body .product-block:not(.product-block--landscape) .price--on-sale .price__current { order: 3 !important; }
/* Swatch row — Banff: gap 7px, margin-top .55rem, centred, flex-wrap. */
body .product-block:not(.product-block--landscape) .product-block-options,
body .product-block:not(.product-block--landscape) .product-block-options__inner{
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 7px !important;
margin: .55rem 0 0 !important;
padding: 0 !important;
}
/* Swatch dot — Banff: 50×50, 3px radius, hairline border, ivory fallback bg.
display:inline-block ensures width/height apply when the markup is a
(Symmetry theme emits buttons but we belt-and-brace for cart-drawer/search). */
body .product-block:not(.product-block--landscape) .product-block-options__item{
display: inline-block !important;
width: 50px !important;
height: 50px !important;
min-width: 50px !important;
min-height: 50px !important;
border-radius: 3px !important;
border: 1px solid rgba(122,101,72,.22) !important;
background: #FFFFFF !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
cursor: pointer !important;
transition: border-color .25s, transform .25s !important;
vertical-align: middle !important;
box-sizing: border-box !important;
}
body .product-block:not(.product-block--landscape) .product-block-options__item:hover,
body .product-block:not(.product-block--landscape) .product-block-options__item--active{
border-color: #7A6548 !important;
transform: scale(1.06) !important;
}
body .product-block:not(.product-block--landscape) .product-block-options__item img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
body .product-block:not(.product-block--landscape) .product-block-options__item__text{
display: none !important;
}
/* ── TEXT SWATCHES (gift-card £-value chips, etc.) ──
The `.product-block-options` wrapper omits the `--swatch` modifier when the
theme renders text swatches (is_text_swatch == true). Render these as
readable chips at the same height as the colour swatches above. */
body .product-block:not(.product-block--landscape) .product-block-options:not(.product-block-options--swatch) .product-block-options__item{
width: auto !important;
min-width: 50px !important;
height: 50px !important;
min-height: 50px !important;
padding: 0 .8rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: 'Playfair Display', serif !important;
font-size: .82rem !important;
font-weight: 500 !important;
color: #2C2420 !important;
background: #FAF7F2 !important;
border: 1px solid #DDD7CD !important;
border-radius: 3px !important;
text-align: center !important;
line-height: 1 !important;
white-space: nowrap !important;
transition: border-color .25s, background .25s, color .25s, transform .25s !important;
}
body .product-block:not(.product-block--landscape) .product-block-options:not(.product-block-options--swatch) .product-block-options__item:hover,
body .product-block:not(.product-block--landscape) .product-block-options:not(.product-block-options--swatch) .product-block-options__item--active{
border-color: #7A6548 !important;
background: #fff !important;
color: #7A6548 !important;
transform: scale(1.04) !important;
}
body .product-block:not(.product-block--landscape) .product-block-options:not(.product-block-options--swatch) .product-block-options__item__text{
display: inline-block !important;
font-family: inherit !important;
font-size: inherit !important;
color: inherit !important;
font-weight: inherit !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* ─── Product grid → trust strip breathing room ─────────────────────────
The product grid ends abruptly when a trust strip follows it on
/collections/* and on /pages/* embedding a product-list. Add modest
breathing room — clamp(1.25rem, 2.2vw, 2rem) (~20-32px) — so the strip
isn't flush against the cards but doesn't float far below either.
Single rule on the product-list wrapper; no stacking. */
body.template-page .collection-slider-row{
padding-bottom: clamp(1.25rem, 2.2vw, 2rem) !important;
}
body.template-collection .product-grid,
body.template-collection .product-grid-container{
padding-bottom: clamp(1.25rem, 2.2vw, 2rem) !important;
}
/* Mobile — keep swatches comfortable on touch but slightly tighter than 50px */
@media (max-width: 600px){
body .product-block:not(.product-block--landscape) .product-block-options__item{
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
CART DRAWER CROSS-SELLS — TRUE LAST WORD (must sit after PRODUCT CARD
UNIFICATION block to win source-order ties; specificity bumped via
body + class-doubling so it beats the (0,3,1) body-prefixed defaults).
═══════════════════════════════════════════════════════════════════════ */
/* Detail block: transparent, sits flush against image tile, left-aligned. */
body .cart-drawer .cart-item-upsells .product-block__detail.product-block__detail,
body .cart-drawer .cart-item-upsells .product-block__detail .inner,
body .cart-drawer .cart-item-upsells .product-block__detail .innerer{
background: transparent !important;
background-color: transparent !important;
padding: .55rem .1rem 0 !important;
margin: 0 !important;
text-align: left !important;
min-height: 0 !important;
border: none !important;
}
/* Title: Playfair cream on dark, 2-line clamp, no centring. */
body .cart-drawer .cart-item-upsells .product-block__title.product-block__title,
body .cart-drawer .cart-item-upsells .product-block__title a,
body .cart-drawer .cart-item-upsells .product-block__title a:visited{
font-family: 'Playfair Display', Georgia, serif !important;
font-size: .82rem !important;
font-weight: 400 !important;
color: #FAF7F2 !important;
text-align: left !important;
line-height: 1.25 !important;
margin: 0 0 .25rem !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body .cart-drawer .cart-item-upsells .product-block__title a:hover{
color: #C4A96C !important;
}
/* Hide the category/vendor eyebrow — too noisy in the drawer card. */
body .cart-drawer .cart-item-upsells .product-block__subtitle,
body .cart-drawer .cart-item-upsells .vendor{
display: none !important;
}
/* Price row: brass, left-aligned, compact. Specificity bumped via doubled
class + extra ancestor to beat (0,5,0) unification rules. */
body .cart-drawer .cart-item-upsells .product-block .product-price.product-price,
body .cart-drawer .cart-item-upsells .product-block .product-block__price,
body .cart-drawer .cart-item-upsells .product-block .price.price,
body .cart-drawer .cart-item-upsells .product-block .price__default{
text-align: left !important;
justify-content: flex-start !important;
margin: 0 !important;
}
body .cart-drawer .cart-item-upsells .product-block .price__current.price__current,
body .cart-drawer .cart-item-upsells .product-block .price .price__current{
font-family: 'Playfair Display', Georgia, serif !important;
font-size: .82rem !important;
font-weight: 400 !important;
color: #C4A96C !important;
text-align: left !important;
}
body .cart-drawer .cart-item-upsells .product-block .price__was.price__was,
body .cart-drawer .cart-item-upsells .product-block .price--compare{
font-family: 'Playfair Display', Georgia, serif !important;
color: #A59E96 !important;
font-size: .72rem !important;
text-decoration: line-through !important;
margin-right: .35rem !important;
}
/* Image tile: clean square white, no rounded corners. */
body .cart-drawer .cart-item-upsells .image-cont.image-cont,
body .cart-drawer .cart-item-upsells .product-block__image{
background: #FFFFFF !important;
border-radius: 0 !important;
border: none !important;
margin: 0 !important;
}
/* Card wrapper: tight, no bg bleed. */
body .cart-drawer .cart-item-upsells .product-block,
body .cart-drawer .cart-item-upsells .slider__item{
background: transparent !important;
padding: 0 !important;
}
/* Mobile sliver: keep cards aligned tight. */
@media (max-width: 600px){
body .cart-drawer .cart-item-upsells .product-block__detail.product-block__detail{
padding: .5rem .1rem 0 !important;
}
body .cart-drawer .cart-item-upsells .product-block__title.product-block__title{
font-size: .78rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
PRODUCT LISTING PAGE — VISUAL RHYTHM (added 13 May 2026)
Adds texture, hierarchy, and breathing room to the cream-on-cream PLP.
═══════════════════════════════════════════════════════════════════════ */
/* Subtle paper texture on PLP body — adds warmth without distracting from
product photography. SVG data-uri keeps it inline + tiny. */
body.template-collection,
body.template-search{
background-image:
/* Very faint vertical grain */
linear-gradient(180deg, transparent 0%, rgba(122,101,72,.025) 50%, transparent 100%),
/* Subtle noise texture */
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.478 0 0 0 0 0.396 0 0 0 0 0.282 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E") !important;
background-attachment: scroll, fixed !important;
background-size: auto, 180px 180px !important;
}
/* Brass hairline + soft transition below the dark collection header */
body.template-collection .page-header--with-background{
position: relative !important;
padding-bottom: clamp(2.2rem, 4vw, 3.2rem) !important;
}
body.template-collection .page-header--with-background::after{
content: '';
position: absolute;
left: 50%;
bottom: 1.2rem;
transform: translateX(-50%);
width: 56px;
height: 1px;
background: #C4A96C;
opacity: .7;
}
/* Filter bar — elevated with brass hairline above + slight bg tint */
body.template-collection .filter-bar,
body.template-collection .toolbar,
body.template-collection .collection-toolbar,
body.template-collection [class*="filter-toolbar"]{
position: relative !important;
background: rgba(237, 232, 224, .35) !important;
border-top: 1px solid rgba(122, 101, 72, .18) !important;
border-bottom: 1px solid rgba(122, 101, 72, .12) !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
margin-bottom: 1.5rem !important;
}
/* Product card — gentle lift + brass-tinted shadow on hover */
body.template-collection .product-block{
transition: transform .35s cubic-bezier(.19,1,.22,1), box-shadow .35s ease !important;
}
body.template-collection .product-block:hover{
transform: translateY(-3px) !important;
box-shadow: 0 8px 24px -8px rgba(122, 101, 72, .25),
0 2px 8px -2px rgba(44, 36, 32, .08) !important;
}
/* Product image tile — warm cream bg (not stark white) so the photography
reads as styled product imagery rather than a plain cutout */
body.template-collection .product-block .image-cont,
body.template-collection .product-block__image,
body.template-search .product-block .image-cont,
body.template-search .product-block__image{
background: #F2EDE4 !important;
}
/* Editorial bands above + below the product grid — REMOVED 15 May 2026 per AK
(top band redundant, bottom band duplicated trust strip below). */
body.template-collection .product-grid{
position: relative !important;
}
/* ═══════════════════════════════════════════════════════════════════════
CART DRAWER — DISCOUNT/VOUCHER CODE INPUT (15 May 2026)
Expandable input that lets customers apply codes without leaving the drawer.
═══════════════════════════════════════════════════════════════════════ */
.jw-discount{
margin: .35rem 0 .55rem !important;
border: none !important;
padding: .15rem 0 !important;
}
.jw-discount__toggle{
display: flex !important;
align-items: center !important;
gap: .55rem !important;
width: 100% !important;
padding: .45rem 0 !important;
background: transparent !important;
border: none !important;
color: #D1C9BE !important;
font-family: 'Outfit', sans-serif !important;
font-size: .58rem !important;
font-weight: 400 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
cursor: pointer !important;
text-align: left !important;
transition: color .2s !important;
}
.jw-discount__toggle:hover,
.jw-discount__toggle[aria-expanded="true"]{
color: #C4A96C !important;
}
.jw-discount__toggle-icon{
display: inline-flex !important;
align-items: center !important;
color: #C4A96C !important;
}
.jw-discount__toggle-text{ flex: 1 !important; }
.jw-discount__toggle-caret{
font-family: 'Playfair Display', serif !important;
font-size: 1.1rem !important;
font-weight: 300 !important;
color: #C4A96C !important;
transition: transform .25s ease !important;
display: inline-block !important;
line-height: 1 !important;
}
.jw-discount__toggle[aria-expanded="true"] .jw-discount__toggle-caret{
transform: rotate(45deg) !important;
}
.jw-discount__panel{
margin-top: .55rem !important;
animation: jwDiscPanel .25s ease both;
}
.jw-discount__panel[hidden]{ display: none !important; }
@keyframes jwDiscPanel {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.jw-discount__row{
display: flex !important;
gap: .4rem !important;
align-items: stretch !important;
}
.jw-discount__input{
flex: 1 !important;
min-width: 0 !important;
padding: .65rem .8rem !important;
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(196,169,108,.25) !important;
color: #FAF7F2 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .7rem !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
transition: border-color .2s, background .2s !important;
}
.jw-discount__input:focus{
outline: none !important;
border-color: #C4A96C !important;
background: rgba(255,255,255,.1) !important;
}
.jw-discount__input::placeholder{
color: rgba(209,201,190,.5) !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: .72rem !important;
}
.jw-discount__apply{
padding: 0 1rem !important;
background: #C4A96C !important;
color: #2C2420 !important;
border: none !important;
border-radius: 0 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .58rem !important;
font-weight: 400 !important;
letter-spacing: .2em !important;
text-transform: uppercase !important;
cursor: pointer !important;
min-width: 80px !important;
transition: background .2s, color .2s !important;
}
.jw-discount__apply:hover{
background: #2C2420 !important;
color: #FAF7F2 !important;
}
.jw-discount__apply[disabled]{ opacity: .5 !important; cursor: not-allowed !important; }
.jw-discount__msg{
margin-top: .55rem !important;
min-height: 1rem !important;
font-family: 'Cormorant Garamond', serif !important;
font-size: .85rem !important;
font-style: italic !important;
color: #D1C9BE !important;
text-align: left !important;
}
.jw-discount__msg--err{ color: #E08D7A !important; }
.jw-discount__msg--ok{ color: #C4A96C !important; }
/* ═══════════════════════════════════════════════════════════════════════
STICKY MOBILE ADD-TO-BAG BAR (15 May 2026)
Appears below 768px when the user scrolls past the main ATB button on PDP.
═══════════════════════════════════════════════════════════════════════ */
.jw-atb{
position: fixed !important;
left: 0; right: 0; bottom: 0;
z-index: 9990 !important;
background: rgba(44, 36, 32, .97) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid rgba(196,169,108,.25) !important;
padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom, 0px)) .8rem !important;
display: none;
align-items: center !important;
gap: .65rem !important;
transform: translateY(110%);
transition: transform .35s cubic-bezier(.19,1,.22,1);
box-shadow: 0 -4px 16px rgba(0,0,0,.18);
}
.jw-atb.is-visible{
display: flex !important;
transform: translateY(0);
}
.jw-atb__img{
flex: 0 0 44px;
width: 44px; height: 44px;
background: #FFFFFF;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.jw-atb__img img{
width: 100%; height: 100%; object-fit: contain; padding: 4px;
}
.jw-atb__info{
flex: 1 1 auto;
min-width: 0;
display: flex; flex-direction: column; justify-content: center;
line-height: 1.15;
}
.jw-atb__title{
font-family: 'Playfair Display', Georgia, serif !important;
font-size: .82rem !important;
font-weight: 400 !important;
color: #FAF7F2 !important;
margin: 0 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jw-atb__price{
font-family: 'Playfair Display', Georgia, serif !important;
font-size: .72rem !important;
color: #C4A96C !important;
margin: .1rem 0 0 !important;
}
.jw-atb__price-was{
color: #A59E96 !important;
text-decoration: line-through;
font-size: .65rem !important;
margin-right: .35rem !important;
}
.jw-atb__btn{
flex: 0 0 auto;
padding: .75rem 1rem !important;
background: #C4A96C !important;
color: #2C2420 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .55rem !important;
font-weight: 400 !important;
letter-spacing: .2em !important;
text-transform: uppercase !important;
border: none !important;
border-radius: 0 !important;
cursor: pointer !important;
min-height: 44px !important;
transition: background .2s, color .2s !important;
}
.jw-atb__btn:hover, .jw-atb__btn:active{
background: #2C2420 !important;
color: #FAF7F2 !important;
}
.jw-atb__btn[disabled]{
background: #4A413A !important;
color: #998E84 !important;
cursor: not-allowed !important;
}
/* Only show on PDP and at mobile widths */
@media (min-width: 768px){
.jw-atb{ display: none !important; }
}
/* Adjust bottom padding of product page so sticky bar doesn't cover content */
@media (max-width: 767px){
body.template-product{ padding-bottom: 64px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
HIDE SHOPIFY ACCELERATED CHECKOUTS ("Buy with Shop", PayPal, etc.)
They use bright vendor colours that break the heritage palette.
Customers can still use these from /checkout — we just remove the
in-product surface that conflicts with the brand.
═══════════════════════════════════════════════════════════════════════ */
.shopify-payment-button,
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded,
.shopify-payment-button__more-options,
[data-shopify="payment-button"],
.dynamic-checkout__buttons,
.dynamic-checkout__content{
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
}
/* PDP Trustpilot pill removed 16 May 2026 per AK */
/* ═════════════════════════════════════════════════════════════════════
/cart EMPTY STATE — heading size cap (overrides Symmetry .majortitle)
Added 15 May 2026 — earlier inline style wasn't winning the cascade.
═════════════════════════════════════════════════════════════════════ */
body.template-cart .majortitle,
body.template-cart h1.majortitle,
body.template-cart .cart-drawer__content--hidden + .cart-drawer__content--hidden,
body.template-cart h1.jw-cart-empty-title{
font-size: clamp(1.5rem, 5vw, 2.4rem) !important;
line-height: 1.15 !important;
margin: 0 auto !important;
}
@media (max-width: 600px){
body.template-cart .majortitle,
body.template-cart h1.majortitle{
font-size: 26px !important;
line-height: 1.15 !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
CART DRAWER POLISH PASS (16 May 2026)
1. Lighter REMOVE · 2. No hairline between item + upsells
3. Tighter cross-sell titles · 4. Editorial subtotal row
5. Brass eyebrow Order note · 6. Heavier CHECKOUT letter-spacing
7. Atmospheric brand line above CHECKOUT
═══════════════════════════════════════════════════════════════════════ */
/* 1. REMOVE link — soften */
body .cart-drawer .cart-item__remove{
font-size: .5rem !important;
letter-spacing: .16em !important;
color: #998E84 !important;
margin-top: 4px !important;
font-weight: 300 !important;
}
body .cart-drawer .cart-item__remove:hover{
color: #C4A96C !important;
}
/* 2. Cross-sell section spacing — balanced breathing room above + below
(no hairline divider, just considered margins). */
body .cart-drawer .cart-item{
border-bottom: none !important;
padding-bottom: .5rem !important;
}
body .cart-drawer .cart-item-upsells{
border-top: none !important;
margin-top: 1.2rem !important;
padding-top: 0 !important;
padding-bottom: 1rem !important;
}
/* Section heading "YOU MAY LIKE" — balanced spacing */
body .cart-drawer .cart-item-upsells .product-info-label{
margin-bottom: .7rem !important;
padding-top: 0 !important;
}
body .cart-drawer .cart-item-list{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* 3. Cross-sell title tighter */
body .cart-drawer .cart-item-upsells .product-block__title.product-block__title,
body .cart-drawer .cart-item-upsells .product-block__title a{
font-size: .76rem !important;
line-height: 1.22 !important;
}
body .cart-drawer .cart-item-upsells .product-block .price__current.price__current{
font-size: .76rem !important;
}
/* 4. Subtotal — editorial split (Outfit caps label · Playfair brass price) */
body .cart-drawer .subtotal{
font-family: 'Outfit', sans-serif !important;
font-size: .58rem !important;
font-weight: 400 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: #D1C9BE !important;
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
margin: 0 0 .65rem !important;
border: none !important;
}
body .cart-drawer .subtotal .theme-money{
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 1.15rem !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #C4A96C !important;
}
/* 5. Order note + Voucher toggle — both plain text links, matching style.
Uses stable selectors (tag + data-attr) so the styling survives Symmetry's
class swap (`--is-hidden` → open state) when the panel toggles. */
body .cart-drawer toggle-target[data-toggle-target=".cart-drawer__note"],
body .cart-drawer toggle-target[id="CartDrawerNoteToggle"],
body .cart-drawer .toggle-target-toggler--is-hidden,
body .cart-drawer [class*="toggle-target-toggler"],
body .cart-drawer .jw-discount .jw-discount__toggle{
display: inline-block !important;
font-family: 'Outfit', sans-serif !important;
font-size: .58rem !important;
font-weight: 400 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
color: #D1C9BE !important;
text-decoration: none !important;
border-bottom: none !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
padding: .35rem 0 !important;
margin: 0 !important;
width: auto !important;
text-align: left !important;
transition: color .2s !important;
line-height: 1.4 !important;
}
body .cart-drawer toggle-target[data-toggle-target=".cart-drawer__note"]::before,
body .cart-drawer toggle-target[id="CartDrawerNoteToggle"]::before,
body .cart-drawer [class*="toggle-target-toggler"]::before,
body .cart-drawer .jw-discount .jw-discount__toggle::before{
content: none !important;
}
body .cart-drawer toggle-target[data-toggle-target=".cart-drawer__note"]:hover,
body .cart-drawer toggle-target[id="CartDrawerNoteToggle"]:hover,
body .cart-drawer [class*="toggle-target-toggler"]:hover,
body .cart-drawer .jw-discount .jw-discount__toggle:hover{
color: #C4A96C !important;
}
/* Tight stacking — voucher toggle then order note, on their own lines */
body .cart-drawer .lightly-spaced-row .jw-discount{
display: block !important;
margin: .1rem 0 0 !important;
padding: 0 !important;
border: none !important;
}
body .cart-drawer .lightly-spaced-row > toggle-target,
body .cart-drawer .lightly-spaced-row .toggle-target-toggler--is-hidden{
display: block !important;
margin: 0 !important;
}
/* 6. CHECKOUT — premium letter-spacing */
body .cart-drawer .checkout-buttons .btn,
body .cart-drawer .checkout-buttons a{
letter-spacing: .25em !important;
font-weight: 400 !important;
}
/* 7. Brand signature above CHECKOUT removed 16 May 2026 per AK (more breathing room). */
.cart-drawer .checkout-buttons::before{ content: none !important; }
/* ═══════════════════════════════════════════════════════════════════════
CART DRAWER — Move applied discount chip from line-item to footer (16 May 2026)
The inline chip looked stranded with empty space around it. The aggregated
summary above the subtotal is the conventional commerce pattern (Shopify
checkout, Amazon, Net-a-Porter etc.) and reads more naturally.
═══════════════════════════════════════════════════════════════════════ */
/* Hide the per-item inline chip — the footer summary now owns this UI */
body .cart-drawer .cart-item__item-discounts{
display: none !important;
}
/* Style the footer chip list as a clean row, full-width, with subtle leading rule */
body .cart-drawer [data-jw-applied-discounts]{
list-style: none !important;
margin: 0 0 .6rem !important;
padding: .5rem 0 .15rem !important;
border: none !important;
border-top: 1px solid rgba(196,169,108,.18) !important;
display: flex !important;
flex-direction: column !important;
gap: .35rem !important;
}
body .cart-drawer [data-jw-applied-discounts] .cart-discount,
body .cart-drawer [data-jw-applied-discounts] .cart-discount--inline{
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
}
body .cart-drawer [data-jw-applied-discounts] .cart-discount__label{
display: inline-flex !important;
align-items: center !important;
gap: .45rem !important;
}
body .cart-drawer [data-jw-applied-discounts] .cart-discount__icon{
display: inline-flex !important;
align-items: center !important;
}
body .cart-drawer [data-jw-applied-discounts] .cart-discount__icon svg{
width: 12px !important;
height: 12px !important;
color: #C4A96C !important;
}
body .cart-drawer [data-jw-applied-discounts] .cart-discount__title{
font-family: 'Outfit', sans-serif !important;
font-size: .58rem !important;
font-weight: 400 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
color: #D1C9BE !important;
}
body .cart-drawer [data-jw-applied-discounts] .cart-discount__amount{
font-family: 'Outfit', sans-serif !important;
font-size: .68rem !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
color: #C4A96C !important;
}
/* ═══════════════════════════════════════════════════════════════════════
CART DRAWER — qty + REMOVE compact inline (16 May 2026)
Shrinks the qty stepper and places REMOVE inline next to it instead of
stacked below, collapsing the empty vertical space in the line item.
═══════════════════════════════════════════════════════════════════════ */
body .cart-drawer .cart-item__quantity{
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: .75rem !important;
margin-top: .15rem !important;
}
/* Smaller qty stepper — 24px tall, tighter buttons */
body .cart-drawer .cart-item__quantity .buttoned-input{
transform: none !important;
display: inline-flex !important;
align-items: stretch !important;
height: 24px !important;
width: auto !important;
border: 1px solid rgba(255,255,255,.14) !important;
background: transparent !important;
}
body .cart-drawer .cart-item__quantity .buttoned-input a{
width: 22px !important;
min-width: 22px !important;
height: 100% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
color: #D1C9BE !important;
line-height: 1 !important;
font-size: 0 !important; /* suppress any baseline text node space */
}
body .cart-drawer .cart-item__quantity .buttoned-input a svg{
width: 9px !important;
height: 9px !important;
}
body .cart-drawer .cart-item__quantity .buttoned-input input{
width: 1.7em !important;
height: 22px !important;
line-height: 22px !important;
font-size: .68rem !important;
text-align: center !important;
padding: 0 !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
color: #FAF7F2 !important;
-moz-appearance: textfield !important;
align-self: center !important;
}
body .cart-drawer .cart-item__quantity .buttoned-input input::-webkit-outer-spin-button,
body .cart-drawer .cart-item__quantity .buttoned-input input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0 !important;
}
/* REMOVE — inline, small, tertiary */
body .cart-drawer .cart-item__remove{
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
font-family: 'Outfit', sans-serif !important;
font-size: .48rem !important;
font-weight: 300 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
color: #998E84 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(153,142,132,.35) !important;
padding-bottom: 1px !important;
transition: color .25s, border-color .25s !important;
}
body .cart-drawer .cart-item__remove:hover{
color: #C4A96C !important;
border-color: #C4A96C !important;
}
/* === Applied discount chip — × remove button (16 May 2026) === */
body .cart-drawer [data-jw-applied-discounts] .cart-discount{
position: relative !important;
}
.jw-discount-remove{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 18px !important;
margin-left: .35rem !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
color: #998E84 !important;
cursor: pointer !important;
font-family: 'Outfit', sans-serif !important;
font-size: .9rem !important;
font-weight: 300 !important;
line-height: 1 !important;
border-radius: 50% !important;
transition: color .2s, background .2s !important;
}
.jw-discount-remove:hover{
color: #FAF7F2 !important;
background: rgba(196,169,108,.18) !important;
}
.jw-discount-remove[disabled]{
opacity: .35 !important;
cursor: not-allowed !important;
}
/* Group amount + × together so they sit on the right */
body .cart-drawer [data-jw-applied-discounts] .cart-discount__right{
display: inline-flex !important;
align-items: center !important;
gap: .15rem !important;
}
/* ═══════════════════════════════════════════════════════════════════════
UNIFIED HERO SPEC — sizing + typography (updated 18 May 2026)
Applied to every JW-styled hero band across the site so they all read at
the same height and weight. Matches `.jw-hpage__hero` (heritage page).
Image-led variants (.jw-ch--with-image) inherit the same height; their
image fills via the section's `