/* =====================================================================
   MasnoonHub Express — WooCommerce funnel brand layer (v6)
   ---------------------------------------------------------------------
   Loaded ONLY on shop / product / cart / checkout / account, AFTER the
   legacy style.css, so it re-skins WooCommerce's native output to the v6
   design (tokens.css drives every colour + type value). It is ADDITIVE:
   it changes the visual layer only, so WooCommerce's add-to-cart JS,
   checkout AJAX and gateways keep working untouched.

   Scope discipline: content rules are scoped under `#content` (Astra's main
   content wrapper). The marketplace header (.mh-header, rendered on
   astra_body_top) and the footer live OUTSIDE #content, so this file never
   fights the chrome — that stays as-is for now.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. CONTENT SCAFFOLD + TYPOGRAPHY
   --------------------------------------------------------------------- */
.woocommerce-page #content{
  font-family:var(--font-body);
  color:var(--ink);
  --wo-pad: clamp(16px, 4vw, 40px);
}
/* page / section headings → Spectral display, like the homepage */
.woocommerce-page #content h1,
.woocommerce-page #content h2,
.woocommerce-page #content .product_title,
.woocommerce-page #content #order_review_heading,
.woocommerce-page #content .cart_totals h2,
.woocommerce-page #content .woocommerce-column__title,
.woocommerce-page #content #customer_details h3,
.woocommerce-page #content .woocommerce-billing-fields h3,
.woocommerce-page #content .woocommerce-shipping-fields h3{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--navy);
}
/* tighten the WC page title block */
.woocommerce-page #content .entry-title,
.woocommerce-page #content .woocommerce-products-header{ margin-bottom:18px; }

/* links inside content adopt the brand */
.woocommerce-page #content a:not(.button):hover{ color:var(--brand); }

/* ---------------------------------------------------------------------
   2. BUTTONS — one brand pill for every WC button
   --------------------------------------------------------------------- */
.woocommerce-page #content .button,
.woocommerce-page #content button.button,
.woocommerce-page #content input.button,
.woocommerce-page #content a.button,
.woocommerce-page #content .wc-block-components-button,
.woocommerce-page #content #place_order,
.woocommerce-page #content .single_add_to_cart_button,
.woocommerce-page #content .checkout-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand); color:#fff;
  font-family:var(--font-body); font-weight:700; font-size:15px; line-height:1.1;
  letter-spacing:.01em;
  border:0; border-radius:var(--r-pill);
  padding:14px 26px; min-height:48px;
  box-shadow:0 8px 20px -10px rgba(224,83,15,.6);
  transition:background .15s ease, transform .08s ease, box-shadow .15s ease;
  cursor:pointer; text-decoration:none;
}
.woocommerce-page #content .button:hover,
.woocommerce-page #content button.button:hover,
.woocommerce-page #content a.button:hover,
.woocommerce-page #content #place_order:hover,
.woocommerce-page #content .single_add_to_cart_button:hover,
.woocommerce-page #content .checkout-button:hover{
  background:var(--brand-bright); color:#fff; box-shadow:0 10px 24px -10px rgba(224,83,15,.7);
}
.woocommerce-page #content .button:active,
.woocommerce-page #content #place_order:active{ transform:translateY(1px); }

/* secondary / ghost buttons (e.g. "Update cart", "Continue shopping") */
.woocommerce-page #content .button.alt ~ .button,
.woocommerce-page #content .cart .button[name="update_cart"],
.woocommerce-page #content .wc-backward,
.woocommerce-page #content .button.wc-block-components-button:not(.alt){
  background:#fff; color:var(--navy);
  border:1.5px solid var(--line);
  box-shadow:none;
}
.woocommerce-page #content .wc-backward:hover,
.woocommerce-page #content .cart .button[name="update_cart"]:hover{
  background:var(--line-2); color:var(--navy); border-color:var(--ink-3);
}
.woocommerce-page #content .button[disabled],
.woocommerce-page #content .button:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }

/* ---------------------------------------------------------------------
   3. PRICES
   --------------------------------------------------------------------- */
.woocommerce-page #content .price,
.woocommerce-page #content .woocommerce-Price-amount{
  color:var(--brand); font-weight:800; font-family:var(--font-body);
}
.woocommerce-page #content .price del,
.woocommerce-page #content del .woocommerce-Price-amount{
  color:var(--ink-3); font-weight:500; text-decoration:line-through; opacity:.85;
}
.woocommerce-page #content .price ins{ text-decoration:none; }

