/* =========================================================================
   ModSession theme styles
   Wide, airy shop layout: full-bleed hero, marquee bars, 4-up product grid.
   ========================================================================= */

/* ---------- Tokens ------------------------------------------------------ */
:root {
	--ms-accent: #171717;
	--ms-sale: #e02b2b;

	--ms-ink: #171717;
	--ms-body: #444444;
	--ms-muted: #7a7a7a;
	--ms-faint: #9a9a9a;
	--ms-line: #e8e6e3;
	--ms-line-soft: #f0eeeb;
	--ms-bg: #ffffff;
	--ms-soft: #f6f5f3;
	--ms-hot: #ef8b1e;
	--ms-trend: #3f3ad4;
	--ms-new: #2f8f5b;

	--ms-radius: 0px;
	--ms-radius-pill: 999px;
	--ms-gap: 26px;
	--ms-pad: 32px;
	--ms-max: 1720px;

	--ms-font: "Afacad", "Segoe UI", Arial, Helvetica, sans-serif;
	--ms-shadow: 0 18px 40px -26px rgba(0, 0, 0, .38);
}

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

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

body.ms {
	margin: 0;
	background: var(--ms-bg);
	color: var(--ms-body);
	font-family: var(--ms-font);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.ms.ms-lock { overflow: hidden; }

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ms-ink); }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	color: var(--ms-ink);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.01em;
}

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

button { font: inherit; color: inherit; cursor: pointer; }

input, select, textarea {
	font: inherit;
	color: var(--ms-ink);
}

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

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

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

.ms-container {
	width: 100%;
	max-width: var(--ms-max);
	margin: 0 auto;
	padding: 0 var(--ms-pad);
}

.ms-icon { flex: none; }

/* ---------- Buttons ----------------------------------------------------- */
.ms-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: var(--ms-radius-pill);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.ms-btn--dark { background: var(--ms-accent); color: #fff; }
.ms-btn--dark:hover { background: #000; color: #fff; transform: translateY(-1px); }

.ms-btn--light { background: #fff; color: var(--ms-ink); }
.ms-btn--light:hover { background: var(--ms-ink); color: #fff; }

.ms-btn--ghost { background: transparent; color: var(--ms-ink); border-color: var(--ms-line); }
.ms-btn--ghost:hover { border-color: var(--ms-ink); }

/* ---------- Marquee ----------------------------------------------------- */
.ms-marquee {
	overflow: hidden;
	background: var(--ms-ink);
	color: #fff;
}
.ms-marquee--light { background: var(--ms-soft); color: var(--ms-ink); }

.ms-marquee__viewport {
	display: flex;
	width: max-content;
	animation: ms-marquee 38s linear infinite;
}
.ms-marquee:hover .ms-marquee__viewport { animation-play-state: paused; }

.ms-marquee__track { display: flex; }

.ms-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 11px 34px;
	font-size: 14px;
	letter-spacing: .04em;
	white-space: nowrap;
}
.ms-marquee__item .ms-icon { opacity: .7; }

@keyframes ms-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

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

/* ---------- Header ------------------------------------------------------ */
.ms-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	border-bottom: 1px solid var(--ms-line-soft);
	transition: box-shadow .25s ease;
}
.ms-header.is-stuck { box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .4); }

.ms-header__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 74px;
}

.ms-header__brand { flex: 0 0 auto; }

.ms-brand {
	display: inline-flex;
	align-items: baseline;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ms-ink);
	line-height: 1;
}
.ms-brand__dot { color: var(--ms-ink); }
.ms-brand--sm { font-size: 23px; }
.ms-brand--footer { font-size: 28px; margin-bottom: 16px; }
.ms-brand--image { display: inline-flex; align-items: center; line-height: 0; }
.ms-brand--image img { height: 46px; width: auto; max-width: 260px; object-fit: contain; }
.ms-brand--image .custom-logo-link { display: inline-flex; align-items: center; }
.ms-brand--sm.ms-brand--image img { height: 36px; }
.ms-brand--footer.ms-brand--image { margin-bottom: 18px; }
.ms-brand--footer.ms-brand--image img { height: 44px; }

.ms-nav { flex: 1 1 auto; display: flex; justify-content: center; }

.ms-nav__list {
	display: flex;
	align-items: center;
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-nav__list > li { position: relative; }

.ms-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 26px 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ms-ink);
}

.ms-nav__list > li.menu-item-has-children > a::after {
	content: "";
	width: 7px; height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
}
.ms-nav__list > li.menu-item-has-children:hover > a::after { transform: translateY(1px) rotate(225deg); }

.ms-nav__list > li > a::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 20px;
	height: 1px;
	background: var(--ms-ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.ms-nav__list > li:hover > a::before,
.ms-nav__list > li.current-menu-item > a::before { transform: scaleX(1); }

.ms-nav__list ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 8px);
	min-width: 230px;
	margin: 0;
	padding: 14px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--ms-line-soft);
	box-shadow: var(--ms-shadow);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 5;
}
.ms-nav__list li:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.ms-nav__list ul.sub-menu li a {
	display: block;
	padding: 9px 24px;
	font-size: 15px;
	color: var(--ms-body);
	white-space: nowrap;
}
.ms-nav__list ul.sub-menu li a:hover { color: var(--ms-ink); background: var(--ms-soft); }

.ms-nav__list ul.sub-menu ul.sub-menu { top: 0; left: 100%; transform: translate(6px, 0); }
.ms-nav__list ul.sub-menu li:hover > ul.sub-menu { transform: translate(0, 0); }

.ms-header__tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ms-headicon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	background: none;
	border: 0;
	color: var(--ms-ink);
	border-radius: var(--ms-radius-pill);
	transition: background .2s ease;
}
.ms-headicon:hover { background: var(--ms-soft); }

.ms-headicon__count {
	position: absolute;
	top: 3px; right: 2px;
	min-width: 18px; height: 18px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ms-radius-pill);
	background: var(--ms-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

.ms-burger {
	display: none;
	width: 42px; height: 42px;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--ms-ink);
}

/* ---------- Search panel ------------------------------------------------ */
.ms-search {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(255, 255, 255, .98);
	display: flex;
	align-items: center;
}
.ms-search[hidden] { display: none; }

.ms-search__inner { display: flex; align-items: center; gap: 20px; }
.ms-search .ms-searchform { flex: 1 1 auto; }

.ms-search__close {
	background: none;
	border: 0;
	color: var(--ms-ink);
	padding: 10px;
}

.ms-searchform {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--ms-ink);
}

.ms-searchform__input {
	flex: 1 1 auto;
	padding: 16px 46px 16px 0;
	background: none;
	border: 0;
	font-size: 24px;
	outline: none;
}
.ms-searchform__input::placeholder { color: var(--ms-faint); }

.ms-searchform__btn {
	position: absolute;
	right: 0;
	background: none;
	border: 0;
	color: var(--ms-ink);
	padding: 8px;
}

/* ---------- Mobile drawer ----------------------------------------------- */
.ms-drawer { position: fixed; inset: 0; z-index: 95; }
.ms-drawer[hidden] { display: none; }

.ms-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
}

.ms-drawer__panel {
	position: relative;
	z-index: 2;
	width: min(360px, 88vw);
	height: 100%;
	background: #fff;
	padding: 22px 24px 32px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	animation: ms-slide-in .28s ease;
}

@keyframes ms-slide-in {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

.ms-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ms-line-soft);
}
.ms-drawer__close { background: none; border: 0; padding: 6px; color: var(--ms-ink); }

.ms-drawer__list { list-style: none; margin: 0; padding: 0; }
.ms-drawer__list li { border-bottom: 1px solid var(--ms-line-soft); }
.ms-drawer__list a {
	display: block;
	padding: 13px 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ms-ink);
}
.ms-drawer__list .sub-menu { list-style: none; margin: 0 0 8px; padding: 0 0 0 14px; }
.ms-drawer__list .sub-menu a { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 15px; color: var(--ms-body); }
.ms-drawer__list .sub-menu li:last-child { border-bottom: 0; }

.ms-drawer__foot { margin-top: auto; display: grid; gap: 12px; font-size: 15px; }
.ms-drawer__foot a { display: flex; gap: 10px; align-items: flex-start; color: var(--ms-body); }

/* ---------- Hero -------------------------------------------------------- */
.ms-hero {
	position: relative;
	overflow: hidden;
	background: var(--ms-soft);
}

.ms-hero__track { position: relative; height: clamp(420px, 62vw, 880px); }

.ms-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.04);
	transition: opacity .8s ease, transform 7s ease, visibility .8s;
}
.ms-hero__slide.is-active { opacity: 1; visibility: visible; transform: scale(1); }

.ms-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .18) 46%, rgba(0, 0, 0, 0) 74%);
}

.ms-hero__inner { position: relative; z-index: 2; width: 100%; }
.ms-hero__copy { max-width: 620px; color: #fff; }

.ms-hero__eyebrow {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: .9;
}

.ms-hero__title {
	margin: 0 0 16px;
	color: #fff;
	font-size: clamp(34px, 5vw, 70px);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.02;
}

.ms-hero__text {
	margin: 0 0 28px;
	max-width: 470px;
	font-size: 18px;
	color: rgba(255, 255, 255, .9);
}

.ms-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 48px; height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--ms-radius-pill);
	background: rgba(255, 255, 255, .88);
	color: var(--ms-ink);
	opacity: 0;
	transition: opacity .25s ease, background .2s ease;
}
.ms-hero:hover .ms-hero__nav { opacity: 1; }
.ms-hero__nav:hover { background: #fff; }
.ms-hero__nav--prev { left: 26px; }
.ms-hero__nav--next { right: 26px; }

.ms-hero__dots {
	position: absolute;
	left: 0; right: 0;
	bottom: 26px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 9px;
}
.ms-hero__dot {
	width: 9px; height: 9px;
	padding: 0;
	border: 0;
	border-radius: var(--ms-radius-pill);
	background: rgba(255, 255, 255, .55);
	transition: background .2s ease, width .2s ease;
}
.ms-hero__dot.is-active { background: #fff; width: 26px; }

/* ---------- Category tiles ---------------------------------------------- */
.ms-tiles { padding: 8px 0 0; }

.ms-tiles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.ms-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 290px;
	padding: 34px 20px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	color: #fff;
}
.ms-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .8s ease;
}
.ms-tile__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .45) 100%);
	z-index: 1;
}
.ms-tile__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.ms-tile__label {
	display: inline-block;
	padding-bottom: 12px;
	font-size: clamp(18px, 1.6vw, 25px);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	border-bottom: 2px solid rgba(255, 255, 255, .85);
	transition: border-color .25s ease;
}

