/* ============================================================
   SOU.SOU.RO — Component styles
   Consumes the design tokens in tokens.css. Ports the prototype
   (eshop/*.jsx) inline styles to real, reusable classes.
   "A store. A mood. A point of view."
   ============================================================ */

/* ----------------------------------------------------------------
   0. Reset / base
   ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg1);
	font: var(--body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--fg1); font-family: var(--font-display); font-weight: 700; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.ssr-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--ink-900);
	color: #fff;
	padding: 10px 16px;
	border-radius: 0 0 var(--radius-md) 0;
}
.ssr-skip:focus { left: 0; }

/* ----------------------------------------------------------------
   1. Layout primitives
   ---------------------------------------------------------------- */
.ssr-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 28px;
}

.ssr-main { display: block; min-height: 50vh; }

.ssr-page { padding-block: var(--space-7); }
.ssr-page__head { margin-bottom: var(--space-6); }
.ssr-page__title { font: var(--h1); letter-spacing: -0.01em; }
.ssr-page__content { font: var(--body); color: var(--fg2); }
.ssr-page__content h2 { font: var(--h2); margin: 1.4em 0 .5em; }
.ssr-page__content h3 { font: var(--h3); margin: 1.2em 0 .4em; }
.ssr-page__content a { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px; }

.ssr-empty { color: var(--fg3); font: var(--body); }

/* Wordmark dot — honour the inline --ssr-dot var the helper sets */
.ssr-wordmark { font-family: var(--font-brand); font-weight: 400; letter-spacing: .02em; line-height: 1; display: inline-block; }
.ssr-wordmark .dot { color: var(--ssr-dot, var(--accent-dot)); }

/* ----------------------------------------------------------------
   2. Eyebrow / tag / badge atoms
   ---------------------------------------------------------------- */
.ssr-eyebrow {
	font: var(--eyebrow);
	letter-spacing: var(--eyebrow-spacing);
	text-transform: uppercase;
	color: var(--fg3);
}

.ssr-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 .8125rem/1 var(--font-util);
	padding: 7px 12px;
	border-radius: var(--radius-pill);
	background: var(--cream-200);
	color: var(--ink-700);
	white-space: nowrap;
}

