/* ──────────────────────────────────────────────────────────────────────────
   Rituals Makhana — mobile & tablet responsiveness layer.

   Loaded LAST on every page. Every visual rule is scoped to a max-width
   media query so desktop (> 991px) renders exactly as before.
   ────────────────────────────────────────────────────────────────────────── */

/* Universal horizontal-scroll guard. `clip` (unlike `hidden`) keeps
   position:sticky headers working. No-op on pages without overflow. */
html {
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* ── Tablets & phones (≤ 991px — the site's own Webflow breakpoint) ─────── */
@media (max-width: 991px) {
  /* Media can never force a page wider than the viewport */
  img,
  video {
    max-width: 100%;
    height: auto;
  }

  /* Long unbroken strings (URLs, ingredient codes) wrap instead of overflow */
  h1,
  h2,
  h3,
  h4,
  p,
  li,
  td,
  th {
    overflow-wrap: break-word;
  }

  /* "Other flavours" cards zoom their packshot with transform: scale().
     Without clipping, the zoomed image leaks past the card and pushes the
     whole page sideways on narrow screens. */
  .other-card {
    overflow: hidden;
  }
}

/* ── Phones & small tablets (≤ 768px — the site's custom breakpoint) ────── */
@media (max-width: 768px) {
  /* Wide data tables scroll horizontally instead of crushing columns
     or pushing the page sideways */
  .comp-table,
  .nutr-table,
  .compound-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Comparison table: tighter cells so all 4 columns fit small screens */
  .comp-table th,
  .comp-table td {
    padding: 10px 8px;
    font-size: 12px;
    line-height: 1.4;
  }

  /* Admin dashboard tables: keep readable min width, scroll the card */
  .table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-card table {
    min-width: 620px;
  }

  /* iOS stops auto-zooming focused inputs at ≥16px */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Comfortable reading on small serif headings (science/journal pages) */
  .content-wrap h2 {
    line-height: 1.25;
  }
}

/* ── Small phones (≤ 480px) ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .comp-table th,
  .comp-table td {
    padding: 8px 6px;
    font-size: 11.5px;
  }
}

/* ── Mobile navbar cart icon (injected by mobile-fixes.js) ──────────────── */
#rm-nav-cart-icon {
  display: none;
}
@media (max-width: 768px) {
  #rm-nav-cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 2px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #3b2f1e;
    position: relative;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  #rm-nav-cart-icon svg {
    width: 21px;
    height: 21px;
  }
  #rm-nav-cart-icon .rm-cart-badge {
    position: absolute;
    top: 2px;
    right: 0;
    background: #3b2f1e;
    color: #f5efe6;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    border-radius: 100px;
    min-width: 17px;
    height: 17px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
  }
}

/* ── Hero banner video: show the full frame, vertically centred ─────────── */
@media (max-width: 991px) {
  .video-desktop,
  #hero-video {
    object-fit: contain;
    object-position: center center;
    background: #2e2519;
    top: 0;
    height: 100%;
  }
}

/* ── "Other flavours" cards: scaled packshots overlapped the titles ─────── */
@media (max-width: 991px) {
  .other-card img,
  .other-card:hover img {
    transform: none !important;
    height: 190px;
    object-fit: contain;
  }
  .other-name {
    margin-top: 14px;
  }
}

/* ── Discovery pack fan: was bottom-anchored with dead space above ──────── */
@media (max-width: 991px) {
  .discovery-pouches-wrap {
    height: auto !important;
    align-self: center;
  }
  .discovery-pouches-fan {
    height: 150px;
  }
  .discovery-pouches-wrap .dp {
    width: 118px;
    margin-left: -59px;
  }
  .discovery-pouches-wrap .dp:nth-child(1) { transform: rotate(-14deg) translateX(-96px); }
  .discovery-pouches-wrap .dp:nth-child(2) { transform: rotate(-5deg) translateX(-32px); }
  .discovery-pouches-wrap .dp:nth-child(3) { transform: rotate(5deg) translateX(32px); }
  .discovery-pouches-wrap .dp:nth-child(4) { transform: rotate(14deg) translateX(96px); }
}
@media (max-width: 480px) {
  .discovery-pouches-fan {
    height: 128px;
  }
  .discovery-pouches-wrap .dp {
    width: 100px;
    margin-left: -50px;
  }
  .discovery-pouches-wrap .dp:nth-child(1) { transform: rotate(-14deg) translateX(-78px); }
  .discovery-pouches-wrap .dp:nth-child(2) { transform: rotate(-5deg) translateX(-26px); }
  .discovery-pouches-wrap .dp:nth-child(3) { transform: rotate(5deg) translateX(26px); }
  .discovery-pouches-wrap .dp:nth-child(4) { transform: rotate(14deg) translateX(78px); }
  .other-card img,
  .other-card:hover img { height: 165px; }
}

/* ── Lottie scroll icons: render them like the laptop view — one small,
      centred symbol above each heading, clipped to its own box. ─────────── */
@media (max-width: 991px) {
  .lottie-small {
    display: block !important;
    position: relative !important;
    top: auto !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 14px !important;
    overflow: hidden !important;
  }
  .lottie-small svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
  /* Webflow's ix2 init and the mobile re-init can each inject an SVG —
     keep only the first so the symbol doesn't appear twice. */
  .lottie-small svg ~ svg {
    display: none !important;
  }
}