/*
Theme Name: Music Store Theme
Description: Server-rendered classic theme for the VST / preset / Kontakt / sample-pack store. Every indexable page is complete in the initial HTML. Brand foundation: Foundations v3 (reference-store colors and Inter).
Version: 0.5.7
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: music-store-theme
*/

/* ------------------------------------------------------------------ Inter, self-hosted (OFL). One variable file per alphabet covers weights 400-700. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ------------------------------------------------------------------ tokens (Foundations v3: colors matched to the reference store) */
:root {
--white: #ffffff;          /* page, cards, nav bar, inputs, icon buttons */
	--paper: #f4f4f5;          /* header top row, footer, active nav pill, hovers */
	--muted-card: rgba(244, 244, 245, .5); /* category / hub cards */
	--line: #e4e4e7;           /* every border */
	--edge: #e4e4e7;           /* form field borders */
	--slate: #71717b;          /* secondary text, footer text and links, placeholders */
	--gray: #6a7282;           /* "From" price labels */
	--char: #364153;           /* product titles in lists */
	--title: #101828;          /* card titles */
	--ink: #09090b;            /* headings, body text, nav */

	--orange: #f54a00;         /* primary: top bar, main buttons, search border, header icons, active nav */
	--orange-hi: #f65c1a;      /* primary hover (90%) */
	--orange-lo: #ca3500;      /* primary pressed */
	--orange-text: #f54a00;    /* orange used as text */
	--on-orange: #fff7ed;      /* text on main buttons */
	--ring: #ff8904;           /* focus ring */
	--sun: #fdc700;            /* rating stars */
	--star-empty: #d1d5dc;

	--gray-50: #f9fafb;        /* item rows inside order cards */
	--gray-600: #4a5565;       /* quantity lines */
	--orange-tint: rgba(235, 69, 0, .1); /* active account menu item */
	--badge-success: #00c950;  /* Completed badges */
	--badge-warn: #e17100;     /* pending badges, "not set" hints */

	--tp-5: #00b67a;            /* rating stars by score: 5 ... 1, white star on a coloured square */
	--tp-4: #73cf11;
	--tp-3: #ffce00;
	--tp-2: #ff8622;
	--tp-1: #ff3722;
	--tp-empty: #dcdce6;
	--offer-bg: rgba(245, 74, 0, .05);  /* offer boxes: welcome code, spend-threshold bar */
	--offer-edge: rgba(245, 74, 0, .25);
	--spend-track: #e5e7eb;    /* progress track, unselected system cards */
	--checkout-bg: #fbfbfb;    /* checkout page band (neutral-100 at 40%) */
	--price: #e7000b;          /* prices and sale badges */
	--price-old: #99a1af;      /* struck-through regular price */
	--badge-new: #e7000b;      /* NEW / HOT badges: sale red, white text 4.8:1 (owner 2026-10-30; #fb2c36 was 3.8:1) */
	--announce-btn: #5c1a26;   /* text on the white top-bar button */
	--announce-arrow: #fef3c6;

	--blue: #1d4ed8;           /* info notices only */
	--blue-tint: #e6eefc;
	--blue-edge: #9db8f0;
	--green: #0b6b44;
	--green-tint: #e3f5ec;
	--red: #e7000b;
	--red-tint: #fdecea;

	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* code samples only */

	--radius: 8.4px;
	--radius-lg: 10.4px;
	--max: 1152px;
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }

body {
margin: 0;
	background: var(--white);
	color: var(--ink);
	font: 400 17px/1.6 var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--orange); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
h4, .ms-sub { font-size: 20px; line-height: 1.35; font-weight: 600; }


code, kbd { font-family: var(--font-mono); font-size: 14px; }
@media (max-width: 640px) {
	h1 { font-size: 34px; }
	h2 { font-size: 26px; }
}

.ms-container { max-width: var(--max); margin: 0 auto; padding: 0 1rem; }

/* ------------------------------------------------------------------ buttons: main, secondary, text link */
.ms-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .wp-element-button {
display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
	font: 600 15px/1 var(--font-sans);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out;
}
.ms-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover {
background: var(--paper);
	color: var(--ink);
	border-color: var(--line);
}

/* Main button: every "alt" button, product-card add to cart, place order. Light text on orange, as on the reference store. */
.ms-btn--main, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce a.button.add_to_cart_button, .woocommerce #place_order, .woocommerce a.checkout-button, .woocommerce button.single_add_to_cart_button {
background: var(--orange);
	border-color: var(--orange);
	color: var(--on-orange);
}
.ms-btn--main:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.add_to_cart_button:hover, .woocommerce #place_order:hover, .woocommerce a.checkout-button:hover, .woocommerce button.single_add_to_cart_button:hover {
background: var(--orange-hi);
	border-color: var(--orange-hi);
	color: var(--on-orange);
}
.ms-btn--main:active, .woocommerce a.button.alt:active, .woocommerce button.button.alt:active, .woocommerce #place_order:active {
background: var(--orange-lo);
	border-color: var(--orange-lo);
}
.woocommerce button.single_add_to_cart_button, .woocommerce #place_order, .woocommerce a.checkout-button { min-height: 56px; padding: 0 32px; font-size: 18px; }


.button.disabled, .button:disabled, button[disabled] { background: var(--paper); border-color: var(--line); color: var(--slate); cursor: not-allowed; }

/* ------------------------------------------------------------------ header / footer */
.ms-header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.ms-announce { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .75rem; background: var(--orange); color: var(--white); font-size: 14px; font-weight: 600; text-align: center; padding: 6px 1rem; }
.ms-announce a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 14px; border-radius: 9999px; background: var(--white); color: var(--announce-btn); font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); transition: background-color .2s, color .2s; }
.ms-announce a:hover { background: #fffbeb; color: var(--orange-lo); }
.ms-header__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 2.5rem; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.ms-brand { display: inline-flex; text-decoration: none; }
.ms-brand img { display: block; max-width: 100%; height: auto; } /* width comes from the img attribute */
@media (max-width: 800px) {
	.ms-header .ms-brand img { width: 202px; }
}
.ms-search { position: relative; display: flex; align-items: center; max-width: 680px; width: 100%; margin: 0 auto; }
.ms-search input[type="search"] { width: 100%; min-height: 42px; padding: 0 124px 0 16px; border: 1px solid var(--orange); border-radius: var(--radius); background: var(--white); color: var(--ink); font: 400 15px/1 var(--font-sans); transition: border-color .15s ease-out, box-shadow .15s ease-out; -webkit-appearance: none; appearance: none; }
.ms-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.ms-search input[type="search"]::placeholder { color: var(--slate); opacity: 1; }
.ms-search input[type="search"]:focus { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(255, 137, 4, .5); outline: 0; }
.ms-search__go { position: absolute; top: 1px; right: 1px; bottom: 1px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 0; border-left: 1px solid var(--orange); border-radius: 0 6px 6px 0; background: var(--white); color: var(--orange); font: 600 15px/1 var(--font-sans); cursor: pointer; transition: background-color .15s ease-out; }
.ms-search__go:hover { background: var(--paper); }
.ms-utility { display: flex; align-items: center; gap: .625rem; }
.ms-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--orange); text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); transition: background-color .15s ease-out; }
.ms-iconbtn:hover { background: var(--paper); color: var(--orange); }
.ms-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-header__bar { position: relative; z-index: 30; border-bottom: 1px solid var(--line); background: var(--white); }
.ms-nav .ms-menu { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 4px 0; }
.ms-menu > li { position: relative; }
.ms-menu > li > a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: var(--radius); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color .15s ease-out, color .15s ease-out; }
.ms-menu > li > a:hover, .ms-menu > li > a:focus-visible, .ms-menu > li:focus-within > a, .ms-menu > li:hover > a { color: var(--orange); }
.ms-menu > li.is-current > a { background: var(--paper); color: var(--orange); }
.ms-menu > li > a .ms-icon { width: 16px; height: 16px; }
/* NEW / HOT label after a menu or footer link (music_store_nav_badge()). */
.ms-navbadge { display: inline-block; padding: 1px 5px; border-radius: 4px; background: var(--badge-new); color: var(--white); font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: .03em; vertical-align: middle; }
.ms-menu > li > a .ms-navbadge { --badge-y: -6px; margin-left: -2px; transform: translateY(var(--badge-y)); animation: ms-badge-bounce 1s infinite; }
/* The reference store's bounce (Tailwind animate-bounce): up a quarter of the badge height and back, from its resting spot. */
@keyframes ms-badge-bounce {
	0%, 100% { transform: translateY(calc(var(--badge-y) - 25%)); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
	50% { transform: translateY(var(--badge-y)); animation-timing-function: cubic-bezier(0, 0, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
	.ms-menu > li > a .ms-navbadge { animation: none; }
}
.ms-footer__col a .ms-navbadge { margin-left: 2px; transform: translateY(-1px); }
.ms-menu .has-sub > a::after { content: ""; margin-left: 2px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.ms-sub { display: none; position: absolute; z-index: 20; top: 100%; left: 0; min-width: 250px; margin: 0; padding: .5rem; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 28px rgba(13, 15, 18, .12); font-size: 16px; }
.ms-menu li:hover > .ms-sub, .ms-menu li:focus-within > .ms-sub { display: block; }
.ms-sub a { display: block; padding: 10px 14px; border-radius: 6px; color: var(--ink); font-weight: 500; text-decoration: none; }
.ms-sub a:hover, .ms-sub a:focus-visible { background: var(--paper); color: var(--orange); }
/* Menu button, drawer head and drawer account block only exist below 1024px. */
.ms-menu-toggle, .ms-drawer__head, .ms-drawer__account { display: none; }
@media (min-width: 1024px) {
/* Desktop: the popover nav is an ordinary inline row (undo the browser's popover styles). */
	.ms-drawer { display: block; position: static; inset: auto; width: auto; height: auto; margin: 0 auto; padding: 0 1rem; border: 0; background: transparent; color: inherit; overflow: visible; }
}
@media (max-width: 1023px) {
/* Header: menu (left), logo (centre), cart (right); search on its own row. Account lives in the drawer. */
	.ms-header__top { grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-areas: "menu logo cart" "search search search"; gap: 8px; padding-top: 8px; padding-bottom: 10px; }
	.ms-header__top > .ms-brand { grid-area: logo; justify-self: center; }
	.ms-search { grid-area: search; max-width: none; }
	.ms-search input[type="search"] { min-height: 44px; font-size: 16px; }
	/* 16px fields: iOS Safari zooms the page into any field set smaller. */
	input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="password"], select, textarea { font-size: 16px; }
	.ms-utility { display: contents; }
	.ms-menu-toggle { grid-area: menu; display: inline-flex; cursor: pointer; }
	.ms-cart-link { grid-area: cart; }
	.ms-account-link { display: none; }
	.ms-iconbtn { width: 40px; height: 40px; }
	.ms-header__top .ms-brand img { width: 196px; }
	.ms-header__bar { border: 0; }
/* Drawer, measured from the reference: white panel, 69px head, 48px items, account block below a rule. */
	.ms-drawer { position: fixed; inset: 0 auto 0 0; width: 100%; max-width: 448px; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--white); color: var(--ink); overflow-y: auto; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); transform: translateX(-100%); transition: transform .25s ease-out, display .25s allow-discrete, overlay .25s allow-discrete; }
	.ms-drawer:popover-open { transform: none; }
@starting-style {
	.ms-drawer:popover-open { transform: translateX(-100%); }
}
	.ms-drawer::backdrop { background: rgba(9, 9, 11, .4); }
	.ms-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 69px; padding: 16px; border-bottom: 1px solid var(--line); }
	.ms-drawer__head .ms-brand img { width: 160px; }
	.ms-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; }
	.ms-drawer__close:hover { background: var(--paper); }
	.ms-drawer__close .ms-icon { width: 16px; height: 16px; stroke-width: 2; }
	.ms-nav .ms-menu { flex-direction: column; flex-wrap: nowrap; gap: 8px; padding: 16px; }
	.ms-menu > li > a { display: flex; width: 100%; min-height: 48px; padding: 12px 16px; gap: 8px; font-size: 16px; font-weight: 600; }
	.ms-menu > li > a .ms-icon { width: 16px; height: 16px; stroke-width: 2; }
	.ms-menu > li > a .ms-navbadge { --badge-y: 0px; margin-left: 0; } /* Drawer: the label sits on the line. */
	.ms-menu > li > a:hover { background: var(--paper); }
	.ms-menu .has-sub > a::after { display: none; }
/* The drawer lists top-level items only, like the reference. */
	.ms-sub, .ms-menu li:hover > .ms-sub, .ms-menu li:focus-within > .ms-sub { display: none; }
	.ms-drawer__account { display: grid; gap: 8px; margin: 0 16px 24px; padding-top: 16px; border-top: 1px solid var(--line); }
	.ms-drawer__account .ms-btn { width: 100%; min-height: 48px; font-size: 16px; font-weight: 400; }
	.ms-drawer__user { display: grid; margin: 0 0 4px; padding: 0 16px; line-height: 1.4; }
	.ms-drawer__user strong { font-size: 14px; font-weight: 600; }
	.ms-drawer__user span { color: var(--slate); font-size: 12px; overflow-wrap: anywhere; }
	.ms-drawer__links { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
	.ms-drawer__links a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; border-radius: var(--radius); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }
	.ms-drawer__links a:hover { background: var(--paper); color: var(--ink); }
	.ms-drawer__links .ms-icon { width: 18px; height: 18px; }
	.ms-drawer__links a.ms-drawer__logout { color: var(--red); }
}
@media (max-width: 800px) {
	.ms-header { position: static; }
}
@media (max-width: 640px) {
	.ms-announce { flex-wrap: nowrap; gap: .5rem; padding: 6px 12px; font-size: 12px; white-space: nowrap; }
	.ms-announce__more { display: none; }
	.ms-announce a { min-height: 24px; padding: 0 10px; font-size: 12px; }
}
.ms-footer { margin-top: 4rem; border-top: 1px solid var(--line); background: linear-gradient(90deg, var(--orange), var(--orange-lo)) top / 100% 3px no-repeat, var(--paper); color: var(--slate); font-size: 14px; }
.ms-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; padding: 40px 0 32px; }
.ms-footer__brand p { max-width: 32ch; margin: 12px 0 0; line-height: 1.6; }
.ms-footer__col h2 { margin: 4px 0 14px; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.ms-footer__col h2::after { content: ""; display: block; width: 24px; height: 2px; margin-top: 8px; border-radius: 2px; background: var(--orange); }
.ms-footer__col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } /* 2px + the links' 4px padding = the old 10px rhythm */
.ms-footer__col a { display: inline-block; padding: 4px 0; color: var(--slate); text-decoration: none; transition: color .15s, translate .15s; }
.ms-footer__col a:hover { color: var(--orange); translate: 3px 0; }
.ms-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 2rem; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; }
.ms-footer__bottom p { margin: 0; }
.ms-footer__notice { max-width: 92ch; margin: 0 auto; padding: 14px 0 18px; color: var(--slate); font-size: 12.5px; line-height: 19px; text-align: center; }
.ms-footer__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ms-footer__pay span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.ms-footer__pay span .ms-icon { width: 16px; height: 16px; color: var(--badge-success); stroke-width: 2.5; }
.ms-footer__pay img { display: block; width: 320px; max-width: 100%; height: auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-sizing: content-box; }
@media (max-width: 1023px) {
	.ms-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 1.5rem; padding: 32px 0 24px; }
	.ms-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.ms-footer__grid { grid-template-columns: 1fr 1fr; }
	.ms-footer__pay img { width: calc(100% - 22px); max-width: 320px; }
}

/* ------------------------------------------------------------------ layout helpers */
.site-main { padding: 2rem 1rem; max-width: var(--max); margin: 0 auto; }
.page .site-main:not(.ms-home) { max-width: 840px; } /* Policy and other plain text pages (the homepage keeps the full width). */
.ms-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.ms-chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: 500 13px/1 var(--font-sans); text-decoration: none; }
.ms-chips a:hover { border-color: var(--orange); color: var(--orange); }



/* ------------------------------------------------------------------ products */







.woocommerce .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--price); font-weight: 600; }
.woocommerce .price del { color: var(--price-old); font-weight: 400; opacity: 1; }
.woocommerce .price ins { color: var(--price); text-decoration: none; }
.woocommerce .star-rating, .woocommerce .star-rating::before { color: var(--sun); }
.woocommerce span.onsale { background: var(--price); color: var(--white); border-radius: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; min-height: 0; min-width: 0; line-height: 1.6; padding: 2px 8px; }







table.product-specs { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); }
table.product-specs caption { text-align: left; font-weight: 700; padding: .5rem 0; }
table.product-specs th, table.product-specs td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; }
table.product-specs th[scope="row"] { width: 38%; color: var(--slate); font-weight: 600; }
table.product-specs td { font-family: var(--font-sans); font-size: 14px; font-weight: 500; }
table.product-specs tr:last-child th, table.product-specs tr:last-child td { border-bottom: 0; }



.ms-faqs details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); margin: .5rem 0; padding: 0 1.25rem; }
.ms-faqs summary { cursor: pointer; font-weight: 600; min-height: 52px; display: flex; align-items: center; justify-content: space-between; list-style: none; }
.ms-faqs summary::-webkit-details-marker { display: none; }
.ms-faqs summary::after { content: "+"; font: 600 20px var(--font-sans); color: var(--orange); }
.ms-faqs details[open] summary::after { content: "\2013"; }
.ms-faqs details > div { padding-bottom: 1rem; color: var(--slate); max-width: 62ch; }

.woocommerce-breadcrumb { color: var(--slate); font-size: 14px; margin-bottom: 1rem; }
.woocommerce-breadcrumb a { color: var(--slate); }
.woocommerce-pagination ul, .ms-pagination ul { display: flex; gap: .5rem; list-style: none; padding: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .ms-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); text-decoration: none; }
.woocommerce nav.woocommerce-pagination ul li span.current, .ms-pagination .current { background: var(--orange); color: var(--on-orange); border-color: var(--orange); }

/* ------------------------------------------------------------------ forms and notices (WooCommerce keeps its own layout) */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="password"], input[type="number"], select, textarea {
min-height: 44px;
	border: 1px solid var(--edge);
	border-radius: 6px;
	background: var(--white);
	color: var(--ink);
	font: 400 16px var(--font-sans);
}
.woocommerce-message, .woocommerce-info, .woocommerce-error { border: 1px solid; border-radius: var(--radius); color: var(--ink); }
.woocommerce-message { background: var(--green-tint); border-color: var(--green); }
.woocommerce-info { background: var(--blue-tint); border-color: var(--blue-edge); }
.woocommerce-error { background: var(--red-tint); border-color: var(--red); }
.woocommerce-message::before { color: var(--green); }
.woocommerce-info::before { color: var(--blue); }
.woocommerce-error::before { color: var(--red); }
.woocommerce-message a.button, .woocommerce-info a.button { order: 2; }

/* ------------------------------------------------------------------ navigation, breadcrumbs, hub cards */
.ms-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; list-style: none; margin: -6px 0; padding: 0; }
.ms-breadcrumbs a { display: inline-block; padding: 6px 0; } /* Bigger tap area; the list's -6px margin keeps the same spacing. */
.ms-breadcrumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--edge); }

.ms-pagination ul { margin: 1.5rem 0 0; }
.ms-pagination a, .ms-pagination .current { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .75rem; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); text-decoration: none; }
.ms-pagination .current { background: var(--orange); color: var(--on-orange); border-color: var(--orange); }

