/* ==========================================================================
   04 WOOCOMMERCE :: Shop archive, Single product, Cart, Checkout, My Account

   The Shop archive and Single product pages are Xpro Theme Builder
   templates (type_archive / type_singular) using the free
   xpro-woo-product-grid / xpro-woo-* widgets. Cart, Checkout and My Account
   stay on WooCommerce's native templates -- they carry real order/account
   data, so they are styled here, not rebuilt.

   IMPORTANT -- xpro-woo-product-grid runs on CubePortfolio (a JS masonry
   library), not a plain div grid:
     .xpro-woo-product-grid-main (cbp)
       > .cbp-wrapper-outer            (ONE child -- do not grid this level)
           > .cbp-wrapper               <-- the grid belongs HERE
               > .cbp-item x N           <-- each product card
                   > .cbp-item-wrapper   <-- everything actually lives here
   CubePortfolio's own CSS also holds captions at visibility:hidden until
   its JS reveals them; overriding its layout requires forcing visibility
   back on, or prices/titles silently disappear.
   ========================================================================== */

/* --- Grid ------------------------------------------------------------------ */
.xpro-woo-product-grid-main.cbp{ display:block !important; height:auto !important; min-height:0 !important; }
.cbp-wrapper-outer{ height:auto !important; min-height:0 !important; position:static !important; }
.cbp-wrapper{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:20px !important;
  height:auto !important; width:100% !important; position:static !important;
}
.cbp-item{
  position:relative !important; top:auto !important; left:auto !important; transform:none !important;
  width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important;
  display:flex !important; flex-direction:column !important; overflow:hidden;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-card);
  transition:transform .45s var(--ease-out),border-color .35s var(--ease),background-color .35s var(--ease);
}
/* No inset top-seam here either -- see 03-components.css for why. The
   card's own border is the complete, correctly aligned elevation cue. */
.cbp-item:hover{ transform:translateY(-6px) !important; border-color:var(--line-2); background:var(--glass-2); }

/* CubePortfolio hides captions until its own JS runs; overriding the layout
   above stops that JS path, so force everything visible. */
.cbp,.cbp *,.cbp-item,.cbp-item *,.cbp-item-wrapper,.cbp-item-wrapper *{ visibility:visible !important; }
.cbp-caption,.cbp-caption-activeWrap,.cbp-caption-defaultWrap{
  position:static !important; transform:none !important; opacity:1 !important; background:transparent !important;
}

/* --- Media (image sizing -- see note) ---------------------------------------
   The wrapper divs were absolute + height:auto, so they sized to the raw
   image and the image sized to them (circular). display:contents removes
   both wrappers from layout so the <img> is a direct child of the 4:3
   anchor and sizes against it instead. */
.cbp-item-wrapper>a:first-child{
  position:relative !important; display:block !important; width:100% !important;
  aspect-ratio:4/3 !important; height:auto !important; overflow:hidden !important;
}
.cbp-item-wrapper>a:first-child>div.xpro-woo-product-grid-img,
.cbp-item-wrapper>a:first-child div.xpro-woo-product-img-section{ display:contents !important; }
.cbp-item-wrapper>a:first-child img,
.cbp-item-wrapper>a:first-child img.xpro-woo-product-grid-img.xpro-product-img-url{
  position:absolute !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important;
  min-height:0 !important; aspect-ratio:auto !important; object-fit:cover !important; object-position:center !important;
  margin:0 !important; display:block !important; transition:transform .8s var(--ease-out);
}
.cbp-item:hover .cbp-item-wrapper img{ transform:scale(1.05); }

/* --- Card content ------------------------------------------------------------ */
.xpro-woo-product-grid-content-sec{ padding:14px 16px 16px !important; display:flex; flex-direction:column; gap:4px; flex:1 1 auto !important; }
.xpro-woo-product-grid-category-wrapper{
  margin:0; font-family:var(--font-text); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; line-height:1;
}
.xpro-woo-product-grid-category-wrapper a,.xpro_elementor_category_term_name{ color:var(--text-3) !important; }
.xpro-woo-product-grid-title{
  margin:0 !important; font-family:var(--font-display) !important; font-size:16px !important;
  font-weight:700 !important; line-height:1.3 !important; letter-spacing:-.02em; color:var(--text) !important;
}
a.xpro-woo-product-grid-title-wrapper:hover .xpro-woo-product-grid-title{ color:var(--cyan-400) !important; }
.xpro-woo-product-grid-star-rating-wrapper:empty{ display:none !important; }
.xpro-woo-product-grid-star-rating-wrapper{ color:var(--amber-400); }

