/* ==========================================================================
   LUXEMART PREMIUM UPGRADE v5.0
   Phase 1 — Visual foundation (type, buttons, product cards)
   Phase 2 — Homepage & category page design
   Loaded AFTER style.css — every rule here either overrides or extends
   the existing --token system, nothing is redefined from scratch.
   ========================================================================== */

:root{
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --sh-card: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -8px rgba(0,0,0,.55);
  --sh-card-hover: 0 2px 4px rgba(0,0,0,.5), 0 24px 48px -12px rgba(0,0,0,.7);
  --sh-btn-hover: 0 10px 30px -6px rgba(232,255,0,.45);
  --ease-out: cubic-bezier(.16,1,.3,1);
}
[data-theme="light"]{
  --sh-card: 0 1px 2px rgba(20,20,20,.06), 0 10px 24px -8px rgba(20,20,20,.12);
  --sh-card-hover: 0 2px 4px rgba(20,20,20,.08), 0 20px 40px -12px rgba(20,20,20,.18);
}

/* ---------- 1. TYPOGRAPHY ---------------------------------------------- */
/* A distinct editorial display face on headlines is the single biggest
   "premium DTC brand" signal — swap the generic sans headings for it. */
.lux-hero-title,
.lux-sh__title,
.lux-nl-title,
.lux-promo-title,
.lux-cat-card__name,
.lux-testi-title,
h1.entry-title,
.woocommerce-Reviews-title{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.02em;
}
.lux-hero-title{ font-weight:600; letter-spacing:-.03em; }
.lux-hero-eyebrow,
.lux-sh__eyebrow,
.lux-nl-eyebrow,
.lux-promo-tag{
  font-weight:700;
  letter-spacing:.16em;
}
.lux-sh__title{ position:relative; padding-bottom:14px; }
.lux-sh__title::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:46px; height:3px;
  background:var(--accent);
  border-radius:var(--rfull);
}
.lux-sh{ align-items:flex-end; }

/* ---------- 2. BUTTONS --------------------------------------------------- */
.lux-btn{
  box-shadow:var(--sh1);
  transform:translateZ(0);
}
.lux-btn--primary{
  box-shadow:0 4px 14px -4px rgba(232,255,0,.35);
}
.lux-btn--primary:hover{
  box-shadow:var(--sh-btn-hover);
  transform:translateY(-2px);
}
.lux-btn--primary:active{ transform:translateY(0); box-shadow:0 2px 8px -2px rgba(232,255,0,.4); }
.lux-btn--outline:hover,
.lux-btn--dark:hover{ transform:translateY(-2px); box-shadow:var(--sh2); }
.lux-btn--ghost:hover{ transform:translateY(-1px); }
.lux-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* New glass variant — used on hero over imagery */
.lux-btn--glass{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--pure);
  border-color:rgba(255,255,255,.25);
}
.lux-btn--glass:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); }