.ssr-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font: 600 .6875rem/1 var(--font-util);
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: var(--radius-pill);
	background: var(--orchid-200);
	color: var(--orchid-700);
	box-shadow: var(--shadow-xs);
}
.ssr-badge.is-newin      { background: var(--lemon-300); color: #8a6d1e; }
.ssr-badge.is-bestseller { background: var(--ink-900);  color: #fff; }
.ssr-badge.is-concept    { background: var(--orchid-200); color: var(--orchid-700); }
.ssr-badge.is-easter     { background: var(--sage-300); color: var(--sage-600); }
.ssr-badge.is-sale       { background: var(--blush-500); color: #fff; }
.ssr-badge.is-accent     { background: var(--a-soft, var(--orchid-200)); color: var(--a-tag, var(--orchid-700)); }

/* ----------------------------------------------------------------
   3. Accent system — per-product palette (mirrors data.jsx ACCENTS)
   Sets --a-soft / --a-mid / --a-deep / --a-tag for descendants.
   ---------------------------------------------------------------- */
.ssr-accent--orchid { --a-soft: var(--orchid-100); --a-mid: var(--orchid-300); --a-deep: var(--orchid-700); --a-tag: var(--orchid-700); }
.ssr-accent--blush  { --a-soft: var(--blush-100);  --a-mid: var(--blush-300);  --a-deep: var(--blush-600);  --a-tag: var(--blush-600); }
.ssr-accent--lemon  { --a-soft: var(--lemon-100);  --a-mid: var(--lemon-300);  --a-deep: #8a6d1e;           --a-tag: #8a6d1e; }
.ssr-accent--sage   { --a-soft: var(--sage-100);   --a-mid: var(--sage-300);   --a-deep: var(--sage-600);   --a-tag: var(--sage-600); }
.ssr-accent--clay   { --a-soft: var(--clay-100);   --a-mid: var(--clay-300);   --a-deep: var(--clay-600);   --a-tag: var(--clay-600); }

/* ----------------------------------------------------------------
   4. Buttons
   ---------------------------------------------------------------- */
.ssr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: 700 1rem/1 var(--font-display);
	padding: 14px 22px;
	border-radius: var(--radius-pill);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
	text-align: center;
	white-space: nowrap;
}
.ssr-btn:active { transform: scale(.98); }

.ssr-btn--primary { background: var(--brand); color: var(--on-brand); }
.ssr-btn--primary:hover { background: var(--brand-strong); }
.ssr-btn--primary svg { stroke: #fff; }

.ssr-btn--secondary { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.ssr-btn--secondary:hover { background: var(--ink-900); color: #fff; }

.ssr-btn--ghost { background: transparent; color: var(--brand-strong); padding-inline: 8px; }
.ssr-btn--ghost:hover { color: var(--orchid-700); }

.ssr-btn--full { width: 100%; }

/* Icon button */
.ssr-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-pill);
	background: transparent;
	border: none;
	cursor: pointer;
	position: relative;
	transition: background var(--dur) var(--ease);
}
.ssr-iconbtn:hover { background: var(--cream-200); }

/* ----------------------------------------------------------------
   5. Header — sticky translucent
   ---------------------------------------------------------------- */
.ssr-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(251, 247, 241, 0.82);
	transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.ssr-header.is-scrolled {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line-300);
	background: rgba(251, 247, 241, 0.9);
}
.ssr-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	height: 72px;
}
.ssr-header__menu { display: none; }
.ssr-header__logo { display: inline-flex; align-items: center; margin-right: auto; }
.ssr-header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.ssr-nav { margin-inline: auto; }
.ssr-nav__list { display: flex; align-items: center; gap: var(--space-5); }
.ssr-nav__list a,
.ssr-nav a {
	font: 400 1.0625rem/1 var(--font-display);
	color: var(--ink-700);
	padding: 8px 2px;
	position: relative;
	transition: color var(--dur) var(--ease);
}
.ssr-nav a:hover { color: var(--brand-strong); }
.ssr-nav .current-menu-item > a,
.ssr-nav .current_page_item > a { color: var(--brand-strong); }

/* Cart count badge */
.ssr-header__cart { position: relative; }
.ssr-cart-count {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--radius-pill);
	background: var(--brand);
	color: #fff;
	font: 600 .6875rem/18px var(--font-util);
	text-align: center;
	transform: scale(0);
	transition: transform var(--dur) var(--ease);
}
.ssr-cart-count.is-visible { transform: scale(1); }

/* Search panel */
.ssr-search-panel {
	border-top: 1px solid var(--line-200);
	background: var(--cream-100);
	padding-block: var(--space-4);
}
.ssr-search-panel[hidden] { display: none; }
.ssr-search-panel form { display: flex; gap: 8px; }
.ssr-search-panel input[type="search"],
.ssr-search-panel input[type="text"] {
	flex: 1;
	font: 400 1rem/1 var(--font-util);
	padding: 14px 16px;
	border: 1px solid var(--line-300);
	border-radius: var(--radius-md);
	background: var(--paper);
	color: var(--ink-900);
}
.ssr-search-panel button[type="submit"] {
	background: var(--brand);
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	padding: 0 20px;
	font: 700 1rem/1 var(--font-display);
	cursor: pointer;
}

/* ----------------------------------------------------------------
   6. Mobile menu sheet
   ---------------------------------------------------------------- */
.ssr-menu-sheet {
	position: fixed;
	inset: 0;
	z-index: 400;
	background: var(--cream-100);
	display: flex;
	flex-direction: column;
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow) var(--ease);
}
.ssr-menu-sheet.is-open { transform: translateY(0); visibility: visible; }
.ssr-menu-sheet__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
	flex: 0 0 auto;
}
.ssr-menu-sheet__nav { flex: 1; padding: var(--space-5) 28px; }
.ssr-menu-sheet__list { display: flex; flex-direction: column; gap: 4px; }
.ssr-menu-sheet__list a,
.ssr-menu-sheet__link {
	display: block;
	font: 700 2rem/1.1 var(--font-display);
	color: var(--ink-900);
	padding: 12px 0;
	border-bottom: 1px solid var(--line-200);
}
.ssr-menu-sheet__foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--space-5) 28px var(--space-7);
}
.ssr-menu-sheet__foot .ssr-mascot { width: auto; }
.ssr-menu-sheet__tagline { margin-left: auto; font: 400 1rem/1.3 var(--font-display); color: var(--ink-500); text-align: right; }

/* Scrim shared by sheet + drawer */
.ssr-scrim {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: rgba(42, 38, 34, 0.42);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}
.ssr-scrim.is-open { opacity: 1; }
.ssr-scrim[hidden] { display: none; }

/* ----------------------------------------------------------------
   7. Footer
   ---------------------------------------------------------------- */
.ssr-footer {
	background: var(--ink-900);
	color: var(--cream-200);
	margin-top: var(--space-9);
	padding-top: var(--space-8);
}
.ssr-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: var(--space-6);
	padding-bottom: var(--space-7);
}
.ssr-footer__cols--menu { display: contents; }
.ssr-footer__brand .ssr-wordmark { display: inline-block; margin-bottom: var(--space-3); }
.ssr-footer__tagline { color: var(--ink-400); font: var(--body-sm); max-width: 30ch; }
.ssr-footer__social { display: flex; gap: 10px; margin-top: var(--space-4); }
.ssr-social {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255,255,255,.18);
	transition: background var(--dur) var(--ease);
}
.ssr-social:hover { background: rgba(255,255,255,.1); }
.ssr-footer__heading { color: #fff; margin-bottom: var(--space-3); }
.ssr-footer__col .ssr-footer__list { display: flex; flex-direction: column; gap: 10px; }
.ssr-footer__list a { color: var(--cream-200); font: var(--body-sm); opacity: .82; transition: opacity var(--dur) var(--ease); }
.ssr-footer__list a:hover { opacity: 1; }
.ssr-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-5);
	border-top: 1px solid rgba(255,255,255,.12);
	color: var(--ink-400);
	font: 400 .8125rem/1.4 var(--font-util);
}

