/* Kopi Saigon Mart (design J, white page with soft cream cards since v1.3.0). Every rule is scoped to .ksm-root, .ksm-drawer, .ksm-sheet, .ksm-toast,
   .ksm-cartbar or .ksm-cartbtn so nothing else on the site changes. "html" in front of the generic resets
   beats the theme's own button and link colours (Hello Elementor turns buttons pink).
   Text colours are picked to pass WCAG AA contrast on cream and white (4.5:1 or more): the site's bright
   red (#ee3f24) is only 3.2:1 on cream, so sale prices use a darker red. */

.ksm-root,
.ksm-drawer,
.ksm-sheet,
.ksm-toast,
.ksm-cartbar {
	--ksm-gold: #e6b549;
	--ksm-brown: #783819;
	--ksm-card: #f8f1e7;
	--ksm-card-hover: #f1e5d4;
	--ksm-maroon: #4d0202;
	--ksm-text: #3b1d10;
	--ksm-muted: #6b5a50;
	--ksm-sale: #b3260d;
	--ksm-ok: #2e7d32;
	--ksm-hover: #5e2a12;
	--ksm-line: #783719;
	--ksm-soft: rgba(120, 56, 25, 0.18);
	--ksm-mont: "Montserrat", sans-serif;
	--ksm-ace: "Acephimere", sans-serif;
	box-sizing: border-box;
	color: var(--ksm-text);
	font-family: var(--ksm-ace);
}

.ksm-root *,
.ksm-root *::before,
.ksm-root *::after,
.ksm-drawer *,
.ksm-drawer *::before,
.ksm-drawer *::after,
.ksm-sheet *,
.ksm-sheet *::before,
.ksm-sheet *::after,
.ksm-toast *,
.ksm-cartbar * {
	box-sizing: border-box;
}

html .ksm-root button,
html .ksm-drawer button,
html .ksm-sheet button,
html .ksm-toast button,
html button.ksm-cartbar,
html button.ksm-cartbtn {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}

html .ksm-root button:hover,
html .ksm-root button:focus,
html .ksm-drawer button:hover,
html .ksm-drawer button:focus,
html .ksm-sheet button:hover,
html .ksm-sheet button:focus,
html .ksm-toast button:hover,
html .ksm-toast button:focus,
html button.ksm-cartbtn:hover,
html button.ksm-cartbtn:focus {
	background: transparent;
	color: inherit;
}

html .ksm-root a,
html .ksm-root a:hover,
html .ksm-drawer a,
html .ksm-drawer a:hover,
html .ksm-sheet a,
html .ksm-sheet a:hover {
	color: inherit;
	text-decoration: none;
}

.ksm-root p,
.ksm-root h1,
.ksm-root h2,
.ksm-root h3,
.ksm-root ul,
.ksm-drawer p,
.ksm-drawer h2,
.ksm-drawer ul,
.ksm-sheet p,
.ksm-sheet h2,
.ksm-sheet fieldset,
.ksm-toast p {
	margin: 0;
	padding: 0;
}

.ksm-root ul,
.ksm-drawer ul {
	list-style: none;
}

.ksm-root img,
.ksm-drawer img,
.ksm-sheet img,
.ksm-toast img {
	display: block;
	max-width: 100%;
	height: auto;
}

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

.ksm-root {
	background-color: #fff;
}

/* Prices, shared by cards, product page, sheet and cart */
.ksm-root .ksm-sale,
.ksm-sheet .ksm-sale {
	color: var(--ksm-sale);
}

.ksm-root .ksm-was,
.ksm-sheet .ksm-was {
	margin-left: 4px;
	color: var(--ksm-muted);
	font-size: 0.8em;
	font-weight: 500;
}

/* ---------- Mart list page ---------- */
.ksm-shop .ksm-wrap {
	width: min(100% - 40px, 1140px);
	margin: 0 auto;
	padding: 72px 0 90px;
}

.ksm-root .ksm-crumbs {
	color: var(--ksm-muted);
	font-family: var(--ksm-ace);
	font-size: 15px;
	line-height: 1.5;
}

html .ksm-root .ksm-crumbs a,
html .ksm-root .ksm-back a {
	color: var(--ksm-brown);
	text-decoration: underline;
	text-underline-offset: 3px;
}