/* ---------- 3. PRODUCT CARDS --------------------------------------------- */
.lux-pcard{
  border-radius:var(--r3);
  overflow:hidden;
  box-shadow:var(--sh-card);
  transition:box-shadow var(--ts), transform var(--ts), background var(--t2);
  border:1px solid transparent;
}
.lux-pcard:hover{
  box-shadow:var(--sh-card-hover);
  transform:translateY(-4px);
  border-color:var(--border2);
}
.lux-pcard__media{ border-radius:var(--r3) var(--r3) 0 0; }
.lux-pcard__badges{ gap:6px; }
.lux-pcard__badges span{
  display:inline-block;
  padding:5px 10px;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:var(--rfull);
  background:rgba(8,8,8,.82);
  color:var(--white);
  backdrop-filter:blur(6px);
}
.lux-pcard__badges span.badge-sale{ background:var(--sale); color:#fff; }
.lux-pcard__badges span.badge-new{ background:var(--accent); color:#000; }
.lux-pcard__wl,.lux-pcard__qv{
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.lux-pcard__atc{
  border-radius:0;
  letter-spacing:.14em;
}
.lux-pcard__atc:hover:not(:disabled){
  box-shadow:0 -4px 20px rgba(232,255,0,.25) inset;
}
.lux-pcard__body{ padding:16px 16px 20px; gap:5px; }
.lux-pcard__name{
  font-size:14px;
  min-height:2.7em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.lux-pcard__price{ font-size:16px; }
.lux-pcard__rating{ margin-top:6px; }
.lux-stars{ color:var(--gold); font-size:12px; letter-spacing:1px; }
.lux-rating-cnt{ font-size:11px; color:var(--muted); }

/* skeleton loader — attach class="lux-pcard is-loading" while AJAX filters run */
.lux-pcard.is-loading .lux-pcard__media,
.lux-pcard.is-loading .lux-pcard__name,
.lux-pcard.is-loading .lux-pcard__price{
  position:relative; color:transparent!important; background:var(--bg2);
  overflow:hidden;
}
.lux-pcard.is-loading .lux-pcard__media::after,
.lux-pcard.is-loading .lux-pcard__name::after,
.lux-pcard.is-loading .lux-pcard__price::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);
  animation:lux-shimmer 1.3s infinite;
}
@keyframes lux-shimmer{ 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }

/* ---------- 4. SCROLL-REVEAL (paired with tiny JS observer) ------------- */
.lux-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.lux-reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- 5. HOMEPAGE — CATEGORY CARDS --------------------------------- */
.lux-cat-card{ border-radius:var(--r3); box-shadow:var(--sh-card); transition:box-shadow var(--ts),transform var(--ts); }
.lux-cat-card:hover{ box-shadow:var(--sh-card-hover); transform:translateY(-4px); }
.lux-cat-card__bg img{ transition:transform .8s var(--ease-out); }
.lux-cat-card:hover .lux-cat-card__bg img{ transform:scale(1.08); }
.lux-cat-card__arrow{
  opacity:0; transform:translateY(6px);
  transition:opacity var(--t2),transform var(--t2);
}
.lux-cat-card:hover .lux-cat-card__arrow{ opacity:1; transform:translateY(0); }

/* ---------- 6. PROMO BANNERS --------------------------------------------- */
.lux-promo{ border-radius:var(--r4); overflow:hidden; box-shadow:var(--sh-card); transition:box-shadow var(--ts); }
.lux-promo:hover{ box-shadow:var(--sh-card-hover); }
.lux-promo-bg img{ transition:transform .9s var(--ease-out); }
.lux-promo:hover .lux-promo-bg img{ transform:scale(1.06); }

/* ---------- 7. TESTIMONIALS / SOCIAL PROOF ------------------------------- */
.lux-testi{ overflow:hidden; }
.lux-testi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;
  margin-top:8px;
}
.lux-testi-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--r4);
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:var(--sh-card);
  transition:box-shadow var(--ts),transform var(--ts);
}
.lux-testi-card:hover{ box-shadow:var(--sh-card-hover); transform:translateY(-3px); }
.lux-testi-card__stars{ color:var(--gold); font-size:14px; letter-spacing:2px; }
.lux-testi-card__quote{
  font-size:14.5px;
  line-height:1.7;
  color:var(--light);
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.lux-testi-card__foot{ display:flex; align-items:center; gap:12px; margin-top:4px; }
.lux-testi-card__avatar{
  width:38px; height:38px; border-radius:var(--rfull);
  background:var(--bg3);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--accent);
  flex-shrink:0;
}
.lux-testi-card__name{ font-size:13px; font-weight:700; color:var(--white); }
.lux-testi-card__meta{ font-size:11px; color:var(--muted); }
.lux-testi-stats{
  display:flex; gap:32px; flex-wrap:wrap; margin-top:36px; padding-top:28px; border-top:1px solid var(--border);
}
.lux-testi-stat-val{ font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:600; color:var(--white); }
.lux-testi-stat-lbl{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px; }

