/* ==========================================================================
   The Handloom House — shared site shell (nav, footer, buttons, carousel)
   Linked by every page except index.html (which keeps its own inline styles).
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --deep:#2E0812;--deep-2:#3D0A16;--maroon:#571020;--terracotta:#C1440E;
  --ivory:#EFE3CF;--gold:#C9A24B;--gold-lt:#E0BE68;--muted:#b7a888;--wa:#25a366;
  --pad:clamp(18px,5vw,64px);--h2:clamp(30px,5vw,50px);--body:clamp(15px,1.6vw,17px);
}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;color:var(--ivory);background:var(--deep);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.65;font-weight:300}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--pad)}
.serif{font-family:'Cormorant Garamond',serif}

.btn-wa{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:var(--deep);padding:14px 28px;border-radius:2px;font-weight:500;font-size:13.5px;border:none;cursor:pointer;transition:.25s;letter-spacing:1px;font-family:'Outfit';text-transform:uppercase}
.btn-wa:hover{background:var(--gold-lt)}
.btn-wa svg{width:15px;height:15px;fill:currentColor}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;background:transparent;border:1px solid rgba(201,162,75,.5);color:var(--gold-lt);padding:13px 26px;border-radius:2px;font-size:13px;letter-spacing:1px;text-transform:uppercase;transition:.25s;cursor:pointer;font-family:'Outfit'}
.btn-ghost:hover{border-color:var(--gold);background:rgba(201,162,75,.08)}
.rule{width:64px;height:1px;background:var(--gold);margin:0 auto;position:relative}
.rule::after{content:"◆";position:absolute;top:-9px;left:50%;transform:translateX(-50%);color:var(--gold);font-size:9px;background:var(--deep);padding:0 6px}

/* header + nav */
header{position:sticky;top:0;z-index:50;background:rgba(46,8,18,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,162,75,.22)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px var(--pad)}
.nav .logo img{height:72px;filter:brightness(0) invert(1) sepia(1) saturate(2.4) hue-rotate(1deg) brightness(1.02);opacity:.95}
.nav .links{display:none;gap:30px;font-size:12.5px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.nav .links a:hover{color:var(--gold-lt)}
.nav .links a.here{color:var(--gold-lt)}
.nav .cta{display:none}
.burger{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:24px;height:1.5px;background:var(--gold);border-radius:2px}
@media(min-width:1024px){.nav .links{display:flex}.nav .cta{display:inline-flex}.burger{display:none}}

/* drawer */
.drawer{position:fixed;inset:0;background:var(--deep-2);z-index:100;padding:80px var(--pad);display:flex;flex-direction:column;gap:2px;transform:translateY(-100%);transition:.4s cubic-bezier(.6,.05,.2,.95);visibility:hidden}
.drawer.open{transform:translateY(0);visibility:visible}
.drawer .close{position:absolute;top:24px;right:var(--pad);background:none;border:none;color:var(--gold);font-size:34px;cursor:pointer}
.drawer a{color:var(--ivory);font-family:'Cormorant Garamond';font-size:clamp(30px,8vw,42px);padding:10px 0;border-bottom:1px solid rgba(201,162,75,.16)}
.drawer .btn-wa{margin-top:22px;justify-content:center;background:var(--wa);color:#fff;padding:14px;font-size:13px;letter-spacing:1px}

/* category mega-menu */
.nav .links .navitem{position:relative;display:inline-flex;align-items:center}
.nav .links .navitem>a{display:inline-flex;align-items:center;gap:5px}
.nav .links .caret{font-size:8px;opacity:.6}
.megamenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:16px;opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;z-index:80}
.navitem:hover .megamenu{opacity:1;visibility:visible}
.mega-inner{background:var(--deep-2);border:1px solid rgba(201,162,75,.25);border-radius:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);padding:22px 24px;display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:18px 28px;width:max-content;max-width:min(880px,92vw)}
.mega-col{display:flex;flex-direction:column;gap:5px;min-width:0}
.mega-col .mega-h{font-family:'Cormorant Garamond';font-size:16px;color:var(--gold-lt);padding-bottom:6px;margin-bottom:3px;border-bottom:1px solid rgba(201,162,75,.16)}
.mega-col a{font-size:12.5px;color:var(--muted);text-transform:none;letter-spacing:0;line-height:1.5}
.mega-col a:hover{color:var(--gold-lt)}
.drawer-cats{display:flex;flex-direction:column;margin:6px 0;max-height:46vh;overflow:auto}
.drawer .drawer-cats a{font-family:'Outfit';border-bottom:none;padding:0}
.drawer .drawer-cats .dc-h{font-family:'Cormorant Garamond';font-size:20px;color:var(--gold-lt);padding:10px 0 2px}
.drawer .drawer-cats .dc-s{font-size:14px;color:var(--muted);padding:3px 0 3px 16px}

