/* ==========================================================================
   MIA STOREFRONT — MAIN
   Consumes tokens.css. Never redeclares a --mias-* variable.
   ========================================================================== */

/* ── RESET ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--mias-background);color:var(--mias-text-primary);
  font-family:var(--mias-font-ui);font-size:var(--mias-body);line-height:var(--mias-lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color var(--mias-t)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-weight:var(--mias-w-medium);line-height:var(--mias-lh-heading)}
p{margin:0 0 var(--mias-s4)}

.mias-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.mias-skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--mias-black);color:#fff;padding:var(--mias-s3) var(--mias-s5)}
.mias-skip:focus{left:0}

/* ── LAYOUT ────────────────────────────────────────────────────────────── */
.mias-container{width:100%;max-width:var(--mias-container);margin-inline:auto;padding-inline:var(--mias-gutter)}
.mias-container--narrow{max-width:var(--mias-container-narrow)}
.mias-pad{padding-block:var(--mias-section)}
.mias-pagehead{padding-block:var(--mias-s9) var(--mias-s6)}

/* ── TYPE UTILITIES ────────────────────────────────────────────────────── */
.mias-logo{
  font-family:var(--mias-font-display);font-size:1.5rem;font-weight:var(--mias-w-500,500);
  letter-spacing:.06em;color:var(--mias-text-primary);white-space:nowrap;
}
.mias-label,.mias-nav__link,.mias-btn,.mias-mega__heading,.mias-card__badge,
.mias-shop__count,.mias-step__num,.mias-drawer__title,.mias-acc__head{
  text-transform:uppercase;letter-spacing:var(--mias-ls-label);
}

/* ── BUTTONS ───────────────────────────────────────────────────────────── */
.mias-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--mias-s2);
  min-height:var(--mias-touch);padding:var(--mias-s3) var(--mias-s6);
  font-size:var(--mias-label);font-weight:var(--mias-w-medium);
  letter-spacing:var(--mias-ls-button);text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--mias-radius);
  transition:background var(--mias-t),color var(--mias-t),border-color var(--mias-t);
}
.mias-btn--block{width:100%}
.mias-btn--lg{min-height:56px;font-size:.75rem}
/* PRIMARY ACTION — brand pink on white.
   The --dark modifier keeps its name so no template needs editing, but it
   now paints in the store's accent rather than black: Add to Bag, Proceed to
   Checkout and Pay Now are the brand's own actions and should read as
   brand colour. */
.mias-btn--dark{background:var(--mias-pink);color:#fff;border-color:var(--mias-pink)}
.mias-btn--dark:hover{background:var(--mias-pink-hover);border-color:var(--mias-pink-hover);color:#fff}

.mias-btn--outline{border-color:var(--mias-pink);color:var(--mias-pink);background:#fff}
.mias-btn--outline:hover{background:var(--mias-pink);color:#fff}

/* SECONDARY ACTION — WhatsApp. Deliberately NOT WhatsApp green: it sits
   beside Add to Bag everywhere it appears, and two saturated brand-foreign
   greens next to the pink primary fought the palette. White with a pink
   rule reads as the alternate path without competing. The glyph carries
   the recognition instead of the colour. */
.mias-btn--wa,
.mias-btn--wa-outline{background:#fff;color:var(--mias-pink);border-color:var(--mias-pink)}
.mias-btn--wa:hover,
.mias-btn--wa-outline:hover{background:var(--mias-pink);color:#fff;border-color:var(--mias-pink)}
.mias-btn[disabled]{opacity:.55;pointer-events:none}

/* ── ANNOUNCEMENT ──────────────────────────────────────────────────────── */
.mias-announce{background:var(--mias-black);color:#fff}
.mias-announce__inner{
  max-width:var(--mias-container-wide);margin-inline:auto;padding:var(--mias-s3) var(--mias-gutter);
  display:flex;align-items:center;justify-content:center;gap:var(--mias-s3);flex-wrap:wrap;
  font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;
}
.mias-announce__sep{opacity:.4}
.mias-announce__wa a{color:var(--mias-pink-soft)}
.mias-announce__wa a:hover{color:#fff}

/* ── HEADER ────────────────────────────────────────────────────────────── */
.mias-header{position:sticky;top:0;z-index:var(--mias-z-header);background:var(--mias-white);border-bottom:1px solid var(--mias-border)}
.mias-header__brand{
  max-width:var(--mias-container-wide);margin-inline:auto;padding:var(--mias-s5) var(--mias-gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--mias-s4);
}
.mias-header__logo{grid-column:2;text-align:center}
.mias-header__actions{grid-column:3;display:flex;justify-content:flex-end;align-items:center;gap:var(--mias-s4)}

.mias-burger{grid-column:1;display:flex;flex-direction:column;gap:4px;width:24px;padding:var(--mias-s2) 0}
.mias-burger span{display:block;height:1.5px;width:20px;background:var(--mias-text-primary);transition:transform var(--mias-t),opacity var(--mias-t)}

.mias-bag{display:flex;align-items:center;gap:var(--mias-s2);position:relative;padding:var(--mias-s2)}
.mias-bag__label{font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase}
.mias-bag__count{
  position:absolute;top:0;left:14px;min-width:16px;height:16px;padding:0 4px;
  background:var(--mias-pink);color:#fff;border-radius:9px;
  font-size:.625rem;line-height:16px;text-align:center;font-weight:var(--mias-w-semibold);
}
.mias-bag__count.is-empty{display:none}

/* ── NAV + MEGA ────────────────────────────────────────────────────────── */
.mias-nav{display:none;border-top:1px solid var(--mias-border)}
.mias-nav__inner{
  max-width:var(--mias-container-wide);margin-inline:auto;padding-inline:var(--mias-gutter);
  display:flex;align-items:center;justify-content:center;gap:var(--mias-s6);
}
.mias-nav__search{padding:var(--mias-s4) var(--mias-s2);color:var(--mias-text-primary)}
.mias-nav__list{display:flex;align-items:center;gap:var(--mias-s7)}
.mias-nav__item{position:static}
.mias-nav__link{
  display:block;padding:var(--mias-s4) 0;
  font-size:var(--mias-label);letter-spacing:var(--mias-ls-nav);text-transform:uppercase;
  color:var(--mias-text-primary);position:relative;
}
.mias-nav__link::after{
  content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:var(--mias-pink);transform:scaleX(0);transition:transform var(--mias-t);
}
.mias-nav__item:hover>.mias-nav__link,
.mias-nav__item.is-open>.mias-nav__link{color:var(--mias-pink)}
.mias-nav__item.is-open>.mias-nav__link::after{transform:scaleX(1)}

/* Mega panel: full-bleed, drops from the nav row. Hidden by default and
   revealed by .is-open on the parent item — JS owns that class so the
   panel can stay open after hover ends until a click elsewhere. */
.mias-mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--mias-white);border-top:1px solid var(--mias-border);
  border-bottom:1px solid var(--mias-border);
  box-shadow:var(--mias-shadow-lg);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity var(--mias-t),transform var(--mias-t),visibility var(--mias-t);
  z-index:var(--mias-z-mega);
}
.mias-nav__item.is-open .mias-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mias-mega__inner{
  max-width:var(--mias-container-wide);margin-inline:auto;
  padding:var(--mias-s8) var(--mias-gutter);
  display:grid;grid-template-columns:260px 1fr;gap:var(--mias-s9);align-items:start;
}
.mias-mega__feature{display:block}
.mias-mega__feature-img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--mias-surface);margin-bottom:var(--mias-s4)}
.mias-mega__feature-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--mias-t-slow)}
.mias-mega__feature:hover .mias-mega__feature-img img{transform:scale(1.04)}
.mias-mega__feature-cat{
  display:block;font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);
  text-transform:uppercase;color:var(--mias-pink);margin-bottom:var(--mias-s2);
}
.mias-mega__feature-title{display:block;font-family:var(--mias-font-display);font-size:1.0625rem;line-height:1.35}

/* Columns auto-wrap into a second row once the row fills — this is what
   produces the two-row category layout in the reference. */
.mias-mega__cols{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--mias-s7) var(--mias-s6);
}
.mias-mega__heading{
  display:block;margin-bottom:var(--mias-s4);
  font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;
  font-weight:var(--mias-w-semibold);color:var(--mias-text-primary);
}
a.mias-mega__heading:hover{color:var(--mias-pink)}
.mias-mega__links li+li{margin-top:var(--mias-s3)}
.mias-mega__link{font-size:var(--mias-body);color:var(--mias-text-secondary)}
.mias-mega__link:hover{color:var(--mias-pink)}

