/* ==========================================================================
   MotoJoy — shop.css
   The /parduotuve catalog: category rail + filter drawer (desktop) / bottom
   sheet (mobile), product grid, toolbar, load-more, and the header live-search
   dropdown. Enqueued on product archives + wherever the header search lives.

   Mobile-first, plain CSS. Every colour / spacing value references a design
   token from main.css / project-overrides.css. The cell itself is styled in
   product-cell.css and carries its own edge; this file owns only the
   catalog chrome around it and the grid that lays cells out. Transition
   durations match the rest of the site (0.2s colour, 0.3s drawer/header,
   0.4s reveal).

   Contents:
     1. Shop header
     2. Layout (sidebar + results)
     3. Toolbar (count + sort)
     4. Product grid + reveal
     5. Filter controls (category tree, chips, drawer chrome)
     6. Filter layers: mobile sheet, desktop drawer, backdrop
     7. Load more + spinner + loading state
     8. Root shop SEO content
     9. Live-search dropdown
    10. Reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shop header
   -------------------------------------------------------------------------- */
.shop {
  padding-block: var(--spacing-lg) var(--spacing-xl);
}

/* Give the catalog more room on wide viewports than the default container.
   Below 1400px this is a no-op (container just fills the width); the rail
   (300px) and 3-column grid are unchanged. */
.shop .container {
  max-width: 1400px;
}

/* Not boxed in .container: the header shares the full-bleed catalog's gutter,
   so the breadcrumb and title line up with the category rail below. */
.shop__head {
  padding-inline: var(--wp--custom--gutter);
}

/* Breadcrumb trail: small muted meta text above the title, same register as
   the product cell category label. The current page is unlinked. */
.shop__breadcrumb {
  margin-bottom: var(--spacing-sm);
}

.shop__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.shop__breadcrumb-item {
  display: inline-flex;
  align-items: center;
}

.shop__breadcrumb-item + .shop__breadcrumb-item::before {
  content: "›";
  margin-inline: var(--spacing-xs);
}

