/* ============================================================================
   LUQUA — WooCommerce chrome + content branding (owner 2026-07-13; see DEVIATIONS.md)
   Loaded ONLY on cart / checkout / order-received (thank-you). Everything is scoped
   under body.luqua-chrome so it can never leak onto the canvas pages.

   - .luqua-chrome-full  = cart + thank-you  -> full LUQUA header + footer
   - .luqua-chrome-min   = checkout          -> distraction-free logo header + slim footer

   Brand tokens mirror the canvas pages, but the --violet scale is remapped to House
   Purple (#782B90): cart/checkout/thank-you are STORE CHROME, which wears House Purple
   like home/shop (MenoLuv Pack Violet is reserved for the product surfaces). The footer
   keeps the site-wide deep blue-violet gradient (hard-coded everywhere, not tokenised).
   ========================================================================== */

body.luqua-chrome{
  --house:#782B90;
  --violet:#782B90; --violet-deep:#5A1F6E; --violet-700:#6A2680;
  --violet-300:#B98FC9; --violet-100:#E9DCEE; --violet-050:#F6EFF7;
  --coral:#FF7B8A; --coral-700:#E2545F; --coral-050:#FFF3F4;
  --pack-coral:#F86F5B; --peach:#FFD4C1; --lavender:#DFD5FA;
  --warm-white:#FFFDFB; --blush:#F8F5F7; --sand:#F3EEF0;
  --line:#E7E1E6; --charcoal:#2C2C34; --ink:#4A4A55; --muted:#6E6E7A;
  --display:'Playfair Display',Georgia,serif;
  --body:'Montserrat',system-ui,sans-serif;
  --shadow-sm:0 2px 8px rgba(44,44,52,.06);
  --shadow-md:0 8px 24px rgba(83,71,192,.09);
  --shadow-lg:0 18px 44px rgba(83,71,192,.13);
  --shadow-coral:0 3px 8px rgba(226,84,95,.16),0 10px 24px rgba(255,123,138,.22);
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --max:1200px; --gut:clamp(1.25rem,.5rem + 3vw,3rem);
  --cta:#E2545F; --cta-dark:#C7434D; /* warm action colour for commerce CTAs */
  background:var(--warm-white);
  font-family:var(--body);
  color:var(--ink);
}

/* ---- hide Blocksy chrome so only the LUQUA chrome shows (same idea as the canvas pages) ---- */
body.luqua-chrome header[id],
body.luqua-chrome .ct-header,
body.luqua-chrome [class*="ct-header"],
body.luqua-chrome .ct-footer,
body.luqua-chrome [class*="ct-footer"],
body.luqua-chrome .entry-header,
body.luqua-chrome .ct-page-title,
body.luqua-chrome .page-title,
body.luqua-chrome h1.page-title,
body.luqua-chrome .woocommerce-breadcrumb{display:none!important}
body.luqua-chrome #main-container,
body.luqua-chrome main,
body.luqua-chrome article,
body.luqua-chrome [class*="ct-container"]{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important}
body.luqua-chrome .entry-content{max-width:100%!important;width:100%!important;margin:0!important;padding:0!important}
body.luqua-chrome{overflow-x:hidden}

/* ---- shared base ---- */
body.luqua-chrome .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
body.luqua-chrome .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--body);font-weight:600;font-size:1rem;min-height:52px;padding:0 2.2em;border-radius:999px;border:0;cursor:pointer;transition:transform .18s ease,background .18s ease;text-decoration:none}
/* 26/07: header CTA on cart/checkout matches the canvas pages' coral CTA. */
body.luqua-chrome .btn-primary{background:var(--cta);color:#fff;box-shadow:var(--shadow-coral)}
body.luqua-chrome .btn-primary:hover{background:var(--peach);color:var(--violet-700);transform:translateY(-2px)}

/* ---- announcement + full header (copied from canvas, tokenised) ---- */
body.luqua-chrome .announce{background:var(--house);color:#fff;text-align:center;font-size:.82rem;font-weight:500;letter-spacing:.04em;padding:9px var(--gut)}
body.luqua-chrome .luqua-header{position:sticky;top:0;z-index:50;background:rgba(255,253,251,.92);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--line)}
body.admin-bar.luqua-chrome .luqua-header{top:32px}
body.luqua-chrome .luqua-header .nav{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:1rem}
body.luqua-chrome .luqua-header .nav>a img,body.luqua-chrome .luqua-header .brand img{height:34px;width:auto;display:block}
body.luqua-chrome .luqua-header .nav ul{display:flex;gap:clamp(1rem,2.5vw,2.2rem);list-style:none;font-size:.95rem;font-weight:500;margin:0;padding:0}
body.luqua-chrome .luqua-header .nav ul a{color:var(--charcoal);text-decoration:none}
body.luqua-chrome .luqua-header .nav ul a:hover{color:var(--house)}
body.luqua-chrome .luqua-header .nav-cta{display:flex;align-items:center;gap:1rem}
body.luqua-chrome .luqua-header .nav-cta .btn{min-height:44px;padding:0 1.6em;font-size:.9rem;box-shadow:none}
body.luqua-chrome .luqua-header .burger{display:none;background:none;border:0;font-size:1.6rem;color:var(--charcoal);cursor:pointer;min-width:44px;min-height:44px}

/* ---- distraction-free checkout header ---- */
body.luqua-chrome .luqua-header--min .nav{justify-content:space-between;min-height:76px}
body.luqua-chrome .luqua-header--min .secure{display:inline-flex;align-items:center;gap:.5em;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--house)}
body.luqua-chrome .luqua-header--min .secure svg{width:16px;height:16px;flex:none}
body.luqua-chrome .luqua-header--min .secure small{color:var(--muted);font-weight:500}

