/* ==========================================================================
   responsive.css — ทุกโหมด/ขนาดหน้าจอ (tablet 768 · desktop 1025 · shoop)
   โหลดหลัง app.css / pages.css / home.css เสมอ
   ========================================================================== */

:root {
  --bp-tablet: 768px;
  --bp-desktop: 1025px;
  --bp-wide: 1440px;
  --viewport-height: 100vh;
  --viewport-height: 100dvh;
  color-scheme: light;
}

/* Drawer / overlay — ความสูงตาม viewport จริง (iOS Safari) */
.category-drawer-root.is-open {
  height: var(--viewport-height, 100dvh);
  min-height: var(--viewport-height, 100dvh);
}

.category-drawer {
  height: var(--viewport-height, 100%);
  max-height: var(--viewport-height, 100%);
}

/* กันสื่อล้น container */
img,
video,
svg {
  max-width: 100%;
}

/* ── Tablet (768–1024) ───────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .tec-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .category-browse-layout {
    gap: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .category-product-grid {
    column-gap: 1.25rem;
    row-gap: 1.75rem;
  }

  .product-detail__layout {
    gap: 2.5rem;
  }

  .product-detail__sku {
    font-size: 1.75rem;
  }

  .help-section {
    padding: 1.5rem;
  }

  .review-form,
  .contact-card {
    padding: 1.5rem;
  }

  .shop-footer {
    padding: 2.5rem 1.5rem;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── จอเล็กมาก (<375px) ─────────────────────────────────────────────────── */
@media (max-width: 374px) {
  .tec-container {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .header-utility-nav--mobile-bar .header-utility-nav__link,
  .header-utility-nav--mobile-bar .category-bar-toggle {
    font-size: 0.6875rem;
    padding: 0.2rem 0.0625rem;
    line-height: 1.25;
  }

  .shop-header-brand-link__text {
    max-width: 8rem;
    font-size: 0.9375rem;
  }

  .review-marquee__card {
    min-width: 8rem;
    padding: 0.75rem 0.875rem;
  }

  .filter-chip {
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
  }

  .category-pagination__btn {
    min-width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }
}

/* ── โทรศัพท์แนวนอน (landscape) ─────────────────────────────────────────── */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {
  .header-mobile-toolbar {
    padding-bottom: 0.25rem;
  }

  .header-utility-nav--mobile-bar .header-utility-nav__link,
  .header-utility-nav--mobile-bar .category-bar-toggle {
    min-height: 2.25rem;
    font-size: 0.75rem;
  }

  .home-hero {
    margin-top: 0.25rem;
    margin-bottom: 0.125rem;
  }

  .hero-carousel__nav {
    height: 2rem;
    width: 2rem;
  }

  .empty-state {
    padding: 2.5rem 1rem;
  }
}

/* ── จอกว้าง (≥1440px) ─────────────────────────────────────────────────── */
@media (min-width: 1440px) {
  :root {
    --content-max: 1320px;
  }
}

/* ── หน้าจอสูงมาก (desktop แนวตั้ง) ─────────────────────────────────────── */
@media (min-width: 1025px) and (min-height: 900px) {
  .category-browse-sidebar__list {
    max-height: min(56vh, 520px);
  }
}

/* ── Touch / coarse pointer ─────────────────────────────────────────────── */
@media (pointer: coarse) {
  .shop-icon-btn,
  .category-drawer__close,
  .category-drawer__row,
  .category-browse-sidebar__link,
  .category-browse-sidebar__section-toggle,
  .hero-carousel__nav,
  .category-pagination__btn,
  .product-row-scroll-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .filter-chip,
  .shop-category-size-chip {
    min-height: 36px;
  }

  .shop-category-btn,
  .shop-login-btn {
    min-height: 44px;
  }
}

/* ไม่ใช้ hover บนจอสัมผัส */
@media (hover: none) {
  .site-social-links__btn:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .product-grid-card:hover .product-card__img {
    transform: none;
  }

  .product-save-image-btn:hover {
    transform: none;
  }
}

/* ── prefers-reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .review-marquee__track--loop,
  .hero-carousel__track {
    animation: none !important;
    transition: none !important;
  }

  .skeleton {
    animation: none;
    background: #f0f0f0;
  }
}

/* ── prefers-contrast ───────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
  .shop-nav-link--active,
  .header-utility-nav__link--active,
  .category-browse-sidebar__link--active {
    text-decoration-thickness: 3px;
  }

  .filter-chip,
  .shop-category-size-chip,
  .review-marquee__card,
  .help-section,
  .product-detail__panel {
    border-color: rgba(0, 0, 0, 0.35);
  }

  .shop-header {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  }
}

/* ── forced-colors (Windows High Contrast) ────────────────────────────────── */
@media (forced-colors: active) {
  .shop-category-size-chip--active,
  .filter-chip--active,
  .category-pagination__page--active {
    border: 2px solid CanvasText;
    background: CanvasText;
    color: Canvas;
  }

  .shop-header {
    border-bottom: 1px solid CanvasText;
  }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  .category-drawer-root,
  .shop-header,
  .shop-footer,
  .hero-carousel__nav,
  .hero-carousel__dots-wrap,
  .product-row-scroll-btn,
  .mobile-filter-bar,
  .header-category-bar,
  .header-mobile-toolbar,
  .shop-header__utility-desktop {
    display: none !important;
  }

  html,
  body {
    overflow: visible !important;
    height: auto !important;
    position: static !important;
  }

  body.is-scroll-locked {
    position: static !important;
  }

  .page-wrap {
    min-height: auto;
    display: block;
  }

  main {
    padding: 0;
  }

  .help-section,
  .product-detail__panel,
  .review-marquee__card {
    box-shadow: none;
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
    word-break: break-all;
  }

  a[href^="#"]::after,
  a[href^="javascript"]::after,
  a[href^="mailto"]::after,
  a[href^="tel"]::after {
    content: "";
  }
}