/* =========================================================================
   Shop (/shop/) — products grouped into per-category sections.
   Loaded only on the main shop page (see inc/enqueue.php).
   Nova (Delta Appendix C, §5.5, §6): white hero, hairline trust strip,
   chapters alternating white / mist from white, Raised product cards on
   a mist thumbnail well, the closing CTA as the navy bleed into the footer
   (.sh-cta is in the theatre register list in style.css).
   ========================================================================= */

.sh-page { background: var(--w); color: var(--ink-2); overflow-x: hidden; }
.sh-page img { max-width: 100%; }

/* Eyebrow + accent word (shared) */
.sh-eyebrow {
	display: block;
	font-family: var(--fb); font-size: var(--fs-eyebrow); font-weight: 500;
	line-height: 1.4; letter-spacing: var(--ls-eyebrow); color: var(--tx-3);
	margin-bottom: 16px;
}
.sh-eyebrow-line { display: none; }
.sh-grad { color: var(--orange); }
h2 .sh-grad { color: inherit; }   /* Delta §8.4: the accent word lives only in the h1 */

/* ---------- Hero ---------- */
.sh-hero { padding: calc(var(--nav-h) + 56px) var(--gutter) 72px; background: var(--w); }
.sh-orb { display: none; }
.sh-orb-1 { display: none; }
.sh-orb-2 { display: none; }
.sh-hero-in { max-width: var(--max); margin: 0 auto; }
.sh-crumb { display: flex; align-items: center; gap: 8px; font-family: var(--fb); font-size: var(--fs-caption); color: var(--ink-4); margin-bottom: 32px; }
.sh-crumb a { color: var(--ink-3); text-decoration: none; transition: color var(--dur-1) var(--ease); }
.sh-crumb a:hover { color: var(--ink); }
.sh-crumb-cur { color: var(--ink-3); }
.sh-hero-copy { max-width: 820px; }
.sh-hero-title {
	font-family: var(--ff); font-weight: var(--fw-hero); letter-spacing: var(--ls-display); line-height: var(--lh-display);
	font-size: var(--fs-hero); color: var(--ink); max-width: 14ch; margin: 0 0 24px;
}
.sh-hero-lede { font-family: var(--fb); font-size: var(--fs-body-lg); color: var(--ink-2); line-height: var(--lh-body-lg); max-width: 52ch; margin: 0; }

/* Category jump-nav — small ghost links, icon coloured by category (§1.7.7) */
.sh-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.sh-jump-pill {
	display: inline-flex; align-items: center; gap: 8px;
	height: 40px; padding: 0 12px 0 14px; border-radius: var(--rs);
	background: var(--w); border: 1px solid var(--line-2);
	font-family: var(--fb); font-size: .875rem; font-weight: 500; color: var(--ink);
	text-decoration: none;
	transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.sh-jump-pill:hover { background: var(--mist); border-color: var(--ink-3); color: var(--ink); }
.sh-jump-icon { color: var(--ink-2); display: inline-flex; }
.sh-jump-icon svg { width: 16px; height: 16px; }
.sh-jump-count {
	display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
	font-family: var(--fb); font-size: .75rem; font-weight: 600; line-height: 1;
	border-radius: var(--r-xs); background: var(--mist-2); color: var(--ink-2);
}

/* ---------- Trust strip (white, hairline top and bottom) ---------- */
.sh-trust { padding: 24px var(--gutter); background: var(--w); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sh-trust-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.sh-trust-item { display: flex; align-items: center; gap: 10px; font-family: var(--fb); font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.4; }
.sh-trust-item svg { color: var(--teal); flex-shrink: 0; width: 18px; height: 18px; }

/* ---------- Category chapter ---------- */
.sh-cat { padding: var(--sec-y) var(--gutter); background: var(--w); scroll-margin-top: var(--nav-h); }
.sh-cat--alt { background: var(--mist); }
.sh-cat-in { max-width: var(--max); margin: 0 auto; }
.sh-cat-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--col-gap); align-items: end; margin-bottom: 48px; }
.sh-cat-head-main { max-width: 680px; }
.sh-cat-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sh-cat-icon {
	width: 40px; height: 40px; border-radius: var(--r-xs);
	background: var(--mist-2); color: var(--ink);
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sh-cat-icon svg { width: 20px; height: 20px; }
.sh-cat-meta-txt { font-family: var(--fb); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--ls-eyebrow); color: var(--ink-3); }
.sh-cat-title { font-family: var(--ff); font-weight: var(--fw-display); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); font-size: var(--fs-h2); color: var(--ink); margin: 0 0 16px; }
.sh-cat-intro { font-family: var(--fb); font-size: var(--fs-body-lg); color: var(--ink-2); line-height: var(--lh-body-lg); max-width: 52ch; margin: 0; }
.sh-cat-all { font-family: var(--fb); font-size: .9375rem; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; white-space: nowrap; text-decoration: none; transition: color var(--dur-1) var(--ease); }
.sh-cat-all:hover { color: var(--ink); }
.sh-cat-all svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.sh-cat-all:hover svg { transform: translateX(2px); }

