/* ============================================================
   Red Bird Creations — SHOP PAGE ONLY (scoped under .shop-page)
   Light, airy, handcrafted aesthetic. Olive/sage accents,
   white background, generous spacing, product photos as the
   most colorful element. Loaded only on shop.html.
   ============================================================ */

.shop-page { background: #ffffff; }

/* Section rhythm — generous spacing between major blocks */
.shop-section { padding: 92px 0; }
.shop-section--tight { padding: 56px 0; }
.shop-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ---------- 1. Hero ---------- */
.shop-hero { text-align: center; padding: 96px 28px 44px; background: #fff; }
.shop-hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  color: var(--forest-black);
  margin: 0 0 18px;
}
.shop-hero p {
  max-width: 640px; margin: 0 auto;
  color: #6b7066; font-size: 1.18rem; line-height: 1.6;
}
.shop-cats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 34px;
}
.shop-cat {
  font-family: var(--ui); font-weight: 600; font-size: 0.95rem;
  padding: 11px 22px; border-radius: 999px;
  border: 1px solid #e2ddd2; background: #fff; color: var(--forest-black);
  cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.shop-cat:hover { border-color: var(--deep-red); color: var(--deep-red); }
.shop-cat.active { background: var(--forest-black); border-color: var(--forest-black); color: var(--warm-cream); }

/* ---------- 2. Best Sellers ---------- */
.bestsellers { padding: 40px 0 8px; }
.bestsellers__head {
  display: flex; align-items: center; gap: 20px;
  max-width: 1200px; margin: 0 auto 40px; padding: 0 28px;
}
.bestsellers__head::before,
.bestsellers__head::after { content: ""; flex: 1; height: 1px; background: #e6e0d4; }
.bestsellers__head span {
  font-family: var(--heading); font-size: 1.7rem; white-space: nowrap;
  color: var(--forest-black); letter-spacing: -0.01em;
}
.bestsellers__head .star { color: var(--deep-red); }

/* ---------- Product cards (shared by best sellers + grid) ---------- */
/* `stretch` is the grid default, but state it: it's what makes every card in a
   row the height of the tallest one, which the cards' internal flex column then
   relies on to pin price + CTA to a shared bottom line. */
.card-grid { display: grid; gap: 30px; align-items: stretch; }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }

.shopcard {
  position: relative;                 /* anchor for the stretched link below */
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #eee7db; border-radius: 18px;
  overflow: hidden; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* The product-name link stretches over the whole card, so the entire card is
   clickable while staying ONE link and one tab stop. The quick-add button
   raises itself above this overlay, which is what keeps a quick add from
   navigating to the product page. */
.shopcard__hit::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.shopcard__hit:focus-visible::after {
  outline: 2px solid var(--forest-black);
  outline-offset: -3px; border-radius: 18px;
}
.shopcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(28, 28, 28, 0.09);
  border-color: #e6ddcb;
}
/* Image takes ~70% of the card — locked to a square that content can't stretch.
   The photo fills that square (cover) instead of being letterboxed to its own
   aspect ratio, so every card in the grid presents the product at the same
   size in the same frame. See --card-img-* in style.css. */
.shopcard__img {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--card-img-bg);
  padding: var(--card-img-pad);
  min-height: 0; overflow: hidden;
}
.shopcard__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;          /* product sits centred in the frame */
  border-radius: var(--card-img-radius);
  background: var(--card-img-bg);   /* shows through any transparent PNG */
  display: block;
}
.shopcard__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 20px 22px 24px; text-align: center;
}
/* Reserve two lines for the name. Most are one line, a few are two, and without
   this the shorter ones drag everything below them upward (~27px of drift).
   Names are NOT truncated — a product name is information, not filler — so a
   rare third line is simply absorbed by the bottom-pinned foot below. */
.shopcard__name {
  font-family: var(--heading); font-size: 1.25rem; line-height: 1.2;
  color: var(--forest-black); margin-bottom: 8px; letter-spacing: -0.01em;
  min-height: 2.4em;                  /* 2 lines x 1.2 line-height */
}

/* Exactly two lines, ellipsised past that, and never fewer than two so a short
   blurb doesn't shift the card's lower half. */
.shopcard__desc {
  color: #7a7568; font-size: 0.92rem; line-height: 1.55; margin-bottom: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 3.1em;                  /* 2 lines x 1.55 line-height */
}

/* Price + CTA, pinned to the bottom of the card. `margin-top: auto` inside the
   flex column pushes this group down, so it sits on a shared line across every
   card in the row regardless of what the name and blurb did above it. */
