/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Meeiko child theme for Bricks. GENERATED by meeiko/theme/build.py, edit the sources.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/*
 * Meeiko base layer: the design's reset and element-level rules
 * (meeiko/design/.../assets/css/styles.css, "Reset & base").
 * Tokens live in Bricks (palette "Meeiko" + global variables), component
 * classes are Bricks global classes. Only selectors the Bricks importer
 * cannot hold belong here. Keep specificity at zero with :where().
 *
 * Rich content (post/product descriptions built with GenerateBlocks, Woo tabs)
 * is excluded from the margin and list resets so its spacing survives.
 */

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

:where(:not(:is(.brxe-post-content, .brxe-product-content, .brxe-product-short-description, .woocommerce-Tabs-panel, .gb-container, .gb-element) *)) { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--pinned-h, var(--header-h-scrolled)) + var(--space-6));
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	overflow-x: clip;
	background: var(--paper);
	letter-spacing: var(--ls-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	min-height: 100vh;
}

body.is-locked { overflow: hidden; }

:where(img, picture, svg, video) { display: block; max-width: 100%; }
:where(img) { height: auto; }

:where(input, button, textarea, select) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(button) { background: none; border: none; cursor: pointer; }

:where(a) { color: inherit; text-decoration: none; }

/* Headings are class-styled, as in the design (.display/.h1/.h2/.h3/.h4, or a
   component rule); plain headings inherit the body type on purpose. */
:where(h1, h2, h3, h4) { text-wrap: balance; }
/* Bricks' default content CSS (layered) sets headings to line-height 1.4; the
   design lets them inherit the body's 1.65 unless a class says otherwise. */
:where(h1, h2, h3, h4, h5, h6) { line-height: inherit; }
:where(p, li) { text-wrap: pretty; }

:where(ul, ol):not(:is(.brxe-post-content, .brxe-product-content, .brxe-product-short-description, .woocommerce-Tabs-panel, .gb-container, .gb-element) *) { list-style: none; padding: 0; }

:target { scroll-margin-top: calc(var(--pinned-h, var(--header-h-scrolled)) + var(--space-6)); }

:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: inherit;
}

.on-ink :focus-visible { box-shadow: var(--focus-ring-on-ink); }

::selection { background: var(--clay); color: var(--on-clay); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 120ms !important;
		scroll-behavior: auto !important;
	}
	.reveal { opacity: 1 !important; transform: none !important; }
	.reveal-img > img, .reveal-img > picture > img { transform: none !important; }
}

/* Bricks caps its layout elements at max-width:100% (layered). The design's
   bleeding media (hero, quiz band) stretch past their grid column with negative
   margins and never assume that cap. Zero specificity: the design's own
   max-width classes (.measure, .container, ...) still win. */
:where(.brxe-div, .brxe-block, .brxe-shortcode) { max-width: none; }

/* Bricks greys every <label> (--bricks-text-light, layered). The design's labels
   inherit their component colour (.check, .field label set their own). */
:where(label) { color: inherit; }

/* ===== Design components (generated from styles.css) ===== */

/* ============================================================
   Layout primitives
   ============================================================ */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: calc(880px + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--band { padding-block: var(--band-y); }
.section--tight { padding-block: clamp(40px, 2.5rem + 2vw, 72px); }

.bg-paper   { background: var(--paper); }
.bg-sand    { background: var(--sand); }
.bg-plate   { background: var(--plate); }
.bg-surface { background: var(--surface); }
.bg-ink     { background: var(--ink); color: var(--text-on-ink); }

.stack > * + * { margin-top: var(--flow, var(--space-4)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid--auto  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px)  { .grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

.measure         { max-width: var(--measure-body); }
.measure--article { max-width: var(--measure-article); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Typography
   ============================================================ */

.display,
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 0;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h1);
}

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
}

.h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-variation-settings: 'opsz' 24, 'SOFT' 0, 'WONK' 0;
}

.h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: var(--lh-h3);
  color: var(--ink);
}

.on-ink .display, .on-ink .h1, .on-ink .h2, .on-ink .h3, .on-ink .h4 { color: var(--text-on-ink); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-small);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--clay-hover);
}

.on-ink .eyebrow { color: var(--clay-on-ink); }

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.on-ink .lead { color: var(--text-muted-on-ink); }

.small { font-size: var(--fs-sm); line-height: var(--lh-small); }
.micro { font-size: var(--fs-xs); line-height: var(--lh-small); color: var(--text-muted); }
.on-ink .micro { color: var(--text-muted-on-ink); }

.muted { color: var(--text-muted); }

.caps {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-10); }
.prose h3 { margin-top: var(--space-8); }
.prose p { color: var(--text-muted); }
.prose strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   Buttons & links
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 14px 27px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.btn--primary { background: var(--clay); color: var(--on-clay); }
.btn--primary:hover { background: var(--clay-hover); }
.btn--primary:active { background: var(--clay-hover); transform: scale(.98); }

.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--text-on-ink); }
.btn--secondary:active { background: var(--ink-deep); color: var(--text-on-ink); transform: scale(.98); }

.on-ink .btn--secondary { color: var(--text-on-ink); border-color: var(--text-on-ink); }
.on-ink .btn--secondary:hover { background: var(--text-on-ink); color: var(--ink); }

.btn--block { display: flex; width: 100%; padding: 16px 27px; }

.btn[disabled], .btn[aria-disabled='true'] {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
}

.btn--secondary[disabled] { background: transparent; border-color: var(--disabled-bg); }

.link {
  display: inline-block;
  color: var(--clay);
  border-bottom: 1px solid var(--clay);
  padding-bottom: 2px;
  border-radius: 0;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.link:hover { color: var(--clay-hover); border-bottom-color: var(--clay-hover); }

.on-ink .link { color: var(--clay-on-ink); border-bottom-color: var(--clay-on-ink); }
.on-ink .link:hover { color: var(--text-on-ink); border-bottom-color: var(--text-on-ink); }

.prose a { color: var(--clay-hover); border-bottom: 1px solid var(--clay-a40); transition: border-color var(--dur-fast) var(--ease-standard); }
.prose a:hover { border-bottom-color: var(--clay-hover); }

.link-quiet {
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-standard);
}
.link-quiet:hover { color: var(--ink); }

/* ============================================================
   Skip link
   ============================================================ */

.skip {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip);
  padding: 12px 20px;
  background: var(--ink);
  color: var(--text-on-ink);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip:focus { transform: translateY(0); }

/* ============================================================
   Announcement bar
   ============================================================ */

.announce {
  background: var(--ink);
  color: var(--text-on-ink);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 40px;
  padding-block: var(--space-2);
  text-align: center;
}

.announce__close {
  position: absolute;
  right: var(--gutter);
  color: var(--text-muted-on-ink);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  transition: color var(--dur-fast) var(--ease-standard);
}

.announce__close:hover { color: var(--text-on-ink); }
.announce__inner { position: relative; }

@media (max-width: 767px) {
  .announce { font-size: 11px; }
  .announce .link { display: none; }
}

/* ============================================================
   Header
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg, var(--header-2));
  border-bottom: 1px solid var(--header-border, transparent);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}

.header.is-scrolled { box-shadow: var(--shadow-sticky); }

.header__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  height: var(--header-h);
  transition: height var(--dur-base) var(--ease-standard);
}

.header.is-scrolled .header__top { height: var(--header-h-scrolled); }

.logo {
  display: block;
  width: 133px;
  height: 32px;
  color: var(--ink);
  background-color: currentColor;
  -webkit-mask: url("assets/img/logo.svg") no-repeat left center / contain;
  mask: url("assets/img/logo.svg") no-repeat left center / contain;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1;
}

/* Search: a single bordered pill. The icon and submit are flex siblings of
   the input rather than absolutely positioned over it, so the text can never
   run under them regardless of the shared input padding rules below. */
.header__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 560px;
  width: 100%;
  justify-self: center;
  padding-left: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: 999px;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.header__search:hover { border-color: var(--ink); }
.header__search:focus-within { border-color: var(--ink); box-shadow: var(--focus-ring); }

.header__search > svg {
  flex: none;
  color: var(--text-muted);
  pointer-events: none;
}

.header__search input[type='search'] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: var(--fs-sm);
}

.header__search input[type='search']:focus,
.header__search input[type='search']:focus-visible {
  border: 0;
  box-shadow: none;
  outline: none;
}

.header__search input[type='search']::-webkit-search-cancel-button { cursor: pointer; }

.header__search__submit {
  flex: none;
  min-height: 38px;
  margin: 4px;
  padding: 0 var(--space-5);
  cursor: pointer;
  background: var(--ink);
  color: var(--text-on-ink);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-standard);
}

.header__search__submit:hover { background: var(--clay); }

.header__actions { display: flex; align-items: center; gap: var(--space-1); }

.icon-btn {
  position: relative;
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-standard);
}

.icon-btn:hover { background: var(--ink-a06); }

.cart-count {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  padding-inline: 4px;
  display: grid; place-items: center;
  background: var(--clay);
  color: var(--on-clay);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.cart-count.is-bumped { animation: bump 320ms var(--ease-out); }

@keyframes bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.header__nav {
  display: grid;
  grid-template-rows: 1fr;
  border-top: 1px solid var(--border);
  transition: grid-template-rows var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.header__nav > .container { overflow: hidden; min-height: 0; }
.header.is-scrolled .header__nav { grid-template-rows: 0fr; border-color: transparent; }

.nav-list { display: flex; gap: var(--space-8); }

.nav-link {
  position: relative;
  display: block;
  padding-block: 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 8px;
  width: 100%; height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav-link:hover::after,
.nav-link[aria-current='page']::after { transform: scaleX(1); }

.nav-link[aria-current='page'] { color: var(--clay-hover); }

.header__burger { display: none; }

@media (max-width: 1023px) {
  .header__top { grid-template-columns: auto 1fr auto; gap: var(--space-3); }
  .header__search { display: none; }
  .header__nav { display: none; }
  .header__burger { display: grid; }
  .logo { justify-self: center; width: 112px; height: 27px; }
}

/* Mobile nav panel */
.navpanel {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(320px, 88vw);
  z-index: var(--z-drawer);
  background: var(--surface);
  box-shadow: var(--shadow-drawer);
  transform: translateX(-100%);
  transition: transform var(--dur-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.navpanel.is-open { transform: translateX(0); }

.navpanel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.navpanel__body { padding: var(--space-4) var(--space-5) var(--space-10); }

.navpanel .nav-link { padding-block: var(--space-4); font-size: var(--fs-md); border-bottom: 1px solid var(--border); }
.navpanel .nav-link::after { display: none; }

/* ============================================================
   Scrim
   ============================================================ */

.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-standard), visibility var(--dur-fast);
}

.scrim.is-open { opacity: 1; visibility: visible; }

/* ============================================================
   Breadcrumb
   ============================================================ */

.breadcrumb {
  padding-top: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumb li { display: flex; gap: var(--space-2); align-items: center; }
.breadcrumb li + li::before { content: '/'; color: var(--border-control); }
.breadcrumb a { transition: color var(--dur-fast) var(--ease-standard); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb [aria-current='page'] { color: var(--ink); }

/* ============================================================
   Product card
   ============================================================ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-standard);
}

.card:hover, .card:focus-within { border-color: var(--border-control); }

.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--plate);
  overflow: hidden;
}

.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
}

.card:hover .card__media img { transform: scale(1.04); }

.card__tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 9px;
  border: 1px solid var(--clay);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clay-hover);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: 1.2;
}

.card__soldout {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ink-a55);
  color: var(--paper);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.card__quickadd {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-3);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}

.card:hover .card__quickadd,
.card:focus-within .card__quickadd { transform: translateY(0); }

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-5);
  flex: 1;
}

.card__brand {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}

.card__name {
  font-size: var(--fs-sm);
  line-height: var(--lh-small);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__name a::after { content: ''; position: absolute; inset: 0; }

.card__price {
  margin-top: auto;
  padding-top: var(--space-1);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--ink);
  font-variation-settings: 'opsz' 24;
}

.card__price s {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.card__mobile-add { display: none; }

@media (max-width: 767px) {
  .card__quickadd { display: none; }
  .card__mobile-add { display: flex; margin-top: var(--space-3); }
}

/* Compact card variant — "recently viewed" rail */
.card--compact .card__media { aspect-ratio: 1 / 1; }
.card--compact .card__body { padding: var(--space-3); }
.card--compact .card__tag { display: none; }

/* ============================================================
   Rail (horizontal scroll-snap)
   ============================================================ */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 44%;
  scroll-behavior: smooth;
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--border-control) transparent;
}

.rail > * { scroll-snap-align: start; }

@media (min-width: 600px)  { .rail { grid-auto-columns: 30%; } }
@media (min-width: 1024px) { .rail { grid-auto-columns: 21%; } }

/* Full-bleed rail: runs off the right edge of the viewport so the row reads
   as continuing rather than stopping at the container. */
.rail--bleed {
  margin-right: calc(-1 * (max(0px, (100vw - var(--container) - var(--gutter) * 2) / 2) + var(--gutter)));
  padding-right: var(--gutter);
  scroll-padding-right: var(--gutter);
}
@media (min-width: 1024px) { .rail--bleed { grid-auto-columns: 19%; } }

/* Review rail: cards are wide, so fewer per screen than product cards. */
.rail--reviews { grid-auto-columns: 84%; }
@media (min-width: 600px)  { .rail--reviews { grid-auto-columns: 56%; } }
@media (min-width: 900px)  { .rail--reviews { grid-auto-columns: 40%; } }
@media (min-width: 1200px) { .rail--reviews { grid-auto-columns: 31%; } }

/* Carousel arrows */
.railnav { display: flex; align-items: center; gap: var(--space-3); }
.railbtn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.railbtn:hover:not([disabled]) { background: var(--ink); border-color: var(--ink); color: var(--text-on-ink); }
.railbtn[disabled] { color: var(--disabled-text); border-color: var(--border); cursor: not-allowed; }
@media (max-width: 767px) { .railnav .railbtn { display: none; } }

.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-track { background: var(--border); }
.rail::-webkit-scrollbar-thumb { background: var(--border-control); }

/* ============================================================
   Forms
   ============================================================ */

.field { display: flex; flex-direction: column; gap: 6px; }

.field label,
.label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: var(--lh-small);
}

.req { color: var(--danger); }

input[type='text'], input[type='email'], input[type='tel'],
input[type='search'], input[type='number'], input[type='password'],
textarea, select {
  width: 100%;
  min-height: 48px;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-standard);
}

textarea { min-height: 110px; resize: vertical; line-height: var(--lh-body); }

select {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

::placeholder { color: var(--text-muted); opacity: 1; }

input:hover, textarea:hover, select:hover { border-color: var(--ink); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--ink); box-shadow: var(--focus-ring); }

input[aria-invalid='true'], textarea[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--danger); }

input:disabled, textarea:disabled, select:disabled {
  background: var(--disabled-bg);
  border-color: var(--border);
  color: var(--disabled-text);
  cursor: not-allowed;
}

.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: var(--lh-small);
  color: var(--danger);
}

.field__error.is-visible { display: flex; }

.field__hint { font-size: var(--fs-xs); color: var(--text-muted); }

/* Checkbox & radio */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: var(--lh-small);
  min-height: var(--tap);
  padding-block: 11px;
}

.check input[type='checkbox'], .check input[type='radio'] {
  appearance: none;
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  border: 1px solid var(--border-control);
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.check input[type='radio'] { border-radius: 50%; }

.check input:hover { border-color: var(--ink); }

.check input[type='checkbox']:checked {
  background: var(--ink);
  border-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F6F1EA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.check input[type='radio']:checked {
  border-color: var(--ink);
  border-width: 5px;
}

fieldset { border: none; padding: 0; }
legend { padding: 0; }

/* ============================================================
   Badges
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: 1.3;
}

.badge--info    { background: var(--info-bg); color: var(--info); }
.badge--neutral { background: var(--neutral-badge); color: var(--text-muted); }
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--new     { background: var(--ink); color: var(--text-on-ink); }
.badge--outline { background: transparent; border: 1px solid var(--clay); color: var(--clay-hover); }

/* ============================================================
   Accordion
   ============================================================ */

.acc__item { border-bottom: 1px solid var(--border); }

.acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink);
  line-height: var(--lh-h3);
  transition: color var(--dur-fast) var(--ease-standard);
}

.acc__trigger:hover { color: var(--clay-hover); }

.acc__trigger svg {
  flex: none;
  color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-standard);
}

.acc__trigger[aria-expanded='true'] svg { transform: rotate(180deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.acc__panel[data-open='true'] { grid-template-rows: 1fr; }

.acc__inner { overflow: hidden; }
.acc__panel[data-open='true'] .acc__inner { padding-bottom: var(--space-5); }

/* ============================================================
   Trust bar
   ============================================================ */

.trust { background: var(--sand); padding-block: var(--space-12); }

.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
}

@media (min-width: 1024px) {
  .trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .trust__item + .trust__item { border-left: 1px solid var(--border); padding-left: var(--space-8); }
  .trust__item { padding-right: var(--space-8); }
}

.trust__item svg { color: var(--clay); margin-bottom: var(--space-3); }
.trust__item h3 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.trust__item p { font-size: 13px; line-height: var(--lh-small); color: var(--text-muted); }

/* ============================================================
   Footer
   ============================================================ */

.footer {
  background: var(--ink);
  color: var(--text-on-ink);
  padding: var(--space-20) 0 var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 768px)  { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); } }

.footer h2 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--clay-on-ink);
  margin-bottom: var(--space-5);
}

.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }

.footer__links a,
.footer__meta a {
  font-size: var(--fs-sm);
  color: var(--text-muted-on-ink);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.footer__links a:hover,
.footer__meta a:hover { color: var(--text-on-ink); border-bottom-color: var(--text-on-ink); }

.footer__meta { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted-on-ink); }
.footer__meta li { display: flex; gap: var(--space-3); align-items: flex-start; }
.footer__meta svg { flex: none; margin-top: 3px; color: var(--clay-on-ink); }

.footer .logo { color: var(--text-on-ink); margin-bottom: var(--space-5); display: block; }

.footer__social { display: flex; gap: var(--space-3); }

.footer__social a {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border: 1px solid var(--border-on-ink-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted-on-ink);
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.footer__social a:hover { color: var(--clay-on-ink); border-color: var(--clay-on-ink); }

.footer__legal {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-on-ink);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-muted-on-ink);
}

@media (max-width: 767px) {
  .footer__col--acc h2 {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; margin-bottom: 0; padding-block: var(--space-4);
    border-bottom: 1px solid var(--border-on-ink); cursor: pointer;
  }
  .footer__col--acc .footer__links { padding-block: var(--space-4); }
}

/* ============================================================
   Reveal animation
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-in { opacity: 1; transform: none; }

.reveal-img { overflow: hidden; }
.reveal-img > img,
.reveal-img > picture > img {
  transform: scale(1.06);
  transition: transform var(--dur-image) var(--ease-out);
}
.reveal-img.is-in > img,
.reveal-img.is-in > picture > img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .reveal-img > img, .reveal-img > picture > img { transform: none !important; }
}

/* ============================================================
   Section header (eyebrow + h2 + link)
   ============================================================ */

.sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.sechead__text { display: flex; flex-direction: column; gap: var(--space-3); }
.sechead--center { justify-content: center; text-align: center; }
.sechead--center .sechead__text { align-items: center; }

@media (max-width: 767px) {
  .sechead { margin-bottom: var(--space-8); }
  .sechead > .link { display: none; }
}

.rule { height: 1px; background: var(--border); border: 0; }

/* ============================================================
   Hero — 58/42, image bleeds off the right viewport edge
   ============================================================ */

.hero { padding-top: var(--space-12); overflow: hidden; }

.hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: end;
}

@media (min-width: 900px) {
  .hero { padding-top: var(--space-16); padding-bottom: 0; }
  .hero__grid {
    grid-template-columns: 58fr 42fr;
    gap: var(--space-16);
    align-items: end;
  }
  .hero__copy { padding-bottom: var(--space-8); }
}

.hero__copy { display: flex; flex-direction: column; gap: var(--space-5); }
.hero__copy .lead { max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

.hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--plate);
  overflow: hidden;
}

.hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .hero__media {
    /* Bleed exactly to the viewport edge: distance from the container edge
       to the viewport edge, plus the gutter. Never overshoots. */
    margin-right: calc(-1 * (max(0px, (100vw - var(--container) - var(--gutter) * 2) / 2) + var(--gutter)));
    /* A DEFINITE height is required, otherwise the img's intrinsic 4:5 ratio
       drives the hero height and pushes the headline below the fold. */
    height: clamp(520px, 66vh, 720px);
    aspect-ratio: auto;
    align-self: end;
  }
}

@media (max-width: 899px) {
  .hero__grid { grid-template-areas: 'media' 'copy'; }
  .hero__media { grid-area: media; margin-inline: calc(var(--gutter) * -1); }
  .hero__copy  { grid-area: copy; }
  .hero .display { font-size: var(--fs-2xl); }
}

/* ============================================================
   Espresso band — full-bleed dark section, image left
   ============================================================ */

.band { background: var(--ink); color: var(--text-on-ink); overflow: hidden; }

