/*
Theme Name:   Storefront Shrine
Theme URI:    https://betatton.com/
Description:  Storefront child theme that ports the Shrine PRO (Shopify) design
              system to WooCommerce: purple accent #6d388b, red CTA #dd1d1d,
              12px cards, 6px buttons, serif headings.
Author:       betatton
Template:     storefront
Version:      1.0.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  storefront-shrine
*/

/* ==========================================================================
   1. Design tokens  (extracted from Shrine PRO config/settings_data.json)
   ========================================================================== */

:root {
	/* colour */
	--sh-accent:        #6d388b;
	--sh-accent-dark:   #5a2d73;
	--sh-accent-soft:   #f4eef8;
	--sh-cta:           #dd1d1d;
	--sh-cta-dark:      #bf1616;
	--sh-text:          #121212;
	--sh-text-soft:     #2e2a39;
	--sh-muted:         #6b6b6b;
	--sh-bg:            #ffffff;
	--sh-bg-alt:        #f3f3f3;
	--sh-border:        #e3e3e3;
	--sh-success:       #53af01;

	/* radius */
	--sh-r-btn:   6px;
	--sh-r-card:  12px;
	--sh-r-media: 12px;
	--sh-r-input: 6px;
	--sh-r-box:   24px;
	--sh-r-badge: 6px;
	--sh-r-pill:  40px;

	/* rhythm */
	--sh-gap:            40px;
	--sh-section-space:  56px;
	--sh-max:            1280px;

	/* motion  (Shrine PRO 1.3.3 duration tokens) */
	--sh-dur-short:   100ms;
	--sh-dur-default: 200ms;
	--sh-dur-long:    500ms;
	--sh-dur-btn:     0.3s;

	/* type — headings moved to Poppins Bold in Shrine 1.3.x */
	--sh-font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
	                "PingFang SC", "Microsoft YaHei", sans-serif;
	--sh-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
	                Roboto, "Helvetica Neue", Arial, "PingFang SC",
	                "Microsoft YaHei", sans-serif;
}

/*
 * Typography preset — the tamoshoes.com original (Ecomus theme) set Albert
 * Sans on headings *and* body copy. Switch a store with:
 *   wp option update shrine_typography ecomus
 * The matching webfont is loaded instead of Poppins/Inter, not on top of it.
 */
.sh-typo-ecomus {
	--sh-font-head: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
	                Roboto, "Helvetica Neue", Arial, "PingFang SC",
	                "Microsoft YaHei", sans-serif;
	--sh-font-body: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
	                Roboto, "Helvetica Neue", Arial, "PingFang SC",
	                "Microsoft YaHei", sans-serif;
}

/*
 * The tamoshoes.com original (Ecomus) runs a 1860px container with 30px side
 * padding — the Shrine default is 1280px. Widen it on that homepage only, so
 * the brands strip and the section grids line up the way the original does.
 */
@media (min-width: 1200px) {
	body.sh-home-b2b .col-full {
		max-width: 1860px;
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body,
.site {
	font-family: var(--sh-font-body);
	color: var(--sh-text);
	background-color: var(--sh-bg);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title,
.entry-title {
	font-family: var(--sh-font-head);
	font-weight: 700;
	color: var(--sh-text);
	letter-spacing: 0.6px;
}

a {
	color: var(--sh-accent);
	transition: color var(--sh-dur-default) ease;
}

a:hover,
a:focus {
	color: var(--sh-accent-dark);
	text-decoration: underline;
	text-underline-offset: 0.3rem;
}

.site-content {
	padding-top: 0;
}

.col-full {
	max-width: var(--sh-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	position: relative;
	overflow: hidden;
	z-index: 0;
	font-family: var(--sh-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.3px;
	text-transform: none;
	border-radius: var(--sh-r-btn);
	border: 1px solid var(--sh-cta);
	background-color: var(--sh-cta);
	color: #fff;
	padding: 13px 26px;
	transition: background-color var(--sh-dur-default) ease,
	            border-color var(--sh-dur-default) ease,
	            color var(--sh-dur-default) ease,
	            box-shadow var(--sh-dur-short) ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--sh-cta-dark);
	border-color: var(--sh-cta-dark);
	color: #fff;
	box-shadow: 0 0 0 1.3px rgba(255,255,255,.9), 0 0 0 3px var(--sh-cta-dark);
}

/* outline / secondary */
.sh-btn--outline,
.woocommerce a.button.alt.sh-btn--outline {
	background-color: transparent;
	border: 1px solid var(--sh-accent);
	color: var(--sh-accent);
}

.sh-btn--outline:hover {
	background-color: var(--sh-accent);
	border-color: var(--sh-accent);
	color: #fff;
}

/* --- 3.1 centre-fill hover  (Shrine action_btn_hover = "center") ----------
   An overlay scales out from the middle instead of fading the whole button. */

.sh-btn--fill {
	background-color: transparent;
	border: 1px solid var(--sh-cta);
	color: var(--sh-cta);
}

.sh-btn--fill::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--sh-cta);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--sh-dur-btn) ease-in-out;
}

.sh-btn--fill:hover {
	background-color: transparent;
	border-color: var(--sh-cta);
	color: #fff;
	box-shadow: none;
}

.sh-btn--fill:hover::after {
	transform: scaleX(1);
}

.sh-btn--fill.sh-btn--accent {
	border-color: var(--sh-accent);
	color: var(--sh-accent);
}

.sh-btn--fill.sh-btn--accent::after {
	background-color: var(--sh-accent);
}

.sh-btn--fill.sh-btn--accent:hover {
	border-color: var(--sh-accent);
}

/* --- 3.2 arrow hover  (Shrine link_btn_hover = "arrow") -------------------
   An arrow slides in from the right while the button widens to make room. */

.sh-btn--arrow {
	transition: padding-right var(--sh-dur-btn) ease-in-out,
	            background-color var(--sh-dur-default) ease,
	            border-color var(--sh-dur-default) ease,
	            color var(--sh-dur-default) ease;
}

.sh-btn--arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.2rem;
	width: 2em;
	height: 0.65em;
	background: currentColor;
	clip-path: polygon(0% 32%, 70% 32%, 70% 0%, 100% 50%, 70% 100%, 70% 68%, 0% 68%);
	transform: translate(calc(3rem + 100%), -50%);
	transition: transform var(--sh-dur-btn) ease-in-out;
	pointer-events: none;
}

.sh-btn--arrow:hover {
	padding-right: 4.6rem;
}

.sh-btn--arrow:hover::before {
	transform: translate(0, -50%);
}

/* ==========================================================================
   4. Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
select,
textarea,
.select2-container .select2-selection--single {
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-input);
	background-color: #fff;
	color: var(--sh-text);
	padding: 12px 14px;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--sh-accent);
	outline: 1px solid var(--sh-accent);
}

/* ==========================================================================
   5. Header / navigation
   ========================================================================== */

.site-header {
	background-color: var(--sh-bg);
	border-bottom: 1px solid var(--sh-border);
}

.site-header .site-title a {
	font-family: var(--sh-font-head);
	font-size: 26px;
	letter-spacing: 1px;
	color: var(--sh-text);
}

.main-navigation ul li a {
	font-family: var(--sh-font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.4px;
	color: var(--sh-text);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
	color: var(--sh-accent);
}

.site-header-cart .cart-contents {
	color: var(--sh-text);
}

.site-header-cart .count {
	background-color: var(--sh-cta);
	color: #fff;
	border-radius: var(--sh-r-pill);
}

/* --- 5.1 announcement bar ------------------------------------------------ */

.sh-announce {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background-color: var(--sh-text-soft);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sh-announce__track {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 9px 24px;
	white-space: nowrap;
	overflow: hidden;
}

.sh-announce__dot {
	width: 5px;
	height: 5px;
	flex: none;
	border-radius: 50%;
	background-color: var(--sh-cta);
}

.sh-announce__meta {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: none;
	padding: 9px 24px;
	background-color: rgba(0, 0, 0, .18);
}

.sh-announce__item {
	color: rgba(255, 255, 255, .82);
}

/* --- 5.1b retail promo bar (betatton.com) -------------------------------- */

.sh-promo {
	background-color: var(--sh-cta);
	color: #fff;
	font-size: 13px;
}

.sh-promo__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	max-width: var(--sh-max);
	margin: 0 auto;
	padding: 9px 24px;
}

.sh-promo__welcome,
.sh-promo__offer {
	margin: 0;
}

.sh-promo__offer {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	justify-self: center;
}

.sh-promo__code {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px dashed rgba(255, 255, 255, .75);
	border-radius: var(--sh-r-badge);
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	padding: 3px 10px;
	cursor: pointer;
}

.sh-promo__code:hover {
	background: rgba(255, 255, 255, .22);
}

.sh-promo__code-label {
	font-weight: 400;
	letter-spacing: 0;
	opacity: .85;
}

.sh-promo__social {
	display: flex;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-self: end;
}

.sh-promo__social a {
	color: #fff;
	font-size: 12px;
	opacity: .9;
}

.sh-promo__social a:hover {
	opacity: 1;
	text-decoration: underline;
}

@media (max-width: 900px) {
	.sh-promo__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 8px;
	}

	.sh-promo__social {
		justify-self: center;
	}
}

/* --- 5.2 browse-all-categories mega panel -------------------------------- */

/* --- 5.1c language switcher in the primary navigation -------------------- */

.main-navigation li.sh-lang-switch {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-left: 8px;
	position: relative;
}

.main-navigation li.sh-lang-switch .trp-shortcode-switcher__wrapper {
	--font-size: 13px !important;
	--border-radius: 6px !important;
	--flag-size: 16px !important;
	display: inline-block;
}

.main-navigation li.sh-lang-switch .trp-language-switcher > div {
	background: transparent;
}

.main-navigation li.sh-lang-switch a.trp-language-item {
	padding: 6px 8px !important;
	font-weight: 500;
}

/* Keep the dropdown on top of the page rather than inside the nav flow. */
.main-navigation li.sh-lang-switch .trp-language-switcher-container {
	position: relative;
}

.main-navigation li.sh-lang-switch .trp-languages-table,
.main-navigation li.sh-lang-switch .trp-language-switcher ul {
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	z-index: 9999;
	min-width: 120px;
	background: #fff;
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-input);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
	padding: 4px;
}

@media (max-width: 768px) {
	.main-navigation li.sh-lang-switch {
		display: block;
		margin: 8px 0 0;
	}
}

.main-navigation li.sh-browse-categories {
	position: static;
}

.sh-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 9999;
	display: none;
	padding: 0;
	background-color: #fff;
	border-top: 1px solid var(--sh-border);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}

.main-navigation li.sh-browse-categories:hover .sh-mega,
.main-navigation li.sh-browse-categories.focus .sh-mega,
.sh-mega.is-open {
	display: block;
}

.sh-mega__inner {
	max-width: var(--sh-max);
	margin: 0 auto;
	padding: 32px 24px 26px;
}

.sh-mega__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: 22px;
}

