/* =========================================
   RESPONSIVE — Tablet (≤1024px)
   ========================================= */
@media (max-width: 1024px) {

  :root {
    --gutter: 20px;
  }

  /* Header */
  .site-nav { display: none; }
  .burger { display: flex; }
  .lang-switcher { display: none; }

  /* Hero */
  .hero { min-height: 80vh; }

  /* Categories — tablet */
  .home-categories { padding: 100px 0 100px; }
  .home-categories .section-title { font-size: 36px; margin-bottom: 32px; }
  .categories-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .category-card__label { font-size: 18px; padding: 16px 18px; }

  /* About */
  .home-about { border-radius: 0 0 28px 28px; }
  .home-about__inner { grid-template-columns: 1fr; gap: 48px; }
  .home-about__image { aspect-ratio: 16/9; order: -1; }

  /* Products */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Why */
  .why-grid { grid-template-columns: repeat(2, 1fr); }

  /* Reviews — widths set by JS */

  /* Footer */
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer { border-radius: 24px 24px 0 0; }

  /* Catalog */
  .archive-catalog__inner { grid-template-columns: 220px 1fr; gap: 28px; }

  /* Single product */
  .single-product-layout { gap: 40px; }

  /* Cart */
  .cart-page__inner { grid-template-columns: 1fr 320px; gap: 28px; }

  /* Checkout */
  .checkout-layout { grid-template-columns: 1fr 320px; gap: 20px; }
  .co-card { padding: 22px 24px; }

  /* Account */
  .my-account-layout { grid-template-columns: 200px 1fr; gap: 28px; }
}

/* =========================================
   RESPONSIVE — Mobile (≤768px)
   ========================================= */
