/*
Theme Name:   Hello Elementor Child — Xaisan Essentials
Theme URI:    https://xaisanessentials.com
Description:  Child theme for Xaisan Essentials. Carries the brand design tokens
              (Xaisan-Essentials-Design.md v1.0), font stacks and commerce snippets.
              All visible layout is built in Elementor Theme Builder.
Author:       Xaisan Essentials
Version:      1.0.0
Template:     hello-elementor
Text Domain:  hello-child
*/

/* ============================================================
   1 · Design tokens — Xaisan-Essentials-Design.md §10
   ============================================================ */
:root{
  --xe-pine:#14524A;
  --xe-pine-tint:#E4EFEC;
  --xe-ink:#1E2726;
  --xe-porcelain:#FAF7F2;
  --xe-surface:#FFFFFF;
  --xe-amber:#E98A15;
  --xe-amber-deep:#C97207;
  --xe-success:#2E7D4F;
  --xe-danger:#C6473E;
  --xe-muted:#5C6B68;
  --xe-border:#E7E2D9;
  --xe-whatsapp:#25D366;
  --xe-radius:10px;
  --xe-radius-card:14px;
  --xe-shadow-hover:0 6px 20px rgba(30,39,38,.08);
  --xe-font-display:'Bricolage Grotesque','Noto Sans Bengali',system-ui,sans-serif;
  --xe-font-body:'Figtree','Noto Sans Bengali',system-ui,sans-serif;
}

/* ============================================================
   2 · Base
   ============================================================ */
body{
  background:var(--xe-porcelain);
  color:var(--xe-ink);
  font-family:var(--xe-font-body);
  font-size:16px;
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6{font-family:var(--xe-font-display);color:var(--xe-ink);text-wrap:balance}
/* Bengali script needs more breathing room — Design.md §3 */
:lang(bn),.xe-bn{line-height:1.45}

/* Visible focus ring is non-negotiable — Design.md §4 */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,.elementor-button:focus-visible{
  outline:2px solid var(--xe-pine);
  outline-offset:2px;
}

/* ============================================================
   3 · Buttons — radius 10px, min-height 48px (thumb-friendly)
   ============================================================ */
.elementor-button,.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce #respond input#submit{
  font-family:var(--xe-font-body);
  font-weight:600;
  border-radius:var(--xe-radius);
  min-height:48px;
  transition:background-color .18s ease-out,border-color .18s ease-out,color .18s ease-out;
}
.elementor-button:active,.woocommerce a.button:active{transform:translateY(1px)}

/* Primary (Amber) = the one action per view */
.xe-btn-primary,.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,.woocommerce a.button.alt{
  background:var(--xe-amber);
  color:#fff;
}
.xe-btn-primary:hover,.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover{background:var(--xe-amber-deep);color:#fff}

/* Secondary (Pine outline) */
.xe-btn-secondary{
  background:transparent;
  border:1.5px solid var(--xe-pine);
  color:var(--xe-pine);
}
.xe-btn-secondary:hover{background:var(--xe-pine-tint);color:var(--xe-pine)}

/* WhatsApp — this green is used for nothing else */
.xe-btn-whatsapp{background:var(--xe-whatsapp);color:#fff}
.xe-btn-whatsapp:hover{background:#1EBE5A;color:#fff}

/* Disabled / out of stock */
.xe-btn-disabled,.woocommerce button.button:disabled,
.woocommerce button.button.disabled{
  background:var(--xe-border);
  color:var(--xe-muted);
  cursor:not-allowed;
}

/* ============================================================
   4 · Prices — always ৳ before the number, tabular numerals
   ============================================================ */
.woocommerce div.product p.price,.woocommerce div.product span.price,
.woocommerce ul.products li.product .price{
  color:var(--xe-ink);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.woocommerce del,.woocommerce del .amount{
  color:var(--xe-muted);
  font-weight:400;
  opacity:1;
}
.woocommerce ins{text-decoration:none}

/* ============================================================
   5 · Forms — 16px text prevents iOS zoom; 48px touch targets
   ============================================================ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.xe-field input,.xe-field textarea,.xe-field select{
  background:var(--xe-surface);
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  min-height:48px;
  padding:12px 14px;
  font-size:16px;
  font-family:var(--xe-font-body);
  color:var(--xe-ink);
  width:100%;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  outline:none;
  border-color:var(--xe-pine);
  box-shadow:0 0 0 3px rgba(20,82,74,.14);
}
.woocommerce form .form-row label{
  font-weight:600;
  font-size:15px;
  margin-bottom:6px;
  display:block;
}
/* Errors: Brick border + message below the field */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea{border-color:var(--xe-danger)}
.xe-field-error{color:var(--xe-danger);font-size:13px;margin-top:6px;display:block}

/* ============================================================
   6 · Badges & chips — pill radius, weight 500
   ============================================================ */
.xe-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--xe-pine-tint);color:var(--xe-pine);
  border-radius:999px;padding:4px 12px;
  font-size:13px;font-weight:500;line-height:1.4;
}
.xe-badge-cod{
  display:inline-block;border-radius:999px;padding:3px 12px;
  border:1.5px solid var(--xe-success);color:var(--xe-success);
  font-size:12px;font-weight:500;
}
.woocommerce span.onsale{
  background:var(--xe-amber);
  color:#fff;
  border-radius:999px;
  font-weight:600;
  font-size:12px;
  min-height:auto;
  min-width:auto;
  padding:3px 12px;
  line-height:1.5;
}

/* Stock status — Leaf / Brick */
.woocommerce div.product .stock{color:var(--xe-success);font-weight:500}
.woocommerce div.product .out-of-stock{color:var(--xe-danger);font-weight:500}

/* Review stars in Amber */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before{color:var(--xe-amber)}

/* ============================================================
   7 · Cards / product tiles
   ============================================================ */
.woocommerce ul.products li.product{
  background:var(--xe-surface);
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius-card);
  overflow:hidden;
  transition:box-shadow .18s ease-out;
}
.woocommerce ul.products li.product:hover{box-shadow:var(--xe-shadow-hover)}

/* ============================================================
   8 · Header
   ============================================================ */

/* Track Order is a utility action, not a category — keep it on one
   line and visually distinct from the centred menu. */
.xe-track-pill .elementor-button{
  white-space:nowrap;
  min-height:40px;
  line-height:1.2;
}

/* The cart toggle ships with a button border/background; strip it back
   to a bare icon so it reads as an icon, not a third button. */
.xe-cart .elementor-menu-cart__toggle .elementor-button{
  border:none;
  background:transparent;
  padding:8px;
  min-height:auto;
}
.xe-cart .elementor-menu-cart__toggle .elementor-button:hover{background:var(--xe-pine-tint)}
.xe-cart .elementor-button-icon{position:relative}

/* Hide the counter bubble while the cart is empty. Elementor prints a "0"
   badge regardless of the empty-indicator setting, and an amber "0" beside
   the cart reads as an error rather than as "nothing here yet". */
.elementor-button-icon-qty[data-counter="0"]{
  display:none!important;
}

/* Hamburger toggle: bare icon, matching the cart. */
.xe-nav-mobile .elementor-menu-toggle{
  background:transparent;
  padding:8px;
  border-radius:var(--xe-radius);
}
.xe-nav-mobile .elementor-menu-toggle:hover{background:var(--xe-pine-tint)}

/* Keep the sticky header above Elementor's side-cart backdrop. */
#xe-header{z-index:100}

/* Announcement bar sits flush above the header. */
#xe-announcement p{margin:0}

/* ============================================================
   9 · Product cards (loop)
   ============================================================ */
.woocommerce ul.products li.product{
  display:flex;
  flex-direction:column;
  padding:0 0 14px;
  text-align:left;
}
.woocommerce ul.products li.product a img{
  margin:0 0 10px;
  border-radius:var(--xe-radius-card) var(--xe-radius-card) 0 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--xe-font-body);
  font-size:15px;
  font-weight:600;
  line-height:1.35;
  color:var(--xe-ink);
  padding:0 14px 6px;
}
.woocommerce ul.products li.product .star-rating{
  margin:0 14px 8px;
  font-size:.8em;
}
.woocommerce ul.products li.product .price{
  display:block;
  padding:0 14px 12px;
  font-size:18px;
}
.woocommerce ul.products li.product .price del{margin-right:6px;font-size:14px}
.woocommerce ul.products li.product .price ins{font-weight:700}

