/* ==========================================================================
   NOVA MARKET — custom styles (Bootstrap 5 is the base layer)
   Palette: brand #5B3FA0 (single solid accent, no gradients)
            ink #1F1B2E · mist #F8F7FC
   Type: display "Sora"  ·  body "Inter"
   ========================================================================== */

:root{
  --violet:#5B3FA0;
  --violet-dark:#432E78;
  --coral:#5B3FA0;
  --amber:#5B3FA0;
  --teal:#5B3FA0;
  --ink:#1F1B2E;
  --mist:#F8F7FC;
  --muted:#736E82;
  --footer-bg:var(--ink);
  --gradient-main:var(--violet);
  --gradient-soft:rgba(91,63,160,0.09);
  --shadow-soft:0 10px 30px rgba(31,27,46,0.08);
  --shadow-lift:0 18px 40px rgba(91,63,160,0.20);
}

*{scroll-behavior:smooth;}
html{overflow-x:hidden;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--mist);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.display-font{
  font-family:'Sora',sans-serif;
}
.text-gradient{
  background:var(--gradient-main);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.btn-gradient{
  background:var(--gradient-main);
  border:none;
  color:#fff;
  font-weight:600;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-gradient:hover{
  color:#2f2c2c;
  transform:translateY(-2px);
  box-shadow:var(--shadow-lift);
  filter:brightness(1.06);
}
.btn-outline-ink{
  border:1.5px solid var(--ink);
  color:var(--ink);
  font-weight:600;
  background:transparent;
}
.btn-outline-ink:hover{
  background:var(--ink);
  color:#fff;
}
.rounded-4x{border-radius:1.25rem !important;}
.section-pad{padding:5.5rem 0;}
@media (max-width:767px){ .section-pad{padding:3.5rem 0;} }

.eyebrow{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--violet);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--coral);display:inline-block;border-radius:2px;}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  *{scroll-behavior:auto !important;}
}

/* ---------- navbar ---------- */
.navbar{
  backdrop-filter:blur(10px);
  background:rgba(248,247,252,0.9) !important;
  transition:box-shadow .25s ease, padding .25s ease;
  padding-top:.85rem;padding-bottom:.85rem;
}
.navbar.scrolled{box-shadow:0 6px 24px rgba(31,27,46,0.08);padding-top:.5rem;padding-bottom:.5rem;}
.navbar-brand{font-family:'Sora',sans-serif;font-weight:700;font-size:1.4rem;}
.navbar-brand .dot{color:var(--coral);}
.brand-logo{height:38px;width:auto;display:block;}
.nav-link{font-weight:600;color:var(--ink) !important;position:relative;margin:0 .35rem;}
.nav-link::after{
  content:"";position:absolute;left:.75rem;right:.75rem;bottom:0;height:2px;
  background:var(--gradient-main);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
.nav-link.active::after,.nav-link:hover::after{transform:scaleX(1);}
.nav-link.active{color:var(--violet) !important;}

.cart-btn{
  position:relative;
  width:44px;height:44px;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(31,27,46,0.08);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-soft);
  transition:transform .15s ease;
}
.cart-btn:hover{transform:translateY(-2px);}

/* ---------- Shop mega menu ---------- */
/* The panel itself: hidden by default on every breakpoint via opacity +
   visibility (not display:none) so the open/close transition can
   actually animate rather than snapping. */
.mega-menu-item{position:relative;}
.mega-menu{
  position:absolute;top:100%;left:50%;
  transform:translate(-50%,8px);
  width:min(760px,92vw);
  background:#fff;
  border-radius:1.25rem;
  box-shadow:var(--shadow-lift);
  border:1px solid rgba(31,27,46,0.06);
  padding:1.6rem;
  z-index:1050;
  opacity:0;visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.mega-menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.6rem;
}
/* Discovery Sets' menu has one flat row of tiles, not category columns —
   narrower panel, and each tile gets a bit more breathing room since
   there's no column heading above it competing for the space. */
.mega-menu-sm{width:min(560px,92vw);}
.mega-menu-grid-sm{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.mega-menu-cat-title{
  display:block;
  font-family:'Sora',sans-serif;font-weight:700;font-size:.92rem;
  color:var(--ink);text-decoration:none;
  margin-bottom:.7rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--gradient-soft);
}
.mega-menu-cat-title:hover{color:var(--violet);}
.mega-menu-products{display:flex;flex-direction:column;gap:.6rem;}
.mega-menu-product{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--ink);
  border-radius:.6rem;padding:.25rem;margin:0 -.25rem;
  transition:background .15s ease;
}
.mega-menu-product:hover{background:var(--mist);}
.mega-menu-product img{
  width:44px;height:44px;border-radius:.5rem;object-fit:cover;flex:0 0 auto;
  background:var(--mist);
}
.mega-menu-product-info{display:flex;flex-direction:column;min-width:0;}
.mega-menu-product-name{
  font-size:.8rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:16ch;
}
.mega-menu-product-price{font-size:.76rem;color:var(--muted);}
.mega-menu-view-all{
  display:inline-flex;align-items:center;
  font-size:.78rem;font-weight:700;color:var(--violet);
  text-decoration:none;margin-top:.8rem;
}
.mega-menu-view-all:hover{text-decoration:underline;}
.mega-menu-caret{
  background:none;border:none;color:var(--ink);
  padding:.25rem .4rem;line-height:1;
}

/* Desktop: matches navbar-expand-lg's own breakpoint exactly (991.98px)
   rather than a hover/pointer media feature — a large touch tablet in
   landscape can be wider than that and report a coarse pointer at the
   same time, which would otherwise disagree with the navbar's own
   choice about whether it's "desktop" enough to stay uncollapsed.
   Opens on hover of the whole nav item, or on keyboard focus of
   anything inside it; the caret button is hidden here since a real
   hover target exists instead. */
@media (min-width:992px){
  .mega-menu-caret{display:none !important;}
  .mega-menu-item:hover .mega-menu,
  .mega-menu-item:focus-within .mega-menu{
    opacity:1;visibility:visible;transform:translate(-50%,0);
  }
}

/* Mobile/tablet: no hover to rely on here — the caret button toggles a
   `.show` class via a few lines of JS instead, and the panel drops
   into the document flow under the nav item (inside the already-
   collapsing mobile nav) rather than floating, since there is no room
   to float it without overflowing the screen. */
@media (max-width:991.98px){
  .mega-menu{
    position:static;transform:none;width:100%;
    box-shadow:none;border:none;border-top:1px solid rgba(31,27,46,0.08);
    border-radius:0;margin-top:.5rem;padding:1rem 0 0;
    max-height:0;overflow:hidden;
    opacity:1;visibility:visible; /* only max-height animates the reveal here */
    transition:max-height .25s ease, padding .25s ease;
  }
  .mega-menu.show{max-height:2000px;padding-top:1rem;}
  .mega-menu-grid{grid-template-columns:1fr;gap:1.2rem;}
}

/* Mobile header: toggler left, logo centered, cart right — the collapsed
   nav-link panel drops to its own full-width row underneath when opened. */
