/* =====================================================================
   Cookbook page: rating summary, reader reviews, and the trust row under
   the buy button. Tokens (--ink, --muted, --hair, --card, --amber,
   --orange, --orange-deep, --r-lg, --r-md) come from page.css.

   The review cards are static rather than a carousel — three of them fit
   in a column on a phone and in a row on a desktop, so there is nothing
   to swipe and no dots to keep in sync.
   ===================================================================== */

/* ---------- rating summary ---------- */
/* One quiet line above the price, the way a storefront states a rating — the
   reviews themselves are at the foot of the page. It is a credential, not a
   headline, so it does not compete with the price directly under it. */
.cbrate{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:22px 0 -10px;
}
.cbrate__score{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:19px; font-weight:600; line-height:1;
  letter-spacing:-0.01em; color:var(--ink);
}

/* A 4.6 drawn as five filled stars would be a lie by rounding. The grey row
   is the full scale; the orange row is clipped to the score, so the fifth
   star really is part-filled. */
.cbstars{ position:relative; display:inline-block; line-height:1; }
.cbstars__bg,
.cbstars__fg{
  font-size:15px; letter-spacing:2px;
  font-family:Georgia,'Times New Roman',serif;   /* consistent star glyph width */
}
.cbstars__bg{ color:rgba(243,241,234,0.2); }
.cbstars__fg{
  position:absolute; inset:0; overflow:hidden; white-space:nowrap;
  color:var(--orange-deep);
}
.cbrate__meta{ font-size:13px; color:var(--muted); margin:0; }

/* Sits directly under the rating at the same size — the two read as one
   credential block above the price. */
.cbsold{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:19px; font-weight:600; line-height:1;
  letter-spacing:-0.01em; color:var(--ink);
  margin:9px 0 -6px;
}

/* ---------- review cards ---------- */
/* The reviews use the shared .testi2 carousel from reviews.css so they match
   the testimonials on every other page. Only the star row differs: two of
   these are 4.5, and .testi2__stars is a literal five-star string, so the
   part-filled markup is kept inside the shared card. */
.testi2__card .cbstars{ margin-top:16px; }
.testi2__card .cbstars__bg,
.testi2__card .cbstars__fg{ font-size:14px; letter-spacing:2px; color:var(--amber); }
.testi2__card .cbstars__fg{ color:var(--orange-deep); }

/* ---------- price ---------- */
/* Bodoni's numerals are high-contrast and thin at a glance; this is the one
   number on the page that has to be read instantly. */
.price-tag{
  font-family:'Source Serif 4',Georgia,serif;
  font-weight:600; letter-spacing:-0.02em;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 10px;
}
.price-tag__was{
  font-size:20px; font-weight:400; color:var(--muted);
  text-decoration:line-through; letter-spacing:0;
}
.price-tag__off{
  font-size:14.5px; font-weight:600; letter-spacing:0;
  color:var(--orange-deep);
}
.price-tag small{
  flex-basis:100%; margin-left:0; font-weight:400;
  font-size:13px; color:var(--muted); letter-spacing:0;
}

/* ---------- buy card ---------- */
/* The card is a two-column grid (price left, CTA right) sized for a single
   "₹500 incl. GST". The price now carries an MRP, a discount badge and a tax
   line; beside a button on a 320px screen that pushed the CTA clean off the
   card. One column, full-width CTA. Doubled selector because the page's own
   inline <style> block is later in the cascade. */
.card.buy-card{ grid-template-columns:1fr; }
.card.buy-card .btn{ width:100%; justify-content:center; }
.card.buy-card .trust{ grid-column:1 / -1; }
/* page.css never defines `.btn svg`. While the button was shrink-to-fit the
   icon stayed incidentally small; at width:100% the SVG has no intrinsic size
   and grew to fill the button as a black block. Size and stroke it explicitly. */
.card.buy-card .btn svg{
  width:17px; height:17px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.8;
}

/* ---------- trust row ---------- */
.trust{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; margin-top:20px; padding-top:20px;
  border-top:1px solid var(--hair);
}
.trust__item{ text-align:center; padding:0 4px; }
.trust__item svg{
  width:30px; height:30px; display:block; margin:0 auto 9px;
  stroke:var(--orange-deep); fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.trust__item b{
  display:block; font-size:12.5px; font-weight:600; line-height:1.3;
  letter-spacing:0.02em; color:var(--ink);
}
.trust__item span{
  display:block; font-size:11px; line-height:1.4; color:var(--muted); margin-top:3px;
}
/* 320px is the narrowest phone in use; three columns of two-word labels
   still fit there, but only just, so the text steps down rather than wraps
   into four lines. */
@media (max-width:360px){
  .trust{ gap:4px; }
  .trust__item b{ font-size:11.5px; }
  .trust__item span{ font-size:10px; }
  .trust__item svg{ width:26px; height:26px; }
}