/*
 * Vellren components (master plan §8). Tokens only. Every component has default, hover,
 * focus-visible, active, disabled, loading, error and empty states where they apply.
 * Inside `.v-dark` every component switches automatically through the semantic tokens.
 * Component motion follows the Motion Contract (§7.1); reveal/scroll motion lives in motion-core.js.
 */

/* ================================================================ Icons */
.v-icon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	flex: none;
	fill: currentColor;
	vertical-align: -0.25em;
}
.v-icon--lg { width: 1.5em; height: 1.5em; }

/* ================================================================ Buttons
   Primary: Hide bg, Paper text. Secondary: 1px outline. On dark sections both
   switch automatically (Paper bg / Ink text). Label <= 3 words, never wraps on desktop. */
.v-btn,
.elementor-widget-button .elementor-button,
.woocommerce-account .woocommerce .button {
	--_bg: var(--v-btn-primary-bg);
	--_bg-hover: var(--v-btn-primary-bg-hover);
	--_fg: var(--v-btn-primary-text);
	--_border: var(--v-btn-primary-bg);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--v-space-2);
	min-height: var(--v-btn-h);
	padding: var(--v-space-3) var(--v-btn-px);
	border: var(--v-hairline) solid var(--_border);
	border-radius: var(--v-radius);
	background: var(--_bg);
	color: var(--_fg);
	font-family: var(--v-font-body);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-ui);
	line-height: var(--v-lh-ui);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	isolation: isolate;   /* the hover fill sits between the background and the label */
	transition:
		background-color var(--v-dur-hover) var(--v-ease-out),
		border-color var(--v-dur-hover) var(--v-ease-out),
		color var(--v-dur-press) var(--v-ease-out),
		transform var(--v-dur-press) var(--v-ease-out);
}
.v-btn:hover,
.elementor-widget-button .elementor-button:hover,
.woocommerce-account .woocommerce .button:hover { color: var(--_fg); }

/* Hover fill (§7.1): rises from the bottom edge, leaves upwards, faster out than in.
   It covers the border too, so the outline and fill always match. Fine pointers only:
   on touch a tap would leave the fill stuck, so touch gets the press feedback alone. */
.v-btn::before,
.elementor-widget-button .elementor-button::before,
.woocommerce-account .woocommerce .button::before {
	content: "";
	position: absolute;
	inset: calc(var(--v-hairline) * -1);
	z-index: -1;
	background: var(--_bg-hover);
	transform: scaleY(0);
	transform-origin: 50% 0%;
	transition: transform var(--v-dur-fill-out) var(--v-ease-out);
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
	.v-btn:hover::before,
	.elementor-widget-button .elementor-button:hover::before,
	.woocommerce-account .woocommerce .button:hover::before {
		transform: scaleY(1);
		transform-origin: 50% 100%;
		transition-duration: var(--v-dur-ui);
	}
}
@media (hover: none) {
	.v-btn:active,
	.elementor-widget-button .elementor-button:active,
	.woocommerce-account .woocommerce .button:active { background: var(--_bg-hover); }
}
/* Press feedback on every button (§7.1): immediate, subtle */
.v-btn:active,
.elementor-widget-button .elementor-button:active,
.woocommerce-account .woocommerce .button:active {
	transform: scale(var(--v-btn-press-scale));
}
.v-btn--secondary,
.woocommerce-account .woocommerce-orders-table .button {
	--_bg: transparent;
	--_bg-hover: var(--v-btn-secondary-text);
	--_fg: var(--v-btn-secondary-text);
	--_border: var(--v-btn-secondary-border);
}
@media (hover: hover) and (pointer: fine) {
	/* The label turns light only once the fill has passed its middle (never light-on-light). */
	.v-btn--secondary:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
		color: var(--v-surface);
		transition-delay: 0ms, 0ms, var(--v-dur-press), 0ms;
	}
}
.v-btn--lg { min-height: var(--v-control-h-lg); }
.v-btn--block { display: flex; width: 100%; }
.v-btn--icon {
	min-width: var(--v-btn-h);
	padding-inline: var(--v-space-3);
}
/* Disabled */
.v-btn:disabled,
.v-btn[aria-disabled="true"] {
	--_bg: var(--v-disabled-bg);
	--_bg-hover: var(--v-disabled-bg);
	--_fg: var(--v-disabled-text);
	--_border: var(--v-disabled-bg);
	cursor: not-allowed;
	transform: none;
}
.v-btn:is(:disabled, [aria-disabled="true"], [aria-busy="true"])::before { transform: scaleY(0) !important; opacity: 0 !important; }
/* Loading (state machine: "Add to bag" -> "Adding…" -> "Added ✓"): the Stitch runs under the label */
.v-btn[aria-busy="true"] {
	cursor: progress;
	transform: none;
}
.v-btn[aria-busy="true"]::after {
	content: "";
	position: absolute;
	left: var(--v-btn-px);
	right: var(--v-btn-px);
	bottom: var(--v-space-2);
	height: var(--v-stitch-width);
	background-image: repeating-linear-gradient(90deg, currentColor 0 var(--v-stitch-dash), transparent var(--v-stitch-dash) calc(var(--v-stitch-dash) + var(--v-stitch-gap)));
	background-size: calc(2 * (var(--v-stitch-dash) + var(--v-stitch-gap))) 100%;
	animation: v-stitch-run var(--v-dur-stitch-run) linear infinite;
}
@keyframes v-stitch-run {
	to { background-position: calc(2 * (var(--v-stitch-dash) + var(--v-stitch-gap))) 0; }
}
.v-btn[data-state="done"] { --_bg: var(--v-success); --_bg-hover: var(--v-success); --_border: var(--v-success); --_fg: var(--v-paper); }   /* 6.37:1 */

/* Arrow link-button: "Shop jackets ->" (arrow shifts 4px on hover) */
.v-btn__arrow {
	transition: transform var(--v-dur-hover) var(--v-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.v-btn:hover .v-btn__arrow,
	.v-arrow-link:hover .v-btn__arrow,
	.v-tile:hover .v-btn__arrow { transform: translateX(var(--v-space-1)); }
}
.v-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--v-space-2);
	min-height: var(--v-hit-min);
	color: var(--v-text);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-ui);
	text-decoration: none;
}

/* ================================================================ Form fields
   Label above, helper below, error below with icon. No placeholder-as-label. */
.v-field {
	display: grid;
	gap: var(--v-space-2);
	min-width: 0;
}
.v-field__label {
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
	color: var(--v-text);
}
.v-field__optional {
	font-weight: var(--v-weight-regular);
	color: var(--v-text-muted);
}
.v-input,
.v-select,
.v-textarea,
.woocommerce-account .woocommerce :is(input.input-text, select, textarea) {
	width: 100%;
	min-height: var(--v-field-h);
	padding: var(--v-space-3) var(--v-space-4);
	border: var(--v-hairline) solid var(--v-field-border);
	border-radius: var(--v-radius);
	background: var(--v-field-bg);
	color: var(--v-field-text);
	font-size: var(--v-text-body);   /* >= 16px: no iOS zoom on focus */
	line-height: var(--v-lh-ui);
	appearance: none;
	transition: border-color var(--v-dur-hover) var(--v-ease-out);
}
.v-textarea { min-height: calc(var(--v-field-h) * 2.5); resize: vertical; }
.v-input::placeholder,
.v-textarea::placeholder,
.woocommerce-account .woocommerce :is(input.input-text, select, textarea)::placeholder { color: var(--v-text-muted); opacity: 1; }
.v-input:hover,
.v-select:hover,
.v-textarea:hover,
.woocommerce-account .woocommerce :is(input.input-text, select, textarea):hover { border-color: var(--v-border-strong); }
.v-input:focus-visible,
.v-select:focus-visible,
.v-textarea:focus-visible,
.woocommerce-account .woocommerce :is(input.input-text, select, textarea):focus-visible { border-color: var(--v-field-border-focus); }
/* Select: wrap in .v-select-wrap; the caret is a mask painted in currentColor (works on dark too) */
.v-select-wrap {
	position: relative;
	display: block;
	color: var(--v-text);
}
.v-select-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--v-space-4);
	width: var(--v-caret-size);
	height: var(--v-caret-size);
	margin-top: calc(var(--v-caret-size) / -2);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}
.v-select {
	padding-right: var(--v-space-9);
	cursor: pointer;
}
.v-field__help {
	font-size: var(--v-text-small);
	color: var(--v-field-help);
}
.v-field__error {
	display: flex;
	align-items: flex-start;
	gap: var(--v-space-2);
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
	color: var(--v-field-error);
}
.v-field__error[hidden] { display: none; }
.v-field.is-invalid :is(.v-input, .v-select, .v-textarea),
:is(.v-input, .v-select, .v-textarea)[aria-invalid="true"],
.woocommerce-account .woocommerce :is(input.input-text, select, textarea)[aria-invalid="true"] {
	border-color: var(--v-field-error);
	border-width: var(--v-hairline-strong);
	padding: calc(var(--v-space-3) - var(--v-hairline)) calc(var(--v-space-4) - var(--v-hairline));
}
.v-field.is-valid :is(.v-input, .v-select, .v-textarea) { border-color: var(--v-positive); }
:is(.v-input, .v-select, .v-textarea):disabled,
.woocommerce-account .woocommerce :is(input.input-text, select, textarea):disabled {
	background: var(--v-disabled-bg);
	color: var(--v-disabled-text);
	border-color: var(--v-disabled-bg);
	cursor: not-allowed;
}
/* Input with unit toggle (cm / in) */
.v-input-group {
	display: flex;
	align-items: stretch;
}
.v-input-group .v-input { flex: 1; min-width: 0; }
.v-input-group__addon {
	display: inline-flex;
	align-items: center;
	padding-inline: var(--v-space-4);
	border: var(--v-hairline) solid var(--v-field-border);
	border-left: 0;
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
}

/* Checkbox and radio: whole label is the hit target (44px) */
.v-check {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--v-space-3);
	min-height: var(--v-hit-min);
	padding-block: var(--v-space-3);
	cursor: pointer;
	font-size: var(--v-text-small);
	line-height: var(--v-lh-ui);
}
.v-check input {
	appearance: none;
	flex: none;
	width: var(--v-check-size);
	height: var(--v-check-size);
	margin: 0;
	border: var(--v-hairline) solid var(--v-field-border);
	border-radius: var(--v-radius);
	background: var(--v-field-bg);
	cursor: pointer;
	transition: background-color var(--v-dur-press) var(--v-ease-out), border-color var(--v-dur-press) var(--v-ease-out);
}
.v-check input[type="radio"] { border-radius: var(--v-radius-round); }
.v-check input:checked {
	background-color: var(--v-action);
	border-color: var(--v-action);
}
/* Checkbox tick: a pseudo-free approach. The label wraps the input, so the tick is drawn
   by the sibling mark span (.v-check__mark) as a mask in the action-text colour. */
.v-check__box {
	position: relative;
	display: inline-grid;
	flex: none;
}
.v-check__box input { grid-area: 1 / 1; }
.v-check__box::after {
	content: "";
	grid-area: 1 / 1;
	place-self: center;
	width: var(--v-check-mark);
	height: var(--v-check-mark);
	background-color: var(--v-action-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--v-dur-press) var(--v-ease-out);
}
.v-check__box:has(input[type="checkbox"]:checked)::after { opacity: 1; }
.v-check input[type="radio"]:checked {
	background-image: none;
	box-shadow: inset 0 0 0 var(--v-space-1) var(--v-field-bg);
}
.v-check input:disabled { background-color: var(--v-disabled-bg); border-color: var(--v-disabled-bg); cursor: not-allowed; }
.v-check:has(input:disabled) { color: var(--v-disabled-text); cursor: not-allowed; }
.v-check input[aria-invalid="true"] { border: var(--v-hairline-strong) solid var(--v-field-error); }

/* ================================================================ Size pills (radio group) */
.v-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v-space-2);
	margin: 0;
	padding: 0;
	border: 0;
}
.v-pills__legend {
	margin-bottom: var(--v-space-3);
	padding: 0;
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
}
.v-pill { position: relative; }
.v-pill input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}
.v-pill span {
	display: grid;
	place-items: center;
	min-width: var(--v-pill-size);
	height: var(--v-pill-size);
	padding-inline: var(--v-space-3);
	border: var(--v-hairline) solid var(--v-pill-border);
	background: var(--v-surface);
	color: var(--v-text);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	font-variant-numeric: tabular-nums;
	transition: background-color var(--v-dur-press) var(--v-ease-out), color var(--v-dur-press) var(--v-ease-out), border-color var(--v-dur-press) var(--v-ease-out);
	pointer-events: none;
}
.v-pill:hover span { border-color: var(--v-border-strong); }
.v-pill input:checked + span {
	background: var(--v-pill-selected-bg);
	border-color: var(--v-pill-selected-bg);
	color: var(--v-pill-selected-text);
}
.v-pill input:focus-visible + span {
	outline: var(--v-hairline-strong) solid var(--v-focus);
	outline-offset: var(--v-hairline-strong);
}
/* Unavailable (size not offered for this style): struck through AND labelled, never colour only */
.v-pill input:disabled { cursor: not-allowed; }
.v-pill input:disabled + span {
	color: var(--v-disabled-text);
	border-color: var(--v-border);
	background: linear-gradient(to top right, transparent calc(50% - var(--v-hairline) / 2), var(--v-border) calc(50% - var(--v-hairline) / 2), var(--v-border) calc(50% + var(--v-hairline) / 2), transparent calc(50% + var(--v-hairline) / 2));
	text-decoration: line-through;
}

/* ================================================================ Colour swatches (radio group) */
.v-swatches {
	display: grid;
	gap: var(--v-space-3);
	margin: 0;
	padding: 0;
	border: 0;
}
.v-swatches__legend {
	padding: 0;
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
}
.v-swatches__legend output { font-weight: var(--v-weight-regular); color: var(--v-text-muted); }
.v-swatches__list { display: flex; flex-wrap: wrap; gap: var(--v-space-3); }
.v-swatch { position: relative; display: inline-grid; place-items: center; width: var(--v-hit-min); height: var(--v-hit-min); }
.v-swatch input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}
.v-swatch span {
	width: var(--v-swatch-size);
	height: var(--v-swatch-size);
	border-radius: var(--v-radius-round);
	background: var(--_swatch, var(--v-placeholder)) center / cover;
	box-shadow: inset 0 0 0 var(--v-hairline) var(--v-inset-edge);
	pointer-events: none;
	transition: box-shadow var(--v-dur-press) var(--v-ease-out);
}
.v-swatch input:checked + span {
	box-shadow: 0 0 0 var(--v-hairline-strong) var(--v-surface), 0 0 0 calc(var(--v-hairline-strong) * 2) var(--v-border-strong);
}
.v-swatch input:focus-visible + span {
	outline: var(--v-hairline-strong) solid var(--v-focus);
	outline-offset: var(--v-space-2);
}

/* ================================================================ Fit choice (segmented radio group)
   "Standard size | Your measurements". Selected = Ink border, not brown (Hide stays scarce). */
.v-segment {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border: 0;
}
/* Options always share one height (the tallest decides), whatever their text: the label stretches
   in the grid row and the visible box fills the label. */
.v-segment__option { position: relative; display: grid; }
.v-segment__option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.v-segment__option span {
	display: grid;
	align-content: center;
	height: 100%;
	gap: var(--v-space-1);
	min-height: var(--v-control-h-lg);
	padding: var(--v-space-3) var(--v-space-4);
	border: var(--v-hairline) solid var(--v-border-input);
	background: var(--v-surface);
	color: var(--v-text-muted);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	line-height: var(--v-lh-ui);
	text-align: center;
	pointer-events: none;
	transition: color var(--v-dur-press) var(--v-ease-out), box-shadow var(--v-dur-press) var(--v-ease-out);
}
.v-segment__option + .v-segment__option span { border-left: 0; }
.v-segment__option small { font-size: var(--v-text-label); font-weight: var(--v-weight-regular); }
.v-segment__option input:checked + span {
	color: var(--v-text);
	box-shadow: inset 0 0 0 var(--v-hairline-strong) var(--v-border-strong);
}
.v-segment__option input:focus-visible + span { outline: var(--v-hairline-strong) solid var(--v-focus); outline-offset: var(--v-hairline-strong); }

/* ================================================================ Price block, leather claim, delivery promise */
.v-price-block { display: grid; gap: var(--v-space-2); }
.v-price-block__note { font-size: var(--v-text-small); color: var(--v-text-muted); }
.v-claim {
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
	color: var(--v-text);
}
.v-promise {
	display: flex;
	align-items: flex-start;
	gap: var(--v-space-2);
	font-size: var(--v-text-small);
	color: var(--v-text);
}
.v-promise .v-icon { color: var(--v-text-muted); }
.v-promise__dates { white-space: nowrap; }

/* ================================================================ Badge (text, never colour only, never over images) */
.v-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--v-space-1) var(--v-space-2);
	border: var(--v-hairline) solid currentColor;
	color: var(--v-text);
	font-size: var(--v-text-label);
	font-weight: var(--v-weight-semibold);
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}
.v-badge--quiet { border-color: transparent; background: var(--v-surface-alt); }

/* ================================================================ Accordion (native details/summary) */
.v-accordion { border-top: var(--v-hairline) solid var(--v-border); }
.v-accordion__item { border-bottom: var(--v-hairline) solid var(--v-border); }
.v-accordion__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--v-space-4);
	min-height: var(--v-control-h-lg);
	padding-block: var(--v-space-3);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	cursor: pointer;
	list-style: none;
}
.v-accordion__item summary::-webkit-details-marker { display: none; }
.v-accordion__icon {
	position: relative;
	flex: none;
	width: var(--v-accordion-icon);
	height: var(--v-accordion-icon);
}
.v-accordion__icon::before,
.v-accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: var(--v-stitch-width);
	margin-top: calc(var(--v-stitch-width) / -2);
	background: currentColor;
	transition: transform var(--v-dur-ui) var(--v-ease-out);
}
.v-accordion__icon::after { transform: rotate(90deg); }
.v-accordion__item[open] .v-accordion__icon::after { transform: rotate(0deg); }
.v-accordion__body {
	padding-bottom: var(--v-space-5);
	color: var(--v-text);
	font-size: var(--v-text-small);
	line-height: var(--v-lh-body);
}
/* Height animation where supported (Chrome 131+); instant elsewhere */
@supports (interpolate-size: allow-keywords) {
	.v-accordion { interpolate-size: allow-keywords; }
	.v-accordion__item::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size var(--v-dur-ui) var(--v-ease-out), content-visibility var(--v-dur-ui) allow-discrete;
	}
	.v-accordion__item[open]::details-content { block-size: auto; }
}

/* ================================================================ Drawer and modal (native <dialog>)
   Native dialog: focus is trapped, Esc closes, focus returns to the trigger.
   Drawers enter from the side they live on; exits are faster than entrances (§7.1). */
.v-drawer,
.v-modal {
	--_dur: var(--v-dur-drawer-out);
	padding: 0;
	border: 0;
	background: var(--v-surface);
	color: var(--v-text);
	box-shadow: var(--v-shadow-overlay);
	overscroll-behavior: contain;
	transition:
		transform var(--_dur) var(--v-ease-drawer),
		opacity var(--_dur) var(--v-ease-out),
		overlay var(--_dur) allow-discrete,
		display var(--_dur) allow-discrete;
}
.v-drawer[open],
.v-modal[open] { --_dur: var(--v-dur-drawer-in); }
.v-drawer::backdrop,
.v-modal::backdrop {
	background: var(--v-scrim-none);
	transition: background-color var(--v-dur-drawer-in) var(--v-ease-out), overlay var(--v-dur-drawer-in) allow-discrete, display var(--v-dur-drawer-in) allow-discrete;
}
.v-drawer[open]::backdrop,
.v-modal[open]::backdrop { background: var(--v-scrim); }
@starting-style {
	.v-drawer[open]::backdrop,
	.v-modal[open]::backdrop { background: var(--v-scrim-none); }
}

.v-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(var(--v-drawer-w), 100vw);
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	transform: translateX(100%);
}
.v-drawer[open] { transform: translateX(0); }
@starting-style {
	.v-drawer[open] { transform: translateX(100%); }
}
.v-drawer--left { inset: 0 auto 0 0; transform: translateX(-100%); }
.v-drawer--left[open] { transform: translateX(0); }
@starting-style {
	.v-drawer--left[open] { transform: translateX(-100%); }
}
.v-drawer--bottom {
	inset: auto 0 0 0;
	width: 100vw;
	height: auto;
	max-height: 85dvh;
	transform: translateY(100%);
}
.v-drawer--bottom[open] { transform: translateY(0); }
@starting-style {
	.v-drawer--bottom[open] { transform: translateY(100%); }
}
.v-drawer__inner {
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100%;
	max-height: inherit;
}
.v-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--v-space-4);
	padding: var(--v-space-4) var(--v-space-5);
	border-bottom: var(--v-hairline) solid var(--v-border);
}
.v-drawer__title { font-family: var(--v-font-body); font-size: var(--v-text-h4); font-weight: var(--v-weight-bold); }
.v-drawer__body { overflow-y: auto; padding: var(--v-space-5); }
.v-drawer__foot { padding: var(--v-space-5); border-top: var(--v-hairline) solid var(--v-border); display: grid; gap: var(--v-space-3); }
.v-close {
	display: inline-grid;
	place-items: center;
	width: var(--v-hit-min);
	height: var(--v-hit-min);
	margin-right: calc(var(--v-space-3) * -1);
	border: 0;
	background: transparent;
	color: var(--v-text);
	cursor: pointer;
}
.v-close:hover { color: var(--v-text-muted); }

.v-modal {
	width: min(var(--v-modal-w), calc(100vw - 2 * var(--v-gutter)));
	max-height: min(85dvh, var(--v-modal-max-h));
	margin: auto;
	opacity: 0;
	transform: scale(0.98);
}
.v-modal[open] { opacity: 1; transform: scale(1); }
@starting-style {
	.v-modal[open] { opacity: 0; transform: scale(0.98); }
}
body:has(dialog[open]) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.v-drawer, .v-drawer--left, .v-drawer--bottom { transform: none; opacity: 0; }
	.v-drawer[open] { transform: none; opacity: 1; }
	@starting-style {
		.v-drawer[open], .v-drawer--left[open], .v-drawer--bottom[open] { transform: none; opacity: 0; }
		.v-modal[open] { transform: none; }
	}
	.v-modal, .v-modal[open] { transform: none; }
	.v-drawer, .v-modal { --_dur: var(--v-dur-hover); }
}

@media (prefers-reduced-motion: reduce) {
	/* Button hover fill with reduced motion: it appears instead of rising (colour change, no movement). */
	.v-btn::before,
	.elementor-widget-button .elementor-button::before,
	.woocommerce-account .woocommerce .button::before {
		transform: none;
		opacity: 0;
		transition: opacity var(--v-dur-hover) var(--v-ease-out);
	}
	.v-btn:hover::before,
	.elementor-widget-button .elementor-button:hover::before,
	.woocommerce-account .woocommerce .button:hover::before { transform: none; opacity: 1; }
}

/* ================================================================ Toast (undo actions only) */
.v-toasts {
	position: fixed;
	left: 50%;
	bottom: calc(var(--v-space-5) + env(safe-area-inset-bottom, 0px));
	z-index: var(--v-z-toast);
	display: grid;
	gap: var(--v-space-2);
	width: min(var(--v-toast-w), calc(100vw - 2 * var(--v-gutter)));
	transform: translateX(-50%);
	pointer-events: none;
}
.v-toast {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--v-space-4);
	padding: var(--v-space-3) var(--v-space-3) var(--v-space-3) var(--v-space-5);
	background: var(--v-ink);
	color: var(--v-paper);
	font-size: var(--v-text-small);
	box-shadow: var(--v-shadow-overlay);
	pointer-events: auto;
	transition: opacity var(--v-dur-ui) var(--v-ease-out), transform var(--v-dur-ui) var(--v-ease-out);
}
@starting-style {
	.v-toast { opacity: 0; transform: translateY(var(--v-space-3)); }
}
.v-toast.is-leaving { opacity: 0; transform: translateY(var(--v-space-3)); transition-duration: var(--v-dur-drawer-out); }
.v-toast__action {
	min-height: var(--v-hit-min);
	padding-inline: var(--v-space-4);
	border: 0;
	background: transparent;
	color: var(--v-paper);
	font-weight: var(--v-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
	.v-toast, .v-toast.is-leaving { transform: none; }
	@starting-style { .v-toast { transform: none; } }
}

/* ================================================================ Trust strip (4 facts max)
   Phones and tablets: a 2 × 2 grid, icon above the fact (v1.32, owner: nothing scrolls sideways).
   From 1024px: 4 columns, icon beside the fact. */
.v-trust-strip {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--v-space-5) var(--v-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.v-trust {
	display: grid;
	align-content: start;
	gap: var(--v-space-2);
	font-size: var(--v-text-small);
	line-height: var(--v-lh-ui);
	color: var(--v-text-muted);
}
.v-trust .v-icon { color: var(--v-text); }
.v-trust strong { display: block; font-size: var(--v-text-ui); color: var(--v-text); }
@media (min-width: 1024px) {
	.v-trust-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v-space-5); }
	.v-trust { display: flex; align-items: flex-start; gap: var(--v-space-3); }
}

/* ================================================================ Product card (uniform, §8 v1.59)
   An <article>: the name link stretches over the whole card (one tap to the jacket), and the bag
   button sits beside it at the photo's corner, so no control is nested in another (WCAG 4.1.2). */
.v-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);   /* media never grows past its column */
	align-content: start;                     /* names line up across cards */
	gap: var(--v-card-gap);
	color: var(--v-text);
	text-decoration: none;
}
.v-card__media {
	position: relative;
	aspect-ratio: var(--v-card-ratio);
	overflow: hidden;
	background: var(--v-card-image-bg);
}
.v-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--v-dur-swap) var(--v-ease-out), transform var(--v-dur-zoom) var(--v-ease-out);
}
.v-card__media img + img { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
	.v-card:hover .v-card__media img { transform: scale(var(--v-zoom)); }
	.v-card:hover .v-card__media img + img { opacity: 1; }
}
.v-card__link { color: inherit; text-decoration: none; }
.v-card__link::after { content: ""; position: absolute; inset: 0; }
.v-card__link:focus-visible { outline: none; }
.v-card:has(.v-card__link:focus-visible) { outline: var(--v-hairline-strong) solid var(--v-focus); outline-offset: var(--v-space-1); }

/* The bag button (§8 v1.59): a 44px Paper square at the photo's bottom-right, always visible (touch
   has no hover). On a fine pointer the words "Add to bag" slide out to its left (a clip, 240 ms). */
.v-card__add {
	position: absolute;
	right: var(--v-space-3);
	bottom: var(--v-space-3);
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--v-hit-min);
	height: var(--v-hit-min);
	border: var(--v-hairline) solid var(--v-border);
	background: var(--v-paper);
	color: var(--v-ink);
	text-decoration: none;
	transition: border-color var(--v-dur-hover) var(--v-ease-out), transform var(--v-dur-press) var(--v-ease-out);
}
.v-card__add .v-icon { width: var(--v-step-icon); height: var(--v-step-icon); }
.v-card__add:active { transform: scale(var(--v-btn-press-scale)); }
.v-card__add[aria-busy="true"] { opacity: 0.6; }
.v-card__add-label {
	position: absolute;
	top: calc(var(--v-hairline) * -1);
	right: calc(100% - var(--v-hairline));
	bottom: calc(var(--v-hairline) * -1);
	display: flex;
	align-items: center;
	padding-inline: var(--v-space-3) var(--v-space-2);
	border: var(--v-hairline) solid var(--v-ink);
	border-right: 0;
	background: var(--v-paper);
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
	white-space: nowrap;
	clip-path: inset(0 0 0 100%);
	transition: clip-path var(--v-dur-hover) var(--v-ease-out);
	pointer-events: none;
}
.v-card__add:focus-visible { border-color: var(--v-ink); }
.v-card__add:focus-visible .v-card__add-label { clip-path: inset(0 0 0 0); }
@media (hover: hover) and (pointer: fine) {
	.v-card__add:hover { border-color: var(--v-ink); }
	.v-card__add:hover .v-card__add-label { clip-path: inset(0 0 0 0); }
}
/* Touch and small screens: the icon alone (the name says "Add to bag: {jacket}"). */
@media (hover: none), (max-width: 1023px) {
	.v-card__add-label { display: none; }
}

/* The card's Add to bag panel (§8, §7.1 v1.59). In the card (1024+, fine pointer) it rises over
   the whole card from the bottom edge (the photo alone is too short for sizes, fit note and the
   button without scrolling); on phones the same content fills a bottom sheet (.v-drawer). */
.v-card-add {
	display: grid;
	gap: var(--v-space-3);
	align-content: start;
	background: var(--v-surface);
	color: var(--v-text);
}
.v-card > .v-card-add {
	position: absolute;
	inset: 0;
	z-index: 2;
	align-content: safe end; /* never pushes the top out of reach when a message is added */
	overflow-y: auto;
	padding: var(--v-space-4);
	border-top: var(--v-hairline) solid var(--v-border);
	animation: v-card-add-in var(--v-dur-ui) var(--v-ease-out) both;
	overscroll-behavior: contain;
}
.v-card > .v-card-add.is-leaving { animation: v-card-add-out var(--v-dur-fill-out) var(--v-ease-out) both; }
@keyframes v-card-add-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes v-card-add-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
.v-card-add--sheet { padding: var(--v-space-5) var(--v-gutter) var(--v-space-6); }
.v-card-add__head { display: flex; align-items: flex-start; gap: var(--v-space-3); }
.v-card-add__thumb { width: var(--v-space-9); height: var(--v-space-9); object-fit: cover; background: var(--v-card-image-bg); }
.v-card-add__id { flex: 1; display: grid; gap: var(--v-space-1); }
.v-card-add__title { margin: 0; font-size: var(--v-text-ui); font-weight: var(--v-weight-semibold); line-height: var(--v-lh-ui); }
.v-card-add__price { margin: 0; font-size: var(--v-text-ui); font-weight: var(--v-weight-semibold); font-variant-numeric: tabular-nums lining-nums; }
.v-card-add .v-close { margin: calc(var(--v-space-2) * -1) calc(var(--v-space-2) * -1) 0 0; }
.v-card-add .v-pills__legend, .v-card-add .v-swatches__legend { margin-bottom: var(--v-space-2); }
.v-card-add .v-field__error:empty { display: none; }
/* Sizes in a 5-column grid: XS–XL, then 2XL–5XL; every target stays 44px tall. */
.v-card-add .v-pills { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--v-space-1); }
.v-card-add .v-pills__legend { grid-column: 1 / -1; }
.v-card-add .v-pill span { min-width: 0; height: var(--v-hit-min); padding-inline: 0; font-size: var(--v-text-small); }
.v-card-add__fit, .v-card-add__last, .v-card-add__arrives { margin: 0; font-size: var(--v-text-small); color: var(--v-text-muted); }
.v-card-add__last strong { color: var(--v-text); }
.v-card-add__links { display: grid; gap: var(--v-space-2); justify-items: start; font-size: var(--v-text-small); }
.v-card-add__mtm { color: var(--v-text-muted); }
.v-card-add__done { margin: 0; font-size: var(--v-text-small); }
.v-card-add__done:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
	.v-card > .v-card-add { animation-name: v-card-add-fade; }
	.v-card > .v-card-add.is-leaving { animation-name: none; opacity: 0; }
	@keyframes v-card-add-fade { from { opacity: 0; } }
	.v-card__add-label { transition: none; }
}
.v-card__meta { display: grid; gap: var(--v-space-1); }
.v-card__name {
	font-family: var(--v-font-body);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	line-height: var(--v-lh-ui);
}
.v-card__claim { font-size: var(--v-text-small); color: var(--v-text-muted); }
.v-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--v-space-2);
}
.v-card__price { font-size: var(--v-text-ui); font-weight: var(--v-weight-semibold); font-variant-numeric: tabular-nums lining-nums; }
.v-card__dots { display: flex; gap: var(--v-space-2); margin-top: var(--v-space-1); }
.v-card__dots span {
	width: var(--v-dot-size);
	height: var(--v-dot-size);
	border-radius: var(--v-radius-round);
	background: var(--_swatch, var(--v-placeholder));
	box-shadow: inset 0 0 0 var(--v-hairline) var(--v-inset-edge);
}
@media (prefers-reduced-motion: reduce) {
	.v-card__media img { transition: opacity var(--v-dur-swap) linear; }
	.v-card:hover .v-card__media img { transform: none; }
}

/* ================================================================ The Stitch divider (§6: max 2 per page) */
.v-stitch {
	display: block;
	width: 100%;
	height: var(--v-stitch-width);
	margin: 0;
	border: 0;
	background-image: repeating-linear-gradient(90deg, var(--v-stitch) 0 var(--v-stitch-dash), transparent var(--v-stitch-dash) calc(var(--v-stitch-dash) + var(--v-stitch-gap)));
	transform-origin: left center;
}

/* ================================================================ The scissors (§6, §7.1, v1.25)
   Wherever the Stitch grows, the scissors ride its leading edge and snip; the Stitch is what they
   leave behind. Markup: vellren_scissors() (two blades on one screw, inline SVG, decorative).
   Here: the scissors, the divider (.v-cut) and busy buttons. The sticky story rail is with the
   story below; the order timeline is in order.css. Never on the checkout or link underlines. */
.v-scissors {
	display: block;
	width: var(--v-scissors);
	max-width: none;   /* base.css caps svg at 100%: the vertical boxes they ride are 1.5 px wide */
	height: var(--v-scissors);
	overflow: visible;
	color: var(--v-stitch);
	fill: none;
	stroke: currentColor;
	stroke-width: var(--v-stitch-width);
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}
.v-scissors :is(circle, path) { vector-effect: non-scaling-stroke; }   /* the stroke is the Stitch at every size */
.v-scissors__screw { fill: currentColor; stroke: none; }
/* Drawn flat along the line; each blade turns on the screw and rests a hair apart, so the Stitch runs between the jaws. */
.v-scissors__blade {
	transform-box: view-box;
	transform-origin: calc(var(--v-scissors-screw) * 100%) 50%;
}
.v-scissors__blade--a { rotate: var(--v-snip-shut); }
.v-scissors__blade--b { rotate: calc(var(--v-snip-shut) * -1); }
/* One cut: open, then back to rest (no end keyframe: the resting angle). */
@keyframes v-snip-a { 40% { rotate: var(--v-snip-open); } }
@keyframes v-snip-b { 40% { rotate: calc(var(--v-snip-open) * -1); } }
/* Half a cut for alternating runs: open -> rest. An odd count ends at rest. */
@keyframes v-snip-a-half { from { rotate: var(--v-snip-open); } to { rotate: var(--v-snip-shut); } }
@keyframes v-snip-b-half { from { rotate: calc(var(--v-snip-open) * -1); } to { rotate: calc(var(--v-snip-shut) * -1); } }
@keyframes v-scissors-in { from { opacity: 0; } }
@keyframes v-scissors-out { to { opacity: 0; } }

/* Divider: <div class="v-cut"><hr class="v-stitch" data-v-anim="stitch"> + scissors</div>.
   The screw tracks the drawing edge (same timing as the clip, §7.1), three snips, then off. */
.v-cut {
	position: relative;
	container-type: inline-size;
}
.v-cut__scissors {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: calc(var(--v-scissors) / -2);
	opacity: 0;
}
@keyframes v-cut-travel {
	from { translate: calc(var(--v-scissors) * var(--v-scissors-screw) * -1) 0; }
	to   { translate: calc(100cqw - var(--v-scissors) * var(--v-scissors-screw)) 0; }
}
.v-motion:not(.v-motion-failsafe) .v-cut > .v-stitch.is-in ~ .v-cut__scissors {
	opacity: 1;
	animation:
		v-cut-travel var(--v-dur-image) var(--v-ease-in-out) both,
		v-scissors-in var(--v-dur-press) var(--v-ease-out) both,
		v-scissors-out var(--v-dur-fill-out) var(--v-ease-out) var(--v-dur-image) forwards;
}
.v-motion:not(.v-motion-failsafe) .v-cut > .v-stitch.is-in ~ .v-cut__scissors .v-scissors__blade--a { animation: v-snip-a-half calc(var(--v-dur-image) / 5) var(--v-ease-in-out) 5 alternate; }
.v-motion:not(.v-motion-failsafe) .v-cut > .v-stitch.is-in ~ .v-cut__scissors .v-scissors__blade--b { animation: v-snip-b-half calc(var(--v-dur-image) / 5) var(--v-ease-in-out) 5 alternate; }

/* Busy button: the scissors sit at the left end of the busy Stitch, which feeds into the jaws
   (right to left), one stitch per snip. Markup: <span class="v-btn__label"> + scissors. */
.v-btn__scissors {
	position: absolute;
	left: calc(var(--v-btn-px) - var(--v-scissors-sm) * var(--v-scissors-screw));
	bottom: calc(var(--v-space-2) + var(--v-stitch-width) / 2 - var(--v-scissors-sm) / 2);
	width: var(--v-scissors-sm);
	height: var(--v-scissors-sm);
	color: inherit;
	display: none;
}
.v-btn[aria-busy="true"] > .v-btn__scissors { display: block; }
.v-btn[aria-busy="true"]:has(> .v-btn__scissors)::after { animation-direction: reverse; }
.v-btn[aria-busy="true"] > .v-btn__scissors .v-scissors__blade--a { animation: v-snip-a-half calc(var(--v-dur-snip) / 2) var(--v-ease-in-out) infinite alternate; }
.v-btn[aria-busy="true"] > .v-btn__scissors .v-scissors__blade--b { animation: v-snip-b-half calc(var(--v-dur-snip) / 2) var(--v-ease-in-out) infinite alternate; }

/* Reduced motion: nothing travels or snips. Divider scissors are not shown (the Stitch is simply
   there); busy and progress scissors stay, still, because they carry meaning. */
@media (prefers-reduced-motion: reduce) {
	.v-cut__scissors { display: none; }
	.v-scissors__blade,
	.v-scissors { animation: none !important; }
	.v-btn[aria-busy="true"]:has(> .v-btn__scissors)::after { animation: none; }
}

/* ================================================================ Section heading */
.v-section-head {
	display: grid;
	gap: var(--v-space-4);
	max-width: var(--v-measure);
	margin-bottom: var(--v-space-8);
}
.v-section-head > p:not(.v-label) { color: var(--v-text-muted); }

/* ================================================================ Breadcrumb */
.v-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--v-text-small);
	color: var(--v-text-muted);
}
.v-breadcrumb li + li::before {
	content: "/";
	margin-right: var(--v-space-2);
	color: var(--v-text-muted);
}
.v-breadcrumb a { color: var(--v-text-muted); text-decoration: none; }
.v-breadcrumb a:hover { color: var(--v-text); text-decoration: underline; }
.v-breadcrumb [aria-current="page"] { color: var(--v-text); }

/* ================================================================ Load more (real links underneath, §22A.6) */
.v-load-more {
	display: grid;
	justify-items: center;
	gap: var(--v-space-4);
	margin-top: var(--v-space-9);
	text-align: center;
}
.v-load-more__status { font-size: var(--v-text-small); color: var(--v-text-muted); }

/* ================================================================ Quantity stepper */
.v-qty {
	display: inline-flex;
	align-items: stretch;
	border: var(--v-hairline) solid var(--v-border-input);
}
.v-qty button {
	display: grid;
	place-items: center;
	width: var(--v-hit-min);
	border: 0;
	background: transparent;
	color: var(--v-text);
	cursor: pointer;
}
.v-qty button:disabled { color: var(--v-disabled-text); cursor: not-allowed; }
.v-qty input {
	width: 3ch;
	min-height: var(--v-hit-min);
	border: 0;
	background: transparent;
	text-align: center;
	font-variant-numeric: tabular-nums;
	appearance: textfield;
}
.v-qty input::-webkit-inner-spin-button,
.v-qty input::-webkit-outer-spin-button { appearance: none; margin: 0; }

/* ================================================================ Bag line (drawer + bag page, §11.5.1) */
.v-bag-line {
	display: grid;
	grid-template-columns: var(--v-line-thumb) minmax(0, 1fr);
	gap: var(--v-space-4);
	align-items: start;
	padding-block: var(--v-space-5);
	border-bottom: var(--v-hairline) solid var(--v-border);
}
.v-bag-line[aria-busy="true"] { opacity: 0.6; }
.v-bag-line__media { display: block; aspect-ratio: var(--v-card-ratio); overflow: hidden; background: var(--v-card-image-bg); }
.v-bag-line__media img { width: 100%; height: 100%; object-fit: cover; }
/* Name and price share the first row, so the name keeps the width and the price stays scannable.
   The price (with "£229.00 each") spans the name and details rows, so the details never drop. */
.v-bag-line__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--v-space-2) var(--v-space-4); align-items: baseline; min-width: 0; }
.v-bag-line__top { display: contents; }
.v-bag-line__info > :not(.v-bag-line__top, .v-bag-line__meta) { grid-column: 1 / -1; }
.v-bag-line__meta { grid-column: 1; }
.v-bag-line__price { grid-column: 2; grid-row: 1 / span 2; align-self: start; }

.v-bag-line__name { margin: 0; font-weight: var(--v-weight-semibold); line-height: var(--v-lh-ui); color: var(--v-text); text-decoration: none; }
.v-bag-line__meta { display: flex; flex-wrap: wrap; gap: var(--v-space-1) var(--v-space-4); margin: 0; font-size: var(--v-text-small); color: var(--v-text-muted); }
.v-bag-line__mtm { font-size: var(--v-text-small); }
.v-bag-line__mtm summary { display: inline-flex; align-items: center; min-height: var(--v-hit-min); font-weight: var(--v-weight-semibold); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.v-bag-line__mtm dl { display: grid; gap: var(--v-space-1); margin: 0 0 var(--v-space-2); }
.v-bag-line__mtm dl > div { display: flex; justify-content: space-between; gap: var(--v-space-4); }
.v-bag-line__mtm dt { color: var(--v-text-muted); }
.v-bag-line__mtm dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.v-bag-line__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-3) var(--v-space-5); margin-top: var(--v-space-2); }
.v-bag-line__remove {
	display: inline-flex;
	align-items: center;
	min-height: var(--v-hit-min);
	padding: 0;
	border: 0;
	background: none;
	color: var(--v-text);
	font: inherit;
	font-size: var(--v-text-small);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}
.v-bag-line__price { display: grid; justify-items: end; margin: 0; font-weight: var(--v-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-bag-line__each { font-size: var(--v-text-small); font-weight: var(--v-weight-regular); color: var(--v-text-muted); }
.v-bag-line__each:empty { display: none; }
/* Narrow lines (phones): "£229.00 each" moves under the details so the name keeps its width. */
.v-bag-line__info { container: bag-line / inline-size; }
@container bag-line (max-width: 16rem) {
	.v-bag-line__price { display: contents; }
	.v-bag-line__total { grid-column: 2; grid-row: 1; }
	.v-bag-line__meta { grid-column: 1 / -1; }
	.v-bag-line__each { grid-column: 1 / -1; order: 1; }
	.v-bag-line__info > :not(.v-bag-line__top, .v-bag-line__meta) { order: 2; }
}
.v-bag-line .v-qty input { min-height: var(--v-hit-min); }
.v-qty button[hidden] { display: none; }

/* Removed line waiting for Undo: same place as the line, collapses when the removal is sent. */
.v-undo {
	display: grid;
	grid-template-rows: 1fr;
	border-bottom: var(--v-hairline) solid var(--v-border);
	transition: grid-template-rows var(--v-dur-ui) var(--v-ease-out), opacity var(--v-dur-ui) var(--v-ease-out);
}
.v-undo.is-leaving { grid-template-rows: 0fr; opacity: 0; border-bottom-color: transparent; }
.v-undo__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--v-space-4); min-height: 0; overflow: hidden; }
.v-undo__inner p { margin: 0; padding-block: var(--v-space-3); font-size: var(--v-text-small); color: var(--v-text-muted); }
.v-undo__button {
	min-height: var(--v-hit-min);
	padding-inline: var(--v-space-3);
	border: 0;
	background: none;
	color: var(--v-link);
	font: inherit;
	font-weight: var(--v-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* Order lines (checkout summary, order confirmation; §11.6.1, §11.7.1) */
.v-order__lines { display: grid; gap: var(--v-space-4); margin: 0; padding: 0; list-style: none; }
.v-order__line {
	display: grid;
	grid-template-columns: var(--v-order-thumb) minmax(0, 1fr) auto;
	gap: var(--v-space-4);
	align-items: start;
}
.v-order__media { position: relative; display: block; aspect-ratio: var(--v-card-ratio); background: var(--v-card-image-bg); }
.v-order__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Quantity on the photo corner (text too, under the name, for screen readers and clarity). */
.v-order__qty {
	position: absolute;
	top: calc(var(--v-space-2) * -1);
	right: calc(var(--v-space-2) * -1);
	display: grid;
	place-items: center;
	min-width: var(--v-space-6);
	height: var(--v-space-6);
	padding-inline: var(--v-space-1);
	background: var(--v-text);
	color: var(--v-surface);
	font-size: var(--v-text-label);
	font-weight: var(--v-weight-bold);
	font-variant-numeric: tabular-nums;
}
.v-order__name { margin: 0; font-weight: var(--v-weight-semibold); line-height: var(--v-lh-ui); }
.v-order__meta { display: flex; flex-wrap: wrap; gap: var(--v-space-1) var(--v-space-3); margin: var(--v-space-1) 0 0; font-size: var(--v-text-small); color: var(--v-text-muted); }
.v-order__price { margin: 0; font-weight: var(--v-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-order__totals { padding-top: var(--v-space-4); border-top: var(--v-hairline) solid var(--v-border); }
.v-order__note { margin: 0; font-size: var(--v-text-small); color: var(--v-text-muted); }

/* Totals list (drawer, bag page, later checkout) */
.v-totals { display: grid; gap: var(--v-space-2); margin: 0; }
.v-totals__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--v-space-4); }
.v-totals dt { color: var(--v-text-muted); }
.v-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.v-totals__row--total { padding-top: var(--v-space-3); border-top: var(--v-hairline) solid var(--v-border); }
.v-totals__row--total :is(dt, dd) { color: var(--v-text); font-weight: var(--v-weight-bold); }
.v-totals__row--total dd { font-size: var(--v-text-price); }
.v-totals__remove { margin-left: var(--v-space-2); font-size: var(--v-text-small); }

/* Cart drawer */
.v-cart .v-drawer__body { padding-block: 0; }
.v-cart__count { font-variant-numeric: tabular-nums; color: var(--v-text-muted); font-weight: var(--v-weight-regular); }
.v-cart__added {
	display: flex;
	align-items: center;
	gap: var(--v-space-2);
	margin: var(--v-space-5) 0 0;
	padding: var(--v-space-3) var(--v-space-4);
	background: var(--v-surface-alt);
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
}
.v-cart__added[hidden] { display: none; }
.v-cart__added .v-icon { color: var(--v-positive); }
.v-cart__lines { margin: 0; padding: 0; list-style: none; }
.v-cart__lines > :last-child { border-bottom: 0; }
.v-cart__loading { display: grid; gap: var(--v-space-4); padding-block: var(--v-space-5); }
.v-cart__loading[hidden] { display: none; }
.v-cart__skeleton { height: calc(var(--v-line-thumb) * 1.25); }
.v-cart__empty { padding-block: var(--v-space-9); }
.v-cart__empty[hidden] { display: none; }
.v-cart__empty-title { color: var(--v-text); font-weight: var(--v-weight-bold); font-size: var(--v-text-h4); }
.v-cart__styles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--v-space-2); margin: 0; padding: 0; list-style: none; }
.v-cart__error { padding-block: var(--v-space-5); }
.v-cart__foot .v-totals__row--total { padding-top: 0; border-top: 0; }
.v-cart__note { margin: 0; font-size: var(--v-text-small); color: var(--v-text-muted); }
.v-cart__foot .v-promise { margin: 0; }
.v-cart__foot[hidden],
.v-promise[hidden] { display: none; }

/* WooCommerce notices (added, removed + Undo, errors): text and icon, never colour only. */
:is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner),
.v-bag-page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--v-space-3);
	margin: 0 0 var(--v-space-5);
	padding: var(--v-space-4) var(--v-space-5);
	border: var(--v-hairline) solid var(--v-border-strong);
	background: var(--v-surface-alt);
	color: var(--v-text);
	font-size: var(--v-text-small);
	list-style: none;
}
:is(.woocommerce-error, .wc-block-components-notice-banner.is-error) { border-color: var(--v-field-error); }
.wc-block-components-notice-banner > svg { display: none; }
:is(.woocommerce-message, .wc-block-components-notice-banner) .button { order: 2; }

/* ================================================================ Skeleton (loading) and empty state */
.v-skeleton {
	display: block;
	background: var(--v-placeholder);
	animation: v-pulse var(--v-dur-skeleton) var(--v-ease-in-out) infinite;
}
.v-skeleton--text { height: 0.9em; margin-block: 0.3em; }
.v-skeleton--media { aspect-ratio: var(--v-card-ratio); }
@keyframes v-pulse {
	50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
	.v-skeleton { animation: none; }
}
.v-empty {
	display: grid;
	justify-items: center;
	gap: var(--v-space-4);
	padding: var(--v-space-10) var(--v-space-5);
	text-align: center;
}
.v-empty .v-icon { width: var(--v-space-6); height: var(--v-space-6); color: var(--v-text-muted); }
.v-empty p { max-width: 40ch; color: var(--v-text-muted); }

/* ================================================================ Style tile (golden mosaic cells, §5)
   An image cell that is one link, with its name on a Paper label (never text on a photo).
   Hover: the image zooms like a product card and the arrow shifts (§7.1). */
.v-tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--v-placeholder);
	color: var(--v-text);
	text-decoration: none;
}
.v-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--v-dur-zoom) var(--v-ease-out);
}
.v-tile__label {
	position: absolute;
	left: var(--v-space-4);
	bottom: var(--v-space-4);
	display: inline-flex;
	align-items: center;
	gap: var(--v-space-2);
	min-height: var(--v-hit-min);
	padding: var(--v-space-2) var(--v-space-4);
	background: var(--v-surface);
	color: var(--v-text);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-ui);
	line-height: var(--v-lh-ui);
}
@media (hover: hover) and (pointer: fine) {
	.v-tile:hover img { transform: scale(var(--v-zoom)); }
}
.v-tile:focus-visible { outline-offset: var(--v-space-1); }
.v-tile-note {
	display: grid;
	align-content: end;
	gap: var(--v-space-3);
	padding: var(--v-space-5);
	background: var(--v-surface-alt);
	color: var(--v-text);
	font-size: var(--v-text-small);
}
@media (prefers-reduced-motion: reduce) {
	.v-tile:hover img { transform: none; }
}

/* ================================================================ Sticky story (§7.1, §11.1 #7)
   Desktop: a sticky image column (golden split, image on the major side) beside the steps; the
   active step (engine, IntersectionObserver) crossfades the image. A vertical Stitch runs beside
   the steps and draws with scroll progress (motion.css). Below 1024px: stacked, no sticky, each
   step shows its own image. */
.v-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--v-space-8);
}
.v-story__media { display: none; }
.v-story__track {
	position: relative;
	padding-left: calc(var(--v-step-mark) + var(--v-space-5));
}
.v-story__steps {
	display: grid;
	gap: var(--v-space-10);
	margin: 0;
	padding: 0;
	list-style: none;
}
.v-story__rail {
	position: absolute;
	inset: 0 auto 0 calc(var(--v-step-mark) / 2 - var(--v-stitch-width) / 2); /* through the markers' centres */
	width: var(--v-stitch-width);
	background: var(--v-border);
}
.v-story__rail::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(180deg, var(--v-stitch) 0 var(--v-stitch-dash), transparent var(--v-stitch-dash) calc(var(--v-stitch-dash) + var(--v-stitch-gap)));
}
/* The scissors ride the head of the rail's Stitch, pointing down (§7.1 v1.25). Position follows
   --v-story-p (step by step); motion.css links it, and the snips, to scroll where supported. */
.v-story__rail { container-type: size; }
.v-story__scissors {
	position: absolute;
	top: calc(var(--v-scissors) / -2);
	left: calc(50% - var(--v-scissors) * var(--v-scissors-screw));
	z-index: 1;
	rotate: 90deg;
	transform-origin: calc(var(--v-scissors-screw) * 100%) 50%;
	translate: 0 calc(var(--v-story-p, 0) * 100cqh);
	transition: translate var(--v-dur-ui) var(--v-ease-out);
}
.v-story__step {
	position: relative;
	display: grid;
	gap: var(--v-space-4);
	align-content: center;
}
/* Step marker on the rail, level with the step heading (§6 v1.58): a square with the step's icon;
   filled with the Stitch colour when active, the icon turning to the surface colour (radius 0, §5). */
.v-story__step > :is(h2, h3) { position: relative; }
.v-story__mark {
	position: absolute;
	top: calc(0.575em - var(--v-step-mark) / 2);   /* middle of the first line (line-height 1.15) */
	left: calc((var(--v-step-mark) + var(--v-space-5)) * -1);
	display: grid;
	place-items: center;
	width: var(--v-step-mark);
	height: var(--v-step-mark);
	border: var(--v-hairline) solid var(--v-text-muted);
	background: var(--v-surface);
	color: var(--v-text-muted);
	transition: background-color var(--v-dur-ui) var(--v-ease-out), border-color var(--v-dur-ui) var(--v-ease-out), color var(--v-dur-ui) var(--v-ease-out);
}
.v-story__mark .v-icon { width: var(--v-step-icon); height: var(--v-step-icon); }
.v-story__step.is-active .v-story__mark { border-color: var(--v-stitch); background: var(--v-stitch); color: var(--v-surface); }
.v-story__step p {
	max-width: 44ch;
	color: var(--v-text-muted);
	transition: color var(--v-dur-swap) var(--v-ease-out);
}
.v-story__step.is-active p { color: var(--v-text); }
.v-story__inline,
.v-story__frame {
	margin: 0;
	overflow: hidden;
	background: var(--v-placeholder);
}
.v-story__inline { aspect-ratio: var(--v-card-ratio); }
:is(.v-story__inline, .v-story__frame) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 1024px) {
	.v-story__grid {
		grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
		gap: var(--v-space-10);
		align-items: start;
	}
	.v-story__media {
		position: sticky;
		top: calc(var(--v-header-h) + var(--wp-admin--admin-bar--height, 0px) + var(--v-space-6));
		display: grid;
		height: calc(100vh - var(--v-header-h) - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--v-space-6));
	}
	.v-story__frame {
		grid-area: 1 / 1;
		opacity: 1;
		transition: opacity var(--v-dur-swap) var(--v-ease-out);
	}
	.v-story:not(.is-live) .v-story__frame + .v-story__frame,
	.v-story.is-live .v-story__frame:not(.is-active) { opacity: 0; }
	.v-story__inline { display: none; }
	.v-story__steps { gap: 0; }
	.v-story__step { min-height: var(--v-story-step-min); }
}
@media (prefers-reduced-motion: reduce) {
	.v-story__frame { transition-duration: var(--v-dur-press); }
}

/* ================================================================ Unit toggle (cm | in, kg | st, …)
   Small two-option radio group; the selected option gets the strong inset outline (not brown). */
.v-mtm__unit-option { position: relative; display: grid; }
.v-mtm__unit-option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.v-mtm__unit-option span {
	display: grid;
	place-items: center;
	min-width: var(--v-hit-min);
	min-height: var(--v-hit-min);
	height: 100%;
	padding-inline: var(--v-space-2);
	border: var(--v-hairline) solid var(--v-border-input);
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
	color: var(--v-text-muted);
	pointer-events: none;
}
.v-mtm__unit-option input:checked + span { color: var(--v-text); box-shadow: inset 0 0 0 var(--v-hairline-strong) var(--v-border-strong); }
.v-mtm__unit-option input:focus-visible + span { outline: var(--v-hairline-strong) solid var(--v-focus); outline-offset: var(--v-hairline-strong); }

/* ================================================================ Size guide + fit finder (§11.12.1)
   Used in the product page modal and on the Size and fit guide page. */
.v-guide { display: grid; gap: var(--v-space-8); }
.v-guide__part { display: grid; gap: var(--v-space-4); align-content: start; }
.v-guide__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-space-3); }
.v-guide__title { margin: 0; font-family: var(--v-font-body); font-size: var(--v-text-h4); font-weight: var(--v-weight-bold); line-height: var(--v-lh-ui); letter-spacing: 0; }
.v-guide__title--sub { margin-top: var(--v-space-5); }
.v-guide__lead { margin: 0; font-size: var(--v-text-small); color: var(--v-text-muted); max-width: var(--v-measure); }
.v-guide__units,
.v-finder__units { display: grid; grid-template-columns: repeat(2, var(--v-hit-min)); gap: var(--v-space-2); }
.v-finder__form { display: grid; gap: var(--v-space-4); justify-items: start; }
.v-finder__form .v-field { width: 100%; max-width: 22rem; }
.v-finder__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--v-space-2); align-items: stretch; }
.v-finder__result { display: grid; gap: var(--v-space-3); justify-items: start; width: 100%; }
.v-finder__result:empty { display: none; }
.v-finder__size { margin: 0; font-size: var(--v-text-h4); }
.v-finder__size strong { font-size: var(--v-text-h3); font-weight: var(--v-weight-bold); }
.v-finder__notes { display: grid; gap: var(--v-space-2); margin: 0; padding-left: var(--v-space-5); font-size: var(--v-text-small); color: var(--v-text-muted); }

.v-guide__table { width: 100%; font-variant-numeric: tabular-nums lining-nums; }
.v-guide__table th, .v-guide__table td { padding: var(--v-space-3) var(--v-space-4) var(--v-space-3) 0; text-align: left; white-space: nowrap; }
.v-guide__table tbody th { font-weight: var(--v-weight-semibold); }
.v-guide .v-u-in { display: none; }
.v-guide__chart:has(.v-guide__units input[value="in"]:checked) .v-u-cm { display: none; }
.v-guide__chart:has(.v-guide__units input[value="in"]:checked) .v-u-in { display: inline; }

.v-guide__steps { display: grid; gap: var(--v-space-4); margin: 0; }
@media (min-width: 768px) { .v-guide__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-space-5) var(--v-space-8); } }
.v-guide__steps dt { font-weight: var(--v-weight-semibold); }
.v-guide__steps dd { margin: var(--v-space-1) 0 0; font-size: var(--v-text-small); color: var(--v-text-muted); }

/* One scroll area only: the head stays put, the body scrolls. */
.v-guide-modal { width: min(var(--v-modal-w), calc(100vw - 2 * var(--v-gutter))); overflow: hidden; }
.v-guide-modal .v-drawer__inner { height: 100%; max-height: min(85dvh, var(--v-modal-max-h)); grid-template-rows: auto minmax(0, 1fr); }
.v-guide-modal .v-drawer__body { min-height: 0; overscroll-behavior: contain; }
/* Unit buttons next to an input take the input's height, so the row reads as one control. */
.v-finder__row { align-items: stretch; }
.v-finder__row .v-mtm__unit-option span { min-height: var(--v-field-h); }


/* ================================================================ Chip (filter, style link, removable filter)
   48 px target, 1 px outline; active = strong inset outline (Hide stays for primary actions only). */
.v-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--v-space-2);
	min-height: var(--v-btn-h);
	padding: 0 var(--v-space-4);
	border: var(--v-hairline) solid var(--v-border-input);
	background: var(--v-surface);
	color: var(--v-text);
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	transition: border-color var(--v-dur-hover) var(--v-ease-out), transform var(--v-dur-press) var(--v-ease-out);
}
.v-chip::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
	.v-chip:hover { border-color: var(--v-border-strong); }
}
.v-chip:active { transform: scale(var(--v-btn-press-scale)); }
.v-chip.is-active,
.v-chip[aria-current="page"] { box-shadow: inset 0 0 0 var(--v-hairline) var(--v-border-strong); border-color: var(--v-border-strong); }
.v-chip .v-icon { width: 1em; height: 1em; }
.v-chip__count { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding-inline: var(--v-space-1); background: var(--v-ink); color: var(--v-paper); font-size: var(--v-text-label); font-variant-numeric: tabular-nums; }

/* ================================================================ Stars (§11.15)
   Two rows of the same five stars, the filled row clipped to the rating (fractions work,
   the number is always in text beside them). Ink, not Hide: a rating is information, not an action. */
.v-stars {
	--v-star: 1rem;
	position: relative;
	display: inline-flex;
	flex: none;
	width: max-content; /* the clip is a share of the stars, never of a stretched box */
	line-height: 0;
}
.v-stars--lg { --v-star: 1.5rem; }
.v-stars__row { display: inline-flex; gap: var(--v-hairline-strong); }
.v-stars svg { width: var(--v-star); height: var(--v-star); }
.v-stars__row--empty svg { fill: none; stroke: var(--v-muted); stroke-width: var(--v-hairline-strong); }
.v-stars__row--full {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--v-stars-fill, 0%)) 0 0);
}
.v-stars__row--full svg { fill: var(--v-text); stroke: var(--v-text); stroke-width: var(--v-hairline-strong); }

/* ================================================================ Intended shot (§9)
   A Sand block naming the photo that belongs here, until a real one is chosen (Kit, Journal). */
.v-kit-shot {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding: var(--v-space-5);
	background: var(--v-placeholder);
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
	line-height: var(--v-lh-ui);
	text-align: center;
}
.v-kit-shot span { max-width: 28ch; }

/* ================================================================ Cookie consent bar (§11.12.3, §7.1 v1.40)
   Non-modal: the page stays usable. Focus is never hidden under it: the script sets
   --v-consent-h, which pads the scroll edge while the bar shows (WCAG 2.4.11). */
html { scroll-padding-bottom: var(--v-consent-h, 0px); }
.v-consent {
	position: fixed;
	inset: auto 0 0 0;
	z-index: var(--v-z-drawer);
	padding-block: var(--v-space-4) calc(var(--v-space-4) + env(safe-area-inset-bottom, 0px));
	border-top: var(--v-hairline) solid var(--v-border);
	background: var(--v-surface);
	color: var(--v-text);
	box-shadow: var(--v-shadow-overlay);
	opacity: 0;
	transform: translateY(var(--v-lift-sm));
	transition: opacity var(--v-dur-bar-out) var(--v-ease-out), transform var(--v-dur-bar-out) var(--v-ease-out);
}
.v-consent[hidden] { display: none; }
.v-consent.is-in {
	opacity: 1;
	transform: none;
	transition-duration: var(--v-dur-ui);
}
.v-consent.is-leaving { opacity: 0; transform: translateY(var(--v-lift-sm)); }
.v-consent__inner {
	display: grid;
	gap: var(--v-space-4);
	align-items: center;
}
.v-consent__text {
	margin: 0;
	max-width: var(--v-measure);
	font-size: var(--v-text-small);
	line-height: var(--v-lh-ui);
}
.v-consent__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--v-space-3);
}
.v-consent__actions .v-btn { flex: 1 1 auto; }
.v-consent__choose {
	min-height: var(--v-hit-min);
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
	cursor: pointer;
}
@media (min-width: 768px) {
	.v-consent__inner { grid-template-columns: 1fr auto; gap: var(--v-space-6); }
	.v-consent__actions { flex-wrap: nowrap; }
	.v-consent__actions .v-btn { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
	.v-consent, .v-consent.is-leaving { transform: none; }
}
.v-consent-modal__intro { margin: 0 0 var(--v-space-4); font-size: var(--v-text-small); }
.v-consent-modal__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--v-space-2); }
.v-consent-modal__list li + li { border-top: var(--v-hairline) solid var(--v-border); }
.v-consent-modal__list .v-check { display: flex; width: 100%; }
.v-footer__cookies {
	display: inline-flex;
	align-items: center;
	min-height: var(--v-hit-min); /* A control, not inline text: full target size (§8, WCAG 2.5.8). */
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}