/* ========================================================================
   SANTA STORE — MASTER STYLESHEET
   ========================================================================

   Loads after Storefront's own styles. Keep all custom CSS here, organised
   by section: amend the relevant section rather than appending snippets.
   (Appearance → Customize → Additional CSS should stay empty.)

   01  Design tokens          09  Category shortcuts
   02  Base & utilities       10  Promotional / inspiration tiles
   03  Buttons                11  Product cards (site-wide)
   04  Header                 12  Trust strip
   05  Navigation             13  Newsletter
   06  Menu drawer            14  Footer
   07  Announcement ticker    15  Page titles
   08  Hero                   16  Utility bar
                              17  Listing pages (shop, categories, search)
                              18  Cookie consent banner (Complianz)
                              19  Product page
                              20  Basket page
                              21  Checkout page
                              22  Reduced motion

   Breakpoints: 768px (tablet), 1024px (desktop header/nav).

   ======================================================================== */


/* ========================================================================
   01. DESIGN TOKENS — change colours/fonts here, not throughout the file
   ======================================================================== */

/* Brand colours from the product page brief (Santa red, evergreen, gold). */
:root {
	--ss-red: #c8101e;
	--ss-red-dark: #9e0c17;
	--ss-green: #073d2b;
	--ss-green-dark: #052c1f;
	--ss-gold: #d8b36a;
	--ss-ink: #202020;
	--ss-ink-soft: #4a4a4f;
	--ss-line: #e7e3dc;
	--ss-cream: #f8f7f4;
	--ss-white: #fff;

	--ss-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--ss-sans: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--ss-container: 1280px;
	--ss-gutter: 16px;
	--ss-radius: 8px;
	--ss-shadow: 0 6px 20px rgb(0 0 0 / 0.12);
	--ss-section-gap: 40px;
}

@media (min-width: 768px) {
	:root {
		--ss-gutter: 24px;
		--ss-section-gap: 56px;
	}
}


/* ========================================================================
   02. BASE & UTILITIES
   ======================================================================== */

/* Full-bleed sections use 100vw; stop that ever causing sideways scroll. */
html,
body {
	overflow-x: clip;
}

/* Wider, consistent container for every Storefront .col-full. */
.col-full {
	box-sizing: border-box;
	max-width: var(--ss-container);
	padding-left: var(--ss-gutter);
	padding-right: var(--ss-gutter);
}

.ss-icon {
	flex: none;
	width: 1.5em;
	height: 1.5em;
}

/* Storefront's float-clearing ::before/::after on .col-full would become
   stray items in our grid and flex layouts. */
.col-full[class*="ss-"]::before,
.col-full[class*="ss-"]::after {
	display: none;
}

/* Section breaks out of the centred container to the full window width. */
.ss-fullbleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.ss-section {
	margin-bottom: var(--ss-section-gap);
}

.ss-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.ss-section__title {
	margin: 0;
	color: var(--ss-ink);
	font-family: var(--ss-sans);
	font-size: clamp(1.4rem, 2.5vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
}

.ss-section__text {
	margin: 4px 0 0;
	color: var(--ss-ink-soft);
}

.ss-section__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	color: var(--ss-ink);
	font-weight: 600;
	text-decoration: none;
}

.ss-section__link .ss-icon {
	width: 1.1em;
	height: 1.1em;
}

.ss-section__link:hover {
	color: var(--ss-red);
}

/* Visible keyboard focus everywhere in our components. */
.ss-header :focus-visible,
.ss-nav :focus-visible,
.ss-drawer :focus-visible,
.ss-ticker :focus-visible,
.ss-hero :focus-visible,
.ss-section :focus-visible,
.ss-newsletter :focus-visible,
.ss-footer :focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: 2px;
}

/* Homepage: Storefront's own spacing around the content area. */
.page-template-template-homepage .site-main {
	padding-top: 0 !important;
	margin-bottom: 0;
}

.page-template-template-homepage .content-area {
	width: 100%;
	float: none;
	margin: 0;
}

.page-template-template-homepage #content .col-full {
	overflow: visible;
}


/* ========================================================================
   03. BUTTONS
   ======================================================================== */

.ss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border: 0;
	border-radius: 6px;
	font-family: var(--ss-sans);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.ss-btn .ss-icon {
	width: 1.1em;
	height: 1.1em;
}

.ss-btn--primary,
.ss-btn--primary:visited {
	background: var(--ss-red);
	color: var(--ss-white);
}

.ss-btn--primary:hover {
	background: var(--ss-red-dark);
	color: var(--ss-white);
}

.ss-btn--light,
.ss-btn--light:visited {
	background: var(--ss-white);
	color: var(--ss-ink);
}

.ss-btn--light:hover {
	background: var(--ss-cream);
	color: var(--ss-red);
}

.ss-btn--outline,
.ss-btn--outline:visited {
	background: var(--ss-white);
	color: var(--ss-ink);
	box-shadow: inset 0 0 0 1px #c9c4bc;
}

.ss-btn--outline:hover {
	color: var(--ss-red);
	box-shadow: inset 0 0 0 1px var(--ss-red);
}

.ss-btn--small {
	min-height: 36px;
	padding: 6px 14px;
	font-size: 0.9rem;
}


/* ========================================================================
   04. HEADER
   ========================================================================

   Mobile/tablet (below 1024px):      Desktop:
   [ ☰ ]   [ LOGO ]   [ ♡ 🛍 ]        [ LOGO ] [ SEARCH……… ] [ 👤 ♡ 🛍 ]
   [ SEARCH……………………………… ]          [ CATEGORY NAVIGATION (red) ]

   The logo is a full-colour image on white, so the logo row stays white.

   ======================================================================== */

.site-header {
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	background: var(--ss-white) !important;
}

.ss-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 44px;
	grid-template-areas:
		"logo actions menu"
		"search search search";
	align-items: center;
	gap: 8px 12px;
	padding-top: 8px;
	padding-bottom: 12px;
}

.ss-header .site-branding {
	grid-area: logo;
	justify-self: start;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.ss-header .site-branding .custom-logo-link {
	display: block;
	max-width: none;
}

.ss-header .site-branding img {
	display: block;
	width: auto;
	height: 80px;
	max-width: none;
	margin: 0;
}

.ss-header__menu {
	grid-area: menu;
}

.ss-header__search {
	grid-area: search;
}

.ss-header__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

/* Icon-only buttons (menu, close). 44px keeps them easy to tap. */
.ss-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.ss-iconbtn:hover {
	background: rgb(0 0 0 / 0.06);
}

.ss-header .ss-iconbtn {
	color: var(--ss-ink);
}

.ss-header .ss-iconbtn .ss-icon {
	width: 28px;
	height: 28px;
}

/* Account / wishlist / basket */
.ss-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	color: var(--ss-ink);
	font-weight: 600;
	text-decoration: none;
}

.site-header .ss-action:hover {
	color: var(--ss-red);
}

.ss-action .ss-icon {
	width: 26px;
	height: 26px;
}

.ss-header__account {
	display: none;
}

.ss-basket__count {
	position: absolute;
	top: 4px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--ss-red);
	color: var(--ss-white);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-sizing: border-box;
}

/* Search */
.ss-search {
	position: relative;
	display: flex;
	margin: 0;
}

.ss-search .ss-search__input {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 56px 0 16px;
	border: 1px solid #c9c4bc;
	border-radius: 6px;
	background: var(--ss-white);
	box-shadow: none;
	color: var(--ss-ink);
	font-size: 16px; /* 16px stops iOS zooming in on focus */
}

.ss-search .ss-search__input::placeholder {
	color: #6b6b70;
	opacity: 1;
}

.ss-search .ss-search__input:focus {
	border-color: var(--ss-green);
	outline: 2px solid var(--ss-green);
	outline-offset: 0;
}

.ss-search .ss-search__submit {
	position: absolute;
	top: 2px;
	right: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--ss-ink);
}

.ss-search .ss-search__submit:hover {
	background: var(--ss-cream);
	color: var(--ss-red);
}

@media (min-width: 1024px) {

	.ss-header {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "logo search actions";
		gap: 32px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.ss-header .site-branding img {
		height: 130px; /* name-only logo: big enough to read its "Online Christmas Gift Shop" banner */
	}

	.ss-header__menu {
		display: none;
	}

	.ss-header__search {
		max-width: 760px;
		width: 100%;
		justify-self: center;
	}

	.ss-search .ss-search__input {
		height: 52px;
	}

	.ss-search .ss-search__submit {
		height: 48px;
	}

	.ss-header__actions {
		gap: 12px;
	}

	.ss-header__account {
		display: inline-flex;
	}
}


/* ========================================================================
   05. NAVIGATION (desktop, 1024px+) — the red band under the logo row
   ======================================================================== */

.ss-nav {
	display: none;
}

@media (min-width: 1024px) {

	.ss-nav {
		display: block;
		background: var(--ss-red);
		color: var(--ss-white);
	}

	.ss-nav__inner {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.ss-nav .ss-nav__all {
		color: var(--ss-white);
		margin-left: -10px;
	}

	.ss-nav .ss-nav__all:hover {
		background: rgb(255 255 255 / 0.12);
	}

	.ss-nav__menu {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ss-nav__menu > li {
		position: relative;
		margin: 0;
	}

	.ss-nav .ss-nav__menu > li > a {
		display: block;
		padding: 13px 14px;
		color: var(--ss-white);
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
		border-bottom: 3px solid transparent;
	}

	/* Current department: white text with a gold underline. (Selector beats
	   Storefront's grey "current item" colour.) */
	.site-header .ss-nav .ss-nav__menu > li > a:hover,
	.site-header .ss-nav .ss-nav__menu > li:focus-within > a,
	.site-header .ss-nav .ss-nav__menu > li.current-menu-item > a,
	.site-header .ss-nav .ss-nav__menu > li.current-menu-ancestor > a {
		border-bottom-color: var(--ss-gold);
		color: var(--ss-white);
	}

	/* White pill: gold-on-red text would be too low contrast to read easily. */
	.ss-nav .ss-nav__menu .ss-menu-sale > a {
		margin: 6px 0 6px 8px;
		padding: 7px 16px;
		border: 0;
		border-radius: 999px;
		background: var(--ss-white);
		color: var(--ss-red);
	}

	.ss-nav .ss-nav__menu .ss-menu-sale > a:hover {
		background: var(--ss-cream);
		color: var(--ss-red-dark);
	}

	/* Subcategory dropdowns open on hover and keyboard focus. */
	.ss-nav__menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 100;
		display: none;
		min-width: 220px;
		margin: 0;
		padding: 8px 0;
		border-radius: 0 0 var(--ss-radius) var(--ss-radius);
		background: var(--ss-white);
		box-shadow: var(--ss-shadow);
		list-style: none;
	}

	.ss-nav__menu > li:hover > .sub-menu,
	.ss-nav__menu > li:focus-within > .sub-menu {
		display: block;
	}

	/* Smaller desktops/laptops: tighten so the departments fit on one line. */
	@media (max-width: 1279px) {
		.ss-nav .ss-nav__menu > li > a {
			padding-left: 9px;
			padding-right: 9px;
			font-size: 14px;
		}

		.ss-nav .ss-nav__menu .ss-menu-sale > a {
			margin-left: 4px;
			padding-left: 12px;
			padding-right: 12px;
		}
	}

	.ss-nav__menu {
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	/* Departments have up to ~20 subcategories: show them in two columns. */
	.ss-nav__menu .sub-menu:has(> li:nth-child(9)) {
		min-width: 460px;
		columns: 2;
		column-gap: 0;
	}

	.ss-nav__menu .sub-menu li {
		break-inside: avoid;
	}

	/* Right-hand dropdowns open leftwards so they stay on screen. */
	.ss-nav__menu > li:nth-last-child(-n+3) > .sub-menu {
		left: auto;
		right: 0;
	}

	.ss-nav__menu .sub-menu a {
		display: block;
		white-space: normal;
		padding: 8px 18px;
		color: var(--ss-ink);
		text-decoration: none;
	}

	.ss-nav__menu .sub-menu a:hover {
		background: var(--ss-cream);
		color: var(--ss-red);
	}
}


/* ========================================================================
   06. MENU DRAWER (mobile menu; "all categories" on desktop)
   ======================================================================== */

.ss-drawer {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(380px, 88vw);
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ss-white);
	color: var(--ss-ink);
	box-shadow: var(--ss-shadow);
}

.ss-drawer[open] {
	display: flex;
	flex-direction: column;
	animation: ss-drawer-in 0.22s ease-out;
}

.ss-drawer::backdrop {
	background: rgb(0 0 0 / 0.5);
}

@keyframes ss-drawer-in {
	from {
		transform: translateX(-100%);
	}
}

.ss-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 8px 8px 20px;
	background: var(--ss-red);
	color: var(--ss-white);
}

.ss-drawer__title {
	font-family: var(--ss-serif);
	font-size: 1.25rem;
	font-weight: 700;
}

.ss-drawer__head .ss-iconbtn:hover {
	background: rgb(255 255 255 / 0.15);
}

.ss-drawer nav {
	flex: 1;
	overflow-y: auto;
}

.ss-drawer__menu,
.ss-drawer__menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ss-drawer__menu li {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	border-bottom: 1px solid var(--ss-line);
}

.ss-drawer .ss-drawer__menu a {
	flex: 1;
	display: block;
	padding: 14px 20px;
	color: var(--ss-ink);
	font-size: 1.05rem;
	font-weight: 600;
	text-decoration: none;
}

.ss-drawer__menu a:hover {
	color: var(--ss-red);
}

.ss-drawer__menu .ss-menu-sale > a {
	color: var(--ss-red);
}

.ss-drawer__menu .sub-menu {
	flex-basis: 100%;
	background: var(--ss-cream);
}

.ss-drawer__menu .sub-menu li:last-child {
	border-bottom: 0;
}

.ss-drawer__menu .sub-menu a {
	padding-left: 36px;
	font-weight: 400;
}

.ss-sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--ss-line);
	background: transparent;
	color: var(--ss-ink);
	cursor: pointer;
}

.ss-sub-toggle .ss-icon {
	transition: transform 0.2s;
}

.ss-sub-toggle[aria-expanded="true"] .ss-icon {
	transform: rotate(180deg);
}

.ss-drawer__foot {
	padding: 12px 20px;
	border-top: 1px solid var(--ss-line);
}

.ss-drawer__foot .ss-action {
	justify-content: flex-start;
}


/* 06b. APP-STYLE TAB BAR (phones and tablets) ---------------------------- */

.ss-tabbar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9990;
	padding-bottom: env(safe-area-inset-bottom); /* iPhone home indicator */
	border-top: 1px solid var(--ss-line);
	background: var(--ss-white);
	box-shadow: 0 -4px 16px rgb(0 0 0 / 0.08);
}

.ss-tabbar__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ss-tabbar__list li {
	margin: 0;
}

.ss-tabbar__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	min-height: 58px;
	padding: 6px 2px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ss-ink-soft);
	font-family: var(--ss-sans);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.ss-tabbar__item .ss-icon {
	width: 24px;
	height: 24px;
}

.ss-tabbar__item:hover,
.ss-tabbar__item[aria-current="page"] {
	background: none;
	color: var(--ss-red);
}

.ss-tabbar__item[aria-current="page"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 25%;
	right: 25%;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--ss-red);
}

.ss-tabbar__item:focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: -3px;
}

.ss-tabbar__count {
	position: absolute;
	top: 4px;
	left: calc(50% + 6px);
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--ss-red);
	color: var(--ss-white);
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	box-sizing: border-box;
}

.ss-tabbar__count[hidden] {
	display: none;
}

/* Keep the end of every page clear of the bar. */
body {
	padding-bottom: calc(58px + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {

	.ss-tabbar {
		display: none;
	}

	body {
		padding-bottom: 0;
	}
}


/* ========================================================================
   07. ANNOUNCEMENT TICKER
   ========================================================================
   Wide screens: every message in a row. Narrow screens (with JS): one
   message at a time with previous/next and pause controls.
   ======================================================================== */

.ss-ticker {
	background: var(--ss-green);
	color: var(--ss-white);
	font-size: 14px;
}

.ss-ticker__inner {
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 40px;
}

.ss-ticker__list {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	gap: 4px 24px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
}

.ss-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 600;
}

.ss-ticker__item .ss-icon {
	width: 20px;
	height: 20px;
	color: var(--ss-gold);
}

.ss-ticker__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--ss-white);
	cursor: pointer;
}