.band__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .band__grid { grid-template-columns: 1fr 1fr; gap: var(--space-20); }
  .band__media {
    margin-left: calc(50% - 50vw + var(--gutter));
    aspect-ratio: 1 / 1;
  }
}

.band__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-deep); }
.band__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 899px) {
  .band__media { margin-inline: calc(var(--gutter) * -1); }
}

.band__copy { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--band-y); }

@media (min-width: 900px) { .band__copy { padding-block: 0; } }
@media (max-width: 899px) { .band .band__grid { gap: 0; } .band__copy { padding-top: var(--space-10); } }

.band__list { display: flex; flex-direction: column; }
.band__list li {
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-on-ink);
  font-size: var(--fs-sm);
  color: var(--text-muted-on-ink);
  line-height: var(--lh-small);
}
.band__list li:last-child { border-bottom: 1px solid var(--border-on-ink); }

/* ============================================================
   Brand tiles
   ============================================================ */

.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--border);
  padding-block: var(--space-8);
  --marquee-fade: 120px;
  mask-image: linear-gradient(to right, transparent, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee__item {
  flex: none;
  padding-inline: clamp(24px, 3vw, 56px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}

.marquee__item:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* ============================================================
   Spotlight
   ============================================================ */

.spotlight__grid { display: grid; gap: var(--space-10); align-items: center; }

@media (min-width: 900px) {
  .spotlight__grid { grid-template-columns: 55fr 45fr; gap: var(--space-16); }
}

.spotlight__copy { display: flex; flex-direction: column; gap: var(--space-5); }

.spotlight__mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.spotlight__media { aspect-ratio: 4 / 5; background: var(--plate); overflow: hidden; }
@media (min-width: 900px) {
  .spotlight__media { height: clamp(440px, 56vh, 600px); width: auto; justify-self: end; }
}
.spotlight__media img { width: 100%; height: 100%; object-fit: cover; }

.spotlight__proof {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-sm); color: var(--text-muted);
}

.spotlight__rail { margin-top: var(--space-10); }

/* ============================================================
   Category tiles — asymmetric
   ============================================================ */

.cattiles { display: grid; gap: var(--grid-gap); }

@media (min-width: 900px) {
  .cattiles {
    grid-template-columns: 40fr 60fr;
    grid-template-rows: repeat(2, 1fr);
    min-height: 680px;
  }
  .cattile--tall { grid-row: span 2; }
}

.cattile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  overflow: hidden;
  background: var(--plate);
  border-radius: var(--radius-md);
}

.cattile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.cattile:hover img { transform: scale(1.04); }

.cattile::after { content: ''; position: absolute; inset: 0; background: var(--tile-scrim); }

.cattile__copy { position: relative; z-index: 1; padding: var(--space-8); color: var(--paper); }
.cattile__copy h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xl); letter-spacing: -0.02em; color: var(--paper); margin-bottom: var(--space-1); }
.cattile__copy p { font-size: var(--fs-sm); color: var(--plate); }
.cattile a::after { content: ''; position: absolute; inset: 0; z-index: 2; }

/* ============================================================
   Skin-type tiles
   ============================================================ */

.skingrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5) var(--space-3);
}

@media (min-width: 768px) { .skingrid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-4); } }

.skintile { position: relative; display: block; text-align: center; }
.skintile__media {
  aspect-ratio: 1 / 1;
  width: min(100%, 132px);
  margin-inline: auto;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
}
.skintile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.skintile:hover img { transform: scale(1.05); }
.skintile span { display: block; margin-top: var(--space-3); font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.skintile:hover span { color: var(--clay-hover); }

/* ============================================================
   Newsletter
   ============================================================ */

.news { background: var(--sand); }
.news__inner { max-width: 640px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: var(--space-5); }
.news__fields { display: grid; gap: var(--space-3); text-align: left; }
@media (min-width: 600px) { .news__fields { grid-template-columns: 1fr 1fr; } }
.news__success { display: none; padding: var(--space-6); background: var(--success-bg); border-radius: var(--radius-md); color: var(--success); }
.news__success.is-visible { display: block; }
.news.is-done .news__form { display: none; }

/* ============================================================
   FAQ
   ============================================================ */

.faq__grid { display: grid; gap: var(--space-10); }

@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: 1fr 1.4fr; gap: var(--space-16); align-items: start; }
  .faq__intro { position: sticky; top: calc(var(--header-h-scrolled) + var(--space-10)); }
}

.faq__intro { display: flex; flex-direction: column; gap: var(--space-4); }
.acc__inner p { color: var(--text-muted); max-width: var(--measure-article); }

/* ============================================================
   Archive — toolbar, filters, grid
   ============================================================ */

.archive__head { display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-10) var(--space-8); }

.toolbar {
  position: sticky;
  top: var(--header-h-scrolled);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

.toolbar select { min-height: 40px; padding-block: 8px; background-position: calc(100% - 20px) 17px, calc(100% - 15px) 17px; width: auto; min-width: 200px; }

.archive__layout { display: grid; gap: var(--space-10); padding-block: var(--space-8) var(--space-16); align-items: start; }

@media (min-width: 1024px) { .archive__layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-10); } }
@media (min-width: 1280px) { .archive__layout { grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-16); } }

.filters__group { border-bottom: 1px solid var(--border); }
.filters__group .acc__trigger { font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); padding-block: var(--space-4); }
.filters__group .acc__trigger:hover { color: var(--ink); }
.filters__list { display: flex; flex-direction: column; }
.filters__list .check { padding-block: 7px; min-height: 34px; font-size: 13px; }
.filters__more { margin-top: var(--space-2); font-size: 13px; }

.pricerange { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-4); }
.pricerange__out { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); }
.pricerange input[type='range'] { width: 100%; min-height: auto; padding: 0; border: 0; background: transparent; accent-color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-6); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 7px 12px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}

.chip:hover { border-color: var(--ink); background: var(--ink-a06); }

.filters__trigger { display: none; }

@media (max-width: 1023px) {
  .filters__trigger { display: inline-flex; }
  .archive__sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(var(--drawer-w), 92vw);
    z-index: var(--z-drawer);
    background: var(--surface);
    box-shadow: var(--shadow-drawer);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    display: flex;
    flex-direction: column;
  }
  .archive__sidebar.is-open { transform: translateX(0); }
  .archive__sidebar .drawer__body { flex: 1; overflow-y: auto; }
}

@media (min-width: 1024px) {
  .archive__sidebar { position: sticky; top: calc(var(--header-h-scrolled) + var(--space-16)); max-height: calc(100vh - var(--header-h-scrolled) - var(--space-20)); overflow-y: auto; }
  .archive__sidebar .drawer__head, .archive__sidebar .drawer__foot { display: none; }
}

.pagination { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding-top: var(--space-12); }
.pagination__list { display: flex; gap: var(--space-1); }
.pagination__list a, .pagination__list span {
  min-width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.pagination__list a:hover { color: var(--ink); background: var(--ink-a06); }
.pagination__list [aria-current='page'] { color: var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; }

.empty { padding: var(--space-16) 0; text-align: center; display: none; flex-direction: column; align-items: center; gap: var(--space-4); }
.empty.is-visible { display: flex; }

.seocopy { max-width: var(--measure-article); }

/* ============================================================
   Brand hero
   ============================================================ */

.brandhero { display: grid; gap: var(--space-10); align-items: center; padding-block: var(--space-10) var(--space-4); }

@media (min-width: 900px) { .brandhero { grid-template-columns: 60fr 40fr; gap: var(--space-16); } }

.brandhero__copy { display: flex; flex-direction: column; gap: var(--space-5); }
.brandhero__logo { aspect-ratio: 4 / 3; background: var(--plate); border-radius: var(--radius-md); display: grid; place-items: center; overflow: hidden; }
.brandhero__logo img { width: 100%; height: 100%; object-fit: contain; padding: 16%; }

.metarow { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--border); }
.metarow > div { flex: 1 1 140px; padding: var(--space-4) var(--space-5) var(--space-4) 0; border-bottom: 1px solid var(--border); }
.metarow dt { font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.metarow dd { font-size: var(--fs-sm); color: var(--ink); font-weight: 500; }

/* ============================================================
   Product page
   ============================================================ */

.pdp { display: grid; gap: var(--space-10); padding-block: var(--space-8) var(--space-16); align-items: start; }

@media (min-width: 900px) { .pdp { grid-template-columns: 55fr 45fr; gap: var(--space-16); } }

@media (min-width: 1024px) {
  .pdp__gallery { position: sticky; top: calc(var(--header-h-scrolled) + var(--space-8)); }
}

.gallery__main { aspect-ratio: 1 / 1; background: var(--plate); border-radius: var(--radius-md); overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-base) var(--ease-standard); }
.gallery__main.is-swapping img { opacity: 0; }

.gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }

.gallery__thumb {
  aspect-ratio: 1 / 1;
  background: var(--plate);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { border-color: var(--border-control); }
.gallery__thumb[aria-current='true'] { border-color: var(--ink); border-width: 2px; }

.buybox { display: flex; flex-direction: column; }
.buybox > * + * { margin-top: var(--space-5); }
.buybox hr { margin-block: var(--space-6); }

.buybox__brand { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay-hover); }
.buybox__brand:hover { text-decoration: underline; }

.price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3);
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-2xl); color: var(--ink);
  font-variation-settings: 'opsz' 48;
}
.price s { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-md); color: var(--text-muted); }

.rating { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); }
.stars { color: var(--clay); letter-spacing: 2px; }

.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch {
  position: relative;
  width: 56px; height: 56px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--plate);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.swatch img { width: 100%; height: 100%; object-fit: cover; }
.swatch:hover { border-color: var(--ink); }
.swatch[aria-pressed='true'] { border-color: var(--ink); border-width: 2px; }
.swatch[aria-disabled='true'] { cursor: not-allowed; border-color: var(--border); }
.swatch[aria-disabled='true']::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--border-control) 50%, transparent calc(50% + 1px));
}

.chipgroup { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chipopt {
  min-height: var(--tap);
  padding: 10px 16px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.chipopt:hover { border-color: var(--ink); }
.chipopt[aria-pressed='true'] { border-color: var(--ink); border-width: 2px; padding: 9px 15px; background: var(--clay-tint); }

.qtyrow { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--border-control); border-radius: var(--radius-sm); width: max-content; }
.qty button { flex: none; }
.qty input { flex: none; box-sizing: content-box; }
.qty button { width: var(--tap); height: 48px; display: grid; place-items: center; color: var(--ink); transition: background-color var(--dur-fast) var(--ease-standard); }
.qty button:hover { background: var(--ink-a06); }
.qty input { width: 48px; min-height: 46px; border: 0; text-align: center; padding: 0; background: transparent; appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.infobox {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  font-size: 13px; line-height: var(--lh-small); color: var(--info);
}

.progress { height: 2px; background: var(--info-border); border-radius: 999px; overflow: hidden; }
.progress__fill { height: 100%; background: var(--clay); width: 0; transition: width var(--dur-slow) var(--ease-out); }

.microtrust { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); font-size: var(--fs-xs); color: var(--text-muted); }
.microtrust li { display: flex; align-items: center; gap: var(--space-2); }
.microtrust li + li::before { content: ''; width: 1px; height: 12px; background: var(--border); margin-right: var(--space-4); }

.skinmatch__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
@media (min-width: 768px) { .skinmatch__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.story__lead { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lg); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); max-width: var(--measure-article); }
.story__wide { margin-block: var(--space-12); aspect-ratio: 16 / 9; overflow: hidden; background: var(--plate); border-radius: var(--radius-md); }
.story__wide img { width: 100%; height: 100%; object-fit: cover; }
.story__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--space-12); }
.story__pair > * { aspect-ratio: 1 / 1; overflow: hidden; background: var(--plate); border-radius: var(--radius-md); }
.story__pair img { width: 100%; height: 100%; object-fit: cover; }

.fitlist { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
@media (min-width: 700px) { .fitlist { grid-template-columns: 1fr 1fr; } }
.fitlist h3 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; letter-spacing: var(--ls-caps); text-transform: uppercase; margin-bottom: var(--space-4); }
.fitlist ul { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); }
.fitlist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.fitlist svg { flex: none; margin-top: 3px; }
.fitlist--yes h3, .fitlist--yes svg { color: var(--success); }
.fitlist--no h3, .fitlist--no svg { color: var(--danger); }

/* Reviews */
.reviews__summary { display: grid; gap: var(--space-8); padding-bottom: var(--space-10); border-bottom: 1px solid var(--border); }
@media (min-width: 768px) { .reviews__summary { grid-template-columns: auto 1fr; gap: var(--space-16); align-items: center; } }
.reviews__avg { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-3xl); line-height: 1; color: var(--ink); }
.reviews__bars { display: flex; flex-direction: column; gap: var(--space-2); }
.reviews__bar { display: grid; grid-template-columns: 40px 1fr 44px; gap: var(--space-3); align-items: center; font-size: 13px; color: var(--text-muted); }
.reviews__bar span:last-child { text-align: right; }
.bar { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--clay); }

.review { padding-block: var(--space-6); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-3); }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ph {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border: 1px dashed var(--border-control);
  border-radius: var(--radius-sm);
  font-size: 11px; letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-muted);
}
.ph-line { height: 12px; background: var(--border); border-radius: 999px; }

.stickybar { display: none; }

@media (max-width: 767px) {
  .stickybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-sticky);
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--gutter);
    background: var(--surface);
    border-top: 1px solid var(--border);
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .stickybar.is-in { transform: translateY(0); }
  .stickybar .price { font-size: var(--fs-lg); flex: none; }
  .stickybar .btn { flex: 1; }
  .gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   Drawer (mini cart / filters)
   ============================================================ */

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(var(--drawer-w), 100vw);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-drawer);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
}

.drawer.is-open { transform: translateX(0); }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.drawer__title { display: flex; align-items: baseline; gap: var(--space-2); }
.drawer__title h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); color: var(--ink); }

.drawer__ship { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-3); font-size: 13px; }
.drawer__ship .progress { background: var(--border); }

.drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--space-5); }

.drawer__foot { padding: var(--space-5); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-3); }

.lineitem { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--border); align-items: start; }
.lineitem__media { width: 64px; aspect-ratio: 1 / 1; background: var(--plate); border-radius: var(--radius-sm); overflow: hidden; }
.lineitem__media img { width: 100%; height: 100%; object-fit: cover; }
.lineitem__name { font-size: 13px; line-height: var(--lh-small); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lineitem__price { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); margin-top: var(--space-2); }
.lineitem__price s { font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); }
.lineitem .qty { margin-top: var(--space-3); }
.lineitem .qty button { width: 34px; height: 34px; }
.lineitem .qty input { width: 34px; min-height: 32px; font-size: 13px; }
.lineitem .qty { align-self: start; }
.lineitem__remove { width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-muted); border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease-standard); }
.lineitem__remove:hover { color: var(--danger); }

.totalrow { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-sm); }
.totalrow--big { font-size: var(--fs-md); }
.totalrow--big strong { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); color: var(--ink); }

/* ============================================================
   Checkout
   ============================================================ */

.co-header { border-bottom: 1px solid var(--border); background: var(--paper); }
.co-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); }
.co-header__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); color: var(--ink); }

.reserve { background: var(--warning-bg); border-block: 1px solid var(--warning); }
.reserve p { padding-block: var(--space-3); text-align: center; font-size: var(--fs-sm); font-weight: 500; color: var(--warning); }

.steps { display: flex; align-items: center; gap: var(--space-2); padding-block: var(--space-8); }
.steps li { display: flex; align-items: center; gap: var(--space-3); flex: 1; }
.steps li:last-child { flex: none; }
.step__dot { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 500; border: 1px solid var(--border-control); color: var(--text-muted); }
.steps [data-state='done'] .step__dot { background: var(--ink); border-color: var(--ink); color: var(--text-on-ink); }
.steps [aria-current='step'] .step__dot { background: var(--clay); border-color: var(--clay); color: var(--on-clay); }
.step__label { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.steps [aria-current='step'] .step__label { color: var(--ink); font-weight: 500; }
.step__rule { flex: 1; height: 1px; background: var(--border); }

@media (max-width: 767px) {
  .steps { display: block; }
  .steps li { display: none; }
  .steps li[aria-current='step'] { display: flex; }
  .step__rule { display: none; }
}

.co-layout { display: grid; gap: var(--space-10); padding-bottom: var(--space-16); align-items: start; }
@media (min-width: 1024px) { .co-layout { grid-template-columns: 55fr 45fr; gap: var(--space-16); } }

.co-form { display: flex; flex-direction: column; gap: var(--space-10); }
.co-form fieldset { display: flex; flex-direction: column; gap: var(--space-4); }
.co-form legend { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); color: var(--ink); margin-bottom: var(--space-4); letter-spacing: var(--ls-h3); }
.co-row { display: grid; gap: var(--space-4); }
@media (min-width: 600px) { .co-row--2 { grid-template-columns: 1fr 1fr; } }

.shipopt { border: 1px solid var(--border-control); border-radius: var(--radius-sm); transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard); }
.shipopt + .shipopt { margin-top: var(--space-3); }
.shipopt:hover { border-color: var(--ink); }
.shipopt:has(input:checked) { border-color: var(--clay); background: var(--clay-tint); }
.shipopt__label { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); cursor: pointer; min-height: var(--tap); }
.shipopt__label input { flex: none; }
.shipopt__name { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.shipopt__price { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.shipopt__extra { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.shipopt:has(input:checked) .shipopt__extra { grid-template-rows: 1fr; }
.shipopt__extra > div { overflow: hidden; }
.shipopt__extra .inner { padding: 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }

.mapbox { aspect-ratio: 16 / 9; max-height: 240px; background: var(--plate); border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; }
@media (max-width: 767px) { .mapbox { max-height: 180px; } }

.summary { background: var(--sand); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 1024px) { .summary { position: sticky; top: var(--space-8); } }

.summary__items { display: flex; flex-direction: column; }
.summary__item { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--space-3); padding-block: var(--space-3); align-items: center; }
.summary__item + .summary__item { border-top: 1px solid var(--border); }
.summary__item .lineitem__media { width: 48px; background: var(--plate); }
.summary__item p { font-size: 13px; line-height: var(--lh-small); }

.paygrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.paytile {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: var(--tap);
  transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.paytile:hover { border-color: var(--border-control); }
.paytile:has(input:checked) { border-color: var(--clay); background: var(--clay-tint); }
.paytile input { flex: none; width: 14px; height: 14px; }
.paytile__logo { flex: 1; height: 40px; display: grid; place-items: center; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink); text-align: center; }

.paylogos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.paylogos li { height: 30px; min-width: 48px; padding-inline: var(--space-2); display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 11px; font-weight: 500; color: var(--text-muted); }

@media (max-width: 1023px) {
  .co-layout { grid-template-areas: 'summary' 'form'; }
  .co-form { grid-area: form; }
  .summary { grid-area: summary; }
}

.co-footer { background: var(--ink); color: var(--text-muted-on-ink); padding-block: var(--space-8); }
.co-footer .paylogos li { background: transparent; border-color: var(--border-on-ink-strong); color: var(--text-muted-on-ink); }

/* ============================================================
   Utilities
   ============================================================ */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.flow-2 { --flow: var(--space-2); }
.flow-3 { --flow: var(--space-3); }
.flow-5 { --flow: var(--space-5); }
.flow-6 { --flow: var(--space-6); }
.no-scroll-anchor { overflow-anchor: none; }

/* ---- footer accordion button (mobile) ---- */
.footer__acc-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: var(--space-4);
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.footer__acc-btn svg { transition: transform var(--dur-base) var(--ease-standard); }
.footer__acc-btn[aria-expanded='true'] svg { transform: rotate(180deg); }
[hidden] { display: none !important; }
.totalrow--save { color: var(--success); }

/* ---- placeholder skeleton lines ---- */
.ph-line--w80 { width: 80%; }
.ph-line--w70 { width: 70%; }
.ph-line--w60 { width: 60%; }
.ph-line--w50 { width: 50%; }
.ph-line--w40 { width: 40%; }
.bar > i.bar-0 { width: 0; }
.bar > i { width: 100%; }

/* ---- static drawer preview (mini-cart demo page) ---- */
.drawer-static {
  max-width: var(--drawer-w);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.drawer-static .empty { padding-block: var(--space-10); }
.drawer-static .drawer__body { padding-inline: var(--space-5); }

/* ---- tap-target floor below 768px (WCAG 2.5.8) ---- */
@media (max-width: 767px) {
  .lineitem .qty button { width: var(--tap); height: var(--tap); }
  .lineitem .qty input { width: 44px; min-height: 42px; font-size: var(--fs-sm); }
  .lineitem__remove { width: var(--tap); height: var(--tap); }
  .filters__list .check { min-height: var(--tap); padding-block: 11px; font-size: var(--fs-sm); }
  .announce__close { width: var(--tap); height: var(--tap); right: calc(var(--gutter) - 10px); }
  .gallery__thumb { min-height: var(--tap); }
}

/* ============================================================
   Multi-step checkout — account → delivery → payment
   ============================================================ */

.costep[hidden] { display: none; }
.costep { display: grid; gap: var(--space-8); }

.costep__head { display: grid; gap: var(--space-2); }
.costep__count {
  font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-muted);
}
.costep__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-xl); line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3); margin: 0;
}
.costep__lede { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-small); margin: 0; max-width: 52ch; }

