/* ==========================================================================
   By Jillian Rose — Shop Hub
   Only loaded on the Shop Hub page template (see functions.php), never
   site-wide. homepage.css is ALSO enqueued on this template (for
   .home-section-title, used by every section heading here). Only
   existing design-system tokens used throughout — no new colors/fonts/
   spacing.
   ========================================================================== */

/* ---- 1. Hero, full bleed. The photo fills the entire section as a
   background image (position absolute, object-fit cover) with a
   gradient scrim behind the text, and the heading, script graphic, and
   button are overlaid on top, left aligned in the photo's own clear
   space. Same structural pattern already live on the Contact hero, the
   Contact thank you banner, and the Privacy Policy and Terms of Use
   hero (bjr-contact-hero, bjr-contact-thankyou, legal-hero prefixed
   classes in contact.css and legal.css), reused here under shop-hero
   prefixed names rather than a new layout built from scratch. ---- */
.shop-hero { padding: 0; }
.shop-hero-media {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.shop-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
  display: block;
  margin: 0;
}
.shop-hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(247,245,242,.95) 0%, rgba(247,245,242,.85) 30%, rgba(247,245,242,.45) 52%, rgba(247,245,242,0) 68%);
  pointer-events: none;
}
.shop-hero-text-wrap { position: relative; z-index: 3; width: 100%; }
.shop-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 460px;
}
.shop-hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  color: var(--color-text);
  margin: 0;
}
/* Real script-graphic upload (attachment #1584), cropped to its real
   visible content before upload. Sized at 320px wide on desktop after
   checking it against the actual photo background (not reused blindly
   from either of the two earlier plain-background numbers, 380px and
   300px) — legible over the gradient scrim, reads as a clear accent
   under the H1 without competing with it or the button below. */
.shop-hero-tagline-img {
  display: block;
  width: 320px;
  height: auto;
  margin: 0 0 var(--space-1);
}

/* ---- 2. Shop by Category — 6 real categories. Standalone Shop-only
   component (shop-category-* classes), built directly here to match a
   reference mockup rather than continuing to override Start Here's
   .start-here-category-tile: tall portrait photos, a plain line icon
   with no circular badge, no description, and no separate "Browse"
   link (the whole tile is the link) are different enough from that
   component that overriding it further would mean overriding nearly
   everything it defines. start-here.css is no longer even enqueued on
   this template (see functions.php) — Start Here's own component/CSS
   is completely untouched.

   The heading stays inside the normal site-wide .wrap (matching every
   other section heading); the grid sits in the wider
   .shop-categories-grid-wrap established in an earlier round (1320px
   max-width, reduced side padding vs .wrap) — unchanged here.

   Tiles have real breathing room now (var(--space-2), 16px, at every
   column count below), so each one needs its own edge rather than
   relying on adjacency — a full 1px border directly on each tile,
   instead of the previous version's shared-edge borders plus one frame
   around the whole flush row. box-sizing:border-box (base.css, global)
   means this border is absorbed inside each grid track's own width,
   not added on top of it, so it doesn't fight the grid's gap math. ---- */
.shop-categories { padding: var(--space-6) 0; }
.shop-categories-grid-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}
.shop-categories-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}
.shop-category-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--color-border);
  transition: opacity .15s ease;
}
.shop-category-tile:hover { opacity: .85; }
/* Tall portrait crop, checked against real crops of all 6 photos before
   switching (same process as the previous two aspect-ratio changes):
   these are wide landscape flatlays (~1.73-2.0:1 native), so 3:4
   portrait crops in significantly tighter than either 4:3 or 3:2 did —
   confirmed nothing is cut awkwardly mid-object on any of the six, just
   a narrower field of view, per the mockup's own tall-photo look.
   border-radius:0 overrides the sitewide img rounding (base.css) —
   flush square corners to match the mockup's frame-and-hairline
   aesthetic, not the site's usual soft-rounded cards. */
.shop-category-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}
.shop-category-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-1);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  flex: 1;
}
.shop-category-icon { width: 20px; height: 20px; color: var(--color-text); }
/* Reserved 2-line height, same technique used for the previous
   iteration's label (now on this smaller caption-style label instead):
   11px font-size at an explicit 1.4 line-height (tighter than the
   inherited body 1.75 — deliberate for this compact uppercase caption
   style, not left to inherit) is 15.4px/line, so 2 lines = ~31px.
   Keeps every tile's total height equal regardless of 1- vs 2-line
   wrapping, so every card in the row bottoms out at the same height. */
.shop-category-label {
  display: block;
  min-height: 31px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ---- 3. Featured product ---- */
.shop-featured { padding: var(--space-5) 0; }
.shop-featured-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
  background: var(--color-bg-secondary);
  border-radius: var(--radius);
  overflow: hidden;
}
.shop-featured-photo-col { display: flex; }
.shop-featured-photo-col img,
.shop-featured-photo-col .shop-thumb-placeholder {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  border-radius: 0;
  aspect-ratio: auto;
}
.shop-featured-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5) var(--space-4) 0;
}
.shop-featured-text .eyebrow { margin-bottom: 0; }
.shop-featured-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
}
.shop-featured-text p { color: var(--color-text-secondary); margin: 0; max-width: 42ch; }
.shop-featured-price {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text) !important;
  margin: var(--space-1) 0 var(--space-1) !important;
}

