/* ==========================================================================
   ARADHNAA — shop.css
   Category shelves and product cards. Written to be reused by the category
   pages later, not just the homepage.

   The page is Paper; the product cards are deliberately dark, so each shelf
   reads as a row of lit objects against the light page.
   ========================================================================== */

.shop{ position:relative; padding-block:var(--space-5) var(--space-6); }

.shop__head{
  display:flex; flex-direction:column; gap:var(--space-2);
  margin-bottom:var(--space-5); max-width:60ch;
}
/* From tablet up the supporting line sits beside the heading instead of
   under it, which is where the vertical space was going. */
@media (min-width:820px){
  .shop__head{
    display:grid; max-width:none;
    grid-template-columns:auto minmax(0, 1fr);
    align-items:end; column-gap:var(--space-7);
    margin-bottom:var(--space-5);
  }
  .shop__head .eyebrow{ grid-column:1; margin-bottom:4px; }
  .shop__head .section-title{ grid-column:1; }
  .shop__head .section-sub{ grid-column:2; grid-row:2; margin-top:0; max-width:52ch; }
}

/* ---------- One category shelf ---------- */
.shelf{ margin-bottom:var(--space-6); }
.shelf:last-child{ margin-bottom:0; }

.shelf__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4); margin-bottom:var(--space-3);
  padding-bottom:var(--space-2);
  border-bottom:1px solid var(--paper-line);
}
.shelf__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(19px, 2.2vw, 24px); letter-spacing:.02em; color:var(--ink);
}
.shelf__count{
  display:block; font-family:var(--font-body); font-style:normal;
  font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--brass-deep); margin-top:4px; font-variant-numeric:tabular-nums;
}
.shelf__all{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding-inline:2px;
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sindoor);
  transition:color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.shelf__all svg{ width:15px; height:15px; stroke:currentColor; fill:none; }
.shelf__all:hover{ color:var(--marigold); gap:11px; }

/* ---------- The scrolling track ----------
   A plain overflow scroller: works with touch, trackpad, keyboard and the
   arrow buttons alike, and needs no JavaScript to be usable. */
.shelf__sub{
  margin:-2px 0 var(--space-4);
  max-width:56ch;
  font-family:var(--font-accent); font-style:italic;
  font-size:15px; line-height:1.5; color:var(--ink-muted);
}
@media (max-width:599px){ .shelf__sub{ font-size:14px; margin-bottom:var(--space-3); } }

.shelf__viewport{ position:relative; }

.shelf__track{
  display:flex; gap:var(--space-4);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:2px;
  padding:4px 2px var(--space-2);
  scrollbar-width:none;               /* Firefox */
}
.shelf__track::-webkit-scrollbar{ display:none; }
.shelf__track:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; border-radius:var(--radius-md); }

/* ---------- Shelf arrows (pointer screens only) ---------- */
.shelf__nav{
  position:absolute; top:calc(50% - var(--space-3)); transform:translateY(-50%);
  z-index:3; display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--paper-surface); color:var(--ink);
  border:1px solid var(--paper-line-strong);
  box-shadow:0 6px 18px -8px rgba(36,18,9,.5);
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             opacity var(--dur-fast) var(--ease-out);
}
.shelf__nav svg{ width:18px; height:18px; stroke:currentColor; fill:none; }
.shelf__nav:hover{ color:var(--marigold); border-color:var(--marigold); }
.shelf__nav[disabled]{ opacity:.3; cursor:default; }
.shelf__nav--prev{ left:-14px; }
.shelf__nav--next{ right:-14px; }

/* Shown everywhere, not just on pointer devices. On a phone they are the
   affordance that says the row moves sideways - and they double as the
   Pause/Stop control the auto-scroll needs, since tapping one stops it. */
.shelf__nav{ display:inline-flex; }

/* On phones the row runs edge to edge, so the arrows sit inside it rather
   than in a gutter that does not exist. */
@media (max-width:899px){
  .shelf__nav{ width:38px; height:38px; }
  .shelf__nav svg{ width:16px; height:16px; }
  .shelf__nav--prev{ left:-6px; }
  .shelf__nav--next{ right:-6px; }
}
@media (pointer: coarse){
  .shelf__nav{ width:44px; height:44px; }
}

/* ==========================================================================
   PRODUCT CARD
   Themed after the reference kit-card: brass-tinted gradient, hairline brass
   border, near-square corners, and an art panel that is a pool of light with
   the motif floating in it rather than a filled tile.
   ========================================================================== */
