/* ==========================================================================
   WASHED. Design System
   Derived from the WASHED. wordmark (navy #284B73 / sky #A1BFE1 / rose #DF9795).
   Every foreground/background pair below is checked against WCAG AA.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Brand colours, sampled directly from the logo artwork */
  --navy:#284B73;        /* primary. white on navy = 8.96:1 */
  --navy-700:#1C3956;    /* hover / gradient depth */
  --navy-900:#14273B;    /* text on sky and rose surfaces */
  --sky:#A1BFE1;         /* the slab behind the wordmark */
  --sky-200:#D9E6F4;
  --sky-100:#EDF3FA;
  --rose:#DF9795;        /* the blob behind the D. Accent, never body text */
  --rose-700:#9C605F;    /* rose as readable text on light = 4.94:1 */
  --rose-100:#F9E7E6;

  /* Neutrals */
  --paper:#FBF9F6;       /* page ground, warmer than white */
  --white:#FFFFFF;
  --ink:#1E3147;         /* body copy, 12.6:1 on paper */
  --slate:#5A6E85;       /* secondary copy, 4.99:1 on paper */
  --line:#E3EAF3;

  /* Semantic */
  --wa:#25D366;          /* WhatsApp. Always pairs with --navy-900 text */
  --ok:#15803D;
  --danger:#B4251F;

  /* Type */
  --font-display:'Fredoka',ui-rounded,'Segoe UI',system-ui,sans-serif;
  --font-body:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --fs-display:clamp(2.75rem,7vw,4.75rem);
  --fs-h1:clamp(2rem,4.6vw,3rem);
  --fs-h2:clamp(1.55rem,3.2vw,2.15rem);
  --fs-h3:1.125rem;
  --fs-lede:clamp(1.05rem,1.7vw,1.25rem);
  --fs-body:1rem;
  --fs-sm:.875rem;
  --fs-xs:.78rem;

  /* Space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Radius, shadow, motion */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,39,59,.06), 0 2px 8px rgba(20,39,59,.05);
  --sh-2:0 4px 10px rgba(20,39,59,.06), 0 14px 34px rgba(20,39,59,.08);
  --sh-3:0 10px 24px rgba(20,39,59,.09), 0 28px 60px rgba(20,39,59,.11);
  --ease:cubic-bezier(.22,.7,.3,1);
  --dur:.22s;
}

/* --- 2. Base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.65;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
button,input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--rose);outline-offset:2px;border-radius:var(--r-sm);}
::selection{background:var(--sky);color:var(--navy-900);}

/* --- 3. Layout ----------------------------------------------------------- */
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--s5);}
.wrap-narrow{max-width:760px;}
.section{padding-block:clamp(var(--s7),8vw,var(--s9));position:relative;}
.section--tight{padding-block:var(--s7);}
.section--sky{background:var(--sky-100);}
.section--white{background:var(--white);}
.section--navy{background:var(--navy);color:var(--sky-200);}
.section--navy h2,.section--navy h3,.section--navy strong{color:var(--white);}

/* --- 4. Brand devices ---------------------------------------------------- */
/* The skewed slab from behind the wordmark. Use on one or two words, never a
   whole sentence. */
.slab{position:relative;display:inline-block;z-index:0;padding-inline:.16em;}
.slab::before{
  content:"";position:absolute;inset:.12em -.06em .08em -.06em;z-index:-1;
  background:var(--sky);transform:rotate(-1.4deg) skewX(-2.5deg);
  border-radius:3px;
}
.slab--rose::before{background:var(--rose);}
/* The organic blob from behind the D. Decorative only, always aria-hidden. */
.blob{
  position:absolute;z-index:0;pointer-events:none;
  background:var(--rose);opacity:.85;
  border-radius:58% 42% 46% 54% / 46% 52% 48% 54%;
}
.blob--sky{background:var(--sky);}
.blob--soft{opacity:.38;}
/* Hand-drawn underline for emphasis inside body copy. */
.underline-brand{
  background-image:linear-gradient(var(--rose),var(--rose));
  background-repeat:no-repeat;background-size:100% .22em;
  background-position:0 88%;
}

