/* ==========================================================================
   MIA STOREFRONT — MOTION
   The off-canvas menu (ported from IPL) and the draggable rails. Colours are
   the store's tokens: first panel = brand colour, second = ink, sheet = page
   background. Timings arrive as --oc-dur / --oc-stagger from mias-motion.js.
   ========================================================================== */

:root{
  --oc-dur:600ms;
  --oc-stagger:50ms;
  --oc-ease:cubic-bezier(.65,0,.35,1);
  --oc-ease-out:cubic-bezier(.22,1,.36,1);
  --oc-sheet-w:min(760px,52vw);
  --oc-page-scale:.86;
  --oc-page-shift:-46vw;
}

/* What shows behind the page while it is scaled back — only while the menu
   is open, so a short page or a builder page without #page never shows it. */
html.oc-open,html.oc-closing{background:var(--mias-black)}
html.oc-open body,html.oc-closing body{background:transparent}

/* ── THE PAGE ──────────────────────────────────────────────────────────── */
.mias-site{
  position:relative;min-height:100vh;background:var(--mias-background);
  transform-origin:50% 50%;
  transition:transform var(--oc-dur) var(--oc-ease);
}
html.oc-locked .mias-site{position:fixed;inset:0;height:100vh;overflow:hidden}
html.oc-open .mias-site{transform:translateX(var(--oc-page-shift)) scale(var(--oc-page-scale));cursor:pointer}
html.oc-open .mias-site > *{pointer-events:none}
html.oc-closing .mias-site{transition-delay:calc(var(--oc-stagger) * 1.5)}

/* ── BURGER (IPL: three lines that rebalance on hover) ─────────────────────
   Mobile only, sitting beside the bag. Desktop keeps the horizontal nav row. */
.mias-burger{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  width:40px;height:30px;padding:0;color:var(--mias-text-primary);
}
@media (min-width:1024px){ .mias-burger{display:none} }

/* Mobile header: logo left, bag and burger right — the IPL arrangement. */
@media (max-width:1023px){
  .mias-header__brand{grid-template-columns:1fr auto}
  .mias-header__logo{grid-column:1;text-align:left}
  .mias-header__actions{grid-column:2;gap:var(--mias-s3)}
}
.mias-burger span{
  display:block;width:100%;height:1.5px;background:currentColor;
  transform-origin:left;transition:transform .35s var(--oc-ease);
}
.mias-burger span:nth-child(2){transform:scaleX(.72)}
.mias-burger:hover span:nth-child(1){transform:scaleX(.6)}
.mias-burger:hover span:nth-child(2){transform:scaleX(1)}
.mias-burger:hover span:nth-child(3){transform:scaleX(.8)}

/* ── MENU SHELL ────────────────────────────────────────────────────────── */
.mias-oc{position:fixed;inset:0;z-index:1000;pointer-events:none;visibility:hidden}
html.oc-open .mias-oc,html.oc-closing .mias-oc{visibility:visible}

.mias-oc__panel,.mias-oc__sheet{
  position:absolute;top:0;right:0;bottom:0;pointer-events:auto;
  transform:translateX(101%);will-change:transform;
  transition:transform var(--oc-dur) var(--oc-ease);
}
.mias-oc__panel--a{width:calc(var(--oc-sheet-w) + 26px);background:var(--mias-pink)}
.mias-oc__panel--b{width:calc(var(--oc-sheet-w) + 13px);background:var(--mias-black);transition-delay:var(--oc-stagger)}
.mias-oc__sheet{
  width:var(--oc-sheet-w);background:var(--mias-background);color:var(--mias-text-primary);
  transition-delay:calc(var(--oc-stagger) * 2);
}
html.oc-open .mias-oc__panel,html.oc-open .mias-oc__sheet{transform:none}
/* Closing reverses the order: sheet first, brand colour last. */
html.oc-closing .mias-oc__sheet{transition-delay:0ms}
html.oc-closing .mias-oc__panel--b{transition-delay:var(--oc-stagger)}
html.oc-closing .mias-oc__panel--a{transition-delay:calc(var(--oc-stagger) * 2)}

.mias-oc__scroll{
  height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(24px,4vh,44px) clamp(24px,3vw,44px);
  padding-bottom:max(clamp(24px,4vh,44px),env(safe-area-inset-bottom));
}

