/*
Theme Name: AIRIX
Theme URI: https://airix.co.uk
Author: AIRIX
Description: Custom WooCommerce theme for AIRIX — MagSafe charging stations, magnetic power banks and screen protection. Classic PHP theme; cart and checkout use shortcodes, not blocks.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: airix
Tags: e-commerce, custom-menu, featured-images, translation-ready
WC requires at least: 8.0
WC tested up to: 11.1
*/

/* ==========================================================================
   CONTENTS
   --------------------------------------------------------------------------
   1. DESIGN SYSTEM      ported from the prototype — do not rewrite
   2. WORDPRESS CORE     classes core emits that the prototype never had
   3. ACCESSIBILITY      focus, reduced motion
   4. MOBILE NAVIGATION  an addition; the prototype has none
   ========================================================================== */


/* ==========================================================================
   1. DESIGN SYSTEM
   --------------------------------------------------------------------------
   Ported from dist/design-original.css, which bin/extract-design.php pulls
   verbatim out of the prototype. This block is THE BRIEF. Do not tidy it, do
   not reorder it, do not "improve" it.

   Two documented departures, both value-preserving and both verifiable with
   `php bin/verify-css-port.php`:

   1. The Google Fonts @import is dropped. CLAUDE.md requires self-hosted
      fonts — performance and UK GDPR. Faces are declared in inc/enqueue.php.

   2. Twelve dark-surface colours that the prototype wrote as raw hex are now
      named tokens (DECISIONS.md #12). The pixels are identical; the verifier
      substitutes them back and diffs against the original to prove it.
   ========================================================================== */

:root{
  --bg:#FAFBFD;
  --surface:#FFFFFF;
  --ink:#0B0F1A;
  --ink-dim:#454E66;
  --line:#D6DCE8;
  --blue:#1B2A78;
  --blue-2:#3049C9;
  --blue-dark:#0C1442;
  --teal:#00B8A0;
  --steel-1:#EEF1F6;
  --steel-2:#DCE2EE;
  --navy:#0B123A;

  /* Dark chrome — topbar, nav, CTA band, footer, chat. DECISIONS.md #12. */
  --navy-topbar:#0E1550;
  --navy-ink:#AEB6E8;
  --navy-ink-2:#B7C0EA;
  --navy-ink-3:#C7CEE8;
  --navy-ink-dim:#9AA5BC;
  --navy-ink-faint:#5E6C8A;
  --navy-line:#2A3670;
  --navy-line-2:#1C2660;
  --navy-line-3:#1C2740;
  --navy-hover:#141D52;
  --navy-glow:#22337E;
  --navy-veil:#ffffff22;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:'Inter', sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Space Grotesk', sans-serif; letter-spacing:-0.015em; color:var(--ink);}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
img{max-width:100%; display:block;}

.img-slot{
  border-radius:16px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--steel-1) 0%, var(--steel-2) 100%);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;
  color:#8992A3; font-family:'IBM Plex Mono', monospace; font-size:11px; text-align:center; padding:14px;
}
.img-slot::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(90deg, #D8DEEC 1px, transparent 1px), linear-gradient(#D8DEEC 1px, transparent 1px);
  background-size:22px 22px; opacity:.4;
}
.img-slot span{position:relative; z-index:1;}