.ss-ticker__btn[hidden] {
	display: none;
}

.ss-ticker__btn:hover {
	background: rgb(255 255 255 / 0.12);
}

.ss-ticker__btn .ss-icon {
	width: 18px;
	height: 18px;
}

.ss-ticker__btn[aria-pressed="true"] .ss-ticker__pause,
.ss-ticker__btn[aria-pressed="false"] .ss-ticker__play {
	display: none;
}

.ss-ticker__pause,
.ss-ticker__play {
	display: inline-flex;
}

/* Scrolling mode: the list and its hidden duplicate glide left together;
   when the first has moved its own width the loop restarts seamlessly. */
.ss-ticker.is-marquee .ss-ticker__inner {
	position: relative;
	gap: 0;
	overflow: hidden;
}

.ss-ticker.is-marquee .ss-ticker__list {
	flex: none;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 56px;
	padding-right: 56px;
	white-space: nowrap;
	animation: ss-ticker-scroll var(--ss-ticker-duration, 30s) linear infinite;
}

.ss-ticker.is-marquee:hover .ss-ticker__list,
.ss-ticker.is-marquee:focus-within .ss-ticker__list,
.ss-ticker.is-paused .ss-ticker__list {
	animation-play-state: paused;
}

/* Pause button sits at the right edge over a soft fade. */
.ss-ticker.is-marquee [data-ss-ticker-pause] {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 56px;
	height: 100%;
	border-radius: 0;
	background: linear-gradient(to right, rgb(7 61 43 / 0), var(--ss-green) 40%);
}

@keyframes ss-ticker-scroll {
	to {
		transform: translateX(-100%);
	}
}

/* One-at-a-time mode: messages stack in the same spot and fade. */
.ss-ticker.is-carousel .ss-ticker__list {
	display: grid;
	justify-items: center;
}

.ss-ticker.is-carousel .ss-ticker__item {
	grid-area: 1 / 1;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.4s, visibility 0.4s;
}

.ss-ticker.is-carousel .ss-ticker__item.is-active {
	visibility: visible;
	opacity: 1;
}


/* ========================================================================
   08. HERO
   ======================================================================== */

.ss-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Sized from the screen height so the category circles below are
	   always visible without scrolling (header ≈ 185px, tab bar 58px). */
	min-height: clamp(280px, calc(100svh - 400px), 400px);
	margin-bottom: 24px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ss-red-dark), var(--ss-green-dark));
	color: var(--ss-white);
	isolation: isolate;
}

.ss-hero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% center; /* keeps the gifts in view when cropped */
}

/* Darkens behind the text so it stays readable on any photo. */
.ss-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgb(0 0 0 / 0.75) 0%, rgb(0 0 0 / 0.35) 55%, rgb(0 0 0 / 0.1) 100%);
}

.ss-hero__content {
	width: 100%;
	padding-top: 32px;
	padding-bottom: 24px;
}

/* Short phones: drop the supporting sentence so the headline and button fit. */
@media (max-width: 767px) and (max-height: 740px) {
	.ss-hero__text {
		display: none;
	}
}

.ss-hero__eyebrow {
	margin: 0 0 8px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ss-hero .ss-hero__title {
	max-width: 12em;
	margin: 0 0 12px;
	color: var(--ss-white);
	font-family: var(--ss-serif);
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: 0;
	text-shadow: 0 2px 12px rgb(0 0 0 / 0.35);
}

.ss-hero__text {
	max-width: 34em;
	margin: 0 0 20px;
	font-size: 1.05rem;
	line-height: 1.5;
}

.ss-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Falling snow over the hero: two layers of flakes (small/slow behind,
   larger/faster in front). Each layer is a repeating 300px tile of dots that
   slides down exactly one tile per cycle, so the loop is seamless. Only
   transform is animated, which browsers handle cheaply. */
.ss-snow {
	position: absolute;
	inset: 0;
	z-index: -1; /* above the photo and its shading, below the text */
	overflow: hidden;
	pointer-events: none;
}

.ss-snow::before,
.ss-snow::after {
	content: "";
	position: absolute;
	top: -300px;
	left: 0;
	width: 100%;
	height: calc(100% + 300px);
	background-repeat: repeat;
	animation: ss-snowfall 14s linear infinite;
	will-change: transform;
}

.ss-snow::before {
	background-image:
		radial-gradient(circle at 20px 30px, rgb(255 255 255 / 0.8) 1.5px, transparent 2.5px),
		radial-gradient(circle at 110px 160px, rgb(255 255 255 / 0.7) 1.5px, transparent 2.5px),
		radial-gradient(circle at 200px 80px, rgb(255 255 255 / 0.8) 1px, transparent 2px),
		radial-gradient(circle at 260px 230px, rgb(255 255 255 / 0.7) 1.5px, transparent 2.5px),
		radial-gradient(circle at 60px 250px, rgb(255 255 255 / 0.6) 1px, transparent 2px),
		radial-gradient(circle at 160px 280px, rgb(255 255 255 / 0.7) 1px, transparent 2px);
	background-size: 300px 300px;
	opacity: 0.8;
}

.ss-snow::after {
	background-image:
		radial-gradient(circle at 40px 110px, rgb(255 255 255 / 0.95) 2.5px, transparent 3.5px),
		radial-gradient(circle at 180px 20px, rgb(255 255 255 / 0.9) 2px, transparent 3px),
		radial-gradient(circle at 240px 170px, rgb(255 255 255 / 0.95) 3px, transparent 4px),
		radial-gradient(circle at 120px 240px, rgb(255 255 255 / 0.85) 2px, transparent 3px);
	background-size: 300px 300px;
	background-position: 70px 0;
	animation-duration: 9s;
}

@keyframes ss-snowfall {
	to {
		transform: translateY(300px);
	}
}

@media (min-width: 768px) {

	.ss-hero {
		align-items: center;
		/* Header stack ≈ 250px on desktop; leaves room for the categories. */
		min-height: clamp(300px, calc(100svh - 465px), 480px);
		margin-bottom: 32px;
	}

	.ss-hero::before {
		background: linear-gradient(to right, rgb(0 0 0 / 0.7) 0%, rgb(0 0 0 / 0.4) 45%, rgb(0 0 0 / 0) 75%);
	}

	.ss-hero__content {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.ss-hero__text {
		font-size: 1.15rem;
	}

	/* Text stays on the left half of the picture and wraps onto more lines
	   rather than running past the middle. */
	.ss-hero__eyebrow,
	.ss-hero .ss-hero__title,
	.ss-hero__text {
		max-width: 50%;
	}
}


/* ========================================================================
   09. CATEGORY SHORTCUTS — scroll sideways on small screens
   ======================================================================== */

.ss-cats__list {
	display: flex;
	gap: 12px;
	margin: 0 calc(-1 * var(--ss-gutter));
	padding: 4px var(--ss-gutter) 8px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--ss-gutter);
	scrollbar-width: thin;
}

.ss-cats__list > li {
	flex: none;
	margin: 0;
	scroll-snap-align: start;
}

.ss-cats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 84px;
	color: var(--ss-ink);
	text-align: center;
	text-decoration: none;
}

.ss-cats__img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	overflow: hidden;
	border: 3px solid var(--ss-white);
	border-radius: 50%;
	background: var(--ss-cream);
	box-shadow: 0 0 0 1px var(--ss-line);
	color: var(--ss-green);
	transition: box-shadow 0.15s;
}

.ss-cats__img img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.ss-cats__label {
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.25;
}

.ss-cats__item:hover .ss-cats__img {
	box-shadow: 0 0 0 3px var(--ss-red);
}

.ss-cats__item--sale .ss-cats__img {
	background: var(--ss-red);
	color: var(--ss-white);
	font-family: var(--ss-serif);
	font-size: 1.3rem;
	font-weight: 700;
}

@media (min-width: 768px) {

	.ss-cats__list {
		justify-content: space-between;
		gap: 16px;
	}

	.ss-cats__item {
		width: 112px;
	}

	.ss-cats__img {
		width: 104px;
		height: 104px;
	}

	.ss-cats__label {
		font-size: 0.95rem;
	}

	.ss-cats__item--sale .ss-cats__img {
		font-size: 1.7rem;
	}
}


/* ========================================================================
   10. PROMOTIONAL & INSPIRATION TILES
   ======================================================================== */

.ss-promos,
.ss-inspire__grid {
	display: grid;
	gap: 16px;
}

.ss-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 220px;
	overflow: hidden;
	border-radius: var(--ss-radius);
	background: linear-gradient(135deg, var(--ss-green), var(--ss-red-dark));
	color: var(--ss-white);
	isolation: isolate; /* keeps the image's z-index:-1 inside the tile */
}

/* The image sits behind the text, filling the tile whatever its shape. */
.ss-tile__img {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.ss-tile:hover .ss-tile__img {
	transform: scale(1.04);
}

.ss-tile__body {
	padding: 48px 20px 20px;
	background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0));
}

.ss-tile .ss-tile__title {
	max-width: 13em;
	margin: 0 0 12px;
	color: var(--ss-white);
	font-family: var(--ss-serif);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.15;
}

.ss-tile__text {
	margin: -4px 0 12px;
	font-size: 0.95rem;
}

/* Tiles whose picture already includes the heading: just a centred button
   over a light fade, so the artwork stays clear. */
.ss-tile--text-in-image .ss-tile__body {
	display: flex;
	justify-content: center;
	padding-top: 32px;
	padding-bottom: 14px;
	background: linear-gradient(to top, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0));
}

/* The whole tile is clickable via its button (one link per tile). */
.ss-tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ss-tile--card .ss-tile__title {
	font-family: var(--ss-sans);
	font-size: 1.75rem;
	margin-bottom: 6px;
}

@media (min-width: 768px) {

	.ss-promos,
	.ss-inspire__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.ss-tile {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.ss-tile .ss-tile__title {
		font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	}

	.ss-tile--card .ss-tile__title {
		font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	}
}

/* Tablet: three tiles are narrow, so tighten their text and buttons. */
@media (min-width: 768px) and (max-width: 1023px) {

	.ss-tile__body {
		padding: 32px 14px 14px;
	}

	.ss-tile .ss-tile__title {
		font-size: 1.25rem;
	}

	.ss-tile .ss-tile__link {
		min-height: 36px;
		padding: 6px 12px;
		font-size: 0.85rem;
	}
}


/* Brands banner (homepage, under Featured Products): one brand at a time. */
.ss-brands {
	position: relative;
	overflow: hidden;
	border-radius: var(--ss-radius);
	/* Static snowflakes in a lighter tint of the green (a repeating tile). */
	background:
		radial-gradient(circle at 85% 20%, rgb(216 179 106 / 0.25), transparent 45%),
		url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='180'%20viewBox='0%200%20220%20180'%20fill='none'%20stroke-width='1.5'%20stroke-linecap='round'%3E%3Cg%20transform='translate%2818%2016%29%20rotate%280%2012%2012%29%20scale%282.4%29'%20stroke='%231d6b4f'%3E%3Cpath%20d='M12%202v20M3.3%207l17.4%2010M3.3%2017L20.7%207M12%205l-2-2M12%205l2-2M12%2019l-2%202M12%2019l2%202M5.9%208.5l-2.7.8M5.9%208.5l-.8-2.7M18.1%2015.5l2.7-.8M18.1%2015.5l.8%202.7M5.9%2015.5l-.8%202.7M5.9%2015.5l-2.7-.8M18.1%208.5l.8-2.7M18.1%208.5l2.7.8'/%3E%3C/g%3E%3Cg%20transform='translate%28150%2030%29%20rotate%2820%2012%2012%29%20scale%281.1%29'%20stroke='%23175c43'%3E%3Cpath%20d='M12%202v20M3.3%207l17.4%2010M3.3%2017L20.7%207M12%205l-2-2M12%205l2-2M12%2019l-2%202M12%2019l2%202M5.9%208.5l-2.7.8M5.9%208.5l-.8-2.7M18.1%2015.5l2.7-.8M18.1%2015.5l.8%202.7M5.9%2015.5l-.8%202.7M5.9%2015.5l-2.7-.8M18.1%208.5l.8-2.7M18.1%208.5l2.7.8'/%3E%3C/g%3E%3Cg%20transform='translate%28105%20105%29%20rotate%2810%2012%2012%29%20scale%281.7%29'%20stroke='%231a6449'%3E%3Cpath%20d='M12%202v20M3.3%207l17.4%2010M3.3%2017L20.7%207M12%205l-2-2M12%205l2-2M12%2019l-2%202M12%2019l2%202M5.9%208.5l-2.7.8M5.9%208.5l-.8-2.7M18.1%2015.5l2.7-.8M18.1%2015.5l.8%202.7M5.9%2015.5l-.8%202.7M5.9%2015.5l-2.7-.8M18.1%208.5l.8-2.7M18.1%208.5l2.7.8'/%3E%3C/g%3E%3Cg%20transform='translate%2820%20130%29%20rotate%2830%2012%2012%29%20scale%280.9%29'%20stroke='%23175c43'%3E%3Cpath%20d='M12%202v20M3.3%207l17.4%2010M3.3%2017L20.7%207M12%205l-2-2M12%205l2-2M12%2019l-2%202M12%2019l2%202M5.9%208.5l-2.7.8M5.9%208.5l-.8-2.7M18.1%2015.5l2.7-.8M18.1%2015.5l.8%202.7M5.9%2015.5l-.8%202.7M5.9%2015.5l-2.7-.8M18.1%208.5l.8-2.7M18.1%208.5l2.7.8'/%3E%3C/g%3E%3Cg%20transform='translate%28185%20130%29%20rotate%280%2012%2012%29%20scale%281.3%29'%20stroke='%231d6b4f'%3E%3Cpath%20d='M12%202v20M3.3%207l17.4%2010M3.3%2017L20.7%207M12%205l-2-2M12%205l2-2M12%2019l-2%202M12%2019l2%202M5.9%208.5l-2.7.8M5.9%208.5l-.8-2.7M18.1%2015.5l2.7-.8M18.1%2015.5l.8%202.7M5.9%2015.5l-.8%202.7M5.9%2015.5l-2.7-.8M18.1%208.5l.8-2.7M18.1%208.5l2.7.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 180px repeat,
		var(--ss-green);
	color: var(--ss-white);
}

.ss-brands__track {
	display: grid;
}

.ss-brands__slide {
	display: grid;
	grid-area: 1 / 1;
	gap: 16px;
	align-items: center;
	padding: 24px 20px 44px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s;
}

.ss-brands__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.ss-brands .ss-brands__eyebrow {
	margin: 0 0 6px;
	color: var(--ss-gold);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ss-brands .ss-brands__name {
	margin: 0;
	color: var(--ss-white);
	font-family: var(--ss-serif);
	font-size: clamp(2.3rem, 5vw, 3.6rem);
	line-height: 1.05;
}

.ss-brands .ss-brands__name + .ss-brands__btn {
	margin-top: 16px;
}

.ss-brands .ss-brands__btn {
	background: var(--ss-gold);
	color: var(--ss-green);
}

.ss-brands .ss-brands__btn:hover {
	background: var(--ss-white);
	color: var(--ss-green);
}

.ss-brands__pics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.ss-brands__pic {
	overflow: hidden;
	border-radius: 8px;
	background: var(--ss-white);
	aspect-ratio: 1;
}

.ss-brands__pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ss-brands__dots {
	position: absolute;
	right: 0;
	bottom: 14px;
	left: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.ss-brands__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.4);
	cursor: pointer;
}

.ss-brands__dot.is-active {
	background: var(--ss-gold);
}

.ss-brands__dot:focus-visible {
	outline: 2px solid var(--ss-white);
	outline-offset: 2px;
}

@media (min-width: 768px) {

	.ss-brands__slide {
		grid-template-columns: 1fr 1.3fr;
		gap: 32px;
		padding: 28px 40px 44px;
	}

	.ss-brands__pics {
		gap: 14px;
	}
}


/* ========================================================================
   11. PRODUCT CARDS (homepage grid, shop and category pages)
   ======================================================================== */

.site-main ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 12px;
	margin: 0 0 32px;
}

