/* ==========================================================================
   components.css — shared storefront components (P1-1, 2026-10-28)

   Loaded after site.css and before site-mobile.css in all three layouts.
   Batch 1: card meta, product-card shell/media, price/semantic text,
   blog-card media, PDP note/chat metadata.
   Batch 2: PDP surfaces (info card / media well / main image), tag chips.
   Values are the exact ones that were previously repeated inline, so this is
   a **zero-visual-change** extraction.

   ⚠️ `.blank-card-title` / `-title-1` stay in site.css — they predate this
   file and are also used by `partials/product_card_row.php`; only the title
   colour moved there so there is still exactly one definition.

   ⚠️ Do not add rules here that must beat a page's body <style> block by
   source order — body styles still win. Page-specific blocks live in their
   own labelled sections at the bottom of this file.
   ========================================================================== */

/* ---- Product card meta (was duplicated in /links + /blanks) ---- */
.blank-card-meta{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}

/* ---- Product list card shell + media (/links, /blanks, pcr rows) ---- */
.shop-card{ border:1px solid var(--border); border-radius:1rem; overflow:hidden; }

.link-card-media{ height:auto; display:block; }
.link-card-media--fade{ transition:opacity .18s; }

.blank-card-img{ height:180px; object-fit:cover; }
.media-fallback{ height:180px; background:var(--light); color:var(--muted); }

/* ---- Surfaces (PDP GPSR block, home facts card) ---- */
/* White panel with the standard hairline border; add --card for the 1rem
   radius used by the PDP compliance block. Kept separate from .shop-card:
   that one also clips its children. */
.surface-bordered{ background:#fff; border:1px solid var(--border); }
.surface-card{ background:#fff; border:1px solid var(--border); border-radius:1rem; }
.bg-light-surface{ background:var(--light); }

/* ---- PDP media well + main image ---- */
.media-well{ position:relative; background:var(--light); border:1px solid var(--border); }
.pdp-main-img{ aspect-ratio:1/1; object-fit:contain; }

/* ---- Tag chips (product_card_row "find similar"; same look as list chips) ---- */
.pcr-tags-label{ font-size:.82rem; color:var(--muted); }
.pcr-tag{
  display:inline-flex; align-items:center;
  padding:.18rem .6rem; font-size:.78rem; color:var(--navy-2);
  text-decoration:none; background:#fff;
  border:1px solid var(--border); border-radius:999px;
  transition:.15s;
}
.pcr-tag:hover{ color:var(--accent); border-color:var(--accent); background:#eaf1ff; }
.pcr-media--empty{ background:var(--light); color:var(--muted); }

/* ---- Price / semantic text utilities ---- */
.price-accent{ color:var(--accent); }
.text-accent{ color:var(--accent); }
.text-navy{ color:var(--navy); }
.breadcrumb-item.active.text-navy{ color:var(--navy); }

/* ---- Blog card media (home preview; list page keeps its 190px inline) ---- */
.blog-card-img{ height:170px; object-fit:cover; object-position:top; }

/* ---- PDP notes / chat link ---- */
.tier-xmas-note{
  padding:.5rem .75rem; border:1px solid #ffd8a8; background:#fff9db;
  border-radius:.6rem; font-size:.85rem; color:#9a6700; font-weight:600;
}
.tier-xmas-note--mt{ margin-top:.6rem; }

/* `.detail-titleOpera a` (site.css) is one point more specific and paints the
   row muted, so the accent has to be re-stated at the same depth. */
.ps-title-chat,
.detail-titleOpera a.ps-title-chat{ color:var(--accent); font-weight:600; }

/* ==========================================================================
   Seasonal tag landing hero — `/links?tag=…` only (goods/index.php)

   Moved verbatim from that page's <style> block (P1-1, 2026-10-28).
   Mobile rule of thumb: title + one line + promise chips, not a full screen —
   the product cards must stay the first-screen subject.
   ========================================================================== */
.psd-tag-hero {
  background: linear-gradient(180deg, rgba(13, 56, 150, .06), rgba(13, 56, 150, 0));
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0 1.25rem;
}
.psd-tag-hero-head { display: flex; align-items: flex-start; gap: .75rem; }
.psd-tag-hero-title {
  font-size: 1.9rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
  flex: 1 1 auto;
}
.psd-tag-hero-body { padding-top: .5rem; }
/* Desktop hides the collapse button (it only saves space on phones). */
.psd-tag-hero-toggle { display: none; }
.psd-tag-hero-sub {
  color: var(--muted);
  font-size: .95rem;
  max-width: 62ch;
  margin: 0 0 .75rem;
}
/* Christmas "buying 10+?" line — two classes so it still wins over the
   mobile `.psd-tag-hero-sub` rule below (the old inline style did). */
.psd-tag-hero-sub.psd-tag-hero-sub--tip { font-size: .9rem; opacity: .9; }
.psd-tag-hero-chips { display: flex; flex-wrap: wrap; gap: .45rem .9rem; }
.psd-tag-hero-chips > span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .28rem .7rem;
}
.psd-tag-hero-chips .bi { color: var(--accent); }
/* Currently unused in the view, kept with the block so a reintroduced CTA
   inherits the same styling. */
.psd-tag-hero-link {
  display: inline-block;
  margin-top: .8rem;
  font-size: .86rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.psd-tag-hero-link:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
  .psd-tag-hero { padding: 1rem 0 .9rem; }
  .psd-tag-hero-title { font-size: 1.45rem; }
  .psd-tag-hero-sub { font-size: .88rem; margin-bottom: .6rem; }
  .psd-tag-hero-chips > span { font-size: .76rem; padding: .22rem .55rem; }

  /* Collapse/expand — phones only. */
  .psd-tag-hero-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin-top: .1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: .95rem;
    line-height: 1;
  }

  /* Collapsed = one title line only, so the product cards own the fold. */
  .psd-tag-hero.is-collapsed { padding: .55rem 0; }
  .psd-tag-hero.is-collapsed .psd-tag-hero-title { font-size: 1.02rem; line-height: 1.35; }
  .psd-tag-hero.is-collapsed .psd-tag-hero-body { display: none; }
}

/* ==========================================================================
   "Who we print for" chip row — home hero (home/index.php)

   Moved verbatim from that page's <style> block (P1-1, 2026-10-28).
   ⚠️ The row lives **inside** <header class="hero">. Pulling it out drops it
   under the stats card (margin-top:-64px; z-index:3) and it disappears.
   The label is hidden below 576px — the chips carry the meaning themselves.
   ========================================================================== */
.who-we-print-for {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem;
  padding-top: .9rem;
}
.wwpf-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-right: .2rem;
}
.wwpf-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .76rem; color: var(--navy-2); line-height: 1.2;
  background: rgba(255,255,255,.72); border: 1px solid var(--border); border-radius: 999px;
  padding: .2rem .55rem; white-space: nowrap;
}
.wwpf-ico { font-size: .9rem; line-height: 1; }
@media (max-width: 575.98px) {
  /* Keep the first screen for the products: one notch smaller. */
  .who-we-print-for { padding-top: .6rem; gap: .28rem .4rem; }
  .wwpf-label { display: none; }
  .wwpf-chip { font-size: .7rem; padding: .16rem .45rem; }
}