.ms-tile__count {
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}

.ms-tile__flag {
	position: absolute;
	top: 16px; left: 16px;
	z-index: 3;
	padding: 6px 13px 5px;
	border-radius: 3px;
	background: var(--ms-sale);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
}

.ms-tile:hover { color: #fff; }
.ms-tile:hover .ms-tile__label { border-color: #fff; }

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

/* ---------- Category archive banner ------------------------------------- */
.ms-catbanner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(240px, 26vw, 380px);
	margin-bottom: 30px;
	background-size: cover;
	background-position: center;
	background-color: #2b2b2b;
	color: #fff;
	overflow: hidden;
}
.ms-catbanner--flat { background: var(--ms-soft); color: var(--ms-ink); }
.ms-catbanner--flat .ms-catbanner__scrim { display: none; }
.ms-catbanner--flat .ms-catbanner__title,
.ms-catbanner--flat .ms-catbanner__text,
.ms-catbanner--flat .ms-catbanner__meta { color: var(--ms-ink); }

.ms-catbanner__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(95deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .34) 55%, rgba(0, 0, 0, .12) 100%);
}
.ms-catbanner__inner { position: relative; z-index: 2; max-width: 720px; }

.ms-catbanner__flag {
	display: inline-block;
	margin-bottom: 14px;
	padding: 7px 15px 6px;
	border-radius: 3px;
	background: var(--ms-sale);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ms-catbanner__title {
	margin: 0 0 10px;
	color: #fff;
	font-size: clamp(28px, 3.4vw, 50px);
	font-weight: 600;
	letter-spacing: -.02em;
}
.ms-catbanner__text { margin: 0 0 8px; color: rgba(255, 255, 255, .88); font-size: 17px; }
.ms-catbanner__meta {
	margin: 0;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

/* ---------- Section shell ----------------------------------------------- */
.ms-section { padding: 78px 0; }
.ms-section--promos { padding: 64px 0 10px; }
.ms-section--popular { padding-top: 56px; }

.ms-sechead { text-align: center; margin-bottom: 42px; }

.ms-sechead__title {
	margin: 0 0 8px;
	font-size: clamp(30px, 3.4vw, 50px);
	font-weight: 600;
	letter-spacing: -.02em;
}

.ms-sechead__sub {
	margin: 0;
	color: var(--ms-muted);
	font-size: 16px;
}

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

/* ---------- Product grid + card ----------------------------------------- */
ul.products.ms-grid,
.ms-woo ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px var(--ms-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ms-woo ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-woo ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

li.product.ms-card {
	position: relative;
	list-style: none;
	margin: 0;
	width: auto !important;
	float: none !important;
	clear: none !important;
}

.ms-card__media {
	position: relative;
	overflow: hidden;
	background: var(--ms-soft);
	border: 1px solid var(--ms-line-soft);
	aspect-ratio: 3 / 3.85;
}

.ms-card__link { display: block; height: 100%; }

.ms-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8%;
	transition: opacity .45s ease, transform .8s ease;
	background: #fff;
}

.ms-card__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.ms-card:hover .ms-card__img--hover { opacity: 1; }
.ms-card:hover .ms-card__img { transform: scale(1.03); }

.ms-card__badges {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.ms-badge {
	display: inline-block;
	padding: 5px 11px 4px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.2;
	color: #fff;
}
.ms-badge--sale { background: var(--ms-sale); }
.ms-badge--hot { background: var(--ms-hot); }
.ms-badge--new { background: var(--ms-new); }
.ms-badge--out { background: #6b6b6b; }

.ms-card__actions {
	position: absolute;
	top: 12px; right: 12px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 8px;
	opacity: 0;
	transform: translateX(10px);
	transition: opacity .28s ease, transform .28s ease;
}
.ms-card:hover .ms-card__actions { opacity: 1; transform: none; }

.ms-card__act {
	width: 38px; height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: var(--ms-radius-pill);
	color: var(--ms-ink);
	box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .5);
	transition: background .2s ease, color .2s ease;
}
.ms-card__act:hover { background: var(--ms-ink); color: #fff; }

.ms-card__cartbar {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 3;
	padding: 12px;
	transform: translateY(105%);
	transition: transform .3s ease;
}
.ms-card:hover .ms-card__cartbar { transform: none; }

.ms-card__cartbar .button,
.ms-card__cartbar a.button {
	display: block;
	width: 100%;
	padding: 13px 14px;
	border: 0;
	border-radius: var(--ms-radius-pill);
	background: var(--ms-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1;
	transition: background .2s ease;
}
.ms-card__cartbar .button:hover { background: #000; color: #fff; }
.ms-card__cartbar .added_to_cart { margin-top: 8px; font-size: 12px; }

.ms-card__body { padding: 16px 2px 0; }

.ms-card__cat {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ms-faint);
}

.ms-card__title {
	margin: 0 0 7px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
}
.ms-card__title a { color: var(--ms-ink); }
.ms-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ms-card__price {
	font-size: 17px;
	font-weight: 600;
	color: var(--ms-ink);
}
.ms-card__price .price { display: inline-flex; gap: 9px; align-items: baseline; }
.ms-card__price del { color: var(--ms-faint); font-weight: 400; font-size: 15px; }
.ms-card__price ins { text-decoration: none; }

.ms-card__swatches { display: flex; gap: 7px; margin-top: 11px; }

.ms-swatch {
	width: 15px; height: 15px;
	border-radius: var(--ms-radius-pill);
	border: 1px solid rgba(0, 0, 0, .14);
	display: inline-block;
}

/* ---------- Product rail (carousel) ------------------------------------- */
.ms-carousel {
	position: relative;
	--ms-per-view: 4;
}

.ms-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* room for the card hover lift and focus ring */
	padding-bottom: 4px;
}
.ms-carousel__viewport::-webkit-scrollbar { display: none; }
.ms-carousel__viewport:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 4px; }

/* Inside a rail the product list is a flex row, not the page grid. */
.ms-carousel ul.products,
.ms-carousel ul.products.ms-grid,
body.ms .ms-woo .ms-carousel ul.products {
	display: flex;
	flex-wrap: nowrap;
	grid-template-columns: none;
	gap: var(--ms-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-carousel li.product {
	flex: 0 0 calc((100% - (var(--ms-per-view) - 1) * var(--ms-gap)) / var(--ms-per-view));
	max-width: calc((100% - (var(--ms-per-view) - 1) * var(--ms-gap)) / var(--ms-per-view));
	scroll-snap-align: start;
}

.ms-carousel__nav {
	position: absolute;
	top: 34%;
	z-index: 4;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	background: #fff;
	color: var(--ms-ink);
	box-shadow: 0 10px 26px -16px rgba(0, 0, 0, .55);
	transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.ms-carousel__nav:hover { background: var(--ms-ink); border-color: var(--ms-ink); color: #fff; }
.ms-carousel__nav[hidden] { display: none; }
.ms-carousel__nav[disabled] { opacity: .28; pointer-events: none; }
.ms-carousel__nav--prev { left: -18px; }
.ms-carousel__nav--next { right: -18px; }

/* Rails inside the single-product page get their own heading rhythm. */
.ms-rail { margin-top: 62px; }
.ms-rail__title {
	margin: 0 0 28px;
	font-size: clamp(24px, 2.4vw, 34px);
	text-align: center;
}
body.ms .ms-woo .related > h2,
body.ms .ms-woo .upsells > h2 { margin: 0 0 28px; }

/* ---------- Sale banner ------------------------------------------------- */
.ms-sale {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(360px, 46vw, 660px);
	background-size: cover;
	background-position: center;
	background-color: #2a2a2a;
	color: #fff;
	overflow: hidden;
}
.ms-sale__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(95deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .3) 52%, rgba(0, 0, 0, .05) 100%);
}
.ms-sale__inner { position: relative; z-index: 2; }

.ms-sale__title {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(36px, 5.2vw, 76px);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1;
}
.ms-sale__text { margin: 0 0 26px; max-width: 430px; color: rgba(255, 255, 255, .88); }

/* ---------- Promo pair -------------------------------------------------- */
.ms-promos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

.ms-promo {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 262px;
	padding: 28px 30px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: #3b3b3b;
	color: #fff;
}
.ms-promo__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .6) 100%);
	transition: background .3s ease;
}
.ms-promo:hover .ms-promo__scrim { background: linear-gradient(180deg, rgba(0, 0, 0, .18) 20%, rgba(0, 0, 0, .68) 100%); }

.ms-promo__badge {
	position: absolute;
	top: 20px; left: 22px;
	z-index: 2;
	padding: 6px 13px 5px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	color: #fff;
}
.ms-promo__badge--sale { background: var(--ms-sale); }
.ms-promo__badge--trend { background: var(--ms-trend); }

.ms-promo__body { position: relative; z-index: 2; }
.ms-promo__title {
	display: block;
	margin-bottom: 10px;
	max-width: 340px;
	color: #fff;
	font-size: clamp(20px, 1.8vw, 28px);
	font-weight: 600;
	line-height: 1.15;
}
.ms-promo__cta {
	display: inline-block;
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(255, 255, 255, .7);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.ms-promo:hover { color: #fff; }

/* ---------- Tabs -------------------------------------------------------- */
.ms-tabs__nav {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: -22px 0 38px;
	flex-wrap: wrap;
}

.ms-tabs__btn {
	position: relative;
	padding: 6px 2px;
	background: none;
	border: 0;
	color: var(--ms-faint);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	transition: color .2s ease;
}
.ms-tabs__btn::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--ms-ink);
	transform: scaleX(0);
	transition: transform .25s ease;
}
.ms-tabs__btn.is-active { color: var(--ms-ink); }
.ms-tabs__btn.is-active::after { transform: scaleX(1); }
.ms-tabs__btn:hover { color: var(--ms-ink); }

.ms-tabs__panel { display: none; }
.ms-tabs__panel.is-active { display: block; animation: ms-fade .35s ease; }

@keyframes ms-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* ---------- Spotlight --------------------------------------------------- */
.ms-spot {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(430px, 44vw, 640px);
	background-size: cover;
	background-position: center;
	background-color: #232323;
	overflow: hidden;
}
.ms-spot__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
.ms-spot__inner { position: relative; z-index: 2; display: flex; justify-content: flex-end; }

.ms-spotcard {
	display: flex;
	gap: 20px;
	width: min(560px, 100%);
	padding: 26px 28px;
	background: #fff;
	box-shadow: var(--ms-shadow);
}

.ms-spotcard__media { flex: 0 0 96px; }
.ms-spotcard__media img { width: 96px; height: 118px; object-fit: contain; background: var(--ms-soft); }

.ms-spotcard__body { flex: 1 1 auto; min-width: 0; }

.ms-spotcard__title { margin: 0 0 6px; font-size: 22px; font-weight: 600; line-height: 1.2; }

.ms-spotcard__rating { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

.ms-stars { position: relative; display: inline-flex; line-height: 0; }
.ms-stars__bg { display: inline-flex; color: #d9d5cf; }
.ms-stars__fg {
	position: absolute;
	top: 0; left: 0;
	display: inline-flex;
	overflow: hidden;
	color: #f2b01e;
	white-space: nowrap;
}
.ms-stars__bg .ms-icon,
.ms-stars__fg .ms-icon { fill: currentColor; stroke: none; }
.ms-stars__count { font-size: 14px; color: var(--ms-muted); }

.ms-spotcard__nudge {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 14px;
	color: #b4472f;
}

.ms-spotcard__price { margin-bottom: 16px; font-size: 26px; font-weight: 600; color: var(--ms-ink); }
.ms-spotcard__price del { font-size: 17px; color: var(--ms-faint); font-weight: 400; margin-left: 8px; }
.ms-spotcard__price ins { text-decoration: none; }

.ms-spotcard__form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.ms-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	overflow: hidden;
}
.ms-qty__btn {
	width: 40px; height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--ms-ink);
}
.ms-qty__input {
	width: 48px;
	height: 46px;
	border: 0;
	text-align: center;
	background: none;
	-moz-appearance: textfield;
	appearance: textfield;
}
.ms-qty__input::-webkit-outer-spin-button,
.ms-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Blog -------------------------------------------------------- */
.ms-postgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px var(--ms-gap);
}
.ms-postgrid--archive { grid-template-columns: repeat(3, 1fr); }

.ms-postcard__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	background: var(--ms-soft);
	margin-bottom: 16px;
}
.ms-postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.ms-postcard:hover .ms-postcard__media img { transform: scale(1.05); }
.ms-postcard__ph { display: block; width: 100%; height: 100%; background: var(--ms-soft); }

