/* Macro Studios design layer on PhotoBrust: header, hero tint, account.
   From the approved mock-ups in sites/macrostudios.ca/previews/. Type is the
   site's own (Poppins) rather than the mock-ups' stand-in font. */
:root{
  --ms-ink:#1d1d1f;
  --ms-ink-2:#6e6e73;
  --ms-page:#f5f5f7;
  --ms-card:#fff;
  --ms-line:rgba(0,0,0,.08);
  --ms-accent:#2f6bff;               /* the blue of the triangle logo */
  --ms-glass:rgba(255,255,255,.12);
  --ms-glass-strong:rgba(18,24,36,.42);
  --ms-glass-solid:rgba(18,24,36,.78);
  --ms-glass-edge:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.12);
  --ms-shadow:0 18px 40px rgba(6,20,40,.28);
  --ms-top:calc(22px + var(--wp-admin--admin-bar--height, 0px));
}

/* ---- Hero tint -----------------------------------------------------------
   One even dark tint over the whole banner photo so the white signature and
   titles read against bright sky. Replaces the cover block's 50% black. */
.header-media .wp-block-cover__background{
  background-color:rgb(6,14,24)!important;
  background-image:none!important;
  opacity:.35!important;
}

/* ---- Header --------------------------------------------------------------
   The wrapper keeps PhotoBrust's header height so page layouts don't move;
   the pill itself floats, fixed, at the top of the window. */
/* z-index: PhotoBrust gives the wrapper z-index:5, which traps the fixed pill
   in a low layer, so gallery images drew over it. Lift the whole wrapper. */
.ms-header-wrap{min-height:110px;padding:0!important;margin:0!important;background:none!important;border:0!important;z-index:1000!important}
.ms-header{font-family:inherit;-webkit-font-smoothing:antialiased}
.ms-nav{
  position:fixed;
  top:var(--ms-top);
  left:50%;
  transform:translateX(-50%);
  /* Without max-content a fixed box at left:50% may be only half the window
     wide, squeezing its items: round buttons turn oval. */
  width:max-content;
  z-index:1000;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 8px 8px 30px;
  border-radius:999px;
  color:#fff;
}
.ms-nav > *{flex:none}
/* The frosted glass is on a layer behind the pill, not the pill itself: a
   backdrop-filter on the pill would make it the lens's backdrop root, and
   the bubble would whiten as it moved. */
.ms-nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--ms-glass);
  box-shadow:var(--ms-glass-edge), var(--ms-shadow);
  -webkit-backdrop-filter:blur(16px) saturate(1.7);
  backdrop-filter:blur(16px) saturate(1.7);
  transition:background .3s ease;
}
/* Past the banner the pill turns dark glass (the lighter glass washed out
   white text over white pages); it keeps its size. */
.ms-header.is-scrolled .ms-nav::before{background:var(--ms-glass-solid)}
/* Pages with no banner photo (store pages) keep the dark pill, scrolled or
   not; the lighter scrolled glass reads as flat grey on white. */
