/* ===========================================================
   Paws & Feet — Redesign theme (v1)
   Single custom stylesheet. Brand accent: #9166ab
   =========================================================== */
:root{
  --accent:#9166ab;--accent-strong:#6f4a8e;--accent-soft:#f3eef7;
  --ground:#ffffff;--surface:#ffffff;--raised:#faf9fb;--dark:#241f2b;
  --ink:#24202a;--ink-soft:#6a6472;--line:#ece8f0;
  --sale:#b5346a;--ok:#2f7d5b;--star:#e0a500;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --shadow:0 1px 2px rgba(36,32,42,.04),0 10px 30px rgba(36,32,42,.08);
  --radius:12px;--max:1200px;
}
/* Dark mode intentionally removed (2026-07) — client asked to keep the
   site light + brand-purple everywhere, regardless of visitor OS/browser
   settings. Do not reintroduce a `prefers-color-scheme:dark` override here. */
*{box-sizing:border-box}
body.pf{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.pf a{color:inherit;text-decoration:none}
.pf img{max-width:100%}
.pf h1,.pf h2,.pf h3,.pf h4,.pf h5{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
.serif{font-family:var(--font-serif)}
.tnum{font-variant-numeric:tabular-nums}
.pf ::selection{background:var(--accent);color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;font-weight:700;font-size:13.5px;padding:11px 20px;border-radius:10px;cursor:pointer;border:0;font-family:inherit;transition:.15s}
.btn:hover{background:var(--accent-strong)}
.btn.dark{background:var(--dark)}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.7);color:#fff}
.btn.out{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.out:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.btn.sm{padding:8px 14px;font-size:12px}

/* ---- top utility bar ---- */
.topbar{background:var(--accent);color:rgba(255,255,255,.92)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:34px;font-size:12px}
.topbar .l{display:flex;gap:16px;align-items:center;opacity:.95}
.topbar .r{display:flex;gap:16px;align-items:center}
.topbar a{opacity:.9;color:#fff}.topbar a:hover{opacity:1;text-decoration:underline}
.topbar .sep{opacity:.5}
.topbar svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7;vertical-align:-2px;margin-right:5px}
@media(max-width:760px){.topbar .l .hideM{display:none}.topbar .r a:nth-child(n+3){display:none}}

/* announcement */
.announce{background:var(--dark);color:#fff;font-size:12.5px;text-align:center;height:34px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.announce .msg{position:absolute;width:100%;opacity:0;transition:opacity .5s;padding:0 12px}
.announce .msg.on{opacity:1}
.announce b{font-weight:700}

/* ---- header ---- */
.site-head{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--line)}
/* padding-top/bottom only (not shorthand) — this shares an element with
   .wrap (class="wrap head"); a horizontal padding here would silently
   overwrite .wrap's side padding since both rules have equal specificity
   and this one loads later, which is exactly what was clipping the header
   icons flush against the mobile edge with zero breathing room. */
.head{display:grid;grid-template-columns:1fr minmax(240px,560px) 1fr;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
.head .brand{justify-self:start}
.head .search{justify-self:center;width:100%;margin:0}
.head .icons{justify-self:end;margin-left:0}
.head .burger{justify-self:start}
.brand{font-family:var(--font-serif);font-size:24px;font-weight:600;white-space:nowrap;color:var(--ink)}
.brand span{color:var(--accent)}
.brand img{max-height:42px;width:auto;display:block}
.search{flex:1;display:flex;align-items:center;gap:8px;background:var(--raised);border:1px solid var(--line);border-radius:999px;padding:9px 14px;color:var(--ink-soft);max-width:540px}
.search input{border:0;background:transparent;outline:0;color:var(--ink);font-size:13.5px;width:100%;font-family:inherit}
.search svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.icons{display:flex;align-items:center;gap:18px;margin-left:auto}
.ic{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;position:relative;color:var(--ink)}
.ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6}
.ic:hover{color:var(--accent)}
.ic .badge{position:absolute;top:-7px;left:12px;background:var(--sale);color:#fff;font-size:10px;font-weight:700;border-radius:999px;min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px}
.burger{display:none;background:none;border:0;cursor:pointer;color:var(--ink)}
.burger svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
@media(max-width:760px){.ic span{display:none}.search{display:none}.burger{display:block}.head{grid-template-columns:auto 1fr auto}.head .brand{justify-self:center}.head .icons{gap:14px}}

/* ---- category nav + mega menu (styles the generated categoryMenu markup) ---- */
.catnav{border-top:1px solid var(--line);background:var(--surface);position:relative}
.catnav>.wrap{display:flex;justify-content:center}
.catnav ul.menu{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.catnav .mega-menu{position:static;list-style:none}
.catnav .mega-menu>a.level-top{display:block;padding:15px 14px;font-size:16px;font-weight:600;white-space:nowrap;color:var(--ink);letter-spacing:.005em;position:relative}
.catnav .mega-menu>a.level-top span{position:relative;display:inline-block}
.catnav .mega-menu>a.level-top span::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .24s cubic-bezier(.2,.7,.2,1)}
.catnav .mega-menu:hover>a.level-top{color:var(--accent)}
.catnav .mega-menu:hover>a.level-top span::after{transform:scaleX(1)}
/* dropdown panel */
.catnav .level0-wrapper{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
.catnav .mega-menu:hover .level0-wrapper{opacity:1;visibility:visible;transform:translateY(0)}
/* neutralise the legacy wrapper divs */
.catnav .level0-wrapper>.container{max-width:var(--max);margin:0 auto;padding:22px 18px;width:100%}
.catnav .level0-wrapper2,.catnav .nav-block{display:block;width:auto;margin:0;padding:0;float:none}
/* columns */
.catnav ul.level0{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:34px}
.catnav ul.level0>li.level1{min-width:150px;padding:0}
.catnav ul.level0>li.level1>a{font-size:12px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;display:block;padding:0 0 9px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.catnav ul.level0>li.level1>a:hover{color:var(--accent)}
.catnav ul.level1{list-style:none;margin:0;padding:0}
.catnav ul.level1 li{padding:0;margin:0}
.catnav ul.level1 a{display:block;padding:5px 0;font-size:13px;font-weight:500;color:var(--ink-soft);text-transform:none;letter-spacing:0}
.catnav ul.level1 a:hover{color:var(--accent)}
@media(max-width:900px){.catnav{display:none}}

/* ================= MEGA MENU (App\Support\MegaMenu -> partials/megamenu) =====
   The .catnav rules above still style the legacy generated markup, which is
   now only rendered as a fallback. Everything below styles the live-DB menu. */
.pf-mega{list-style:none;margin:0;padding:0;display:flex;gap:2px;align-items:stretch}
.pf-m{position:static;list-style:none;display:flex;align-items:center}
.pf-m>a.level-top{display:block;padding:15px 12px 15px 14px;font-size:16px;font-weight:600;white-space:nowrap;color:var(--ink);position:relative}
.pf-m>a.level-top span{position:relative;display:inline-block}
.pf-m>a.level-top span::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .24s cubic-bezier(.2,.7,.2,1)}
.pf-m:hover>a.level-top,.pf-m:focus-within>a.level-top,.pf-m.open>a.level-top{color:var(--accent)}
.pf-m:hover>a.level-top span::after,.pf-m:focus-within>a.level-top span::after,.pf-m.open>a.level-top span::after{transform:scaleX(1)}
.pf-m-hot>a.level-top{color:#b0503c;font-weight:700}
.pf-m-hot>a.level-top span::after{background:#b0503c}

/* chevron toggle — the keyboard/touch way in; pointer users just hover */
.pf-m-toggle{background:none;border:0;padding:15px 10px 15px 0;cursor:pointer;color:var(--ink-soft);display:flex;align-items:center}
.pf-m-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.pf-m:hover .pf-m-toggle,.pf-m.open .pf-m-toggle{color:var(--accent)}
.pf-m:hover .pf-m-toggle svg,.pf-m.open .pf-m-toggle svg{transform:rotate(180deg)}
.pf-m-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:6px}

/* the panel */
.pf-panel{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
.pf-m:hover>.pf-panel,.pf-m:focus-within>.pf-panel,.pf-m.open>.pf-panel{opacity:1;visibility:visible;transform:translateY(0)}
.pf-panel-in{display:flex;gap:34px;align-items:flex-start;padding:26px 18px 30px}
.pf-cols{flex:1;display:flex;flex-wrap:wrap;gap:14px 40px}
.pf-col{min-width:158px}
.pf-col-h{font-size:12px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;display:block;padding:0 0 9px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.pf-col-h:hover{color:var(--accent)}
.pf-col ul{list-style:none;margin:0;padding:0}
.pf-col ul a{display:block;padding:5px 0;font-size:13.5px;color:var(--ink-soft)}
.pf-col ul a:hover{color:var(--accent)}
.pf-col-meta{min-width:210px;max-width:245px}
.pf-all{display:inline-block;font-size:13.5px;font-weight:700;color:var(--accent);padding:0 0 8px}
.pf-all:hover{text-decoration:underline}
.pf-col-note{font-size:12px;line-height:1.55;color:var(--ink-soft);margin:2px 0 12px}
.pf-mini{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:7px 0;border-top:1px solid var(--line)}
.pf-mini:hover{color:var(--accent)}

/* promo tile */
.pf-feat{width:280px;flex:none;border-radius:14px;overflow:hidden;background:#faf7fc;border:1px solid var(--line);display:block;transition:box-shadow .2s,transform .2s}
.pf-feat:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pf-feat img{width:100%;height:150px;object-fit:cover;display:block}
.pf-feat-body{display:block;padding:12px 14px 15px}
.pf-feat-badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:999px;padding:3px 9px;margin-bottom:7px}
.pf-feat-t{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.3}
.pf-feat-s{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-top:3px}
@media(max-width:1080px){.pf-feat{display:none}}

/* (the drawer half of this menu is styled further down, after the legacy
   .drawer .panel .mmenu rules it has to override) */

/* ---- HERO BANNER (responsive desktop/mobile image) ---- */
.hero-banner{display:block;line-height:0}
.hero-banner img{width:100%;height:auto;display:block}

/* ---- HERO SLIDER (legacy, kept for other pages) ---- */
.hero{margin-top:16px;position:relative;border-radius:16px;overflow:hidden}
.hero.full{margin-top:0;border-radius:0}       /* full-bleed banner */
.announce+.wrap,.hero.full+.announce{margin-top:0}
.slides{display:flex;transition:transform .5s ease}
.slide{min-width:100%;position:relative;color:#fff;display:flex;align-items:center;background-size:cover;background-position:center}
.slide.ph{--h:270}
.slide .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,20,40,.55),rgba(30,20,40,.05) 60%)}
.slide .body{position:relative;z-index:2;padding:0 6%;max-width:560px}
.slide .eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.95}
.slide h2{font-family:var(--font-serif);font-size:38px;line-height:1.06;margin:10px 0 8px;text-wrap:balance}
.slide p{font-size:15px;opacity:.95;margin:0 0 18px;max-width:38ch}
.slide .cta{display:flex;gap:10px;flex-wrap:wrap}
.hero .desk{height:400px}
.hero .arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;cursor:pointer;z-index:5;border:0}
.hero .arrow svg{width:20px;height:20px;stroke:#241f2b;fill:none;stroke-width:2}
.hero .prev{left:14px}.hero .next{right:14px}
.dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.dots button{width:9px;height:9px;border-radius:999px;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.dots button.on{background:#fff;width:22px}
@media(max-width:760px){
  .slide .body{padding:0 24px;text-align:center;margin:0 auto}
  .slide h2{font-size:26px}.slide .cta{justify-content:center}
  .hero .desk{height:440px}.slide{justify-content:center}.hero .arrow{display:none}
}

/* section head */
.sec{margin-top:36px}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.sechead h3{font-family:var(--font-serif);font-size:22px;font-weight:600}
.sechead .sub{font-size:12px;color:var(--ink-soft);margin-top:3px}
.seelink{font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap}

/* category circles */
.circles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px}
.circ{display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer}
.circ .img{width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-family:var(--font-serif);font-size:26px;color:#fff;overflow:hidden;border:3px solid transparent;transition:border-color .18s;background:var(--accent-soft)}
.circ .img img{width:100%;height:100%;object-fit:cover}
.circ:hover .img{border-color:var(--accent)}
.circ span{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
@media(max-width:760px){
  .circles{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:16px;padding-bottom:8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .circ{flex:0 0 96px;scroll-snap-align:start}
  .circles::-webkit-scrollbar{height:5px}
  .circles::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
}

/* usp */
.usp{display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--raised)}
.usp .u{padding:14px 16px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:10px;border-right:1px solid var(--line);color:var(--ink)}
.usp .u:last-child{border-right:0}
.usp small{display:block;font-weight:500;color:var(--ink-soft);font-size:11px}
.usp svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.6;flex-shrink:0}
@media(max-width:760px){.usp{grid-template-columns:1fr 1fr}.usp .u:nth-child(2){border-right:0}}

/* ---- product grid + card ---- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:760px){.pgrid{grid-template-columns:repeat(2,1fr);gap:12px}}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .18s,transform .18s;display:block;color:var(--ink)}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.pcard .ph{aspect-ratio:3/4;position:relative;display:block;overflow:hidden;background:var(--accent-soft)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .disc{position:absolute;top:9px;left:9px;background:var(--sale);color:#fff;font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:6px;z-index:2}
.pcard .heart{position:absolute;top:8px;right:8px;width:29px;height:29px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;z-index:2;border:0;cursor:pointer}
.pcard .heart svg{width:15px;height:15px;stroke:#241f2b;fill:none;stroke-width:1.7}
.pcard .qadd{position:absolute;left:9px;right:9px;bottom:9px;background:var(--dark);color:#fff;font-weight:700;font-size:12px;text-align:center;padding:9px;border-radius:8px;opacity:0;transform:translateY(8px);transition:.18s;border:0;cursor:pointer;z-index:2}
.pcard:hover .qadd{opacity:1;transform:translateY(0)}
.pcard .meta{padding:10px 11px 12px}
.pcard .nm{font-size:13px;font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .row{display:flex;align-items:center;gap:7px;margin-top:6px;flex-wrap:wrap}
.pcard .price{font-size:14.5px;font-weight:800}
.pcard .mrp{font-size:12px;color:var(--ink-soft);text-decoration:line-through}
.pcard .off{font-size:11.5px;font-weight:700;color:var(--ok)}
.skel{background:linear-gradient(90deg,var(--raised),var(--line),var(--raised));background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}

/* collections */
.collections{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.collections{grid-template-columns:1fr}}
.coll{border-radius:var(--radius);overflow:hidden;position:relative;min-height:230px;color:#fff;display:flex;align-items:flex-end;cursor:pointer;background:var(--accent-soft);background-size:cover;background-position:center top}
/* subtle bottom darken only, for base image contrast — the real legibility
   now comes from the frosted-glass panel on .b, not this gradient */
.coll .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,14,26,.35),rgba(20,14,26,0) 45%)}
.coll .b{position:relative;z-index:2;margin:14px;padding:14px 18px;border-radius:14px;background:rgba(20,14,26,.28);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.22);box-shadow:0 4px 18px rgba(0,0,0,.12)}
.coll .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.95;color:#fff}
.coll h4{font-family:var(--font-serif);font-size:20px;margin:6px 0 3px;color:#fff}
.coll .b span{font-size:12.5px;opacity:.95;font-weight:600;color:#fff}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.quote .st{color:var(--star);font-size:13px;letter-spacing:2px}
.quote p{font-size:13.5px;margin:10px 0 14px;line-height:1.6;color:var(--ink)}
.quote .who{display:flex;align-items:center;gap:10px}
.quote .av{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;overflow:hidden}
.quote .who b{font-size:13px}.quote .who small{display:block;color:var(--ink-soft);font-size:11px}

/* newsletter band */
.nlband{margin-top:40px;background:linear-gradient(120deg,#5b3d78,#9166ab);border-radius:16px;padding:30px;text-align:center;color:#fff}
.nlband h3{font-family:var(--font-serif);font-size:24px}
.nlband p{opacity:.92;font-size:13.5px;margin:8px 0 16px}
.nlform{display:flex;gap:8px;max-width:440px;margin:0 auto}
.nlform input{flex:1;border:0;border-radius:999px;padding:12px 18px;font-size:13.5px;outline:0;font-family:inherit}

/* ---- footer ---- */
.site-foot{margin-top:44px;background:var(--dark);color:#d9d2e2}
/* same combined-with-.wrap fix as .head above — was zeroing the footer's
   side padding, so all footer text touched the screen edge on mobile. */
.foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px;padding-top:40px;padding-bottom:28px}
.foot h5{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#a99bbb;margin:0 0 13px}
.foot a{display:block;font-size:13px;padding:4px 0;color:#d9d2e2}
.foot a:hover{color:#fff}
.foot .brand{color:#fff;font-size:22px;margin-bottom:10px}
.foot .brand span{color:var(--accent-strong)}
.foot .about{font-size:13px;color:#b4a9c4;max-width:34ch;line-height:1.6}
.contact{margin-top:14px;font-size:13px;display:flex;flex-direction:column;gap:7px;color:#c8bdd6}
.contact div{display:flex;gap:9px;align-items:flex-start}
.contact svg{width:16px;height:16px;stroke:var(--accent-strong);fill:none;stroke-width:1.7;margin-top:2px;flex-shrink:0}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center}
.social a:hover{background:var(--accent)}
.social svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.7}
.pays{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.pays span{background:#fff;color:#241f2b;font-size:10px;font-weight:800;padding:4px 8px;border-radius:5px}
.legal{border-top:1px solid rgba(255,255,255,.1);padding-top:16px;padding-bottom:16px;font-size:12px;color:#a99bbb;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media(max-width:760px){.foot{grid-template-columns:1fr 1fr}.foot .col1{grid-column:1/-1}}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:100;display:none}
.drawer.open{display:block}
.drawer .bd{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.drawer .panel{position:absolute;top:0;left:0;bottom:0;width:82%;max-width:320px;background:var(--surface);padding:18px;overflow:auto;transform:translateX(-100%);transition:transform .25s}
.drawer.open .panel{transform:none}
.drawer .x{float:right;font-size:22px;border:0;background:none;cursor:pointer;color:var(--ink)}
/* mobile menu list */
.drawer .panel .mmenu,.drawer .panel .mmenu ul{list-style:none;margin:0;padding:0}
.drawer .panel .mmenu li{position:relative;border-bottom:1px solid var(--line)}
.drawer .panel .mmenu ul li:last-child{border-bottom:0}
.drawer .panel .mmenu a{display:block;padding:12px 4px;font-weight:600;color:var(--ink);font-size:14px}
.drawer .panel .mmenu .home a{padding-left:0}
.drawer .panel .mmenu i{display:none}
.drawer .panel .mmenu ul{display:none;padding-left:14px;background:var(--raised);border-top:1px solid var(--line)}
.drawer .panel .mmenu li.open>ul{display:block}
.drawer .panel .mmenu ul a{font-weight:500;color:var(--ink-soft);font-size:13px;padding:10px 4px}
.drawer .panel .mmenu ul ul a{font-size:12.5px}
.drawer .panel .mmenu .expand{position:absolute;top:6px;right:0;width:30px;height:30px;border-radius:7px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;cursor:pointer;font-style:normal;z-index:2}
.drawer .panel .mmenu .expand::before{content:"+";font-weight:800;font-size:16px}
.drawer .panel .mmenu li.open>.expand::before{content:"\2013"}

/* ---- drawer menu built from partials/mobilemenu (live DB tree) ----
   Deliberately placed after the legacy .mmenu rules above: those still style
   the generated fallback markup, and "…mmenu ul{display:none}" would other-
   wise keep every accordion permanently collapsed no matter what the [hidden]
   attribute says. Same specificity, later in the file, so these win. */
.drawer .panel .mm-promo{display:block;margin:6px 0 14px;padding:12px 14px;border-radius:12px;background:linear-gradient(115deg,#2c1f3d,#5c3a78 60%,#8a5fb0);color:#fff}
.drawer .panel .mm-promo b{display:block;font-size:14.5px;color:#fff}
.drawer .panel .mm-promo span{display:block;font-size:12px;color:rgba(255,255,255,.88);margin-top:2px;font-weight:500}
.drawer .panel .mmenu .mm-group{border-bottom:1px solid var(--line)}
.drawer .panel .mmenu .mm-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.drawer .panel .mmenu .mm-row>a{flex:1;padding:13px 2px;font-size:15px;font-weight:600;color:var(--ink)}
.drawer .panel .mmenu .mm-toggle{background:none;border:0;padding:11px 4px;cursor:pointer;color:var(--ink-soft);display:flex;align-items:center;position:static}
.drawer .panel .mmenu .mm-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.drawer .panel .mmenu .mm-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.drawer .panel .mmenu .mm-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.drawer .panel .mmenu ul.mm-sub{display:block;list-style:none;margin:0 0 10px;padding:2px 0 6px 2px;background:none;border-top:0}
.drawer .panel .mmenu ul.mm-sub[hidden]{display:none}
.drawer .panel .mmenu ul.mm-sub>li{border-bottom:0;margin-bottom:6px}
.drawer .panel .mmenu a.mm-sub-h{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding:4px 2px}
.drawer .panel .mmenu ul.mm-leaf{display:block;margin:0;padding:0 0 0 11px;border-left:2px solid var(--line);background:none;border-top:0}
.drawer .panel .mmenu ul.mm-leaf a{font-size:13.5px;font-weight:500;color:var(--ink-soft);padding:7px 2px}
.drawer .panel .mmenu a.mm-all{font-size:13px;font-weight:700;color:var(--accent);padding:7px 2px}
.drawer .panel .mm-foot{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column}
.drawer .panel .mm-foot a{display:block;padding:9px 2px;font-size:13.5px;color:var(--ink-soft)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* =========================================================
   Interaction polish — smooth hovers across all sections
   ========================================================= */
.pf a{transition:color .18s ease}

/* product cards: image zoom + title accent + smoother lift */
.pcard{transition:box-shadow .24s ease,transform .24s ease,border-color .24s ease}
.pcard .ph img{transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.pcard:hover .ph img{transform:scale(1.06)}
.pcard:hover .nm{color:var(--accent)}
.pcard .heart{transition:transform .16s ease,background .16s ease,box-shadow .16s}
.pcard .heart:hover{transform:scale(1.14);background:#fff;box-shadow:0 3px 10px rgba(36,32,42,.18)}
.pcard .qadd{transition:opacity .2s ease,transform .2s ease,background .16s}
.pcard .qadd:hover{background:var(--accent)}

/* category circles: image zoom + label accent */
.circ .img img{transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.circ:hover .img img{transform:scale(1.09)}
.circ:hover span{color:var(--accent)}

/* curated collections: lift + shadow + arrow nudge */
.coll{transition:transform .3s ease,box-shadow .3s ease}
.coll:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(36,32,42,.22)}
.coll .b span{display:inline-block;transition:transform .22s ease}
.coll:hover .b span{transform:translateX(4px)}

/* buttons: lift + soft brand shadow */
.btn{transition:background .18s ease,transform .16s ease,box-shadow .18s ease,color .16s}
.btn:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(145,102,171,.30)}
.btn.out:hover{box-shadow:none;transform:translateY(-1px)}
.btn.dark:hover{box-shadow:0 7px 20px rgba(36,32,42,.28)}

/* "View all" section links: arrow + underline */
.seelink{display:inline-block;transition:color .18s ease,transform .18s ease}
.seelink:hover{color:var(--accent-strong);transform:translateX(3px)}

/* header icons: subtle pop */
.ic svg{transition:transform .18s ease}
.ic:hover svg{transform:scale(1.12)}

/* mega-menu sub-links: slide + accent */
.catnav ul.level1 a{transition:color .16s ease,padding-left .16s ease}
.catnav ul.level1 a:hover{padding-left:6px;color:var(--accent)}
.catnav ul.level0>li.level1>a{transition:color .16s ease}

/* footer links: slide */
.foot a{transition:color .18s ease,padding-left .18s ease}
.foot a:hover{padding-left:6px;color:#fff}
.social a{transition:background .18s ease,transform .18s ease}
.social a:hover{transform:translateY(-2px)}

/* top bar links */
.topbar a{transition:opacity .16s ease}

/* USP tiles */
.usp .u{transition:background .18s ease}
.usp .u:hover{background:var(--accent-soft)}

/* testimonials + quote cards */
.quote{transition:box-shadow .22s ease,transform .22s ease,border-color .22s}
.quote:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--accent-soft)}

/* forms: focus rings */
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.nlform input:focus,.pinrow input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.pf a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* =========================================================
   Collection / product listing page
   ========================================================= */
.crumb{font-size:12.5px;color:var(--ink-soft);padding:16px 0 4px}
.crumb a{transition:color .15s}.crumb a:hover{color:var(--accent)}
.crumb b{color:var(--ink)}
.col-head{padding:6px 0 4px}
.col-head h1{font-family:var(--font-serif);font-size:28px;font-weight:600;text-wrap:balance}
.col-head .sub{font-size:13px;color:var(--ink-soft);margin-top:5px}
.col-head .desc{font-size:13.5px;color:var(--ink-soft);margin-top:8px;max-width:70ch;line-height:1.6}

.col-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 14px;flex-wrap:wrap}
.col-toolbar .cnt{font-size:13px;color:var(--ink-soft)}
.sortwrap{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft)}
.select{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px 34px 10px 14px;font-size:13.5px;font-family:inherit;font-weight:600;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6472' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;transition:border-color .15s,box-shadow .15s}
.select:hover{border-color:var(--accent)}
.select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{background:var(--accent-soft);color:var(--accent-strong);font-size:12px;font-weight:600;padding:6px 8px 6px 12px;border-radius:999px;display:inline-flex;gap:7px;align-items:center;transition:background .15s}
.chip:hover{background:#e9def2}
.chip .x{font-weight:800;font-size:14px;line-height:1;opacity:.7}
.chip.clear{background:transparent;color:var(--ink-soft);text-decoration:underline;padding:6px 4px}

.col-layout{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start;padding-bottom:10px}
.col-filters{position:sticky;top:82px}
.fgroup{border-bottom:1px solid var(--line);padding:16px 0}
.fgroup:first-child{padding-top:0}
.fgroup>h4{font-size:13.5px;font-weight:700;margin:0 0 12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.fopt{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:6px 0;color:var(--ink-soft);cursor:pointer;transition:color .15s}
.fopt:hover{color:var(--ink)}
.fopt input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
.fopt .c{margin-left:auto;font-size:11.5px;color:var(--ink-soft)}
.pricefields{display:flex;align-items:center;gap:8px}
.pricefields input{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:9px 11px;font-size:13px;outline:0;font-family:inherit;-moz-appearance:textfield}
.pricefields input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pricefields span{color:var(--ink-soft);font-size:13px}
.fapply{margin-top:14px;width:100%}
.freset{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--ink-soft);text-decoration:underline}
.freset:hover{color:var(--accent)}

.pagination2{display:flex;justify-content:center;align-items:center;gap:6px;margin:30px 0 8px;flex-wrap:wrap}
.pagination2 a,.pagination2 span{min-width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink);padding:0 10px;transition:.15s}
.pagination2 a:hover{border-color:var(--accent);color:var(--accent)}
.pagination2 .cur{background:var(--accent);border-color:var(--accent);color:#fff}
.pagination2 .disabled{color:var(--ink-soft);opacity:.5;pointer-events:none}

.col-empty{text-align:center;padding:60px 20px;color:var(--ink-soft)}
.col-empty h3{font-family:var(--font-serif);font-size:22px;color:var(--ink);margin-bottom:8px}

.filter-btn{display:none;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:9px 14px;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit}
.filter-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}

@media(max-width:820px){
  .col-layout{grid-template-columns:1fr}
  .filter-btn{display:inline-flex}
  .col-filters{position:fixed;inset:0;z-index:100;background:var(--surface);padding:20px;overflow:auto;display:none;top:0}
  .col-filters.open{display:block}
  .col-filters .fclose{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-family:var(--font-serif);font-size:20px}
  .col-filters .fclose button{border:0;background:none;font-size:22px;cursor:pointer;color:var(--ink)}
}
@media(min-width:821px){.col-filters .fclose{display:none}}

/* collection page banner (dummy image + brand tint) */
.col-banner{position:relative;border-radius:16px;overflow:hidden;min-height:236px;display:flex;align-items:center;margin:10px 0 6px;background-color:var(--accent-soft);background-size:cover;background-position:center}
.col-banner-in{position:relative;z-index:2;padding:0 46px;color:#fff;max-width:680px}
.col-banner .cbeyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.85;margin-bottom:9px}
.col-banner h1{font-family:var(--font-serif);font-size:42px;font-weight:600;color:#fff;line-height:1.04;text-wrap:balance}
.col-banner .cbsub{font-size:14px;font-weight:600;opacity:.96;margin-top:11px}
.col-banner .cbdesc{font-size:13.5px;opacity:.9;margin-top:8px;line-height:1.6;max-width:54ch}
@media(max-width:760px){.col-banner{min-height:172px;border-radius:12px}.col-banner-in{padding:0 22px}.col-banner h1{font-size:28px}.col-banner .cbdesc{display:none}}

/* full-width collection banner */
.col-banner.full{border-radius:0;margin:0;min-height:172px}
.col-banner.full .col-banner-in{max-width:var(--max);width:100%;margin:0 auto;padding:24px 18px}
.cbcrumb{font-size:12.5px;color:rgba(255,255,255,.82);margin-bottom:14px}
.cbcrumb a{transition:color .15s}.cbcrumb a:hover{color:#fff}
.cbcrumb b{color:#fff;font-weight:600}
@media(max-width:760px){.col-banner.full{min-height:132px}.col-banner.full .col-banner-in{padding:24px 18px}}

/* =========================================================
   Product detail page (PDP)
   ========================================================= */
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;margin-top:14px}
@media(max-width:900px){.pdp{grid-template-columns:1fr;gap:22px}}

/* gallery */
.pdp-gallery{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:start;position:sticky;top:80px}
.pdp-thumbs{display:flex;flex-direction:column;gap:10px;max-height:560px;overflow:auto;scrollbar-width:thin}
.pdp-thumb{aspect-ratio:3/4;border-radius:10px;overflow:hidden;border:2px solid var(--line);cursor:pointer;background:var(--raised);transition:border-color .15s}
.pdp-thumb:hover{border-color:var(--accent-strong)}
.pdp-thumb.on{border-color:var(--accent)}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-main{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line);aspect-ratio:3/4;background:var(--raised);cursor:crosshair}
.pdp-main img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .12s ease-out;transform-origin:center center;will-change:transform}
.pdp-main.zoomed img{transform:scale(2.1)}
.pdp-main .zoom-hint{position:absolute;bottom:12px;right:12px;background:rgba(255,255,255,.92);color:#241f2b;font-size:11px;font-weight:700;padding:6px 11px;border-radius:999px;display:flex;gap:6px;align-items:center;pointer-events:none;transition:opacity .2s}
.pdp-main.zoomed .zoom-hint{opacity:0}
.pdp-main .zoom-hint svg{width:13px;height:13px;stroke:#241f2b;fill:none;stroke-width:2}
@media(max-width:760px){
  .pdp-gallery{grid-template-columns:1fr;position:static}
  .pdp-thumbs{flex-direction:row;order:2;overflow-x:auto;max-height:none;padding-bottom:6px}
  .pdp-thumb{width:64px;flex:0 0 64px}
  .pdp-main{cursor:default}
  .pdp-main .zoom-hint{display:none}
}

/* info */
.pdp-info{max-width:560px}
.pdp-brand{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.pdp-title{font-family:var(--font-serif);font-size:28px;line-height:1.16;margin-top:6px;text-wrap:balance}
.pdp-rate{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
.pdp-rate .stars{color:var(--star);letter-spacing:1px}
.pdp-price{display:flex;align-items:baseline;gap:12px;margin:16px 0 3px;flex-wrap:wrap}
/* [hidden] must win over the display:flex above — the Buy/Rent toggle relies on it */
.pdp-price[hidden]{display:none}
.pdp-price .p{font-size:27px;font-weight:800;font-variant-numeric:tabular-nums}
.pdp-price .m{font-size:16px;color:var(--ink-soft);text-decoration:line-through}
.pdp-price .o{font-size:14px;font-weight:800;color:var(--ok)}
.pdp-tax{font-size:12px;color:var(--ink-soft)}
.pdp-tax .instock{color:var(--ok);font-weight:700}
.pdp-tax .oos{color:var(--sale);font-weight:700}
.pdp-short{font-size:13.5px;color:var(--ink-soft);line-height:1.65;margin-top:16px;max-width:52ch}

.pdp-grp{margin-top:22px}
.pdp-grp .lab{font-size:12.5px;font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.pdp-grp .lab .cur{color:var(--ink-soft);font-weight:600}
.vcolors{display:flex;gap:10px;flex-wrap:wrap}
.vcolors .vc{width:52px;height:64px;border-radius:9px;overflow:hidden;border:2px solid var(--line);cursor:pointer;padding:0;background:var(--raised);transition:border-color .15s,transform .15s}
.vcolors .vc:hover{transform:translateY(-2px)}
.vcolors .vc.on{border-color:var(--accent)}
.vcolors .vc img{width:100%;height:100%;object-fit:cover;display:block}
.vsizes{display:flex;gap:9px;flex-wrap:wrap}
.vsizes .vs{min-width:46px;padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit;text-align:center}
.vsizes .vs:hover{border-color:var(--accent);color:var(--accent)}
.vsizes .vs.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}

.pdp-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pdp-qty button{width:40px;height:44px;border:0;background:var(--surface);color:var(--ink);font-size:18px;cursor:pointer;transition:background .15s}
.pdp-qty button:hover{background:var(--accent-soft);color:var(--accent)}
.pdp-qty span{width:46px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}

.pdp-actions{display:flex;gap:12px;margin-top:22px}
.pdp-actions .btn{flex:1;padding:14px}
.pdp-wish{width:52px;flex:0 0 auto;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;display:grid;place-items:center;cursor:pointer;transition:.15s}
.pdp-wish:hover{border-color:var(--accent);background:var(--accent-soft)}
.pdp-wish svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.7}
.pdp-wish:hover svg{stroke:var(--accent)}

.pdp-pincode{margin-top:20px;border:1px solid var(--line);border-radius:12px;padding:14px}
.pdp-pincode .t{font-size:12.5px;font-weight:700;margin-bottom:10px;display:flex;gap:8px;align-items:center}
.pdp-pincode .t svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.7}
.pinrow{display:flex;gap:8px}
.pinrow input{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:10px 12px;font-size:13px;outline:0;font-family:inherit}
.pinrow input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pinrow button{background:transparent;border:1.5px solid var(--accent);color:var(--accent);font-weight:700;border-radius:9px;padding:0 16px;cursor:pointer;font-family:inherit}

.pdp-offers{margin-top:16px;border:1px dashed var(--accent);border-radius:12px;padding:14px 16px;background:var(--accent-soft)}
.pdp-offers h4{font-size:12.5px;margin-bottom:9px}
.pdp-offers div{font-size:12.5px;color:var(--ink-soft);padding:3px 0;display:flex;gap:8px}
.pdp-offers b{color:var(--ink)}
.pdp-trust{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap}
.pdp-trust div{font-size:12px;color:var(--ink-soft);display:flex;gap:7px;align-items:center}
.pdp-trust svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.6}

/* tabs */
.pdp-tabs{margin-top:44px;border-top:1px solid var(--line)}
.pdp-tabbar{display:flex;gap:26px;border-bottom:1px solid var(--line);overflow-x:auto}
.pdp-tabbar button{border:0;background:none;padding:15px 2px;font-size:14px;font-weight:700;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;font-family:inherit;white-space:nowrap;transition:color .15s}
.pdp-tabbar button:hover{color:var(--ink)}
.pdp-tabbar button.on{color:var(--ink);border-color:var(--accent)}
.pdp-tabpane{display:none;padding:20px 0;font-size:14px;line-height:1.75;color:var(--ink-soft);max-width:74ch}
.pdp-tabpane.on{display:block}
.pdp-tabpane ul{margin:8px 0;padding-left:20px}
.pdp-tabpane b,.pdp-tabpane strong{color:var(--ink)}
.pdp-tabpane table{border-collapse:collapse;width:100%;max-width:520px}
.pdp-tabpane td{padding:8px 10px;border-bottom:1px solid var(--line);font-size:13.5px}
.pdp-tabpane td:first-child{color:var(--ink);font-weight:600;width:45%}

/* =========================================================
   Auth (login / register)
   ========================================================= */
.auth-wrap{display:flex;justify-content:center;padding:44px 18px 64px}
.auth-card{width:100%;max-width:430px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:34px;box-shadow:var(--shadow)}
.auth-head{text-align:center;margin-bottom:22px}
.auth-head h1{font-family:var(--font-serif);font-size:26px}
.auth-head p{font-size:13px;color:var(--ink-soft);margin-top:6px}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.fld input{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:12px 14px;font-size:14px;outline:0;font-family:inherit;transition:.15s}
.fld input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin:2px 0 18px;font-size:12.5px}
.auth-row a{color:var(--accent);font-weight:600}
.rem{display:flex;gap:7px;align-items:center;color:var(--ink-soft);cursor:pointer}
.rem input{accent-color:var(--accent)}
.auth-err{background:rgba(181,52,106,.08);color:var(--sale);border:1px solid rgba(181,52,106,.25);border-radius:9px;padding:11px 13px;font-size:12.5px;margin-bottom:16px}
.auth-err ul{margin:0;padding-left:16px}
.auth-alt{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.auth-alt a{color:var(--accent);font-weight:700}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.frow2{grid-template-columns:1fr}}

/* side-cart drawer */
.cart-drawer{position:fixed;inset:0;z-index:120;visibility:hidden;transition:visibility 0s .3s}
.cart-drawer.open{visibility:visible;transition:visibility 0s 0s}
.cart-drawer .cd-bd{position:absolute;inset:0;background:rgba(20,14,26,.45);opacity:0;transition:opacity .3s ease}
.cart-drawer.open .cd-bd{opacity:1}
.cart-drawer .cd-panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:var(--surface);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.32,.72,0,1);box-shadow:-8px 0 40px rgba(0,0,0,.15);will-change:transform}
.cart-drawer.open .cd-panel{transform:translateX(0)}
.cd-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.cd-head span{font-family:var(--font-serif);font-size:19px;font-weight:600}
.cd-head button{border:0;background:none;font-size:22px;cursor:pointer;color:var(--ink);line-height:1}
.cd-body{flex:1;overflow-y:auto;padding:8px 20px}
.cd-empty{text-align:center;padding:50px 10px;color:var(--ink-soft);font-size:14px}
.cd-empty .btn{margin-top:16px}
.cd-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.cd-img{aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--raised)}
.cd-img img{width:100%;height:100%;object-fit:cover;display:block}
.cd-nm{font-size:13px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cd-meta{font-size:12px;color:var(--ink-soft);margin-top:5px}
.cd-meta b{color:var(--ink)}
.cd-rm{border:0;background:var(--raised);color:var(--ink-soft);width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:13px;transition:.15s}
.cd-rm:hover{background:var(--accent-soft);color:var(--sale)}
.cd-foot{border-top:1px solid var(--line);padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.cd-sub{display:flex;justify-content:space-between;font-size:15px;font-weight:800}
.cd-foot .btn{width:100%}
.cd-foot small{text-align:center;color:var(--ink-soft);font-size:11.5px}

/* cart & wishlist page */
.shop-head{padding:18px 0 4px}
.shop-head h1{font-family:var(--font-serif);font-size:28px}
.shop-head .sub{font-size:13px;color:var(--ink-soft);margin-top:5px}
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:26px;align-items:start;margin-top:16px;padding-bottom:20px}
.citem2{display:grid;grid-template-columns:96px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.citem2:first-child{padding-top:0}
.citem2 .ci-img{aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--raised)}
.citem2 .ci-img img{width:100%;height:100%;object-fit:cover;display:block}
.citem2 .ci-nm{font-size:14.5px;font-weight:600;line-height:1.35}
.citem2 .ci-links{display:flex;gap:14px;margin-top:12px;font-size:12.5px}
.citem2 .ci-links a{color:var(--accent);font-weight:600;cursor:pointer}
.citem2 .ci-links a.rm{color:var(--ink-soft)}
.citem2 .ci-rt{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.citem2 .ci-pr{font-size:15px;font-weight:800}
.qty2{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.qty2 button{width:32px;height:34px;border:0;background:var(--surface);color:var(--ink);font-size:16px;cursor:pointer;transition:.15s}
.qty2 button:hover{background:var(--accent-soft);color:var(--accent)}
.qty2 input{width:40px;text-align:center;font-weight:700;font-size:13px;border:0;outline:0;background:transparent;color:var(--ink);font-family:inherit;-moz-appearance:textfield}
.summary2{border:1px solid var(--line);border-radius:14px;padding:20px;position:sticky;top:82px;background:var(--surface)}
.summary2 h3{font-size:16px;margin-bottom:15px}
.sline2{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;color:var(--ink-soft)}
.sline2 b{color:var(--ink);font-weight:600}
.sline2.free b{color:var(--ok)}
.stotal2{display:flex;justify-content:space-between;font-size:17px;font-weight:800;padding:13px 0 4px;border-top:1px solid var(--line);margin-top:8px}
.summary2 .btn{width:100%;margin-top:14px}
.summary2 .pays{justify-content:center;margin-top:14px}
.empty-state{text-align:center;padding:70px 20px;color:var(--ink-soft)}
.empty-state svg{width:56px;height:56px;stroke:var(--line);fill:none;stroke-width:1.5;margin-bottom:16px}
.empty-state h3{font-family:var(--font-serif);font-size:22px;color:var(--ink);margin-bottom:8px}

/* account */
.acct{display:grid;grid-template-columns:230px 1fr;gap:26px;align-items:start;margin-top:18px;padding-bottom:20px}
.acct-nav{border:1px solid var(--line);border-radius:14px;padding:10px;position:sticky;top:82px;background:var(--surface)}
.acct-nav a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink);transition:.15s}
.acct-nav a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.acct-nav a:hover{background:var(--raised)}
.acct-nav a.on{background:var(--accent-soft);color:var(--accent-strong)}
.order-card{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px;transition:box-shadow .18s}
.order-card:hover{box-shadow:var(--shadow)}
.order-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.order-top .onum{font-weight:700;font-size:14px}
.order-top .odate{font-size:12.5px;color:var(--ink-soft)}
.ostatus{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;text-transform:capitalize}
.ostatus.approved{background:rgba(47,125,91,.12);color:var(--ok)}
.ostatus.pending{background:rgba(224,165,0,.14);color:#a67c00}
.ostatus.rejected{background:rgba(181,52,106,.12);color:var(--sale)}
.ostatus.mail-order{background:var(--accent-soft);color:var(--accent-strong)}
.order-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.order-bot .otot{font-size:15px;font-weight:800}
.order-bot .oitems{font-size:12.5px;color:var(--ink-soft)}

/* generic content page */
.page-hero{text-align:center;padding:36px 18px 8px}
.page-hero h1{font-family:var(--font-serif);font-size:34px}
.page-hero p{font-size:14px;color:var(--ink-soft);margin-top:8px;max-width:60ch;margin-left:auto;margin-right:auto}
.prose{max-width:760px;margin:14px auto 40px;font-size:15px;line-height:1.8;color:var(--ink-soft);padding:0 18px}
.prose h2,.prose h3{color:var(--ink);font-family:var(--font-serif);margin:26px 0 10px}
.prose a{color:var(--accent);font-weight:600}
.prose ul{padding-left:20px}

@media(max-width:860px){.cart-layout{grid-template-columns:1fr}}
@media(max-width:820px){.acct{grid-template-columns:1fr}}
@media(max-width:480px){.cart-drawer .cd-panel{width:100vw}}

/* =========================================================
   Blog list + detail
   ========================================================= */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:10px}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}
.blog-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease;display:flex;flex-direction:column}
.blog-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.blog-card .bimg{aspect-ratio:16/10;overflow:hidden;background:var(--accent-soft);display:block}
.blog-card .bimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.blog-card:hover .bimg img{transform:scale(1.05)}
.blog-card .bimg iframe{width:100%;height:100%;border:0;display:block}
.blog-card .bbody{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.blog-card .bmeta{display:flex;gap:10px;align-items:center;font-size:11.5px;color:var(--ink-soft);margin-bottom:9px;flex-wrap:wrap}
.blog-card .bcat{background:var(--accent-soft);color:var(--accent-strong);font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;font-size:10.5px}
.blog-card h3{font-family:var(--font-serif);font-size:19px;line-height:1.28;margin-bottom:8px}
.blog-card h3 a:hover{color:var(--accent)}
.blog-card .bexcerpt{font-size:13.5px;color:var(--ink-soft);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:14px}
.blog-card .bmore{margin-top:auto;font-size:12.5px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:6px;transition:gap .18s}
.blog-card .bmore:hover{gap:10px}

/* article (detail) */
.article-hero{max-width:820px;margin:6px auto 0;padding:0 18px;text-align:center}
.article-hero .bcat{display:inline-block;background:var(--accent-soft);color:var(--accent-strong);font-weight:700;padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;font-size:11px;margin-bottom:14px}
.article-hero h1{font-family:var(--font-serif);font-size:34px;line-height:1.15;text-wrap:balance}
.article-hero .ameta{display:flex;gap:14px;justify-content:center;align-items:center;font-size:12.5px;color:var(--ink-soft);margin-top:14px;flex-wrap:wrap}
.article-hero .ameta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;vertical-align:-2px;margin-right:4px}
.article-cover{max-width:960px;margin:24px auto 0;padding:0 18px}
.article-cover img{width:100%;border-radius:16px;display:block}
.article-cover iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:16px;display:block}
.article-body{max-width:760px;margin:8px auto 0;padding:0 18px;font-size:16px;line-height:1.85;color:var(--ink)}
.article-body p{margin:0 0 18px}
.article-body h2,.article-body h3{font-family:var(--font-serif);color:var(--ink);margin:30px 0 12px}
.article-body img{max-width:100%;height:auto;border-radius:12px;margin:16px 0}
.article-body a{color:var(--accent);font-weight:600}
.article-body ul,.article-body ol{padding-left:22px;margin:0 0 18px}
.atags{max-width:760px;margin:26px auto 0;padding:0 18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.atags .lbl{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-right:4px}
.atags a{background:var(--raised);border:1px solid var(--line);color:var(--ink-soft);font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;transition:.15s}
.atags a:hover{border-color:var(--accent);color:var(--accent)}
.article-foot{max-width:760px;margin:30px auto 0;padding:22px 18px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}

/* FIX: anchor buttons/styled links must keep their own colour
   (base `.pf a{color:inherit}` was overriding `.btn{color:#fff}` on <a> buttons) */
.pf a.btn{color:#fff}
.pf a.btn.dark{color:#fff}
.pf a.btn.ghost{color:#fff}
.pf a.btn.out{color:var(--ink)}
.pf a.btn.out:hover{color:var(--accent)}
.pf a.seelink{color:var(--accent)}
.pf a.bmore{color:var(--accent)}
.pf a.chip{color:var(--accent-strong)}
.pf a.chip.clear{color:var(--ink-soft)}
.pf a.bcat{color:var(--accent-strong)}
.pf a.freset{color:var(--ink-soft)}

/* ---- PDP: make it custom (made to measure) ---- */
.pdp-custom{margin-top:22px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.pdp-custom.open{border-color:var(--accent)}
.pdp-custom-head{width:100%;display:flex;align-items:center;gap:11px;padding:14px 16px;background:none;border:0;cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.pdp-custom-head:hover{background:var(--accent-soft)}
.pdp-custom .pcm-ic{width:34px;height:34px;flex-shrink:0;border-radius:9px;background:var(--accent-soft);display:grid;place-items:center}
.pdp-custom .pcm-ic svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pdp-custom .pcm-t{flex:1;font-size:14px;font-weight:800;letter-spacing:.01em}
.pdp-custom .pcm-t small{font-weight:600;color:var(--ink-soft);letter-spacing:0}
.pdp-custom .pcm-chev{color:var(--ink-soft);transition:transform .2s;font-size:13px}
.pdp-custom.open .pcm-chev{transform:rotate(180deg);color:var(--accent)}
.pdp-custom-body{padding:4px 16px 16px}
.pcm-field{margin-top:12px}
.pcm-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.pcm-field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;font-size:13.5px;color:var(--ink);background:var(--raised);outline:0;resize:vertical;line-height:1.5;transition:border-color .15s,box-shadow .15s}
.pcm-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pcm-field textarea::placeholder{color:var(--ink-soft)}
.pcm-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:12px;color:var(--ink-soft);line-height:1.5}
.pcm-note svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- cart: made-to-measure summary ---- */
.ci-custom{margin:6px 0 2px;font-size:12px;color:var(--ink-soft);line-height:1.55;background:var(--accent-soft);border-radius:8px;padding:8px 10px;max-width:46ch}
.ci-custom b{color:var(--ink);font-weight:700}
.ci-custom-tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
/* side-cart drawer customized flag */
.cd-custom{display:inline-block;margin-top:3px;font-size:10.5px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:1px 7px}

/* ============================================================
   Mobile responsive fixes — topbar, trust badges, newsletter
   ============================================================ */
/* stop any stray element from causing a horizontal scroll (sticky-safe) */
html,body.pf{overflow-x:clip;max-width:100%}

/* --- utility top bar: keep it inside the screen at any width --- */
@media(max-width:760px){
  .topbar .wrap{font-size:11px;padding:0 12px;gap:10px}
  /* phone may shrink/ellipsis; the action link never gets squeezed off-screen */
  .topbar .l{min-width:0;overflow:hidden}
  .topbar .l span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .topbar .r{gap:12px;flex-shrink:0}
  .topbar .r a{white-space:nowrap}
  .topbar .r a:nth-child(n+2){display:none}   /* keep only "Track Order"; Help/Login live in the menu */
  .topbar svg{margin-right:3px}
}

/* --- trust badges: let the text wrap instead of forcing the page wider ---
   `1fr` won't shrink below min-content, so long labels blew the grid past the
   viewport; minmax(0,1fr) lets the columns shrink and the text wrap. --- */
@media(max-width:760px){
  .usp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .usp .u{min-width:0}
  .usp .u>div{min-width:0}
  .usp small{white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:430px){
  .usp{grid-template-columns:minmax(0,1fr)}   /* single column on phones */
  .usp .u{border-right:0;border-bottom:1px solid var(--line)}
  .usp .u:last-child{border-bottom:0}
}

/* --- newsletter band: fit + stack on small screens --- */
@media(max-width:600px){
  .nlband{padding:24px 16px}
  .nlband h3{font-size:20px;line-height:1.25}
  .nlform{flex-wrap:wrap;max-width:100%}
  .nlform input{flex:1 1 100%;min-width:0}
  .nlform .btn{flex:1 1 100%}
}

/* ---- OTP / activation code boxes ---- */
.otp-row{display:flex;gap:10px;justify-content:center;margin:18px 0 24px}
.otp-box{width:46px;height:54px;text-align:center;font-size:22px;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;outline:0;font-family:inherit;transition:.15s}
.otp-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
@media(max-width:400px){.otp-box{width:38px;height:48px;font-size:19px}.otp-row{gap:7px}}

/* ---- PDP make-it-custom: reference image upload ---- */
.pcm-file{display:flex;align-items:center;gap:9px;width:100%;border:1px dashed var(--line);border-radius:10px;padding:12px 13px;font-size:13px;color:var(--ink-soft);background:var(--raised);cursor:pointer;transition:border-color .15s,color .15s}
.pcm-file:hover{border-color:var(--accent);color:var(--accent)}
.pcm-file svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pcm-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcm-prev{position:relative;display:inline-block;margin-top:10px}
.pcm-prev img{width:92px;height:92px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
.pcm-prev-x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:11px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.pcm-prev-x:hover{background:var(--sale)}

/* ---- homepage: Instagram gallery ---- */
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:900px){.insta-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.insta-grid{grid-template-columns:repeat(2,1fr)}}
.insta-item{position:relative;display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--accent-soft)}
.insta-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.insta-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(74,49,96,.72);color:#fff;opacity:0;transition:opacity .2s ease;text-align:center;padding:10px}
.insta-ov svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7}
.insta-ov small{font-size:11px;line-height:1.35;opacity:.95}
.insta-item:hover img{transform:scale(1.06)}
.insta-item:hover .insta-ov{opacity:1}

/* ---- PDP: real star rating (replaces the old fake ★★★★★ text) ---- */
.stars-real{position:relative;display:inline-block;font-size:14px;line-height:1;letter-spacing:1px;vertical-align:-2px}
.stars-real .bg{color:var(--line)}
.stars-real .fg{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--star)}
.stars-real.lg{font-size:26px}
.stars-real.sm{font-size:13px}
.pdp-rate a{color:var(--accent);font-weight:600;font-size:12.5px}

/* ---- PDP: reviews tab ---- */
.rev-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.rev-avg{display:flex;align-items:center;gap:12px}
.rev-avg .n{font-family:var(--font-serif);font-size:30px;font-weight:700}
.rev-avg .c{font-size:12.5px;color:var(--ink-soft)}
.rev-form{background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:22px;display:flex;flex-direction:column;gap:12px}
/* [hidden] and .rev-form{display:flex} have equal specificity — without this,
   the class rule (loaded later) wins and the form never actually hides. */
.rev-form[hidden]{display:none}
.rev-form input[type=text],.rev-form textarea{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:11px 13px;font-size:14px;font-family:inherit;outline:0}
.rev-form input[type=text]:focus,.rev-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rev-form .hint{font-size:12px;color:var(--ink-soft)}
.rev-stars-input{display:flex;gap:4px}
.rsi{background:none;border:0;font-size:26px;line-height:1;color:var(--line);cursor:pointer;padding:0;transition:color .1s}
.rsi.on{color:var(--star)}
.rev-list{display:flex;flex-direction:column;gap:18px}
.rev-item{padding-bottom:18px;border-bottom:1px solid var(--line)}
.rev-item:last-child{border-bottom:0;padding-bottom:0}
.rev-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.rev-verified{font-size:11px;font-weight:700;color:var(--ok);background:rgba(47,125,91,.1);padding:2px 8px;border-radius:999px}
.rev-item h5{font-size:14.5px;margin-bottom:4px}
.rev-item p{font-size:13.5px;color:var(--ink);line-height:1.6}
.rev-by{font-size:12px;color:var(--ink-soft);margin-top:6px}

/* ---- homepage: recent reviews ---- */
.rev-home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.rev-home-grid{grid-template-columns:1fr}}
.rev-home-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.rev-home-card .prod{font-size:12px;color:var(--accent);font-weight:700;margin-bottom:8px;display:block}
.rev-home-card p{font-size:13.5px;color:var(--ink);line-height:1.6;margin:8px 0}
.rev-home-card .by{font-size:12px;color:var(--ink-soft);display:flex;justify-content:space-between;align-items:center;margin-top:10px}

/* ---- PDP: Buy / Rent toggle (reference: cloudcloset.in) ---- */
.pdp-buyrent{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:3px;margin-top:14px;gap:3px}
.pdp-buyrent button{border:0;background:none;font:inherit;font-weight:700;font-size:13px;padding:8px 20px;border-radius:8px;cursor:pointer;color:var(--ink-soft);transition:.15s}
.pdp-buyrent button.on{background:var(--accent);color:#fff}
.pdp-rent-info{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink-soft);background:var(--accent-soft);border-radius:10px;padding:10px 12px;margin:8px 0;line-height:1.5}
.pdp-rent-info svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:1.8;margin-top:1px}

/* ============ RENTAL HUB (/rent) ============ */
.rent-hero{background:linear-gradient(115deg,#3a2650 0%,#6f4a8e 48%,#9166ab 100%);color:#fff;padding:56px 0 60px;margin-bottom:4px}
.rent-hero-in{display:block}
.rent-hero-copy{max-width:680px}
.rent-eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.16);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.rent-hero h1{font-family:var(--font-serif);font-size:38px;line-height:1.16;font-weight:600;margin:0 0 14px}
.rent-hero p{font-size:15px;line-height:1.65;opacity:.94;margin:0 0 22px;max-width:600px}
.rent-hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.pf .rent-hero a.btn{background:#fff;color:var(--accent-strong);font-weight:800}
.pf .rent-hero a.btn.ghost2{background:transparent;border:1.5px solid rgba(255,255,255,.65);color:#fff}
.rent-hero-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;font-size:12.5px;opacity:.92}

/* why rent */
.rent-why{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rent-why-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;background:var(--raised)}
.rent-why-card .ic{font-size:24px;line-height:1;margin-bottom:10px}
.rent-why-card h4{font-size:14.5px;font-weight:700;margin:0 0 6px}
.rent-why-card p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:0}

/* how it works */
.rent-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.rent-step{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px 18px}
.rent-step .n{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13.5px;margin-bottom:12px}
.rent-step h4{font-size:14.5px;font-weight:700;margin:0 0 6px}
.rent-step p{font-size:12.5px;color:var(--ink-soft);line-height:1.65;margin:0}
.rent-step b{color:var(--ink)}

/* rental product card extras */
.pcard .disc.rentchip{background:var(--accent)}
.rent-card-note{font-size:11.5px;color:var(--ink-soft);margin-top:4px;line-height:1.45}

/* what's included */
.rent-incl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--raised)}
.rent-incl>div{padding:18px 16px;border-right:1px solid var(--line)}
.rent-incl>div:last-child{border-right:0}
.rent-incl b{display:block;font-size:13.5px;margin-bottom:5px}
.rent-incl span{font-size:12px;color:var(--ink-soft);line-height:1.55}

/* fine print */
.rent-terms{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rent-term{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0;padding:14px 16px}
.rent-term b{display:block;font-size:13.5px;margin-bottom:5px}
.rent-term p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:0}

/* FAQ */
.rent-faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rent-faq details{border-bottom:1px solid var(--line)}
.rent-faq details:last-child{border-bottom:0}
.rent-faq summary{cursor:pointer;padding:15px 18px;font-size:13.5px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.rent-faq summary::-webkit-details-marker{display:none}
.rent-faq summary::after{content:'+';font-size:19px;font-weight:400;color:var(--accent);flex-shrink:0;line-height:1}
.rent-faq details[open] summary::after{content:'−'}
.rent-faq details[open] summary{color:var(--accent)}
.rent-faq p{padding:0 18px 16px;margin:0;font-size:13px;color:var(--ink-soft);line-height:1.7}
.rent-cta p{max-width:540px;margin-left:auto;margin-right:auto}

/* rent badge on regular category/search grids */
.pcard .rent-flag{display:inline-block;font-size:10.5px;font-weight:800;color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:2px 6px;margin-top:5px}

@media(max-width:980px){
  .rent-why,.rent-steps{grid-template-columns:1fr 1fr}
  .rent-incl{grid-template-columns:1fr 1fr}
  .rent-incl>div:nth-child(2){border-right:0}
  .rent-incl>div:nth-child(1),.rent-incl>div:nth-child(2){border-bottom:1px solid var(--line)}
  .rent-terms{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .rent-hero{padding:40px 0 44px}
  .rent-hero h1{font-size:27px}
  .rent-hero p{font-size:14px}
  .rent-hero-trust{gap:10px;font-size:11.5px}
  .rent-why,.rent-steps,.rent-terms{grid-template-columns:1fr}
  .rent-incl{grid-template-columns:1fr}
  .rent-incl>div{border-right:0;border-bottom:1px solid var(--line)}
  .rent-incl>div:last-child{border-bottom:0}
}

/* PDP rental detail box (replaces the single-line .pdp-rent-info notice) */
.pdp-rent-box{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:10px 0 4px;background:var(--accent-soft)}
.pdp-rent-box[hidden]{display:none}
.pdp-rent-head b{display:block;font-size:14px}
.pdp-rent-head span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.pdp-rent-lines{margin:12px 0 10px;border-top:1px solid rgba(145,102,171,.22);padding-top:10px}
.pdp-rent-lines>div{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:3px 0;color:var(--ink-soft)}
.pdp-rent-lines>div b{color:var(--ink);font-weight:700}
.pdp-rent-lines .tot{border-top:1px solid rgba(145,102,171,.22);margin-top:6px;padding-top:8px;font-weight:700;color:var(--ink)}
.pdp-rent-steps{list-style:none;padding:0;margin:0 0 10px}
.pdp-rent-steps li{position:relative;padding-left:19px;font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:5px}
.pdp-rent-steps li::before{content:'✓';position:absolute;left:0;top:0;color:var(--ok);font-weight:800}
.pdp-rent-link{font-size:12.5px;font-weight:700;color:var(--accent)}

/* homepage rental band */
.rent-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:26px;align-items:center;background:linear-gradient(115deg,#3a2650,#6f4a8e 60%,#9166ab);border-radius:16px;padding:28px 30px;color:#fff}
.rent-band .rent-eyebrow{background:rgba(255,255,255,.18)}
.rent-band h3{font-family:var(--font-serif);font-size:25px;margin:12px 0 8px;line-height:1.2}
.rent-band p{font-size:13.5px;opacity:.93;line-height:1.65;margin:0 0 16px}
.pf .rent-band a.btn{background:#fff;color:var(--accent-strong);font-weight:800}
.rent-band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rent-band-card{background:rgba(255,255,255,.1);border-radius:11px;padding:8px;display:block;transition:.16s}
.rent-band-card:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.rent-band-card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;display:block;background:rgba(255,255,255,.15)}
.rent-band-card .t{display:block;font-size:11.5px;line-height:1.35;margin-top:7px;opacity:.95}
.rent-band-card .p{display:block;font-size:13px;font-weight:800;margin-top:3px}
.rent-band-card .p small{font-weight:500;opacity:.8;font-size:10.5px}
@media(max-width:900px){
  .rent-band{grid-template-columns:1fr;padding:24px 20px}
  .rent-band-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:560px){
  .rent-band h3{font-size:21px}
  .rent-band-grid{grid-template-columns:1fr 1fr}
}