/* ---- footer (site-wide deep blue-violet, copied from canvas) ---- */
body.luqua-chrome footer.site{background:linear-gradient(150deg,#3E35A0 0%,#241E5C 55%,#181440 100%);color:#CBC7E8;font-size:.9rem;padding:4rem 0 2.5rem}
/* ⚠️ No vertical padding on the MINIMAL (checkout) footer. That 2.2rem existed only to sit
   around the "Secure payment:" line, which was removed on 2026-07-27 as the third listing of
   payment methods on one screen. With the line gone the padding rendered as an empty blush
   band above and below the purple legal bar — a hollow strip that reads like a broken
   section. The .legal bar carries its own padding, so zero here gives a tight, deliberate
   strip. If anything is ever put back in this footer, restore the padding with it. */
body.luqua-chrome footer.site.luqua-foot--min{padding:0}
body.luqua-chrome .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;margin-bottom:3rem}
body.luqua-chrome .foot-grid img{height:30px;margin-bottom:1.2rem}
body.luqua-chrome .foot-grid h4{color:var(--peach);font-family:var(--body);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
body.luqua-chrome .foot-grid ul{list-style:none;margin:0;padding:0}
body.luqua-chrome .foot-grid li{margin-bottom:.6rem}
body.luqua-chrome .foot-grid a{color:#DDD9F2;text-decoration:none}
body.luqua-chrome .foot-grid a:hover{color:#fff}
body.luqua-chrome .foot-grid p{color:#CBC7E8;margin:0}
body.luqua-chrome .certs{display:flex;gap:.6rem;flex-wrap:wrap}
body.luqua-chrome .certs span{border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:.35em .8em;font-size:.72rem;letter-spacing:.05em}
body.luqua-chrome .foot-pay{font-size:.78rem;color:#A9A3D6;margin-bottom:1.2rem;letter-spacing:.03em}
body.luqua-chrome .legal{border-top:1px solid rgba(255,255,255,.18);padding-top:1.6rem;font-size:.78rem;color:#A9A3D6;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
/* margin-top:0 as well. `.legal` carries `margin-top:1.6rem` to separate it from the footer
   grid above, but the minimal footer has no grid, so that margin was the last of the empty
   blush band. Negative horizontal margins are left alone: they are what makes the bar
   full-bleed past the .wrap max-width. */
/* `!important` is required, not decorative: style.css:296 `.page footer.site .legal` sets
   `margin-top:1.6rem!important` and `margin-bottom:-2.5rem!important`. Equal specificity, so
   without !important here that rule wins on source order and the blush band survives. The
   negative bottom margin exists to cancel the FULL footer's 2.5rem bottom padding; the
   minimal footer has no padding, so it must be zeroed too or the bar hangs past the box. */
body.luqua-chrome .luqua-foot--min .legal{
  border-top:0;padding-top:0;justify-content:center;text-align:center;
  margin-top:0!important;margin-bottom:0!important}

/* ============================================================================
   WooCommerce content branding (cart / checkout / order-received Blocks + classic)
   ========================================================================== */
body.luqua-chrome .entry-content,
body.luqua-chrome .woocommerce{font-family:var(--body);color:var(--ink)}
body.luqua-chrome h1,body.luqua-chrome h2,body.luqua-chrome h3,
body.luqua-chrome .wc-block-components-title,
body.luqua-chrome .wc-block-components-checkout-step__title{font-family:var(--display)!important;color:var(--charcoal)!important;font-weight:600}
/* keep the cart content mostly neutral (owner: "too much purple") — links charcoal, warm on hover */
body.luqua-chrome .entry-content a,body.luqua-chrome .woocommerce a{color:var(--charcoal)}
body.luqua-chrome .entry-content a:hover,body.luqua-chrome .woocommerce a:hover{color:var(--cta)}
/* product names + all money figures stay charcoal (they were rendering violet) */
body.luqua-chrome .wc-block-components-product-name,
body.luqua-chrome .wc-block-components-product-price,
body.luqua-chrome .wc-block-components-product-price__value,
body.luqua-chrome .wc-block-components-formatted-money-amount,
body.luqua-chrome .wc-block-components-totals-item__value,
body.luqua-chrome .wc-block-components-order-summary-item__total-price,
body.luqua-chrome .woocommerce .amount{color:var(--charcoal)!important}
body.luqua-chrome .wc-block-components-product-name:hover{color:var(--cta)}

/* content width + rhythm (Woo blocks render full-bleed once Blocksy container is neutralised) */
body.luqua-chrome .wc-block-cart,
body.luqua-chrome .wc-block-checkout,
body.luqua-chrome .woocommerce-order-received .woocommerce,
body.luqua-chrome .woocommerce-order-received .entry-content>*{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut)}
body.luqua-chrome .wc-block-cart,body.luqua-chrome .wc-block-checkout{padding-top:2.5rem;padding-bottom:4rem}

/* primary action buttons -> House Purple pills */
/* Commerce CTAs use the warm coral action colour (not brand purple): it drives the click, stands
   apart from brand-nav purple, and lightens the page's purple load. --cta = coral-700 (legible with
   white); consistent darken-on-hover across cart / checkout / drawer so the whole flow matches. */
body.luqua-chrome .wc-block-components-button.contained,
body.luqua-chrome .wc-block-components-button:not(.wc-block-components-button--link),
body.luqua-chrome .wp-element-button,
body.luqua-chrome .wc-block-cart__submit-button,
body.luqua-chrome a.checkout-button,
body.luqua-chrome .woocommerce a.button,
body.luqua-chrome .woocommerce button.button,
body.luqua-chrome .woocommerce input.button,
body.luqua-chrome #place_order{
  background:var(--cta)!important;color:#fff!important;border:0!important;
  border-radius:999px!important;font-family:var(--body)!important;font-weight:600!important;
  min-height:52px;box-shadow:0 10px 26px rgba(226,84,95,.28)!important;transition:background .18s ease,transform .18s ease}
body.luqua-chrome .wc-block-components-button.contained:hover,
body.luqua-chrome .wp-element-button:hover,
body.luqua-chrome .wc-block-cart__submit-button:hover,
body.luqua-chrome a.checkout-button:hover,
body.luqua-chrome .woocommerce a.button:hover,
body.luqua-chrome .woocommerce button.button:hover,
body.luqua-chrome #place_order:hover{background:var(--cta-dark)!important;transform:translateY(-2px)}

/* link-style buttons + labels */
body.luqua-chrome .wc-block-components-button.wc-block-components-button--link{color:var(--cta)}
body.luqua-chrome .wc-block-components-totals-item__label{color:var(--charcoal)}

/* form fields */
body.luqua-chrome .wc-block-components-text-input input,
body.luqua-chrome .wc-block-components-select select,
body.luqua-chrome .wc-block-components-address-form input,
body.luqua-chrome .woocommerce form .form-row input.input-text,
body.luqua-chrome .woocommerce form .form-row select,
body.luqua-chrome .select2-container .select2-selection{border-radius:var(--r-sm)!important;border-color:var(--line)!important}
body.luqua-chrome .wc-block-components-text-input.is-active label,
body.luqua-chrome .wc-block-components-checkbox__input:checked{color:var(--house)}
body.luqua-chrome .wc-block-components-text-input input:focus,
body.luqua-chrome .wc-block-components-select select:focus{outline:2px solid var(--violet-300)!important;outline-offset:1px;box-shadow:none!important}
body.luqua-chrome input[type=checkbox]:checked,
body.luqua-chrome input[type=radio]:checked{accent-color:var(--house)}

/* totals / order-summary cards */
body.luqua-chrome .wc-block-components-totals-wrapper,
body.luqua-chrome .wc-block-checkout__sidebar .wc-block-components-order-summary,
body.luqua-chrome .cart_totals,
body.luqua-chrome .wc-block-checkout__sidebar{border-radius:var(--r-lg)}
body.luqua-chrome .wc-block-checkout__sidebar{background:var(--blush);border:1px solid var(--line);padding:1.4rem 1.6rem}
body.luqua-chrome .wc-block-components-totals-item__value,
body.luqua-chrome .wc-block-components-order-summary-item__total-price,
body.luqua-chrome .order-total .amount{font-family:var(--display);color:var(--charcoal)}
body.luqua-chrome .wc-block-cart__totals-title,
body.luqua-chrome .wc-block-components-totals-footer-item{color:var(--charcoal)}

/* cart line-item table header */
body.luqua-chrome .wc-block-cart-items__header,
body.luqua-chrome .woocommerce table.shop_table thead th{font-family:var(--body);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--muted)}

/* discount / "save" badges keep coral accent */
body.luqua-chrome .wc-block-components-sale-badge{background:var(--coral-050);color:var(--coral-700);border-radius:999px;font-weight:600}

/* product thumbnails: neutral blush tile (keeps the cart off-purple) */
body.luqua-chrome .wc-block-cart-item__image img,
body.luqua-chrome .wc-block-components-order-summary-item__image img{border-radius:var(--r-md);background:var(--blush)}

/* Address form: restore the row gap above Country/Region. WC core zeroes the country-input's
   margin-top (a higher-specificity rule beats the base 16px), so it collapses flush against the
   First/Last name row while every text-input row keeps its 12px. Put a matching gap back. */
body.luqua-chrome .wc-block-components-address-form .wc-block-components-country-input:not(:first-child){margin-top:12px}

/* ---- Order summary: cleaner line item (owner: "quite ugly") ---- */
/* 1) Drop the long marketing excerpt — a summary line only needs name + qty + price. */
body.luqua-chrome .wc-block-components-product-metadata__description{display:none}
/* 2) Line item: a touch more room, bigger softer thumbnail. */
body.luqua-chrome .wc-block-components-order-summary-item{padding:.2rem 0;column-gap:.9rem}
body.luqua-chrome .wc-block-components-order-summary-item__image{width:56px;min-width:56px}
/* 3) Product name: brand display face, readable, tidy. */
body.luqua-chrome .wc-block-components-order-summary-item__description .wc-block-components-product-name{
  font-family:var(--display);font-size:1rem;font-weight:600;line-height:1.3;color:var(--charcoal);margin:0 0 .3rem}
/* 4) Prices: keep ONE clean price on the right (line total + "Save" note); drop the duplicate
   per-item price block under the name. */
body.luqua-chrome .wc-block-cart-item__prices{display:none}
body.luqua-chrome .wc-block-components-order-summary-item__total-price{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--charcoal)}
/* 5) "Save RMx" reads as a small coral note, not a raw run-on with the price. */
body.luqua-chrome .wc-block-components-order-summary-item__total-price .wc-block-components-sale-badge,
body.luqua-chrome .wc-block-components-order-summary-item .wc-block-components-sale-badge{
  display:inline-block;margin-top:.25rem;font-size:.72rem;padding:.15em .6em;background:var(--coral-050);color:var(--coral-700);border-radius:999px;font-weight:600;white-space:nowrap}
/* 6) Trim nested borders so the sidebar reads as one clean card, not boxes-in-boxes. */
body.luqua-chrome .wc-block-checkout__sidebar .wc-block-components-order-summary{border:none;background:transparent;padding:0}
body.luqua-chrome .wc-block-components-order-summary-item{border:none}
/* 7) Totals rows: gentle breathing room, and collapse the empty discount/fee rows that WooCommerce
   always renders (they were leaving a big blank gap between Subtotal and Delivery). */
body.luqua-chrome .wc-block-components-totals-wrapper:empty{display:none}
body.luqua-chrome .wp-block-woocommerce-checkout-order-summary-discount-block:empty,
body.luqua-chrome .wp-block-woocommerce-checkout-order-summary-fee-block:empty{display:none}
body.luqua-chrome .wc-block-components-totals-item{margin:.2rem 0}

/* Checkout navigation (owner 2026-07-13): min-header logo now links home (reset link styling), plus a
   low-key "Continue shopping" link injected under Place order by luqua-cart.js. */
body.luqua-chrome .luqua-header--min .brand{text-decoration:none;display:inline-flex;align-items:center}
body.luqua-chrome .luqua-continue-shopping{display:block;text-align:center;margin:1.1rem auto .2rem;
  font-family:var(--body);font-size:.95rem;color:var(--house);text-decoration:none}
body.luqua-chrome .luqua-continue-shopping:hover{text-decoration:underline}

/* ---- responsive ---- */
@media (max-width:920px){
  body.luqua-chrome .luqua-header .nav ul{display:none}
  body.luqua-chrome .luqua-header .burger{display:block}
  body.luqua-chrome .luqua-header .nav ul.open{display:grid;position:absolute;top:100%;left:0;right:0;background:#FFFDFB;border-bottom:1px solid var(--line);padding:1rem var(--gut) 1.4rem;gap:.9rem;box-shadow:var(--shadow-lg)}
  body.luqua-chrome .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  body.luqua-chrome .foot-grid{grid-template-columns:1fr}
}

/* ---- Thank-you (order-received) confirmation hero ---- */
body.luqua-chrome .luqua-ty-hero{background:radial-gradient(120% 120% at 50% 0%,var(--violet-050) 0%,var(--blush) 60%,var(--warm-white) 100%);text-align:center;padding:clamp(2.6rem,5vw,4.5rem) 0 clamp(2rem,3vw,3rem);border-bottom:1px solid var(--line)}
body.luqua-chrome .luqua-ty-hero .ty-badge{width:64px;height:64px;margin:0 auto 1.2rem;border-radius:50%;background:var(--house);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}
body.luqua-chrome .luqua-ty-hero .ty-badge svg{width:30px;height:30px}
body.luqua-chrome .luqua-ty-hero .eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-700);margin-bottom:.6rem}
body.luqua-chrome .luqua-ty-hero h1{font-size:clamp(2rem,1.4rem + 2.4vw,3rem);margin:0 0 .8rem}
body.luqua-chrome .luqua-ty-hero .ty-lead{max-width:34em;margin:0 auto 1.8rem;font-size:1.05rem;color:var(--ink)}
body.luqua-chrome .luqua-ty-hero .ty-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
body.luqua-chrome .btn-ghost,body.luqua-chrome .btn-ghost:hover,body.luqua-chrome .btn-ghost:focus{color:var(--house)!important}
body.luqua-chrome .btn-ghost{background:transparent;border:1.5px solid var(--line)}
body.luqua-chrome .btn-ghost:hover{border-color:var(--house);background:var(--violet-050)}
/* our hero replaces WooCommerce's plain "Your order has been received" status line to avoid a duplicate */
body.luqua-chrome .woocommerce-thankyou-order-received,
body.luqua-chrome .wc-block-order-confirmation-status{display:none!important}

/* ---- Thank-you: pending / failed hero variants (2026-07-27) ---- */
/* Amber for "confirming", not red: nothing has gone wrong, the bank is just still talking. */
body.luqua-chrome .luqua-ty-hero.is-pending .ty-badge{background:#B26B00}
body.luqua-chrome .luqua-ty-hero.is-pending .eyebrow{color:#8A5200}
body.luqua-chrome .luqua-ty-hero.is-failed .ty-badge{background:#A6385A}
body.luqua-chrome .luqua-ty-hero.is-failed .eyebrow{color:#A6385A}

/* ---- Thank-you: "What happens next" ---- */
body.luqua-chrome .luqua-ty-next{background:var(--warm-white);padding:clamp(2rem,4vw,3.2rem) 0}
body.luqua-chrome .luqua-ty-next h2{font-size:clamp(1.25rem,1rem + .9vw,1.6rem);text-align:center;margin:0 0 1.8rem}
body.luqua-chrome .luqua-ty-next ol{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(3,1fr);counter-reset:tn}
body.luqua-chrome .luqua-ty-next li{counter-increment:tn;position:relative;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.3rem;text-align:center}
body.luqua-chrome .luqua-ty-next li::before{content:counter(tn);position:absolute;top:.7rem;left:.9rem;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--muted)}
body.luqua-chrome .luqua-ty-next .tn-ic{display:block;color:var(--house);line-height:0;margin:.2rem 0 .8rem}
body.luqua-chrome .luqua-ty-next .tn-ic svg{width:26px;height:26px}
body.luqua-chrome .luqua-ty-next b{display:block;font-family:var(--display);font-weight:600;
  font-size:1.02rem;color:var(--charcoal);margin-bottom:.35rem}
body.luqua-chrome .luqua-ty-next span:not(.tn-ic){font-size:.88rem;color:var(--muted);line-height:1.5}
body.luqua-chrome .luqua-ty-next .tn-help{text-align:center;margin:1.4rem 0 0;font-size:.9rem;color:var(--muted)}
body.luqua-chrome .luqua-ty-next .tn-help a{color:var(--house);font-weight:600}
@media (max-width:820px){
  body.luqua-chrome .luqua-ty-next ol{grid-template-columns:1fr}
}

/* ============================================================================
   Thank-you: the WooCommerce order tables (2026-07-27)

   ⚠️ BUG FIXED HERE. The container rule above read
       body.luqua-chrome .woocommerce-order-received .woocommerce
   but `woocommerce-order-received` is a class on the BODY, not a wrapper element, so the
   descendant combinator could never match and the whole order summary rendered full-bleed
   at left:0, width:1497px — headings ("Order details", "Billing address") sat hard against
   the viewport edge and were visually clipped. The fix is removing one space so the class
   is read on the body itself. Verified against the real order-received markup, which is the
   CLASSIC `.woocommerce` div here, not the block confirmation template.
   ============================================================================ */
body.luqua-chrome.woocommerce-order-received .woocommerce{
  max-width:var(--max);margin:0 auto;padding:clamp(2rem,4vw,3rem) var(--gut) clamp(2.5rem,5vw,4rem)}

/* Order summary list (order number / date / email / total / payment method) */
body.luqua-chrome.woocommerce-order-received .woocommerce-order-overview{
  list-style:none;margin:0 0 2.4rem;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
body.luqua-chrome.woocommerce-order-received .woocommerce-order-overview li{
  padding:1.1rem 1.3rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
body.luqua-chrome.woocommerce-order-received .woocommerce-order-overview li strong{
  display:block;margin-top:.35rem;font-family:var(--display);font-size:1.05rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--charcoal)}

body.luqua-chrome.woocommerce-order-received h2{
  font-size:clamp(1.2rem,1rem + .8vw,1.5rem);margin:0 0 1rem}
body.luqua-chrome.woocommerce-order-received table.woocommerce-table--order-details,
body.luqua-chrome.woocommerce-order-received table.shop_table{
  width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:2.4rem}
body.luqua-chrome.woocommerce-order-received table.shop_table th,
body.luqua-chrome.woocommerce-order-received table.shop_table td{
  border:0;border-bottom:1px solid var(--line);padding:.95rem 1.3rem;text-align:left;font-size:.95rem}
body.luqua-chrome.woocommerce-order-received table.shop_table thead th{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--warm-white)}
body.luqua-chrome.woocommerce-order-received table.shop_table td:last-child,
body.luqua-chrome.woocommerce-order-received table.shop_table th:last-child{text-align:right}
body.luqua-chrome.woocommerce-order-received table.shop_table tfoot th{font-weight:600;color:var(--charcoal)}
body.luqua-chrome.woocommerce-order-received table.shop_table tfoot tr:last-child th,
body.luqua-chrome.woocommerce-order-received table.shop_table tfoot tr:last-child td{
  border-bottom:0;font-size:1.05rem;font-family:var(--display)}

/* Addresses */
body.luqua-chrome.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns{
  display:grid;gap:1rem;grid-template-columns:1fr 1fr}
body.luqua-chrome.woocommerce-order-received .woocommerce-customer-details address{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.2rem 1.3rem;font-style:normal;line-height:1.7;font-size:.95rem}
@media (max-width:820px){
  body.luqua-chrome.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns{
    grid-template-columns:1fr}
}

/* ⚠️ A PAID order must never show "Pay". WooCommerce renders the actions row from the state
   it had when the page was built, and on a redirect method (FPX, GrabPay) that render can
   happen seconds BEFORE the webhook lands — the 2026-07-27 test order showed Pay and Cancel
   under a "thank you". The hero is already status-aware; this hides the stale control so the
   two can never contradict each other. `.is-paid` is set on <body> from PHP. */
body.luqua-chrome.luqua-ty-paid .woocommerce-order-overview li.woocommerce-order-overview__actions,
body.luqua-chrome.luqua-ty-paid td.order-actions,
body.luqua-chrome.luqua-ty-paid .woocommerce-order-details a.button.pay,
body.luqua-chrome.luqua-ty-paid .woocommerce-order-details a.button.cancel{display:none!important}

/* ── WooCommerce product-grid buttons (added 2026-07-25) ──────────────────────────────────
   The EMPTY cart page renders a product grid whose buttons carry
   `.wp-block-button__link.add_to_cart_button`, a selector none of the overrides above matched,
   so they fell through to Blocksy's default blue #2872FA at 3.22:1 — off-brand AND failing AA,
   on a page a visitor genuinely lands on. Same violet pill as every other action on the site. */
body.luqua-chrome .wp-block-button__link.add_to_cart_button,
body.luqua-chrome .add_to_cart_button,
body.luqua-chrome .wc-block-components-product-button__button{
  background:var(--cta)!important;color:#fff!important;border:0!important;
  border-radius:999px!important;font-family:var(--body)!important;font-weight:600!important;
  box-shadow:0 8px 20px rgba(226,84,95,.24)!important;transition:background .18s ease,transform .18s ease}
body.luqua-chrome .wp-block-button__link.add_to_cart_button:hover,
body.luqua-chrome .add_to_cart_button:hover,
body.luqua-chrome .wc-block-components-product-button__button:hover{
  background:var(--cta-dark)!important;transform:translateY(-2px)}

/* ============================================================================
   DOC PAGES (2026-07-26) — policy, search, 404, blog: anything that now takes the shared
   LUQUA chrome via luqua_chrome_mode() but is not a WooCommerce screen.
   Before this, /refund_returns/ rendered in system-ui, full-bleed at 1497px with no container,
   under Blocksy's own header. These pages are read at the moment of maximum doubt (she clicked
   "returns policy" from the buy box), so they have to look like the same company.
   Reading width is --narrow (760px), matching the canvas pages' .narrow blocks.
   ============================================================================ */
body.luqua-doc{background:var(--warm-white,#FFFDFB);color:var(--ink,#4A4A55);
  font-family:var(--body,'Montserrat',system-ui,sans-serif);font-size:1rem;line-height:1.7}
body.luqua-doc main,body.luqua-doc .site-main,body.luqua-doc [class*="content-area"]{padding:0}
/* !important is load-bearing here. style.css lines 12-14 force max-width:100%, padding:0 and
   .entry-header{display:none} on EVERY `.page`, because they were written for the canvas pages
   (72-77, 96) that carry their own full-bleed layout. That scope leaks onto any ordinary page,
   so a doc page (policy, 404, blog) renders edge to edge with its title hidden unless these win.
   Scoped to .luqua-doc, so canvas and WooCommerce pages are untouched. */
body.luqua-doc .entry-content,body.luqua-doc .page-content{
  max-width:var(--narrow,760px)!important;margin:0 auto!important;
  padding:clamp(2rem,4vw,3rem) clamp(1.25rem,3vw,3rem) clamp(4rem,7vw,6rem)!important}
/* Blocksy wraps the page title in .hero-section, which is the element style.css line 14 hides.
   Restore the whole chain, or the doc page renders with no title at all. */
body.luqua-doc .hero-section{display:block!important;max-width:var(--narrow,760px);margin:0 auto;
  padding:clamp(3rem,6vw,5rem) clamp(1.25rem,3vw,3rem) 0!important}
body.luqua-doc .entry-header{display:block!important;text-align:left;padding:0!important;margin:0!important}
body.luqua-doc .entry-header .page-title,body.luqua-doc .entry-header h1{display:block!important}
/* Body rhythm: the global page reset zeroes these, so the doc rules have to state it outright. */
body.luqua-doc .entry-content p{margin:0 0 1.1rem!important}
body.luqua-doc .entry-content ul,body.luqua-doc .entry-content ol{margin:0 0 1.3rem!important;padding-left:1.35rem!important}
body.luqua-doc .entry-content li{margin:0 0 .5rem!important}
body.luqua-doc .entry-content table{margin:0 0 1.6rem!important}
body.luqua-doc .entry-content h2{margin:2.6rem 0 .7rem!important}
body.luqua-doc .entry-content h3{margin:1.9rem 0 .5rem!important}
body.luqua-doc .doc-meta{margin:0 0 2.2rem!important}
body.luqua-doc h1,body.luqua-doc h2,body.luqua-doc h3{
  font-family:var(--display,'Playfair Display',Georgia,serif);color:var(--charcoal,#2C2C34);
  font-weight:600;letter-spacing:-.01em;line-height:1.18}
body.luqua-doc h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3rem);margin:0 0 .6rem}
body.luqua-doc h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.7rem);margin:2.6rem 0 .7rem}
body.luqua-doc h3{font-size:1.08rem;margin:1.9rem 0 .5rem}
body.luqua-doc .entry-content p{margin:0 0 1.1rem}
body.luqua-doc .entry-content ul,body.luqua-doc .entry-content ol{margin:0 0 1.3rem;padding-left:1.35rem}
body.luqua-doc .entry-content li{margin:0 0 .5rem}
body.luqua-doc .entry-content strong,body.luqua-doc .entry-content b{color:var(--charcoal,#2C2C34);font-weight:600}
body.luqua-doc .entry-content a{color:var(--violet,#5347C0);text-decoration:underline;text-underline-offset:2px}
body.luqua-doc .entry-content a:hover{color:var(--violet-700,#3E35A0)}
body.luqua-doc .entry-content hr{border:0;border-top:1px solid var(--line,#E7E1E6);margin:2.6rem 0}
body.luqua-doc .entry-content table{width:100%;border-collapse:collapse;margin:0 0 1.6rem;font-size:.94rem}
body.luqua-doc .entry-content th,body.luqua-doc .entry-content td{
  border:0;border-bottom:1px solid var(--line,#E7E1E6);padding:.7rem .8rem;text-align:left;vertical-align:top}
body.luqua-doc .entry-content th{font-weight:600;color:var(--charcoal,#2C2C34)}
/* Lead + meta line under the H1 (policy pages set an "last updated" line). */
body.luqua-doc .doc-meta{font-size:.85rem;color:var(--muted,#6E6E7A);margin:0 0 2.2rem}
/* Callout reused from the canvas pages so advisories look identical site-wide. */
body.luqua-doc .doc-note{background:var(--advisory-bg,#FBEBDD);border-left:3px solid var(--advisory,#B25E2A);
  border-radius:12px;padding:1.05rem 1.25rem;margin:0 0 1.6rem;font-size:.92rem;color:var(--ink,#4A4A55)}

/* ---- Empty cart (2026-07-26) ------------------------------------------------------------
   The stock block-cart empty state shipped a sad-face heading, a dotted separator, a
   "New in store" heading and `wp:woocommerce/product-new` (a newest-products grid). Two
   problems, one cosmetic and one strategic:
   1. It rendered as raw Blocksy: default font, SALE badges, four identical pack shots.
   2. The grid surfaced the DORMANT B4 / B5 / B6 tiers. Those SKUs stay published for
      marketplace variants and voucher mechanics, but BUNDLE-ARCHITECTURE.md is explicit that
      DTC shows 1 / 3 / 6 only and that nothing on DTC links to the dormant tiers. An
      auto-generated "newest products" grid is exactly such a link, created by the block
      rather than by anyone deciding to add it.
   Replaced in page 7 with a wp:html block; styled here to match the thank-you hero.
   ------------------------------------------------------------------------------------------ */
.luqua-empty-cart{max-width:520px;margin:clamp(3rem,7vw,5.5rem) auto;padding:0 var(--gut,1.5rem);text-align:center}
.luqua-empty-cart .lec-icon{display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:999px;background:var(--violet-050,#F3F1FC);color:var(--violet,#5347C0);margin:0 0 1.4rem}
.luqua-empty-cart .lec-icon svg{width:28px;height:28px}
.luqua-empty-cart h2{font-family:var(--display,'Playfair Display',Georgia,serif);
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.1rem);font-weight:600;color:var(--charcoal,#2C2C34);margin:0 0 .6rem;line-height:1.2}
.luqua-empty-cart p{font-size:.98rem;line-height:1.65;color:var(--muted,#6E6E7A);margin:0 auto 1.9rem;max-width:34em}
.luqua-empty-cart .lec-actions{display:flex;flex-direction:column;align-items:center;gap:.7rem}
/* Both actions to one width: side by side they overflowed the 424px column and wrapped to a
   ragged 210px / 282px stack. Stacking deliberately at equal width reads intentional instead. */
.luqua-empty-cart .lec-actions .btn{width:min(100%,300px)}
/* Specificity collision in the EXISTING chrome CSS, found via the empty-cart CTA and fixed
   generally rather than just here. `body.luqua-chrome .entry-content a{color:var(--charcoal)}`
   is (0,2,2) and outranks `body.luqua-chrome .btn-primary` (0,2,0), so ANY .btn-primary LINK
   placed inside .entry-content on a chrome page renders charcoal-on-coral. Verified: the
   empty-cart CTA computed rgb(44,44,52) while the identical header CTA computes
   rgb(255,255,255), because the header sits outside .entry-content. The next .btn-primary
   anyone drops into cart/checkout/account content would have hit the same trap. */
body.luqua-chrome .entry-content a.btn-primary,
body.luqua-chrome .entry-content a.btn-primary:hover,
body.luqua-chrome .entry-content a.btn-primary:focus,
body.luqua-chrome .woocommerce a.btn-primary,
body.luqua-chrome .woocommerce a.btn-primary:hover,
body.luqua-chrome .woocommerce a.btn-primary:focus{color:#fff}

/* ============================================================================
   MY ACCOUNT (owner 2026-07-27)

   The account pages were never styled: this stylesheet loads on them (the chrome
   header/footer render correctly) but carried no account rules, so the content fell
   through to Woo + Blocksy defaults. That produced a full-bleed navigation column
   with a BLUE active state, a colour that appears nowhere in the LUQUA palette.

   Covers the logged-out login form and every logged-in endpoint (dashboard, orders,
   downloads, addresses, payment methods, account details).
   ========================================================================== */

/* ---- shell: give the account content the same measure as cart/checkout ----
   !important is required, not decorative: the Blocksy container is neutralised further
   up this file so Woo blocks can go full-bleed, and that rule zeroes max-width and the
   auto margins on `.entry-content.is-layout-constrained > *`. Without !important the
   account content renders edge to edge and the login card sits hard against the left
   gutter. Same trap as the footer `.legal` note above. */
body.luqua-chrome.woocommerce-account .woocommerce{
  max-width:var(--max)!important;margin-left:auto!important;margin-right:auto!important;
  padding:2.75rem var(--gut) 4.5rem}

/* ---- logged out: a single centred card, not a stretched full-width form ---- */
body.luqua-chrome.woocommerce-account:not(.logged-in) .woocommerce{max-width:520px!important}
body.luqua-chrome .woocommerce-form-login{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem 1.9rem;box-shadow:var(--shadow-sm);margin:0}
body.luqua-chrome .woocommerce-form-login .form-row{margin-bottom:1rem;padding:0}
body.luqua-chrome .woocommerce-form-login label{
  font-family:var(--body);font-size:.85rem;font-weight:600;color:var(--charcoal);margin-bottom:.35rem;display:block}
body.luqua-chrome .woocommerce-form-login .woocommerce-form-login__rememberme{
  font-weight:400;color:var(--ink);font-size:.85rem}
body.luqua-chrome .woocommerce-form-login .lost_password{margin:.4rem 0 0;font-size:.85rem}
body.luqua-chrome .woocommerce-form-login .lost_password a{color:var(--cta)}

/* ---- logged in: sidebar + content ---- */
body.luqua-chrome.woocommerce-account.logged-in .woocommerce{
  display:grid;grid-template-columns:246px minmax(0,1fr);gap:2.6rem;align-items:start}

body.luqua-chrome .woocommerce-MyAccount-navigation{
  background:var(--blush);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:.5rem;position:sticky;top:1.5rem}
body.luqua-chrome .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
body.luqua-chrome .woocommerce-MyAccount-navigation li{margin:0;border:0}
/* flex + height:auto is load-bearing. Blocksy gives these links a fixed height, so
   "Payment methods" wrapped to a second line and that line rendered OUTSIDE the active
   pill's background. Any label long enough to wrap would have done the same. */
body.luqua-chrome .woocommerce-MyAccount-navigation li a{
  display:flex;align-items:center;gap:.6rem;height:auto!important;min-height:0;
  padding:.72rem .95rem;border-radius:var(--r-sm);
  font-family:var(--body);font-size:.9rem;font-weight:500;color:var(--ink);
  text-decoration:none;border:0;transition:background .16s ease,color .16s ease}
body.luqua-chrome .woocommerce-MyAccount-navigation li a>svg,
body.luqua-chrome .woocommerce-MyAccount-navigation li a>img,
body.luqua-chrome .woocommerce-MyAccount-navigation li a::before{flex:0 0 auto}
body.luqua-chrome .woocommerce-MyAccount-navigation li a:hover{background:#fff;color:var(--charcoal)}
/* the default active state renders BLUE; force House Purple */
body.luqua-chrome .woocommerce-MyAccount-navigation li.is-active a,
body.luqua-chrome .woocommerce-MyAccount-navigation li.is-active a:hover{
  background:var(--house)!important;color:#fff!important;font-weight:600}
body.luqua-chrome .woocommerce-MyAccount-navigation li--logout a{color:var(--muted)}

body.luqua-chrome .woocommerce-MyAccount-content{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem 2.1rem;box-shadow:var(--shadow-sm);min-height:340px}
body.luqua-chrome .woocommerce-MyAccount-content p{color:var(--ink);line-height:1.7}
body.luqua-chrome .woocommerce-MyAccount-content a:not(.button){
  color:var(--house);text-underline-offset:2px}
body.luqua-chrome .woocommerce-MyAccount-content h2,
body.luqua-chrome .woocommerce-MyAccount-content h3,
body.luqua-chrome .woocommerce-MyAccount-content legend{
  font-family:var(--display);color:var(--charcoal);margin:0 0 1rem}

/* ---- tables (orders, downloads) ---- */
body.luqua-chrome .woocommerce-MyAccount-content table.shop_table{
  border:1px solid var(--line);border-radius:var(--r-md);border-collapse:separate;
  border-spacing:0;overflow:hidden;width:100%}
body.luqua-chrome .woocommerce-MyAccount-content table.shop_table th,
body.luqua-chrome .woocommerce-MyAccount-content table.shop_table td{
  border:0;border-bottom:1px solid var(--line);padding:.9rem 1rem;text-align:left}
body.luqua-chrome .woocommerce-MyAccount-content table.shop_table tr:last-child td{border-bottom:0}

/* ---- addresses ---- */
body.luqua-chrome .woocommerce-Addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
body.luqua-chrome .woocommerce-Address{
  background:var(--blush);border:1px solid var(--line);border-radius:var(--r-md);padding:1.3rem 1.4rem}
body.luqua-chrome .woocommerce-Address address{font-style:normal;color:var(--ink);line-height:1.7}

/* ---- notices ---- */
body.luqua-chrome .woocommerce-message,
body.luqua-chrome .woocommerce-info,
body.luqua-chrome .woocommerce-error{border-radius:var(--r-md);border-top-color:var(--house)}

/* ---- mobile: stack, and stop the sidebar sticking ---- */
@media (max-width:860px){
  body.luqua-chrome.woocommerce-account.logged-in .woocommerce{grid-template-columns:1fr;gap:1.4rem}
  body.luqua-chrome .woocommerce-MyAccount-navigation{position:static}
  body.luqua-chrome .woocommerce-MyAccount-navigation ul{
    display:flex;flex-wrap:wrap;gap:.35rem}
  body.luqua-chrome .woocommerce-MyAccount-navigation li a{padding:.55rem .8rem;font-size:.85rem}
  body.luqua-chrome .woocommerce-MyAccount-content{padding:1.5rem 1.3rem}
}

/* login page intro (functions.php: woocommerce_before_customer_login_form) */
body.luqua-chrome .luqua-account-intro{text-align:center;margin-bottom:1.6rem}
body.luqua-chrome .luqua-account-intro h1{
  font-family:var(--display);font-size:clamp(1.7rem,1.2rem + 1.6vw,2.2rem);
  color:var(--charcoal);margin:0 0 .6rem;line-height:1.15}
body.luqua-chrome .luqua-account-intro p{
  font-family:var(--body);font-size:.9rem;line-height:1.65;color:var(--ink);margin:0}

/* ============================================================================
   FOOTER — the same rules the canvas pages get (owner 2026-07-27)

   ⚠️ Why this block exists. The current footer CSS lives in style.css scoped as
   `.page .entry-content .foot-…`, i.e. it REQUIRES Blocksy's .entry-content wrapper.
   On canvas pages the footer is part of post_content, so it sits inside that wrapper
   and the rules apply. On the Woo chrome pages the footer is printed by
   luqua_render_chrome_footer() OUTSIDE .entry-content, so NONE of them matched and the
   footer rendered with the payment chips crammed together and the social icons unstyled.

   The markup is already single-source (parts/footer-site.php). These are the same
   declarations with the .entry-content requirement removed and re-scoped to
   body.luqua-chrome, so the two contexts paint identically.

   Generated from style.css, not hand-copied. If the footer design changes there,
   re-generate rather than editing both by hand.
   ========================================================================== */
body.luqua-chrome .pay-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.35rem;margin:-.5rem 0 1.4rem;}
body.luqua-chrome .pay-chip{width:56px;height:36px;background:#fff;
  border:1px solid var(--line,#E7E1E6);border-radius:8px;
  display:flex;align-items:center;justify-content:center;padding:0 7px;
  box-shadow:0 1px 3px rgba(44,44,52,.06);}
body.luqua-chrome .pay-chip img{max-height:22px;max-width:100%;width:auto;display:block}
body.luqua-chrome .pay-strip .pay-chip{width:50px;height:32px;padding:0 6px}
body.luqua-chrome .pay-strip .pay-chip img{max-height:19px}
body.luqua-chrome .foot-pay{display:flex!important;flex-wrap:wrap;align-items:center;gap:.5rem}
body.luqua-chrome .foot-pay-lead{color:var(--muted,#54525E);letter-spacing:.03em;margin-right:.25rem}
body.luqua-chrome footer.site{background:#F3EBF0!important;
  color:#4A4A55!important;
  border-top:1px solid #E4DAE4!important;}
body.luqua-chrome footer.site .foot-grid img{filter:brightness(0)!important;opacity:.9}
body.luqua-chrome footer.site .foot-grid h4{color:#782B90!important}
body.luqua-chrome footer.site .foot-grid ul{margin:0!important;padding:0!important;list-style:none!important}
body.luqua-chrome footer.site .foot-grid a{color:#3E3E48!important}
body.luqua-chrome footer.site .foot-grid a:hover{color:#782B90!important}
body.luqua-chrome footer.site .foot-grid p{color:#514C5A!important}
body.luqua-chrome footer.site .certs span{border-color:#DCD1DE!important;color:#4A4A55!important}
body.luqua-chrome footer.site .foot-social{display:flex!important;align-items:center;gap:.95rem;margin-top:1rem!important}
body.luqua-chrome footer.site .foot-social a{display:inline-flex!important;line-height:0}
body.luqua-chrome footer.site .foot-social svg{width:20px;height:20px;transition:transform .15s ease}
body.luqua-chrome footer.site .foot-social a:hover svg{transform:translateY(-1px)}
body.luqua-chrome footer.site .foot-news h4{margin-bottom:.7rem!important}
body.luqua-chrome footer.site .foot-news .news-sub{color:#514C5A!important;font-size:.86rem!important;line-height:1.5;margin:0 0 .95rem!important;max-width:34ch}
body.luqua-chrome footer.site .foot-news .news-field{display:flex;align-items:center;gap:.4rem;background:#fff;border:1px solid #DCD1DE;border-radius:999px;padding:.16rem .16rem .16rem 1rem;max-width:330px;transition:border-color .15s ease,box-shadow .15s ease}
body.luqua-chrome footer.site .foot-news .news-field:focus-within{border-color:#782B90;box-shadow:0 0 0 3px rgba(120,43,144,.12)}
body.luqua-chrome footer.site .foot-news .news-field.invalid{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
body.luqua-chrome footer.site .foot-news .news-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:.9rem;color:#3E3E48;padding:.55rem 0}
body.luqua-chrome footer.site .foot-news .news-field input::placeholder{color:#9A94A6}
body.luqua-chrome footer.site .foot-news .news-field button{flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#782B90;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease}
body.luqua-chrome footer.site .foot-news .news-field button:hover{background:#5B2070}
body.luqua-chrome footer.site .foot-news .news-field button svg{width:18px;height:18px}
body.luqua-chrome footer.site .foot-news .news-consent{color:#7A7684!important;font-size:11.5px!important;line-height:1.5;margin:.65rem 0 0!important;max-width:34ch}
body.luqua-chrome footer.site .foot-news .news-ok{color:#782B90!important;font-weight:600;font-size:.85rem!important;margin:.65rem 0 0!important}
body.luqua-chrome footer.site .foot-news .news-ok.err{color:#C0392B!important}
body.luqua-chrome footer.site .foot-news .news-field button[disabled]{opacity:.6;cursor:progress}
body.luqua-chrome footer.site .foot-disclaimer{border:1px solid #E0D4E2!important;border-radius:12px!important;background:transparent!important;padding:.95rem 1.15rem!important;margin:0 0 1.1rem!important}
body.luqua-chrome footer.site .foot-disclaimer p{color:#6E6E7A!important;font-size:12.5px!important;line-height:1.65!important;margin:0!important;max-width:none!important}
body.luqua-chrome footer.site .foot-disclaimer{font-size:13px!important;color:#6E6E7A!important;margin:0 0 .2rem!important;line-height:1.5}
body.luqua-chrome footer.site .legal{background:#782B90!important;
  color:#EFE7F2!important;
  border-top:0!important;
  border-radius:0!important;
  
  width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  margin-top:1.6rem!important;
  margin-bottom:-2.5rem!important;
  padding:1.1rem var(--gut)!important;
  justify-content:center!important;
  text-align:center!important;}
body.luqua-chrome footer.site .legal span{color:#EFE7F2!important}
body.luqua-chrome footer.site .foot-pay{color:#6E6E7A!important}

/* ---- minimal (checkout) footer: undo what the ported block re-applied ----
   ⚠️ REGRESSION GUARD. The ported rules above are written for the FULL footer. Two of them
   silently reinstated a bug that was already fixed at line ~111:

     footer.site           -> background:#F3EBF0 + border-top   (paints a band)
     footer.site .legal    -> margin-top:1.6rem                 (creates the band's height)

   The earlier fix is `body.luqua-chrome .luqua-foot--min .legal` (0,3,1). The ported rule is
   `body.luqua-chrome footer.site .legal` (0,3,2) — one more element, so it WINS even though
   both use !important. That is how an empty lavender band reappeared above the purple legal
   bar on checkout after the 27 July CSS port.

   The checkout footer is the legal bar and nothing else: no grid, no padding, so any margin
   on .legal has nothing to sit against and simply becomes a visible gap. Keep the purple bar
   (that comes from the ported .legal rule), drop the surface and the margins. */
body.luqua-chrome footer.site.luqua-foot--min{
  background:transparent!important;
  border-top:0!important}
body.luqua-chrome footer.site.luqua-foot--min .legal{
  margin-top:0!important;
  margin-bottom:0!important}
body.luqua-chrome .hero-chip,
body.luqua-chrome .foot-pay{font-size:13px!important}
body.luqua-chrome .certs span{font-size:13px!important}
body.luqua-chrome .certs + p{font-size:13px!important}
body.luqua-chrome .legal,
body.luqua-chrome .legal span{font-size:13px!important}

/* ---- checkout: ONE order summary on mobile (owner 2026-07-28) ----
   WooCommerce Blocks renders the order summary twice below its sidebar breakpoint. The
   sidebar copy collapses into a tappable "Order summary  RM139.00" panel and moves above the
   form, and a SECOND, permanently-expanded copy is filled into the actions block just above
   Place Order (`checkout-order-summary-block-fill-wrapper`, which does not exist at desktop
   widths at all). Stock behaviour, but the shopper reads it as the same card printed twice,
   and it does not match the desktop view she may have seen first, which shows one summary in
   the right rail.
   The collapsible panel at the top is the one kept: it puts the total in front of her the
   moment the page loads, which is the whole reason mobile checkouts pin it there, and it is
   the pattern every large store uses. Hiding it instead would leave her scrolling the entire
   form before she could see what she is paying.
   Unconditional rather than wrapped in a media query, because the element is only ever
   rendered in the mobile layout. */
body.luqua-chrome .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper{display:none}

/* ═══════════════════════════════════════════════════════════════════════════════
   ORDER SUMMARY, RESTYLED (owner 2026-07-28: "it looks boring")
   ─────────────────────────────────────────────────────────────────────────────
   It was a flat grey box with grey labels and no hierarchy, which reads as a
   disabled notice rather than the thing she is about to pay for. Rebuilt on the
   house rule that classy is craft, not colour (memory luqua-classy-is-craft-not-color):
   a tracked micro-label, one hairline where structure needs it instead of three
   stray ones, a real thumbnail tile, and the TOTAL carrying the typographic weight
   because it is the number that closes the decision.
   Palette stays House Purple, the store-chrome colour. Rose (#A6385A) is used for
   the savings badge, never the light coral, which is unreadable on a light surface
   (memory luqua-accent-color-contrast).
   ═════════════════════════════════════════════════════════════════════════════ */

/* --- the card ------------------------------------------------------------- */
/* Warm white on the page's warm white would vanish, so the card is lifted with a
   violet-tinted hairline and a soft shadow rather than a grey fill. */
body.luqua-chrome .wc-block-checkout__sidebar{
  background:var(--warm-white);
  border:1px solid rgba(120,43,144,.14);
  border-radius:20px;
  padding:1.15rem 1.25rem 1.25rem;
  box-shadow:0 14px 36px rgba(83,71,192,.09)}

/* WooCommerce draws a border-top + 16px margin-top on the PANEL TITLE itself, which left a
   hairline floating above "Order summary" with nothing above it to divide. It also borders
   every totals wrapper; the ones we want are re-added deliberately below. */
body.luqua-chrome .wc-block-checkout__sidebar .wc-block-components-totals-wrapper{
  border-top:0;padding-top:0}
body.luqua-chrome .wc-block-components-checkout-order-summary__title{
  border-top:0!important;margin-top:0!important;
  /* `!important` on the bottom rule too: a Woo rule zeroes it, and this hairline is the one
     that ties the label to the card instead of leaving it floating above a gap. */
  border-bottom:1px solid rgba(120,43,144,.12)!important}
/* The panel body closes with a grey border-bottom that dangled below the total with nothing
   under it. Only appears once the panel is open, which is why it did not show before today. */
body.luqua-chrome .wc-block-components-checkout-order-summary__content{border-bottom:0!important}

/* --- header row ----------------------------------------------------------- */
body.luqua-chrome .wc-block-components-checkout-order-summary__title{
  align-items:center;gap:.75rem;padding:.15rem 0 .9rem;
  border-bottom:1px solid rgba(120,43,144,.12);margin-bottom:.95rem}
/* A tracked micro-label, not a sentence. It names the panel and then gets out of
   the way, which is what lets the total below it read as the important figure. */
body.luqua-chrome .wc-block-components-checkout-order-summary__title-text{
  font-family:var(--body);font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--house);margin:0}
body.luqua-chrome .wc-block-components-checkout-order-summary__title-price{
  margin-left:auto;font-family:var(--display);font-size:1.15rem;
  font-weight:600;color:var(--charcoal)}
body.luqua-chrome .wc-block-components-checkout-order-summary__title-icon{
  color:var(--house);display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;margin-right:-.35rem;border-radius:50%;flex:0 0 32px}
body.luqua-chrome .wc-block-components-checkout-order-summary__title-icon svg{fill:currentColor}
/* Above the sidebar breakpoint the panel is not collapsible (WooCommerce drops role="button"),
   so the chevron is an affordance for an interaction that does not exist. Keyed on the role
   rather than a width, so it follows WooCommerce's own breakpoint wherever that lands. */
body.luqua-chrome .wc-block-components-checkout-order-summary__title:not([role="button"])
  .wc-block-components-checkout-order-summary__title-icon{display:none}

/* Desktop only: WooCommerce draws its own bordered, 5px-radius card around the summary block,
   which sat 1px inside our card as a second outline — boxes in boxes, the exact thing the
   earlier pass removed from the sidebar. */
body.luqua-chrome .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block{
  border:0;border-radius:0;background:none;padding:0}
/* 44px hit area on the whole header row, since it is the control (WCAG 2.5.5). */
body.luqua-chrome .wc-block-components-checkout-order-summary__title[role="button"]{
  min-height:44px;cursor:pointer}

/* --- line item ------------------------------------------------------------ */
body.luqua-chrome .wc-block-components-order-summary-item{
  padding:.15rem 0 .9rem;column-gap:1rem;align-items:flex-start}
body.luqua-chrome .wc-block-components-order-summary-item__image{width:64px;min-width:64px}
body.luqua-chrome .wc-block-components-order-summary-item__image img{
  border-radius:14px;background:var(--violet-050);
  border:1px solid rgba(120,43,144,.10);padding:2px}
/* The quantity bubble ships in WordPress admin blue, the one colour on the page that belongs
   to no part of this brand. ⚠️ The pill is the absolutely-positioned WRAPPER, not the <span>
   inside it — styling the span gave a square badge floating beside the thumbnail instead of a
   disc sitting on its corner. */
/* ⚠️ `!important` because WooCommerce sets `background:currentcolor` on this from a selector
   scoped inside the sidebar, which out-ranks a plain body.luqua-chrome rule. Without it the
   disc rendered WordPress-admin blue while the computed style on the (hidden) duplicate copy
   said purple — a good reminder to measure the node the shopper can actually see. */
body.luqua-chrome .wc-block-components-order-summary-item__quantity{
  background:var(--house)!important;border:2px solid var(--warm-white)!important;
  border-radius:999px!important;min-width:23px;height:23px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(120,43,144,.28)}
body.luqua-chrome .wc-block-components-order-summary-item__quantity span{
  background:none;border:0;color:#fff;font-family:var(--body);font-size:.7rem;
  font-weight:700;line-height:1}
body.luqua-chrome .wc-block-components-order-summary-item__description
  .wc-block-components-product-name{
  font-family:var(--display);font-size:1.02rem;font-weight:600;
  line-height:1.28;color:var(--charcoal);margin:.1rem 0 .25rem}
body.luqua-chrome .wc-block-components-order-summary-item__total-price{
  font-family:var(--display);font-size:1.05rem;font-weight:600;
  color:var(--charcoal);text-align:right;white-space:nowrap}
/* Rose, not coral: this sits on a near-white card. */
body.luqua-chrome .wc-block-components-order-summary-item .wc-block-components-sale-badge{
  display:inline-block;margin-top:.35rem;
  font-family:var(--body);font-size:.68rem;font-weight:700;letter-spacing:.03em;
  padding:.28em .7em;border-radius:999px;
  background:#FCEBEF;color:#A6385A;white-space:nowrap}
/* The amount inside the badge is its own money component and was still inheriting the price
   cell's Playfair + charcoal, so the pill read half-rose and half-serif. */
body.luqua-chrome .wc-block-components-order-summary-item .wc-block-components-sale-badge *,
body.luqua-chrome .wc-block-components-order-summary-item .wc-block-components-sale-badge
  .wc-block-formatted-money-amount{
  font-family:var(--body)!important;font-size:.68rem!important;font-weight:700!important;
  color:#A6385A!important;background:none}

body.luqua-chrome .wc-block-components-order-summary-item__description{flex:1 1 auto;min-width:0}
body.luqua-chrome .wc-block-components-order-summary-item__total-price{flex:0 0 auto}

/* On a phone the three-column row cannot work. Measured at 440px: 313px of row, minus a 64px
   thumb and two 16px gaps, leaves 217 to split — and the price column claims 100 of it because
   the "Save RM40.00" pill is wider than the price itself. The product name was left with 118px
   and broke across FOUR lines, which is what made the card look cramped and cheap.
   So below 600px the price drops to its own line under the name, indented past the thumbnail,
   with the pill beside it. The name gets the full width and sits on two lines. */
@media (max-width:600px){
  body.luqua-chrome .wc-block-checkout__sidebar .wc-block-components-order-summary-item{
    flex-wrap:wrap;align-items:center}
  body.luqua-chrome .wc-block-checkout__sidebar .wc-block-components-order-summary-item__image{
    flex:0 0 64px}
  /* `flex:1 1 0`, NOT `1 1 auto`. With auto the basis is the name's own width, which is wider
     than the space left beside the thumbnail, so in a wrapping row the whole description
     dropped to its own line and the thumbnail sat alone. A zero basis makes it shrink to fit
     and stay on the first line where it belongs. */
  body.luqua-chrome .wc-block-checkout__sidebar .wc-block-components-order-summary-item__description{
    flex:1 1 0;min-width:0}
  body.luqua-chrome .wc-block-checkout__sidebar .wc-block-components-order-summary-item__total-price{
    flex:1 1 100%;margin:.55rem 0 0 80px;   /* 64px thumbnail + the 1rem column gap */
    display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
    gap:.6rem;text-align:left}
  /* WooCommerce wraps the amount and the badge together in a single child, so making the
     price CELL a flex row laid out one box, not two — the pill still stacked underneath.
     The row has to be the wrapper. Matched on a substring so a rename of the suffix does not
     silently put the pill back under the price. */
  body.luqua-chrome .wc-block-checkout__sidebar .wc-block-components-order-summary-item__total-price>*,
  body.luqua-chrome .wc-block-checkout__sidebar
    .wc-block-components-order-summary-item__total-price [class*="total-price-and-sale-badge"]{
    margin:0;display:flex;flex-direction:row;align-items:center;gap:.6rem}
}

/* --- coupon row ----------------------------------------------------------- */
body.luqua-chrome .wp-block-woocommerce-checkout-order-summary-coupon-form-block{
  border-top:1px solid rgba(120,43,144,.12)!important;padding:.15rem 0!important}
body.luqua-chrome .wc-block-components-panel__button{
  font-family:var(--body);font-size:.88rem;font-weight:600;color:var(--house);
  min-height:44px;padding:.4rem 0}
body.luqua-chrome .wc-block-components-panel__button svg{fill:var(--house)}
/* Expanded, the code field and Apply button sat hard against the totals divider 3px below
   (owner 2026-07-28). The block's own `padding:.15rem 0` keeps the COLLAPSED row tight, which
   is right, so the breathing room belongs on the panel body instead — it only exists when the
   panel is open, so the collapsed row stays exactly as tight as it was. */
body.luqua-chrome .wc-block-checkout__sidebar .wc-block-components-totals-coupon
  .wc-block-components-panel__content{padding-bottom:1rem}

/* --- totals --------------------------------------------------------------- */
body.luqua-chrome .wp-block-woocommerce-checkout-order-summary-totals-block{
  border-top:1px solid rgba(120,43,144,.12)!important;padding-top:.85rem!important;margin-top:.15rem}
body.luqua-chrome .wc-block-components-totals-item{
  margin:0;padding:.28rem 0;align-items:baseline}
body.luqua-chrome .wc-block-components-totals-item__label{
  font-family:var(--body);font-size:.9rem;font-weight:500;color:var(--muted)}
body.luqua-chrome .wc-block-components-totals-item__value{
  font-family:var(--display);font-size:1rem;font-weight:600;color:var(--charcoal)}
/* "Enter address to calculate" is a prompt, not a figure — it should not sit in the
   display face at the same weight as a price the shopper can actually read. */
body.luqua-chrome .wc-block-components-totals-shipping__via,
body.luqua-chrome .wc-block-components-totals-shipping .wc-block-components-totals-item__value:not(.wc-block-formatted-money-amount){
  font-family:var(--body);font-size:.82rem;font-weight:500;font-style:italic;color:var(--muted)}

/* The close. One stronger rule, the label in the body face, the figure large in
   Playfair and House Purple — the only purple figure in the card, so the eye lands
   on the amount she is agreeing to. */
body.luqua-chrome .wc-block-components-totals-footer-item{
  border-top:1px solid rgba(120,43,144,.20);margin-top:.6rem;padding-top:.85rem}
body.luqua-chrome .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  font-family:var(--body);font-size:.95rem;font-weight:600;color:var(--charcoal)}
/* The money component carries its own colour, so the value DIV alone was not enough — the
   figure stayed charcoal while everything else about it had changed. */
/* ⚠️ `!important` is required, not decorative: line 133 above carries a blanket
   `.wc-block-components-formatted-money-amount{color:var(--charcoal)!important}` that was added
   when every money figure was rendering violet. This is the one figure that SHOULD be violet, so
   it has to out-rank that rule rather than quietly lose to it. */
body.luqua-chrome .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.luqua-chrome .wc-block-components-totals-footer-item .wc-block-formatted-money-amount,
body.luqua-chrome .wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount{
  font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--house)!important;line-height:1.1}
body.luqua-chrome .wc-block-components-totals-footer-item__description{
  font-family:var(--body);font-size:.75rem;color:var(--muted)}
/* WooCommerce closes the block with a border-bottom, which dangled under the total with
   nothing beneath it. :last-child was not enough — the wrapper is not the sidebar's last child. */
body.luqua-chrome .wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
body.luqua-chrome .wp-block-woocommerce-checkout-order-summary-totals-block{
  border-bottom:0!important;padding-bottom:0!important}