/* Kokanaye - design tokens and base.
   Palette and type lifted from the .dc.html visual spec (Mood B, Bold).
   Frequencies from the spec: #0B3D2E x271, #FFF4E4 x187, #E85D04 x104. */

:root {
  /* colour */
  --kk-green:      #0B3D2E;   /* primary, headings, dark surfaces */
  --kk-green-dark: #0F4A38;
  --kk-green-mid:  #2A5546;   /* body copy on cream */
  --kk-sage:       #9DBFB0;   /* muted copy on green */
  --kk-sage-soft:  #C9DED4;
  --kk-marigold:   #E85D04;   /* accent, CTAs, marquee */
  --kk-rust:       #B14A2B;
  --kk-cream:      #FFF4E4;   /* page ground */
  --kk-cream-2:    #FFF9EF;   /* hover ground */
  --kk-white:      #FFFFFF;
  --kk-sand:       #D8C9AE;
  --kk-line:       #EFE3CE;   /* hairline on cream */
  --kk-line-2:     #F3E4CD;
  --kk-grey:       #7C8A82;   /* muted */
  --kk-success:    #3A7D44;

  /* type */
  --kk-head: 'Bricolage Grotesque', system-ui, sans-serif;
  --kk-body: 'DM Sans', system-ui, sans-serif;

  /* radius */
  --kk-r-pill: 100px;
  --kk-r-lg:   20px;
  --kk-r-md:   18px;
  --kk-r-sm:   12px;

  /* rhythm */
  --kk-gutter: 28px;
  --kk-max:    1400px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kk-cream);
  color: var(--kk-green);
  font-family: var(--kk-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: var(--kk-green); text-decoration: none; cursor: pointer; }
a:hover { color: var(--kk-marigold); }

h1, h2, h3, .kk-head {
  font-family: var(--kk-head);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  text-wrap: pretty;
}

input, textarea, select, button { font-family: var(--kk-body); }
button { cursor: pointer; }
img { max-width: 100%; }

.kk-wrap { max-width: var(--kk-max); padding-inline: var(--kk-gutter); margin-inline: auto; }
.kk-muted { color: var(--kk-green-mid); }

/* ---------- header ---------- */
.kk-header {
  background: var(--kk-green);
  color: var(--kk-cream);
}
.kk-headrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px var(--kk-gutter);
  max-width: var(--kk-max); margin-inline: auto;
}
.kk-logo { display: flex; align-items: center; gap: 12px; color: var(--kk-cream); }
.kk-logo:hover { color: var(--kk-cream); }
.kk-monogram {
  width: 38px; height: 38px; border-radius: var(--kk-r-pill);
  background: var(--kk-marigold); color: var(--kk-cream);
  display: grid; place-items: center;
  font-family: var(--kk-head); font-weight: 800; font-size: 20px;
}
.kk-wordmark { display: block; font-family: var(--kk-head); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; line-height: 1; }
.kk-tagline { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kk-sage); margin-top: 3px; }

.kk-nav { display: flex; gap: 26px; align-items: center; }
.kk-nav a { color: var(--kk-cream); font-size: 15px; font-weight: 500; }
.kk-nav a:hover { color: var(--kk-marigold); }

.kk-headacts { display: flex; align-items: center; gap: 18px; }
.kk-headacts a { color: var(--kk-cream); font-size: 15px; }
.kk-bag {
  background: var(--kk-marigold); color: var(--kk-cream);
  border-radius: var(--kk-r-pill); padding: 9px 18px; font-weight: 700;
}
.kk-bag:hover { color: var(--kk-cream); }

.kk-burger {
  display: none; width: 44px; height: 44px; border-radius: var(--kk-r-sm);
  border: 2px solid var(--kk-cream); background: transparent; color: var(--kk-cream);
  align-items: center; justify-content: center;
}