/* ---------- 8. CATEGORY / ARCHIVE PAGE ----------------------------------- */
.lux-cat-banner{
  position:relative; border-radius:var(--r4); overflow:hidden;
  min-height:220px; display:flex; align-items:flex-end;
  background:var(--bg3);
  box-shadow:var(--sh-card);
  margin-bottom:32px;
}
.lux-cat-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; }
.lux-cat-banner__body{
  position:relative; z-index:1; padding:34px 38px;
  background:linear-gradient(to right,rgba(0,0,0,.92),rgba(0,0,0,.2) 85%,transparent);
  max-width:640px; width:100%;
}
[data-theme="light"] .lux-cat-banner__body{ background:linear-gradient(to right,rgba(255,255,255,.94),rgba(255,255,255,.3) 85%,transparent); }
.lux-cat-banner__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-.02em; margin-top:6px; }
.lux-cat-banner__count{ font-size:12.5px; color:var(--muted); margin-top:6px; }

.lux-toolbar{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--r3);
  padding:14px 18px;
  margin-bottom:22px;
  box-shadow:var(--sh1);
}
.lux-active-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.lux-active-filter-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:var(--rfull); padding:6px 8px 6px 14px;
  font-size:11.5px; color:var(--light);
}
.lux-active-filter-chip a{
  width:18px; height:18px; border-radius:var(--rfull);
  background:var(--bg4); display:flex; align-items:center; justify-content:center;
  color:var(--muted); text-decoration:none; font-size:11px;
}
.lux-active-filter-chip a:hover{ background:var(--sale); color:#fff; }

.lux-filter-sidebar{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--r3);
  box-shadow:var(--sh1);
}
.lux-fg-head:hover{ color:var(--white); }
.lux-fopt{ transition:color var(--t); }
.lux-fopt:hover .lux-fopt-label{ color:var(--white); }
.lux-sz-btn,.lux-cswatch{ transition:all var(--t2); }
.lux-sz-btn:hover,.lux-cswatch:hover{ transform:translateY(-1px); }

/* ---------- 10. COMPLETE THE LOOK (bundle cross-sell) -------------------- */
.lux-ctl{ padding:60px 0; max-width:var(--max); margin:0 auto; }
.lux-ctl-row{
  display:flex; align-items:stretch; gap:14px; flex-wrap:wrap;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--r4); padding:28px; box-shadow:var(--sh-card);
}
.lux-ctl-item{ display:flex; flex-direction:column; align-items:center; gap:10px; width:150px; text-align:center; }
.lux-ctl-thumb{
  width:120px; height:150px; border-radius:var(--r3); overflow:hidden;
  background:var(--bg2); position:relative; border:2px solid transparent;
}
.lux-ctl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.lux-ctl-thumb--pick{ cursor:pointer; display:block; }
.lux-ctl-check{ position:absolute; opacity:0; width:1px; height:1px; }
.lux-ctl-checkmark{
  position:absolute; top:8px; right:8px; z-index:2;
  width:24px; height:24px; border-radius:var(--rfull);
  background:rgba(0,0,0,.5); border:2px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  color:transparent; font-size:13px; transition:all var(--t2);
}
.lux-ctl-check:checked ~ .lux-ctl-checkmark{ background:var(--accent); border-color:var(--accent); color:#000; }
.lux-ctl-check:checked ~ img, .lux-ctl-thumb--pick:has(.lux-ctl-check:checked){ border-color:var(--accent); }
.lux-ctl-check[data-disabled="1"] ~ .lux-ctl-checkmark{ opacity:.3; }
.lux-ctl-tag{ font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.lux-ctl-name{ font-size:12.5px; color:var(--light); line-height:1.4; text-decoration:none; display:block; }
.lux-ctl-name:hover{ color:var(--white); }
.lux-ctl-price{ font-size:13px; font-weight:700; color:var(--white); }
.lux-ctl-select{ font-size:10.5px; color:var(--accent); text-decoration:underline; }
.lux-ctl-plus{ align-self:center; font-family:var(--font-display); font-size:26px; color:var(--muted); flex-shrink:0; }
.lux-ctl-summary{
  margin-left:auto; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:6px; padding-left:24px; border-left:1px solid var(--border); min-width:200px;
}
.lux-ctl-summary-label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.lux-ctl-summary-price{ font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--white); }
.lux-ctl-note{ font-size:10.5px; color:var(--muted); }
@media(max-width:780px){
  .lux-ctl-row{ flex-direction:column; align-items:center; }
  .lux-ctl-plus{ transform:rotate(90deg); }
  .lux-ctl-summary{ border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:20px; width:100%; align-items:center; }
}

/* ---------- 11. BOLDER PASS — hero / buttons / cards ---------------------- */
.lux-hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.85) 100%);
}
.lux-hero-tag{
  background:linear-gradient(100deg,var(--accent),var(--accent2));
  color:#000; -webkit-text-fill-color:#000;
}
.lux-btn--primary{
  background:linear-gradient(100deg,var(--accent) 0%,var(--accent2) 100%);
}
.lux-pcard{ border-radius:var(--r4); }
.lux-pcard__media{ border-radius:var(--r4) var(--r4) 0 0; }
.lux-cat-card,.lux-promo{ border-radius:var(--r5); }
.lux-cat-grid-hero{ gap:20px!important; }
.lux-cat-card{
  border-radius:var(--r5)!important;
  box-shadow:var(--sh-card)!important;
  overflow:hidden;
}