@media (min-width:1024px){
  .mias-nav{display:block}
  .mias-burger{display:none}
  .mias-header__brand{grid-template-columns:1fr auto 1fr;padding-block:var(--mias-s6)}
}

/* ── SEARCH OVERLAY ────────────────────────────────────────────────────── */
.mias-search{
  position:fixed;inset:0;z-index:var(--mias-z-drawer);background:var(--mias-white);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity var(--mias-t),visibility var(--mias-t);
}
.mias-search.is-open{opacity:1;visibility:visible}
.mias-search__inner{width:min(720px,90vw);position:relative}
.mias-search input{
  width:100%;border:0;border-bottom:1px solid var(--mias-black);background:transparent;
  padding:var(--mias-s4) 0;font-family:var(--mias-font-display);font-size:clamp(1.25rem,3vw,2rem);
}
.mias-search input:focus{outline:none}
.mias-search__close{position:absolute;top:-56px;right:0;font-size:2rem;line-height:1}

/* ── MOBILE NAV ────────────────────────────────────────────────────────── */
.mias-mnav{
  position:fixed;top:0;left:0;bottom:0;width:min(420px,88vw);z-index:var(--mias-z-drawer);
  background:var(--mias-white);transform:translateX(-100%);
  transition:transform var(--mias-t-slow);display:flex;flex-direction:column;
}
.mias-mnav.is-open{transform:translateX(0)}
.mias-mnav__head{display:flex;align-items:center;justify-content:space-between;padding:var(--mias-s5);border-bottom:1px solid var(--mias-border)}
.mias-mnav__title{font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase}
.mias-mnav__close{font-size:1.75rem;line-height:1}
.mias-mnav__body{flex:1;overflow-y:auto;padding:var(--mias-s4) var(--mias-s5) var(--mias-s9)}
.mias-mnav__row{display:flex;align-items:center;justify-content:space-between;gap:var(--mias-s3)}
.mias-mnav__item--d0>.mias-mnav__row{padding:var(--mias-s4) 0;border-bottom:1px solid var(--mias-border)}
.mias-mnav__item--d0>.mias-mnav__row .mias-mnav__link{
  font-size:.9375rem;letter-spacing:var(--mias-ls-nav);text-transform:uppercase;
}
.mias-mnav__item--d1>.mias-mnav__row{padding:var(--mias-s3) 0}
.mias-mnav__item--d1>.mias-mnav__row .mias-mnav__link{font-size:var(--mias-body);font-weight:var(--mias-w-medium)}
.mias-mnav__item--d2>.mias-mnav__row{padding:var(--mias-s2) 0}
.mias-mnav__item--d2 .mias-mnav__link{font-size:var(--mias-body-sm);color:var(--mias-text-secondary)}
.mias-mnav__link{flex:1}
.mias-mnav__toggle{position:relative;width:32px;height:32px;flex:none}
.mias-mnav__toggle span{position:absolute;top:50%;left:50%;width:11px;height:1.5px;background:var(--mias-text-primary);transform:translate(-50%,-50%);transition:transform var(--mias-t)}
.mias-mnav__toggle span:last-child{transform:translate(-50%,-50%) rotate(90deg)}
.mias-mnav__item.is-open>.mias-mnav__row .mias-mnav__toggle span:last-child{transform:translate(-50%,-50%) rotate(0)}
.mias-mnav__sub{display:none;padding-left:var(--mias-s4)}
.mias-mnav__item.is-open>.mias-mnav__sub{display:block}

/* ── OVERLAY ───────────────────────────────────────────────────────────── */
.mias-overlay{
  position:fixed;inset:0;background:rgba(46,46,46,.45);z-index:var(--mias-z-overlay);
  opacity:0;visibility:hidden;transition:opacity var(--mias-t),visibility var(--mias-t);
}
.mias-overlay.is-active{opacity:1;visibility:visible}

/* ── CART DRAWER ───────────────────────────────────────────────────────── */
.mias-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,92vw);z-index:var(--mias-z-drawer);
  background:var(--mias-white);transform:translateX(100%);
  transition:transform var(--mias-t-slow);display:flex;flex-direction:column;
}
.mias-drawer.is-open{transform:translateX(0)}
.mias-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--mias-s5);border-bottom:1px solid var(--mias-border)}
.mias-drawer__title{font-size:var(--mias-label);letter-spacing:var(--mias-ls-label)}
.mias-drawer__close{font-size:1.75rem;line-height:1}
.mias-drawer__body-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}