/* ---------- marquee ---------- */
.kk-marquee {
  background: var(--kk-marigold); color: var(--kk-cream);
  overflow: hidden; white-space: nowrap; padding: 10px 0;
}
.kk-marquee-track {
  display: inline-flex; gap: 40px; padding-right: 40px;
  font-family: var(--kk-head); font-weight: 600; font-size: 14px;
  animation: kk-marquee 26s linear infinite;
}
@keyframes kk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- buttons ---------- */
.kk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--kk-r-pill); padding: 15px 28px;
  font-weight: 700; font-size: 15px; border: 2px solid transparent;
  transition: transform 180ms cubic-bezier(.22,.9,.3,1), background 200ms ease, color 200ms ease, box-shadow 220ms ease;
}
.kk-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(11,61,46,0.18); }
.kk-btn:active { transform: scale(0.97); box-shadow: none; }
.kk-btn-primary { background: var(--kk-green); color: var(--kk-cream); }
.kk-btn-primary:hover { color: var(--kk-cream); }
.kk-btn-accent { background: var(--kk-marigold); color: var(--kk-cream); }
.kk-btn-accent:hover { color: var(--kk-cream); }
.kk-btn-ghost { border-color: var(--kk-green); color: var(--kk-green); background: transparent; }

/* ---------- home hero ---------- */
/* Five slides stacked in one box. src/views/home.php only moves .is-active
   between them - every frame of the motion is here, so a browser that never
   runs that script is simply left on slide one. Hook names are the ones the
   .dc.html spec uses: herowrap / herocopy / heropane / heroimg. */
.kk-hero { border-bottom: 2px solid var(--kk-green); }
[data-herowrap] { display: grid; grid-template-columns: 1fr 1fr; }

[data-herocopy] { position: relative; min-height: min(84vh, 740px); }
[data-heropane] {
  position: absolute; inset: 0;
  padding: clamp(30px, 4.6vw, 60px) clamp(20px, 4vw, 52px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  opacity: 0; visibility: hidden; translate: 0 14px; pointer-events: none;
  /* Copy leaves in 240ms and the next lot waits 260ms, so two headlines are
     never legible on top of each other. translate, not transform, or the
     .kk-btn hover lift inside the pane would be cancelled. */
  transition: opacity 240ms ease, translate 240ms ease, visibility 0ms linear 240ms;
}
[data-heropane].is-active {
  opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto;
  transition: opacity 520ms ease 260ms,
              translate 620ms cubic-bezier(.22,.9,.3,1) 260ms,
              visibility 0ms;
}
.kk-hero-head { font-size: clamp(40px, 5.4vw, 72px); max-width: 15ch; margin-top: 18px; }
.kk-hero-sub {
  color: var(--kk-green-mid); font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.6; max-width: 46ch; margin: 18px 0 0;
}
.kk-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* z-index stays auto here on purpose, so .kk-herobar can lift clear of the
   phone scrim. The price is that everything inside stacks against the scrim
   too, so the whole hero shares one ladder: shots 1/2, phone scrim 4, bar 5. */
[data-heroimg] {
  position: relative; overflow: hidden;
  min-height: min(84vh, 740px); background: var(--kk-green);
}
[data-heroshot] {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover; background-repeat: no-repeat;
  opacity: 0; visibility: hidden;
  /* The outgoing photo holds at full opacity and is covered over. Fading both
     ways at once dips through the green ground and reads as a black flash. */
  transition: opacity 0ms linear 900ms, visibility 0ms linear 900ms;
}
[data-heroshot].is-active {
  opacity: 1; visibility: visible; z-index: 2;
  animation: kk-hero-zoom 9s ease-out both;
  transition: opacity 900ms ease, visibility 0ms;
}
@keyframes kk-hero-zoom { from { scale: 1.08; } to { scale: 1; } }

.kk-herobar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px;
  /* Deep enough at the dots' own height that they stay legible over a bright
     photo - Aso-ebi is shot against pale sky and washed the row out. */
  background: linear-gradient(to top, rgba(11,61,46,0.86), rgba(11,61,46,0.62) 46%, rgba(11,61,46,0));
}
.kk-herodots, .kk-heronav { display: flex; gap: 8px; }
.kk-herodot {
  position: relative; width: 8px; height: 8px; padding: 0; border: 0;
  border-radius: var(--kk-r-pill); background: rgba(255,244,228,0.72);
  transition: width 300ms ease, background 300ms ease;
}
/* An 8px dot is not a tap target, so pad the hit area out invisibly - short of
   the 8px gap, or neighbouring dots start stealing each other's taps. */