.mias-oc__close{position:relative;width:40px;height:40px;margin:0 0 clamp(20px,5vh,56px) -8px;color:inherit}
.mias-oc__close span{position:absolute;left:8px;right:8px;top:50%;height:1.5px;background:currentColor;transition:transform .6s var(--oc-ease)}
.mias-oc__close span:first-child{transform:rotate(45deg)}
.mias-oc__close span:last-child{transform:rotate(-45deg)}
.mias-oc__close:hover span{transform:rotate(0)}

.mias-oc__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(20px,3vw,48px);align-items:start}

/* ── LINKS: rise out of a mask, one after another ──────────────────────── */
.mias-oc__links{list-style:none;margin:0 0 clamp(28px,6vh,56px);padding:0}
.mias-oc__item{overflow:hidden}
.mias-oc__link{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;color:inherit;
  font-family:var(--mias-font-display);font-style:italic;font-weight:400;
  font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.28;letter-spacing:-.015em;
  transform:translateY(105%);
  transition:transform var(--oc-dur) var(--oc-ease-out) var(--d,0ms);
}
html.oc-open .mias-oc__link{transform:none}
html.oc-closing .mias-oc__link{transition-duration:.45s;transition-timing-function:var(--oc-ease)}

/* Hover: a dash grows from the left and the word slides right. */
.mias-oc__label{position:relative;display:inline-block;transition:transform .35s var(--oc-ease)}
.mias-oc__label::before{
  content:'';position:absolute;right:calc(100% + 10px);top:55%;width:22px;height:2px;
  background:var(--mias-pink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--oc-ease);
}
.mias-oc__link:hover .mias-oc__label,.mias-oc__link:focus-visible .mias-oc__label{transform:translateX(32px)}
.mias-oc__link:hover .mias-oc__label::before,.mias-oc__link:focus-visible .mias-oc__label::before{transform:scaleX(1)}

/* Touch screens keep :hover after a tap, which would leave the label shifted
   into the toggle circle. The dash-and-slide is a pointer effect only. */
@media (hover:none){
  .mias-oc__link:hover .mias-oc__label{transform:none}
  .mias-oc__link:hover .mias-oc__label::before{transform:scaleX(0)}
}

.mias-oc__toggle{justify-content:space-between;gap:16px;padding-right:2px}
.mias-oc__toggle .mias-oc__label{min-width:0}
.mias-oc__count{
  font-family:var(--mias-font-ui);font-style:normal;font-weight:600;font-size:.34em;letter-spacing:.04em;
  color:var(--mias-pink);margin-left:.35em;vertical-align:super;line-height:0;
}
.mias-oc__toggle-icon{
  position:relative;flex:none;width:40px;height:40px;border:1px solid var(--mias-border-strong);border-radius:50%;
  transition:border-color .3s var(--oc-ease),background .3s var(--oc-ease),transform .45s var(--oc-ease);
}
.mias-oc__toggle-icon::before,.mias-oc__toggle-icon::after{
  content:'';position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;
  background:currentColor;transition:transform .45s var(--oc-ease),opacity .3s;
}
.mias-oc__toggle-icon::after{transform:rotate(90deg)}
.mias-oc__toggle:hover .mias-oc__toggle-icon,.mias-oc__toggle:focus-visible .mias-oc__toggle-icon{border-color:var(--mias-pink)}
.mias-oc__toggle[aria-expanded="true"] .mias-oc__toggle-icon{background:var(--mias-black);border-color:var(--mias-black);color:#fff;transform:rotate(180deg)}
.mias-oc__toggle[aria-expanded="true"] .mias-oc__toggle-icon::after{transform:rotate(0deg);opacity:0}

.mias-oc__sub{list-style:none;margin:0;padding:0 0 0 32px;height:0;overflow:hidden;transition:height .6s var(--oc-ease)}
.mias-oc__sub li{opacity:0;transform:translateX(-12px);transition:opacity .5s var(--oc-ease-out) var(--d,0ms),transform .5s var(--oc-ease-out) var(--d,0ms)}
.mias-oc__sub.is-open li{opacity:1;transform:none}
.mias-oc__sub a{display:inline-block;font-size:.95rem;padding:4px 0;color:inherit;transition:transform .3s var(--oc-ease)}
.mias-oc__sub a:hover{transform:translateX(8px);text-decoration:underline;text-decoration-color:var(--mias-pink);text-underline-offset:4px}
.mias-oc__sub li:last-child{padding-bottom:10px}
.mias-oc__group-label{
  display:block;padding-top:10px;font-size:.7rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mias-text-muted);
}