/* THREE INDEPENDENT REGIONS.
   Previously all three were flex children with no shrink limits, so the
   add-ons panel — which is tall — expanded to its full content height and
   squeezed the cart items down to almost nothing. Now:
     · items   scroll on their own, capped at 600px
     · add-ons scroll on their own, capped at 260px
     · footer  never shrinks, so Subtotal + Checkout are always reachable
   min-height:0 on the flex children is required — without it a flex item
   refuses to shrink below its content size and overflow-y never engages. */
.mias-drawer__items{
  flex:1 1 auto;min-height:0;max-height:600px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:var(--mias-s5);
}
.mias-drawer__item{display:grid;grid-template-columns:80px 1fr;gap:var(--mias-s4);padding-bottom:var(--mias-s5);margin-bottom:var(--mias-s5);border-bottom:1px solid var(--mias-border)}
.mias-drawer__item:last-child{border-bottom:0;margin-bottom:0}
.mias-drawer__thumb{background:var(--mias-surface)}
.mias-drawer__thumb img{width:100%;aspect-ratio:var(--mias-ratio-product);object-fit:cover}
.mias-drawer__name{display:block;font-size:var(--mias-body);margin-bottom:var(--mias-s1)}
.mias-drawer__variant{color:var(--mias-text-muted)}
.mias-drawer__price{font-size:var(--mias-body);margin-bottom:var(--mias-s3)}
.mias-drawer__controls{display:flex;align-items:center;justify-content:space-between;gap:var(--mias-s3)}
.mias-qty{display:inline-flex;align-items:center;border:1px solid var(--mias-border)}
.mias-qty__btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.mias-qty__value{min-width:26px;text-align:center;font-size:var(--mias-body-sm)}
.mias-drawer__remove{font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;color:var(--mias-text-muted)}
.mias-drawer__remove:hover{color:var(--mias-pink)}
.mias-drawer__foot{
  flex:0 0 auto;
  padding:var(--mias-s5);border-top:1px solid var(--mias-border);background:var(--mias-white);
}
.mias-drawer__row{display:flex;justify-content:space-between;font-size:var(--mias-body);margin-bottom:var(--mias-s3)}
.mias-drawer__nudge{font-size:var(--mias-body-sm);color:var(--mias-pink);margin:0 0 var(--mias-s2)}
.mias-drawer__nudge--won{color:var(--mias-success)}
.mias-progress{height:2px;background:var(--mias-border);margin-bottom:var(--mias-s4)}
.mias-progress span{display:block;height:100%;background:var(--mias-pink);transition:width var(--mias-t)}
@media (max-height:900px){
  .mias-drawer__items{max-height:calc(100vh - 420px)}
  .mias-addons--drawer{max-height:200px}
}
.mias-drawer__error{
  margin:0;padding:var(--mias-s3) var(--mias-s5);
  background:var(--mias-surface-soft);color:var(--mias-error);
  font-size:var(--mias-body-sm);border-left:2px solid var(--mias-error);
}
.mias-drawer__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mias-s4);padding:var(--mias-s9) var(--mias-s5);text-align:center}
.mias-drawer__empty-title{font-family:var(--mias-font-display);font-size:1.25rem;margin:0}

/* ── ADD-ONS ───────────────────────────────────────────────────────────── */
.mias-addons{border-top:1px solid var(--mias-border);padding:var(--mias-s5);background:var(--mias-background)}
/* Add-ons get their own scroll inside the drawer so they can never crowd
   out the cart items above them. On the product page the panel is in
   normal page flow, so no cap there. */
