/* Midrange — shared page chrome + generic content (all non-homepage templates).
   Depends on tokens/fonts/nav/footer from home.css (enqueued first). */

/* Force the dark brand base over Go/Elementor page defaults (inner pages only). */
html, body { background: #080808 !important; }
body { color: var(--fg); }
.page-shell { background: #080808; }
/* Kill leftover Popup Maker / snackbar chrome the old pages still emit. */
.snackbar, .snackbar-close, .pum, .pum-overlay, .popmake-overlay,
[id^="popmake-"], [id^="pum-"] { display: none !important; }

/* clear the fixed glass nav, give the page room to breathe */
.page-shell{padding-top:clamp(122px,15vh,176px);padding-bottom:clamp(64px,10vw,120px);min-height:72vh}
.page-shell > .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(20px,5vw,52px)}

/* page header */
.page-head{margin-bottom:clamp(28px,5vw,52px);border-bottom:1px solid #1c1c1f;padding-bottom:clamp(22px,3vw,32px)}
.page-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--faint);margin:0 0 16px}
.page-title{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(38px,6.4vw,74px);line-height:.96;letter-spacing:-.015em;margin:0;color:#fff}
.page-title .pd{color:var(--red)}

/* generic content typography (plain pages + future rebuilt pages) */
.entry-content{font-size:clamp(16px,1.15vw,17.5px);line-height:1.72;color:var(--muted);max-width:74ch;margin-inline:auto}
.entry-content > *:first-child{margin-top:0}
.entry-content > * + *{margin-top:1.15em}
.entry-content h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(23px,2.5vw,34px);line-height:1.04;letter-spacing:-.01em;color:#fff;margin-top:1.9em}
.entry-content h3{font-family:var(--font);font-weight:700;font-size:clamp(18px,1.6vw,21px);color:#fff;margin-top:1.6em}
.entry-content h4,.entry-content h5,.entry-content h6{font-weight:700;color:#fff}
.entry-content a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(209,0,0,.35);transition:color .2s,border-color .2s}
.entry-content a:hover{color:var(--red-hi);border-color:var(--red-hi)}
.entry-content strong,.entry-content b{color:#e6e6e8}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li{margin-top:.5em}
.entry-content li::marker{color:var(--red)}
.entry-content img{max-width:100%;height:auto;border-radius:14px;display:block}
.entry-content blockquote{border-left:2px solid var(--red);padding-left:22px;margin-left:0;color:#cfcfd4}
.entry-content hr{border:none;border-top:1px solid #232326;margin:2.2em 0}
.entry-content table{width:100%;border-collapse:collapse}
.entry-content th,.entry-content td{border:1px solid #232326;padding:10px 14px;text-align:left}

/* Elementor-built pages: let their own sections run full-width until rebuilt */
.page-shell.has-builder > .wrap{max-width:none;padding-inline:0}
.page-shell.has-builder .entry-content{max-width:none;margin:0}

/* WooCommerce shells: dark base now, full polish pass per-template later */
.woocommerce .page-shell .entry-content,
.woocommerce-page .page-shell .entry-content{max-width:none}

/* WooCommerce — interim chrome so shop/product/cart/account are readable on the dark base.
   (Full per-template rebuild — booking pages, beat store, account tabs — comes later.) */
.woo-shell{overflow:hidden}                 /* contain Woo's floated columns so the footer never rides up */
.woo-shell .wrap{max-width:var(--wrap)}
.woo-shell .product_title,
.woo-shell h1.entry-title,
.woo-shell .woocommerce-products-header__title,
.woo-shell .page-title{font-family:var(--disp);font-weight:700;text-transform:uppercase;color:#fff;letter-spacing:-.01em;line-height:1.02}
.woo-shell .price,.woo-shell .amount,.woo-shell .woocommerce-Price-amount{color:var(--red);font-weight:700}
.woo-shell del .amount{color:var(--faint)}
.woo-shell .woocommerce-tabs,.woo-shell .related,.woo-shell .up-sells{margin-top:clamp(40px,6vw,72px);clear:both}
.woo-shell a{color:var(--muted)}
.woo-shell a:hover{color:#fff}
/* !important on font/transform: the Go parent theme ships
   `body.woocommerce-page ... .button.alt{font-family:var(--go-button--font-family);
   text-transform:var(--go-button--text-transform,normal)}` which out-specifies us
   and renders Woo buttons as lowercase Crimson Text (serif). */
.woo-shell .button,.woo-shell button.button,.woo-shell .single_add_to_cart_button{background:var(--red);color:#fff;border:none;border-radius:10px;font-family:var(--font)!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase!important;padding:14px 24px;text-decoration:none!important;transition:.2s}
.woo-shell .button:hover,.woo-shell button.button:hover,.woo-shell .single_add_to_cart_button:hover{background:var(--red-hi);transform:translateY(-2px)}
.woo-shell .woocommerce-product-gallery img{border-radius:16px}

/* ============ ENGINEER / PRODUCT BUTTONS — beat WooCommerce core '.button.alt' purple ============ */
.woo-shell .button.alt,
.woo-shell button.button.alt,
.woo-shell .single_add_to_cart_button,
.woo-shell .single_add_to_cart_button.alt,
.woo-shell ul.products li.product .button,
.woo-shell .add_to_cart_button{ background:var(--red)!important; color:#fff!important; border:none!important; }
.woo-shell .button.alt:hover,
.woo-shell button.button.alt:hover,
.woo-shell .single_add_to_cart_button:hover,
.woo-shell ul.products li.product .button:hover,
.woo-shell .add_to_cart_button:hover{ background:var(--red-hi)!important; }

/* ============ ENGINEER SINGLE PRODUCT (scoped to product_cat-engineers) ============ */
/* app-style: photo wrapped in a red border */
.woo-shell .product_cat-engineers .woocommerce-product-gallery img{
  border:3px solid var(--red); border-radius:20px; box-shadow:0 26px 60px -32px rgba(0,0,0,.75);
}
.woo-shell .product_cat-engineers .summary.entry-summary{ padding-top:6px; }
.woo-shell .product_cat-engineers .product_title{ font-size:clamp(36px,4.6vw,64px); line-height:.94; letter-spacing:-.02em; margin:0 0 8px; }
.woo-shell .product_cat-engineers .summary .price{ font-size:clamp(22px,2.3vw,30px); display:inline-block; margin:6px 0 20px; }
.woo-shell .product_cat-engineers .single_add_to_cart_button{ padding:16px 34px!important; font-size:13px; border-radius:11px; }
.woo-shell .product_cat-engineers .product_meta{ margin-top:24px; padding-top:18px; border-top:1px solid #1d1d20; font-size:12px; letter-spacing:.02em; color:var(--faint); }
.woo-shell .product_cat-engineers .product_meta a{ color:var(--muted); }
.woo-shell .product_cat-engineers .product_meta a:hover{ color:#fff; }

/* description tab body + Instagram link */
.woo-shell .woocommerce-Tabs-panel h2{ font-family:var(--disp); text-transform:uppercase; color:#fff; }
.woo-shell .woocommerce-Tabs-panel p{ color:var(--muted); line-height:1.7; }
.woo-shell .woocommerce-Tabs-panel a{ color:#fff; }

/* the "Message <engineer>" DM button (BP Better Messages, class cute-dm-btn) */
.woo-shell .cute-dm-btn{
  display:inline-flex!important; align-items:center; justify-content:center; gap:8px; margin:8px 0 2px;
  font-family:var(--font); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:12.5px;
  padding:13px 24px; border-radius:11px; background:transparent; color:#fff!important;
  border:1px solid #2e2e2e; text-decoration:none!important; cursor:pointer; transition:.2s;
  white-space:nowrap; /* was wrapping to "MESSAGE / WHITEBOY" in the narrow description card */
}
.woo-shell .cute-dm-btn:hover{ border-color:var(--red); background:#151517; transform:translateY(-2px); }

/* ============================================================================
   ENGINEER BOOKING PAGE — mirrors the app's book-session screen 1:1
   Reference: app/book-session.jsx
     surfaces #000 / card #121212 / border #222 / red #d10000
     CALENDAR SEMANTICS ARE INVERTED vs. stock: RED = OPEN.
     #5c2424 = fully booked · #a1a1a6 = today · #121212 = closed · #444446+white ring = selected
   Scoped to .product-type-booking so engineers AND Room A/B both match the app.
   ========================================================================= */
/* ---- chrome we don't want on booking pages ---- */
.woo-shell .product-navigation-wrapper,                /* Go's breadcrumb + Prev/Next wrapper (reserves ~76px above the product) */
.woo-shell .woocommerce-breadcrumb,                    /* "Private: Beat Store / Engineers / …" */
.woo-shell .product-type-booking ~ .nav-links,
.single-product .woo-shell .nav-links,                 /* Go's Previous / Next product arrows */
.woo-shell .product-type-booking p.price,              /* "From: $150.00" (p.price only — the booking cost is a div) */
.woo-shell .product-type-booking .wlr-product-message, /* WPLoyalty "Purchase & earn 100 points!" */
.woo-shell .product-type-booking .product_meta,        /* "Categories: Engineers, Producers" */
.woo-shell #wc-stripe-express-checkout-element,        /* Apple Pay / Amazon Pay / Link express row */
.woo-shell .wc-stripe-express-checkout-element,
.woo-shell #wc-stripe-express-checkout-element-separator
{ display:none!important; }

/* ---- LIGHT booking page: same white as the Recording page (body.mr-light) ---- */
body.mr-light .page-shell,
body.mr-light .woo-shell{ background:#ffffff; }
/* Booking product page: offset the page to a soft grey so the white header (photo + name)
   reads as a distinct card. Scoped to single-product so the Recording page stays pure white. */
body.single-product.mr-light,
html:has(body.single-product.mr-light){ background:#eceef0 !important; }
body.single-product.mr-light .woo-shell{ background:#eceef0; }
/* only the NAME is a white card; the profile photo sits bare on the grey page */
body.mr-light .product-type-booking > .mr-eng-head{ background:transparent; border:0; box-shadow:none; padding:0; }
body.mr-light .mr-eng-head .summary{
  background:#ffffff; border:1px solid #e2e2e6; border-radius:16px;
  box-shadow:0 26px 56px -40px rgba(18,18,26,.5);
}
body.mr-light .woo-shell .product_title,
body.mr-light .woo-shell h1,body.mr-light .woo-shell h2,body.mr-light .woo-shell h3{ color:#111214; }
body.mr-light .woo-shell .woocommerce-Tabs-panel p{ color:#55565c; }
body.mr-light .woo-shell .woocommerce-Tabs-panel a{ color:#111214; }
body.mr-light .woo-shell .product-type-booking .woocommerce-tabs .wc-tabs{ border-bottom-color:#e6e6e8; }
body.mr-light .woo-shell .product-type-booking .woocommerce-tabs .wc-tabs li a{ color:#9a9b9f!important; }
body.mr-light .woo-shell .product-type-booking .woocommerce-tabs .wc-tabs li.active a{ color:#111214!important; }
body.mr-light .woo-shell .product_meta{ color:#9a9b9f; border-top-color:#e6e6e8; }
body.mr-light .woo-shell .product_meta a{ color:#55565c; }
body.mr-light .woo-shell .product_meta a:hover{ color:#111214; }
body.mr-light .woo-shell a{ color:#55565c; }
body.mr-light .woo-shell a:hover{ color:#111214; }
/* DM button = solid red (it sits inside the dark description card) */
body.mr-light .woo-shell .cute-dm-btn,
.woo-shell .cute-dm-btn{ color:#fff!important; border-color:var(--red)!important; background:var(--red)!important; }
/* center the Message button within the description card (text above stays left) */
.woo-shell .product-type-booking .woocommerce-Tabs-panel .cute-dm-btn{ display:flex!important; width:-moz-fit-content; width:fit-content; margin-left:auto!important; margin-right:auto!important; }
body.mr-light .woo-shell .cute-dm-btn:hover,
.woo-shell .cute-dm-btn:hover{ background:var(--red-hi)!important; border-color:var(--red-hi)!important; }
/* the booking panel stays DARK on white — same move as the Recording bento's black widgets */

/* LAYOUT — two-column booking (centered):
     row 1 →  [ small photo + big NAME ]         (.mr-eng-head, spans full width)
     row 2 →  [ DESCRIPTION ]  │  [ BOOKING ]     info column (desc + track) | full-height card
              [ HEAR THEIR WORK]│  [ CALENDAR ]
   home.js wraps photo+name into .mr-eng-head, description+track into .mr-eng-left, and lifts
   the booking form out to the right grid child. */
.woo-shell .product-type-booking{
  --bk-card:#121212; --bk-border:#222222; --bk-dim:#666666;
  --band-gap:clamp(20px,2.4vw,30px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    "head head"
    "info card";
  gap:var(--band-gap);
  align-items:stretch;
  max-width:1200px; margin-inline:auto;
}
/* header row: bare avatar + white name card (name card fills the rest) */
.woo-shell .product-type-booking > .mr-eng-head{ grid-area:head; display:flex; align-items:stretch; gap:clamp(16px,2vw,28px); }
/* photo card — sizes to the circular avatar + its padding (auto width). !important beats WC's
   `.woocommerce div.product .woocommerce-product-gallery{width:48%}` which is (0,3,1). */
.woo-shell .mr-eng-head .woocommerce-product-gallery{ flex:0 0 auto!important; width:auto!important; margin:0!important; float:none!important; padding:0; display:flex; align-items:center; justify-content:center; }
.woo-shell .mr-eng-head .woocommerce-product-gallery .woocommerce-product-gallery__wrapper{ width:auto!important; margin:0!important; }
.woo-shell .mr-eng-head .woocommerce-product-gallery img{ width:clamp(150px,14vw,178px)!important; height:auto!important; display:block; }
/* the avatar is display only — kill WC's zoom-on-hover, lightbox link, and click/cursor */
.woo-shell .mr-eng-head .woocommerce-product-gallery,
.woo-shell .mr-eng-head .woocommerce-product-gallery a,
.woo-shell .mr-eng-head .woocommerce-product-gallery img{ pointer-events:none!important; cursor:default!important; }
.woo-shell .mr-eng-head .woocommerce-product-gallery__trigger,
.woo-shell .mr-eng-head .zoomImg{ display:none!important; }
/* name card — fills the rest, name vertically centered */
/* !important on padding: WooCommerce/Go ships an asymmetric summary padding (left ~78px / right 0)
   that shoved the centered title ~39px to the right — force it symmetric so the name is truly centered. */
.woo-shell .mr-eng-head .summary{ flex:1 1 auto; min-width:0; margin:0!important; float:none!important; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:clamp(20px,2.6vw,38px)!important; }
/* zero the child margins: the title + hidden price/meta carry bottom margins that get counted in
   the flex column's height, floating the title ~16px ABOVE center. Kill them so it's truly centred. */
.woo-shell .mr-eng-head .summary > *{ margin:0!important; }
/* left info column: description (natural height) + track (fills the rest so it lines up with
   the full-height booking card on the right) */
.woo-shell .product-type-booking > .mr-eng-left{ grid-area:info; display:flex; flex-direction:column; gap:var(--band-gap); min-width:0; }
.woo-shell .mr-eng-left > .woocommerce-tabs{ margin:0!important; flex:0 0 auto; }
.woo-shell .mr-eng-left > .mr-eng-extra{ flex:1 1 auto; }
.woo-shell .product-type-booking > form.cart{ grid-area:card; align-self:stretch; margin:0!important; }
.woo-shell .product-type-booking > .related,
.woo-shell .product-type-booking > .up-sells{ display:none!important; }

/* "Hear them on" box (server-rendered by midrange-engineer-media.php, grid-area:track) */
/* A "HEAR THEM ON" header + a paged CAROUSEL of stacked Spotify players (3 per page, next/
   swipe for more). Each player is an <iframe> (their HTML — we can't restyle inside it), so we
   wrap the set in OUR OWN black card, identical to the Description card. The card is align-self:
   stretch so it always matches the calendar's height, whether the engineer has 0, 1 or many
   links. App-matched shimmer skeletons stand in until each iframe paints. */
.woo-shell .mr-track{
  background:var(--bk-card); border:1px solid var(--bk-border); border-radius:14px;
  padding:clamp(14px,1.5vw,18px); align-self:stretch;
  display:flex; flex-direction:column; justify-content:flex-start;  /* header pinned to top */
}
/* header row: label left, carousel nav right, shared underline + red accent tick */
.woo-shell .mr-track-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative;
  margin:0 0 clamp(12px,1.4vw,16px); padding-bottom:9px; border-bottom:1px solid var(--bk-border);
}
.woo-shell .mr-track-head::after{
  content:""; position:absolute; left:0; bottom:-1px; width:34px; height:2px; background:var(--red);
}
.woo-shell .mr-track-label{
  margin:0; font-family:var(--font-head,var(--font)); font-weight:800; text-transform:uppercase;
  letter-spacing:.09em; font-size:clamp(13px,1.05vw,15px); color:#fff;
}
/* carousel nav (shown by JS only when there's more than one page) */
.woo-shell .mr-track-nav{ display:flex; align-items:center; gap:9px; }
.woo-shell .mr-track-nav[hidden]{ display:none; } /* explicit display beats [hidden]'s UA rule — restore it */
.woo-shell .mr-track-nav button{ background:transparent; border:0; color:#fff; font-size:20px; line-height:1; cursor:pointer; padding:1px 5px; border-radius:8px; }
.woo-shell .mr-track-nav button:disabled{ opacity:.28; cursor:default; }
.woo-shell .mr-track-nav button:not(:disabled):hover{ background:#ffffff14; }
.woo-shell .mr-track-dots{ display:inline-flex; gap:6px; }
.woo-shell .mr-track-dot{ width:7px; height:7px; padding:0; border-radius:50%; border:0; background:#4a4a4e; cursor:pointer; transition:background .2s; }
.woo-shell .mr-track-dot.is-active{ background:var(--red); }
/* viewport clips; rail slides one page-width at a time; each page stacks up to 3 players */
.woo-shell .mr-track-viewport{ flex:1 1 auto; overflow:hidden; }
.woo-shell .mr-track-rail{ display:flex; height:100%; transition:transform .38s cubic-bezier(.4,0,.2,1); }
.woo-shell .mr-track-page{ flex:0 0 100%; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:clamp(10px,1.1vw,14px); }
.woo-shell .mr-track-embed{ position:relative; width:100%; }
.woo-shell .mr-track-embed iframe.mr-spotify{ width:100%!important; border:0; border-radius:10px; display:block; position:relative; z-index:1; }
/* app-matched skeleton: #232327 base with a soft white sweep (1.3s pass + .35s rest ≈ 1.65s) */
.woo-shell .mr-skel{
  background:#232327 linear-gradient(90deg, transparent 0, rgba(255,255,255,.11) 50%, transparent 100%) no-repeat;
  background-size:130px 100%; background-position:-130px 0; border-radius:10px;
  animation:mrShimmer 1.65s ease-in-out infinite;
}
.woo-shell .mr-skel-player{ position:absolute; inset:0; z-index:3; }
.woo-shell .mr-track-embed.mr-loaded .mr-skel-player{ opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s .4s; }
@keyframes mrShimmer{ 0%{ background-position:-130px 0; } 78%,100%{ background-position:calc(100% + 130px) 0; } }
@media (prefers-reduced-motion:reduce){ .woo-shell .mr-skel{ animation:none; } }
/* empty state — engineer hasn't added links yet (card still holds its proper size) */
.woo-shell .mr-track-empty{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:9px; padding:clamp(18px,3vw,34px) 12px; }
.woo-shell .mr-track-empty-mark{ font-size:34px; line-height:1; color:#3a3a3e; }
.woo-shell .mr-track-empty-title{ margin:0; font-family:var(--font-head,var(--font)); font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:14px; color:#cfcfd2; }
.woo-shell .mr-track-empty-sub{ margin:0; font-size:13px; line-height:1.5; color:var(--bk-dim); max-width:34ch; }

/* ============================================================================
   ROOM product pages — same skeleton as the engineer pages, but the header photo
   is a big rectangle (not a round avatar), and the left column shows a PHOTO
   GALLERY + description + gear list instead of the "Hear them on" music box.
   Scoped by body.mr-room-product (set in functions.php from the product category).
   ============================================================================ */
/* rooms have NO header photo — just the name card, sized to match the engineer name card
   (its height comes from the avatar clamp on the engineer pages). */
body.mr-room-product .woo-shell .mr-eng-head .woocommerce-product-gallery{ display:none !important; }
body.mr-room-product .woo-shell .product-type-booking > .mr-eng-head{ min-height:clamp(150px,14vw,178px); }

/* left-column room block = gallery + cards, stacked */
.woo-shell .mr-eng-left > .mr-room{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:clamp(16px,1.8vw,22px); }

/* photo CAROUSEL — one large image per page, SAME look/animation/buttons as "Hear them on".
   Reuses the .mr-track-* carousel (driven by home.js) inside a natural-height card. */
.woo-shell .mr-room-photos{ background:var(--bk-card); border:1px solid var(--bk-border); border-radius:14px; padding:clamp(14px,1.5vw,18px); display:flex; flex-direction:column; }
.woo-shell .mr-room-photos .mr-track-viewport{ flex:0 0 auto; overflow:hidden; border-radius:10px; }
.woo-shell .mr-room-photos .mr-track-page{ display:block; }            /* one image fills the page */
.woo-shell .mr-room-shot{ overflow:hidden; border-radius:10px; background:#0c0c0e; aspect-ratio:16/9; }
.woo-shell .mr-room-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
/* vary the crop per page so the placeholder reads as different shots (real photos replace these) */
.woo-shell .mr-room-photos .mr-track-page:nth-child(1) .mr-room-shot img{ object-position:center; }
.woo-shell .mr-room-photos .mr-track-page:nth-child(2) .mr-room-shot img{ object-position:left center; transform:scale(1.15); }
.woo-shell .mr-room-photos .mr-track-page:nth-child(3) .mr-room-shot img{ object-position:right center; transform:scale(1.15); }

/* room cards (description + gear) — same #121212 card + red-tick label as the rest */
.woo-shell .mr-room-card{ background:var(--bk-card); border:1px solid var(--bk-border); border-radius:14px; padding:clamp(16px,1.6vw,20px); }
.woo-shell .mr-card-label{
  margin:0 0 12px; padding-bottom:9px; position:relative;
  font-family:var(--font-head,var(--font)); font-weight:800; text-transform:uppercase;
  letter-spacing:.09em; font-size:clamp(13px,1.05vw,15px); color:#fff; border-bottom:1px solid var(--bk-border);
}
.woo-shell .mr-card-label::after{ content:""; position:absolute; left:0; bottom:-1px; width:34px; height:2px; background:var(--red); }
.woo-shell .mr-room-desc{ margin:0; color:#aaaaac; font-size:13.5px; line-height:1.6; }
/* IN THE ROOM = the flexible card: it grows/shrinks to fill whatever the carousel + description
   leave, and its 2-column gear grid distributes its rows (align-content) to fill that height. */
.woo-shell .mr-room-gear{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.woo-shell .mr-gear-list{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.woo-shell .mr-room-gear .mr-gear-list{ flex:1 1 auto; align-content:space-between; min-height:0; }
.woo-shell .mr-gear-list li{ position:relative; padding-left:18px; color:#cfcfd2; font-size:12.5px; line-height:1.4; }
.woo-shell .mr-gear-list li::before{ content:""; position:absolute; left:2px; top:6px; width:6px; height:6px; border-radius:50%; background:var(--red); }
@media(max-width:600px){ .woo-shell .mr-gear-list{ grid-template-columns:1fr; } }

/* provider avatar — circular w/ red ring, like the app's providerHeaderImage */
.woo-shell .product-type-booking .woocommerce-product-gallery__wrapper{ margin:0; }
.woo-shell .product-type-booking .woocommerce-product-gallery img{
  border-radius:50%; border:3px solid var(--red); background:#0c0c0e;
  aspect-ratio:1/1; object-fit:cover; width:100%; box-shadow:0 24px 60px -30px rgba(0,0,0,.8);
}
.woo-shell .product-type-booking .woocommerce-product-gallery__trigger{ display:none; } /* zoom loupe: noise */

/* title + role + price — left-aligned like the app's provider card (Go centers the summary) */
.woo-shell .product-type-booking > .summary{ text-align:left; }
.woo-shell .product-type-booking .product_title{ font-size:clamp(28px,3vw,46px); line-height:.98; margin:0; text-align:left; }
.woo-shell .product-type-booking .summary > .price{ font-size:22px; margin:0 0 18px; display:block; text-align:left; }
.woo-shell .product-type-booking .wc_bookings_field_resource label{ text-align:left; }
.woo-shell .product-type-booking .summary > .price .amount{ font-size:26px; }
.woo-shell .product-type-booking .wlr-product-message{ font-size:12px; color:var(--bk-dim); margin:0 0 16px; }

/* ---- the booking panel = the app's dark card stack ----
   NOTE: .wc-bookings-booking-form is a DIV *inside* form.cart, and the Book-now
   button is its SIBLING (not a child) — so the card has to be form.cart for the
   cost + button to sit inside it, the way the app's sticky footer does. */
/* The card is BLACK like the app's safeArea (#000); the panels inside it are the
   #121212 "grey" (calendarGridFrame / dropdownTriggerFieldBox / roomPill). Previously
   this was inverted - a #121212 card with darker panels - which read wrong vs the app. */
.woo-shell .product-type-booking form.cart{
  background:#000000; border:1px solid var(--bk-border); border-radius:14px;
  padding:clamp(16px,1.5vw,22px); margin:0;
  display:flex; flex-direction:column;  /* so the BOOK NOW footer can anchor to the card's bottom edge */
}
.woo-shell .wc-bookings-booking-form{ background:transparent; border:0; padding:0; margin:0; }
/* resource (Room A / Room B) */
.woo-shell .wc-bookings-booking-form .wc_bookings_field_resource{ margin:0 0 18px; }
.woo-shell .wc-bookings-booking-form .wc_bookings_field_resource label{
  display:block; color:var(--bk-dim); font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 10px;
}
.woo-shell .wc-bookings-booking-form select{
  width:100%; background-color:var(--bk-card); color:#fff; border:1px solid var(--bk-border); border-radius:8px;
  padding:14px 42px; text-align:center; font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer;
  appearance:none; -webkit-appearance:none; line-height:1.2; transition:border-color .15s, background-color .15s;
  /* clean chevron-down (Ionicons-style stroke), like the app's dropdownTriggerFieldBox */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:15px;
}
.woo-shell .wc-bookings-booking-form select:hover{ border-color:#3a3a3d; background-color:#161618; }
.woo-shell .wc-bookings-booking-form select:focus{
  outline:none; border-color:var(--red);
  /* chevron turns red on focus to echo the border */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d10000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* the open list — dark to match, where the browser honors option styling (Chrome/FF/Win).
   The native popup's scrollbar / rounded corners / row height are drawn by the OS and can't
   be restyled — only the row colors below are honored, and only on some browsers. */
.woo-shell .wc-bookings-booking-form select option{ background:#161618; color:#fff; padding:10px; text-align:center; }
.woo-shell .wc-bookings-booking-form select option:disabled{ color:#555; }
/* replace the browser's blue "selected" highlight with our red (Chrome/Win + Firefox honor this) */
.woo-shell .wc-bookings-booking-form select option:checked,
.woo-shell .wc-bookings-booking-form select option:hover{
  background:#d10000 linear-gradient(#d10000,#d10000); color:#fff;
}

/* ---- FULLY custom popup on browsers that support the customizable <select> (Chrome 135+).
   `appearance:base-select` keeps this a REAL native <select> (WC's change/booking logic is
   untouched) but lets CSS style the dropdown: a dark rounded panel with a red checkmark, like
   the app's dropdownInlineAccordionWindow. @supports means non-supporting browsers ignore all
   of this and keep the native popup + red-highlight above — zero risk, pure enhancement. */
@supports (appearance: base-select){
  .woo-shell .wc-bookings-booking-form select,
  .woo-shell .wc-bookings-booking-form select::picker(select){ appearance:base-select; }
  .woo-shell .wc-bookings-booking-form select{ background-image:none; justify-content:center; }
  .woo-shell .wc-bookings-booking-form select::picker-icon{
    color:#888; transition:color .2s ease; position:absolute; right:14px;  /* no rotation — just a static caret */
  }
  .woo-shell .wc-bookings-booking-form select:open::picker-icon{ color:var(--red); }
  .woo-shell .wc-bookings-booking-form select::picker(select){
    background:#121214; border:1px solid #26262a; border-radius:12px; padding:6px; margin-top:6px;
    box-shadow:0 24px 60px -24px rgba(0,0,0,.9);
  }
  .woo-shell .wc-bookings-booking-form select option{
    display:flex; align-items:center; justify-content:center; position:relative; padding:11px 12px; border-radius:8px;
    color:#bdbdc2; background:transparent; font-size:13px; font-weight:600; text-align:center;
  }
  .woo-shell .wc-bookings-booking-form select option:hover,
  .woo-shell .wc-bookings-booking-form select option:focus{ background:#1e1e22; color:#fff; }
  .woo-shell .wc-bookings-booking-form select option:checked{ color:#fff; }
  /* checkmark pinned right so it never shifts the centered time label */
  .woo-shell .wc-bookings-booking-form select option::checkmark{ color:var(--red); position:absolute; right:12px; }
}
/* placeholder state (value="0" "Start time"/"End time") reads dimmer, like the app's "Select start" */
.woo-shell .wc-bookings-booking-form select.mr-placeholder{ color:#8a8a8e; font-weight:600; }
/* ENDS disabled until a start is chosen — dim it like the app (opacity 0.3) */
.woo-shell .wc-bookings-booking-form select:disabled{ opacity:.35; cursor:not-allowed; }

/* timezone line — whole line red + centered (app: timezoneLabelText) */
.woo-shell .wc-bookings-date-picker-timezone-block{ margin:0 0 12px; text-align:center; color:var(--red); font-size:12px; font-weight:600; }
.woo-shell .wc-bookings-date-picker-timezone{ color:var(--red); font-size:12px; font-weight:600; }

/* booking CTA: force our type over the Go theme's serif button vars */
.woo-shell .product-type-booking form.cart .wc-bookings-booking-form-button{ font-weight:800!important; }

/* calendar frame */
.woo-shell .wc-bookings-booking-form .picker{
  background:var(--bk-card); border:1px solid var(--bk-border); border-radius:12px; padding:12px;
}
.woo-shell .wc-bookings-booking-form .ui-datepicker{ width:100%; background:transparent; border:0; padding:0; font-family:var(--font); }
/* month header: ‹  MONTH YEAR  › */
.woo-shell .wc-bookings-booking-form .ui-datepicker-header{
  background:transparent; border:0; padding:0 0 12px; display:flex; align-items:center; justify-content:space-between;
}
/* The header carries jQuery-UI's .ui-helper-clearfix, whose :before/:after become FLEX ITEMS
   with default order:0 — they land ahead of the ordered arrows and shove the title ~132px
   off-centre. Killing them lets space-between centre the month label properly. */
.woo-shell .wc-bookings-booking-form .ui-datepicker-header::before,
.woo-shell .wc-bookings-booking-form .ui-datepicker-header::after{ content:none!important; display:none!important; }
.woo-shell .wc-bookings-booking-form .ui-datepicker-title{ order:2; margin:0; color:#fff; font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1; }
.woo-shell .wc-bookings-booking-form .ui-datepicker-prev,
.woo-shell .wc-bookings-booking-form .ui-datepicker-next{
  position:static!important; top:auto!important; left:auto!important; right:auto!important;
  width:36px; height:36px; border-radius:50%; background:var(--bk-card); border:1px solid var(--bk-border);
  display:flex; align-items:center; justify-content:center; cursor:pointer; margin:0; transition:.2s;
}
.woo-shell .wc-bookings-booking-form .ui-datepicker-prev{ order:1; }
.woo-shell .wc-bookings-booking-form .ui-datepicker-next{ order:3; }
.woo-shell .wc-bookings-booking-form .ui-datepicker-prev:hover,
.woo-shell .wc-bookings-booking-form .ui-datepicker-next:hover{ border-color:var(--red); }
.woo-shell .wc-bookings-booking-form .ui-datepicker-prev.ui-state-disabled,
.woo-shell .wc-bookings-booking-form .ui-datepicker-next.ui-state-disabled{ opacity:.25; cursor:default; }
.woo-shell .wc-bookings-booking-form .ui-datepicker-header .ui-icon{ display:none; } /* kill jQuery-UI sprites */
.woo-shell .wc-bookings-booking-form .ui-datepicker-prev::before{ content:'\2039'; color:#fff; font-size:22px; line-height:1; }
.woo-shell .wc-bookings-booking-form .ui-datepicker-next::before{ content:'\203A'; color:#fff; font-size:22px; line-height:1; }

/* grid */
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar{ width:100%; border-collapse:separate; border-spacing:2px; margin:0; }
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar th{
  color:var(--bk-dim); font-size:12px; font-weight:700; padding:0 0 6px; background:transparent; border:0; text-align:center;
}
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td{ padding:0; border:0; background:transparent; }
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td a,
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td span{
  display:flex; align-items:center; justify-content:center; height:40px; padding:0; margin:0;
  border-radius:4px; font-size:13px; font-weight:700; color:#fff; text-align:center;
  background:var(--bk-card); border:1px solid var(--bk-border); text-decoration:none!important; transition:.15s;
}
/* RED = OPEN (the app's signature inversion).
   !important is REQUIRED: WC Bookings' frontend.css ships
   `.wc-bookings-date-picker .ui-datepicker td.bookable a{background:#1f874b!important}` */
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.bookable a{ background:var(--red)!important; border-color:var(--red)!important; color:#fff!important; }
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.bookable a:hover{ background:var(--red-hi)!important; border-color:var(--red-hi)!important; }
/* fully booked */
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.fully_booked a,
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.fully_booked span{ background:#5c2424!important; border-color:#5c2424!important; color:#fff!important; }
/* today */
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.ui-datepicker-today a,
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.ui-datepicker-today span{ background:#a1a1a6!important; border-color:#a1a1a6!important; color:#111214!important; }
/* selected — grey + white ring, beats today/bookable */
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.ui-datepicker-current-day a,
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.ui-datepicker-current-day span{ background:#444446!important; border:1.5px solid #fff!important; color:#fff!important; }
/* closed / not bookable / past */
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.not_bookable a,
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.not_bookable span,
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.ui-state-disabled span,
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.ui-datepicker-unselectable span{
  background:var(--bk-card)!important; border-color:var(--bk-border)!important; color:#4a4a4a!important; text-decoration:line-through;
}
/* PARTIALLY BOOKED — painted by home.js from /midrange/v1/month-availability (the same
   endpoint the app uses). WC Bookings' datepicker has no partial state of its own: its cells
   are only bookable/not_bookable, so without this the site can't show what the app shows.
   App look: red + white border + white corner ribbon (partialIndicatorRibbon). */
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.mr-partial a{
  background:var(--red)!important; border:1px solid #fff!important; position:relative; overflow:hidden;
}
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.mr-partial a::after{
  content:''; position:absolute; bottom:0; right:0; width:0; height:0;
  border-right:14px solid #fff; border-top:14px solid transparent;
}
/* fully booked, per the same endpoint */
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.mr-full a{ background:#5c2424!important; border-color:#5c2424!important; }
/* selected must still beat partial/full */
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.ui-datepicker-current-day.mr-partial a::after{ display:none; }

/* other-month cells = invisible (app: dummy) */
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.ui-datepicker-other-month a,
.woo-shell .wc-bookings-booking-form .ui-datepicker-calendar td.ui-datepicker-other-month span{ background:transparent!important; border-color:transparent!important; color:transparent!important; text-decoration:none; }

/* room pills (injected by home.js) — app: roomPill / roomPillActive */
.woo-shell .mr-room-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.woo-shell .mr-room-pill{
  flex:1 1 0; min-width:110px; background:var(--bk-card); border:1px solid var(--bk-border); border-radius:6px;
  padding:12px 20px; color:#aaa; font-family:var(--font); font-size:13px; font-weight:700;
  cursor:pointer; transition:.18s; text-align:center;
}
.woo-shell .mr-room-pill:hover{ color:#fff; border-color:#3a3a3e; }
.woo-shell .mr-room-pill.is-active{ background:#1a1a1a; border-color:var(--red); color:#fff; }
/* Room B "coming soon" (launch tarp) — visible but muted + non-clickable */
.woo-shell .mr-room-pill.is-soon,
.woo-shell .mr-room-pill.is-soon:hover{ opacity:.6; cursor:not-allowed; color:#888; background:var(--bk-card); border-color:var(--bk-border); }
.woo-shell .mr-soon-tag{ display:block; margin-top:4px; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--red); }

/* legend (injected by home.js) — app: calendarKeyContainer */
.woo-shell .mr-cal-key{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; margin:16px 0 0; }
.woo-shell .mr-cal-key i{ width:14px; height:14px; border-radius:3px; display:block; position:relative; overflow:hidden; }
/* the Partial swatch carries the same corner ribbon as the calendar cell */
.woo-shell .mr-cal-key i em{ position:absolute; bottom:0; right:0; width:0; height:0; border-right:7px solid #fff; border-top:7px solid transparent; }
.woo-shell .mr-cal-key b{ color:#888; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.woo-shell .mr-cal-key span{ display:inline-flex; align-items:center; gap:6px; }

/* month/day/year fallback inputs — redundant next to the calendar */
.woo-shell .wc-bookings-date-picker-date-fields{ display:none; }

/* STARTS / ENDS — side by side, like the app's timeDropdownInputSplitRow.
   Real markup: fieldset.time-picker-fieldset > .block-picker >
   .wc-bookings-start-time-container|.wc-bookings-end-time-container > label + select */
.woo-shell .wc-bookings-booking-form .time-picker-fieldset{ border:0; padding:0; margin:18px 0 0; min-width:0; }
.woo-shell .wc-bookings-booking-form .block-picker{
  display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:0; padding:0; list-style:none;
}
/* explicit placement: auto-flow was dropping both into column 1 (two rows) */
.woo-shell .wc-bookings-booking-form .wc-bookings-start-time-container{ grid-column:1; grid-row:1; min-width:0; }
.woo-shell .wc-bookings-booking-form .wc-bookings-end-time-container{ grid-column:2; grid-row:1; min-width:0; }
/* Go theme paints these labels #13263a (near-invisible on black) */
.woo-shell .wc-bookings-booking-form .block-picker label{
  display:block; color:var(--bk-dim)!important; font-size:11px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; margin:0 0 8px;
}
/* "Choose a date above to see available times." status message — WC Bookings renders it as a
   <p> on first load but an <li> after an AJAX re-render (e.g. switching rooms); the <li> form was
   falling through to Go's near-black default. Force BOTH (and the SR legend) white on EVERY
   product page + state so it can never render dark on the black card. */
.woo-shell .wc-bookings-booking-form .block-picker > p,
.woo-shell .wc-bookings-booking-form .block-picker > li,
.woo-shell .wc-bookings-booking-form .block-picker > legend,
.woo-shell .wc-bookings-booking-form .block-picker .wc-bookings-booking-form-message{ color:#fff!important; font-size:12.5px; font-weight:600; margin:0; padding:0; list-style:none; grid-column:1 / -1; }
.woo-shell .wc-bookings-booking-form .screen-reader-text{ position:absolute!important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }

/* WC Bookings tooltip ("This date is available") — ships as a white box */
#wc-bookings-tooltip{
  background:#1a1a1a!important; color:#fff!important; border:1px solid var(--red)!important;
  border-radius:8px!important; font-family:var(--font); font-size:12px; font-weight:600; padding:8px 12px!important;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.9);
}
#wc-bookings-tooltip:after,#wc-bookings-tooltip:before{ display:none!important; }

/* ---- total + BOOK NOW = the app's sticky footer, inlined (built by home.js) ----
   app: TOTAL DUE (FINAL SALE) + $x on the left, compact red BOOK NOW on the right */
.woo-shell .mr-book-footer{
  display:flex; align-items:center; gap:18px;
  margin:18px 0 0; padding:16px 18px; border-radius:12px;
  background:var(--bk-card); border:1px solid var(--bk-border);
  margin-top:auto;  /* anchor to the card's bottom edge when it stretches taller than its content */
}
/* WC renders: <div.wc-bookings-booking-cost><p.booking-cost-label>Booking cost:
   <strong><span.amount>$300.00</span></strong></p></div>  — the label text lives in the <p>,
   which carries its OWN font-size, so zeroing the wrapper alone doesn't hide it.
   ::before supplies the app's real label. WC owns the inline display until a cost exists. */
.woo-shell .mr-book-footer .wc-bookings-booking-cost{
  margin:0!important; padding:0!important; border:0!important; background:transparent!important;
  line-height:1.15; flex:0 1 auto; min-width:0;
}
.woo-shell .mr-book-footer .wc-bookings-booking-cost .booking-cost-label{
  font-size:0!important; margin:0!important; padding:0!important; line-height:1.1;
}
.woo-shell .mr-book-footer .wc-bookings-booking-cost::before{
  content:'TOTAL DUE (FINAL SALE)'; display:block;
  font-family:var(--font); font-size:10px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bk-dim); margin:0 0 3px;
}
.woo-shell .mr-book-footer .wc-bookings-booking-cost .amount,
.woo-shell .mr-book-footer .wc-bookings-booking-cost .woocommerce-Price-amount{
  font-family:var(--font); font-size:24px!important; font-weight:900!important; color:#fff!important;
}
/* compact CTA, pinned right even when the cost is hidden; arrow mirrors the app's
   <Ionicons name="arrow-forward"> next to BOOK NOW */
.woo-shell .product-type-booking form.cart .wc-bookings-booking-form-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto!important;
  flex:0 0 auto; margin:0 0 0 auto!important; padding:14px 30px!important;
  font-size:14px; letter-spacing:.08em; border-radius:8px; float:none;
}
.woo-shell .product-type-booking form.cart .wc-bookings-booking-form-button::after{
  content:'\2192'; font-size:17px; line-height:1; font-weight:400; transition:transform .18s;
}
.woo-shell .product-type-booking form.cart .wc-bookings-booking-form-button:hover::after{ transform:translateX(3px); }
.woo-shell .product-type-booking form.cart .wc-bookings-booking-form-button.disabled,
.woo-shell .product-type-booking form.cart .wc-bookings-booking-form-button:disabled{ opacity:.4; cursor:not-allowed; transform:none!important; }

/* ---- description = dark-grey card (same #121212 / radius as the booking card) ----
   NB: home.js moves .woocommerce-tabs INTO .summary, so it's no longer a direct child
   of .product-type-booking — target it as a descendant. */
.woo-shell .product-type-booking .woocommerce-tabs{
  background:var(--bk-card); border:1px solid var(--bk-border); border-radius:14px;
  padding:clamp(16px,1.4vw,20px);
}
/* everything inside the card is on dark, so text flips back to light */
body.mr-light .woo-shell .product-type-booking .woocommerce-Tabs-panel p{ color:#aaaaac; }
body.mr-light .woo-shell .product-type-booking .woocommerce-Tabs-panel a:not(.cute-dm-btn){ color:#fff; }
body.mr-light .woo-shell .product-type-booking .woocommerce-tabs .wc-tabs{ border-bottom-color:var(--bk-border); }
body.mr-light .woo-shell .product-type-booking .woocommerce-tabs .wc-tabs li a{ color:var(--bk-dim)!important; }
body.mr-light .woo-shell .product-type-booking .woocommerce-tabs .wc-tabs li.active a{ color:#fff!important; }

/* ALIGNMENT: the Go theme gives prose a ~78px horizontal margin, so the <p>s sat inset from
   the message button (403 vs 325). Flatten every child to one left edge. */
.woo-shell .product-type-booking .woocommerce-Tabs-panel{ padding-top:14px!important; }
.woo-shell .product-type-booking .woocommerce-Tabs-panel > *{
  margin-left:0!important; margin-right:0!important; max-width:none!important;
}
.woo-shell .product-type-booking .woocommerce-Tabs-panel > p{ margin:0 0 10px!important; }
.woo-shell .product-type-booking .woocommerce-Tabs-panel > p:empty{ display:none!important; } /* stray empty <p> */
.woo-shell .product-type-booking .woocommerce-Tabs-panel > :first-child{ margin-top:0!important; }

/* description column (left, under the avatar) */
.woo-shell .product-type-booking .woocommerce-tabs .wc-tabs{ margin:0 0 14px; padding:0; border-bottom:1px solid var(--bk-border); }
.woo-shell .product-type-booking .woocommerce-tabs .wc-tabs li{ background:transparent!important; border:0!important; margin:0; padding:0; }
.woo-shell .product-type-booking .woocommerce-tabs .wc-tabs li a{
  padding:0 0 10px!important; color:var(--bk-dim)!important;
  font-family:var(--font-head,var(--font)); font-size:clamp(13px,1.05vw,15px); /* match "HEAR THEM ON" */
  font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.woo-shell .product-type-booking .woocommerce-tabs .wc-tabs li.active a{ color:#fff!important; box-shadow:inset 0 -2px 0 var(--red); }
.woo-shell .product-type-booking .woocommerce-Tabs-panel > h2{ display:none; } /* redundant "Description" heading */
.woo-shell .product-type-booking .woocommerce-Tabs-panel p{ font-size:14.5px; }

/* mobile: single stack — [photo+name centered] → description → track → booking card */
@media(max-width:780px){
  .woo-shell .product-type-booking{
    grid-template-columns:1fr; max-width:560px; gap:22px;
    grid-template-areas:"head" "info" "card";
  }
  .woo-shell .mr-eng-left > .mr-eng-extra{ flex:0 0 auto; } /* natural height when stacked */
  .woo-shell .product-type-booking > .mr-eng-head{ flex-direction:column; align-items:center; text-align:center; gap:18px; }
  .woo-shell .mr-eng-head .woocommerce-product-gallery{ width:180px!important; margin:0 auto!important; }
  .woo-shell .mr-eng-head .summary{ align-items:center; text-align:center; max-width:100%; }
  .woo-shell .product-type-booking .product_title{ text-align:center; white-space:normal; }
  /* booking footer: shrink the CTA toward the app's size + keep the total on ONE line
     (was rendering "$150.0 / 0" because the amount wrapped in the cramped flex row) */
  .woo-shell .mr-book-footer{ gap:12px; padding:14px 15px; }
  .woo-shell .mr-book-footer .wc-bookings-booking-cost .amount,
  .woo-shell .mr-book-footer .wc-bookings-booking-cost .woocommerce-Price-amount{ font-size:21px!important; white-space:nowrap; }
  .woo-shell .product-type-booking form.cart .wc-bookings-booking-form-button{ padding:12px 20px!important; font-size:13px!important; letter-spacing:.06em; }
  .woo-shell .product-type-booking form.cart .wc-bookings-booking-form-button::after{ font-size:15px; }
}

/* 404 / search */
.mr-utility{text-align:center;padding-block:clamp(40px,8vw,90px)}
.mr-utility .page-title{font-size:clamp(44px,9vw,96px)}
.mr-utility p{color:var(--muted);margin:18px auto 30px;max-width:52ch}
.mr-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:15px 26px;border-radius:10px;background:var(--red);color:#fff;text-decoration:none!important;transition:.22s}
.mr-btn:hover{background:var(--red-hi);transform:translateY(-2px)}

/* ============ SERVICE PAGE — LIGHT (Recording, scoped to page-id-167) ============ */
body.mr-light{ background:#ffffff !important; color:#141416; }
html:has(body.mr-light){ background:#ffffff !important; }
/* ADAPTIVE NAV (site-wide): on light pages the glass nav deepens so links + hamburger
   stay legible; the dark homepage keeps its light frosted glass. Still glassmorphic. */
body.mr-light .nav.glass{ background:rgba(13,13,16,.78); border-color:rgba(255,255,255,.16); }
body.mr-light .nav-links a:not(.nav-account){ color:#e7e7ea; }
body.mr-light .nav-links a:not(.nav-account):hover{ color:#fff; }

.svc{ background:#ffffff; color:#141416; }
.svc-sec{ scroll-margin-top:100px; }

/* page top (title block; clears the fixed nav — replaces the old hero) */
.svc-top{ padding-top:clamp(120px,15vh,168px); padding-bottom:clamp(30px,4vw,50px); border-bottom:1px solid #ececee; text-align:center; }
.svc-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#9a9b9f; margin:0 0 14px; }
.svc-eyebrow.red{ color:var(--red); }
.svc-title{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:clamp(44px,6.6vw,88px); line-height:.9; letter-spacing:-.02em; margin:0; color:#111214; }
.svc-title .pd{ color:var(--red); }
.svc-lead{ font-size:clamp(16px,1.35vw,18.5px); color:#55565c; max-width:60ch; margin:22px auto 0; line-height:1.6; }

/* sections */
.svc-sec{ padding-block:clamp(52px,7vw,96px); }
.svc-sec-alt{ background:#f6f6f7; border-top:1px solid #ececee; border-bottom:1px solid #ececee; }
.svc-head{ max-width:720px; margin:0 auto clamp(28px,4vw,48px); text-align:center; }
.svc-h2{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:clamp(26px,3.2vw,42px); line-height:1; letter-spacing:-.01em; margin:10px 0 0; color:#141416; }
.svc-sub{ font-size:15.5px; color:#55565c; margin:16px auto 0; line-height:1.6; max-width:62ch; }
.svc-note{ font-size:12px; color:#9a9b9f; margin:24px 0 0; }
.svc-callout{ margin:16px auto 0; font-size:13.5px; color:#3a3b40; background:#fdefef; border:1px solid rgba(209,0,0,.25); border-radius:12px; padding:12px 16px; max-width:60ch; }
.svc-callout b{ color:#141416; }

/* engineer cards (BLACK on white page; app-style red-bordered photo) */
.eng-grid{ display:grid; grid-template-columns:repeat(var(--eng-count,4),1fr); gap:16px; }  /* --eng-count is set by the template from the engineer roster (capped at 5) */
.eng-card{ background:#0e0e0f; border:1px solid #1d1d20; border-radius:18px; padding:26px 20px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; box-shadow:0 18px 42px -26px rgba(15,15,20,.55); transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s; }
.eng-card:hover{ transform:translateY(-4px); box-shadow:0 28px 54px -24px rgba(15,15,20,.6); }
.eng-photo{ width:130px; height:130px; border-radius:50%; overflow:hidden; border:2px solid var(--red); box-sizing:border-box; background:radial-gradient(120% 120% at 50% 14%,#1e1e22 0%,#0c0c0e 82%); }
.eng-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
/* Engineer with no headshot yet: a silhouette, not a broken image. Same circle, same red ring. */
.eng-photo-empty{ display:flex; align-items:flex-end; justify-content:center; }
.eng-silhouette{ width:78%; height:78%; fill:#43434b; display:block; }
.eng-name{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:20px; letter-spacing:-.01em; color:#fff; margin:18px 0 0; line-height:1.05; }
.eng-name span{ display:block; font-size:12px; letter-spacing:.02em; color:var(--faint); font-family:var(--font); font-weight:600; margin-top:5px; text-transform:none; }
.eng-role{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:9px 0 18px; }
.btn-block{ width:100%; justify-content:center; }
.eng-card .eng-name{ margin-bottom:18px; }
.eng-card .btn-block{ margin-top:auto; }

/* room A/B tabbed comparison — CENTERED; image stacked on top of the description */
.room-tabs{ max-width:720px; margin:0 auto; text-align:center; }
.room-tabbar{ display:inline-flex; gap:4px; background:#111113; border:1px solid #1d1d20; border-radius:12px; padding:4px; margin:0 auto 22px; }
.room-tab{ font-family:var(--font); font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:transparent; border:none; padding:11px 30px; border-radius:9px; cursor:pointer; transition:color .2s,background .2s; }
.room-tab:hover{ color:#fff; }
.room-tab.is-active{ background:var(--red); color:#fff; }
.room-panel{ background:#0e0e0f; border:1px solid #1d1d20; border-radius:18px; padding:16px; text-align:left; min-height:600px; }
.room-panel[hidden]{ display:none; }
.room-photo{ overflow:hidden; border-radius:14px; background:#000; aspect-ratio:16/9; margin-bottom:20px; }   /* rectangular, no red border, on top */
.room-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.room-body{ padding:2px 6px 8px; }
.room-name{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:28px; letter-spacing:-.01em; color:#fff; margin:0; }
.room-copy{ font-size:14.5px; color:var(--muted); line-height:1.6; margin:12px 0 0; }
.room-gear-label{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:20px 0 12px; }
.room-gear{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:7px 20px; }
.room-gear li{ position:relative; padding-left:15px; font-size:12.5px; color:var(--muted); line-height:1.4; }
.room-gear li::before{ content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--red); }

/* room product cards (booking) — big, ABOVE the comparison widget (original order) */
.room-prod{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:42px; }
.room-prod-card{ background:#0e0e0f; border:1px solid #1d1d20; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 18px 42px -26px rgba(15,15,20,.55); transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s; }
.room-prod-card:hover{ transform:translateY(-4px); border-color:#38383c; box-shadow:0 28px 54px -24px rgba(15,15,20,.6); }
.room-prod-photo{ aspect-ratio:16/10; overflow:hidden; background:#000; }
.room-prod-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.16,1,.3,1); }
.room-prod-card:hover .room-prod-photo img{ transform:scale(1.04); }
.room-prod-body{ padding:24px clamp(20px,2vw,28px) 28px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; }
.room-prod-name{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:30px; letter-spacing:-.01em; color:#fff; margin:0; }

/* intro text block — restored from the original, sits between room cards and the comparison widget */
.room-intro{ max-width:760px; margin:0 auto 44px; text-align:center; }
.room-intro-h{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:clamp(24px,2.8vw,34px); line-height:1.06; letter-spacing:-.01em; color:#141416; margin:0 0 20px; }
.room-intro p{ font-size:15px; color:#55565c; line-height:1.72; margin:0 0 14px; }
.room-intro p:last-child{ margin-bottom:0; }

/* TOP BENTO: [white hero + RED text] (left col) + [black compare + GREY gear] (right col).
   Mobile stack order: white -> red -> black -> grey (DOM order of the two columns). */
.svc-bento-top{ padding-top:clamp(118px,15vh,164px); padding-bottom:clamp(40px,6vw,72px); }
.room-bento{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.bento-left, .bento-right{ display:flex; flex-direction:column; gap:18px; }
/* white hero (no fill) */
.bento-hero{ display:flex; flex-direction:column; justify-content:center; padding:8px; text-align:left; }
.bento-hero .svc-eyebrow{ margin:0 0 12px; }
.bento-hero .svc-title{ font-size:clamp(40px,4.4vw,66px); line-height:.92; margin:0; text-align:left; }
.bento-hero .svc-lead{ margin:16px 0 0; max-width:none; text-align:left; font-size:16px; }
/* RED text box (fills the rest of the left column) */
.room-bento-text{ flex:1; background:var(--red); color:#fff; border-radius:18px; padding:clamp(26px,2.6vw,40px); display:flex; flex-direction:column; justify-content:center; }
.room-bento-text h2{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:clamp(22px,2.3vw,30px); line-height:1.1; letter-spacing:-.01em; margin:0 0 18px; color:#fff; }
.room-bento-text p{ font-size:14.5px; line-height:1.7; margin:0 0 13px; color:#fff; }
.room-bento-text p:last-child{ margin-bottom:0; }
/* Pin stripes bracketing the copy. They are flex items of the column, so flex:0 0 1px keeps them
   a true hairline — without the basis they get squeezed to nothing by justify-content:center. */
.room-bento-text::before,
.room-bento-text::after{ content:""; flex:0 0 1px; height:1px; align-self:stretch; background:#fff; }
.room-bento-text::before{ margin-bottom:clamp(18px,2vw,26px); }
.room-bento-text::after{ margin-top:clamp(18px,2vw,26px); }
/* black compare widget (photo + name + description) */
.room-bento .room-tabs{ max-width:none; margin:0; }
/* stack both room panels in one cell so the black box is always sized to the TALLER room
   (switching A/B never resizes the bento — red box + grey box stay put) */
.room-bento .room-panels{ display:grid; }
.room-bento .room-panels > .room-panel{ grid-area:1 / 1; min-height:0; }
.room-bento .room-panels > .room-panel[hidden]{ display:block; }
.room-bento .room-panels > .room-panel:not(.is-active){ visibility:hidden; }
/* GREY gear box — theme grey; toggles together with the Room A/B pill */
.room-gearbox{ flex:1; display:grid; background:#1a1a1a; border:1px solid #262626; border-radius:18px; padding:clamp(22px,2.2vw,30px); }
.room-gearbox > .gear-panel{ grid-area:1 / 1; min-width:0; }
.room-gearbox > .gear-panel[hidden]{ display:block; }
.room-gearbox > .gear-panel:not(.is-active){ visibility:hidden; }
.room-gearbox .room-gear-label{ margin:0 0 14px; }
.room-gearbox .room-gear{ grid-template-columns:1fr 1fr; }
.room-gearbox .room-gear li{ color:#b0b0b4; }
@media(max-width:900px){ .room-bento{ grid-template-columns:1fr; } .bento-hero{ text-align:center; padding:0 0 4px; } .bento-hero .svc-title{ text-align:center; } .bento-hero .svc-lead{ text-align:center; margin-left:auto; margin-right:auto; } .room-gearbox .room-gear{ grid-template-columns:1fr; } }

@media(max-width:760px){ .room-gear{ grid-template-columns:1fr; } .room-panel{ min-height:0; } .room-prod{ grid-template-columns:1fr; } }

@media(max-width:1180px){ .eng-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:1000px){ .eng-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .room-grid{ grid-template-columns:1fr; } .eng-photo{ width:112px; height:112px; } }
@media(max-width:420px){ .eng-grid{ grid-template-columns:1fr; } }

/* ============================================================================
   CART page (body.woocommerce-cart) — restyle WooCommerce defaults to the
   homepage/app system: matte black, #121212 cards, #d10000 red CTAs. The shell
   (black bg, "CART." title, footer) is already themed; this fixes the guts.
   RESTYLE ONLY — no cart logic touched. Ref: homepage .btn-red + product cards.
   ============================================================================ */
/* --- primary CTAs = red (homepage .btn-red): Proceed to checkout, Book a Session --- */
body.woocommerce-cart .woocommerce a.button,
body.woocommerce-cart .woocommerce button.button,
body.woocommerce-cart .woocommerce input.button,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart .cart-empty-block a.button,
body.woocommerce-cart .return-to-shop a.button{
  background:#d10000 !important; color:#fff !important; border:0 !important; border-radius:10px !important;
  padding:15px 26px !important; font-family:var(--font) !important; font-weight:700 !important;
  font-size:12.5px !important; text-transform:uppercase !important; letter-spacing:1px !important;
  box-shadow:none !important; cursor:pointer; width:auto; transition:transform .12s ease, background .2s ease;
}
body.woocommerce-cart .woocommerce a.button:hover,
body.woocommerce-cart .woocommerce button.button:hover,
body.woocommerce-cart .woocommerce input.button:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{ background:#b60000 !important; transform:translateY(-1px); }
/* --- secondary = dark ghost: Update cart, Continue shopping --- */
body.woocommerce-cart .woocommerce button[name="update_cart"],
body.woocommerce-cart .woocommerce input[name="update_cart"],
body.woocommerce-cart .woocommerce-message a.button{
  background:#141414 !important; color:#fff !important; border:1px solid #2c2c2e !important;
}
body.woocommerce-cart .woocommerce button[name="update_cart"]:hover,
body.woocommerce-cart .woocommerce-message a.button:hover{ background:#1c1c1e !important; transform:translateY(-1px); }
body.woocommerce-cart .woocommerce button[name="update_cart"][disabled],
body.woocommerce-cart .woocommerce button[name="update_cart"]:disabled{ opacity:.4 !important; }

/* --- notices: WC message + WPLoyalty points boxes → dark cards (keep accent text) --- */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .wlr-message-info,
body.woocommerce-cart div[class*="wlr_point"]{
  background:#101012 !important; border:1px solid #222 !important; border-radius:12px !important;
  color:#dcdcdf !important; box-shadow:none !important;
}
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before{ color:#d10000 !important; }

/* --- prices + totals: readable (were dim blue) --- */
body.woocommerce-cart .woocommerce .cart .product-price .amount,
body.woocommerce-cart .woocommerce .cart .product-subtotal .amount,
body.woocommerce-cart .cart_totals .amount,
body.woocommerce-cart .woocommerce-Price-amount{ color:#fff !important; }
body.woocommerce-cart .cart_totals .order-total th{ color:#fff !important; }
body.woocommerce-cart .cart_totals .order-total .amount{ color:#d10000 !important; font-weight:800 !important; }

/* --- cart line-item table --- */
body.woocommerce-cart .woocommerce table.shop_table{ border:0 !important; background:transparent !important; }
body.woocommerce-cart .woocommerce table.shop_table thead th{
  color:#666 !important; text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:800;
  border-bottom:1px solid #222 !important; background:transparent !important;
}
body.woocommerce-cart .woocommerce table.shop_table td,
body.woocommerce-cart .woocommerce table.shop_table tbody th{
  border-top:1px solid #1a1a1a !important; background:transparent !important; color:#cfcfd2 !important;
}
body.woocommerce-cart .woocommerce table.shop_table .product-name a{ color:#fff !important; font-weight:700; }
body.woocommerce-cart .product-remove a{ color:#8a8a8a !important; }
body.woocommerce-cart .product-remove a:hover{ color:#d10000 !important; }
/* the engineer avatar in the line item — keep the round red-ring look */
body.woocommerce-cart .cart_item img{ border-radius:12px; border:1px solid #222; }

/* --- cart totals = a dark card, like the booking panel --- */
body.woocommerce-cart .cart_totals{ background:#121212; border:1px solid #222; border-radius:14px; padding:clamp(18px,2vw,26px); max-width:460px; }
body.woocommerce-cart .cart_totals h2{ margin-top:0; }
body.woocommerce-cart .cart_totals table.shop_table th{ color:#9a9a9e !important; }

/* quantity input (if editable) */
body.woocommerce-cart .woocommerce .quantity input.qty{
  background:#0c0c0e !important; border:1px solid #222 !important; color:#fff !important; border-radius:8px !important; padding:8px !important;
}

/* Stripe Express Checkout (Apple Pay) element renders as an empty ~164px void in the cart on
   desktop — hide it here (same as the product pages); the real express buttons live on checkout. */
body.woocommerce-cart #wc-stripe-express-checkout-element,
body.woocommerce-cart .wcpay-express-checkout-wrapper,
body.woocommerce-cart .wc-proceed-to-checkout .wc-stripe-product-checkout-container{ display:none !important; }

/* --- CART on the OFF-WHITE shell (match product/recording pages), wider content --- */
body.woocommerce-cart.mr-light,
html:has(body.woocommerce-cart.mr-light){ background:#eceef0 !important; }
body.woocommerce-cart.mr-light .page-shell{ background:#eceef0 !important; }
/* "CART." page title → dark on the off-white bg (the red-dot accent keeps its own colour) */
body.woocommerce-cart.mr-light .page-title,
body.woocommerce-cart.mr-light .entry-title,
body.woocommerce-cart.mr-light h1.page-title{ color:#0c0c0c !important; }
/* widen the WooCommerce content 672 -> 1200 so booking info isn't squeezed (Go caps it narrow) */
body.woocommerce-cart .woocommerce{ max-width:1200px !important; margin-left:auto !important; margin-right:auto !important; }
/* card the item list — a dark content card on the off-white page, like the product-page cards */
body.woocommerce-cart .woocommerce-cart-form{
  background:#0c0c0c; border:1px solid #1e1e1e; border-radius:16px;
  padding:clamp(18px,2.2vw,30px); box-shadow:0 30px 60px -40px rgba(0,0,0,.45);
}
/* give the booking-detail line room to breathe at the wider width */
body.woocommerce-cart .woocommerce-cart-form .product-name{ padding-right:clamp(16px,3vw,48px); }

/* --- CART line items as centered "cells" (spreadsheet-style) --- */
/* every cell: content centered vertically + horizontally */
body.woocommerce-cart .woocommerce table.shop_table td{ vertical-align:middle !important; text-align:center !important; }
/* product cell = avatar + text side by side, the group centered, image vertically centred to the row */
body.woocommerce-cart .cart_item .product-thumbnail{ white-space:normal; }
body.woocommerce-cart .cart_item .product-thumbnail > a{ display:inline-block; vertical-align:middle; margin:0; }
body.woocommerce-cart .cart_item .product-thumbnail img{
  width:92px !important; height:92px !important; border-radius:12px; border:1px solid #2a2a2a; object-fit:cover; display:block;
}
body.woocommerce-cart .cart_item .product-thumbnail .actions{
  display:inline-block; vertical-align:middle; text-align:left; margin:0 0 0 18px;
}
/* product name */
body.woocommerce-cart .cart_item .actions > a:first-child{
  color:#fff !important; font-weight:700; font-size:15px; display:inline-block; margin:0 0 8px; text-decoration:none;
}
/* booking meta: each "Label: value" on ONE line, value never wraps (no more dt/dd stacking) */
body.woocommerce-cart .cart_item .variation{ margin:0; line-height:1.7; }
body.woocommerce-cart .cart_item .variation dt{ display:inline; float:none; clear:none; margin:0 5px 0 0; font-weight:600; color:#8f8f94; }
body.woocommerce-cart .cart_item .variation dd{ display:inline; margin:0; color:#e4e4e7; }
body.woocommerce-cart .cart_item .variation dd p{ display:inline; margin:0; white-space:nowrap; }
body.woocommerce-cart .cart_item .variation dd::after{ content:"\A"; white-space:pre; }
/* remove link */
body.woocommerce-cart .cart_item .actions .remove,
body.woocommerce-cart .cart_item .actions > a[href*="remove_item"]{
  display:inline-block; margin-top:10px; color:#8a8a8a !important; font-size:13px; text-decoration:underline;
}
body.woocommerce-cart .cart_item .actions > a[href*="remove_item"]:hover{ color:#d10000 !important; }
/* don't let the price/qty/subtotal amounts wrap */
body.woocommerce-cart .cart_item .product-price,
body.woocommerce-cart .cart_item .product-quantity,
body.woocommerce-cart .cart_item .product-subtotal{ white-space:nowrap; }

/* headers were left-aligned while the values are centered → labels didn't sit over their numbers.
   Center EVERY column header so each label lines up over its centered cell content. */
body.woocommerce-cart .woocommerce table.shop_table thead th{ text-align:center !important; }
body.woocommerce-cart .cart_item .product-thumbnail{ text-align:center !important; }

/* ============ CART line-item REORG (2026-07-17) ============ */
/* image = its own column (left) with a divider; details block to its right */
body.woocommerce-cart .woocommerce table.shop_table thead th:first-child{ text-align:left !important; }
body.woocommerce-cart .cart_item .product-thumbnail{ text-align:left !important; white-space:normal; }
body.woocommerce-cart .cart_item .product-thumbnail > a{
  display:inline-block; vertical-align:middle; margin:0 26px 0 0; padding:0 26px 0 0; border-right:1px solid #ffffff1f;
}
body.woocommerce-cart .cart_item .product-thumbnail .actions{
  display:inline-block; vertical-align:middle; text-align:left; width:min(60%,460px); margin:0;
}
/* product name */
body.woocommerce-cart .cart_item .actions > a:first-child{
  color:#fff !important; font-weight:700; font-size:15px; display:block; margin:0 0 6px; text-decoration:none;
}
/* booking rows = label left / value right, thin separators — like the app */
body.woocommerce-cart .cart_item .variation{ display:grid; grid-template-columns:auto 1fr; margin:0; }
body.woocommerce-cart .cart_item .variation dt{
  grid-column:1; margin:0; padding:10px 0; font-weight:600; color:#8f8f94; white-space:nowrap; border-top:1px solid #ffffff14;
}
body.woocommerce-cart .cart_item .variation dd{
  grid-column:2; margin:0; padding:10px 0; text-align:right; color:#eaeaec; border-top:1px solid #ffffff14;
}
body.woocommerce-cart .cart_item .variation dd p{ margin:0; }
body.woocommerce-cart .cart_item .variation dd::after{ content:none !important; }   /* kill old line-break hack */
body.woocommerce-cart .cart_item .variation .mr-cart-sub{ display:block; margin-top:3px; color:#8f8f94; font-size:12px; }
body.woocommerce-cart .cart_item .variation dt:last-of-type,
body.woocommerce-cart .cart_item .variation dd:last-of-type{ border-bottom:1px solid #ffffff14; }
/* Remove = a little red button (no more text link) */
body.woocommerce-cart .cart_item .actions br{ display:none; }
body.woocommerce-cart .cart_item .actions > a[href*="remove_item"]{
  display:inline-block; margin-top:16px; padding:7px 16px; border-radius:8px;
  background:#d10000 !important; color:#fff !important; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; text-decoration:none !important;
}
body.woocommerce-cart .cart_item .actions > a[href*="remove_item"]:hover{ background:#b60000 !important; }

/* --- CART TOTALS: span the full width of the items card, all content right-aligned --- */
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart-collaterals .cart_totals{ max-width:none !important; width:100% !important; float:none !important; }
body.woocommerce-cart .cart_totals table.shop_table{ width:100% !important; }
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td{ text-align:right !important; border:0 !important; }
body.woocommerce-cart .cart_totals h2,
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout{ text-align:right !important; }

/* ===== CART reorg batch 2 (2026-07-17) ===== */
/* image: no borders at all (drop the box border AND the column divider) */
body.woocommerce-cart .cart_item .product-thumbnail img{ border:0 !important; }
body.woocommerce-cart .cart_item .product-thumbnail > a{ border-right:0 !important; padding-right:0 !important; margin:0 28px 0 0 !important; }
/* engineer name centered within the details column */
body.woocommerce-cart .cart_item .actions > a:first-child{ text-align:center !important; }
/* ITEMS column header centered over its column */
body.woocommerce-cart .woocommerce table.shop_table thead th:first-child{ text-align:center !important; }
/* Remove now lives in the Subtotal cell (below the value) as a red button */
body.woocommerce-cart .cart_item .mr-remove-wrap{ margin-top:14px; }
body.woocommerce-cart .cart_item .product-subtotal .mr-remove-btn{
  display:inline-block; padding:7px 16px; border-radius:8px; background:#d10000 !important;
  color:#fff !important; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; text-decoration:none !important;
}
body.woocommerce-cart .cart_item .product-subtotal .mr-remove-btn:hover{ background:#b60000 !important; }
body.woocommerce-cart .cart_item .actions br{ display:none; }

/* CART TOTALS: group Subtotal/Total (label + value) on the right, under the heading */
body.woocommerce-cart .cart_totals table.shop_table{ width:auto !important; min-width:340px; max-width:430px; margin-left:auto !important; margin-right:0 !important; }
body.woocommerce-cart .cart_totals table.shop_table th{ text-align:left !important; padding-right:48px; }
body.woocommerce-cart .cart_totals table.shop_table td{ text-align:right !important; }

/* fixes: WC's .remove base class made a tiny round ×-button (text overflowed); force pill size.
   Also kill the image-link underline (faint line under the avatar). */
body.woocommerce-cart .cart_item .product-subtotal a.mr-remove-btn{
  width:auto !important; height:auto !important; min-width:0 !important; font-size:11px !important;
  line-height:1 !important; border-radius:8px !important; text-align:center; font-weight:700 !important;
  color:#fff !important; background:#d10000 !important;
}
body.woocommerce-cart .cart_item .product-thumbnail > a{ text-decoration:none !important; border:0 !important; box-shadow:none !important; }
body.woocommerce-cart .cart_item .product-thumbnail img{ border:0 !important; box-shadow:none !important; outline:0 !important; }

/* ===== CART reorg batch 3 (2026-07-17) ===== */
/* Remove button: bottom-aligned in the subtotal cell so it lines up with the Studio row */
body.woocommerce-cart .cart_item .product-subtotal{ position:relative; }
body.woocommerce-cart .cart_item .mr-remove-wrap{ position:absolute; left:0; right:0; bottom:21px; margin:0; text-align:center; }
/* red underline under the product name = Go's link border-bottom → remove it */
body.woocommerce-cart .cart_item .actions > a:first-child,
body.woocommerce-cart .cart_item .actions a{ border-bottom:0 !important; }
/* ALL cart cards = the app's #121212 grey (items card was #0c0c0c, notices #101012) */
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .wlr-message-info,
body.woocommerce-cart div[class*="wlr_point"],
body.woocommerce-cart .cart_totals{ background:#121212 !important; }

/* ===== CART reorg batch 4 (2026-07-17) ===== */
/* card borders -> app's #222222 (the app cards are #121212 / #222222) */
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .wlr-message-info,
body.woocommerce-cart div[class*="wlr_point"]{ border-color:#222222 !important; }
/* totals "line leaders": extend the rule across the VALUE cell so it reaches the numbers */
body.woocommerce-cart .cart_totals table.shop_table td{ border-top:1px solid #1a1a1a !important; }
/* ITEMS header: center it over the item DATA (name) below, not the whole column (shift right ~65px) */
body.woocommerce-cart .woocommerce table.shop_table thead th:first-child{ padding-left:130px !important; }

/* ===== CART batch 5: items card = WHITE (totals stay grey), bigger item separator ===== */
body.woocommerce-cart .woocommerce-cart-form{ background:#ffffff !important; border-color:#e2e2e6 !important; box-shadow:0 30px 60px -42px rgba(0,0,0,.25) !important; }
/* column headers -> readable grey on white + light underline */
body.woocommerce-cart .woocommerce-cart-form thead th{ color:#9a9a9e !important; border-bottom-color:#e6e6ea !important; }
/* product name -> dark */
body.woocommerce-cart .woocommerce-cart-form .actions > a:first-child{ color:#111214 !important; }
/* booking rows -> dark text, light separators */
body.woocommerce-cart .woocommerce-cart-form .variation dt{ color:#8a8a90 !important; border-top-color:#ececf0 !important; }
body.woocommerce-cart .woocommerce-cart-form .variation dd{ color:#1a1a1e !important; border-top-color:#ececf0 !important; }
body.woocommerce-cart .woocommerce-cart-form .variation .mr-cart-sub{ color:#a0a0a6 !important; }
/* prices / subtotal / quantity -> dark */
body.woocommerce-cart .woocommerce-cart-form .product-price .amount,
body.woocommerce-cart .woocommerce-cart-form .product-subtotal .amount,
body.woocommerce-cart .woocommerce-cart-form .product-quantity{ color:#111214 !important; }
/* between-item separator: remove default top borders, add a bigger light line BETWEEN items only */
body.woocommerce-cart .woocommerce-cart-form tbody tr.cart_item td{ border-top:0 !important; }
body.woocommerce-cart .woocommerce-cart-form tbody tr.cart_item + tr.cart_item td{ border-top:3px solid #e4e4e8 !important; }
/* update-cart ghost -> light on the white card */
body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"]{ background:#f1f1f3 !important; color:#333336 !important; border-color:#d9d9dd !important; }
body.woocommerce-cart .woocommerce-cart-form td.actions{ border-top-color:#e6e6ea !important; }

/* fix: batch-1 forced item prices white !important (invisible on the white card) — override with
   higher specificity (table.cart) so PRICE/SUBTOTAL/QUANTITY are dark on the white items card. */
body.woocommerce-cart .woocommerce-cart-form table.cart .product-price .amount,
body.woocommerce-cart .woocommerce-cart-form table.cart .product-subtotal .amount,
body.woocommerce-cart .woocommerce-cart-form table.cart .product-quantity{ color:#111214 !important; }

/* ===== CART — MOBILE (WooCommerce collapses the table into stacked rows) 2026-07-17 =====
   The desktop rules above (center-aligned cells, absolutely-positioned Remove, 340px-min totals)
   fight the responsive stack on phones. Re-establish a clean label-left / value-right layout. */
@media (max-width:768px){
  /* price / quantity / subtotal: value hugs the right edge, ::before label sits left, even padding */
  body.woocommerce-cart .woocommerce-cart-form table.cart td.product-price,
  body.woocommerce-cart .woocommerce-cart-form table.cart td.product-quantity,
  body.woocommerce-cart .woocommerce-cart-form table.cart td.product-subtotal{
    text-align:right !important; padding:12px 18px !important;
  }
  /* the Quantity value is bare text (no .amount span) so its dark rule colors the whole cell,
     which also darkened its responsive "Quantity:" ::before label — grey it back to match Price/Subtotal */
  body.woocommerce-cart .cart_item td.product-quantity::before{ color:#9a9a9e !important; }
  /* image + name + booking meta = one centered, full-width block (no stray responsive label) */
  body.woocommerce-cart .cart_item .product-thumbnail{ text-align:center !important; padding:18px 18px 4px !important; }
  body.woocommerce-cart .cart_item .product-thumbnail::before,
  body.woocommerce-cart .woocommerce-cart-form table.cart td.actions::before{ display:none !important; }
  body.woocommerce-cart .cart_item .product-thumbnail > a{ display:block !important; margin:0 auto 12px !important; }
  /* WooCommerce's responsive CSS hides the thumbnail on phones — bring it back as a centered avatar */
  body.woocommerce-cart .cart_item .product-thumbnail img{
    display:inline-block !important; width:94px !important; height:94px !important;
    object-fit:cover; border-radius:14px; margin:2px auto 6px !important;
  }
  body.woocommerce-cart .cart_item .product-thumbnail .actions{ display:block !important; }
  body.woocommerce-cart .cart_item .actions > a:first-child{ display:block; text-align:center !important; margin:0 0 12px !important; }
  /* booking meta rows: label left, value right — matches the price rows for a clean edge */
  body.woocommerce-cart .cart_item .variation{ text-align:left; }
  body.woocommerce-cart .cart_item .variation dd{ text-align:right; }

  /* REMOVE: was position:absolute over the Subtotal value — return it to flow, centered, own line */
  body.woocommerce-cart .cart_item .product-subtotal{ position:static !important; }
  body.woocommerce-cart .cart_item .mr-remove-wrap{ position:static !important; margin:16px 0 6px !important; text-align:center !important; }

  /* CART TOTALS: fit the card so line-leaders + numbers stop at the edge (desktop forced a 340px min) */
  body.woocommerce-cart .cart_totals table.shop_table{ min-width:0 !important; max-width:100% !important; width:100% !important; margin-left:0 !important; }
  body.woocommerce-cart .cart_totals table.shop_table th{ padding-right:0 !important; text-align:left !important; }
  body.woocommerce-cart .cart_totals table.shop_table td{ padding-left:0 !important; text-align:right !important; }
  /* PROCEED TO CHECKOUT = full-width button, centered under the totals */
  body.woocommerce-cart .cart_totals .wc-proceed-to-checkout{ text-align:center !important; }
  body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{ display:block !important; width:100% !important; }
}

/* ============================================================================
   CHECKOUT (body.woocommerce-checkout) — the money funnel, app-matched.
   Off-white shell (#eceef0) + dark #121212 app-cards + red CTA. Built on the
   Essential-Addons "Woo Checkout" widget + Stripe UPE. RESTYLE ONLY — no
   checkout/payment/booking logic touched. 2026-07-18.
   ============================================================================ */

/* --- off-white shell (identical to cart + product pages) --- */
body.woocommerce-checkout.mr-light,
html:has(body.woocommerce-checkout.mr-light){ background:#eceef0 !important; }
body.woocommerce-checkout.mr-light .page-shell{ background:#eceef0 !important; }
body.woocommerce-checkout.mr-light .page-title,
body.woocommerce-checkout.mr-light .entry-title,
body.woocommerce-checkout.mr-light h1.page-title{ color:#0c0c0c !important; }

/* --- focused, centered column (the whole funnel reads top-to-bottom) --- */
body.woocommerce-checkout .woocommerce{ max-width:800px !important; margin-left:auto !important; margin-right:auto !important; }
/* consistent vertical rhythm between the stacked sections */
body.woocommerce-checkout form.checkout{ display:block; }
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review{ margin-top:20px; }

/* --- top notices: WPLoyalty earn bar / login / coupon prompts → dark cards (match the cart) --- */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .wlr-message-info,
body.woocommerce-checkout div[class*="wlr_point"]{
  background:#121212 !important; border:1px solid #222 !important; border-radius:12px !important;
  color:#d6d6da !important; box-shadow:none !important;
}
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before{ color:#d10000 !important; }
body.woocommerce-checkout .woocommerce-info a,
body.woocommerce-checkout .woocommerce-message a,
body.woocommerce-checkout .woocommerce-error a{ color:#fff !important; }

/* expanded login + coupon toggle forms → dark card + light copy */
body.woocommerce-checkout form.woocommerce-form-login,
body.woocommerce-checkout form.checkout_coupon{
  background:#121212 !important; border:1px solid #222 !important; border-radius:14px !important;
  color:#d6d6da !important;
}
body.woocommerce-checkout form.woocommerce-form-login p,
body.woocommerce-checkout form.checkout_coupon p{ color:#b7b7bb !important; }

/* --- EXPRESS CHECKOUT: kill Amazon Pay; keep Apple/Google Pay running the full width --- */
body.woocommerce-checkout #wc-stripe-express-checkout-element-amazonPay{ display:none !important; }
body.woocommerce-checkout #wc-stripe-express-checkout-element{ max-width:100%; margin-inline:auto; }
/* the "— OR —" divider between express + the form */
body.woocommerce-checkout .wc-stripe-express-checkout__separator,
body.woocommerce-checkout p.wc-stripe-express-checkout__separator{
  color:#8f8f94 !important; text-transform:uppercase; letter-spacing:.22em; font-size:11px; font-weight:800;
}

/* --- FORM CARD (contact + billing live in one dark card) --- */
body.woocommerce-checkout #customer_details{
  background:#121212; border:1px solid #222; border-radius:16px;
  padding:clamp(20px,2.6vw,30px); box-shadow:0 30px 60px -46px rgba(0,0,0,.5);
}
/* remove the notes / additional-info / (empty) shipping column entirely */
body.woocommerce-checkout #customer_details .col-2,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .woocommerce-shipping-fields{ display:none !important; }
body.woocommerce-checkout #customer_details .col-1{ width:100% !important; max-width:none !important; float:none !important; margin:0 !important; }

/* section headings inside the cards (Contact information / Billing details / Your order) */
body.woocommerce-checkout #customer_details h3,
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout #order_review_heading{
  font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.005em;
  font-size:16px; color:#ffffff; margin:0 0 16px;
}
body.woocommerce-checkout .woocommerce-billing-fields h3{ margin-top:26px; }
body.woocommerce-checkout #order_review_heading{ color:#0c0c0c; font-size:20px; margin:30px 0 14px; }

/* labels — app-style uppercase micro-label */
body.woocommerce-checkout .form-row label,
body.woocommerce-checkout .woocommerce-billing-fields label{
  color:#9a9a9e !important; font-family:var(--font); font-size:11.5px; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.07em; margin:0 0 7px !important; display:block;
}
body.woocommerce-checkout .form-row label .required{ color:#d10000 !important; border:0 !important; text-decoration:none; }
body.woocommerce-checkout .form-row label .optional{ color:#66666b; font-weight:600; }

/* inputs / selects / textarea — dark, app-style (mirrors the booking time-select box) */
body.woocommerce-checkout .input-text,
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="password"],
body.woocommerce-checkout textarea,
body.woocommerce-checkout select,
body.woocommerce-checkout .select2-container .select2-selection--single{
  background:#0c0c0c !important; border:1px solid #262628 !important; border-radius:10px !important;
  color:#ffffff !important; padding:13px 15px !important; height:auto !important;
  font-family:var(--font) !important; font-size:15px !important; line-height:1.3 !important;
  box-shadow:none !important; transition:border-color .18s, box-shadow .18s;
}
body.woocommerce-checkout .input-text::placeholder,
body.woocommerce-checkout textarea::placeholder{ color:#67676c !important; }
body.woocommerce-checkout .input-text:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout .select2-container--focus .select2-selection--single,
body.woocommerce-checkout .select2-container--open .select2-selection--single{
  border-color:#d10000 !important; box-shadow:0 0 0 3px rgba(209,0,0,.18) !important; outline:none !important;
}
/* select2 country/state dropdown → dark */
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered{
  color:#fff !important; line-height:1.4 !important; padding:0 !important;
}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow{ top:50% !important; transform:translateY(-50%); }
body.woocommerce-checkout .select2-dropdown{ background:#0c0c0c !important; border:1px solid #262628 !important; }
body.woocommerce-checkout .select2-results__option{ color:#d6d6da !important; background:transparent !important; }
body.woocommerce-checkout .select2-results__option--highlighted[aria-selected]{ background:#d10000 !important; color:#fff !important; }
body.woocommerce-checkout .select2-search--dropdown .select2-search__field{ background:#121212 !important; border:1px solid #262628 !important; color:#fff !important; }

/* checkboxes (create account / terms / save card) — readable, sentence case */
body.woocommerce-checkout .woocommerce-form__label-for-checkbox,
body.woocommerce-checkout label.checkbox,
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text{
  color:#b7b7bb !important; font-size:13.5px !important; font-weight:500 !important;
  text-transform:none !important; letter-spacing:0 !important;
}
body.woocommerce-checkout .woocommerce-form__input-checkbox{ accent-color:#d10000; }

/* --- ORDER REVIEW card (the booking summary; reuses our cart-item-data relabels) --- */
body.woocommerce-checkout .woocommerce-checkout-review-order-table{
  background:#121212 !important; border:1px solid #222 !important; border-radius:16px !important;
  border-collapse:separate !important; padding:6px clamp(16px,2vw,22px) !important; color:#e4e4e7 !important;
  box-shadow:0 30px 60px -46px rgba(0,0,0,.5);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td{
  border:0 !important; color:#e4e4e7 !important; padding:14px 0 !important; background:transparent !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th{
  color:#9a9a9e !important; font-family:var(--font); font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.09em; border-bottom:1px solid #202022 !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td{ border-bottom:1px solid #1c1c1e !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name{ color:#fff !important; font-weight:700; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total .amount{ color:#fff !important; }
/* booking meta (Date / Time / Studio) under the product name — thin app rows */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation{ margin:8px 0 0; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation dt{ color:#8f8f94 !important; font-weight:600; float:none; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation dd{ color:#d0d0d4 !important; margin:0 0 2px; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation .mr-cart-sub{ color:#8f8f94 !important; font-size:12px; }
/* subtotals + total */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th{ color:#9a9a9e !important; font-weight:600; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td .amount{ color:#fff !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr td{ border-top:1px solid #1c1c1e !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th{ color:#fff !important; font-weight:800; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td .amount{ color:#d10000 !important; font-weight:800; font-size:20px; }

/* --- PAYMENT card (Stripe UPE lives here) --- */
body.woocommerce-checkout #payment{
  background:#121212 !important; border:1px solid #222 !important; border-radius:16px !important;
  box-shadow:0 30px 60px -46px rgba(0,0,0,.5);
}
body.woocommerce-checkout #payment .payment_methods{ border:0 !important; }
body.woocommerce-checkout #payment .payment_methods li{ background:transparent !important; }
body.woocommerce-checkout #payment .wc_payment_method > label{ color:#ffffff !important; font-weight:700; }
body.woocommerce-checkout #payment .payment_box{
  background:#0c0c0c !important; border:1px solid #1e1e20 !important; border-radius:12px !important;
  color:#c2c2c6 !important; box-shadow:none !important;
}
body.woocommerce-checkout #payment .payment_box::before{ display:none !important; } /* kill the callout triangle */
body.woocommerce-checkout #payment .payment_box a{ color:#fff !important; }
/* payment-method radios → red (Go/browser default renders them orange) */
body.woocommerce-checkout #payment input[type="radio"],
body.woocommerce-checkout #payment .wc_payment_method input.input-radio{ accent-color:#d10000 !important; }
body.woocommerce-checkout #payment .place-order{ background:transparent !important; border:0 !important; padding-top:6px !important; }

/* --- PLACE ORDER (red, full-width, prominent) --- */
body.woocommerce-checkout #place_order{
  background:#d10000 !important; color:#fff !important; border:0 !important; border-radius:12px !important;
  width:100% !important; padding:17px 24px !important; margin-top:6px;
  font-family:var(--font) !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.08em; font-size:15px !important;
  box-shadow:0 16px 34px -16px rgba(209,0,0,.6) !important; transition:background .18s, transform .18s;
}
body.woocommerce-checkout #place_order:hover{ background:#b60000 !important; transform:translateY(-1px); }
body.woocommerce-checkout #place_order:active{ transform:translateY(0); }

/* privacy + terms copy */
body.woocommerce-checkout .woocommerce-privacy-policy-text p,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{ color:#7d7d82 !important; font-size:12.5px; }
body.woocommerce-checkout .woocommerce-privacy-policy-text a,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a{ color:#d10000 !important; }

/* hide the empty express-checkout well on desktop only if it collapses (JS keeps real buttons) */
body.woocommerce-checkout #wc-stripe-express-checkout-element:empty{ display:none !important; }

/* --- "Click here to login / enter your code" prompts → red buttons that stand out --- */
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a.showlogin,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon,
body.woocommerce-checkout .woocommerce-info a.showlogin,
body.woocommerce-checkout .woocommerce-info a.showcoupon{
  display:inline-block; vertical-align:middle; margin-left:10px;
  background:#d10000 !important; color:#fff !important; text-decoration:none !important;
  padding:8px 15px; border-radius:8px; font-family:var(--font); font-weight:700;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; transition:background .18s, transform .18s;
}
body.woocommerce-checkout .woocommerce-info a.showlogin:hover,
body.woocommerce-checkout .woocommerce-info a.showcoupon:hover{ background:#b60000 !important; transform:translateY(-1px); }
/* lay the prompt out as: label on the left, red button on the right */
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 0;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a.showlogin,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon{ margin-left:auto; }

/* CHECKOUT LAYOUT = SINGLE centered column (reverted from the 2-col on user request 2026-07-18).
   The base `.woocommerce{ max-width:660px }` + naturally-stacked #customer_details / #order_review
   give the single column, so no desktop float block is needed. */

/* --- CHECKOUT MOBILE --- */
@media (max-width:768px){
  body.woocommerce-checkout .woocommerce{ max-width:100% !important; }
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table,
  body.woocommerce-checkout #payment{ border-radius:14px !important; }
}

/* --- COLOR SCHEME (2026-07-18 user request): BLACK cards + GREY input wells --- */
/* cards → black */
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .wlr-message-info,
body.woocommerce-checkout div[class*="wlr_point"],
body.woocommerce-checkout form.woocommerce-form-login,
body.woocommerce-checkout form.checkout_coupon{ background:#080808 !important; border-color:#202023 !important; }
body.woocommerce-checkout #payment .payment_box{ background:#080808 !important; border-color:#202023 !important; }
/* fields → grey wells (Stripe UPE auto-themes its card fields off these input styles) */
body.woocommerce-checkout .input-text,
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="password"],
body.woocommerce-checkout textarea,
body.woocommerce-checkout select,
body.woocommerce-checkout .select2-container .select2-selection--single,
body.woocommerce-checkout .select2-dropdown,
body.woocommerce-checkout .select2-search--dropdown .select2-search__field{ background:#1c1c1f !important; border-color:#34343a !important; }

/* --- SPLIT contact vs billing into separate cards + recolor (2026-07-18 request):
   Contact = its own black card · Billing details = WHITE card · Your Order = RED card.
   #contact_details is already a distinct container, so no DOM surgery — just card each. --- */
/* the outer #customer_details is no longer a card; it only holds the two inner cards */
body.woocommerce-checkout #customer_details{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }

/* CONTACT card (black) */
body.woocommerce-checkout #contact_details{
  background:#080808 !important; border:1px solid #202023; border-radius:16px;
  padding:clamp(20px,2.4vw,28px); margin-bottom:20px;
  box-shadow:0 30px 60px -46px rgba(0,0,0,.5);
}

/* BILLING card (white) — the second billing-fields block + the create-account row, merged */
body.woocommerce-checkout .col-1 > .woocommerce-billing-fields:not(#contact_details){
  background:#ffffff !important; border:1px solid #e2e2e6 !important; border-bottom:0 !important; border-radius:16px 16px 0 0;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,28px) 6px; margin-bottom:0 !important;
  box-shadow:0 30px 60px -46px rgba(0,0,0,.22);
}
body.woocommerce-checkout .woocommerce-account-fields{
  background:#ffffff !important; border:1px solid #e2e2e6 !important; border-top:0 !important; border-radius:0 0 16px 16px;
  padding:2px clamp(20px,2.4vw,28px) 20px; margin-top:0 !important;
  box-shadow:0 30px 60px -46px rgba(0,0,0,.22);
}
/* white-card headings + labels → dark */
body.woocommerce-checkout .col-1 > .woocommerce-billing-fields:not(#contact_details) h3{ color:#0c0c0c !important; }
body.woocommerce-checkout .col-1 > .woocommerce-billing-fields:not(#contact_details) label,
body.woocommerce-checkout .woocommerce-account-fields label,
body.woocommerce-checkout .woocommerce-account-fields .woocommerce-form__label-for-checkbox{ color:#55565c !important; }
body.woocommerce-checkout .col-1 > .woocommerce-billing-fields:not(#contact_details) label .optional{ color:#9a9aa0 !important; }
/* white-card fields → light wells with dark text */
body.woocommerce-checkout .col-1 > .woocommerce-billing-fields:not(#contact_details) .input-text,
body.woocommerce-checkout .col-1 > .woocommerce-billing-fields:not(#contact_details) input,
body.woocommerce-checkout .col-1 > .woocommerce-billing-fields:not(#contact_details) select,
body.woocommerce-checkout .col-1 > .woocommerce-billing-fields:not(#contact_details) .select2-container .select2-selection--single,
body.woocommerce-checkout .woocommerce-account-fields .input-text,
body.woocommerce-checkout .woocommerce-account-fields input{
  background:#eef0f2 !important; border-color:#d7d7db !important; color:#111214 !important;
}
body.woocommerce-checkout .col-1 > .woocommerce-billing-fields:not(#contact_details) .input-text::placeholder{ color:#8b8b90 !important; }
body.woocommerce-checkout .col-1 > .woocommerce-billing-fields:not(#contact_details) .select2-selection__rendered{ color:#111214 !important; }

/* YOUR ORDER card (red) — white text throughout, translucent-white separators */
body.woocommerce-checkout .woocommerce-checkout-review-order-table{ background:#d10000 !important; border:1px solid #e63535 !important; box-shadow:0 30px 60px -40px rgba(209,0,0,.5); }
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .amount,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation dd,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td .amount,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td .amount{ color:#ffffff !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th{ color:rgba(255,255,255,.82) !important; border-bottom-color:rgba(255,255,255,.28) !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation dt,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation .mr-cart-sub{ color:rgba(255,255,255,.8) !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr td{ border-top-color:rgba(255,255,255,.24) !important; border-bottom-color:rgba(255,255,255,.24) !important; }

/* --- expanded LOGIN + COUPON forms: red submit buttons + a clean coupon row (2026-07-18) --- */
body.woocommerce-checkout form.woocommerce-form-login button[name="login"],
body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]{
  background:#d10000 !important; color:#fff !important; border:0 !important; border-radius:10px !important;
  padding:14px 26px !important; width:auto !important; float:none !important;
  font-family:var(--font) !important; font-weight:800 !important; text-transform:uppercase;
  letter-spacing:.06em; font-size:12.5px !important; box-shadow:none !important; cursor:pointer;
  transition:background .18s, transform .18s;
}
body.woocommerce-checkout form.woocommerce-form-login button[name="login"]:hover,
body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:hover{ background:#b60000 !important; transform:translateY(-1px); }
/* coupon form → a connected black panel that drops out of the "Have a coupon?" card: full-width
   input on top, APPLY COUPON button centered beneath it. ⚠️ STILL do not set `display` on the form
   (WC slideToggle controls it — see the always-visible bug fixed in v2.5.7). The rows are <p>
   blocks, so they stack naturally without any display override. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle{ margin-bottom:0 !important; }
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{ transition:border-radius .18s ease, margin-bottom .18s ease; }
/* ⚠️ NO vertical padding on the form — slideToggle() animates paddingTop/Bottom to 0, and pinning
   them made the collapsed height never reach 0 (janky jump). Keep only horizontal padding here;
   put the top/bottom interior spacing on the child rows (inside the animated height → smooth). */
body.woocommerce-checkout form.checkout_coupon{ margin-top:0 !important; padding:0 clamp(16px,2vw,22px) !important; border-top:0 !important; border-radius:0 0 14px 14px !important; }
/* Bar squares its bottom, drops its bottom border + its 33px gap-margin while the panel is open.
   Driven by the form's REAL state via :has() so it can NEVER desync from a JS class. jQuery clears
   the inline display when a slide finishes (style=""), so "open" must be detected as NOT-closed
   (closed = inline display:none, in either spacing). Covers both animation directions. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle:has(+ form.checkout_coupon:not([style*="display: none"]):not([style*="display:none"])) .woocommerce-info{
  border-radius:12px 12px 0 0 !important; border-bottom:0 !important; margin-bottom:0 !important;
}

/* --- "Returning customer?" login: SAME merge recipe as the coupon + STACK the fields --- */
body.woocommerce-checkout .woocommerce-form-login-toggle{ margin-bottom:0 !important; }
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info{ transition:border-radius .18s ease, margin-bottom .18s ease; }
body.woocommerce-checkout form.woocommerce-form-login{ margin-top:0 !important; padding:0 clamp(16px,2vw,22px) !important; border-top:0 !important; border-radius:0 0 14px 14px !important; }
body.woocommerce-checkout .woocommerce-form-login-toggle:has(+ form.woocommerce-form-login:not([style*="display: none"]):not([style*="display:none"])) .woocommerce-info{
  border-radius:12px 12px 0 0 !important; border-bottom:0 !important; margin-bottom:0 !important;
}
/* intro line: top interior spacing via PADDING (padding can't collapse out → no gap under the bar) */
body.woocommerce-checkout form.woocommerce-form-login > p:first-child{ padding-top:16px !important; margin:0 0 16px !important; color:#b7b7bb !important; font-size:13.5px; line-height:1.55; }
/* STACK username + password full-width (Go floats them 48% side by side) */
body.woocommerce-checkout form.woocommerce-form-login .form-row-first,
body.woocommerce-checkout form.woocommerce-form-login .form-row-last{ float:none !important; width:100% !important; margin:0 0 14px !important; }
body.woocommerce-checkout form.woocommerce-form-login .password-input{ display:block !important; width:100% !important; }
body.woocommerce-checkout form.woocommerce-form-login .password-input input{ width:100% !important; }
body.woocommerce-checkout form.woocommerce-form-login #username{ width:100% !important; }
body.woocommerce-checkout form.woocommerce-form-login .clear{ display:none !important; }
/* footer: Remember me → LOGIN → Lost your password, CENTERED stack (matches the coupon panel's
   centered APPLY COUPON button — keep the whole checkout consistent). */
body.woocommerce-checkout form.woocommerce-form-login p.form-row:not(.form-row-first):not(.form-row-last){
  display:flex !important; flex-direction:column; align-items:center; gap:14px !important; margin:6px 0 14px !important;
}
body.woocommerce-checkout form.woocommerce-form-login p.form-row:not(.form-row-first):not(.form-row-last) > *{ margin:0 !important; }
body.woocommerce-checkout form.woocommerce-form-login .woocommerce-form__label-for-checkbox{ margin:0 !important; padding:0 !important; }
body.woocommerce-checkout form.woocommerce-form-login .lost_password{ margin:0 0 18px !important; padding:0 !important; text-align:center !important; }
body.woocommerce-checkout form.woocommerce-form-login .lost_password a{ color:#d10000 !important; }
body.woocommerce-checkout form.checkout_coupon .form-row{ float:none !important; width:auto !important; margin:0 !important; padding:0 !important; }
/* top spacing as PADDING (not margin) so it can't collapse out through the form's borderless top
   and reopen a gap under the bar — keeps the panel flush-connected. */
body.woocommerce-checkout form.checkout_coupon .form-row-first{ padding-top:16px !important; margin:0 0 14px !important; }
body.woocommerce-checkout form.checkout_coupon .form-row-last{ margin:0 0 18px !important; text-align:center !important; }
body.woocommerce-checkout form.checkout_coupon #coupon_code{ width:100% !important; }
body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]{ display:inline-block; min-width:220px; }
body.woocommerce-checkout form.checkout_coupon .clear{ display:none !important; }

/* --- Remove-coupon link: white + aligned + visible on the red Your Order card --- */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-discount th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-discount td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-discount td .amount{ color:#ffffff !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table a.woocommerce-remove-coupon{
  display:inline-block; background:#080808 !important; color:#ffffff !important;
  text-decoration:none !important; padding:5px 13px; border-radius:8px; margin-left:12px;
  font-family:var(--font); font-size:10.5px !important; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; white-space:nowrap; vertical-align:middle; border:1px solid rgba(255,255,255,.28);
  transition:background .18s, border-color .18s, transform .18s;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table a.woocommerce-remove-coupon:hover{ background:#000 !important; border-color:rgba(255,255,255,.55); transform:translateY(-1px); }

/* ===========================================================================
   ORDER RECEIPT — thank-you (order-received) + view-order pages.
   Restyle STOCK WooCommerce order markup to match the app receipt screen
   (app/booking-confirmation.jsx): dark #121212 cards, #222 borders, radius 12,
   muted uppercase micro-labels (#666/#888), white values, red #d10000 accents,
   weight-900 total, green #00c853 discounts. CSS-ONLY — no template override.
   Every selector scoped to the two receipt body classes so nothing leaks.
   SHELLS UNTOUCHED: order-received = off-white #eceef0 (see ~1095); view-order =
   black #000 dashboard exception (see ~1807). The dark cards float on BOTH; only
   the page-level status title recolors by shell (dark on off-white / white on black).
   ⚑ FLAG — NOT built (needs PHP): a true data-driven PAID/status pill requires a
     template hook. Pure CSS can only restyle existing DOM, not inject a status chip.
   ⚑ VERIFY on a real booking order: the WC-Bookings item-meta markup is ASSUMED to
     be `ul.wc-item-meta` (fallback selectors `.wc-booking-summary-list` /
     `.wc-booking-order-details` added below); confirm against live DOM.
   =========================================================================== */

/* 1 — containers: constrain the order sections + center on the page */
body.woocommerce-order-received .woocommerce-order,
body.woocommerce-view-order .woocommerce-order,
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-view-order .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details,
body.woocommerce-view-order .woocommerce-customer-details{
  max-width:800px !important; margin-inline:auto !important;
}

/* 2 — "Thank you" / order-status title — COLOR SPLITS BY SHELL (two rules) */
body.woocommerce-order-received .woocommerce-thankyou-order-received,
body.woocommerce-view-order p.woocommerce-notice,
body.woocommerce-view-order .woocommerce-MyAccount-content > p:first-child{
  font-family:var(--disp) !important; font-weight:900 !important;
  text-transform:uppercase !important; letter-spacing:1px !important;
  max-width:800px; margin-inline:auto;
}
/* order-received sits on OFF-WHITE → dark title */
body.woocommerce-order-received .woocommerce-thankyou-order-received{ color:#0c0c0c !important; }
/* view-order sits on BLACK dashboard → white title */
body.woocommerce-view-order p.woocommerce-notice,
body.woocommerce-view-order .woocommerce-MyAccount-content > p:first-child{ color:#fff !important; }

/* 3 — order-overview meta strip → app "reference card" */
body.woocommerce-order-received ul.woocommerce-order-overview.order_details,
body.woocommerce-view-order ul.woocommerce-order-overview.order_details{
  background:#121212 !important; border:1px solid #222 !important; border-radius:12px;
  padding:18px; display:flex; flex-wrap:wrap; list-style:none; margin:0 auto 24px; max-width:800px;
}
body.woocommerce-order-received ul.woocommerce-order-overview.order_details li,
body.woocommerce-view-order ul.woocommerce-order-overview.order_details li{
  border:0 !important; flex:1; min-width:120px; margin:0; padding-right:18px;
  text-transform:uppercase; color:#666 !important; font-size:10px; font-weight:800; letter-spacing:1.5px;
}
body.woocommerce-order-received ul.woocommerce-order-overview.order_details li + li,
body.woocommerce-view-order ul.woocommerce-order-overview.order_details li + li{
  border-left:1px solid #222 !important; padding-left:18px;
}
body.woocommerce-order-received ul.woocommerce-order-overview.order_details li strong,
body.woocommerce-view-order ul.woocommerce-order-overview.order_details li strong{
  display:block; color:#fff !important; font-size:16px; font-weight:900;
  letter-spacing:0; text-transform:none; margin-top:4px;
}
/* the TOTAL value nests a .woocommerce-Price-amount that keeps its own dim color */
body.woocommerce-order-received ul.woocommerce-order-overview.order_details li strong .woocommerce-Price-amount,
body.woocommerce-view-order ul.woocommerce-order-overview.order_details li strong .woocommerce-Price-amount{ color:#fff !important; }

/* app-style order STATUS pill (injected via woocommerce_order_details_before_order_table) */
body.woocommerce-order-received .mr-receipt-status,
body.woocommerce-view-order .mr-receipt-status{ display:inline-block; margin:0 0 16px; padding:5px 14px; border-radius:999px; font-family:var(--font); font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:#ffffff; }
.mr-receipt-status.is-green{ background:#0f7a3d; }
.mr-receipt-status.is-amber{ background:#b8860b; }
.mr-receipt-status.is-red{ background:#d10000; }
.mr-receipt-status.is-grey{ background:#555555; }

/* 4 — order-details table → dark card */
body.woocommerce-order-received table.woocommerce-table--order-details,
body.woocommerce-view-order table.woocommerce-table--order-details{
  background:#121212 !important; border:1px solid #222 !important; border-radius:12px;
  border-collapse:separate; overflow:hidden; width:100%; margin:0 auto 24px;
}
body.woocommerce-order-received table.woocommerce-table--order-details thead th,
body.woocommerce-view-order table.woocommerce-table--order-details thead th{
  color:#666 !important; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  border-bottom:1px solid #222 !important; background:transparent !important; padding:14px 16px;
}
body.woocommerce-order-received table.woocommerce-table--order-details tbody td,
body.woocommerce-view-order table.woocommerce-table--order-details tbody td{
  color:#fff !important; border-color:#1a1a1a !important; background:transparent !important; padding:14px 16px;
}
body.woocommerce-order-received table.woocommerce-table--order-details td.product-name a,
body.woocommerce-view-order table.woocommerce-table--order-details td.product-name a{
  color:#fff !important; font-weight:800; border-bottom:0 !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details tbody .woocommerce-Price-amount.amount,
body.woocommerce-view-order table.woocommerce-table--order-details tbody .woocommerce-Price-amount.amount{
  color:#fff !important; font-weight:700;
}
/* tfoot subtotals (Subtotal / Shipping / Payment method …) */
body.woocommerce-order-received table.woocommerce-table--order-details tfoot th,
body.woocommerce-view-order table.woocommerce-table--order-details tfoot th{
  color:#888 !important; font-weight:600; font-size:13px; border-color:#222 !important; padding:12px 16px; background:transparent !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot td,
body.woocommerce-view-order table.woocommerce-table--order-details tfoot td{
  border-color:#222 !important; padding:12px 16px; background:transparent !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot td .amount,
body.woocommerce-view-order table.woocommerce-table--order-details tfoot td .amount{
  color:#aaa !important; font-weight:700;
}
/* discount / coupon row → green (higher specificity than the grey tfoot amount) */
body.woocommerce-order-received table.woocommerce-table--order-details tfoot .cart-discount th,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot .cart-discount td,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot .cart-discount td .amount,
body.woocommerce-view-order table.woocommerce-table--order-details tfoot .cart-discount th,
body.woocommerce-view-order table.woocommerce-table--order-details tfoot .cart-discount td,
body.woocommerce-view-order table.woocommerce-table--order-details tfoot .cart-discount td .amount{
  color:#00c853 !important;
}
/* TOTAL row (last / .order-total) → big weight-900 */
body.woocommerce-order-received table.woocommerce-table--order-details tfoot .order-total th,
body.woocommerce-view-order table.woocommerce-table--order-details tfoot .order-total th{
  color:#fff !important; font-weight:800; letter-spacing:1px; text-transform:uppercase;
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot .order-total td .amount,
body.woocommerce-view-order table.woocommerce-table--order-details tfoot .order-total td .amount{
  color:#fff !important; font-weight:900; font-size:20px;
}

/* 5 — WC-Bookings item meta ("Booking #/date/Type: Room") under the product name.
   ⚑ VERIFY class on a live booking order — assumed ul.wc-item-meta (+ plugin fallbacks). */
body.woocommerce-order-received td.product-name ul.wc-item-meta,
body.woocommerce-order-received td.product-name .wc-booking-summary-list,
body.woocommerce-order-received td.product-name .wc-booking-order-details,
body.woocommerce-view-order td.product-name ul.wc-item-meta,
body.woocommerce-view-order td.product-name .wc-booking-summary-list,
body.woocommerce-view-order td.product-name .wc-booking-order-details{
  list-style:none; margin:10px 0 0; padding:12px 0 0; border-top:1px solid #1a1a1a !important;
}
body.woocommerce-order-received td.product-name ul.wc-item-meta li,
body.woocommerce-view-order td.product-name ul.wc-item-meta li{
  display:flex; gap:10px; margin-bottom:8px;
}
body.woocommerce-order-received td.product-name ul.wc-item-meta strong.wc-item-meta-label,
body.woocommerce-view-order td.product-name ul.wc-item-meta strong.wc-item-meta-label{
  color:#666 !important; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; min-width:90px;
}
body.woocommerce-order-received td.product-name ul.wc-item-meta li p,
body.woocommerce-view-order td.product-name ul.wc-item-meta li p{
  color:#fff !important; font-size:14px; font-weight:600; margin:0;
}

/* 6 — customer / billing block → dark card */
body.woocommerce-order-received section.woocommerce-customer-details,
body.woocommerce-view-order section.woocommerce-customer-details{
  background:#121212 !important; border:1px solid #222 !important; border-radius:12px; padding:18px;
}
body.woocommerce-order-received section.woocommerce-customer-details .woocommerce-column__title,
body.woocommerce-view-order section.woocommerce-customer-details .woocommerce-column__title{
  color:#666 !important; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
}
body.woocommerce-order-received section.woocommerce-customer-details address,
body.woocommerce-view-order section.woocommerce-customer-details address{
  color:#b4b4b8 !important; font-style:normal; font-size:14px; line-height:1.6; border:0 !important;
}

/* 7 — .entry-content GOTCHA: theme forces .entry-content h2/h3{color:#fff} (pages.css:26-27)
   and .entry-content a{color:red;border-bottom:…} (pages.css:29). On the OFF-WHITE
   order-received shell that makes the free-standing "Order details" heading invisible and
   adds stray red link underlines. Recolor the section heading by shell + kill link
   underlines inside the order. (The .woocommerce-column__title above stays #666 — it lives
   on the dark customer card, so it is NOT included here.) */
body.woocommerce-order-received .woocommerce-order-details__title{ color:#0c0c0c !important; }
body.woocommerce-view-order .woocommerce-order-details__title{ color:#fff !important; }
body.woocommerce-order-received .woocommerce a,
body.woocommerce-view-order .woocommerce a{ border-bottom:0 !important; }

/* 8 — buttons (order-again / pay / actions) → red app buttons (match account reds) */
body.woocommerce-order-received .woocommerce a.button,
body.woocommerce-order-received .woocommerce a.woocommerce-button,
body.woocommerce-order-received .woocommerce button.button,
body.woocommerce-view-order .woocommerce a.button,
body.woocommerce-view-order .woocommerce a.woocommerce-button,
body.woocommerce-view-order .woocommerce button.button{
  background:#d10000 !important; color:#fff !important; border:0 !important; border-radius:10px;
  font-family:var(--font) !important; font-weight:900; text-transform:uppercase; letter-spacing:1px;
  padding:14px 24px; transition:background .18s, transform .18s;
}
body.woocommerce-order-received .woocommerce a.button:hover,
body.woocommerce-order-received .woocommerce button.button:hover,
body.woocommerce-view-order .woocommerce a.button:hover,
body.woocommerce-view-order .woocommerce button.button:hover{ background:#b60000 !important; transform:translateY(-1px); }

/* ===========================================================================
   SERVICE CONTENT PAGES — Live Recording (176) + Audio Restoration (178).
   ⬜ OFF-WHITE #eceef0 page (per the hard rule), dark cards only where they earn it.
   Simple: hero + image · image/text split · 3 highlights · dark CTA band.
   =========================================================================== */
body.page-id-176, body.page-id-178{ background:#eceef0 !important; }
html:has(body.page-id-176), html:has(body.page-id-178){ background:#eceef0 !important; }
.svc2{ background:#eceef0; color:#151517; overflow:hidden; }

/* hero */
.svc2-hero{ padding:clamp(128px,16vh,178px) 24px clamp(30px,4vw,52px); text-align:center; }
.svc2-hero-text{ max-width:900px; margin:0 auto; }
.svc2-eyebrow{ font-family:var(--font); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin:0 0 16px; }
.svc2-title{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:clamp(46px,7vw,92px); line-height:.9; letter-spacing:-.022em; color:#0c0c0d; margin:0; word-break:normal; overflow-wrap:normal; hyphens:none; }
.svc2-title .pd{ color:var(--red); }
.svc2-lead{ font-family:var(--font); font-size:clamp(16px,1.5vw,19px); font-weight:500; color:#54555b; line-height:1.6; max-width:60ch; margin:22px auto 0; }
.svc2-hero-img{ max-width:1100px; margin:clamp(38px,5vw,60px) auto 0; }
.svc2-hero-img img{ width:100%; height:auto; aspect-ratio:16/8; object-fit:cover; border-radius:20px; display:block; box-shadow:0 44px 84px -52px rgba(0,0,0,.5); }

/* image / text split */
.svc2-split{ padding:clamp(50px,7vw,92px) 24px; }
.svc2-split-in{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.svc2-split-media img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:18px; display:block; box-shadow:0 32px 62px -46px rgba(0,0,0,.45); }
.svc2-split-body h2{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:clamp(26px,3.2vw,40px); line-height:1.02; letter-spacing:-.01em; color:#111214; margin:0 0 20px; }
.svc2-split-body p{ font-family:var(--font); font-size:15.5px; color:#54555b; line-height:1.72; margin:0 0 15px; }
.svc2-split-body p:last-child{ margin-bottom:0; }

/* 3 highlights (light cards, red micro-label) */
.svc2-highlights{ padding:0 24px clamp(52px,7vw,92px); }
.svc2-hl-in{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc2-hl{ background:#ffffff; border:1px solid #e0e0e6; border-radius:16px; padding:26px 24px; }
.svc2-hl-label{ font-family:var(--font); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin:0 0 12px; }
.svc2-hl h3{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:18px; letter-spacing:-.005em; color:#111214; margin:0 0 8px; }
.svc2-hl p{ font-family:var(--font); font-size:13.5px; color:#5c5d63; line-height:1.6; margin:0; }

/* dark CTA band */
.svc2-cta{ padding:0 24px clamp(64px,8vw,104px); }
.svc2-cta-in{ max-width:1120px; margin:0 auto; }
.svc2-cta-inner{ background:#0c0c0d; border-radius:22px; padding:clamp(42px,5vw,66px) clamp(28px,4vw,56px); text-align:center; box-shadow:0 44px 84px -54px rgba(0,0,0,.5); }
.svc2-cta-inner h2{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:clamp(26px,3.4vw,44px); line-height:1; letter-spacing:-.01em; color:#fff; margin:0; }
.svc2-cta-inner p{ font-family:var(--font); font-size:16px; color:#a6a6ac; margin:16px auto 28px; max-width:52ch; line-height:1.6; }

@media(max-width:820px){
  .svc2-split-in{ grid-template-columns:1fr; gap:26px; }
  .svc2-hl-in{ grid-template-columns:1fr; }
}

/* Live Recording retired (redundant with the Recording page). Hide its card on the Elementor
   Services page — verified this element wraps ONLY the Live Recording card. Temporary until the
   Services page gets its own redesign. (The page itself 301-redirects to Recording; nav link removed.) */
.elementor-element-a946c18{ display:none !important; }

/* ============================================================================
   MY ACCOUNT / AUTH (body.woocommerce-account) — mirrors the APP's auth screens
   (screens/LoginScreen · RegisterScreen · LostPasswordScreen) almost identically:
   dark #121212 card · red heading w/ rule · black #000 inputs w/ #333 border ·
   red full-width button · red/grey links — on the OFF-WHITE #eceef0 shell (rule). 2026-07-18
   ============================================================================ */
body.woocommerce-account.mr-light,
html:has(body.woocommerce-account.mr-light){ background:#eceef0 !important; }
body.woocommerce-account.mr-light .page-shell{ background:#eceef0 !important; }
body.woocommerce-account.mr-light .page-title,
body.woocommerce-account.mr-light .entry-title{ color:#0c0c0c !important; }

/* ONE auth card at a time via a pill toggle (built by home.js): single centered column, register
   hidden until selected (hidden by default too, so there's no 2-card flash before JS runs). */
body.woocommerce-account .woocommerce{ max-width:520px !important; margin-left:auto !important; margin-right:auto !important; }
body.woocommerce-account .u-columns{ display:block !important; max-width:460px; margin-left:auto !important; margin-right:auto !important; }
body.woocommerce-account .u-columns::before,
body.woocommerce-account .u-columns::after{ display:none !important; content:none !important; }
body.woocommerce-account .u-column2{ display:none; }
body.woocommerce-account .u-columns.show-register .u-column1{ display:none; }
body.woocommerce-account .u-columns.show-register .u-column2{ display:block; }

/* pill toggle (segmented control) — COMPACT, cloned pixel-for-pixel from the Recording page's Room A/B
   pill (.room-tabbar/.room-tab): content-sized pills (not full-width), centered. Same size on the app. */
body.woocommerce-account .mr-auth-toggle{
  display:flex; width:fit-content; max-width:100%; margin:0 auto 22px; gap:4px; padding:4px;
  background:#111113; border:1px solid #1d1d20; border-radius:12px;
}
body.woocommerce-account .mr-auth-pill{
  padding:11px 30px; border:0; border-radius:9px; background:transparent; color:var(--muted);
  font-family:var(--font); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em;
  cursor:pointer; transition:color .2s, background .2s;
}
body.woocommerce-account .mr-auth-pill:hover{ color:#ffffff; }
body.woocommerce-account .mr-auth-pill.is-active{ background:#d10000; color:#ffffff; }
body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2{
  width:auto !important; float:none !important; margin:0 !important;
  background:#121212 !important; border:1px solid #2a2a2a; border-radius:10px;
  padding:clamp(24px,3vw,35px); box-shadow:0 26px 60px -32px rgba(0,0,0,.5);
}

/* red heading + bottom rule (app formHeading) */
body.woocommerce-account .u-column1 > h2,
body.woocommerce-account .u-column2 > h2{
  color:#d10000 !important; font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  font-size:26px; text-align:center; border-bottom:1px solid #2a2a2a; padding-bottom:15px; margin:0 0 25px;
}
/* labels #aaa + red asterisk */
body.woocommerce-account .u-column1 label,
body.woocommerce-account .u-column2 label{ color:#aaaaaa !important; font-family:var(--font); font-size:14px; font-weight:500; }
body.woocommerce-account .required,
body.woocommerce-account label .required{ color:#d10000 !important; border:0 !important; text-decoration:none; }

/* inputs — black #000, #333 border, white text (app input) */
body.woocommerce-account .u-column1 input.input-text,
body.woocommerce-account .u-column2 input.input-text,
body.woocommerce-account .u-column1 input[type="text"],
body.woocommerce-account .u-column1 input[type="password"],
body.woocommerce-account .u-column2 input[type="email"]{
  background:#000000 !important; border:1px solid #333333 !important; color:#ffffff !important;
  padding:15px !important; border-radius:6px !important; font-size:16px !important; box-shadow:none !important;
  transition:border-color .18s, box-shadow .18s;
}
body.woocommerce-account input::placeholder{ color:#8a8a8e !important; }
body.woocommerce-account .u-column1 input:focus,
body.woocommerce-account .u-column2 input:focus{ border-color:#d10000 !important; box-shadow:0 0 0 3px rgba(209,0,0,.2) !important; outline:none; }
/* password field + eye toggle */
body.woocommerce-account .password-input{ display:block; position:relative; }
body.woocommerce-account .password-input .show-password-input{ position:absolute; right:16px; top:50%; transform:translateY(-50%); cursor:pointer; opacity:.85; transition:opacity .15s; }
body.woocommerce-account .password-input .show-password-input:hover{ opacity:1; }
/* Go renders the eye as a background-image SVG on ::before with a hardcoded near-black (#111) fill, so
   `color` can't recolor it. Invert the pseudo-element → the dark icon renders WHITE (works for both the
   eye and eye-slash / shown-vs-hidden states, since both SVGs share the dark fill). */
body.woocommerce-account .password-input .show-password-input::before{ filter:brightness(0) invert(1) !important; }

/* submit buttons — full-width red (app submitButton) */
body.woocommerce-account button[name="login"],
body.woocommerce-account button[name="register"]{
  background:#d10000 !important; color:#fff !important; border:0 !important; border-radius:6px !important;
  width:100% !important; padding:15px 24px !important; font-family:var(--font) !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.1em; font-size:15px !important; cursor:pointer; box-shadow:none !important;
  transition:background .18s, transform .18s;
}
body.woocommerce-account button[name="login"]:hover,
body.woocommerce-account button[name="register"]:hover{ background:#b60000 !important; transform:translateY(-1px); }

/* remember me — red check, grey text */
body.woocommerce-account input[type="checkbox"]{ accent-color:#d10000; }
body.woocommerce-account .woocommerce-form-login__rememberme span{ color:#aaaaaa !important; }
/* remember me — align the checkbox with its label (the account form had no flex rule,
   unlike checkout) so the box + text sit on one baseline */
body.woocommerce-account .woocommerce-form-login__rememberme{ display:flex !important; align-items:center; gap:8px; margin:4px 0 14px; padding-left:0 !important; text-indent:0 !important; }
body.woocommerce-account .woocommerce-form-login__rememberme input{ margin:0 !important; position:static !important; float:none !important; width:16px; height:16px; flex:0 0 auto; }
body.woocommerce-account .woocommerce-form-login__rememberme span{ line-height:1.1; }

/* register info + privacy copy (app infoTextGray + red privacy link) */
body.woocommerce-account .woocommerce-form-register p,
body.woocommerce-account .woocommerce-privacy-policy-text,
body.woocommerce-account .woocommerce-privacy-policy-text p{ color:#aaaaaa !important; font-size:14px; line-height:1.65; }
body.woocommerce-account .woocommerce-privacy-policy-text a,
body.woocommerce-account .woocommerce-privacy-policy-link{ color:#d10000 !important; }

/* links — lost password red underline (app lostPasswordLink); the login<->register cross-links
   grey underline (app registerLink/loginLink) */
body.woocommerce-account .woocommerce-LostPassword a{ color:#d10000 !important; text-decoration:underline; }
/* the "Need an account? / Already have an account?" cross-links are redundant now the pill toggle
   is the single switcher — hide them (only "Lost your password?" stays, different function). */
body.woocommerce-account a.form-toggle-link{ display:none !important; }

/* --- ACCOUNT NOTICES → dark cards -------------------------------------------------------------
   Cart (~814) and checkout (~1120) both theme WooCommerce's notice boxes; the ACCOUNT area never
   did, so every notice rendered as WooCommerce's stock light-grey box with a blue rule and dark
   body text — on a black dashboard.

   This is not an edge case. A brand-new customer hits THREE of them before they have done anything:
     1. "Your account is using a temporary password…"  (woocommerce-info, on first login)
     2. "Your password has been reset successfully."   (woocommerce-message)
     3. "Are you sure you want to log out?"            (woocommerce-message)
   The "Resend" button inside #1 also rendered orange, because Go's default button styling was the
   only thing reaching it. Same palette as the checkout block so all three surfaces agree. */
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-notice{
  background:#121212 !important; border:1px solid #222 !important; border-left:3px solid #d10000 !important;
  border-radius:12px !important; color:#d6d6da !important; box-shadow:none !important;
  font-family:var(--font); font-size:14.5px; line-height:1.6;
}
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-error::before{ color:#d10000 !important; }
body.woocommerce-account .woocommerce-info a,
body.woocommerce-account .woocommerce-message a,
body.woocommerce-account .woocommerce-error a{ color:#ffffff !important; text-decoration:underline; text-underline-offset:3px; }
/*    Buttons living inside a notice (Resend, "Confirm and log out") — brand red, not Go's orange. */
body.woocommerce-account .woocommerce-info a.button,
body.woocommerce-account .woocommerce-message a.button,
body.woocommerce-account .woocommerce-error a.button,
body.woocommerce-account .woocommerce-info button,
body.woocommerce-account .woocommerce-message button{
  background:#d10000 !important; color:#ffffff !important; border:0 !important; border-radius:6px !important;
  font-family:var(--font); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:13px !important; padding:11px 20px !important; text-decoration:none !important; box-shadow:none !important;
}
body.woocommerce-account .woocommerce-info a.button:hover,
body.woocommerce-account .woocommerce-message a.button:hover,
body.woocommerce-account .woocommerce-error a.button:hover,
body.woocommerce-account .woocommerce-info button:hover,
body.woocommerce-account .woocommerce-message button:hover{ background:#b60000 !important; }

/* LOST PASSWORD page (single form, no columns) → one centered app-card (app LostPasswordScreen) */
body.woocommerce-account .woocommerce-ResetPassword{
  max-width:460px; margin:0 auto; background:#121212 !important; border:1px solid #2a2a2a; border-radius:10px;
  padding:clamp(26px,3vw,35px); box-shadow:0 26px 60px -32px rgba(0,0,0,.5);
}
body.woocommerce-account .woocommerce-ResetPassword > p:first-of-type{ color:#aaaaaa !important; font-family:var(--font); font-size:14px; line-height:1.65; margin:0 0 22px; }
body.woocommerce-account .woocommerce-ResetPassword label{ color:#aaaaaa !important; font-family:var(--font); font-size:14px; font-weight:500; }
body.woocommerce-account .woocommerce-ResetPassword input.input-text{
  background:#000000 !important; border:1px solid #333333 !important; color:#ffffff !important; padding:15px !important;
  border-radius:6px !important; font-size:16px !important; box-shadow:none !important; transition:border-color .18s, box-shadow .18s;
}
body.woocommerce-account .woocommerce-ResetPassword input:focus{ border-color:#d10000 !important; box-shadow:0 0 0 3px rgba(209,0,0,.2) !important; outline:none; }
/*    ⚠️ :not(.show-password-input) IS LOad-BEARING — DO NOT SIMPLIFY THIS BACK TO `button`.
      WooCommerce renders the eye/show-password toggle as a <button> INSIDE this form. A bare
      `.woocommerce-ResetPassword button` therefore also matched the toggle and blew it up to the
      full 382x52px of the input, painted red, sitting on top of the field.

      That is not cosmetic: the toggle is absolutely positioned, so it covered the input completely
      and swallowed every click. `elementFromPoint` over the middle of the field returned
      BUTTON.show-password-input, and Playwright refused to click with "intercepts pointer events".
      A customer could not click into the box to set their password — signup was dead in the water
      at the final step, reachable only by pressing Tab.

      It shipped unnoticed because the LOGIN form's toggle renders correctly (22px, transparent) —
      only this form has the offending rule. Verified 2026-08-09 by walking a real signup. */
body.woocommerce-account .woocommerce-ResetPassword button:not(.show-password-input){
  background:#d10000 !important; color:#fff !important; border:0 !important; border-radius:6px !important;
  width:100% !important; padding:15px 24px !important; font-family:var(--font); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; font-size:15px !important; cursor:pointer; box-shadow:none !important; transition:background .18s;
}
body.woocommerce-account .woocommerce-ResetPassword button:not(.show-password-input):hover{ background:#b60000 !important; }
/*    Put the toggle back to a small transparent icon on the right, and keep the typed characters
      clear of it. Matches the treatment the edit-account form already uses. */
body.woocommerce-account .woocommerce-ResetPassword .password-input{ display:block; position:relative; }
body.woocommerce-account .woocommerce-ResetPassword .password-input .input-text{ padding-right:46px !important; }
body.woocommerce-account .woocommerce-ResetPassword .password-input .show-password-input{
  position:absolute !important; right:14px; top:50%; transform:translateY(-50%);
  width:22px !important; height:22px !important; min-width:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; cursor:pointer; opacity:.85;
}
body.woocommerce-account .woocommerce-ResetPassword .password-input .show-password-input:hover{ background:transparent !important; opacity:1; }
/*    The password strength meter ships hardcoded pastel fills — pale green "Strong", yellow
      "Medium", pink "Weak" — with near-black text. On the dark card it read as a stray
      highlighter bar wedged under the field. Recoloured to tinted bands from this palette; the
      WORD still carries the meaning, so nothing is lost by dropping the pastel.

      ⚠️ The element is WooCommerce's `#password_strength.woocommerce-password-strength`, NOT
      WordPress core's `#pass-strength-result`. Core's id only appears in wp-admin; targeting it
      on the front end silently does nothing (which is exactly what the first attempt here did).
      Both are listed so this survives either being rendered. */
body.woocommerce-account .woocommerce-password-strength,
body.woocommerce-account #password_strength,
body.woocommerce-account #pass-strength-result{
  background:#171719 !important; border:1px solid #2a2a2a !important; border-radius:6px !important;
  color:#c9cad0 !important; font-family:var(--font); font-size:12px !important; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:9px 12px !important; margin:8px 0 0 !important;
  text-align:left; box-shadow:none !important;
}
/*    ⚠️ The state rules MUST carry the #id too. The base rule above lists `#password_strength`,
      and an id (1,1,1) outranks `.woocommerce-password-strength.strong` (0,3,1) no matter how many
      classes are stacked or what order the rules appear in — so a class-only state rule loses and
      every strength renders in the neutral grey. Keep the id on both or drop it from both. */
body.woocommerce-account .woocommerce-password-strength.short,
body.woocommerce-account .woocommerce-password-strength.bad,
body.woocommerce-account #password_strength.short,
body.woocommerce-account #password_strength.bad,
body.woocommerce-account #pass-strength-result.short,
body.woocommerce-account #pass-strength-result.bad{
  background:rgba(209,0,0,.12) !important; border-color:rgba(209,0,0,.45) !important; color:#ff8a8a !important; }
body.woocommerce-account .woocommerce-password-strength.good,
body.woocommerce-account #password_strength.good,
body.woocommerce-account #pass-strength-result.good{
  background:rgba(224,168,0,.12) !important; border-color:rgba(224,168,0,.45) !important; color:#f0c250 !important; }
body.woocommerce-account .woocommerce-password-strength.strong,
body.woocommerce-account #password_strength.strong,
body.woocommerce-account #pass-strength-result.strong{
  background:rgba(43,160,86,.12) !important; border-color:rgba(43,160,86,.45) !important; color:#68d391 !important; }

/*    The nav is `position:fixed` at 66px, so a field scrolled to the top of the viewport — by Tab,
      by an autofocus, or by the browser restoring a scroll position — lands underneath it and is
      unclickable until the user scrolls back. Reserve the header's height plus breathing room. */
body.woocommerce-account .woocommerce-ResetPassword,
body.woocommerce-account .woocommerce-ResetPassword input,
body.woocommerce-account form.woocommerce-form-login input,
body.woocommerce-account form.woocommerce-form-register input{ scroll-margin-top:90px; }

@media (max-width:760px){
  body.woocommerce-account .u-columns{ grid-template-columns:1fr; }
}

/* ============================================================================
   LOGGED-IN MY ACCOUNT DASHBOARD (body.woocommerce-account.logged-in)
   Two-column app-style layout: dark branded sidebar + content area on off-white.
   Reference layout = Kangaroo dashboard; theme = the app (dark cards on #eceef0).
   Scoped to .logged-in so it never touches the logged-OUT login/register/reset views.
   ============================================================================ */

/* full-width two-column shell. Go sets an explicit `width` on .woocommerce (not max-width), so we must
   force width:100% !important to fill the parent — otherwise it left-aligns and leaves a gap on the
   right. Runs edge-to-edge with only a tiny gutter so cards never literally touch the screen edge. */
body.woocommerce-account.logged-in .woocommerce{
  display:flex !important; align-items:flex-start; gap:28px;
  max-width:none !important; width:100% !important; margin:0 !important;
  padding:0 clamp(14px, 1.2vw, 24px) !important; box-sizing:border-box !important;
}
/* Go adds .woocommerce::before/::after clearfix pseudos; as flex children they became 0-width items
   and the 28px column-gap on each END pushed both columns inward (the mystery 28px). Kill them so the
   only gutter is the container padding. */
body.woocommerce-account.logged-in .woocommerce::before,
body.woocommerce-account.logged-in .woocommerce::after{ content:none !important; display:none !important; }

/* ---- sidebar panel ---- */
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation{
  flex:0 0 262px; width:262px; box-sizing:border-box;
  background:#000000; border:1px solid #202023; border-radius:16px; padding:14px;
  position:sticky; top:108px;
}
/* brand block: MR logo + Midrange Music + username */
.mr-acct-brand{ display:flex; align-items:center; gap:11px; padding:8px 8px 15px; margin-bottom:10px; border-bottom:1px solid #202023; }
.mr-acct-brand-logo{ width:38px; height:38px; object-fit:contain; flex:0 0 38px; }
.mr-acct-brand-meta{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.mr-acct-brand-name{ color:#ffffff; font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.02em; text-transform:uppercase; }
.mr-acct-brand-user{ color:#7a7a7e; font-family:var(--font); font-size:12px; font-weight:600; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* mobile account-nav dropdown trigger (hidden on desktop; shown ≤900px) */
.mr-acct-navtoggle{ display:none; align-items:center; justify-content:space-between; gap:12px; width:100%; background:#1c1c1e; border:1px solid #2c2c2e; border-radius:12px; padding:14px 16px; color:#ffffff; font-family:var(--font); font-size:15px; font-weight:700; cursor:pointer; text-align:left; }
.mr-acct-navtoggle-cur{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mr-acct-navtoggle-chev{ flex:0 0 auto; width:9px; height:9px; border-right:2px solid #888888; border-bottom:2px solid #888888; transform:rotate(45deg); transition:transform .18s; }
.mr-acct-navtoggle[aria-expanded="true"] .mr-acct-navtoggle-chev{ transform:rotate(-135deg); }

/* nav list */
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link{ margin:0; border:0; }
/* red "button" tabs (a touch larger); hover → off-white. Active = off-white (the "held"/current tab) so
   it's distinguishable from the red idle tabs. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link a{
  display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:10px;
  background:#d10000; color:#ffffff; font-family:var(--font); font-size:15px; font-weight:600; text-decoration:none;
  transition:background .15s, color .15s;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link a::before{
  content:''; width:20px; height:20px; flex:0 0 20px; background-color:currentColor;
  -webkit-mask:var(--mr-icon) center/contain no-repeat; mask:var(--mr-icon) center/contain no-repeat;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link a:hover{ background:#eceef0; color:#0c0c0c; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link.is-active a{ background:#eceef0; color:#0c0c0c; }

/* per-endpoint icons (masked → inherit link color) */
.woocommerce-MyAccount-navigation-link--dashboard a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--bookings a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--messages a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--loyalty_reward a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--payment-methods a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E"); }

/* ---- content column ---- */
body.woocommerce-account.logged-in .woocommerce-MyAccount-content{ flex:1 1 auto; min-width:0; padding-top:2px; }
/* injected section header (home.js): title + placeholder action button */
.mr-acct-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid #d7dade; }
.mr-acct-title{ font-family:var(--disp); font-weight:700; font-size:26px; letter-spacing:.01em; text-transform:uppercase; color:#0c0c0c; margin:0; }
.mr-acct-action{ background:#d10000; color:#ffffff; border:0; border-radius:10px; padding:11px 18px; font-family:var(--font); font-weight:700; font-size:13px; letter-spacing:.03em; text-transform:uppercase; cursor:pointer; white-space:nowrap; transition:background .15s, transform .15s; }
.mr-acct-action:hover{ background:#b60000; transform:translateY(-1px); }
/* Center the capped-width content blocks within the (edge-to-edge) content column, instead of
   left-hugging the sidebar. The header caps to the same 920px so it lines up with the content. */
body.woocommerce-account.logged-in .mr-acct-header,
body.woocommerce-account.logged-in .mr-studio,
body.woocommerce-account.logged-in .mr-sessions,
body.woocommerce-account.logged-in .mr-alerts,
body.woocommerce-account.logged-in .mr-alerts-empty,
body.woocommerce-account.logged-in .mr-music,
body.woocommerce-account.logged-in .mr-studio-view,
body.woocommerce-account.logged-in .mr-studio-stub{ margin-left:auto !important; margin-right:auto !important; }
body.woocommerce-account.logged-in .mr-acct-header{ max-width:920px; }
body.woocommerce-account.logged-in .mr-studio-stub{ max-width:920px; }
/* default dashboard text stays readable on off-white until each section is bespoke-styled */
body.woocommerce-account.logged-in .woocommerce-MyAccount-content{ color:#3a3d42; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-content a{ color:#d10000; }

/* ---- responsive: sidebar collapses to a horizontal tab strip ---- */
@media (max-width:900px){
  body.woocommerce-account.logged-in .woocommerce{ flex-direction:column; gap:18px; }
  body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation{ position:static; width:100%; flex-basis:auto; }
  /* mobile: rail → dropdown. A trigger shows the current section; tapping it
     expands the menu list below (replaces the horizontal-scroll pill strip). */
  body.woocommerce-account.logged-in .mr-acct-navtoggle{ display:flex; }
  body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul{ display:none; flex-direction:column; gap:6px; margin-top:8px; }
  body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.is-open ul{ display:flex; }
}

/* ---- FULL-HEIGHT APP RAIL + slim top bar (desktop ≥ 901px) -----------------
   Breaks the sidebar out of page flow into a FIXED left rail that spans the
   whole viewport height, and repurposes the site's floating glass nav into a
   slim top bar pinned to the right of the rail — solid dark chrome framing the
   off-white content, so the web dashboard reads like a native app. Everything
   here is desktop-only; ≤ 900px keeps the existing stacked/tab-strip layout. */
@media (min-width:901px){
  /* rail: fixed, floor-to-ceiling, flush to the top-left corner (not a card) */
  body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation{
    position:fixed; top:0; left:0; bottom:0; width:264px; height:100dvh;
    margin:0; border:0; border-right:1px solid #202023; border-radius:0;
    background:#000000; padding:18px 14px; overflow-y:auto; z-index:70;
    display:flex; flex-direction:column;
  }
  body.woocommerce-account.logged-in .mr-acct-brand{ padding:6px 8px 16px; text-decoration:none; }
  /* the nav list fills the rail; Account Details + Log Out are pushed to the bottom */
  body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul{ flex:1 1 auto; }
  body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link--edit-account{ margin-top:auto; }

  /* the site's glass nav → slim SOLID-dark top bar, offset by the rail width */
  body.woocommerce-account.logged-in .nav{
    top:0; left:264px; right:0; width:auto; max-width:none; transform:none;
    border-radius:0; border-bottom:1px solid #202023; z-index:60;
  }
  body.woocommerce-account.logged-in .nav.glass{
    background:#000000; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
  }
  body.woocommerce-account.logged-in .nav .brand{ display:none; }        /* rail already carries the brand */
  /* Keep the site links in the SAME horizontal spot as the normal floating glass nav so they don't
     shift when navigating between the dashboard and the rest of the site. The glass nav is a centered
     pill (max var(--wrap)=1360, else 100%-26), links right-aligned inside 26px padding → their right
     edge sits `26 + max(13, (100vw-1360)/2)` from the viewport edge. We reproduce that exact gutter on
     this full-width bar and right-align the links. `100%` here = the bar's content-box width =
     (viewport-minus-scrollbar − 264px rail), so the gutter is computed in the SAME coordinate system
     the glass nav centers in — matching to the pixel with or without a scrollbar. 1096 = 1360 − 264. */
  body.woocommerce-account.logged-in .nav-in{ height:64px; padding-left:clamp(22px,2.4vw,40px); padding-right:calc(26px + max(13px, (100% - 1096px) / 2)); }
  body.woocommerce-account.logged-in .nav-links{ margin-left:auto; }     /* right-align to match the glass nav */

  /* offset the whole content shell + footer past the fixed rail + top bar */
  body.woocommerce-account.logged-in .page-shell{
    padding-top:88px; padding-left:264px; padding-bottom:clamp(48px,6vw,88px); min-height:100dvh;
  }
  body.woocommerce-account.logged-in .page-shell > .wrap{ max-width:none; margin:0; padding-inline:0; }
  body.woocommerce-account.logged-in .woocommerce{ padding:0 clamp(24px,3vw,48px) !important; }
  body.woocommerce-account.logged-in footer.site{ padding-left:264px; }
}

/* ═══ FULL-BLACK DASHBOARD (2026-07-19) ══════════════════════════════════════
   The logged-in account area is an "app", so per the builder it goes wall-to-wall
   black: black page background + black rail + black top bar, with the app cards
   floating on it like the native app. Scoped to .logged-in ONLY — the off-white
   rule still holds for the whole marketing site AND the logged-OUT login/register/
   reset pages. */
body.woocommerce-account.logged-in.mr-light,
html:has(body.woocommerce-account.logged-in.mr-light){ background:#000000 !important; }
body.woocommerce-account.logged-in.mr-light .page-shell{ background:#000000 !important; }
/* text that used to sit on off-white flips to light on the black ground */
body.woocommerce-account.logged-in .woocommerce-MyAccount-content{ color:#b4b4b8; }
body.woocommerce-account.logged-in .mr-acct-title{ color:#ffffff; }
body.woocommerce-account.logged-in .mr-acct-header{ border-bottom-color:#1c1c1f; }
body.woocommerce-account.logged-in .mr-studio-view-title{ color:#ffffff; }
body.woocommerce-account.logged-in .mr-studio-view-sub{ color:#8a8a8e; }

/* ---------------------------------------------------------------------------
   ACCOUNT DETAILS (edit-account) → app Profile (screens/... ProfileScreen)
   Centered avatar block + dark #121212 form card on the off-white shell. A wide
   full-bleed form reads badly, so this section constrains to ~760px centered.
   Password eye-toggles inherit the global white-eye filter fix.
   --------------------------------------------------------------------------- */
/* avatar block */
body.woocommerce-account.logged-in .midrange-avatar-wrapper{ max-width:760px; margin:4px auto 22px; }
body.woocommerce-account.logged-in #basic-user-avatar-form{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
body.woocommerce-account.logged-in #basic-user-avatar-form img.avatar{
  width:96px; height:96px; border-radius:50%; object-fit:cover; border:2px solid #d10000; background:#121212;
}
body.woocommerce-account.logged-in #basic-user-avatar-form p{ margin:0; }
body.woocommerce-account.logged-in #basic-local-avatar{ color:#888888; font-family:var(--font); font-size:12px; }
body.woocommerce-account.logged-in #basic-local-avatar::file-selector-button{
  background:#1c1c1e; border:1px solid #333333; color:#ffffff; font-family:var(--font); font-weight:700; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; padding:9px 16px; border-radius:6px; margin-right:12px; cursor:pointer; transition:.15s;
}
body.woocommerce-account.logged-in #basic-local-avatar::file-selector-button:hover{ border-color:#d10000; color:#d10000; }
body.woocommerce-account.logged-in #basic-user-avatar-form label,
body.woocommerce-account.logged-in #basic-user-avatar-form .description{ color:#7a7a7e; font-family:var(--font); font-size:12px; }
body.woocommerce-account.logged-in #basic-user-avatar-form .description{ max-width:440px; line-height:1.55; }
body.woocommerce-account.logged-in #basic-user-avatar-form input[type="submit"]{
  background:#1c1c1e; border:1px solid #333333; color:#ffffff; font-family:var(--font); font-weight:700; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; padding:11px 22px; border-radius:6px; cursor:pointer; transition:.15s; box-shadow:none;
}
body.woocommerce-account.logged-in #basic-user-avatar-form input[type="submit"]:hover{ border-color:#d10000; color:#d10000; background:#1c1c1e; }

/* form card */
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm{
  max-width:760px; margin:0 auto; background:#121212; border:1px solid #2a2a2a; border-radius:14px; padding:clamp(22px,3vw,32px);
}
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm .form-row{ margin:0 0 18px; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm label{ display:block; color:#aaaaaa; font-family:var(--font); font-size:13px; font-weight:600; margin-bottom:8px; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm .required{ color:#d10000 !important; border:0 !important; text-decoration:none; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm .input-text{
  width:100%; background:#000000; border:1px solid #333333; color:#ffffff; border-radius:6px; padding:12px 14px; font-size:15px; box-sizing:border-box; transition:border-color .15s, box-shadow .15s;
}
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm .input-text:focus{ border-color:#d10000; box-shadow:0 0 0 3px rgba(209,0,0,.2); outline:none; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm .input-text::placeholder{ color:#8a8a8e; }
/* keep WC's side-by-side first/last */
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm .form-row-first{ width:48%; float:left; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm .form-row-last{ width:48%; float:right; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm em{ color:#d10000; font-size:11px; font-style:italic; line-height:1.5; display:block; margin-top:7px; }
/* password section */
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm fieldset{ border:0; border-top:1px solid #2a2a2a; margin:8px 0 0; padding:22px 0 0; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm legend{ color:#d10000; font-family:var(--font); font-weight:800; font-size:15px; letter-spacing:.06em; text-transform:uppercase; padding:0; margin-bottom:18px; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm .password-input{ display:block; position:relative; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm .password-input .input-text{ padding-right:44px; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm .password-input .show-password-input{ position:absolute; right:14px; top:50%; transform:translateY(-50%); }
/* actions: red SAVE full-width, Delete = underlined grey link below */
body.woocommerce-account.logged-in .midrange-action-wrapper{ display:flex; flex-direction:column; align-items:center; margin-top:4px; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm button.button:not(.midrange-delete-btn){
  width:100%; background:#d10000 !important; border:0 !important; color:#ffffff !important; font-family:var(--font); font-weight:700;
  font-size:14px !important; letter-spacing:.06em; text-transform:uppercase; padding:15px !important; border-radius:8px; cursor:pointer;
  box-shadow:none !important; transition:background .15s, transform .15s;
}
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm button.button:not(.midrange-delete-btn):hover{ background:#b60000 !important; transform:translateY(-1px); }
body.woocommerce-account.logged-in .midrange-delete-btn{
  background:none !important; border:0 !important; color:#8a8a8e !important; font-family:var(--font) !important; font-size:12px !important;
  font-weight:600 !important; text-transform:none !important; letter-spacing:0 !important; text-decoration:underline; padding:16px 0 0 !important; cursor:pointer;
}
body.woocommerce-account.logged-in .midrange-delete-btn:hover{ color:#d10000 !important; background:none !important; }

/* ---------------------------------------------------------------------------
   PAYMENT METHODS → light restyle: dark empty-state card + saved-method rows +
   red "Add payment method". (Low priority per brief — keep it simple/on-theme.)
   --------------------------------------------------------------------------- */
body.woocommerce-account.logged-in .woocommerce-MyAccount-content > .woocommerce-info{
  max-width:760px; margin:0 auto 18px; background:#121212; border:1px solid #2a2a2a; border-radius:14px;
  color:#b4b4b8; font-family:var(--font); font-size:15px; padding:34px 28px; text-align:center; box-shadow:none;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content > .woocommerce-info::before{ content:none !important; }
/* saved cards table (when present) — ONE dark card holding clean line-separated rows.
   (Per-cell boxes fragmented the row because WC-Stripe adds extra default/actions cells,
   leaving the Delete button + Default badge in disconnected boxes.) */
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods{ max-width:760px; margin:0 auto 18px; width:100%; border-collapse:collapse; border-spacing:0; background:#121212; border:1px solid #2a2a2a; border-radius:14px; overflow:hidden; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods thead th{ background:transparent; border:0; border-bottom:1px solid #2a2a2a; color:#8a8a8e; font-family:var(--font); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:14px 18px; text-align:left; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody td{ background:transparent; border:0; border-top:1px solid #222; color:#e6e6e8; font-family:var(--font); padding:16px 18px; vertical-align:middle; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody tr:first-child td{ border-top:0; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td.woocommerce-PaymentMethod--actions,
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td.payment-method-actions,
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods thead th:last-child{ text-align:right; white-space:nowrap; }
/* red "Add payment method" button, centered under the card */
body.woocommerce-account.logged-in .woocommerce-MyAccount-content > a.button{
  display:block; width:fit-content; max-width:100%; margin:0 auto; background:#d10000 !important; border:0 !important; color:#ffffff !important;
  font-family:var(--font); font-weight:700; font-size:13px !important; letter-spacing:.04em; text-transform:uppercase;
  padding:13px 24px !important; border-radius:8px; box-shadow:none !important; transition:background .15s, transform .15s;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content > a.button:hover{ background:#b60000 !important; transform:translateY(-1px); }
/* saved-card IN-TABLE controls: the red-button rule above uses ">" so it can't reach the
   Delete / Make-default buttons nested in the table — they fell back to the theme's orange
   .button. Restyle them on-theme, plus the gateway "Default" badge. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td .button{
  display:inline-block; vertical-align:middle; margin:0 0 0 8px !important; background:#1e1e1e !important; border:1px solid #333 !important; color:#e6e6e8 !important;
  font-family:var(--font); font-weight:700; font-size:12px !important; letter-spacing:.03em; text-transform:uppercase;
  padding:9px 16px !important; border-radius:8px; box-shadow:none !important; transition:background .15s, border-color .15s, color .15s;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td .button:hover{ background:#2a2a2a !important; border-color:#3a3a3e !important; color:#fff !important; }
/* the Delete action (WC/Stripe adds .delete on it) → red-tinted danger */
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td a.delete,
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td .button.delete{
  background:rgba(209,0,0,.10) !important; border-color:rgba(209,0,0,.45) !important; color:#ff6a6a !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td a.delete:hover,
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td .button.delete:hover{ background:#d10000 !important; border-color:#d10000 !important; color:#fff !important; }
/* "Default" marker → on-theme red chip.
   ⚠️ Chip the <mark>, NEVER the cell. WooCommerce renders
       <td class="payment-method-default"><mark class="default">Default</mark></td>
   and puts that same `payment-method-default` class on the <th> as well. Styling the class
   directly therefore did two things wrong at once: it made the CELL display:inline-block, so it
   sat 26px tall inside a 66px row, and it painted the column header as a stray 18x8 red bar
   floating below the other headings. Targeting the inner element fixes both at the source. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td.payment-method-default,
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td.wc-payment-method-default{
  display:table-cell; vertical-align:middle; border-radius:0; }
/*    NAME THE ELEMENT — never a bare `.default`. WooCommerce also renders the second
      action as <a class="button default">Make default</a>, so a bare `td .default`
      chips that BUTTON down to a 10px, 3px-padded pill: 18px tall next to a 32px
      Delete. It is invisible with one saved card (a default card has no such button)
      and only appears once a second card exists — which is exactly how it shipped. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td mark.default,
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td span.default{
  display:inline-block; vertical-align:middle; background:rgba(209,0,0,.14) !important; color:#ff6a6a !important; border:1px solid rgba(209,0,0,.4) !important;
  font-size:10px !important; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px !important; border-radius:6px; line-height:1;
}

/* 2) Each saved method now reads as its own selectable card rather than a bare table
      row: a light border all the way round, its own fill, and rounded ends. Rows need
      border-spacing, so the table switches to `separate` — which also means the
      first-row `border-top:0` rule above has to be undone. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods{
  border-collapse:separate; border-spacing:0 10px; padding:0 12px 12px; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods thead th{ padding-bottom:8px; }
/*    !important throughout: both WooCommerce's own shop_table rules and the Go parent's
      `table td` rules zero these borders out from a later stylesheet, so background and
      radius landed while the borders alone computed to `0px none`. Same tactic the rest
      of this payment-methods block already uses. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody td,
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody tr:first-child td{
  background:#171719 !important;
  border-top:1px solid rgba(255,255,255,.22) !important;
  border-bottom:1px solid rgba(255,255,255,.22) !important; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody td:first-child{
  border-left:1px solid rgba(255,255,255,.22) !important;
  border-top-left-radius:12px; border-bottom-left-radius:12px; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody td:last-child{
  border-right:1px solid rgba(255,255,255,.22) !important;
  border-top-right-radius:12px; border-bottom-right-radius:12px; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody tr:hover td{
  border-color:rgba(255,255,255,.42) !important; background:#1b1b1e !important; }

/*    Action alignment across rows. With two or more saved cards WooCommerce renders
      [Delete] on the default row but [Delete]&nbsp;[Make default] on every other one, all
      right-aligned — so the Delete buttons sat at different x positions row to row.
      direction:rtl lays the cell out from the right edge, which pins Delete (always first in
      the DOM) to the right in EVERY row and pushes Make default to its left; the buttons are
      set back to ltr so their own labels read normally.
      ⚠️ Deliberately not display:flex — that drops the <td> out of the table box model and
      the columns stop aligning altogether, which is the very thing being fixed. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td.payment-method-actions{
  direction:rtl; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td.payment-method-actions .button{
  direction:ltr; margin:0 0 0 8px !important; }
/*    "Make default" is an ACTION; the red chip in the Default column is a STATUS. Styled the
      same they read as one object appearing at two different x positions, which is what made
      the row look misaligned even where it wasn't. Ghost it. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td.payment-method-actions .button:not(.delete){
  background:transparent !important; border-color:#3a3a3e !important; color:#c9cad0 !important; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td.payment-method-actions .button:not(.delete):hover{
  background:#2a2a2a !important; border-color:#4a4a4e !important; color:#fff !important; }

/*    Under 768px WooCommerce's own smallscreen sheet turns the row into a block and stacks the
      cells, so the per-cell borders above would draw FIVE horizontal strips instead of one card,
      and the Default cell would sit at table-cell width inside the stack. Below that breakpoint
      the ROW carries the card and the cells go flat. */
@media (max-width:768px){
  body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods{
    border-spacing:0; padding:0 12px 12px; }
  body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody tr{
    display:block; background:#171719; border:1px solid rgba(255,255,255,.22);
    border-radius:12px; overflow:hidden; margin:0 0 10px; }
  body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody td,
  body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody tr:first-child td,
  body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods td.payment-method-default{
    display:block; width:auto !important; background:transparent !important;
    border:0 !important; border-radius:0 !important; padding:10px 16px !important; }
  body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody td:first-child{
    padding-top:16px !important; }
  body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody td:last-child{
    padding-bottom:16px !important; }
  /* WooCommerce's stacked layout adds a ::before column label to every cell, so the Details
     column — which card gateways (Stripe/WooPayments) always leave blank — rendered as a
     labelled empty row inside the card. :empty can't catch it (it holds a whitespace text node)
     and zeroing padding doesn't help while the ::before label still draws a line box.
     Hidden outright on mobile. If a gateway is ever added that DOES populate Details, drop
     this rule. */
  body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody td.payment-method-details{
    display:none !important; }
  /* The actions column has no heading, so its generated label renders as a bare " : ". */
  body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody td.payment-method-actions::before{
    display:none !important; }
  /* Same dangling-label problem on the Default column, but only for the cards that AREN'T
     the default — WooCommerce prints the <mark> only for the default one, leaving every
     other card with a "Default?:" heading and nothing under it. Matched on the absence of
     the chip rather than :empty, since the cell keeps its whitespace text node. */
  body.woocommerce-account.logged-in .woocommerce-MyAccount-paymentMethods tbody td.payment-method-default:not(:has(mark)):not(:has(span)){
    display:none !important; }
}

/* ---------------------------------------------------------------------------
   ADD PAYMENT METHOD page (/account-page/add-payment-method/, body.woocommerce-add-payment-method)
   → app card-entry screen (Stripe CardField block in app/booking-summary.jsx):
   dark matte #121212 form card, #1a1a1a field wells w/ #333 borders + radius 8,
   brand-red #d10000 CTA, no glass. Account shell here is deliberately pure-black
   #000 (do NOT override). Sibling of the LIST styling above; CTA kept consistent
   with `.woocommerce-MyAccount-content > a.button`.

   NOTE (known follow-up, NOT solvable in CSS): the real card number / expiry / CVC
   fields render inside a CROSS-ORIGIN Stripe iframe — CSS cannot reach their
   interior (digit color, placeholder text, caret). Only the wrapper div is
   CSS-reachable (styled below). Theming the iframe interior requires the gateway's
   Appearance API (a JS/PHP hook) which is OUT OF SCOPE for this CSS-only pass.
   --------------------------------------------------------------------------- */
/* form wrapper → app cardInputCard */
body.woocommerce-add-payment-method #payment{
  max-width:760px !important; margin:0 auto !important; background:#121212 !important;
  border:1px solid #222 !important; border-radius:12px !important; padding:20px !important; box-shadow:none !important;
}
body.woocommerce-add-payment-method #payment .payment_methods{ border:0 !important; }
body.woocommerce-add-payment-method #payment .wc_payment_method{ background:transparent !important; }
/* gateway title — classic markup (.wc_payment_method) AND block/UPE markup
   (.woocommerce-PaymentMethod > label, which defaults to an unreadable navy #13263a) */
body.woocommerce-add-payment-method #payment .wc_payment_method > label,
body.woocommerce-add-payment-method .woocommerce-PaymentMethod > label,
body.woocommerce-add-payment-method .woocommerce-PaymentMethod label{ color:#fff !important; font-family:var(--font) !important; font-weight:700 !important; }
body.woocommerce-add-payment-method .woocommerce-PaymentMethod{ background:transparent !important; }
/* radios → red (Go/browser default renders them orange) */
body.woocommerce-add-payment-method #payment input[type="radio"],
body.woocommerce-add-payment-method #payment input.input-radio{ accent-color:#d10000 !important; }

/* ── The two payment OPTIONS (Credit / Debit Card, ACH Direct Debit) ─────────
   Markup is <li><input.input-radio><label for=…><div.payment_box>. The rules above
   deliberately made each <li> transparent, which left the choices as bare headings with
   nothing to show they were selectable — and the real radio is rendered at opacity:0, so
   there was no selected indicator at all. Each option is now a card, matching the saved-
   methods list, with the selected one carrying the studio red.
   The radio is visually hidden but still focusable, and the dot is drawn on the label so
   keyboard users keep a visible focus ring. */
body.woocommerce-add-payment-method #payment .woocommerce-PaymentMethods > li,
body.woocommerce-add-payment-method #payment .payment_methods > li{
  background:#141416 !important; border:1px solid rgba(255,255,255,.22) !important;
  border-radius:12px !important; padding:16px 18px !important; margin:0 0 12px !important;
  list-style:none; transition:border-color .18s ease, background-color .18s ease; }
body.woocommerce-add-payment-method #payment .woocommerce-PaymentMethods > li:hover{
  border-color:rgba(255,255,255,.42) !important; }
body.woocommerce-add-payment-method #payment .woocommerce-PaymentMethods > li:has(input.input-radio:checked){
  border-color:rgba(209,0,0,.7) !important; background:#171214 !important; }

/* Hidden but focusable — display:none would drop it out of the tab order. */
body.woocommerce-add-payment-method #payment .woocommerce-PaymentMethods > li > input.input-radio{
  position:absolute !important; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }

body.woocommerce-add-payment-method #payment .woocommerce-PaymentMethods > li > label{
  display:flex !important; align-items:center; gap:12px; margin:0 !important; cursor:pointer !important;
  font-size:15px !important; }
body.woocommerce-add-payment-method #payment .woocommerce-PaymentMethods > li > label::before{
  content:""; flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); background:transparent;
  transition:border-color .18s ease, box-shadow .18s ease; }
body.woocommerce-add-payment-method #payment .woocommerce-PaymentMethods > li:has(input.input-radio:checked) > label::before{
  border-color:#d10000; box-shadow:inset 0 0 0 4px #d10000; }
body.woocommerce-add-payment-method #payment .woocommerce-PaymentMethods > li > input.input-radio:focus-visible + label::before{
  outline:2px solid #d10000; outline-offset:3px; }

/* Gateway badge (the ACH bank mark) sits inside the label — park it on the right. */
body.woocommerce-add-payment-method #payment .woocommerce-PaymentMethods > li > label img{
  margin-left:auto; height:24px; width:auto; }

/* The form well is now nested inside the option card; give it breathing room. */
body.woocommerce-add-payment-method #payment .woocommerce-PaymentMethods > li > .payment_box{
  margin:14px 0 0 !important; }
/* description / fields box */
body.woocommerce-add-payment-method #payment .payment_box{
  background:#0c0c0c !important; border:1px solid #1e1e20 !important; border-radius:12px !important;
  color:#c2c2c6 !important; box-shadow:none !important;
}
body.woocommerce-add-payment-method #payment .payment_box::before{ display:none !important; } /* kill the callout triangle */
/* links → red, no underline (also neutralizes the .entry-content a red-underline leak) */
body.woocommerce-add-payment-method #payment .payment_box a,
body.woocommerce-add-payment-method #payment a{ color:#d10000 !important; text-decoration:none !important; }
/* Stripe/WooPayments card-element WRAPPER div (parent-document, NOT the iframe) → app CardField well */
body.woocommerce-add-payment-method #wcpay-upe-element,
body.woocommerce-add-payment-method .wcpay-upe-element,
body.woocommerce-add-payment-method #wcpay-card-element,
body.woocommerce-add-payment-method #wc-stripe-card-element,
body.woocommerce-add-payment-method #wc-stripe-upe-element,
body.woocommerce-add-payment-method #stripe-card-element{
  background:#1a1a1a !important; border:1px solid #333 !important; border-radius:8px !important; padding:14px !important;
}
/* plain text inputs the gateway prints outside the iframe (e.g. name-on-card) */
body.woocommerce-add-payment-method #payment .input-text,
body.woocommerce-add-payment-method #payment input[type="text"]{
  background:#1a1a1a !important; border:1px solid #333 !important; color:#fff !important; border-radius:8px !important; padding:12px 14px !important;
}
body.woocommerce-add-payment-method #payment .input-text::placeholder,
body.woocommerce-add-payment-method #payment input[type="text"]::placeholder{ color:#555 !important; }
/* submit → app payButton (red, full-width, prominent) */
body.woocommerce-add-payment-method #place_order{
  display:block !important; width:100% !important; max-width:760px !important; margin:16px auto 0 !important;
  background:#d10000 !important; color:#fff !important; border:0 !important; border-radius:10px !important; padding:16px 24px !important;
  font-family:var(--font) !important; font-weight:900 !important; text-transform:uppercase !important; letter-spacing:.06em !important;
  font-size:15px !important; box-shadow:none !important; transition:background .18s, transform .18s;
}
body.woocommerce-add-payment-method #place_order:hover{ background:#b60000 !important; transform:translateY(-1px); }
body.woocommerce-add-payment-method #place_order:active{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  body.woocommerce-add-payment-method #place_order{ transition:none !important; }
}

/* ---------------------------------------------------------------------------
   ACCOUNT DETAILS — center the avatar "Choose File" control under the avatar.
   Basic User Avatars renders a native file input as one inline box: [Choose File]
   [No file chosen]. Its parent <p> is already centered under the avatar, so the
   BUTTON (left third of the box) sits left-of-center. Collapse the redundant
   "No file chosen" text (font-size:0 on the input) so the box shrinks to just the
   button → the centered parent then centers the button. Restore the button's own
   font on the file-selector pseudo so its label stays readable.
   --------------------------------------------------------------------------- */
body.woocommerce-account.logged-in #basic-local-avatar{ font-size:0 !important; }
body.woocommerce-account.logged-in #basic-local-avatar::file-selector-button{ font-size:.82rem !important; }
body.woocommerce-account.logged-in #basic-local-avatar::-webkit-file-upload-button{ font-size:.82rem !important; }

/* ---------------------------------------------------------------------------
   STUDIO ALERTS (dashboard) → app Announcements archive (app/announcements.jsx)
   Red-left-tick alert cards → tap opens a modal with the full alert + copy-coupon.
   --------------------------------------------------------------------------- */
.mr-alerts{ max-width:920px; }
.mr-alerts-list{ display:flex; flex-direction:column; gap:14px; }
.mr-alert-card{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:#121212; border:1px solid #222222; border-radius:10px; padding:16px 16px 16px 20px; position:relative;
  transition:border-color .15s, transform .12s; font-family:var(--font);
}
.mr-alert-card:hover{ border-color:#3a3a3e; transform:translateY(-1px); }
.mr-alert-card:focus-visible{ outline:2px solid #d10000; outline-offset:2px; }
.mr-alert-tick{ position:absolute; left:0; top:14px; bottom:14px; width:3px; background:#d10000; border-radius:0 2px 2px 0; }
.mr-alert-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.mr-alert-title{ color:#ffffff; font-size:15px; font-weight:700; line-height:1.3; }
.mr-alert-snippet{ color:#6b6b70; font-size:12.5px; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mr-alert-chevron{ flex:0 0 auto; width:8px; height:8px; border-right:2px solid #555555; border-top:2px solid #555555; transform:rotate(45deg); margin-right:2px; }

.mr-alerts-empty{ max-width:640px; background:#121212; border:1px solid #2a2a2a; border-radius:14px; padding:44px 28px; text-align:center; }
.mr-alerts-empty p{ color:#8a8a8e; font-family:var(--font); font-size:15px; line-height:1.7; margin:0; }
.mr-alerts-empty p span{ color:#5a5a5e; font-size:13px; }
.mr-alerts-empty-icon{ display:block; width:34px; height:34px; margin:0 auto 14px; border:2px solid #d10000; border-radius:50%; position:relative; opacity:.9; }
.mr-alerts-empty-icon::before{ content:''; position:absolute; left:50%; top:7px; width:2px; height:12px; background:#d10000; transform:translateX(-50%); border-radius:1px; }
.mr-alerts-empty-icon::after{ content:''; position:absolute; left:50%; bottom:6px; width:3px; height:3px; background:#d10000; transform:translateX(-50%); border-radius:50%; }

/* modal */
.mr-alert-modal[hidden]{ display:none; }
.mr-alert-modal{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; }
.mr-alert-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.72); }
.mr-alert-modal-sheet{
  position:relative; width:min(560px, calc(100vw - 36px)); max-height:82vh; overflow-y:auto;
  background:#121212; border:1px solid #2a2a2a; border-radius:18px; padding:30px; box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.mr-alert-modal-x{ position:absolute; top:14px; right:18px; background:none; border:0; color:#8a8a8e; font-size:28px; line-height:1; cursor:pointer; padding:0; }
.mr-alert-modal-x:hover{ color:#ffffff; }
.mr-alert-modal-eyebrow{ color:#d10000; font-family:var(--font); font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.mr-alert-modal-title{ color:#ffffff; font-family:var(--disp); font-weight:700; font-size:24px; line-height:1.25; margin:12px 0 6px; text-transform:uppercase; letter-spacing:.01em; }
.mr-alert-modal-meta{ color:#777777; font-family:var(--font); font-size:12px; font-weight:600; margin-bottom:18px; }
.mr-alert-modal-body{ color:#bfbfc4; font-family:var(--font); font-size:15px; line-height:1.65; border-top:1px solid #232326; padding-top:18px; }
.mr-alert-modal-body p{ margin:0 0 12px; }
.mr-alert-modal-body strong{ color:#ffffff; }
.mr-alert-modal-body a{ color:#d10000; }
.mr-alert-modal-body .copy-coupon{
  display:inline-block; background:#1c1c1e; border:1.5px dashed #d10000; border-radius:8px; color:#ffffff; font-weight:900;
  letter-spacing:.06em; padding:6px 14px; margin:2px 0; cursor:pointer; user-select:all;
}
.mr-alert-modal-body .copy-coupon.copied-success{ border-style:solid; background:#d10000; }

@media (max-width:600px){
  .mr-alert-modal{ align-items:flex-end; }
  .mr-alert-modal-sheet{ width:100%; border-radius:18px 18px 0 0; max-height:88vh; }
}

/* ---------------------------------------------------------------------------
   MY SESSIONS (bookings) → app Sessions (app/sessions.jsx + SessionsExplorer.js)
   Stats row · search+filter toolbar · collapsible time buckets · expandable cards.
   --------------------------------------------------------------------------- */
.mr-sessions{ max-width:920px; }
/* masked icons (inherit text color) */
.mr-ico{ display:inline-block; width:1em; height:1em; background-color:currentColor; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; flex:0 0 auto; }
.mr-ico-search{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); }
.mr-ico-filter{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E"); }
.mr-ico-person{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.mr-ico-cal{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
.mr-ico-clock{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E"); }
.mr-ico-mic{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v1a7 7 0 0 1-14 0v-1'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3C/svg%3E"); }
.mr-ico-receipt{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1z'/%3E%3Cline x1='8' y1='8' x2='16' y2='8'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E"); }
.mr-ico-chat{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }

/* stats row */
.mr-sess-stats{ display:flex; align-items:center; background:#121212; border:1px solid #222222; border-radius:12px; padding:20px; margin-bottom:16px; }
.mr-stat{ flex:1; text-align:center; }
.mr-stat-num{ display:block; color:#d10000; font-family:var(--disp); font-size:28px; font-weight:900; line-height:1; }
.mr-stat-lbl{ display:block; color:#8a8a8e; font-family:var(--font); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-top:6px; }
.mr-stat-div{ width:1px; height:36px; background:#222222; }

/* toolbar */
.mr-sess-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.mr-sess-search{ flex:1; display:flex; align-items:center; gap:8px; background:#121212; border:1px solid #222222; border-radius:10px; height:46px; padding:0 14px; overflow:hidden; }
.mr-sess-search .mr-ico-search{ color:#8a8a8e; font-size:16px; }
body.woocommerce-account.logged-in .mr-sess-search-input{
  flex:1; background:transparent !important; border:0 !important; outline:none !important; box-shadow:none !important;
  color:#ffffff !important; font-family:var(--font); font-size:14px; padding:0 !important; margin:0 !important; height:auto !important; min-height:0 !important;
}
.mr-sess-search-input::placeholder{ color:#8a8a8e; }
/* The input clears the global focus ring with !important, so the ring is moved to the
   wrapper instead of being lost entirely. Without this a keyboard user typing into the
   My Sessions search had no visible focus at all. (2026-08-14) */
.mr-sess-search:focus-within{ border-color:#d10000; box-shadow:0 0 0 3px rgba(209,0,0,.22); }
.mr-sess-search-clear{ background:none; border:0; color:#8a8a8e; font-size:18px; line-height:1; cursor:pointer; }
.mr-sess-filter-btn{ width:46px; height:46px; border-radius:10px; background:#121212; border:1px solid #222222; color:#cccccc; cursor:pointer; display:flex; align-items:center; justify-content:center; position:relative; }
.mr-sess-filter-btn .mr-ico-filter{ font-size:20px; }
.mr-sess-filter-btn.is-active{ background:#d10000; border-color:#d10000; color:#ffffff; }
.mr-sess-filter-dot{ position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:50%; background:#ffffff; }

/* filter panel */
.mr-sess-filter-panel{ background:#0e0e0f; border:1px solid #202023; border-radius:12px; padding:18px 20px; margin-bottom:14px; }
.mr-filter-group-label{ color:#8a8a8e; font-family:var(--font); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:16px 0 9px; }
.mr-filter-group-label:first-child{ margin-top:0; }
.mr-filter-row{ display:flex; flex-wrap:wrap; gap:8px; }
.mr-filter-chip{ display:inline-flex; align-items:center; gap:7px; background:#161618; border:1px solid #2a2a2e; border-radius:8px; padding:8px 12px; color:#bbbbbb; font-family:var(--font); font-size:13px; font-weight:500; cursor:pointer; transition:.15s; }
.mr-filter-chip.on{ background:rgba(209,0,0,.14); border-color:#d10000; color:#ffffff; }
.mr-filter-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; }
.mr-filter-reset{ background:none; border:0; color:#d10000; font-family:var(--font); font-weight:700; font-size:13px; cursor:pointer; }
.mr-filter-done{ background:#d10000; border:0; color:#ffffff; font-family:var(--font); font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:12px; padding:10px 22px; border-radius:8px; cursor:pointer; }

/* section (bucket) headers — built by home.js */
.mr-sess-section{ display:flex; align-items:center; justify-content:space-between; padding:16px 2px 10px; cursor:pointer; user-select:none; }
.mr-sess-section-title{ color:#ffffff; font-family:var(--font); font-size:14px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.mr-sess-section-right{ display:flex; align-items:center; gap:9px; color:#8a8a8e; }
.mr-sess-section-count{ font-family:var(--font); font-size:13px; font-weight:700; }
.mr-sess-section-chev{ width:8px; height:8px; border-right:2px solid #666666; border-bottom:2px solid #666666; transform:rotate(45deg); transition:transform .15s; }
.mr-sess-section.collapsed .mr-sess-section-chev{ transform:rotate(-45deg); }

/* cards */
.mr-session-card{ background:#121212; border:1px solid #222222; border-radius:12px; padding:16px; margin-bottom:10px; cursor:pointer; }
.mr-session-card.is-upcoming{ border-color:#d10000; border-left-width:3px; }
.mr-session-top{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.mr-session-id{ background:#1a1a1a; border-radius:6px; padding:3px 8px; color:#d10000; font-family:var(--font); font-size:12px; font-weight:800; }
.mr-session-order{ background:#1a1a1a; border-radius:6px; padding:3px 8px; color:#8a8a8e; font-family:var(--font); font-size:12px; font-weight:600; }
.mr-session-pill{ margin-left:auto; border-radius:20px; padding:3px 9px; font-family:var(--font); font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.mr-session-pill.is-upc, .mr-session-pill.is-cancel{ background:rgba(209,0,0,.15); color:#d10000; }
.mr-session-pill.is-done{ background:rgba(29,185,84,.12); color:#1db954; }
.mr-session-chev{ width:8px; height:8px; border-right:2px solid #555555; border-bottom:2px solid #555555; transform:rotate(-45deg); transition:transform .15s; margin-left:6px; }
.mr-session-card:not(:has(.mr-session-pill)) .mr-session-chev{ margin-left:auto; }
.mr-session-card.open .mr-session-chev{ transform:rotate(45deg); }
.mr-session-mid{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.mr-session-mid .mr-ico-person{ color:#d10000; font-size:16px; }
.mr-session-eng{ color:#ffffff; font-family:var(--font); font-size:15px; font-weight:700; }
.mr-session-meta{ display:flex; flex-wrap:wrap; gap:12px; }
.mr-meta{ display:inline-flex; align-items:center; gap:5px; color:#8a8a8e; font-family:var(--font); font-size:12px; }
.mr-meta .mr-ico{ color:#8a8a8e; font-size:13px; }
.mr-session-expand{ border-top:1px solid #222222; margin-top:14px; padding-top:12px; }
.mr-kv{ display:flex; justify-content:space-between; padding:6px 0; }
.mr-kv-k{ color:#8a8a8e; font-family:var(--font); font-size:13px; }
.mr-kv-v{ color:#ffffff; font-family:var(--font); font-size:13px; font-weight:600; }
.mr-kv-v .amount, .mr-kv-v bdi{ color:#ffffff; }
.mr-session-btns{ display:flex; gap:10px; margin-top:14px; }
.mr-ghost-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; background:transparent !important; -webkit-appearance:none; appearance:none; cursor:pointer; border:1px solid #333333; border-radius:8px; padding:11px; color:#ffffff !important; font-family:var(--font); font-size:13px; font-weight:700; text-decoration:none; transition:border-color .15s; }
.mr-ghost-btn:hover{ border-color:#d10000; }
.mr-ghost-btn .mr-ico{ font-size:15px; }

/* empty state + no-match */
.mr-sess-empty{ background:#121212; border:1px solid #2a2a2a; border-radius:16px; padding:52px 28px; text-align:center; max-width:560px; margin:6px auto 0; }
.mr-sess-empty-ico{ display:inline-block; width:44px; height:44px; color:#d10000; background-color:currentColor; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; margin-bottom:16px; opacity:.9;
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
.mr-sess-empty h3{ color:#ffffff; font-family:var(--disp); font-size:22px; font-weight:700; text-transform:uppercase; margin:0 0 8px; }
.mr-sess-empty p{ color:#8a8a8e; font-family:var(--font); font-size:14px; line-height:1.6; margin:0 0 22px; }
.mr-sess-empty-cta{ display:inline-block; background:#d10000; color:#ffffff !important; font-family:var(--font); font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:13px; padding:14px 26px; border-radius:8px; text-decoration:none; transition:background .15s, transform .15s; }
.mr-sess-empty-cta:hover{ background:#b60000; transform:translateY(-1px); }
.mr-sess-none{ color:#8a8a8e; font-family:var(--font); font-size:14px; text-align:center; padding:30px 0; }

/* ---------------------------------------------------------------------------
   STUDIO (engineer/owner) session ACTIONS → app studio-sessions.jsx /
   studio-all-sessions.jsx / CancelNoShowSheet.js / reschedule-session.jsx.
   Status-pill parity · check-in badge · action buttons · reason sheet · calendar.
   --------------------------------------------------------------------------- */
/* status pill parity — real status coloured green / amber / red */
.mr-session-pill.is-green{ background:rgba(59,165,93,.15); color:#3ba55d; }
.mr-session-pill.is-amber{ background:rgba(217,164,65,.15); color:#d9a441; }
.mr-session-pill.is-red{ background:rgba(209,0,0,.15); color:#d10000; }

/* day-of check-in badge (client confirm / decline / pending) */
.mr-checkin{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.mr-checkin.is-confirmed{ background:#3ba55d; }
.mr-checkin.is-declined{ background:#d10000; }
.mr-checkin.is-pending{ background:#d9a441; }

/* divider between the two KV groups in the studio expand */
.mr-kv-div{ height:1px; background:#222222; margin:10px 0; }

/* action button grid (up to 6, two per row) */
.mr-session-btns{ flex-wrap:wrap; }
.mr-session-btns .mr-ghost-btn,
.mr-session-btns .mr-sess-btn,
.mr-session-btns .mr-sess-tag{ flex:1 1 calc(50% - 5px); min-width:130px; }
.mr-sess-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid transparent; border-radius:8px; padding:11px; font-family:var(--font); font-size:13px; font-weight:800; cursor:pointer; transition:background .15s, border-color .15s; }
.mr-sess-btn.is-primary{ background:#d10000; color:#ffffff; border-color:#d10000; }
.mr-sess-btn.is-primary:hover{ background:#b60000; }
.mr-sess-btn.is-danger{ background:transparent; color:#d10000; border-color:#d10000; }
.mr-sess-btn.is-danger:hover{ background:rgba(209,0,0,.1); }
.mr-ghost-btn[disabled], .mr-sess-btn[disabled]{ opacity:.5; cursor:default; border-color:#1e1e1e; background:#0e0e0e; color:#8a8a8e !important; }
.mr-ghost-btn.is-requested{ opacity:.6; }

/* resolved tag (Completed / No-Show / Late Cancel / Cancelled) */
.mr-sess-tag{ display:inline-flex; align-items:center; justify-content:center; border:1px solid; border-radius:8px; padding:11px; font-family:var(--font); font-size:13px; font-weight:800; }
.mr-sess-tag.is-done{ background:rgba(59,165,93,.12); border-color:#3ba55d; color:#3ba55d; }
.mr-sess-tag.is-cancel{ background:rgba(209,0,0,.1); border-color:#d10000; color:#d10000; }

/* ---- Cancel / No-Show reason sheet (bottom-sheet overlay) ---- */
.mr-sheet-ov{ position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; justify-content:center; }
.mr-sheet{ width:100%; max-width:560px; background:#121212; border:1px solid #222222; border-radius:18px 18px 0 0; padding:18px 18px 28px; }
.mr-sheet-h{ color:#ffffff; font-family:var(--disp); font-size:18px; font-weight:900; letter-spacing:.5px; }
.mr-sheet-sub{ color:#8a8a8e; font-family:var(--font); font-size:13px; font-weight:600; margin:3px 0 14px; }
.mr-cancel-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; text-align:left; background:#1a1a1a; border:1px solid #282828; border-left-width:3px; border-radius:10px; padding:14px; margin-bottom:10px; cursor:pointer; }
.mr-cancel-opt-l{ font-family:var(--font); font-size:14px; font-weight:800; }
.mr-cancel-opt-d{ color:#999999; font-family:var(--font); font-size:12px; line-height:1.45; }
.mr-sheet-dismiss{ display:block; width:100%; text-align:center; background:none; border:0; color:#888888; font-family:var(--font); font-size:14px; font-weight:700; padding:13px; margin-top:4px; cursor:pointer; }
.mr-sheet-ov.is-busy .mr-sheet{ opacity:.6; pointer-events:none; }

/* ---- Reschedule calendar modal (reschedule-session.jsx) ---- */
.mr-resched-ov{ position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.72); display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:24px 12px; }
.mr-resched{ width:100%; max-width:520px; background:#0d0d0d; border:1px solid #222222; border-radius:16px; overflow:hidden; margin:auto; }
.mr-resched-top{ display:flex; align-items:center; justify-content:space-between; padding:0 8px; height:56px; border-bottom:1px solid #1a1a1a; }
.mr-resched-x, .mr-resched-x-sp{ width:36px; height:36px; }
.mr-resched-x{ background:none; border:0; color:#ffffff; font-size:22px; cursor:pointer; }
.mr-resched-title{ color:#ffffff; font-family:var(--disp); font-size:18px; font-weight:900; letter-spacing:2px; }
.mr-resched-body{ padding:16px 18px; }
.mr-resched-summary{ background:#121212; border:1px solid #222222; border-radius:12px; padding:14px 16px; }
.mr-rs-client{ color:#ffffff; font-family:var(--font); font-size:16px; font-weight:800; }
.mr-rs-meta{ color:#888888; font-family:var(--font); font-size:12px; font-weight:600; margin-top:4px; }
.mr-rs-orig{ color:#d10000; font-family:var(--font); font-size:12px; font-weight:700; margin-top:8px; }
.mr-resched-tz{ color:#d10000; font-family:var(--font); font-size:12px; font-weight:600; text-align:center; margin:12px 0; }
.mr-cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.mr-cal-arrow{ width:36px; height:36px; border-radius:50%; background:#121212; border:1px solid #222222; color:#ffffff; font-size:18px; line-height:1; cursor:pointer; }
.mr-cal-arrow[disabled]{ opacity:.25; cursor:default; }
.mr-cal-month{ color:#ffffff; font-family:var(--font); font-size:14px; font-weight:800; letter-spacing:1px; }
.mr-cal-frame{ background:#121212; border:1px solid #222222; border-radius:12px; padding:10px; min-height:220px; }
.mr-cal-loading{ text-align:center; color:#8a8a8e; font-family:var(--font); font-size:12px; padding:80px 0; }
.mr-cal-row{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.mr-cal-head{ margin-bottom:4px; }
.mr-cal-head span{ text-align:center; color:#8a8a8e; font-family:var(--font); font-size:12px; font-weight:700; padding-bottom:4px; }
.mr-cal-cell{ height:40px; min-width:0; padding:0; border:0; border-radius:4px; font-family:var(--font); font-size:13px; font-weight:700; color:#ffffff; cursor:pointer; }
.mr-cal-cell.is-dummy{ background:transparent; cursor:default; }
.mr-cal-cell.is-open{ background:#d10000; }
.mr-cal-cell.is-part{ background:#d10000; border:1px solid #ffffff; position:relative; overflow:hidden; }
.mr-cal-cell.is-part::after{ content:''; position:absolute; bottom:0; right:0; width:0; height:0; border-right:14px solid #ffffff; border-top:14px solid transparent; }
.mr-cal-cell.is-full{ background:#5c2424; color:#c9a3a3; cursor:default; }
.mr-cal-cell.is-today{ background:#a1a1a6; color:#111111; }
.mr-cal-cell.is-closed{ background:#121212; border:1px solid #222222; color:#4a4a4a; text-decoration:line-through; cursor:default; }
.mr-cal-cell.is-sel{ background:#444446; border:1.5px solid #ffffff; }
.mr-cal-cell[disabled]{ cursor:default; }
.mr-cal-key{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:14px; }
.mr-cal-key span{ display:inline-flex; align-items:center; gap:6px; color:#888888; font-family:var(--font); font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.mr-cal-key i{ width:14px; height:14px; border-radius:3px; display:inline-block; }
.mr-cal-key .k-open{ background:#d10000; }
.mr-cal-key .k-part{ background:#d10000; border:1px solid #ffffff; }
.mr-cal-key .k-full{ background:#5c2424; }
.mr-cal-key .k-today{ background:#a1a1a6; }
.mr-cal-key .k-closed{ background:#121212; border:1px solid #222222; }
.mr-resched-controls{ margin-top:20px; }
.mr-resched-h{ color:#8a8a8e; font-family:var(--font); font-size:11px; font-weight:800; letter-spacing:.5px; margin:16px 0 8px; }
.mr-resched-controls .mr-resched-h:first-child{ margin-top:0; }
.mr-slots{ display:flex; flex-wrap:wrap; gap:8px; }
.mr-slot{ background:#121212; border:1px solid #222222; border-radius:8px; padding:9px 14px; color:#dddddd; font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer; }
.mr-slot:hover{ border-color:#d10000; }
.mr-slot.is-sel{ background:rgba(209,0,0,.15); border-color:#d10000; color:#ffffff; }
.mr-drop-empty{ color:#8a8a8e; font-family:var(--font); font-size:12px; padding:12px 2px; }
.mr-resched-locked{ margin-top:12px; background:#101010; border:1px solid #1e1e1e; border-radius:8px; padding:12px; color:#aaaaaa; font-family:var(--font); font-size:13px; font-weight:600; }
.mr-comp-row{ display:flex; align-items:center; gap:12px; margin-top:22px; background:#121212; border:1px solid #222222; border-radius:12px; padding:16px; cursor:pointer; }
.mr-comp-txt{ flex:1; display:flex; flex-direction:column; }
.mr-comp-t{ color:#ffffff; font-family:var(--font); font-size:15px; font-weight:800; }
.mr-comp-s{ color:#777777; font-family:var(--font); font-size:12px; line-height:1.4; margin-top:4px; }
.mr-comp-toggle{ width:22px; height:22px; accent-color:#d10000; flex:0 0 auto; cursor:pointer; }
.mr-resched-reason{ width:100%; margin-top:14px; background:#0d0d0d !important; border:1px solid #222222 !important; border-radius:8px; padding:12px; color:#ffffff !important; font-family:var(--font); font-size:13px; min-height:44px; box-sizing:border-box; }
.mr-resched-foot{ padding:14px 18px 20px; border-top:1px solid #1a1a1a; }
.mr-resched-go{ width:100%; background:#d10000; color:#ffffff; border:0; border-radius:10px; padding:15px; font-family:var(--font); font-size:15px; font-weight:800; letter-spacing:.5px; cursor:pointer; }
.mr-resched-go[disabled]{ opacity:.4; cursor:default; }

/* ---------------------------------------------------------------------------
   OWNER "STUDIO MANAGER" hub → app Studio (app/studio.jsx OwnerBody). Owner-only.
   Two hero cards + revenue chart + needs-attention row + a 2-col MANAGE grid.
   --------------------------------------------------------------------------- */
.mr-studio{ max-width:920px; }
.mr-studio-denied{ color:#8a8a8e; font-family:var(--font); }
/* icons for the studio hub */
.mr-ico-arrow{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E"); }
.mr-ico-check{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); }
.mr-studio-ico-cash{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }
.mr-studio-ico-tags{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E"); }
.mr-studio-ico-people{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.mr-studio-ico-building{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E"); }
.mr-studio-ico-chart{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='20' x2='12' y2='10'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='16'/%3E%3C/svg%3E"); }
.mr-studio-ico-receipt{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1z'/%3E%3Cline x1='8' y1='8' x2='16' y2='8'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E"); }
.mr-studio-ico-people-circle{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M6.2 18.2a6 6 0 0 1 11.6 0'/%3E%3C/svg%3E"); }

.mr-studio-ico-wallet{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1'/%3E%3Cpath d='M21 12h-6a2 2 0 0 0 0 4h6v-4z'/%3E%3C/svg%3E"); }
.mr-studio-ico-gear{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); }
.mr-studio-ico-cal{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }

/* engineer stat row (app statRow — 3 tiles) */
.mr-studio-stats{ display:flex; align-items:stretch; gap:10px; margin-bottom:16px; }
.mr-studio-stat{ flex:1; background:#121212; border:1px solid #222222; border-radius:12px; padding:16px 10px; text-align:center; }
.mr-studio-stat-num{ display:block; color:#d10000; font-family:var(--disp); font-size:20px; font-weight:900; line-height:1; }
.mr-studio-stat-lbl{ display:block; color:#8a8a8e; font-family:var(--font); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-top:6px; }
.mr-studio-stat-div{ display:none; }

/* hero cards */
.mr-studio-hero{ background:#121212; border:1px solid #2a2a2a; border-radius:16px; padding:22px; margin-bottom:16px; }
.mr-studio-hero-label{ color:#888888; font-family:var(--font); font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.mr-studio-hero-value{ color:#ffffff; font-family:var(--disp); font-size:38px; font-weight:900; margin-top:8px; letter-spacing:.5px; }
.mr-studio-hero-div{ height:1px; background:#222222; margin:14px 0; }
.mr-studio-hero-foot{ color:#8a8a8e; font-family:var(--font); font-size:12px; font-weight:500; margin-top:12px; }
.mr-studio-hero-btn{ display:inline-flex; align-items:center; gap:8px; background:#d10000; color:#ffffff !important; font-family:var(--font); font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:14px; padding:13px 22px; border-radius:10px; text-decoration:none; margin-top:16px; transition:background .15s, transform .15s; }
.mr-studio-hero-btn:hover{ background:#b60000; transform:translateY(-1px); }
.mr-studio-hero-btn .mr-ico-arrow{ font-size:15px; }

/* revenue chart placeholder */
.mr-studio-chart{ background:#121212; border:1px solid #222222; border-radius:12px; padding:16px; margin-bottom:24px; }
.mr-studio-chart-label{ color:#8a8a8e; font-family:var(--font); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; }
.mr-studio-chart-ph{ height:150px; display:flex; align-items:center; justify-content:center; color:#444444; font-family:var(--font); font-size:13px; border:1px dashed #2a2a2a; border-radius:8px; }

.mr-studio-sec{ color:#8a8a8e; font-family:var(--font); font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; margin:4px 0 12px; }

.mr-studio-attn{ display:flex; align-items:center; gap:12px; background:#1c1c1e; border:1px solid #2c2c2e; border-radius:12px; padding:15px 16px; margin-bottom:24px; text-decoration:none; transition:border-color .15s; }
.mr-studio-attn:hover{ border-color:#3f3f43; }
.mr-studio-attn .mr-ico-check{ color:#3ba55d; font-size:18px; }
.mr-studio-attn-txt{ color:#ffffff; font-family:var(--font); font-size:14px; font-weight:600; flex:1; }
.mr-studio-attn-chev{ width:8px; height:8px; border-right:2px solid #444444; border-top:2px solid #444444; transform:rotate(45deg); }

.mr-studio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* grid buttons use the app's grey-button color (#1c1c1e / #2c2c2e border — same as the app's logout /
   coupon-card / message-bubble surfaces), not the near-black hero color */
.mr-studio-card{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; background:#1c1c1e; border:1px solid #2c2c2e; border-radius:14px; padding:22px 16px; text-decoration:none; transition:border-color .15s, transform .12s; }
.mr-studio-card:hover{ border-color:#3f3f43; transform:translateY(-1px); }
.mr-studio-card .mr-ico{ color:#d10000; font-size:24px; }
.mr-studio-card-title{ color:#ffffff; font-family:var(--font); font-size:14px; font-weight:700; }

/* stub sub-page */
.mr-studio-back{ display:inline-block; color:#d10000 !important; font-family:var(--font); font-weight:700; font-size:13px; text-decoration:none; margin-bottom:16px; }
.mr-studio-back:hover{ text-decoration:underline; }
.mr-studio-stub-card{ background:#121212; border:1px solid #2a2a2a; border-radius:16px; padding:52px 28px; text-align:center; max-width:560px; margin-left:auto; margin-right:auto; }
.mr-studio-stub-ico{ display:inline-block; width:40px; height:40px; color:#d10000; background-color:currentColor; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; margin-bottom:16px;
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E"); }
.mr-studio-stub-card h3{ color:#ffffff; font-family:var(--disp); font-size:22px; font-weight:700; text-transform:uppercase; margin:0 0 8px; }
.mr-studio-stub-card p{ color:#8a8a8e; font-family:var(--font); font-size:14px; line-height:1.6; margin:0; }
.mr-studio-stub-card strong{ color:#ffffff; }

/* sidebar nav icon for the owner Studio Manager item (storefront) */
.woocommerce-MyAccount-navigation-link--studio-manager a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7l1.5-4h17L22 7'/%3E%3Cpath d='M4 7v13h16V7'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3Cpath d='M2 7h20'/%3E%3C/svg%3E"); }

@media (max-width:600px){
  /* keep the 2-col grid (don't stack full-width); shrink the cards */
  .mr-studio-grid{ gap:10px; }
  .mr-studio-card{ padding:16px 12px; gap:9px; }
  .mr-studio-card .mr-ico{ font-size:21px; }
  .mr-studio-card-title{ font-size:13px; }
  /* odd count (owner has 7) → the last card spans both columns: 2×3 + 1 long */
  .mr-studio-grid > .mr-studio-card:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* ---------------------------------------------------------------------------
   STUDIO SUB-VIEWS (Reports / Earnings / Payouts / Refunds / Audit / Engineers
   / Coupons / Clients / Payout Settings / Availability). Dark app-style cards
   on the off-white shell — shared row/tile/pill/chart primitives.
   --------------------------------------------------------------------------- */
.mr-studio-view{ max-width:920px; }
.mr-studio-view-head{ margin-bottom:18px; }
/* scoped past the theme's `.entry-content h2{color:#fff;margin-top:1.9em}` (higher specificity) */
.mr-studio-view .mr-studio-view-title{ color:#0c0c0c; font-family:var(--disp); font-size:24px; font-weight:700; text-transform:uppercase; letter-spacing:.01em; margin:0; }
.mr-studio-view .mr-studio-view-sub{ color:#5a5d62; font-family:var(--font); font-size:13px; margin:6px 0 0; }
.mr-studio-view .mr-connect-card h3{ margin-top:12px; }

/* friendly empty */
.mr-studio-empty{ background:#121212; border:1px solid #222222; border-radius:14px; padding:30px 22px; text-align:center; }
.mr-studio-empty p{ color:#8a8a8e; font-family:var(--font); font-size:14px; margin:0; }

/* ── Owner payouts bento: withdrawable on the left, Stripe's money locked on the right ──
   The held panel is deliberately NOT red and has no button. It has to read as inert at a glance:
   it is money sitting in the studio's Stripe balance that belongs to Stripe, and the previous
   single-number hero buried that in a caption where it was easy to read as spendable. */
.mr-payout-bento{ display:grid; grid-template-columns:1.55fr 1fr; gap:14px; margin-bottom:20px; align-items:stretch; }
.mr-payout-main,
.mr-payout-held{ background:#121212; border:1px solid #2a2a2a; border-radius:16px; padding:22px; }
.mr-payout-held{
  background:linear-gradient(180deg,#141414 0%,#101010 100%);
  border-style:dashed; border-color:#3a3027;
  display:flex; flex-direction:column;
}
.mr-payout-held-label{
  color:#c9a227; font-family:var(--font); font-size:11px; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; display:flex; align-items:center; gap:7px;
}
.mr-payout-lock{ font-size:12px; line-height:1; filter:grayscale(1) brightness(1.6); }
.mr-payout-held-value{
  color:#e6e6e6; font-family:var(--disp); font-size:38px; font-weight:900;
  margin-top:8px; letter-spacing:.5px; font-variant-numeric:tabular-nums;
}
.mr-payout-held-rows{ margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.mr-payout-held-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--font); font-size:12.5px; }
.mr-payout-held-row span{ color:#9a9a9e; }
.mr-payout-held-row strong{ color:#e6e6e6; font-weight:800; font-variant-numeric:tabular-nums; }
.mr-payout-held-note{ color:#8a8a8e; font-family:var(--font); font-size:12px; font-weight:500; line-height:1.5; margin-top:12px; }
.mr-payout-held-note strong{ color:#c9a227; font-weight:800; }
.mr-payout-held-foot{
  color:#6f6f74; font-family:var(--font); font-size:11px; font-weight:600;
  letter-spacing:.04em; margin-top:auto; padding-top:14px; border-top:1px solid #242424;
}
.mr-payout-held.is-empty .mr-payout-held-value{ color:#4a4a4e; }
.mr-payout-held.is-empty .mr-payout-held-label{ color:#6f6f74; }
@media (max-width:860px){
  .mr-payout-bento{ grid-template-columns:1fr; }
  .mr-payout-held-value{ font-size:30px; }
}

/* solo hero (reuses .mr-studio-hero) */
.mr-studio-hero.mr-hero-solo{ margin-bottom:20px; }

/* chip row (period / tabs / filters) */
.mr-chiprow{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.mr-chip{ background:#121212; border:1px solid #262626; color:#cfcfd2; font-family:var(--font); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:9px 15px; border-radius:999px; text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.mr-chip:hover{ border-color:#3a3a3e; }
.mr-chip.is-active{ background:#d10000; border-color:#d10000; color:#ffffff; }

/* generic list + rows */
.mr-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.mr-row{ display:flex; align-items:center; gap:12px; background:#121212; border:1px solid #222222; border-radius:12px; padding:14px 16px; }
button.mr-row{ width:100%; text-align:left; cursor:pointer; font:inherit; }
.mr-row-meta{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.mr-row-name{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:#ffffff; font-family:var(--font); font-size:14px; font-weight:600; }
.mr-row-sub{ color:#7a7a7e; font-family:var(--font); font-size:12px; }
.mr-row-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.mr-row-btn:hover{ border-color:#3a3a3e; }
.mr-rank{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px; background:#1e1e20; color:#d10000; font-family:var(--disp); font-weight:900; font-size:12px; }

/* money / amounts */
.mr-amt-green{ color:#3ba55d; font-family:var(--disp); font-weight:800; font-size:15px; }
.mr-amt-red{ color:#d10000; font-family:var(--disp); font-weight:800; font-size:15px; }
.mr-amt-grey{ color:#9a9a9e; font-family:var(--disp); font-weight:800; font-size:14px; }

/* status pills */
.mr-pill{ font-family:var(--font); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; border-radius:6px; white-space:nowrap; }
.mr-pill-green{ background:rgba(59,165,93,.15); color:#4bd07a; }
.mr-pill-red{ background:rgba(209,0,0,.16); color:#ff5a5a; }
.mr-pill-amber{ background:rgba(214,158,46,.16); color:#e0a93a; }
.mr-pill-grey{ background:#1e1e20; color:#8a8a8e; }

/* inline tags */
.mr-tag{ font-family:var(--font); font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 6px; border-radius:5px; }
.mr-tag.blue{ background:rgba(59,130,246,.16); color:#6ba6ff; }
.mr-tag.amber{ background:rgba(214,158,46,.16); color:#e0a93a; }
.mr-tag.green{ background:rgba(59,165,93,.15); color:#4bd07a; }

/* key-value rows (refund body) */
.mr-kv{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #1e1e20; }
.mr-kv:last-of-type{ border-bottom:0; }
.mr-kv span:first-child{ color:#7a7a7e; font-family:var(--font); font-size:13px; }
.mr-kv span:last-child{ color:#e6e6e8; font-family:var(--font); font-size:13px; font-weight:600; }

/* buttons */
.mr-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font); font-weight:800; letter-spacing:.05em; text-transform:uppercase; font-size:13px; padding:12px 18px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, transform .15s; }
.mr-btn-red{ background:#d10000; color:#ffffff; }
.mr-btn-red:hover{ background:#b60000; transform:translateY(-1px); }
.mr-btn-ghost{ background:transparent; border-color:#333333; color:#e6e6e8; }
.mr-btn-ghost:hover{ border-color:#8a8a8e; }
.mr-btn-wide{ width:100%; margin-top:6px; }
.mr-btn[disabled]{ opacity:.55; cursor:default; transform:none; }
.mr-link-red{ background:none; border:0; color:#d10000; font-family:var(--font); font-size:12px; font-weight:700; cursor:pointer; padding:0; }
.mr-link-red:hover{ text-decoration:underline; }

.mr-note-locked{ color:#6a6a6e; font-family:var(--font); font-size:12px; line-height:1.6; margin:-8px 0 22px; }

/* tiles */
.mr-tiles-2,.mr-tiles-3{ display:grid; gap:10px; margin-bottom:22px; }
.mr-tiles-2{ grid-template-columns:1fr 1fr; }
.mr-tiles-3{ grid-template-columns:1fr 1fr 1fr; }
.mr-tile{ background:#121212; border:1px solid #222222; border-radius:12px; padding:16px 14px; text-align:center; }
.mr-tile-num{ display:block; color:#d10000; font-family:var(--disp); font-size:26px; font-weight:900; line-height:1; }
.mr-tile-num.green{ color:#3ba55d; }
.mr-tile-num.amber{ color:#e0a93a; }
.mr-tile-lbl{ display:block; color:#8a8a8e; font-family:var(--font); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-top:8px; }

/* chart card + bars */
.mr-chart-card{ background:#121212; border:1px solid #222222; border-radius:14px; padding:18px 16px; margin-bottom:22px; }
.mr-chart-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }
.mr-chart-title{ color:#8a8a8e; font-family:var(--font); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.mr-chart-toggle{ display:inline-flex; border:1px solid #262626; border-radius:8px; overflow:hidden; }
.mr-chart-toggle a{ color:#9a9a9e; font-family:var(--font); font-size:11px; font-weight:700; text-decoration:none; padding:5px 11px; }
.mr-chart-toggle a.is-active{ background:#d10000; color:#ffffff; }
.mr-chart-range{ color:#cfcfd2; font-family:var(--disp); font-size:16px; font-weight:700; margin-bottom:14px; }
.mr-chart-empty{ color:#5a5a5e; font-family:var(--font); font-size:13px; text-align:center; padding:34px 0; }
.mr-chart-hint{ color:#6a6a6e; font-family:var(--font); font-size:12px; text-align:center; margin-top:10px; }
.mr-bars{ display:flex; align-items:flex-end; gap:6px; height:150px; }
.mr-bars-mini{ height:110px; }
.mr-bar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%; min-width:0; }
.mr-bar-fill{ width:70%; max-width:34px; min-height:2px; background:#d10000; border-radius:4px 4px 0 0; opacity:.85; }
.mr-bar.is-peak .mr-bar-fill{ opacity:1; box-shadow:0 0 0 1px rgba(209,0,0,.35); }
.mr-bar:not(.is-peak) .mr-bar-fill{ background:#8a2020; }
.mr-bars:not(.mr-bars-mini) .mr-bar-fill{ background:#d10000; }
.mr-bar-lbl{ color:#6a6a6e; font-family:var(--font); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* refund cards */
.mr-rf-card{ background:#121212; border:1px solid #222222; border-radius:12px; margin-bottom:8px; overflow:hidden; }
.mr-rf-card.is-flag{ border-color:#3a2323; }
.mr-rf-top{ display:flex; align-items:center; gap:12px; width:100%; background:none; border:0; padding:14px 16px; cursor:pointer; text-align:left; }
.mr-rf-titles{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.mr-rf-title{ color:#ffffff; font-family:var(--font); font-size:14px; font-weight:600; }
.mr-rf-sub{ color:#7a7a7e; font-family:var(--font); font-size:12px; }
.mr-rf-chev{ width:8px; height:8px; border-right:2px solid #555; border-top:2px solid #555; transform:rotate(45deg); flex-shrink:0; transition:transform .18s; }
.mr-rf-card.is-open .mr-rf-chev{ transform:rotate(135deg); }
.mr-rf-body{ padding:4px 16px 16px; border-top:1px solid #1e1e20; }
.mr-rf-note{ color:#7a7a7e; font-family:var(--font); font-size:12px; line-height:1.6; margin:12px 0; }
.mr-rf-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* toggle switch (promo coupons) */
.mr-toggle{ position:relative; width:46px; height:26px; border-radius:999px; background:#2a2a2a; border:0; cursor:pointer; flex-shrink:0; transition:background .18s; }
.mr-toggle.is-on{ background:#d10000; }
.mr-toggle-knob{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .18s; }
.mr-toggle.is-on .mr-toggle-knob{ transform:translateX(20px); }
.mr-toggle[disabled]{ opacity:.5; cursor:default; }

/* accordion (engineers) */
.mr-acc{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.mr-acc-item{ background:#121212; border:1px solid #222222; border-radius:12px; overflow:hidden; }
.mr-acc-head{ display:flex; align-items:center; gap:12px; width:100%; background:none; border:0; padding:14px 16px; cursor:pointer; text-align:left; }
.mr-acc-ava{ color:#d10000; font-size:22px; flex-shrink:0; }
.mr-acc-titles{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.mr-acc-name{ color:#ffffff; font-family:var(--font); font-size:14px; font-weight:700; }
.mr-acc-meta{ color:#7a7a7e; font-family:var(--font); font-size:12px; }
.mr-acc-chev{ width:8px; height:8px; border-right:2px solid #555; border-top:2px solid #555; transform:rotate(135deg); flex-shrink:0; transition:transform .18s; }
.mr-acc-item.is-open .mr-acc-chev{ transform:rotate(315deg); }
.mr-acc-body{ padding:2px 12px 12px; display:flex; flex-direction:column; gap:8px; }

/* search input */
.mr-search{ width:100%; background:#0e0e0f; border:1px solid #262626; border-radius:10px; color:#ffffff; font-family:var(--font); font-size:14px; padding:12px 14px; margin-bottom:14px; }
.mr-search::placeholder{ color:#5a5a5e; }
.mr-search:focus{ outline:none; border-color:#d10000; }
.mr-audit-count{ color:#7a7a7e; font-family:var(--font); font-size:13px; margin-bottom:12px; }

/* audit dot */
.mr-audit-dot{ width:10px; height:10px; border-radius:50%; background:#8a8a8e; flex-shrink:0; }
.mr-audit-session{ background:#3ba55d; } .mr-audit-cash{ background:#e0a93a; } .mr-audit-noshow{ background:#d10000; }
.mr-audit-cancel{ background:#e0a93a; } .mr-audit-coupon{ background:#6ba6ff; } .mr-audit-redeem{ background:#d10000; }
.mr-audit-payout,.mr-audit-money{ background:#e0a93a; }

/* clients — scoped past `.entry-content img{height:auto;border-radius:14px}`; font-size:0 hides broken-avatar alt text */
.mr-studio-view img.mr-client-ava{ width:40px; height:40px; min-height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#1e1e20; font-size:0; overflow:hidden; }

/* issue-coupon cards + modal */
.mr-issue-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
.mr-issue-card{ background:#121212; border:1px solid #222222; border-radius:12px; padding:18px 16px; }
.mr-issue-title{ color:#ffffff; font-family:var(--disp); font-size:18px; font-weight:800; }
.mr-issue-sub{ color:#7a7a7e; font-family:var(--font); font-size:12px; margin:6px 0 14px; }
.mr-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); padding:20px; }
.mr-modal-card{ background:#141416; border:1px solid #2a2a2a; border-radius:16px; padding:24px; width:100%; max-width:420px; max-height:90vh; overflow:auto; }
.mr-modal-kicker{ display:flex; align-items:center; gap:8px; color:#8a8a8e; font-family:var(--font); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; }
.mr-issue-rate{ color:#d10000; }
.mr-field-lbl{ display:block; color:#9a9a9e; font-family:var(--font); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:14px 0 6px; }
.mr-input{ width:100%; background:#000000; border:1px solid #2a2a2a; border-radius:10px; color:#ffffff; font-family:var(--font); font-size:14px; padding:12px 14px; }
.mr-input:focus{ outline:none; border-color:#d10000; }
.mr-radio-list{ display:flex; flex-direction:column; gap:2px; }
.mr-radio-list label{ display:flex; align-items:center; gap:10px; color:#e6e6e8; font-family:var(--font); font-size:14px; padding:9px 0; cursor:pointer; }
.mr-radio-list input{ accent-color:#d10000; }
.mr-modal-actions{ display:flex; gap:10px; margin-top:20px; }
.mr-modal-actions .mr-btn{ flex:1; }

/* connect (Stripe) card */
.mr-connect-card{ background:#121212; border:1px solid #222222; border-radius:16px; padding:26px 22px; text-align:center; margin-bottom:16px; }
.mr-connect-card.is-amber{ border-color:#3a3223; }
.mr-connect-card h3{ color:#ffffff; font-family:var(--disp); font-size:20px; font-weight:700; text-transform:uppercase; margin:12px 0 8px; }
.mr-connect-card p{ color:#8a8a8e; font-family:var(--font); font-size:14px; line-height:1.6; margin:0 0 16px; }
.mr-connect-ico{ display:inline-block; width:34px; height:34px; border-radius:8px; background:#1e1e20; }
.mr-connect-foot{ color:#6a6a6e; font-family:var(--font); font-size:12px; margin-top:12px; }

@media (max-width:600px){
  .mr-tiles-3,.mr-issue-cards{ grid-template-columns:1fr 1fr; }
  .mr-tiles-2{ grid-template-columns:1fr 1fr; }
}

/* ===========================================================================
   MESSAGES  —  Better Messages plugin widget reskinned to match the app inbox.
   The whole page is plugin-generated DOM; we can only override with CSS, so
   everything below is scoped under `body.woocommerce-account .bp-messages-wrap`
   (or `.bp-messages-wrap-main`) and leans on `!important` to beat the plugin's
   own stylesheet + the theme. Palette = pure app black #000 surface with #121212
   floating cards, #222 hairlines, brand red #d10000.

   THREE bugs this block fixes:
     1. SENT bubbles = `.bm-message.my` (NOT `.me`/`.bm-message-me` — the old css
        targeted the wrong class so sent bubbles never went red). Styled below.
     2. Avatars were square / showing 404 alt-text because the theme's global
        `.entry-content img{height:auto;border-radius:14px}` leaks in. We force
        round 40px avatars + a dark-disc person-icon fallback + font-size:0.
     3. Received bubbles vanished into black → given a `1px #2c2c2e` border.
   =========================================================================== */

/* ---- container + surface ------------------------------------------------- */
body.woocommerce-account .bp-messages-wrap-main{ max-width:1120px !important; margin:0 auto !important; border:1px solid #222222 !important; border-radius:16px !important; overflow:hidden !important; }
body.woocommerce-account .bp-messages-wrap{ background:#000000 !important; }
body.woocommerce-account .bp-messages-side-threads{ background:#000000 !important; border-right:1px solid #1c1c1c !important; }

/* neutralize the theme's `.entry-content a{color:#d10000;underline}` bleed;
   specific links (compose / empty-state CTA) are re-reddened where wanted */
body.woocommerce-account .bp-messages-wrap a{ color:inherit !important; text-decoration:none !important; }

/* ---- avatars (bug #2) ---------------------------------------------------- */
body.woocommerce-account .bp-messages-wrap .pic img.avatar,
body.woocommerce-account .bp-messages-wrap .chat-header img.avatar,
body.woocommerce-account .bp-messages-wrap img.avatar{ width:44px !important; height:44px !important; min-height:44px !important; border-radius:50% !important; object-fit:cover !important; background:#111111 !important; border:1px solid #222222 !important; font-size:0 !important; overflow:hidden !important; }
/* wrapper is a dark disc carrying a person-icon so 404s read as the app's
   person-circle on #111 rather than a blank box or alt-text */
body.woocommerce-account .bp-messages-wrap .bbpm-avatar,
body.woocommerce-account .bp-messages-wrap span.avatar.bbpm-avatar{ display:inline-flex !important; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50% !important; overflow:hidden !important; background:#111111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.1 0-9 2.1-9 6v2h18v-2c0-3.9-4.9-6-9-6z'/%3E%3C/svg%3E") center/24px no-repeat !important; }
/* the img inside the wrapper stays transparent so the fallback icon shows on 404 */
body.woocommerce-account .bp-messages-wrap .bbpm-avatar img.avatar{ background:transparent !important; border:0 !important; }

/* ---- left list: header + footer (compose / search / settings) ------------ */
body.woocommerce-account .bp-messages-wrap .chat-header.side-header,
body.woocommerce-account .bp-messages-wrap .chat-footer{ background:#0a0a0a !important; border-color:#1c1c1c !important; }
body.woocommerce-account .bp-messages-wrap .chat-header.side-header .new-message svg,
body.woocommerce-account .bp-messages-wrap .chat-footer .settings svg{ color:#ffffff !important; fill:currentColor; transition:color .15s ease-out; }
body.woocommerce-account .bp-messages-wrap .chat-header.side-header .new-message:hover svg,
body.woocommerce-account .bp-messages-wrap .chat-footer .settings:hover svg{ color:#d10000 !important; }

/* ---- search -------------------------------------------------------------- */
body.woocommerce-account .bp-messages-wrap .bpbm-search input{ background:#000000 !important; border:1px solid #2a2a2a !important; border-radius:10px !important; color:#ffffff !important; padding:8px 12px !important; }
body.woocommerce-account .bp-messages-wrap .bpbm-search input::placeholder{ color:#8a8a8e !important; }
body.woocommerce-account .bp-messages-wrap .bpbm-search input:focus{ outline:none !important; border-color:#d10000 !important; }

/* ---- thread rows (app card style, no divider lines) ---------------------- */
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread{ background:#121212 !important; border:1px solid #222222 !important; border-bottom:1px solid #222222 !important; border-radius:10px !important; padding:12px 14px !important; margin:0 10px 10px !important; transition:background .15s ease-out; }
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread:first-child{ margin-top:10px !important; }
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread h4.name{ color:#ffffff !important; font-weight:700 !important; font-size:13px !important; }
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread .last-message .bm-last-message-content,
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread .bm-last-message-content{ color:#888888 !important; font-size:13px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread .time .time-wrapper,
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread .time-wrapper{ color:#444444 !important; font-size:11px !important; font-weight:600 !important; }
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread:hover{ background:#1a1a1a !important; }
/* active + unread */
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread.bp-messages-active-thread{ background:#1a1a1a !important; box-shadow:inset 3px 0 0 #d10000 !important; }
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread:not([data-unread="0"]) h4.name{ font-weight:800 !important; color:#ffffff !important; }
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread:not([data-unread="0"]) h4.name::after{ content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:#d10000; margin-left:6px; vertical-align:middle; }
/* if the plugin renders its own unread count badge, make it a red pill */
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread .count,
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread .unread-count{ background:#d10000 !important; color:#ffffff !important; border-radius:10px !important; }

/* ---- open-thread header (glass) ------------------------------------------ */
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header){ background:rgba(18,18,20,.6) !important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-bottom:1px solid rgba(255,255,255,.08) !important; }
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header) .name{ color:#ffffff !important; font-weight:900 !important; letter-spacing:2px !important; text-transform:uppercase !important; }
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header) svg,
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header) .bm-more-actions svg{ color:#cccccc !important; fill:currentColor; transition:color .15s ease-out; }
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header) svg:hover,
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header) .bm-more-actions:hover svg{ color:#d10000 !important; }
/* open-thread header avatar is intentionally smaller */
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header) img.avatar,
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header) .bbpm-avatar{ width:32px !important; height:32px !important; min-height:32px !important; background-size:18px; }

/* ---- message bubbles ----------------------------------------------------- */
/* text */
body.woocommerce-account .bp-messages-wrap .bm-message-content-text,
body.woocommerce-account .bp-messages-wrap .bm-message-content-text p{ color:#ffffff !important; font-size:15px !important; line-height:21px !important; font-weight:500 !important; }
/* received (bug #3: give it a border so it never vanishes into black) */
body.woocommerce-account .bp-messages-wrap .bm-message:not(.my) .bm-message-content{ background:#1c1c1e !important; border:1px solid #2c2c2e !important; border-radius:18px 18px 18px 4px !important; }
body.woocommerce-account .bp-messages-wrap .bm-message:not(.my) .bm-time{ color:#8a8a8e !important; font-size:11px !important; }
/* SENT (bug #1: the real class is `.my`, not `.me`) — red, right, tail bottom-right */
body.woocommerce-account .bp-messages-wrap .bm-message.my{ justify-content:flex-end !important; }
body.woocommerce-account .bp-messages-wrap .bm-message.my .bm-message-content{ background:#d10000 !important; border-radius:18px 18px 4px 18px !important; margin-left:auto !important; }
body.woocommerce-account .bp-messages-wrap .bm-message.my .bm-message-content-text,
body.woocommerce-account .bp-messages-wrap .bm-message.my .bm-message-content-text p{ color:#ffffff !important; }
body.woocommerce-account .bp-messages-wrap .bm-message.my .bm-time{ color:rgba(255,255,255,.6) !important; font-size:11px !important; }
/* quoted reply */
body.woocommerce-account .bp-messages-wrap .bm-replied-message{ border-radius:12px !important; background:rgba(255,255,255,.1) !important; }
body.woocommerce-account .bp-messages-wrap .bm-message.my .bm-replied-message{ background:rgba(0,0,0,.2) !important; }
body.woocommerce-account .bp-messages-wrap .bm-replied-message-name{ font-size:10px !important; font-weight:700 !important; opacity:.8 !important; }
body.woocommerce-account .bp-messages-wrap .bm-replied-message-text{ font-size:12px !important; font-style:italic !important; opacity:.9 !important; }
/* reaction pills */
body.woocommerce-account .bp-messages-wrap .bm-reactions-trigger,
body.woocommerce-account .bp-messages-wrap .bm-reactions,
body.woocommerce-account .bp-messages-wrap .bm-reaction{ background:#1c1c1e !important; border:1px solid #000000 !important; border-radius:10px !important; }

/* ---- date / system chips ------------------------------------------------- */
body.woocommerce-account .bp-messages-wrap .bm-message-date span,
body.woocommerce-account .bp-messages-wrap .bm-messages-date span{ background:#1a1a1c !important; color:#888888 !important; border-radius:20px !important; padding:3px 10px !important; font-size:11px !important; }

/* ---- empty / "start a conversation" state -------------------------------- */
body.woocommerce-account .bp-messages-wrap .bm-conversation-start{ text-align:center !important; color:#888888 !important; }
body.woocommerce-account .bp-messages-wrap .bm-conversation-start h1,
body.woocommerce-account .bp-messages-wrap .bm-conversation-start h2,
body.woocommerce-account .bp-messages-wrap .bm-conversation-start h3,
body.woocommerce-account .bp-messages-wrap .bm-conversation-start p{ color:#888888 !important; }
body.woocommerce-account .bp-messages-wrap .bm-conversation-start svg{ width:64px !important; height:64px !important; color:#333333 !important; fill:currentColor; }
body.woocommerce-account .bp-messages-wrap .bm-conversation-start a{ color:#d10000 !important; }

/* ---- composer (floating glass capsule) ----------------------------------- */
body.woocommerce-account .bp-messages-wrap .bm-reply{ margin:0 12px 12px !important; border-radius:27px !important; background:rgba(18,18,20,.6) !important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.08) !important; padding:6px 8px !important; display:flex !important; align-items:flex-end !important; }
body.woocommerce-account .bp-messages-wrap .bm-editor{ flex:1 !important; }
body.woocommerce-account .bp-messages-wrap .bm-editor-content{ color:#ffffff !important; background:transparent !important; }
body.woocommerce-account .bp-messages-wrap .bm-editor-content:empty::before{ color:#8a8a8e !important; }
body.woocommerce-account .bp-messages-wrap .bm-emojies svg{ color:#888888 !important; fill:currentColor; transition:color .15s ease-out; }
body.woocommerce-account .bp-messages-wrap .bm-emojies:hover svg{ color:#ffffff !important; }
/* red circular send button */
body.woocommerce-account .bp-messages-wrap .bm-send-message{ background:#d10000 !important; width:36px !important; height:36px !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0; transition:opacity .15s ease-out; }
body.woocommerce-account .bp-messages-wrap .bm-send-message svg{ color:#ffffff !important; fill:currentColor; }
body.woocommerce-account .bp-messages-wrap .bm-send-message[disabled],
body.woocommerce-account .bp-messages-wrap .bm-send-message.disabled{ opacity:.4 !important; }

/* ---- ICON SWAPS: replace the plugin's inline SVGs with exact Ionicons -----
   glyphs (matching the mobile app) via the mask technique: hide the plugin's
   own <svg>, then paint a masked ::before on the parent. `background-color`
   sets the glyph color; the data-URI SVG (fill/stroke black = opaque) is the
   alpha mask, so viewBox is 0 0 512 512 native Ionicons for pixel fidelity. */

/* send → Ionicons `send` (filled paper-plane), white on the red circle */
body.woocommerce-account .bp-messages-wrap .bm-send-message svg{ display:none !important; }
body.woocommerce-account .bp-messages-wrap .bm-send-message::before{ content:''; display:inline-block; width:20px; height:20px; background-color:#ffffff; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M476.59 227.05l-.16-.07L49.35 49.84A23.56 23.56 0 0027.14 52 24.65 24.65 0 0016 72.59v113.29a24 24 0 0019.52 23.57l232.93 43.07a4 4 0 010 7.86L35.53 303.45A24 24 0 0016 327v113.31A23.57 23.57 0 0026.59 460a23.94 23.94 0 0013.22 4 24.55 24.55 0 009.52-1.93L476.4 285.94l.19-.09a32 32 0 000-58.8z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M476.59 227.05l-.16-.07L49.35 49.84A23.56 23.56 0 0027.14 52 24.65 24.65 0 0016 72.59v113.29a24 24 0 0019.52 23.57l232.93 43.07a4 4 0 010 7.86L35.53 303.45A24 24 0 0016 327v113.31A23.57 23.57 0 0026.59 460a23.94 23.94 0 0013.22 4 24.55 24.55 0 009.52-1.93L476.4 285.94l.19-.09a32 32 0 000-58.8z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* emoji → Ionicons `happy-outline` (smiley), #888 → white on hover */
body.woocommerce-account .bp-messages-wrap .bm-emojies svg{ display:none !important; }
body.woocommerce-account .bp-messages-wrap .bm-emojies::before{ content:''; display:inline-block; width:22px; height:22px; background-color:#888888; transition:background-color .15s ease-out; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='184' cy='232' r='24'/%3E%3Ccircle cx='328' cy='232' r='24'/%3E%3Ccircle cx='256' cy='256' r='208' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M169.38 303.31C185.34 344.35 217.9 368 256 368s70.66-23.65 86.62-64.69' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='184' cy='232' r='24'/%3E%3Ccircle cx='328' cy='232' r='24'/%3E%3Ccircle cx='256' cy='256' r='208' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M169.38 303.31C185.34 344.35 217.9 368 256 368s70.66-23.65 86.62-64.69' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E") center/contain no-repeat; }
body.woocommerce-account .bp-messages-wrap .bm-emojies:hover::before{ background-color:#ffffff; }

/* compose → Ionicons `create-outline` (pencil), white → red on hover */
body.woocommerce-account .bp-messages-wrap .chat-header.side-header .new-message svg{ display:none !important; }
body.woocommerce-account .bp-messages-wrap .chat-header.side-header .new-message::before{ content:''; display:inline-block; width:22px; height:22px; background-color:#ffffff; transition:background-color .15s ease-out; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h185.89' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38z'/%3E%3Cpath d='M399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-9.95a9 9 0 00-12.71-.05z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h185.89' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38z'/%3E%3Cpath d='M399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-9.95a9 9 0 00-12.71-.05z'/%3E%3C/svg%3E") center/contain no-repeat; }
body.woocommerce-account .bp-messages-wrap .chat-header.side-header .new-message:hover::before{ background-color:#d10000; }

/* settings → Ionicons `settings-outline` (gear), #ccc → red on hover */
body.woocommerce-account .bp-messages-wrap .chat-footer .settings svg{ display:none !important; }
body.woocommerce-account .bp-messages-wrap .chat-footer .settings::before{ content:''; display:inline-block; width:22px; height:22px; background-color:#cccccc; transition:background-color .15s ease-out; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4zM416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4zM416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E") center/contain no-repeat; }
body.woocommerce-account .bp-messages-wrap .chat-footer .settings:hover::before{ background-color:#d10000; }

/* more-actions → Ionicons `ellipsis-horizontal`, #888 (rows + open header) */
body.woocommerce-account .bp-messages-wrap .bm-more-actions svg{ display:none !important; }
body.woocommerce-account .bp-messages-wrap .bm-more-actions::before{ content:''; display:inline-block; width:20px; height:20px; background-color:#888888; transition:background-color .15s ease-out; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='32'/%3E%3Ccircle cx='416' cy='256' r='32'/%3E%3Ccircle cx='96' cy='256' r='32'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='32'/%3E%3Ccircle cx='416' cy='256' r='32'/%3E%3Ccircle cx='96' cy='256' r='32'/%3E%3C/svg%3E") center/contain no-repeat; }
body.woocommerce-account .bp-messages-wrap .bm-more-actions:hover::before{ background-color:#d10000; }

/* back arrow → Ionicons `arrow-back`, white. NOTE: the plugin exposes no stable
   class for the open-thread back button, so these selectors are best-guesses
   (`.bm-back`/`.back`/`.back-button`); if none match, nothing changes (no harm)
   and the header's back <svg> stays natively recolored white by the rule above. */
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header) .bm-back svg,
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header) .back svg,
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header) .back-button svg{ display:none !important; }
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header) .bm-back::before,
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header) .back::before,
body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header) .back-button::before{ content:''; display:inline-block; width:22px; height:22px; background-color:#ffffff; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M244 400L100 256l144-144M120 256h292' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='48'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M244 400L100 256l144-144M120 256h292' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='48'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---- in-widget popovers (only if the plugin renders them inside the wrap) - */
body.woocommerce-account .bp-messages-wrap .bm-dropdown,
body.woocommerce-account .bp-messages-wrap .bm-more-actions-menu,
body.woocommerce-account .bp-messages-wrap .bm-emojies-list{ background:#121212 !important; border:1px solid #222222 !important; border-radius:12px !important; }

/* ---- reply / edit compose bar + unread pill + name case (flagged follow-ups)
   Captured live: replying/editing renders .bpbm-preview-message above the composer
   (variant .bpbm-reply-message / .bpbm-edit-message) holding .bpbm-preview-message-name
   (label) + .bpbm-preview-message-text (snippet) + .bpbm-preview-message-cancel.
   App: reply bar = red left accent + red label; edit = amber #ffaa00, and the send
   button turns amber while editing. Unread = BM's .thread .unread-count numeric badge. */
body.woocommerce-account .bp-messages-wrap .bpbm-preview-message{ background:#0a0a0a !important; border-top:1px solid #141416 !important; border-left:4px solid #d10000 !important; padding:8px 12px !important; }
body.woocommerce-account .bp-messages-wrap .bpbm-preview-message-name{ color:#d10000 !important; font-weight:800 !important; font-size:11px !important; letter-spacing:.5px !important; }
body.woocommerce-account .bp-messages-wrap .bpbm-preview-message-text{ color:#8a8a8e !important; font-size:13px !important; }
body.woocommerce-account .bp-messages-wrap .bpbm-preview-message-cancel svg{ color:#8a8a8e !important; }
/* EDIT mode → amber (bar + label + the send button while editing, via :has()) */
body.woocommerce-account .bp-messages-wrap .bpbm-preview-message.bpbm-edit-message{ border-left-color:#ffaa00 !important; }
body.woocommerce-account .bp-messages-wrap .bpbm-preview-message.bpbm-edit-message .bpbm-preview-message-name{ color:#ffaa00 !important; }
body.woocommerce-account .bp-messages-wrap:has(.bpbm-edit-message) .bm-send-message{ background:#ffaa00 !important; }
/* unread numeric pill (app red badge) + drop the name-dot when a count pill exists */
body.woocommerce-account .bp-messages-wrap .thread .unread-count{ background:#d10000 !important; color:#ffffff !important; font-size:10px !important; font-weight:900 !important; padding:3px 7px !important; border-radius:10px !important; line-height:1.2 !important; }
body.woocommerce-account .bp-messages-wrap .thread:has(.unread-count) h4.name::after{ display:none !important; }
/* app lowercases conversation LIST names (open-thread header stays uppercase) */
body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread h4.name{ text-transform:lowercase !important; }

/* ---- specificity hardening ----------------------------------------------
   Better Messages emits a few properties via very long-chain !important
   selectors (bubble radius comes from --bm-message-border-radius; the reply
   capsule bg + empty-state colors) that out-specify the rules above. Fix the
   radius by overriding the plugin's OWN variable (robust, no specificity war);
   out-specify the rest by repeating .bp-messages-wrap so these beat the
   plugin's ~9-class chain (repeated class = higher specificity, same element). */
body.woocommerce-account .bp-messages-wrap{ --bm-message-border-radius:18px !important; --left-message-text-color:255,255,255 !important; }
/* FIX (client-reported): BM dark-theme navy (#181d2c = var --bm-bg-color) bleeds into the
   search + composer, and received text is BM's black (var --left-message-text-color-dark:0,0,0
   → whitened via the variable above). Search + composer → one neutral grey #242424 (glass
   dropped so the "message bar" matches the search); repeat .bp-messages-wrap to beat BM. */
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bpbm-search input{ background:#242424 !important; border:1px solid #333333 !important; color:#ffffff !important; }
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bpbm-search input::placeholder{ color:#888888 !important; }
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-reply{ background:#242424 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border:1px solid #333333 !important; }
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-editor,
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-editor-content{ background:transparent !important; color:#ffffff !important; }
/* belt-and-suspenders: all message text white regardless of BM's variable */
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-message-content-text,
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-message-content-text p{ color:#ffffff !important; }
/* FIX (client-reported): composer emoji/gif/sticker buttons kept BM's navy bg (the "blue box"
   right of the message bar) → transparent. */
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-reply .bm-emojies,
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-reply .bm-gif,
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-reply .bm-stickers{ background:transparent !important; }
/* FIX (client-reported): the message reaction pill was dark-on-dark (invisible on the dark
   received bubble) → WHITE pill with even padding + dark count. The .bm-reactions flex
   container (full bubble width) stays transparent so only the pill shows. */
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-reactions{ background:transparent !important; border:0 !important; --left-message-text-color:17,17,17 !important; --right-message-text-color:17,17,17 !important; }
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-reactions-trigger{ background:transparent !important; border:0 !important; }
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-reaction{ background:#ffffff !important; border:1px solid rgba(0,0,0,.12) !important; border-radius:12px !important; padding:2px 8px !important; }
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-reaction-count{ color:#111111 !important; }
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-message:not(.my) .bm-message-content{ border-radius:18px 18px 18px 4px !important; }
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-message.my .bm-message-content{ border-radius:18px 18px 4px 18px !important; }
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-message.my .bm-replied-message{ background:rgba(0,0,0,.2) !important; }
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-conversation-start svg{ color:#333333 !important; fill:currentColor !important; }
body.woocommerce-account .bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap.bp-messages-wrap .bm-conversation-start a{ color:#d10000 !important; }

/* ---- glass fallback (opaque when transparency is reduced) ----------------- */
@media (prefers-reduced-transparency: reduce){
  body.woocommerce-account .bp-messages-wrap .chat-header:not(.side-header),
  body.woocommerce-account .bp-messages-wrap .bm-reply{ background:#121212 !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ---- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  body.woocommerce-account .bp-messages-wrap *{ transition:none !important; }
}

/* ---- mobile: keep the plugin's single-column mode, edge-to-edge ---------- */
@media (max-width:768px){
  body.woocommerce-account .bp-messages-wrap-main{ max-width:100% !important; border-radius:0 !important; border-left:0 !important; border-right:0 !important; }
  body.woocommerce-account .bp-messages-wrap .bp-messages-side-threads .thread{ min-height:56px !important; }
  body.woocommerce-account .bp-messages-wrap .bm-send-message{ width:40px !important; height:40px !important; }
}

/* ---------------------------------------------------------------------------
   MY MUSIC (client file browser) → app music.jsx: breadcrumb, storage bar,
   folder rows (red folder + count) and file rows (note + duration·size·date).
   --------------------------------------------------------------------------- */
.mr-music{ max-width:920px; }
.mr-music-ico-folder{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.mr-music-ico-note{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); }
/* breadcrumb (on off-white) */
.mr-music-crumb{ display:flex; align-items:center; gap:8px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid #d7dade; font-family:var(--font); font-size:13px; }
.mr-music-crumb-home{ display:inline-flex; align-items:center; gap:5px; font-weight:600; text-decoration:none; color:#d10000 !important; }
.mr-music-crumb-home.is-active{ color:#0c0c0c !important; }
.mr-music-crumb-home .mr-ico{ color:currentColor; font-size:14px; }
.mr-music-crumb-sep{ color:#9a9da2; }
.mr-music-crumb-cur{ color:#0c0c0c; font-weight:700; }
/* storage bar */
.mr-music-storage{ background:#121212; border:1px solid #222222; border-radius:12px; padding:16px; margin-bottom:16px; }
.mr-music-storage-head{ display:flex; justify-content:space-between; margin-bottom:10px; }
.mr-music-storage-label{ color:#8a8a8e; font-family:var(--font); font-size:11px; font-weight:800; letter-spacing:.1em; }
.mr-music-storage-value{ color:#ffffff; font-family:var(--font); font-size:12px; font-weight:700; }
.mr-music-storage-track{ height:5px; background:#222222; border-radius:3px; overflow:hidden; margin-bottom:7px; }
.mr-music-storage-fill{ display:block; height:100%; background:#d10000; border-radius:3px; }
.mr-music-storage-cap{ color:#8a8a8e; font-family:var(--font); font-size:11px; }
/* rows (folders + files) */
.mr-music-row{ display:flex; align-items:center; gap:12px; background:#121212; border:1px solid #222222; border-radius:12px; padding:14px 16px; margin-bottom:10px; text-decoration:none; transition:border-color .15s, transform .12s; }
a.mr-music-row:hover{ border-color:#3a3a3e; transform:translateY(-1px); }
.mr-music-iconbox{ width:34px; flex:0 0 34px; display:flex; justify-content:center; }
.mr-music-folder{ color:#d10000; font-size:24px; }
.mr-music-ico-note{ color:#8a8a8e; font-size:20px; }
.mr-music-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mr-music-name{ color:#ffffff; font-family:var(--font); font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mr-music-sub{ color:#8a8a8e; font-family:var(--font); font-size:12px; }
.mr-music-chev{ width:8px; height:8px; border-right:2px solid #444444; border-bottom:2px solid #444444; transform:rotate(-45deg); flex:0 0 auto; }
.mr-music-dots{ width:4px; height:16px; flex:0 0 auto; background-color:#444444; -webkit-mask:var(--dots) center/contain no-repeat; mask:var(--dots) center/contain no-repeat;
  --dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E"); }
/* sidebar nav icon (music note) */
.woocommerce-MyAccount-navigation-link--my-music a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); }

/* ============================================================================
   EXACT IONICONS — match the app 1:1 (Ionicons @expo/vector-icons). Appended last
   so these override the earlier hand-drawn icon masks by source order.
   ============================================================================ */
.woocommerce-MyAccount-navigation-link--dashboard a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M427.68 351.43C402 320 383.87 304 383.87 217.35 383.87 138 343.35 109.73 310 96c-4.43-1.82-8.6-6-9.95-10.55C294.2 65.54 277.8 48 256 48s-38.21 17.55-44 37.47c-1.35 4.6-5.52 8.71-9.95 10.53-33.39 13.75-73.87 41.92-73.87 121.35C128.13 304 110 320 84.32 351.43 73.68 364.45 83 384 101.61 384h308.88c18.51 0 27.77-19.61 17.19-32.57zM320 384v16a64 64 0 01-128 0v-16' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--my-music a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M48 320h64l64-256 64 384 64-224 32 96h64'/%3E%3Ccircle cx='432' cy='320' r='32' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--bookings a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' x='48' y='80' width='416' height='384' rx='48'/%3E%3Ccircle cx='296' cy='232' r='24'/%3E%3Ccircle cx='376' cy='232' r='24'/%3E%3Ccircle cx='296' cy='312' r='24'/%3E%3Ccircle cx='376' cy='312' r='24'/%3E%3Ccircle cx='136' cy='312' r='24'/%3E%3Ccircle cx='216' cy='312' r='24'/%3E%3Ccircle cx='136' cy='392' r='24'/%3E%3Ccircle cx='216' cy='392' r='24'/%3E%3Ccircle cx='296' cy='392' r='24'/%3E%3Cpath fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' stroke-linecap='round' d='M128 48v32M384 48v32'/%3E%3Cpath fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' d='M464 160H48'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--messages a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M87.49 380c1.19-4.38-1.44-10.47-3.95-14.86a44.86 44.86 0 00-2.54-3.8 199.81 199.81 0 01-33-110C47.65 139.09 140.73 48 255.83 48 356.21 48 440 117.54 459.58 209.85a199 199 0 014.42 41.64c0 112.41-89.49 204.93-204.59 204.93-18.3 0-43-4.6-56.47-8.37s-26.92-8.77-30.39-10.11a31.09 31.09 0 00-11.12-2.07 30.71 30.71 0 00-12.09 2.43l-67.83 24.48a16 16 0 01-4.67 1.22 9.6 9.6 0 01-9.57-9.74 15.85 15.85 0 01.6-3.29z' fill='none' stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--loyalty_reward a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 104v56h56a56 56 0 10-56-56zM256 104v56h-56a56 56 0 1156-56z' fill='none' stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/%3E%3Crect x='64' y='160' width='384' height='112' rx='32' ry='32' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M416 272v144a48 48 0 01-48 48H144a48 48 0 01-48-48V272M256 160v304' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--payment-methods a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect x='48' y='96' width='416' height='320' rx='56' ry='56' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath fill='none' stroke='black' stroke-linejoin='round' stroke-width='60' d='M48 192h416M128 300h48v20h-48z'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M344 144c-3.92 52.87-44 96-88 96s-84.15-43.12-88-96c-4-55 35-96 88-96s92 42 88 96z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M256 304c-87 0-175.3 48-191.64 138.6C62.39 453.52 68.57 464 80 464h352c11.44 0 17.62-10.48 15.65-21.4C431.3 352 343 304 256 304z' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M304 336v40a40 40 0 01-40 40H104a40 40 0 01-40-40V136a40 40 0 0140-40h152c22.09 0 48 17.91 48 40v40M368 336l80-80-80-80M176 256h256' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--studio-manager a{ --mr-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M448 448V240M64 240v208M382.47 48H129.53c-21.79 0-41.47 12-49.93 30.46L36.3 173c-14.58 31.81 9.63 67.85 47.19 69h2c31.4 0 56.85-25.18 56.85-52.23 0 27 25.46 52.23 56.86 52.23s56.8-23.38 56.8-52.23c0 27 25.45 52.23 56.85 52.23s56.86-23.38 56.86-52.23c0 28.85 25.45 52.23 56.85 52.23h1.95c37.56-1.17 61.77-37.21 47.19-69l-43.3-94.54C423.94 60 404.26 48 382.47 48zM32 464h448M136 288h80a24 24 0 0124 24v88h0-128 0v-88a24 24 0 0124-24zM288 464V312a24 24 0 0124-24h64a24 24 0 0124 24v152'/%3E%3C/svg%3E"); }
.mr-studio-ico-cash{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect x='32' y='80' width='448' height='256' rx='16' ry='16' transform='rotate(180 256 208)' fill='none' stroke='black' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M64 384h384M96 432h320'/%3E%3Ccircle cx='256' cy='208' r='80' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M480 160a80 80 0 01-80-80M32 160a80 80 0 0080-80M480 256a80 80 0 00-80 80M32 256a80 80 0 0180 80' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E"); }
.mr-studio-ico-tags{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M403.29 32H280.36a14.46 14.46 0 00-10.2 4.2L24.4 281.9a28.85 28.85 0 000 40.7l117 117a28.86 28.86 0 0040.71 0L427.8 194a14.46 14.46 0 004.2-10.2v-123A28.66 28.66 0 00403.29 32z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M352 144a32 32 0 1132-32 32 32 0 01-32 32z'/%3E%3Cpath d='M230 480l262-262a13.81 13.81 0 004-10V80' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E"); }
.mr-studio-ico-people{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E"); }
.mr-studio-ico-building{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M176 416v64M80 32h192a32 32 0 0132 32v412a4 4 0 01-4 4H48h0V64a32 32 0 0132-32zM320 192h112a32 32 0 0132 32v256h0-160 0V208a16 16 0 0116-16z'/%3E%3Cpath d='M98.08 431.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zM98.08 351.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zM98.08 271.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zM98.08 191.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zM98.08 111.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zM178.08 351.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zM178.08 271.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zM178.08 191.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zM178.08 111.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zM258.08 431.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zM258.08 351.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zM258.08 271.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79z'/%3E%3Cellipse cx='256' cy='176' rx='15.95' ry='16.03' transform='rotate(-45 255.99 175.996)'/%3E%3Cpath d='M258.08 111.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zM400 400a16 16 0 1016 16 16 16 0 00-16-16zM400 320a16 16 0 1016 16 16 16 0 00-16-16zM400 240a16 16 0 1016 16 16 16 0 00-16-16zM336 400a16 16 0 1016 16 16 16 0 00-16-16zM336 320a16 16 0 1016 16 16 16 0 00-16-16zM336 240a16 16 0 1016 16 16 16 0 00-16-16z'/%3E%3C/svg%3E"); }
.mr-studio-ico-chart{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M32 32v432a16 16 0 0016 16h432' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Crect x='96' y='224' width='80' height='192' rx='20' ry='20' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Crect x='240' y='176' width='80' height='240' rx='20' ry='20' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Crect x='383.64' y='112' width='80' height='304' rx='20' ry='20' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E"); }
.mr-studio-ico-receipt{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' d='M160 336V48l32 16 32-16 31.94 16 32.37-16L320 64l31.79-16 31.93 16L416 48l32.01 16L480 48v224'/%3E%3Cpath d='M480 272v112a80 80 0 01-80 80h0a80 80 0 01-80-80v-48H48a15.86 15.86 0 00-16 16c0 64 6.74 112 80 112h288' fill='none' stroke='black' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M224 144h192M288 224h128'/%3E%3C/svg%3E"); }
.mr-studio-ico-people-circle{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 464c-114.69 0-208-93.31-208-208S141.31 48 256 48s208 93.31 208 208-93.31 208-208 208zm0-384c-97 0-176 79-176 176s79 176 176 176 176-78.95 176-176S353.05 80 256 80z'/%3E%3Cpath d='M323.67 292c-17.4 0-34.21-7.72-47.34-21.73a83.76 83.76 0 01-22-51.32c-1.47-20.7 4.88-39.75 17.88-53.62S303.38 144 323.67 144c20.14 0 38.37 7.62 51.33 21.46s19.47 33 18 53.51a84 84 0 01-22 51.3C357.86 284.28 341.06 292 323.67 292zm55.81-74zM163.82 295.36c-29.76 0-55.93-27.51-58.33-61.33-1.23-17.32 4.15-33.33 15.17-45.08s26.22-18 43.15-18 32.12 6.44 43.07 18.14 16.5 27.82 15.25 45c-2.44 33.77-28.6 61.27-58.31 61.27zM420.37 355.28c-1.59-4.7-5.46-9.71-13.22-14.46-23.46-14.33-52.32-21.91-83.48-21.91-30.57 0-60.23 7.9-83.53 22.25-26.25 16.17-43.89 39.75-51 68.18-1.68 6.69-4.13 19.14-1.51 26.11a192.18 192.18 0 00232.75-80.17zM163.63 401.37c7.07-28.21 22.12-51.73 45.47-70.75a8 8 0 00-2.59-13.77c-12-3.83-25.7-5.88-42.69-5.88-23.82 0-49.11 6.45-68.14 18.17-5.4 3.33-10.7 4.61-14.78 5.75a192.84 192.84 0 0077.78 86.64l1.79-.14a102.82 102.82 0 013.16-20.02z'/%3E%3C/svg%3E"); }
.mr-studio-ico-wallet{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect x='48' y='144' width='416' height='288' rx='48' ry='48' fill='none' stroke='black' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M411.36 144v-30A50 50 0 00352 64.9L88.64 109.85A50 50 0 0048 159v49' fill='none' stroke='black' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M368 320a32 32 0 1132-32 32 32 0 01-32 32z'/%3E%3C/svg%3E"); }
.mr-studio-ico-gear{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4zM416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E"); }
.mr-studio-ico-cal{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' x='48' y='80' width='416' height='384' rx='48'/%3E%3Ccircle cx='296' cy='232' r='24'/%3E%3Ccircle cx='376' cy='232' r='24'/%3E%3Ccircle cx='296' cy='312' r='24'/%3E%3Ccircle cx='376' cy='312' r='24'/%3E%3Ccircle cx='136' cy='312' r='24'/%3E%3Ccircle cx='216' cy='312' r='24'/%3E%3Ccircle cx='136' cy='392' r='24'/%3E%3Ccircle cx='216' cy='392' r='24'/%3E%3Ccircle cx='296' cy='392' r='24'/%3E%3Cpath fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' stroke-linecap='round' d='M128 48v32M384 48v32'/%3E%3Cpath fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' d='M464 160H48'/%3E%3C/svg%3E"); }
.mr-ico-arrow{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M268 112l144 144-144 144M392 256H100'/%3E%3C/svg%3E"); }
.mr-ico-check{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M352 176L217.6 336 160 272'/%3E%3C/svg%3E"); }
.mr-ico-search{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32' d='M338.29 338.29L448 448'/%3E%3C/svg%3E"); }
.mr-ico-filter{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M368 128h80M64 128h240M368 384h80M64 384h240M208 256h240M64 256h80'/%3E%3Ccircle cx='336' cy='128' r='32' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Ccircle cx='176' cy='256' r='32' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Ccircle cx='336' cy='384' r='32' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E"); }
.mr-ico-person{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z'/%3E%3Cpath d='M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z'/%3E%3C/svg%3E"); }
.mr-ico-cal{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' x='48' y='80' width='416' height='384' rx='48'/%3E%3Ccircle cx='296' cy='232' r='24'/%3E%3Ccircle cx='376' cy='232' r='24'/%3E%3Ccircle cx='296' cy='312' r='24'/%3E%3Ccircle cx='376' cy='312' r='24'/%3E%3Ccircle cx='136' cy='312' r='24'/%3E%3Ccircle cx='216' cy='312' r='24'/%3E%3Ccircle cx='136' cy='392' r='24'/%3E%3Ccircle cx='216' cy='392' r='24'/%3E%3Ccircle cx='296' cy='392' r='24'/%3E%3Cpath fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' stroke-linecap='round' d='M128 48v32M384 48v32'/%3E%3Cpath fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' d='M464 160H48'/%3E%3C/svg%3E"); }
.mr-ico-clock{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64z' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M256 128v144h96'/%3E%3C/svg%3E"); }
.mr-ico-mic{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M192 448h128M384 208v32c0 70.4-57.6 128-128 128h0c-70.4 0-128-57.6-128-128v-32M256 368v80'/%3E%3Cpath d='M256 64a63.68 63.68 0 00-64 64v111c0 35.2 29 65 64 65s64-29 64-65V128c0-36-28-64-64-64z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E"); }
.mr-ico-receipt{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' d='M160 336V48l32 16 32-16 31.94 16 32.37-16L320 64l31.79-16 31.93 16L416 48l32.01 16L480 48v224'/%3E%3Cpath d='M480 272v112a80 80 0 01-80 80h0a80 80 0 01-80-80v-48H48a15.86 15.86 0 00-16 16c0 64 6.74 112 80 112h288' fill='none' stroke='black' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M224 144h192M288 224h128'/%3E%3C/svg%3E"); }
.mr-ico-chat{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M87.49 380c1.19-4.38-1.44-10.47-3.95-14.86a44.86 44.86 0 00-2.54-3.8 199.81 199.81 0 01-33-110C47.65 139.09 140.73 48 255.83 48 356.21 48 440 117.54 459.58 209.85a199 199 0 014.42 41.64c0 112.41-89.49 204.93-204.59 204.93-18.3 0-43-4.6-56.47-8.37s-26.92-8.77-30.39-10.11a31.09 31.09 0 00-11.12-2.07 30.71 30.71 0 00-12.09 2.43l-67.83 24.48a16 16 0 01-4.67 1.22 9.6 9.6 0 01-9.57-9.74 15.85 15.85 0 01.6-3.29z' fill='none' stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E"); }
.mr-music-ico-folder{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M440 432H72a40 40 0 01-40-40V120a40 40 0 0140-40h75.89a40 40 0 0122.19 6.72l27.84 18.56a40 40 0 0022.19 6.72H440a40 40 0 0140 40v240a40 40 0 01-40 40zM32 192h448' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E"); }
.mr-music-ico-note{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M183.83 480a55.2 55.2 0 01-32.36-10.55A56.64 56.64 0 01128 423.58a50.26 50.26 0 0134.14-47.73L213 358.73a16.25 16.25 0 0011-15.49V92a32.1 32.1 0 0124.09-31.15l108.39-28.14A22 22 0 01384 54v57.75a32.09 32.09 0 01-24.2 31.19l-91.65 23.13A16.24 16.24 0 00256 181.91V424a48.22 48.22 0 01-32.78 45.81l-21.47 7.23a56 56 0 01-17.92 2.96z'/%3E%3C/svg%3E"); }
.mr-music-folder{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M496 152a56 56 0 00-56-56H220.11a23.89 23.89 0 01-13.31-4L179 73.41A55.77 55.77 0 00147.89 64H72a56 56 0 00-56 56v48a8 8 0 008 8h464a8 8 0 008-8zM16 392a56 56 0 0056 56h368a56 56 0 0056-56V216a8 8 0 00-8-8H24a8 8 0 00-8 8z'/%3E%3C/svg%3E"); }
.mr-music-dots{ --dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='48'/%3E%3Ccircle cx='256' cy='416' r='48'/%3E%3Ccircle cx='256' cy='96' r='48'/%3E%3C/svg%3E"); }
.mr-sess-empty-ico{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' x='48' y='80' width='416' height='384' rx='48'/%3E%3Ccircle cx='296' cy='232' r='24'/%3E%3Ccircle cx='376' cy='232' r='24'/%3E%3Ccircle cx='296' cy='312' r='24'/%3E%3Ccircle cx='376' cy='312' r='24'/%3E%3Ccircle cx='136' cy='312' r='24'/%3E%3Ccircle cx='216' cy='312' r='24'/%3E%3Ccircle cx='136' cy='392' r='24'/%3E%3Ccircle cx='216' cy='392' r='24'/%3E%3Ccircle cx='296' cy='392' r='24'/%3E%3Cpath fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' stroke-linecap='round' d='M128 48v32M384 48v32'/%3E%3Cpath fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' d='M464 160H48'/%3E%3C/svg%3E"); }
.mr-studio-stub-ico{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64z' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M256 128v144h96'/%3E%3C/svg%3E"); }
.mr-alerts-empty-icon{ border:0 !important; width:40px; height:40px; background-color:#d10000; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M427.68 351.43C402 320 383.87 304 383.87 217.35 383.87 138 343.35 109.73 310 96c-4.43-1.82-8.6-6-9.95-10.55C294.2 65.54 277.8 48 256 48s-38.21 17.55-44 37.47c-1.35 4.6-5.52 8.71-9.95 10.53-33.39 13.75-73.87 41.92-73.87 121.35C128.13 304 110 320 84.32 351.43 73.68 364.45 83 384 101.61 384h308.88c18.51 0 27.77-19.61 17.19-32.57zM320 384v16a64 64 0 01-128 0v-16' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M427.68 351.43C402 320 383.87 304 383.87 217.35 383.87 138 343.35 109.73 310 96c-4.43-1.82-8.6-6-9.95-10.55C294.2 65.54 277.8 48 256 48s-38.21 17.55-44 37.47c-1.35 4.6-5.52 8.71-9.95 10.53-33.39 13.75-73.87 41.92-73.87 121.35C128.13 304 110 320 84.32 351.43 73.68 364.45 83 384 101.61 384h308.88c18.51 0 27.77-19.61 17.19-32.57zM320 384v16a64 64 0 01-128 0v-16' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E") center/contain no-repeat; }
.mr-alerts-empty-icon::before, .mr-alerts-empty-icon::after{ content:none !important; }
/* chevrons -> exact Ionicons chevron-forward (was CSS borders) */
.mr-session-chev, .mr-sess-section-chev, .mr-alert-chevron, .mr-music-chev, .mr-studio-attn-chev{ border:0 !important; width:15px !important; height:15px !important; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E") center/contain no-repeat; transform:rotate(0deg); }
.mr-session-chev{ background-color:#8a8a8e; }
.mr-sess-section-chev{ background-color:#8a8a8e; transform:rotate(90deg); }
.mr-sess-section.collapsed .mr-sess-section-chev{ transform:rotate(0deg); }
.mr-alert-chevron, .mr-music-chev, .mr-studio-attn-chev{ background-color:#444444; }
.mr-session-card.open .mr-session-chev{ transform:rotate(90deg); }

/* ==========================================================================
   STUDIO MANAGER — app-parity fixes (hub chart, coupons toggle/year, reports
   month selector, audit, clients, availability editor)
   ========================================================================== */
/* icon masks */
.mr-ico-alert{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E"); }
.mr-ico-sliders{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E"); }
.mr-ico-ccleft{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='13 8 9 12 13 16'/%3E%3C/svg%3E"); }
.mr-ico-ccright{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='11 8 15 12 11 16'/%3E%3C/svg%3E"); }
.mr-ico-share{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E"); }
.mr-ico-trash{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }

/* the logged-in dashboard's theme link rule (.entry-content a → red + underline) leaks onto our
   <a>-based chips/options; neutralize it inside the studio views so active chips read correctly. */
.mr-studio-view a.mr-chip, .mr-studio-view a.mr-report-opt, .mr-studio-view a.mr-step-arrow, .mr-studio-view .mr-chart-toggle a{ border-bottom:0 !important; }
.mr-studio-view .mr-chip{ color:#cfcfd2 !important; }
.mr-studio-view .mr-chip.is-active{ color:#ffffff !important; }
.mr-studio-view .mr-report-opt{ color:#eaeaea !important; }
.mr-studio-view .mr-report-opt.is-active{ color:#d10000 !important; }
.mr-studio-view .mr-chart-toggle a{ color:#888888 !important; }
.mr-studio-view .mr-chart-toggle a.is-active{ color:#ffffff !important; }

/* Coupons — toggle (app 48×28) */
.mr-toggle{ display:inline-block; width:48px; height:28px; border-radius:14px; background:#2a2a2a; border:0; padding:3px; cursor:pointer; flex:0 0 auto; transition:background .15s; }
.mr-toggle.is-on{ background:#d10000; }
.mr-toggle-knob{ display:block; width:22px; height:22px; border-radius:50%; background:#ffffff; transition:transform .16s ease; }
.mr-toggle.is-on .mr-toggle-knob{ transform:translateX(20px); }
.mr-toggle[disabled]{ opacity:.5; cursor:default; }
.mr-promo-years{ margin-bottom:4px; }

/* Hub — needs-attention alert state */
.mr-studio-attn.is-flag{ border-color:rgba(209,0,0,.45); background:rgba(209,0,0,.06); }
.mr-studio-attn .mr-ico-alert{ color:#d10000; }

/* Interactive bar chart (hub + reports) */
.mr-studio-chart{ background:#121212; border:1px solid #222222; border-radius:12px; padding:16px; margin-bottom:24px; }
.mr-studio-chart-label{ color:#8a8a8e; font-family:var(--font); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; }
.mr-ichart{ position:relative; padding-top:36px; }
.mr-ichart-tip{ position:absolute; top:0; transform:translateX(-50%); background:#1c1c1c; border:1px solid #333333; border-radius:8px; padding:5px 10px; text-align:center; white-space:nowrap; pointer-events:none; z-index:2; }
.mr-ichart-tip-v{ display:block; color:#ffffff; font-family:var(--disp); font-size:14px; font-weight:900; }
.mr-ichart-tip-l{ display:block; color:#888888; font-family:var(--font); font-size:10px; font-weight:600; }
.mr-ichart-bars{ display:flex; align-items:flex-end; gap:3px; height:130px; touch-action:none; }
.mr-ichart-bar{ flex:1 1 0; min-width:0; height:var(--h,2%); background:rgba(209,0,0,.32); border-radius:3px 3px 0 0; transition:background .1s; }
.mr-ichart-bar.is-active{ background:#d10000; }

/* Reports — month stepper + options sheet */
.mr-report-chips{ align-items:center; }
.mr-report-opts{ width:38px; height:34px; border-radius:20px; background:#121212; border:1px solid #222222; color:#aaaaaa; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mr-report-opts.is-active{ background:#d10000; border-color:#d10000; color:#ffffff; }
.mr-report-opts .mr-ico{ font-size:16px; }
.mr-report-stepper{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 16px; }
.mr-step-arrow{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; color:#d10000; text-decoration:none; }
.mr-step-arrow .mr-ico{ font-size:26px; }
.mr-step-label{ color:#ffffff; font-family:var(--font); font-size:15px; font-weight:800; letter-spacing:.5px; }
.mr-report-sheet{ position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; justify-content:center; }
.mr-report-sheet-card{ width:100%; max-width:560px; background:#121212; border:1px solid #222222; border-radius:18px 18px 0 0; padding:18px; }
.mr-report-sheet-h{ color:#888888; font-family:var(--font); font-size:11px; font-weight:800; letter-spacing:.1em; margin-bottom:8px; }
.mr-report-opt{ display:block; color:#eaeaea; font-family:var(--font); font-size:15px; font-weight:600; padding:11px 6px; text-decoration:none; border-radius:8px; }
.mr-report-opt.is-active{ color:#d10000; font-weight:800; }
.mr-report-sheet-div{ height:1px; background:#222222; margin:8px 0; }
.mr-report-custom{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.mr-report-custom .mr-field-lbl{ width:100%; margin-bottom:0; }
.mr-report-custom .mr-input{ flex:1; min-width:120px; }

/* Audit — cards + kind icons */
.mr-audit2 .mr-audit-count{ color:#8a8a8e; font-family:var(--font); font-size:12px; font-weight:600; margin-bottom:12px; }
.mr-audit-card{ display:flex; align-items:center; gap:12px; background:#121212; border:1px solid #222222; border-radius:12px; padding:14px; margin-bottom:10px; }
.mr-audit-ico{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mr-audit-ico::before{ content:''; width:17px; height:17px; background-color:var(--k,#888888); -webkit-mask:var(--ki) center/contain no-repeat; mask:var(--ki) center/contain no-repeat; }
.mr-audit-body{ flex:1; display:flex; flex-direction:column; min-width:0; }
.mr-audit-summary{ color:#eaeaea; font-family:var(--font); font-size:13.5px; font-weight:600; line-height:1.4; }
.mr-audit-date{ color:#8a8a8e; font-family:var(--font); font-size:12px; margin-top:2px; }
.mr-audit-amt-wrap{ text-align:right; flex:0 0 auto; }
.mr-audit-amt{ display:block; font-family:var(--font); font-size:14px; font-weight:800; }
.mr-audit-amt.is-in{ color:#3ba55d; }
.mr-audit-amt.is-out{ color:#d10000; }
.mr-audit-amt.is-dim{ color:#d9a441; }
.mr-audit-dir{ color:#8a8a8e; font-family:var(--font); font-size:9px; font-weight:900; letter-spacing:.05em; }
.mr-audit-none{ color:#8a8a8e; font-family:var(--font); font-size:14px; text-align:center; padding:30px 0; }
.mr-akind-session{ --k:#3ba55d; --ki:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); background:rgba(59,165,93,.13); border:1px solid rgba(59,165,93,.33); }
.mr-akind-cash, .mr-akind-money{ --k:#d9a441; --ki:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); background:rgba(217,164,65,.13); border:1px solid rgba(217,164,65,.33); }
.mr-akind-noshow{ --k:#d10000; --ki:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E"); background:rgba(209,0,0,.13); border:1px solid rgba(209,0,0,.33); }
.mr-akind-cancel{ --k:#d9a441; --ki:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E"); background:rgba(217,164,65,.13); border:1px solid rgba(217,164,65,.33); }
.mr-akind-coupon{ --k:#4a9eff; --ki:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E"); background:rgba(74,158,255,.13); border:1px solid rgba(74,158,255,.33); }
.mr-akind-redeem{ --k:#d10000; --ki:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z'/%3E%3C/svg%3E"); background:rgba(209,0,0,.13); border:1px solid rgba(209,0,0,.33); }
.mr-akind-payout{ --k:#d10000; --ki:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='16 12 12 8 8 12'/%3E%3Cline x1='12' y1='16' x2='12' y2='8'/%3E%3C/svg%3E"); background:rgba(209,0,0,.13); border:1px solid rgba(209,0,0,.33); }
.mr-akind-other{ --k:#888888; --ki:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); background:rgba(136,136,136,.12); border:1px solid rgba(136,136,136,.3); }

/* Clients */
.mr-client-chips{ margin-bottom:12px; }
.mr-client-search-box{ margin-bottom:12px; }
.mr-client-new{ display:flex; align-items:center; gap:12px; width:100%; background:transparent; border:1px dashed #333333; border-radius:12px; padding:13px 16px; color:#ffffff; font-family:var(--font); font-size:14px; font-weight:800; cursor:pointer; margin-bottom:12px; }
.mr-client-new:hover{ border-color:#d10000; }
.mr-client-new-ico{ width:30px; height:30px; border-radius:50%; background:rgba(209,0,0,.12); color:#d10000; display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1; flex:0 0 auto; }
.mr-client-new-ico::before{ content:'+'; }
.mr-client-create{ background:#121212; border:1px solid #222222; border-radius:12px; padding:16px; margin-bottom:12px; }
.mr-client-hint{ color:#777777; font-family:var(--font); font-size:12px; line-height:1.5; margin:8px 0 0; }
.mr-client-row{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid #1b1b1b; }
.mr-client-ava2{ width:34px; height:34px; border-radius:50%; background:#1c1c1c; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mr-client-ava2::before{ content:''; width:20px; height:20px; background-color:#8a8a8e; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat; }
.mr-client-meta{ flex:1; display:flex; flex-direction:column; min-width:0; }
.mr-client-name{ color:#ffffff; font-family:var(--font); font-size:15px; font-weight:700; }
.mr-client-unclaimed{ color:#d9a441; font-family:var(--font); font-size:12px; font-weight:700; margin-top:2px; }
.mr-client-user{ color:#8a8a8e; font-family:var(--font); font-size:12px; margin-top:2px; }
.mr-client-share{ background:none; border:0; cursor:pointer; color:#d10000; padding:6px; flex:0 0 auto; }
.mr-client-share .mr-ico{ font-size:20px; }
/* Book a cash session for this client — mirrors the share button so the row keeps one visual rhythm. */
.mr-client-book{ background:none; border:0; cursor:pointer; color:#d10000; padding:6px; flex:0 0 auto; }
.mr-client-book .mr-ico{ font-size:20px; }
.mr-client-book:hover{ opacity:.75; }
/* Booking modal calendar. Reuses every .mr-cal-* rule from the reschedule modal above, so
   this only has to space it; the grid is minmax(0,1fr) and fits the 420px modal card. */
.mr-book-cal{ margin-bottom:6px; }
.mr-book-cal .mr-cal-frame{ min-height:0; }
.mr-book-client{ background:#0d0d0f; border:1px solid #2a2a2a; border-radius:10px; color:#ffffff; font-family:var(--font); font-size:15px; font-weight:700; padding:12px 14px; margin-bottom:4px; }
/* A room the tarp still blocks stays visible but unselectable, so Room B is discoverable
   before it opens and needs no markup change on the day it does. */
.mr-modal select.mr-input option:disabled{ color:#666666; }
.mr-clients-none{ color:#8a8a8e; font-family:var(--font); font-size:14px; text-align:center; padding:30px 0; }

/* Availability editor */
.mr-room-picker{ margin-bottom:14px; }
.mr-avail-tabs{ display:flex; gap:10px; margin-bottom:16px; }
.mr-avail-tab{ flex:1; background:#121212; border:1px solid #222222; border-radius:10px; padding:12px; color:#aaaaaa; font-family:var(--font); font-size:14px; font-weight:800; cursor:pointer; }
.mr-avail-tab.is-active{ background:#d10000; border-color:#d10000; color:#ffffff; }
.mr-avail-intro{ color:#888888; font-family:var(--font); font-size:13px; line-height:1.5; margin:0 0 14px; }
.mr-avail-hint{ color:#777777; font-family:var(--font); font-size:12px; line-height:1.5; margin:12px 0; }
.mr-avail-range{ color:#aaaaaa; font-family:var(--font); font-size:13px; text-align:center; margin:14px 0; }
.mr-seg{ display:flex; gap:8px; margin-bottom:14px; }
.mr-seg-btn{ flex:1; background:#121212; border:1px solid #222222; border-radius:8px; padding:10px; color:#888888; font-family:var(--font); font-size:13px; font-weight:700; cursor:pointer; }
.mr-seg-btn.is-active{ background:#d10000; border-color:#d10000; color:#ffffff; }
.mr-avail-times{ display:flex; gap:12px; margin-bottom:14px; }
.mr-avail-time{ flex:1; display:flex; flex-direction:column; gap:6px; }
.mr-avail-block{ display:flex; align-items:center; gap:12px; background:#121212; border:1px solid #222222; border-radius:12px; padding:14px; margin-bottom:10px; }
.mr-avail-block-ico{ width:20px; height:20px; background-color:#d10000; flex:0 0 auto; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; }
.mr-avail-block-ico.is-allday{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
.mr-avail-block-ico.is-timed{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E"); }
.mr-avail-block-txt{ flex:1; color:#ffffff; font-family:var(--font); font-size:13px; font-weight:600; }
.mr-avail-block-rm{ background:none; border:0; cursor:pointer; color:#777777; padding:4px; flex:0 0 auto; }
.mr-avail-block-rm .mr-ico{ font-size:18px; }
.mr-avail-timeoff{ display:grid; grid-template-columns:1fr 1fr; gap:20px; background:#121212; border:1px solid #222222; border-radius:16px; padding:16px; align-items:start; }
.mr-avail-to-list{ min-width:0; }
.mr-avail-to-cal{ min-width:0; }
.mr-avail-timeoff .mr-cal-frame{ background:#0e0e0e; } /* soften inner frame so it reads as one card */
@media (max-width:640px){ .mr-avail-timeoff{ grid-template-columns:1fr; } .mr-avail-to-cal{ order:-1; } }
.mr-wh-row{ background:#121212; border:1px solid #222222; border-radius:12px; padding:14px; margin-bottom:10px; }
.mr-wh-top{ display:flex; align-items:center; justify-content:space-between; }
.mr-wh-day{ color:#ffffff; font-family:var(--font); font-size:15px; font-weight:800; }
.mr-wh-tog{ display:flex; align-items:center; gap:10px; }
.mr-wh-state{ font-family:var(--font); font-size:12px; font-weight:700; color:#777777; }
.mr-wh-row[data-wh-open="1"] .mr-wh-state{ color:#3ba55d; }
.mr-wh-times{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.mr-wh-times .mr-input{ flex:1; }
.mr-wh-to{ color:#8a8a8e; font-family:var(--font); font-size:13px; }

/* ── Moderation (Flags) view + message Report/Block UI (compliance) ─────────── */
.mr-studio-ico-shield{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.5 8.5 8 11 4.5-2.5 8-6 8-11V5z'/%3E%3C/svg%3E"); }
/* flag cards (owner moderation queue) */
.mr-flags,.mr-flag-group{ display:flex; flex-direction:column; gap:12px; }
.mr-flag-card{ background:#121212; border:1px solid #222222; border-radius:12px; padding:14px 16px; }
.mr-flag-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.mr-flag-cat{ font-family:var(--font); font-size:11px; font-weight:800; letter-spacing:1px; color:#d10000; }
.mr-flag-meta{ color:#b4b4b8; font-size:13px; }
.mr-flag-meta strong{ color:#ffffff; }
.mr-flag-snap{ margin:10px 0 0; padding:10px 12px; background:#0c0c0c; border:1px solid #1e1e20; border-radius:8px; color:#dddddd; font-size:14px; white-space:pre-wrap; word-break:break-word; }
.mr-flag-reason{ margin-top:8px; color:#888888; font-size:13px; font-style:italic; }
.mr-flag-resolution{ margin-top:8px; color:#4bd07a; font-size:12px; font-weight:600; }
.mr-flag-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.mr-flag-actions .mr-btn{ padding:9px 14px; font-size:12px; }
/* injected react-contexify menu items (Report / Block) */
.contexify .mr-bm-item{ cursor:pointer; }
.mr-bm-item.mr-bm-danger .contexify_itemContent{ color:#d10000; }
/* report reason modal (appended to <body>) */
.mr-bm-modal{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:20px; }
.mr-bm-modal[hidden]{ display:none; }
.mr-bm-dialog{ width:100%; max-width:420px; background:#161616; border:1px solid #2a2a2a; border-radius:16px; padding:22px; box-sizing:border-box; }
.mr-bm-title{ margin:0 0 4px; color:#ffffff; font-family:var(--disp); font-size:20px; }
.mr-bm-sub{ margin:0 0 16px; color:#888888; font-size:13px; }
.mr-bm-cats{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.mr-bm-cat{ background:#1c1c1c; border:1px solid #2f2f2f; color:#bbbbbb; border-radius:999px; padding:7px 13px; font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer; }
.mr-bm-cat.is-active{ background:#d10000; border-color:#d10000; color:#ffffff; }
.mr-bm-reason{ width:100%; box-sizing:border-box; background:#0e0e0e; border:1px solid #2a2a2a; border-radius:10px; color:#ffffff; padding:11px 13px; font-family:var(--font); font-size:14px; resize:vertical; }
.mr-bm-reason::placeholder{ color:#8a8a8e; }
.mr-bm-modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
/* success toast */
.mr-bm-toast{ position:fixed; left:50%; bottom:32px; transform:translateX(-50%); z-index:100001; background:#0f7a3d; color:#ffffff; padding:11px 18px; border-radius:999px; font-family:var(--font); font-size:14px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.4); transition:opacity .3s; }
.mr-bm-toast.is-out{ opacity:0; }
@media (prefers-reduced-motion:reduce){ .mr-bm-toast{ transition:none !important; } }

/* ---------------------------------------------------------------------------
   SINGLE POST (blog + studio alerts) — themes/midrange/single.php
   The theme had no single.php until now; posts fell through to the Go parent.
   NOTE the trap this avoids: .page-title is #fff by default and body.mr-light
   only turns .page-shell white, with no title-colour override outside cart and
   checkout — so an unstyled post rendered white-on-white. Colours are set
   explicitly here rather than relying on the light-mode cascade.
   --------------------------------------------------------------------------- */
body.single-post .page-shell.mr-post-shell{ background:#eceef0; }
body.single-post.mr-light .page-shell.mr-post-shell{ background:#eceef0; }
.mr-post-shell > .wrap{ max-width:900px; }
.mr-post-head{ border-bottom:1px solid #d9dade; }
.mr-post-eyebrow{
  font-family:var(--font); font-size:11px; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--red); margin:0 0 14px;
}
body.single-post .mr-post-head .page-title{ color:#0c0c0c; font-size:clamp(32px,5vw,58px); }
body.single-post .mr-post-head .page-title .pd{ color:var(--red); }
.mr-post-meta{
  font-family:var(--font); font-size:13px; font-weight:600; color:#6c6d74;
  margin:18px 0 0; letter-spacing:.02em;
}
.mr-post-hero{ margin:clamp(26px,4vw,42px) 0 0; }
.mr-post-hero img{ width:100%; height:auto; display:block; border-radius:16px; }
body.single-post .entry-content.mr-post-body{
  /* .page-head already contributes its own margin-bottom below the rule, so keep this small
     or the header and body drift ~100px apart. */
  color:#2a2a2e; max-width:68ch; margin-inline:0; padding-top:6px;
}
body.single-post .entry-content.mr-post-body h2,
body.single-post .entry-content.mr-post-body h3{
  font-family:var(--disp); font-weight:700; text-transform:uppercase; color:#0c0c0c;
  letter-spacing:-.01em; line-height:1.1; margin:1.8em 0 .6em;
}
body.single-post .entry-content.mr-post-body h2{ font-size:clamp(22px,2.6vw,30px); }
body.single-post .entry-content.mr-post-body h3{ font-size:clamp(18px,2vw,23px); }
body.single-post .entry-content.mr-post-body a{ color:#0c0c0c; border-bottom:1px solid rgba(209,0,0,.45); }
body.single-post .entry-content.mr-post-body a:hover{ color:var(--red); }
body.single-post .entry-content.mr-post-body strong{ color:#0c0c0c; }
body.single-post .entry-content.mr-post-body img{ max-width:100%; height:auto; border-radius:12px; }
body.single-post .entry-content.mr-post-body blockquote{
  margin:1.6em 0; padding:2px 0 2px 20px; border-left:3px solid var(--red); color:#44454b;
}
/* The Go parent theme puts em-based margins on <p> inside .entry-content — measured here as
   margin-left 78.5px and margin-top 65.5px. That indented every paragraph away from the flush
   h2/title and opened a ~170px hole under the header. Reset to a normal article rhythm. */
body.single-post .entry-content.mr-post-body p{ margin:0 0 1.15em; max-width:none; }
body.single-post .entry-content.mr-post-body > *:first-child{ margin-top:0; }
body.single-post .entry-content.mr-post-body ul,
body.single-post .entry-content.mr-post-body ol{ margin:0 0 1.15em; padding-left:1.3em; }
body.single-post .entry-content.mr-post-body li{ margin:0 0 .4em; }
.mr-post-back{ margin:clamp(34px,5vw,56px) 0 0; padding-top:24px; border-top:1px solid #d9dade; }
.mr-post-back a{
  font-family:var(--font); font-size:12.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--red);
}
.mr-post-back a:hover{ color:var(--red-hi); }
/* the alerts back-button injected into the_content by midrange-site-core.php */
body.single-post .alert-back-btn{
  display:inline-block; margin-top:26px; font-family:var(--font); font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--red);
}

/* ── ENGINEER FEATURED LINKS ("Hear them on") ─────────────────────────────────
   Web half of the app's app/profile.jsx card (markup: midrange-engineer-links.php).
   Token values are lifted from the app's StyleSheet so the two surfaces match:
   card #121212 / border #2a2a2a / radius 10, heading #d10000 uppercase, helper red
   italic 11px, row #181818, dragging row #201313 + red border + lift.            */
.mr-el{ background:#121212; border:1px solid #2a2a2a; border-radius:10px; padding:25px; margin:0 0 20px; }
.mr-el-head{ margin:0 0 20px; font-family:var(--font); font-size:16px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; color:#d10000; }
.mr-el-help{ margin:-12px 0 20px; font-family:var(--font); font-size:11px; font-style:italic;
  line-height:16px; color:#d10000; }

.mr-el-list{ display:flex; flex-direction:column; gap:12px; }
.mr-el-row{ display:flex; align-items:center; gap:2px; background:#181818; border:1px solid #2a2a2a;
  border-radius:12px; padding:0 8px; min-height:52px; will-change:transform; }
/* While a drag is in flight the fields go inert so the pointer can't land in one. */
.mr-el-list.is-reordering .mr-el-input{ pointer-events:none; }
.mr-el-row.is-dragging{ border-color:#d10000; background:#201313; z-index:20; position:relative;
  box-shadow:0 8px 12px rgba(0,0,0,.5); }

.mr-el-grip{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; background:transparent; border:0; border-radius:8px;
  color:#5c5c5c; cursor:grab; touch-action:none; transition:color .15s ease; }
.mr-el-grip svg rect{ fill:currentColor; }
.mr-el-grip:hover{ color:#8a8a8a; }
.mr-el-row.is-dragging .mr-el-grip{ color:#d10000; cursor:grabbing; }
.mr-el-grip:focus-visible{ outline:2px solid #d10000; outline-offset:2px; }

/* The Go parent styles every input[type=url] with a WHITE background, a 2px navy border and
   16.8px text, and its attribute selector out-specifies a bare class — so the field rendered
   as a white box inside the dark card. Beaten with the same specificity the account form's
   own overrides already use (see the EditAccountForm block above). */
.mr-el-input{ flex:1 1 auto; min-width:0; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm .mr-el-input,
.mr-el .mr-el-input{
  background:transparent; border:0; border-radius:0; box-shadow:none; height:auto;
  /* Go also puts a 32px bottom margin on inputs, which inflated the row to 70px. */
  margin:0; color:#ffffff; font-family:var(--font); font-size:14px; line-height:1.45; padding:8px; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm .mr-el-input:focus,
.mr-el .mr-el-input:focus{ background:transparent; border:0; box-shadow:none; outline:none; }
body.woocommerce-account.logged-in form.woocommerce-EditAccountForm .mr-el-input::placeholder,
.mr-el .mr-el-input::placeholder{ color:#5c5c5c; }
.mr-el-row:focus-within{ border-color:#3a3a3f; }

.mr-el-rm{ flex:0 0 auto; width:30px; height:30px; padding:0; background:transparent; border:0;
  color:#8a8a8a; font-size:20px; line-height:1; cursor:pointer; border-radius:8px;
  transition:color .15s ease, background .15s ease; }
.mr-el-rm:hover{ color:#fff; background:rgba(255,255,255,.06); }

.mr-el-empty{ margin:0; padding:14px 0; text-align:center; font-family:var(--font); font-size:11px;
  font-style:italic; line-height:16px; color:#d10000; }
.mr-el-empty[hidden]{ display:none; }

.mr-el-add{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  margin-top:12px; padding:12px; background:#141414; border:1px solid #2c2c2e; border-radius:6px;
  color:#d10000; font-family:var(--font); font-size:14px; font-weight:700; letter-spacing:.5px;
  cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.mr-el-add:hover{ background:#1a1a1a; border-color:#3a3a3f; }
.mr-el-add-ico{ font-size:18px; line-height:1; }

.mr-el .mr-el-save{ margin-top:15px; text-transform:uppercase; letter-spacing:1px; }

.mr-el-status{ margin:12px 0 0; font-family:var(--font); font-size:12.5px; line-height:1.5;
  text-align:center; color:#a6a6ac; }
.mr-el-status:empty{ display:none; }
.mr-el-status.is-ok{ color:#5ac37d; }
.mr-el-status.is-err{ color:#ff8b8b; }

@media (prefers-reduced-motion: reduce){
  .mr-el-grip, .mr-el-rm, .mr-el-add{ transition:none; }
}