/* Grafline Award Options — box (etui) + engraving add-ons on the product page.
   Uses the theme's design tokens from global.css so it inherits brand styling. */

.grafline-awo {
	margin: var(--spacing-md, 1.5rem) 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 1.5rem);
}

.grafline-awo__group {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.grafline-awo__label {
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--grafline-text-light, #6b7280);
}

.grafline-awo__opts {
	display: grid;
	gap: 0.5rem;
}

/* Each option is a full-width selectable card. */
.grafline-awo__opt,
.grafline-awo__toggle {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--grafline-border, #e5e7eb);
	border-radius: var(--radius-lg, 0.75rem);
	background: var(--grafline-bg, #fff);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.grafline-awo__opt:hover,
.grafline-awo__toggle:hover {
	border-color: var(--grafline-primary, #ff2a13);
	background: var(--grafline-bg-light, #f9fafb);
}

.grafline-awo__opt input,
.grafline-awo__toggle input {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--grafline-primary, #ff2a13);
	margin: 0;
	cursor: pointer;
}

/* Selected state — driven by the JS class so the whole card reads as active. */
.grafline-awo__opt.is-selected,
.grafline-awo__toggle.is-selected {
	border-color: var(--grafline-primary, #ff2a13);
	background: var(--grafline-primary-light, #fef2f2);
	box-shadow: var(--shadow-sm, 0 2px 4px -1px rgba(0, 0, 0, 0.06));
}

.grafline-awo__opt-body {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	min-width: 0;
}

.grafline-awo__opt-name {
	font-size: var(--font-size-base, 1rem);
	color: var(--grafline-text, #1d1d1f);
	overflow-wrap: anywhere;
}

.grafline-awo__opt-price {
	flex: 0 0 auto;
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: 600;
	color: var(--grafline-text-light, #6b7280);
	white-space: nowrap;
}

.grafline-awo__opt.is-selected .grafline-awo__opt-price,
.grafline-awo__toggle.is-selected .grafline-awo__opt-price {
	color: var(--grafline-primary-dark, #d80f0f);
}

/* Engraving text field — revealed when engraving is ticked. */
.grafline-awo__text {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-top: 0.25rem;
}

.grafline-awo__text.is-hidden {
	display: none;
}

.grafline-awo__text label {
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: 500;
	color: var(--grafline-text, #1d1d1f);
}

.grafline-awo__text textarea {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--grafline-border, #e5e7eb);
	border-radius: var(--radius-md, 0.5rem);
	font-family: inherit;
	font-size: var(--font-size-base, 1rem);
	color: var(--grafline-text, #1d1d1f);
	resize: vertical;
}

.grafline-awo__text textarea:focus {
	outline: 2px solid var(--grafline-primary, #ff2a13);
	outline-offset: 1px;
	border-color: transparent;
}

.grafline-awo__hint {
	font-size: var(--font-size-xs, 0.75rem);
	color: var(--grafline-text-light, #6b7280);
}

/* Running total. */
.grafline-awo__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-top: var(--spacing-sm, 1rem);
	border-top: 1px solid var(--grafline-border, #e5e7eb);
}

.grafline-awo__total-label {
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--grafline-text-light, #6b7280);
}

.grafline-awo__total-value {
	font-size: var(--font-size-2xl, 1.5rem);
	font-weight: 700;
	color: var(--grafline-text, #1d1d1f);
}

/* Keyboard focus must stay visible — these cards are real form controls. */
.grafline-awo__opt input:focus-visible,
.grafline-awo__toggle input:focus-visible {
	outline: 2px solid var(--grafline-primary, #ff2a13);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.grafline-awo__opt-body {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.125rem;
	}
}

/* ── the engraving seen square-on ─────────────────────────────────────────
   The product photo shows where the plate sits; this shows what it says.
   One px-per-cm for every product, so a 14×8 trophy plate really does read
   smaller than a 20×15 plaketa. */
.grafline-awo__flat {
	margin-top: 0.8rem;
	padding: 0.7rem 0.8rem 0.8rem;
	background: #f7f7f8;
	border: 1px solid #e3e3e8;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}
.grafline-awo__flat.is-hidden { display: none; }
.grafline-awo__flat-cap {
	align-self: stretch;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	color: #6d6d78;
}
.grafline-awo__flat-cap b { font-weight: 600; text-transform: uppercase; }
.grafline-awo__flat-face {
	position: relative;
	box-sizing: border-box;
	/* The engraving margin is set in PIXELS from JS. It cannot be a percentage:
	   percentage padding resolves against the CONTAINING BLOCK's width, so a
	   182x65 plate inside a 640px panel got 45px of padding and vanished. */
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	/* never transition width/height — the shrink loop measures this box */
}
.grafline-awo__flat-face > span {
	position: relative;
	max-width: 100%;
	text-align: center;
	line-height: 1.2;
	white-space: pre-wrap;
	/* break-word, not normal: an unbreakable word wider than the plate used to
	   overflow it silently — scrollWidth does not report that, so the shrink
	   loop never saw it. Wrapping turns the overflow into HEIGHT, which
	   scrollHeight does report, and the loop then shrinks until it fits. */
	overflow-wrap: break-word;
}
.grafline-awo__flat-face > span.is-empty { opacity: 0.42; }

/* a metal plate screwed to the base */
.grafline-awo__flat[data-surface="plate"] .grafline-awo__flat-face {
	background: linear-gradient(160deg, #e6c463, #f7e9b6 45%, #c9a23c);
	border: 1px solid rgba(120, 90, 20, 0.6);
	color: #4a3812;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
	box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.45);
}
/* engraved into the glass itself */
.grafline-awo__flat[data-surface="glass"] .grafline-awo__flat-face {
	background: linear-gradient(150deg, #f2f7f9, #dfeaef 55%, #cedce3);
	border: 1px solid rgba(120, 150, 165, 0.55);
	color: rgba(96, 122, 133, 0.95);
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* ── true-size frame chrome ───────────────────────────────────────────────
   Every photo in a category is drawn on one px-per-cm, so absolute size needs
   saying out loud — the bar is computed from the same numbers as the scale. */
.grafline-awo__ruler {
	position: absolute;
	left: 12px;
	top: 10px;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.62rem;
	color: #6d6d78;
	pointer-events: none;
	z-index: 3;
}
.grafline-awo__ruler i {
	display: block;
	height: 7px;
	border: 1px solid #6d6d78;
	border-bottom: 0;
	opacity: 0.75;
}
.grafline-awo__sizetag {
	position: absolute;
	right: 12px;
	bottom: 10px;
	font-size: 0.65rem;
	color: #6d6d78;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid #e3e3e8;
	border-radius: 999px;
	padding: 0.15rem 0.55rem;
	pointer-events: none;
	z-index: 3;
}

/* ── the engraving mapped onto the photo ─────────────────────────────────
   The overlay sits on the image's layout box and carries the SAME scale
   transform, so it stays locked to the photo at every size. */
.grafline-awo__overlay {
	position: absolute;
	pointer-events: none;
	z-index: 2;
}
.grafline-awo__overlay.is-hidden { display: none; }
.grafline-awo__mount {
	position: absolute;
	box-sizing: border-box;
	left: 0;
	top: 0;
	transform-origin: 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(160deg, #e6c463, #f7e9b6 45%, #c9a23c);
	border: 1px solid rgba(120, 90, 20, 0.65);
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.grafline-awo__mount span {
	max-width: 100%;
	text-align: center;
	line-height: 1.15;
	white-space: pre-wrap;
	/* break-word, not normal: an unbreakable word wider than the plate used to
	   overflow it silently — scrollWidth does not report that, so the shrink
	   loop never saw it. Wrapping turns the overflow into HEIGHT, which
	   scrollHeight does report, and the loop then shrinks until it fits. */
	overflow-wrap: break-word;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
	color: #4a3812;
}

/* ── Lettering controls ───────────────────────────────────────────────────
   Font / alignment / weight, mirroring the stamp editor so the two
   configurators feel like one product. */
.grafline-awo__fmt {
	display: grid;
	gap: .5rem;
	margin: .6rem 0 .2rem;
}
.grafline-awo__fmt.is-hidden { display: none; }

.grafline-awo__fmt-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}
.grafline-awo__fmt-lab {
	font-size: .78rem;
	font-weight: 600;
	color: #6b7280;
	/* 3.6rem, not 4.2: at the wider label the bold button wrapped to its own
	   row in the narrow product-summary column. */
	min-width: 3.6rem;
}

.grafline-awo__font {
	flex: 1 1 8rem;
	min-width: 0;
	padding: .45rem .6rem;
	border: 1.5px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	font-size: .85rem;
	cursor: pointer;
}
.grafline-awo__font:focus {
	outline: none;
	border-color: #ff2a13;
	box-shadow: 0 0 0 3px rgba(255, 42, 19, .12);
}

.grafline-awo__btn {
	appearance: none;
	border: 1.5px solid #d1d5db;
	background: #fff;
	border-radius: 8px;
	min-width: 1.95rem;
	height: 1.95rem;
	padding: 0 .35rem;
	cursor: pointer;
	font-size: .85rem;
	line-height: 1;
	color: #374151;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s, background .15s, color .15s;
}
.grafline-awo__btn:hover { border-color: #9ca3af; }
.grafline-awo__btn.is-on {
	border-color: #ff2a13;
	background: rgba(255, 42, 19, .08);
	color: #ff2a13;
}
.grafline-awo__btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 42, 19, .12);
}
.grafline-awo__btn--bold { font-weight: 800; }

.grafline-awo__btn svg { display: block; }

/* Engraving cut INTO glass: no brass plate, just the etched lettering with a
   faint frosted wash so it reads as part of the crystal, matching the
   square-on preview above it. */
.grafline-awo__overlay[data-surface="glass"] .grafline-awo__mount {
	background: rgba(255, 255, 255, 0.10);
	border: 0;
	filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.55));
}
.grafline-awo__overlay[data-surface="glass"] .grafline-awo__mount span {
	color: rgba(74, 96, 106, 0.92);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Under the photo (see the approved design), where there is real width: the
   plate is drawn at true proportions, so it needs room to stay legible. */
.grafline-awo__flat--under {
	margin: 1rem 0 0;
	padding: .85rem .95rem 1rem;
	border: 1px solid var(--grafline-border, #e5e7eb);
	border-radius: 12px;
	background: #fff;
	max-width: 100%;
}
.grafline-awo__flat--under .grafline-awo__flat-face {
	margin-top: .5rem;
}

/* size slider + the extra weight/style toggles */
.grafline-awo__size {
	flex: 1 1 6rem;
	min-width: 0;
	accent-color: #ff2a13;
	cursor: pointer;
}
.grafline-awo__size-out {
	font-size: .74rem;
	font-weight: 700;
	color: #6b7280;
	min-width: 2.6rem;
	text-align: right;
}
.grafline-awo__btn--italic { font-style: italic; font-family: Georgia, serif; }
.grafline-awo__btn--border span {
	display: block;
	width: 12px;
	height: 10px;
	border: 1.6px solid currentColor;
	border-radius: 1px;
}

/* The engraved frame line is cut with the text, so it belongs in both previews. */
.grafline-awo__flat-face.has-border::after,
.grafline-awo__mount.has-border::after {
	content: '';
	position: absolute;
	inset: 7%;
	border: 2px solid currentColor;
	opacity: .55;
	pointer-events: none;
}
.grafline-awo__flat-face,
.grafline-awo__mount { position: relative; }

.grafline-awo__warn {
	margin: .2rem 0 0;
	font-size: .76rem;
	line-height: 1.35;
	color: #b42318;
	background: #fef3f2;
	border: 1px solid #fecdca;
	border-radius: 8px;
	padding: .4rem .55rem;
}
.grafline-awo__warn.is-hidden { display: none; }

/* ── mode: engraving vs UV print ──────────────────────────────────────────
   Engraving cuts one tone; a colour logo has to be printed. Same choice. */
.grafline-awo__mode {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	margin: .6rem 0 .2rem;
}
.grafline-awo__mode.is-hidden { display: none; }
.grafline-awo__modes { display: flex; gap: .4rem; flex-wrap: wrap; }
.grafline-awo__btn--mode {
	min-width: 0;
	height: auto;
	padding: .35rem .6rem;
	font-size: .78rem;
	white-space: nowrap;
}

/* UV print reads as ink on the surface: flat colour, no engraved bevel. */
.grafline-awo__flat-face.is-uv,
.grafline-awo__mount.is-uv {
	color: #12305e;
	text-shadow: none;
}
.grafline-awo__flat-face.is-uv > span,
.grafline-awo__mount.is-uv > span {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
}

/* the customer's own artwork, sitting on the plate */
.grafline-awo__flat-logo,
.grafline-awo__mount-logo {
	position: absolute;
	inset: 9%;
	width: 82%;
	height: 82%;
	object-fit: contain;
	pointer-events: none;
}
.grafline-awo__flat-logo.is-hidden,
.grafline-awo__mount-logo.is-hidden { display: none; }

.grafline-awo__logo { margin: .5rem 0 .2rem; display: grid; gap: .35rem; }
.grafline-awo__logo.is-hidden { display: none; }
.grafline-awo__logo-lab { font-size: .78rem; font-weight: 600; color: #374151; }
.grafline-awo__logo input[type="file"] { font-size: .78rem; max-width: 100%; }
.grafline-awo__logo-clear { align-self: start; width: auto; padding: 0 .6rem; font-size: .74rem; }
.grafline-awo__logo-clear.is-hidden { display: none; }

/* Logo AND text on one plate: artwork on top, words beneath. Absolutely
   positioned artwork sat underneath the lettering and the two overlapped. */
.grafline-awo__flat-face.has-logo,
.grafline-awo__mount.has-logo {
	flex-direction: column;
	justify-content: center;
	gap: 3%;
}
.grafline-awo__flat-face.has-logo .grafline-awo__flat-logo,
.grafline-awo__mount.has-logo .grafline-awo__mount-logo {
	position: static;
	inset: auto;
	width: 100%;
	/* a definite band, not height:auto — in a column flex the auto height
	   collapsed the artwork to a badge */
	height: 55%;
	flex: 0 0 55%;
	min-height: 0;
}
.grafline-awo__flat-face.has-logo > span,
.grafline-awo__mount.has-logo > span {
	flex: 0 0 auto;
	max-width: 100%;
}

/* ── case size ────────────────────────────────────────────────────────────
   One plate fits several cases, so this is a choice, not a variation. */
.grafline-awo__cases {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.grafline-awo__case {
	appearance: none;
	border: 1.5px solid #d1d5db;
	background: #fff;
	border-radius: 10px;
	padding: .4rem .6rem;
	cursor: pointer;
	display: grid;
	gap: .1rem;
	text-align: center;
	line-height: 1.15;
	transition: border-color .15s, background .15s;
}
.grafline-awo__case[hidden] { display: none; }
.grafline-awo__case:hover { border-color: #9ca3af; }
.grafline-awo__case.is-on {
	border-color: #ff2a13;
	background: rgba(255, 42, 19, .06);
}
.grafline-awo__case-dim { font-size: .82rem; font-weight: 600; color: #111827; }
.grafline-awo__case-extra { font-size: .68rem; color: #6b7280; }
.grafline-awo__case.is-on .grafline-awo__case-extra { color: #ff2a13; font-weight: 600; }