/* ------------------------------------------------------------------ utility pages: contact form, reviews */
.ms-form { max-width: 560px; }
.ms-form__row { display: grid; gap: 6px; margin: 0 0 1rem; }
.ms-form label { font-weight: 600; }
.ms-form input[type="text"], .ms-form input[type="email"], .ms-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--white); color: var(--ink); font: 400 17px/1.4 var(--font-sans); }
.ms-form input:focus, .ms-form textarea:focus { border-color: var(--ring); outline: 3px solid rgba(255, 137, 4, .5); outline-offset: 0; }

/* ------------------------------------------------------------------ text pages (policies) */
 /* text pages only; cart and checkout use the full width */
.entry-content h2 { margin-top: 2rem; font-size: 24px; }
.entry-content h3 { margin-top: 1.25rem; font-size: 20px; font-weight: 600; }
.entry-content table { width: 100%; margin: 1rem 0 1.5rem; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); font-size: 15px; }
.entry-content th, .entry-content td { padding: .65rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.entry-content thead th { background: var(--paper); color: var(--ink); font-weight: 700; }
.entry-content code { font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 640px) {
	/* Wide tables scroll sideways; the edge shadows show there is more to see. */
	.entry-content table { display: block; overflow-x: auto; background: linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)), linear-gradient(to left, var(--white) 30%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(9, 9, 11, .18), rgba(9, 9, 11, 0)), radial-gradient(farthest-side at 100% 50%, rgba(9, 9, 11, .18), rgba(9, 9, 11, 0)) 100% 0; background-color: var(--white); background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
	.entry-content th, .entry-content td { min-width: 8.5rem; }
}

body.page:not(.woocommerce-page) .entry-content { max-width: 78ch; color: var(--char); }
.entry-content a { color: var(--orange); text-decoration: none; }
.entry-content a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ account: sign in / create account (reference-store layout) */
.ms-auth { display: grid; place-items: center; align-content: center; min-height: calc(100vh - 160px); margin-bottom: -4rem; padding: 48px 16px; background: var(--paper); }
.ms-auth > .woocommerce { width: 100%; max-width: 384px; }
.ms-auth > .woocommerce:has(.register) { max-width: 448px; }
.ms-auth__card, .ms-auth .woocommerce-ResetPassword { background: var(--white); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }
.woocommerce .ms-auth__card form.login, .woocommerce .ms-auth__card form.register, .woocommerce .ms-auth form.lost_reset_password { margin: 0; padding: 0; border: 0; border-radius: 0; }
.ms-auth .woocommerce-ResetPassword { display: grid; gap: 16px; }
.ms-auth .woocommerce-ResetPassword p { margin: 0; float: none; width: auto; }
.ms-auth__title { margin: 0 0 24px; text-align: center; font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: 0; }
.ms-auth__form { display: grid; gap: 16px; }
.ms-auth__row { display: grid; gap: 8px; margin: 0; }
.ms-auth__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ms-auth label { color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1; }
.ms-auth input.input-text, .ms-auth select, .ms-card input.input-text, .ms-card select { width: 100%; height: 36px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); font: 400 14px/1.4 var(--font-sans); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.ms-auth input.input-text:focus, .ms-auth select:focus, .ms-card input.input-text:focus, .ms-card select:focus { border-color: var(--ring); outline: 0; box-shadow: 0 0 0 3px rgba(255, 137, 4, .5); }
.ms-auth__forgot { justify-self: start; color: var(--slate); font-size: 12px; font-weight: 500; text-decoration: none; }
.ms-auth__forgot:hover { color: var(--orange); text-decoration: underline; }
.woocommerce .ms-auth__submit, .woocommerce .ms-auth .woocommerce-ResetPassword .button { width: 100%; min-height: 36px; padding: 8px 16px; font-size: 14px; font-weight: 500; }
.ms-auth__switch { margin: 4px 0 0; text-align: center; font-size: 14px; }
.ms-auth__switch a { color: var(--ink); }
.ms-auth__switch a:hover { color: var(--orange); }
.ms-auth__note { margin: 0; color: var(--slate); font-size: 14px; }
.ms-auth .woocommerce-privacy-policy-text p { margin: 0; color: var(--slate); font-size: 12px; line-height: 1.5; }

/* ------------------------------------------------------------------ account portal: sidebar + content (reference-store layout) */
.ms-account-main { padding: 40px 0 64px; }
.ms-account { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
.ms-account__title { margin: 0; font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: 0; }
.ms-account__email { margin: 8px 0 0; color: var(--slate); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.ms-account__nav ul { display: grid; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.ms-account__nav a { display: flex; align-items: center; gap: 12px; height: 36px; padding: 8px 12px; border-radius: var(--radius); color: var(--slate); font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; white-space: nowrap; }
.ms-account__nav a .ms-icon { width: 16px; height: 16px; }
.ms-account__nav a:hover { background: var(--paper); color: var(--ink); }
.ms-account__nav li.is-active a { background: var(--orange-tint); color: var(--orange); }
.ms-account__logout-item { margin-top: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.ms-account__nav a.ms-account__logout { justify-content: center; gap: 8px; background: var(--red); color: var(--white); }
.ms-account__nav a.ms-account__logout:hover { background: #c10007; color: var(--white); }

.ms-account__head h2 { margin: 0; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: 0; }
.ms-account__head p { margin: 8px 0 0; color: var(--slate); font-size: 14px; line-height: 20px; }
.ms-account__head + .ms-orders, .ms-account__head + .ms-empty { margin-top: 24px; }
.ms-tabs { display: flex; gap: 8px; margin: 16px 0; padding: 8px; overflow-x: auto; background: var(--paper); border-radius: var(--radius-lg); scrollbar-width: none; }
.ms-tabs::-webkit-scrollbar { display: none; }
.ms-tabs__tab { display: inline-flex; align-items: center; flex: none; height: 32px; padding: 0 12px; border-radius: var(--radius); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ms-tabs__tab:hover { background: var(--white); color: var(--ink); }
.ms-tabs__tab.is-current { background: var(--orange); color: var(--on-orange); }

.ms-orders { display: grid; gap: 16px; }
.ms-order { padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ms-order__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ms-order__head h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 28px; letter-spacing: 0; }
.ms-order__meta { margin: 0; color: var(--slate); font-size: 14px; line-height: 20px; }
.ms-badge { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 2px 8px; border-radius: 4px; color: var(--on-orange); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.ms-badge.is-success { background: var(--badge-success); }
.ms-badge.is-active { background: var(--orange); }
.ms-badge.is-waiting { background: var(--badge-warn); }
.ms-badge.is-error { background: var(--red); }
.ms-order__sum { display: flex; justify-content: space-between; gap: 16px; margin: 12px 0 16px; }
.ms-order__sum p { display: grid; margin: 0; }
.ms-order__sum p > span { color: var(--slate); font-size: 12px; line-height: 16px; }
.ms-order__sum strong { font-size: 16px; font-weight: 500; line-height: 24px; }
.ms-order__total { text-align: right; }
.ms-order__total strong { font-size: 18px; font-weight: 700; line-height: 28px; }
.ms-order__items { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.ms-order__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ms-order__product, .ms-dl__files li { display: flex; align-items: flex-start; gap: 12px; padding: 10px; background: var(--gray-50); border-radius: var(--radius-lg); }
.ms-order__product img, .ms-dl__head img { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.ms-order__product h4, .ms-dl__files h4 { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0; }
.ms-order__product p, .ms-dl__files p { margin: 2px 0 0; color: var(--gray-600); font-size: 12px; line-height: 16px; }
.ms-account .ms-btn { min-height: 36px; padding: 8px 12px; gap: 8px; font-size: 14px; font-weight: 600; }
.ms-account .ms-btn .ms-icon { width: 16px; height: 16px; }
.ms-order__download { width: 100%; }
.ms-order__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }

.ms-dl { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ms-dl__head { display: flex; align-items: center; gap: 16px; padding: 20px 16px; cursor: pointer; list-style: none; }
.ms-dl__head::-webkit-details-marker { display: none; }
.ms-dl__info { flex: 1; min-width: 0; }
.ms-dl__info h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 28px; letter-spacing: 0; }
.ms-dl__status { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 14px; }
.ms-dl__files { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0 16px 16px; }
.ms-dl__files li { align-items: center; justify-content: space-between; }

.ms-account__forms { display: grid; gap: 24px; }
.ms-card { padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ms-card h2 { margin: 0; font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: 0; }
.ms-card__sub { margin: 4px 0 0; color: var(--slate); font-size: 16px; }
.ms-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 24px; }
.ms-fields--single { grid-template-columns: minmax(0, 1fr); max-width: 448px; }
.ms-field { display: grid; gap: 8px; align-content: start; margin: 0; }
.ms-field label { color: var(--slate); font-size: 14px; font-weight: 500; line-height: 20px; }
.ms-field small { color: var(--slate); font-size: 12px; line-height: 16px; }
.ms-field small.ms-field__warn { color: var(--badge-warn); font-weight: 500; }
.ms-card__foot { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.woocommerce .ms-card__foot .button { min-height: 36px; padding: 8px 16px; font-size: 14px; font-weight: 500; }

.ms-empty { display: grid; justify-items: center; gap: 8px; padding: 48px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--slate); text-align: center; }
.ms-empty > .ms-icon { width: 32px; height: 32px; }
.ms-empty p { margin: 0 0 8px; }

@media (max-width: 1023px) {
	.ms-account-main { padding: 24px 0 48px; }
	.ms-account { grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* The account menu becomes one swipeable row; Log Out stays in it as a red item. */
	.ms-account__nav ul { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
	.ms-account__nav ul::-webkit-scrollbar { display: none; }
	.ms-account__nav li { flex: none; }
	.ms-account__nav li:not(.is-active) a { background: var(--paper); }
	.ms-account__nav li.ms-account__logout-item a.ms-account__logout { background: var(--red); }
	.ms-account__logout-item { padding: 0; border: 0; }
}
@media (max-width: 640px) {
	.ms-order__item { grid-template-columns: minmax(0, 1fr); }
	.ms-fields { grid-template-columns: minmax(0, 1fr); }
	.ms-card { padding: 16px; }
	.ms-dl__head { flex-wrap: wrap; }
	.ms-dl__toggle { width: 100%; }
	.ms-auth { padding: 32px 16px; align-content: start; }
}
@media (max-width: 640px) {
/* WooCommerce notices with a button: stack the button under the text on phones. */
	.woocommerce-message .button, .woocommerce-info .button { display: flex; float: none; width: 100%; margin: 8px 0 0; }
}

/* ------------------------------------------------------------------ checkout (reference-store layout, measured) */
.ms-checkout-page { margin-bottom: -4rem; padding: 48px 0 80px; background: var(--checkout-bg); }
.ms-checkout-page__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ms-checkout-page__head h1 { margin: 0; font-size: 30px; font-weight: 600; line-height: 36px; letter-spacing: -0.75px; }
.ms-checkout-page__head p { margin: 4px 0 0; color: var(--slate); font-size: 14px; line-height: 20px; }
.ms-checkout-page .ms-btn.ms-checkout-page__back { flex: none; min-height: 32px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: 14px; font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.ms-checkout-page .ms-btn.ms-checkout-page__back:hover { background: var(--paper); }

/* Steps: 36px circles joined by 2px lines; the current step has an orange ring and label. */
.ms-steps { display: flex; align-items: center; max-width: 736px; margin: 32px auto 40px; padding: 0; list-style: none; }
.ms-steps__step { display: flex; align-items: center; gap: 8px; color: var(--slate); font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.ms-steps__step + .ms-steps__step { flex: 1; }
.ms-steps__step + .ms-steps__step::before { content: ""; flex: 1; min-width: 16px; height: 2px; margin: 0 12px 0 4px; border-radius: 9999px; background: var(--paper); }
.ms-steps__num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 9999px; background: var(--paper); color: var(--slate); font-size: 14px; font-weight: 600; }
.ms-steps__step.is-current { color: var(--orange); font-weight: 700; }
.ms-steps__step.is-current .ms-steps__num { background: var(--white); border: 1.6px solid var(--orange); color: var(--orange); }
.ms-steps__step.is-done { color: var(--ink); }
.ms-steps__step.is-done .ms-steps__num { background: var(--orange); color: var(--on-orange); }

/* Layout: left column (details + cart), right card (coupon + payment). */
.woocommerce form.ms-checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.woocommerce form.ms-checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.ms-checkout__left { display: grid; gap: 32px; }
.ms-checkout__card { padding: 32px; background: var(--white); border: 1px solid var(--line); border-radius: 14.4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); }
.ms-checkout__card--accent { background: linear-gradient(to bottom right, rgba(245, 74, 0, .06), var(--white), rgba(139, 92, 246, .07)); }
.ms-checkout__head { display: grid; gap: 4px; margin-bottom: 24px; }
.ms-checkout__head h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 28px; letter-spacing: -0.01em; }
.ms-checkout__head p { margin: 0; color: var(--slate); font-size: 14px; line-height: 20px; }
.ms-checkout__head a { color: var(--orange); font-weight: 500; text-decoration: none; }
.ms-checkout__head a:hover { text-decoration: underline; }
.woocommerce-checkout .woocommerce-notices-wrapper:not(:empty), .woocommerce-checkout .ms-checkout-page .woocommerce-message, .woocommerce-checkout .ms-checkout-page .woocommerce-error { margin-bottom: 24px; }

/* Fields: 36px inputs, 14px labels, 16px rhythm; first/last name and state/postcode side by side. */
.woocommerce .ms-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce .ms-checkout .create-account { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.woocommerce .ms-checkout .woocommerce-account-fields { margin-top: 16px; }
.woocommerce .ms-checkout .form-row { grid-column: 1 / -1; display: grid; gap: 8px; width: auto; float: none; margin: 0; padding: 0; }
.woocommerce .ms-checkout .form-row-first { grid-column: 1; }
.woocommerce .ms-checkout .form-row-last { grid-column: 2; }
.woocommerce .ms-checkout .create-account .clear { display: none; }
.woocommerce .ms-checkout .form-row::before, .woocommerce .ms-checkout .form-row::after, .woocommerce .ms-checkout .woocommerce-billing-fields__field-wrapper::before, .woocommerce .ms-checkout .woocommerce-billing-fields__field-wrapper::after { display: none; } /* WooCommerce clearfix pseudo-elements would become grid items */
.woocommerce .ms-checkout .form-row label { margin: 0; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1; }
.woocommerce .ms-checkout .form-row .required { color: var(--red); text-decoration: none; }
.woocommerce .ms-checkout .form-row .optional { color: var(--slate); }
.woocommerce .ms-checkout .form-row .input-text, .woocommerce .ms-checkout .form-row select, .woocommerce .ms-checkout .ms-coupon__body .input-text { width: 100%; height: 36px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); font: 400 14px/1.4 var(--font-sans); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.woocommerce .ms-checkout .form-row .input-text:focus, .woocommerce .ms-checkout .form-row select:focus, .woocommerce .ms-checkout .ms-coupon__body .input-text:focus { border-color: var(--ring); outline: 0; box-shadow: 0 0 0 3px rgba(255, 137, 4, .5); }
.woocommerce .ms-checkout .form-row.woocommerce-invalid .input-text, .woocommerce .ms-checkout .form-row.woocommerce-invalid .select2-selection { border-color: var(--red); }
.woocommerce .ms-checkout .password-input { display: block; width: 100%; }
.ms-checkout .select2-container .select2-selection--single { height: 36px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.ms-checkout .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 12px; color: var(--ink); font-size: 14px; line-height: 34px; }
.ms-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 34px; }

/* "Your cart" + order summary (left column). */
.ms-cart-summary__title { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(228, 228, 232, .6); font-size: 18px; font-weight: 600; line-height: 28px; letter-spacing: -0.01em; }
.ms-cart-summary__items { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.ms-cart-summary__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.ms-cart-summary__item img { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); }

.ms-cart-summary__name { flex: 1; min-width: 0; align-self: center; }
.ms-cart-summary__name h3 { margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0; }
.ms-cart-summary__name p { margin: 2px 0 0; color: var(--slate); font-size: 12px; line-height: 16px; }
.ms-cart-summary__price { flex: none; color: var(--ink); font-size: 14px; font-weight: 600; }
.ms-cart-summary__totals { display: grid; gap: 8px; padding: 16px; background: rgba(255, 255, 255, .35); border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); font-size: 14px; }
.ms-cart-summary__totals h3 { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0; }
.ms-cart-summary__totals p { display: flex; justify-content: space-between; gap: 16px; margin: 0; color: var(--slate); }
.ms-cart-summary__totals p.is-discount { color: var(--badge-success); }
.ms-cart-summary__totals p.is-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: 18px; font-weight: 600; line-height: 28px; }

/* Coupon box (right card). */
.ms-coupon { margin: 0 0 24px; background: rgba(243, 243, 243, .25); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.ms-coupon__head { display: flex; align-items: center; gap: 12px; padding: 16px; cursor: pointer; list-style: none; font-size: 16px; }
.ms-coupon__head::-webkit-details-marker { display: none; }
.ms-coupon__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 9999px; background: var(--orange); color: var(--on-orange); font-size: 14px; font-weight: 700; }
.ms-coupon__chevron { margin-left: auto; width: 16px; height: 16px; color: var(--slate); transition: transform .2s; }
.ms-coupon:not([open]) .ms-coupon__chevron { transform: rotate(180deg); }
.ms-coupon__body { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; border-top: 1px solid var(--line); background: rgba(245, 245, 245, .3); }
.woocommerce .ms-coupon__body .input-text { flex: 1; min-width: 0; width: auto; }
.woocommerce .ms-coupon__body #ms-coupon-apply { flex: none; min-height: 36px; height: 36px; padding: 8px 16px; font-size: 14px; font-weight: 500; }
.woocommerce .ms-coupon__body #ms-coupon-apply:disabled { background: var(--orange); border-color: var(--orange); color: var(--on-orange); opacity: .5; }
.ms-coupon__error { flex-basis: 100%; margin: 0; color: var(--red); font-size: 13px; }

/* "Choose how to pay" box: payment methods, terms and the Pay button. Totals table stays in the DOM for WooCommerce's
   AJAX refresh but the summary on the left is the visible one. */
.woocommerce .ms-checkout #order_review { padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); }
.woocommerce .ms-checkout .woocommerce-checkout-review-order-table { display: none; }
.ms-pay__head { margin: 0 0 12px; font-size: 14px; font-weight: 600; line-height: 20px; }
.woocommerce .ms-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce .ms-checkout #payment ul.payment_methods { margin: 0; padding: 0; border: 0; }
.woocommerce .ms-checkout #payment ul.payment_methods li.wc_payment_method { margin: 0 0 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); font-size: 14px; line-height: 20px; }
.woocommerce .ms-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) { border-color: var(--orange); background: rgba(255, 77, 0, .04); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); }
.woocommerce .ms-checkout #payment ul.payment_methods li > label { font-weight: 600; }
.woocommerce .ms-checkout #payment ul.payment_methods li input { accent-color: var(--orange); margin-right: 8px; }
.woocommerce .ms-checkout #payment div.payment_box { margin: 8px 0 0; padding: 0; background: transparent; color: var(--slate); font-size: 12px; line-height: 16px; }
.woocommerce .ms-checkout #payment div.payment_box p { margin: 0; }
.woocommerce .ms-checkout #payment div.payment_box::before { display: none; }
.woocommerce .ms-checkout #payment div.form-row.place-order { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.woocommerce .ms-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin: 0 0 12px; color: var(--ink); font-size: 14px; }
.woocommerce .ms-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row { display: block; }
.woocommerce .ms-checkout #payment .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; line-height: 1.4; }
.woocommerce .ms-checkout #payment .woocommerce-form__label-for-checkbox input { width: 16px; height: 16px; margin: 0; accent-color: var(--orange); }
.woocommerce .ms-checkout #payment .woocommerce-terms-and-conditions-checkbox-text a { color: var(--orange); text-decoration: none; }
.woocommerce .ms-checkout #payment .woocommerce-terms-and-conditions-checkbox-text a:hover { text-decoration: underline; }
.woocommerce .ms-checkout #payment #place_order { float: none; width: 100%; min-height: 40px; height: 40px; padding: 0 24px; font-size: 14px; font-weight: 500; }

@media (max-width: 1023px) {
	.woocommerce form.ms-checkout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.ms-checkout__left { gap: 24px; }
}
@media (max-width: 640px) {
	.ms-checkout-page { padding: 24px 0 48px; }
	.ms-checkout-page__head h1 { font-size: 26px; line-height: 32px; }
	.ms-steps { margin: 24px auto 28px; }
	.ms-steps__num { width: 32px; height: 32px; }
	.ms-steps__step { gap: 6px; font-size: 13px; }
	.ms-steps__step + .ms-steps__step::before { margin: 0 8px 0 2px; min-width: 12px; }
	.ms-checkout__card { padding: 24px 16px; }
	.woocommerce .ms-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
	.woocommerce .ms-checkout .form-row-first, .woocommerce .ms-checkout .form-row-last { grid-column: 1 / -1; }
}
@media (max-width: 340px) {
	.ms-steps__step:not(.is-current) .ms-steps__label { display: none; }
}

/* Digital products: no quantity column on cart, order-pay or order tables (every product is bought once). */
.woocommerce table.shop_table .product-quantity, .woocommerce-cart-form .product-quantity { display: none; }
.woocommerce-cart-form button[name="update_cart"] { display: none; } /* only used to change quantities */

/* ------------------------------------------------------------------ cart (reference-store layout, measured) */
.ms-cart-page { padding: 32px 0 64px; }
.ms-cart-page .woocommerce > .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 24px; }
.woocommerce form.ms-cart { display: grid; grid-template-columns: minmax(0, 1fr) 395px; gap: 32px; align-items: start; }
.ms-cart__head h1 { margin: 0; font-size: 30px; font-weight: 700; line-height: 36px; letter-spacing: 0; }
.ms-cart__head p { margin: 8px 0 0; color: var(--gray-600); font-size: 16px; line-height: 24px; }
.ms-cart__items { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.ms-cart-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px; background: var(--gray-50); border: 1px solid #e5e7eb; border-radius: var(--radius-lg); }
.ms-cart-item__image img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius); }
.ms-cart-item__info { flex: 1; min-width: 0; }
.ms-cart-item__info h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0; }
.ms-cart-item__info h3 a { color: var(--ink); text-decoration: none; }
.ms-cart-item__info h3 a:hover { color: var(--orange); }
.ms-cart-item__info p, .ms-cart-item__info dl { margin: 4px 0 0; color: var(--gray-600); font-size: 14px; line-height: 20px; }
.ms-cart-item__end { display: flex; align-items: center; gap: 12px; flex: none; }
.ms-cart-item__price { color: var(--ink); font-size: 16px; font-weight: 600; }
.woocommerce .ms-cart-item a.remove.ms-cart-item__remove { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 8px; border-radius: 4px; background: #e5e7eb; color: var(--gray-600) !important; font-size: 0; line-height: 1; }
.woocommerce .ms-cart-item a.remove.ms-cart-item__remove:hover { background: var(--red-tint); color: var(--red) !important; }
.ms-cart-item__remove .ms-icon { width: 18px; height: 18px; }
.ms-cart__clear { margin: 16px 0 0; }
.ms-cart__clear a { color: var(--orange); font-size: 14px; font-weight: 500; text-decoration: none; }
.ms-cart__clear a:hover { text-decoration: underline; }

/* Sidebar: coupon, totals, green checkout button, Instant Download note. */
.ms-cart__side { padding: 24px; background: var(--gray-50); border-radius: var(--radius-lg); }

.woocommerce .ms-cart__coupon .input-text { flex: 1; min-width: 0; width: auto; height: 40px; min-height: 40px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font: 400 14px/1.4 var(--font-sans); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.woocommerce .ms-cart__coupon .input-text:focus { border-color: var(--ring); outline: 0; box-shadow: 0 0 0 3px rgba(255, 137, 4, .5); }
.woocommerce .ms-cart__coupon button.button.alt { flex: none; min-height: 40px; height: 40px; padding: 0 24px; font-size: 14px; font-weight: 500; }
.woocommerce .ms-cart__coupon .coupon-error-notice { flex-basis: 100%; color: var(--red); font-size: 13px; }
.ms-cart__coupon { display: flex; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.woocommerce .ms-cart__update { display: none; } /* products have no quantities to update */
.ms-cart-totals__rows { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ms-cart-totals__rows p, .ms-cart-totals__total { display: flex; justify-content: space-between; gap: 16px; margin: 0; font-size: 14px; line-height: 20px; }
.ms-cart-totals__rows p span { color: var(--gray-600); }
.ms-cart-totals__rows p strong { color: var(--ink); font-weight: 500; }
.ms-cart-totals__rows .cart-discount strong { color: var(--badge-success); }
.ms-cart-totals__total { padding: 16px 0; font-size: 18px; font-weight: 700; line-height: 28px; }
.ms-cart-totals__total strong { font-weight: 700; }
.woocommerce .ms-cart-totals .wc-proceed-to-checkout { padding: 0; }
.woocommerce .ms-cart-totals a.checkout-button.ms-cart-totals__checkout { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; height: 40px; margin: 0; padding: 0 24px; border: 0; border-radius: var(--radius); background: var(--orange); color: var(--on-orange); font-size: 14px; font-weight: 500; }
.woocommerce .ms-cart-totals a.checkout-button.ms-cart-totals__checkout:hover { background: var(--orange-hi); color: var(--on-orange); }
.ms-cart-totals__note { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; padding: 16px; border-radius: var(--radius-lg); background: #f3f4f6; font-size: 14px; font-weight: 500; }
.ms-cart-totals__note-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 8px; border-radius: var(--radius); background: var(--white); color: var(--orange); }
.ms-cart-totals__note-icon .ms-icon { width: 16px; height: 16px; }

.ms-cart-empty .wc-empty-cart-message { margin-top: 24px; }
.ms-cart-empty .ms-empty > .ms-icon { width: 32px; height: 32px; }

@media (max-width: 1023px) {
	.woocommerce form.ms-cart { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
	.ms-cart-page { padding: 24px 0 48px; }
	.ms-cart__head h1 { font-size: 26px; line-height: 32px; }
	.ms-cart-item { flex-wrap: wrap; gap: 12px; padding: 12px; }
	.ms-cart-item__image img { width: 72px; height: 72px; }
	.ms-cart-item__info { flex-basis: calc(100% - 84px); }
	.ms-cart-item__end { flex-basis: 100%; justify-content: space-between; padding-top: 12px; border-top: 1px solid #e5e7eb; }
	.ms-cart__side { padding: 16px; }
}
.woocommerce .ms-cart__coupon .input-text:placeholder-shown + button.button.alt { opacity: .5; } /* Apply looks inactive until a code is typed */

/* Spend-threshold bar (cart), measured from the reference. */
.ms-spend { margin: 24px 0 0; padding: 16px; background: var(--offer-bg); border: 1px solid var(--offer-edge); border-radius: var(--radius-lg); }
.ms-spend__title { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 20px; }
.ms-spend .amount { color: inherit; }
.ms-spend__track { position: relative; height: 10px; margin: 12px 0 6px; overflow: hidden; border-radius: 9999px; background: var(--spend-track); }
.ms-spend__fill { position: absolute; inset: 0 auto 0 0; border-radius: 9999px; background-color: var(--orange); background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255, 255, 255, .12) 3px, rgba(255, 255, 255, .12) 6px); transition: width .3s ease-out; }
.ms-spend__amount { margin: 0; color: var(--orange-lo); font-size: 12px; line-height: 16px; }

/* Header cart count badge (20px orange circle, top-right of the cart button). */
.ms-cart-link { position: relative; }
.ms-cart-count { position: absolute; top: -6px; right: -6px; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 9999px; background: var(--orange); color: var(--on-orange); font-size: 12px; font-weight: 600; line-height: 16px; }
.ms-cart-count[hidden] { display: none; }

/* ------------------------------------------------------------------ product page */
.ms-pdp { padding: 16px 0 40px; }
.ms-pdp .ms-breadcrumbs { margin: 8px 0 24px; color: var(--slate); font-size: 14px; }
.ms-pdp .ms-breadcrumbs a { color: var(--slate); text-decoration: none; }
.ms-pdp .ms-breadcrumbs a:hover { color: var(--orange); }
.ms-pdp__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }

/* Gallery: scroll-snap slides, thumbnails jump by anchor (no JavaScript). */
.ms-pdp__media { position: sticky; top: 96px; display: grid; gap: 12px; }
.ms-gallery { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); scrollbar-width: none; }
.ms-gallery::-webkit-scrollbar { display: none; }
.ms-gallery__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.ms-gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.ms-gallery__slide--empty img { width: 40%; height: auto; opacity: .5; }
.ms-gallery__badge { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 4px 10px; border-radius: 4px; background: var(--price); color: var(--white); font-size: 13px; font-weight: 700; }
.ms-gallery__thumbs { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.ms-gallery__thumbs a { display: block; width: 72px; height: 72px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.ms-gallery__thumbs a:hover, .ms-gallery__thumbs a:focus-visible { border-color: var(--orange); }
.ms-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }





/* Buy box. */

.ms-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 9999px; background: var(--orange-tint); color: var(--orange); font-size: 12px; font-weight: 600; }
.ms-pdp__rating { display: inline-flex; align-items: center; gap: 6px; color: var(--slate); font-size: 14px; text-decoration: none; }


.ms-pdp__lede { margin-top: 12px; color: var(--slate); font-size: 16px; line-height: 24px; }
.ms-pdp__lede p { margin: 0 0 8px; }








.ms-buy { display: grid; gap: 20px; margin-top: 24px; }
.ms-system { margin: 0; padding: 0; border: 0; }
.ms-system legend { margin-bottom: 12px; padding: 0; color: var(--title); font-size: 16px; font-weight: 500; line-height: 24px; }
.ms-system__options { display: flex; flex-wrap: wrap; gap: 12px; }
.ms-system__option { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 47px; padding: 12px 16px; border: 1.6px solid var(--spend-track); border-radius: var(--radius-lg); background: var(--white); color: var(--char); font-size: 16px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ms-system__option input { width: 20px; height: 20px; margin: 0; accent-color: var(--orange); cursor: pointer; }
.ms-system__option:hover { border-color: rgba(245, 74, 0, .5); }
.ms-system__option:has(input:checked) { border-color: var(--orange); background: rgba(245, 74, 0, .05); color: var(--ink); font-weight: 600; }
.ms-system__option:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }
.ms-buy__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }

.ms-buy__price-value { color: var(--price); font-size: 30px; font-weight: 700; line-height: 36px; }
.ms-buy__price-was { color: var(--price-old); font-size: 18px; }
.ms-buy__save { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px; background: var(--red-tint); color: var(--price); font-size: 13px; font-weight: 700; }
.ms-buy__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ms-pdp .ms-buy__actions .ms-btn { gap: 8px; }
.ms-pdp .ms-buy__now { border: 1px solid rgba(242, 73, 0, .3); background: var(--orange-tint); color: var(--orange); }
.ms-pdp .ms-buy__now:hover { background: rgba(235, 69, 0, .16); color: var(--orange); border-color: rgba(242, 73, 0, .5); }
.ms-buy__unavailable { margin: 24px 0 0; padding: 16px; border-radius: var(--radius-lg); background: var(--paper); }

.ms-promises { display: grid; gap: 10px; margin: 20px 0 0; padding: 16px; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-50); font-size: 14px; line-height: 20px; color: var(--slate); }
.ms-promises li { display: flex; align-items: flex-start; gap: 10px; }
.ms-promises .ms-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--orange); }
.ms-promises strong { color: var(--ink); font-weight: 600; }
.ms-promises a { color: var(--orange); }
.ms-promises__deal .ms-icon { color: var(--orange); }
.ms-promises .amount { color: var(--ink); font-weight: 600; }
.ms-ask { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-50); color: var(--ink); font-size: 14px; line-height: 20px; }
.ms-ask .ms-icon { flex: none; width: 16px; height: 16px; color: var(--orange); }
.ms-ask a { color: var(--orange); font-weight: 600; }