.costep__nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding-top: var(--space-6); border-top: 1px solid var(--border);
}
.costep__nav .btn--primary { min-width: 220px; }
.costep__back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap, 44px); padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-sm);
}
.costep__back:hover { color: var(--clay); }

/* — Recap of a completed step — */
.recap {
  display: grid; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--sand); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.recap__row { display: flex; align-items: baseline; gap: var(--space-4); font-size: var(--fs-sm); }
.recap__key { flex: none; width: 92px; color: var(--text-muted); font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.recap__val { flex: 1 1 auto; min-width: 0; }
.recap__edit {
  flex: none; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--clay); font-family: var(--font-body); font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 3px;
}
.recap__edit:hover { color: var(--clay-hover); }

/* — Account mode switch — */
.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: 1px solid var(--border-control); border-radius: var(--radius-sm); overflow: hidden;
}
.segmented button {
  min-height: 46px; padding: 0 var(--space-3); cursor: pointer;
  background: var(--surface); border: 0; border-left: 1px solid var(--border);
  font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text);
}
.segmented button:first-child { border-left: 0; }
.segmented button:hover { background: var(--sand); }
.segmented button[aria-pressed='true'] { background: var(--ink); color: var(--text-on-ink); }

.oauth { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .oauth { grid-template-columns: repeat(3, 1fr); } }
.oauth__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-4); cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--fs-sm);
}
.oauth__btn:hover { border-color: var(--ink); background: var(--sand); }
.oauth__btn svg { flex: none; }

.orrule {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  color: var(--text-muted); font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
}
.orrule::before, .orrule::after { content: ''; height: 1px; background: var(--border); }

.costep [data-mode-block][hidden] { display: none; }

.costep__done {
  display: grid; gap: var(--space-4); justify-items: start;
  padding: var(--space-10); text-align: left;
  background: var(--sand); border: 1px solid var(--border);
}
.costep__done .ok {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--success-bg); color: var(--success);
}

/* ============================================================
   Review card — used in the homepage rail
   ============================================================ */

.rcard {
  display: flex; flex-direction: column; gap: var(--space-4);
  height: 100%; padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.rcard__head { display: flex; align-items: center; gap: var(--space-3); }
.rcard__avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--clay-tint); color: var(--clay);
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.02em;
}
.rcard__who { display: grid; gap: 2px; min-width: 0; }
.rcard__name { font-weight: 500; font-size: var(--fs-sm); }
.rcard__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--text-muted);
}
.rcard__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--success); }

.rcard__rating { display: flex; align-items: center; gap: var(--space-2); }
.rcard__stars { display: inline-flex; gap: 2px; color: var(--clay); }
.rcard__stars svg { display: block; }
.rcard__score { font-size: var(--fs-xs); color: var(--text-muted); }

.rcard__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-md); line-height: var(--lh-h3); letter-spacing: -0.01em;
  margin: 0;
}
.rcard__body {
  margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body);
  color: var(--text-muted); text-wrap: pretty;
}

.rcard__product {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: auto; padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.rcard__product img {
  flex: none; width: 48px; height: 48px; object-fit: cover;
  background: var(--sand); border: 1px solid var(--border);
}
.rcard__ptext { display: grid; gap: 2px; min-width: 0; }
.rcard__plabel {
  font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-muted);
}
.rcard__pname {
  font-size: 13px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rcard__product:hover .rcard__pname { color: var(--clay); text-decoration: underline; text-underline-offset: 2px; }

/* Aggregate panel beside the rail */
.rsummary {
  display: grid; gap: var(--space-5);
  padding: var(--space-6); background: var(--sand);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.rsummary__score { display: flex; align-items: baseline; gap: var(--space-3); }
.rsummary__num {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-3xl); line-height: 1; color: var(--ink);
}
.rsummary__of { font-size: var(--fs-sm); color: var(--text-muted); }
.rsummary__bars { display: grid; gap: var(--space-2); }

/* ============================================================
   Review list — product page
   ============================================================ */

.rlist { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }

.rrow {
  display: grid; gap: var(--space-5);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--border);
}
.rrow:first-child { padding-top: var(--space-6); border-top: 1px solid var(--border); }
@media (min-width: 768px) { .rrow { grid-template-columns: 210px 1fr; gap: var(--space-10); } }

/* left: who */
.rrow__who { display: grid; gap: var(--space-3); align-content: start; }
.rrow__id { display: flex; align-items: center; gap: var(--space-3); }
.rrow__name { font-weight: 500; font-size: var(--fs-sm); }
.rrow__verified {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); color: var(--success);
}
.rrow__facts { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
.rrow__fact { display: flex; gap: var(--space-2); }
.rrow__fact dt { flex: none; width: 68px; }
.rrow__fact dd { margin: 0; color: var(--text); }

/* right: the review */
.rrow__body { display: grid; gap: var(--space-3); align-content: start; }
.rrow__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.rrow__date { font-size: var(--fs-xs); color: var(--text-muted); }
.rrow__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-lg); line-height: var(--lh-h3); letter-spacing: -0.01em; margin: 0;
}
.rrow__text { margin: 0; font-size: var(--fs-base); line-height: var(--lh-body); text-wrap: pretty; }

.rrow__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rtag {
  font-size: var(--fs-xs); padding: 4px 10px;
  background: var(--sand); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-muted);
}

.rrow__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin-top: var(--space-2);
}
.rhelp {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-4); cursor: pointer;
  background: none; color: var(--text); border: 1px solid var(--border-control);
  border-radius: 999px; font-family: var(--font-body); font-size: var(--fs-xs);
}
.rhelp:hover { border-color: var(--ink); background: var(--sand); }
.rhelp[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--text-on-ink); }
.rrow__report {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-xs);
  text-decoration: underline; text-underline-offset: 3px;
}
.rrow__report:hover { color: var(--clay); }

/* merchant reply */
.rreply {
  display: grid; gap: var(--space-2);
  margin-top: var(--space-2); padding: var(--space-4) var(--space-5);
  background: var(--sand); border-left: 2px solid var(--clay);
}
.rreply__who {
  font-size: var(--fs-xs); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--text-muted);
}
.rreply p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-small); color: var(--text-muted); }

/* stars, drawn */
.rstars { display: inline-flex; gap: 2px; color: var(--clay); }
.rstars svg { display: block; }

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

.cart__grid { display: grid; gap: var(--space-10); align-items: start; }
@media (min-width: 900px) { .cart__grid { grid-template-columns: minmax(0,1fr) 380px; gap: var(--space-16); } }

.cart__items { container-type: inline-size; }

.cart__head {
  display: none; gap: var(--space-4); align-items: center;
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-muted);
}

.cartlist { list-style: none; margin: 0; padding: 0; }

/* Stacked by default. The table layout depends on how wide the items COLUMN
   is, not the viewport — the summary rail takes 380px of the page grid — so
   the switch is a container query. 620px clears the fixed tracks (96 + 130 +
   110 + 40 + 4 gaps = 440) with room for the name to breathe. */
.cartline {
  display: grid; gap: var(--space-4);
  grid-template-columns: 88px minmax(0, 1fr) 32px;
  align-items: start;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--border);
}

/* Stacked: every child is placed explicitly — auto-flow would drop the
   stepper into the 32px remove-button track. */
.cartline__media { grid-column: 1; grid-row: 1 / span 2; }
.cartline__info  { grid-column: 2; grid-row: 1; }
.cartline__x     { grid-column: 3; grid-row: 1; }
.cartline__qty   { grid-column: 2 / -1; grid-row: 2; }
.cartline__money { grid-column: 2 / -1; grid-row: 3; }
.cartline__extra { grid-column: 1 / -1; grid-row: 4; }

@container (min-width: 620px) {
  .cart__head {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 130px 110px 40px;
  }
  .cart__head span:nth-child(3) { text-align: center; }
  .cart__head span:nth-child(4) { text-align: right; }

  .cartline {
    grid-template-columns: 96px minmax(0, 1fr) 130px 110px 40px;
    align-items: center;
  }
  .cartline__media { grid-column: 1; grid-row: 1; }
  .cartline__info  { grid-column: 2; grid-row: 1; }
  .cartline__qty   { grid-column: 3; grid-row: 1; justify-content: center; }
  .cartline__money { grid-column: 4; grid-row: 1; text-align: right; }
  .cartline__x     { grid-column: 5; grid-row: 1; }
  .cartline__extra { grid-column: 2 / -1; grid-row: 2; }
}

.cartline__media {
  grid-row: span 2; aspect-ratio: 1 / 1; display: block; background: var(--sand);
  border: 1px solid var(--border); overflow: hidden;
}
.cartline__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cartline__info { display: grid; gap: var(--space-2); min-width: 0; }
.cartline__brand {
  font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-muted);
}
.cartline__name {
  font-size: var(--fs-sm); line-height: 1.4; font-weight: 500;
  text-decoration: none; color: inherit;
}
.cartline__name:hover { color: var(--clay); }
.cartline__variant { font-size: var(--fs-xs); color: var(--text-muted); }
.cartline__stock {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); color: var(--success);
}
.cartline__stock[data-low='true'] { color: var(--clay); }

.cartline__qty { display: flex; align-items: center; gap: var(--space-3); }

.cartline__money { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
@container (min-width: 620px) { .cartline__money { display: grid; gap: 2px; } }
.cartline__now { font-weight: 500; }
.cartline__was { font-size: var(--fs-xs); color: var(--text-muted); text-decoration: line-through; }
.cartline__each { font-size: var(--fs-xs); color: var(--text-muted); }

.cartline__x {
  width: 32px; height: 32px; display: grid; place-items: center;
  justify-self: end; background: none; border: 0; cursor: pointer;
  color: var(--text-muted); border-radius: var(--radius-sm);
}
.cartline__x:hover { color: var(--danger); background: var(--sand); }

.cartline__extra {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-4);
  padding-top: var(--space-1);
}
.cartline__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-xs);
  text-decoration: underline; text-underline-offset: 3px;
}
.cartline__link:hover { color: var(--clay); }

.cart__actions {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--space-4); padding-top: var(--space-6);
}

/* summary rail */
.cartsum {
  display: grid; gap: var(--space-5);
  padding: var(--space-6);
  background: var(--sand); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
@media (min-width: 900px) { .cartsum { position: sticky; top: calc(var(--header-h-scrolled) + var(--space-6)); } }
.cartsum__note {
  display: flex; gap: var(--space-2); align-items: flex-start;
  font-size: var(--fs-xs); color: var(--text-muted);
}
.cartsum__note svg { flex: none; margin-top: 2px; }

/* ===== Meeiko adapters (src/overrides.css) ===== */

/*
 * Adapters: map markup we don't author (Bricks wrappers, the WP nav menu,
 * FiboSearch, WooCommerce) onto the design's component styles.
 * Keep each block next to the design section it imitates.
 */

/* ---------- Header shell ----------
   Bricks wraps the header template in <header id="brx-header">, so sticky
   moves up a level. A negative top equal to the announcement bar's height
   (set by meeiko-core site.js) lets the bar scroll away while the header
   proper stays pinned, the same result as the design's sibling layout. */

#brx-header {
	position: sticky;
	top: calc(var(--announce-h, 0px) * -1);
	z-index: var(--z-header);
	/* Anti-jitter: hold the expanded height in flow while .header shrinks
	   (site.js measures --header-full). The spare strip under a shrunk header
	   is transparent and must not swallow clicks on the page beneath. */
	min-height: calc(var(--announce-h, 0px) + var(--header-full, 0px));
	pointer-events: none;
}

#brx-header > * { pointer-events: auto; }

/* Desktop (user decision): the NAV row is what stays pinned. The bar and the
   logo/search row scroll away (negative top = bar + top row), and the design's
   collapse-on-scroll of the nav is switched off. Mobile keeps the compact top
   row sticky, since it has no nav row. */
@media (min-width: 1024px) {
	#brx-header { top: calc((var(--announce-h, 0px) + var(--header-h)) * -1); }
	.header.is-scrolled .header__nav.header__nav { grid-template-rows: 1fr; border-color: var(--border); }
}

/* ---------- Pinned-bar tools (desktop; user request, not in the design) ----------
   Search + cart fade into the right of the nav bar once it is pinned
   (site.js sets .is-scrolled exactly when the top row has scrolled away). */

.navtools { display: none; }

@media (min-width: 1024px) {
	.header__nav > .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-6);
	}

	.navtools {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
	}

	.header.is-scrolled .navtools { opacity: 1; visibility: visible; transform: none; }

	.navtools__search[aria-expanded='true'] { background: var(--ink-a06); }
}

/* Search panel under the pinned bar. */
.navsearch {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: var(--space-3) var(--gutter);
	background: var(--header-bg, var(--header-2));
	border-bottom: 1px solid var(--header-border, var(--border));
	box-shadow: var(--shadow-popover);
}

.navsearch[hidden] { display: none; }

.navsearch .header__search-slot { margin-inline: auto; }

#brx-header .header { position: relative; top: auto; }

.meeiko-announce-off .announce { display: none; }

/* Bricks prints its own skip link; give it the design's .skip look. */
.skip-link {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: var(--z-skip);
	padding: 12px 20px;
	background: var(--ink);
	color: var(--text-on-ink);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	font-weight: 500;
	clip: auto;
	width: auto;
	height: auto;
	transform: translateY(calc(-100% - var(--space-4)));
	transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* Icons inside .icon-btn come from the Bricks SVG element. */
.icon-btn > svg, .announce__close > svg { display: block; flex: none; }

/* ---------- Cart badge ---------- */

.cart-fragment { display: contents; }
.cart-count[data-count='0'] { display: none; }

/* ---------- FiboSearch in the header (design: .header__search) ---------- */

.header__search-slot {
	justify-self: center;
	width: 100%;
	max-width: 560px;
	min-width: 0;
}

.header__search-slot .dgwt-wcas-search-wrapp { max-width: none; min-width: 0; margin: 0; }

.header__search-slot .dgwt-wcas-sf-wrapp,
.navpanel__search .dgwt-wcas-sf-wrapp {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0 0 0 var(--space-4);
	background: var(--surface);
	border: 1px solid var(--border-control);
	border-radius: 999px;
	transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.header__search-slot .dgwt-wcas-sf-wrapp::before,
.navpanel__search .dgwt-wcas-sf-wrapp::before {
	content: '';
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--text-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

.header__search-slot .dgwt-wcas-sf-wrapp:hover { border-color: var(--ink); }
.header__search-slot .dgwt-wcas-sf-wrapp:focus-within,
.navpanel__search .dgwt-wcas-sf-wrapp:focus-within { border-color: var(--ink); box-shadow: var(--focus-ring); }

/* FiboSearch ships selectors up to (0,4,1); match them. */
.header__search-slot .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type='search'].dgwt-wcas-search-input,
.navpanel__search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type='search'].dgwt-wcas-search-input {
	position: static;
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	min-height: 46px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: var(--fs-sm);
	color: var(--text);
}

.header__search-slot .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type='search'].dgwt-wcas-search-input:focus,
.navpanel__search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type='search'].dgwt-wcas-search-input:focus { border: 0; box-shadow: none; outline: none; }

.header__search-slot .dgwt-wcas-search-wrapp.dgwt-wcas-style-solaris .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit,
.navpanel__search .dgwt-wcas-search-wrapp.dgwt-wcas-style-solaris .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
	position: static;
	flex: none;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 38px;
	margin: 4px;
	padding: 0 var(--space-5);
	background: var(--ink);
	color: var(--text-on-ink);
	border: 0;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	text-shadow: none;
	box-shadow: none;
	transition: background-color var(--dur-fast) var(--ease-standard);
}

.header__search-slot .dgwt-wcas-search-submit::before,
.navpanel__search .dgwt-wcas-search-submit::before { display: none; }

.header__search-slot .dgwt-wcas-search-wrapp.dgwt-wcas-style-solaris .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:hover { background: var(--clay); }

.header__search-slot .dgwt-wcas-preloader { right: 110px; }

@media (max-width: 1023px) {
	.header__search-slot { display: none; }
}

/* In the panel the input stands alone, like the design's bare search field. */
.navpanel__search .dgwt-wcas-search-wrapp.dgwt-wcas-style-solaris .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit { display: none; }
.navpanel__search .dgwt-wcas-sf-wrapp { padding-right: var(--space-4); }


/* FiboSearch's empty voice-search slot still takes a flex gap. */
.header__search-slot .dgwt-wcas-voice-search,
.navpanel__search .dgwt-wcas-voice-search { display: none; }

/* ---------- Shortcode wrappers ----------
   Bricks wraps shortcode output in div.brxe-shortcode. Where the design needs
   the output as direct children (card internals, flex rows), the wrapper
   steps out of the box tree. */
.sc-contents { display: contents; }

/* WordPress/Woo screen-reader helper text (e.g. add-to-cart descriptions). */
.screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Product card ([meeiko_card]) ----------
   Fix inherited from the design: .card__name a::after stretches over the whole
   card and comes later in the DOM, so it sat on top of the add-to-cart buttons
   and every click opened the product instead. Lift the buttons above it. */
.card__quickadd { z-index: 1; }
.card__mobile-add { position: relative; z-index: 1; }

/* Woo's loop buttons carry .button; keep the design's .btn look. */
.card .btn.loading { opacity: .65; pointer-events: none; }
.card .btn.added::after { content: none; }
.card .added_to_cart { display: none; }

/* ---------- Product rail sizing (user change 2026-10-08) ----------
   The design sizes rail cards as a share of the rail (19% desktop), which felt
   cramped. Wider cards, still with part of the next one peeking in; on wide
   screens the cap keeps cards ~340px and shows more of them. */
.rail.rail--products { grid-auto-columns: 60%; }
@media (min-width: 600px)  { .rail.rail--products { grid-auto-columns: 38%; } }
@media (min-width: 1024px) { .rail.rail--products { grid-auto-columns: clamp(260px, 26%, 340px); } }

/* Biodance spotlight: arrows row above its product rail (replaces the design's
   static 3-up grid, user change). Arrows are hidden on mobile like every railnav. */
.spotlight__railnav { justify-content: flex-end; margin-top: var(--space-10); margin-bottom: var(--space-5); }
@media (max-width: 767px) { .spotlight__railnav.spotlight__railnav { display: none; } .spotlight__railnav + .rail { margin-top: var(--space-10); } }

/* Accessibility audit 2026-10-10: the mobile footer accordion buttons were 20px tall
   (WCAG 2.5.8 target size); give them the design's tap height. */
.footer__acc-btn { min-height: var(--tap, 44px); }

/* Reflow at 320px (WCAG 1.4.10, = 400 % zoom), audit 2026-10-10.
   Header: burger + logo + 3 icon buttons needed ~360px. Narrower buttons (still 44px
   tall, 36px wide: above the 24px target minimum), tighter gaps, a slightly smaller logo. */
@media (max-width: 359px) {
	.header__top { gap: var(--space-2); }
	.header__actions { gap: 0; }
	.header .icon-btn { width: 36px; }
	.header .logo { width: 96px; }
}
/* Cart summary: its implicit grid column sized to the coupon input's intrinsic width
   (size=20) + button, wider than the column on small phones. */
.cartsum { grid-template-columns: minmax(0, 1fr); }
.cartsum__coupon .coupon input { min-width: 0; flex: 1 1 0; width: auto; }
/* Sold-out overlay: paper text on ink at 55 % over a white packshot was 4.16:1 (WCAG
   1.4.3 needs 4.5:1 at 12px); 70 % gives ~5.9:1 even on pure white. */
.card__soldout { background: rgba(43, 29, 20, 0.7); }

/* Brand marquee pause toggle (site.js initMarquee, WCAG 2.2.2). */
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__toggle { display: grid; margin: var(--space-3) auto 0; color: var(--text-muted); }
.marquee__toggle:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .marquee__toggle { display: none; } }

/* Product accordion titles are h2 now (were h3 under the h1); keep the h3 look. */
.pdp-acc__title { letter-spacing: 0; }

/* Category tiles: paper text over photos. The design's scrim reached only ~30–45 % ink
   where the subtitle sits, too weak over light photo areas (WCAG 1.4.3). Deeper toward
   the bottom (~0.75–0.8 ink at text height = ≥5.9:1 even on white), top stays clear. */
.cattile::after { background: linear-gradient(180deg, rgba(43, 29, 20, 0) 35%, rgba(43, 29, 20, 0.55) 62%, rgba(43, 29, 20, 0.82) 100%); }

/* ---------- Main nav: mega menu (desktop) ----------
   Markup from meeiko-core [meeiko_menu view="mega"], data from WP menu "Meniu".
   Not in the mock-up (it shows a flat bar); built in the design's language.
   Top level reuses the design's .nav-list / .nav-link. Every wrapper between the
   nav container (overflow:hidden, powers the collapse) and .header stays static,
   so .mega takes .header as its containing block and escapes the clip. */

.mnav-slot,
.mnav,
.mnav__list,
.mnav__item { position: static; }

.mnav__item { display: flex; align-items: center; gap: 2px; }

.mnav__toggle {
	display: grid;
	place-items: center;
	width: 22px;
	height: 28px;
	color: var(--text-muted);
	border-radius: var(--radius-sm);
	transition: color var(--dur-fast) var(--ease-standard);
}

.mnav__toggle:hover { color: var(--ink); }

