/* ==========================================================================
   refresh.css — storefront foundation layer
   --------------------------------------------------------------------------
   Loaded LAST, after extra.css. Everything here is foundation only: type
   rhythm, spacing, radius, motion, focus and tap targets. It deliberately does
   not touch layout or brand colour, so the storefront keeps its current look
   and only reads tidier.

   Every value a rule needs comes from a token in :root. Change the token, not
   the rule — that is what keeps one decision in one place instead of the same
   number repeated across files.
   ========================================================================== */

:root {
	/* -- Motion -----------------------------------------------------------
	   The theme ships `transition: .5s` on every link, which feels sluggish
	   on hover. These are the two speeds the whole storefront should use. */
	--t-fast: 0.15s;
	--t-base: 0.22s;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* -- Radius -----------------------------------------------------------
	   Everything is square today. One small, consistent radius is what makes
	   a page read as "finished" without changing its character. */
	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 12px;

	/* -- Spacing ----------------------------------------------------------
	   A 4px scale. Used for the rhythm rules below and available to any
	   future component instead of inventing new numbers. */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;

	/* -- Type -------------------------------------------------------------
	   Steps for anything new. Note the theme already uses fluid `clamp()`
	   sizing in places (.product-title runs 13px→16px with the viewport) —
	   that is deliberate, so do not replace it with a fixed step. */
	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-base: 14px;
	--fs-md: 16px;
	--fs-lg: 18px;
	--fs-xl: 22px;
	--lh-tight: 1.3;
	--lh-base: 1.55;

	/* -- Ink --------------------------------------------------------------
	   Greys only. Brand colour stays wherever the theme already sets it. */
	--ink-900: #111315;
	--ink-700: #3d4348;
	--ink-500: #6b7280;
	--ink-300: #d7dadd;
	--ink-100: #eef0f2;

	/* The near-white a product photo sits on. Lighter than --ink-100 so a
	   white-background product does not look like it is on a grey card. */
	--surface-muted: #f6f7f8;
	/* Neutral scrim for labels laid over a photo. */
	--scrim: rgba(17, 19, 21, 0.72);

	--ring: rgba(17, 19, 21, 0.45);

	/* -- Elevation --------------------------------------------------------
	   One soft shadow, used only where something genuinely lifts. */
	--shadow-sm: 0 1px 2px rgba(17, 19, 21, 0.06);
	--shadow-md: 0 4px 16px rgba(17, 19, 21, 0.08);

	/* -- Layout -----------------------------------------------------------
	   The side gutter. 15px comes from Bootstrap's grid; phones get a little
	   more so text is not hard against the screen edge. */
	--gutter: 15px;
	--gutter-mobile: 16px;

	/* Minimum comfortable touch size. 18 links on the home page are under it
	   today, the menu rows sitting at 38px. */
	--tap: 44px;

	/* Gap between the blocks that make up the home page. One value, because
	   the sections used to carry seven different ones (32 / 8 / 48 / 8 / 50 / 0)
	   through a mix of inline styles, Bootstrap utilities and theme classes. */
	--section-gap: 48px;

	/* Space below each product tile. Bootstrap columns carry no vertical
	   margin, so rows of products sat flush against each other. The 30px
	   matches the horizontal gutter the grid already uses. */
	--grid-row-gap: 30px;

	/* The horizontal padding the theme gives each product tile on a phone.
	   The row's negative margin has to match it, or the grid sits at a
	   different distance from the screen edge than everything else. */
	--grid-col-gutter: 5px;

	/* The one big number on the detail page. It was a hard 26px inline; fluid
	   keeps it from crowding a long name on a 320px screen. */
	--detail-price-size: clamp(22px, 1.1rem + 0.8vw, 26px);
	/* Option swatches (size, colour). One box for all of them, so "L" and "XL"
	   are the same width instead of 30px and 39px. */
	--swatch-min: 44px;
	--swatch-height: 40px;
	/* The cart line's thumbnail, and the width of the column holding it. */
	--cart-thumb: 72px;
	/* The quantity field on the cart's desktop row. */
	--cart-qty-width: 64px;

	/* What keeps a white logo visible on a white header. One tight shadow
	   acting as an outline, one soft one acting as a lift. */
	--logo-relief: drop-shadow(0 0 1px rgba(17, 19, 21, 0.38))
		drop-shadow(0 1px 2px rgba(17, 19, 21, 0.18));
	/* A payment-method pill. Shorter than a primary button on purpose — it is
	   a choice among four, not the thing you press to finish. The side
	   padding is deliberately twice the gap between the dot and its label,
	   so the dot reads as sitting inside the pill rather than against it. */
	--pay-card-height: 40px;
	--pay-card-pad: 16px;

	/* Fluid like the theme's own, but a quieter range: it ran 13→16px and the
	   name ended up competing with the price. 12→14px reads as a label. */
	--product-title-size: clamp(12px, 0.7rem + 0.2vw, 14px);
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	line-height: var(--lh-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* The theme animates every property for half a second. Narrow it to the
   things that actually change on hover, at a speed that feels immediate. */
a {
	transition:
		color var(--t-fast) var(--ease),
		opacity var(--t-fast) var(--ease),
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease);
}

/* Headings inherit the drifting em sizes too; pin the rhythm, not the size. */
h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: var(--lh-tight);
}