.ms-postcard__cat {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ms-faint);
}
.ms-postcard__title { margin: 0 0 8px; font-size: 21px; font-weight: 500; line-height: 1.3; }
.ms-postcard__excerpt { margin: 0 0 8px; color: var(--ms-muted); font-size: 16px; }
.ms-postcard__date { font-size: 14px; color: var(--ms-faint); }

/* ---------- Services ---------------------------------------------------- */
.ms-services { padding: 20px 0 76px; }

.ms-services__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	text-align: center;
}

.ms-service__icon { display: inline-flex; margin-bottom: 12px; color: var(--ms-ink); }
.ms-service__title { margin: 0 0 4px; font-size: 19px; font-weight: 600; }
.ms-service__text { margin: 0; font-size: 14px; color: var(--ms-muted); }

/* ---------- Lifestyle strip --------------------------------------------- */
.ms-strip { padding: 0 0 4px; }
.ms-strip__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	padding: 0 8px;
}
.ms-strip__cell {
	display: block;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	filter: saturate(1);
	transition: opacity .3s ease;
}
.ms-strip__cell:hover { opacity: .86; }

/* ---------- Footer ------------------------------------------------------ */
.ms-footer {
	margin-top: 74px;
	padding: 66px 0 26px;
	border-top: 1px solid var(--ms-line);
	background: #fff;
}

.ms-footer__top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
	gap: 40px var(--ms-gap);
	padding-bottom: 48px;
}

.ms-footer__about { max-width: 380px; color: var(--ms-muted); font-size: 16px; }

.ms-footer__title {
	margin: 0 0 18px;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .01em;
}

.ms-footer__list,
.ms-footer__legallist { list-style: none; margin: 0; padding: 0; }
.ms-footer__list li { margin-bottom: 10px; }
.ms-footer__list a { color: var(--ms-muted); font-size: 16px; }
.ms-footer__list a:hover { color: var(--ms-ink); }

.ms-contact { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 12px; }
.ms-contact li { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; }
.ms-contact .ms-icon { margin-top: 3px; color: var(--ms-ink); }
.ms-contact a { color: var(--ms-muted); }
.ms-contact a:hover { color: var(--ms-ink); text-decoration: underline; text-underline-offset: 3px; }

.ms-social { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ms-social__label { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-faint); }
.ms-social__list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ms-social__list a {
	width: 38px; height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	color: var(--ms-ink);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ms-social__list a:hover { background: var(--ms-ink); border-color: var(--ms-ink); color: #fff; }

.ms-footer__text { color: var(--ms-muted); font-size: 16px; max-width: 340px; }

.ms-news { display: flex; gap: 10px; margin: 16px 0 12px; max-width: 420px; }
.ms-news__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 18px;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	background: #fff;
	outline: none;
}
.ms-news__input:focus { border-color: var(--ms-ink); }
.ms-news__btn {
	padding: 13px 24px;
	border: 0;
	border-radius: var(--ms-radius-pill);
	background: var(--ms-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.ms-news__btn:hover { background: #000; }

.ms-news__consent { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--ms-muted); }
.ms-news__consent input { margin-top: 4px; }

.ms-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 28px;
	flex-wrap: wrap;
	padding-top: 24px;
	padding-right: 62px;
	border-top: 1px solid var(--ms-line-soft);
}
.ms-footer__copy { flex: 1 1 auto; }
.ms-footer__pay { flex: 0 0 auto; justify-content: center; }
.ms-footer__legal { flex: 1 1 auto; display: flex; justify-content: flex-end; }

.ms-footer__copy { margin: 0; font-size: 15px; color: var(--ms-muted); }

.ms-footer__legallist { display: flex; gap: 20px; flex-wrap: wrap; }
.ms-footer__legallist a { font-size: 15px; color: var(--ms-muted); }
.ms-footer__legallist a:hover { color: var(--ms-ink); }

.ms-footer__pay { display: flex; align-items: center; gap: 12px; }
.ms-footer__paylabel { font-size: 14px; letter-spacing: .06em; color: var(--ms-faint); }

.ms-pay { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ms-pay__item { display: inline-flex; }
.ms-pay__svg { width: 76px; height: 48px; display: block; }

/* ---------- Back to top ------------------------------------------------- */
.ms-totop {
	position: fixed;
	right: 22px; bottom: 22px;
	z-index: 70;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	background: #fff;
	color: var(--ms-ink);
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px) rotate(180deg);
	transition: opacity .25s ease, transform .25s ease;
	box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .5);
}
.ms-totop.is-shown { opacity: 1; pointer-events: auto; transform: translateY(0) rotate(180deg); }

/* ---------- Page shell -------------------------------------------------- */
.ms-main { padding: 12px 0 70px; }

.ms-pagehero { padding: 52px 0 18px; text-align: center; }
.ms-pagehero__title {
	margin: 0 0 8px;
	font-size: clamp(28px, 3.2vw, 46px);
	font-weight: 600;
	letter-spacing: -.02em;
}
.ms-pagehero__sub { margin: 0; color: var(--ms-muted); }

.ms-crumbs { padding: 0 0 26px; font-size: 14px; color: var(--ms-faint); text-align: center; }
.ms-crumbs a { color: var(--ms-muted); }
.ms-crumbs a:hover { color: var(--ms-ink); }
.ms-crumbs__sep { margin: 0 8px; opacity: .6; }

.ms-prose { max-width: 860px; margin: 0 auto; font-size: 17px; }
.ms-prose h2 { margin-top: 1.6em; font-size: 30px; }
.ms-prose h3 { margin-top: 1.4em; font-size: 23px; }
.ms-prose a { color: var(--ms-ink); text-decoration: underline; text-underline-offset: 3px; }
.ms-prose ul, .ms-prose ol { padding-left: 1.3em; }
.ms-prose li { margin-bottom: .5em; }
.ms-prose img { margin: 1.4em 0; }
.ms-prose blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--ms-ink);
	font-size: 20px;
}
.ms-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.ms-prose th, .ms-prose td { padding: 11px 14px; border: 1px solid var(--ms-line); text-align: left; }
.ms-prose th { background: var(--ms-soft); font-weight: 600; }

.ms-section--copy { padding-top: 20px; }

/* ---------- Blog layouts ------------------------------------------------ */
.ms-bloglayout.has-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 46px;
}
.ms-bloglayout.has-sidebar .ms-postgrid { grid-template-columns: repeat(2, 1fr); }

.ms-widget { margin-bottom: 34px; }
.ms-widget__title { font-size: 19px; margin-bottom: 14px; }
.ms-widget ul { list-style: none; margin: 0; padding: 0; }
.ms-widget li { margin-bottom: 9px; color: var(--ms-muted); }

.ms-single { max-width: 900px; margin: 0 auto; }
.ms-single__media { margin: 0 0 32px; }
.ms-single__tags { margin-top: 28px; display: flex; gap: 8px; flex-wrap: wrap; }
.ms-single__tags a {
	padding: 5px 14px;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	font-size: 14px;
	color: var(--ms-muted);
}