/* ----------------------------------------------------------------
   8. Product cards + grid
   ---------------------------------------------------------------- */
ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	margin: 0;
	padding: 0;
}

.ssr-card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line-300);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ssr-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}
.ssr-card__link { display: flex; flex-direction: column; height: 100%; }
.ssr-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--a-soft, var(--cream-200));
	overflow: hidden;
}
.ssr-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}
.ssr-card:hover .ssr-card__media img { transform: scale(1.04); }
.ssr-card__body { padding: var(--space-4) var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 6px; }
.ssr-card__eyebrow { color: var(--a-deep, var(--fg3)); }
.ssr-card__title { font: 700 1.25rem/1.18 var(--font-display); color: var(--ink-900); }
.ssr-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.ssr-card__rating { display: inline-flex; align-items: center; gap: 4px; font: 600 .8125rem/1 var(--font-util); color: var(--ink-500); }

.ssr-price { font: 600 1.3rem/1 var(--font-util); color: var(--price); }
.ssr-price del { color: var(--fg3); font-weight: 400; margin-right: 6px; }
.ssr-price ins { text-decoration: none; color: var(--sale); }

/* Placeholder tile for concept products */
.ssr-placeholder {
	width: 100%; height: 100%;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 8px;
	background: var(--a-soft, var(--cream-200));
	color: var(--a-deep, var(--ink-500));
	text-align: center;
	padding: var(--space-4);
}
.ssr-placeholder .ssr-wordmark { opacity: .9; }
.ssr-placeholder__label { font: 600 .75rem/1.3 var(--font-util); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.ssr-placeholder.is-compact { gap: 4px; }

/* ----------------------------------------------------------------
   9. Home — hero
   ---------------------------------------------------------------- */
.ssr-hero { padding-block: var(--space-7) var(--space-6); }
.ssr-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: var(--space-7);
	align-items: center;
}
.ssr-hero__title { font: var(--display); letter-spacing: -0.015em; margin: var(--space-3) 0 var(--space-4); }
.ssr-hero__lede { font: var(--body-lg); color: var(--fg2); max-width: 46ch; }
.ssr-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-5); }
.ssr-hero__usps { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); }
.ssr-hero__usps li { display: inline-flex; align-items: center; gap: 8px; font: 400 1rem/1 var(--font-display); color: var(--ink-700); }

.ssr-hero__media { position: relative; }
.ssr-hero__photo {
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--orchid-100);
	box-shadow: var(--shadow-lg);
	aspect-ratio: 4 / 3;
}
.ssr-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.ssr-hero__chip {
	position: absolute;
	left: -18px;
	bottom: -22px;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--paper);
	border: 1px solid var(--line-300);
	border-radius: var(--radius-lg);
	padding: 12px 18px 12px 12px;
	box-shadow: var(--shadow-md);
	max-width: 280px;
}
.ssr-hero__chip-eyebrow { font: 600 .6875rem/1 var(--font-util); letter-spacing: .12em; text-transform: uppercase; color: var(--blush-600); margin-bottom: 4px; }
.ssr-hero__chip-title { font: 700 1.0625rem/1.15 var(--font-display); color: var(--ink-900); }

.ssr-mascot { display: block; image-rendering: auto; }

/* ----------------------------------------------------------------
   10. Home — value strip
   ---------------------------------------------------------------- */
.ssr-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	padding-block: var(--space-6);
	margin-block: var(--space-5);
	border-top: 1px solid var(--line-200);
	border-bottom: 1px solid var(--line-200);
}
.ssr-value { display: flex; gap: var(--space-3); align-items: flex-start; }
.ssr-value__icon {
	flex: 0 0 auto;
	width: 46px; height: 46px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--radius-pill);
	background: var(--sage-100);
}
.ssr-value__title { font: 700 1.0625rem/1.2 var(--font-display); margin-bottom: 4px; }
.ssr-value__text { font: var(--body-sm); color: var(--fg2); margin: 0; }

/* ----------------------------------------------------------------
   11. Home — section head + featured + story
   ---------------------------------------------------------------- */
.ssr-sectionhead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}
.ssr-sectionhead__title { font: var(--h2); margin-top: 6px; }
.ssr-sectionhead__action { display: inline-flex; align-items: center; gap: 6px; font: 700 1rem/1 var(--font-display); color: var(--brand-strong); }

.ssr-featured { padding-block: var(--space-6); }

.ssr-story { background: var(--cream-200); margin-top: var(--space-8); }
.ssr-story__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7);
	align-items: center;
	padding-block: var(--space-8);
}
.ssr-story__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.ssr-story__mascots { display: flex; gap: 8px; margin-bottom: var(--space-3); }
.ssr-story__title { font: var(--h1); letter-spacing: -.01em; margin-bottom: var(--space-3); }
.ssr-story__text { font: var(--body-lg); color: var(--fg2); margin-bottom: var(--space-5); }

/* ----------------------------------------------------------------
   12. Breadcrumb + shop header + chips
   ---------------------------------------------------------------- */
