/* ============================================================
   Responsive Stylesheet for Anmore
   Loaded LAST (after main/layouts/components/animations) so it
   can win the cascade. Many section layouts in the page JS
   (home.js, shop.js, detail.js, about.js, checkout.js, contact.js)
   are written with hardcoded inline styles (grid-template-columns,
   font-size, etc). Inline styles always beat normal class rules,
   so several overrides below intentionally use `!important` +
   attribute selectors that match those exact inline values -- this
   is the only reliable way to make legacy inline-styled markup
   responsive without rewriting every page template.
   ============================================================ */

/* ---------------------------------------------------------------
   1. MOBILE NAVIGATION (hamburger menu + slide down panel)
   The click logic for #menu-toggle / .nav-links already exists in
   header.js -- it only ever lacked CSS to look/behave right.
--------------------------------------------------------------- */
@media (max-width: 900px) {

  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 210;
  }

  .hamburger,
  .hamburger::before,
  .hamburger::after {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--text-primary);
    transition: var(--transition-fast);
  }

  .hamburger {
    position: relative;
  }

  .hamburger::before,
  .hamburger::after {
    content: '';
    position: absolute;
    left: 0;
  }

  .hamburger::before { top: -6px; }
  .hamburger::after  { top: 6px; }

  .menu-toggle.active .hamburger {
    background-color: transparent;
  }

  .menu-toggle.active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
  }

  .menu-toggle.active .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .navbar {
    padding: 0 20px;
    padding-top: 50px;
  }

  /* nav itself collapses to nothing; .nav-links becomes a fixed panel */
  nav {
    position: static;
  }

  .nav-links {
    position: fixed;
    top: calc(var(--header-height) + var(--announcement-height));
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    flex-direction: column;
    gap: 0;
    background-color: var(--bg-primary);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    transition: var(--transition-smooth);
    z-index: 150;
  }

  header.scrolled .nav-links {
    top: var(--header-height);
  }

  .nav-links.active {
    height: calc(100vh - var(--header-height) - var(--announcement-height));
    overflow-y: auto;
    border-top: 1px solid var(--border-color-light);
    padding: 12px 0 32px 0;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    padding: 16px 24px;
    font-size: 15px;
  }

  .nav-links a::after {
    display: none;
  }

  .nav-logo {
    position: static;
    transform: none;
  }

  .nav-actions {
    gap: 12px;
  }
}

/* Slightly smaller header on very small phones to reclaim vertical space */
@media (max-width: 480px) {
  :root {
    --header-height: 68px;
    --announcement-height: 32px;
  }

  .nav-logo img {
    height: 26px;
  }

  .announcement-bar {
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 0 12px;
    text-align: center;
  }
}

/* ---------------------------------------------------------------
   2. HERO SECTION
--------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-section {
    height: 100svh;
    min-height: 560px;
  }

  /* Hero CTA row: force it to wrap instead of overflowing */
  .hero-content > div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 480px) {
  .hero-section {
    min-height: 520px;
  }

  .hero-content {
    padding: 0 16px;
  }
}