.xpro-woo-product-grid-price-wrapper{
  margin-top:12px !important; padding-top:12px !important; border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:8px;
}
.xpro-woo-product-grid-price-wrapper ins .woocommerce-Price-amount,
.xpro-woo-product-grid-price-wrapper>.price>.woocommerce-Price-amount{
  color:var(--text) !important; font-family:var(--font-display) !important; font-weight:800 !important; font-size:17px !important;
}
.xpro-woo-product-grid-price-wrapper ins{ order:1; text-decoration:none; }
.xpro-woo-product-grid-price-wrapper del{ order:2; }
.xpro-woo-product-grid-price-wrapper del .woocommerce-Price-amount{ color:var(--text-3) !important; font-weight:400 !important; font-size:13px !important; }

.screen-reader-text{
  position:absolute !important; width:1px !important; height:1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important;
}

/* Sale badge -- amber, consistent with the licence-status rule */
.xpro-woo-product-grid-badges-wrapper{ position:absolute; top:12px; left:12px; z-index:4; }
.xpro-onsale,.xpro-woo-sale-flash-btn-inner{
  background:var(--amber-500) !important; color:var(--amber-on) !important;
  border-radius:var(--r-pill) !important; padding:4px 10px !important;
  font-family:var(--font-text) !important; font-weight:800 !important; font-size:10px !important;
  text-transform:uppercase; letter-spacing:.1em; line-height:1 !important;
  min-height:0 !important; min-width:0 !important; display:inline-block !important;
}

/* --- Single product ----------------------------------------------------------- */
.mh-pdp-media img{ width:100%; height:auto; border-radius:var(--r-panel); border:1px solid var(--line); overflow:hidden; }
.xpro-woo-product-title-text{
  font-family:var(--font-display) !important; font-weight:800 !important; letter-spacing:-.035em;
  line-height:1.08; color:var(--text) !important; font-size:clamp(26px,3.2vw,40px) !important;
}
.xpro-woo-product-price-cls .price,.xpro-woo-product-price-cls .woocommerce-Price-amount{
  color:var(--text) !important; font-family:var(--font-display); font-weight:800; font-size:32px;
}
.xpro-woo-product-price-cls del .woocommerce-Price-amount{ color:var(--text-3) !important; font-size:18px; font-weight:400; }
.xpro-woo-product-price-cls ins{ text-decoration:none; }
.xpro-woo-product-desc-cls{ color:var(--text-2); font-family:var(--font-text); line-height:1.65; }
.mh-atc .quantity input{ background:var(--ink-800) !important; color:var(--text) !important; border:1px solid var(--line) !important; border-radius:10px !important; }
.mh-atc button.single_add_to_cart_button,.mh-atc .single_add_to_cart_button{
  background:linear-gradient(180deg,var(--cyan-300),var(--cyan-500)) !important; color:var(--on-cyan) !important;
  border-radius:var(--r-pill) !important; padding:14px 28px !important; font-family:var(--font-text); font-weight:700; border:0;
}
.mh-atc .stock.in-stock{ color:var(--ok) !important; }

/* --- Cart / Checkout / My Account (native WooCommerce templates) -------------- */
.woocommerce,.woocommerce-page{ color:var(--text-2); }
.woocommerce .page-title,.woocommerce-products-header__title{
  font-family:var(--font-display); font-size:clamp(30px,4vw,46px); font-weight:800;
  letter-spacing:-.035em; color:var(--text);
}
.woocommerce .woocommerce-result-count{ color:var(--text-3); }