/* A visible focus ring for keyboard users, invisible to mouse users.
   The theme currently renders none at all. */
:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/* Nothing embedded should be the thing that causes a sideways scroll. The
   Facebook page plugin in the footer renders a fixed 340px iframe and was
   pushing every page 87px wider than the screen. */
img,
iframe,
video,
embed,
object {
	max-width: 100%;
}

/* ==========================================================================
   Reusable primitives
   Mapped onto the class names the storefront already renders, so no markup
   has to change and no component gets its own copy of these values.
   ========================================================================== */

/* -- Buttons (.btn, .btn-solid, .view-cart, .carousel-btn) --------------- */
.btn,
.btn-solid,
.view-cart {
	border-radius: var(--r-sm);
	transition:
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease),
		transform var(--t-fast) var(--ease),
		box-shadow var(--t-fast) var(--ease);
}

.btn:active,
.btn-solid:active,
.view-cart:active {
	/* A press needs to be felt, not announced. */
	transform: translateY(1px);
}

.btn:disabled,
.btn-solid:disabled,
.view-cart:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* -- Fields -------------------------------------------------------------- */
input:not([type='checkbox']):not([type='radio']):not([type='submit']),
select,
textarea {
	border-radius: var(--r-sm);
	transition:
		border-color var(--t-fast) var(--ease),
		box-shadow var(--t-fast) var(--ease);
}

input:not([type='checkbox']):not([type='radio']):not([type='submit']):focus,
select:focus,
textarea:focus {
	border-color: var(--ink-700);
	box-shadow: 0 0 0 3px rgba(17, 19, 21, 0.08);
	outline: none;
}

/* -- Product card (.product-box / .thumbnail-container / .product-title) --
   Flat today: no radius, no lift. The image gets the radius and a slow,
   restrained zoom; the card itself only lifts its shadow, so the grid does
   not shift as you move across it. */
.thumbnail-container,
.product-box .img-wrapper {
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface-muted);
	margin-bottom: var(--sp-4);
}

.thumbnail-container img,
.product-box .img-wrapper img {
	transition: transform var(--t-base) var(--ease);
}

.product-box:hover .thumbnail-container img,
.product-box:hover .img-wrapper img {
	transform: scale(1.03);
}

/* .product-title is left alone on purpose: main.css already gives it fluid
   clamp() sizing, and anything here would only fight it. */