.shop__breadcrumb a {
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

.shop__breadcrumb a:hover,
.shop__breadcrumb a:focus-visible {
  color: var(--color-accent-text);
}

.shop__breadcrumb [aria-current='page'] {
  color: var(--color-text);
}

/* The page title uses the shared heading-1 step. It carried its own clamp,
   which ran smaller than every other h1 on the site and tracked nothing in the
   type scale. theme.json owns the value — §4.2. */
.shop__title {
  font-size: var(--wp--preset--font-size--heading-1);
}

.shop__kicker {
  margin: 0 0 var(--spacing-xs);
  color: var(--color-accent-text);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.shop__intro {
  margin-top: var(--spacing-sm);
  max-width: 48rem;
  color: var(--color-text-muted);
}

.shop__content {
  margin-top: var(--spacing-sm);
  max-width: 48rem;
  color: var(--color-text-muted);
}

/* main.js applies the clamp only after the shared disclosure is ready. With
   JavaScript unavailable, the full server-rendered description stays visible. */
.shop__intro.is-disclosure-ready:not(.is-expanded) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Text-link style toggle, same register as .mj-account-card__link. Starts
   [hidden]; main.js reveals it only when the clamp actually hides content. */
.shop__intro-toggle {
  margin-top: var(--spacing-xs);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-text);
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
}

.shop__intro-toggle:hover,
.shop__intro-toggle:focus-visible {
  color: var(--color-accent-text);
}

/* --------------------------------------------------------------------------
   2. Layout
   Mobile: single column (sidebar is an off-canvas drawer, section 6).
   Desktop (>=992px): fixed-width sidebar + fluid results column.
   -------------------------------------------------------------------------- */
/* The catalog band sits outside .container: design-system.md §5.2 puts the
   product grid under full alignment, and §5.3 wants one continuous rule system
   rather than a boxed set of cards. Cells bleed to the viewport; text inside
   the band still gets the gutter (see the toolbar and chips below).

   --wp--custom--gutter is consumed directly because the alias layer in main.css
   has no equivalent and CLAUDE.md §6 says new CSS reads the generated variable. */
.shop__catalog {
  margin-top: var(--spacing-lg);
}

.shop__layout {
  position: relative;
}

@media (min-width: 992px) {
  /* No gap and no divider: the result cells' own edges set them off from
     the rail. */
  .shop__layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
    align-items: start;
  }

  .shop__layout--wide {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   3. Toolbar
   -------------------------------------------------------------------------- */
.shop__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-block: var(--spacing-md);
}

/* Text and controls inside the full-bleed band keep the gutter; only cells
   reach the viewport edge. On desktop the leading side sits against the rail
   instead, so it needs the smaller inset. */
.shop__toolbar,
.shop__active-filters,
.shop__empty,
.shop__loadmore-wrap {
  padding-inline: var(--wp--custom--gutter);
}

@media (min-width: 992px) {
  .shop__toolbar,
  .shop__active-filters,
  .shop__empty,
  .shop__loadmore-wrap {
    padding-inline: var(--spacing-md) var(--wp--custom--gutter);
  }
}

.shop__count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.shop__sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.shop__sort-label {
  color: var(--color-text-muted);
  font-size: var(--wp--preset--font-size--sm);
}

/* Native select, flat: no box, just the value and a caret beside its label.

   The caret is a mask on the wrapper, painted with background-color, so it
   reads the token like everything else. It used to be a data-URI background
   with the stroke written out as #949494 and a comment asking future editors
   to keep it in sync with --color-text-muted by hand. That token is now
   #5C534C and the caret had silently drifted — a colour that cannot desync is
   worth more than the comment. */
.shop__sort-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--wp--custom--touch-min);
  padding: 0 var(--spacing-lg) 0 0;
  color: var(--color-text);
  background-color: transparent;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  line-height: 1.2;
  border: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.shop__sort::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(50% - 0.4375rem);
  width: 0.875rem;
  height: 0.875rem;
  background-color: var(--color-text-muted);
  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='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    center / contain no-repeat;
  -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='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    center / contain no-repeat;
  pointer-events: none;
}

.shop__sort-select:hover {
  color: var(--color-accent-text);
}

.shop__sort-select:focus-visible {
  outline: var(--wp--custom--focus-ring-width) solid var(--wp--preset--color--focus);
  outline-offset: var(--wp--custom--focus-ring-offset);
}

.shop__active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  /* Sits directly under the toolbar's rule now, so it needs its own leading. */
  padding-block-start: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.shop__active-filters[hidden] {
  display: none;
}

.shop__filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/* Brand-tinted, per §8.5. §3.3 reserves brand for exactly this — active filter
   chips — so an applied filter is marked rather than rendered as one more
   neutral control. brand-tint against ink measures 15.68:1 (§3.2). */
.shop__filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: var(--wp--custom--touch-min);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text);
  background-color: var(--color-brand-tint);
  border: 1px solid var(--wp--preset--color--brand);
  border-radius: var(--radius-md);
}

.shop__filter-chip:hover,
.shop__filter-chip:focus-visible {
  border-color: var(--wp--preset--color--brand-hover);
}

.shop__filter-clear {
  min-height: 44px;
  padding: var(--spacing-xs);
  color: var(--color-accent-text);
  font-size: 0.875rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Product grid + reveal
   2 columns on mobile, 3 from 992px (sidebar present). The card visuals come
   from woocommerce.css; here we only place items in the grid.
   AJAX-inserted items animate in via the .is-enter / .is-enter-active classes
   (added by shop-filters.js). Server-rendered items show immediately so
   content is never hidden without JS.
   -------------------------------------------------------------------------- */
/* Detached cells on a gap; product-cell.css owns their edge — §5.3. Column
   progression is 2 / 3 / 4 / 5; the archive holds 3 until 1400px
   because a 300px category rail eats the width a fourth track would need. */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Two columns on a phone can't spare the full gap. */
  gap: var(--wp--preset--spacing--3);
  margin: 0;
  padding: 0;
  transition: opacity 0.25s ease;
}

