/*
Theme Name: 3D Nova
Description: Shop theme for ford-cargo.com.ua - truck parts catalogue. Categories in a
             left sidebar, products in the centre. Classic PHP templates, no page builder.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: 3dnova
*/

/* ---------------------------------------------------------------- tokens -- */
:root {
  --c-text:        #111827;
  --c-muted:       #6b7280;
  --c-muted-soft:  #9ca3af;
  --c-line:        #e5e7eb;
  --c-line-soft:   #f1f3f5;
  --c-bg:          #ffffff;
  --c-bg-soft:     #f5f6f8;
  --c-bg-page:     #f7f8fa;
  --c-accent:      #1d6ce8;
  --c-accent-dark: #1558c0;
  --c-accent-soft: #eef4fe;
  --c-price:       #111827;
  --c-instock:     #16a34a;
  --c-outstock:    #b02a2a;
  --c-warn:        #d97706;

  --sidebar-w: 268px;
  --gap:       24px;
  --radius:    10px;
  --radius-sm: 8px;
  --radius-lg: 14px;

  /* One elevation scale, so cards and popovers stay visually consistent. */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);
  --shadow:    0 1px 3px rgba(17, 24, 39, .08), 0 1px 2px rgba(17, 24, 39, .04);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------- baseline -- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-text);
  /* Soft page background so the white cards read as surfaces. */
  background: var(--c-bg-page);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Visible only to screen readers, but focusable for keyboard users. */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- head -- */
.site-header {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 16px 0;
}

.site-branding { display: flex; align-items: center; gap: 10px; }
.site-branding__logo {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  color: #fff;
}
.site-branding__logo svg { width: 24px; height: 24px; }
.site-branding__name {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--c-text);
  margin: 0;
  white-space: nowrap;
}
.site-branding__name a { color: inherit; }
/* Second word of the shop name picks up the accent, as in the design. */
.site-branding__name em { font-style: normal; color: var(--c-accent); }
.site-branding__desc {
  font-size: .74rem;
  color: var(--c-muted);
  margin: 1px 0 0;
}

.header-search { flex: 1 1 auto; max-width: 620px; }
.header-search form {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 5px 5px 6px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  transition: border-color .15s, box-shadow .15s;
}
.header-search form:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.header-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--c-text);
}
.header-search input[type="search"]:focus { outline: none; }
.header-search input[type="search"]::placeholder { color: var(--c-muted-soft); }
.header-search button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 0;
  background: var(--c-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.header-search button:hover { background: var(--c-accent-dark); }
.header-search button svg { width: 16px; height: 16px; }

/* --------------------------------------------------------- lang switch -- */
.lang-switch {
  margin-left: auto;
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--c-bg-soft);
  flex: 0 0 auto;
}
.lang-switch__item {
  padding: 5px 11px;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-muted);
  background: none;
}
.lang-switch__item:hover { color: var(--c-text); text-decoration: none; }
.lang-switch__item.is-current {
  background: var(--c-bg);
  color: var(--c-accent);
  box-shadow: var(--shadow-sm);
}

/* The switcher carries margin-left:auto, so it and everything after it sit as a
   group on the right. Whichever element comes first after the search box falls
   back to auto when the switcher is absent. */
/* Account and cart share an icon + two-line label treatment. */
.header-account,
.header-cart {
  margin-left: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  color: var(--c-text);
  line-height: 1.2;
}
.header-account:hover,
.header-cart:hover { color: var(--c-accent); text-decoration: none; }
.header-search + .header-account,
.header-search + .header-cart { margin-left: auto; }

.header-account svg,
.header-cart svg {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  color: var(--c-muted);
}
.header-account:hover svg,
.header-cart:hover svg { color: var(--c-accent); }

.header-account__label,
.header-cart__label { display: flex; flex-direction: column; }
.header-account__title,
.header-cart__title { font-size: .88rem; font-weight: 600; }
.header-account__sub {
  font-size: .76rem;
  color: var(--c-muted);
  font-weight: 400;
}

/* The cart icon carries its own badge, so the count sits on the icon. */
.header-cart__icon { position: relative; display: inline-flex; }
.header-cart__count {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 18px;
  padding: 0 5px;
  background: var(--c-accent);
  color: #fff;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
}

/* ----------------------------------------------------------------- nav --- */
.site-nav { border-top: 1px solid var(--c-line); }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  font-size: .92rem;
}
.site-nav a { color: var(--c-text); }

/* --------------------------------------------------------------- layout -- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: var(--gap);
  align-items: start;
  padding: var(--gap) 0 48px;
}
.layout--full { grid-template-columns: 1fr; }

/* -------------------------------------------------------------- sidebar -- */
.sidebar { min-width: 0; }

.widget {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--c-bg);
  box-shadow: var(--shadow-sm);
}
.widget__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 14px 16px;
  font-size: .95rem;
  font-weight: 700;
}
.widget__title svg { width: 18px; height: 18px; color: var(--c-accent); }
/* Separator only when the panel actually has a body under the heading. */
.widget__title + * { border-top: 1px solid var(--c-line-soft); }

/* Widgets added through wp-admin bring their own markup, which has no padding
   of its own - without this they sit flush against the card edge. The theme's
   own panels (.cat-list, .filter-panel__body) carry their own padding, so
   scope this to widgets that are neither. */
.widget:not(.filter-panel) > :not(.widget__title):not(.cat-list) {
  padding: 14px;
}
.widget:not(.filter-panel) > :not(.widget__title):not(.cat-list) > :first-child {
  margin-top: 0;
}
.widget:not(.filter-panel) > :not(.widget__title):not(.cat-list) > :last-child {
  margin-bottom: 0;
}
/* Block widgets nest a heading inside their own group markup. */
.widget .wp-block-heading {
  margin: 0 0 10px;
  font-size: .95rem;
  font-weight: 700;
}
.widget .wp-block-search__label { display: block; margin-bottom: 6px; font-weight: 600; }
.widget .wp-block-search__inside-wrapper { display: flex; gap: 6px; }
.widget .wp-block-search__input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 8px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .86rem;
}
.widget .wp-block-search__button {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  color: #fff;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
}
.widget .wp-block-search__button:hover { background: var(--c-accent-dark); }