.sh-mega__item {
	display: block;
	overflow: hidden;
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-card);
	text-decoration: none;
	transition: border-color var(--sh-dur-default) ease,
	            box-shadow var(--sh-dur-default) ease;
}

.sh-mega__item:hover {
	border-color: var(--sh-accent);
	box-shadow: 0 0 0 3px rgba(109, 56, 139, .1);
}

.sh-mega__thumb {
	display: block;
	aspect-ratio: 1.83 / 1;
	overflow: hidden;
	background-color: var(--sh-bg-alt);
}

.sh-mega__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sh-dur-long) ease;
}

.sh-mega__item:hover .sh-mega__img {
	transform: scale(1.03);
}

.sh-mega__meta {
	display: block;
	padding: 12px 14px 14px;
}

.sh-mega__name {
	display: block;
	font-family: var(--sh-font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--sh-text);
}

.sh-mega__count {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: var(--sh-muted);
}

.sh-mega__all {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--sh-accent);
}

@media (max-width: 1024px) {
	.sh-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.sh-announce__meta { display: none; }
	.sh-announce__track { padding: 8px 16px; gap: 18px; font-size: 10px; }

	/* The panel is a desktop affordance — the mobile menu lists the links. */
	.sh-mega { display: none !important; }
}

/* ==========================================================================
   6. Product loop / cards
   ========================================================================== */

ul.products li.product {
	text-align: left;
	position: relative;
	/* Cards keep each photo's own proportions, so the content below the image
	   starts at a different height in every card. Flex + margin-top:auto on the
	   button keeps the row reading as a grid. */
	display: flex;
	flex-direction: column;
}

ul.products li.product .woocommerce-loop-product__link {
	display: block;
	overflow: hidden;
	border-radius: var(--sh-r-media);
}

ul.products li.product img {
	border-radius: var(--sh-r-media);
	background-color: var(--sh-bg-alt);
	transition: transform var(--sh-dur-long) ease;
}

/* image zoom on hover — matches Shrine card behaviour */
ul.products li.product:hover img {
	transform: scale(1.05);
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.35;
	padding-top: 12px;
	color: var(--sh-text);
	transition: color var(--sh-dur-default) ease;
}

body.sh-home-b2b ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--sh-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	margin-top: 13px;
	padding-top: 0;
	color: #202020;
}

ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--sh-accent);
}

body.sh-home-b2b ul.products li.product:hover .woocommerce-loop-product__title {
	color: #202020;
}

ul.products li.product .price {
	margin-bottom: 14px;
	color: var(--sh-cta);
	font-weight: 700;
	font-size: 15px;
}

body.sh-home-b2b ul.products li.product .price {
	margin-top: 5px;
	margin-bottom: 0;
	color: #202020;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
}

ul.products li.product .price del {
	color: var(--sh-muted);
	font-weight: 400;
}

ul.products li.product .star-rating span::before,
.star-rating span::before {
	color: #ffb700;
}

ul.products li.product .button,
ul.products li.product .added_to_cart {
	margin-top: auto;
	padding-top: 11px;
	padding-bottom: 11px;
	text-align: center;
}

body.sh-home-b2b ul.products li.product .button,
body.sh-home-b2b ul.products li.product .added_to_cart {
	margin-top: 12px;
	padding: 13px 24px;
	width: 100%;
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #202020;
	font-family: var(--sh-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	border: 1px solid rgb(236 236 236);
	border-radius: 3px;
	box-shadow: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

body.sh-home-b2b ul.products li.product .button:hover,
body.sh-home-b2b ul.products li.product .button:focus,
body.sh-home-b2b ul.products li.product .added_to_cart:hover,
body.sh-home-b2b ul.products li.product .added_to_cart:focus {
	background: #202020;
	border-color: #202020;
	color: #fff;
}

/* sale badge */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background-color: var(--sh-cta);
	color: #fff;
	border-radius: var(--sh-r-badge);
	font-family: var(--sh-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 7px 10px;
}

/* ==========================================================================
   7. Homepage sections
   ========================================================================== */

.sh-section {
	padding-top: var(--sh-section-space);
	padding-bottom: var(--sh-section-space);
}

.sh-section--alt {
	background-color: var(--sh-bg-alt);
}

.sh-section__head {
	max-width: 760px;
	margin: 0 auto 32px;
	text-align: center;
}

.sh-section__title {
	font-family: var(--sh-font-head);
	font-size: clamp(24px, 3vw, 38px);
	line-height: 1.2;
	margin: 0 0 10px;
	letter-spacing: 0.6px;
}

.sh-section__title strong {
	font-weight: 700;
}

.sh-section__sub {
	color: var(--sh-text-soft);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

/* --- 7.1 hero slideshow --- */

.sh-hero {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(135deg, #6d388b 0%, #3d2050 55%, #2e2a39 100%);
	color: #fff;
	text-align: center;
}

.sh-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 18% 28%, rgba(255,255,255,.14), transparent 42%),
		radial-gradient(circle at 82% 72%, rgba(221,29,29,.22), transparent 46%);
	pointer-events: none;
}

.sh-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 900px;
	padding: 80px 24px;
}

.sh-hero__eyebrow {
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: .85;
	margin: 0 0 18px;
}

.sh-hero__title {
	font-family: var(--sh-font-head);
	font-size: clamp(34px, 5.4vw, 66px);
	line-height: 1.08;
	margin: 0 0 20px;
	color: #fff;
}

.sh-hero__text {
	font-size: clamp(15px, 1.6vw, 19px);
	line-height: 1.7;
	max-width: 640px;
	margin: 0 auto 32px;
	opacity: .94;
}

.sh-hero__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.sh-hero .sh-btn--ghost {
	background: transparent;
	border: 1px solid rgba(255,255,255,.75);
	color: #fff;
}

.sh-hero .sh-btn--ghost:hover {
	background: #fff;
	border-color: #fff;
	color: var(--sh-accent);
}

/* --- 7.2 video --- */

.sh-video__frame {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--sh-r-media);
	overflow: hidden;
	background: var(--sh-text-soft);
	box-shadow: 0 18px 44px rgba(18,18,18,.14);
}

.sh-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Click-to-play cover: lighter than loading the YouTube player up front. */
.sh-video__play {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	overflow: hidden;
}

.sh-video__cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sh-dur-long) ease;
}

.sh-video__play:hover .sh-video__cover {
	transform: scale(1.03);
}

.sh-video__play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 78px;
	height: 78px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: rgba(221, 29, 29, .94);
	box-shadow: 0 10px 34px rgba(0, 0, 0, .32);
	transition: background-color var(--sh-dur-default) ease,
	            transform var(--sh-dur-default) ease;
}

.sh-video__play-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent #fff;
}

.sh-video__play:hover .sh-video__play-icon {
	background-color: var(--sh-cta-dark);
	transform: translate(-50%, -50%) scale(1.06);
}

@media (max-width: 480px) {
	.sh-video__play-icon {
		width: 58px;
		height: 58px;
	}

	.sh-video__play-icon::after {
		border-width: 10px 0 10px 16px;
	}
}

/* --- 7.3 comparison table --- */

.sh-compare {
	max-width: 760px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-box);
	overflow: hidden;
}

.sh-compare__row {
	display: grid;
	grid-template-columns: 1fr 120px 120px;
	align-items: center;
	gap: 12px;
	padding: 18px 26px;
	border-top: 1px solid var(--sh-border);
}

.sh-compare__row:first-child {
	border-top: 0;
	background: var(--sh-accent);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .5px;
}

.sh-compare__label {
	font-size: 15px;
	color: var(--sh-text-soft);
}

.sh-compare__row:first-child .sh-compare__label {
	color: #fff;
}

.sh-compare__mark {
	text-align: center;
	font-size: 15px;
	font-weight: 700;
}

.sh-compare__mark--yes {
	color: var(--sh-success);
}

.sh-compare__mark--no {
	color: #b9b9b9;
}

/* --- 7.4 featured collection grid --- */

.sh-grid {
	display: grid;
	gap: var(--sh-gap);
}

/* WooCommerce renders a <ul class="products"> — that list *is* the grid. */
.sh-grid > ul.products {
	display: grid;
	gap: var(--sh-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-grid--4 > ul.products { grid-template-columns: repeat(4, 1fr); }
.sh-grid--3 > ul.products { grid-template-columns: repeat(3, 1fr); }

.sh-grid ul.products::before,
.sh-grid ul.products::after {
	content: none;
	display: none;
}

.sh-grid ul.products li.product {
	margin: 0 !important;
	width: 100% !important;
	float: none !important;
}

.sh-empty {
	text-align: center;
	color: var(--sh-muted);
	padding: 32px 0;
}

.sh-more {
	text-align: center;
	margin-top: 34px;
}

/* --- 7.5 image banner --- */

.sh-banner {
	position: relative;
	border-radius: var(--sh-r-media);
	overflow: hidden;
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: linear-gradient(120deg, #2e2a39 0%, #6d388b 100%);
	color: #fff;
	padding: 60px 24px;
}

.sh-banner--soft {
	background: linear-gradient(120deg, #f3f3f3 0%, #e6dced 100%);
	color: var(--sh-text);
}

.sh-banner__title {
	font-family: var(--sh-font-head);
	font-size: clamp(26px, 3.6vw, 44px);
	margin: 0 0 14px;
	color: inherit;
}

.sh-banner__text {
	max-width: 620px;
	margin: 0 auto 26px;
	line-height: 1.7;
	font-size: 16px;
	opacity: .93;
}

.sh-banner__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.sh-banner .sh-btn--ghost {
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
}

.sh-banner .sh-btn--ghost:hover {
	background: rgba(255,255,255,.16);
}

/* --- 7.6 collection list --- */

/* --- 7.6 collection list --- */

/* The old retail grid stays untouched below; the B2B homepage uses the
   Ecomus-style horizontal slider. */
.sh-collections {
	display: grid;
	gap: 24px;
}

.sh-collections--3 { grid-template-columns: repeat(3, 1fr); }

.sh-collection {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--sh-r-card);
	overflow: hidden;
	background: linear-gradient(150deg, #6d388b 0%, #2e2a39 100%);
	color: #fff;
	text-decoration: none;
}

.sh-collection:nth-child(2n) {
	background: linear-gradient(150deg, #dd1d1d 0%, #7a1010 100%);
}

.sh-collection:nth-child(3n) {
	background: linear-gradient(150deg, #2e2a39 0%, #6d388b 100%);
}

.sh-collection__inner {
	position: absolute;
	inset: auto 0 0 0;
	padding: 26px;
	background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
}

.sh-collection__name {
	font-family: var(--sh-font-head);
	font-size: 22px;
	margin: 0;
	color: #fff;
}

.sh-collection__count {
	font-size: 13px;
	opacity: .86;
	margin: 6px 0 0;
}

.sh-collection:hover .sh-collection__name {
	color: #fff;
}

/* Retail category cards with a real photo replace the gradient fallback. */
.sh-collection--has-media {
	background: var(--sh-bg-alt);
}

.sh-collection--has-media .sh-collection__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.sh-collection--has-media .sh-collection__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 2s ease;
}

.sh-collection--has-media:hover .sh-collection__img {
	transform: scale(1.06);
}

/* --- 7.7 image with text --- */

.sh-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sh-gap);
	align-items: center;
}

.sh-split__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--sh-r-media);
	background: linear-gradient(140deg, #2e2a39 0%, #6d388b 100%);
	overflow: hidden;
}

/* --- 7.x migrated photography -------------------------------------------- */

.sh-hero__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Keep the headline readable over a photo. */
.sh-hero:has(.sh-hero__img)::after {
	background: linear-gradient(180deg, rgba(18, 18, 18, .58), rgba(18, 18, 18, .34));
}

/*
 * betatton.com ran a text-free slideshow (show_text_box: false,
 * image_overlay_opacity: 0), so the image carries the hero on its own.
 */
.sh-hero--image {
	min-height: 0;
	background: var(--sh-bg);
}

.sh-hero--image::after {
	content: none;
}

.sh-hero--image .sh-hero__img {
	position: relative;
	inset: auto;
	height: auto;
	aspect-ratio: 1880 / 1000;
	object-fit: cover;
	border-radius: 0;
	/* The original slideshow runs full-bleed at every breakpoint. */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

@media (max-width: 768px) {
	.sh-hero--image .sh-hero__img {
		aspect-ratio: 4 / 3;
	}
}

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

.sh-banner__img--mobile {
	display: none;
}

.sh-banner:has(.sh-banner__img)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(18, 18, 18, .2), rgba(18, 18, 18, .48));
	pointer-events: none;
}

.sh-banner > div {
	position: relative;
	z-index: 2;
}

.sh-split__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	/* The banner ships a separate portrait crop for phones. */
	.sh-banner__img { display: none; }
	.sh-banner__img--mobile { display: block; }
}

