/* Drovianni — те, що дає WooCommerce, у мові нашої системи.

   style.css тримає систему: два кольори, Manrope, нульовий радіус, сітка
   по 8px. Тут — розмітка, яку WooCommerce малює сам: форми, кошик,
   оформлення, повідомлення. Свої стилі WooCommerce і Storefront ми зняли,
   тому все, що бачить покупець, описано або там, або тут. */

/* ---------- текст сторінок ---------- */

.prose { max-width: 65ch; }

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
}

.prose > *:last-child { margin-bottom: 0; }

.prose h2,
.prose h3 {
  margin: 48px 0 16px;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.prose h3 { font-size: 18px; font-weight: 500; }

.prose a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
.prose a:hover { border-bottom-color: var(--ink); }

.prose ul,
.prose ol { padding-left: 20px; }
.prose li { margin-bottom: 8px; }

.prose strong { font-weight: 500; }

.prose img { display: block; height: auto; margin: 32px 0; }

.prose hr {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 48px 0;
}

/* ---------- головна ---------- */

.hero { padding-bottom: clamp(48px, 8vw, 96px); }

.hero .media--hero { background: var(--bg-deep); }

.hero__tag {
  position: relative;
  z-index: 1;
  color: var(--bg);
  text-shadow: 0 1px 24px rgba(18, 16, 14, 0.5);
}

.hero__words {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 64px);
  align-items: flex-end;
  justify-content: space-between;
  padding-top: clamp(32px, 5vw, 56px);
}

.hero__words .h1 { flex: 1 1 420px; }
.hero__words .body { flex: 0 1 380px; }

/* ---------- сітка колекції ---------- */

.archive__head { margin-bottom: 40px; }
.archive__grid { margin-top: 48px; }

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}

.pager a,
.pager span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.pager a:hover,
.pager .current { color: var(--ink); }

/* ---------- сторінка роботи ---------- */

.pdp-page { padding-bottom: clamp(48px, 8vw, 96px); }

.breadcrumb { margin-bottom: 40px; }

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: '—';
  margin-right: 12px;
  color: var(--muted);
}

.pdp__gallery .media { background: var(--bg-deep); }

/* Колонка покупки стоїть на місці, поки гортаєш галерею. */
.pdp__buy > * { margin: 0; }

.pdp__number { display: block; }

.pdp__price {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 300;
  line-height: 1.2;
}

.pdp__price del { display: none; }
.pdp__price ins { text-decoration: none; }

.pdp__size { display: block; }

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

/* ---------- форма покупки ---------- */

form.cart {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}

form.cart .quantity {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

form.cart .quantity label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.qty,
input[type='number'] {
  width: 72px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
  padding: 8px 0;
  text-align: left;
}

.qty:focus { border-bottom-color: var(--ink); outline: none; }

/* Кнопки WooCommerce набувають вигляду нашої .btn — у розмітці плагіна
   класи змінити не можна, тож зустрічаємо їх тут. */
.button,
button.button,
input.button,
a.button,
.single_add_to_cart_button,
.checkout-button,
.woocommerce-Button {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease);
}

.button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  background: var(--bg);
  color: var(--ink);
}

.single_add_to_cart_button,
.checkout-button { width: 100%; }

.button:disabled,
.single_add_to_cart_button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- вибір розміру ---------- */

.variations {
  width: 100%;
  border-collapse: collapse;
}

.variations th,
.variations td {
  padding: 0 0 12px;
  text-align: left;
  vertical-align: middle;
}

.variations .label label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.variations select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
  padding: 8px 0;
  appearance: none;
  cursor: pointer;
}

.variations select:focus { border-bottom-color: var(--ink); outline: none; }

