/* ═══════════════════════════════════════════════════════════════════
   PureFood BD — Premium UI/UX Layer v4.0
   Loaded AFTER the app CSS bundle. Non-destructive overrides.
   Design identity: "Harvest Green + Honey Amber" — grounded in the
   product world (organic honey, dates, gudh) — not a generic template.
   Coverage: 320px → 4K · mobile / tablet / desktop / touch / print
   v4: premium motion system (gradient loaders, shimmer skeletons,
       scroll reveal, route transitions, checkout stepper, progress
       shine) — replaces every plain circular spinner feel.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   0. DESIGN TOKENS (single source of polish)
   ─────────────────────────────────────────────── */
:root {
  --pf-pine: #10312b;          /* deep pine — dark surfaces */
  --pf-forest: #4e7e5a;        /* brand emerald — primary actions */
  --pf-forest-deep: #3d6347;
  --pf-teal: #0f766e;          /* app theme color */
  --pf-honey: #df912c;         /* honey amber — accent, prices, highlights */
  --pf-honey-soft: #fdf2dd;
  --pf-cream: #fafaf9;
  --pf-sage: #f4f8f5;
  --pf-ink: #1c1917;
  --pf-shadow-sm: 0 1px 2px rgba(16, 49, 43, .05), 0 2px 8px -2px rgba(16, 49, 43, .08);
  --pf-shadow-md: 0 2px 6px -2px rgba(16, 49, 43, .1), 0 10px 28px -8px rgba(16, 49, 43, .14);
  --pf-shadow-lg: 0 4px 12px -4px rgba(16, 49, 43, .14), 0 24px 48px -16px rgba(16, 49, 43, .2);
  --pf-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ───────────────────────────────────────────────
   1. GLOBAL GUARDS
   ─────────────────────────────────────────────── */
html,
body {
  overflow-x: clip;
  max-width: 100vw;
}

body {
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  font-optical-sizing: auto;
}

/* Bengali long words / URLs never blow out layouts */
h1, h2, h3, h4, p, span, a, button, div {
  overflow-wrap: break-word;
}

/* Display headings: balanced line breaks, tighter display tracking */
h1, h2 {
  text-wrap: balance;
  letter-spacing: -0.015em;
}
h3, h4 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

img,
video {
  max-width: 100%;
}

/* Smooth, modern scrollbars (desktop polish) */
@media (min-width: 1024px) {
  * {
    scrollbar-width: thin;
    scrollbar-color: #c4dcce transparent;
  }
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  *::-webkit-scrollbar-thumb {
    background: #c4dcce;
    border-radius: 8px;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: #a6cbb5;
  }
}

/* Brand selection color */
::selection {
  background: var(--pf-forest);
  color: #fff;
}

/* Accessible focus ring (keyboard users) */
:focus-visible {
  outline: 2px solid var(--pf-forest) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Prices & counters: stable width digits (Bengali numerals included) */
[class*="price"], [class*="Price"],
.text-2xl.font-extrabold, .text-xl.font-extrabold,
.font-extrabold span {
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────────
   2. BOTTOM NAVIGATION — safe area (iPhone notch)
   ─────────────────────────────────────────────── */
nav.fixed.bottom-0,
nav[class*="pb-safe"] {
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  border-top-color: rgba(78, 126, 90, .14);
}

/* ───────────────────────────────────────────────
   3. MOBILE CONTENT CLEARANCE
   Bottom nav + chat FAB zone must never cover CTAs.
   ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  body {
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ───────────────────────────────────────────────
   4. CHAT FAB — smaller & safe-area aware on mobile
   v3: :not(.inset-0) — the filter drawer is ALSO
   .fixed.z-[100]; the old 48px force collapsed it to a
   48×48 box (the "broken filter" bug). Only the floating
   launcher is sized here now.
   ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .fixed.z-\[100\]:not(.inset-0) {
    width: 48px !important;
    height: 48px !important;
    bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)) !important;
    right: 0.75rem !important;
    box-shadow: var(--pf-shadow-md);
  }
  .fixed.z-\[100\]:not(.inset-0) svg,
  .fixed.z-\[100\]:not(.inset-0) img {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ───────────────────────────────────────────────
   4b. v3 — CHAT LAUNCHER “X” BADGE
   The badge (–top-2 –left-2, opacity-100 md:opacity-0)
   is redundant (the FAB itself toggles open/close) and
   on mobile it floats over the button looking broken;
   on desktop it is invisible but still intercepts taps.
   Remove it everywhere.
   ─────────────────────────────────────────────── */
.fixed.z-\[100\]:not(.inset-0) button[class*="-top-2"][class*="-left-2"] {
  display: none !important;
}

/* Chat FAB: keep it above page content but below modals */
.fixed.z-\[100\]:not(.inset-0) {
  z-index: 96;
}

/* ───────────────────────────────────────────────
   4c. v3 — FULL-SCREEN OVERLAY GUARANTEE
   Any element declared .fixed.inset-0 (filter bottom-sheet,
   modals, lightboxes) must always cover the viewport.
   ─────────────────────────────────────────────── */
.fixed.inset-0 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
}

/* Chat bottom-sheet panel: never bleed past viewport edges */
.fixed.z-\[100\] .absolute[class*="rounded"] {
  max-width: calc(100vw - 1.5rem);
}

/* ───────────────────────────────────────────────
   5. HERO SLIDER — readability & contrast fix
   Dark scrim from the left + white title/subtitle
   ─────────────────────────────────────────────── */
.relative.overflow-hidden.rounded-2xl.sm\:rounded-\[3rem\]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      80deg,
      rgba(15, 32, 23, 0.82) 0%,
      rgba(15, 32, 23, 0.55) 34%,
      rgba(15, 32, 23, 0.18) 62%,
      rgba(15, 32, 23, 0) 82%
    ),
    linear-gradient(to top, rgba(15, 32, 23, 0.35), transparent 40%);
}

