/* Glo Little Luxury — global mobile responsiveness pass.
   Loaded last (after all page-specific stylesheets) so it can safely
   override desktop-first rules at each breakpoint without needing
   heavy specificity or !important everywhere. Covers: header/nav,
   homepage, PDP, archive, cart/checkout, account. */

/* Prevent any stray wide element from causing horizontal page scroll */
html, body { overflow-x: hidden; max-width: 100%; }

/* =======================================================
   HERO: solid background on single-column layout
   The desktop hero uses a 50/50 teal|violet hard gradient.
   When glo-home.css collapses the grid to 1fr (≤ 980px),
   the gradient still shows as a split behind full-width
   content — override to solid teal which is what the text
   column sat on at desktop anyway.
   ======================================================= */
@media (max-width: 980px) {
  .glo-hero {
    background: var(--glo-teal-deep); /* solid, drop the split */
    padding: 36px 0 20px;
  }
  .glo-hero-visual {
    height: auto;
    max-height: 420px;
    border-radius: 16px;
    overflow: hidden;
  }
  .glo-hero-visual img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    object-position: top center;
    display: block;
  }
  /* Story section visual */
  .glo-story-visual {
    height: auto;
    max-height: 320px;
    border-radius: 16px;
    overflow: hidden;
  }
  .glo-story-visual--photo img {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
    object-position: top center;
    display: block;
  }
}

/* =======================================================
   PDP GALLERY: WooCommerce FlexSlider fix on mobile
   Root cause: overflow:hidden + fixed height on individual
   slide divs conflicts with FlexSlider's slide-positioning
   mechanism on mobile. Fix: move border-radius/overflow to
   the outer figure, let slides be overflow:visible so
   FlexSlider can correctly measure and position them.
   ======================================================= */
@media (max-width: 900px) {
  /* Outer figure: provide clip + rounded corners */
  .woocommerce-product-gallery {
    overflow: hidden;
    border-radius: 14px;
  }
  /* Wrapper: give FlexSlider a floor height to measure from */
  .woocommerce-product-gallery__wrapper {
    min-height: 220px;
  }
  /* Slides: remove overflow clipping so FlexSlider can position */
  .woocommerce-product-gallery__image {
    overflow: visible !important;
    border-radius: 0 !important;
    min-height: 200px;
  }
  /* Image: natural dimensions, not fixed px */
  .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    max-height: 360px;
    min-height: 160px;
    object-fit: contain;
    display: block;
  }
  /* Thumbnail strip */
  .woocommerce-product-gallery .flex-control-thumbs {
    margin-top: 10px;
    flex-wrap: wrap;
  }
  /* PDP grid: ensure 1-column on mobile (belt + braces) */
  .glo-pdp {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
}

/* =======================================================
   TABLET — 768px
   ======================================================= */