.kk-herodot::after { content: ""; position: absolute; inset: -14px -3px; }
.kk-herodot.is-active { width: 26px; background: var(--kk-marigold); }
.kk-heroarrow {
  width: 38px; height: 38px; border-radius: var(--kk-r-pill);
  border: 2px solid rgba(255,244,228,0.72); background: transparent;
  color: var(--kk-cream); font-size: 15px; line-height: 1;
  transition: background 200ms ease, border-color 200ms ease;
}
.kk-heroarrow:hover { background: var(--kk-marigold); border-color: var(--kk-marigold); }
.kk-herodot:focus-visible, .kk-heroarrow:focus-visible {
  outline: 3px solid var(--kk-marigold); outline-offset: 3px;
}

@media (max-width: 960px) {
  /* One full-bleed photo with the copy over it - never a text block stacked on
     an image block. The scrim belongs to [data-herocopy], the container: on
     [data-heropane] it stacks through a crossfade and turns the photo black. */
  [data-herowrap] { display: block; position: relative; }
  [data-heroimg]  { position: absolute; inset: 0; min-height: 0; }
  [data-herocopy] {
    position: relative; z-index: 4; min-height: 560px;
    background: linear-gradient(to top,
      rgba(11,61,46,0.94) 0%, rgba(11,61,46,0.72) 34%,
      rgba(11,61,46,0.14) 66%, rgba(11,61,46,0.34) 100%);
  }
  [data-heropane] { justify-content: flex-end; padding-bottom: 84px; }
  /* The scrim already darkens the foot of the photo; the bar's own gradient on
     top of it stacks to near-solid green and swallows the picture. */
  .kk-herobar { background: none; }
  .kk-hero-head {
    color: var(--kk-cream); font-size: clamp(34px, 9vw, 52px);
    text-shadow: 0 2px 18px rgba(11,61,46,0.5);
  }
  .kk-hero-sub { color: var(--kk-sage-soft); }
  .kk-hero .kk-eyebrow     { background: var(--kk-marigold); }
  .kk-hero .kk-assure      { color: var(--kk-sage-soft); }
  .kk-hero .kk-btn-primary { background: var(--kk-marigold); }
  .kk-hero .kk-btn-ghost   { border-color: rgba(255,244,228,0.6); color: var(--kk-cream); }
}

/* ---------- cards and grids ---------- */
.kk-card {
  background: var(--kk-white); border: 2px solid var(--kk-green);
  border-radius: var(--kk-r-lg); overflow: hidden;
  transition: transform 260ms cubic-bezier(.22,.9,.3,1), box-shadow 260ms ease;
}
.kk-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11,61,46,0.18); }
.kk-card img { transition: transform 620ms cubic-bezier(.22,.9,.3,1); display: block; }
.kk-card:hover img { transform: scale(1.06); }

.kk-pgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }

/* ---------- footer ---------- */
.kk-footer { background: var(--kk-green); color: var(--kk-cream); margin-top: 64px; }
.kk-footgrid {
  display: grid; gap: 28px; padding: 44px var(--kk-gutter) 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  max-width: var(--kk-max); margin-inline: auto;
}
.kk-footer h3 { font-size: 16px; margin-bottom: 12px; color: var(--kk-cream); }
.kk-footer a, .kk-footer p { color: var(--kk-sage); font-size: 14px; line-height: 1.9; display: block; }
.kk-footer a:hover { color: var(--kk-marigold); }
.kk-footbar {
  border-top: 1px solid rgba(255,244,228,0.16);
  padding: 16px var(--kk-gutter); font-size: 13px; color: var(--kk-sage);
  max-width: var(--kk-max); margin-inline: auto;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ---------- phone ---------- */
@media (max-width: 960px) {
  .kk-nav, .kk-headacts .kk-deskonly { display: none; }
  .kk-burger { display: inline-flex; }
  .kk-pgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Wildcard, so the hero crossfade and its slow zoom are covered here too -
     they fall back to the static .is-active state, which is slide one on
     arrival. home.php also stops the hero advancing on its own. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* shop + piece detail */
.kk-search { display: flex; gap: 10px; max-width: 560px; }
.kk-search .kk-field { margin: 0; flex: 1; }

.kk-piece { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding-block: 36px 8px; align-items: start; }
.kk-slider { position: relative; }
.kk-slide { display: none; padding: 0; border: 0; background: none; width: 100%; cursor: zoom-in; }
.kk-slide.is-active { display: block; }
.kk-slide img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--kk-r-lg); display: block; }
.kk-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.kk-thumb { padding: 0; border: 2px solid transparent; border-radius: var(--kk-r-sm); background: none; cursor: pointer; overflow: hidden; }
.kk-thumb.is-active { border-color: var(--kk-green); }
.kk-thumb img { width: 74px; aspect-ratio: 3/4; object-fit: cover; display: block; }

.kk-eyebrow { display: inline-block; background: var(--kk-green); color: var(--kk-cream); border-radius: var(--kk-r-pill); padding: 6px 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kk-eyebrow:hover { background: var(--kk-marigold); color: var(--kk-cream); }
.kk-price { font-family: var(--kk-head); font-weight: 800; font-size: 34px; letter-spacing: -0.03em; margin: 14px 0 4px; }
.kk-field-group { margin-top: 22px; }
.kk-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px,100%),1fr)); gap: 8px; margin-top: 8px; }
.kk-swatch input { position: absolute; opacity: 0; }
.kk-swatch span { display: block; border: 2px solid var(--kk-green); border-radius: var(--kk-r-sm); padding: 10px 12px; background: var(--kk-white); cursor: pointer; }
.kk-swatch small { display: block; color: var(--kk-grey); font-size: 12px; margin-top: 2px; }
.kk-swatch input:checked + span { background: var(--kk-green); color: var(--kk-cream); }
.kk-swatch input:checked + span small { color: var(--kk-sage); }
.kk-swatch input:focus-visible + span { outline: 3px solid var(--kk-marigold); outline-offset: 2px; }
.kk-colours { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.kk-colour { text-align: center; cursor: pointer; }
.kk-colour input { position: absolute; opacity: 0; }
.kk-colour span { display: block; width: 40px; height: 40px; border-radius: 100px; border: 3px solid transparent; box-shadow: inset 0 0 0 2px rgba(11,61,46,.25); }
.kk-colour input:checked + span { border-color: var(--kk-green); }
.kk-colour small { display: block; font-size: 11px; color: var(--kk-grey); margin-top: 4px; }
.kk-assure { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; font-size: 14px; color: var(--kk-green-mid); }
.kk-assure span::before { content: "-  "; color: var(--kk-marigold); font-weight: 700; }

.kk-lightbox { position: fixed; inset: 0; background: rgba(11,61,46,.94); display: grid; place-items: center; z-index: 60; cursor: zoom-out; padding: 32px; }
.kk-lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--kk-r-md); }
.kk-lightbox-close { position: absolute; top: 18px; right: 22px; background: none; border: 0; color: var(--kk-cream); font-size: 40px; line-height: 1; cursor: pointer; }

@media (max-width: 960px) { .kk-piece { grid-template-columns: 1fr; gap: 24px; } }

/* [hidden] loses to an explicit display, so restore it */
.kk-lightbox[hidden] { display: none; }