/* A parent without its own URL: the whole label is the button. */
.mnav__toggle.mnav__toggle--label {
	display: flex;
	align-items: center;
	gap: 6px;
	width: auto;
	height: auto;
	color: var(--ink);
}

.mnav__chev { flex: none; transition: transform var(--dur-fast) var(--ease-out); }
[aria-expanded='true'] > .mnav__chev { transform: rotate(180deg); }

.mnav__item.is-open > .nav-link::after { transform: scaleX(1); }
.mnav__link.is-ancestor { color: var(--clay-hover); }

.mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--z-popover);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--surface);
	border-top: 1px solid var(--border);
	box-shadow: var(--shadow-popover);
}

.mega[hidden] { display: none; }
.mega.is-open { animation: mega-in var(--dur-base) var(--ease-out); }

@keyframes mega-in {
	from { opacity: 0; transform: translateY(-6px); }
}

.mega__inner { padding-top: var(--space-10); padding-bottom: var(--space-8); }

.mega__cols {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-8) var(--grid-gap);
}

/* Long groups (e.g. "Pagal sudėtį", 17 links) take two tracks and flow in two columns. */
.mega__col--wide { grid-column: span 2; }
.mega__col--wide .mega__list { columns: 2; column-gap: var(--grid-gap); }

.mega__heading { display: block; margin-bottom: var(--space-4); }
a.mega__heading { transition: color var(--dur-fast) var(--ease-standard); }
a.mega__heading:hover { color: var(--clay); }

.mega__list li { break-inside: avoid; }

.mega__link {
	display: inline-block;
	padding-block: 5px;
	font-size: var(--fs-sm);
	line-height: var(--lh-small);
	color: var(--text);
	transition: color var(--dur-fast) var(--ease-standard);
}

.mega__link:hover,
.mega__link[aria-current='page'] { color: var(--clay-hover); }

/* A flat group (brands): one list flowing into as many columns as fit. */
.mega__list--grid { columns: 5 180px; column-gap: var(--grid-gap); }

.mega__foot {
	margin-top: var(--space-8);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border);
	font-size: var(--fs-sm);
}

/* ---------- Mobile nav: drilldown (Bricks offcanvas #navpanel) ----------
   Markup from [meeiko_menu view="drill"]: every level is a flat sibling panel,
   absolutely stacked; site.js slides them. Rows reuse the design's
   .navpanel .nav-link look. */

#navpanel .brx-offcanvas-inner {
	width: min(320px, 88vw);
	background: var(--surface);
	box-shadow: var(--shadow-drawer);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* The design's .navpanel rule gives the panel z 210 (--z-drawer); Bricks' backdrop
   defaults to 998 and would sit ON the panel, swallowing every tap. Use the
   design's scrim layer for it. */
#navpanel .brx-offcanvas-backdrop { background: var(--scrim); z-index: var(--z-scrim); }
#navpanel .brx-offcanvas-inner { z-index: var(--z-drawer); }

#navpanel .navpanel__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding-bottom: 0;
}

.drill-slot {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	margin-top: var(--space-4);
	/* Bleed past the panel body's 20px padding; Bricks caps elements at 100%. */
	width: auto;
	max-width: none;
	margin-left: calc(var(--space-5) * -1);
	margin-right: calc(var(--space-5) * -1);
}

.drill,
.drill__viewport { position: absolute; inset: 0; overflow: hidden; }

.drill__panel {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 var(--space-5) var(--space-10);
	background: var(--surface);
}

/* Without JS only the root shows; site.js removes [hidden] and drives classes. */
.drill__panel[hidden] { display: none; }

.drill.is-ready .drill__panel {
	visibility: hidden;
	transform: translateX(100%);
	transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}

/* Entering panels turn visible at once (visibility 0s) so the back button can
   take focus synchronously; leaving ones keep the delayed hide above. */
.drill.is-ready .drill__panel.is-active,
.drill.is-ready .drill__panel.is-behind {
	visibility: visible;
	transition: transform var(--dur-base) var(--ease-out), visibility 0s;
}

.drill.is-ready .drill__panel.is-active { transform: none; }
.drill.is-ready .drill__panel.is-behind { transform: translateX(-24%); }

.drill__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-2) 0 var(--space-3);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.drill__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	min-height: var(--tap);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--text-muted);
	transition: color var(--dur-fast) var(--ease-standard);
}

.drill__back:hover { color: var(--ink); }

.drill__title {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 500;
	line-height: var(--lh-h3);
	color: var(--ink);
	font-variation-settings: 'opsz' 24, 'SOFT' 0, 'WONK' 0;
}

#navpanel .drill__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	width: 100%;
	text-align: left;
}

#navpanel .drill__link > svg { flex: none; color: var(--text-muted); }
#navpanel .drill__link[aria-current='page'] { color: var(--clay-hover); }
#navpanel .drill__link--all { font-size: var(--fs-sm); color: var(--clay-hover); }

/* ===================================================================
   Shop adapters: mini cart, archives, product page, cart, checkout.
   The design's component CSS styles meeiko-core's own markup; these rules
   cover the wrappers and the WooCommerce markup we keep (forms, notices,
   payment list, order details) so they read as the design.
   =================================================================== */

/* ---------- WooCommerce notices (design: infobox / danger tones) ---------- */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	margin: 0 0 var(--space-5);
	padding: var(--space-4);
	list-style: none;
	border: 1px solid var(--info-border);
	border-radius: var(--radius-sm);
	background: var(--info-bg);
	color: var(--info);
	font-size: var(--fs-sm);
	line-height: var(--lh-small);
}

.woocommerce-error { flex-direction: column; align-items: flex-start; border-color: var(--danger); background: var(--surface); color: var(--danger); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto; color: var(--clay); border-bottom: 1px solid var(--clay); background: none; padding: 0 0 2px; }

/* ---------- Mini cart drawer ---------- */

.meeiko-minicart { display: contents; }
.drawer { visibility: hidden; transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
.drawer.is-open { visibility: visible; transition: transform var(--dur-base) var(--ease-out); }
.drawer:focus { outline: none; }
.drawer__body > ul { list-style: none; margin: 0; padding: 0; }
.drawer .empty { padding: var(--space-12) var(--space-2); }
.drawer .empty .cluster { justify-content: center; }
.lineitem__name a { color: inherit; }
.lineitem__name a:hover { color: var(--clay); }
.lineitem__meta { margin-top: var(--space-1); color: var(--text-muted); }
.drawer__foot .totalrow--big { margin-bottom: var(--space-1); }

.qty button:disabled { color: var(--disabled-text); cursor: not-allowed; background: none; }
[data-cart-key][aria-busy='true'] { opacity: .5; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-standard); }
[data-coupon-msg].is-error { color: var(--danger); }
[data-coupon-msg]:empty { display: none; }

/* ---------- Archive ---------- */

#archive-filters { display: contents; }
.archive__sidebar { scrollbar-width: thin; scrollbar-color: var(--border-control) transparent; }
.archive__results { min-width: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.archive__results[aria-busy='true'] { opacity: .45; pointer-events: none; }
.archive__results > .grid { list-style: none; margin: 0; padding: 0; }
.filters__group h3 { margin: 0; font: inherit; }
.archive__head .lead p, .brandhero .lead p { margin: 0; }
.archive__head .lead p + p, .brandhero .lead p + p { margin-top: var(--space-3); }
.pagination__list .dots { color: var(--text-muted); }
.toolbar .cluster { flex-wrap: nowrap; }
@media (max-width: 599px) {
	.toolbar select { min-width: 0; max-width: 52vw; }
}

/* ---------- Product page ---------- */

.pdp__gallery .gallery__main img { aspect-ratio: 1 / 1; }
/* The buy box parts sit in display:contents shortcode wrappers, so the design's
   `.buybox > * + *` margins never reach them; space them with gap instead. */
.buybox { row-gap: var(--space-6); }
.buybox > * + * { margin-top: 0; }
.pdp-atc .woocommerce-variation-price { display: none; }
.pdp-atc .chipopt.is-oos { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.buybox__lead p { margin: 0; }
.buybox__lead p + p { margin-top: var(--space-3); }
.buybox__top { display: flex; flex-direction: column; gap: var(--space-4); }
.buybox__top hr { margin-block: var(--space-2); }
.buybox__bottom { display: flex; flex-direction: column; gap: var(--space-4); }
.buybox .rating .link-quiet { text-decoration: underline; text-underline-offset: 3px; }

/* Bricks' add-to-cart element, WooCommerce form inside: the design's .qtyrow. */
.pdp-atc { width: 100%; }
.pdp-atc form.cart { margin: 0; }
.pdp-atc form.cart:not(.variations_form):not(.grouped_form),
.pdp-atc .woocommerce-variation-add-to-cart {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3);
	align-items: stretch;
}
.pdp-atc form.cart > :not(.quantity):not(.single_add_to_cart_button):not(.woocommerce-variation-add-to-cart) { grid-column: 1 / -1; }

.pdp-atc .quantity {
	display: inline-flex;
	align-items: center;
	width: max-content;
	margin: 0;
	border: 1px solid var(--border-control);
	border-radius: var(--radius-sm);
}
.pdp-atc .quantity input.qty {
	width: 48px;
	min-height: 46px;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}
.pdp-atc .quantity input.qty::-webkit-outer-spin-button,
.pdp-atc .quantity input.qty::-webkit-inner-spin-button { appearance: none; margin: 0; }
.pdp-atc .quantity .action {
	width: var(--tap);
	height: 48px;
	display: grid;
	place-items: center;
	color: var(--ink);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-standard);
}
.pdp-atc .quantity .action:hover { background: var(--ink-a06); }

.pdp-atc .single_add_to_cart_button,
.co-form #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	min-height: var(--tap);
	padding: 16px 27px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--clay);
	color: var(--on-clay);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.pdp-atc .single_add_to_cart_button { min-width: 0; }
.pdp-atc .single_add_to_cart_button:hover,
.co-form #place_order:hover { background: var(--clay-hover); }
.pdp-atc .single_add_to_cart_button:active,
.co-form #place_order:active { transform: scale(.98); }
.pdp-atc .single_add_to_cart_button.disabled,
.pdp-atc .single_add_to_cart_button:disabled { background: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed; transform: none; }
.pdp-atc .single_add_to_cart_button.loading { opacity: .7; pointer-events: none; }
.pdp-atc .added_to_cart { display: none; }

/* Variations: label above the design's chips (site.js builds them from the select). */
.pdp-atc table.variations { width: 100%; margin: 0 0 var(--space-5); border: 0; border-collapse: collapse; }
.pdp-atc table.variations tr { display: flex; flex-direction: column; gap: var(--space-3); }
.pdp-atc table.variations tr + tr { margin-top: var(--space-5); }
.pdp-atc table.variations th, .pdp-atc table.variations td { display: block; padding: 0; border: 0; text-align: left; background: none; }
.pdp-atc table.variations label { font-size: 13px; font-weight: 500; color: var(--ink); }
.pdp-atc .reset_variations { display: inline-block; margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.pdp-atc .chipopt[aria-disabled='true'] { color: var(--disabled-text); border-style: dashed; cursor: not-allowed; }
.pdp-atc .single_variation_wrap .woocommerce-variation { margin-bottom: var(--space-4); }
.pdp-atc .woocommerce-variation-price .price { font-size: var(--fs-xl); }
.pdp-atc .stock { font-size: var(--fs-sm); color: var(--success); }
.pdp-atc .stock.out-of-stock { color: var(--danger); }

/* Mobile: the sticky bar sits over the footer's last line otherwise. */
@media (max-width: 767px) { body:has(.stickybar) { padding-bottom: 76px; } }
/* Variable products: size chips in the bar (site.js mirrors the buy box's). One row on most
   phones; under ~360px the button wraps to its own row instead of squeezing. */
.stickybar--opts { flex-wrap: wrap; row-gap: var(--space-2); }
.stickybar__opts { display: flex; gap: var(--space-2); flex: none; }
.stickybar__opts:empty { display: none; }
.stickybar--opts .price { font-size: var(--fs-md); }
.stickybar--opts .btn { flex: 1 1 112px; padding-left: var(--space-3); padding-right: var(--space-3); }
.chipopt--sm { min-width: 44px; min-height: 40px; padding: 0 10px; font-size: var(--fs-xs); }
.chipopt--sm[aria-pressed='true'] { padding: 0 9px; }
.stickybar .chipopt.is-oos { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
@media (max-width: 359px) { body:has(.stickybar--opts) { padding-bottom: 128px; } }

/* Reviews */
.rlist { list-style: none; margin: 0; padding: 0; }
.review-form .comment-form { display: grid; gap: var(--space-4); max-width: var(--measure); }
.review-form .comment-form-cookies-consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-xs); color: var(--text-muted); }
.review-form .form-submit { margin: 0; }

/* Product description: GenerateBlocks layouts render inside the accordion. */
.product-description > :first-child { margin-top: 0; }
.product-description img { height: auto; }

/* ---------- Cart page ---------- */

.meeiko-cartpage .sechead { align-items: flex-end; }
.cart__notices .woocommerce-message, .cart__notices .woocommerce-error, .cart__notices .woocommerce-info { margin-bottom: var(--space-4); }
.cart__items .drawer__ship { padding: 0 0 var(--space-5); border-bottom: 0; font-size: var(--fs-sm); }
.cart__items .drawer__ship .progress { background: var(--border); }
.cartline__name { display: block; }
.cartsum .totalrow + .totalrow { margin-top: 0; }
.cartsum .paylogos { justify-content: center; }
.meeiko-cartpage > .empty { padding-block: var(--space-12); }
.meeiko-cartpage > .empty .cluster { justify-content: center; }

/* ---------- Checkout ---------- */

.co-page { padding-bottom: 0; }
.co-before:empty, .co-before > .woocommerce-notices-wrapper:empty { display: none; }
.co-before { padding-top: var(--space-6); }
form[data-co-login] { display: none; }

/* WooCommerce rows as the design's .field */
.co-form .form-row { float: none; width: auto; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.co-form .form-row label { font-size: 13px; font-weight: 500; color: var(--ink); line-height: var(--lh-small); }
.co-form .form-row .required { color: var(--danger); border: 0; text-decoration: none; }
.co-form .form-row .optional { color: var(--text-muted); font-weight: 400; }
.co-form .woocommerce-input-wrapper { display: block; }
.co-form .form-row.woocommerce-invalid input.input-text,
.co-form .form-row.woocommerce-invalid select { border-color: var(--danger); }
.co-form .form-row.woocommerce-validated input.input-text { border-color: var(--border-control); }
.co-form .checkout-inline-error-message { margin: 0; font-size: 13px; line-height: var(--lh-small); color: var(--danger); }
.co-form .form-row .field__error.is-visible + .checkout-inline-error-message { display: none; }
.co-form .form-row:has(input[type='hidden']:only-child) { display: none; }

.woocommerce-billing-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper { display: grid; gap: var(--space-4); }
.co-address[hidden], .co-shipping-address[hidden] { display: none; }
@media (min-width: 600px) {
	.co-fields, .co-address { grid-template-columns: 1fr 1fr; }
	.co-fields > .form-row-wide, .co-address > .form-row-wide { grid-column: 1 / -1; }
}

.co-form .woocommerce-account-fields { display: grid; gap: var(--space-3); }
.co-form .woocommerce-account-fields[hidden] { display: none; }

/* Shipping options */
.meeiko-shipping { display: block; }
.shipopts { display: flex; flex-direction: column; }
.shipopt--only { border-color: var(--clay); background: var(--clay-tint); }
.shipopt--only .shipopt__extra { grid-template-rows: 1fr; }
.shipopt__label input[type='radio'] {
	appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--border-control);
	border-radius: 50%;
	background: var(--surface);
	cursor: pointer;
}
.shipopt__label input[type='radio']:checked { border: 5px solid var(--ink); }

/* Mobile/tablet (one column, summary on top): the order summary shows on the last step only, so
   steps 1–2 open straight on the form (user decision 2026-10-09). Desktop keeps the summary in
   its side column on every step. site.js keeps .co-layout[data-step] in sync. */
@media (max-width: 1023px) {
	.co-layout:not([data-step='3']) > .summary { display: none; }
}
/* …and on step 3 it is a tap-to-open bar ("Rodyti užsakymą · 55,78 €"), so the payment form
   comes first. Desktop: the full panel, the wrapper is display:contents. */
.summary__toggle { display: none; }
@media (min-width: 1024px) { .summary__body { display: contents; } }
@media (max-width: 1023px) {
	.co-layout > .summary { gap: 0; padding: 0; }
	.summary__toggle { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--tap); padding: var(--space-4) var(--space-5); border: 0; background: none; font: 500 var(--fs-sm) / 1.2 var(--font-body); color: var(--ink); text-align: left; cursor: pointer; }
	.summary__toggle:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
	.summary__toggle-total { margin-left: auto; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500; }
	.summary__toggle-icon { flex: none; transition: transform var(--dur-fast) var(--ease-standard); }
	.summary.is-open .summary__toggle-icon { transform: rotate(180deg); }
	.summary__body { display: none; flex-direction: column; gap: var(--space-5); padding: 0 var(--space-5) var(--space-5); }
	.summary.is-open .summary__body { display: flex; }
}

/* Fieldsets default to min-width:min-content: the parcel-locker list's long option texts
   pushed the whole form wider than a phone screen. */
.co-form fieldset { min-width: 0; }
/* Same trap one level down (mobile overflow, steps 2–3, 2026-10-10): .costep, .recap and
   .shipopt__extra are grids with no column template, so their implicit auto column grew to
   the content's min-content (the select2 locker name is nowrap, the recap email has no break
   point) and pushed the page ~10–30px wider than the phone. Pin each to one shrinkable column. */
.costep, .recap, .shipopt__extra { grid-template-columns: minmax(0, 1fr); }
.meeiko-shipping, .shipopts, .shipopt, .shipopt__extra .inner, .shipopt__extra label, .shipopt__extra p { min-width: 0; max-width: 100%; }
.recap__val { overflow-wrap: anywhere; }
/* County: optional and not asked for (includes/checkout.php country locale). */
.co-form #billing_state_field, .co-form #shipping_state_field { display: none !important; }

/* UNISEND (LP Express) parcel-locker picker, inside the chosen .shipopt (cart-shipping.php).
   The plugin prints <br><label><p><select> and turns the select into select2. */
.shipopt__extra .inner > br { display: none; }
.shipopt__extra label[for='woo_lithuaniapost_lpexpress_terminal_id'] { display: block; width: 100%; margin: 0; padding: 0; }
.shipopt__extra .woo_lithuaniapost_lpexpress_terminal_select_container { display: block; width: 100%; max-width: none; margin: 0; }
.shipopt__extra .select2-container { width: 100% !important; max-width: 100%; }
.shipopt__extra .select2-container .select2-selection--single { height: 48px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface); }
.shipopt__extra .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 40px 0 14px; line-height: 46px; font-size: var(--fs-sm); color: var(--ink); }
.shipopt__extra .select2-container .select2-selection--single .select2-selection__arrow { top: 1px; right: 8px; height: 46px; }
.shipopt__extra .select2-container--focus .select2-selection--single,
.shipopt__extra .select2-container--open .select2-selection--single { border-color: var(--ink); }
.shipopt__extra .select2-selection:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.shipopt__extra .field__error { margin: 0; }
/* The dropdown is appended to <body>: plain selectors, it only ever opens here and on account forms. */
.select2-dropdown { border-color: var(--border-control); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.select2-search--dropdown .select2-search__field { height: 40px; padding: 0 10px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); font-size: 16px; }
.select2-results__group { padding: 8px 10px 4px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--clay); color: #fff; }
/* Unisend adds its logo into every option's label; the design's options are name + price. */
.shipopt__label img[src*='woo-lithuaniapost'] { display: none; }

/* Payment methods (WooCommerce list) as the design's option cards */
.co-form #payment { background: none; border: 0; border-radius: 0; padding: 0; }
/* site.js focuses the step title (tabindex -1) on step change; it isn't a control. */
.costep__title[tabindex='-1']:focus { outline: none; box-shadow: none; }
.co-form .wc_payment_methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.co-form .wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--border-control);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.co-form .wc_payment_method:hover { border-color: var(--ink); }
/* > input: Klix keeps a radio checked inside every method's box, which must not count. */
.co-form .wc_payment_method:has(> input:checked) { border-color: var(--clay); background: var(--clay-tint); }
.co-form .wc_payment_method > input[type='radio'] {
	appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0; /* a global input rule adds 12px side padding: the radio became an oval */
	border: 1px solid var(--border-control);
	border-radius: 50%;
	background: var(--surface);
	cursor: pointer;
}
.co-form .wc_payment_method > input[type='radio']:checked { border: 5px solid var(--ink); }
/* Klix (spell-woocommerce) bank and card choices. The plugin prints each choice as a
   50%-wide label (inline styles) holding a radio, a name and a full-size logo. Shown here
   as compact logo tiles; the radio stays focusable and the tile is its label. */
