/* ==========================================================================
   Estel Editorial — design tokens & base styles
   Palette and type sourced from estel.pro's visual language.
   ========================================================================== */

:root {
  /* Brand */
  --color-brand: #106cb8;
  --color-brand-hover: #075da5;
  --color-brand-tint: #c4e3fe;

  /* Ink / neutrals */
  --color-ink: #070606;
  --color-ink-soft: #4e4e4e;
  --color-muted: #9a9393;
  --color-border: #e6e6e6;
  --color-bg: #ffffff;
  --color-bg-soft: #f8f8f8;
  --color-bg-softer: #f1f1f1;

  /* Accent (used sparingly — badges, sale prices) */
  --color-accent: #cb1906;

  /* Type */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-serif: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Layout */
  --container-max: 1320px;
  --container-pad: 24px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  --radius: 2px;
  --transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
p { margin: 0 0 1em; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }

.estel-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ---------- Typography ---------- */
.estel-eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.estel-display {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---------- Buttons ---------- */
.estel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-bg);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.estel-btn:hover { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.estel-btn--outline { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.estel-btn--outline:hover { background: var(--color-ink); color: var(--color-bg); }

/* ==========================================================================
   Header
   ========================================================================== */
.estel-topbar {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-soft);
}
.estel-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  height: 40px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
}
.estel-topbar__inner a { display: inline-flex; align-items: center; gap: 6px; transition: color var(--transition); }
.estel-topbar__inner a:hover { color: var(--color-brand); }
.estel-topbar__inner svg { width: 14px; height: 14px; }

.estel-header {
  padding: var(--space-3) 0;
  background: var(--color-bg);
}
.estel-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.estel-header__logo img,
.estel-header__logo svg { height: 40px; width: auto; }
.estel-header__logo { font-family: var(--font-serif); font-size: 24px; font-weight: 700; letter-spacing: 0.06em; }

.estel-nav { display: flex; align-items: center; gap: var(--space-4); }
.estel-nav__list { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.estel-nav__list li { position: relative; }
.estel-nav__list > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.estel-nav__list > li > a:hover,
.estel-nav__list .current-menu-item > a {
  color: var(--color-brand);
  border-color: var(--color-brand);
}
/* Caret for items with a dropdown */
.estel-nav__list li.menu-item-has-children > a::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: 0.6;
}

/* Dropdown submenu */
.estel-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  margin: 0;
  padding: 10px 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: 0 16px 32px rgba(7, 6, 6, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.estel-nav__list li.menu-item-has-children:hover > .sub-menu,
.estel-nav__list li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.estel-nav__list .sub-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  border-bottom: none;
  transition: color var(--transition), background var(--transition);
}
.estel-nav__list .sub-menu a:hover {
  color: var(--color-brand);
  background: var(--color-bg-soft);
}

.estel-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.estel-header__actions a { display: inline-flex; }
.estel-header__actions svg { width: 20px; height: 20px; }
.estel-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-left: -8px;
  margin-top: -10px;
}

/* ---------- Header search ---------- */
.estel-search { position: relative; display: flex; align-items: center; }
.estel-search__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  transition: color var(--transition);
}
.estel-search__toggle:hover,
.estel-search.is-open .estel-search__toggle { color: var(--color-brand); }
.estel-search__toggle svg { width: 20px; height: 20px; }

.estel-search__panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 60;
  width: min(440px, calc(100vw - 2 * var(--container-pad)));
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: 0 16px 32px rgba(7, 6, 6, 0.12);
}
.estel-search__panel[hidden] { display: none; }

