/* MASTORE Checkout Studio — wizard structure v9
   Owns ONLY layout: viewport ownership, step panel visibility, internal
   scrolling, and the mobile bag sheet. All colour/typography lives in
   checkout-studio.v12.css, which loads first (this sheet depends on it).

   Deliberately thin. The previous wizard sheet (v7, 77 KB) restyled the whole
   page on top of the studio sheet and the two fought each other for hours. */

/* ------------------------------------------------- viewport ownership ---- */
/* The engine adds .mcs-wizard-on to <body> and .mcs-wizard to <main class="mcs">.
   A class (not :has) so the contract is explicit and debuggable. */

html:has(body.mcs-wizard-on){height:100%}
body.mcs-wizard-on{
  height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
/* WordPress pushes the document down by the admin bar's height, so the
   viewport the page actually gets is that much shorter. */
body.mcs-wizard-on.admin-bar{height:calc(100dvh - 32px)}
@media screen and (max-width:782px){
  body.mcs-wizard-on.admin-bar{height:calc(100dvh - 46px)}
}
body.mcs-wizard-on #mcs-chrome{flex:0 0 auto}

/* Everything that made this a scrolling marketing page is retired while the
   wizard runs. Nothing is deleted — turning the wizard off restores it. */
body.mcs-wizard-on .mcs-hero,
body.mcs-wizard-on .mcs-topline,
body.mcs-wizard-on .mcs-bottom-note{display:none}

.mcs.mcs-wizard{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;overflow:hidden;
}
.mcs-wizard .mcs-shell{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;overflow:hidden;
  width:100%;
}
.mcs-wizard .mcs-route{flex:0 0 auto}
.mcs-wizard>.mcs-shell>.woocommerce,
.mcs-wizard .woocommerce{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.mcs-wizard .woocommerce-notices-wrapper{flex:0 0 auto}
.mcs-wizard form.mcs-form{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.mcs-wizard .mcs-layout{
  flex:1 1 auto;min-height:0;
  padding-bottom:0;overflow:hidden;
}

/* ------------------------------------------------------- step panels ----- */

.mcs-wizard .mcs-main{
  position:relative;               /* anchors the staged payment panel */
  min-height:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}
/* bottom fade — signals "there is more below" without clipping meaning */
.mcs-wizard .mcs-main::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26px;z-index:3;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--paper));
  pointer-events:none;
}

.mcs-wizard .mcs-main>.mcs-card{
  display:none;
  margin:0;
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.mcs-wizard .mcs-main>.mcs-card.mcs-panel-active{display:block}

/* The card head stays put while the body scrolls under it.
   It must NOT carry a negative margin-top: sticky then resolves the element
   back down to top:0 while it is still in flow, which pushes it 30px over the
   first row of fields and shears their labels in half. Instead the card gives
   up its own top padding and the head owns it. */
.mcs-wizard .mcs-main>.mcs-card{padding-top:0}
.mcs-wizard .mcs-card>.mcs-card-head{
  position:sticky;top:0;z-index:2;
  background:var(--paper);
  margin-top:0;padding-top:30px;
}

/* scrollbars inside the cards: present, but part of the drawing */
.mcs-wizard .mcs-card,
.mcs-wizard .mcs-order>#order_review{scrollbar-width:thin;scrollbar-color:var(--ink-25) transparent}
.mcs-wizard .mcs-card::-webkit-scrollbar,
.mcs-wizard .mcs-order>#order_review::-webkit-scrollbar{width:6px}
.mcs-wizard .mcs-card::-webkit-scrollbar-track,
.mcs-wizard .mcs-order>#order_review::-webkit-scrollbar-track{background:transparent}
.mcs-wizard .mcs-card::-webkit-scrollbar-thumb,
.mcs-wizard .mcs-order>#order_review::-webkit-scrollbar-thumb{background:var(--ink-25);border-radius:999px}

/* #mcs-pay is NEVER display:none.
   The Yandex Pay / Split SDK measures its container when it mounts, and
   #payment is replaced by WooCommerce on every updated_checkout — i.e. the
   widget re-initialises while step 3 is off-screen each time the address
   changes on step 2. display:none would mount it at 0x0 and leave the shopper
   with no way to pay. Staging it with visibility keeps a real layout box. */
.mcs-wizard .mcs-main>#mcs-pay{
  display:block;
  position:absolute;inset:0;z-index:-1;
  visibility:hidden;opacity:0;pointer-events:none !important;
  overflow:hidden;
}
.mcs-wizard .mcs-main>#mcs-pay:not(.mcs-panel-active) iframe,
.mcs-wizard .mcs-main>#mcs-pay:not(.mcs-panel-active) *{
  pointer-events:none !important;
}
.mcs-wizard .mcs-main>#mcs-pay.mcs-panel-active{
  position:relative;inset:auto;z-index:1;
  visibility:visible;opacity:1;pointer-events:auto !important;
  overflow-y:auto;
}
.mcs-wizard .mcs-main>#mcs-pay.mcs-panel-active iframe,
.mcs-wizard .mcs-main>#mcs-pay.mcs-panel-active *{
  pointer-events:auto !important;
}

