/* ==========================================================================
   ITV STORE — BASE (loaded on every template)
   Tokens mirror theme.json exactly so CSS custom properties and the block
   editor never disagree. Component styles here (buttons, cards, badges,
   breadcrumbs) are used across header, shop, product, and cart templates,
   which is why they live in the always-loaded base file rather than a
   per-template stylesheet — see reports/asset-loading-map.md.
   ========================================================================== */

:root {
	--c-white: #ffffff;
	--c-black: #0b0b0b;
	--c-yellow: #fedc23;
	--c-charcoal: #1a1a1a;
	--c-mist: #f5f5f5;
	--c-slate: #4b4b4b;
	--c-border: #e6e6e6;
	--c-border-dark: rgba(255, 255, 255, 0.1);
	--c-success: #1a7a3c;
	--c-success-bg: #eaf6ee;
	--c-danger: #b3261e;
	--c-info: #33506b;

	--font-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--radius-card: 10px;
	--radius-btn: 6px;
	--radius-chip: 999px;
	--pad-inline: clamp(20px, 5.2vw, 90px);
	/* 0.1.37: was clamp(40px, 6vw, 96px) — measured live at 82-96px on
	   ordinary desktop widths (1366-1920px), well above the ~64-72px
	   density target. .itv-section--tight's own clamp(28px, 3vw, 44px) was
	   already inside the target range and is untouched. */
	--section-pad: clamp(40px, 4.5vw, 72px);
}

* { box-sizing: border-box; }

/* Classic WooCommerce templates don't get the block theme's automatic
   root-padding-aware constrained layout, so they use this explicit
   container — same max-width/padding as theme.json's contentSize/wideSize
   and the padding rule under styles.spacing. */
.container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--pad-inline); }