/* ---------- 12. CART PAGE -------------------------------------------------- */
.lux-cart-item{
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--r3); padding:18px; margin-bottom:14px;
  box-shadow:var(--sh1); transition:box-shadow var(--ts),border-color var(--ts);
}
.lux-cart-item:hover{ box-shadow:var(--sh-card); border-color:var(--border2); }
.lux-cart-item-img{ border-radius:var(--r2); }
.lux-cs-box{
  border-radius:var(--r4); box-shadow:var(--sh-card);
  position:sticky; top:100px;
}
.lux-cs-head{ font-family:var(--font-display); font-weight:600; }

/* ---------- 13. CHECKOUT PAGE ---------------------------------------------- */
.lux-co-contact,
#payment{ box-shadow:var(--sh1); transition:box-shadow var(--ts); }
.lux-co-contact:hover,
#payment:hover{ box-shadow:var(--sh-card); }
.lux-co-step{
  padding:8px 18px; border-radius:var(--rfull); font-size:11.5px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--bg3); color:var(--muted); border:1px solid var(--border);
}
.lux-co-step.active{ background:var(--accent); color:#000; border-color:var(--accent); box-shadow:0 4px 14px -4px rgba(232,255,0,.4); }
.lux-co-step.done{ background:var(--bg3); color:var(--green); border-color:var(--green); }
.lux-co-step-badge{ box-shadow:0 2px 8px -2px rgba(232,255,0,.5); }

/* ---------- 14. WOOCOMMERCE BLOCK CHECKOUT (Checkout block) ---------------
   Everything above this targets the CLASSIC checkout template
   (woocommerce/checkout/form-checkout.php). If the site's Checkout page
   was built with WooCommerce's Checkout BLOCK instead (the current
   WooCommerce default for new installs), that PHP template never
   renders at all — only these block class names apply. Both are
   covered so the page looks right either way. */

.wc-block-checkout{
  max-width:var(--max);
  margin:0 auto;
  padding:36px 0 88px;
  display:grid;
  grid-template-columns:1fr 400px;
  gap:40px;
  align-items:start;
}
@media(max-width:900px){
  .wc-block-checkout{ grid-template-columns:1fr; padding:20px 16px 60px; gap:24px; }
}

/* Each step (Contact / Shipping address / Shipping options / Payment)
   becomes its own elevated card, numbered, matching the classic
   checkout's Contact/Delivery/Shipping/Payment cards exactly. */
.wc-block-checkout__main{
  counter-reset:lux-co-step;
}
.wc-block-components-checkout-step{
  background:var(--card-bg)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r3)!important;
  padding:28px!important;
  margin-bottom:20px!important;
  box-shadow:var(--sh1);
  transition:box-shadow var(--ts);
}
.wc-block-components-checkout-step:hover{ box-shadow:var(--sh-card); }
.wc-block-components-checkout-step__title{
  font-size:15px!important;
  font-weight:800!important;
  color:var(--white)!important;
  display:flex!important;
  align-items:center;
  gap:10px;
  padding-bottom:16px;
  margin-bottom:20px!important;
  border-bottom:1px solid var(--border);
}
.wc-block-components-checkout-step__title::before{
  counter-increment:lux-co-step;
  content:counter(lux-co-step);
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--accent); color:#000;
  font-size:12px; font-weight:900; flex-shrink:0;
}
.wc-block-components-checkout-step__description{ color:var(--muted)!important; font-size:12.5px!important; margin-bottom:16px!important; }
.wc-block-components-checkout-step__content{ padding:0!important; }

