:root{
  color-scheme:light;
  --bg:#FAF8F4;--ink:#2B2525;--muted:#716666;--red:#C8423B;--brand:#C8423B;--brand-hover:#A9332F;--orange:#B73532;--purple:#8F3430;--lime:#FCEAE8;--mint:#F4DAD8;--sun:#C8423B;--card:#fff;--line:#EEE9DF;--site-button-radius:99px;--site-button-text:#fff;
  --sans:"Bricolage Grotesque","Anek Bangla",system-ui,sans-serif;--serif:"DM Serif Display","Anek Bangla",Georgia,serif;--bn:"Anek Bangla","Bricolage Grotesque",sans-serif;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="dark"]{--bg:#1C1717;--ink:#FAF7F5;--muted:#C6B7B5;--card:#282020;--line:#463331;--red:#EF7770;--brand:#EF7770;--brand-hover:#F58D87;--orange:#F07870;--purple:#5C302E;--lime:#3A2423;--mint:#462B29;--sun:#F07870;}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.bn{font-family:var(--bn)}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}

/* announcement */
.ann{background:var(--brand);color:#FFFFFF;font-weight:800;font-size:.8rem;text-align:center;padding:8px 12px;letter-spacing:.01em}
/* nav */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid var(--line)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:70px}
.nav nav{display:flex;gap:26px;font-weight:800;font-size:.82rem;color:var(--red)}
.nav nav.r{justify-content:flex-end;align-items:center}
.logo,.footer-logo-link{display:inline-flex;align-items:center;text-decoration:none}.logo-img{height:60px;width:auto;max-width:220px;object-fit:contain;display:block}.footer-logo{height:60px;width:auto;max-width:220px;object-fit:contain;display:block;margin-bottom:12px}
.ico{display:inline-flex;gap:14px;align-items:center}
.ico button{background:none;border:0;color:var(--red);cursor:pointer;padding:4px;position:relative}
.ico a{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--red);cursor:pointer;padding:4px;position:relative}
.ico a svg{display:block}
.cnt{position:absolute;top:-4px;right:-6px;background:#B73532;color:#fff;border-radius:99px;font-size:.62rem;font-weight:800;min-width:16px;height:16px;display:grid;place-items:center}
/* hamburger */
.hbtn{display:none;background:none;border:0;cursor:pointer;padding:6px;color:var(--red)}
.hbtn span{display:block;width:22px;height:2.5px;background:currentColor;border-radius:2px;transition:transform .3s,opacity .2s}
.hbtn span+span{margin-top:5px}
.hbtn.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hbtn.open span:nth-child(2){opacity:0}
.hbtn.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* mobile menu drawer */
.mob-menu{position:fixed;top:0;left:0;width:min(320px,85vw);height:100%;background:var(--bg);z-index:50;transform:translateX(-105%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:6px 0 30px rgba(0,0,0,.15);padding:24px 20px 28px;overflow-y:auto}
.mob-menu.on{transform:none}
.mob-menu-overlay{position:fixed;inset:0;background:rgba(30,30,20,.45);z-index:49;opacity:0;pointer-events:none;transition:opacity .3s}
.mob-menu-overlay.on{opacity:1;pointer-events:auto}
.mob-menu .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.mob-menu .mx{display:grid;place-items:center;width:38px;height:38px;background:var(--red);border:0;border-radius:100%;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--site-button-text,#fff);padding:0}
.mob-menu a{display:block;padding:12px 0;font-weight:800;font-size:1rem;color:var(--red);border-bottom:1px solid var(--line);transition:padding .2s}
.mob-menu a:hover,.mob-menu a:active{padding-left:8px;color:var(--orange)}
@media(max-width:820px){.nav{position:relative;display:flex;align-items:center;justify-content:space-between;height:66px}.nav nav.nav-l{display:none}.nav nav.r{display:flex;align-items:center;margin-left:auto;position:relative;z-index:2}.nav nav.r>a{display:none}.nav nav.r .ico>#sbtn,.nav nav.r .ico>a[aria-label="Search"]{display:none}.nav nav.r .ico>#acct svg,.nav nav.r .ico>#cartbtn svg{width:25px;height:25px}.nav nav.r .ico>#acct,.nav nav.r .ico>#cartbtn{padding:5px}.hbtn{display:flex;flex-direction:column;position:relative;z-index:2}.nav .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;margin:0;display:flex;align-items:center;justify-content:center}.logo-img{height:44px;max-width:160px}.ico{margin-left:0;gap:12px}}


/* category circles */
.circles{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;padding:22px 0 6px}
.circ{text-align:center;font-size:.72rem;font-weight:800;line-height:1.2}
.circ small{display:block;font-weight:500;color:var(--muted)}
.circ i{display:block;width:62px;height:62px;border-radius:50%;border:2px solid var(--red);margin:0 auto 6px;overflow:hidden}
.circ svg{width:100%;height:100%}

/* hero */
.hero{
  text-align:center;
  padding:50px 24px 44px;
  position:relative;
  margin:10px 0 20px;
  border-radius:26px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(200,66,59,.13) 0%, transparent 75%),
    radial-gradient(circle at 10% 90%, rgba(200,66,59,.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(255,255,255,.9) 0%, transparent 52%),
    linear-gradient(120deg, #FFFFFF 0%, #FFF8F7 48%, #FCEAE8 100%);
  border:1px solid rgba(200,66,59,.12);
  box-shadow:0 12px 36px -16px rgba(169,51,47,.12);
  overflow:hidden;
}
.hero.has-background .hero-title,.hero.has-background .hero-rotator,.hero.has-background .hero-desc{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero.has-background .hero-lead{-webkit-text-fill-color:#fff;background:none}
.hero.has-background .pill{color:#fff;border-color:#fff}
:root[data-theme="dark"] .hero{
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(200,66,59,.2) 0%, transparent 75%),
    radial-gradient(circle at 10% 90%, rgba(200,66,59,.12) 0%, transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(255,255,255,.06) 0%, transparent 52%),
    linear-gradient(120deg, #292020 0%, #241B1B 52%, #201919 100%);
  border-color:rgba(255,255,255,.07);
  box-shadow:0 12px 36px -16px rgba(0,0,0,.4);
}
.hero-title, .hero h1{margin:0;font-size:clamp(2.1rem,6.2vw,4.8rem);line-height:1.05;letter-spacing:-.045em;font-weight:800;color:var(--red)}
.hero-lead{display:block;background:linear-gradient(110deg,#A9332F 0%,#E46B63 25%,#C8423B 50%,#A9332F 75%,#E46B63 100%);background-size:250% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:heroShimmer 8s linear infinite}
@keyframes heroShimmer{0%{background-position:0% 50%}100%{background-position:250% 50%}}
.hero-rotator-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-style:normal;
  font-weight:400;
  letter-spacing:-.02em;
  font-size:.88em;
  margin-top:.14em;
  height:1.25em;
  overflow:hidden;
}
.hero-rotator{
  display:inline-block;
  color:var(--ink);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,1,.3,1);
  transform:translateY(0);
  opacity:1;
  white-space:nowrap;
  will-change:transform,opacity;
}
.hero-rotator.fade-out{
  opacity:0;
  transform:translateY(-18px);
}
.hero-rotator.fade-in{
  opacity:1;
  transform:translateY(0);
  animation:rotSlideIn .38s cubic-bezier(.16,1,.3,1);
}
@keyframes rotSlideIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
.hero-desc, .hero p{margin:16px 0 22px;color:var(--muted);font-size:1.05rem;font-weight:500}

.pill{display:inline-block;border:2px solid var(--red);color:var(--red);padding:9px 28px;border-radius:var(--site-button-radius,99px);font-weight:800;font-size:.9rem;background:transparent;cursor:pointer;font-family:inherit;transition:all .2s ease}
.pill:hover{background:var(--red);color:var(--site-button-text,#fff)}
.pill.solid{background:var(--red);color:var(--site-button-text,#fff)}.pill.solid:hover{background:var(--brand-hover);color:var(--site-button-text,#fff)}
.pill.lime{background:var(--lime);border-color:var(--lime);color:var(--purple)}

/* mosaic */
.mosaic{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:230px 230px;gap:10px}
.tile{border-radius:22px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:18px;transition:transform .3s ease,box-shadow .3s ease}
.tile:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.18)}
.tile svg.bgart{position:absolute;inset:0;width:100%;height:100%}
.tile h3{position:relative;margin:0;font-size:1.35rem;font-weight:800;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.tile.a{grid-row:span 2;background:linear-gradient(145deg,#8F2926 0%,#C8423B 50%,#E46B63 100%)}
.tile.b{background:linear-gradient(145deg,#B73532 0%,#EF7770 100%)}
.tile.c{background:linear-gradient(145deg,#C8423B 0%,#E46B63 50%,#F4A39D 100%)}
.art{position:absolute;inset:0;display:grid;place-items:center;padding:14px 14px 56px}.art svg{width:min(70%,260px);height:auto}.split .r{position:relative}
.tile.best{grid-column:2/4;background:linear-gradient(135deg,#FFFFFF 0%,#FFF8F7 40%,#FCEAE8 100%);justify-content:center;align-items:center;flex-direction:column;text-align:center;color:#2B2525;position:relative;overflow:hidden}
.tile.best::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(200,66,59,.12) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(200,66,59,.08) 0%,transparent 50%);pointer-events:none}
.tile.best h3{font-size:clamp(2.2rem,5vw,3.6rem);color:#C8423B;text-shadow:none;letter-spacing:-.04em;line-height:.95;background:linear-gradient(135deg,#A9332F,#E46B63,#C8423B);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tile.best p{margin:6px 0 0;position:relative;font-weight:600;color:#716666}
@media(max-width:760px){.mosaic{grid-template-columns:1fr 1fr;grid-template-rows:200px 150px 190px}.tile.a{grid-row:auto;grid-column:1/3}.tile.best{grid-column:1/3}}

/* section heads */
.sec{padding:64px 0 10px}
.head{text-align:center;margin-bottom:28px}
.head h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,3.2rem);color:var(--red);letter-spacing:-.01em}
.head p{margin:4px 0 14px;color:var(--muted)}
.sec-more{text-align:center;margin-top:28px}

/* products */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--card);border-radius:16px;padding:12px 12px 14px;text-align:center;position:relative;border:1px solid var(--line)}
.card .sale{position:absolute;left:10px;top:10px;background:#B73532;color:#fff;font-size:.62rem;font-weight:800;padding:3px 8px;border-radius:99px;z-index:2}
.card .img{aspect-ratio:1/1;border-radius:12px;overflow:hidden;position:relative;background:#FFF8F7;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.prod-card-photo{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;display:block}
.card:hover .prod-card-photo{transform:scale(1.05)}
.multi-photos-badge{position:absolute;bottom:7px;right:7px;background:rgba(35,39,27,.78);backdrop-filter:blur(4px);color:#fff;font-size:.64rem;font-weight:700;padding:2px 7px;border-radius:99px;display:inline-flex;align-items:center;gap:4px;pointer-events:none}
.card h4{margin:0 0 4px;font-size:.84rem;font-weight:500;min-height:2.4em}
.price{font-weight:800;color:var(--red);font-size:.95rem}.price s{color:var(--muted);font-weight:500;font-size:.78rem;margin-left:6px}
.add{margin-top:10px;width:100%;background:var(--red);color:#fff;border:0;border-radius:8px;padding:9px;font:800 .78rem var(--sans);cursor:pointer}
.add:hover{background:#A9332F}.add.ok{background:#B73532}

/* ribbon */
.ribbon{margin-top:64px;background:linear-gradient(90deg,#FCEAE8,#FFF8F7);overflow:hidden;white-space:nowrap;padding:14px 0;color:#C8423B;font-weight:800;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ribbon div{display:inline-block;animation:slide 28s linear infinite}
.ribbon span{margin:0 18px}.ribbon b{color:#B73532}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ribbon div{animation:none}}

/* why */
.why{background:linear-gradient(135deg,#FCEAE8,#FFF8F7);padding:56px 0;text-align:center;color:#C8423B;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why h2{margin:0 0 30px;font-size:clamp(2rem,4.5vw,3rem);font-weight:800;letter-spacing:-.04em}
.why .row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:880px;margin:0 auto}
.why .row div{font-weight:800}.why .row small{display:block;font-weight:500;opacity:.8}
.dot{width:46px;height:46px;border-radius:50%;background:#C8423B;color:#FCEAE8;display:grid;place-items:center;margin:0 auto 10px}
@media(max-width:640px){.why .row{grid-template-columns:1fr}}

/* category list */
.cats{max-width:760px;margin:0 auto}
.cats a{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:6px 0;font-weight:800;font-size:clamp(1.8rem,5vw,3rem);letter-spacing:-.04em;color:var(--red)}
.cats a:hover{padding-left:12px;transition:padding .2s}

/* Product feature panels */
.feature-panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);align-items:center;padding:clamp(32px,5vw,64px) max(20px,calc((100vw - 1200px)/2));background:#C8423B;color:#fff}
.feature-panel[hidden]{display:none}
.feature-panel.reverse{grid-template-columns:1fr 1fr;background:#FCEAE8;color:#8F3430}
.feature-image{min-width:0;overflow:hidden;border-radius:24px}
.feature-panel.reverse .feature-image{grid-column:2;grid-row:1}
.feature-image img{display:block;width:100%;height:auto;object-fit:contain;border-radius:inherit}
.feature-copy{max-width:560px;padding:20px 36px;text-align:left}
.feature-panel.reverse .feature-copy{grid-column:1;grid-row:1;justify-self:end;text-align:left}
.feature-eyebrow{display:block;margin-bottom:12px;font-size:.72rem;font-weight:800;letter-spacing:.18em;opacity:.75}
.feature-copy h2{margin:0 0 18px;font-size:clamp(2.2rem,5vw,4rem);line-height:1;letter-spacing:-.045em;font-weight:800}
.feature-copy p{margin:0 0 24px;max-width:46ch;font-size:1rem;line-height:1.7;opacity:.88}
.pill.lime{background:#fff;border-color:#fff;color:#A9332F;font-weight:800;transition:all .2s ease}
.pill.lime:hover{background:#FCEAE8;border-color:#FCEAE8;color:#8F3430;transform:translateY(-2px)}
.feature-panel.reverse .pill.lime{background:#C8423B;border-color:#C8423B;color:#fff}
.feature-panel.reverse .pill.lime:hover{background:#A9332F;border-color:#A9332F}
@media(max-width:760px){
  .feature-panel,.feature-panel.reverse{grid-template-columns:1fr;gap:18px;padding:24px 20px 32px}
  .feature-panel.reverse .feature-image,.feature-panel.reverse .feature-copy{grid-column:auto;grid-row:auto}
  .feature-image{border-radius:18px}
  .feature-copy,.feature-panel.reverse .feature-copy{justify-self:stretch;text-align:left;padding:10px 4px}
}

/* modern footer */
footer{background:#C8423B;color:#F3EBDD;border-top:1px solid #A9332F;padding:56px 0 32px;margin-top:0}
footer .cols{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:36px;align-items:start}
footer .logo{color:#fff;display:inline-block;margin-bottom:12px}
footer .footer-logo{height:70px;width:auto;display:block}
footer h5{margin:0 0 16px;font-size:.95rem;font-weight:800;color:#F3EBDD;letter-spacing:.02em;text-transform:uppercase}
footer a{display:block;font-size:.85rem;margin:8px 0;color:#F3EBDD;transition:all .2s ease}
footer a:hover{color:#FFFFFF;transform:translateX(4px)}
footer p{font-size:.85rem;max-width:36ch;margin:0 0 18px;color:#F3EBDD;line-height:1.6}
.f-social{display:flex;gap:10px;margin-top:14px}
.f-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#F4DAD8;margin:0;transition:all .25s ease}
.f-social a:hover{background:#FFFFFF;color:#2B2525;transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.3)}

.f-bottom{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:center;align-items:center;text-align:center}
.copy{font-size:.78rem;color:#F3EBDD;margin:0}
.info-wrap{max-width:850px;margin:0 auto;padding:36px 20px 72px}
.info-heading{margin-bottom:26px}
.info-heading h2{color:var(--red);font:400 clamp(1.7rem,4vw,2.3rem) var(--serif);margin:0 0 8px}
.info-heading p{color:var(--muted);margin:0;line-height:1.7}
.info-content{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,4vw,30px)}
.info-content h2{color:var(--ink);font-size:1.16rem;margin:26px 0 8px}
.info-content h2:first-child{margin-top:0}
.info-content p,.info-content li{color:var(--muted);line-height:1.8}
.info-content ul,.info-content ol{padding-left:24px}
.info-content li+li{margin-top:7px}
.info-content a,.info-contact{color:var(--red);font-weight:800;text-decoration:none}
.info-content a:hover,.info-contact:hover{text-decoration:underline}
.info-callout{border-left:3px solid var(--red);background:rgba(177,52,48,.06);padding:12px 16px;border-radius:0 10px 10px 0}
.info-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.info-link-card{border:1px solid var(--line);border-radius:14px;padding:16px;color:var(--ink)!important;text-decoration:none!important}
.info-link-card strong{display:block;color:var(--red);margin-bottom:4px}
.info-link-card span{display:block;color:var(--muted);font-weight:400;line-height:1.55;font-size:.9rem}
.info-back{display:inline-block;margin-top:24px;color:var(--red);font-weight:800;text-decoration:none}
.info-back:hover{text-decoration:underline}
@media(max-width:760px){
  footer .cols{grid-template-columns:1fr 1fr;gap:28px}
  .f-bottom{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(max-width:480px){
  footer .cols{grid-template-columns:1fr}
  footer .footer-logo{height:60px}
  .info-link-grid{grid-template-columns:1fr}
}

.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:22px}
.tools input[type="search"]{font:800 .78rem var(--sans);padding:8px 18px;border:1.5px solid var(--red);border-radius:99px;background:transparent;color:var(--ink);min-width:160px;outline:none;transition:all .25s ease}
.tools input[type="search"]::placeholder{color:var(--muted);font-weight:600}
.tools input[type="search"]:focus{background:var(--red);color:#fff;box-shadow:0 4px 16px rgba(49,53,39,.15)}
.tools input[type="search"]:focus::placeholder{color:rgba(255,255,255,.6)}
.tools select{font:800 .78rem var(--sans);padding:8px 32px 8px 18px;border:1.5px solid var(--red);border-radius:99px;background:transparent;color:var(--red);cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23313527' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;transition:all .25s ease}
.tools select:hover,.tools select:focus{background-color:var(--red);color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.f input,.f select,.f textarea{font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
#chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1.5px solid var(--red);color:var(--red);background:transparent;border-radius:99px;padding:6px 14px;font:800 .78rem var(--sans);cursor:pointer;transition:all .2s ease}.chip:hover{background:var(--red);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(49,53,39,.12)}.chip.on{background:var(--red);color:#fff}
@media(max-width:760px){
.tools{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:10px;align-items:center}
.tools input[type="search"]{width:100%;min-width:unset;padding:10px 18px;font-size:.82rem;grid-column:1;grid-row:1}
.tools select{padding:10px 32px 10px 18px;font-size:.82rem;background-position:right 14px center;grid-column:2;grid-row:1}
#chips{grid-column:1/-1;grid-row:2;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0;justify-content:flex-start;gap:8px}
#chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:8px 16px;font-size:.8rem}
}
.card{cursor:pointer;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(49,53,39,.12)}
.ov{position:fixed;inset:0;background:rgba(30,10,15,.55);z-index:70;display:none;align-items:center;justify-content:center;padding:16px}.ov.on{display:flex}
.box{background:var(--bg);border-radius:20px;max-width:760px;width:100%;max-height:90vh;overflow:auto;padding:22px;position:relative}
.x{position:absolute;right:14px;top:8px;background:none;border:0;font-size:1.8rem;cursor:pointer;color:var(--ink)}
.pd{display:grid;grid-template-columns:1fr 1fr;gap:22px}@media(max-width:640px){.pd{grid-template-columns:1fr}}
.pd .img{border-radius:16px;background:transparent;position:relative;display:flex;flex-direction:column}
.pd-main-wrap{width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#FFF8F7;position:relative;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.pd-main-img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}
.pd-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.pd-thumb-btn{width:56px;height:56px;border-radius:10px;border:2px solid var(--line);overflow:hidden;padding:0;background:#fff;cursor:pointer;flex-shrink:0;transition:all .15s}
.pd-thumb-btn.on{border-color:var(--red);box-shadow:0 0 0 2px rgba(209,20,44,.2)}
.pd-thumb-btn img{width:100%;height:100%;object-fit:cover;display:block}
.sw{display:flex;gap:8px}.sw button{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);cursor:pointer}.sw button.on{outline:3px solid var(--red);outline-offset:2px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:99px;margin-top:4px}.qty button{background:none;border:0;width:32px;height:32px;font-size:1.1rem;cursor:pointer;color:var(--ink)}.qty span{min-width:24px;text-align:center;font-weight:800}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(400px,100%);background:var(--bg);z-index:60;transform:translateX(105%);transition:transform .25s;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.2);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}.drawer.on{transform:none}
.drawer .x{display:grid;place-items:center;width:38px;height:38px;background:var(--red);border:0;border-radius:100%;font-size:1.5rem;line-height:1;color:var(--site-button-text,#fff);padding:0}
.li{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);font-size:.85rem}
.li .t{width:56px;height:56px;border-radius:10px;overflow:hidden;background:#FFF8F7;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.li-actions{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.cart-remove{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--red);cursor:pointer;transition:background .15s}
.cart-remove:hover,.cart-remove:focus-visible{background:rgba(209,20,44,.1);outline:none}
.cart-remove svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cart-thumb-img{width:100%;height:100%;object-fit:cover;display:block}
.f{display:grid;gap:10px}.f label{font-weight:800;font-size:.82rem}.f input,.f select,.f textarea{width:100%}
.tot{display:flex;justify-content:space-between;font-size:.9rem;margin:4px 0}.tot.g{font-weight:800;font-size:1.1rem;color:var(--red)}
.err{color:var(--red);font-size:.82rem;font-weight:800;margin:6px 0}
.add{transition:background .2s,transform .1s}
.add:hover{transform:scale(1.02)}
.add:active{transform:scale(.97)}
.add:disabled{opacity:.4;cursor:not-allowed;transform:none}
@media(prefers-reduced-motion:reduce){.drawer{transition:none}.mob-menu{transition:none}.card{transition:none}.add{transition:none}}
@media(max-width:480px){.hero{padding:34px 14px 28px;border-radius:20px}.hero-title, .hero h1{font-size:clamp(1.75rem,7vw,2.3rem);line-height:1.1}.hero-rotator-wrap{font-size:.82em;height:1.2em}.hero-desc, .hero p{font-size:.9rem;margin:12px 0 18px}.mosaic{gap:8px}.grid{grid-template-columns:repeat(2,1fr);gap:10px}.card{padding:10px 10px 12px}.card h4{font-size:.78rem}.price{font-size:.85rem}.add{padding:8px;font-size:.72rem}.card .add{border-radius:999px}.logo-img{height:38px;max-width:135px}.ico{gap:6px}.ico button{padding:3px}}

/* ========================================================
   Toast Notification System
   ======================================================== */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 18px;box-shadow:0 8px 32px rgba(0,0,0,.15);font-size:.88rem;font-weight:600;color:var(--ink);animation:toastIn .35s cubic-bezier(.22,1,.36,1),toastOut .3s ease .8s forwards;max-width:340px;backdrop-filter:blur(12px)}
.toast .toast-icon{font-size:1.2rem;flex-shrink:0}
.toast.success{border-left:3px solid #2dd4a8}
.toast.wishlist{border-left:3px solid #EF7770}
.toast.info{border-left:3px solid #4ea8f0}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.95)}}
@media(max-width:480px){.toast-container{bottom:16px;right:12px;left:12px}.toast{max-width:100%}}

/* ========================================================
   Wishlist Heart Button
   ======================================================== */
.card .wish{position:absolute;right:10px;top:10px;background:rgba(255,255,255,.85);border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;display:grid;place-items:center;z-index:2;transition:transform .2s,background .2s;backdrop-filter:blur(4px)}
.card .wish:hover{transform:scale(1.15);background:rgba(255,255,255,.95)}
.card .wish svg{width:18px;height:18px;transition:fill .2s,stroke .2s}
.card .wish.on svg{fill:#A9332F;stroke:#A9332F}
.card .wish:not(.on) svg{fill:none;stroke:#666}
.card .wish.pop{animation:heartPop .4s ease}
@keyframes heartPop{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}


/* ========================================================
   Account Page Specific Styles
   ======================================================== */
.page-account .wrap { max-width: 1000px; margin: 0 auto; padding: 0 18px 60px; }
.page-account header { display: flex; justify-content: space-between; align-items: center; height: 70px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.page-account .back { font-weight: 800; font-size: .85rem; color: var(--red); }
.page-account .hero { background: #C8423B; color: #fff; border-radius: 24px; padding: 28px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-end; text-align: left; }
.page-account .hero-info { text-align: left; }
.page-account .hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; color: #F4DAD8; text-align: left; }
.page-account .hero p { margin: 6px 0 0; color: #E7AAA6; text-align: left; }
.page-account .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.page-account .pill { border: 2px solid #F4DAD8; color: #F4DAD8; background: transparent; border-radius: 99px; padding: 8px 18px; font: 800 .82rem var(--sans); cursor: pointer; }
.page-account .pill.fill { background: #F4DAD8; color: #C8423B; }
.page-account .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 16px 0; }
.page-account .stat { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.page-account .stat b { display: block; font-size: 1.7rem; letter-spacing: -.03em; color: var(--red); line-height: 1.1; }
.page-account .stat span { font-size: .8rem; color: var(--muted); }
.page-account .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.page-account .box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-bottom: 12px; }
.page-account h2 { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--red); }
.page-account .bar { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; font-size: .85rem; margin: 8px 0; }
.page-account .bar i { display: block; height: 12px; border-radius: 99px; background: var(--red); }
.page-account .bar:nth-child(2n) i { background: #B73532; }
.page-account .bar:nth-child(3n) i { background: #716666; }
.page-account .cols { display: flex; gap: 8px; align-items: flex-end; height: 130px; }
.page-account .cols div { flex: 1; text-align: center; font-size: .7rem; color: var(--muted); display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.page-account .cols i { display: block; background: var(--red); border-radius: 8px 8px 3px 3px; min-height: 4px; }
.page-account .cols em { font-style: normal; color: var(--ink); font-weight: 800; }
.page-account .steps { display: flex; list-style: none; padding: 0; margin: 12px 0 4px; }
.page-account .steps li { flex: 1; text-align: center; font-size: .72rem; color: var(--muted); position: relative; }
.page-account .steps li::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--line); margin: 0 auto 4px; position: relative; z-index: 1; }
.page-account .steps li::after { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 3px; background: var(--line); }
.page-account .steps li:first-child::after { display: none; }
.page-account .steps li.d::before, .page-account .steps li.d::after { background: var(--red); }
.page-account .steps li.d { color: var(--ink); font-weight: 800; }
.page-account .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.page-account .chip { border: 1.5px solid var(--red); color: var(--red); background: transparent; border-radius: 99px; padding: 5px 14px; font: 800 .78rem var(--sans); cursor: pointer; }
.page-account .chip.on { background: var(--red); color: #fff; }
.page-account details { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; background: var(--card); }
.page-account summary { cursor: pointer; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; list-style: none; font-weight: 800; }
.page-account summary::-webkit-details-marker { display: none; }
.page-account .tag { font-size: .72rem; font-weight: 800; border-radius: 99px; padding: 2px 10px; background: #FFF8F7; color: #2B1B1E; }
.page-account .tag.Delivered { background: #F4DAD8; color: #2B2525; }
.page-account .tag.Cancelled { background: #F4DAD8; }
.page-account .m { color: var(--muted); font-size: .85rem; }
.page-account .btn { background: var(--red); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; font: 800 .8rem var(--sans); cursor: pointer; margin-top: 8px; }
.page-account dialog { border: 0; border-radius: 18px; padding: 22px; max-width: 380px; width: 92%; background: var(--bg); color: var(--ink); }
.page-account dialog::backdrop { background: rgba(30, 10, 15, .55); }
.page-account dialog input { width: 100%; font: inherit; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); margin: 4px 0 10px; }
.page-account .err { color: #C0392B; font-weight: 800; font-size: .85rem; margin: 0 0 8px; }
@media(max-width:760px) {
  .page-account .stats { grid-template-columns: 1fr 1fr; }
  .page-account .two { grid-template-columns: 1fr; }
}
@media(max-width:480px) {
  .page-account .hero { padding: 20px; border-radius: 18px; }
  .page-account .hero h1 { font-size: 1.8rem; }
  .page-account .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .page-account .stat { padding: 12px; }
  .page-account .stat b { font-size: 1.3rem; }
  .page-account .btns { gap: 6px; }
  .page-account .pill { padding: 6px 14px; font-size: .75rem; }
  .page-account .box { padding: 14px; border-radius: 14px; }
  .page-account header .logo-img { height: 40px; }
}

/* ========================================================
   Admin Page Specific Styles
   ======================================================== */
.page-admin { margin: 0; font: 15px/1.5 system-ui, "Segoe UI", sans-serif; background: #FFFFFF; color: #2B2525; }
.page-admin header { background: #C8423B; color: #fff; padding: 12px 16px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; position: sticky; top: 0; height: auto; }
.page-admin header b { font-size: 1.1rem; letter-spacing: .06em; }
.page-admin main { max-width: 900px; margin: 0 auto; padding: 16px; }
.page-admin input, .page-admin select { font: inherit; padding: 8px 12px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); }
.page-admin button { font: inherit; padding: 8px 12px; border-radius: 8px; cursor: pointer; background: #C8423B; color: #fff; border: 1.5px solid #C8423B; font-weight: 700; transition: background .2s; }
.page-admin button:hover { background: #A9332F; }
.page-admin article { background: #fff; border: 1px solid #FCEAE8; border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.page-admin .top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.page-admin .m { color: #6b5a5c; font-size: .85rem; }
.page-admin .tag { font-weight: 700; border-radius: 99px; padding: 2px 10px; background: #FFF8F7; color: #C8423B; }
.page-admin a.l { color: #C8423B; font-weight: 700; margin-right: 12px; text-decoration: none; }
.page-admin a.l:hover { text-decoration: underline; }
.page-admin #login { max-width: 360px; margin: 60px auto; display: grid; gap: 10px; }
.page-admin .err { color: #C0392B; font-weight: 700; }