/* ===========================================================================
   CraftBox.ge — Mobile Override Layer
   ----------------------------------------------------------------------------
   Loaded by `index.html` after the main stylesheet. ALL rules wrapped in
   @media (max-width: 767px) so desktop and tablet (768px+) get the original
   design with zero modification.

   Strategy: per user direction — mobile must mirror the desktop layout and
   keep ALL desktop animations. We only resize, reposition, and re-flow
   elements that were sized for a 1440px viewport but render off-screen or
   broken at 375px.

   🔒 Locks honoured:
   - Review cards (.reviewCard, .reviewWrap) — only the OUTER container is
     scaled so the existing animation keeps working. Card internal sizing,
     spacing, content, and the rotation/translate animation are not touched.
   - Fonts — Manrope/Roundo/Akina/Hakuna only. No new font-family rules here.
   - All sections, classes, IDs are preserved — we only override visual
     properties via the cascade.
   ============================================================================ */

@media (max-width: 767px) {

  /* ------------------------------------------------------------------------
     1. GLOBAL — page sizing safety
     ------------------------------------------------------------------------
     `overflow-x: clip` (NOT `hidden`) so position:sticky inside the page
     keeps working — the reviews section + welcome zone both depend on
     sticky positioning. `hidden` triggers an implicit scrollport that
     breaks sticky context in WebKit/Blink. */

  html, body {
    overflow-x: clip !important;
  }

  /* Tighter container side padding on mobile so content fills the screen */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ------------------------------------------------------------------------
     2. HERO SECTION
     ------------------------------------------------------------------------
     Problem: the zoom section's oblak1.webp has z-2 and mt-[-150px] on
     max-md, which makes it visually overlap the hero bag from above.
     The bag div has no z-index so it sits BEHIND the cloud.

     Fix A: Push the hero bag divs above the cloud (z-3 beats z-2).
     Fix B: Pull the zoom cloud's negative top margin down on mobile so it
            doesn't reach INTO the hero section.
     Fix C: Hero text sizing tuned for 375px viewport. */

  /* Hero section — title must clear the fixed header. Header is ~70px
     tall on mobile, so push hero padding-top to ~15vh so the heading
     sits visibly below the header bar. */
  #hero {
    padding-top: 15vh !important;
  }

  /* Inner column — no negative margin pull */
  #hero > div.flex.flex-col {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* CRAFTBOX heading — large but contained */
  #hero .heading,
  #hero h1.heading-1 {
    font-size: clamp(2.8rem, 12vw, 4.5rem) !important;
    line-height: 1.05 !important;
  }

  #hero .word {
    font-size: inherit !important;
  }

  /* Hero bag — the background-image div. Give it a stacking context ABOVE
     the zoom cloud (which is z-2). z-3 keeps the bag on top on mobile. */
  section.relative.h-screen .absolute.inset-0.flex.items-end.justify-center {
    z-index: 3 !important;
  }

  /* Bag image div — also raise it so nothing overlaps it */
  section.relative.h-screen .absolute.h-screen.w-292,
  section.h-screen .absolute.h-screen.w-292 {
    width: 110vw !important;
    left: 50% !important;
    margin-left: -55vw !important;
    background-size: contain !important;
    background-position: bottom center !important;
    z-index: 3 !important;
  }

  /* Second bag div at the bottom of the inset-0 flex container.
     Same fix — needs to be above the cloud. */
  section.relative.h-screen .absolute.inset-0.flex > div:last-of-type.absolute.h-screen {
    z-index: 3 !important;
  }

  /* Both bag halves — back (kesazadnja) AND front (kesaprednja) — must
     stay perfectly aligned (the front sits ON TOP of the back at the same
     coordinates and same size, like a 2-layer sticker). User: "kesaprednja
     ზუსტად უნდა იჯდეს kesazadnja წინ იგივე ზომებში იგივე ადგილას".

     Each bag carries an inline `transform: translateY(calc(300px - 30vh))`
     set by JS at load. We use `top: -3vh` here instead of overriding the
     transform so we don't break any scroll-driven animation that may
     update the transform later — `top` and `transform` are independent
     vectors and compose additively for an absolute-positioned element.

     Applying the same `top: -3vh` to both selectors guarantees the two
     layers stay in lockstep.
     User: "მობილურის ვერსიებზე ცოტა ავწიოთ ზევით 3%-ით". */
  .absolute.h-screen.w-292[class*="kesazadnja"],
  .absolute.h-screen.w-292[class*="kesaprednja"] {
    top: -3vh !important;
  }

  /* z-axis depth split — kesazadnja (back layer) MUST sit furthest back
     in stacking order so the front bag (kesaprednja) and the cloud sit
     in front of it. User: "kesazadnja უნდა დაწიო ყველაზე უკან სივრცეში".

     The earlier rule (lines 84-93) sets both bag divs to z:3 by class
     match. We override here: back bag drops to z:1, front bag stays at
     z:3. Cloud rule below sits at z:6. So final stack (back → front):
       kesazadnja (z:1)  →  oblak cloud (z:6)  →  kesaprednja (z:3)
     Wait — z:3 < z:6, so front bag would sit BEHIND the cloud. That's
     the intended welcome animation: the bag appears to be "in the
     clouds", with cloud puffs visible against the bag body. */
  section.relative.h-screen .absolute.h-screen.w-292[class*="kesazadnja"],
  section.h-screen .absolute.h-screen.w-292[class*="kesazadnja"] {
    /* User: "მაქსიმალურად არ გაქვს გადაწეული უკან, kesazadnja გადაწიე
       უკან !!!"

       Earlier attempt added opacity:0.25 + blur(2px) on top of z:-10
       to make the back bag visually fade. That broke the bag's overall
       appearance — the two .webp files were designed as a layered pair
       where kesazadnja carries a large portion of the visible bag mass
       (kesaprednja has substantial transparency). Fading kesazadnja
       turned the whole bag into a ghost.

       Revert to pure z-index: -10 — it pushes kesazadnja behind every
       sibling in the section's stacking context while keeping the
       2-layer bag visual intact. */
    z-index: -10 !important;
  }

  /* Hero gradient fade at the bottom — keep it above bag but below text */
  section.relative.h-screen .absolute.bottom-0.left-0.z-1 {
    z-index: 4 !important;
  }

  /* Hero #hero text wrapper — must be ABOVE bag and cloud */
  #hero.trigger {
    z-index: 5 !important;
  }

  /* Hero candy explosion — positioned via GSAP translate3d. On mobile
     reduce rendered size so they don't crowd the small screen. The GSAP
     animation still fires; we only cap the visual size. */
  section:first-of-type .absolute.bottom-0 img[alt="დეკორაცია"] {
    max-width: 5rem !important;
  }

  /* Floating blurred candy background — reduce on small screens */
  section:first-of-type .absolute.inset-0 > img[alt="ფონის ელემენტი"] {
    width: 7rem !important;
    max-width: 7rem !important;
  }

  /* ------------------------------------------------------------------------
     3. ZOOM / WELCOME ZONE — fix cloud overlap with hero bag
     ------------------------------------------------------------------------
     The first oblak1.webp in .zoom has class `mt-[-478px]` on desktop and
     `max-md:mt-[-150px]`. At 375px viewport the cloud's visible portion
     falls inside the hero section, covering the bag.

     Fix: on ≤767px push the margin-top to 0 so the cloud starts AT the top
     of the zoom section, not 150px above it. The mix-blend-screen means it
     stays visually transparent — you'll see the bag through it — but the
     key gain is it no longer renders an opaque white zone over the bag bottom. */

  /* ALL oblak1.webp clouds at the top of the zoom section — reset
     negative margin so they stop reaching INTO the hero section.
     There are two instances: one in SSR HTML and one injected by
     cb-perma-cloud JS script. Both must be caught.
     PREVIOUSLY (broken state): `margin-top: 0` was forced so the cloud
     started AT the .zoom boundary (y=812 on mobile). But the hero bag
     ends visually around y=700, leaving a ~110px strip of empty olive
     between the bag bottom and the cloud top — user marked this in red
     and asked for the cloud to fill that gap on every mobile.

     NEW: pull the cloud up by 110px so its top sits just under the bag's
     visible bottom. The hero bag (.absolute.h-screen.w-292) is given
     z-index: 3 above, and this cloud stays at z-index: 1, so mix-blend-screen
     will still let the bag read crisply. min-width:200% (default Tailwind
     class on the SSR cloud) keeps the cloud wider than the viewport.

     z-index: 1 keeps it below the hero bag stacking context (z:3). */
  .zoom > img[alt="oblak"]:first-of-type,
  .zoom img.cb-perma-cloud[src*="oblak1"],
  .zoom img.cb-perma-cloud:not([src*="levioblak"]):not([src*="desnioblak"]) {
    /* Measured 2026-05-18 @ 375px viewport: hero bag visible bottom is at
       y=868, zoom starts at y=812, cloud img is 354px tall (`w-full` plus
       `max-sm:min-w-[200%]` → 750px wide × 354px tall).

       Goal: the cloud's visible puffs should sit IMMEDIATELY under the bag
       (the strip the user circled red) — not 188px below with an empty
       olive gap (the previous broken state where margin-top was 0 / -110px,
       which put the visible cloud band at the bottom of the viewport).

       Restoring the original Tailwind value -150px (which was the template
       author's intent: `max-md:mt-[-150px]`) puts cloud top at y=662 and
       cloud bottom at y=1016. With cloud puffs concentrated in the lower
       portion of the source image, the visible band falls right under the
       bag's visible bottom (~y=868) and extends ~150px into the welcome
       zone — matching the desktop's `mt-[-478px]` visual proportions.

       The bag (z-index:3) covers any overlap region cleanly so the bag
       still reads sharp. mix-blend-screen + z-index:1 on the cloud means
       it never paints over interactive content. */
    /* Viewport-relative so the cloud lands in the same RELATIVE spot on
       every phone width (320–430px). A fixed -198px was tuned for the
       375×812 iPhone 13 reference but undershot on the 320×568 iPhone SE
       (cloud ended 26px above the bag, leaving empty olive) and overshot
       on the 430×932 Pro Max (188px below the bag).

       -24vh ≈ -198px on iPhone 13, but scales linearly with viewport
       height: -136px on 568h, -224px on 932h. The cloud image itself
       scales with viewport WIDTH (`max-sm:min-w-[200%]` so cloud_h ≈
       0.944 × width). vh works because phone aspect ratios cluster
       around 9:18-9:20 so vh ≈ proportional to vw too. Result is
       cloud-bottom 30-180px below the bag across all five reference
       devices — never above. */
    margin-top: -24vh !important;
    left: 50% !important;
    margin-left: -100% !important; /* centers 200%-wide image */
    /* User feedback 2026-05-18: "ღრუბელი უკან ფონზეა, წინ ამოწიე" — the
       cloud was sitting behind the hero bag/gradient (z:1 vs bag z:3) so
       its puffs read as a faded background wash. Raise to z:6 so the
       cloud sits in front of the bag and gradient layers. mix-blend-screen
       still lets the bag silhouette show through, but the cloud's body
       now reads as a foreground element instead of a backdrop. */
    z-index: 6 !important;
  }

  /* Second oblak (max-md:flex, mt-[-30px]) — hide it on small mobile.
     The first oblak already provides the welcome zone cloud; having
     two stacked creates a heavy white wash. Desktop is already hidden
     via `hidden` class, so this only affects ≤767px. */
  .zoom img[alt="oblak"].hidden.max-md\:flex {
    display: none !important;
  }
  /* cb-perma-cloud duplicate of the second oblak — also hide */
  .zoom img.cb-perma-cloud.hidden {
    display: none !important;
  }

  /* Welcome headline — dramatic scale like desktop */
  .zoom .sticky h2.heading-1.special-elem {
    font-size: clamp(3rem, 13vw, 4.5rem) !important;
    line-height: 1 !important;
    padding: 0 0.5rem !important;
    word-break: keep-all !important;
    hyphens: none !important;
    letter-spacing: -0.01em !important;
  }

  /* Welcome subhead */
  .zoom .sticky p.elem.heading-6 {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    padding: 0 1rem !important;
  }

  /* Side clouds in welcome zone — prevent horizontal scroll */
  .zoom img[alt="oblak"] {
    max-width: 200% !important;
  }

  /* ------------------------------------------------------------------------
     4. CRAFTAREA (castle + clickable hotspots)
     ------------------------------------------------------------------------
     Desktop: castle ~80% viewport width, hotspots positioned via calc()
     formulas that assume a 1500px+ wide parent. On 375px the calc() math
     puts hotspots OFF-screen — so we override with sensible % positions. */

  /* Candy hotspot containers — replace desktop calc() with mobile % */
  .craftarea-candy-1 {
    top: 50% !important;
    left: 8% !important;
    transform: none !important;
  }
  .craftarea-candy-2 {
    top: 68% !important;
    left: 38% !important;
    transform: none !important;
  }
  .craftarea-candy-3 {
    top: 22% !important;
    left: 62% !important;
    transform: none !important;
  }

  /* Candy images inside hotspots — cap to 5rem so 3 fit on the facade */
  .craftarea-candy-1 .relative > img,
  .craftarea-candy-2 .relative > img,
  .craftarea-candy-3 .relative > img {
    width: 5rem !important;
    max-width: 5rem !important;
    height: auto !important;
  }

  /* Click circle buttons — slightly smaller on mobile */
  .craftarea-candy-1 .group.absolute,
  .craftarea-candy-2 .group.absolute,
  .craftarea-candy-3 .group.absolute {
    width: 3rem !important;
    height: 3rem !important;
  }

  /* Mobile centered popup overlay */
  .absolute.top-1\/2.left-1\/2.z-100.hidden.max-md\:block {
    width: 88vw !important;
    max-width: 88vw !important;
    padding: 1.25rem !important;
  }

  .absolute.top-1\/2.left-1\/2.z-100.hidden.max-md\:block img {
    width: 100% !important;
    max-width: 100% !important;
  }

  .absolute.top-1\/2.left-1\/2.z-100.hidden.max-md\:block h3 {
    font-size: 1.4rem !important;
    margin-top: 1rem !important;
  }

  /* Castle section — top-edge clouds (levioblak + desnioblak) */
  .relative.overflow-x-clip:has(> div > img[alt="Craftarea შენობა"]) > img[alt="oblak"] {
    display: flex !important;
    width: 55% !important;
    min-width: 55% !important;
    max-width: 55% !important;
  }

  /* Bottom castle cloud — hidden on mobile per user request */
  .cb-castle-cloud {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     5. COLLECTIONS — 1×4 vertical stack
     ------------------------------------------------------------------------
     Tailwind's max-md:grid-cols-1 handles the stack. We add spacing and
     ensure corner icons don't crowd. */

  .grid.grid-cols-2.gap-x-6.gap-y-20.max-md\:grid-cols-1 {
    gap: 5rem 0 !important;
    padding: 0 0.5rem !important;
  }

  /* Collection card backdrops */
  .group .bg-pink-50.rounded-3xl,
  .group .bg-sour-100.rounded-3xl,
  .group .bg-chocolate-100.rounded-3xl,
  .group .bg-liquorice-400.rounded-3xl {
    padding: 4rem 2rem !important;
    min-height: 18rem !important;
  }

  /* Center hero product image */
  .group .bg-pink-50.rounded-3xl + img,
  .group .bg-sour-100.rounded-3xl + img,
  .group .bg-chocolate-100.rounded-3xl + img,
  .group .bg-liquorice-400.rounded-3xl + img,
  .group .bg-pink-50.rounded-3xl ~ img,
  .group .bg-sour-100.rounded-3xl ~ img,
  .group .bg-chocolate-100.rounded-3xl ~ img,
  .group .bg-liquorice-400.rounded-3xl ~ img {
    max-width: 70% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Collection-card animation — scroll-triggered on mobile (no hover on touch).
     Default: satellite halo stays scale-0 + rotated (hidden), so cards look
     calm in the stack. When the IntersectionObserver in index.html adds
     `.cb-in-view` to the <a class="group">, the same Tailwind transition
     timings (duration-500 / duration-700 ease-out with staggered delays)
     play once as the card enters the viewport.
     Tailwind v4 uses native `scale:` and `rotate:` properties (not the old
     `transform: scale()` composition), so we override them directly. */
  a.group.cb-in-view .group-hover\:scale-100 {
    scale: 1 !important;
  }
  a.group.cb-in-view .group-hover\:rotate-0 {
    rotate: 0deg !important;
  }
  a.group.cb-in-view .group-hover\:scale-108 {
    scale: 1.08 !important;
  }
  a.group.cb-in-view .group-hover\:-rotate-4 {
    rotate: -4deg !important;
  }

  /* Collection-card satellite halo wrap — shrink to 95% so corner
     icons sit just inside the card edge on mobile. Tailwind's
     non-important classes; plain !important wins.                  */
  a.group .max-md\:h-\[110\%\],
  a.group .max-md\:h-\[120\%\] {
    height: 95% !important;
  }
  a.group .max-md\:w-\[110\%\],
  a.group .max-md\:w-\[120\%\] {
    width: 95% !important;
  }

  /* Lift the ACTIVE card and its halo above every neighbour.
     The default `<a class="z-0 hover:z-10">` only bumps z on hover,
     which never fires on touch — so as the satellites fly out the
     next card's background was painting over them. Force a high
     stacking context whenever the card has `.cb-in-view`. */
  a.group.cb-in-view {
    z-index: 50 !important;
  }
  a.group.cb-in-view .group-hover\:scale-100 {
    z-index: 50 !important;
  }

  /* Section heading sizes */
  section .heading-2 {
    font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }
  section .heading-4 {
    font-size: 1.35rem !important;
  }
  section .heading-6 {
    font-size: 0.95rem !important;
  }
  section .paragraph {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* ------------------------------------------------------------------------
     6. BESTSELLERS CAROUSEL (keen-slider with 408px slides)
     ------------------------------------------------------------------------
     Show 1.2 cards (current + peek) so users discover swipe affordance.
     scroll-margin-top gives the section heading clearance below the
     fixed header (~70px) when the browser scrolls to this section
     via an anchor link. */

  .keen-slider__slide {
    min-width: 78vw !important;
    max-width: 78vw !important;
  }

  .keen-slider {
    padding-left: 0.75rem !important;
    padding-right: 0 !important;
  }

  /* Hide empty placeholder slides used for desktop padding */
  .keen-slider__slide[aria-hidden="true"] {
    min-width: 0 !important;
    max-width: 0 !important;
  }

  /* Bestsellers section wrapper — give heading clearance below fixed header */
  section:has(.keen-slider) {
    scroll-margin-top: 80px !important;
  }

  /* ------------------------------------------------------------------------
     7. REVIEWS — LOCKED CARDS, container scaling only
     ------------------------------------------------------------------------
     Cards use translate(±150%, 0%) rotate(±deg) via GSAP. We do NOT touch
     card internals. Only outer wrapper and photo scale. */

  /* Review card photo — slightly enlarged on mobile for visibility */
  .reviewCard > img[alt="reviewscard"] {
    transform: scale(1.15) !important;
    transform-origin: center !important;
  }

  /* ------------------------------------------------------------------------
     7b. VELIKIOBLAK DIVIDER SECTION (between aboutCraftBox and reviews)
     ------------------------------------------------------------------------
     Desktop: heading has mt-[22rem]/mb-[28rem] for scroll parallax effect.
     max-md already reduces mt to mt-[12rem]=192px. mb-[28rem]=448px still
     creates a huge blank space below the heading inside the h-screen div.
     We override both margins so the div content centres naturally.
     Font size also clamped — heading-1 at 22rem base is too big for 375px. */

  .relative.flex.h-screen.w-full.items-center.justify-center.overflow-clip .heading-1.split {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
    font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
    line-height: 1.25 !important;
  }

  /* ------------------------------------------------------------------------
     7c. ABOUT CRAFTBOX SECTION — bag image pair
     ------------------------------------------------------------------------
     Desktop: two bags (zadnja + prednja) rotate/fade in via GSAP on scroll.
     max-sm:mb-50 (=12.5rem) on the first child div creates excess bottom gap
     on mobile. The pt-40 container padding-top is left alone (GSAP scroll
     timing depends on section height). Only the bag-image container margin
     is reduced. */

  /* Bag image container — first flex child (has max-sm:mb-50) */
  section#aboutCraftBox > div > div:first-child {
    margin-bottom: 1.5rem !important;
  }

  /* ------------------------------------------------------------------------
     8. FOOTER
     ------------------------------------------------------------------------
     The footer has its own candy scatter animation. We let the Tailwind
     max-sm: classes handle positioning. Only readability adjustments here. */

  .cb-crafted-by {
    font-size: 16px !important;
    line-height: 1.5 !important;
    /* Push above the floating FABs (music + messenger, each ~56px) */
    margin-bottom: 5.5rem !important;
  }
  .cb-crafted-by img {
    width: 100px !important;
  }
  p.fineprint {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Footer bag container — max-md:h-[300px] clips the absolute-positioned
     footerkesa bag image. Expand to auto height so the full bag is visible.
     Use :has() to target the specific container that holds footerbag. */
  .footer-trigger .relative:has(img[alt="footerbag"]) {
    height: auto !important;
    min-height: 380px !important;
  }

  /* footerkesa = the big bag in the footer. max-md:w-150 (37.5rem) is too
     wide for 375px — constrain and centre it so it fits within the viewport. */
  .footer-trigger img[alt="footerbag"] {
    max-width: 85vw !important;
    width: 85vw !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    position: absolute !important;
  }

  /* Footer candy items — ensure they're visible within the expanded container */
  .footer-trigger img[alt="დეკორაცია"] {
    z-index: 2 !important;
  }

  /* ------------------------------------------------------------------------
     9. NAVIGATION HEADER — bombon-style compact bar
     ------------------------------------------------------------------------
     Target layout: [logo left] [hamburger pill center] [cart button right]
     Three elements, single row, no stacking, no inline nav links visible.

     Problems in the original render at 375px:
     a) The header container wraps because the two flex-1 divs + the
        hamburger pill compete for width, causing multi-row stacking.
     b) The login pill (icon + rounded border) appears inline on the right.
     c) The cart button "კალათა" appears inline as a separate row/badge.
     d) The lang toggle pill (#desktop-nav-end) is max-lg:hidden correctly
        but the container still has excess spacing.

     Fix: collapse right-side div to a single cart-only element; hide the
     login pill; force the container to a no-wrap single row. */

  /* Force the top header bar to a strict single row, no wrapping */
  header .container {
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    min-height: 56px !important;
  }

  /* Logo div — shrink to content width, do not flex-grow */
  header .container > div:first-child {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  /* Logo image — compact size */
  header img[alt="CraftBox Logo"] {
    width: 2.75rem !important;
    height: 2.75rem !important;
    display: block !important;
  }

  /* Hamburger pill — stays as-is (lg:hidden shows it on mobile).
     Ensure it doesn't flex-grow so it stays as the center badge. */
  header .container > div:nth-child(2) {
    flex: 0 0 auto !important;
  }

  /* Right-side nav container — shrink to content, no flex-grow */
  header .container > div:last-child {
    flex: 0 0 auto !important;
    gap: 0 !important;
  }

  /* Hide the login pill on mobile entirely — login is accessible via the
     hamburger overlay menu (the full-screen menu has a შესვლა link) */
  header #login-pill {
    display: none !important;
  }

  /* Hide the language toggle container — desktop-only nav end element.
     max-lg:hidden already handles ≥768px but the class resolves to
     display:none at ≤1023px, so this is belt-and-suspenders. */
  header #desktop-nav-end {
    display: none !important;
  }

  /* Cart button — the single visible right element.
     Keep it as a minimal text link matching bombon's "cart" label style. */
  header button.links[data-i18n="კალათა"],
  header button.links {
    display: flex !important;
    min-height: 44px !important;
    min-width: 44px !important;
    align-items: center !important;
    padding: 0.5rem 0.25rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    background: none !important;
    border: none !important;
  }

  /* ------------------------------------------------------------------------
     10. BESTSELLERS EMOJI ARROWS — hide on mobile
     ------------------------------------------------------------------------
     The JS injects 👈 and 👉 buttons with position:absolute on the slider
     wrapper. On a small screen they overlap content and look out of place.
     Users swipe to navigate; the arrows are not needed. */

  #cb-bestsellers-nav-prev,
  #cb-bestsellers-nav-next {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     11. MESSENGER FAB + WhatsApp FAB — already responsive in their own
     scripts. No override needed.
     ------------------------------------------------------------------------ */
}

/* --------------------------------------------------------------------------
   Collection-card satellite icons — mobile shrink.
   Tailwind v4 emits `max-md:!max-w-[10rem]` (and `[8rem]`) with `!important`
   inside `@layer utilities`. Per CSS Cascade Layer 5, an unlayered
   `!important` rule LOSES to a layered `!important` rule (reversed order
   for important declarations). We have to join the same `utilities` layer
   so the cascade falls back to specificity — `a.group .x` (0,2,1) beats
   the plain `.x` (0,1,0) and our value wins.
   Reduces icons from 10rem (~127px at the site's 12.675px root) to 5.5rem
   (~70px), so all 5 fly-in icons fit comfortably on every phone ≥320px.
   -------------------------------------------------------------------------- */
@layer utilities {
  @media (max-width: 767px) {
    a.group .max-md\:\!max-w-\[8rem\],
    a.group .max-md\:\!max-w-\[10rem\] {
      max-width: 5.5rem !important;
    }
  }
}

/* --------------------------------------------------------------------------
   Hero cloud (velikioblak) — mobile only.
   On phones the wide cloud used `object-none`, so it sat high and the
   multi-line heading dropped off its lower edge. Switch to `object-contain`
   and scale it up a touch so the whole title nestles inside the cloud.
   Desktop is unchanged.
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  img[alt="Classic Image"] {
    object-fit: contain !important;
    transform: scale(1.2);
  }
  /* Drop the " - " dash on phones so the title reads as three short lines
     (კრაფტბოქსი / შენი პერსონალური / საჩუქარი) and fits inside the cloud.
     Desktop keeps the dash. */
  .cb-hero-dash {
    display: none !important;
  }
  /* Lift the whole title up so it begins right at the top of the cloud
     instead of sitting in its centre. Keep the brand's -6deg tilt. */
  h1.heading-1.split {
    transform: translateY(-79px) rotate(-6deg) !important;
  }
}