.site-main ul.products::before,
.site-main ul.products::after {
	display: none; /* Storefront's float clearfix would become grid items. */
}

.site-main ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	text-align: left;
	/* The grid sizes the cards. Storefront sets percentage widths, floats and
	   margins per column count and page template; !important retires them all. */
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.site-main ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: var(--ss-ink);
	text-decoration: none;
}

.site-main ul.products li.product img {
	width: 100%;
	aspect-ratio: 1;
	margin: 0 0 12px;
	border-radius: var(--ss-radius);
	background: var(--ss-cream);
	object-fit: cover;
}

.site-main ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	margin: 0 0 6px;
	padding: 0;
	overflow: hidden;
	color: var(--ss-ink);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.site-main ul.products li.product .price {
	margin: auto 0 12px;
	color: var(--ss-ink);
	font-size: 1.15rem;
	font-weight: 700;
}

.site-main ul.products li.product .price del {
	margin-right: 6px;
	color: var(--ss-ink-soft);
	font-size: 0.9rem;
	font-weight: 400;
	opacity: 1;
}

.site-main ul.products li.product .price ins {
	color: var(--ss-red);
	font-weight: 700;
	text-decoration: none;
}

.site-main ul.products li.product .button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 11px 12px;
	border-radius: 6px;
	background: var(--ss-red);
	color: var(--ss-white);
	font-size: 0.95rem;
	font-weight: 700;
	text-align: center;
}

.site-main ul.products li.product .button:hover {
	background: var(--ss-red-dark);
	color: var(--ss-white);
}

.site-main ul.products li.product .added_to_cart {
	display: block;
	margin-top: 6px;
	color: var(--ss-green);
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
}

/* Sale badge over the image */
.site-main ul.products li.product .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	margin: 0;
	padding: 3px 10px;
	border: 0;
	border-radius: 4px;
	background: var(--ss-red);
	color: var(--ss-white);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* Wishlist heart over the image (TI WooCommerce Wishlist) */
.ss-card-wishlist {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
}

.ss-card-wishlist .tinv-wraper {
	margin: 0;
}

.ss-card-wishlist .tinvwl_add_to_wishlist_button {
	/* !important: the plugin sizes this with very specific selectors. */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	margin: 0 !important;
	vertical-align: top !important;
	border-radius: 50%;
	background: var(--ss-white);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
	color: var(--ss-red) !important;
	cursor: pointer;
}

.ss-card-wishlist .tinvwl_add_to_wishlist_button::before {
	position: static !important;
	margin: 0 !important;
	font-size: 18px !important;
}

.ss-card-wishlist .tinvwl_add_to_wishlist_button:hover,
.ss-card-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	background: var(--ss-red);
	color: var(--ss-white) !important;
}

.ss-card-wishlist .tinvwl_add_to_wishlist_button:focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: 2px;
}

/* The plugin's hover tooltip duplicates the button's own label. */
.ss-card-wishlist .tinvwl-tooltip {
	display: none !important;
}

/* One badge per card: Sale, Best Seller, New In or Sold out. */
.ss-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--ss-red);
	color: var(--ss-white);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.3;
}

.ss-badge--new {
	background: var(--ss-green);
}

.ss-badge--soldout {
	background: var(--ss-ink-soft);
}

/* Gold stars with review count */
.ss-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
}

.site-main ul.products li.product .ss-rating .star-rating,
.ss-rec .ss-rating .star-rating {
	margin: 0;
	font-size: 0.85rem;
	color: var(--ss-gold);
}

.ss-rating .star-rating::before {
	color: #e3d6b6;
}

.site-main ul.products li.product .ss-rating .star-rating span::before,
.ss-rec .ss-rating .star-rating span::before {
	color: var(--ss-gold);
}

.ss-rating__count {
	color: var(--ss-ink-soft);
	font-size: 0.8rem;
}

/* Basket icon on "Add to basket" buttons */
.site-main ul.products li.product .add_to_cart_button::before {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-right: 6px;
	vertical-align: -0.2em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8Z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8Z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Out of stock / "Read more" and "Select options" buttons stay secondary. */
.site-main ul.products li.product .button:not(.add_to_cart_button) {
	background: var(--ss-white);
	color: var(--ss-ink);
	box-shadow: inset 0 0 0 1px #c9c4bc;
}

.site-main ul.products li.product .button.product_type_variable,
.site-main ul.products li.product .button.product_type_grouped {
	background: var(--ss-red);
	color: var(--ss-white);
	box-shadow: none;
}

@media (max-width: 359px) {
	.site-main ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 768px) {

	.site-main ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 20px;
	}

	.site-main ul.products li.product .woocommerce-loop-product__title {
		font-size: 1rem;
	}
}

@media (min-width: 768px) {

	/* Four-across grids stay four across on tablets, avoiding a lone last card. */
	.site-main ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 28px 14px;
	}
}

@media (min-width: 1024px) {

	.site-main ul.products.columns-4 {
		gap: 32px 20px;
	}

	.site-main ul.products.columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}


/* ========================================================================
   12. TRUST STRIP
   ======================================================================== */

.ss-trust {
	margin-bottom: var(--ss-section-gap);
	background: var(--ss-cream);
}

.ss-trust__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 16px;
	margin: 0 auto;
	padding-top: 24px;
	padding-bottom: 24px;
	list-style: none;
}

.ss-trust__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--ss-ink-soft);
	font-size: 0.9rem;
	line-height: 1.35;
}

.ss-trust__item strong {
	display: block;
	color: var(--ss-ink);
	font-size: 0.95rem;
}

.ss-trust .ss-trust__icon {
	width: 36px;
	height: 36px;
	color: var(--ss-green);
}

@media (min-width: 1024px) {
	.ss-trust__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding-top: 28px;
		padding-bottom: 28px;
	}

	.ss-trust__item {
		justify-content: center;
	}
}


/* ========================================================================
   13. NEWSLETTER (above the footer, every page)
   ======================================================================== */

.ss-newsletter {
	background:
		radial-gradient(circle at 15% 30%, rgb(255 255 255 / 0.08) 0 2px, transparent 3px) 0 0 / 48px 48px,
		radial-gradient(circle at 70% 70%, rgb(255 255 255 / 0.06) 0 1.5px, transparent 2.5px) 0 0 / 36px 36px,
		var(--ss-red);
	color: var(--ss-white);
}

.ss-newsletter__inner {
	display: grid;
	gap: 16px;
	padding-top: 32px;
	padding-bottom: 32px;
}

.ss-newsletter .ss-newsletter__title {
	margin: 0 0 6px;
	color: var(--ss-white);
	font-family: var(--ss-serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
}

.ss-newsletter p {
	margin: 0;
}

/* Prize draw: a gold badge above the heading and small print below. */
.ss-newsletter .ss-newsletter__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--ss-gold);
	color: var(--ss-green);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.ss-newsletter__badge svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.ss-newsletter .ss-newsletter__small {
	margin-top: 10px;
	font-size: 0.8rem;
	opacity: 0.85;
}

.ss-newsletter__small a {
	color: inherit;
	text-decoration: underline;
}

/* Klaviyo form: match the site's font and keep its text readable on red.
   !important because Klaviyo writes its styles inline. */
.ss-newsletter__form [class*="klaviyo-form-"] *,
.ss-newsletter__form [class*="klaviyo-form-"] input::placeholder {
	font-family: var(--ss-sans) !important;
}

.ss-newsletter__form [class*="klaviyo-form-"] p,
.ss-newsletter__form [class*="klaviyo-form-"] span:not(button span),
.ss-newsletter__form [class*="klaviyo-form-"] div[data-testid="form-component"] {
	color: var(--ss-white) !important;
}

.ss-newsletter__form [class*="klaviyo-form-"] form {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.ss-newsletter__todo {
	padding: 12px 16px;
	border: 2px dashed rgb(255 255 255 / 0.6);
	border-radius: var(--ss-radius);
	font-size: 0.9rem;
}

@media (min-width: 1024px) {
	.ss-newsletter__inner {
		grid-template-columns: 1fr minmax(320px, 480px);
		align-items: center;
		gap: 48px;
		padding-top: 40px;
		padding-bottom: 40px;
	}
}


/* ========================================================================
   14. FOOTER
   ======================================================================== */

.site-footer {
	padding: 0;
	background: var(--ss-green-dark) !important;
	color: rgb(255 255 255 / 0.85) !important;
}

.ss-footer {
	display: grid;
	gap: 32px;
	padding: 40px 0 32px;
}

.site-footer .ss-footer__title {
	margin: 0 0 12px;
	color: var(--ss-white);
	font-family: var(--ss-sans);
	font-size: 1.05rem;
	font-weight: 700;
}

.ss-footer p {
	margin: 0 0 16px;
	font-size: 0.95rem;
	line-height: 1.6;
}

.ss-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ss-footer__links li {
	margin: 0 0 8px;
}

.site-footer .ss-footer a:not(.button) {
	color: rgb(255 255 255 / 0.85);
	text-decoration: none;
}

.site-footer .ss-footer a:not(.button):hover {
	color: var(--ss-gold);
	text-decoration: underline;
}

.ss-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.ss-footer__contact .ss-icon {
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: var(--ss-gold);
}

.ss-footer__social {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ss-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgb(255 255 255 / 0.3);
	border-radius: 50%;
}

.ss-footer__social .ss-icon {
	width: 20px;
	height: 20px;
}

.ss-footer__bottom {
	padding: 16px 0 24px;
	border-top: 1px solid rgb(255 255 255 / 0.15);
	font-size: 0.85rem;
}

.ss-footer__bottom p {
	margin: 0;
}

@media (min-width: 768px) {
	.ss-footer {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ss-footer {
		grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
		gap: 40px;
		padding-top: 56px;
	}
}


/* ========================================================================
   15. PAGE TITLES
   ========================================================================
   Storefront's page title header is hidden on normal pages (Santa Store
   pages provide their own headings). Product titles stay visible.
   ======================================================================== */

.page .entry-header,
.page .entry-title {
	display: none !important;
}

.page .site-main,
.page .content-area,
.page .hentry,
.page .entry-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.single-product .entry-header,
.single-product .entry-title {
	display: block !important;
}

/* Legal pages: show the title, readable line length, clear table. */
.ss-legal .entry-header,
.ss-legal .entry-title {
	display: block !important;
}

.ss-legal .hentry {
	max-width: 780px;
	margin: 0 auto;
}

.ss-legal .entry-title {
	margin: 8px 0 4px;
	color: var(--ss-ink);
	font-family: var(--ss-serif);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 700;
}

.ss-legal .entry-content {
	color: var(--ss-ink-soft);
	font-size: 1rem;
	line-height: 1.7;
}

.ss-legal .entry-content h2 {
	margin: 2em 0 0.5em;
	color: var(--ss-ink);
	font-family: var(--ss-sans);
	font-size: 1.3rem;
	font-weight: 700;
}

.ss-legal .entry-content table {
	font-size: 0.95rem;
}

.ss-legal .entry-content th {
	background: var(--ss-cream);
	color: var(--ss-ink);
}

.ss-legal .entry-content pre {
	white-space: pre-wrap;
	background: var(--ss-cream);
	font-size: 0.9rem;
}

.ss-legal .entry-content a {
	color: var(--ss-red);
	text-decoration: underline;
}

.ss-legal .entry-content a:hover {
	color: var(--ss-red-dark);
}

/* FAQ questions (core Details block) as tidy expandable panels. */
.ss-legal .wp-block-details {
	margin: 0 0 10px;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	background: var(--ss-white);
}

.ss-legal .wp-block-details summary {
	position: relative;
	padding: 14px 48px 14px 16px;
	color: var(--ss-ink);
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.ss-legal .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.ss-legal .wp-block-details summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 18px;
	color: var(--ss-red);
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-50%);
}

.ss-legal .wp-block-details[open] summary::after {
	content: "\2212";
}

.ss-legal .wp-block-details summary:focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: 2px;
}

.ss-legal .wp-block-details > p {
	margin: 0;
	padding: 0 16px 16px;
}

/* Breathing room between the header and normal page content. */
body:not(.page-template-template-homepage) #content {
	padding-top: 24px;
}


/* ========================================================================
   16. UTILITY BAR — thin white strip above the header
   ======================================================================== */

.ss-utility {
	display: none;
	border-bottom: 1px solid var(--ss-line);
	font-size: 13px;
}

.ss-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 34px;
}

.ss-utility__links,
.ss-utility__social {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ss-utility__links li,
.ss-utility__social li {
	margin: 0;
}

.site-header .ss-utility a {
	color: var(--ss-ink-soft);
	text-decoration: none;
}

.site-header .ss-utility a:hover {
	color: var(--ss-red);
	text-decoration: underline;
}

.ss-utility__aside {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--ss-ink-soft);
}

.ss-utility__social {
	gap: 4px;
}

.ss-utility__social a {
	display: inline-flex;
	padding: 4px;
}

.ss-utility__social .ss-icon {
	width: 18px;
	height: 18px;
}

@media (min-width: 1024px) {
	.ss-utility {
		display: block;
	}
}


/* ========================================================================
   17. LISTING PAGES — shop, categories and product search
   ========================================================================

   Desktop (1024px+): banner / [filters sidebar | toolbar, pills, grid]
   Smaller: banner / toolbar with Filter + Sort buttons / pills / grid,
   filters open in a drawer.

   ======================================================================== */

.ss-listing .content-area {
	float: none;
	width: auto;
	margin: 0;
}

/* Banner sits flush under the ticker (beats the general page spacing rule). */
body.ss-listing:not(.page-template-template-homepage) #content {
	padding-top: 0;
}

.ss-listing #content > .col-full {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 32px;
}

.ss-listing .ss-banner,
.ss-listing .ss-search-head,
.ss-listing #content > .col-full > .woocommerce {
	grid-column: 1 / -1;
}

.ss-listing .site-main {
	margin-bottom: 40px;
}

/* 17.1 Banner ----------------------------------------------------------- */

.ss-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 170px;
	margin-bottom: 0;
	overflow: hidden;
	background: linear-gradient(120deg, var(--ss-red-dark), var(--ss-green-dark));
	color: var(--ss-white);
	isolation: isolate;
}

.ss-banner__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% center;
}

.ss-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to right, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.45) 55%, rgb(0 0 0 / 0.15));
}

.ss-banner__content {
	width: 100%;
	padding-top: 24px;
	padding-bottom: 24px;
}

.ss-banner .ss-banner__title {
	margin: 0;
	color: var(--ss-white);
	font-family: var(--ss-serif);
	font-size: clamp(1.8rem, 4.5vw, 3.2rem);
	font-weight: 700;
	line-height: 1.1;
	text-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
}

.ss-banner__text {
	display: none;
	max-width: 40em;
	margin: 10px 0 0;
	font-size: 1.05rem;
	line-height: 1.5;
}

.ss-banner__count {
	margin: 6px 0 0;
	font-size: 1rem;
	font-weight: 600;
}

@media (min-width: 768px) {

	.ss-banner {
		min-height: 210px;
	}

	.ss-banner__text {
		display: block;
	}

	/* On larger screens the toolbar shows the count beside the title. */
	.ss-banner__count {
		display: none;
	}
}

/* Search results: compact heading, no category imagery */
.ss-search-head {
	padding: 20px 0 4px;
	border-bottom: 1px solid var(--ss-line);
	background: var(--ss-cream);
}

