/* ==== Gallery: classic shortcode & Gutenberg block ==== */

/* Design tokens bridge (palette → convenient aliases) */
:root {
  --color-ink: var(--wp--preset--color--ink, #264653);
  --color-teal: var(--wp--preset--color--teal, #77a4c9);
  --color-sand: var(--wp--preset--color--sand, #e9c46a);
  --color-rust: var(--wp--preset--color--rust, #e76f51);
  --color-paper: var(--wp--preset--color--paper, #fafaf7);
  --color-coal: var(--wp--preset--color--coal, #111418);
  --color-slate: var(--wp--preset--color--slate, #171a1f);
  --color-charcoal: var(--wp--preset--color--charcoal, #0e0f12);
  color-scheme: light;
}

html {
  background-color: var(--color-paper, #fafaf7);
  color: var(--color-coal, #111418);
  color-scheme: light;
}

/* Классический шорткод [gallery] */
.gallery {
  /* из коробки часто display:block; меняем на grid */
  display: grid;
  gap: 12px;
  --cols: 3; /* по умолчанию */
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}
.gallery-columns-1 {
  --cols: 1;
}
.gallery-columns-2 {
  --cols: 2;
}
.gallery-columns-3 {
  --cols: 3;
}
.gallery-columns-4 {
  --cols: 4;
}
.gallery-columns-5 {
  --cols: 5;
}
.gallery-columns-6 {
  --cols: 6;
}
.gallery-columns-7 {
  --cols: 7;
}
.gallery-columns-8 {
  --cols: 8;
}
.gallery-columns-9 {
  --cols: 9;
}

.gallery .gallery-item {
  margin: 0;
}
.gallery .gallery-icon img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.gallery .wp-caption-text,
.gallery .gallery-caption {
  margin-top: 6px;
  font-size: 12px;
  text-align: center;
  color: var(--wp--preset--color--coal);
  opacity: 0.85;
}

/* Gutenberg: wp-block-gallery */
.wp-block-gallery {
  display: grid;
  gap: 12px;
}
/* Если редактор/пользователь не задал columns — делаем автоадаптив */
.wp-block-gallery:not([class*="columns-"]) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* Поддержка явных columns-X (1..8) */
.wp-block-gallery.columns-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.wp-block-gallery.columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wp-block-gallery.columns-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wp-block-gallery.columns-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wp-block-gallery.columns-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.wp-block-gallery.columns-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.wp-block-gallery.columns-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.wp-block-gallery.columns-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.wp-block-gallery .wp-block-image {
  margin: 0;
}
.wp-block-gallery img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.wp-block-gallery figcaption {
  margin-top: 6px;
  font-size: 12px;
  text-align: center;
  color: var(--wp--preset--color--coal);
  opacity: 0.85;
}

/* Небольшая адаптация на узких экранах */
@media (max-width: 640px) {
  .gallery {
    --cols: 2;
  } /* даже если выставлено 3+, на телефоне 2 */
  .wp-block-gallery.columns-3,
  .wp-block-gallery.columns-4,
  .wp-block-gallery.columns-5,
  .wp-block-gallery.columns-6,
  .wp-block-gallery.columns-7,
  .wp-block-gallery.columns-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ссылки и hover */
a {
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  text-decoration: none;
}

/* Hero overlay (мягкая подложка для читаемости текста) */
.claudia-hero__overlay {
  background: rgba(250, 250, 247, 0.7); /* Paper с прозрачностью */
  backdrop-filter: blur(2px);
  border-radius: 12px;
  padding: 24px;
}

/* Бейджи и цены */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
}

/* Fallback tag pill (non-glass mode) */
.tag {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  background: #f6f8f9;
  border: 1px solid #e2e8f0;
  color: inherit;
}

.badge--teal {
  background: var(--wp--preset--color--teal);
  color: #fff;
}

.badge--sand {
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--coal);
}

.badge--featured {
  background: rebeccapurple;
  color: #fff;
}

.price {
  font-weight: 700;
  font-size: 18px;
}

.card-shadow {
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  padding: 16px;
}

/* Кнопки: hover-состояния */
.wp-block-button__link:hover {
  filter: brightness(0.95);
}
.wp-block-button__link {
  border: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.85);
  color: inherit;
  border-radius: 999px;
}
/* Светлый/тёмный фон на секциях (без текстуры) */
.theme-surface--light {
  background: var(--wp--custom--surface--light--background);
}
.theme-surface--dark {
  background: var(--wp--custom--surface--dark--background);
  color: #fff;
}

/* Оверлей-карточка для читаемости текста на любых фонах */
.surface-overlay--light {
  background: var(--wp--custom--surface--light--overlay);
  backdrop-filter: blur(2px);
  border-radius: 12px;
  padding: 24px;
}
.surface-overlay--dark {
  background: var(--wp--custom--surface--dark--overlay);
  backdrop-filter: blur(2px);
  border-radius: 12px;
  padding: 24px;
}

/* Варианты текстурного фона для dark */
.theme-surface--dark-texture {
  background: url("../images/paper-texture-dark.jpg") center/cover no-repeat;
  color: #fff;
}

.badge--out {
  background: #c62828; /* красный */
  color: #fff;
}

/* ----- Contrast & A11y polish ----- */

/* Better link contrast on dark surfaces */
.theme-surface--dark a {
  color: var(--wp--preset--color--sand);
}
.theme-surface--dark a:hover {
  text-decoration: underline;
}

/* Focus visibility for keyboard users */
a:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--teal);
  outline-offset: 2px;
}

/* ==== Overlay Menu: non-glass fallback ==== */
.glass-menu[hidden] {
  display: none;
}
.glass-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: 1fr;
}
.glass-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
}
.glass-menu__panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 550px);
  margin: 10vh auto;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.glass-menu__list {
  list-style: none;
  margin: 12px 0 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.glass-menu__list a {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}
.glass-menu__list a:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
  transition: transform 0.12s, box-shadow 0.12s;
}
.no-scroll {
  overflow: hidden;
}

/* Icons before links (fallback base) */
.glass-menu__list a {
  position: relative;
  padding-left: 36px;
}
.glass-menu__list a::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--wp--preset--color--teal, #2a9d8f);
  opacity: 0.9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.glass-menu__list .menu-item-home > a::before {
  background: var(--wp--preset--color--teal, #2a9d8f);
}

/* Overlay search (fallback) */
.glass-menu__search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.glass-menu__search input {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

/* Header toggle (fallback/base) */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: inherit;
}
.menu-toggle:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.menu-toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--teal);
  outline-offset: 2px;
}

/* Close button fallback */
.glass-menu__close {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1;
}

/* ==== Bag overlay specific styles ==== */
.bag-overlay {
  z-index: 90;
}
.bag-overlay__panel {
  width: min(92vw, 520px);
  padding: 20px;
  max-height: min(92vh, 700px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  /* position: relative; */
}
.bag-overlay__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 8px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}
.bag-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bag-overlay__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 auto;
}
.bag-overlay__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}
.bag-overlay__thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  flex: 0 0 56px;
}
.bag-overlay__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bag-overlay__title {
  font-weight: 600;
  margin: 0;
  min-width: 0;
}
.bag-overlay__title-link {
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}
.bag-overlay__title-link:hover {
  text-decoration: underline;
}
.bag-overlay__title-link::before {
  display: none;
}
.bag-overlay__meta {
  font-size: 12px;
  opacity: 0.8;
}
.bag-overlay__meta--unavailable {
  color: #b45309;
}
.bag-overlay__qty {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.bag-overlay__qty-input {
  width: 52px;
  text-align: center;
}
.bag-overlay__qty--static {
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
}
.bag-overlay__remove {
  margin-left: 8px;
}
.bag-overlay__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  flex: 0 0 auto;
}
.bag-overlay__subtotal {
  font-size: 16px;
  font-weight: 600;
}
.bag-overlay__summary-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 0 15px 0;
}
.bag-overlay__empty {
  padding: 32px 18px;
  text-align: center;
  border-radius: 16px;
  background: #f1f5f9;
  color: #475569;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.bag-overlay__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.bag-overlay__empty-icon img {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
}
.bag-overlay__empty-text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}
.bag-overlay__error {
  padding: 18px;
  text-align: center;
  border-radius: 12px;
  background: #fee2e2;
  color: #b91c1c;
}
.bag-overlay__form {
  margin-top: 0;
  flex: 0 0 auto;
}
.bag-overlay__form[hidden] {
  display: none;
}
.bag-overlay__send {
  min-width: 140px;
}
.bag-overlay__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.bag-overlay__title-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.bag-overlay__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.bag-overlay__btn-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.bag-overlay__confirm {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  padding: 24px;
  z-index: 10;
}
.bag-overlay__confirm[hidden] {
  display: none;
}
.bag-overlay__confirm-dialog {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  outline: none;
}
.bag-overlay__confirm-body {
  margin-bottom: 18px;
}
.bag-overlay__confirm-body h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.bag-overlay__confirm-text {
  margin: 0;
  color: #475569;
  font-size: 14px;
}
.bag-overlay__confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.bag-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 6px;
}
.bag-toggle__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.bag-toggle__label {
  display: inline-block;
  vertical-align: middle;
}