@media (max-width:991.98px){
  .navbar-toggler{order:1;}
  .navbar-brand{order:2;margin-left:auto;margin-right:auto;}
  .navbar > .container > .cart-btn{order:3;}
  .navbar-collapse{order:4;flex-basis:100%;}
}
.cart-badge{
  position:absolute;top:-6px;right:-6px;
  background:var(--coral);color:#fff;
  font-size:.68rem;font-weight:700;
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--mist);
}
.cart-badge.bump{animation:bump .35s ease;}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:7.5rem 0 5rem;
  overflow:hidden;
}
.hero-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.55;
  z-index:0;
}
.blob-1{width:420px;height:420px;background:var(--violet);top:-160px;right:-120px;}
.blob-2{width:320px;height:320px;background:var(--amber);bottom:-140px;left:-100px;opacity:.4;}
.hero .container{position:relative;z-index:1;}
.hero h1{
  font-size:clamp(2.4rem,5vw,3.6rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
}
.hero p.lead{color:var(--muted);max-width:44ch;}
.hero-stats{display:flex;gap:2.2rem;margin-top:2.2rem;flex-wrap:wrap;}
.hero-stats .stat b{font-family:'Sora',sans-serif;font-size:1.5rem;display:block;}
.hero-stats .stat span{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}

.hero-visual{position:relative;min-height:420px;}
.hero-card{
  position:absolute;
  border-radius:1.5rem;
  overflow:hidden;
  box-shadow:var(--shadow-lift);
  background:#fff;
}
.hero-card img{width:100%;height:100%;object-fit:cover;}
.hero-card-main{width:64%;height:78%;top:0;right:0;}
.hero-card-sub{width:46%;height:46%;bottom:0;left:0;border:6px solid var(--mist);animation:float 5s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.hero-float-badge{
  position:absolute;
  background:#fff;
  border-radius:1rem;
  padding:.85rem 1.1rem;
  box-shadow:var(--shadow-soft);
  display:flex;align-items:center;gap:.7rem;
  font-size:.82rem;
  z-index:2;
}
.hero-float-badge .icon-wrap{
  width:38px;height:38px;border-radius:50%;
  background:var(--gradient-soft);
  display:flex;align-items:center;justify-content:center;
  color:var(--violet);
}
.badge-shipping{top:8%;left:2%;animation:float 6s ease-in-out infinite;}
.badge-rating{bottom:10%;right:6%;animation:float 5.5s ease-in-out infinite reverse;}

/* ---------- lookbook slider ---------- */
.perfume-slider{border-radius:1.5rem;overflow:hidden;box-shadow:var(--shadow-lift);}
.perfume-slider .carousel-item{height:440px;}
.perfume-slider .carousel-item img{width:100%;height:100%;object-fit:cover;}
.perfume-slider .carousel-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(15,12,26,.75) 0%, rgba(15,12,26,.15) 45%, rgba(15,12,26,0) 70%);
}
.perfume-slide-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:2.4rem 2.6rem;color:#fff;
}
.perfume-slide-caption .eyebrow-light{color:#fff;}
.perfume-slide-caption .eyebrow-light::before{background:#fff;}
.perfume-slide-caption h3{
  font-family:'Sora',sans-serif;font-weight:700;
  font-size:clamp(1.3rem,2.6vw,1.9rem);margin:.5rem 0 0;max-width:32ch;
}
@media (max-width:767px){ .perfume-slider .carousel-item{height:320px;} .perfume-slide-caption{padding:1.6rem 1.4rem;} }
.perfume-slider-arrow{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.35);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.1rem;transition:background .15s ease;
}
.carousel-control-prev,.carousel-control-next{width:auto;padding:0 1.2rem;opacity:1;}
.carousel-control-prev:hover .perfume-slider-arrow,.carousel-control-next:hover .perfume-slider-arrow{background:rgba(255,255,255,.32);}
.perfume-slider-dots{position:absolute;bottom:1.2rem;right:1.6rem;left:auto;margin:0;gap:.4rem;justify-content:flex-end;z-index:3;}
.perfume-slider-dots [data-bs-target]{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.5);border:none;
  opacity:1;transition:background .2s ease, width .2s ease;
}
.perfume-slider-dots [data-bs-target].active{background:#fff;width:22px;border-radius:4px;}

/* ---------- category chips ---------- */
.chip-scroll{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:none;}
.chip-scroll::-webkit-scrollbar{display:none;}
.cat-chip{
  flex:0 0 auto;
  border:1.5px solid rgba(31,27,46,0.1);
  background:#fff;
  padding:.55rem 1.1rem;
  border-radius:2rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--ink);
  transition:all .18s ease;
  white-space:nowrap;
}
.cat-chip:hover{border-color:var(--violet);}
.cat-chip.active{
  background:var(--gradient-main);
  color:#fff;
  border-color:transparent;
}

/* ---------- product slider (home "This month's picks" + discovery sets) ---------- */
.product-slider{
  display:flex;
  gap:1.5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:.5rem .25rem 1rem;
  margin:-.5rem -.25rem 0;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch; /* momentum scroll on iOS Safari */
  scroll-padding-left:.25rem; /* keeps a snapped card's left edge under the finger, not just its container */
}
.product-slider::-webkit-scrollbar{display:none;}
.product-slide{
  flex:0 0 auto;
  width:270px;
  scroll-snap-align:start;
  scroll-snap-stop:always; /* one card per swipe, never skips past one on a fast flick */
}

/* Two-row variant of the same slider. Grid rather than flex-wrap because
   wrapping in a horizontally scrolling track doesn't work — the track has
   no fixed height to wrap against. grid-auto-flow:column fills top to
   bottom then starts a new column, so one arrow click still moves exactly
   one column of two cards.

   Applied by initFeaturedGrid() only when there are enough products to
   fill both rows; with fewer it stays a single row rather than leaving a
   half-empty second one. */
.product-slider.is-two-row{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(2, 1fr);
  grid-auto-columns:270px;
  align-items:stretch;
}
.product-slider.is-two-row .product-slide{
  width:auto; /* the column track sets the width now */
}
@media (max-width:575.98px){
  /* Mobile: no horizontal slider — stack cards one full-width row after
     another instead (both the featured-products and discovery-sets
     strips share these classes, so this covers both at once). */
  .product-slider,
  .product-slider.is-two-row{
    display:block;
    overflow-x:visible;
    scroll-snap-type:none;
    padding:.5rem 0 0;
    margin:0;
  }
  .product-slide{
    width:100%;
    scroll-snap-align:none;
    margin-bottom:1.25rem;
  }
  .product-slide:last-child{margin-bottom:0;}
}
.slider-nav-btn{
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(31,27,46,0.12);
  background:#fff;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
@media (hover:hover) and (pointer:fine){
  .slider-nav-btn:hover{border-color:var(--violet);color:var(--violet);}
}
.slider-nav-btn:disabled{opacity:.35;cursor:default;}
.slider-nav-btn:disabled:hover{border-color:rgba(31,27,46,0.12);color:var(--ink);}

/* ---------- product cards ---------- */
.product-card{
  border:none;
  border-radius:1.25rem;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease;
  background:#fff;
  height:100%;
}
.product-media{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--mist);
}
.product-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
/* Scoped to devices that actually support hover — on touch screens,
   :hover fires on tap and then stays "stuck" until the visitor taps
   elsewhere, which reads as a UI glitch rather than an effect. */