/* Pain-point chip sits above the title */
.xe-loop-chip{margin:0 14px 8px;align-self:flex-start;font-size:12px}

/* Both buttons full-width inside the card, Order Now first and amber */
.woocommerce ul.products li.product .button{
  margin:0 14px 8px;
  width:calc(100% - 28px);
  text-align:center;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  border-radius:var(--xe-radius);
}
.woocommerce ul.products li.product .xe-loop-order-now{
  background:var(--xe-amber);
  color:#fff;
  font-weight:600;
  order:98;
}
.woocommerce ul.products li.product .xe-loop-order-now:hover{background:var(--xe-amber-deep);color:#fff}
/* Add to Cart is the quieter secondary path */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple{
  background:transparent;
  border:1.5px solid var(--xe-pine);
  color:var(--xe-pine);
  font-weight:600;
  order:99;
  min-height:40px;
  font-size:13px;
}
.woocommerce ul.products li.product .add_to_cart_button:hover{
  background:var(--xe-pine-tint);
  color:var(--xe-pine);
}
/* Sold-out cards keep the price visible, button disabled (PRD §5.4) */
.woocommerce ul.products li.product .outofstock-button,
.woocommerce ul.products li.product a.button[disabled]{
  background:var(--xe-border);
  color:var(--xe-muted);
  border:none;
}

/* Category cards on Home */
.xe-cat-card{transition:box-shadow .18s ease-out}
.xe-cat-card:hover{box-shadow:var(--xe-shadow-hover)}

/* ============================================================
   10 · Single product page (Templates A & B)
   ============================================================ */

/* -- Buy block -- */
#xe-buy-block .xe-solves-chip{margin-bottom:2px}
#xe-buy-block .woocommerce-product-rating{margin:0}
#xe-buy-block .star-rating{float:none;display:inline-block;vertical-align:middle;margin-right:8px}
#xe-buy-block .woocommerce-review-link{color:var(--xe-muted);font-size:14px}
.xe-single-price .price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.xe-single-price del{font-size:16px}
.xe-single-price ins{text-decoration:none}

/* Delivery + warranty lines */
.xe-delivery-line,.xe-warranty-line{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14px;line-height:1.5;color:var(--xe-ink);
}
.xe-delivery-line{
  background:var(--xe-surface);
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  padding:12px 14px;
}
.xe-delivery-line svg,.xe-warranty-line svg{color:var(--xe-pine);flex:none}
.xe-delivery-line a{text-decoration:underline;white-space:nowrap}
.xe-warranty-line{font-weight:500}

/* -- Buy form: quantity + full-width buttons -- */
.xe-buy-form form.cart{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
}
.xe-buy-form .quantity{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  background:var(--xe-surface);
  overflow:hidden;
  width:max-content;
}
.xe-buy-form .quantity .qty{
  width:64px;
  min-height:48px;
  text-align:center;
  border:none;
  font-size:16px;
  font-weight:600;
  background:transparent;
}
.xe-buy-form .single_add_to_cart_button{
  width:100%;
  background:var(--xe-amber);
  color:#fff;
  min-height:52px;
  font-size:16px;
  font-weight:600;
  border-radius:var(--xe-radius);
}
.xe-buy-form .single_add_to_cart_button:hover{background:var(--xe-amber-deep);color:#fff}

/* WhatsApp button sits directly beneath the primary button.
   Elementor styles .button inside the add-to-cart widget, so this needs
   matching specificity to keep the WhatsApp green. */
.woocommerce a.button.xe-wa-button,
.woocommerce div.product form.cart a.button.xe-wa-button,
.elementor-widget-woocommerce-product-add-to-cart a.button.xe-wa-button,
a.xe-wa-button{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  background-color:var(--xe-whatsapp)!important;
  color:#fff!important;
  min-height:52px;
  border:none;
  border-radius:var(--xe-radius);
  font-weight:600;
  font-size:16px;
  text-decoration:none;
}
.woocommerce a.button.xe-wa-button:hover,
.elementor-widget-woocommerce-product-add-to-cart a.button.xe-wa-button:hover,
a.xe-wa-button:hover{background-color:#1EBE5A!important;color:#fff!important}
.xe-wa-button svg{flex:none}
.xe-single-cod{margin-top:4px;display:inline-block}
.xe-soldout-note{
  margin-top:10px;
  font-size:14px;
  color:var(--xe-muted);
  max-width:52ch;
}
.woocommerce div.product .stock.out-of-stock{
  color:var(--xe-danger);
  font-weight:600;
  margin-bottom:10px;
}

/* -- Gallery -- */
.xe-gallery .woocommerce-product-gallery__image img{border-radius:var(--xe-radius-card)}
.xe-gallery .flex-control-thumbs{
  display:flex;gap:8px;margin-top:10px;padding:0;list-style:none;
}
.xe-gallery .flex-control-thumbs li{width:80px;margin:0}
.xe-gallery .flex-control-thumbs img{
  border:1.5px solid var(--xe-border);
  border-radius:var(--xe-radius);
  opacity:1;
}
.xe-gallery .flex-control-thumbs img.flex-active{border-color:var(--xe-pine)}
.xe-gallery .onsale{
  background:var(--xe-amber);
  color:#fff;
  border-radius:999px;
  padding:4px 14px;
  font-weight:600;
  font-size:12px;
  top:12px;
  left:12px;
  right:auto;
  margin:0;
}

/* -- Pain → Fix -- */
.xe-painfix p{max-width:65ch}

/* -- Description: benefits list + spec table -- */
.xe-product-content h3{
  font-family:var(--xe-font-display);
  font-size:19px;
  margin:24px 0 10px;
}
.xe-product-content ul{
  list-style:none;
  padding:0;
  margin:0 0 8px;
  display:grid;
  gap:10px;
}
.xe-product-content ul li{
  position:relative;
  padding-left:28px;
  max-width:65ch;
  line-height:1.55;
}
.xe-product-content ul li::before{
  content:"";
  position:absolute;
  left:0;top:.45em;
  width:16px;height:16px;
  border-radius:999px;
  background:var(--xe-pine-tint);
  box-shadow:inset 0 0 0 2px var(--xe-pine);
}
.xe-product-content table.xe-specs{
  width:100%;
  max-width:640px;
  border-collapse:collapse;
  background:var(--xe-surface);
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  overflow:hidden;
  font-size:15px;
}
.xe-product-content table.xe-specs th,
.xe-product-content table.xe-specs td{
  padding:12px 16px;
  text-align:left;
  border-bottom:1px solid var(--xe-border);
  vertical-align:top;
}
.xe-product-content table.xe-specs tr:last-child th,
.xe-product-content table.xe-specs tr:last-child td{border-bottom:none}
.xe-product-content table.xe-specs th{
  width:42%;
  font-weight:600;
  background:var(--xe-porcelain);
}

/* -- Review / description tabs -- */
.xe-tabs .woocommerce-tabs ul.tabs{
  padding:0;
  margin:0 0 20px;
  border-bottom:1px solid var(--xe-border);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.xe-tabs .woocommerce-tabs ul.tabs::before,
.xe-tabs .woocommerce-tabs ul.tabs li::before,
.xe-tabs .woocommerce-tabs ul.tabs li::after{display:none}
.xe-tabs .woocommerce-tabs ul.tabs li{
  background:transparent;
  border:none;
  border-radius:0;
  margin:0;
  padding:0;
}
.xe-tabs .woocommerce-tabs ul.tabs li a{
  display:block;
  padding:12px 4px;
  color:var(--xe-muted);
  font-weight:600;
  border-bottom:2px solid transparent;
}
.xe-tabs .woocommerce-tabs ul.tabs li.active a{
  color:var(--xe-pine);
  border-bottom-color:var(--xe-pine);
}
.xe-tabs .woocommerce-Reviews .comment-text{
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius-card);
  padding:16px;
  background:var(--xe-surface);
}

/* -- Related / cross-sell -- */
.xe-related h2{
  font-family:var(--xe-font-display);
  font-size:26px;
  margin-bottom:16px;
}

/* -- Sticky mobile buy bar -- */
#xe-sticky-bar{
  box-shadow:0 -4px 16px rgba(30,39,38,.08);
  z-index:95;
}
#xe-sticky-bar .xe-sticky-price-wrap{flex:none}
#xe-sticky-bar .xe-sticky-btn-wrap{flex:1}
.xe-sticky-price .price{
  font-size:18px;
  font-weight:700;
  line-height:1.2;
  color:var(--xe-ink);
}
.xe-sticky-price del{font-size:13px;display:block;color:var(--xe-muted)}
.xe-sticky-price ins{text-decoration:none}
.woocommerce a.button.xe-sticky-order,
a.xe-sticky-order{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  background-color:var(--xe-amber)!important;
  color:#fff!important;
  font-weight:600;
  font-size:15px;
  border:none;
  border-radius:var(--xe-radius);
  text-decoration:none;
}
.woocommerce a.button.xe-sticky-order:hover,
a.xe-sticky-order:hover{background-color:var(--xe-amber-deep)!important;color:#fff!important}
/* Keep the last section clear of the fixed bar */
@media(max-width:1024px){
  body.single-product .xe-related{padding-bottom:80px}
}

/* ============================================================
   11 · Template B extras
   ============================================================ */

/* Trust panels — always open, never collapsed */
.xe-trust-panel p{margin:0 0 8px;font-size:15px;color:var(--xe-muted);line-height:1.6}
.xe-trust-panel p:last-child{margin-bottom:0}
.xe-trust-panel a{text-decoration:underline;font-weight:500}
.xe-order-steps{
  margin:0;
  padding-left:20px;
  color:var(--xe-muted);
  font-size:15px;
  line-height:1.6;
}
.xe-order-steps li{margin-bottom:4px}
.xe-order-steps li:last-child{margin-bottom:0}

/* Template B gives each block its own section heading and shows the full
   spec table separately, so the description's inline headings and short
   table are redundant here. */
.xe-hide-specs table.xe-specs{display:none}
.xe-hide-specs h3{display:none}

.xe-specs-full{
  width:100%;
  max-width:760px;
  border-collapse:collapse;
  background:var(--xe-surface);
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  overflow:hidden;
  font-size:15px;
}
.xe-specs-full th,.xe-specs-full td{
  padding:12px 16px;
  text-align:left;
  border-bottom:1px solid var(--xe-border);
  vertical-align:top;
  overflow-wrap:anywhere;
}
.xe-specs-full tr:last-child th,.xe-specs-full tr:last-child td{border-bottom:none}
.xe-specs-full th{
  width:38%;
  font-weight:600;
  background:var(--xe-porcelain);
  color:var(--xe-ink);
}

/* Q&A */
.xe-qa{display:grid;gap:18px;max-width:760px}
.xe-qa-q{
  margin:0 0 4px;
  font-weight:600;
  color:var(--xe-ink);
  font-size:16px;
  display:flex;
  gap:8px;
}
.xe-qa-q::before{content:"Q.";color:var(--xe-pine);font-weight:700;flex:none}
.xe-qa-a{
  margin:0;
  color:var(--xe-muted);
  font-size:15px;
  line-height:1.6;
  display:flex;
  gap:8px;
}
.xe-qa-a::before{content:"A.";color:var(--xe-amber-deep);font-weight:700;flex:none}

/* Video */
.xe-video{max-width:760px;aspect-ratio:16/9}
.xe-video iframe{width:100%;height:100%;border-radius:var(--xe-radius-card)}
.xe-video-placeholder{
  max-width:760px;
  aspect-ratio:16/9;
  border-radius:var(--xe-radius-card);
  background:linear-gradient(160deg,#1E2726,#14524A);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.8);
  font-size:14px;
  text-align:center;
  padding:16px;
}

/* Reviews get more room on Template B */
.xe-tabs-roomy .woocommerce-Reviews{max-width:860px}

/* ============================================================
   12 · Floating WhatsApp button (PRD §3.5)
   ============================================================ */
.xe-wa-float{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:90;
  width:56px;
  height:56px;
  border-radius:999px;
  background:var(--xe-whatsapp);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(30,39,38,.25);
  transition:background-color .18s ease-out;
}
.xe-wa-float:hover{background:#1EBE5A;color:#fff}
/* Sit above the sticky buy bar on product pages */
@media(max-width:1024px){
  body.single-product .xe-wa-float{bottom:88px}
}

/* ============================================================
   13 · Cart & checkout
   ============================================================ */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce{max-width:1200px;margin-inline:auto}

/* Cart line items */
.woocommerce table.shop_table{
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius-card);
  border-collapse:separate;
  border-spacing:0;
  background:var(--xe-surface);
  overflow:hidden;
}
.woocommerce table.shop_table th{
  background:var(--xe-porcelain);
  font-family:var(--xe-font-body);
  font-weight:600;
  font-size:14px;
  color:var(--xe-ink);
}
.woocommerce table.shop_table td{vertical-align:middle}
.woocommerce table.cart img{width:64px;border-radius:var(--xe-radius)}
.woocommerce table.cart .product-name a{color:var(--xe-ink);font-weight:600}
.woocommerce .cart .quantity .qty{
  min-height:44px;
  width:70px;
  text-align:center;
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  background:var(--xe-surface);
}
.woocommerce a.remove{
  color:var(--xe-muted)!important;
  font-weight:400;
}
.woocommerce a.remove:hover{background:transparent;color:var(--xe-danger)!important}

/* Totals box */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review{
  background:var(--xe-surface);
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius-card);
  padding:20px;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading{
  font-family:var(--xe-font-display);
  font-size:20px;
  margin-bottom:14px;
}
.xe-delivery-note{
  font-size:13px;
  color:var(--xe-muted);
  line-height:1.5;
  margin:0 0 10px;
}
.woocommerce .cart_totals .order-total .amount{font-size:20px}

/* Amber primary actions */
.woocommerce .checkout-button,
.woocommerce #place_order{
  background:var(--xe-amber)!important;
  color:#fff!important;
  min-height:52px;
  border-radius:var(--xe-radius);
  font-weight:600;
  font-size:16px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover{background:var(--xe-amber-deep)!important}

/* Cross-sell row */
.woocommerce .cross-sells h2{
  font-family:var(--xe-font-display);
  font-size:18px;
  margin-bottom:12px;
}

/* Checkout form */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:100%;float:none}
.woocommerce-checkout h3{
  font-family:var(--xe-font-display);
  font-size:20px;
  margin-bottom:14px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper{
  display:grid;
  gap:4px;
}
.woocommerce form .form-row{margin-bottom:16px;padding:0}
.woocommerce-checkout #payment{
  background:transparent;
  border-radius:0;
}
.woocommerce-checkout #payment ul.payment_methods{
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  background:var(--xe-surface);
  padding:14px 16px;
  margin-bottom:16px;
}
.woocommerce-checkout #payment ul.payment_methods li{
  list-style:none;
  margin:0;
}
.woocommerce-checkout #payment ul.payment_methods label{
  font-weight:600;
  color:var(--xe-ink);
}
.woocommerce-checkout #payment div.payment_box{
  background:transparent;
  color:var(--xe-muted);
  font-size:14px;
  padding:6px 0 0;
  margin:0;
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment div.form-row.place-order{padding:0;margin:0}