/* Below the fold. */



.ms-pdp [id] { scroll-margin-top: 140px; }

.ms-overview h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 22px; font-weight: 700; line-height: 30px; }
.ms-overview h2 .ms-icon { color: var(--orange); }
table.product-specs.ms-overview__table { border: 0; background: transparent; }
table.product-specs.ms-overview__table th, table.product-specs.ms-overview__table td { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
table.product-specs.ms-overview__table th[scope="row"] { color: var(--slate); font-weight: 400; }
table.product-specs.ms-overview__table td { text-align: right; font-family: var(--font-sans); font-size: 16px; font-weight: 600; }
.ms-overview__empty { margin: 0; color: var(--slate); }







.ms-pdp__section { margin-top: 48px; }
.ms-pdp__section > h2, .ms-pdp__reviews h2 { font-size: 26px; line-height: 34px; }
.ms-pdp__description .entry-content { max-width: 78ch; color: var(--char); }
.ms-pdp__reviews .star-rating { color: var(--sun); }

/* Phones and tablets. */
@media (max-width: 1023px) {
	.ms-pdp__top { grid-template-columns: minmax(0, 1fr); }
	.ms-pdp__media { position: static; }
	.ms-pdp__media { width: 100%; max-width: 520px; margin-inline: auto; } /* Tablets: the title and buy box stay in the first screen. */

	.ms-pdp [id] { scroll-margin-top: 72px; }
	.ms-pdp { padding-bottom: 32px; }
}
@media (max-width: 640px) {
	.ms-buy__price-value { font-size: 26px; }
	.ms-pdp .ms-buy__actions .ms-btn { padding: 0 12px; }
	.ms-system__option { flex: 1; justify-content: center; }
	.ms-card.ms-overview { padding: 16px; }
	table.product-specs.ms-overview__table th, table.product-specs.ms-overview__table td { font-size: 14px; }
}

/* Product page buy box v2: title, reviews, welcome coupon, price, system, big CTA. */
.ms-pdp__buy h1 { margin: 0; font-size: 32px; font-weight: 700; line-height: 40px; letter-spacing: -0.02em; }
.ms-pdp__buy .ms-pdp__rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--slate); font-size: 15px; text-decoration: none; }
.ms-pdp__buy .ms-pdp__rating:hover { color: var(--orange); }


.ms-welcome { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 12px 16px; border: 1px solid var(--offer-edge); border-radius: var(--radius-lg); background: var(--offer-bg); }
.ms-welcome__icon { display: inline-flex; flex: none; color: var(--orange); }
.ms-welcome__icon .ms-icon { width: 26px; height: 26px; }
.ms-welcome__text { display: grid; flex: 1; gap: 2px; margin: 0; }
.ms-welcome__text strong { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 22px; }
.ms-welcome__text span { color: var(--slate); font-size: 14px; }
.ms-welcome__code { padding: 1px 8px; border: 1px dashed var(--orange); border-radius: 4px; background: var(--white); color: var(--orange); font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .04em; user-select: all; }
.ms-welcome__copy { flex: none; min-height: 40px; padding: 0 18px; border: 2px solid var(--orange); border-radius: var(--radius); background: var(--white); color: var(--orange); font: 500 15px/1 var(--font-sans); cursor: pointer; transition: background-color .15s, color .15s; }
.ms-welcome__copy:hover { background: var(--orange); color: var(--on-orange); }
.ms-welcome__copy.is-copied { border-color: var(--badge-success); background: var(--badge-success); color: var(--white); }
/* Offer and "in your wallet" versions of the box: the hidden one stays hidden whatever its display (wallet-popup.js). */
.ms-welcome[hidden], .ms-welcome [hidden] { display: none; }

.ms-pdp .ms-buy { gap: 24px; margin-top: 24px; }
.ms-buy__price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ms-pdp .ms-buy__price-value { color: var(--price); font-size: 40px; font-weight: 700; line-height: 44px; letter-spacing: -0.02em; }
.ms-pdp .ms-buy__price-was { color: var(--price-old); font-size: 20px; text-decoration-thickness: 2px; }

.ms-buy__price-note { margin: 8px 0 0; color: var(--slate); font-size: 14px; }
.ms-pdp .ms-buy__actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ms-pdp .ms-buy__actions .ms-btn { border-radius: 12px; font-weight: 700; }
.ms-pdp .ms-buy__actions .ms-buy__add { box-shadow: 0 10px 24px -8px rgba(245, 74, 0, .55); }
.ms-pdp .ms-pdp__buy form.ms-buy.cart { margin-bottom: 0; } /* WooCommerce adds 2em under product forms */
.ms-pdp .ms-promises { margin-top: 16px; }
.ms-pdp__description .ms-pdp__lede { margin: 0 0 16px; max-width: 78ch; }


@media (max-width: 640px) {
	.ms-pdp__buy h1 { font-size: 26px; line-height: 32px; }
	.ms-pdp .ms-buy__price-value { font-size: 34px; line-height: 40px; }
	.ms-welcome { flex-wrap: wrap; }
	.ms-welcome__copy { width: 100%; }
}

