/* ============================================================
   VENVITY — Shop Page Styles
   ============================================================ */

.shop-hero {
  text-align: center;
}

.shop-hero .display {
  line-height: 1.05;
}

.shop-hero .display em {
  color: var(--primary);
  font-style: italic;
}

/* ---- Shop Note Banner ---- */
.shop-note {
  background: rgba(111,143,134,.08);
  border-bottom: 1px solid rgba(111,143,134,.15);
  padding: 0.875rem 0;
}

.shop-note__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-mid);
}

.shop-note__inner svg {
  flex-shrink: 0;
  color: var(--primary);
}

.shop-note__inner strong { color: var(--text-dark); }
.shop-note__inner a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---- Featured Product ---- */
.shop-featured {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.shop-featured__visual {
  height: 100%;
  min-height: 420px;
}

.shop-featured__visual .product-visual {
  height: 100%;
  min-height: 420px;
}

.shop-featured__content {
  padding: 3rem 3rem 3rem 0;
}

.shop-featured__tag-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.shop-featured__role {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.shop-featured__bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
  list-style: none;
}

.shop-featured__bullets li {
  font-size: 0.875rem;
  color: var(--text-mid);
  padding-left: 1.125rem;
  position: relative;
  line-height: 1.5;
}

.shop-featured__bullets li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-size: 0.7rem;
}

.shop-featured__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
}

.shop-featured__price {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.shop-featured__ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ---- Shop Grid (2x2) ---- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

/* ---- Shop Card ---- */
.shop-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}

.shop-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.shop-card__visual {
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.shop-card__visual .card-visual {
  height: 200px;
  transition: transform 0.4s ease;
}

.shop-card:hover .shop-card__visual .card-visual {
  transform: scale(1.02);
}

.shop-card__body {
  padding: 1.5rem 1.5rem 0;
  flex: 1;
}

.shop-card__head { margin-bottom: 0; }

.shop-card__title {
  font-size: 1.4rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  color: var(--text-dark);
  transition: color var(--transition);
}

.shop-card__title:hover { color: var(--primary); }

.shop-card__sub {
  font-size: 0.95rem;
  margin-top: 0.25rem;
}

.shop-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.shop-card__feature {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-mid);
  background: var(--bg-main);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 0.2rem 0.6rem;
}

.shop-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border-light);
  margin-top: 1.25rem;
}

.shop-card__actions {
  display: flex;
  gap: 0.5rem;
}

/* ============================================================
   MOBILE-ONLY (up to 768px) card component used by the Venvity
   Annual System's standardized mobile card (added directly in
   shop.html as `.shop-card.shop-card--annual-mobile`, reusing the
   exact same `.shop-card` component/rules above as the other 4
   products). Hidden by default here (desktop/tablet never see it --
   the desktop `.shop-featured` article is what renders the Annual
   System above 768px); the paired `@media (max-width:768px)` rule
   further down swaps the two, showing this card and hiding
   `.shop-featured` only on mobile. Scoped to this one dedicated
   class, unique to shop.html -- no other page or component is
   affected. */
.shop-card--annual-mobile {
  display: none;
}

/* The reused `.ed-tag-photo` badge (css/editorial.css) is
   `position: absolute`, so it needs a positioned ancestor. Scoped
   only to this one mobile card's visual link (the other 4
   `.shop-card__visual` anchors don't contain this badge and are
   left completely untouched). */
.shop-card--annual-mobile .shop-card__visual {
  position: relative;
}

/* ---- Stack Suggestion — "Complete System" premium banner ----
   Redesigned per approved reference: dark charcoal card, rounded
   corners, a subtle vertical divider splitting the left copy from
   the right price/CTA block, a larger (but still elegant) final
   price, and a thin row of minimal benefit labels with line icons
   under the CTA button. Visual language (dark bg, radius, colors,
   typography, .btn styles) is unchanged from the rest of the site. */
.stack-suggestion {
  background: var(--text-dark);
  border-radius: var(--radius-lg);
  padding: 2.5rem 3rem;
}

.stack-suggestion__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.stack-suggestion__info {
  flex: 1;
  min-width: 0;
}

.stack-suggestion h3,
.stack-suggestion .label,
.stack-suggestion p {
  color: rgba(244,241,236,.8);
}

.stack-suggestion h3 {
  color: #f4f1ec;
  font-size: 1.4rem;
}