/* --- 5. Typography ------------------------------------------------------- */
.display,h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.08;color:var(--navy);letter-spacing:-.01em;}
.display{font-size:var(--fs-display);font-weight:600;line-height:1.02;}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);font-weight:600;line-height:1.3;}
.kicker{
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--rose-700);
}
.section--navy .kicker{color:var(--sky);}
.lede{font-size:var(--fs-lede);color:var(--slate);line-height:1.6;}
.section--navy .lede{color:var(--sky-200);}
.muted{color:var(--slate);font-size:var(--fs-sm);}
.section-head{text-align:center;max-width:620px;margin-inline:auto;margin-bottom:var(--s7);}
.section-head .kicker{display:block;margin-bottom:var(--s2);}
.section-head .lede{margin-top:var(--s3);}

/* --- 6. Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-display);font-weight:600;font-size:1.0625rem;
  line-height:1;text-decoration:none;cursor:pointer;border:2px solid transparent;
  padding:.95em 1.5em;border-radius:var(--r-pill);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn--primary{background:var(--navy);color:var(--white);box-shadow:var(--sh-2);}
.btn--primary:hover{background:var(--navy-700);box-shadow:var(--sh-3);}
.btn--accent{background:var(--rose);color:var(--navy-900);box-shadow:var(--sh-1);}
.btn--accent:hover{background:#D78B89;box-shadow:var(--sh-2);}
.btn--wa{background:var(--wa);color:var(--navy-900);box-shadow:var(--sh-1);}
.btn--wa:hover{background:#1FBE5B;box-shadow:var(--sh-2);}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--sky);}
.btn--ghost:hover{background:var(--sky-100);}
.section--navy .btn--ghost{color:var(--white);border-color:rgba(255,255,255,.45);}
.section--navy .btn--ghost:hover{background:rgba(255,255,255,.1);}
.btn--block{width:100%;}
.btn--sm{font-size:.9375rem;padding:.7em 1.15em;}

/* --- 7. Surfaces --------------------------------------------------------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s6);box-shadow:var(--sh-1);
}
.card--flush{padding:var(--s5);}
.card--lift{box-shadow:var(--sh-2);}
.panel{
  background:var(--sky-100);border:1px solid var(--sky-200);
  border-radius:var(--r-md);padding:var(--s5);
}
.panel--rose{background:var(--rose-100);border-color:#F0D2D1;}
.pill{
  display:inline-flex;align-items:center;gap:.4em;
  background:var(--sky-100);color:var(--navy);border:1px solid var(--sky-200);
  font-size:var(--fs-sm);font-weight:700;padding:.4em .85em;border-radius:var(--r-pill);
}
.pill--rose{background:var(--rose-100);border-color:#F0D2D1;color:var(--navy-900);}
.pill--solid{background:var(--rose);border-color:var(--rose);color:var(--navy-900);}

/* --- 8. Grid helpers ----------------------------------------------------- */
.grid{display:grid;gap:var(--s5);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;}
.cluster--center{justify-content:center;}

/* --- 9. Forms ------------------------------------------------------------ */
.field{margin-bottom:var(--s4);}
.field > label,.label{
  display:block;font-family:var(--font-body);font-weight:700;font-size:var(--fs-sm);
  color:var(--navy);margin-bottom:.4em;letter-spacing:0;text-transform:none;
}
.input,input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{
  width:100%;padding:.8em 1em;background:var(--white);
  border:1.5px solid var(--line);border-radius:var(--r-md);
  font-size:1rem;color:var(--ink);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.input:hover,input:hover,select:hover,textarea:hover{border-color:var(--sky);}
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(161,191,225,.4);
}
textarea{resize:vertical;min-height:4.5em;}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23284B73' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center;padding-right:2.6em;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
.hint{font-size:var(--fs-xs);color:var(--slate);margin-top:.35em;line-height:1.5;}
.check{
  display:flex;align-items:flex-start;gap:.7em;cursor:pointer;
  font-weight:700;color:var(--ink);font-size:1rem;
}
.check input[type=checkbox]{
  width:1.25em;height:1.25em;flex:none;margin-top:.15em;accent-color:var(--navy);cursor:pointer;
}