.xe-checkout-fineprint{
  font-size:13px;
  color:var(--xe-muted);
  text-align:center;
  margin-top:12px;
  line-height:1.6;
}
.xe-checkout-fineprint a{text-decoration:underline}
.xe-checkout-trustline{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid var(--xe-border);
  font-size:13px;
  color:var(--xe-muted);
}

/* Distraction-free checkout (PRD §4.6): logo only, no nav, no footer links.
   Scoped so the order-received page — which shares the same page ID —
   keeps the full header and footer. */
.woocommerce-checkout:not(.woocommerce-order-received) .xe-nav-main,
.woocommerce-checkout:not(.woocommerce-order-received) .xe-track-pill,
.woocommerce-checkout:not(.woocommerce-order-received) .xe-cart,
.woocommerce-checkout:not(.woocommerce-order-received) .xe-nav-mobile,
.woocommerce-checkout:not(.woocommerce-order-received) #xe-announcement,
.woocommerce-checkout:not(.woocommerce-order-received) #xe-trustbar,
.woocommerce-checkout:not(.woocommerce-order-received) [data-elementor-type="footer"] > .e-con:not(:last-child){
  display:none!important;
}
/* Centre the lone logo while the nav is hidden */
.woocommerce-checkout:not(.woocommerce-order-received) #xe-header .header-side{
  flex:1 1 auto;
  justify-content:center;
}
.woocommerce-checkout:not(.woocommerce-order-received) #xe-header{
  position:static;
}