/* Product body: Description | Reviews tabs (CSS only; both panels stay in the HTML). */
.ms-tabbody { margin-top: 48px; }
.ms-tabbody__tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); }
.ms-tabbody__tab { padding: 12px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--slate); font-size: 16px; font-weight: 500; line-height: 24px; text-decoration: none; }
.ms-tabbody__tab:hover { color: var(--orange); }
.ms-tabbody__panel { padding-top: 24px; }
.ms-tabbody__panel#reviews { display: none; }
.ms-tabbody:has(#reviews:target, #reviews :target) #reviews { display: block; }
.ms-tabbody:has(#reviews:target, #reviews :target) #description { display: none; }
.ms-tabbody__tab--description, .ms-tabbody:has(#reviews:target, #reviews :target) .ms-tabbody__tab--reviews { border-bottom-color: var(--orange); color: var(--orange); }
.ms-tabbody:has(#reviews:target, #reviews :target) .ms-tabbody__tab--description { border-bottom-color: transparent; color: var(--slate); }
.ms-tabbody__subhead { margin: 32px 0 12px; font-size: 22px; font-weight: 700; line-height: 30px; }
.ms-tabbody__empty { margin: 0; color: var(--slate); }
.ms-tabbody .ms-overview__table { max-width: 720px; }
.ms-tabbody .ms-faqs { max-width: 78ch; }
.ms-tabbody [id] { scroll-margin-top: 96px; }
/* Tighter buy box rhythm; WooCommerce's clearfix pseudo-elements on form.cart would add empty grid rows. */
.ms-pdp .ms-pdp__buy form.ms-buy.cart::before, .ms-pdp .ms-pdp__buy form.ms-buy.cart::after { display: none; }
.ms-pdp .ms-pdp__buy .ms-pdp__rating { margin-top: 8px; }
.ms-pdp .ms-pdp__buy .ms-welcome { margin-top: 16px; }
.ms-pdp .ms-pdp__buy form.ms-buy { gap: 18px; margin-top: 20px; }
.ms-pdp .ms-buy__price-note { margin-top: 6px; }
.ms-pdp .ms-system legend { margin-bottom: 10px; }
.ms-pdp .ms-pdp__buy .ms-promises { margin-top: 18px; }
.ms-pdp .ms-pdp__buy .ms-ask { margin-top: 10px; }
.ms-pdp .ms-tabbody { margin-top: 32px; }
.ms-pdp .ms-tabbody__subhead { margin: 24px 0 8px; }
.ms-pdp .ms-pdp__related { margin-top: 32px; }
@media (max-width: 1023px) {
	.ms-pdp__top { gap: 20px; }
}

/* Description tab uses the full content width. */
.ms-pdp .ms-tabbody .ms-pdp__lede, .ms-pdp .ms-tabbody .entry-content, .ms-pdp .ms-tabbody .ms-overview__table, .ms-pdp .ms-tabbody .ms-faqs { max-width: none; }
.ms-pdp .ms-tabbody .ms-pdp__lede { margin: 0 0 12px; }
/* Checkout download consent (same look as the terms checkbox). */
.woocommerce .ms-checkout #payment .ms-consent { display: block; margin: 0 0 12px; font-size: 14px; }
.woocommerce .ms-checkout #payment .ms-consent .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 400; line-height: 1.4; }
.woocommerce .ms-checkout #payment .ms-consent input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--orange); }
.woocommerce .ms-checkout #payment .ms-consent abbr { color: var(--red); text-decoration: none; }

.ms-buy__save .amount, .ms-gallery__badge .amount { color: inherit; font-weight: inherit; }
.ms-pdp .ms-buy__save { height: auto; padding: 6px 14px; border: 1px solid rgba(231, 0, 11, .25); border-radius: 9999px; background: var(--red-tint); color: var(--price); font-size: 14px; font-weight: 700; letter-spacing: .02em; display: inline-block; line-height: 20px; white-space: nowrap; } /* inline-flex dropped the space before the amount */

/* Honest urgency: sale countdown (only with a real sale end date) and recent sales (only from 3 real sales). */
.ms-hot { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 4px 10px; border-radius: 9999px; background: var(--orange-tint); color: var(--orange-lo); font-size: 13px; }
.ms-hot .ms-icon { width: 16px; height: 16px; color: var(--orange); }
.ms-hot strong { color: var(--orange-lo); }
.ms-countdown { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 10px 14px; border: 1px solid rgba(245, 74, 0, .25); border-radius: var(--radius-lg); background: var(--orange-tint); color: var(--ink); font-size: 14px; }
.ms-countdown .ms-icon { flex: none; width: 18px; height: 18px; color: var(--orange); }
.ms-countdown__time { color: var(--orange-lo); font-variant-numeric: tabular-nums; }
.ms-countdown__date { margin-left: auto; color: var(--slate); font-size: 13px; }
.ms-countdown.is-ended { display: none; }

/* Sticky buy bar: phones/tablets always; desktop once the buy buttons scroll away (assets/product-page.js). */
.ms-pdp__bar { position: fixed; inset: auto 0 0 0; z-index: 40; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .97); box-shadow: 0 -10px 30px -12px rgba(9, 9, 11, .18); backdrop-filter: saturate(1.4) blur(8px); transform: translateY(110%); transition: transform .25s ease-out; }
.ms-pdp__bar.is-visible { transform: none; }
.ms-pdp__bar .ms-countdown--bar { justify-content: center; margin: 0; padding: 6px 16px; border: 0; border-bottom: 1px solid rgba(245, 74, 0, .2); border-radius: 0; font-size: 13px; }
.ms-pdp__bar .ms-countdown--bar .ms-countdown__date { display: none; }
.ms-pdp__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.ms-pdp__bar-product { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ms-pdp__bar-product img { flex: none; width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); }
.ms-pdp__bar-text { display: grid; gap: 2px; min-width: 0; }
.ms-pdp__bar-name { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ms-pdp__bar-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ms-pdp__bar-price strong { color: var(--price); font-size: 18px; font-weight: 700; }
.ms-pdp__bar-price del { color: var(--price-old); font-size: 13px; }
.ms-pdp__bar-price em { padding: 1px 6px; border-radius: 4px; background: var(--red-tint); color: var(--price); font-size: 12px; font-style: normal; font-weight: 700; }
.ms-pdp__bar-price .amount { color: inherit; }
.ms-pdp .ms-pdp__bar .ms-pdp__bar-cta { flex: none; min-height: 48px; padding: 0 24px; gap: 8px; border-radius: 12px; font-size: 16px; font-weight: 700; box-shadow: 0 8px 20px -8px rgba(245, 74, 0, .6); }
@media (max-width: 1023px) {
	.ms-pdp__bar { transform: none; }
}
@media (max-width: 480px) {
	.ms-pdp__bar-product img { display: none; }
	.ms-pdp .ms-pdp__bar .ms-pdp__bar-cta { padding: 0 16px; }
	.ms-pdp__bar-price del { display: none; }
}

/* ------------------------------------------------------------------ reviews: square stars (colour by score) */
.ms-tp { display: inline-flex; gap: 2px; vertical-align: middle; }
.ms-tp__star { --tone: var(--tp-empty); display: inline-flex; align-items: center; justify-content: center; width: var(--size, 20px); height: var(--size, 20px); background: linear-gradient(90deg, var(--tone) var(--fill), var(--tp-empty) var(--fill)); }
.ms-tp__star svg { width: 76%; height: 76%; fill: var(--white); }
.ms-tp--sm { --size: 18px; }
.ms-tp--md { --size: 20px; }
.ms-tp--lg { --size: 30px; gap: 3px; }
.ms-tp--r5 .ms-tp__star { --tone: var(--tp-5); }
.ms-tp--r4 .ms-tp__star { --tone: var(--tp-4); }
.ms-tp--r3 .ms-tp__star { --tone: var(--tp-3); }
.ms-tp--r2 .ms-tp__star { --tone: var(--tp-2); }
.ms-tp--r1 .ms-tp__star { --tone: var(--tp-1); }

/* Reviews block. */
.ms-reviews-block__title { margin: 0 0 16px; font-size: 22px; font-weight: 700; line-height: 30px; }
.ms-review-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; margin-bottom: 24px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-50); }
.ms-review-summary__score { display: grid; justify-items: start; gap: 8px; }
.ms-review-summary__avg { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.ms-review-summary__count { color: var(--slate); font-size: 14px; }
.ms-review-summary__bars { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-width: 460px; }
.ms-review-summary__bars li { display: grid; grid-template-columns: 72px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 13px; }
.ms-review-summary__label { color: var(--slate); }
.ms-review-summary__track { position: relative; height: 8px; overflow: hidden; border-radius: 9999px; background: var(--tp-empty); }
.ms-review-summary__track span { position: absolute; inset: 0 auto 0 0; border-radius: 9999px; background: var(--tone, var(--tp-5)); }
.ms-review-summary__bars li.ms-tp--r5 { --tone: var(--tp-5); }
.ms-review-summary__bars li.ms-tp--r4 { --tone: var(--tp-4); }
.ms-review-summary__bars li.ms-tp--r3 { --tone: var(--tp-3); }
.ms-review-summary__bars li.ms-tp--r2 { --tone: var(--tp-2); }
.ms-review-summary__bars li.ms-tp--r1 { --tone: var(--tp-1); }
.ms-review-summary__n { color: var(--slate); text-align: right; }
.ms-pdp .ms-review-summary__write { min-height: 44px; }

.woocommerce .ms-reviews-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.woocommerce .ms-reviews-list li.ms-review { margin: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.ms-review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ms-review__avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 9999px; background: var(--orange-tint); color: var(--orange); font-size: 16px; font-weight: 700; }
.ms-review__who { display: grid; gap: 2px; min-width: 0; }
.ms-review__who strong { font-size: 15px; }
.ms-review__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--tp-5); font-size: 12px; font-weight: 600; }
.ms-review__verified .ms-icon { width: 14px; height: 14px; }
.ms-review__date { margin-left: auto; color: var(--slate); font-size: 13px; white-space: nowrap; }
.ms-review__text { margin-top: 10px; color: var(--char); font-size: 15px; line-height: 24px; }
.ms-review__text p { margin: 0 0 8px; }
.ms-review__text p:last-child { margin-bottom: 0; }
.ms-review__pending { margin: 8px 0 0; color: var(--badge-warn); font-size: 13px; }
.ms-reviews-block__empty { margin: 0 0 16px; color: var(--slate); }

/* Review form. */
.ms-review-form { margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.ms-review-form__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 28px; }
.ms-review-form__title small { display: block; margin-top: 4px; font-size: 14px; }
.ms-review-form__note { margin: 4px 0 16px; color: var(--slate); font-size: 14px; }
.ms-review-form .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ms-review-form .comment-form > * { grid-column: 1 / -1; margin: 0; }
.ms-review-form .comment-form > .comment-form-author { grid-column: 1; }
.ms-review-form .comment-form > .comment-form-email { grid-column: 2; }
.ms-review-form__field { display: grid; gap: 8px; }
.ms-review-form label, .ms-rate legend { color: var(--ink); font-size: 14px; font-weight: 500; }
.ms-review-form .required { color: var(--red); }
.woocommerce .ms-review-form input[type="text"], .woocommerce .ms-review-form input[type="email"], .woocommerce .ms-review-form textarea { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font: 400 15px/1.5 var(--font-sans); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.woocommerce .ms-review-form textarea { min-height: 120px; resize: vertical; }
.ms-review-form input:focus, .ms-review-form textarea:focus { border-color: var(--ring); outline: 0; box-shadow: 0 0 0 3px rgba(255, 137, 4, .5); }
.ms-review-form .form-submit { margin: 0; }
.ms-review-form .form-submit .ms-btn { min-height: 48px; padding: 0 28px; font-size: 16px; font-weight: 700; }

.ms-rate { margin: 0; padding: 0; border: 0; }
.ms-rate legend { margin-bottom: 8px; padding: 0; }
.ms-rate__stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.ms-rate__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ms-rate__stars label { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--tp-empty); cursor: pointer; transition: background-color .12s; }
.ms-rate__stars label svg { width: 76%; height: 76%; fill: var(--white); }
.ms-rate__stars input:focus-visible + label { outline: 3px solid var(--ring); outline-offset: 2px; }
/* Hover previews, a checked radio keeps its colour; each score uses its own tone. */
.ms-rate__stars:has(#ms-rate-5:checked) label, .ms-rate__stars label[for="ms-rate-5"]:hover, .ms-rate__stars label[for="ms-rate-5"]:hover ~ label { background: var(--tp-5); }
.ms-rate__stars:has(#ms-rate-4:checked) #ms-rate-4 + label, .ms-rate__stars:has(#ms-rate-4:checked) #ms-rate-4 + label ~ label, .ms-rate__stars label[for="ms-rate-4"]:hover, .ms-rate__stars label[for="ms-rate-4"]:hover ~ label { background: var(--tp-4); }
.ms-rate__stars:has(#ms-rate-3:checked) #ms-rate-3 + label, .ms-rate__stars:has(#ms-rate-3:checked) #ms-rate-3 + label ~ label, .ms-rate__stars label[for="ms-rate-3"]:hover, .ms-rate__stars label[for="ms-rate-3"]:hover ~ label { background: var(--tp-3); }
.ms-rate__stars:has(#ms-rate-2:checked) #ms-rate-2 + label, .ms-rate__stars:has(#ms-rate-2:checked) #ms-rate-2 + label ~ label, .ms-rate__stars label[for="ms-rate-2"]:hover, .ms-rate__stars label[for="ms-rate-2"]:hover ~ label { background: var(--tp-2); }
.ms-rate__stars:has(#ms-rate-1:checked) #ms-rate-1 + label, .ms-rate__stars label[for="ms-rate-1"]:hover { background: var(--tp-1); }

@media (max-width: 800px) {
	.ms-review-summary { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
	.ms-pdp .ms-review-summary__write { justify-self: start; }
}
@media (max-width: 640px) {
	.ms-review-form { padding: 16px; }
	.ms-review-form .comment-form { grid-template-columns: minmax(0, 1fr); }
	.ms-review-form .comment-form > .comment-form-author, .ms-review-form .comment-form > .comment-form-email { grid-column: 1; }
	.ms-review__head { flex-wrap: wrap; }
}
/* WooCommerce styles .woocommerce #reviews #comments ol.commentlist li with IDs; match that weight for the review cards. */
.woocommerce #reviews #comments ol.commentlist.ms-reviews-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.woocommerce #reviews #comments ol.commentlist.ms-reviews-list li.ms-review { position: static; margin: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.woocommerce #reviews #comments ol.commentlist.ms-reviews-list li.ms-review::before, .woocommerce #reviews #comments ol.commentlist.ms-reviews-list li.ms-review::after { display: none; }
.woocommerce #reviews #review_form #respond .form-submit input.ms-btn--main { min-height: 48px; padding: 0 28px; border: 0; border-radius: var(--radius); background: var(--orange); color: var(--on-orange); font: 700 16px/1 var(--font-sans); cursor: pointer; }
.woocommerce #reviews #review_form #respond .form-submit input.ms-btn--main:hover { background: var(--orange-hi); }
.woocommerce #reviews #review_form #respond { margin: 0; padding: 0; border: 0; }

/* Product description master template (seo-data/templates/product-description.html). */
.ms-pdp__description .entry-content > :first-child { margin-top: 0; }
.ms-pdp__description .entry-content h2 { margin: 32px 0 12px; font-size: 22px; font-weight: 700; line-height: 30px; }
.ms-pdp__description .entry-content p, .ms-pdp__description .entry-content li { font-size: 16px; line-height: 26px; }
.ms-desc-note { padding: 10px 14px; border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--gray-50); color: var(--slate); font-size: 14px; }
.ms-pdp__description .entry-content .ms-desc-lede { margin: 0 0 8px; color: var(--ink); font-size: 18px; line-height: 30px; }
.ms-desc-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ms-desc-highlights > div { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.ms-desc-highlights > div > :last-child { margin-bottom: 0; }
.ms-pdp__description .entry-content .ms-desc-highlights h3 { margin: 0 0 6px; color: var(--ink); font-size: 17px; font-weight: 700; line-height: 24px; }
.ms-pdp__description .entry-content .ms-desc-highlights p { margin: 0; color: var(--slate); font-size: 15px; line-height: 24px; }
.ms-desc-included { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ms-desc-included li { position: relative; padding-left: 30px; }
.ms-desc-included li::before { content: ""; position: absolute; top: 4px; left: 0; width: 18px; height: 18px; border-radius: 9999px; background: var(--orange-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F54A00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ms-desc-included strong { color: var(--ink); }
.ms-desc-tips { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: ms-tip; }
.ms-desc-tips li { position: relative; padding: 14px 16px 14px 60px; border-radius: var(--radius-lg); background: var(--gray-50); counter-increment: ms-tip; }
.ms-desc-tips li::before { content: counter(ms-tip); position: absolute; top: 14px; left: 16px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px; background: var(--orange); color: var(--ink); font-size: 14px; font-weight: 700; }
.ms-desc-tips strong { display: block; color: var(--ink); }
.ms-desc-quote { margin: 32px 0 0; padding: 18px 20px; border-left: 4px solid var(--orange); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: var(--gray-50); }
.ms-pdp__description .entry-content .ms-desc-quote p { margin: 0 0 8px; color: var(--ink); font-size: 17px; font-style: italic; line-height: 28px; }
.ms-desc-quote cite { color: var(--slate); font-size: 14px; font-style: normal; }
@media (max-width: 640px) {
	.ms-pdp__description .entry-content .ms-desc-lede { font-size: 17px; line-height: 28px; }
	.ms-desc-highlights { grid-template-columns: minmax(0, 1fr); }
}

/* "You may also like" cards: 4-up grid on desktop, swipeable row on phones and tablets. */
.ms-cardrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ms-pcard { display: flex; flex-direction: column; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); transition: box-shadow .2s; }
.ms-pcard:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.ms-pcard__media { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--paper); aspect-ratio: 1; }
.ms-pcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ms-pcard__badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 4px; background: var(--price); color: var(--white); font-size: 12px; font-weight: 700; line-height: 18px; }
.ms-pcard__badge .amount { color: inherit; font-weight: inherit; }
.ms-pcard .ms-pcard__title { margin: 12px 0 0; overflow: hidden; font-size: 16px; font-weight: 600; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; } /* one line, so every card lines up; two on narrow cards (below) */
.ms-pcard__title a { color: var(--char); text-decoration: none; }
.ms-pcard__title a:hover { color: var(--orange); }
.ms-pcard__rating { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--slate); font-size: 13px; }
.ms-pcard__rating .ms-tp { --size: 16px; }
.ms-pcard__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 8px 0 12px; }
.ms-pcard__now { color: var(--price); font-size: 18px; font-weight: 700; }
.ms-pcard__now .amount { color: inherit; }
.ms-pcard__was { color: var(--price-old); font-size: 14px; }
.ms-pcard__was .amount { color: inherit; }
.ms-pcard__cta { gap: 8px; width: 100%; }
.ms-pcard__cta .ms-icon { width: 18px; height: 18px; }
.ms-pcard > a.ms-pcard__cta { margin-top: auto; }
.ms-pcard__buy { display: grid; gap: 8px; margin: auto 0 0; }
.ms-pcard__systems { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; margin: 0; padding: 0; border: 0; }

.ms-pcard__systems input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ms-pcard__systems label:hover { border-color: rgba(245, 74, 0, .5); }
.ms-pcard__systems label:has(input:checked) { border-color: var(--orange); background: rgba(245, 74, 0, .05); color: var(--ink); font-weight: 600; }
.ms-pcard__systems label:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }
@media (max-width: 1023px) {
	.ms-cardrow { display: flex; gap: 12px; margin: 0 -16px; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
	.ms-cardrow::-webkit-scrollbar { display: none; }
	.ms-pcard { flex: 0 0 38%; scroll-snap-align: start; }
}
@media (max-width: 640px) {
	.ms-pcard { flex-basis: 66%; }
}

/* Product page: less space before the footer; the footer keeps room at the bottom for the fixed buy bar. */
body.single-product .ms-footer { margin-top: 0; padding-bottom: var(--ms-bar-space, calc(128px + env(safe-area-inset-bottom))); }

/* Product page: shorter system boxes and buy buttons (buttons keep the 44px minimum tap size). */
.ms-pdp .ms-system__option { min-height: 40px; padding: 7px 14px; gap: 8px; font-size: 15px; }
.ms-pdp .ms-system__option input { width: 18px; height: 18px; }
.ms-pdp .ms-buy__actions .ms-btn { min-height: 48px; font-size: 17px; }

/* ------------------------------------------------------------------ shop and product archives */
.ms-shop { padding: 16px 0 40px; }
.ms-shop__head h1 { margin: 8px 0 16px; font-size: 30px; font-weight: 700; line-height: 36px; letter-spacing: -0.01em; }
.ms-shop__intro { max-width: 78ch; margin: -8px 0 16px; color: var(--slate); }

/* Browse-by-type tiles. */
.ms-shoptiles { display: grid; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }

.ms-shoptiles a:hover { border-color: rgba(245, 74, 0, .5); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .08); }
.ms-shoptiles__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 9999px; background: var(--white); color: var(--orange); }
.ms-shoptiles__icon .ms-icon { width: 24px; height: 24px; }

.ms-shoptiles__count { color: var(--slate); font-size: 13px; }

/* Layout: filters sidebar + products. */
.ms-shop__layout { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 24px; align-items: start; }
.ms-shop__side { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; }

/* Filters (a <details>; shop.js keeps it open on desktop). */
.ms-shop__filters { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.ms-shop__filters > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.ms-shop__filters > summary::-webkit-details-marker { display: none; }
.ms-shop__filters > summary::after { content: "+"; margin-left: auto; color: var(--orange); font-size: 20px; font-weight: 400; }
.ms-shop__filters[open] > summary::after { content: "\2212"; }
.ms-shop__filters > summary .ms-icon { width: 18px; height: 18px; color: var(--orange); }
.ms-shop__filters.is-static { border: 0; background: transparent; }
.ms-shop__filters.is-static > summary { display: none; }
.ms-shop__filters-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 9999px; background: var(--orange); color: var(--white); font-size: 12px; }
.ms-shop__filters-body { display: grid; gap: 4px; padding: 0 8px 12px; }
.ms-shop__filters.is-static .ms-shop__filters-body { padding: 0; }
.ms-filtergroup { padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--line); }
.ms-filtergroup__title { margin: 0 0 6px; padding: 0 12px; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 20px; }
.ms-filterlist { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ms-filterlist a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px; border-radius: var(--radius); color: var(--ink); font-size: 14px; line-height: 20px; text-decoration: none; }
.ms-filterlist a:hover { background: var(--paper); }
.ms-filterlist a.is-active { background: var(--orange-tint); color: var(--orange); font-weight: 500; }
.ms-filterlist__box { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--white); }
.ms-filterlist a.is-active .ms-filterlist__box { border-color: var(--orange); background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ms-filterlist__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-filterlist__count { margin-left: auto; color: var(--slate); font-size: 12px; }
.ms-filterlist a.is-active .ms-filterlist__count { color: var(--orange); }
.ms-shop__clear { width: 100%; margin-top: 12px; }

/* Search + sort bar. */
.ms-shopbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.ms-shopbar__search { position: relative; display: flex; flex: 1 1 320px; gap: 8px; }
.ms-shopbar__search > .ms-icon { position: absolute; top: 50%; left: 12px; width: 18px; height: 18px; color: var(--slate); transform: translateY(-50%); pointer-events: none; }
.ms-shopbar__search input { flex: 1; min-width: 0; height: 40px; padding: 0 12px 0 38px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font: 400 14px/1.4 var(--font-sans); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.ms-shopbar__search .ms-btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
.ms-shopbar__sort { display: flex; gap: 8px; }
.ms-shopbar__sort select { height: 40px; min-width: 190px; padding: 0 36px 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; color: var(--ink); font: 400 14px/1.4 var(--font-sans); appearance: none; cursor: pointer; }
.ms-shopbar__search input:focus, .ms-shopbar__sort select:focus { border-color: var(--ring); outline: 0; box-shadow: 0 0 0 3px rgba(255, 137, 4, .5); }
.ms-shopbar__apply { min-height: 40px; font-size: 14px; }

/* Product grid. */
.ms-pgrid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ms-shop__foot { display: grid; justify-items: center; gap: 10px; margin-top: 24px; }
.ms-shop .ms-pagination ul { flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
.ms-shop .ms-pagination a, .ms-shop .ms-pagination .current { min-width: 36px; height: 36px; padding: 0 12px; border-radius: var(--radius); font-size: 14px; }
.ms-shop .ms-pagination a:hover { background: var(--paper); }
.ms-shop__count { margin: 0; color: var(--slate); font-size: 13px; }
.ms-shop .ms-empty .ms-icon { width: 32px; height: 32px; color: var(--slate); }


@media (max-width: 1023px) {
	.ms-shop__layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.ms-shop__side { position: static; max-height: none; overflow: visible; }
	.ms-shoptiles { display: flex; gap: 10px; margin: 0 -16px 16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.ms-shoptiles::-webkit-scrollbar { display: none; }
	.ms-shoptiles li { scroll-snap-align: start; }
}
@media (max-width: 640px) {
	.ms-shop__head h1 { font-size: 26px; line-height: 32px; }
	.ms-shopbar__search, .ms-shopbar__sort, .ms-shopbar__sort select { flex: 1 1 100%; width: 100%; }
}

.ms-shopbar__apply[hidden] { display: none; }
.ms-pcard__systems label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 6px; border: 1.6px solid var(--spend-track); border-radius: var(--radius); background: var(--white); color: var(--char); font-size: 13px; text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; white-space: nowrap; }
.ms-pgrid .ms-pcard__systems label { padding: 0 4px; font-size: 12px; }

/* Browse tiles: same height in every row, label on one line. */
.ms-shoptiles li { display: flex; }
.ms-shoptiles a { display: grid; justify-items: center; gap: 4px; padding: 16px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--muted-card); color: var(--ink); text-align: center; text-decoration: none; transition: border-color .15s, box-shadow .2s; flex: 1; align-content: start; }

@media (max-width: 1023px) {
	.ms-shoptiles li { flex: 0 0 160px; }
}

/* Shop grid: 4 per row on big screens, 2 per row on tablets and phones. */
.ms-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) {
	.ms-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Narrow cards (2 per row on phones, 4 per row on small laptops): tighter type so everything still fits on one line,
   except the title, which gets two equal-height lines so the version (Brand + Product + Version) is never cut off. */
.ms-pcard { container-type: inline-size; }
@container (max-width: 240px) {
	.ms-pcard .ms-pcard__title { display: -webkit-box; min-height: 44px; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
@container (max-width: 160px) {
	.ms-pcard .ms-pcard__title { margin-top: 10px; min-height: 40px; font-size: 14px; line-height: 20px; }
	.ms-pcard__rating { gap: 4px; font-size: 12px; }
	.ms-pcard__rating .ms-tp { --size: 13px; gap: 1px; }
	.ms-pcard__price { margin: 6px 0 10px; gap: 2px 6px; }
	.ms-pcard__now { font-size: 16px; }
	.ms-pcard__was { font-size: 12px; }
	.ms-pcard__badge { top: 6px; left: 6px; padding: 2px 6px; font-size: 11px; line-height: 16px; }
	.ms-pcard__os { display: none; }
	.ms-pcard__systems { gap: 4px; }
	.ms-pcard .ms-pcard__systems label { min-height: 32px; padding: 0 2px; font-size: 12px; }
	.ms-pcard .ms-pcard__cta { min-height: 40px; gap: 6px; padding: 0 8px; font-size: 14px; }
	.ms-pcard .ms-pcard__cta .ms-icon { width: 16px; height: 16px; }
}
@media (max-width: 1023px) {
	.ms-pgrid .ms-pcard { padding: 8px; }
}

/* Category tree in the filters: sub-categories indented; the open branch is bold. */
.ms-filterlist--sub { margin: 2px 0 2px 14px; padding-left: 8px; border-left: 1px solid var(--line); }
.ms-filterlist a.is-open { font-weight: 600; }

/* Category FAQs under the product grid. */
.ms-shop__main .ms-faqs, .ms-shop .ms-empty + .ms-faqs { margin-top: 40px; }
.ms-shop__main .ms-faqs h2, .ms-shop .ms-empty + .ms-faqs h2 { margin: 0 0 12px; font-size: 22px; line-height: 30px; } /* .ms-empty + : empty listings (no sidebar) */

/* Listing heading and intro, centered. */
.ms-shop__head { text-align: center; }
.ms-shop__head .ms-shop__intro { margin: -8px auto 20px; }
/* Same centered heading + intro on every listing page: hubs, collections, shop, category, brand and attribute archives. */
.ms-hub > h1, .woocommerce-products-header { text-align: center; }

.woocommerce-products-header .term-description, .woocommerce-products-header .page-description { max-width: 68ch; margin: 0 auto 20px; color: var(--slate); }

/* Listing intros: first line only, "Read more" opens the rest (CSS checkbox toggle, no JavaScript). */
.ms-readmore { position: relative; }
.ms-readmore__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ms-readmore__text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; }
.ms-readmore__text p { display: inline; margin: 0; }
.ms-readmore__text p + p::before { content: " "; }
.ms-readmore__toggle:checked ~ .ms-readmore__text { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: none; }
.ms-readmore__toggle:checked ~ .ms-readmore__text p { display: block; margin: 0 0 10px; }
.ms-readmore__toggle:checked ~ .ms-readmore__text p:last-child { margin-bottom: 0; }
.ms-readmore__toggle:checked ~ .ms-readmore__text p + p::before { content: none; }
.ms-readmore__btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 4px; border-radius: 4px; color: var(--orange); font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; }
.ms-readmore__btn::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.ms-readmore__btn:hover { text-decoration: underline; }
.ms-readmore__less { display: none; }
.ms-readmore__toggle:checked ~ .ms-readmore__btn .ms-readmore__more { display: none; }
.ms-readmore__toggle:checked ~ .ms-readmore__btn .ms-readmore__less { display: inline; }
.ms-readmore__toggle:checked ~ .ms-readmore__btn::after { margin-top: 4px; transform: rotate(-135deg); }
.ms-readmore__toggle:focus-visible ~ .ms-readmore__btn { outline: 3px solid var(--ring); outline-offset: 2px; }

/* Tiles: up to 7 per row; long names wrap to two lines and every tile keeps the same height. */
.ms-shoptiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ms-shoptiles__label { font-size: 15px; font-weight: 600; line-height: 20px; max-width: 100%; text-overflow: ellipsis; display: -webkit-box; min-height: 40px; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; align-content: center; }

/* ------------------------------------------------------------------ contact and customer reviews pages */
.ms-info { padding: 16px 0 48px; }
.ms-info__lede { max-width: 62ch; margin: -8px auto 24px; color: var(--slate); font-size: 17px; line-height: 27px; }
.ms-info__lede strong { color: var(--ink); }
.ms-info .woocommerce-message, .ms-info .woocommerce-error { max-width: 720px; margin: 0 auto 20px; }
.ms-info__faqs { max-width: 820px; margin: 48px auto 0; }
.ms-info__faqs h2 { margin: 0 0 12px; font-size: 22px; line-height: 30px; text-align: center; }

/* Contact: channel cards beside the form. */
.ms-contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.ms-contact__channels { display: grid; gap: 16px; }
.ms-ccard { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.ms-ccard--whatsapp { border-color: rgba(245, 74, 0, .35); background: rgba(245, 74, 0, .04); }
.ms-ccard__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 9999px; background: var(--orange-tint); color: var(--orange); }
.ms-ccard__icon .ms-icon { width: 24px; height: 24px; }
.ms-ccard__body h3, .ms-ccard--help h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 26px; }
.ms-ccard__body p { margin: 0 0 6px; color: var(--slate); font-size: 15px; line-height: 23px; }
.ms-ccard__body a { color: var(--orange); font-weight: 600; overflow-wrap: anywhere; }
.ms-ccard__time { display: inline-flex; align-items: center; gap: 6px; }
.ms-ccard p.ms-ccard__time { color: var(--ink); font-size: 14px; font-weight: 500; }
.ms-ccard__time .ms-icon { width: 16px; height: 16px; color: var(--orange); }
.ms-ccard__cta { grid-column: 1 / -1; width: 100%; margin-top: 10px; }
.ms-ccard__cta.is-disabled { opacity: .55; cursor: not-allowed; }
.ms-ccard--help { display: block; }
.ms-ccard--help ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.ms-ccard--help a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 10px; border-radius: var(--radius); background: var(--gray-50); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.ms-ccard--help a:hover { background: var(--orange-tint); color: var(--orange); }
.ms-ccard--help .ms-icon { width: 18px; height: 18px; color: var(--orange); }
.ms-contact__form { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.ms-contact__form h2 { margin: 0; font-size: 22px; line-height: 30px; }
.ms-contact__note { margin: 4px 0 16px; color: var(--slate); font-size: 15px; }
.ms-contact .ms-form { max-width: none; }
.ms-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.ms-contact .ms-form label { font-size: 14px; }
.ms-contact .ms-form label span { color: var(--slate); font-weight: 400; }
.ms-contact .ms-form input[type="text"], .ms-contact .ms-form input[type="email"], .ms-contact .ms-form textarea { padding: 10px 12px; font-size: 16px; }
.ms-contact__submit { gap: 8px; width: 100%; min-height: 48px; font-size: 16px; }
.ms-contact__submit .ms-icon { width: 18px; height: 18px; }

/* Reviews page: summary with clickable bars, rating chips + sort, two-column review cards. */
.ms-rsum { max-width: 1000px; margin-right: auto; margin-left: auto; }
.ms-rsum .ms-review-summary__bars { width: 100%; max-width: 460px; }
.ms-rsum .ms-review-summary__bars li { display: block; }
.ms-rsum .ms-review-summary__bars a { display: grid; grid-template-columns: 72px minmax(0, 1fr) 28px; align-items: center; gap: 10px; padding: 2px 4px; border-radius: 4px; color: inherit; text-decoration: none; }
.ms-rsum .ms-review-summary__bars a:hover, .ms-rsum .ms-review-summary__bars li.is-active a { background: var(--white); }
.ms-rsum .ms-review-summary__bars li.is-active .ms-review-summary__label { color: var(--ink); font-weight: 600; }
.ms-rbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.ms-rbar__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-rbar__chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9999px; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.ms-rbar__chips a span { color: var(--slate); font-size: 12px; }
.ms-rbar__chips a:hover { border-color: rgba(245, 74, 0, .5); }
.ms-rbar__chips a.is-active { border-color: var(--orange); background: var(--orange-tint); color: var(--orange); }
.ms-rbar__chips a.is-active span { color: var(--orange); }
.ms-rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ms-rgrid .ms-review { display: flex; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.ms-rgrid .ms-review article { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ms-review__product { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: var(--slate); font-size: 14px; text-decoration: none; }
.ms-rgrid .ms-review__text { margin-bottom: 14px; }
.ms-review__product img { flex: none; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.ms-review__product strong { color: var(--ink); }
.ms-review__product:hover strong { color: var(--orange); }

@media (max-width: 1023px) {
	.ms-contact__grid { grid-template-columns: minmax(0, 1fr); }
	.ms-rgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.ms-form__pair, .ms-ccard--help ul { grid-template-columns: minmax(0, 1fr); }
	.ms-contact__form, .ms-ccard { padding: 16px; }
	.ms-rbar { align-items: stretch; }
	.ms-rbar .ms-shopbar__sort, .ms-rbar .ms-shopbar__sort select { width: 100%; }
}

/* Contact: the form card is as tall as the channel column; the message box grows so the button lines up with the bottom. */
.ms-contact__grid { align-items: stretch; }
.ms-contact__form { display: flex; flex-direction: column; }
.ms-contact .ms-form { display: flex; flex: 1; flex-direction: column; }
.ms-contact .ms-form__row--grow { display: flex; flex: 1; flex-direction: column; }
.ms-contact .ms-form__row--grow textarea { flex: 1; min-height: 140px; resize: vertical; }
.ms-contact__submit { margin-top: auto; }

/* ------------------------------------------------------------------ cart drawer (slides in from the right) */
.ms-cdrawer { position: fixed; inset: 0 0 0 auto; width: 100%; max-width: 420px; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--white); color: var(--ink); box-shadow: -20px 0 25px -5px rgba(0, 0, 0, .1); transform: translateX(100%); transition: transform .25s ease-out, display .25s allow-discrete, overlay .25s allow-discrete; }
.ms-cdrawer:popover-open { display: flex; flex-direction: column; transform: none; }
@starting-style {
	.ms-cdrawer:popover-open { transform: translateX(100%); }
}
.ms-cdrawer::backdrop { background: rgba(9, 9, 11, .4); }
.ms-cdrawer__head { display: flex; flex: none; align-items: center; justify-content: space-between; min-height: 64px; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.ms-cdrawer__head h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 26px; }
.ms-cdrawer__head h2 span { color: var(--slate); font-weight: 500; }
.ms-cdrawer__body { flex: 1; overflow-y: auto; padding: 16px 20px; overscroll-behavior: contain; }
.ms-cdrawer__added { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--green); border-radius: var(--radius); background: var(--green-tint); color: var(--ink); font-size: 14px; line-height: 20px; }
.ms-cdrawer__added .ms-icon { flex: none; width: 18px; height: 18px; color: var(--green); }
.ms-cdrawer .ms-spend { margin: 0 0 14px; }
.ms-cdrawer__items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ms-cdrawer__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) 32px; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ms-cdrawer__item img { width: 64px; height: 64px; border-radius: var(--radius); object-fit: cover; }
.ms-cdrawer__info { display: grid; gap: 2px; min-width: 0; }
.ms-cdrawer__name { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 21px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
a.ms-cdrawer__name:hover { color: var(--orange); }
.ms-cdrawer__meta { color: var(--slate); font-size: 13px; }
.ms-cdrawer__price { color: var(--price); font-size: 15px; font-weight: 700; }
.ms-cdrawer__price .amount { color: inherit; }
.ms-cdrawer__remove { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); color: var(--slate); }
.ms-cdrawer__remove:hover { background: var(--red-tint); color: var(--red); }
.ms-cdrawer__remove .ms-icon { width: 16px; height: 16px; }
.ms-cdrawer__foot { flex: none; display: grid; gap: 10px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--gray-50); }
.ms-cdrawer__totals { display: grid; gap: 6px; margin: 0 0 4px; font-size: 14px; }
.ms-cdrawer__totals div { display: flex; justify-content: space-between; gap: 12px; }
.ms-cdrawer__totals dt { color: var(--slate); }
.ms-cdrawer__totals dd { margin: 0; color: var(--ink); font-weight: 600; }
.ms-cdrawer__discount dd { color: var(--green); }
.ms-cdrawer__total { padding-top: 8px; border-top: 1px solid var(--line); font-size: 16px; }
.ms-cdrawer__total dt { color: var(--ink); font-weight: 600; }
.ms-cdrawer__total dd { color: var(--price); font-size: 20px; font-weight: 700; }
.ms-cdrawer__total .amount { color: inherit; }
.ms-cdrawer__checkout, .ms-cdrawer__view { width: 100%; min-height: 48px; font-size: 16px; }
.ms-cdrawer__note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; color: var(--slate); font-size: 13px; text-align: center; }
.ms-cdrawer__note .ms-icon { width: 16px; height: 16px; color: var(--orange); }
.ms-cdrawer__empty { display: grid; flex: 1; align-content: center; justify-items: center; gap: 6px; padding: 24px; text-align: center; }
.ms-cdrawer__empty p { margin: 0; color: var(--slate); }
.ms-cdrawer__empty strong { color: var(--ink); font-size: 18px; }
.ms-cdrawer__empty .ms-btn { margin-top: 12px; }
.ms-cdrawer__empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 9999px; background: var(--orange-tint); color: var(--orange); }
.ms-cdrawer__empty-icon .ms-icon { width: 30px; height: 30px; }
button.ms-cart-link { cursor: pointer; }
/* Never wider than the screen; the slide-in offset must not widen the page on phones. */
.ms-cdrawer { right: 0; left: auto; width: min(420px, 100vw); max-width: none; }
html:has(.ms-cdrawer:popover-open) { overflow: hidden; }

