/* MMI-BUILD: 2026-09-07-polish-v3 */
/*
 * Micro Mania · refinement layer, September 2026.
 *
 * Loads after mmi-home.css, mmi-layout-v2.css and mmi-home-enhancements.css
 * and corrects them rather than being patched into them. Each block names the
 * rule it overrides so the reason is next to the change.
 *
 *   1. The crest — the eagle on a dark shield with an ARGB rim
 *   2. The navigation bar
 *   3. The reviews section
 *   4. Paying — the wallet row on the checkout and the pay screen
 *   5. Phones — the bottom bars, the checkout, tap targets
 *   6. Finish — focus, motion, small consistencies everywhere
 *
 * Phones are most of this shop's visitors, so every block is written for a
 * 375px screen first and widened from there.
 */

.mmi-page{
  --mmi-ease:cubic-bezier(.22,1,.36,1);
  --mmi-glass:linear-gradient(160deg,#15141f,#0d0d15);
  --mmi-edge:rgba(255,255,255,.08);
}


/* =========================================================================
   1. THE CREST

   The old crest painted a light plate and three brush sweeps around the eagle
   with two clip-path pseudo-elements. That is switched off here and the whole
   badge is now one SVG (template-parts/mmi/crest.php): a dark indigo shield
   the eagle actually belongs on, and a thin rim that carries the ARGB light —
   a square of the brand's colours turning slowly under a shield-shaped mask.
   ====================================================================== */

.mmi-page .brand-lockup::before,
.mmi-page .brand-lockup::after,
.mmi-page .brand-lockup:hover::after{content:none;display:none;animation:none}

.mmi-page .site-nav .nav-in .brand-lockup{
  position:relative;display:flex;align-items:center;justify-content:center;
  flex:0 0 84px;width:84px;height:92px;margin:0 0 -24px;
  z-index:3;isolation:isolate;direction:ltr;
}

/* The mark used to be absolutely positioned inside the painted plate. Now it
   is the plate. */
.mmi-page .site-nav .nav-in .brand-lockup .mark{
  position:relative;inset:auto;left:auto;top:auto;transform:none;
  display:block;width:100%;height:100%;margin:0;
  filter:drop-shadow(0 10px 14px rgba(20,12,50,.32)) drop-shadow(0 1px 2px rgba(20,12,50,.25));
  transition:transform .4s var(--mmi-ease),filter .4s ease;
}
.mmi-page .site-nav .nav-in .brand-lockup .mark svg.crest{width:100%;height:100%;display:block;overflow:visible}

.mmi-page .crest{overflow:visible}

/* The rim's colours turn by an animation inside the SVG itself (see
   crest.php); nothing here moves, which is what keeps the shield's edge
   clean on a phone while the keyboard is up. */

/* A pointer over it: the badge lifts a touch. */
@media (hover:hover){
  .mmi-page .brand-lockup:hover .mark{
    transform:translateY(-2px) scale(1.035);
    filter:drop-shadow(0 14px 18px rgba(20,12,50,.36)) drop-shadow(0 0 10px rgba(79,216,224,.32));
  }
}
.mmi-page .brand-lockup:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:14px}

/* The footer wears the same crest, without the white octagon it used to sit in. */
.mmi-page .footer-brand-mark{
  width:66px;height:72px;clip-path:none;background:none;box-shadow:none;
}
.mmi-page .footer-brand-logo{
  width:100%;height:100%;display:block;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(79,216,224,.14));
}
.mmi-page .footer-brand-lockup{padding:8px 20px 8px 10px;gap:14px}
.mmi-page .footer-brand-lockup::after{left:92px}
.mmi-page .footer-brand-copy{padding-bottom:6px}

@media (max-width:760px){
  .mmi-page .footer-brand-mark{width:60px;height:66px}
  .mmi-page .footer-brand-lockup{padding:7px 16px 7px 8px;gap:12px}
  .mmi-page .footer-brand-lockup::after{left:82px}
}


/* =========================================================================
   2. THE NAVIGATION BAR

   The indigo top border becomes the brand's three colours, so the bar and
   the crest on it are visibly the same object. On a phone the search button
   reads "SEARCH" at eight pixels, which nobody can read; it becomes the
   magnifier instead, and keeps its text for screen readers.
   ====================================================================== */

.mmi-page nav.site-nav{
  border-top-color:transparent;
  box-shadow:0 10px 30px -24px rgba(7,7,20,.75),0 1px 0 rgba(45,27,94,.06);
}
.mmi-page nav.site-nav::before{
  content:"";position:absolute;inset:-3px 0 auto;height:3px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--indigo) 0%,#6d3fd6 30%,var(--cyan) 62%,var(--magenta) 100%);
}

.mmi-page .site-nav .search{border-radius:9px}
.mmi-page .site-nav .search-btn{border-radius:0 8px 8px 0}
[dir="rtl"] .mmi-page .site-nav .search-btn{border-radius:8px 0 0 8px}

.mmi-page .site-nav .nav-icon{
  display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  transition:background .18s ease,color .18s ease,transform .18s var(--mmi-ease);
}
@media (hover:hover){
  .mmi-page .site-nav .nav-icon:hover{background:rgba(45,27,94,.07);color:var(--indigo);transform:translateY(-1px)}
}

