/* ==========================================================================
   8X Gear — off-canvas drawers
   The mobile menu (#main-menu) and the mini cart (#cart-popup). Both are
   Flatsome's own off-canvas panels; this file restyles them to the prototype's
   language (tools/custom/header.html → .ct-mobile-nav, and cart-drawer.html)
   instead of replacing the markup, so Woo's cart fragments keep working.
   ========================================================================== */

/* ---------------------------------------------------------- shared shell */
.off-canvas .mfp-content,
.off-canvas-cart .mfp-content{
  background-color:var(--ct-cream);
  border-radius:0;
  box-shadow:0 0 60px rgba(0,0,0,.28);
}
.off-canvas-cart .mfp-content{background-color:#fff;}

/* ==================================================== 1. mobile menu */
.mobile-sidebar,.sidebar-menu{background-color:var(--ct-cream);}
.mobile-sidebar .sidebar-menu{padding:8px 20px 24px;}

.nav-sidebar.nav-vertical > li{border-bottom:1px solid rgba(0,0,0,.08);}
.nav-sidebar.nav-vertical > li:last-child{border-bottom:0;}
.nav-sidebar.nav-vertical > li > a{
  display:flex;align-items:center;gap:8px;
  min-height:48px;padding:0;
  color:#0E1013;
  font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  transition:background-color .18s ease;
}
/* Hover moves the surface only — the ink label never lightens. */
.nav-sidebar.nav-vertical > li > a:hover,
.nav-sidebar.nav-vertical > li > a:focus-visible{background-color:#E6DFD2;color:#0E1013;}
.nav-sidebar.nav-vertical > li.current-menu-item > a{color:#0E1013;}
.nav-sidebar.nav-vertical > li.current-menu-item{box-shadow:inset 3px 0 0 var(--ct-red);}

/* Submenu rows read as a second level: indented, lighter weight, same ink. */
.nav-sidebar.nav-vertical > li li > a{
  min-height:44px;padding-left:16px;
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#0E1013;
}
.nav-sidebar.nav-vertical > li li > a:hover{background-color:#E6DFD2;}
.nav-sidebar .toggle{color:#0E1013;}

/* The search field inherited from the theme sits flush with the list. */
.mobile-sidebar .header-search-form{margin:6px 0 10px;}
.mobile-sidebar .dgwt-wcas-search-input{border-radius:0;border-color:rgba(0,0,0,.18);}

/* ==================================================== 2. mini cart */
#cart-popup .cart-popup-inner{padding:0;background:#fff;}

#cart-popup .cart-popup-title{
  padding:18px 20px 16px;margin:0;text-align:left;
  border-bottom:1px solid var(--ct-line);background:var(--ct-cream);
}
#cart-popup .cart-popup-title span{
  font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#0E1013;
}
/* The theme's dotted rule under the title duplicates the border above. */
#cart-popup .cart-popup-title .is-divider{display:none;}

#cart-popup .widget_shopping_cart_content{padding:0;}
#cart-popup .cart_list{margin:0;padding:6px 20px;}
#cart-popup .cart_list li.mini_cart_item{
  padding:14px 0 14px 76px;margin:0;border-bottom:1px solid var(--ct-line);
  min-height:0;
}
#cart-popup .cart_list li.mini_cart_item:last-child{border-bottom:0;}
#cart-popup .cart_list li.mini_cart_item img{
  width:64px;height:auto;border:1px solid var(--ct-line);border-radius:0;
}
#cart-popup .cart_list li.mini_cart_item a:not(.remove){
  color:#0E1013;font-size:14px;font-weight:800;line-height:1.35;text-decoration:none;
}
#cart-popup .cart_list li.mini_cart_item a:not(.remove):hover{text-decoration:underline;text-underline-offset:3px;}
#cart-popup .cart_list .quantity,
#cart-popup .cart_list .variation{
  color:var(--ct-quiet);font-size:13px;line-height:1.5;
}
#cart-popup .cart_list .quantity .amount,
#cart-popup .woocommerce-Price-amount{
  color:#0E1013;font-weight:900;font-variant-numeric:tabular-nums;
}
/* Remove control: a quiet ink glyph that darkens its own surface on hover. */
#cart-popup .cart_list li .remove{
  top:12px;right:0;
  width:28px;height:28px;line-height:26px;
  color:#0E1013;background:transparent;border:1px solid transparent;border-radius:0;
  font-size:16px;
}
#cart-popup .cart_list li .remove:hover{background:#E6DFD2;border-color:rgba(0,0,0,.14);color:#0E1013;}

/* The add-on plugin prints variation meta as a list with generous spacing and
   empty rows — 165px of drawer height for two short lines. Compacted to the two
   facts it actually carries. */