/* ==========================================================================
   Home page rhythm
   One rule owns the space between home page blocks. The sections themselves
   no longer set a top margin, so there is a single place to change it.
   ========================================================================== */

.home-sections > * {
	margin-top: 0;
}

.home-sections > * + * {
	margin-top: var(--section-gap);
}

/* ==========================================================================
   Product grid
   ========================================================================== */

/* The tile wrapper every product grid uses — list, home, search, category. */
.col-grid-box {
	margin-bottom: var(--grid-row-gap);
}

/* The card name. No reserved second line: a one-line name used to hold an
   empty line open underneath it so that prices lined up across a row, and an
   empty line is more conspicuous than a price sitting a few pixels high.

   Scoped to .product-info on purpose. `.product-title` carries two unrelated
   jobs in this codebase: the name on a card (always inside .product-info) and
   the little section heading on the detail and review pages ("Тоо ширхэг",
   "Богино тайлбар"). Unscoped, this would reach those too. */
.product-info .product-title {
	margin-bottom: var(--sp-2);
	/* !important is forced here: main.css sets this size with !important too,
	   so nothing short of it can win. */
	font-size: var(--product-title-size) !important;
}

/* Every title and price sat 15px to the right of the photo above it, and a
   hairline rule ran between them. Flush left and no divider is the whole
   point of a minimal tile — the whitespace already separates them.
   Three classes deep to match color1.css's `.tools-grey .product-box
   .product-info`, which is what set the padding; no !important needed
   because refresh.css loads last. */
.tools-grey .product-box .product-info,
.product-box .product-info,
.product-wrap .product-info {
	padding: 0;
	border-top: 0;
	/* Centred names wrapped to two ragged lines and read as clutter. Left is
	   calmer and lines the text up with the photo edge above it. */
	text-align: left;
}

/* The bottom line of a card: price on the left, rating on the right. They
   used to be two stacked rows, with the stars between the name and the price,
   which gave a tile three separate lines of text under the photo. */
.product-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
}

/* The sale price and the price it replaced, side by side. A <div> for each
   put them on two lines, so a discounted tile stood taller than the one next
   to it. */
.product-prices {
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
	min-width: 0;
}

/* Name and price share one size — weight alone separates them. Grid.js used
   to set `fontWeight: bold; fontSize: 15px` inline on every tile, which beat
   every stylesheet and left the price shouting over its own title. The inline
   styles are gone; this owns it now. */
.product-price {
	font-size: var(--product-title-size);
	font-weight: 600;
	color: var(--ink-900);
	white-space: nowrap;
}

/* The stars never shrink away; the prices give up the space instead. */
.product-meta .product-rating {
	flex: 0 0 auto;
	line-height: 1;
}

/* Red on a sale price is information, not decoration, so it stays. */
.product-price--sale {
	color: red;
}

/* The price that no longer applies should recede, not compete. It was inline
   `color: black` — the same weight of ink as the price you actually pay. */
.product-price-was {
	font-size: var(--fs-xs);
	font-weight: 400;
	color: var(--ink-500);
	white-space: nowrap;
}

/* The discount badge sits against the left edge of the card rather than
   floating 8px inside it, so it lines up with the name and the price below.
   Only the inner corners are rounded — the outer edge is the card's edge. */
.sale-badge {
	left: 0;
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	padding: var(--sp-1) var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: var(--lh-tight);
	letter-spacing: 0.02em;
}

/* Pure red at 70% was the loudest thing on a page selling "minimal". A
   neutral scrim says the same thing without shouting. It stays on the right,
   where it cannot land on top of the discount badge. */