/* Swipe rows keep their cards to themselves: without paint containment, phone browsers counted the off-screen cards
   in the page width, zoomed the layout out and stretched fixed bars (product page buy bar, cart drawer). */
.ms-cardrow, .ms-shoptiles { contain: paint; }

/* ------------------------------------------------------------------ cart page: offers row and reviews slider */
.ms-cart-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.ms-cart-offers.is-single { grid-template-columns: minmax(0, 1fr); }
.ms-cart-offers .ms-spend { margin: 0; }
.ms-cart-welcome { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--offer-edge); border-radius: var(--radius-lg); background: var(--offer-bg); }
.ms-cart-welcome__icon { display: inline-flex; color: var(--orange); }
.ms-cart-welcome__icon .ms-icon { width: 24px; height: 24px; }
.ms-cart-welcome__text { display: grid; gap: 2px; margin: 0; }
.ms-cart-welcome__text strong { color: var(--ink); font-size: 15px; line-height: 21px; }
.ms-cart-welcome__text span { color: var(--slate); font-size: 13px; }
.ms-cart-welcome__apply { grid-column: 1 / -1; min-height: 40px; padding: 0 16px; border: 2px solid var(--orange); border-radius: var(--radius); background: var(--white); color: var(--orange); font: 600 15px/1 var(--font-sans); cursor: pointer; transition: background-color .15s, color .15s; }
.ms-cart-welcome__apply:hover { background: var(--orange); color: var(--on-orange); }
.ms-rslider { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.ms-rslider__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ms-rslider__head h2 { margin: 0 0 4px; font-size: 20px; line-height: 28px; }
.ms-rslider__score { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--slate); font-size: 14px; }
.ms-rslider__score strong { color: var(--ink); }
.ms-rslider__score a { margin-left: 4px; color: var(--orange); font-weight: 600; }
.ms-rslider__nav { display: flex; flex: none; gap: 8px; }
.ms-rslider__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 9999px; background: var(--white); color: var(--ink); cursor: pointer; }
.ms-rslider__btn[hidden] { display: none; }
.ms-rslider__btn:hover { border-color: var(--orange); color: var(--orange); }
.ms-rslider__btn .ms-icon { width: 18px; height: 18px; }
.ms-rslider__track { display: flex; gap: 16px; margin: 0; padding: 0 0 6px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; contain: paint; }
.ms-rslider__track::-webkit-scrollbar { display: none; }
.ms-rslider__card { display: flex; flex: 0 0 min(300px, 82%); flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); scroll-snap-align: start; }
.ms-rslider__text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--char); font-size: 15px; line-height: 23px; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; }
.ms-rslider__who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: auto 0 0; font-size: 14px; }
.ms-rslider__product { overflow: hidden; color: var(--slate); font-size: 13px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.ms-rslider__product:hover { color: var(--orange); }
@media (max-width: 640px) {
	.ms-cart-offers { grid-template-columns: minmax(0, 1fr); }
	.ms-rslider__nav { display: none; }
}

/* ------------------------------------------------------------------ cart: compact layout (as short as possible) */
.ms-cart-page { padding: 16px 0 32px; }
.ms-cart__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ms-cart__head h1 { font-size: 26px; line-height: 32px; }
.ms-cart__head p { margin: 0; font-size: 14px; }
.ms-cart-offers { margin: 14px 0 0; gap: 10px; }
.ms-cart-offers .ms-spend { padding: 10px 14px; }
.ms-cart-offers .ms-spend__track { height: 8px; margin: 8px 0 0; }
.ms-cart-offers .ms-spend__amount { display: none; } /* the title already says how much is left */
.ms-cart-welcome { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
.ms-cart-welcome__icon .ms-icon { width: 20px; height: 20px; }
.ms-cart-welcome__text strong { font-size: 14px; line-height: 19px; }
.ms-cart-welcome__text span { font-size: 12px; }
.ms-cart-welcome .ms-welcome__code { padding: 0 5px; font-size: 12px; }
.ms-cart-welcome__apply { grid-column: auto; min-height: 36px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
.ms-cart__items { gap: 8px; margin: 14px 0 0; }
.ms-cart-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; }
.ms-cart-item__image img { width: 64px; height: 64px; }
.ms-cart-item__info h3 { overflow: hidden; font-size: 15px; line-height: 21px; text-overflow: ellipsis; white-space: nowrap; }
.ms-cart-item__info p, .ms-cart-item__info dl { margin-top: 2px; font-size: 13px; line-height: 18px; }
.ms-cart-item__end { gap: 10px; }
.woocommerce .ms-cart-item a.remove.ms-cart-item__remove { width: 32px; height: 32px; padding: 7px; }
.ms-cart__clear { margin: 10px 0 0; }
.ms-cart__side { padding: 16px; }
.ms-cart__coupon { padding-bottom: 14px; }
.ms-cart-totals__rows { gap: 6px; padding: 12px 0; }
.ms-cart-totals__total { padding: 12px 0; }
.woocommerce .ms-cart-totals a.checkout-button.ms-cart-totals__checkout { min-height: 48px; height: 48px; font-size: 16px; font-weight: 600; }
.ms-cart-totals__note { margin: 12px 0 0; padding: 10px 12px; }
.ms-rslider { margin-top: 20px; padding-top: 16px; }
.ms-rslider__head { margin-bottom: 10px; }
.ms-rslider__head h2 { font-size: 18px; line-height: 26px; }
.ms-rslider__card { gap: 6px; padding: 12px 14px; }
.ms-rslider__text { font-size: 14px; line-height: 21px; -webkit-line-clamp: 3; line-clamp: 3; }
@media (max-width: 1023px) {
	.woocommerce form.ms-cart { gap: 14px; }
}
@media (max-width: 640px) {
	.ms-cart-page { padding: 12px 0 24px; }
	.ms-cart__head h1 { font-size: 22px; line-height: 28px; }
	.ms-cart-item { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; }
	.ms-cart-item__image img { width: 52px; height: 52px; }
	.ms-cart-item__end { flex-direction: column; align-items: flex-end; gap: 2px; padding: 0; border: 0; }
	.ms-cart-item__price { font-size: 15px; }
	.woocommerce .ms-cart-item a.remove.ms-cart-item__remove { width: 28px; height: 28px; padding: 6px; }
	.ms-cart__side { padding: 12px; }
	.ms-cart-welcome__text span { display: none; } /* phones: "New customer? Get 10% off" + Apply is enough */
}
.ms-cart-item__info p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ cart drawer: coupon, reviews and a shorter footer */
.ms-cdrawer .ms-cart-welcome { margin: 0 0 14px; }
.ms-cdrawer .ms-cart-welcome__text span { display: none; }
.ms-cdrawer .ms-spend { padding: 10px 14px; margin-bottom: 10px; }
.ms-cdrawer .ms-spend__track { height: 8px; margin: 8px 0 0; }
.ms-cdrawer .ms-spend__amount { display: none; }
.ms-rslider--compact { margin-top: 16px; padding-top: 14px; }
.ms-rslider--compact .ms-rslider__head { margin-bottom: 8px; }
.ms-rslider--compact .ms-rslider__head h2 { margin: 0 0 2px; font-size: 16px; line-height: 22px; }
.ms-rslider--compact .ms-rslider__score { font-size: 13px; }
.ms-rslider--compact .ms-rslider__btn { width: 32px; height: 32px; }
.ms-rslider--compact .ms-rslider__btn .ms-icon { width: 16px; height: 16px; }
.ms-rslider--compact .ms-rslider__track { gap: 10px; }
.ms-rslider--compact .ms-rslider__card { flex-basis: 82%; gap: 6px; padding: 12px; }
.ms-rslider--compact .ms-rslider__text { font-size: 13px; line-height: 19px; -webkit-line-clamp: 3; line-clamp: 3; }
.ms-rslider--compact .ms-rslider__who { font-size: 13px; }
.ms-cdrawer__foot { gap: 10px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
.ms-cdrawer__totals { gap: 4px; margin: 0; font-size: 13px; }
.ms-cdrawer__total { padding-top: 6px; font-size: 15px; }
.ms-cdrawer__total dd { font-size: 18px; }
.ms-cdrawer__actions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; }
.ms-cdrawer__actions .ms-btn { width: 100%; min-height: 46px; font-size: 15px; }
.ms-cdrawer__note { gap: 8px; justify-self: center; padding: 5px 12px 5px 5px; border: 1px solid var(--line); border-radius: 9999px; background: var(--white); color: var(--slate); font-size: 12px; line-height: 16px; text-align: left; }
.ms-cdrawer__note strong { color: var(--ink); font-weight: 600; }
.ms-cdrawer__note-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 9999px; background: var(--orange-tint); color: var(--orange); }
.ms-cdrawer__note-icon .ms-icon { width: 13px; height: 13px; }
.ms-cdrawer__note { white-space: nowrap; }

/* Homepage (front-page.php): hero, category tiles, sliding product rows, deals banner, brands, promises, store text. */
.ms-home, .ms-blog { --home-gap: 36px; }
.ms-home__section { margin: var(--home-gap) 0; }
.ms-home__section > h2, .ms-home__head h2, .ms-home .ms-rslider__head h2 { margin: 0; font-size: 24px; line-height: 32px; }
.ms-home__section > h2 { margin-bottom: 12px; }
.ms-home__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ms-home__more { display: inline-flex; align-items: center; gap: 2px; color: var(--orange); font-size: 15px; font-weight: 600; line-height: 20px; text-decoration: none; white-space: nowrap; }
.ms-home__more:hover { text-decoration: underline; }
.ms-home__more .ms-icon { width: 16px; height: 16px; }



.ms-homerow .ms-pcard { scroll-snap-align: start; }
@media (min-width: 1024px) {
	.ms-cardrow.ms-homerow { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 48px) / 4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.ms-cardrow.ms-homerow::-webkit-scrollbar { display: none; }
}



.ms-home .ms-rslider { margin: var(--home-gap) 0; padding-top: 0; border-top: 0; }
.ms-home .ms-rslider__head { margin-bottom: 12px; }
.ms-home .ms-slider > ul, .ms-blog .ms-slider > ul { padding-top: 4px; padding-bottom: 8px; }


.ms-homeabout__text { max-width: 78ch; margin: 0 auto; color: var(--slate); text-align: center; }
.ms-homeabout__text .ms-readmore__text { -webkit-line-clamp: 3; line-clamp: 3; }

@media (max-width: 1023px) {
	.ms-home, .ms-blog { --home-gap: 28px; }
}
@media (max-width: 640px) {
}

/* Homepage hero: badge, large headline with an orange accent, two buttons, review proof and a product collage on dots. */
.site-main.ms-home { padding-top: 0; }
.ms-homehero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 468px; gap: 40px; align-items: end; padding: 20px 0 0; }
.ms-homehero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--line) 1.2px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 70% 45%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 45%, #000 30%, transparent 75%); }
.ms-homehero__badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 14px; border: 1px solid var(--line); border-radius: 9999px; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 20px; }
.ms-homehero__dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--badge-success); box-shadow: 0 0 0 3px rgba(0, 201, 80, .18); }
.ms-homehero h1 { margin: 14px 0; font-size: clamp(38px, 4vw, 50px); line-height: 1.04; letter-spacing: -0.035em; }
.ms-homehero__accent { color: var(--orange-text); }
.ms-homehero__lede { max-width: 56ch; margin: 0 0 22px; color: var(--slate); font-size: 17px; line-height: 26px; }
.ms-homehero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ms-homehero__ctas .ms-btn { min-height: 52px; padding: 0 24px; font-size: 16px; font-weight: 600; }
.ms-homehero__ctas .ms-icon { width: 18px; height: 18px; margin-left: 8px; }
.ms-homehero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 20px; }
.ms-homehero__points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 22px; }
.ms-homehero__points li { display: inline-flex; align-items: center; gap: 8px; }
.ms-homehero__points .ms-icon { width: 18px; height: 18px; color: var(--badge-success); stroke-width: 2.5; }
.ms-homehero__faces { display: inline-flex; }
.ms-homehero__faces span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: -10px; border: 2px solid var(--white); border-radius: 9999px; background: var(--orange); color: var(--white); font-size: 15px; font-weight: 600; }
.ms-homehero__faces span:first-child { margin-left: 0; }
.ms-homehero__faces span:nth-child(2) { background: var(--tp-5); }
.ms-homehero__faces span:nth-child(3) { background: var(--orange-lo); }
.ms-homehero__faces span:nth-child(4) { background: var(--badge-warn); }
.ms-homehero__proof p { display: grid; gap: 2px; margin: 0; color: var(--slate); font-size: 14px; line-height: 20px; }
.ms-homehero__proof strong { color: var(--ink); }
.ms-homehero__proof a { color: var(--slate); }
.ms-homehero__proof a:hover { color: var(--orange); }
.ms-homehero__art { position: relative; width: 520px; height: 500px; margin: 0; padding: 0; list-style: none; zoom: .9; }
.ms-homehero__shot { position: absolute; transition: translate .2s; }
.ms-homehero__shot:hover { translate: 0 -6px; }
.ms-homehero__shot a { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 24px 48px -16px rgba(9, 9, 11, .28); }
.ms-homehero__shot img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.ms-homehero__shot--1 { top: 16px; left: 130px; z-index: 3; width: 290px; }
.ms-homehero__shot--2 { top: 44px; left: 0; z-index: 1; width: 190px; rotate: -6deg; }
.ms-homehero__shot--3 { top: 150px; right: 0; z-index: 2; width: 190px; rotate: 5deg; }
.ms-homehero__shot--4 { top: 280px; left: 24px; z-index: 4; width: 210px; rotate: -3deg; }
.ms-homehero__shot--5 { top: 296px; right: 14px; z-index: 4; width: 200px; rotate: 3deg; }
@media (max-width: 1023px) {
	.ms-homehero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px 0 0; }
	.ms-homehero { contain: paint; }
	.ms-homehero__art { width: 520px; max-width: none; margin: 0 auto; zoom: .7; }
}
@media (max-width: 640px) {
	.ms-home__section > h2, .ms-home__head h2, .ms-home .ms-rslider__head h2 { font-size: 20px; line-height: 28px; }
	.ms-home, .ms-blog { --home-gap: 24px; }
	.ms-homehero { padding: 16px 0 0; }
	.ms-homehero__points { gap: 8px 16px; font-size: 14px; }
	.ms-homehero h1 { margin: 16px 0; font-size: 38px; }
	.ms-homehero__lede { font-size: 16px; line-height: 25px; }
	.ms-homehero__ctas .ms-btn { flex: 1 1 100%; }
	.ms-homehero__art { zoom: .62; }
}

