/* ==========================================================================
   Shop page — page-specific styles.
   Loaded after design-system.css and homepage.css; reuses their tokens and
   shared components (disclaimer, placeholder-note, botanical-frame,
   footer, hero-ctas) rather than redefining them.
   Prototype only, not committed, not deployed. Square IS connected as of
   2026-07-25 (see CHANGELOG.md): every product card links to its own real
   Square listing rather than running a checkout on this page directly.
   ========================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
@media (min-width: 640px) {
  .product-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* FIX 2026-07-13, first-review batch: same orphaned-card bug as the
   Individual Sessions .grid-3 (confirmed via direct DOM inspection at
   768px — the Herb Blends & Tea grid's third item, Moringa Powder, sat
   alone in column 1 with an empty column 2 beside it) — the fix wasn't
   carried over when .product-grid was built as a separate component. Same
   pattern applied here: center and span exactly-3-item grids in the
   640-1023px range. */
@media (min-width: 640px) and (max-width: 1023px) {
  .product-grid > :nth-child(3):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 380px;
  }
}

/* FIX 2026-07-25: same orphaned-card bug, new trigger. Adding Booty Bliss,
   Knot Happens, and Root Revival to Body Care brought it to exactly 4
   cards, which sits alone in row 2 at the 1024px+ 3-column layout (3+1),
   the same "lonely card, empty tracks beside it" problem the two rules
   above already fix for the 3-item/tablet and 1-item/all-widths cases.
   Extends the identical pattern to the 4-item/desktop case rather than
   inventing a new fix. If a future addition changes Body Care's count
   again, check whether this still applies or a different item count now
   needs the same treatment. */
@media (min-width: 1024px) {
  .product-grid > :nth-child(4):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 380px;
  }
}

/* A single-product grid (the Soap section today) previously stretched
   into 2-3 empty grid tracks at tablet/desktop width, leaving a lonely
   card with a wide empty gap beside it — flagged directly in the
   first-review. Constrains and centers a lone card at every width instead
   of forcing it into a multi-column grid built for more items. */
.product-grid > :only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 380px;
}

.product-card h3 {
  margin: var(--space-4) 0 var(--space-2) 0;
  font-size: 1.375rem;
}
.product-card__price {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.product-card p {
  font-size: 16px;
  margin-bottom: var(--space-3);
}
.product-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ADDED 2026-07-25: replaces .link-architectural for the per-card "Buy on
   Square" action. That plain italic text link read too quietly once every
   card had one, direct founder feedback was that it needed to catch the
   eye of someone browsing, not just be present.

   Deliberately NOT .btn-primary: design-system.html's own stated rule is
   "the primary button is reserved for booking a paid service, it is
   always filled, never transparent. Secondary and text-link styles are
   for every other action" (the nutrition-booking CTAs are what that's
   protecting). This is its own small filled component instead, sized to
   sit inside a card, with a hover-nudged arrow for a findable, distinct
   action without competing with the site's one true primary CTA.

   FILL COLOR, updated 2026-07-25 on direct founder request ("the pink
   that is already used in the logo"): the logo's actual pink is Signature
   Pink (--color-signature-pink, #FFADAD), but that token is documented
   fill-only "never used as a text or link color" for a reason, measured
   here at 3.04:1 with Forest text and 1.77:1 with white, both well under
   the 4.5:1 AA minimum this project requires on every page. Pink Deep
   (--color-pink-deep, #A85264) is the same brand-pink family, already
   used site-wide as "matched to the existing business card and Practice
   Better portal" (see its definition above), and is the one built to
   carry text: measured at 5.18:1 with Ivory text, and the fill itself
   measures 5.00:1 against the page background, so it reads as MORE
   distinct against the page than the pale logo pink would have, not
   less. This is the same swap already made once before in this file
   (Pink Deep exists specifically because the paler pink failed contrast
   in a different context). Do not swap back to the raw logo pink here
   without re-solving the same contrast problem. */
.product-card__buy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-4);
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ivory);
  background: var(--color-pink-deep);
  border: 1.5px solid var(--color-pink-deep);
  border-radius: var(--radius-button);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-conservatory),
              border-color var(--duration-base) var(--ease-conservatory);
}
.product-card__buy::after {
  content: "\2192";
  font-size: 14px;
  transition: transform var(--duration-base) var(--ease-conservatory);
}
.product-card__buy:hover {
  /* Darkened via filter rather than a new named root token: this is a
     single page-scoped component, not a site-wide color, so it didn't
     seem worth adding a fourth pink to the core palette for one hover
     state. If a second component ever wants this same hover shade,
     promote it to a real --color-pink-deep-hover token instead. */
  filter: brightness(0.88);
}
.product-card__buy:hover::after { transform: translateX(3px); }
.product-tag {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Secondary text token, not raw Moss — Moss measures 2.93:1 on ivory,
     under the 4.5:1 AA minimum, and "Gluten-Free" is a claim a shopper
     has to be able to read. (2026-07-13) */
  color: var(--text-secondary);
  border: var(--border-hairline);
  border-radius: var(--radius-input);
  padding: 3px 8px;
}

/* Category eyebrow row: label plus a short one-line description, so each
   of the three product groups reads as its own small collection rather
   than an undifferentiated wall of cards. */
.category-intro { margin-bottom: var(--space-5); }
.category-intro p { margin-bottom: 0; }

/* ADDED 2026-07-28: FDA OTC Drug Facts panel for Booty Bliss, the site's
   one monograph drug product (skin protectant, 21 CFR Part 347). Kept
   inside <details> so the panel is fully present in markup (readable by
   assistive tech and copy-paste, not hidden content) but doesn't force
   every browsing shopper to read a regulatory label block before they've
   decided they're interested. Boxed and monospaced-adjacent to visually
   read as "this is the legal label," distinct from the marketing copy
   above it, matching how a physical Drug Facts panel reads as a distinct
   box on real packaging. See docs/paula-todo.md — this is a draft based
   on standard monograph phrasing and the founder-confirmed 10% zinc oxide
   concentration; the physical product label must carry matching text,
   and a cosmetic-regulatory consultant or attorney should confirm final
   wording before this is relied on as compliant. */
.drug-facts {
  border: 2px solid var(--color-forest, #1a1a1a);
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0 var(--space-4);
  font-size: 13px;
}
.drug-facts summary {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.drug-facts dl {
  margin: var(--space-3) 0 0;
  border-top: 1px solid var(--border-hairline, #ccc);
  padding-top: var(--space-3);
}
.drug-facts dt {
  font-weight: 700;
  margin-top: var(--space-2);
}
.drug-facts dt:first-child { margin-top: 0; }
.drug-facts dd {
  margin: 2px 0 0;
  color: var(--text-secondary);
}