.out-of-stock-overlay {
	background: var(--scrim);
	border-radius: var(--r-sm);
	padding: var(--sp-1) var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ==========================================================================
   Product detail
   ========================================================================== */

/* The category line above the name. Quiet, so the name is the first thing
   read, and with a line-height that does not clip Cyrillic descenders.

   Two classes deep to match color1.css's `.product-right h4`, which is what
   sets the 16px. Same reason as `.product-detail-title` below; no !important
   is needed, since refresh.css loads last. */
.product-right .product-eyebrow {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: 500;
	line-height: var(--lh-base);
	color: var(--ink-500);
}

/* The name was ALL CAPS with letter-spacing. On a long product name that is
   four lines of shouting; sentence case is what "minimal" actually means.
   Size and weight stay close to the theme's so nothing else has to move.
   Matching `.product-right h2`'s two levels, as above. */
.product-right .product-detail-title {
	text-transform: none;
	letter-spacing: 0;
	line-height: var(--lh-tight);
	font-weight: 600;
	color: var(--ink-900);
}

/* Both prices come from the same token as the one in .price, so the detail
   page and a future sticky bar cannot disagree about how big a price is. */
.detail-price {
	font-size: var(--detail-price-size);
	font-weight: 600;
	line-height: var(--lh-tight);
	color: var(--ink-900);
	margin-bottom: var(--sp-1);
}

.detail-price--sale {
	color: red;
}

/* The struck-out price and the "-20% хямдарсан" note beside it. Previously
   three inline rules repeated in two places (desktop and mobile markup). */
.detail-price-aside {
	margin: 0 0 0 var(--sp-3);
	text-align: start;
	font-size: var(--fs-base);
	font-weight: 400;
	line-height: var(--lh-tight);
}

.detail-price-was {
	color: var(--ink-500);
	font-weight: 400;
}

.detail-price-off {
	text-align: start;
	font-size: var(--fs-xs);
	font-weight: 500;
	color: red;
}

/* `.product-title` is the small section heading here ("Тоо ширхэг", "Богино
   тайлбар", each option's name) — not a product name. A label should sit
   close to what it labels. */
.product-right .product-title,
.product-description .product-title {
	margin-bottom: var(--sp-2);
	/* !important for the same reason as the card title: main.css sizes
	   `.product-title` with !important, so nothing weaker can reach it. */
	font-size: var(--fs-sm) !important;
	font-weight: 600;
	color: var(--ink-700);
}

/* Option swatches. The theme already marks the selected one; these only even
   out the boxes, round them like every other control, and make them big
   enough to hit with a thumb. */
.product-detail .product-options-values a {
	min-width: var(--swatch-min);
	height: var(--swatch-height);
	padding: 0 var(--sp-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-sm);
	border-color: var(--ink-300);
	transition:
		border-color var(--t-fast) var(--ease),
		background-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}

/* The quantity stepper. The mobile copy of this markup carried `width: 100%;
   display: flex; flex-wrap: nowrap` inline while the desktop copy carried
   nothing, so the same control behaved differently on the two. The inline
   styles are gone and this owns it; the width itself is left to the theme,
   which sizes the field per breakpoint on purpose. */
.qty-box .input-group {
	display: flex;
	flex-wrap: nowrap;
}

.product-right .qty-box .input-group .btn {
	width: var(--tap);
	min-height: var(--tap);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ink-300);
	background: transparent;
	color: var(--ink-700);
}

/* Only on the detail page is the field flanked by a − and a + button, so only
   there do the inner borders double up. The cart's quantity box is a lone
   field and keeps all four sides. */
.product-right .qty-box .input-group .form-control {
	min-height: var(--tap);
	text-align: center;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
}

/* Quantity and the two buy buttons. The second button carried
   `margin-left: 5px` inline; one gap owns the spacing now, and the row wraps
   instead of squeezing on a narrow screen. */
.product-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.product-buttons .btn {
	min-height: var(--tap);
	flex: 1 1 auto;
}

/* Every other button on the storefront — "Шалгах", "Үргэлжлүүлэх", "Захиалах"
   on the checkout form — came out 36px tall, which is a miss on a phone. */
@media (max-width: 767.98px) {
	.btn,
	.btn-solid {
		min-height: var(--tap);
	}
}

