/* =========================================================================
   Ore & Aksesore - storefront styles

   Full-width retail layout: white chrome, a teal action colour, and red kept
   strictly for reduced prices. Product imagery sits on a flat light ground so
   a grid of mixed shots reads as one set.
   ========================================================================= */

:root {
	/* Action */
	--teal:        #0b6b60;
	--teal-dark:   #08544b;
	--teal-bright: #12a08e;

	/* Text */
	--ink:         #1a1a1a;
	--body:        #444444;
	--muted:       #6b6b6b;
	--faint:       #8f8f8f;

	/* Rules and grounds */
	--line:        #e0e0e0;
	--line-soft:   #efefef;
	--bg:          #ffffff;
	--bg-soft:     #f5f5f5;
	--prod-bg:     #ffffff;

	/* Signals */
	--sale:        #d0021b;
	--green:       #0b6b60;
	--amber:       #f5a623;

	--radius:      4px;
	--radius-lg:   6px;

	--shadow-sm:   0 1px 2px rgba(0, 0, 0, .06);
	--shadow:      0 2px 14px rgba(0, 0, 0, .09);
	--shadow-lg:   0 16px 40px rgba(0, 0, 0, .16);

	/* Full-bleed layout with a comfortable gutter. */
	--gutter:      50px;
	--head-h:      92px;

	--font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--body);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	/* A product name, reference code or e-mail address with no break
	   opportunity must not be what pushes a narrow column open. */
	overflow-wrap: break-word;
	/* Belt and braces against a stray wide child scrolling the whole page
	   sideways on a phone. `clip` rather than `hidden`: it establishes no
	   scroll container, so the sticky header and rails keep sticking. */
	overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.22; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--teal); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }

/* Full-width container: edge to edge, gutter only. */
.wrap { width: 100%; margin: 0 auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 1200px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--ink); color: #fff; padding: 12px 18px;
}
.skip:focus { left: 8px; top: 8px; }