/* ==== Bag overlay: Contact Form 7 styling ==== */
.bag-overlay__form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}
.bag-overlay__form .wpcf7-form p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bag-overlay__form .wpcf7-form label {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}
.bag-overlay__form .wpcf7-form input[type="text"],
.bag-overlay__form .wpcf7-form input[type="email"],
.bag-overlay__form .wpcf7-form input[type="tel"],
.bag-overlay__form .wpcf7-form input[type="url"],
.bag-overlay__form .wpcf7-form textarea,
.bag-overlay__form .wpcf7-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #ffffff;
  font-size: 14px;
  line-height: 1.45;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  box-sizing: border-box;
}
.bag-overlay__form .wpcf7-form textarea {
  min-height: 100px;
  resize: vertical;
}
.bag-overlay__form .wpcf7-form input:focus,
.bag-overlay__form .wpcf7-form textarea:focus,
.bag-overlay__form .wpcf7-form select:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.25);
  outline: none;
}
.bag-overlay__form .wpcf7-form .wpcf7-not-valid {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}
.bag-overlay__form .wpcf7-form .wpcf7-not-valid-tip {
  color: #dc2626;
  font-size: 12px;
  margin-top: 4px;
}
.bag-overlay__form .wpcf7-form .wpcf7-response-output {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.bag-overlay__form .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
  background: #ecfdf5;
  border: 1px solid #34d399;
  color: #047857;
}
.bag-overlay__form .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
.bag-overlay__form .wpcf7-form .wpcf7-response-output.wpcf7-aborted {
  background: #fef2f2;
  border: 1px solid #f97316;
  color: #c2410c;
}
.bag-overlay__form .wpcf7-form .wpcf7-spinner {
  margin-left: auto;
}
.bag-overlay__form .wpcf7-form input[type="submit"],
.bag-overlay__form .wpcf7-form button[type="submit"],
.bag-overlay__form .wpcf7-form .wpcf7-submit {
  align-self: flex-end;
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.bag-overlay__form .wpcf7-form input[type="submit"]:hover,
.bag-overlay__form .wpcf7-form button[type="submit"]:hover,
.bag-overlay__form .wpcf7-form .wpcf7-submit:hover {
  background: var(--accent);
  transform: translateY(-1px);
}
.bag-overlay__form .wpcf7-form .wpcf7-spinner::before {
  border-top-color: 1px solid var(--glass-border);
}

@media (max-width: 540px) {
  .bag-overlay__panel {
    width: min(96vw, 360px);
    margin: 8vh auto;
    padding: 18px;
    max-height: min(92vh, 560px);
  }
  .bag-overlay__item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .bag-overlay__qty {
    margin-left: 0;
  }
  .bag-overlay__remove {
    margin-left: 0;
  }
  .bag-overlay__summary {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .bag-overlay__summary-actions {
    justify-content: flex-end;
  }
}

/* Desktop nav fallback */
.site-nav {
  display: none;
}
@media (min-width: 980px) {
  .site-nav {
    display: block;
  }
  .menu-toggle {
    display: none !important;
  }
}
.site-nav__list {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list a {
  display: block;
  padding: 8px 12px 8px 36px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  position: relative;
  border: 1px solid transparent;
}
.site-nav__list a::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--wp--preset--color--teal, #2a9d8f);
  opacity: 0.9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.site-nav__list .menu-item-home > a::before {
  background: var(--wp--preset--color--teal, #2a9d8f);
}
.site-nav__list a:hover {
  background: #fff;
  border-color: #e5e7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
  transition: transform 0.12s, box-shadow 0.12s;
}

/* Product single image styling */
.single-product .wp-post-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
/* At <=980px keep two columns but reduce image max width for balance */
@media (max-width: 980px) {
  .single-product .wp-post-image {
    max-width: 608px;
  }
}
/* Same shadow for thumbnails */
.single-product .ch-thumb-grid img {
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
/* Single product: heading size cap */
.single-product .has-3-xl-font-size {
  font-size: 32px !important;
  font-weight: 400;
  line-height: 1.2;
}
/* Single product: allow aside under image only on narrow screens <=640px */
@media (max-width: 640px) {
  .single-product .wp-block-columns.alignwide {
    grid-template-columns: 1fr !important;
  }
}

/* Single product: balanced layout between 641px and 768px */
@media (min-width: 641px) and (max-width: 768px) {
  .single-product .wp-block-columns.alignwide {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px;
  }
  .single-product .wp-post-image {
    max-width: 100%;
  }
}
/* Single product: align buttons to end */
.single-product .glass-card .wp-block-buttons {
  display: flex;
  justify-content: flex-end;
}
/* Ограничение ширины и центрирование контента для alignwide */
.wp-block-group.alignwide {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Products grid ===== */
.products-grid {
  display: grid;
  column-gap: 24px;
  row-gap: 45px; /* меньше 60px, но комфортно */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: stretch;
  padding: 20px 0 30px 0;
}

/* Подгонка широких контейнеров каталога под 1000px центрировано */
.archive.post-type-archive-product .wp-block-group.alignwide,
.tax-collection .wp-block-group.alignwide {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* На очень узких экранах делаем карточки шире (2 в ряд) */
@media (max-width: 640px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

/* Планшеты */
@media (max-width: 1024px) {
  .products-grid {
    row-gap: 48px;
    column-gap: 20px;
  }
}

/* Мобильные */
@media (max-width: 640px) {
  .products-grid {
    row-gap: 48px;
    column-gap: 16px;
  }
}

/* ==== Fluid Typography (320–1920px) ==== */
/* Scale uses clamp with gentle growth; headings remain readable on mobile */
body {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.6;
  background-color: var(--color-paper, #fafaf7);
  color: var(--color-coal, #111418);
}

@media (prefers-color-scheme: dark) {
  html,
  body,
  .site,
  .site-main,
  main,
  #page {
    background-color: var(--color-paper, #fafaf7) !important;
    color: var(--color-coal, #111418);
  }
}
h1 {
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.16;
  margin: 0 0 0.6em;
}
h2 {
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.2;
  margin: 0 0 0.55em;
}
h3 {
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.25;
  margin: 0 0 0.5em;
}
h4 {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.3;
  margin: 0 0 0.45em;
}
h5 {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.35;
  margin: 0 0 0.4em;
}
h6 {
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.4;
  margin: 0 0 0.35em;
}

/* ==== Layout Utilities: Containers ==== */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}
.container-wide {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* ==== Grid Utilities: 12 columns + spans ==== */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--g, 12px);
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.col-span-5 {
  grid-column: span 5 / span 5;
}
.col-span-6 {
  grid-column: span 6 / span 6;
}
.col-span-7 {
  grid-column: span 7 / span 7;
}
.col-span-8 {
  grid-column: span 8 / span 8;
}
.col-span-9 {
  grid-column: span 9 / span 9;
}
.col-span-10 {
  grid-column: span 10 / span 10;
}
.col-span-11 {
  grid-column: span 11 / span 11;
}
.col-span-12 {
  grid-column: 1 / -1;
}
.col-span-full {
  grid-column: 1 / -1;
}

/* Breakpoints: 640px (md), 980px (lg) */
@media (min-width: 640px) {
  .md-col-span-1 {
    grid-column: span 1 / span 1;
  }
  .md-col-span-2 {
    grid-column: span 2 / span 2;
  }
  .md-col-span-3 {
    grid-column: span 3 / span 3;
  }
  .md-col-span-4 {
    grid-column: span 4 / span 4;
  }
  .md-col-span-5 {
    grid-column: span 5 / span 5;
  }
  .md-col-span-6 {
    grid-column: span 6 / span 6;
  }
  .md-col-span-7 {
    grid-column: span 7 / span 7;
  }
  .md-col-span-8 {
    grid-column: span 8 / span 8;
  }
  .md-col-span-9 {
    grid-column: span 9 / span 9;
  }
  .md-col-span-10 {
    grid-column: span 10 / span 10;
  }
  .md-col-span-11 {
    grid-column: span 11 / span 11;
  }
  .md-col-span-12 {
    grid-column: 1 / -1;
  }
  .md-col-span-full {
    grid-column: 1 / -1;
  }
}
@media (min-width: 980px) {
  .lg-col-span-1 {
    grid-column: span 1 / span 1;
  }
  .lg-col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg-col-span-3 {
    grid-column: span 3 / span 3;
  }
  .lg-col-span-4 {
    grid-column: span 4 / span 4;
  }
  .lg-col-span-5 {
    grid-column: span 5 / span 5;
  }
  .lg-col-span-6 {
    grid-column: span 6 / span 6;
  }
  .lg-col-span-7 {
    grid-column: span 7 / span 7;
  }
  .lg-col-span-8 {
    grid-column: span 8 / span 8;
  }
  .lg-col-span-9 {
    grid-column: span 9 / span 9;
  }
  .lg-col-span-10 {
    grid-column: span 10 / span 10;
  }
  .lg-col-span-11 {
    grid-column: span 11 / span 11;
  }
  .lg-col-span-12 {
    grid-column: 1 / -1;
  }
  .lg-col-span-full {
    grid-column: 1 / -1;
  }
}

/* ==== Progressive enhancement: Container Queries ==== */
/* Opt-in: add class .cq on a grid parent to enable container rules */
.cq {
  container-type: inline-size;
}
@container (max-width: 640px) {
  .grid-12.cq {
    --g: 10px;
  }
}
/* Archive/Lists general spacing utilities */
.page-wrap {
  padding: 24px;
}
.page-head {
  margin-bottom: 16px;
}
.page-head h1 {
  margin: 0;
}
.page-head .description {
  opacity: 0.8;
  margin: 4px 0 0;
}
.catalog-empty-note {
  grid-column: 1 / -1;
  opacity: 0.8;
}

.currency-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 35px;
  max-width: 145px;
  min-width: 100px;
  padding: 0 16px;
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(244, 247, 250, 0.92)
  );
  border: 1px solid rgba(148, 163, 184, 0.95);
  /* box-shadow: 0 22px 44px -28px rgba(15, 23, 42, 0.5); */
  color: #0f172a;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.currency-switcher:hover {
  transform: translateY(-1px);
  box-shadow: 0 26px 50px -30px rgba(15, 23, 42, 0.55);
}
.currency-switcher:focus-within {
  border-color: rgba(42, 157, 143, 0.65);
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.16),
    0 28px 54px -28px rgba(15, 23, 42, 0.58);
}
.currency-switcher::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
  opacity: 0.65;
}
.currency-switcher select.ch-currency {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 14px;
  color: inherit;
  padding: 0 26px 0 0;
  cursor: pointer;
  min-width: 0;
}
.currency-switcher select.ch-currency:focus {
  outline: none;
}
.currency-switcher__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 32px -24px rgba(15, 23, 42, 0.55);
  /* padding: 3px; */
}
.currency-switcher__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.currency-switcher__label {
  font-weight: 600;
  font-size: 14px;
}

.catalog-pagination .nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}
.catalog-pagination .nav-links > * + * {
  margin-left: 8px;
}
@supports (gap: 8px) {
  .catalog-pagination .nav-links > * + * {
    margin-left: 0;
  }
}

/* ===== Single product navigation (prev / next) ===== */
.single-product-nav,
.wp-block-group.single-product-nav,
.wp-block-post-navigation.single-product-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.wp-block-post-navigation-link.single-product-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.96),
    rgba(244, 247, 250, 0.9)
  );
  color: #0f172a;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 18px 32px -26px rgba(15, 23, 42, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease, background 0.18s ease;
}

.wp-block-post-navigation-link.single-product-nav:hover,
.wp-block-post-navigation-link.single-product-nav:focus-within {
  transform: translateY(-1px);
  border-color: rgba(42, 157, 143, 0.65);
  box-shadow: 0 22px 40px -24px rgba(15, 23, 42, 0.6);
  outline: none;
}

.wp-block-post-navigation-link.single-product-nav a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  order: 1;
}