html .ksm-root .ksm-crumbs a:hover,
html .ksm-root .ksm-back a:hover {
	color: var(--ksm-maroon);
}

/* Centred title in the homepage's Montserrat 900 capitals, one line per word group. The size follows
   the screen width so "KOPI SAIGON" always fits on one line, from phones up to 112px on desktop. */
.ksm-shop .ksm-top {
	padding: 0 0 30px;
	text-align: center;
}

.ksm-shop .ksm-h1 {
	margin-bottom: 18px;
	color: var(--ksm-maroon);
	font-family: var(--ksm-mont);
	font-size: clamp(40px, 12.5vw, 112px);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.ksm-shop .ksm-h1 span {
	display: block;
}

/* Letter spacing also follows the last letter, so the same space on the left keeps the line centred. */
.ksm-shop .ksm-lead {
	padding-left: 0.28em;
	color: var(--ksm-brown);
	font-family: var(--ksm-mont);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.ksm-shop .ksm-bar {
	margin-bottom: 40px;
}

/* Filter buttons wrap instead of hiding off-screen, so every choice stays visible. */
.ksm-shop .ksm-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

html .ksm-root .ksm-chip-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: var(--ksm-card);
	color: var(--ksm-text);
	font-family: var(--ksm-mont);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

html .ksm-root .ksm-chip-btn:hover {
	border-color: transparent;
	background: var(--ksm-card-hover);
	color: var(--ksm-text);
}

html .ksm-root .ksm-chip-btn[aria-pressed="true"],
html .ksm-root .ksm-chip-btn[aria-pressed="true"]:hover {
	border-color: var(--ksm-maroon);
	background: var(--ksm-maroon);
	color: #fff;
}

.ksm-shop .ksm-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.ksm-shop .ksm-card {
	display: flex;
	flex-direction: column;
	padding: 14px 14px 16px;
	border-radius: 18px;
	background: var(--ksm-card);
}

.ksm-shop .ksm-card[hidden],
.ksm-shop .ksm-sec[hidden] {
	display: none;
}

.ksm-shop .ksm-pic {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	margin-bottom: 14px;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
}

.ksm-shop .ksm-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
	.ksm-shop .ksm-pic img {
		transition: transform 0.3s ease;
	}

	.ksm-shop .ksm-card:not(.ksm-out):hover .ksm-pic img {
		transform: scale(1.03);
	}
}

/* Badges say it in words, not only with colour. Sold-out photos keep their colours; the badge and the
   "Sold out" button carry the message. */
.ksm-root .ksm-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 9px;
	border-radius: 6px;
	font-family: var(--ksm-mont);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
}

.ksm-root .ksm-badge-save {
	background: var(--ksm-gold);
	color: var(--ksm-maroon);
}

/* Sold out: a band across the bottom of the photo. The extra left padding balances the letter
   spacing after the last letter so the words stay centred. */
.ksm-root .ksm-badge-out {
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 9px 0 9px 0.24em;
	border-radius: 0;
	background: rgba(77, 2, 2, 0.88);
	color: #fff;
	letter-spacing: 0.24em;
	text-align: center;
	text-transform: uppercase;
}