/* Title: forced white on any slide, guaranteed contrast */
.absolute.inset-0.flex.flex-col.justify-center h1,
.absolute.inset-0.flex.flex-col.justify-center h1 * {
  color: #ffffff !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Subtitle paragraph under the hero title */
.absolute.inset-0.flex.flex-col.justify-center p,
.absolute.inset-0.flex.flex-col.justify-center p * {
  color: #e9f3ec !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

/* Hero CTA buttons: reachable, never text-wrapped oddly */
.absolute.inset-0.flex.flex-col.justify-center a,
.absolute.inset-0.flex.flex-col.justify-center button {
  white-space: nowrap;
}

/* Hero primary CTA: honey hover hint — ties accent to the harvest world */
.absolute.inset-0.flex.flex-col.justify-center a:first-of-type,
.absolute.inset-0.flex.flex-col.justify-center button:first-of-type {
  transition: transform .25s var(--pf-ease), box-shadow .25s var(--pf-ease), background-color .25s var(--pf-ease);
}
@media (hover: hover) and (pointer: fine) {
  .absolute.inset-0.flex.flex-col.justify-center a:first-of-type:hover,
  .absolute.inset-0.flex.flex-col.justify-center button:first-of-type:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(16, 49, 43, .5);
  }
}

/* Slider dots: always visible on the darkened edge */
.absolute.bottom-7 {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* Hero: one orchestrated entrance (page-load moment, once, subtle) */
@media (prefers-reduced-motion: no-preference) {
  .relative.overflow-hidden.rounded-2xl.sm\:rounded-\[3rem\] .absolute.inset-0.flex.flex-col.justify-center > * {
    animation: pf-rise .5s var(--pf-ease) both;
  }
  .relative.overflow-hidden.rounded-2xl.sm\:rounded-\[3rem\] .absolute.inset-0.flex.flex-col.justify-center > *:nth-child(2) { animation-delay: .06s; }
  .relative.overflow-hidden.rounded-2xl.sm\:rounded-\[3rem\] .absolute.inset-0.flex.flex-col.justify-center > *:nth-child(3) { animation-delay: .12s; }
  .relative.overflow-hidden.rounded-2xl.sm\:rounded-\[3rem\] .absolute.inset-0.flex.flex-col.justify-center > *:nth-child(4) { animation-delay: .18s; }
  @keyframes pf-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ───────────────────────────────────────────────
   6. IMAGE CONSISTENCY
   ─────────────────────────────────────────────── */
/* Category tiles: perfect squares, no distortion */
img[src*="/images/cat_"],
img[src*="/images/gur"],
img[src*="/images/honey"],
img[src*="/images/dates"] {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f4f8f5;
}

/* Decorative watermarks never intercept clicks */
img[src*="/images/leaves"],
img[src*="/images/wheat"] {
  pointer-events: none;
  user-select: none;
}

/* Images decode async + lazy (progressive enhancement via JS adds attrs;
   CSS guarantees no layout jump either way) */
img {
  background-color: transparent;
  transition: opacity .4s var(--pf-ease);
}

/* Product & category image: gentle zoom on hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .group img[src*="cloudinary"],
  .group img[src*="/images/cat_"],
  .group img[src*="/images/gur"] {
    transition: transform .6s var(--pf-ease);
  }
  .group:hover img[src*="cloudinary"],
  .group:hover img[src*="/images/cat_"],
  .group:hover img[src*="/images/gur"] {
    transform: scale(1.045);
  }
}

/* ───────────────────────────────────────────────
   7. PRODUCT CARDS — uniform, readable, touchable
   ─────────────────────────────────────────────── */
/* Product name: max 2 lines, always same card height */
.grid .group h3,
.grid .group h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1em;
}

/* Card container: differentiated elevation (quiet → lifted) */
@media (hover: hover) and (pointer: fine) {
  .grid .group,
  [class*="rounded"] [class*="shadow-sm"] {
    transition: transform .3s var(--pf-ease), box-shadow .3s var(--pf-ease);
  }
  .grid .group:hover {
    transform: translateY(-3px);
    box-shadow: var(--pf-shadow-md);
  }
}

/* Small icon buttons (wishlist / quick-cart) get a
   comfortable touch target without visual change */
@media (hover: none) and (pointer: coarse) {
  .group button {
    min-width: 40px;
    min-height: 40px;
  }
}

/* Primary action buttons: consistent press feedback (touch + mouse) */
button:active, a:active {
  transition-duration: .08s;
}

/* Add-to-cart buttons inside product cards: honey-focus ring */
.grid .group button[class*="bg-"]:not([class*="bg-white"]):not([class*="bg-transparent"]) {
  transition: filter .2s var(--pf-ease), transform .2s var(--pf-ease);
}
.grid .group button[class*="bg-"]:active {
  transform: scale(.97);
}

/* Stock-out cards: clearly, gently muted */
.grid .group:has(button[disabled]) {
  opacity: .72;
  filter: saturate(.85);
}

/* v3 — Latin product names (“moriyom khejur”) get title case.
   Bengali script has no letter case, so this is a no-op for
   বাংলা titles — pure win for English-named products. */
.grid .group h3,
main h1 {
  text-transform: capitalize;
}

/* v3 — Prices keep Bengali numerals visually compact */
.grid .group h3 {
  letter-spacing: .01em;
}

/* ───────────────────────────────────────────────
   8. FORMS — prevent iOS auto-zoom on focus
   ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Input focus: brand-tinted ring (matches focus-visible) */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(78, 126, 90, .15);
  border-color: var(--pf-forest) !important;
}

/* ───────────────────────────────────────────────
   9. RESPONSIVE BREAKPOINTS — fine tuning
   ─────────────────────────────────────────────── */

/* ── Very small phones (≤ 360px): breathing room ── */
@media (max-width: 360px) {
  html {
    font-size: 15px; /* rem-based tailwind shrinks gracefully */
  }
  .grid.grid-cols-3 {
    gap: 0.6rem;
  }
  body {
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── Phones (≤ 419px): category text scale ── */
@media (max-width: 419px) {
  .grid.grid-cols-3 span {
    max-width: 100%;
  }
}

/* ── Tablet portrait / small tablet (640–1023px) ── */
@media (min-width: 640px) and (max-width: 1023px) {
  .grid.grid-cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .relative.overflow-hidden.rounded-2xl.sm\:rounded-\[3rem\]::after {
    background:
      linear-gradient(
        80deg,
        rgba(15, 32, 23, 0.72) 0%,
        rgba(15, 32, 23, 0.42) 40%,
        rgba(15, 32, 23, 0.06) 72%
      ),
      linear-gradient(to top, rgba(15, 32, 23, 0.3), transparent 36%);
  }
}

/* ── Desktop ≥ 1536px: elegant cap, no mega-stretch ── */
@media (min-width: 1536px) {
  .max-w-6xl {
    max-width: 76rem;
  }
}

/* ── Ultra-wide ≥ 1920px: center content block ── */
@media (min-width: 1920px) {
  body {
    background: #f6f8f6;
  }
  .min-h-screen.bg-white {
    max-width: 1920px;
    margin: 0 auto;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.06);
  }
}

/* ── Landscape phones (short height): compact header ── */
@media (max-height: 480px) and (orientation: landscape) {
  header.fixed {
    position: static !important;
  }
}

/* ───────────────────────────────────────────────
   10. ACCESSIBILITY — reduced motion
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────────────────────────────────────────────
   11. TOUCH SCROLL CONTAINERS (filter chips etc.)
   ─────────────────────────────────────────────── */
[class*="overflow-x-auto"] {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
[class*="overflow-x-auto"]::-webkit-scrollbar {
  display: none;
}

/* v3 — chat quick-question rows: wrap instead of a clipped
   single line. Scoped to the chat panel (JS adds .pf-chat-panel
   to the panel root when it detects the PureFood Assistant). */
.pf-chat-panel [class*="overflow-x-auto"] {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  gap: .45rem;
}
.pf-chat-panel [class*="overflow-x-auto"] > * {
  white-space: normal !important;
  text-overflow: unset !important;
}

/* v3 — chat panel: comfortable height on short screens.
   v4 — same guard now applies on DESKTOP too (short laptop
   windows were cutting the panel header off the top edge). */
.pf-chat-panel {
  max-height: calc(100dvh - 5.5rem) !important;
  overflow: hidden;
}
@media (max-width: 767px) {
  .pf-chat-panel {
    max-height: min(72vh, 560px) !important;
  }
}

/* ───────────────────────────────────────────────
   12. STICKY/FIXED HEADER — content never hides
   ─────────────────────────────────────────────── */
header.fixed {
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}

/* v4 — sticky bottom bars (cart/checkout totals): the app ships
   them near-transparent, so page content bleeds through and the
   totals look broken on busy sections. Nearly-opaque + hairline. */
.fixed.bottom-0[class*="backdrop-blur"] {
  background: rgba(255, 255, 255, .97) !important;
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 -6px 24px -12px rgba(16, 49, 43, .18);
}

/* ───────────────────────────────────────────────
   13. v2 — STUCK-LOADING RECOVERY HOOKS
   JS (purefood-enhance.js) marks recovered cards with
   [data-pf-loaded]; CSS instantly clears the loading veil.
   ─────────────────────────────────────────────── */
[data-pf-loaded] {
  filter: none !important;
  opacity: 1 !important;
}
[data-pf-loaded] > .absolute.inset-0[class*="bg-black"] {
  display: none !important;
}

/* Footer payment chips: crisp, aligned, never blown out */
footer img[src*="payment"], footer img[src*="icons8"] {
  height: 28px;
  width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 2px;
  box-shadow: var(--pf-shadow-sm);
}

/* ───────────────────────────────────────────────
   14. v2 — BACK-TO-TOP BUTTON (injected by enhance.js)
   v3: moved to the BOTTOM-LEFT corner. It used to sit
   exactly on top of the chat FAB (bottom-right), blocking
   taps on the chat open/close button on every page.
   ─────────────────────────────────────────────── */
/* ───────────────────────────────────────────────
   14. v5 — BACK-TO-TOP BUTTON REMOVED (user request).
   The bottom-left "↑" button no longer exists.
   Guard below keeps killing it if any stale cached
   enhance.js still injects it.
   ─────────────────────────────────────────────── */
#pf-backtop { display: none !important; }

/* ───────────────────────────────────────────────
   15. v2 — PRINT: receipts/orders print clean
   ─────────────────────────────────────────────── */
@media print {
  nav.fixed.bottom-0,
  #pf-backtop,
  #pf-progress,
  .pf-steps,
  .fixed.z-\[100\] {
    display: none !important;
  }
  body {
    padding-bottom: 0 !important;
    background: #fff !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v4.0 — PREMIUM MOTION SYSTEM
   Everything below is progressive enhancement: content stays usable
   if JS or CSS fails. All animation respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   16. MOTION TOKENS + KEYFRAMES
   ─────────────────────────────────────────────── */
:root {
  --pf-ease-out: cubic-bezier(.16, 1, .3, 1);
  --pf-ease-io: cubic-bezier(.65, 0, .35, 1);
  --pf-back: cubic-bezier(.34, 1.56, .64, 1);
  --pf-spin-ease: cubic-bezier(.55, .16, .34, .86);
  --pf-glow-green: rgba(78, 126, 90, .38);
  --pf-glow-honey: rgba(223, 145, 44, .35);
}

@keyframes pf-rotate { to { transform: rotate(360deg); } }
@keyframes pf-spin-premium {
  0%   { transform: rotate(0deg)   scale(1); }
  60%  { transform: rotate(295deg) scale(1.07); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes pf-orb-breathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.12); opacity: .82; }
}
@keyframes pf-dots-bounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: .55; }
  40%           { transform: translateY(-3px); opacity: 1; }
}
@keyframes pf-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
@keyframes pf-shine {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  55%, 100% { transform: translateX(230%) skewX(-18deg); }
}
@keyframes pf-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pf-img-in {
  from { opacity: 0; filter: saturate(.6); }
  to   { opacity: 1; filter: saturate(1); }
}
@keyframes pf-fade-app { from { opacity: .4; } to { opacity: 1; } }
@keyframes pf-halo {
  0%   { transform: scale(1);    opacity: .7; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
@keyframes pf-step-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--pf-glow-green); }
  50%      { box-shadow: 0 0 0 7px rgba(78, 126, 90, 0); }
}
@keyframes pf-check-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes pf-bar-grow { from { width: 0; } }

/* ───────────────────────────────────────────────
   17. PREMIUM SPINNERS (replaces plain circular feel)
   a) Every Tailwind spinner gets weighted, variable-speed
      rotation + brand glow — the "Apple wheel" feel.
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .animate-spin {
    animation: pf-spin-premium 1.1s var(--pf-spin-ease) infinite !important;
    filter: drop-shadow(0 0 5px var(--pf-glow-green));
  }
}

/* b) Submitting BUTTONS: spinner → three bouncing brand dots */
button.pf-loading > .animate-spin { display: none !important; }
button.pf-loading {
  position: relative;
  pointer-events: none;
  opacity: .92;
}
button.pf-loading::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 6px;
  background-image:
    radial-gradient(circle 3px at 50% 50%, currentColor 97%, transparent),
    radial-gradient(circle 3px at 50% 50%, currentColor 97%, transparent),
    radial-gradient(circle 3px at 50% 50%, currentColor 97%, transparent);
  background-size: 6px 6px;
  background-position: 0 50%, 10px 50%, 20px 50%;
  background-repeat: no-repeat;
  animation: pf-dots-bounce 1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  button.pf-loading::after { animation: none; opacity: .8; }
}