.mias-addons--drawer{
  flex:0 1 auto;min-height:0;max-height:260px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mias-addons__title{font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;margin:0 0 var(--mias-s4)}
.mias-addons__section{border-bottom:1px solid var(--mias-border)}
.mias-addons__head{width:100%;display:flex;align-items:center;gap:var(--mias-s3);padding:var(--mias-s3) 0;text-align:left}
.mias-addons__label{flex:1;font-size:var(--mias-body-sm)}
.mias-addons__count{font-size:.6875rem;color:var(--mias-pink)}
.mias-addons__chev{width:8px;height:8px;border-right:1.5px solid var(--mias-text-muted);border-bottom:1.5px solid var(--mias-text-muted);transform:rotate(45deg);transition:transform var(--mias-t);flex:none}
.mias-addons__section.is-open .mias-addons__chev{transform:rotate(-135deg)}
.mias-addons__body{max-height:0;overflow:hidden;transition:max-height var(--mias-t-slow)}
.mias-addons__item{display:flex;align-items:center;gap:var(--mias-s3);padding:var(--mias-s3) 0;border-top:1px solid var(--mias-border)}
.mias-addons__img{width:40px;height:40px;object-fit:cover;flex:none;background:var(--mias-surface)}
.mias-addons__info{flex:1;display:flex;flex-direction:column;min-width:0}
.mias-addons__name{font-size:var(--mias-body-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mias-addons__price{font-size:.75rem;color:var(--mias-text-muted)}
.mias-addons__btn{
  flex:none;padding:6px 14px;border:1px solid var(--mias-black);
  font-size:.625rem;letter-spacing:var(--mias-ls-label);text-transform:uppercase;
  transition:background var(--mias-t),color var(--mias-t);
}
.mias-addons__btn:hover{background:var(--mias-black);color:#fff}
.mias-addons__item.is-added .mias-addons__btn{background:var(--mias-black);color:#fff}

/* ── SHOP ──────────────────────────────────────────────────────────────── */
/* Was padding-block:var(--mias-s6) on top, PLUS .mias-crumbs padding, PLUS
   .mias-shop__head padding — three stacked paddings produced the visible
   dead band above the first product row on both desktop and mobile.
   The crumbs and head own their own spacing now; the section adds none. */
.mias-shop{padding-block:0 var(--mias-section)}
.mias-crumbs{
  padding-block:var(--mias-s4) var(--mias-s3);font-size:var(--mias-label);
  letter-spacing:var(--mias-ls-label);text-transform:uppercase;color:var(--mias-text-muted);
}
.mias-crumbs a{color:var(--mias-text-muted)}
.mias-crumbs a:hover{color:var(--mias-pink)}
.mias-crumbs__sep{margin-inline:var(--mias-s2);opacity:.5}
.mias-shop__head{padding-block:var(--mias-s3) var(--mias-s6);text-align:center}
/* An archive with no description leaves this block empty; collapse it
   rather than reserving vertical space for nothing. */
.mias-shop__head:empty{display:none}
.mias-shop__intro:empty{display:none}
.mias-shop__title{font-family:var(--mias-font-display);font-size:var(--mias-h2)}
.mias-shop__intro{max-width:56ch;margin:var(--mias-s4) auto 0;color:var(--mias-text-secondary)}
.mias-shop__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--mias-s4);
  padding-bottom:var(--mias-s4);margin-bottom:var(--mias-s5);border-bottom:1px solid var(--mias-border);
}
.mias-shop__count{margin:0;font-size:var(--mias-label);color:var(--mias-text-muted)}
.mias-shop__sort select{
  border:1px solid var(--mias-border);background:var(--mias-white);height:40px;
  padding:0 var(--mias-s4);font-size:var(--mias-body-sm);border-radius:var(--mias-radius);
}
.mias-shop__pager{margin-top:var(--mias-s9);display:flex;justify-content:center}
.mias-shop__pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;margin:0 2px;font-size:var(--mias-body-sm);
}
.mias-shop__pager .page-numbers.current{background:var(--mias-black);color:#fff}

/* ── PRODUCT CARD ──────────────────────────────────────────────────────── */
.mias-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--mias-s5) var(--mias-s4);
}

/* WooCommerce's woocommerce-layout.css sets
     .woocommerce ul.products li.product{float:left;width:22.05%;margin:0 3.8% ...}
   As a grid item the float is inert but the WIDTH is not — it resolves
   against the grid area and shrinks every card to roughly a fifth of its
   column. Nothing here is cosmetic; without it the grid silently collapses.
   Selector is deliberately specific enough to beat Woo's without !important. */
.mias-grid{align-content:start;grid-auto-flow:row}
.mias-grid::before,.mias-grid::after,
.mias-pdp .related ul.products::before,.mias-pdp .related ul.products::after,
.mias-pdp .up-sells ul.products::before,.mias-pdp .up-sells ul.products::after,
.woocommerce ul.products.mias-grid::before,.woocommerce ul.products.mias-grid::after{
  content:none !important;display:none !important;
}
/* A stray empty <li> (a product the loop skipped, a plugin's placeholder)
   still occupies a grid cell and shunts the first real card into column
   two — which is exactly the "empty space before the first product"
   symptom. Collapse anything with no rendered content. */
.mias-grid > li:empty{display:none}

.woocommerce ul.products.mias-grid li.product,
.woocommerce-page ul.products.mias-grid li.product,
ul.products.mias-grid li.product,
.mias-pdp .related ul.products li.product,
.mias-pdp .up-sells ul.products li.product{
  width:auto;max-width:none;min-width:0;
  float:none;clear:none;margin:0;padding:0;
}
@media (min-width:768px){.mias-grid{grid-template-columns:repeat(3,1fr);gap:var(--mias-s7) var(--mias-s5)}}
@media (min-width:1200px){.mias-grid{grid-template-columns:repeat(4,1fr)}}

.mias-card{display:flex;flex-direction:column;width:100%;min-width:0}
/* Frame = positioning context, never clips. Media = the only clipping box. */
.mias-card__frame{position:relative;width:100%}
.mias-card__media{position:relative;overflow:hidden;background:var(--mias-surface);aspect-ratio:var(--mias-ratio-product);width:100%}
.mias-card__imglink{display:block;width:100%;height:100%}
/* width/height 100% + object-fit means the card looks identical whether or
   not the mias-product size has been generated for that attachment — a
   fallback to a smaller registered size still fills the frame. */
.mias-card .mias-card__imglink img,
.woocommerce ul.products li.product .mias-card__imglink img{
  display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;transition:transform var(--mias-t-slow);
}
.mias-card__frame:hover .mias-card__imglink img{transform:scale(1.03)}

.mias-card__badge{
  position:absolute;top:var(--mias-s3);left:var(--mias-s3);z-index:2;
  padding:5px 10px;font-size:.625rem;font-weight:var(--mias-w-medium);
  letter-spacing:var(--mias-ls-label);color:#fff;background:var(--mias-black);
}
.mias-card__badge--sale{background:var(--mias-pink)}
.mias-card__badge--low{background:var(--mias-black)}
.mias-card__badge--oos{background:var(--mias-text-muted)}

.mias-heart{
  position:absolute;top:var(--mias-s3);right:var(--mias-s3);z-index:2;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  color:var(--mias-text-primary);background:rgba(255,255,255,.82);border-radius:50%;
  transition:color var(--mias-t),background var(--mias-t);
}
.mias-heart:hover{background:#fff}
.mias-heart.is-active{color:var(--mias-pink)}
.mias-heart.is-active svg{fill:var(--mias-pink)}

/* Hover-reveal actions — slide up over the lower image. */
/* Desktop: overlay the lower part of the image. Anchored to the frame,
   which on desktop is exactly the media's height. */
.mias-card__actions{
  position:absolute;left:var(--mias-s3);right:var(--mias-s3);bottom:var(--mias-s3);z-index:2;
  display:flex;flex-direction:column;gap:var(--mias-s2);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--mias-t),transform var(--mias-t);
}
.mias-card__frame:hover .mias-card__actions,
.mias-card__frame:focus-within .mias-card__actions{opacity:1;transform:translateY(0);pointer-events:auto}
.mias-card__actions .mias-btn{min-height:40px;font-size:.625rem}
.mias-card__actions .mias-btn--wa{background:#fff;color:var(--mias-pink);border-color:var(--mias-pink)}
.mias-card__actions .mias-btn--wa:hover{background:var(--mias-pink);color:#fff;border-color:var(--mias-pink)}

/* Touch devices have no hover — show the actions permanently rather than
   leaving them unreachable. */
/* Touch / narrow: no hover to reveal on, so the actions stack under the
   image permanently. They sit in .mias-card__frame, which does not clip, so
   they are actually visible and tappable. */
@media (max-width:1023px),(hover:none),(pointer:coarse){
  .mias-card__actions{
    position:static;opacity:1;transform:none;pointer-events:auto;
    margin-top:var(--mias-s3);left:auto;right:auto;bottom:auto;
  }
  .mias-card__actions .mias-btn{min-height:var(--mias-touch);font-size:.6875rem}
}

.mias-card__info{padding-top:var(--mias-s4);display:flex;flex-direction:column;gap:var(--mias-s2)}
.mias-card__name{font-size:var(--mias-body);line-height:1.4}
.mias-card__name:hover{color:var(--mias-pink)}
.mias-card__price{font-size:var(--mias-body);color:var(--mias-text-primary)}
.mias-card__price del{color:var(--mias-text-muted);margin-left:var(--mias-s2);font-size:var(--mias-body-sm)}
.mias-card__price ins{text-decoration:none;color:var(--mias-pink);font-weight:var(--mias-w-medium)}
.mias-from{font-size:.75rem;color:var(--mias-text-muted);text-transform:uppercase;letter-spacing:.08em}

/* ── PRODUCT PAGE ──────────────────────────────────────────────────────── */
.mias-pdp{padding-bottom:var(--mias-section)}
.mias-pdp__layout{display:grid;grid-template-columns:1fr;gap:var(--mias-s7);padding-top:var(--mias-s4)}
@media (min-width:1024px){
  .mias-pdp__layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--mias-s10);align-items:start}
}

.mias-gallery{display:grid;grid-template-columns:1fr;gap:var(--mias-s4)}
/* Two-track layout ONLY when a thumbnail rail actually rendered. With a
   single-image product the rail is skipped, and an unconditional
   "88px 1fr" put the main stage into the 88px column — which is why a
   one-image product showed a postage-stamp gallery. */
@media (min-width:768px){.mias-gallery.mias-gallery--rail{grid-template-columns:88px 1fr}}
.mias-gallery__rail{
  display:flex;gap:var(--mias-s3);order:2;overflow-x:auto;
}
@media (min-width:768px){
  .mias-gallery__rail{order:0;flex-direction:column;overflow-x:visible;overflow-y:auto;max-height:640px}
}
.mias-gallery__thumb{
  flex:none;width:72px;aspect-ratio:var(--mias-ratio-product);overflow:hidden;
  border:1px solid transparent;background:var(--mias-surface);transition:border-color var(--mias-t);
}
@media (min-width:768px){.mias-gallery__thumb{width:100%}}
.mias-gallery__thumb img{width:100%;height:100%;object-fit:cover}
.mias-gallery__thumb.is-active{border-color:var(--mias-black)}
.mias-gallery__stage{position:relative;background:var(--mias-surface);aspect-ratio:var(--mias-ratio-product);overflow:hidden}
.mias-gallery__slide{position:absolute;inset:0;opacity:0;transition:opacity var(--mias-t)}
.mias-gallery__slide.is-active{opacity:1}
.mias-gallery__slide img{width:100%;height:100%;object-fit:cover}
.mias-gallery__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;
}
.mias-gallery__nav--prev{left:var(--mias-s4)}
.mias-gallery__nav--next{right:var(--mias-s4)}