.reset_variations {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.woocommerce-variation-price { margin-bottom: 16px; }

.woocommerce-variation-availability { margin-bottom: 16px; }

.stock {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.stock.out-of-stock { color: var(--ink); }

.measure__note { display: block; margin-top: 8px; }

/* ---------- паспорт ---------- */

.passport { display: flex; flex-direction: column; }

/* ---------- повідомлення ---------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper ul {
  margin: 0 0 32px;
  padding: 16px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.woocommerce-error {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.woocommerce-error a { color: var(--bg); }

.woocommerce-message .button,
.woocommerce-info .button {
  padding: 10px 20px;
}

/* ---------- кошик ---------- */

.cart-page__cols { gap: clamp(32px, 5vw, 80px); }
.cart-page__items { flex: 2 1 420px; }
.cart-page__totals { flex: 1 1 300px; }

.cart-page .line-item__media { flex: 0 0 88px; }
.cart-page .line-item__media.media { padding: 0; aspect-ratio: 3 / 4; }

.line-item__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: baseline;
  margin-top: 8px;
}

.line-item__price { font-size: 16px; font-weight: 300; }

.line-item__foot .quantity { display: flex; }
.line-item__foot .qty { width: 56px; }

.cart-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-top: 1px solid var(--hair);
  margin-top: 8px;
}

.cart-page__actions button[name='update_cart'] {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.cart-page__coupon {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex: 1 1 280px;
}

.cart-page__coupon .field { flex: 1 1 auto; }
.cart-page__coupon .btn { padding: 12px 20px; }

.cart_totals h2 {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.cart_totals table,
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
}

.cart_totals th,
.cart_totals td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 16px 0;
  border-top: 1px solid var(--hair);
  text-align: left;
  font-weight: 300;
  vertical-align: top;
}

.cart_totals th,
.woocommerce-checkout-review-order-table th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.cart_totals td,
.woocommerce-checkout-review-order-table td { text-align: right; }

.cart_totals .order-total td,
.woocommerce-checkout-review-order-table tfoot .order-total td { font-size: 20px; }

.wc-proceed-to-checkout { margin-top: 24px; }

.shipping-calculator-button {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- оформлення ---------- */

.woocommerce-checkout .col2-set {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px);
}

.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 { flex: 1 1 320px; }

.woocommerce-checkout h3 {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.woocommerce-checkout p.form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 20px;
}

.woocommerce-checkout label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.select2-selection {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  padding: 8px 0;
  outline: none;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus { border-bottom-color: var(--ink); }

.woocommerce-checkout .required { color: var(--muted); text-decoration: none; }

#order_review_heading {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}

.woocommerce-checkout-payment ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.woocommerce-checkout-payment li {
  padding: 16px 0;
  border-top: 1px solid var(--hair);
}

.woocommerce-checkout-payment .payment_box {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 300;
  color: var(--muted);
}

.woocommerce-terms-and-conditions-wrapper { margin-bottom: 24px; }

#place_order { width: 100%; }

/* ---------- підвал ---------- */

.site-footer__bottom nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  opacity: 0.6;
  text-decoration: none;
  transition: opacity var(--ease);
}

.site-footer__bottom nav a:hover { opacity: 1; }

/* ---------- дрібне ---------- */

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

.woocommerce-breadcrumb { margin: 0; }

/* ---------- вузький екран ---------- */

@media (max-width: 767px) {
  .pdp__buy { position: static; }

  .hero__words { align-items: flex-start; }

  .cart-page__actions { flex-direction: column; align-items: stretch; }

  .sticky-bar__inner { gap: 8px; }
  .sticky-bar .btn { flex: 1 1 100%; padding: 12px 24px; }
}

/* ---------- заголовок сторінки ---------- */

.page__head { margin-bottom: 48px; }

/* ---------- оформлення: вирівнювання під нашу сітку ---------- */

.woocommerce-checkout .col2-set { margin-bottom: 64px; }

#order_review {
  max-width: 560px;
  margin-left: auto;
}

/* Випадайка країни малюється плагіном select2 — приводимо її
   до вигляду решти полів, а не навпаки. */
.select2-container--default .select2-selection--single {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  height: auto;
  padding: 8px 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--ink);
  font-weight: 300;
  line-height: 1.6;
}

.select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }

.select2-dropdown {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--ink);
  color: var(--bg);
}

.select2-search--dropdown .select2-search__field {
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  font-family: inherit;
  padding: 8px 0;
}

/* Купон у шапці оформлення — рядок, а не банер. */
.woocommerce-form-coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  padding-bottom: 32px;
}

.woocommerce-form-coupon p { margin: 0; }
.woocommerce-form-coupon .input-text {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
  padding: 8px 0;
}