.all-products-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 6px 6px 0;
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-size: .9rem;
  font-weight: 600;
  border-bottom: 1px solid var(--c-line-soft);
  padding-bottom: 12px;
  margin-bottom: 0;
}
.all-products-link:hover { background: var(--c-bg-soft); text-decoration: none; }
.all-products-link.is-active { color: var(--c-accent-dark); background: var(--c-accent-soft); }

.cat-list { list-style: none; margin: 0; padding: 6px; }
.cat-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-size: .9rem;
}
.cat-list a:hover { background: var(--c-bg-soft); text-decoration: none; }
.cat-list .is-active > a {
  background: var(--c-accent-soft);
  font-weight: 600;
  color: var(--c-accent-dark);
}
.cat-list__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--c-muted);
}
.cat-list__icon svg { width: 17px; height: 17px; }
.cat-list a:hover .cat-list__icon,
.cat-list .is-active > a .cat-list__icon { color: var(--c-accent); }
.cat-list__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-list__count {
  flex: 0 0 auto;
  color: var(--c-muted);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
/* Categories with no products still show, but read as unavailable. */
.cat-list .is-empty > a { color: var(--c-muted); }

/* Sidebar toggle - only meaningful on small screens. */
.sidebar-toggle {
  display: none;
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.sidebar-toggle::after { content: " ▾"; }
.sidebar-toggle[aria-expanded="true"]::after { content: " ▴"; }

/* --------------------------------------------------------------- content -- */
.content { min-width: 0; }

.page-title { margin-bottom: 4px; }
.term-description { color: var(--c-muted); margin-bottom: 16px; }

.woocommerce-breadcrumb {
  font-size: .84rem;
  color: var(--c-muted);
  margin-bottom: 16px;
}
.woocommerce-breadcrumb a { color: var(--c-muted); }
.woocommerce-breadcrumb a:hover { color: var(--c-accent); text-decoration: none; }

/* Related products / upsells sit in their own card, as in the design. */
.related.products,
.upsells.products {
  clear: both;
  margin: 0 0 24px;
  padding: 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-bg);
  box-shadow: var(--shadow-sm);
}
.related.products > h2,
.upsells.products > h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 16px;
}

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  margin-bottom: 20px;
}
.woocommerce-result-count { margin: 0; color: var(--c-muted); font-size: .88rem; }
.woocommerce-ordering { margin-left: auto; }
.woocommerce-ordering select {
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  font: inherit;
  cursor: pointer;
}
.woocommerce-ordering select:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

/* ------------------------------------------------------------- products -- */
/* WooCommerce ships float-based grid CSS (.columns-4, li.product width/margin)
   that fights a grid layout. Override it rather than dequeue the stylesheet,
   which also carries the notice and form styling we do want. */
.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }

.woocommerce ul.products li.product,
ul.products li.product {
  /* Beat WooCommerce's `width: 22.05%; float: left; margin-right: 3.8%`. */
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: var(--c-bg);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
ul.products li.product:hover {
  border-color: #d3ddea;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .09);
  transform: translateY(-2px);
}
ul.products li.product a.woocommerce-LoopProduct-link { color: inherit; }

/* Wishlist affordance in the tile corner. */
.product-card__fav {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--c-muted-soft);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s;
}
ul.products li.product:hover .product-card__fav { opacity: 1; }
.product-card__fav:hover { color: var(--c-accent); }
.product-card__fav svg { width: 17px; height: 17px; }
/* Keyboard users never see hover, so never hide it from focus. */
.product-card__fav:focus-visible { opacity: 1; }
.product-card__fav.is-fav { opacity: 1; color: #e53935; }
.product-card__fav.is-fav svg { fill: #e53935; }

.product__thumb {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--c-bg-soft);
  border-radius: var(--radius);
}
.product__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product__thumb--empty {
  color: var(--c-muted);
  font-size: .8rem;
  text-align: center;
  padding: 8px;
}

ul.products li.product .woocommerce-loop-product__title {
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 8px;
  /* Clamp to three lines so tiles stay level. -webkit-box needs an explicit
     height rather than min-height: with min-height the box can overflow its
     own line box and print over the SKU beneath it. The extra .15em keeps
     descenders (р, у, ц) from being sliced by the overflow edge. */
  height: calc(3 * 1.35em + .15em);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product__sku {
  font-size: .76rem;
  color: var(--c-muted);
  margin-bottom: 6px;
}
/* Second selector matches WooCommerce's :where() rule, which would otherwise
   paint every price olive (#958e09). */
ul.products li.product .price,
.woocommerce ul.products li.product .price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-price);
  margin: auto 0 8px;   /* pushes price to the bottom of the tile */
}

/* Inside a tile the badge is plain text, not the pill used on the single
   product page - a pill per card is far too much colour in a grid. */
ul.products li.product .stock-badge {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: .78rem;
  font-weight: 500;
  margin-bottom: 10px;
}
ul.products li.product .stock-badge--in  { color: var(--c-instock); }
ul.products li.product .stock-badge--out { color: var(--c-warn); }
ul.products li.product .stock-badge::before { width: 6px; height: 6px; }

/* --------------------------------------------------------------- buttons -- */
/* WooCommerce's block stylesheet themes .wc-block-components-button and
   .single_add_to_cart_button with its own accent, so these need to be at
   least as specific to win. */
.button,
.wp-element-button,
ul.products li.product .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.woocommerce form.cart button.single_add_to_cart_button,
button.single_add_to_cart_button {
  display: inline-block;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.button:hover,
ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce form.cart button.single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover {
  background: var(--c-accent-dark);
  color: #fff;
  text-decoration: none;
}
/* Second selector matches WooCommerce's own `display:inline-block`, which
   would otherwise drop the cart glyph onto its own line above the label. */
ul.products li.product .button,
.woocommerce ul.products li.product .button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 0;
  border-radius: var(--radius-sm);
  font-size: .88rem;
}
ul.products li.product .button svg { width: 16px; height: 16px; }
/* WooCommerce swaps in "View cart" after an AJAX add; keep it visually quiet. */
ul.products li.product .added_to_cart {
  display: block;
  margin-top: 8px;
  font-size: .82rem;
  text-align: center;
}
/* "Додано" state after AJAX add-to-cart */
.product_type_simple.added,
.product_type_variable.added,
a.ajax_add_to_cart.added {
  background: #1a9e5c !important;
  border-color: #1a9e5c !important;
  pointer-events: none;
}
.button--ghost {
  background: transparent;
  color: var(--c-accent);
  border: 1px solid var(--c-line);
}
.button--ghost:hover { background: var(--c-bg-soft); color: var(--c-accent-dark); }