.mias-pdp__summary{display:flex;flex-direction:column}
.mias-pdp__cat{
  font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;
  color:var(--mias-pink);margin-bottom:var(--mias-s4);
}
.mias-pdp__title{font-family:var(--mias-font-display);font-size:var(--mias-h2);margin-bottom:var(--mias-s4)}
.mias-pdp__price{font-size:1.125rem;margin-bottom:var(--mias-s6)}
.mias-pdp__price del{color:var(--mias-text-muted);font-size:var(--mias-body);margin-left:var(--mias-s2)}
.mias-pdp__price ins{text-decoration:none;color:var(--mias-pink)}

/* Woo add-to-cart form restyle. The <select> stays in the DOM as the
   source of truth for wc-add-to-cart-variation.js; JS mirrors it into
   swatch buttons above (see main.js), so variation logic stays native. */
.mias-pdp__summary form.cart{margin:0 0 var(--mias-s3)}
.mias-pdp__summary .variations{width:100%;border-collapse:collapse;margin-bottom:var(--mias-s5)}
.mias-pdp__summary .variations th,
.mias-pdp__summary .variations td{display:block;text-align:left;padding:0}
.mias-pdp__summary .variations th label{
  font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;
  color:var(--mias-text-secondary);margin-bottom:var(--mias-s3);display:block;
}
.mias-pdp__summary .variations td{margin-bottom:var(--mias-s5)}
.mias-pdp__summary .variations select{
  width:100%;height:var(--mias-field-h);border:1px solid var(--mias-border);
  background:var(--mias-white);padding:0 var(--mias-s4);font-size:var(--mias-body);
}
.mias-swatches{display:flex;flex-wrap:wrap;gap:var(--mias-s2);margin-bottom:var(--mias-s5)}
.mias-swatch{
  min-width:64px;padding:var(--mias-s3) var(--mias-s4);border:1px solid var(--mias-border);
  font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;
  background:var(--mias-white);transition:all var(--mias-t);
}
.mias-swatch:hover{border-color:var(--mias-black)}
.mias-swatch.is-active{background:var(--mias-black);color:#fff;border-color:var(--mias-black)}
.mias-swatch.is-disabled{opacity:.35;pointer-events:none;text-decoration:line-through}
.mias-pdp__summary .quantity{display:none}
.mias-pdp__summary .single_add_to_cart_button,
.mias-pdp__summary button.single_add_to_cart_button{
  width:100%;min-height:56px;background:var(--mias-pink);color:#fff;border:0;
  font-size:.75rem;letter-spacing:var(--mias-ls-button);text-transform:uppercase;
  border-radius:var(--mias-radius);transition:background var(--mias-t);cursor:pointer;
}
.mias-pdp__summary .single_add_to_cart_button:hover{background:var(--mias-pink-hover)}
.mias-pdp__summary .woocommerce-variation-price{margin-bottom:var(--mias-s4);font-size:1.0625rem}
#miasPdpWhatsApp{margin-top:var(--mias-s3)}

/* ── ACCORDION ─────────────────────────────────────────────────────────── */
.mias-acc{margin-top:var(--mias-s7);border-top:1px solid var(--mias-border)}
.mias-acc__item{border-bottom:1px solid var(--mias-border)}
.mias-acc__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--mias-s4);
  padding:var(--mias-s5) 0;text-align:left;
  font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;
}
.mias-acc__icon{position:relative;width:12px;height:12px;flex:none}
.mias-acc__icon::before,.mias-acc__icon::after{
  content:'';position:absolute;top:50%;left:0;width:12px;height:1.5px;
  background:var(--mias-text-primary);transition:transform var(--mias-t);
}
.mias-acc__icon::after{transform:rotate(90deg)}
.mias-acc__head[aria-expanded="true"] .mias-acc__icon::after{transform:rotate(0)}
.mias-acc__body{max-height:0;overflow:hidden;transition:max-height var(--mias-t-slow)}
.mias-acc__inner{padding-bottom:var(--mias-s5);color:var(--mias-text-secondary)}
.mias-acc__inner p:last-child{margin-bottom:0}
.mias-delivery-terms{list-style:disc;padding-left:1.1rem;display:flex;flex-direction:column;gap:var(--mias-s2)}
.mias-delivery-terms li{color:var(--mias-text-secondary)}