@media (max-width:620px){
  .mmi-page .site-nav .nav-in .brand-lockup{
    flex:0 0 58px;width:58px;height:66px;margin:0 0 -10px;align-self:center;
  }
  .mmi-page .site-nav .nav-in .brand-lockup .mark,
  .mmi-page .site-nav .nav-in .brand-lockup .mark svg.crest{width:100%;height:100%;margin:0}

  .mmi-page .site-nav .search{height:40px;border-radius:10px}
  .mmi-page .site-nav .search input{font-size:13px;padding-inline:12px 6px}

  /* The magnifier. The word stays in the DOM at zero size for assistive tech. */
  .mmi-page .site-nav .search-btn{
    position:relative;min-width:42px;width:42px;height:40px;min-height:40px;
    font-size:0;letter-spacing:0;color:transparent;
    background:linear-gradient(135deg,#7b2aa9,var(--magenta));
  }
  .mmi-page .site-nav .search-btn::before{
    content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.2'/%3E%3Cpath d='M15.2 15.2L20 20'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  .mmi-page .site-nav .nav-act{gap:5px}
  .mmi-page .site-nav .nav-icon{width:40px;height:40px}
  .mmi-page .site-nav .lang{min-height:40px;border-radius:9px}
  .mmi-page .site-nav .menu-toggle{border-radius:10px}
}

@media (max-width:370px){
  .mmi-page .site-nav .nav-in .brand-lockup{flex:0 0 52px;width:52px;height:60px;margin-bottom:-8px}
  .mmi-page .site-nav .search-btn{min-width:38px;width:38px}
}


/* =========================================================================
   3. THE REVIEWS SECTION

   What was a row of grey boxes becomes a rated summary beside a strip of
   quote cards, with proper controls. The section's own kicker names Google
   before the heading, the score is the largest figure on the panel, and
   "Write a review" is a real button, because a happy customer standing on
   this page is the cheapest review the shop will ever get.

   Every rule here overrides mmi-home-enhancements.css, which styled the
   earlier version of the same class names.
   ====================================================================== */

.mmi-page .mmi-reviews{padding:56px 0 64px}
.mmi-page .mmi-reviews .head h2{position:relative;padding-top:18px}
.mmi-page .mmi-reviews .head h2::before{
  content:"GOOGLE REVIEWS";position:absolute;top:0;inset-inline-start:0;
  font-size:10px;font-weight:850;letter-spacing:.16em;color:var(--cyan);
}
[dir="rtl"] .mmi-page .mmi-reviews .head h2::before{content:"تقييمات Google";letter-spacing:normal;font-size:11.5px}

.mmi-page .mmi-reviews-layout{
  display:grid;grid-template-columns:268px minmax(0,1fr);gap:18px;align-items:stretch;
}

/* ---- The summary panel ---- */
.mmi-page .mmi-reviews-summary{
  position:relative;isolation:isolate;overflow:hidden;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  padding:22px 22px 20px;
  border:1px solid rgba(79,216,224,.22);border-top:1px solid rgba(79,216,224,.22);border-radius:18px;
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(79,216,224,.14),transparent 55%),
    radial-gradient(90% 70% at 0% 100%,rgba(217,47,196,.12),transparent 60%),
    var(--mmi-glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 50px -40px rgba(79,216,224,.7);
  transition:none;transform:none;
}
.mmi-page .mmi-reviews-summary::before{
  inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--cyan),#8b5cf6 55%,var(--magenta));opacity:1;
}
@media (hover:hover){
  .mmi-page .mmi-reviews-summary:hover{transform:none;border-color:rgba(79,216,224,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 50px -40px rgba(79,216,224,.7)}
}

.mmi-page .mmi-review-brand{display:flex;align-items:center;gap:10px;min-height:0;margin-bottom:14px}
.mmi-page .mmi-google-mark{
  display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;
  border-radius:12px;background:#fff;box-shadow:0 8px 20px -12px rgba(0,0,0,.8);
}
.mmi-page .mmi-google-g{
  font-family:Arial,Helvetica,sans-serif;font-size:29px;font-weight:700;line-height:1;
  background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 25% 50%,#fbbc05 50% 75%,#ea4335 75%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mmi-page .mmi-google-word{font-size:15px;font-weight:800;letter-spacing:-.01em;color:#fff}

.mmi-page .mmi-reviews-score{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.mmi-page .mmi-reviews-score-num{
  font-size:46px;font-weight:900;line-height:1;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.mmi-page .mmi-reviews-score .mmi-rating{--star:18px}
.mmi-page .mmi-reviews-score .mmi-rating .mmi-rating-num{display:none}

.mmi-page .mmi-reviews-summary p,
.mmi-page .mmi-reviews-count{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.82)}

.mmi-page .mmi-reviews-actions{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  width:100%;margin-top:auto;padding-top:16px;
}
.mmi-page .mmi-review-write{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:46px;padding:10px 16px;border-radius:12px;
  border:1px solid rgba(79,216,224,.55);
  background:linear-gradient(118deg,rgba(79,216,224,.16),rgba(139,92,246,.14));
  color:#fff;font-size:13px;font-weight:800;letter-spacing:.01em;
  transition:transform .2s var(--mmi-ease),box-shadow .2s ease,background .2s ease;
}
.mmi-page .mmi-review-write svg{width:16px;height:16px;flex:0 0 auto;color:var(--cyan)}
@media (hover:hover){
  .mmi-page .mmi-review-write:hover{
    transform:translateY(-2px);
    background:linear-gradient(118deg,rgba(79,216,224,.26),rgba(139,92,246,.22));
    box-shadow:0 16px 30px -20px rgba(79,216,224,.9);
  }
}
.mmi-page .mmi-review-write:active{transform:translateY(0) scale(.985)}
.mmi-page .mmi-reviews-summary>.mmi-review-link,
.mmi-page .mmi-reviews-actions .mmi-review-link{
  margin:0;min-height:40px;padding:0 4px;font-size:12px;font-weight:700;color:var(--cyan);
  text-decoration:none;
}
.mmi-page .mmi-reviews-actions .mmi-review-link::after{content:" ↗";opacity:.7}
[dir="rtl"] .mmi-page .mmi-reviews-actions .mmi-review-link::after{content:" ↖"}
.mmi-page .mmi-reviews-actions .mmi-review-link:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- The strip ---- */
.mmi-page .mmi-reviews-window{min-width:0;display:flex;flex-direction:column;gap:12px}
.mmi-page .mmi-reviews-track{
  display:flex;gap:14px;align-items:stretch;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:3px 3px 6px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scroll-padding-inline:3px;
}
.mmi-page .mmi-reviews-track::-webkit-scrollbar{display:none;width:0;height:0}
.mmi-page .mmi-reviews-track:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:12px}

.mmi-page .mmi-review-card{
  --tint:var(--cyan);
  position:relative;isolation:isolate;overflow:hidden;min-width:0;
  flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:12px;
  padding:20px 20px 18px;
  border:1px solid var(--mmi-edge);border-radius:18px;
  background:var(--mmi-glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .25s var(--mmi-ease),border-color .25s ease,box-shadow .25s ease;
}
.mmi-page .mmi-review-card::before{
  inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--tint),transparent 85%);opacity:.75;
}
/* The quotation mark, large and faint, in the card's own tint, tucked into
   the bottom corner behind the author row where nothing has to be read
   through it. */
.mmi-page .mmi-review-card::after{
  content:"\201D";position:absolute;z-index:0;bottom:-34px;inset-inline-end:8px;
  font-family:Georgia,"Times New Roman",serif;font-size:116px;line-height:1;font-weight:700;
  color:var(--tint);opacity:.07;pointer-events:none;
}
[dir="rtl"] .mmi-page .mmi-review-card::after{content:"\201C"}
.mmi-page .mmi-review-card>*{position:relative;z-index:1}

@media (hover:hover){
  .mmi-page .mmi-review-card:hover{
    transform:translateY(-3px);
    border-color:color-mix(in srgb,var(--tint) 45%,transparent);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 22px 40px -30px color-mix(in srgb,var(--tint) 70%,transparent);
  }
}
@supports not (color:color-mix(in srgb,red 50%,blue)){
  @media (hover:hover){
    .mmi-page .mmi-review-card:hover{border-color:rgba(79,216,224,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 22px 40px -30px rgba(79,216,224,.7)}
  }
}

.mmi-page .mmi-review-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.mmi-page .mmi-review-card .mmi-rating{--star:15px}
.mmi-page .mmi-review-card .mmi-rating-num{display:none}
.mmi-page .mmi-review-when{font-size:11px;font-weight:600;color:rgba(255,255,255,.62);white-space:nowrap}

.mmi-page .mmi-review-card blockquote{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;
  margin:0;border:0;padding:0;overflow:hidden;overflow-wrap:anywhere;
  font-size:13.5px;line-height:1.75;color:#fff;
  transition:none;
}
.mmi-page .mmi-review-card blockquote p{margin:0}
.mmi-page .mmi-review-card.is-open blockquote{display:block;-webkit-line-clamp:unset;overflow:visible}
.mmi-page .mmi-review-card blockquote img.emoji{display:inline-block;width:1em;height:1em;vertical-align:-.15em;margin:0 .08em}

.mmi-page .mmi-review-more{
  align-self:flex-start;margin:-6px 0 0;padding:6px 0;
  border:0;background:none;color:var(--cyan);
  font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(79,216,224,.4);
}
.mmi-page .mmi-review-more:hover{text-decoration-color:var(--cyan)}

.mmi-page .mmi-review-author{
  display:flex;align-items:center;gap:11px;min-width:0;
  margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);
}
.mmi-page .mmi-review-avatar{
  position:relative;flex:0 0 38px;width:38px;height:38px;overflow:hidden;
  display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(145deg,color-mix(in srgb,var(--tint) 55%,#1a1530),color-mix(in srgb,var(--tint) 20%,#0c0b16));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint) 45%,transparent);
  color:#fff;font-size:15px;font-weight:900;line-height:1;
}
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .mmi-page .mmi-review-avatar{background:linear-gradient(145deg,#2D1B5E,#1a1530);box-shadow:inset 0 0 0 1px rgba(79,216,224,.4)}
}
.mmi-page .mmi-review-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mmi-page .mmi-review-avatar svg{display:none}
.mmi-page .mmi-review-who{display:grid;gap:2px;min-width:0}
.mmi-page .mmi-review-author b{font-size:13px;font-weight:800;overflow-wrap:anywhere;color:#fff}
.mmi-page .mmi-review-author small,
.mmi-page .mmi-review-author time{display:block;margin:0;font-size:11px;color:rgba(255,255,255,.6)}
.mmi-page .mmi-review-gmark{
  margin-inline-start:auto;flex:0 0 auto;
  display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:#fff;color:#4285f4;
  font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:700;line-height:1;
  opacity:.92;
}

/* ---- The controls ---- */
.mmi-page .mmi-reviews-controls{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0;
}
.mmi-page .mmi-reviews-controls[hidden]{display:none}
.mmi-page .mmi-review-control{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;min-width:42px;min-height:42px;padding:0;
  border:1px solid rgba(255,255,255,.14);border-radius:50%;
  background:rgba(255,255,255,.03);color:#fff;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s var(--mmi-ease);
}
.mmi-page .mmi-review-control svg{width:18px;height:18px}
[dir="rtl"] .mmi-page .mmi-review-control svg{transform:scaleX(-1)}
@media (hover:hover){
  .mmi-page .mmi-review-control:hover:not(:disabled){border-color:var(--cyan);background:rgba(79,216,224,.1);transform:translateY(-1px)}
}
.mmi-page .mmi-review-control:active{transform:scale(.95)}
.mmi-page .mmi-review-control:disabled{opacity:.4;cursor:default}

.mmi-page .mmi-reviews-dots{display:flex;align-items:center;gap:6px;margin-inline-end:auto;flex-wrap:wrap}
.mmi-page .mmi-reviews-dots[hidden]{display:none}
.mmi-page .mmi-reviews-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:99px;
  background:rgba(255,255,255,.22);cursor:pointer;
  transition:width .25s var(--mmi-ease),background .2s ease;
}
.mmi-page .mmi-reviews-dot.is-on{width:24px;background:linear-gradient(90deg,var(--cyan),#8b5cf6)}
.mmi-page .mmi-reviews-dot:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.mmi-page .mmi-reviews-status{margin:0;font-size:11px}

/* ---- Empty state ---- */
.mmi-page .mmi-reviews-empty{border-radius:18px;background:var(--mmi-glass)}

/* ---- Widths ---- */
@media (max-width:1050px){
  .mmi-page .mmi-reviews-layout{grid-template-columns:236px minmax(0,1fr)}
  .mmi-page .mmi-review-card{flex-basis:calc((100% - 14px)/2)}
}
@media (max-width:760px){
  .mmi-page .mmi-reviews{padding:44px 0 52px}
  .mmi-page .mmi-reviews-layout{grid-template-columns:minmax(0,1fr);gap:14px}
  .mmi-page .mmi-reviews-summary{
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand brand" "score count" "actions actions";
    align-items:center;gap:8px 14px;padding:18px;
  }
  .mmi-page .mmi-review-brand{grid-area:brand;margin-bottom:2px}
  .mmi-page .mmi-reviews-score{grid-area:score;margin:0}
  .mmi-page .mmi-reviews-count{grid-area:count;text-align:end;font-size:12px}
  .mmi-page .mmi-reviews-summary p{grid-column:auto}
  .mmi-page .mmi-reviews-actions{grid-area:actions;flex-direction:row;align-items:center;justify-content:space-between;padding-top:10px;gap:10px}
  .mmi-page .mmi-review-write{width:auto;flex:1 1 auto;min-height:44px}
  .mmi-page .mmi-reviews-actions .mmi-review-link{flex:0 0 auto;grid-column:auto;grid-row:auto}
  .mmi-page .mmi-reviews-score-num{font-size:40px}
  .mmi-page .mmi-reviews-controls{justify-content:center}
  .mmi-page .mmi-reviews-dots{margin-inline-end:0;justify-content:center}
}
@media (max-width:620px){
  .mmi-page .mmi-review-card{flex-basis:86%;padding:18px 18px 16px}
  .mmi-page .mmi-review-card blockquote{font-size:14px;-webkit-line-clamp:6}
  .mmi-page .mmi-reviews-summary{padding:16px}
  .mmi-page .mmi-google-mark{width:40px;height:40px;flex-basis:40px}
  .mmi-page .mmi-google-g{font-size:26px}
}
@media (max-width:370px){
  .mmi-page .mmi-review-card{flex-basis:90%}
  .mmi-page .mmi-reviews-actions{flex-direction:column;align-items:stretch}
  .mmi-page .mmi-review-write{width:100%}
  .mmi-page .mmi-reviews-actions .mmi-review-link{align-self:center}
}


/* On a narrow phone the score and the count no longer fit side by side, so
   the summary stacks: brand, score, count, buttons. */
@media (max-width:480px){
  .mmi-page .mmi-reviews-summary{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "score" "count" "actions";gap:6px}
  .mmi-page .mmi-reviews-count{text-align:start;font-size:12.5px}
  .mmi-page .mmi-reviews-score{gap:12px}
}


/* =========================================================================
   4. PAYING

   The wallet row on the checkout, and the pay screen the card route hands
   off to. Apple Pay and Google Pay are brands a customer looks for by shape,
   so each chip wears its brand: black for Apple, white for Google. The chips
   are proper tap targets rather than pills of nine-pixel text.
   ====================================================================== */

.mmi-page .pay-wallets{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin:12px -16px -15px;padding:12px 16px 14px;
  border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 13px 13px;
  background:rgba(255,255,255,.028);
}
.mmi-page .pay-wallets-k{
  flex:0 0 100%;margin:0 0 2px;
  font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);
}
[dir="rtl"] .mmi-page .pay-wallets-k{font-size:11px;letter-spacing:normal;text-transform:none}

.mmi-page .pay-wallet{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:8px 16px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s var(--mmi-ease),box-shadow .2s ease;
}
.mmi-page .pay-wallet em{font-style:normal;font-size:12.5px;font-weight:800;color:#fff;white-space:nowrap}
[dir="rtl"] .mmi-page .pay-wallet em{font-size:13px}
.mmi-page .pay-wallet .pay-glyph{width:20px;height:20px;flex:0 0 auto}
@media (hover:hover){
  .mmi-page .pay-wallet:not(.is-unavailable):hover{border-color:rgba(255,255,255,.34);transform:translateY(-1px)}
}
.mmi-page .pay-wallet:active{transform:scale(.97)}
.mmi-page .pay-wallet:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* The plain card, in the route's own cyan when chosen. */
.mmi-page .pay-wallet.is-card .pay-glyph{color:var(--cyan)}
.mmi-page .pay-wallet.is-card.is-on{
  border-color:rgba(79,216,224,.7);background:rgba(79,216,224,.14);
  box-shadow:0 0 0 3px rgba(79,216,224,.12);
}

/* Apple Pay: the black button with the white mark. */
.mmi-page .pay-wallet.is-apple .pay-glyph{color:#fff}
.mmi-page .pay-wallet.is-apple.is-on{
  border-color:#000;background:#000;box-shadow:0 0 0 1.5px rgba(255,255,255,.7),0 0 0 4px rgba(255,255,255,.12);
}

/* Google Pay: the white button. */
.mmi-page .pay-wallet.is-google.is-on{
  border-color:#fff;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18);
}
.mmi-page .pay-wallet.is-google.is-on em{color:#1f1f1f}

/* What this device cannot do stays visible, dimmed, with where it does work. */
.mmi-page .pay-wallet.is-unavailable{
  opacity:.55;cursor:default;border-style:dashed;background:none;
  flex-wrap:wrap;
}
.mmi-page .pay-wallet.is-unavailable:hover{transform:none;border-color:rgba(255,255,255,.16)}
.mmi-page .pay-wallet.is-unavailable::after{
  content:attr(data-why);flex:0 0 100%;
  margin:0;font-size:10px;font-weight:600;color:rgba(255,255,255,.75);white-space:normal;text-align:center;
}
[dir="rtl"] .mmi-page .pay-wallet.is-unavailable::after{font-size:11px}

@media (max-width:620px){
  .mmi-page .pay-wallets{margin:12px -13px -13px;padding:12px 13px 13px;gap:8px}
  .mmi-page .pay-wallet{flex:1 1 calc(50% - 4px);min-height:48px;padding:8px 12px}
  .mmi-page .pay-wallet.is-card{flex-basis:100%}
  .mmi-page .pay-wallet.is-unavailable::after{font-size:10.5px}
}

/* ---- The card option itself, on a phone ---- */
.mmi-page .checkout-choice-title{font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.75)}
.mmi-page .checkout-choice b{font-size:13.5px}
.mmi-page .checkout-choice small{font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.mmi-page .pay-card-note,
.mmi-page .checkout-secure{font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.78)}
.mmi-page .pay-card-amount strong{font-size:20px}
.mmi-page .pay-card-amount em{font-size:10px}
.mmi-page .pay-card-amount i{font-size:11.5px;color:rgba(255,255,255,.72)}

/* ---- The pay screen ---- */
.mmi-page .mmi-pay-methods{
  border-color:rgba(79,216,224,.3);
  background:
    radial-gradient(120% 70% at 100% 0%,rgba(79,216,224,.12),transparent 55%),
    linear-gradient(165deg,#12121c,#0d0d16 62%);
}
/* WooCommerce prints the radio and its label as siblings, so the row is a
   grid: radio in the first column, label in the second, the plugin's box
   underneath spanning both. */
.mmi-page .mmi-pay-methods li.wc_payment_method{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  margin:0 0 10px;padding:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.02);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.mmi-page .mmi-pay-methods li.wc_payment_method>label{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  min-height:56px;margin:0;padding:12px 16px 12px 4px;
  color:#fff;font-size:14px;font-weight:800;cursor:pointer;
}
[dir="rtl"] .mmi-page .mmi-pay-methods li.wc_payment_method>label{padding:12px 4px 12px 16px}
.mmi-page .mmi-pay-methods li.wc_payment_method>.payment_box{grid-column:1/-1}
.mmi-page .mmi-pay-methods li.wc_payment_method input.input-radio{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;margin:0 0 0 16px;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35);border-radius:50%;background:transparent;
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.mmi-page .mmi-pay-methods li.wc_payment_method input.input-radio::before{
  content:"";width:10px;height:10px;border-radius:50%;background:var(--cyan);
  transform:scale(0);transition:transform .18s var(--mmi-ease);
}
[dir="rtl"] .mmi-page .mmi-pay-methods li.wc_payment_method input.input-radio{margin:0 16px 0 0}
.mmi-page .mmi-pay-methods li.wc_payment_method input.input-radio:checked{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(79,216,224,.14)}
.mmi-page .mmi-pay-methods li.wc_payment_method input.input-radio:checked::before{transform:scale(1)}
.mmi-page .mmi-pay-methods li.wc_payment_method input.input-radio:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.mmi-page .mmi-pay-methods li.wc_payment_method:has(input:checked){
  border-color:rgba(79,216,224,.55);
  background:linear-gradient(125deg,rgba(79,216,224,.1),rgba(79,216,224,.02));
  box-shadow:0 0 0 3px rgba(79,216,224,.08);
}
.mmi-page .mmi-pay-methods li.wc_payment_method img{
  height:24px;width:auto;max-width:100%;margin:0 2px;
  padding:2px 6px;border-radius:6px;background:#fff;
}
/* The plugin's own labels can arrive as "Apple Pay (Stripe) by …"; keep the
   row to one tidy line. */
.mmi-page .mmi-pay-methods li.wc_payment_method>label>*{min-width:0}

.mmi-page .mmi-pay-methods .payment_box{
  margin:0;padding:14px 16px 16px;
  border:0;border-top:1px solid rgba(255,255,255,.08);border-radius:0;
  background:rgba(0,0,0,.22);color:#fff;font-size:13px;line-height:1.6;
}
.mmi-page .mmi-pay-methods .payment_box p{margin:0 0 10px}
.mmi-page .mmi-pay-methods .payment_box p:last-child{margin-bottom:0}
.mmi-page .mmi-pay-methods .wc-stripe-gateway-container,
.mmi-page .mmi-pay-methods #wc-stripe-applepay-container,
.mmi-page .mmi-pay-methods #wc-stripe-googlepay-container,
.mmi-page .mmi-pay-methods #wc-stripe-card-element{min-height:48px}
.mmi-page .mmi-pay-methods #wc-stripe-card-element{
  padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#0b0b12;
}
.mmi-page .mmi-pay-methods .StripeElement--focus{border-color:rgba(79,216,224,.6);box-shadow:0 0 0 3px rgba(79,216,224,.1)}
.mmi-page .mmi-pay-methods .StripeElement--invalid{border-color:rgba(255,45,85,.7)}

/* The wallet buttons the plugin mounts into the containers above. */
.mmi-page .mmi-pay-methods apple-pay-button,
.mmi-page .mmi-pay-methods .apple-pay-button,
.mmi-page .mmi-pay-methods .gpay-button,
.mmi-page .mmi-pay-methods .gpay-card-info-container{
  width:100%;max-width:none;min-height:48px;border-radius:12px;
}
.mmi-page .mmi-pay-methods apple-pay-button{--apple-pay-button-height:48px;--apple-pay-button-border-radius:12px;--apple-pay-button-width:100%}

.mmi-page .mmi-pay-submit #place_order{
  min-height:56px;border-radius:14px;font-size:14px;letter-spacing:.02em;
}
.mmi-page .mmi-pay-secure{font-size:12px;color:rgba(255,255,255,.8);border-radius:12px}

/* The plugin's notices, on a dark page. */
.mmi-page.woocommerce-order-pay .woocommerce-error,
.mmi-page.woocommerce-order-pay .woocommerce-notices-wrapper .woocommerce-error,
.mmi-page .mmi-pay-methods .woocommerce-error{
  list-style:none;margin:0 0 14px;padding:12px 14px;
  border:1px solid rgba(255,45,85,.45);border-radius:12px;background:rgba(255,45,85,.1);
  color:#fff;font-size:13px;
}
.mmi-page .mmi-pay-methods li.woocommerce-info{
  padding:14px 16px;border:1px solid rgba(79,216,224,.3);border-radius:12px;background:rgba(79,216,224,.06);color:#fff;font-size:13px;
}

@media (max-width:620px){
  .mmi-page .mmi-pay-methods li.wc_payment_method>label{min-height:54px;padding:11px 14px;font-size:13.5px}
  .mmi-page .mmi-pay-methods .payment_box{padding:13px 14px 14px}
  .mmi-page .mmi-pay-submit #place_order{min-height:54px}
  .mmi-page.woocommerce-order-pay .mmi-simple-head h1{font-size:clamp(28px,8vw,36px)}
}


/* =========================================================================
   5. PHONES

   The two fixed bars, the checkout, and tap targets. Most of the type in
   the phone checkout was set between eight and ten pixels; it is brought up
   to a size a person can read in a shop with the sun on the screen.
   ====================================================================== */

@media (max-width:620px){
  /* The bottom dock. The current page gets a lit pill rather than only a
     colour change, so where you are is clear at a glance. */
  .mmi-page .mobile-dock{
    grid-template-columns:repeat(4,1fr);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(157,112,255,.22);
    background:rgba(9,8,15,.94);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  }
  .mmi-page .mobile-dock a{
    position:relative;min-height:50px;gap:4px;border-radius:12px;
    font-size:10px;font-weight:750;color:rgba(255,255,255,.72);
    transition:color .18s ease,background .18s ease;
  }
  .mmi-page .mobile-dock a.on{
    color:var(--cyan);
    background:linear-gradient(180deg,rgba(79,216,224,.12),rgba(79,216,224,.04));
    box-shadow:inset 0 1px 0 rgba(79,216,224,.18);
  }
  .mmi-page .mobile-dock a.on.dock-build{color:#fff}
  .mmi-page .mobile-dock a:active{transform:scale(.96)}
  .mmi-page .mobile-dock svg{width:21px;height:21px}

  /* The checkout bar above it. */
  .mmi-page .mobile-checkout-bar{
    bottom:calc(62px + env(safe-area-inset-bottom));
    padding:10px 14px;gap:12px;
    border-top:1px solid rgba(79,216,224,.22);
    background:rgba(8,8,14,.94);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    box-shadow:0 -14px 34px -24px rgba(0,0,0,.9);
  }
  .mmi-page .mobile-checkout-bar small{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
  .mmi-page .mobile-checkout-bar strong{font-size:19px;font-weight:900;letter-spacing:-.01em}
  .mmi-page .mobile-checkout-bar button{
    min-height:48px;padding:8px 18px;border-radius:12px;
    font-size:12.5px;font-weight:900;letter-spacing:.02em;
  }
  .mmi-page .checkout-flow{padding-bottom:150px}

  /* The checkout's own type. */
  .mmi-page .checkout-head p{font-size:12.5px;line-height:1.6}
  .mmi-page .checkout-panel-head span,.mmi-page .summary-head span{font-size:10px;letter-spacing:.1em}
  .mmi-page .checkout-panel-head small{font-size:11px}
  .mmi-page .checkout-item-copy small{font-size:10px}
  .mmi-page .checkout-item-copy a{font-size:13px;line-height:1.4}
  .mmi-page .checkout-item-copy strong{font-size:15px}
  .mmi-page .checkout-item-copy em{font-size:10.5px}
  .mmi-page .checkout-qty output,.mmi-page .item-remove{font-size:11px}
  .mmi-page .checkout-qty button{min-width:40px;min-height:40px}
  .mmi-page .checkout-field span{font-size:10.5px;letter-spacing:.09em}
  .mmi-page .checkout-field input,.mmi-page .checkout-field select,.mmi-page .checkout-field textarea{
    min-height:48px;border-radius:12px;font-size:16px;
  }
  .mmi-page .checkout-choice{min-height:0;padding:14px;border-radius:14px}
  .mmi-page .checkout-choices{gap:10px}
  .mmi-page .summary-line,.mmi-page .summary-line b{font-size:13px}
  .mmi-page .summary-total span{font-size:12px}
  .mmi-page .checkout-error,.mmi-page .checkout-success{font-size:12.5px}
  .mmi-page .assembly-option b{font-size:13px}
  .mmi-page .assembly-option small{font-size:11.5px}
  .mmi-page .empty-checkout p{font-size:12.5px}
  .mmi-page .empty-checkout a{font-size:12px}

  /* Sections breathe a little less on a phone, so the page is not mostly gap. */
  .mmi-page section{padding:44px 0}
  .mmi-page h2{font-size:23px}
  .mmi-page .rule{margin:12px 0 18px}
}


/* =========================================================================
   6. FINISH

   Small consistencies everywhere: one focus ring, one card edge, one lift.
   ====================================================================== */

/* Every focusable thing shows the same cyan ring on a keyboard. More
   specific rules above keep their own. */
.mmi-page a:focus-visible,
.mmi-page button:focus-visible,
.mmi-page input:focus-visible,
.mmi-page select:focus-visible,
.mmi-page textarea:focus-visible,
.mmi-page [tabindex]:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* A hairline of light along the top of every panel, so the surfaces read as
   lit from above rather than as flat rectangles. */
.mmi-page .tile,
.mmi-page .why-c,
.mmi-page .shop-product,
.mmi-page .checkout-panel,
.mmi-page .order-summary,
.mmi-page .mmi-pay-order{box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.mmi-page .why-c{border-radius:16px}
.mmi-page .tile{border-radius:14px}

/* Selection colour in the brand. */
.mmi-page ::selection{background:rgba(79,216,224,.35);color:#fff}
.mmi-page nav.site-nav ::selection{background:rgba(45,27,94,.22);color:#11111a}

/* The skip link, visible only when it is the thing focused. */
.mmi-page .mmi-skip:focus{
  position:fixed;top:12px;inset-inline-start:12px;z-index:100;
  padding:10px 14px;border-radius:10px;background:#fff;color:var(--indigo);
  font-weight:800;text-decoration:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
}

/* Motion off for anyone who asked. mmi-home-enhancements.css already stops
   every animation; this names the two new ones so intent is explicit. */
@media (prefers-reduced-motion:reduce){
  .mmi-page .brand-lockup:hover .mark,
  .mmi-page .mmi-review-card:hover,
  .mmi-page .mmi-review-write:hover,
  .mmi-page .pay-wallet:hover{transform:none}
  .mmi-page .mmi-reviews-dot{transition:none}
}


/* =========================================================================
   4b. THE PAY SCREEN, CORRECTED AGAINST THE LIVE ORDER

   Read on a real pending order rather than a mock-up. What was wrong: the
   gateway rows put their radio at the far right because grid auto-placement
   ran the label first (everything is placed explicitly now); the Stripe
   Payment Element sat in a dark box inside another dark box; the card-brand
   strip and the Apple/Google marks wore a white pill they do not need; and
   the amount was a screen away from the card fields on a phone.

   The strip above the form names the amount and the order number first, and
   on a phone the payment panel comes before the item list: the customer
   reviewed the items on the checkout a moment ago.
   ====================================================================== */

/* ---- The strip ---- */
.mmi-page .mmi-pay-intro{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 16px;
  margin:0 0 18px;padding:14px 18px;
  border:1px solid rgba(79,216,224,.24);border-radius:16px;
  background:radial-gradient(120% 90% at 0% 0%,rgba(79,216,224,.14),transparent 55%),var(--mmi-glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.mmi-page .mmi-pay-badge{
  display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:99px;
  border:1px solid rgba(79,216,224,.35);background:rgba(79,216,224,.12);
  color:var(--cyan);font-size:10px;font-weight:850;letter-spacing:.12em;white-space:nowrap;
}
.mmi-page .mmi-pay-badge svg{width:14px;height:14px;flex:0 0 auto}
[dir="rtl"] .mmi-page .mmi-pay-badge{letter-spacing:normal;font-size:11.5px}
.mmi-page .mmi-pay-orderno{font-size:13px;font-weight:700;color:rgba(255,255,255,.75)}
.mmi-page .mmi-pay-due{display:grid;justify-items:end;text-align:end;gap:3px}
.mmi-page .mmi-pay-due small{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65)}
[dir="rtl"] .mmi-page .mmi-pay-due small{letter-spacing:normal;text-transform:none;font-size:11px}
.mmi-page .mmi-pay-due strong{font-size:24px;font-weight:900;line-height:1;color:#fff;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.mmi-page .mmi-pay-due strong .woocommerce-Price-currencySymbol{font-size:.7em;font-weight:800;opacity:.9}
.mmi-page .mmi-pay-due em{font-style:normal;font-size:11px;color:rgba(255,255,255,.65)}

@media (max-width:620px){
  .mmi-page .mmi-pay-intro{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px 14px;margin-bottom:14px}
  .mmi-page .mmi-pay-badge{grid-column:1;grid-row:1;justify-self:start}
  .mmi-page .mmi-pay-orderno{grid-column:1;grid-row:2;font-size:12.5px}
  .mmi-page .mmi-pay-due{grid-column:2;grid-row:1/3}
  .mmi-page .mmi-pay-due strong{font-size:22px}
}

/* ---- Payment first on a phone ---- */
@media (max-width:900px){
  .mmi-page .mmi-pay-grid .mmi-pay-methods{order:-1}
}

/* ---- Items, with pictures ---- */
.mmi-page .mmi-pay-items li{grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 0}
.mmi-page .mmi-pay-item-thumb{
  display:grid;place-items:center;width:46px;height:46px;overflow:hidden;
  border:1px solid rgba(79,216,224,.25);border-radius:10px;background:#f1f3f8;
}
.mmi-page .mmi-pay-item-thumb img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mmi-page .mmi-pay-item-thumb.is-empty{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
.mmi-page .mmi-pay-item-thumb svg{width:20px;height:20px}
.mmi-page .mmi-pay-item-name{font-size:13px;font-weight:700;line-height:1.4}
.mmi-page .mmi-pay-lead{margin:-8px 0 14px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.7)}

/* ---- Gateway rows, placed explicitly ----
   WooCommerce prints input, label, box as siblings. Each is told its cell,
   and the ID in the selector outranks the plugin and WooCommerce rules. */
.mmi-page .mmi-pay-methods #payment li.wc_payment_method{
  display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;
}
.mmi-page .mmi-pay-methods #payment li.wc_payment_method>input.input-radio{
  grid-column:1;grid-row:1;justify-self:center;align-self:center;
  width:20px;height:20px;margin:0;
}
.mmi-page .mmi-pay-methods #payment li.wc_payment_method>label{
  grid-column:2;grid-row:1;display:flex;padding:13px 16px 13px 0;
}
[dir="rtl"] .mmi-page .mmi-pay-methods #payment li.wc_payment_method>label{padding:13px 0 13px 16px}
.mmi-page .mmi-pay-methods #payment li.wc_payment_method>.payment_box{grid-column:1/-1;grid-row:2}

/* The brand marks. The plugin SVGs already carry their white cards, so the
   white pill from the earlier block goes. */
.mmi-page .mmi-pay-methods #payment li.wc_payment_method>label img{
  height:22px;width:auto;max-width:100%;margin:0;padding:0;background:none;border-radius:0;
}
.mmi-page .mmi-pay-methods #payment li.payment_method_stripe_cc>label img{height:20px}
.mmi-page .mmi-pay-methods #payment li.payment_method_stripe_applepay>label img,
.mmi-page .mmi-pay-methods #payment li.payment_method_stripe_googlepay>label img{height:26px;width:auto;max-height:26px}
@media (max-width:620px){
  .mmi-page .mmi-pay-methods #payment li.payment_method_stripe_cc>label img{height:17px}
}

/* ---- The Stripe fields ----
   The Payment Element draws its own labels and inputs in the appearance the
   theme hands it (inc/mmi-checkout-data.php), so nothing is drawn round it.
   The plain Card Element, should the plugin be switched to it, gets the
   site field styling instead. */
.mmi-page .mmi-pay-methods #payment #wc-stripe-card-element,
.mmi-page .mmi-pay-methods #payment #wc-stripe-card-element.payment-type{
  height:auto;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
}
.mmi-page .mmi-pay-methods #payment #wc-stripe-card-element.inline-type,
.mmi-page .mmi-pay-methods #payment #wc-stripe-cc-custom-form .StripeElement{
  height:auto;min-height:50px;padding:15px 14px;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#0B0B12;box-shadow:none;
}
.mmi-page .mmi-pay-methods #payment .StripeElement--focus{border-color:rgba(79,216,224,.65);box-shadow:0 0 0 3px rgba(79,216,224,.14)}
.mmi-page .mmi-pay-methods #payment .StripeElement--invalid{border-color:rgba(255,92,122,.7)}
.mmi-page .mmi-pay-methods .payment_box{padding:14px 16px 16px}
.mmi-page .mmi-pay-methods .wc-stripe-gateway-desc{margin:0 0 12px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.72)}
.mmi-page .mmi-pay-methods .wc-stripe-gateway-desc p{margin:0}
.mmi-page .mmi-pay-methods #payment #wc-stripe-applepay-container,
.mmi-page .mmi-pay-methods #payment #wc-stripe-googlepay-container{min-height:50px}

/* ---- Save to account ---- */
.mmi-page .mmi-pay-methods #payment .woocommerce-SavedPaymentMethods-saveNew{
  display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:0;
}
.mmi-page .mmi-pay-methods #payment .woocommerce-SavedPaymentMethods-saveNew input[type=checkbox]{
  width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--cyan);cursor:pointer;
}
.mmi-page .mmi-pay-methods #payment .woocommerce-SavedPaymentMethods-saveNew label{
  margin:0;font-size:13px;font-weight:600;color:rgba(255,255,255,.85);cursor:pointer;
}

/* ---- Saved cards, for a customer who kept one ---- */
.mmi-page .mmi-pay-methods #payment ul.woocommerce-SavedPaymentMethods{margin:0;padding:0;list-style:none}
.mmi-page .mmi-pay-methods #payment ul.woocommerce-SavedPaymentMethods[data-count="0"]{display:none}
.mmi-page .mmi-pay-methods #payment ul.woocommerce-SavedPaymentMethods .wc-stripe-saved-method,
.mmi-page .mmi-pay-methods #payment ul.woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-new{
  border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);box-shadow:none;color:#fff;
}
.mmi-page .mmi-pay-methods #payment ul.woocommerce-SavedPaymentMethods .wc-stripe-saved-method__title{color:#fff}
.mmi-page .mmi-pay-methods #payment ul.woocommerce-SavedPaymentMethods .wc-stripe-saved-method:has(:checked),
.mmi-page .mmi-pay-methods #payment ul.woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-new:has(:checked){
  border-color:rgba(79,216,224,.65);box-shadow:0 0 0 3px rgba(79,216,224,.12);color:#fff;
}
.mmi-page .mmi-pay-methods #payment ul.woocommerce-SavedPaymentMethods .wc-stripe-saved-method__plus{background:rgba(255,255,255,.14)}