.ksm-shop .ksm-body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.ksm-shop .ksm-name {
	margin-bottom: 4px;
	color: var(--ksm-maroon);
	font-family: var(--ksm-ace);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

html .ksm-shop .ksm-name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ksm-shop .ksm-sub {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	color: var(--ksm-muted);
	font-size: 15px;
	line-height: 1.4;
}

.ksm-shop .ksm-swatches {
	display: inline-flex;
}

.ksm-shop .ksm-swatches img {
	width: 22px;
	height: 22px;
	margin-left: -6px;
	border: 2px solid #fff;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px var(--ksm-soft);
}

.ksm-shop .ksm-swatches img:first-child {
	margin-left: 0;
}

.ksm-shop .ksm-price {
	margin: auto 0 12px;
	color: var(--ksm-maroon);
	font-family: var(--ksm-mont);
	font-size: 18px;
	font-weight: 800;
}

/* One full-width action per card, at least 48px tall. */
html .ksm-root .ksm-action {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	border-radius: 12px;
	font-family: var(--ksm-mont);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-align: center;
}

html .ksm-root .ksm-action-main,
html .ksm-root .ksm-action-main:hover,
html .ksm-root .ksm-action-main:focus {
	background: var(--ksm-brown);
	color: #fff;
	transition: background-color 0.2s;
}

html .ksm-root .ksm-action-main:hover {
	background: var(--ksm-hover);
}

html .ksm-root .ksm-action:disabled,
html .ksm-root .ksm-action:disabled:hover {
	background: #efe7dc;
	color: var(--ksm-muted);
	cursor: not-allowed;
}

.ksm-root .ksm-note {
	margin-top: 36px;
	color: var(--ksm-muted);
	font-size: 14px;
	font-style: italic;
}

.ksm-root .ksm-empty-note {
	padding: 30px 0;
	font-size: 18px;
}

/* ---------- Product page ---------- */
.ksm-root .ksm-inner {
	width: min(100% - 40px, 1140px);
	margin: 0 auto;
	padding: 24px 0 80px;
}

.ksm-product .ksm-crumbs {
	margin-bottom: 22px;
}

.ksm-root .ksm-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.ksm-root .ksm-main {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 18px;
	background-color: var(--ksm-card);
}

/* Multiply lets the white around a product photo take the cream of its tile. */
.ksm-root .ksm-main-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ksm-root .ksm-soldbadge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 5px 11px;
	border: 1.5px solid currentColor;
	border-radius: 6px;
	background-color: #fff;
	color: var(--ksm-muted);
	font-family: var(--ksm-mont);
	font-size: 14px;
	font-weight: 800;
}

.ksm-root .ksm-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
}

html .ksm-root .ksm-thumb {
	display: block;
	width: 76px;
	height: 76px;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 12px;
	background-color: var(--ksm-card);
}

html .ksm-root .ksm-thumb.ksm-on {
	border-color: var(--ksm-maroon);
}

.ksm-root .ksm-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.ksm-root .ksm-info {
	padding-top: 4px;
}

.ksm-root .ksm-cat {
	color: var(--ksm-muted);
	font-family: var(--ksm-mont);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.ksm-root .ksm-pname {
	margin: 10px 0 14px;
	color: var(--ksm-maroon);
	font-family: var(--ksm-mont);
	font-size: 52px;
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -1px;
	text-transform: uppercase;
}

.ksm-root .ksm-pprice {
	color: var(--ksm-maroon);
	font-family: var(--ksm-mont);
	font-size: 26px;
	font-weight: 800;
}

.ksm-root .ksm-stock {
	margin-top: 6px;
	color: var(--ksm-muted);
	font-size: 16px;
}

.ksm-root .ksm-instock {
	color: var(--ksm-text);
}

.ksm-root .ksm-instock::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 7px;
	border-radius: 50%;
	background-color: var(--ksm-ok);
}

