/* Fidelity overlays + small bridges between design.css and site.css */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:120;backdrop-filter:blur(2px)}
.modal-backdrop[hidden]{display:none!important}
.modal-panel{position:fixed;z-index:130;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94vw);max-height:90vh;overflow:auto;background:var(--card,#12151C);border:1px solid var(--line-strong,#1E2330);border-radius:18px;padding:28px 24px 24px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal-panel[hidden]{display:none!important}
.modal-close{position:absolute;top:10px;right:12px;background:transparent;border:0;color:var(--dim);font-size:28px;line-height:1;cursor:pointer}
.qz-k,.wel-k{letter-spacing:.16em;text-transform:uppercase;font-size:11px;color:var(--cura,#4FC3F7)}
.qz-title{font-size:1.55rem;margin:10px 0 16px;font-weight:500}
.qz-opts{display:flex;flex-direction:column;gap:8px}
.qz-opt{text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ink);cursor:pointer}
.qz-opt:hover,.qz-opt.onq{border-color:rgba(79,195,247,.5);background:rgba(79,195,247,.08)}
.qz-opt b{display:block}
.qz-opt span{color:var(--dim);font-size:13px}
.qz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px}
.qz-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}
.qz-chips span{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--dim)}
.qz-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.qz-duo{grid-template-columns:1fr}}
.qz-rescard{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(0,0,0,.2)}
.qz-rescard .qi img{max-width:100%;height:auto}
.qz-rescard .qtag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,var(--cura))}
.qz-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.qz-progress{display:flex;gap:4px;margin-bottom:12px}
.qz-progress i{flex:1;height:3px;background:rgba(255,255,255,.1);border-radius:99px}
.qz-progress i.on{background:var(--cura)}
.nav-quiz{background:transparent;border:0;color:var(--cura);font:inherit;font-weight:600;font-size:14px;cursor:pointer;padding:8px 12px}
.footer .newsletter{display:flex;gap:8px}
.footer .newsletter input{flex:1;background:var(--dark,#0A0C11);border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;color:var(--ink)}
/* Keep our sticky nav readable when design.css also defines .nav */
body > .nav{position:sticky;top:0;z-index:90}
.serif{font-style:italic;font-family:Georgia,"Instrument Serif",serif}
.page.wrap,.wrap.page{max-width:var(--max,1240px);margin:0 auto;padding-left:20px;padding-right:20px}
button.nav-quiz{display:inline-block}
#quiz:not([hidden]),#welcome:not([hidden]){display:block}

/* ---- Reveal: visible without JS (Jeff iPhone blank-home fix) ---- */
.reveal{
  opacity:1 !important;
  transform:none !important;
}
.reveal.is-pending{
  opacity:0 !important;
  transform:translateY(18px) !important;
  transition:opacity .65s cubic-bezier(.2,.6,.2,1), transform .65s cubic-bezier(.2,.6,.2,1);
}
.reveal.is-pending.in,
.reveal.in{
  opacity:1 !important;
  transform:none !important;
}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-pending{opacity:1 !important;transform:none !important;transition:none !important}
}


/* ---- Orig drop-panel: keep design.css chrome; bridge gap + is-open ---------- */
.nav-links .has-drop > .drop-panel{
  top: 100%;
  /* 12px invisible hover bridge + 10px inner padding above first item */
  padding-top: 22px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.nav-links .has-drop > .drop-panel::before{
  content: "";
  display: block;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--sh);
  position: absolute;
  /* stay at 12px so the panel chrome does not drop; extra padding is inside */
  inset: 12px 0 0 0;
  z-index: -1;
}
.nav-links .has-drop.is-open > .drop-panel,
.nav-links .has-drop:hover > .drop-panel,
.nav-links .has-drop:focus-within > .drop-panel{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (max-width:880px){
  /* Mobile accordion: give submenu the same breathing room as sibling items.
     padding-top:0 left BPC-157 jammed under Shop's divider. */
  .nav-links .has-drop > .drop-panel{
    padding-top: 8px;
    padding-bottom: 6px;
  }
  .nav-links .has-drop > .drop-panel::before{display:none}
  .nav-links .has-drop > .drop-panel a{
    padding: 16px 4px;
  }
  .nav-links .has-drop > .drop-panel a:first-child{
    padding-top: 16px;
    margin-top: 4px;
  }
}
.cart-btn b:not([hidden]){display:flex;align-items:center;justify-content:center}

/* Hero still under optional desktop video (mobile never loads mp4) */
.hero-media #hero-still{
  position:absolute;inset:0;width:100%;height:100%;display:block;margin:0;padding:0;
}
.hero-media #hero-still img,
.hero-media #herofallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  margin:0;padding:0;border:0;
}
.hero-media #herovideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media #herovideo[hidden]{display:none!important}
/* Match video duotone on the still so mobile hero doesn't look like a different layer */
.hero-media #hero-still img,
.hero-media #herofallback{
  filter:grayscale(1) sepia(1) saturate(3) hue-rotate(160deg) brightness(.95) contrast(1.05);
}
/* Nav is sticky (in-flow) via fidelity.css, so do NOT keep design.css's ~122px top margin
   or a molecule strip from body::before shows between nav and hero. Sit flush. */