/* Related products heading */
.mias-pdp .related>h2,.mias-pdp .related>h3{
  font-family:var(--mias-font-display);font-size:var(--mias-h3);text-align:center;
  margin:var(--mias-section) 0 var(--mias-s7);
}
.mias-pdp .related ul.products,
.mias-pdp .up-sells ul.products{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--mias-s5) var(--mias-s4);
  margin:0;padding:0;list-style:none;
}
@media (min-width:768px){
  .mias-pdp .related ul.products,
  .mias-pdp .up-sells ul.products{grid-template-columns:repeat(4,1fr);gap:var(--mias-s7) var(--mias-s5)}
}

/* ── CHECKOUT ──────────────────────────────────────────────────────────── */
.mias-checkout{max-width:780px;margin-inline:auto;padding-block:var(--mias-s7) var(--mias-section)}
.mias-step{background:var(--mias-white);border:1px solid var(--mias-border);padding:var(--mias-s7);margin-bottom:var(--mias-s6)}
@media (max-width:600px){.mias-step{padding:var(--mias-s5)}}
.mias-step__num{
  font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;
  color:var(--mias-pink);margin:0 0 var(--mias-s3);
}
.mias-step__title{font-family:var(--mias-font-display);font-size:var(--mias-h3);margin-bottom:var(--mias-s6)}
.mias-step__body{border-top:1px solid var(--mias-border);padding-top:var(--mias-s6)}

.mias-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--mias-s5)}
@media (max-width:600px){.mias-fields{grid-template-columns:1fr}}
.mias-fields .mias-col-12,.mias-fields .form-row-wide{grid-column:1/-1}
.mias-fields p.form-row{margin:0;display:flex;flex-direction:column}
.mias-fields label{
  font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;
  color:var(--mias-text-secondary);margin-bottom:var(--mias-s3);
}
.mias-fields label .required{color:var(--mias-pink);text-decoration:none;border:0}
.mias-fields input,.mias-fields textarea{
  width:100%;border:1px solid var(--mias-border);background:var(--mias-white);
  padding:var(--mias-s3) var(--mias-s4);min-height:var(--mias-field-h);
  font-size:var(--mias-body);border-radius:var(--mias-radius);
}
.mias-fields textarea{min-height:110px;resize:vertical;line-height:1.6}
.mias-fields input:focus,.mias-fields textarea:focus{outline:none;border-color:var(--mias-black)}

.mias-review__items{display:flex;flex-direction:column;gap:var(--mias-s4);padding-bottom:var(--mias-s5);border-bottom:1px solid var(--mias-border)}
.mias-review__item{display:grid;grid-template-columns:64px 1fr auto;gap:var(--mias-s4);align-items:center}
.mias-review__thumb img{width:64px;aspect-ratio:var(--mias-ratio-product);object-fit:cover;background:var(--mias-surface)}
.mias-review__detail{display:flex;flex-direction:column;gap:2px;min-width:0}
.mias-review__name{font-size:var(--mias-body)}
.mias-review__qty{font-size:var(--mias-body-sm);color:var(--mias-text-muted)}
.mias-review__line{font-size:var(--mias-body);white-space:nowrap}
.mias-review__totals{padding-block:var(--mias-s5)}
.mias-review__row{display:flex;justify-content:space-between;gap:var(--mias-s4);margin-bottom:var(--mias-s3);font-size:var(--mias-body)}
.mias-review__row--total{
  border-top:1px solid var(--mias-border);padding-top:var(--mias-s4);margin-top:var(--mias-s4);
  font-size:1.0625rem;font-weight:var(--mias-w-medium);
}
.mias-review__row--shipping ul{list-style:none;text-align:right}
.mias-review__nudge{font-size:var(--mias-body-sm);color:var(--mias-pink);margin:0 0 var(--mias-s3)}

/* Delivery / recipient block inside Step 1 */
.mias-delivery-block{margin-top:var(--mias-s7);padding-top:var(--mias-s6);border-top:1px solid var(--mias-border)}
.mias-block__label{
  font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;
  color:var(--mias-text-primary);font-weight:var(--mias-w-medium);margin:0 0 var(--mias-s4);
}
.mias-block__label--spaced{margin-top:var(--mias-s7)}
.mias-block__note{margin:var(--mias-s4) 0 0;font-size:var(--mias-body-sm);color:var(--mias-text-muted)}

.mias-choice{display:grid;grid-template-columns:1fr 1fr;gap:var(--mias-s3)}
@media (max-width:600px){.mias-choice{grid-template-columns:1fr}}
.mias-choice__opt{
  display:flex;align-items:center;gap:var(--mias-s3);cursor:pointer;
  border:1px solid var(--mias-border);background:var(--mias-white);
  padding:var(--mias-s4);font-size:var(--mias-body);transition:border-color var(--mias-t);
}
.mias-choice__opt:hover{border-color:var(--mias-black)}
.mias-choice__opt input{accent-color:var(--mias-pink);width:16px;height:16px;flex:none}
.mias-choice__opt:has(input:checked){border-color:var(--mias-black);background:var(--mias-surface)}

.mias-recipient{margin-top:var(--mias-s5)}
.mias-recipient[hidden]{display:none}
.mias-fields--tight{gap:var(--mias-s4);margin-top:var(--mias-s4)}
.mias-fields select{
  width:100%;border:1px solid var(--mias-border);background:var(--mias-white);
  padding:var(--mias-s3) var(--mias-s4);min-height:var(--mias-field-h);
  font-size:var(--mias-body);border-radius:var(--mias-radius);
}
.mias-fields select:focus{outline:none;border-color:var(--mias-black)}