.co-form .payment_box:has(.spell--pm-wrapper) { padding-left: 0; }
.co-form .payment_box > div:has(> label .spell--pm-wrapper) {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: var(--space-2);
	margin-top: var(--space-1);
}
.co-form .payment_box > div > label:has(.spell--pm-wrapper) {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-height: 56px;
	padding: var(--space-2) var(--space-3) !important;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.co-form .payment_box > div > label:has(.spell--pm-wrapper):hover { border-color: var(--ink); }
.co-form .payment_box > div > label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.co-form .payment_box > div > label:has(input:focus-visible) { outline: 2px solid var(--clay); outline-offset: 2px; }
/* Radio and name: kept for keyboards and screen readers (the logo carries the name visually). */
.co-form .spell--pm-wrapper { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.co-form .spell--pm-wrapper input { margin: 0; }
.co-form .spell-pm-image { display: flex; align-items: center; justify-content: center; width: 100%; }
.co-form .spell-pm-image img { display: block; width: auto; max-width: 100%; height: 26px; object-fit: contain; }
.co-form .wc_payment_method > label { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); cursor: pointer; }
.co-form .wc_payment_method > label img { max-height: 24px; width: auto; }
.co-form .payment_box { flex-basis: 100%; margin: 0; padding: 0 0 0 calc(18px + var(--space-3)); background: none; font-size: 13px; color: var(--text-muted); }
.co-form .payment_box::before { content: none; }
.co-form .payment_box p { margin: 0; }
.co-form #payment .place-order { display: grid; gap: var(--space-4); margin-top: var(--space-6); padding: 0; }
.co-form .woocommerce-terms-and-conditions-wrapper { display: grid; gap: var(--space-3); font-size: 13px; color: var(--text-muted); }
.co-form .woocommerce-terms-and-conditions-wrapper .form-row { flex-direction: row; }
.co-form .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 400; cursor: pointer; }
.co-form .woocommerce-form__label-for-checkbox input[type='checkbox'] {
	appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	border: 1px solid var(--border-control);
	background: var(--surface);
	cursor: pointer;
}
.co-form .woocommerce-form__label-for-checkbox input[type='checkbox']:checked {
	background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F6F1EA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / 14px no-repeat;
	border-color: var(--ink);
}
.co-form .woocommerce-terms-and-conditions-wrapper a { color: var(--clay-hover); border-bottom: 1px solid var(--clay-a40); }
.co-form .woocommerce-privacy-policy-text p { margin: 0; }
.co-form #order_review { position: static; }
.co-form .blockUI.blockOverlay { background: var(--surface) !important; opacity: .6 !important; }

/* Summary */
.summary .woocommerce-checkout-review-order-table { display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; background: none; }
.summary .totalrow .link-quiet { margin-left: var(--space-2); font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 3px; }
.summary__items { list-style: none; margin: 0; padding: 0; }
.summary__item .lineitem__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
/* Order received (templates/woocommerce/checkout/thankyou.php): the success card, payment
   instructions and the buyer's address on the left; the order itself as the summary panel on
   the right (one column on phones). .co-done__details is display:contents so WooCommerce's
   sections (gateway text, order details, customer details) are placed by the page grid. */
.co-done { display: grid; gap: var(--space-6); align-items: start; padding-block: var(--space-10) var(--space-16); }
.co-done__details { display: contents; }
.co-done__details > script { display: none; }
.co-done .costep__done { padding: var(--space-8); }
.co-done__facts { display: grid; width: 100%; margin: var(--space-2) 0 0; border-top: 1px solid var(--border); }
.co-done__facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.co-done__facts dt { color: var(--text-muted); }
.co-done__facts dd { margin: 0; font-weight: 500; color: var(--ink); text-align: right; }
.co-done__facts .co-done__total dd { font-family: var(--font-display); font-size: var(--fs-lg); }
/* Gateway instructions (cash on delivery note, bank transfer details) */
.co-done__details > p { margin: 0; padding: var(--space-4) var(--space-5); border-left: 2px solid var(--clay); background: var(--surface); font-size: var(--fs-sm); color: var(--text); }
.co-done__details h2 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); color: var(--ink); }
/* The order, as the checkout's summary panel */
.co-done .woocommerce-order-details { margin: 0; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--sand); }
/* The table is laid out as blocks + flex rows: item lines (name | price) and totals (label |
   value) each get the full panel width, and long values (payment method, a note) wrap on their
   own instead of squeezing a shared table column. The column headers stay for screen readers. */
.co-done table.order_details,
.co-done table.order_details tbody,
.co-done table.order_details tfoot { display: block; width: 100%; margin: 0; border: 0; border-radius: 0; background: none; font-size: var(--fs-sm); }
.co-done table.order_details thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.co-done table.order_details tr { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--border); background: none; }
.co-done table.order_details tfoot tr:last-child { border-bottom: 0; }
.co-done table.order_details th,
.co-done table.order_details td { display: block; width: auto; padding: var(--space-3) 0; border: 0; background: none; font-weight: 400; line-height: var(--lh-small); text-align: left; }
.co-done table.order_details .product-name { flex: 1 1 auto; min-width: 0; }
.co-done table.order_details .product-total { flex: none; white-space: nowrap; text-align: right; }
.co-done table.order_details .product-name a { color: var(--ink); text-decoration: none; }
.co-done table.order_details .product-quantity { padding: 0; background: none; font-weight: 400; color: var(--text-muted); }
.co-done table.order_details .wc-item-meta { margin: var(--space-1) 0 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--text-muted); }
.co-done table.order_details .wc-item-meta p { display: inline; margin: 0; }
.co-done table.order_details tfoot th { flex: none; color: var(--text-muted); white-space: nowrap; }
.co-done table.order_details tfoot td { flex: 1 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
/* The order total is the row WooCommerce adds "(įskaičiuota … PVM)" to */
.co-done table.order_details tfoot tr:has(.includes_tax) th { color: var(--ink); }
.co-done table.order_details tfoot tr:has(.includes_tax) td { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink); }
.co-done table.order_details .includes_tax { display: block; font-family: var(--font-body); font-size: var(--fs-xs); color: var(--text-muted); }
/* Buyer's address */
.co-done .woocommerce-customer-details { margin: 0; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.co-done .woocommerce-customer-details address { margin: 0; padding: 0; border: 0; font-style: normal; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text); }
.co-done .woocommerce-customer-details address p { margin: 0; padding: 0; }
.co-done .woocommerce-customer-details address p::before { content: none; }
.co-done .woocommerce-columns { display: grid; gap: var(--space-6); }
@media (min-width: 700px) { .co-done .woocommerce-columns--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) {
	.co-done { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); column-gap: var(--space-10); }
	.co-done > *, .co-done__details > * { grid-column: 1; }
	.co-done .woocommerce-order-details { grid-column: 2; grid-row: 1 / span 8; position: sticky; top: var(--space-8); }
}

/* ---------- Grid guards ----------
   The design's one-column mobile grids use an implicit auto track, which grows
   to the widest child's min-content (e.g. Bricks' 200px add-to-cart minimum)
   and pushes the page past the viewport. Pin the track to the container. */
@media (max-width: 899px) { .pdp, .cart__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1023px) { .co-layout, .archive__layout { grid-template-columns: minmax(0, 1fr); } }

/* Checkout header: plain, not the shop header's sticky shell. */
#brx-header:has(.co-header) { position: static; min-height: 0; }

/* Product details: GenerateBlocks description layouts (2-column blocks) need more
   than the design's reading measure. */
.pdp-details { max-width: 960px; }

/* ---------- Sticky offsets under the pinned header ----------
   site.js measures what stays on screen once the header pins (--pinned-h: the
   nav bar on desktop, the top row on mobile); the design assumed its own header. */
.toolbar { top: var(--pinned-h, var(--header-h-scrolled)); }
@media (min-width: 1024px) {
	.archive__sidebar { top: calc(var(--pinned-h, var(--header-h-scrolled)) + var(--space-16)); max-height: calc(100vh - var(--pinned-h, var(--header-h-scrolled)) - var(--space-20)); }
	.pdp__gallery { top: calc(var(--pinned-h, var(--header-h-scrolled)) + var(--space-8)); }
	.faq__intro { top: calc(var(--pinned-h, var(--header-h-scrolled)) + var(--space-10)); }
}
@media (min-width: 900px) { .cartsum { top: calc(var(--pinned-h, var(--header-h-scrolled)) + var(--space-6)); } }

/* ---------- Wishlist (Caiman Media Wishlist; markup from meeiko-core) ---------- */

/* Card heart: top right of the image, above the card's stretched name link. */
.card__wish {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	color: var(--ink);
	transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.card__wish:hover { background: var(--surface); color: var(--clay); }
.card__wish:active { transform: scale(.92); }
.card__soldout ~ .card__wish { z-index: 2; }

/* Saved = filled heart (the plugin sets aria-pressed + .cmw-is-saved). */
[data-cmw-toggle] .wish-heart path { transition: fill var(--dur-fast) var(--ease-standard); }
[data-cmw-toggle][aria-pressed='true'] .wish-heart,
.card__wish[aria-pressed='true'] { color: var(--clay); }
[data-cmw-toggle][aria-pressed='true'] .wish-heart path,
.card__wish[aria-pressed='true'] svg path { fill: currentColor; }
[data-cmw-toggle][aria-busy='true'] { opacity: .6; }

/* Product page "Įsiminti" under add to cart. */
.pdp-wish { margin: 0; }
.pdp-wish button { gap: var(--space-2); font-size: var(--fs-sm); }
.pdp-wish .wish-heart { width: 16px; height: 16px; }
.pdp-wish__saved { display: none; }
.pdp-wish [aria-pressed='true'] .pdp-wish__save { display: none; }
.pdp-wish [aria-pressed='true'] .pdp-wish__saved { display: inline; }

/* Header heart badge: .wishlink .cmw-count in native.css. */
.icon-btn { position: relative; }

/* Wishlist page */
.wishpage .grid { list-style: none; margin: 0; padding: 0; }
.wishcard { position: relative; }
.wishcard .card__wish { display: none; }
.wishcard__x {
	position: absolute;
	top: 8px; right: 8px;
	z-index: 2;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	box-shadow: 0 0 0 1px var(--border);
}
.wishcard__x:hover { color: var(--danger); }
.wishpage__empty .cluster { justify-content: center; }
.wishpage__note { margin-top: var(--space-8); text-align: center; }

/* Cart: save for later + saved list */
.cartline__extra:empty { display: none; }
.savedlist .cartline__qty .btn { padding: 10px 18px; min-height: 40px; }
.savedlist .cartline__x[aria-busy='true'] { opacity: .5; }

/* ---------- Free-shipping meter ----------
   Design bug: .progress__fill is a <span>, so it stayed inline and its width
   never showed. Reached = success green (bar + message). 4px instead of 2px
   so the progress is actually readable. */
.progress { height: 4px; }
.progress__fill { display: block; }
.progress.is-complete .progress__fill { background: var(--success); }
.drawer__ship.is-complete p strong { color: var(--success); }

/* ---------- Waitlist ("Pranešti, kai atsiras") ---------- */
.waitlist {
	padding: var(--space-5);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--sand);
	display: grid;
	gap: var(--space-3);
}
.waitlist[hidden] { display: none; }
.waitlist__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); color: var(--ink); }
.waitlist__form { display: grid; gap: var(--space-3); }
.waitlist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); }
@media (max-width: 479px) { .waitlist__row { grid-template-columns: minmax(0, 1fr); } }
.waitlist .check { min-height: 0; padding-block: 0; font-size: 13px; }
.waitlist__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.waitlist__msg:empty { display: none; }
.waitlist__msg.is-error { color: var(--danger); }
.waitlist.is-done .waitlist__row, .waitlist.is-done .check { display: none; }
.waitlist.is-done .waitlist__msg { font-size: var(--fs-sm); color: var(--success); }
.waitlist button[aria-busy='true'] { opacity: .7; }

/* Sold-out product card: link to the product page's waitlist. */
.card__notify {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding-top: var(--space-3);
	font-size: 13px;
	color: var(--clay-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.card__notify:hover { color: var(--ink); }
.waitlist__policy { margin-top: calc(var(--space-2) * -1); padding-left: calc(18px + var(--space-3)); }
.waitlist__policy a { text-decoration: underline; text-underline-offset: 3px; }
.waitlist.is-done .waitlist__policy { display: none; }

/* Design bug: the later `.cartline__media { grid-row: span 2 }` overrides the
   explicit row placement, so the image was auto-placed below the extra row
   ("Išsaugoti vėlesniam kartui"). Pin it to the top-left in both layouts. */
.cartline > .cartline__media { grid-column: 1; grid-row: 1 / span 2; }
/* Same cascade bug for the extra row: the later `grid-column: 1 / -1` beat the
   container query, putting the link under the image on wide layouts. */
@container (min-width: 620px) { .cartline > .cartline__extra { grid-column: 2 / -1; grid-row: 2; } }

/* ---------- Order bumps ("Rekomenduojame") ---------- */
.meeiko-bumps[hidden] { display: none; }
.meeiko-bumps { display: grid; gap: var(--space-3); }
.bumps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.bump {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-3);
	border: 1px dashed var(--clay);
	border-radius: var(--radius-sm);
	background: var(--surface);
}
.bump__media { display: block; width: 56px; aspect-ratio: 1 / 1; background: var(--plate); border-radius: var(--radius-sm); overflow: hidden; }
.bump__media img { width: 100%; height: 100%; object-fit: cover; }
.bump__body { display: grid; gap: 2px; min-width: 0; }
.bump__title { font-size: var(--fs-xs); font-weight: 600; color: var(--clay-hover); line-height: var(--lh-small); }
.bump__name { font-size: 13px; line-height: var(--lh-small); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bump__name:hover { color: var(--clay); }
.bump__price { font-size: 13px; font-weight: 500; color: var(--ink); display: flex; gap: var(--space-2); align-items: baseline; }
.bump__price s { font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); }
.bump__variation { min-height: 36px; padding: 6px 32px 6px 10px; font-size: 13px; background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px; margin-top: var(--space-1); }
.bump__add { min-height: 40px; padding: 8px 16px; }
.bump__add[aria-busy='true'] { opacity: .6; }
.summary .meeiko-bumps { padding-top: var(--space-2); }
/* Mini cart: after the lines, inside the scrolling body. */
.drawer .meeiko-bumps { padding-block: var(--space-5); }
@media (max-width: 420px) {
	.bump { grid-template-columns: 48px minmax(0, 1fr); }
	.bump__media { width: 48px; }
	.bump__add { grid-column: 1 / -1; width: 100%; }
}

/* Stock line: "Sandėlyje daugiau nei 10 vnt." (green) / "Liko N vnt." (clay, low). */
.pdp-atc .stock.low-stock { color: var(--clay-hover); }

/* ---------- Product info accordion (Bricks accordion-nested, design .acc look) ---------- */
.pdp-acc { width: 100%; border-top: 1px solid var(--border); }
.pdp-acc__item { width: 100%; border-bottom: 1px solid var(--border); }
.pdp-acc .accordion-title-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
	padding: var(--space-4) 0;
	text-align: left;
	cursor: pointer;
	background: none;
}
.pdp-acc__title {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 500;
	line-height: var(--lh-h3);
	color: var(--ink);
	transition: color var(--dur-fast) var(--ease-standard);
}
.pdp-acc .accordion-title-wrapper:hover .pdp-acc__title { color: var(--clay-hover); }
.pdp-acc__icon { flex: none; width: 18px; height: 18px; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-standard); }
.pdp-acc .brx-open .pdp-acc__icon { transform: rotate(180deg); }
.pdp-acc .accordion-content-wrapper { width: 100%; padding: 0 0 var(--space-5); font-size: var(--fs-sm); color: var(--text); }
.pdp-acc .prose ul { padding-left: 1.2em; list-style: disc; display: grid; gap: var(--space-1); }
.pdp-acc .prose p + p, .pdp-acc .prose p + ul, .pdp-acc .prose ul + p { margin-top: var(--space-3); }
/* WooCommerce attributes table */
.pdp-attrs table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pdp-attrs th, .pdp-attrs td { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; background: none; }
.pdp-attrs th { width: 40%; font-weight: 500; color: var(--text-muted); }
.pdp-attrs td p { margin: 0; }
.pdp-attrs tr:last-child th, .pdp-attrs tr:last-child td { border-bottom: 0; }
.pdp-attrs h2 { display: none; }

/* Long description section */
.pdp-desc .product-description { max-width: 960px; }

/* Single product: <main> carries WooCommerce's .product class, which Bricks' Woo CSS makes a
   wrapping flex row, so full-width sections shrank to their content. Shortcode wrappers are
   display:contents, so their sections (skin match) are flex items too. */
main#brx-content.product > *,
main#brx-content.product > .sc-contents > * { flex: 0 0 100%; width: 100%; }

/* Product page skin match: compact strip. Small circles with the label beside them;
   2 columns on mobile, heading + one row of tiles on desktop. */
.skinmatch.section--tight { padding-block: var(--space-6); }
.skinmatch .container { display: flex; flex-direction: column; gap: var(--space-4); }
.skinmatch h2 { margin: 0; font-size: var(--fs-md); }
.skinmatch .skinmatch__grid { margin: 0; gap: var(--space-3) var(--space-4); }
.skinmatch .skintile { display: flex; align-items: center; gap: var(--space-3); text-align: left; }
.skinmatch .skintile__media { flex: 0 0 auto; width: 48px; margin: 0; }
.skinmatch .skintile span:not(.skintile__media) { margin-top: 0; }
@media (min-width: 768px) {
  .skinmatch.section--tight { padding-block: var(--space-8); }
  .skinmatch .container { flex-direction: row; align-items: center; gap: var(--space-10); }
  .skinmatch h2 { flex: 0 0 auto; max-width: 14ch; }
  .skinmatch .skinmatch__grid { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
  .skinmatch .skintile__media { width: 56px; }
}

/* Brand hero: the logo on its own, no plate-coloured frame (user request). */
.brandhero__logo { aspect-ratio: auto; background: none; border-radius: 0; place-items: center; }
.brandhero__logo img { width: auto; height: auto; max-width: 100%; max-height: 360px; padding: 0; border-radius: var(--radius-md); }

/* Brands index (/prekiu-zenklai/): A–Z grid of square logo cards, name + product count. */
.brandindex.section--tight { padding-top: 0; }
.brandgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--grid-gap); list-style: none; margin: 0; padding: 0; }
@media (min-width: 600px) { .brandgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .brandgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .brandgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.brandcard { display: flex; flex-direction: column; gap: var(--space-1); color: inherit; text-decoration: none; }
.brandcard__logo { display: block; aspect-ratio: 1 / 1; margin-bottom: var(--space-2); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); }
.brandcard__logo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.brandcard:hover .brandcard__logo img { transform: scale(1.04); }
.brandcard__name { font-weight: 500; line-height: 1.3; color: var(--ink); }
.brandcard:hover .brandcard__name { color: var(--clay-hover); }
.brandcard__count { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------- Bundles (Meeiko Smart Bundles plugin) ---------- */
/* Product page: "Rinkinį sudaro" above add to cart (bricks/shop.py, bundles only). */
.pdp-bundle { display: flex; flex-direction: column; gap: var(--space-3); }
.pdp-bundle__title { margin: 0; font: 500 var(--fs-xs) / 1.2 var(--font-body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.pdp-bundle__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.pdp-bundle__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding-block: var(--space-3); border-bottom: 1px solid var(--border); }
.pdp-bundle__media { display: block; width: 56px; aspect-ratio: 1 / 1; overflow: hidden; background: var(--plate); }
.pdp-bundle__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-bundle__text { min-width: 0; }
.pdp-bundle__brand { margin: 0; font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.pdp-bundle__nameline { margin: 2px 0 0; font-size: var(--fs-sm); line-height: var(--lh-small); }
.pdp-bundle__name { color: var(--ink); text-decoration: none; }
.pdp-bundle__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.pdp-bundle__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--fs-sm); white-space: nowrap; }
.pdp-bundle__qty { font-size: var(--fs-xs); color: var(--text-muted); }
.pdp-bundle__saving { margin: 0; font-size: var(--fs-sm); color: var(--text); }
.pdp-bundle__saving strong { font-weight: 600; color: var(--clay-hover); }

/* Cart page + checkout summary: a bundle's items under its line. */
.bundlelist { display: flex; flex-direction: column; gap: 6px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.bundlelist__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; font-size: var(--fs-xs); line-height: var(--lh-small); color: var(--text); }
.bundlelist__item:not(:has(.bundlelist__media)) { grid-template-columns: minmax(0, 1fr) auto; }
.bundlelist__media { width: 28px; aspect-ratio: 1 / 1; overflow: hidden; background: var(--plate); }
.bundlelist__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bundlelist__qty { color: var(--text-muted); }
.cartline__bundle { margin-top: var(--space-1); }
.summary__item--bundle { align-items: start; }
.summary__name { min-width: 0; }
.summary__name p { margin: 0; }

/* Mini cart: "Sudėtis: …" under a bundle line. */
.minicart .lineitem__bundle { margin: var(--space-1) 0 0; color: var(--text-muted); }

/* Order views (thank-you page, My account): a bundle's item lines sit under the bundle. */
.msb-bundle-item td.product-name,
.co-done table.order_details .msb-bundle-item td.product-name { padding-left: var(--space-6); font-size: var(--fs-xs); color: var(--text-muted); }
.msb-bundle-item td.product-name a { color: inherit; }
.msb-bundle-item__mark { color: var(--text-muted); }

/* ===================================================================
   Customer Reviews for WooCommerce PRO ([cusrev_reviews] in the product
   template) in the design's review look (reviews__summary / rrow).
   Prefixed with the section and the plugin's own #reviews / #comments ids
   so it outranks the plugin stylesheet (which goes up to 2 ids + 3 classes).
   =================================================================== */

.pdp-reviews #reviews.cr-reviews-ajax-reviews { margin: 0; padding: 0; font-family: var(--font-body); color: var(--text); }
.pdp-reviews #reviews #comments.cr-reviews-ajax-comments { margin: 0; padding: 0; }
.pdp-reviews #reviews #comments .woocommerce-Reviews-title { display: none; }

/* Stars: clay on a quiet base */
.pdp-reviews #reviews .crstar-rating-svg .cr-rating-icon-base svg { color: var(--border-control); }
.pdp-reviews #reviews .crstar-rating-svg .cr-rating-icon-frnt svg { color: var(--clay); }
.pdp-reviews #reviews .crstar-rating-svg .cr-rating-icon-frnt svg path:last-child { fill: var(--clay); }

/* Summary: big average left, distribution bars right */
.pdp-reviews #reviews #comments .cr-summaryBox-wrap {
	display: grid;
	gap: var(--space-8);
	margin: 0 0 var(--space-8);
	padding: 0 0 var(--space-10);
	border: 0;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	background: none;
}
@media (min-width: 768px) {
	.pdp-reviews #reviews #comments .cr-summaryBox-wrap { grid-template-columns: minmax(200px, auto) 1fr; gap: var(--space-16); align-items: center; }
}
.pdp-reviews #reviews #comments .cr-summaryBox-wrap .cr-overall-rating-wrap,
.pdp-reviews #reviews #comments .cr-summaryBox-wrap .ivole-summaryBox { width: auto; margin: 0; padding: 0; border: 0; background: none; }
.pdp-reviews #reviews #comments .cr-summaryBox-wrap .cr-overall-rating-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.pdp-reviews #reviews #comments .cr-summaryBox-wrap .cr-average-rating span {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-3xl);
	line-height: 1;
	color: var(--ink);
}
.pdp-reviews #reviews #comments .cr-summaryBox-wrap .cr-total-rating-count { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.pdp-reviews #reviews #comments .cr-ajax-reviews-add-review,
.pdp-reviews #reviews #comments .cr-show-more-reviews-prd {
	min-height: var(--tap);
	padding: 12px 24px;
	border: 1px solid var(--ink);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--ink);
	font: 500 var(--fs-sm) / 1.2 var(--font-body);
	letter-spacing: .02em;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.pdp-reviews #reviews #comments .cr-ajax-reviews-add-review { margin-top: var(--space-4); }
