, which inlined
itself next to the field. */
.woocommerce-EditAccountForm #account_display_name_description {
display: block;
margin-top: 6px;
font: var(--text-caption);
font-style: normal;
color: var(--color-grey-700);
}
.woocommerce-EditAccountForm #account_display_name_description em {
font-style: normal;
}
.woocommerce-EditAccountForm fieldset {
margin: 8px 0 24px;
padding: 24px;
border: 1px solid var(--color-grey-200);
border-radius: 4px;
}
.woocommerce-EditAccountForm fieldset legend {
padding: 0 8px;
font: var(--text-body-lg-bold);
color: var(--color-grey-900);
}
.woocommerce-EditAccountForm .password-input {
display: block;
}
.myaccount-layout__content form button[type="submit"] {
height: 47px;
padding: 0 24px;
border: none;
border-radius: 100px;
background: var(--color-brand-blue);
color: var(--color-white);
font: var(--text-body-md);
cursor: pointer;
}
/* The save button sits in a bare after a floated field row. */
.woocommerce-EditAccountForm > p:last-of-type {
clear: both;
margin: 0;
}
/* ---- Login / register (woocommerce/myaccount/form-login.php, Figma
654:19669 / 654:19796). Rendered directly into #site-content, not wrapped
by my-account.php (WC never calls that template for a logged-out visitor -
see the comment there), so this owns its own page-level centering. */
.myaccount-auth {
max-width: 1630px;
margin: 60px auto;
display: flex;
justify-content: center;
gap: 40px;
}
.myaccount-auth__panel {
width: 100%;
max-width: 420px;
background: var(--color-white);
border-radius: 4px;
padding: 40px;
box-sizing: border-box;
}
.myaccount-auth__head {
text-align: center;
margin-bottom: 32px;
}
.myaccount-auth__head h2 {
font: var(--text-h4);
color: var(--color-grey-900);
margin: 0 0 8px;
}
.myaccount-auth__subtitle {
font: var(--text-body-regular);
color: var(--color-grey-700);
margin: 0;
}
.myaccount-auth .form-row {
margin: 0 0 16px;
}
.myaccount-auth label {
display: block;
font: var(--text-body-regular);
color: var(--color-grey-900);
margin-bottom: 6px;
}
.myaccount-auth .required {
color: var(--color-crimson);
text-decoration: none;
}
.myaccount-auth .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.myaccount-auth .input-text {
width: 100%;
height: 47px;
padding: 0 20px;
border: 1px solid var(--color-grey-200);
border-radius: 100px;
background: var(--color-white);
font: var(--text-body-lg);
color: var(--color-grey-900);
box-sizing: border-box;
}
.myaccount-auth__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.myaccount-auth__row .woocommerce-form-login__rememberme {
display: flex;
align-items: center;
gap: 8px;
font: var(--text-body-regular);
color: var(--color-grey-900);
}
.myaccount-auth .lost_password {
margin: 0;
font: var(--text-body-md);
}
.myaccount-auth .lost_password a,
.myaccount-auth__row .woocommerce-form-login__rememberme a {
color: var(--color-brand-blue);
}
.myaccount-auth .pill-btn--cta {
width: 100%;
}
.myaccount-auth__foot {
margin: 16px 0 0;
text-align: center;
font: var(--text-body-md);
}
.myaccount-auth__foot a {
color: var(--color-brand-blue);
}
/* WC's lost-password template ships form-row-first, which its own (dequeued)
stylesheet floats to 50% - without that CSS it's fine, but the row also
carries a .clear sibling, so make the width explicit either way. */
.myaccount-auth .form-row-first {
width: 100%;
float: none;
}
/* ---- WC's own "show password" toggle (core woocommerce.js wraps every
password field in .password-input and injects this button - not something
this theme adds, but its CSS is normally supplied by WC's own stylesheet,
which this theme dequeues entirely, so it rendered as a bare unstyled
overlapping button). Global, not scoped to .myaccount-auth - the same
wrapper appears on any WC form with a password field (lost/reset password,
edit-account). ---- */
.password-input {
position: relative;
display: block;
}
.show-password-input {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
width: 20px;
height: 20px;
padding: 0;
border: none;
background: url("assets/icons/eye.svg") no-repeat center / contain;
cursor: pointer;
}
.show-password-input.display-password {
background-image: url("assets/icons/eye-off.svg");
}
.password-input .input-text {
padding-right: 44px;
}
@media (max-width: 900px) {
.myaccount-auth {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 480px) {
.myaccount-auth__panel {
padding: 24px;
}
}
/* ---- Legal pages (Garantijas un atgriešana + siblings, Figma 344:6984 /
492:16093 / 492:16266) - reuses .shop-layout for the sidebar+content row. */
.legal-sidebar {
width: 390px;
flex-shrink: 0;
padding: 20px;
background: var(--color-white);
border-radius: 4px;
box-sizing: border-box;
}
.legal-sidebar__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.legal-sidebar__link {
display: block;
padding: 12px 20px;
border-radius: 100px;
font: var(--text-body-lg);
color: var(--color-grey-700);
}
.legal-sidebar__link.is-active {
background: var(--color-grey-100);
font: var(--text-body-lg-bold);
color: var(--color-brand-blue);
}
/* ---- Plain prose page (page-templates/prose.php, Figma 579:15598) ----
Konfidencialitātes politika and any other standalone document page: no
sidebar, numbered H2 sections, measured line length. */
.prose-page__title {
font: var(--text-h2);
color: var(--color-grey-900);
margin: 0 0 16px;
}
.prose-page__intro {
font: var(--text-body-lg);
color: var(--color-grey-700);
margin: 0 0 40px;
max-width: 900px;
}
/* ~80 characters. Full-width legal text across a 1630px page is unreadable. */
.prose-page__body {
font: var(--text-body-regular);
color: var(--color-grey-900);
max-width: 900px;
padding-bottom: 40px;
}
.prose-page__body h2 {
font: var(--text-h5);
color: var(--color-grey-900);
margin: 40px 0 16px;
}
.prose-page__body h2:first-child {
margin-top: 0;
}
.prose-page__body h3 {
font: var(--text-body-lg-bold);
color: var(--color-grey-900);
margin: 32px 0 12px;
}
.prose-page__body p {
margin: 0 0 20px;
line-height: 1.6;
}
.prose-page__body ul,
.prose-page__body ol {
margin: 0 0 20px;
padding-left: 21px;
}
.prose-page__body li {
margin-bottom: 8px;
line-height: 1.6;
}
.prose-page__body a {
color: var(--color-brand-blue);
text-decoration: underline;
}
.prose-page__body table {
width: 100%;
border-collapse: collapse;
margin: 0 0 24px;
}
.prose-page__body th,
.prose-page__body td {
padding: 12px 16px;
text-align: left;
border: 1px solid var(--color-grey-200);
}
.legal-content {
flex: 1;
min-width: 0;
}
.legal-content__title {
font: var(--text-h4);
color: var(--color-grey-900);
margin: 0 0 40px;
}
.legal-content__body {
font: var(--text-body-regular);
color: var(--color-grey-900);
max-width: 800px;
}
.legal-content__body p {
margin: 0 0 24px;
}
.legal-content__body ul {
margin: 0 0 24px;
padding-left: 21px;
}
.legal-content__body li {
margin-bottom: 8px;
}
/* 3-column product grid, reusing product-card */
.shop-grid.products {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
/* stretch + .product-card{height:100%} is what actually equalises a row.
The fixed part-heights (2-line title, 68px price) get most of the way
there, but anything else that varies - a wrapped button, a taller image
box - still left rows ragged. */
align-items: stretch;
}
/* Neutralize WooCommerce's default ul.products li.product float/width/margin so
our grid controls the layout. */
.shop-grid.products li.product {
width: auto;
float: none;
margin: 0;
clear: none;
}
.shop-archive__empty {
font: var(--text-body-lg);
color: var(--color-grey-700);
}
/* ---- Katalogs landing page (Figma 125:5053) - category tiles + Populāras
slider + intro block. Distinct from the product-grid archive above. ---- */
.catalog-landing__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.catalog-landing__subtitle {
font: var(--text-body-lg);
color: var(--color-grey-700);
margin: 8px 0 0;
}
.catalog-landing__search {
flex-shrink: 0;
}
/* Fixed 5 columns on desktop (not auto-fill) - Rob wants exactly 5 per row on
desktop regardless of container width, wrapping to fewer only on smaller
breakpoints (see the @media rules further down). */
.catalog-tiles {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
margin-bottom: 140px;
}
@media (max-width: 1440px) {
.catalog-tiles {
grid-template-columns: repeat(4, 1fr);
}
}
.catalog-tile {
position: relative;
height: 240px;
border-radius: 4px;
overflow: hidden;
text-decoration: none;
display: block;
}
/* Real per-category photo (WooCommerce category thumbnail, or the shared WC
placeholder if none is set yet) - sits bottom-right, capped at ~160px tall,
never cropped or stretched (object-fit:contain preserves the source image's
own proportions untouched). */
.catalog-tile__photo {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.catalog-tile__photo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom right;
}
.catalog-tile__name {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
font: var(--text-h4);
color: var(--color-grey-900);
/* Was raw overflow clipping - a wrapped title's last line got cut mid-glyph
right at the tile's edge instead of stopping between lines, which read as
text bleeding into the section below. Real 2-line clamp + ellipsis instead. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.catalog-tile__badge {
position: absolute;
bottom: 20px;
left: 20px;
width: 40px;
height: 40px;
}
.catalog-tile__badge img {
width: 100%;
height: 100%;
}
.catalog-intro {
position: relative;
background: var(--color-white);
border-radius: 4px;
padding: 32px;
overflow: hidden;
min-height: 266px;
display: flex;
align-items: center;
/* Nothing was pushing this away from the Populāras preces grid above it -
.product-row's margin is on ITS OWN top, not a bottom margin, so the two
sat flush against each other. */
margin-top: 100px;
}
@media (max-width: 1024px) {
.catalog-intro {
margin-top: 60px;
}
}
@media (max-width: 767px) {
.catalog-intro {
margin-top: 40px;
}
}
.catalog-intro__copy {
max-width: 509px;
position: relative;
z-index: 1;
}
.catalog-intro__copy h2 {
font: var(--text-h4);
color: var(--color-grey-900);
margin: 0 0 24px;
}
.catalog-intro__copy p {
font: var(--text-body-regular);
color: var(--color-grey-700);
margin: 0 0 16px;
}
.catalog-intro__image {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 686px;
max-width: 45%;
object-fit: cover;
}
@media (max-width: 500px) {
.catalog-tile {
height: 150px;
}
.catalog-tile__name {
font: var(--text-body-lg-bold);
}
}
@media (max-width: 767px) {
.catalog-intro {
flex-direction: column;
align-items: flex-start;
}
.catalog-intro__image {
position: static;
width: 100%;
max-width: 100%;
height: 200px;
margin-top: 24px;
}
}
/* WooCommerce pagination */
.shop-archive .woocommerce-pagination {
margin-top: 40px;
text-align: center;
}
.shop-archive .woocommerce-pagination ul {
display: inline-flex;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.shop-archive .woocommerce-pagination a,
.shop-archive .woocommerce-pagination span {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 100px;
background: var(--color-grey-100);
color: var(--color-grey-900);
text-decoration: none;
}
.shop-archive .woocommerce-pagination .current {
background: var(--color-brand-blue);
color: var(--color-white);
}
/* Only the COLUMN COUNT moves up - three product columns beside a 390px
sidebar stay cramped well past 1440, so 2-up holds all the way to 1560.
The sidebar itself keeps stacking at 1200, where it always did. */
@media (max-width: 1560px) {
.shop-grid.products {
grid-template-columns: repeat(2, 1fr);
}
}
/* Full-width gutter from 1440, matching the header (.site-header__inner drops
to 20px at the same breakpoint) - .shop-archive__inner is the shared
container for the cart, Garantijas/Kontakti/Par mums, wishlist and the
product page's breadcrumb/tail sections, so fixing it here covers all of
them instead of patching each page. Previously this only narrowed at
1200px, so those pages stayed boxed in well after the header had already
gone edge-to-edge. */
@media (max-width: 1440px) {
.shop-archive__inner {
padding-left: 20px;
padding-right: 20px;
}
}
@media (max-width: 1200px) {
.shop-archive__inner {
padding-top: 24px;
padding-bottom: 60px;
}
.shop-layout {
flex-direction: column;
}
.shop-sidebar {
width: 100%;
}
.catalog-tiles {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
.shop-grid.products {
grid-template-columns: 1fr;
}
.catalog-tiles {
grid-template-columns: repeat(2, 1fr);
}
}
/* ---- Header flyout menus (☰ main menu 73:1558, Katalogs mega-menu 87:1875) ---- */
/* Shared dark backdrop behind either open flyout, with the X close button. */
.menu-overlay {
position: fixed;
inset: 0;
background: rgba(13, 27, 40, 0.4);
z-index: 1000;
}
.menu-overlay__close {
position: fixed;
top: 40px;
right: 40px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
color: var(--color-white);
cursor: pointer;
z-index: 1002;
}
/* Shared flyout panel - fixed to the left edge, full height, white. */
.flyout {
position: fixed;
top: 0;
left: 0;
height: 100vh;
background: var(--color-white);
border-right: 1px solid var(--color-grey-200);
padding: 60px;
overflow-y: auto;
z-index: 1001;
}
.flyout--catalog {
width: 286px;
}
.flyout__title {
display: block;
text-decoration: none;
font: var(--text-h4);
color: var(--color-grey-900);
margin: 0 0 40px;
}
/* Main (hamburger) menu - single client-editable column. */
.main-menu__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.main-menu__list a {
display: block;
padding: 10px 0;
font: var(--text-body-lg);
color: var(--color-grey-700);
text-decoration: none;
white-space: nowrap;
}
.main-menu__list a:hover,
.main-menu__list .current-menu-item > a {
color: var(--color-brand-blue);
}
/* Katalogs mega-menu - parents column + hover-revealed children column. */
.catalog-menu__parents {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Same treatment as .main-menu__list: the click target was only the text's own
line-height, with dead space between items. Padding moves into the link so
the whole row is clickable; the list gap shrinks to compensate, keeping the
overall column height (and therefore the layout) unchanged. */
.catalog-menu__parent-link,
.catalog-menu__child-link {
display: block;
padding: 10px 0;
font: var(--text-body-lg);
color: var(--color-grey-700);
text-decoration: none;
white-space: nowrap;
}
.catalog-menu__parent.is-active > .catalog-menu__parent-link,
.catalog-menu__parent-link:hover,
.catalog-menu__child-link:hover {
color: var(--color-brand-blue);
}
/* Children sit as a second white panel immediately right of the 286px parents
column, full height, top-aligned to match the parent list (142px = 60 pad +
title + gap). Only the active parent's children are shown (JS toggles
.is-active on mouseenter). position:fixed (not absolute) so the panel escapes
the parents column's overflow-y:auto - otherwise overflow-x clips it away. */
.catalog-menu__children {
position: fixed;
left: 286px;
top: 0;
height: 100vh;
min-width: 286px;
background: var(--color-white);
border-right: 1px solid var(--color-grey-200);
padding: 142px 60px 60px;
margin: 0;
list-style: none;
display: none;
flex-direction: column;
gap: 4px;
overflow-y: auto;
z-index: 1;
}
.catalog-menu__parent.is-active > .catalog-menu__children {
display: flex;
}
/* ---- Site footer ---- */
#site-footer {
margin-top: 80px;
background: var(--color-grey-50);
border-top: 1px solid var(--color-grey-200);
}
.site-footer__inner {
box-sizing: border-box;
max-width: 1920px;
margin: 0 auto;
/* 28px top, not 48 (Figma 161:1220). */
padding: 28px 145px 48px;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
gap: 32px;
}
.site-footer__logo {
height: 32px;
width: auto;
margin-bottom: 16px;
}
.site-footer__hours {
font: var(--text-body-regular);
color: var(--color-grey-700);
margin: 0 0 16px;
}
.site-footer__socials {
display: flex;
gap: 12px;
}
.site-footer__socials a {
width: 64px;
height: 64px;
border-radius: 100px;
background: var(--color-grey-200);
display: flex;
align-items: center;
justify-content: center;
}
.site-footer__socials a img {
/* Figma 95:2231: 24px glyph inside the 64px circle (was 28, read too big). */
width: 24px;
height: 24px;
}
.site-footer__payment-icons {
display: flex;
gap: 12px;
margin-bottom: 8px;
}
/* 64px grey-200 icon pill. On hover a SEPARATE semi-transparent pill (the
provider name) overlaps its right edge - Figma tooltip is Greyscale/400 at
50% (#979797), not a merge into the chip. */
.site-footer__payment-chip {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 40px;
border-radius: 100px;
background: var(--color-grey-200);
flex-shrink: 0;
}
.site-footer__payment-chip[data-name]:hover::after {
content: attr(data-name);
position: absolute;
/* Overlaps the chip's right edge, vertically centred (Figma). */
left: calc(100% - 14px);
top: 24%;
transform: translateY(-50%);
padding: 8px 16px;
border-radius: 100px;
background: rgb(184 184 184);
color: var(--color-grey-900);
font: var(--text-body-md);
white-space: nowrap;
pointer-events: none;
z-index: 2;
}
.site-footer__payment-icons img {
height: 24px;
width: auto;
flex-shrink: 0;
}
/* Phone + email as grey pills, address as icon + text (Figma 161:1220). */
.site-footer__contact {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
/* inline-grid so both pills size to the WIDER of the two (Figma pins them to
one width); justify-items:stretch makes the shorter one grow to match. */
.site-footer__contact-pills {
display: inline-grid;
gap: 8px;
justify-items: stretch;
}
.site-footer__chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 20px;
border-radius: 100px;
background: var(--color-grey-100);
color: var(--color-grey-900);
font: var(--text-body-regular);
transition: color 0.15s ease;
}
.site-footer__chip:hover {
color: var(--color-brand-blue);
}
.site-footer__address {
display: flex;
/* Centre the pin against the text (Figma address is items-center) - it sat
a few px low with flex-start + a margin nudge. */
align-items: center;
gap: 8px;
margin: 0;
font: var(--text-body-regular);
color: var(--color-grey-700);
transition: color 0.15s ease;
}
.site-footer__address:hover {
color: var(--color-brand-blue);
}
.site-footer__address img {
flex-shrink: 0;
}
.site-footer__heading {
/* 18px bold (Figma 95:2250) - was 14px medium. */
font: var(--text-body-lg-bold);
color: var(--color-grey-900);
margin: 0 0 16px;
}
.site-footer__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.site-footer__links a,
.site-footer__links li {
font: var(--text-body-regular);
/* Dark, not grey-700 (Figma link colour #0D1B28); blue on hover. */
color: var(--color-grey-900);
transition: color 0.15s ease;
}
.site-footer__links a:hover {
color: var(--color-brand-blue);
}
.site-footer__payments {
font: var(--text-body-regular);
color: var(--color-grey-700);
margin: 0;
}
.site-footer__bottom {
box-sizing: border-box;
max-width: 1920px;
margin: 0 auto;
padding: 20px 145px;
border-top: 1px solid var(--color-grey-200);
display: flex;
justify-content: space-between;
/* 14px (Figma 95:2283), not 12px caption. */
font: var(--text-body-regular);
color: var(--color-grey-700);
}
.site-footer__bottom p {
margin: 0;
}
.site-footer__bottom a {
color: var(--color-grey-700);
text-decoration: underline;
}
/* Baseline, NOT center: the mark is bottom-heavy - inside its 18px box the
"coma" wordmark occupies y 9-17.5 with the three dots floating above it, so
the box's vertical centre sits well above the wordmark's. Centring the box
therefore pushes the visible letters below the text baseline. Aligning on
the baseline puts the wordmark's foot on the text's foot, which is what the
eye reads as level. */
.site-footer__credit {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.site-footer__credit a {
display: inline-flex;
align-items: baseline;
text-decoration: none;
}
.site-footer__credit img {
display: block;
}
/* Footer mobile rules live in the RESPONSIVE SWEEP block further down, so they
come after the <=1024px tablet rules and actually win at phone widths
(equal specificity - source order decides). */
/* ============================================================================
RESPONSIVE SWEEP - found by auditing every page at a 390px viewport and
measuring real horizontal overflow (document.scrollWidth vs clientWidth),
not by eyeballing screenshots.
The theme was built desktop-first and MOST components never got a mobile
rule at all: fixed-width sidebars (390px/527px) and hardcoded 4-column
grids stayed at their desktop size on a phone, pushing the whole document
sideways. Every rule below is tied to a specific measured offender.
========================================================================= */
/* ---- Two-column page layouts: the sidebars were fixed-width and never
collapsed. .shop-layout already went column at 1200px, but only
.shop-sidebar got width:100% there - .legal-sidebar (390px),
.cart-layout__sidebar and .checkout-layout__sidebar (both 527px) all
kept their desktop width and overflowed. ---- */
@media (max-width: 1200px) {
.cart-layout,
.checkout-layout {
flex-direction: column;
}
/* THE key fix. All three layouts set `align-items: flex-start`, which in a
COLUMN flex container makes each child size to fit-content on the cross
(horizontal) axis instead of stretching. fit-content can exceed the
container, so children ballooned to their min-content width (e.g. the
sort bar forced .shop-layout__main to 496px inside a 232px parent) and
`min-width: 0` did nothing, because the overflow wasn't a min-width
problem at all. Stretch makes them honour the container width. */
.shop-layout,
.cart-layout,
.checkout-layout {
align-items: stretch;
}
.legal-sidebar,
.cart-layout__sidebar,
.checkout-layout__sidebar {
width: 100%;
position: static; /* sticky is meaningless once stacked full-width */
}
/* Stacked cart order: title, summary, items, policy accordion - the summary
has to come BEFORE the item list, so it can't just be `order` on the two
columns: the title and the item list are siblings inside
.cart-layout__main, and the summary is in the other column entirely.
`display: contents` drops __main's box so its three children become
direct flex items of .cart-layout, which puts all four in one ordering
context. Safe on a plain div (the display:contents a11y bug applies to
elements with their own semantics, e.g. ul/table).
Their own vertical margins are zeroed so the container's 24px gap is the
single source of spacing instead of stacking on top of them. */
.cart-layout__main {
display: contents;
}
.cart-layout .cart-page__head {
order: 1;
margin-bottom: 0;
}
.cart-layout__sidebar {
order: 2;
}
.cart-layout .woocommerce-cart-form {
order: 3;
}
.cart-layout .cart-policy {
order: 4;
margin-top: 0;
}
/* Stacked, the checkout sections run straight into each other. */
.checkout-layout {
gap: 40px;
}
.checkout-section-title {
margin-top: 40px;
}
.woocommerce-account-fields {
margin: 20px 0 32px;
}
.checkout-shipping {
margin-bottom: 0;
}
/* .product-page carries its own 145px side padding with no override,
which alone offset the whole page 145px past a phone viewport. */
.product-page {
padding: 24px 24px 60px;
}
}
/* ---- Cart line items on narrow screens ----
The row is thumb + name + stepper + wishlist + remove on one line. The
stepper and the two icon buttons are all fixed-width and unshrinkable, so
below ~550px every pixel comes out of the name column - the title was being
squeezed to one or two characters per line. Break the row in two instead:
thumb + text across the top, controls on their own line underneath. */
@media (max-width: 550px) {
.cart-item {
flex-wrap: wrap;
align-items: center;
/* Only affects the controls line - the thumb+name line above always
fills its full width, so centring is a no-op there. */
justify-content: center;
row-gap: 12px;
}
/* Sized to exactly finish the first line (64px thumb + 16px gap), which is
what keeps the three controls together on line two. Giving the stepper a
100% basis instead pushed it onto a line of its own and bumped the
wishlist/remove buttons down to a third. */
.cart-item__info {
flex: 1 1 calc(100% - 80px);
}
.cart-item__qty {
flex: 0 0 auto;
}
/* Scale the 56px control set down so the stepper + two buttons still fit
one line on a phone. */
.cart-item__qty .quantity {
width: 124px;
height: 44px;
padding: 3px;
}
.cart-item__qty .qty-step {
width: 32px;
height: 32px;
}
.cart-item__qty .qty-step--plus {
width: 38px;
height: 38px;
}
.cart-item__wishlist,
.cart-item__remove {
width: 44px;
height: 44px;
}
.cart-item__wishlist img,
.cart-item__remove img {
width: 20px;
height: 20px;
}
}
/* ---- Coupon row + place-order button on very narrow screens ---- */
@media (max-width: 400px) {
/* Field and button side by side leaves the input a ~60px stub. */
.cart-coupon__row {
flex-direction: column;
align-items: stretch;
}
/* The 40px pill reads as squashed once it's full-width and stacked above a
button of the same height - both go up to the 48px the other inputs use. */
.cart-coupon__field {
height: 48px;
}
.cart-coupon__submit {
width: 100%;
height: 48px;
}
/* Once the label wraps to two lines the default left-ish alignment reads
as broken - the button is full-width, so centre both lines. */
.cart-summary__checkout,
.cart-summary__disabled,
.wc-proceed-to-checkout .checkout-button {
height: auto;
min-height: 56px;
padding: 12px 20px;
text-align: center;
text-wrap: balance;
}
}
/* ---- Product grids that were hardcoded to 4 columns with no breakpoint.
Measured: related products alone pushed the single-product page 1154px
past the viewport at 390px. ---- */
@media (max-width: 1200px) {
.related.products ul.products,
.jaunumi-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.related.products ul.products,
.jaunumi-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.related.products ul.products,
.jaunumi-grid {
grid-template-columns: 1fr;
}
}
/* ---- Grid items must be allowed to shrink. A `1fr` track's automatic minimum
is the item's MIN-CONTENT, so a product card with a long unbreakable title
set a floor far wider than its column and blew the whole grid out - measured
350-380px of overflow even at 1440px desktop on every product grid (shop,
category, search, related products). min-width:0 removes that floor; the
cards already have overflow:hidden so their contents clip cleanly. ---- */
.shop-grid.products > li,
.shop-grid__item,
.related.products ul.products > li,
.jaunumi-grid > li,
.catalog-tiles > * {
min-width: 0;
}
.shop-grid.products .product-card,
.related.products .product-card,
.jaunumi-grid .jaunumi-card {
min-width: 0;
}
/* ---- TABLET (<=1024). Everything here was originally written as a 767px-only
rule, which left a 768-1024px tablet showing the untouched desktop layout -
measured, that overflowed 100-370px on literally every page. These are all
"stop being a rigid desktop row" rules, so they belong at tablet width. ---- */
@media (max-width: 1024px) {
/* Category/search archive: .shop-sort-bar__search is width:340px, which
set a min-content floor of 496px on .shop-layout__main and dragged the
whole grid past the viewport. */
.shop-sort-bar__search {
width: 100%;
margin-left: 0;
}
.shop-sort-bar,
.shop-sort-bar__filters {
width: 100%;
}
/* Kontakti's 3 contact cards were a non-wrapping flex row (416px over). */
.kontakti-cards {
flex-direction: column;
}
/* Product summary: qty stepper + add-to-cart + heart on one line put the
heart 169px past the right edge. */
.product-page__cart-row {
flex-wrap: wrap;
}
/* Apraksts/Lietošana/Sastāvs segmented control is wider than 360px. */
.woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
}
/* Pagination is a non-wrapping inline-flex row - 7+ page links ran 160px
past the edge on a category archive. */
.shop-archive .woocommerce-pagination ul {
flex-wrap: wrap;
justify-content: center;
}
/* My Account: stat cards and the address/payment prompt cards were both
non-wrapping flex rows (296px and 136px over). */
.myaccount-stats,
.myaccount-prompts {
flex-direction: column;
gap: 12px;
}
/* Katalogs landing header: the search keeps its desktop width because of
flex-shrink:0, so it pushed the head row past the viewport. */
.catalog-landing__search {
flex-shrink: 1;
width: 100%;
}
.catalog-landing__search .shop-sort-bar__search,
.catalog-landing__search form {
width: 100%;
}
/* Par mums "Kāpēc izvēlēties" - 6 cards in a non-wrapping flex row. */
.parmums-whyus__grid {
flex-wrap: wrap;
}
.parmums-card {
flex: 1 1 calc(33.333% - 14px);
}
/* Footer kept its desktop 5-column grid + 145px side padding until 767px,
so a 768px tablet overflowed by 100px on every single page. */
.site-footer__inner {
grid-template-columns: repeat(3, 1fr);
padding: 40px 24px;
}
.site-footer__bottom {
padding: 20px 24px;
}
}
@media (max-width: 767px) {
.parmums-card {
flex-basis: calc(50% - 11px);
}
/* #site-content's 40px side padding stacked on top of each inner
container's own 24px left only 232px of usable width on a 360px screen.
Trim both so content gets a sane share of a phone viewport. */
#site-content {
padding: 0 12px;
}
.shop-archive__inner,
.product-page {
padding-left: 12px;
padding-right: 12px;
}
/* Newsletter box on a phone: give the card breathing room top and bottom,
and pull the form up closer to the subtitle (the desktop 60px gap reads
as a hole on a narrow screen). */
.newsletter-signup {
padding: 40px 20px;
margin-top: 30px;
margin-bottom: 30px;
}
.newsletter-signup__subtitle {
margin-bottom: 32px;
}
.newsletter-signup__form {
flex-wrap: wrap;
}
.newsletter-signup__input {
flex-basis: 100%;
}
/* Footer: 2 columns on a phone, brand block full width. */
.site-footer__inner {
padding: 32px 20px;
grid-template-columns: 1fr 1fr;
gap: 32px 20px;
}
.site-footer__col--brand {
grid-column: 1 / -1;
}
.site-footer__bottom {
padding: 20px;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
text-align: center;
}
}
/* The cart coupon row (input + "Lietot kuponu" button) is a non-wrapping
flex row that ran 2px past a 360px viewport. */
@media (max-width: 767px) {
.coupon {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.coupon .pill-btn,
.coupon input {
flex: 1 1 100%;
box-sizing: border-box;
}
}
/* ---- Cart policy tabs: Garantijas / Piegāde / Apmaksa (Figma 211:3949,
segments 275:7332, panel 275:7333) ---- */
.cart-policy {
margin-top: 32px;
max-width: 700px;
}
.cart-policy__segments {
display: flex;
gap: 4px;
padding: 3.5px;
border-radius: 100px;
background: var(--color-grey-200);
}
/* nowrap keeps each label on one line (Figma 275:7494 - one line, 49px tall;
"Garantijas un atgriešana" wrapping to two was what doubled the control's
height). Paired with `min-width: max-content` - flex's default min-width:auto
was still letting a segment shrink narrower than its own nowrap text, so the
label spilled outside its pill instead of the pill growing to hold it. */
.cart-policy__segment {
flex: 1 1 auto;
min-width: max-content;
padding: 12px 24px;
border: none;
border-radius: 100px;
background: none;
color: var(--color-grey-900);
font: var(--text-body-lg);
line-height: 1.4;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
}
.cart-policy__segment.is-active {
background: var(--color-grey-50);
font: var(--text-body-lg-bold);
}
.cart-policy__panel {
display: none;
padding-top: 24px;
}
.cart-policy__panel.is-active {
display: block;
}
.cart-policy__prose {
font: var(--text-body-regular);
color: var(--color-grey-700);
}
.cart-policy__prose p {
margin: 0 0 12px;
}
.cart-policy__link {
color: var(--color-brand-blue);
}
.cart-policy__pickup {
margin: 0 0 16px;
font: var(--text-body-regular);
color: var(--color-grey-700);
}
.cart-policy__region {
border-radius: 4px;
overflow: hidden;
margin-bottom: 4px;
}
/* grey-200, NOT grey-100: grey-100 (#F5F4F4) is within a hair of the page
background, so the header band was effectively invisible and the accordion
read as unstyled. Same recurring trap as the tab pills and FAQ circles.
Left padding is 24px (was 44) - the design indents the chevron about half
that far. */
.cart-policy__region-head {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 52px;
padding: 0 24px;
border: none;
background: var(--color-grey-200);
color: var(--color-grey-900);
font: var(--text-body-md);
font-weight: 700;
text-align: left;
cursor: pointer;
box-sizing: border-box;
}
.cart-policy__chevron {
flex-shrink: 0;
transition: transform 0.15s ease;
}
.cart-policy__region.is-open .cart-policy__chevron {
transform: rotate(180deg);
}
.cart-policy__rates {
display: none;
list-style: none;
margin: 0;
padding: 0;
}
/* flex + gap, not plain block: the rows are white cards separated by a hairline
of the page behind them, which is what makes them read as separate rates
rather than one unstyled slab. */
.cart-policy__region.is-open .cart-policy__rates {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 2px;
}
/* Prose body of a Garantijas accordion - same white panel as the Piegāde
tab's rate rows, so both tabs read as one component. */
.cart-policy__region-body {
display: none;
}
.cart-policy__region.is-open .cart-policy__region-body {
display: block;
margin-top: 2px;
padding: 20px 24px;
background: var(--color-white);
}
.cart-policy__region-body .cart-policy__prose > *:last-child {
margin-bottom: 0;
}
.cart-policy__rate {
display: flex;
align-items: center;
gap: 16px;
height: 50px;
padding: 0 24px;
background: var(--color-white);
font: var(--text-body-regular);
color: var(--color-grey-700);
box-sizing: border-box;
}
/* Fixed basis rather than flex:1 - the design sets the price in its OWN column
right after the name (all three prices line up), instead of letting the name
push it across to sit against the free-delivery text on the right. */
.cart-policy__rate-name {
flex: 0 1 180px;
min-width: 0;
}
.cart-policy__rate-price {
flex-shrink: 0;
color: var(--color-grey-900);
}
.cart-policy__rate-free {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
.cart-policy__rate-free strong {
color: var(--color-grey-900);
font-weight: 500;
}
.cart-policy__rate-free em {
font-style: normal;
color: var(--color-brand-green);
}
@media (max-width: 767px) {
.cart-policy__segment,
.cart-policy__segment.is-active {
font: var(--text-caption);
padding: 12px 8px;
/* Three nowrap labels can't fit a phone row - let them wrap here, and
drop the max-content floor with them or they'd still overflow. */
white-space: normal;
min-width: 0;
}
/* The desktop .is-active rule sets a full `font` shorthand (700 18px), which
at equal specificity would otherwise win over the caption-size rule above
regardless of source order - restated here so the active tab shrinks with
everything else on mobile instead of staying desktop-sized. */
.cart-policy__segment.is-active {
font-weight: 700;
}
.cart-policy__region-head,
.cart-policy__rate {
padding: 0 16px;
}
/* The name's 180px basis is most of a phone row - let it collapse so the
price and free-delivery text wrap underneath instead of overflowing. */
.cart-policy__rate-name {
flex: 1 1 100%;
}
.cart-policy__rate {
height: auto;
flex-wrap: wrap;
gap: 4px 12px;
padding-top: 12px;
padding-bottom: 12px;
}
.cart-policy__rate-free {
margin-left: 0;
flex-basis: 100%;
}
}
/* ---- Block-area vertical rhythm (Par mums, and any page built from these
blocks) ----
The gaps were compounding from three sources at once: each block's
.shop-archive__inner carries 40px top / 80px bottom padding, AND the
section inside it had its own margin-bottom (64px or 140px), AND the next
block added its own top padding. Measured that's 184px+ where the design
asks for 100px.
Fix: strip the vertical padding and the per-section margins inside the
block area, then set ONE gap between adjacent blocks. margin-top only (never
bottom) so two rules can never add up. */
.page-blocks .shop-archive__inner {
padding-top: 0;
padding-bottom: 0;
}
/* ...but Cart, Checkout and My Account are ordinary WP pages, so since page.php
was added they render through .page-blocks too - and the rule above was
silently stripping the 40px/80px their own .shop-archive__inner is supposed
to have, leaving the breadcrumb jammed against the header. They are the only
.page-blocks children that sit inside WooCommerce's own .woocommerce wrapper
(the ACF prose blocks are not), which is what separates them here. */
.page-blocks > .woocommerce > .shop-archive__inner {
padding-top: 40px;
padding-bottom: 80px;
}
@media (max-width: 1200px) {
.page-blocks > .woocommerce > .shop-archive__inner {
padding-top: 24px;
padding-bottom: 60px;
}
}
.page-blocks .perks-strip,
.page-blocks .parmums-intro,
.page-blocks .parmums-europe,
.page-blocks .parmums-whyus,
.page-blocks .parmums-cta,
.page-blocks .newsletter-signup,
.page-blocks .page-hero,
.page-blocks .delivery-tabs,
.page-blocks .delivery-pickup,
.page-blocks .pn-intro,
.page-blocks .pn-steps,
.page-blocks .faq-accordion {
margin-top: 0;
margin-bottom: 0;
}
/* Default gap between any two stacked blocks (Figma 458:16347: 100px). */
.page-blocks > .vio-block + .vio-block {
margin-top: 100px;
}
/* These two must stay AFTER the generic rule above: same specificity
(three classes each), so whichever comes LAST in the file wins. They
used to sit before it and were silently overridden by the 100px
default - confirmed live (delivery-regions was getting 100px instead
of the intended 40px below the Piegāde page-hero). */
/* The page-hero is a plain heading, not a full-bleed band, so what follows sits
closer to it than the standard 100px (Figma 750:24030: subtitle ends y=387,
the tabs start y=427). */
.page-blocks > .vio-block--page-hero + .vio-block {
margin-top: 40px;
}
/* Pirkuma nosacījumi gives the signup more air than the default gap - 140px
above and below it (Figma 585:16742: steps end 1135, subscription 1275-1775,
BUJ 1915). Scoped to the page so Par mums keeps its own rhythm. */
.page-blocks--pirkuma-nosacijumi > .vio-block--newsletter,
.page-blocks--pirkuma-nosacijumi > .vio-block--newsletter + .vio-block {
margin-top: 140px;
}
/* The Europe section is the one that breathes more - 140px above and below. */
.page-blocks > .vio-block--europe,
.page-blocks > .vio-block--europe + .vio-block {
margin-top: 140px;
}
/* The hero is a full-bleed band: it butts straight up against whatever
follows in the design, no 100px gap above it. */
.page-blocks > .vio-block--hero {
margin-top: 0;
}
.page-blocks > .vio-block--hero + .vio-block {
margin-top: 64px;
}
/* Last block shouldn't leave the footer glued to it. */
.page-blocks > .vio-block:last-child {
margin-bottom: 100px;
}
/* ---- Flyout contact block (phone + hours) ----
Only rendered into the ☰ panel; hidden at widths where the top bar still
shows the same information, so the phone number never appears twice.
1200px is where .site-header__hours drops out of the bar, 1024px is where
.site-header__phone does - between those two only the hours line needs to
show here. */
.flyout__contact {
display: none;
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--color-grey-200);
}
.flyout__hours {
color: var(--color-grey-700);
font: var(--text-body-regular);
}
/* Between 1024 and 1200 the bar still has the phone, so show the hours only. */
@media (max-width: 1200px) {
.flyout__contact {
display: flex;
}
.flyout__contact .flyout__phone {
display: none;
}
}
@media (max-width: 1024px) {
.flyout__contact .flyout__phone {
display: inline-flex;
}
}
/* ---- Narrow header (<=500px) ----
Rob's layout: burger left, logo centred, cart + account right. Wishlist and
the language switcher move into the ☰ panel (.flyout__extras) because five
controls plus a logo cannot share a 360px row without everything becoming a
24px tap target.
Reordered with flex `order`, not by changing the markup, so the DOM (and
therefore tab order and the desktop layout) is untouched. */
.site-header__account-icon {
display: none;
}
.flyout__extras {
display: none;
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--color-grey-200);
}
.flyout__extra-link {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--color-grey-100);
border-radius: 100px;
padding: 10px 20px;
font: var(--text-body-lg);
color: var(--color-grey-900);
}
.flyout__extra-badge {
position: static;
transform: none;
}
.flyout__langs {
display: flex;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.flyout__lang {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
padding: 10px 16px;
border-radius: 100px;
background: var(--color-grey-100);
font: var(--text-body-lg);
color: var(--color-grey-900);
}
.flyout__lang.is-active {
background: var(--color-brand-blue);
color: var(--color-white);
}
/* 600px, not 500 (Rob, 2026-07-30): with the logo centring now starting at
1024 the right-hand group (wishlist + cart + Ienākt + LV) still overlapped
the centred logo between 500 and 600. Shedding the wishlist and language
switcher into the ☰ panel earlier keeps the row clear. */
@media (max-width: 600px) {
.site-header__bar .site-header__inner {
gap: 8px;
}
.site-header__menu-trigger {
order: 1;
}
/* Only cart + account remain on the right here, so the logo gets more room
back than the 1024 rule reserves. */
.site-header__logo {
max-width: calc(100% - 200px);
}
.site-header__actions {
order: 3;
}
/* Wishlist + language switcher live in the ☰ panel at this width. */
.site-header__wishlist,
.site-header__bar .lang-switch,
.site-header__bar .site-header__lang-switch {
display: none;
}
.flyout__extras {
display: flex;
}
/* Cart and account become the same 44px circle - they sat at 36x40 and
44x36 respectively, which read as two different components. */
.site-header__actions .pill-btn--icon,
.site-header__actions .site-header__account {
width: 44px;
height: 44px;
padding: 0;
border-radius: 100px;
flex-shrink: 0;
}
.site-header__account-label {
display: none;
}
.site-header__account-icon {
display: block;
/* The SVG strokes use currentColor, and .pill-btn--primary sets
color:white - so the icon picks up white on the blue pill with no
second asset. */
filter: brightness(0) invert(1);
}
}
/* ---- Promo links inside the Katalogs flyout ----
Akcijas / Izpārdošana / Populāras preces / Jaunumi, shown here only below
1440px where they no longer fit in the nav bar. Grey pills, matching the
treatment the phone and language links get in the ☰ panel. */
.catalog-menu__promo {
display: none;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 32px 0 0;
padding: 32px 0 0;
border-top: 1px solid var(--color-grey-200);
}
.catalog-menu__promo-link {
display: inline-flex;
align-items: center;
padding: 10px 18px;
border-radius: 100px;
background: var(--color-grey-100);
font: var(--text-body-regular);
color: var(--color-grey-900);
white-space: nowrap;
}
.catalog-menu__promo-link:hover {
background: var(--color-brand-blue);
color: var(--color-white);
}
/* Revealed here rather than in the earlier 1440 block: this rule has to come
AFTER the `display: none` default above, or the default wins on source
order (both are single-class selectors). */
@media (max-width: 1440px) {
.catalog-menu__promo {
display: flex;
}
.flyout--catalog {
width: 320px;
}
/* The children panel is pinned to the parents column's right edge with a
hardcoded left:286px - it has to follow the widened column or it would
sit 34px on top of it. */
.catalog-menu__children {
left: 320px;
}
}
/* ---- Katalogs flyout: parent row + inline children on narrow screens ---- */
.catalog-menu__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* Desktop reveals children by hover in the side column, so the tap target is
pointless there.
Where it IS shown it needs to be a real 44px target that sits ABOVE the
category link - the link is the full-width flex item next to it, and a
near-miss on a small chevron was landing on the link and navigating away
instead of expanding. position+z-index guarantee the button wins the hit
test on its own footprint. */
.catalog-menu__toggle {
display: none;
position: relative;
z-index: 1;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
background: none;
padding: 0;
cursor: pointer;
line-height: 0;
}
.catalog-menu__toggle img {
transition: transform 0.15s ease;
}
.catalog-menu__parent.is-active .catalog-menu__toggle img {
transform: rotate(180deg);
}
/* ---- Katalogs flyout on narrow screens ----
The children were a position:fixed panel pinned beside the parents column -
at phone width that panel sat off-screen (or on top of the parent list), so
subcategories were effectively unreachable. Below 1024 they become a plain
indented list INSIDE the parent item, expanded by the chevron, which is the
same pattern the shop sidebar already uses. */
@media (max-width: 1440px) {
.catalog-menu__toggle {
display: inline-flex;
}
}
@media (max-width: 1024px) {
/* BOTH panels, not just the catalog one: the ☰ menu was inheriting the
base 60px padding while Katalogs used 24px, so the two lists started at
visibly different distances from the left edge. Same width cap too, so
they're the same panel at every width. */
.flyout {
width: min(100%, 420px);
padding: 60px 24px;
}
.catalog-menu__children {
position: static;
height: auto;
min-width: 0;
width: auto;
padding: 4px 0 8px 16px;
border-right: none;
border-left: 2px solid var(--color-grey-200);
margin: 4px 0 8px;
overflow: visible;
}
.catalog-menu__parents {
gap: 0;
}
.catalog-menu__parent-link {
padding: 12px 0;
white-space: normal;
/* Bounded so it can never grow under the chevron. */
flex: 1 1 auto;
min-width: 0;
}
.catalog-menu__child-link {
padding: 10px 0;
white-space: normal;
}
}
/* "Visas preces: X" - only needed in compact mode, where the parent row
toggles instead of linking. */
.catalog-menu__all {
display: none;
}
/* Flyout panels must include their own padding in the width they are given -
the theme has no global box-sizing reset, so `width: min(100%, 420px)` plus
60px of padding was 48-120px WIDER than the viewport on a phone, which is
what pushed the panel (and its close button) off screen. */
.flyout {
box-sizing: border-box;
}
@media (max-width: 1440px) {
.catalog-menu__all {
display: block;
}
/* The whole row is the tap target now, so make it look like one. */
.catalog-menu__row {
cursor: pointer;
border-radius: 8px;
}
.catalog-menu__parent[data-has-children] .catalog-menu__parent-link {
pointer-events: none; /* the row handles the tap; no link hit test */
}
}
/* ---- Close button ----
Sits above the panel (see header.php for why it is a sibling of the
overlay). On desktop it sits to the RIGHT of the 286px panel over the dark
backdrop, so it is white; once the panel goes full-width it lands on top of
white, so it gets a grey chip and a dark glyph to stay visible. */
.menu-overlay__close {
z-index: 1003;
}
.menu-overlay__close[hidden] {
display: none;
}
@media (max-width: 767px) {
.menu-overlay__close {
top: 12px;
right: 12px;
border-radius: 100px;
background: var(--color-grey-100);
color: var(--color-grey-900);
}
}
/* Footer: single column below 400px. Two columns there left ~170px per column,
which broke "Garantijas un atgriešana" and the address onto four lines each. */
@media (max-width: 400px) {
.site-footer__inner {
grid-template-columns: 1fr;
gap: 28px;
}
}
/* Kontakti form + map stack below 1024; a stretched map has no form column to
match at that point, so give it a sensible standalone height. */
@media (max-width: 1024px) {
.kontakti-contact {
flex-direction: column;
}
.kontakti-map {
align-self: auto;
width: 100%;
/* flex:1 from the desktop rule resolves against the VERTICAL axis once
the row becomes a column, collapsing the height to its content -
that's why it rendered ~150px tall. Pin it. */
flex: 0 0 auto;
height: 300px;
min-height: 0;
}
}
/* Marketplace sidebar slims down before the sliders lose a column, so the
product row gets the freed width instead of the gap growing. */
@media (max-width: 1400px) {
.home-layout__sidebar {
width: 170px;
}
.home-layout {
gap: 24px;
}
.marketplace-sidebar__link img {
max-width: 100%;
}
}
/* ---- Product card: after an AJAX add-to-cart ----
WooCommerce appends its own .added_to_cart link next to the button instead
of replacing it, so the card showed two competing CTAs. assets/js/added-to-
cart.js flags the row and the swap happens here. */
.product-card__actions .added_to_cart {
display: none;
}
.product-card__actions.is-added .button {
display: none;
}
.product-card__actions.is-added .added_to_cart {
display: inline-flex;
align-items: center;
visibility: visible;
opacity: 1;
height: 40px;
padding: 0 24px;
box-sizing: border-box;
border-radius: 100px;
background: var(--color-brand-green);
color: var(--color-white);
font: var(--text-body-md);
text-decoration: none;
white-space: nowrap;
}
/* ---- Hero pagination: tiles -> dots at 1024 ----
The promo tiles ARE the hero's pagination on desktop. Below 1024 three of
them can't stay legible across the row (and must not wrap - see
.promo-tiles), so Swiper's own dots take over instead. */
@media (max-width: 1024px) {
.promo-tiles {
display: none;
}
.hero-banner__pagination {
display: flex;
justify-content: center;
gap: 8px;
position: static;
margin-top: 16px;
}
.hero-banner__pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
margin: 0;
background: var(--color-grey-200);
opacity: 1;
}
.hero-banner__pagination .swiper-pagination-bullet-active {
background: var(--color-brand-blue);
}
}
/* ---- Wishlist heart, over the image ----
Out of the footer flow entirely: the add-to-cart label varies in width
("Pievienot grozam" vs "Lasīt vairāk"), which made the footer wrap
inconsistently from card to card and left rows of uneven height. */
.product-card__wishlist {
position: absolute;
top: 236px;
right: 20px;
z-index: 2;
margin: 0;
}
/* Must match the stacking threshold above (320px) - at 280 the button went
full-width at a different point than the footer stacked, so cards between
the two values got a half-width button on its own line. */
@container (max-width: 320px) {
.product-card__actions .button {
width: 100%;
}
}
/* ---- Section rhythm on smaller screens ----
140px is the 1920-canvas figure. On a phone it eats a third of the screen
before a section even starts, and there are five of these stacked down the
homepage, so it compounds badly. Every section that uses it is scaled here
together rather than one at a time, so the page keeps an even rhythm. */
@media (max-width: 1024px) {
.product-row,
.product-row.jaunumi-tabs,
.faq-accordion,
.newsletter-signup,
.page-blocks > .vio-block--europe,
.page-blocks > .vio-block--europe + .vio-block {
margin-top: 60px;
}
.catalog-tiles {
margin-bottom: 60px;
}
}
@media (max-width: 767px) {
.product-row,
.product-row.jaunumi-tabs,
.faq-accordion,
.newsletter-signup,
.page-blocks > .vio-block--europe,
.page-blocks > .vio-block--europe + .vio-block {
margin-top: 40px;
}
.catalog-tiles {
margin-bottom: 40px;
}
}
/* ---- Homepage blocks area ----
Blocks render inside .home-layout__main, so the page gutter, max-width and
the sidebar column all come from the existing shell.
No first-child margin reset here: ACF blocks are registered with
'jsx' => true, which means the render template's own root element IS the
block - there is no wrapper div. So `.home-blocks > *:first-child` matched
.hero-banner itself and zeroed the very 24px margin that forms the gap
under the nav bar. */
/* Pink pill beside a product-row title (Figma: "Zīmols Bioapta"). Describes
the row's selection - editor-set, and hidden when left empty. */
.product-row__badge {
display: inline-flex;
align-items: center;
margin-left: 16px;
padding: 6px 16px;
border-radius: 100px;
background: var(--color-pink);
color: var(--color-white);
font: var(--text-body-md);
vertical-align: middle;
white-space: nowrap;
}
/* Colour presets picked in the block (Produktu slaideris > Nozīmītes krāsa).
The value is the modifier suffix; see vio_shop_badge_color_choices(). */
.product-row__badge--pink { background: var(--color-pink); }
.product-row__badge--blue { background: var(--color-brand-blue); }
.product-row__badge--green { background: var(--color-brand-green); }
.product-row__badge--purple { background: var(--color-purple); }
.product-row__badge--crimson { background: var(--color-crimson); }
/* Yellow is light, so its text flips to dark for contrast. */
.product-row__badge--yellow {
background: var(--color-yellow);
color: var(--color-grey-900);
}
@media (max-width: 767px) {
.product-row__badge {
margin-left: 8px;
padding: 4px 12px;
font: var(--text-caption);
}
}
/* ---- Spacing utilities ----
For the block editor's Advanced > "Additional CSS class(es)" field, so an
editor can retune the gap above any section without touching code. !important
is warranted here: these exist purely to beat a component's own margin, and
that is the entire contract. */
.vio-mt-0 { margin-top: 0 !important; }
.vio-mt-40 { margin-top: 40px !important; }
.vio-mt-80 { margin-top: 80px !important; }
.vio-mt-140 { margin-top: 140px !important; }
.vio-mb-0 { margin-bottom: 0 !important; }
.vio-mb-40 { margin-bottom: 40px !important; }
.vio-mb-80 { margin-bottom: 80px !important; }
.vio-mb-140 { margin-bottom: 140px !important; }
/* Scale the big ones down on smaller screens, same as the section rhythm. */
@media (max-width: 1024px) {
.vio-mt-140 { margin-top: 60px !important; }
.vio-mt-80 { margin-top: 60px !important; }
.vio-mb-140 { margin-bottom: 60px !important; }
.vio-mb-80 { margin-bottom: 60px !important; }
}
@media (max-width: 767px) {
.vio-mt-140 { margin-top: 40px !important; }
.vio-mt-80 { margin-top: 40px !important; }
.vio-mb-140 { margin-bottom: 40px !important; }
.vio-mb-80 { margin-bottom: 40px !important; }
}
/* ---- Blocks inside the homepage column ----
Blocks each carry their own .shop-archive__inner gutter because on Par mums
and Kontakti they sit directly under
with nothing else providing one.
On the homepage they're already inside #site-content > .home-layout__main,
which supplies the gutter - so that inner padding was applied twice: the
newsletter sat 145px narrower than its neighbours, and its 40/80px vertical
padding stacked on top of the section's own 140px margin. */
.home-blocks .shop-archive__inner {
padding: 0;
max-width: none;
}
/* ---- Flyout menu items: hover pill ----
Same grey-100 rounded treatment the icon buttons and shop sidebar use, so a
hovered row reads as a target rather than just changing colour. Negative
margin keeps the text aligned with everything else while the pill extends
past it. */
.main-menu__list a,
.catalog-menu__parent-link,
.catalog-menu__child-link {
padding-left: 12px;
padding-right: 12px;
margin-left: -12px;
margin-right: -12px;
border-radius: 100px;
transition: background-color 0.12s ease;
}
.main-menu__list a:hover,
.main-menu__list .current-menu-item > a,
.catalog-menu__parent-link:hover,
.catalog-menu__child-link:hover {
background: var(--color-grey-100);
}
/* An open branch marks its parent as active - the children panel is showing,
so hovering a child (which keeps the branch open) leaves the parent looking
selected instead of going flat. */
.catalog-menu__parent.is-active > .catalog-menu__row .catalog-menu__parent-link,
.catalog-menu__parent.is-active > .catalog-menu__parent-link {
background: var(--color-grey-100);
}
/* In compact mode the whole row is the tap target, so the pill belongs on the
row rather than on the link inside it. */
@media (max-width: 1440px) {
.catalog-menu__parent-link:hover {
background: none;
}
.catalog-menu__row:hover,
.catalog-menu__parent.is-active > .catalog-menu__row {
background: var(--color-grey-100);
border-radius: 100px;
}
}
/* ---- Hero slide, small screens ----
Below 600px the copy is centred and the CTA goes full width - at that size a
left-aligned block against a busy product photo left the button floating in
the middle of the slide with the artwork behind it. Type scales down with
clamp() so the headline shrinks smoothly instead of stepping at one
breakpoint and overflowing in between. */
@media (max-width: 600px) {
.hero-banner__slide {
/* Falls back to the desktop value when the slide sets no mobile
override, so existing slides are unaffected. */
background: var(--slide-bg-mobile, var(--slide-bg, var(--color-grey-100)));
min-height: 380px;
padding: 0 16px;
text-align: center;
}
.hero-banner__copy {
align-items: center;
gap: 20px;
width: 100%;
}
.hero-banner__title {
align-items: center;
}
.hero-banner__slide .pill-btn--cta {
width: 100%;
justify-content: center;
}
}
/* Headline scales with the viewport rather than jumping at a breakpoint. */
@media (max-width: 1024px) {
.hero-banner__title {
font-size: clamp(28px, 6vw, 70px);
line-height: 1.15;
}
}
/* ---- Hero slider arrows on small screens ----
56px controls were sized for a 1630px-wide desktop slide; on a 360px screen
they cover a sixth of the artwork and collide with the centred copy. */
@media (max-width: 600px) {
.hero-banner__arrow.swiper-button-next,
.hero-banner__arrow.swiper-button-prev {
width: 32px;
height: 32px;
}
.hero-banner__arrow img {
width: 16px;
height: 16px;
}
.hero-banner__arrow--prev {
left: 8px;
}
.hero-banner__arrow--next {
right: 8px;
}
}
/* ---- Homepage tail on mobile ----
FAQ, newsletter and the marketplace row ran straight into each other and
into the footer. */
@media (max-width: 767px) {
.home-blocks > *:last-child {
margin-bottom: 40px;
}
.faq-accordion {
margin-bottom: 40px;
}
.marketplace-sidebar--compact {
margin: 32px 0;
}
}
/* ---- Flexible page hero block ----
Full-bleed coloured band ONLY when a background image is set; without one it
sits inline, so it doesn't stamp a band where the design has plain page. */
.page-hero {
margin-bottom: 40px;
}
/* The hero owns its side gutter rather than inheriting one from a wrapper.
On a blocks-only page (Piegāde) nothing wraps it, so the title sat flush
against the viewport edge. Left/right only - the vertical rhythm is the
margin above and --has-bg's own padding. Values track
.shop-archive__inner's 145 -> 20 -> 12 so the two containers stay aligned. */
.page-hero__inner {
box-sizing: border-box;
max-width: 1920px;
margin: 0 auto;
padding: 40px 145px 0;
}
/* Kept next to the rule they override, not in the shared .shop-archive__inner
media blocks - those sit earlier in the file, so at equal specificity the
145px base above won and the hero stayed indented while the page content
beside it had already gone to 20px. */
@media (max-width: 1440px) {
.page-hero__inner {
padding-left: 20px;
padding-right: 20px;
}
}
@media (max-width: 1200px) {
.page-hero__inner {
padding-top: 24px;
}
}
@media (max-width: 767px) {
.page-hero__inner {
padding-left: 12px;
padding-right: 12px;
}
}
/* Already inside a gutter container (the shop landing page renders its blocks
inside .shop-archive__inner, as do any blocks placed on a WooCommerce
template) - so the hero must not add a second one on top, which is what put
its text 145px further in than the category tiles beside it. Two classes deep
so it also beats the responsive rules above. */
.shop-archive__inner .page-hero__inner {
padding: 0;
}
.page-hero--has-bg {
background: no-repeat center / cover;
padding: 40px 0;
}
.page-hero__row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.page-hero__title {
font: var(--text-h2);
color: var(--color-grey-900);
margin: 16px 0 8px;
}
.page-hero__subtitle {
font: var(--text-body-lg);
color: var(--color-grey-700);
margin: 0;
}
.page-hero__search {
flex: 0 1 340px;
}
@media (max-width: 767px) {
.page-hero__search {
flex-basis: 100%;
}
}
/* ---- Category sidebar, stacked above the products (<=1440) ----
Full height here pushed the product grid entirely below the fold, so the
tree starts COLLAPSED and the heading becomes the toggle. Above this width
the sidebar is a real column and the list is always open, so none of this
applies. */
@media (max-width: 1200px) {
.shop-sidebar {
padding: 20px 24px;
}
.shop-sidebar__title {
margin: 0;
cursor: pointer;
}
.shop-sidebar__title-chevron {
display: block;
}
.shop-sidebar.is-open .shop-sidebar__title-chevron {
transform: rotate(180deg);
}
.shop-sidebar__list {
display: none;
}
.shop-sidebar.is-open .shop-sidebar__list {
display: block;
margin-top: 20px;
}
}
/* The parent row is the toggle now (see assets/js/menus.js), so it needs to
look like one - the chevron alone was a small target with a lot of dead
space beside it. */
.shop-sidebar__parent[data-has-children] > .shop-sidebar__row,
.shop-sidebar__row:has(.shop-sidebar__toggle) {
cursor: pointer;
}
/* ---- Filter dropdown panels on narrow screens ----
Anchoring a fixed-width panel to its trigger cannot work once the trigger
itself sits near the right edge - the panel either overflows (left:0) or its
own left edge does (right:0). Trying to correct that at runtime just moved
the overflow around.
Instead the FILTER ROW becomes the containing block and the panel spans it
edge to edge. It is then bounded by the page container by definition, so it
can never cause a sideways scroll regardless of which trigger opened it. */
@media (max-width: 900px) {
.shop-sort-bar__filters {
position: relative;
}
.shop-sort-bar__filters .filter-drop {
position: static;
}
.shop-sort-bar__filters .filter-drop__panel {
left: 0;
right: 0;
width: auto;
max-width: none;
}
}
/* Container that keeps the page gutter but contributes no vertical space of
its own - used where sections already bring their own margins and the
container's 40/80px padding would just stack on top (product page tail). */
.shop-archive__inner--flush {
padding-top: 0;
padding-bottom: 0;
}
/* Product page tail: the newsletter and FAQ each carry a 140px top margin,
which is the homepage rhythm. Here they follow Saistītie produkti inside an
already-padded page, so they're scaled back to something proportionate. */
.shop-archive__inner--flush .newsletter-signup {
margin-top: 80px;
}
.shop-archive__inner--flush .faq-accordion {
margin-top: 80px;
margin-bottom: 80px;
}
@media (max-width: 1024px) {
.shop-archive__inner--flush .newsletter-signup,
.shop-archive__inner--flush .faq-accordion {
margin-top: 60px;
}
.shop-archive__inner--flush .faq-accordion {
margin-bottom: 60px;
}
}
@media (max-width: 767px) {
.shop-archive__inner--flush .newsletter-signup,
.shop-archive__inner--flush .faq-accordion {
margin-top: 40px;
}
.shop-archive__inner--flush .faq-accordion {
margin-bottom: 40px;
}
}
/* ---- Product page column widths ----
The gallery was pinned at 803px (the 1920 design width) with the summary
taking whatever was left, so between 1440 and 1920 the summary was squeezed
and the title wrapped to three lines. Scaling the gallery down instead keeps
both columns readable, and the row stays horizontal to 1440. */
/* Width belongs on .product-page__gallery - that is the flex item in the row.
Setting it on the inner .product-gallery made the percentage resolve against
that wrapper's own (content-sized) width instead of the row, which collapsed
the image to a sliver. */
.product-page__gallery {
width: 803px;
flex-shrink: 0;
}
.product-page__gallery .product-gallery {
width: 100%;
}
@media (max-width: 1919px) {
.product-page__gallery {
width: 44%;
max-width: 803px;
}
}
@media (max-width: 1700px) {
.product-page__gallery {
width: 42%;
}
}
@media (max-width: 1440px) {
.product-page__gallery {
width: 40%;
}
.product-page__layout {
gap: 16px;
}
}
/* Below the tablet breakpoint the gallery and summary stack, and the partner
sidebar gives way to its compact horizontal row. */
@media (max-width: 1200px) {
.product-page__aside {
display: none;
}
.product-page__gallery {
width: 100%;
max-width: none;
}
}
/* Related products sit under the two-column layout and span the page. The row
itself is the shared product slider, which brings its own top margin. */
.product-page__related {
margin-top: 0;
}
.product-page__related .product-row {
margin-top: 60px;
}
@media (max-width: 1024px) {
.product-page__related {
margin-top: 40px;
}
}
/* ---- Product page, narrow screens ----
Below 1440 the page gutter matches the header's; the add-to-cart row wraps
rather than pushing past the viewport; and the sale price gets the same
green + larger size treatment it has on the cards.
.product-page itself carries its own 145px gutter (not .shop-archive__inner),
so it still needs its own rule here - the breadcrumb wrap and tail sections
ARE .shop-archive__inner and now get the matching 1440 breakpoint from its
own base rule instead. */
@media (max-width: 1440px) {
.product-page,
.product-page__related {
padding-left: 20px;
padding-right: 20px;
}
}
@media (max-width: 767px) {
.product-page__summary p.price {
font: var(--text-h4);
}
.product-page__summary p.price ins {
color: var(--color-brand-green);
}
/* Newsletter follows the section rhythm here, not the 80px desktop step. */
.shop-archive__inner--flush .newsletter-signup {
margin-top: 40px;
}
}
/* The quantity stepper, add-to-cart button and wishlist heart could not share
one row on a phone - the button has a fixed min-width and the row had
nowrap, so it simply ran off the side and took the page's horizontal scroll
with it. */
@media (max-width: 480px) {
.product-page__cart-row {
flex-wrap: wrap;
gap: 12px;
}
.product-page__summary form.cart {
display: flex;
flex: 1 1 100%;
min-width: 0;
}
/* white-space:nowrap on the button is what actually forced the overflow -
an uppercase, letter-spaced "PIEVIENOT GROZAM" cannot shrink below its
own text width, so the row grew past the viewport instead of wrapping. */
.product-page__summary .single_add_to_cart_button {
flex: 1;
min-width: 0;
padding: 0 16px;
white-space: normal;
line-height: 1.2;
letter-spacing: 1px;
}
.product-page__summary .quantity {
flex-shrink: 0;
}
}
/* ---- Product page vertical rhythm on phones ----
Three separate gaps stacked above the gallery: the breadcrumb's own 40px
bottom margin, .shop-archive__inner's 40px top padding on the product
wrapper, and the gallery's own offset. Trimmed together so the image starts
near the top of the screen where it belongs. */
@media (max-width: 767px) {
.shop-breadcrumb {
margin-bottom: 16px;
}
.product-page__breadcrumb-wrap {
padding-top: 16px;
}
.product-page > .product-page__layout,
.product-page .product-page__layout {
margin-top: 0;
}
/* Gap between the add-to-cart block and the description tabs. */
.product-page__top {
margin-bottom: 32px;
}
/* Halved again - the newsletter sits close under the related products
here, and the section's own padding already separates them. */
.shop-archive__inner--flush .newsletter-signup {
margin-top: 20px;
}
}
/* ---- Product page: kill the stacked top/bottom padding on phones ----
.shop-archive__inner's responsive rule (24px top / 60px bottom) applies to
the breadcrumb wrapper too and outranked the `padding-bottom: 0` set on the
wrapper alone - hence the large empty band between the breadcrumb and the
gallery. Two classes here beats it. */
.shop-archive__inner.product-page__breadcrumb-wrap {
padding-bottom: 0;
}
@media (max-width: 767px) {
.shop-archive__inner.product-page__breadcrumb-wrap {
padding-top: 12px;
padding-bottom: 0;
}
.product-page {
padding-top: 0;
padding-bottom: 32px;
}
/* Now that the over-specific rule above is gone, this is the only thing
setting the newsletter's top gap on a phone. */
.shop-archive__inner--flush .newsletter-signup {
margin-top: 16px;
}
}
/* ---- Wishlist grid ----
Same column rhythm as the catalogue: 4 across on wide screens, 3 from 1560,
2 from 1200, 1 on phones. It has no sidebar, so it can hold 4 longer than
the category archive can. */
.wishlist-page .shop-grid.products {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1560px) {
.wishlist-page .shop-grid.products {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1200px) {
.wishlist-page .shop-grid.products {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.wishlist-page .shop-grid.products {
grid-template-columns: 1fr;
}
}
/* ---- Slider arrows with nothing to slide ----
Swiper adds .swiper-button-lock to both buttons when every slide already
fits (watchOverflow, on by default), which is exactly the "nothing to
scroll" case - so no JS needed, just hide them. .swiper-button-disabled
stays visible: that means "no FURTHER slides this direction", which is
still useful feedback mid-carousel. */
.slider-arrow.swiper-button-lock,
.hero-banner__arrow.swiper-button-lock {
display: none;
}
/* Nav wrapper collapses too, so the header doesn't keep a hole where the
arrows were. */
.product-row__nav:has(.swiper-button-lock),
.jaunumi-tabs__nav:has(.swiper-button-lock) {
display: none;
}
/* ---- My-account order detail (Figma 654:20764 / 680:20474 / 681:20911) ----
Was WooCommerce's totally unstyled default view-order.php. */
/* No bottom margin: it's the last element in .shop-archive__head now (see
my-account.php), which already sets the 60px gap to the layout row below. */
.order-view__meta {
display: flex;
align-items: center;
gap: 16px;
margin: 8px 0 0;
font: var(--text-body-regular);
color: var(--color-grey-700);
}
.order-view__status {
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 16px;
border-radius: 100px;
background: var(--color-grey-200);
color: var(--color-grey-900);
font: var(--text-body-md);
}
/* Same status -> colour mapping as the orders LIST (.woocommerce-orders-table
status dot) - one convention, not two. */
.order-view__status--completed {
background: rgba(120, 191, 67, 0.15);
color: var(--color-brand-green);
}
.order-view__status--processing,
.order-view__status--on-hold {
background: rgba(76, 189, 227, 0.15);
color: var(--color-brand-blue);
}
.order-view__status--cancelled,
.order-view__status--failed,
.order-view__status--refunded {
background: rgba(255, 56, 113, 0.1);
color: var(--color-crimson);
}
.order-view__layout {
display: flex;
align-items: flex-start;
gap: 24px;
}
.order-view__items {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.order-view__item {
display: flex;
align-items: center;
gap: 16px;
background: var(--color-white);
border-radius: 4px;
padding: 20px;
}
.order-view__item-thumb {
display: block;
flex-shrink: 0;
width: 68px;
height: 68px;
border: 1px solid var(--color-grey-200);
border-radius: 4px;
overflow: hidden;
box-sizing: border-box;
}
.order-view__item-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.order-view__item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.order-view__item-name {
font: var(--text-body-lg);
color: var(--color-grey-900);
}
.order-view__item-price {
font: var(--text-body-lg-bold);
color: var(--color-grey-900);
}
.order-view__item-qty {
flex-shrink: 0;
}
.order-view__item-wishlist {
flex-shrink: 0;
}
/* 527px, matching the real card width in Figma 654:20764's own metadata
(both the summary and timeline cards) - not the 390px account-nav sidebar
convention, which this isn't. */
.order-view__side {
flex-shrink: 0;
width: 527px;
display: flex;
flex-direction: column;
gap: 24px;
}
.order-view__summary .cart-summary__rows {
margin-bottom: 24px;
}
/* Shipping row carries method name + full address under the "Piegāde" label -
the shared .cart-summary__label is inline-flex for the simple cart case, so
it needs its own stacked layout here. */
.order-view__shipping-row .cart-summary__label {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.order-view__shipping-method {
font: var(--text-body-regular);
color: var(--color-grey-900);
}
.order-view__shipping-address {
font: var(--text-body-regular);
color: var(--color-grey-700);
}
.order-view__reorder {
display: flex;
width: 100%;
margin-top: 24px;
}
.order-timeline {
background: var(--color-white);
border-radius: 4px;
padding: 24px;
}
.order-timeline__title {
font: var(--text-h5);
color: var(--color-grey-900);
margin: 0 0 24px;
}
.order-timeline__list {
list-style: none;
margin: 0;
padding: 0;
}
.order-timeline__step {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 30px;
}
.order-timeline__step:last-child {
padding-bottom: 0;
}
/* Connecting line between icons - a pseudo-element instead of a background
image, since its length only ever has to bridge two fixed 56px circles. */
.order-timeline__step:not(:last-child)::after {
content: "";
position: absolute;
left: 27px;
top: 56px;
width: 1px;
height: 30px;
background: var(--color-grey-200);
}
.order-timeline__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-grey-100);
}
.order-timeline__step.is-done .order-timeline__icon {
background: rgba(120, 191, 67, 0.1);
}
.order-timeline__info {
display: flex;
flex-direction: column;
gap: 6px;
}
.order-timeline__label {
font: var(--text-body-lg);
color: var(--color-grey-700);
}
.order-timeline__date {
font: var(--text-body-lg);
color: var(--color-grey-900);
}
.order-view__notes {
margin-top: 40px;
}
.order-view__notes h2 {
font: var(--text-h5);
color: var(--color-grey-900);
margin: 0 0 16px;
}
.order-view__notes-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.order-view__notes-list li {
background: var(--color-white);
border-radius: 4px;
padding: 16px 20px;
}
.order-view__notes-list time {
display: block;
font: var(--text-caption);
color: var(--color-grey-700);
margin-bottom: 4px;
}
.order-view__notes-list p {
font: var(--text-body-regular);
color: var(--color-grey-900);
margin: 0;
}
@media (max-width: 1024px) {
.order-view__layout {
flex-direction: column;
}
.order-view__side {
width: 100%;
}
}