.p-card{
  flex:0 0 auto; width:190px;
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  border:1px solid var(--paper-line);
  border-radius:4px; overflow:hidden;
  background:var(--paper-surface);
  color:var(--ink);
  box-shadow:0 1px 2px rgba(36,18,9,.05);
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.p-card:hover,
.p-card:focus-within{
  transform:translateY(-6px);
  border-color:var(--brass-deep);
  box-shadow:0 14px 30px -14px rgba(36,18,9,.28);
}

@media (min-width:700px){ .p-card{ width:212px; } }

/* Art panel: fixed band, not a square tile — that alone took ~60px of height
   off every card, and the motif reads better with room around it. */
.p-card__media{
  position:relative; height:150px;
  display:grid; place-items:center;
  border-bottom:1px solid var(--paper-line);
  /* The kit motifs are drawn in brass and gold. On pure white their lighter
     tones wash out, so the art panel keeps a warm sand tint - light, but with
     enough body for gold to still read as gold. */
  background:
    radial-gradient(ellipse 68% 68% at 50% 42%, rgba(226,102,28,.12), transparent 70%),
    linear-gradient(168deg, #FBF2E1, #F4E7D1);
}
.p-card__media img{
  width:72px; height:72px; object-fit:contain;
  transition:transform var(--dur-slow) var(--ease-out);
}
.p-card:hover .p-card__media img{ transform:scale(1.07); }

.p-card__badge{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:4px 9px; border-radius:3px;
  /* Solid Sindoor rather than the Marigold gradient: Sandalwood on Marigold
     was 2.78:1, which no text size rescues. On Sindoor it is 5.84:1, and
     Sindoor is the palette's stated "CTA gradient base" anyway. */
  background:var(--sindoor); color:var(--sandalwood);
  font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 2px 6px -2px rgba(36,18,9,.3);
}

.p-card__body{
  display:flex; flex-direction:column; flex:1;
  padding:16px 16px 18px; gap:0;
}

/* The marigold micro-line the reference used for its Devanagari numeral. */
.p-card__cat{
  font-size:10.5px; font-weight:700; letter-spacing:.12em;
  /* Marigold is 3.4:1 on white, which 10.5px text cannot carry. Sindoor is
     the same family five stops darker and clears AA comfortably. */
  text-transform:uppercase; color:var(--sindoor);
  margin-bottom:7px;
}

.p-card__name{
  font-family:var(--font-display); font-weight:600;
  font-size:14.5px; line-height:1.32; letter-spacing:.01em;
  color:var(--ink); text-wrap:pretty;
}
/* "See details" is the card's link and is stretched over the whole card, so
   the entire card is one tap target. The kit name stays plain text: a second
   link to the same page would make a screen reader announce every card twice.
   The WhatsApp button sits above the overlay and keeps its own destination. */
.p-card{ position:relative; }
.p-card__details::after{
  content:""; position:absolute; inset:0; z-index:1;
  border-radius:inherit;
}
.p-card__cta{ position:relative; z-index:2; }
.p-card__details:focus-visible{ outline:none; }
.p-card:focus-within{ outline:2px solid var(--focus); outline-offset:3px; }

/* One line under the kit name saying what is in it. Clamped to two lines so
   a longer blurb cannot make one card taller than its neighbours. */
.p-card__blurb{
  font-family:var(--font-accent); font-style:italic;
  font-size:13px; line-height:1.4; color:var(--ink-muted);
  margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
@media (max-width:599px){
  .p-card__blurb{ font-size:12.5px; margin-top:4px; }
}

.p-card__price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:7px;
  margin-top:auto; padding-top:12px;
  font-variant-numeric:tabular-nums;
}
.p-card__now{
  font-family:var(--font-display); font-weight:700;
  font-size:16px; color:var(--ink);
}
.p-card__was{ font-size:12.5px; color:var(--ink-subtle); text-decoration:line-through; }
.p-card__off{ font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--success-deep); }

/* On the light card an outline reads as a disabled control, so the CTA is a
   solid pill. Deep green rather than brand green: white on #1E9E58 is 3.45:1,
   on #0F7A40 it is 5.42:1. */
/* Two actions, stacked, "See details" on top. They share a row of vertical
   rhythm so a card with a two-line name and one with a one-line name still
   line their buttons up across a shelf. */
.p-card__actions{
  display:flex; flex-direction:column; gap:6px;
  margin-top:11px;
}
.p-card__details{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:7px 12px;
  border:1px solid var(--paper-line-strong);
  border-radius:var(--radius-pill);
  background:transparent; color:var(--ink);
  font-family:var(--font-body); font-weight:600;
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  transition:border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out);
}
.p-card__details:hover{
  border-color:var(--sindoor); color:var(--sindoor);
  background:rgba(163,44,30,.05);
}
.p-card__cta{
  min-height:36px; padding:8px 12px;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  background:var(--whatsapp-deep); color:#fff;
  font-size:11px; letter-spacing:.05em; white-space:nowrap;
  box-shadow:none;
}
.p-card__cta .btn__icon{ width:15px; height:15px; fill:#fff; }
.p-card__cta:hover{
  transform:none;
  background:var(--whatsapp); border-color:var(--whatsapp); color:#fff;
}
.p-card__cta:hover .btn__icon{ fill:#fff; }

/* A tablet at 768px is still a finger, so the touch minimum follows the
   pointer rather than the viewport width - the width query below only
   handles the narrow-cell sizing. */
@media (pointer: coarse){
  /* Slimmer than the 44px Apple recommends for touch, but well clear of the
     24px WCAG 2.2 AA actually requires of a pointer target. 40px keeps the
     card compact without making it fiddly to tap. */
  .p-card__cta,
  .p-card__details{ min-height:40px; }
}

@media (max-width:599px){

  /* A category grid cell is 160px wide, leaving 132px inside the padding.
     "Order on WhatsApp" at the old size needed 140px and was being clipped,
     so the icon, the gap and the side padding all come down rather than the
     label being shortened to something vaguer. */
  .p-card__cta{
    font-size:10.5px; letter-spacing:.02em;
    gap:6px; padding:10px 8px;
    /* Wrap rather than clip. With the icon dropped below there is room for
       one line in both languages, so this only catches an unlucky set of
       font metrics - and costs a second line instead of a cut-off word. */
    white-space:normal; line-height:1.25; text-align:center;
  }

  /* A grid cell is 158px at 375px, which left the label about 2px of room
     next to the glyph - too little to survive a font swap or a longer
     translation. The button is solid WhatsApp green and says "WhatsApp", so
     dropping the glyph here costs no clarity and buys 19px. Shelf cards are
     190px wide and keep theirs. */
  .p-grid .p-card__cta .btn__icon{ display:none; }
  .p-card__cta .btn__icon{ width:13px; height:13px; }
  .p-card__details{ font-size:10.5px; letter-spacing:.03em; padding:9px 8px; }

  .p-card__media{ height:116px; }
  .p-card__media img{ width:58px; height:58px; }
  .p-card__body{ padding:12px 12px 13px; }
  .p-card__cat{ font-size:9.5px; margin-bottom:5px; }
  .p-card__name{ font-size:13.5px; }
  .p-card__price{ padding-top:9px; gap:6px; }
  .p-card__now{ font-size:15px; }
  .p-card__actions{ margin-top:10px; gap:6px; }
}

/* ---------- Special cards: Custom kit + full catalogue ----------
   These two are dark on purpose: they are not kits, and the contrast marks
   them out as the two ways through rather than two more things to buy. */
.p-card--action{
  background:
    linear-gradient(160deg, rgba(201,161,90,.10), rgba(21,11,7,.4) 60%),
    var(--void);
  border-color:var(--line-strong);
  color:var(--text);
}
.p-card--action:hover,
.p-card--action:focus-within{
  border-color:var(--brass);
  box-shadow:0 14px 30px -14px rgba(21,11,7,.7);
}
.p-card--action .p-card__media{
  border-bottom-color:rgba(201,161,90,.18);
  background:
    radial-gradient(circle at 50% 42%, rgba(240,169,62,.16), transparent 66%),
    linear-gradient(168deg, #2A1509, var(--void));
}
.p-card--action .p-card__media svg{ width:58px; height:58px; }
.p-card--action .p-card__name{ color:var(--text); }
.p-card--action .p-card__blurb{ color:var(--text-muted); }
/* The action cards have no price, so their price slot is a short label —
   set at label scale so it stays on one line and the card matches the
   height of the product cards beside it. */
.p-card--action .p-card__now{
  font-family:var(--font-body); font-weight:700;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ember);
}
/* Same footprint as a product card — they sit in the same shelf. */
.p-card--wide{ width:190px; }
@media (min-width:700px){ .p-card--wide{ width:212px; } }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials{
  padding-block:var(--space-6) var(--space-7);
  text-align:center;
}
.testimonials__eyebrow{
  font-family:var(--font-accent); font-style:italic;
  font-size:17px; color:var(--sindoor); margin-bottom:var(--space-3);
}
.testimonials__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(28px, 4.4vw, 52px); line-height:1.16;
  color:var(--ink); max-width:18ch; margin-inline:auto;
  text-wrap:balance;
}

/* Two rows deep, scrolled sideways. Three cards fill the row on desktop,
   with the next column peeking on narrower screens so the swipe is obvious. */
.testimonials__grid{
  display:grid; gap:var(--space-3);
  grid-auto-flow:column;
  grid-template-rows:repeat(2, 1fr);
  grid-auto-columns:88%;
  margin-top:var(--space-5); text-align:left;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:var(--space-2);
  scrollbar-width:none;
}
.testimonials__grid::-webkit-scrollbar{ display:none; }
.testimonials__grid:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; border-radius:var(--radius-md); }
.testimonials__grid > .quote{ scroll-snap-align:start; }