/* ==========================================================================
   Header clearance
   main.css takes the header out of the flow with `position: fixed`, and
   _app.js then pushes the page down by a hard-coded 60px to compensate. That
   number only holds when the header is exactly one bar tall: the
   announcement strip lives inside the same <header>, so with a strip the
   header is around 116px and the top of the page — the hero banner — slid
   underneath it.

   Sticky keeps the header pinned while scrolling exactly as fixed did, but
   it occupies its own space, so the clearance is always right whatever the
   header contains. The 60px in _app.js is gone with it.
   ========================================================================== */

header {
	position: sticky;
}

/* ==========================================================================
   Announcement strip
   The bar above the header. It had no horizontal padding, so the message ran
   into both screen edges and the dismiss button sat on the very corner.
   ========================================================================== */

.header-strip {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--gutter-mobile);
}

.header-strip__text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	text-align: center;
	font-size: var(--fs-sm);
	line-height: var(--lh-base);
}

/* Anything the merchant pastes in — a <p>, an <h3> — keeps the strip's own
   rhythm instead of bringing a heading's margins with it. */
.header-strip__text * {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.header-strip__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	cursor: pointer;
	transition: background-color var(--t-fast) var(--ease);
}

.header-strip__close:hover,
.header-strip__close:focus-visible {
	background: #ffffff;
}

.header-strip__close img {
	width: 10px;
	height: 10px;
}

/* ==========================================================================
   Header cart
   It was a bare <div>, so it had no pointer and nothing happened on hover.
   Now that it is an anchor it behaves like one; this gives it a target big
   enough for a thumb and something to see when you reach it.
   ========================================================================== */

.icon-nav .cart-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	border-radius: var(--r-md);
	color: var(--ink-900);
	transition:
		background-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}

.icon-nav .cart-link:hover,
.icon-nav .cart-link:focus-visible {
	background: var(--surface-muted);
	color: var(--ink-700);
}

.cart-link__icon {
	height: 26px;
	width: auto;
}

/* ==========================================================================
   Shop logo
   The logo is the merchant's own file and plenty of them are white, which
   leaves nothing at all on a white header. Two shadows trace the shape: a
   tight one that works as an outline, and a soft one below it. On a dark
   logo both fall on dark pixels and read as a slight lift; on a white logo
   the outline is the only thing separating it from the page.
   ========================================================================== */

/* The second pair of selectors matches color1.css's `.blur-up.lazyloaded`,
   which resets `filter` to `blur(0)` once the lazy-loaded image has arrived
   and would otherwise wipe this out. */
.brand-logo img,
.footer-logo img,
.brand-logo img.blur-up.lazyloaded,
.footer-logo img.blur-up.lazyloaded {
	filter: var(--logo-relief);
}

/* ==========================================================================
   Side menu sub-categories
   A child category was only a 16px indent away from its parent and otherwise
   identical — same uppercase, same weight, same size — so a two-level menu
   read as one flat list. The indent is now a rule you can see, and the child
   keeps the name's own capitalisation while the parent stays in caps.
   ========================================================================== */

.navbar-submenu {
	margin-left: var(--sp-3);
	padding-left: var(--sp-3);
	border-left: 1px solid var(--ink-100);
}

/* As deep as main.css's `.sidenav .pixelstrap li.navbar-sub a`, which is what
   sets the row's 14px. */
.sidenav .pixelstrap li.navbar-sub .navbar-submenu a {
	font-size: var(--fs-sm);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink-700);
}

/* ==========================================================================
   Empty product list
   A category with nothing in it used to render an empty <div>, so the page
   went from the breadcrumb straight to the footer and read as broken rather
   than empty.
   ========================================================================== */

.empty-products {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sp-3);
	padding: var(--sp-7) var(--gutter);
	color: var(--ink-500);
}

.empty-products__icon {
	width: 48px;
	height: 48px;
	stroke-width: 1.25;
	color: var(--ink-300);
}