/* c) Standalone PAGE loaders: spinner → breathing gradient orb.
   JS tags the loader container .pf-page-loading. The orb is a
   masked conic-gradient ring — a gradient "arc", not a flat circle. */
.pf-page-loading > .animate-spin,
.pf-page-loading svg[class*="animate-spin"] { display: none !important; }
.pf-page-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; }
.pf-page-loading::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--pf-forest) 0deg,
    #9fd8b0 120deg,
    var(--pf-honey) 220deg,
    transparent 300deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px));
  animation: pf-rotate .9s linear infinite, pf-orb-breathe 2.1s ease-in-out infinite;
  filter: drop-shadow(0 2px 10px var(--pf-glow-green));
}
.pf-page-loading > * { margin: 0 !important; }
.pf-page-loading > span,
.pf-page-loading > p {
  color: var(--pf-forest-deep, #3d6347);
  font-weight: 600;
  letter-spacing: .02em;
}

/* d) Skeleton shimmer blocks (JS injects .pf-skel while grids load) */
.pf-skel {
  border-radius: 18px;
  background:
    linear-gradient(100deg, #eef2ef 38%, #f9fbf9 50%, #eef2ef 62%);
  background-size: 200% 100%;
  animation: pf-shimmer 1.5s linear infinite;
}
.pf-skel * { visibility: hidden; }

/* ───────────────────────────────────────────────
   18. TOP PROGRESS BAR (route + lazy-chunk loading)
   Injected by enhance.js — brand gradient with glow.
   ─────────────────────────────────────────────── */
#pf-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 9999;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--pf-forest) 0%, #7fc492 60%, var(--pf-honey) 100%);
  box-shadow: 0 0 12px var(--pf-glow-green), 0 1px 4px rgba(16, 49, 43, .3);
  opacity: 0;
  pointer-events: none;
  transition: width .35s var(--pf-ease-out), opacity .45s var(--pf-ease);
}
#pf-progress[data-state="run"] { opacity: 1; }

/* ───────────────────────────────────────────────
   19. ROUTE TRANSITION (opacity only — transforms are
   forbidden on app containers: they would break the
   fixed header / bottom nav positioning).
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  body.pf-nav #root { animation: pf-fade-app .38s var(--pf-ease); }
}

/* ───────────────────────────────────────────────
   20. SCROLL REVEAL (JS adds .pf-reveal, then .pf-in
   when the element enters the viewport; stagger via
   --pf-d custom property). Grid children & cards only —
   never containers with fixed/sticky descendants.
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .pf-reveal {
    opacity: 0;
    transform: translateY(16px) scale(.985);
    will-change: opacity, transform;
  }
  .pf-reveal.pf-in {
    animation: pf-fade-up .6s var(--pf-ease-out) both;
    animation-delay: var(--pf-d, 0ms);
  }
  /* Images fade in softly the moment they decode */
  img.pf-img-in { animation: pf-img-in .55s var(--pf-ease) both; }
}

