/* ============================================================
   MRАГРИ — RESPONSIVE CSS
   Mobile-first breakpoints: xs (320), sm (480), md (768), lg (1024), xl (1280), 2xl (1440)
   ============================================================ */

/* ============================================================
   XL — 1280px and above (default, handled in main.css)
   ============================================================ */

/* ============================================================
   LARGE — max 1280px
   ============================================================ */
@media (max-width: 1280px) {
  :root {
    --text-hero: clamp(2.2rem, 5vw, 4rem);
    --container-xl: 1100px;
  }

  .hero__content        { gap: var(--space-10); }
  .footer-main__grid    { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-main__grid .footer-widget-col:last-child { grid-column: 1 / -1; }

  .products-grid        { grid-template-columns: repeat(3, 1fr); }
  .related.products ul.products,
  .upsells.products ul.products { grid-template-columns: repeat(3, 1fr); }

  .woocommerce-checkout { grid-template-columns: 1fr 360px; }
}

/* ============================================================
   LARGE — max 1024px
   ============================================================ */
@media (max-width: 1024px) {

  /* Hide primary nav, show hamburger */
  .site-header__nav    { display: none; }
  .hamburger           { display: flex; }
  .header-cta          { display: none; }

  .site-header__inner  { grid-template-columns: auto 1fr; }

  /* Hero */
  .hero__content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-12);
    padding-top: calc(var(--header-height) + var(--space-8));
  }

  .hero__text           { max-width: 100%; margin-inline: auto; }
  .hero__desc           { max-width: 100%; }
  .hero__actions        { justify-content: center; }
  .hero__stats          { justify-content: center; }
  .hero__visual         { order: -1; }
  .hero__main-image     { max-width: 480px; margin-inline: auto; }
  .hero__float-card--1,
  .hero__float-card--3  { display: none; }

  /* Features */
  .features-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .features-strip__item { border-right: none; border-bottom: 1px solid var(--clr-border); }
  .features-strip__item:last-child { border-bottom: none; }

  /* Categories */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .categories-grid .category-card--featured {
    grid-column: span 2;
  }

  /* Products */
  .products-grid        { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

  /* About */
  .about-strip__grid    { grid-template-columns: 1fr; }
  .about-strip__media   { order: -1; }

  /* Stats */
  .stats-grid           { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

  /* Footer */
  .footer-newsletter__inner { grid-template-columns: 1fr; }
  .footer-main__grid    { grid-template-columns: 1fr 1fr; }
  .footer-trust__grid   { grid-template-columns: repeat(2, 1fr); }
  .footer-trust__item:nth-child(2) { border-right: none; }

  /* Shop */
  .shop-layout          { grid-template-columns: 1fr; }
  .shop-sidebar         { position: static; max-height: none; }

  /* Single product */
  .single-product-layout { grid-template-columns: 1fr; }
  .woocommerce-product-gallery { position: static; }

  /* Cart */
  .cart-page-layout     { grid-template-columns: 1fr; }
  .cart-totals-box      { position: static; }

  /* Checkout */
  .woocommerce-checkout { grid-template-columns: 1fr; }
  #order_review         { position: static; }

  /* Account */
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-account .woocommerce-MyAccount-navigation { position: static; }

  /* Related */
  .related.products ul.products,
  .upsells.products ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   TABLET — max 768px
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --header-height: var(--header-height-sm);
    --space-20: 3.5rem;
    --space-24: 4rem;
    --space-32: 5rem;
  }

  /* Typography scale down */
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }

  .section-title { font-size: var(--text-2xl); }

  /* Container padding */
  .container { padding-inline: var(--space-4); }

  /* Top bar */
  .top-bar__contact { display: none; }
  .top-bar__inner   { justify-content: center; }

  /* Header actions — hide some */
  .header-action-btn--account { display: none; }

  /* Hero */
  .hero { min-height: auto; }
  .hero__content { padding-block: var(--space-20) var(--space-16); gap: var(--space-8); }
  .hero__float-card { display: none; }
  .hero__stats      { flex-wrap: wrap; gap: var(--space-6); }

  /* Features */
  .features-strip__grid { grid-template-columns: 1fr 1fr; }
  .features-strip__item { padding: var(--space-4); }

  /* Categories */
  .categories-grid              { grid-template-columns: 1fr 1fr; }
  .category-card__img           { height: 200px; }
  .categories-grid .category-card--featured .category-card__img { min-height: 280px; }

  /* Products */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .products-grid--3col { grid-template-columns: repeat(2, 1fr); }
  .products-grid--4col { grid-template-columns: repeat(2, 1fr); }

  /* Products list view */
  .products-list .product-card {
    flex-direction: column;
    height: auto;
  }
  .products-list .product-card__image-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
  }
  .products-list .product-card__body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* About */
  .about-strip__main-img { height: 320px; }
  .about-strip__experience-badge { display: none; }

  /* Testimonials swiper — 1 slide */
  .testimonials-swiper .swiper-slide { width: 100% !important; }

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

  /* Newsletter */
  .footer-newsletter__content { flex-direction: column; }
  .footer-newsletter__fields  { flex-direction: column; }
  .footer-newsletter__btn     { width: 100%; }

  /* Footer main */
  .footer-main__grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-8); }
  .footer-brand      { grid-column: 1 / -1; }

  /* Footer trust */
  .footer-trust__grid { grid-template-columns: 1fr 1fr; }
  .footer-trust__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }

  /* Footer bottom */
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .footer-payment { order: -1; }

  /* Shop toolbar */
  .shop-toolbar { flex-direction: column; align-items: flex-start; }

  /* Cart drawer */
  :root { --cart-drawer-width: 100vw; }

  /* Quick view modal */
  .quick-view-modal { width: 100%; max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .quick-view-modal__body { grid-template-columns: 1fr; }

  /* Checkout progress — simplified */
  .checkout-progress { gap: var(--space-2); }
  .checkout-progress__step span:not(.checkout-progress__num) { display: none; }
  .checkout-progress__line { width: 40px; }

  /* Sticky ATC bar */
  .sticky-atc-bar { padding: var(--space-3) var(--space-4); }
  .sticky-atc-bar__info .sticky-atc-bar__img { display: none; }

  /* Blog grid */
  .blog-grid { grid-template-columns: 1fr 1fr !important; }

  /* My Account — nav as horizontal tabs */
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li { flex: none; }
}

