/* ============================================================================
   shop-page.css — layout rules that belong to the page, not to a component.
   ============================================================================

   Lifted verbatim out of the <style> block in the standalone index.html when the
   shop moved inside the WordPress theme. These are not components — they are the
   handful of page-level rules components.css deliberately does not own.

   DROPPED in the move, because the theme provides them: `.site-header`,
   `.site-header__inner`, `.site-header__brand`, `.cart-button`,
   `.cart-button__count`. The theme's own header, logo and cart badge replace all
   of it.

   Everything here still draws from tokens.css, which now draws from the theme.
   No literal colors, sizes or spacing.
   ========================================================================= */

/* shop.js toggles views with the `hidden` attribute, and `display: grid` on a
   container beats a bare [hidden]. Without !important every view renders at
   once. This is load-bearing. */
[hidden] { display: none !important; }

/* Two-column product and checkout layouts. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

.breadcrumb {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}
.breadcrumb a { color: inherit; }

/* Page tabs on the preflight preview — one per PDF page. */
.tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.tabs button {
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  cursor: pointer;
  color: var(--ink);
}
.tabs button[aria-selected="true"] {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: var(--brand);
}

/* Inline status line under a form. Reserves its own height so the layout does
   not jump when a message appears. */
.status {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  min-height: var(--space-5);
}

/* ============================================================================
   Fitting inside the WordPress theme
   ============================================================================
   These two rules exist only because the shop renders inside
   `twentytwentyfive-child`. They live here, in the shop's own stylesheet, rather
   than in the theme — the theme belongs to whoever builds the design, and this
   file is only loaded on pages carrying the [tsp_shop] shortcode, so the scoping
   is automatic.
   ========================================================================= */

/* The theme paints a watercolor splash as a background-image on `main`,
   positioned `bottom center`. On its own pages `main` ends in whitespace and the
   splash sits in it. The shop's product grid runs to the bottom edge, so the
   splash renders behind the last row of cards and reads as a collision.
   
   Reserve space for it. The splash is 1584x331 and scales to `100% auto`, so its
   height is 20.9% of main's width — hence the vw value, which tracks the image as
   the viewport changes rather than guessing a pixel height that is right at one
   width only. */
main.tsp-page { padding-bottom: 21vw; }

/* The theme's page template prints the WordPress page title, and each shop view
   carries its own heading — so "ONLINE PRINT SHOP" stacks above "Campaign print",
   with two <h1>s in the document.
   
   The shop's heading is the one that changes per view and says what the customer
   is looking at, so the page title is the one to drop. Hidden rather than removed
   because removing it needs a `page-shop.html` template in the theme, which is
   not ours to add. `visibility` is wrong here — the element must take no space —
   and it stays in the DOM, so the duplicate <h1> remains for screen readers until
   the theme gains that template. Flagged in storefront-split.md. */
main.tsp-page > .tsp-container > .tsp-section-title:first-child { display: none; }