/* step transition */
@media(prefers-reduced-motion:no-preference){
  .mcs-wizard .mcs-main>.mcs-card.mcs-panel-active{animation:mcs-step-in 240ms var(--ease) both}
}
@keyframes mcs-step-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* long lists scroll inside their own card, never the page */
.mcs-wizard #ms-co-delivery-methods,
.mcs-wizard #payment .wc_payment_methods{
  max-height:none;min-height:0;overscroll-behavior:contain;
}

/* ----------------------------------------------------- step controls ----- */

.mcs-wizard .mcs-step-controls{
  flex:0 0 auto;
  display:flex;flex-direction:column;gap:8px;
  padding:14px 0 18px;
  border-top:1px solid var(--rule);
}
.mcs-step-buttons{display:flex;align-items:center;gap:14px}
.mcs-step-back{
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink);background:var(--paper);
  border:1.5px solid var(--rule);border-radius:var(--r-pill);
  padding:11px 20px;cursor:pointer;
  transition:border-color var(--t),background var(--t),color var(--t);
}
.mcs-step-back:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.mcs-step-back[hidden]{display:none}
.mcs-step-caption{
  margin-left:auto;
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-25);
}
/* the forward CTA is the receipt button; this mirror stays out of the way */
.mcs-wizard .mcs-step-next{display:none !important}
.mcs-step-error:empty{display:none}
.mcs-step-error{margin:0;font-size:12.5px;font-weight:600;color:var(--ink)}

/* WooCommerce's real submit must stay in the DOM (checkout.js needs it) but is
   never the thing the shopper clicks — the receipt CTA proxies to it exactly
   once, so there is a single submit path and no double order. */
.mcs-wizard #place_order{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ------------------------------------------------------- the receipt ----- */

.mcs-wizard .mcs-aside{
  position:static;
  min-height:0;
  display:flex;flex-direction:column;gap:14px;
  overflow:hidden;
}
.mcs-wizard .mcs-order{
  min-height:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.mcs-wizard .mcs-order>#order_review{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;
}
.mcs-wizard .mcs-order>.mcs-coupon,
.mcs-wizard .mcs-order>.mcs-order-foot,
.mcs-wizard .mcs-order>.mcs-go-pay{flex:0 0 auto}
.mcs-wizard .mcs-reassurance{flex:0 0 auto}

.mcs-bag-toggle{display:none}
.mcs-fit-close{display:none}

/* ------------------------------------------------------------ mobile ----- */

@media(max-width:960px){
  .mcs-wizard .mcs-layout{grid-template-columns:minmax(0,1fr)}

  /* the tag collapses to a bottom bar and opens as a sheet */
  .mcs-bag-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    flex:0 0 auto;width:100%;
    font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
    background:var(--paper);color:var(--ink);
    border:1.5px solid var(--ink);border-radius:var(--r-pill);
    padding:14px 20px;margin:0 0 12px;cursor:pointer;
  }
  .mcs-wizard .mcs-aside{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    max-height:82dvh;
    background:var(--paper);
    border-top:2px solid var(--ink);
    border-radius:var(--r-card) var(--r-card) 0 0;
    padding:16px;
    transform:translateY(101%);
    transition:transform 260ms var(--ease);
    box-shadow:0 -20px 50px rgba(0,0,0,.14);
  }
  .mcs-wizard.mcs-bag-open .mcs-aside{transform:none}
  .mcs-wizard .mcs-order{border:0;padding:8px 4px 4px}
  .mcs-wizard .mcs-order::before,
  .mcs-wizard .mcs-order::after{display:none}

  .mcs-fit-close{
    display:grid;place-items:center;
    position:absolute;top:12px;right:14px;
    width:32px;height:32px;border:0;border-radius:var(--r-pill);
    background:var(--ink);color:var(--paper);font-size:17px;line-height:1;cursor:pointer;
  }

  .mcs-wizard .mcs-card{padding:22px 18px}
  .mcs-wizard .mcs-main>.mcs-card{padding-top:0}
  .mcs-wizard .mcs-card>.mcs-card-head{padding-top:22px}
  .mcs-wizard .mcs-shell{padding:0 16px}
}

/* Very short viewports: give the content every pixel the chrome can spare. */
@media(max-height:700px){
  .mcs-wizard .mcs-route{padding:10px 0}
  .mcs-wizard .mcs-card{padding:18px 20px}
  .mcs-wizard .mcs-main>.mcs-card{padding-top:0}
  .mcs-wizard .mcs-card>.mcs-card-head{padding-top:18px;padding-bottom:14px;margin-bottom:16px}
  .mcs-wizard .mcs-card-head h2{font-size:21px}
  .mcs-wizard .mcs-card-head>span{font-size:30px}
  .mcs-wizard .mcs-step-controls{padding:10px 0 12px}
}