img { max-width: 100%; height: auto; }
svg { display: block; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---- icons ---- */
.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon-lg { width: 40px; height: 40px; stroke-width: 2.4; }
.icon-muted { color: #d8d8d8; }

/* ---- buttons ---- */
/* 0.1.37: min-height 48px -> 44px, padding 1.9em -> ~22px — density pass.
   44px sits at the intersection of every target range this button is used
   in (hero CTA 44-46px, product-card/quote CTA 40-44px) and still meets
   the standard 44x44px minimum touch-target recommendation, so mobile tap
   targets aren't affected by this reduction. .btn-sm (already 40px,
   intentionally smaller, used for the two service-tile outline buttons) is
   untouched. */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 22px; border-radius: var(--radius-btn); border: 1px solid transparent;
	font-family: var(--font-head); font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap;
	cursor: pointer; text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: 0 1.3em; font-size: 13.5px; }

.btn-primary { background: var(--c-yellow); color: var(--c-black); border-color: var(--c-yellow); }
.btn-primary:hover { background: #ffe64d; border-color: #ffe64d; box-shadow: 0 6px 18px rgba(254,220,35,.28); }

.btn-dark { background: var(--c-black); color: var(--c-white); border-color: var(--c-black); }
.btn-dark:hover { background: var(--c-yellow); color: var(--c-black); border-color: var(--c-yellow); }

.btn-outline { background: transparent; color: var(--c-black); border-color: var(--c-black); }
.btn-outline:hover { background: var(--c-black); color: var(--c-white); }

.btn-outline-light { background: rgba(255,255,255,.06); color: var(--c-white); border-color: rgba(255,255,255,.5); }
.btn-outline-light:hover { background: rgba(255,255,255,.14); border-color: var(--c-white); }

.btn-ghost { background: transparent; color: var(--c-black); border-color: var(--c-border); }
.btn-ghost:hover { border-color: var(--c-black); }

.btn-whatsapp { background: #fff; color: #1f7a4d; border-color: #bfe3cd; }
.btn-whatsapp:hover { background: #f2fbf6; border-color: #1f7a4d; }

.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- badges / tags ---- */
.badge {
	display: inline-flex; align-items: center; gap: 5px;
	font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
	padding: 4px 9px; border-radius: 4px; line-height: 1.4;
}
.badge-new { background: var(--c-black); color: var(--c-yellow); }
.badge-promo { background: var(--c-danger); color: #fff; }
.badge-stock-in { background: var(--c-success-bg); color: var(--c-success); }
.badge-stock-out { background: var(--c-mist); color: var(--c-slate); }

.price-tag { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--c-black); }
.price-tag ins { text-decoration: none; }
.price-tag del { font-family: var(--font-body); font-weight: 400; font-size: 13.5px; color: var(--c-slate); }

.quote-tag {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase;
	color: var(--c-black); background: #fff; border: 1.5px dashed var(--c-black); padding: 5px 10px; border-radius: 5px;
}

/* ---- cards (shared card shell used by product + content cards) ---- */
.itv-card { border: 1px solid var(--c-border); border-radius: var(--radius-card); background: #fff; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.itv-card:hover { border-color: #d8d8d8; box-shadow: 0 12px 30px rgba(11,11,11,.09); transform: translateY(-2px); }

/* ---- breadcrumbs ---- */
.breadcrumbs { padding-block: 16px; border-bottom: 1px solid var(--c-border); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--c-slate); margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: #c7c7c7; }
.breadcrumbs a:hover { color: var(--c-black); text-decoration: underline; }
.breadcrumbs li[aria-current="page"] { color: var(--c-black); font-weight: 600; }

/* ---- section rhythm ---- */
.itv-section { padding-block: var(--section-pad); }
.itv-section--tight { padding-block: clamp(28px, 3vw, 44px); }
.itv-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-slate); margin-bottom: 12px; }
.itv-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--c-yellow); flex: 0 0 auto; }

/* ---- empty states (no products yet — never faked with sample data) ---- */
.itv-empty-state { text-align: center; padding: 64px 20px; color: var(--c-slate); }
.itv-empty-state .icon-lg { margin: 0 auto 18px; color: #d3d3d3; }
.itv-empty-state p { margin: 0 0 18px; font-size: 15px; }

/* ---- toast / status message (accessible, announced via aria-live at the markup level) ---- */
.itv-form-notice { font-weight: 600; padding: 1em 1.25em; border-radius: 6px; margin-bottom: 1.25rem; font-size: 14px; }
.itv-form-notice.is-success { background: #0b0b0b; color: #fedc23; border-left: 4px solid #fedc23; }
.itv-form-notice.is-error { background: #fff4f4; color: #0b0b0b; border-left: 4px solid #c0392b; }

/* ==========================================================================
   0.1.39 — DESKTOP DENSITY (>=1024px only)
   Approved "NEW 55-60%" tier — replaces 0.1.38's "COMPACT 75-80%" values
   below (same block, new content — not a second competing block). See
   previews/store-55-density-preview.html (approved) for the full rationale:
   target is the desktop store at 100% browser zoom feeling approximately
   like the previous site at ~55% browser zoom, via real dimension
   reduction only. Everything above this block (the 0.1.37 values) stays as
   the unconditional baseline — it serves the "moderate" 768-1023px tablet
   tier, plus whatever reaches <768px before the theme's own
   @media(max-width:782px) mobile rules take over elsewhere; mobile is
   explicitly excluded from this density tier per instruction. This is the
   ONE place --section-pad, .itv-section--tight, .btn, and .price-tag get a
   >=1024px override — do not add a second, competing
   @media(min-width:1024px) block in this file for these selectors; extend
   this one instead, so the final computed value always has a single
   traceable source. See CHANGELOG.md 0.1.39 and the equivalent blocks in
   header-v5.css / shop-v4.css / footer-v3.css / product-v5.css for the
   rest of this tier.

   .btn stays the shared value used by hero CTAs, the homepage quote-panel
   CTA, service-tile CTAs, and the single-product business-support-band
   CTAs (all approved at 34-36px) — shop/related product-card CTAs need a
   tighter 33px and get their own `.card-cta .btn` override in shop-v4.css,
   since that context's approved target (33px) sits just outside this
   shared value. */
@media (min-width: 1024px) {
	:root {
		/* General section padding — flat 32px, not a clamp, per the
		   approved density spec (was 52px). */
		--section-pad: 32px;
	}
	.itv-section--tight { padding-block: 19px; }

	.btn { min-height: 35px; padding: 0 15px; font-size: 11.5px; }

	.price-tag { font-size: 13.5px; }
}