/* Homepage category slider: one sliding row of cards (arrows from shop.js, swipe without it). Three product images
   fanned out on the category-card grey, then the name (always one line, long names end in "...") and the count. */
.ms-catcards { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px) / 5); gap: 16px; margin: 0; padding: 4px 0 12px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ms-catcards::-webkit-scrollbar { display: none; }
.ms-catcards li { display: flex; scroll-snap-align: start; }
.ms-catcard { display: flex; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); color: var(--title); text-decoration: none; transition: border-color .2s, box-shadow .2s, translate .2s; }
.ms-catcard:hover { border-color: var(--offer-edge); box-shadow: 0 14px 28px -14px rgba(245, 74, 0, .35); translate: 0 -3px; }
.ms-catcard__art { position: relative; display: block; aspect-ratio: 10 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(160deg, var(--muted-card) 40%, var(--offer-bg)); }
.ms-catcard__img { position: absolute; top: 13%; width: 52%; height: auto; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--white); border-radius: var(--radius); box-shadow: 0 12px 24px -10px rgba(9, 9, 11, .45); transition: translate .25s ease-out, rotate .25s ease-out; }
.ms-catcard__img--1 { top: 17%; left: 20%; z-index: 3; width: 60%; }
.ms-catcard__img--2 { left: 3%; z-index: 1; rotate: -8deg; }
.ms-catcard__img--3 { right: 3%; z-index: 2; rotate: 8deg; }
.ms-catcard__art--1 .ms-catcard__img--1 { width: 64%; left: 18%; top: 14%; }
.ms-catcard__art--2 .ms-catcard__img--1 { left: 30%; }
.ms-catcard__art--2 .ms-catcard__img--2 { left: 6%; }
.ms-catcard:hover .ms-catcard__img--1 { translate: 0 -4px; }
.ms-catcard:hover .ms-catcard__img--2 { translate: -6px 0; rotate: -11deg; }
.ms-catcard:hover .ms-catcard__img--3 { translate: 6px 0; rotate: 11deg; }
.ms-catcard__body { display: flex; flex-direction: column; min-width: 0; padding: 12px 16px 14px; }
.ms-catcard__name { overflow: hidden; font-size: 17px; font-weight: 600; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; }
.ms-catcard__count { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--orange-text); font-size: 14px; font-weight: 600; }
.ms-catcard__count .ms-icon { width: 15px; height: 15px; transition: translate .2s; }
.ms-catcard:hover .ms-catcard__count .ms-icon { translate: 3px 0; }
@media (max-width: 1023px) {
	.ms-catcards { grid-auto-columns: calc((100% - 32px) / 3); contain: paint; }
}
@media (max-width: 640px) {
	.ms-catcards { grid-auto-columns: 58%; gap: 12px; }
	.ms-catcard__body { padding: 12px; }
	.ms-catcard__name { font-size: 16px; line-height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
	.ms-catcard, .ms-catcard__img, .ms-catcard__count .ms-icon { transition: none; }
}

/* Section heading line: fills the space between the title and the "View all" link, orange at the start. */
.ms-home__rule { flex: 1; min-width: 24px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--orange) 0, var(--orange) 40px, var(--offer-edge) 40px, var(--line) 45%, transparent); }