/* ───────────────────────────────────────────────
   21. CHECKOUT STEPPER (injected by enhance.js on
   /checkout — animated shipment→payment→confirmation)
   ─────────────────────────────────────────────── */
.pf-steps {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 auto 1.1rem;
  padding: .8rem 1rem;
  max-width: 420px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(78, 126, 90, .16);
  box-shadow: var(--pf-shadow-sm);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pf-step { display: flex; align-items: center; gap: .45rem; flex-shrink: 0; }
.pf-step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  background: #eef2ef;
  color: #9aa8a0;
  border: 2px solid #e3eae5;
  transition: all .35s var(--pf-ease-out);
}
.pf-step[data-state="active"] .pf-step-dot {
  background: linear-gradient(135deg, var(--pf-forest), var(--pf-forest-deep));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 5px rgba(78, 126, 90, .14), var(--pf-shadow-sm);
  animation: pf-step-glow 2.2s ease-out infinite;
}
.pf-step[data-state="done"] .pf-step-dot {
  background: var(--pf-forest);
  border-color: transparent;
  color: #fff;
}
.pf-step[data-state="done"] .pf-step-dot svg { animation: pf-check-pop .45s var(--pf-back) both; }
.pf-step-label {
  font-size: 11px;
  font-weight: 700;
  color: #9aa8a0;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: color .3s;
}
.pf-step[data-state="active"] .pf-step-label,
.pf-step[data-state="done"] .pf-step-label { color: var(--pf-forest-deep, #3d6347); }
@media (max-width: 400px) { .pf-step-label { display: none; } }
.pf-step-line {
  flex: 1;
  height: 2px;
  min-width: 14px;
  border-radius: 2px;
  background: #e3eae5;
  position: relative;
  overflow: hidden;
}
.pf-step-line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--pf-fill, 0%);
  background: linear-gradient(90deg, var(--pf-forest), #7fc492);
  border-radius: inherit;
  transition: width .5s var(--pf-ease-out);
}
.pf-steps[data-n="3"] .pf-step-line[data-done="1"]::after { --pf-fill: 100%; }

/* ───────────────────────────────────────────────
   22. PROGRESS BARS — cart/checkout free-delivery bar
   gets a travelling shine; width changes animate.
   ─────────────────────────────────────────────── */
.pf-progress { position: relative; overflow: hidden; }
.pf-progress > div,
.pf-progress {
  transition: width .7s var(--pf-ease-out) !important;
}
.pf-progress::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: pf-shine 1.9s var(--pf-ease-io) infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .pf-progress::after { animation: none; display: none; } }