/* Form fields inside blocks steps */
.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-address-form select,
.wc-block-components-combobox input,
.wc-block-components-select select,
.wc-block-checkout__form select{
  height:52px!important;
  border-radius:var(--r2)!important;
}
.wc-block-components-text-input,
.wc-block-components-select{ margin-bottom:14px!important; }
.wc-block-components-radio-control__option{
  border-radius:var(--r2)!important;
  padding:14px 16px!important;
  transition:border-color var(--t2);
}
.wc-block-components-radio-control__option:hover{ border-color:var(--border2)!important; }
.wc-block-components-radio-control__option[aria-checked="true"]{
  border-color:var(--accent)!important;
  background:var(--bg3)!important;
  box-shadow:0 0 0 3px rgba(232,255,0,.08);
}

/* Sidebar — order summary */
.wc-block-checkout__sidebar{
  position:sticky;
  top:calc(var(--hh) + 16px);
  align-self:start;
}
.wc-block-components-sidebar-layout .wc-block-components-order-summary,
.wc-block-checkout__sidebar .wc-block-components-panel{
  background:var(--card-bg)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r3)!important;
  box-shadow:var(--sh-card);
  overflow:hidden;
  margin-bottom:16px!important;
}
.wc-block-components-order-summary__button-text{ font-size:11px!important; font-weight:700!important; letter-spacing:.1em; text-transform:uppercase; }
.wc-block-components-totals-item{ padding:8px 0!important; }
.wc-block-components-totals-footer-item{
  border-top:1px solid var(--border)!important;
  padding-top:14px!important;
  margin-top:8px!important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  font-family:var(--font-display)!important;
  font-size:19px!important;
}
.wc-block-components-order-summary-item{
  padding:10px 0!important;
  border-bottom:1px solid var(--border)!important;
}
.wc-block-components-order-summary-item__image img{
  border-radius:var(--r2)!important;
  box-shadow:var(--sh1);
}
.wc-block-components-order-summary-item__quantity{
  background:var(--gray)!important;
  color:#000!important;
  font-weight:900!important;
}

/* Place order button — match the accent gradient used everywhere else */
.wc-block-components-checkout-place-order-button{
  width:100%!important;
  height:56px!important;
  border-radius:var(--r2)!important;
  font-weight:800!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  background:linear-gradient(100deg,var(--accent) 0%,var(--accent2) 100%)!important;
  box-shadow:0 4px 14px -4px rgba(232,255,0,.35);
  transition:transform var(--t2), box-shadow var(--t2)!important;
}
.wc-block-components-checkout-place-order-button:hover{
  transform:translateY(-2px);
  box-shadow:var(--sh-btn-hover);
}

/* Express-pay buttons (Apple/Google Pay) if enabled */
.wc-block-checkout__payment-method-express{
  border-radius:var(--r2)!important;
  overflow:hidden;
  margin-bottom:16px;
}

.wc-block-components-notice-banner{
  border-radius:var(--r2)!important;
  box-shadow:var(--sh1);
}

/* ---------- 15. CHECKOUT — SHOPIFY-STYLE LIGHT SKIN ------------------------
   Checkout intentionally breaks from the site's dark theme here — this
   mirrors what most premium Shopify stores actually do (checkout stays
   clean/white/high-trust regardless of the storefront's own theme).
   Overriding the token set is enough to re-skin every component below
   because every rule in this file and style.css already reads from
   these variables — nothing needed rewriting twice. */