.empty-products__title {
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: var(--lh-tight);
	color: var(--ink-900);
}

.empty-products__text {
	margin: 0;
	max-width: 34ch;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}

.empty-products .btn {
	margin-top: var(--sp-2);
	min-height: var(--tap);
	display: inline-flex;
	align-items: center;
}

/* ==========================================================================
   Cart
   ========================================================================== */

/* The page wrapper in _app.js carries a 60px top margin to clear the fixed
   header. A margin on the section inside it just collapses into that one, so
   the `mt-5` the cart used to carry bought nothing and the first row sat 5px
   below the navigation. Padding does not collapse. */
.cart-section {
	padding-top: var(--sp-6);
}

/* The scrolling list of items. It was `max-height: 50vh; overflow: auto`
   inline on the wrapper. */
.cart-scroll {
	max-height: 50vh;
	overflow: auto;
}

/* The desktop quantity field is `type="number"`, so the browser draws its own
   up/down arrows inside an 80px box — the stub of a control sticking out of
   the right-hand edge. The two buttons beside it already do that job. */
.qty-box input[type='number'] {
	appearance: textfield;
	-moz-appearance: textfield;
}

.qty-box input[type='number']::-webkit-outer-spin-button,
.qty-box input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* The field and its remove button on the desktop row, on one line and the
   same height. */
.cart-table .qty-box .input-group {
	align-items: center;
	gap: var(--sp-2);
}

/* `flex-basis` rather than `width`: a number input's min-content width is
   about 75px, and a flex item will not shrink below that on its own. */
.cart-section .cart-table .qty-box .form-control {
	flex: 0 0 var(--cart-qty-width);
	width: var(--cart-qty-width);
	min-width: 0;
	min-height: 40px;
	padding: 0 var(--sp-2);
	text-align: center;
}

/* The theme centres every cell in the cart. Nothing else on the storefront
   reads from the middle any more, and a centred row makes the photo, the name
   and the quantity each start at a different place. */
.cart-section tbody tr td,
.cart-section tbody tr td .product-name {
	text-align: left;
}

/* Column headings. They name what the row already makes obvious, so they step
   back instead of competing with the product names. Matching the two classes
   and one element of color1.css's `.cart-section .cart-table thead th`. */
.cart-section .cart-table thead th {
	padding-bottom: var(--sp-3);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-align: left;
	color: var(--ink-500);
	border-bottom: 1px solid var(--ink-100);
}

/* Scoped as deep as the theme's own `.cart-section tbody tr td` rules, which
   is what sets the name's colour and the row's centring. */
.cart-section tbody tr td .product-name .cart-item-name {
	font-weight: 600;
	color: var(--ink-900);
}

.cart-section tbody tr td .product-name .cart-item-options {
	margin-top: var(--sp-1);
	font-size: var(--fs-xs);
	line-height: var(--lh-base);
	color: var(--ink-500);
}

/* The unit price. The theme renders it as a 24px <h2>, which made it louder
   than the line total below it — the number the customer is actually paying.
   Quiet here, bold on .cart-line__value. */
.cart-section tbody tr td .product-name h2 {
	margin: var(--sp-1) 0 0;
	font-size: var(--fs-base);
	font-weight: 400;
	color: var(--ink-500);
}

/* One remove control per line, on both the desktop row and the phone row.
   It was an <a href="#"> wrapping a 15px image with no label, which reads as
   nothing at all to a screen reader and is a 15px target for a thumb. */
.cart-remove {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: var(--r-sm);
	opacity: 0.6;
	transition: opacity var(--t-fast) var(--ease);
}

.cart-remove:hover,
.cart-remove:focus-visible {
	opacity: 1;
}

/* The phone row. The theme centres it; the rest of the storefront now reads
   down a single left edge, so this follows. */
.cart-section tbody tr td .mobile-cart-content {
	justify-content: flex-start;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
}