@media (min-width: 600px) {
  .shop-grid {
    gap: var(--wp--preset--spacing--4);
  }
}

.shop-grid__item {
  display: flex;
}

.shop-grid__item > .mj-product-cell {
  width: 100%;
}

/* Enter animation for freshly inserted cells. Opacity only: a cell that slides
   in breaks the shared-border table it belongs to, and §7 wants reduced motion
   to land on opacity-or-nothing anyway. */
.shop-grid__item.is-enter {
  opacity: 0;
}

.shop-grid__item.is-enter-active {
  opacity: 1;
  transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .shop-grid__item.is-enter-active {
    transition: none;
  }
}

/* Now a text line plus a control that drops the filter responsible — §8.5. */
.shop__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  margin: var(--spacing-xl) 0;
  color: var(--color-text-muted);
  text-align: center;
}

/* display:flex above outranks the UA's [hidden] rule, so state it explicitly —
   the same trap the low-stock badge hits on the product page. */
.shop__empty[hidden] {
  display: none;
}

.shop__empty-text {
  max-width: var(--wp--custom--measure-lead);
}

@media (min-width: 992px) {
  .shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* The sale archive has no category rail, so use the extra width for a
     fourth track instead of stretching three portrait cards. */
  .shop--sale .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* No rail to pay for, so the sale archive reaches the top tier a step early. */
  .shop--sale .shop-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1800px) {
  .shop-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   5. Filter controls
   -------------------------------------------------------------------------- */
.shop-filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Mobile sheet only: holds "Išvalyti" (the sheet head carries the title). */
.shop-filters__head {
  display: flex;
  justify-content: flex-end;
}

.shop-filters__clear {
  padding: 0;
  color: var(--color-accent-text);
  font-size: 0.875rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.shop-filters__clear:hover,
.shop-filters__clear:focus-visible {
  color: var(--color-accent-text);
}

.shop-filters__clear.is-hidden {
  display: none;
}

/* No panel behind the groups: the rail sits unframed beside the results,
   so a group is only divided from the next by a soft rule. The containers
   (rail, drawer body, sheet) own the inline padding. */
.shop-filter {
  margin: 0;
  padding: 0 0 var(--spacing-md);
  border: 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.shop-filter + .shop-filter,
.shop-filters__attrs + .shop-filter,
.shop-filters__attrs .shop-filter + .shop-filter {
  padding-top: var(--spacing-md);
}

.shop-filter:last-of-type {
  border-bottom: 0;
}

/* The AJAX-swapped attribute region ([data-shop-attrs]) wraps its fieldsets in
   a div, so they get their own :last-of-type context — keep the standard block
   separator there (the on-sale toggle still follows this wrapper). */
.shop-filters__attrs .shop-filter:last-of-type {
  border-bottom: 1px solid var(--color-border-soft);
}

/* Hint shown in place of the attribute groups until a category is picked
   (see template-parts/shop/filters-attributes.php). */
.shop-filter__hint {
  margin: 0;
  padding: 0 0 var(--spacing-md);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-soft);
}

.shop-filter__legend {
  margin-bottom: var(--spacing-sm);
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.shop-filter__options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Whole row is the target; it highlights on hover (not just the box). */
.shop-filter__option {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 calc(var(--spacing-xs) * -1);
  padding: var(--spacing-xs);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-muted);
  transition:
    background-color 0.15s ease,
    color 0.2s ease;
}

.shop-filter__option:hover {
  color: var(--color-text);
  background-color: rgba(255, 255, 255, 0.035);
}

.shop-filter__option.is-disabled,
.shop-filter__option:has(input:disabled) {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}

.shop-filter__option.is-disabled:hover,
.shop-filter__option:has(input:disabled):hover {
  background-color: transparent;
}

.shop-filter__option--child {
  font-size: 0.9375rem;
}

/* Category tree. A parent row is its checkbox label plus a separate expand
   button — the button is never inside the label, so the two controls don't
   nest. Branches start closed; the template opens one holding a selection. */
.shop-cats,
.shop-cats__children {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-cats__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.shop-cats__row > .shop-filter__option {
  flex: 1 1 auto;
  min-width: 0;
  margin-inline-end: 0;
}

.shop-cats__toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  transition:
    color 0.2s ease,
    background-color 0.15s ease;
}

.shop-cats__toggle:hover {
  color: var(--color-text);
  background-color: rgba(255, 255, 255, 0.035);
}

.shop-cats__toggle svg {
  transition: transform 0.2s ease;
}

.shop-cats__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Children hang off a rule aligned under the parent's checkbox. */
.shop-cats__children {
  margin-block: 2px var(--spacing-xs);
  margin-inline-start: 9px;
  padding-inline-start: var(--spacing-sm);
  border-inline-start: 1px solid var(--color-border-soft);
}

.shop-cats__children[hidden] {
  display: none;
}

.shop-cats__back {
  display: inline-flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.shop-cats__back:hover,
.shop-cats__back:focus-visible {
  color: var(--color-text);
}

/* Custom checkbox: the real <input>, restyled via appearance:none so it stays
   keyboard-operable and announced as a checkbox. Checkmark is a rotated border
   on ::before that scales in. */
.shop-filter__checkbox {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  background-color: var(--color-bg-card);
  border: 1.5px solid var(--color-control-border);
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.shop-filter__checkbox::before {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -1px;
  border: solid var(--wp--preset--color--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.18s ease;
}

.shop-filter__checkbox:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.shop-filter__checkbox:checked::before {
  transform: rotate(45deg) scale(1);
}

.shop-filter__checkbox:focus-visible {
  outline: none;
  border-color: var(--color-accent);
}

.shop-filter__name {
  flex: 1 1 auto;
  font-size: 0.875rem;
}

.shop-filter__option:has(.shop-filter__checkbox:checked) .shop-filter__name {
  color: var(--color-text);
  font-weight: 500;
}

/* Count: a small pill. */
.shop-filter__count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 2px 8px;
  font-size: 0.75rem;
  text-align: center;
  color: var(--color-text-muted);
  background-color: var(--color-bg-card);
  border-radius: 0;
}

/* Price range: two inputs with an inset € + an icon apply button. */
.shop-filter__price {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.shop-filter__price-field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.shop-filter__price-input {
  width: 100%;
  padding: 11px 24px 11px 12px;
  color: var(--color-text);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  /* Drop the native number spinner. */
  appearance: textfield;
  -moz-appearance: textfield;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.shop-filter__price-input::-webkit-outer-spin-button,
.shop-filter__price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shop-filter__price-input:focus,
.shop-filter__price-input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
}

.shop-filter__price-eur {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  pointer-events: none;
}

.shop-filter__price-sep {
  flex: 0 0 auto;
  width: 10px;
  height: 1px;
  background-color: var(--color-border);
}

/* Compact icon button (not a WC .button, so no cascade conflict). */
.shop-filter__price-apply {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--wp--preset--color--text-on-dark);
  background-color: var(--color-accent);
  border-radius: var(--radius-md);
  transition:
    background-color 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
}

.shop-filter__price-apply:hover,
.shop-filter__price-apply:focus-visible {
  background-color: var(--color-accent-hover);
}

.shop-filter__price-apply:active {
  transform: scale(0.93);
}

/* "Tik su nuolaida": name on the left, toggle switch on the right. */
.shop-filter__option--switch {
  justify-content: space-between;
  color: var(--color-text);
  font-weight: 500;
}

/* Toggle switch — a real role="switch" checkbox, restyled. The native checked
   state maps to the switch for assistive tech, so no JS sync is needed. */
.shop-filter__switch {
  flex: 0 0 auto;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  margin: 0;
  background-color: var(--color-bg-card);
  border: 1.5px solid var(--color-control-border);
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.shop-filter__switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 0;
  background-color: var(--color-text-muted);
  transition:
    transform 0.22s ease,
    background-color 0.2s ease;
}

.shop-filter__switch:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.shop-filter__switch:checked::before {
  transform: translateX(16px);
  background-color: var(--wp--preset--color--bg);
}

.shop-filter__switch:focus-visible {
  outline: none;
}

/* Attribute values as chips — the product page's swatch language (single-
   product.css .ws-swatch) at the compact control size. The checkbox stays
   the real control, stretched invisibly over the chip. */
.shop-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.shop-filter__option--chip {
  position: relative;
  justify-content: center;
  min-width: 44px;
  min-height: 36px;
  margin: 0;
  padding: 6px 12px;
  color: var(--color-text);
  background-color: var(--color-bg-card);
  border: 1.5px solid var(--color-control-border);
  border-radius: 0;
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}

.shop-filter__option--chip:hover {
  background-color: var(--color-bg-surface);
}

.shop-filter__option--chip .shop-filter__name {
  flex: 0 0 auto;
}

.shop-filter__chip-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Selected: ink edge + weight, never colour alone — §6.5, §3.4. */
.shop-filter__option--chip:has(.shop-filter__chip-input:checked) {
  box-shadow: var(--shadow-edge);
}

.shop-filter__option--chip:has(.shop-filter__chip-input:checked) .shop-filter__name {
  font-weight: 700;
}

.shop-filter__option--chip:has(.shop-filter__chip-input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* No stock for the current selection: dashed like a sold-out swatch. */
.shop-filter__option--chip.is-disabled {
  border-style: dashed;
}

.shop-filter__chip-input:disabled {
  cursor: not-allowed;
}

.shop-filter--chips:not(.is-expanded) .is-overflow {
  display: none;
}

.shop-filter__more {
  margin-top: var(--spacing-sm);
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Applied-filter count on the "Filtrai" / "Filtruoti" buttons. */
.shop-filters__badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--text-on-dark);
  background-color: var(--color-accent);
  border-radius: 0;
}

.shop-filters__badge[hidden] {
  display: none;
}

/* (0,3,0) to beat WooCommerce's `.woocommerce button.button` (0,2,1), which
   otherwise keeps the toggle inline-flex with zero margin. */
.shop__layout .shop__filter-toggle.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

/* Drawer chrome — shown only while the drawer floats (desktop, section 6). */
.shop-filters__drawer-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.shop-filters__drawer-title {
  margin: 0 auto 0 0;
  font-size: 1.1rem;
}

.shop-filters__drawer-foot {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.shop-filters__drawer-foot .shop__sheet-results {
  width: 100%;
  min-height: 48px;
}

/* --------------------------------------------------------------------------
   6. Filter layers: mobile sheet, desktop drawer, backdrop
   Below 992px the whole sidebar is a bottom sheet and the drawer's own
   chrome disappears. From 992px the sidebar is a static rail holding the
   category tree, and only the drawer half floats in from the right.
   -------------------------------------------------------------------------- */
/* The catalog runs full-bleed, so the toggle takes the gutter itself. A
   <button> shrinks to its content even as a block-level box, hence the width. */
.shop__layout .shop__filter-toggle.button {
  width: calc(100% - 2 * var(--wp--custom--gutter));
  margin: 0 var(--wp--custom--gutter) var(--spacing-lg);
}

.shop__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.shop__drawer-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.shop__drawer-close {
  width: 44px;
  height: 44px;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.shop__sheet-footer {
  display: none;
}

.shop__drawer-close:hover,
.shop__drawer-close:focus-visible {
  color: var(--color-accent-text);
}

.shop__backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.is-shop-filter-open {
  overflow: hidden;
}

/* Locking the scroll drops the scrollbar; reserving its gutter stops the
   page shifting sideways under the backdrop. */
html:has(> body.is-shop-filter-open) {
  scrollbar-gutter: stable;
}

@media (max-width: 991px) {
  /* !important for the same WC `.woocommerce button.button` reason as the
     desktop block below. */
  .shop-filters__more,
  .shop-filters__drawer-head,
  .shop-filters__drawer-foot {
    display: none !important;
  }

  /* Bottom sheet: only its content scrolls; heading and CTA stay visible. */
  .shop__sidebar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 310;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(85dvh, 760px);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-bottom: 0;
    border-radius: 0;
    transform: translateY(100%);
    transition: transform 0.24s ease-out;
    overflow: hidden;
  }

  .shop__sidebar-inner {
    min-height: 0;
    overflow-y: auto;
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  }

  .shop__drawer-head {
    position: sticky;
    top: calc(var(--spacing-md) * -1);
    z-index: 1;
    margin: calc(var(--spacing-md) * -1) calc(var(--spacing-lg) * -1) var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border-soft);
  }

  .shop-filter__option {
    min-height: 44px;
  }

  .shop__sheet-footer {
    display: block;
    flex: 0 0 auto;
    padding: var(--spacing-md) var(--spacing-lg) calc(var(--spacing-md) + env(safe-area-inset-bottom));
    background-color: var(--color-bg-surface);
    border-top: 1px solid var(--color-border);
  }

  .shop__sheet-results {
    width: 100%;
    min-height: 48px;
  }

  .shop__layout.is-filter-open .shop__sidebar {
    transform: translateX(0);
  }

  .shop__layout.is-filter-open .shop__backdrop {
    opacity: 1;
  }
}

/* Desktop: static sticky rail, hide the drawer-only chrome. */
@media (min-width: 992px) {
  /* !important so WC core's `.woocommerce button.button` (0,2,1) can't keep the
     mobile-only filter toggle visible on desktop — a visible toggle steals the
     first grid cell and collapses the sidebar/grid two-column layout. */
  .shop__filter-toggle,
  .shop__drawer-head,
  .shop__sheet-footer,
  .shop-filters__head {
    display: none !important;
  }

  .shop-filters__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
  }

  /* The drawer is a descendant of the sticky rail but positions against the
     viewport. The rail is a stacking context, so it is the rail that has to
     rise above the backdrop (300) while the drawer is open. */
  .shop__layout.is-drawer-open .shop__sidebar {
    z-index: 310;
  }

  /* Raising the rail lifts the tree and button above the backdrop too.
     brightness(0.4) is the backdrop's 60% black applied to them alone, and
     it leaves the rail's transparent area — and so no box edge — untouched. */
  .shop__layout.is-drawer-open .shop-filters > :not(.shop-filters__drawer) {
    filter: brightness(0.4);
  }

  .shop__layout.is-drawer-open .shop__backdrop {
    opacity: 1;
  }

  .shop-filters__drawer {
    position: fixed;
    /* Below the admin bar, which otherwise hides the drawer heading. */
    inset-block: var(--wp-admin--admin-bar--height, 0px) 0;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    width: min(400px, 100vw);
    background-color: var(--color-bg-surface);
    box-shadow: var(--shadow-hard-right);
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.2s ease-out,
      visibility 0s linear 0.2s;
  }

  .shop__layout.is-drawer-open .shop-filters__drawer {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease-out;
  }

  .shop-filters__drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .shop__sidebar {
    position: sticky;
    /* Clear the sticky header so the panel top isn't hidden behind it on
       scroll. The admin-bar term is for logged-in editors: the header sits
       32px (46px under 782px) lower when `.admin-bar` is present. WordPress
       publishes --wp-admin--admin-bar--height on :root only when the bar is
       rendered, so the 0px fallback covers visitors exactly. Same offset as
       the checkout summary (checkout.css §2). */
    top: calc(
      var(--wp-admin--admin-bar--height, 0px) +
      var(--header-height) +
      var(--spacing-md)
    );
    /* No rule of its own — §8.5. The leading gutter keeps the rail's text
       off the viewport edge now that the band is full-bleed. */
    padding-block: var(--spacing-md);
    padding-inline-start: var(--wp--custom--gutter);
    padding-inline-end: var(--spacing-md);
    /* An open branch can outgrow a short viewport; the rail scrolls itself
       rather than hiding its end below the fold. */
    max-height: calc(
      100dvh - var(--wp-admin--admin-bar--height, 0px) - var(--header-height) - var(--spacing-md)
    );
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* --------------------------------------------------------------------------
   7. Load more + spinner + loading state
   -------------------------------------------------------------------------- */
.shop__loadmore-wrap {
  margin-top: var(--spacing-xl);
  text-align: center;
}

.shop__loadmore {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

/* Primary-button treatment: accent glow + slight lift on hover (WC core sets
   the accent fill; these add the glow/lift it doesn't). */
.shop__loadmore:hover,
.shop__loadmore:focus-visible {
  transform: translateY(-1px);
}

.shop__loadmore:active {
  transform: scale(0.98);
}

/* `hidden` must always hide, even though these buttons carry WooCommerce's
   `.button` class — WC core's `.woocommerce button.button` rule (specificity
   0,2,1) otherwise out-ranks the attribute selector and forces them visible. */
.shop__loadmore[hidden] {
  display: none !important;
}

/* Shared spinner ring (load-more button + grid loading overlay). */
.shop__spinner {
  display: none;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--wp--preset--color--text-on-dark);
  border-radius: 50%;
  animation: ws-spin 0.7s linear infinite;
}

.shop__loadmore.is-loading .shop__spinner {
  display: inline-block;
}

@keyframes ws-spin {
  to {
    transform: rotate(360deg);
  }
}

/* While a filter/sort request is in flight, dim the grid and show a centered
   accent spinner over the results column. */
.shop__main {
  position: relative;
}

/* Skeleton cells while a filter request is in flight — §8.5 asks for reserved
   height and skeletons in `surface`, not a dimmed grid.

   The outgoing cells stay in the DOM until the response replaces them, so
   hiding their contents rather than the cells themselves reserves the exact
   height the grid already had. That is what removes the layout jump, and it
   needs no JavaScript: shop-filters.js already toggles .is-loading here.

   visibility rather than opacity, so nothing shows through at 40% and reads as
   stale data the shopper might try to click. */
.shop-grid.is-loading {
  pointer-events: none;
}

.shop-grid.is-loading .mj-product-cell {
  background-color: var(--color-bg-surface);
}

.shop-grid.is-loading .mj-product-cell > * {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   8. Root shop SEO content
   -------------------------------------------------------------------------- */
.shop-seo {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
}

.shop-seo__inner {
  max-width: 48rem;
  margin-inline: auto;
}

.shop-seo__title {
  margin: 0 0 var(--spacing-md);
  font-size: clamp(1.5rem, 4vw, 2.125rem);
}

.shop-seo__intro,
.shop-seo__details {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.shop-seo__intro p,
.shop-seo__details p {
  margin: 0 0 var(--spacing-md);
}

.shop-seo__intro p:last-child,
.shop-seo__details p:last-of-type {
  margin-bottom: 0;
}

.shop-seo__details h3 {
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  color: var(--color-text);
  font-size: 1.25rem;
}

.shop-seo__details a:not(.button) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.shop-seo__cta {
  margin-top: var(--spacing-lg);
}

.shop-seo__toggle {
  margin-top: var(--spacing-md);
}

/* The FAQ block's title is a page-section heading; here it sits under the
   SEO heading, so it takes that heading's size and case instead. */
.shop-seo__faq {
  margin-top: var(--spacing-xl);
}

.shop-seo__faq .mj-faq__title {
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 767px) {
  .shop-seo {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
  }
}

/* --------------------------------------------------------------------------
   9. Header live-search dropdown
   searchform.php owns the semantic form and main.css owns the shared control.
   This section owns the WooCommerce typeahead result states.
   -------------------------------------------------------------------------- */
.live-search {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 250;
  margin-top: 1px;
  background-color: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 0;
  box-shadow: var(--wp--preset--shadow--hard);
  overflow: hidden;
}

.live-search[hidden] {
  display: none;
}

/* The one-row desktop header can leave the field narrow; results keep a
   readable width and grow leftwards from the field's right edge. */
@media (min-width: 1280px) {
  .live-search {
    left: auto;
    width: max(100%, var(--wp--custom--header-search-max-w));
  }
}

.live-search__results {
  margin: 0;
  padding: 0;
  max-height: min(60vh, 26rem);
  overflow-y: auto;
}

.live-search__item {
  border-bottom: 1px solid var(--wp--preset--color--rule);
}

.live-search__item:last-child {
  border-bottom: 0;
}

.live-search__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--wp--preset--color--ink);
  transition: background-color var(--wp--custom--duration-fast) ease;
}

/* Hover + keyboard-active (aria-selected) share the same highlight. */
.live-search__link:hover,
.live-search__item.is-active .live-search__link {
  background-color: var(--wp--preset--color--surface);
}

.live-search__thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
}

.live-search__thumb img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 0;
}

.live-search__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.live-search__name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-search__price {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
}

.live-search__price del {
  margin-right: var(--spacing-xs);
}

.live-search__price ins {
  text-decoration: none;
}

.live-search__empty {
  margin: 0;
  padding: var(--spacing-md);
  color: var(--wp--preset--color--text-muted);
}

.live-search__empty[hidden],
.live-search__all[hidden],
.live-search__note[hidden] {
  display: none;
}

/* Names the phrase the products are shown for when a typo or ending was
   corrected, so the swap is never silent. */
.live-search__note {
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--sm);
  border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* Category rows have no thumbnail; the touch-min height keeps them level with
   a product row's 44px image. */
.live-search__item--category .live-search__link {
  min-height: var(--wp--custom--touch-min);
}

.live-search__empty-hint {
  display: block;
  font-size: var(--wp--preset--font-size--sm);
}

.live-search__all {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--wp--preset--color--brand-deep);
  font-weight: 600;
  text-align: center;
  background-color: var(--wp--preset--color--surface);
  border-top: 1px solid var(--wp--preset--color--rule);
  transition: color var(--wp--custom--duration-fast) ease;
}

.live-search__all:hover,
.live-search__all:focus-visible {
  color: var(--wp--preset--color--brand-hover);
}

/* --------------------------------------------------------------------------
   10. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .shop-grid,
  .shop__sidebar,
  .shop__backdrop,
  .shop-grid__item.is-enter-active,
  .shop-filter__option,
  .shop-filter__checkbox,
  .shop-filter__checkbox::before,
  .shop-filter__switch,
  .shop-filter__switch::before,
  .shop-filter__option--chip,
  .shop-cats__toggle,
  .shop-cats__toggle svg,
  .shop-filters__drawer,
  .shop__layout.is-drawer-open .shop-filters__drawer,
  .shop-filter__price-input,
  .shop-filter__price-apply,
  .shop__sort-select,
  .shop__intro-toggle,
  .shop__loadmore {
    transition: none;
  }

  .shop-grid__item.is-enter {
    opacity: 1;
    transform: none;
  }

  /* No decorative lift/scale on hover or press (checkbox/switch state still
     shows — just without easing). */
  .shop__loadmore:hover,
  .shop__loadmore:focus-visible,
  .shop__loadmore:active,
  .shop-filter__price-apply:active {
    transform: none;
  }

  .shop__spinner,
  .shop__main.is-loading::after {
    animation-duration: 1.4s;
  }
}