/* ---------------------------------------------------------------
   3. GRID LAYOUTS
   Every split ("text | image") and multi-card grid across the
   pages is written inline. Stack progressively across two
   breakpoints so tablets get 2-up and phones get 1-up.
--------------------------------------------------------------- */
@media (max-width: 900px) {
  main [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  main [style*="grid-template-columns: 1fr 1fr"],
  main [style*="grid-template-columns: 1.2fr 1fr"],
  main [style*="grid-template-columns: 1fr 1.2fr"],
  main [style*="grid-template-columns: 1fr 1.3fr"],
  main [style*="grid-template-columns: 1fr 1.8fr"],
  main [style*="grid-template-columns: 1fr 0.85fr"],
  main [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* CHP "Simple Steps" routine section on the homepage sets an explicit
     420px min-height to balance its two columns side by side; once it
     collapses to one column that fixed height just adds dead space
     above the dynamic product card panel, so let it size naturally */
  main [style*="grid-template-columns: 1fr 0.85fr"] {
    min-height: 0 !important;
  }

  /* Small scientific-disclosure data grid (label/value pairs) should
     stay compact rather than inheriting the 40px gap above */
  main [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12px"] {
    gap: 10px 24px !important;
  }

  /* Sticky side columns (order summary, image gallery, review stats)
     don't make sense once their layout collapses to one column */
  main [style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 640px) {
  main [style*="grid-template-columns: repeat(3, 1fr)"],
  main [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  main [style*="grid-template-columns"] {
    gap: 28px !important;
  }

  main [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 16px !important;
  }
}

/* Product grids (shop page + homepage CHP cards + detail companions)
   already use auto-fill/auto-fit and adapt on their own, but tighten
   the gap so cards don't feel cramped at very small widths */
@media (max-width: 480px) {
  #shop-products-grid,
  main [style*="grid-template-columns: repeat(auto-fill"],
  main [style*="grid-template-columns: repeat(auto-fit"] {
    gap: 24px !important;
  }
}

/* Trending Products Row (homepage) -- 4 cols down to 2, then 1 */
@media (max-width: 900px) {
  .trending-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 480px) {
  .trending-products-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------
   4. TYPOGRAPHY
   Scale down the large inline font-sizes used for headings/stats.
--------------------------------------------------------------- */
@media (max-width: 640px) {
  main [style*="font-size: 72px"] { font-size: 36px !important; }
  main [style*="font-size: 64px"] { font-size: 40px !important; }
  main [style*="font-size: 56px"] { font-size: 34px !important; }
  main [style*="font-size: 48px"] { font-size: 30px !important; }
  main [style*="font-size: 44px"] { font-size: 28px !important; }
  main [style*="font-size: 42px"] { font-size: 27px !important; }
  main [style*="font-size: 40px"] { font-size: 26px !important; }
  main [style*="font-size: 38px"] { font-size: 24px !important; }
  main [style*="font-size: 36px"] { font-size: 23px !important; }
  main [style*="font-size: 32px"] { font-size: 22px !important; }

  .hero-title {
    font-size: 36px !important;
    line-height: 1.15 !important;
  }
}

/* ---------------------------------------------------------------
   5. TABLES (Formula comparison table on the homepage)
--------------------------------------------------------------- */
@media (max-width: 640px) {
  main .container table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px !important;
  }
}

/* ---------------------------------------------------------------
   6. PRODUCT DETAIL PAGE specifics
--------------------------------------------------------------- */
@media (max-width: 480px) {
  .detail-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 20px !important;
    padding-bottom: 2px;
  }

  .detail-tabs::-webkit-scrollbar {
    height: 3px;
  }

  .thumb-btn {
    width: 64px !important;
    height: 76px !important;
  }
}

/* ---------------------------------------------------------------
   7. CHECKOUT PAGE progress steps
--------------------------------------------------------------- */
@media (max-width: 640px) {
  .checkout-section [style*="justify-content: space-between"][style*="text-transform: uppercase"] {
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
  }
}

@media (max-width: 420px) {
  /* On the narrowest phones even the shrunk 10px labels ("01. Information",
     "02. Shipping", "03. Payment") can get tight against each other --
     allow the row to wrap rather than clipping/overlapping */
  .checkout-section [style*="justify-content: space-between"][style*="text-transform: uppercase"] {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

@media (max-width: 480px) {
  .checkout-section [style*="display: flex"][style*="gap: 16px"] {
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------------
   8. CART DRAWER
--------------------------------------------------------------- */
@media (max-width: 480px) {
  .cart-drawer {
    width: 100%;
  }

  .cart-header,
  .cart-items-container,
  .cart-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .cart-item-image {
    width: 72px;
    height: 88px;
  }
}

/* ---------------------------------------------------------------
   9. TOAST NOTIFICATIONS
--------------------------------------------------------------- */
@media (max-width: 600px) {
  .toast-container {
    left: 16px;
    right: 16px;
    bottom: 20px;
  }

  .toast {
    padding: 14px 18px;
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------
   9b. CONTACT PAGE — FAQ category tabs & form padding
--------------------------------------------------------------- */
@media (max-width: 560px) {
  /* "Orders & Shipping" / "Routines & Skin" / "Formulation Specs" tabs
     can crowd together on phones; let them wrap onto a second line
     instead of squeezing or overflowing the 800px FAQ column */
  .contact-section [style*="justify-content: center"][style*="gap: 32px"] {
    flex-wrap: wrap;
    row-gap: 12px;
  }
}

@media (max-width: 480px) {
  /* Contact form card padding (48px) is generous for desktop but eats
     into content width on phones */
  .contact-section [style*="padding: 48px"] {
    padding: 28px !important;
  }
}

/* ---------------------------------------------------------------
   9c. HOMEPAGE — section header rows ("Shop Our Best Sellers",
   "Skincare Education & Rituals") that pair a heading with a CTA link
--------------------------------------------------------------- */
@media (max-width: 560px) {
  main [style*="justify-content: space-between"][style*="align-items: flex-end"] {
    flex-wrap: wrap;
    row-gap: 16px;
  }
}

/* ---------------------------------------------------------------
   10. FOOTER NEWSLETTER FORM (inline styled in index.html)
--------------------------------------------------------------- */
@media (max-width: 480px) {
  .footer-col form[style*="display: flex"] {
    flex-direction: column !important;
  }
}

/* ---------------------------------------------------------------
   11. GENERAL SMALL-SCREEN POLISH
--------------------------------------------------------------- */
@media (max-width: 480px) {
  .section-padding {
    padding: 48px 0;
  }

  .container {
    padding: 0 16px;
  }

  .btn {
    padding: 14px 28px;
    font-size: 12px;
  }

  /* Circular overlapping image composition on Home/About impact
     sections is designed for wide layouts; tone it down on phones */
  main [style*="border-radius: 50%"][style*="width: 80%"] {
    width: 70% !important;
  }
}

/* Prevent horizontal scroll caused by any stray fixed-width elements */
@media (max-width: 480px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
}