.estel-search__form { display: flex; align-items: center; }
.estel-search__field {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 var(--space-2);
  border: none;
  background: transparent;
  color: var(--color-ink);
  font-size: 15px;
}
.estel-search__field:focus { outline: none; }
.estel-search__field::-webkit-search-cancel-button { -webkit-appearance: none; }
.estel-search__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: none;
  border-left: 1px solid var(--color-border);
  color: var(--color-ink-soft);
  transition: color var(--transition), background var(--transition);
}
.estel-search__submit:hover { color: #fff; background: var(--color-brand); }
.estel-search__submit svg { width: 18px; height: 18px; }

.estel-search__results {
  max-height: min(420px, 60vh);
  overflow-y: auto;
  border-top: 1px solid var(--color-border);
}
.estel-search__results[hidden] { display: none; }
.estel-search__list { margin: 0; padding: 0; list-style: none; }
.estel-search__item + .estel-search__item { border-top: 1px solid var(--color-border); }

.estel-search__hit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-2);
  transition: background var(--transition);
}
.estel-search__hit:hover,
.estel-search__hit.is-active { background: var(--color-bg-soft); }
.estel-search__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: var(--color-bg-softer);
}
.estel-search__meta { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.estel-search__name {
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.estel-search__hit:hover .estel-search__name,
.estel-search__hit.is-active .estel-search__name { color: var(--color-brand); }
.estel-search__price { font-size: 13px; font-weight: 600; color: var(--color-ink-soft); }

/* Loading state: placeholder rows matching the hit layout, pulsing in sequence. */
.estel-search__hit--skeleton { cursor: default; pointer-events: none; }
.estel-search__skeleton-box,
.estel-search__skeleton-line {
  display: block;
  background: var(--color-bg-softer);
  border-radius: var(--radius);
}
.estel-search__skeleton-line { width: 100%; height: 12px; }
.estel-search__skeleton-line--short { width: 42%; }

.estel-search__item--skeleton { animation: estel-search-pulse 1300ms ease-in-out infinite; }
.estel-search__item--skeleton:nth-child(2) { animation-delay: 160ms; }
.estel-search__item--skeleton:nth-child(3) { animation-delay: 320ms; }

@keyframes estel-search-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .estel-search__item--skeleton { animation: none; opacity: 0.7; }
}

.estel-search__empty {
  margin: 0;
  padding: var(--space-2);
  font-size: 14px;
  color: var(--color-muted);
}
.estel-search__all {
  display: block;
  padding: 12px var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-brand);
  transition: background var(--transition);
}
.estel-search__all:hover { background: var(--color-bg-soft); }

.estel-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
}
.estel-menu-toggle span { width: 22px; height: 2px; background: var(--color-ink); }

@media (max-width: 960px) {
  .estel-nav__list {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding: var(--space-2) var(--container-pad);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  }
  .estel-nav__list.is-open { display: flex; }
  .estel-nav__list > li > a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
  .estel-menu-toggle { display: flex; }
  .estel-header__inner { position: relative; flex-wrap: wrap; }

  /* Submenus render inline (accordion-style, always expanded) on touch/mobile */
  .estel-nav__list .sub-menu {
    position: static;
    z-index: auto;
    display: flex;
    min-width: 0;
    margin: 0 0 8px;
    padding: 0;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .estel-nav__list .sub-menu a {
    padding: 8px 0 8px 16px;
    border-bottom: none;
    color: var(--color-ink-soft);
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.estel-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  background: var(--color-ink);
  color: #fff;
  overflow: hidden;
}
.estel-hero__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}
.estel-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,6,6,0.25) 0%, rgba(7,6,6,0.75) 100%);
}
.estel-hero__content {
  position: relative;
  max-width: 640px;
}
.estel-hero__eyebrow {
  color: var(--color-brand-tint);
  margin-bottom: var(--space-2);
}
.estel-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  margin-bottom: var(--space-3);
}
.estel-hero__desc {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-4);
  max-width: 480px;
}

/* ==========================================================================
   Category banner (product-category archive header)
   ========================================================================== */
.estel-cat-banner {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--space-4);
  height: 320px;
  overflow: hidden;
  background: var(--color-ink);
}
@media (max-width: 700px) { .estel-cat-banner { height: 220px; } }
.estel-cat-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.estel-cat-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,6,6,0.15) 0%, rgba(7,6,6,0.65) 100%);
}
.estel-cat-banner__content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad) var(--space-3);
}
.estel-cat-banner__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  color: #fff;
}

.estel-cat-title-block { margin-bottom: var(--space-3); }
.term-description {
  margin-bottom: var(--space-4);
  max-width: 720px;
  color: var(--color-ink-soft);
}

/* ==========================================================================
   Homepage hero slider
   ========================================================================== */