.shopcard__foot {
  margin-top: auto;
  display: flex; flex-direction: column; align-items: center;
}
/* Price row. Fixed min-height so it measures the same on the two cards that
   carry a quick-add button and the fourteen that don't — that's what puts every
   price in the grid on one line. */
.shopcard__buy {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; min-height: 40px; margin-bottom: 10px;
}
.shopcard__price {
  font-family: var(--ui); font-weight: 600; font-size: 1.05rem;
  color: var(--forest-black); margin: 0;
  font-variant-numeric: tabular-nums;
}
/* Deliberately quiet: sixteen of these in a grid shouldn't read as sixteen
   competing calls to action. It's a hint that the card is clickable, not a
   button — lighter weight, smaller, muted until the card is hovered. */
.shopcard__link {
  font-family: var(--ui); font-weight: 500; font-size: 0.88rem;
  color: var(--muted); transition: color .15s ease;
}
.shopcard:hover .shopcard__link { color: var(--deep-red); }

/* Quick add — only on items under QUICK_ADD_UNDER (js/browse.js). Outlined,
   not filled, so it stays subordinate to the product photo. */
.shopcard__add {
  position: relative; z-index: 2;     /* above the stretched card link */
  flex: 0 0 auto;
  min-height: 40px; padding: 9px 18px;
  font-family: var(--ui); font-weight: 600; font-size: 0.84rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--forest-black); cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.shopcard__add:hover {
  background: var(--forest-black); border-color: var(--forest-black);
  color: var(--warm-cream);
}