/* Quantity stepper */
.stepper{display:flex;align-items:center;justify-content:center;gap:.6em;margin-top:.5em;}
.stepper button{
  width:32px;height:32px;flex:none;display:grid;place-items:center;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--navy);
  cursor:pointer;transition:all var(--dur) var(--ease);line-height:1;
}
.stepper button:hover{border-color:var(--navy);background:var(--sky-100);}
.stepper output,.stepper .qty{
  min-width:1.6em;text-align:center;font-weight:800;color:var(--navy);font-size:1.05rem;
}
.stepper .qty[data-on="1"]{color:var(--rose-700);}

/* Product tile */
.tile{
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:var(--s3);text-align:center;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.tile:hover{border-color:var(--sky);box-shadow:var(--sh-1);}
.tile.is-selected{border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-100);}
.tile img{width:100%;height:120px;object-fit:contain;border-radius:var(--r-sm);}
.tile--tall img{height:168px;}
.tile__name{font-weight:700;font-size:var(--fs-sm);color:var(--ink);margin-top:.5em;line-height:1.3;}
.tile__price{font-size:var(--fs-xs);color:var(--slate);}

/* Disclosure */
.disclosure{border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--white);overflow:hidden;}
.disclosure > summary{
  cursor:pointer;list-style:none;padding:var(--s4) var(--s5);
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--navy);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:var(--sky-100);transition:background var(--dur) var(--ease);
}
.disclosure > summary:hover{background:var(--sky-200);}
.disclosure > summary::-webkit-details-marker{display:none;}
.disclosure > summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--rose-700);}
.disclosure[open] > summary::after{content:"\2013";}
.disclosure__body{padding:var(--s5);}

/* --- 10. Navigation ------------------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(251,249,246,.92);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:72px;}
.nav__logo img{height:40px;width:auto;}
.nav__links{display:flex;align-items:center;gap:var(--s5);}
.nav__links a{
  text-decoration:none;font-weight:600;font-size:.9375rem;color:var(--navy);
  padding-bottom:2px;border-bottom:2px solid transparent;transition:border-color var(--dur) var(--ease);
}
.nav__links a:hover{border-bottom-color:var(--rose);}
.nav__links a.btn{border-bottom:2px solid transparent;}
.nav__links a.btn:hover{border-bottom-color:transparent;}

/* --- 11. Footer ---------------------------------------------------------- */
.footer{background:var(--navy);color:var(--sky-200);padding-block:var(--s8) var(--s6);text-align:center;}
.footer img.footer__logo{height:58px;width:auto;margin:0 auto var(--s5);}
.footer a{color:var(--white);}
.footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s5);margin-bottom:var(--s4);}
.footer__links a{color:var(--sky);text-decoration:none;font-weight:600;font-size:var(--fs-sm);}
.footer__links a:hover{color:var(--white);text-decoration:underline;}
.footer__rule{height:1px;background:rgba(255,255,255,.14);margin-block:var(--s5);}
.footer__fine{font-size:var(--fs-sm);color:var(--sky);}
.footer__pv{font-family:var(--font-display);font-weight:600;color:var(--rose);font-size:1.15rem;margin-top:var(--s4);}

/* --- 12. Responsive ------------------------------------------------------ */
@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .nav__links a:not(.btn){display:none;}
}
@media (max-width:760px){
  .grid-3{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .wrap{padding-inline:var(--s4);}
  .grid-2,.grid-4{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;gap:0;}
  .card{padding:var(--s5);}
  .nav__inner{height:64px;}
  .nav__logo img{height:32px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  .btn:hover{transform:none;}
}