/* ============================================================
   MOBILE — max 480px
   ============================================================ */
@media (max-width: 480px) {

  .container { padding-inline: var(--space-4); }

  /* Top bar — hide everything except promo */
  .top-bar__social { display: none; }

  /* Header */
  .site-logo-img, .custom-logo { height: 40px; }
  .header-action-btn--account,
  .header-action-btn--wishlist { display: none; }

  /* Hero */
  :root { --text-hero: clamp(2rem, 8vw, 2.8rem); }
  .hero__content { padding-block: var(--space-16) var(--space-12); }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__actions      { flex-direction: column; }
  .hero__stats        { gap: var(--space-4); }

  /* Features */
  .features-strip__grid { grid-template-columns: 1fr; }
  .features-strip__item { border-right: none; border-bottom: 1px solid var(--clr-border); }

  /* Categories */
  .categories-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .categories-grid .category-card--featured {
    grid-column: span 1;
  }

  /* Products */
  .products-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .products-grid--3col { grid-template-columns: 1fr 1fr; }

  /* Product card — compact */
  .product-card__body { padding: var(--space-3); }
  .product-card__title { font-size: var(--text-sm); }
  .product-card__price-current { font-size: var(--text-lg); }
  .product-card__quick-add { font-size: var(--text-xs); }
  .product-card__actions { display: none; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card__num { font-size: var(--text-3xl); }

  /* Footer main */
  .footer-main__grid { grid-template-columns: 1fr; }
  .footer-trust__grid { grid-template-columns: 1fr; }
  .footer-trust__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr !important; }

  /* WC checkout form */
  .woocommerce-checkout { padding-inline: 0; }
  .woocommerce-billing-fields,
  .woocommerce-shipping-fields { padding: var(--space-5); }

  /* Account orders table — scroll horizontally */
  .woocommerce-orders-table { display: block; overflow-x: auto; }

  /* 404 */
  .error-404-page__number { font-size: 6rem; }

  /* Search overlay */
  .search-overlay__label { font-size: var(--text-xl); }

  /* Back to top */
  #back-to-top { bottom: var(--space-4); right: var(--space-4); }

  /* Toast */
  #toast-container { left: var(--space-4); right: var(--space-4); transform: none; }
  .toast { width: 100%; justify-content: flex-start; }

  /* Quick view modal */
  .modal-overlay { align-items: flex-end; }
  .modal { border-radius: var(--radius-xl) var(--radius-xl) 0 0; width: 100%; }
}

/* ============================================================
   XS — max 360px
   ============================================================ */
@media (max-width: 360px) {
  :root {
    --text-hero: 1.9rem;
  }

  .products-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .product-card__body { padding: var(--space-2) var(--space-3) var(--space-3); }

  .hero__stats { flex-direction: column; align-items: center; gap: var(--space-3); }
  .stats-grid  { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .site-header,
  .site-footer,
  .top-bar,
  #back-to-top,
  .cursor-dot,
  .cursor-ring,
  #page-loader,
  .search-overlay,
  .cart-drawer,
  .mobile-menu,
  .sticky-atc-bar { display: none !important; }

  body { font-size: 12pt; color: black; }
  a    { color: black; }
  img  { max-width: 100%; }

  .site-content { padding-top: 0 !important; }
}

/* ============================================================
   DARK MODE SUPPORT (follows system preference)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  /* Only if body doesn't have .force-light class */
  body:not(.force-light) {
    --clr-bg:      #0D1A0E;
    --clr-surface: #122014;
    --clr-surface-2: #182B1A;
    --clr-border:  rgba(107,175,110,0.15);
    --clr-border-dark: rgba(107,175,110,0.25);
    --clr-text:    #E8F5E9;
    --clr-text-muted: #A5D6A7;
    --clr-text-light: #6BAF6E;
    --clr-white:   #122014;
  }
}

/* ============================================================
   HIGH CONTRAST
   ============================================================ */
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .card { border: 1px solid ButtonText; }
}

/* ============================================================
   TOUCH DEVICE OVERRIDES
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover-dependent animations on touch */
  .product-card:hover     { transform: none; }
  .product-card:hover .product-card__quick-add { transform: translateY(100%); }
  .product-card:hover .product-card__actions   { transform: translateX(50px); }
  .category-card:hover    { transform: none; }
  .category-card:hover .category-card__img { transform: none; }

  /* Larger tap targets */
  .header-action-btn,
  .cart-drawer__close,
  .mobile-menu__close { min-width: 44px; min-height: 44px; }

  .nav-menu > li > a { padding-block: var(--space-4); }

  /* Show quick-add permanently on touch */
  .product-card__quick-add { transform: translateY(0); }
}