.mias-pdp__atc{margin-bottom:var(--mias-s3)}
.mias-pdp__oos{
  padding:var(--mias-s4);border:1px solid var(--mias-border);text-align:center;
  font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;
  color:var(--mias-text-muted);
}

.mias-order-delivery{margin-top:var(--mias-s6)}
.mias-order-delivery h2{font-family:var(--mias-font-display);font-size:var(--mias-h4);margin-bottom:var(--mias-s3)}

.mias-payment{margin-top:var(--mias-s5)}
.mias-payment .payment_methods{margin:0 0 var(--mias-s5);padding:0;list-style:none}
.mias-payment .wc_payment_method{border:1px solid var(--mias-border);padding:var(--mias-s4);margin-bottom:var(--mias-s3)}
.mias-payment .wc_payment_method label{display:inline-flex;align-items:center;gap:var(--mias-s3);font-size:var(--mias-body);cursor:pointer}
.mias-payment .payment_box{padding:var(--mias-s4) 0 0;font-size:var(--mias-body-sm);color:var(--mias-text-secondary)}
.mias-payment .payment_box p:last-child{margin-bottom:0}

.mias-paysplit{display:flex;align-items:center;gap:var(--mias-s4);margin-block:var(--mias-s5)}
.mias-paysplit::before,.mias-paysplit::after{content:'';flex:1;height:1px;background:var(--mias-border)}
.mias-paysplit span{font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;color:var(--mias-text-muted)}
.mias-paynote{margin:var(--mias-s4) 0 0;text-align:center;font-size:var(--mias-body-sm);color:var(--mias-text-muted);line-height:1.6}
.mias-paynote--error{color:var(--mias-error);min-height:1em}
.mias-paynote--error:empty{display:none}

/* ── FOOTER ────────────────────────────────────────────────────────────── */
/* color was #fff, which assumed the footer is always dark. With a palette
   driving it the footer can be any shade, so the text follows it. */