/* ---- Notices, WooCommerce and plugin, on a dark page ---- */
.mmi-page.woocommerce-order-pay .woocommerce-error,
.mmi-page.woocommerce-order-pay .woocommerce-info,
.mmi-page.woocommerce-order-pay .woocommerce-message,
.mmi-page .mmi-pay-methods .woocommerce-error,
.mmi-page .mmi-pay-methods .woocommerce-info{
  position:relative;list-style:none;margin:0 0 16px;padding:12px 14px;
  border-radius:12px;font-size:13px;line-height:1.55;color:#fff;
  border:1px solid rgba(79,216,224,.35);border-inline-start:4px solid var(--cyan);background:rgba(79,216,224,.08);
}
.mmi-page.woocommerce-order-pay .woocommerce-error,
.mmi-page .mmi-pay-methods .woocommerce-error{
  border-color:rgba(255,45,85,.45);border-inline-start-color:#FF2D55;background:rgba(255,45,85,.1);
}
.mmi-page.woocommerce-order-pay .woocommerce-message{
  border-color:rgba(83,224,122,.35);border-inline-start-color:#53E07A;background:rgba(83,224,122,.08);
}
.mmi-page.woocommerce-order-pay .woocommerce-error::before,
.mmi-page.woocommerce-order-pay .woocommerce-info::before,
.mmi-page.woocommerce-order-pay .woocommerce-message::before,
.mmi-page .mmi-pay-methods .woocommerce-error::before,
.mmi-page .mmi-pay-methods .woocommerce-info::before{display:none}
.mmi-page.woocommerce-order-pay .woocommerce-error li,
.mmi-page .mmi-pay-methods .woocommerce-error li{list-style:none;margin:0;padding:0}
.mmi-page.woocommerce-order-pay .woocommerce-error li+li{margin-top:6px}
.mmi-page .mmi-pay-methods .payment_box .woocommerce-error{margin:0 0 12px}

