/* C² Tides — sitewide mobile optimizations (≤640px primary, ≤900px secondary) */

/* ── Prevent horizontal bleed ─────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 640px) {
  .c2-topbar .c2-navbar {
    grid-template-columns: 1fr auto auto !important;
    gap: 8px !important;
  }
}

/* ── 44px minimum tap targets ────────────────────────────────────────── */
@media (max-width: 640px) {
  .c2-redesign-icon,
  .c2-redesign-actions .c2tides-a11y-btn,
  header.c2-redesign-nav #c2tides-lang-toggle,
  .c2-topbar .c2-icon-button,
  .c2-menu-toggle {
    min-width: 38px !important;
    min-height: 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .c2-redesign-btn,
  .c2-redesign-btn-outline,
  .c2-filter,
  .shop-goal-chip,
  .shop-sort select,
  .nl-modal__x,
  .nl-modal button[type="submit"],
  .c2-redesign-contact button,
  .c2-redesign-contact input,
  .c2-redesign-contact textarea,
  .c2-subscribe-form input,
  .c2-subscribe-form button {
    min-height: 44px;
  }

  .cart-qty-btn,
  button.cart-qty-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* =====================================
   C2 TIDES — MOBILE FULL-WIDTH + HERO
   (vial beside Quality heading)
   ===================================== */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
  }

  .c2-redesign-shell,
  .c2-container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* ---------- HEADER ---------- */
  .c2-redesign-nav-inner {
    height: 78px !important;
    min-height: 78px !important;
    padding: 0 !important;
  }

  .c2-redesign-logo img {
    width: 115px !important;
    height: auto !important;
    max-height: 58px !important;
    max-width: 115px !important;
    object-fit: contain !important;
  }

  .c2-redesign-actions {
    gap: 8px !important;
  }

  /* ---------- HERO: text left, vial right ---------- */
  .c2-redesign-hero {
    position: relative !important;
    min-height: 500px !important;
    padding: 34px 0 28px !important;
    overflow: hidden !important;
  }

  .c2-redesign-hero > .c2-redesign-shell.c2-redesign-hero-grid {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 18px !important;
    margin: 0 auto !important;
    gap: 0 !important;
    grid-template-columns: none !important;
  }

  .c2-redesign-copy {
    position: relative !important;
    z-index: 5 !important;
    display: block !important;
    width: 62% !important;
    max-width: 62% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .c2-redesign-copy h1 {
    margin: 0 !important;
    font-size: 47px !important;
    line-height: 0.96 !important;
    letter-spacing: -0.035em !important;
  }

  .c2-redesign-copy p {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 18px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .c2-redesign-visual {
    position: absolute !important;
    z-index: 2 !important;
    width: 46% !important;
    height: 320px !important;
    min-height: 0 !important;
    right: -8px !important;
    top: 20px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .c2-redesign-visual .c2-product-visual {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .c2-redesign-visual .c2-vial-image {
    position: absolute !important;
    width: 190px !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    left: 50% !important;
    top: 24px !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
  }

  /* Pull buttons under the side-by-side row at full shell width */
  .c2-redesign-hero-grid > .c2-redesign-hero-buttons {
    position: relative !important;
    z-index: 8 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 30px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    flex-direction: unset !important;
  }

  .c2-redesign-hero-buttons .c2-redesign-btn,
  .c2-redesign-hero-buttons .c2-redesign-btn-outline {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    justify-content: center !important;
  }

  /* ---------- CATALOG ---------- */
  .c2-redesign-catalog {
    width: 100% !important;
    max-width: none !important;
    padding: 35px 0 45px !important;
    background: #F7FAFB !important;
  }

  .c2-redesign-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 2px 4px 12px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .c2-redesign-pills::-webkit-scrollbar {
    display: none;
  }

  .c2-redesign-pills a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
  }

  #c2CatalogGrid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #c2CatalogGrid .c2-product-image {
    min-height: 170px !important;
  }

  /* ---------- TRUST ---------- */
  .c2-redesign-trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  /* ---------- COA ---------- */
  .c2-redesign-coa {
    padding: 42px 0 !important;
  }

  .c2-redesign-coa-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .c2-redesign-coa-image {
    min-height: 280px !important;
    border-radius: 18px !important;
  }

  .c2-redesign-coa-copy h2 {
    font-size: 40px !important;
    line-height: 1.04 !important;
  }

  /* ---------- FLOATING CART ---------- */
  .cart-fab,
  #floating-cart-button {
    width: 54px !important;
    height: 54px !important;
    right: 14px !important;
    bottom: 14px !important;
  }
}

/* Extra-small iPhones */
@media (max-width: 430px) {
  .c2-redesign-hero {
    min-height: 485px !important;
  }

  .c2-redesign-copy {
    width: 65% !important;
    max-width: 65% !important;
  }

  .c2-redesign-copy h1 {
    font-size: 43px !important;
  }

  .c2-redesign-visual {
    width: 45% !important;
    top: 16px !important;
  }

  .c2-redesign-visual .c2-vial-image {
    width: 170px !important;
  }
}

/* ── Catalog / shop grids: same cards as desktop, fewer columns ───────── */
@media (max-width: 640px) {
  .c2-redesign-catalog,
  .c2-catalog {
    max-width: 100% !important;
    overflow-x: hidden;
  }

  #c2CatalogGrid,
  #shopGrid.c2-catalog-grid,
  .c2-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  #c2CatalogGrid,
  #shopGrid.c2-catalog-grid,
  .c2-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#c2CatalogGrid .c2-product-card,
.c2-catalog-grid .c2-product-card {
  min-height: 440px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#c2CatalogGrid .c2-product-image,
.c2-catalog-grid .c2-product-image {
  min-height: 220px !important;
  height: auto !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}

#c2CatalogGrid .c2-product-image img,
.c2-catalog-grid .c2-product-image img {
  width: auto !important;
  height: 205px !important;
  max-width: 82% !important;
  max-height: 205px !important;
  object-fit: contain !important;
}

#c2CatalogGrid .c2-price,
#c2CatalogGrid .c2-add-button,
#c2CatalogGrid .c2-tag,
.c2-catalog-grid .c2-product-body p,
.c2-catalog-grid .c2-price,
.c2-catalog-grid .c2-add-button,
.c2-catalog-grid .c2-tag {
  display: unset;
}

#c2CatalogGrid .c2-product-body p {
  display: none !important;
}

#c2CatalogGrid .c2-card-actions,
.c2-catalog-grid .c2-card-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

@media (max-width: 640px) {
  .c2-catalog-grid .c2-product-card {
    min-height: 390px !important;
  }

  #c2CatalogGrid .c2-product-card {
    min-height: 0 !important;
  }

  #c2CatalogGrid .c2-product-image,
  .c2-catalog-grid .c2-product-image {
    min-height: 165px !important;
  }

  #c2CatalogGrid .c2-product-image img,
  .c2-catalog-grid .c2-product-image img {
    height: 155px !important;
    max-height: 155px !important;
  }

  #c2CatalogGrid .c2-product-body p {
    display: none !important;
  }

  .c2-catalog-grid .c2-product-body p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #c2CatalogGrid .c2-card-actions,
  .c2-catalog-grid .c2-card-actions {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  #c2CatalogGrid .c2-view-button,
  #c2CatalogGrid .c2-add-button,
  .c2-catalog-grid .c2-view-button,
  .c2-catalog-grid .c2-add-button {
    min-height: 40px;
    width: 100%;
    font-size: 0.72rem;
    padding: 8px 12px;
    white-space: normal;
    overflow: hidden;
  }
}

/* ── COA + contact ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .c2-redesign-coa {
    padding: 32px 0 !important;
  }

  .c2-redesign-coa-grid {
    gap: 24px !important;
  }

  .c2-redesign-coa-image {
    min-height: 200px !important;
  }

  .c2-redesign-coa-copy h2 {
    font-size: clamp(28px, 7vw, 40px) !important;
  }

  .c2-redesign-contact {
    padding: 36px 0 !important;
  }

  .c2-redesign-contact form {
    gap: 12px;
  }

  .c2-redesign-contact input,
  .c2-redesign-contact textarea,
  .c2-redesign-contact select,
  .c2-redesign-contact button {
    font-size: 16px !important;
  }
}

/* ── Education filters: horizontal scroll ─────────────────────────────── */
@media (max-width: 700px) {
  #education .c2-filters,
  .c2-education .c2-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 0;
    grid-template-columns: unset !important;
    border-bottom: 1px solid var(--c2-border, rgba(255, 255, 255, 0.12));
    padding-bottom: 2px;
    margin-bottom: 20px;
  }

  #education .c2-filter,
  .c2-education .c2-filter {
    flex: 0 0 auto;
    min-width: max(44%, 148px);
    scroll-snap-align: start;
    border-right: 0 !important;
    border-bottom: 0 !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
}

/* ── Trust bar, reviews, footer ──────────────────────────────────────── */
@media (max-width: 640px) {
  .c2-redesign-trust-item {
    padding: 16px 12px !important;
  }

  .c2-redesign-footer {
    padding: 32px 0 24px !important;
  }

  .c2-redesign-footer-grid {
    gap: 24px !important;
  }

  /* Homepage sections + footer clear floating cart FAB */
  .c2-redesign-contact,
  .c2-redesign-footer,
  section.c2-redesign-contact,
  footer.c2-redesign-footer {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  main,
  .shop-wrap,
  .pd-wrap,
  .checkout-wrap {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── Modals & drawers ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .nl-modal__panel,
  .nl-modal__card {
    width: min(100% - 24px, 420px) !important;
    margin: 12px !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  .nav-drawer .nav-panel {
    width: min(300px, 88vw) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ── Product detail page ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pd-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .pd-visual {
    margin-bottom: 16px;
  }

  .pd-add-btn,
  .pd-qty-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  .pd-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
}

/* ── Checkout / cart forms ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .checkout-wrap input,
  .checkout-wrap select,
  .checkout-wrap textarea,
  .checkout-wrap button,
  #checkout-form input,
  #checkout-form select,
  #checkout-form textarea,
  #checkout-form button {
    font-size: 16px !important;
  }

  #submit-order {
    min-height: 48px !important;
    font-size: 1rem !important;
  }
}

/* ── Shop toolbar ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .shop-bar,
  .shop-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .shop-sort,
  .shop-sort select {
    width: 100% !important;
  }

  .shop-goal-close {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ── Tables / wide content safety ─────────────────────────────────────── */
@media (max-width: 640px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre, code, .break-anywhere {
    overflow-x: auto;
    word-break: break-word;
  }
}