.sh-split__title {
	font-family: var(--sh-font-head);
	font-size: clamp(24px, 3vw, 36px);
	margin: 0 0 16px;
	line-height: 1.2;
}

.sh-split__text {
	font-size: 16px;
	line-height: 1.75;
	color: var(--sh-text-soft);
	margin: 0 0 22px;
}

/* --- 7.8 reviews --- */

.sh-reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sh-review {
	background: var(--sh-bg-alt);
	border-radius: 16px;
	padding: 26px;
	display: flex;
	flex-direction: column;
}

.sh-review__stars {
	color: #ffb700;
	font-size: 15px;
	letter-spacing: 2px;
	margin-bottom: 12px;
}

.sh-review__text {
	font-size: 15px;
	line-height: 1.7;
	color: var(--sh-text-soft);
	margin: 0 0 16px;
	flex: 1;
}

.sh-review__author {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .4px;
	color: var(--sh-text);
}

.sh-rating-line {
	text-align: center;
	font-size: 18px;
	color: var(--sh-text-soft);
	margin: 0 0 30px;
}

.sh-rating-line strong {
	font-size: 22px;
	color: var(--sh-text);
}

/* ==========================================================================
   8. B2B / OEM-ODM homepage  (tamoshoes.com layout)
   ========================================================================== */

/* --- 8.1 scrolling ticker --- */

.sh-ticker {
	overflow: hidden;
	background: var(--sh-text-soft);
	color: #fff;
	padding: 11px 0;
}

.sh-ticker__track {
	display: flex;
	align-items: center;
	gap: 26px;
	width: max-content;
	animation: sh-ticker 28s linear infinite;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	white-space: nowrap;
}

.sh-ticker__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sh-cta);
	flex: none;
}

@keyframes sh-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.sh-ticker__track { animation: none; }
}

/* --- 8.2 split slideshow hero (Ecomus layout) ----------------------------
   The original runs three slides side by side with a matching photo, each
   slide carrying its own background colour. Measurements below are taken
   from the exported theme (1rem = 10px there): h2 = 5.4rem/2.5rem, body copy
   = 2rem, button 52px tall with a 152px min-width, dots 2rem off the bottom.
   ------------------------------------------------------------------------- */

.sh-hero-split {
	background: var(--sh-bg);
	/* The original hero is full-bleed, not boxed inside the container. The
	   negative inline margins pull it out of whatever wrapper it sits in. */
	margin-inline: calc(50% - 50vw);
}

.sh-hero-split__grid {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.sh-hero-split__grid {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}
}

.sh-hero-split__content {
	position: relative;
	display: grid;
	/* All slides share one cell so the column height never jumps. */
	grid-template-areas: "slide";
}

.sh-hero-split__slide {
	grid-area: slide;
	display: flex;
	align-items: center;
	background-color: var(--sh-slide-bg, #fff);
	color: var(--sh-slide-fg, #151515);
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease, visibility 0s linear .7s;
}

.sh-hero-split__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .7s ease, visibility 0s;
}

.sh-hero-split__inner {
	width: 100%;
	padding: 48px 24px;
}

@media (min-width: 768px) {
	.sh-hero-split__inner {
		/* Original: padding-inline-start max(3rem, (100vw - 1800px) / 2). */
		padding: 40px 40px 40px max(30px, calc((100vw - 1800px) / 2));
	}
}

.sh-hero-split__title {
	margin: 0 0 18px;
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: 25px;
	line-height: 1.2;
	letter-spacing: 0;
	color: inherit;
}

@media (min-width: 768px) {
	.sh-hero-split__title {
		font-size: 54px;
	}
}

/* Slide two lists capabilities, so it runs smaller and lighter. */
.sh-hero-split__slide:nth-child(2) .sh-hero-split__title {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.45;
}

@media (min-width: 768px) {
	.sh-hero-split__slide:nth-child(2) .sh-hero-split__title {
		font-size: 30px;
	}
}

.sh-hero-split__text {
	margin: 0 0 32px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: inherit;
}

@media (min-width: 768px) {
	.sh-hero-split__text {
		margin-bottom: 48px;
		font-size: 20px;
	}
}

.sh-hero-split__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 100px;
	height: 52px;
	padding: 5px 30px;
	background-color: #fff;
	color: #000;
	font-family: var(--sh-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}

@media (min-width: 768px) {
	.sh-hero-split__btn {
		min-width: 152px;
		font-size: 18px;
	}
}

.sh-hero-split__btn:hover,
.sh-hero-split__btn:focus {
	background-color: #000;
	color: #fff;
}

/* Slide two sits on white, where a white button disappears entirely — the
   original ships it borderless anyway. A hairline keeps it readable. */
.sh-hero-split__slide:nth-child(2) .sh-hero-split__btn {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.sh-hero-split__arrow {
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
}

.sh-hero-split__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 12px;
}

@media (min-width: 768px) {
	.sh-hero-split__dots {
		justify-content: flex-start;
		padding-left: max(30px, calc((100vw - 1800px) / 2));
	}
}

.sh-hero-split__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #151515;
	opacity: .3;
	cursor: pointer;
	transition: opacity .25s ease, width .25s ease;
}

.sh-hero-split__dot.is-active {
	width: 26px;
	border-radius: 9999px;
	opacity: 1;
}

/* --- 8.3 quality feature --- */

.sh-feature {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: var(--sh-gap);
	align-items: center;
}

.sh-feature__title {
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 50px);
	line-height: 1.05;
	margin: 0;
}

.sh-feature__text {
	font-size: 17px;
	line-height: 1.7;
	color: var(--sh-text-soft);
	margin: 0 0 22px;
}

/* --- 8.4 category slider (multi-column) --- */

.sh-collections--grid {
	--sh-collection-cols: 4;
}

.sh-collections--grid.sh-collections--3 {
	--sh-collection-cols: 6;
}

/* The original collections-list runs an offset flex slider: each slide gets
   its gap as leading padding and the viewport uses a negative start margin.
   CSS grid's auto-columns cannot express that, so B2B switches to flex here. */
body.sh-home-b2b .sh-collections--grid.sh-collections--3 {
	--sh-collection-cols: 2;
	--sh-collection-gap: 15px;
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin-inline-start: calc(-1 * var(--sh-collection-gap));
	padding-bottom: 4px;
}

body.sh-home-b2b .sh-collections--grid.sh-collections--3 .sh-collection {
	flex: 0 0 calc((100% + var(--sh-collection-gap)) / var(--sh-collection-cols) - var(--sh-collection-gap));
	min-width: 0;
	margin-inline-start: var(--sh-collection-gap);
}

body.sh-home-b2b .sh-collections--grid.sh-collections--3::-webkit-scrollbar { display: none; }

body.sh-home-b2b .sh-collection {
	position: relative;
	display: block;
	aspect-ratio: auto;
	border-radius: 0;
	overflow: visible;
	background: none;
	color: #202020;
	text-decoration: none;
	scroll-snap-align: start;
}

body.sh-home-b2b .sh-collection__inner {
	position: static;
	display: block;
	margin-top: 13px;
	padding: 0;
	background: none;
	text-align: center;
}

body.sh-home-b2b .sh-collection__name {
	font-family: var(--sh-font-body);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	color: #202020;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.sh-home-b2b .sh-collection__count {
	opacity: 1;
	color: #808080;
}

body.sh-home-b2b .sh-collection:hover .sh-collection__name {
	color: #202020;
}

.sh-section__kicker {
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sh-text);
	margin: 0;
}

.sh-section__title--collection {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.sh-section__viewall {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 6px;
	margin-bottom: -6px;
	font-family: var(--sh-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sh-text);
	text-decoration: none;
}

.sh-section__viewall::after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 1px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: currentColor;
}

.sh-section__viewall:hover {
	color: var(--sh-accent);
}

.sh-section__viewall svg {
	flex: none;
}

@media (min-width: 1150px) {
	.sh-section__kicker {
		font-size: 44px;
		line-height: 1.15;
	}

	.sh-section__title--collection {
		position: relative;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 0;
	}

	.sh-section__viewall {
		position: absolute;
		right: 0;
	}
}

@media (max-width: 767px) {
	body.sh-home-b2b .sh-collections--grid.sh-collections--3 {
		--sh-collection-cols: 2;
		--sh-collection-gap: 15px;
	}

	body.sh-home-b2b .sh-collections--grid.sh-collections--3 .sh-collection {
		flex-basis: calc((100% + var(--sh-collection-gap)) / 2 - var(--sh-collection-gap));
	}
}

/* --- 8.5 product tabs --- */

.sh-tabs__nav {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 36px;
}

.sh-tabs__btn {
	background: transparent;
	border: 1px solid var(--sh-border);
	color: var(--sh-text);
	border-radius: var(--sh-r-pill);
	padding: 11px 24px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background-color var(--sh-dur-default) ease,
	            border-color var(--sh-dur-default) ease,
	            color var(--sh-dur-default) ease;
}

.sh-tabs__btn:hover {
	border-color: var(--sh-accent);
	color: var(--sh-accent);
	background: transparent;
}

.sh-tabs__btn.is-active {
	background: var(--sh-accent);
	border-color: var(--sh-accent);
	color: #fff;
}

.sh-tabs__panel { display: none; }
.sh-tabs__panel.is-active { display: block; }