.ss-search-head .ss-search-head__title {
	margin: 0;
	color: var(--ss-ink);
	font-family: var(--ss-serif);
	font-size: clamp(1.5rem, 3.5vw, 2.2rem);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.ss-search-head__count {
	margin: 4px 0 12px;
	color: var(--ss-ink-soft);
}

/* 17.2 Toolbar: breadcrumb, title, sort, view toggle -------------------- */

.ss-toolbar {
	margin-bottom: 20px;
}

.ss-toolbar .woocommerce-breadcrumb {
	margin: 0;
	padding: 14px 0 10px;
	border: 0;
	color: var(--ss-ink-soft);
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

.ss-crumb-sep {
	margin: 0 8px;
}

.ss-toolbar .woocommerce-breadcrumb a {
	color: var(--ss-ink-soft);
	text-decoration: none;
}

.ss-toolbar .woocommerce-breadcrumb a:hover {
	color: var(--ss-red);
	text-decoration: underline;
}

.ss-toolbar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-bottom: 16px;
}

.ss-toolbar .ss-toolbar__title {
	display: none;
	margin: 0;
	color: var(--ss-ink);
	font-family: var(--ss-serif);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 700;
}

.ss-toolbar__count {
	color: var(--ss-ink-soft);
	font-family: var(--ss-sans);
	font-size: 0.75em;
	font-weight: 400;
}

.ss-toolbar__controls {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	width: 100%;
}

.ss-toolbar__filter {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid #c9c4bc;
	border-radius: 6px;
	background: var(--ss-white);
	color: var(--ss-ink);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.ss-toolbar__filter .ss-icon {
	width: 20px;
	height: 20px;
}

.ss-toolbar__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ss-red);
}

.ss-toolbar__sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ss-toolbar__sort-label {
	display: none;
	color: var(--ss-ink-soft);
	white-space: nowrap;
}

.ss-toolbar .woocommerce-ordering {
	flex: 1;
	margin: 0;
}

.ss-toolbar .woocommerce-ordering select {
	width: 100%;
	min-height: 48px;
	padding: 0 40px 0 14px;
	border: 1px solid #c9c4bc;
	border-radius: 6px;
	background: var(--ss-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat;
	color: var(--ss-ink);
	font-size: 1rem;
	font-weight: 600;
	appearance: none;
	cursor: pointer;
}

.ss-view {
	display: none;
	gap: 6px;
}

.ss-view__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #c9c4bc;
	border-radius: 6px;
	background: var(--ss-white);
	color: var(--ss-ink);
	cursor: pointer;
}

.ss-view__btn[aria-pressed="true"] {
	border-color: var(--ss-red);
	background: var(--ss-red);
	color: var(--ss-white);
}

.ss-view__btn .ss-icon {
	width: 20px;
	height: 20px;
}

/* 17.3 Subcategory pills (scroll sideways when they don't fit) --------- */

.ss-pills__list {
	display: flex;
	gap: 8px;
	margin: 0 calc(-1 * var(--ss-gutter));
	padding: 2px var(--ss-gutter) 8px;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: thin;
}

.ss-pills__list li {
	flex: none;
	margin: 0;
}

.ss-pill {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid #d6d1c8;
	border-radius: 999px;
	background: var(--ss-white);
	color: var(--ss-ink);
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.ss-pill:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
}

.ss-pill.is-current {
	border-color: var(--ss-red);
	background: var(--ss-red);
	color: var(--ss-white);
}

.ss-pill:focus-visible,
.ss-toolbar :focus-visible,
.ss-filter-form :focus-visible,
.ss-listing__foot :focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: 2px;
}

@media (min-width: 1024px) {

	.ss-pills__list {
		margin: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

/* 17.4 Filters: desktop sidebar and mobile/tablet drawer ---------------- */

.ss-filters {
	display: none;
}

.ss-filter-form {
	color: var(--ss-ink);
}

.ss-filter-form__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ss-filter-form .ss-filter-form__title {
	margin: 0;
	font-family: var(--ss-sans);
	font-size: 1.2rem;
	font-weight: 700;
}

.ss-filter-form__clear {
	margin-left: auto;
	color: var(--ss-red);
	font-weight: 600;
	text-decoration: none;
}

.ss-filter-form__clear:hover {
	text-decoration: underline;
}

.ss-filter {
	border-bottom: 1px solid var(--ss-line);
}

.ss-filter__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.ss-filter__title::-webkit-details-marker {
	display: none;
}

.ss-filter__chev {
	width: 20px;
	height: 20px;
	transition: transform 0.2s;
}

.ss-filter[open] .ss-filter__chev {
	transform: rotate(180deg);
}

.ss-filter__set {
	margin: 0;
	padding: 0 0 14px;
	border: 0;
	background: none; /* Storefront shades fieldsets */
}

.ss-filter__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ss-filter__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 3px 0;
}

/* Collapsed lists show the first five (JavaScript adds .is-collapsible). */
.ss-filter__list.is-collapsible:not(.is-expanded) li:nth-child(n+6) {
	display: none;
}

.ss-filter__list input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ss-red);
	cursor: pointer;
}

.ss-filter__list label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ss-ink);
	font-size: 0.95rem;
	cursor: pointer;
}

.ss-filter__count {
	color: var(--ss-ink-soft);
	font-size: 0.85rem;
}

.ss-swatch {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.2);
}

.ss-filter__more {
	margin-top: 6px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--ss-red);
	font-weight: 600;
	cursor: pointer;
}

.ss-filter__more[hidden] {
	display: none;
}

/* Price slider: two range inputs sharing one track */
.ss-price__track {
	position: relative;
	height: 32px;
}

.ss-price__track::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 9px;
	left: 9px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--ss-line) var(--lo, 0%), var(--ss-red) var(--lo, 0%), var(--ss-red) var(--hi, 100%), var(--ss-line) var(--hi, 100%));
}

.ss-price__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 32px;
	margin: 0;
	background: none;
	pointer-events: none;
	appearance: none;
}

.ss-price__range::-webkit-slider-thumb {
	width: 20px;
	height: 20px;
	border: 3px solid var(--ss-white);
	border-radius: 50%;
	background: var(--ss-red);
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
	pointer-events: auto;
	cursor: pointer;
	appearance: none;
}

.ss-price__range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 3px solid var(--ss-white);
	border-radius: 50%;
	background: var(--ss-red);
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
	pointer-events: auto;
	cursor: pointer;
}

.ss-price__range:focus-visible::-webkit-slider-thumb {
	outline: 3px solid var(--ss-gold);
	outline-offset: 2px;
}

.ss-price__values {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
}

.ss-filter-form__foot {
	display: flex;
	gap: 10px;
	padding-top: 16px;
}

.ss-filter-form__foot .ss-btn {
	flex: 1;
}

/* With JavaScript the sidebar applies changes straight away. */
.ss-filters.is-live [data-ss-filter-submit] {
	display: none;
}

/* Drawer version */
.ss-drawer--filters {
	inset: 0 0 0 auto;
	width: min(400px, 92vw);
}

.ss-drawer--filters .ss-filter-form {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ss-drawer--filters .ss-filter-form__head {
	padding: 8px 8px 8px 20px;
	border-bottom: 1px solid var(--ss-line);
}

.ss-drawer--filters .ss-filter-form__body {
	flex: 1;
	padding: 0 20px;
	overflow-y: auto;
}

.ss-drawer--filters .ss-filter-form__foot {
	padding: 12px 20px;
	border-top: 1px solid var(--ss-line);
	background: var(--ss-white);
}

.ss-drawer--filters[open] {
	animation-name: ss-drawer-in-right;
}

@keyframes ss-drawer-in-right {
	from {
		transform: translateX(100%);
	}
}

/* 17.5 List view -------------------------------------------------------- */

@media (min-width: 768px) {

	/* Selector outranks the column-count rules for each screen size. */
	.ss-listing .site-main ul.products[class*="columns-"].is-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.site-main ul.products.is-list li.product {
		display: grid;
		grid-template-columns: 180px minmax(0, 1fr) 200px;
		align-items: center;
		gap: 0 24px;
		padding-bottom: 16px;
		border-bottom: 1px solid var(--ss-line);
	}

	.site-main ul.products.is-list li.product .woocommerce-LoopProduct-link {
		display: contents;
	}

	.site-main ul.products.is-list li.product img {
		grid-column: 1;
		grid-row: 1 / span 3;
		margin: 0;
	}

	.site-main ul.products.is-list li.product .woocommerce-loop-product__title,
	.site-main ul.products.is-list li.product .ss-rating,
	.site-main ul.products.is-list li.product .price {
		grid-column: 2;
		margin: 0;
	}

	.site-main ul.products.is-list li.product .woocommerce-loop-product__title {
		align-self: end;
		font-size: 1.1rem;
		-webkit-line-clamp: 3;
	}

	.site-main ul.products.is-list li.product .price {
		align-self: start;
		margin-top: 6px;
	}

	.site-main ul.products.is-list li.product .button,
	.site-main ul.products.is-list li.product .added_to_cart {
		grid-column: 3;
		grid-row: 1 / span 3;
		align-self: center;
	}

	.site-main ul.products.is-list .ss-card-wishlist {
		left: 136px;
		right: auto;
	}
}

/* 17.6 Count and pagination -------------------------------------------- */

.ss-listing__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 8px;
}

.ss-listing__foot .woocommerce-result-count {
	margin: 0;
	color: var(--ss-ink-soft);
	font-size: 0.95rem;
}

.ss-listing__foot .woocommerce-pagination {
	margin: 0;
}

.ss-listing__foot .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.ss-listing__foot .page-numbers li {
	margin: 0;
	border: 0;
}

.ss-listing__foot .page-numbers a,
.ss-listing__foot .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 8px;
	border: 1px solid #d6d1c8;
	border-radius: 6px;
	background: var(--ss-white);
	color: var(--ss-ink);
	font-weight: 600;
	text-decoration: none;
}

.ss-listing__foot .page-numbers .current {
	border-color: var(--ss-red);
	background: var(--ss-red);
	color: var(--ss-white);
}

.ss-listing__foot .page-numbers .dots {
	border: 0;
	background: none;
}

.ss-listing__foot .page-numbers a:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
}

.ss-listing__foot .page-numbers .ss-icon {
	width: 18px;
	height: 18px;
}

@media (min-width: 768px) {

	.ss-listing__foot {
		position: relative;
		flex-direction: row;
		justify-content: center;
		min-height: 44px;
	}

	.ss-listing__foot .woocommerce-result-count {
		position: absolute;
		left: 0;
	}
}

/* 17.7 Empty state ------------------------------------------------------ */

.ss-empty {
	max-width: 620px;
	margin: 24px auto 48px;
	padding: 32px 24px;
	border-radius: var(--ss-radius);
	background: var(--ss-cream);
	text-align: center;
}

.ss-empty__title {
	margin: 0 0 6px;
	color: var(--ss-ink);
	font-family: var(--ss-serif);
	font-size: 1.5rem;
	font-weight: 700;
}

.ss-empty .ss-search {
	max-width: 440px;
	margin: 20px auto;
}

.ss-empty__cats {
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	overflow: visible;
}

/* 17.8 Desktop: permanent sidebar -------------------------------------- */

@media (min-width: 768px) {

	.ss-toolbar .ss-toolbar__title {
		display: block;
	}

	.ss-toolbar__controls {
		display: flex;
		align-items: center;
		width: auto;
	}

	.ss-toolbar__sort-label {
		display: inline;
	}

	.ss-toolbar .woocommerce-ordering select {
		min-height: 44px;
		min-width: 210px;
	}

	.ss-toolbar__filter {
		min-height: 44px;
	}

	.ss-view:not([hidden]) {
		display: flex;
	}
}

@media (min-width: 1024px) {

	.ss-listing #content > .col-full {
		grid-template-columns: 250px minmax(0, 1fr);
	}

	.ss-filters {
		display: block;
		grid-column: 1;
		align-self: start;
		margin: 16px 0 40px;
		padding: 18px 18px 6px;
		border-radius: var(--ss-radius);
		background: var(--ss-cream);
	}

	.ss-filters .ss-filter:last-child {
		border-bottom: 0;
	}

	.ss-toolbar__filter {
		display: none;
	}

	/* Three across alongside the sidebar on standard desktops, four on large. */
	.ss-listing .site-main ul.products.columns-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {

	.ss-listing .site-main ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* No sidebar (e.g. an empty search): the listing uses the full width. */
.ss-listing #content > .col-full:not(:has(.ss-filters)) {
	grid-template-columns: minmax(0, 1fr);
}


/* 17.9 Page not found (404.php) --------------------------------------- */

.error404 .content-area {
	float: none;
	width: auto;
	margin: 0;
}

.error404 .storefront-breadcrumb {
	margin-bottom: 0;
}

.ss-404 {
	max-width: 720px;
	margin: 8px auto 48px;
	padding: 40px 24px;
	border-radius: var(--ss-radius);
	background: var(--ss-cream);
	text-align: center;
}

.ss-404__eyebrow {
	margin: 0 0 6px;
	color: var(--ss-red);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ss-404 .ss-404__title {
	margin: 0 0 10px;
	color: var(--ss-ink);
	font-family: var(--ss-serif);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.15;
}

.ss-404__text {
	margin: 0 auto 20px;
	max-width: 32em;
	color: var(--ss-ink-soft);
}

.ss-404 .ss-search {
	max-width: 480px;
	margin: 0 auto 20px;
}

.ss-404__cats {
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 24px;
	padding: 0;
	overflow: visible;
}


/* ========================================================================
   18. COOKIE CONSENT BANNER (Complianz) — brand colours via its variables.
   "Deny" stays as prominent as "Accept" (ICO guidance).
   ======================================================================== */

body .cmplz-cookiebanner {
	--cmplz_banner_border_radius: var(--ss-radius);
	--cmplz_text_color: var(--ss-ink);
	--cmplz_hyperlink_color: var(--ss-red);
	--cmplz_text_font_size: 14px;
	--cmplz_link_font_size: 14px;
	--cmplz_title_font_size: 17px;
	--cmplz_button_font_size: 15px;
	--cmplz_button_border_radius: 6px;
	--cmplz_button_accept_background_color: var(--ss-red);
	--cmplz_button_accept_border_color: var(--ss-red);
	--cmplz_button_accept_text_color: var(--ss-white);
	--cmplz_button_deny_background_color: var(--ss-white);
	--cmplz_button_deny_border_color: var(--ss-ink);
	--cmplz_button_deny_text_color: var(--ss-ink);
	--cmplz_button_settings_background_color: var(--ss-white);
	--cmplz_button_settings_border_color: #c9c4bc;
	--cmplz_button_settings_text_color: var(--ss-ink);
	--cmplz_slider_active_color: var(--ss-green);
	--cmplz_category_header_always_active_color: var(--ss-green);
	box-shadow: var(--ss-shadow);
	font-family: var(--ss-sans);
}

body .cmplz-cookiebanner .cmplz-title {
	font-family: var(--ss-serif);
	font-weight: 700;
}

body .cmplz-cookiebanner .cmplz-btn {
	min-height: 44px;
	font-weight: 700;
}

body .cmplz-cookiebanner .cmplz-btn:focus-visible,
body .cmplz-cookiebanner a:focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: 2px;
}

/* Newsletter form waiting for marketing consent: a simple branded prompt
   instead of Complianz's grey placeholder picture. */
.ss-newsletter .cmplz-blocked-content-container.ss-newsletter__form {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto !important; /* Complianz sizes it for its picture */
	min-height: 110px;
	max-width: none;
	border: 2px dashed rgb(255 255 255 / 0.5);
	border-radius: var(--ss-radius);
	background: none !important;
}

.ss-newsletter .cmplz-blocked-content-notice {
	position: static !important;
	max-width: 320px;
	transform: none !important;
	padding: 12px 18px !important;
	border-radius: 6px;
	background: var(--ss-white) !important;
	color: var(--ss-red) !important;
	font-family: var(--ss-sans);
	font-size: 0.95rem !important;
	font-weight: 700;
	line-height: 1.35 !important;
	cursor: pointer;
}

/* Phones and tablets: sit above the app-style tab bar. */
@media (max-width: 1023px) {

	body .cmplz-cookiebanner {
		bottom: calc(58px + env(safe-area-inset-bottom)) !important;
	}

	body #cmplz-manage-consent .cmplz-manage-consent {
		bottom: calc(58px + env(safe-area-inset-bottom));
	}
}