@media (min-width:600px){
  .testimonials__grid{ grid-auto-columns:calc((100% - var(--space-4)) / 2); gap:var(--space-4); }
}
@media (min-width:960px){
  /* Exactly three across, each filling a third of the row. */
  .testimonials__grid{ grid-auto-columns:calc((100% - 2 * var(--space-5)) / 3); gap:var(--space-5); }
}

/* Star rating — empty stars stay visible so the score reads without colour */
.quote__star svg,
.quote__star.is-empty svg{ width:16px; height:16px; }
.quote__star{ color:var(--marigold); display:inline-flex; }
.quote__star.is-empty{ color:rgba(36,18,9,.22); }

.quote{ scroll-snap-align:start; }
.quote{
  display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-5) var(--space-5);
  background:var(--paper-surface);
  border:1px solid var(--paper-line);
  border-radius:var(--radius-lg);
  box-shadow:0 12px 28px -22px rgba(36,18,9,.5);
}
.quote__stars{ display:flex; gap:3px; }
.quote__stars svg{ width:16px; height:16px; fill:currentColor; }
.quote__text{
  font-family:var(--font-accent); font-style:italic;
  font-size:17px; line-height:1.5; color:var(--ink-muted);
  text-wrap:pretty;
}
.quote__person{ display:flex; align-items:center; gap:var(--space-3); margin-top:auto; }
.quote__avatar{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(240,169,62,.2); color:var(--sindoor);
  font-family:var(--font-display); font-weight:700; font-size:17px;
}
/* display:block — as inline spans these ran together on one line. */
.quote__name{ display:block; font-weight:700; font-size:15px; color:var(--ink); }
.quote__place{ display:block; font-size:13px; color:var(--ink-subtle); margin-top:2px; }