.ms-header.ms-header--solid .ms-nav::before{background:var(--ms-glass-solid)}
.ms-nav a,.ms-nav button{color:#fff;text-decoration:none}
/* The site's global a:hover (link blue) ties with the rule above, so which
   one wins depended on stylesheet order; the header stays white either way. */
.ms-header .ms-nav a:hover,.ms-header .ms-nav a:focus,.ms-header .ms-nav button:hover,
.ms-header .ms-sheet a:hover,.ms-header .ms-sheet a:focus{color:#fff}
.ms-nav a:focus-visible,.ms-nav button:focus-visible,.ms-sheet a:focus-visible{outline:2px solid #fff;outline-offset:3px}

.ms-brand{display:flex;align-items:center;gap:14px;margin-right:34px;font-weight:600;font-size:19px;letter-spacing:.02em;white-space:nowrap}
.ms-brand img{display:block;width:44px;height:44px;object-fit:contain}

.ms-links{position:relative;display:flex;gap:4px}
.ms-links a{
  position:relative;
  z-index:1;
  padding:15px 22px;
  border-radius:999px;
  font-size:17px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
}

/* The liquid highlight (liquid.js positions it). */
.ms-header .thumb,.ms-seg .thumb{
  position:absolute;
  top:6px;
  bottom:6px;
  left:0;
  width:0;
  border-radius:999px;
  background:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(6,20,40,.18);
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition:opacity .2s ease;
}
/* The invisible glass above the labels: no fill or shadow of its own, so it
   only bends what's under it, and only while moving. */
.ms-header .thumb.thumb-lens,.ms-seg .thumb.thumb-lens{
  z-index:2;
  opacity:1;
  background:transparent;
  box-shadow:none;
  visibility:hidden;
  transition:none;
}
.ms-header .thumb.thumb-lens.is-moving,.ms-seg .thumb.thumb-lens.is-moving{visibility:visible}
/* After a click, while the next page loads, the bubble stays on that link
   and wobbles gently like a drop of water (liquid.js adds is-loading once
   it has landed). The animation overrides the inline squash while it runs. */
.is-loading > .thumb:not(.thumb-lens){animation:ms-wobble 1.1s cubic-bezier(.45,0,.55,1) infinite}
@keyframes ms-wobble{
  0%,100%{transform:scale(1,1)}
  20%{transform:scale(1.05,.9)}
  40%{transform:scale(.97,1.05)}
  60%{transform:scale(1.02,.97)}
  80%{transform:scale(.995,1.01)}
}
@media (prefers-reduced-motion:reduce){
  .is-loading > .thumb:not(.thumb-lens){animation:ms-pulse 1.4s ease-in-out infinite}
  @keyframes ms-pulse{50%{opacity:.55}}
}

/* Account and cart share a slightly brighter capsule nested in the pill,
   the way Apple groups toolbar controls, instead of a divider line. */
.ms-actions{
  display:flex;
  gap:2px;
  margin-left:12px;
  padding:3px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 0 0 1px rgba(255,255,255,.1);
}
.ms-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:background .2s;
  -webkit-tap-highlight-color:transparent;
}
.ms-icon:hover{background:rgba(255,255,255,.18)}
.ms-i{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ms-menu-toggle{display:none}
.ms-menu-toggle .ms-i-close,.ms-menu-open .ms-menu-toggle .ms-i-menu{display:none}
.ms-menu-open .ms-menu-toggle .ms-i-close{display:block}
.ms-dot{display:none;position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--ms-accent);box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.has-cart .ms-dot{display:block}

/* Narrower windows: a compact pill. */
@media (max-width:1180px){
  .ms-nav{padding:6px 6px 6px 18px;gap:4px}
  .ms-brand{font-size:15px;gap:10px;margin-right:16px}
  .ms-brand img{width:32px;height:32px}
  .ms-links a{padding:11px 14px;font-size:15px}
  .ms-icon{width:40px;height:40px}
  .ms-i{width:20px;height:20px}
  .ms-actions{margin-left:6px}
}

/* ---- Phones: pill plus frosted sheet ------------------------------------ */
.ms-sheet{display:none}
@media (max-width:860px){
  .ms-nav{
    left:16px;
    right:16px;
    top:calc(18px + var(--wp-admin--admin-bar--height, 0px));
    transform:none;
    width:auto;
    justify-content:space-between;
    padding:6px 6px 6px 16px;
  }
  .ms-brand{gap:10px;margin-right:0;font-size:17px}
  .ms-brand img{width:30px;height:30px}
  .ms-links,.ms-account{display:none}
  .ms-actions{margin:0;padding:0;background:none;box-shadow:none}
  .ms-icon{width:48px;height:48px}
  .ms-icon:hover{background:transparent}
  .ms-icon:active{background:rgba(255,255,255,.18)}
  .ms-i{width:26px;height:26px;stroke-width:1.8}
  .ms-menu-toggle{display:grid}

  .ms-sheet{
    position:fixed;
    inset:10px;
    top:calc(10px + var(--wp-admin--admin-bar--height, 0px));
    z-index:999;
    display:flex;
    flex-direction:column;
    padding:96px 26px 24px;
    border-radius:34px;
    color:#fff;
    background:rgba(14,22,34,.55);
    box-shadow:var(--ms-glass-edge);
    -webkit-backdrop-filter:blur(26px) saturate(1.5);
    backdrop-filter:blur(26px) saturate(1.5);
    /* Closed, it's clipped to the pill's strip and invisible; opening
       unrolls it downward from the pill. */
    clip-path:inset(0 0 calc(100% - 72px) 0 round 34px);
    opacity:0;
    visibility:hidden;
    overflow-y:auto;
    transition:clip-path .42s cubic-bezier(.2,.8,.2,1), opacity .2s ease, visibility 0s linear .42s;
  }
  /* Over white pages the sheet needs more body to keep the text readable. */
  .ms-header.is-scrolled .ms-sheet,.ms-header--solid .ms-sheet{background:rgba(14,22,34,.86)}
  .ms-menu-open .ms-sheet{
    clip-path:inset(0 0 0 0 round 34px);
    opacity:1;
    visibility:visible;
    transition:clip-path .42s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  }
  .ms-menu-open,.ms-menu-open body{overflow:hidden}
  /* Over the open sheet the pill's own glass would double up. */
  .ms-menu-open .ms-nav::before{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

  .ms-sheet-links{display:flex;flex-direction:column}
  .ms-sheet-links a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 2px;
    border-bottom:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-size:30px;
    font-weight:500;
    letter-spacing:-.01em;
    line-height:1.2;
    text-decoration:none;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .3s ease, transform .38s cubic-bezier(.2,.8,.2,1);
  }
  .ms-sheet-links a[aria-current]::after{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--ms-accent);box-shadow:0 0 12px var(--ms-accent)}
  .ms-menu-open .ms-sheet-links a{opacity:1;transform:none}
  .ms-menu-open .ms-sheet-links a:nth-child(2){transition-delay:.03s}
  .ms-menu-open .ms-sheet-links a:nth-child(3){transition-delay:.06s}
  .ms-menu-open .ms-sheet-links a:nth-child(4){transition-delay:.09s}
  .ms-menu-open .ms-sheet-links a:nth-child(5){transition-delay:.12s}
  .ms-menu-open .ms-sheet-links a:nth-child(n+6){transition-delay:.15s}
  .ms-sheet-actions{margin-top:auto;padding-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ms-sheet-actions a{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:15px;
    border-radius:18px;
    color:#fff;
    background:rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
    font-size:16px;
    font-weight:500;
    text-decoration:none;
  }
  .ms-sheet-actions .ms-i{width:21px;height:21px;stroke-width:1.7}
  .ms-sheet-actions .ms-dot{position:static;margin-left:-2px}
  .ms-sheet small{display:block;margin-top:16px;text-align:center;color:rgba(255,255,255,.6);font-size:12px}
}

/* ---- Account page ---------------------------------------------------------
   Light and calm, like Apple's account pages. Scoped to WooCommerce's
   account page; the lost-password and endpoint screens keep their layout
   but pick up the same buttons and fields. */
body.woocommerce-account{background-color:var(--ms-page)}
.woocommerce-account .woocommerce{max-width:1080px;margin-left:auto;margin-right:auto;padding:8px 16px 80px;color:var(--ms-ink)}
[data-ms-seg][hidden],.ms-panel[hidden]{display:none!important}

/* Segmented control with a white liquid highlight. */
.ms-seg{
  position:relative;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  padding:4px;
  border-radius:999px;
  background:rgba(118,118,128,.14);
}
.ms-seg .thumb{top:4px;bottom:4px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04)}
.ms-seg button{
  position:relative;
  z-index:1;
  padding:8px 18px;
  border:0;
  border-radius:999px;
  background:none;
  color:var(--ms-ink);
  font:500 14px/1.3 inherit;
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
}
.ms-seg button:focus-visible{outline:2px solid var(--ms-accent);outline-offset:2px}

/* Signed out: one card. */
.ms-auth{
  box-sizing:border-box;
  width:min(420px,100%);
  margin:24px auto 0;
  padding:32px 28px 26px;
  border-radius:24px;
  background:var(--ms-card);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.06);
  text-align:center;
}
.ms-auth-logo{display:block;width:44px;height:44px;margin:0 auto 14px;object-fit:contain}
.ms-auth h2{margin:0;color:var(--ms-ink);font-size:26px;font-weight:600;letter-spacing:-.01em}
.ms-lede{margin:6px 0 22px;color:var(--ms-ink-2);font-size:15px}
.ms-auth .ms-seg{margin-bottom:22px}
/* Beats WooCommerce's boxed form styles (.woocommerce form.login etc.). */
.woocommerce .ms-auth form.woocommerce-form{margin:0;padding:0;border:0;border-radius:0;text-align:left}
.woocommerce .ms-auth form .form-row{margin:0;padding:0}
.ms-field{position:relative;margin:0 0 12px!important}
.woocommerce .ms-field input.input-text{
  width:100%;
  padding:22px 14px 8px;
  border:1px solid var(--ms-line);
  border-radius:14px;
  background:#fbfbfd;
  color:var(--ms-ink);
  font-size:16px;
  line-height:1.3;
  box-shadow:none;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.woocommerce .ms-field input.input-text:focus{outline:none;border-color:var(--ms-accent);box-shadow:0 0 0 4px rgba(47,107,255,.14);background:#fff}
.ms-field label{
  position:absolute;
  left:15px;
  top:15px;
  margin:0;
  color:var(--ms-ink-2);
  font-size:16px;
  line-height:1.3;
  pointer-events:none;
  transform-origin:left top;
  transition:transform .2s ease, color .2s;
}
.ms-field input:focus + label,
.ms-field input:not(:placeholder-shown) + label{transform:translateY(-9px) scale(.75)}
.ms-field input:-webkit-autofill + label{transform:translateY(-9px) scale(.75)}
.ms-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 18px;font-size:14px}
.ms-switch{display:flex!important;align-items:center;gap:8px;margin:0!important;color:var(--ms-ink-2);cursor:pointer}
.ms-switch input{appearance:none;-webkit-appearance:none;flex:none;width:38px;height:22px;margin:0;border-radius:11px;background:rgba(118,118,128,.24);position:relative;cursor:pointer;transition:background .2s}
.ms-switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ms-switch input:checked{background:#34c759}
.ms-switch input:checked::after{transform:translateX(16px)}
.ms-switch input:focus-visible{outline:2px solid var(--ms-accent);outline-offset:2px}
.woocommerce-account .ms-link{color:var(--ms-accent);text-decoration:none}
.woocommerce-account .ms-link:hover{text-decoration:underline}
.woocommerce .ms-btn,.woocommerce button.ms-btn.button{
  display:block;
  width:100%;
  margin:0;
  padding:14px;
  border:0;
  border-radius:14px;
  background:var(--ms-accent);
  color:#fff;
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  text-transform:none;
  letter-spacing:0;
  cursor:pointer;
  transition:transform .15s, filter .2s;
}
.woocommerce .ms-btn:hover{filter:brightness(1.06);background:var(--ms-accent);color:#fff}
.woocommerce .ms-btn:active{transform:scale(.985)}
.ms-fine{margin:14px 0 0;color:var(--ms-ink-2);font-size:12.5px;line-height:1.5}
.ms-auth .woocommerce-privacy-policy-text{margin-top:14px;color:var(--ms-ink-2);font-size:12.5px;line-height:1.5}
.ms-pill-note{display:inline-flex;align-items:center;gap:8px;margin:20px 0 0;padding:8px 14px;border-radius:999px;background:rgba(47,107,255,.08);color:#1f4fc4;font-size:13px;line-height:1.4}

/* Signed in: the dashboard replaces WooCommerce's sidebar with tiles, so
   hide the sidebar on this screen only. */
.woocommerce-account .woocommerce:has(.ms-dash) .woocommerce-MyAccount-navigation{display:none}
.woocommerce-account .woocommerce:has(.ms-dash) .woocommerce-MyAccount-content{float:none;width:100%;max-width:none}
.ms-hello{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:10px 0 22px}
.ms-hello h2{margin:0;color:var(--ms-ink);font-size:34px;font-weight:600;letter-spacing:-.02em}
.ms-hello p{margin:4px 0 0;color:var(--ms-ink-2)}
.ms-card{padding:20px;border-radius:20px;background:var(--ms-card);box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05)}
.ms-card h3{margin:0 0 14px;color:var(--ms-ink);font-size:17px;font-weight:600}
.ms-dl{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center}
.ms-dl + .ms-dl{margin-top:14px;padding-top:14px;border-top:1px solid var(--ms-line)}
.ms-dl img{width:64px;height:64px;border-radius:12px;object-fit:cover}
.ms-dl-name{font-weight:500}
.ms-dl-meta{margin-top:2px;color:var(--ms-ink-2);font-size:13px}
.ms-meter{height:6px;margin-top:8px;border-radius:3px;background:rgba(118,118,128,.16);overflow:hidden}
.ms-meter span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#ff9f0a,#ffcc00)}
.woocommerce-account a.ms-btn-sm{padding:9px 16px;border-radius:999px;background:var(--ms-accent);color:#fff;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.woocommerce-account a.ms-btn-sm:hover{filter:brightness(1.06)}
.ms-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:14px 0}
.woocommerce-account a.ms-tile{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  border-radius:20px;
  background:var(--ms-card);
  color:var(--ms-ink);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
  text-decoration:none;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.woocommerce-account a.ms-tile:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(0,0,0,.04), 0 16px 36px rgba(0,0,0,.08)}
.woocommerce-account a.ms-tile:focus-visible{outline:2px solid var(--ms-accent);outline-offset:3px}
.ms-tile-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(47,107,255,.1);color:var(--ms-accent)}
.ms-tile-ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ms-tile strong{font-size:16px;font-weight:600}
.ms-tile > span:last-child{color:var(--ms-ink-2);font-size:13px}

/* Account > Games: a card per game (features.php). */
.ms-games{display:grid;gap:14px}
.ms-game-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ms-game-h h3{margin:0}
.ms-game-empty{margin:10px 0 0;color:var(--ms-ink-2);font-size:14px;line-height:1.5}
.ms-game-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.ms-game-stats div{padding:14px;border-radius:14px;background:rgba(118,118,128,.07);text-align:center}
.ms-game-stats b{display:block;color:var(--ms-ink);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.ms-game-stats span{color:var(--ms-ink-2);font-size:12.5px}
.ms-game-hist{margin:0;padding:0;list-style:none}
.ms-game-hist li{display:grid;grid-template-columns:auto 56px 1fr;align-items:center;gap:14px;padding:10px 2px;border-top:1px solid var(--ms-line);font-size:14px}
.ms-game-hist b{color:var(--ms-ink);font-variant-numeric:tabular-nums}
.ms-game-hist time{color:var(--ms-ink-2);font-size:13px;text-align:right}
.ms-game-dots{display:flex;gap:5px}
.ms-game-dots i{width:9px;height:9px;border-radius:50%;background:rgba(118,118,128,.25)}
.ms-game-dots i.r{background:#34c759}
.ms-order{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.ms-order-num{font-weight:600}
.ms-order-date,.ms-order-total{color:var(--ms-ink-2);font-size:14px}
.ms-status{padding:4px 10px;border-radius:999px;background:rgba(118,118,128,.14);color:var(--ms-ink-2);font-size:12.5px;font-weight:600}
.ms-status--completed{background:rgba(52,199,89,.14);color:#1d7a35}
.ms-status--processing{background:rgba(47,107,255,.1);color:#1f4fc4}
.ms-status--on-hold,.ms-status--pending{background:rgba(255,159,10,.14);color:#9a5b00}
.ms-status--cancelled,.ms-status--failed,.ms-status--refunded{background:rgba(255,59,48,.1);color:#b3261e}
.ms-order .ms-link{margin-left:auto;font-size:14px}
@media (max-width:600px){
  .ms-hello h2{font-size:28px}
  .ms-dl{grid-template-columns:52px 1fr;gap:12px}
  .ms-dl img{width:52px;height:52px}
  .woocommerce-account a.ms-btn-sm{grid-column:1 / -1;text-align:center}
}

/* ---- Account sub-pages (Orders, Downloads, Addresses, Payment methods,
   Account details, an order) ------------------------------------------------
   WooCommerce's own templates, restyled: no overrides to keep in step. */
/* The page's intro note (a Columns block and spacer above the account area)
   repeated on every screen; the Downloads page states it instead. */
.woocommerce-account .entry-content > .wp-block-columns:has(~ .woocommerce),
.woocommerce-account .entry-content > .wp-block-spacer:has(~ .woocommerce){display:none}
.woocommerce-account .entry-content > .woocommerce{margin-top:36px}

/* The sidebar list becomes one pill bar; it scrolls sideways on phones. */
.woocommerce-account .woocommerce-MyAccount-navigation{float:none!important;width:auto!important;margin:0 0 30px}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  display:flex;
  gap:4px;
  margin:0;
  padding:5px;
  overflow-x:auto;
  border-radius:999px;
  background:var(--ms-card);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
  list-style:none;
  scrollbar-width:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
.woocommerce-account .woocommerce-MyAccount-navigation li{flex:none;margin:0;padding:0;border:0}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;
  padding:10px 18px;
  border-radius:999px;
  color:var(--ms-ink-2)!important;
  font-size:14.5px;
  font-weight:500;
  text-decoration:none!important;
  white-space:nowrap;
  transition:background .2s,color .2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:rgba(118,118,128,.1);color:var(--ms-ink)!important}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--ms-ink);color:#fff!important}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout{margin-left:auto!important}
.woocommerce-account .woocommerce-MyAccount-content{float:none!important;width:auto!important;color:var(--ms-ink)}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child{color:var(--ms-ink-2)}

/* Tables (orders, an order's lines, downloads, payment methods) as cards. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table{
  width:100%;
  margin:0 0 18px!important;
  border:0!important;
  border-collapse:separate!important;
  border-spacing:0;
  border-radius:22px!important;
  overflow:hidden;
  background:var(--ms-card);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td{padding:16px 22px!important;border:0!important;border-top:1px solid var(--ms-line)!important;background:none!important;text-align:left;vertical-align:middle}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th{border-top:0!important;color:var(--ms-ink-2);font-size:13px;font-weight:500}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:first-child > *{border-top:0!important}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead + tbody tr:first-child > *{border-top:1px solid var(--ms-line)!important}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table a:not(.button){color:var(--ms-ink);font-weight:600;text-decoration:none}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot td{font-weight:500}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child > *{font-size:18px;font-weight:600}
/* Order status in its colour, from the row's own status class. */
.woocommerce-orders-table__cell-order-status{white-space:nowrap}
.woocommerce-orders-table__cell-order-status{font-size:12.5px!important;font-weight:600}
.woocommerce-orders-table__row td.woocommerce-orders-table__cell-order-status{color:var(--ms-ink-2)}
.woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status{color:#1d7a35}
.woocommerce-orders-table__row--status-processing td.woocommerce-orders-table__cell-order-status{color:#1f4fc4}
.woocommerce-orders-table__row--status-on-hold td.woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-pending td.woocommerce-orders-table__cell-order-status{color:#9a5b00}
.woocommerce-orders-table__row--status-cancelled td.woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed td.woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-refunded td.woocommerce-orders-table__cell-order-status{color:#b3261e}

/* Buttons inside the account area: blue pills; "View" is a quiet link. */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button{
  display:inline-block;
  margin:0;
  padding:12px 22px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--ms-accent)!important;
  color:#fff!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:0 6px 18px rgba(47,107,255,.24)!important;
  font-size:15px!important;
  font-weight:600!important;
  line-height:1.3;
  text-decoration:none!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover{filter:brightness(1.07)}
.woocommerce-account .woocommerce-MyAccount-content table .button.view,
.woocommerce-account .woocommerce-MyAccount-content table .button.pay,
.woocommerce-account .woocommerce-MyAccount-content table .button.cancel{padding:0!important;background:none!important;box-shadow:none!important;color:var(--ms-accent)!important;font-size:14.5px!important;font-weight:500!important}
.woocommerce-account .woocommerce-MyAccount-content table .button + .button{margin-left:14px}

/* Notices ("No downloads available yet", "No order has been made yet"). */
.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:0 0 18px!important;
  padding:20px 22px!important;
  border:0!important;
  border-radius:22px!important;
  background:var(--ms-card)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05)!important;
  color:var(--ms-ink)!important;
}
.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner > svg{fill:var(--ms-accent);background:none}
.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner__content{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;flex:1}
.woocommerce-account .woocommerce-MyAccount-content .wc-block-components-notice-banner .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button{order:2;margin-left:auto!important;float:none!important}
/* reCAPTCHA is a fixed 304px; on narrow phones it overhung the sign-in card. */
@media (max-width:420px){.ms-auth .g-recaptcha{transform:scale(.8);transform-origin:0 0;height:62px}}
.ms-note{display:inline-flex;align-items:center;gap:8px;margin:6px 0 0;padding:10px 16px;border-radius:14px;background:rgba(47,107,255,.07);color:#1f4fc4;font-size:14px}
.woocommerce-account .ms-card + .ms-note{margin-top:16px}

/* Addresses: two cards. */
.woocommerce-account .woocommerce-Addresses{display:grid!important;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0 0}
.woocommerce-account .woocommerce-Addresses::before,.woocommerce-account .woocommerce-Addresses::after{display:none!important}
.woocommerce-account .woocommerce-Address{float:none!important;width:auto!important;max-width:none!important;margin:0!important;padding:24px;border-radius:22px;background:var(--ms-card);box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05)}
.woocommerce-account .woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.woocommerce-account .woocommerce-Address-title::before,.woocommerce-account .woocommerce-Address-title::after{display:none!important}
.woocommerce-account .woocommerce-Address-title h2,.woocommerce-account .woocommerce-Address-title h3{margin:0;color:var(--ms-ink);font-size:17px;font-weight:600}
.woocommerce-account .woocommerce-Address-title .edit{float:none!important;padding:7px 14px;border-radius:999px;background:rgba(118,118,128,.12);color:var(--ms-ink)!important;font-size:13.5px;font-weight:500;text-decoration:none!important}
.woocommerce-account .woocommerce-Address address{margin:0;color:var(--ms-ink-2);font-style:normal;line-height:1.6}

/* Forms (account details, edit address) in one card; fields like sign-in. */
.woocommerce-account form.woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-MyAccount-content > form:not(.ms-auth-form){padding:24px;border-radius:22px;background:var(--ms-card);box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05)}
.woocommerce-account .woocommerce-MyAccount-content form .form-row{margin:0 0 14px!important;padding:0!important}
.woocommerce-account .woocommerce-MyAccount-content form label{display:block;margin:0 0 6px;color:var(--ms-ink-2);font-size:13.5px;font-weight:500}
.woocommerce-account .woocommerce-MyAccount-content form .input-text,
.woocommerce-account .woocommerce-MyAccount-content form select{
  width:100%;
  box-sizing:border-box;
  padding:13px 14px!important;
  border:1px solid var(--ms-line)!important;
  border-radius:14px!important;
  background:#fbfbfd!important;
  color:var(--ms-ink)!important;
  font:400 16px/1.3 inherit!important;
  font-family:inherit!important;
  box-shadow:none!important;
  transition:border-color .2s, box-shadow .2s;
}
.woocommerce-account .woocommerce-MyAccount-content form .input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content form select:focus{outline:none;border-color:var(--ms-accent)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(47,107,255,.14)!important}
.woocommerce-account .woocommerce-MyAccount-content form em{color:var(--ms-ink-2);font-size:13px}
.woocommerce-account .woocommerce-MyAccount-content form fieldset{margin:22px 0 14px;padding:20px 0 0;border:0;border-top:1px solid var(--ms-line)}
.woocommerce-account .woocommerce-MyAccount-content form legend{padding:0;color:var(--ms-ink);font-size:17px;font-weight:600}
.woocommerce-account .woocommerce-MyAccount-content form .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content form .form-row-last{width:calc(50% - 7px)!important}

/* A single order: summary line, then its sections as cards. */
.woocommerce-account .woocommerce-MyAccount-content mark{padding:0;background:none;color:var(--ms-ink);font-weight:600}
.woocommerce-account .woocommerce-order-downloads,
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details{margin:0 0 18px!important}
.woocommerce-account .woocommerce-order-downloads__title,
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title{margin:26px 0 12px!important;color:var(--ms-ink);font-size:20px!important;font-weight:600}
.woocommerce-account .woocommerce-customer-details address{padding:22px;border:0!important;border-radius:22px;background:var(--ms-card);box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);color:var(--ms-ink-2);font-style:normal;line-height:1.6}

@media (max-width:700px){
  .woocommerce-account .woocommerce-MyAccount-navigation ul{border-radius:18px}
  .woocommerce-account .woocommerce-Addresses{grid-template-columns:1fr}
  .woocommerce-account .woocommerce-MyAccount-content form .form-row-first,
  .woocommerce-account .woocommerce-MyAccount-content form .form-row-last{width:100%!important;float:none!important}
  .woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tr{display:block;padding:12px 18px;border-top:1px solid var(--ms-line)}
  .woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody tr:first-child{border-top:0}
  .woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tr td,
  .woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tr th{display:flex!important;justify-content:space-between;gap:12px;padding:6px 0!important;border:0!important;text-align:right!important}
  .woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tr td::before,
  .woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tr th::before{color:var(--ms-ink-2);font-weight:500}
}

/* ---- Photo pages ------------------------------------------------------------
   Built on what the page content and Photo Gallery already output, so new
   covers, albums and photos pick this up by themselves. */

/* My Photos: the page's cover blocks become a tile grid. Covers placed in a
   Columns block are the big pair on top; loose covers fill rows of three.
   Spacers between them are dropped. */
.ms-page-my-photos .entry-content{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:170px;
  gap:18px;
  max-width:1180px;
  margin:40px auto 72px!important;
  padding:0 20px;
  box-sizing:border-box;
}
.ms-page-my-photos .entry-content .wp-block-spacer{display:none}
.ms-page-my-photos .entry-content > .wp-block-columns,
.ms-page-my-photos .entry-content > .wp-block-columns > .wp-block-column{display:contents}
/* body + doubled class: PhotoBrust forces auto margins on full-width blocks
   in columns with !important, which shrinks a grid item to nothing. */
body.ms-page-my-photos .entry-content .wp-block-cover.wp-block-cover{
  grid-column:span 2;
  grid-row:span 2;
  width:auto!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0;
  border-radius:22px!important;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.08);
  isolation:isolate;
}
body.ms-page-my-photos .entry-content > .wp-block-columns .wp-block-cover.wp-block-cover{grid-column:span 3;order:-1}
.ms-page-my-photos .entry-content .wp-block-cover__image-background{
  background-attachment:scroll!important;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.ms-page-my-photos .entry-content .wp-block-cover:hover .wp-block-cover__image-background{transform:scale(1.05)}
.ms-page-my-photos .entry-content .wp-block-cover__background{
  opacity:1!important;
  background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,.04) 58%)!important;
}
/* The cover's button becomes the caption, and its link covers the tile. */
.ms-page-my-photos .entry-content .wp-block-cover__inner-container{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  width:auto;
  max-width:none;
  padding:0 20px 18px;
}
.ms-page-my-photos .entry-content .wp-block-cover .wp-block-buttons{display:block;margin:0}
.ms-page-my-photos .entry-content .wp-block-cover .wp-block-buttons::after{
  content:"";
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/18px no-repeat;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.ms-page-my-photos .entry-content .wp-block-cover:hover .wp-block-buttons::after{transform:translateX(3px)}
.ms-page-my-photos .entry-content .wp-block-cover .wp-block-button,
.ms-page-my-photos .entry-content .wp-block-cover .wp-block-button__link{
  display:block;
  width:auto!important;
  margin:0;
  padding:0!important;
  border:0!important;
  border-radius:0;
  background:none!important;
  box-shadow:none;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  color:#fff!important;
  font-size:22px!important;
  font-weight:600;
  line-height:1.2;
  letter-spacing:0;
  text-align:left!important;
  text-transform:none;
}
.ms-page-my-photos .entry-content .wp-block-cover .wp-block-button__link::after{content:"";position:absolute;inset:0}
.ms-page-my-photos .entry-content .wp-block-cover .wp-block-button__link:focus-visible{outline:none}
.ms-page-my-photos .entry-content .wp-block-cover:has(.wp-block-button__link:focus-visible){outline:3px solid var(--ms-accent);outline-offset:3px}

/* Sub-pages: back pill and the switch between sibling pages (functions.php). */
.ms-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  max-width:1180px!important;
  margin:40px auto 28px!important;
  padding:0 20px;
  box-sizing:border-box;
}
.ms-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px 10px 12px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.07);
  color:var(--ms-ink)!important;
  font-weight:500;
  font-size:15px;
  text-decoration:none!important;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.ms-back:hover{transform:translateX(-2px);box-shadow:0 1px 2px rgba(0,0,0,.05), 0 18px 40px rgba(0,0,0,.1)}
.ms-back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ms-seg--links{min-width:260px}
.ms-seg--links a{
  position:relative;
  z-index:1;
  padding:9px 20px;
  border-radius:999px;
  color:var(--ms-ink)!important;
  font-size:15px;
  font-weight:500;
  line-height:1.3;
  text-align:center;
  text-decoration:none!important;
  white-space:nowrap;
}
.ms-seg--links a:focus-visible{outline:2px solid var(--ms-accent);outline-offset:2px}

/* Photo Gallery: its styles use ID selectors and print after this file, so
   these match its IDs and add "body" to win. The
   first gallery on a page is always _0. */
/* Section titles: the one repeating the banner's title is hidden; an album's
   own name (after you open it) shows as a heading. */
body #bwg_container1_0 #bwg_container2_0 .bwg_gal_title_0{
  max-width:1180px;
  margin:0 auto 14px;
  padding:0 2px;
  color:var(--ms-ink);
  font-family:inherit;
  font-size:24px;
  font-weight:600;
  line-height:1.3;
  text-align:left;
}
body #bwg_container1_0 #bwg_container2_0 .bwg_gal_title_0:has(+ .bwg-album-thumbnails){display:none}
/* Album tiles and the photos inside albums: layout, sizes, titles and hover
   effects are Photo Gallery's own settings. Only the corners are rounded.
   The doubled class outweighs the plugin's ".bwg-container-0.bwg-album-
   thumbnails .bwg-item0" (radius 0). */
body #bwg_container1_0 #bwg_container2_0 .bwg-container-0.bwg-container-0 .bwg-item0,
body #bwg_container1_0 #bwg_container2_0 .bwg-container-0.bwg-container-0 .bwg-item1{border-radius:12px;overflow:hidden}

@media (max-width:900px){
  .ms-page-my-photos .entry-content{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:12px}
  body.ms-page-my-photos .entry-content .wp-block-cover.wp-block-cover,
  body.ms-page-my-photos .entry-content > .wp-block-columns .wp-block-cover.wp-block-cover{grid-column:span 1}
  body.ms-page-my-photos .entry-content > .wp-block-cover.wp-block-cover:first-child{grid-column:span 2;grid-row:span 1}
}
@media (max-width:560px){
  .ms-page-my-photos .entry-content{margin-top:24px!important;padding:0}
  body.ms-page-my-photos .entry-content .wp-block-cover.wp-block-cover{border-radius:18px!important}
  .ms-page-my-photos .entry-content .wp-block-cover__inner-container{padding:0 14px 12px}
  .ms-page-my-photos .entry-content .wp-block-cover .wp-block-button__link{font-size:17px!important}
  .ms-page-my-photos .entry-content .wp-block-cover .wp-block-buttons::after{top:10px;right:10px;width:32px;height:32px}
  .ms-toolbar{flex-direction:column;align-items:stretch;gap:12px;margin-top:24px!important;padding:0 16px}
  .ms-toolbar .ms-back{align-self:flex-start}
  .ms-seg--links{min-width:0}
}

/* ---- Store and gallery fixes --------------------------------------------- */
/* PhotoBrust's custom.js adds its own +/- to every .quantity; WooCommerce's
   block quantity box already has them, so the two sets overlapped. */
.wc-block-components-quantity-selector .quantity-nav{display:none}

/* ---- Store: shop, categories, product (templates/archive-product.html and
   single-product.html) ----------------------------------------------------- */
/* Pages with the solid header (no banner) start below it, admin bar too. */
.ms-header-wrap:not(.transparent-absolute-header){min-height:calc(118px + var(--wp-admin--admin-bar--height, 0px))}

.ms-store{max-width:1180px;margin:0 auto;padding:36px 20px 96px;box-sizing:border-box;color:var(--ms-ink)}
.ms-store > *{margin-top:0;margin-bottom:0}
.ms-store .woocommerce-breadcrumb,.ms-store .wc-block-breadcrumbs{margin:0 0 22px!important;color:var(--ms-ink-2);font-size:14px}
.ms-store .woocommerce-breadcrumb a,.ms-store .wc-block-breadcrumbs a{color:var(--ms-ink-2);text-decoration:none}
.ms-store .woocommerce-breadcrumb a:hover,.ms-store .wc-block-breadcrumbs a:hover{color:var(--ms-ink)}

/* Cards shared by the shop and the page sections. */
.ms-feature,.ms-buy,.ms-about{background:var(--ms-card);border-radius:22px;box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05)}

/* Blue pill button (Order a print). PhotoBrust gives buttons a frosted
   outline look, hence the overrides. */
.ms-btn-blue .wp-block-button__link{
  display:inline-flex;
  padding:14px 26px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--ms-accent)!important;
  color:#fff!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:0 6px 18px rgba(47,107,255,.28)!important;
  font-size:16px!important;
  font-weight:600;
  text-transform:none!important;
  letter-spacing:0!important;
  transition:transform .15s, filter .2s;
}
.ms-btn-blue .wp-block-button__link:hover{filter:brightness(1.07)}

/* Custom prints feature card: a compact strip above the products (it was
   a half-page panel), photo on the left, text and button beside it. */
.ms-feature{display:grid;grid-template-columns:300px minmax(0,1fr);overflow:hidden;margin:0 0 32px!important}
.ms-feature-pic{position:relative;margin:0!important;min-height:170px}
.ms-feature-pic img{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block}
.ms-feature-text{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:22px 30px}
.ms-feature-text > *{margin:0!important}
.ms-eyebrow{color:var(--ms-accent);font-size:12px!important;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ms-feature-text h2{font-size:22px!important;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ms-ink)}
.ms-feature-text p:not(.ms-eyebrow){color:var(--ms-ink-2);font-size:15px!important;line-height:1.5!important}
.ms-feature-text .wp-block-buttons{margin-top:8px!important}
.ms-feature .ms-btn-blue .wp-block-button__link{padding:10px 20px!important;font-size:15px!important;box-shadow:0 4px 12px rgba(47,107,255,.24)!important}

/* Bar above the grid: count, category chips, sort. */
.ms-shopbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:0 0 22px!important}
.ms-shopbar .wc-block-product-results-count,.ms-shopbar .woocommerce-result-count{margin:0 auto 0 0!important;color:var(--ms-ink-2);font-size:15px}
.ms-chips{margin:0!important}
.ms-chips ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ms-chips li{margin:0;padding:0;list-style:none}
/* WooCommerce's list gives each link 35px of left padding for an empty
   16px marker (.wc-block-product-categories-list li a), which pushed the
   labels off-centre; hence the extra weight here. */
.ms-chips .wc-block-product-categories-list li a{
  display:inline-block;
  padding:8px 16px;
  line-height:20px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 0 0 1px var(--ms-line);
  color:var(--ms-ink)!important;
  font-size:14px;
  font-weight:500;
  text-decoration:none!important;
  transition:background .2s,color .2s;
}
.ms-chips .wc-block-product-categories-list li a::before,
.ms-chips .wc-block-product-categories-list li a::after{display:none}
.ms-chips .wc-block-product-categories-list li a:hover{background:rgba(118,118,128,.1)}
.ms-chips .wc-block-product-categories-list li a[aria-current]{background:var(--ms-ink);color:#fff!important;box-shadow:none}
.ms-chips .wc-block-product-categories-list-item-count{display:none}
/* The group's flow layout puts a 24px block gap above each block after the
   first; in this row it only pushed the sort box down. */
.ms-shopbar > .wc-block-catalog-sorting,
.ms-shopbar .woocommerce-ordering{margin:0!important;position:relative}
.ms-shopbar select.orderby{
  -webkit-appearance:none;
  appearance:none;
  height:auto!important;
  padding:8px 38px 8px 16px!important;
  border:0!important;
  border-radius:999px!important;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") right 12px center/16px no-repeat!important;
  box-shadow:0 0 0 1px var(--ms-line)!important;
  color:var(--ms-ink)!important;
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:500;
  line-height:20px!important;
  cursor:pointer;
}

/* Product cards (shop grid and "More photos"). */
.ms-cards{margin:0!important}
.ms-cards .wc-block-product-template{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0!important;padding:0!important;list-style:none}
.ms-cards .wc-block-product{
  display:flex;
  flex-direction:column;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
  border-radius:22px;
  background:var(--ms-card);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
  text-align:left;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.ms-cards .wc-block-product:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 40px rgba(0,0,0,.09)}
.ms-cards .wc-block-components-product-image{position:relative;margin:0!important;aspect-ratio:4/3;overflow:hidden;background:#0d0f13}
.ms-cards .wc-block-components-product-image a{display:block;height:100%}
.ms-cards .wc-block-components-product-image img{width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ms-cards .wc-block-product:hover .wc-block-components-product-image img{transform:scale(1.04)}
/* "Download" label from WooCommerce's own product type. */
.ms-cards .wc-block-product.downloadable .wc-block-components-product-image::after{
  content:"Download";
  position:absolute;
  top:14px;
  right:14px;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--ms-ink);
  font-size:13px;
  font-weight:500;
  pointer-events:none;
}
.ms-cards .wc-block-components-product-sale-badge{
  position:absolute!important;
  top:14px!important;
  left:14px!important;
  right:auto!important;
  z-index:1;
  margin:0!important;
  padding:5px 12px!important;
  border:0!important;
  border-radius:999px!important;
  background:#ff3b30!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:600!important;
  text-transform:none!important;
}
.ms-card-body{display:flex;flex-direction:column;gap:4px;padding:18px 20px 20px;flex:1}
.ms-card-body > *{margin:0!important}
.ms-card-cats,.ms-card-cats a{color:var(--ms-ink-2)!important;font-size:13px!important;text-decoration:none!important}
.ms-card-body .wp-block-post-title{font-size:18px!important;font-weight:600;line-height:1.3;text-align:left}
.ms-card-body .wp-block-post-title a{color:var(--ms-ink)!important;text-decoration:none!important}
.ms-card-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:auto!important;padding-top:12px}
.ms-card-row > *{margin:0!important}
.ms-store .wc-block-components-product-price{color:var(--ms-ink);font-size:17px!important;font-weight:600;text-align:left!important}
.ms-store .wc-block-components-product-price del{margin-right:6px;color:var(--ms-ink-2);font-weight:400}
.ms-store .wc-block-components-product-price ins{color:#d70015;text-decoration:none}
.ms-card-row .wc-block-components-product-button{width:auto!important;flex:none;margin:0!important;align-items:flex-end}
/* A decorative layer on the button wrapper is 1,000,000px wide and would
   push the button onto its own line. */
.ms-card-row .wc-block-components-product-button::before{display:none!important}
.ms-card-row .wc-block-components-product-button .wp-block-button__link,
.ms-card-row .wc-block-components-product-button__button{
  display:inline-flex;
  align-items:center;
  width:auto!important;
  margin:0!important;
  padding:10px 16px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--ms-ink)!important;
  color:#fff!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  font-size:14px!important;
  font-weight:600!important;
  text-transform:none!important;
  letter-spacing:0!important;
  transition:transform .15s, background .2s;
}
.ms-card-row .wc-block-components-product-button .wp-block-button__link:hover,
.ms-card-row .wc-block-components-product-button__button:hover{background:#000!important}
.ms-card-row .added_to_cart{display:block;margin-top:6px;color:var(--ms-accent)!important;font-size:13px;font-weight:500;text-decoration:none!important}
.ms-store .wp-block-query-pagination{margin-top:32px!important}
.ms-empty{padding:36px 24px;text-align:center;color:var(--ms-ink-2)}

/* Product page: the photo on a white card that matches the buy card beside
   it (the old black frame fought the light page). */
.ms-product{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);gap:32px;align-items:start;margin:0!important}
.ms-stage{display:grid;gap:14px;padding:20px;border-radius:22px;background:var(--ms-card);box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05)}
.ms-stage > *{margin:0!important}
.ms-stage .woocommerce-product-gallery{position:relative;float:none!important;width:100%!important;margin:0!important}
.ms-stage .woocommerce-product-gallery img{border-radius:14px}
/* Every box in the gallery takes the photo's real height, so a height the
   gallery script measured before the image loaded (or before a resize)
   can't let the photo spill over the note below it. */
.ms-stage .woocommerce-product-gallery,.ms-stage .woocommerce-product-gallery__wrapper,.ms-stage .woocommerce-product-gallery .flex-viewport,.ms-stage .woocommerce-product-gallery__image{height:auto!important;max-height:none!important}
.ms-stage .woocommerce-product-gallery__image{border-radius:14px;overflow:hidden}
.ms-stage .woocommerce-product-gallery__image > a,.ms-stage .woocommerce-product-gallery__image img.wp-post-image{display:block;width:100%;height:auto!important}
.ms-stage-note{position:relative;z-index:3}
.ms-stage .woocommerce-product-gallery__trigger{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  left:auto!important;
  z-index:2;
  display:grid!important;
  place-items:center;
  width:44px!important;
  height:44px!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.ms-stage-note{color:var(--ms-ink-2);font-size:12.5px!important;text-align:center}
.ms-buy{position:sticky;top:calc(118px + var(--wp-admin--admin-bar--height, 0px));padding:28px;margin:0!important}
.ms-buy > *{margin-top:0!important;margin-bottom:0!important}
.ms-eyebrow-cats,.ms-eyebrow-cats a{color:var(--ms-ink-2)!important;font-size:13px!important;text-decoration:none!important}
.ms-buy .wp-block-post-title{margin:4px 0 6px!important;font-size:34px!important;font-weight:600;letter-spacing:-.01em;line-height:1.15;color:var(--ms-ink)}
.ms-buy .wc-block-components-product-price{display:block;margin-bottom:14px!important;font-size:24px!important}
.ms-buy .wp-block-woocommerce-product-summary,.ms-buy .wc-block-components-product-summary{margin-bottom:22px!important;color:var(--ms-ink-2)}
.ms-buy .wc-block-components-product-summary p{margin:0}
.ms-buy form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0!important}
.ms-buy .single_add_to_cart_button{
  flex:1;
  min-width:160px;
  margin:0!important;
  padding:15px 26px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--ms-accent)!important;
  color:#fff!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:0 6px 18px rgba(47,107,255,.28)!important;
  font-size:16px!important;
  font-weight:600!important;
  text-transform:none!important;
  letter-spacing:0!important;
  transition:transform .15s, filter .2s;
}
.ms-buy .single_add_to_cart_button:hover{filter:brightness(1.07)}
.ms-buy .single_add_to_cart_button:active{transform:scale(.98)}
.ms-gets{display:grid;gap:12px;margin:22px 0 0!important;padding:18px 0 0!important;border-top:1px solid var(--ms-line);list-style:none;font-size:14.5px}
.ms-gets li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:0}
.ms-gets li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;background:var(--ms-accent);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ms-get-file{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M4 15l4.5-4.5 4 4 3-3L20 16'/%3E%3C/svg%3E")}
.ms-get-time{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l2.5 2'/%3E%3C/svg%3E")}
.ms-get-account{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E")}
.ms-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px!important}
.ms-tags a{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(118,118,128,.12);color:var(--ms-ink)!important;font-size:13px;font-weight:500;text-decoration:none!important}
.ms-tags a:hover{background:rgba(118,118,128,.2)}
.ms-tags .wp-block-post-terms__separator{display:none}
.ms-about{margin:40px 0 0!important;padding:28px 30px}
.ms-about .wc-tabs:not(:has(li + li)){display:none}
.ms-about .woocommerce-Tabs-panel{margin:0!important;padding:0!important;border:0!important}
.ms-about .woocommerce-Tabs-panel h2{margin:0 0 10px;font-size:22px;font-weight:600;color:var(--ms-ink)}
.ms-about .woocommerce-Tabs-panel p{color:var(--ms-ink-2)}
.ms-related-title{margin:48px 0 18px!important;font-size:22px!important;font-weight:600;color:var(--ms-ink)}
.ms-related-title:has(+ .ms-related:not(:has(.wc-block-product))){display:none}

/* ---- Cart (templates/cart.html + WooCommerce's Cart block) ---------------- */
.ms-cart .wp-block-post-content > .wp-block-group{margin:0!important;padding:0!important}
.ms-cart .wp-block-post-content > .wp-block-group > *,.ms-cart .wp-block-post-content > *{max-width:none!important;margin-left:0!important;margin-right:0!important}
.ms-cart .wp-block-woocommerce-cart{max-width:none!important;margin:0!important}
.ms-cart .wc-block-components-sidebar-layout.wc-block-cart{display:grid!important;grid-template-columns:minmax(0,1fr) 360px;gap:0 28px;align-items:start;margin:0!important}
.ms-cart .wc-block-components-sidebar-layout.wc-block-cart > :not(.wc-block-cart__main):not(.wc-block-cart__sidebar){grid-column:1 / -1}
.ms-cart .wc-block-cart__main{grid-column:1}
.ms-cart .wc-block-cart__sidebar{grid-column:2}
.ms-cart .wc-block-cart__main,.ms-cart .wc-block-cart__sidebar{width:auto!important;margin:0!important;padding:0!important}
.ms-cart .wc-block-cart-items,.ms-cart .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block,.ms-cart .wc-block-cart__sidebar{background:var(--ms-card);border-radius:22px;box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05)}
.ms-cart .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block{background:none;box-shadow:none;border-radius:0}
.ms-cart .wc-block-cart-items{display:block;width:100%;margin:0!important;padding:8px 24px;border:0!important;border-collapse:collapse}
.ms-cart .wc-block-cart-items thead{display:none}
.ms-cart .wc-block-cart-items tbody{display:block}
.ms-cart .wc-block-cart-items__row{display:grid!important;grid-template-columns:88px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 0!important;border:0!important}
.ms-cart .wc-block-cart-items__row + .wc-block-cart-items__row{border-top:1px solid var(--ms-line)!important}
.ms-cart .wc-block-cart-items__row > td{display:block;padding:0!important;border:0!important}
.ms-cart .wc-block-cart-item__image img{width:88px!important;height:88px!important;max-width:none!important;border-radius:14px;object-fit:cover;background:#0d0f13}
.ms-cart .wc-block-cart-item__product{min-width:0}
.ms-cart .wc-block-cart-item__wrap{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.ms-cart .wc-block-components-product-name{color:var(--ms-ink)!important;font-size:17px!important;font-weight:600;text-decoration:none!important}
.ms-cart .wc-block-cart-item__prices{color:var(--ms-ink-2);font-size:13.5px}
.ms-cart .wc-block-cart-item__prices .wc-block-components-product-price{font-size:13.5px!important;font-weight:400;color:var(--ms-ink-2)}
.ms-cart .wc-block-components-product-metadata{margin:0 0 8px!important;color:var(--ms-ink-2);font-size:13px}
.ms-cart .wc-block-components-product-metadata p{margin:0}
.ms-cart .wc-block-cart-item__quantity{display:flex;align-items:center;gap:10px}
.ms-cart .wc-block-cart-item__total{align-self:start;text-align:right;font-size:17px;font-weight:600;color:var(--ms-ink)}
.ms-cart .wc-block-cart-item__total .wc-block-components-sale-badge{display:none}
/* The theme sets money amounts to 22px; let them follow their line. */
.ms-cart .wc-block-formatted-money-amount{font-size:inherit!important;font-weight:inherit}
.ms-cart .wc-block-cart-item__remove-link{
  display:grid!important;
  place-items:center;
  width:36px;
  height:36px;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%;
  background:none!important;
  color:var(--ms-ink-2)!important;
  cursor:pointer;
}
.ms-cart .wc-block-cart-item__remove-link:hover{background:rgba(255,59,48,.1)!important;color:#d70015!important}
.ms-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector{grid-template-columns:32px 36px 32px;padding:3px!important}
.ms-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button{width:32px!important;height:32px!important;font-size:17px!important}
.ms-cart .wc-block-cart-item__quantity input.wc-block-components-quantity-selector__input{width:36px!important;height:32px;font-size:15px!important}

/* Summary card. */
.ms-cart .wc-block-cart__sidebar{position:sticky;top:calc(110px + var(--wp-admin--admin-bar--height, 0px));padding:24px!important}
.ms-cart .wc-block-cart__totals-title{margin:0 0 10px!important;padding:0!important;color:var(--ms-ink);font-size:20px!important;font-weight:600;text-align:left!important;text-transform:none!important;letter-spacing:0!important}
.ms-cart .wc-block-components-totals-wrapper{padding:8px 0!important;border:0!important}
.ms-cart .wc-block-components-totals-coupon .wc-block-components-panel__button{margin:0!important;padding:12px 14px!important;border-radius:14px;background:rgba(118,118,128,.08);font-size:14.5px;font-weight:500}
.ms-cart .wc-block-components-totals-coupon .wc-block-components-panel__content{padding:10px 0 0!important}
.ms-cart .wc-block-components-totals-footer-item{margin-top:6px;padding-top:14px;border-top:1px solid var(--ms-line)}
.ms-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.ms-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{color:var(--ms-ink);font-size:19px!important;font-weight:600}
.ms-cart .wc-block-cart__submit{margin:12px 0 0!important}
.ms-cart .wc-block-cart__submit-button{
  width:100%;
  padding:15px 24px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--ms-accent)!important;
  color:#fff!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:0 6px 18px rgba(47,107,255,.28)!important;
  font-size:16px!important;
  font-weight:600!important;
  text-decoration:none!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.ms-cart .wc-block-cart__submit-button:hover{filter:brightness(1.07)}

/* Empty cart: message and a blue "Browse store" button, then WooCommerce's
   "New in store" grid styled like the shop's cards. */
.ms-cart .wp-block-woocommerce-empty-cart-block{padding:0;text-align:center}
.ms-cart .wp-block-woocommerce-empty-cart-block > h2.with-empty-cart-icon{margin:8px 0 18px!important;color:var(--ms-ink);font-size:26px!important;font-weight:600}
.ms-cart .wp-block-woocommerce-empty-cart-block > h2.with-empty-cart-icon::before{display:block;width:56px!important;height:56px!important;margin:0 auto 16px!important;background-color:var(--ms-accent)!important;opacity:1;-webkit-mask-size:contain!important;mask-size:contain!important}
.ms-cart .wp-block-woocommerce-empty-cart-block > p a{
  display:inline-block;
  padding:14px 26px;
  border-radius:999px;
  background:var(--ms-accent);
  color:#fff!important;
  box-shadow:0 6px 18px rgba(47,107,255,.28);
  font-weight:600;
  text-decoration:none!important;
}
.ms-cart .wp-block-woocommerce-empty-cart-block > hr{display:none}
.ms-cart .wp-block-woocommerce-empty-cart-block > h2:not(.with-empty-cart-icon){margin:48px 0 18px!important;color:var(--ms-ink);font-size:22px!important;font-weight:600;text-align:left!important}
.ms-cart .wc-block-grid__products{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0!important;padding:0!important;list-style:none}
.ms-cart .wc-block-grid__product{
  position:relative;
  display:flex;
  flex-direction:column;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0 0 20px!important;
  overflow:hidden;
  border:0!important;
  border-radius:22px;
  background:var(--ms-card);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
  text-align:left;
}
.ms-cart .wc-block-grid__product-link{display:block;color:var(--ms-ink)!important;text-decoration:none!important}
.ms-cart .wc-block-grid__product-image{margin:0!important;aspect-ratio:4/3;overflow:hidden;background:#0d0f13}
.ms-cart .wc-block-grid__product-image img{width:100%;height:100%!important;object-fit:cover}
.ms-cart .wc-block-grid__product-title{margin:0!important;padding:18px 20px 0;font-size:18px!important;font-weight:600;line-height:1.3}
.ms-cart .wc-block-grid__product-price{margin:4px 0 0!important;padding:0 20px;color:var(--ms-ink);font-size:17px!important;font-weight:600}
.ms-cart .wc-block-grid__product-price del{margin-right:6px;color:var(--ms-ink-2);font-weight:400}
.ms-cart .wc-block-grid__product-price ins{color:#d70015;text-decoration:none}
.ms-cart .wc-block-grid__product-add-to-cart{margin:12px 0 0!important;padding:0 20px;text-align:left}
.ms-cart .wc-block-grid__product-add-to-cart::before{display:none!important}
.ms-cart .wc-block-grid__product-add-to-cart .wp-block-button__link{
  display:inline-flex;
  width:auto!important;
  padding:10px 16px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--ms-ink)!important;
  color:#fff!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  font-size:14px!important;
  font-weight:600!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.ms-cart .wc-block-grid__product-onsale{
  position:absolute!important;
  top:14px!important;
  left:14px!important;
  right:auto!important;
  z-index:1;
  margin:0!important;
  padding:5px 12px!important;
  border:0!important;
  border-radius:999px!important;
  background:#ff3b30!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:600!important;
  text-transform:none!important;
}

@media (max-width:900px){
  .ms-cart .wc-block-components-sidebar-layout.wc-block-cart{grid-template-columns:1fr;gap:20px}
  .ms-cart .wc-block-cart__sidebar{grid-column:1}
  .ms-cart .wc-block-grid__products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ms-cart .wc-block-cart__sidebar{position:static}
}
@media (max-width:560px){
  .ms-cart .wc-block-cart-items{padding:4px 16px}
  .ms-cart .wc-block-cart-items__row{grid-template-columns:72px minmax(0,1fr);gap:14px}
  .ms-cart .wc-block-cart-item__image img{width:72px!important;height:72px!important}
  .ms-cart .wc-block-cart-items__row > td.wc-block-cart-item__total{display:none}
  .ms-cart .wc-block-grid__products{grid-template-columns:1fr;gap:18px}
}

/* ---- Checkout (page.html + WooCommerce's Checkout block) -------------------
   From previews/checkout.html. WooCommerce draws the whole block in React, so
   this is styling only; the step numbers are a CSS counter, and the texts
   below (--ms-co-free, --ms-co-get, --ms-co-secure) come from functions.php.
   Stripe's card form is an iframe styled by Stripe; only its box is ours. */
body.woocommerce-checkout{background-color:var(--ms-page)}
/* The theme's 28px page padding on the full-width wrapper, on top of ours,
   squeezed the cards on phones; the block keeps its own 20px/16px. */
body.woocommerce-checkout .wp-block-group.alignfull:has(> .wp-block-woocommerce-checkout){padding-left:0!important;padding-right:0!important}
/* The checkout's banner is PhotoBrust's blue-gradient page header; it gets
   the cart's photo and the site's even tint instead. */
body.woocommerce-checkout .post-header .wp-block-cover{background:#0b1420 url(https://macrostudios.ca/wp-content/uploads/2025/12/ANT_8613-jpg.webp) center 38%/cover!important}
body.woocommerce-checkout .post-header .wp-block-cover__background{background:rgb(6,14,24)!important;opacity:.35!important}
body.woocommerce-checkout .post-header .wp-block-post-title{color:#fff!important}
body.woocommerce-checkout .wp-block-woocommerce-checkout{
  width:auto;
  max-width:1180px!important;
  margin:36px auto 96px!important;
  padding:0 20px!important;
  box-sizing:border-box;
  color:var(--ms-ink);
}
body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:28px;
  align-items:start;
  margin:0!important;
}
body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar{width:auto!important;margin:0!important;padding:0!important}
body.woocommerce-checkout .wc-block-formatted-money-amount{font-size:inherit!important;font-weight:inherit}

/* Progress under the banner title (functions.php adds it on checkout). */
.ms-steps{display:flex;justify-content:center;gap:8px;margin:14px 0 0!important;padding:0;list-style:none;color:#fff;font-size:14px}
.ms-steps li{display:flex;align-items:center;gap:8px;margin:0;opacity:.7}
.ms-steps li + li::before{content:"";width:28px;height:1px;background:rgba(255,255,255,.5)}
.ms-steps li.is-on{opacity:1;font-weight:600}
.ms-steps li.is-done span::before{content:"✓ "}

/* Steps as numbered cards: contact, billing, payment (and the note). */
body.woocommerce-checkout .wc-block-checkout__form{counter-reset:ms-step}
body.woocommerce-checkout .wc-block-checkout__form .wc-block-components-checkout-step{
  position:relative;
  margin:0 0 18px!important;
  padding:24px 26px!important;
  border:0!important;
  border-radius:22px;
  background:var(--ms-card);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
}
body.woocommerce-checkout .wc-block-components-checkout-step::after,
body.woocommerce-checkout .wc-block-components-checkout-step::before{display:none!important}
body.woocommerce-checkout .wc-block-components-checkout-step__heading{display:flex;align-items:center;gap:12px;margin:0 0 16px!important}
body.woocommerce-checkout .wc-block-components-checkout-step__title{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0!important;
  color:var(--ms-ink);
  font-size:19px!important;
  font-weight:600!important;
  line-height:1.3;
  text-transform:none!important;
  letter-spacing:0!important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__title::before{
  counter-increment:ms-step;
  content:counter(ms-step);
  display:grid;
  place-items:center;
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--ms-ink);
  color:#fff;
  font-size:14px;
  font-weight:600;
}
body.woocommerce-checkout .wc-block-components-checkout-step__heading-content{margin-left:auto;font-size:14px}
body.woocommerce-checkout .wc-block-components-checkout-step__heading-content a{color:var(--ms-accent)!important;font-weight:500;text-decoration:none!important}
body.woocommerce-checkout .wc-block-components-checkout-step__container,
body.woocommerce-checkout .wc-block-components-checkout-step__content{padding:0!important;margin:0!important}
body.woocommerce-checkout .wc-block-components-checkout-step__description{margin:-8px 0 14px!important;color:var(--ms-ink-2);font-size:14px}

/* Fields: the sign-in card's look (WooCommerce's floating labels stay). */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-blocks-components-select__container,
body.woocommerce-checkout .wc-block-components-textarea{
  border:1px solid var(--ms-line)!important;
  border-radius:14px!important;
  background-color:#fbfbfd!important;
  color:var(--ms-ink)!important;
  box-shadow:none!important;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
body.woocommerce-checkout .wc-blocks-components-select__select{border:0!important;background:transparent!important;box-shadow:none!important}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-blocks-components-select__container:focus-within,
body.woocommerce-checkout .wc-block-components-textarea:focus{
  outline:none!important;
  border-color:var(--ms-accent)!important;
  box-shadow:0 0 0 4px rgba(47,107,255,.14)!important;
  background-color:#fff!important;
}
body.woocommerce-checkout .wc-block-components-text-input.has-error input,
body.woocommerce-checkout .wc-blocks-components-select.has-error .wc-blocks-components-select__container{border-color:#d70015!important}
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-blocks-components-select__label{color:var(--ms-ink-2)!important}
body.woocommerce-checkout .wc-block-components-address-form__address_2-toggle{color:var(--ms-accent)!important;font-size:14px;font-weight:500;text-decoration:none!important}

/* A saved address: a selected card. */
body.woocommerce-checkout .wc-block-components-address-card{
  padding:16px 18px!important;
  border:2px solid var(--ms-accent)!important;
  border-radius:16px!important;
  background:rgba(47,107,255,.04)!important;
  color:var(--ms-ink);
  line-height:1.5;
}
body.woocommerce-checkout .wc-block-components-address-card address{color:var(--ms-ink-2);font-size:14.5px}
body.woocommerce-checkout .wc-block-components-address-card address .wc-block-components-address-card__address-section:first-child{color:var(--ms-ink);font-size:16px}
body.woocommerce-checkout .wc-block-components-address-card__edit{color:var(--ms-accent)!important;font-size:14px;font-weight:500;text-decoration:none!important;cursor:pointer}

/* Payment choices as cards; the chosen one outlined in blue. */
body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked{border:0!important}
body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after,
body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked::before{display:none!important}
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option{
  margin:0 0 10px;
  border:1px solid var(--ms-line)!important;
  border-radius:16px!important;
  box-shadow:none!important;
  overflow:hidden;
}
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option:only-child{border:2px solid var(--ms-accent)!important;background:rgba(47,107,255,.03)}
body.woocommerce-checkout .wc-block-components-radio-control__option{font-weight:500}
body.woocommerce-checkout .wc-block-components-radio-control__input:checked{border-color:var(--ms-accent)!important}
body.woocommerce-checkout .wc-block-components-radio-control__input:checked::before{background:var(--ms-accent)!important}
body.woocommerce-checkout .wc-block-components-checkbox__input:checked{background:var(--ms-accent)!important;border-color:var(--ms-accent)!important}
body.woocommerce-checkout .wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark{fill:#fff!important}

/* The note: a quiet row. */
body.woocommerce-checkout .wc-block-checkout__form .wc-block-checkout__order-notes{padding:18px 26px!important}
body.woocommerce-checkout .wc-block-checkout__add-note{margin:0!important}
body.woocommerce-checkout .wc-block-checkout__add-note .wc-block-components-checkbox{margin:0!important}
body.woocommerce-checkout .wc-block-checkout__add-note .wc-block-components-checkbox__label{font-weight:500}
body.woocommerce-checkout .wc-block-components-textarea{width:100%;min-height:96px;margin-top:14px;padding:14px 16px!important;font-family:inherit!important;font-size:15px!important;line-height:1.5}

/* Terms and the button: one card (terms on top, the button below). */
body.woocommerce-checkout .wc-block-checkout__terms{
  margin:0!important;
  padding:22px 26px 16px!important;
  border:0!important;
  border-radius:22px 22px 0 0;
  background:var(--ms-card);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
  color:var(--ms-ink-2);
  font-size:14px;
  line-height:1.5;
}
body.woocommerce-checkout .wc-block-checkout__terms a{color:var(--ms-ink)!important;font-weight:500}
body.woocommerce-checkout .wc-block-checkout__actions{
  position:relative;
  z-index:1;
  margin:0!important;
  padding:0 26px 20px!important;
  border-radius:0 0 22px 22px;
  background:var(--ms-card);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
  clip-path:inset(0 -40px -60px -40px);
}
/* No terms block: the button card is whole on its own. */
body.woocommerce-checkout .wc-block-checkout__form:not(:has(.wc-block-checkout__terms)) .wc-block-checkout__actions{padding-top:22px!important;border-radius:22px;clip-path:none}
/* A free order has no payment step: say so at the top of the last card. */
body.woocommerce-checkout .wc-block-checkout__form:not(:has(.wc-block-checkout__payment-method)) .wc-block-checkout__terms::before{
  content:var(--ms-co-free, "");
  display:block;
  margin:0 0 16px;
  padding:14px 16px 14px 50px;
  border-radius:16px;
  background:rgba(52,199,89,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d7a36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E") 16px center/22px no-repeat;
  color:#15632b;
  font-weight:500;
}
body.woocommerce-checkout .wc-block-checkout__actions_row{display:flex;flex-direction:column-reverse;gap:12px;align-items:stretch}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button{
  width:100%;
  min-height:58px;
  padding:14px 24px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--ms-accent)!important;
  color:#fff!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:0 6px 18px rgba(47,107,255,.28)!important;
  font-size:17px!important;
  font-weight:600!important;
  text-transform:none!important;
  letter-spacing:0!important;
  cursor:pointer;
  transition:transform .15s, filter .2s;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover{filter:brightness(1.07)}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:active{transform:scale(.98)}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled{opacity:.6;cursor:default;transform:none}
body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button{align-self:center;color:var(--ms-ink-2)!important;font-size:14px;text-decoration:none!important}
body.woocommerce-checkout .wc-block-checkout__actions::after{
  content:var(--ms-co-secure, "");
  display:block;
  margin:12px 0 0;
  padding-left:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") left center/14px no-repeat;
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  color:var(--ms-ink-2);
  font-size:13px;
}

/* Order summary card. */
body.woocommerce-checkout .wc-block-checkout__sidebar{
  position:sticky!important;
  top:calc(110px + var(--wp-admin--admin-bar--height, 0px));
  padding:24px!important;
  border-radius:22px;
  background:var(--ms-card);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block{border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title{margin:0 0 12px!important;padding:0!important;border:0!important}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text{margin:0!important;color:var(--ms-ink);font-size:20px!important;font-weight:600}
body.woocommerce-checkout .wc-block-components-totals-wrapper{padding:10px 0!important;border:0!important}
body.woocommerce-checkout .wc-block-components-totals-wrapper:empty{display:none}
body.woocommerce-checkout .wc-block-components-order-summary{padding:0!important}
body.woocommerce-checkout .wc-block-components-order-summary__content{padding-bottom:6px;border-bottom:1px solid var(--ms-line)}
body.woocommerce-checkout .wc-block-components-order-summary-item{display:flex;align-items:center;gap:14px;padding:4px 0 12px!important}
body.woocommerce-checkout .wc-block-components-order-summary-item__image{position:relative;flex:none;width:64px!important;padding:0!important}
body.woocommerce-checkout .wc-block-components-order-summary-item__image img{width:64px!important;height:64px!important;max-width:none!important;border-radius:14px;object-fit:cover;background:#0d0f13}
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity{
  top:-7px!important;
  right:-7px!important;
  transform:none!important;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border:0!important;
  border-radius:999px;
  background:var(--ms-ink)!important;
  box-shadow:0 0 0 2px #fff!important;
  color:#fff!important;
  font-size:12px;
  font-weight:600;
  line-height:22px;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__description{flex:1;min-width:0;padding:0!important}
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-name{color:var(--ms-ink);font-size:16px!important;font-weight:600;line-height:1.3}
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices,
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata{color:var(--ms-ink-2);font-size:13px!important}
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price{font-weight:600}
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button{margin:0!important;padding:12px 14px!important;border-radius:14px;background:rgba(118,118,128,.08);font-size:14.5px;font-weight:500}
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__content{padding:10px 0 0!important}
body.woocommerce-checkout .wc-block-components-totals-item{color:var(--ms-ink-2)}
body.woocommerce-checkout .wc-block-components-totals-discount .wc-block-components-totals-item__value{color:#1d7a36;font-weight:500}
body.woocommerce-checkout .wc-block-components-totals-footer-item{padding-top:14px;border-top:1px solid var(--ms-line)}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{color:var(--ms-ink);font-size:20px!important;font-weight:600}
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block::after{
  content:var(--ms-co-get, "");
  display:block;
  margin:16px 0 0;
  padding:14px 14px 14px 42px;
  border-radius:14px;
  background:rgba(47,107,255,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4fc4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") 14px 15px/18px no-repeat;
  color:#1f4fc4;
  font-size:13.5px;
  line-height:1.45;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block:not(:has(.wc-block-components-order-summary-item))::after{display:none}

@media (max-width:900px){
  body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout{grid-template-columns:minmax(0,1fr)}
  body.woocommerce-checkout .wc-block-checkout__sidebar{position:static!important;order:-1}
}
@media (max-width:560px){
  body.woocommerce-checkout .wp-block-woocommerce-checkout{margin-top:24px!important;padding:0 16px!important}
  body.woocommerce-checkout .wc-block-checkout__form .wc-block-components-checkout-step{padding:20px 18px!important}
  body.woocommerce-checkout .wc-block-checkout__form .wc-block-checkout__order-notes{padding:16px 18px!important}
  body.woocommerce-checkout .wc-block-checkout__terms{padding:20px 18px 14px!important}
  body.woocommerce-checkout .wc-block-checkout__actions{padding:0 18px 18px!important}
  .ms-steps{font-size:13px}
  .ms-steps li + li::before{width:16px}
}

/* Quantity: one capsule with round buttons (product page and cart). */
.wc-block-components-quantity-selector{
  display:inline-grid!important;
  grid-template-columns:40px 44px 40px;
  align-items:center;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:4px!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(118,118,128,.12)!important;
  box-shadow:none!important;
}
.wc-block-components-quantity-selector::after{display:none!important}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{
  display:grid;
  place-items:center;
  width:40px!important;
  height:40px!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#fff!important;
  color:var(--ms-ink)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.12)!important;
  font:500 20px/1 inherit!important;
  font-family:inherit!important;
  opacity:1!important;
  cursor:pointer;
  transition:transform .12s, background .2s;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:active{transform:scale(.92)}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled{opacity:.4!important;cursor:default}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
  width:44px!important;
  min-width:0!important;
  height:40px;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  color:var(--ms-ink)!important;
  font:600 16px/1 inherit!important;
  font-family:inherit!important;
  text-align:center;
  -moz-appearance:textfield;
}
.wc-block-components-quantity-selector input::-webkit-inner-spin-button,
.wc-block-components-quantity-selector input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.wc-block-components-quantity-selector input:focus{outline:none}
.wc-block-components-quantity-selector:focus-within{box-shadow:0 0 0 3px rgba(47,107,255,.25)!important}

@media (max-width:960px){
  .ms-cards .wc-block-product-template{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ms-product{grid-template-columns:1fr;gap:20px}
  .ms-buy{position:static;padding:22px}
  .ms-stage{padding:16px}
  .ms-buy .wp-block-post-title{font-size:28px!important}
}
@media (max-width:820px){
  .ms-feature{grid-template-columns:1fr}
  .ms-feature-pic{min-height:0;height:110px}
  .ms-feature-text{padding:16px 20px 20px}
  .ms-feature-text h2{font-size:19px!important}
  .ms-feature-text p:not(.ms-eyebrow):not(:has(a)){display:none}
  .ms-feature .ms-btn-blue .wp-block-button__link{white-space:nowrap}
}
@media (max-width:600px){
  .ms-store{padding:26px 16px 80px}
  .ms-cards .wc-block-product-template{grid-template-columns:1fr;gap:18px}
}

@media (prefers-reduced-motion:reduce){
  .ms-header *,.ms-header *::before,.ms-sheet,.ms-sheet *,.ms-auth *,.ms-dash *{transition-duration:.01ms!important}
}