body.woocommerce-checkout{
  --bg1:#ffffff; --bg2:#fafafa; --bg3:#f2f2f2; --bg4:#e9e9e9;
  --card-bg:#ffffff;
  --border:#e3e3e3; --border2:#cfcfcf;
  --white:#1a1a1a; --light:#333; --muted:#8a8a8a; --gray:#8a8a8a;
  --accent:#1a1a1a; --accent2:#000000;
  background:#ffffff!important;
}
body.woocommerce-checkout .lux-hdr,
body.woocommerce-checkout .lux-header{ background:#fff!important; border-bottom:1px solid #eee!important; }

/* Buttons: solid near-black instead of the yellow accent, white label text */
body.woocommerce-checkout .lux-btn--primary,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-checkout .woocommerce-checkout #payment #place_order{
  background:#1a1a1a!important;
  color:#fff!important;
  border-radius:8px!important;
  box-shadow:none!important;
}
body.woocommerce-checkout .lux-btn--primary:hover,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-checkout .woocommerce-checkout #payment #place_order:hover{
  background:#000!important;
  transform:none!important;
  box-shadow:none!important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__title::before,
body.woocommerce-checkout .lux-co-step-badge{
  background:#1a1a1a!important; color:#fff!important;
}

/* Breadcrumb-style step trail (replaces the pill steps) — Cart / Checkout / Confirmation */
body.woocommerce-checkout .lux-co-steps{
  display:flex; align-items:center; gap:8px; margin-bottom:28px;
  font-size:13.5px;
}
body.woocommerce-checkout .lux-co-step{
  background:none!important; border:none!important; padding:0!important;
  color:#b0b0b0; font-weight:500; text-transform:none; letter-spacing:0;
  box-shadow:none!important;
}
body.woocommerce-checkout .lux-co-step:not(:last-child)::after{
  content:'/'; margin-left:8px; color:#d5d5d5;
}
body.woocommerce-checkout .lux-co-step.done{ color:#1a73e8; text-decoration:underline; }
body.woocommerce-checkout .lux-co-step.active{ color:#1a1a1a; font-weight:700; }

/* Inputs — clean rounded-corner fields, light border, subtle focus ring */
body.woocommerce-checkout .woocommerce form .form-row label,
body.woocommerce-checkout .wc-block-components-text-input label{
  color:#8a8a8a!important; font-weight:500!important; text-transform:none!important; letter-spacing:0!important; font-size:12.5px!important;
}
body.woocommerce-checkout .woocommerce form .form-row .input-text,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-address-form select{
  background:#fff!important; border:1px solid #d5d5d5!important; border-radius:8px!important;
  color:#1a1a1a!important;
}
body.woocommerce-checkout .woocommerce form .form-row .input-text:focus,
body.woocommerce-checkout .wc-block-components-text-input input:focus{
  border-color:#1a1a1a!important; box-shadow:0 0 0 3px rgba(0,0,0,.06)!important;
}

/* Cards — white with a hairline border, no heavy shadow (Shopify keeps this flat) */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .lux-co-contact,
body.woocommerce-checkout #payment,
body.woocommerce-checkout .wc-block-components-checkout-step{
  background:#fff!important; border:1px solid #eee!important; box-shadow:none!important;
}
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout .lux-co-contact h3,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .lux-co-payment-heading{
  color:#1a1a1a!important; border-bottom-color:#eee!important;
}

/* Sidebar order summary — light gray panel, quantity badge on thumb,
   inline discount code row like the reference screenshot. */
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-panel,
body.woocommerce-checkout .wc-block-components-order-summary{
  background:#fafafa!important; border:1px solid #eee!important; box-shadow:none!important;
}
body.woocommerce-checkout .lux-co-coupon{
  display:flex; gap:8px; align-items:flex-start; padding:16px 20px!important; border-bottom:1px solid #eee!important;
}
body.woocommerce-checkout .lux-co-coupon .checkout_coupon{ display:flex; gap:8px; width:100%; }
body.woocommerce-checkout .lux-co-coupon .checkout_coupon .form-row{ flex:1; margin-bottom:0!important; }
body.woocommerce-checkout .lux-co-coupon .checkout_coupon input.input-text{
  background:#fff!important; border:1px solid #d5d5d5!important; height:44px!important;
}
body.woocommerce-checkout .lux-co-coupon .checkout_coupon button.button{
  width:auto!important; padding:0 20px; background:#fff!important; color:#1a1a1a!important;
  border:1px solid #d5d5d5!important; height:44px!important;
}
body.woocommerce-checkout .lux-co-coupon .checkout_coupon button.button:hover{ background:#f5f5f5!important; }

/* Info banner — matches the light gray "customs duties / no extra charges" note */
body.woocommerce-checkout .lux-co-note{
  display:flex; gap:10px; align-items:flex-start;
  background:#f7f7f7; border-radius:8px; padding:14px 16px;
  font-size:12.5px; color:#5a5a5a; line-height:1.6; margin-top:16px;
}
body.woocommerce-checkout .lux-co-note i{ color:#8a8a8a; margin-top:2px; }

/* ---------- 16. THANK-YOU PAGE + ACCOUNT DASHBOARD ------------------------- */
body.woocommerce-order-received{
  --bg1:#ffffff; --bg2:#fafafa; --bg3:#f2f2f2;
  --card-bg:#ffffff;
  --border:#e3e3e3;
  --white:#1a1a1a; --light:#333; --muted:#8a8a8a;
  --accent:#1a1a1a; --accent2:#000000;
  --accent3:#f2f2f2;
  background:#ffffff!important;
}
body.woocommerce-order-received .lux-btn--primary{ background:#1a1a1a!important; color:#fff!important; box-shadow:none!important; }
body.woocommerce-order-received .lux-hdr,
body.woocommerce-order-received .lux-header{ background:#fff!important; border-bottom:1px solid #eee!important; }

.lux-acc-stat{ box-shadow:var(--sh1); border-radius:var(--r3)!important; transition:box-shadow var(--ts); }
.lux-acc-stat:hover{ box-shadow:var(--sh-card); }
.lux-acc-sidebar,.lux-acc-content{ box-shadow:var(--sh1); border-radius:var(--r3)!important; }

/* ---------- 17. CHECKOUT STEP WIZARD --------------------------------------- */
.lux-co-continue{ margin-top:20px; width:100%; }
.lux-co-edit{
  margin-left:auto; font-size:11.5px; font-weight:600; text-decoration:underline;
  color:var(--accent); cursor:pointer;
}
body.woocommerce-checkout .lux-co-edit{ color:#1a73e8!important; }
.lux-co-contact h3,
#customer_details h3,
#order_review_heading{ display:flex!important; align-items:center; }

/* Google Places autocomplete dropdown — unstyled by default, re-skinned
   to match the checkout card design instead of looking like a foreign
   browser popup. */
.pac-container{
  border-radius:var(--r2)!important;
  border:1px solid #e0e0e0!important;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.25)!important;
  font-family:var(--font-body,inherit)!important;
  margin-top:4px!important;
}
.pac-item{ padding:10px 14px!important; font-size:13px!important; }
.pac-item:hover{ background:#f7f7f7!important; }
.pac-item-query{ font-size:13px!important; color:#1a1a1a!important; }
.lux-addr-search-field{ position:relative; }
.lux-addr-search-icon{ position:absolute; left:14px; top:38px; color:#999; pointer-events:none; }
.lux-addr-search-field input{ padding-left:38px!important; }

/* ---------- 18. CATEGORY TILE IMAGE FIT ------------------------------------
   Full-bleed object-fit:cover crops product-only photos unpredictably
   (a headless torso shot next to a cleanly-cropped shoe) which reads as
   "mismatched" even with generous gaps. The hero tile (first, large,
   lifestyle photography) stays full-bleed; every smaller tile becomes a
   framed product shot on a neutral background instead — consistent
   crops, no more random mid-body cuts. */
.lux-cat-grid-hero > .lux-cat-card:not(.lux-cat-card--tall) .lux-cat-card__bg{
  background:var(--bg2);
}
.lux-cat-grid-hero > .lux-cat-card:not(.lux-cat-card--tall) .lux-cat-card__bg img{
  object-fit:contain!important;
  padding:28px;
  box-sizing:border-box;
}
.lux-cat-grid-hero > .lux-cat-card:not(.lux-cat-card--tall):hover .lux-cat-card__bg img{
  transform:scale(1.04);
}

/* ---------- 9. RESPONSIVE ------------------------------------------------- */
@media(max-width:900px){
  .lux-testi-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){
  .lux-testi-grid{ grid-template-columns:1fr; }
  .lux-cat-banner__body{ max-width:100%; padding:24px 20px; }
}