/* Quantity and line total. They sit side by side when there is room and wrap
   to two lines when there is not, while the remove button keeps its place at
   the end of the row either way. */
.cart-lines {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-4);
	min-width: 0;
}

.cart-line {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.cart-line__label {
	font-size: var(--fs-sm);
	color: var(--ink-500);
}

.cart-line__value {
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--ink-900);
}

.cart-qty-input {
	width: 56px;
	height: 36px;
	text-align: center;
	border: 1px solid var(--ink-300);
	border-radius: var(--r-sm);
}

/* On desktop the remove button follows the quantity field on the same line.
   The phone row pins it instead — see the phone block below. */
.cart-section tbody tr td .mobile-cart-content .cart-remove {
	margin-left: auto;
}

/* The same price twice. The <h2> is the unit price and it is the only price
   the desktop row carries; the phone row below it already says
   "Үнэ: <line total>", so at a quantity of one the customer read the same
   number in two places, the upper one greyed as if it had been struck
   through. Keep the total, which is what is being charged.

   767px, not the 767.98px the rest of this file uses: that is the exact
   breakpoint at which color1.css reveals `.mobile-cart-content`, and hiding
   the unit price one fractional pixel earlier would leave a row with no
   price on it at all. */
@media (max-width: 767px) {
	.cart-section tbody tr td .product-name h2 {
		display: none;
	}
}

/* The sign-in card below the cart. One gap, from the same scale as the rest
   of the page, instead of two stacked Bootstrap spacers. */
.auth-wrapper {
	margin-top: var(--sp-6);
}

/* ==========================================================================
   Payment method
   Every other row in the order summary is "label on the left, value in a 35%
   column on the right". That shape does not fit four payment providers, which
   ended up as bare radio buttons crowded onto one short line. This row takes
   the full width and the providers become cards you can actually hit.
   ========================================================================== */

.order-box .sub-total li.payment-methods {
	display: block;
	overflow: hidden;
	/* The rows above are single lines of text; this one is a block of
	   controls, and it was butting straight up against the paragraph before
	   it with nothing to separate them. */
	margin-top: var(--sp-5);
}

/* Under 420px color1.css indents the last `.shopping-option` by 20px, which
   pushed the pills out of line with their own heading on exactly the screens
   where the alignment matters most. */
.order-box .sub-total .payment-methods .shipping .shopping-option:last-child {
	padding-left: 0;
}

/* Matching color1.css's `.order-box .sub-total .shipping`, which is the rule
   that pins every summary value into a 35% column floated to the right. */
.order-box .sub-total .payment-methods .shipping {
	width: 100%;
	float: none;
}

/* Pills sized to their own label, not a grid of equal columns. On a grid,
   "Дансаар шилжүүлэх" wrapped to two lines while "Sono" kept one, so the row
   came out lopsided and twice as tall as it needed to be. */
.payment-methods .shopping-option {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-3) 0 0;
}

.order-box .sub-total .payment-methods .shopping-option label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0 var(--pay-card-pad);
	min-height: var(--pay-card-height);
	/* One line each, so every pill is exactly as tall as its neighbour. */
	white-space: nowrap;
	border: 1px solid var(--ink-300);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	line-height: var(--lh-tight);
	color: var(--ink-700);
	cursor: pointer;
	transition:
		border-color var(--t-fast) var(--ease),
		background-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}

.order-box .sub-total .payment-methods .shopping-option label:hover {
	border-color: var(--ink-500);
}

/* The chosen one. `:has()` styles the whole card; the `input:checked + span`
   rule below says the same thing in text weight, so the selection is still
   legible in a browser without it. */
.order-box .sub-total .payment-methods .shopping-option label:has(input:checked) {
	border-color: var(--ink-900);
	background: var(--ink-100);
	color: var(--ink-900);
}

.payment-methods .shopping-option input[type='radio'] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	/* The theme's own dark, not a new colour. */
	accent-color: var(--ink-900);
}