/* ---------- герой на вузькому екрані ---------- */

/* Кадр 16:9 на телефоні зрізає килим згори й знизу — саме те, заради
   чого людина відкрила сайт. Вертикальний кадр показує роботу цілою. */
@media (max-width: 767px) {
  .hero .media--hero { aspect-ratio: 4 / 5; }
}

/* Килими стоять по двоє від планшета й ширше: по одному на рядок
   вони займають екран цілком і сторінка перетворюється на стрічку. */
@media (min-width: 900px) {
  .grid--rugs { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- сторінка після оплати ---------- */

.thanks__head { margin-bottom: 48px; }
.thanks__facts { margin-bottom: 64px; max-width: 560px; }

.thanks__next {
  gap: clamp(32px, 4vw, 64px);
  padding-top: 32px;
  border-top: 1px solid var(--hair);
  margin-bottom: 64px;
}

.thanks__next > * { flex: 1 1 240px; }

.thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin: 0 0 64px;
}

/* Таблиця з позиціями йде від WooCommerce — приводимо її до тих самих
   тонких ліній, що й решта сайту. */
.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 64px;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  padding: 16px 0;
  border-top: 1px solid var(--hair);
  text-align: left;
  font-weight: 300;
  vertical-align: top;
}

.woocommerce-table--order-details thead th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 0;
}

.woocommerce-table--order-details td:last-child,
.woocommerce-table--order-details th:last-child { text-align: right; }

.woocommerce-table--order-details a { color: var(--ink); text-decoration: none; }

.woocommerce-customer-details address {
  font-style: normal;
  font-weight: 300;
  padding: 16px 0;
  border-top: 1px solid var(--hair);
}

/* ---------- доставка й огляд замовлення в оформленні ---------- */

/* Заголовок «Your order» стояв біля лівого краю, а сама таблиця —
   праворуч: два шматки одного блоку розходились по сторінці. */
#order_review_heading {
  max-width: 560px;
  margin-left: auto;
}

#shipping_method,
.woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

#shipping_method li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: flex-end;
  margin-bottom: 8px;
}

#shipping_method li:last-child { margin-bottom: 0; }

/* Назва способу доставки — звичайний рядок, а не підпис врозрядку:
   правило для всіх підписів в оформленні тут не годиться. */
#shipping_method label,
.woocommerce-shipping-destination {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

#shipping_method input[type='radio'] {
  appearance: none;
  flex: 0 0 12px;
  height: 12px;
  margin: 0;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
}

#shipping_method input[type='radio']:checked { background: var(--ink); }

.woocommerce-shipping-destination {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

/* Галочка «інша адреса доставки» стоїть над полями, і підпис до неї
   мусить читатися як питання, а не як заголовок колонки. */
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label.checkbox {
  display: inline-flex;
  gap: 12px;
  align-items: baseline;
}

/* Назва позиції в огляді замовлення читається зліва, як і заголовок
   колонки над нею; праворуч вирівнюються тільки суми. */
.woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout-review-order-table th.product-name { text-align: left; }

/* ---------- вибір способу оплати ---------- */

.woocommerce-checkout-payment li label {
  display: inline-flex;
  gap: 12px;
  align-items: baseline;
  cursor: pointer;
}

.woocommerce-checkout-payment input[type='radio'] {
  appearance: none;
  flex: 0 0 12px;
  height: 12px;
  margin: 0;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--ease);
}

.woocommerce-checkout-payment input[type='radio']:checked { background: var(--ink); }
.woocommerce-checkout-payment input[type='radio']:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Пояснення способу оплати — звичайний текст, а не підпис врозрядку. */
.woocommerce-checkout-payment .payment_box p {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
}

.woocommerce-checkout-payment .payment_box p:last-child { margin-bottom: 0; }

/* Те, що людина прочитає після оформлення: як саме до неї прийде
   посилання на оплату або рахунок. */