@media (hover:hover) and (pointer:fine){
  .product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);}
  .product-card:hover .product-media img{transform:scale(1.08);}
}
.product-tag{
  position:absolute;top:.7rem;left:.7rem;
  background:#fff;
  color:var(--violet);
  font-size:.68rem;font-weight:700;
  padding:.3rem .6rem;
  border-radius:2rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.product-tag.sale{background:var(--coral);color:#fff;}
.product-tag.out{background:var(--ink);color:#fff;}
.wish-btn{
  position:absolute;top:.7rem;right:.7rem;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
  border:none;color:var(--ink);
  transition:color .15s ease, transform .15s ease;
}
@media (hover:hover) and (pointer:fine){
  .wish-btn:hover{color:var(--coral);transform:scale(1.08);}
}
.wish-btn.active{color:var(--coral);}
.rating-stars{color:var(--amber);font-size:.78rem;}

/* Card meta line + colour swatches — same accent-driven system as the
   rest of the card, so a store's palette carries through here too
   without a second set of per-business classes. */
.card-meta-line{font-size:.8rem;}
.color-swatches{display:flex;align-items:center;gap:.35rem;}
.color-swatch{
  display:inline-block;width:16px;height:16px;border-radius:50%;
  border:1.5px solid rgba(31,27,46,0.12);
  box-shadow:0 0 0 1px rgba(255,255,255,0.6) inset;
}

.price-old{color:var(--muted);text-decoration:line-through;font-size:.85rem;}
.price-now{font-family:'Sora',sans-serif;font-weight:700;font-size:1.1rem;}
.qty-stepper{
  display:inline-flex;align-items:center;
  border:1.5px solid rgba(31,27,46,0.1);
  border-radius:2rem;
  overflow:hidden;
}
.qty-stepper button{
  width:30px;height:30px;border:none;background:#fff;font-weight:700;color:var(--ink);
}
.qty-stepper button:hover{background:var(--mist);}
.qty-stepper span{width:26px;text-align:center;font-size:.85rem;font-weight:600;}
.add-cart-btn{
  width:40px;height:40px;border-radius:5px;
  background:var(--gradient-main);
  color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease;
}
@media (hover:hover) and (pointer:fine){
  .add-cart-btn:hover{transform:scale(1.08);}
}
.add-cart-btn:disabled{opacity:.4;background:var(--muted);}

/* ---------- about ---------- */
.about-media{position:relative;}
.about-media img{border-radius:1.5rem;box-shadow:var(--shadow-lift);}
.about-media .ring{
  position:absolute;inset:-18px;
  border:2px dashed rgba(108,74,182,.35);
  border-radius:1.9rem;
  z-index:-1;
}
.counter-card{
  background:#fff;border-radius:1rem;padding:1.4rem 1rem;
  text-align:center;box-shadow:var(--shadow-soft);
}
.counter-card b{
  font-family:'Sora',sans-serif;font-size:1.9rem;display:block;
  background:var(--gradient-main);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.counter-card span{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}

/* ---------- testimonials ---------- */
.testi-card{
  background:#fff;border-radius:1.25rem;padding:2rem;box-shadow:var(--shadow-soft);height:100%;
}
.testi-card .quote-mark{font-family:'Sora',sans-serif;font-size:3rem;color:var(--violet);opacity:.2;line-height:1;}
.testi-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;}
.testi-avatar-initials{display:flex;align-items:center;justify-content:center;background:var(--gradient-soft);color:var(--violet);font-weight:700;font-family:'Sora',sans-serif;}

/* ---------- contact ---------- */
.contact-info-card{
  background:#fff;border-radius:1.25rem;padding:1.3rem;box-shadow:var(--shadow-soft);
  display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem;
}
.contact-info-card .icon-wrap{
  width:44px;height:44px;border-radius:50%;
  background:var(--gradient-soft);color:var(--violet);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.map-frame{border-radius:1.25rem;overflow:hidden;box-shadow:var(--shadow-soft);}
.map-frame iframe{width:100%;height:100%;min-height:260px;border:0;display:block;}

/* ---------- promo banners ---------- */
.promo-banner{
  position:relative;overflow:hidden;border-radius:1.5rem;
  min-height:230px;display:flex;align-items:flex-end;
  background:var(--violet);box-shadow:var(--shadow-soft);
  transition:transform .25s ease,box-shadow .25s ease;
}
.promo-banner:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift,0 18px 40px rgba(31,27,46,.18));}
.promo-banner-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Scrim so white text stays readable over any uploaded photo, however
   light or busy the image happens to be. */
.promo-banner-bg + .promo-banner-body::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,27,46,.15) 0%,rgba(31,27,46,.82) 100%);
}
.promo-banner-plain .promo-banner-body{background:none;}
.promo-banner-body{
  position:relative;z-index:1;width:100%;padding:1.9rem;color:#fff;
}
.promo-banner-body > *{position:relative;}
.promo-banner-body h3{
  font-family:'Sora',sans-serif;font-weight:700;font-size:1.4rem;
  margin:0 0 .5rem;color:#fff;
}
.promo-banner-body p{margin:0;color:rgba(255,255,255,.85);font-size:.95rem;}
.promo-code{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;
  background:rgba(255,255,255,.16);border:1px dashed rgba(255,255,255,.55);
  border-radius:.7rem;padding:.5rem .9rem;cursor:pointer;
  transition:background .15s ease;
}
.promo-code:hover{background:rgba(255,255,255,.26);}
.promo-code-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;opacity:.85;}
.promo-code-value{font-weight:700;letter-spacing:.06em;font-family:'Sora',sans-serif;}
@media (max-width:575.98px){
  .promo-banner{min-height:200px;}
  .promo-banner-body{padding:1.4rem;}
  .promo-banner-body h3{font-size:1.2rem;}
}