/* ---------------------------------------------------------------------
   4. FORM FIELDS — used by checkout, account, login, coupon
   --------------------------------------------------------------------- */
.woocommerce-page #content .input-text,
.woocommerce-page #content input[type="text"],
.woocommerce-page #content input[type="email"],
.woocommerce-page #content input[type="tel"],
.woocommerce-page #content input[type="password"],
.woocommerce-page #content input[type="number"],
.woocommerce-page #content textarea,
.woocommerce-page #content select,
.woocommerce-page #content .select2-container .select2-selection{
  width:100%; box-sizing:border-box;
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  padding:12px 14px; min-height:48px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-page #content textarea{ min-height:96px; padding-top:12px; line-height:1.5; }
.woocommerce-page #content .select2-container .select2-selection{ display:flex; align-items:center; }
.woocommerce-page #content .select2-container--default .select2-selection--single .select2-selection__arrow{ height:46px; }
.woocommerce-page #content .input-text:focus,
.woocommerce-page #content input:focus,
.woocommerce-page #content textarea:focus,
.woocommerce-page #content select:focus,
.woocommerce-page #content .select2-container--focus .select2-selection{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
}
/* labels */
.woocommerce-page #content .form-row label,
.woocommerce-page #content .woocommerce-form-row label{
  font-weight:600; font-size:13.5px; color:var(--ink-2); margin-bottom:6px; display:inline-block;
}
.woocommerce-page #content .required{ color:var(--red); border:0; }

/* ---------------------------------------------------------------------
   5. NOTICES / MESSAGES → branded, rounded
   --------------------------------------------------------------------- */
.woocommerce-page #content .woocommerce-message,
.woocommerce-page #content .woocommerce-info,
.woocommerce-page #content .woocommerce-error,
.woocommerce-page #content .woocommerce-notice{
  border-radius:var(--r-md);
  border:1px solid var(--line);
  border-top:3px solid var(--brand);
  background:#fff;
  box-shadow:var(--shadow-card);
  font-family:var(--font-body); color:var(--ink);
  padding:14px 18px;
}
.woocommerce-page #content .woocommerce-message{ border-top-color:var(--green); }
.woocommerce-page #content .woocommerce-error{ border-top-color:var(--red); }
.woocommerce-page #content .woocommerce-info{ border-top-color:var(--trust); }
.woocommerce-page #content .woocommerce-message .button,
.woocommerce-page #content .woocommerce-info .button{ min-height:38px; padding:8px 18px; font-size:13.5px; }

/* ---------------------------------------------------------------------
   6. CATALOG HEADER — result count + ordering
   --------------------------------------------------------------------- */
.woocommerce-page #content .woocommerce-result-count{
  color:var(--ink-2); font-size:14px; margin:0; padding-top:6px;
}
.woocommerce-page #content .woocommerce-ordering select{ min-height:42px; padding:8px 36px 8px 14px; width:auto; }
.woocommerce-page #content nav.woocommerce-breadcrumb{
  font-size:13px; color:var(--ink-3); margin-bottom:14px;
}
.woocommerce-page #content nav.woocommerce-breadcrumb a{ color:var(--ink-2); }

/* pagination */
.woocommerce-page #content .woocommerce-pagination .page-numbers{
  border-radius:var(--r-sm); border:1px solid var(--line);
}
.woocommerce-page #content .woocommerce-pagination .page-numbers.current{
  background:var(--brand); color:#fff; border-color:var(--brand);
}

/* ---------------------------------------------------------------------
   7. CHECKOUT — the big lift (was plain default WC)
   --------------------------------------------------------------------- */
/* the login + coupon "info" toggles read as quiet helper bars, not alerts */
.woocommerce-checkout #content .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout #content .woocommerce-form-coupon-toggle .woocommerce-info{
  border:1px dashed var(--line); border-top:1px dashed var(--line);
  background:var(--line-2); box-shadow:none; color:var(--ink-2);
}
.woocommerce-checkout #content .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-checkout #content .woocommerce-form-coupon-toggle .woocommerce-info a{ color:var(--brand); font-weight:600; }