/* sections + headings */
section{padding-block:clamp(46px,6vw,88px)}
.eyebrow{font-size:11px;letter-spacing:4px;color:var(--gold-lt);text-align:center;text-transform:uppercase}
.sec-title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:var(--h2);text-align:center;margin:12px 0 8px;color:#f6edda}
.sec-sub{text-align:center;color:var(--muted);max-width:56ch;margin:0 auto 44px;font-size:var(--body)}

/* breadcrumb + page hero */
.crumb{font-size:12px;letter-spacing:.5px;color:var(--muted);padding:18px 0 0;text-align:center}
.crumb a:hover{color:var(--gold-lt)}
.crumb span{color:var(--gold-lt)}
.page-hero{text-align:center;padding:clamp(40px,6vw,80px) 0 clamp(30px,4vw,50px)}
.page-hero .kick{font-size:11px;letter-spacing:4px;color:var(--gold-lt);text-transform:uppercase}
.page-hero h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(40px,8vw,74px);line-height:1.03;color:#f6edda;margin:14px 0 16px}
.page-hero h1 em{font-style:italic;color:var(--gold-lt)}
.page-hero p{color:var(--muted);max-width:58ch;margin:0 auto;font-size:var(--body)}

/* carousel (shared) */
.carousel{position:relative;margin-top:10px}
.car-track{display:flex;gap:clamp(14px,2vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 12px;-ms-overflow-style:none;scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
.pcard{flex:0 0 auto;width:clamp(210px,24vw,268px);scroll-snap-align:start;display:block}
.pcard .pim{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden;border:1px solid rgba(201,162,75,.22)}
.pcard .pim img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1);filter:saturate(1.03)}
.pcard:hover .pim img{transform:scale(1.05)}
.pcard .pim::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(20,5,10,.92) 0%,rgba(20,5,10,.55) 42%,rgba(20,5,10,0) 100%)}
.pcard .plab{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px;text-align:left}
.pcard .pn{display:block;font-family:'Cormorant Garamond';color:#fff;font-size:21px;line-height:1.1;text-shadow:0 1px 8px rgba(20,5,10,.9)}
.pcard .pd{display:block;font-size:10px;letter-spacing:2px;color:var(--gold-lt);text-transform:uppercase;margin-top:5px;text-shadow:0 1px 6px rgba(20,5,10,.95)}
.car-btn{position:absolute;top:42%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid rgba(201,162,75,.4);background:rgba(46,8,18,.72);backdrop-filter:blur(6px);color:var(--gold-lt);font-family:'Cormorant Garamond';font-size:26px;line-height:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s,opacity .3s}
.car-btn:hover{background:var(--terracotta);color:#fff;border-color:transparent}
.car-btn.prev{left:-10px}.car-btn.next{right:-10px}
.car-btn[disabled]{opacity:.28;pointer-events:none}
@media(max-width:760px){.car-btn{display:none}}
.reel-prog{position:relative;height:3px;border-radius:3px;background:rgba(201,162,75,.18);margin:20px auto 0;max-width:240px}
.reel-prog span{position:absolute;top:0;left:0;height:100%;width:34%;background:var(--gold);border-radius:3px}

/* footer + mobile wa bar */
footer{background:#20050c;color:var(--muted);padding:60px var(--pad) 40px;text-align:center}
footer img{height:56px;margin:0 auto 18px;filter:brightness(0) invert(1) sepia(1) saturate(2.4) hue-rotate(1deg);opacity:.9}
footer .tag{font-family:'Cormorant Garamond';font-style:italic;font-size:23px;color:var(--gold-lt);margin-bottom:26px}
footer .fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;font-size:12px;letter-spacing:1px;margin:26px 0;text-transform:uppercase}
footer .fnav a:hover{color:var(--gold-lt)}
footer .fine{font-size:12px;color:#7a6252;border-top:1px solid rgba(201,162,75,.12);padding-top:22px}
.wa-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px;font-weight:600;font-size:15px;box-shadow:0 -8px 24px rgba(0,0,0,.3)}
.wa-bar svg{width:20px;height:20px;fill:currentColor}
body{padding-bottom:56px}
@media(min-width:1024px){.wa-bar{display:none}body{padding-bottom:0}}

/* catalog: category / subcategory / product cards */
.cat-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.2vw,26px)}
@media(min-width:560px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
.ccard{display:block;position:relative;border:1px solid rgba(201,162,75,.2);border-radius:12px;overflow:hidden;background:rgba(87,16,32,.14);aspect-ratio:5/4;transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .45s,box-shadow .45s}
.ccard:hover{transform:translateY(-6px);border-color:rgba(201,162,75,.5);box-shadow:0 24px 54px -30px rgba(46,8,18,.7)}
.ccard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:.6s}
.ccard:hover img{opacity:.65;transform:scale(1.05)}
.ccard .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,5,10,.85),rgba(20,5,10,.15) 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.ccard .cn{font-family:'Cormorant Garamond';font-size:26px;color:#f6edda;line-height:1.1}
.ccard .cc{font-size:11px;letter-spacing:1.5px;color:var(--gold-lt);text-transform:uppercase;margin-top:6px}
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px)}
@media(min-width:720px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.prod-grid{grid-template-columns:repeat(4,1fr)}}
.p2{display:block}
.p2 .im{aspect-ratio:4/5;border-radius:8px;overflow:hidden;border:1px solid rgba(201,162,75,.2);background:#160409}
.p2 .im img{width:100%;height:100%;object-fit:cover;transition:.6s;filter:saturate(1.03)}
.p2:hover .im img{transform:scale(1.05)}
.p2 .nm{font-family:'Cormorant Garamond';font-size:19px;color:#f3ead6;margin-top:12px;line-height:1.2}
.p2 .sd{font-size:12.5px;color:var(--muted);margin-top:3px}
/* shared rich card (product listing + weaves) — see weaves.php */
.weave-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px)}
@media(min-width:900px){.weave-grid{grid-template-columns:repeat(3,1fr)}}
.wcard{display:block;border:1px solid rgba(201,162,75,.2);border-radius:12px;overflow:hidden;background:rgba(87,16,32,.14);transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .45s,box-shadow .45s}
.wcard:hover{transform:translateY(-6px);border-color:rgba(201,162,75,.5);box-shadow:0 24px 54px -30px rgba(46,8,18,.7)}
.wcard .im{aspect-ratio:4/5;overflow:hidden}
.wcard .im img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1);filter:saturate(1.03)}
.wcard:hover .im img{transform:scale(1.05)}
.wcard .cap{padding:18px 20px 20px}
.wcard .nm{font-family:'Cormorant Garamond';font-size:22px;color:#f6edda;line-height:1.15}
.wcard .dc{font-size:11px;letter-spacing:1.5px;color:var(--gold-lt);text-transform:uppercase;margin-top:6px}
.wcard .go{display:inline-block;margin-top:13px;font-size:12px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;transition:.3s}
.wcard:hover .go{color:var(--gold-lt)}
/* framed category cards — the ogee gold frame is baked into the image (transparent bg) */
.frame-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1.6vw,20px)}
@media(min-width:720px){.frame-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.frame-grid{grid-template-columns:repeat(4,1fr)}}
.fcard{display:block;text-align:center;text-decoration:none}
.fcard .im{aspect-ratio:3/4;overflow:visible;display:flex;align-items:center;justify-content:center}
.fcard .im img{width:100%;height:100%;object-fit:contain;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.fcard:hover .im img{transform:translateY(-6px) scale(1.02)}
.fcard .nm{font-family:'Cormorant Garamond';font-size:24px;color:#f3ead6;margin-top:6px;line-height:1.15}
.fcard .dc{font-size:10.5px;color:var(--gold-lt);letter-spacing:2px;margin-top:4px;text-transform:uppercase}
.price{display:inline-block;margin-top:6px;font-size:14px;color:#eaddc6}
.price b{color:var(--gold-lt);font-weight:600}
.price s{opacity:.55;margin-left:6px;font-size:12.5px}
.empty{text-align:center;padding:50px 20px;border:1px dashed rgba(201,162,75,.3);border-radius:14px;color:var(--muted)}
.empty a{color:var(--gold-lt);border-bottom:1px solid var(--gold)}
.subnav{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.subnav a{font-size:12.5px;letter-spacing:.5px;padding:7px 15px;border:1px solid rgba(201,162,75,.28);border-radius:20px;color:var(--muted);transition:.25s}
.subnav a:hover,.subnav a.on{border-color:var(--gold);color:var(--gold-lt)}

/* long-form prose (about, legal) */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-family:'Cormorant Garamond';font-weight:400;font-size:clamp(24px,3vw,32px);color:#f6edda;margin:38px 0 12px}
.prose h3{font-family:'Cormorant Garamond';font-size:21px;color:var(--gold-lt);margin:26px 0 8px}
.prose p{color:#d8cbb4;font-size:var(--body);margin:0 0 16px}
.prose ul{list-style:none;margin:0 0 18px;display:grid;gap:10px}
.prose li{color:#d8cbb4;font-size:14.5px;padding-left:20px;position:relative}
.prose li::before{content:"◆";position:absolute;left:0;color:var(--gold);font-size:8px;top:6px}
.prose a{color:var(--gold-lt);border-bottom:1px solid rgba(201,162,75,.4)}
.prose .muted{color:var(--muted);font-size:13px}