.mias-footer{background:var(--mias-black);color:var(--mias-on-dark,#fff);padding-block:var(--mias-section)}
.mias-footer a{color:rgba(255,255,255,.72)}
.mias-footer a:hover{color:#fff}
.mias-footer__top{display:grid;grid-template-columns:1fr;gap:var(--mias-s7);padding-bottom:var(--mias-s7)}
/* Was a fixed 1.2fr 1fr 1fr, which assumed exactly three children: brand,
   one nav, newsletter. With up to four link columns the extras wrapped
   underneath at odd widths. The brand keeps its wider first track and
   everything after it shares what is left. */
@media (min-width:900px){.mias-footer__top{grid-template-columns:minmax(220px,1.3fr) repeat(auto-fit,minmax(140px,1fr))}}
.mias-logo--footer{color:#fff;font-size:1.35rem}
.mias-footer__tagline{color:rgba(255,255,255,.6);margin-top:var(--mias-s3);max-width:32ch}
.mias-footer__heading{font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;margin-bottom:var(--mias-s4)}
.mias-footer__nav ul,.mias-footer__col ul{display:flex;flex-direction:column;gap:var(--mias-s3);font-size:var(--mias-body);list-style:none;margin:0;padding:0}
/* Link columns. Each renders only when it has links, so a footer with one
   column and a footer with four both sit correctly in the same grid. */
.mias-footer__col{min-width:0}
.mias-newsletter{display:flex;border:1px solid rgba(255,255,255,.25)}
.mias-newsletter input{flex:1;min-width:0;background:transparent;border:0;color:#fff;padding:var(--mias-s3) var(--mias-s4);height:46px}
.mias-newsletter input::placeholder{color:rgba(255,255,255,.45)}
.mias-newsletter input:focus{outline:none}
.mias-newsletter button{
  padding:0 var(--mias-s5);background:var(--mias-pink);color:#fff;
  font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;
}
.mias-footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--mias-s3);
  padding-top:var(--mias-s5);border-top:1px solid rgba(255,255,255,.14);
  font-size:var(--mias-body-sm);color:rgba(255,255,255,.55);
}
.mias-footer__legal{display:flex;gap:var(--mias-s5)}

/* ── FAB ───────────────────────────────────────────────────────────────── */
.mias-fab{
  position:fixed;right:var(--mias-s5);bottom:var(--mias-s5);z-index:80;
  width:56px;height:56px;border-radius:50%;background:var(--mias-pink);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--mias-shadow-lg);
}
.mias-fab:hover{background:var(--mias-pink-hover);color:#fff}

/* ── BLOG / PROSE / EMPTY ──────────────────────────────────────────────── */
.mias-postgrid{display:grid;grid-template-columns:1fr;gap:var(--mias-s7)}
@media (min-width:700px){.mias-postgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.mias-postgrid{grid-template-columns:repeat(3,1fr)}}
.mias-postcard__img{display:block;aspect-ratio:var(--mias-ratio-editorial);overflow:hidden;background:var(--mias-surface);margin-bottom:var(--mias-s4)}
.mias-postcard__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--mias-t-slow)}
.mias-postcard:hover .mias-postcard__img img{transform:scale(1.03)}
.mias-postcard__cat{display:block;font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;color:var(--mias-pink);margin-bottom:var(--mias-s2)}
.mias-postcard__title{font-family:var(--mias-font-display);font-size:1.25rem;margin-bottom:var(--mias-s2)}
.mias-postcard__date{font-size:var(--mias-body-sm);color:var(--mias-text-muted)}

.mias-article__head{padding-block:var(--mias-s9) var(--mias-s5);text-align:center}
.mias-article__cat{font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;color:var(--mias-pink)}
.mias-article__title{font-family:var(--mias-font-display);font-size:var(--mias-h1);margin-block:var(--mias-s3)}
.mias-article__date{font-size:var(--mias-body-sm);color:var(--mias-text-muted)}
.mias-article__img{aspect-ratio:var(--mias-ratio-editorial);overflow:hidden;margin-bottom:var(--mias-s8)}
.mias-article__img img{width:100%;height:100%;object-fit:cover}
.mias-prose{font-size:var(--mias-body-lg);line-height:1.8;color:var(--mias-text-secondary);padding-bottom:var(--mias-section)}
.mias-prose h2,.mias-prose h3{font-family:var(--mias-font-display);color:var(--mias-text-primary);margin:var(--mias-s7) 0 var(--mias-s4)}
.mias-prose a{color:var(--mias-pink);text-decoration:underline}

.mias-empty{text-align:center;padding-block:var(--mias-section-lg);display:flex;flex-direction:column;align-items:center;gap:var(--mias-s4)}
.mias-empty__title{font-family:var(--mias-font-display);font-size:var(--mias-h3);margin:0}
.mias-404{font-family:var(--mias-font-display);font-size:clamp(4rem,10vw,7rem);color:var(--mias-pink-soft);margin:0;line-height:1}
.mias-404__search{display:flex;max-width:460px;width:100%;border:1px solid var(--mias-black)}
.mias-404__search input{flex:1;border:0;padding:0 var(--mias-s4);height:48px;background:transparent}
.mias-404__search input:focus{outline:none}
.mias-404__search button{padding:0 var(--mias-s5);font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase}

/* Woo notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;margin:0 0 var(--mias-s5);padding:var(--mias-s4) var(--mias-s5);
  border-left:2px solid var(--mias-pink);background:var(--mias-surface);font-size:var(--mias-body-sm);
}
.woocommerce-error{border-left-color:var(--mias-error)}

/* Prevent background scroll while a drawer/overlay is open */
body.mias-locked{overflow:hidden}

/* ── Page sections ────────────────────────────────────────
   Every section is responsive by construction. There is no desktop layout and
   a separate mobile one to keep in step — one grid that reflows, because a
   layout arranged by hand at one window width is exactly how client pages end
   up broken on a phone. */
.mias-sec{padding-block:var(--mias-section)}
.mias-sec__inner{max-width:var(--mias-container-narrow)}
.mias-sec--text.is-wide .mias-sec__inner{max-width:var(--mias-container)}
.mias-sec__title{font-family:var(--mias-font-display);font-size:var(--mias-h2);margin-bottom:var(--mias-s5)}
.mias-sec__eyebrow{font-size:var(--mias-label);letter-spacing:var(--mias-ls-label);text-transform:uppercase;color:var(--mias-text-muted,#666);margin-bottom:var(--mias-s3)}
.mias-sec p{margin-bottom:var(--mias-s4)}

.mias-sec--hero{position:relative;display:flex;align-items:center;color:#fff;overflow:hidden}
.mias-sec--hero.is-short{min-height:38vh}
.mias-sec--hero.is-mid{min-height:56vh}
.mias-sec--hero.is-tall{min-height:74vh}
.mias-sec--hero.is-centre{text-align:center}
.mias-sec--hero.is-centre .mias-sec__inner{margin-inline:auto}
.mias-sec__bg{position:absolute;inset:0;z-index:0}
.mias-sec__bg img{width:100%;height:100%;object-fit:cover}
.mias-sec__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.mias-sec--hero .mias-sec__inner{position:relative;z-index:1}

.mias-sec__grid{display:grid;grid-template-columns:1fr;gap:var(--mias-s7);align-items:center}
@media(min-width:800px){.mias-sec__grid{grid-template-columns:1fr 1fr}}
.mias-sec--split.is-flipped .mias-sec__media{order:2}
.mias-sec__media img{width:100%;height:auto;display:block;border-radius:var(--mias-radius)}

/* auto-fit means four columns on a desktop and one on a phone without either
   being specified */
.mias-sec__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--mias-s6)}
.mias-sec__col h3{font-size:var(--mias-h5);margin-bottom:var(--mias-s3)}
.mias-sec__stat{text-align:center}
.mias-sec__figure{display:block;font-family:var(--mias-font-display);font-size:var(--mias-h2);line-height:1}
.mias-sec__caption{display:block;font-size:var(--mias-body-sm);color:var(--mias-text-muted,#666);margin-top:var(--mias-s2)}

.mias-sec__gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--mias-s4)}
.mias-sec__gallery figure{margin:0}
.mias-sec__gallery img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:var(--mias-radius-sm)}

.mias-sec--quote{text-align:center}
.mias-sec--quote blockquote{font-family:var(--mias-font-display);font-size:var(--mias-h3);line-height:var(--mias-lh-heading);margin:0 0 var(--mias-s5)}
.mias-sec__cite span{display:block;font-size:var(--mias-body-sm);color:var(--mias-text-muted,#666)}

.mias-sec--faq details{border-bottom:1px solid var(--mias-border);padding-block:var(--mias-s4)}
.mias-sec--faq summary{cursor:pointer;font-weight:600}
.mias-sec--faq details>div{padding-top:var(--mias-s3)}

.mias-sec--cta{text-align:center}
.mias-sec--cta.is-ink{background:var(--mias-black);color:var(--mias-on-dark,#fff)}
.mias-sec--cta.is-accent{background:var(--mias-pink);color:var(--mias-on-accent,#fff)}
.mias-sec--cta.is-surface{background:var(--mias-surface)}
.mias-sec--cta .mias-sec__inner{margin-inline:auto}

/* ── Section spacing and visibility ───────────────────────
   Applied by class rather than decided on the server: the same HTML is cached
   and served to every device, so a server-side choice would show whichever
   device happened to warm the cache. */
.mias-secwrap.is-space-tight>.mias-sec{padding-block:calc(var(--mias-section)*.5)}
.mias-secwrap.is-space-roomy>.mias-sec{padding-block:calc(var(--mias-section)*1.6)}
.mias-secwrap.is-space-none>.mias-sec{padding-block:0}
@media(max-width:768px){.mias-hide-mobile{display:none}}
@media(min-width:769px){.mias-hide-desktop{display:none}}

/* ── Form ─────────────────────────────────────────────── */
.mias-form__field{display:block;margin-bottom:var(--mias-s4)}
.mias-form__field label{display:block;margin-bottom:var(--mias-s2);font-size:var(--mias-body-sm);font-weight:600}
.mias-form__field input,.mias-form__field textarea{width:100%;padding:var(--mias-s3) var(--mias-s4);border:1px solid var(--mias-border);border-radius:var(--mias-radius-sm);font:inherit;background:var(--mias-white)}
.mias-form__field input:focus,.mias-form__field textarea:focus{outline:2px solid var(--mias-pink);outline-offset:1px;border-color:transparent}
/* Off-screen rather than display:none — some bots skip hidden fields, and one
   that fills this in has told us what it is. */
.mias-form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mias-form__done{padding:var(--mias-s5);background:var(--mias-surface);border-radius:var(--mias-radius);font-size:var(--mias-body-lg)}