/* billing / shipping column → a clean white card */
.woocommerce-checkout #content #customer_details{ }
.woocommerce-checkout #content #customer_details .col-1,
.woocommerce-checkout #content #customer_details .col-2,
.woocommerce-checkout #content .woocommerce-billing-fields,
.woocommerce-checkout #content .woocommerce-additional-fields{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:22px 22px 6px;
}
.woocommerce-checkout #content #customer_details .col-2{ margin-top:18px; }
.woocommerce-checkout #content #customer_details h3,
.woocommerce-checkout #content .woocommerce-billing-fields h3{
  margin-top:0; font-size:19px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px;
}

/* "Your order" review → sticky premium card */
.woocommerce-checkout #content #order_review_heading{
  font-size:19px; margin:0 0 14px;
}
.woocommerce-checkout #content #order_review{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:22px;
  position:sticky; top:18px;
}
.woocommerce-checkout #content .woocommerce-checkout-review-order-table{
  border:0; margin:0;
}
.woocommerce-checkout #content .woocommerce-checkout-review-order-table th,
.woocommerce-checkout #content .woocommerce-checkout-review-order-table td{
  border:0; border-bottom:1px solid var(--line); padding:12px 0; font-size:14px;
}
.woocommerce-checkout #content .woocommerce-checkout-review-order-table thead th{
  font-family:var(--font-body); font-weight:700; color:var(--ink-2); font-size:13px;
  text-transform:uppercase; letter-spacing:.04em;
}
.woocommerce-checkout #content .woocommerce-checkout-review-order-table .cart_item td{ color:var(--ink); }
.woocommerce-checkout #content .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout #content .woocommerce-checkout-review-order-table .order-total td{
  font-size:17px; padding-top:16px; border-bottom:0;
}
.woocommerce-checkout #content .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount{ font-size:20px; }

/* payment box + COD as the hero method */
.woocommerce-checkout #content #payment{
  background:transparent; border:0; margin-top:6px;
}
.woocommerce-checkout #content #payment ul.payment_methods{
  border:0; padding:0; margin:0 0 14px;
  display:flex; flex-direction:column; gap:10px;
}
.woocommerce-checkout #content #payment ul.payment_methods li{
  list-style:none; background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-checkout #content #payment ul.payment_methods li:hover{ border-color:var(--ink-3); }
.woocommerce-checkout #content #payment ul.payment_methods li input[type="radio"]:checked ~ label{ color:var(--navy); }
.woocommerce-checkout #content #payment ul.payment_methods li label{
  font-weight:700; color:var(--ink); font-size:14.5px; margin:0; cursor:pointer;
}
.woocommerce-checkout #content #payment div.payment_box{
  background:var(--brand-soft); color:var(--brand-ink);
  border-radius:var(--r-sm); margin-top:12px; font-size:13.5px;
}
.woocommerce-checkout #content #payment div.payment_box::before{ display:none; }
.woocommerce-checkout #content #place_order{ width:100%; margin-top:8px; font-size:16px; min-height:54px; }

/* COD reassurance: a small trust line under place-order */
.woocommerce-checkout #content .woocommerce-terms-and-conditions-wrapper{ font-size:13px; color:var(--ink-2); }

/* ---------------------------------------------------------------------
   8. CART — table → premium card rows
   --------------------------------------------------------------------- */
.woocommerce-cart #content .woocommerce-cart-form table.cart{
  border:0; border-collapse:separate; border-spacing:0;
}
.woocommerce-cart #content table.cart thead th{
  background:transparent; border:0; border-bottom:2px solid var(--line);
  font-family:var(--font-body); font-weight:700; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.04em; font-size:12.5px; padding:0 12px 12px;
}
.woocommerce-cart #content table.cart td{
  border:0; border-bottom:1px solid var(--line); padding:18px 12px; vertical-align:middle;
}
.woocommerce-cart #content table.cart td.product-thumbnail img{
  width:72px; height:72px; object-fit:cover; border-radius:var(--r-md); border:1px solid var(--line);
}
.woocommerce-cart #content table.cart td.product-name a{ color:var(--navy); font-weight:600; }
.woocommerce-cart #content table.cart td.product-name a:hover{ color:var(--brand); }
.woocommerce-cart #content .quantity input.qty{
  width:74px; min-height:44px; text-align:center; padding:8px;
}
.woocommerce-cart #content .product-remove a.remove{
  color:var(--red) !important; font-size:22px; line-height:1;
}
.woocommerce-cart #content .product-remove a.remove:hover{ background:var(--red); color:#fff !important; }