/* ========================================================================
   19. PRODUCT PAGE
   ========================================================================

   Desktop: [ gallery | buy box ] then [ related | tabs ] (a grid on
   WooCommerce's div.product). Phones: gallery, buy box, tabs, related.

   ======================================================================== */

.ss-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

.single-product .content-area {
	float: none;
	width: auto;
	margin: 0;
}

.single-product .storefront-breadcrumb,
.woocommerce-cart .storefront-breadcrumb,
.woocommerce-checkout .storefront-breadcrumb {
	margin-bottom: 0;
	padding: 0;
}

.single-product .storefront-breadcrumb .woocommerce-breadcrumb,
.woocommerce-cart .storefront-breadcrumb .woocommerce-breadcrumb,
.woocommerce-checkout .storefront-breadcrumb .woocommerce-breadcrumb {
	margin: 0;
	padding: 12px 0;
	border: 0;
	color: var(--ss-ink-soft);
	font-size: 0.85rem;
}

.single-product .woocommerce-breadcrumb a,
.woocommerce-cart .woocommerce-breadcrumb a,
.woocommerce-checkout .woocommerce-breadcrumb a {
	color: var(--ss-ink-soft);
	text-decoration: none;
}

.single-product .woocommerce-breadcrumb a:hover,
.woocommerce-cart .woocommerce-breadcrumb a:hover,
.woocommerce-checkout .woocommerce-breadcrumb a:hover {
	color: var(--ss-red);
	text-decoration: underline;
}

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-bottom: 48px;
}

/* Storefront's float-clearing pseudo-elements would take grid cells. */
.single-product div.product::before,
.single-product div.product::after {
	display: none;
}

.single-product div.product > *,
.ss-product-media > * {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
}

/* 19.1 Gallery ----------------------------------------------------------- */

.single-product div.product .woocommerce-product-gallery {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	opacity: 1 !important; /* WooCommerce fades it in; no flash needed */
}

.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	overflow: hidden;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	background: var(--ss-white);
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a {
	display: block;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	margin: 0;
	object-fit: contain;
	background: var(--ss-white);
}

/* Zoom / lightbox trigger */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	top: 12px;
	right: 12px;
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ss-white);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}

/* Thumbnails: a row under the image on phones, a column beside it on desktop */
.single-product div.product .flex-control-thumbs {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0 0 4px;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: thin;
}

.single-product div.product .flex-control-thumbs li {
	flex: none;
	width: 64px !important;
	margin: 0 !important;
	float: none !important;
}

.single-product div.product .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1;
	border: 2px solid var(--ss-line);
	border-radius: 6px;
	background: var(--ss-white);
	object-fit: cover;
	opacity: 1;
	cursor: pointer;
	transition: border-color 0.15s;
}

.single-product div.product .flex-control-thumbs img:hover {
	border-color: #c9c4bc;
}

.single-product div.product .flex-control-thumbs img.flex-active {
	border-color: var(--ss-red);
}

/* Product card badge reused above the title */
.ss-badge--inline {
	position: static;
	display: inline-block;
	margin-bottom: 10px;
}

.ss-badge--personal {
	background: var(--ss-gold);
	color: var(--ss-ink);
}

/* 19.2 Buy box ----------------------------------------------------------- */

.single-product div.product .summary {
	padding: 0;
}

.single-product div.product .product_title {
	margin: 0 0 10px;
	color: var(--ss-ink);
	font-family: var(--ss-sans);
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.ss-buy-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 8px;
}

.ss-rating--link {
	text-decoration: none;
}

.single-product .ss-rating .star-rating {
	margin: 0;
	font-size: 1rem;
	color: var(--ss-gold);
}

.single-product .ss-rating .star-rating span::before {
	color: var(--ss-gold);
}

.ss-rating--link .ss-rating__count {
	color: var(--ss-ink-soft);
	font-size: 0.9rem;
}

.ss-rating--link:hover .ss-rating__count {
	color: var(--ss-red);
	text-decoration: underline;
}

.single-product div.product .ss-buy-price,
.single-product div.product .single_variation .price {
	margin: 6px 0 0;
	color: var(--ss-red);
	font-size: clamp(1.8rem, 3.4vw, 2.3rem);
	font-weight: 800;
	line-height: 1.1;
}

.single-product div.product .price del {
	margin-right: 10px;
	color: var(--ss-ink-soft);
	font-size: 0.55em;
	font-weight: 400;
	opacity: 1;
}

.single-product div.product .price ins {
	color: var(--ss-red);
	font-weight: 800;
	text-decoration: none;
}

.ss-buy-head__side {
	display: grid;
	justify-items: end;
	gap: 6px;
	padding-top: 4px;
	text-align: right;
}

.ss-stock,
.ss-dispatch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
}

.ss-stock .ss-icon,
.ss-dispatch .ss-icon {
	width: 18px;
	height: 18px;
}

.ss-stock--in {
	color: #1b7a3a;
}

.ss-stock--out {
	color: var(--ss-red);
}

.ss-stock--back {
	color: #9a6b00;
}

.ss-dispatch {
	color: var(--ss-ink-soft);
	font-weight: 400;
}

/* WooCommerce's own stock line for simple products (ours is above). */
.single-product div.product .summary > .stock {
	display: none;
}

.ss-buy-summary {
	margin: 4px 0 20px;
	color: var(--ss-ink-soft);
	font-size: 1.02rem;
	line-height: 1.6;
}

.ss-buy-summary p {
	margin: 0 0 0.6em;
}

.ss-buy-summary__more {
	color: var(--ss-red);
	font-weight: 600;
	white-space: nowrap;
}

/* Christmas last order date under the dispatch line. */
.ss-xmas-cutoff {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
	color: var(--ss-green);
	font-size: 0.9rem;
}

.ss-xmas-cutoff .ss-icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--ss-red);
}

.ss-xmas-cutoff.is-late {
	color: #8a5a00;
}

.ss-xmas-cutoff.is-late .ss-icon {
	color: #8a5a00;
}

/* 19.3 Options: swatches, size buttons, personalisation ----------------- */

.single-product div.product form.cart {
	margin: 0 0 20px;
	padding: 0;
}

.single-product div.product table.variations,
.single-product div.product table.variations tbody,
.single-product div.product table.variations tr,
.single-product div.product table.variations th,
.single-product div.product table.variations td {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.single-product div.product table.variations tr {
	margin-bottom: 16px;
}

.single-product div.product table.variations th.label,
.ss-option__label {
	display: inline-block;
	margin: 0 0 8px;
	color: var(--ss-ink);
	font-size: 1rem;
	font-weight: 700;
}

.single-product div.product table.variations th.label label::after {
	content: ":";
}

.ss-option__chosen {
	margin-left: 6px;
	color: var(--ss-ink-soft);
	font-weight: 400;
}

.ss-size-guide-link {
	margin-left: 12px;
	color: var(--ss-red);
	font-size: 0.9rem;
	font-weight: 600;
}

.ss-option-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ss-option {
	min-width: 72px;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid #c9c4bc;
	border-radius: 6px;
	background: var(--ss-white);
	color: var(--ss-ink);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ss-option:hover:not(:disabled) {
	border-color: var(--ss-ink);
}

.ss-option.is-selected {
	border-color: var(--ss-red);
	box-shadow: inset 0 0 0 1px var(--ss-red);
	color: var(--ss-red);
}

.ss-option:disabled {
	color: #a8a8ad;
	text-decoration: line-through;
	cursor: not-allowed;
}

.ss-option[hidden] {
	display: none;
}

.ss-option:focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: 2px;
}

.ss-option--swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: 44px;
	height: 44px;
	padding: 3px;
	border-radius: 50%;
}

.ss-option__swatch {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
}

.ss-option--swatch.is-selected {
	border-color: var(--ss-red);
	box-shadow: 0 0 0 2px var(--ss-red);
}

.ss-option--swatch:disabled {
	opacity: 0.35;
}

.single-product div.product .reset_variations {
	display: inline-block;
	margin-top: 4px;
	color: var(--ss-ink-soft);
	font-size: 0.85rem;
}

.single-product div.product .single_variation_wrap .woocommerce-variation {
	margin-bottom: 12px;
}

.single-product div.product .woocommerce-variation-availability .stock {
	margin: 4px 0 0;
	font-weight: 600;
}

.single-product div.product .woocommerce-variation-availability .in-stock {
	color: #1b7a3a;
}

.ss-personal {
	flex-basis: 100%;
	margin-bottom: 18px;
}

.ss-required {
	color: var(--ss-red);
}

.ss-optional {
	color: var(--ss-ink-soft);
	font-weight: 400;
}

.ss-personal__field {
	position: relative;
}

.ss-personal__field input {
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 130px 0 16px;
	border: 1px solid #c9c4bc;
	border-radius: 6px;
	background: var(--ss-white);
	box-shadow: none;
	color: var(--ss-ink);
	font-size: 1.1rem;
	font-weight: 600;
}

.ss-personal__field input:focus {
	border-color: var(--ss-green);
	outline: 2px solid var(--ss-green);
	outline-offset: 0;
}

.ss-personal__count {
	position: absolute;
	top: 50%;
	right: 14px;
	color: var(--ss-ink-soft);
	font-size: 0.85rem;
	transform: translateY(-50%);
	pointer-events: none;
}

.ss-personal__help {
	margin: 6px 0 0;
	color: var(--ss-ink-soft);
	font-size: 0.85rem;
}

/* Multi-line text (e.g. a watch-back engraving): counter sits underneath. */
.ss-personal__field textarea {
	display: block;
	width: 100%;
	min-height: 96px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid #c9c4bc;
	border-radius: 6px;
	background: var(--ss-white);
	box-shadow: none;
	color: var(--ss-ink);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.5;
	resize: vertical;
}

.ss-personal__field textarea:focus {
	border-color: var(--ss-green);
	outline: 2px solid var(--ss-green);
	outline-offset: 0;
}

.ss-personal__field textarea ~ .ss-personal__count {
	position: static;
	display: block;
	margin-top: 6px;
	text-align: right;
	transform: none;
}

/* Upload (own handwriting, photos) */
.ss-personal__upload {
	margin-top: 16px;
}

.ss-personal__drop {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 64px;
	padding: 12px 16px;
	border: 2px dashed #c9c4bc;
	border-radius: 8px;
	background: var(--ss-cream);
	color: var(--ss-ink);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.ss-personal__drop:hover,
.ss-personal__drop:focus-within {
	border-color: var(--ss-green);
	background: #f1f6f3;
}

.ss-personal__drop:focus-within {
	outline: 3px solid var(--ss-gold);
	outline-offset: 2px;
}

/* The real file input covers the box (keyboard and screen readers use it). */
.ss-personal__drop input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.ss-personal__drop .ss-icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--ss-red);
}

.ss-personal__preview {
	display: block;
	max-width: 160px;
	max-height: 160px;
	margin-top: 10px;
	border: 1px solid var(--ss-line);
	border-radius: 6px;
	object-fit: contain;
}

.ss-personal__preview[hidden] {
	display: none;
}

/* "I've checked my spelling" */
.ss-personal__confirm {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px solid #efe1c2;
	border-radius: 8px;
	background: #fdf8ee;
	color: var(--ss-ink);
	font-size: 0.9rem;
	line-height: 1.4;
	cursor: pointer;
}

.ss-personal__confirm input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--ss-red);
}

/* 19.4 Quantity, Add to Basket, Wishlist -------------------------------- */

.single-product div.product form.cart:not(.variations_form),
.single-product div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

.single-product div.product form.cart .quantity {
	float: none;
	margin: 0;
}

.ss-qty {
	display: inline-flex;
	align-items: stretch;
	height: 56px;
	border: 1px solid #c9c4bc;
	border-radius: 6px;
	background: var(--ss-white);
}

.single-product div.product .ss-qty .qty {
	width: 48px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--ss-ink);
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
}

.ss-qty .qty::-webkit-inner-spin-button,
.ss-qty .qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.ss-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ss-ink);
	cursor: pointer;
}

.ss-qty-btn:hover {
	color: var(--ss-red);
}

.ss-qty-btn:focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: -3px;
}

.single-product div.product .single_add_to_cart_button {
	display: inline-flex;
	flex: 1 1 220px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 6px;
	background: var(--ss-red);
	color: var(--ss-white);
	font-size: 1.15rem;
	font-weight: 700;
	transition: background-color 0.15s;
}

.single-product div.product .single_add_to_cart_button::before {
	content: "";
	width: 1.3em;
	height: 1.3em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8Z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8Z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.single-product div.product .single_add_to_cart_button:hover {
	background: var(--ss-red-dark);
	color: var(--ss-white);
}

.single-product div.product .single_add_to_cart_button:focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: 2px;
}

/* Waiting for options (variable products) */
.single-product div.product .single_add_to_cart_button.disabled {
	background: #d9a3a7;
	cursor: not-allowed;
	opacity: 1;
}

.ss-buy-wishlist {
	display: flex;
	flex: 1 1 200px;
}

.ss-buy-wishlist .tinv-wraper {
	display: flex;
	flex: 1;
	margin: 0;
}

.ss-buy-wishlist .tinvwl_add_to_wishlist_button {
	display: inline-flex !important;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	margin: 0 !important;
	padding: 0 20px;
	border: 2px solid var(--ss-red);
	border-radius: 6px;
	background: var(--ss-white);
	color: var(--ss-red) !important;
	font-size: 1.05rem;
	font-weight: 700;
	text-decoration: none;
}

.ss-buy-wishlist .tinvwl_add_to_wishlist_button::before {
	margin: 0 !important;
	font-size: 22px !important;
}

.ss-buy-wishlist .tinvwl_add_to_wishlist_button:hover,
.ss-buy-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	background: var(--ss-red);
	color: var(--ss-white) !important;
}

.ss-buy-wishlist .tinvwl-tooltip {
	display: none !important;
}

/* 19.5 Reassurance strip ------------------------------------------------- */

.ss-reassure {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
	margin: 0 0 8px;
	padding: 16px 0;
	border-top: 1px solid var(--ss-line);
	border-bottom: 1px solid var(--ss-line);
	list-style: none;
}

.ss-reassure li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--ss-ink-soft);
	font-size: 0.88rem;
	line-height: 1.3;
}

.ss-reassure strong {
	display: block;
	color: var(--ss-ink);
	font-weight: 700;
}

.ss-reassure .ss-icon {
	width: 30px;
	height: 30px;
	color: var(--ss-red);
}

/* 19.6 Information tabs ------------------------------------------------- */

.single-product div.product .woocommerce-tabs {
	padding: 0;
}

.single-product div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 4px;
	width: auto;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	border-bottom: 2px solid var(--ss-line);
	list-style: none;
	scrollbar-width: thin;
}

.single-product div.product .woocommerce-tabs ul.tabs li {
	flex: none;
	margin: 0 0 -2px;
	border: 0;
}

.single-product div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 18px;
	border-bottom: 3px solid transparent;
	color: var(--ss-ink-soft);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after,
.single-product div.product .woocommerce-tabs ul.tabs li a::before,
.single-product div.product .woocommerce-tabs ul.tabs li a::after {
	display: none !important; /* Storefront's chevrons */
	content: none !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--ss-red);
	color: var(--ss-red);
}

.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--ss-ink);
}

.single-product div.product .woocommerce-tabs .panel {
	width: auto;
	margin: 0;
	padding: 20px 2px 0;
	color: var(--ss-ink-soft);
	font-size: 0.98rem;
	line-height: 1.65;
}

.single-product div.product .woocommerce-tabs .panel h2:first-child:empty {
	display: none;
}

.single-product .woocommerce-product-attributes,
.single-product .ss-spec-extra {
	margin: 0 0 12px;
	border: 0;
}

.single-product .woocommerce-product-attributes th,
.single-product .woocommerce-product-attributes td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--ss-line);
	background: none;
	text-align: left;
	vertical-align: top;
}

.single-product .woocommerce-product-attributes th {
	width: 38%;
	color: var(--ss-ink);
	font-weight: 600;
}

