/* WTS base: font, brand tokens, type, buttons. From the Phase 2 prototype (shared/base.css).
   Rules: body text 18px or more, nothing important under 16px, tap targets 48px or more.
   Green is a fill behind navy text only, never text on white. */

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand book 11/2023 */
  --navy: #00005c;            /* text 18.2:1 on white (AAA) */
  --green: #31cb95;           /* fills only: navy on green 8.75:1 (AAA); white on green fails */
  --sunset: #fe9387; --peach: #ffd3a4; --yellow: #f5ea91; --pale-blue: #b8eafd; --sky: #5ec1fa;
  /* Extensions from the prototype */
  --navy-2: #1c1c80;          /* navy hover */
  --green-2: #4fd6a6;         /* green hover, 9.8:1 with navy */
  --mint: #e8f8f1; --mist: #f3f5fb; --sand: #fff7ec;
  --muted: #4a4a80;           /* secondary text 8.1:1 (AAA) */
  --line: #d6d9ea; --line-strong: #6e6e9a;
  --red: #a42a2a;
  --bg: #ffffff; --fg: var(--navy);
  --focus: var(--navy);
  --font: 'Outfit', Arial, Helvetica, sans-serif;
  /* Weights (Eemeli, 26 and 29 Oct: as little bold as possible). Outfit is variable, so 450 is a real step between regular and medium. */
  --fw-h: 500; --fw-m: 450; --fw-strong: 500;
  --t-xs: 1rem; --t-s: 1.0625rem; --t-b: 1.1875rem; --t-l: 1.375rem; --t-xl: 1.75rem; --t-2xl: 2.25rem; --t-3xl: 3rem;
  --radius: 0; --radius-lg: 0; --btn-radius: 0; /* square corners, like the live site */
  --shadow: 0 1px 2px rgba(0, 0, 92, .06), 0 10px 30px rgba(0, 0, 92, .09);
  --maxw: 1240px;
  --admin-bar: 0px;
  color-scheme: light;
}
body.admin-bar { --admin-bar: 32px; }
@media (max-width: 782px) { body.admin-bar { --admin-bar: 46px; } }
@media (max-width: 600px) { body.admin-bar { --admin-bar: 0px; } } /* the admin bar scrolls away there */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: var(--t-b); line-height: 1.6; }
b, strong { font-weight: var(--fw-strong); }
h1, h2, h3, h4 { font-weight: var(--fw-h); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--navy); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.ic { width: 24px; height: 24px; flex: none; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
@media (max-width: 759px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }
[id] { scroll-margin-top: calc(var(--admin-bar) + var(--hd-h, 120px) + 16px); } /* --hd-h: the stuck header, from header.js */

/* Skip link: hidden until it gets keyboard focus */
.skip { position: absolute; left: 16px; top: -100px; z-index: 200; padding: 12px 20px; min-height: 48px; background: var(--navy); color: #fff; font-weight: var(--fw-m); border-radius: var(--btn-radius); --focus: var(--peach); }
.skip:focus { top: 12px; }

/* Buttons: they look like buttons, 52px tall, text always present */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; padding: 0 24px; border: 2px solid transparent; border-radius: var(--btn-radius);
  font: var(--fw-m) var(--t-b)/1.2 var(--font); text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; text-align: center; }
.btn--primary { background: var(--green); color: var(--navy); border-color: var(--green); }
.btn--primary:hover { background: var(--green-2); border-color: var(--green-2); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-2); }
.btn--ghost { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--mist); }
.btn--sm { min-height: 48px; padding: 0 16px; font-size: var(--t-s); }
.btn .ic { width: 22px; height: 22px; }
.btn--text { background: none; border: 0; padding: 12px 4px; min-height: 48px; font: var(--fw-m) var(--t-s)/1.2 var(--font); color: var(--navy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }

/* "Ask an expert": email, chat and phone given equal weight (change 21) */
.ask { display: grid; gap: 12px; padding: 20px; background: var(--mist); border-radius: var(--radius-lg); }
.ask__t { font-weight: var(--fw-m); font-size: var(--t-l); }
.ask__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ask__note { font-size: var(--t-s); color: var(--muted); }
.ask__btns .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } /* "Email info@waterlesstoiletshop.com" on a phone */

.page-fallback { padding-block: 48px; }
.page-fallback h1 { font-size: var(--t-2xl); margin-bottom: 24px; }

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

/* The 45° corner, production's brand mark (Eemeli, 29 Oct): the top-left corner cut off pictures.
   A fixed --cut keeps the angle at 45° whatever the picture's shape. */
.hero__photo, .use img, .use__ph, .pc__media, .art__img, .story__media, .help__img, .showroom__media, .fo-home__media {
  --cut: 28px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.hero__photo, .story__media, .showroom__media, .fo-home__media { --cut: 56px; }
/* Eemeli, 3 Nov: the corner is the theme's signature, so the main buttons carry it too (Add to cart, the
   Product Finder, the main calls to action), the article's top photo always, and part of the boxes: the
   navy, green and photo highlight boxes. A clipped button keeps its focus ring inside its edge. */
.btn--primary, main .single_add_to_cart_button, .wc-proceed-to-checkout .checkout-button, #place_order, a.nav-i--cta::before {
  --cut: 14px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.btn--primary:focus-visible, main .single_add_to_cart_button:focus-visible, .wc-proceed-to-checkout .checkout-button:focus-visible, #place_order:focus-visible { outline: 3px solid var(--navy); outline-offset: -6px; }
a.nav-i--cta::before { border-radius: 0; }
.art-hd__img, .hlbox--navy, .hlbox--navy-blue, .hlbox--dark-blue, .hlbox--green, .hlbox--bright-green, .hlbox-bg {
  --cut: 28px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.art-hd__img { --cut: 48px; }
/* Square corners everywhere: Customer Reviews for WooCommerce draws its boxes rounded */
:is([class^="cr-"], [class*=" cr-"], [class^="ivole"], [class*=" ivole"], [class^="iv-"], [class*=" iv-"]):not(.cr-avatar, .cr-avatar *, .avatar) { border-radius: 0 !important; }