.pdp-reviews #reviews #comments .cr-ajax-reviews-add-review:hover,
.pdp-reviews #reviews #comments .cr-show-more-reviews-prd:hover { background: var(--ink); color: var(--text-on-ink); }

.pdp-reviews #reviews #comments .cr-histogramTable { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: none; }
.pdp-reviews #reviews #comments .cr-histogramTable td { padding: 4px 0; border: 0; background: none; font-size: 13px; color: var(--text-muted); vertical-align: middle; }
.pdp-reviews #reviews #comments .cr-histogramTable .ivole-histogramCell1 { width: 110px; white-space: nowrap; }
.pdp-reviews #reviews #comments .cr-histogramTable .ivole-histogramCell3 { width: 52px; text-align: right; }
.pdp-reviews #reviews #comments .cr-histogramTable .ivole-histogram-a { color: inherit; text-decoration: none; }
.pdp-reviews #reviews #comments .ivole-meter { height: 6px; margin: 0 var(--space-3); border-radius: 999px; background: var(--border); box-shadow: none; overflow: hidden; }
.pdp-reviews #reviews #comments .ivole-meter .ivole-meter-bar { height: 100%; border-radius: 999px; background: var(--clay); color: transparent; font-size: 0; }
.pdp-reviews #reviews #comments .ivole-meter .ivole-meter-bar::before { content: none; }

/* Search + count/sort row */
.pdp-reviews #reviews #comments .cr-ajax-search { margin: 0 0 var(--space-4); }
.pdp-reviews #reviews #comments .cr-ajax-search > div { position: relative; display: flex; align-items: center; max-width: 420px; }
.pdp-reviews #reviews #comments .cr-ajax-search svg { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--text-muted); }
.pdp-reviews #reviews #comments .cr-ajax-search .cr-input-text {
	width: 100%;
	min-height: 44px;
	padding: 10px 40px;
	border: 1px solid var(--border-control);
	border-radius: 999px;
	background: var(--surface);
	font-size: var(--fs-sm);
	color: var(--ink);
}
.pdp-reviews #reviews #comments .cr-ajax-search .cr-clear-input { position: absolute; right: 12px; cursor: pointer; }
.pdp-reviews #reviews #comments .cr-count-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0 0 var(--space-2);
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}
.pdp-reviews #reviews #comments .cr-ajax-reviews-sort {
	min-height: 40px;
	padding: 8px 40px 8px 14px;
	border: 1px solid var(--border-control);
	border-radius: var(--radius-sm);
	background-color: var(--surface);
	font-size: var(--fs-sm);
	color: var(--ink);
}

/* Review rows (design .rrow) */
.pdp-reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list { margin: 0; padding: 0; list-style: none; }
.pdp-reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list > li { margin: 0; padding: var(--space-6) 0; border-bottom: 1px solid var(--border); list-style: none; }
.pdp-reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list .comment_container {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.pdp-reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list .comment_container .cr-avatar {
	position: static;
	float: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	filter: sepia(.35) saturate(.8);
}
.pdp-reviews #reviews #comments .cr-ajax-reviews-list .comment_container .cr-avatar-check { left: 30px; top: 30px; }
.pdp-reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list .comment_container .cr-comment-text {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.pdp-reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list .comment_container .meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin: 0;
	font-size: var(--fs-sm);
}
.pdp-reviews #reviews #comments .cr-ajax-reviews-list .meta .woocommerce-review__author { font-weight: 500; color: var(--ink); font-size: var(--fs-sm); }
.pdp-reviews #reviews #comments .cr-ajax-reviews-list .meta .woocommerce-review__verified { font-size: var(--fs-xs); color: var(--success); }
.pdp-reviews #reviews #comments .cr-ajax-reviews-list .meta time { font-size: var(--fs-xs); color: var(--text-muted); }
.pdp-reviews #reviews #comments .cr-ajax-reviews-list .crstar-rating-svg { margin: 0; }
.pdp-reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list .cr-comment-text p,
.pdp-reviews #reviews #comments .cr-ajax-reviews-list .description { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text); }
.pdp-reviews #reviews #comments .cr-ajax-reviews-list .cr-voting-cont { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--text-muted); }
.pdp-reviews #reviews #comments .cr-ajax-reviews-list .cr-voting-cont svg { width: 14px; height: 14px; color: var(--text-muted); }
.pdp-reviews #reviews #comments .cr-ajax-reviews-list .children { margin: var(--space-4) 0 0; padding: var(--space-4); border-left: 2px solid var(--clay); background: var(--sand); list-style: none; }

/* Show more / empty search */
.pdp-reviews #reviews #comments .cr-show-more-review-spinner-cnt { margin-top: var(--space-8); text-align: left; }
.pdp-reviews #reviews #comments .cr-search-no-reviews { margin: var(--space-6) 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* Write-a-review form */
.pdp-reviews #reviews .cr-ajax-reviews-review-form { max-width: 720px; }
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-wrap {
	padding: var(--space-6);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--sand);
	font-family: var(--font-body);
	color: var(--text);
}
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-nav { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-nav .cr-nav-left span { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); color: var(--ink); }
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--ink); }
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); background: var(--plate); }
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-rating-label,
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-lbl { font-size: 13px; font-weight: 500; color: var(--ink); }
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-rating-cont svg { color: var(--clay); }
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-comment .cr-review-form-comment-txt,
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-ne .cr-review-form-txt {
	width: 100%;
	min-height: 48px;
	padding: 13px 14px;
	border: 1px solid var(--border-control);
	border-radius: var(--radius-sm);
	background: var(--surface);
	font: 400 var(--fs-sm) / var(--lh-body) var(--font-body);
	color: var(--ink);
	box-shadow: none;
}
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-comment .cr-review-form-comment-txt { min-height: 120px; }
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-comment-txt:focus-visible,
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-txt:focus-visible { border-color: var(--ink); box-shadow: var(--focus-ring); outline: none; }
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-field-error { color: var(--danger); font-size: 13px; }
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-wrap .cr-review-form-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-wrap .cr-review-form-buttons .cr-review-form-submit {
	min-height: var(--tap);
	height: auto;
	padding: 14px 28px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--clay);
	color: var(--on-clay);
	font: 500 var(--fs-sm) / 1.2 var(--font-body);
	letter-spacing: .02em;
}
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-wrap .cr-review-form-buttons .cr-review-form-submit:hover { background: var(--clay-hover); }
.pdp-reviews #reviews .cr-ajax-reviews-review-form .cr-review-form-wrap .cr-review-form-buttons .cr-review-form-cancel {
	min-height: var(--tap);
	height: auto;
	padding: 14px 20px;
	border: 0;
	background: none;
	color: var(--text-muted);
	font: 500 var(--fs-sm) / 1.2 var(--font-body);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pdp-reviews #reviews #comments .cr-summaryBox-wrap .ivole-summaryBox { max-width: 560px; }
.pdp-reviews #reviews #comments .cr-ajax-reviews-list, .pdp-reviews #reviews #comments .cr-count-row { max-width: 880px; }

@media (max-width: 767px) {
	.pdp-reviews #reviews #comments .cr-summaryBox-wrap { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
	.pdp-reviews #reviews #comments .cr-summaryBox-wrap .cr-overall-rating-wrap,
	.pdp-reviews #reviews #comments .cr-summaryBox-wrap .ivole-summaryBox { width: 100%; max-width: none; }
}

/* ===================================================================
   Reviews page (/atsiliepimai/, Bricks page 10394): [cusrev_reviews_grid] of store
   reviews in the design's language. Head + stats strip are Bricks elements (.revpage__*).
   Prefixed with .revpage + the grid class (twice) to outrank the plugin stylesheet.
   =================================================================== */
.revpage__head { padding-top: 0; }
.revpage__stats { margin-top: var(--space-2); max-width: 760px; }
.revpage__stats dd { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); color: var(--ink); }

.revpage .cr-reviews-grid.cr-reviews-grid {
	margin: var(--space-12) 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-body);
	color: var(--text);
}

/* Stars: clay on a quiet base */
.revpage .cr-reviews-grid .crstar-rating-svg .cr-rating-icon-base svg { color: var(--border-control); }
.revpage .cr-reviews-grid .crstar-rating-svg .cr-rating-icon-frnt svg { color: var(--clay); }
.revpage .cr-reviews-grid .crstar-rating-svg .cr-rating-icon-frnt svg path:last-child { fill: var(--clay); }

/* Summary: average | distribution | "Pridėti įvertinimą" */
.revpage .cr-reviews-grid .cr-summaryBox-wrap.cr-summaryBox-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	align-items: center;
	margin: 0 0 var(--space-10);
	padding: var(--space-6) var(--space-5);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--sand);
}
@media (min-width: 900px) {
	.revpage .cr-reviews-grid .cr-summaryBox-wrap.cr-summaryBox-wrap { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-12); padding: var(--space-8); }
}
.revpage .cr-reviews-grid .cr-summaryBox-wrap .cr-summary-separator-side,
.revpage .cr-reviews-grid .cr-summaryBox-wrap .cr-summary-separator.cr-summary-separator { display: none; }
.revpage .cr-reviews-grid .cr-summaryBox-wrap .cr-count-filtered-reviews { grid-column: 1 / -1; }
.revpage .cr-reviews-grid .cr-summaryBox-wrap .cr-count-filtered-reviews:empty { display: none; }
.revpage .cr-reviews-grid .cr-summaryBox-wrap .cr-overall-rating-wrap,
.revpage .cr-reviews-grid .cr-summaryBox-wrap .ivole-summaryBox,
.revpage .cr-reviews-grid .cr-summaryBox-wrap .cr-add-review-wrap { width: auto; max-width: none; margin: 0; padding: 0; border: 0; background: none; }
.revpage .cr-reviews-grid .cr-summaryBox-wrap .cr-overall-rating-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.revpage .cr-reviews-grid .cr-summaryBox-wrap .cr-average-rating span {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-3xl);
	line-height: 1;
	color: var(--ink);
}
.revpage .cr-reviews-grid .cr-summaryBox-wrap .cr-total-rating-count { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.revpage .cr-reviews-grid .cr-histogramTable { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: none; }
.revpage .cr-reviews-grid .cr-histogramTable td { padding: 4px 0; border: 0; background: none; font-size: 13px; color: var(--text-muted); vertical-align: middle; }
.revpage .cr-reviews-grid .cr-histogramTable .ivole-histogramCell1 { width: 1%; padding-right: var(--space-4); white-space: nowrap; }
.revpage .cr-reviews-grid .cr-histogramTable .ivole-histogramCell3 { width: 1%; padding-left: var(--space-4); text-align: right; white-space: nowrap; }
.revpage .cr-reviews-grid .cr-histogramTable a,
.revpage .cr-reviews-grid .cr-histogramTable .cr-histogram-a { color: inherit; text-decoration: none; }
.revpage .cr-reviews-grid .ivole-meter {
	height: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--border);
	box-shadow: none;
	overflow: hidden;
}
.revpage .cr-reviews-grid .ivole-meter .ivole-meter-bar { height: 100%; font-size: 0; color: transparent; border-radius: 999px; background: var(--clay); box-shadow: none; }
.revpage .cr-reviews-grid .cr-all-reviews-add-review.cr-all-reviews-add-review,
.revpage .cr-reviews-grid .cr-show-more-button.cr-show-more-button {
	min-height: var(--tap);
	height: auto;
	padding: 12px 24px;
	border: 1px solid var(--ink);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--ink);
	font: 500 var(--fs-sm) / 1.2 var(--font-body);
	letter-spacing: .02em;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.revpage .cr-reviews-grid .cr-all-reviews-add-review.cr-all-reviews-add-review { border-color: var(--clay); background: var(--clay); color: var(--on-clay); }
.revpage .cr-reviews-grid .cr-all-reviews-add-review.cr-all-reviews-add-review:hover { border-color: var(--clay-hover); background: var(--clay-hover); }
.revpage .cr-reviews-grid .cr-show-more-button.cr-show-more-button:hover { background: var(--ink); color: var(--text-on-ink); }
.revpage .cr-reviews-grid .cr-show-more { margin-top: var(--space-8); text-align: center; }
.revpage .cr-reviews-grid .cr-count-filtered-reviews { margin: 0 0 var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); }

/* Cards (masonry columns from the plugin) */
.revpage .cr-reviews-grid .cr-reviews-grid-inner { gap: var(--grid-gap); }
.revpage .cr-reviews-grid .cr-review-card.cr-review-card {
	margin: 0 0 var(--grid-gap);
	padding: 0;
	border: 1px solid var(--border) !important; /* the plugin writes border-color inline */
	border-radius: var(--radius-md);
	background: var(--surface) !important;
	box-shadow: none;
}
.revpage .cr-reviews-grid .cr-review-card-content { padding: var(--space-5); }
.revpage .cr-reviews-grid .cr-review-card *,
.revpage .cr-reviews-grid .cr-summaryBox-wrap * { font-family: var(--font-body); } /* the plugin sets a bare sans-serif */
.revpage .cr-reviews-grid .cr-summaryBox-wrap .cr-average-rating span { font-family: var(--font-display); }
.revpage .cr-reviews-grid .cr-review-card .top-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	padding: 0 0 var(--space-4);
	border-bottom: 1px solid var(--border) !important;
}
.revpage .cr-reviews-grid .cr-review-card .review-thumbnail { position: relative; flex: none; width: 44px; height: 44px; margin: 0; }
.revpage .cr-reviews-grid .cr-review-card .cr-avatar { width: 44px; height: 44px; border-radius: 50%; filter: sepia(.25) saturate(.6); }
.revpage .cr-reviews-grid .cr-review-card .cr-avatar-check { right: -2px; bottom: -2px; background: var(--success); }
.revpage .cr-reviews-grid .cr-review-card .reviewer { min-width: 0; margin: 0; }
.revpage .cr-reviews-grid .cr-review-card .reviewer-name { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); color: var(--ink); }
.revpage .cr-reviews-grid .cr-review-card .reviewer-verified { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: var(--fs-xs); color: var(--success); }
.revpage .cr-reviews-grid .cr-review-card .reviewer-verified img { width: 14px; height: 14px; }
.revpage .cr-reviews-grid .cr-review-card .rating-row { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-3); padding: 0; }
.revpage .cr-reviews-grid .cr-review-card .rating-row .crstar-rating-svg svg { width: 16px; height: 16px; }
.revpage .cr-reviews-grid .cr-review-card .rating-label { font-size: var(--fs-xs); color: var(--text-muted); }
.revpage .cr-reviews-grid .cr-review-card .middle-row { margin: 0; padding: 0; border: 0; background: none; }
.revpage .cr-reviews-grid .cr-review-card .review-content { padding: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text); }
.revpage .cr-reviews-grid .cr-review-card .datetime { margin-top: var(--space-3); padding: 0; font-size: var(--fs-xs); color: var(--text-muted); }

/* Add-review form (opens in place of the summary) */
.revpage .cr-reviews-grid .cr-review-form-wrap {
	max-width: 720px;
	margin: 0 0 var(--space-10);
	padding: var(--space-6);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--sand);
	font-family: var(--font-body);
	color: var(--text);
}
.revpage .cr-reviews-grid .cr-review-form-nav { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.revpage .cr-reviews-grid .cr-review-form-nav .cr-nav-left span { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); color: var(--ink); }
.revpage .cr-reviews-grid .cr-review-form-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--ink); }
.revpage .cr-reviews-grid .cr-review-form-item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); background: var(--plate); }
.revpage .cr-reviews-grid .cr-review-form-rating-label,
.revpage .cr-reviews-grid .cr-review-form-lbl { font-size: 13px; font-weight: 500; color: var(--ink); }
.revpage .cr-reviews-grid .cr-review-form-rating-cont svg { color: var(--clay); }
.revpage .cr-reviews-grid .cr-review-form-comment .cr-review-form-comment-txt,
.revpage .cr-reviews-grid .cr-review-form-ne .cr-review-form-txt {
	width: 100%;
	min-height: 48px;
	padding: 13px 14px;
	border: 1px solid var(--border-control);
	border-radius: var(--radius-sm);
	background: var(--surface);
	font: 400 var(--fs-sm) / var(--lh-body) var(--font-body);
	color: var(--ink);
	box-shadow: none;
}
.revpage .cr-reviews-grid .cr-review-form-comment .cr-review-form-comment-txt { min-height: 120px; }
.revpage .cr-reviews-grid .cr-review-form-comment-txt:focus-visible,
.revpage .cr-reviews-grid .cr-review-form-txt:focus-visible { border-color: var(--ink); box-shadow: var(--focus-ring); outline: none; }
.revpage .cr-reviews-grid .cr-review-form-field-error { color: var(--danger); font-size: 13px; }
.revpage .cr-reviews-grid .cr-review-form-wrap .cr-review-form-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.revpage .cr-reviews-grid .cr-review-form-wrap .cr-review-form-buttons .cr-review-form-submit {
	min-height: var(--tap);
	height: auto;
	padding: 14px 28px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--clay);
	color: var(--on-clay);
	font: 500 var(--fs-sm) / 1.2 var(--font-body);
	letter-spacing: .02em;
}
.revpage .cr-reviews-grid .cr-review-form-wrap .cr-review-form-buttons .cr-review-form-submit:hover { background: var(--clay-hover); }
.revpage .cr-reviews-grid .cr-review-form-wrap .cr-review-form-buttons .cr-review-form-cancel {
	min-height: var(--tap);
	height: auto;
	padding: 14px 20px;
	border: 0;
	background: none;
	color: var(--text-muted);
	font: 500 var(--fs-sm) / 1.2 var(--font-body);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================
   Bricks-native components (2026-10-09): the "Produkto kortelė" component,
   product carousels (Nestable Slider / Splide), the single product buy box
   (Bricks product elements) and the mini cart (off-canvas + dynamic fragments).
   Markup comes from Bricks/WooCommerce; these rules map it onto the design.
   ============================================================ */

/* WooCommerce's screen-reader-only text (price labels, review counts). */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Product card component ---------- */
.card__media > img, .card__media > picture > img { display: block; }
/* WebP <picture> wrappers (meeiko-core performance.php) must not change layout: the <img> keeps
   sizing against the real parent. */
picture { display: contents; }
.card__price del { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); }
.card__price ins { text-decoration: none; }
.card__tag { background: var(--sand); } /* design ships it transparent; sand keeps it readable over product photos */
.card__price .woocommerce-Price-amount { white-space: nowrap; }
.card__atc { width: 100%; }
/* Size chips on variable products (meeiko-core card-variations.php). They sit right above the
   price, so they take over its push to the card bottom; above the stretched name link. */