.ssr-breadcrumb {
	font: 500 .875rem/1.4 var(--font-util);
	color: var(--fg3);
	padding-block: var(--space-5) 0;
}
.ssr-breadcrumb a { color: var(--fg2); }
.ssr-breadcrumb a:hover { color: var(--brand-strong); }
.ssr-crumb-sep { color: var(--brand); margin-inline: 8px; }

.ssr-shophead { padding-block: var(--space-6) var(--space-4); }
.ssr-shophead__title { font: var(--h1); letter-spacing: -.01em; margin: 6px 0; }
.ssr-shophead__count { font: 500 .9375rem/1.4 var(--font-util); color: var(--fg3); margin: 0; }

.ssr-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-6); }
.ssr-chip {
	font: 600 .9375rem/1 var(--font-util);
	padding: 10px 16px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--line-300);
	background: var(--paper);
	color: var(--ink-700);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ssr-chip:hover { border-color: var(--brand); color: var(--brand-strong); }
.ssr-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* woocommerce.php wrapper page */
.ssr-woo { padding-bottom: var(--space-8); }
.ssr-woo .woocommerce-notices-wrapper:empty { display: none; }

/* ----------------------------------------------------------------
   13. Single product
   ---------------------------------------------------------------- */
.single-product div.product {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: var(--space-7);
	align-items: start;
	padding-block: var(--space-5) var(--space-7);
}
.single-product div.product .ssr-accordions,
.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .upsells { grid-column: 1 / -1; }

/* Gallery */
.ssr-gallery { position: relative; }
.ssr-gallery__main { margin: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--orchid-100); box-shadow: var(--shadow-sm); }
.ssr-gallery__main img { width: 100%; height: auto; display: block; }
.ssr-gallery .flex-control-thumbs {
	display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding: 0; list-style: none;
}
.ssr-gallery .flex-control-thumbs li { width: 72px; }
.ssr-gallery .flex-control-thumbs img {
	border-radius: var(--radius-md); cursor: pointer; opacity: .65;
	border: 1px solid var(--line-300); transition: opacity var(--dur) var(--ease);
}
.ssr-gallery .flex-control-thumbs img.flex-active,
.ssr-gallery .flex-control-thumbs img:hover { opacity: 1; }
.ssr-gallery__placeholder { aspect-ratio: 1 / 1; }
.woocommerce-product-gallery__trigger { display: none; }

/* Summary column */
.single-product div.product .summary { margin: 0; }
.ssr-single__eyebrow { margin-bottom: 8px; }
.single-product .product_title {
	font: var(--h1); letter-spacing: -.01em; margin: 0 0 var(--space-3);
}
.single-product .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.single-product .woocommerce-product-rating .star-rating { color: var(--lemon-600); }
.single-product .woocommerce-product-details__short-description { font: var(--body-lg); color: var(--fg2); margin-bottom: var(--space-4); }

.ssr-tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4); }

.single-product .price,
.single-product p.price {
	font: 700 2rem/1 var(--font-util) !important;
	color: var(--price);
	margin: 0;
}
.single-product .price del { font-size: 1.3rem; color: var(--fg3); font-weight: 400; }
.single-product .price ins { text-decoration: none; color: var(--sale); }
.ssr-single__vat { font: 500 .8125rem/1.4 var(--font-util); color: var(--fg3); margin: 6px 0 var(--space-5); }

.ssr-concept-note {
	background: var(--orchid-100);
	border: 1px solid var(--orchid-200);
	color: var(--orchid-700);
	border-radius: var(--radius-md);
	padding: 12px 16px;
	font: 500 .9375rem/1.45 var(--font-util);
	margin-bottom: var(--space-5);
}

/* Add-to-cart row */
.single-product form.cart {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 var(--space-5);
}
.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 200px;
	background: var(--brand);
	color: #fff;
	border: none;
	border-radius: var(--radius-pill);
	font: 700 1.0625rem/1 var(--font-display);
	padding: 16px 24px;
	cursor: pointer;
	transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.single-product form.cart .single_add_to_cart_button:hover { background: var(--brand-strong); }
.single-product form.cart .single_add_to_cart_button:active { transform: scale(.98); }

/* Quantity pill stepper */
.ssr-qty {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: var(--paper);
	border: 1px solid var(--line-300);
	border-radius: var(--radius-pill);
	padding: 4px;
}
.ssr-qty__btn {
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	border: none; background: transparent; cursor: pointer;
	border-radius: var(--radius-pill);
	color: var(--ink-700);
	transition: background var(--dur) var(--ease);
}
.ssr-qty__btn:hover { background: var(--cream-200); }
.ssr-qty__btn:disabled { opacity: .35; cursor: default; }
.ssr-qty__input {
	width: 44px;
	text-align: center;
	border: none;
	background: transparent;
	font: 600 1.0625rem/1 var(--font-util);
	color: var(--ink-900);
	-moz-appearance: textfield;
}
.ssr-qty__input::-webkit-outer-spin-button,
.ssr-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ssr-qty__value { min-width: 26px; text-align: center; font: 600 .9375rem/1 var(--font-util); color: var(--ink-900); }
.ssr-qty--sm { padding: 2px; }
.ssr-qty--sm .ssr-qty__btn { width: 28px; height: 28px; }