.payment-methods .shopping-option input[type='radio']:checked + span {
	font-weight: 600;
	color: var(--ink-900);
}

/* ==========================================================================
   Phone
   The storefront does not scroll sideways today — these rules keep that true
   and make the things you tap big enough to hit.
   ========================================================================== */

@media (max-width: 767.98px) {
	.container,
	.container-fluid {
		padding-left: var(--gutter-mobile);
		padding-right: var(--gutter-mobile);
	}

	/* 38px menu rows are a near miss on a phone. Grow the row, not the text. */
	.navbar-nav a,
	.sm-vertical a,
	.sidenav a,
	.mobile-nav a,
	.onhover-div a {
		min-height: var(--tap);
		display: flex;
		align-items: center;
	}

	/* Nothing may push the page wider than the screen. `.row` is deliberately
	   not in this list: a Bootstrap row is 15px wider than its parent on each
	   side by design, and the parent's padding takes that back. Capping it at
	   100% clamped the width but kept the -15px left margin, so every nested
	   row — the whole checkout form, for one — slid left and lost 30px off
	   its right edge. */
	.container,
	.container-fluid {
		max-width: 100%;
	}

	/* On a phone the theme narrows the tile's own padding to 5px so the two
	   columns sit close together, but the row still pulls out by the grid's
	   full 15px. The tiles ended up 6px from the screen edge while every
	   other page sat at 16px. Match the pull to the padding and the grid
	   lines up with the rest of the storefront. */
	.product-wrapper-grid > .row {
		margin-left: calc(-1 * var(--grid-col-gutter));
		margin-right: calc(-1 * var(--grid-col-gutter));
	}

	/* 48px between blocks is a lot of dead space on a 375px screen. */
	.home-sections > * + * {
		margin-top: 32px;
	}

	/* color1.css centres the whole detail column on a phone, but extra.css
	   forces the product name back to `start`, so the page came out half
	   centred and half left: name and price against the edge, then the size
	   labels, the stock line and the quantity floating in the middle. One
	   edge for all of it — the same decision as the product card. */
	.product-right {
		text-align: left;
	}

	.product-right .product-description .qty-box,
	.product-right .product-icon,
	.product-right .detail-section {
		justify-content: flex-start;
	}

	/* The cart's photo column was 43% of a 313px table for a 90px thumbnail,
	   which squeezed the name, the options and the quantity line into 178px
	   and forced the remove button onto a line of its own. The photo takes
	   what it needs and the details get the rest. */
	/* The theme puts a 115px min-width on every cell, so the photo column was
	   43% of a 313px table for a 90px thumbnail and squeezed the name, the
	   options and the quantity line into what was left. A fixed column the
	   width of the photo — `width: 1%` collapses it to nothing instead,
	   because the image's own max-width then has nothing to measure. */
	.cart-section tbody tr td:first-child {
		/* The cell holds the photo plus its right-hand padding; sized to just
		   the photo, the image's own max-width would shrink it to 60px. */
		width: calc(var(--cart-thumb) + var(--sp-3));
		min-width: calc(var(--cart-thumb) + var(--sp-3));
		padding-left: 0;
		text-align: left;
	}

	.cart-section tbody tr td:first-child img {
		width: var(--cart-thumb);
		height: var(--cart-thumb);
		object-fit: cover;
		border-radius: var(--r-sm);
		background: var(--surface-muted);
	}

	/* Pinned to the top corner of the row, level with the product name, so it
	   reads as "remove this item". Pushed to the end of the quantity line it
	   floated between two wrapped lines, attached to nothing. */
	.cart-section tbody tr td:nth-child(2) {
		position: relative;
		padding-right: var(--tap);
	}

	.cart-section tbody tr td .mobile-cart-content .cart-remove {
		position: absolute;
		top: 0;
		right: 0;
		margin-left: 0;
	}
}