@media (max-width: 768px) {

  :root {
    --gutter: 16px;
  }

  /* Mobile overflow guard — prevent any element from causing horizontal scroll/shift */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
    width: 100%;
  }
  body { position: relative; }
  .container,
  .single-product-page,
  .archive-catalog,
  .cart-page,
  .checkout-layout,
  .my-account-layout,
  .static-page,
  .about-page {
    max-width: 100%;
    overflow-x: clip;
  }
  img, video, iframe, table { max-width: 100%; height: auto; }
  /* Wrap only at spaces / hyphens; break long unbroken strings only as last resort.
     Avoid `word-break: break-word` — it shatters short words like "Головна" mid-letter. */
  .woocommerce-breadcrumb,
  .page-breadcrumbs,
  .product-info__title,
  .product-card__title,
  h1, h2, h3, h4, p {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
  }
  /* Compact breadcrumbs on mobile: no wrapping, horizontal scroll if too long */
  .page-breadcrumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-breadcrumbs::-webkit-scrollbar { display: none; }
  .woocommerce-breadcrumb {
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    display: block;
  }

  /* Typography */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }

  .section { padding: 56px 0; }

  /* Header */
  .site-header { border-radius: 0 0 20px 20px; }
  .site-header__inner { gap: 16px; height: 64px; align-items: center; justify-content: space-between; }
  .site-header__logo-img { width: 60px; height: 20px; display: block; }
  .header-action-btn:not(.header-cart-btn) { display: none; }

  /* Mobile cart bar — hidden, cart icon in header is enough */
  .mobile-cart-bar { display: none !important; }
  body { padding-bottom: 0; }

  /* Hero */
  .hero { height: auto; min-height: calc(100dvh - 64px); align-items: flex-start; padding: 60px 0 120px; }
  .hero__content { padding: 20px 0; text-align: center; width: 100%; }
  .hero__logo-img { width: clamp(240px, 80vw, 420px); height: auto; }
  .hero__description { margin-left: auto; margin-right: auto; margin-top: 24px; }
  .hero__actions { flex-direction: column; align-items: center; width: 100%; margin-top: 24px; }
  .hero__actions .btn { width: 100%; max-width: 280px; height: 47px; }
  .promo-ticker { bottom: 24px; }

  /* Categories — mobile */
  .home-categories { border-radius: 0; padding: 60px 0 60px; }
  .home-categories .section-title { font-size: 28px; margin-bottom: 24px; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .category-card__label { font-size: 15px; padding: 12px 14px; }

  /* Products grid */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Why us */
  .why-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .why-card { padding: 24px 18px; }

  /* Reviews — widths set by JS */
  .reviews-track { gap: 16px; }

  /* Subscribe popup — mobile fit */
  .subscribe-popup { padding: 20px 16px; }
  .subscribe-popup__box {
    padding: 44px 26px 32px;
    border-radius: 22px;
    max-width: 420px;
  }
  .subscribe-popup__close {
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 22px;
    border-radius: 50%;
    background: rgba(38,33,26,0.06);
    opacity: 0.7;
  }
  .subscribe-popup__title {
    font-size: 26px;
    line-height: 1.15;
    margin: 0 0 10px;
  }
  .subscribe-popup__text {
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 22px;
  }
  .subscribe-popup__row { flex-direction: column; gap: 10px; }
  .subscribe-popup__input,
  .subscribe-popup__btn {
    width: 100%;
    height: 56px;
    min-height: 56px;
    line-height: 56px;
    padding: 0 22px;
    border-radius: 14px;
    font-size: 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .subscribe-popup__input { line-height: 1; }
  .subscribe-popup__success-text { font-size: 15px; }
  .subscribe-popup__coupon {
    font-size: 24px;
    letter-spacing: 2px;
    padding: 11px 22px;
  }

  /* FAQ — mobile */
  .home-faq { padding-bottom: 80px; }
  .home-faq .section-title { font-size: 28px; margin-bottom: 24px; }
  .home-faq .accordion__item { margin-bottom: 12px; }
  .home-faq .accordion__trigger { padding: 14px 16px; min-height: auto; font-size: 15px; }

  /* Home catalog head */
  .home-catalog__head { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Filters horizontal scroll */
  .catalog-filters__inner { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }

  /* Footer */
  .site-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__brand { grid-column: auto; }
  .site-footer__bottom-inner { flex-direction: column; gap: 12px; text-align: center; }

  /* Archive */
  .archive-catalog__inner { grid-template-columns: 1fr; }
  .catalog-sidebar { position: static; display: none; }
  .catalog-sidebar.is-open { display: block; }

  /* Filter toggle button (mobile) */
  .filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  /* Single product */
  .single-product-layout { grid-template-columns: 1fr; gap: 32px; }
  .product-gallery__thumbs { gap: 8px; }
  .product-gallery__thumb { width: 68px; height: 68px; }

  /* Cart — mobile card layout */
  .cart-page__inner { grid-template-columns: 1fr; gap: 20px; }
  .cart-totals-box { position: static; }

  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table thead { display: none; }
  .cart-table tr {
    position: relative;
    padding: 14px 14px 14px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 14px;
    align-items: center;
  }
  .cart-table td { padding: 0; border: none; text-align: left !important; }

  /* Remove X — absolute top-right */
  .cart-table td.col-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: auto;
    z-index: 2;
  }
  .cart-table .cart-remove-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    color: var(--color-accent-dim);
  }
  .cart-table .cart-remove-btn:hover { background: var(--color-bg-light); color: var(--color-accent); }

  /* Image + Title row — image left, title fills the rest (with right padding to clear X) */
  .cart-table td:nth-child(2) {
    grid-column: 1 / 3;
    padding-right: 36px;
  }
  .cart-item { gap: 14px; align-items: center; }
  .cart-item__img { width: 76px; height: 76px; flex-shrink: 0; }
  .cart-item__name { font-size: 14px; line-height: 1.4; }

  /* Hide unit price on mobile — line total is what matters */
  .cart-table .col-price { display: none; }

  /* Bottom row: qty controls left, line total right */
  .cart-table .col-qty   { grid-column: 1 / 2; justify-self: start; }
  .cart-table .col-total {
    grid-column: 2 / 3;
    justify-self: end;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-accent);
    text-align: right !important;
  }

  /* Checkout */
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
  .co-row-2 { grid-template-columns: 1fr; }
  .co-card { padding: 20px; }
  .co-summary { padding: 20px; }

  /* Account */
  .my-account-layout { grid-template-columns: 1fr; }
  .account-nav { position: static; }
  .account-nav { display: flex; overflow-x: auto; gap: 4px; padding: 12px; }
  .account-nav__item { white-space: nowrap; flex-shrink: 0; }

  /* Mini cart */
  .mini-cart-drawer { width: 100%; }
}

/* =========================================
   RESPONSIVE — Small Mobile (≤480px)
   ========================================= */
@media (max-width: 480px) {

  .categories-grid { grid-template-columns: 1fr 1fr; }

  .products-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .product-card__info { padding: 12px; }

  .why-grid { grid-template-columns: 1fr; }

  .hero__brand { font-size: 2.4rem; }

  /* Accordion */
  .accordion__trigger { padding: 16px 20px; }
  .accordion__body-inner { padding: 4px 20px 16px; }

  /* Buttons */
  .btn { padding: 12px 22px; font-size: 14px; }

  /* Subscribe popup — extra tight */
  .subscribe-popup { padding: 14px 12px; }
  .subscribe-popup__box { padding: 40px 20px 28px; border-radius: 20px; }
  .subscribe-popup__title { font-size: 22px; }
  .subscribe-popup__text { font-size: 13.5px; margin: 0 0 18px; }
}

/* =========================================
   UTILITIES — only show on mobile
   ========================================= */
.show-mobile { display: none; }
.hide-mobile { display: block; }

@media (max-width: 768px) {
  .show-mobile { display: block; }
  .hide-mobile { display: none; }
}

/* =========================================
   FILTER MOBILE DRAWER
   ========================================= */
@media (max-width: 768px) {
  .catalog-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 350;
    padding: 24px 20px;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  }

  .catalog-sidebar.is-open {
    display: block;
    transform: translateY(0);
  }

  .filter-toggle-btn { display: flex; }
}

@media (min-width: 769px) {
  .filter-toggle-btn { display: none; }
}