/* ---- Section head with "View All" (Shop Favorites) — 3-column grid
   (empty / title / link) so the title is mathematically centered over
   the section's full width regardless of the link's presence, matching
   the other section headings on this page (.home-section-title, reused
   directly here rather than the old bespoke .shop-section-head-title
   class, which duplicated it minus text-align:center). The two flanking
   1fr tracks absorb equal leftover space either way, so the title stays
   centered even though only the right track has content. ---- */
.shop-section-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.shop-section-head .home-section-title { grid-column: 2; margin: 0; }
.shop-view-all {
  grid-column: 3;
  justify-self: end;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  text-decoration: none;
}
.shop-view-all:hover { color: var(--color-text); }

/* ---- 4. Shop Favorites — restyled to match the "A Little Something
   For You" freebie cards: badge centered on the image instead of
   corner-anchored, all card content (eyebrow, name, price, CTA)
   centered beneath it, no arrow icon on the CTA. ---- */
.shop-favorites { padding: var(--space-6) 0; }
/* Same 1320px/--space-2 container as .shop-categories-grid-wrap
   directly above this section, so the two rows of 6 cards share the
   same left/right edges — the heading/View All row above stays in the
   normal 1140px .wrap, only the grid's own container is widened. */
.shop-favorites-grid-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}
/* Matches .shop-categories-grid's gap (--space-2) instead of the
   sitewide .card-grid default (--space-4), so column spacing lines up
   with the category tiles above too, not just the outer edges. */
.shop-favorites-grid { gap: var(--space-2); }
@media (min-width: 901px) {
  .shop-favorites-grid { grid-template-columns: repeat(6, 1fr); }
}
.shop-favorites-grid .shop-coming-soon-badge {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
/* Text block below the image matches the "A Little Something For You"
   freebie cards' typography exactly, property for property — not just
   centered, but the same gap between elements and the same eyebrow/
   title/price/CTA font family, size, weight, line-height, and margins
   — so both card types share one typography hierarchy on this page
   instead of each having its own. */
.shop-favorites-grid .card-body {
  align-items: center;
  text-align: center;
  gap: 6px;
}
.shop-favorites-grid .card .eyebrow {
  order: 0;
  color: var(--color-accent-dark);
  font-size: var(--text-eyebrow);
  margin-top: 0;
  margin-bottom: 0;
}
.shop-favorites-grid .card h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  margin: 0;
}
.shop-card-price {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text);
  margin: 0 0 4px !important;
  order: 3;
}
.card .shop-card-price ins { text-decoration: none; }
.card .shop-card-price del { color: var(--color-text-secondary); font-weight: 400; margin-right: 6px; }
.card .btn-tertiary { order: 4; font-size: 11px; }

/* ---- 5. A Little Something For You — real freebies as compact
   photo+text pairs (not the site's usual vertical .card), plus the
   newsletter card as one more cell in a plain 4-column grid. Blush
   background is the same rgba(182,138,147, x) derivation of
   --color-accent already used for the Contact page's info-column wash
   and Start Here's Most-Loved Posts section — not a new color, matching
   the mockup's tinted section here specifically (this section was the
   only one still on plain --color-bg-secondary). ---- */
.shop-freebies { padding: var(--space-6) 0; background: rgba(182,138,147,.08); }
/* Outer 3fr/2fr split decouples the heading (inside .shop-freebies-
   products) from the newsletter card, so "A Little Something For You"
   centers only over the product cards' own width, not the full section
   — the newsletter card sits outside that centering, off to the side.
   Widened from the original 3fr/1fr (newsletter used to be sized to
   match a single product-card column) to 3fr/2fr so the newsletter
   card has enough room for its horizontal photo-left/content-right
   composition without the text cramming — the empty-freebies case still
   can't strand the newsletter card the way the original broken version
   did: with zero product items, .shop-freebies-grid has zero rows and
   simply collapses to 0 height, it doesn't reserve visible empty column
   tracks the way a populated single shared row would. */
.shop-freebies-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-3);
  align-items: stretch;
}
.shop-freebies-products .home-section-title { margin-bottom: var(--space-3); }
.shop-freebies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}
/* Vertical, centered card — full-bleed image on top (matching a normal
   product card image, same aspect-ratio convention as the sitewide
   .card component's .card-thumb) with the text content centered in its
   own padded area below, rather than a small centered square floating
   inside the card's own padding. overflow:hidden clips the flush image
   to the card's rounded corners, same technique as .card. */