/* Ghost CTA sits on a dark card, so it needs the dark-surface treatment. */
/* "See everything" is a navigation link, not a WhatsApp order, so it has to
   undo the solid green .p-card__cta paints on. It was inheriting that green
   and reading as an order button. */
.p-card__cta--ghost{
  background:transparent; color:var(--sandalwood);
  border-color:var(--line-strong);
  gap:8px;
}
.p-card__cta--ghost:hover{
  border-color:var(--ember); color:var(--ember);
  background:rgba(240,169,62,.10);
}
/* The arrow had no sizing class, so it fell back to the browser default and
   swamped the button. */
.p-card__cta--ghost svg{
  width:15px; height:15px; flex:none;
  stroke:currentColor; fill:none;
}


/* ==========================================================================
   COMPACT SHOP HEADER ON PHONES
   The eyebrow + big title + three-line paragraph + shelf title + count was
   pushing the first product ~370px down the screen. The reference sites get
   you from section heading to product in roughly a third of that.
   ========================================================================== */
@media (max-width:599px){
  .shop{ padding-block:var(--space-4) var(--space-6); }
  .shop__head{ margin-bottom:var(--space-5); gap:var(--space-2); }
  .shop__head .eyebrow{ font-size:13px; margin-bottom:2px; }
  .shop__head .section-title{ font-size:26px; }
  /* The intent is already carried by the hero and the CTA band. */
  .shop__head .section-sub{ display:none; }

  .shelf{ margin-bottom:var(--space-6); }
  .shelf__head{ margin-bottom:var(--space-3); padding-bottom:var(--space-2); }
  .shelf__title{ font-size:17px; }
  /* Count sits beside the title instead of on its own line. */
  .shelf__count{ display:inline; margin-left:8px; font-size:11px; }
  .shelf__all{ font-size:11.5px; }
  .shelf__track{ padding-bottom:var(--space-2); }
}

/* Compact testimonials on phones — the cards were carrying a lot of air. */
@media (max-width:599px){
  .testimonials{ padding-block:var(--space-5) var(--space-6); }
  .testimonials__title{ font-size:26px; }
  .testimonials__eyebrow{ font-size:15px; margin-bottom:var(--space-2); }
  .testimonials__grid{ margin-top:var(--space-4); gap:var(--space-3); }
  .quote{ padding:var(--space-4); gap:var(--space-3); }
  .quote__text{ font-size:15.5px; line-height:1.45; }
  .quote__avatar{ width:38px; height:38px; font-size:15px; }
  .quote__name{ font-size:14px; }
  .quote__place{ font-size:12.5px; }
}