.estel-hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 830;
  max-height: 70vh;
  overflow: hidden;
  background: var(--color-ink);
}
.estel-hero-slider__track { position: relative; width: 100%; height: 100%; }
.estel-hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease;
}
.estel-hero-slide.is-active { opacity: 1; visibility: visible; }
.estel-hero-slide__img { width: 100%; height: 100%; object-fit: cover; }
.estel-hero-slider__dots {
  position: absolute;
  left: 0; right: 0; bottom: var(--space-2);
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}
.estel-hero-slider__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.8);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.estel-hero-slider__dot.is-active { background: #fff; transform: scale(1.2); }

/* Mobile: 1.5x taller than the desktop 1920/830 ratio (i.e. 1920/1245).
   max-height is lifted so the taller ratio isn't clamped on short viewports. */
@media (max-width: 560px) {
  .estel-hero-slider {
    aspect-ratio: 1920 / 1245;
    max-height: 85vh;
  }
}

/* ==========================================================================
   Section heading
   ========================================================================== */
.estel-section { padding: var(--space-6) 0; }
.estel-section--soft { background: var(--color-bg-soft); }
.estel-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.estel-section__title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 38px);
  margin-top: var(--space-1);
}
.estel-section__link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.estel-section__link:hover { color: var(--color-brand); border-color: var(--color-brand); }

/* ==========================================================================
   Category grid (produkciya-style tiles)
   ========================================================================== */
.estel-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--color-border);
}
@media (max-width: 960px) { .estel-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .estel-cat-grid { grid-template-columns: 1fr; } }

.estel-cat-tile {
  position: relative;
  display: block;
  aspect-ratio: 2 / 2;
  overflow: hidden;
  background: var(--color-ink);
}
.estel-cat-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.02);
  transition: filter 420ms ease, transform 420ms ease;
}
.estel-cat-tile:hover .estel-cat-tile__img {
  filter: grayscale(0);
  transform: scale(1.08);
}
.estel-cat-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,6,6,0) 40%, rgba(7,6,6,0.75) 100%);
}
.estel-cat-tile__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-3);
  color: #fff;
}
.estel-cat-tile__title {
  font-family: var(--font-serif);
  font-size: 20px;
  margin-bottom: 4px;
}
.estel-cat-tile__count {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
}
.estel-cat-tile__arrow {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity var(--transition), transform var(--transition);
}
.estel-cat-tile:hover .estel-cat-tile__arrow { opacity: 1; transform: translate(0, 0); }
.estel-cat-tile__arrow svg { width: 14px; height: 14px; stroke: #fff; }

/* Homepage, mobile only: half-height tiles (square 2/2 -> 2/1). */
@media (max-width: 560px) {
  .home .estel-cat-grid .estel-cat-tile { aspect-ratio: 2 / 1; }
}

/* ==========================================================================
   Product cards — replaces WooCommerce's float layout everywhere the loop
   runs (homepage bestsellers, category archives, shortcodes, cross-sells).
   Scoped by #site-main so these rules reliably outrank plugin stylesheets
   that also target `.woocommerce ul.products li.product`.
   ========================================================================== */
#site-main ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
#site-main ul.products::before,
#site-main ul.products::after { content: none; display: none; }

#site-main ul.products.columns-1 { grid-template-columns: 1fr; }
#site-main ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
#site-main ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
#site-main ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
#site-main ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }

/* Responsive steps only ever reduce the column count. */
@media (max-width: 1100px) {
  #site-main ul.products,
  #site-main ul.products.columns-4,
  #site-main ul.products.columns-5,
  #site-main ul.products.columns-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  #site-main ul.products,
  #site-main ul.products[class*="columns-"]:not(.columns-1) { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
}

/* Products grid reopened below the subcategory tiles (see
   estel_editorial_split_subcategory_tiles): a clear break so the first product
   cards never read as part of the tile row above them. */
#site-main ul.products.estel-products--split { margin-top: var(--space-5); }
@media (max-width: 560px) {
  #site-main ul.products.estel-products--split { margin-top: var(--space-4); }
}

/* Card: full-height flex column so the CTA can be pinned to the bottom. */
#site-main ul.products li.product {
  position: relative;
  float: none;
  clear: none;
  width: auto;
  height: 100%;
  margin: 0;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
#site-main ul.products li.product:hover {
  box-shadow: 0 12px 30px rgba(7, 6, 6, 0.08);
}
#site-main ul.products li.product::before,
#site-main ul.products li.product::after { content: none; display: none; }
@media (max-width: 560px) { #site-main ul.products li.product { padding: var(--space-2); } }

/* The image/title/price live inside one link — make it the growing region so
   every card's button lands on the same baseline across the row. */
#site-main ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
}
#site-main ul.products li.product a { color: inherit; }