.shop-freebie-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.shop-freebie-item .shop-card-thumb-wrap { width: 100%; }
.shop-freebie-item .shop-card-thumb,
.shop-freebie-item .shop-thumb-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}
/* Coming Soon badge centers on the placeholder photo here specifically
   (Favorites cards elsewhere on the page keep the default top-left
   corner placement — this override is scoped to freebie items only).
   Still centers correctly over the now-larger image area since the
   positioning is percentage-based against .shop-card-thumb-wrap. */
.shop-freebie-item .shop-coming-soon-badge {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.shop-freebie-item-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: var(--space-2);
}
.shop-freebie-item-body .eyebrow { margin-bottom: 0; }
.shop-freebie-item-body h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0;
}
.shop-freebie-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin: 0 0 4px !important;
}
.shop-freebie-item-price {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text);
  margin: 0 0 2px;
}
.shop-freebie-item .btn-tertiary { font-size: 11px; }
/* Newsletter card — horizontal photo-left/content-right composition
   matching the provided reference: envelope photo flush against the
   card's left edge (own rounded corner via overflow:hidden on the
   card), text column centered vertically alongside it. Real script-
   graphic PNG (attachment #1601, cropped to its real visible content
   before upload, same convention as every other script graphic on this
   site) replaces the plain-text eyebrow that was here before. */
.shop-freebie-newsletter {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.shop-freebie-newsletter-photo {
  width: 42%;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 0;
  display: block;
  margin: 0;
}
.shop-freebie-newsletter-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
}
.shop-freebie-newsletter-title-img {
  display: block;
  width: 195.5px; /* 170px + 15% */
  height: auto;
}
.shop-freebie-newsletter-text p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}
/* Scoped to just this button instance (not the shared .btn-primary
   class) — "Let's Stay in Touch" was wrapping onto two lines inside
   this card's narrower text column at the default 13px/.12em tracking. */
.shop-freebie-newsletter-text .btn-primary {
  font-size: 11px;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ---- 6. Shop by Occasion + gift guide ---- */
.shop-occasion { padding: var(--space-6) 0 var(--space-4); }
.shop-gift-guide-section { padding: 0 0 var(--space-6); }
.shop-occasion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.shop-occasion-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
}
.shop-occasion-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 0;
}
.shop-occasion-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text);
}
.shop-gift-guide {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: var(--space-3);
  align-items: stretch;
}
.shop-gift-guide-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 0;
}
.shop-gift-guide-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-1);
  background: var(--color-bg-secondary);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.shop-gift-guide-text .eyebrow { margin-bottom: 0; }
.shop-gift-guide-text h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  margin: 0;
  color: var(--color-text);
}

/* ---- Shared: Coming Soon badge overlay — a product can be genuinely
   live (real page, shows up in these archives) while still lacking a
   finished file/photo. Wraps the thumbnail so the badge can sit in the
   corner regardless of whether the thumb is a real photo or the dashed
   placeholder box below. ---- */
.shop-card-thumb-wrap { position: relative; }
.shop-coming-soon-badge {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  z-index: 2;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.shop-freebie-item .shop-card-thumb-wrap { flex-shrink: 0; }

/* ---- Shared: missing-photo placeholder for product cards ---- */
.shop-thumb-placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border-interactive);
}
.shop-thumb-placeholder .icon { width: 26px; height: 26px; color: var(--color-text-secondary); }

@media (max-width: 900px) {
  .shop-hero-media { min-height: 420px; }
  .shop-hero-text { max-width: 100%; }
  /* Same top-to-bottom fallback used on the Contact and legal full
     bleed heroes at this breakpoint. The photo crops narrower here, so
     a left-right fade can't rely on the same negative space. */
  .shop-hero-gradient {
    background: linear-gradient(180deg, rgba(247,245,242,.95) 0%, rgba(247,245,242,.88) 55%, rgba(247,245,242,.55) 100%);
  }
  .shop-categories-grid { grid-template-columns: repeat(3, 1fr); }
  .shop-featured-inner { grid-template-columns: 1fr; }
  .shop-featured-text { padding: var(--space-4); }
  .shop-featured-photo-col img, .shop-featured-photo-col .shop-thumb-placeholder { min-height: 220px; }
  .shop-freebies-layout { grid-template-columns: 1fr; }
  .shop-occasion-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-gift-guide { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .shop-freebies-grid { grid-template-columns: 1fr; }
  .shop-freebie-newsletter { flex-direction: column; }
  .shop-freebie-newsletter-photo { width: 100%; height: 200px; }
  .shop-hero-media { min-height: 360px; }
  /* Narrow crop pulls in from both sides. Checked visually against a
     mockup at this width: biasing the crop right (matching the
     notebook, coffee, candle, and vase cluster, roughly the right half
     of the source photo) keeps the subjects in frame instead of a
     center crop landing on the empty space and subject boundary. */
  .shop-hero-photo { object-position: 80% center; }
  .shop-hero-tagline-img { width: 230px; }
}
@media (max-width: 560px) {
  .shop-categories-grid { grid-template-columns: repeat(2, 1fr); }
}