/* ---- Help, one tap away ---- */
.mmi-page .mmi-pay-help{margin:12px 0 0;text-align:center}
.mmi-page .mmi-pay-help a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:8px 16px;border-radius:12px;
  border:1px solid rgba(83,224,122,.28);background:rgba(83,224,122,.08);
  color:#fff;font-size:12.5px;font-weight:700;
  transition:background .2s ease,border-color .2s ease,transform .2s var(--mmi-ease);
}
.mmi-page .mmi-pay-help svg{width:18px;height:18px;flex:0 0 auto;color:#53E07A}
@media (hover:hover){
  .mmi-page .mmi-pay-help a:hover{background:rgba(83,224,122,.14);border-color:rgba(83,224,122,.5);transform:translateY(-1px)}
}

/* ---- While the card is being charged ----
   WooCommerce drops a white overlay with a dark loader on the form. On this
   page that was a white flash and an invisible spinner. */
.mmi-page .blockUI.blockOverlay{
  background:rgba(7,7,13,.74)!important;background-image:none!important;opacity:1!important;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.mmi-page .blockUI.blockOverlay::before{display:none!important}
.mmi-page .blockUI.blockOverlay::after{
  content:"";position:absolute;inset:0;margin:auto;width:32px;height:32px;
  border:3px solid rgba(255,255,255,.18);border-top-color:var(--cyan);border-radius:50%;
  animation:mmiPaySpin .8s linear infinite;
}
@keyframes mmiPaySpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .mmi-page .blockUI.blockOverlay::after{animation:none;border-color:var(--cyan)}
}

/* ---- The button, with the amount on it ---- */
.mmi-page .mmi-pay-submit #place_order{font-size:15px;min-height:58px}
@media (max-width:620px){
  .mmi-page .mmi-pay-submit #place_order{min-height:56px;font-size:14.5px}
}


/* =========================================================================
   7. SEARCH

   The field on a phone, the suggestions under it on every screen, and the
   note the shop shows about what a search found.
   ====================================================================== */

/* ---- The field on a phone ----
   iPhones zoom the whole page when a field with text smaller than 16px is
   focused, and the sticky bar with the crest on it lurched with it. The
   text is 16px now, and the focus ring is drawn inside the box so nothing
   bleeds towards the crest. */
.mmi-page .site-nav .search:focus-within{
  border-color:rgba(45,27,94,.5);
  box-shadow:inset 0 0 0 1.5px rgba(45,27,94,.22);
}
@media (max-width:620px){
  .mmi-page .site-nav .search input{font-size:16px;padding-inline:12px 6px}
}
@media (max-width:370px){
  .mmi-page .site-nav .search input{font-size:16px;padding-inline-start:10px}
}

/* ---- The suggestions ---- */
.mmi-page .site-nav .nav-in{position:relative}
.mmi-page .search-suggest{
  position:absolute;z-index:60;top:calc(100% - 2px);left:12px;right:12px;
  max-height:min(72vh,540px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:6px;border:1px solid rgba(45,27,94,.14);border-radius:14px;
  background:#fff;color:#11111a;text-align:start;
  box-shadow:0 26px 54px -22px rgba(7,7,20,.5),0 2px 8px rgba(7,7,20,.08);
}
.mmi-page .search-suggest[hidden]{display:none}
.mmi-page .suggest-group+.suggest-group{margin-top:4px;padding-top:4px;border-top:1px solid rgba(45,27,94,.08)}
.mmi-page .suggest-label{
  display:block;padding:8px 10px 4px;
  font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#6d6a78;
}
[dir="rtl"] .mmi-page .suggest-label{letter-spacing:normal;text-transform:none;font-size:11px}
.mmi-page .suggest-item{
  display:flex;align-items:center;gap:10px;min-height:50px;padding:6px 10px;border-radius:10px;
  color:#11111a;text-decoration:none;transition:background .15s ease;
}
.mmi-page .suggest-item:hover,.mmi-page .suggest-item.is-active{background:rgba(45,27,94,.07)}
.mmi-page .suggest-item.is-active{box-shadow:inset 0 0 0 1.5px rgba(79,216,224,.7)}
.mmi-page .suggest-thumb{
  width:42px;height:42px;flex:0 0 42px;overflow:hidden;display:grid;place-items:center;
  border:1px solid rgba(45,27,94,.1);border-radius:9px;background:#f1f3f8;
}
.mmi-page .suggest-thumb img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mmi-page .suggest-copy{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.mmi-page .suggest-copy b{
  font-size:13px;font-weight:800;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mmi-page .suggest-copy small{font-size:11px;line-height:1.3;color:#6d6a78}
.mmi-page .suggest-copy mark{background:rgba(79,216,224,.32);color:inherit;border-radius:3px;padding:0 1px}
.mmi-page .suggest-price{flex:0 0 auto;font-size:13px;font-weight:900;color:var(--indigo);white-space:nowrap}
.mmi-page .suggest-item.is-out .suggest-price{color:#8a8794;text-decoration:line-through;text-decoration-thickness:1px}
.mmi-page .suggest-ico{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:9px;
  background:rgba(45,27,94,.06);color:var(--indigo);
}
.mmi-page .suggest-ico svg{width:20px;height:20px}
.mmi-page .suggest-item.is-brand .suggest-ico{background:rgba(217,47,196,.08);color:#a3239a}
.mmi-page .suggest-empty{padding:14px 12px;font-size:13px;color:#6d6a78}
.mmi-page .suggest-all{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;margin:6px 0 0;padding:8px 14px;border-radius:10px;
  background:linear-gradient(110deg,#7b2aa9,var(--magenta));color:#fff;
  font-size:12.5px;font-weight:800;text-decoration:none;
  transition:filter .15s ease;
}
.mmi-page .suggest-all:hover,.mmi-page .suggest-all.is-active{filter:brightness(1.12)}
.mmi-page .suggest-all.is-active{box-shadow:0 0 0 2px rgba(79,216,224,.8)}
@media (max-width:620px){
  .mmi-page .search-suggest{
    top:100%;left:8px;right:8px;border-radius:0 0 16px 16px;
    max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);
  }
  .mmi-page .suggest-item{min-height:54px}
}

/* ---- What the shop found ---- */
.mmi-page .shop-search-note{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 16px;padding:11px 14px;
  border:1px solid rgba(79,216,224,.3);border-radius:12px;background:rgba(79,216,224,.07);
  font-size:13px;line-height:1.5;color:#fff;
}
.mmi-page .shop-search-note[hidden]{display:none}
.mmi-page .shop-search-note svg{width:16px;height:16px;flex:0 0 auto;color:var(--cyan)}
.mmi-page .shop-search-note span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.mmi-page .shop-search-note.is-closest{border-color:rgba(255,190,85,.4);background:rgba(255,190,85,.08)}
.mmi-page .shop-search-note.is-closest svg{color:#FFBE55}
.mmi-page .shop-search-note .note-clear{
  flex:0 0 auto;min-height:36px;padding:6px 12px;border-radius:9px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  color:#fff;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;
}
.mmi-page .shop-search-note .note-clear:hover{border-color:var(--cyan);background:rgba(79,216,224,.1)}