#site-main ul.products li.product img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 0 var(--space-2);
  transition: transform 420ms ease;
}
#site-main ul.products li.product:hover img { transform: scale(1.04); }

/* Two-line clamp keeps titles — and therefore prices — on a shared grid. */
#site-main ul.products li.product .woocommerce-loop-product__title,
#site-main ul.products li.product h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  margin: 0 0 var(--space-1);
  padding: 0;
  transition: color var(--transition);
}
#site-main ul.products li.product:hover .woocommerce-loop-product__title { color: var(--color-brand); }

#site-main ul.products li.product .star-rating { font-size: 12px; margin: 0 0 var(--space-1); }

#site-main ul.products li.product .price {
  display: block;
  margin: auto 0 0;
  padding-top: var(--space-1);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
}
#site-main ul.products li.product .price del {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-muted);
  margin-right: 6px;
  opacity: 1;
}
#site-main ul.products li.product .price ins {
  text-decoration: none;
  color: var(--color-accent);
  background: transparent;
}

/* Pinned to the card's bottom edge: buttons line up row by row. */
#site-main ul.products li.product .button,
#site-main ul.products li.product .added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: var(--space-2) 0 0;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius);
  background: var(--color-brand);
  color: #fff;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
#site-main ul.products li.product .button:hover,
#site-main ul.products li.product .added_to_cart:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}
#site-main ul.products li.product .button.loading { opacity: 0.75; }
#site-main ul.products li.product .added_to_cart {
  margin-top: var(--space-1);
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}
#site-main ul.products li.product .added_to_cart:hover {
  background: var(--color-ink);
  color: #fff;
}

#site-main ul.products li.product .onsale {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  right: auto;
  margin: 0;
  min-height: 0;
  min-width: 0;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: #fff;
  z-index: 2;
}

/* ==========================================================================
   Single product gallery
   ========================================================================== */
/* The magnifier button is dropped on every viewport — main.js forwards clicks
   on the image itself to it, so the lightbox still opens (desktop + mobile). */
#site-main .woocommerce-product-gallery__trigger {
  display: none !important;
}
#site-main .woocommerce-product-gallery__image,
#site-main .woocommerce-product-gallery__image a,
#site-main .woocommerce-product-gallery img.zoomImg {
  cursor: zoom-in;
}

/* ==========================================================================
   Single product: quantity + add to cart
   Same visual language as the catalogue card buttons: brand blue at rest,
   ink on hover, 1px hairline field of matching height.
   ========================================================================== */
/* Variable/grouped forms wrap a table, so only the plain form is a flex row;
   for variations the equivalent row is .woocommerce-variation-add-to-cart. */
#site-main form.cart:not(.variations_form):not(.grouped_form),
#site-main .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0px 0px;
  margin: var(--space-3) 0;
}

/* Spacing between the field and the button comes from the field's margin,
   so the row keeps a zero gap (matters for wrapped/edge cases). */
#site-main .quantity { display: inline-flex; margin: 0; margin-right: 10px; }
#site-main .quantity .qty {
  width: 96px;
  height: 48px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}
#site-main .quantity .qty:hover { border-color: var(--color-muted); }
#site-main .quantity .qty:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(16, 108, 184, 0.12);
}

#site-main .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 240px;
  height: 48px;
  margin: 0;
  padding: 0 var(--space-4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius);
  background: var(--color-brand);
  color: #fff;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
#site-main .single_add_to_cart_button:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}
#site-main .single_add_to_cart_button.disabled,
#site-main .single_add_to_cart_button:disabled,
#site-main .single_add_to_cart_button.wc-variation-selection-needed {
  background: var(--color-bg-softer);
  border-color: var(--color-border);
  color: var(--color-muted);
  cursor: not-allowed;
}
#site-main .single_add_to_cart_button.loading { opacity: 0.75; }

@media (max-width: 560px) {
  #site-main .single_add_to_cart_button { flex: 1 1 auto; min-width: 0; padding: 0 var(--space-3); }
}