/* -------------------------------------------------------- single product -- */
/* Gallery and summary sit in one card, as in the design. */
.product-single {
  display: grid;
  /* The summary carries far more content than the gallery, so it gets the
     larger share. A fixed gallery width starves it inside the ~880px that is
     left once the category rail is subtracted. */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px;
  margin-bottom: 20px;
  padding: 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-bg);
  box-shadow: var(--shadow-sm);
}

/* woocommerce-layout.css floats these two at `width:48%` for its own
   two-column layout. Inside a grid that leaves the summary at half the track
   with the rest of the row empty, so clear the float here - the same fix the
   product grid needs further up. */
.woocommerce div.product .product-single__gallery,
.woocommerce div.product .product-single__summary,
.woocommerce #content div.product .product-single__gallery,
.woocommerce #content div.product .product-single__summary,
.product-single__gallery,
.product-single__summary {
  float: none !important;
  clear: none !important;
}
/* Both need a definite width rather than `auto`: the grid track already sizes
   them, and flexslider measures the gallery to lay out its slides. */
.woocommerce div.product .product-single__gallery,
.woocommerce div.product .product-single__summary,
.woocommerce #content div.product .product-single__gallery,
.woocommerce #content div.product .product-single__summary,
.product-single__gallery,
.product-single__summary {
  width: 100% !important;
}

/*
 * flexslider measures the gallery when it initialises and writes the result
 * as inline widths on every slide. The earlier `width: auto !important` used
 * to clear WooCommerce's float left it with nothing to measure, so it locked
 * every slide to ~158px and the frame never filled the column. Give the
 * gallery and its wrapper a definite width so that measurement is correct.
 */
.product-single__gallery { position: relative; min-width: 0; }

/* woocommerce-layout.css floats `div.images` at width:48% for its own
   two-column product layout. That element is WooCommerce's gallery root,
   nested INSIDE our .product-single__gallery - clearing the float on the
   outer wrapper alone left this one at 48% of an already narrow box, which
   is what pinned the frame to ~158px. Match the four-part selector. */
.woocommerce div.product .product-single__gallery div.images,
.woocommerce #content div.product .product-single__gallery div.images,
.woocommerce-page div.product .product-single__gallery div.images,
.product-single__gallery .woocommerce-product-gallery,
.product-single__gallery .images {
  float: none !important;
  width: 100% !important;
  margin-bottom: 0;
}

/*
 * The frame is the slide, not the image.
 *
 * Putting the border on <img> made it hug the photo, so a small or landscape
 * shot floated inside a large empty box. Bordering the slide instead gives
 * every product the same square frame with the photo centred inside it.
 */
/* WooCommerce's no-slider fallback sizes every image after the first at
   `width: 25%; display: inline-block` to fake a thumbnail row. We build our own
   thumbnails, so every image must fill the frame instead. */
.product-single__gallery .woocommerce-product-gallery__image {
  width: 100% !important;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  overflow: hidden;
}
.product-single__gallery .woocommerce-product-gallery__image > a {
  display: block;
  aspect-ratio: 1 / 1;
}
.product-single__gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  padding: 20px;
}

/* Without the slider, WooCommerce prints every image in one wrapper. Show the
   first (or whichever the thumbnails select) and stack the rest as thumbs. */
.product-single__gallery .woocommerce-product-gallery__wrapper {
  display: block;
  margin: 0;
  padding: 0;
}
/* Before JS runs, only the first image is shown. Once `has-active` is set the
   `.is-active` class alone decides, so the two rules never both apply.
   `!important` is needed throughout: WooCommerce's no-slider fallback sets
   `display: inline-block` from a four-part selector that outranks these. */
.product-single__gallery .woocommerce-product-gallery__wrapper
  > .woocommerce-product-gallery__image:not(:first-child) {
  display: none !important;
}
.product-single__gallery .woocommerce-product-gallery__wrapper.has-active
  > .woocommerce-product-gallery__image {
  display: none !important;
}
.product-single__gallery .woocommerce-product-gallery__wrapper.has-active
  > .woocommerce-product-gallery__image.is-active {
  display: block !important;
}

/* Thumbnail strip, built in assets/theme.js from the gallery images. */
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 72px));
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.gallery-thumbs__item {
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gallery-thumbs__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 6px;
  border: 0;
  border-radius: 0;
}
.gallery-thumbs__item:hover { border-color: var(--c-muted-soft); }
.gallery-thumbs__item.is-active {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent);
}
.gallery-thumbs__item:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Zoom/lightbox trigger, floated over the frame by WooCommerce. */
.product-single__gallery .woocommerce-product-gallery__trigger {
  top: 12px;
  left: 12px;
  right: auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-line) !important;
  border-radius: 50%;
  background: var(--c-bg);
  box-shadow: var(--shadow-sm);
  z-index: 3;
}
.product__thumb--empty {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  color: var(--c-muted-soft);
  background: var(--c-bg-soft);
  font-size: .9rem;
}