/* ── INFO COLUMNS AND FOOT ─────────────────────────────────────────────── */
.mias-oc__info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;border-top:1px solid var(--mias-border);padding-top:22px}
.mias-oc__info-col,.mias-oc__foot{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--oc-ease-out) var(--d,0ms),transform .7s var(--oc-ease-out) var(--d,0ms);
}
html.oc-open .mias-oc__info-col,html.oc-open .mias-oc__foot{opacity:1;transform:none}
.mias-oc__info-head{font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mias-text-muted);margin:0 0 10px}
.mias-oc__info-col a{display:block;width:fit-content;font-size:.92rem;line-height:1.8;color:inherit;overflow-wrap:anywhere}
.mias-oc__info-col a:hover{text-decoration:underline;text-decoration-color:var(--mias-pink);text-underline-offset:4px}
.mias-oc__foot{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;margin-top:28px;font-size:.9rem}
.mias-oc__rating{color:inherit}
.mias-oc__stars{color:var(--mias-pink);letter-spacing:2px;margin-right:6px}
.mias-oc__foot-link{color:inherit;border-bottom:1px solid currentColor}
.mias-oc__empty{font-size:.95rem;color:var(--mias-text-secondary)}

/* ── PHOTO: clips open after the panels, crossfades on hover ───────────── */
.mias-oc__media{
  position:sticky;top:0;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--mias-surface);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--oc-ease) calc(var(--oc-stagger) * 4);
}
html.oc-open .mias-oc__media{clip-path:inset(0 0 0 0)}
html.oc-closing .mias-oc__media{transition-delay:0ms;transition-duration:.5s}
.mias-oc__media img{
  position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;
  transform:translateY(var(--my,0px)) scale(1.04);
  transition:opacity .4s var(--oc-ease),transform .8s var(--oc-ease-out);
}
.mias-oc__media img.is-back{opacity:0;transform:translateY(var(--my,0px)) scale(1.14)}

@media (max-width:1100px){
  .mias-oc__cols{grid-template-columns:1fr}
  .mias-oc__media{display:none}
}
@media (max-width:819px){
  :root{--oc-sheet-w:100vw}
  .mias-oc__link{font-size:clamp(2rem,9vw,2.6rem)}
  /* On phones the info block staggers in as the sheet scrolls. */
  html.oc-open .mias-oc__info-col:not(.is-visible),
  html.oc-open .mias-oc__foot:not(.is-visible){opacity:0;transform:translateY(18px)}
}