/* --- 8.6 welcome banner (Ecomus masonry grid) ----------------------------
   The original is one banner block: the heading sits inside a hairline box at
   the top, below it a photo collage (one large square + two squares) on the
   left and the caption + department grid on the right. The whole thing is a
   CSS grid, so cells stretch with the viewport instead of snapping between
   fixed breakpoints.
   ------------------------------------------------------------------------- */

.sh-welcome {
	display: block;
	padding: 0;
}

.sh-welcome__heading {
	margin: 0 0 30px;
	text-align: center;
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: 25px;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--sh-text);
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.sh-welcome__heading {
		font-size: 54px;
	}
}

.sh-welcome__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 768px) {
	.sh-welcome__grid {
		gap: 20px;
	}
}

/* Three equal squares in a row — the original's md:hdt-grid-cols-3. */
.sh-welcome__photos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 768px) {
	.sh-welcome__photos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sh-welcome__cell {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--sh-r-card);
	background: var(--sh-bg-alt);
	aspect-ratio: 1 / 1;
}

.sh-welcome__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .75s ease-in-out;
}

@media (hover: hover) {
	.sh-welcome__cell:hover .sh-welcome__img {
		transform: scale(1.04);
	}
}

.sh-welcome__title {
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: clamp(24px, 3vw, 38px);
	margin: 0 0 18px;
}

.sh-welcome__list {
	margin: 0 0 22px;
	padding-left: 18px;
	color: var(--sh-text-soft);
	font-size: 16px;
	line-height: 1.75;
}

.sh-welcome__panel {
	/* Fills the row under the photo strip, matching the video banner that
	   follows the photos in the original. */
	padding-top: 6px;
}

/* --- 8.7 partner brands --------------------------------------------------
   The original is a six-across slider inside one hairline box: a single 1px
   border around the strip, 1px dividers drawn as inset shadows (so adjacent
   cells never double up), square cells, and logos that sit desaturated until
   you hover them.
   ------------------------------------------------------------------------- */

.sh-brands-section {
	padding: 10px 0 20px;
}

.sh-brands-section__title {
	margin: 0 0 32px;
	text-align: center;
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: 25px;
	line-height: 1.2;
	letter-spacing: 0;
	color: #808080;
}

@media (min-width: 768px) {
	.sh-brands-section__title {
		font-size: 54px;
	}
}

.sh-brands {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border: 1px solid rgb(235 235 235);
	background: #fff;
}

@media (min-width: 768px) {
	.sh-brands {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1150px) {
	.sh-brands {
		grid-template-columns: repeat(6, 1fr);
	}
}

.sh-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-shadow: inset -1px -1px rgb(235 235 235), -1px -1px rgb(235 235 235);
}

.sh-brand__name {
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 1.4px;
	color: var(--sh-muted);
}

/* --- 8.8 migrated site imagery ------------------------------------------- */

/* Category cards: landscape artwork, title and count below the photo. */
body.sh-home-b2b .sh-collection--has-media .sh-collection__media {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--sh-bg-alt);
	aspect-ratio: 1.83 / 1;
}

body.sh-home-b2b .sh-collection__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 2s ease;
}

body.sh-home-b2b .sh-collection:hover .sh-collection__img {
	transform: scale(1.09);
}

/* Hero media column. The original lets the photo drive its own height via
   --aspect-ratioapt-md (1.2565), so every slide keeps its artwork ratio and
   no slide is letterboxed. It leads on mobile like order-first@mobile. */
.sh-hero-split__media {
	position: relative;
	overflow: hidden;
	background: var(--sh-bg-alt);
	aspect-ratio: 1.2565;
	order: -1;
}

@media (min-width: 768px) {
	.sh-hero-split__media {
		order: 0;
	}
}

.sh-hero-split__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .7s ease;
}

.sh-hero-split__img.is-active {
	opacity: 1;
}

.sh-hero-split__placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), transparent 45%),
		linear-gradient(140deg, #6d388b 0%, #3d2050 60%, #2e2a39 100%);
}

/* Department tabs: list on the left, selected photo on the right. */
.sh-welcome__depts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
	align-items: stretch;
}

.sh-depts__list {
	border: 1px solid #202020;
	padding: 20px 15px;
	display: flex;
	flex-direction: column;
}

.sh-dept-tab {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(32, 32, 32, .12);
	color: #202020;
	font-family: var(--sh-font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: color .25s ease;
}

.sh-dept-tab:last-child { border-bottom: 0; }

.sh-dept-tab svg {
	width: 10px;
	height: 10px;
	flex: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}

.sh-dept-tab:hover svg,
.sh-dept-tab[aria-selected="true"] svg,
.sh-dept-tab.is-active svg {
	opacity: 1;
	visibility: visible;
}

.sh-dept-tab[aria-selected="true"],
.sh-dept-tab.is-active { border-color: #202020; }

.sh-depts__media {
	position: relative;
	overflow: hidden;
	background: var(--sh-bg-alt);
	aspect-ratio: 1.72 / 1;
}

.sh-dept {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease, visibility .45s ease;
}

.sh-dept.is-active {
	opacity: 1;
	visibility: visible;
}

.sh-dept__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Compact capability icons: exactly four, matching the original icon_box. */
.sh-capabilities {
	padding: 20px 0;
}

.sh-capabilities__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 60px;
}

.sh-capability {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sh-capability svg {
	width: 26px;
	height: 26px;
	flex: none;
	fill: currentColor;
}

.sh-capability__name {
	margin: 0;
	font-family: var(--sh-font-body);
	font-size: 18px;
	font-weight: 500;
	color: #202020;
}

/* Background video banner. */
.sh-video-banner {
	margin-bottom: 52px;
}

.sh-video-banner__item {
	position: relative;
	overflow: hidden;
	height: min(800px, calc(100vh - 160px));
	background: #000;
}

.sh-video-banner__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sh-video-banner__content {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	color: #fff;
}

.sh-video-banner__title {
	margin: 0 0 16px;
	font-family: var(--sh-font-head);
	font-size: 54px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

.sh-video-banner__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 27px;
	font-weight: 400;
	line-height: 1.35;
	color: #fff;
}

/* Partner brand logos. */
.sh-brand__img {
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* Desaturated until hovered — desktop only, like the original. */
@media (hover: hover) and (min-width: 1150px) {
	.sh-brand__img {
		filter: grayscale(100%);
		opacity: .5;
		transition: filter .25s linear, opacity .25s linear;
	}

	.sh-brand:hover .sh-brand__img {
		filter: none;
		opacity: 1;
	}
}

@media (max-width: 1024px) {
	.sh-collections--grid,
	body.sh-home-b2b .sh-collections--grid.sh-collections--3 { --sh-collection-cols: 3; }
	body.sh-home-b2b .sh-collections--grid.sh-collections--3 { --sh-collection-cols: 3; --sh-collection-gap: 30px; }
	.sh-video-banner__item { height: 800px; }
}

@media (max-width: 767px) {
	.sh-feature { grid-template-columns: 1fr; }
	.sh-collections--grid,
	body.sh-home-b2b .sh-collections--grid.sh-collections--3 { --sh-collection-cols: 2; }
	body.sh-home-b2b .sh-collections--grid.sh-collections--3 { --sh-collection-cols: 2; --sh-collection-gap: 15px; }
	.sh-capabilities__grid { flex-direction: column; }
	.sh-capability { flex-direction: column; text-align: center; }
	.sh-video-banner__item { height: 260px; }
	.sh-video-banner__title { font-size: 28px; margin-bottom: 10px; }
	.sh-video-banner__list { font-size: 12px; }

	/* Narrow cards: the desktop caption padding/size pushes the label out. */
	.sh-collection__name { font-size: 15px; line-height: 1.25; }
	.sh-collection__count { font-size: 11px; margin-top: 3px; }
}

@media (min-width: 768px) {
	.sh-welcome__depts {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		gap: 15px;
	}
	.sh-depts__list { padding: 27px 15px; }
	.sh-dept-tab { padding: 10px 0; font-size: 22px; }
}

@media (min-width: 1150px) {
	body.sh-home-b2b .sh-collections--grid.sh-collections--3 { --sh-collection-gap: 50px; --sh-collection-cols: 6; }
	.sh-depts__list { padding: 46px 30px 58px; }
	.sh-dept-tab { padding: 15px 0; font-size: 26px; }
}

@media (min-width: 1025px) and (max-width: 1149px) {
	body.sh-home-b2b .sh-collections--grid.sh-collections--3 {
		--sh-collection-gap: 30px;
		--sh-collection-cols: 3;
	}
}

@media (min-width: 1441px) {
	.sh-depts__list { padding: 66px 56px 78px 79px; }
	.sh-dept-tab { padding: 20px 0; font-size: 30px; }
}

@media (max-width: 480px) {
}

/* ==========================================================================
   9. Micro-interactions
   ========================================================================== */

/* icon scale on hover (Shrine: .header__icon:hover .icon { scale(1.07) }) */
.site-header .site-search .widget_product_search button:hover svg,
.site-header .site-header-cart .cart-contents:hover .count,
.main-navigation .menu-item-has-children > a::after,
.sh-icon-btn:hover .icon,
.sh-icon-btn:hover svg {
	transform: scale(1.07);
}

.sh-icon-btn .icon,
.sh-icon-btn svg {
	transition: transform var(--sh-dur-default) ease;
}

/* arrow nudge inside links (Shrine: .animate-arrow) */
.sh-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	transition: gap var(--sh-dur-short) ease;
}

.sh-link-arrow::after {
	content: "";
	width: 1.5em;
	height: 0.7em;
	background: currentColor;
	clip-path: polygon(0% 32%, 70% 32%, 70% 0%, 100% 50%, 70% 100%, 70% 68%, 0% 68%);
	transform: translateX(-0.25rem);
	transition: transform var(--sh-dur-short) ease;
}

.sh-link-arrow:hover {
	gap: 12px;
	text-decoration: none;
}

.sh-link-arrow:hover::after {
	transform: translateX(-0.05rem);
}

/* Section reveal — Shrine enable_load_animations, repeat_section_animations = false.
   Scoped to .sh-js so the content stays visible when JavaScript is unavailable. */
.sh-js .sh-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--sh-dur-long) ease, transform var(--sh-dur-long) ease;
	will-change: opacity, transform;
}

.sh-js .sh-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.sh-js .sh-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	ul.products li.product:hover img {
		transform: none;
	}
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.site-footer {
	background-color: var(--sh-text-soft);
	color: #d8d5e0;
	margin-top: 0;
}

/* Storefront's Customizer prints inline rules that outrank the plain
   `.site-footer a` / `.site-footer .widget-title` selectors, so these
   overrides mirror its specificity to keep the Shrine palette. */
.site-footer a:not(.button):not(.components-button) {
	color: #d8d5e0;
}