@media(min-width:900px){
  .woocommerce-checkout form.checkout{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    grid-template-rows:auto 1fr;
    column-gap:40px;
    align-items:start;
  }
  /* Billing spans both rows so the summary can sit tight under its
     heading instead of being pushed down by the taller left column. */
  .woocommerce-checkout form.checkout .col2-set{grid-column:1;grid-row:1 / span 2}
  .woocommerce-checkout form.checkout #order_review_heading{grid-column:2;grid-row:1;margin:0 0 14px}
  .woocommerce-checkout form.checkout #order_review{grid-column:2;grid-row:2;align-self:start}
  .xe-checkout-trustline{grid-column:1 / -1}
}

/* ============================================================
   14 · Order received (thank-you)
   ============================================================ */
.xe-orc{max-width:640px;margin-inline:auto;text-align:center;padding-block:40px}
.xe-orc-check{color:var(--xe-success);display:inline-flex;margin-bottom:18px}
.xe-orc-title{
  font-family:var(--xe-font-display);
  font-size:30px;
  line-height:1.2;
  margin-bottom:8px;
}
@media(max-width:767px){.xe-orc-title{font-size:24px}}
.xe-orc-bn{color:var(--xe-pine);font-weight:500;margin-bottom:26px}
.xe-orc-card{
  background:var(--xe-surface);
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius-card);
  padding:20px;
  text-align:left;
  margin-bottom:26px;
}
.xe-orc-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:14px;
  font-size:15px;
}
.xe-orc-number{color:var(--xe-pine);font-family:var(--xe-font-display);font-size:18px}
.xe-orc-item{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
  font-size:14px;
}
.xe-orc-thumb img{width:48px;height:48px;border-radius:var(--xe-radius);display:block}
.xe-orc-name{flex:1;line-height:1.35}
.xe-orc-name small{display:block;color:var(--xe-muted)}
.xe-orc-price{font-weight:600;white-space:nowrap}
.xe-orc-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:15px;
  margin-bottom:8px;
}
.xe-orc-row > *:last-child{text-align:right}
.xe-orc-muted{color:var(--xe-muted);font-size:13px}
.xe-orc-total{
  font-weight:700;
  font-size:18px;
  border-top:1px solid var(--xe-border);
  padding-top:12px;
  margin-top:6px;
}
.xe-orc-total small{font-weight:400;font-size:13px;color:var(--xe-muted)}
.xe-orc-steps{
  counter-reset:xestep;
  list-style:none;
  text-align:left;
  max-width:480px;
  margin:0 auto 24px;
  padding:0;
}
.xe-orc-steps li{
  counter-increment:xestep;
  display:flex;
  gap:14px;
  margin-bottom:18px;
  align-items:flex-start;
}
.xe-orc-steps li::before{
  content:counter(xestep);
  flex:none;
  width:32px;height:32px;
  border-radius:999px;
  background:var(--xe-pine-tint);
  color:var(--xe-pine);
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
}
.xe-orc-steps strong{display:block}
.xe-orc-steps span{color:var(--xe-muted);font-size:14px;line-height:1.5}
.xe-orc-track a{font-weight:600}

/* ============================================================
   15 · Content pages (delivery, returns, contact, track order)
   ============================================================ */
.xe-prose p{margin:0 0 14px;max-width:65ch}
.xe-prose p:last-child{margin-bottom:0}
.xe-prose ul,.xe-prose ol{margin:0 0 14px;padding-left:22px}
.xe-prose li{margin-bottom:8px;line-height:1.6}
.xe-prose li:last-child{margin-bottom:0}
.xe-prose a{text-decoration:underline}
.xe-prose strong{font-weight:600}

.xe-table{
  width:100%;
  border-collapse:collapse;
  background:var(--xe-surface);
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  overflow:hidden;
  font-size:15px;
  margin:0 0 16px;
}
.xe-table th,.xe-table td{
  padding:12px 16px;
  text-align:left;
  border-bottom:1px solid var(--xe-border);
  vertical-align:top;
  overflow-wrap:anywhere;
}
.xe-table thead th{
  background:var(--xe-pine-tint);
  color:var(--xe-pine);
  font-weight:600;
  font-size:14px;
}
.xe-table tbody tr:last-child td{border-bottom:none}