/* ── RAILS ─────────────────────────────────────────────────────────────── */
.mias-rail .mias-container{position:relative}
.mias-rail__nav{display:none;gap:8px;justify-content:flex-end;margin:calc(var(--mias-s5) * -1) 0 var(--mias-s4)}
/* Product rails: arrows sit on the heading line, "View all" just left of them. */
.mias-home__products-section.mias-rail .mias-home__head{align-items:center;padding-inline-end:112px;min-height:44px}
.mias-home__products-section.mias-rail .mias-rail__nav{position:absolute;top:0;right:var(--mias-gutter);margin:0}
.mias-home__products-section.mias-rail:not(.is-scrollable) .mias-home__head{padding-inline-end:0}
.mias-rail.is-scrollable .mias-rail__nav{display:flex}
.mias-rail__btn{
  display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--mias-border-strong);
  border-radius:50%;color:var(--mias-text-primary);background:var(--mias-white);
  transition:background .25s,color .25s,border-color .25s,opacity .25s;
}
.mias-rail__btn:hover:not(:disabled){background:var(--mias-pink);border-color:var(--mias-pink);color:#fff}
.mias-rail__btn:disabled{opacity:.35;cursor:default}

ul.products.mias-rail__track,.mias-rail__track{
  display:grid !important;grid-auto-flow:column;grid-template-columns:none !important;
  grid-auto-columns:calc((100% - var(--mias-s5) * 4) / 5);
  column-gap:var(--mias-s5);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:0;padding:0 0 var(--mias-s2);list-style:none;
}
.mias-rail__track::-webkit-scrollbar{display:none}
.mias-rail__track > li{scroll-snap-align:start;width:auto !important;margin:0 !important}
.mias-rail__track.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.mias-rail__track.is-dragging a{pointer-events:none}
.mias-rail__track:focus-visible{outline:2px solid var(--mias-pink);outline-offset:4px}

/* Same selector as the base rule above — with a weaker one these widths
   lost on specificity and phones kept the five-across desktop row. */
@media (max-width:1199px){ ul.products.mias-rail__track,.mias-rail__track{grid-auto-columns:calc((100% - var(--mias-s5) * 3) / 4)} }
@media (max-width:899px){  ul.products.mias-rail__track,.mias-rail__track{grid-auto-columns:calc((100% - var(--mias-s4) * 2) / 2.6);column-gap:var(--mias-s4)} }
@media (max-width:559px){  ul.products.mias-rail__track,.mias-rail__track{grid-auto-columns:72%} .mias-rail__nav{display:none !important} }

/* ── REDUCED MOTION: everything still opens, nothing travels ───────────── */
@media (prefers-reduced-motion:reduce){
  .mias-site,.mias-oc__panel,.mias-oc__sheet,.mias-oc__link,.mias-oc__media,
  .mias-oc__info-col,.mias-oc__foot,.mias-oc__sub,.mias-oc__sub li{transition-duration:1ms !important;transition-delay:0ms !important}
  html.oc-open .mias-site{transform:none}
}

/* ── DESKTOP MEGA MENU: one backdrop that morphs between panels ──────────
   Active only once mias-motion.js has run (html.mias-mega-motion), so the
   plain panel from main.css is the no-JS fallback. */
@media (min-width:1024px){
  html.mias-mega-motion .mias-nav{position:relative}
  html.mias-mega-motion .mias-mega{
    background:transparent;border:0;box-shadow:none;transform:none;
    max-height:var(--mega-max,70vh);overflow-y:auto;overscroll-behavior:contain;
    transition:opacity .25s ease,visibility .25s ease;
    z-index:calc(var(--mias-z-mega) + 1);scrollbar-width:thin;
  }
  .mias-mega-bg{
    position:absolute;left:0;right:0;top:100%;height:0;
    background:var(--mias-white);border-bottom:1px solid var(--mias-border);
    box-shadow:var(--mias-shadow-lg);opacity:0;pointer-events:none;
    transition:height .45s var(--oc-ease-out),opacity .25s ease;
    z-index:var(--mias-z-mega);
  }
  .mias-mega-bg.is-on{opacity:1}

  /* Columns and links cascade in, top to bottom, left to right. */
  html.mias-mega-motion .mias-mega .mias-mega__feature,
  html.mias-mega-motion .mias-mega .mias-mega__heading,
  html.mias-mega-motion .mias-mega .mias-mega__link{
    opacity:0;transform:translateY(10px);
    transition:opacity .35s var(--oc-ease-out),transform .45s var(--oc-ease-out);
    transition-delay:0ms;
  }
  html.mias-mega-motion .mias-mega.is-shown .mias-mega__feature,
  html.mias-mega-motion .mias-mega.is-shown .mias-mega__heading,
  html.mias-mega-motion .mias-mega.is-shown .mias-mega__link{
    opacity:1;transform:none;transition-delay:calc(var(--mi,0) * 18ms + 60ms);
  }
  /* Link hover: slides a little, like the IPL sub-menu. */
  html.mias-mega-motion .mias-mega__link{display:inline-block}
  html.mias-mega-motion .mias-mega.is-shown .mias-mega__link:hover{transform:translateX(6px);transition-delay:0ms}
}

/* ── SCROLL REVEALS ────────────────────────────────────────────────────── */
html.mias-motion [data-mias-reveal]{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--oc-ease-out) var(--d,0ms),transform .8s var(--oc-ease-out) var(--d,0ms);
}
html.mias-motion [data-mias-reveal].is-in{opacity:1;transform:none}
/* Round tiles grow in rather than rise. */
html.mias-motion .mias-circles__row > [data-mias-reveal]{transform:scale(.86)}
html.mias-motion .mias-circles__row > [data-mias-reveal].is-in{transform:none}
/* Rail cards slide in from the right, like the carousel video. */
html.mias-motion .mias-rail__track > [data-mias-reveal]{transform:translateX(48px)}
html.mias-motion .mias-rail__track > [data-mias-reveal].is-in{transform:none}