.card__opts { position: relative; z-index: 1; margin-top: auto; padding-top: var(--space-1); }
.card__opts + .card__price { margin-top: 0; }
.card__opts-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.card__opt {
	min-width: 44px;
	min-height: 32px;
	padding: 0 10px;
	border: 1px solid var(--border-control);
	border-radius: var(--radius-sm);
	background: var(--surface);
	font: 500 var(--fs-xs) / 1 var(--font-body);
	color: var(--ink);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.card__opt:hover { border-color: var(--ink); }
.card__opt:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.card__opt[aria-pressed='true'] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--clay-tint); }
.card__opt.is-oos { color: var(--text-muted); border-style: dashed; text-decoration: line-through; text-decoration-thickness: 1px; cursor: not-allowed; }
/* WooCommerce's loop button carries .btn.btn--block (meeiko-core); the variant comes from where it sits. */
.card__quickadd .btn { background: var(--clay); color: var(--on-clay); }
.card__quickadd .btn:hover { background: var(--clay-hover); color: var(--on-clay); }
.card__mobile-add .btn { background: transparent; color: var(--ink); border-color: var(--ink); }
.card__mobile-add .btn:hover { background: var(--ink); color: var(--text-on-ink); }
.card__wish svg { width: 18px; height: 18px; }

/* Archive grid: the loop item wraps the component. */
.grid--cards > .grid__item { display: flex; min-width: 0; }
.grid--cards > .grid__item > .card { flex: 1; min-width: 0; }

/* ---------- Product carousel (.prodslider) ----------
   Bricks Nestable Slider with one looped slide. Cards per view come from the slider's
   own "Items per page" (3 / 2 / 1); the track gets right padding so the next card peeks
   in, and it bleeds to the viewport's right edge like the design's .rail--bleed. */
.prodslider {
  --bleed: calc(max(0px, (100vw - var(--scrollbar, 0px) - var(--container) - var(--gutter) * 2) / 2) + var(--gutter));
  --peek: 20%;
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
}
@media (max-width: 1023px) { .prodslider { --peek: 26%; } }
@media (max-width: 599px)  { .prodslider { --peek: 40%; } }
.prodslider .splide__track {
  width: calc(100% + var(--bleed));
  max-width: none;
  margin-right: calc(-1 * var(--bleed));
  padding-right: calc(var(--bleed) + var(--peek)) !important;
}
.prodslider .splide__slide.prodslide,
.prodslider .prodslide {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  height: auto;
}
.prodslide > .card { flex: 1; min-width: 0; }

/* Arrows: the design's .railbtn look, in a row above the track (order -1). */
.prodslider .splide__arrows {
  order: -1;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.prodslider .splide__arrow {
  position: static;
  inset: auto;
  transform: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  opacity: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.prodslider .splide__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }
.prodslider .splide__arrow:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--text-on-ink); }
.prodslider .splide__arrow:disabled { color: var(--disabled-text); border-color: var(--border); cursor: not-allowed; opacity: 1; }
.prodslider .splide__arrow:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 767px) { .prodslider .splide__arrows { display: none; } }
/* Under a section head the arrows move up into the head row, right of its link. */
@media (min-width: 768px) {
  .sechead:has(+ .prodslider) { padding-right: calc(88px + var(--space-3) * 2); }
  .sechead + .prodslider .splide__arrows { position: absolute; right: 0; bottom: calc(100% + var(--space-10)); margin: 0; }
}

/* ---------- Single product: Bricks product elements ---------- */
.pdp__gallery { min-width: 0; }
.pdp__gallery .woocommerce-product-gallery { position: relative; margin: 0; }
.pdp__gallery .woocommerce-product-gallery__wrapper { margin: 0; }
/* Gallery without FlexSlider (meeiko-core product.php, LCP): the wrapper is a grid; the
   active slide spans the row, the others stay hidden; the server-rendered thumbnail row
   (.pdp-thumbs) follows. WooCommerce's inline "opacity: 0" (it fades the gallery in on
   JS init) is overridden so the main image paints with the first frame. */
.pdp__gallery .woocommerce-product-gallery { opacity: 1 !important; transition: none !important; }
.pdp__gallery .woocommerce-product-gallery__wrapper { display: grid; grid-template-columns: minmax(0, 1fr); }
.pdp__gallery .woocommerce-product-gallery__image {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--plate);
}
.pdp__gallery .woocommerce-product-gallery__image:not(.flex-active-slide) { display: none; }
.pdp__gallery .flex-control-thumbs.pdp-thumbs { margin-top: var(--space-6); } /* FlexSlider's gap below the viewport */
.pdp__gallery .pdp-thumbs__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.pdp__gallery .woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.pdp__gallery .flex-control-thumbs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3);
  margin: var(--space-3) 0 0; padding: 0; list-style: none;
}
.pdp__gallery .flex-control-thumbs li { width: auto !important; margin: 0 !important; float: none !important; }
.pdp__gallery .flex-control-thumbs img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); opacity: 1;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.pdp__gallery .flex-control-thumbs img:hover { border-color: var(--border-control); }
.pdp__gallery .flex-control-thumbs img.flex-active { border: 2px solid var(--ink); }
.pdp__gallery .woocommerce-product-gallery__trigger {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface); color: var(--ink); text-indent: -9999px; overflow: hidden;
}
/* Bricks' WooCommerce CSS draws its own "expand arrows" icon in ::before; it sat on top of
   the design's magnifier (::after). One icon only. */
.pdp__gallery .woocommerce-product-gallery__trigger::before { content: none; display: none; }
/* Bricks also hides the button until the gallery is hovered (opacity 0): invisible on touch
   screens and to keyboard users. Always shown. */
.pdp__gallery .woocommerce-product-gallery .woocommerce-product-gallery__trigger { opacity: 1; }
.pdp__gallery .woocommerce-product-gallery__trigger::after {
  content: ''; position: absolute; inset: 11px; background: currentColor;
  -webkit-mask: var(--icon-zoom) center / contain no-repeat; mask: var(--icon-zoom) center / contain no-repeat;
}

.buybox__brand { margin: 0; }
.buybox__brand a { color: inherit; }
.buybox__brand a:hover { text-decoration: underline; }
.buybox__top .product_title { margin: 0; }
.buybox .rating .woocommerce-product-rating { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.buybox .rating .star-rating { color: var(--clay); }
.buybox .rating .woocommerce-review-link { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; font-size: var(--fs-sm); }
.pdp-price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pdp-price .price { margin: 0; }
.price del { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-md); color: var(--text-muted); margin-right: var(--space-2); }
.price ins { text-decoration: none; }
.pdp-price .badge[hidden] { display: none; }
.buybox__rule { margin-block: var(--space-2); }
.pdp-wish { margin: 0; }
.pdp-wish button { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.pdp-wish button::before {
  content: ''; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--icon-heart) center / contain no-repeat; mask: var(--icon-heart) center / contain no-repeat;
}
.pdp-wish button[aria-pressed='true']::before { -webkit-mask-image: var(--icon-heart-filled); mask-image: var(--icon-heart-filled); color: var(--clay); }
:root {
  --icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M10 16.5S3.2 12.6 3.2 8.1A3.4 3.4 0 0110 6a3.4 3.4 0 016.8 2.1c0 4.5-6.8 8.4-6.8 8.4z'/%3E%3C/svg%3E");
  --icon-heart-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M10 16.5S3.2 12.6 3.2 8.1A3.4 3.4 0 0110 6a3.4 3.4 0 016.8 2.1c0 4.5-6.8 8.4-6.8 8.4z'/%3E%3C/svg%3E");
  --icon-zoom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='9' cy='9' r='5.5'/%3E%3Cpath d='M13 13l4 4M9 6.5v5M6.5 9h5'/%3E%3C/svg%3E");
}

/* ---------- Mini cart (Bricks off-canvas #minicart) ---------- */
#minicart .brx-offcanvas-inner.minicart {
  width: min(var(--drawer-w), 100vw);
  max-width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-drawer);
}
#minicart .brx-offcanvas-backdrop { background: var(--scrim); z-index: var(--z-scrim); }
#minicart .brx-offcanvas-inner.minicart { z-index: var(--z-drawer); }
.minicart__count, .cart-count-slot { display: contents; }
.minicart__content { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; }
.minicart__content > .drawer__body { flex: 1; min-height: 0; }
.minicart__lines { list-style: none; margin: 0; padding: 0; }
.minicart .lineitem__info { min-width: 0; display: flex; flex-direction: column; }
.minicart .lineitem__name a { color: inherit; }
.minicart .lineitem__name a:hover { text-decoration: underline; }
.minicart .lineitem__meta { margin-top: var(--space-1); color: var(--text-muted); }
.minicart .lineitem__price del { font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); }
.minicart .lineitem__price ins { text-decoration: none; }
.minicart .lineitem__qty { margin-top: var(--space-3); }
/* Bricks cart quantity stepper as the design's .qty (34px in the drawer). */
.lineitem__qty .brx-number-wrap {
  display: inline-flex; align-items: center; gap: 0; width: max-content;
  border: 1px solid var(--border-control); border-radius: var(--radius-sm);
}
.lineitem__qty .brx-stepper-button {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0; margin: 0;
  border: 0; background: transparent; color: var(--ink); font-size: var(--fs-md); line-height: 1; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.lineitem__qty .brx-stepper-button:hover { background: var(--ink-a06); }
.lineitem__qty .brx-stepper-button[aria-disabled='true'] { color: var(--disabled-text); cursor: not-allowed; background: transparent; }
.lineitem__qty .brx-number-input {
  width: 34px; min-height: 32px; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: transparent; text-align: center; font-size: 13px; appearance: textfield; -moz-appearance: textfield;
}
.lineitem__qty .brx-number-input::-webkit-outer-spin-button,
.lineitem__qty .brx-number-input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.minicart .lineitem__remove { color: var(--text-muted); }
.minicart .lineitem__remove:hover { color: var(--danger); }
.minicart .lineitem__remove svg { width: 16px; height: 16px; }
.minicart .drawer__foot .btn svg { width: 14px; height: 14px; }
/* Free-shipping bar: Bricks progress bar styled as the design's 4px .progress. */
.minicart__progress { gap: 0; }
.minicart__progress .bar {
  height: 4px; border-radius: 999px; overflow: hidden; background: var(--border);
}
.minicart__progress .bar span { background: var(--clay); border-radius: 999px; }
.minicart__progress .bar span[style*="width: 100%"],
.minicart__progress .bar span[style*="width:100%"] { background: var(--success); }
.minicart__progress .label, .minicart__progress .percentage { display: none; }

/* ---------- Batch 2 (2026-10-09): heads, brand hero, term loops, wishlist ---------- */
/* Mini cart bin: Bricks' icon element puts the classes on the <svg> inside its link
   wrapper, so the 32px tap target is the wrapper and the icon stays 16px. */
.minicart .lineitem > .bricks-link-wrapper {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--text-muted); border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-standard);
}
.minicart .lineitem > .bricks-link-wrapper:hover { color: var(--danger); }
.minicart svg.lineitem__remove { width: 16px; height: 16px; display: block; color: inherit; }

/* Header wishlist link (Caiman Media Wishlist count element) with the cart badge's look. */
.wishlink svg { width: 20px; height: 20px; }
.wishlink .cmw-count {
  position: absolute; top: 4px; right: 4px;
  min-width: 18px; height: 18px; padding-inline: 4px;
  display: grid; place-items: center;
  background: var(--clay); color: var(--on-clay);
  border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1;
}
.wishlink .cmw-count--hide-empty.cmw-count--empty { display: none; }

/* Wishlist page: the empty state shows itself once the list has no cards
   (also after the last one is removed in place). */
.wishpage__empty { display: none; }
.wishgrid:not(:has(> li)) { display: none; }
.wishgrid:not(:has(> li)) ~ .wishpage__empty { display: flex; }
.wishcard { display: flex; }
.wishcard > .card { flex: 1; min-width: 0; }

/* Brand hero facts: Bricks rows are plain divs inside dl.metarow (design CSS applies). */
.metarow dd { margin: 0; }
.wishgrid:not(:has(> li)) ~ .wishpage__note { display: none; }

/* ---------- Cart page: Bricks Cart (v2) on page 7 ---------- */
.meeiko-cart { display: block; }
.cart__hook:empty { display: none; }
.cart__count .lead { margin: 0; }
.cart__shipslot, .cart__saved { display: block; }
.cart__ship { border: 1px solid var(--border); border-radius: var(--radius-md); }
.cart__form { display: block; width: 100%; }
.cartline__title { margin: 0; }
.cartline__stock { margin: 0; }
.cartline__stock:has([data-low='true']) { color: var(--clay); }
.cartline__stock [data-low='false']::before {
  content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: currentColor;
  -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
}
:root { --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2.5 6.4l2.4 2.4L9.5 3.6'/%3E%3C/svg%3E"); }
.cartline__variant { margin: 0; }
.cartline__money p { margin: 0; }
.cartline__money del, .cartline__money ins { text-decoration: none; }
.cartline__x svg { width: 18px; height: 18px; }
.cartline__link { background: none; border: 0; padding: 0; cursor: pointer; }
/* Quantity stepper at the cart page's full tap size. */
.cartline__qty .brx-stepper-button { width: var(--tap); height: 46px; }
.cartline__qty .brx-number-input { width: 44px; height: 46px; min-height: 46px; font-size: var(--fs-sm); }
/* Summary */
.cartsum__rule { margin-block: var(--space-2); }
.cartsum .totalrow { margin: 0; }
.cartsum .totalrow__label { display: flex; align-items: baseline; gap: var(--space-3); }
.cartsum .woocommerce-remove-coupon { cursor: pointer; font-size: var(--fs-xs); }
.cartsum .btn svg { width: 14px; height: 14px; }
.cartsum .paylogos { list-style: none; margin: 0; padding: 0; }
.cartsum__note { margin: 0; }
.cartsum__note svg { width: 16px; height: 16px; }
/* Bricks coupon element: input + button in one row, the button as .btn--secondary. */
.cartsum__coupon .coupon { display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--space-3); margin: 0; }
.cartsum__coupon label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cartsum__coupon .input-text { flex: 1 1 auto; min-width: 0; width: auto; }
.cartsum__coupon .button {
  flex: none; min-height: var(--tap); padding: 12px 20px; cursor: pointer;
  border: 1px solid var(--ink); border-radius: var(--radius-sm); background: transparent; color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; letter-spacing: .02em;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.cartsum__coupon .button:hover { background: var(--ink); color: var(--text-on-ink); }
/* WooCommerce appends "(įskaičiuota … PVM)" to the total; the design says "Su PVM" below. */
.cartsum .includes_tax { display: none; }
.cartsum .totalrow__code { text-transform: uppercase; letter-spacing: .02em; }
/* Saved for later: Bricks heading + [meeiko_saved_for_later]; the whole block hides when the
   list is empty (also after the last item is removed in place). */
.savedblock:not(:has(.savedlist li)) { display: none; }
.savedblock .savedlist .cartlist { margin-top: var(--space-6); }
/* Saved heart on product cards: clay, filled (beats the plugin's own [data-cmw-toggle] colour rules). */
.card .card__wish[aria-pressed='true'] { color: var(--clay); }

/* ---------- Brands index: live search field ---------- */
.brandsearch { display: grid; gap: var(--space-3); max-width: 420px; margin-bottom: var(--space-8); }
.brandsearch__form { width: 100%; display: block; }
.brandsearch__form .form-group { width: 100%; margin: 0; padding: 0; }
.brandsearch__form .submit-button-wrapper, .brandsearch__form button[type='submit'] { display: none; }
.brandsearch__form label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.brandsearch__form input[type='text'] {
  width: 100%;
  padding-left: 44px;
  border-radius: 999px;
  background: var(--surface) var(--icon-search) no-repeat 16px center / 16px 16px;
}
.brandsearch__empty { margin: 0; color: var(--text-muted); }
.brandsearch__empty[hidden], .brandgrid > li[hidden] { display: none; }
:root { --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237A6A5C' stroke-width='1.4'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E"); }

/* ---------- Product description = "Prekės aprašymas" fields (.pdp-story, bricks/shop.py) ----------
   The design's product "story" block: eyebrow, display lead, intro text | 3:2 photo,
   two list columns (fitlist), square photo pair. */
.pdp-story .story__lead { margin-top: var(--space-3); }
.story__intro { display: grid; gap: var(--space-8); margin-top: var(--space-8); align-items: start; }
@media (min-width: 900px) {
	.story__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); }
}
.story__text { max-width: var(--measure-article); }
.story__text p { color: var(--text); }
.story__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--plate); border-radius: var(--radius-md); }
.story__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story__lists { margin-top: var(--space-12); gap: var(--space-10) var(--space-12); }
.story__list h3 { color: var(--ink); }
.story__ul ul, .story__ul ol { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text); }
.story__ul li { display: block; position: relative; padding-left: 26px; } /* not the design's flex .fitlist li: bold + plain text must flow as one line */
.story__ul strong { color: var(--ink); font-weight: 500; }
.story__ul p { margin: 0; }
/* "Jei nori": check marks (the design's fitlist--yes icon) */
.story__list--check h3 { color: var(--success); }
.story__list--check li::before {
	content: ""; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; background: var(--success);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2.5 7.4l3 3L11.5 4'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2.5 7.4l3 3L11.5 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Ingredients: clay rule */
.story__list--ingr li::before { content: ""; position: absolute; left: 0; top: 11px; width: 14px; height: 1px; background: var(--clay); } /* whole px: a fractional top blurs the 1px rule */
.pdp-story .story__pair { margin-top: var(--space-12); }
.story__pair .brxe-image, .story__pair img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Home FAQ: Bricks accordion-nested with the design's .acc look ----------
   (2026-10-10, was a hand-built .acc__trigger / .acc__panel list driven by site.js) */
.faq-acc { width: 100%; }
.faq-acc__item { width: 100%; border-bottom: 1px solid var(--border); }
.faq-acc .accordion-title-wrapper {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: var(--space-4); width: 100%; padding: var(--space-5) 0;
  text-align: left; cursor: pointer; background: none;
}
.faq-acc__q {
  margin: 0; font-family: var(--font-body); font-size: var(--fs-md); font-weight: 500;
  line-height: var(--lh-h3); letter-spacing: 0; color: var(--ink);
  transition: color var(--dur-fast) var(--ease-standard);
}
.faq-acc .accordion-title-wrapper:hover .faq-acc__q { color: var(--clay-hover); }
.faq-acc__icon { flex: none; width: 18px; height: 18px; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-standard); }
.faq-acc .brx-open .faq-acc__icon { transform: rotate(180deg); }
.faq-acc .accordion-content-wrapper { width: 100%; padding: 0 0 var(--space-5); }
.faq-acc__a { margin: 0; color: var(--text-muted); max-width: var(--measure-article); }

/* ============================================================
   FiboSearch: header bar + results dropdown (design popover look).
   The bar itself is styled in overrides.css (FiboSearch in the header).
   ============================================================ */

/* FiboSearch's clearfix ::after is a flex item in the bar, so the bar's gap pushed the
   "Ieškoti" button 8px off the right edge. */
.header__search-slot .dgwt-wcas-sf-wrapp::after,
.navpanel__search .dgwt-wcas-sf-wrapp::after { content: none; display: none; }
.header__search-slot .dgwt-wcas-close { color: var(--text-muted); }

/* Dropdown: detached from the pill bar, rounded, bordered, popover shadow. */
body .dgwt-wcas-suggestions-wrapp {
  margin-top: var(--space-2);
  padding: var(--space-2) 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  /* FiboSearch caps the height inline (max-height: 600px); scroll the rest. */
  overflow: hidden auto;
  overscroll-behavior: contain;
  font-family: var(--font-body);
}
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-small);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion:hover,
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected { background: var(--sand); }

body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-si { flex: none; width: 48px; max-width: 48px; margin: 0; padding: 0; }
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-si img {
  display: block;
  width: 48px;
  height: 48px;
  max-width: none;
  padding: 0;
  object-fit: cover;
  background: var(--plate);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-content-wrapp {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0;
}
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-st { padding: 0; }
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-title { color: var(--ink); font-weight: 400; }
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion strong { color: var(--clay-hover); font-weight: 500; }

body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-meta { flex: none; text-align: right; }
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--ink);
  white-space: nowrap;
}
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp del {
  order: 2;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp ins { text-decoration: none; background: none; }

/* Group headings ("Prekių ženklai", "Kategorijos", "Prekės"). */
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline {
  padding: var(--space-3) var(--space-4) var(--space-1);
  pointer-events: none;
}
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline:hover { background: none; }
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline .dgwt-wcas-st {
  border: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Category, brand, skin-type and ingredient rows: one text line, no image. Our term rows
   carry .mk-wcas-term (meeiko-core includes/search.php), the free script gives them no
   class of their own. */
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax,
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion:has(.mk-wcas-term) { min-height: 0; padding-block: var(--space-2); }
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion:has(.mk-wcas-term) .dgwt-wcas-st { border: 0; }

/* "Žiūrėti visus rezultatus" */
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more {
  justify-content: center;
  margin-top: var(--space-2);
  padding-block: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--clay-hover);
}
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more .dgwt-wcas-st-more { padding: 0; color: inherit; }
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-nores { color: var(--text-muted); }

/* ===================================================================
   Content pages in Bricks (bricks/pages.py)
   =================================================================== */

/* Apie mus (10044): hero = the homepage hero; mission split; pillars */
.about-hero .hero__copy .lead { max-width: 40ch; }
.about-hero .hero__copy > p:not(.eyebrow):not(.lead) { max-width: 52ch; color: var(--text); }

.about-split { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
	.about-split { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; }
}
.about-split__head { display: flex; flex-direction: column; gap: var(--space-3); }
.about-split__body { display: flex; flex-direction: column; gap: var(--space-5); max-width: 640px; }
.about-split__body .metarow { margin-top: var(--space-2); }
.about-split__body .metarow dd { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); }

