/* ========================================================================== 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 ----------------------------------------------------------- One radius for the whole storefront. Two sizes meant a button rounded differently from the option swatch beside it, and a card differently again; the mix read as sloppiness rather than hierarchy. */ --r-sm: 4px; --r-md: 4px; /* -- 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; /* 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); /* The space between a product photo and its name. Tighter than the 16px the card used: at 16 the name reads as a separate block rather than a caption belonging to the photo above it. */ --card-img-gap: 10px; } /* ========================================================================== 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 0px 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; /* No tinted panel behind the photo. The grey read as a box drawn around every product, which is the opposite of what a minimal grid wants — the photos should sit on the page, not in containers. */ background: transparent; margin-bottom: var(--card-img-gap); } .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
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; } /* The three parts are one control, so only its outer corners are rounded — at the same radius as every other control on the page. */ .product-right .qty-box .input-group > *:first-child .btn, .product-right .qty-box .input-group > .btn:first-child { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); } .product-right .qty-box .input-group > *:last-child .btn, .product-right .qty-box .input-group > .btn:last-child { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); } .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
, 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); } /* An announcement is a footnote, not a headline — it sits above the logo and should not compete with it. */ .header-strip__text { flex: 1 1 auto; min-width: 0; margin: 0; text-align: center; font-size: var(--fs-xs); line-height: var(--lh-base); } /* Anything the merchant pastes in — a

, an

— 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; } /* A filled 32px white disc read as a button to press rather than a way to dismiss a notice. An outline ring the size of the text beside it. */ .header-strip__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; opacity: 0.75; cursor: pointer; transition: opacity var(--t-fast) var(--ease); } .header-strip__close:hover, .header-strip__close:focus-visible { opacity: 1; } .header-strip__close svg { width: 11px; height: 11px; stroke-width: 2.4; } /* ========================================================================== Header cart It was a bare
, 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. ========================================================================== */ /* ========================================================================== 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
, 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 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; } /* Payment choices. They were text pills — "Sono", "qPOS", "QPay" — for providers that shoppers recognise by their mark everywhere else on the site, including on the product page two clicks earlier. Each one now carries its own logo and the line it describes itself with. */ .payment-methods__label { display: block; margin-bottom: var(--sp-3); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); } /* A heading belongs to what comes after it. This one had no margin of its own, so it sat tight against the cards above and loose from the ones it actually labels — the grouping read backwards. */ .payment-methods__label--group { margin-top: var(--sp-5); margin-bottom: var(--sp-2); } /* `auto-fill`, not `auto-fit`: auto-fit collapses the empty tracks, so a group holding a single provider — Зээлийн үйлчилгээ with only Sono in it — stretched that one card across the whole row. */ .pay-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-2); align-items: stretch; } /* Said instead of the cards when the shop has nothing to offer this basket. */ .payment-methods__empty { grid-column: 1 / -1; margin: 0; padding: var(--sp-3); border-radius: var(--r-sm); background: var(--surface-muted); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-500); } .order-box .sub-total .pay-options .pay-option, .pay-option { display: flex; align-items: center; gap: var(--sp-3); margin: 0; padding: var(--sp-3); border: 1px solid var(--ink-300); border-radius: var(--r-sm); background: #fff; cursor: pointer; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .pay-option:hover { border-color: var(--ink-500); } .pay-option--on { border-color: var(--ink-900); background: var(--surface-muted); } .pay-option__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); } .pay-option__logo { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-sm); object-fit: contain; background: #fff; } .pay-option__logo--icon { display: flex; align-items: center; justify-content: center; background: var(--surface-muted); color: var(--ink-700); } .pay-option__logo--icon svg { width: 18px; height: 18px; stroke-width: 1.6; } .pay-option__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pay-option__name { font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; color: var(--ink-900); } .pay-option--on .pay-option__name { font-weight: 600; } /* The provider's own blurb is a hint, not a second label: two lines at 11px keeps "Аль ч банкны аппаа ашиглан төлбөрөө төлөх боломжтой" from making QPay's card twice the height of the one beside it. */ .pay-option__note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; line-height: 1.4; color: var(--ink-500); } /* ========================================================================== 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; } } /* ========================================================================== Featured categories The tile was a square photo with a dark gradient washed over its lower two thirds and the name laid on top in white. Against the pale product artwork most shops use, that gradient read as a grey box drawn around every category — the one thing a minimal grid should not have. Same markup, rearranged with CSS: the photo keeps its square, the name moves out from under the gradient to a line beneath it, in ink. ========================================================================== */ .category-link { aspect-ratio: auto; padding: 0; overflow: visible; border-radius: 0; } @media (min-width: 1024px) { .category-link { padding: 0; } } /* Hover lifted and faded the whole tile, label included. The photo alone responding is quieter and keeps the name readable throughout. */ .category-link:hover { transform: none; opacity: 1; } .category-image-wrapper { position: static; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md); } .category-image { transition: transform var(--t-base) var(--ease); } /* No picture: a filled tile with the category's initial, rather than the browser's broken-image outline. */ .category-image--empty { display: grid; place-items: center; background: var(--surface-muted); font-size: 26px; font-weight: 500; text-transform: uppercase; color: var(--ink-300); } .category-link:hover .category-image { transform: scale(1.03); } .gradient-overlay { display: none; } .category-name { margin-top: var(--card-img-gap); color: var(--ink-900); font-size: var(--product-title-size); line-height: var(--lh-tight); } @media (min-width: 1024px) { .category-name { font-size: var(--product-title-size); text-transform: none; } } /* ========================================================================== Header The bones were already right — logo left, nav centred, icons right. What made it read as busy was everything hung off those bones: a hamburger that stayed on at desktop beside a full menu, a dotted rule between two icons, an outline around the logo, and a filled badge on the bag. ========================================================================== */ /* The drawer trigger belongs to phones. On desktop the full menu is already on screen, so the bars were a second way into the same links. */ @media (min-width: 992px) { .header-navbar, .sidebar-bar { display: none !important; } } /* A dotted rule between the search and account icons. Three icons in a row do not need to be told apart. */ .header-nav-dots-icon { display: none; } /* One size for all three. The search icon carried width/height inline at 27px while the bag sat at 24, so !important is the only way past it. */ .menu-right .icon-nav > a svg, .menu-right .icon-nav > ul > li > a > svg, .menu-right .cart-link__icon { width: 22px !important; height: 22px !important; color: var(--ink-900); stroke-width: 1.5; } .menu-right .icon-nav { display: flex; align-items: center; } /* Even spacing. Bootstrap's `mr-3` put 16px after two of the three and nothing after the last, so the group drifted left of the gutter. */ .menu-right .icon-nav.mr-3 { margin-right: var(--sp-5) !important; } /* An outline drawn around the logo so a white mark stays visible. On a logo that already carries its own white background it draws a box instead — which is the thing a minimal header most needs to lose. */ .brand-logo img, .footer-logo img, .brand-logo img.blur-up.lazyloaded, .footer-logo img.blur-up.lazyloaded { filter: none; } /* The count on the bag. A filled circle in the theme's red was the loudest thing in the header; ink at a smaller size still reads as a number. */ .menu-right .ant-badge .ant-badge-count, .menu-right .ant-badge sup { background: var(--ink-900) !important; box-shadow: none !important; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; font-size: 10px; font-weight: 600; } /* The account slot shows an avatar and the shopper's handle side by side. The handle is the one piece of text among three icons, so it pulls the group out of balance; it is still there in the dropdown underneath. The span has no class of its own — it is the sibling of .currentUserAvatar inside the trigger link, which is what this selects. */ @media (min-width: 992px) { .menu-right .header-dropdown .currentUserAvatar + span { display: none; } } /* With the handle gone the avatar is the whole target, so give it a size that matches the other two icons rather than the text it used to sit by. */ .menu-right .header-dropdown .currentUserAvatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } /* -- Header rhythm ------------------------------------------------------ The bar was 55px with a 40px logo inside it, so the mark nearly touched top and bottom and the row read as cramped. The height is set inline on .main-menu, which is why this needs !important. */ @media (min-width: 992px) { .main-menu { height: 72px !important; } } /* This pair used to be set twice, a hundred lines apart, with the second quietly overriding the first. One rule, below. */ /* -- Header: weight and grouping --------------------------------------- First pass made the icons thin and set them 24px apart, which left three pale marks floating separately rather than one control group. */ /* 11.5px was too quiet to read comfortably across a wide header; 13px sits just under the body text and still lets the spacing carry the row. */ #main-menu > li > a { font-size: 13px; padding-left: var(--sp-3); padding-right: var(--sp-3); } /* Thin strokes at 1.5 read as grey against white however black the colour is. 1.8 is the weight that makes a 22px outline icon look deliberate. */ .menu-right .icon-nav > a svg, .menu-right .icon-nav > ul > li > a > svg, .menu-right .cart-link__icon { stroke-width: 1.8; color: #000; } /* 24px between three icons read as three separate things. */ .menu-right .icon-nav.mr-3 { margin-right: var(--sp-3) !important; } /* Hide the shopper's handle next to the icon — it is the one piece of text among three icons and it unbalances the row. It is still the first line of the dropdown underneath. `:not(.account-initial)` matters: the signed-in mark is also a , and without this it was hidden too, leaving an empty slot in the header. */ .menu-right .header-dropdown .onhover-dropdown > a > span:not(.account-initial) { display: none; } .menu-right .header-dropdown .onhover-dropdown { padding-right: 13px; } .menu-right .header-dropdown .onhover-dropdown::before { right: 0; top: 50%; transform: translateY(-50%); font-size: 11px; line-height: 1; color: #000; } .menu-right .header-dropdown .onhover-dropdown > a { display: inline-flex; align-items: center; } /* -- Header: one gap, not four ----------------------------------------- The three icon slots were spaced by Bootstrap's `mr-3` on two of them, the theme's own margins on the avatar, and nothing on the last — which is why the row read as randomly spaced. One flex gap owns it now and every per-slot margin is cancelled. */ .menu-right { display: flex; align-items: center; gap: 14px; } .menu-right > div, .menu-right .icon-nav, .menu-right .icon-nav.mr-3 { margin: 0 !important; } .menu-right .header-dropdown { display: flex; align-items: center; margin: 0; padding: 0; } /* The caret belongs to the avatar, not to the end of the row. Ten pixels of padding is the whole gap between them. */ .menu-right .header-dropdown .onhover-dropdown { padding-right: 10px; } .menu-right .header-dropdown .onhover-dropdown > a { display: inline-flex; align-items: center; margin: 0; padding: 0; } .menu-right .header-dropdown .onhover-dropdown .currentUserAvatar { margin: 0 !important; } .menu-right .header-dropdown .onhover-dropdown::before { right: 0; top: 50%; transform: translateY(-50%); font-size: 10px; line-height: 1; color: #000; } /* The mark was 40px in a 55px bar and easy to miss. It is the shop's name; it should be the first thing read. The height used to be inline on the element, which is why it could not change with the viewport. */ .brand-logo img { height: 40px; max-height: 40px; width: auto; } @media (min-width: 992px) { .brand-logo img { height: 52px; max-height: 52px; } } /* -- Header icons: measured, not guessed ------------------------------- The flex gap was 14px but the glyphs sat 34px and 25px apart, because each slot carried its own padding inside. Zero the insides and the gap becomes the only thing setting the distance. */ .menu-right .icon-nav > a, .menu-right .header-dropdown, .menu-right .header-dropdown > li, .menu-right .cart-link { padding: 0; margin: 0; } .menu-right { gap: 12px; } /* The caret lives in this padding, so it is the one slot that keeps some. */ .menu-right .header-dropdown .onhover-dropdown { padding-right: 9px; } /* -- Header icons: the last two offenders ------------------------------- Measured, not guessed: the account
  • carried padding-left: 20px and the cart link was 44px wide around a 22px glyph. Both came from theme rules specific enough to beat the selectors above, so these say it plainly. */ .menu-right ul.header-dropdown > li { padding: 0 !important; margin: 0 !important; } .menu-right .icon-nav .cart-link { width: auto !important; min-width: 0 !important; padding: 0 !important; } /* -- Header icons: final spacing and the caret -------------------------- 12px turned out to be too tight once the slots were genuinely 22px each. 18 is the distance at which three icons read as a group without touching. */ .menu-right { gap: 18px; } /* The caret was a second mark hung off the account icon, pointing at a menu that opens on hover anyway. The icon is the affordance. */ .menu-right .header-dropdown .onhover-dropdown::before { content: none; } .menu-right .header-dropdown .onhover-dropdown { padding-right: 0; } /* Signed in, the slot is now the same 22px line icon as every other state. */ .menu-right .header-dropdown .onhover-dropdown > a > svg { width: 22px; height: 22px; } /* -- Header icons: they have to feel like buttons ----------------------- The search trigger is an with no href, so the browser gave it a text cursor and no hover state — it looked like decoration. */ .menu-right .icon-nav a, .menu-right .icon-nav .cart-link, .menu-right .header-dropdown li > a { cursor: pointer; transition: opacity var(--t-fast) var(--ease); } .menu-right .icon-nav a:hover, .menu-right .icon-nav .cart-link:hover, .menu-right .header-dropdown li > a:hover { opacity: 0.55; } /* -- Signed-in account mark -------------------------------------------- A filled circle carrying the first letter of the name. Same 22px as the line icons beside it, so the row stays even, but unmistakably a person rather than a generic symbol. */ .account-initial { display: inline-flex; align-items: center; justify-content: center; /* A touch larger than the 22px line icons beside it, like the pro storefront's avatar — a filled disc needs the extra to read. */ width: 28px; height: 28px; border-radius: 50%; /* Light disc, dark letters — the same weight the pro storefront gives it. A filled black circle shouted next to two line icons. */ background: var(--ink-100); color: var(--ink-900); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: uppercase; flex: 0 0 auto; } /* -- Header icon order -------------------------------------------------- Search, cart, account — the order the pro storefront uses, and the one that puts the two things you press while shopping next to each other. Done with flex order rather than by moving a hundred lines of JSX; if a browser does not support :has() the row simply keeps its old order. */ .menu-right .icon-nav:has(.header-dropdown) { order: 3; } /* ========================================================================== Account menu Four plain links with no icons and no hover of their own — you could not tell which row the pointer was on. Each row is now an icon and a label on one line, and the whole row lights up, edge to edge. The theme reaches these nodes with three- and four-class selectors (`.onhover-dropdown .onhover-show-div`, `.main-menu .menu-right .icon-nav li`), so every rule here is named from `.menu-right .icon-nav` to win. ========================================================================== */ .menu-right .icon-nav ul.account-menu { /* Shrink-to-fit, so the rows below all share the widest label's width. */ width: auto; min-width: 190px; max-width: none; padding: var(--sp-2) 0; border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-md); } /* Block, not the theme's inline-block: shrink-wrapped
  • gave every row a different hover width (measured 197 / 171 / 183 / 182). */ .menu-right .icon-nav ul.account-menu > li { display: block; float: none; width: auto; padding: 0; margin: 0; border: 0; } .menu-right .icon-nav ul.account-menu .account-menu__item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; box-sizing: border-box; padding: 0 var(--sp-4); min-height: 38px; font-size: var(--fs-base); line-height: var(--lh-tight); color: var(--ink-700); white-space: nowrap; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .menu-right .icon-nav ul.account-menu .account-menu__item:hover, .menu-right .icon-nav ul.account-menu .account-menu__item:focus-visible { background: var(--ink-100); color: var(--ink-900); text-decoration: none; opacity: 1; } /* Leaving is not the same kind of action as the three above it. */ .menu-right .icon-nav ul.account-menu .account-menu__item--exit { color: var(--ink-500); } .account-menu__icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--ink-500); transition: color var(--t-fast) var(--ease); } .account-menu__item:hover .account-menu__icon { color: var(--ink-900); } /* ========================================================================== Category sidebar The categories used to live in the header, where they competed with the pages for room and ran out of it. They now sit beside the grid they filter. No panel is drawn around them — a heading, a list, and the active row filled in, which is all the structure the column needs. ========================================================================== */ .products-layout__aside { margin-bottom: var(--sp-5); } @media (min-width: 992px) { .products-layout__aside { margin-bottom: 0; flex: 0 0 260px; max-width: 260px; padding-right: 26px; } .products-layout__main { flex: 1 1 0; min-width: 0; max-width: none; } } .cat-sidebar__title { margin: 0 0 var(--sp-2); padding: 0 var(--sp-3); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); } .cat-sidebar__toggle { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 10px var(--sp-3); border: 0; border-radius: var(--r-md); background: var(--ink-100); font-size: var(--fs-base); color: var(--ink-900); } .cat-sidebar__toggle-icon { width: 16px; height: 16px; flex: 0 0 auto; } .cat-sidebar__body { display: none; padding-top: var(--sp-3); } .cat-sidebar__body--open { display: block; } @media (min-width: 992px) { .cat-sidebar__toggle { display: none; } .cat-sidebar__body { display: block; padding-top: 0; } } .cat-tree { margin: 0; padding: 0; list-style: none; } .cat-tree--nested { margin-left: 17px; padding-left: var(--sp-1); border-left: 1px solid var(--ink-300); } .cat-link { display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 7px var(--sp-3); border: 0; border-radius: var(--r-md); background: transparent; font-size: var(--fs-base); line-height: 1.35; text-align: left; color: var(--ink-700); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .cat-link:hover, .cat-link:focus-visible { background: var(--ink-100); color: var(--ink-900); } .cat-link--active { background: var(--ink-100); font-weight: 500; color: var(--ink-900); } .cat-link__caret { width: 14px; height: 14px; margin-top: 2px; flex: 0 0 auto; color: var(--ink-500); transition: transform var(--t-fast) var(--ease); } .cat-link__caret--open { transform: rotate(90deg); } /* A leaf keeps the caret's width so every label starts on the same line. */ .cat-link__caret--empty { opacity: 0; } .cat-link__label { min-width: 0; flex: 1 1 auto; } /* ========================================================================== Section heading Every home-page block used `.trending-title`: 25px, uppercase, letter- spaced and centred, which read as a banner rather than a label and left no room for a way into the full list. One heading now, left-aligned, with the "see all" link on the opposite end of the same line. ========================================================================== */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin: 0 0 var(--sp-4); } /* 19px on a phone, 26px from a tablet up. The desktop size was set as the base and only ever stepped up, so a 375px screen was carrying a heading sized for a 1440px one. */ .section-head__title { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ink-900); } .section-head__link { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; font-size: var(--fs-sm); color: var(--ink-500); transition: color var(--t-fast) var(--ease); } .section-head__link:hover, .section-head__link:focus-visible { color: var(--ink-900); text-decoration: none; } .section-head__caret { width: 14px; height: 14px; } @media (min-width: 768px) { .section-head__title { font-size: 26px; } } /* ========================================================================== News cards The home-page news block drew a different layout for one post than for three, stacked a share button, a calendar glyph and a date above each title, and set all of it from inline styles. One card now: picture, date, title — and nothing drawn around them. ========================================================================== */ .post-card { margin-bottom: var(--sp-5); } .post-card__media { position: relative; display: block; overflow: hidden; border-radius: var(--r-md); background: var(--surface-muted); } .post-card__image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.4s var(--ease); } .post-card__media:hover .post-card__image { transform: scale(1.03); } .post-card__pin { position: absolute; top: var(--sp-2); right: var(--sp-2); display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--scrim); } .post-card__pin img { filter: invert(1); } .post-card__body { position: relative; padding-top: 10px; } .post-card__date { display: block; margin-bottom: 4px; font-size: var(--fs-xs); color: var(--ink-500); } .post-card__title { display: block; font-size: var(--fs-base); line-height: 1.4; color: var(--ink-900); } .post-card__title:hover, .post-card__title:focus-visible { color: var(--ink-900); text-decoration: underline; } /* The theme makes every list item in the page inline-block, which turned the tree into a wrapped row of chips. */ .cat-sidebar .cat-tree > li { display: block; float: none; width: auto; padding: 0; margin: 0; } /* -- Sort control ------------------------------------------------------- A bordered, shadowed, white box for one line of state, sitting above a grid that has no borders anywhere else. The label and a caret are the whole control now; the box only appears under the pointer. */ .products-header-wrapper .select-styles { height: 34px; padding: 0 28px 0 10px; border: 0; border-radius: var(--r-md); background-color: transparent !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; box-shadow: none; font-size: var(--fs-sm); color: var(--ink-700); cursor: pointer; appearance: none; -webkit-appearance: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .products-header-wrapper .select-styles:hover, .products-header-wrapper .select-styles:focus { background-color: var(--ink-100) !important; color: var(--ink-900); } /* ========================================================================== Content pages Бидний тухай, Холбоо барих, Түгээмэл асуултууд and Мэдээ each drew their own grey band, their own padding and their own heading size. One head, one rhythm, and nothing boxed. ========================================================================== */ .content-page { padding-bottom: var(--sp-6); } .page-head { padding: var(--sp-5) 0 var(--sp-4); } .page-head__title { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--ink-900); } .page-head__subtitle { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-500); } @media (min-width: 768px) { .page-head { padding: var(--sp-6) 0 var(--sp-5); } .page-head__title { font-size: 26px; } } .content-page__body { max-width: 760px; font-size: var(--fs-base); line-height: 1.7; color: var(--ink-700); } /* -- FAQ ---------------------------------------------------------------- A list of questions, each opening in place. A hairline between rows is the only line on the page — no cards, no borders around the answers. */ .faq-list { max-width: 760px; } .faq-item { border-bottom: 1px solid var(--ink-100); } .faq-item__question { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); width: 100%; padding: 16px 0; border: 0; background: transparent; text-align: left; font-size: var(--fs-base); line-height: 1.45; color: var(--ink-900); } .faq-item__icon { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; color: var(--ink-500); transition: transform var(--t-fast) var(--ease); } .faq-item--open .faq-item__icon { transform: rotate(45deg); } .faq-item__answer { padding: 0 0 16px; font-size: var(--fs-base); line-height: 1.7; color: var(--ink-700); white-space: pre-line; } .post-card__summary { margin: 6px 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-500); } /* The share button is absolutely positioned by the theme and landed on top of the second line of a title. It belongs on the date line, which has room for it. */ .post-card__body .global-share-button { top: 10px; right: 0; bottom: auto; width: 18px; height: 18px; background-size: 18px 18px; opacity: 0.65; } .post-card__body .global-share-button:hover { opacity: 1; } .post-card__date { padding-right: 26px; } /* ========================================================================== Account pages The sidebar was four PNG icons and a stack of inline styles; the order list was a seven-column table a phone could only scroll sideways. ========================================================================== */ .account-nav { margin-bottom: var(--sp-5); } .account-nav__user { padding: 0 var(--sp-3) var(--sp-3); } .account-nav__name { display: block; font-size: var(--fs-base); font-weight: 500; color: var(--ink-900); } .account-nav__code { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-500); } .account-nav__list { display: flex; flex-direction: column; } .account-nav__item { display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-base); line-height: 1.35; color: var(--ink-700); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .account-nav__item:hover, .account-nav__item:focus-visible { background: var(--ink-100); color: var(--ink-900); text-decoration: none; } .account-nav__item--active { background: var(--ink-100); font-weight: 500; color: var(--ink-900); } .account-nav__item--exit { color: var(--ink-500); } .account-nav__icon { width: 17px; height: 17px; flex: 0 0 auto; } /* -- Order list ---------------------------------------------------------- */ .order-row { display: block; padding: var(--sp-4) var(--sp-3); border-top: 1px solid var(--ink-100); color: var(--ink-700); transition: background-color var(--t-fast) var(--ease); } .order-row:hover, .order-row:focus-visible { background: var(--surface-muted); color: var(--ink-700); text-decoration: none; } .order-row__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: 6px; } .order-row__code { font-size: var(--fs-base); font-weight: 600; color: var(--ink-900); } .order-row__date { font-size: var(--fs-xs); color: var(--ink-500); } .order-row__items { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--ink-700); } .order-row__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); } .order-row__total { margin-left: auto; font-size: var(--fs-base); font-weight: 600; color: var(--ink-900); } /* Status, as a word rather than a Bootstrap colour block stretched across its column. */ .status-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 500; line-height: 1.5; white-space: nowrap; } .status-pill--muted { background: var(--ink-100); color: var(--ink-700); } .status-pill--info { background: #e8f0fe; color: #1a56b3; } .status-pill--warn { background: #fdf1dd; color: #94620d; } .status-pill--ok { background: #e4f5ec; color: #15704a; } .status-pill--bad { background: #fdeceb; color: #a52a21; } /* ========================================================================== Shopping cart A three-column table with a bare number input and the chosen options printed as text. One row per line now: pick it, see it, change its options and its count, remove it — all in place. ========================================================================== */ .cart-list__head { display: flex; align-items: center; gap: var(--sp-3); padding: 0 0 var(--sp-3); } .cart-list__head-label { font-size: var(--fs-base); font-weight: 500; color: var(--ink-900); } .cart-list__count { font-size: var(--fs-sm); color: var(--ink-500); } .cart-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 1px solid var(--ink-100); } .cart-row--compact { padding: var(--sp-3) 0; } .cart-row__image { width: 72px; height: 72px; flex: 0 0 auto; border-radius: var(--r-md); background: var(--surface-muted); object-fit: cover; } .cart-row--compact .cart-row__image { width: 56px; height: 56px; } .cart-row__main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; } .cart-row__head { display: flex; align-items: flex-start; gap: var(--sp-3); } .cart-row__name { min-width: 0; flex: 1 1 auto; font-size: var(--fs-base); font-weight: 500; line-height: 1.35; color: var(--ink-900); } .cart-row__name:hover { color: var(--ink-900); text-decoration: underline; } .cart-row__remove { flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--ink-500); transition: color var(--t-fast) var(--ease); } .cart-row__remove svg { width: 18px; height: 18px; } .cart-row__remove:hover { color: #c0392b; } .cart-row__chosen { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); } .cart-row__options { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .cart-row__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: 2px; } .cart-row__price { font-size: var(--fs-base); font-weight: 600; color: var(--ink-900); } /* -- Selecting lines ---------------------------------------------------- */ .cart-check { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 26px; flex: 0 0 auto; padding: 0; border: 1px solid var(--ink-300); border-radius: 50%; background: #fff; color: #fff; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .cart-list__head .cart-check { margin-top: 0; } .cart-check:hover { border-color: var(--ink-500); } .cart-check--on { border-color: var(--ink-900); background: var(--ink-900); } .cart-check__mark { width: 12px; height: 12px; } /* -- Quantity ------------------------------------------------------------ */ .cart-stepper { display: inline-flex; align-items: center; height: 34px; border-radius: var(--r-sm); background: var(--surface-muted); } .cart-stepper__btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-700); transition: color var(--t-fast) var(--ease); } .cart-stepper__btn svg { width: 15px; height: 15px; } .cart-stepper__btn:hover:not(:disabled) { color: var(--ink-900); } .cart-stepper__btn:disabled { opacity: 0.4; } .cart-stepper__value { min-width: 22px; text-align: center; font-size: var(--fs-base); font-weight: 500; color: var(--ink-900); } /* -- Changing an option in place ---------------------------------------- */ .cart-select { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 0; padding: 5px 10px; border-radius: var(--r-sm); background: var(--surface-muted); } .cart-select__label { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--ink-500); } .cart-select__input { min-width: 0; max-width: 150px; height: auto; padding: 0 16px 0 0; border: 0; background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; box-shadow: none; font-size: var(--fs-sm); color: var(--ink-900); cursor: pointer; appearance: none; -webkit-appearance: none; } .cart-select__input:focus { outline: none; } /* The popup a