/* Wishlist affordance, floated over the gallery. */
.product-fav {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-muted);
  cursor: pointer;
}
.product-fav:hover { color: var(--c-accent); border-color: var(--c-accent); }
.product-fav svg { width: 18px; height: 18px; }
.product-fav.is-fav { color: #e53935; border-color: #e53935; }
.product-fav.is-fav svg { fill: #e53935; }

.product-single__summary { min-width: 0; }

/* Category chip above the title. */
.product-eyebrow {
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 10px;
  border-radius: 20px;
  background: var(--c-bg-soft);
  color: var(--c-muted);
  font-size: .78rem;
  font-weight: 600;
}
.product-eyebrow:hover { color: var(--c-accent); text-decoration: none; }

/* The product title is long (part name + article + model). Keep it readable
   rather than letting the h1 size run away in a narrow column. */
.product-single__summary .page-title {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 12px;
}

/* Article number and any badges share one row under the title. */
.product-idline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 16px;
  font-size: .88rem;
  color: var(--c-muted);
}
.product-idline strong { color: var(--c-text); font-weight: 600; }
.product-tag {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .76rem;
  font-weight: 600;
  background: #e8f6ed;
  color: var(--c-instock);
}

/* Price and stock on one line, as in the design. */
.product-priceline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
/* WooCommerce ships `div.product p.price{color:#958e09}` (an olive green) on a
   :where() selector, so match its specificity to keep the price neutral. */
.product-single__summary .price,
.woocommerce div.product .product-single__summary p.price,
.woocommerce div.product .product-single__summary span.price {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--c-price);
}
.product-single__summary .price del { font-size: 1rem; font-weight: 400; }

/* Legacy stock counts are placeholders (999), so the exact figure is
   meaningless - the in/out badge above already says what matters. */
.product-single__summary .stock.in-stock,
.product-single__summary p.stock { display: none; }

.stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 600;
}
.stock-badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.stock-badge--in  { background: #e8f6ed; color: var(--c-instock); }
.stock-badge--out { background: #fdf1e3; color: var(--c-warn); }

/* Delivery reassurances. */
.product-assurances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.product-assurance { display: flex; align-items: center; gap: 11px; }
.product-assurance__icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.product-assurance__icon svg { width: 19px; height: 19px; }
.product-assurance__text {
  min-width: 0;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
}
.product-assurance__title { font-size: .86rem; font-weight: 600; }
.product-assurance__sub { font-size: .78rem; color: var(--c-muted); }

/* Quantity stepper + add to cart. */
.quantity { display: inline-flex; align-items: center; }
.quantity input[type="number"] {
  width: 46px;
  padding: 10px 0;
  border: 0;
  text-align: center;
  font: inherit;
  font-weight: 600;
  background: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity input[type="number"]:focus { outline: none; }
.qty-step {
  width: 36px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--c-muted);
  cursor: pointer;
  font: inherit;
}
.qty-step:hover { color: var(--c-accent); }
.qty-step svg { width: 15px; height: 15px; }

form.cart {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
/* The stepper is a bordered group; the buttons inside it are borderless. */
form.cart .quantity {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.woocommerce form.cart button.single_add_to_cart_button,
button.single_add_to_cart_button {
  flex: 1 1 240px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  font-size: .98rem;
}
button.single_add_to_cart_button svg { width: 18px; height: 18px; }

/* Secondary call to action under the cart row. */
.product-buy-oneclick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 20px;
  margin-bottom: 18px;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  color: var(--c-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.product-buy-oneclick:hover { background: var(--c-accent-soft); text-decoration: none; }
.product-buy-oneclick svg { width: 16px; height: 16px; }

/* VIN helper strip. */
.product-vin {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
}
.product-vin__icon { flex: 0 0 auto; color: var(--c-accent); display: grid; place-items: center; }
.product-vin__icon svg { width: 22px; height: 22px; }
.product-vin__text { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.product-vin__title { display: block; font-size: .88rem; font-weight: 600; }
.product-vin__sub { display: block; font-size: .8rem; color: var(--c-muted); }
/* WooCommerce floats .button; that made it overlap the text beside it. */
.product-vin .button {
  flex: 0 0 auto;
  float: none;
  padding: 8px 15px;
  font-size: .85rem;
  white-space: nowrap;
}

.product-meta {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--c-line-soft);
  font-size: .88rem;
  color: var(--c-muted);
}
.product-meta li + li { margin-top: 5px; }

/* ------------------------------------------------------------------ tabs -- */
.woocommerce-tabs {
  margin: 0 0 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-bg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Strip all WooCommerce default tab chrome */
.woocommerce-tabs ul.tabs {
  display: flex !important;
  flex-wrap: wrap;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border-bottom: 1px solid var(--c-line) !important;
  background: var(--c-bg) !important;
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after { display: none !important; }
.woocommerce-tabs ul.tabs li {
  border: 0 !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  float: none !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li a {
  display: block !important;
  padding: 13px 20px !important;
  color: var(--c-muted) !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  white-space: nowrap;
  background: none !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--c-text) !important;
  text-decoration: none !important;
  background: none !important;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--c-accent) !important;
  border-bottom-color: var(--c-accent) !important;
  background: none !important;
}

/* WooCommerce ships `div.product .woocommerce-tabs .panel{padding:0}` */
.woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .panel {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 24px !important;
  margin: 0 !important;
  background: var(--c-bg) !important;
}
.woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce-tabs .panel > :first-child { margin-top: 0; }
.woocommerce-tabs .panel > :last-child  { margin-bottom: 0; }
.woocommerce-tabs .panel h3 { margin-top: 1.4em; font-size: 1rem; }
.woocommerce-tabs .panel h3:first-child { margin-top: 0; }

/* Two-column spec table, as in the design. */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 40px;
}
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: .9rem;
}
.spec-row__label { color: var(--c-muted); }
.spec-row__value { font-weight: 600; text-align: right; }

/* ----------------------------------------------------------- pagination -- */
.woocommerce-pagination ul,
ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.woocommerce-pagination a,
.woocommerce-pagination span,
ul.page-numbers a,
ul.page-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  text-align: center;
  color: var(--c-text);
  text-decoration: none;
  font-size: .9rem;
  transition: border-color .15s, background .15s, color .15s;
}
.woocommerce-pagination a:hover,
ul.page-numbers a:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  text-decoration: none;
}
.woocommerce-pagination .current,
ul.page-numbers .current {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.woocommerce-pagination .dots,
ul.page-numbers .dots {
  border-color: transparent;
  background: none;
}

/* ------------------------------------------------------- account / cart -- */

/* WooCommerce ships tables and forms with almost no styling of its own once the
   block cart is replaced by the classic shortcodes, so give them the same
   borders, radii and accent as the rest of the shop. */
.woocommerce table.shop_table,
.woocommerce table.my_account_orders,
.woocommerce table.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: middle;
}
.woocommerce table.shop_table thead th {
  background: var(--c-bg-soft);
  font-size: .88rem;
  font-weight: 700;
}
.woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table img { width: 56px; border-radius: 4px; }

/* Wide tables must scroll inside themselves rather than the page. */
.woocommerce-orders-table-wrapper,
.woocommerce .cart-collaterals,
.woocommerce form.woocommerce-cart-form { overflow-x: auto; }

/* --- my-account navigation ------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li + li {
  border-top: 1px solid var(--c-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 10px 14px;
  color: var(--c-text);
  font-size: .92rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: var(--c-bg-soft);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: #eaf1fd;
  color: var(--c-accent-dark);
  font-weight: 600;
}

/* Account screens use their own two-column layout: nav left, content right.
   Only when signed in - logged out there is no navigation, just the login and
   register forms, which must span the full width. `:has()` scopes the grid to
   the case where the navigation is actually present.

   WooCommerce floats the navigation left at 30% and the content right at 68%.
   Those floats have to be cleared for the grid to size the cells, and the
   columns pinned explicitly: clearing alone left them placed in reverse, with
   the navigation in the right-hand cell and the content crushed into the left. */
@media (min-width: 700px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; }
  .woocommerce-account .woocommerce-MyAccount-content    { grid-column: 2; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { margin-bottom: 0; }
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  min-width: 0;
}

/* Logged-out account page: login beside register.
   WooCommerce lays .u-column1/.u-column2 out with percentage widths and floats,
   which collapses to a narrow column here. Override with a grid. */
.woocommerce .u-columns.col2-set {
  display: grid;
  gap: var(--gap);
  width: 100%;
  float: none;
}
@media (min-width: 700px) {
  .woocommerce .u-columns.col2-set { grid-template-columns: 1fr 1fr; }
}
.woocommerce .u-columns .u-column1,
.woocommerce .u-columns .u-column2,
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
/* WooCommerce floats col-1 left and col-2 right. Clearing the floats leaves the
   grid free to place them, but their computed order came out reversed, putting
   the login form in the right-hand cell. Pin the columns explicitly. */
.woocommerce .u-columns .u-column1,
.woocommerce .col2-set .col-1 { grid-column: 1; }
.woocommerce .u-columns .u-column2,
.woocommerce .col2-set .col-2 { grid-column: 2; }
@media (max-width: 699px) {
  .woocommerce .u-columns .u-column1,
  .woocommerce .u-columns .u-column2,
  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2 { grid-column: 1; }
}
.woocommerce-account form.login,
.woocommerce-account form.register { max-width: 100%; margin: 0; }

/* --- forms ----------------------------------------------------------- */
.woocommerce form .form-row { margin-bottom: 14px; }
.woocommerce form .form-row label {
  display: block;
  margin-bottom: 5px;
  font-size: .9rem;
  font-weight: 600;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font: inherit;
  background: var(--c-bg);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: -1px;
  border-color: var(--c-accent);
}
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce-EditAccountForm {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
/* .col2-set is handled with .u-columns further down - a second grid definition
   here would fight it and push the columns out of alignment. */

/* --- cart totals ------------------------------------------------------ */
.cart_totals h2,
.woocommerce-checkout-review-order h3 { font-size: 1.05rem; }
.cart_totals {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--c-bg-soft);
}
.cart_totals table.shop_table { border: 0; background: transparent; }
.cart_totals .order-total .amount { font-size: 1.2rem; }

@media (min-width: 900px) {
  .woocommerce .cart-collaterals { display: flex; justify-content: flex-end; }
  .woocommerce .cart-collaterals .cart_totals { min-width: 340px; }
}

/* Quantity steppers inside the cart table. */
.woocommerce table.shop_table td.product-quantity .quantity input { width: 68px; }

/* --------------------------------------------------------------- notices -- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  border-left: 4px solid var(--c-accent);
  background: var(--c-bg-soft);
  list-style: none;
}
.woocommerce-error { border-left-color: var(--c-outstock); }
.woocommerce-message { border-left-color: var(--c-instock); }

/* WooCommerce positions an icon via ::before on its notices, which lands on top
   of the text once the default padding is replaced. The border-left already
   signals the notice type. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }

/* ---------------------------------------------------------------- footer -- */
.site-footer {
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-soft);
  padding: 28px 0;
  margin-top: 40px;
  font-size: .9rem;
  color: var(--c-muted);
}
/* Branding column is wider than the four link columns beside it. */
.site-footer__cols {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.site-footer .container { max-width: 1400px; }
.site-footer a { color: var(--c-muted); }
.site-footer a:hover { color: var(--c-accent); text-decoration: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer__brand strong { display: block; color: var(--c-text); margin-bottom: 6px; }
.site-footer__brand p { margin: 0 0 12px; }
.site-footer__title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 12px;
}
.site-footer__tagline { margin: 4px 0 0; font-size: .85rem; color: var(--c-muted, #666); }
.site-footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.site-footer__social li { margin: 0; }
.site-footer__social-link {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-bg-alt, #f0f4f8);
  color: var(--c-text);
  transition: background .15s, color .15s;
}
.site-footer__social-link:hover { text-decoration: none; }
.site-footer__social-link--facebook:hover  { background: #1877f2; color: #fff; }
.site-footer__social-link--instagram:hover { background: #e1306c; color: #fff; }
.site-footer__social-link--youtube:hover   { background: #ff0000; color: #fff; }
.site-footer__social-link--telegram:hover  { background: #2aabee; color: #fff; }
.site-footer__contacts li { display: flex; align-items: flex-start; gap: 8px; }
.site-footer__contacts svg {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-top: 3px;
  color: var(--c-accent);
}

@media (max-width: 1100px) {
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .site-footer__cols { grid-template-columns: 1fr; }
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  font-size: .85rem;
  color: var(--c-muted, #666);
}
.site-footer__pay {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-footer__cards {
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-footer__cards svg { display: block; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }

  .sidebar-toggle { display: block; }
  /* Hidden by default on mobile; the toggle reveals it. */
  .sidebar { display: none; }
  .sidebar.is-open { display: block; }

  .site-header__bar { flex-wrap: wrap; }
  .header-search { order: 3; flex-basis: 100%; max-width: none; }
  .product-single { grid-template-columns: 1fr; gap: 20px; padding: 16px; }

  /* The two-line account/cart labels are the first thing to go when space
     is tight; the icons still carry the meaning. */
  .header-account__sub { display: none; }

  /* Keep the account and cart links on the same row as the switcher rather
     than letting one of them overflow the viewport. */
  .site-header__bar { row-gap: 10px; }
  .header-search + .header-account,
  .header-search + .header-cart { margin-left: auto; }
  .site-branding { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  /* Branding alone on the first row, then the switcher + account + cart as
     their own row. Squeezing all four onto one line clipped the last item. */
  .site-branding { flex: 1 1 100%; }
  .site-branding__desc { display: none; }
  .site-branding__name { font-size: 1.15rem; }

  .lang-switch { margin-left: 0; }
  .lang-switch__item { padding: 5px 9px; font-size: .78rem; }

  .header-account, .header-cart { font-size: .85rem; margin-left: 14px; }
  /* Cart last, pushed to the right edge of its row. */
  .header-cart { margin-left: auto; }

  .header-search { order: 3; }
  /* Icon-only below this width - the labels wrap awkwardly otherwise. */
  .header-account__label,
  .header-cart__label { display: none; }
  .header-search button span { display: none; }

  /* The count badge overhangs the icon, so without this the cart - being the
     last item on its row - has its badge clipped by the viewport edge. */
  .header-cart { margin-right: 8px; }

  /* Stack the VIN strip so the button is not squeezed against the text. */
  .product-vin { flex-wrap: wrap; }
  .product-vin .button { width: 100%; text-align: center; }

  .product-single__summary .price { font-size: 1.7rem; }
  .product-single__summary .page-title { font-size: 1.25rem; }
  .woocommerce-tabs ul.tabs a { padding: 12px 12px; font-size: .86rem; }
  .related.products, .upsells.products, .woocommerce-tabs .panel { padding: 16px; }
}

@media (max-width: 480px) {
  /* Two columns even on the narrowest phones - one column per screen means
     endless scrolling through a 101-product catalogue. minmax(0,1fr) rather
     than a min width so the tiles always fit. */
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  ul.products li.product { padding: 8px; }
  ul.products li.product .woocommerce-loop-product__title { font-size: .82rem; }
  ul.products li.product .price { font-size: .95rem; }
  /* Two tiles per row leaves the button too narrow for "Додати в кошик"
     alongside the glyph, so drop the glyph rather than wrap the label. */
  ul.products li.product .button { font-size: .8rem; padding: 9px 8px; }
  ul.products li.product .button svg { display: none; }
  ul.products li.product .button { padding: 8px 10px; font-size: .85rem; }
  h1 { font-size: 1.3rem; }

}

/* =========================================================== home page === */

.home-section { margin: 0 0 36px; }
.home-section__title {
  font-size: 1.15rem;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-line);
}

/* ------------------------------------------------------------- slider --- */
.promo-slider {
  position: relative;
  margin-bottom: 32px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg-soft);
}
.promo-slider__track { position: relative; }

.promo-slide { display: none; }
.promo-slide.is-active { display: block; }

.promo-slide__media {
  aspect-ratio: 21 / 8;
  background: var(--c-bg-soft);
}
.promo-slide__media img { width: 100%; height: 100%; object-fit: cover; }

/* Leave room for the prev/next arrows so they never sit on top of the copy. */
.promo-slide__body { padding: 22px 64px; }
/* When there is an image, float the copy over it for a banner look. */
.promo-slide:has(.promo-slide__media) .promo-slide__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px 22px;
  color: #fff;
  background: linear-gradient(to top, rgba(12,16,22,.82), rgba(12,16,22,0));
}
.promo-slide__title { margin: 0 0 6px; font-size: 1.45rem; }
.promo-slide:has(.promo-slide__media) .promo-slide__title { color: #fff; }
.promo-slide__sub { margin: 0 0 12px; opacity: .92; }
.promo-slide__body .button { margin-top: 4px; }

.promo-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--c-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.promo-slider__nav:hover { background: #fff; }
.promo-slider__nav--prev { left: 12px; }
.promo-slider__nav--next { right: 12px; }

.promo-slider__dots {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.promo-slider__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer;
}
.promo-slider__dot.is-active { background: #fff; }
/* No image means a light slide, so the dots need a dark tone to be visible. */
.promo-slider:not(:has(.promo-slide__media)) .promo-slider__dot { background: #c3c9d2; }
.promo-slider:not(:has(.promo-slide__media)) .promo-slider__dot.is-active { background: var(--c-accent); }

/* -------------------------------------------------------- category tiles */
/* Horizontal cards: photo left, name and count right, chevron at the end. */
.cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cat-tile a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-bg);
  color: var(--c-text);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.cat-tile a:hover {
  border-color: #d3ddea;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .09);
  transform: translateY(-2px);
  text-decoration: none;
}
.cat-tile__media {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  background: var(--c-bg-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.cat-tile__media img { width: 100%; height: 100%; object-fit: contain; }
/* Only the line-icon fallback gets the accent tint; a photo supplies its own. */
.cat-tile__media--icon { background: var(--c-accent-soft); color: var(--c-accent); }
.cat-tile__body { flex: 1 1 auto; min-width: 0; }
.cat-tile__name {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
}
.cat-tile__count { display: block; margin-top: 3px; font-size: .82rem; color: var(--c-muted); }
.cat-tile__arrow { flex: 0 0 auto; display: inline-flex; color: var(--c-muted-soft); }
.cat-tile a:hover .cat-tile__arrow { color: var(--c-accent); }

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 28px;
  align-items: start;
  margin-bottom: 32px;
  padding: 34px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
}
.hero--gradient {
  background: linear-gradient(120deg, #10357e 0%, #1d6ce8 60%, #4a90f0 100%);
}
/* A photo sits behind the copy, dimmed so text stays legible over any image. */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 26, 60, .92) 30%, rgba(10, 26, 60, .55) 100%);
}
.hero__body { position: relative; z-index: 1; min-width: 0; }
.hero__title {
  font-size: 2.1rem;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  color: #fff;
}
.hero__accent { display: block; color: #8fc0ff; }
.hero__text {
  max-width: 46ch;
  margin: 0 0 20px;
  font-size: .98rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: .95rem;
}
.hero__cta svg { width: 16px; height: 16px; }
/* The ghost button sits on a dark field here, so it needs light borders. */
.hero .button--ghost {
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
.hero .button--ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.hero-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 20px;
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-badge { display: flex; align-items: center; gap: 10px; }
.hero-badge svg { flex: 0 0 auto; width: 18px; height: 18px; color: #8fc0ff; }
.hero-badge__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hero-badge__title { font-size: .86rem; font-weight: 600; }
.hero-badge__sub { font-size: .78rem; color: rgba(255, 255, 255, .72); }

/* The vehicle picker card, floated over the hero.
   The hero sets `color: #fff` for its own copy; the card is a white panel, so
   reset the inherited colour or its heading and button vanish into it. */
.hero__picker { position: relative; z-index: 1; color: var(--c-text); }
.hero__picker .widget {
  margin: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(8, 20, 48, .28);
}
/* Inside the card the ghost button is on white again, so undo the light
   treatment the hero gives its own buttons. */
.hero__picker .button--ghost {
  border-color: var(--c-accent);
  background: var(--c-bg);
  color: var(--c-accent);
}
.hero__picker .button--ghost:hover { background: var(--c-accent-soft); color: var(--c-accent-dark); }

/* ------------------------------------------------------- section heads -- */
.home-section__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-line);
}
.home-section__head .home-section__title {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1 1 auto;
}
.home-section__more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .88rem;
  font-weight: 600;
}
.home-section__more svg { width: 14px; height: 14px; }

/* -------------------------------------------------------- trust badges -- */
.trust-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-badge {
  display: flex;
  gap: 13px;
  padding: 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-bg);
}
.trust-badge__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--radius);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.trust-badge__icon svg { width: 22px; height: 22px; }
.trust-badge__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trust-badge__title { font-size: .94rem; font-weight: 600; }
.trust-badge__text { font-size: .84rem; line-height: 1.45; color: var(--c-muted); }

/* ------------------------------------------------------- manufacturers -- */
/* auto-fill rather than auto-fit, so a short final row keeps the same tile
   width as the rest instead of stretching to fill the line. */
.brand-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.brand-strip__item a {
  display: grid;
  place-items: center;
  height: 64px;
  padding: 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.brand-strip__item a:hover {
  border-color: #d3ddea;
  box-shadow: var(--shadow);
  text-decoration: none;
}
.brand-strip__logo {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Set as a wordmark: real brand logos are trademarked artwork. */
.brand-strip__name {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text);
  text-align: center;
  line-height: 1.2;
}

/* ----------------------------------------------------------- about band -- */
.about-band {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin: 0 0 36px;
  padding: 26px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-bg);
}
.about-band__title { font-size: 1.15rem; margin: 0 0 10px; }
.about-band__text p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--c-muted); }
.about-band__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-stat {
  padding: 16px 14px;
  border-radius: var(--radius);
  background: var(--c-bg-soft);
  text-align: center;
}
.about-stat__value {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.about-stat__label { display: block; margin-top: 3px; font-size: .8rem; color: var(--c-muted); }

/* -------------------------------------------------------------- banners - */
.promo-banners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.promo-banner__inner {
  position: relative;
  display: block;
  height: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--c-text);
  background: var(--c-bg-soft);
}
a.promo-banner__inner:hover { border-color: #c9d3e0; text-decoration: none; }
.promo-banner__inner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.promo-banner__body { display: block; padding: 12px 14px; }
.promo-banner__title { display: block; font-size: .98rem; }
.promo-banner__sub { display: block; margin-top: 3px; font-size: .86rem; color: var(--c-muted); }

@media (max-width: 700px) {
  .promo-slide__media { aspect-ratio: 16 / 10; }
  .promo-slide__title { font-size: 1.15rem; }
  .promo-slider__nav { width: 32px; height: 32px; font-size: 1.25rem; }
}

/* ============================================== icons & promo graphics === */

.fc-icon { display: block; flex: 0 0 auto; }

/* ------------------------------------------------------------- filters -- */
/* Panels are <details>, so collapsing needs no JavaScript. */
.filter-panel > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  justify-content: flex-start;
}
.filter-panel > summary::-webkit-details-marker { display: none; }
.filter-panel > summary::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--c-muted);
  border-bottom: 2px solid var(--c-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.filter-panel[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.filter-panel > summary:hover::after { border-color: var(--c-accent); }
.filter-panel__body { padding: 4px 14px 14px; }

.filter-note {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--c-muted);
}

/* --- checkbox / radio rows ------------------------------------------- */
.filter-list { list-style: none; margin: 0; padding: 0; }
.filter-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  color: var(--c-text);
  font-size: .88rem;
}
.filter-check:hover { color: var(--c-accent); text-decoration: none; }
.filter-check__box {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  border: 1.5px solid var(--c-line);
  border-radius: 4px;
  background: var(--c-bg);
  position: relative;
  transition: background .12s, border-color .12s;
}
.filter-check--radio .filter-check__box { border-radius: 50%; }
.filter-check:hover .filter-check__box { border-color: var(--c-accent); }
.filter-check.is-on .filter-check__box {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
/* Tick for checkboxes, dot for radios. */
.filter-check.is-on .filter-check__box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1.5px;
  width: 4px; height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.filter-check--radio.is-on .filter-check__box::after {
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.filter-check__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-check__count {
  flex: 0 0 auto;
  font-size: .78rem;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* --- price ------------------------------------------------------------ */
.filter-price__row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.filter-price input[type="number"] {
  min-width: 0;
  flex: 1 1 0;
  padding: 8px 9px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .86rem;
  -moz-appearance: textfield;
  appearance: textfield;
}
.filter-price input::-webkit-outer-spin-button,
.filter-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filter-price input:focus-visible {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.filter-price__dash { color: var(--c-muted-soft); }
.filter-price__cur { font-size: .86rem; color: var(--c-muted); }
.filter-price__go { width: 100%; padding: 8px 14px; font-size: .86rem; }

/* --- vehicle picker --------------------------------------------------- */
.filter-vehicle { display: flex; flex-direction: column; gap: 8px; }
.filter-select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  font: inherit;
  font-size: .86rem;
  color: var(--c-text);
}
/* Disabled until compatibility data exists - say so rather than looking broken. */
.filter-vehicle.is-empty .filter-select {
  color: var(--c-muted-soft);
  background: var(--c-bg-soft);
  cursor: not-allowed;
}
.filter-vehicle__cta { width: 100%; text-align: center; margin-top: 2px; }

.filter-reset {
  display: block;
  padding: 10px;
  margin-bottom: 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  text-align: center;
  font-size: .86rem;
  font-weight: 600;
}
.filter-reset:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  text-decoration: none;
}

/* Active-filter chips above the product grid. */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.active-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 12px;
  border-radius: 20px;
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  font-size: .82rem;
  font-weight: 600;
}
.active-filter:hover { text-decoration: none; background: #e0ebfd; }
.active-filter__x {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(29, 108, 232, .18);
  font-size: .8rem;
  line-height: 1;
}

/* --- sidebar category list ------------------------------------------- */
.cat-list a { align-items: center; }
.cat-list .fc-icon { color: var(--c-muted); margin-right: 9px; }
.cat-list__name { flex: 1 1 auto; min-width: 0; }
.cat-list .is-active > a .fc-icon { color: var(--c-accent-dark); }
.cat-list .is-empty > a .fc-icon { opacity: .5; }

/* --- category tiles --------------------------------------------------- */
.cat-tile__media--icon {
  color: var(--c-accent);
  background: linear-gradient(150deg, #eef3fc 0%, #e3ebf8 100%);
}
.cat-tile a:hover .cat-tile__media--icon { color: var(--c-accent-dark); }

/* --- gradient fallbacks ---------------------------------------------- */
/* Used until real artwork is uploaded; an uploaded image replaces them. */
.promo-slide--gradient { position: relative; min-height: 220px; }
.promo-slide--gradient .promo-slide__body {
  position: relative;
  color: #fff;
  background: none;
  padding: 34px 64px;
}
.promo-slide--gradient .promo-slide__title { color: #fff; }
.promo-slide--gradient .promo-slide__sub { color: rgba(255,255,255,.9); }

/* Three variants within one blue-to-slate family, so consecutive items look
   distinct without introducing a colour the rest of the site never uses. */
.promo-slide--v1 { background: linear-gradient(120deg, #10357e 0%, #1d6ce8 55%, #4a90f0 100%); }
.promo-slide--v2 { background: linear-gradient(120deg, #0e2a45 0%, #1b4f7a 55%, #2f7fa8 100%); }
.promo-slide--v3 { background: linear-gradient(120deg, #1b2540 0%, #33406b 55%, #4d5c8f 100%); }

/* A faint diagonal texture so the gradient does not read as a flat block. */
.promo-slide--gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px
  );
  pointer-events: none;
}
/* The button must stay readable on a dark gradient. */
.promo-slide--gradient .button { background: #fff; color: var(--c-accent-dark); }
.promo-slide--gradient .button:hover { background: #eaf1fd; color: var(--c-accent-dark); }

.promo-banner--gradient { color: #fff; border-color: transparent; }
.promo-banner--gradient .promo-banner__title { color: #fff; }
.promo-banner--gradient .promo-banner__sub { color: rgba(255,255,255,.88); }
.promo-banner--v1 { background: linear-gradient(135deg, #1d6ce8 0%, #4a90f0 100%); }
.promo-banner--v2 { background: linear-gradient(135deg, #1b4f7a 0%, #2f7fa8 100%); }
.promo-banner--v3 { background: linear-gradient(135deg, #33406b 0%, #4d5c8f 100%); }

.promo-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px 0;
  color: rgba(255,255,255,.85);
}

@media (max-width: 700px) {
  .promo-slide--gradient { min-height: 180px; }
  .promo-slide--gradient .promo-slide__body { padding: 24px 52px; }
}

/* ------------------------------------------- home page: responsive ------ */
/* Deliberately at the end of the file: these override the home page blocks
   defined above, and a media query earlier in the source would lose to them
   on order rather than specificity. */

@media (max-width: 900px) {
  /* Picker drops below the copy instead of squeezing beside it. */
  .hero {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px;
  }
  .hero__title { font-size: 1.7rem; }
  .hero__text { max-width: none; }
  .about-band { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hero { padding: 20px; }
  .hero__title { font-size: 1.4rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__cta { justify-content: center; }
  .hero-badges { grid-template-columns: 1fr; gap: 12px; }
  /* One category card per row: two would clip the longer names. */
  .cat-tiles { grid-template-columns: 1fr; }
  .brand-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-badges { grid-template-columns: 1fr; }
  .about-band { padding: 18px; }
}

/* ── My Account — addresses ─────────────────────────────────────────────── */
.wc-address-intro { color: var(--c-muted, #666); margin-bottom: 24px; }

.wc-addresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.wc-address-box {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

.wc-address-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #f8f9fa;
  border-bottom: 1px solid #e5e7eb;
}

.wc-address-box__head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.wc-address-box__edit {
  font-size: .82rem;
  color: var(--c-accent);
  text-decoration: none;
  font-weight: 500;
}
.wc-address-box__edit:hover { text-decoration: underline; }

.wc-address-box__body {
  padding: 16px 18px;
  font-style: normal;
  line-height: 1.7;
  color: #374151;
}

.wc-address-box__empty { color: var(--c-muted, #888); margin: 0; }