/* Wishlist heart */
.ssr-wish {
	width: 52px; height: 52px;
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--line-300);
	background: var(--paper);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ssr-wish:hover { border-color: var(--blush-500); background: var(--blush-100); }
.ssr-wish.is-active svg { fill: var(--blush-500); stroke: var(--blush-500); }

/* Accordions (product tabs) */
.ssr-accordions { margin-top: var(--space-6); border-top: 1px solid var(--line-300); }
.ssr-accordion { border-bottom: 1px solid var(--line-300); }
.ssr-accordion__head {
	width: 100%;
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px;
	background: transparent; border: none; cursor: pointer;
	padding: var(--space-4) 0;
	font: 700 1.125rem/1.2 var(--font-display);
	color: var(--ink-900);
	text-align: left;
}
.ssr-accordion__head svg { transition: transform var(--dur) var(--ease); flex: 0 0 auto; }
.ssr-accordion.is-open .ssr-accordion__head svg { transform: rotate(180deg); }
.ssr-accordion__panel { padding: 0 0 var(--space-5); font: var(--body); color: var(--fg2); }
.ssr-accordion__panel[hidden] { display: none; }
.ssr-accordion__panel p:last-child { margin-bottom: 0; }

/* Related products */
.related.products > h2,
.upsells.products > h2 { font: var(--h2); margin-bottom: var(--space-5); }

/* ----------------------------------------------------------------
   14. Off-canvas cart drawer
   ---------------------------------------------------------------- */
.ssr-drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	z-index: 400;
	width: min(420px, 92vw);
	background: var(--cream-100);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow) var(--ease);
	box-shadow: var(--shadow-lg);
}
.ssr-drawer.is-open { transform: translateX(0); visibility: visible; }
.ssr-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--line-300);
	flex: 0 0 auto;
}
.ssr-drawer__title { font: var(--h3); }
.ssr-drawer__body { flex: 1; overflow-y: auto; }
.ssr-drawer__items { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

.ssr-line { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding-right: 24px; }
.ssr-line__media { width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden; background: var(--a-soft, var(--cream-200)); }
.ssr-line__media img { width: 100%; height: 100%; object-fit: cover; }
.ssr-line__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--a-deep, var(--ink-500)); }
.ssr-line__name { font: 700 1rem/1.2 var(--font-display); color: var(--ink-900); }
.ssr-line__meta { font: 500 .8125rem/1.3 var(--font-util); color: var(--fg3); margin-top: 2px; }
.ssr-line__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ssr-line__price { font: 600 1rem/1 var(--font-util); color: var(--price); }
.ssr-line__remove {
	position: absolute; top: 0; right: 0;
	width: 24px; height: 24px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--radius-pill);
	color: var(--fg3);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ssr-line__remove:hover { background: var(--blush-100); color: var(--blush-600); }

.ssr-drawer__foot { flex: 0 0 auto; padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--line-300); background: var(--cream-100); }
.ssr-drawer__total { display: flex; align-items: center; justify-content: space-between; margin: var(--space-3) 0 var(--space-4); font: 700 1.125rem/1 var(--font-display); }
.ssr-drawer__total-value { font: 700 1.125rem/1 var(--font-util); }
.ssr-drawer__viewcart { display: block; text-align: center; margin-top: 12px; font: 600 .9375rem/1 var(--font-util); color: var(--fg2); text-decoration: underline; text-underline-offset: 2px; }
.ssr-drawer__empty { text-align: center; padding: var(--space-7) var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.ssr-drawer__empty .ssr-mascot { margin-inline: auto; }
.ssr-drawer__empty p { font: var(--body-lg); color: var(--fg2); margin: 0; }

/* Free-shipping progress */
.ssr-freeship { margin-bottom: var(--space-3); }
.ssr-freeship__msg { font: 500 .875rem/1.4 var(--font-util); color: var(--ink-700); margin: 0 0 8px; }
.ssr-freeship__msg b { color: var(--brand-strong); }
.ssr-freeship__track { height: 8px; border-radius: var(--radius-pill); background: var(--cream-200); overflow: hidden; }
.ssr-freeship__fill { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width var(--dur-slow) var(--ease); }
.ssr-freeship.is-compact .ssr-freeship__msg { font-size: .8125rem; }

/* ----------------------------------------------------------------
   15. Add-to-cart toast
   ---------------------------------------------------------------- */
.ssr-toast {
	position: fixed;
	left: 50%; bottom: 24px;
	transform: translate(-50%, 140%);
	z-index: 500;
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--ink-900); color: #fff;
	padding: 14px 20px;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-lg);
	font: 600 .9375rem/1 var(--font-util);
	transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
	opacity: 0;
	pointer-events: none;
}
.ssr-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* ----------------------------------------------------------------
   16. Cart page
   ---------------------------------------------------------------- */
.woocommerce-cart .ssr-page,
.woocommerce-checkout .ssr-page { padding-block: var(--space-6) var(--space-8); }

.ssr-cart { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-7); align-items: start; }
.ssr-cart__head { margin-bottom: var(--space-5); }
.ssr-cart__title { font: var(--h1); letter-spacing: -.01em; }