.single-product .woocommerce-product-attributes td p {
	margin: 0;
}

.ss-delivery-tab__links a,
.single-product .woocommerce-tabs .panel a {
	color: var(--ss-red);
}

/* Reviews */
.single-product #reviews .woocommerce-Reviews-title,
.single-product #reviews #reply-title {
	color: var(--ss-ink);
	font-family: var(--ss-sans);
	font-size: 1.2rem;
	font-weight: 700;
}

.single-product #reviews .star-rating span::before,
.single-product #reviews p.stars a {
	color: var(--ss-gold);
}

.single-product #reviews .commentlist li .comment_container {
	padding: 14px 0;
	border-bottom: 1px solid var(--ss-line);
}

.single-product #reviews .woocommerce-noreviews {
	padding: 14px 16px;
	border-radius: var(--ss-radius);
	background: var(--ss-cream);
}

.single-product #reviews .form-submit input[type="submit"] {
	border-radius: 6px;
	background: var(--ss-red);
	color: var(--ss-white);
	font-weight: 700;
}

/* 19.7 You may also like / Complete the gift ---------------------------- */

.single-product div.product .related,
.single-product div.product .up-sells {
	padding: 0;
}

.single-product div.product .related.products > h2:first-child,
.single-product div.product .up-sells.products > h2:first-child {
	margin: 0 0 14px;
	color: var(--ss-ink);
	font-family: var(--ss-sans);
	font-size: 1.3rem;
	font-weight: 700;
	text-align: left;
}

/* Compact cards: price with a small basket button beside it. */
.single-product .related ul.products li.product,
.single-product .up-sells ul.products li.product {
	padding: 0 0 10px;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	background: var(--ss-white);
}

.single-product .related ul.products li.product img,
.single-product .up-sells ul.products li.product img {
	border-radius: var(--ss-radius) var(--ss-radius) 0 0;
	margin-bottom: 8px;
}

.single-product .related ul.products li.product .woocommerce-loop-product__title,
.single-product .related ul.products li.product .ss-rating,
.single-product .related ul.products li.product .price,
.single-product .up-sells ul.products li.product .woocommerce-loop-product__title,
.single-product .up-sells ul.products li.product .ss-rating,
.single-product .up-sells ul.products li.product .price {
	padding: 0 10px;
}

.single-product .related ul.products li.product .woocommerce-loop-product__title,
.single-product .up-sells ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.88rem;
}

.single-product .related ul.products li.product .price,
.single-product .up-sells ul.products li.product .price {
	margin-bottom: 0;
	padding-right: 56px;
	font-size: 1.05rem;
}

.single-product .related ul.products li.product .button,
.single-product .up-sells ul.products li.product .button {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 0; /* icon only; WooCommerce gives the link an aria-label */
}

.single-product .related ul.products li.product .button::before,
.single-product .up-sells ul.products li.product .button::before {
	width: 20px;
	height: 20px;
	margin: 0;
}

/* Sold out / "Read more": the card itself links to the product. */
.single-product .related ul.products li.product .button:not(.add_to_cart_button),
.single-product .up-sells ul.products li.product .button:not(.add_to_cart_button) {
	display: none;
}

.single-product .related ul.products li.product .added_to_cart,
.single-product .up-sells ul.products li.product .added_to_cart {
	padding: 4px 10px 0;
	font-size: 0.8rem;
	text-align: left;
}

/* Added-to-basket confirmation */
.single-product .woocommerce-message {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 16px 0;
	padding: 14px 18px;
	border: 0;
	border-left: 4px solid #1b7a3a;
	border-radius: var(--ss-radius);
	background: #eef7f0;
	color: var(--ss-ink);
	font-weight: 600;
}

.single-product .woocommerce-message::before {
	display: none;
}

.single-product .woocommerce-message .button {
	order: 2;
	float: none;
	padding: 8px 16px;
	border-radius: 6px;
	background: var(--ss-red);
	color: var(--ss-white);
}

/* 19.8 Sticky Add to Basket bar (phones) -------------------------------- */

.ss-sticky-buy {
	position: fixed;
	right: 0;
	bottom: calc(58px + env(safe-area-inset-bottom));
	left: 0;
	z-index: 9980;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border-top: 1px solid var(--ss-line);
	background: var(--ss-white);
	box-shadow: 0 -4px 16px rgb(0 0 0 / 0.08);
}

.ss-sticky-buy[hidden] {
	display: none;
}

.ss-sticky-buy__info {
	display: grid;
	flex: 1;
	min-width: 0;
}

.ss-sticky-buy__name {
	overflow: hidden;
	color: var(--ss-ink);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ss-sticky-buy__price {
	color: var(--ss-red);
	font-weight: 800;
}

.ss-sticky-buy__price del {
	color: var(--ss-ink-soft);
	font-size: 0.8em;
	font-weight: 400;
}

.ss-sticky-buy__btn {
	flex: none;
	min-height: 46px;
}

body.has-sticky-buy {
	padding-bottom: calc(130px + env(safe-area-inset-bottom));
}

/* 19.9 Larger screens --------------------------------------------------- */

@media (min-width: 768px) {

	.ss-reassure {
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		gap: 14px 12px;
	}
}

@media (min-width: 1024px) {

	.single-product div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		column-gap: 48px;
	}

	.ss-product-media {
		display: grid;
		gap: 32px;
	}

	.single-product div.product .woocommerce-product-gallery {
		grid-template-columns: 84px minmax(0, 1fr);
		align-items: start;
		gap: 14px;
	}

	/* Thumbnails in a column beside the main image */
	.single-product div.product .woocommerce-product-gallery .flex-viewport {
		grid-column: 2;
		grid-row: 1;
	}

	.single-product div.product .flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		max-height: 560px;
		padding: 0 4px 0 0;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.single-product div.product .flex-control-thumbs li {
		width: 80px !important;
	}

	/* Single image: no thumbnail column */
	.single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		grid-column: 1 / -1;
	}

	.single-product div.product .woocommerce-tabs {
		margin-top: 28px;
	}

	.single-product .related ul.products.columns-4,
	.single-product .up-sells ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
	}

	.ss-sticky-buy {
		display: none !important;
	}
}

@media (max-width: 1023px) {

	/* Phones/tablets: gallery, buy box (with tabs), then related products. */
	.ss-product-media {
		display: contents;
	}

	.single-product div.product .woocommerce-product-gallery {
		order: 1;
	}

	.single-product div.product .summary {
		order: 2;
	}

	.single-product div.product .related {
		order: 3;
	}

	.single-product div.product .up-sells {
		order: 4;
	}

	.single-product div.product .woocommerce-tabs {
		margin-top: 24px;
	}

	.single-product .related ul.products,
	.single-product .up-sells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* Buttons placed in page content (e.g. Contact page): brand red, outline style in red. */
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--ss-red);
	color: var(--ss-white);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--ss-red);
	background: transparent;
	color: var(--ss-red);
}

.entry-content .wp-block-button__link {
	padding: 10px 22px;
	border-radius: var(--ss-radius);
	font-weight: 700;
	text-decoration: none;
}

/* Free gift with a gift set (size picker above Add to Basket). */
.ss-free-gift {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 2px dashed var(--ss-gold);
	border-radius: var(--ss-radius);
	background: var(--ss-cream);
}

.ss-free-gift .ss-free-gift__title {
	margin: 0 0 8px;
	color: var(--ss-green);
}

.ss-free-gift label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.ss-free-gift select {
	width: 100%;
	max-width: 260px;
}


/* ========================================================================
   20. BASKET PAGE (inc/cart.php, assets/js/cart.js)
   Phones: one column — items, discount code, summary, checkout,
   reassurance, recommendations. Desktop (1024px+): items and
   recommendations on the left, Order Summary on the right.
   ======================================================================== */

/* 20.1 Page, breadcrumb and heading -------------------------------------- */

.woocommerce-cart .site-content {
	background: var(--ss-cream);
}

.woocommerce-cart .site-main {
	margin-bottom: var(--ss-section-gap);
}

.woocommerce-cart .hentry {
	margin: 0;
	padding: 0;
	border: 0;
}

.ss-cart-head {
	margin: 4px 0 20px;
}

.ss-cart-head__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--ss-ink);
	font-family: var(--ss-sans);
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
	font-weight: 700;
	line-height: 1.15;
}

.ss-cart-head__title .ss-icon {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	color: var(--ss-red);
	stroke-width: 2;
}

.ss-cart-head__lead {
	margin: 6px 0 0;
	color: var(--ss-ink-soft);
	font-size: 1.1rem;
}

/* 20.2 Two-column layout (only when the basket has items) --------------- */

.woocommerce-cart .entry-content > .woocommerce:has(.woocommerce-cart-form) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce-cart .cart-collaterals {
	margin-top: 24px;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: auto;
	margin: 0;
}

@media (min-width: 1024px) {

	.woocommerce-cart .entry-content > .woocommerce:has(.woocommerce-cart-form) {
		grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: 28px;
	}

	.woocommerce-cart .entry-content > .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .woocommerce-cart-form {
		grid-column: 1;
		grid-row: 2;
	}

	.woocommerce-cart .cart-collaterals {
		grid-column: 2;
		grid-row: 2 / span 2;
		margin-top: 0;
	}

	.woocommerce-cart .ss-cart-recs {
		grid-column: 1;
		grid-row: 3;
	}
}

/* 20.3 Items ------------------------------------------------------------ */

.woocommerce-cart .woocommerce-cart-form {
	padding: 8px 20px 20px;
	border: 1px solid var(--ss-line);
	border-radius: 12px;
	background: var(--ss-white);
	box-shadow: 0 2px 10px rgb(0 0 0 / 0.04);
}

.woocommerce-cart table.cart {
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}

.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart tbody tr:nth-child(2n) td {
	background: none;
}

.woocommerce-cart table.cart thead th {
	padding: 14px 10px;
	border-bottom: 1px solid var(--ss-line);
	color: var(--ss-ink-soft);
	font-size: 0.9rem;
	font-weight: 600;
}

.woocommerce-cart table.cart td {
	padding: 18px 10px;
	border-bottom: 1px solid var(--ss-line);
	vertical-align: middle;
}

.woocommerce-cart table.cart .product-thumbnail img {
	display: block;
	width: 90px;
	max-width: none;
	height: 90px;
	border-radius: 6px;
	object-fit: cover;
}

.woocommerce-cart table.cart .product-name > a {
	color: var(--ss-ink);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.woocommerce-cart table.cart .product-name > a:hover {
	color: var(--ss-red);
	text-decoration: underline;
}

/* Options and personalisation: "Colour: Red · Size: Small". */
.woocommerce-cart table.cart dl.variation {
	margin: 6px 0 0;
	color: var(--ss-ink-soft);
	font-size: 0.9rem;
	line-height: 1.5;
}

.woocommerce-cart table.cart dl.variation dt,
.woocommerce-cart table.cart dl.variation dd {
	display: inline;
	float: none;
	margin: 0;
	font-weight: 400;
}

/* Values (colour, size, the personalised text) in bold, to check at a glance. */
.woocommerce-cart table.cart dl.variation dd {
	color: var(--ss-ink);
	font-weight: 600;
}

.woocommerce-cart table.cart dl.variation dd p {
	display: inline;
	margin: 0;
}

.woocommerce-cart table.cart dl.variation dd::after {
	content: "";
	display: block;
}

.ss-cart-status {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 8px 0 0;
	color: var(--ss-ink-soft);
	font-size: 0.85rem;
}

.ss-cart-status span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ss-cart-status .ss-icon {
	width: 18px;
	height: 18px;
}

.ss-cart-status__stock {
	color: #1f7a3f;
	font-weight: 600;
}

.woocommerce-cart table.cart .backorder_notification {
	margin: 6px 0 0;
	color: #8a5a00;
	font-size: 0.85rem;
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
	color: var(--ss-red);
	font-size: 1.15rem;
	font-weight: 700;
	white-space: nowrap;
}

.woocommerce-cart table.cart .product-subtotal {
	text-align: right;
}

.woocommerce-cart table.cart th.product-quantity {
	padding-left: 18px;
}

/* Remove (×) */
.woocommerce-cart table.cart td.product-remove a.remove {
	position: relative;
	top: auto;
	right: auto;
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: none;
	color: var(--ss-ink-soft);
	font-size: 0;
	text-decoration: none;
	text-indent: 0;
}

.woocommerce-cart table.cart td.product-remove a.remove::before {
	content: "";
	position: static;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-cart table.cart td.product-remove a.remove:hover {
	background: #fbe9ea;
	color: var(--ss-red);
}

.woocommerce-cart table.cart td.product-remove a.remove:focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: 1px;
}

/* Quantity − 1 + */
.woocommerce-cart table.cart .quantity {
	float: none;
	margin: 0;
}

.woocommerce-cart table.cart .ss-qty {
	height: 44px;
}

.woocommerce-cart table.cart .ss-qty .qty {
	width: 44px;
	height: 100%;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--ss-line);
	border-right: 1px solid var(--ss-line);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--ss-ink);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
}

.woocommerce-cart table.cart .ss-qty-btn {
	width: 40px;
}

/* Prices dim while a change is being saved, so no one reads an old total. */
.ss-cart-pending .woocommerce-cart-form .product-subtotal,
.ss-cart-pending .cart_totals {
	opacity: 0.45;
	transition: opacity 0.15s;
}

/* Discount code · Update Basket */
.woocommerce-cart table.cart td.actions {
	padding: 20px 0 0;
	border-bottom: 0;
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	float: left;
	gap: 8px;
	width: min(100%, 400px);
}

/* WooCommerce's message under the field when a code is rejected. */
.woocommerce-cart table.cart td.actions .coupon .coupon-error-notice {
	flex-basis: 100%;
	order: 3;
	margin: 0;
	color: var(--ss-red);
	font-size: 0.9rem;
}

.woocommerce-cart table.cart td.actions .coupon .input-text.has-error {
	border-color: var(--ss-red);
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	height: 46px;
	margin: 0;
	padding: 0 14px 0 40px;
	border: 1px solid #c9c4bc;
	border-radius: 6px;
	background: var(--ss-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4a4f' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8L3 12Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") 12px center / 18px no-repeat;
	box-shadow: none;
	font-size: 1rem;
}

.woocommerce-cart table.cart td.actions .coupon .button {
	flex: none;
	height: 46px;
	margin: 0;
	padding: 0 22px;
	border-radius: 6px;
	background: var(--ss-red);
	color: var(--ss-white);
	font-weight: 700;
}

.woocommerce-cart table.cart td.actions .coupon .button:hover {
	background: var(--ss-red-dark);
}

.woocommerce-cart table.cart td.actions > .button[name="update_cart"] {
	float: right;
	height: 46px;
	margin: 0;
	padding: 0 22px;
	border: 1px solid var(--ss-red);
	border-radius: 6px;
	background: var(--ss-white);
	color: var(--ss-red);
	font-weight: 700;
}

.woocommerce-cart table.cart td.actions > .button[name="update_cart"]:disabled {
	border-color: var(--ss-line);
	color: #8b8b90;
	opacity: 1;
}

.woocommerce-cart table.cart td.actions > .button[name="update_cart"]:not(:disabled):hover {
	background: #fbe9ea;
}

.woocommerce-cart table.cart td.actions .coupon .button:focus-visible,
.woocommerce-cart table.cart td.actions > .button:focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: 2px;
}