/* bag, measurements, checkout */
.kk-tick { display:inline-block; background:var(--kk-success); color:var(--kk-cream); border-radius:var(--kk-r-pill); padding:4px 12px; font-size:12px; font-weight:700; margin-right:6px; }
.kk-tick::before { content:"\2713  "; }
.kk-tick-big { width:64px; height:64px; border-radius:var(--kk-r-pill); background:var(--kk-success); color:var(--kk-cream); display:grid; place-items:center; font-size:32px; }
.kk-linkbtn { background:none; border:0; padding:0; font-size:13px; text-decoration:underline; cursor:pointer; color:var(--kk-grey); }
.kk-hint { color:var(--kk-grey); font-size:12px; margin:4px 0 0; line-height:1.4; }
.kk-mgrid-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:16px; padding:18px 20px; }
.kk-sizechip input { position:absolute; opacity:0; }
.kk-sizechip span { display:inline-block; border:2px solid var(--kk-green); border-radius:var(--kk-r-pill); padding:8px 16px; font-size:14px; font-weight:500; background:var(--kk-white); cursor:pointer; }
.kk-sizechip input:checked + span { background:var(--kk-green); color:var(--kk-cream); }
.kk-sizechip input:focus-visible + span { outline:3px solid var(--kk-marigold); outline-offset:2px; }
.kk-payopt { display:block; margin-bottom:10px; }
.kk-payopt input { position:absolute; opacity:0; }
.kk-payopt span { display:block; border:2px solid var(--kk-green); border-radius:var(--kk-r-sm); padding:14px 16px; background:var(--kk-white); cursor:pointer; }
.kk-payopt small { display:block; color:var(--kk-grey); font-size:13px; margin-top:3px; }
.kk-payopt input:checked + span { background:var(--kk-green); color:var(--kk-cream); }
.kk-payopt input:checked + span small { color:var(--kk-sage); }
.kk-demo-note { background:var(--kk-cream); border:2px dashed var(--kk-sand); border-radius:var(--kk-r-sm); padding:12px 14px; font-size:13px; line-height:1.5; color:var(--kk-green-mid); margin-top:12px; }
.kk-next { display:block; padding:12px 0; border-bottom:1px solid var(--kk-line); }
.kk-next:last-child { border-bottom:0; }
.kk-next span { display:block; color:var(--kk-green-mid); font-size:14px; margin-top:3px; }
.kk-measure-field .kk-field { margin-bottom:0; }

/* chat */
.kk-chatwrap { display:grid; grid-template-columns:320px 1fr; gap:18px; align-items:start; }
.kk-row.is-open { background:var(--kk-cream-2); border-left:4px solid var(--kk-marigold); }
.kk-thread { padding:18px 20px; display:flex; flex-direction:column; gap:12px; max-height:460px; overflow-y:auto; }
.kk-bubble { max-width:78%; padding:11px 15px; border-radius:var(--kk-r-md); font-size:15px; line-height:1.5; }
.kk-bubble.theirs { background:var(--kk-green); color:var(--kk-cream); align-self:flex-start; border-bottom-left-radius:4px; }
.kk-bubble.mine { background:var(--kk-line-2); color:var(--kk-green); align-self:flex-end; border-bottom-right-radius:4px; }
.kk-bubble-meta { display:block; font-size:11px; opacity:.72; margin-top:5px; }
.kk-replybar { display:flex; gap:8px; padding:14px 20px; border-top:2px solid var(--kk-green); }
.kk-replybar .kk-field { flex:1; }
.kk-templates { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:0 20px 16px; }
.kk-templates .kk-chip { font-size:13px; padding:6px 12px; }
@media (max-width:960px) { .kk-chatwrap { grid-template-columns:1fr; } }