.ssr-cart__items { display: flex; flex-direction: column; }
.ssr-cart__row {
	position: relative;
	display: grid;
	grid-template-columns: 92px 1fr auto;
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--line-200);
}
.ssr-cart__media { width: 92px; height: 92px; border-radius: var(--radius-md); overflow: hidden; background: var(--a-soft, var(--cream-200)); }
.ssr-cart__media img { width: 100%; height: 100%; object-fit: cover; }
.ssr-cart__media .ssr-line__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--a-deep, var(--ink-500)); }
.ssr-cart__name { font: 700 1.125rem/1.2 var(--font-display); color: var(--ink-900); }
.ssr-cart__meta { font: 500 .8125rem/1.3 var(--font-util); color: var(--fg3); margin-top: 2px; }
.ssr-cart__controls { display: flex; align-items: center; gap: var(--space-4); margin-top: 10px; }
.ssr-cart__price { font: 600 1.125rem/1 var(--font-util); color: var(--price); text-align: right; }
.ssr-cart__remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: var(--radius-pill);
	color: var(--fg3); transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ssr-cart__remove:hover { background: var(--blush-100); color: var(--blush-600); }
.ssr-cart__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); flex-wrap: wrap; }
.ssr-coupon { display: flex; gap: 8px; }
.ssr-coupon input {
	font: 400 1rem/1 var(--font-util);
	padding: 12px 14px; border: 1px solid var(--line-300);
	border-radius: var(--radius-md); background: var(--paper);
}

/* Cart totals card */
.ssr-cart__aside { position: sticky; top: 92px; }
.ssr-totals {
	background: var(--cream-200);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}
.ssr-totals__title { font: var(--h3); margin-bottom: var(--space-4); }
.ssr-totals table { width: 100%; border-collapse: collapse; }
.ssr-totals th, .ssr-totals td { text-align: left; padding: 10px 0; font: 500 1rem/1.4 var(--font-util); color: var(--fg2); border-bottom: 1px solid var(--line-300); }
.ssr-totals td { text-align: right; color: var(--ink-900); }
.ssr-totals .order-total th, .ssr-totals .order-total td { font: 700 1.25rem/1 var(--font-display); color: var(--ink-900); border-bottom: none; padding-top: var(--space-4); }
.ssr-totals .ssr-btn { margin-top: var(--space-4); }
.ssr-totals__empty { color: var(--fg3); font: var(--body-sm); }

/* Empty cart */
.ssr-cart-empty { text-align: center; padding: var(--space-8) var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.ssr-cart-empty__title { font: var(--h2); }
.ssr-cart-empty p { font: var(--body-lg); color: var(--fg2); margin: 0; }

/* ----------------------------------------------------------------
   17. Checkout
   ---------------------------------------------------------------- */
.ssr-checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-7); align-items: start; }
.ssr-checkout__head { grid-column: 1 / -1; margin-bottom: var(--space-3); }
.ssr-checkout__title { font: var(--h1); letter-spacing: -.01em; }
.ssr-checkout__section { margin-bottom: var(--space-6); }
.ssr-checkout__section-title { font: var(--h3); margin-bottom: var(--space-4); display: flex; align-items: center; gap: 10px; }

/* Form fields (MField) */
.ssr-checkout .form-row,
.woocommerce-checkout .form-row { margin: 0 0 var(--space-3); }
.ssr-checkout label,
.woocommerce form .form-row label { font: 600 .875rem/1.3 var(--font-util); color: var(--ink-700); display: block; margin-bottom: 6px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input.input-text,
.select2-container .select2-selection {
	width: 100%;
	font: 400 1rem/1.4 var(--font-util) !important;
	padding: 14px 16px;
	border: 1px solid var(--line-300);
	border-radius: var(--radius-md);
	background: var(--paper);
	color: var(--ink-900);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--orchid-100);
	outline: none;
}
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 { width: 100%; float: none; }

/* Payment radios */
.woocommerce-checkout #payment { background: var(--cream-200); border-radius: var(--radius-lg); padding: var(--space-4); }
.woocommerce-checkout #payment ul.payment_methods { border: none; padding: 0; margin: 0; list-style: none; }
.woocommerce-checkout #payment ul.payment_methods li {
	background: var(--paper);
	border: 1px solid var(--line-300);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	margin-bottom: 10px;
}
.woocommerce-checkout #payment ul.payment_methods li label { display: inline; font: 600 1rem/1.3 var(--font-display); color: var(--ink-900); }
.woocommerce-checkout #payment div.payment_box { background: transparent; padding: 10px 0 0; font: var(--body-sm); color: var(--fg2); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .place-order { padding: var(--space-4) 0 0; }
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order {
	width: 100%;
	background: var(--brand) !important;
	color: #fff !important;
	border: none;
	border-radius: var(--radius-pill);
	font: 700 1.0625rem/1 var(--font-display);
	padding: 16px 24px;
	cursor: pointer;
}
.woocommerce #payment #place_order:hover { background: var(--brand-strong) !important; }