.thanks__instructions {
  max-width: 52ch;
  margin: 0 0 48px;
  padding: 24px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

.thanks__instructions p { margin: 0 0 12px; }
.thanks__instructions p:last-child { margin-bottom: 0; }

/* Рядок про мито стоїть над підсумком і має читатись, а не губитись. */
.checkout__customs {
  max-width: 560px;
  margin: 0 0 24px auto;
  line-height: 1.6;
}

/* ---------- згода на лічильник ---------- */

/* Смуга стоїть над липкою смугою покупки, але нижче за шухляди:
   вона важлива рівно один раз і не має закривати роботу. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--bg);
  border-top: 1px solid var(--hair-inv);
}

.consent[hidden] { display: none; }

.consent__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
}

.consent__text {
  flex: 1 1 380px;
  margin: 0;
  color: var(--bg);
  font-size: 14px;
}

.consent__text a { color: var(--bg); }

.consent__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Обидві кнопки однакового розміру: «відмовитись» має бути так само
   легко натиснути, як «дозволити», інакше це не вибір. */
.consent__buttons .btn {
  padding: 12px 24px;
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}

.consent__buttons .btn--ghost {
  background: transparent;
  color: var(--bg);
  border-color: var(--bg);
}

.consent__buttons .btn:hover {
  background: transparent;
  color: var(--bg);
}

.consent__buttons .btn--ghost:hover {
  background: var(--bg);
  color: var(--ink);
}

@media (max-width: 767px) {
  .consent__inner { padding: 16px var(--gutter); }
  .consent__buttons { width: 100%; }
  .consent__buttons .btn { flex: 1 1 auto; }
}

/* ---------- логотип у шапці ---------- */

/* Більший приблизно в 1,7 раза: 32 → 54 px. Разом із ним підростає
   і відступ, інакше марка впирається в межу смуги. */
/* width: auto — інакше браузер бере ширину з атрибута й сплющує знак. */
.site-header__logo img { height: 54px; width: auto; }
.site-header__inner { padding-top: 20px; padding-bottom: 20px; }

/* Липка шапка стала вищою — якір «до вмісту» має лишати під неї місце. */
#main { scroll-margin-top: 120px; }

/* На телефоні 26 → 44 px: логотип помітний, але меню поруч із ним
   усе ще вміщається в один рядок. */
@media (max-width: 767px) {
  .site-header__logo img { height: 44px; }
  .site-header__inner { padding-top: 14px; padding-bottom: 14px; }
}

/* ---------- правки за аудитом ---------- */

/* Контраст підписів не дотягував до 4.5:1 — на світлому тлі дрібний
   текст врозрядку читався гірше, ніж здавалось. */
:root { --muted: #4F4A42; }

/* Рядок довіри під кнопкою оформлення. */
.checkout__trust {
  max-width: 560px;
  margin: 16px 0 0 auto;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 12px;
}

/* Галочка «подарунок» і «інша адреса» лишались без доступного імені —
   у дереві доступності вони звалися просто «checkbox 1». */
.gift input,
.woocommerce-form__input-checkbox { accent-color: var(--ink); }

/* ---------- дуже вузькі екрани ---------- */

/* На 320 px чотири пункти меню поруч із логотипом уже не вміщались
   і переносились другим рядком. Тут логотип трохи менший, а відступи
   між пунктами — мінімальні. */
@media (max-width: 380px) {
  .site-header__logo img { height: 34px; }
  .site-nav { gap: 10px; }
  .site-nav a,
  .site-nav button { font-size: 10px; letter-spacing: 0.06em; }
  .site-header__inner { gap: 10px; }
}

/* ---------- розміри кнопками ---------- */

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.swatch {
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 12px 16px;
  min-width: 48px;
  transition: border-color var(--ease), background-color var(--ease), color var(--ease);
}

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

.swatch[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* Недоступний розмір видно, але взяти його не можна — це чесніше,
   ніж прибрати його зі списку й лишити людину гадати. */
.swatch:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Кнопка «Checkout» у рядку «додано в кошик». */
.woocommerce-message .checkout-now { padding: 10px 20px; }

/* ---------- спільний текст під килимом ---------- */

.rug-note__body { max-width: 52ch; }
.rug-note__body p { margin: 0 0 16px; }
.rug-note__body p:last-child { margin-bottom: 0; }

/* ---------- сітка колекції: по двоє ---------- */

/* На сторінці категорії речі стоять по двоє, як і килими: більший кадр
   показує принт, заради якого футболку й беруть. На головній сітка
   лишається щільною — там це перелік, а не розглядання. */
@media (min-width: 900px) {
  .archive__grid.grid--wear,
  .archive__grid.grid--cross {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(32px, 5vw, 64px);
  }
}

/* ---------- тираж ---------- */

.edition__note { margin: 0 0 32px; max-width: 64ch; }

.edition__table {
  display: flex;
  flex-direction: column;
  max-width: 560px;
}

/* Рядок — кнопка: уся драбина клікабельна, а не лише номери вгорі. */
.edition__row {
  display: grid;
  grid-template-columns: 5.5em 1fr auto;
  gap: 16px;
  align-items: baseline;
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px solid var(--hair);
  padding: 14px 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--ink);
  transition: background-color var(--ease);
}

.edition__row--last { border-bottom: 1px solid var(--hair); }

.edition__row:hover:not(:disabled) { background: var(--bg-deep); }

.edition__price {
  font-size: 16px;
  font-weight: 400;
}

.edition__state {
  color: var(--edition);
  font-size: 11px;
}

/* Продана копія лишається в таблиці: драбина читається тільки цілою,
   і видно, що попередні вже розібрали. */
.edition__row--gone {
  cursor: default;
  color: var(--muted);
}

.edition__row--gone .edition__price { text-decoration: line-through; }
.edition__row--gone .edition__state { color: var(--muted); }

@media (max-width: 600px) {
  .edition__row { grid-template-columns: 4.5em 1fr; }
  .edition__state { grid-column: 2; }
}

/* ===================== шапка галерейного магазину ===================== */

/* Шапка перестає бути прозорою й липкою: у щільному магазині вона
   має просто стояти вгорі й не забирати на себе уваги. */
.site-header {
  position: static;
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
}

.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

/* Знак марки по центру — для цього сітка з трьох колонок, а не flex:
   лише так центр лишається центром незалежно від довжини меню. */
.site-header__logo {
  grid-column: 2;
  justify-self: center;
  display: block;
  padding: 0;
}

.site-header__logo img {
  display: block;
  height: 34px;
  width: auto;
}

.site-nav--left { grid-column: 1; justify-self: start; }

.site-header__tools {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-nav--left a,
.site-header__tools a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  padding: 0;
  transition: opacity var(--ease);
}

.site-nav--left a:hover,
.site-header__tools a:hover { opacity: 0.55; border: 0; }

.site-nav--left {
  display: flex;
  gap: 22px;
  flex-wrap: nowrap;
}

.site-nav__cart { color: var(--ink); }

.wordmark {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Шапка більше не липка, тож запас під неї не потрібен. */
#main { scroll-margin-top: 24px; }

@media (max-width: 900px) {
  /* На вузькому екрані знак іде ліворуч, а меню під ним: три колонки
     тут перетворюються на кашу з переносів. */
  .site-header__inner {
    grid-template-columns: 1fr auto;
    gap: 12px 16px;
  }
  .site-header__logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .site-header__tools { grid-column: 2; grid-row: 1; }
  .site-nav--left {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 16px;
    overflow-x: auto;
  }
  .site-nav--left a { font-size: 11px; white-space: nowrap; }
  .site-header__logo img { height: 28px; }
}

/* =========================================================================
   Головна: обкладинка, кола розділів, картка, смуга умов

   Все нижче свідомо повторює розкладку галерейних магазинів мистецтва:
   кадр на весь екран із чорною плашкою, ряд круглих розділів, сітка
   карток по чотири й темна смуга умов над підвалом. Це не мода — так
   людина, яка вперше бачить марку, за один екран дізнається, що саме
   продається і чому це коштує стільки.
   ========================================================================= */

/* ---------- обкладинка ---------- */

.hero {
  position: relative;
  padding-bottom: 0;
  background: var(--bg-deep);
}

.hero__media {
  position: relative;
  width: 100%;
  height: clamp(460px, 82svh, 860px);
  overflow: hidden;
}

.hero__media img,
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Плашка поверх кадру, а не під ним: фото тут не ілюстрація до слів,
   а сама обіцянка, і слова мають лежати на ньому. */
.hero__plate {
  position: absolute;
  left: 50%;
  bottom: clamp(40px, 9vw, 96px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(92vw, 820px);
  text-align: center;
}

.hero__kicker {
  padding: 6px 14px;
  background: var(--ink);
  color: var(--bg);
  font-size: 10px;
  letter-spacing: 0.2em;
}

.hero__line {
  margin: 0;
  padding: 10px 22px;
  background: var(--ink);
  color: var(--bg);
  font-size: clamp(26px, 5vw, 56px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Кнопка на обкладинці світла, а не чорна: кадр під нею буває темним,
   і чорна кнопка на ньому просто зникає. */
.btn--hero {
  min-width: 190px;
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}

.btn--hero:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* Широка кнопка під сіткою: другий вихід у розділ для тих, хто догортав
   до кінця ряду й не побачив посилання вгорі. */
.btn--wide {
  display: flex;
  width: min(100%, 420px);
  margin: clamp(32px, 4vw, 48px) auto 0;
}

/* ---------- кола розділів ---------- */

.dials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  padding-top: clamp(32px, 4vw, 48px);
  padding-bottom: clamp(8px, 2vw, 16px);
}

.dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.dial__ring {
  display: block;
  width: clamp(72px, 9vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-deep);
  border: 1px solid var(--hair);
}

.dial__ring img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease);
}

.dial:hover .dial__ring img { transform: scale(1.06); }

.dial__label {
  font-size: 10px;
  letter-spacing: 0.14em;
}

/* ---------- картка в сітці ---------- */

/* Рамка: кадр лежить на світлому полі, як робота на стіні галереї.
   Без неї килими різних пропорцій вишиковуються драбиною. */
.card__frame {
  position: relative;
  background: var(--bg-deep);
  overflow: hidden;
}

.card__frame .media { background: transparent; }

.card__frame .media img {
  transition: transform 400ms ease;
}

.card:hover .card__frame .media img { transform: scale(1.03); }

.card__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 10px;
  background: var(--ink);
  color: var(--bg);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.card .item-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.card__price {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
}

/* Зелений тут один на весь сайт і значить одне: скільки таких буде. */
.card__edition {
  font-size: 13px;
  font-weight: 400;
  color: var(--edition);
}

.card__note {
  font-size: 12px;
  font-weight: 300;
  color: var(--muted);
}

.card--gone .card__frame .media img { opacity: 0.4; }

/* ---------- сітка по чотири ---------- */

/* auto-fit із мінімальною шириною давав три широкі картки на одному
   екрані й чотири вузькі на іншому. Тут число колонок задане прямо:
   ряд має читатись однаково на всіх моніторах. */
.grid--rugs,
.grid--wear,
.grid--cross {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 36px) clamp(14px, 1.6vw, 24px);
}

/* Килими — по двоє в ряд, а не по четверо. Футболка в сітці по чотири
   читається, бо малюнок на ній і сам дрібний, а килим — це робота два
   на три метри: у вузькій картці від неї лишається марка, і зрозуміти,
   що там намальовано, неможливо. */
@media (min-width: 860px) {
  .grid--rugs { grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 56px); }
  .grid--wear,
  .grid--cross { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- смуга умов ---------- */

.promise {
  background: var(--ink);
  color: var(--bg);
}

.promise__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px clamp(16px, 3vw, 48px);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 40px) var(--gutter);
}

@media (min-width: 860px) {
  .promise__inner { grid-template-columns: repeat(4, 1fr); }
}

.promise__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.promise__mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--bg);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.promise__words {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.promise__words .cap { font-size: 10px; }

.promise__note {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 600px) {
  .hero__plate { width: calc(100% - 32px); gap: 10px; }
  .hero__line { font-size: 22px; padding: 8px 14px; }
  .dials { gap: 18px; }
  .dial__ring { width: 64px; }
}

/* ---------- долари в таблиці тиражу ---------- */

/* Долар стоїть під євро й дрібніше: він довідковий, а платіж — у євро,
   і розмір шрифту має сказати це раніше за підпис унизу. */
.edition__price { display: flex; flex-direction: column; gap: 2px; }

.edition__usd {
  font-size: 12px;
  font-weight: 300;
  color: var(--muted);
}

.edition__fx {
  margin-top: 16px;
  font-size: 10px;
}