.site-footer a:not(.button):not(.components-button):hover {
	color: #fff;
	text-decoration: none;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget .widget-title,
.site-footer .widget .widgettitle {
	color: #fff;
}

.footer-widgets {
	padding-top: 64px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.site-footer .widget {
	margin-bottom: 40px;
	font-size: 14px;
	line-height: 1.7;
}

.site-footer .widget .widget-title {
	margin-bottom: 16px;
	padding-bottom: 0;
	border-bottom: 0;
	font-family: var(--sh-font-head);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.site-footer .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .widget ul li {
	margin: 0 0 9px;
	padding: 0;
	list-style: none;
	line-height: 1.5;
}

/* Storefront draws a file glyph before every nav-menu item. */
.site-footer .widget_nav_menu ul li::before,
.site-footer .widget ul li::before {
	display: none;
	content: none;
}

.site-footer .widget a {
	font-weight: 400;
	text-decoration: none;
}

.site-footer .widget_text p:last-child {
	margin-bottom: 0;
}

.site-info {
	padding: 22px 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
}

/* ==========================================================================
   11. WooCommerce layout
   ========================================================================== */

/* Shrine's collection pages are full width — drop Storefront's blog sidebar. */
.post-type-archive-product .widget-area,
.tax-product_cat .widget-area,
.tax-product_tag .widget-area,
.single-product .widget-area,
.woocommerce-cart .widget-area,
.woocommerce-checkout .widget-area {
	display: none;
}

.post-type-archive-product .content-area,
.tax-product_cat .content-area,
.tax-product_tag .content-area,
.single-product .content-area,
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area {
	width: 100%;
	float: none;
	margin-right: 0;
}

/* Search submit buttons must not wrap ("Searc / h"). */
.site-search button,
.widget_product_search button,
.widget_search button,
.search-submit,
input[type="submit"].search-submit {
	white-space: nowrap;
	padding-left: 18px;
	padding-right: 18px;
}

.widget_product_search form,
.widget_search form {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.widget_product_search form input[type="search"],
.widget_search form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border-radius: var(--sh-r-btn);
	border-color: var(--sh-border);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--sh-accent);
	color: #fff;
	border-color: var(--sh-accent);
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.sh-grid--4 > ul.products { grid-template-columns: repeat(2, 1fr); }
	.sh-reviews { grid-template-columns: repeat(2, 1fr); }
	:root { --sh-gap: 28px; --sh-section-space: 44px; }
}

@media (max-width: 768px) {
	.sh-hero { min-height: 460px; }
	.sh-grid--4 > ul.products,
	.sh-grid--3 > ul.products,
	.sh-reviews { grid-template-columns: repeat(2, 1fr); }
	.sh-split { grid-template-columns: 1fr; }
	.sh-compare__row { grid-template-columns: 1fr 74px 74px; padding: 16px 18px; }
	.sh-section { padding-top: 36px; padding-bottom: 36px; }
	:root { --sh-gap: 20px; }
}

@media (max-width: 480px) {
	/* Shrine uses columns_mobile: 2 for product grids */
	.sh-grid--4 > ul.products,
	.sh-grid--3 > ul.products { grid-template-columns: repeat(2, 1fr); }
	.sh-reviews { grid-template-columns: 1fr; }
	ul.products li.product .button { font-size: 13px; padding: 11px 12px; }
}

/* ==========================================================================
   13. Single product page  (Shrine product page layout)

   Mirrors Shrine PRO: media left / sticky summary right, gallery with a
   thumbnail strip, picker buttons for variants, tabs underneath.
   ========================================================================== */

.sh-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sh-product {
	position: relative;
	margin-top: 20px;
}

.sh-product__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.32fr) minmax(320px, 1fr);
	gap: 56px;
	align-items: start;
}

/* --- 13.1 media / gallery ------------------------------------------------ */

.sh-product__media {
	position: relative;
	min-width: 0;
}

.sh-gallery {
	width: 100%;
}

.sh-gallery__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--sh-bg-alt);
	border-radius: var(--sh-r-media);
}

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

.sh-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin-top: 14px;
}

.sh-gallery__thumb {
	display: block;
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	background-color: var(--sh-bg);
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-input);
	aspect-ratio: 1 / 1;
	line-height: 0;
	transition: border-color var(--sh-dur-default) ease,
	            box-shadow var(--sh-dur-default) ease;
}

.sh-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}

.sh-gallery__thumb:hover {
	background-color: var(--sh-bg);
	border-color: var(--sh-accent);
	box-shadow: 0 0 0 3px rgba(109, 56, 139, .12);
}

.sh-gallery__thumb.is-active {
	background-color: var(--sh-bg);
	border-color: var(--sh-accent);
	box-shadow: 0 0 0 1px var(--sh-accent);
}

/* sale badge sits on the media, Shrine trust_badge_position = top-right */
.sh-product .onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	margin: 0;
}

/* --- 13.2 summary column ------------------------------------------------- */

.sh-product__info {
	min-width: 0;
}

@media (min-width: 1025px) {
	/* enable_sticky_info = true */
	.sh-product__info {
		position: sticky;
		top: 28px;
		align-self: start;
	}
}

.sh-product__info .product_title {
	margin: 0 0 10px;
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: clamp(23px, 2.4vw, 33px);
	line-height: 1.18;
	letter-spacing: 0;
	color: var(--sh-text);
}

.sh-product__info .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.sh-product__info .woocommerce-product-rating .woocommerce-review-link {
	font-size: 13px;
	color: var(--sh-muted);
}

.sh-product__info .price {
	display: block;
	margin: 0 0 18px;
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	color: var(--sh-text);
}

.sh-product__info .price del {
	color: var(--sh-muted);
	font-weight: 400;
	font-size: .7em;
}

.sh-product__info .price ins {
	text-decoration: none;
}

.sh-product__info .woocommerce-product-details__short-description {
	margin-bottom: 22px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--sh-muted);
}

.sh-product__info .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* --- 13.3 variation pickers ---------------------------------------------- */

.sh-product__info .variations {
	width: 100%;
	margin: 0 0 4px;
	border: 0;
	border-collapse: collapse;
}

.sh-product__info .variations tr {
	display: block;
	margin-bottom: 18px;
}

.sh-product__info .variations th,
.sh-product__info .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
}

.sh-product__info .variations .label {
	margin-bottom: 9px;
	font-family: var(--sh-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--sh-text);
}

.sh-product__info .variations .label .sh-picker__value {
	color: var(--sh-muted);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.sh-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sh-picker__btn {
	position: static;
	z-index: auto;
	min-width: 46px;
	margin: 0;
	padding: 9px 16px;
	font-family: var(--sh-font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--sh-text);
	background-color: var(--sh-bg);
	border: 1px solid rgba(109, 56, 139, .2);
	border-radius: 8px;
	overflow: visible;
	box-shadow: none;
	cursor: pointer;
	transition: border-color var(--sh-dur-default) ease,
	            background-color var(--sh-dur-default) ease,
	            color var(--sh-dur-default) ease,
	            box-shadow var(--sh-dur-default) ease;
}

.sh-picker__btn:hover {
	color: var(--sh-text);
	background-color: rgba(109, 56, 139, .08);
	border-color: rgba(109, 56, 139, .55);
	box-shadow: none;
}

.sh-picker__btn.is-active {
	color: #fff;
	background-color: var(--sh-accent);
	border-color: var(--sh-accent);
	box-shadow: none;
}

.sh-picker__btn.is-disabled,
.sh-picker__btn[disabled] {
	color: var(--sh-muted);
	background-color: var(--sh-bg-alt);
	border-color: var(--sh-border);
	text-decoration: line-through;
	cursor: not-allowed;
}

/* --- 13.4 quantity + add to cart ----------------------------------------- */

.sh-product__info .woocommerce-variation-add-to-cart,
.sh-product__info form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
	margin: 6px 0 18px;
}

.sh-product__info .woocommerce-variation-add-to-cart .quantity,
.sh-product__info form.cart:not(.variations_form) .quantity {
	flex: 0 0 auto;
}

.sh-product__info form.variations_form {
	margin: 6px 0 18px;
}

.sh-product__info .quantity .qty {
	width: 76px;
	height: 100%;
	min-height: 52px;
	padding: 0 10px;
	font-family: var(--sh-font-body);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	color: var(--sh-text);
	background-color: var(--sh-bg);
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-input);
}

.sh-product__info .quantity .qty:focus {
	outline: none;
	border-color: var(--sh-accent);
	box-shadow: 0 0 0 3px rgba(109, 56, 139, .12);
}

.sh-product__info .single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: 52px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .3px;
}

/* WooCommerce greys out the button until every variation is chosen. */
.sh-product__info .single_add_to_cart_button.disabled,
.sh-product__info .single_add_to_cart_button.wc-variation-selection-needed,
.sh-product__info .single_add_to_cart_button:disabled {
	opacity: 1;
	background-color: var(--sh-bg-alt);
	border-color: var(--sh-border);
	color: var(--sh-muted);
	cursor: not-allowed;
}

.sh-product__info .single_add_to_cart_button.disabled:hover,
.sh-product__info .single_add_to_cart_button.wc-variation-selection-needed:hover {
	background-color: var(--sh-bg-alt);
	border-color: var(--sh-border);
	color: var(--sh-muted);
	box-shadow: none;
}

.sh-product__info .woocommerce-variation-price {
	margin-bottom: 12px;
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: 22px;
}

.sh-product__info .woocommerce-variation-availability {
	margin-bottom: 12px;
	font-size: 14px;
}

.sh-product__info .woocommerce-variation-description {
	margin-bottom: 14px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--sh-muted);
}

.sh-product__info .reset_variations {
	display: inline-block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--sh-muted);
}

/* --- 13.5 meta ----------------------------------------------------------- */

.sh-product__info .product_meta {
	display: grid;
	gap: 5px;
	margin-top: 4px;
	padding-top: 18px;
	border-top: 1px solid var(--sh-border);
	font-size: 13px;
	line-height: 1.5;
	color: var(--sh-muted);
}

.sh-product__info .product_meta .sku,
.sh-product__info .product_meta .posted_in,
.sh-product__info .product_meta .tagged_as {
	display: block;
}

.sh-product__info .product_meta a {
	color: var(--sh-text);
	font-weight: 500;
}

/* --- 13.6 tabs ----------------------------------------------------------- */

.sh-product .woocommerce-tabs {
	margin-top: 72px;
}

.sh-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	float: none;
	width: 100%;
	margin: 0 0 30px;
	padding: 0 0 0;
	list-style: none;
	border-bottom: 1px solid var(--sh-border);
}

.sh-product .woocommerce-tabs ul.tabs::before,
.sh-product .woocommerce-tabs ul.tabs::after {
	display: none;
	content: none;
}

.sh-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.sh-product .woocommerce-tabs ul.tabs li::before,
.sh-product .woocommerce-tabs ul.tabs li::after {
	display: none;
	content: none;
}

.sh-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 15px 0;
	font-family: var(--sh-font-head);
	font-weight: 600;
	font-size: 15px;
	color: var(--sh-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	text-decoration: none;
	transition: color var(--sh-dur-default) ease,
	            border-color var(--sh-dur-default) ease;
}

.sh-product .woocommerce-tabs ul.tabs li a:hover,
.sh-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--sh-text);
	border-bottom-color: var(--sh-accent);
}