.ksm-root .ksm-label {
	margin: 0 0 12px;
	padding: 0;
	color: var(--ksm-brown);
	font-family: var(--ksm-mont);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.ksm-root .ksm-options {
	margin: 28px 0 0;
	padding: 24px 0 0;
	border: 0;
	border-top: 1px solid var(--ksm-soft);
}

/* Keeps the legend out of the fieldset's top line. */
.ksm-root .ksm-options .ksm-label {
	float: left;
	width: 100%;
}

.ksm-root .ksm-chips {
	display: flex;
	clear: both;
	flex-wrap: wrap;
	gap: 10px;
}

.ksm-root .ksm-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: var(--ksm-card);
	font-family: var(--ksm-mont);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.ksm-root .ksm-chip:hover {
	background-color: var(--ksm-card-hover);
}

.ksm-root .ksm-chip.ksm-on {
	border-color: var(--ksm-maroon);
	background-color: var(--ksm-maroon);
	color: #fff;
}

/* The chip is a flex box, which drops the space before " · RM25.90", so it gets a margin instead. */
.ksm-root .ksm-chipprice {
	margin-left: 0.3em;
	font-weight: 500;
}

/* A choice that is sold out while others are in stock. */
.ksm-root .ksm-chip.ksm-chip-out {
	border-style: dashed;
	border-color: var(--ksm-soft);
	color: var(--ksm-muted);
}

.ksm-root .ksm-buy {
	display: flex;
	gap: 12px;
	margin-top: 28px;
}

.ksm-root .ksm-stepper,
.ksm-drawer .ksm-stepper,
.ksm-sheet .ksm-stepper {
	display: inline-flex;
	flex: none;
	align-items: center;
	border: 1.5px solid var(--ksm-soft);
	border-radius: 12px;
	background: #fff;
}

html .ksm-root .ksm-stepper button,
html .ksm-sheet .ksm-stepper button {
	width: 44px;
	height: 48px;
	padding: 0;
	color: var(--ksm-text);
	font-family: var(--ksm-mont);
	font-size: 22px;
}

html .ksm-root .ksm-stepper button:disabled,
html .ksm-drawer .ksm-stepper button:disabled,
html .ksm-sheet .ksm-stepper button:disabled {
	opacity: 0.35;
	cursor: default;
}

.ksm-root .ksm-qty,
.ksm-sheet .ksm-qty {
	min-width: 28px;
	font-family: var(--ksm-mont);
	font-size: 17px;
	font-weight: 700;
	text-align: center;
}

html .ksm-root .ksm-add,
html .ksm-sheet .ksm-add {
	flex: 1;
	min-height: 50px;
	padding: 0 20px;
	border-radius: 12px;
	background-color: var(--ksm-brown);
	color: #fff;
	font-family: var(--ksm-mont);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.3px;
	transition: background-color 0.2s;
}

html .ksm-root .ksm-add:hover,
html .ksm-root .ksm-add:focus,
html .ksm-sheet .ksm-add:hover,
html .ksm-sheet .ksm-add:focus {
	background-color: var(--ksm-hover);
	color: #fff;
}

html .ksm-root .ksm-add:disabled,
html .ksm-root .ksm-add:disabled:hover,
html .ksm-sheet .ksm-add:disabled,
html .ksm-sheet .ksm-add:disabled:hover {
	background-color: #efe7dc;
	color: var(--ksm-muted);
	cursor: not-allowed;
}

.ksm-root .ksm-soldnote {
	margin-top: 28px;
	font-size: 16px;
}

.ksm-root .ksm-soldnote strong {
	display: block;
	margin-bottom: 2px;
	font-family: var(--ksm-mont);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 2px;
}

.ksm-root .ksm-details {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--ksm-soft);
}

.ksm-root .ksm-desc p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.55;
}

.ksm-root .ksm-desc > p:first-child {
	color: var(--ksm-maroon);
	font-size: 18px;
	font-weight: 700;
}

.ksm-root .ksm-desc ul,
.ksm-root .ksm-desc ol {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.ksm-root .ksm-desc li {
	position: relative;
	margin: 0;
	padding: 0 0 7px 22px;
	font-size: 16px;
	line-height: 1.5;
}

.ksm-root .ksm-desc li p {
	margin: 0;
	font-size: inherit;
}

.ksm-root .ksm-desc li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 3px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ksm-brown);
}

/* Folds: closed by default, one line each, no box. */
.ksm-root .ksm-fold {
	border-top: 1px solid var(--ksm-soft);
}

.ksm-root .ksm-fold:last-of-type {
	border-bottom: 1px solid var(--ksm-soft);
}

.ksm-root .ksm-fold summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	color: var(--ksm-maroon);
	font-family: var(--ksm-mont);
	font-size: 15px;
	font-weight: 800;
	list-style: none;
	cursor: pointer;
}

.ksm-root .ksm-fold summary::-webkit-details-marker {
	display: none;
}

.ksm-root .ksm-fold summary::after {
	content: "+";
	color: var(--ksm-brown);
	font-size: 22px;
	font-weight: 700;
}

.ksm-root .ksm-fold[open] summary::after {
	content: "−";
}

.ksm-root .ksm-fold-body {
	padding: 4px 0 14px;
}

.ksm-root .ksm-back {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--ksm-soft);
	font-family: var(--ksm-mont);
	font-size: 15px;
	font-weight: 700;
}

/* ---------- Header cart button: next to the account icon, nothing else moves ---------- */
.ksm-cart-anchor {
	position: relative;
}