/* Subtle vertical divider between the left copy and the right
   price/CTA block, matching the approved reference. */
.stack-suggestion__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(244,241,236,.14);
  flex-shrink: 0;
}

.stack-suggestion__value {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-shrink: 0;
}

.stack-suggestion__price {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
}

.stack-suggestion .product-card__price {
  color: #f4f1ec;
}

/* Final price enlarged (still elegant, not oversized) per the
   approved reference — was 1.75rem, now a more prominent 2.5rem. */
.stack-suggestion__final {
  font-size: 2.5rem;
  line-height: 1;
}

.stack-suggestion .label {
  color: rgba(244,241,236,.45);
}

.stack-suggestion__original {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(244,241,236,.35);
  text-decoration: line-through;
  letter-spacing: 0.01em;
}

.stack-suggestion__saving {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.1rem;
}

.stack-suggestion__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

/* Thin row of premium benefit labels with minimalist line icons,
   sitting quietly under the CTA button — subtle and refined rather
   than a marketing badge strip. */
.stack-suggestion__benefits {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
}

.stack-suggestion__benefits li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(244,241,236,.55);
  white-space: nowrap;
}

.stack-suggestion__benefits li svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: rgba(244,241,236,.45);
}

.stack-suggestion__benefits li + li {
  padding-left: 1.1rem;
  border-left: 1px solid rgba(244,241,236,.14);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .shop-featured {
    grid-template-columns: 1fr;
  }

  .shop-featured__visual {
    height: 280px;
    min-height: 280px;
  }

  .shop-featured__visual .product-visual {
    height: 280px;
    min-height: 280px;
  }

  .shop-featured__content {
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  /* ============================================================
     MOBILE-ONLY (up to 768px) -- Fix for excessive blank space
     before the first product card (Venvity Annual System).

     Root cause (confirmed by inspecting the live DOM/CSS, not
     guessed): TWO independent, desktop-tuned, un-overridden
     spacing rules were stacking directly against each other with
     nothing visible in between:
       1. `.shop-section` has no CSS rule of its own anywhere in
          the codebase -- it inherits 100% of its padding from the
          shared `.section` utility (css/style.css):
          `padding: clamp(4rem, 8vw, 8rem) 0;`. At every mobile
          width from 320-768px, 8vw stays under the 4rem floor, so
          this clamps to a flat top padding of 64px.
       2. `.shop-grid` carries the shared `.mt-xl` utility class
          (`margin-top: 4rem` = 64px, css/style.css line 725),
          originally sized to separate the grid from the desktop
          `.shop-featured` card above it. On mobile, `.shop-featured`
          is hidden via `display:none` (approved earlier mobile
          redesign) and collapses out of the flow entirely, and the
          `<h2 class="sr-only">` heading between them is
          `position:absolute` (also takes no flow space) -- so
          `.shop-grid`'s 64px margin-top no longer separates it from
          a visible element; it simply adds on top of
          `.shop-section`'s own already-full 64px top padding.
       Combined, this produced ~128px of dead space between the
       `.shop-note` informational block and the first product card,
       with no fixed height, spacer element or pseudo-element
       involved -- purely two stacked, desktop-sized padding/margin
       values that were never reduced for this specific mobile
       layout.

     Fix: override just the top padding of `.shop-section` and the
     margin-top of `.shop-grid` for mobile, using proportional
     `clamp()` values (not one arbitrary fixed number) so the gap
     scales naturally with real viewport width instead of being
     forced. No negative margins are used. Desktop/tablet (>768px)
     are completely untouched -- `.section`'s and `.mt-xl`'s shared
     rules are never edited directly, and `.shop-section` still
     inherits its bottom padding (space after the Complete System
     banner) and side padding unchanged.

     Before -> after (computed, mobile):
       .shop-section top padding: 64px -> ~20-28px (clamp(1.25rem,4vw,1.75rem))
       .shop-grid margin-top:     64px -> ~32-44px (clamp(2rem,6vw,2.75rem))
       Combined visible gap:     ~128px -> ~52-72px (320-768px range),
       squarely inside the requested ~48-72px target. ============================================================ */
  .shop-section {
    padding-top: clamp(1.25rem, 4vw, 1.75rem);
  }

  .shop-grid {
    grid-template-columns: 1fr;
    margin-top: clamp(2rem, 6vw, 2.75rem);
  }

  .shop-featured__bullets {
    grid-template-columns: 1fr;
  }

  .shop-featured__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .shop-featured__ctas {
    width: 100%;
  }

  .shop-featured__ctas .btn {
    flex: 1;
  }

  .stack-suggestion__inner {
    flex-direction: column;
    text-align: center;
  }

  .stack-suggestion__divider {
    width: 100%;
    height: 1px;
    align-self: stretch;
  }

  .stack-suggestion__value {
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
  }

  .stack-suggestion__price { text-align: center; }

  .stack-suggestion__cta {
    align-items: center;
    width: 100%;
  }

  .stack-suggestion__benefits {
    justify-content: center;
  }

  .stack-suggestion .btn { width: 100%; }

  /* ============================================================
     MOBILE-ONLY (up to 768px) -- Venvity Annual System card swap.
     Desktop/tablet markup and styling of `.shop-featured` (the
     expanded editorial card) is completely untouched above this
     breakpoint; it is only visually hidden here, never deleted, and
     the standardized `.shop-card--annual-mobile` card (added in
     shop.html, reusing the exact same `.shop-card` component as
     Reset Kit / Focus Modules / Quarterly Reset / Seasonal Reset)
     is shown in its place -- so only one Annual System presentation
     is ever visible at a time, on any width. ============================================================ */
  .shop-featured {
    display: none;
  }

  .shop-card--annual-mobile {
    display: flex;
  }

  /* ============================================================
     MOBILE-ONLY (up to 768px) -- Fix for clipped DETAILS button.

     Root cause: `.shop-card__footer` (desktop rule above, padding:
     1.25rem 1.5rem, approx. 48px combined horizontal card padding)
     had no mobile override, and its children used the shared
     `.btn--sm` rule from css/style.css (padding: 0.625rem 1.375rem,
     approx. 44px combined horizontal padding per button, font-size:
     0.75rem) -- also with no mobile override. In the default
     `display:flex; justify-content:space-between` row (no wrap, no
     flex-basis override), the combined intrinsic width of price +
     "Add to Cart" + "Details" (approx. 270-280px including the two
     0.5rem gaps) exceeded the available internal card width on real
     phones (approx. 230-260px at 320-375px viewport widths once the
     card's own border/padding is subtracted), so the row overflowed
     and the last element (DETAILS) was visibly clipped at the card's
     right edge/card boundary.

     Fix: keep `.shop-card__footer` as a flex row (price stays its
     own auto-sized column on the left) but let the actions group
     take the remaining flexible space, with "Add to Cart" (the
     primary action) as a flexible/growing column and "Details" (a
     secondary, content-sized column) pinned to the right -- the
     conceptual 3-column layout requested, achieved with flexible
     flex-basis values rather than any fixed pixel width. Button
     padding/font-size are reduced (still comfortably readable, still
     `white-space: nowrap` so the two-word labels never break
     awkwardly) and each button keeps a 44px minimum tap target.
     Applies identically to all 5 products, since all 5
     `.shop-card` instances (including the new standardized Annual
     System mobile card above) share this exact same footer markup. ============================================================ */
  .shop-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 1rem 1.1rem;
  }

  .shop-card__footer .product-card__price {
    flex: 0 0 auto;
    font-size: clamp(0.95rem, 4vw, 1.1rem);
    white-space: nowrap;
  }

  .shop-card__actions {
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  .shop-card__actions .btn {
    min-height: 44px;
    padding: 0.65rem 0.85rem;
    font-size: clamp(0.62rem, 2.6vw, 0.72rem);
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  /* "Add to Cart" is the primary action -- flexible/growing column,
     visually reading as the centered element of the row. */
  .shop-card__actions .btn--ghost {
    flex: 1 1 auto;
  }

  /* "Details" is the secondary action -- content-sized column,
     pinned to the far right of the row. */
  .shop-card__actions .btn--outline {
    flex: 0 1 auto;
  }

  /* ============================================================
     MOBILE-ONLY (up to 768px) -- "Add to Cart" becomes a filled
     sage button (the site's existing --primary brand color, already
     used by `.btn--primary` elsewhere), replacing the previous
     transparent/ghost style, to establish a clear primary/secondary
     hierarchy against the "Details" button (which keeps its
     existing dark outline style, unchanged). Height, padding,
     border-radius and corner language are identical to "Details" --
     both are the same `.btn` base plus the sizing rule directly
     above; only background/text/border color change here. Hover,
     active/pressed and focus-visible states are added for
     accessible, clear interaction feedback. Scoped narrowly to
     `.shop-card__footer .btn--ghost` -- this does not touch
     `.btn--ghost` anywhere else on the site (e.g. system.html's
     product actions, or the homepage), and does not touch the
     desktop `.shop-featured__ctas` "Add to Cart" button (which
     already uses the filled `.btn--primary` style, unchanged). ============================================================ */
  .shop-card__footer .btn--ghost {
    background: var(--primary);
    color: #fff;
    border: 1.5px solid var(--primary);
  }

  .shop-card__footer .btn--ghost:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
  }

  .shop-card__footer .btn--ghost:active {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(1px);
  }

  .shop-card__footer .btn--ghost:focus-visible {
    outline: 2px solid var(--primary-dark);
    outline-offset: 2px;
  }
}

/* ============================================================
   Narrowest-phone safety net (up to 359px) -- same threshold already
   used elsewhere in this project (css/editorial.css) for its own
   "narrowest phones" fallback. At this width the one-row action
   row above still fits based on computed clamp() values, but as a
   deliberate, controlled fallback matching the task's explicit
   allowance, the price is guaranteed its own first row and the two
   buttons become two equal flexible columns beneath it, so neither
   button can ever be visually cramped below its comfortable content
   width on the smallest real phones. ============================================================ */
@media (max-width: 359px) {
  .shop-card__footer {
    flex-wrap: wrap;
  }

  .shop-card__footer .product-card__price {
    flex: 1 1 100%;
    order: -1;
    margin-bottom: 0.5rem;
  }

  .shop-card__actions {
    flex: 1 1 100%;
  }

  .shop-card__actions .btn {
    flex: 1 1 0;
  }
}

/* Pre-existing rule (unrelated to this task) — kept in its original
   position relative to the max-width:768px block above; it was
   temporarily displaced while adding the new rules in this file and
   is restored here unchanged. */
@media (max-width: 768px) {
  .stack-suggestion {
    padding: 2rem 1.5rem;
  }

  /* ============================================================
     MOBILE-ONLY (up to 768px) -- "Add Complete System to Cart"
     button typography fix.

     Root cause: `#bundle-cta` uses the shared `.btn--lg` rule
     (css/style.css: padding 1.1rem 2.75rem, font-size 0.875rem) plus
     the shared base `.btn` rule (letter-spacing 0.1em, white-space:
     nowrap), with no mobile override anywhere before now. Combined
     with `.stack-suggestion .btn { width:100% }` (mobile rule
     above), the label "ADD COMPLETE SYSTEM TO CART" (28 characters +
     0.1em tracking) at 0.875rem needed more intrinsic width than a
     phone-width button (100% of the stack card's own internal width,
     itself reduced by the card's 1.5rem side padding at this same
     breakpoint) could provide -- so the label nearly overflowed the
     button, right up against its left/right edges.

     Fix: reduce only this button's mobile font-size via a `clamp()`
     (min 0.78rem, preferred approx. 0.85rem at common phone widths,
     max 0.92rem, i.e. slightly under the requested 1rem ceiling since
     the label is long) and trim letter-spacing slightly (0.1em to
     0.03em), which together let the full label sit on one comfortable
     line with visible breathing room from both edges at 375-430px.
     Only at the very narrowest phones does the label wrap to two
     centered lines, which is an accepted, controlled fallback per
     this task's own requirements (no text is ever clipped or touching
     the button's edges at any width). Horizontal padding is nudged in
     slightly at the same time so the button's internal spacing stays
     proportionate to the smaller text; height/background/border-
     radius/link/functionality/wording are all completely unchanged --
     only font-size, letter-spacing and horizontal padding are
     touched, and only on this one button via its unique `#bundle-cta`
     id (used nowhere else on the site). ============================================================ */
  #bundle-cta {
    font-size: clamp(0.78rem, 3.4vw, 0.92rem);
    letter-spacing: 0.03em;
    line-height: 1.35;
    padding: 1.1rem 1.25rem;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .stack-suggestion__benefits {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
  }

  .stack-suggestion__benefits li + li {
    padding-left: 0;
    border-left: none;
  }
}