/* Phones: each item becomes a compact card. */
@media (max-width: 767px) {

	.woocommerce-cart .woocommerce-cart-form {
		padding: 4px 14px 16px;
	}

	.woocommerce-cart table.cart,
	.woocommerce-cart table.cart tbody {
		display: block;
	}

	.woocommerce-cart table.cart thead {
		display: none;
	}

	.woocommerce-cart table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr) auto 36px;
		grid-template-areas:
			"thumb name  name  remove"
			"thumb price price ."
			"qty   qty   total total";
		gap: 6px 12px;
		padding: 16px 0;
		border-bottom: 1px solid var(--ss-line);
	}

	.woocommerce-cart table.cart tr.cart_item td {
		display: block;
		padding: 0;
		border: 0;
		line-height: 1.35;
		text-align: left;
	}

	.woocommerce-cart table.cart .product-name > a {
		font-size: 1rem;
	}

	.ss-cart-status {
		font-size: 0.82rem;
	}

	.woocommerce-cart table.cart tr.cart_item td::before {
		display: none;
	}

	.woocommerce-cart table.cart td.product-thumbnail {
		grid-area: thumb;
	}

	.woocommerce-cart table.cart .product-thumbnail img {
		width: 76px;
		height: 76px;
	}

	.woocommerce-cart table.cart td.product-name {
		grid-area: name;
	}

	.woocommerce-cart table.cart td.product-remove {
		grid-area: remove;
		margin: -6px -6px 0 0;
	}

	.woocommerce-cart table.cart td.product-price {
		grid-area: price;
		color: var(--ss-ink-soft);
		font-size: 0.9rem;
		font-weight: 600;
	}

	.woocommerce-cart table.cart td.product-price::after {
		content: " each";
		display: inline;
		clear: none;
		font-weight: 400;
	}

	.woocommerce-cart table.cart td.product-quantity {
		grid-area: qty;
		align-self: center;
		margin-top: 6px;
	}

	.woocommerce-cart table.cart td.product-subtotal {
		grid-area: total;
		align-self: center;
		margin-top: 6px;
		font-size: 1.2rem;
		text-align: right;
	}

	.woocommerce-cart table.cart tr:not(.cart_item) {
		display: block;
	}

	.woocommerce-cart table.cart td.actions {
		display: block;
		padding-top: 16px;
	}

	.woocommerce-cart table.cart td.actions .coupon {
		float: none;
		width: 100%;
		margin-bottom: 12px;
	}

	.woocommerce-cart table.cart td.actions > .button[name="update_cart"] {
		float: none;
		width: 100%;
	}
}

/* 20.4 Order Summary ---------------------------------------------------- */

.woocommerce-cart .cart_totals {
	overflow: hidden;
	border: 1px solid var(--ss-line);
	border-radius: 12px;
	background: var(--ss-white);
	box-shadow: var(--ss-shadow);
}

/* Red band wrapped with a gold ribbon, like a present. */
.woocommerce-cart .cart_totals > h2 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 18px 24px;
	background: linear-gradient(135deg, var(--ss-red), var(--ss-red-dark));
	color: var(--ss-white);
	font-family: var(--ss-sans);
	font-size: 1.6rem;
	font-weight: 700;
}

.woocommerce-cart .cart_totals > h2::before {
	content: "";
	flex: none;
	width: 30px;
	height: 30px;
	background: var(--ss-gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 11h16v9H4zM3 7h18v4H3zM12 7v13'/%3E%3Cpath d='M12 7c-1.5-3-5-3.5-5-1.2C7 7 9 7 12 7Zm0 0c1.5-3 5-3.5 5-1.2C17 7 15 7 12 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 11h16v9H4zM3 7h18v4H3zM12 7v13'/%3E%3Cpath d='M12 7c-1.5-3-5-3.5-5-1.2C7 7 9 7 12 7Zm0 0c1.5-3 5-3.5 5-1.2C17 7 15 7 12 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-cart .cart_totals > h2::after {
	content: "";
	position: absolute;
	top: 0;
	right: 32px;
	bottom: 0;
	width: 14px;
	background: linear-gradient(90deg, #b8913f, var(--ss-gold) 40%, #f0d9a4 55%, var(--ss-gold) 70%, #b8913f);
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06);
}

.woocommerce-cart .cart_totals table {
	display: table;
	width: 100%;
	margin: 8px 0 0;
	border: 0;
	background: none;
}

.woocommerce-cart .cart_totals table tbody {
	display: table-row-group;
}

.woocommerce-cart .cart_totals table tr th,
.woocommerce-cart .cart_totals table tr td,
.woocommerce-cart .cart_totals table tbody tr:nth-child(2n) th,
.woocommerce-cart .cart_totals table tbody tr:nth-child(2n) td {
	display: table-cell;
	padding: 10px 24px;
	border: 0;
	background: none;
	color: var(--ss-ink);
	font-size: 1rem;
	vertical-align: top;
}

.woocommerce-cart .cart_totals table tr {
	display: table-row;
}

.woocommerce-cart .cart_totals table th {
	padding-right: 0;
	font-weight: 600;
	text-align: left;
}

.woocommerce-cart .cart_totals table td {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-cart .cart_totals tr.ss-free-delivery-row td {
	white-space: normal;
}

@media (max-width: 479px) {

	.woocommerce-cart .cart_totals > h2 {
		padding: 16px 18px;
		font-size: 1.4rem;
	}

	.woocommerce-cart .cart_totals table tr th,
	.woocommerce-cart .cart_totals table tr td,
	.woocommerce-cart .cart_totals table tbody tr:nth-child(2n) th,
	.woocommerce-cart .cart_totals table tbody tr:nth-child(2n) td {
		padding-left: 18px;
		padding-right: 18px;
	}

	.woocommerce-cart .cart_totals table th {
		padding-right: 0;
	}

	.woocommerce-cart .cart_totals tr.ss-free-delivery-row td {
		padding-left: 12px;
		padding-right: 12px;
	}

	.woocommerce-cart .wc-proceed-to-checkout {
		padding: 4px 18px 20px;
	}

	.woocommerce-cart .wc-proceed-to-checkout a.ss-checkout-button {
		gap: 10px;
		padding: 0 14px;
		font-size: 1.1rem;
		white-space: nowrap;
	}

	/* Room for the words: drop the arrow, keep the padlock. */
	.ss-checkout-button .ss-icon:last-child {
		display: none;
	}

	.ss-cart-recs__script {
		font-size: 1rem;
		transform: none;
	}
}

.woocommerce-cart .cart_totals table td::before {
	display: none;
}

.woocommerce-cart .cart_totals .cart-discount td {
	color: #1f7a3f;
	font-weight: 600;
}

.woocommerce-cart .cart_totals .woocommerce-remove-coupon {
	display: block;
	color: var(--ss-ink-soft);
	font-size: 0.85rem;
	font-weight: 400;
}

.woocommerce-cart .cart_totals #shipping_method {
	margin: 0;
	list-style: none;
}

.woocommerce-cart .cart_totals #shipping_method li {
	margin: 0;
}

.woocommerce-cart .cart_totals #shipping_method label {
	font-weight: 400;
}

.woocommerce-cart .cart_totals .ss-free {
	color: #1f7a3f;
	font-weight: 700;
}

/* Free-delivery progress */
.woocommerce-cart .cart_totals tr.ss-free-delivery-row td {
	padding: 4px 16px 10px;
	text-align: left;
}

.ss-free-delivery {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 4px 12px;
	padding: 14px 16px;
	border: 1px solid #efe1c2;
	border-radius: 8px;
	background: #fdf8ee;
}

.ss-free-delivery > .ss-icon {
	width: 32px;
	height: 32px;
	color: var(--ss-red);
}

.ss-free-delivery__text {
	font-size: 0.9rem;
	line-height: 1.35;
}

.ss-free-delivery__text strong {
	display: block;
	color: var(--ss-red);
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ss-free-delivery__text span {
	color: var(--ss-ink-soft);
}

.ss-free-delivery__amount {
	grid-column: 1 / -1;
	grid-row: 3;
	color: var(--ss-red);
	font-size: 0.85rem;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.ss-free-delivery__bar {
	grid-column: 1 / -1;
	height: 8px;
	margin-top: 8px;
	overflow: hidden;
	border-radius: 99px;
	background: #e9e4dc;
}

.ss-free-delivery__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--ss-red);
	transition: width 0.4s ease;
}

.ss-free-delivery.is-unlocked {
	border-color: #cfe5d6;
	background: #eef7f1;
}

.ss-free-delivery.is-unlocked > .ss-icon,
.ss-free-delivery.is-unlocked .ss-free-delivery__text strong {
	color: #1f7a3f;
}

.ss-free-delivery.is-unlocked .ss-free-delivery__bar span {
	background: #1f7a3f;
}

/* Total */
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
	padding-top: 16px;
	padding-bottom: 16px;
	border-top: 1px solid var(--ss-line);
	vertical-align: middle;
}

.woocommerce-cart .cart_totals tr.order-total th {
	font-size: 1.3rem;
	font-weight: 700;
}

.woocommerce-cart .cart_totals tr.order-total td,
.woocommerce-cart .cart_totals tr.order-total td strong {
	color: var(--ss-red);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1.1;
}

.woocommerce-cart .cart_totals tr.order-total td small {
	display: block;
	color: var(--ss-ink-soft);
	font-size: 0.8rem;
	font-weight: 400;
}

/* Proceed to Checkout */
.woocommerce-cart .wc-proceed-to-checkout {
	margin: 0;
	padding: 4px 24px 24px;
}

.woocommerce-cart .wc-proceed-to-checkout a.ss-checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 62px;
	margin: 0;
	padding: 0 20px;
	border-radius: 8px;
	background: var(--ss-red);
	box-shadow: 0 6px 16px rgb(200 16 30 / 0.28);
	color: var(--ss-white);
	font-size: 1.25rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s, transform 0.15s;
}

.woocommerce-cart .wc-proceed-to-checkout a.ss-checkout-button:hover {
	background: var(--ss-red-dark);
	transform: translateY(-1px);
}

.woocommerce-cart .wc-proceed-to-checkout a.ss-checkout-button:focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: 3px;
}

.woocommerce-cart .wc-proceed-to-checkout a.ss-checkout-button::after {
	display: none; /* Storefront's arrow: ours is an icon */
}

.ss-checkout-button .ss-icon {
	width: 22px;
	height: 22px;
	stroke-width: 2.2;
}

/* Payment methods */
.ss-pay-marks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 16px 0 0;
	list-style: none;
}

.ss-pay-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 36px;
	margin: 0;
	border: 1px solid var(--ss-line);
	border-radius: 5px;
	background: var(--ss-white);
}

.ss-pay-mark svg {
	display: block;
	width: 54px;
	height: 22px;
}

/* 20.5 Shop with Confidence -------------------------------------------- */

.ss-confidence {
	margin-top: 20px;
	padding: 20px 22px 6px;
	border: 2px solid var(--ss-gold);
	border-radius: 12px;
	background: var(--ss-white);
}

.ss-confidence__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--ss-ink);
	font-family: var(--ss-sans);
	font-size: 1.25rem;
	font-weight: 700;
}

.ss-confidence__title .ss-icon {
	width: 28px;
	height: 28px;
	color: var(--ss-gold);
	stroke-width: 2;
}

.ss-confidence ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
	margin: 0;
	list-style: none;
}

.ss-confidence li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--ss-ink-soft);
	font-size: 0.88rem;
	line-height: 1.35;
}

.ss-confidence li .ss-icon {
	flex: none;
	width: 30px;
	height: 30px;
	color: var(--ss-red);
}

.ss-confidence strong {
	display: block;
	color: var(--ss-ink);
	font-size: 0.95rem;
}

.woocommerce-cart .ss-confidence a {
	color: inherit;
	text-decoration: none;
}

.ss-confidence a:hover strong {
	color: var(--ss-red);
	text-decoration: underline;
}

/* 20.6 You May Also Like ------------------------------------------------ */

.ss-cart-recs {
	margin-top: 32px;
}

.ss-cart-recs__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin-bottom: 14px;
}

.ss-cart-recs__head h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--ss-ink);
	font-family: var(--ss-sans);
	font-size: 1.5rem;
	font-weight: 700;
}

.ss-cart-recs__head h2 .ss-icon {
	width: 30px;
	height: 30px;
	color: var(--ss-red);
}

.ss-cart-recs__script {
	margin: 0;
	color: var(--ss-red);
	font-family: var(--ss-serif);
	font-size: 1.15rem;
	font-style: italic;
	transform: rotate(-3deg);
}

.ss-cart-recs__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.ss-cart-recs__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ss-rec {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--ss-line);
	border-radius: 10px;
	background: var(--ss-white);
}

.ss-rec__image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.ss-rec__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px 12px;
}

.ss-rec__title {
	margin: 0;
	font-family: var(--ss-sans);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.3;
}

.woocommerce-cart .ss-rec__title a {
	display: -webkit-box;
	font-weight: 700;
	overflow: hidden;
	color: var(--ss-ink);
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ss-rec__title a:hover {
	color: var(--ss-red);
}

.ss-rec .price {
	color: var(--ss-red);
	font-size: 1.05rem;
	font-weight: 700;
}

.ss-rec .price del {
	color: var(--ss-ink-soft);
	font-size: 0.85rem;
	font-weight: 400;
}

.ss-rec .button {
	margin-top: auto;
	padding: 0.6em 0.5em;
	border-radius: 6px;
	background: var(--ss-red);
	color: var(--ss-white);
	font-size: 0.85rem;
	font-weight: 700;
	text-align: center;
}

.ss-rec .button:hover {
	background: var(--ss-red-dark);
}

/* WooCommerce adds "View basket" after adding; we're already here. */
.ss-rec .added_to_cart {
	display: none;
}

/* 20.7 Empty basket ----------------------------------------------------- */

.woocommerce-cart .cart-empty.woocommerce-info {
	margin: 0;
	padding: 36px 24px 12px;
	border: 1px solid var(--ss-line);
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	background: var(--ss-white);
	color: var(--ss-ink);
	font-size: 1.15rem;
	text-align: center;
}

.woocommerce-cart .cart-empty.woocommerce-info::before {
	content: "";
	position: static;
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 12px;
	background: var(--ss-red);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8Z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8Z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-cart .return-to-shop {
	margin: 0;
	padding: 8px 24px 36px;
	border: 1px solid var(--ss-line);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	background: var(--ss-white);
	text-align: center;
}

.woocommerce-cart .return-to-shop .button {
	padding: 0.85em 2em;
	border-radius: 8px;
	background: var(--ss-red);
	color: var(--ss-white);
	font-weight: 700;
}

.woocommerce-cart .return-to-shop .button:hover {
	background: var(--ss-red-dark);
}


/* ========================================================================
   21. CHECKOUT PAGE (inc/checkout.php, assets/js/checkout.js)
   WooCommerce's Checkout block, styled into numbered white sections with
   the order summary beside them (below them on phones). Red is kept for
   actions, prices and the selected option.
   ======================================================================== */

/* 21.1 Page, breadcrumb, progress steps -------------------------------- */

.woocommerce-checkout .site-content {
	position: relative;
	isolation: isolate; /* the snow sits behind the sections, over the cream */
	background: var(--ss-cream);
}

/* Gentle snow behind the checkout (section 08's snowfall, in a wintry grey-blue
   that shows on cream). It never covers the form: the white sections sit on top. */
.ss-snow--page {
	z-index: -1;
}

.ss-snow--page::before {
	background-image:
		radial-gradient(circle at 20px 30px, rgb(140 160 185 / 0.45) 1.5px, transparent 2.5px),
		radial-gradient(circle at 110px 160px, rgb(140 160 185 / 0.4) 1.5px, transparent 2.5px),
		radial-gradient(circle at 200px 80px, rgb(140 160 185 / 0.45) 1px, transparent 2px),
		radial-gradient(circle at 260px 230px, rgb(140 160 185 / 0.4) 1.5px, transparent 2.5px),
		radial-gradient(circle at 60px 250px, rgb(140 160 185 / 0.35) 1px, transparent 2px),
		radial-gradient(circle at 160px 280px, rgb(140 160 185 / 0.4) 1px, transparent 2px);
	opacity: 1;
}

.ss-snow--page::after {
	background-image:
		radial-gradient(circle at 40px 110px, rgb(140 160 185 / 0.5) 2.5px, transparent 3.5px),
		radial-gradient(circle at 180px 20px, rgb(140 160 185 / 0.45) 2px, transparent 3px),
		radial-gradient(circle at 240px 170px, rgb(140 160 185 / 0.5) 3px, transparent 4px),
		radial-gradient(circle at 120px 240px, rgb(140 160 185 / 0.4) 2px, transparent 3px);
	animation-duration: 12s;
}

.woocommerce-checkout .site-main {
	margin-bottom: var(--ss-section-gap);
}

.woocommerce-checkout .hentry {
	margin: 0;
	padding: 0;
	border: 0;
}

.ss-checkout-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 4px 0 20px;
}

.ss-steps {
	display: flex;
	flex: 1 1 520px;
	max-width: 760px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ss-steps__step {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--ss-ink-soft);
	font-size: 0.95rem;
	text-align: center;
}

/* Line joining the steps */
.ss-steps__step + .ss-steps__step::before {
	content: "";
	position: absolute;
	top: 15px;
	right: 50%;
	left: -50%;
	height: 3px;
	background: var(--ss-line);
}

.ss-steps__step.is-current::before,
.ss-steps__step.is-done + .ss-steps__step::before {
	background: var(--ss-red);
}

.ss-steps__num {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #9a9a9f;
	color: var(--ss-white);
	font-weight: 700;
}

.ss-steps__step.is-current {
	color: var(--ss-red);
	font-weight: 700;
}

.ss-steps__step.is-current .ss-steps__num {
	background: var(--ss-red);
	box-shadow: 0 0 0 4px rgb(200 16 30 / 0.15);
}

/* Done: green tick (not colour alone) */
.ss-steps__step.is-done {
	color: var(--ss-green);
}

.ss-steps__step.is-done .ss-steps__num {
	background: var(--ss-green);
	font-size: 0;
}

.ss-steps__step.is-done .ss-steps__num::after {
	content: "✓";
	font-size: 1rem;
}

.ss-secure-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid #efe1c2;
	border-radius: 10px;
	background: var(--ss-white);
	color: var(--ss-ink-soft);
	font-size: 0.85rem;
	line-height: 1.3;
}