.ms-postnav { max-width: 900px; margin: 44px auto 0; display: flex; justify-content: space-between; gap: 24px; }
.ms-postnav a { display: grid; gap: 4px; max-width: 330px; }
.ms-postnav__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-faint); }
.ms-postnav__title { font-size: 17px; color: var(--ms-ink); }

.ms-results { display: grid; gap: 22px; max-width: 900px; margin: 0 auto; }
.ms-result { display: flex; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--ms-line-soft); }
.ms-result__media { flex: 0 0 130px; }
.ms-result__media img { width: 130px; height: 130px; object-fit: cover; }
.ms-result__type { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ms-faint); }
.ms-result__title { margin: 4px 0 6px; font-size: 21px; font-weight: 500; }
.ms-result__excerpt { margin: 0; color: var(--ms-muted); }
.ms-searchform-wrap { max-width: 620px; margin: 0 auto 40px; }

.ms-comments { max-width: 860px; margin: 56px auto 0; }
.ms-comments__title { font-size: 24px; }
.ms-comments__list { list-style: none; margin: 0 0 34px; padding: 0; }
.ms-comments__list .children { list-style: none; padding-left: 32px; }
.ms-comments__list .comment-body { padding: 18px 0; border-bottom: 1px solid var(--ms-line-soft); }
.ms-comments input[type=text], .ms-comments input[type=email], .ms-comments input[type=url], .ms-comments textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--ms-line);
	background: #fff;
}
.ms-comments label { display: block; margin-bottom: 6px; font-size: 14px; }

/* Pagination */
.pagination, .woocommerce-pagination { margin-top: 46px; }
.pagination .nav-links, .woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce-pagination ul.page-numbers li { border: 0; }
.page-numbers {
	min-width: 42px; height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	font-size: 15px;
	color: var(--ms-body);
}
.page-numbers.current, .page-numbers:hover { background: var(--ms-ink); border-color: var(--ms-ink); color: #fff; }

/* ---------- 404 --------------------------------------------------------- */
.ms-404 { padding: 90px 0 110px; text-align: center; }
.ms-404__code { margin: 0; font-size: clamp(76px, 12vw, 150px); font-weight: 600; line-height: .9; color: var(--ms-soft); }
.ms-404__title { margin: -14px 0 12px; font-size: clamp(26px, 3vw, 40px); }
.ms-404__text { max-width: 520px; margin: 0 auto 28px; color: var(--ms-muted); }
.ms-404__form { max-width: 520px; margin: 0 auto 26px; }
.ms-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Contact ----------------------------------------------------- */
.ms-contactgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 54px;
	align-items: start;
}
.ms-contactgrid__main { max-width: none; margin: 0; }

.ms-infocard {
	padding: 30px 30px 34px;
	border: 1px solid var(--ms-line);
	background: var(--ms-soft);
}
.ms-infocard__title { margin: 0 0 20px; font-size: 23px; }
.ms-infocard__cta { margin-top: 22px; }

.ms-infolist { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ms-infolist li { display: flex; gap: 14px; }
.ms-infolist__ico { color: var(--ms-ink); margin-top: 2px; }
.ms-infolist__body { display: grid; gap: 3px; }
.ms-infolist__label { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--ms-faint); }
.ms-infolist a { color: var(--ms-ink); }
.ms-infolist a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ms-mapwrap { position: relative; margin-top: 56px; }
.ms-map { display: block; width: 100%; border: 0; filter: grayscale(.15); }
.ms-mapwrap__link {
	position: absolute;
	top: 18px; right: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	background: #fff;
	border-radius: var(--ms-radius-pill);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ms-ink);
	box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .55);
}
.ms-mapwrap__link:hover { background: var(--ms-ink); color: #fff; }

/* =========================================================================
   WooCommerce
   ========================================================================= */
.ms-woo .woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 26px;
	padding: 15px 20px;
	border: 1px solid var(--ms-line);
	border-left: 3px solid var(--ms-ink);
	background: var(--ms-soft);
	list-style: none;
	font-size: 16px;
}
.woocommerce-error { border-left-color: var(--ms-sale); }
.woocommerce-message .button,
.woocommerce-info .button { float: right; }

.ms-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ms-line-soft);
}
.woocommerce-result-count { margin: 0; color: var(--ms-muted); font-size: 15px; }
.woocommerce-ordering select {
	padding: 10px 16px;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	background: #fff;
}

.ms-shoplayout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 44px; }
.ms-shoplayout__main { order: 2; }
.ms-shoplayout__aside { order: 1; }

/* WooCommerce ships a float grid plus clearfix pseudo-elements; in a CSS grid
   those pseudo-elements become real cells and shunt the first product along.
   The selectors below are deliberately specific: woocommerce.css loads after
   the theme stylesheet, so equal specificity would lose. */
body.ms ul.products::before,
body.ms ul.products::after,
body.ms ul.products li.product::before,
body.ms ul.products li.product::after { content: none; display: none; }

/* Single product */
.ms-woo div.product { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 56px; }
body.ms .ms-woo div.product div.woocommerce-product-gallery,
body.ms .ms-woo div.product div.images { float: none; width: auto; margin: 0; }
body.ms .ms-woo div.product div.summary { float: none; width: auto; margin: 0; }
body.ms .ms-woo div.product::before,
body.ms .ms-woo div.product::after { content: none; display: none; }
.ms-woo div.product .woocommerce-tabs,
.ms-woo div.product .related,
.ms-woo div.product .upsells { grid-column: 1 / -1; }

.ms-woo .product_title { font-size: clamp(26px, 2.6vw, 40px); margin-bottom: 12px; }
.ms-woo div.product p.price,
.ms-woo div.product span.price { font-size: 27px; font-weight: 600; color: var(--ms-ink); }
.ms-woo div.product p.price del { font-size: 19px; color: var(--ms-faint); font-weight: 400; }
.ms-woo div.product p.price ins { text-decoration: none; }

.ms-woo .woocommerce-product-details__short-description { color: var(--ms-body); }

.ms-woo form.cart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 24px 0; }
.ms-woo form.cart .quantity { display: inline-flex; }
.ms-woo form.cart .quantity input.qty {
	width: 82px;
	height: 52px;
	padding: 0 10px;
	text-align: center;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	background: #fff;
}
.ms-woo form.cart .single_add_to_cart_button,
.ms-woo .button,
.ms-woo button.button,
.ms-woo input.button,
.ms-woo a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	border: 0;
	border-radius: var(--ms-radius-pill);
	background: var(--ms-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	transition: background .2s ease;
	cursor: pointer;
}
.ms-woo .button:hover,
.ms-woo button.button:hover,
.ms-woo input.button:hover,
.ms-woo a.button:hover { background: #000; color: #fff; }

.ms-woo .button.alt { background: var(--ms-accent); }
.ms-woo .woocommerce-message .button,
.ms-woo .woocommerce-info .button { padding: 10px 20px; font-size: 12px; }

.ms-trust { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.ms-trust li { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--ms-body); }
.ms-trust .ms-icon { color: var(--ms-ink); }

.ms-single__pay { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ms-line-soft); flex-wrap: wrap; }
.ms-single__paylabel { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-faint); }

.ms-gtin { display: block; margin-top: 6px; font-size: 14px; color: var(--ms-muted); }
.ms-woo .product_meta { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ms-line-soft); font-size: 14px; color: var(--ms-muted); }
.ms-woo .product_meta > span { display: block; margin-bottom: 5px; }

.ms-woo .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 28px;
	margin: 54px 0 24px;
	padding: 0 0 12px;
	list-style: none;
	border-bottom: 1px solid var(--ms-line);
}
.ms-woo .woocommerce-tabs ul.tabs::before { display: none; }
.ms-woo .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.ms-woo .woocommerce-tabs ul.tabs li::before,
.ms-woo .woocommerce-tabs ul.tabs li::after { display: none; }
.ms-woo .woocommerce-tabs ul.tabs li a {
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ms-faint);
}
.ms-woo .woocommerce-tabs ul.tabs li.active a { color: var(--ms-ink); }
.ms-woo .woocommerce-Tabs-panel h2 { font-size: 24px; }

.ms-woo .related > h2,
.ms-woo .upsells > h2,
.ms-woo .cross-sells > h2 {
	margin: 56px 0 30px;
	font-size: clamp(24px, 2.4vw, 34px);
	text-align: center;
}

/* Gallery: a fixed 500x500 stage with the thumbnail rail stacked down the
   left. FlexSlider wraps the figure in .flex-viewport and writes inline widths
   onto the track, so the viewport is what gets sized, never the track. */
.ms-woo .woocommerce-product-gallery { position: relative; }

body.ms .ms-woo div.product div.woocommerce-product-gallery {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 14px;
}

body.ms .ms-woo .woocommerce-product-gallery .flex-viewport,
body.ms .ms-woo .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	width: 500px;
	max-width: 100%;
	height: 500px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ms-line-soft);
}

body.ms .ms-woo .woocommerce-product-gallery__wrapper { margin: 0; }
body.ms .ms-woo .woocommerce-product-gallery__image,
body.ms .ms-woo .woocommerce-product-gallery__image a { display: block; }

body.ms .ms-woo .woocommerce-product-gallery__image img {
	width: 500px;
	height: 500px;
	max-width: 100%;
	object-fit: contain;
	background: #fff;
	padding: 22px;
}

body.ms .ms-woo div.product div.woocommerce-product-gallery ol.flex-control-thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 0 88px;
	width: 88px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: visible;
}
body.ms .ms-woo div.product div.woocommerce-product-gallery ol.flex-control-thumbs li {
	width: 88px;
	height: 88px;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
}
body.ms .ms-woo div.product div.woocommerce-product-gallery ol.flex-control-thumbs li img {
	width: 88px;
	height: 88px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--ms-line-soft);
	padding: 6px;
	cursor: pointer;
	opacity: .68;
	transition: opacity .2s ease, border-color .2s ease;
}
body.ms .ms-woo div.product div.woocommerce-product-gallery ol.flex-control-thumbs li img:hover,
body.ms .ms-woo div.product div.woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--ms-ink);
}
.ms-woo .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px; right: 14px;
	z-index: 4;
	width: 40px; height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: var(--ms-radius-pill);
	box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .6);
	font-size: 0;
}