.icon { flex: none; }

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 28px; border: 1px solid transparent; border-radius: var(--radius);
	font-size: 14px; font-weight: 600; line-height: 1;
	cursor: pointer; text-align: center; transition: background .14s, color .14s, border-color .14s;
}
.btn--primary { background: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--teal-dark); color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }
.btn--outline { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { padding: 10px 16px; font-size: 13px; }
.btn--block { width: 100%; }

/* ---------- Badges ---------- */

.badge {
	display: inline-block; padding: 4px 8px; border-radius: 2px;
	font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
	line-height: 1.25;
}
.badge--sale { background: var(--sale); color: #fff; }
.badge--new  { background: var(--ink); color: #fff; }
.badge--out  { background: #8f8f8f; color: #fff; }

/* ---------- Utility bar ---------- */

.ubar { background: var(--ink); color: #d8d8d8; font-size: 12px; }
.ubar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 34px; gap: 20px; }
.ubar__list { display: flex; gap: 26px; flex-wrap: wrap; }
.ubar__list li { display: flex; align-items: center; gap: 7px; }
.ubar__list .icon { color: #fff; opacity: .7; }
.ubar__phone { display: flex; align-items: center; gap: 7px; font-weight: 600; color: #fff; }

/* ---------- Header ---------- */

.head { background: #fff; position: sticky; top: 0; z-index: 60; }
.head__inner {
	display: grid; grid-template-columns: 1fr minmax(0, 760px) 1fr;
	align-items: center; gap: 30px; min-height: var(--head-h);
}
.head__burger { display: none; background: none; border: 0; padding: 8px; margin-left: -8px; cursor: pointer; color: var(--ink); }

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo__mark { color: var(--ink); display: flex; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name { font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-transform: uppercase; }
.logo__tag { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--faint); margin-top: 3px; }
.logo--light .logo__name, .logo--light, .logo--light .logo__mark { color: #fff; }
.logo--light .logo__tag { color: #9a9a9a; }

/* Search */
.hsearch {
	display: flex; align-items: stretch; width: 100%;
	border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: #fff;
}
.hsearch__scope { display: flex; border-right: 1px solid var(--line); }
.hsearch__scope select {
	border: 0; background: #fff; padding: 0 30px 0 16px; font-size: 13px; color: var(--muted);
	cursor: pointer; max-width: 180px; appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.hsearch__scope select:focus { outline: 2px solid var(--teal); outline-offset: -2px; }
.hsearch__btn {
	display: flex; align-items: center; padding: 0 4px 0 18px;
	background: #fff; color: var(--ink); border: 0; cursor: pointer; order: -1;
}
.hsearch__btn-label { display: none; }
.hsearch__input { flex: 1; min-width: 0; border: 0; padding: 15px 16px; font-size: 15px; color: var(--ink); }
.hsearch__input:focus { outline: none; }
.hsearch__input::placeholder { color: var(--muted); }

/* Header actions */
.head__actions { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.haction { display: flex; align-items: center; color: var(--ink); }
.haction:hover { color: var(--teal); }
.haction__text { display: none; }
.haction__icon { position: relative; display: flex; }
.haction__bubble {
	position: absolute; top: -7px; right: -9px; min-width: 20px; height: 20px; padding: 0 5px;
	border-radius: 10px; background: var(--teal); color: #fff;
	font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.haction--search { display: none; }

.head__mobilesearch { padding: 12px 0; border-top: 1px solid var(--line); background: #fff; }

/* ---------- Primary navigation ---------- */

/* Equal-width blocks, centred on the row. Hovering one fills it solid and
   drops a panel that spans the whole window, so every panel shares the same
   column grid no matter how many columns it holds. */
.nav { background: #fff; position: relative; z-index: 55; }
.nav__bar { position: relative; z-index: 2; background: #fff; border-block: 1px solid var(--line); }
.nav__list { display: flex; align-items: stretch; justify-content: center; gap: 0; }
.nav__item { position: static; display: flex; flex: 0 1 275px; min-width: 0; }
.nav__link {
	flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
	height: 60px; padding: 0 14px;
	color: var(--ink); font-size: 16px; font-weight: 600;
	transition: background .12s, color .12s;
}
.nav__item:hover > .nav__link,
.nav__item:focus-within > .nav__link { background: var(--ink); color: #fff; }
.nav__item--sale .nav__link { color: var(--sale); }
.nav__item--sale:hover > .nav__link,
.nav__item--sale:focus-within > .nav__link { color: #fff; }

/* Dims the page under an open panel. Sits below the bar and the panel, above
   everything else, and never takes the pointer. */
.nav__scrim {
	position: fixed; inset: 0; z-index: 1; pointer-events: none;
	background: rgba(0, 0, 0, .38);
	opacity: 0; visibility: hidden;
	transition: opacity .14s ease, visibility .14s;
}
.nav:has(.has-mega:hover) .nav__scrim,
.nav:has(.has-mega:focus-within) .nav__scrim { opacity: 1; visibility: visible; }

/* Promotional band under the nav */
/* One line, so the strip stays a thin rule between the nav and the page. */
.promoband {
	display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
	background: var(--teal); color: #fff; text-align: center; padding: 8px 20px;
}
.promoband__title { font-size: 13.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.promoband__cta { font-size: 13.5px; color: #fff; text-decoration: underline; }
.promoband__cta:hover { color: #fff; }

/* Mega menu: pinned to the bottom of the bar, full window width. */
.mega {
	position: absolute; top: 100%; left: 0; width: 100%; z-index: 3;
	background: #fff; border-bottom: 1px solid var(--line);
	box-shadow: 0 14px 26px rgba(0, 0, 0, .10);
	padding: 42px 0 48px;
	opacity: 0; visibility: hidden;
	transition: opacity .12s ease, visibility .12s;
}
.nav__item.has-mega:hover > .mega,
.nav__item.has-mega:focus-within > .mega { opacity: 1; visibility: visible; }
.mega__inner { display: flex; align-items: flex-start; gap: 30px; padding-inline: var(--gutter); }
.mega__col { flex: 1 1 0; min-width: 0; }
.mega__title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink); margin: 0 0 14px; }
.mega__title a { color: inherit; }
.mega__title a:hover { color: inherit; text-decoration: underline; }
.mega__links a { display: block; padding: 7px 0; color: var(--body); font-size: 15px; }
.mega__links a:hover { color: var(--ink); text-decoration: underline; }
.mega__all a { font-weight: 600; color: var(--ink); text-decoration: underline; }

.mega--brands .mega__inner { display: block; }
.mega__brandgrid { column-count: 4; column-gap: 30px; }
.mega__brandgroup { break-inside: avoid; margin-bottom: 20px; }
.mega__letter { display: block; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.mega__brandgroup a { display: block; padding: 5px 0; font-size: 15px; color: var(--body); }
.mega__brandgroup a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Mobile drawer ---------- */

.drawer {
	position: fixed; inset: 0 auto 0 0; width: min(88vw, 360px); background: #fff; z-index: 120;
	transform: translateX(-100%); transition: transform .22s ease; overflow-y: auto;
	display: flex; flex-direction: column;
}
.drawer[hidden] { display: flex; }
.drawer.is-open { transform: translateX(0); }
.drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 18px; background: var(--ink); color: #fff; position: sticky; top: 0;
}
.drawer__title { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.drawer__close { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.drawer__list { padding: 4px 0 40px; }
.drawer__item { border-bottom: 1px solid var(--line-soft); }
.drawer__link, .drawer__toggle {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	padding: 15px 18px; background: none; border: 0; text-align: left;
	font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.drawer__link--sale { color: var(--sale); }
.drawer__caret {
	width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(45deg); transition: transform .16s;
}
.drawer__toggle[aria-expanded="true"] .drawer__caret { transform: rotate(-135deg); }
.drawer__sub { background: var(--bg-soft); padding: 4px 0 10px; }
.drawer__sub a { display: block; padding: 11px 18px 11px 30px; font-size: 14px; color: var(--body); }

.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 110; }
.scrim[hidden] { display: none; }

/* ---------- Hero ---------- */

/* Full-bleed banner with the caption sitting in the image rather than under
   it. The photography is a product on white, so the caption is ink on white
   and the scrim guarantees the foot of the banner is clear whatever way
   `cover` crops it - the seam between banner and page is invisible. */
.bhero {
	position: relative;
	min-height: clamp(400px, 34vw, 660px);
	/* Held high in the frame so `cover` trims the clear foot of the banner
	   rather than the top of the watch. */
	background: #fff center 22% / cover no-repeat;
	display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
	padding: 60px clamp(20px, 5vw, 60px) 54px;
	text-align: center;
}
.bhero::before {
	content: ""; position: absolute; inset: auto 0 0 0; height: 58%;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.86) 46%, #fff 78%);
}
.bhero__body { position: relative; z-index: 2; }
.bhero__title {
	font-size: clamp(22px, 2.3vw, 31px); font-weight: 700; color: var(--ink);
	margin: 0 0 24px; line-height: 1.25;
}
.bhero__cta {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 170px; padding: 15px 38px;
	border: 1px solid var(--ink); background: #fff; color: var(--ink);
	font-size: 15px; font-weight: 500; line-height: 1;
	transition: background .14s, color .14s;
}
.bhero__cta:hover { background: var(--ink); color: #fff; }

/* A supplied lifestyle banner is usually dark where the caption sits, so the
   scrim and the caption both invert. Set by apply-photos.php, which measures
   the foot of the picture rather than guessing. */
/* On a narrow screen the banner is scaled to the width rather than cropped,
   so the strip the caption sits on is the section's own background. White
   under a dark banner reads as a washed-out gap; ink reads as the picture. */
.bhero--dark { background-color: var(--ink); }
.bhero--dark::before {
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 48%, rgba(0,0,0,.72) 100%);
}
.bhero--dark .bhero__title { color: #fff; }
.bhero--dark .bhero__cta { background: #fff; border-color: #fff; color: var(--ink); }
.bhero--dark .bhero__cta:hover { background: transparent; color: #fff; }

/* ---------- Trust bar ---------- */

.trust { background: var(--bg-soft); border-block: 1px solid var(--line); margin-top: 40px; }
.trust--compact { margin-top: 50px; }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 22px; }
.trust__item { display: flex; align-items: center; gap: 13px; justify-content: center; }
.trust__item .icon { color: var(--teal); }
.trust__copy { display: flex; flex-direction: column; line-height: 1.3; }
.trust__title { font-size: 14px; font-weight: 700; color: var(--ink); }
.trust__desc { font-size: 12.5px; color: var(--muted); }

/* ---------- Sections ---------- */

.sec { padding: 54px 0; }
.sec--deals { background: var(--bg-soft); }
.sec--brandrow { padding-block: 60px 34px; }
/* The tile bands carry their own breathing room, so they sit closer together
   than a section of running copy would. */
.sec--tiles { padding-block: 34px; }
.sec--promo { padding-block: 34px; }

/* Centred section heading, the way the reference stacks them. */
.sechead { text-align: center; margin-bottom: 30px; }
.sechead__kicker {
	display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--teal); margin-bottom: 8px;
}
.sechead__title { font-size: clamp(22px, 2.2vw, 28px); }
.sechead__title--solo { text-align: center; margin: 0 0 30px; }
.sechead__link {
	display: inline-block; margin-top: 12px;
	font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline;
}
.sechead__link:hover { color: var(--teal); }
.sechead__link .icon { display: none; }

/* ---------- Brand chip row ---------- */

/* One row that scrolls sideways rather than wrapping: the roster reads as a
   single line of the shop's brands, and a longer roster costs no height. */
.brandrow {
	overflow-x: auto; overflow-y: hidden;
	padding-inline: var(--gutter); padding-bottom: 4px;
	scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.brandrow:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.brandrow__list { display: flex; gap: 15px; width: max-content; }
.brandpill {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 168px; height: 48px; padding: 0 26px;
	border: 1px solid var(--line); background: #fff;
	font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap;
	transition: border-color .14s;
}
.brandpill:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Promotional card ---------- */

.promo {
	display: flex; align-items: center; justify-content: space-between; gap: 36px;
	padding: 34px clamp(22px, 3vw, 52px);
	background: linear-gradient(115deg, var(--teal-dark) 0%, #0d2f35 58%, #101a28 100%);
	color: #fff;
}
.promo__copy { max-width: 460px; }
.promo__title { font-size: clamp(19px, 1.7vw, 23px); color: #fff; margin-bottom: 10px; }
.promo__copy p { font-size: 13.5px; margin: 0 0 4px; color: rgba(255, 255, 255, .82); }
.promo__fine { font-weight: 700; color: #fff !important; margin-top: 8px !important; }
.promo__mark {
	font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; letter-spacing: .04em;
	text-transform: uppercase; color: #fff; white-space: nowrap;
}
.promo__mark strong { font-weight: 800; }
.promo__btn {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	min-width: 210px; padding: 18px 40px;
	background: var(--teal-bright); color: #fff;
	font-size: 15px; font-weight: 700; line-height: 1;
	transition: background .14s;
}
.promo__btn:hover { background: #16b9a4; color: #fff; }

/* ---------- Brand picture tiles ---------- */

.btiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.btiles--wide { grid-template-columns: repeat(2, 1fr); }
.btile__link { display: flex; flex-direction: column; align-items: flex-start; }
/* The photographs are on white and so is the page, so the card needs a hairline
   of its own or the grid reads as watches floating in space. */
.btile__media {
	width: 100%; aspect-ratio: 860 / 1040; overflow: hidden;
	background: var(--prod-bg); display: block; border: 1px solid var(--line-soft);
}
.btiles--wide .btile__media { aspect-ratio: 2 / 1; }
.btile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.btile__link:hover .btile__media img { transform: scale(1.04); }
.btile__name { font-size: 17px; font-weight: 700; color: var(--ink); margin: 18px 0 16px; }
.btile__link:hover .btile__name { text-decoration: underline; }
.btile__cta {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 146px; padding: 13px 30px;
	border: 1px solid var(--ink); background: #fff; color: var(--ink);
	font-size: 14px; font-weight: 500; line-height: 1;
	transition: background .14s, color .14s;
}
.btile__link:hover .btile__cta { background: var(--ink); color: #fff; }

/* ---------- Product grid ---------- */

ul.products {
	display: grid; gap: 46px 34px; margin: 0; padding: 0; list-style: none;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
ul.products.row { grid-template-columns: repeat(4, minmax(0, 1fr)); }

li.product.card { display: flex; flex-direction: column; background: #fff; position: relative; }

.card__media { position: relative; background: var(--prod-bg); }
.card__medialink { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__badges { position: absolute; top: 10px; left: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; z-index: 2; }

/* Wishlist and bag sit plainly in the corner of the photograph, always on -
   the reference has no hover reveal and no button chrome behind them. */
.card__quick {
	position: absolute; top: 2px; right: 0; z-index: 2;
	display: flex; flex-direction: column; gap: 32px;
}
.card__quickbtn {
	width: 30px; height: 30px; padding: 0; border: 0; border-radius: 0;
	background: none; box-shadow: none;
	display: flex; align-items: center; justify-content: center;
	color: var(--ink); cursor: pointer;
}
.card__quickbtn:hover { background: none; color: var(--teal); }

.card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 0 0; flex: 1; }
.card__title { font-size: 16px; font-weight: 400; line-height: 1.35; }
.card__title a { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__title a:hover { text-decoration: underline; }

/* Stars */
.stars { position: relative; display: inline-block; line-height: 0; }
.stars__bg svg, .stars__fg svg { fill: currentColor; }
.stars__bg { color: #dcdcdc; display: block; }
.stars__fg { color: var(--amber); position: absolute; inset: 0; overflow: hidden; white-space: nowrap; }
.stars__count { font-size: 12px; color: var(--muted); }

/* Price: reduced price red, RRP struck through beside it. */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.price__rrp { font-size: 15px; color: #767676; order: 2; }
.price__rrp s { text-decoration: line-through; }
.price__now { font-size: 16.5px; font-weight: 700; color: var(--ink); order: 1; }
.price__now--sale { color: var(--sale); }
.price__now .woocommerce-Price-amount { font-size: inherit; }
.price__save { display: none; }
/* Stock */
.stock { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.stock--in { color: var(--teal); }
.stock--low { color: #b35c00; }
.stock--out { color: var(--muted); }

/* Loop add to cart */
li.product .button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; padding: 11px 14px; border: 1px solid var(--ink); border-radius: var(--radius);
	background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer;
}
li.product .button:hover { background: var(--ink); color: #fff; }
li.product .added_to_cart { display: none; }
li.product .button.loading { opacity: .6; }

/* ---------- Newsletter ---------- */

.news { background: var(--bg-soft); padding: 54px 0 46px; text-align: center; }
.news__inner { display: block; max-width: 900px; margin: 0 auto; }
.news__title {
	font-size: clamp(17px, 1.6vw, 21px); margin-bottom: 26px;
	text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
}
/* Input and button meet with no gap, as one control. */
.news__form { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; max-width: 860px; margin: 0 auto; }
.news__input {
	flex: 1 1 320px; min-width: 0; height: 52px; padding: 0 18px;
	border: 1px solid var(--line); border-right: 0; background: #fff;
	color: var(--ink); font-size: 15px;
}
.news__input::placeholder { color: var(--muted); }
.news__input:focus { outline: none; border-color: var(--ink); }
.news__btn {
	flex: none; min-width: 246px; height: 52px; padding: 0 40px;
	border: 1px solid var(--ink); background: var(--ink); color: #fff;
	font-size: 15px; font-weight: 600; cursor: pointer;
	transition: background .14s;
}
.news__btn:hover { background: #000; }
.news__note {
	font-size: 13px; color: var(--body); margin: 22px auto 0; max-width: 760px; line-height: 1.6;
}
.news__note a { color: var(--body); text-decoration: underline; }
.news__note a:hover { color: var(--teal); }

/* ---------- Footer ---------- */

.foot { background: #fff; border-top: 1px solid var(--line); padding-top: 56px; color: var(--body); }
.foot__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
	padding-bottom: 50px; max-width: 1500px; margin: 0 auto;
}
.foot__title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 22px; }
.foot__links li { margin-bottom: 22px; }
.foot__links li:last-child { margin-bottom: 0; }
.foot__links a { font-size: 15px; color: var(--body); }
.foot__links a:hover { color: var(--teal); text-decoration: underline; }
.foot__pay { display: flex; flex-wrap: wrap; gap: 6px; }
.foot__pay li {
	padding: 6px 10px; border: 1px solid var(--line); border-radius: 2px; background: #fff;
	font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted);
}
.foot__bottom { border-top: 1px solid var(--line); padding: 20px 0; }
.foot__bottom-inner { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.foot__bottom p { margin: 0; }
.foot__demo { color: var(--faint); }
/* ---------- Breadcrumbs ---------- */

.crumbs { background: #fff; }
.crumbs__list { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 18px; font-size: 14px; color: var(--muted); }
.crumbs__item + .crumbs__item::before { content: "/"; margin-right: 8px; color: var(--faint); }
.crumbs__item a { color: var(--ink); }
.crumbs__item a:hover { text-decoration: underline; }

/* ---------- Brand landing header ---------- */

.brandhero { background: #fff; padding-bottom: 8px; }
.brandhero__inner { display: block; padding-block: 4px 20px; }
.brandhero__name { font-size: clamp(22px, 2.2vw, 28px); color: var(--ink); text-transform: uppercase; margin-bottom: 16px; }
.brandhero__tagline { display: none; }
.brandhero__desc { font-size: 15px; color: var(--body); margin: 0 0 18px; max-width: none; line-height: 1.6; }
.brandhero__facts { display: flex; gap: 34px; flex-wrap: wrap; }
.brandhero__fact { display: flex; align-items: baseline; gap: 8px; }
.brandhero__fact dt { font-size: 13px; color: var(--muted); }
.brandhero__fact dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }

/* ---------- Catalogue ---------- */

.cat { padding-block: 6px 64px; }
.cat__head { margin-bottom: 30px; }
.cat__title { font-size: clamp(23px, 2.3vw, 29px); margin-bottom: 14px; text-transform: uppercase; letter-spacing: -.01em; }
.cat__desc { font-size: 15px; color: var(--body); max-width: none; line-height: 1.55; }
.cat__desc p { margin-bottom: .6em; }

.cat__layout { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 46px; align-items: start; }

/* Left column: the result count sits above the rail, both follow the grid. */
.cat__side { position: sticky; top: calc(var(--head-h) + 14px); }
.cat__count { margin: 0 0 22px; font-size: 17px; font-weight: 700; color: var(--ink); }

/* Filter rail: its own scroller, with a visible track down the right edge. */
.rail {
	max-height: calc(100vh - var(--head-h) - 76px);
	overflow-y: auto; padding-right: 20px;
	scrollbar-width: thin; scrollbar-color: var(--ink) #e8e8e8;
}
.rail::-webkit-scrollbar { width: 7px; }
.rail::-webkit-scrollbar-track { background: #e8e8e8; }
.rail::-webkit-scrollbar-thumb { background: var(--ink); }
.rail__head { display: none; align-items: center; gap: 10px; margin-bottom: 6px; }
.rail__title { font-size: 17px; }
.rail__clear { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--sale); text-decoration: underline; }
.rail__close { display: none; margin-left: auto; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; }
.rail__widgets { margin-bottom: 18px; }

.fgroup { border-bottom: 1px solid var(--line); }
.fgroup__head {
	display: flex; align-items: center; gap: 9px; width: 100%; padding: 19px 0;
	background: none; border: 0; cursor: pointer; text-align: left;
	font-size: 17px; font-weight: 700; color: var(--ink);
}
.fgroup__head > span:first-child { flex: 1; }
.fgroup__badge {
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--teal); color: #fff;
	font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
/* Plus / minus affordance rather than a chevron. */
.fgroup__caret { position: relative; width: 15px; height: 15px; }
.fgroup__caret::before, .fgroup__caret::after {
	content: ""; position: absolute; background: var(--ink); transition: opacity .16s;
}
.fgroup__caret::before { left: 0; right: 0; top: 6.5px; height: 2px; }
.fgroup__caret::after { top: 0; bottom: 0; left: 6.5px; width: 2px; }
.fgroup__head[aria-expanded="true"] .fgroup__caret::after { opacity: 0; }
.fgroup__body { padding-bottom: 20px; }
.fgroup__search {
	width: 100%; padding: 10px 12px; margin-bottom: 10px;
	border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px;
}
.fgroup__list.is-clamped > .fgroup__row:nth-child(n+9) { display: none; }
.fgroup__list.is-open > .fgroup__row { display: block !important; }
.fgroup__more { background: none; border: 0; padding: 8px 0; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; text-decoration: underline; }
.fgroup__more:hover { color: var(--teal); }

/* Option row: square box, label, and the count in a soft pill on the right. */
.fopt { display: flex; align-items: center; gap: 12px; padding: 7px 0; color: var(--body); font-size: 14.5px; }
.fopt:hover { color: var(--ink); }
.fopt:hover .fopt__box { border-color: var(--ink); }
.fopt__box {
	width: 19px; height: 19px; flex: none; border: 1.5px solid #9a9a9a; border-radius: 2px;
	display: flex; align-items: center; justify-content: center; background: #fff; color: #fff;
}
.fopt.is-on .fopt__box { background: var(--ink); border-color: var(--ink); }
.fopt__label { flex: 1; }
.fopt.is-on .fopt__label { font-weight: 600; color: var(--ink); }
.fopt__count {
	flex: none; font-size: 12px; font-weight: 600; color: #5a5a5a;
	background: var(--bg-soft); border-radius: 11px; padding: 2px 9px; min-width: 30px; text-align: center;
}

/* Sort options read as radios: a filled square inside the box. */
.fopt--radio .fopt__box { background: #fff; }
.fopt--radio .fopt__box::after { content: ""; width: 11px; height: 11px; background: transparent; }
.fopt--radio.is-on .fopt__box { background: #fff; border-color: var(--ink); }
.fopt--radio.is-on .fopt__box::after { background: var(--ink); }

/* Plain links down to a child category, not a refinement. */
.fsub { display: block; padding: 7px 0; font-size: 14.5px; color: var(--body); }
.fsub:hover { color: var(--ink); text-decoration: underline; }

.fprice__row { display: flex; gap: 10px; margin-bottom: 12px; }
.fprice__field { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.fprice__field input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }

/* Toolbar: only the rail opener, and only on a narrow screen. */
.toolbar {
	display: none; align-items: center; gap: 16px; flex-wrap: wrap;
	padding: 0 0 18px; margin-bottom: 0; border: 0; background: none;
}
.toolbar__filters { display: inline-flex; }
.toolbar__badge {
	min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--teal); color: #fff;
	font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

/* Active filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
	border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
	font-size: 13px; color: var(--ink);
}
.chip:hover { border-color: var(--ink); }
.chip--clear { color: var(--sale); border-color: transparent; text-decoration: underline; }
.chip--clear:hover { border-color: transparent; }

/* Pagination */
.woocommerce-pagination, .pagination { margin-top: 44px; }
.woocommerce-pagination ul, .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.woocommerce-pagination li { list-style: none; }
.woocommerce-pagination a, .woocommerce-pagination span,
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 14px;
	border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
	font-size: 14px; font-weight: 500; color: var(--ink);
}
.woocommerce-pagination a:hover, .pagination a.page-numbers:hover { border-color: var(--ink); }
.woocommerce-pagination .current, .pagination .current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Empty state */
.empty { text-align: center; padding: 70px 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.empty__code { display: block; font-size: 64px; font-weight: 800; color: var(--line); line-height: 1; }
.empty__title { font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.empty__hint { color: var(--muted); margin-bottom: 22px; }
.empty__search { max-width: 520px; margin: 0 auto 20px; }
.empty--404 { padding-block: 90px; }

/* ---------- Single product ---------- */

.pdp { padding-block: 4px 60px; }

.pdp .product {
	position: relative; display: grid; align-items: start;
	grid-template-columns: minmax(0, 960px) minmax(0, 1fr) minmax(340px, 520px);
	gap: 40px 32px;
}
.pdp .product > .woocommerce-product-gallery { grid-column: 1; }
.pdp .product > .summary { grid-column: -2 / -1; }
.pdp .product > .woocommerce-notices-wrapper,
.pdp .product > .related,
.pdp .product > .upsells { grid-column: 1 / -1; }

.pdp .product > .onsale {
	position: absolute; top: 14px; left: 14px; z-index: 3;
	padding: 6px 11px; border-radius: 2px; background: var(--sale); color: #fff;
	font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* Gallery: the shots stacked full width, one under the other, no thumbnail
   rail. Each sits in a fixed square frame that clips the image; hovering
   scales the image inside that frame, so nothing on the page shifts. */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper {
	display: grid; grid-template-columns: 1fr; gap: 16px;
}
.woocommerce-product-gallery__image {
	margin: 0; overflow: hidden;
	background: var(--prod-bg); border-radius: var(--radius);
}
.woocommerce-product-gallery__image img {
	display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
	background: var(--prod-bg);
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.woocommerce-product-gallery__image a { position: relative; display: block; cursor: zoom-in; }
.woocommerce-product-gallery__image:hover img { transform: scale(1.07); }
.woocommerce-product-gallery__image a::after {
	content: "+"; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink);
	font-size: 26px; font-weight: 300; line-height: 1;
	box-shadow: var(--shadow); opacity: 0; transition: opacity .16s;
}
.woocommerce-product-gallery__image a:hover::after { opacity: 1; }
.woocommerce-product-gallery .flex-control-thumbs { display: none; }
.woocommerce-product-gallery__trigger { display: none; }

@media (prefers-reduced-motion: reduce) {
	.woocommerce-product-gallery__image img { transition: none; }
	.woocommerce-product-gallery__image:hover img { transform: none; }
}

/* Brand and model stacked, wishlist heart pinned to the top right. */
.pdp__heading { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.pdp__names { flex: 1; min-width: 0; }
.pdp__brand { display: block; font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.pdp__brand:hover { color: var(--ink); text-decoration: underline; }
.pdp__title { font-size: 20px; font-weight: 400; line-height: 1.25; margin: 0; }
.pdp__wish {
	flex: none; display: flex; padding: 2px; margin: -2px;
	border: 0; background: none; color: var(--ink); cursor: pointer;
}
.pdp__wish:hover { color: var(--sale); }

.pdp__pricebox { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 0; margin-bottom: 16px; border: 0; }
.pdp__price { font-size: 22px; font-weight: 700; color: var(--ink); }
.pdp__price--sale { color: var(--sale); }
.pdp__price .woocommerce-Price-amount { font-size: inherit; }
.pdp__was { font-size: 17px; color: var(--muted); text-decoration: line-through; }

/* Pay-in-three offer, in the providers' own violet. */
.paylater { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.paylater__mark {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 62px; height: 62px; border-radius: 14px; color: #fff;
	background: linear-gradient(135deg, #2d6cf6 0%, #8b3ff0 45%, #e8459c 100%);
}
.paylater__mark .icon { stroke-width: 2.4; }
.paylater__text { font-size: 15.5px; font-weight: 600; line-height: 1.45; color: #7326d3; margin: 0; }
.paylater__text a { color: inherit; text-decoration: underline; }

/* Attribute line: bold label, plain value. */
.pdp__attr { display: flex; align-items: baseline; gap: 22px; margin-bottom: 22px; font-size: 15px; }
.pdp__attr-label { font-weight: 700; color: var(--ink); }
.pdp__attr-value { color: var(--ink); }

/* Colourway switcher */
.colways { margin-bottom: 22px; }
.colways__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.colways__current { font-weight: 400; color: var(--muted); }
.colways__list { display: flex; flex-wrap: wrap; gap: 8px; }
.colway {
	display: block; width: 62px; border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; background: var(--prod-bg); transition: border-color .14s;
}
.colway:hover { border-color: var(--ink); }
.colway.is-current { border-color: var(--teal); border-width: 2px; }
.colway img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.colway__dot { display: block; height: 3px; }

/* Size-style option box, kept for parity with the reference buy box. */
.pdp__option { margin-bottom: 22px; }
.pdp__option-label { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.pdp__option-box {
	display: inline-flex; align-items: center; justify-content: center; text-align: center;
	min-width: 146px; max-width: 100%; min-height: 52px; padding: 8px 18px;
	border: 2px solid var(--teal); border-radius: var(--radius);
	font-size: 14px; line-height: 1.3; color: var(--ink); background: #fff;
}

/* Stock urgency strip above the button. */
.urgency {
	display: flex; gap: 10px; align-items: center; justify-content: center;
	padding: 14px 16px; margin-bottom: 14px;
	background: var(--bg-soft); border-radius: var(--radius);
	font-size: 14px; color: var(--ink);
}
.urgency .icon { color: var(--ink); flex: none; }
.urgency strong { font-weight: 700; }
.urgency--low { color: #b35c00; }
.urgency--low .icon { color: #b35c00; }
.urgency--out { color: var(--muted); }
.urgency--out .icon { color: var(--muted); }

/* One full-width action; every product here is bought one at a time. */
.summary form.cart { margin-bottom: 26px; }
.summary .quantity { display: none; }
.summary .single_add_to_cart_button {
	display: block; width: 100%; padding: 18px 26px; border: 0; border-radius: var(--radius);
	background: var(--teal); color: #fff; font-size: 16px; font-weight: 600; text-align: center; cursor: pointer;
}
.summary .single_add_to_cart_button:hover { background: var(--teal-dark); }

/* Accordion detail sections in the buy column. */
.pdp__sections { margin-top: 8px; display: block; }
.pdp__section { border-top: 1px solid var(--line); }
.pdp__section:last-child { border-bottom: 1px solid var(--line); }
.pdp__section-title {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; padding: 20px 2px; margin: 0; border: 0; background: none; cursor: pointer;
	font-size: 16px; font-weight: 700; color: var(--ink); text-align: left;
}
.pdp__section-mark { position: relative; width: 16px; height: 16px; flex: none; }
.pdp__section-mark::before, .pdp__section-mark::after {
	content: ""; position: absolute; background: var(--ink); transition: opacity .16s;
}
.pdp__section-mark::before { left: 0; right: 0; top: 7px; height: 2px; }
.pdp__section-mark::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.pdp__section-title[aria-expanded="true"] .pdp__section-mark::after { opacity: 0; }
.pdp__section-body { padding: 0 2px 22px; }
.pdp__code { font-size: 14px; color: var(--muted); margin-bottom: 14px; }

/* "Find similar items here" cross-link trails. */
.similar { padding-top: 26px; }
.similar__title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.similar__row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; font-size: 15px; }
.similar__mark { flex: none; width: 12px; color: var(--muted); font-weight: 400; }
.similar__row a { color: var(--ink); }
.similar__row a:hover { color: var(--teal); text-decoration: underline; }
.similar__sep { display: inline-block; padding: 0 7px; color: var(--faint); font-size: 13px; }

.specs { width: 100%; border-collapse: collapse; }
.specs th, .specs td { padding: 11px 0; text-align: left; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
.specs th { width: 45%; font-weight: 400; color: var(--muted); background: none; }
.specs td { color: var(--ink); font-weight: 500; }

/* Sticky buy bar that follows the page once the buy box scrolls away. */
.buybar {
	position: fixed; left: 0; right: 0; top: var(--head-h); z-index: 58;
	background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm);
	transform: translateY(-100%); transition: transform .2s ease; visibility: hidden;
}
.buybar.is-on { transform: translateY(0); visibility: visible; }
.buybar__inner { display: flex; align-items: center; gap: 18px; padding-block: 10px; }
.buybar__media { width: 48px; flex: none; border-radius: 2px; overflow: hidden; background: var(--prod-bg); }
.buybar__name { font-size: 15px; color: var(--ink); flex: 1; min-width: 0; }
.buybar__price { display: flex; align-items: baseline; gap: 9px; }
.buybar__now { font-size: 16px; font-weight: 700; color: var(--sale); }
.buybar__rrp { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.buybar__btn {
	padding: 13px 40px; border: 0; border-radius: var(--radius);
	background: var(--teal); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.buybar__btn:hover { background: var(--teal-dark); color: #fff; }

/* Reviews, full width beneath the gallery and buy box. */
.pdp .product > .pdp__reviews { grid-column: 1 / -1; margin-top: 54px; }
.pdp__reviews-title {
	font-size: 22px; margin-bottom: 22px; padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}
.pdp__reviews .woocommerce-Reviews-title { display: none; }
.pdp__reviews #reviews { max-width: 900px; }

#reviews .commentlist { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
#reviews .commentlist li { list-style: none; padding: 16px 0; border-bottom: 1px solid var(--line-soft); background: none; }
#reviews .comment_container { display: flex; gap: 14px; align-items: flex-start; }
#reviews .comment_container img.avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
#reviews .comment-text { flex: 1; }
#reviews .woocommerce-review__author { font-weight: 700; color: var(--ink); }
#reviews .woocommerce-review__published-date { font-size: 12.5px; color: var(--faint); margin-left: 8px; }
#reviews .woocommerce-review__verified { font-size: 12px; color: var(--teal); font-weight: 600; }
#reviews .star-rating { color: var(--amber); font-size: 13px; margin-bottom: 6px; }
#reviews .description p:last-child { margin-bottom: 0; }
#reviews #respond { padding: 20px 0 0; border: 0; background: none; }
#reviews #respond .comment-reply-title { font-weight: 700; color: var(--ink); display: block; margin-bottom: 12px; }
#reviews #respond textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
#reviews #respond input[type="text"], #reviews #respond input[type="email"] {
	width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
}
#reviews #respond .comment-form-rating { margin-bottom: 12px; }

.related, .upsells { grid-column: 1 / -1; margin-top: 60px; }
.related > h2, .upsells > h2 { font-size: 22px; margin-bottom: 24px; text-align: center; }

/* ---------- Prose ---------- */

.prose { font-size: 14.5px; color: var(--body); max-width: none; line-height: 1.6; }
.prose h2 { font-size: 19px; margin: 1.6em 0 .5em; }
.prose h3 { font-size: 16px; margin: 1.5em 0 .4em; }
.prose h3:first-child { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.prose ol { list-style: decimal; padding-left: 1.3em; margin-bottom: 1em; }
.prose li { margin-bottom: .4em; }
.prose a { text-decoration: underline; }

/* ---------- Generic pages ---------- */

/* Scoped to .wrap so it cannot match the "page" class WordPress puts on body. */
.wrap.page { padding-block: 28px 62px; }
.page--narrow { max-width: 900px; }
.page__head { margin-bottom: 24px; }
.page__title { font-size: clamp(24px, 2.6vw, 32px); text-transform: uppercase; }
.page__sub { color: var(--muted); margin-top: 6px; }
.page__date { font-size: 13px; color: var(--muted); }
.page__media { margin: 0 0 24px; border-radius: var(--radius); overflow: hidden; }

.postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pcard { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.pcard__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.pcard__body { padding: 20px; }
.pcard__date { font-size: 12px; color: var(--faint); }
.pcard__title { font-size: 17px; margin: 6px 0 8px; }
.pcard__title a { color: var(--ink); }
.pcard__excerpt { font-size: 14px; color: var(--muted); }
.pcard__more { font-size: 13.5px; font-weight: 600; text-decoration: underline; }

/* ---------- WooCommerce notices ---------- */

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	padding: 14px 18px; border-radius: var(--radius); margin-bottom: 18px;
	font-size: 14px; border-left: 4px solid var(--ink); background: var(--bg-soft); list-style: none;
}
.woocommerce-message { border-left-color: var(--teal); }
.woocommerce-error { border-left-color: var(--sale); }
.woocommerce-notices-wrapper .button { margin-left: 12px; font-weight: 600; }

/* ---------- WooCommerce buttons ---------- */

.woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 24px; border: 1px solid var(--ink); border-radius: var(--radius);
	background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.woocommerce .button:hover { background: #000; border-color: #000; color: #fff; }
.woocommerce .button.alt, .woocommerce button.button.alt, .woocommerce a.button.alt {
	background: var(--teal); border-color: var(--teal); color: #fff;
}
.woocommerce .button.alt:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.woocommerce .button:disabled, .woocommerce .button.disabled { opacity: .5; cursor: not-allowed; }

.woocommerce form .form-row { margin-bottom: 16px; }
.woocommerce form .form-row label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px;
}
.woocommerce-checkout #customer_details { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.woocommerce-checkout .col-1, .woocommerce-checkout .col-2 { width: 100%; }

/* Shop pages skip the prose wrapper, so notices and policy text keep their
   own link underline. */
.woocommerce-info a, .woocommerce-message a, .woocommerce-error a,
.woocommerce-privacy-policy-text a, .woocommerce-terms-and-conditions-link { text-decoration: underline; }

/* ---------- Checkout ---------- */

/* Details on the left, order review and payment in a sticky panel on the
   right - the same split as the cart, so both steps line up with the header. */
.checkoutpage__layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 26px; align-items: start; }
.checkoutpage__main { min-width: 0; }
.checkoutpage__side { min-width: 0; position: sticky; top: calc(var(--head-h) + 12px); }
.checkoutpage__side #order_review_heading {
	font-size: 20px; font-weight: 700; text-transform: uppercase; margin: 0 0 14px;
}
.checkoutpage__side #order_review {
	border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 22px 24px;
}
.checkoutpage__side table.shop_table { margin-bottom: 18px; }
.checkoutpage__side table.shop_table th, .checkoutpage__side table.shop_table td { padding: 11px 0; }
.checkoutpage__side table.shop_table th { background: none; }

/* Name fields pair up; every other billing field keeps the full column. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.woocommerce-checkout .form-row-wide, .woocommerce-checkout .form-row.notes { grid-column: 1 / -1; }

#payment .wc_payment_methods { margin-bottom: 16px; }
#payment .place-order { margin: 0; }
#payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; }
#payment #place_order { width: 100%; }


/* Progress rail: cart, checkout, confirmation. */
.costeps {
	display: flex; align-items: center; gap: 0; list-style: none;
	margin: 0 0 24px; padding: 0;
}
.costeps__item { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--faint); font-size: 13.5px; font-weight: 600; }
.costeps__item + .costeps__item::before {
	content: ""; width: 46px; height: 1px; background: var(--line); margin: 0 14px;
}
.costeps__item a { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.costeps__item a:hover { color: var(--teal); }
.costeps__dot {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	border: 1px solid var(--line); background: #fff;
	font-size: 12.5px; font-weight: 700; color: var(--faint);
}
.costeps__item.is-done { color: var(--teal); }
.costeps__item.is-done .costeps__dot { background: var(--teal); border-color: var(--teal); color: #fff; }
.costeps__item.is-current { color: var(--ink); }
.costeps__item.is-current .costeps__dot { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 3px rgba(11, 107, 96, .12); }

/* Each half of the customer details is a card, numbered to match the rail. */
.cocard {
	border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
	padding: 24px 26px; height: 100%;
}
.cocard > h3 {
	display: flex; align-items: center; gap: 11px;
	font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
	margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft);
}
.cocard > h3:first-of-type::before {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
	background: var(--teal); color: #fff; font-size: 12.5px; font-weight: 700;
}
.cocard[data-step="1"] > h3:first-of-type::before { content: "1"; }
.cocard[data-step="2"] > h3:first-of-type::before { content: "2"; }
.cocard > h3 ~ h3 { margin-top: 28px; font-size: 14.5px; color: var(--muted); }
.cocard #ship-to-different-address label { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; }
.cocard #ship-to-different-address input { width: 17px; height: 17px; accent-color: var(--teal); }

/* Fields */
.woocommerce-checkout form .form-row label { letter-spacing: .01em; }
.woocommerce-checkout .required { color: var(--sale); text-decoration: none; }
.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row textarea:focus,
.woocommerce-checkout form .form-row select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection {
	outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(11, 107, 96, .12);
}
.woocommerce-checkout form .form-row textarea { min-height: 104px; resize: vertical; }
.woocommerce-checkout .woocommerce-invalid input.input-text { border-color: var(--sale); }

/* The country picker is a select2 widget, so it needs matching by hand. */
.woocommerce-checkout .select2-container .select2-selection--single {
	height: 48px; border: 1px solid var(--line); border-radius: var(--radius);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 46px; padding-left: 14px; color: var(--ink);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; }

/* Order review lines */
.checkoutpage__side #order_review { padding: 8px 24px 22px; }
.checkoutpage__side table.shop_table tbody tr:first-child td { border-top: 0; }
.checkoutpage__side table.shop_table td.product-name { padding: 14px 0; }
.checkoutpage__side table.shop_table td.product-total {
	padding: 14px 0; text-align: right; white-space: nowrap; vertical-align: top;
	font-weight: 700; color: var(--ink);
}

.revline { display: flex; align-items: flex-start; gap: 14px; }
.revline__media {
	position: relative; flex: 0 0 62px; display: block;
	border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--prod-bg);
}
.revline__media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); }
.revline__qty {
	position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 11px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
}
.revline__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.revline__name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.revline__ref, .revline__each { font-size: 12.5px; color: var(--faint); }

/* Totals */
.checkoutpage__side tfoot th { font-size: 14px; font-weight: 600; color: var(--body); text-align: left; }
.checkoutpage__side tfoot td { text-align: right; font-weight: 600; color: var(--ink); }
.checkoutpage__side tfoot tr.order-total th, .checkoutpage__side tfoot tr.order-total td {
	padding-top: 16px; border-top: 2px solid var(--ink); font-size: 19px; font-weight: 700; color: var(--ink);
}
.checkoutpage__side .cart-discount td { color: var(--teal); }
.checkoutpage__side #shipping_method { list-style: none; margin: 0; padding: 0; text-align: left; }
.checkoutpage__side #shipping_method li { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; font-size: 13.5px; }
.checkoutpage__side #shipping_method input { margin-top: 3px; accent-color: var(--teal); }
.checkoutpage__side #shipping_method label { font-weight: 600; color: var(--ink); }
.checkoutpage__side .woocommerce-shipping-destination { font-size: 12.5px; color: var(--faint); margin: 6px 0 0; }

/* A link back to the cart, level with the summary heading. */
.checkoutpage__side #order_review_heading { display: inline-block; }
.coedit {
	float: right; display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 600; color: var(--teal); text-decoration: none; margin-top: 3px;
}
.coedit:hover { text-decoration: underline; }

/* Payment */
#payment { background: none; border-radius: 0; }
#payment .wc_payment_methods { list-style: none; margin: 0 0 16px; padding: 0; }
#payment .wc_payment_methods li {
	border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 10px; background: #fff;
}
#payment .wc_payment_methods li:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(11, 107, 96, .1); }
#payment .wc_payment_methods li > label {
	display: flex; align-items: center; gap: 10px; margin: 0;
	font-size: 14.5px; font-weight: 700; color: var(--ink); cursor: pointer;
}
#payment .wc_payment_methods li input.input-radio { width: 17px; height: 17px; accent-color: var(--teal); }
#payment .payment_box {
	background: var(--bg-soft); border-radius: var(--radius); margin: 12px 0 0; padding: 12px 14px;
	font-size: 13.5px; color: var(--body);
}
#payment .payment_box p:last-child { margin-bottom: 0; }

/* A single gateway means the radio decides nothing - it stays in the markup
   for the checkout JS, and hides here. */
body.has-single-gateway #payment .wc_payment_methods li input.input-radio { display: none; }

#payment #place_order {
	width: 100%; padding: 16px 20px; font-size: 15px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .03em; border-radius: var(--radius);
	background: var(--teal); border-color: var(--teal); color: #fff;
}
#payment #place_order:hover { background: var(--teal-dark); border-color: var(--teal-dark); }

.cotrust { margin-top: 16px; }
.cosecure {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	margin: 12px 0 0; font-size: 12.5px; color: var(--faint); text-align: center;
}

/* Help card under the details columns. */
.cohelp {
	display: flex; align-items: flex-start; gap: 14px; margin-top: 18px;
	padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft);
}
.cohelp svg { flex: 0 0 auto; color: var(--teal); margin-top: 2px; }
.cohelp strong { display: block; font-size: 14.5px; color: var(--ink); }
.cohelp p { margin: 3px 0 6px; font-size: 13.5px; color: var(--muted); }
.cohelp a { font-size: 14px; font-weight: 700; color: var(--teal); text-decoration: none; }
.cohelp a:hover { text-decoration: underline; }

/* Notices above the form read as banners, not paragraphs. */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message {
	border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--radius);
	background: var(--bg-soft); padding: 14px 18px; margin: 0 0 16px; font-size: 14px;
}
.woocommerce-checkout .woocommerce-error { border-left-color: var(--sale); }

@media (max-width: 900px) {
	.cocard { padding: 20px 18px; }
	.costeps__item { font-size: 12.5px; }
	.costeps__item + .costeps__item::before { width: 22px; margin: 0 9px; }
}

@media (max-width: 520px) {
	.costeps__label { display: none; }
	.costeps__item + .costeps__item::before { width: 32px; }
	.cohelp { flex-direction: column; gap: 8px; }
}


/* ---------- Order received ---------- */

/* Confirmation banner: the tick, the thanks, and the four facts a shopper
   checks before closing the tab. */
.tyhero {
	position: relative; overflow: hidden;
	border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
	padding: 38px 34px 30px; margin: 0 0 22px; text-align: center;
}
.tyhero::before {
	content: ""; position: absolute; inset: 0 0 auto; height: 4px;
	background: linear-gradient(90deg, var(--teal), var(--teal-bright));
}
.tyhero__mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 62px; height: 62px; border-radius: 50%; margin-bottom: 16px;
	background: var(--teal); color: #fff;
	box-shadow: 0 0 0 8px rgba(11, 107, 96, .1);
}
.tyhero__title { font-size: 27px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.tyhero__lead { font-size: 15.5px; color: var(--muted); margin: 0 auto; max-width: 52ch; }

.tytiles {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
	list-style: none; margin: 28px 0 0; padding: 22px 0 0;
	border-top: 1px solid var(--line-soft); text-align: left;
}
.tytiles li { padding: 0 18px; border-left: 1px solid var(--line-soft); }
.tytiles li:first-child { border-left: 0; padding-left: 0; }
.tytiles li span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.tytiles li strong { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }

/* Delivery stages. */
.tytrack {
	border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
	padding: 26px 30px; margin: 0 0 22px;
}
.tytrack__title { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); margin: 0 0 22px; }
.tytrack__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; list-style: none; margin: 0; padding: 0; }
.tytrack__step { position: relative; padding: 0 16px 0 0; }
.tytrack__step::before {
	content: ""; position: absolute; left: 13px; right: -13px; top: 12px; height: 2px; background: var(--line);
}
.tytrack__step:last-child::before { display: none; }
.tytrack__step.is-done::before { background: var(--teal); }
.tytrack__dot {
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	border: 2px solid var(--line); background: #fff; color: #fff; margin-bottom: 12px;
}
.tytrack__step.is-done .tytrack__dot { background: var(--teal); border-color: var(--teal); }
.tytrack__step.is-next .tytrack__dot { border-color: var(--teal); }
.tytrack__body { display: block; }
.tytrack__body strong { display: block; font-size: 14.5px; color: var(--ink); }
.tytrack__body span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Gateway instructions - cash on delivery prints a paragraph here. */
.woocommerce-order > p {
	border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--radius);
	background: var(--bg-soft); padding: 14px 18px; margin: 0 0 22px; font-size: 14px; color: var(--body);
}

/* Order details and addresses share the card treatment. */
.woocommerce-order-details, .woocommerce-customer-details {
	display: block; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
	padding: 26px 30px; margin: 0 0 22px;
}
.woocommerce-order-details__title, .woocommerce-column__title {
	font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink);
	margin: 0 0 18px;
}
.woocommerce-order-details table.order_details { width: 100%; border-collapse: collapse; }
.woocommerce-order-details table.order_details thead { display: none; }
.woocommerce-order-details table.order_details td { padding: 14px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.woocommerce-order-details table.order_details td.product-total { text-align: right; white-space: nowrap; font-weight: 700; color: var(--ink); }
.woocommerce-order-details table.order_details tfoot th {
	padding: 11px 0; text-align: left; font-size: 14px; font-weight: 600; color: var(--body);
}
.woocommerce-order-details table.order_details tfoot td { padding: 11px 0; text-align: right; font-weight: 600; color: var(--ink); }
.woocommerce-order-details table.order_details tfoot tr:last-child th,
.woocommerce-order-details table.order_details tfoot tr:last-child td { border-top: 1px solid var(--line-soft); }

.woocommerce-customer-details .addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.woocommerce-customer-details .col-1, .woocommerce-customer-details .col-2 { width: 100%; float: none; }
.woocommerce-customer-details address {
	font-style: normal; font-size: 14.5px; line-height: 1.7; color: var(--body);
	border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-soft); padding: 16px 18px;
}
.woocommerce-customer-details--email, .woocommerce-customer-details--phone { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }

/* Closing actions. */
.tyactions { text-align: center; margin: 26px 0 8px; }
.tyactions .button.alt { min-width: 260px; padding: 15px 26px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.tyactions__help { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
.tyactions__help a { font-weight: 700; color: var(--teal); text-decoration: none; }
.tyactions__help a:hover { text-decoration: underline; }

@media (max-width: 860px) {
	.tytiles { grid-template-columns: 1fr 1fr; gap: 18px 0; }
	.tytiles li:nth-child(odd) { border-left: 0; padding-left: 0; }
	.woocommerce-customer-details .addresses { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 600px) {
	.tyhero { padding: 30px 20px 24px; }
	.tyhero__title { font-size: 22px; }
	.tytrack, .woocommerce-order-details, .woocommerce-customer-details { padding: 20px 18px; }
	.tytrack__list { grid-template-columns: 1fr; gap: 18px; }
	.tytrack__step { padding: 0; display: flex; align-items: flex-start; gap: 12px; }
	.tytrack__step::before { display: none; }
	.tytrack__dot { margin-bottom: 0; flex: 0 0 26px; }
	.tytiles { grid-template-columns: 1fr; }
	.tytiles li { border-left: 0; padding-left: 0; }
	.tyactions .button.alt { min-width: 0; width: 100%; }
}

/* ---------- Cart ---------- */

.cartpage__layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 26px; align-items: start; }

.cartpage__head {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius);
	background: #fff; margin-bottom: 18px;
}
.cartpage__title { font-size: 24px; }
.cartpage__count { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; text-transform: uppercase; }
.cartpage__tick {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff;
}

/* Line items */
.cartpage__items > .cartline:first-of-type { border-top: 1px solid var(--line); }
.cartline {
	display: grid; grid-template-columns: 150px minmax(0, 1fr) 200px 150px;
	gap: 24px; padding: 26px 28px; align-items: start;
	border: 1px solid var(--line); border-top: 0; background: #fff;
}
.cartline__media { display: block; overflow: hidden; background: var(--prod-bg); border-radius: var(--radius); }
.cartline__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.cartline__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cartline__brand { font-size: 14px; color: var(--muted); }
.cartline__title { font-size: 16px; font-weight: 500; line-height: 1.35; }
.cartline__title a { color: var(--ink); }
.cartline__title a:hover { text-decoration: underline; }
.cartline__meta { font-size: 14px; color: var(--muted); }
.cartline__stock { margin-top: 4px; }
.cartline__controls { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 16px; }
.cartline__wish, .cartline__remove {
	display: inline-flex; align-items: center; gap: 9px;
	background: none; border: 0; padding: 0; font-size: 14px; color: var(--ink); cursor: pointer;
}
.cartline__wish:hover, .cartline__remove:hover { color: var(--teal); text-decoration: underline; }
.cartline__side { display: flex; flex-direction: column; gap: 6px; }
.cartline__label { font-size: 14px; color: var(--muted); }
.cartline__price { font-size: 16px; font-weight: 700; color: var(--sale); }
.cartline__price .woocommerce-Price-amount { font-size: inherit; }
.cartline__was { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.cartline__total { font-size: 16px; font-weight: 600; color: var(--ink); }
.cartline__each { font-size: 13px; color: var(--muted); }

/* Quantity stepper */
.qty {
	display: inline-flex; align-items: stretch; border: 1px solid var(--line);
	border-radius: var(--radius); overflow: hidden; background: #fff;
}
.qty__btn {
	width: 44px; background: #fff; border: 0; cursor: pointer;
	font-size: 18px; font-weight: 500; color: var(--ink); line-height: 1;
}
.qty__btn:hover { background: var(--bg-soft); }
.qty input {
	width: 60px; padding: 13px 4px; border: 0; text-align: center;
	font-size: 15px; font-weight: 600; color: var(--ink); appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* Cart actions row */
.cartactions {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; padding: 20px 28px;
	border: 1px solid var(--line); border-top: 0; background: #fff;
}
.cartactions__coupon { display: flex; gap: 0; flex-wrap: wrap; align-items: center; }
.cartactions__coupon input[type="text"] {
	padding: 13px 14px; border: 1px solid var(--line); border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius); min-width: 200px; font-size: 14px;
}
.cartactions__coupon .btn { border-radius: 0 var(--radius) var(--radius) 0; background: var(--ink); color: #fff; border-color: var(--ink); }
.cartactions__coupon .btn:hover { background: #000; }
.cartactions__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cartactions__continue { font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: underline; }
.cartactions__continue:hover { color: var(--teal); }

.cartpay { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 28px; border: 1px solid var(--line); border-top: 0; background: #fff; }
.cartpay li {
	padding: 7px 12px; border: 1px solid var(--line); border-radius: 2px; background: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted);
}

/* Order summary */
.summarypanel {
	position: sticky; top: calc(var(--head-h) + 12px);
	border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden;
}
.summarypanel__title {
	padding: 26px 28px 18px; background: #fff; color: var(--ink);
	font-size: 20px; font-weight: 700; text-transform: uppercase;
}
.summarypanel__body { padding: 0 28px 28px; }
.summarypanel__row {
	display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
	padding: 10px 0; font-size: 15px; color: var(--body);
}
.summarypanel__row--saving { color: var(--sale); }
.summarypanel__row .woocommerce-Price-amount { font-weight: 600; color: var(--ink); }
.summarypanel__row--saving .woocommerce-Price-amount { color: var(--sale); }
.summarypanel__total {
	display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
	padding: 16px 0 6px; margin-top: 6px; border-top: 1px solid var(--line);
	font-size: 17px; font-weight: 700; color: var(--ink); text-transform: uppercase;
}
.summarypanel__total .woocommerce-Price-amount { font-size: 19px; }
.summarypanel__tax { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.summarypanel__promo { display: flex; margin-bottom: 18px; }
.summarypanel__promo input {
	flex: 1; min-width: 0; padding: 15px 14px; border: 1px solid var(--line); border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius); font-size: 14px; background: var(--bg-soft);
}
.summarypanel__promo button {
	padding: 15px 28px; border: 0; border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.summarypanel__promo button:hover { background: #000; }
.summarypanel__checkout {
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
	padding: 18px 20px; border: 0; border-radius: var(--radius); background: var(--teal); color: #fff;
	font-size: 16px; font-weight: 600; cursor: pointer;
}
.summarypanel__checkout:hover { background: var(--teal-dark); color: #fff; }
.summarypanel__trust { list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); }
.summarypanel__trust li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.summarypanel__trust li:last-child { margin-bottom: 0; }
.summarypanel__trust .icon { color: var(--teal); margin-top: 1px; }
.summarypanel__pay { display: none; }

/* Empty cart */
.cartempty { text-align: center; padding: 70px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.cartempty .icon { color: var(--faint); margin: 0 auto 16px; }
.cartempty__title { font-size: 22px; margin-bottom: 10px; }
.cartempty__hint { color: var(--muted); margin-bottom: 24px; }

/* ---------- My account ---------- */

/* The theme drops WooCommerce's own layout sheets, so the account pages need
   their column shape here: endpoints down the left, the endpoint's content
   beside them. Both collapse to one column on a narrow screen. */
.woocommerce-account .woocommerce {
	display: grid; grid-template-columns: 250px minmax(0, 1fr);
	gap: 40px; align-items: start; padding-block: 4px 20px;
}
/* The login and lost-password screens have no navigation to sit beside. */
.woocommerce-account:not(.logged-in) .woocommerce { display: block; max-width: 520px; }

/* The account pages render inside .prose, which turns lists into bulleted
   copy and underlines every link. The endpoint list is navigation, not copy. */
.woocommerce-MyAccount-navigation ul { list-style: none; padding-left: 0; margin: 0; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line-soft); margin: 0; }
.woocommerce-MyAccount-navigation li a {
	display: block; padding: 14px 2px; font-size: 15px;
	color: var(--body); text-decoration: none;
}
.woocommerce-MyAccount-navigation li a:hover { color: var(--ink); text-decoration: underline; }
.woocommerce-MyAccount-navigation li.is-active a { font-weight: 700; color: var(--ink); }
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content legend { font-size: 19px; margin-bottom: 14px; }

.woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.woocommerce-Address-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { font-size: 16px; }
.woocommerce-Address-title .edit { font-size: 13.5px; text-decoration: underline; }

/* Generic shop tables (checkout, account, order review) */
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 26px; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
	padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px;
}
.woocommerce table.shop_table th { background: var(--bg-soft); font-weight: 700; color: var(--ink); }
.woocommerce table.shop_table .product-thumbnail { width: 90px; }
.woocommerce table.shop_table .product-thumbnail img {
	width: 76px; height: 76px; object-fit: cover;
	border-radius: var(--radius); background: var(--prod-bg);
}
.woocommerce table.shop_table td.product-name a { color: var(--ink); font-weight: 500; }
.woocommerce .cart-collaterals h2 { font-size: 20px; margin-bottom: 14px; }
.woocommerce .cart-collaterals .cart_totals { max-width: 560px; }

/* ---------- Responsive ---------- */

@media (max-width: 1440px) {
	:root { --gutter: 32px; }
	.cartline { grid-template-columns: 130px minmax(0, 1fr) 170px 130px; gap: 18px; padding: 22px; }
	.checkoutpage__layout { grid-template-columns: minmax(0, 1fr) 360px; }
	.cartpage__layout { grid-template-columns: minmax(0, 1fr) 360px; }
}

@media (max-width: 1200px) {
	:root { --gutter: 24px; }
	.nav__item { flex-basis: 210px; }
	.mega__inner { gap: 22px; }
	.mega__brandgrid { column-count: 3; }
	.foot__grid { grid-template-columns: repeat(3, 1fr); }
	.pdp .product { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 30px; }
}

@media (max-width: 1024px) {
	:root { --head-h: 68px; }

	/* minmax(0, …) on the logo column: a grid track defaults to a minimum of
	   its content, so without this the wordmark refuses to shrink and pushes
	   the action icons out past the gutter. */
	.head__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
	.head__logo { min-width: 0; }
	.head__burger { display: block; }
	.head__search { display: none; }
	.haction--search { display: flex; }
	/* Icon-sized links get a full-height hit area without getting any wider. */
	.haction { min-height: 44px; }
	.head__actions { gap: 16px; }
	.logo__name { font-size: 21px; }

	.nav { display: none; }

	/* The banner is cut for a wide band, and a phone is not one. Rather than
	   zoom it (which threw a third of the picture away) the caption comes out
	   of the photograph altogether: the picture keeps a wide band of its own
	   at the top and the caption sits on solid ground underneath it.

	   The top padding reserves that band; `cover` paints the whole element,
	   and the caption's own background covers the part it sits on. That reads
	   the same whether the shop supplied a dark lifestyle frame or a product
	   on a white sweep, so it does not depend on the banner being measured
	   correctly. */
	.bhero {
		display: block; min-height: 0;
		padding: 62% 0 0;
		background-size: cover; background-position: center 30%;
	}
	.bhero::before { display: none; }
	.bhero__body {
		background: #fff; padding: 24px clamp(16px, 5vw, 32px) 28px;
	}
	.bhero--dark .bhero__body { background: var(--ink); }

	.trust__grid { grid-template-columns: repeat(2, 1fr); }

	ul.products, ul.products.row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.btiles { grid-template-columns: repeat(2, 1fr); }
	.btiles--wide { grid-template-columns: 1fr; }
	.promo { flex-direction: column; align-items: flex-start; gap: 22px; }
	.promo__btn { width: 100%; }

	.cat__layout { grid-template-columns: 1fr; gap: 0; }
	.cat__side { position: static; }
	.cat__count { margin-bottom: 14px; }
	.rail {
		position: fixed; inset: 0 auto 0 0; width: min(90vw, 340px); z-index: 120;
		background: #fff; padding: 18px; max-height: none; overflow-y: auto; transform: translateX(-100%);
		transition: transform .22s ease; box-shadow: var(--shadow-lg);
	}
	.rail.is-open { transform: translateX(0); }
	.rail__head { display: flex; }
	.rail__close { display: block; }
	.toolbar { display: flex; }

	.pdp .product { grid-template-columns: 1fr; gap: 26px; }
	.pdp .product > .woocommerce-product-gallery,
	.pdp .product > .summary { grid-column: 1; }
	.woocommerce-product-gallery__image a::after { display: none; }
	.woocommerce-product-gallery__image a { cursor: pointer; }
	.woocommerce-product-gallery__image:hover img { transform: none; }

	.cartpage__layout, .checkoutpage__layout { grid-template-columns: 1fr; }
	.checkoutpage__side { position: static; }
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
	.summarypanel { position: static; }
	.cartline { grid-template-columns: 110px minmax(0, 1fr); }
	.cartline__side { grid-column: 2; }

	.postgrid { grid-template-columns: repeat(2, 1fr); }
	.woocommerce-checkout #customer_details { grid-template-columns: 1fr; }
	.foot__grid { grid-template-columns: repeat(2, 1fr); }
	.buybar__inner { gap: 12px; }
	.buybar__media, .buybar__name { display: none; }
	.buybar__btn { flex: 1; }
}

@media (max-width: 700px) {
	:root { --gutter: 16px; }
	body { font-size: 14px; }

	.pdp__brand, .pdp__title { font-size: 18px; }
	.pdp__price { font-size: 20px; }
	.paylater__mark { width: 52px; height: 52px; border-radius: 12px; }
	.paylater__text { font-size: 14.5px; }
	.pdp__attr { gap: 14px; }
	.similar__row { font-size: 14px; }

	.ubar__list li:nth-child(n+2) { display: none; }

	.btiles { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
	.btile__name { font-size: 15px; margin: 14px 0 12px; }
	.btile__cta { min-width: 0; width: 100%; padding: 11px 16px; font-size: 13px; }
	.brandpill { min-width: 140px; height: 44px; padding: 0 20px; font-size: 14px; }
	.promo { padding: 26px 20px; }
	.promo__mark { font-size: 24px; }
	.trust__grid { grid-template-columns: 1fr; gap: 12px; }
	.trust__item { justify-content: flex-start; }

	ul.products, ul.products.row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
	.card__title { font-size: 13.5px; }
	.price__now { font-size: 15px; }
	.price__rrp { font-size: 13px; }

	.foot__grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
	.foot__links li { margin-bottom: 14px; }
	.postgrid { grid-template-columns: 1fr; }

	.sec { padding: 36px 0; }
	.summary form.cart { flex-direction: column; }
	.summary .single_add_to_cart_button { min-width: 0; }

	/* Stacked, so the flex basis now sizes the HEIGHT: it has to go back to
	   auto or the field grows into a 320px-tall box. */
	.news__form { flex-direction: column; }
	.news__input { flex: 0 0 auto; width: 100%; border-right: 1px solid var(--line); }
	.news__btn { width: 100%; min-width: 0; margin-top: 8px; }

	.cartline { grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding: 18px; }
	.cartline__side { grid-column: 2; flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
	.cartactions { flex-direction: column; align-items: stretch; padding: 18px; }
	.cartpage__head { padding: 20px; }

	/* Account layout stacks; the endpoint list becomes a row of its own above
	   the content. */
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 22px; }
	.woocommerce-Addresses { grid-template-columns: 1fr; }

	/* WooCommerce marks its order, download and payment-method tables as
	   responsive, but the sheet that actually restyles them is dequeued with
	   the rest of core layout. Each row becomes a stacked card and every cell
	   carries its own column heading, which core put in data-title. */
	table.shop_table_responsive thead { display: none; }
	table.shop_table_responsive tbody tr {
		display: block; margin-bottom: 14px;
		border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
	}
	table.shop_table_responsive tbody th,
	table.shop_table_responsive tbody td {
		display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
		width: auto; padding: 11px 14px; text-align: right;
		border-bottom: 1px solid var(--line-soft); background: none;
	}
	table.shop_table_responsive tbody tr > :last-child { border-bottom: 0; }
	table.shop_table_responsive tbody [data-title]::before {
		content: attr(data-title); flex: none;
		font-weight: 600; color: var(--muted); text-align: left;
	}
	table.shop_table_responsive .button { width: 100%; }
}

/* Tablet: the bag line has room for its own price and total columns, so it
   keeps the desktop shape rather than stacking them under the product. */
@media (min-width: 701px) and (max-width: 1024px) {
	.cartline { grid-template-columns: 110px minmax(0, 1fr) 120px 110px; gap: 16px; }
	.cartline__side { grid-column: auto; }
}

/* ---------- Touch ---------- */

/* Anything tapped with a thumb rather than clicked with a pointer. */
@media (max-width: 1024px) {
	/* iOS zooms the page in whenever a focused field is under 16px, and the
	   shopper has to pinch back out. Every control the storefront owns is
	   fluid, so 16px costs the layout nothing. */
	input[type="text"], input[type="search"], input[type="email"],
	input[type="tel"], input[type="number"], input[type="password"],
	input[type="url"], select, textarea { font-size: 16px; }

	/* The category scope would eat most of a phone-width search bar, and the
	   same refinement is a tap away in the filter rail. Drop it and give the
	   whole field to the query. */
	.hsearch__scope { display: none; }
	.hsearch__input { padding: 14px 14px 14px 10px; }

	/* Wishlist and bag on a product card: same icons, a thumb-sized box. */
	.card__quickbtn { width: 40px; height: 40px; }
	.card__quick { top: 0; gap: 18px; }

	/* Filter rows, sort options and child-category links. */
	.fopt { padding: 11px 0; }
	.fsub { padding: 11px 0; }
	.fgroup__more { padding: 12px 0; }

	.drawer__close { width: 44px; height: 44px; margin-right: -10px; }
	.rail__close { width: 44px; height: 44px; }
	.crumbs__list { gap: 8px 10px; }
}

/* ---------- Narrow phones ---------- */

/* 360px and 320px devices are still common. At that width the wordmark, the
   burger and four action icons cannot all keep their desktop size, so the
   chrome scales down rather than pushing the page into a sideways scroll. */
@media (max-width: 420px) {
	.head__inner { gap: 8px; }
	.head__burger { padding: 8px 6px; margin-left: -6px; }

	.logo { gap: 7px; }
	.logo__mark svg { width: 30px; height: 30px; }
	.logo__name { font-size: 17px; }
	.logo__tag { font-size: 9px; letter-spacing: .22em; }

	.head__actions { gap: 12px; }
	.haction svg { width: 23px; height: 23px; }
	.haction--search svg { width: 21px; height: 21px; }
	/* Keeps the count inside the gutter now the row is tight. */
	.haction__bubble { top: -6px; right: -6px; min-width: 18px; height: 18px; font-size: 10px; }

	.promoband { gap: 8px; padding: 7px 14px; }
	.promoband__title, .promoband__cta { font-size: 12.5px; }

	.bhero__title { margin-bottom: 18px; }
	.bhero__cta { min-width: 150px; padding: 13px 28px; font-size: 14px; }

	.sechead__title--solo { font-size: 20px; }
	.brandpill { min-width: 124px; height: 42px; padding: 0 16px; font-size: 13.5px; }

	.promo { padding: 22px 16px; gap: 18px; }
	.promo__btn { min-width: 0; padding: 16px 24px; }

	.btiles { gap: 18px 10px; }
	ul.products, ul.products.row { gap: 18px 10px; }

	/* Two-up product cards get very narrow here; the quick actions shrink
	   back so they never sit over the watch itself. */
	.card__quickbtn { width: 34px; height: 34px; }
	.card__quick { gap: 14px; }

	.cat__title, .page__title { font-size: 21px; }
	.cartpage__title { font-size: 20px; }
	.pdp__reviews-title, .related > h2, .upsells > h2 { font-size: 19px; }

	.cartline { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 16px; }
	.cartline__controls { gap: 10px; }
	.qty__btn { width: 40px; }
	.qty input { width: 48px; }

	.cartactions__coupon { width: 100%; }
	.cartactions__coupon input[type="text"] { flex: 1; min-width: 0; }

	.summarypanel__title { padding: 20px 18px 14px; font-size: 18px; }
	.summarypanel__body { padding: 0 18px 22px; }
	.cartpay, .cartactions { padding: 16px; }

	/* Order review and spec tables: the gutter goes before the numbers do. */
	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td { padding: 11px 8px; font-size: 13.5px; }
	.checkoutpage__side #order_review { padding: 18px 16px; }
	.specs th { width: 42%; }

	.empty, .cartempty { padding: 48px 16px; }
	.empty--404 { padding-block: 60px; }

	.foot__bottom-inner { justify-content: center; text-align: center; }
	.foot__pay { justify-content: center; }
}

/* ---------- Landscape phones ---------- */

/* A viewport this short cannot spare 68px of sticky chrome plus the promo
   band, so the header scrolls away with the page. */
@media (max-height: 460px) and (orientation: landscape) {
	.head { position: static; }
	.buybar { top: 0; }
	.bhero { min-height: 300px; }
	.cat__side, .checkoutpage__side, .summarypanel { position: static; }
}

/* =========================================================================
   Demo notice dialog

   Shown once per session over the storefront. Same white card, teal action
   and 4px radius as the rest of the chrome, so it reads as part of the site
   rather than a browser dialog.
   ========================================================================= */

.demo {
	position: fixed; inset: 0; z-index: 300;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
}
.demo[hidden] { display: none; }

.demo__scrim {
	position: absolute; inset: 0;
	background: rgba(16, 16, 16, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .22s ease;
}
.demo.is-open .demo__scrim { opacity: 1; }

.demo__card {
	position: relative;
	width: 100%; max-width: 440px;
	max-height: calc(100vh - 48px); overflow-y: auto;
	padding: 40px 36px 32px;
	background: var(--bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	text-align: center;
	opacity: 0;
	transform: translateY(14px) scale(.97);
	transition: opacity .24s ease, transform .24s cubic-bezier(.2, .8, .3, 1);
}
.demo.is-open .demo__card { opacity: 1; transform: none; }

/* A thin teal rule across the top edge, echoing the promo bar. */
.demo__card::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: var(--teal);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.demo__x {
	position: absolute; top: 12px; right: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0;
	background: none; border: 0; border-radius: 50%;
	color: var(--faint); cursor: pointer;
	transition: background .14s, color .14s;
}
.demo__x:hover { background: var(--bg-soft); color: var(--ink); }

.demo__mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 62px; height: 62px; margin-bottom: 18px;
	border-radius: 50%;
	background: rgba(11, 107, 96, .09);
	color: var(--teal);
}

.demo__eyebrow {
	margin: 0 0 8px;
	font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--teal);
}

.demo__title {
	margin: 0 0 12px;
	font-size: 21px; letter-spacing: .01em;
	text-wrap: balance;
}

.demo__body {
	margin: 0 0 22px;
	font-size: 14px; line-height: 1.6; color: var(--muted);
}

.demo__points {
	margin: 0 0 26px;
	padding: 16px 18px;
	background: var(--bg-soft);
	border-radius: var(--radius);
	text-align: left;
}
.demo__points li {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 13px; line-height: 1.45; color: var(--body);
}
.demo__points li + li { margin-top: 10px; }
.demo__points .icon { margin-top: 1px; color: var(--teal); }

.demo__ok { padding-block: 15px; }

@media (max-width: 480px) {
	.demo { padding: 16px; }
	.demo__card { padding: 34px 22px 26px; }
	.demo__title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	.demo__scrim, .demo__card { transition: none; }
	.demo__card { transform: none; }
}