.photo{
  border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 50px -30px #0B0F1A33;
}
.photo img{width:100%; height:100%; object-fit:contain;}
.photo.no-frame{border:none; box-shadow:none; background:transparent;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:12px; font-weight:600; font-size:14.5px; transition:transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:linear-gradient(135deg, var(--blue-2), var(--blue-dark)); color:#fff; box-shadow:0 10px 24px -10px #1B2A7866;}
.btn-outline{background:#fff; color:var(--ink); border:1.5px solid var(--line);}
.btn-outline:hover{border-color:var(--blue);}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px; font-size:13px; border-radius:10px;}

header{position:sticky; top:0; z-index:100;}
.topbar{background:var(--navy-topbar); color:var(--navy-ink); font-family:'IBM Plex Mono', monospace; font-size:11.5px; text-align:center; padding:8px; letter-spacing:.04em; border-bottom:1px solid var(--navy-line);}
.nav-wrap{background:var(--navy); border-bottom:1px solid var(--navy-line-2);}
.nav .logo{color:#fff;}
.nav .logo .dot{background:var(--blue-2); box-shadow:0 0 10px 3px #3049C988;}
.nav .navlinks{color:var(--navy-ink);}
.nav .navlinks a:hover{color:#fff;}
.nav .icon-btn{color:var(--navy-ink-3);}
.nav .icon-btn:hover{background:var(--navy-hover); color:#fff;}
.nav .cart-count{background:var(--blue-2);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:1200px; margin:0 auto;}
.logo{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:20px; display:flex; align-items:center; gap:9px;}
.logo .dot{width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 10px 2px #1B2A7866;}
.navlinks{display:flex; gap:32px; font-size:14px; color:var(--ink-dim); font-weight:500;}
.navlinks a:hover{color:var(--blue);}
.navicons{display:flex; align-items:center; gap:14px; position:relative;}
.icon-btn{font-size:13.5px; color:var(--ink-dim); display:flex; align-items:center; gap:6px; cursor:pointer; padding:8px 12px; border-radius:10px;}
.icon-btn:hover{background:var(--steel-1); color:var(--ink);}
.cart-count{background:var(--blue); color:#fff; font-size:10.5px; font-weight:700; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center;}
.cart-panel{
  position:absolute; top:52px; right:0; width:280px; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:0 20px 48px -16px #0B0F1A33; padding:18px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .15s ease; z-index:150;
}
.cart-panel.open{opacity:1; visibility:visible; transform:translateY(0);}
.cart-panel h4{font-size:14px; margin-bottom:12px;}
.cart-empty{font-size:13px; color:var(--ink-dim); text-align:center; padding:16px 0;}
.cart-line{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-dim); padding:8px 0; border-bottom:1px solid var(--line);}
.cart-line:last-of-type{border-bottom:none;}
.cart-panel-actions{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.cart-panel-actions .btn{width:100%; padding:11px 16px; font-size:13.5px;}
.cart-panel-link{background:none; border:1.5px solid var(--line); color:var(--ink); border-radius:12px; padding:10px 16px; font-size:13.5px; font-weight:600; cursor:pointer; width:100%; text-align:center;}
.cart-panel-link:hover{border-color:var(--blue); color:var(--blue);}

/* Full-page overlays: basket / checkout / confirmation */
.page-overlay{position:fixed; inset:0; background:var(--bg); z-index:500; overflow-y:auto; display:none;}
.page-overlay.open{display:block;}
.overlay-topbar{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:5;}
.overlay-back{cursor:pointer; font-size:14px; color:var(--ink-dim); display:flex; align-items:center; gap:6px; font-weight:600; background:none; border:none; font-family:inherit;}
.overlay-back:hover{color:var(--blue);}
.overlay-inner{max-width:1080px; margin:0 auto; padding:48px 32px 100px;}
.overlay-inner h1{font-size:30px; font-weight:700; margin-bottom:32px;}

.basket-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:48px; align-items:start;}
.basket-rows{display:flex; flex-direction:column; gap:0;}
.basket-row{display:grid; grid-template-columns:84px 1fr auto auto; gap:18px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line);}
.basket-row .photo{width:84px; height:84px; border-radius:12px;}
.basket-row .photo img{padding:8px;}
.basket-row h4{font-size:15px; margin-bottom:4px;}
.basket-row .sub{font-size:12.5px; color:var(--ink-dim);}
.basket-row .line-price{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; text-align:right; min-width:70px;}
.basket-row .remove-btn{background:none; border:none; color:var(--ink-dim); cursor:pointer; font-size:12.5px; text-decoration:underline; padding:0; margin-top:6px;}
.basket-row .remove-btn:hover{color:#C0392B;}
.basket-empty{padding:60px 0; text-align:center; color:var(--ink-dim);}
.basket-empty .btn{margin-top:18px;}

.summary-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; position:sticky; top:90px;}
.summary-card h4{font-size:15px; margin-bottom:16px;}
.summary-row{display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-dim); padding:7px 0;}
.summary-row.total{color:var(--ink); font-weight:700; font-size:16px; border-top:1px solid var(--line); margin-top:8px; padding-top:14px;}
.summary-card .btn{width:100%; margin-top:18px;}
.summary-note{font-size:11.5px; color:var(--ink-dim); margin-top:12px; line-height:1.5;}

.checkout-layout{display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start;}
.checkout-section{margin-bottom:32px;}
.checkout-section h3{font-size:16px; margin-bottom:14px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-grid .full{grid-column:1/-1;}
.form-field label{display:block; font-size:12.5px; color:var(--ink-dim); margin-bottom:6px;}
.form-field input, .form-field select{width:100%; border:1.5px solid var(--line); border-radius:10px; padding:11px 13px; font-size:14px; font-family:inherit; background:#fff; color:var(--ink);}
.form-field input:focus, .form-field select:focus{outline:none; border-color:var(--blue);}
.form-field.invalid input, .form-field.invalid select{border-color:#C0392B;}
.field-error{color:#C0392B; font-size:11.5px; margin-top:6px; min-height:0;}
.checkout-demo-note{background:#E4E9FA; color:var(--blue); font-size:12.5px; padding:12px 16px; border-radius:10px; margin-bottom:28px; line-height:1.5;}
.mini-line{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-dim); padding:8px 0; border-bottom:1px solid var(--line);}
.mini-line:last-of-type{border-bottom:none;}

.confirm-wrap{max-width:520px; margin:80px auto; text-align:center;}
.confirm-check{width:64px; height:64px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 24px;}
.confirm-wrap h1{font-size:26px; margin-bottom:12px;}
.confirm-wrap p{color:var(--ink-dim); font-size:14.5px; margin-bottom:8px;}
.confirm-order-id{font-family:'IBM Plex Mono',monospace; font-size:13px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 16px; display:inline-block; margin:16px 0 28px;}

@media (max-width:760px){
  .basket-layout, .checkout-layout{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .summary-card{position:static;}
}

.hero{background:radial-gradient(circle at 80% 15%, #E7ECFB 0%, var(--bg) 55%); padding:72px 0 0; position:relative; overflow:hidden;}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.7; pointer-events:none;
  background-image:linear-gradient(#E4E8F0 1px, transparent 1px), linear-gradient(90deg, #E4E8F0 1px, transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(circle at 75% 25%, black, transparent 65%);
}
.hero-inner{display:grid; grid-template-columns:1fr 0.95fr; gap:50px; align-items:center; position:relative; z-index:2; padding-bottom:60px;}
.badge{display:inline-flex; align-items:center; gap:8px; background:#E4E9FA; color:var(--blue); font-family:'IBM Plex Mono', monospace; font-size:12px; padding:7px 14px; border-radius:100px; margin-bottom:24px;}
.badge .ping{width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px #00B8A033;}
.hero h1{font-size:50px; font-weight:700; line-height:1.08; margin-bottom:20px;}
.hero h1 .hl{color:var(--blue);}
.hero p{font-size:17px; color:var(--ink-dim); max-width:430px; margin-bottom:32px;}
.hero-ctas{display:flex; gap:14px; margin-bottom:44px;}
.hero-badges{display:flex; gap:12px; flex-wrap:wrap;}
.hero-badges span{font-size:12.5px; color:var(--ink-dim); font-family:'IBM Plex Mono',monospace; display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:#fff; padding:8px 12px; border-radius:100px;}
.hero-badges span::before{content:"✓"; color:var(--teal); font-weight:700;}
.hero-photo .photo{aspect-ratio:1/1; border:none; box-shadow:none; background:transparent;}
.hero-photo .photo img{padding:0;}

.trust-strip{background:var(--surface); padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.trust-strip .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.trust-strip span{color:var(--ink-dim); font-size:13px; font-family:'IBM Plex Mono', monospace; display:flex; align-items:center; gap:8px;}
.trust-strip span::before{content:"✓"; color:var(--teal); font-weight:700;}

.section{padding:84px 0; border-top:1px solid var(--line);}
.section.band-alt{background:var(--surface);}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:14px;}
.sec-head h2{font-size:30px; font-weight:700;}
.sec-head p{color:var(--ink-dim); font-size:14.5px; max-width:360px;}

.prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.prod-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px; transition:box-shadow .2s, transform .2s;}
.prod-card:hover{box-shadow:0 24px 48px -24px #0B0F1A22; transform:translateY(-4px);}
.prod-card .photo, .prod-card .img-slot{aspect-ratio:4/3; margin-bottom:16px;}
.prod-card .photo img{padding:14px;}
.prod-card .tag{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--blue); background:#E4E9FA; padding:3px 9px; border-radius:6px; margin-bottom:10px;}
.prod-card h3{font-size:16.5px; margin-bottom:14px;}
.color-swatches{display:flex; gap:8px;}
.color-swatches .sw{width:24px; height:24px; border-radius:7px; border:1.5px solid var(--line); cursor:pointer; position:relative;}
.color-swatches .sw.active{outline:2px solid var(--blue); outline-offset:2px;}
.color-swatches .sw.black{background:#15171D;}
.color-swatches .sw.white{background:#F1EFE9;}
.color-swatches .sw.grey{background:#9AA0AC;}
.color-swatches .sw[data-pending="1"]::after{content:"?"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; font-family:'IBM Plex Mono',monospace;}
.prod-bottom{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.prod-left{display:flex; flex-direction:column; gap:10px;}
.add-basket-btn{
  flex-shrink:0; background:linear-gradient(135deg, var(--blue-2), var(--blue-dark)); color:#fff; border:none;
  font-weight:600; font-size:14px; padding:16px 22px; border-radius:12px; cursor:pointer;
  box-shadow:0 10px 22px -10px #1B2A7866; transition:transform .15s ease;
}
.add-basket-btn:hover{transform:translateY(-1px);}
.prod-price{font-family:'IBM Plex Mono', monospace; font-size:16px; color:var(--ink); font-weight:700;}
.prod-arrow{width:32px; height:32px; border-radius:50%; background:var(--steel-1); display:flex; align-items:center; justify-content:center; font-size:14px;}
.prod-card:hover .prod-arrow{background:var(--blue); color:#fff;}

.cta-insert{
  background:radial-gradient(circle at 80% 20%, var(--navy-glow) 0%, var(--blue-dark) 65%);
  border-radius:28px; padding:60px 56px; position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:center; border:1px solid var(--navy-line-2);
}
.cta-insert h2{font-size:28px; margin-bottom:12px; color:#fff;}
.cta-insert p{color:var(--navy-ink-2); font-size:14.5px; margin-bottom:24px; max-width:420px;}
.cta-insert .photo{aspect-ratio:1/1; border:none; box-shadow:none; background:transparent;}
.cta-insert .photo img{padding:0;}

.product-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.gallery-main{aspect-ratio:1/1; margin-bottom:12px;}
.gallery-main img{padding:30px;}
.gallery-thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:10px;}
.gallery-thumbs .img-slot{aspect-ratio:1/1; font-size:9px;}
.gallery-thumbs .thumb-slot{aspect-ratio:1/1; cursor:pointer; transition:border-color .15s ease;}
.gallery-thumbs .thumb-slot:hover{border-color:var(--blue);}
.gallery-thumbs .thumb-slot img{padding:6px;}
.pdp-eyebrow{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--blue); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px;}
.product-title{font-size:30px; font-weight:700; margin-bottom:16px; line-height:1.15;}
.price-row{display:flex; align-items:baseline; gap:10px; margin-bottom:24px;}
.price-row .price{font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700;}
.color-picker{display:flex; gap:10px; margin-bottom:8px;}
.swatch{width:38px; height:38px; border-radius:10px; border:2px solid var(--line); cursor:pointer;}
.swatch.black{background:#15171D;}
.swatch.white{background:#F1EFE9; border-color:#D8D4C8;}
.swatch.active{outline:2px solid var(--blue); outline-offset:2px;}
.swatch-note{font-size:11.5px; color:var(--ink-dim); margin-bottom:24px;}
.buy-row{display:flex; gap:12px; margin-bottom:30px;}
.qty{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; padding:0 4px; font-family:'IBM Plex Mono',monospace; gap:14px;}
.qty span{width:22px; text-align:center; color:var(--ink-dim); padding:10px 0;}
.qty span:not(.qty-val){cursor:pointer; user-select:none; font-weight:600;}
.qty span:not(.qty-val):hover{color:var(--ink);}
.qty-val{color:var(--ink); font-weight:600;}
.add-cart{flex:1;}
.pdp-desc{color:var(--ink-dim); font-size:14.5px; margin-bottom:26px;}
.pay-icons{display:flex; gap:8px; margin-bottom:30px;}
.pay-chip{border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:11px; font-family:'IBM Plex Mono',monospace; color:var(--ink-dim);}
.spec-table{width:100%; border-collapse:collapse; font-family:'IBM Plex Mono',monospace; font-size:12.5px;}
.spec-table tr{border-top:1px solid var(--line);}
.spec-table td{padding:11px 0; color:var(--ink-dim);}
.spec-table td:last-child{color:var(--ink); text-align:right; font-weight:500;}

.faq-list{max-width:800px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{padding:22px 4px; font-size:16px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; color:var(--blue); font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:400;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding:0 4px 22px; color:var(--ink-dim); font-size:14.5px; max-width:640px;}

.newsletter{border-radius:24px; padding:60px 50px; text-align:center; background:linear-gradient(135deg, #EAF0FF, var(--bg)); border:1px solid var(--line);}
.newsletter h2{font-size:26px; margin-bottom:10px;}
.newsletter p{color:var(--ink-dim); font-size:14.5px; margin-bottom:26px;}
.nl-form{display:flex; gap:10px; max-width:400px; margin:0 auto;}
.nl-form input{flex:1; padding:13px 16px; border:1.5px solid var(--line); border-radius:12px; font-size:14px;}

footer{background:var(--navy); color:var(--navy-ink-dim); padding:56px 0 28px; margin-top:20px;}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:36px; padding-bottom:36px;}
.foot-logo{color:#fff;}
.foot-cols{display:flex; gap:60px; flex-wrap:wrap;}
.foot-col h4{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--navy-ink-faint); margin-bottom:14px;}
.foot-col a{display:block; font-size:14px; margin-bottom:10px; color:var(--navy-ink-dim);}
.foot-col a:hover{color:#fff;}
.foot-bottom{border-top:1px solid var(--navy-line-3); padding-top:20px; display:flex; justify-content:space-between; font-size:12.5px; color:var(--navy-ink-faint); flex-wrap:wrap; gap:10px;}

.chat-bubble{position:fixed; bottom:26px; right:26px; z-index:200; width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg, var(--blue), var(--blue-dark)); display:flex; align-items:center; justify-content:center; box-shadow:0 16px 32px -10px #2A4CFF66; cursor:pointer; transition:transform .15s;}
.chat-bubble:hover{transform:scale(1.06);}
.chat-bubble svg{width:24px; height:24px;}
.chat-panel{
  position:fixed; bottom:96px; right:26px; z-index:200; width:320px; background:#fff;
  border-radius:20px; box-shadow:0 30px 60px -20px #0B0F1A44; border:1px solid var(--line); overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.98); transition:all .18s ease;
}
.chat-panel.open{opacity:1; visibility:visible; transform:translateY(0) scale(1);}
.chat-head{background:var(--ink); color:#fff; padding:16px 18px; display:flex; align-items:center; gap:10px;}
.chat-head .dot{width:8px; height:8px; border-radius:50%; background:var(--teal);}
.chat-head strong{font-size:13.5px;}
.chat-head span{font-size:11px; color:var(--navy-ink-dim); display:block;}
.chat-close{margin-left:auto; cursor:pointer; color:var(--navy-ink-dim); font-size:14px; padding:4px 6px; border-radius:6px;}
.chat-close:hover{color:#fff; background:var(--navy-veil);}
.chat-body{padding:16px 18px; font-size:13px; color:var(--ink-dim); max-height:280px; overflow-y:auto;}
.chat-msg{background:var(--steel-1); border-radius:12px; padding:10px 12px; margin-bottom:10px; max-width:85%;}
.chat-msg-user{background:var(--blue-2); color:#fff; margin-left:auto;}
.chat-input{display:flex; border-top:1px solid var(--line); padding:10px;}
.chat-input input{flex:1; border:none; font-size:13px; padding:6px;}
.chat-input button{background:var(--blue); color:#fff; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:600;}

@media (max-width:860px){
  .hero-inner, .product-grid, .cta-insert{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
  .navlinks{display:none;}
  .chat-panel{width:88vw; right:6vw;}
}

/* ======================= END OF PORTED DESIGN SYSTEM ====================== */


/* ==========================================================================
   2. WORDPRESS CORE
   --------------------------------------------------------------------------
   Classes WordPress and the block editor emit that the prototype never had to
   deal with. Without these, a post with a right-aligned image or a caption
   renders as unstyled markup.
   ========================================================================== */

.screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute; width:1px; word-wrap:normal !important;
}

/* The skip link must become visible when focused, or it is useless. */
.skip-link:focus{
  clip-path:none; background:var(--surface); color:var(--blue); z-index:1000;
  height:auto; width:auto; margin:0; padding:14px 24px; left:16px; top:16px;
  border-radius:12px; box-shadow:0 10px 24px -10px #1B2A7866; font-weight:600;
  font-size:14px; text-decoration:none;
}

.alignleft{float:left; margin:0 1.5em 1em 0;}
.alignright{float:right; margin:0 0 1em 1.5em;}
.aligncenter{clear:both; margin-left:auto; margin-right:auto;}
.alignwide{max-width:1200px; margin-left:auto; margin-right:auto;}
.alignfull{max-width:100%; width:100%;}

.wp-caption{max-width:100%;}
.wp-caption img{margin-bottom:8px;}
.wp-caption-text,
.wp-element-caption{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  color:var(--ink-dim); text-align:center; padding:4px 0;
}

.sticky{position:relative;}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px;}
.gallery-caption{font-size:11.5px; color:var(--ink-dim);}

/* Editor-generated colour and size utilities need somewhere sane to land. */
.has-text-align-center{text-align:center;}
.has-text-align-right{text-align:right;}
.has-text-align-left{text-align:left;}

/*
 * The sticky header must clear the admin bar, which core fixes to the top for
 * logged-in users: 32px from 783px up, 46px below it. Without this the topbar
 * hides underneath it. The bar itself is `position:fixed` at >=783px and
 * `position:absolute` below, hence the two different treatments.
 */
.admin-bar header{top:32px;}

@media screen and (max-width:782px){
  .admin-bar header{top:46px;}
}

@media screen and (max-width:600px){
  /* Core stops fixing the bar here, so the header goes back to the viewport top. */
  .admin-bar header{top:0;}
}


/* ==========================================================================
   3. ACCESSIBILITY
   --------------------------------------------------------------------------
   The ported stylesheet's only :focus rule REMOVES the outline
   (.form-field input:focus). That is the single most damaging accessibility
   default in the design, so focus is rebuilt here in --blue-2 as CLAUDE.md
   requires, and the form fields get a visible ring back.
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--blue-2);
  outline-offset:2px;
  border-radius:4px;
}

/* Restore a visible ring on form fields, whose ported rule sets outline:none. */
.form-field input:focus-visible,
.form-field select:focus-visible,
.nl-form input:focus-visible,
.chat-input input:focus-visible{
  outline:2px solid var(--blue-2);
  outline-offset:1px;
  border-color:var(--blue-2);
}

/* Swatches and thumbs are controls; they need a focus state the mouse never shows. */
.color-swatches .sw:focus-visible,
.swatch:focus-visible,
.gallery-thumbs .thumb-slot:focus-visible{
  outline:2px solid var(--blue-2);
  outline-offset:2px;
}

/*
 * The ring on the DARK chrome.
 *
 * --blue-2 (#3049C9) against --navy (#0B123A) is 2.52:1, which fails WCAG
 * 1.4.11 Non-text Contrast — a focus indicator has to reach 3:1 against what
 * is behind it, and on the topbar, the nav, the CTA band and the footer it
 * does not. So on those surfaces the ring is white, which is 15.6:1 there.
 *
 * This is a focus-INDICATOR change, not a brand-colour change: no value in
 * the :root token block was touched, and --blue-2 is still the ring
 * everywhere it works, which is every light surface on the site.
 */
.topbar a:focus-visible,
.nav a:focus-visible,
.nav button:focus-visible,
.nav .icon-btn:focus-visible,
.nav-toggle:focus-visible,
.logo:focus-visible,
.mobile-nav a:focus-visible,
.mobile-nav button:focus-visible,
.cta-insert a:focus-visible,
.cta-insert button:focus-visible,
footer a:focus-visible,
footer button:focus-visible,
.foot-col a:focus-visible,
.foot-bottom button:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/*
 * A focused control must not be hidden under the sticky header.
 *
 * header is position:sticky at ~104px tall, and the browser scrolls a
 * keyboard-focused element to the very top of the viewport — straight
 * underneath it. Without this, tabbing down the page repeatedly moves focus
 * to something the user cannot see. The two admin-bar variants mirror the
 * existing .admin-bar header offsets.
 */
html{scroll-padding-top:112px;}

.admin-bar html,
html.admin-bar{scroll-padding-top:144px;}

@media screen and (max-width:782px){
  html{scroll-padding-top:158px;}
}

/*
 * A SELECTED swatch must stay legible while it is also focused.
 *
 * The ported design marks selection with `outline:2px solid var(--blue)` and
 * focus is also an outline, at the same width and offset — so with equal
 * specificity the focus ring simply replaced the selected ring and a keyboard
 * user could not tell which colour was chosen while moving through them.
 *
 * Selection moves to a box-shadow ring, which is a channel focus does not
 * use, so the two states can be true at once and look different. The ported
 * block is not edited; this overrides it.
 */
.color-swatches .sw.active,
.swatch.active{
  outline:none;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--blue);
}

.color-swatches .sw.active:focus-visible,
.swatch.active:focus-visible{
  outline:2px solid var(--blue-2);
  outline-offset:4px;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--blue);
}

/*
 * The quantity stepper.
 *
 * Real buttons from the start, but with no rule of their own they inherited
 * `button{border:none;background:none}` and the global padding reset and
 * measured 8x18px — well under the 24x24 CSS px WCAG 2.5.8 asks of a target,
 * and hard to hit with a thumb. Sized to match the field beside them.
 */
.airix-qty-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  min-height:38px;
  font-size:16px;
  line-height:1;
  color:var(--ink);
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--surface);
}

.airix-qty-step:hover{
  border-color:var(--blue-2);
  color:var(--blue-2);
}

.airix-qty-step:focus-visible{
  outline:2px solid var(--blue-2);
  outline-offset:2px;
}

/*
 * The mini-cart panel's label, which used to be an <h4>.
 *
 * Reproduces exactly what `.cart-panel h4` gave it (14px, 12px below, bold by
 * virtue of being a heading) now that it is a <p>. See the comment in
 * template-parts/site/mini-cart.php for why it stopped being a heading: it
 * sits in the sticky header, so it was the first heading in the document on
 * every page and every page's outline began H4 before H1.
 */
.cart-panel .cart-panel-title{
  font-size:14px;
  font-weight:700;
  margin-bottom:12px;
  color:var(--ink);
}

/*
 * The footer column headings, which became h2s.
 *
 * Identical to what `.foot-col h4` gave them — the ported rule is still there
 * and still correct, it simply no longer matches. See airix_footer_column()
 * for why the level changed: h4 skipped two levels on every page that has no
 * h2 of its own.
 *
 * font-family is stated because h2 inherits Space Grotesk from the ported
 * `h1,h2,h3` rule, and these were set in the body font as h4s.
 */
.foot-col .foot-col-title{
  font-family:'Inter', sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy-ink-faint);
  margin-bottom:14px;
}

/*
 * The cart and checkout section headings, promoted from h4/h3 to h2 so the
 * outline descends from the page's h1 without skipping. Restated here because
 * the ported rules select on the old tag names, and the ported block is not
 * edited.
 *
 * `.checkout-section h3` was already an h3 and so already took Space Grotesk
 * from the ported `h1,h2,h3` rule; the two that were h4s did not, so those
 * state the body font to keep looking exactly as designed.
 */
.basket-row h2{
  font-family:'Inter', sans-serif;
  font-size:15px;
  font-weight:700;
  margin-bottom:4px;
}

.summary-card h2{
  font-family:'Inter', sans-serif;
  font-size:15px;
  font-weight:700;
  margin-bottom:16px;
}

.checkout-section h2{
  font-size:16px;
  margin-bottom:14px;
}

/*
 * Phase 7 mandates this, but the hover lifts and panel transitions it applies
 * to are all in the block above, so it belongs with them rather than three
 * phases later.
 */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

  .btn:hover,
  .prod-card:hover,
  .add-basket-btn:hover,
  .chat-bubble:hover{transform:none;}
}


/* ==========================================================================
   4. MOBILE NAVIGATION
   --------------------------------------------------------------------------
   An addition, not a port. The prototype hides .navlinks below 860px and
   offers nothing in their place — see docs/design-spec.md's deliberate
   departures. This is a disclosure menu driven by a real <button> with
   aria-expanded; the JS in assets/js/navigation.js only toggles the attribute
   and the class.
   ========================================================================== */

.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; padding:0;
  color:var(--navy-ink-3); background:none; border:none; cursor:pointer;
}
.nav-toggle:hover{background:var(--navy-hover); color:#fff;}

.nav-toggle-bars{
  display:block; position:relative; width:18px; height:2px;
  background:currentColor; border-radius:2px;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:""; position:absolute; left:0; width:18px; height:2px;
  background:currentColor; border-radius:2px; transition:transform .15s ease, opacity .15s ease;
}
.nav-toggle-bars::before{top:-6px;}
.nav-toggle-bars::after{top:6px;}

/* Morph to a cross while open, so the control reads as a toggle. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg);}

.mobile-nav{
  display:none; background:var(--navy); border-bottom:1px solid var(--navy-line-2);
}
.mobile-nav[data-open="true"]{display:block;}

.mobile-nav ul{list-style:none; margin:0; padding:8px 32px 20px;}
.mobile-nav li{border-bottom:1px solid var(--navy-line-2);}
.mobile-nav li:last-child{border-bottom:none;}
.mobile-nav a{
  display:block; padding:15px 4px; font-size:15px; font-weight:500;
  color:var(--navy-ink);
}
.mobile-nav a:hover,
.mobile-nav a:focus-visible{color:#fff;}

@media (max-width:860px){
  .nav-toggle{display:inline-flex;}
}

@media (min-width:861px){
  /* Never leave the panel open when the viewport grows past the breakpoint. */
  .mobile-nav{display:none !important;}
}


/* ==========================================================================
   5. SURFACES THE PROTOTYPE NEVER DESIGNED
   --------------------------------------------------------------------------
   The prototype is a single scrolling page. These are the templates a real
   WordPress site needs anyway — an interior page, a post, search results,
   404 — built from the design's existing language rather than a second
   invented one. Kept out of section 1 so the port stays verifiable.
   ========================================================================== */

/* Long-form content: the design has no body-copy scale beyond .pdp-desc. */
.airix-entry-content{max-width:760px; color:var(--ink-dim); font-size:15.5px;}
.airix-entry-content > * + *{margin-top:20px;}
.airix-entry-content h2{font-size:24px; margin-top:40px;}
.airix-entry-content h3{font-size:19px; margin-top:32px;}
.airix-entry-content h4{font-family:'Space Grotesk', sans-serif; font-size:16px; color:var(--ink); margin-top:28px;}
.airix-entry-content p,
.airix-entry-content li{color:var(--ink-dim);}
/*
 * Underline links in prose — but never a button. A shortcode dropped into a
 * page's content can put buttons inside this block, and an underlined
 * "Checkout" button is what this exclusion prevents. page.php also swaps this
 * class out entirely on the Woo pages; this is the belt to that braces.
 */
.airix-entry-content a:not(.btn):not(.button):not(.cart-panel-link):not(.add-basket-btn){
  color:var(--blue); text-decoration:underline; text-underline-offset:2px;
}
.airix-entry-content a:not(.btn):not(.button):hover{color:var(--blue-2);}
.airix-entry-content ul,
.airix-entry-content ol{padding-left:22px;}
.airix-entry-content li + li{margin-top:8px;}
.airix-entry-content blockquote{
  border-left:3px solid var(--blue-2); padding:4px 0 4px 20px; color:var(--ink);
}
.airix-entry-content code{
  font-family:'IBM Plex Mono', monospace; font-size:13px;
  background:var(--steel-1); padding:2px 6px; border-radius:6px;
}
.airix-entry-content pre{
  font-family:'IBM Plex Mono', monospace; font-size:13px; background:var(--steel-1);
  padding:18px; border-radius:12px; overflow-x:auto;
}
.airix-entry-content table{width:100%; border-collapse:collapse; font-size:13.5px;}
.airix-entry-content th,
.airix-entry-content td{padding:11px 0; border-top:1px solid var(--line); text-align:left;}

.airix-post-thumb{margin-bottom:32px;}

/* Post and search cards reuse .prod-card, and need the one part it lacks. */
.entry-excerpt{color:var(--ink-dim); font-size:14px;}
.prod-card h3 a:hover{color:var(--blue);}

/*
 * Archives render into .post-list. When it is also .prod-grid the grid rules
 * apply; on its own it is a single column, which is what a blog wants.
 */
.post-list{display:grid; gap:22px;}

/* Pagination — core markup, no design precedent. */
.wp-block-query-pagination,
.navigation.pagination{margin-top:44px;}
.navigation.pagination .nav-links{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  font-family:'IBM Plex Mono', monospace; font-size:13px;
}
.navigation.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-dim);
}
.navigation.pagination .page-numbers:hover{border-color:var(--blue); color:var(--blue);}
.navigation.pagination .page-numbers.current{
  background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600;
}
.navigation.pagination .page-numbers.dots{border:none; background:none;}

.airix-search-form{max-width:400px;}
.airix-empty-search{max-width:400px; margin:24px auto 0;}

/* 404 */
.airix-404-inner{text-align:center; max-width:560px; margin:0 auto;}
.airix-404-code{
  font-size:56px; font-weight:700; color:var(--blue);
  letter-spacing:.04em; line-height:1; margin-bottom:20px;
}
.airix-404-ctas{justify-content:center; margin-top:32px; margin-bottom:0;}
.airix-404-search{margin:40px auto 0; max-width:400px;}

/* Comments — core emits these on posts and pages; unstyled they look broken. */
.comment-list{list-style:none; margin:44px 0 0;}
.comment-list li{padding:20px 0; border-top:1px solid var(--line);}
.comment-meta{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-dim);}
.comment-form{max-width:640px; margin-top:32px;}
.comment-form p{margin-bottom:14px;}
.comment-form label{display:block; font-size:12.5px; color:var(--ink-dim); margin-bottom:6px;}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%; border:1.5px solid var(--line); border-radius:10px;
  padding:11px 13px; font-size:14px; font-family:inherit; background:#fff; color:var(--ink);
}
.comment-form .submit{
  background:linear-gradient(135deg, var(--blue-2), var(--blue-dark)); color:#fff;
  border:none; font-weight:600; font-size:14px; padding:14px 26px; border-radius:12px; cursor:pointer;
}

@media (max-width:860px){
  .airix-404-code{font-size:44px;}
}


/* ==========================================================================
   6. PRODUCT CARD STATES
   --------------------------------------------------------------------------
   docs/design-spec.md's states table. The prototype designed one happy path —
   in stock, full price, two colours — so every row below is an addition, not
   a port.

   The card becomes a flex column so `.prod-bottom` can be pinned to the
   bottom. Without that, a card with no swatch row (a simple product) pulls
   its price and button upward and sits visibly shorter than its neighbours,
   which is the states table's "keeps the same height" requirement.
   ========================================================================== */

.prod-card{
  position:relative;          /* for the sale chip */
  display:flex;
  flex-direction:column;
}

.prod-card .prod-bottom{margin-top:auto; padding-top:14px;}

/* --- Sale ---------------------------------------------------------------- */

.airix-sale-chip{
  position:absolute; top:32px; right:32px; z-index:2;
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; font-weight:500;
  background:var(--teal); color:#fff; padding:3px 9px; border-radius:6px;
  letter-spacing:.02em;
}

/*
 * Woo renders a sale price as <del>regular</del> <ins>sale</ins>. The design
 * spec wants the regular struck in --ink-dim and the sale in --ink.
 */
.prod-price del,
.price-row del{
  color:var(--ink-dim); font-weight:400; text-decoration:line-through;
  margin-right:6px;
}
.prod-price ins,
.price-row ins{color:var(--ink); text-decoration:none;}

/* A price RANGE is wider than the slot; let it wrap rather than overflow. */
.prod-price{line-height:1.4;}
.prod-price .woocommerce-Price-amount{white-space:nowrap;}

/* --- Out of stock -------------------------------------------------------- */

.prod-card.is-outofstock .photo img{opacity:.6;}
.prod-card.is-outofstock .img-slot{opacity:.6;}

.add-basket-btn[disabled],
.add-basket-btn[aria-disabled="true"]{
  background:var(--steel-2); color:var(--ink-dim);
  box-shadow:none; cursor:not-allowed;
}
.add-basket-btn[disabled]:hover{transform:none;}

/* Backorder note, under the price. */
.airix-stock-note{
  font-family:'IBM Plex Mono', monospace; font-size:11px;
  color:var(--ink-dim); letter-spacing:.02em;
}

/* --- Swatches ----------------------------------------------------------- */

/*
 * Swatches are <button>s now, so they need the box-model reset the ported
 * `.sw` rule assumed on a <div>.
 */
.color-swatches .sw{
  padding:0; appearance:none; -webkit-appearance:none;
  flex-shrink:0; display:block;
}

/* Four or more colours wrap instead of squeezing the button off the card. */
.color-swatches{flex-wrap:wrap; row-gap:8px;}

/* Near-white needs a darker border or it vanishes against --surface. */
.color-swatches .sw.is-light,
.swatch.is-light{border-color:#C9CEDA;}

/* No hex set: --steel-2, never an invisible swatch. The name is the tooltip. */
.color-swatches .sw.is-unset,
.swatch.is-unset{background:var(--steel-2);}

/*
 * An unavailable colour is disabled BEFORE the click, per the states table.
 * Struck through rather than merely faded, so it reads as unavailable and not
 * as a lighter shade of the same colour.
 */
.color-swatches .sw.is-unavailable,
.swatch.is-unavailable{
  cursor:not-allowed; opacity:.45; position:relative;
}
.color-swatches .sw.is-unavailable::after,
.swatch.is-unavailable::after{
  content:""; position:absolute; left:-2px; right:-2px; top:50%;
  height:1.5px; background:var(--ink-dim); transform:rotate(-45deg);
}

/* --- Add-to-basket feedback --------------------------------------------- */

.add-basket-btn[data-added-state]{
  background:var(--teal); box-shadow:0 10px 22px -10px #00B8A066;
}
.add-basket-btn[data-error]{
  background:#C0392B; box-shadow:none;
}
.add-basket-btn[data-busy]{opacity:.75; cursor:progress;}

/* --- Long titles -------------------------------------------------------- */

/*
 * Two-line clamp with the full title in the `title` attribute, so a long name
 * cannot change the card's height. min-height reserves both lines, which stops
 * a one-line title sitting taller or shorter than a two-line neighbour.
 */
.airix-card-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:calc(1.35em * 2); line-height:1.35;
}

/* --- CTA band ----------------------------------------------------------- */

.airix-cta-section{border-top:none; padding-top:0;}
.airix-cta-actions{margin-bottom:0;}
.airix-cta-actions .btn-outline{background:transparent; color:#fff; border-color:var(--navy-line-2);}
.airix-cta-actions .btn-outline:hover{border-color:#fff;}
.airix-cta-slot{aspect-ratio:1/1;}

/* --- Newsletter --------------------------------------------------------- */

/*
 * The honeypot must be unreachable by pointer, keyboard and screen reader,
 * while remaining a real field a bot will fill. display:none is avoided
 * because some bots skip hidden fields.
 */
.airix-honeypot{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.airix-nl-status{
  min-height:1.4em; margin-top:14px; font-size:13.5px;
  font-family:'IBM Plex Mono', monospace;
}
.airix-nl-status.is-success{color:#00786A;}  /* --teal fails 4.5:1 as text */
.airix-nl-status.is-error{color:#A5301F;}

.airix-nl-consent{max-width:520px; margin-left:auto; margin-right:auto;}
.airix-nl-consent a{color:var(--blue); text-decoration:underline;}

.airix-newsletter-section{border-top:none;}

/* --- Policies ----------------------------------------------------------- */

.airix-policy-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:22px;
}
.airix-policy{
  background:var(--bg); border:1px solid var(--line);
  border-radius:20px; padding:26px;
}
.airix-policy h3{font-size:16.5px; margin-bottom:10px;}
.airix-policy h3 a:hover{color:var(--blue);}
.airix-policy p{color:var(--ink-dim); font-size:14px; margin-bottom:14px;}
.airix-policy-link{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  color:var(--blue); letter-spacing:.04em;
}
.airix-policy-link:hover{text-decoration:underline;}

@media (max-width:860px){
  .airix-policy-grid{grid-template-columns:1fr;}
}

/* --- Admin-only notices ------------------------------------------------- */

/*
 * Shown to a logged-in shop manager when a section cannot render — an unset
 * CTA product, an empty grid. Deliberately loud, because it must never be
 * mistaken for customer-facing copy.
 */
.airix-admin-note{
  border:1px dashed var(--blue-2); border-radius:12px; padding:16px 20px;
  background:#E4E9FA; color:var(--blue); font-size:13.5px;
  font-family:'IBM Plex Mono', monospace; line-height:1.5;
}