/*
=====================================================================
 Belldiva base, reset and layout primitives
 Part of the Belldiva design system. Enqueued by functions.php as
 `belldiva-base`; see assets/css/belldiva.css for the index.
=====================================================================
*/

/* ---------------------------------------------------------------------
   Base / reset (scoped)
   --------------------------------------------------------------------- */
.bd, .bd * { box-sizing: border-box; }
/* The hidden attribute loses to any author display rule (a product card is
   display: flex, so card.hidden = true did nothing to it). The filters and the
   pager rely on the attribute, so make it win everywhere under .bd. */
.bd [hidden] { display: none !important; }
.bd {
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.bd img { max-width: 100%; }
/* :where(:not(...)) leaves designed blog articles (.bd-post-html) to their own CSS without raising specificity. */
.bd a:where(:not(.bd-post-html a)) { color: inherit; text-decoration: none; }
.bd :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.bd .display {
  font-family: 'Kholic', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.002em;
  text-wrap: balance;
}
.bd .eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.bd .label {
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------- */
.bd .wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--gutter); }

.bd section:where(:not(.bd-post-html section)) { padding: var(--space-12) 0; border-bottom: 1px solid var(--line-soft); }
.bd section:where(:not(.bd-post-html section)):last-of-type { border-bottom: none; }

.bd .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.bd .section-head h2 { font-size: var(--text-xl); margin: var(--space-1) 0 0; font-family: 'Kholic', Georgia, serif; font-weight: 400; }
.bd .section-head .more { font-size: var(--text-xs); letter-spacing: 0.05em; color: var(--deep); border-bottom: 1px solid var(--deep); padding-bottom: 2px; }

.bd p.body-copy { color: var(--ink-soft); line-height: 1.7; font-size: var(--text-sm); max-width: 62ch; }

/* Primary pill CTA (was .hero-cta in the concept) */
.bd .bd-btn,
.bd .hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--deep);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s var(--ease-standard), transform 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
}
.bd .bd-btn:hover,
.bd .hero-cta:hover { background: var(--gold-deep); transform: translateY(-1px); box-shadow: var(--shadow); }

/* ---------------------------------------------------------------------
   Image placeholder primitive (the "fill every image box" milestone)
   Use .bd-ph on any image slot; add --1/--2/--3 to pick a gradient.
   When a real image is set (inline background-image or <img>), it wins.
   --------------------------------------------------------------------- */
.bd .bd-ph {
  background: var(--ph-2);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.bd .bd-ph--1 { background-image: var(--ph-1); }
.bd .bd-ph--2 { background-image: var(--ph-2); }
.bd .bd-ph--3 { background-image: var(--ph-3); }
.bd .bd-ph[data-cap]::after {
  content: attr(data-cap);
  position: absolute; left: 14px; bottom: 12px;
  font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.88);
}
.bd .bd-ph > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Any tile that can carry a real photo covers/centres it */
.bd .cat-tile, .bd .gal-tile, .bd .thumb, .bd .portrait { background-size: cover; background-position: center; }

/* =====================================================================
   Full-bleed guard. Sections that bleed past the grid (hero photography,
   the wraparound gallery) use viewport-width maths, which can leave a few
   pixels of sideways scroll on small screens. The concept guards this with
   overflow-x:hidden; `clip` does the same without creating a scroll
   container, so the sticky top nav keeps working.
   ===================================================================== */
html, body { overflow-x: clip; max-width: 100%; }
/* Salient sets body { overflow: hidden }. With the other axis hidden, the
   clip above computes to hidden too, which made <body> a scroll container
   of its own, and position: sticky on the top nav then had nothing to stick
   to: the header scrolled away on every page, phone and desktop. Body clips
   sideways only and overflows downwards normally. */
html body { overflow-x: clip; overflow-y: visible; }
/* With the header sticky, in-page links (Shop the edit, Meet our founder,
   the A to Z) would land their target under it. */
.bd [id] { scroll-margin-top: 96px; }

/* =====================================================================
   Large screens: more room, gently larger type. (Replaces a stepped
   `zoom`, which only magnified the laptop page: same number of products
   per row, upscaled photos, and vw maths that no longer matched.)

   1. The root size rises smoothly from 16px at a 1600px window to 21px at
      2560px. Type and spacing are in rem, so both follow.
   2. The content column widens (--wrap-max in _tokens.css), and grids built
      on auto-fill add columns rather than stretching cards.
   Below 1600px nothing changes: the laptop layout is the reference.
   ===================================================================== */
@media (min-width: 1600px) {
  html { font-size: clamp(16px, calc(7.67px + 0.5208vw), 21px); }
}