/* Cart & checkout */
.ms-woo table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ms-line);
	border-radius: 0;
	margin-bottom: 30px;
}
.ms-woo table.shop_table th,
.ms-woo table.shop_table td { padding: 15px 16px; border-bottom: 1px solid var(--ms-line-soft); text-align: left; }
.ms-woo table.shop_table th { font-weight: 600; color: var(--ms-ink); }
.ms-woo table.cart img { width: 74px; }

.ms-woo .cart_totals,
.ms-woo .cross-sells { margin-top: 24px; }
.ms-woo .coupon { display: flex; gap: 10px; flex-wrap: wrap; }
.ms-woo #coupon_code {
	padding: 14px 18px;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	min-width: 200px;
}

.ms-woo form .form-row { display: grid; gap: 6px; margin-bottom: 16px; }
.ms-woo form .form-row label { font-size: 14px; color: var(--ms-body); }
.ms-woo form .form-row input.input-text,
.ms-woo form .form-row textarea,
.ms-woo form .form-row select,
.ms-woo .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	padding: 13px 16px;
	border: 1px solid var(--ms-line);
	border-radius: 4px;
	background: #fff;
	outline: none;
}
.ms-woo form .form-row input.input-text:focus,
.ms-woo form .form-row textarea:focus { border-color: var(--ms-ink); }
.ms-woo .select2-container .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; }
.ms-woo .select2-container .select2-selection--single .select2-selection__arrow { top: 12px; }

.ms-woo #customer_details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.ms-woo #order_review_heading { margin-top: 40px; }
.ms-woo #payment { background: var(--ms-soft); border: 1px solid var(--ms-line); padding: 22px; }
.ms-woo #payment ul.payment_methods { list-style: none; margin: 0 0 18px; padding: 0; }
.ms-woo #payment ul.payment_methods li { margin-bottom: 12px; }
.ms-woo #payment div.payment_box { background: #fff; border: 1px solid var(--ms-line); padding: 14px 16px; margin-top: 10px; font-size: 15px; }
.ms-woo #place_order { width: 100%; }

.ms-woo .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.ms-woo .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--ms-line-soft); }
.ms-woo .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 0; color: var(--ms-body); }
.ms-woo .woocommerce-MyAccount-navigation li.is-active a { color: var(--ms-ink); font-weight: 600; }
.ms-woo .woocommerce-MyAccount-content { min-width: 0; }
.ms-woo .woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 46px; }
.ms-woo .woocommerce-account.woocommerce-page:not(.logged-in) .woocommerce { grid-template-columns: minmax(0, 1fr); }

.ms-woo .woocommerce-form-login,
.ms-woo .woocommerce-form-register,
.ms-woo .woocommerce-ResetPassword {
	max-width: 480px;
	margin: 0 auto;
	padding: 30px;
	border: 1px solid var(--ms-line);
}

.ms-woo ul.woocommerce-error { border-left-color: var(--ms-sale); }

/* Onsale flash suppressed in favour of our badge stack */
.ms-woo span.onsale { display: none; }

/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 1400px) {
	:root { --ms-pad: 26px; }
	.ms-nav__list { gap: 26px; }
}

@media (max-width: 1200px) {
	.ms-footer__top { grid-template-columns: 1fr 1fr; }
	.ms-woo div.product { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.ms-shoplayout { grid-template-columns: 1fr; }
	.ms-shoplayout__aside { order: 3; }
	.ms-contactgrid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

@media (max-width: 1024px) {
	.ms-burger { display: inline-flex; }
	.ms-nav { display: none; }
	.ms-header__brand { flex: 1 1 auto; }
	.ms-header__inner { gap: 10px; }

	ul.products.ms-grid,
	.ms-woo ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ms-carousel { --ms-per-view: 3; }
	.ms-carousel__nav--prev { left: 4px; }
	.ms-carousel__nav--next { right: 4px; }
	.ms-postgrid, .ms-postgrid--archive { grid-template-columns: repeat(2, 1fr); }
	.ms-services__grid { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
	.ms-tiles__grid--4 { grid-template-columns: repeat(2, 1fr); }
	.ms-strip__grid { grid-template-columns: repeat(3, 1fr); }
	.ms-bloglayout.has-sidebar { grid-template-columns: 1fr; }
	.ms-bloglayout.has-sidebar .ms-postgrid { grid-template-columns: repeat(2, 1fr); }
	.ms-woo #customer_details { grid-template-columns: 1fr; gap: 20px; }
	.ms-woo .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 24px; }
	.ms-spot__inner { justify-content: center; }
}

@media (max-width: 768px) {
	:root { --ms-pad: 18px; --ms-gap: 16px; }

	body.ms { font-size: 16px; }

	.ms-section { padding: 52px 0; }
	.ms-sechead { margin-bottom: 28px; }

	.ms-brand--image img { height: 38px; max-width: 200px; }

	.ms-tiles__grid,
	.ms-tiles__grid--4,
	.ms-tiles__grid--3,
	.ms-tiles__grid--2 { grid-template-columns: 1fr; gap: 12px; }
	.ms-tile { min-height: 210px; }
	.ms-catbanner { min-height: 200px; }

	ul.products.ms-grid,
	.ms-woo ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
	.ms-carousel { --ms-per-view: 2; }
	.ms-carousel__nav { display: none; }
	.ms-rail { margin-top: 44px; }

	.ms-card__actions { display: none; }
	.ms-card__cartbar { position: static; transform: none; padding: 10px 0 0; }
	.ms-card__cartbar .button { font-size: 12px; padding: 11px; }

	.ms-promos { grid-template-columns: 1fr; }
	.ms-postgrid, .ms-postgrid--archive,
	.ms-bloglayout.has-sidebar .ms-postgrid { grid-template-columns: 1fr; }

	.ms-spotcard { flex-direction: column; }
	.ms-spotcard__media { flex: none; }

	.ms-footer__top { grid-template-columns: 1fr; gap: 32px; }
	.ms-footer { margin-top: 46px; padding-top: 46px; }
	.ms-footer__bottom { justify-content: flex-start; padding-right: 0; }
	.ms-footer__copy,
	.ms-footer__legal { flex: 1 1 100%; }
	.ms-footer__legal { justify-content: flex-start; }

	.ms-result { flex-direction: column; }
	.ms-result__media, .ms-result__media img { width: 100%; flex: none; height: auto; }

	.ms-searchform__input { font-size: 18px; }

	.ms-hero__nav { display: none; }
	.ms-strip__grid { grid-template-columns: repeat(2, 1fr); }

	body.ms .ms-woo div.product div.woocommerce-product-gallery { flex-direction: column; gap: 10px; }
	body.ms .ms-woo .woocommerce-product-gallery .flex-viewport,
	body.ms .ms-woo .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { width: 100%; height: auto; aspect-ratio: 1 / 1; }
	body.ms .ms-woo .woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 14px; }
	body.ms .ms-woo div.product div.woocommerce-product-gallery ol.flex-control-thumbs { flex-direction: row; flex: none; width: 100%; overflow-x: auto; }
	.ms-pay__svg { width: 64px; height: 40px; }

	.ms-woo form.cart { gap: 10px; }
	.ms-woo form.cart .single_add_to_cart_button { flex: 1 1 auto; }

	.ms-woo table.shop_table thead { display: none; }
	.ms-woo table.shop_table tbody tr { display: block; border-bottom: 1px solid var(--ms-line); padding: 10px 0; }
	.ms-woo table.shop_table tbody td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 8px 12px; }
	.ms-woo table.shop_table tbody td::before { content: attr(data-title); font-weight: 600; color: var(--ms-ink); }
	.ms-woo table.shop_table tbody td.product-remove::before,
	.ms-woo table.shop_table tbody td.product-thumbnail::before { display: none; }
}

@media (max-width: 480px) {
	.ms-services__grid { grid-template-columns: 1fr; }
	.ms-news { flex-direction: column; }
	.ms-btn { padding: 13px 22px; font-size: 13px; }
}

/* =========================================================================
   Specificity guard
   woocommerce.css and the block library both load after this stylesheet, so
   anything they also target needs a deeper selector here to survive.
   ========================================================================= */

/* Prose lists — the upstream reset strips the markers. */
.ms-prose ul { list-style: disc; }
.ms-prose ol { list-style: decimal; }
.ms-prose li { display: list-item; }
.ms-prose ul ul { list-style: circle; }

/* Buttons, everywhere WooCommerce paints its own. */
body.ms .woocommerce .button,
body.ms .woocommerce button.button,
body.ms .woocommerce input.button,
body.ms .woocommerce a.button,
body.ms .woocommerce .button.alt,
body.ms .woocommerce button.button.alt,
body.ms .woocommerce input.button.alt,
body.ms .woocommerce a.button.alt,
body.ms .woocommerce input[type="submit"].button,
body.ms .woocommerce button[type="submit"],
body.ms .woocommerce .woocommerce-Button,
body.ms .woocommerce #place_order,
body.ms .woocommerce .checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 30px;
	border: 0;
	border-radius: var(--ms-radius-pill);
	background: var(--ms-accent);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
	cursor: pointer;
}
body.ms .woocommerce .button:hover,
body.ms .woocommerce button.button:hover,
body.ms .woocommerce input.button:hover,
body.ms .woocommerce a.button:hover,
body.ms .woocommerce .button.alt:hover,
body.ms .woocommerce #place_order:hover,
body.ms .woocommerce .checkout-button:hover { background: #000; color: #fff; }

body.ms .woocommerce .button:disabled,
body.ms .woocommerce .button.disabled { opacity: .45; cursor: not-allowed; }

body.ms .woocommerce .checkout-button,
body.ms .woocommerce #place_order { width: 100%; padding: 18px 30px; font-size: 14px; }

/* Form controls. */
body.ms .woocommerce form .form-row input.input-text,
body.ms .woocommerce form .form-row textarea,
body.ms .woocommerce form .form-row select,
body.ms .woocommerce input.input-text,
body.ms .woocommerce textarea,
body.ms .woocommerce select,
body.ms .woocommerce .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	min-height: 50px;
	padding: 13px 16px;
	border: 1px solid var(--ms-line);
	border-radius: 4px;
	background: #fff;
	color: var(--ms-ink);
	font-size: 16px;
	line-height: 1.4;
	outline: none;
	box-shadow: none;
}
body.ms .woocommerce form .form-row input.input-text:focus,
body.ms .woocommerce form .form-row textarea:focus,
body.ms .woocommerce input.input-text:focus { border-color: var(--ms-ink); }
body.ms .woocommerce .select2-container .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.5; color: var(--ms-ink); }
body.ms .woocommerce .select2-container .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 10px; }
body.ms .woocommerce form .form-row label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--ms-body); }
body.ms .woocommerce form .form-row { margin-bottom: 18px; padding: 0; }
body.ms .woocommerce form .form-row-first,
body.ms .woocommerce form .form-row-last { width: 48.5%; }