.sh-product .woocommerce-tabs .woocommerce-Tabs-panel {
	float: none;
	width: 100%;
	max-width: 900px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--sh-text-soft);
}

.sh-product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
	display: none;
}

.sh-product .woocommerce-tabs .shop_attributes {
	border: 0;
	border-collapse: collapse;
}

.sh-product .woocommerce-tabs .shop_attributes th,
.sh-product .woocommerce-tabs .shop_attributes td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--sh-border);
	text-align: left;
	font-size: 14px;
}

.sh-product .woocommerce-tabs .shop_attributes th {
	width: 200px;
	font-weight: 600;
	color: var(--sh-text);
	background-color: var(--sh-bg-alt);
}

/* --- 13.7 related / upsell ---------------------------------------------- */

.sh-product .related.products,
.sh-product .upsells.products {
	margin-top: 72px;
}

/* Storefront centres these headings for full-width layouts
   (.storefront-full-width-content .related.products > h2:first-child), so the
   override needs to match that specificity. */
.sh-product .related.products > h2,
.sh-product .upsells.products > h2,
.sh-product .related.products > h2:first-child,
.sh-product .upsells.products > h2:first-child {
	margin-bottom: 26px;
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0;
	text-align: left;
}

.sh-product .related.products ul.products,
.sh-product .upsells.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sh-gap);
	margin-bottom: 0;
	padding: 0;
}

/* Storefront's clearfix pseudo-elements become grid items once the list is a
   grid, which pushes every card one column to the right. */
.sh-product .related.products ul.products::before,
.sh-product .related.products ul.products::after,
.sh-product .upsells.products ul.products::before,
.sh-product .upsells.products ul.products::after {
	display: none;
	content: none;
}

.sh-product .related.products ul.products li.product,
.sh-product .upsells.products ul.products li.product {
	width: 100%;
	float: none;
	clear: none;
	margin: 0;
}

/* WooCommerce notices default to a loud blue; keep them on-brand. */
.sh-product .woocommerce-info,
.sh-product .woocommerce-message,
.sh-product .woocommerce-error,
.sh-product .woocommerce-noreviews {
	border-top: 0;
	border-radius: var(--sh-r-input);
	background-color: var(--sh-accent-soft);
	color: var(--sh-text);
}

.sh-product .woocommerce-info::before,
.sh-product .woocommerce-message::before,
.sh-product .woocommerce-error::before,
.sh-product .woocommerce-noreviews::before {
	color: var(--sh-accent);
}

/* --- 13.8 responsive ----------------------------------------------------- */

@media (max-width: 1024px) {
	.sh-product__grid {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
		gap: 32px;
	}
}

@media (max-width: 768px) {
	/* The full company name is long — keep the mobile header to two lines. */
	.site-branding .site-title,
	.site-title,
	.site-branding .site-title a,
	.site-title a {
		font-size: 16px;
		line-height: 1.22;
	}

	/* Shrine columns_mobile = 2, applied to every product grid. */
	.woocommerce ul.products,
	.sh-product .related.products ul.products,
	.sh-product .upsells.products ul.products {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 16px;
	}

	.woocommerce ul.products::before,
	.woocommerce ul.products::after {
		display: none;
		content: none;
	}

	.woocommerce ul.products li.product,
	.sh-product .related.products ul.products li.product,
	.sh-product .upsells.products ul.products li.product {
		width: 100%;
		float: none;
		clear: none;
		margin: 0;
	}

	.sh-product__grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.sh-product__info .product_title {
		font-size: 24px;
	}

	.sh-gallery__thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}

	.sh-product .woocommerce-tabs {
		margin-top: 44px;
	}

	.sh-product .woocommerce-tabs ul.tabs {
		gap: 20px;
		flex-wrap: wrap;
	}

	.sh-product .woocommerce-tabs ul.tabs li a {
		padding: 12px 0;
		font-size: 14px;
	}

	.sh-product .related.products,
	.sh-product .upsells.products {
		margin-top: 44px;
	}
}

@media (max-width: 480px) {
	.sh-product__info .quantity .qty {
		width: 88px;
	}
}

/* ==========================================================================
   14. Cart & checkout
   ========================================================================== */

/* --- 14.1 page headings -------------------------------------------------- */

.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header {
	text-align: left;
}

/* Storefront centres these on full-width layouts with a 3-class selector. */
.storefront-full-width-content.woocommerce-cart .entry-header,
.storefront-full-width-content.woocommerce-checkout .entry-header,
.storefront-full-width-content.woocommerce-account .entry-header,
.woocommerce-cart .entry-header h1,
.woocommerce-checkout .entry-header h1,
.woocommerce-account .entry-header h1 {
	margin-bottom: 30px;
	text-align: left;
}

.storefront-full-width-content.woocommerce-cart .entry-header h1,
.storefront-full-width-content.woocommerce-checkout .entry-header h1,
.storefront-full-width-content.woocommerce-account .entry-header h1,
.woocommerce-cart .entry-header h1,
.woocommerce-checkout .entry-header h1,
.woocommerce-account .entry-header h1 {
	font-size: clamp(26px, 3vw, 36px);
	letter-spacing: 0;
}

/* --- 14.2 cart table ----------------------------------------------------- */

.woocommerce-cart table.cart {
	border: 0;
	background-color: transparent;
}

.woocommerce-cart table.cart thead th {
	padding: 0 0 12px;
	border-bottom: 1px solid var(--sh-border);
	background-color: transparent;
	font-family: var(--sh-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--sh-muted);
}

.woocommerce-cart table.cart tbody td {
	padding: 18px 0;
	border-bottom: 1px solid var(--sh-border);
	background-color: transparent;
	vertical-align: middle;
}

.woocommerce-cart table.cart .product-thumbnail img {
	width: 84px;
	border-radius: var(--sh-r-input);
	background-color: var(--sh-bg-alt);
}

.woocommerce-cart table.cart .product-name a {
	font-family: var(--sh-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--sh-text);
	text-decoration: none;
}

.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal {
	font-weight: 600;
	color: var(--sh-text);
}

.woocommerce-cart table.cart td.actions {
	padding-top: 22px;
	border-bottom: 0;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	min-width: 170px;
}

/* --- 14.3 cart totals ---------------------------------------------------- */

.woocommerce-cart .cart_totals {
	padding: 28px 30px;
	background-color: var(--sh-bg-alt);
	border-radius: var(--sh-r-card);
}

.woocommerce-cart .cart_totals h2 {
	margin-bottom: 18px;
	font-size: 18px;
	letter-spacing: 0;
}

.woocommerce-cart .cart_totals table {
	border: 0;
	background-color: transparent;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	padding: 11px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	background-color: transparent;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border-bottom: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--sh-text);
}

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

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 15px 20px;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
}

/* Storefront prints the coupon form inside the totals panel. */
.woocommerce-cart .coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-cart .woocommerce-info {
	border-top: 0;
	border-radius: var(--sh-r-input);
	background-color: var(--sh-accent-soft);
	color: var(--sh-text);
}

.woocommerce-cart .coupon-toggle .woocommerce-info::before,
.woocommerce-cart .woocommerce-info::before {
	color: var(--sh-accent);
}

/* --- 14.4 block cart (wp-block-woocommerce-cart) -------------------------- */

.wc-block-cart .wc-block-cart-items__header {
	border-bottom: 1px solid var(--sh-border);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--sh-muted);
}

.wc-block-cart .wc-block-cart-items__row {
	border-bottom: 1px solid var(--sh-border);
}

.wc-block-cart .wc-block-cart-item__image img {
	width: 84px;
	border-radius: var(--sh-r-input);
	background-color: var(--sh-bg-alt);
}

.wc-block-cart .wc-block-components-product-name {
	font-family: var(--sh-font-head);
	font-weight: 600;
	color: var(--sh-text);
	text-decoration: none;
}

.wc-block-cart .wc-block-cart-item__prices,
.wc-block-cart .wc-block-cart-item__total {
	font-weight: 600;
	color: var(--sh-text);
}

.wc-block-cart .wc-block-cart-item__remove-link {
	color: var(--sh-muted);
}

.wc-block-cart .wc-block-components-quantity-selector {
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-input);
}

.wc-block-cart .wc-block-components-quantity-selector__input {
	border-radius: var(--sh-r-input);
	font-weight: 600;
}

.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper {
	padding: 22px 24px;
	background-color: var(--sh-bg-alt);
	border-radius: var(--sh-r-card);
}

.wc-block-cart .wc-block-cart__totals-title {
	margin-bottom: 6px;
	font-family: var(--sh-font-head);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
}

.wc-block-cart .wc-block-components-totals-item__label,
.wc-block-cart .wc-block-components-totals-item__value {
	font-size: 15px;
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 18px;
	font-weight: 700;
	color: var(--sh-text);
}

.wc-block-cart .wc-block-components-panel__button {
	font-family: var(--sh-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--sh-text);
}

.wc-block-cart .wc-block-cart__submit-button {
	width: 100%;
	min-height: 52px;
	border-radius: var(--sh-r-btn);
	font-size: 15px;
}

/* --- 14.5 block checkout ------------------------------------------------- */

.wc-block-checkout,
.wp-block-woocommerce-checkout {
	--wc-primary: var(--sh-cta);
	--wc-primary-text: #ffffff;
	--wc-secondary: var(--sh-bg-alt);
	--wc-secondary-text: var(--sh-text);
	--wc-font-family: var(--sh-font-body);
	--wc-border-radius: var(--sh-r-input);
}

.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button {
	border-color: var(--sh-cta);
	border-radius: var(--sh-r-btn);
	background-color: var(--sh-cta);
	color: #fff;
	font-weight: 600;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-checkout-place-order-button:hover {
	border-color: var(--sh-cta-dark);
	background-color: var(--sh-cta-dark);
	color: #fff;
}

.wc-block-components-checkout-place-order-button {
	min-height: 52px;
	font-size: 15px;
}

.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-address-form input,
.wc-block-components-address-form select {
	border-radius: var(--sh-r-input);
	font-family: var(--sh-font-body);
}

.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary-item__description {
	font-family: var(--sh-font-body);
}

.wc-block-components-order-summary,
.wc-block-components-totals-wrapper,
.wc-block-components-sidebar-layout .wc-block-components-main {
	border-radius: var(--sh-r-card);
}

/* --- 14.6 notices -------------------------------------------------------- */

.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
	border-top: 0;
	border-radius: var(--sh-r-input);
	background-color: var(--sh-accent-soft);
	color: var(--sh-text);
}

.woocommerce-cart .woocommerce-message::before,
.woocommerce-checkout .woocommerce-message::before {
	color: var(--sh-success);
}