html button.ksm-cartbtn {
	position: absolute;
	top: 50%;
	left: calc(50% + 18px);
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	color: #783819;
	translate: 0 -50%;
}

html button.ksm-cartbtn:hover {
	background: rgba(120, 56, 25, 0.1);
}

.ksm-cartbtn svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ksm-cartbtn .ksm-badge {
	position: absolute;
	top: -3px;
	right: -7px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 100px;
	background: #783819;
	color: #f3e8d7;
	font-family: "Acephimere", sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.ksm-cartbtn .ksm-badge[hidden] {
	display: none;
}

/* ---------- Slide-in cart ---------- */
.ksm-drawer {
	inset: 0 0 0 auto;
	width: min(420px, 88vw);
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #fff;
}

.ksm-drawer::backdrop,
.ksm-sheet::backdrop {
	background: rgba(30, 15, 9, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
	.ksm-drawer,
	.ksm-drawer::backdrop {
		transition: translate 0.3s ease, opacity 0.3s ease, overlay 0.3s allow-discrete, display 0.3s allow-discrete;
	}

	.ksm-drawer:not([open]) {
		translate: 100% 0;
	}

	.ksm-drawer:not([open])::backdrop {
		opacity: 0;
	}

	@starting-style {
		.ksm-drawer[open] {
			translate: 100% 0;
		}

		.ksm-drawer[open]::backdrop {
			opacity: 0;
		}
	}
}

html:has(.ksm-drawer[open]),
html:has(.ksm-sheet[open]) {
	overflow: hidden;
}

.ksm-drawer .ksm-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ksm-drawer .ksm-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid var(--ksm-soft);
}

.ksm-drawer .ksm-dtitle {
	color: var(--ksm-maroon);
	font-family: var(--ksm-mont);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
}

.ksm-drawer .ksm-dcount {
	color: var(--ksm-muted);
	font-size: 17px;
	font-weight: 700;
}

html .ksm-drawer .ksm-close,
html .ksm-sheet .ksm-close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: #f4eee6;
	color: var(--ksm-text);
}

html .ksm-drawer .ksm-close:hover,
html .ksm-sheet .ksm-close:hover {
	background: #eadfd1;
}

.ksm-drawer .ksm-lines {
	flex: 1;
	padding: 4px 22px;
	overflow-y: auto;
}

.ksm-drawer .ksm-line {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ksm-soft);
}

.ksm-drawer .ksm-lthumb {
	display: block;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--ksm-card);
}

.ksm-drawer .ksm-lthumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.ksm-drawer .ksm-lname {
	color: var(--ksm-maroon);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

html .ksm-drawer .ksm-lname:hover {
	text-decoration: underline;
}

.ksm-drawer .ksm-lsub {
	margin-top: 2px;
	color: var(--ksm-muted);
	font-size: 14px;
}

.ksm-drawer .ksm-lfoot {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 10px;
}

html .ksm-drawer .ksm-stepper button {
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--ksm-text);
	font-size: 18px;
}

.ksm-drawer .ksm-stepper span {
	min-width: 22px;
	font-family: var(--ksm-mont);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

html .ksm-drawer .ksm-remove {
	min-height: 40px;
	padding: 0 4px;
	color: var(--ksm-brown);
	font-size: 15px;
	text-decoration: underline;
}

.ksm-drawer .ksm-ltotal {
	font-family: var(--ksm-mont);
	font-size: 15px;
	font-weight: 700;
}

.ksm-drawer .ksm-foot {
	padding: 18px 22px 22px;
	border-top: 1px solid var(--ksm-soft);
}

.ksm-drawer .ksm-subtotal {
	display: flex;
	justify-content: space-between;
	color: var(--ksm-maroon);
	font-family: var(--ksm-mont);
	font-size: 19px;
	font-weight: 800;
}

.ksm-drawer .ksm-small {
	margin: 4px 0 14px;
	color: var(--ksm-muted);
	font-size: 14px;
}

html .ksm-drawer .ksm-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	padding: 0 16px;
	border-radius: 12px;
	background: var(--ksm-brown);
	color: #fff;
	font-family: var(--ksm-mont);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-align: center;
	transition: background-color 0.2s;
}