/* Photos unmask upward. A curtain slides off the photo rather than clipping
   the photo itself: a clipped image looks invisible to lazy-load plugins,
   which then never load it (the empty frames on Flower Hut, 2.41.0). */
html.mias-motion [data-mias-unmask]{position:relative}
html.mias-motion [data-mias-unmask]::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:var(--mias-surface-soft,#FBF0F4);transform-origin:50% 0;
  transition:transform 1s var(--oc-ease)
}
html.mias-motion [data-mias-unmask].is-in::after{transform:scaleY(0)}

/* Parallax: the photo is slightly larger than its frame and drifts. */
[data-mias-parallax]{transform:translate3d(0,var(--py,0%),0) scale(1.14);will-change:transform}

/* ── DOT FIELD (IPL) on brand-colour sections ──────────────────────────── */
[data-dots]{position:relative;isolation:isolate}
.mias-dots-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
[data-dots] > :not(.mias-dots-canvas):not(.dots-switch){position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  html.mias-motion [data-mias-reveal],html.mias-motion [data-mias-unmask]{opacity:1;transform:none;clip-path:none;transition:none}
  html.mias-motion [data-mias-unmask]::after{display:none}
  [data-mias-parallax]{transform:none}
}

/* ── CHROME: social icons, WhatsApp label ──────────────────────────────── */
.mias-socials{display:inline-flex;align-items:center;gap:12px}
.mias-socials a{display:inline-flex;color:inherit;opacity:.9;transition:opacity .2s,transform .2s}
.mias-socials a:hover{opacity:1;transform:translateY(-1px)}
.mias-announce__inner{position:relative}
@media (min-width:900px){
  .mias-announce__socials{position:absolute;right:var(--mias-gutter);top:50%;transform:translateY(-50%)}
}
@media (max-width:899px){ .mias-announce__socials{display:none} }
.mias-footer__socials{display:flex;justify-content:center;gap:18px;padding-block:var(--mias-s5)}
.mias-footer__socials svg{width:22px;height:22px}

/* "Need help? Chat with us" sits beside the WhatsApp button on wide screens. */
.mias-fab{overflow:visible}
.mias-fab__label{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  white-space:nowrap;padding:8px 12px;border-radius:6px;background:var(--mias-white);
  color:var(--mias-text-primary);font-size:.8125rem;box-shadow:var(--mias-shadow-lg);
  pointer-events:none;
}
@media (max-width:699px){ .mias-fab__label{display:none} }

/* A store with no blog posts has no feature card; without this the columns
   fall into the 260px feature slot and stack in one narrow column. */
.mias-mega__inner:not(:has(> .mias-mega__feature)){grid-template-columns:1fr}

/* ── CARD BUTTONS ALWAYS VISIBLE (shop.card_buttons = always) ─────────────
   The actions leave the photo and sit under the price as a full-width
   brand button, the way gifting stores sell straight from the grid. */
body.mias-card-buttons .mias-card{display:flex;flex-direction:column;position:relative}
body.mias-card-buttons .mias-card__frame{display:contents}
body.mias-card-buttons .mias-card__media{position:relative;order:0}
body.mias-card-buttons .mias-card__info{order:1}
body.mias-card-buttons .mias-card__actions{
  order:2;position:static;opacity:1;transform:none;pointer-events:auto;
  display:grid;gap:6px;padding:var(--mias-s3) 0 0;background:none;
}
body.mias-card-buttons .mias-card__actions .mias-btn--dark{background:var(--mias-pink);border-color:var(--mias-pink);color:#fff}
body.mias-card-buttons .mias-card__actions .mias-btn--dark:hover{background:var(--mias-pink-hover);border-color:var(--mias-pink-hover)}
@media (max-width:559px){ .mias-home__products-section.mias-rail .mias-home__head{padding-inline-end:0} }