@media (max-width: 768px) {

  /* ---- Header ---- */
  .glo-announce { font-size: 11.5px; padding: 7px 10px; line-height: 1.4; }
  .glo-header__top { padding: 12px 0; gap: 12px; }
  .glo-logo { font-size: 24px; }
  .glo-header-actions { gap: 16px; }
  .glo-header-actions .glo-hact { font-size: 11px; }
  .glo-header-actions svg { width: 18px; height: 18px; }
  .glo-nav__inner { gap: 18px; padding: 9px 0; -webkit-overflow-scrolling: touch; }
  .glo-nav__inner a { font-size: 13px; }

  /* ---- Homepage ---- */
  .glo-hero { padding: 32px 0 16px; }
  .glo-hero h1 { font-size: 30px; }
  .glo-hero p { font-size: 14px; }
  .glo-hero-visual { max-height: 320px; }
  .glo-hero-visual img { max-height: 320px; }
  .glo-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .glo-concern-grid { grid-template-columns: repeat(2, 1fr); }
  .glo-prod-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .glo-section { padding: 36px 0; }
  .glo-section-head h2 { font-size: 21px; }
  .glo-foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* ---- PDP ---- */
  .glo-pname { font-size: 22px; }
  .glo-tabs { flex-wrap: wrap; gap: 16px; }
  .glo-trust-mini { gap: 8px; padding: 12px; }
  .glo-trust-mini div { font-size: 10.5px; }

  /* ---- Archive ---- */
  .glo-archive-head h1 { font-size: 24px; }
  .glo-cat-pillnav { gap: 8px; }
  .glo-pagination ul.page-numbers { flex-wrap: wrap; }

  /* ---- Cart / Checkout ---- */
  .woocommerce-checkout .col2-set, .woocommerce-checkout .col-1, .woocommerce-checkout .col-2 { width: 100% !important; float: none !important; }
  .form-row-first, .form-row-last { width: 100% !important; float: none !important; }
  table.woocommerce-checkout-review-order-table thead { display: none; }
  table.woocommerce-checkout-review-order-table td,
  table.woocommerce-checkout-review-order-table th { display: block; border-top: none !important; padding: 4px 0; }
  table.woocommerce-checkout-review-order-table tr { display: block; border-bottom: 1px solid var(--glo-border); padding: 10px 0; }

  /* ---- Account ---- */
  .woocommerce-orders-table thead { display: none; }
  .woocommerce-orders-table tr { display: block; border-bottom: 1px solid var(--glo-border); padding: 10px 0; }
  .woocommerce-orders-table td { display: block; border-bottom: none; padding: 4px 0; text-align: left !important; }
  .woocommerce-orders-table td::before { content: attr(data-title) ": "; font-weight: 700; color: var(--glo-ink-soft); }
}

/* =======================================================
   PHONE — 600px
   ======================================================= */
@media (max-width: 600px) {

  .glo-wrap { padding: 0 16px; }

  /* ---- Header ---- */
  .glo-header__top { flex-wrap: wrap; }
  .glo-header-actions { gap: 20px; margin-left: auto; }

  /* ---- Homepage ---- */
  .glo-hero { padding: 24px 0 12px; }
  .glo-hero h1 { font-size: 26px; line-height: 1.22; }
  .glo-hero-tag { font-size: 11px; }
  .glo-hero-visual { max-height: 260px; }
  .glo-hero-visual img { max-height: 260px; }
  .glo-btn { padding: 11px 20px; font-size: 13px; }
  .glo-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .glo-concern-grid { grid-template-columns: 1fr 1fr; }
  .glo-trust-inner { grid-template-columns: 1fr 1fr; gap: 10px; }
  .glo-trust-item h4 { font-size: 12px; }
  .glo-trust-item p { font-size: 11px; }
  .glo-foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .glo-news form { flex-direction: column; }
  .glo-news input { width: 100%; }

  /* ---- PDP ---- */
  .glo-price-now { font-size: 24px; }
  .glo-spec-box, .glo-reviews-wrap { padding: 16px; }
  /* Trust mini: 3-col is very tight on ≤600px, compress it */
  .glo-trust-mini {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px 8px;
  }
  .glo-trust-mini div { font-size: 9.5px; }
  /* Gallery: smaller max on narrow phones */
  .woocommerce-product-gallery__image img { max-height: 280px; min-height: 140px; }

  /* ---- Archive ---- */
  .glo-cat-pillnav { gap: 7px; }
  .glo-cat-pillnav a { padding: 7px 14px; font-size: 12px; }

  /* ---- Cart ---- */
  td.actions .coupon input#coupon_code { min-width: 0; flex: 1; }
}

/* =======================================================
   SMALL PHONE — 420px
   ======================================================= */
@media (max-width: 420px) {
  .glo-logo { font-size: 21px; }
  .glo-announce { font-size: 10.5px; }
  .glo-hero h1 { font-size: 22px; }
  .glo-cat-grid, .glo-concern-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .glo-prod-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .glo-hero-cta { flex-direction: column; align-items: stretch; }
  .glo-hero-cta .glo-btn { text-align: center; }
  /* PDP add-to-cart: stack qty + button on very narrow phones */
  .glo-pdp form.cart {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .glo-pdp form.cart button.single_add_to_cart_button {
    width: 100% !important;
    text-align: center;
  }
  /* Trust mini: even tighter */
  .glo-trust-mini { gap: 4px; padding: 8px; }
  .glo-trust-mini div { font-size: 8.5px; }
}