@media (max-width: 768px) {
	.woocommerce-cart .cart_totals {
		padding: 22px 20px;
	}

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

/* ==========================================================================
   15. Content pages  (Shrine Content Page template)
   ========================================================================== */

/* --- 15.1 page shell ----------------------------------------------------- */

.sh-page {
	margin-bottom: 0;
}

.sh-page__hero {
	padding: 44px 0 40px;
	background-color: var(--sh-accent-soft);
	border-bottom: 1px solid var(--sh-border);
	text-align: center;
}

.sh-page__crumbs {
	font-size: 13px;
	color: var(--sh-muted);
	margin: 0 0 12px;
}

.sh-page__crumbs a {
	color: var(--sh-accent);
}

.sh-page__crumbs span[aria-hidden] {
	padding: 0 6px;
}

.sh-page__title {
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.15;
	margin: 0;
	letter-spacing: 0.4px;
}

.sh-page__sub {
	max-width: 720px;
	margin: 14px auto 0;
	color: var(--sh-text-soft);
	font-size: 17px;
	line-height: 1.65;
}

.sh-page__content {
	overflow: hidden;
}

.sh-page__content > .sh-section:first-child {
	padding-top: var(--sh-section-space);
}

.sh-lead {
	max-width: 860px;
	margin: 0 auto 32px;
	font-size: 17px;
	line-height: 1.8;
	color: var(--sh-text-soft);
	text-align: center;
}

/* --- 15.2 statistic band ------------------------------------------------- */

.sh-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.sh-stat {
	text-align: center;
	padding: 26px 18px;
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-card);
	background-color: var(--sh-bg);
}

.sh-stat__num {
	display: block;
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.1;
	color: var(--sh-accent);
}

.sh-stat__label {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	color: var(--sh-muted);
}

/* --- 15.3 history timeline ---------------------------------------------- */

.sh-timeline {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-timeline::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background-color: var(--sh-border);
}

.sh-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 88px 1fr;
	align-items: center;
	gap: 0 24px;
	padding: 18px 0;
}

.sh-timeline__year {
	font-family: var(--sh-font-head);
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 30px);
	line-height: 1;
	color: var(--sh-accent);
	text-align: right;
}

.sh-timeline__dot {
	position: relative;
	display: block;
	width: 16px;
	height: 16px;
	margin: 0 auto;
	border-radius: 50%;
	border: 3px solid var(--sh-accent);
	background-color: var(--sh-bg);
}

.sh-timeline__body {
	display: grid;
	grid-template-columns: 1fr 160px;
	gap: 18px;
	align-items: center;
}

.sh-timeline__phase {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sh-muted);
}

.sh-timeline__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sh-text);
}

.sh-timeline__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--sh-r-card);
	overflow: hidden;
	background-color: var(--sh-bg-alt);
}

.sh-timeline__img {
	display: block;
	width: 100%;
	height: 100%;
	/* The timeline mixes 4:3 archive scans with 3:4 portraits; fitting keeps
	   the portrait ones from losing almost half their height. */
	object-fit: contain;
	object-position: center;
}

/* Left-hand variant: media sits in the empty column so the zig-zag reads. */
.sh-timeline__item--flip .sh-timeline__year {
	grid-column: 3;
	text-align: left;
}

.sh-timeline__item--flip .sh-timeline__dot {
	grid-column: 2;
	grid-row: 1;
}

.sh-timeline__item--flip .sh-timeline__body {
	grid-column: 1;
	grid-row: 1;
}

/* --- 15.4 FAQ accordion -------------------------------------------------- */

.sh-faq {
	max-width: 900px;
	margin: 0 auto;
}

.sh-faq__group + .sh-faq__group {
	margin-top: 40px;
}

.sh-faq__group-title {
	font-family: var(--sh-font-head);
	font-size: 22px;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--sh-accent);
}

.sh-faq__item {
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-input);
	background-color: var(--sh-bg);
	margin-bottom: 10px;
	overflow: hidden;
}

.sh-faq__item[open] {
	border-color: var(--sh-accent);
}

.sh-faq__q {
	cursor: pointer;
	list-style: none;
	padding: 16px 46px 16px 18px;
	font-size: 16px;
	font-weight: 600;
	position: relative;
}

.sh-faq__q::-webkit-details-marker {
	display: none;
}

.sh-faq__q::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	line-height: 1;
	color: var(--sh-accent);
}

.sh-faq__item[open] .sh-faq__q::after {
	content: "\2212";
}

.sh-faq__a {
	padding: 0 18px 18px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--sh-text-soft);
}

.sh-faq__a p {
	margin: 0 0 12px;
}

.sh-faq__a p:last-child {
	margin-bottom: 0;
}

.sh-faq__a ul {
	margin: 0 0 12px 20px;
}

/* --- 15.5 contact ------------------------------------------------------- */

.sh-contact {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--sh-gap);
	align-items: start;
}

.sh-contact__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.sh-contact__card {
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-card);
	padding: 20px;
	background-color: var(--sh-bg);
}

.sh-contact__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--sh-accent);
	margin-bottom: 8px;
}

.sh-contact__value {
	display: block;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sh-text);
	word-break: break-word;
}

a.sh-contact__value:hover {
	color: var(--sh-accent);
}

.sh-contact__media {
	border-radius: var(--sh-r-card);
	overflow: hidden;
	background-color: var(--sh-bg-alt);
}

.sh-contact__img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- 15.6 gallery strip -------------------------------------------------- */

.sh-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.sh-strip__figure {
	margin: 0;
	/* 3:2 sits between the 4:3 and 5:3 source photos, so the fitted image
	   leaves the least empty space. */
	aspect-ratio: 3 / 2;
	border-radius: var(--sh-r-card);
	overflow: hidden;
	background-color: var(--sh-bg-alt);
}

.sh-strip__img {
	display: block;
	width: 100%;
	height: 100%;
	/* Factory photos range from 4:3 to 5:3; fitting avoids shaving the sides
	   off the wider ones. */
	object-fit: contain;
	object-position: center;
}

/* --- 15.7 closing call to action ---------------------------------------- */

.sh-cta {
	text-align: center;
	padding: 48px 24px;
	border-radius: var(--sh-r-box);
	background-color: var(--sh-accent-soft);
}

.sh-cta__title {
	font-family: var(--sh-font-head);
	font-size: clamp(22px, 2.8vw, 32px);
	margin: 0 0 10px;
}

.sh-cta__text {
	max-width: 620px;
	margin: 0 auto 22px;
	color: var(--sh-text-soft);
	font-size: 16px;
	line-height: 1.7;
}

/* --- 15.8 prose (page copy that is not a component) ---------------------- */

.sh-prose {
	max-width: 860px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.8;
	color: var(--sh-text-soft);
}

.sh-prose h2 {
	font-family: var(--sh-font-head);
	font-size: clamp(22px, 2.6vw, 30px);
	color: var(--sh-text);
	margin: 40px 0 14px;
}

.sh-prose h3 {
	font-family: var(--sh-font-head);
	font-size: 20px;
	color: var(--sh-text);
	margin: 28px 0 10px;
}

.sh-prose ul,
.sh-prose ol {
	margin: 0 0 18px 22px;
}

.sh-prose li {
	margin-bottom: 8px;
}

/* --- 15.9 feature cards ------------------------------------------------- */

.sh-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sh-gap);
}

.sh-card {
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-card);
	padding: 28px;
	background-color: var(--sh-bg);
}

.sh-card__title {
	font-family: var(--sh-font-head);
	font-size: 20px;
	margin: 0 0 10px;
}

.sh-card__text {
	margin: 0;
	color: var(--sh-text-soft);
	font-size: 16px;
	line-height: 1.7;
}

/* --- 15.10 contact form ------------------------------------------------- */

.sh-form {
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-card);
	padding: 26px;
	background-color: var(--sh-bg);
	margin: 0;
}

.sh-form__row {
	margin: 0 0 16px;
}

.sh-form__row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--sh-text);
}

.sh-form__row label span {
	color: var(--sh-cta);
}

.sh-form__row input,
.sh-form__row textarea {
	width: 100%;
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-input);
	background-color: #fff;
	padding: 12px 14px;
	font-size: 15px;
	box-shadow: none;
}

.sh-form__row input:focus,
.sh-form__row textarea:focus {
	border-color: var(--sh-accent);
	background-color: #fff;
}

.sh-form__row--hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

.sh-form__submit {
	margin: 0;
}

.sh-form__submit .button {
	width: 100%;
	min-height: 50px;
	font-size: 15px;
}

.sh-form__notice {
	border-radius: var(--sh-r-input);
	padding: 14px 18px;
	margin: 0 0 18px;
	font-size: 15px;
}

.sh-form__notice--ok {
	background-color: #eef7e6;
	color: #2f6b12;
}

.sh-form__notice--bad {
	background-color: #fdecec;
	color: #a41818;
}

/* --- 15.10b newsletter signup (footer) ---------------------------------- */

.sh-newsletter {
	display: flex;
	gap: 8px;
	margin: 0;
}

.sh-newsletter input[type="email"] {
	flex: 1;
	min-width: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--sh-r-input);
	background-color: rgba(255, 255, 255, .08);
	color: inherit;
	padding: 10px 12px;
	font-size: 14px;
	box-shadow: none;
}

.sh-newsletter input[type="email"]::placeholder {
	color: rgba(255, 255, 255, .6);
}

.sh-newsletter button {
	flex: none;
	border: 0;
	border-radius: var(--sh-r-input);
	background-color: #fff;
	color: #121212;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 16px;
	cursor: pointer;
}

.sh-newsletter button:hover {
	opacity: .9;
}

/* Payment marks shown in the footer. */
.sh-payments {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.sh-payments li {
	border-radius: 4px;
	background-color: rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .9);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .4px;
	padding: 4px 7px;
}

/* --- 15.11 blog index --------------------------------------------------- */

.sh-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sh-gap);
}

.sh-post-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-r-card);
	overflow: hidden;
	background-color: var(--sh-bg);
	margin: 0;
}

.sh-post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background-color: var(--sh-bg-alt);
	overflow: hidden;
}

.sh-post-card__img {
	display: block;
	width: 100%;
	height: 100%;
	/* Featured images are square product shots; cover was slicing the top and
	   bottom off them. Fit instead, on the card's light background. */
	object-fit: contain;
	object-position: center;
	border-radius: 0;
	transition: transform var(--sh-dur-long) ease;
}

.sh-post-card:hover .sh-post-card__img {
	transform: scale(1.04);
}

.sh-post-card__body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.sh-post-card__meta {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--sh-muted);
}

.sh-post-card__title {
	font-family: var(--sh-font-head);
	font-size: 20px;
	line-height: 1.35;
	margin: 0 0 12px;
}

.sh-post-card__title a {
	color: var(--sh-text);
}

.sh-post-card__title a:hover {
	color: var(--sh-accent);
}

.sh-post-card__excerpt {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--sh-text-soft);
}

.sh-post-card__body .sh-link-arrow {
	margin-top: auto;
}

.sh-posts + .pagination,
.sh-posts + nav.pagination {
	margin-top: 40px;
}

/* --- 15.12 single article ---------------------------------------------- */

.sh-article__hero {
	margin-top: 32px;
}

.sh-article__hero-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sh-r-media);
}

.sh-article__tags {
	max-width: 860px;
	margin: 28px auto 0;
	font-size: 14px;
}