/* Notices: drop WooCommerce's icon font, keep a flat bar. */
body.ms .woocommerce .woocommerce-message,
body.ms .woocommerce .woocommerce-info,
body.ms .woocommerce .woocommerce-error,
body.ms .woocommerce-message,
body.ms .woocommerce-info,
body.ms .woocommerce-error {
	margin: 0 0 26px;
	padding: 16px 20px;
	border: 0;
	border-left: 3px solid var(--ms-ink);
	background: var(--ms-soft);
	color: var(--ms-body);
	list-style: none;
	font-size: 15.5px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
body.ms .woocommerce .woocommerce-message::before,
body.ms .woocommerce .woocommerce-info::before,
body.ms .woocommerce .woocommerce-error::before,
body.ms .woocommerce-message::before,
body.ms .woocommerce-info::before,
body.ms .woocommerce-error::before { content: none; display: none; }
body.ms .woocommerce-error { border-left-color: var(--ms-sale); }
body.ms .woocommerce .woocommerce-message .button,
body.ms .woocommerce .woocommerce-info .button { float: none; margin-left: auto; padding: 11px 20px; font-size: 12px; }

/* Tables. */
body.ms .woocommerce table.shop_table,
body.ms .woocommerce table.woocommerce-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ms-line);
	border-radius: 0;
	margin: 0 0 30px;
}
body.ms .woocommerce table.shop_table th,
body.ms .woocommerce table.shop_table td {
	padding: 16px;
	border-bottom: 1px solid var(--ms-line-soft);
	text-align: left;
	vertical-align: middle;
}
body.ms .woocommerce table.shop_table thead th { background: var(--ms-soft); font-weight: 600; color: var(--ms-ink); }
body.ms .woocommerce table.cart img { width: 78px; height: auto; }
body.ms .woocommerce .cart_totals h2,
body.ms .woocommerce #order_review_heading { font-size: 24px; margin-bottom: 16px; }

/* Cart layout. */
body.ms .woocommerce .cart-collaterals { width: 100%; }
body.ms .woocommerce .cart-collaterals .cart_totals { float: right; width: min(430px, 100%); }
body.ms .woocommerce .coupon { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
body.ms .woocommerce #coupon_code { width: auto; min-width: 190px; min-height: 50px; border-radius: var(--ms-radius-pill); padding: 13px 20px; }
body.ms .woocommerce .quantity input.qty {
	width: 84px;
	min-height: 48px;
	padding: 0 8px;
	text-align: center;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	background: #fff;
}

/* Checkout. */
body.ms .woocommerce #payment { background: var(--ms-soft); border: 1px solid var(--ms-line); border-radius: 0; padding: 24px; }
body.ms .woocommerce #payment ul.payment_methods { list-style: none; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--ms-line); }
body.ms .woocommerce #payment div.payment_box { background: #fff; border: 1px solid var(--ms-line); border-radius: 0; padding: 14px 16px; margin: 10px 0 0; font-size: 15px; }
body.ms .woocommerce #payment div.payment_box::before { display: none; }
body.ms .woocommerce-checkout #customer_details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
body.ms .woocommerce-checkout #customer_details .col-1,
body.ms .woocommerce-checkout #customer_details .col-2 { width: auto; float: none; }

/* Account. */
body.ms .woocommerce-account .woocommerce { display: block; }
body.ms.logged-in .woocommerce-account .woocommerce,
body.ms .woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}
body.ms .woocommerce-account .woocommerce-MyAccount-navigation { width: auto; float: none; }
body.ms .woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }
body.ms .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ms-line); }
body.ms .woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--ms-line-soft); }
body.ms .woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
body.ms .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 14px 18px; color: var(--ms-body); font-size: 15px; }
body.ms .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.ms .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--ms-soft); color: var(--ms-ink); font-weight: 600; }

body.ms .woocommerce .woocommerce-form-login,
body.ms .woocommerce .woocommerce-form-register,
body.ms .woocommerce .woocommerce-ResetPassword {
	max-width: none;
	margin: 0;
	padding: 30px;
	border: 1px solid var(--ms-line);
	border-radius: 0;
}
body.ms .woocommerce .u-columns.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
body.ms .woocommerce .u-columns.col2-set .col-1,
body.ms .woocommerce .u-columns.col2-set .col-2 { width: auto; float: none; }
body.ms .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 14px; }
body.ms .woocommerce .woocommerce-privacy-policy-text p { font-size: 14px; color: var(--ms-muted); }

/* Price colours WooCommerce paints green. */
body.ms .woocommerce div.product p.price,
body.ms .woocommerce div.product span.price,
body.ms .woocommerce ul.products li.product .price { color: var(--ms-ink); }
body.ms .woocommerce ul.products li.product .price del,
body.ms .woocommerce div.product p.price del { color: var(--ms-faint); font-weight: 400; }
body.ms .woocommerce ul.products li.product .price ins,
body.ms .woocommerce div.product p.price ins { text-decoration: none; font-weight: 600; }

/* =========================================================================
   Colour family selector on the product page
   ========================================================================= */
.ms-colours { margin: 20px 0 4px; }
.ms-colours__label {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ms-faint);
}
.ms-colours__label strong { color: var(--ms-ink); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 16px; }
.ms-colours__list { display: flex; gap: 12px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.ms-colours__item { margin: 0; }
.ms-colours__swatch {
	position: relative;
	display: block;
	width: 42px;
	height: 42px;
	border-radius: var(--ms-radius-pill);
	border: 1px solid rgba(0, 0, 0, .16);
	box-shadow: inset 0 0 0 3px #fff;
	transition: box-shadow .2s ease, transform .2s ease;
}
.ms-colours__swatch:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--ms-ink); }
.ms-colours__item.is-current .ms-colours__swatch { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--ms-ink); }

/* =========================================================================
   Order tracking
   ========================================================================= */
.ms-track { max-width: 760px; margin: 0 auto; }
.ms-track__card {
	padding: 30px;
	border: 1px solid var(--ms-line);
	background: var(--ms-soft);
	margin-bottom: 26px;
}
.ms-track__card h2 { margin: 0 0 8px; font-size: 23px; }
.ms-track__card p { color: var(--ms-muted); font-size: 15.5px; }
.ms-track__form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.ms-track__form input[type="text"] {
	flex: 1 1 240px;
	min-height: 50px;
	padding: 13px 18px;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	background: #fff;
	outline: none;
}
.ms-track__form input[type="text"]:focus { border-color: var(--ms-ink); }
.ms-track__note { margin: 12px 0 0; font-size: 14px; color: var(--ms-faint); }

.ms-shipment {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 26px;
	padding: 18px 22px;
	border: 1px solid var(--ms-line);
	background: #fff;
}
.ms-shipment__label { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--ms-faint); }
.ms-shipment__number { font-size: 18px; font-weight: 600; color: var(--ms-ink); letter-spacing: .02em; }
.ms-shipment__carrier { font-size: 14px; color: var(--ms-muted); }
.ms-shipment__cta { margin-left: auto; }

/* =========================================================================
   Shipping facts block on the single product
   ========================================================================= */
.ms-shipfacts {
	margin: 22px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--ms-line-soft);
	background: var(--ms-soft);
	font-size: 14.5px;
	color: var(--ms-body);
}
.ms-shipfacts dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.ms-shipfacts dt { font-weight: 600; color: var(--ms-ink); }
.ms-shipfacts dd { margin: 0; }

@media (max-width: 1024px) {
	body.ms.logged-in .woocommerce-account .woocommerce,
	body.ms .woocommerce-account.logged-in .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	body.ms .woocommerce-checkout #customer_details { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	body.ms .woocommerce .u-columns.col2-set { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	body.ms .woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; }
	body.ms .woocommerce form .form-row-first,
	body.ms .woocommerce form .form-row-last { width: 100%; }
	.ms-shipment__cta { margin-left: 0; }
}

.ms-swatch.is-current { box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--ms-ink); }

.ms-track__form select {
	flex: 0 0 auto;
	min-width: 130px;
	min-height: 50px;
	padding: 13px 16px;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	background: #fff;
	color: var(--ms-ink);
	font-size: 15px;
}
.ms-track__form .ms-btn { flex: 0 0 auto; }

/* WooCommerce clearfix pseudo-elements turn into stray cells in every grid we
   build on top of its float layout, shunting the first real child along. */
body.ms .woocommerce .col2-set::before,
body.ms .woocommerce .col2-set::after,
body.ms .woocommerce-page .col2-set::before,
body.ms .woocommerce-page .col2-set::after,
body.ms .woocommerce #customer_details::before,
body.ms .woocommerce #customer_details::after,
body.ms .woocommerce-account .woocommerce::before,
body.ms .woocommerce-account .woocommerce::after,
body.ms .woocommerce .cart-collaterals::before,
body.ms .woocommerce .cart-collaterals::after,
body.ms .woocommerce div.product::before,
body.ms .woocommerce div.product::after { content: none; display: none; }