.xe-inline-wa{
  display:inline-flex;
  align-items:center;
  font-weight:600;
  color:var(--xe-pine);
}

/* Contact form (Elementor Pro Form widget) */
.xe-contact-form .elementor-field-group label{
  font-weight:600;
  font-size:15px;
  color:var(--xe-ink);
  margin-bottom:6px;
}
.xe-contact-form .elementor-field-textual{
  background:var(--xe-surface);
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  min-height:48px;
  padding:12px 14px;
  font-size:16px;
  font-family:var(--xe-font-body);
  color:var(--xe-ink);
}
.xe-contact-form .elementor-field-textual:focus{
  border-color:var(--xe-pine);
  box-shadow:0 0 0 3px rgba(20,82,74,.14);
  outline:none;
}
.xe-contact-form .elementor-button{min-height:52px}

/* Order tracking — our own form (order number + phone) */
.xe-track-form{
  background:var(--xe-surface);
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius-card);
  padding:20px;
  max-width:520px;
}
.xe-track-form .xe-field{margin:0 0 16px}
.xe-track-form label{font-weight:600;font-size:15px;display:block;margin-bottom:6px}
.xe-track-form input{
  background:var(--xe-porcelain);
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  min-height:48px;
  padding:12px 14px;
  font-size:16px;
  width:100%;
  font-family:var(--xe-font-body);
}
.xe-track-form input:focus{
  border-color:var(--xe-pine);
  box-shadow:0 0 0 3px rgba(20,82,74,.14);
  outline:none;
}
.xe-track-form button.button{
  background:var(--xe-amber);
  color:#fff;
  min-height:48px;
  border:none;
  border-radius:var(--xe-radius);
  font-weight:600;
  font-size:16px;
  width:100%;
  cursor:pointer;
  font-family:var(--xe-font-body);
}
.xe-track-form button.button:hover{background:var(--xe-amber-deep)}

.xe-track-result{
  background:var(--xe-surface);
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius-card);
  padding:20px;
  max-width:520px;
  margin-bottom:16px;
}
.xe-track-result h3{
  font-family:var(--xe-font-display);
  font-size:20px;
  margin-bottom:10px;
}
.xe-status-pill{
  display:inline-block;
  border-radius:999px;
  padding:4px 14px;
  font-weight:600;
  font-size:14px;
  background:var(--xe-pine-tint);
  color:var(--xe-pine);
}
.xe-track-meta{color:var(--xe-muted);font-size:14px;margin:10px 0}
.xe-track-items{list-style:disc;padding-left:20px;margin:0 0 12px;font-size:15px}
.xe-track-items li{margin-bottom:4px}
.xe-track-error{
  background:#FDF2F1;
  border:1px solid var(--xe-danger);
  border-radius:var(--xe-radius);
  padding:14px 16px;
  color:var(--xe-danger);
  font-size:15px;
  max-width:520px;
  margin-bottom:16px;
}

/* Sale badge on loop cards — top-left, never clipped (Design.md §5) */
.woocommerce ul.products li.product{position:relative;overflow:visible}
.woocommerce ul.products li.product > a:first-of-type{
  display:block;
  border-radius:var(--xe-radius-card) var(--xe-radius-card) 0 0;
  overflow:hidden;
}
.woocommerce ul.products li.product span.onsale{
  position:absolute;
  top:10px;
  left:10px;
  right:auto;
  margin:0;
  z-index:2;
}

/* ============================================================
   16 · Product archive
   ============================================================ */
.xe-archive-title{
  font-family:var(--xe-font-display);
  font-size:40px;
  font-weight:700;
  line-height:1.15;
  color:var(--xe-ink);
  margin:0;
}
@media(max-width:767px){.xe-archive-title{font-size:28px}}
.xe-archive-desc p{margin:0;max-width:65ch}
.woocommerce .woocommerce-result-count{
  color:var(--xe-muted);
  font-size:14px;
  margin:0;
}
.woocommerce .woocommerce-ordering select{
  min-height:44px;
  padding:8px 12px;
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  background:var(--xe-surface);
  font-size:15px;
  font-family:var(--xe-font-body);
}
.woocommerce .woocommerce-ordering{margin-bottom:0}
/* "Load more" keeps the footer reachable */
.elementor-button.elementor-pagination-load-more,
.woocommerce nav.woocommerce-pagination a.button{
  background:transparent;
  border:1.5px solid var(--xe-pine);
  color:var(--xe-pine);
  min-height:48px;
  border-radius:var(--xe-radius);
  font-weight:600;
}
.elementor-button.elementor-pagination-load-more:hover{
  background:var(--xe-pine-tint);
  color:var(--xe-pine);
}

/* ============================================================
   17 · Motion — respect reduced-motion (Design.md §9)
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}

/* ============================================================
   18 · Mobile QA pass — measured at 390px (Sprint 7)
   Design.md requires 48px touch targets; these are the controls
   that measured under it, plus two real layout faults.
   ============================================================ */

/* --- Header: cart + hamburger were wrapping onto two rows ---------------
   The right-hand container is flex-wrap:wrap and the mobile-nav child
   claimed 100% of it, so the hamburger was pushed below the cart and the
   header stood 98px tall. Keep the utility group on one line. */
@media(max-width:960px){
  #xe-header .xe-cart,
  #xe-header .xe-nav-mobile{width:auto!important}

  #xe-header .xe-nav-mobile{display:flex;align-items:center}

  /* The container holding cart + hamburger. */
  #xe-header .e-con-inner > .e-con:last-child{
    flex-wrap:nowrap!important;
    justify-content:flex-end;
    align-items:center;
    gap:4px;
  }
}

/* --- Touch targets ------------------------------------------------------ */
/* Header cart icon and hamburger: 40px → 48px. */
.xe-cart .elementor-menu-cart__toggle .elementor-button,
.xe-nav-mobile .elementor-menu-toggle{
  min-width:48px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Logo link measured 35px tall — pad the tap area without resizing the mark. */
#xe-header .elementor-widget-theme-site-logo a,
#xe-header .elementor-widget-image a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

/* Both product-card buttons (Order Now, Add to cart) measured 40px. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .xe-order-now{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Gallery zoom trigger measured 36px. (Not scoped to div.product — in an
   Elementor product template the gallery is not inside that wrapper.) */
.woocommerce-product-gallery__trigger{
  width:44px!important;
  height:44px!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
}

/* Archive pagination. The WooCommerce Archive Products widget offers no
   "load more" option (introspected: it has a hidden `paginate` flag and
   styling controls only), so these numbered links are the real control —
   they need to be thumb-sized. Numbered pages also stay crawlable, which
   suits the phase-4 SEO plan better than a JS-only button would. */
.woocommerce nav.woocommerce-pagination ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  border:0;
}
.woocommerce nav.woocommerce-pagination ul li{
  border:0;
  margin:0;
  overflow:visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  min-width:48px;
  min-height:48px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  background:var(--xe-surface);
  color:var(--xe-ink);
  font-weight:500;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--xe-pine);
  border-color:var(--xe-pine);
  color:#fff;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:var(--xe-pine-tint);
  border-color:var(--xe-pine);
}

/* Product tabs and the "Delivery info" link, which measured 21px tall. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.xe-delivery-line a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

/* Review form name/email fields measured 42px. */
#respond input[type="text"],
#respond input[type="email"],
#respond textarea{
  min-height:48px;
  font-size:16px;
}