html .ksm-drawer .ksm-primary:hover,
html .ksm-drawer .ksm-primary:focus {
	background: var(--ksm-hover);
	color: #fff;
}

html .ksm-drawer .ksm-primary[aria-busy="true"] {
	cursor: progress;
	opacity: 0.75;
}

.ksm-drawer .ksm-pay {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.ksm-drawer .ksm-pay li {
	padding: 3px 7px;
	border: 1.5px solid var(--ksm-soft);
	border-radius: 6px;
	background: #fff;
	font-family: var(--ksm-mont);
	font-size: 12px;
	font-weight: 700;
}

.ksm-drawer .ksm-notice {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	color: var(--ksm-muted);
	font-size: 14px;
}

.ksm-drawer .ksm-notice svg {
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

.ksm-drawer .ksm-empty {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 30px 22px;
	font-size: 17px;
}

/* ---------- Choice sheet: bottom sheet on phones, centred box on bigger screens ---------- */
.ksm-sheet {
	width: min(480px, 100vw - 32px);
	max-width: none;
	max-height: min(88dvh, 760px);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.ksm-sheet .ksm-sheet-panel {
	padding: 10px 18px 20px;
}

.ksm-sheet .ksm-grab {
	display: none;
	width: 44px;
	height: 5px;
	margin: 0 auto 10px;
	border-radius: 3px;
	background: #ddd;
}

.ksm-sheet .ksm-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 8px;
}

.ksm-sheet .ksm-sheet-title {
	color: var(--ksm-maroon);
	font-family: var(--ksm-mont);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.2;
}

.ksm-sheet .ksm-sheet-sub {
	margin: 2px 0 14px;
	color: var(--ksm-muted);
	font-size: 15px;
}

html .ksm-sheet .ksm-sheet-sub a {
	color: var(--ksm-brown);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ksm-sheet .ksm-opts {
	margin: 0;
	padding: 0;
	border: 0;
}

.ksm-sheet .ksm-opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	margin-bottom: 8px;
	padding: 8px 12px;
	border: 1.5px solid var(--ksm-soft);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}

.ksm-sheet .ksm-opt:hover {
	border-color: var(--ksm-brown);
}

.ksm-sheet .ksm-opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ksm-sheet .ksm-opt img {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 8px;
	object-fit: cover;
}

.ksm-sheet .ksm-opt-n {
	flex: 1;
	color: var(--ksm-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.ksm-sheet .ksm-opt-n small {
	display: block;
	color: var(--ksm-muted);
	font-family: var(--ksm-mont);
	font-size: 14px;
	font-weight: 600;
}

.ksm-sheet .ksm-radio {
	flex: none;
	width: 24px;
	height: 24px;
	border: 2px solid var(--ksm-muted);
	border-radius: 50%;
	transition: border-width 0.15s;
}

.ksm-sheet .ksm-opt:has(input:checked) {
	border-color: var(--ksm-maroon);
	background: #fbf6ef;
}

.ksm-sheet .ksm-opt:has(input:checked) .ksm-radio {
	border: 7px solid var(--ksm-maroon);
}

.ksm-sheet .ksm-opt:has(input:disabled) {
	border-style: dashed;
	cursor: not-allowed;
}

.ksm-sheet .ksm-opt:has(input:focus-visible) {
	outline: 3px solid var(--ksm-maroon);
	outline-offset: 2px;
}

.ksm-sheet .ksm-sheet-buy {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}

@media (prefers-reduced-motion: no-preference) {
	.ksm-sheet,
	.ksm-sheet::backdrop {
		transition: translate 0.25s ease, opacity 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
	}

	.ksm-sheet:not([open]),
	.ksm-sheet:not([open])::backdrop {
		opacity: 0;
	}

	@starting-style {
		.ksm-sheet[open],
		.ksm-sheet[open]::backdrop {
			opacity: 0;
		}
	}
}

/* ---------- "Added" message with Undo ---------- */
/* Kept left of the accessibility and cookie buttons, which sit 39px from the right edge (44px wide). */
.ksm-toast {
	position: fixed;
	right: 100px;
	bottom: 24px;
	z-index: 99990;
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(420px, 100vw - 24px);
	padding: 10px 10px 10px 12px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.ksm-toast[hidden] {
	display: none;
}

.ksm-toast .ksm-ok {
	display: grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ksm-ok);
	color: #fff;
}

.ksm-toast .ksm-ok svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ksm-toast img {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	object-fit: cover;
}

.ksm-toast p {
	flex: 1;
	min-width: 0;
	color: var(--ksm-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

html .ksm-toast button {
	flex: none;
	min-height: 44px;
	padding: 0 10px;
	border-radius: 10px;
	color: var(--ksm-brown);
	font-family: var(--ksm-mont);
	font-size: 15px;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}

html .ksm-toast button:hover {
	background: #f4eee6;
	color: var(--ksm-brown);
}

@media (prefers-reduced-motion: no-preference) {
	.ksm-toast:not([hidden]) {
		animation: ksm-rise-35414 0.25s ease;
	}
}

@keyframes ksm-rise-35414 {
	from {
		opacity: 0;
		translate: 0 12px;
	}
}

/* ---------- Cart bar (phones only), always within thumb reach ---------- */
html button.ksm-cartbar {
	display: none;
}

/* ---------- Keyboard focus ---------- */
html .ksm-root a:focus-visible,
html .ksm-root button:focus-visible,
.ksm-root .ksm-chip:has(input:focus-visible),
html .ksm-drawer button:focus-visible,
html .ksm-drawer a:focus-visible,
html .ksm-sheet button:focus-visible,
html .ksm-sheet a:focus-visible,
html .ksm-toast button:focus-visible,
html button.ksm-cartbar:focus-visible,
html button.ksm-cartbtn:focus-visible {
	outline: 3px solid var(--ksm-maroon, #4d0202);
	outline-offset: 3px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.ksm-shop .ksm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.ksm-root .ksm-layout {
		gap: 32px;
	}

	.ksm-root .ksm-pname {
		font-size: 40px;
	}

	html button.ksm-cartbtn {
		right: calc(100% + 14px);
		left: auto;
		width: 40px;
		height: 40px;
	}

	.ksm-cartbtn .ksm-badge {
		top: 2px;
		right: 0;
	}
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
	.ksm-shop .ksm-wrap {
		width: calc(100% - 32px);
		padding: 36px 0 40px;
	}

	.ksm-root .ksm-crumbs {
		font-size: 14px;
	}

	.ksm-shop .ksm-top {
		padding-bottom: 22px;
	}

	.ksm-shop .ksm-h1 {
		margin-bottom: 14px;
	}

	.ksm-shop .ksm-lead {
		padding-left: 0.16em;
		font-size: 10px;
		letter-spacing: 0.16em;
	}

	.ksm-shop .ksm-bar {
		margin-bottom: 24px;
	}

	html .ksm-root .ksm-chip-btn {
		padding: 0 15px;
		font-size: 14px;
	}

	.ksm-shop .ksm-grid {
		gap: 12px;
	}

	.ksm-shop .ksm-card {
		padding: 10px 10px 12px;
		border-radius: 14px;
	}

	.ksm-shop .ksm-pic {
		margin-bottom: 10px;
		border-radius: 10px;
	}

	.ksm-root .ksm-badge {
		top: 7px;
		left: 7px;
		padding: 3px 7px;
		font-size: 12px;
	}

	.ksm-root .ksm-badge-out {
		top: auto;
		left: 0;
		padding: 6px 0 6px 0.24em;
		font-size: 11px;
	}

	.ksm-shop .ksm-name {
		font-size: 16px;
	}

	.ksm-shop .ksm-sub {
		gap: 6px;
		margin-bottom: 8px;
		font-size: 14px;
	}

	.ksm-shop .ksm-swatches img {
		width: 18px;
		height: 18px;
		margin-left: -5px;
	}

	.ksm-shop .ksm-price {
		margin-bottom: 10px;
		font-size: 16px;
	}

	html .ksm-root .ksm-action {
		min-height: 44px;
		padding: 0 8px;
		font-size: 14px;
	}

	.ksm-root .ksm-inner {
		width: calc(100% - 32px);
		padding: 16px 0 50px;
	}

	.ksm-product .ksm-crumbs {
		margin-bottom: 14px;
	}

	.ksm-root .ksm-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.ksm-root .ksm-thumbs {
		flex-wrap: nowrap;
		gap: 10px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	html .ksm-root .ksm-thumb {
		flex: none;
		width: 64px;
		height: 64px;
	}

	.ksm-root .ksm-pname {
		font-size: 36px;
	}

	.ksm-root .ksm-pprice {
		font-size: 22px;
	}

	.ksm-root .ksm-chip {
		padding: 0 15px;
		font-size: 14px;
	}

	html .ksm-root .ksm-add {
		padding: 0 14px;
		font-size: 15px;
	}

	.ksm-root .ksm-back {
		margin-top: 34px;
	}

	/* The menu button is 33px wide and ends 20px left of the account icon box. */
	html button.ksm-cartbtn {
		right: calc(100% + 61px);
	}

	.ksm-drawer .ksm-head,
	.ksm-drawer .ksm-foot,
	.ksm-drawer .ksm-lines {
		padding-right: 16px;
		padding-left: 16px;
	}

	.ksm-drawer .ksm-line {
		grid-template-columns: 60px 1fr auto;
		gap: 12px;
	}

	.ksm-drawer .ksm-lthumb {
		width: 60px;
		height: 60px;
	}

	/* The choice box becomes a sheet that slides up from the bottom, where the thumb is. */
	.ksm-sheet {
		width: 100%;
		max-height: 88dvh;
		margin: auto 0 0;
		border-radius: 22px 22px 0 0;
	}

	.ksm-sheet .ksm-sheet-panel {
		padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
	}

	.ksm-sheet .ksm-grab {
		display: block;
	}

	.ksm-sheet .ksm-sheet-head {
		padding-top: 0;
	}

	@media (prefers-reduced-motion: no-preference) {
		.ksm-sheet:not([open]) {
			translate: 0 100%;
			opacity: 1;
		}

		@starting-style {
			.ksm-sheet[open] {
				translate: 0 100%;
				opacity: 1;
			}
		}
	}

	/* Above the cart bar and above the cookie button (96px up, 44px tall) on the right. */
	.ksm-toast {
		right: 12px;
		bottom: calc(152px + env(safe-area-inset-bottom));
		left: 12px;
		width: auto;
	}

	/* The toast's View cart is not needed on phones: the cart bar below does that job. */
	html .ksm-toast .ksm-toast-view {
		display: none;
	}

	/* Ends left of the accessibility button so that button stays visible and tappable. */
	html button.ksm-cartbar {
		position: fixed;
		right: 96px;
		bottom: calc(12px + env(safe-area-inset-bottom));
		left: 12px;
		z-index: 99980;
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 62px;
		padding: 0 8px 0 16px;
		border-radius: 16px;
		background: var(--ksm-maroon);
		color: #fff;
		text-align: left;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	}

	html button.ksm-cartbar:hover,
	html button.ksm-cartbar:focus {
		background: var(--ksm-maroon);
		color: #fff;
	}

	html button.ksm-cartbar[hidden] {
		display: none;
	}

	.ksm-cartbar .ksm-cb-n {
		display: grid;
		flex: none;
		place-items: center;
		min-width: 30px;
		height: 30px;
		padding: 0 6px;
		border-radius: 15px;
		background: var(--ksm-gold);
		color: var(--ksm-maroon);
		font-family: var(--ksm-mont);
		font-size: 14px;
		font-weight: 800;
	}

	.ksm-cartbar .ksm-cb-t {
		flex: 1;
		min-width: 0;
		font-family: var(--ksm-mont);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.25;
	}

	.ksm-cartbar .ksm-cb-t small {
		display: block;
		font-size: 14px;
		font-weight: 600;
		opacity: 0.9;
	}

	.ksm-cartbar .ksm-cb-go {
		display: grid;
		flex: none;
		place-items: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--ksm-gold);
		color: var(--ksm-maroon);
	}

	.ksm-cartbar .ksm-cb-go svg {
		width: 20px;
		height: 20px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.4;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* Room under the page so the bar never covers the last row or the footer. */
	html.ksm-has-bar body {
		padding-bottom: calc(86px + env(safe-area-inset-bottom));
	}
}