/* cart actions row (coupon + update) */
.woocommerce-cart #content .cart .actions{ padding:18px 0 0; }
.woocommerce-cart #content .cart .actions .coupon input.input-text{ width:200px; display:inline-block; margin-right:8px; }

/* cart totals → card */
.woocommerce-cart #content .cart_totals{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:22px;
}
.woocommerce-cart #content .cart_totals h2{ margin-top:0; font-size:19px; }
.woocommerce-cart #content .cart_totals table{ border:0; }
.woocommerce-cart #content .cart_totals table th,
.woocommerce-cart #content .cart_totals table td{
  border:0; border-bottom:1px solid var(--line); padding:12px 0;
}
.woocommerce-cart #content .cart_totals .order-total td .woocommerce-Price-amount{ font-size:20px; }
.woocommerce-cart #content .wc-proceed-to-checkout .checkout-button{ width:100%; }

/* free-shipping / cart notices reuse the notice card above */

/* ---------------------------------------------------------------------
   9. ACCOUNT — light polish (full styling is a later wave)
   --------------------------------------------------------------------- */
.woocommerce-account #content .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-account #content .woocommerce-MyAccount-navigation li{
  border-bottom:1px solid var(--line);
}
.woocommerce-account #content .woocommerce-MyAccount-navigation li a{
  display:block; padding:13px 14px; color:var(--ink-2); font-weight:600; border-radius:var(--r-sm);
}
.woocommerce-account #content .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account #content .woocommerce-MyAccount-navigation li a:hover{
  background:var(--brand-soft); color:var(--brand-ink);
}
.woocommerce-account #content .woocommerce-MyAccount-content{ }

/* ---------------------------------------------------------------------
   10. RESPONSIVE — phones, small screens, tablets.
   Site breakpoint is 960 (matches chrome + catalog + PDP). The funnel pages
   layer on native WooCommerce markup, so we drive the reflow here rather than
   trust WC's small-screen sheet. The reflow targets are ported from the v7
   "Cart & Checkout" + "Account & Orders" boards:
     - cart line item -> 64px thumb + stacked meta, rail un-sticks  (board l.445)
     - checkout       -> single column                              (board l.447)
     - account        -> sidebar nav becomes horizontal scroll tabs (board .dord-tabs)
     - form name row  -> single column on phones                    (board .row2 @540)
   ===================================================================== */

/* ===== Tablet / small desktop (<=960): collapse the funnel to one column ===== */
@media (max-width:960px){

  /* --- CHECKOUT: customer details + order review stack; review un-sticks --- */
  .woocommerce-checkout #content form.checkout.woocommerce-checkout{ display:block; }
  .woocommerce-checkout #content #customer_details,
  .woocommerce-checkout #content .woocommerce-checkout-review-order,
  .woocommerce-checkout #content #order_review,
  .woocommerce-checkout #content #order_review_heading{
    width:100%; float:none; box-sizing:border-box;
  }
  .woocommerce-checkout #content #order_review{ position:static; margin-top:18px; }
  .woocommerce-checkout #content #customer_details .col-1,
  .woocommerce-checkout #content #customer_details .col-2{ width:100%; float:none; }

  /* --- CART: totals card goes full width below the items --- */
  .woocommerce-cart #content .cart-collaterals,
  .woocommerce-cart #content .cart-collaterals .cart_totals,
  .woocommerce-cart #content .cart_totals{ width:100%; float:none; }

  /* --- ACCOUNT: side nav becomes a horizontal scrolling tab strip on top
         (the board hides the desktop .acct-side and uses .dord-tabs scroll tabs) --- */
  .woocommerce-account #content .woocommerce-MyAccount-navigation{
    width:100%; float:none; margin:0 0 20px;
  }
  .woocommerce-account #content .woocommerce-MyAccount-navigation ul{
    display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; border-bottom:1px solid var(--line);
  }
  .woocommerce-account #content .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{ display:none; }
  .woocommerce-account #content .woocommerce-MyAccount-navigation li{ border-bottom:0; flex:none; }
  .woocommerce-account #content .woocommerce-MyAccount-navigation li a{
    white-space:nowrap; padding:11px 14px; border-radius:0;
    border-bottom:2.5px solid transparent;
  }
  .woocommerce-account #content .woocommerce-MyAccount-navigation li.is-active a,
  .woocommerce-account #content .woocommerce-MyAccount-navigation li a:hover{
    background:transparent; color:var(--brand); border-bottom-color:var(--brand);
  }
  .woocommerce-account #content .woocommerce-MyAccount-content{ width:100%; float:none; }
}

