/* Minimal site-level overrides on top of Tailwind CDN. */
img { max-width: 100%; height: auto; }

/* Category filter chips: a single, swipeable horizontal row (this is now
   the sole category nav — the old wrapping tab bar was removed). Hide the
   scrollbar so the strip reads as an intentional swipe control rather than
   a clipped list, and give it momentum scrolling on touch. */
.cat-chips {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;               /* Firefox */
}
.cat-chips::-webkit-scrollbar { display: none; }  /* WebKit */

/* Main category nav: allow horizontal scroll on smaller md-range viewports
   instead of clipping the last item. */
nav[aria-label="Shop categories"] { -webkit-overflow-scrolling: touch; }
nav[aria-label="Shop categories"]::-webkit-scrollbar { display: none; }

/* T-D63 a11y: skip-to-content link — off-screen until keyboard-focused.
   Hide off the inline-START edge (inset-inline-start, not left) so RTL locales
   (JIFU-H09: dir=rtl) don't push it 9999px past the inline-END and balloon
   scrollWidth into a blank first paint. */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  background: #F0CF95; /* sahara (v1.2) */
  color: #191919; /* ink */
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  font-size: 14px;
}
.skip-link:focus { inset-inline-start: 0; outline: 2px solid #191919; outline-offset: 2px; }

/* Home page: tinted content bands bleed edge-to-edge past the main container's
   px-3 sm:px-6 padding, creating a full-width stripe that reads as a distinct
   section without a heavy border or color shift. */
.home-sec-bleed {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
@media (min-width: 640px) {
  .home-sec-bleed {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Footer text links (not icon buttons) are always underlined + dark so they
   read as clearly clickable at all viewport widths. Social icon <a> elements
   carry aria-label and are excluded. */
footer a:not([aria-label]) {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #F4F1EA; /* parchment - links on the ash footer ground (v1.2) */
}
footer a:not([aria-label]):hover {
  color: #FFFFFF;
}

/* --- Mobile-first polish (audit 2026-07-04) --- */
@media (max-width: 767px) {
  /* iOS Safari zooms the whole page when focusing a text input whose
     font-size is < 16px. Force a 16px floor on real text controls
     (checkboxes/radios/hidden excluded) and give them a comfortable
     44px touch height. */
  /* :not() on select/textarea bumps specificity above Tailwind's .text-sm
     (0,1,0) so the 16px floor actually wins for dropdowns too. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  select:not([size]),
  textarea:not([hidden]) {
    font-size: 16px;
    min-height: 44px;
  }
  textarea:not([hidden]) { min-height: 88px; }

  /* Category filter chips — 34px was under the 44px touch floor. */
  .cat-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Footer links: inline-flex so vertical centering works on mobile;
     min-height on touch devices only so desktop stays compact. */
  footer a {
    display: inline-flex;
    align-items: center;
  }
  @media (pointer: coarse) {
    footer a { min-height: 44px; }
  }

  /* Mobile nav drawer (mobile-menu polish 2026-07-04). It was an inline
     dropdown that only covered its own height, so the page bled through
     below the menu list. Pin it as a fixed, full-height opaque panel
     directly below the header, and lock body scroll while open.
     ASANA:1218422945881632: the top is the header's measured bottom edge,
     set by positionMobileDrawer() in base.html - a fixed 68px overlapped
     the 98px header by 30px, and the edge moves when the utility strip
     scrolls away. 68px is only the fallback before the script runs. */
  #mobile-drawer:not(.hidden) {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--jifu-drawer-top, 68px);
    bottom: 0;
    z-index: 60;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body.drawer-open { overflow: hidden; }
}

/* ASANA:1218272264903512: formatted product/pack descriptions. Admin HTML
   (bullets, bold, paragraphs) renders in pack cards and the admin editor;
   Tailwind preflight strips list markers, so restore them here. */
.oj-pack-desc-rich ul { list-style: disc; padding-inline-start: 1.25rem; margin: 0.25rem 0; }
.oj-pack-desc-rich ol { list-style: decimal; padding-inline-start: 1.25rem; margin: 0.25rem 0; }
.oj-pack-desc-rich li { margin: 0.125rem 0; }
.oj-pack-desc-rich p { margin: 0.25rem 0; }
.oj-pack-desc-rich p:first-child { margin-top: 0; }

/* ASANA:1218335040682349: EB-parity pack card content - Included Products
   render with check marks (EB's check-icon), gift line included. */
/* ASANA:1218343925265070: inside the rich container, `.oj-pack-desc-rich ul`
   (0,1,1) outranked `.oj-pack-includes` (0,1,0), so the list drew a disc
   bullet AND the check mark. The ul-qualified selector (0,1,1 + class =
   0,2,1) wins in both contexts; margins zeroed for the same reason. */
ul.oj-pack-includes { list-style: none; padding-left: 0.25rem; margin: 0.125rem 0; }
.oj-pack-includes li::before { content: "\2713"; color: #8BC53D; /* apple (v1.2) */ font-weight: 600; margin-right: 0.35rem; }

/* ASANA:1218422909722317 (Brand v1.2 chrome re-cut): Tailwind's
   `list-none` hides the summary marker everywhere except older WebKit,
   which needs the vendor pseudo-element. Structural only - the chrome's
   colors live in token utility classes in base.html. */
summary.list-none::-webkit-details-marker { display: none; }

/* ASANA:1218814643164097 / 1218941418355194 - the header lockup (base.html
   .js-logo): the master lockup (bird + wordmark) on every page, at Framer's
   header size - 106px wide on tablet/desktop, 88px on phones. Height follows
   the image, so the lockup is never distorted. */
.js-logo__img { display: block; width: 106px; height: auto; max-width: none; }
@media (max-width: 767.98px) {
  .js-logo__img { width: 88px; }
}