/* Order review card */
.ssr-checkout__aside { position: sticky; top: 92px; }
.ssr-order-summary { background: var(--cream-200); border-radius: var(--radius-lg); padding: var(--space-5); }
.ssr-order-summary__title { font: var(--h3); margin-bottom: var(--space-4); }
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { padding: 10px 0; font: 500 .9375rem/1.4 var(--font-util); border-bottom: 1px solid var(--line-300); text-align: left; }
.woocommerce-checkout-review-order-table td { text-align: right; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td { font: 700 1.25rem/1 var(--font-display); border-bottom: none; padding-top: var(--space-4); }
.woocommerce-checkout-review-order-table .product-name { color: var(--ink-900); }
.woocommerce-checkout-review-order-table .product-quantity { color: var(--fg3); }

/* ----------------------------------------------------------------
   18. Thank-you / confirmation
   ---------------------------------------------------------------- */
.ssr-confirm { max-width: 560px; margin-inline: auto; text-align: center; padding-block: var(--space-7); }
.ssr-confirm__mascots { display: flex; justify-content: center; gap: 10px; margin-bottom: var(--space-3); }
.ssr-confirm__check {
	width: 64px; height: 64px; margin: 0 auto var(--space-4);
	display: flex; align-items: center; justify-content: center;
	border-radius: var(--radius-pill);
	background: var(--sage-300); color: var(--sage-600);
}
.ssr-confirm__title { font: var(--display); letter-spacing: -.01em; margin-bottom: var(--space-3); }
.ssr-confirm__lede { font: var(--body-lg); color: var(--fg2); }
.ssr-confirm__order { font: 600 1rem/1.4 var(--font-util); color: var(--ink-700); }
.ssr-confirm__order b { color: var(--ink-900); }
.ssr-confirm__delivery {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--cream-200); border-radius: var(--radius-md);
	padding: 14px 20px; margin-top: var(--space-4);
	font: 500 1rem/1.3 var(--font-util); color: var(--ink-700);
}
.woocommerce-order .woocommerce-order-overview,
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details { max-width: 720px; margin-inline: auto; margin-top: var(--space-6); }
.woocommerce-order .woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; padding: var(--space-4); background: var(--cream-200); border-radius: var(--radius-lg); }
.woocommerce-order .woocommerce-order-overview li { font: 500 .875rem/1.4 var(--font-util); color: var(--fg2); border: none; }
.woocommerce-order .woocommerce-order-overview li strong { display: block; font: 700 1.0625rem/1.2 var(--font-display); color: var(--ink-900); }

/* ----------------------------------------------------------------
   19. About page
   ---------------------------------------------------------------- */
.ssr-about__hero {
	background: var(--orchid-100);
	border-radius: var(--radius-xl);
	padding: var(--space-8) var(--space-6);
	text-align: center;
	margin-bottom: var(--space-7);
}
.ssr-about__mascots { display: flex; justify-content: center; gap: 12px; margin-bottom: var(--space-4); }
.ssr-about__title { font: var(--display); letter-spacing: -.01em; }
.ssr-about__lede { font: var(--body-lg); color: var(--fg2); max-width: 60ch; margin: var(--space-4) auto 0; }
.ssr-about__body { max-width: 720px; margin-inline: auto; }
.ssr-about__body h2 { font: var(--h2); margin: var(--space-6) 0 var(--space-3); }
.ssr-about__body p { font: var(--body-lg); color: var(--fg2); }
.ssr-about__benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin: var(--space-5) 0; }
.ssr-about__benefit { display: flex; gap: 12px; align-items: flex-start; background: var(--cream-200); border-radius: var(--radius-md); padding: var(--space-4); }
.ssr-about__benefit svg { flex: 0 0 auto; }
.ssr-about__benefit b { display: block; font: 700 1.0625rem/1.2 var(--font-display); color: var(--ink-900); margin-bottom: 4px; }
.ssr-about__benefit span { font: var(--body-sm); color: var(--fg2); }
.ssr-about__cta { text-align: center; padding: var(--space-6) 0 var(--space-3); }

/* ----------------------------------------------------------------
   20. 404 + blog
   ---------------------------------------------------------------- */
.ssr-404 { text-align: center; padding-block: var(--space-8); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.ssr-404__title { font: var(--display); }
.ssr-404 p { font: var(--body-lg); color: var(--fg2); }

.ssr-postlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.ssr-postcard__media { display: block; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-3); }
.ssr-postcard__title { font: var(--h3); margin-bottom: 8px; }
.ssr-postcard__excerpt { font: var(--body); color: var(--fg2); }
.ssr-pagination { margin-top: var(--space-7); display: flex; justify-content: center; }
.ssr-pagination .page-numbers { display: inline-flex; gap: 6px; list-style: none; padding: 0; }
.ssr-pagination a, .ssr-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border-radius: var(--radius-pill); border: 1px solid var(--line-300);
	font: 600 .9375rem/1 var(--font-util); color: var(--ink-700);
}
.ssr-pagination .current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ----------------------------------------------------------------
   21. WooCommerce notices / messages
   ---------------------------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-radius: var(--radius-md);
	border: 1px solid var(--line-300);
	border-left-width: 4px;
	background: var(--paper);
	font: 500 .9375rem/1.5 var(--font-util);
	color: var(--ink-700);
	padding: 14px 18px;
	list-style: none;
}
.woocommerce-message { border-left-color: var(--sage-600); }
.woocommerce-info { border-left-color: var(--orchid-500); }
.woocommerce-error { border-left-color: var(--blush-600); }
.woocommerce-message .button, .woocommerce-info .button {
	background: var(--brand); color: #fff; border-radius: var(--radius-pill);
	padding: 8px 16px; font: 700 .875rem/1 var(--font-display); float: right;
}
.woocommerce .button.added_to_cart {
	display: inline-block; margin-top: 8px;
	font: 600 .875rem/1 var(--font-util); color: var(--brand-strong);
	text-decoration: underline; text-underline-offset: 2px;
}
.woocommerce a.added_to_cart { color: var(--brand-strong); }