/* ===== Phone (<=600): cart table -> stacked cards, tidy actions ===== */
@media (max-width:600px){

  /* result count + ordering on shop/search wrap onto their own lines */
  .woocommerce-page #content .woocommerce-result-count{ float:none; margin:0 0 10px; }
  .woocommerce-page #content .woocommerce-ordering{ float:none; }
  .woocommerce-page #content .woocommerce-ordering select{ width:100%; }

  /* --- CART table -> one card per line item (board .dlitem 64px 1fr) --- */
  .woocommerce-cart #content table.cart,
  .woocommerce-cart #content table.cart tbody{ display:block; width:100%; }
  .woocommerce-cart #content table.cart thead{ display:none; }

  .woocommerce-cart #content table.cart tr.cart_item{
    position:relative; display:grid;
    grid-template-columns:64px minmax(0,1fr);
    grid-template-areas:
      "thumb name"
      "thumb price"
      "thumb qty"
      "thumb subtotal";
    column-gap:13px; row-gap:5px; align-items:center;
    border:1px solid var(--line); border-radius:var(--r-lg);
    padding:13px 42px 13px 13px; margin-bottom:13px;
    box-shadow:var(--shadow-card);
  }
  .woocommerce-cart #content table.cart tr.cart_item td{
    display:block; border:0; padding:0; text-align:left;
  }
  .woocommerce-cart #content table.cart td.product-thumbnail{ grid-area:thumb; align-self:start; }
  .woocommerce-cart #content table.cart td.product-thumbnail img{ width:64px; height:64px; }
  .woocommerce-cart #content table.cart td.product-name{ grid-area:name; font-weight:600; line-height:1.35; }
  .woocommerce-cart #content table.cart td.product-price{ grid-area:price; }
  .woocommerce-cart #content table.cart td.product-quantity{ grid-area:qty; }
  .woocommerce-cart #content table.cart td.product-subtotal{ grid-area:subtotal; font-weight:800; }
  .woocommerce-cart #content table.cart td.product-remove{
    position:absolute; top:9px; right:9px; width:auto; margin:0;
  }
  /* inline labels from WC's data-title so price/qty/subtotal read clearly */
  .woocommerce-cart #content table.cart td.product-price::before,
  .woocommerce-cart #content table.cart td.product-quantity::before,
  .woocommerce-cart #content table.cart td.product-subtotal::before{
    content:attr(data-title) ": "; font-weight:600; color:var(--ink-3);
    font-size:12px; margin-right:4px;
  }
  .woocommerce-cart #content .quantity input.qty{ width:88px; }

  /* cart actions: coupon + update stack full width */
  .woocommerce-cart #content table.cart td.actions{ display:block; padding:14px 0 0; }
  .woocommerce-cart #content .cart .actions .coupon{ display:flex; gap:8px; margin-bottom:10px; }
  .woocommerce-cart #content .cart .actions .coupon input.input-text{ width:auto; flex:1; margin:0; }
  .woocommerce-cart #content .cart .actions .button,
  .woocommerce-cart #content .cart .actions .coupon .button{ width:100%; }

  /* checkout + account cards lose their heavy side padding on small phones */
  .woocommerce-checkout #content #customer_details .col-1,
  .woocommerce-checkout #content #customer_details .col-2,
  .woocommerce-checkout #content .woocommerce-billing-fields,
  .woocommerce-checkout #content .woocommerce-additional-fields,
  .woocommerce-checkout #content #order_review,
  .woocommerce-cart #content .cart_totals{ padding-left:16px; padding-right:16px; }
}

/* ===== Small phone (<=560): single-column name fields (board .row2 @540) ===== */
@media (max-width:560px){
  .woocommerce #content .form-row-first,
  .woocommerce #content .form-row-last,
  .woocommerce-page #content .form-row-first,
  .woocommerce-page #content .form-row-last{
    width:100%; float:none; margin-right:0;
  }
  .woocommerce-page #content .button,
  .woocommerce-page #content button.button,
  .woocommerce-page #content a.button{ width:100%; }
  /* keep small inline buttons (notice "view cart", etc.) from going full width */
  .woocommerce-page #content .woocommerce-message .button,
  .woocommerce-page #content .woocommerce-info .button,
  .woocommerce-page #content .quantity .button{ width:auto; }
}