/* ==========================================================================
   Stock availability by store (estel-warehouses plugin)
   Deliberately chrome-free: no panel, no rules, no bullets — just a quiet
   two-column list that reads as product meta rather than a widget.
   ========================================================================== */
#site-main .esw-availability {
  max-width: 420px;
  margin: var(--space-2) 0 var(--space-3);
  font-size: 13px;
  line-height: 1.4;
}
#site-main .esw-availability__title {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
}
#site-main .esw-availability__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
#site-main .esw-availability__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 3px 0;
}
#site-main .esw-availability__name {
  color: var(--color-ink);
}
#site-main .esw-availability__item.is-out-of-stock .esw-availability__name {
  color: var(--color-muted);
}
#site-main .esw-availability .esw-in-stock {
  color: #1a7a2e;
  white-space: nowrap;
}
#site-main .esw-availability .esw-out-of-stock {
  color: var(--color-muted);
  white-space: nowrap;
}
@media (max-width: 480px) {
  #site-main .esw-availability { font-size: 12px; }
}

/* ==========================================================================
   Checkout
   ========================================================================== */
/* WooCommerce's core checkout/form-billing.php prints an <h3>Платёжные
   реквизиты</h3> with no filter to remove it. Hidden here rather than through a
   template override so the store isn't carrying a copy of a core template that
   silently goes stale on WooCommerce updates. */
.woocommerce-billing-fields > h3 {
  display: none;
}

/* ==========================================================================
   Search results page
   ========================================================================== */
.estel-search-page { padding: var(--space-4) 0 var(--space-6); }
.estel-search-page__head { margin-bottom: var(--space-3); }
.estel-search-page__count {
  margin: var(--space-1) 0 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.estel-search-page__subtitle {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: 22px;
}

.estel-search-page__form {
  display: flex;
  gap: var(--space-1);
  max-width: 560px;
  margin-bottom: var(--space-4);
}
.estel-search-page__form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 15px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.estel-search-page__form input[type="search"]:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(16, 108, 184, 0.12);
}
.estel-search-page__form .estel-btn { padding: 0 var(--space-3); height: 48px; }

.estel-search-page__empty {
  max-width: 560px;
  color: var(--color-ink-soft);
}
.estel-search-page__empty .estel-btn { margin-top: var(--space-2); }

/* Non-product matches (pages, posts). */
.estel-results { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.estel-result + .estel-result { border-top: 1px solid var(--color-border); }
.estel-result__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.estel-result__img { width: 64px; height: 64px; object-fit: cover; flex: 0 0 auto; }
.estel-result__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.estel-result__title { font-size: 16px; font-weight: 600; }
.estel-result__link:hover .estel-result__title { color: var(--color-brand); }
.estel-result__excerpt { font-size: 14px; color: var(--color-ink-soft); }

/* ==========================================================================
   Pagination (search results and catalogue archives)
   ========================================================================== */
.estel-main .pagination,
.estel-main .woocommerce-pagination {
  margin: var(--space-4) 0 0;
  text-align: center;
}
.estel-main .nav-links,
.estel-main .page-numbers:not(li) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.estel-main ul.page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
}
.estel-main ul.page-numbers li { border: none; }
.estel-main .page-numbers:not(ul):not(.dots) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-bg);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.estel-main .page-numbers:not(ul):not(.dots):hover {
  border-color: var(--color-ink);
}
.estel-main .page-numbers.current {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}
.estel-main .page-numbers.dots {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 4px;
  color: var(--color-muted);
}
.estel-main .screen-reader-text + .nav-links { margin-top: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.estel-footer {
  background: var(--color-ink);
  color: rgba(255,255,255,0.7);
  padding: var(--space-5) 0 var(--space-3);
}
.estel-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 800px) { 
  .estel-footer__grid { 
    /* grid-template-columns: 1fr 1fr;  */
    display: flex;
    flex-direction: column;
  } 
}
.estel-footer__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-2);
}
.estel-footer__list li { margin-bottom: 10px; font-size: 14px; }
.estel-footer__list a:hover { color: var(--color-brand-tint); }
.estel-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  flex-wrap: wrap;
}
.estel-footer__logo { font-family: var(--font-serif); color: #fff; font-size: 18px; margin-bottom: var(--space-2); }