/* ---------- shared UI primitives (used by both fronts) ---------- */
.kk-linkbtn { background: none; border: 0; padding: 0; color: var(--kk-sage); font-size: 14px; text-decoration: underline; }
.kk-linkbtn:hover { color: var(--kk-marigold); }
.kk-panel { background: var(--kk-white); border: 2px solid var(--kk-green); border-radius: var(--kk-r-lg); overflow: hidden; margin-bottom: 24px; }
.kk-panel > h2 { font-size: 20px; padding: 16px 20px; border-bottom: 2px solid var(--kk-green); }
.kk-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 20px;
  border-top: 1px solid var(--kk-line);
  transition: background 180ms ease, padding-left 200ms ease;
}
.kk-row:first-of-type { border-top: 0; }
.kk-row:hover { background: var(--kk-cream-2); padding-left: 26px; }
.kk-row .grow { flex: 1; min-width: 0; }
.kk-row .name { font-weight: 500; }
.kk-row .sub { color: var(--kk-grey); font-size: 13px; margin-top: 2px; }
.kk-pill { border-radius: var(--kk-r-pill); padding: 5px 12px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }
.kk-field { display: block; width: 100%; padding: 15px 18px; border: 2px solid var(--kk-green); border-radius: var(--kk-r-sm); font-size: 15px; background: var(--kk-white); margin-bottom: 12px; }
.kk-error { background: #FDECE4; border: 2px solid var(--kk-rust); color: var(--kk-rust); border-radius: var(--kk-r-sm); padding: 12px 16px; font-size: 14px; margin-bottom: 14px; }
.kk-chip {
  border: 2px solid var(--kk-green); border-radius: var(--kk-r-pill);
  padding: 8px 16px; font-size: 14px; font-weight: 500; background: var(--kk-white);
}
.kk-chip .n { color: var(--kk-grey); font-weight: 700; margin-left: 4px; }
.kk-chip:hover { background: var(--kk-cream-2); }
.kk-chip.is-active { background: var(--kk-green); color: var(--kk-cream); }
.kk-chip.is-active .n { color: var(--kk-sage); }
.kk-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.kk-kv { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--kk-line); font-size: 15px; }
.kk-kv:last-child { border-bottom: 0; }
.kk-kv span { color: var(--kk-grey); }
.kk-mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px,100%),1fr)); gap: 1px; background: var(--kk-line); }
.kk-measure { background: var(--kk-white); padding: 12px 16px; }
.kk-measure .l { color: var(--kk-grey); font-size: 12px; }
.kk-measure .v { font-family: var(--kk-head); font-weight: 800; font-size: 20px; margin-top: 2px; }
.kk-flash { background: #E7F2EA; border: 2px solid var(--kk-success); color: var(--kk-green); border-radius: var(--kk-r-sm); padding: 12px 16px; font-size: 14px; margin-bottom: 18px; }
.kk-icon.wide { padding: 0 14px; }
.kk-icon:hover { background: var(--kk-green); color: var(--kk-cream); }
.kk-icon[disabled] { opacity: .3; cursor: default; }
.kk-icon[disabled]:hover { background: var(--kk-white); color: var(--kk-green); }
.kk-label { display: block; font-size: 13px; font-weight: 700; margin: 0 0 6px; }
textarea.kk-field { resize: vertical; line-height: 1.55; }

@media (max-width: 960px) { .kk-cols { grid-template-columns: 1fr; } }

/* phone drawer */
.kk-drawer { position:fixed; inset:0; z-index:80; background:var(--kk-green); color:var(--kk-cream); overflow-y:auto; display:flex; flex-direction:column; }
.kk-drawer[hidden] { display:none; }
.kk-drawer-top { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid rgba(255,244,228,.16); }
.kk-drawer-search { padding:16px 20px 4px; }
.kk-drawer-search .kk-field { margin:0; border-color:var(--kk-sage); }
.kk-drawer-links { display:flex; flex-direction:column; padding:8px 20px; }
.kk-drawer-links a { color:var(--kk-cream); font-family:var(--kk-head); font-weight:800; font-size:26px; letter-spacing:-.02em; padding:11px 0; border-bottom:1px solid rgba(255,244,228,.12); }
.kk-drawer-links a:hover { color:var(--kk-marigold); }
.kk-drawer-label { padding:18px 20px 8px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--kk-sage); }
.kk-drawer-collections { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 20px; }
.kk-drawer-collections a { color:var(--kk-cream); background:rgba(255,244,228,.08); border-radius:var(--kk-r-sm); padding:11px 13px; font-size:14px; font-weight:500; }
.kk-drawer-collections a:hover { background:var(--kk-marigold); color:var(--kk-cream); }
@media (min-width: 961px) { .kk-drawer { display:none !important; } }