/* Review-form star picker measured 24px — it is the one control a happy
   customer must hit, so give it room. */
.woocommerce #review_form #respond p.stars a{
  min-height:44px;
  min-width:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}

/* Footer: social icons 40px, category links 24px. */
.elementor-social-icon{
  min-width:44px!important;
  min-height:44px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
}
/* Any linked icon-list row is an interactive target — footer navigation,
   and the phone/Facebook rows on /contact, which are the primary actions
   on that page. Non-linked rows (bullet lists on product pages) are
   untouched, so prose spacing is unaffected. */
.elementor-icon-list-item > a{
  min-height:44px;
  display:flex;
  align-items:center;
}

/* Inline WhatsApp calls-to-action inside prose measured 26px. They sit on
   their own line, so an inline-block with padding is safe here. */
.xe-inline-wa{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

/* --- Cart line items on mobile ------------------------------------------
   WooCommerce's `shop_table_responsive` stacks every cell into its own
   "Product: / Price: / Quantity: / Subtotal:" row, which is four rows per
   item and pushes the totals off-screen. The signed-off design is a card:
   thumbnail on the left, name and unit price stacked beside it, quantity
   and line total on the last row. Desktop keeps the real table, so the
   item still reads as one line there.

   Breakpoint must be 768px, not 767px: WooCommerce switches shop_table into
   its stacked mode at `max-width:768px`, so at exactly 768 (iPad Mini) the
   "Product: / Price:" labels appeared with none of the card styling. */
@media(max-width:768px){
  .woocommerce table.shop_table_responsive.cart thead{display:none}
  .woocommerce table.shop_table_responsive.cart,
  .woocommerce table.shop_table_responsive.cart tbody,
  .woocommerce table.shop_table_responsive.cart tr,
  .woocommerce table.shop_table_responsive.cart td{
    display:block;
    width:auto;
    border:0;
    /* Zebra striping and cell fills come from the WooCommerce/theme table
       styles; inside a card they read as random grey blocks. */
    background:transparent!important;
    padding:0;
  }
  /* Borders on a display:block <tr> are ignored while the table is
     collapsing — separate them so the card outline actually draws. */
  .woocommerce table.shop_table_responsive.cart{
    border-collapse:separate!important;
    border:0!important;
    background:transparent!important;
  }
  /* Kill the injected "Product:" / "Price:" labels. */
  .woocommerce table.shop_table_responsive.cart td::before{display:none!important}

  .woocommerce table.shop_table_responsive.cart tr.cart_item{
    display:grid;
    grid-template-columns:64px 1fr auto;
    grid-template-areas:
      "thumb name  name"
      "thumb price price"
      "thumb qty   subtotal";
    gap:6px 12px;
    align-items:center;
    position:relative;
    background:var(--xe-surface);
    border:1px solid var(--xe-border)!important;
    border-radius:var(--xe-radius-card);
    padding:12px;
    margin-bottom:10px;
  }
  /* WooCommerce's responsive table hides the thumbnail outright and forces
     `text-align:right !important` on every cell — both have to be undone. */
  .woocommerce table.shop_table_responsive.cart td.product-thumbnail{
    grid-area:thumb;
    align-self:start;
    display:block!important;
  }
  .woocommerce table.shop_table_responsive.cart td{text-align:left!important}
  .woocommerce table.shop_table_responsive.cart td.product-subtotal{
    text-align:right!important;
  }
  .woocommerce table.shop_table_responsive.cart td.product-thumbnail img{
    width:64px;
    height:64px;
    object-fit:cover;
    border-radius:var(--xe-radius);
  }
  .woocommerce table.shop_table_responsive.cart td.product-name{
    grid-area:name;
    text-align:left;
    font-weight:600;
    line-height:1.35;
    /* Keep the wrapped title clear of the absolutely-positioned remove ×. */
    padding-right:34px;
  }
  .woocommerce table.shop_table_responsive.cart td.product-name a{
    text-decoration:none;
    color:var(--xe-ink);
  }
  .woocommerce table.shop_table_responsive.cart td.product-price{
    grid-area:price;
    text-align:left;
    font-size:13px;
    color:var(--xe-muted);
  }
  .woocommerce table.shop_table_responsive.cart td.product-quantity{
    grid-area:qty;
    text-align:left;
  }
  .woocommerce table.shop_table_responsive.cart td.product-subtotal{
    grid-area:subtotal;
    text-align:right;
    font-weight:700;
  }
  /* Remove control: 22px is not a tap target. Park it top-right of the
     card with a proper 44px hit area. */
  .woocommerce table.shop_table_responsive.cart td.product-remove{
    position:absolute;
    top:4px;
    right:4px;
    margin:0;
  }
  /* A slightly narrower stepper so qty + line total share the last row. */
  .woocommerce table.shop_table_responsive.cart .xe-qty-btn{width:40px}
  .woocommerce table.shop_table_responsive.cart input.qty{width:44px!important}
}

/* The remove "×" measured 22×22 at every width. */
.woocommerce a.remove{
  width:44px!important;
  height:44px!important;
  line-height:44px!important;
  font-size:20px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  color:var(--xe-muted)!important;
}
.woocommerce a.remove:hover{
  background:transparent!important;
  color:var(--xe-danger)!important;
}

/* --- WooCommerce notices: default blue/purple is off-palette ------------ */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error{
  border-top-color:var(--xe-pine)!important;
  background:var(--xe-pine-tint);
  color:var(--xe-ink);
  border-radius:var(--xe-radius);
  padding:16px 16px 16px 44px;
}
.woocommerce-info::before,
.woocommerce-message::before{color:var(--xe-pine)}
.woocommerce-error{
  border-top-color:var(--xe-danger)!important;
  background:#FBEDEC;
}
.woocommerce-error::before{color:var(--xe-danger)}

/* On an empty cart, "Browse products" is the only action on the page —
   Design.md wants the single primary action to carry the Amber CTA. */
.woocommerce .cart-empty + p.return-to-shop .button,
.woocommerce .return-to-shop .button{
  background:var(--xe-amber)!important;
  color:#fff!important;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* --- iOS zoom ----------------------------------------------------------- */
/* The sort dropdown rendered at 15px; anything under 16px makes iOS Safari
   zoom the whole page on focus, which strands the visitor mid-catalogue. */
.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby{
  font-size:16px;
  min-height:48px;
  padding:10px 12px;
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  background:var(--xe-surface);
  color:var(--xe-ink);
  max-width:100%;
}

/* --- Quantity stepper (PRD §2, matches the signed-off design) ----------- */
/* One bordered group, not three loose controls. WooCommerce and the forms
   section above both style .quantity and input.qty, so this needs to win. */
.woocommerce div.product form.cart .quantity,
.woocommerce .quantity,
.quantity{
  display:inline-flex!important;
  align-items:stretch;
  width:auto!important;
  max-width:max-content;
  /* The buy block is a column flex container, which would otherwise
     stretch this to full width. */
  align-self:flex-start;
  flex:0 0 auto;
  border:1px solid var(--xe-border)!important;
  border-radius:var(--xe-radius)!important;
  overflow:hidden;
  background:var(--xe-surface)!important;
}
/* These are <button> elements, so the Elementor global button style (amber
   fill, radius) wins on specificity — gotcha 10. Force them back to bare
   controls, or the stepper reads as two competing CTAs beside the real one. */
.woocommerce .quantity .xe-qty-btn,
.xe-qty-btn{
  width:48px;
  min-height:48px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--xe-ink)!important;
  font-size:20px;
  font-weight:500;
  line-height:1;
  padding:0!important;
  cursor:pointer;
  font-family:var(--xe-font-body);
  flex:0 0 auto;
}
.woocommerce .quantity .xe-qty-btn:hover:not(:disabled),
.xe-qty-btn:hover:not(:disabled){background:var(--xe-pine-tint)!important}
.woocommerce .quantity .xe-qty-btn:disabled,
.xe-qty-btn:disabled{opacity:.35;cursor:default}
.woocommerce .quantity input.qty,
.quantity input.qty{
  width:52px!important;
  min-height:48px!important;
  height:48px!important;
  border:0!important;
  border-left:1px solid var(--xe-border)!important;
  border-right:1px solid var(--xe-border)!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-align:center;
  font-size:16px!important;   /* under 16px triggers iOS zoom */
  background:transparent!important;
  padding:0!important;
  -moz-appearance:textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* ============================================================
   19 · Feedback round 4 — tablet & mobile fixes
   ============================================================ */

/* --- 1 · Header utility group was cramped ------------------------------- */
@media(max-width:960px){
  #xe-header .e-con-inner > .e-con:last-child{
    gap:12px;
    padding-right:2px;
  }
  /* The two icons sat edge to edge; give each its own hit area and let the
     cart badge sit clear of the burger. */
  #xe-header .xe-cart .elementor-menu-cart__toggle .elementor-button,
  #xe-header .xe-nav-mobile .elementor-menu-toggle{
    padding:6px;
  }
  #xe-header .xe-cart{margin-right:2px}
}

