/* ============================================================
   Elevate Bioreagents — MOBILE PASS
   Per .agents/skills/mobile-optimization. Loaded LAST so it wins
   the cascade deterministically. Primary breakpoint = 782px (WP core).
   NOTE: this theme is custom + CLASSIC WooCommerce (no Elementor
   layout, no WC Blocks), so the Elementor/_element_custom_width and
   .wc-block-* traps in the playbook do not apply here.
   ============================================================ */

/* ------------------------------------------------------------
   1) UNIVERSAL CONTAINMENT — the safety net (zero horizontal scroll)
   ------------------------------------------------------------ */
@media (max-width: 782px){
  html, body{
    width:100% !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }
  *, *::before, *::after{
    box-sizing:border-box !important;
    max-width:100% !important;
  }
  img, svg, video, iframe, picture{
    max-width:100% !important;
    height:auto !important;
  }
  /* ...but object-fit media must keep its box height */
  .eb-pcard__media img{ height:100% !important; object-fit:cover !important; }

  p,h1,h2,h3,h4,h5,h6,li,td,span,a{
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
  /* mono data shouldn't hyphenate mid-token unnecessarily */
  .eb-spec__v,.eb-pcard__v,.eb-stat__v{ word-break:normal !important; }
}

/* ------------------------------------------------------------
   2) HEADER — fixes the 34px bleed at 375px
   (brand + actions + gap exceeded the container)
   ------------------------------------------------------------ */
@media (max-width: 782px){
  .eb-wrap, .eb-prose{ padding-inline:16px !important; }
  .eb-header__bar{ gap:10px !important; height:64px !important; }
  .eb-brand{ min-width:0 !important; gap:9px !important; }
  .eb-brand__mark{ width:24px !important; height:20px !important; flex-shrink:0 !important; }
  .eb-brand__mark svg{ width:24px !important; height:20px !important; }
  .eb-brand__name{ font-size:1rem !important; white-space:nowrap !important; }
  .eb-header__actions{ gap:6px !important; flex-shrink:0 !important; margin-left:auto !important; }
  .eb-cart{ padding:8px 10px !important; gap:6px !important; }
  .eb-burger{ width:40px !important; height:38px !important; flex-shrink:0 !important; }
  .eb-nav.is-open{ top:64px !important; padding:8px 16px 16px !important; }
  .eb-ribbon{ font-size:9.5px !important; letter-spacing:.08em !important; padding:7px 12px !important; }
}

/* ------------------------------------------------------------
   3) PRODUCT GRID — 2 per row on phones (1 only ≤380px)
   Specificity must beat `.woocommerce ul.products` (0,2,1).
   ------------------------------------------------------------ */
@media (max-width: 782px){
  .woocommerce ul.products,
  ul.eb-grid,
  .eb-grid{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:12px !important;
    padding:0 !important;
    margin:0 !important;
    list-style:none !important;
  }
  .woocommerce ul.products li.product,
  .eb-grid .eb-pcard{
    width:auto !important; max-width:100% !important; margin:0 !important; float:none !important;
  }

  /* card internals: stack the footer, single-column meta */
  .eb-pcard{ overflow:hidden !important; }
  .eb-pcard__body{ padding:12px 12px 0 !important; }
  .eb-pcard__title{ font-size:.92rem !important; min-height:0 !important; margin-bottom:6px !important; }
  .eb-pcard__meta{ grid-template-columns:1fr !important; gap:0 !important; margin:4px 0 10px !important; padding:10px 0 !important; }
  .eb-pcard__k{ font-size:8.5px !important; }
  .eb-pcard__v{ font-size:11.5px !important; margin-bottom:4px !important; }
  .eb-pcard__cat{ font-size:8.5px !important; padding:3px 7px !important; top:8px !important; left:8px !important; }
  .eb-pcard__foot{
    flex-direction:column !important; align-items:stretch !important;
    gap:8px !important; padding:0 12px 12px !important;
  }
  .eb-pcard__price{ text-align:center !important; font-size:1rem !important; }
  .eb-pcard .eb-btn--sm{ width:100% !important; min-height:44px !important; padding:11px 10px !important; }
  .eb-pcard__ruoline{ font-size:8px !important; padding:8px 6px !important; letter-spacing:.05em !important; }
}
/* 1-per-row is a last resort — keep 2-across on real phones (375/390/412).
   Playbook says ≤380px; 340px better serves the intent (iPhone SE is 375). */
@media (max-width: 340px){
  .woocommerce ul.products,
  ul.eb-grid,
  .eb-grid{ grid-template-columns:1fr !important; }
}

/* ------------------------------------------------------------
   4) SHOP layout + sidebar
   ------------------------------------------------------------ */
@media (max-width: 782px){
  .eb-shop{ grid-template-columns:1fr !important; gap:0 !important; padding:28px 0 56px !important; }
  .eb-sidebar{ position:static !important; grid-template-columns:1fr !important; display:grid !important; gap:12px !important; margin-bottom:24px !important; }
  .eb-shop__toolbar{ gap:10px !important; }
  .woocommerce-ordering, .woocommerce-ordering select, .eb-shop select{ width:100% !important; }
}

/* ------------------------------------------------------------
   5) FORM INPUTS — kill iOS auto-zoom (<16px) + WCAG tap targets
   ------------------------------------------------------------ */
@media (max-width: 782px){
  input[type=text], input[type=email], input[type=tel], input[type=password],
  input[type=number], input[type=search], input[type=url], select, textarea,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .eb-cform input, .eb-cform textarea,
  .eb-search input[type=search], .eb-search input[type=text]{
    font-size:16px !important;
    min-height:48px !important;
    padding:13px 14px !important;
    border-radius:var(--eb-radius) !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  textarea{ min-height:112px !important; }
  .woocommerce .quantity input.qty{ min-height:48px !important; font-size:16px !important; width:84px !important; }
  .eb-search{ flex-wrap:nowrap !important; }
  .eb-search input{ min-width:0 !important; }
  .eb-search button{ min-height:48px !important; min-width:48px !important; flex-shrink:0 !important; }
  .eb-cform__row{ grid-template-columns:1fr !important; }

  /* Buttons: full-width, 48px tall */
  .eb-btn{ min-height:48px !important; }
  .eb-pcard .eb-btn--sm{ min-height:44px !important; }
  .eb-hero__cta .eb-btn{ width:100% !important; }
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #place_order,
  .woocommerce .actions .button,
  .woocommerce .wc-proceed-to-checkout a.checkout-button{
    min-height:48px !important;
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  /* Notices: message text first, action button below it.
     `order` is deterministic — the bare text node is an anonymous flex item
     (order:0), so ordering the button to 2 works regardless of DOM order. */
  .woocommerce-message, .woocommerce-info{
    display:flex !important; flex-direction:column !important;
    align-items:flex-start !important; gap:10px !important;
  }
  .woocommerce-error{ display:block !important; }
  .woocommerce-message .button, .woocommerce-info .button{
    order:2 !important;
    float:none !important; width:auto !important; display:inline-flex !important;
    align-items:center !important; min-height:40px !important; margin:0 !important;
  }
}

/* ------------------------------------------------------------
   6) CART — classic shop_table → stacked cards
   ------------------------------------------------------------ */
@media (max-width: 782px){
  .woocommerce table.shop_table{
    display:block !important; width:100% !important;
    border:none !important; background:transparent !important; overflow:visible !important;
  }
  .woocommerce table.shop_table thead{ display:none !important; }
  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table tr,
  .woocommerce table.shop_table td{ display:block !important; width:100% !important; }

  .woocommerce table.shop_table tr.cart_item{
    position:relative !important;
    background:var(--eb-paper) !important;
    border:1px solid var(--eb-line) !important;
    border-radius:var(--eb-radius-lg) !important;
    padding:14px !important;
    margin:0 0 12px !important;
    overflow:hidden !important;
  }
  .woocommerce table.shop_table tr.cart_item td{
    border:none !important;
    padding:7px 0 !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:12px !important;
    text-align:right !important;
    border-bottom:1px dashed var(--eb-line) !important;
  }
  .woocommerce table.shop_table tr.cart_item td:last-child{ border-bottom:none !important; }
  .woocommerce table.shop_table tr.cart_item td::before{
    content:attr(data-title);
    font-family:var(--eb-font-mono);
    font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--eb-slate); text-align:left; flex-shrink:0;
  }
  /* remove button pinned top-right; thumbnail as a plain block.
     NOTE: selectors must include `tr.cart_item` to outrank the generic
     `tr.cart_item td { border-bottom }` rule above (same !important). */
  .woocommerce table.shop_table tr.cart_item td.product-remove{
    position:absolute !important; top:10px !important; right:10px !important;
    width:auto !important; padding:0 !important; border-bottom:none !important; display:block !important;
  }
  .woocommerce table.shop_table tr.cart_item td.product-remove::before{ content:none !important; }
  .woocommerce table.shop_table tr.cart_item td.product-thumbnail{
    display:block !important; text-align:left !important; border-bottom:none !important; padding:0 0 6px !important;
  }
  .woocommerce table.shop_table tr.cart_item td.product-thumbnail::before{ content:none !important; }
  .woocommerce table.shop_table tr.cart_item td.product-thumbnail img{
    width:64px !important; height:64px !important; object-fit:cover !important; border-radius:8px !important;
  }
  .woocommerce table.shop_table tr.cart_item td.product-name{ padding-right:34px !important; }

  /* coupon / actions row */
  .woocommerce table.shop_table td.actions{
    background:var(--eb-paper) !important;
    border:1px solid var(--eb-line) !important;
    border-radius:var(--eb-radius-lg) !important;
    padding:14px !important; display:block !important;
  }
  .woocommerce table.shop_table td.actions::before{ content:none !important; }
  .woocommerce .coupon{ display:flex !important; flex-direction:column !important; gap:8px !important; margin-bottom:10px !important; }
  .woocommerce .coupon input{ width:100% !important; }

  .woocommerce .cart-collaterals{ grid-template-columns:1fr !important; gap:20px !important; }
  .woocommerce .cart_totals table th{ width:45% !important; }
}

/* ------------------------------------------------------------
   7) CHECKOUT
   ------------------------------------------------------------ */
@media (max-width: 782px){
  .woocommerce-checkout #order_review,
  .woocommerce .cart_totals{ padding:18px !important; }
  /* Order-notes field is low value on phones (playbook) */
  .woocommerce-additional-fields{ display:none !important; }
  /* order review table rows read as label/value */
  .woocommerce-checkout-review-order-table tfoot th,
  .woocommerce-checkout-review-order-table tfoot td{ padding:12px 14px !important; }
}

/* ------------------------------------------------------------
   8) MY ACCOUNT — wrapping pill nav + content card
   ------------------------------------------------------------ */
@media (max-width: 782px){
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
    display:block !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation{ margin-bottom:18px !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul{
    display:flex !important; flex-wrap:wrap !important; gap:6px !important;
    border:none !important; background:transparent !important; overflow:visible !important;
    width:100% !important; min-width:0 !important; border-radius:0 !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li{ border:none !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation li a{
    display:inline-flex !important; align-items:center !important;
    min-height:38px !important; padding:0 13px !important;
    border-radius:999px !important;
    background:var(--eb-base) !important;
    border:1px solid var(--eb-line) !important;
    color:var(--eb-ink) !important;
    font-size:12.5px !important; font-weight:600 !important;
    box-shadow:none !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
    background:var(--eb-titrant) !important; color:#fff !important; border-color:var(--eb-titrant) !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a{
    color:var(--eb-danger) !important; background:#fff5f5 !important; border-color:#f5c8cc !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content{
    display:block !important; visibility:visible !important; opacity:1 !important;
    background:var(--eb-paper) !important;
    border:1px solid var(--eb-line) !important;
    border-radius:var(--eb-radius-lg) !important;
    padding:18px !important; min-height:240px !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content > *{ display:revert !important; visibility:visible !important; }

  /* Orders table → stacked cards (WC ships data-title on every td) */
  .woocommerce-orders-table thead{ display:none !important; }
  .woocommerce-orders-table,
  .woocommerce-orders-table tbody,
  .woocommerce-orders-table tr,
  .woocommerce-orders-table td{ display:block !important; width:100% !important; }
  .woocommerce-orders-table tr{
    background:var(--eb-paper) !important; border:1px solid var(--eb-line) !important;
    border-radius:var(--eb-radius-lg) !important; padding:12px 14px !important; margin:0 0 10px !important;
  }
  .woocommerce-orders-table td{
    display:flex !important; justify-content:space-between !important; gap:12px !important;
    padding:7px 0 !important; border-bottom:1px dashed var(--eb-line) !important; text-align:right !important;
  }
  .woocommerce-orders-table td::before{
    content:attr(data-title);
    font-family:var(--eb-font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--eb-slate); text-align:left; flex-shrink:0;
  }
  .woocommerce-orders-table td:last-child{ border-bottom:none !important; }

  /* Address cards stack */
  .woocommerce-Addresses, .woocommerce-account .u-columns{
    display:grid !important; grid-template-columns:1fr !important; gap:16px !important;
  }
  .woocommerce-Address{ padding:18px !important; }
}

/* ------------------------------------------------------------
   9) LOGIN / REGISTER toggle (scoped :not(.logged-in) — never hide
      logged-in account content; this bug burned ~6 deploys on Apex)
   ------------------------------------------------------------ */
body.woocommerce-account:not(.logged-in) .u-column1{ display:block; }
body.woocommerce-account:not(.logged-in) .u-column2{ display:none; }
body.woocommerce-account:not(.logged-in).show-register .u-column1{ display:none; }
body.woocommerce-account:not(.logged-in).show-register .u-column2{ display:block; }
.eb-acct-toggle{ margin-top:16px; font-size:.9rem; color:var(--eb-slate); text-align:center; }
.eb-acct-toggle a{ color:var(--eb-titrant); font-weight:600; }
body.woocommerce-account:not(.logged-in) .woocommerce-form-login,
body.woocommerce-account:not(.logged-in) .woocommerce-form-register{ margin-inline:auto; }

/* ------------------------------------------------------------
   10) SINGLE PRODUCT + misc
   ------------------------------------------------------------ */
@media (max-width: 782px){
  .eb-single{ padding:28px 0 56px !important; }
  .eb-single__grid{ grid-template-columns:1fr !important; gap:24px !important; }
  .eb-single form.cart{ flex-direction:column !important; gap:10px !important; }
  .eb-single form.cart .button,
  .eb-single .single_add_to_cart_button{ width:100% !important; min-height:52px !important; }
  .eb-single .quantity input.qty{ width:100% !important; }
  .eb-spec__rows{ grid-template-columns:1fr 1fr !important; }
  .eb-apps__grid{ grid-template-columns:1fr !important; }
  .eb-single .woocommerce-tabs ul.tabs{ gap:16px !important; }

  .eb-footer__top{ grid-template-columns:1fr !important; gap:28px !important; }
  .eb-footer__bot{ flex-direction:column !important; gap:8px !important; font-size:.75rem !important; }
  .eb-section{ padding:52px 0 !important; }
  .eb-pagehead{ padding:36px 0 30px !important; }
}