/* ---------- 3. Product grid + filters ---------- */
.shop-main {
  display: grid; grid-template-columns: 244px 1fr; gap: 44px; align-items: start;
}
.shop-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; margin-bottom: 26px; flex-wrap: wrap;
}
.shop-toolbar__left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shop-toolbar__count { color: #7a7568; font-family: var(--ui); font-size: 0.95rem; font-variant-numeric: tabular-nums; }

/* The grid is a scroll + focus target when a collection is picked */
.shop-results:focus { outline: none; }

/* Chip that explains a collection is narrowing the grid */
.shop-scope {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-weight: 600; font-size: 0.88rem;
  color: var(--forest-black); background: var(--natural-linen);
  border-radius: 999px; padding: 6px 8px 6px 16px;
}
.shop-scope__clear {
  /* 24px mark, padding + negative margin push the tap area to 44px */
  width: 24px; height: 24px; padding: 10px; margin: -10px;
  box-sizing: content-box;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: #6b6355;
  border-radius: 999px; transition: color .15s ease;
}
.shop-scope__clear:hover { color: var(--deep-red); }
.filter-toggle {
  display: none; align-items: center; gap: 8px;
  font-family: var(--ui); font-weight: 600; font-size: 0.95rem;
  padding: 10px 20px; border-radius: 999px; border: 1px solid #e2ddd2;
  background: #fff; cursor: pointer;
}

.shop-filters { position: sticky; top: 88px; }

/* Drawer chrome. Hidden at desktop widths, where .shop-filters is just a
   sticky column; the @media block near the bottom of this file turns these on
   and converts the column into a slide-in panel. */
.shop-filters__head { display: none; }
.filters-backdrop { display: none; }
.filter-block { margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid #eee7db; }
.filter-block:last-child { border-bottom: none; }
.filter-block h4 {
  font-family: var(--ui); text-transform: uppercase; letter-spacing: 2px;
  font-size: 0.72rem; color: #9a9384; margin: 0 0 12px;
}
.filter-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; font-family: var(--body); font-size: 0.98rem;
  color: var(--forest-black); padding: 8px 12px; border-radius: 9px;
  transition: background .14s ease, color .14s ease;
}
.filter-opt:hover { background: #f4f1ea; }
.filter-opt.active { background: var(--forest-black); color: var(--warm-cream); }
.filter-check { display: flex; align-items: center; gap: 10px; font-family: var(--ui); font-size: 0.95rem; color: var(--forest-black); cursor: pointer; padding: 4px 0; }
.filter-check input { width: 17px; height: 17px; accent-color: var(--forest-black); }

.shop-empty { grid-column: 1 / -1; text-align: center; color: #7a7568; padding: 60px 20px; font-size: 1.05rem; }
.shop-empty p { margin: 0 0 18px; }
.shop-empty__reset {
  font-family: var(--ui); font-weight: 600; font-size: 0.95rem; cursor: pointer;
  padding: 11px 24px; border-radius: 999px;
  border: 1px solid var(--forest-black); background: #fff; color: var(--forest-black);
  transition: background .16s ease, color .16s ease;
}
.shop-empty__reset:hover { background: var(--forest-black); color: var(--warm-cream); }

/* ---------- 4. Collections (New Arrivals / Best Sellers / Gifts) ---------- */
.collections-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 24px; }
.collection-card {
  cursor: pointer; text-align: left; padding: 0;
  background: #fff; border: 1px solid transparent; border-radius: 18px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(28, 28, 28, 0.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.collection-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(28, 28, 28, 0.10); }
.collection-card.is-active { border-color: var(--forest-black); }
/* Collection artwork keeps its 4:3 frame and `contain`: these are wide
   decorative thumbnails, and cropping a tall shirt photo to 4:3 would cut far
   more than the square product frame does. Only the surface treatment — the
   off-white and the rounding — is shared with the product cards. */
.collection-card__img {
  aspect-ratio: 4 / 3; background: var(--card-img-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
}
.collection-card__img img {
  max-height: 100%; object-fit: contain;
  border-radius: var(--card-img-radius);
}
.collection-card__label { display: block; padding: 18px 20px 22px; text-align: center; }
.collection-card__label h3 { font-family: var(--heading); font-size: 1.2rem; margin: 0; color: var(--forest-black); }
.collection-card__label p { color: #7a7568; font-size: 0.9rem; line-height: 1.5; margin: 6px 0 0; }
.collection-card__count {
  display: block; margin-top: 12px;
  font-family: var(--ui); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--olive-green);
  font-variant-numeric: tabular-nums;
}

/* ---------- 5. Why Choose ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.why-item { text-align: center; }
.why-item .why-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 12px; }
.why-item h3 { font-family: var(--ui); font-size: 1.05rem; font-weight: 600; margin: 0 0 4px; color: var(--forest-black); }
.why-item p { color: #7a7568; font-size: 0.92rem; margin: 0; }

/* ---------- 6. Newsletter ---------- */
.shop-news { text-align: center; background: #f7f4ee; }
.shop-news h2 { color: var(--forest-black); }
.shop-news p { color: #6b7066; max-width: 520px; margin: 0 auto 22px; }
.shop-news form { display: flex; gap: 12px; max-width: 460px; margin: 0 auto; flex-wrap: wrap; }
.shop-news input {
  flex: 1; min-width: 200px; padding: 14px 18px; border-radius: 999px;
  border: 1px solid #ddd6c8; font-family: var(--ui); font-size: 1rem; background: #fff;
}
.shop-news input:focus { outline: none; border-color: var(--forest-black); }
.shop-news .btn-olive {
  font-family: var(--ui); font-weight: 600; font-size: 1rem; cursor: pointer;
  padding: 14px 30px; border-radius: 999px; border: 2px solid var(--forest-black);
  background: var(--forest-black); color: var(--warm-cream); transition: background .16s ease, border-color .16s ease;
}
.shop-news .btn-olive:hover { background: var(--deep-red); border-color: var(--deep-red); }

/* Section headline used across shop sections */
.shop-headline { text-align: center; margin-bottom: 44px; }
.shop-headline h2 { color: var(--forest-black); }
.shop-headline p { color: #7a7568; max-width: 560px; margin: 6px auto 0; }

/* ============================================================
   Responsive — one ladder, widest first, so later blocks override
   earlier ones predictably:
     <=1080px  three product columns become two
     <=768px   filter sidebar becomes a drawer; pills become a scroll row;
               every touch target grows to 44px
     <=560px   tighter phone spacing, two compact columns
     <=400px   single column on the narrowest phones
   ============================================================ */

@media (max-width: 1080px) {
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .collections-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tablet / phone: filters move into a drawer ---------- */
@media (max-width: 768px) {
  .shop-main { grid-template-columns: 1fr; gap: 20px; }

  /* The button that opens the drawer */
  .filter-toggle {
    display: inline-flex; justify-content: center;
    min-height: 44px; padding: 10px 20px;
  }

  /* Category pills: one swipeable row rather than three wrapped lines */
  .shop-cats {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 4px;
    /* bleed to the screen edges so the row reads as scrollable */
    margin-inline: -28px;
    padding-inline: 28px;
  }
  .shop-cats::-webkit-scrollbar { display: none; }
  .shop-cat {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex; align-items: center;
    min-height: 44px;                 /* touch target */
  }

  /* The sidebar becomes a panel that slides in from the right. Sits above the
     sticky nav (z-index 100) but below toasts (200) and the lightbox (300). */
  .shop-filters {
    position: fixed; z-index: 150;
    top: 0; right: 0; bottom: 0;
    width: min(88vw, 340px);
    display: block;
    margin: 0;
    background: #fff;
    padding: 18px 22px max(28px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: -14px 0 44px rgba(28, 28, 28, 0.18);
    transform: translateX(100%);
    visibility: hidden;               /* also keeps it out of the tab order */
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility .28s;
  }
  .shop-filters.is-open { transform: translateX(0); visibility: visible; }

  .shop-filters__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 18px;
    padding-bottom: 14px; border-bottom: 1px solid #eee7db;
  }
  .shop-filters__title {
    font-family: var(--heading); font-size: 1.3rem; color: var(--forest-black);
  }
  .shop-filters__close {
    width: 44px; height: 44px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer;
    font-size: 1.7rem; line-height: 1; color: var(--muted);
    border-radius: 999px;
  }
  .shop-filters__close:hover { color: var(--deep-red); background: #f4f1ea; }

  .filters-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 140;
    background: rgba(28, 28, 28, 0.48);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
  }
  .filters-backdrop.is-open { opacity: 1; pointer-events: auto; }

  /* Locked while the drawer is open so the page behind doesn't scroll */
  body.filters-open { overflow: hidden; }

  /* Controls inside the drawer, all at 44px */
  .filter-block { margin-bottom: 20px; padding-bottom: 18px; }
  .filter-opt {
    display: flex; align-items: center;
    min-height: 44px; padding: 10px 12px;
  }
  .filter-check { min-height: 44px; gap: 12px; }
  .filter-check input { width: 22px; height: 22px; }
}

/* ---------- Phone ---------- */
@media (max-width: 560px) {
  .card-grid--4, .card-grid--3 { gap: 14px; }
  .collections-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .shop-section { padding: 48px 0; }
  .shop-hero { padding: 40px 20px 24px; }
  .shop-hero h1 { font-size: 2rem; }
  .shop-hero p { font-size: 1.02rem; }
  .shop-cat { padding: 9px 16px; font-size: 0.9rem; }
  .shop-headline { margin-bottom: 30px; }
  .shop-wrap { padding: 0 18px; }
  /* the pill row bleeds to the narrower gutter */
  .shop-cats { margin-inline: -18px; padding-inline: 18px; }
  /* compact cards: drop the long description (the frame inset tightens
     sitewide via --card-img-pad in style.css) */
  .shopcard__desc { display: none; }
  .shopcard__body { padding: 12px 12px 16px; }
  .shopcard__name { font-size: 1.02rem; }
  /* too narrow for price and button side by side — stack them */
  .shopcard__buy { flex-direction: column; gap: 8px; min-height: 0; padding-top: 8px; }
  /* full-width and a proper 44px touch target on phones */
  .shopcard__add { width: 100%; min-height: 44px; }
  /* "Shop by Collection" stays on phones: it's New Arrivals / Best Sellers /
     Gift Ideas now, which the category pills don't cover. */
}

/* ---------- Narrowest phones: one product per row ---------- */
/* At two-up these cards are ~162px wide, where product names wrap to four
   lines. One column gives the photo and the name room to breathe. */
@media (max-width: 400px) {
  .card-grid--4, .card-grid--3 { grid-template-columns: 1fr; gap: 16px; }
  .why-grid { grid-template-columns: 1fr; }
  /* full-width cards have room for the blurb and a side-by-side price row again */
  .shopcard__desc { display: -webkit-box; }
  .shopcard__body { padding: 18px 20px 22px; }
  .shopcard__name { font-size: 1.15rem; }
  .shopcard__buy { flex-direction: row; gap: 12px; min-height: 40px; padding-top: 0; }
  .shopcard__add { width: auto; }
  /* style.css tightens this to 8px for two-up cards; full-width cards want the
     normal inset back */
  :root { --card-img-pad: 12px; }
}

/* ---------- Focus + motion ---------- */
/* The pills and collection cards are the primary controls on this page,
   so they get an unmistakable keyboard focus ring. */
.shop-cat:focus-visible,
.collection-card:focus-visible,
.shopcard__add:focus-visible,
.filter-opt:focus-visible,
.filter-toggle:focus-visible,
.shop-empty__reset:focus-visible,
.shop-scope__clear:focus-visible {
  outline: 2px solid var(--forest-black);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .shopcard, .collection-card { transition: none; }
  .shopcard:hover, .collection-card:hover { transform: none; }
  /* The drawer still appears and dismisses — it just doesn't slide. */
  .shop-filters, .filters-backdrop { transition: none; }
}