/* Category colour (§1.7.7): Packages amber, Lightboards ink, Studio Equipment lavender, Accessories sea green —
   the chapter icon well and the jump-nav icon only */
.sh-cat[id="cat-studio-packages"] .sh-cat-icon, .sh-cat[id="cat-lightboard-studio-packages"] .sh-cat-icon { background: var(--orange-wash); color: var(--orange-lo); }
.sh-cat[id="cat-studio-equipment"] .sh-cat-icon { background: var(--purple-wash); color: var(--purple); }
.sh-cat[id="cat-accessories"] .sh-cat-icon { background: var(--teal-wash); color: var(--teal); }
.sh-jump-pill[href="#cat-studio-packages"] .sh-jump-icon, .sh-jump-pill[href="#cat-lightboard-studio-packages"] .sh-jump-icon { color: var(--orange-lo); }
.sh-jump-pill[href="#cat-studio-equipment"] .sh-jump-icon { color: var(--purple); }
.sh-jump-pill[href="#cat-accessories"] .sh-jump-icon { color: var(--teal); }
.sh-jump-pill[href="#cat-lightboards"] .sh-jump-icon { color: var(--ink); }

/* Product grid */
.sh-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }

/* ---------- Product card — §6 variant 4 (Raised) ---------- */
.sh-card {
	border-radius: var(--r-lg); overflow: hidden;
	background: var(--w); border: 1px solid var(--line);
	display: flex; flex-direction: column;
	color: inherit; text-decoration: none;
	box-shadow: none;
	transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.sh-card:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.sh-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sh-card--oos { opacity: 1; }

/* §5.5 thumbnail well: a black photo and a light-room photo sit on the same grey */
.sh-card-media { position: relative; background: var(--mist); overflow: hidden; border-bottom: 1px solid var(--line); }
.sh-card-media img { width: 100%; height: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.sh-card--oos .sh-card-media img { filter: none; }

.sh-card-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sh-badge {
	display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
	font: 600 .75rem/1 var(--fb); letter-spacing: .01em; text-transform: none; white-space: nowrap;
	border-radius: var(--r-xs); border: 0; box-shadow: none;
}
.sh-badge--tag { background: var(--orange-wash); color: var(--orange-lo); }
.sh-badge--save { background: var(--teal-wash); color: var(--teal-lo); }
.sh-badge--oos { background: var(--mist-2); color: var(--ink-2); }

.sh-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.sh-card-eyebrow { display: block; font-family: var(--fb); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--ls-eyebrow); color: var(--ink-3); margin-bottom: 12px; }
.sh-card-title { font-family: var(--ff); font-weight: 600; font-size: var(--fs-h4); letter-spacing: -.01em; color: var(--ink); margin: 0 0 8px; line-height: var(--lh-h3); }
.sh-card-blurb {
	font-family: var(--fb); font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.55; margin: 0 0 16px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sh-card-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.sh-spec {
	display: inline-block; height: 26px; padding: 0 10px;   /* block, not flex, so the QA pass's 200px ellipsis still works */
	border-radius: var(--r-xs); background: var(--mist-2);
	font: 600 .75rem/26px var(--fb); letter-spacing: .01em; color: var(--ink-2); white-space: nowrap;
}
.sh-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; gap: 14px; }
.sh-card-price { font-family: var(--ff); font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; color: var(--ink); line-height: 1.2; }
.sh-card-price .amount, .sh-card-price .woocommerce-Price-amount { color: var(--ink); }
.sh-card-price del { color: var(--ink-4); font-weight: 400; font-size: .8em; margin-left: 6px; }
.sh-card-price del .amount, .sh-card-price del .woocommerce-Price-amount { color: var(--ink-4); }
.sh-card-price ins { text-decoration: none; }
/* the card's action reads as a small Ghost button (§5.5); the whole card is the link */
.sh-card-cta {
	height: 40px; padding: 0 14px; border-radius: var(--rs);
	background: var(--w); border: 1px solid var(--line-2); color: var(--ink);
	font: 600 .875rem/1 var(--fb);
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0;
	transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.sh-card-cta svg { transition: transform var(--dur-1) var(--ease); }
.sh-card:hover .sh-card-cta { background: var(--mist); border-color: var(--ink-3); color: var(--ink); }
.sh-card:hover .sh-card-cta svg { transform: translateX(2px); }
.sh-card-cta--oos { background: var(--w); border-color: var(--line-2); color: var(--ink-2); }
.sh-card:hover .sh-card-cta--oos { background: var(--mist); color: var(--ink); }

/* Featured (large) card — spans 2 columns, image + content side by side */
.sh-card--featured { grid-column: span 2; flex-direction: row; }
.sh-card--featured .sh-card-media { flex: 1; min-height: 320px; border-bottom: 0; border-right: 1px solid var(--line); }
.sh-card--featured .sh-card-media img { height: 100%; aspect-ratio: auto; min-height: 320px; }
.sh-card--featured .sh-card-body { flex: 1; justify-content: center; padding: 32px; }
.sh-card--featured .sh-card-title { font-size: var(--fs-h3); }
.sh-card--featured .sh-card-blurb { font-size: var(--fs-body); -webkit-line-clamp: 4; }
.sh-card--featured .sh-card-price { font-size: 1.5rem; }

/* ---------- Final CTA — navy bleed into the footer (Delta §10.12 pattern) ---------- */
.sh-cta { padding: var(--sec-y) var(--gutter); background: var(--navy); }
.sh-cta-orb { display: none; }
.sh-cta-card {
	max-width: var(--max); margin: 0 auto;
	padding: 0; border-radius: 0;
	background: none;
	border: 0;
	box-shadow: none;
	display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: var(--col-gap); align-items: center;
}
.sh-cta-copy h2 { font-family: var(--ff); font-weight: var(--fw-display); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); font-size: var(--fs-h2); color: var(--tx); max-width: 20ch; margin: 0 0 16px; }
.sh-cta-copy p { font-family: var(--fb); font-size: var(--fs-body-lg); color: var(--tx-2); line-height: var(--lh-body-lg); max-width: 52ch; margin: 0; }
.sh-cta-actions { display: flex; flex-direction: column; gap: 12px; }
.sh-cta-actions .btn { justify-content: center; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.sh-trust-in { grid-template-columns: 1fr; gap: 12px; }
	.sh-cat-grid { grid-template-columns: repeat(2, 1fr); }
	.sh-card--featured { grid-column: span 2; }
	.sh-cat-head { grid-template-columns: 1fr; gap: 16px; align-items: flex-start; }
	.sh-cta-card { grid-template-columns: 1fr; gap: 28px; }
	.sh-cta-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 600px) {
	.sh-cat-grid { grid-template-columns: 1fr; }
	.sh-card--featured { grid-column: span 1; flex-direction: column; }
	.sh-card--featured .sh-card-media { border-right: 0; border-bottom: 1px solid var(--line); }
	.sh-card--featured .sh-card-media img { aspect-ratio: 4 / 5; min-height: 0; }
	.sh-card--featured .sh-card-body { padding: 20px 22px 24px; }
}

/* Delta §9.3: the arrow nudge is off for reduced motion */
@media (prefers-reduced-motion: reduce) {
	.sh-cat-all:hover svg,
	.sh-card:hover .sh-card-cta svg { transform: none; }
}