/* Mobile homepage categories: horizontal swipe shelf + "View all" modal.
   Desktop keeps the existing .categories grid untouched — these rules only
   engage at <=700px. Tune the breakpoint to taste. Reuses theme var --primary. */

/* trailing "View all" card + modal are hidden until mobile / opened */
.cat-viewall-card { display: none; }
.cat-modal        { display: none; }

@media (max-width: 700px) {
  /* vertical grid -> one swipeable row */
  .categories {
    display: flex; gap: .7rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: .45rem;
    /* let the row bleed to the screen edges so it reads as a shelf */
    scrollbar-width: none;
  }
  .categories::-webkit-scrollbar { display: none; }
  .categories .category-card {
    flex: 0 0 auto; width: 150px; scroll-snap-align: start;
  }
  .cat-viewall-card {
    flex: 0 0 auto; width: 112px; scroll-snap-align: start;
    display: flex; align-items: center; justify-content: center; text-align: center;
    border: 1px dashed #cfd4dc; border-radius: 12px; background: #f8f9fb;
    font-weight: 700; color: var(--primary, #15527d); text-decoration: none; padding: .6rem;
    line-height: 1.25;
  }
}

/* ---- "All categories" bottom-sheet modal ---- */
.cat-modal.open { display: block; position: fixed; inset: 0; z-index: 2000; }
.cat-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 20, 30, .5); }
.cat-modal-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 82vh; overflow-y: auto;
  background: #fff; border-radius: 16px 16px 0 0;
  padding: 1rem 1rem 1.5rem; box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
}
.cat-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.cat-modal-head h2 { margin: 0; font-size: 1.15rem; }
.cat-modal-close { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #444; padding: 0 .25rem; }
.cat-modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.cat-modal-tile { text-decoration: none; color: inherit; text-align: center; }
.cat-modal-thumb {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
  background: #eef0f4; display: flex; align-items: center; justify-content: center; color: #9aa3af;
}
.cat-modal-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.cat-modal-name { display: block; margin-top: .35rem; font-size: .8rem; font-weight: 600; line-height: 1.2; }
@media (min-width: 520px) { .cat-modal-grid { grid-template-columns: repeat(4, 1fr); } }

/* On desktop the shelf/viewall don't apply; the modal can still be triggered
   anywhere you add a [data-cat-modal-open] element (e.g. the nav dropdown's
   "View all categories" link). */

/* Desktop grid: when the homepage caps categories at 2 rows, the trailing
   "View all categories" card (--show) renders as a dashed grid tile. */
@media (min-width: 701px) {
  .cat-viewall-card--show {
    display: flex; align-items: center; justify-content: center; text-align: center;
    border: 2px dashed #cfd4dc; border-radius: 12px; background: #f8f9fb;
    font-weight: 700; font-size: 1.05rem; line-height: 1.35; padding: 1rem;
    color: var(--primary, #15527d); text-decoration: none;
    min-height: 230px;
  }
  .cat-viewall-card--show:hover { border-color: var(--primary, #15527d); background: #f3f4f7; }
}

/* The sheet always rises from the BOTTOM of the screen (same feel as mobile).
   On desktop it stays bottom-anchored but centres at a generous width, and the
   tiles cap at 250px so images stay thumbnail-sized — auto-fill packs as many
   capped columns as the width allows. */
@keyframes cat-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cat-fade     { from { opacity: 0; }                 to { opacity: 1; } }
.cat-modal.open .cat-modal-sheet    { animation: cat-sheet-up .28s ease-out; }
.cat-modal.open .cat-modal-backdrop { animation: cat-fade .2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .cat-modal.open .cat-modal-sheet, .cat-modal.open .cat-modal-backdrop { animation: none; }
}

@media (min-width: 701px) {
  /* base rules keep left/right/bottom anchoring; margin centres the sheet */
  .cat-modal-sheet {
    width: min(96vw, 1400px);
    margin: 0 auto;
    border-radius: 16px 16px 0 0;
    padding: 1.25rem 1.5rem 1.75rem;
  }
  .cat-modal-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 250px));
    justify-content: center; gap: 1rem;
  }
}

/* show_category_menu_labels OFF (.cat-labels-off): image-only tiles.
   Mobile shelf drops the name/Shop-Now body; the all-categories sheet drops
   tile names at every width. Tiles keep title="" so names remain on hover
   and for assistive tech via the image alt. */
@media (max-width: 700px) {
  .categories.cat-labels-off .category-card-body { display: none; }
}
.cat-modal.cat-labels-off .cat-modal-name { display: none; }

/* Homepage "Shop by Category" header: match .categories' 1.5rem gutter so it
   aligns with the tiles below. Desktop keeps the standard section-head row
   (title left, link right — same as Bundle & Save / Featured Products); on
   MOBILE the link drops BELOW the title so the heading never wraps. */
.cat-section-head { padding: 1.5rem 1.5rem 0; margin-bottom: 0; }
@media (max-width: 700px) {
  .cat-section-head { display: block; }
  .cat-section-head a { display: inline-block; margin-top: .35rem; }
}