#cart-popup .mini_cart_item .wcpa_cart_meta{
  margin:6px 0 0;padding:0;list-style:none;
}
#cart-popup .mini_cart_item .wcpa_cart_meta li{
  margin:0 0 2px;padding:0;
  font-size:13px;line-height:1.45;color:var(--ct-quiet);
}
#cart-popup .mini_cart_item .wcpa_cart_meta br{display:none;}
/* Each row ships as an 80px flex block for one short label/value pair. */
#cart-popup .mini_cart_item .wcpa_cart_meta_item{
  display:flex;align-items:baseline;gap:6px;
  min-height:0;height:auto;padding:0;margin:0 0 2px;
}
#cart-popup .mini_cart_item .wcpa_cart_meta_item-label,
#cart-popup .mini_cart_item .wcpa_cart_meta_item-value,
#cart-popup .mini_cart_item .wcpa_cart_meta_item-value p{
  margin:0;padding:0;min-height:0;
  font-size:13px;line-height:1.45;
}
#cart-popup .mini_cart_item .wcpa_cart_meta_item-label{font-weight:800;color:#0E1013;}

/* Flatsome sizes the quantity row at a fixed 274px, written for its own 46px
   thumbnail offset. With the 64px thumb this file uses, the row runs 30px past
   the item's content box and the line price gets clipped to "$2". Constraining
   it to the real width also gives the intended stepper-left / price-right row. */
#cart-popup .mini_cart_item .ux-mini-cart-qty{
  width:100%;max-width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:10px;
}
#cart-popup .mini_cart_item .ux-mini-cart-qty .quantity{margin:0;}
#cart-popup .mini_cart_item .ux-quantity__button{
  width:30px;height:32px;border-radius:0;background:none;
  border:1px solid var(--ct-line);color:#0E1013;font-weight:900;
}
#cart-popup .mini_cart_item .ux-quantity__button:hover{background:#E6DFD2;}
#cart-popup .mini_cart_item .ux-quantity input.qty{
  height:32px;width:38px;border-radius:0;border-color:var(--ct-line);
  color:#0E1013;font-weight:800;font-variant-numeric:tabular-nums;
}
#cart-popup .mini_cart_item .product-subtotal{
  flex:none;white-space:nowrap;
  font-size:15px;font-weight:900;color:#0E1013;font-variant-numeric:tabular-nums;
}
/* Keep the title clear of the remove control pinned to the top-right corner. */
#cart-popup .cart_list li.mini_cart_item > a:not(.remove){padding-right:34px;}

#cart-popup .woocommerce-mini-cart__total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0;padding:16px 20px 12px;border-top:1px solid var(--ct-line);
  font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#0E1013;
}
#cart-popup .woocommerce-mini-cart__total strong{font-weight:900;}
#cart-popup .woocommerce-mini-cart__total .woocommerce-Price-amount{
  font-size:22px;letter-spacing:0;text-transform:none;
}

/* One solid CTA in the drawer: checkout. "View cart" stays a text link so the
   viewport never shows two primary buttons for the same action. */
#cart-popup .woocommerce-mini-cart__buttons{
  display:flex;flex-direction:column;align-items:stretch;gap:10px;
  padding:0 20px 20px;margin:0;
}
#cart-popup .woocommerce-mini-cart__buttons .button{
  width:100%;min-height:52px;border-radius:0;
  font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
}
/* Red, matching the prototype's drawer CTA and the product page's add-to-cart —
   the customizer's `color_checkout` paints it the same value, so the two agree
   instead of fighting. Hover darkens the fill; white text never moves. */
#cart-popup .woocommerce-mini-cart__buttons .button.checkout{
  background-color:var(--ct-red-ink);color:#fff;border:1px solid var(--ct-red-ink);
}
#cart-popup .woocommerce-mini-cart__buttons .button.checkout:hover{
  background-color:#A50A0A;color:#fff;border-color:#A50A0A;
}
#cart-popup .woocommerce-mini-cart__buttons .button:not(.checkout){
  background:none;border:0;min-height:44px;
  color:#0E1013;text-decoration:underline;text-underline-offset:4px;
}
#cart-popup .woocommerce-mini-cart__buttons .button:not(.checkout):hover{
  background:none;color:var(--ct-red-ink);
}

/* Empty state: centred, quiet, one way out. */
#cart-popup .ux-mini-cart-empty{padding:56px 24px;gap:10px;}
#cart-popup .ux-mini-cart-empty-icon{color:var(--ct-quiet);}
#cart-popup .ux-mini-cart-empty .button.wc-backward{
  min-height:52px;padding:0 26px;border-radius:0;
  background-color:var(--ct-red-ink);color:#fff;border:1px solid var(--ct-red-ink);
  font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
}
#cart-popup .ux-mini-cart-empty .button.wc-backward:hover{
  background-color:#A50A0A;color:#fff;border-color:#A50A0A;
}

#cart-popup :focus-visible,.mobile-sidebar :focus-visible{
  outline:3px solid var(--ct-red-ink);outline-offset:3px;
}