/* Slider arrows in their own columns left and right of the cards (homepage category slider); faded at the ends, hidden on phones. */
.ms-slider { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 14px; align-items: center; }
.ms-slider > ul { margin: 0; padding-right: 0; padding-left: 0; scroll-padding: 0; }
.ms-slider__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--offer-edge); border-radius: 9999px; background: var(--offer-bg); color: var(--orange); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, opacity .2s, scale .2s; }
.ms-slider__btn[hidden] { visibility: hidden; display: inline-flex; }
.ms-slider__btn:hover { border-color: var(--orange); background: var(--orange); color: var(--on-orange); scale: 1.06; }
.ms-slider__btn:disabled { opacity: .35; cursor: default; scale: 1; border-color: var(--line); background: var(--white); color: var(--slate); }
.ms-slider__btn .ms-icon { width: 20px; height: 20px; }
.ms-rslider__btn:disabled { opacity: .4; cursor: default; }
@media (max-width: 1023px) {
	.ms-slider { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 10px; }
	.ms-slider__btn { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
	.ms-slider { display: block; }
	.ms-slider > ul { margin: 0 -16px; padding-right: 16px; padding-left: 16px; scroll-padding: 0 16px; }
	.ms-slider__btn, .ms-slider__btn[hidden] { display: none; }
	.ms-home__rule { min-width: 12px; }
}

/* Homepage deals banner: orange panel with real sale numbers (top discount, biggest saving, count). */
.ms-homedeal__banner { position: relative; display: flex; align-items: center; gap: 16px; margin-bottom: 12px; padding: 14px 20px; overflow: hidden; border-radius: var(--radius-lg); background: radial-gradient(rgba(255, 255, 255, .14) 1.2px, transparent 1.2px) 0 0 / 18px 18px, linear-gradient(115deg, var(--orange) 0%, var(--orange-hi) 45%, var(--orange-lo) 100%); color: var(--on-orange); box-shadow: 0 18px 36px -20px rgba(202, 53, 0, .7); }
.ms-homedeal__icon { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 9999px; background: rgba(255, 255, 255, .16); color: var(--white); }
.ms-homedeal__icon .ms-icon { width: 22px; height: 22px; }
.ms-homedeal__text { position: relative; z-index: 1; flex: 1; min-width: 0; }
.ms-homedeal__banner h2 { margin: 0; color: var(--white); font-size: 22px; line-height: 28px; }
.ms-homedeal__text > p:last-child { margin: 0; font-size: 14px; line-height: 20px; opacity: .92; }
.ms-homedeal__stats { position: relative; z-index: 1; display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ms-homedeal__stats li { display: grid; justify-items: center; min-width: 92px; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .12); text-align: center; backdrop-filter: blur(2px); }
.ms-homedeal__stats strong { color: var(--white); font-size: 20px; font-weight: 700; line-height: 25px; }
.ms-homedeal__stats strong * { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.ms-homedeal__stats li > span { font-size: 12px; line-height: 16px; opacity: .9; }
.ms-homedeal__cta { position: relative; z-index: 1; flex: none; gap: 8px; border-color: var(--white); background: var(--white); color: var(--orange); }
.ms-homedeal__cta:hover { background: var(--on-orange); color: var(--orange-lo); }
.ms-homedeal__cta .ms-icon { width: 18px; height: 18px; }
.ms-homedeal__deco { position: absolute; right: -22px; bottom: -52px; color: var(--white); opacity: .1; rotate: -18deg; }
.ms-homedeal__deco .ms-icon { width: 140px; height: 140px; stroke-width: 1.2; }
@media (max-width: 1023px) {
	.ms-homedeal__banner { flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; }
	.ms-homedeal__text { flex-basis: calc(100% - 60px); }
	.ms-homedeal__stats { flex: 1 1 100%; }
	.ms-homedeal__stats li { flex: 1; min-width: 0; }
}
@media (max-width: 640px) {
	.ms-homedeal__banner { padding: 12px; }
	.ms-homedeal__icon { width: 38px; height: 38px; }
	.ms-homedeal__icon .ms-icon { width: 19px; height: 19px; }
	.ms-homedeal__text { flex-basis: calc(100% - 52px); }
	.ms-homedeal__banner h2 { font-size: 19px; line-height: 24px; }
	.ms-homedeal__text > p:last-child { font-size: 14px; line-height: 20px; }
	.ms-homedeal__stats { gap: 8px; }
	.ms-homedeal__stats li { padding: 5px 6px; }
	.ms-homedeal__stats strong { font-size: 17px; line-height: 22px; }
	.ms-homedeal__stats li > span { font-size: 11px; }
	.ms-homedeal__cta { width: 100%; }
}

/* Homepage brand slider: one sliding row of brand cards (initials or logo, name, product count). */
.ms-brands { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ms-brands::-webkit-scrollbar { display: none; }
.ms-brands li { display: flex; scroll-snap-align: start; }
.ms-brands a { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--white) 55%, var(--offer-bg)); color: var(--title); text-decoration: none; transition: border-color .2s, box-shadow .2s, translate .2s; }
.ms-brands a:hover { border-color: var(--offer-edge); box-shadow: 0 14px 28px -14px rgba(245, 74, 0, .35); translate: 0 -3px; }
.ms-brands__mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--offer-edge); border-radius: 9999px; background: var(--offer-bg); color: var(--orange); font-size: 15px; font-weight: 700; letter-spacing: .02em; transition: background-color .2s, color .2s, border-color .2s; }
.ms-brands__mark img { width: 100%; height: 100%; object-fit: contain; background: var(--white); }
.ms-brands a:hover .ms-brands__mark { border-color: var(--orange); background: var(--orange); color: var(--on-orange); }
.ms-brands__body { display: grid; min-width: 0; }
.ms-brands__name { display: -webkit-box; overflow: hidden; font-size: 16px; font-weight: 600; line-height: 21px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ms-brands a:hover .ms-brands__name { color: var(--orange); }
.ms-brands__count { color: var(--slate); font-size: 13px; line-height: 18px; }
@media (max-width: 1023px) {
	.ms-brands { grid-auto-columns: calc((100% - 32px) / 3); contain: paint; }
}
@media (max-width: 640px) {
	.ms-brands { grid-auto-columns: 62%; gap: 12px; }
	.ms-brands a { padding: 10px 12px; }
	.ms-brands__mark { width: 38px; height: 38px; font-size: 14px; }
	.ms-brands__name { font-size: 15px; line-height: 20px; }
}

/* Homepage "Why producers buy here": one panel, four points with an orange icon beside short text, divided by lines. */
.ms-whybuy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--offer-edge); border-radius: var(--radius-lg); background: radial-gradient(rgba(245, 74, 0, .09) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(160deg, var(--white) 40%, var(--offer-bg)); list-style: none; }
.ms-whybuy li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 18px; text-align: center; }
.ms-whybuy li + li { border-left: 1px solid var(--offer-edge); }
.ms-whybuy__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 9999px; background: linear-gradient(140deg, var(--orange-hi), var(--orange-lo)); color: var(--on-orange); box-shadow: 0 8px 16px -8px rgba(202, 53, 0, .6); }
.ms-whybuy__icon .ms-icon { width: 20px; height: 20px; }
.ms-whybuy h3 { margin: 0 0 2px; font-size: 16px; font-weight: 600; line-height: 21px; }
.ms-whybuy p { margin: 0; color: var(--slate); font-size: 14px; line-height: 20px; }
.ms-whybuy a { color: var(--orange); }
@media (max-width: 1023px) {
	.ms-whybuy li { padding: 14px 10px; }
	.ms-whybuy h3 { font-size: 15px; line-height: 20px; }
	.ms-whybuy p { font-size: 13px; line-height: 18px; }
}
@media (max-width: 640px) {
	.ms-whybuy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ms-whybuy li + li { border-left: 0; }
	.ms-whybuy li:nth-child(even) { border-left: 1px solid var(--offer-edge); }
	.ms-whybuy li:nth-child(n+3) { border-top: 1px solid var(--offer-edge); }
	.ms-home__head--center .ms-home__rule { min-width: 24px; }
	.ms-whybuy li { gap: 8px; padding: 12px 10px; }
	.ms-whybuy__icon { width: 34px; height: 34px; }
	.ms-whybuy__icon .ms-icon { width: 17px; height: 17px; }
	.ms-whybuy h3 { margin: 0; font-size: 14px; line-height: 19px; }
	.ms-whybuy p { display: none; }
}

/* Section heading without a link: centred between two lines (the left one mirrors the right). */
.ms-home__head--center h2 { flex: 0 1 auto; text-align: center; }
.ms-home__rule--start { background: linear-gradient(270deg, var(--orange) 0, var(--orange) 40px, var(--offer-edge) 40px, var(--line) 45%, transparent); }


/* Homepage reviews heading: centred like the other link-less headings, lines on both sides, score line under it. */
.ms-home .ms-rslider__head { justify-content: center; }
.ms-home .ms-rslider__head > div { flex: 1; text-align: center; }
.ms-home .ms-rslider__head h2 { display: flex; align-items: center; gap: 12px; }
.ms-home .ms-rslider__head h2::before, .ms-home .ms-rslider__head h2::after { content: ""; flex: 1; min-width: 24px; height: 2px; border-radius: 2px; }
.ms-home .ms-rslider__head h2::before { background: linear-gradient(270deg, var(--orange) 0, var(--orange) 40px, var(--offer-edge) 40px, var(--line) 45%, transparent); }
.ms-home .ms-rslider__head h2::after { background: linear-gradient(90deg, var(--orange) 0, var(--orange) 40px, var(--offer-edge) 40px, var(--line) 45%, transparent); }
.ms-home .ms-rslider__score { justify-content: center; margin-top: 4px; }

/* Homepage end: the space above the footer is the same single gap as between sections. */
.site-main.ms-home, .site-main.ms-blog { padding-bottom: var(--home-gap); }
.ms-home > section:last-child { margin-bottom: 0; }
.ms-home + .ms-footer, .ms-blog + .ms-footer { margin-top: 0; }
.ms-home > section:last-child > :last-child { margin-bottom: 0; }

/* Homepage "News & guides": blog post cards in a slider (3 on desktop, 2 on tablet, swipe on phones). */
.ms-postslider { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ms-postslider::-webkit-scrollbar { display: none; }
.ms-postslider li { display: flex; scroll-snap-align: start; }
.ms-postcard { display: flex; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); color: var(--title); text-decoration: none; transition: border-color .2s, box-shadow .2s, translate .2s; }
.ms-postcard:hover { border-color: var(--offer-edge); box-shadow: 0 14px 28px -14px rgba(245, 74, 0, .35); translate: 0 -3px; }
.ms-postcard__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); }
.ms-postcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .3s; }
.ms-postcard:hover .ms-postcard__media img { scale: 1.04; }
.ms-postcard__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 16px 14px; }
.ms-postcard__meta { display: flex; align-items: center; gap: 10px; color: var(--slate); font-size: 13px; line-height: 18px; }
.ms-postcard__cat { padding: 2px 10px; border: 1px solid var(--offer-edge); border-radius: 9999px; background: var(--offer-bg); color: var(--orange); font-size: 12px; font-weight: 600; }
.ms-postcard__title { display: -webkit-box; overflow: hidden; font-size: 17px; font-weight: 600; line-height: 23px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ms-postcard:hover .ms-postcard__title { color: var(--orange); }
.ms-postcard__excerpt { display: -webkit-box; overflow: hidden; color: var(--slate); font-size: 14px; line-height: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ms-postcard__more { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 2px; color: var(--orange); font-size: 14px; font-weight: 600; }
.ms-postcard__more .ms-icon { width: 15px; height: 15px; transition: translate .2s; }
.ms-postcard:hover .ms-postcard__more .ms-icon { translate: 3px 0; }
@media (max-width: 1023px) {
	.ms-postslider { grid-auto-columns: calc((100% - 16px) / 2); contain: paint; }
}
@media (max-width: 640px) {
	.ms-postslider { grid-auto-columns: 82%; gap: 12px; }
	.ms-postcard__body { padding: 10px 12px 12px; }
	.ms-postcard__title { font-size: 16px; line-height: 21px; }
}

/* ------------------------------------------------------------------ blog list and posts */
.site-main.ms-blog { padding-top: 12px; }
.ms-blog .ms-breadcrumbs { margin: 0 0 16px; color: var(--slate); font-size: 14px; }
.ms-blog .ms-breadcrumbs a { color: var(--slate); }
.ms-blog .ms-breadcrumbs a:hover { color: var(--orange); }

/* Blog list: centred heading, chips, featured post, card grid. */
.ms-bloghead { max-width: 760px; margin: 0 auto var(--home-gap); text-align: center; }
.ms-bloghead h1 { margin: 0 0 8px; font-size: 40px; line-height: 1.1; }
.ms-bloghead > p { margin: 0 0 16px; color: var(--slate); font-size: 17px; line-height: 26px; }
.ms-blogchips { justify-content: center; }
.ms-blogchips a span { margin-left: 6px; color: var(--slate); font-size: 12px; }
.ms-blogchips a[aria-current] { border-color: var(--orange); background: var(--orange); color: var(--on-orange); }
.ms-blogchips a[aria-current] span { color: var(--on-orange); }

.ms-postfeature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin: 0 0 var(--home-gap); overflow: hidden; border: 1px solid var(--offer-edge); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--white) 45%, var(--offer-bg)); }
.ms-postfeature__media { display: block; overflow: hidden; background: var(--paper); }
.ms-postfeature__media img { display: block; width: 100%; height: 100%; min-height: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: scale .3s; }
.ms-postfeature:hover .ms-postfeature__media img { scale: 1.03; }
.ms-postfeature__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 24px 28px; }
.ms-postfeature__body .ms-postcard__meta { flex-wrap: wrap; margin: 0; }
.ms-postfeature__badge { padding: 2px 10px; border-radius: 9999px; background: var(--orange); color: var(--on-orange); font-size: 12px; font-weight: 600; }
.ms-postfeature h2 { margin: 0; font-size: 28px; line-height: 1.2; }
.ms-postfeature h2 a { color: var(--title); text-decoration: none; }
.ms-postfeature h2 a:hover { color: var(--orange); }
.ms-postfeature__excerpt { margin: 0 0 4px; color: var(--slate); font-size: 16px; line-height: 24px; }
.ms-postfeature .ms-btn .ms-icon, .ms-articlecta .ms-btn .ms-icon { width: 18px; height: 18px; margin-left: 8px; }
a.ms-postcard__cat { text-decoration: none; }
a.ms-postcard__cat:hover { background: var(--orange); color: var(--on-orange); }

.ms-postgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ms-postgrid li { display: flex; }
.ms-blog .ms-pagination ul { justify-content: center; margin: var(--home-gap) 0 0; }
.ms-blogempty { margin: 0; color: var(--slate); text-align: center; }

/* Single post: centred heading, cover, contents list beside the text, shop prompt. */
.ms-articlehead { display: flex; flex-direction: column; align-items: center; max-width: 780px; margin: 0 auto 20px; text-align: center; }
.ms-articlehead h1 { margin: 10px 0 8px; font-size: 40px; line-height: 1.15; }
.ms-articlehead__lede { margin: 0 0 10px; color: var(--slate); font-size: 18px; line-height: 27px; }
.ms-articlehead__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 0; color: var(--slate); font-size: 14px; line-height: 20px; }
.ms-articlehead__meta > * + *::before { content: "·"; margin: 0 8px; }
.ms-articlecover { max-width: 960px; margin: 0 auto 28px; }
.ms-articlecover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); }
.ms-articlebody { display: grid; grid-template-columns: 220px minmax(0, 700px); gap: 40px; justify-content: center; }
.ms-articlebody--single { grid-template-columns: minmax(0, 720px); }
.ms-toc { position: sticky; top: 96px; align-self: start; padding: 2px 0 2px 14px; border-left: 2px solid var(--offer-edge); }
.ms-toc__title { margin: 0 0 8px; color: var(--slate); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ms-toc ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ms-toc a { color: var(--char); font-size: 14px; line-height: 20px; text-decoration: none; }
.ms-toc a:hover { color: var(--orange); }

.ms-prose { color: var(--ink); font-size: 17px; line-height: 28px; }
.ms-prose > :first-child { margin-top: 0; }
.ms-prose h2 { margin: 32px 0 10px; font-size: 24px; line-height: 1.3; scroll-margin-top: 96px; }
.ms-prose h3 { margin: 24px 0 8px; font-size: 20px; line-height: 1.35; }
.ms-prose p { margin: 0 0 16px; }
.ms-prose ul, .ms-prose ol { margin: 0 0 16px; padding-left: 22px; }
.ms-prose li { margin: 0 0 6px; }
.ms-prose li::marker { color: var(--orange); }
.ms-prose a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.ms-prose code { padding: 2px 6px; border-radius: 4px; background: var(--paper); font-family: var(--font-mono); font-size: .88em; }
.ms-prose blockquote { margin: 0 0 16px; padding: 4px 0 4px 16px; border-left: 3px solid var(--orange); color: var(--slate); }
.ms-prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }

.ms-articlecta { display: flex; align-items: center; gap: 16px; max-width: 960px; margin: 32px auto 0; padding: 18px 20px; border: 1px solid var(--offer-edge); border-radius: var(--radius-lg); background: var(--offer-bg); }
.ms-articlecta > div { flex: 1; min-width: 0; }
.ms-articlecta__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; background: linear-gradient(140deg, var(--orange-hi), var(--orange-lo)); color: var(--on-orange); }
.ms-articlecta__icon .ms-icon { width: 22px; height: 22px; }
.ms-articlecta p { margin: 0; color: var(--slate); font-size: 15px; line-height: 22px; }
.ms-articlecta .ms-articlecta__title { color: var(--ink); font-size: 18px; font-weight: 600; line-height: 24px; }
.ms-articlecta .ms-btn { flex: none; }
.ms-articlemore { margin-bottom: 0; }

@media (max-width: 1023px) {
	.ms-postfeature__body { gap: 8px; padding: 18px; }
	.ms-postfeature h2 { font-size: 22px; }
	.ms-postfeature__excerpt { font-size: 15px; line-height: 22px; }
	.ms-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ms-articlebody { grid-template-columns: minmax(0, 720px); gap: 20px; }
	.ms-toc { position: static; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--radius-lg); background: var(--gray-50); }
}
@media (max-width: 640px) {
	.ms-bloghead h1, .ms-articlehead h1 { font-size: 30px; }
	.ms-bloghead > p { font-size: 16px; line-height: 24px; }
	.ms-blogchips { flex-wrap: nowrap; justify-content: flex-start; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
	.ms-blogchips li { flex: none; }
	.ms-postfeature { grid-template-columns: minmax(0, 1fr); }
	.ms-postfeature__body { padding: 16px; }
	.ms-postfeature .ms-btn { width: 100%; }
	.ms-postgrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.ms-articlehead__lede { font-size: 16px; line-height: 24px; }
	.ms-articlecover { margin: 0 -16px 20px; }
	.ms-articlecover img { border-radius: 0; }
	.ms-prose { font-size: 16px; line-height: 26px; }
	.ms-prose h2 { font-size: 21px; }
	.ms-articlecta { flex-wrap: wrap; }
	.ms-articlecta .ms-btn { width: 100%; }
}

/* Small laptops: tighter menu items so the whole menu stays on one row. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.ms-menu > li > a { gap: 4px; padding: 0 7px; }
	/* NEW / HOT stay next to the label, a little smaller, so the whole menu still fits on one row. */
	.ms-menu > li > a .ms-navbadge { --badge-y: -5px; margin-left: -2px; padding: 0 4px; font-size: 9px; line-height: 13px; }
}

/* Footer support channels under the brand line: WhatsApp, email and the contact form. */
.ms-footer__help { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; color: var(--ink); font-weight: 600; }
.ms-footer__dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--badge-success); box-shadow: 0 0 0 3px rgba(0, 201, 80, .18); }
.ms-footer__contact { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ms-footer__contact a, .ms-footer__contact .is-soon { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 9999px; background: var(--white); color: var(--ink); font-weight: 600; line-height: 18px; text-decoration: none; transition: border-color .15s, color .15s; }
.ms-footer__contact a:hover { border-color: var(--offer-edge); color: var(--orange); }
.ms-footer__contact .is-soon { color: var(--slate); }
.ms-footer__contact .ms-footer__icon + span { display: grid; min-width: 0; }
.ms-footer__contact small { color: var(--slate); font-size: 12px; font-weight: 500; line-height: 15px; }
.ms-footer__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9999px; background: var(--offer-bg); color: var(--orange); }
.ms-footer__icon .ms-icon { width: 17px; height: 17px; }
.ms-footer__contact a:hover .ms-footer__icon { background: var(--orange); color: var(--on-orange); }
.ms-footer__contact .is-soon .ms-footer__icon { background: var(--paper); color: var(--slate); }
@media (max-width: 1023px) {
	.ms-footer__contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ms-footer__contact li { display: flex; }
	.ms-footer__contact a, .ms-footer__contact .is-soon { width: 100%; padding: 8px 12px 8px 8px; border-radius: 14px; }
	.ms-footer__bottom { flex-direction: column; justify-content: center; text-align: center; }
	.ms-footer__pay { justify-content: center; }
}
@media (max-width: 640px) {
	.ms-footer__contact { grid-template-columns: minmax(0, 1fr); }
	.ms-footer__contact a, .ms-footer__contact .is-soon { padding: 6px 14px 6px 6px; border-radius: 9999px; }
	.ms-footer__pay { flex-direction: column; }
}


