/* AxoMates | buyaxolotlaustralia.com
   Design tokens recreated from the AxoMates prototype.
   Build spec rule 1: the body and every outer wrapper stay 100% width.
   Width is only ever constrained on inner content rails (.wrap), never on the
   page shell, so no page is ever boxed. */

:root{
  --ink:#22323C; --body:#3A4C57; --muted:#5E7481; --light-muted:#8A9AA3;
  --page:#FBF8F4; --surface:#FFFFFF; --water:#EAF3F7; --water-border:#D6E8F0;
  --warm-border:#E7E2D9; --divider:#F0EDE6; --input-border:#DDD8CF;
  --coral:#F2A0A8; --coral-dark:#E37B87; --coral-light:#F7C3C8;
  --success-bg:#E3F0E8; --success-fg:#2F6B4B;
  --sans:"Nunito Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --display:"Quicksand",var(--sans);
  --brandfont:"Baloo 2",var(--display);
  --stripe:repeating-linear-gradient(135deg,#E7F0F4 0 12px,#DEEAF0 12px 24px);
}

*{box-sizing:border-box}

/* The hidden attribute must actually hide things.
   The browser's own [hidden]{display:none} is a user agent rule, so any author
   rule setting display (the chat gate, the chat log, the panel, all of which are
   flex) silently beats it and the element stays on screen. Everything toggled
   from JavaScript uses el.hidden, so without this the chat gate never goes away
   after you enter your name and email. */
[hidden]{display:none !important}

/* Grid and flex children default to min-width:auto, which lets long words,
   tables and images push the page wider than the viewport. */
.grid > *,.shop > *,.pdp > *,.checkout > *,.cart-layout > *,.split-band > *,
.footer-grid > *,.supply-card > *,.morph-row > *,.field-row > *{min-width:0}
h1,h2,h3,h4,p,li,td,th,a,span,div{overflow-wrap:break-word}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

/* Full width enforcement. No max-width on the shell, ever. */
html,body{width:100%;max-width:none;margin:0;padding:0}
body{
  background:var(--page); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.shell{width:100%;max-width:none;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%;max-width:none}
section{width:100%;max-width:none}

/* Inner content rail. Width lives here and nowhere else. */
.wrap{max-width:1200px;margin:0 auto;padding-left:28px;padding-right:28px;width:100%}
.wrap-narrow{max-width:1100px}
.wrap-tight{max-width:900px}
.wrap-read{max-width:820px}

a{color:var(--ink);text-decoration:none}
a:hover{color:var(--coral-dark)}
img{max-width:100%;height:auto;display:block}
input,textarea,select,button{font-family:inherit;font-size:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-0.02em;margin:0}
h1{font-size:44px;line-height:1.1;letter-spacing:-0.025em}
h2{font-size:38px;line-height:1.15}
h3{font-size:26px;line-height:1.25;letter-spacing:-0.015em}
h4{font-size:20px;line-height:1.3}
p{margin:0 0 16px;text-wrap:pretty}

.eyebrow{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-dark);margin-bottom:12px}
.lede{font-size:17px;line-height:1.7;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:14px}
.micro{font-size:13px}

/* ---------- announcement + header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(251,248,244,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--warm-border)}
.header-inner{display:flex;align-items:center;gap:32px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo svg{width:40px;height:40px;flex-shrink:0}
.logo span{font-family:var(--brandfont);font-weight:700;font-size:23px;letter-spacing:-.015em}
.site-nav{display:flex;align-items:center;gap:26px;margin-left:auto;font-family:var(--display);font-weight:600;font-size:15px}
.site-nav a{padding:6px 0;border-bottom:2px solid transparent}
.site-nav a:hover{border-bottom-color:var(--coral);color:var(--ink)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:8px;background:var(--water);border:1px solid var(--water-border);border-radius:999px;padding:8px 16px}
.nav-cta:hover{background:var(--water-border);border-bottom-color:transparent}
.nav-toggle{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:16px;padding:15px 30px;border-radius:999px;border:none;cursor:pointer;text-align:center}
.btn-primary{background:var(--coral);color:#FFF}
.btn-primary:hover{background:var(--coral-dark);color:#FFF}
.btn-outline{border:1.5px solid var(--water-border);background:var(--surface);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);color:var(--ink)}
.btn-ghost-light{border:1.5px solid rgba(255,255,255,.55);color:#FFF}
.btn-ghost-light:hover{border-color:#FFF;background:rgba(255,255,255,.12);color:#FFF}
.btn-sm{font-size:15px;padding:12px 24px}
.link-underline{font-family:var(--display);font-weight:700;font-size:15px;border-bottom:2px solid var(--coral);padding-bottom:3px}
.link-coral{font-family:var(--display);font-weight:700;font-size:15px;color:var(--coral-dark)}
.link-coral:hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero{background:var(--page);padding:20px 20px 0}
.hero-inner{position:relative;max-width:1400px;margin:0 auto;border-radius:28px;overflow:hidden;min-height:700px;display:flex;align-items:flex-end;justify-content:center;text-align:center;background:var(--stripe)}
.hero-inner img.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,40,0) 0%,rgba(20,32,40,.04) 30%,rgba(20,32,40,.42) 58%,rgba(20,32,40,.82) 100%)}
.hero-content{position:relative;padding:0 48px 56px;max-width:900px}
.hero-content .eyebrow{color:var(--coral-light)}
.hero h1{font-size:58px;line-height:1.06;color:#FFF;margin:0 0 18px;text-wrap:balance;text-shadow:0 2px 20px rgba(12,20,26,.55)}
.hero p{font-size:18px;line-height:1.6;color:#E4EEF3;text-shadow:0 1px 14px rgba(12,20,26,.5);margin:0 auto 28px;max-width:56ch}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero-stats{display:flex;gap:56px;margin-top:34px;flex-wrap:wrap;justify-content:center}
.hero-stats .v{font-family:var(--display);font-weight:700;font-size:26px;color:#FFF}
.hero-stats .l{font-size:13px;color:#B9CEDA;letter-spacing:.02em}

/* ---------- page header band ---------- */
.page-head{background:var(--water)}
.page-head .wrap{padding-top:62px;padding-bottom:62px;text-align:center}
.page-head h1{font-size:48px}
.page-head p{margin:16px auto 0;max-width:62ch;color:#4A616D;font-size:17px;line-height:1.7}
.page-head-left .wrap{text-align:left}
.page-head-left p{margin-left:0}

/* ---------- generic sections ---------- */
.band{background:var(--surface);border-top:1px solid var(--warm-border);border-bottom:1px solid var(--warm-border)}
.band-ink{background:var(--ink);color:var(--water)}
.band-ink h2,.band-ink h3{color:#FFF}
.band-ink p{color:#A9C2CE}
.band-water{background:var(--water)}
.sec{padding-top:72px;padding-bottom:72px}
.sec-sm{padding-top:44px;padding-bottom:44px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.sec-head h2{margin:0}

/* ---------- grids ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.gap-sm{gap:16px}
.gap-lg{gap:32px}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--warm-border);border-radius:20px;overflow:hidden}
.card:hover{border-color:var(--coral)}
.card-pad{padding:26px}
.card-lg{border-radius:22px;padding:30px 32px}
.card-flat{background:var(--page);border:1px solid var(--warm-border);border-radius:22px;padding:22px}

/* product card */
.p-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--warm-border);border-radius:20px;overflow:hidden}
.p-card:hover{border-color:var(--coral)}
.p-card-link{display:block;color:inherit}
.p-card-link:hover{color:inherit}
.p-media{aspect-ratio:1;background:var(--stripe);position:relative;overflow:hidden}
.p-media img{width:100%;height:100%;object-fit:cover}
.p-badge{position:absolute;top:12px;left:12px;background:var(--ink);color:#FFF;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;font-family:var(--display);font-weight:700}
.p-badge-sold{background:#A8474F}
.p-body{padding:16px 18px 14px}
.p-name{font-family:var(--display);font-weight:700;font-size:18px}
.p-meta{font-size:13px;color:var(--muted);margin:3px 0 12px}
.p-foot{display:flex;align-items:center;justify-content:space-between}
.p-price{font-family:var(--display);font-weight:700;font-size:17px}
.p-view{font-size:13px;color:var(--coral-dark);font-weight:600}

/* Add to cart / Buy now on the card. Siblings of the link, not nested inside
   it, so they stay independently clickable without breaking the anchor. */
.p-actions{display:flex;gap:8px;padding:0 18px 18px;margin-top:auto}
.btn-cart-sm,.btn-buy-sm{flex:1;text-align:center;font-family:var(--display);font-weight:700;font-size:13px;padding:10px 10px;border-radius:999px;cursor:pointer;border:1.5px solid transparent}
.btn-cart-sm{background:var(--coral);color:#FFF;border-color:var(--coral)}
.btn-cart-sm:hover{background:var(--coral-dark);border-color:var(--coral-dark)}
.btn-cart-sm.is-added{background:var(--success-bg);color:var(--success-fg);border-color:var(--success-bg);cursor:default}
.btn-buy-sm{background:var(--surface);color:var(--ink);border-color:var(--water-border)}
.btn-buy-sm:hover{border-color:var(--ink);color:var(--ink)}
.p-actions-sold{padding:0 18px 18px}
.p-sold-note{display:block;text-align:center;font-size:13px;color:var(--muted);background:var(--page);border-radius:999px;padding:10px;font-weight:600}

/* ---------- shop layout ---------- */
.shop{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.filters{background:var(--surface);border:1px solid var(--warm-border);border-radius:20px;padding:22px;position:sticky;top:96px}
.filters .ftitle{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.filters ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:4px}
.filters li a{display:block;padding:8px 12px;border-radius:11px;font-size:15px;color:var(--body)}
.filters li a:hover{background:var(--page)}
.filters li a[aria-current="page"]{background:var(--ink);color:#FFF}
.shop-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:14px;color:var(--muted)}

/* ---------- product page ---------- */
.crumbs{font-size:14px;color:var(--muted);padding-top:24px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--coral-dark)}
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.pdp-hero{aspect-ratio:1;border-radius:24px;background:var(--stripe);border:1px solid var(--water-border);overflow:hidden;margin-bottom:14px}
.pdp-hero img{width:100%;height:100%;object-fit:cover}
.pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pdp-thumbs figure{margin:0;aspect-ratio:1;border-radius:14px;background:var(--stripe);border:1px solid var(--warm-border);overflow:hidden}
.pdp-thumbs img{width:100%;height:100%;object-fit:cover}
.pill{display:inline-block;background:var(--water);color:var(--ink);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--display);font-weight:700;padding:6px 12px;border-radius:999px;margin-bottom:16px}
.pdp h1{font-size:42px;margin:0 0 8px}
.pdp-morph{font-size:16px;color:var(--muted);margin-bottom:22px}
.pdp-price{font-family:var(--display);font-weight:700;font-size:34px;margin-bottom:8px}
.pdp-freight{font-size:13px;color:var(--muted);margin-bottom:26px}
.spec{background:var(--surface);border:1px solid var(--warm-border);border-radius:18px;padding:20px 22px;margin-bottom:26px}
.spec div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid var(--divider);font-size:14px}
.spec div:last-child{border-bottom:none}
.spec .k{color:var(--muted)}
.spec .v{font-weight:600}
.note-water{font-size:13px;color:var(--muted);line-height:1.6;background:var(--water);border-radius:14px;padding:16px 18px;margin-bottom:22px}

/* ---------- CTA slot ----------
   Section 2 rule 10: a marked slot on every commercial page. The mechanism
   behind it is wired separately, see CTA-SLOTS.md. */
.cta-slot{background:var(--water);border:1px solid var(--water-border);border-radius:24px;padding:34px 36px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-slot h2,.cta-slot h3{font-size:26px;margin:0 0 8px}
.cta-slot p{margin:0;color:#4A616D;font-size:15px;line-height:1.7;max-width:58ch}
.cta-slot-actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-inline{display:flex;gap:12px;margin-bottom:18px}
.cta-inline .btn{flex:1}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--warm-border);border-radius:18px;overflow:hidden}
.faq summary{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 24px;font-family:var(--display);font-weight:700;font-size:17px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--coral-dark);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 24px 22px;font-size:15px;line-height:1.7;color:var(--muted)}
.faq .a p:last-child{margin-bottom:0}

/* ---------- content prose ---------- */
.prose h2{font-size:30px;margin:44px 0 14px}
.prose h3{font-size:22px;margin:32px 0 10px}
.prose p{font-size:16px;line-height:1.8;color:var(--body)}
.prose ul,.prose ol{padding-left:22px;margin:0 0 18px;color:var(--body);line-height:1.8}
.prose li{margin-bottom:8px}
.prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--divider)}
.prose th{font-family:var(--display);font-weight:700;background:var(--water)}
.prose tbody tr:hover{background:var(--page)}
.prose a{color:var(--coral-dark);border-bottom:1px solid var(--coral-light)}
.prose a:hover{border-bottom-color:var(--coral-dark)}

/* ---------- misc blocks ---------- */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-top:34px;padding-bottom:34px}
.promise .t{font-family:var(--display);font-weight:700;font-size:16px;margin-bottom:4px}
.promise .b{font-size:14px;color:var(--muted);line-height:1.55}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.step{background:rgba(234,243,247,.07);border:1px solid rgba(234,243,247,.16);border-radius:18px;padding:22px}
.step .n{font-family:var(--display);font-weight:700;font-size:13px;color:var(--coral);margin-bottom:10px}
.step .t{font-family:var(--display);font-weight:700;font-size:17px;color:#FFF;margin-bottom:7px}
.step .b{font-size:14px;line-height:1.55;color:#A9C2CE}
.stat-card{background:var(--surface);border:1px solid var(--warm-border);border-radius:20px;padding:24px}
.stat-card .l{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--display);font-weight:700;margin-bottom:12px}
.stat-card .v{font-family:var(--display);font-weight:700;font-size:26px;margin-bottom:8px}
.stat-card .n{font-size:14px;line-height:1.55;color:var(--muted)}
.morph-row{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:center;border:1px solid var(--warm-border);border-radius:22px;padding:22px;background:var(--page)}
.morph-row .m-media{aspect-ratio:4/3;border-radius:16px;background:var(--stripe);overflow:hidden}
.morph-row .m-media img{width:100%;height:100%;object-fit:cover}
.morph-row h3{margin:0 0 12px}
.morph-row p{font-size:15px;line-height:1.75;color:var(--muted);margin:0 0 16px;max-width:68ch}
.review{background:var(--surface);border:1px solid var(--warm-border);border-radius:20px;padding:26px}
.review .stars{color:var(--coral);letter-spacing:3px;font-size:14px;margin-bottom:14px}
.review p{font-size:15px;line-height:1.65;margin:0 0 20px;color:var(--body)}
.review .n{font-family:var(--display);font-weight:700;font-size:14px}
.review .c{font-size:12px;color:var(--muted)}
.bullets{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;list-style:none;padding:0;margin:0}
.bullets li{position:relative;padding-left:18px;font-size:15px;line-height:1.65;color:var(--body)}
.bullets li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:999px;background:var(--coral)}
.empty-state{background:var(--water);border:1px dashed var(--water-border);border-radius:20px;padding:40px;text-align:center;color:var(--muted)}
.empty-state .t{font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink);margin-bottom:8px}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:16px}
.field span{display:block;font-size:13px;font-weight:600;color:var(--body);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--input-border);border-radius:12px;padding:12px 14px;font-size:15px;background:var(--page)}
.field textarea{resize:vertical}
.form-card{background:var(--surface);border-radius:18px;padding:26px}