.woocommerce form.login,.woocommerce form.register,
.woocommerce-EditAccountForm,.woocommerce-address-fields,
.woocommerce form.checkout_coupon{
  background:var(--glass) !important; border:1px solid var(--line) !important;
  border-radius:var(--r-card) !important; padding:26px !important; color:var(--text-2);
}
.woocommerce label,.woocommerce-page label,.woocommerce form .form-row label,
.woocommerce-account label,.woocommerce-checkout label,.woocommerce .woocommerce-form__label span{
  color:var(--text-2) !important; font-family:var(--font-text); font-weight:600; font-size:13px;
}
.woocommerce input.input-text,.woocommerce-Input,.woocommerce input[type=text],
.woocommerce input[type=email],.woocommerce input[type=password],.woocommerce input[type=tel],
.woocommerce input[type=number],.woocommerce input[type=search],.woocommerce textarea,
.woocommerce select,.woocommerce-page input.input-text,.woocommerce-page select,
.woocommerce-page textarea,#username,#password,#coupon_code{
  background:var(--ink-800) !important; color:var(--text) !important;
  border:1px solid var(--line) !important; border-radius:12px !important;
  padding:12px 15px !important; font-family:var(--font-text) !important; font-size:15px !important; box-shadow:none !important;
}
.woocommerce input::placeholder,.woocommerce textarea::placeholder,.woocommerce-page input::placeholder{ color:var(--text-3) !important; opacity:1; }
.woocommerce input:focus,.woocommerce select:focus,.woocommerce textarea:focus,
.woocommerce-page input:focus,#username:focus,#password:focus{
  outline:none !important; border-color:var(--cyan-400) !important; box-shadow:0 0 0 4px var(--cyan-soft) !important;
}
.select2-container--default .select2-selection--single{ background:var(--ink-800) !important; border:1px solid var(--line) !important; border-radius:12px !important; height:46px !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--text) !important; line-height:46px !important; padding-left:15px; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:46px !important; }
.select2-dropdown,.select2-container--default .select2-results>.select2-results__options{ background:var(--ink-800) !important; border-color:var(--line) !important; color:var(--text) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--cyan-soft) !important; color:var(--cyan-300) !important; }
.select2-search--dropdown .select2-search__field{ background:var(--ink-850) !important; color:var(--text) !important; border:1px solid var(--line) !important; border-radius:8px !important; }

.woocommerce-privacy-policy-text p{ color:var(--text-3); font-size:13px; }

.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  background:linear-gradient(180deg,var(--cyan-300),var(--cyan-500)) !important;
  color:var(--on-cyan) !important; border-radius:var(--r-pill) !important;
  font-family:var(--font-text); font-weight:700; padding:12px 24px; border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 10px 30px rgba(34,211,238,.20);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease);
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,.woocommerce a.button.alt:hover{
  background:var(--cyan-300) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 16px 44px rgba(34,211,238,.32);
}
.woocommerce a.button:active,.woocommerce button.button:active{ transform:scale(.96); }

.woocommerce table.shop_table,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-navigation{
  background:var(--glass); border:1px solid var(--line) !important; border-radius:var(--r-card); color:var(--text-2);
}
.woocommerce table.shop_table th{ color:var(--text-3); font-family:var(--font-text); font-size:11px; text-transform:uppercase; letter-spacing:.14em; border-color:var(--line) !important; }
.woocommerce table.shop_table td{ border-color:var(--line) !important; color:var(--text-2); }
.woocommerce table.shop_table a{ color:var(--text); }
.woocommerce table.shop_table tbody th,.woocommerce table.shop_table tfoot td,.woocommerce table.shop_table tfoot th{ color:var(--text) !important; border-color:var(--line) !important; }
.woocommerce-cart table.cart img{ border-radius:10px; background:var(--ink-800); }
.woocommerce .cart_totals h2,.woocommerce-checkout h3,.woocommerce-billing-fields h3{ font-family:var(--font-display); color:var(--text); font-weight:800; letter-spacing:-.02em; }
.woocommerce .quantity .qty{ background:var(--ink-800) !important; color:var(--text) !important; }

.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:10px; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ margin:0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block; padding:10px 14px; border-radius:12px; color:var(--text-2);
  font-weight:600; font-size:14px; transition:background-color .2s var(--ease),color .2s var(--ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ background:var(--glass); color:var(--text); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--cyan-soft); color:var(--cyan-300); }