/* ------------------------------------------------------------------ thank-you page */
.ms-thanks { display: grid; gap: 16px; max-width: 960px; margin: 0 auto; }
.ms-thanks h2 { margin: 0; font-size: 20px; line-height: 28px; }
.ms-thanks__hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; align-items: center; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.ms-thanks__hero h2 { font-size: 24px; line-height: 31px; }
.ms-thanks__hero p { margin: 4px 0 0; color: var(--slate); font-size: 15px; line-height: 22px; }
.ms-thanks__hero p strong { color: var(--ink); }
.ms-thanks__badge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 9999px; background: var(--badge-success); color: var(--white); box-shadow: 0 0 0 6px rgba(0, 201, 80, .14); }
.ms-thanks__badge .ms-icon { width: 28px; height: 28px; stroke-width: 2.5; }
.ms-thanks__hero--failed .ms-thanks__badge { background: var(--red); box-shadow: 0 0 0 6px var(--red-tint); }
.ms-thanks__actions { display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; }
.ms-thanks__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1 / -1; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.ms-thanks__facts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.ms-thanks__facts dt { color: var(--slate); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.ms-thanks__facts dd { margin: 2px 0 0; color: var(--ink); font-size: 15px; font-weight: 600; }

.ms-thanks__card { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.ms-thanks__card > h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 18px; line-height: 24px; }
.ms-thanks__card > h2 .ms-icon { width: 20px; height: 20px; color: var(--orange); }
.ms-thanks__downloads { border-color: var(--offer-edge); background: linear-gradient(160deg, var(--white) 50%, var(--offer-bg)); }
.ms-thanks__downloads ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ms-thanks__downloads li { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.ms-thanks__downloads img { flex: none; width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover; }
.ms-thanks__dlinfo { display: grid; flex: 1; min-width: 0; }
.ms-thanks__dlinfo strong { overflow: hidden; color: var(--ink); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.ms-thanks__dlinfo span { color: var(--slate); font-size: 13px; }
.ms-thanks__dlbtn { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--offer-edge); border-radius: var(--radius); background: var(--offer-bg); color: var(--orange); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s, color .15s; }
.ms-thanks__dlbtn:hover { background: var(--orange); color: var(--on-orange); }
.ms-thanks__dlbtn .ms-icon { width: 17px; height: 17px; }

.ms-thanks__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ms-thanks__grid > .ms-thanks__card { display: flex; flex-direction: column; }
.ms-thanks__items { margin: 0; padding: 0; list-style: none; }
.ms-thanks__items li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ms-thanks__items li > span:first-child { display: grid; color: var(--ink); font-weight: 500; }
.ms-thanks__items small { color: var(--slate); font-size: 13px; font-weight: 400; }
.ms-thanks__totals { margin: 8px 0 0; }
.ms-thanks__totals div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; color: var(--slate); font-size: 14px; }
.ms-thanks__totals dd { margin: 0; color: var(--ink); }
.ms-thanks__totals .is-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink); font-size: 16px; font-weight: 700; }
.ms-thanks__totals .is-total dd { color: var(--price); }
.ms-thanks__billed { margin: auto 0 0; padding-top: 12px; color: var(--slate); font-size: 13px; }
.ms-thanks__steps { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: step; }
.ms-thanks__steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; counter-increment: step; }
.ms-thanks__steps li::before { content: counter(step); grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px; background: var(--offer-bg); color: var(--orange); font-size: 13px; font-weight: 700; }
.ms-thanks__steps strong { color: var(--ink); font-size: 15px; }
.ms-thanks__steps span { color: var(--slate); font-size: 14px; line-height: 20px; }
.ms-thanks__account { width: 100%; }
.ms-thanks__account .ms-icon { width: 18px; height: 18px; margin-left: 8px; }
.ms-thanks__help { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.ms-thanks__help p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; }
.ms-thanks__help p + p { margin-top: 4px; }
.ms-thanks__help strong { color: var(--ink); }
.ms-thanks__help a { color: var(--orange); }
@media (max-width: 640px) {
	.ms-thanks__grid { grid-template-columns: minmax(0, 1fr); }
	.ms-thanks__hero { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 18px 16px; text-align: center; }
	.ms-thanks__hero h2 { font-size: 20px; line-height: 27px; }
	.ms-thanks__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; width: 100%; text-align: left; }
	.ms-thanks__facts div:nth-child(3) { padding-left: 0; border-left: 0; }
	.ms-thanks__card { padding: 16px; }
	.ms-thanks__downloads li { flex-wrap: wrap; }
	.ms-thanks__dlbtn { justify-content: center; width: 100%; }
}
.ms-checkout-page__head--center { justify-content: center; text-align: center; }
.ms-thanks__hero--waiting .ms-thanks__badge { background: linear-gradient(140deg, var(--orange-hi), var(--orange-lo)); color: var(--on-orange); box-shadow: 0 0 0 6px var(--offer-bg); }
.ms-thanks__hero--waiting .ms-thanks__badge .ms-icon { stroke-width: 2; }

/* Search: results page and suggestions while typing. */
.ms-shop__found { margin: 6px 0 0; color: var(--slate); font-size: 15px; }
.ms-shop__layout--full { grid-template-columns: minmax(0, 1fr); }
.ms-noresults { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; padding: 36px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); text-align: center; }
.ms-noresults > .ms-icon { width: 48px; height: 48px; padding: 12px; border-radius: 9999px; background: var(--offer-bg); color: var(--orange); }
.ms-noresults h2 { margin: 4px 0 0; font-size: 24px; overflow-wrap: anywhere; }
.ms-noresults p { max-width: 520px; margin: 0; color: var(--slate); }
.ms-noresults__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.ms-noresults__cats a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9999px; background: var(--white); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color .15s ease-out, border-color .15s ease-out; }
.ms-noresults__cats a:hover { background: var(--paper); border-color: var(--orange); }
.ms-noresults__cats .ms-icon { width: 18px; height: 18px; color: var(--orange); }
.ms-noresults p.ms-noresults__help { margin-top: 8px; font-size: 15px; }
.ms-noresults__popular { margin-top: var(--home-gap, 36px); }
.ms-noresults__popular > h2 { margin: 0 0 16px; font-size: 24px; text-align: center; }
.ms-suggest { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; max-height: min(520px, 70vh); overflow-y: auto; overscroll-behavior: contain; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 12px 28px rgba(13, 15, 18, .14); text-align: left; }
.ms-suggest[hidden] { display: none; }
.ms-suggest__head { position: sticky; top: 0; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--white); color: var(--slate); font-size: 14px; overflow-wrap: anywhere; }
.ms-suggest__label { margin: 0; padding: 14px 16px 6px; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ms-suggest__list { margin: 0; padding: 0; list-style: none; }
.ms-suggest__list li + li { border-top: 1px solid var(--line); }
.ms-suggest__item { display: flex; align-items: center; gap: 14px; padding: 10px 16px; color: var(--ink); text-decoration: none; }
.ms-suggest__item:hover, .ms-suggest__item.is-active { background: var(--paper); }
.ms-suggest__item img { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); background: var(--paper); }
.ms-suggest__text { display: grid; gap: 3px; min-width: 0; }
.ms-suggest__name { overflow: hidden; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ms-suggest__item:hover .ms-suggest__name, .ms-suggest__item.is-active .ms-suggest__name { color: var(--orange); }
.ms-suggest__price { display: flex; gap: 8px; font-size: 14px; }
.ms-suggest__now { color: var(--price); font-weight: 600; }
.ms-suggest__price del { color: var(--price-old); }
.ms-suggest__empty { margin: 0; padding: 14px 16px; color: var(--slate); font-size: 15px; }
.ms-suggest__all { position: sticky; bottom: 0; display: block; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--white); color: var(--orange); font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; }
.ms-suggest__all:hover { background: var(--paper); }
@media (max-width: 767px) {
	.ms-suggest { max-height: 65vh; }
	.ms-suggest__item { gap: 12px; padding: 10px 12px; }
	.ms-suggest__item img { width: 48px; height: 48px; }
	.ms-suggest__name { font-size: 15px; }
	.ms-noresults h2 { font-size: 20px; }
}

/* 404 (404.php): the "no results" card with a big code, a search and ways back. */
.ms-lost { --home-gap: 36px; padding: var(--home-gap) 0; }
.ms-lost__card { padding: 40px 24px 32px; }
.ms-noresults .ms-lost__code { margin: 0; background: linear-gradient(140deg, var(--orange-hi), var(--orange-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 88px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.ms-lost__card h1 { margin: 4px 0 0; font-size: 32px; line-height: 40px; }
.ms-lost__search { display: flex; gap: 8px; width: 100%; max-width: 520px; margin: 10px 0 4px; }
.ms-lost__search input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); font: 400 16px/1 var(--font-sans); -webkit-appearance: none; appearance: none; }
.ms-lost__search input::placeholder { color: var(--slate); opacity: 1; }
.ms-lost__search input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(255, 137, 4, .5); outline: 0; }
.ms-lost__search .ms-btn { flex: none; gap: 8px; }
.ms-lost__search .ms-icon { width: 18px; height: 18px; }
.ms-noresults p.ms-lost__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 10px; font-size: 15px; }
.ms-lost__links a { color: var(--orange); font-weight: 600; }
@media (max-width: 1023px) {
	.ms-lost { --home-gap: 28px; }
}
@media (max-width: 640px) {
	.ms-lost { --home-gap: 24px; }
	.ms-lost__card { padding: 28px 16px 24px; }
	.ms-lost__code { font-size: 64px; }
	.ms-lost__card h1 { font-size: 24px; line-height: 32px; }
	.ms-lost__search .ms-btn { padding: 0 14px; }
}

/* ------------------------------------------------------------------ wallet: cart box, My account page, email popup */
.ms-wallet-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--offer-edge); border-radius: var(--radius-lg); background: var(--offer-bg); }
.ms-wallet-box__icon { display: inline-flex; color: var(--orange); }
.ms-wallet-box__icon .ms-icon { width: 22px; height: 22px; }
.ms-wallet-box__text { display: grid; gap: 2px; }
.ms-wallet-box__text strong { color: var(--ink); font-size: 14px; line-height: 19px; }
.ms-wallet-box__text span { color: var(--slate); font-size: 13px; line-height: 18px; }
.ms-wallet-box__track { grid-column: 1 / -1; height: 8px; margin: 2px 0 0; }
.ms-wallet-box.is-applied .ms-wallet-box__text strong::before { content: "\2713\00a0"; color: var(--orange); }
.ms-cdrawer .ms-wallet-box { margin: 0 0 14px; }

.ms-wallet { display: grid; gap: 20px; margin-top: 24px; }
.ms-wallet__card { display: grid; justify-items: start; gap: 6px; padding: 24px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--orange-hi), var(--orange-lo)); color: var(--white); }
.ms-wallet__label { font-size: 14px; font-weight: 600; opacity: .9; }
.ms-wallet__amount { font-size: 44px; font-weight: 700; line-height: 1.1; }
.ms-wallet__next { font-size: 14px; opacity: .95; }
.ms-wallet__card .ms-btn { margin-top: 10px; background: var(--white); color: var(--orange-lo); }
.ms-wallet__card .ms-btn:hover { background: var(--paper); }
.ms-wallet__how { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ms-wallet__how li { display: flex; gap: 10px; color: var(--slate); font-size: 15px; line-height: 22px; }
.ms-wallet__how strong { color: var(--ink); }
.ms-wallet__how .ms-icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--orange); }
.ms-wallet__title { margin: 4px 0 0; font-size: 18px; font-weight: 600; }
.ms-wallet__lots { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ms-wallet__lots li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.ms-wallet__lots small, .ms-wallet__history small { display: block; color: var(--slate); font-size: 13px; }
.ms-wallet__expiry { color: var(--slate); font-size: 13px; }
.ms-wallet__history { width: 100%; border-collapse: collapse; font-size: 15px; }
.ms-wallet__history th, .ms-wallet__history td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ms-wallet__history th { color: var(--slate); font-size: 13px; font-weight: 600; }
.ms-wallet__history td:last-child, .ms-wallet__history th:last-child { text-align: right; white-space: nowrap; }
.ms-wallet__history .is-plus { color: var(--ink); font-weight: 600; }
.ms-wallet__history .is-minus { color: var(--slate); }
.ms-wallet__empty { margin: 0; color: var(--slate); }
@media (max-width: 640px) {
	.ms-wallet__card { padding: 20px; }
	.ms-wallet__amount { font-size: 36px; }
	.ms-wallet__lots li { grid-template-columns: minmax(0, 1fr) auto; }
	.ms-wallet__expiry { grid-column: 1; grid-row: 2; }
}

/* Email popup: a centred card on larger screens, a bottom sheet on phones (it never covers the whole page there). */
.ms-wpop[hidden] { display: none; }
.ms-wpop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.ms-wpop__backdrop { position: absolute; inset: 0; background: rgba(9, 9, 11, .45); }
.ms-wpop__panel { position: relative; width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px 26px; border-radius: 24px; background: var(--white); box-shadow: 0 25px 50px -12px rgba(9, 9, 11, .35); text-align: center; animation: ms-wpop-in .25s ease-out; }
@keyframes ms-wpop-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.ms-wpop__close { position: absolute; top: 12px; right: 12px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 9999px; background: var(--white); color: var(--ink); box-shadow: 0 2px 8px rgba(9, 9, 11, .15); cursor: pointer; }
.ms-wpop__close .ms-icon { width: 18px; height: 18px; }
.ms-wpop__card { position: relative; display: grid; gap: 4px; margin: 0 0 18px; padding: 18px 20px 14px; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg, var(--orange-hi), var(--orange-lo)); color: var(--white); text-align: left; box-shadow: 0 16px 30px -12px rgba(245, 74, 0, .55); }
.ms-wpop__card::after { content: ""; position: absolute; top: -60px; right: -50px; width: 190px; height: 190px; border-radius: 9999px; background: rgba(255, 255, 255, .12); }
.ms-wpop__card-top, .ms-wpop__card-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ms-wpop__card-top { padding-right: 34px; } /* Room for the close button. */
.ms-wpop__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.ms-wpop__logo { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--white); color: var(--orange); }
.ms-wpop__logo .ms-icon { width: 17px; height: 17px; }
.ms-wpop__pill { padding: 3px 10px; border-radius: 9999px; background: rgba(255, 255, 255, .22); font-size: 13px; font-weight: 600; }
.ms-wpop__amount { position: relative; z-index: 1; font-size: 52px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.ms-wpop__card-foot { padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .45); font-size: 14px; }
.ms-wpop__title { margin: 0 0 8px; font-size: 26px; font-weight: 700; line-height: 1.2; }
.ms-wpop__lede { margin: 0 0 16px; color: var(--slate); font-size: 16px; line-height: 24px; }
.ms-wpop__form { display: grid; gap: 10px; }
.ms-wpop__form input[type="email"] { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); font: 400 16px/1 var(--font-sans); color: var(--ink); }
.ms-wpop__form input[type="email"]:focus { border-color: var(--ring); outline: 3px solid rgba(255, 137, 4, .5); outline-offset: 0; }
.ms-wpop__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ms-wpop__consent { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--slate); font-size: 14px; cursor: pointer; }
.ms-wpop__consent input { width: 16px; height: 16px; accent-color: var(--orange); }
.ms-wpop__error { margin: 0; color: var(--red); font-size: 14px; }
.ms-wpop__submit { width: 100%; min-height: 48px; font-size: 16px; }
.ms-wpop__skip { margin: 12px auto 0; padding: 6px 10px; border: 0; background: none; color: var(--slate); font: 500 15px/1.2 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ms-wpop__skip:hover { color: var(--ink); }
.ms-wpop__fine { margin: 12px 0 0; color: var(--slate); font-size: 12px; line-height: 18px; }
.ms-wpop__fine a { color: var(--slate); }
@keyframes ms-wpop-up { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 640px) {
	.ms-wpop { align-items: end; padding: 0; }
	.ms-wpop__panel { max-width: none; max-height: 88dvh; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; animation-name: ms-wpop-up; }
	.ms-wpop__card { margin-bottom: 14px; padding: 14px 16px 12px; }
	.ms-wpop__amount { font-size: 40px; }
	.ms-wpop__title { font-size: 22px; }
	.ms-wpop__lede { margin-bottom: 12px; font-size: 15px; line-height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.ms-wpop__panel { animation: none; }
}

/* Cashback previews: drawer mini wallet card (B), cart coin box (A), checkout receipt stub (C), product pill. */
.ms-count { font-variant-numeric: tabular-nums; }
.ms-wcard { position: relative; overflow: hidden; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--orange-hi), var(--orange-lo)); color: var(--white); }
.ms-wcard__shine { position: absolute; inset: 0 auto 0 0; width: 40%; background: rgba(255, 255, 255, .2); transform: skewX(-20deg) translateX(-160%); animation: ms-shine 2.8s ease-in-out 2; pointer-events: none; }
@keyframes ms-shine { 0% { transform: skewX(-20deg) translateX(-160%); } 60%, 100% { transform: skewX(-20deg) translateX(360%); } }
.ms-wcard__top, .ms-wcard__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.ms-wcard__top span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.ms-wcard__top .ms-icon { width: 16px; height: 16px; }
.ms-wcard__amount { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.ms-wcard__amount strong { font-size: 26px; font-weight: 700; line-height: 1.2; }
.ms-wcard__amount > span { font-size: 13px; }
.ms-wcard__foot { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, .5); font-weight: 500; }

.ms-coinbox { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--offer-edge); border-radius: var(--radius-lg); background: var(--offer-bg); }
.ms-coinbox > div { display: grid; }
.ms-coinbox__coin { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--orange); color: var(--white); animation: ms-coin-pop .6s ease-out; }
.ms-coinbox__coin .ms-icon { width: 22px; height: 22px; }
@keyframes ms-coin-pop { 0% { transform: scale(.6) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.12) rotate(6deg); } 100% { transform: none; opacity: 1; } }
.ms-coinbox__label { color: var(--slate); font-size: 13px; line-height: 18px; }
.ms-coinbox__amount { color: var(--orange-lo); font-size: 22px; font-weight: 700; line-height: 1.25; }

.ms-stub-wrap { margin: 0 0 14px; }
.ms-stub { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1.5px dashed var(--orange); border-radius: var(--radius); color: var(--orange-lo); font-size: 14px; font-weight: 600; }
.ms-stub span { display: inline-flex; align-items: center; gap: 6px; }
.ms-stub .ms-icon { width: 16px; height: 16px; }
.ms-stub strong { flex: none; font-size: 16px; white-space: nowrap; }
.ms-stub__note { margin: 6px 0 0; color: var(--slate); font-size: 12px; font-weight: 400; }

.ms-cbpill { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 5px 12px; border: 1px solid var(--offer-edge); border-radius: 9999px; background: var(--offer-bg); color: var(--orange-lo); font-size: 14px; }
.ms-cbpill .ms-icon { width: 16px; height: 16px; color: var(--orange); }
.ms-cbpill strong { font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
	.ms-wcard__shine, .ms-coinbox__coin { animation: none; }
}