/* ============================================================================
   LUQUA — header cart icon + slide-out cart drawer (owner 2026-07-13; see DEVIATIONS.md)
   Loaded site-wide. var() fallbacks so the brand tokens resolve on every page (canvas
   pages define them inline; WooCommerce pages via body.luqua-chrome).
   ========================================================================== */

/* cart icon + count badge in the header nav */
.luqua-cart-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--house,#782B90);background:none;border:0;cursor:pointer;text-decoration:none;flex:none}
.luqua-cart-toggle:hover{color:var(--violet-deep,#5A1F6E)}
.luqua-cart-toggle svg{width:24px;height:24px}
.luqua-cart-count{position:absolute;top:1px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--pack-coral,#F86F5B);color:#fff;font-family:'Montserrat',system-ui,sans-serif;font-size:.68rem;font-weight:700;line-height:18px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.22)}
.luqua-cart-count.is-empty{display:none}

/* overlay + drawer shell */
.luqua-cart-overlay{position:fixed;inset:0;background:rgba(24,20,64,.42);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:100000}
.luqua-cart-overlay.is-open{opacity:1;visibility:visible}
.luqua-cart-drawer{position:fixed;top:0;right:0;height:100%;width:min(400px,92vw);background:#FFFDFB;box-shadow:-18px 0 44px rgba(24,20,64,.18);transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);z-index:100001;display:flex;flex-direction:column;font-family:'Montserrat',system-ui,sans-serif}
.luqua-cart-drawer.is-open{transform:translateX(0)}
body.luqua-cart-open{overflow:hidden}

.luqua-cart-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 1.5rem;border-bottom:1px solid var(--line,#E7E1E6)}
.luqua-cart-drawer__head h2{font-family:'Playfair Display',Georgia,serif;font-size:1.4rem;font-weight:600;color:var(--charcoal,#2C2C34);margin:0}
.luqua-cart-drawer__close{background:none;border:0;cursor:pointer;color:var(--muted,#6E6E7A);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.luqua-cart-drawer__close:hover{background:var(--blush,#F8F5F7);color:var(--charcoal,#2C2C34)}
.luqua-cart-drawer__close svg{width:20px;height:20px}

.luqua-cart-drawer__items{flex:1;overflow-y:auto;padding:.4rem 1.5rem;-webkit-overflow-scrolling:touch}
.luqua-cart-empty{text-align:center;color:var(--muted,#6E6E7A);padding:3.5rem 1rem}

.luqua-ci{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line,#E7E1E6)}
.luqua-ci__img{width:64px;height:64px;border-radius:12px;background:var(--blush,#F8F5F7);overflow:hidden;display:flex;align-items:center;justify-content:center}
.luqua-ci__img img{width:100%;height:100%;object-fit:contain}
.luqua-ci__name{font-size:.9rem;font-weight:600;color:var(--charcoal,#2C2C34);line-height:1.3;margin-bottom:.55rem}
.luqua-ci__qty{display:inline-flex;align-items:center;gap:.15rem;border:1px solid var(--line,#E7E1E6);border-radius:999px;padding:.12rem}
.luqua-ci__qty button{width:26px;height:26px;border:0;background:none;cursor:pointer;color:var(--house,#782B90);font-size:1.05rem;line-height:1;border-radius:50%;display:flex;align-items:center;justify-content:center}
.luqua-ci__qty button:hover{background:var(--violet-050,#F6EFF7)}
.luqua-ci__qty span{min-width:22px;text-align:center;font-size:.85rem;font-weight:600;color:var(--charcoal,#2C2C34)}
.luqua-ci__right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.luqua-ci__price{font-family:'Playfair Display',Georgia,serif;font-size:1rem;color:var(--charcoal,#2C2C34)}
.luqua-ci__rm{background:none;border:0;cursor:pointer;color:var(--muted,#6E6E7A);padding:0;line-height:0}
.luqua-ci__rm:hover{color:var(--coral-700,#E2545F)}
.luqua-ci__rm svg{width:18px;height:18px}

.luqua-cart-drawer__foot{border-top:1px solid var(--line,#E7E1E6);padding:1.3rem 1.5rem;background:var(--warm-white,#FFFDFB)}
.luqua-cart-drawer__total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}
.luqua-cart-drawer__total span{color:var(--muted,#6E6E7A);font-size:.92rem}
.luqua-cart-drawer__total b{font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;color:var(--charcoal,#2C2C34);font-weight:600}
.luqua-cart-drawer__note{font-size:.76rem;color:var(--muted,#6E6E7A);text-align:center;margin-bottom:1rem}
/* The shared .luqua-ship-bar spacing is tuned for the cart page; tighten it in the drawer. */
.luqua-cart-shipbar{margin:0 0 12px!important}
.luqua-cart-shipbar[hidden]{display:none}
.luqua-cart-drawer__actions{display:grid;gap:.6rem}
.luqua-cart-btn{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;font-family:'Montserrat',system-ui,sans-serif;font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;border:0;transition:background .18s ease,border-color .18s ease}
/* pin the label colours on hover/focus too — Blocksy's global a:hover is theme-blue (#1559ed) and
   would otherwise turn the button text blue on hover */
.luqua-cart-btn--primary,.luqua-cart-btn--primary:hover,.luqua-cart-btn--primary:focus{color:#fff!important}
.luqua-cart-btn--primary{background:#E2545F;box-shadow:0 10px 26px rgba(226,84,95,.28)}
.luqua-cart-btn--primary:hover{background:#C7434D}
/* --ghost styled the "View cart" button, removed 2026-07-27 with the button itself. */
.luqua-cart-drawer.is-empty .luqua-cart-drawer__foot{display:none}

/* Only home.html set .nav-cta{display:flex}; the other canvas pages leave it display:block, so the
   inline-flex cart icon aligned to the text baseline (looked ~7px high) and never sat in a real row.
   Normalise every header's CTA cluster to a centred flex row so the icon lines up with the nav + CTA. */
.luqua-header .nav-cta{display:flex;align-items:center;gap:1rem}
.luqua-cart-toggle{align-self:center}
.luqua-cart-toggle svg{display:block}

/* Mobile header: collapse to a single clean row (logo + cart + burger). The desktop "Shop MenoLuv"
   CTA is hidden < 920px so the header never wraps to 2 rows; MenoLuv stays reachable via the burger. */
@media (max-width:920px){
  .luqua-header .nav-cta{flex-wrap:nowrap;gap:.4rem}
  .luqua-header .nav-cta .btn-primary{display:none}
  .luqua-cart-toggle{width:40px}
}