.pillars { display: grid; gap: var(--space-10) var(--grid-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar { display: flex; flex-direction: column; gap: var(--space-3); }
.pillar__media { aspect-ratio: 3 / 2; margin-bottom: var(--space-3); background: var(--plate); overflow: hidden; }
.pillar__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pillar__title { margin: 0; }
.pillar__text { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text); }

/* Kontaktai (3519): details | form card; requisites under the details */
.contactgrid { display: grid; gap: var(--space-10); margin-top: var(--space-10); }
.contactreq { order: 2; } /* phones: details, form, then requisites */
@media (min-width: 900px) {
	.contactgrid { grid-template-columns: 5fr 7fr; grid-template-areas: 'list form' 'req form'; gap: var(--space-10) var(--space-16); align-items: start; }
	.contactlist { grid-area: list; }
	.contactreq { grid-area: req; order: 0; }
	.contactform { grid-area: form; }
}
.contactlist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.contactlist__item { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5) 0; border-bottom: 1px solid var(--border); }
.contactlist__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sand); color: var(--clay); }
.contactlist__icon svg { width: 18px; height: 18px; }
.contactlist__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contactlist__label { font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.contactlist__value { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); line-height: 1.3; color: var(--ink); }
.contactlist__value a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-control); }
.contactlist__value a:hover { color: var(--clay-hover); border-bottom-color: var(--clay-hover); }

.contactreq__list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; font-size: var(--fs-sm); }
.contactreq__list > div { display: contents; }
.contactreq__list dt { color: var(--text-muted); }
.contactreq__list dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

.contactform { padding: var(--space-6) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--sand); }
@media (min-width: 900px) { .contactform { padding: var(--space-10); } }
.contactform h2 { margin: 0 0 var(--space-6); }
.contactform__form.brxe-form { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.contactform__form .form-group { width: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.contactform__form .form-group label { font-size: 13px; font-weight: 500; line-height: var(--lh-small); color: var(--ink); }
.contactform__form .form-group label .required { color: var(--danger); }
.contactform__form textarea { min-height: 160px; }
.contactform__form .form-group.submit-button-wrapper { width: auto; margin-top: var(--space-2); }
.contactform__form .bricks-button {
	min-height: var(--tap);
	padding: 14px 32px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--clay);
	color: var(--on-clay);
	font: 500 var(--fs-sm) / 1.2 var(--font-body);
	letter-spacing: .02em;
	cursor: pointer;
}
.contactform__form .bricks-button:hover { background: var(--clay-hover); }
.contactform__form .message { width: 100%; margin: 0; padding: var(--space-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.contactform__form .message.success { background: var(--surface); border: 1px solid var(--success); color: var(--ink); }
.contactform__form .message.error { background: var(--surface); border: 1px solid var(--danger); color: var(--danger); }

/* Regular text pages (template "Puslapis"): one readable 900px column */
.pagebody__inner { max-width: 900px; }
.pagebody__title { margin: 0 0 var(--space-8); }
.pagebody__content { font-size: var(--fs-base); line-height: var(--lh-body); }
.pagebody__content p,
.pagebody__content li { color: var(--text); }
.pagebody__content ul,
.pagebody__content ol { display: grid; gap: var(--space-2); padding-left: 1.4em; }
.pagebody__content ul { list-style: disc; }
.pagebody__content ol { list-style: decimal; }
.pagebody__content li::marker { color: var(--clay); }
.pagebody__content h2 { font-size: var(--fs-xl); }
.pagebody__content h3 { font-size: var(--fs-lg); }
.pagebody__content h4 { font-size: var(--fs-base); font-family: var(--font-body); font-weight: 600; }
.pagebody__content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pagebody__content th,
.pagebody__content td { padding: var(--space-3); border: 1px solid var(--border); text-align: left; vertical-align: top; }
.pagebody__content img { max-width: 100%; height: auto; }
/* Old GenerateBlocks wrappers carry their own page padding (32 / 112px): the section has it now */
.pagebody__content > .gb-container { padding: 0 !important; }

/* Odos testas (6959): head + facts + the RevenueHunt quiz (iframe; its inside is styled in RevenueHunt) */
.quizpage__facts { max-width: 760px; margin-top: var(--space-6); }
.quizpage__facts dd { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); }
@media (max-width: 599px) { .quizpage__facts dd { font-size: var(--fs-base); } }
.quizpage__frame { width: 100%; margin-top: var(--space-10); overflow: hidden; border-block: 1px solid var(--border); background: var(--surface); } /* full width, no side gutters (user request) */
.quizpage__embed > * { margin: 0; }
.quizpage__embed .rh-widget { height: min(100vh, 880px) !important; min-height: 640px; }
.quizpage__embed .rh-widget iframe { display: block; width: 100% !important; height: 100% !important; border: 0; } /* RevenueHunt sets an inline pixel height */
.quizpage__note { margin: var(--space-4) 0 0; color: var(--text-muted); }

/* 404 (error template) */
.error404__head { display: flex; flex-direction: column; gap: var(--space-5); max-width: 720px; }
.error404__head .display { margin: 0; }
.error404__head .lead { margin: 0; max-width: 52ch; }
.error404__search { width: 100%; max-width: 560px; }
.error404__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ===================================================================
   Blog (bricks/blog.py): post card component, /blogas/ archive, single post,
   [products] grids inside posts (rendered with the product card component)
   =================================================================== */

/* Post card ("Įrašo kortelė") */
.postcard { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.postcard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--plate); border-radius: var(--radius-md); }
.postcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-standard); }
.postcard:hover .postcard__media img { transform: scale(1.03); }
.postcard__body { display: flex; flex-direction: column; gap: var(--space-2); }
.postcard__meta { margin: 0; font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.postcard__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); line-height: 1.25; letter-spacing: -0.01em; }
.postcard__title a { color: var(--ink); text-decoration: none; }
.postcard__title a:hover { color: var(--clay-hover); }
.postcard__excerpt { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.postcard__more { align-self: flex-start; margin-top: var(--space-1); font-size: var(--fs-sm); }

/* Grids */
.postgrid { display: grid; gap: var(--space-12) var(--grid-gap); margin: var(--space-10) 0 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .postgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.postgrid__item { min-width: 0; }
.postmore .postgrid { margin-top: var(--space-8); }
/* Archive page 1: the newest post as a wide feature (first-of-type: WP Grid Builder injects a hidden div into loops) */
@media (min-width: 900px) {
	body:not(.paged) .blogarchive .postgrid > li.postgrid__item:first-of-type { grid-column: 1 / -1; }
	body:not(.paged) .blogarchive .postgrid > li.postgrid__item:first-of-type .postcard { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
	body:not(.paged) .blogarchive .postgrid > li.postgrid__item:first-of-type .postcard__title { font-size: var(--fs-2xl); }
	body:not(.paged) .blogarchive .postgrid > li.postgrid__item:first-of-type .postcard__excerpt { font-size: var(--fs-base); -webkit-line-clamp: 4; }
}

/* Single post: one centred reading column, wider photo */
.post__head, .post__content, .post__foot { max-width: 760px; margin-inline: auto; }
.post__meta { margin: 0 0 var(--space-4); font-size: 12px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.post__meta a { color: var(--clay-hover); text-decoration: none; }
.post__title { margin: 0; }
.post__media { max-width: 960px; margin: var(--space-10) auto 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--plate); border-radius: var(--radius-md); }
.post__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post__content { margin-top: var(--space-10); font-size: var(--fs-base); line-height: var(--lh-body); }
.post__content > * + * { margin-top: var(--space-5); }
.post__content p, .post__content li { color: var(--text); }
.post__content h2 { margin-top: var(--space-12); font-size: var(--fs-xl); }
.post__content h3 { margin-top: var(--space-8); font-size: var(--fs-lg); }
.post__content h2 strong, .post__content h3 strong { font-weight: inherit; color: inherit; }
.post__content ul, .post__content ol { display: grid; gap: var(--space-2); padding-left: 1.4em; }
.post__content ul { list-style: disc; }
.post__content ol { list-style: decimal; }
.post__content li::marker { color: var(--clay); }
.post__content img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.post__content figure { margin-inline: 0; }
.post__content .wp-block-buttons { display: flex; justify-content: center; }
.post__content .wp-block-button__link {
	display: inline-flex; align-items: center; min-height: var(--tap); padding: 14px 28px; border: 0;
	border-radius: var(--radius-sm) !important; background: var(--clay) !important; color: var(--on-clay) !important;
	font: 500 var(--fs-sm) / 1.2 var(--font-body); letter-spacing: .02em; text-decoration: none;
}
.post__content .wp-block-button__link:hover { background: var(--clay-hover) !important; }
.post__content .wp-block-button__link strong { font-weight: inherit; color: inherit; }
.post__foot { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border); }

/* [products] grids inside posts: the product card component */
.post__content > .woocommerce { margin-block: var(--space-10); }
.post__content .woocommerce ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.post__content .woocommerce ul.products::before, .post__content .woocommerce ul.products::after { content: none; display: none; }
.post__content .woocommerce ul.products li.product { float: none; width: auto; margin: 0; padding: 0; }
.post__content .woocommerce ul.products li.product::marker { content: none; }
@media (min-width: 700px) {
	.post__content .woocommerce ul.products.columns-3,
	.post__content .woocommerce ul.products.columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Desktop: product grids break out of the 760px text column to the photo's 960px */
@media (min-width: 1040px) {
	.post__content > .woocommerce { margin-inline: -100px; }
}
/* "mobile-scroll" (set in the posts): a swipeable row on phones */
@media (max-width: 699px) {
	.post__content .woocommerce.mobile-scroll ul.products { display: flex; gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
	.post__content .woocommerce.mobile-scroll ul.products li.product { flex: 0 0 66%; scroll-snap-align: start; }
}

/* ===================================================================
   My account (page 9, bricks/account.py): Account Page v2 element
   =================================================================== */

/* Head: no extra top padding (breadcrumb already spaces it) */
.account__head { padding-top: 0; }

/* Layout: navigation | content */
.account__page > .woocommerce { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
@media (min-width: 900px) {
	.account__page > .woocommerce { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-12); align-items: start; }
	.account__page .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--header-h-scrolled) + var(--space-6)); }
}
.account__page .woocommerce-MyAccount-navigation,
.account__page .woocommerce-MyAccount-content { float: none; width: auto; margin: 0; }
.account__page .woocommerce-MyAccount-content { min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.account__page .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty { display: none; }

/* Navigation: vertical list on desktop, swipeable pills on phones */
/* Bricks' Woo CSS gives the nav a grey panel and 60px line-height links */
.account__page.brxe-woocommerce-account-page-v2 .woocommerce-MyAccount-navigation { padding: 0; border: 0; background: none; }
.account__page.brxe-woocommerce-account-page-v2 .woocommerce-MyAccount-navigation li:not(.woocommerce-MyAccount-navigation-link--customer-logout) { margin: 0; padding: 0; border: 0; background: none; }
.account__page.brxe-woocommerce-account-page-v2 .woocommerce-MyAccount-navigation a { line-height: 1.4; }
.account__page .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.account__page .woocommerce-MyAccount-navigation a {
	display: block; padding: 11px 14px; border-radius: var(--radius-sm);
	font-size: var(--fs-sm); color: var(--text); text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.account__page .woocommerce-MyAccount-navigation a:hover { background: var(--ink-a06); color: var(--ink); }
.account__page .woocommerce-MyAccount-navigation .is-active a { background: var(--sand); color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--clay); }
.account__page .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.account__page .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--text-muted); }
@media (max-width: 899px) {
	.account__page .woocommerce-MyAccount-navigation { margin-inline: calc(var(--gutter) * -1); }
	.account__page .woocommerce-MyAccount-navigation ul { flex-direction: row; gap: var(--space-2); overflow-x: auto; padding: 0 var(--gutter) var(--space-1); scrollbar-width: none; }
	.account__page .woocommerce-MyAccount-navigation li { flex: none; }
	.account__page .woocommerce-MyAccount-navigation a { padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; }
	.account__page .woocommerce-MyAccount-navigation .is-active a { border-color: var(--ink); background: var(--ink); color: var(--text-on-ink); box-shadow: none; }
	.account__page .woocommerce-MyAccount-navigation-link--customer-logout { margin: 0; padding: 0; border: 0; }
}

/* Dashboard */
.account__hello { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xl); line-height: 1.2; color: var(--ink); }
.account__intro { margin: 0; color: var(--text-muted); }
.accounttiles { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .accounttiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.accounttile {
	display: flex; gap: var(--space-4); align-items: center; height: 100%; padding: var(--space-5);
	border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-standard);
}
.accounttile:hover { border-color: var(--ink); }
.accounttile__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sand); color: var(--clay); }
.accounttile__icon svg { width: 20px; height: 20px; }
.accounttile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.accounttile__title { font-weight: 500; }
.accounttile__line { font-size: var(--fs-xs); color: var(--text-muted); }
.account__recent { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.account__sub { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.account__sub h2 { margin: 0; }

/* Order cards */
.orderlist { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ordercard {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-5); align-items: center;
	padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
}
@media (min-width: 700px) { .ordercard { grid-template-columns: minmax(0, 1fr) auto auto; } }
.ordercard__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ordercard__no { margin: 0; font-weight: 500; color: var(--ink); }
.ordercard__meta { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.ordercard__status { justify-self: end; border: 1px solid var(--border-control); background: transparent; color: var(--ink); white-space: nowrap; }
.ordercard__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 699px) { .ordercard__actions { grid-column: 1 / -1; } .ordercard__action { flex: 1 1 auto; justify-content: center; } }
.ordercard__action { min-height: 40px; padding: 8px 16px; }
.account__pagination { display: flex; justify-content: space-between; gap: var(--space-3); }
.account__pagination .button { min-height: var(--tap); padding: 12px 20px; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 500 var(--fs-sm) / 1.2 var(--font-body); text-decoration: none; }
.account__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-8); border-radius: var(--radius-md); background: var(--sand); }
.account__empty h2, .account__empty p { margin: 0; }
.account__back { align-self: flex-start; font-size: var(--fs-sm); }

/* Addresses */
.addressgrid { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .addressgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.addresscard { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.addresscard__title { margin: 0; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.addresscard__address, .addresscard__address p { margin: 0; font-style: normal; line-height: var(--lh-body); color: var(--ink); }
.addresscard__edit { align-self: flex-start; margin-top: auto; font-size: var(--fs-sm); }

/* WooCommerce forms (edit account / edit address / login / register / lost password) */
.account__page form .form-row,
.account__page form .form-group { float: none; width: auto; }
.account__page form .form-row,
.account__page form .form-group { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.account__page form label { font-size: 13px; font-weight: 500; line-height: var(--lh-small); color: var(--ink); }
.account__page form .required { color: var(--danger); text-decoration: none; border: 0; }
.account__page form .clear { display: none; }
.account__page form .form-row input:not([type='checkbox']):not([type='radio']),
.account__page form .form-row select,
.account__page form .woocommerce-input-wrapper { width: 100%; }
.account__page form em { font-size: var(--fs-xs); font-style: normal; color: var(--text-muted); }
.account__form form, .account__form .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 600px) {
	.account__form form, .account__form .woocommerce-address-fields__field-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.account__form form > *, .account__form .woocommerce-address-fields__field-wrapper > * { grid-column: 1 / -1; }
	.account__form .form-row-first { grid-column: 1; }
	.account__form .form-row-last { grid-column: 2; }
}
.account__form form h2, .account__form form h3:not(.nsl-heading) { margin: 0; font-size: var(--fs-lg); }
.account__form fieldset { display: grid; gap: var(--space-5); margin: var(--space-2) 0 0; padding: var(--space-6) 0 0; border: 0; border-top: 1px solid var(--border); }
.account__form legend { padding: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); color: var(--ink); }
.account__form .woocommerce-address-fields > p:last-child, .account__form form > p:last-child { margin: var(--space-2) 0 0; }
.account__form .select2-container { width: 100% !important; }

/* Buttons from WooCommerce markup → the design's primary button */
.account__page .woocommerce-Button,
.account__page .woocommerce-button,
.account__page form .button {
	display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 14px 28px;
	border: 0; border-radius: var(--radius-sm); background: var(--clay); color: var(--on-clay);
	font: 500 var(--fs-sm) / 1.2 var(--font-body); letter-spacing: .02em; text-decoration: none; cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-standard);
}
.account__page .woocommerce-Button:hover, .account__page .woocommerce-button:hover, .account__page form .button:hover { background: var(--clay-hover); }

/* Password fields: WooCommerce's show/hide toggle */
.account__page .password-input { position: relative; display: block; }
.account__page .password-input input { padding-right: 48px; }
.account__page .show-password-input {
	position: absolute; top: 50%; right: 6px; width: 36px; height: 36px; transform: translateY(-50%);
	border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer;
}
.account__page .show-password-input::after {
	content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.account__page .show-password-input.display-password { color: var(--ink); }
.account__page .show-password-input:hover { color: var(--ink); }

/* Logged out: login | register cards */
.authgrid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .authgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start; } }
.authcard { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
@media (min-width: 600px) { .authcard { padding: var(--space-8); } }
.authcard--register { background: var(--sand); }
.authcard--narrow { max-width: 560px; }
.authcard h2, .authcard__lead { margin: 0; }
.authcard__lead { color: var(--text-muted); }
.authcard__form { display: flex; flex-direction: column; gap: var(--space-5); }
.authcard__form .form-group.remember label { flex-direction: row; display: flex; align-items: center; gap: var(--space-2); font-weight: 400; }
.authcard__form .form-group.remember input { width: 18px; height: 18px; min-height: 0; accent-color: var(--clay); }
.authcard__form .form-group.submit .button,
.authcard__form .woocommerce-form-register__submit { width: 100%; }
.authcard__form .lost_password { margin: 0; font-size: var(--fs-sm); }
.authcard__form .lost_password a { color: var(--text-muted); }
.authcard__form .generate-password-text, .authcard__form .woocommerce-privacy-policy-text { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-muted); }
.authcard__form .woocommerce-privacy-policy-text p { margin: 0; }
.authcard__form .woocommerce-form-row--first, .authcard__form .woocommerce-form-row--last { width: 100%; }
/* Social login (Nextend): one "Tęsti su Google" on the login card, not repeated under Register */
.authcard--register .nsl-container, .authcard--register .nsl-separator, .authcard--register [id^='nsl-custom-login-form'] { display: none !important; }
.account__page .nsl-container { margin: 0 !important; }
.account__page .nsl-container .nsl-button {
	display: flex !important; align-items: center; justify-content: center; gap: var(--space-3); min-height: var(--tap);
	border: 1px solid var(--border-control) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important;
	background: var(--surface) !important; color: var(--ink) !important; font: 500 var(--fs-sm) / 1.2 var(--font-body) !important;
}
.account__page .nsl-container .nsl-button:hover { border-color: var(--ink) !important; }
.account__page .nsl-container .nsl-button-label-container { margin: 0 !important; padding: 0 !important; }
.account__page .nsl-container .nsl-button-svg-container { padding: 0 !important; }
.account__page .nsl-separator { margin: var(--space-5) 0 0 !important; font-size: var(--fs-xs) !important; font-weight: 500 !important; letter-spacing: var(--ls-eyebrow); color: var(--text-muted) !important; }
.account__page .nsl-separator::before, .account__page .nsl-separator::after { background: var(--border) !important; }
.account__page .nsl-heading { margin: 0; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; }

/* View order (WooCommerce template) */
.account__vieworder > p:first-child { margin: 0; color: var(--text-muted); }
.account__vieworder mark { padding: 0; background: none; font-weight: 500; color: var(--ink); }
.account__vieworder h2 { margin: var(--space-8) 0 var(--space-4); font-size: var(--fs-lg); }
.account__vieworder table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.account__vieworder th, .account__vieworder td { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.account__vieworder td:last-child, .account__vieworder th:last-child { text-align: right; }
.account__vieworder thead th { font-size: 11px; font-weight: 500; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.account__vieworder tfoot th { font-weight: 400; color: var(--text-muted); }
.account__vieworder tfoot tr:last-child th, .account__vieworder tfoot tr:last-child td { border-bottom: 0; font-weight: 500; color: var(--ink); }
.account__vieworder .product-name a { color: var(--ink); }
.account__vieworder .wc-item-meta { margin: var(--space-1) 0 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--text-muted); }
.account__vieworder .wc-item-meta p { display: inline; margin: 0; }
.account__vieworder .woocommerce-customer-details .col2-set,
.account__vieworder .woocommerce-columns--addresses { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .account__vieworder .woocommerce-columns--addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.account__vieworder .woocommerce-column, .account__vieworder .col-1, .account__vieworder .col-2 { float: none; width: auto; }
.account__vieworder address { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); font-style: normal; line-height: var(--lh-body); }
.account__vieworder .order-again .button { margin-top: var(--space-4); }