/* ══════════════════════════════════════════
AAKAARKALA v1.0 · WordPress Theme CSS
Pink City palette · Tahoma base
══════════════════════════════════════════ */
:root {
--pink:#E8175D; --pink-d:#B5104A; --pink-s:#FDE8EF;
--gold:#F5A623; --gold-s:#FEF3D9;
--teal:#0D9488; --teal-s:#D0FAF8;
--violet:#7C3AED; --violet-s:#EDE9FE;
--ink:#18181B; --char:#3F3F46; --muted:#71717A;
--line:#E4E4E7; --bg:#FAFAFA; --white:#fff;
--thread:linear-gradient(90deg,#E8175D 0%,#F5A623 33%,#0D9488 66%,#7C3AED 100%);
--dark:linear-gradient(135deg,#18081A 0%,#3D1550 55%,#18181B 100%);
--r:14px; --r2:22px;
--sh:0 4px 20px rgba(0,0,0,.08);
--shl:0 12px 48px rgba(0,0,0,.14);
--ease:cubic-bezier(.23,1,.32,1);
--nh:56px; --tbh:0px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
html{font-size:16.5px}
body{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;color:var(--ink);overflow-x:hidden;line-height:1.6;
background:
radial-gradient(900px 600px at 15% -5%, rgba(232,23,93,.085), transparent 55%),
radial-gradient(800px 560px at 100% 20%, rgba(245,166,35,.075), transparent 55%),
radial-gradient(760px 620px at -5% 70%, rgba(124,58,237,.06), transparent 55%),
radial-gradient(900px 640px at 90% 105%, rgba(13,148,136,.065), transparent 55%),
linear-gradient(165deg,#FFFCF9 0%,#FEF5F8 30%,#F9F5FE 60%,#F4FAF9 100%);
background-attachment:fixed}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:.88rem}
::selection{background:var(--pink);color:#fff}
.playfair{font-family:'Georgia Pro',Georgia,'Times New Roman',serif}
/* ── LAYOUT ─────────────────────────────── */
.wrap{max-width:1320px;margin:0 auto;padding:0 2rem}
/* padding-top used to also reserve var(--nh) for the navbar, written for
when #nav was position:fixed (out of flow). It's now position:sticky
(set inline in header.php) — sticky already reserves its own height in
normal flow, so adding --nh here was double-counting it, padding every
page's content down by an extra ~48-56px on top of the real nav. Only
--tbh (the topbar, which IS still position:fixed) still needs clearing. */
.ak-main{padding-top:var(--tbh);min-height:70vh}
/* ── NAVBAR ─────────────────────────────── */
#nav{
position:fixed;top:var(--tbh);left:0;right:0;z-index:1000;
background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
border-bottom:1.5px solid var(--line);
transition:box-shadow .3s,transform .4s var(--ease);
}
#nav.scrolled{box-shadow:0 4px 28px rgba(0,0,0,.09)}
#nav.up{transform:translateY(-100%)}
.nav-inner{
max-width:1320px;margin:0 auto;padding:0 2rem;
height:var(--nh);display:flex;align-items:center;gap:1.2rem;
}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;text-decoration:none}
.bmark{
width:42px;height:42px;border-radius:11px;
background:var(--thread);display:flex;align-items:center;justify-content:center;
font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;color:#fff;font-size:1.2rem;
box-shadow:0 4px 14px rgba(232,23,93,.28);transition:transform .35s var(--ease);flex-shrink:0;
}
.brand:hover .bmark{transform:rotate(-7deg) scale(1.07)}
.btxt{line-height:1.15}
.bname{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:1.45rem;color:var(--ink);letter-spacing:-.3px}
.bname span{color:var(--pink)}
.btag{font-size:.72rem;font-weight:700;color:var(--pink);letter-spacing:1.5px;text-transform:uppercase;opacity:.85;
animation:kkZoom 1.1s cubic-bezier(.23,1,.32,1) .35s both}
@keyframes kkZoom{0%{transform:scale(.7);opacity:0;letter-spacing:8px}60%{transform:scale(1.1);opacity:1}100%{transform:scale(1);letter-spacing:2.5px;opacity:.9}}
.nav-search{
flex:1;max-width:520px;min-width:160px;
display:flex;align-items:center;background:#F4F4F8;
border-radius:50px;border:1.5px solid transparent;overflow:hidden;
transition:border-color .25s,box-shadow .25s,background .25s;
}
.nav-search:focus-within{background:#fff;border-color:var(--pink);box-shadow:0 0 0 3px rgba(232,23,93,.1)}
.nav-search input{flex:1;border:none;outline:none;background:none;font-size:.84rem;color:var(--ink);padding:10px 0 10px 17px}
.nav-search input::placeholder{color:var(--muted)}
.nav-search button{width:42px;height:42px;margin:3px;border-radius:50%;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.88rem;flex-shrink:0;transition:.2s}
.nav-search button:hover{background:var(--pink-d)}
.nav-links{display:flex;align-items:center;gap:.15rem;flex-shrink:0}
.nl{font-size:.8rem;font-weight:600;color:var(--char);padding:8px 12px;border-radius:8px;transition:.2s;white-space:nowrap}
.nl:hover,.nl.on{color:var(--pink);background:var(--pink-s)}
.nav-actions{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
.nico{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.95rem;color:var(--char);transition:.2s;position:relative;cursor:pointer}
.nico:hover{background:var(--pink-s);color:var(--pink)}
.nico-search-toggle{display:none}
.cbadge{position:absolute;top:-3px;right:-3px;background:var(--pink);color:#fff;font-size:.52rem;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700;border:2px solid #fff;padding:0 2px}
.btn-si{display:flex;align-items:center;gap:7px;padding:8px 17px;border-radius:50px;font-size:.78rem;font-weight:700;transition:.25s var(--ease);background:var(--ink);color:#fff}
.btn-si:hover{background:var(--pink);box-shadow:0 4px 14px rgba(232,23,93,.3)}
.ham{display:none;flex-direction:column;gap:5px;width:32px;padding:5px 2px}
.ham span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.nms-inner{display:flex;align-items:center;gap:.6rem;padding:.6rem 1.4rem}
.nms-inner i{color:var(--muted)}
.nms-inner input{flex:1;border:none;outline:none;background:none;font-size:.88rem;color:var(--ink)}
/* ── MOBILE PANEL ───────────────────────── */
.mpanel{position:fixed;top:0;right:0;bottom:0;width:320px;max-width:90vw;background:#fff;z-index:2001;transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;overflow-y:auto;box-shadow:var(--shl)}
.mpanel.open{transform:none}
.mp-bd{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.3s}
.mp-bd.open{opacity:1;pointer-events:auto}
.mp-head{display:flex;align-items:center;justify-content:flex-end;padding:1.1rem 1.2rem;border-bottom:1px solid var(--line)}
.mp-close{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;
background:var(--bg);font-size:1rem;color:var(--muted);transition:.2s;cursor:pointer}
.mp-close:hover{color:var(--pink);background:var(--pink-s);transform:rotate(90deg)}
.mp-search{padding:.7rem 1.4rem;border-bottom:1px solid var(--line)}
.mp-si{display:flex;align-items:center;background:var(--bg);border-radius:50px;padding:0 13px;gap:7px}
.mp-si i{color:var(--muted);font-size:.85rem}
.mp-si input{flex:1;border:none;outline:none;background:none;padding:10px 0;font-size:.84rem;color:var(--ink)}
.mp-auth{padding:1rem 1.4rem;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:.6rem}
.mp-nav{display:flex;flex-direction:column}
.mp-nav a{display:flex;align-items:center;gap:10px;padding:12px 1.4rem;font-size:.9rem;font-weight:700;color:var(--char);border-bottom:1px solid var(--line);transition:.2s}
.mp-nav a:hover{color:var(--pink);background:var(--pink-s)}
/* Home gets its own bold treatment (gradient text + coloured icon) since
it's the one link that isn't shopping — everything else here is either
a category or a secondary/"elsewhere" link. */
.mp-nav-c1{font-size:1rem!important;color:var(--pink)!important}
.mp-nav-c1 i{color:var(--pink)}
/* Secondary links (Bulk Order / About / Contact) sit at the very end,
each with its own accent icon so the whole menu doesn't read as one
long grey list. */
.mp-nav-secondary a:nth-child(1) i{color:var(--royal,var(--violet))}
.mp-nav-secondary a:nth-child(2) i{color:var(--teal)}
.mp-nav-secondary a:nth-child(3) i{color:var(--saffron-d,var(--saffron))}
.mp-cats{padding:1rem 1.4rem;border-bottom:1px solid var(--line)}
.mp-ct{font-size:.63rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.mp-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.mp-chip{padding:6px 12px;border-radius:50px;font-size:.73rem;font-weight:700;border:1.5px solid var(--line);color:var(--char);cursor:pointer;transition:.2s;display:inline-block}
.mp-chip:hover{border-color:var(--pink);color:var(--pink)}
/* Mobile menu category accordion — one row per parent, tap the chevron
to reveal its children indented underneath, instead of every category
at every level spilling into one flat wall of pills. Each parent
carries its own accent colour (--acc, same map the desktop mega-menu
and filter sidebar use) via a small coloured icon badge, so the list
reads as distinct categories rather than one uniform grey stack. */
.mp-acc-item{border-bottom:1px solid var(--line)}
.mp-acc-item:last-child{border-bottom:none}
.mp-acc-head{display:flex;align-items:center;justify-content:space-between}
.mp-acc-parent{flex:1;display:flex;align-items:center;gap:10px;padding:11px 0;font-size:.85rem;font-weight:700;color:var(--ink);transition:.2s}
.mp-acc-parent:hover{color:var(--acc,var(--pink))}
.mp-acc-ico{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
background:color-mix(in srgb,var(--acc,var(--pink)) 14%,#fff);color:var(--acc,var(--pink));font-size:.8rem}
.mp-acc-toggle{flex-shrink:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
border:none;background:none;color:var(--muted);font-size:.75rem;cursor:pointer;transition:transform .25s var(--ease),color .2s}
.mp-acc-toggle:hover{color:var(--acc,var(--pink))}
.mp-acc-toggle[aria-expanded="true"]{transform:rotate(180deg);color:var(--acc,var(--pink))}
/* IMPORTANT: this must stay scoped to :not([hidden]) — an unconditional
`display:flex` here is AUTHOR css, which overrides the UA stylesheet's
[hidden]{display:none} regardless of specificity (author origin always
wins over user-agent origin in the cascade). Without the guard, every
category showed its children expanded on load with no way to collapse
them — the toggle only ever flips the "hidden" attribute, and this
rule was silently cancelling what that attribute was supposed to do. */
.mp-acc-body:not([hidden]){display:flex;flex-direction:column;padding:0 0 .6rem 1rem;border-left:2px solid var(--acc,var(--pink-s))}
.mp-acc-child{padding:8px 0 8px 10px;font-size:.78rem;font-weight:600;color:var(--char);transition:.2s}
.mp-acc-child:hover{color:var(--acc,var(--pink))}
.mp-foot{padding:1rem 1.4rem;margin-top:auto}
.mp-currow{display:flex;flex-wrap:wrap;gap:.4rem}
.mp-cur{padding:5px 11px;border-radius:20px;font-size:.7rem;font-weight:700;border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:.2s}
.mp-cur.on{background:var(--pink);color:#fff;border-color:var(--pink)}
/* ── HERO ───────────────────────────────── */
.hero{padding-top:calc(var(--tbh) + var(--nh));min-height:100vh;display:flex;flex-direction:column;overflow:hidden;position:relative;
background:
radial-gradient(560px 380px at 12% 18%, rgba(232,23,93,.10), transparent 62%),
radial-gradient(520px 360px at 88% 14%, rgba(245,166,35,.12), transparent 62%),
radial-gradient(560px 400px at 82% 84%, rgba(124,58,237,.09), transparent 62%),
radial-gradient(480px 340px at 16% 88%, rgba(13,148,136,.10), transparent 62%),
linear-gradient(160deg,#FFFDFB, #FFF5F8 55%, #FBF6FF)}
.hero-video-bg{position:absolute;inset:0;z-index:0;overflow:hidden;display:none}
.hero-video-bg video{width:100%;height:100%;object-fit:cover}
.hero-video-bg::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.82)}
.hero.has-video .hero-video-bg{display:block}
.hero.has-video{background:none}
.hero-brand-banner{text-align:center;padding:4rem 2rem 2.5rem;position:relative;z-index:2}
.hero-brand-mark{display:inline-flex;align-items:center;gap:16px;background:rgba(255,255,255,.93);border:1.5px solid rgba(232,23,93,.14);border-radius:var(--r2);padding:1.2rem 2.6rem 1.2rem 1.8rem;box-shadow:0 8px 40px rgba(232,23,93,.1);margin-bottom:1.6rem;backdrop-filter:blur(8px)}
.hbmark{width:64px;height:64px;border-radius:16px;background:var(--thread);display:flex;align-items:center;justify-content:center;font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;color:#fff;font-size:2rem;box-shadow:0 8px 28px rgba(232,23,93,.35);flex-shrink:0}
.hero-brand-name{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:clamp(2.8rem,7vw,5.2rem);line-height:1;color:var(--ink);letter-spacing:-.5px}
.hero-brand-name span{color:var(--pink)}
.hero-brand-tag{font-size:.78rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--pink);margin-top:.4rem;opacity:.9}
.hero-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:2rem}
.hero-cat-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:50px;font-size:.78rem;font-weight:700;border:2px solid var(--line);color:var(--char);background:var(--white);transition:all .25s var(--ease);cursor:pointer}
.hero-cat-chip:hover,.hero-cat-chip.on{color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.13)}
.hero-cat-chip[data-c=all]:hover,.hero-cat-chip[data-c=all].on{background:var(--ink)}
.hero-cat-chip:not([data-c=all]){--cc:var(--pink)}
.hero-cat-chip:not([data-c=all]):hover,.hero-cat-chip:not([data-c=all]).on{background:var(--cc)}
.hero-cat-chip i{font-size:.75rem}
.hero-search-row{display:flex;justify-content:center;margin-bottom:0}
.hero-search{display:flex;align-items:center;background:#fff;border-radius:50px;border:2px solid var(--line);box-shadow:0 4px 24px rgba(0,0,0,.07);overflow:hidden;max-width:580px;width:100%;transition:border-color .25s,box-shadow .25s}
.hero-search:focus-within{border-color:var(--pink);box-shadow:0 4px 30px rgba(232,23,93,.15)}
.hero-search input{flex:1;border:none;outline:none;background:none;font-size:.95rem;color:var(--ink);padding:14px 0 14px 22px}
.hero-search input::placeholder{color:var(--muted)}
.hero-search button{margin:5px;padding:10px 24px;border-radius:50px;background:var(--pink);color:#fff;font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:8px;transition:.2s;flex-shrink:0;cursor:pointer}
.hero-search button:hover{background:var(--pink-d)}
/* ── SHOP SECTION ───────────────────────── */
.shop-section{padding:0 0 5rem;background:var(--bg)}
.shop-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:2.4rem 0 1.8rem}
.shop-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--pink);margin-bottom:.3rem}
.shop-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:clamp(1.5rem,2.5vw,2.1rem);color:var(--ink)}
.shop-title em{color:var(--pink);font-style:italic}
.toolbar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.sort-sel{padding:9px 14px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-size:.8rem;color:var(--char);font-weight:600;outline:none;cursor:pointer;transition:.2s}
.sort-sel:focus{border-color:var(--pink)}
.filter-btn-top{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-size:.8rem;font-weight:600;color:var(--char);transition:.2s}
.filter-btn-top:hover,.filter-btn-top.on{border-color:var(--pink);color:var(--pink);background:var(--pink-s)}
.result-count{font-size:.8rem;color:var(--muted);font-weight:600}
.shop-layout{display:flex;gap:2rem;align-items:flex-start}
/* ── FILTER SIDEBAR ─────────────────────── */
.filter-sidebar{width:240px;flex-shrink:0;background:#fff;border-radius:var(--r);border:1.5px solid var(--line);padding:1.4rem;position:sticky;top:calc(var(--tbh) + var(--nh) + 1.5rem);max-height:calc(100vh - var(--tbh) - var(--nh) - 3rem);overflow-y:auto}
.filter-sidebar::-webkit-scrollbar{width:4px}
.filter-sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.fs-title{font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.fg{margin-bottom:1.4rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.fg:last-child{border-bottom:none;margin-bottom:0}
.fg h4{font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:.7rem}
.fg-opt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer;transition:.15s;font-size:.82rem;color:var(--char)}
.fg-opt:hover,.fg-opt.on{background:var(--pink-s);color:var(--pink)}
.fg-opt input[type=checkbox]{accent-color:var(--pink);width:14px;height:14px}
.price-inputs{display:flex;align-items:center;gap:.5rem}
.price-inputs input{flex:1;width:0;padding:8px 10px;border-radius:8px;border:1.5px solid var(--line);font-size:.82rem;color:var(--ink);outline:none;transition:.2s}
.price-inputs input:focus{border-color:var(--pink)}
.price-inputs span{color:var(--muted);font-size:.9rem;flex-shrink:0}
.clear-all{width:100%;padding:9px;border-radius:8px;border:1.5px solid var(--line);font-size:.76rem;font-weight:700;color:var(--muted);transition:.2s;cursor:pointer}
.clear-all:hover{border-color:var(--pink);color:var(--pink)}
/* ── PRODUCT GRID ───────────────────────── */
.products-col{flex:1;min-width:0}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.3rem}
.pcard{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:transform .4s var(--ease),box-shadow .4s;cursor:pointer;position:relative}
.pcard:hover{transform:translateY(-7px);box-shadow:var(--shl)}
.pcard-img{aspect-ratio:4/5;overflow:hidden;background:var(--line);position:relative}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.07)}
.pbadge{position:absolute;top:11px;left:11px;z-index:2;padding:4px 10px;border-radius:20px;font-size:.6rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.b-new{background:var(--pink);color:#fff}
.b-lim{background:var(--gold);color:var(--ink)}
.b-best{background:var(--teal);color:#fff}
.pwish{position:absolute;top:11px;right:11px;z-index:2;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--muted);transition:.25s;cursor:pointer;border:none}
.pwish:hover,.pwish.on{color:var(--pink);background:#fff;box-shadow:0 2px 10px rgba(232,23,93,.2)}
.pcard-info{padding:1rem}
.pcat{font-size:.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--pink);margin-bottom:.2rem}
.pname{font-size:.97rem;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:.7rem}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.pprices{display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap}
.pnow{font-size:1rem;font-weight:700;color:var(--ink)}
.pwas{font-size:.76rem;color:var(--muted);text-decoration:line-through}
.poff{font-size:.65rem;font-weight:700;color:var(--teal);background:var(--teal-s);padding:2px 7px;border-radius:6px}
.padd{display:flex;align-items:center;gap:5px;padding:8px 12px;border-radius:50px;font-size:.72rem;font-weight:700;background:var(--ink);color:#fff;transition:.22s;flex-shrink:0;border:none;cursor:pointer}
.padd:hover{background:var(--pink)}
.empty-grid{text-align:center;padding:5rem 2rem;color:var(--muted);grid-column:1/-1}
.empty-grid i{font-size:3rem;opacity:.2;display:block;margin-bottom:1rem}
/* ── PRODUCT DRAWER ─────────────────────── */
.pdrawer-bd{position:fixed;inset:0;z-index:2100;background:rgba(10,5,15,.55);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .35s}
.pdrawer-bd.open{opacity:1;pointer-events:auto}
.pdrawer{position:fixed;top:0;right:0;bottom:0;z-index:2101;width:min(680px,100vw);background:#fff;transform:translateX(100%);transition:transform .42s cubic-bezier(.23,1,.32,1);display:flex;flex-direction:column;box-shadow:-12px 0 60px rgba(0,0,0,.18)}
.pdrawer.open{transform:none}
.pdrawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.6rem;border-bottom:1px solid var(--line);flex-shrink:0}
.pdrawer-crumb{font-size:.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--pink)}
.pd-view-full{font-size:.72rem;font-weight:700;color:var(--muted);transition:.2s}
.pd-view-full:hover{color:var(--pink)}
.pdrawer-close{width:36px;height:36px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--muted);transition:.2s;cursor:pointer;border:none}
.pdrawer-close:hover{background:var(--pink-s);color:var(--pink)}
.pdrawer-body{flex:1;overflow-y:auto;padding:0}
.pdrawer-body::-webkit-scrollbar{width:4px}
.pdrawer-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.pd-carousel{position:relative;background:#f7f2f5;overflow:hidden}
.pd-carousel-track{display:flex;transition:transform .45s cubic-bezier(.23,1,.32,1)}
.pd-slide{flex:0 0 100%;aspect-ratio:4/3;overflow:hidden}
.pd-slide img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pd-slide img:hover{transform:scale(1.04)}
.pd-arr{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--ink);cursor:pointer;transition:.22s;z-index:5;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.pd-arr:hover{background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.18);color:var(--pink)}
.pd-arr.prev{left:12px}
.pd-arr.next{right:12px}
.pd-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.pd-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);border:1.5px solid rgba(255,255,255,.8);cursor:pointer;transition:.22s}
.pd-dot.on{background:#fff;transform:scale(1.25)}
.pd-skeleton{padding:1.6rem}
.skel-line{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skel 1.5s infinite;border-radius:6px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.pd-content{padding:1.6rem}
.pd-badge-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.pd-cat{font-size:.65rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--pink)}
.pd-badge{padding:3px 10px;border-radius:20px;font-size:.6rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.pd-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-size:clamp(1.4rem,3.5vw,2rem);font-weight:900;color:var(--ink);line-height:1.2;margin-bottom:1rem}
.pd-prices{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1.2rem}
.pd-now{font-size:1.7rem;font-weight:700;color:var(--ink)}
.pd-was{font-size:.95rem;color:var(--muted);text-decoration:line-through}
.pd-off{background:var(--teal-s);color:var(--teal);padding:4px 11px;border-radius:7px;font-size:.72rem;font-weight:700}
.pd-desc{font-size:.88rem;color:var(--char);line-height:1.8;margin-bottom:1.4rem;border-bottom:1px solid var(--line);padding-bottom:1.4rem}
.pd-specs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1.6rem}
.pd-spec{background:var(--bg);border-radius:10px;padding:.65rem .85rem}
.pd-spec-l{font-size:.58rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.pd-spec-v{font-size:.84rem;font-weight:600;color:var(--ink);margin-top:.15rem}
.pd-actions{padding:1.1rem 1.6rem;border-top:1px solid var(--line);display:flex;gap:.75rem;flex-shrink:0;background:#fff}
.btn-pd-main{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border-radius:50px;font-size:.9rem;font-weight:700;background:var(--pink);color:#fff;transition:.25s;cursor:pointer;border:none}
.btn-pd-main:hover{background:var(--pink-d);box-shadow:0 6px 20px rgba(232,23,93,.3)}
.btn-pd-wish{width:50px;height:50px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--muted);transition:.22s;flex-shrink:0;cursor:pointer;background:#fff}
.btn-pd-wish:hover,.btn-pd-wish.on{border-color:var(--pink);color:var(--pink);background:var(--pink-s)}
/* ── SINGLE PRODUCT PAGE ────────────────── */
.single-product-main .wrap{padding-top:.8rem;padding-bottom:1.8rem}
.ak-breadcrumb{font-size:.76rem;color:var(--muted);margin-bottom:2rem}
.ak-breadcrumb a{color:var(--muted);transition:.15s}
.ak-breadcrumb a:hover{color:var(--pink)}
/* Gallery column gets more width than a plain 1fr/1fr split — product
photography here is landscape-oriented (wide, short), so a square-ish
half column would either crop it hard or render it small; 3fr/2fr gives
the photo room to breathe at a size that still balances against the
info column's text. */
.sp-grid{display:grid;grid-template-columns:3fr 2fr;gap:2.4rem;margin-bottom:1.4rem}
/* Grid items default to min-width:auto, so a non-wrapping scroll strip
inside (the flower/colour rails) can force its whole column — and the
single 1fr track once collapsed on mobile — wider than the viewport.
min-width:0 lets the item shrink below its content's natural width, as
intended: the rail itself still scrolls, it just no longer drags the
page into horizontal overflow. */
.sp-gallery-col,.sp-info{min-width:0}
.sp-carousel{position:relative;border-radius:var(--r2);overflow:hidden;background:#f7f2f5}
.sp-track{display:flex;transition:transform .45s var(--ease)}
.sp-slide{flex:0 0 100%;aspect-ratio:16/10}
.sp-img{width:100%;height:100%;object-fit:cover}
/* Hover-to-zoom: JS sets transform-origin to track the cursor, this just
supplies the scale + a quick, non-bouncy transition so the zoomed
point snaps to wherever the pointer moves next. .sp-carousel's own
overflow:hidden keeps the enlarged image from spilling past the frame. */
.sp-img.sp-zooming{transform:scale(1.9);transition:transform .06s linear;cursor:zoom-in}
@media(hover:none){.sp-img.sp-zooming{transform:none}}
.sp-arr{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--ink);cursor:pointer;transition:.22s;z-index:5;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.sp-arr:hover{background:#fff;color:var(--pink)}
.sp-prev{left:14px}
.sp-next{right:14px}
.sp-thumbs{display:flex;gap:.6rem;margin-top:.8rem;overflow-x:auto;padding-bottom:.2rem}
.sp-thumbs::-webkit-scrollbar{height:3px}
.sp-thumbs::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
.sp-thumb{width:72px;height:72px;border-radius:9px;overflow:hidden;flex-shrink:0;border:2px solid transparent;cursor:pointer;transition:.2s}
.sp-thumb.on,.sp-thumb:hover{border-color:var(--pink)}
.sp-thumb img{width:100%;height:100%;object-fit:cover}
.sp-dots{display:none;justify-content:center;gap:6px;margin-top:.8rem}
.sp-dot{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:.2s;border:none}
.sp-dot.on{background:var(--pink)}
.sp-info{padding:.4rem 0}
.sp-cat-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.sp-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.2;color:var(--ink);margin-bottom:0}
/* Title, price and wishlist all read as one line — a buyer looks at the
name and the price together, so keeping them level (instead of price
stacked on its own row, or worse, buried down by the buy buttons)
reads as a tighter, more considered layout. Wraps gracefully if the
title is long or the column narrow. */
.sp-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;margin-bottom:1rem}
.sp-title-row .sp-title{flex:1 1 auto;min-width:160px}
.sp-price-inline{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.sp-title-row .btn-pd-wish{width:38px;height:38px;font-size:.85rem;flex-shrink:0}
.sp-title-row-note{font-size:.7rem;color:var(--muted);font-weight:500;flex-basis:100%}
.sp-variations{margin:.9rem 0 0}
.sp-var-label{font-size:.73rem;font-weight:700;color:var(--char);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}
.sp-var-swatches{display:flex;flex-wrap:wrap;gap:.6rem}
.sp-var-swatch{padding:9px 18px;border-radius:50px;border:1.5px solid var(--line);background:#fff;
font-size:.82rem;font-weight:700;color:var(--char);cursor:pointer;transition:.2s}
.sp-var-swatch:hover{border-color:var(--pink);color:var(--pink)}
.sp-var-swatch.on{border-color:transparent;background:linear-gradient(90deg,var(--pink),var(--violet));color:#fff;box-shadow:0 8px 20px rgba(232,23,93,.28)}
/* Photo-gallery style swatches (e.g. pick-a-flower-type) — sits below the
product photo, all options in a single non-wrapping row. Each thumbnail
is flex:1 with no min-width floor, so the row always shrinks to fit
exactly within the gallery column's width — never wraps to a second
line, never needs horizontal scroll, whether there are 2 options or 14.
The label is hidden at this size (title="" attribute covers a tooltip;
the picked option's name already shows via the price-area swap on
selection) so the row stays one clean strip instead of getting tall. */
.sp-variations-gallery .sp-var-swatches{flex-wrap:nowrap;gap:.4rem;width:100%}
.sp-var-swatch-photo{position:relative;flex:1 1 0;min-width:0;max-width:64px;aspect-ratio:1;padding:3px;
border-radius:12px;display:flex;align-items:center;justify-content:center}
.sp-var-swatch-photo img{width:100%;height:100%;object-fit:contain;border-radius:9px;background:var(--bg)}
.sp-var-swatch-photo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* .sp-var-swatch-photo also carries the plain .sp-var-swatch class, whose
own .on state paints a solid gradient fill + white text — fine for text
pills, but here it fought with the flower-name label's own dark text
colour and made the name unreadable when selected. Cancel that fill so
the card itself stays plain and legible. A boxed ring around the whole
card (border + glow) kept reading as clipped/hard-cornered regardless
of how much clearance it was given, so selection is marked with a
simple glowing bar under the card instead — no box, nothing that can
look "cut off" against a neighbour or a scroll edge. */
.sp-var-swatch-photo.on{background:#fff;border-color:var(--line)}
/* The glow-behind-the-image treatment ended up reading as a dirty smudge
sitting over the flower art rather than a highlight, so selection is
marked with just one thing: a maroon accent underneath the card. A
thin flat bar looked cheap on its own, so it's built from three
layered strokes of different widths/opacity — reads like a brush
stroke or an ink underline rather than a plain border */
.woocommerce-EditAccountForm fieldset{border:none;background:var(--bg);border-radius:var(--r2);padding:1.4rem 1.5rem 1.2rem;margin:1.6rem 0 1.4rem}
.woocommerce-EditAccountForm fieldset legend{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:1.05rem;color:var(--ink);padding:0 .5rem;margin-left:-.5rem}
.woocommerce-EditAccountForm fieldset .form-row:last-child{margin-bottom:0}
.woocommerce-EditAccountForm .woocommerce-Button.button{max-width:260px;margin-top:.4rem}
@media(max-width:600px){.woocommerce-EditAccountForm .woocommerce-Button.button{max-width:none}}
.woocommerce-notices-wrapper .woocommerce-message,.woocommerce-notices-wrapper .woocommerce-error{border-radius:10px;margin-bottom:1rem;padding:.8rem 1.1rem;font-size:.84rem}
.woocommerce-notices-wrapper .woocommerce-message{background:var(--teal-s);border:1px solid var(--teal);color:var(--teal)}
.woocommerce-notices-wrapper .woocommerce-error{background:var(--pink-s);border:1px solid var(--pink);color:var(--pink-d)}
.woocommerce-payment-methods{list-style:none}
.woocommerce-payment-methods li{padding:.7rem;border:1.5px solid var(--line);border-radius:10px;margin-bottom:.5rem;cursor:pointer;transition:.15s}
.woocommerce-payment-methods li:hover{border-color:var(--pink)}
.woocommerce-MyAccount-orders .woocommerce-orders-table{width:100%;border-collapse:collapse;font-size:.84rem}
.woocommerce-MyAccount-orders .woocommerce-orders-table th{text-align:left;padding:.7rem .9rem;font-size:.68rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line)}
.woocommerce-MyAccount-orders .woocommerce-orders-table td{padding:.75rem .9rem;border-bottom:1px solid var(--line)}
.woocommerce-orders-table__cell-order-actions a{background:var(--pink);color:#fff;padding:5px 12px;border-radius:20px;font-size:.72rem;font-weight:700}
/* ── RESPONSIVE ─────────────────────────── */
@media(max-width:1060px){
.filter-sidebar{display:none}
.filter-sidebar.open{display:block;position:fixed;top:0;right:0;bottom:0;border-radius:20px 0 0 20px;z-index:1500;max-height:100vh;width:280px;animation:sfIn .35s var(--ease)}
@keyframes sfIn{from{transform:translateX(100%)}to{transform:none}}
.sf-backdrop{position:fixed;inset:0;z-index:1499;background:rgba(0,0,0,.45);display:none}
.sf-backdrop.open{display:block}
.shop-layout{display:block}
.sp-grid{grid-template-columns:1fr;gap:2rem}
.account-grid{grid-template-columns:1fr}
.account-sidebar{position:static}
.cart-grid,.checkout-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
.nav-links{display:none}
.btn-si{display:none}
.ham{display:flex}
.nav-search{display:none}
.nico-search-toggle{display:flex}
.sp-thumbs{display:none}
.sp-dots{display:flex}
}
@media(max-width:640px){
:root{--nh:48px;--tbh:0px}
.hero-brand-mark{padding:.85rem 1.2rem;gap:12px;border-radius:16px;flex-direction:column;align-items:center;text-align:center}
.hbmark{width:52px;height:52px;font-size:1.55rem}
.hero-brand-name{font-size:clamp(2rem,9vw,3.5rem)}
.pgrid{grid-template-columns:repeat(2,1fr);gap:.8rem}
.frow{grid-template-columns:1fr}
.hero-cats{gap:.45rem}
.hero-cat-chip{padding:8px 14px;font-size:.74rem}
/* Two tidy columns (Explore/Help paired, Reach Us spanning full width
below since its lines — email address especially — need the room)
instead of one long stacked column; the brand block spans full width
up top so the logo reads at its normal size, not squeezed into a
column. */
.footer-top{padding-top:3.4rem}
.footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem 1.2rem}
.footer-brand-col{grid-column:1/-1}
.footer-col:last-child{grid-column:1/-1}
.footer-bottom-inner{flex-direction:column;text-align:center}
/* The DM-us pulse button is fixed bottom-right — on mobile the footer's
own bottom row sits right underneath it, so the last line of text
needs room to clear the button instead of running behind it. */
.footer-bottom{padding-bottom:4.5rem}
.pdrawer{width:100vw}
.pd-specs{grid-template-columns:1fr 1fr}
.pd-content{padding:1.2rem}
.woocommerce-form-row--first,.woocommerce-form-row--last{width:100%;display:block}
.woocommerce-form-row--first{margin-right:0}
}
@media(max-width:420px){
.pgrid{grid-template-columns:1fr}
.hero-brand-mark{padding:.75rem 1rem}
.hero-brand-name{font-size:2.2rem}
.nav-inner .bname{font-size:1.2rem}
/* Horizontal only — a full `padding` shorthand here was zeroing out the
vertical padding of anything that pairs .wrap with its own top/bottom
padding class on the same element (e.g. .wrap.footer-top), since this
rule's shorthand wins on source order at equal specificity. */
.wrap{padding-left:1rem;padding-right:1rem}
/* Nav bar padding/gaps tighten too, now there are 4 icons (search,
wishlist, cart, hamburger) instead of 3 competing with the logo for
room at very small widths. */
.nav-inner{padding:0 .9rem;gap:.6rem}
.nav-actions{gap:.35rem}
.nico{width:34px;height:34px;font-size:.85rem}
}
@media(max-width:400px){
/* Narrow phones (≤400px — covers the very common 375px iPhone SE/12 mini
width too, not just ≤360px): the hamburger button was landing entirely
off-screen once a 4th nav-actions icon (search) joined wishlist/cart/
hamburger — shrink the logo mark and icon cluster further so
everything, including the menu button itself, stays reachable. */
.nav-inner{padding:0 .6rem;gap:.4rem}
.nav-inner .bmark{width:34px;height:34px;font-size:1rem;border-radius:9px}
.nav-inner .btag{display:none}
.nav-inner .bname{font-size:1rem}
.nav-actions{gap:.2rem}
.nico{width:30px;height:30px;font-size:.78rem}
.ham{width:28px}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* ══════════════════════════════════════════
v3 · TOPBAR (ticker + country/lang/currency)
══════════════════════════════════════════ */
#topbar{position:fixed;top:0;left:0;right:0;z-index:1001;height:var(--tbh);background:var(--ink);display:flex;align-items:center}
.tb-inner{max-width:1320px;margin:0 auto;padding:0 2rem;width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.tb-controls{display:flex;align-items:center;gap:.4rem}
.tb-drop{position:relative}
.tb-btn{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);font-size:.7rem;font-weight:700;color:rgba(255,255,255,.75);transition:.2s}
.tb-btn:hover,.tb-drop.open .tb-btn{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.28)}
.tb-btn .ci{font-size:.48rem;opacity:.65;transition:transform .3s}
.tb-drop.open .tb-btn .ci{transform:rotate(180deg)}
.tb-panel{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--white);border-radius:var(--r);box-shadow:var(--shl);border:1px solid var(--line);padding:.55rem;opacity:0;pointer-events:none;transform:translateY(6px);transition:all .22s var(--ease);z-index:50;max-height:340px;overflow-y:auto}
.tb-panel::-webkit-scrollbar{width:4px}
.tb-panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.tb-drop.open .tb-panel{opacity:1;pointer-events:auto;transform:none}
.tb-plabel{font-size:.6rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);padding:.35rem .55rem .5rem;border-bottom:1px solid var(--line);margin-bottom:.35rem}
.tb-opt{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font-size:.8rem;color:var(--char);cursor:pointer;transition:.15s}
.tb-opt:hover,.tb-opt.on{background:var(--pink-s);color:var(--pink)}
.tb-opt em{margin-left:auto;font-style:normal;font-size:.68rem;color:var(--muted)}
.tb-opt.on em{color:var(--pink)}
.tb-note{font-size:.63rem;color:var(--muted);padding:.45rem .55rem;line-height:1.4;border-top:1px solid var(--line);margin-top:.35rem}
.mp-foot{padding:1rem 1.4rem;margin-top:auto}
.mp-currow{display:flex;flex-wrap:wrap;gap:.4rem}
.mp-cur{padding:5px 11px;border-radius:20px;font-size:.7rem;font-weight:700;border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:.2s}
.mp-cur.on{background:var(--pink);color:#fff;border-color:var(--pink)}
@media(max-width:640px){.tb-ticker{display:none}.tb-controls{gap:.3rem;margin-left:auto}.tb-btn{font-size:.62rem;padding:4px 7px}}
/* ══════════════════════════════════════════
v3 · HOMEPAGE SECTIONS
══════════════════════════════════════════ */
/* trust strip */
.trust-strip{background:#fff;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);padding:2.2rem 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.trust-item{display:flex;align-items:flex-start;gap:.9rem}
.trust-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.trust-item h5{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:.15rem}
.trust-item p{font-size:.76rem;color:var(--muted);line-height:1.5}
@media(max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.trust-grid{grid-template-columns:1fr;gap:1.1rem}}
/* story band */
.story-band{background:var(--dark);color:#fff;padding:2.2rem 0;position:relative;overflow:hidden}
.story-band::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--thread)}
.story-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center}
.story-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
.story-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.2;margin-bottom:1.1rem}
.story-title em{color:var(--pink);font-style:italic}
.story-text{font-size:.92rem;color:rgba(255,255,255,.72);line-height:1.85;margin-bottom:1.6rem;max-width:540px}
.story-cta{display:inline-flex;align-items:center;gap:9px;padding:12px 26px;border-radius:50px;background:var(--pink);color:#fff;font-size:.85rem;font-weight:700;transition:.25s var(--ease)}
.story-cta:hover{background:var(--pink-d);transform:translateY(-2px);box-shadow:0 8px 26px rgba(232,23,93,.4)}
.story-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.stat-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:1.4rem;backdrop-filter:blur(6px);transition:.3s var(--ease)}
.stat-card:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.stat-num{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:2rem;color:var(--goldT)}
.stat-lab{font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:.3rem}
@media(max-width:860px){.story-grid{grid-template-columns:1fr;gap:2.2rem}}
/* newsletter */
.news-band{padding:0 0 5rem;background:var(--bg)}
.news-card{background:#fff;border-radius:var(--r2);border:1.5px solid var(--line);box-shadow:var(--sh);padding:3rem;text-align:center;position:relative;overflow:hidden}
.news-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--thread)}
.news-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--ink);margin-bottom:.5rem}
.news-title em{color:var(--pink);font-style:italic}
.news-sub{font-size:.86rem;color:var(--muted);max-width:440px;margin:0 auto 1.6rem;line-height:1.6}
.news-form{display:flex;max-width:460px;margin:0 auto;background:var(--bg);border-radius:50px;border:2px solid var(--line);overflow:hidden;transition:border-color .25s}
.news-form:focus-within{border-color:var(--pink)}
.news-form input{flex:1;border:none;outline:none;background:none;font-size:.86rem;padding:13px 0 13px 20px;color:var(--ink)}
.news-form button{margin:4px;padding:9px 22px;border-radius:50px;background:var(--pink);color:#fff;font-size:.82rem;font-weight:700;flex-shrink:0;transition:.2s}
.news-form button:hover{background:var(--pink-d)}
.news-ok{display:none;color:var(--teal);font-weight:700;font-size:.88rem;margin-top:1rem}
@media(max-width:480px){.news-card{padding:2rem 1.2rem}.news-form{flex-direction:column;border-radius:18px;gap:.3rem;padding:.4rem}.news-form input{padding:11px 14px}.news-form button{width:100%;margin:0}}
/* ══════════════════════════════════════════
v3.1 · WHATSAPP + CALL NOW on products
══════════════════════════════════════════ */
/* card enquiry row */
.penq{display:flex;gap:.5rem;margin-top:.7rem}
.penq-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border-radius:9px;font-size:.7rem;font-weight:700;transition:.2s;border:1.5px solid transparent}
.penq-wa{background:#E7F9EE;color:#128C7E;border-color:#BFEAD2}
.penq-wa:hover{background:#25D366;color:#fff;border-color:#25D366;box-shadow:0 4px 12px rgba(37,211,102,.3)}
.penq-wa i{font-size:.9rem}
.penq-call{background:var(--pink-s);color:var(--pink);border-color:#F6C3D5}
.penq-call:hover{background:var(--pink);color:#fff;border-color:var(--pink);box-shadow:0 4px 12px rgba(232,23,93,.3)}
.penq-call i{font-size:.72rem}
@media(max-width:480px){.penq-btn{font-size:.64rem;padding:7px 4px;gap:4px}}
/* single product contact row */
.sp-contact-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem}
.sp-contact-btn{display:flex;align-items:center;gap:.8rem;padding:.85rem 1.1rem;border-radius:14px;border:1.5px solid;transition:.25s var(--ease)}
.sp-contact-btn i{font-size:1.3rem;flex-shrink:0}
.sp-contact-btn span{line-height:1.25;min-width:0}
.sp-contact-btn strong{display:block;font-size:.84rem}
.sp-contact-btn em{display:block;font-style:normal;font-size:.68rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-wa{background:#E7F9EE;color:#0d6e5c;border-color:#BFEAD2}
.sp-wa:hover{background:#25D366;color:#fff;border-color:#25D366;transform:translateY(-2px);box-shadow:0 8px 22px rgba(37,211,102,.32)}
.sp-call{background:var(--pink-s);color:var(--pink-d);border-color:#F6C3D5}
.sp-call:hover{background:var(--pink);color:#fff;border-color:var(--pink);transform:translateY(-2px);box-shadow:0 8px 22px rgba(232,23,93,.32)}
@media(max-width:480px){.sp-contact-row{grid-template-columns:1fr}}
/* quick-view drawer round buttons */
.btn-pd-wa,.btn-pd-call{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;transition:.22s;border:2px solid}
.btn-pd-wa{background:#E7F9EE;color:#128C7E;border-color:#BFEAD2}
.btn-pd-wa:hover{background:#25D366;color:#fff;border-color:#25D366}
.btn-pd-call{background:var(--pink-s);color:var(--pink);border-color:#F6C3D5;font-size:.9rem}
.btn-pd-call:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
/* price on request */
.ppor{font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.2px}
.sp-por{font-size:1.1rem;font-weight:700;color:var(--muted)}
/* ══════════════════════════════════════════
v4 · DECORATIVE BLOBS + COLORFUL SECTIONS
══════════════════════════════════════════ */
.b2b-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;animation:blobFloat 14s ease-in-out infinite alternate}
.b2b-blob-1{width:380px;height:380px;background:radial-gradient(circle,rgba(232,23,93,.35),transparent 70%);top:-90px;left:-70px}
.b2b-blob-2{width:340px;height:340px;background:radial-gradient(circle,rgba(245,166,35,.35),transparent 70%);top:20%;right:-80px;animation-delay:-5s}
.b2b-blob-3{width:300px;height:300px;background:radial-gradient(circle,rgba(124,58,237,.3),transparent 70%);bottom:-70px;left:30%;animation-delay:-9s}
@keyframes blobFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(26px,-22px) scale(1.08)}}
@media (prefers-reduced-motion: reduce){.b2b-blob{animation:none}}
.trust-strip{background:linear-gradient(120deg,#FFF6F9,#FFFBF2 35%,#F3FBF9 70%,#F7F4FE);border-top:1.5px solid rgba(232,23,93,.12);border-bottom:1.5px solid rgba(124,58,237,.12)}
.story-band{background:linear-gradient(135deg,#1A1024 0%,#241335 45%,#301024 100%)}
.news-band{background:transparent}
.news-card{background:linear-gradient(135deg,#FFF9FB,#FDF6FF 60%,#F5FBFA)}
.shop-section{background:transparent}
/* ══════════════════════════════════════════
v4 · B2B QUOTE MODAL
══════════════════════════════════════════ */
.qmodal-backdrop{position:fixed;inset:0;background:rgba(24,14,30,.55);backdrop-filter:blur(6px);z-index:3000;opacity:0;pointer-events:none;transition:opacity .3s}
.qmodal-backdrop.open{opacity:1;pointer-events:auto}
.qmodal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.96);width:min(480px,calc(100vw - 2rem));max-height:calc(100vh - 3rem);overflow-y:auto;background:linear-gradient(160deg,#FFFDFB,#FFF6F9 55%,#F8F5FF);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.3);z-index:3001;opacity:0;pointer-events:none;transition:all .34s var(--ease);padding:2rem;border:1.5px solid rgba(232,23,93,.15)}
.qmodal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.qmodal::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;border-radius:22px 22px 0 0;background:var(--thread)}
.qmodal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--pink-s);color:var(--pink);display:flex;align-items:center;justify-content:center;transition:.2s}
.qmodal-x:hover{background:var(--pink);color:#fff;transform:rotate(90deg)}
.qmodal-head{text-align:center;margin-bottom:1.4rem}
.qmodal-ico{width:56px;height:56px;margin:0 auto .7rem;border-radius:16px;background:var(--thread);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;box-shadow:0 8px 24px rgba(232,23,93,.35)}
.qmodal-head h3{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:1.5rem;color:var(--ink)}
.qmodal-prod{font-size:.8rem;font-weight:700;color:var(--pink);margin-top:.25rem}
.qfield{margin-bottom:.9rem}
.qfield label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.qfield input,.qfield textarea{width:100%;padding:11px 14px;border-radius:12px;border:2px solid var(--line);background:#fff;font-size:.88rem;font-family:inherit;color:var(--ink);outline:none;transition:border-color .2s;resize:vertical}
.qfield input:focus,.qfield textarea:focus{border-color:var(--pink)}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:440px){.qrow{grid-template-columns:1fr}}
.qsend{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:50px;background:linear-gradient(90deg,#25D366,#128C7E);color:#fff;font-size:.92rem;font-weight:700;transition:.25s var(--ease);margin-top:.3rem}
.qsend:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(37,211,102,.4)}
.qsend:disabled{opacity:.7;cursor:wait;transform:none}
.qnote{text-align:center;font-size:.68rem;color:var(--muted);margin-top:.7rem;line-height:1.5}
/* buy row on product page */
.sp-buy-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.8rem}
.btn-buy-now,.btn-b2b-quote{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:50px;font-size:.88rem;font-weight:700;transition:.25s var(--ease);text-align:center}
.btn-buy-now{background:linear-gradient(90deg,var(--gold),#E8890C);color:#fff}
.btn-buy-now:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(245,166,35,.42);color:#fff}
.btn-b2b-quote{background:#fff;color:var(--violet);border:2px solid var(--violet)}
.btn-b2b-quote:hover{background:var(--violet);color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(124,58,237,.35)}
.btn-b2b-solo{grid-column:1/-1;background:var(--violet);color:#fff}
.btn-b2b-solo:hover{background:#6229c9}
@media(max-width:440px){.sp-buy-row{grid-template-columns:1fr}}
.btn-pd-quote{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;transition:.22s;border:2px solid var(--violet);background:#F5F0FE;color:var(--violet)}
.btn-pd-quote:hover{background:var(--violet);color:#fff}
/* ══════════════════════════════════════════
v4 · B2B PAGE
══════════════════════════════════════════ */
.b2b-hero,.blog-hero,.article-hero{position:relative;overflow:hidden;padding:1.4rem 0 1.8rem;text-align:center;background:transparent}
.b2b-hero-inner{position:relative;z-index:1}
.b2b-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 18px;border-radius:50px;background:#fff;border:1.5px solid rgba(232,23,93,.25);color:var(--pink);font-size:.74rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:1.1rem;box-shadow:0 4px 14px rgba(232,23,93,.12)}
.b2b-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:clamp(2.1rem,5vw,3.4rem);color:var(--ink);line-height:1.12;margin-bottom:1rem;position:relative;z-index:1}
.b2b-title em{font-style:italic;color:var(--pinkT)}
.b2b-sub{max-width:620px;margin:0 auto 1.8rem;font-size:.95rem;color:var(--char);line-height:1.8;position:relative;z-index:1}
.b2b-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;border-radius:50px;background:linear-gradient(90deg,var(--pink),var(--violet));color:#fff;font-size:.92rem;font-weight:700;transition:.28s var(--ease);box-shadow:0 10px 30px rgba(232,23,93,.3);position:relative;z-index:1}
.b2b-cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px rgba(124,58,237,.4);color:#fff}
.b2b-sec-head{text-align:center;margin-bottom:2.4rem}
.b2b-sec-head h2{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--ink)}
.b2b-sec-head h2 em{font-style:italic;color:var(--pink)}
.b2b-sec-head p{font-size:.82rem;color:var(--muted);margin-top:.4rem}
.b2b-serve{padding:1.6rem 0}
.b2b-serve-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.b2b-serve-card{background:#fff;border-radius:var(--r2);padding:1.8rem 1.4rem;text-align:center;border:1.5px solid var(--line);box-shadow:var(--sh);transition:.35s var(--ease);position:relative;overflow:hidden}
.b2b-serve-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.b2b-serve-card:hover{transform:translateY(-7px);box-shadow:var(--shl)}
.b2b-serve-card i{font-size:1.7rem;margin-bottom:.9rem}
.b2b-serve-card h4{font-size:.98rem;font-weight:700;color:var(--ink);margin-bottom:.4rem}
.b2b-serve-card p{font-size:.78rem;color:var(--muted);line-height:1.6}
.sc-pink::before{background:var(--pink)} .sc-pink i{color:var(--pink)}
.sc-gold::before{background:var(--gold)} .sc-gold i{color:var(--gold)}
.sc-teal::before{background:var(--teal)} .sc-teal i{color:var(--teal)}
.sc-violet::before{background:var(--violet)} .sc-violet i{color:var(--violet)}
@media(max-width:960px){.b2b-serve-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.b2b-serve-grid{grid-template-columns:1fr}}
.about-intro{padding:2.2rem 0 2.8rem}
.about-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.about-intro-text .b2b-title{text-align:left;margin-bottom:1rem}
.about-intro-text p{font-size:1rem;color:var(--muted);line-height:1.85}
.about-intro-video{position:relative;border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);aspect-ratio:16/10;background:#000}
.about-intro-video iframe,.about-intro-video video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
@media(max-width:860px){.about-intro-grid{grid-template-columns:1fr;gap:1.6rem}.about-intro-text .b2b-title{text-align:center}.about-intro-text{text-align:center}}
.b2b-steps{padding:1.8rem 0;background:transparent}
.b2b-steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.b2b-step{background:#fff;border-radius:var(--r2);padding:1.7rem 1.4rem;border:1.5px solid var(--line);position:relative;transition:.3s var(--ease)}
.b2b-step:hover{transform:translateY(-5px);box-shadow:var(--shl)}
.b2b-step-n{display:inline-flex;width:40px;height:40px;border-radius:12px;background:var(--thread);color:#fff;font-weight:800;align-items:center;justify-content:center;font-size:1rem;margin-bottom:.8rem;box-shadow:0 6px 16px rgba(232,23,93,.3)}
.b2b-step h4{font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:.35rem}
.b2b-step p{font-size:.76rem;color:var(--muted);line-height:1.6}
@media(max-width:960px){.b2b-steps-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.b2b-steps-grid{grid-template-columns:1fr}}
.b2b-tiers{padding:1.8rem 0}
.b2b-tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;max-width:960px;margin:0 auto}
.b2b-tier{background:#fff;border-radius:var(--r2);padding:2rem 1.6rem;border:2px solid var(--line);transition:.3s var(--ease);text-align:center}
.b2b-tier:hover{transform:translateY(-6px);box-shadow:var(--shl)}
.b2b-tier-hot{border-color:var(--pink);background:linear-gradient(160deg,#FFF9FB,#FFF3F7);box-shadow:0 14px 40px rgba(232,23,93,.16)}
.b2b-tier-tag{display:inline-block;padding:4px 14px;border-radius:20px;background:var(--pink-s);color:var(--pink);font-size:.66rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:.9rem}
.b2b-tier-hot .b2b-tier-tag{background:var(--pink);color:#fff}
.b2b-tier-qty{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:1.9rem;color:var(--ink)}
.b2b-tier-qty span{display:block;font-family:Tahoma,'Segoe UI',sans-serif;font-weight:600;font-size:.72rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-top:.15rem}
.b2b-tier ul{list-style:none;margin-top:1.1rem;text-align:left}
.b2b-tier li{font-size:.8rem;color:var(--char);padding:.42rem 0 .42rem 1.5rem;position:relative;border-bottom:1px dashed var(--line)}
.b2b-tier li:last-child{border-bottom:none}
.b2b-bottom-cta{text-align:center;margin-top:2.6rem}
@media(max-width:860px){.b2b-tier-grid{grid-template-columns:1fr;max-width:420px}}
.b2b-extra{padding:0 0 4rem}
/* ══════════════════════════════════════════
v4 · ARCHIVES (BLOG) + ARTICLE
══════════════════════════════════════════ */
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 2rem}
.blog-list{padding:1.4rem 0 2rem}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.blog-card{background:#fff;border-radius:var(--r2);overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--sh);transition:.35s var(--ease);display:flex;flex-direction:column;border-top:4px solid var(--bc)}
.blog-card:hover{transform:translateY(-7px);box-shadow:var(--shl)}
.blog-card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#FFF3F7,#F6F1FF)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.blog-card:hover .blog-card-img img{transform:scale(1.06)}
.blog-card-fallback{display:flex;align-items:center;justify-content:center;height:100%;font-size:2.2rem;color:var(--bc);opacity:.55}
.blog-card-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.blog-card-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.7rem}
.blog-chip{font-size:.64rem;font-weight:700;letter-spacing:.6px;padding:4px 11px;border-radius:20px;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.blog-chip-cat{background:var(--pink-s);color:var(--pink);border-color:transparent}
.blog-card-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:1.15rem;line-height:1.35;margin-bottom:.5rem}
.blog-card-title a{color:var(--ink);transition:color .2s}
.blog-card-title a:hover{color:var(--pink)}
.blog-card-ex{font-size:.8rem;color:var(--muted);line-height:1.7;flex:1}
.blog-card-more{display:inline-flex;align-items:center;gap:7px;margin-top:1rem;font-size:.78rem;font-weight:700;color:var(--pink);transition:gap .2s}
.blog-card-more:hover{gap:11px;color:var(--pink-d)}
.blog-pager{margin-top:2.6rem;text-align:center}
.blog-pager .nav-links{display:flex;justify-content:center;gap:.5rem}
.blog-pager .page-numbers{padding:8px 15px;border-radius:12px;border:1.5px solid var(--line);font-size:.82rem;font-weight:700;color:var(--char);background:#fff}
.blog-pager .page-numbers.current,.blog-pager .page-numbers:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
@media(max-width:960px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}
.article-hero{padding:1.2rem 0 1.4rem}
.article-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:clamp(1.7rem,4vw,2.7rem);color:var(--ink);line-height:1.2;margin-top:.9rem}
.article-feat{border-radius:var(--r2);overflow:hidden;margin:2rem auto;box-shadow:var(--shl)}
.article-feat img{width:100%}
.article-body{padding:1rem 2rem 3rem;font-size:.96rem;line-height:1.95;color:var(--char)}
.article-body h2,.article-body h3{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;color:var(--ink);margin:2rem 0 .8rem}
.article-body h2{font-size:1.55rem}.article-body h3{font-size:1.2rem}
.article-body p{margin-bottom:1.1rem}
.article-body a{color:var(--pink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(232,23,93,.35)}
.article-body img{border-radius:var(--r);margin:1.4rem 0}
.article-body blockquote{border-left:4px solid var(--gold);background:linear-gradient(90deg,#FFFBF2,transparent);padding:1rem 1.4rem;border-radius:0 var(--r) var(--r) 0;font-style:italic;margin:1.4rem 0}
.article-body ul,.article-body ol{padding-left:1.4rem;margin-bottom:1.1rem}
.article-share{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;
margin:1rem 0 2rem;padding:1.2rem;background:var(--card,#FAF7FF);border-radius:var(--r2);border:1.5px solid var(--line)}
.article-share-label{font-size:.8rem;font-weight:800;color:var(--ink)}
.article-share-label i{color:var(--pink);margin-right:6px}
.article-share-btns{display:flex;gap:.6rem}
.article-share-btn{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;color:#fff;font-size:.95rem;
transition:transform .2s,box-shadow .2s}
.article-share-btn:hover{transform:translateY(-3px)}
.ak-share-whatsapp{background:#25D366}
.ak-share-facebook{background:#1877F2}
.ak-share-twitter{background:#000}
.ak-share-instagram{background:radial-gradient(circle at 30% 110%,#fdf497,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.ak-share-copy{background:var(--ink)}
.article-share-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
background:var(--ink);color:#fff;font-size:.85rem;font-weight:600;padding:12px 22px;border-radius:14px;
box-shadow:0 14px 34px rgba(0,0,0,.3);z-index:3000;opacity:0;pointer-events:none;
transition:.35s cubic-bezier(.34,1.56,.64,1)}
.article-share-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:480px){.article-share{padding:1rem;gap:.7rem}.article-share-btn{width:34px;height:34px;font-size:.85rem}}
.article-foot{padding-bottom:1.8rem;display:flex;flex-direction:column;gap:1.2rem}
.article-nav{display:flex;justify-content:space-between;gap:1rem;font-size:.82rem;font-weight:700}
.article-nav a{color:var(--char);padding:10px 16px;border-radius:12px;border:1.5px solid var(--line);background:#fff;transition:.2s;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.article-nav a:hover{border-color:var(--pink);color:var(--pink)}
.nl-b2b{position:relative}
.nl-b2b::after{content:'';position:absolute;top:2px;right:-7px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
/* v4.1 · B2B product showcase */
.b2b-products{padding:1.8rem 0;background:transparent}
.b2b-prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.b2b-prod-card{background:#fff;border-radius:var(--r2);overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--sh);transition:.35s var(--ease);display:flex;flex-direction:column}
.b2b-prod-card:hover{transform:translateY(-7px);box-shadow:var(--shl);border-color:rgba(124,58,237,.35)}
.b2b-prod-img{display:block;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(135deg,#FFF3F7,#F6F1FF)}
.b2b-prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.b2b-prod-card:hover .b2b-prod-img img{transform:scale(1.07)}
.b2b-prod-fallback{display:flex;align-items:center;justify-content:center;height:100%;font-size:2rem;color:var(--violet);opacity:.4}
.b2b-prod-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.b2b-prod-cat{font-size:.62rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--pink);margin-bottom:.3rem}
.b2b-prod-name{font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.35;flex:1}
.b2b-prod-actions{display:flex;gap:.5rem;margin-top:.9rem;align-items:stretch}
.b2b-prod-view{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 10px;border-radius:11px;background:linear-gradient(90deg,var(--pink),var(--violet));color:#fff;font-size:.74rem;font-weight:700;transition:.25s}
.b2b-prod-view:hover{box-shadow:0 8px 20px rgba(124,58,237,.35);transform:translateY(-1px);color:#fff}
.b2b-prod-quote{width:38px;border-radius:11px;border:2px solid var(--violet);background:#F5F0FE;color:var(--violet);display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:.2s;flex-shrink:0}
.b2b-prod-quote:hover{background:var(--violet);color:#fff}
.b2b-cta-ghost{background:#fff;color:var(--pink);border:2px solid var(--pink);box-shadow:none}
.b2b-cta-ghost:hover{background:var(--pink);color:#fff}
@media(max-width:960px){.b2b-prod-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.b2b-prod-grid{grid-template-columns:1fr 1fr;gap:.8rem}.b2b-prod-actions{flex-direction:column}.b2b-prod-quote{width:100%;padding:7px}}
/* ══════════════════════════════════════════
v5 · TOPBAR TAGLINE + LANGUAGE
══════════════════════════════════════════ */
.tb-tagline{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;letter-spacing:.6px;color:rgba(255,255,255,.75)}
.tb-tagline i{color:var(--gold);font-size:.72rem}
@media(max-width:560px){.tb-tagline span{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* ══════════════════════════════════════════
v5 · SCROLL-REVEAL ANIMATION
══════════════════════════════════════════ */
.rvl{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rvl.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rvl{opacity:1;transform:none;transition:none}}
/* ══════════════════════════════════════════
v5 · PRODUCT PAGE — POINTS / STORY / FAQ
══════════════════════════════════════════ */
.sp-points{list-style:none;margin:0 0 1.4rem;display:flex;flex-direction:column;gap:.55rem}
.sp-points li{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:var(--char);line-height:1.6;background:linear-gradient(90deg,rgba(232,23,93,.05),transparent 70%);padding:.55rem .9rem;border-radius:11px;border-left:3px solid var(--pink)}
.sp-points li i{color:var(--teal);margin-top:3px;flex-shrink:0}
.sp-points li:nth-child(2n){border-left-color:var(--violet);background:linear-gradient(90deg,rgba(124,58,237,.05),transparent 70%)}
.sp-points li:nth-child(3n){border-left-color:var(--gold);background:linear-gradient(90deg,rgba(245,166,35,.07),transparent 70%)}
.sp-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.6rem}
.sp-story-card{border-radius:var(--r2);padding:2.2rem;position:relative;overflow:hidden;border:1.5px solid transparent;transition:.35s var(--ease)}
.sp-story-card:hover{transform:translateY(-5px)}
.sp-story-hist{background:linear-gradient(150deg,#FFF6EC,#FFEFF5);border-color:rgba(245,166,35,.3)}
.sp-story-sig{background:linear-gradient(150deg,#F1FBF9,#F2F4FF);border-color:rgba(13,148,136,.3)}
.sp-story-ico{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#fff;margin-bottom:1rem;box-shadow:0 8px 22px rgba(0,0,0,.14)}
.sp-story-hist .sp-story-ico{background:linear-gradient(135deg,var(--gold),#E8890C)}
.sp-story-sig .sp-story-ico{background:linear-gradient(135deg,var(--teal),#0A7D72)}
.sp-story-card h2{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:1.35rem;color:var(--ink);margin-bottom:.7rem}
.sp-story-card p{font-size:.9rem;color:var(--char);line-height:1.85}
@media(max-width:820px){.sp-story-grid{grid-template-columns:1fr}}
.sp-faq{margin-bottom:1.6rem;background:linear-gradient(150deg,#FBF7FF,#FFF5F9 60%,#F4FAFF);border:1.5px solid rgba(124,58,237,.18);border-radius:var(--r2);padding:1.8rem}
.sp-faq-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--ink);text-align:center;margin-bottom:1.2rem}
.sp-faq-title em{font-style:italic;color:var(--violet)}
.sp-faq-list{display:flex;flex-direction:column;gap:.6rem;max-width:760px;margin:0 auto}
.sp-faq-item{background:#fff;border-radius:14px;border:1.5px solid var(--line);overflow:hidden;transition:.25s}
.sp-faq-item[open]{border-color:var(--violet);box-shadow:0 8px 24px rgba(124,58,237,.10)}
.sp-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.9rem;padding:.9rem 1.2rem;font-size:.9rem;font-weight:700;color:var(--ink)}
.sp-faq-item summary::-webkit-details-marker{display:none}
.sp-faq-q-num{flex-shrink:0;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--pink),var(--violet));
color:#fff;font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:Tahoma,sans-serif}
.sp-faq-q-text{flex:1}
.sp-faq-item summary i{color:var(--violet);transition:transform .3s;flex-shrink:0}
.sp-faq-item[open] summary i{transform:rotate(45deg)}
.sp-faq-item p{padding:0 1.2rem 1rem 3.9rem;font-size:.85rem;color:var(--char);line-height:1.75}
/* ══════════════════════════════════════════
v5 · B2B CATEGORY CARDS (dynamic)
══════════════════════════════════════════ */
.b2b-cats{padding:1.4rem 0 .6rem}
.b2b-cats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.b2b-cat-card{background:#fff;border-radius:var(--r2);overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--sh);transition:.35s var(--ease);display:flex;flex-direction:column;position:relative}
.b2b-cat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--cc);z-index:2}
.b2b-cat-card:hover{transform:translateY(-8px);box-shadow:0 22px 54px rgba(0,0,0,.13);border-color:var(--cc)}
.b2b-cat-img{aspect-ratio:16/9;overflow:hidden;background:var(--cs)}
.b2b-cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.b2b-cat-card:hover .b2b-cat-img img{transform:scale(1.07)}
.b2b-cat-fallback{display:flex;align-items:center;justify-content:center;height:100%;font-size:2.4rem;color:var(--cc);opacity:.6}
.b2b-cat-body{padding:1.5rem 1.6rem 1.7rem;position:relative}
.b2b-cat-ico{position:absolute;top:-24px;right:1.4rem;width:48px;height:48px;border-radius:14px;background:var(--cc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 8px 22px rgba(0,0,0,.2)}
.b2b-cat-body h4{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:1.25rem;color:var(--ink);margin-bottom:.3rem}
.b2b-cat-body p{font-size:.78rem;color:var(--muted);margin-bottom:.9rem}
.b2b-cat-go{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:700;color:var(--cc);transition:gap .2s}
.b2b-cat-card:hover .b2b-cat-go{gap:11px}
@media(max-width:900px){.b2b-cats-grid{grid-template-columns:1fr}}
/* ══════════════════════════════════════════════════════
v6 · CURRENCY CHIP · MAGIC BUTTON · BACKGROUND THEMES
══════════════════════════════════════════════════════ */
.tb-cur-chip{padding:5px 11px;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);font-size:.68rem;font-weight:700;color:rgba(255,255,255,.8);letter-spacing:.5px}
/* ══════════════════════════════════════════════════════
v7 · GIFTING BRAND — animations, motifs, richer cards
══════════════════════════════════════════════════════ */
/* ── ANIMATED BRAND NAME ── */
.hbn-anim .hbn-l{display:inline-block;font-style:normal;animation:hbnRise .7s var(--ease) both;animation-delay:var(--d,0s)}
.hbn-anim .hbn-pink{color:var(--pink)}
@keyframes hbnRise{from{opacity:0;transform:translateY(34px) rotate(6deg)}to{opacity:1;transform:none}}
.hero-brand-name .hbn-l{color:var(--ink)}
.hero-brand-name .hbn-pink{color:var(--pink)}
.hero-brand-name{animation:hbnGlow 5s ease-in-out 1.6s infinite}
@keyframes hbnGlow{0%,100%{text-shadow:0 0 0 rgba(232,23,93,0)}50%{text-shadow:0 6px 34px rgba(232,23,93,.35),0 2px 14px rgba(245,166,35,.25)}}
@media (prefers-reduced-motion: reduce){.hbn-anim .hbn-l{opacity:1;transform:none;animation:none}.hero-brand-name{animation:none}}
/* ── OCCASION CARDS ── */
.occ-section{padding:1.4rem 0 1rem}
.occ-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}
.occ-card{position:relative;background:#fff;border:2px solid var(--line);border-radius:18px;padding:1.6rem 1rem 1.4rem;text-align:center;transition:.35s var(--ease);overflow:hidden}
.occ-card::before{content:'';position:absolute;inset:0;background:linear-gradient(150deg,var(--cs),transparent 70%);opacity:0;transition:.35s}
.occ-card:hover{transform:translateY(-8px) rotate(-1deg);border-color:var(--cc);box-shadow:0 18px 40px -8px var(--cs),0 14px 34px rgba(0,0,0,.08)}
.occ-card:hover::before{opacity:1}
.occ-ico{position:relative;width:56px;height:56px;margin:0 auto .8rem;border-radius:50%;background:var(--cs);color:var(--cc);display:flex;align-items:center;justify-content:center;font-size:1.3rem;transition:.35s var(--ease)}
.occ-card:hover .occ-ico{background:var(--cc);color:#fff;transform:rotate(-10deg) scale(1.12);box-shadow:0 8px 20px var(--cs)}
.occ-card h4{position:relative;font-size:.86rem;font-weight:700;color:var(--ink);line-height:1.3}
.occ-count{position:relative;display:block;font-size:.66rem;color:var(--muted);margin-top:.25rem}
.occ-go{position:absolute;bottom:10px;right:12px;font-size:.7rem;color:var(--cc);opacity:0;transform:translateX(-6px);transition:.3s}
.occ-card:hover .occ-go{opacity:1;transform:none}
@media(max-width:1020px){.occ-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.occ-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}.occ-card{padding:1.2rem .7rem 1.1rem}}
/* ── GIFTS DROPDOWN NAV ── */
.nl-gifts{position:relative}
.nl-gifts-btn i.fa-gift{color:var(--pink);margin-right:2px}
.nl-caret{font-size:.55rem;opacity:.6;margin-left:3px;transition:transform .3s}
.nl-gifts:hover .nl-caret,.nl-gifts.js-open .nl-caret{transform:rotate(180deg)}
.gifts-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border-radius:20px;border:1.5px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.14);padding:1rem;opacity:0;pointer-events:none;transition:all .28s var(--ease);z-index:60}
.gifts-panel::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
/* Pure :hover left the panel with nothing keeping it open while the
cursor crossed the 14px gap (or the 10px one before a flyout) between
trigger and panel — leave that gap a hair too slowly and the hover
state was already gone before you arrived, closing it. main.js now
tracks intent to open/close with a short grace period and toggles
.js-open, so a slightly slow diagonal move across the gap no longer
drops the menu; :hover/:focus-within stay too, as a no-JS/keyboard
fallback. */
.nl-gifts:hover .gifts-panel,.nl-gifts:focus-within .gifts-panel,.nl-gifts.js-open .gifts-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* .gifts-opt is still used by the "Gifts" (by-occasion) dropdown, a flat
list with no submenus — only "Our Collections" (below) moved to cards. */
.gifts-opt{display:flex;align-items:center;gap:.85rem;padding:.65rem .8rem;border-radius:12px;transition:.2s;color:var(--char);min-width:250px}
.gifts-opt:hover{background:var(--cs);color:var(--cc);transform:translateX(4px)}
.gifts-opt-ico{width:38px;height:38px;border-radius:11px;background:var(--cs);color:var(--cc);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;transition:.2s}
.gifts-opt:hover .gifts-opt-ico{background:var(--cc);color:#fff}
.gifts-opt span:last-child{font-size:.86rem;font-weight:700;line-height:1.2}
/* "Our Collections" nav dropdown — a proper two-level mega menu. Hovering
a category on the left slides out its subcategories (Single/Two/Three/
.../Five, in order) as a numbered flyout on the right, each item its
own little "step up" in size/price. */
.gifts-mega{padding:.5rem;min-width:230px}
.gifts-mega-list{display:flex;flex-direction:column}
.gifts-mega-item{position:relative}
.gifts-mega-link{display:flex;align-items:center;gap:.75rem;padding:.65rem .8rem;border-radius:12px;color:var(--char);transition:.2s}
.gifts-mega-item:hover .gifts-mega-link,.gifts-mega-item:focus-within .gifts-mega-link,.gifts-mega-item.js-open .gifts-mega-link{background:var(--cs);color:var(--cc)}
.gifts-mega-item:hover .gifts-opt-ico,.gifts-mega-item:focus-within .gifts-opt-ico,.gifts-mega-item.js-open .gifts-opt-ico{background:var(--cc);color:#fff}
.gifts-mega-name{font-size:.86rem;font-weight:700;line-height:1.2}
.gifts-mega-arrow{margin-left:auto;font-size:.62rem;opacity:.45;transition:.2s}
.gifts-mega-item:hover .gifts-mega-arrow,.gifts-mega-item.js-open .gifts-mega-arrow{opacity:1;transform:translateX(2px);color:var(--cc)}
.gifts-mega-flyout{display:none;position:absolute;top:-.5rem;left:100%;margin-left:10px;width:250px;
background:#fff;border-radius:18px;border:1.5px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.16);
padding:.6rem;opacity:0;transform:translateX(-8px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.gifts-mega-item.has-flyout:hover .gifts-mega-flyout,.gifts-mega-item.has-flyout:focus-within .gifts-mega-flyout,
.gifts-mega-item.has-flyout.js-open .gifts-mega-flyout{
display:block;opacity:1;transform:translateX(0)}
/* Was a left-icon + name + right-aligned "PICK A SIZE" label row; the
label's gone (redundant — the flyout items below already read as
sizes) and centering what's left reads as a proper heading for the
flyout instead of a leftover half of a row that used to have two
things in it. */
.gifts-mega-flyout-head{display:flex;align-items:center;justify-content:center;gap:8px;padding:.4rem .6rem .7rem;font-family:'Georgia Pro',Georgia,'Times New Roman',serif;
font-weight:900;font-size:.9rem;color:var(--cc);border-bottom:1.5px dashed var(--line);margin-bottom:.4rem}
.gifts-mega-sub{display:flex;align-items:center;gap:.65rem;padding:.55rem .6rem;border-radius:11px;color:var(--char);transition:.18s}
.gifts-mega-sub:hover{background:var(--cs);transform:translateX(3px)}
.gifts-mega-sub-num{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
background:linear-gradient(135deg,var(--cc),var(--violet));color:#fff;font-size:.68rem;font-weight:800;flex-shrink:0;box-shadow:0 3px 8px rgba(0,0,0,.16)}
.gifts-mega-sub-name{font-size:.79rem;font-weight:650}
.gifts-mega-sub i{margin-left:auto;font-size:.6rem;opacity:0;transition:.18s;color:var(--cc)}
.gifts-mega-sub:hover i{opacity:1;transform:translateX(2px)}
body.theme-dark .gifts-mega-flyout{background:var(--card2);border-color:var(--line);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.mp-chip-sub{opacity:.75;font-size:.68rem;padding:5px 10px;margin-left:4px}
/* ── Nav search: one button in the menu bar, at every screen width, that
drops a colourful full-width search bar down from the nav — instead of
separate desktop-inline / mobile-icon search components to keep in sync. */
.nico#ak-nav-search-toggle.on{background:var(--pink-s);color:var(--pink)}
.nav-search-drop{
position:absolute;top:100%;left:0;right:0;
background:#fff;border-bottom:1.5px solid var(--line);
box-shadow:0 20px 48px rgba(0,0,0,.12);
opacity:0;transform:translateY(-10px);pointer-events:none;
transition:opacity .28s var(--ease),transform .28s var(--ease);
z-index:56;
}
.nav-search-drop.open{opacity:1;transform:translateY(0);pointer-events:auto}
.nav-search-drop-inner{display:flex;align-items:center;gap:.8rem;padding:1rem 2rem}
.nav-search-drop-form{
flex:1;display:flex;align-items:center;gap:10px;background:var(--bg);
border:1.5px solid var(--line);border-radius:50px;padding:.3rem .3rem .3rem 1.3rem;
transition:border-color .22s,box-shadow .22s,background .22s;
}
.nav-search-drop-form:focus-within{border-color:var(--pink);box-shadow:0 0 0 4px rgba(232,23,93,.1);background:#fff}
.nav-search-drop-ico{color:var(--muted);font-size:.9rem;flex-shrink:0}
.nav-search-drop-form input{flex:1;min-width:0;border:none;outline:none;background:none;font-size:.92rem;color:var(--ink);padding:.7rem 0}
.nav-search-drop-form input::placeholder{color:var(--muted)}
.nav-search-drop-form button{
flex-shrink:0;padding:.7rem 1.6rem;border-radius:50px;border:none;color:#fff;font-weight:700;font-size:.85rem;
background:var(--thread);background-size:160% 160%;cursor:pointer;transition:.25s;
}
.nav-search-drop-form button:hover{background-position:100% 0;box-shadow:0 8px 20px rgba(232,23,93,.3)}
.nav-search-drop-close{flex-shrink:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
color:var(--muted);transition:.2s;cursor:pointer}
.nav-search-drop-close:hover{background:var(--pink-s);color:var(--pink)}
@media(max-width:640px){
.nav-search-drop-inner{padding:.8rem 1rem;gap:.4rem}
.nav-search-drop-form{padding:.25rem .25rem .25rem 1rem}
.nav-search-drop-form button span{display:none}
.nav-search-drop-form button{padding:.7rem 1.05rem}
.nav-search-drop-form button::after{content:'\f002';font-family:'Font Awesome 6 Free';font-weight:900}
}
/* ── RICHER PRODUCT CARDS ── */
.pcard{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(140deg,var(--line),var(--line)) border-box;transition:.4s var(--ease)}
.pcard:hover{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(140deg,var(--pink),var(--gold),var(--violet)) border-box;transform:translateY(-9px)}
.pcard-img{position:relative;overflow:hidden}
.pcard-img::before{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);z-index:2;transition:none;pointer-events:none}
.pcard:hover .pcard-img::before{animation:shine .9s ease}
@keyframes shine{to{left:130%}}
.pname{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:1.06rem;line-height:1.3;color:var(--ink);letter-spacing:0}
.pcat{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:1.6px;padding:3px 10px;border-radius:20px;background:var(--pink-s);color:var(--pink);margin-bottom:.45rem}
.pprices{align-items:center}
.pnow{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:1.16rem;color:var(--price)}
.pnow .woocommerce-Price-amount{color:var(--price)}
.pwas{font-size:.78rem}
.poff{background:linear-gradient(90deg,var(--gold),#E8890C);color:#fff;font-size:.62rem;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:.4px}
.padd{background:linear-gradient(90deg,var(--ink),#3A2C46);transition:.3s var(--ease)}
.padd:hover{background:linear-gradient(90deg,var(--pink),var(--violet));transform:scale(1.06);box-shadow:0 8px 20px rgba(232,23,93,.35)}
.pbadge{border-radius:4px 12px 12px 4px;padding:5px 12px 5px 9px;font-weight:800;letter-spacing:1px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.ppor{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:700;font-style:italic;font-size:.92rem;color:var(--violet)}
/* ── PRODUCT PAGE OPENING ANIMATION ── */
@keyframes spSlideL{from{opacity:0;transform:translateX(-44px) scale(.96)}to{opacity:1;transform:none}}
@keyframes spRiseR{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.sp-grid>div:first-child{animation:spSlideL .8s var(--ease) both}
.sp-info>*{animation:spRiseR .65s var(--ease) both}
.sp-info>*:nth-child(1){animation-delay:.15s}.sp-info>*:nth-child(2){animation-delay:.25s}
.sp-info>*:nth-child(3){animation-delay:.35s}.sp-info>*:nth-child(4){animation-delay:.45s}
.sp-info>*:nth-child(5){animation-delay:.55s}.sp-info>*:nth-child(6){animation-delay:.65s}
.sp-info>*:nth-child(n+7){animation-delay:.75s}
.sp-carousel{position:relative}
.sp-carousel::before{content:'';position:absolute;inset:-26px;border-radius:30px;background:var(--svg-mandala-ring) center/contain no-repeat;opacity:.5;z-index:-1;animation:slowSpin 80s linear infinite}
.sp-title{color:var(--ink)}
.sp-now{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:1.7rem;color:var(--price)}
@media (prefers-reduced-motion: reduce){.sp-grid>div:first-child,.sp-info>*{animation:none;opacity:1}}
/* story band ribbon + gift */
.story-band .story-eyebrow{position:relative;display:inline-block}
/* ══════════════════════════════════════════
v7 · PRODUCT-PAGE ENTRANCE ANIMATION
══════════════════════════════════════════ */
@keyframes spSlideL{from{opacity:0;transform:translateX(-46px) scale(.97)}to{opacity:1;transform:none}}
@keyframes spRiseUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes spZoomIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.single-product-main .sp-grid>div:first-child{animation:spSlideL .8s var(--ease) both}
.single-product-main .sp-info>*{animation:spRiseUp .7s var(--ease) both}
.single-product-main .sp-info>*:nth-child(1){animation-delay:.15s}
.single-product-main .sp-info>*:nth-child(2){animation-delay:.24s}
.single-product-main .sp-info>*:nth-child(3){animation-delay:.33s}
.single-product-main .sp-info>*:nth-child(4){animation-delay:.42s}
.single-product-main .sp-info>*:nth-child(5){animation-delay:.51s}
.single-product-main .sp-info>*:nth-child(6){animation-delay:.60s}
.single-product-main .sp-info>*:nth-child(7){animation-delay:.69s}
.single-product-main .sp-thumbs .sp-thumb{animation:spZoomIn .5s var(--ease) both}
.single-product-main .sp-thumbs .sp-thumb:nth-child(2){animation-delay:.12s}
.single-product-main .sp-thumbs .sp-thumb:nth-child(3){animation-delay:.24s}
.single-product-main .sp-thumbs .sp-thumb:nth-child(4){animation-delay:.36s}
@media (prefers-reduced-motion: reduce){.single-product-main .sp-grid>div:first-child,.single-product-main .sp-info>*,.single-product-main .sp-thumbs .sp-thumb{animation:none}}
/* grid card stagger on filter/render */
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.pgrid .pcard{animation:cardIn .55s var(--ease) both}
.pgrid .pcard:nth-child(2){animation-delay:.06s}.pgrid .pcard:nth-child(3){animation-delay:.12s}
.pgrid .pcard:nth-child(4){animation-delay:.18s}.pgrid .pcard:nth-child(5){animation-delay:.24s}
.pgrid .pcard:nth-child(6){animation-delay:.30s}.pgrid .pcard:nth-child(7){animation-delay:.36s}
.pgrid .pcard:nth-child(8){animation-delay:.42s}
@media (prefers-reduced-motion: reduce){.pgrid .pcard{animation:none}}
/* ══════════════════════════════════════════════════════
v9 · MIDNIGHT AESTHETIC — dark luxe theme (default)
Deep plum / wine / navy washes · glowing blooms & petals
══════════════════════════════════════════════════════ */
body.theme-dark{
--ink:#FBF7FF; --char:#E5DCF2; --muted:#AFA3CA;
--pinkT:#FF85B3; --violetT:#C9AEFF; --tealT:#5EEAD4; --goldT:#FFD98A;
--price:#FF8FBB;
--line:#352B4E; --bg:#161022; --white:#201936;
--pink-s:rgba(232,23,93,.18); --teal-s:rgba(13,148,136,.18);
--gold-s:rgba(245,166,35,.18); --violet-s:rgba(124,58,237,.20);
--sh:0 4px 18px rgba(0,0,0,.35); --shl:0 22px 60px rgba(0,0,0,.5);
--card:#201936; --card2:#271E42; --field:#191331;
}
/* body: midnight multi-colour wash */
body.theme-dark{color:var(--ink);background:
radial-gradient(1000px 660px at 12% -6%, rgba(232,23,93,.20), transparent 55%),
radial-gradient(880px 620px at 102% 16%, rgba(124,58,237,.22), transparent 55%),
radial-gradient(820px 660px at -6% 72%, rgba(37,99,235,.14), transparent 55%),
radial-gradient(940px 680px at 92% 108%, rgba(13,148,136,.16), transparent 55%),
linear-gradient(160deg,#1B1230 0%,#161022 34%,#1E0F26 66%,#121826 100%) !important;
background-attachment:fixed !important}
/* blooms & petals glow on dark */
body.theme-dark::before{opacity:1;filter:saturate(1.35) brightness(1.15)}
.hero::before,.hero::after,.b2b-hero::after,.blog-hero::after,.article-hero::after,
.shop-section::before,.sp-faq::before,.news-card::after,.qmodal::after,
body.theme-dark .sp-story-hist::after, body.theme-dark .sp-story-sig::after{filter:saturate(1.4) brightness(1.2)}
/* topbar & nav */
body.theme-dark #topbar{background:#0E0A18}
body.theme-dark #nav{background:rgba(20,14,32,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
body.theme-dark #nav.scrolled{background:rgba(16,11,26,.97);box-shadow:0 10px 34px rgba(0,0,0,.45)}
body.theme-dark .nav-search{background:#251C40;border:1.5px solid var(--line)}
body.theme-dark .nav-search input{color:var(--ink)}
body.theme-dark .nav-search input::placeholder{color:var(--muted)}
body.theme-dark .nl{color:var(--char)} .nl:hover,.nl.on{color:#fff}
body.theme-dark .nico{color:var(--char);background:#251C40}
body.theme-dark .nico:hover{background:var(--pink);color:#fff}
body.theme-dark .btn-si{background:#2A2148;color:#fff}
body.theme-dark .bname{color:var(--ink)}
body.theme-dark .gifts-panel, body.theme-dark .tb-panel, body.theme-dark .nav-search-drop{background:var(--card2);border-color:var(--line);box-shadow:0 24px 60px rgba(0,0,0,.55)}
body.theme-dark .gifts-opt, body.theme-dark .tb-opt{color:var(--char)}
body.theme-dark .gifts-opt:hover, body.theme-dark .tb-opt:hover, body.theme-dark .tb-opt.on{background:var(--pink-s);color:#fff}
body.theme-dark .tb-plabel{border-color:var(--line)} .tb-note{border-color:var(--line)}
/* hero */
body.theme-dark .hero{background:
radial-gradient(700px 460px at 14% 20%, rgba(232,23,93,.22), transparent 60%),
radial-gradient(640px 440px at 86% 14%, rgba(245,166,35,.16), transparent 60%),
radial-gradient(680px 480px at 84% 86%, rgba(124,58,237,.22), transparent 60%),
radial-gradient(600px 420px at 14% 88%, rgba(13,148,136,.16), transparent 60%),
linear-gradient(160deg,#221636,#1A102B 55%,#231029)}
body.theme-dark .hero-brand-name .hbn-l{color:#FDF8FF}
body.theme-dark body.theme-dark .hero-cat-chip{background:#251C40;border-color:var(--line);color:var(--char)}
body.theme-dark .hero-cat-chip:hover, body.theme-dark .hero-cat-chip.on{color:#fff}
@keyframes hbnGlow{0%,100%{text-shadow:0 0 0 rgba(232,23,93,0)}50%{text-shadow:0 8px 44px rgba(255,90,150,.65),0 2px 18px rgba(245,166,35,.4)}}
/* generic cards & surfaces */
.pcard,.blog-card,.b2b-serve-card,.b2b-step,.b2b-tier,.b2b-prod-card,.b2b-cat-card,
.sp-faq-item,.article-nav a,.blog-pager .page-numbers,.stat-card,
body.theme-dark .filter-sidebar, body.theme-dark .fs-title{background:var(--card);border-color:var(--line);color:var(--char)}
body.theme-dark .pcard, body.theme-dark .blog-card, body.theme-dark .b2b-prod-card, body.theme-dark .b2b-cat-card{box-shadow:var(--sh)}
body.theme-dark .pcard:hover{box-shadow:0 22px 56px rgba(232,23,93,.28),0 8px 24px rgba(0,0,0,.5)}
body.theme-dark .blog-card:hover{box-shadow:0 22px 56px rgba(124,58,237,.3)}
.pname,.blog-card-title a,.b2b-serve-card h4,.b2b-step h4,.b2b-prod-name,.b2b-cat-body h4,
body.theme-dark .trust-item h5, body.theme-dark .stat-num, body.theme-dark .sp-faq-item summary, body.theme-dark .b2b-tier-qty{color:var(--ink)}
body.theme-dark .pcard-img, body.theme-dark .blog-card-img, body.theme-dark .b2b-prod-img, body.theme-dark .b2b-cat-img{background:linear-gradient(135deg,#2A1C3E,#231A3C)}
body.theme-dark .blog-chip{background:#191331;border-color:var(--line);color:var(--muted)}
body.theme-dark .filter-sidebar{box-shadow:var(--sh)}
body.theme-dark .fg h4{color:var(--ink)} .fg-opt{color:var(--char)}
body.theme-dark .fg-opt:hover, body.theme-dark .fg-opt.on{background:var(--pink-s);color:#fff}
body.theme-dark .price-inputs input{background:var(--field);border-color:var(--line);color:var(--ink)}
body.theme-dark .sort-sel, body.theme-dark .filter-btn-top{background:var(--card);border-color:var(--line);color:var(--char)}
body.theme-dark .result-count{color:var(--muted)}
.shop-title,.sec-title,.b2b-sec-head h2,.news-title,.story-title,.sp-title,
body.theme-dark .article-title, body.theme-dark .b2b-title, body.theme-dark .sp-story-card h2, body.theme-dark .sp-faq-title, body.theme-dark .shop-eyebrow{color:var(--ink)}
/* light-tinted gradient panels → dark equivalents */
body.theme-dark .trust-strip{background:linear-gradient(120deg,#221537,#1C1430 45%,#14202E);border-color:var(--line)}
body.theme-dark .b2b-steps{background:linear-gradient(120deg,#201535,#171f33)}
body.theme-dark .b2b-products{background:linear-gradient(150deg,#231539,#1B1230 55%,#141C2E)}
body.theme-dark .b2b-hero, body.theme-dark .blog-hero, body.theme-dark .article-hero{background:linear-gradient(150deg,#251639 0%,#1B1030 45%,#141B2F 100%)}
body.theme-dark .b2b-eyebrow{background:#251C40;border-color:rgba(232,23,93,.4);color:#FF6FA5;box-shadow:none}
body.theme-dark .b2b-tier-hot{background:linear-gradient(160deg,#2C1838,#241329);border-color:var(--pink)}
body.theme-dark .b2b-tier li{color:var(--char);border-color:var(--line)}
body.theme-dark .news-card{background:linear-gradient(150deg,#241A3E,#1E142F 60%,#16202F);border-color:var(--line)}
body.theme-dark .news-sub{color:var(--muted)}
body.theme-dark .news-form{background:var(--field);border-color:var(--line)}
body.theme-dark .news-form input{color:var(--ink)}
body.theme-dark .sp-faq{background:linear-gradient(150deg,#231A3E,#1D1233 60%,#141E31);border-color:rgba(124,58,237,.4)}
body.theme-dark .sp-faq-item[open]{border-color:var(--violet)}
body.theme-dark .sp-faq-item p{color:var(--char)}
body.theme-dark .sp-story-hist{background:linear-gradient(150deg,#2A1F2A,#251527);border-color:rgba(245,166,35,.35)}
body.theme-dark .sp-story-sig{background:linear-gradient(150deg,#14262C,#151E31);border-color:rgba(13,148,136,.4)}
body.theme-dark .sp-story-card p{color:var(--char)}
body.theme-dark .sp-points li{color:var(--char);background:linear-gradient(90deg,rgba(232,23,93,.12),transparent 70%)}
body.theme-dark .sp-points li:nth-child(2n){background:linear-gradient(90deg,rgba(124,58,237,.12),transparent 70%)}
body.theme-dark .sp-points li:nth-child(3n){background:linear-gradient(90deg,rgba(245,166,35,.12),transparent 70%)}
body.theme-dark .btn-b2b-quote{background:transparent;color:#C4A8FF;border-color:var(--violet)}
body.theme-dark .btn-b2b-quote:hover{background:var(--violet);color:#fff}
body.theme-dark .b2b-cta-ghost{background:transparent;color:#FF7FB0;border-color:var(--pink)}
body.theme-dark .b2b-prod-quote{background:rgba(124,58,237,.15)}
body.theme-dark .article-body{color:var(--char)}
body.theme-dark .article-body h2, body.theme-dark .article-body h3{color:var(--ink)}
body.theme-dark .article-body blockquote{background:linear-gradient(90deg,rgba(245,166,35,.12),transparent)}
body.theme-dark .ak-breadcrumb, body.theme-dark .ak-breadcrumb a{color:var(--muted)}
body.theme-dark .sp-desc{color:var(--char)} .sp-now{color:var(--ink)}
body.theme-dark .sp-thumb{border-color:var(--line);background:var(--card)}
body.theme-dark .sp-carousel{background:linear-gradient(135deg,#2A1C3E,#231A3C)}
body.theme-dark .sp-arr{background:rgba(32,25,54,.9);color:var(--ink)}
body.theme-dark .sp-trust .trust-item{color:var(--muted)}
body.theme-dark .qmodal{background:linear-gradient(160deg,#251B40,#1F1435 55%,#171F33);border-color:rgba(232,23,93,.35)}
body.theme-dark .qmodal-head h3{color:var(--ink)}
body.theme-dark .qfield input, body.theme-dark .qfield textarea{background:var(--field);border-color:var(--line);color:var(--ink)}
body.theme-dark .qfield label{color:var(--muted)}
body.theme-dark .qmodal-x{background:var(--pink-s);color:#FF7FB0}
/* magic themes → dark variants */
body.theme-dark.bgtheme-sunset{background:
radial-gradient(940px 620px at 10% -4%, rgba(245,120,35,.24), transparent 55%),
radial-gradient(860px 600px at 100% 18%, rgba(232,23,93,.22), transparent 55%),
radial-gradient(820px 640px at 8% 84%, rgba(220,38,38,.16), transparent 55%),
linear-gradient(160deg,#2A1420 0%,#1F0F1C 45%,#241110 100%) !important;background-attachment:fixed !important}
body.theme-dark.bgtheme-ocean{background:
radial-gradient(940px 620px at 10% -4%, rgba(13,148,136,.24), transparent 55%),
radial-gradient(860px 600px at 100% 18%, rgba(37,99,235,.24), transparent 55%),
radial-gradient(820px 640px at 8% 84%, rgba(124,58,237,.16), transparent 55%),
linear-gradient(160deg,#0E1B2C 0%,#101425 45%,#0D2027 100%) !important;background-attachment:fixed !important}
body.theme-dark.bgtheme-royal{background:
radial-gradient(940px 620px at 10% -4%, rgba(124,58,237,.28), transparent 55%),
radial-gradient(860px 600px at 100% 18%, rgba(232,23,93,.2), transparent 55%),
radial-gradient(820px 640px at 8% 84%, rgba(245,166,35,.14), transparent 55%),
linear-gradient(160deg,#1E1236 0%,#170E2B 45%,#20102E 100%) !important;background-attachment:fixed !important}
body.theme-dark.bgtheme-garden{background:
radial-gradient(940px 620px at 10% -4%, rgba(22,163,74,.2), transparent 55%),
radial-gradient(860px 600px at 100% 18%, rgba(13,148,136,.22), transparent 55%),
radial-gradient(820px 640px at 8% 84%, rgba(245,166,35,.14), transparent 55%),
linear-gradient(160deg,#0F2318 0%,#0F1B22 45%,#14231A 100%) !important;background-attachment:fixed !important}
/* footer & mobile panel & drawers */
body.theme-dark .ak-footer{background:#0E0A18;border-top:1px solid var(--line)}
body.theme-dark .footer-about, body.theme-dark .footer-links a{color:var(--muted)}
body.theme-dark .footer-widget-title{color:var(--ink)}
body.theme-dark .mpanel, body.theme-dark .cart-drawer, body.theme-dark .pdrawer, body.theme-dark .amodal{background:var(--card)!important;color:var(--char)}
body.theme-dark .mp-cur{border-color:var(--line);color:var(--muted)}
body.theme-dark .empty-grid p{color:var(--muted)}
/* silk wave & paisley visibility boost on dark */
body.theme-dark .b2b-hero::before, body.theme-dark .blog-hero::before, body.theme-dark .article-hero::before, body.theme-dark .trust-strip::before, body.theme-dark .ak-footer::before{filter:saturate(1.5) brightness(1.5);opacity:.75}
/* v10 · bright accent text for dark readability */
.pcat,.b2b-prod-cat,.blog-chip-cat,.story-eyebrow,.shop-eyebrow,.b2b-cat-go,
body.theme-dark .blog-card-more, body.theme-dark .qmodal-prod, body.theme-dark .footer-widget-title::after{color:var(--pinkT)}
body.theme-dark .blog-chip-cat{background:rgba(232,23,93,.22);color:var(--pinkT)}
body.theme-dark .pcat{background:rgba(232,23,93,.2)}
body.theme-dark .poff{background:rgba(13,148,136,.22);color:var(--tealT)}
body.theme-dark .pwas{color:var(--muted)}
body.theme-dark .ppor, body.theme-dark .sp-por{color:var(--goldT)}
body.theme-dark .b2b-sec-head h2 em, body.theme-dark .sec-title em, body.theme-dark .news-title em, body.theme-dark .story-title em, body.theme-dark .sp-faq-title em, body.theme-dark .b2b-title em{font-style:italic;color:var(--pinkT)}
body.theme-dark .stat-lab{color:var(--muted)}
body.theme-dark .b2b-tier-tag{background:rgba(232,23,93,.2);color:var(--pinkT)}
body.theme-dark .b2b-tier-hot .b2b-tier-tag{background:var(--pink);color:#fff}
body.theme-dark .b2b-serve-card p, body.theme-dark .b2b-step p, body.theme-dark .trust-item p, body.theme-dark .b2b-cat-body p, body.theme-dark .blog-card-ex, body.theme-dark .b2b-sub, body.theme-dark .news-sub, body.theme-dark .blog-sub{color:var(--muted)}
body.theme-dark .hero-brand-tag{color:var(--pinkT)}
body.theme-dark .tb-tagline{color:rgba(255,255,255,.82)}
/* ══════════════════════════════════════════════════════
v10 · LIGHT THEME (toggle) — body.theme-light
══════════════════════════════════════════════════════ */
body.theme-light, body:not(.theme-dark){
--ink:#1B1524; --char:#463D57; --muted:#7A7090;
--line:#EBE4F2; --bg:#FBF8FD; --white:#fff;
--card:#ffffff; --card2:#ffffff; --field:#F6F2FA;
--pinkT:#D60450; --violetT:#6D28D9; --tealT:#0B8377; --goldT:#B8860B;
--price:#D60450;
--pink-s:rgba(232,23,93,.09); --teal-s:rgba(13,148,136,.10);
--gold-s:rgba(245,166,35,.12); --violet-s:rgba(124,58,237,.10);
--sh:0 4px 16px rgba(60,30,80,.08); --shl:0 22px 55px rgba(60,30,80,.14);
}
body.theme-light, body:not(.theme-dark){background:
radial-gradient(900px 600px at 15% -5%, rgba(232,23,93,.09), transparent 55%),
radial-gradient(800px 560px at 100% 20%, rgba(245,166,35,.08), transparent 55%),
radial-gradient(760px 620px at -5% 70%, rgba(124,58,237,.07), transparent 55%),
radial-gradient(900px 640px at 90% 105%, rgba(13,148,136,.07), transparent 55%),
linear-gradient(165deg,#FFFDFA 0%,#FDF4F8 30%,#F8F4FE 60%,#F3FAF8 100%) !important;
background-attachment:fixed !important}
body:not(.theme-dark) #topbar{background:var(--ink)}
body:not(.theme-dark) #nav{background:rgba(255,255,255,.94)}
body:not(.theme-dark) #nav.scrolled{background:rgba(255,255,255,.99);box-shadow:0 10px 30px rgba(60,30,80,.10)}
body:not(.theme-dark) .nav-search{background:#F4EFF9}
body:not(.theme-dark) .nico{background:#F4EFF9}
body:not(.theme-dark) .nico:hover{background:var(--pink);color:#fff}
body:not(.theme-dark) .btn-si{background:var(--ink)}
body:not(.theme-dark) .hero{background:
radial-gradient(560px 380px at 12% 18%, rgba(232,23,93,.10), transparent 62%),
radial-gradient(520px 360px at 88% 14%, rgba(245,166,35,.12), transparent 62%),
radial-gradient(560px 400px at 82% 84%, rgba(124,58,237,.09), transparent 62%),
linear-gradient(160deg,#FFFDFB,#FFF5F8 55%,#FBF6FF)}
body:not(.theme-dark) .hero-brand-name .hbn-l{color:var(--ink)}
body:not(.theme-dark) .hero-brand-name .hbn-pink{color:var(--pink)}
body:not(.theme-dark) .hero-cat-chip{background:#fff;border-color:var(--line);color:var(--char)}
body:not(.theme-dark) .hero-cat-chip.on,body:not(.theme-dark) .hero-cat-chip:hover{color:#fff}
body:not(.theme-dark) .trust-strip{background:linear-gradient(120deg,#FFF6F9,#FFFBF2 45%,#F5F3FE)}
body:not(.theme-dark) .b2b-steps{background:linear-gradient(120deg,#FFF6F9,#F5F9FF 60%,#F7F4FE)}
body:not(.theme-dark) .b2b-products{background:linear-gradient(150deg,#FFF9F4,#FDF4F9 55%,#F4F7FE)}
body:not(.theme-dark) .b2b-hero,body:not(.theme-dark) .blog-hero,body:not(.theme-dark) .article-hero{background:transparent}
body:not(.theme-dark) .b2b-eyebrow{background:#fff;border-color:rgba(232,23,93,.25);color:var(--pink)}
body:not(.theme-dark) .news-card{background:linear-gradient(135deg,#FFF9FB,#FDF6FF 60%,#F5FBFA)}
body:not(.theme-dark) .sp-faq{background:linear-gradient(150deg,#FBF7FF,#FFF5F9 60%,#F4FAFF);border-color:rgba(124,58,237,.18)}
body:not(.theme-dark) .sp-story-hist{background:linear-gradient(150deg,#FFF6EC,#FFEFF5);border-color:rgba(245,166,35,.3)}
body:not(.theme-dark) .sp-story-sig{background:linear-gradient(150deg,#F1FBF9,#F2F4FF);border-color:rgba(13,148,136,.3)}
body:not(.theme-dark) .b2b-tier-hot{background:linear-gradient(160deg,#FFF9FB,#FFF3F7)}
body:not(.theme-dark) .qmodal{background:linear-gradient(160deg,#FFFDFB,#FFF6F9 55%,#F8F5FF);border-color:rgba(232,23,93,.15)}
body:not(.theme-dark) .qmodal-x{background:var(--pink-s);color:var(--pink)}
body:not(.theme-dark) .sp-carousel,body:not(.theme-dark) .pcard-img,body:not(.theme-dark) .blog-card-img,
body:not(.theme-dark) .b2b-prod-img,body:not(.theme-dark) .b2b-cat-img{background:linear-gradient(135deg,#FFF3F7,#F6F1FF)}
body:not(.theme-dark) .sp-arr{background:rgba(255,255,255,.94);color:var(--ink)}
body:not(.theme-dark) .btn-b2b-quote{background:#fff;color:var(--violetT)}
body:not(.theme-dark) .b2b-cta-ghost{background:#fff;color:var(--pink)}
body:not(.theme-dark) .ak-footer{background:#17111F}
body:not(.theme-dark)::before{filter:none}
body:not(.theme-dark) .blog-chip-cat{background:var(--pink-s)}
body:not(.theme-dark) .pcat{background:var(--pink-s)}
/* light versions of magic themes */
body:not(.theme-dark).bgtheme-sunset{background:radial-gradient(760px 460px at 10% 6%, rgba(245,140,35,.16), transparent 62%),radial-gradient(700px 440px at 92% 14%, rgba(232,23,93,.13), transparent 62%),linear-gradient(180deg,#FFF8F0 0%,#FFEFE4 45%,#FDEBEF 100%) !important;background-attachment:fixed !important}
body:not(.theme-dark).bgtheme-ocean{background:radial-gradient(760px 460px at 8% 8%, rgba(13,148,136,.14), transparent 62%),radial-gradient(700px 440px at 90% 16%, rgba(37,99,235,.12), transparent 62%),linear-gradient(180deg,#F4FCFB 0%,#EEF6FF 55%,#F3F1FE 100%) !important;background-attachment:fixed !important}
body:not(.theme-dark).bgtheme-royal{background:radial-gradient(760px 460px at 8% 6%, rgba(124,58,237,.15), transparent 62%),radial-gradient(700px 440px at 92% 12%, rgba(232,23,93,.11), transparent 62%),linear-gradient(180deg,#FAF6FF 0%,#F6EFFB 50%,#FDF2F7 100%) !important;background-attachment:fixed !important}
body:not(.theme-dark).bgtheme-garden{background:radial-gradient(760px 460px at 8% 6%, rgba(22,163,74,.12), transparent 62%),radial-gradient(700px 440px at 92% 14%, rgba(13,148,136,.12), transparent 62%),linear-gradient(180deg,#F5FBF4 0%,#EFF9F3 50%,#FDF8EC 100%) !important;background-attachment:fixed !important}
/* theme toggle button */
.tb-theme{width:34px;height:26px;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font-size:.78rem;cursor:pointer;transition:.2s}
.tb-theme:hover{background:rgba(255,255,255,.18);color:#fff}
/* hero logo image (optional, replaces text when set) */
.hero-logo-img{max-width:min(420px,80vw);max-height:150px;margin:0 auto 0;display:block;filter:drop-shadow(0 10px 34px rgba(232,23,93,.35));animation:hbnRise .9s var(--ease) both}
/* ══════════════════════════════════════════════════════
v11 · ROYAL PALETTE — light-first brand colors
Royal Blue · Pink · Saffron · Navy · Gold
══════════════════════════════════════════════════════ */
:root{
--pink:#E8175D; --pink-d:#C10E4B;
--royal:#2745C9; --royal-d:#1B2F96; /* Royal Blue */
--saffron:#FF8A1E; --saffron-d:#E06E00; /* Saffron */
--navy:#14235A; /* Dark Blue */
--goldd:#C9971C; /* Golden */
/* remap legacy accents to the new scheme site-wide */
--violet:var(--royal); --violet-s:rgba(39,69,201,.10);
--gold:var(--saffron); --gold-s:rgba(255,138,30,.13);
--teal:#0E8A6B; --teal-s:rgba(14,138,107,.10);
--thread:linear-gradient(135deg,var(--pink),var(--saffron) 45%,var(--royal));
/* light-default tokens */
--ink:#141E4E; --char:#3A4370; --muted:#6E7699;
--line:#E5E4F2; --bg:#FBFAFE; --white:#fff;
--card:#ffffff; --card2:#ffffff; --field:#F5F4FB;
--pinkT:#D61153; --violetT:var(--royal); --tealT:#0B7A5E; --goldT:#B07E0A;
--price:#D61153;
--pink-s:rgba(232,23,93,.09);
--sh:0 4px 16px rgba(20,35,90,.08); --shl:0 22px 55px rgba(20,35,90,.14);
}
/* light default body wash — royal/pink/saffron glows on ivory */
body:not(.theme-dark){background:
linear-gradient(135deg,#FFEAF3 0%,#FFF3EC 30%,#F1F0FE 65%,#EAF1FF 100%) !important;
background-attachment:fixed !important}
body:not(.theme-dark) .hero{background:
radial-gradient(600px 400px at 12% 18%, rgba(232,23,93,.11), transparent 62%),
radial-gradient(560px 380px at 88% 14%, rgba(255,138,30,.13), transparent 62%),
radial-gradient(580px 420px at 84% 86%, rgba(39,69,201,.10), transparent 62%),
linear-gradient(160deg,#FFFEFC,#FFF4F7 50%,#F4F6FF)}
/* royal-blue headings + saffron/pink accents in light */
body:not(.theme-dark) .shop-title,body:not(.theme-dark) .b2b-sec-head h2,
body:not(.theme-dark) .sp-title,
body:not(.theme-dark) .article-title,body:not(.theme-dark) .b2b-title,
body:not(.theme-dark) .sp-faq-title,body:not(.theme-dark) .sp-story-card h2,
body:not(.theme-dark) .blog-card-title a,body:not(.theme-dark) .pname{color:var(--navy)}
body:not(.theme-dark) .b2b-title em,body:not(.theme-dark) .shop-title em,
body:not(.theme-dark) .b2b-sec-head h2 em,body:not(.theme-dark) .story-title em{color:var(--pink)}
body:not(.theme-dark) .hero-brand-name .hbn-l{color:var(--navy)}
body:not(.theme-dark) .hero-brand-name .hbn-pink{color:var(--pink)}
body:not(.theme-dark) .hero-brand-tag{color:var(--saffron-d)}
body:not(.theme-dark) .shop-eyebrow,body:not(.theme-dark) .story-eyebrow{color:var(--saffron-d)}
body:not(.theme-dark) .pcat{background:rgba(255,138,30,.14);color:var(--saffron-d)}
body:not(.theme-dark) .pnow{color:var(--price)}
body:not(.theme-dark) .nl.on,body:not(.theme-dark) .nl:hover{color:var(--royal)}
body:not(.theme-dark) .blog-card-more,body:not(.theme-dark) .b2b-cat-go{color:var(--royal)}
body:not(.theme-dark) .story-cta,body:not(.theme-dark) .b2b-cta{background:linear-gradient(90deg,var(--pink),var(--royal))}
body:not(.theme-dark) .btn-buy-now{background:linear-gradient(90deg,var(--saffron),#F06B00)}
body:not(.theme-dark) .qsend{background:linear-gradient(90deg,#25D366,#128C7E)}
body:not(.theme-dark) .stat-num{color:var(--goldd)}
/* ── dark theme: royal-tinted midnight with proper text visibility ── */
body.theme-dark{
--ink:#F7F5FE; --char:#DEDAF0; --muted:#A7A2C6;
--pinkT:#FF8AB6; --violetT:#93A8FF; --tealT:#4FD8B0; --goldT:#FFC65C;
--price:#FF95BE;
--line:#2E3358; --bg:#12152B; --white:#1C2040;
--card:#1C2040; --card2:#232858; --field:#161A36;
}
body.theme-dark{background:
radial-gradient(1000px 660px at 12% -6%, rgba(232,23,93,.20), transparent 55%),
radial-gradient(880px 620px at 102% 16%, rgba(39,69,201,.30), transparent 55%),
radial-gradient(820px 660px at -6% 72%, rgba(255,138,30,.12), transparent 55%),
radial-gradient(940px 680px at 92% 108%, rgba(201,151,28,.14), transparent 55%),
linear-gradient(160deg,#171B38 0%,#12152B 40%,#1C1230 72%,#101B33 100%) !important;
background-attachment:fixed !important}
body.theme-dark .pname,body.theme-dark .blog-card-title a{color:var(--ink)}
body.theme-dark .pcat{background:rgba(255,138,30,.2);color:var(--goldT)}
body.theme-dark .nl.on,body.theme-dark .nl:hover{color:var(--violetT)}
/* WhatsApp "Ask Us" glowing pill (both themes) */
.wa-ask{position:fixed;right:22px;bottom:22px;z-index:960;display:flex;align-items:center;gap:10px;padding:13px 22px 13px 15px;border-radius:50px;background:linear-gradient(120deg,#25D366,#0FA968 55%,#128C7E);color:#fff;font-weight:800;font-size:.9rem;box-shadow:0 0 0 rgba(37,211,102,.6),0 8px 26px rgba(37,211,102,.55),0 0 22px rgba(37,211,102,.5);animation:waPulse 2.2s ease-in-out infinite;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.wa-ask:hover{transform:scale(1.08);color:#fff;box-shadow:0 0 0 6px rgba(37,211,102,.18),0 12px 36px rgba(37,211,102,.7),0 0 34px rgba(37,211,102,.75)}
.wa-ask i{font-size:1.35rem;filter:drop-shadow(0 0 5px rgba(255,255,255,.55))}
/* Two expanding halo rings for a stronger pulsing glow */
.wa-ask::before,.wa-ask::after{content:'';position:absolute;inset:0;border-radius:50px;border:2px solid rgba(37,211,102,.6);pointer-events:none}
.wa-ask::before{animation:waRing 2.2s ease-out infinite}
.wa-ask::after{animation:waRing 2.2s ease-out infinite;animation-delay:1.1s}
@keyframes waPulse{
0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.55),0 8px 26px rgba(37,211,102,.5),0 0 20px rgba(37,211,102,.45)}
50%{box-shadow:0 0 0 10px rgba(37,211,102,0),0 12px 40px rgba(37,211,102,.85),0 0 40px rgba(37,211,102,.9)}
}
@keyframes waRing{0%{transform:scale(.92);opacity:.85}100%{transform:scale(1.5);opacity:0}}
@media(max-width:640px){.wa-ask{padding:11px 18px 11px 13px;font-size:.82rem;right:14px;bottom:14px}}
@media (prefers-reduced-motion: reduce){.wa-ask,.wa-ask::before,.wa-ask::after{animation:none}}
/* .ig-dm swaps the same glowing-pill treatment from WhatsApp green to
Instagram's own signature gradient — same shape/pulse/ring animation,
just recoloured, so "DM Us" reads as an Instagram action at a glance
instead of looking like a leftover green WhatsApp button with new text. */
.ig-dm{background:linear-gradient(135deg,#FEDA75,#F58529 30%,#DD2A7B 55%,#8134AF 75%,#515BD4);
box-shadow:0 0 0 rgba(221,42,123,.6),0 8px 26px rgba(221,42,123,.5),0 0 22px rgba(129,52,175,.45);
animation:igPulse 2.2s ease-in-out infinite}
.ig-dm:hover{box-shadow:0 0 0 6px rgba(221,42,123,.16),0 12px 36px rgba(221,42,123,.65),0 0 34px rgba(81,91,212,.6)}
.ig-dm::before,.ig-dm::after{border-color:rgba(221,42,123,.55)}
@keyframes igPulse{
0%,100%{box-shadow:0 0 0 0 rgba(221,42,123,.5),0 8px 26px rgba(221,42,123,.45),0 0 20px rgba(129,52,175,.4)}
50%{box-shadow:0 0 0 10px rgba(221,42,123,0),0 12px 40px rgba(221,42,123,.8),0 0 40px rgba(81,91,212,.8)}
}
/* ══════════════════════════════════════════
v11.1 · CROSS-THEME COLOR AUDIT FIXES
══════════════════════════════════════════ */
/* Story band is always a dark panel — force light text in BOTH themes */
.story-band .story-title{color:#fff}
.story-band .story-title em{color:#FF8AB6}
.story-band .story-eyebrow{color:#FFB45C}
.story-band .story-text{color:rgba(255,255,255,.78)}
.story-band .stat-num{color:#FFD98A}
.story-band .stat-lab{color:rgba(255,255,255,.62)}
.story-band .stat-card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.story-band .story-cta{background:linear-gradient(90deg,var(--pink),var(--saffron));color:#fff}
/* Footer is always dark — force light text/brand in BOTH themes */
.ak-footer{background:#141731;font-family:Tahoma,'Segoe UI',Verdana,sans-serif}
.ak-footer .bname{color:#fff}
.ak-footer .btag{color:#FF8AB6}
.ak-footer .footer-widget-title{color:#fff}
.ak-footer .footer-about,.ak-footer .footer-links a,.ak-footer .footer-links li{color:#fff}
.ak-footer .footer-links a:hover{color:#FFD98A}
.ak-footer .fsoc{background:rgba(255,255,255,.08);color:rgba(255,255,255,.75)}
.ak-footer .fsoc:hover{background:var(--pink);color:#fff}
body.theme-dark .ak-footer{background:#0D1024}
/* Topbar always dark strip */
#topbar{background:#10132B}
.tb-tagline{color:rgba(255,255,255,.82)}
.tb-tagline i{color:#FFB45C}
/* ══════════════════════════════════════════
v11.1 · CLEAN READABLE NUMERALS (prices, stats)
══════════════════════════════════════════ */
.pnow,.pnow .woocommerce-Price-amount,.sp-now,.pwas,
.cart-drawer .woocommerce-Price-amount,.qmodal .woocommerce-Price-amount,
.woocommerce-Price-amount{font-family:Tahoma,'Segoe UI',Verdana,sans-serif !important;font-weight:800;letter-spacing:.2px}
.pnow{font-size:1.08rem}
.sp-now{font-size:1.65rem}
.pwas{font-weight:600;font-size:.82rem;text-decoration:line-through}
.stat-num{font-family:Tahoma,'Segoe UI',Verdana,sans-serif;font-weight:800;font-size:1.75rem;letter-spacing:.3px}
.b2b-tier-qty{font-family:Tahoma,'Segoe UI',Verdana,sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:.2px}
/* ══════════════════════════════════════════
v11.2 · GRID COLUMNS · SLIDER · CONTRAST · PRODUCT PAGE
══════════════════════════════════════════ */
/* 4 / 3 / 2 product columns — clean density */
.pgrid{grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media(max-width:1240px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.pgrid{grid-template-columns:repeat(2,1fr);gap:.7rem}}
.shop-layout .pgrid{grid-template-columns:repeat(3,1fr)}
@media(min-width:1360px){.shop-layout .pgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1100px){.shop-layout .pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.shop-layout .pgrid{grid-template-columns:repeat(2,1fr)}}
/* NO GREY TEXT — near-black on light, near-white on dark */
body:not(.theme-dark){--char:#20294F; --muted:#3D466E}
body.theme-dark{--char:#F1EDFA; --muted:#CFC9E6}
/* dual price slider */
.price-slider{position:relative;height:26px;margin:.6rem 2px .2rem}
.ps-track{position:absolute;top:11px;left:0;right:0;height:5px;border-radius:5px;background:var(--line)}
.ps-fill{position:absolute;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,var(--pink),var(--royal))}
.price-slider input[type=range]{position:absolute;top:0;left:0;width:100%;height:26px;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;margin:0}
.price-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:19px;height:19px;border-radius:50%;background:#fff;border:3px solid var(--pink);box-shadow:0 2px 8px rgba(232,23,93,.4);cursor:grab;pointer-events:auto;margin-top:0}
.price-slider input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--pink);box-shadow:0 2px 8px rgba(232,23,93,.4);cursor:grab;pointer-events:auto}
.price-slider #pMax::-webkit-slider-thumb{border-color:var(--royal);box-shadow:0 2px 8px rgba(39,69,201,.4)}
.price-slider #pMax::-moz-range-thumb{border-color:var(--royal)}
.ps-values{display:flex;justify-content:space-between;font-size:.78rem;font-weight:800;color:var(--char);font-family:Tahoma,sans-serif}
body.theme-dark .price-slider input[type=range]::-webkit-slider-thumb{background:var(--card)}
/* ── product page: creative upgrade ── */
.sp-carousel{border-radius:20px;position:relative;box-shadow:0 18px 50px rgba(20,35,90,.16)}
.sp-carousel::before{content:'';position:absolute;inset:-3px;border-radius:23px;background:linear-gradient(135deg,var(--pink),var(--saffron) 45%,var(--royal));z-index:-1}
.sp-title{position:relative;padding-bottom:.8rem}
.sp-title::after{content:'';position:absolute;left:0;bottom:0;width:90px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--pink),var(--saffron),var(--royal));animation:titleBar 1s var(--ease) both .5s}
@keyframes titleBar{from{width:0;opacity:0}to{width:90px;opacity:1}}
.sp-meta-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 1.1rem}
.sp-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:20px;font-size:.72rem;font-weight:800;letter-spacing:.3px}
.sp-chip-medium{background:rgba(255,138,30,.14);color:var(--saffron-d)}
.sp-chip-dim{background:rgba(39,69,201,.10);color:var(--royal)}
.sp-chip-ship{background:rgba(14,138,107,.12);color:var(--tealT)}
body.theme-dark .sp-chip-medium{color:var(--goldT)}
body.theme-dark .sp-chip-dim{color:var(--violetT)}
@media(max-width:760px){.sp-carousel::before{inset:-2px}}
/* ══════════════════════════════════════════
v11.3 · FINAL PRODUCT GRID — clean at every width
══════════════════════════════════════════ */
/* desktop: 4 across open grids, 3 beside the sidebar */
.pgrid{grid-template-columns:repeat(4,1fr);gap:1.15rem}
.shop-layout .pgrid{grid-template-columns:repeat(3,1fr)}
@media(min-width:1450px){.shop-layout .pgrid{grid-template-columns:repeat(4,1fr)}}
/* tablets */
@media(max-width:1180px){.pgrid,.shop-layout .pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.pgrid,.shop-layout .pgrid{grid-template-columns:repeat(2,1fr);gap:.9rem}}
/* phones: ALWAYS 2 compact columns — never one giant card */
@media(max-width:560px){
.pgrid,.shop-layout .pgrid{grid-template-columns:repeat(2,1fr) !important;gap:.6rem}
.pcard-info{padding:.7rem .75rem .85rem}
.pcat{font-size:.52rem;padding:2px 8px;letter-spacing:1.1px;margin-bottom:.3rem}
.pname{font-size:.8rem;margin-bottom:.45rem;line-height:1.25}
.pnow{font-size:.92rem}
.pwas{font-size:.68rem}
.padd{padding:6px 10px;font-size:.66rem;border-radius:9px}
.padd i{font-size:.7rem}
.pbadge{font-size:.52rem;padding:3px 8px;top:8px;left:8px}
.pwish{width:28px;height:28px;font-size:.75rem;top:8px;right:8px}
.b2b-prod-grid{grid-template-columns:repeat(2,1fr) !important;gap:.6rem}
.b2b-prod-body{padding:.7rem .75rem .85rem}
.b2b-prod-name{font-size:.78rem}
}
/* card image never towers */
.pcard-img{aspect-ratio:4/5;max-height:340px}
.pcard-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:560px){.pcard-img{max-height:230px}}
/* ══════════════════════════════════════════
v11.4 · CRITICAL: products column flex fix
(live-site bug: grid collapsed to slivers)
══════════════════════════════════════════ */
.products-col{flex:1 1 auto;min-width:0;width:100%}
.pgrid{width:100%}
.pcard{min-width:0}
.shop-layout > .filter-sidebar{flex:0 0 240px}
/* v11.5 · richer petal shower (12 petals) */
/* ══════════════════════════════════════════════════════
ROUND CENTERED LOGO (replaces old wordmark-only mark)
══════════════════════════════════════════════════════ */
.hero-round-logo{width:150px;height:150px;border-radius:50%;margin:0 auto 1.4rem;
border:3px solid rgba(232,23,93,.35);background:rgba(255,255,255,.75);
box-shadow:0 10px 36px rgba(232,23,93,.18);overflow:hidden;
display:flex;align-items:center;justify-content:center}
.hero-round-logo img{width:100%;height:100%;object-fit:cover}
.hero-round-logo-fallback{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:3.1rem;
background:linear-gradient(135deg,var(--pink),var(--violet));-webkit-background-clip:text;
background-clip:text;color:transparent}
@media(max-width:640px){.hero-round-logo{width:104px;height:104px;margin-bottom:1rem}
.hero-round-logo-fallback{font-size:2.1rem}}
/* ══════════════════════════════════════════════════════
HERO REDESIGN v2 — flanking video panels, big centered
logo, shifted up, logo-colour tint. No category chips.
══════════════════════════════════════════════════════ */
.hero-flanked{min-height:56vh;display:grid;grid-template-columns:1fr minmax(340px,560px) 1fr;
align-items:center;padding-top:calc(var(--tbh) + var(--nh) + 1rem);padding-bottom:1.5rem;position:relative;overflow:hidden}
.hero-side-video{position:relative;height:100%;min-height:220px;overflow:hidden}
.hsv-carousel{position:absolute;inset:0}
.hsv-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hsv-slide.on{opacity:1}
.hsv-slide video{width:100%;height:100%;object-fit:cover}
.hsv-tint{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(160deg,rgba(232,23,93,.24) 0%,rgba(255,138,30,.14) 45%,rgba(39,69,201,.20) 100%)}
.hero-side-l{clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
.hero-side-r{clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}
.hero-side-video:empty,.hero-side-video:not(:has(.hsv-carousel)){
background:linear-gradient(160deg,rgba(232,23,93,.10),rgba(39,69,201,.08))}
.hero-brand-banner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;
justify-content:flex-start;align-self:start;padding:0 1rem;text-align:center}
.hero-round-logo-lg{width:190px;height:190px;margin-bottom:1.3rem;border-width:4px;
box-shadow:0 14px 46px rgba(232,23,93,.25)}
@media(max-width:1180px){.hero-flanked{grid-template-columns:1fr}
.hero-side-video{display:none}
.hero-round-logo-lg{width:150px;height:150px}}
@media(max-width:640px){.hero-flanked{min-height:auto;padding-top:calc(var(--tbh) + var(--nh) + .6rem);padding-bottom:1rem}
.hero-round-logo-lg{width:120px;height:120px;margin-bottom:1rem}}
/* ══════════════════════════════════════════════════════
PRODUCT GRID — locked 3 per row on desktop, filter hugs left
══════════════════════════════════════════════════════ */
.shop-layout{align-items:flex-start;gap:1.4rem}
.shop-layout .filter-sidebar{margin-left:0}
.shop-layout .pgrid{grid-template-columns:repeat(3,1fr) !important;gap:1.3rem}
@media(max-width:1180px){.shop-layout .pgrid{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:560px){.shop-layout .pgrid{grid-template-columns:repeat(2,1fr) !important;gap:.6rem}}
/* ══════════════════════════════════════════════════════
CONSISTENT CARD ALIGNMENT — every card same shape,
text never pushes buttons out of line
══════════════════════════════════════════════════════ */
.pcard{display:flex;flex-direction:column;height:100%}
.pcard-info{display:flex;flex-direction:column;flex:1}
.pname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
min-height:2.6em;line-height:1.3}
.pfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.pprices{display:flex;flex-direction:column;gap:1px;min-width:0}
.pcat{display:inline-block}
/* ══════════════════════════════════════════════════════
SHOP SECTION — separated with a real boundary + medium-dark
background band so the collection reads as its own zone
══════════════════════════════════════════════════════ */
.shop-section{position:relative;padding-top:1.2rem;padding-bottom:2.5rem;margin-top:0}
.shop-section > .wrap{position:relative;z-index:2}
.shop-header{padding-top:0}
.shop-title,.shop-eyebrow{color:#fff}
.shop-title em{color:#FFB4CE}
.result-count{color:rgba(255,255,255,.75)}
.filter-btn-top{background:#fff;color:var(--ink)}
.filter-sidebar{background:#fff}
@media(max-width:760px){.shop-section::before{height:34px}.shop-section{padding-top:.7rem}
.shop-header{padding-bottom:.5rem}
.ak-filter-toggle{margin-bottom:.8rem}}
/* ══════════════════════════════════════════════════════
REFINEMENTS ROUND 2
══════════════════════════════════════════════════════ */
/* 1. Reduce the big empty gap above the hero content */
.hero-flanked{padding-top:calc(var(--tbh) + var(--nh) + .1rem);min-height:auto;padding-bottom:1rem}
/* 2. Nav links centered in the bar, bigger */
.nav-inner{position:relative}
/* Nav: proper 3-column grid so links center WITHOUT overlapping logo/actions */
.nav-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem}
.nav-links{position:static;transform:none;display:flex;align-items:center;justify-content:center;
font-size:.96rem;gap:.25rem;flex-wrap:wrap}
.nl{font-size:.95rem;padding:.5rem .7rem;white-space:nowrap}
@media(max-width:860px){.nav-links{display:none}}
/* 3. Shop section: transparent, same gradient flows through from body */
.shop-section{background:transparent}
.shop-title,.shop-eyebrow{color:var(--ink)}
.shop-title em{color:var(--pink)}
.result-count{color:var(--muted)}
/* 4. Video panels: plain rectangles, no diagonal cropping — full square/rect video shows as-is */
.hero-side-l,.hero-side-r{clip-path:none}
.hero-side-video{border-radius:18px;margin:0 14px}
.hsv-slide video,.hsv-slide img{object-fit:cover;width:100%;height:100%}
/* 5. Bigger centered logo */
.hero-round-logo-lg{width:230px;height:230px;margin-bottom:1.4rem}
@media(max-width:1180px){.hero-round-logo-lg{width:180px;height:180px}}
@media(max-width:640px){.hero-round-logo-lg{width:140px;height:140px}}
/* 6. Toolbar: filter trigger only, mobile-only */
.toolbar-mobile-only{display:none}
@media(max-width:1060px){
.toolbar-mobile-only{display:flex;align-items:center;justify-content:flex-end;width:100%}
.filter-btn-top{display:inline-flex}
}
/* ══════════════════════════════════════════════════════
ROUND 3 — bigger logo, tighter top, wider search, mobile-tuned
══════════════════════════════════════════════════════ */
/* Logo: bigger still, shifted up (less bottom margin pulls search closer too) */
.hero-round-logo-lg{width:270px;height:270px;margin-bottom:1rem;border-width:4px}
@media(max-width:1180px){.hero-round-logo-lg{width:210px;height:210px;margin-bottom:.8rem}}
@media(max-width:760px){.hero-round-logo-lg{width:160px;height:160px;margin-bottom:.7rem}}
@media(max-width:480px){.hero-round-logo-lg{width:120px;height:120px;margin-bottom:.6rem}}
/* Hero content pulled even closer to the nav */
.hero-flanked{padding-top:calc(var(--tbh) + var(--nh));padding-bottom:.4rem;max-height:64vh;overflow:visible}
@media(max-width:760px){.hero-flanked{padding-top:calc(var(--tbh) + var(--nh));padding-bottom:.6rem;max-height:none}}
/* Search bar: noticeably wider and taller */
.hero-search{max-width:720px;border-radius:60px;border-width:2.5px;box-shadow:0 8px 32px rgba(232,23,93,.14)}
.hero-search input{padding:1.1rem 1.6rem;font-size:1.05rem}
.hero-search button{padding:1.1rem 2.2rem;font-size:1rem}
@media(max-width:760px){
.hero-search{max-width:94vw;border-radius:40px}
.hero-search input{padding:.8rem 1.1rem;font-size:.92rem}
.hero-search button{padding:.8rem 1.3rem;font-size:.88rem}
.hero-search button span,.hero-search button{white-space:nowrap}
}
@media(max-width:480px){
.hero-search{flex-direction:column;border-radius:20px;box-shadow:0 6px 20px rgba(232,23,93,.12)}
.hero-search input{width:100%;text-align:center;padding:.9rem 1rem}
.hero-search button{width:100%;justify-content:center;border-radius:0 0 18px 18px}
}
/* Mobile: hero block sits comfortably, side video panels already hidden ≤1180px */
@media(max-width:760px){
.hero-brand-banner{padding:0 .8rem}
}
/* ══════════════════════════════════════════════════════
FIX — "% off" badge: guaranteed visible, solid, on-brand
══════════════════════════════════════════════════════ */
.poff{background:linear-gradient(90deg,#E8175D,#F04A86) !important;color:#fff !important;
font-size:.66rem;font-weight:800;padding:3px 10px;border-radius:20px;letter-spacing:.3px;
box-shadow:0 2px 6px rgba(232,23,93,.28);display:inline-block}
/* ══════════════════════════════════════════════════════
ROUND 4 — tighter logo/nav gap, narrower search bar
══════════════════════════════════════════════════════ */
.hero-flanked{align-items:start}
.hero-brand-banner{padding-top:0 !important;margin-top:0 !important}
.hero-round-logo-lg{margin-bottom:.6rem}
/* Search bar: narrower, no longer stretching wide */
.hero-search{max-width:400px !important;border-radius:40px !important;box-shadow:0 2px 12px rgba(232,23,93,.10) !important;border-width:1.5px !important}
.hero-search input{padding:.65rem 1.1rem !important;font-size:.88rem !important}
.hero-search button{padding:.65rem 1.2rem !important;font-size:.8rem !important}
@media(max-width:760px){.hero-search{max-width:92vw !important}}
/* ══════════════════════════════════════════════════════
AR / 3D — direct-launch button (no modal, no rotate preview)
══════════════════════════════════════════════════════ */
.btn-ar-view{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.85rem 1.2rem;
border-radius:12px;border:2px solid var(--royal);background:#fff;color:var(--royal);
font-weight:700;font-size:.85rem;cursor:pointer;transition:.25s;white-space:nowrap}
.btn-ar-view:hover{background:var(--royal);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(39,69,201,.25)}
.btn-ar-view i{font-size:1rem}
/* small transient message ("AR not supported on this device" etc.) */
.ar-msg-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
background:var(--ink);color:#fff;font-size:.82rem;font-weight:600;padding:12px 20px;border-radius:12px;
max-width:min(90vw,360px);text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.3);
z-index:3000;opacity:0;pointer-events:none;transition:.3s var(--ease)}
.ar-msg-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ══════════════════════════════════════════════════════
PRODUCT ACTION BUTTONS — clean, evenly-aligned rows:
1) qty + add to cart + wishlist 2) buy now | b2b quote
3) "see it in your room" — a quieter secondary action,
deliberately lighter so it doesn't compete with the two above
══════════════════════════════════════════════════════ */
.sp-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.2rem}
/* Qty selector + Add to cart + Buy Now + Bulk Order as one flex row (4
items each wanting real label width) doesn't fit the actions box at any
width — "Bulk Order" is reliably the one that runs out of room and gets
clipped. The same 2x2 grid pairing already used below 640px (qty+add on
top, buy+bulk underneath) reads just as cleanly at desktop widths, so
it's now the one layout instead of a flex row that only worked by
accident on wide-enough screens. */
.sp-actions-grid .sp-qty-row{grid-column:1 / -1;display:grid;
grid-template-columns:auto 1fr;grid-template-areas:"qty add" "buy bulk";gap:.6rem;margin:0}
.sp-actions-grid .sp-qty-row .sp-qty{grid-area:qty}
.sp-actions-grid .sp-qty-row .btn-pd-main{grid-area:add}
.sp-actions-grid .sp-qty-row .btn-buy-now{grid-area:buy}
.sp-actions-grid .sp-qty-row .btn-b2b-quote{grid-area:bulk}
.sp-action-btn{display:flex;align-items:center;justify-content:center;gap:8px;
padding:.85rem 1rem;border-radius:12px;font-size:.85rem;font-weight:700;text-align:center;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;box-sizing:border-box}
.sp-actions-grid .btn-buy-now,
.sp-actions-grid .btn-b2b-quote{margin:0;width:100%}
.sp-actions-grid .btn-ar-view{
grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:8px;
margin:.1rem 0 0;padding:.7rem 1rem;border-radius:12px;font-size:.8rem;font-weight:600;
background:transparent;border:1.5px dashed var(--line);color:var(--muted);
}
.sp-actions-grid .btn-ar-view:hover{border-color:var(--royal);color:var(--royal);background:rgba(39,69,201,.05)}
.sp-actions-grid .btn-ar-view i{font-size:.85rem}
@media(max-width:640px){
.sp-actions-grid{grid-template-columns:1fr 1fr;gap:.55rem}
.sp-action-btn{font-size:.78rem;padding:.75rem .6rem}
.sp-actions-grid .sp-qty-row{gap:.5rem}
}
/* ══════════════════════════════════════════════════════
Language switcher — now lives top-right in the nav bar
(topbar removed entirely per request)
══════════════════════════════════════════════════════ */
.nav-actions .tb-drop{position:relative;order:99}
.nav-actions .tb-btn{display:flex;align-items:center;gap:6px;padding:.55rem .8rem;
border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);
font-size:.8rem;font-weight:700;cursor:pointer}
.nav-actions .tb-btn:hover{border-color:var(--pink)}
.nav-actions .tb-panel{position:absolute;top:calc(100% + 8px);right:0;left:auto;
max-height:340px;overflow-y:auto;width:220px;background:#fff;border-radius:14px;
border:1.5px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.15);padding:.6rem;z-index:400}
@media(max-width:900px){.nav-actions .tb-drop{display:none}}
.mp-lang-section{padding:1rem 1.4rem;border-bottom:1px solid var(--line)}
.mp-lang-label{font-size:.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;
color:var(--muted);margin-bottom:.6rem;display:flex;align-items:center;gap:6px}
.mp-cur-row{display:flex;flex-wrap:wrap;gap:6px}
/* ══════════════════════════════════════════════════════
ROUND 5 — highlights box, refined button grid
══════════════════════════════════════════════════════ */
.sp-highlights-box{background:var(--card);border:1.5px solid var(--line);border-radius:16px;
padding:1.1rem 1.3rem;margin:0 0 1.4rem;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.sp-highlights-title{font-size:.78rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;
color:var(--pink);margin-bottom:.8rem;display:flex;align-items:center;gap:7px}
.sp-highlights-box .sp-points{margin:0}
.sp-highlights-box .sp-points li{background:transparent;border-left:none;padding:.4rem 0;
border-bottom:1px dashed var(--line)}
.sp-highlights-box .sp-points li:last-child{border-bottom:none}
/* Button grid — clearer visual hierarchy: primary action stands out */
.sp-actions-grid{background:var(--card);border:1.5px solid var(--line);border-radius:16px;
padding:1.1rem;margin-top:1.2rem}
.sp-actions-grid .sp-qty-row{margin-bottom:.7rem}
.btn-buy-now.sp-action-btn{background:linear-gradient(90deg,var(--pink),var(--violet));color:#fff;border:none}
.sp-actions-grid .btn-b2b-quote,
.sp-actions-grid .btn-ar-view{background:#fff}
/* ══════════════════════════════════════════════════════
PREMIUM CONTACT PAGE — fully styled, was mostly bare before
══════════════════════════════════════════════════════ */
.contact-main .wrap{padding-top:.6rem;padding-bottom:2.5rem}
.contact-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:1.6rem;align-items:start;margin-top:1.4rem}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
/* Google Map — a plain iframe embed (no API key) has no responsive
behaviour of its own, so the aspect-ratio box does the job: fixed
proportions that scale with width instead of a hardcoded pixel height
that's too tall on mobile or too short on a wide desktop card. */
.ak-map-card{margin-bottom:2.2rem;background:#fff;border:1.5px solid var(--line);border-radius:var(--r2);
padding:.9rem;box-shadow:var(--sh);position:relative;overflow:hidden}
.ak-map-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--thread)}
.ak-map-embed{aspect-ratio:16/6;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.ak-map-embed iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:640px){.ak-map-embed{aspect-ratio:4/3}}
.ak-map-directions{display:inline-flex;align-items:center;gap:8px;margin-top:.9rem;padding:10px 18px;
border-radius:50px;background:var(--thread);color:#fff;font-weight:700;font-size:.85rem;text-decoration:none;
transition:.2s}
.ak-map-directions:hover{transform:translateY(-2px);box-shadow:0 8px 18px -6px rgba(232,23,93,.4);color:#fff}
.contact-info{display:flex;flex-direction:column;gap:.8rem}
.ci-card{display:flex;gap:1rem;align-items:flex-start;background:#fff;border-radius:16px;
border:1.5px solid var(--line);padding:1.1rem 1.2rem;box-shadow:0 4px 16px rgba(0,0,0,.04);
transition:.25s var(--ease)}
.ci-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(232,23,93,.12);border-color:rgba(232,23,93,.25)}
.ci-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
flex-shrink:0;font-size:1.15rem}
.ci-card h3{font-size:.95rem;font-weight:800;color:var(--ink);margin-bottom:.25rem}
.ci-card p,.ci-card a{font-size:.84rem;color:var(--muted);line-height:1.6}
.ci-card a{color:var(--royal);font-weight:700;text-decoration:none}
.ci-card a:hover{color:var(--pink)}
.contact-form-card{background:#fff;border-radius:22px;border:1.5px solid var(--line);
padding:2rem;box-shadow:0 12px 40px rgba(0,0,0,.06);position:relative;overflow:hidden}
.contact-form-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;
background:linear-gradient(90deg,var(--pink),var(--saffron),var(--royal))}
.contact-form-card h2{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;
font-size:1.4rem;color:var(--ink);margin-bottom:.3rem}
.contact-form-card h2::after{content:'';display:block;width:56px;height:3px;border-radius:3px;
background:linear-gradient(90deg,var(--pink),var(--saffron));margin-top:.6rem}
.ak-contact-form{margin-top:1.4rem}
.ff label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
color:var(--muted);margin-bottom:.4rem}
.ff input,.ff textarea{width:100%;padding:12px 15px;border-radius:12px;border:2px solid var(--line);
background:var(--field);font-size:.9rem;font-family:inherit;color:var(--ink);outline:none;
transition:.2s;resize:vertical}
.ff input:focus,.ff textarea:focus{border-color:var(--pink);background:#fff;box-shadow:0 0 0 4px rgba(232,23,93,.08)}
.contact-form-card .btn-full{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
padding:14px;border-radius:50px;background:linear-gradient(90deg,var(--pink),var(--violet));color:#fff;
font-size:.94rem;font-weight:700;border:none;cursor:pointer;transition:.25s var(--ease);margin-top:.4rem}
.contact-form-card .btn-full:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(232,23,93,.3)}
/* ══════════════════════════════════════════════════════
ARCHIVES — creative magazine-style layout
══════════════════════════════════════════════════════ */
.blog-hero{padding:1rem 0 1.2rem}
.blog-grid{grid-template-columns:repeat(3,1fr);gap:1.4rem}
.blog-card{border-radius:18px;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.12)}
.blog-card-img{position:relative}
.blog-card-img img{transition:transform .6s var(--ease)}
.blog-card:hover .blog-card-img img{transform:scale(1.08)}
@media(max-width:1000px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}}
/* ══════════════════════════════════════════════════════
ARTICLE — more editorial, creative typography
══════════════════════════════════════════════════════ */
.article-hero{padding:1rem 0 1.2rem}
.article-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;
font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.2;color:var(--ink);max-width:800px;margin:0 auto}
.article-feat{border-radius:20px;overflow:hidden;box-shadow:0 16px 50px rgba(0,0,0,.12);margin-bottom:1.4rem}
.article-body{max-width:680px;margin:0 auto;font-size:1.02rem;line-height:1.9;color:var(--char)}
.article-body p{margin-bottom:1.2rem}
.article-body h2{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:800;
font-size:1.4rem;color:var(--ink);margin:1.8rem 0 .8rem;position:relative;padding-left:1rem}
.article-body h2::before{content:'';position:absolute;left:0;top:.15em;bottom:.15em;width:4px;
border-radius:3px;background:linear-gradient(180deg,var(--pink),var(--saffron))}
.article-body blockquote{border-left:4px solid var(--pink);padding:1rem 1.4rem;margin:1.6rem 0;
font-family:'Georgia Pro',Georgia,serif;font-style:italic;font-size:1.15rem;color:var(--pink);
background:linear-gradient(90deg,rgba(232,23,93,.06),transparent);border-radius:0 12px 12px 0}
/* ══════════════════════════════════════════════════════
FINAL — product buttons: premium, perfectly aligned
══════════════════════════════════════════════════════ */
.sp-actions-grid{padding:1rem 1.1rem;margin-top:.5rem}
.sp-actions-grid .sp-qty-row{margin-bottom:.7rem;gap:.8rem}
.sp-qty{border-radius:12px;overflow:hidden;border:1.5px solid var(--line)}
.sp-action-btn{min-height:48px;letter-spacing:.2px}
.btn-pd-main.sp-action-btn{background:var(--ink);color:#fff;border:none}
.btn-pd-main.sp-action-btn:hover{background:#000;transform:translateY(-2px)}
.btn-buy-now.sp-action-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(232,23,93,.28)}
.sp-actions-grid .btn-b2b-quote,.sp-actions-grid .btn-ar-view{border:1.5px solid var(--line);color:var(--ink)}
.sp-actions-grid .btn-b2b-quote:hover{border-color:var(--violet);color:var(--violet);background:var(--violet-s)}
.sp-actions-grid .btn-ar-view:hover{border-color:var(--royal);color:var(--royal);background:rgba(39,69,201,.06)}
.pv-tab.on{background:linear-gradient(90deg,var(--pink),var(--royal));color:#fff!important}
.rvl{opacity:1;transform:none}
.ak-main-pv{padding-top:56px}
#pv-home .ak-main-pv{padding-top:0}
/* ══════════════════════════════════════════════════════
AAKAARKALA ADDENDUM · restyling WooCommerce's own
cart / checkout / my-account / search-results markup
in the reference palette (kept as WC's default templates
for reliability — only the look is themed here)
══════════════════════════════════════════════════════ */
.b2b-hero .wrap{padding-top:1rem}
/* --- cart / checkout: compact, card-style rows instead of a spreadsheet look --- */
.cart-grid,.checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start}
@media(max-width:900px){.cart-grid,.checkout-grid{grid-template-columns:1fr}}
.woocommerce-cart-form{background:#fff;border:1.5px solid var(--line);border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);position:relative}
.woocommerce-cart-form::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--thread);z-index:1}
table.shop_table{width:100%;border-collapse:collapse;background:transparent;border:none;margin-bottom:0}
table.shop_table thead{display:none}
table.shop_table td{padding:1.1rem 1.2rem;border-top:1px solid var(--line);font-size:.86rem;vertical-align:middle}
table.shop_table tr.cart_item:first-child td{border-top:none}
table.shop_table tr.cart_item{transition:background .2s}
table.shop_table tr.cart_item:hover{background:var(--pink-s)}
table.shop_table td.product-thumbnail{width:76px}
table.shop_table td.product-thumbnail img{width:68px;height:68px;object-fit:cover;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.08);transition:transform .3s var(--ease)}
table.shop_table tr.cart_item:hover td.product-thumbnail img{transform:scale(1.06)}
table.shop_table td.product-remove{width:36px;padding-right:0}
table.shop_table td.product-remove a.remove{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--pink-s);color:var(--pink)!important;font-size:1.1rem;font-weight:700;text-decoration:none!important}
table.shop_table td.product-remove a.remove:hover{background:var(--pink);color:#fff!important}
table.shop_table td.product-name{font-size:.92rem}
table.shop_table td.product-name a{color:var(--ink);font-weight:700}
table.shop_table td.product-price{color:var(--muted);font-weight:600}
table.shop_table td.product-subtotal{font-weight:700;color:var(--ink);text-align:right}
table.shop_table .quantity{margin:0}
.ak-qty-stepper{display:inline-flex;align-items:center;width:fit-content;
border:1.5px solid var(--line);border-radius:50px;overflow:hidden;background:#fff}
table.shop_table .quantity.ak-qty-stepped{margin:0}
table.shop_table .quantity.ak-qty-stepped input.qty{width:40px;padding:9px 2px;border:none;border-radius:0;
text-align:center;font-weight:700;background:transparent}
.ak-qty-btn{width:32px;height:32px;flex-shrink:0;border:none;background:var(--bg,#FAFAFA);color:var(--ink);
font-size:1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:.2s;line-height:1;user-select:none}
.ak-qty-btn:hover{background:var(--pink-s);color:var(--pink)}
tr.cart_item td.actions{padding:1.3rem 1.2rem;background:var(--bg);border-top:1.5px solid var(--line)}
/* The variation meta ("Flower: Rose · Color: Red") rendered by
wc_get_formatted_cart_item_data() was totally unstyled — a bare
browser-default , cramped right under the product name with no
breathing room. Each dt+dd pair becomes one small rounded tag instead. */
table.shop_table dl.variation{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0;padding:0}
table.shop_table dl.variation dt,table.shop_table dl.variation dd{display:inline-flex;align-items:center;margin:0;
border-radius:50px;background:var(--pink-s);font-size:.68rem;font-weight:700;line-height:1.4}
table.shop_table dl.variation dt{padding:3px 4px 3px 10px;color:var(--pink-d)}
table.shop_table dl.variation dd{padding:3px 10px 3px 4px;color:var(--ink)}
table.shop_table dl.variation dd p{display:inline;margin:0}
/* Ticket/voucher styling — dashed cut-out border in the site's gradient,
a small tag icon badge — reads as "here's a perk", not a plain grey
settings-form box like the rest of the cart actions row. */
.woocommerce-cart-form .coupon{background:linear-gradient(165deg,#fff,rgba(232,23,93,.04) 60%,rgba(124,58,237,.05));
border:1.5px dashed var(--pink);border-radius:16px;padding:1.2rem 1.3rem;position:relative;overflow:hidden}
.woocommerce-cart-form .coupon::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--thread)}
.coupon-title{font-weight:800;font-size:.92rem;color:var(--ink);margin-bottom:.8rem;display:flex;align-items:center;gap:9px}
.coupon-title i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
background:var(--thread);color:#fff;font-size:.75rem}
.coupon-fields{display:flex;gap:.6rem;flex-wrap:wrap}
.woocommerce-cart-form .coupon input#coupon_code{height:48px;padding:0 18px;border:1.5px solid var(--line);border-radius:50px;min-width:180px;flex:1;box-sizing:border-box;font-size:.88rem}
.woocommerce-cart-form .coupon input#coupon_code:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(232,23,93,.12);outline:none}
/* The plain .button class this ships with (from WooCommerce core) carries
no padding/height of its own in this theme — only colour/radius were
ever set, so it rendered as a barely-there sliver of a button (browser
default ~15px tall) instead of a real, tappable CTA matching the input
beside it. Explicit height/padding/icon fixes that outright. */
.woocommerce-cart-form .coupon button[name=apply_coupon]{
height:48px;padding:0 24px;box-sizing:border-box;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:var(--thread);background-size:160% 160%;border-radius:50px;
border:none;color:#fff;font-size:.86rem;font-weight:700;white-space:nowrap;
cursor:pointer;transition:.22s}
.woocommerce-cart-form .coupon button[name=apply_coupon]::before{
font-family:'Font Awesome 6 Free';font-weight:900;content:'\f02b';font-size:.8rem}
.woocommerce-cart-form .coupon button[name=apply_coupon]:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 8px 18px -6px rgba(232,23,93,.4)}
.woocommerce-cart-form .coupon button[name=apply_coupon]:active{transform:translateY(0)}
/* Auto-discount tiers hint — read straight off the coupons themselves in
inc/auto-coupons.php, so this always matches whatever an admin has set
there without needing a separate theme edit. One row per tier (code +
threshold + %) instead of a run-on sentence — the code itself is the
thing worth being able to actually spot at a glance, e.g. to quote back
to a customer who's asking what discount they got. */
.ak-auto-coupon-hint{margin-top:.9rem;padding-top:.9rem;border-top:1px dashed rgba(232,23,93,.25)}
.ak-auto-coupon-hint-title{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:800;
color:var(--ink);margin-bottom:.6rem}
.ak-auto-coupon-hint-title i{color:var(--saffron-d,var(--saffron))}
.ak-auto-coupon-tiers{display:flex;flex-direction:column;gap:.5rem}
.ak-auto-coupon-tier{display:flex;align-items:center;gap:.6rem;background:#fff;border:1.5px solid var(--line);
border-radius:10px;padding:.5rem .7rem;font-size:.78rem}
.ak-auto-coupon-tier.active{border-color:var(--teal);background:var(--teal-s,rgba(13,148,136,.08))}
.ak-auto-coupon-code{font-weight:800;color:#fff;background:var(--thread);border-radius:6px;
padding:.2rem .5rem;font-size:.72rem;letter-spacing:.4px;flex-shrink:0}
.ak-auto-coupon-desc{color:var(--char);flex:1}
.ak-auto-coupon-check{color:var(--teal);font-size:.9rem}
.ak-auto-coupon-note{font-size:.72rem;color:var(--muted);margin:.6rem 0 0}
.cart-collaterals{margin-top:0}
/* The delivery estimate depends on an address (Jaipur/within/outside
Rajasthan — see inc/shipping.php) the customer hasn't entered yet at
the cart stage, so it's really just guessing off the store's own base
address until checkout actually asks. Hiding it here (checkout's own
#order_review is untouched — it needs to show, since that's where the
real address gets entered) avoids showing a delivery charge that may
not match where the order is actually going. */
.cart_totals tr.woocommerce-shipping-totals,
.cart_totals tr.shipping{display:none}
.cart_totals{background:#fff;border:1.5px solid var(--line);border-radius:var(--r2);padding:1.7rem;position:relative;overflow:hidden;box-shadow:var(--sh);position:sticky;top:calc(var(--nh) + 1.5rem)}
.cart_totals::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--thread)}
.cart_totals h2{font-family:'Georgia Pro',Georgia,serif;font-size:1.15rem;margin-bottom:1.1rem}
.cart_totals table{width:100%}
.cart_totals table th,.cart_totals table td{padding:11px 0;border-top:1px dashed var(--line);font-size:.88rem}
.cart_totals table tr:first-child th,.cart_totals table tr:first-child td{border-top:none}
.cart_totals .order-total{border-top:1.5px solid var(--ink)!important}
.cart_totals .order-total th,.cart_totals .order-total td{border-top:1.5px solid var(--ink)!important}
.cart_totals .order-total .woocommerce-Price-amount{font-size:1.3rem;color:var(--price,var(--pink));font-weight:700}
.wc-proceed-to-checkout a.checkout-button{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;margin-top:1.2rem;padding:15px;border-radius:50px;font-weight:700;text-decoration:none}
.wc-proceed-to-checkout a.checkout-button::after{content:'\f061';font-family:'Font Awesome 6 Free';font-weight:900}
.return-to-shop .button{display:inline-flex;padding:13px 26px;border-radius:50px;background:var(--ink);color:#fff!important;font-weight:700;text-decoration:none}
.empty-cart{background:#fff;border:1.5px solid var(--line);border-radius:var(--r2);padding:3.5rem 2rem;text-align:center}
.woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-bottom:1.6rem}
.woocommerce-checkout #order_review_heading{font-family:'Georgia Pro',Georgia,serif;font-size:1.2rem;margin-bottom:1rem}
.woocommerce-checkout .woocommerce-billing-fields h3,.woocommerce-checkout .woocommerce-shipping-fields h3,.woocommerce-checkout .woocommerce-additional-fields h3{font-family:'Georgia Pro',Georgia,serif;font-size:1.05rem;margin-bottom:.9rem;display:flex;align-items:center;gap:9px}
.woocommerce-billing-fields > h3::before{content:'\f007';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.85rem;color:#fff;background:var(--thread);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.woocommerce-shipping-fields > h3::before{content:'\f0d1';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.85rem;color:#fff;background:var(--thread);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.woocommerce-additional-fields > h3::before{content:'\f27a';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.85rem;color:#fff;background:var(--thread);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#order_review_heading{display:flex;align-items:center;gap:9px}
#order_review_heading::before{content:'\f290';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.85rem;color:#fff;background:var(--thread);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* Checkout page header — step progress (Cart -> Details & Payment -> Confirmed) */
.checkout-steps{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}
.checkout-step{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--muted)}
.checkout-step span{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#fff;border:1.5px solid var(--line);color:var(--muted);font-size:.72rem;font-weight:800}
.checkout-step.done{color:var(--teal)}
.checkout-step.done span{background:var(--teal);border-color:var(--teal);color:#fff}
.checkout-step.on{color:var(--pink)}
.checkout-step.on span{background:linear-gradient(135deg,var(--pink),var(--violet));border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(232,23,93,.3)}
.checkout-step-line{width:34px;height:2px;background:var(--line)}
@media(max-width:480px){.checkout-step{font-size:.68rem}.checkout-step-line{width:18px}}
.woocommerce-checkout .col-1,.woocommerce-checkout .col-2{background:#fff;border:1.5px solid var(--line);border-radius:var(--r2);padding:1.7rem;box-shadow:var(--sh);position:relative;overflow:hidden}
.woocommerce-checkout .col-1::before,.woocommerce-checkout .col-2::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--thread)}
/* #order_review now sits inside .checkout-section-order, which already
provides the card look — no nested box/shadow, and no sticky position
now that it's a normal sequential section rather than a sidebar. */
.woocommerce-checkout #order_review{overflow:hidden}
.woocommerce-checkout #order_review table.shop_table td{padding:.8rem 0}
/* A little more visual life than a plain receipt table — each product
line gets its own soft card with a hover lift (the checkout-review
thumbnail from inc/checkout.php is what makes this worth doing; a bare
text row wouldn't need it), and the whole section picks up the same
corner-blob flourish other cards on the site use instead of sitting as
a flat white box next to more decorated ones. */
.checkout-section-order{position:relative;overflow:hidden}
.checkout-section-order::after{content:'';position:absolute;bottom:-60px;right:-60px;width:180px;height:180px;
border-radius:50%;background:radial-gradient(circle,rgba(232,23,93,.06),transparent 70%);pointer-events:none}
.woocommerce-checkout #order_review table.shop_table tbody tr:not(.cart-subtotal):not(.order-total):not(.woocommerce-shipping-totals){
transition:.2s}
.woocommerce-checkout #order_review table.shop_table tbody tr:not(.cart-subtotal):not(.order-total):not(.woocommerce-shipping-totals):hover{
background:var(--bg)}
.ak-order-review-thumb{box-shadow:0 3px 10px rgba(20,10,40,.12)}
/* "Your order" gets the same colourful treatment as the billing side
instead of reading as a plain receipt: a tinted band under subtotal/
total instead of a bare border, and the final total in the site's
gradient rather than plain ink. */
.woocommerce-checkout #order_review tr.cart-subtotal td,
.woocommerce-checkout #order_review tr.cart-subtotal th{background:var(--bg);border-radius:10px 0 0 10px}
.woocommerce-checkout #order_review tr.cart-subtotal td{border-radius:0 10px 10px 0}
.woocommerce-checkout #order_review tr.order-total th,
.woocommerce-checkout #order_review tr.order-total td{border-top:none!important;padding-top:1rem}
.woocommerce-checkout #order_review tr.order-total th{font-family:'Georgia Pro',Georgia,serif;font-size:1.05rem}
.woocommerce-checkout #order_review tr.order-total .woocommerce-Price-amount{
font-size:1.4rem;background:var(--thread);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent}
.woocommerce-checkout #payment{background:#fff;border:1.5px solid var(--line);border-radius:var(--r2);padding:1.5rem;margin-top:1.2rem;box-shadow:var(--sh)}
.woocommerce-checkout #payment-heading{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--teal);margin-bottom:1rem}
.woocommerce-checkout #payment-heading i{font-size:.9rem}
.woocommerce-checkout #payment ul.payment_methods{list-style:none}
.woocommerce-checkout #payment ul.payment_methods li{border:1.5px solid var(--line);border-radius:14px;padding:.9rem 1rem;margin-bottom:.6rem;transition:border-color .2s,background .2s}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked){border-color:var(--pink);background:var(--pink-s)}
/* UPI payment card — was flat var(--bg) grey like any other payment_box;
this is the one thing every single order has to get through, so it
gets the same "designed feature", not "generic form section" treatment
as the shipping-charge banner above: a soft gradient wash + top accent
bar matching the checkout section cards, instead of a plain grey box. */
.woocommerce-checkout #payment div.payment_box{
background:linear-gradient(165deg,#fff,rgba(232,23,93,.04) 60%,rgba(124,58,237,.05));
border:1.5px solid var(--line);border-radius:16px;padding:1.3rem 1rem;margin-top:.8rem;
font-size:.85rem;position:relative;overflow:hidden}
.woocommerce-checkout #payment div.payment_box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--thread)}
/* Stacked vertically this was one narrow column of QR-then-text-then-
buttons regardless of how much width the payment card actually had —
wasteful once the checkout went two-column and this card got a full
~580px to work with. QR sits fixed-width on the left, everything else
(UPI ID, app buttons, hint, WhatsApp note) fills the remaining width on
the right as its own left-aligned column, so it reads as one balanced
horizontal panel instead of a tall centred stack. Mobile drops back to
the original centred stack — a fixed-width QR next to a cramped column
doesn't work under ~500px. */
.ak-upi-box{display:flex;flex-direction:column;gap:1.1rem;width:100%;padding:.4rem 0}
/* Each numbered step is its own clearly bordered block instead of one flat
box with tiny step-pills floating above unrelated content — the payment
details, the "come back" instruction, and the upload now visibly belong
to steps 1/2/3 rather than reading as one long undivided form. */
.ak-upi-step-block{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:1.1rem 1.3rem;text-align:left}
.ak-upi-step-head{display:flex;align-items:center;gap:.7rem;font-weight:800;font-size:.92rem;color:var(--ink)}
.ak-upi-step-num{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
background:var(--thread);color:#fff;font-size:.82rem;font-weight:800;flex-shrink:0}
.ak-upi-step-body{margin-top:1rem}
.ak-upi-details{display:flex;flex-direction:column;align-items:center;gap:.8rem;width:100%}
.ak-upi-qr{width:170px;height:170px;object-fit:contain;background:#fff;border:1.5px solid var(--line);border-radius:16px;
padding:.7rem;box-shadow:0 10px 26px -10px rgba(124,58,237,.3);flex-shrink:0}
.ak-upi-id{display:flex;flex-direction:column;gap:3px;background:#fff;border:1.5px solid var(--line);border-radius:12px;
padding:.6rem 1.1rem}
.ak-upi-id span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.ak-upi-id strong{font-size:1.05rem;color:var(--pink);word-break:break-all}
.ak-upi-apps{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:.2rem}
.ak-upi-app-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:50px;background:#fff;border:1.5px solid var(--line);color:var(--ink);font-size:.8rem;font-weight:700;transition:.2s}
.ak-upi-app-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.1)}
.ak-upi-app-btn.gpay:hover{border-color:#4285F4;color:#4285F4}
.ak-upi-app-btn.gpay i{color:#4285F4}
.ak-upi-app-btn.phonepe:hover{border-color:#5F259F;color:#5F259F}
.ak-upi-app-btn.phonepe i{color:#5F259F}
.ak-upi-app-btn.paytm:hover{border-color:#00BAF2;color:#00BAF2}
.ak-upi-app-btn.paytm i{color:#00BAF2}
.ak-upi-hint{font-size:.76rem;color:var(--muted);max-width:340px;margin:0 auto}
.ak-upi-whatsapp-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.78rem;font-weight:700;color:#128C7E;
background:#E9FBF4;border:1px solid #b8ecd9;border-radius:12px;padding:8px 14px;width:fit-content;
max-width:100%;white-space:nowrap;margin:.2rem auto 0}
.ak-upi-whatsapp-note i{font-size:.95rem;flex-shrink:0}
@media(max-width:400px){.ak-upi-whatsapp-note{white-space:normal;text-align:center}}
@media(min-width:500px){
.ak-upi-step-body{display:flex;align-items:flex-start;gap:1.3rem}
.ak-upi-details{align-items:flex-start;flex:1;min-width:0}
.ak-upi-id{align-items:flex-start}
.ak-upi-apps{justify-content:flex-start}
.ak-upi-hint{margin-left:0;max-width:none}
}
.ak-shipping-note-row td{padding:.5rem 0 !important;border:none !important}
.ak-shipping-note{display:flex;align-items:center;gap:8px;font-size:.76rem;font-weight:600;color:var(--char);
background:var(--bg);border-radius:10px;padding:8px 12px;margin:0}
.ak-shipping-note-rapido{color:#B8860B}
.ak-shipping-note-rapido i{color:#F5A623}
.ak-shipping-note-shiprocket{color:var(--royal)}
.ak-shipping-note-shiprocket i{color:var(--royal)}
.ak-upi-upload{width:100%;max-width:420px;text-align:left}
.ak-upi-upload-label{display:block;font-size:.78rem;font-weight:700;color:var(--char);margin-bottom:.5rem}
/* Native file inputs can't be styled directly — the input itself is
visually hidden and a (a real, always-clickable
trigger for it, no JS needed just to open the file picker) stands in
as the actual dropzone the customer sees and taps. JS only handles
the *preview* once a file is chosen (see main.js), not the picking
itself. */
.ak-upi-file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.ak-upi-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
min-height:120px;background:linear-gradient(165deg,#fff,rgba(232,23,93,.04));border:2px dashed var(--line);
border-radius:14px;padding:1.2rem;cursor:pointer;text-align:center;transition:.2s}
.ak-upi-dropzone:hover{border-color:var(--pink);background:linear-gradient(165deg,#fff,rgba(232,23,93,.08))}
.ak-upi-dropzone.has-file{border-style:solid;border-color:var(--teal);padding:.7rem}
.ak-upi-dropzone-empty{display:flex;flex-direction:column;align-items:center;gap:.3rem;color:var(--muted)}
.ak-upi-dropzone-empty i{font-size:1.6rem;color:var(--pink);margin-bottom:.2rem}
.ak-upi-dropzone-empty strong{font-size:.86rem;color:var(--ink)}
.ak-upi-dropzone-empty small{font-size:.72rem}
.ak-upi-dropzone-preview{max-width:100%;max-height:160px;border-radius:10px;object-fit:contain;box-shadow:var(--sh)}
.ak-upi-dropzone-filename{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--teal);margin-top:.5rem}
.ak-upi-dropzone-filename::before{content:'\f058';font-family:'Font Awesome 6 Free';font-weight:900}
@media(max-width:480px){.ak-upi-apps{flex-direction:column;width:100%}.ak-upi-app-btn{justify-content:center}}
/* ── ORDER RECEIVED / THANK YOU PAGE ─────────────────── */
.text-center{text-align:center}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 28px;border-radius:50px;font-weight:700;font-size:.85rem;background:#fff;border:1.5px solid var(--line);color:var(--ink);transition:border-color .2s,color .2s,transform .2s}
.btn-outline:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-2px)}
.ak-thankyou-wa-share:hover{border-color:#25D366;color:#128C4A}
.ak-thankyou-icon-wrap{position:relative;width:fit-content;margin:0 auto 1.3rem}
.ak-thankyou-icon{width:84px;height:84px;border-radius:50%;background:var(--thread);display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:#fff;box-shadow:0 14px 40px rgba(232,23,93,.3);animation:akThankyouPop .5s var(--ease) both}
.ak-thankyou-icon-fail{background:linear-gradient(135deg,#71717A,#3F3F46);box-shadow:0 14px 40px rgba(0,0,0,.2)}
.ak-thankyou-spark{position:absolute;font-size:1.1rem;pointer-events:none;animation:akSparkPop .7s var(--ease) both,akSparkFloat 3s ease-in-out infinite}
.ak-thankyou-spark-1{top:-6px;left:-18px;color:var(--gold);animation-delay:.2s,0s}
.ak-thankyou-spark-2{bottom:2px;right:-22px;color:var(--teal);font-size:.9rem;animation-delay:.35s,.4s}
.ak-thankyou-spark-3{top:6px;right:-30px;color:var(--pink);font-size:.85rem;animation-delay:.5s,.8s}
@keyframes akSparkPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes akSparkFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(12deg)}}
@media(prefers-reduced-motion:reduce){.ak-thankyou-spark{animation:none}}
@keyframes akThankyouPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.ak-order-summary-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r2);padding:1.6rem 1.8rem;margin-bottom:1.6rem;box-shadow:var(--sh);position:relative;overflow:hidden}
.ak-order-summary-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--thread)}
.ak-order-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.2rem}
.ak-order-summary-grid span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.ak-order-summary-grid strong{font-family:'Georgia Pro',Georgia,serif;font-size:1.05rem;color:var(--ink)}
.ak-order-items{background:#fff;border:1.5px solid var(--line);border-radius:var(--r2);padding:1.5rem 1.6rem;margin-bottom:1.8rem;box-shadow:var(--sh)}
.ak-order-items-title{font-family:'Georgia Pro',Georgia,serif;font-size:1.1rem;margin-bottom:1rem;color:var(--ink)}
.ak-order-items-title i{color:var(--teal);margin-right:6px}
.ak-order-summary-grid span i{color:var(--pink);margin-right:4px}
.ak-order-tracking-pending{margin:1.1rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line);
font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.ak-order-tracking-pending i{color:var(--pink)}
.ak-thankyou-timeline{display:flex;align-items:flex-start;justify-content:space-between;gap:.4rem;
background:#fff;border:1.5px solid var(--line);border-radius:var(--r2);padding:1.6rem 1.4rem 1.3rem;
margin-bottom:1.8rem;box-shadow:var(--sh);position:relative}
.ak-tl-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:.6rem;position:relative;text-align:center}
.ak-tl-step:not(:last-child)::after{content:'';position:absolute;top:19px;left:calc(50% + 26px);right:calc(-50% + 26px);
height:3px;background:var(--line);z-index:0}
.ak-tl-step.ak-tl-done:not(:last-child)::after{background:linear-gradient(90deg,var(--pink),var(--violet))}
.ak-tl-dot{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;background:#F3F0FA;
border:2px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:.85rem}
.ak-tl-step.ak-tl-done .ak-tl-dot{background:linear-gradient(135deg,var(--pink),var(--violet));border-color:transparent;
color:#fff;box-shadow:0 6px 16px rgba(232,23,93,.3)}
.ak-tl-label{font-size:.68rem;font-weight:700;color:var(--muted);line-height:1.3}
.ak-tl-step.ak-tl-done .ak-tl-label{color:var(--ink)}
@media(max-width:480px){.ak-tl-label{font-size:.6rem}.ak-tl-dot{width:32px;height:32px;font-size:.72rem}
.ak-tl-step:not(:last-child)::after{top:16px}}
.ak-thankyou-screenshot-link{display:block}
.ak-thankyou-screenshot{max-width:260px;width:100%;border-radius:14px;border:1.5px solid var(--line);
box-shadow:0 8px 22px rgba(0,0,0,.08);transition:transform .25s var(--ease)}
.ak-thankyou-screenshot-link:hover .ak-thankyou-screenshot{transform:scale(1.02)}
.ak-order-item-row{display:flex;align-items:center;gap:14px;padding:.8rem 0;border-top:1px solid var(--line)}
.ak-order-item-row:first-of-type{border-top:none}
.ak-order-item-row img{width:56px;height:56px;object-fit:cover;border-radius:10px;flex-shrink:0}
.ak-order-item-info{flex:1;min-width:0}
.ak-order-item-name{font-weight:700;font-size:.88rem;color:var(--ink)}
.ak-order-item-qty{font-size:.78rem;color:var(--muted);margin-top:.2rem}
.ak-order-item-price{font-weight:700;color:var(--ink);font-size:.9rem;flex-shrink:0}
.ak-thankyou-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:2.5rem}
.ak-thankyou-actions .btn-full,.ak-thankyou-actions .btn-outline{width:auto;max-width:280px}
.woocommerce-checkout #place_order{width:100%;margin-top:1rem}
@media(max-width:860px){.woocommerce-checkout .col2-set{grid-template-columns:1fr}}
/* Thank-you page — mobile: full-width stacked buttons (better tap targets
than two centred, unevenly-sized pills), tighter card padding, and a
fixed 2-column summary grid instead of auto-fit's inconsistent wrapping
at this width. */
@media(max-width:600px){
.ak-thankyou-icon{width:68px;height:68px;font-size:1.9rem}
.ak-order-summary-card{padding:1.2rem 1.3rem}
.ak-order-summary-grid{grid-template-columns:1fr 1fr;gap:1rem}
.ak-order-items{padding:1.2rem 1.3rem}
.ak-order-item-row img{width:48px;height:48px}
.ak-thankyou-actions{flex-direction:column;align-items:stretch;gap:.8rem}
.ak-thankyou-actions .btn-full,.ak-thankyou-actions .btn-outline{width:100%;max-width:none}
}
.woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin-bottom:2rem}
.woocommerce-MyAccount-navigation li{list-style:none}
.woocommerce-MyAccount-navigation a{display:block;padding:10px 18px;border-radius:50px;border:1.5px solid var(--line);font-size:.82rem;font-weight:700;color:var(--char);text-decoration:none}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--ink);color:#fff;border-color:var(--ink)}
.woocommerce-MyAccount-content{background:#fff;border:1.5px solid var(--line);border-radius:var(--r2);padding:2rem;box-shadow:var(--sh)}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{font-family:'Georgia Pro',Georgia,serif;margin-bottom:1rem}
.woocommerce-form-login,.woocommerce-form-register{max-width:460px}
.woocommerce-orders-table__cell-order-actions a{background:var(--pink);color:#fff!important;padding:6px 14px;border-radius:20px;font-size:.72rem;font-weight:700;text-decoration:none}
/* WooCommerce's real wc_print_notices() output is NOT wrapped in
.woocommerce-notices-wrapper by default (that's only our own contact-form
markup) — style the bare classes directly so real notices aren't left
unstyled with default browser bullet-list styling. */
.woocommerce-message,.woocommerce-info,.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,.woocommerce-notices-wrapper .woocommerce-info,.woocommerce-notices-wrapper .woocommerce-error{
list-style:none;border-radius:14px;margin:0 0 1.4rem;padding:1rem 1.3rem;font-size:.88rem;font-weight:600;
display:flex;align-items:center;gap:10px;box-shadow:var(--sh);
}
.woocommerce-message{background:var(--teal-s);border:1.5px solid var(--teal);color:var(--teal)}
.woocommerce-message::before{content:'\f058';font-family:'Font Awesome 6 Free';font-weight:900;flex-shrink:0}
.woocommerce-info{background:var(--gold-s);border:1.5px solid var(--gold);color:#8a6300}
.woocommerce-info::before{content:'\f05a';font-family:'Font Awesome 6 Free';font-weight:900;flex-shrink:0}
.woocommerce-error{background:var(--pink-s);border:1.5px solid var(--pink);color:var(--pink-d);flex-direction:column;align-items:flex-start}
.woocommerce-error li{list-style:none;display:flex;align-items:center;gap:10px}
.woocommerce-error li::before{content:'\f06a';font-family:'Font Awesome 6 Free';font-weight:900;flex-shrink:0}
.woocommerce-message a,.woocommerce-info a{color:inherit;text-decoration:underline}
/* keep notices from sitting flush against the page title above them */
.wrap > .woocommerce-message,.wrap > .woocommerce-info,.wrap > .woocommerce-error,
.wrap > .woocommerce-notices-wrapper{margin-top:1.5rem}
.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.4rem}
/* ══════════════════════════════════════════════════════
AAKAARKALA ADDENDUM 2 · spacing fix, hero videos,
product accordion, animation system, button polish
══════════════════════════════════════════════════════ */
/* --- tighten the gap under the sticky nav on inner pages ---
.ak-main-pv carried a 56px offset meant for the demo's fixed-nav
SPA shell; our nav is sticky/in-flow so it doesn't need it. */
.ak-main-pv{padding-top:0}
.b2b-hero{padding-top:.6rem}
/* --- hero side videos (YouTube embeds) --- */
.hero-side-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.hsv-tint{background:linear-gradient(180deg,rgba(20,10,25,.05),rgba(20,10,25,.35))}
/* --- product page: FAQ-style accordion for details --- */
.sp-faq{margin-top:1.6rem}
.sp-faq-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-size:1.3rem;margin-bottom:1rem;color:var(--ink)}
.sp-faq-title em{color:var(--pink);font-style:italic}
.sp-faq-list{display:flex;flex-direction:column;gap:.7rem}
.sp-faq-item{background:#fff;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.sp-faq-item[open]{border-color:var(--pink);box-shadow:0 10px 30px rgba(232,23,93,.1)}
.sp-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:1rem 1.3rem;font-weight:700;color:var(--ink);font-size:.92rem;user-select:none}
.sp-faq-item summary::-webkit-details-marker{display:none}
.sp-faq-item summary i.sp-faq-ico{color:var(--pink);font-size:.95rem;width:20px;text-align:center;flex-shrink:0}
.sp-faq-item summary .sp-faq-q-text{flex:1}
.sp-faq-item summary .sp-faq-toggle{color:var(--muted);transition:transform .3s var(--ease);flex-shrink:0}
.sp-faq-item[open] summary .sp-faq-toggle{transform:rotate(45deg);color:var(--pink)}
.sp-faq-item .sp-faq-body{padding:0 1.3rem 1.2rem 3.05rem;color:var(--char);font-size:.87rem;line-height:1.75}
.sp-faq-item .sp-faq-body ul{margin:0}
.sp-faq-item .sp-faq-body li{display:flex;gap:9px;padding:4px 0}
.sp-faq-item .sp-faq-body li::before{content:'\2713';color:var(--pink);font-weight:700;flex-shrink:0}
.sp-faq-item .sp-faq-body .spec-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.87rem}
.sp-faq-item .sp-faq-body .spec-row:last-child{border-bottom:none}
.sp-faq-item .sp-faq-body .spec-row span:first-child{color:var(--muted);font-weight:600}
.sp-faq-item .sp-faq-body .spec-row span:last-child{color:var(--ink);font-weight:700}
/* --- "Explore the story" — full-width band below the gallery/info grid,
holding the Historical / Emotions / Aesthetic topic buttons. Each topic
keeps its own accent (gold / pink / violet) carried through the button,
its active fill, and the icon/heading of the centred content card that
appears below when clicked — a colourful, editorial-feeling reveal
rather than a small sidebar accordion. --- */
.sp-explore{margin-top:3rem;padding:clamp(2rem,5vw,3.2rem) clamp(1.2rem,4vw,3rem);
border-radius:28px;text-align:center;
background:linear-gradient(135deg,rgba(232,23,93,.06),rgba(255,138,30,.06) 45%,rgba(124,58,237,.06));
border:1.5px solid var(--line)}
/* On mobile the info column (price/picker/buttons) and this "About Floral
Art" card stack directly on top of each other — the 3rem margin-top
tuned for sitting below the full two-column desktop layout reads as a
big dead gap here instead, with nothing marking where one section ends
and the next begins. Tightened, plus an actual divider line takes over
the job of separating them instead of empty space alone. */
@media(max-width:780px){
/* .sp-grid's own margin-bottom (1.4rem) and .sp-explore's margin-top
don't collapse into each other here — an intervening element between
them in the markup (the gift-card personalisation modal) breaks the
adjacency collapsing needs, so the two margins were stacking
additively into a much bigger gap than either value alone suggests. */
.sp-grid{margin-bottom:.5rem}
.sp-explore{margin-top:2.5rem;position:relative}
.sp-explore::before{content:'';position:absolute;top:-.9rem;left:8%;right:8%;height:3px;border-radius:3px;
background:var(--thread)}
}
.sp-explore-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;
font-size:clamp(1.4rem,3vw,1.9rem);color:var(--ink);margin-bottom:1.8rem}
.sp-explore-title em{font-style:italic;background:var(--thread);-webkit-background-clip:text;
background-clip:text;-webkit-text-fill-color:transparent;color:var(--pink)}
/* All five in one row: nowrap + a slightly tighter gap/padding than the
old wrapping layout needed, with horizontal scroll as the safety valve
on narrow screens instead of falling back to a second line. */
/* justify-content:center on a row that overflows makes the *start* of
the content unreachable by scroll in most browsers — centring shifts
everything so half the overflow hangs off the left edge, but
scrollLeft can never go negative to reach it. flex-start keeps the
full range scrollable; on wide screens where the row fits without
overflowing, flex-start vs center looks identical since there's
nothing to scroll to anyway. */
.sp-topics-btns{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:.6rem;overflow-x:auto;padding:.2rem;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
@media(min-width:900px){.sp-topics-btns{justify-content:center}}
.sp-topic-btn{--tc:var(--pink);flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;
border-radius:50px;font-size:.82rem;font-weight:700;border:2px solid var(--line);background:#fff;
color:var(--char);cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease),
background .25s,border-color .25s,color .25s}
.sp-topic-btn i{color:var(--tc);transition:color .25s}
.sp-topic-btn--craft{--tc:var(--royal,var(--violet))}
.sp-topic-btn--specification{--tc:var(--teal)}
.sp-topic-btn--historical{--tc:var(--saffron-d,var(--saffron))}
.sp-topic-btn--emotions{--tc:var(--pink)}
.sp-topic-btn--aesthetic{--tc:var(--violet)}
.sp-topic-btn:hover{border-color:var(--tc);color:var(--tc);transform:translateY(-2px);
box-shadow:0 8px 18px -8px var(--tc)}
.sp-topic-btn.on{background:var(--tc);border-color:var(--tc);color:#fff;
box-shadow:0 10px 26px -8px var(--tc);transform:translateY(-2px)}
.sp-topic-btn.on i{color:#fff}
/* Was capped at max-width:680px, sitting noticeably narrower than the
button row above it — widened to fill the same content width as the
buttons instead of looking like an undersized afterthought. */
.sp-topic-panel{margin-top:2.2rem;display:flex;justify-content:center}
.sp-topic-body{--tc:var(--pink);display:none;opacity:0;transform:translateY(16px);
transition:opacity .45s ease,transform .45s ease;width:100%;
background:linear-gradient(165deg,#fff,var(--bg));border:1.5px solid var(--line);
border-radius:var(--r2);padding:2.2rem 2.4rem;position:relative;overflow:hidden;
box-shadow:0 20px 50px -20px var(--tc)}
.sp-topic-body::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--tc)}
.sp-topic-body.sp-topic-in{display:block;opacity:1;transform:translateY(0)}
.sp-topic-body--craft{--tc:var(--royal,var(--violet))}
.sp-topic-body--specification{--tc:var(--teal)}
.sp-topic-body--historical{--tc:var(--saffron-d,var(--saffron))}
.sp-topic-body--emotions{--tc:var(--pink)}
.sp-topic-body--aesthetic{--tc:var(--violet)}
.sp-topic-body-ico{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
margin:0 auto 1rem;border-radius:16px;background:var(--tc);color:#fff;font-size:1.4rem;
box-shadow:0 10px 22px -8px var(--tc)}
.sp-topic-heading{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:800;
font-size:1.25rem;color:var(--tc);margin-bottom:.7rem}
.sp-topic-body p{font-size:.94rem;line-height:1.85;color:var(--char);white-space:pre-line;margin:0}
.sp-topic-spec{text-align:left}
.sp-topic-spec .spec-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.sp-topic-spec .spec-row:last-child{border-bottom:none}
.sp-topic-spec .spec-row span:first-child{color:var(--muted);font-weight:600}
.sp-topic-spec .spec-row span:last-child{color:var(--ink);font-weight:700;text-align:right}
.sp-topic-close{display:none}
@media(max-width:640px){
/* Horizontal-scroll pills hid 3 of the 5 topics off-screen with no
visual hint there was more to scroll to, and the first topic's full
description sat permanently open beneath them, eating most of the
screen. Stacked boxes show all 5 at a glance; tapping one now pops
its content up as a sheet instead of leaving one always expanded
inline, so the closed state doesn't cost a huge scroll of vertical
space. */
.sp-topics-btns{display:flex;flex-direction:column;flex-wrap:nowrap;overflow-x:visible;gap:.6rem;padding:0}
.sp-topic-btn{width:100%;justify-content:flex-start;padding:14px 16px;font-size:.88rem;border-radius:14px}
.sp-topic-btn::after{content:'\f105';font-family:'Font Awesome 6 Free';font-weight:900;
margin-left:auto;color:var(--muted);transition:color .2s}
.sp-topic-btn.on::after{color:#fff}
/* The panel becomes a bottom-sheet modal: hidden (and not blocking
clicks) until JS adds .open when a box is tapped; the panel element
itself is the semi-transparent backdrop, .sp-topic-body is the actual
white sheet centered inside it. */
.sp-topic-panel{position:fixed;inset:0;z-index:2000;margin:0;
background:rgba(20,10,25,.5);align-items:flex-end;
opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease}
.sp-topic-panel.open{opacity:1;visibility:visible;pointer-events:auto}
.sp-topic-body{padding:1.6rem 1.4rem 2rem;width:100%;max-height:78vh;overflow-y:auto;
border-radius:22px 22px 0 0;transform:none;box-shadow:0 -16px 40px rgba(0,0,0,.3)}
.sp-topic-body.sp-topic-in{transform:none}
.sp-topic-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
background:var(--bg);border:none;color:var(--muted);display:flex;align-items:center;justify-content:center;
font-size:1.3rem;line-height:1;cursor:pointer;z-index:2}
}
/* --- product photo lightbox: full-view preview on click --- */
.sp-img[data-lightbox-src]{cursor:zoom-in}
.ak-lightbox{position:fixed;inset:0;z-index:3000;background:rgba(8,4,12,.92);
display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.ak-lightbox.open{opacity:1;pointer-events:auto}
.ak-lightbox-stage{max-width:90vw;max-height:85vh;display:flex;align-items:center;justify-content:center}
.ak-lightbox-stage img{max-width:90vw;max-height:85vh;width:auto;height:auto;border-radius:12px;
box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ak-lightbox-close,.ak-lightbox-arr{background:rgba(255,255,255,.12);color:#fff;border:none;cursor:pointer;
border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s}
.ak-lightbox-close:hover,.ak-lightbox-arr:hover{background:rgba(255,255,255,.24)}
.ak-lightbox-close{position:absolute;top:1.5rem;right:1.5rem;width:44px;height:44px;font-size:1.1rem}
.ak-lightbox-arr{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:1.1rem}
.ak-lightbox-prev{left:1.5rem}
.ak-lightbox-next{right:1.5rem}
.ak-lightbox-count{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
color:rgba(255,255,255,.85);font-size:.8rem;font-weight:600;background:rgba(255,255,255,.12);
padding:6px 16px;border-radius:20px}
@media(max-width:640px){
.ak-lightbox-arr{width:40px;height:40px;font-size:.9rem}
.ak-lightbox-prev{left:.6rem}
.ak-lightbox-next{right:.6rem}
.ak-lightbox-close{top:.8rem;right:.8rem;width:38px;height:38px}
}
/* --- optional product video slot inside the gallery --- */
.sp-video-slide{position:relative;aspect-ratio:4/3;background:#000;border-radius:inherit;overflow:hidden}
.sp-video-slide iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* --- button polish: lift, glow, icon nudge on hover --- */
.btn-pd-main.sp-action-btn,.btn-buy-now.sp-action-btn,.btn-b2b-quote.sp-action-btn,.btn-ar-view.sp-action-btn,
.padd,.btn-full,.btn-si,.pcard-add,a.button,.woocommerce-button.button,.checkout-button{
transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .25s,color .25s;
}
.btn-pd-main.sp-action-btn:hover,.btn-buy-now.sp-action-btn:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 14px 32px rgba(232,23,93,.28)}
.btn-b2b-quote.sp-action-btn:hover{transform:translateY(-3px)}
.btn-ar-view.sp-action-btn:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(39,69,201,.18)}
.padd:hover{transform:translateY(-2px) scale(1.03)}
.btn-full:hover,.woocommerce-button.button:hover,.checkout-button:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(232,23,93,.28)}
.sp-action-btn i,.padd i,.btn-full i{transition:transform .25s var(--ease)}
.sp-action-btn:hover i,.padd:hover i,.btn-full:hover i{transform:translateX(2px)}
.pcard:hover .pcard-add{background:var(--pink)}
/* --- scroll reveal (fresh system — .rvl is neutralised upstream in this file) --- */
.ak-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ak-reveal.ak-in{opacity:1;transform:none}
.ak-reveal-stagger > *{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ak-reveal-stagger.ak-in > *{opacity:1;transform:none}
.ak-reveal-stagger.ak-in > *:nth-child(1){transition-delay:.05s}
.ak-reveal-stagger.ak-in > *:nth-child(2){transition-delay:.12s}
.ak-reveal-stagger.ak-in > *:nth-child(3){transition-delay:.19s}
.ak-reveal-stagger.ak-in > *:nth-child(4){transition-delay:.26s}
.ak-reveal-stagger.ak-in > *:nth-child(5){transition-delay:.33s}
.ak-reveal-stagger.ak-in > *:nth-child(6){transition-delay:.4s}
@media (prefers-reduced-motion: reduce){.ak-reveal,.ak-reveal-stagger > *{opacity:1;transform:none;transition:none}}
.pcard{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.belief-card,.info-card,.ci-card{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
/* --- responsiveness / anti-overlap hardening --- */
.pname,.pcat,.sp-title,.b2b-title{overflow-wrap:break-word;word-break:break-word}
.nav-links{flex-wrap:nowrap}
.gifts-panel{z-index:70}
.mbackdrop .modal{max-height:92vh;overflow-y:auto}
@media(max-width:1180px){.nav-inner{gap:.7rem}.nl{padding:8px 9px;font-size:.78rem}}
@media(max-width:900px){
.sp-actions-grid{grid-template-columns:1fr}
.sp-faq-item .sp-faq-body{padding-left:1.3rem}
}
@media(max-width:640px){
.hero-brand-mark,.hero-round-logo-lg{max-width:100%}
.b2b-title{font-size:clamp(1.7rem,7vw,2.4rem)}
.modal{margin:0 auto}
#ak-ar-stage{aspect-ratio:3/4}
.footer-grid{gap:2rem}
}
/* ══════════════════════════════════════════════════════
AAKAARKALA ADDENDUM 3 · fix stretched-empty-space bug,
real logo, premium buttons
══════════════════════════════════════════════════════ */
/* Grid items default to align-items:stretch — when one column's content
is shorter than the other, it stretches to match and leaves a visible
empty gap. Pin every asymmetric 2-col layout to the top instead. */
.sp-grid,.pd-specs,.sp-specs,.sp-story-grid,.qrow,.sp-buy-row,.sp-contact-row,.story-stats,
.woocommerce-checkout .col2-set{align-items:start}
/* --- real logo in the nav & footer instead of the letter badge --- */
.bmark{background:none;box-shadow:none;padding:0;overflow:hidden}
.bmark img{width:100%;height:100%;object-fit:contain;display:block}
.footer-brand .bmark{box-shadow:none;width:54px;height:54px;padding:4px}
/* The logo artwork itself runs edge-to-edge on its own canvas — sitting
flush inside a rounded, overflow:hidden box (the same treatment the
small nav-bar mark uses, sized for a plain letter badge, not full
artwork) clipped its corners and read as "cut off". A touch of padding
plus a bigger box gives the rounded mask room to sit outside the
artwork instead of biting into it. */
/* --- nav icon row: tighten inconsistent gaps --- */
.nav-actions{gap:.55rem}
.nico{margin:0}
.btn-si{white-space:nowrap}
/* ── PREMIUM BUTTONS ─────────────────────────────────── */
.btn-si,.hero-search button,.padd,.pcard-add,.btn-full,.checkout-button,
.woocommerce-button.button,.button,.btn-pd-main,.btn-buy-now,.btn-b2b-quote,.btn-ar-view,
.wc-proceed-to-checkout a.checkout-button,#place_order,
.woocommerce-cart-form button[name=apply_coupon],
.wa-ask,.b2b-cta,.cat-filter-chip,.hero-cat-chip{
letter-spacing:.2px;
box-shadow:0 4px 14px rgba(20,10,40,.08);
}
.btn-si{background:linear-gradient(135deg,#1c1c26,#141420);color:#fff;border:none}
.btn-si:hover{background:linear-gradient(135deg,var(--pink),var(--pink-d));box-shadow:0 10px 26px rgba(232,23,93,.35);transform:translateY(-2px)}
.hero-search button{background:var(--thread);background-size:160% 160%;box-shadow:0 8px 22px rgba(232,23,93,.3)}
.hero-search button:hover{background-position:100% 0;transform:translateY(-1px)}
#place_order,.wc-proceed-to-checkout a.checkout-button{background:var(--thread)!important;background-size:160% 160%;border:none;box-shadow:0 10px 28px rgba(232,23,93,.32)}
#place_order:hover,.wc-proceed-to-checkout a.checkout-button:hover{background-position:100% 0!important;transform:translateY(-2px);box-shadow:0 14px 32px rgba(232,23,93,.4)}
.wa-ask{box-shadow:0 8px 26px rgba(37,211,102,.55),0 0 22px rgba(37,211,102,.5)}
.b2b-cta{box-shadow:0 10px 30px rgba(232,23,93,.3)}
.cat-filter-chip.on,.hero-cat-chip.on{box-shadow:0 6px 18px rgba(232,23,93,.22)}
.woocommerce-MyAccount-navigation a{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--thread);background-size:160% 160%;box-shadow:0 6px 18px rgba(232,23,93,.25)}
.woocommerce-MyAccount-navigation a:hover{transform:translateY(-2px)}
.ci-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-bottom:2.5rem}
@media(max-width:980px){.ci-card-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ci-card-grid{grid-template-columns:1fr}}
/* AR modal controls + gift dropdown items + filter chips — small button polish */
.btn-pd-wish{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s,color .25s}
.btn-pd-wish:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 8px 20px rgba(232,23,93,.18)}
.pwish,.btn-pd-wish{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s,color .25s,background .25s}
@keyframes akHeartPop{0%{transform:scale(1)}35%{transform:scale(1.45)}60%{transform:scale(.85)}100%{transform:scale(1)}}
.ak-wishlist-toggle i.ak-pop{animation:akHeartPop .45s var(--ease)}
.gifts-opt{transition:transform .2s var(--ease),background .2s}
.gifts-opt:hover{transform:translateX(3px)}
.fg-opt{transition:transform .18s var(--ease),background .18s,color .18s}
.fg-opt:hover,.fg-opt.on{transform:translateX(2px)}
.mp-chip{transition:transform .2s var(--ease),border-color .2s,color .2s}
.mp-chip:hover{transform:translateY(-2px);border-color:var(--pink);color:var(--pink)}
.sp-qty button{transition:background .2s,color .2s}
a.remove{transition:transform .2s var(--ease)}
a.remove:hover{transform:scale(1.15)}
/* --- remove the circular frame around the hero centre logo — show it plain --- */
.hero-round-logo,.hero-round-logo-lg{border-radius:0;border:none;background:none;box-shadow:none;width:auto;height:auto;max-width:230px;overflow:visible}
.hero-round-logo img,.hero-round-logo-lg img{width:100%;height:auto;object-fit:contain;border-radius:0}
@media(max-width:640px){.hero-round-logo,.hero-round-logo-lg{max-width:150px}}
/* --- nav: tighten the gap between logo and links, don't let nav-links stretch --- */
.nav-inner{display:flex!important;align-items:center;gap:1.4rem}
.nav-links{flex:0 0 auto}
.nav-actions{margin-left:auto}
@media(max-width:1180px){.nav-inner{gap:.8rem}}
/* --- hero: sticky nav is already in normal flow, drop the redundant nav-height offset --- */
.hero-flanked{padding-top:1.6rem}
@media(max-width:640px){.hero-flanked{padding-top:1rem}}
/* ── PREMIUM AUTH MODAL ──────────────────────────────── */
.ak-auth-modal{max-width:420px;border-radius:28px;position:relative;overflow:hidden}
.ak-auth-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--thread)}
.ak-auth-brand{display:flex;justify-content:center;padding:2rem 1.8rem 0}
.ak-auth-brand img{width:96px;height:96px;object-fit:contain}
/* ── MOBILE: cart table had no responsive stacking at all — cells would
squeeze or force horizontal scroll on a phone. Each row becomes a
card: thumbnail + name/variation tags as its own header block (was
fighting for space in the same justify-space-between row as the rest
of the fields, which is what made the layout look cramped/jumbled),
then price/qty/subtotal as clean label-value rows below. ── */
@media(max-width:700px){
table.shop_table.cart{border:none;box-shadow:none;background:transparent}
table.shop_table.cart tbody{display:block}
table.shop_table.cart tr.cart_item{display:grid;grid-template-columns:76px 1fr;column-gap:12px;position:relative;
background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:1.1rem 1.1rem 1rem;margin-bottom:1.1rem;
box-shadow:0 6px 18px -10px rgba(20,10,25,.15);overflow:hidden}
table.shop_table.cart tr.cart_item::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--thread)}
/* Thumbnail + name share the top row (grid, not the stacked
label:value flex rows below) so the product actually reads as a
single header instead of the name getting squeezed into its own
separate justify-space-between row fighting for space. */
table.shop_table.cart td.product-thumbnail{grid-column:1;grid-row:1;padding:0;border-top:none}
table.shop_table.cart td.product-thumbnail::before{content:none}
table.shop_table.cart td.product-thumbnail img{width:72px;height:72px}
table.shop_table.cart td.product-name{grid-column:2;grid-row:1;display:block;padding:0 1.7rem .8rem 0;border-top:none}
table.shop_table.cart td.product-price,table.shop_table.cart td.product-quantity,table.shop_table.cart td.product-subtotal{
grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-top:1px dashed var(--line)}
table.shop_table.cart td::before{content:attr(data-title);font-weight:700;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.4px}
table.shop_table.cart td.product-name::before{content:none}
table.shop_table.cart td.product-remove{grid-column:2;grid-row:1;justify-self:end;align-self:start;width:auto;padding:0;border-top:none;z-index:2}
table.shop_table.cart td.product-remove::before{content:none}
tr.cart_item td.actions{grid-column:1 / -1;display:block;background:transparent;border:none;padding:0}
.coupon-fields{flex-direction:column;align-items:stretch}
.woocommerce-cart-form .coupon input#coupon_code,
.woocommerce-cart-form .coupon button[name=apply_coupon]{width:100%}
.woocommerce-cart-form .coupon{padding:1.1rem}
}
/* Sticky only makes sense beside the item list on desktop's two-column
grid — stacked below the items once .cart-grid collapses to one column
(900px, see line ~2289), it would try to pin itself near the top of the
viewport as the page scrolls past it, landing awkwardly over whatever's
below instead of just sitting in the normal flow. */
@media(max-width:900px){.cart_totals{position:static;top:auto}}
/* ── MOBILE FILTER DRAWER (the sidebar had no way to reopen on mobile) ─ */
.ak-filter-toggle{display:none;align-items:center;gap:8px;padding:11px 18px;border-radius:50px;background:#fff;border:1.5px solid var(--line);font-weight:700;font-size:.82rem;color:var(--ink);margin-bottom:1.2rem;box-shadow:var(--sh)}
.ak-filter-toggle i{color:var(--pink)}
.ak-filter-close{display:none;margin-left:auto;cursor:pointer;color:var(--muted);font-size:.9rem}
@media(max-width:1060px){
.ak-filter-toggle{display:inline-flex}
.ak-filter-close{display:inline-flex}
.fs-title{display:flex;align-items:center}
.filter-sidebar{top:0!important}
}
/* ── MOBILE: small safety fixes on a few remaining components ── */
@media(max-width:600px){
.woocommerce-checkout #order_review table.shop_table td{font-size:.82rem;padding:.6rem 0}
/* An ellipsis here was hiding real product names ("Single Flower
Gift...") — not acceptable, the customer needs to see exactly what
they're buying. Let the full name wrap onto as many lines as it
needs instead of cutting it off; the ×qty sits on its own line
below the name rather than fighting it for space on one line. */
.woocommerce-checkout-review-order-table .ak-order-review-item{min-width:0;flex-basis:100%}
.woocommerce-checkout-review-order-table .ak-order-review-name{display:block;white-space:normal;
overflow:visible;line-height:1.3}
.woocommerce-checkout-review-order-table td.product-name{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.2rem .5rem}
.woocommerce-checkout-review-order-table dl.variation{flex-basis:100%;margin:.3rem 0 0!important;gap:.3rem!important}
.woocommerce-checkout-review-order-table dl.variation dt,
.woocommerce-checkout-review-order-table dl.variation dd{font-size:.66rem!important}
}
/* ── PRODUCT PAGE: Flipkart-style gallery (vertical thumbs beside image) ─ */
.sp-gallery-flex{display:flex;gap:.8rem;align-items:flex-start}
.sp-gallery-flex .sp-thumbs{flex-direction:column;margin-top:0;overflow-x:visible;overflow-y:auto;max-height:520px;flex-shrink:0}
.sp-gallery-flex .sp-thumb{width:64px;height:64px}
.sp-gallery-flex.sp-no-thumbs{display:block}
.sp-gallery-flex .sp-carousel{flex:1;min-width:0}
.sp-thumb-video{display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-size:1.2rem}
.sp-gallery-count{position:absolute;bottom:10px;right:10px;background:rgba(20,10,25,.6);color:#fff;font-size:.68rem;font-weight:700;padding:5px 10px;border-radius:20px;display:flex;align-items:center;gap:6px;z-index:5;pointer-events:none}
@media(max-width:780px){
.sp-gallery-flex{flex-direction:column-reverse}
.sp-gallery-flex .sp-thumbs{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:visible;width:100%}
}
/* ── PRODUCT PAGE: emotional connection card (rotating quotes) ─ */
/* ── B2B QUOTE MODAL ─────────────────────────────────── */
.ak-b2b-modal{max-width:460px;border-radius:28px;position:relative;overflow:hidden}
.ak-b2b-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--thread)}
.ak-b2b-product{display:flex;align-items:center;gap:14px;background:var(--bg);border:1.5px solid var(--line);border-radius:16px;padding:.9rem 1.1rem;margin-bottom:1.3rem}
.ak-b2b-product img{width:56px;height:56px;object-fit:cover;border-radius:10px;flex-shrink:0;background:var(--pink-s)}
.ak-b2b-product-label{font-size:.64rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
#ak-b2b-product-name{font-weight:700;color:var(--ink);font-size:.92rem}
.ak-b2b-modal .frow{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:480px){.ak-b2b-modal .frow{grid-template-columns:1fr}}
.ak-auth-modal .mhead{padding-left:1.8rem;padding-right:1.8rem;text-align:center;flex-direction:column;align-items:center;gap:.3rem}
.ak-auth-modal .mhead h3{font-size:1.35rem}
.ak-auth-modal .mhead p{font-size:.8rem}
.ak-auth-modal .mclose{position:absolute;top:1.2rem;right:1.2rem}
.mtabs{background:var(--pink-s)}
.mtab.on{background:var(--thread);color:#fff;box-shadow:0 6px 16px rgba(232,23,93,.3)}
.ak-ff-icon{position:relative}
.ak-ff-icon i{position:absolute;left:14px;top:38px;color:var(--muted);font-size:.85rem;pointer-events:none}
.ak-ff-icon input{padding-left:40px!important}
.ak-ff-icon i{transition:color .2s}
.ak-ff-icon:focus-within i{color:var(--pink)}
.mbody .btn-full{margin-top:.4rem}
/* Suppress Google Translate's own banner/toolbar — we drive it from our own dropdown */
.goog-te-banner-frame,.skiptranslate > iframe{display:none!important}
body{top:0!important}
#google_translate_element{display:none!important}
#ak-lang-current{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ══════════════════════════════════════════════════════
AAKAARKALA ADDENDUM 4 · bigger transparent logo, no more
laggy autoplay videos, centered nav links, seamless nav
══════════════════════════════════════════════════════ */
/* --- hero centre logo: bigger, real transparency (pre-processed PNG,
not a CSS blend trick — mix-blend-mode couldn't reach the gradient
through .hero-brand-banner's own stacking context) --- */
.hero-round-logo,.hero-round-logo-lg{max-width:380px;background:none;box-shadow:none}
@media(max-width:1180px){.hero-round-logo,.hero-round-logo-lg{max-width:300px}}
@media(max-width:640px){.hero-round-logo,.hero-round-logo-lg{max-width:220px}}
/* --- premium filter sidebar --- */
.filter-sidebar{border-radius:var(--r2);box-shadow:var(--sh);border-color:var(--line);padding:1.6rem 1.4rem}
.fs-title{display:flex;align-items:center;gap:8px;font-size:.68rem;padding-bottom:1rem;margin-bottom:1.2rem;border-bottom:1.5px solid var(--line);color:var(--ink)}
.fs-title i{color:var(--pink);font-size:.85rem}
.fg h4{font-size:.76rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:.8rem}
.fg-opt{padding:9px 11px;font-weight:600;border:1.5px solid transparent}
.fg-opt:hover{border-color:var(--pink-s)}
.fg-opt.on{background:var(--thread);color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(232,23,93,.25)}
.fg-opt.on i{color:#fff!important}
/* --- centre section headers (Our Collection / All Artworks / etc) --- */
.shop-header{justify-content:center;text-align:center;flex-direction:column;align-items:center}
.sp-related .shop-title,.sp-related{text-align:center}
.sp-related .pgrid{text-align:left}
/* --- hero side videos: autoplaying, cropped to fill without heavy
oversizing (100vw earlier was the actual cause of the lag — a modest
135% crop removes most letterboxing at a fraction of the cost) --- */
.hero-side-video{overflow:hidden}
.hero-side-video iframe{
position:absolute;top:50%;left:50%;border:0;pointer-events:none;
width:135%;height:135%;
transform:translate(-50%,-50%);
}
/* --- tighten the remaining gap under the nav on the homepage --- */
.hero,.hero-flanked{padding-top:2rem}
@media(max-width:640px){.hero,.hero-flanked{padding-top:1.2rem}}
/* --- centre the nav links between the logo and the icon cluster ---
Unscoped, this display:flex silently cancelled .nav-links{display:none}
(the ≤860px mobile-hamburger rule, same specificity but earlier in the
file) at EVERY width, including mobile — the full desktop menu (6 links
+ two dropdowns) was rendering at ~505px wide inside a 375px viewport,
overflowing the whole site's nav on every page. Scoped to desktop only. */
@media(min-width:861px){
.nav-inner{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem}
.nav-links{flex:initial;display:flex;justify-content:center}
.nav-actions{margin-left:0}
}
@media(max-width:1180px){.nav-inner{gap:.7rem}}
/* --- seamless nav: transparent until scrolled, so the page background
flows straight into the hero with no visible seam at page load --- */
#nav{background:transparent;border-bottom:1.5px solid transparent;box-shadow:none;transition:background .3s,border-color .3s,box-shadow .3s,backdrop-filter .3s;backdrop-filter:none}
#nav.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-bottom-color:var(--line);box-shadow:0 4px 28px rgba(0,0,0,.09)}
/* --- smoother, springier open animations for modals & dropdowns --- */
.mbackdrop{transition:opacity .35s cubic-bezier(.16,1,.3,1)}
.modal{transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .35s}
.mbackdrop:not(.open) .modal{opacity:0}
.tb-panel,.gifts-panel{transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
.mpanel{transition:transform .45s cubic-bezier(.16,1,.3,1)}
/* --- tactile press feedback on every button --- */
.btn-si:active,.btn-full:active,.padd:active,.pcard-add:active,
.btn-pd-main:active,.btn-buy-now:active,.btn-b2b-quote:active,.btn-ar-view:active,
.woocommerce-button.button:active,.checkout-button:active,#place_order:active{
transform:scale(.97)!important;transition-duration:.1s!important;
}
.tb-btn,.nl-gifts-btn{transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s}
.tb-drop.open .tb-btn{border-color:var(--pink);color:var(--pink)}
/* ── "See It In Your Space" — full-width secondary slot, but now with
the same vivid colour treatment as the other CTAs (was deliberately
kept "quiet/dashed" here; superseded now that all the action buttons
are meant to read as colourful together) ── */
.sp-actions-grid .btn-ar-view{
grid-column:1 / -1!important;width:100%!important;margin:.1rem 0 0!important;
padding:.8rem 1rem!important;border-radius:12px!important;font-size:.82rem!important;font-weight:700!important;
background:linear-gradient(100deg,var(--teal),var(--violet))!important;border:none!important;color:#fff!important;
box-shadow:0 8px 20px -8px rgba(124,58,237,.5)!important;height:auto!important;
}
.sp-actions-grid .btn-ar-view:hover{color:#fff!important;background:linear-gradient(100deg,var(--teal),var(--violet))!important;
box-shadow:0 10px 24px -6px rgba(124,58,237,.55)!important;transform:translateY(-2px)!important}
.sp-actions-grid .btn-ar-view i{font-size:.85rem!important;color:#fff!important}
/* ── Out of stock state ─────────────────────────────── */
.sp-actions-grid .sp-qty-row .btn-out-of-stock{flex:1;background:var(--line);color:var(--muted);cursor:not-allowed;border:none}
.sp-actions-grid .sp-qty-row .btn-out-of-stock:hover{background:var(--line);color:var(--muted);transform:none}
.sp-actions-grid .btn-notify{width:100%;margin:0;background:#25D366;color:#fff;border:none}
.sp-actions-grid .btn-notify:hover{background:#1da851;transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,211,102,.3)}
.padd.padd-oos{background:var(--line);color:var(--muted);cursor:not-allowed}
.padd.padd-oos:hover{background:var(--line)}
/* ── Single-flower gift: "includes a gift card" panel + optional
personalised message, shown above Add to cart instead of the
Customize Bouquet button ── */
/* Personalisation is a genuine USP (free, and unusual for this category)
so it gets a bold gradient "click here" pill that actually looks worth
clicking, instead of reading like generic form copy. */
.sp-giftcard{grid-column:1 / -1;margin-bottom:.4rem}
.sp-giftcard-toggle{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;
background:linear-gradient(90deg,var(--pink),var(--violet));border:none;border-radius:14px;padding:.75rem 1rem;
cursor:pointer;font-size:.86rem;font-weight:700;color:#fff;text-align:left;box-shadow:0 8px 20px rgba(232,23,93,.24);transition:.2s}
.sp-giftcard-toggle:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(232,23,93,.3)}
.sp-giftcard-toggle i.fa-feather-pointed{margin-right:6px}
.sp-giftcard-chevron{transition:transform .3s var(--ease);flex-shrink:0}
.sp-giftcard-toggle[aria-expanded="true"] .sp-giftcard-chevron{transform:rotate(180deg)}
@media(max-width:600px){
/* Centred and leaner on mobile: the leaf icon was just decorative
weight on a screen already tight on width, and centring the message
(instead of space-between pinning the chevron to the far right)
reads better as one balanced line rather than two ends of a bar. */
.sp-giftcard-toggle{justify-content:center;text-align:center;font-size:.8rem;padding:.7rem .9rem}
.sp-giftcard-leaf{display:none}
}
/* Popup instead of an inline reveal: .sp-giftcard-body[hidden] is just
gone (display:none, the attribute's default UA behaviour); once open
it becomes a fixed full-viewport wrapper holding a dark backdrop and
the centred modal panel — same pattern as the B2B quote modal
elsewhere on the page, so it feels consistent site-wide. */
.sp-giftcard-body:not([hidden]){position:fixed;inset:0;z-index:2200;display:flex;
align-items:center;justify-content:center;padding:1.2rem}
.sp-giftcard-modal-backdrop{position:absolute;inset:0;background:rgba(20,10,25,.55);
backdrop-filter:blur(2px);animation:sp-gift-fade .25s var(--ease)}
.sp-giftcard-modal{position:relative;z-index:1;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;
background:#fff;border-radius:22px;padding:1.6rem 1.6rem 1.4rem;box-shadow:0 30px 70px -20px rgba(0,0,0,.45);
animation:sp-gift-pop .3s var(--ease)}
@keyframes sp-gift-fade{from{opacity:0}to{opacity:1}}
@keyframes sp-gift-pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.sp-giftcard-modal-close{position:absolute;top:1rem;right:1rem;width:34px;height:34px;border-radius:50%;
border:1.5px solid var(--line);background:#fff;color:var(--muted);display:flex;align-items:center;justify-content:center;
font-size:.9rem;cursor:pointer;transition:.2s}
.sp-giftcard-modal-close:hover{border-color:var(--pink);color:var(--pink);transform:rotate(90deg)}
.sp-giftcard-modal-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;
font-size:1.15rem;color:var(--ink);margin:0 2.2rem 1.1rem 0;display:flex;align-items:center;gap:8px}
.sp-giftcard-modal-title i{color:var(--pink);font-size:1rem}
.sp-giftcard-modal-done{width:100%;margin-top:1.1rem;padding:.85rem;border:none;border-radius:14px;
background:linear-gradient(90deg,var(--pink),var(--violet));color:#fff;font-weight:700;font-size:.9rem;
cursor:pointer;transition:.2s;box-shadow:0 8px 20px rgba(232,23,93,.24)}
.sp-giftcard-modal-done:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(232,23,93,.3)}
@media(max-width:600px){
.sp-giftcard-body:not([hidden]){padding:0;align-items:flex-end}
.sp-giftcard-modal{max-width:none;max-height:88vh;border-radius:22px 22px 0 0;
animation:sp-gift-sheet .3s var(--ease)}
@keyframes sp-gift-sheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
}
.sp-giftcard-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
.sp-giftcard-fields .ff,.sp-giftcard-msg-field{margin-bottom:.8rem}
.sp-giftcard-msg-field textarea{resize:none;font-family:inherit}
.sp-giftcard-count{display:block;text-align:right;font-size:.7rem;color:var(--muted);margin-top:3px}
/* The live preview — a small "handwritten" gift-tag mockup rather than a
plain text summary, so filling the form feels like addressing a real card. */
.sp-giftcard-preview{position:relative;border-radius:14px;padding:2px;
background:var(--thread);box-shadow:0 10px 26px -10px rgba(232,23,93,.35)}
.sp-giftcard-preview-inner{background:#fffdf9;border-radius:12px;padding:1.3rem 1.4rem 1.1rem;text-align:center;
background-image:radial-gradient(circle at 8px 8px,rgba(232,23,93,.06) 1.5px,transparent 0);background-size:14px 14px}
.sp-giftcard-preview-ico{color:var(--pink);font-size:.85rem;margin-bottom:.5rem;opacity:.75}
.sp-giftcard-preview-to{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;
color:var(--ink);font-size:1rem;margin-bottom:.4rem}
.sp-giftcard-preview-msg{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-style:italic;
color:var(--char);font-size:.88rem;line-height:1.6;margin-bottom:.6rem;word-break:break-word}
.sp-giftcard-preview-from{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;
color:var(--pink-d);font-size:.85rem}
.sp-giftcard-preview-stem{margin-top:.7rem;padding-top:.6rem;border-top:1px dashed rgba(20,30,80,.14);
font-size:.72rem;font-weight:700;color:var(--teal);letter-spacing:.2px}
.sp-giftcard-preview-stem i{margin-right:4px}
.sp-giftcard-preview-label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;
letter-spacing:.4px;margin-bottom:.5rem}
@media(max-width:480px){.sp-giftcard-fields{grid-template-columns:1fr}}
/* Cart/order line badge for a gift item, next to the product name. */
.ak-gift-tag{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;color:var(--pink-d);
background:var(--pink-s);border-radius:999px;padding:.2rem .55rem;margin-left:.4rem;vertical-align:middle}
/* ══════════════════════════════════════════════════════
CHECKOUT: billing details + order review as two columns on
wider screens, then payment as its own full-width band
underneath both — it needs the full width for the UPI QR and
details to sit side by side (see .ak-upi-box), which a
half-width column left no room for. Single stacked column on
mobile (billing, order, payment, top to bottom).
══════════════════════════════════════════════════════ */
/* No extra max-width of its own — fills .wrap's own 1320px like every
other section on the site, instead of an arbitrarily narrower column
floating in the middle of it with dead space either side. */
.checkout-sections{display:flex;flex-direction:column;gap:1.8rem}
/* Two columns wide enough to hold both a real form and an order summary
side by side, so paying doesn't require scrolling back up past the
whole form first. Below 1000px there isn't room for two genuinely
usable columns (fields would get too narrow), so it drops back to the
single stacked column above. */
@media(min-width:1000px){
.checkout-sections{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;align-items:start}
.checkout-section-payment{grid-column:1 / -1}
}
.checkout-section{background:#fff;border:1.5px solid var(--line);border-radius:var(--r2);
padding:2rem clamp(1.2rem,3.5vw,3rem);box-shadow:var(--sh);position:relative;overflow:hidden}
.checkout-section::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--thread)}
.checkout-section h3{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-size:1.1rem;margin-bottom:1.2rem}
/* Order-review line item photo (see aakaarkala_checkout_item_thumbnail in
inc/checkout.php) — the stock checkout template only ever listed item
names as plain text, no image. */
.ak-order-review-item{display:flex;align-items:center;gap:.7rem}
.ak-order-review-thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
.ak-order-review-name{min-width:0}
/* Order-review remove link (see aakaarkala_checkout_item_remove_link in
inc/checkout.php) — reuses the cart page's pink-circle .remove look at a
smaller size, sat right after the quantity text. */
.woocommerce-checkout-review-order-table .product-quantity{display:inline-flex;align-items:center;gap:.6rem;
padding:3px 12px;border-radius:50px;background:var(--pink-s);color:var(--pink-d)!important;
font-size:.72rem;font-weight:800;letter-spacing:.02em}
.ak-order-review-remove{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
border-radius:50%;background:var(--pink);color:#fff!important;font-size:1rem;font-weight:900;
line-height:1;text-decoration:none!important;flex-shrink:0;box-shadow:0 2px 6px rgba(232,23,93,.35);
transition:background .15s,opacity .15s,transform .15s}
.ak-order-review-remove:hover{background:var(--ink,#1a1a2e);transform:scale(1.1)}
.ak-order-review-remove.ak-removing{opacity:.4;pointer-events:none}
/* Fields inside billing/shipping fill as many ~230px columns as the row
actually has room for (auto-fit) — 3 on a laptop, 4-5 on a wide desktop
— instead of a fixed column count that leaves a growing gap of unused
width as the screen gets wider. */
.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper{
display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 1.3rem;
}
.woocommerce-billing-fields__field-wrapper .form-row,.woocommerce-shipping-fields__field-wrapper .form-row{
width:auto!important;margin:0 0 1.1rem!important;float:none!important;
}
#order_comments_field{grid-column:1 / -1}
@media(max-width:560px){
.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr}
}
/* ══════════════════════════════════════════════════════
SIMPLIFIED CHECKOUT — Name, Mobile, Email, Pincode (auto-fills
City/State), Address. The billing grid above forces every field's
width to auto regardless of WooCommerce's own form-row-wide/first/last
classes, so the "should span the full row" fields need grid-column
set directly by id instead. Country is dropped from view (locked to
India in inc/checkout.php) rather than left as a single-option picker
nobody needs to touch.
══════════════════════════════════════════════════════ */
.woocommerce-billing-fields__field-wrapper #billing_first_name_field,
.woocommerce-billing-fields__field-wrapper #billing_phone_field,
.woocommerce-billing-fields__field-wrapper #billing_email_field,
.woocommerce-billing-fields__field-wrapper #billing_postcode_field,
.woocommerce-billing-fields__field-wrapper #billing_address_1_field,
.woocommerce-billing-fields__field-wrapper #billing_landmark_field{grid-column:1 / -1}
.ak-country-locked{display:none!important}
/* Every field gets its own accent colour (icon + left rail + focus glow,
all keyed off one --acc custom property) instead of one flat grey —
the "colourful" look, but systematic rather than random, and it still
reads as one coherent form since every field uses the exact same
icon/rail/focus recipe, just a different hue. */
/* --violet is aliased to the same blue as --royal in this theme's actual
palette (see the body:not(.theme-dark) override further up the file),
so postcode/address/email would otherwise all land on one indistinguishable
blue instead of reading as separate colours — a real purple hex here
keeps email visually distinct from the address-y fields. */
#billing_first_name_field{--acc:var(--pink)}
#billing_phone_field{--acc:#25D366}
#billing_email_field{--acc:#7C3AED}
#billing_postcode_field{--acc:var(--royal)}
#billing_city_field{--acc:var(--saffron-d,var(--saffron))}
#billing_state_field{--acc:var(--teal)}
#billing_address_1_field{--acc:var(--royal)}
#billing_landmark_field{--acc:var(--pink-d,var(--pink))}
#billing_first_name_field,#billing_phone_field,#billing_email_field,#billing_postcode_field,
#billing_city_field,#billing_state_field,#billing_address_1_field,#billing_landmark_field{position:relative}
#billing_first_name_field input,#billing_phone_field input,#billing_email_field input,
#billing_postcode_field input,#billing_city_field input,#billing_state_field select,
#billing_address_1_field input,#billing_landmark_field input{
border-left:3px solid var(--acc)!important}
#billing_first_name_field input:focus,#billing_phone_field input:focus,#billing_email_field input:focus,
#billing_postcode_field input:focus,#billing_city_field input:focus,#billing_state_field select:focus,
#billing_address_1_field input:focus,#billing_landmark_field input:focus{
border-color:var(--acc)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)!important}
#billing_postcode_field{position:relative}
.ak-pincode-status{display:block;font-size:.72rem;font-weight:700;margin-top:.4rem;min-height:1.1em}
.ak-pincode-loading{color:var(--muted)}
.ak-pincode-loading::before{content:'';display:inline-block;width:9px;height:9px;margin-right:5px;
border-radius:50%;border:2px solid var(--line);border-top-color:var(--pink);animation:akPinSpin .7s linear infinite;vertical-align:middle}
@keyframes akPinSpin{to{transform:rotate(360deg)}}
.ak-pincode-ok{color:var(--teal,#0D9488)}
.ak-pincode-ok::before{content:'\f058';font-family:'Font Awesome 6 Free';font-weight:900;margin-right:5px}
.ak-pincode-error{color:#C0392B}
.ak-pincode-error::before{content:'\f06a';font-family:'Font Awesome 6 Free';font-weight:900;margin-right:5px}
/* Delivery charge — inc/shipping.php quotes one rate per courier ShipDockets
has enabled (inc/shipdockets.php), so the customer picks between real
options. Each /label is a clickable radio card: a visible circle
indicator plus a highlighted state for whichever one is currently
selected, so it doesn't read as a static computed-result banner. */
ul#shipping_method{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.6rem}
ul#shipping_method li{position:relative}
ul#shipping_method input[type="radio"]{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;margin:0;cursor:pointer;z-index:1}
ul#shipping_method label{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;
border:1.5px solid var(--line);border-radius:14px;font-weight:700;font-size:.88rem;
color:var(--char);background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
ul#shipping_method label::before{content:'';flex-shrink:0;width:18px;height:18px;border-radius:50%;
border:2px solid var(--line);background:#fff;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
ul#shipping_method input[type="radio"]:checked ~ label{border-color:var(--pink);
background:linear-gradient(100deg,var(--pink-s,rgba(232,23,93,.06)),rgba(124,58,237,.05))}
ul#shipping_method input[type="radio"]:checked ~ label::before{border-color:var(--pink);border-width:5px}
ul#shipping_method input[type="radio"]:focus-visible ~ label{outline:2px solid var(--pink);outline-offset:2px}
ul#shipping_method .woocommerce-Price-amount{margin-left:auto;font-weight:900;color:var(--ink)}
.ak-shipping-note-whatsapp{color:#1DA851}
.ak-shipping-note-whatsapp i{color:#25D366}
/* Product page: each column sits at its own natural height — stretching
one to match the other left either an empty void below a short gallery
(long description pages) or a dead gap above the button card (pages
where the gallery grew tall, e.g. the flower/colour picker's extra
rows). Natural height for both, gallery stays sticky while the (often
longer) info column scrolls past it. */
.sp-grid{align-items:start}
.sp-gallery-col{position:sticky;top:calc(var(--nh) + 24px)}
@media(max-width:900px){
.sp-gallery-col{position:static;top:auto}
}
/* ══════════════════════════════════════════
My Account — premium dashboard
══════════════════════════════════════════ */
.woocommerce-MyAccount-navigation a{display:flex;align-items:center;gap:8px}
.woocommerce-MyAccount-navigation a i{font-size:.85rem;opacity:.85}
.woocommerce-account .woocommerce{max-width:none}
.ak-account-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
background:linear-gradient(120deg,var(--pink-s),var(--royal-s));border-radius:var(--r2);
padding:1.6rem 1.8rem;margin-bottom:1.6rem}
.ak-account-hi{display:flex;align-items:center;gap:1rem}
.ak-account-avatar{width:56px;height:56px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
justify-content:center;font-family:'Georgia Pro',Georgia,serif;font-weight:900;font-size:1.6rem;color:#fff;
background:var(--thread);background-size:160% 160%;box-shadow:0 6px 18px rgba(232,23,93,.3)}
.ak-account-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.ak-account-name{font-family:'Georgia Pro',Georgia,serif;font-weight:900;font-size:1.5rem;color:var(--ink);margin:.1rem 0 0}
.ak-account-logout{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:50px;
background:#fff;border:1.5px solid var(--line);font-size:.8rem;font-weight:700;color:var(--char);
text-decoration:none;transition:.2s var(--ease)}
.ak-account-logout:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-2px)}
.ak-account-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.6rem}
.ak-account-card{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1.3rem 1.4rem;
background:#fff;border:1.5px solid var(--line);border-radius:var(--r2);text-decoration:none;
box-shadow:var(--sh);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.ak-account-card:hover{transform:translateY(-5px);box-shadow:var(--shl);border-color:transparent}
.ak-account-card-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
justify-content:center;font-size:1.15rem}
.ak-account-card-num{font-family:'Georgia Pro',Georgia,serif;font-weight:900;font-size:1.6rem;color:var(--ink);line-height:1}
.ak-account-card-label{font-size:.82rem;font-weight:700;color:var(--muted)}
.ak-account-cta{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
background:#fff;border:1.5px dashed var(--line);border-radius:var(--r2);padding:1.5rem 1.8rem;margin-bottom:.4rem}
.ak-account-cta h3{font-family:'Georgia Pro',Georgia,serif;font-weight:900;font-size:1.2rem;color:var(--ink);margin:0 0 .3rem}
.ak-account-cta p{font-size:.85rem;color:var(--muted);margin:0;max-width:460px}
@media(max-width:760px){
.ak-account-cards{grid-template-columns:1fr 1fr}
.ak-account-cta{flex-direction:column;align-items:flex-start}
.ak-account-cta .btn-full{max-width:100%!important;width:100%}
}
@media(max-width:420px){
.ak-account-cards{grid-template-columns:1fr 1fr;gap:.7rem}
.ak-account-hero{padding:1.3rem 1.4rem}
}
/* Dark theme */
body.theme-dark .ak-account-card,body.theme-dark .ak-account-cta{background:#211A38;border-color:rgba(124,58,237,.3)}
body.theme-dark .ak-account-logout{background:#211A38;border-color:rgba(124,58,237,.3);color:var(--char)}
body.theme-dark .ak-account-card-num,body.theme-dark .ak-account-name,body.theme-dark .ak-account-cta h3{color:var(--ink)}
/* My Account — login/register form (logged-out state) as a centered card */
.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content,
.woocommerce-account .u-columns.col2-set{max-width:none}
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register{
max-width:440px;margin:0 auto;background:#fff;border:1.5px solid var(--line);
border-radius:var(--r2);padding:2rem 2rem 2.2rem;box-shadow:var(--sh)}
.woocommerce form.woocommerce-form-login .form-row,
.woocommerce form.woocommerce-form-register .form-row{margin-bottom:1rem}
.woocommerce form.woocommerce-form-login label,
.woocommerce form.woocommerce-form-register label{font-size:.78rem;font-weight:700;color:var(--char);display:block;margin-bottom:.35rem}
.woocommerce form.woocommerce-form-login input.input-text,
.woocommerce form.woocommerce-form-register input.input-text{
width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:.9rem;transition:border-color .2s,box-shadow .2s}
.woocommerce form.woocommerce-form-login input.input-text:focus,
.woocommerce form.woocommerce-form-register input.input-text:focus{
border-color:var(--pink);box-shadow:0 0 0 3px rgba(232,23,93,.12);outline:none}
.woocommerce form.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce form.woocommerce-form-register .woocommerce-form-register__submit{width:100%;justify-content:center;margin-top:.4rem}
.woocommerce .woocommerce-form-login__rememberme{font-weight:600;font-size:.8rem;color:var(--muted)}
.woocommerce-account .u-columns.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}
@media(max-width:760px){.woocommerce-account .u-columns.col2-set{grid-template-columns:1fr}}
/* ══════════════════════════════════════════
BUILD-A-BOUQUET studio
══════════════════════════════════════════ */
.qty-card{position:relative;overflow:hidden;background:linear-gradient(160deg,#FFF3F7,#FFF8EE 45%,#F2F9FF);
border-radius:28px;border:1.5px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.08);
padding:3rem 2.4rem;max-width:760px;margin:1.6rem auto 0;text-align:center}
.qty-card::before{content:'✿';position:absolute;top:-30px;left:-20px;font-size:8rem;color:rgba(232,23,93,.06);transform:rotate(-15deg)}
.qty-card::after{content:'✿';position:absolute;bottom:-40px;right:-20px;font-size:9rem;color:rgba(39,69,201,.06);transform:rotate(20deg)}
.qty-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--saffron);position:relative}
.qty-title{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:1.6rem;color:var(--ink);margin:.4rem 0 .3rem;position:relative}
.qty-title em{color:var(--pink);font-style:italic}
.qty-sub{color:var(--muted);font-size:.85rem;margin-bottom:1.6rem;position:relative}
.qty-grid{display:flex;gap:1.1rem;justify-content:center;position:relative;flex-wrap:wrap}
.qty-btn{position:relative;width:92px;padding:1.3rem .6rem 1.1rem;border-radius:24px;border:2px solid var(--line);background:#fff;
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.55rem;
cursor:pointer;transition:.25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 14px rgba(0,0,0,.05)}
.qty-btn .qn-ring{width:46px;height:46px;border-radius:50%;background:linear-gradient(150deg,#FFF3F7,#FFF8EE);
border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.25s}
.qty-btn .qn{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-size:1.3rem;font-weight:900;color:var(--ink)}
.qty-btn .qty-dots{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;max-width:60px;min-height:6px}
.qty-btn .qty-dots i{width:6px;height:6px;border-radius:50%;background:var(--pink);opacity:.35}
.qty-btn .qlabel{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.qty-btn:hover{transform:translateY(-6px) scale(1.05);border-color:var(--pink);box-shadow:0 14px 28px rgba(232,23,93,.18)}
.qty-btn:hover .qn-ring{border-color:var(--pink)}
.qty-btn.on{background:linear-gradient(160deg,#FFF3F7,#FFF8EE);border-color:var(--pink);box-shadow:0 12px 30px rgba(232,23,93,.25)}
.qty-btn.on .qn-ring{background:linear-gradient(135deg,var(--pink),var(--violet));border-color:transparent;box-shadow:0 6px 16px rgba(232,23,93,.35)}
.qty-btn.on .qn{color:#fff}
.qty-btn.on .qty-dots i{background:var(--pink);opacity:1}
.qty-btn.on .qlabel{color:var(--ink)}
.bouquet-builder-page .builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:2rem;align-items:start;margin:1.8rem 0 5.5rem}
@media(max-width:900px){.bouquet-builder-page .builder{grid-template-columns:minmax(0,1fr)}}
.palette-card{background:var(--card);border-radius:26px;border:1px solid rgba(0,0,0,.05);
box-shadow:0 4px 12px rgba(0,0,0,.04),0 24px 60px rgba(0,0,0,.08);padding:2rem;position:sticky;top:calc(var(--nh) + 20px)}
@media(max-width:900px){.palette-card{position:static}}
@media(max-width:480px){.palette-card,.stage-card{padding:1.3rem}}
.palette-title{font-size:.78rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem;display:flex;align-items:center;gap:8px}
.palette-hint{font-weight:600;color:var(--pink);text-transform:none;letter-spacing:0;font-size:.72rem}
.palette-foot{margin-top:1.1rem;font-size:.72rem;color:var(--muted);text-align:center}
.palette-foot i{color:var(--pink);margin-right:5px}
/* Step 1 of the palette — pick a flower TYPE, scrolling horizontally
(same "swatch strip" pattern as a product's own variation picker)
instead of every colour of every type crowding one flat grid. */
.palette-types-row{display:flex;align-items:center;gap:.5rem}
.palette-types{display:flex;gap:.7rem;overflow-x:auto;scroll-behavior:smooth;padding:.3rem .1rem;
scrollbar-width:none}
.palette-types::-webkit-scrollbar{display:none}
.palette-type-btn{flex-shrink:0;width:84px;background:#fff;border:1.5px solid transparent;border-radius:16px;
padding:.7rem .4rem .5rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.35rem;
box-shadow:0 2px 8px rgba(0,0,0,.04);transition:transform .2s,box-shadow .2s,border-color .2s}
.palette-type-btn:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(232,23,93,.12)}
.palette-type-btn.on{border-color:var(--pink);box-shadow:0 8px 22px rgba(232,23,93,.18)}
.palette-type-btn img{width:100%;height:52px;object-fit:contain}
.palette-type-name{font-size:.68rem;font-weight:700;color:var(--ink);text-align:center;line-height:1.2}
.palette-type-bar{width:0;height:3px;border-radius:3px;background:var(--pink);transition:width .2s}
.palette-type-btn.on .palette-type-bar{width:60%}
@media(min-width:769px){
.palette-type-btn{width:128px;padding:1.1rem .7rem .8rem;gap:.6rem}
.palette-type-btn img{height:104px}
.palette-type-name{font-size:.82rem}
.palette-type-btn.on{box-shadow:0 14px 30px rgba(232,23,93,.22)}
}
.palette-scroll-btn{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:#fff;
border:1.5px solid var(--line);color:var(--char);display:flex;align-items:center;justify-content:center;
cursor:pointer;font-size:.72rem;transition:.2s}
.palette-scroll-btn:hover{border-color:var(--pink);color:var(--pink)}
@media(max-width:480px){.palette-scroll-btn{width:26px;height:26px;font-size:.65rem}}
/* Step 2 — colour swatches for whichever type is selected above. */
.palette-colors{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem;padding-top:1.1rem;
border-top:1px dashed var(--line)}
.palette-color-btn{display:flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--line);
border-radius:50px;padding:7px 14px 7px 8px;cursor:pointer;font-size:.76rem;font-weight:700;color:var(--ink);
transition:.2s}
.palette-color-btn:hover{border-color:var(--pink);transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(232,23,93,.35)}
.palette-color-btn.maxed{opacity:.35;cursor:not-allowed;pointer-events:none}
.palette-color-dot{width:20px;height:20px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08)}
.palette-more-btn{flex-basis:100%;display:flex;align-items:center;justify-content:center;gap:7px;
background:#fff;border:1.5px dashed var(--line);border-radius:50px;padding:9px 14px;margin-top:.2rem;
font-size:.76rem;font-weight:700;color:var(--muted);cursor:pointer;transition:.2s}
.palette-more-btn:hover{border-color:var(--pink);color:var(--pink)}
.palette-more-btn i{font-size:.65rem}
.palette-color-price{color:var(--muted);font-weight:600;font-size:.68rem}
.stage-card{position:relative;background:radial-gradient(ellipse at 50% 25%,#FFFCF8 0%,#FDF3E7 55%,#F8E4CE 100%);
border-radius:26px;border:1px solid rgba(0,0,0,.05);
box-shadow:0 4px 12px rgba(0,0,0,.04),0 30px 70px rgba(120,60,30,.10);
padding:2rem;display:flex;flex-direction:column}
.stage-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.stage-title{font-size:.78rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.stage-count{background:linear-gradient(90deg,var(--pink),var(--violet));color:#fff;font-size:.7rem;font-weight:800;
padding:5px 12px;border-radius:20px;box-shadow:0 4px 12px rgba(232,23,93,.25)}
/* Order summary — replaces the old 3D flower-arrangement visual with a
plain, scannable review: base material, flower list, add-ons, total.
The summary itself doubles as the "preview" before Buy Now. */
.order-summary{display:flex;flex-direction:column;gap:1rem;padding:1.4rem 0}
.order-row{display:flex;align-items:flex-start;gap:1rem}
.order-row-label{display:flex;align-items:center;gap:8px;flex-shrink:0;width:110px;font-size:.78rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding-top:.3rem}
.order-row-label i{color:var(--pink);font-size:.85rem}
.order-row-value{font-size:.95rem;font-weight:700;color:var(--ink);padding-top:.25rem}
.order-flower-list{display:flex;flex-wrap:wrap;gap:.5rem;flex:1}
.order-empty-hint{font-size:.85rem;color:var(--muted);padding-top:.25rem}
.order-flower-chip{display:flex;align-items:center;gap:.5rem;padding:5px 6px 5px 5px;border-radius:50px;
background:#fff;border:1.5px solid var(--line);box-shadow:0 3px 8px rgba(0,0,0,.05)}
.order-flower-chip img{width:32px;height:32px;object-fit:contain;border-radius:50%;background:var(--bg)}
.order-flower-chip span{font-size:.78rem;font-weight:700;color:var(--ink)}
.order-flower-remove{width:20px;height:20px;border-radius:50%;background:var(--bg);border:none;color:var(--muted);
font-size:.6rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.order-flower-remove:hover{background:var(--pink);color:#fff}
.stage-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.2rem;
padding-top:1.2rem;border-top:1.5px dashed var(--line);flex-wrap:wrap}
.stage-total{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:1.55rem;color:var(--ink);letter-spacing:-.3px}
.stage-total span{color:var(--pink)}
.stage-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.stage-actions .btn-buy-now{flex:1;justify-content:center;padding:1rem 1.5rem;border-radius:13px;font-size:.95rem;font-weight:800}
.stage-actions .btn-buy-now:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
/* Step 1 — base material (Bouquet / Ceramic Vase / Bamboo Basket). Each
base gets its own accent colour (--acc) so the three read as distinct
choices instead of three identical grey cards — pink for the wrapped
bouquet, a cool teal-blue for the ceramic vase, and a warm amber for
the bamboo basket, each carried through the icon ring, the hover glow,
and the selected-state fill. */
.base-grid{display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap;margin-top:1rem}
.base-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:.7rem;width:180px;
padding:1.7rem 1.2rem 1.5rem;border-radius:24px;border:2px solid var(--line);background:#fff;
cursor:pointer;transition:.28s cubic-bezier(.34,1.56,.64,1);overflow:hidden}
.base-btn--bouquet{--acc:var(--pink);--acc-s:rgba(232,23,93,.12)}
.base-btn--vase{--acc:#1B8A9C;--acc-s:rgba(27,138,156,.12)}
.base-btn--basket{--acc:#B8813E;--acc-s:rgba(184,129,62,.14)}
.base-icon-ring{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;
background:var(--acc-s);transition:.28s var(--ease)}
.base-btn img{width:64px;height:64px;object-fit:contain}
.base-btn .base-name{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;font-size:1.08rem;color:var(--ink)}
.base-btn .base-desc{font-size:.74rem;color:var(--muted);text-align:center;line-height:1.45}
.base-btn:hover{transform:translateY(-6px) scale(1.02);border-color:var(--acc);box-shadow:0 16px 32px -10px var(--acc-s)}
.base-btn:hover .base-icon-ring{transform:scale(1.08) rotate(-4deg)}
.base-btn.on{border-color:transparent;background:linear-gradient(160deg,var(--acc-s),#fff 70%);
box-shadow:0 14px 32px -10px var(--acc-s)}
.base-btn.on .base-icon-ring{background:var(--acc);box-shadow:0 8px 20px -4px var(--acc-s)}
.base-btn.on .base-icon-ring img{filter:brightness(0) invert(1)}
.base-btn.on::after{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;
top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;
font-size:.6rem;display:flex;align-items:center;justify-content:center}
/* Step 4 — add-ons */
.addons-row{margin-top:1.3rem;padding-top:1.2rem;border-top:1.5px dashed var(--line)}
.addons-title{font-size:.8rem;font-weight:800;color:var(--ink);margin-bottom:.7rem}
.addons-chips{display:flex;flex-wrap:wrap;gap:.6rem}
/* A plain button now, not a checkbox label — the price is deliberately
not shown here at all (see aakaarkala_bouquet_addons() usage in
page-customize-bouquet.php); tapping opens the preview modal, which is
the only place the price appears, same as picking a flower. */
.addon-chip{display:flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:50px;
border:1.5px solid var(--line);background:#fff;cursor:pointer;font-size:.78rem;font-weight:600;
color:var(--char);transition:.2s;font-family:inherit}
.addon-chip:hover{border-color:var(--pink);transform:translateY(-1px)}
.addon-chip.on{border-color:var(--pink);background:var(--pink-s);color:var(--ink)}
.addon-chip img{width:22px;height:22px;object-fit:contain;border-radius:50%}
.addon-chip-box{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line);
background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s}
.addon-chip-box i{font-size:.6rem;color:#fff;display:none}
.addon-chip.on .addon-chip-box{background:var(--pink);border-color:var(--pink)}
.addon-chip.on .addon-chip-box i{display:block}
@media(max-width:480px){.base-btn{width:44%;padding:1.2rem .8rem}.qty-card{padding:2.2rem 1.4rem}}
.btn-reset{padding:.75rem 1.2rem;border-radius:13px;border:1.5px solid rgba(0,0,0,.08);background:#fff;
color:var(--muted);font-size:.83rem;font-weight:700;cursor:pointer;transition:.25s}
.btn-reset:hover{border-color:var(--pink);color:var(--pink);background:var(--pink-s)}
/* ══════════════════════════════════════════
ABOUT — story, click-a-heading-for-a-popup
══════════════════════════════════════════ */
.about-story-sec{padding:1rem 0 3.5rem}
.about-story-list{display:flex;flex-direction:column;gap:1.1rem;max-width:520px;margin:0 auto}
.about-story-trigger{position:relative;display:flex;align-items:center;gap:1rem;width:100%;text-align:left;
background:linear-gradient(100deg,var(--acc-s) 0%,#fff 45%);border:1.5px solid var(--line);
border-left:4px solid var(--acc);border-radius:16px;padding:1rem 1.3rem;
cursor:pointer;font-family:inherit;transition:.25s var(--ease);overflow:hidden;
box-shadow:0 6px 16px -10px var(--acc)}
.about-story-trigger:hover{transform:translateX(6px) translateY(-2px);
box-shadow:0 14px 30px -12px var(--acc);border-color:var(--acc)}
/* A gentle left/right zigzag on mobile, alternating per card, instead of
a flat uniform stack — purely decorative offset, harmless at any width
the single-column list appears at. */
.about-story-list .about-story-trigger:nth-child(odd){width:92%;margin-right:8%}
.about-story-list .about-story-trigger:nth-child(even){width:92%;margin-left:8%;border-left:none;border-right:4px solid var(--acc)}
.ast-icon{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--acc-s);
color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:1.05rem;
transition:.25s var(--ease)}
.about-story-trigger:hover .ast-icon{background:var(--acc);color:#fff;transform:scale(1.08) rotate(-6deg)}
.ast-heading{flex:1;font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:800;
font-size:1.02rem;color:var(--ink)}
.ast-arrow{color:var(--acc);font-size:.8rem;transition:.2s;opacity:.6}
.about-story-trigger:hover .ast-arrow{opacity:1;transform:translateX(4px)}
/* Desktop: a proper 3-column card grid instead of the mobile zigzag list
— icon/heading/arrow stack vertically so each card reads well at a
third of the width instead of a cramped single row. */
@media(min-width:769px){
.about-story-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;max-width:100%}
.about-story-list .about-story-trigger{margin:0 !important;width:100% !important;border-left:none;border-top:4px solid var(--acc);
border-right:1.5px solid var(--line);flex-direction:column;align-items:flex-start;gap:.9rem;
padding:1.5rem 1.4rem 1.4rem;background:linear-gradient(160deg,var(--acc-s) 0%,#fff 55%)}
.about-story-list .about-story-trigger:hover{transform:translateY(-6px)}
.ast-icon{width:50px;height:50px;font-size:1.2rem}
.ast-heading{font-size:1.05rem;line-height:1.35}
.ast-arrow{position:absolute;bottom:1.3rem;right:1.3rem}
}
.about-story-close{position:relative;max-width:640px;margin:3.5rem auto 0;text-align:center;
padding:2.6rem 1.6rem;overflow:hidden;border-radius:24px;border:1.5px solid var(--line);
background:linear-gradient(120deg,var(--pink-s),var(--gold-s) 45%,var(--teal-s) 100%)}
.about-story-close::before{content:'✿';position:absolute;top:-26px;left:-16px;font-size:6.5rem;
color:rgba(232,23,93,.1);transform:rotate(-12deg)}
.about-story-close::after{content:'✿';position:absolute;bottom:-30px;right:-14px;font-size:7.5rem;
color:rgba(13,148,136,.1);transform:rotate(16deg)}
.asc-line{position:relative;font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;
font-size:clamp(1.3rem,3vw,1.7rem);background:var(--thread);-webkit-background-clip:text;
background-clip:text;color:transparent;line-height:1.4;margin-bottom:1rem}
.asc-sub{position:relative;font-size:.88rem;color:var(--char);line-height:1.8;max-width:480px;margin:0 auto 1.1rem}
.asc-tag{position:relative;font-size:.78rem;font-weight:800;letter-spacing:.5px;color:var(--pink);text-transform:uppercase}
.about-story-card{width:min(680px,100%);max-height:min(80vh,700px);display:flex;flex-direction:column;
background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);
animation:fpIn .38s cubic-bezier(.34,1.56,.64,1)}
.about-story-modal-body{overflow-y:auto;padding:2.6rem 2.4rem 2.2rem}
.about-story-icon{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc-s));
color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1.1rem;
box-shadow:0 10px 24px -8px var(--acc)}
.about-story-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
color:var(--acc);margin-bottom:.5rem}
.about-story-section h3{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-weight:900;
font-size:1.5rem;color:var(--ink);line-height:1.3;margin-bottom:1.2rem}
.about-story-copy{font-size:.92rem;color:var(--char);line-height:1.9}
.about-story-copy p{margin-bottom:1rem}
.about-story-copy strong{color:var(--ink);background:linear-gradient(180deg,transparent 65%,var(--acc-s) 65%)}
.about-story-copy em{color:var(--acc);font-style:italic;font-weight:600}
@media(max-width:640px){
.about-story-trigger{padding:.85rem 1rem;gap:.7rem}
.ast-icon{width:36px;height:36px;font-size:.9rem}
.ast-heading{font-size:.88rem}
.about-story-modal-body{padding:2rem 1.4rem 1.6rem}
.about-story-icon{width:48px;height:48px;font-size:1.25rem}
.about-story-section h3{font-size:1.25rem}
.about-story-close{padding:2rem 1.3rem;margin-top:2.4rem}
}
.bouquet-builder-page .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
background:var(--ink);color:#fff;font-size:.85rem;font-weight:600;padding:12px 22px;border-radius:14px;
box-shadow:0 14px 34px rgba(0,0,0,.3);z-index:2500;opacity:0;pointer-events:none;
transition:.35s cubic-bezier(.34,1.56,.64,1)}
.bouquet-builder-page .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ── Flower preview modal ───────────────────────────────── */
.fp-modal{position:fixed;inset:0;z-index:2400;display:none;align-items:center;justify-content:center;padding:1.2rem}
.fp-modal.open{display:flex}
.fp-backdrop{position:absolute;inset:0;background:rgba(20,10,40,.55);backdrop-filter:blur(5px);animation:fpFade .25s ease}
@keyframes fpFade{from{opacity:0}to{opacity:1}}
.fp-card{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:0;
width:min(720px,100%);background:#fff;border-radius:24px;overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,.35);animation:fpIn .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes fpIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:620px){.fp-card{grid-template-columns:1fr}}
.fp-media{background:radial-gradient(ellipse at 50% 40%,#FFF8FB,#FCEBF2 70%,#F6DCE8);
display:flex;align-items:center;justify-content:center;padding:2rem;min-height:280px}
.fp-media img{width:100%;max-height:260px;object-fit:contain;
filter:drop-shadow(0 12px 22px rgba(0,0,0,.25));animation:fpBloom .5s var(--ease) both}
@keyframes fpBloom{from{opacity:0;transform:scale(.82) rotate(-6deg)}to{opacity:1;transform:none}}
.fp-body{padding:2rem 1.9rem;display:flex;flex-direction:column;justify-content:center}
.fp-eyebrow{font-size:.66rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--saffron)}
.fp-name{font-family:'Georgia Pro',Georgia,serif;font-weight:900;font-size:1.6rem;color:var(--ink);margin:.4rem 0 .3rem}
.fp-price{font-size:1.3rem;font-weight:800;color:var(--pink);margin-bottom:.7rem}
.fp-desc{font-size:.84rem;color:var(--muted);line-height:1.75;margin-bottom:1.4rem}
.fp-add{padding:.9rem 1.4rem;border-radius:13px;border:none;background:var(--thread);background-size:180% 180%;
color:#fff;font-size:.9rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;
gap:9px;transition:.28s var(--ease);box-shadow:0 10px 26px rgba(232,23,93,.3)}
.fp-add:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 16px 34px rgba(232,23,93,.4)}
/* Reused for the add-on preview's Add/Remove toggle — an already-added
add-on shows a calmer, teal "tap to remove" state instead of the same
pink "add" gradient, so it's clear the button now does the opposite. */
.fp-add.fp-add-remove{background:var(--teal,#0D9488);box-shadow:0 10px 26px rgba(13,148,136,.3)}
.fp-add.fp-add-remove:hover{background:var(--teal,#0D9488);box-shadow:0 16px 34px rgba(13,148,136,.4)}
.fp-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:none;
background:rgba(255,255,255,.9);color:var(--ink);cursor:pointer;display:flex;align-items:center;
justify-content:center;z-index:4;transition:.2s;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.fp-close:hover{background:#fff;color:var(--pink);transform:rotate(90deg)}
/* "Customize Bouquet" button on bouquet product pages — it's a direct
child of the 2-column .sp-actions-grid with no grid-column of its own,
so it was only ever filling one cell (auto-placed into column 1) and
leaving the second column empty instead of spanning the full box like
.btn-ar-view does. */
.btn-customize.sp-action-btn{grid-column:1 / -1;background:linear-gradient(135deg,var(--teal),#0A7D72);color:#fff;
border:none;box-shadow:0 6px 18px rgba(13,148,136,.3);text-decoration:none;
display:flex;align-items:center;justify-content:center;gap:9px}
.btn-customize.sp-action-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(13,148,136,.42);
background:linear-gradient(135deg,var(--teal),#0A7D72);color:#fff}
/* bouquet composition shown on the cart line */
.ak-bq-count{display:block;font-size:.72rem;font-weight:600;color:var(--muted);margin-top:2px}
body.theme-dark .flower-btn,body.theme-dark .fp-card{background:#211A38;border-color:rgba(124,58,237,.3)}
body.theme-dark .fp-name,body.theme-dark .flower-btn .fname{color:var(--ink)}
/* ══════════════════════════════════════════
Hero — hero-bg-2.png is the background: a decorative pink/lavender frame
with the AakaarKala mandala logo already drawn into its own centre, and
two white portrait "photo frame" openings (one left, one right) built
into the art for the craft-process videos. Video overlays are
positioned by percentage to land exactly inside those two openings —
x/y/w/h values in front-page.php were measured directly off the image.
aspect-ratio on the stage locks it to the art's own 1672:941 proportions
so that alignment holds at every viewport width instead of the frames
drifting off the drawn openings the way plain percentage width+height
would as the box's own proportions changed.
══════════════════════════════════════════ */
/* This used to cancel .ak-main's padding-top locally (nav renders
position:sticky so it already reserves its own space in flow; that
padding-top was compensating for a *fixed* nav and was pure redundant
space). .ak-main's padding-top no longer double-counts nav height at
all (fixed at the source), so this section needs none of that
cancellation any more — keeping it would pull the hero back up
underneath the nav. */
.hero-image-hero{min-height:0;display:block;overflow:visible;padding-top:0;
padding-bottom:clamp(.8rem,2vw,1.5rem);padding-left:clamp(.8rem,3vw,2rem);padding-right:clamp(.8rem,3vw,2rem)}
/* body:not(.theme-dark) .hero{background:...radial-gradient...} (line ~1285)
outranks a plain .hero-image-hero selector on specificity alone (two
class-level selectors vs one), so it was silently repainting over this —
match that specificity here instead of reaching for !important. */
body:not(.theme-dark) .hero-image-hero{background:#FDF1F3}
/* Full-bleed-width used to be the goal here, but a full-width landscape
image (1672:941) rendered that way is taller than the viewport on any
normal laptop/desktop window — the whole point of this banner (frames,
logo, "Our collection" starting point) ends up needing a scroll to even
see once, which defeats a hero. Sizing by WIDTH — capped to whichever is
tighter of 100% of the available box or the width that the leftover
viewport height converts to via the image's own ratio — then letting
aspect-ratio derive height from THAT real width is what actually keeps
the box's true proportions matching the source image's 1672:941 ratio.
The previous version computed its height straight off raw 100vw, which
silently drifted from the box's real (padding-narrowed) width — close
enough to not obviously break, but enough of a ratio mismatch that
object-fit:cover on the image inside was cropping a sliver off one
edge instead of showing the artwork intact. Driving everything off
width (a plain percentage, so it already accounts for this element's
actual parent width, padding included) sidesteps that entirely. */
.hero-image-stage{position:relative;margin:0 auto;
width:min(100%, calc((100vh - var(--tbh) - var(--nh) - 2rem) * 1672 / 941));
aspect-ratio:1672/941}
.hero-bg-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;
object-fit:cover;z-index:0;pointer-events:none}
/* The two video slots sit in the open pink margin either side of the
emblem (see $hero_frames in front-page.php) — the artwork itself has
no drawn cutout for them here, so the card needs its own visible edge
(a soft white ring + shadow) to read as a deliberately placed photo
card rather than a dark rectangle floating on the background. */
.hero-frame{position:absolute;border-radius:clamp(6px,1.6vw,18px);overflow:hidden;
z-index:2;background:#0c0c14;border:3px solid rgba(255,255,255,.85);
box-shadow:0 10px 28px rgba(120,20,60,.18),0 2px 8px rgba(120,20,60,.1);
transition:transform .3s var(--ease)}
.hero-frame:hover{transform:scale(1.015)}
/* The frame is a tall, narrow portrait rectangle but the embedded video
is a normal 16:9 landscape recording — YouTube's own player letterboxes
that mismatch by default (shrinks the video to fit width, leaving
visible black bars top and bottom) rather than cropping it, which is
what a "video peeking through a round/portrait window" treatment needs
instead. object-fit:cover makes the iframe itself crop like an case below,
just also supported on iframe in current browsers now. */
.hero-frame iframe{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;border:0;pointer-events:none}
/* Belt-and-braces for the handful of older browsers that don't support
object-fit on an iframe yet: oversize the iframe box itself to the
video's own 16:9 ratio at whatever size guarantees it's at least as
wide as this portrait frame, then crop the overflow the normal way
(.hero-frame already has overflow:hidden). Ignored entirely wherever
object-fit works, since that rule already wins there. */
@supports not (object-fit: cover) {
.hero-frame iframe{width:320%;height:100%;top:50%;left:50%;
transform:translate(-50%,-50%);inset:auto}
}
.hero-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* Real controls (mute/unmute, play/pause) instead of the old purely
decorative play icon — sit bottom-right inside the frame, small enough
not to fight the footage for attention but always reachable. Both
buttons need pointer-events re-enabled since .hero-frame's children
are otherwise click-through by default (the iframe itself has
pointer-events:none so drag/scroll gestures pass through to the page). */
.hero-video-controls{display:none}
.hero-video-btn{width:30px;height:30px;border-radius:50%;background:rgba(20,10,20,.55);
backdrop-filter:blur(4px);color:#fff;border:1.5px solid rgba(255,255,255,.35);
display:flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;
pointer-events:auto;transition:.2s;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.hero-video-btn:hover{background:rgba(20,10,20,.8);transform:scale(1.08)}
.hero-video-play i{padding-left:1px}
@media(max-width:900px){
.hero-video-btn{width:30px;height:30px;font-size:.68rem}
}
@media(max-width:640px){
.hero-image-hero{padding-left:.6rem;padding-right:.6rem}
}
/* The quote sits in the plain strip below the two video frames (frames
measured off hero-bg-2.png bottom out at 90.97% of the stage height —
see $hero_frames in front-page.php). Anchored by its own TOP edge
(rather than centred, which pulled its top back up over the frames'
bottom edge by however tall the box happened to render) so it always
starts clear of them — free to bleed past the art's own bottom edge
onto .hero-image-hero's matching pink background below, which never
reads as a visible seam. */
.hero-image-stage .hero-cats-row{position:absolute;left:50%;top:92%;
transform:translateX(-50%);z-index:10;width:min(90%,720px);margin:0}
@media(max-width:640px){
.hero-image-stage .hero-cats-row{width:min(92%,420px)}
}
/* Art quote filling the same tuned trough the category chips used to sit
in — quiet, on-brand, no click targets competing with the nav search. */
.hero-quote{background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:20px;
padding:1.1rem 1.6rem;box-shadow:0 4px 18px rgba(20,10,40,.16);text-align:center;margin:0}
.hero-quote p{font-family:'Georgia Pro',Georgia,'Times New Roman',serif;font-style:italic;
font-weight:700;font-size:clamp(.85rem,2.2vw,1.05rem);color:var(--ink);line-height:1.4;margin-bottom:.3rem}
.hero-quote cite{font-style:normal;font-size:.72rem;font-weight:700;color:var(--pink);letter-spacing:.3px}
@media(max-width:480px){.hero-quote{padding:.85rem 1.1rem}}
@media(max-width:640px){
/* One tight line, no attribution — the 2-line quote + cite blockquote
was eating a big vertical bite out of the already-cramped strip below
the video circles; single line keeps it a light accent, not a block. */
.hero-image-stage .hero-quote{padding:.32rem .6rem;border-radius:999px}
.hero-image-stage .hero-quote p{font-size:.58rem;line-height:1;margin-bottom:0;white-space:nowrap}
.hero-image-stage .hero-quote cite{display:none}
}
/* ══════════════════════════════════════════════════════
Colourful product-page action buttons — each CTA gets its own
vivid gradient identity (was: solid black Add to cart, plain
outlined B2B/AR buttons) so the row reads as attractive and
distinct rather than one repeated flat treatment.
Prefixed with body:not(.theme-dark) to match (and beat, being
later in the file) existing rules at that same specificity —
plain .btn-x.sp-action-btn was silently losing to them. */
body:not(.theme-dark) .btn-pd-main.sp-action-btn{background:var(--thread);background-size:220% 220%;color:#fff;border:none;
box-shadow:0 10px 26px -8px rgba(232,23,93,.55);transition:background-position .5s,transform .25s var(--ease),box-shadow .25s var(--ease)}
body:not(.theme-dark) .btn-pd-main.sp-action-btn:hover{background-position:100% 50%;transform:translateY(-3px) scale(1.015);
box-shadow:0 14px 32px -6px rgba(232,23,93,.6)}
/* Explicit hex, not var(--gold) — that variable was redefined elsewhere in
this file to equal var(--saffron), which is also Add to Cart's tone,
defeating the point of giving Buy Now its own distinct colour. */
body:not(.theme-dark) .btn-buy-now.sp-action-btn{background:linear-gradient(90deg,#D9A518,#B8860B);color:#fff;border:none;
box-shadow:0 10px 26px -8px rgba(184,134,11,.5)}
body:not(.theme-dark) .btn-buy-now.sp-action-btn:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 14px 32px -6px rgba(184,134,11,.55)}
body:not(.theme-dark) .sp-actions-grid .btn-b2b-quote{background:linear-gradient(100deg,var(--royal),#1B2F96);color:#fff;
border:none;box-shadow:0 10px 24px -8px rgba(39,69,201,.5)}
body:not(.theme-dark) .sp-actions-grid .btn-b2b-quote:hover{transform:translateY(-3px);box-shadow:0 14px 30px -6px rgba(39,69,201,.55);
background:linear-gradient(100deg,var(--royal),#1B2F96);color:#fff}
/* .btn-ar-view's colour comes from the !important "FINAL OVERRIDE" block
further up (search for "See It In Your Space") — kept in sync there
instead of duplicated here, since that block wins regardless. */
/* ══════════════════════════════════════════════════════
IN-STORE PARTNERS — area filter + partner card grid
══════════════════════════════════════════════════════ */
/* Sticky so the area filter stays reachable while scrolling through a
long list of partners, on both desktop and mobile — the whole point of
asking "which area" is to let a shopper narrow the list without
scrolling back to the top every time they change their mind. */
/* overflow:hidden here (previously just to keep the ::before gradient
strip's square corners from poking past the card's own rounded ones)
was clipping the dropdown options panel below to nothing — that panel
is a child of this element, positioned OUTSIDE its box (it opens below
the bar), and overflow:hidden clips ALL descendants to the box
regardless of their own position. Gave the strip its own matching
border-radius instead, so clipping isn't needed to keep it tidy. */
.partners-filter-bar{position:sticky;top:calc(var(--nh) + var(--tbh));z-index:20;
background:linear-gradient(165deg,#fff,rgba(232,23,93,.05) 55%,rgba(124,58,237,.06));
border:1.5px solid var(--line);border-radius:20px;
display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
padding:1.1rem 1.3rem;margin-bottom:1.8rem;box-shadow:0 10px 28px -14px rgba(20,10,40,.22);position:relative}
.partners-filter-bar::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
border-radius:20px 20px 0 0;background:var(--thread)}
.partners-filter-label{display:flex;align-items:center;gap:9px;font-family:'Georgia Pro',Georgia,serif;
font-weight:700;font-size:1.02rem;color:var(--ink);white-space:nowrap}
.partners-filter-label i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
border-radius:50%;background:var(--thread);color:#fff;font-size:.8rem;flex-shrink:0}
.partners-filter-select-wrap{position:relative;flex:1;min-width:0}
/* A real here used to let the browser/OS render its own dropdown
popup — on some mobile browsers that popup ignores this page's layout
entirely and can spill off the edge of the screen. This is a plain
button + an absolutely-positioned list this page fully controls, so it
can never render wider than its own trigger or escape the viewport. */
.partners-filter-select{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:12px 20px;border:1.5px solid var(--line);border-radius:50px;font-size:.9rem;font-weight:700;
color:var(--ink);background:#fff;cursor:pointer;transition:.2s;font-family:inherit;text-align:left}
.partners-filter-select span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.partners-filter-select:hover{border-color:var(--pink)}
.partners-filter-select:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(232,23,93,.14)}
.partners-filter-select[aria-expanded="true"] .partners-filter-caret{transform:rotate(180deg)}
.partners-filter-caret{color:var(--pink);font-size:.75rem;flex-shrink:0;transition:transform .2s}
.partners-filter-options{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:999;
max-height:min(320px,60vh);overflow-y:auto;background:#fff;border:1.5px solid var(--line);
border-radius:16px;box-shadow:0 16px 40px -12px rgba(20,10,40,.28);padding:.4rem;list-style:none}
.partners-filter-option{padding:10px 14px;border-radius:10px;font-size:.88rem;font-weight:600;
color:var(--char);cursor:pointer;transition:.15s}
.partners-filter-option:hover{background:var(--pink-s,rgba(232,23,93,.08))}
.partners-filter-option.on{background:var(--thread);color:#fff;font-weight:700}
.partners-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media(max-width:980px){.partners-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.partners-grid{grid-template-columns:1fr}
.partners-filter-bar{flex-direction:column;align-items:stretch;padding:1rem}}
.partner-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;overflow:hidden;
box-shadow:0 6px 18px -10px rgba(20,10,25,.15);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.partner-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(20,10,25,.22)}
.partner-gallery{margin:0}
.partner-gallery .sp-carousel{border-radius:0}
/* object-fit:cover (the product-gallery default this markup normally
carries) crops whatever doesn't fit the fixed 16:10 frame — fine for
product photos shot consistently for that frame, but a partner's shop
photo can arrive in any shape, and shoppers need to see the whole
photo, not a cropped slice of a shopfront or a face cut in half.
contain fits the entire image inside the frame untouched (letterboxed
on the shorter axis rather than cropped) — the soft tinted backdrop
behind it means the letterbox bars read as an intentional mount, not
empty space. */
.partner-gallery .sp-img{object-fit:contain;background:linear-gradient(165deg,#fdf3f6,#f3eefc)}
.partner-info{padding:1.1rem 1.2rem 1.3rem}
.partner-name{font-family:'Georgia Pro',Georgia,serif;font-size:1.1rem;margin-bottom:.5rem;color:var(--ink)}
.partner-areas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.7rem}
.partner-area-badge{font-size:.68rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
padding:4px 10px;border-radius:50px;background:var(--pink-s,rgba(232,23,93,.1));color:var(--pink)}
.partner-line{display:flex;align-items:flex-start;gap:9px;font-size:.86rem;color:var(--muted);margin-bottom:.45rem;line-height:1.5}
.partner-line i{color:var(--pink);margin-top:.2rem;flex-shrink:0;width:14px;text-align:center}
.partner-line a{color:var(--ink);font-weight:600}
.partner-line a:hover{color:var(--pink)}
.partner-info .ak-map-directions{margin-top:.6rem;padding:9px 16px;font-size:.82rem}
.partners-empty-note{text-align:center;color:var(--muted);padding:2.5rem 1rem;font-size:.92rem}
.partners-empty-note i{color:var(--pink);margin-right:6px}
.sp-actions-grid .btn-b2b-quote i{color:#fff}