/* --- 2 + 3 · The mobile menu is an off-canvas drawer --------------------
   Elementor renders the dropdown absolutely positioned inside its own
   widget. That widget is only as wide as the burger icon, so the menu
   opened as a ~130px column of broken words and shoved the header apart.
   Take it out of flow entirely and make it the panel from the signed-off
   design: fixed to the right edge, full height, 320px / 86vw. */
@media(max-width:960px){
  .xe-nav-mobile .elementor-nav-menu--dropdown{
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:auto!important;
    bottom:0!important;
    width:min(320px,86vw)!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:64px 16px 24px!important;
    overflow-y:auto!important;
    background:var(--xe-surface)!important;
    box-shadow:-8px 0 28px rgba(30,39,38,.16);
    border-radius:0!important;
    z-index:9999!important;
  }

  /* Dim the page behind the open panel so the drawer reads as a layer. */
  .xe-nav-mobile:has(.elementor-menu-toggle.elementor-active)::before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(30,39,38,.45);
    z-index:9998;
  }

  /* Keep the close (X) above the panel it closes. */
  .xe-nav-mobile .elementor-menu-toggle{position:relative;z-index:10000}
  .xe-nav-mobile .elementor-menu-toggle.elementor-active{
    position:fixed;
    top:10px;
    right:12px;
    background:var(--xe-surface);
    border-radius:var(--xe-radius);
  }

  /* Menu rows: readable, tappable, one line each. */
  .xe-nav-mobile .elementor-nav-menu--dropdown a.elementor-item{
    display:block;
    padding:12px 8px!important;
    font-size:16px;
    font-weight:500;
    line-height:1.35;
    color:var(--xe-ink);
    border-radius:var(--xe-radius);
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
    border:0;
  }
  .xe-nav-mobile .elementor-nav-menu--dropdown a.elementor-item:hover,
  .xe-nav-mobile .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{
    background:var(--xe-pine-tint);
    color:var(--xe-pine);
  }
  .xe-nav-mobile .elementor-nav-menu--dropdown li{border:0}

  /* Section headings ("Shop", "Help") — menu items carrying .xe-menu-label. */
  .xe-nav-mobile .xe-menu-label > a.elementor-item{
    pointer-events:none;
    font-family:var(--xe-font-body);
    font-size:12px!important;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--xe-muted)!important;
    padding:18px 8px 4px!important;
    background:transparent!important;
  }

  body:has(.xe-nav-mobile .elementor-menu-toggle.elementor-active){overflow:hidden}
}

/* --- 5 · Cart quantity stepper was oversized on mobile -------------------
   The signed-off cart uses a 36×38 stepper, not the 48px one from the
   product page — inside a card row the larger control dominated the line. */
@media(max-width:768px){
  .woocommerce table.shop_table_responsive.cart .xe-qty-btn{
    width:36px;
    min-height:38px!important;
    height:38px!important;
    font-size:17px;
  }
  .woocommerce table.shop_table_responsive.cart input.qty{
    width:40px!important;
    min-height:38px!important;
    height:38px!important;
    font-size:15px!important;
  }
  .woocommerce table.shop_table_responsive.cart .quantity{align-self:center}
}

/* --- 8 · Archive result count + sort dropdown ---------------------------
   These sat side by side and collided at 390px. Stack them, and let the
   select use the full width so the label inside it is never clipped. */
@media(max-width:600px){
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering{
    float:none!important;
    width:100%!important;
    margin:0 0 10px!important;
  }
  .woocommerce .woocommerce-ordering select,
  .woocommerce select.orderby{width:100%!important}
  .woocommerce .woocommerce-result-count{
    font-size:14px;
    color:var(--xe-muted);
  }
}

/* --- 7 + 9 · Content tables: real edges, no broken words ----------------
   Tables written into Elementor text editors fell back to the browser's
   default 1px rgba(128,128,128,.5) border, which reads as "no edge" on a
   Porcelain background — and the narrow first column split words across
   lines ("Pendin / g payme / nt"). */
.xe-prose table,
.xe-product-content table,
.woocommerce table.shop_table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  overflow:hidden;
  background:var(--xe-surface);
}
.xe-prose table th,
.xe-prose table td,
.xe-product-content table th,
.xe-product-content table td,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border:1px solid var(--xe-border);
  padding:12px 14px;
  vertical-align:top;
  text-align:left;
  /* Never split a word — break only between words. */
  word-break:normal!important;
  overflow-wrap:break-word;
  hyphens:none;
}
.xe-prose table thead th,
.xe-product-content table thead th,
.woocommerce table.shop_table thead th{
  background:var(--xe-pine-tint);
  color:var(--xe-ink);
  font-weight:600;
}
/* First column of a two-column reference table needs room for its label. */
.xe-prose table th:first-child,
.xe-prose table td:first-child{width:38%}
@media(max-width:480px){
  .xe-prose table th,
  .xe-prose table td{padding:10px;font-size:14px}
  .xe-prose table th:first-child,
  .xe-prose table td:first-child{width:42%}
}

/* ============================================================
   20 · Feedback round 5
   ============================================================ */

/* --- 1 · Logo inside the mobile drawer ----------------------------------
   The signed-off drawer opens with the brand mark above the menu. Elementor's
   nav-menu dropdown cannot hold another widget, so the logo is painted as a
   background image on the panel; the URL comes from PHP (xe_drawer_logo_var)
   so swapping the attachment needs no CSS change. */