.sh-article__tags a {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 6px 14px;
	border-radius: var(--sh-r-pill);
	background-color: var(--sh-accent-soft);
	color: var(--sh-accent);
	text-decoration: none;
}

.sh-article .post-navigation {
	clear: both;
	margin: 0 0 24px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}

.sh-article .post-navigation .nav-previous,
.sh-article .post-navigation .nav-next {
	max-width: none;
	margin: 0;
}

.sh-article .post-navigation .nav-previous {
	grid-column: 1;
	text-align: left;
}

.sh-article .post-navigation .nav-next {
	grid-column: 2;
	text-align: right;
}

.sh-article__nav-label {
	display: block;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--sh-muted);
}

.sh-article__nav-title {
	display: block;
	font-family: var(--sh-font-head);
	font-size: 17px;
	color: var(--sh-text);
}

.sh-article__back {
	clear: both;
	text-align: center;
	margin: 8px 0 0;
}

@media (max-width: 900px) {
	.sh-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.sh-posts {
		grid-template-columns: 1fr;
	}

	.sh-article .post-navigation .nav-previous,
	.sh-article .post-navigation .nav-next {
		float: none;
		max-width: 100%;
		text-align: left;
		margin-bottom: 18px;
	}
}

@media (max-width: 900px) {
	.sh-stats,
	.sh-strip,
	.sh-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sh-contact {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.sh-stats,
	.sh-strip,
	.sh-cards {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.sh-page__hero {
		padding: 30px 0 26px;
	}

	/* Timeline collapses to a single left rail. */
	.sh-timeline::before {
		left: 7px;
	}

	.sh-timeline__item,
	.sh-timeline__item--flip {
		grid-template-columns: 1fr;
		gap: 12px;
		padding-left: 34px;
	}

	.sh-timeline__item .sh-timeline__year,
	.sh-timeline__item--flip .sh-timeline__year {
		grid-column: 1;
		grid-row: 1;
		text-align: left;
	}

	.sh-timeline__item .sh-timeline__dot,
	.sh-timeline__item--flip .sh-timeline__dot {
		position: absolute;
		left: 0;
		top: 24px;
		margin: 0;
	}

	.sh-timeline__item .sh-timeline__body,
	.sh-timeline__item--flip .sh-timeline__body {
		grid-column: 1;
		grid-row: auto;
		grid-template-columns: 1fr;
	}

	.sh-timeline__media {
		aspect-ratio: 16 / 9;
	}

	.sh-contact__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   19. Duty disclaimer + shipping hint
   ========================================================================== */

.shrine-duties-notice {
	margin: 0 0 28px;
	padding: 16px 20px;
	border: 1px solid var(--sh-border);
	border-left: 3px solid var(--sh-accent);
	border-radius: var(--sh-r-input);
	background-color: var(--sh-bg-alt);
}

.shrine-duties-notice p {
	margin: 0;
	color: var(--sh-text-soft);
	font-size: 14px;
	line-height: 1.6;
}

.shrine-shipping-hint {
	margin: 0 0 20px;
	color: var(--sh-muted);
	font-size: 14px;
	line-height: 1.5;
}

.shrine-shipping-hint::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	border-radius: 50%;
	background-color: var(--sh-accent);
	vertical-align: middle;
}

.shrine-empty-category {
	max-width: 520px;
	margin: 0 auto 48px;
	text-align: center;
}

.shrine-empty-category p {
	margin: 0 0 18px;
	color: var(--sh-muted);
	font-size: 16px;
	line-height: 1.6;
}

.shrine-empty-category .button {
	margin: 0;
}

/* ==========================================================================
   20. Typography — form controls
   Storefront pins buttons and inputs to Source Sans Pro, which the theme no
   longer loads. Inherit the body font (Inter) instead so form fields match
   the rest of the page.
   ========================================================================== */

button,
input,
select,
textarea,
.button,
.added_to_cart,
input[type="submit"] {
	font-family: var(--sh-font-body);
}

/* ==========================================================================
   21. Mobile navigation — smooth open/close
   Storefront ships `transition: all,ease,.8s`, which is invalid shorthand, so
   the panel snapped open with no animation at all. Animating grid-template-rows
   from 0fr to 1fr follows the real content height instead of a magic
   max-height (a max-height tween reveals instantly whenever the content is far
   shorter than the limit). Scoped below 768px — that is where Storefront
   switches to the desktop menu with max-height: none.
   ========================================================================== */

@media (max-width: 767px) {
	.handheld-navigation {
		display: grid;
		grid-template-rows: 0fr;
		max-height: none;
		overflow: visible;
		transition: grid-template-rows var(--sh-dur-btn) cubic-bezier(.4, 0, .2, 1);
	}

	.handheld-navigation > * {
		overflow: hidden;
		min-height: 0;
	}

	.main-navigation.toggled .handheld-navigation {
		grid-template-rows: 1fr;
		max-height: none;
	}

	/* Sub-menus had the same broken tween. */
	.handheld-navigation ul.menu .sub-menu {
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		transition: max-height .28s cubic-bezier(.4, 0, .2, 1),
		            opacity .18s ease,
		            visibility .28s;
	}

	.handheld-navigation ul.menu .sub-menu.toggled-on {
		max-height: 60vh;
		opacity: 1;
		visibility: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.handheld-navigation,
	.handheld-navigation ul.menu .sub-menu {
		transition: none;
	}
}

/* ==========================================================================
   22. Add-to-cart confirmation toast
   Replaces the full page reload that used to follow "Add to cart".
   ========================================================================== */

.sh-toast {
	position: fixed;
	right: 24px;
	/* Clears the floating TranslatePress language switcher, which is pinned
	   to the bottom edge. */
	bottom: 84px;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: calc(100vw - 32px);
	padding: 14px 20px;
	border-radius: var(--sh-r-card);
	background-color: var(--sh-text);
	color: #fff;
	box-shadow: 0 12px 32px rgba(18, 18, 18, .22);
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity .22s ease, transform .26s cubic-bezier(.4, 0, .2, 1);
}

.sh-toast.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.sh-toast__check {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--sh-success);
	position: relative;
}

.sh-toast__check::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 3px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.sh-toast__text {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.sh-toast__link {
	flex: 0 0 auto;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sh-toast__link:hover,
.sh-toast__link:focus {
	color: #fff;
}

@media (max-width: 480px) {
	.sh-toast {
		right: 16px;
		left: 16px;
		bottom: 76px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sh-toast {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   17. Shrine template parity blocks
   ========================================================================== */

/* --- 17.1 retail archive collection cards ------------------------------- */

.sh-archive-collections {
	margin-top: 28px;
	padding-top: 0;
	padding-bottom: 12px;
}

.sh-archive-collections .sh-section__head {
	margin-bottom: 30px;
}

.sh-archive-collections .sh-collection {
	aspect-ratio: 1 / 1;
}

/* --- 17.2 product template: caring for children ------------------------- */

.sh-care {
	background-color: #2e2a39;
	color: #fff;
	padding: 44px 0;
	margin-top: 64px;
}

.sh-care__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: 46px;
}

.sh-care__media {
	overflow: hidden;
	border-radius: var(--sh-r-media);
	background-color: rgba(255, 255, 255, .08);
}

.sh-care__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.sh-care__title {
	margin: 0 0 16px;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.12;
	color: #fff;
}

.sh-care__text {
	max-width: 760px;
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.7;
	color: rgba(255, 255, 255, .94);
}

/* --- 17.3 product template: advantages ---------------------------------- */

.sh-advantages {
	padding: 64px 0 28px;
}

.sh-advantages__title {
	max-width: 780px;
	margin: 0 auto 18px;
	text-align: center;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.15;
}

.sh-advantages__title::first-line {
	color: var(--sh-accent);
}

.sh-advantages__intro {
	max-width: 780px;
	margin: 0 auto 44px;
	text-align: center;
	font-size: 16px;
	line-height: 1.7;
	color: var(--sh-muted);
}

.sh-advantages__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}

.sh-advantages__facts {
	display: grid;
	gap: 22px;
}

.sh-advantage h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 19px;
	line-height: 1.3;
}

.sh-advantage h3::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border: 2px solid var(--sh-accent);
	border-radius: 50%;
}

.sh-advantage p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--sh-muted);
}

.sh-advantages__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	border-radius: var(--sh-r-media);
	background-color: var(--sh-bg-alt);
	overflow: hidden;
}

.sh-advantages__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* --- 17.4 product template: divider ------------------------------------ */

.sh-divider {
	position: relative;
	height: 64px;
	margin-top: 56px;
	overflow: hidden;
}

.sh-divider span {
	position: absolute;
	inset: auto -2% -20px;
	height: 52px;
	border-radius: 50%;
	background-color: var(--sh-cta);
	filter: blur(0);
	opacity: .92;
}

/* --- 17.5 article newsletter ------------------------------------------- */

.sh-article-newsletter {
	background-color: var(--sh-cta);
	color: #fff;
	padding: 68px 30px 52px;
	margin-top: 56px;
	text-align: center;
}

.sh-article-newsletter__inner {
	max-width: 760px;
	margin: 0 auto;
}

.sh-article-newsletter h2 {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(30px, 3.8vw, 46px);
	line-height: 1.1;
}

.sh-article-newsletter p {
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 1.7;
	opacity: .95;
}

.sh-article-newsletter .sh-newsletter {
	max-width: 560px;
	margin: 0 auto;
}

.sh-article-newsletter .sh-newsletter input[type="email"] {
	background-color: #fff;
	border-color: #fff;
	color: var(--sh-text);
}

.sh-article-newsletter .sh-newsletter button {
	background-color: #fff;
	color: var(--sh-cta);
	border-color: #fff;
}

.sh-article-newsletter .sh-newsletter button:hover {
	background-color: #f3f3f3;
	color: var(--sh-cta-dark);
}

@media (max-width: 1024px) {
	.sh-care__grid,
	.sh-advantages__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.sh-care__media {
		min-height: 260px;
	}

	.sh-advantages__figure {
		min-height: 280px;
	}
}

@media (max-width: 768px) {
	.sh-care {
		padding: 36px 0;
		margin-top: 44px;
	}

	.sh-care__grid {
		gap: 24px;
	}

	.sh-care__img {
		min-height: 220px;
	}

	.sh-advantages {
		padding: 44px 0 20px;
	}

	.sh-advantages__intro {
		margin-bottom: 30px;
	}

	.sh-article-newsletter {
		padding: 52px 22px 42px;
		margin-top: 44px;
	}

	.sh-divider {
		height: 52px;
		margin-top: 40px;
	}
}

/* --- 18. B2B price visibility ------------------------------------------- */

body.sh-hide-prices ul.products li.product .price,
body.sh-hide-prices .single-product .price,
body.sh-hide-prices .product .price,
body.sh-hide-prices .woocommerce-mini-cart__total,
body.sh-hide-prices .woocommerce-cart-form .product-price,
body.sh-hide-prices .woocommerce-cart-form .product-subtotal,
body.sh-hide-prices .cart_totals {
	display: none !important;
}