/* ==========================================================================
   Variant stack — link PDP (products/goods.php)

   Moved verbatim from that page's <style> block (P1-1, 2026-10-28).
   Every variant renders its own price band / info strip; all copies share one
   grid cell so the buy box does not jump when switching variants. Hidden
   copies use visibility:hidden (still occupy space, not clickable, out of the
   a11y tree). `.variant-stack--band` opts out of the height-stabilising: the
   price band's hidden copies are pulled out of flow so they cannot stretch
   the container.

   ⚠️ `grid-area` must land on direct children — the `>` is required.
   ========================================================================== */
.variant-stack { display: grid; }
.variant-stack > * { grid-area: 1 / 1; min-width: 0; }

.variant-stack--band { position: relative; }
.variant-stack--band > [aria-hidden="true"] {
  position: absolute; top: 0; left: 0; right: 0; min-width: 0;
  visibility: hidden; pointer-events: none;
}

/* ==========================================================================
   PDP layout helpers — goods.php + detail.php (P1-1, 2026-10-28)

   Small repeated declarations from both product pages. Bootstrap already
   covers `flex-shrink-0` / `text-nowrap` / `bg-white`; the rest live here.
   ========================================================================== */
.min-w-0{ min-width: 0; }                       /* gallery main column */
.gzoom-count{ right: .5rem; bottom: .5rem; font-size: .75rem; }

/* Main-media overlays. `display:none` stays inline on purpose: goods-media.js
   clears `mainVideo.style.display` (""), which must fall back to block — a
   class-level `display:none` would keep the video invisible for good. */
.main-pending{
  position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; background: rgba(255,255,255,.86); z-index: 4;
}
.main-video{ aspect-ratio: 9/16; background: #000; }
.size-chart-img{ max-width: 520px; }
.col-size-w{ width: 160px; }                    /* "Size" column in spec tables */
.ws-pre-line{ white-space: pre-line; }          /* CPSC certificate text */
.lh-relaxed{ line-height: 1.75; }               /* GPSR compliance copy */
.ship-card{ background: #fff; border: 1px dashed var(--accent); }

/* ---- About page info blocks (P1-6, 2026-10-28) ---- */
.about-blocks{ display: flex; flex-direction: column; gap: 1rem; }
.about-block{ display: flex; align-items: flex-start; gap: .75rem; }
.about-block > .bi{
  flex: 0 0 auto; margin-top: .15rem;
  font-size: 1.15rem; color: var(--accent);
}
.about-block h3{
  font-size: .98rem; font-weight: 700; color: var(--navy);
  margin: 0 0 .2rem; letter-spacing: -.01em;
}
.about-block p{ margin: 0; font-size: .92rem; line-height: 1.6; }

/* ---- Empty cart (P1-7, 2026-10-28) ---- */
.cart-empty-card{ max-width: 640px; }
.cart-empty-icon{ font-size: 3rem; color: var(--muted); }
.cart-empty-cta{ max-width: 260px; }
.cart-empty-tile{
  text-decoration: none; color: inherit; transition: .2s;
}
.cart-empty-tile:hover{ transform: translateY(-2px); box-shadow: var(--card-shadow); }
.cart-empty-tile > .bi{ font-size: 1.4rem; color: var(--accent); margin-bottom: .5rem; }

/* ---- Guides index (P1-5, 2026-10-28) ---- */
.guides-hero-title{ font-size: 2rem; line-height: 1.2; }
.guides-search{ max-width: 320px; }
.guides-icon{
  width: 44px; height: 44px; border-radius: .8rem; background: #eef4ff;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Light surface panel (corporate quote band) ---- */
.surface-light-card{
  background: var(--light); border: 1px solid var(--border); border-radius: 1rem;
}