/* ========================================================================== Wholesale Supplier UK - design system (ws.css) Theme: Wholesale/hyva-v3. Loaded in on every page, after Hyvä's Tailwind build (styles.css), so plain single-class selectors here win over the utility classes of equal specificity that vendor templates still use. Rules of the system - One content width: 80rem (1280px). Header, nav, main and footer share it. - Type: 16px body, nothing under 13px, 12px only for short uppercase labels. - Colour semantics: navy = headings, blue = links/interactive, orange = the single primary action on a page, green = stock/success only, red = clearance/urgency only. Every text/background pair here is AA at its size. - Components are prefixed ws-* and styled here, not with utility classes, because Tailwind's purge only knows the vendor templates. ========================================================================== */ :root, .ws { /* brand (darkened from the logo for AA text contrast) */ --ws-blue: #0a6ba5; --ws-blue-700: #085b8d; --ws-blue-600: #0b7cbf; --ws-blue-50: #eff8fd; --ws-blue-100: #d7edf9; --ws-orange: #e07d05; --ws-orange-500: #f09014; --ws-orange-50: #fff8ed; --ws-orange-100: #feecd2; /* semantic */ --ws-ink: #0f1b2d; --ws-body: #2f3b4e; /* 11.5:1 on white */ --ws-muted: #5b6b80; /* 5.5:1 on white, 5.1:1 on the tints */ --ws-line: #e3e8ef; --ws-line-soft: #eef1f6; --ws-surface: #ffffff; --ws-surface-alt: #f7f9fc; --ws-deal: #c2320f; --ws-deal-50: #fef4f1; --ws-deal-100: #fde2da; --ws-good: #0f7a52; --ws-good-50: #eefaf4; --ws-good-100: #d3f2e3; --ws-warn: #8a4b02; --ws-warn-50: #fff8ed; /* type scale */ --ws-fs-label: 0.75rem; /* 12px uppercase labels only */ --ws-fs-sm: 0.8125rem; /* 13px meta */ --ws-fs-base: 0.9375rem; /* 15px cards/nav */ --ws-fs-body: 1rem; /* 16px running text */ --ws-fs-md: 1.0625rem; /* 17px */ --ws-fs-price: 1.25rem; /* 20px card price */ --ws-fs-h3: 1.125rem; --ws-fs-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); /* 24 -> 32 */ --ws-fs-h1: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); /* 28 -> 44 */ /* shape */ --ws-radius: 0.75rem; --ws-radius-sm: 0.5rem; --ws-radius-lg: 1.125rem; --ws-radius-pill: 999px; --ws-shadow: 0 1px 2px rgba(15,27,45,.05), 0 1px 3px rgba(15,27,45,.06); --ws-shadow-md: 0 4px 6px -2px rgba(15,27,45,.06), 0 12px 20px -8px rgba(15,27,45,.12); --ws-shadow-lg: 0 10px 15px -6px rgba(15,27,45,.08), 0 24px 40px -16px rgba(15,27,45,.18); --ws-container: 80rem; --ws-gutter: 1rem; } @media (min-width: 640px) { :root { --ws-gutter: 1.5rem; } } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body { color: var(--ws-body); font-size: var(--ws-fs-body); line-height: 1.55; background: var(--ws-surface); } h1, h2, h3, h4 { color: var(--ws-ink); letter-spacing: -0.015em; } a { color: var(--ws-blue); } a:hover { color: var(--ws-blue-700); } [x-cloak] { display: none !important; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ws-orange-500); outline-offset: 2px; } /* One width for everything. Hyvä's .container steps up to 1536px and .columns had its own max-width; both are pinned to 1280 here so header, page and footer edges line up. */ .container, .columns, .page-main { max-width: var(--ws-container); margin-inline: auto; padding-inline: var(--ws-gutter); } .container, .page-main { width: 100%; } /* .page-wrapper is a flex column; auto margins would shrink-wrap */ /* The homepage paints full-bleed section bands and supplies its own .ws-container inside each. */ .cms-index-index .page-main, .cms-index-index .columns { max-width: none; padding-inline: 0; margin-inline: 0; } .cms-index-index .page-main { margin-top: 0; } /* hero band sits flush under the header (Hyvä adds 2rem) */ .ws-container { width: 100%; max-width: var(--ws-container); margin-inline: auto; padding-inline: var(--ws-gutter); } /* Hyvä wraps page content in #maincontent > .columns; give pages breathing room. */ .columns { padding-block: 1.25rem 2.5rem; } @media (min-width: 1024px) { .columns { padding-block: 1.5rem 3.5rem; } } .cms-index-index .columns { padding-block: 0; } /* Page title (Hyvä renders

) / .page-title-wrapper .page-title, h1.page-title { font-size: var(--ws-fs-h1); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; color: var(--ws-ink); } / Breadcrumbs / .breadcrumbs { font-size: var(--ws-fs-sm); color: var(--ws-muted); } .breadcrumbs a { color: var(--ws-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--ws-blue); text-decoration: underline; } .breadcrumbs .container { padding-block: 0.75rem 0; } / -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- / .ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.625rem 1.25rem; border: 1px solid transparent; border-radius: var(--ws-radius); font-size: var(--ws-fs-base); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; } .ws-btn svg { width: 1.0625rem; height: 1.0625rem; flex-shrink: 0; } .ws-btn:active { transform: translateY(1px); } .ws-btn:disabled { opacity: .6; cursor: default; transform: none; } .ws-btn--primary { background: var(--ws-orange); color: var(--ws-ink); box-shadow: 0 1px 2px rgba(15,27,45,.12); } .ws-btn--primary:hover { background: var(--ws-orange-500); color: var(--ws-ink); } .ws-btn--blue { background: var(--ws-blue); color: #fff; } .ws-btn--blue:hover { background: var(--ws-blue-700); color: #fff; } .ws-btn--outline { background: var(--ws-surface); color: var(--ws-ink); border-color: var(--ws-line); box-shadow: var(--ws-shadow); } .ws-btn--outline:hover { border-color: var(--ws-blue); color: var(--ws-blue); } .ws-btn--ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); } .ws-btn--ghost-light:hover { background: rgba(255,255,255,.22); color: #fff; } .ws-btn--sm { min-height: 2.5rem; padding: 0.5rem 0.875rem; font-size: var(--ws-fs-sm); border-radius: var(--ws-radius-sm); } .ws-btn--block { width: 100%; } / Pills / badges / .ws-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: var(--ws-radius-pill); font-size: var(--ws-fs-label); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; } .ws-pill svg { width: .8rem; height: .8rem; } .ws-pill--good { background: var(--ws-good-50); color: var(--ws-good); } .ws-pill--deal { background: var(--ws-deal); color: #fff; } .ws-pill--warn { background: var(--ws-orange-100); color: var(--ws-warn); } .ws-pill--muted { background: var(--ws-surface-alt); color: var(--ws-muted); } .ws-pill--blue { background: var(--ws-blue-50); color: var(--ws-blue); } / ========================================================================== HEADER Desktop: utility bar (36px) / main row (76px: logo, inline search, account, basket) / grouped nav (46px). Mobile: one 56px row - menu, logo, search toggle, basket - and the search field drops in beneath it on demand. ========================================================================== / .ws-header { position: relative; z-index: 30; background: var(--ws-surface); border-bottom: 1px solid var(--ws-line); } .ws-topbar { display: none; background: var(--ws-ink); color: #fff; font-size: var(--ws-fs-sm); } @media (min-width: 1024px) { .ws-topbar { display: block; } } .ws-topbarinner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.25rem; } .ws-topbarusp { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .ws-topbarusp li { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.88); font-weight: 500; } .ws-topbarusp svg { width: .875rem; height: .875rem; color: #7fd4ab; } .ws-topbarlinks { display: flex; align-items: center; gap: 1.25rem; } .ws-topbarlinks a { display: inline-flex; align-items: center; gap: .4rem; color: #fff; text-decoration: none; font-weight: 600; } .ws-topbarlinks a:hover { color: var(--ws-orange-500); } .ws-topbarlinks svg { width: .9rem; height: .9rem; } .ws-headerrow { display: flex; align-items: center; gap: .5rem; min-height: 3.5rem; } @media (min-width: 1024px) { .ws-headerrow { gap: 1.75rem; min-height: 4.75rem; } } .ws-headerlogo { display: flex; align-items: center; flex-shrink: 0; margin-inline: auto; } @media (min-width: 1024px) { .ws-headerlogo { margin-inline: 0; } } .ws-headerlogo a { display: flex; align-items: center; } / Source logo is 200x73 (1x). It is shown at its native size until a larger file is supplied; the slot is sized so a 2x asset can drop in unchanged. / .ws-headerlogo img { display: block; width: auto; height: 2.75rem; } @media (min-width: 1024px) { .ws-headerlogo img { height: 4.5rem; } } / Search: Hyvä's search-form.phtml renders inside .container with its own padding; those are neutralised so it sits inline. / .ws-headersearch { display: none; flex: 1 1 auto; min-width: 0; } .ws-headersearch .container { max-width: none; padding: 0; margin: 0; } @media (max-width: 1023.98px) { .ws-headersearch { order: 10; flex-basis: 100%; padding-bottom: .625rem; } .ws-headersearch.is-open { display: block; } } @media (min-width: 1024px) { .ws-headersearch { display: block; max-width: 40rem; } } .ws-header__search #search_mini_form { display: flex; border: 1.5px solid var(--ws-line); border-radius: var(--ws-radius); overflow: hidden; background: var(--ws-surface); transition: border-color .15s ease, box-shadow .15s ease; } .ws-header__search #search_mini_form:focus-within { border-color: var(--ws-blue); box-shadow: 0 0 0 3px rgba(10,107,165,.16); } .ws-header__search #search_mini_form input { flex: 1 1 auto; min-width: 0; border: 0; box-shadow: none; border-radius: 0; padding: .7rem .9rem; font-size: var(--ws-fs-base); color: var(--ws-ink); background: transparent; } .ws-header__search #search_mini_form input:focus { outline: none; box-shadow: none; } .ws-header__search #search_mini_form button { flex-shrink: 0; border: 0; border-radius: 0; background: var(--ws-blue); color: #fff; padding-inline: 1.1rem; min-width: 3rem; } .ws-header__search #search_mini_form button:hover { background: var(--ws-blue-700); } .ws-header__search #search_autocomplete { z-index: 40; } .ws-headeractions { display: flex; align-items: center; gap: .125rem; flex-shrink: 0; margin-left: auto; } @media (min-width: 1024px) { .ws-headeractions { gap: .375rem; margin-left: 0; } } .ws-iconbtn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-width: 2.75rem; min-height: 2.75rem; padding: .375rem .5rem; border: 0; border-radius: var(--ws-radius-sm); background: transparent; color: var(--ws-ink); font-size: var(--ws-fs-label); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; } .ws-iconbtn:hover { background: var(--ws-surface-alt); color: var(--ws-blue); } .ws-iconbtn svg { width: 1.5rem; height: 1.5rem; } .ws-iconbtnlabel { display: none; } @media (min-width: 1024px) { .ws-iconbtnlabel { display: block; } .ws-iconbtn { min-width: 3.5rem; } } .ws-iconbtn--search { display: inline-flex; } @media (min-width: 1024px) { .ws-iconbtn--search { display: none; } } .ws-iconbtncount { position: absolute; top: .125rem; right: .25rem; min-width: 1.125rem; height: 1.125rem; padding-inline: .3rem; border-radius: var(--ws-radius-pill); background: var(--ws-orange); color: var(--ws-ink); font-size: .6875rem; font-weight: 800; line-height: 1.125rem; text-align: center; } @media (min-width: 1024px) { .ws-iconbtncount { top: 0; right: .5rem; } } / Account dropdown (Magento_Customer::header/customer-menu.phtml) / .ws-account-menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60; min-width: 12rem; padding: .5rem; background: var(--ws-surface); border: 1px solid var(--ws-line); border-radius: var(--ws-radius); box-shadow: var(--ws-shadow-lg); } .ws-account-menu ul { list-style: none; margin: 0; padding: 0; } .ws-account-menu a, .ws-account-menu button { display: block; width: 100%; padding: .5rem .75rem; border: 0; border-radius: var(--ws-radius-sm); background: transparent; color: var(--ws-ink); font-size: var(--ws-fs-body); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; } .ws-account-menu a:hover, .ws-account-menu button:hover { background: var(--ws-surface-alt); color: var(--ws-blue); } .ws-headerburger { display: flex; flex-shrink: 0; } @media (min-width: 1024px) { .ws-headerburger { display: none; } } / ---- Grouped desktop nav ---- / .ws-nav { display: none; border-top: 1px solid var(--ws-line-soft); background: var(--ws-surface); } @media (min-width: 1024px) { .ws-nav { display: block; } } .ws-navinner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ws-navlist { display: flex; align-items: stretch; gap: .25rem; list-style: none; margin: 0; padding: 0; } .ws-navitem { position: relative; } .ws-navtop { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.875rem; padding: 0 .875rem; border: 0; background: transparent; border-bottom: 3px solid transparent; color: var(--ws-ink); font-size: var(--ws-fs-base); font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; } .ws-navtop svg { width: 1rem; height: 1rem; color: var(--ws-muted); transition: transform .15s ease; } .ws-navtop:hover, .ws-navtop[aria-expanded="true"] { color: var(--ws-blue); border-bottom-color: var(--ws-blue); } .ws-navtop[aria-expanded="true"] svg { transform: rotate(180deg); } .ws-navtop--deal { color: var(--ws-deal); } .ws-navtop--deal:hover { color: var(--ws-deal); border-bottom-color: var(--ws-deal); } .ws-navtop--deal .ws-pill { margin-left: .25rem; } .ws-navaside { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--ws-fs-sm); font-weight: 700; color: var(--ws-blue); text-decoration: none; white-space: nowrap; } .ws-navaside:hover { text-decoration: underline; } .ws-navaside svg { width: 1rem; height: 1rem; } .ws-mega { position: absolute; top: 100%; left: 0; z-index: 40; min-width: 18rem; padding: 1.25rem 1.5rem 1.5rem; background: var(--ws-surface); border: 1px solid var(--ws-line); border-top: 0; border-radius: 0 0 var(--ws-radius) var(--ws-radius); box-shadow: var(--ws-shadow-lg); } .ws-megacols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 14rem); gap: 1.75rem; } .ws-megacol { min-width: 0; } .ws-megahead { display: block; margin-bottom: .5rem; padding-bottom: .5rem; border-bottom: 2px solid var(--ws-line-soft); color: var(--ws-ink); font-size: var(--ws-fs-base); font-weight: 800; text-decoration: none; white-space: nowrap; } .ws-megahead:hover { color: var(--ws-blue); } .ws-megalist { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .ws-megalist a { display: block; padding: .3rem 0; color: var(--ws-body); font-size: var(--ws-fs-sm); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-megalist a:hover { color: var(--ws-blue); } .ws-megaall { display: inline-block; margin-top: .5rem; color: var(--ws-blue); font-size: var(--ws-fs-sm); font-weight: 700; text-decoration: none; } .ws-megaall:hover { text-decoration: underline; } / ---- Mobile menu (full-height panel) ---- / .ws-mmenubackdrop { position: fixed; inset: 0; z-index: 60; background: rgba(15,27,45,.55); } .ws-mmenu { position: fixed; top: 0; bottom: 0; left: 0; z-index: 61; width: min(22rem, 88vw); display: flex; flex-direction: column; background: var(--ws-surface); box-shadow: var(--ws-shadow-lg); overflow: hidden; } .ws-mmenuhead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .625rem .75rem .625rem 1rem; border-bottom: 1px solid var(--ws-line); } .ws-mmenuhead img { height: 2.25rem; width: auto; } .ws-mmenubody { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ws-mmenugroup { border-bottom: 1px solid var(--ws-line-soft); } .ws-mmenutoggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .9rem 1rem; border: 0; background: transparent; color: var(--ws-ink); font-size: var(--ws-fs-md); font-weight: 800; text-align: left; cursor: pointer; } .ws-mmenutoggle svg { width: 1.125rem; height: 1.125rem; color: var(--ws-muted); transition: transform .15s ease; } .ws-mmenutoggle[aria-expanded="true"] svg { transform: rotate(180deg); } .ws-mmenutoggle--deal { color: var(--ws-deal); text-decoration: none; } .ws-mmenulist { list-style: none; margin: 0; padding: 0 0 .5rem; background: var(--ws-surface-alt); } .ws-mmenulist a { display: block; padding: .6rem 1rem .6rem 1.25rem; color: var(--ws-body); font-size: var(--ws-fs-base); font-weight: 600; text-decoration: none; } .ws-mmenulist a.is-sub { padding-left: 2.25rem; font-weight: 500; color: var(--ws-muted); font-size: var(--ws-fs-sm); } .ws-mmenulist a:hover { color: var(--ws-blue); } .ws-mmenufoot { padding: 1rem; border-top: 1px solid var(--ws-line); display: grid; gap: .5rem; background: var(--ws-surface-alt); } .ws-mmenufoot a { display: flex; align-items: center; gap: .6rem; color: var(--ws-ink); font-size: var(--ws-fs-base); font-weight: 600; text-decoration: none; } .ws-mmenufoot svg { width: 1.125rem; height: 1.125rem; color: var(--ws-blue); } / ========================================================================== FOOTER ========================================================================== / .ws-footer { background: var(--ws-surface-alt); border-top: 1px solid var(--ws-line); color: var(--ws-body); font-size: var(--ws-fs-base); } .ws-footermain { padding-block: 2.5rem 2rem; } .ws-footergrid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 640px) { .ws-footergrid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1024px) { .ws-footergrid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: 2.5rem; } } .ws-footer h2 { font-size: var(--ws-fs-sm); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ws-ink); margin: 0 0 .875rem; } .ws-footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .ws-footer nav li a { color: var(--ws-body); text-decoration: none; } .ws-footer nav li a:hover { color: var(--ws-blue); text-decoration: underline; } .ws-footerbrand img { height: 3rem; width: auto; margin-bottom: .875rem; } .ws-footerbrand p { margin: 0 0 1rem; font-size: var(--ws-fs-sm); line-height: 1.55; color: var(--ws-muted); max-width: 26rem; } .ws-footerrating { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--ws-radius-sm); background: var(--ws-surface); border: 1px solid var(--ws-line); color: var(--ws-ink); text-decoration: none; font-size: var(--ws-fs-sm); font-weight: 600; } .ws-footerrating:hover { border-color: var(--ws-blue); } .ws-footerstars { display: inline-flex; gap: .1rem; color: #f5a623; } .ws-footerstars svg { width: .95rem; height: .95rem; fill: currentColor; stroke: currentColor; } .ws-footerrating b { color: var(--ws-ink); } .ws-footercontact address { font-style: normal; line-height: 1.55; } .ws-footercontact a { color: var(--ws-ink); font-weight: 600; text-decoration: none; } .ws-footercontact a:hover { color: var(--ws-blue); } .ws-footercontact dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; margin: .875rem 0 0; font-size: var(--ws-fs-sm); } .ws-footercontact dt { color: var(--ws-muted); } .ws-footercontact dd { margin: 0; color: var(--ws-body); } .ws-footernews { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--ws-line); display: grid; gap: 1rem; } @media (min-width: 900px) { .ws-footernews { grid-template-columns: 1fr 1fr; align-items: center; } } .ws-footernews h2 { margin-bottom: .25rem; font-size: var(--ws-fs-h3); text-transform: none; letter-spacing: -0.01em; } .ws-footernews p { margin: 0; font-size: var(--ws-fs-sm); color: var(--ws-muted); } .ws-footernews form { display: block; max-width: 30rem; } .ws-newsrow { display: flex; gap: .5rem; } .ws-newsrow .ws-input { flex: 1 1 auto; min-width: 0; } .ws-newsrow .ws-btn { flex-shrink: 0; } .ws-newserror { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 0; color: var(--ws-deal); font-size: var(--ws-fs-sm); } .ws-newslegal { margin-top: .5rem; font-size: var(--ws-fs-label); color: var(--ws-muted); } .ws-newslegal a { color: var(--ws-muted); text-decoration: underline; } .ws-input { min-height: 2.75rem; padding: .6rem .9rem; border: 1.5px solid var(--ws-line); border-radius: var(--ws-radius); background: var(--ws-surface); color: var(--ws-ink); font-size: var(--ws-fs-base); } .ws-input:focus { outline: none; border-color: var(--ws-blue); box-shadow: 0 0 0 3px var(--ws-blue-100); } .ws-footerbottom { border-top: 1px solid var(--ws-line); } .ws-footerbottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-block: 1rem; font-size: var(--ws-fs-sm); color: var(--ws-muted); } .ws-footerbottom-inner p { margin: 0; } .ws-footerpay { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; margin: 0; padding: 0; } .ws-footerpay li { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .55rem; border: 1px solid var(--ws-line); border-radius: .375rem; background: var(--ws-surface); font-size: .6875rem; font-weight: 800; letter-spacing: .03em; color: var(--ws-ink); text-transform: uppercase; } .ws-footerlegal { flex-basis: 100%; font-size: var(--ws-fs-sm); color: var(--ws-muted); margin: 0; } .ws-footerlegal a { color: var(--ws-muted); } / ========================================================================== PRODUCT CARD (shared by homepage, category, search, related) ========================================================================== / .ws-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 560px) { .ws-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (min-width: 900px) { .ws-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; } } @media (min-width: 1180px) { .ws-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } } / Category pages have a sidebar, so one column fewer at each step. / .ws-grid--plp { } @media (min-width: 1180px) { .page-layout-2columns-left .ws-grid--plp { grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (min-width: 1400px) { .page-layout-2columns-left .ws-grid--plp { grid-template-columns: repeat(5, minmax(0,1fr)); } } .ws-grid > li { display: flex; flex-direction: column; min-width: 0; } .ws-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--ws-surface); border: 1px solid var(--ws-line); border-radius: var(--ws-radius); box-shadow: var(--ws-shadow); overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .ws-card:hover { border-color: var(--ws-blue-100); box-shadow: var(--ws-shadow-md); transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .ws-card, .ws-deal, .ws-btn { transition: none; } .ws-card:hover { transform: none; } } .ws-cardmedia { position: relative; display: block; background: #fff; padding: .625rem; } .ws-cardmedia img, .ws-card__media picture img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; transition: transform .3s ease; } / Magento's image template emits with an inline