/* bot view */
.kk-phone { border:2px solid var(--kk-green); border-radius:22px; overflow:hidden; background:var(--kk-cream); }
.kk-phone-bar { display:flex; align-items:center; gap:10px; background:var(--kk-green); color:var(--kk-cream); padding:12px 16px; }
.kk-phone-thread { padding:16px; display:flex; flex-direction:column; gap:10px; max-height:640px; overflow-y:auto; }
.kk-botbtns { display:flex; gap:6px; flex-wrap:wrap; align-self:flex-start; max-width:78%; }
.kk-botbtns span { border:1px solid var(--kk-sage); border-radius:8px; padding:7px 12px; font-size:12px; font-weight:600; background:var(--kk-white); color:var(--kk-green); }

/* ---------- very small phones (320px) ---------- */
@media (max-width: 400px) {
  :root { --kk-gutter: 16px; }
  .kk-headrow { gap: 8px; padding: 12px var(--kk-gutter); }
  .kk-logo { gap: 8px; min-width: 0; }
  .kk-logo > span { min-width: 0; }
  .kk-wordmark { font-size: 17px; }
  .kk-tagline { display: none; }
  .kk-monogram { width: 32px; height: 32px; font-size: 17px; }
  .kk-headacts { gap: 8px; flex: none; }
  .kk-bag { padding: 8px 12px; font-size: 13px; }
  .kk-burger { width: 38px; height: 38px; }
  .kk-btn { padding: 13px 18px; font-size: 14px; }
  .kk-pgrid { gap: 10px; }
}

/* The vendor shell is a grid; without min-width:0 the sidebar refuses to
   shrink below its content and pushes the whole page sideways. */
.kk-vendor > * { min-width: 0; }

/* Footer newsletter.
   The buyer front's spec ends "footer, socials, newsletter" and the site had
   no newsletter and no email input on any of its 37 pages.
   min-width:0 on the field is deliberate: a flex/grid item defaults to
   min-width:auto, which is what forced horizontal scroll at 320px before. */
.kk-news { display: flex; gap: 8px; flex-wrap: wrap; }
.kk-news input[type="email"] {
  flex: 1 1 150px; min-width: 0;
  padding: 10px 14px; font: inherit; font-size: 14px;
  color: var(--kk-cream); background: rgba(255, 244, 228, 0.08);
  border: 1px solid rgba(255, 244, 228, 0.28); border-radius: var(--kk-r-pill);
}
.kk-news input[type="email"]::placeholder { color: var(--kk-sage); opacity: 0.8; }
.kk-news input[type="email"]:focus-visible { outline: 2px solid var(--kk-marigold); outline-offset: 2px; }
.kk-news button {
  flex: none; padding: 10px 20px; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--kk-green); background: var(--kk-marigold);
  border: 0; border-radius: var(--kk-r-pill); cursor: pointer;
}
.kk-news button:hover { background: var(--kk-cream); }
.kk-newsflash {
  background: var(--kk-marigold); color: var(--kk-green);
  font-weight: 700; font-size: 14px; text-align: center;
  padding: 10px var(--kk-gutter);
}

/* Filter / status chips. Lived in vendor.css, but shop, measurements and
   size-guide use them and the buyer front never loads that file - so the chips
   had no display, no gap and no wrap, and rendered on top of one another. */
.kk-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

/* Row actions on a narrow screen.
   .kk-row is image + name + status + buttons on one line, and below about
   560px that stops fitting: .grow collapses until the title breaks one word
   per line, the meta text shatters into fragments, and the buttons run off the
   right edge - Hide cut in half and Edit entirely off screen on the vendor
   catalogue at 320px. Let the row wrap and give the controls their own line. */
@media (max-width: 560px) {
  /* No order: rules here. Reordering only the children I could name put
     every unnamed one - the money block on an order row - at order 0 and
     therefore FIRST, so the amount rendered before the customer name.
     Wrapping alone fixes the overflow and keeps the reading order. */
  .kk-row { flex-wrap: wrap; row-gap: 10px; }
  .kk-row .grow { flex: 1 1 150px; }
  .kk-row form { flex: none; }
  /* The hover nudge shifts a wrapped row enough to reflow it under a finger. */
  .kk-row:hover { padding-left: 20px; }
}