.wp-block-post-navigation-link.single-product-nav
  .wp-block-post-navigation-link__arrow-previous,
.wp-block-post-navigation-link.single-product-nav
  .wp-block-post-navigation-link__arrow-next {
  font-size: 18px;
  line-height: 1;
  opacity: 0.75;
}

.wp-block-post-navigation-link.single-product-nav
  .wp-block-post-navigation-link__arrow-previous {
  order: 0;
}

.wp-block-post-navigation-link.single-product-nav
  .wp-block-post-navigation-link__arrow-next {
  order: 2;
}

.wp-block-post-navigation-link.single-product-nav .post-navigation-link__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.wp-block-post-navigation-link.single-product-nav .post-navigation-link__title {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: inherit;
}

.wp-block-post-navigation-link.post-navigation-link-next.single-product-nav {
  text-align: right;
}

.wp-block-post-navigation-link.single-product-nav:empty {
  display: none;
}

/* Single product utility classes */
.single-product .currency-switcher {
  /* margin: 0 0 12px; */
  margin: 0;
}
.single-product .content-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.3fr 1fr;
  align-items: start;
}
.single-product .product-aside {
  padding: 16px 20px;
}
.single-product .product-title {
  margin: 0;
}
.single-product .product-sku {
  opacity: 0.7;
  margin-top: 6px;
}
.single-product .product-flags {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.single-product .glass-card .wp-block-buttons {
  margin-top: 12px;
}
.single-product .glass-card .price {
  font-size: 24px;
  margin: 12px 0 0;
  font-weight: 400;
}
.single-product .glass-card .price--na {
  margin: 12px 0 0;
  opacity: 0.8;
}
.single-product .glass-card hr {
  margin: 12px 0;
}
.single-product .tags {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.single-product section.content-after {
  margin-top: 24px;
}
.wp-block-button__link.is-disabled,
.wp-block-button__link[disabled] {
  pointer-events: none;
  opacity: 0.6;
}