/* ───────────────────────────────────────────────
   23. PRICE / DISCOUNT — badge shine sweep + savings pop
   ─────────────────────────────────────────────── */
.group [class*="from-rose-500"] {
  position: relative;
  overflow: hidden;
}
.group [class*="from-rose-500"]::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(-140%) skewX(-18deg);
  animation: pf-shine 3.2s var(--pf-ease-io) infinite;
  animation-delay: 1s;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .group [class*="from-rose-500"]::after { display: none; }
}
/* Savings line (“সাশ্রয় ৳৭০০”): honey accent, gentle emphasis */
[class*="bg-green"], [class*="text-green"], [class*="text-emerald"] { letter-spacing: .005em; }

/* ───────────────────────────────────────────────
   24. PRODUCT DETAIL — gallery & review polish
   ─────────────────────────────────────────────── */
/* Thumbnail interaction: smooth ring + lift */
main img[class*="rounded-xl"] {
  transition: transform .3s var(--pf-ease), box-shadow .3s var(--pf-ease), border-radius .3s;
}
@media (hover: hover) and (pointer: fine) {
  main img[class*="rounded-xl"]:hover { transform: translateY(-2px) scale(1.03); }
}
/* Selected thumb: breathing ring */
main img[class*="ring-2"][class*="ring-primary"] { animation: pf-step-glow 2.4s ease-out infinite; }

/* Review list cards: consistent rhythm */
[class*="rounded-2xl"] [class*="border-b"]:last-child { border-bottom: 0; }

/* “মূল্যের বিবরণ” summary card: softer separators */
main .divide-y > * + * { transition: background .25s; }
@media (hover: hover) { main .divide-y > * + *:hover { background: rgba(244, 248, 245, .5); } }

/* ───────────────────────────────────────────────
   25. TRACK ORDER — active timeline step breathes
   (signature from the framer-motion timeline markup)
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .scale-110.ring-primary\/15 { animation: pf-step-glow 2.2s ease-out infinite; }
  .scale-125.ring-primary\/20 { animation: pf-step-glow 2.2s ease-out infinite; }
}

/* ───────────────────────────────────────────────
   26. FLOATING CHAT — premium open + launcher halo
   ─────────────────────────────────────────────── */
/* Launcher-only halo (the launcher is the dark BUTTON inside the
   floating wrapper; the open panel wrapper is a DIV — so this
   never hits the panel) */
@media (prefers-reduced-motion: no-preference) {
  div.fixed.z-\[100\] button[class*="bg-primary-dark"] {
    position: relative;
    transition: transform .3s var(--pf-back), box-shadow .3s var(--pf-ease) !important;
  }
  div.fixed.z-\[100\] button[class*="bg-primary-dark"]::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid rgba(78, 126, 90, .4);
    animation: pf-halo 2.8s var(--pf-ease-out) infinite;
    pointer-events: none;
  }
  div.fixed.z-\[100\] button[class*="bg-primary-dark"]:hover { transform: translateY(-2px) scale(1.05); }
  div.fixed.z-\[100\] button[class*="bg-primary-dark"]:active { transform: scale(.94); }
}
/* Assistant panel entrance */
@media (prefers-reduced-motion: no-preference) {
  .pf-chat-panel { animation: pf-chat-in .5s var(--pf-back) both; }
  @keyframes pf-chat-in {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* ───────────────────────────────────────────────
   27. TOASTS — generic premium slide for common
   React toast portals (safe: opacity/transform only)
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  [data-sonner-toast] { animation-timing-function: var(--pf-back) !important; }
}

/* ───────────────────────────────────────────────
   28. GLOBAL BUTTON PRESS MICRO-INTERACTION
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  button:not([disabled]):not(#pf-backtop):active { transform: scale(.965); }
}

/* ═══════════════════════════════════════════════════════════════════
   v5.0 — PREMIUM SECTION SYSTEM (hero · products · details · reviews
   · image viewer). Design language: harvest-green + honey-amber,
   one bold moment per view, calm everywhere else.
   All motion guarded by prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   29. v5 MOTION TOKENS (new keyframes only)
   ─────────────────────────────────────────────── */
@keyframes pf-kenburns {
  0%   { transform: scale(1)    translate(0, 0); }
  50%  { transform: scale(1.07) translate(-1.2%, -1%); }
  100% { transform: scale(1.12) translate(1%, -0.5%); }
}
@keyframes pf-float-orb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .55; }
  50%      { transform: translate3d(6px, -14px, 0) scale(1.08); opacity: .85; }
}
@keyframes pf-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
  60%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}