.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--ink-800) !important; color:var(--text-2) !important;
  border-top:3px solid var(--cyan-400); border-radius:var(--r-chip);
}
.woocommerce-message::before,.woocommerce-info::before{ color:var(--cyan-400); }
.woocommerce-error{ border-top-color:var(--warn); }


/* ==========================================================================
   08 CHECKOUT + CART :: 2-col grid, sticky summary, payment pills, trust row
   Reference: .checkout/.summary/.totals/.pays/.trust/.note (marketence-hub.html)
   ========================================================================== */
@media (min-width:901px){
  .woocommerce-checkout form.checkout{
    display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--s-7); align-items:start;
  }
  .woocommerce-checkout .col2-set{ grid-column:1; grid-row:1; }
  .woocommerce-checkout #order_review_heading{ grid-column:2; grid-row:1; margin-top:0; }
  .woocommerce-checkout #order_review{ grid-column:2; grid-row:2; position:sticky; top:calc(var(--h-header) + 16px); }
}
.woocommerce-checkout #order_review{
  background:var(--ink-800); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s-5);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table{ background:transparent; border:0; }
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td{ border-color:var(--line); }
.woocommerce-checkout .order-total th,.woocommerce-checkout .order-total td{
  font-size:19px; font-weight:800; color:var(--text) !important; border-top:1px solid var(--line); padding-top:12px;
}

ul.wc_payment_methods{ list-style:none; margin:var(--s-4) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
ul.payment_methods li{ flex:1 1 auto; position:relative; }
ul.payment_methods li input.input-radio{ position:absolute; opacity:0; width:1px; height:1px; }
ul.payment_methods li>label{
  display:block; border:1px solid var(--line); border-radius:12px; padding:11px;
  text-align:center; cursor:pointer; font-size:var(--t-xs); font-weight:600;
  background:var(--glass); color:var(--text-2); transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
ul.payment_methods li input.input-radio:checked~label{ border-color:var(--cyan-400); color:var(--cyan-300); background:var(--cyan-soft); }
.payment_box{ background:var(--ink-850) !important; border-radius:12px; margin-top:8px !important; color:var(--text-2); }
.payment_box:before{ display:none !important; }

#place_order{
  width:100%; margin-top:var(--s-4);
  background:linear-gradient(180deg,var(--cyan-300),var(--cyan-500)) !important; color:var(--on-cyan) !important;
  border-radius:var(--r-pill) !important; padding:16px 30px !important; font-weight:700 !important; font-size:var(--t-body) !important; border:0 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset,0 10px 30px rgba(34,211,238,.22);
}

.mh-checkout-trust{ display:flex; gap:var(--s-4); flex-wrap:wrap; justify-content:center; margin-top:var(--s-4); }
.mh-checkout-trust span{ display:flex; align-items:center; gap:6px; font-size:var(--t-xs); color:var(--text-3); }
.mh-checkout-trust svg{ color:var(--ok); flex:none; }

.mh-note{
  background:var(--ok-soft); border:1px solid rgba(52,211,153,.22); border-radius:14px;
  padding:13px 15px; display:flex; gap:11px; align-items:flex-start; font-size:var(--t-sm);
  margin-bottom:var(--s-6); max-width:760px; color:var(--text-2);
}
.mh-note svg{ color:var(--ok); flex:none; margin-top:2px; }
.mh-note strong{ color:var(--text); }

@media (min-width:901px){
  .woocommerce-cart .woocommerce{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--s-7); align-items:start; }
  .woocommerce-cart form.woocommerce-cart-form{ grid-column:1; }
  .woocommerce-cart .cart-collaterals{ grid-column:2; position:sticky; top:calc(var(--h-header) + 16px); }
}
.woocommerce-cart .cart-collaterals .cart_totals{ width:100% !important; float:none !important; }
.woocommerce-cart table.cart{ background:transparent; border:0; }
.woocommerce-cart table.cart th,.woocommerce-cart table.cart td{ border-color:var(--line); }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button{
  display:block !important; width:100%; text-align:center;
  background:linear-gradient(180deg,var(--cyan-300),var(--cyan-500)) !important; color:var(--on-cyan) !important;
  border-radius:var(--r-pill) !important; padding:16px 30px !important; font-weight:700 !important; box-shadow:none !important;
}