/* ---------- auth & account ---------- */
.auth-card{
  background:#fff;border-radius:1.5rem;padding:2.5rem;
  box-shadow:var(--shadow-soft);max-width:480px;width:100%;
}
.auth-icon{
  width:64px;height:64px;border-radius:50%;margin:0 auto;
  background:var(--gradient-soft);color:var(--violet);
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
}
.auth-icon-danger{background:rgba(220,53,69,.1);color:#dc3545;}
.auth-divider{display:flex;align-items:center;gap:1rem;margin:1.25rem 0;color:var(--muted);font-size:.85rem;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:rgba(31,27,46,.12);}
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:.65rem;
  background:#fff;border:1.5px solid rgba(31,27,46,.15);
  border-radius:2rem;padding:.75rem 1rem;font-weight:600;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.btn-google:hover{border-color:var(--violet);box-shadow:var(--shadow-soft);color:var(--ink);}

.account-card{background:#fff;border-radius:1.5rem;padding:1.75rem;box-shadow:var(--shadow-soft);height:100%;}
.account-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.account-avatar-initials{
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient-soft);color:var(--violet);
  font-weight:700;font-family:'Sora',sans-serif;font-size:1.3rem;
}
.account-stat{background:var(--mist);border-radius:.9rem;padding:.75rem .5rem;}
.account-stat b{display:block;font-family:'Sora',sans-serif;font-size:1.05rem;color:var(--ink);}
.account-stat span{font-size:.75rem;color:var(--muted);}
.min-w-0{min-width:0;}

/* ---------- highlighted policy card ---------- */
.policy-highlight{
  display:flex;align-items:flex-start;gap:1rem;text-align:left;
  background:var(--gradient-soft);
  border:1.5px solid rgba(91,63,160,.2);
  border-radius:1.25rem;
  padding:1.5rem 1.75rem;
}
.policy-highlight .icon-wrap{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:#fff;color:var(--violet);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-soft);font-size:1.15rem;
}
.policy-highlight p{color:var(--ink);}
.policy-highlight.policy-highlight-sm{padding:1rem 1.25rem;border-radius:1rem;}
.policy-highlight.policy-highlight-sm .icon-wrap{width:38px;height:38px;font-size:1rem;}

.form-control,.form-select{
  border-radius:.8rem;
  border:1.5px solid rgba(31,27,46,0.1);
  padding:.7rem 1rem;
}
.form-control:focus,.form-select:focus{
  border-color:var(--violet);
  box-shadow:0 0 0 .2rem rgba(108,74,182,.15);
}
.form-floating>label{color:var(--muted);}

/* ---------- newsletter band ---------- */
.newsletter-band{
  background:var(--violet);
  border-radius:1.5rem;
  padding:3rem;
  color:#fff;
  position:relative;
}
.newsletter-band .form-control{border:none;}

/* ---------- footer ---------- */
.site-footer{background:var(--footer-bg);color:#c9c5d6;}
.footer-logo-wrap{display:inline-flex;background:#fff;padding:.5rem .9rem;border-radius:.6rem;}
.footer-logo{height:32px;width:auto;display:block;}
.site-footer h6{color:#fff;font-family:'Sora',sans-serif;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.8rem;margin-bottom:1.1rem;}
.site-footer a{color:#c9c5d6;text-decoration:none;transition:color .15s ease;}
/*.site-footer a:hover{color:var(--amber);}*/
.social-btn{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;transition:background .15s ease;
}
.social-btn:hover{background:var(--gradient-main);border-color:transparent;}

/* ---------- offcanvas cart ---------- */
.cart-item{display:flex;align-items:flex-start;gap:.7rem;padding:.9rem 0;border-bottom:1px solid rgba(31,27,46,.08);transition:opacity .15s ease;}
.cart-item img{width:64px;height:64px;object-fit:cover;border-radius:.7rem;flex-shrink:0;}
.cart-item h6{font-family:'Sora',sans-serif;font-size:.92rem;margin-bottom:.2rem;}
.cart-item .cart-meta{font-size:.75rem;color:var(--muted);}
.cart-item-select{width:18px;height:18px;margin-top:.35rem;flex-shrink:0;accent-color:var(--violet);cursor:pointer;}
.cart-item-excluded{opacity:.5;}
.remove-item{border:none;background:none;color:var(--coral);font-size:.78rem;font-weight:600;padding:0;}
.offcanvas-cart-empty{text-align:center;padding:3rem 1rem;color:var(--muted);}

/* ---------- checkout page ---------- */
.checkout-summary-item{display:flex;justify-content:space-between;font-size:.85rem;padding:.5rem 0;border-bottom:1px dashed rgba(31,27,46,.1);}
.order-success-icon{
  width:76px;height:76px;border-radius:50%;
  background:var(--gradient-soft);color:var(--violet);
  display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;margin:0 auto 1rem;
}

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed;bottom:24px;right:24px;
  width:48px;height:48px;border-radius:50%;
  background:var(--gradient-main);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lift);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index:1030;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
/* The WhatsApp launcher takes the bottom-right corner when it's enabled. */
.has-wa-widget .back-to-top{bottom:98px;}

/* ---------- toast ---------- */
.toast-container{z-index:1080;bottom:0;}
.has-wa-widget .toast-container{bottom:82px;}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--violet);outline-offset:2px;
}

/* ---------- page banner (shop / product pages) ---------- */
.page-banner{
  background:var(--violet);
  color:#fff;
  padding:6.5rem 0 3rem;
}
.page-banner .breadcrumb-row{
  font-size:.82rem;
  color:rgba(255,255,255,.7);
}
.page-banner .breadcrumb-row a{color:#fff;text-decoration:none;font-weight:600;}
.page-banner .breadcrumb-row a:hover{text-decoration:underline;}
.page-banner h1{font-weight:700;margin-top:.6rem;}

/* ---------- shop sidebar ---------- */
.filter-panel{
  background:#fff;
  border-radius:1.25rem;
  padding:1.5rem;
  box-shadow:var(--shadow-soft);
  position:sticky;
  top:100px;
}
.filter-panel h6{
  font-family:'Sora',sans-serif;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:1rem;
}
.filter-panel .form-check{margin-bottom:.55rem;}
.filter-panel .cat-chip{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;text-align:left;border-radius:.7rem;
}
.sort-bar{
  display:flex;justify-content:space-between;align-items:center;
  background:#fff;border-radius:1rem;padding:.9rem 1.1rem;
  box-shadow:var(--shadow-soft);margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem;
}
.sort-bar .form-select{width:auto;}
.empty-state{
  grid-column:1/-1;text-align:center;padding:4rem 1rem;color:var(--muted);
  background:#fff;border-radius:1.25rem;
}

/* ---------- product detail page ---------- */
.pd-gallery-main{
  border-radius:1.5rem;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-soft);
  aspect-ratio:1/1;
}
.pd-gallery-main img{width:100%;height:100%;object-fit:cover;}
.pd-thumbs{display:flex;gap:.7rem;margin-top:.9rem;}
.pd-thumb{
  width:72px;height:72px;border-radius:.9rem;overflow:hidden;
  border:2px solid transparent;cursor:pointer;flex-shrink:0;
}
.pd-thumb.active{border-color:var(--violet);}
.pd-thumb img{width:100%;height:100%;object-fit:cover;}
.pd-price{font-family:'Sora',sans-serif;font-weight:700;font-size:2rem;}
.pd-price-old{color:var(--muted);text-decoration:line-through;font-size:1.1rem;}
.pd-qty{
  display:inline-flex;align-items:center;
  border:1.5px solid rgba(31,27,46,0.12);
  border-radius:2.5rem;overflow:hidden;
}
.pd-qty button{width:44px;height:44px;border:none;background:#fff;font-size:1.1rem;font-weight:700;color:var(--ink);}
.pd-qty button:hover{background:var(--mist);}
.pd-qty span{width:40px;text-align:center;font-weight:700;}
.pd-size-pill{
  border:1.5px solid rgba(31,27,46,0.12);
  background:#fff;color:var(--ink);
  padding:.5rem 1rem;border-radius:2rem;
  font-size:.85rem;font-weight:600;
  transition:all .15s ease;
}
.pd-size-pill:hover{border-color:var(--violet);}
.pd-size-pill.active{background:var(--violet);border-color:var(--violet);color:#fff;}
.pd-size-pill:disabled{opacity:.4;cursor:not-allowed;}
.pd-note-row{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.6rem;}
.pd-note-tier{width:64px;flex-shrink:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.pd-note-pill{display:inline-block;background:var(--mist);color:var(--ink);border-radius:1rem;padding:.25rem .7rem;font-size:.8rem;margin:0 .3rem .3rem 0;}
.pd-meta-row{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin:1rem 0;}
.pd-meta-row b{color:var(--ink);}
.pd-tabs .nav-link{
  font-weight:600;color:var(--muted);border:none;border-bottom:2px solid transparent;
  padding:.85rem 1.1rem;
}
.pd-tabs .nav-link.active{color:var(--violet);border-color:var(--violet);background:none;}

/* ---------- discovery-set detail page ---------- */
.set-item-row{
  display:flex;align-items:center;gap:.9rem;
  padding:.8rem;border:1px solid rgba(31,27,46,.08);border-radius:1rem;
  margin-bottom:.7rem;text-decoration:none;color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.set-item-row:hover{border-color:var(--violet);background:var(--mist);color:var(--ink);}
.set-item-row img{width:52px;height:52px;object-fit:cover;border-radius:.7rem;flex-shrink:0;background:var(--mist);}
.pd-tab-content{background:#fff;border-radius:0 0 1.25rem 1.25rem;padding:1.75rem;box-shadow:var(--shadow-soft);}
.spec-table td{padding:.6rem .5rem;border-bottom:1px solid rgba(31,27,46,.06);font-size:.88rem;}
.spec-table td:first-child{color:var(--muted);width:40%;}
.trust-badges{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.2rem;}
.trust-badges .badge-item{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted);}
.trust-badges .badge-item i{color:var(--violet);}

/* =====================================================================
   WHATSAPP CHAT WIDGET
   A launcher pinned bottom-right that opens a small compose panel. The
   panel deliberately mimics a WhatsApp thread so it reads as "message
   the shop" rather than "another contact form" — but WhatsApp green is
   kept to the widget itself so it never competes with the site's violet
   call-to-action buttons.
   ===================================================================== */
.wa-widget{
  --wa-green:#25D366;
  --wa-green-dark:#128C7E;
  --wa-thread:#ECE5DD;
  position:fixed;bottom:24px;right:24px;z-index:1035;
  display:flex;flex-direction:column;align-items:flex-end;gap:.85rem;
}
/* Toasts also live in the bottom-right corner and sit above the closed
   launcher. While the panel is open it takes priority instead: a toast
   from a moment ago must not cover controls the visitor just opened. */
.wa-widget.is-open{z-index:1085;}

/* ---------- launcher ---------- */
.wa-launcher{
  width:58px;height:58px;border-radius:50%;border:none;flex-shrink:0;
  background:var(--wa-green);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:0 8px 24px rgba(37,211,102,.42);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.wa-launcher:hover{transform:scale(1.06);box-shadow:0 12px 30px rgba(37,211,102,.55);}
.wa-launcher:active{transform:scale(.97);}
.wa-launcher i{font-size:1.75rem;line-height:1;position:absolute;transition:opacity .18s ease, transform .18s ease;}
.wa-launcher-close{font-size:1.3rem !important;opacity:0;transform:rotate(-45deg) scale(.6);}
.wa-widget.is-open .wa-launcher{background:var(--wa-green-dark);}
.wa-widget.is-open .wa-launcher-icon{opacity:0;transform:rotate(45deg) scale(.6);}
.wa-widget.is-open .wa-launcher-close{opacity:1;transform:rotate(0) scale(1);}

/* A slow halo that draws the eye once without becoming a distraction.
   Sits behind the button and is purely decorative. */
.wa-launcher::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--wa-green);opacity:.55;z-index:-1;
  animation:wa-pulse 2.4s ease-out infinite;
}
.wa-widget.is-open .wa-launcher::before{animation:none;opacity:0;}
@keyframes wa-pulse{
  0%{transform:scale(1);opacity:.5;}
  70%{transform:scale(1.55);opacity:0;}
  100%{transform:scale(1.55);opacity:0;}
}

/* ---------- panel ---------- */
.wa-panel{
  width:min(354px, calc(100vw - 40px));
  background:#fff;border-radius:1.15rem;overflow:hidden;
  box-shadow:0 20px 55px rgba(31,27,46,.26);
  display:flex;flex-direction:column;
  transform-origin:bottom right;
  animation:wa-in .2s ease-out;
}
@keyframes wa-in{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:none;}}

.wa-panel-head{
  background:var(--wa-green-dark);color:#fff;
  padding:.9rem 1rem;display:flex;align-items:center;gap:.7rem;
}
.wa-avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:1.35rem;
}
.wa-panel-head-text{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1;}
.wa-panel-head-text strong{font-size:.97rem;font-weight:700;}
.wa-panel-head-text span{font-size:.74rem;opacity:.85;display:flex;align-items:center;gap:.35rem;}
.wa-online-dot{width:7px;height:7px;border-radius:50%;background:#7BF1A8;flex-shrink:0;}
.wa-close{
  background:transparent;border:none;color:#fff;opacity:.8;
  padding:.25rem;line-height:1;cursor:pointer;font-size:.95rem;flex-shrink:0;
}
.wa-close:hover{opacity:1;}

/* The faint chat-paper texture WhatsApp uses, drawn rather than loaded so
   the widget stays a single request. */
.wa-panel-body{
  background:var(--wa-thread);
  background-image:radial-gradient(rgba(31,27,46,.05) 1px, transparent 1px);
  background-size:18px 18px;
  padding:1.1rem 1rem 1rem;
  max-height:min(46vh, 300px);overflow-y:auto;
}
.wa-bubble{
  position:relative;background:#fff;border-radius:.2rem .75rem .75rem .75rem;
  padding:.65rem .8rem 1.1rem;font-size:.87rem;line-height:1.5;color:var(--ink);
  box-shadow:0 1px 2px rgba(31,27,46,.14);max-width:92%;
}
.wa-bubble::before{
  content:"";position:absolute;top:0;left:-7px;
  border:7px solid transparent;border-top-color:#fff;border-right:0;
}
.wa-bubble-time{
  position:absolute;right:.6rem;bottom:.35rem;
  font-size:.66rem;color:var(--muted);
}

/* The product being viewed, shown as an attachment card so it is
   obvious what will travel with the message. */
.wa-item{
  display:flex;align-items:center;gap:.6rem;margin-top:.6rem;
  background:#fff;border-radius:.6rem;padding:.5rem .6rem;
  box-shadow:0 1px 2px rgba(31,27,46,.14);
}
.wa-item-img{
  width:42px;height:42px;border-radius:.4rem;object-fit:cover;flex-shrink:0;
  background:var(--mist);
}
.wa-item-text{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3;}
.wa-item-text strong{
  font-size:.82rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wa-item-text span{font-size:.75rem;color:var(--muted);}
.wa-item-tag{
  font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--wa-green-dark);background:rgba(37,211,102,.14);
  border-radius:999px;padding:.16rem .45rem;flex-shrink:0;
}

.wa-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem;}
.wa-chip{
  background:#fff;border:1px solid var(--wa-green);color:var(--wa-green-dark);
  border-radius:999px;padding:.32rem .7rem;font-size:.76rem;font-weight:600;
  cursor:pointer;transition:background .15s ease, color .15s ease;
}
.wa-chip:hover{background:var(--wa-green);color:#fff;}

.wa-panel-foot{
  display:flex;align-items:flex-end;gap:.5rem;
  padding:.7rem .8rem .5rem;background:#fff;
}
.wa-input{
  flex:1;min-width:0;resize:none;overflow-y:auto;max-height:96px;
  border:1px solid rgba(31,27,46,.14);border-radius:1.1rem;
  padding:.55rem .85rem;font-size:.87rem;font-family:inherit;line-height:1.45;
  background:var(--mist);color:var(--ink);
}
.wa-input:focus{outline:none;border-color:var(--wa-green);background:#fff;}
.wa-send{
  width:40px;height:40px;border-radius:50%;border:none;flex-shrink:0;
  background:var(--wa-green);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  transition:background .15s ease, opacity .15s ease;
}
.wa-send:hover:not(:disabled){background:var(--wa-green-dark);}
.wa-send:disabled{opacity:.4;cursor:not-allowed;}

.wa-disclaimer{
  margin:0;padding:0 .9rem .75rem;background:#fff;
  font-size:.7rem;color:var(--muted);display:flex;align-items:center;gap:.35rem;
}

/* Only rendered where the browser can actually share a file, so it never
   promises an attachment it cannot deliver. */
.wa-attach{
  display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;
  background:#fff;border:none;border-top:1px solid rgba(31,27,46,.08);
  color:var(--wa-green-dark);font-size:.78rem;font-weight:600;
  padding:.65rem .9rem;cursor:pointer;
}
.wa-attach:hover:not(:disabled){background:rgba(37,211,102,.08);}
.wa-attach:disabled{opacity:.5;cursor:progress;}

/* On a phone the panel spans the viewport, so it is anchored to the
   screen edges instead of stacking above the launcher. */
@media (max-width:575.98px){
  .wa-widget{bottom:16px;right:16px;left:16px;align-items:flex-end;}
  .wa-panel{width:100%;}
  .wa-panel-body{max-height:38vh;}
}

/* Respect a reduced-motion preference: the halo and the panel's entrance
   are decorative, and this widget appears on every page. */
@media (prefers-reduced-motion:reduce){
  .wa-launcher::before{animation:none;opacity:0;}
  .wa-panel{animation:none;}
  .wa-launcher,.wa-launcher i{transition:none;}
}

/* =====================================================================
   Product reviews — account pages, the review form, and the product
   page's Reviews & Ratings section. Uses the storefront's own tokens
   (--brand, --ink, --border) so this reads as part of the site rather
   than a bolted-on module.
   ===================================================================== */

/* ---------- "please review" notice ---------- */
.review-notice{
  display:flex;gap:.9rem;align-items:flex-start;
  background:linear-gradient(135deg, var(--gradient-soft), transparent);
  border:1px solid rgba(0,0,0,.06);
  border-left:3px solid var(--violet);
  border-radius:1rem;padding:1rem 1.15rem;margin-bottom:1.25rem;
}
.review-notice-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--violet);color:#fff;font-size:.95rem;
}
.review-notice-list{list-style:none;padding:0;margin:.6rem 0 0;}
.review-notice-list li{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.45rem 0;border-top:1px solid rgba(0,0,0,.06);font-size:.9rem;
}
.review-notice-list li:first-child{border-top:none;}

/* ---------- order lines ---------- */
.order-line{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.1rem 1.25rem;border-top:1px solid rgba(31,27,46,.08);
}
.order-line:first-of-type{border-top:none;}
.order-line-media{flex:0 0 auto;width:72px;height:72px;border-radius:.75rem;overflow:hidden;background:#f4f4f6;}
.order-line-media img{width:100%;height:100%;object-fit:cover;display:block;}
.order-line-noimg{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;color:#b9b7c2;font-size:1.3rem;
}
.order-line-body{flex:1 1 auto;min-width:0;}
.order-line-body h6 a{color:inherit;text-decoration:none;}
.order-line-body h6 a:hover{color:var(--violet);}
.order-line-review{
  background:#fafafb;border:1px solid rgba(31,27,46,.07);
  border-radius:.75rem;padding:.75rem .9rem;margin-top:.25rem;
}

.review-stars{color:#f0a500;font-size:.85rem;letter-spacing:.06em;white-space:nowrap;}
.review-pill{
  display:inline-flex;align-items:center;
  font-size:.72rem;font-weight:600;border-radius:2rem;padding:.2rem .6rem;
}
.review-pill-ok{background:rgba(25,135,84,.1);color:#146c43;}
.review-pill-wait{background:rgba(240,165,0,.14);color:#8a6100;}
.review-pill-no{background:rgba(220,53,69,.1);color:#b02a37;}

.review-thumbs{display:flex;flex-wrap:wrap;gap:.4rem;}
.review-thumbs img{
  width:56px;height:56px;object-fit:cover;border-radius:.5rem;
  border:1px solid rgba(31,27,46,.08);display:block;
}
.review-response{
  margin-top:.7rem;padding:.6rem .75rem;border-radius:.6rem;
  background:var(--gradient-soft);
  border-left:2px solid var(--violet);font-size:.85rem;
}
.review-response strong{display:block;font-size:.75rem;color:var(--violet);margin-bottom:.15rem;}

/* ---------- review form ---------- */
.review-subject{
  display:flex;gap:1rem;align-items:center;
  background:#fafafb;border:1px solid rgba(31,27,46,.07);
  border-radius:.85rem;padding:.85rem 1rem;
}
.review-subject-media{width:64px;height:64px;border-radius:.6rem;overflow:hidden;background:#f0f0f3;flex:0 0 auto;}
.review-subject-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* Stars are laid out in reverse so a CSS-only hover can light every
   star to the left of the pointer without any JavaScript. */
.star-input{display:inline-flex;flex-direction:row-reverse;gap:.2rem;}
.star-input input{position:absolute;opacity:0;width:0;height:0;}
.star-input label{
  font-size:1.75rem;color:#dcdae2;cursor:pointer;line-height:1;
  transition:color .12s ease, transform .12s ease;
}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label{color:#f0a500;}
.star-input label:hover{transform:scale(1.08);}
.star-input input:focus-visible + label{outline:2px solid var(--violet);outline-offset:3px;border-radius:.2rem;}

.review-preview{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;}
.review-preview-item{position:relative;width:80px;height:80px;}
.review-preview-item img{
  width:100%;height:100%;object-fit:cover;border-radius:.5rem;
  border:1px solid rgba(31,27,46,.08);display:block;
}
.review-preview-x{
  position:absolute;top:-6px;right:-6px;
  width:22px;height:22px;border-radius:50%;border:none;
  background:#dc3545;color:#fff;font-size:.95rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- product page: reviews & ratings ---------- */
.pr-section{border-top:1px solid rgba(31,27,46,.08);}
.pr-summary{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:2rem;align-items:center;
  background:#fafafb;border:1px solid rgba(31,27,46,.07);
  border-radius:1rem;padding:1.5rem;margin-bottom:2rem;
}
.pr-score{text-align:center;min-width:130px;}
.pr-score b{display:block;font-size:2.75rem;line-height:1;font-weight:800;color:var(--ink);}
.pr-score .review-stars{font-size:1rem;display:block;margin:.4rem 0 .25rem;}
.pr-score span{font-size:.82rem;color:var(--muted);}

.pr-bars{display:flex;flex-direction:column;gap:.35rem;}
.pr-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.6rem;align-items:center;font-size:.8rem;}
.pr-bar-label{color:var(--muted);white-space:nowrap;}
.pr-bar-track{height:8px;border-radius:2rem;background:rgba(0,0,0,.07);overflow:hidden;}
.pr-bar-fill{height:100%;border-radius:2rem;background:#f0a500;}
.pr-bar-n{color:var(--muted);min-width:2ch;text-align:right;}

.pr-list{display:flex;flex-direction:column;gap:1rem;}
.pr-item{
  border:1px solid rgba(31,27,46,.07);border-radius:1rem;
  padding:1.1rem 1.25rem;background:#fff;
}
.pr-item-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.5rem;}
.pr-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--violet);color:#fff;font-weight:700;font-size:.85rem;
  display:inline-flex;align-items:center;justify-content:center;
}
.pr-author{font-weight:600;color:var(--ink);}
.pr-verified{
  font-size:.7rem;font-weight:600;color:#146c43;
  background:rgba(25,135,84,.1);border-radius:2rem;padding:.1rem .5rem;
}
.pr-date{margin-left:auto;font-size:.78rem;color:var(--muted);}
.pr-text{margin:0;font-size:.92rem;line-height:1.65;color:#3c3947;}

.pr-empty{text-align:center;padding:2.5rem 1rem;color:var(--muted);}
.pr-empty i{font-size:2rem;color:#c9c7d2;}

.pr-more{display:flex;justify-content:center;margin-top:1.5rem;}

/* Lightbox for review photographs. Plain fixed overlay rather than a
   modal library, since the storefront does not load one. */
.pr-lightbox{
  position:fixed;inset:0;z-index:1080;
  background:rgba(20,18,28,.85);
  display:flex;align-items:center;justify-content:center;padding:2rem;
}
.pr-lightbox img{max-width:100%;max-height:100%;border-radius:.6rem;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.pr-lightbox-x{
  position:absolute;top:1rem;right:1.25rem;
  width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(255,255,255,.15);color:#fff;font-size:1.3rem;cursor:pointer;
}
.pr-lightbox-x:hover{background:rgba(255,255,255,.28);}

@media (max-width:575.98px){
  .pr-summary{grid-template-columns:minmax(0,1fr);gap:1.25rem;padding:1.15rem;}
  .pr-score{min-width:0;}
  .order-line{padding:1rem;}
  .order-line-media{width:56px;height:56px;}
  .review-notice-list li{flex-direction:column;align-items:flex-start;gap:.4rem;}
}

/* =====================================================================
   Shop category tree
   ===================================================================== */
.cat-tree{
  --cat-indent:1.05rem;
  --cat-rail:rgba(31,27,46,.11);
  display:flex;flex-direction:column;
  margin-bottom:1.5rem;
}

.cat-branch{list-style:none;margin:0;padding:0;}

/* Each nested list is indented and carries the guide its children hang
   from. The root list has no rail — top-level categories are not
   children of anything. */
.cat-branch .cat-branch{
  position:relative;
  margin-left:.62rem;
  padding-left:.62rem;
}
.cat-branch .cat-branch::before{
  content:"";
  position:absolute;left:0;top:.1rem;bottom:.75rem;
  width:1.5px;border-radius:2px;
  background:var(--cat-rail);
  transition:background .18s ease;
}

.cat-item{position:relative;}

/* The elbow from rail into row, meeting the label at its centre. */
.cat-branch .cat-branch > .cat-item::before{
  content:"";
  position:absolute;
  left:-.62rem;top:1.05rem;
  width:.5rem;height:1.5px;border-radius:2px;
  background:var(--cat-rail);
  transition:background .18s ease;
}

/* Only the branch actually containing the selection is highlighted.
   Keyed off open-ness this would light every rail on the page, since
   branches now start expanded. */
.cat-item.has-active > .cat-branch::before{background:var(--violet);opacity:.45;}
.cat-item.has-active > .cat-row > .cat-node{color:var(--violet);}

.cat-row{display:flex;align-items:center;gap:.1rem;}

/* ---------- node ---------- */
.cat-node{
  position:relative;
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:.55rem;
  text-align:left;
  border:none;background:transparent;
  padding:.5rem .7rem;
  border-radius:.55rem;
  font-size:.86rem;font-weight:500;
  color:var(--ink);
  cursor:pointer;
  transition:background .16s ease, color .16s ease, padding-left .16s ease;
}
.cat-node:hover{background:var(--gradient-soft);color:var(--violet);}

/* A click should not leave a ring behind; keyboard focus still must show
   one, which is exactly the difference :focus-visible draws. */
.cat-node:focus{outline:none;}
.cat-node:focus-visible,
.cat-toggle:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:2px;
}

.cat-node-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Top level reads as headings; deeper levels step back so the eye can
   tell the levels apart without measuring the indent. */
.cat-branch-root > .cat-item > .cat-row > .cat-node{
  font-weight:650;
  letter-spacing:-.005em;
}
.cat-branch .cat-branch .cat-node{font-size:.83rem;color:var(--muted);font-weight:500;}
.cat-branch .cat-branch .cat-node:hover{color:var(--violet);}

/* "All products" sits above the tree as its reset. */
.cat-node-root{
  font-weight:600;
  background:var(--mist);
  margin-bottom:.55rem;
  padding:.6rem .8rem;
}
.cat-node-root:hover{background:var(--gradient-soft);}
.cat-node-icon{font-size:.75rem;opacity:.55;}

/* ---------- selected ---------- */
/* A left marker rather than a filled pill: a solid block at three levels
   of indentation fights the rails it sits among, and at this size the
   fill left the label cramped. */
.cat-node.active{
  background:var(--gradient-soft);
  color:var(--violet);
  font-weight:650;
  padding-left:1rem;
}
.cat-node.active::before{
  content:"";
  position:absolute;left:.3rem;top:50%;
  width:3px;height:1.05rem;
  margin-top:-.525rem;
  border-radius:2px;
  background:var(--violet);
}
.cat-node.active .cat-node-icon{opacity:1;}
/* The root reset keeps the solid fill — it is a mode, not a position in
   the tree — so the left marker the tree nodes use would be redundant
   there, and reads as an artefact beside the icon. */
.cat-node-root.active{background:var(--gradient-main);color:#fff;padding-left:.8rem;}
.cat-node-root.active::before{display:none;}

/* ---------- fold control ---------- */
.cat-toggle{
  flex:0 0 auto;
  width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;background:none;border-radius:.4rem;
  color:rgba(31,27,46,.32);
  font-size:.65rem;cursor:pointer;
  transition:transform .2s ease, color .16s ease, background .16s ease;
}
.cat-toggle:hover{background:var(--gradient-soft);color:var(--violet);}
.cat-item.is-open > .cat-row > .cat-toggle{transform:rotate(90deg);}

.cat-item.has-children > .cat-branch{display:none;}
.cat-item.has-children.is-open > .cat-branch{display:block;}

@media (prefers-reduced-motion:reduce){
  .cat-node,.cat-toggle,.cat-branch::before{transition:none;}
}

/* ==========================================================================
   Sale countdown
   Shown only on a discount that actually has an end. A timer counting to
   nothing is worse than no timer: it teaches shoppers the urgency is fake.
   ========================================================================== */

.sale-timer {
  --st-accent: #d92d20;
  --st-bg:     #fff1f0;
  --st-border: #ffd4d0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .55rem;
  border-radius: 8px;
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  color: var(--st-accent);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.sale-timer i { font-size: .85em; }

/* Digits must not reflow the row every second. */
.sale-timer__t {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* Under an hour the sale stops being "later today" and becomes "now". */
.sale-timer.is-urgent {
  --st-bg:     #d92d20;
  --st-border: #d92d20;
  color: #fff;
  animation: saleTimerPulse 1.6s ease-in-out infinite;
}
@keyframes saleTimerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, .45); }
  50%      { box-shadow: 0 0 0 .35rem rgba(217, 45, 32, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sale-timer.is-urgent { animation: none; }
}

.sale-timer.is-over {
  --st-accent: #6c757d;
  --st-bg:     #f1f3f5;
  --st-border: #e0e3e7;
  animation: none;
}

/* ---- Detail page: the same information, given room ---------------------- */

.sale-timer--lg {
  display: flex;
  width: 100%;
  gap: .75rem;
  align-items: center;
  padding: .85rem 1rem;
  border-radius: 12px;
  font-size: .95rem;
}
.sale-timer--lg .sale-timer__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  opacity: .85;
}
.sale-timer--lg .sale-timer__units {
  display: flex;
  gap: .4rem;
  margin-left: auto;
}
.sale-timer__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.75rem;
  padding: .35rem .3rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--st-border);
}
.sale-timer--lg.is-urgent .sale-timer__unit {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .35);
}
.sale-timer__num {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.sale-timer__cap {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .75;
}

@media (max-width: 420px) {
  .sale-timer--lg { flex-wrap: wrap; }
  .sale-timer--lg .sale-timer__units { margin-left: 0; width: 100%; }
  .sale-timer__unit { flex: 1; }
}

/* ---- Sale name -----------------------------------------------------
   A campaign has a name — "Eid Sale" — and it sits with the clock rather
   than in a badge of its own, so a card gains one element, not two.
   -------------------------------------------------------------------- */

.sale-timer__name {
  font-weight: 700;
  letter-spacing: .01em;
  /* A long name must not push the clock off a narrow card. */
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A hairline between name and clock, only drawn when both are present. */
.sale-timer__sep {
  width: 1px;
  align-self: stretch;
  margin: .1rem .1rem;
  background: currentColor;
  opacity: .28;
}

.sale-timer--lg .sale-timer__label {
  display: flex;
  flex-direction: column;
  gap: .12rem;
}
.sale-timer__name-lg {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none;
}
.sale-timer__ends {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .68rem;
  opacity: .8;
}

/* Named but open-ended: no clock, so the pill should not stretch as if
   one were coming. */
.sale-timer--lg:not([data-sale-ends]) { width: auto; }

/* ==========================================================================
   Shop filters
   Groups, options and swatches are drawn from whatever the API says this
   listing offers, so nothing here is specific to garments.
   ========================================================================== */

.filter-panel-groups { margin-top: 1rem; }

.filter-group { border-top: 1px solid var(--bs-border-color, #e5e5e5); }
.filter-group:first-child { border-top: 0; }

.filter-group__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
}
.filter-group__head span:first-child { flex: 1; text-align: left; }
.filter-group__head i { transition: transform .18s ease; font-size: .75rem; opacity: .6; }
.filter-group.is-collapsed .filter-group__head i { transform: rotate(-90deg); }
.filter-group.is-collapsed .filter-group__body { display: none; }
.filter-group__body { padding-bottom: .85rem; }

.filter-group__count {
  min-width: 1.25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--violet, #5B3FA0);
  color: #fff;
  font-size: .68rem;
  line-height: 1.25rem;
  text-align: center;
}

/* A tall list of options must scroll inside the group, not push the
   whole sidebar down past the products. */
.filter-options {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  max-height: 13rem;
  overflow-y: auto;
}
.filter-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  cursor: pointer;
  margin: 0;
  padding: .1rem 0;
}
.filter-opt input { accent-color: var(--violet, #5B3FA0); flex: 0 0 auto; }
.filter-opt.is-on { font-weight: 600; }
.filter-stars { color: #E8A33D; letter-spacing: .04em; }

.filter-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-swatch {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .5rem .22rem .28rem;
  border: 1px solid var(--bs-border-color, #e0e0e0);
  border-radius: 999px;
  background: transparent;
  font-size: .78rem;
  cursor: pointer;
}
.filter-swatch span {
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.22); flex: 0 0 auto;
}
.filter-swatch em { font-style: normal; }
.filter-swatch:hover { border-color: var(--violet, #5B3FA0); }
.filter-swatch.is-on {
  border-color: var(--violet, #5B3FA0);
  box-shadow: 0 0 0 1px var(--violet, #5B3FA0) inset;
  font-weight: 600;
}

.filter-price { display: flex; align-items: center; gap: .4rem; }
.filter-price__dash { opacity: .5; }

/* ---- Chips above the grid ---- */
.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--violet, #5B3FA0);
  background: color-mix(in srgb, var(--violet, #5B3FA0) 10%, transparent);
  color: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.active-chip i { font-size: .62rem; opacity: .7; }
.active-chip:hover i { opacity: 1; }
.active-chip--clear {
  border-style: dashed;
  background: transparent;
  font-weight: 600;
}

/* ==========================================================================
   Shop product card
   Dense grid layout: ribbon, countdown on the image, then category, name,
   rating and a price/Add row.
   ========================================================================== */

.p-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8e8ec;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.p-card:hover { box-shadow: 0 6px 20px rgba(20, 20, 40, .1); transform: translateY(-2px); }

.p-card__media { position: relative; background: #f7f7f9; }
.p-card__imglink { display: block; }
.p-card__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  padding: .75rem;
  display: block;
}

/* The diagonal corner flash. Drawn with a rotated block clipped by the
   card's overflow rather than an image, so it scales with the card and
   costs no request. */
.p-card__ribbon {
  position: absolute;
  top: 14px;
  left: -34px;
  width: 132px;
  padding: .22rem 0;
  transform: rotate(-45deg);
  background: #17913f;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  pointer-events: none;
}

/* The countdown, sitting on the image. Overrides the pill's own colours —
   over a photo it needs its own contrast, not the page's. */
.p-card__timer.sale-timer {
  position: absolute;
  left: .5rem;
  bottom: .5rem;
  margin: 0;
  padding: .22rem .5rem;
  background: rgba(255, 255, 255, .94);
  border-color: rgba(0, 0, 0, .08);
  color: #1c7a37;
  font-size: .7rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}
.p-card__timer.sale-timer.is-urgent { background: #d92d20; color: #fff; border-color: #d92d20; }
.p-card__timer .sale-timer__name { max-width: 6rem; }

.p-card__sold {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .74);
  font-weight: 700;
  font-size: .82rem;
  color: #6c757d;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.p-card__body {
  padding: .7rem .8rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  flex: 1;
}

.p-card__cat {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #9195a3;
}

/* Two lines, then ellipsis: a long name must not make one card taller
   than its neighbours and break the row. */
.p-card__name {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.32;
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}
.p-card__name:hover { color: var(--violet, #5B3FA0); }

.p-card__rating { display: flex; align-items: center; gap: .3rem; font-size: .74rem; }
.p-card__stars  { color: #f0a92b; letter-spacing: .02em; }
.p-card__rcount { color: #9195a3; }

.p-card__foot {
  margin-top: auto;
  padding-top: .5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.p-card__prices { display: flex; flex-direction: column; line-height: 1.25; }
.p-card__now { font-size: 1rem; font-weight: 700; }
.p-card__was {
  font-size: .78rem;
  color: #9195a3;
  text-decoration: line-through;
}

.p-card__actions { display: flex; flex-direction: column; align-items: stretch; gap: .12rem; }
.p-card__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .32rem .7rem;
  border: 1px solid #17913f;
  border-radius: 6px;
  background: #fff;
  color: #17913f;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.p-card__add:hover:not(:disabled) { background: #17913f; color: #fff; }
.p-card__add:disabled { border-color: #d7d9de; color: #a7abb4; cursor: not-allowed; }
.p-card__options { font-size: .66rem; color: #9195a3; text-align: center; }

/* ---- Sidebar header ---- */
.filter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .7rem;
  margin-bottom: .2rem;
  border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
}
.filter-panel__title { margin: 0; font-weight: 700; font-size: 1.05rem; }
.filter-panel__clear {
  border: 0;
  background: none;
  padding: 0;
  font-size: .8rem;
  font-weight: 600;
  color: #d92d20;
  cursor: pointer;
}
.filter-panel__clear:hover { text-decoration: underline; }

/* The category tree lives inside a collapsible group now, so it must not
   also carry the old always-open section's spacing. */
.filter-group__body > .cat-tree { margin-top: .1rem; }

/* ==========================================================================
   Grid density switcher
   ========================================================================== */

.grid-density {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .2rem;
  border: 1px solid #e3e4e8;
  border-radius: 8px;
  background: #f5f6f8;
}
.grid-density button {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 1.85rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: #6f7280;
  cursor: pointer;
  padding: 0;
}
.grid-density button:hover { color: #1f2230; background: #eceef1; }
.grid-density button.is-on {
  background: #fff;
  border-color: #17913f;
  color: #17913f;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
}
.grid-density button i { font-size: .95rem; }

/* The bars are the icon: n bars means n across. Drawn rather than
   iconographed so 2/3/4/5 read as a scale instead of four similar glyphs. */
.grid-density__bars {
  display: flex;
  gap: 1.5px;
  align-items: stretch;
  height: .8rem;
}
.grid-density__bars span {
  width: 2.5px;
  border-radius: 1px;
  background: currentColor;
}

/* Below lg the switcher is noise — the layout is already dictated by the
   width, and the choice would not change what is shown. */
@media (max-width: 991.98px) {
  .grid-density { display: none; }
}

/* ---- List view ---- */
.p-grid--list .p-card {
  flex-direction: row;
  align-items: stretch;
}
.p-grid--list .p-card__media {
  flex: 0 0 clamp(7rem, 22%, 12rem);
  display: flex;
  align-items: center;
}
.p-grid--list .p-card__media img { aspect-ratio: auto; height: 100%; max-height: 11rem; }
.p-grid--list .p-card__body { padding: .9rem 1.1rem; }
.p-grid--list .p-card__name {
  font-size: 1rem;
  -webkit-line-clamp: 1;
  min-height: 0;
}
/* One row is wide enough to put the price and the button on the same
   line as everything else, which is the point of a list. */
.p-grid--list .p-card__foot { align-items: center; }
.p-grid--list .p-card__now { font-size: 1.1rem; }
.p-grid--list .p-card__ribbon { top: 11px; left: -38px; width: 120px; font-size: .62rem; }

/* In a grid the price is pinned to the bottom so cards of different name
   lengths still line up. A list row has no neighbours to line up with, so
   that same rule just opens a gap in the middle of it. */
.p-grid--list .p-card__body { justify-content: center; gap: .35rem; }
.p-grid--list .p-card__foot { margin-top: .45rem; padding-top: 0; }

/* Sort and density act on the same grid, so they travel together on the
   right. space-between across three children put the switcher in the
   middle of the bar, reading as unrelated to either neighbour. */
.sort-bar__tools {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-left: auto;
}

/* The Add button must never be shrunk to fit.
   .p-card__foot is a flex row, and by default both children may shrink.
   With a long price and a narrow card the button lost the argument and was
   squeezed to 40px while its label kept its own width and spilled past the
   border. The button takes the width it needs; the price is what gives. */
.p-card__actions { flex: 0 0 auto; }
.p-card__add     { flex: 0 0 auto; }
.p-card__prices  { flex: 1 1 auto; min-width: 0; }

/* Below that, wrapping beats overlapping: on a very narrow card the price
   takes the first line and the button the second, rather than the two
   fighting over one. */
.p-card__foot { flex-wrap: wrap; row-gap: .45rem; }