@keyframes pf-glow-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(223, 145, 44, .30); }
  55%      { box-shadow: 0 0 0 8px rgba(223, 145, 44, 0); }
}
@keyframes pf-stock-pulse {
  0%   { transform: scale(.9); opacity: .75; }
  60%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes pf-lbx-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pf-lbx-zoom {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ───────────────────────────────────────────────
   30. HERO — cinematic premium (the one bold moment)
   ─────────────────────────────────────────────── */
/* 30.1 Richer cinematic scrim: deeper at copy side, warm honey kiss
        at the light side so the photo stays the hero of the hero */
.relative.overflow-hidden.rounded-2xl.sm\:rounded-\[3rem\]::after {
  background:
    radial-gradient(58% 68% at 78% 28%, rgba(223, 145, 44, 0.14), transparent 60%),
    linear-gradient(
      80deg,
      rgba(10, 26, 18, 0.88) 0%,
      rgba(10, 26, 18, 0.62) 30%,
      rgba(10, 26, 18, 0.22) 58%,
      rgba(10, 26, 18, 0) 78%
    ),
    linear-gradient(to top, rgba(10, 26, 18, 0.42), transparent 42%);
}

/* 30.2 Ken Burns slow drift on the active slide photo */
@media (prefers-reduced-motion: no-preference) {
  .relative.overflow-hidden.rounded-2xl.sm\:rounded-\[3rem\]
    div[class*="absolute"] > img.w-full.h-full.object-cover {
    animation: pf-kenburns 26s var(--pf-ease-io) infinite alternate;
    will-change: transform;
  }
}

/* 30.3 Premium glass badge — floating chip with honey ring */
.absolute.inset-0.flex .max-w-xl > div:first-child,
.absolute.inset-0.flex .max-w-xl > div.inline-flex:first-child {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-radius: 9999px !important;
  padding: 0.5rem 1rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
              0 8px 24px -8px rgba(0, 0, 0, 0.45) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .absolute.inset-0.flex .max-w-xl > div:first-child svg {
    animation: pf-glow-soft 3.2s ease-in-out infinite;
    border-radius: 9999px;
  }
}

/* 30.4 Hero headline: display scale + balanced lines + honey
        underline accent drawn under the last words */
.absolute.inset-0.flex .max-w-xl h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.4rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance !important;
  font-weight: 800 !important;
}
.absolute.inset-0.flex .max-w-xl h1::after {
  content: "";
  display: block;
  width: 74px;
  height: 4px;
  margin-top: 0.85rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, #df912c, rgba(223, 145, 44, 0.15));
  box-shadow: 0 2px 12px rgba(223, 145, 44, 0.55);
}

/* 30.5 Subtitle: airy, slightly larger */
.absolute.inset-0.flex .max-w-xl p {
  font-size: clamp(0.95rem, 1.6vw, 1.12rem) !important;
  letter-spacing: 0.005em;
  opacity: 0.94;
}

/* 30.6 CTAs: primary = gradient + resting shine; secondary = glass */
.absolute.inset-0.flex .max-w-xl .flex.flex-wrap a:first-child {
  background-image: linear-gradient(135deg, #2e6b4f 0%, #4e7e5a 55%, #3d6347 100%) !important;
  box-shadow: 0 14px 30px -10px rgba(16, 49, 43, 0.65),
              inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  position: relative;
  overflow: hidden;
}
.absolute.inset-0.flex .max-w-xl .flex.flex-wrap a:first-child::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: pf-shine 4.4s var(--pf-ease-io) infinite;
  animation-delay: 1.4s;
  pointer-events: none;
}
.absolute.inset-0.flex .max-w-xl .flex.flex-wrap a:last-child {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.5) !important;
}
@media (hover: hover) and (pointer: fine) {
  .absolute.inset-0.flex .max-w-xl .flex.flex-wrap a:first-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -12px rgba(16, 49, 43, 0.7) !important;
  }
  .absolute.inset-0.flex .max-w-xl .flex.flex-wrap a:last-child:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-2px);
  }
}

/* 30.7 Slider dots: active dot = elongated pill with pulse */
.absolute.bottom-7 button {
  border-radius: 9999px !important;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .absolute.bottom-7 button .absolute.inset-0.bg-primary {
    animation: pf-dot-pulse 2.6s ease-out infinite;
  }
}

/* 30.8 Floating honey orbs — quiet depth behind the copy */
@media (prefers-reduced-motion: no-preference) {
  .relative.overflow-hidden.rounded-2xl.sm\:rounded-\[3rem\]::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 8%;
    bottom: 18%;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%,
                rgba(255, 205, 112, 0.5), rgba(223, 145, 44, 0.16) 55%, transparent 72%);
    filter: blur(2px);
    animation: pf-float-orb 9s ease-in-out infinite;
    pointer-events: none;
  }
}

/* ───────────────────────────────────────────────
   31. PRODUCT CARDS — shelf-ready premium
   ─────────────────────────────────────────────── */
/* 31.1 Card shell: softer radius, layered shadow, hover lift */
.grid .group,
main .grid > a .group {
  border-radius: 1.35rem;
}
@media (hover: hover) and (pointer: fine) {
  .grid .group:hover {
    transform: translateY(-4px);
  }
  .grid .group {
    transition: transform .45s var(--pf-ease), box-shadow .45s var(--pf-ease);
  }
}

/* 31.2 Image frame: rounded inner + bottom veil kept subtle */
.grid .group img[src*="cloudinary"] {
  border-radius: 1.1rem 1.1rem 0 0;
}

/* 31.3 Discount badge: premium pill — deeper gradient, gloss line */
.grid .group .bg-gradient-to-r.from-rose-500 {
  border-radius: 9999px !important;
  padding: 0.34rem 0.72rem !important;
  box-shadow: 0 6px 16px -4px rgba(225, 29, 72, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  font-weight: 800 !important;
}

/* 31.4 Quick actions (heart / cart): crisper glass chips */
.grid .group .absolute.top-3 button {
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.28) !important;
  transition: transform .3s var(--pf-back), background .25s, box-shadow .3s !important;
}
@media (hover: hover) and (pointer: fine) {
  .grid .group .absolute.top-3 button:hover {
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.38) !important;
  }
}