body.ms .woocommerce .u-columns.col2-set .u-column1,
body.ms .woocommerce .u-columns.col2-set .u-column2 { width: auto; float: none; }

.ms-sourcing { margin: 10px 0 0; font-size: 13.5px; color: var(--ms-faint); line-height: 1.5; }
.ms-shipfacts--checkout { margin: 0 0 18px; }
.ms-shipfacts--checkout strong { display: block; margin-bottom: 8px; color: var(--ms-ink); }
.ms-shipfacts--checkout ul { margin: 0; padding-left: 1.1em; list-style: disc; }
.ms-shipfacts--checkout li { margin-bottom: 4px; }

/* =========================================================================
   Product grids outside the shop
   The [products] shortcode emits a plain `ul.products`, and the page it sits on
   carries neither .ms-woo nor the .woocommerce body class, so the grid has to
   be declared globally rather than scoped to the shop templates.
   ========================================================================= */
body.ms ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px var(--ms-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
body.ms ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.ms ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.ms ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Rails stay horizontal; this selector has to outrank the grid above. */
body.ms .ms-carousel ul.products,
body.ms .ms-woo .ms-carousel ul.products {
	display: flex;
	flex-wrap: nowrap;
	grid-template-columns: none;
	gap: var(--ms-gap);
}

/* A page whose job is a product grid drops the reading measure. */
.ms-prose--wide { max-width: none; }
.ms-prose--wide > p { max-width: 860px; }
.ms-prose--wide ul.products { margin-top: 34px; }

@media (max-width: 1024px) {
	body.ms ul.products,
	body.ms ul.products.columns-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	body.ms ul.products,
	body.ms ul.products.columns-3,
	body.ms ul.products.columns-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
}

/* =========================================================================
   Cart & checkout
   These render through page.php from a shortcode, so they get .ms-woo and the
   wide wrapper from the template. WooCommerce lays them out with floats; the
   rules below replace those with flex/grid, which matters because the theme
   suppresses WooCommerce's clearfix pseudo-elements (they become stray cells
   in any grid built on top).
   ========================================================================= */

/* A prose wrapper that is really a shop layout keeps no reading measure. */
.ms-woo .ms-prose--wide,
.ms-woo .ms-prose--wide > p { max-width: none; }

/* Cart totals used to float right; with the clearfix gone that float escaped
   the container and the footer wrapped around it. */
body.ms .woocommerce .cart-collaterals {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 40px;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 34px;
}
body.ms .woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: min(440px, 100%);
	flex: 0 0 auto;
}
body.ms .woocommerce .cart-collaterals .cross-sells {
	float: none;
	width: auto;
	flex: 1 1 340px;
	min-width: 0;
}

body.ms .woocommerce table.cart td.actions { padding: 18px 16px; }
body.ms .woocommerce table.cart td.actions .coupon { float: none; }
body.ms .woocommerce table.cart td.actions > .button { float: right; margin-top: -46px; }
body.ms .woocommerce table.cart td.product-remove { width: 48px; text-align: center; }
body.ms .woocommerce table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--ms-radius-pill);
	background: var(--ms-soft);
	color: var(--ms-muted) !important;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}
body.ms .woocommerce table.cart td.product-remove a.remove:hover { background: var(--ms-sale); color: #fff !important; }
body.ms .woocommerce table.cart td.product-thumbnail { width: 110px; }

/* Checkout: two even columns, order review full width beneath. */
body.ms .woocommerce-checkout .ms-prose--wide > .woocommerce { max-width: none; }
body.ms .woocommerce-checkout form.checkout > .col2-set { margin-bottom: 34px; }
body.ms .woocommerce-checkout #order_review,
body.ms .woocommerce-checkout #order_review_heading { width: 100%; float: none; clear: both; }
body.ms .woocommerce-checkout .woocommerce-checkout-review-order-table { margin-bottom: 24px; }
body.ms .woocommerce-checkout #payment { background: var(--ms-soft); }
body.ms .woocommerce-checkout #payment ul.payment_methods li label { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
body.ms .woocommerce-checkout #payment ul.payment_methods li img { max-height: 26px; width: auto; display: inline-block; margin-left: 8px; }
body.ms .woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--ms-line); }

/* Checkbox and radio controls must not inherit the text-input sizing. */
body.ms .woocommerce input[type="checkbox"],
body.ms .woocommerce input[type="radio"] {
	width: 17px;
	min-width: 17px;
	height: 17px;
	min-height: 17px;
	padding: 0;
	margin: 0 8px 0 0;
	border-radius: 3px;
	vertical-align: middle;
	accent-color: var(--ms-accent);
}
body.ms .woocommerce input[type="radio"] { border-radius: 50%; }
body.ms .woocommerce .woocommerce-form__label-for-checkbox,
body.ms .woocommerce .woocommerce-terms-and-conditions-wrapper label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
}
body.ms .woocommerce .woocommerce-terms-and-conditions-wrapper { margin-bottom: 18px; }

/* Order-received and account order tables. */
body.ms .woocommerce .woocommerce-order,
body.ms .woocommerce .woocommerce-order-details,
body.ms .woocommerce .woocommerce-customer-details { max-width: none; }
body.ms .woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 34px;
	margin: 0 0 30px;
	padding: 22px;
	list-style: none;
	border: 1px solid var(--ms-line);
	background: var(--ms-soft);
}
body.ms .woocommerce ul.order_details li { border: 0; margin: 0; padding: 0; float: none; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-faint); }
body.ms .woocommerce ul.order_details li strong { display: block; margin-top: 4px; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--ms-ink); }
body.ms .woocommerce .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
body.ms .woocommerce .woocommerce-columns--addresses .col-1,
body.ms .woocommerce .woocommerce-columns--addresses .col-2 { width: auto; float: none; }

@media (max-width: 900px) {
	body.ms .woocommerce .cart-collaterals { justify-content: flex-start; gap: 26px; }
	body.ms .woocommerce .cart-collaterals .cart_totals { width: 100%; }
	body.ms .woocommerce table.cart td.actions > .button { float: none; margin-top: 12px; width: 100%; }
	body.ms .woocommerce .woocommerce-columns--addresses { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* =========================================================================
   Shop form pages
   Cart, checkout and My Account are forms, not grids. Full container width
   stretched the fields across 1700px, which reads badly; they get their own
   measure instead.
   ========================================================================= */
.ms-woo .ms-prose--wide {
	max-width: 1260px;
	margin: 0 auto;
}
.ms-woo .ms-prose--wide > p { max-width: none; }

body.ms.woocommerce-checkout .ms-prose--wide { max-width: 1260px; }
body.ms.woocommerce-cart .ms-prose--wide { max-width: 1180px; }
body.ms.woocommerce-account .ms-prose--wide { max-width: 1080px; }

/* =========================================================================
   Contact form
   ========================================================================= */
.ms-form { margin: 8px 0 0; }

.ms-form__note {
	margin: 0 0 22px;
	padding: 16px 20px;
	border-left: 3px solid var(--ms-ink);
	background: var(--ms-soft);
	font-size: 15.5px;
}
.ms-form__note--ok { border-left-color: #2f8f5b; }
.ms-form__note--bad { border-left-color: var(--ms-sale); }
.ms-form__note strong { display: block; margin-bottom: 3px; color: var(--ms-ink); }
.ms-form__note ul { margin: 0; padding-left: 1.1em; }

.ms-form__row--split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
}

.ms-form__field { margin: 0 0 18px; }
.ms-form__field label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	color: var(--ms-body);
}
.ms-form__hint { color: var(--ms-faint); }

.ms-form__field input[type="text"],
.ms-form__field input[type="email"],
.ms-form__field select,
.ms-form__field textarea {
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	border: 1px solid var(--ms-line);
	border-radius: 4px;
	background: #fff;
	color: var(--ms-ink);
	font-size: 16px;
	font-family: inherit;
	line-height: 1.45;
	outline: none;
	transition: border-color .2s ease;
}
.ms-form__field textarea { min-height: 160px; resize: vertical; }
.ms-form__field input:focus,
.ms-form__field select:focus,
.ms-form__field textarea:focus { border-color: var(--ms-ink); }

/* The honeypot must be reachable by bots and invisible to people. */
.ms-form__honey {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ms-form__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 6px;
}
.ms-form__legal { font-size: 13.5px; color: var(--ms-faint); max-width: 380px; }
.ms-form__legal a { color: var(--ms-muted); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) {
	.ms-form__row--split { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* =========================================================================
   Cart & checkout desktop layout
   WooCommerce stacks these vertically. On a wide screen that leaves the totals
   stranded below a half-empty table, so both pages are rebuilt as the standard
   two-column shape: the work on the left, a sticky summary on the right.
   ========================================================================= */

/* ---------- Cart --------------------------------------------------------- */
body.ms.woocommerce-cart .ms-prose--wide > .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 44px;
	align-items: start;
}
body.ms.woocommerce-cart .ms-prose--wide > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.ms.woocommerce-cart .ms-prose--wide > .woocommerce > form.woocommerce-cart-form { grid-column: 1; margin: 0; }
body.ms.woocommerce-cart .ms-prose--wide > .woocommerce > .cart-collaterals {
	grid-column: 2;
	display: block;
	margin: 0;
	position: sticky;
	top: 104px;
}

body.ms .woocommerce .cart-collaterals .cart_totals {
	width: 100%;
	padding: 26px;
	border: 1px solid var(--ms-line);
	background: var(--ms-soft);
}
body.ms .woocommerce .cart-collaterals .cart_totals h2 {
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ms-line);
	font-size: 20px;
}
body.ms .woocommerce .cart-collaterals .cart_totals table.shop_table {
	border: 0;
	margin: 0 0 18px;
	background: transparent;
}
body.ms .woocommerce .cart-collaterals .cart_totals table.shop_table th,
body.ms .woocommerce .cart-collaterals .cart_totals table.shop_table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--ms-line);
	background: transparent;
	font-size: 15px;
}
body.ms .woocommerce .cart-collaterals .cart_totals table.shop_table th { width: 40%; font-weight: 500; color: var(--ms-muted); }
body.ms .woocommerce .cart-collaterals .cart_totals table.shop_table td { text-align: right; }
body.ms .woocommerce .cart-collaterals .cart_totals tr.order-total th,
body.ms .woocommerce .cart-collaterals .cart_totals tr.order-total td { border-bottom: 0; font-size: 19px; color: var(--ms-ink); font-weight: 600; }
body.ms .woocommerce .cart-collaterals .cart_totals ul#shipping_method { margin: 0; padding: 0; list-style: none; text-align: left; }
body.ms .woocommerce .cart-collaterals .cart_totals ul#shipping_method li { margin-bottom: 8px; }
body.ms .woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-destination { text-align: left; font-size: 14px; color: var(--ms-muted); }
body.ms .woocommerce .cart-collaterals .cart_totals .shipping-calculator-button { font-size: 14px; }