@media(max-width:960px){
  .xe-nav-mobile .elementor-nav-menu--dropdown{
    background-image:var(--xe-drawer-logo)!important;
    background-repeat:no-repeat!important;
    background-position:16px 18px!important;
    background-size:132px auto!important;
    padding-top:76px!important;
  }
  /* A hairline under the logo separates it from the first section label. */
  .xe-nav-mobile .elementor-nav-menu--dropdown::after{
    content:'';
    position:absolute;
    top:64px;
    left:16px;
    right:16px;
    height:1px;
    background:var(--xe-border);
  }
}

/* --- 2 · Cart / checkout width on tablet --------------------------------
   Hello Elementor caps .site-main with a blog-style ladder — 500px at 576,
   600px at 768, 800px at 992, 1140px at 1200. Cart and checkout are ordinary
   (non-Elementor) templates, so between 768 and 1199 the whole page was
   squeezed into a narrow column with dead space either side, and the table
   columns shrank while space went unused. Commerce pages take the full
   container width instead. */
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main,
body.woocommerce-order-received .site-main,
/* The page title carries the same ladder, so without this the "Cart"
   heading sits indented while the table below runs full width. */
body.woocommerce-cart .page-header .entry-title,
body.woocommerce-checkout .page-header .entry-title,
body.woocommerce-account .page-header .entry-title{
  max-width:1200px!important;
  width:100%;
  padding-inline:16px;
}
@media(min-width:769px){
  body.woocommerce-cart .site-main,
  body.woocommerce-checkout .site-main,
  body.woocommerce-account .site-main{padding-inline:24px}
}

/* Between tablet and desktop the totals card sat under a half-empty table.
   Give the cart its two columns back as soon as there is room. */
@media(min-width:769px){
  .woocommerce .cart-collaterals{
    display:flex;
    justify-content:flex-end;
  }
  .woocommerce .cart-collaterals .cart_totals{
    width:100%;
    max-width:420px;
    float:none;
  }
}

/* --- 3 · Archive filter row --------------------------------------------
   Reverted from the stacked full-width version: the count and the sort
   dropdown stay on one line, the dropdown is sized for the phone rather
   than stretched, and the grid gets clear air beneath the row. */
@media(max-width:600px){
  .woocommerce .woocommerce-result-count{
    float:left!important;
    width:auto!important;
    margin:0!important;
    font-size:14px;
    line-height:48px;
    color:var(--xe-muted);
  }
  .woocommerce .woocommerce-ordering{
    float:right!important;
    width:auto!important;
    margin:0!important;
  }
  .woocommerce .woocommerce-ordering select,
  .woocommerce select.orderby{
    width:auto!important;
    max-width:186px;
    padding:10px 30px 10px 12px;
  }
}
@media(max-width:400px){
  .woocommerce .woocommerce-result-count{font-size:13px}
  .woocommerce .woocommerce-ordering select,
  .woocommerce select.orderby{max-width:168px;font-size:16px}
}

/* Air between the filter row and the first row of products, at every width. */
.woocommerce ul.products{
  clear:both;
  margin-top:20px;
}

/* ============================================================
   21 · Feedback round 6 — side cart & checkout summary
   ============================================================ */

/* --- 1 · Side cart line: legible price + working stepper ----------------
   WooCommerce printed "1 × ৳1,890" as a single faint span at ~13px with
   muted colour — the price of the thing being bought was the least
   readable text on the panel. Split into a stepper and a real price. */
.elementor-menu-cart__product .xe-mini-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  /* Never wrap: four-digit prices dropped onto a second line while
     three-digit ones stayed put, so the panel looked inconsistent. */
  flex-wrap:nowrap;
  margin-top:8px;
  /* Clear the absolutely-positioned remove x. */
  padding-right:26px;
}
.xe-mini-qty{
  display:inline-flex;
  align-items:stretch;
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  background:var(--xe-surface);
  overflow:hidden;
  flex:0 0 auto;
}
.xe-mini-qty.is-busy{opacity:.5;pointer-events:none}
.xe-mini-qty-btn{
  width:30px;
  min-height:34px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--xe-ink)!important;
  font-size:17px;
  line-height:1;
  padding:0!important;
  cursor:pointer;
  font-family:var(--xe-font-body);
  box-shadow:none!important;
}
.xe-mini-qty-btn:hover{background:var(--xe-pine-tint)!important}
.xe-mini-qty-val{
  min-width:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-left:1px solid var(--xe-border);
  border-right:1px solid var(--xe-border);
  font-size:15px;
  font-weight:600;
  color:var(--xe-ink);
  font-variant-numeric:tabular-nums;
}
.xe-mini-price{
  font-size:16px;
  font-weight:700;
  color:var(--xe-ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* Elementor mutes anything inside the product row — override it. */
.elementor-menu-cart__product .xe-mini-price,
.elementor-menu-cart__product .xe-mini-qty-val{opacity:1}

/* Narrow panels (small phones): stepper and price on their own line. */
@media(max-width:400px){
  .elementor-menu-cart__product .xe-mini-line{gap:8px}
  .xe-mini-qty-btn{width:30px;min-height:32px;font-size:16px}
  .xe-mini-qty-val{min-width:28px;font-size:14px}
  .xe-mini-price{font-size:15px}
}

/* --- 2 · Cart page stepper: a touch smaller ----------------------------- */
.woocommerce table.cart .quantity .xe-qty-btn,
.woocommerce-cart table.shop_table .quantity .xe-qty-btn{
  width:40px;
  min-height:42px!important;
  height:42px!important;
  font-size:18px;
}
.woocommerce table.cart .quantity input.qty,
.woocommerce-cart table.shop_table .quantity input.qty{
  width:44px!important;
  min-height:42px!important;
  height:42px!important;
}

/* --- 3 · Hamburger must sit under the side-cart panel --------------------
   The burger was pinned above everything, so it floated on top of the open
   cart tray. It only needs to outrank the page while its own drawer is
   open. */
.xe-nav-mobile .elementor-menu-toggle{z-index:1}
.xe-nav-mobile .elementor-menu-toggle.elementor-active{z-index:10000}
/* Elementor's cart panel and its backdrop above the sticky header. */
.elementor-menu-cart__container{z-index:10001!important}

/* --- 4 · Product thumbnail before the name in the checkout summary ------ */
.woocommerce-checkout-review-order-table td.product-name{
  display:flex;
  align-items:center;
  gap:10px;
}
.xe-review-thumb{flex:0 0 auto;line-height:0}
.xe-review-thumb img{
  width:44px;
  height:44px;
  object-fit:cover;
  border-radius:var(--xe-radius);
  border:1px solid var(--xe-border);
  background:var(--xe-surface);
}
.xe-review-name{flex:1 1 auto;min-width:0}
@media(max-width:480px){
  .xe-review-thumb img{width:38px;height:38px}
  .woocommerce-checkout-review-order-table td.product-name{gap:8px}
}

/* --- Side cart: remove × belongs at the top of the row ------------------
   Sitting beside the price it read as a control for the price, and it
   competed with the stepper for the same line. Pinned to the top-right it
   lines up with the product name, which is what it removes. */
.elementor-menu-cart__product{position:relative}
.elementor-menu-cart__product .elementor-menu-cart__product-remove{
  position:absolute!important;
  top:0;
  right:0;
  margin:0!important;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Keep the title clear of it — but only just, because the panel is 320px
   wide and these product names run long. */
.elementor-menu-cart__product .elementor-menu-cart__product-name{
  padding-right:28px;
}
/* The stepper line no longer has to dodge the ×, so it gets the width back. */
.elementor-menu-cart__product .xe-mini-line{padding-right:0}