/* Fonts the preview poster SVG references (same faces the print master embeds).
   Paths are relative to this file: assets/css/ → assets/fonts/. */
@font-face{ font-family:"Oswald"; font-weight:200 700; font-display:swap; src:url(../fonts/oswald.woff2) format("woff2"); }
@font-face{ font-family:"Saira"; font-weight:100 900; font-display:swap; src:url(../fonts/saira.woff2) format("woff2"); }
@font-face{ font-family:"Anton"; font-weight:400; font-display:swap; src:url(../fonts/anton.woff2) format("woff2"); }
@font-face{ font-family:"JetBrains Mono"; font-weight:400 800; font-display:swap; src:url(../fonts/jetbrains-mono.woff2) format("woff2"); }

/* Studio products: the generated poster IS the hero, so drop WooCommerce's
   stock product-image gallery and let the summary (with the Studio panel) take
   the row, capped to a comfortable width. Scoped to the body flag + our
   template's columns class, and this stylesheet only loads on studio products. */
.pw-studio-product .pw-product-columns > .wp-block-column:first-child{ display:none; }
.pw-studio-product .pw-product-columns > .wp-block-column:last-child{ flex-basis:auto; max-width:760px; }

/* The Studio — product-page panel. Neutral/gallery so the print is the colour. */
.pw-studio{
	--pw-ink:#17150f; --pw-muted:#6e6a5f; --pw-line:#e5dfd3; --pw-paper:#fff;
	display:grid; gap:22px; margin:0 0 24px;
}
@media(min-width:640px){ .pw-studio{ grid-template-columns:minmax(0,1fr) 260px; align-items:start; } }

/* Studio hero: size the poster by height so the whole print clears the fold
   (title + price sit above it). Width follows the A-series ratio — no cropping —
   and the controls tuck in beside it. ~1000/1414 => height * 0.7072. */
@media(min-width:640px){
	.pw-studio-product .pw-studio{ grid-template-columns:auto 260px; justify-content:start; column-gap:40px; }
	.pw-studio-product .pw-stage{ width:clamp(260px, calc((100vh - 360px) * 0.7072), 440px); }
}

.pw-stage{
	margin:0; position:relative; aspect-ratio:1000/1414; border-radius:4px; overflow:hidden;
	background:#f2eee6; border:1px solid var(--pw-line);
	box-shadow:0 24px 48px -30px rgba(0,0,0,.4);
}
.pw-poster{ position:absolute; inset:0; }
.pw-poster svg{ width:100%; height:100%; display:block; }
.pw-stage-empty,.pw-stage-loading{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;
	font:500 14px/1.5 -apple-system,"Segoe UI",Roboto,sans-serif; color:#8595ac; letter-spacing:.02em;
}
.pw-stage-empty.is-error{ color:#ff8f9e; }
/* [hidden] alone loses to the display:flex above — hide explicitly. */
.pw-stage-empty[hidden],.pw-stage-loading[hidden]{ display:none; }

.pw-studio-controls{ display:flex; flex-direction:column; gap:14px; }
.pw-connect{ display:flex; flex-direction:column; gap:8px; }
.pw-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
	font:600 13px/1 -apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:.02em;
	padding:12px 14px; border-radius:3px; border:1px solid var(--pw-line); background:var(--pw-paper); color:var(--pw-ink);
	transition:border-color .14s, background .14s, transform .1s;
}
.pw-btn:hover{ border-color:#cfc7b6; }
.pw-btn:active{ transform:translateY(1px); }
.pw-strava{ background:#fc4c02; border-color:#fc4c02; color:#fff; }
.pw-strava[disabled]{ opacity:.5; cursor:not-allowed; }
.pw-upload{ position:relative; }

.pw-theme-label{ font:600 10.5px/1 ui-monospace,Menlo,monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--pw-muted); margin-top:4px; }
.pw-themes{ display:flex; flex-wrap:wrap; gap:7px; }
.pw-theme{
	display:inline-flex; align-items:center; gap:7px; cursor:pointer;
	font:500 12px/1 -apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:.02em;
	padding:7px 10px; border-radius:2px; border:1px solid var(--pw-line); background:var(--pw-paper); color:var(--pw-muted);
}
.pw-theme .sw{ width:12px; height:12px; border-radius:2px; border:1px solid rgba(0,0,0,.15); }
.pw-theme.on{ color:var(--pw-ink); border-color:var(--pw-ink); }

.pw-studio-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px 8px; margin-top:4px; }
.pw-studio-stats span{ display:flex; flex-direction:column; gap:2px; font:400 10px/1.2 ui-monospace,Menlo,monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--pw-muted); }
.pw-studio-stats b{ font:600 17px/1 -apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:0; color:var(--pw-ink); text-transform:none; }

/* Strava activity picker */
.pw-activities{ display:flex; flex-direction:column; gap:8px; }
.pw-act-label{ font:600 10.5px/1 ui-monospace,Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--pw-muted); }
.pw-act-list{ display:flex; flex-direction:column; gap:6px; max-height:200px; overflow:auto; }
.pw-act{ text-align:left; cursor:pointer; padding:9px 11px; border:1px solid var(--pw-line); border-radius:3px; background:var(--pw-paper); display:flex; flex-direction:column; gap:2px; }
.pw-act:hover{ border-color:#cfc7b6; }
.pw-act.on{ border-color:var(--pw-ink); }
.pw-act b{ font:500 13px/1.2 -apple-system,"Segoe UI",Roboto,sans-serif; color:var(--pw-ink); }
.pw-act span{ font:400 11px/1 ui-monospace,Menlo,monospace; color:var(--pw-muted); }

/* gate: dim the add-to-cart until a run is connected */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }