/* ==========================================================================
   U&U Hosiery — product listing and product detail
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb + page head
   -------------------------------------------------------------------------- */

.u-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding-block: var(--u-s4);
	font-size: var(--u-fs-xs);
	color: var(--u-muted);
}

.u-crumbs a { color: var(--u-muted); }
.u-crumbs a:hover { color: var(--u-olive); }
.u-crumbs span[aria-current] { color: var(--u-ink); font-weight: 500; }
.u-crumbs__sep { color: var(--u-line-strong); }

.u-pagehead {
	padding-block: var(--u-s5) var(--u-s6);
	border-bottom: var(--u-border);
	margin-bottom: var(--u-s6);
}

.u-pagehead h1 { margin: 0 0 var(--u-s2); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.u-pagehead p { margin: 0; max-width: 62ch; color: var(--u-muted); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   Shop layout
   -------------------------------------------------------------------------- */

.u-shop { display: block; padding-bottom: var(--u-section-y); }

@media (min-width: 1000px) {
	.u-shop { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--u-s7); align-items: start; }
}

/* Filters: an off-canvas drawer up to 999px, a sticky rail above it. */
.u-filters {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: var(--u-z-drawer);
	width: min(340px, 90vw);
	display: flex;
	flex-direction: column;
	background: var(--u-cream);
	box-shadow: var(--u-shadow-drawer);
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform var(--u-t-slow) var(--u-ease-out);
}

.u-filters.is-open { transform: translateX(0); visibility: visible; }

.u-filters__head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--u-s5);
	border-bottom: var(--u-border);
	background: var(--u-paper);
}

.u-filters__body { flex: 1; overflow-y: auto; padding: 0 var(--u-s5); }

.u-filters__foot {
	flex: none;
	display: flex;
	gap: var(--u-s2);
	padding: var(--u-s5);
	border-top: var(--u-border);
	background: var(--u-paper);
}

@media (min-width: 1000px) {
	.u-filters {
		position: sticky;
		top: calc(var(--u-header-h) + 20px);
		width: auto;
		max-height: calc(100vh - var(--u-header-h) - 40px);
		transform: none;
		visibility: visible;
		box-shadow: none;
		background: transparent;
		border: var(--u-border);
		border-radius: var(--u-r-sm);
		overflow: hidden;
	}

	.u-filters__head { padding: var(--u-s4) var(--u-s5); }
	.u-filters__head .u-iconbtn { display: none; }
	.u-filters__body { padding: 0 var(--u-s5); background: var(--u-paper); }
	.u-filters__foot { padding: var(--u-s4) var(--u-s5); }
}

.u-filters__title {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--u-s2);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 600;
	letter-spacing: var(--u-track-eyebrow);
	text-transform: uppercase;
}

.u-fgroup { border-bottom: var(--u-border); }
.u-fgroup:last-child { border-bottom: 0; }

.u-fgroup__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--u-s4) 0;
	background: none;
	border: 0;
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 600;
	color: var(--u-ink);
	cursor: pointer;
	text-align: left;
}

.u-fgroup__trigger svg { color: var(--u-muted); transition: transform var(--u-t) var(--u-ease); }
.u-fgroup__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.u-fgroup__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--u-t) var(--u-ease); }
.u-fgroup__panel > div { overflow: hidden; }
.u-fgroup__trigger[aria-expanded="true"] + .u-fgroup__panel { grid-template-rows: 1fr; }
.u-fgroup__inner { padding-bottom: var(--u-s4); display: flex; flex-direction: column; gap: 10px; }

.u-check {
	display: flex;
	align-items: center;
	gap: var(--u-s3);
	font-size: 0.9375rem;
	color: var(--u-ink);
	cursor: pointer;
	min-height: 28px;
}

.u-check input {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	flex: none;
	margin: 0;
	border: 1px solid var(--u-line-strong);
	border-radius: var(--u-r-xs);
	background: var(--u-paper);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background var(--u-t-fast) var(--u-ease), border-color var(--u-t-fast) var(--u-ease);
}

.u-check input::after {
	content: "";
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--u-cream);
	border-bottom: 2px solid var(--u-cream);
	transform: rotate(-45deg) scale(0);
	transition: transform var(--u-t-fast) var(--u-ease-out);
	margin-top: -2px;
}

.u-check input:checked { background: var(--u-olive); border-color: var(--u-olive); }
.u-check input:checked::after { transform: rotate(-45deg) scale(1); }
.u-check__count { margin-left: auto; font-size: var(--u-fs-xs); color: var(--u-muted-soft); }

/* Colour swatch filter — actual colour chips, name exposed to assistive tech. */
.u-fswatches { display: flex; flex-wrap: wrap; gap: 10px; }

.u-fswatch {
	position: relative;
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: var(--u-r-pill);
	border: 1px solid var(--u-line-strong);
	background: var(--swatch);
	cursor: pointer;
	transition: transform var(--u-t-fast) var(--u-ease);
}

.u-fswatch:hover { transform: scale(1.1); }
.u-fswatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--u-paper), 0 0 0 4px var(--u-olive); }

/* Dual-handle price range */
.u-range { padding-top: var(--u-s2); }
.u-range__track { position: relative; height: 26px; }

.u-range__track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 12px;
	height: 2px;
	background: var(--u-line-strong);
	border-radius: var(--u-r-pill);
}

.u-range__fill {
	position: absolute;
	top: 12px;
	height: 2px;
	background: var(--u-olive);
	border-radius: var(--u-r-pill);
}

.u-range input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.u-range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--u-paper);
	border: 2px solid var(--u-olive);
	cursor: grab;
	box-shadow: var(--u-shadow-sm);
}

.u-range input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--u-paper);
	border: 2px solid var(--u-olive);
	cursor: grab;
}

.u-range__vals {
	display: flex;
	justify-content: space-between;
	margin-top: var(--u-s2);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-xs);
	font-weight: 600;
	color: var(--u-ink);
}

/* Toolbar */
.u-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--u-s3);
	justify-content: space-between;
	padding-bottom: var(--u-s5);
	margin-bottom: var(--u-s5);
	border-bottom: var(--u-border);
}

.u-toolbar__count { font-size: var(--u-fs-sm); color: var(--u-muted); }
.u-toolbar__count strong { color: var(--u-ink); font-weight: 600; }
.u-toolbar__right { display: flex; align-items: center; gap: var(--u-s2); margin-left: auto; }

.u-toolbar__filter { display: inline-flex; }

@media (min-width: 1000px) {
	.u-toolbar__filter { display: none; }
}

.u-toolbar__sort { min-height: 42px; padding-block: 8px; font-size: var(--u-fs-sm); width: auto; }

.u-viewtoggle { display: none; border: 1px solid var(--u-line-strong); border-radius: var(--u-r-xs); overflow: hidden; }

@media (min-width: 700px) {
	.u-viewtoggle { display: flex; }
}

.u-viewtoggle button {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: var(--u-paper);
	border: 0;
	color: var(--u-muted);
	cursor: pointer;
	transition: background var(--u-t-fast) var(--u-ease), color var(--u-t-fast) var(--u-ease);
}

.u-viewtoggle button + button { border-left: 1px solid var(--u-line-strong); }
.u-viewtoggle button[aria-pressed="true"] { background: var(--u-olive); color: var(--u-cream); }

/* Active filter chips */
.u-chips { display: flex; flex-wrap: wrap; gap: var(--u-s2); margin-bottom: var(--u-s5); }
.u-chips:empty { display: none; }

.u-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px 6px 12px;
	background: var(--u-olive-tint);
	color: var(--u-olive);
	border: 0;
	border-radius: var(--u-r-pill);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-xs);
	font-weight: 600;
	cursor: pointer;
}

.u-chip:hover { background: var(--u-olive); color: var(--u-cream); }

.u-loadmore { display: flex; flex-direction: column; align-items: center; gap: var(--u-s3); margin-top: var(--u-s7); }
.u-loadmore__note { font-size: var(--u-fs-xs); color: var(--u-muted); }

.u-empty { padding: var(--u-s9) var(--u-s5); text-align: center; border: 1px dashed var(--u-line-strong); border-radius: var(--u-r-sm); }
.u-empty h3 { margin-bottom: var(--u-s2); }
.u-empty p { color: var(--u-muted); margin-bottom: var(--u-s5); }

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */

.u-pdp { display: grid; gap: var(--u-s6); padding-bottom: var(--u-s8); }

@media (min-width: 960px) {
	.u-pdp { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--u-s8); align-items: start; }
}

/* Gallery */
.u-gallery { display: grid; gap: var(--u-s3); }

@media (min-width: 620px) {
	.u-gallery { grid-template-columns: 84px minmax(0, 1fr); }
}

@media (min-width: 960px) {
	.u-gallery { position: sticky; top: calc(var(--u-header-h) + 24px); }
}

.u-gallery__thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 68px;
	gap: var(--u-s2);
	overflow-x: auto;
	scrollbar-width: none;
	order: 2;
}

.u-gallery__thumbs::-webkit-scrollbar { display: none; }

@media (min-width: 620px) {
	.u-gallery__thumbs { order: 0; grid-auto-flow: row; grid-auto-columns: auto; grid-auto-rows: 105px; overflow-y: auto; overflow-x: hidden; max-height: 560px; }
}

.u-gallery__thumb {
	padding: 0;
	border: 1px solid var(--u-line);
	border-radius: var(--u-r-xs);
	overflow: hidden;
	background: var(--u-cream-deep);
	cursor: pointer;
	aspect-ratio: var(--u-card-ratio);
	transition: border-color var(--u-t-fast) var(--u-ease);
}

.u-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.u-gallery__thumb[aria-selected="true"] { border-color: var(--u-olive); box-shadow: inset 0 0 0 1px var(--u-olive); }

.u-gallery__stage {
	position: relative;
	aspect-ratio: var(--u-card-ratio);
	background: var(--u-paper);
	border: var(--u-border);
	border-radius: var(--u-r-sm);
	overflow: hidden;
	cursor: zoom-in;
}

.u-gallery__img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms var(--u-ease), opacity var(--u-t) var(--u-ease); }

/* Zoom-on-hover: the transform origin follows the pointer, set from JS. */
@media (hover: hover) and (pointer: fine) {
	.u-gallery__stage:hover .u-gallery__img { transform: scale(1.9); }
}

.u-gallery__zoomhint {
	position: absolute;
	right: var(--u-s3);
	bottom: var(--u-s3);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 11px;
	background: rgba(255, 255, 255, 0.92);
	border: var(--u-border);
	border-radius: var(--u-r-pill);
	font-family: var(--u-font-head);
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--u-muted);
	pointer-events: none;
}

.u-gallery__badges { position: absolute; top: var(--u-s3); left: var(--u-s3); display: flex; flex-direction: column; gap: 6px; z-index: 2; }

/* Lightbox */
.u-lightbox__img { width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--u-r-sm); background: var(--u-paper); }
.u-lightbox__nav { display: flex; justify-content: center; gap: var(--u-s2); margin-top: var(--u-s4); }

.u-lightbox__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: var(--u-r-pill);
	background: rgba(247, 245, 242, 0.4);
	cursor: pointer;
}

.u-lightbox__dot[aria-selected="true"] { background: var(--u-gold); }

/* Summary column */
.u-summary { display: flex; flex-direction: column; gap: var(--u-s4); }

.u-summary__tone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	font-family: var(--u-font-head);
	font-size: var(--u-fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--u-muted);
}

.u-summary__tone::before { content: ""; width: 18px; height: 2px; background: var(--u-tone-neutral); }
.u-summary[data-tone="men"] .u-summary__tone::before { background: var(--u-tone-men); }
.u-summary[data-tone="women"] .u-summary__tone::before { background: var(--u-tone-women); }
.u-summary[data-tone="islamic"] .u-summary__tone::before { background: var(--u-tone-islamic); }

.u-summary__title { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.125rem); }

.u-summary__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s4); font-size: var(--u-fs-sm); color: var(--u-muted); }
.u-summary__meta a { color: var(--u-muted); border-bottom: 1px solid var(--u-line-strong); }
.u-summary__meta a:hover { color: var(--u-olive); }

.u-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--u-s3);
	font-family: var(--u-font-head);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--u-ink);
}

.u-price del { font-size: 1.125rem; }
.u-price__save {
	align-self: center;
	padding: 5px 9px;
	background: var(--u-terracotta-soft);
	color: var(--u-terracotta);
	border-radius: var(--u-r-xs);
	font-size: var(--u-fs-xs);
	font-weight: 700;
	letter-spacing: 0.03em;
}

.u-price__tax { flex-basis: 100%; font-family: var(--u-font-body); font-size: var(--u-fs-xs); font-weight: 400; color: var(--u-muted); }

.u-stockline {
	display: inline-flex;
	align-items: center;
	gap: var(--u-s2);
	align-self: flex-start;
	padding: 7px 12px;
	border-radius: var(--u-r-xs);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-xs);
	font-weight: 600;
}

.u-stockline--in { background: var(--u-success-soft); color: var(--u-success); }
.u-stockline--low { background: var(--u-terracotta-soft); color: var(--u-terracotta); }
.u-stockline--out { background: var(--u-cream-warm); color: var(--u-muted); }

.u-stockline__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.u-stockline--low .u-stockline__dot { animation: u-pulse 1.6s var(--u-ease) infinite; }

@keyframes u-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(1.35); }
}

.u-optrow { display: flex; flex-direction: column; gap: var(--u-s3); }

.u-optrow__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--u-s3); }

.u-optrow__label {
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 600;
	color: var(--u-ink);
}

.u-optrow__label span { color: var(--u-muted); font-weight: 400; }

.u-sizeguide {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--u-font-head);
	font-size: var(--u-fs-xs);
	font-weight: 600;
	color: var(--u-olive);
	border-bottom: 1px solid var(--u-line-strong);
	cursor: pointer;
}

.u-sizeguide:hover { color: var(--u-gold-deep); border-color: var(--u-gold); }

.u-buyrow { display: flex; flex-wrap: wrap; gap: var(--u-s3); align-items: stretch; }
.u-buyrow .u-qty { flex: none; }
.u-buyrow .u-btn { flex: 1 1 160px; }

.u-buystack { display: flex; flex-direction: column; gap: var(--u-s3); }

/* Delivery / COD reassurance block, inline with the buy controls. */
.u-deliver {
	display: grid;
	gap: var(--u-s3);
	padding: var(--u-s4);
	background: var(--u-cream-deep);
	border: var(--u-border);
	border-radius: var(--u-r-sm);
}

.u-deliver__row { display: flex; gap: var(--u-s3); align-items: flex-start; font-size: var(--u-fs-sm); }
.u-deliver__row svg { flex: none; color: var(--u-gold-deep); margin-top: 2px; }
.u-deliver__row strong { display: block; font-family: var(--u-font-head); font-weight: 600; color: var(--u-ink); }
.u-deliver__row span { color: var(--u-muted); font-size: var(--u-fs-xs); }

.u-wa-order {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--u-s2);
	padding: 12px;
	background: transparent;
	color: #1f8f4e;
	border: 1px solid #1f8f4e;
	border-radius: var(--u-r-xs);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 600;
	transition: background var(--u-t-fast) var(--u-ease), color var(--u-t-fast) var(--u-ease);
}

.u-wa-order:hover { background: #1f8f4e; color: #fff; }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.u-tabs { border-top: var(--u-border); padding-top: var(--u-s7); }

.u-tabs__list {
	display: flex;
	gap: var(--u-s6);
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: var(--u-border);
	margin-bottom: var(--u-s6);
}

.u-tabs__list::-webkit-scrollbar { display: none; }

.u-tabs__tab {
	position: relative;
	flex: none;
	padding: 0 0 var(--u-s4);
	background: none;
	border: 0;
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--u-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--u-t-fast) var(--u-ease);
}

.u-tabs__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--u-gold);
	transform: scaleX(0);
	transition: transform var(--u-t) var(--u-ease-out);
}

.u-tabs__tab[aria-selected="true"] { color: var(--u-ink); }
.u-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }

.u-tabs__panel { display: none; max-width: 74ch; }
.u-tabs__panel.is-active { display: block; }
.u-tabs__panel h3 { margin-top: var(--u-s5); }
.u-tabs__panel h3:first-child { margin-top: 0; }
.u-tabs__panel ul { padding-left: 1.1em; }
.u-tabs__panel li { margin-bottom: 6px; }

/* Review list inside the tabs */
.u-revlist { display: flex; flex-direction: column; gap: var(--u-s5); max-width: 70ch; }

.u-revitem { display: flex; gap: var(--u-s4); padding-bottom: var(--u-s5); border-bottom: var(--u-border); }
.u-revitem:last-child { border-bottom: 0; }

.u-revitem__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s3); margin-bottom: 6px; }
.u-revitem__name { font-family: var(--u-font-head); font-size: var(--u-fs-sm); font-weight: 600; }

.u-revitem__verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--u-fs-xs);
	color: var(--u-success);
	font-weight: 600;
}

.u-revitem__text { margin: 0; font-size: 0.9375rem; color: var(--u-ink); }
.u-revitem__meta { margin-top: 6px; font-size: var(--u-fs-xs); color: var(--u-muted); }

/* --------------------------------------------------------------------------
   Sticky add-to-cart bar (mobile)
   -------------------------------------------------------------------------- */

.u-stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--u-z-float);
	display: flex;
	align-items: center;
	gap: var(--u-s3);
	padding: 10px var(--u-gutter);
	padding-bottom: max(10px, env(safe-area-inset-bottom));
	background: rgba(247, 245, 242, 0.97);
	backdrop-filter: blur(10px);
	border-top: var(--u-border);
	box-shadow: 0 -6px 24px rgba(28, 32, 26, 0.1);
	transform: translateY(110%);
	transition: transform var(--u-t) var(--u-ease-out);
}

.u-stickybar.is-visible { transform: translateY(0); }

@media (min-width: 960px) {
	.u-stickybar { display: none; }
}

.u-stickybar__thumb { width: 44px; height: 55px; object-fit: cover; border-radius: var(--u-r-xs); flex: none; }
.u-stickybar__info { flex: 1; min-width: 0; }

.u-stickybar__name {
	font-family: var(--u-font-head);
	font-size: var(--u-fs-xs);
	font-weight: 600;
	color: var(--u-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.u-stickybar__price { font-family: var(--u-font-head); font-size: var(--u-fs-sm); font-weight: 700; color: var(--u-ink); }
.u-stickybar__price del { font-size: var(--u-fs-xs); font-weight: 400; color: var(--u-muted-soft); margin-left: 5px; }
.u-stickybar .u-btn { flex: none; }

/* --------------------------------------------------------------------------
   Cart drawer contents
   -------------------------------------------------------------------------- */

.u-cartline { display: flex; gap: var(--u-s3); padding-bottom: var(--u-s4); margin-bottom: var(--u-s4); border-bottom: var(--u-border); }
.u-cartline:last-child { border-bottom: 0; margin-bottom: 0; }

.u-cartline__thumb { width: 72px; height: 90px; flex: none; object-fit: cover; border-radius: var(--u-r-xs); background: var(--u-cream-warm); }
.u-cartline__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.u-cartline__name { font-family: var(--u-font-head); font-size: var(--u-fs-sm); font-weight: 500; line-height: 1.35; color: var(--u-ink); }
.u-cartline__var { font-size: var(--u-fs-xs); color: var(--u-muted); }
.u-cartline__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--u-s3); margin-top: auto; }
.u-cartline__price { font-family: var(--u-font-head); font-size: var(--u-fs-sm); font-weight: 700; }

.u-cartline__remove {
	background: none;
	border: 0;
	padding: 4px;
	color: var(--u-muted);
	cursor: pointer;
	font-size: var(--u-fs-xs);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.u-cartline__remove:hover { color: var(--u-terracotta); }

.u-cartempty { text-align: center; padding: var(--u-s8) var(--u-s4); }
.u-cartempty svg { margin: 0 auto var(--u-s4); color: var(--u-line-strong); }
.u-cartempty p { color: var(--u-muted); margin-bottom: var(--u-s5); }

.u-carttotal { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--u-font-head); }
.u-carttotal__label { font-size: var(--u-fs-sm); font-weight: 600; }
.u-carttotal__value { font-size: 1.25rem; font-weight: 700; }

/* Free-delivery progress meter — a concrete nudge toward the threshold. */
.u-freeship { padding: var(--u-s4); background: var(--u-gold-wash); border-radius: var(--u-r-sm); margin-bottom: var(--u-s5); }
.u-freeship__text { font-size: var(--u-fs-xs); color: var(--u-gold-deep); font-weight: 600; margin-bottom: var(--u-s2); }
.u-freeship__bar { height: 5px; background: rgba(168, 130, 58, 0.22); border-radius: var(--u-r-pill); overflow: hidden; }
.u-freeship__fill { height: 100%; background: var(--u-gold-deep); border-radius: var(--u-r-pill); transition: width var(--u-t-slow) var(--u-ease-out); }

.u-cartnote { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--u-fs-xs); color: var(--u-muted); }
.u-cartnote svg { color: var(--u-success); }