.ss-secure-badge .ss-icon {
	flex: none;
	width: 28px;
	height: 28px;
	color: var(--ss-gold);
	stroke-width: 2;
}

.ss-secure-badge strong {
	display: block;
	color: var(--ss-red);
	font-family: var(--ss-serif);
	font-size: 1.15rem;
	font-style: italic;
}

@media (max-width: 599px) {
	.ss-steps__label {
		font-size: 0.78rem;
	}

	.ss-secure-badge {
		width: 100%;
	}
}

/* 21.2 Layout: sections left, order summary right ---------------------- */

.woocommerce-checkout .wc-block-checkout {
	margin: 0;
	padding: 0;
}

.woocommerce-checkout .wc-block-components-sidebar-layout {
	margin: 0;
}

@media (min-width: 1024px) {
	.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
		width: 62%;
		padding-right: 28px;
	}

	.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		position: sticky;
		top: 16px;
		align-self: flex-start;
		width: 38%;
		padding-left: 0;
	}
}

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

.woocommerce-checkout .wc-block-checkout__form > .wc-block-components-checkout-step,
.woocommerce-checkout .wc-block-checkout__form > .wc-block-checkout__order-notes {
	margin: 0 0 16px;
	padding: 22px 24px 18px;
	border: 1px solid var(--ss-line);
	border-radius: 12px;
	background: var(--ss-white);
	box-shadow: 0 2px 10px rgb(0 0 0 / 0.04);
}

/* WooCommerce's numbering line down the side isn't needed in separate cards. */
.woocommerce-checkout .wc-block-components-checkout-step::after {
	display: none;
}

.woocommerce-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content,
.woocommerce-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__heading-container {
	padding-left: 0;
}

.woocommerce-checkout .wc-block-components-checkout-step__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0 0 14px;
}

.woocommerce-checkout .wc-block-components-checkout-step__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--ss-ink);
	font-family: var(--ss-sans);
	font-size: 1.35rem;
	font-weight: 700;
}

/* "1." numbering in Santa red, before the section name */
.woocommerce-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	margin: 0;
	border-radius: 50%;
	background: var(--ss-red);
	color: var(--ss-white);
	font-size: 1rem;
	line-height: 1;
	transform: none;
}

/* Supporting text under each heading */
.woocommerce-checkout .wc-block-components-checkout-step__heading::after {
	flex-basis: 100%;
	order: 3;
	color: var(--ss-ink-soft);
	font-size: 0.95rem;
}

#contact-fields .wc-block-components-checkout-step__heading::after {
	content: "We’ll use this email to send your order confirmation and updates.";
}

#shipping-fields .wc-block-components-checkout-step__heading::after {
	content: "Where would you like your Christmas gifts delivered?";
}

#shipping-option .wc-block-components-checkout-step__heading::after {
	content: "Choose the option that suits you.";
}

#payment-method .wc-block-components-checkout-step__heading::after {
	content: "All payments are processed securely by our payment provider.";
}

.woocommerce-checkout .wc-block-components-checkout-step__heading-content {
	font-size: 0.9rem;
}

.woocommerce-checkout .wc-block-components-checkout-step__heading-content a {
	color: var(--ss-red);
	font-weight: 600;
}

/* Delivery is UK only: the country is always United Kingdom. */
#shipping-fields .wc-block-components-address-form__country {
	display: none;
}

/* 21.4 Fields ---------------------------------------------------------------- */

.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-combobox .components-combobox-control input,
.woocommerce-checkout .wc-block-components-select select,
.woocommerce-checkout .wc-block-components-textarea {
	border: 1px solid #c9c4bc;
	border-radius: 6px;
	background: var(--ss-white);
	color: var(--ss-ink);
	font-size: 1rem;
}

.woocommerce-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-components-combobox .components-combobox-control input:focus,
.woocommerce-checkout .wc-block-components-select select:focus,
.woocommerce-checkout .wc-block-components-textarea:focus {
	border-color: var(--ss-green);
	box-shadow: 0 0 0 3px rgb(216 179 106 / 0.45);
	outline: none;
}

/* Errors: red border plus WooCommerce's message under the field. */
.woocommerce-checkout .wc-block-components-text-input.has-error input,
.woocommerce-checkout .has-error .wc-block-components-select select {
	border-color: var(--ss-red);
	box-shadow: 0 0 0 1px var(--ss-red);
}

.woocommerce-checkout .wc-block-components-validation-error {
	color: var(--ss-red);
	font-size: 0.85rem;
	font-weight: 600;
}

.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--ss-red);
	background: var(--ss-red);
}

.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--ss-white);
}

.woocommerce-checkout .wc-block-components-checkbox__input:focus-visible,
.woocommerce-checkout .wc-block-components-radio-control__input:focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: 2px;
}

/* 21.5 Delivery options and payment methods as cards ------------------- */

.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px;
	border: 0;
}

.woocommerce-checkout .wc-block-components-radio-control__option,
.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
	margin: 0;
	border: 1px solid #c9c4bc;
	border-radius: 8px;
	background: var(--ss-white);
	box-shadow: none;
}

.woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after,
.woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted::after,
.woocommerce-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted::after {
	display: none;
}

.woocommerce-checkout .wc-block-components-radio-control__option-checked,
.woocommerce-checkout .wc-block-components-radio-control__option--checked-option-highlighted,
.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border: 2px solid var(--ss-red);
	background: #fff8f8;
}

.woocommerce-checkout .wc-block-components-payment-methods .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option {
	margin-top: 10px;
}

.woocommerce-checkout .wc-block-components-radio-control__input:checked {
	border-color: var(--ss-red);
}

.woocommerce-checkout .wc-block-components-radio-control__input:checked::before {
	background: var(--ss-red);
}

.woocommerce-checkout .wc-block-components-radio-control__label {
	color: var(--ss-ink);
	font-weight: 700;
}

.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
	color: var(--ss-red);
	font-weight: 700;
}

.woocommerce-checkout .wc-block-components-radio-control__description {
	color: var(--ss-ink-soft);
}

/* 21.6 Notes, terms and WooCommerce's Place Order button ---------------- */

.woocommerce-checkout .wc-block-checkout__terms {
	margin: 4px 0 16px;
	padding: 0;
	border: 0;
	color: var(--ss-ink-soft);
	font-size: 0.9rem;
}

.woocommerce-checkout .wc-block-checkout__terms a {
	color: var(--ss-ink);
}

.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
.ss-checkout-pay__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 60px;
	padding: 0 20px;
	border: 0;
	border-radius: 8px;
	background: var(--ss-red);
	box-shadow: 0 6px 16px rgb(200 16 30 / 0.28);
	color: var(--ss-white);
	font-size: 1.2rem;
	font-weight: 700;
	cursor: pointer;
}

.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover,
.ss-checkout-pay__button:hover {
	background: var(--ss-red-dark);
}

.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:focus-visible,
.ss-checkout-pay__button:focus-visible {
	outline: 3px solid var(--ss-gold);
	outline-offset: 3px;
}

/* Padlock on WooCommerce's own button too */
.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button .wc-block-components-button__text::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	flex: none;
	margin-right: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-checkout .wc-block-checkout__actions_row {
	display: block;
}

.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	display: inline-flex;
	align-items: center;
}

.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
	display: none; /* Edit Basket is in the order summary */
}

/* 21.7 Your Order ---------------------------------------------------------- */

.woocommerce-checkout .wc-block-checkout__sidebar {
	padding: 0;
}

.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--ss-line);
	border-radius: 12px;
	background: var(--ss-white);
	box-shadow: var(--ss-shadow);
}

.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
	padding: 18px 20px 12px;
}

.woocommerce-checkout .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--ss-ink);
	font-family: var(--ss-sans);
	font-size: 1.5rem;
	font-weight: 700;
}

.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	background: var(--ss-red);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 11h16v9H4zM3 7h18v4H3zM12 7v13'/%3E%3Cpath d='M12 7c-1.5-3-5-3.5-5-1.2C7 7 9 7 12 7Zm0 0c1.5-3 5-3.5 5-1.2C17 7 15 7 12 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 11h16v9H4zM3 7h18v4H3zM12 7v13'/%3E%3Cpath d='M12 7c-1.5-3-5-3.5-5-1.2C7 7 9 7 12 7Zm0 0c1.5-3 5-3.5 5-1.2C17 7 15 7 12 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-checkout .ss-edit-basket {
	position: absolute;
	top: 22px;
	right: 20px;
	z-index: 1;
	color: var(--ss-red);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: underline;
}

.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	color: var(--ss-ink);
	font-weight: 700;
}

/* Options and personalisation only; the product blurb is clutter here. */
.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata__description {
	display: none;
}

.woocommerce-checkout .wc-block-components-product-details {
	color: var(--ss-ink-soft);
	font-size: 0.85rem;
}

.woocommerce-checkout .wc-block-components-product-details__value {
	color: var(--ss-ink);
	font-weight: 600;
}

.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices,
.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	color: var(--ss-red);
	font-weight: 700;
}

.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
	border-color: var(--ss-white);
	background: var(--ss-green);
	color: var(--ss-white);
}

.woocommerce-checkout .wc-block-components-totals-wrapper {
	padding-left: 20px;
	padding-right: 20px;
}

.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
	color: var(--ss-ink);
	font-weight: 600;
}

.woocommerce-checkout .wc-block-components-totals-coupon__button {
	border-radius: 6px;
	background: var(--ss-red);
	color: var(--ss-white);
	font-weight: 700;
}

.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--ss-ink);
	font-size: 1.35rem;
	font-weight: 700;
}

.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value .wc-block-formatted-money-amount {
	color: var(--ss-red);
	font-size: 2rem;
	font-weight: 800;
}

.woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
	color: var(--ss-red);
	font-weight: 700;
}

/* 21.8 Summary extras: free delivery, pay button, reassurance ----------- */

.ss-checkout-extras {
	margin-top: 16px;
}

.ss-checkout-free {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 16px;
	padding: 14px 16px;
	border: 1px solid #efe1c2;
	border-radius: 10px;
	background: #fdf8ee;
}

.ss-checkout-free[hidden] {
	display: none;
}

.ss-checkout-free > .ss-icon {
	width: 30px;
	height: 30px;
	color: var(--ss-red);
}

.ss-checkout-free p {
	margin: 0;
	color: var(--ss-ink-soft);
	font-size: 0.92rem;
}

.ss-checkout-free p strong {
	display: block;
	color: var(--ss-red);
}

.ss-checkout-free .ss-free-delivery__bar {
	grid-column: 1 / -1;
	margin-top: 4px;
}

.ss-checkout-free.is-unlocked {
	border-color: #cfe5d6;
	background: #eef7f1;
}

.ss-checkout-free.is-unlocked > .ss-icon,
.ss-checkout-free.is-unlocked p strong {
	color: #1f7a3f;
}

.ss-checkout-free.is-unlocked .ss-free-delivery__bar span {
	background: #1f7a3f;
}

.ss-checkout-pay__note {
	margin: 10px 0 0;
	color: var(--ss-ink-soft);
	font-size: 0.82rem;
	text-align: center;
}

.ss-checkout-pay__button .ss-icon {
	width: 22px;
	height: 22px;
	stroke-width: 2.2;
}

.ss-checkout-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
	margin: 18px 0 0;
	padding: 18px;
	border: 1px solid var(--ss-line);
	border-radius: 12px;
	background: var(--ss-white);
	list-style: none;
}

.ss-checkout-trust li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--ss-ink-soft);
	font-size: 0.85rem;
	line-height: 1.35;
}

.ss-checkout-trust .ss-icon {
	flex: none;
	width: 28px;
	height: 28px;
	color: var(--ss-red);
}

.ss-checkout-trust strong {
	display: block;
	color: var(--ss-ink);
}

.woocommerce-checkout .ss-checkout-trust a {
	color: inherit;
	text-decoration: none;
}

.ss-checkout-trust a:hover strong {
	color: var(--ss-red);
	text-decoration: underline;
}

/* Festive thank-you: evergreen with gold, no images (fast). */
.ss-checkout-thanks {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	padding: 18px 20px;
	overflow: hidden;
	border-radius: 12px;
	background:
		radial-gradient(circle at 85% 20%, rgb(255 255 255 / 0.18) 0 2px, transparent 3px),
		radial-gradient(circle at 70% 75%, rgb(255 255 255 / 0.15) 0 2px, transparent 3px),
		radial-gradient(circle at 93% 65%, rgb(255 255 255 / 0.2) 0 1.5px, transparent 2.5px),
		linear-gradient(135deg, var(--ss-green), var(--ss-green-dark));
	color: rgb(255 255 255 / 0.9);
}

.ss-checkout-thanks .ss-icon {
	flex: none;
	width: 40px;
	height: 40px;
	color: var(--ss-gold);
}

.ss-checkout-thanks p {
	margin: 0;
	font-size: 0.95rem;
}

.ss-checkout-thanks strong {
	display: block;
	color: var(--ss-gold);
	font-family: var(--ss-serif);
	font-size: 1.3rem;
	font-style: italic;
}

/* 21.9 Phones ---------------------------------------------------------------- */

/* When the summary sits above the form (phones, tablets): the form's own Place
   Order button is the one to use, and the basket is one tap away. */
.ss-stacked .ss-checkout-pay,
.ss-stacked .ss-edit-basket {
	display: none;
}

.wc-block-checkout__main > .ss-checkout-after {
	margin-top: 16px;
}

@media (max-width: 599px) {

	.woocommerce-checkout .wc-block-checkout__form > .wc-block-components-checkout-step,
	.woocommerce-checkout .wc-block-checkout__form > .wc-block-checkout__order-notes {
		padding: 18px 16px 14px;
	}

	.woocommerce-checkout .wc-block-components-checkout-step__title {
		font-size: 1.2rem;
	}

	.ss-checkout-trust {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
	.ss-checkout-pay__button {
		font-size: 1.05rem;
	}
}


/* ========================================================================
   22. REDUCED MOTION — respect the visitor's system setting
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {

	.ss-snow {
		display: none;
	}

	.ss-ticker__list,
	.ss-drawer[open],
	.ss-filter__chev,
	.ss-tile__img,
	.ss-ticker.is-carousel .ss-ticker__item,
	.ss-sub-toggle .ss-icon {
		animation: none;
		transition: none;
	}

	.ss-tile:hover .ss-tile__img {
		transform: none;
	}
}