/* 31.5 Category chip: premium mini-tag with brand dot */
.grid .group .absolute.bottom-3 span.bg-white\/95 {
  border-radius: 9999px !important;
  padding: 0.3rem 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px -3px rgba(15, 23, 42, 0.3) !important;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* 31.6 Price row: strike price smaller & lighter, price deeper */
.grid .group div.flex.items-end.justify-between span.text-\[11\.5px\] {
  font-size: 10.5px !important;
  opacity: 0.72;
}
.grid .group div.flex.items-end.justify-between span.text-\[19px\],
.grid .group div.flex.items-end.justify-between span[class*="font-extrabold"] {
  color: #14432f !important;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* 31.7 Savings chip (JS injects .pf-save under the price) */
.pf-save {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  margin-top: 0.3rem;
  padding: 0.16rem 0.55rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(223, 145, 44, 0.14), rgba(223, 145, 44, 0.05));
  border: 1px solid rgba(223, 145, 44, 0.28);
  color: #9a5b13;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  animation: pf-save-pop .5s var(--pf-back) both;
}
@keyframes pf-save-pop {
  from { opacity: 0; transform: translateY(4px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 31.8 Out-of-stock: graceful veil + ribbon styling */
.grid .group .absolute.inset-0.bg-black\/40 {
  -webkit-backdrop-filter: grayscale(1) blur(1.5px);
  backdrop-filter: grayscale(1) blur(1.5px);
  background: rgba(248, 250, 249, 0.45) !important;
}
.grid .group .absolute.inset-0.bg-black\/40 span {
  border-radius: 9999px !important;
  padding: 0.4rem 0.9rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 31.9 Card magnifier chip (JS injects .pf-peek on the image) */
.pf-peek {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  z-index: 12;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: #14432f;
  box-shadow: 0 6px 16px -5px rgba(15, 23, 42, 0.35);
  cursor: zoom-in;
  opacity: 0;
  transform: translateY(6px) scale(.92);
  transition: opacity .28s var(--pf-ease), transform .28s var(--pf-back);
  pointer-events: auto;
}
@media (hover: none) {
  .pf-peek { opacity: 0.92; transform: none; width: 30px; height: 30px; }
}
.grid .group:hover .pf-peek,
.pf-peek:focus-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pf-peek:hover { background: #14432f; color: #fff; }
.pf-peek:active { transform: scale(.9); }

/* 31.10 Related-products rail: horizontal snap + card size guard */
main .flex.gap-4.overflow-x-auto {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}
main .flex.gap-4.overflow-x-auto > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* 31.11 FIX: related-card badge must never sit on the heart button */
.grid .group .absolute.top-3.left-3,
[class*="lg:col-span-5"] .group .absolute.top-3.left-3 {
  z-index: 11;
  max-width: calc(100% - 6.6rem);
}
.grid .group .absolute.top-3.left-3 .bg-gradient-to-r.from-rose-500 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ───────────────────────────────────────────────
   32. PRODUCT DETAIL — gallery-grade buy panel
   ─────────────────────────────────────────────── */
/* 32.1 Gallery frame: deep soft shadow + inner hairline */
main div.rounded-\[2\.5rem\].overflow-hidden {
  box-shadow: 0 30px 60px -28px rgba(16, 49, 43, 0.28),
              0 2px 6px rgba(16, 49, 43, 0.05);
}
main div.rounded-\[2\.5rem\].overflow-hidden img {
  cursor: zoom-in;
}

/* 32.2 Zoom control stack: glass capsule */
main div.rounded-\[2\.5rem\] .absolute.top-4.right-4 {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 0.18rem;
  box-shadow: 0 8px 22px -8px rgba(15, 23, 42, 0.35),
              inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}
main div.rounded-\[2\.5rem\] .absolute.top-4.right-4 button {
  border-radius: 11px;
  transition: background .22s, transform .22s var(--pf-back);
}
main div.rounded-\[2\.5rem\] .absolute.top-4.right-4 button:hover {
  background: rgba(20, 67, 47, 0.09);
  transform: scale(1.06);
}

/* 32.3 "ছবিতে ক্লিক করুন" hint chip (JS injects .pf-zoom-hint) */
.pf-zoom-hint {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.8rem;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--pf-ease);
  white-space: nowrap;
}
main div.rounded-\[2\.5rem\]:hover .pf-zoom-hint { opacity: 1; }
@media (hover: none) {
  .pf-zoom-hint { opacity: 0.85; }
  main div.rounded-\[2\.5rem\]:hover .pf-zoom-hint { opacity: 0.85; }
}

/* 32.4 Title + price block: display hierarchy */
main h1.text-3xl.md\:text-5xl {
  text-wrap: balance;
  letter-spacing: -0.03em !important;
}
main span[class*="text-4xl"][class*="font-black"] {
  color: #123c2a !important;
  letter-spacing: -0.035em !important;
  font-variant-numeric: tabular-nums;
}

/* 32.5 Savings pill ("সাশ্রয় ৳১২০") → honey gradient chip */
main .flex.flex-col.gap-1 .bg-primary-900,
main div.flex.flex-col.gap-1 span[class*="rounded-full"][class*="text-xs"] {
  box-shadow: 0 6px 16px -6px rgba(16, 49, 43, 0.5);
}

/* 32.6 Special-offer line: keep the check, add soft chip feel */
main .flex.items-center[class*="text-primary"] svg { flex: 0 0 auto; }

/* 32.7 Stock chip: live dot pulse */
main span[class*="bg-green-50"],
main span[class*="bg-emerald-50"] {
  border: 1px solid rgba(22, 163, 74, 0.16);
  position: relative;
}
main span[class*="bg-green-50"] .w-1\.5\.h-1\.5::before,
main span[class*="bg-emerald-50"] .w-1\.5\.h-1\.5 {
  position: relative;
}
@media (prefers-reduced-motion: no-preference) {
  main span[class*="bg-green-50"] span.rounded-full,
  main span[class*="bg-emerald-50"] span.rounded-full {
    position: relative;
  }
  main span[class*="bg-green-50"] span.rounded-full::after,
  main span[class*="bg-emerald-50"] span.rounded-full::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 9999px;
    border: 1.5px solid rgba(34, 197, 94, 0.6);
    animation: pf-stock-pulse 2.2s ease-out infinite;
  }
}

/* 32.8 Order summary card: premium ledger */
main .divide-y {
  border-radius: 1.4rem;
}
main .divide-y > div:last-child,
main .divide-y > *:last-child {
  font-variant-numeric: tabular-nums;
}

/* 32.9 Buy row buttons: magnetic press + shadow depth */
main button.w-full[class*="rounded"],
main .flex.flex-wrap button[class*="rounded-2xl"],
main .flex.items-center button[class*="rounded"] {
  transition: transform .3s var(--pf-back), box-shadow .3s var(--pf-ease),
              background-color .25s !important;
}
@media (hover: hover) and (pointer: fine) {
  main button.w-full[class*="rounded"]:hover {
    box-shadow: 0 14px 30px -12px rgba(16, 49, 43, 0.55);
  }
}

/* 32.10 Tabs (বিবরণ / রিভিউ): active pill glows, inactive lifts */
main button[class*="px-6"][class*="py-3"][class*="rounded-[14px]"] {
  transition: color .3s, background .3s, box-shadow .3s, transform .3s var(--pf-back) !important;
}
main button[class*="px-6"][class*="py-3"][class*="rounded-[14px]"]:not([class*="text-slate-400"]):hover {
  transform: translateY(-1px);
}

/* ───────────────────────────────────────────────
   33. REVIEWS — premium social proof
   ─────────────────────────────────────────────── */
/* 33.1 Empty state & login cards (structural polish) */
main .rounded-3xl {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(244, 248, 245, 0.5));
}
/* "লগইন করুন" button: brand gradient + glow */
main .rounded-3xl button,
main .rounded-3xl a {
  transition: transform .3s var(--pf-back), box-shadow .3s var(--pf-ease) !important;
}
main .rounded-3xl button:hover,
main .rounded-3xl a:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(78, 126, 90, 0.55);
}
/* Star icon chip in the review header */
main .rounded-3xl .bg-primary-900,
main .rounded-3xl div[class*="bg-primary"] {
  box-shadow: 0 8px 20px -8px rgba(16, 49, 43, 0.55);
}

/* 33.2 Review list item cards (when reviews exist) */
main [class*="border-b"] .flex-1 {
  min-width: 0;
}
/* Reviewer avatar fallback circle: brand tint */
main [class*="rounded-full"][class*="bg-primary-50"],
main [class*="rounded-full"][class*="bg-primary"] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

/* 33.3 Star rows: consistent golden tone everywhere */
main svg[class*="fill-amber"],
main svg[class*="text-amber"] { color: #e8a020; }
main svg.lucide-star { flex: 0 0 auto; }

/* ───────────────────────────────────────────────
   34. PREMIUM IMAGE VIEWER (lightbox injected by JS)
   ─────────────────────────────────────────────── */
#pf-lbx {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  background: rgba(8, 15, 12, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  animation: pf-lbx-in .28s var(--pf-ease) both;
  touch-action: none;
}
#pf-lbx[hidden] { display: none; }
#pf-lbx .pf-lbx-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}
#pf-lbx img.pf-lbx-img {
  max-width: min(92vw, 1100px);
  max-height: 82vh;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  animation: pf-lbx-zoom .34s var(--pf-back) both;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .25s var(--pf-ease);
  cursor: zoom-in;
}
#pf-lbx.pf-zoomed img.pf-lbx-img { cursor: grab; }
#pf-lbx.pf-dragging img.pf-lbx-img { cursor: grabbing; transition: none; }

#pf-lbx .pf-lbx-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(0.9rem + env(safe-area-inset-top, 0px)) 1.1rem 0.9rem;
  z-index: 3;
}
#pf-lbx .pf-lbx-count {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
}
#pf-lbx .pf-lbx-actions { display: flex; gap: 0.5rem; }
#pf-lbx .pf-lbx-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: background .22s, transform .22s var(--pf-back);
}
#pf-lbx .pf-lbx-btn:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
#pf-lbx .pf-lbx-btn:active { transform: scale(.92); }
#pf-lbx .pf-lbx-btn:focus-visible {
  outline: 2px solid #df912c;
  outline-offset: 2px;
}