/* Cart table proportions: the media columns are fixtures, the product name flexes. */
body.ms .woocommerce table.cart { table-layout: fixed; }
body.ms .woocommerce table.cart th.product-remove,
body.ms .woocommerce table.cart td.product-remove { width: 46px; padding-left: 10px; padding-right: 0; }
body.ms .woocommerce table.cart th.product-thumbnail,
body.ms .woocommerce table.cart td.product-thumbnail { width: 104px; }
body.ms .woocommerce table.cart th.product-price,
body.ms .woocommerce table.cart td.product-price { width: 118px; }
body.ms .woocommerce table.cart th.product-quantity,
body.ms .woocommerce table.cart td.product-quantity { width: 132px; }
body.ms .woocommerce table.cart th.product-subtotal,
body.ms .woocommerce table.cart td.product-subtotal { width: 124px; text-align: right; font-weight: 600; color: var(--ms-ink); }
body.ms .woocommerce table.cart td.product-name a { color: var(--ms-ink); font-size: 16.5px; }
body.ms .woocommerce table.cart td.product-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.ms .woocommerce table.cart td.actions { padding: 16px; background: var(--ms-soft); }

/* ---------- Checkout ----------------------------------------------------- */
body.ms.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 466px;
	grid-template-rows: auto 1fr;
	gap: 0 48px;
	align-items: start;
}
body.ms.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / -1; }
body.ms.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 14px; font-size: 22px; }
body.ms.woocommerce-checkout form.checkout > #order_review {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	position: sticky;
	top: 104px;
	padding: 20px;
	border: 1px solid var(--ms-line);
	background: #fff;
}

/* Inside the narrower left column, billing and shipping stack. */
body.ms.woocommerce-checkout #customer_details { display: block; }
body.ms.woocommerce-checkout #customer_details .col-1,
body.ms.woocommerce-checkout #customer_details .col-2 { width: auto; float: none; margin: 0 0 30px; }
body.ms.woocommerce-checkout #customer_details h3 { font-size: 21px; margin-bottom: 16px; }
body.ms.woocommerce-checkout #customer_details .col-2 h3#ship-to-different-address {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 21px;
}
body.ms.woocommerce-checkout #customer_details .col-2 h3#ship-to-different-address label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }

body.ms.woocommerce-checkout #order_review table.shop_table { border: 0; margin: 0 0 18px; }
body.ms.woocommerce-checkout #order_review table.shop_table th,
body.ms.woocommerce-checkout #order_review table.shop_table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--ms-line-soft);
	background: transparent;
	font-size: 15px;
}
body.ms.woocommerce-checkout #order_review table.shop_table thead th { background: transparent; border-bottom: 1px solid var(--ms-line); }
body.ms.woocommerce-checkout #order_review table.shop_table td { text-align: right; }
body.ms.woocommerce-checkout #order_review table.shop_table td.product-name { text-align: left; }
body.ms.woocommerce-checkout #order_review tr.order-total th,
body.ms.woocommerce-checkout #order_review tr.order-total td { border-bottom: 0; font-size: 19px; font-weight: 600; color: var(--ms-ink); }
body.ms.woocommerce-checkout #order_review ul#shipping_method { margin: 0; padding: 0; list-style: none; text-align: right; }
body.ms.woocommerce-checkout #order_review ul#shipping_method li { margin-bottom: 8px; }
body.ms.woocommerce-checkout #payment { margin: 0 -20px -20px; padding: 18px 20px; border: 0; border-top: 1px solid var(--ms-line); background: var(--ms-soft); }

/* The gateway prints its label, its card icons and an embedded card-fields
   iframe inside one list item. Flexing the label squeezed the text into a
   four-line column, so the label is a plain row and the icons push right. */
body.ms.woocommerce-checkout #payment ul.payment_methods { border-bottom: 0; padding-bottom: 6px; }
body.ms.woocommerce-checkout #payment ul.payment_methods li {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
body.ms.woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] { flex: 0 0 auto; margin: 0; float: none; }
body.ms.woocommerce-checkout #payment ul.payment_methods li > label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
}
body.ms.woocommerce-checkout #payment ul.payment_methods li > label img {
	max-height: 20px;
	width: auto;
	margin: 0;
	flex: 0 0 auto;
}
body.ms.woocommerce-checkout #payment ul.payment_methods li > label img:first-of-type { margin-left: auto; }
body.ms.woocommerce-checkout #payment ul.payment_methods li > .payment_box { flex: 0 0 100%; }

/* Anything the gateway embeds has to stay inside the panel. */
body.ms.woocommerce-checkout #payment div.payment_box {
	width: 100%;
	margin: 10px 0 0;
	padding: 14px;
	overflow: hidden;
}
body.ms.woocommerce-checkout #payment div.payment_box iframe,
body.ms.woocommerce-checkout #payment div.payment_box img,
body.ms.woocommerce-checkout #payment div.payment_box > div,
body.ms.woocommerce-checkout #payment div.payment_box form { max-width: 100% !important; }
body.ms.woocommerce-checkout #payment div.payment_box iframe { width: 100% !important; display: block; }
body.ms.woocommerce-checkout #order_review table.shop_table td.product-name { line-height: 1.35; padding-right: 10px; }
body.ms.woocommerce-checkout #order_review table.shop_table th { width: 52%; }

/* The "before you order" facts read better as a quiet footnote in the panel. */
body.ms.woocommerce-checkout #payment .ms-shipfacts--checkout {
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--ms-muted);
}
body.ms.woocommerce-checkout #payment .ms-shipfacts--checkout li { margin-bottom: 3px; }

@media (max-width: 1080px) {
	body.ms.woocommerce-cart .ms-prose--wide > .woocommerce,
	body.ms.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	body.ms.woocommerce-cart .ms-prose--wide > .woocommerce > form.woocommerce-cart-form,
	body.ms.woocommerce-cart .ms-prose--wide > .woocommerce > .cart-collaterals { grid-column: 1; position: static; }
	body.ms.woocommerce-checkout form.checkout > #customer_details,
	body.ms.woocommerce-checkout form.checkout > #order_review_heading,
	body.ms.woocommerce-checkout form.checkout > #order_review { grid-column: 1; grid-row: auto; position: static; }
	body.ms.woocommerce-checkout form.checkout > #order_review_heading { margin-top: 12px; }
	body.ms .woocommerce table.cart { table-layout: auto; }
}

/* Shipping choices: clicking the label must select the radio, never the text.
   A double-click was leaving the row highlighted, which reads as a rendering
   fault rather than a text selection. */
body.ms .woocommerce ul#shipping_method,
body.ms .woocommerce .woocommerce-shipping-destination,
body.ms .woocommerce .shipping-calculator-button {
	-webkit-user-select: none;
	user-select: none;
}
body.ms .woocommerce ul#shipping_method li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 10px;
	line-height: 1.45;
}
body.ms .woocommerce ul#shipping_method li:last-child { margin-bottom: 0; }
body.ms .woocommerce ul#shipping_method li input[type="radio"] { flex: 0 0 auto; margin: 4px 0 0; }
body.ms .woocommerce ul#shipping_method li label {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	cursor: pointer;
	overflow-wrap: anywhere;
}

/* The shipment cell holds a list, so it reads left-aligned even though the
   money columns beside it are right-aligned. */
body.ms .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td,
body.ms .woocommerce #order_review table.shop_table tr.woocommerce-shipping-totals td { text-align: left; }
body.ms .woocommerce .cart_totals table.shop_table th { width: 34%; }
body.ms .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals th { vertical-align: top; padding-top: 14px; }

/* =========================================================================
   Location card with an embedded map
   ========================================================================= */
.ms-location {
	margin: 26px 0 34px;
	border: 1px solid var(--ms-line);
	background: #fff;
	overflow: hidden;
}

.ms-location__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	padding: 22px 24px;
	background: var(--ms-soft);
	border-bottom: 1px solid var(--ms-line);
}

.ms-location__label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ms-faint);
}

.ms-location__address {
	margin: 0;
	max-width: 52ch;
	font-size: 17px;
	line-height: 1.45;
	color: var(--ms-ink);
}
.ms-location__address a { color: var(--ms-ink); }
.ms-location__address a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ms-location__note { margin: 8px 0 0; font-size: 14px; color: var(--ms-muted); }
.ms-location__cta { flex: 0 0 auto; }

.ms-location__map { display: block; width: 100%; border: 0; }

@media (max-width: 700px) {
	.ms-location__head { padding: 18px; }
	.ms-location__cta { width: 100%; justify-content: center; }
	.ms-location__map { height: 300px; }
}

/* Buttons inside long-form content: `.ms-prose a` is more specific than the
   button colour rules, which left dark buttons with dark text on dark. */
.ms-prose a.ms-btn--dark,
.ms-prose a.ms-btn--dark:hover { color: #fff; }
.ms-prose a.ms-btn--light { color: var(--ms-ink); }
.ms-prose a.ms-btn--light:hover { color: #fff; }
.ms-prose a.ms-btn { text-decoration: none; }

body.ms .woocommerce tr.ms-taxrow th { font-weight: 500; color: var(--ms-muted); }
body.ms .woocommerce tr.ms-taxrow td { color: var(--ms-muted); }