/* --------------------------------------------------------------------------
   WooCommerce surfaces we do not fully re-template (cart, checkout, account)
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: var(--u-s4) var(--u-s5);
	background: var(--u-paper);
	border: var(--u-border);
	border-left: 3px solid var(--u-gold);
	border-radius: var(--u-r-xs);
	list-style: none;
	margin-bottom: var(--u-s5);
	font-size: var(--u-fs-sm);
}

.woocommerce-error { border-left-color: var(--u-terracotta); }
.woocommerce-message { border-left-color: var(--u-success); }

.woocommerce table.shop_table {
	border: var(--u-border);
	border-radius: var(--u-r-sm);
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--u-fs-sm);
}

.woocommerce table.shop_table th { background: var(--u-cream-deep); font-family: var(--u-font-head); }

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
	background: var(--u-olive);
	color: var(--u-cream);
	border-radius: var(--u-r-xs);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 600;
	letter-spacing: var(--u-track-button);
	padding: 14px 26px;
	transition: background var(--u-t-fast) var(--u-ease);
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover { background: var(--u-ink); color: var(--u-cream); }

.woocommerce .button.alt,
.woocommerce button.button.alt { background: var(--u-gold); color: var(--u-ink); }
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--u-gold-deep); color: var(--u-cream); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--u-line-strong);
	border-radius: var(--u-r-xs);
	background: var(--u-paper);
}

/* ---- WooCommerce's own add-to-cart form, restyled inside our summary column --
   We render woocommerce_template_single_add_to_cart() rather than rebuilding it,
   so variable products, stock rules and cart plugins keep working. Everything
   below is presentation only. */

.u-summary form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--u-s3);
	margin: 0;
}

.u-summary form.cart::before,
.u-summary form.cart::after { content: none; }

.u-summary .variations { width: 100%; border: 0; margin: 0 0 var(--u-s2); }

.u-summary .variations tbody,
.u-summary .variations tr { display: block; width: 100%; }

.u-summary .variations th,
.u-summary .variations td {
	display: block;
	width: 100%;
	padding: 0 0 var(--u-s3);
	border: 0;
	text-align: left;
}

.u-summary .variations label {
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 600;
	margin-bottom: 6px;
	display: block;
}

.u-summary .variations select {
	width: 100%;
	min-height: 48px;
	padding: 12px 40px 12px 16px;
	border: 1px solid var(--u-line-strong);
	border-radius: var(--u-r-xs);
	background-color: var(--u-paper);
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23656B60' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.u-summary .reset_variations { font-size: var(--u-fs-xs); color: var(--u-muted); }

.u-summary .woocommerce-variation-price { flex-basis: 100%; font-family: var(--u-font-head); font-size: 1.25rem; font-weight: 700; }
.u-summary .woocommerce-variation-availability { flex-basis: 100%; font-size: var(--u-fs-sm); color: var(--u-muted); }

/* WooCommerce's quantity box, restyled to match our stepper. */
.u-summary form.cart .quantity {
	flex: none;
	display: inline-flex;
	border: 1px solid var(--u-line-strong);
	border-radius: var(--u-r-xs);
	overflow: hidden;
	background: var(--u-paper);
}

.u-summary form.cart .quantity input.qty {
	width: 76px;
	min-height: 48px;
	border: 0;
	text-align: center;
	font-family: var(--u-font-head);
	font-weight: 600;
	background: transparent;
}

.u-summary form.cart button.single_add_to_cart_button {
	flex: 1 1 180px;
	min-height: 48px;
	background: transparent;
	color: var(--u-olive);
	border: 1px solid var(--u-line-strong);
	border-radius: var(--u-r-xs);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 600;
	letter-spacing: var(--u-track-button);
	padding: 14px 24px;
	transition: border-color var(--u-t-fast) var(--u-ease), color var(--u-t-fast) var(--u-ease);
}

.u-summary form.cart button.single_add_to_cart_button:hover {
	background: transparent;
	border-color: var(--u-olive);
	color: var(--u-olive);
}

/* Buy Now is the primary, high-contrast action — gold against the cream page. */
.u-summary form.cart .u-buynow {
	flex: 1 1 180px;
	min-height: 48px;
	background: var(--u-gold);
	color: var(--u-ink);
	border: 1px solid var(--u-gold);
	border-radius: var(--u-r-xs);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 600;
	letter-spacing: var(--u-track-button);
	cursor: pointer;
	transition: background var(--u-t-fast) var(--u-ease), color var(--u-t-fast) var(--u-ease);
}

.u-summary form.cart .u-buynow:hover { background: var(--u-gold-deep); border-color: var(--u-gold-deep); color: var(--u-cream); }
.u-summary form.cart .u-buynow:active { transform: translateY(1px); }

.u-summary form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--u-s3);
	width: 100%;
}

/* Size buttons injected by JS from a pa_size variation select. */
.u-summary .u-sizes { width: 100%; }