.hero{margin:16px 16px 0}
@media (max-width:880px){
  .hero{margin-top:12px}
}
@media (max-width:560px){
  .hero{margin:10px 10px 0;border-radius:22px}
}

/* ---- PDP mobile: single column (orig max-width:920px) ---- */
@media (max-width:920px){
  .pdp-grid{
    grid-template-columns:1fr !important;
    gap:40px;
  }
  .pdp-visual{
    position:relative !important;
    top:0 !important;
    width:100%;
  }
  .pdp-gallery{
    width:100%;
    min-height:0;
    padding:18px;
    box-sizing:border-box;
  }
  .pdp-gallery img,
  .pdp-visual .spin-stage,
  .pdp-visual .scene{
    width:100% !important;
    max-width:100%;
    min-height:0 !important;
    aspect-ratio:1;
    height:auto;
  }
  .pdp-visual .spin-stage img.fr,
  .pdp-gallery img{
    max-height:none;
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .pdp-copy{width:100%;min-width:0}
  .specs{width:100%;max-width:100%;box-sizing:border-box}
  .buy,.buy-row{max-width:100%}
}
@media (max-width:560px){
  .specs{grid-template-columns:1fr 1fr !important}
}

/* Collapsed promo: low-key text link, expands on click */
.promo-toggle{
  display:inline-block;background:none;border:0;padding:0;margin:0;
  font:inherit;font-size:.86rem;color:var(--dim);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.promo-toggle:hover{color:var(--cura, #4FC3F7)}
.promo-wrap .promo-fields[hidden]{display:none!important}
.cd-promo{margin:0 0 10px}
.cd-promo .cd-disc{margin-top:8px}

/* ==== MOBILE SHOPPER POLISH (phones only; desktop 1280 unchanged) ====
   Executive choices for <=880px:
   - One gutter (16px) everywhere (.page / .wrap / foot).
   - Stack any remaining 2-column shopper layouts (cart, checkout).
   - Primary CTAs + form fields go full width for thumb reach.
   - Hero keeps left-aligned copy (matches orig), but CTAs stack full width.
   - Empty/centered blocks stay centered; body copy stays left.
   - Bigger tap targets (>=44px) on nav, qty, drawer close, sticky buy.
   - Sticky buy gets page bottom padding so it does not cover footer CTAs.
   ================================================================ */

@media (max-width:880px){

  /* --- Consistent side gutter --- */
  :root{ --mobile-gutter: 16px; }
  .page,
  .wrap,
  .page.wrap,
  .wrap.page{
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }
  .foot,
  .foot-legal{
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  /* --- Stack cart / checkout (site.css had no mobile rule) --- */
  .cart-layout,
  .checkout-layout{
    grid-template-columns: 1fr !important;
    gap: 22px;
  }
  .summary{
    position: static !important;
    top: auto !important;
  }

  /* --- Full-width primary CTAs + forms --- */
  .hero .hero-ctas{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }
  .hero .hero-ctas .btn{
    width: 100%;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .empty .btn,
  .cd-empty .btn,
  .orders-empty .btn,
  .form .btn,
  .auth-card .btn,
  .auth-solo .btn,
  .buy .btn:not(.line),
  .buy-row .btn,
  .summary > p .btn,
  .summary a.btn,
  #payBtn,
  .contact-grid .btn,
  .newsletter .btn{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  .form,
  .auth-card,
  .auth-solo,
  .panel{
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
  }
  .field input,
  .field textarea,
  .field select,
  .newsletter input,
  .promo-fields input,
  .summary input[name="code"]{
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
  }
  .newsletter{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* --- Auth / account cards: less padding, full bleed in gutter --- */
  .auth-card{
    padding: 28px 18px !important;
  }
  .inner-hero{
    padding-top: 28px !important;
    padding-bottom: 18px !important;
  }
  /* design.css uses large fixed top padding for fixed-nav pages; tighten on phone */
  .inner-hero{ padding-top: 24px !important; }

  /* --- PDP buy row: qty stays, add-to-cart stretches --- */
  .buy,
  .buy-row{
    width: 100%;
  }
  .buy-row{
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .buy-row .btn{
    flex: 1;
  }
  .qty button{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
  }
  .qty span{
    min-width: 36px;
    font-size: 1rem;
  }

  /* --- Sticky buy: usable taps + room above footer --- */
  .stickybuy .btn{
    min-height: 44px;
    padding: 12px 18px;
  }
  .stickybuy .sb-in{
    gap: 10px;
    padding: 0 2px;
  }
  body:has(#stickyBuy:not([hidden])) .pdp,
  body:has(#stickyBuy:not([hidden])) .foot{
    padding-bottom: 88px;
  }
  /* fallback if :has unsupported - always leave a little room on PDPs */
  .pdp{ padding-bottom: 96px; }

  /* --- Header / drawer / promo tap targets --- */
  .nav-toggle,
  .acct-btn,
  .cart-btn{
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .cd-close,
  .qz-close{
    min-height: 44px;
    padding: 10px 12px !important;
    font-size: .85rem !important;
  }
  .promo-toggle{
    min-height: 44px;
    padding: 10px 0 !important;
    font-size: .92rem !important;
  }
  .announce{
    min-height: 32px;
  }
  .announce .an-msg button{
    min-height: 32px;
    padding: 6px 4px;
  }

  /* --- Trust chips / badges: wrap cleanly, no overflow --- */
  .trust-chips{
    gap: 8px;
  }
  .trust-chips span{
    font-size: .72rem;
  }

  /* --- Section rhythm: tighten huge empty padding on phones --- */
  .section{ padding-top: 48px; padding-bottom: 48px; }
  .empty{ padding: 36px 8px !important; }
  .hero-inner{
    padding-top: 48px !important;
    padding-bottom: 36px !important;
  }

  /* --- Tetra / science spot: stack CTAs full width --- */
  .tetra-spot .ts-acts,
  .sci-t .ts-acts,
  .hero-ctas{
    width: 100%;
  }
  .tetra-spot .ts-acts{ flex-direction: column; align-items: stretch; }
  .tetra-spot .ts-acts .btn{ width: 100%; text-align: center; box-sizing: border-box; }

  /* --- Contact grid already 1fr at 840; ensure fields full width --- */
  .contact-grid .form{ max-width: 100%; }

  /* --- Order / account rows --- */
  .order-top{
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
  }

  /* --- Small buttons still need 44px height on phones --- */
  .btn.small,
  button.btn.small,
  a.btn.small,
  .stickybuy .btn,
  .stickybuy .btn.small{
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
    box-sizing: border-box;
  }
  /* Cart drawer close: taller hit area (was ~29px) */
  #cdClose.cd-close,
  .cd-close{
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Footer columns: stack cleanly */
  .footer-grid,
  .foot-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 20px;
  }
  /* Mobile menu links: taller taps */
  .nav-links a,
  .nav-links button.nav-quiz{
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* --- Prevent accidental horizontal scroll from wide children --- */
  img, video, svg, table, .spin-stage, .card-stage, .lineup img{
    max-width: 100%;
  }
  .lineup{ overflow: hidden; }
}

@media (max-width:560px){
  /* Shop grid: 1 col feels better for spinning cards on narrow phones */
  .grid-products{ grid-template-columns: 1fr !important; gap: 16px; }
  .rest-row{ grid-template-columns: 1fr 1fr !important; }
  .stats{ gap: 10px; }
  .auth-card{ padding: 24px 16px !important; }
  .footer-grid,
  .foot-grid{ grid-template-columns: 1fr !important; }
}


/* ==== CART EMPTY / FILLED SPACING (phones only) ====
   Clint: empty-state copy was crammed (global *{margin:0}); give the two
   lines ~8px, line-height 1.5, and ~22px above the Shop CTA. Trim the big
   dead air under the header (~28px) and before the footer (~40px). Match
   the same rhythm on a filled cart and the drawer empty state.
   ================================================================ */
@media (max-width:880px){

  /* Cart page only (hero immediately followed by empty or filled cart section) */
  .section:has(> .wrap > .empty),
  .section:has(> .wrap > .cart-layout){
    padding-top: 8px !important;
    padding-bottom: 40px !important;
  }
  .inner-hero:has(+ .section > .wrap > .empty),
  .inner-hero:has(+ .section > .wrap > .cart-layout){
    padding-top: 28px !important;   /* ~24-32px under sticky nav */
    padding-bottom: 20px !important; /* clear gap under "Your cart" */
  }

  /* Empty cart page: internal breathing room (outer puff was the problem) */
  .section .empty{
    padding: 4px 0 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }
  .section .empty > b{
    display: block;
    margin: 0 0 8px;
    line-height: 1.5;
    font-family: var(--fd, Georgia, serif);
    font-weight: 650;
    font-size: 1.15rem;
    color: var(--ink);
  }
  .section .empty > p{
    margin: 0;
    line-height: 1.5;
    color: var(--dim);
  }
  /* Button wrapper paragraph - ~20-24px above the CTA */
  .section .empty > p:has(.btn),
  .section .empty > p:last-child{
    margin-top: 22px;
  }
  .section .empty .btn{
    margin-top: 0;
  }

  /* Filled cart: same top/bottom rhythm, comfortable item gaps */
  .section .cart-layout{
    margin-top: 0;
    gap: 24px;
  }
  .section .cart-item{
    padding-top: 18px;
    padding-bottom: 18px;
  }

  /* Cart drawer empty - same copy/CTA spacing as the page */
  .cd-empty{
    gap: 0 !important;
    padding: 28px 12px 32px !important;
  }
  .cd-empty .ce-strip{
    margin: 0 0 16px;
  }
  .cd-empty > b{
    display: block;
    margin: 0 0 8px;
    line-height: 1.5;
  }
  .cd-empty > p{
    margin: 0;
    line-height: 1.5;
  }
  .cd-empty > a.btn,
  .cd-empty > .btn{
    margin-top: 22px;
  }
}

/* ---------- Reviews (product pages + /reviews.html), added 2026-10-07 ----------
   Cards, stars and form fields reuse the original design rules in design.css
   (.rev-grid, .rev-card, .rev-star-line, .rev-prod, .stars, .field2, .rsel,
   .rtxt). Only the small extras the database version needs are here. */
#reviews{scroll-margin-top:120px}
.pdp-reviews{margin-top:56px}
.pdp-reviews .rev-grid{margin-top:18px}
/* "4.5 out of 5 - 2 reviews" line under the product page heading */
.pdp-rev-sum{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;color:var(--dim);font-size:.9rem}
/* Half star in the average line: an empty star with a filled star laid over
   its left half. calc(50% - 1px) because .rev-star-line adds 2px letter-spacing
   after each star. */
.rev-half{position:relative;display:inline-block}
.rev-half::before{content:"\2605";position:absolute;left:0;top:0;width:calc(50% - 1px);overflow:hidden;white-space:nowrap}
/* Optional review title, above the text */
.rev-title{font-weight:600;color:var(--ink)}
/* Small "Verified buyer" tag, same pill shape as .rev-prod */
.rev-verified{font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#9edbb8;border:1px solid rgba(125,206,160,.35);border-radius:999px;padding:4px 10px}
.rev-prod a{color:inherit}
/* Star picker: real radio buttons inside labels, styled like the design's
   .stars button (grey stars, gold when on). Higher specificity than
   .field2 label so the label text style does not apply to the stars. */
.field2 .stars label{display:inline-block;margin:0;padding:2px;font-family:inherit;font-size:1.35rem;letter-spacing:0;text-transform:none;line-height:1;color:#46536B;cursor:pointer;position:relative;transition:color .15s,transform .15s}
.field2 .stars label.onstar{color:#F4B63F}
.field2 .stars label:hover{transform:scale(1.15)}
.field2 .stars label:focus-within{outline:2px solid var(--cura-deep);outline-offset:2px;border-radius:4px}
.stars input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.review-form{display:flex;flex-direction:column;gap:14px}
.review-form .form-msg.err{margin-top:6px}
/* Honeypot field: off screen for people, still in the form for bots */
.hp-field{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden}
@media (max-width:880px){
  /* Phones/tablets: on product pages show the reviews first, then the form */
  .pdp-reviews .rev-list{order:-1}
}
@media (max-width:560px){
  /* 16px inputs so iPhone Safari does not zoom in when a field is tapped */
  .review-form input,.review-form textarea,.review-form select{font-size:16px}
}

/* ---------- Cart quantity stepper + drawer row spacing (2026-10-07) ----------
   Drawer rows use the design's .ci-* classes (design.css); these rules give the
   minus / number / plus control real tap targets and a gap around the number,
   same pill shape as the product-page quantity (.qty). Used in the slide-out
   cart drawer (.ci-qty) and on /cart.html (.cart-qty). */
.cd-item .ci-body{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.cd-item .ci-name{line-height:1.2}
.cd-item .ci-meta{line-height:1.4}
.cd-item .ci-qty,
.cart-qty{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:2px;border:1px solid var(--line-strong);border-radius:999px;width:max-content}
.cd-item .ci-qty button,
.cart-qty button{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:1.05rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.cd-item .ci-qty button:hover,
.cart-qty button:hover{background:rgba(236,239,243,.08)}
.cd-item .ci-qty .ci-qv{min-width:28px;text-align:center;font-family:var(--fm);font-size:.85rem;font-variant-numeric:tabular-nums}
.cart-qty input{width:40px;min-height:0 !important;height:34px;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.95rem;text-align:center;-moz-appearance:textfield;appearance:textfield}
.cart-qty input::-webkit-outer-spin-button,
.cart-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cart-qty input:focus{outline:none}
.cart-qty:focus-within{border-color:var(--cura)}
.cd-item .ci-rm{background:transparent;border:0;padding:4px 0;cursor:pointer}
@media (max-width:560px){
  .cd-item .ci-qty button,
  .cart-qty button{width:36px;height:36px}
  .cart-qty input{height:36px;font-size:16px}
}


/* ---------- admin88 "View as customer" bar (2026-10-07) ----------
   Sits inside the sticky header (includes/header.php) so it stays visible.
   Gold like the site's accent buttons so it is clearly not part of the design. */
.viewas-bar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:8px 16px;background:#C9A227;color:#141821;font-size:.85rem;line-height:1.3;text-align:center}
.viewas-bar b{font-weight:700}
.viewas-bar .viewas-ro{opacity:.75}
.viewas-bar form{margin:0}
.viewas-bar button{min-height:32px;padding:4px 16px;border:1px solid #141821;border-radius:999px;background:#141821;color:#ECEFF3;font:inherit;font-weight:600;cursor:pointer}
.viewas-bar button:hover{background:transparent;color:#141821}

/* ---------- Account > Settings: "Send me the newsletter" toggle (2026-10-07) ---------- */
.acct-settings-h{margin-top:40px}
.acct-settings{margin-top:14px;max-width:560px}
.acct-news-form{display:flex;flex-direction:column;gap:10px}
.acct-toggle{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:1rem;color:var(--ink)}
.acct-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.acct-switch{position:relative;flex:0 0 auto;width:46px;height:26px;border-radius:999px;background:rgba(236,239,243,.14);border:1px solid var(--line-strong);transition:background .15s}
.acct-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink);transition:transform .15s}
.acct-toggle input:checked + .acct-switch{background:var(--cura);border-color:var(--cura)}
.acct-toggle input:checked + .acct-switch::after{transform:translateX(20px);background:#0A2238}
.acct-toggle input:focus-visible + .acct-switch{outline:2px solid var(--cura);outline-offset:2px}
.acct-toggle input:disabled + .acct-switch{opacity:.55}
.acct-save-row{display:flex;align-items:center;gap:12px}
.acct-save-row .form-msg{min-height:0}