/* Star rating colour */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--lemon-600); }

/* ----------------------------------------------------------------
   22. Responsive
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
	ul.products { grid-template-columns: repeat(2, 1fr); }
	.ssr-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	.ssr-container { padding-inline: 20px; }
	.ssr-header__menu { display: inline-flex; }
	.ssr-nav { display: none; }
	.ssr-header__logo { margin-right: 0; }
	.ssr-header__inner { height: 64px; }

	.ssr-hero__inner,
	.ssr-story__inner,
	.single-product div.product,
	.ssr-cart,
	.ssr-checkout { grid-template-columns: 1fr; }

	.ssr-hero { padding-top: var(--space-5); }
	.ssr-hero__media { order: -1; }
	.ssr-hero__chip { left: 12px; bottom: 12px; }
	.ssr-story__media { order: -1; }

	.ssr-values { grid-template-columns: 1fr; gap: var(--space-4); }
	.ssr-cart__aside, .ssr-checkout__aside { position: static; }
	.ssr-about__benefits { grid-template-columns: 1fr; }
	.ssr-postlist { grid-template-columns: 1fr; }
	.ssr-sectionhead { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 560px) {
	ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
	.ssr-card__body { padding: var(--space-3); }
	.ssr-card__title { font-size: 1.05rem; }
	.ssr-footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }
	.ssr-footer__bar { flex-direction: column; align-items: flex-start; gap: 8px; }
	.single-product form.cart { flex-direction: column; align-items: stretch; }
	.single-product form.cart .ssr-qty { align-self: flex-start; }
	.ssr-cart__row { grid-template-columns: 72px 1fr; }
	.ssr-cart__price { grid-column: 2; text-align: left; }
	.ssr-drawer { width: 100vw; }
}

/* ----------------------------------------------------------------
   23. Reduced motion
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.ssr-card:hover { transform: none; }
	.ssr-card:hover .ssr-card__media img { transform: none; }
}

/* ----------------------------------------------------------------
   24. WooCommerce normalization (buttons, form columns, misc)
   ---------------------------------------------------------------- */
/* Proceed-to-checkout + generic WC buttons → brand pill */
.wc-proceed-to-checkout .checkout-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%;
	background: var(--brand);
	color: #fff;
	border: none;
	border-radius: var(--radius-pill);
	font: 700 1.0625rem/1 var(--font-display);
	padding: 16px 24px;
	cursor: pointer;
	text-align: center;
	transition: background var(--dur) var(--ease);
}
.wc-proceed-to-checkout .checkout-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--brand-strong); color: #fff; }

/* Generic (non-alt) WC buttons → secondary outline */
.woocommerce a.button,
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt) {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	background: transparent;
	color: var(--ink-900);
	border: 1.5px solid var(--ink-900);
	border-radius: var(--radius-pill);
	font: 700 .9375rem/1 var(--font-display);
	padding: 12px 18px;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:not(.alt):hover { background: var(--ink-900); color: #fff; }

.ssr-btn--secondary svg { stroke: currentColor; }

/* Billing / shipping fields: name pair side-by-side on wider screens */
@media (min-width: 600px) {
	.woocommerce form .form-row-first { width: 48%; float: left; margin-right: 4%; }
	.woocommerce form .form-row-last { width: 48%; float: right; }
	.woocommerce form .form-row-wide { clear: both; width: 100%; }
	.woocommerce .col2-set::after,
	.woocommerce form .form-row::after { content: ""; display: table; clear: both; }
}
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 { font: var(--h3); margin-bottom: var(--space-4); }
#ship-to-different-address label { font: 700 1.0625rem/1.2 var(--font-display); color: var(--ink-900); }

/* Coupon-on-checkout toggle */
.woocommerce-form-coupon-toggle .woocommerce-info { border-left-color: var(--orchid-500); }

/* Fixed-qty marker on sold-individually cart lines */
.ssr-cart__qty-fixed { font: 600 1.0625rem/1 var(--font-util); color: var(--ink-700); }

/* Single blog post media */
.ssr-single-post__media { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-5); }

/* Drawer busy state during AJAX qty update */
.ssr-drawer.is-busy .ssr-drawer__items { opacity: .55; pointer-events: none; transition: opacity var(--dur) var(--ease); }

/* Loading state on the single add-to-cart button */
.single_add_to_cart_button.loading { opacity: .7; cursor: progress; }

/* Hide the default WC quantity label visually but keep for a11y */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}