#pf-lbx .pf-lbx-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .22s, transform .22s var(--pf-back);
}
#pf-lbx .pf-lbx-nav:hover { background: rgba(255, 255, 255, 0.24); }
#pf-lbx .pf-lbx-nav:active { transform: translateY(-50%) scale(.9); }
#pf-lbx .pf-lbx-prev { left: max(0.9rem, env(safe-area-inset-left, 0px)); }
#pf-lbx .pf-lbx-next { right: max(0.9rem, env(safe-area-inset-right, 0px)); }
@media (max-width: 640px) {
  #pf-lbx .pf-lbx-nav { width: 38px; height: 38px; top: auto; bottom: 12vh; transform: none; }
  #pf-lbx .pf-lbx-nav:active { transform: scale(.9); }
  #pf-lbx .pf-lbx-prev { left: 22vw; }
  #pf-lbx .pf-lbx-next { right: 22vw; }
}
#pf-lbx .pf-lbx-nav[disabled],
#pf-lbx .pf-lbx-btn[disabled] { opacity: .35; pointer-events: none; }

#pf-lbx .pf-lbx-thumbs {
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  padding: 0.8rem calc(0.9rem + env(safe-area-inset-bottom, 0px)) calc(0.9rem + env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
  scrollbar-width: none;
}
#pf-lbx .pf-lbx-thumbs::-webkit-scrollbar { display: none; }
#pf-lbx .pf-lbx-thumbs img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  opacity: 0.45;
  border: 2px solid transparent;
  transition: opacity .25s, border-color .25s, transform .25s var(--pf-back);
  flex: 0 0 auto;
}
#pf-lbx .pf-lbx-thumbs img:hover { opacity: 0.8; transform: translateY(-2px); }
#pf-lbx .pf-lbx-thumbs img.pf-active {
  opacity: 1;
  border-color: #df912c;
  transform: translateY(-2px);
}

/* ───────────────────────────────────────────────
   35. v5 — SECTION HEADERS + small accents
   ─────────────────────────────────────────────── */
/* Category/product section titles get a honey underline glow */
main h2 {
  text-wrap: balance;
}
@media (prefers-reduced-motion: no-preference) {
  .pf-reveal { transition-delay: 0ms; }
}

/* Focus visibility floor for keyboard users (quality bar) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #df912c !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}

/* 34.1 v5.1 — lightbox micro-fixes: hide empty counter pill,
       calmer focus (ring stays for keyboard users via :focus-visible
       only, programmatic focus on container shows nothing) */
#pf-lbx .pf-lbx-count:empty { display: none; }
#pf-lbx .pf-lbx-btn:focus,
#pf-lbx .pf-lbx-nav:focus { outline: none; }
#pf-lbx .pf-lbx-btn:focus-visible,
#pf-lbx .pf-lbx-nav:focus-visible {
  outline: 2px solid #df912c;
  outline-offset: 2px;
}
#pf-lbx:focus { outline: none; }
#pf-lbx .pf-lbx-actions { margin-left: auto; }
#pf-lbx .pf-lbx-nav[disabled] { display: none; }