/* ---------- footer ---------- */
.site-footer{background:var(--surface);border-top:1px solid var(--warm-border);margin-top:auto}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:40px;padding-top:54px;padding-bottom:34px}
.footer-grid h2{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.footer-links{display:flex;flex-direction:column;gap:9px;font-size:14px}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--coral-dark)}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-brand svg{width:36px;height:36px}
.footer-brand span{font-family:var(--brandfont);font-weight:700;font-size:21px}
.footer-note{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 16px;max-width:34ch}
.footer-geo{font-size:13px;line-height:1.7;color:var(--muted);border-top:1px solid var(--divider);padding-top:20px;padding-bottom:8px}
.footer-bar{padding-top:20px;padding-bottom:34px;border-top:1px solid var(--divider);display:flex;justify-content:space-between;gap:20px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.footer-bar a{color:var(--muted)}
.newsletter{display:flex;gap:8px}
.newsletter input{flex:1;min-width:0;border:1px solid var(--input-border);border-radius:999px;padding:11px 16px;font-size:14px;background:var(--page)}
.newsletter button{background:var(--ink);color:#FFF;border:none;font-family:var(--display);font-weight:700;font-size:14px;padding:11px 20px;border-radius:999px;cursor:pointer}
.newsletter button:hover{background:var(--coral)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#FFF;padding:10px 16px;border-radius:8px}

/* ---------- cart pill count badge ---------- */
.cart-count{background:var(--coral);color:#FFF;border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;font-size:12px;padding:0 6px;font-family:var(--display);font-weight:700}

/* ---------- product gallery ----------
   The catalogue carries four to eight photos per animal, so the handoff's
   4-up thumbnail row wraps rather than truncating. */
.pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* ---------- review form ---------- */
.review-panel{background:var(--water);border:1px solid var(--water-border);border-radius:24px;padding:34px 36px;display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}
.review-panel h3{font-size:26px;margin:0 0 10px}
.review-panel > div > p{font-size:15px;line-height:1.7;color:#4A616D;margin:0}
.stars-input{display:flex;align-items:center;gap:8px}
.stars-input .star{background:none;border:none;padding:0;font-size:30px;line-height:1;color:#C9D9E1;cursor:pointer}
.stars-input .star.on,.stars-input .star:hover{color:var(--coral)}
.star-hint{font-size:13px;color:var(--muted);margin-left:8px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--body);margin-bottom:16px;line-height:1.5}
.check input{margin-top:3px;flex-shrink:0}

/* ---------- cart page ----------
   Design handoff screen 9: 1040px rail, 1.5fr / 1fr, white line item card,
   pale blue summary panel. */
.wrap-cart{max-width:1040px}
.cart-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:start}
.cart-items{background:var(--surface);border:1px solid var(--warm-border);border-radius:22px;padding:10px 24px}
.cart-line{display:grid;grid-template-columns:84px 1fr auto;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--divider)}
.cart-line:last-child{border-bottom:none}
.cart-thumb{aspect-ratio:1;width:84px;border-radius:14px;overflow:hidden;background:var(--stripe)}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-line .p-name{font-family:var(--display);font-weight:700;font-size:17px}
.cart-line .p-meta{font-size:13px;color:var(--muted);margin-top:3px}
.cart-line a[data-remove]{font-size:13px;color:var(--muted);margin-top:8px;display:inline-block;border-bottom:1px solid var(--input-border)}
.cart-line a[data-remove]:hover{color:var(--coral-dark)}
.cart-line .p-price{font-family:var(--display);font-weight:700;font-size:17px}
.cart-empty{padding:46px 0;text-align:center;color:var(--muted)}
.cart-empty div{font-size:16px;margin-bottom:18px}
.cart-summary{background:var(--water);border-radius:22px;padding:28px}
.cart-sum-title{font-family:var(--display);font-weight:700;font-size:19px;margin-bottom:18px}
.cart-row{display:flex;justify-content:space-between;font-size:15px;padding:8px 0;color:#4A616D}
.cart-total{display:flex;justify-content:space-between;font-family:var(--display);font-weight:700;font-size:20px;padding:16px 0 18px;border-top:1px solid #C9DDE6;margin-top:10px}
.cart-summary .field select{border-color:#C9DDE6;background:var(--surface)}
.cart-note{font-size:12px;color:#4A616D;line-height:1.55;margin-top:14px}

/* ---------- morph row empty photo ---------- */
.m-empty{display:grid;place-items:center;height:100%;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--muted)}
.morph-row .m-media{display:grid;place-items:center}

@media (max-width:1024px){
  .review-panel{grid-template-columns:1fr;gap:26px}
  .cart-layout{grid-template-columns:1fr}
  .cart-summary{position:static}
}
@media (max-width:760px){
  .review-panel{padding:24px 22px}
  .pdp-thumbs{grid-template-columns:repeat(3,1fr)}
  .cart-line{grid-template-columns:64px 1fr;gap:12px}
  .cart-thumb{width:64px;height:64px}
}

/* ---------- photo lightbox ---------- */
[data-gallery] img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(20,32,40,.92);display:flex;align-items:center;justify-content:center;gap:12px;padding:24px}
/* superseded by the global [hidden] rule at the top */
.lb-stage{margin:0;max-width:min(1100px,92vw);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb-stage img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:18px;object-fit:contain;cursor:zoom-out}
.lb-cap{font-size:13px;color:#B9CEDA;letter-spacing:.04em}
.lb-close{position:absolute;top:20px;right:24px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#FFF;width:44px;height:44px;border-radius:999px;font-size:26px;line-height:1;cursor:pointer}
.lb-close:hover{background:var(--coral);border-color:var(--coral)}
.lb-nav{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#FFF;width:52px;height:52px;border-radius:999px;font-size:30px;line-height:1;cursor:pointer;flex-shrink:0}
.lb-nav:hover{background:var(--coral);border-color:var(--coral)}
@media (max-width:760px){
  .lightbox{padding:12px;gap:6px}
  .lb-nav{width:40px;height:40px;font-size:22px}
  .lb-close{top:12px;right:12px;width:38px;height:38px;font-size:22px}
}

/* ---------- blacklight thumbnails ---------- */
.pdp-thumbs figure.is-uv{position:relative}
.pdp-thumbs figure.is-uv figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(20,32,40,.78);color:#EAF3F7;font-size:10px;letter-spacing:.04em;text-align:center;padding:4px 6px}

/* ---------- supply category cards ---------- */
.supply-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.supply-card{display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;background:var(--surface);border:1px solid var(--warm-border);border-radius:20px;overflow:hidden;align-items:start}
.supply-card:hover{border-color:var(--coral)}
.supply-media{position:relative;width:180px;aspect-ratio:1;background:var(--stripe);overflow:hidden;flex-shrink:0}
.supply-media img{width:100%;height:100%;object-fit:cover;display:block}
.supply-badge{position:absolute;top:10px;left:10px;background:var(--ink);color:#FFF;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;font-family:var(--display);font-weight:700}
.addon-note{background:var(--water);border:1px solid var(--water-border);border-radius:14px;padding:14px 18px;font-size:14px;line-height:1.6;color:#4A616D;max-width:70ch}
.supply-body{padding:20px 22px 20px 0}
.supply-body h3{font-size:18px;margin-bottom:8px}
.supply-body p{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:14px}
.supply-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:1024px){.supply-grid{grid-template-columns:1fr}}
@media (max-width:760px){.supply-card{grid-template-columns:1fr}.supply-body{padding:0 20px 20px}.supply-media{width:100%;aspect-ratio:16/9}}

/* ---------- gallery slot ---------- */
.pdp-hero{cursor:zoom-in;touch-action:pan-y}
.pdp-thumbs figure{cursor:pointer;transition:border-color .12s}
.pdp-thumbs figure:hover,.pdp-thumbs figure:focus-visible{border-color:var(--coral);outline:none}
.pdp-thumbs figure.is-current{border-color:var(--ink);border-width:2px}

/* ---------- embedded map ---------- */
.map-embed{border:1px solid var(--warm-border);border-radius:18px;overflow:hidden;margin:22px 0 10px;line-height:0}
.map-embed iframe{display:block;width:100%;border:0}

/* ---------- checkout ---------- */
.checkout{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:start}
.checkout-block{background:var(--surface);border:1px solid var(--warm-border);border-radius:20px;padding:26px 28px;margin-bottom:22px}
.checkout-block h2{font-size:20px;margin-bottom:18px}
.checkout-summary{background:var(--water);border-radius:22px;padding:28px;position:sticky;top:96px}
.checkout-line{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #C9DDE6}
.checkout-line .cart-thumb{width:56px;height:56px;border-radius:10px}
.checkout-line .p-name{font-size:15px}
.checkout-line .p-meta{font-size:12px;margin:2px 0 0}
.checkout-line .p-price{font-size:15px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-row-3{grid-template-columns:1.4fr 1fr .7fr}
.notice-warn{background:#F7E7E8;border:1px solid #E8C9CC;color:#A8474F;border-radius:16px;padding:16px 20px;font-size:14px;line-height:1.6;margin-bottom:26px}
.pay-methods{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.pay-option{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--input-border);border-radius:14px;padding:14px 16px;cursor:pointer}
.pay-option:hover{border-color:var(--coral)}
.pay-option input{margin-top:3px;flex-shrink:0}
.pay-label{display:flex;flex-direction:column;gap:2px}
.card-fields{border:1px dashed var(--input-border);border-radius:14px;padding:18px;margin-bottom:18px;opacity:.6}
.card-fields legend{padding:0 8px}
input[readonly]{background:var(--divider);color:var(--muted)}
@media (max-width:1024px){.checkout{grid-template-columns:1fr}.checkout-summary{position:static}}
@media (max-width:760px){.field-row,.field-row-3{grid-template-columns:1fr}}

/* ---------- add to cart feedback ---------- */
.cart-feedback{background:var(--success-bg);color:var(--success-fg);border-radius:12px;padding:12px 16px;font-size:14px;margin:0 0 14px}
.cart-feedback a{color:var(--success-fg);text-decoration:underline}
.btn.is-added{background:var(--success-bg);color:var(--success-fg);cursor:default}

/* ---------- order received ---------- */
.order-received{background:var(--water);border:1px solid var(--water-border);border-radius:24px;padding:44px 40px}
.order-received-inner{max-width:62ch}
.order-received h2{font-size:30px;margin-bottom:14px}
.order-received p{font-size:16px;line-height:1.75;color:#3A4C57}
.order-ref{margin-bottom:20px}

/* ---------- pay now ----------
   Only rendered when the chosen method is set to show its details on the site.
   Treated as a panel rather than body copy, because these are numbers someone
   is about to type into a banking app and they need to be unmistakable. */
.pay-now{background:var(--surface);border:1px solid var(--water-border);border-radius:18px;padding:22px 24px;margin:6px 0 22px}
.pay-now-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.pay-now-head .eyebrow{margin-bottom:0}
.pay-amount{font-family:var(--display);font-size:15px;color:var(--muted)}
.pay-amount strong{font-size:22px;color:var(--ink);margin-left:6px}
.pay-details{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0 0 18px;align-items:center}
.pay-details dt{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--light-muted);font-family:var(--display);font-weight:700}
.pay-details dd{margin:0;font-size:19px;font-family:var(--display);font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;word-break:break-word}
.pay-copy{background:var(--water);border:1px solid var(--water-border);color:var(--muted);
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.04em;
  padding:4px 12px;border-radius:999px;cursor:pointer}
.pay-copy:hover{border-color:var(--coral);color:var(--ink)}
.pay-reference{font-size:15px;background:var(--water);border-radius:12px;padding:12px 16px;margin:0 0 12px}

/* ---------- review photos ----------
   Customer photographs, on the review cards. Worth real space: our own
   catalogue shots are clutch siblings in one tub, and a photo of the animal in
   somebody's own tank is the one image on the site that cannot be staged. */
.review-photos{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.review-photos a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--water-border);
  width:88px;height:88px;flex-shrink:0;background:var(--stripe)}
.review-photos img{width:100%;height:100%;object-fit:cover}
.review-photos a:hover{border-color:var(--coral)}

/* ---------- review photo picker ---------- */
.review-drop{position:relative;display:block;border:2px dashed var(--input-border);border-radius:14px;
  background:var(--surface);padding:18px 16px;text-align:center;cursor:pointer;margin-top:6px}
.review-drop:hover,.review-drop:focus-within{border-color:var(--coral)}
.review-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.review-drop-in{display:flex;flex-direction:column;gap:4px}
.review-drop-in strong{font-family:var(--display);font-size:15px;color:var(--ink)}
.review-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.review-thumb{position:relative;margin:0;width:76px;height:76px;border-radius:12px;overflow:hidden;
  border:1px solid var(--water-border);background:var(--stripe)}
.review-thumb img{width:100%;height:100%;object-fit:cover}
.review-thumb-x{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;
  border:none;background:rgba(20,32,40,.72);color:#FFF;font-size:15px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0}
.review-thumb-x:hover{background:rgba(20,32,40,.92)}

/* ---------- complete on WhatsApp ----------
   Sits in the off site payment panel. Given real prominence on purpose: with
   the details not on screen, this is the only thing on the page that moves the
   order forward, and everything else is a wait. WhatsApp green rather than the
   site coral, because people recognise the button before they read it. */
.pay-wa{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--water-border);border-radius:18px;
  padding:20px 22px;margin:20px 0 4px}
.pay-wa-text{display:flex;flex-direction:column;gap:4px;flex:1 1 18rem;min-width:0}
.pay-wa-text strong{font-family:var(--display);font-size:16px;color:var(--ink)}
.btn-wa{display:inline-flex;align-items:center;gap:9px;background:#25D366;color:#0B2E17;
  border:1.5px solid #1EBE5B;flex-shrink:0}
.btn-wa:hover{background:#1EBE5B;color:#04220F}
.btn-wa svg{flex-shrink:0}
@media (max-width:560px){
  .pay-wa{flex-direction:column;align-items:stretch}
  /* Full width, because on a phone this is the button they came to press. */
  .btn-wa{justify-content:center;width:100%}
}

/* ---------- receipt upload ---------- */
.receipt-form{margin:20px 0 10px;max-width:44rem}
.receipt-drop{position:relative;display:block;border:2px dashed var(--water-border);border-radius:18px;
  background:var(--surface);padding:26px 22px;text-align:center;cursor:pointer;margin-bottom:16px}
.receipt-drop:hover,.receipt-drop:focus-within{border-color:var(--coral);background:#FFF}
.receipt-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.receipt-drop-in{display:flex;flex-direction:column;gap:6px}
.receipt-drop-in strong{font-family:var(--display);font-size:16px;color:var(--ink);word-break:break-word}
.receipt-preview{display:block;max-width:280px;max-height:320px;width:auto;border-radius:14px;
  border:1px solid var(--water-border);margin-bottom:16px;object-fit:contain;background:var(--surface)}
.receipt-form .field{margin-bottom:16px}
.receipt-done p:first-child{font-size:17px}
@media (max-width:640px){
  .pay-now{padding:18px 16px}
  /* Stacked, because a BSB next to its own label in two narrow columns wraps
     into something you would not want to read a number out of. */
  .pay-details{grid-template-columns:1fr;gap:4px}
  .pay-details dd{margin-bottom:10px}
  .receipt-preview{max-width:100%}
}


/* ---------- split band ----------
   Was an inline style, which media queries could not override. */
.split-band{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center}
.split-band-start{align-items:start;gap:52px}

/* ---------- mobile nav toggle ---------- */
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--warm-border);background:var(--surface);border-radius:12px;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .18s,opacity .18s}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =====================================================================
   RESPONSIVE
   Desktop first to match the prototype, then tablet and phone.
   Goal: nothing overflows, nothing is cramped, tap targets stay usable.
   ===================================================================== */

/* ---------- tablet, 1024px and below ---------- */
@media (max-width:1024px){
  .wrap{padding-left:24px;padding-right:24px}
  h1{font-size:38px} h2{font-size:32px}
  .hero-inner{min-height:520px}
  .hero h1{font-size:40px}
  .hero p{font-size:17px}
  .hero-stats{gap:36px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .split-band{grid-template-columns:1fr;gap:32px}
  .shop{grid-template-columns:1fr;gap:26px}
  .filters{position:static}
  .filters ul{flex-direction:row;flex-wrap:wrap}
  .filters li a{padding:8px 14px;border:1px solid var(--warm-border)}
  .pdp{grid-template-columns:1fr;gap:30px}
  .pdp h1{font-size:34px}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .checkout,.cart-layout{grid-template-columns:1fr}
  .checkout-summary,.cart-summary{position:static}
  .review-panel{grid-template-columns:1fr;gap:26px}
  .supply-grid{grid-template-columns:1fr}
  .sec{padding-top:56px;padding-bottom:56px}
}

/* ---------- large phone and small tablet, 900px and below ---------- */
@media (max-width:900px){
  /* Seven nav items plus a cart pill will not fit across a phone. */
  .nav-toggle{display:flex}
  .header-inner{gap:14px}
  .site-nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--page);border-bottom:1px solid var(--warm-border);
    padding:8px 24px 18px;margin-left:0;
    box-shadow:0 12px 24px rgba(20,32,40,.08);
  }
  .site-nav.is-open{display:flex}
  .site-nav a{padding:13px 0;border-bottom:1px solid var(--divider)}
  .site-nav a:hover{border-bottom-color:var(--divider)}
  .site-nav a[aria-current=page]{color:var(--coral-dark);border-bottom-color:var(--divider)}
  .nav-cta{justify-content:center;margin-top:12px;border-bottom:none;padding:12px 16px}
  .nav-cta:hover{border-bottom-color:transparent}
}

/* ---------- phone, 760px and below ---------- */
@media (max-width:760px){
  .wrap{padding-left:18px;padding-right:18px}
  h1{font-size:29px;line-height:1.15} h2{font-size:25px} h3{font-size:20px} h4{font-size:18px}
  .lede{font-size:16px}
  p{margin-bottom:14px}

    .logo span{font-size:20px}
  .logo svg{width:34px;height:34px}

  .hero{padding:12px 12px 0}
  .hero-inner{min-height:440px;border-radius:20px}
  .hero-content{padding:0 20px 30px}
  .hero h1{font-size:28px}
  .hero p{font-size:15px;margin-bottom:20px}
  .hero-btns{gap:10px;width:100%}
  .hero-btns .btn{flex:1 1 100%}
  .hero-stats{gap:20px;margin-top:24px}
  .hero-stats .v{font-size:21px}
  .hero-stats .l{font-size:12px}

  .g2,.g3,.g4{grid-template-columns:1fr}
  .grid{gap:16px}
  .promise{grid-template-columns:1fr;gap:18px}
  .steps{grid-template-columns:1fr}
  .morph-row{grid-template-columns:1fr;gap:16px;padding:16px}
  .morph-row .m-media{max-width:100%}
  .bullets{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:26px;padding-top:38px}
  .footer-bar{flex-direction:column;gap:10px}

  .sec{padding-top:40px;padding-bottom:40px}
  .sec-sm{padding-top:28px;padding-bottom:28px}
  .sec-head{margin-bottom:22px;gap:12px}
  .page-head .wrap{padding-top:38px;padding-bottom:38px}
  .page-head h1{font-size:29px}

  /* Buttons go full width so they are easy to hit */
  .btn{padding:14px 22px;font-size:15px;width:100%}
  .btn-sm{padding:11px 18px}
  .cta-slot{flex-direction:column;align-items:stretch;padding:24px 20px;border-radius:18px}
  .cta-slot-actions{flex-direction:column;width:100%}
  .cta-inline{flex-direction:column;gap:10px}
  .link-underline,.link-coral{font-size:14px}

  /* Product page */
  .pdp h1{font-size:26px}
  .pdp-price{font-size:28px}
  .pdp-thumbs{grid-template-columns:repeat(3,1fr);gap:8px}
  .spec div{font-size:13px;gap:12px}
  .card-lg{padding:22px 20px}
  .card-pad{padding:20px}

  /* Forms. 16px inputs stop iOS zooming the page on focus. */
  .field input,.field textarea,.field select{font-size:16px;padding:13px 14px}
  .field-row,.field-row-3{grid-template-columns:1fr;gap:0}
  .checkout-block{padding:20px 18px}
  .checkout-summary,.cart-summary{padding:22px 18px}
  .form-card{padding:20px 18px}
  .newsletter{flex-direction:column}
  .newsletter button{width:100%}
  .review-panel{padding:22px 18px;border-radius:18px}
  .stars-input{flex-wrap:wrap}

  /* Tables scroll rather than stretching the page */
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;font-size:14px}
  .prose h2{font-size:22px;margin-top:32px}
  .prose h3{font-size:18px;margin-top:24px}
  .prose p,.prose li{font-size:15px;line-height:1.7}

  .faq summary{padding:16px 18px;font-size:15px}
  .faq .a{padding:0 18px 18px;font-size:14px}
  .crumbs{font-size:12px}
  .map-embed iframe{height:220px}
  .order-received{padding:28px 20px}
  .cart-line,.checkout-line{grid-template-columns:56px 1fr;gap:12px}
  .cart-line .p-price,.checkout-line .p-price{grid-column:2;text-align:left}
  .cart-thumb{width:56px;height:56px}
  .supply-card{grid-template-columns:1fr}
  .supply-media{width:100%;aspect-ratio:16/9}
  .supply-body{padding:0 18px 18px}
  .lightbox{padding:10px}
}

/* ---------- small phone, 380px and below ---------- */
@media (max-width:380px){
  .wrap{padding-left:14px;padding-right:14px}
  h1{font-size:26px}
  .hero h1{font-size:25px}
  .hero-stats{gap:14px}
  .pdp-thumbs{grid-template-columns:repeat(2,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- colours we do not currently stock ----------
   Listed as text only. A picture card beside an empty morph reads as a broken
   listing, so these get no media. */
.other-colours{margin-top:52px;padding-top:40px;border-top:1px solid var(--warm-border)}
.other-colours > h2{font-size:28px;margin-bottom:12px}
.other-colours > .lede{max-width:68ch;margin-bottom:26px}
.other-colours-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.other-colours-list li{background:var(--page);border:1px solid var(--warm-border);border-radius:18px;padding:22px}
.other-colours-list h3{font-size:19px;margin-bottom:8px}
.other-colours-list p{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:14px}
@media (max-width:1024px){.other-colours-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.other-colours-list{grid-template-columns:1fr}.other-colours{margin-top:34px;padding-top:28px}}

/* ---------- product gallery swiper ---------- */
.pdp-stage{position:relative}
.pdp-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid var(--warm-border);background:rgba(255,255,255,.92);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;backdrop-filter:blur(4px)}
.pdp-nav:hover{background:var(--coral);border-color:var(--coral);color:#FFF}
.pdp-prev{left:12px}
.pdp-next{right:12px}
.pdp-count{position:absolute;right:12px;bottom:12px;background:rgba(20,32,40,.72);color:#FFF;font-size:12px;letter-spacing:.04em;padding:5px 11px;border-radius:999px}
.pdp-dots{display:flex;gap:7px;justify-content:center;margin:12px 0 14px;flex-wrap:wrap}
.pdp-dot{width:8px;height:8px;padding:0;border-radius:999px;border:none;background:var(--water-border);cursor:pointer}
.pdp-dot:hover{background:var(--coral-light)}
.pdp-dot.is-current{background:var(--coral);width:22px}
@media (max-width:760px){
  .pdp-nav{width:38px;height:38px;font-size:20px}
  .pdp-prev{left:8px} .pdp-next{right:8px}
}

/* ---------- form feedback ---------- */
.form-note{margin:12px 0 0;padding:11px 15px;border-radius:12px;font-size:14px;line-height:1.55}
.form-note.is-ok{background:var(--success-bg);color:var(--success-fg)}
.form-note.is-err{background:#F7E7E8;color:#A8474F}
.order-ref{font-size:15px;color:var(--body)}

/* ---------- live chat widget ----------
   Three states on .chat-widget: default (bubble only), .is-open (panel
   showing), .is-open.is-minimized (docked to the header bar only). */
.chat-widget{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.chat-launch{position:relative;width:56px;height:56px;border-radius:999px;border:none;background:var(--coral);color:#FFF;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 20px rgba(20,32,40,.18);flex-shrink:0}
.chat-launch:hover{background:var(--coral-dark)}
.chat-dot{position:absolute;top:4px;right:4px;width:13px;height:13px;border-radius:999px;background:#E5484D;border:2px solid #FFF}
.chat-panel{width:min(360px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--warm-border);border-radius:20px;overflow:hidden;box-shadow:0 12px 40px rgba(20,32,40,.16);display:flex;flex-direction:column;max-height:min(560px,calc(100vh - 120px));transition:max-height .18s ease}
.chat-head{background:var(--ink);color:#FFF;padding:16px 18px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-shrink:0}
.chat-head strong{font-family:var(--display);font-size:16px}
.chat-sub{font-size:12px;color:#A9C2CE;margin-top:2px;line-height:1.5}
.chat-head-btns{display:flex;gap:2px;flex-shrink:0}
.chat-min,.chat-close{background:none;border:none;color:#FFF;line-height:1;cursor:pointer;padding:4px 7px;border-radius:8px;opacity:.85}
.chat-min:hover,.chat-close:hover{opacity:1;background:rgba(255,255,255,.14)}
.chat-min{font-size:20px;padding-bottom:8px}
.chat-close{font-size:22px}
.chat-body{display:flex;flex-direction:column;min-height:0;flex:1}

/* Minimised: only the header bar shows, clickable to reopen. */
.chat-widget.is-minimized .chat-panel{max-height:58px;cursor:pointer}
.chat-widget.is-minimized .chat-body{display:none}
.chat-widget.is-minimized .chat-head{cursor:pointer}

/* Name and email gate, shown once before the log and input appear. */
.chat-gate{padding:20px 18px;display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.chat-gate p{margin:0 0 2px;font-size:13px;line-height:1.6;color:var(--muted)}
.chat-gate label{display:block;font-size:12px;font-weight:600;color:var(--body)}
.chat-gate input{width:100%;margin-top:5px;border:1px solid var(--input-border);border-radius:10px;padding:10px 13px;font-size:14px;background:var(--page)}
.chat-gate button{margin-top:4px;background:var(--coral);color:#FFF;border:none;border-radius:999px;padding:11px 18px;font-family:var(--display);font-weight:700;font-size:14px;cursor:pointer}
.chat-gate button:hover{background:var(--coral-dark)}

.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--page);min-height:200px}
.chat-msg{max-width:82%}
.chat-msg-visitor{align-self:flex-end}
.chat-msg-admin{align-self:flex-start}
.chat-bubble{padding:10px 14px;border-radius:15px;font-size:14px;line-height:1.55}
.chat-msg-admin .chat-bubble{background:var(--surface);border:1px solid var(--warm-border);border-bottom-left-radius:4px}
.chat-msg-visitor .chat-bubble{background:var(--ink);color:#FFF;border-bottom-right-radius:4px}
.chat-form{border-top:1px solid var(--divider);padding:12px;background:var(--surface);flex-shrink:0}
.chat-row{display:flex;gap:8px;align-items:flex-end}
.chat-row textarea{flex:1;border:1px solid var(--input-border);border-radius:12px;padding:10px 13px;font-family:inherit;font-size:14px;resize:none;background:var(--page);max-height:110px}
.chat-row button{background:var(--coral);color:#FFF;border:none;border-radius:999px;padding:11px 18px;font-family:var(--display);font-weight:700;font-size:14px;cursor:pointer;flex-shrink:0}
.chat-row button:hover{background:var(--coral-dark)}
@media (max-width:760px){
  .chat-widget{right:14px;bottom:14px}
  .chat-launch{width:50px;height:50px}
  .chat-panel{max-height:calc(100vh - 90px)}
  .chat-widget.is-minimized .chat-panel{max-height:54px}
  .chat-row textarea,.chat-gate input{font-size:16px}
}

/* ---------- waitlist ---------- */
.wl-available{background:var(--water);border:1px solid var(--water-border);border-radius:14px;padding:15px 18px;font-size:14px;line-height:1.65;color:#4A616D}
.field-label{display:block;font-size:13px;font-weight:600;color:var(--body);margin-bottom:8px}
.wl-morphs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.wl-morph{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--input-border);border-radius:12px;padding:11px 13px;cursor:pointer;background:var(--page)}
.wl-morph:hover{border-color:var(--coral)}
.wl-morph input{margin-top:3px;flex-shrink:0}
.wl-morph input:checked ~ span strong{color:var(--coral-dark)}
.wl-morph span{display:flex;flex-direction:column;gap:1px;font-size:13px}
.wl-morph .a-hint{font-size:11px;color:var(--muted)}
.wl-morph:has(input:checked){border-color:var(--coral);background:var(--surface)}
@media (max-width:760px){.wl-morphs{grid-template-columns:1fr}}