/* Kisun — dark shaded glass, for the shop only.
   ---------------------------------------------------------------------------
   The whole point of glass is that you see something through it. So the page
   underneath is dark and lit from behind, the bars and cards are translucent
   panes over it, and content genuinely passes behind them as you scroll — the
   words go up through the glass rather than vanishing under a solid white bar.

   Everything here is scoped to #store. The Control Centre is a working screen
   and stays exactly as it is: frosted glass is lovely to look at and the wrong
   thing to count parcels through.

   backdrop-filter is not supported everywhere. Every pane therefore also has a
   solid-enough background of its own, so where the blur does not happen the
   page is merely flat rather than unreadable. */

/* ---------------------------------------------------------------------------
   THE PALETTE. Every colour the glass uses is named here and nowhere else, so
   the whole shop can be re-lit by editing this one block.

   September 2026, fifth setting: dark again, and lighter than it was.

   The page went purple, then off-white, then a warm graphite, then light, and
   back. The light one read clearly and looked cheap: on white, frosted glass
   has nothing behind it to frost, so every pane flattens into a plain box and
   the shop stops looking like anything. Dark is what makes the material read.

   The brown that followed was too much of a colour. This one is black — a
   plain neutral black, lifted a couple of steps so it is not the pit that
   #33312e was. Black is what makes glass look like glass: a pane lit from
   behind needs something dark and colourless behind it, and any hue in the
   ground competes with the light caught in the pane.

   The one warm tone stays where it was, in the price and the stars, and now it
   is the only colour on the page.

   The readability work from the light round is kept, because it was never
   really about the background. Small labels — "New", "12–20 days" — were
   disappearing because the greys they were written in were too dim, not
   because the page was dark. They are brighter now, and every word in the shop
   is measured rather than eyeballed.

   One warm tone survives, and only in two places: the rating stars and the
   price. That is the whole point of reserving it — a champagne figure on a
   monochrome page is the thing your eye goes to, and on a shop the price is
   what it should be going to.
   --------------------------------------------------------------------------- */
.kd {
  /* Black, and neutral: no hue at all. Lifted to about 23% lightness, which
     is two steps above the near-black this started at — dark enough to be
     black, light enough that the glass on top of it has somewhere to sit. */
  --kg-ground: #3a3a3a;

  --kg-ink: #fbfaf8;
  --kg-ink-2: #eeebe6;
  /* Brighter than the old #a8a49e. This is the one the small print is written
     in, and the small print is the part that was getting lost. Panes stack —
     a box inside a box is two veils lighter than the ground — so the small
     print has to clear the lightest pane it can land on, not the ground. */
  --kg-faint: #d0ccc5;

  /* Lighter than the ground rather than darker. On a graphite page a pane that
     is darker reads as a hole; one that is lighter reads as glass with light
     caught in it, which is friendlier and is what the frosted look wants. */
  --kg-pane: rgba(255, 255, 255, .085);
  --kg-pane-2: rgba(255, 255, 255, .07);
  --kg-pane-hover: rgba(255, 255, 255, .15);
  --kg-pane-solid: #494949;

  --kg-edge: rgba(255, 255, 255, .17);
  --kg-edge-lit: rgba(255, 255, 255, .30);

  /* the two overlays that lift a control off its pane */
  --kg-veil: rgba(255, 255, 255, .08);
  --kg-veil-2: rgba(255, 255, 255, .15);

  --kg-bar: rgba(44, 44, 44, .8);
  /* Fully opaque, and that is the point of it. This is the bar's stuck state:
     while it was translucent the row of destinations running underneath was
     still legible through it, which made the header look like it was floating
     in the middle of the page rather than sitting on top of it. */
  --kg-bar-2: #2f2f2f;

  --kg-shadow: rgba(0, 0, 0, .45);
  --kg-shadow-soft: rgba(0, 0, 0, .26);

  /* THE ACCENT. Still called --kg-pink because a hundred rules refer to it by
     that name, and renaming them all would be a hundred chances to miss one.
     It is white. If this shop ever takes a colour again, this is the line that
     gives it one. */
  --kg-pink: #ffffff;
  --kg-pink-ink: #ffffff;
  --kg-pink-soft: rgba(255, 255, 255, .14);
  --kg-on-pink: #26241f;

  /* the one warm tone, for the price and the stars, and nothing else */
  --kg-metal: #edd9ac;
  --kg-metal-dim: #a2917a;
}
.kd #store.kg {
  color: var(--kg-ink);
  background: transparent;
}

/* the ground: deep, and lit from behind so the glass has something to hold */
.kd body:has(#store.kg.kg-on) { background: var(--kg-ground); }
.kg-ground {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(255, 255, 255, .11), transparent 62%),
    radial-gradient(900px 560px at 92% 4%, rgba(255, 255, 255, .08), transparent 60%),
    radial-gradient(760px 520px at 50% 108%, rgba(237, 217, 172, .07), transparent 62%),
    var(--kg-ground);
}
.kg-ground i {
  position: absolute; display: block; border-radius: 50%; filter: blur(64px); opacity: .5;
  animation: kgDrift 26s ease-in-out infinite alternate;
}
/* Lighter than the ground, so they read as light caught in the page rather
   than as smudges on it. Raised with the ground when it was lightened. */
.kg-ground i:nth-child(1) { width: 46vw; height: 46vw; left: -8%; top: -10%; background: #6e6e6e; }
.kg-ground i:nth-child(2) { width: 38vw; height: 38vw; right: -6%; top: 14%; background: #5d5d5d; animation-duration: 31s; animation-delay: -7s; }
.kg-ground i:nth-child(3) { width: 34vw; height: 34vw; left: 42%; bottom: -14%; background: #7a7269; animation-duration: 28s; animation-delay: -14s; }
@keyframes kgDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 4%, 0) scale(1.1); }
}
/* a fine grain, so the large flat areas are not banded */
.kg-ground::after {
  content: ''; position: absolute; inset: 0; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.kg-on { position: relative; z-index: 1; }

/* ---------- the pane ---------- */
.kd #store.kg .kg-pane,
.kd #store.kg .nav,
.kd #store.kg .box,
.kd #store.kg .card,
.kd #store.kg .summaryBox,
.kd #store.kg .trust,
.kd #store.kg .footer {
  background: var(--kg-pane);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--kg-edge);
  box-shadow: 0 1px 0 0 var(--kg-edge-lit) inset, 0 22px 50px -28px var(--kg-shadow);
  color: var(--kg-ink);
}
@supports not (backdrop-filter: blur(2px)) {
  .kd #store.kg .kg-pane, .kd #store.kg .nav, .kd #store.kg .box,
  .kd #store.kg .card, .kd #store.kg .summaryBox, .kd #store.kg .trust,
  .kd #store.kg .footer { background: var(--kg-pane-solid); }
}

/* The bar the page scrolls behind.

   It has to be translucent enough to be glass and opaque enough to be a bar.
   At .86 it was neither: the moving row of products passed underneath and you
   could read their names through it, so the header looked like it was sitting
   on top of the shop rather than in front of it. Once the page has moved at
   all, it goes nearly solid — see .ks-scrolled below. At rest, where there is
   nothing behind it yet, it can stay glass. */
.kd #store.kg .nav {
  position: sticky; top: 0; z-index: 60;
  border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
  background: var(--kg-bar);
}
.kd.ks-scrolled #store.kg > .nav,
.ks-scrolled .kd #store.kg > .nav {
  background: var(--kg-bar-2) !important;
  box-shadow: 0 10px 30px -10px var(--kg-shadow-soft);
  border-bottom: 1px solid var(--kg-edge);
}
.kd #store.kg .top { background: var(--kg-bar-2); color: var(--kg-ink-2); border: 0; }

/* ---------- type on glass ---------- */
.kd #store.kg h1, .kd #store.kg h2, .kd #store.kg h3,
.kd #store.kg b, .kd #store.kg .price { color: var(--kg-ink); }
.kd #store.kg p, .kd #store.kg .muted, .kd #store.kg small { color: var(--kg-ink-2); }
.kd #store.kg .muted { color: var(--kg-faint); }
.kd #store.kg a { color: var(--kg-pink); }

/* ---------- controls ---------- */
.kd #store.kg input, .kd #store.kg select, .kd #store.kg textarea,
.kd #store.kg .shopSearch, .kd #store.kg .select {
  background: var(--kg-veil); border: 1px solid var(--kg-edge);
  color: var(--kg-ink);
}
.kd #store.kg input::placeholder, .kd #store.kg textarea::placeholder { color: var(--kg-faint); }
.kd #store.kg input:focus, .kd #store.kg select:focus, .kd #store.kg textarea:focus {
  border-color: var(--kg-pink); outline: 2px solid var(--kg-pink-soft);
  background: var(--kg-veil-2);
}
.kd #store.kg select option { background: #fff; color: var(--kg-ink); }
.kd #store.kg .outline, .kd #store.kg .navbtn, .kd #store.kg .cat,
.kd #store.kg .kf-cat, .kd #store.kg .ke-account-button {
  background: var(--kg-veil); border: 1px solid var(--kg-edge); color: var(--kg-ink);
}
.kd #store.kg .outline:hover, .kd #store.kg .navbtn:hover, .kd #store.kg .cat:hover {
  background: var(--kg-veil-2); border-color: var(--kg-edge);
}
.kd #store.kg .cat.active, .kd #store.kg .kf-cat.active, .kd #store.kg .shopNav button.active {
  background: var(--kg-pink-soft); border-color: rgba(255, 255, 255, .42); color: var(--kg-pink-ink);
}
.kd #store.kg .primary {
  background: var(--kg-pink); border: 0; color: var(--kg-on-pink);
  box-shadow: 0 10px 26px -14px var(--kg-shadow);
}
.kd #store.kg .primary:hover { background: #000000; }

/* ---------- product cards ---------- */
.kd #store.kg .card { border-radius: 20px; overflow: hidden; transition: transform .22s, box-shadow .22s, border-color .22s; }
.kd #store.kg .card:hover {
  transform: translateY(-6px); border-color: var(--kg-edge-lit);
  box-shadow: 0 1px 0 0 var(--kg-edge-lit) inset, 0 30px 60px -26px var(--kg-shadow);
}
.kd #store.kg .pic { background: var(--kg-veil); }
.kd #store.kg .cardInfo { background: transparent; }

/* the hero keeps its picture but sits in glass */
.kd #store.kg .hero { border: 1px solid var(--kg-edge); box-shadow: 0 30px 80px -40px var(--kg-shadow); }
.kd #store.kg .heroText { color: var(--kg-ink); }

/* the moving strip reads as etched into the glass */
.kd #store.kg .kf-marquee {
  background: var(--kg-veil); border-top: 1px solid var(--kg-edge);
  border-bottom: 1px solid var(--kg-edge);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.kd #store.kg .kf-marquee span { color: var(--kg-ink-2); }
.kd #store.kg .kf-marquee i { color: var(--kg-pink); }

/* notes, chips and stars */
.kd #store.kg .note, .kd #store.kg .ks-chip, .kd #store.kg .journeyStep {
  background: var(--kg-veil); color: var(--kg-ink-2); border: 1px solid var(--kg-edge);
}
.kd #store.kg .journeyStep.active { background: var(--kg-pink-soft); color: var(--kg-pink-ink); border-color: rgba(255, 255, 255, .4); }
.kd #store.kg .ks-star-on { color: var(--kg-metal); }
.kd #store.kg .ks-rate-note { background: var(--kg-veil); color: var(--kg-ink-2); }

/* drawers and sheets over glass */
.kd #store.kg .ks-drawer, .kd #store.kg .sheet {
  background: var(--kg-bar-2);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  border-left: 1px solid var(--kg-edge); color: var(--kg-ink);
}
.kd #store.kg .mobileDock {
  background: var(--kg-bar-2); border-top: 1px solid var(--kg-edge);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.kd #store.kg .mobileDock button { color: var(--kg-faint); }
.kd #store.kg .mobileDock button.active { color: var(--kg-pink); }

/* somebody who has asked for less movement gets less movement */
@media (prefers-reduced-motion: reduce) {
  .kg-ground i { animation: none; }
}

/* ---------- the parade: products moving like the cities ---------- */
.kg-parade { margin: 26px auto 8px; max-width: 1250px; padding: 0 4%; }
.kg-parade-head { margin-bottom: 14px; }
.kg-parade-head h2 {
  margin: 0; font: 400 27px var(--kd-serif, Georgia, serif); letter-spacing: -.01em;
}
.kg-parade-head p { margin: 5px 0 0; font: 500 14.5px var(--kd-sans, system-ui, sans-serif); }
.kg-parade-rail {
  position: relative; overflow: hidden; padding: 4px 0 10px;
  /* fade at both ends so the loop has no visible join */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.kg-parade-run { display: flex; width: max-content; animation: kgParade 46s linear infinite; }
.kg-parade-rail:hover .kg-parade-run,
.kg-parade-run.kg-parade-hold { animation-play-state: paused; }
.kg-parade-still { animation: none !important; }
@keyframes kgParade { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.kg-parade-lane { display: flex; gap: 14px; padding-right: 14px; }
.kg-parade-item {
  flex: 0 0 auto; width: 176px; padding: 10px 10px 13px; text-align: left; cursor: pointer;
  border-radius: 18px; border: 1px solid var(--kg-edge);
  background: var(--kg-pane-2);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 0 var(--kg-edge-lit) inset;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.kg-parade-item:hover, .kg-parade-item:focus-visible {
  transform: translateY(-4px); border-color: rgba(38, 36, 33, .2);
  box-shadow: 0 1px 0 0 var(--kg-edge-lit) inset, 0 20px 40px -20px var(--kg-shadow);
  outline: none;
}
.kg-parade-item:focus-visible { outline: 2px solid var(--kg-pink, #393632); outline-offset: 2px; }
.kg-parade-pic {
  display: block; height: 124px; border-radius: 12px; overflow: hidden;
  background: var(--kg-veil);
}
.kg-parade-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kg-parade-blank { display: block; width: 100%; height: 100%; }
.kg-parade-name {
  display: block; margin-top: 10px; color: var(--kg-ink, #222120);
  font: 600 13.5px/1.35 var(--kd-sans, system-ui, sans-serif);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kg-parade-price {
  display: block; margin-top: 5px; color: var(--kg-pink, #393632);
  font: 700 14px var(--kd-sans, system-ui, sans-serif);
}
@media (max-width: 760px) {
  .kg-parade { padding: 0 14px; }
  .kg-parade-item { width: 148px; }
  .kg-parade-pic { height: 104px; }
  .kg-parade-head h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .kg-parade-run { animation: none; }
  .kg-parade-rail { overflow-x: auto; }
}

/* the category tiles carry their own white in kisu-front.css, so they are
   named here rather than relying on the generic .cat rule */
.kd #store.kg .kf-cat {
  background: var(--kg-pane-2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--kg-edge) !important;
  color: var(--kg-ink) !important;
  box-shadow: 0 1px 0 0 var(--kg-edge-lit) inset;
}
.kd #store.kg .kf-cat:hover { background: var(--kg-pane-hover) !important; border-color: rgba(255, 255, 255, .28) !important; }
.kd #store.kg .kf-cat.active {
  background: var(--kg-pink-soft) !important; border-color: rgba(255, 255, 255, .42) !important; color: var(--kg-pink-ink) !important;
}
.kd #store.kg .kf-cat b, .kd #store.kg .kf-cat span { color: inherit !important; }
.kg-parade-blank {
  display: grid; place-items: center; width: 100%; height: 100%; font-size: 40px;
}

/* ---------------------------------------------------------------------------
   Light boxes left over from the light design.

   These four carried a white or near-white background of their own from the
   stylesheets written for a white page. Under glass, the text on them turned
   light while the box stayed white — white on white, which is not a styling
   nicety, it is a promise, a price and a payment choice that nobody can read.
   Each is named explicitly, because a generic rule would also catch the
   product photos, which are meant to be light.
   --------------------------------------------------------------------------- */
/* The boxes on the product page that paint their own white.

   These were the actual fault behind "the words are not easily seen". Five
   boxes — the delivery panel, the two shipping options, the rating summary and
   each review — carry `background: #fff` from the stylesheets written for a
   white page. Under glass their ink turns light while the box stays white, so
   the shipping price, "12–20 days", "6–10 days" and every review on the page
   were white on white: present, correct, and impossible to read. Changing the
   background could never fix this; only naming them could. */
.kd #store.kg .delivery,
.kd #store.kg .ship,
.kd #store.kg .ks-score,
.kd #store.kg .ks-review {
  background: var(--kg-pane-2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-color: var(--kg-edge) !important;
  color: var(--kg-ink);
}
.kd #store.kg .ship:hover { border-color: var(--kg-edge-lit) !important; background: var(--kg-veil-2) !important; }
.kd #store.kg .ship.selected {
  background: var(--kg-veil-2) !important;
  border-color: var(--kg-pink) !important;
}
.kd #store.kg .ship small,
.kd #store.kg .ks-score > span,
.kd #store.kg .ks-score > small,
.kd #store.kg .ks-review-when,
.kd #store.kg .ks-bar-row { color: var(--kg-ink-2) !important; }
.kd #store.kg .ks-review p { color: var(--kg-ink-2) !important; }
/* the rating bars: a lit track with a champagne fill, not white on white */
.kd #store.kg .ks-bar { background: var(--kg-veil-2) !important; }
.kd #store.kg .ks-bar i { background: var(--kg-metal) !important; }
/* "Verified buyer" is a dark green meant for white paper: 1.2:1 on glass. */
.kd #store.kg .ks-verified { color: #8ad9ad !important; }

/* A pane inside a pane is two white veils lighter than the ground, and the
   small print on it then has to be nearly white to be read. So anything that
   sits *inside* the delivery panel is cut into it rather than laid on top:
   a darker well, not a lighter pane. Same glass, the other direction. */
.kd #store.kg .delivery .note,
.kd #store.kg .delivery .ship {
  background: rgba(0, 0, 0, .16) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.kd #store.kg .delivery .ship:hover {
  background: rgba(0, 0, 0, .1) !important;
  border-color: var(--kg-edge-lit) !important;
}
.kd #store.kg .delivery .ship.selected {
  background: rgba(0, 0, 0, .24) !important;
  border-color: var(--kg-pink) !important;
}

.kd #store.kg .trust > div {
  background: var(--kg-pane-2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-color: var(--kg-edge) !important;
  color: var(--kg-ink);
}
/* The category rail and the sort bar are sticky: products pass underneath
   them, so like the header they have to be bars rather than panes. Translucent,
   you read the product names through them and the bar looks like it is
   floating in the middle of the grid. */
.kd #store.kg .ks-rail-wrap,
.kd #store.kg .ks-toolbar {
  background: var(--kg-bar-2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-color: var(--kg-edge) !important;
  color: var(--kg-ink);
  box-shadow: 0 8px 22px -14px var(--kg-shadow-soft);
}
.kd #store.kg .trust > div b { color: var(--kg-ink); }
.kd #store.kg .trust > div small,
.kd #store.kg .ks-toolbar .muted { color: var(--kg-ink-2); }

/* Ink that was written for a white page and never re-inked for a dark one.
   Each of these was dark-on-dark: technically present, practically invisible.
   The rating number mattered most — a customer looking for how a product was
   rated was being shown a figure they could not read, which is a worse answer
   than showing nothing. */
.kd #store.kg .shopNav button { color: var(--kg-faint); }
.kd #store.kg .shopNav button:hover { background: var(--kg-veil); color: var(--kg-ink); }
.kd #store.kg .shopNav button.active { background: var(--kg-pink-soft); color: var(--kg-pink-ink); }

.kd #store.kg .ks-score-num { color: var(--kg-ink); }
.kd #store.kg .ks-score-count,
.kd #store.kg .ks-stars-none,
.kd #store.kg .ks-count,
.kd #store.kg .ks-toolbar > span,
.kd #store.kg .ks-select > span,
.kd #store.kg .card .stars.ks-card-stars .ks-stars { color: var(--kg-ink-2); }

/* The Filters button keeps its own white pill, so its label keeps dark ink.
   A blanket rule over the toolbar's spans had turned it pale-on-white — the
   same mistake in the opposite direction, made while fixing the first one. */
.kd #store.kg .ks-filter-btn,
.kd #store.kg .ks-filter-btn span { color: #222120; }

/* a field label on a glass pane. Labels on paper are handled by the paper
   layer and must not be caught here, hence the :not(). */
.kd #store.kg .box:not(.kp-paper) label { color: var(--kg-ink-2); }

/* Two surfaces stay dark on purpose, because they sit on a photograph: the
   delivery badge over the hero picture and the collection tiles. Light ink is
   the only thing that reads on them, so the generic type rules above must not
   reach inside — they would paint dark ink onto a dark panel. */
.kd #store.kg .kf-hero-badge,
.kd #store.kg .kf-hero-badge b,
.kd #store.kg .kf-hero-badge span,
.kd #store.kg .kisu-photo-collection,
.kd #store.kg .kisu-photo-collection b,
.kd #store.kg .kisu-photo-collection h3,
.kd #store.kg .kisu-photo-collection span { color: #fff; }
.kd #store.kg .kf-hero-badge small,
.kd #store.kg .kisu-photo-collection small { color: rgba(255, 255, 255, .82); }

/* ---------------------------------------------------------------------------
   The hero.

   Neutral ink, like the rest. The warm line on "delivered to your door" is the
   one place a gradient is still allowed, and it runs white to champagne rather
   than pink to peach.
   --------------------------------------------------------------------------- */
.kd #store.kg .hero {
  background: linear-gradient(120deg, #4a4a4a 0%, #3f3f3f 52%, #343434 100%) !important;
  border: 1px solid var(--kg-edge) !important;
  box-shadow: 0 26px 60px -34px var(--kg-shadow) !important;
}
.kd #store.kg .hero .heroText { color: var(--kg-ink); }
.kd #store.kg .hero h1 { color: var(--kg-ink) !important; }
.kd #store.kg .hero p { color: var(--kg-ink-2) !important; }
.kd #store.kg .hero .heroText .muted { color: var(--kg-metal) !important; }
.kd #store.kg .hero .kf-glow { opacity: .18; mix-blend-mode: screen; }
.kd #store.kg .hero .heroText h1 em {
  background: linear-gradient(96deg, var(--kg-ink) 5%, var(--kg-metal) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* the second hero button is glass against the ink */
.kd #store.kg .kf-ghost-btn {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .09);
  color: var(--kg-ink);
}
.kd #store.kg .kf-ghost-btn:hover {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .16);
}
/* kisu-shop.css paints this button with its own pink and marks it important */
.kd #store.kg .hero .primary,
.kd #store.kg .primary.wide {
  background: var(--kg-pink) !important;
  color: var(--kg-on-pink) !important;
  box-shadow: 0 10px 26px -14px var(--kg-shadow) !important;
}

/* ---------------------------------------------------------------------------
   The price and the rating: the only warm things on the page.
   --------------------------------------------------------------------------- */
.kd #store.kg .price,
.kd #store.kg .kg-parade-price,
.kd #store.kg .total b,
.kd #store.kg .total span:last-child { color: var(--kg-metal); }
.kd #store.kg .ks-star-slot .ks-star:last-child { color: var(--kg-metal); }
.kd #store.kg .ks-star-slot .ks-star:first-child { color: rgba(255, 255, 255, .24); }
.kd #store.kg .ks-bar-row .ks-star { color: var(--kg-metal); }
.kd #store.kg .ks-score-num { color: var(--kg-ink); }

/* The filter button carried a white pill from the light design; on the dark
   ground it was a bright blob, so it becomes a glass chip like its neighbours. */
.kd #store.kg .ks-filter-btn {
  background: var(--kg-veil) !important;
  border: 1px solid var(--kg-edge) !important;
}
.kd #store.kg .ks-filter-btn,
.kd #store.kg .ks-filter-btn span { color: var(--kg-ink); }
.kd #store.kg .ks-filter-btn i {
  background: var(--kg-pink); color: var(--kg-on-pink);
}

/* The mark is now a one-colour SVG drawn for this page, so the CSS filter that
   used to bleach the old pink PNG is gone. Only the size is set here — it can
   afford to be a little larger than the bitmap was, because it no longer goes
   soft when it grows. */
.kd #store.kg img.logo,
.kd #store.kg .logo img {
  height: 34px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: none;
}
/* On a phone the header is already three rows; the lockup drops to the
   monogram alone there, set by the markup rather than by CSS. */
@media (max-width: 760px) {
  .kd #store.kg img.logo,
  .kd #store.kg .logo img { height: 30px; max-width: 70px; }
}

/* ---------------------------------------------------------------------------
   The last of the pink.

   These carried their colour from stylesheets written before the shop went
   monochrome, so a hue sweep of the rendered page found them rather than a
   search of the source: a pale pink search field, a pink cart badge, pink
   promise icons, plum-tinted collection tiles. Named one by one, because a
   blanket rule would also strip the product photographs, which are the only
   thing on this page that is supposed to have colour in it.
   --------------------------------------------------------------------------- */
.kd #store.kg .kd-search {
  background: var(--kg-veil);
  border: 1px solid var(--kg-edge);
  color: var(--kg-ink);
}
.kd #store.kg .kd-search:focus-within {
  background: var(--kg-veil-2);
  border-color: var(--kg-edge-lit);
}
.kd #store.kg .kd-search .shopSearch { color: var(--kg-ink); background: transparent; }
.kd #store.kg .kd-search .shopSearch::placeholder { color: var(--kg-faint); }

/* the cart count: a white disc with the number cut out of it */
.kd #store.kg .count,
.kd #store.kg #cartCount {
  background: var(--kg-pink) !important;
  color: var(--kg-on-pink) !important;
  border: 0;
}

.kd #store.kg .kd-trust-icon {
  color: var(--kg-ink);
  background: var(--kg-veil);
  border-color: var(--kg-edge);
  outline-color: transparent;
}

/* the collection tiles were plum rather than neutral; they stay dark because
   they sit behind photographs, they just stop being purple */
.kd #store.kg .kisu-photo-collection { background: #2b2825; }

/* on the checkout sheet, the payment icons are ink on a pale neutral */
.kd #store.kg .kp-paper .kd-pay-icon,
.kd #store.kg .kp-form .kd-pay-icon {
  background: #f1f1ef;
  color: #17171a;
  border-color: rgba(23, 23, 26, .14);
}

/* The drifting orbs behind the hero headline were pink, lilac and peach. They
   sit at low opacity so they read as light rather than as colour, but low
   opacity is not none — on a monochrome page a faint pink glow is still a
   faint pink glow. They become plain light. */
.kd #store.kg .hero .kf-glow i:nth-child(1) { background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9), transparent 70%); }
.kd #store.kg .hero .kf-glow i:nth-child(2) { background: radial-gradient(circle at 60% 40%, rgba(226, 226, 230, .8), transparent 70%); }
.kd #store.kg .hero .kf-glow i:nth-child(3) { background: radial-gradient(circle, rgba(216, 191, 141, .55), transparent 70%); }

/* The progress steps. Their discs are pseudo-elements, so a scan of the page's
   real elements never sees them — the green tick and the pink "you are here"
   were the last two coloured marks on the page. The tick keeps a green, because
   "done" is worth saying in a colour anyone recognises, but it is muted to a
   deep neutral green; the current step becomes white, like the primary button,
   because that is what "you are here" looks like on this page now. */
.kd #store.kg .journeyStep::before {
  background: var(--kg-veil-2);
  color: var(--kg-ink-2);
  box-shadow: inset 0 0 0 1.5px var(--kg-edge);
}
.kd #store.kg .journeyStep.done { color: var(--kg-ink-2); }
.kd #store.kg .journeyStep.done::before {
  background: #3d6150; color: #fff; box-shadow: none;
}
.kd #store.kg .journeyStep.active::before {
  background: var(--kg-pink); color: var(--kg-on-pink); box-shadow: none;
}
.kd #store.kg .journeyStep:not(:last-child)::after { background: var(--kg-edge); }

/* ---------------------------------------------------------------------------
   The base tokens, re-pointed for the shop only.

   The original design's greys are mauve — #6d6c6b, #8b8a88, and a whole family
   of plum lines. On a page with no colour in it, a mauve breadcrumb is the one
   thing with a hue, and a hue sweep finds it even when the eye nearly doesn't.
   Rather than chase each rule that uses them, the tokens themselves are
   neutralised inside #store. The Control Centre keeps its own, untouched:
   these are redefined on the shop, not on .kd.
   --------------------------------------------------------------------------- */
.kd #store.kg {
  --kd-ink: #f7f6f4;
  --kd-ink-2: #e4e1dc;
  /* These two were #9b9a97 and #8b8a87, and on a dark page that is where a
     breadcrumb and a small label go to die. Raised until they measure. */
  --kd-muted: #dbd7d0;
  --kd-faint: #cfcac3;
  --kd-line: rgba(255, 255, 255, .14);
  --kd-line-2: rgba(255, 255, 255, .2);
  --kd-plum: #303030;
  --kd-plum-2: #3a3a3a;
  --kd-pink: #ffffff;
  --kd-pink-hover: #e6e5e2;
  --kd-pink-ink: #ffffff;
  --kd-pink-soft: rgba(255, 255, 255, .14);
  --kd-pink-bright: #ffffff;
}

/* the same for the shop layer's own accent, which kisu-shop.css spends
   liberally and marks important */
.kd #store.kg {
  --ks-accent: #ffffff;
  --ks-ink: #f7f6f4;
}

/* inside a paper sheet the tokens have to flip back to ink, or a breadcrumb
   printed on white would be white */
.kd #store.kg .kp-paper {
  --kd-ink: #25231f;
  --kd-ink-2: #56534e;
  --kd-muted: #6f6b65;
  --kd-faint: #837f79;
  --kd-line: rgba(37, 35, 31, .12);
  --kd-line-2: rgba(37, 35, 31, .18);
  --ks-ink: #25231f;
}

/* the journey line inside the ticket */
.kd #store.kg .kp-ticket .trackLine .event { border-color: var(--kp-rule); }

/* ---------------------------------------------------------------------------
   White chips that take their ink from a token.

   Re-pointing --kd-ink to a light colour for the shop turns any rule of the
   shape "white background, colour: var(--kd-ink)" into white on white. Two do
   that: the quick-look chip that sits on a product photograph, and the account
   pill in the phone header. Both keep their white, so both are told their ink
   outright rather than inheriting it.
   --------------------------------------------------------------------------- */
.kd #store.kg .ks-quick,
.kd #store.kg .ks-quick span { color: #25231f !important; }

/* The account pill is only white on a phone — on a wider screen it is a glass
   chip on the dark bar and wants light ink. Scoping this to the same
   breakpoint that paints it white is the difference between fixing it and
   simply moving the fault to the other viewport, which is what happened the
   first time this was written. */
@media (max-width: 760px) {
  .kd #store.kg .kd-admin-link.ke-account-button,
  .kd #store.kg .kd-admin-link.ke-account-button span { color: #25231f !important; }
}

/* ---------------------------------------------------------------------------
   The search field.

   Two faults, both visible at a glance once you look: the placeholder was
   thirty characters in a box that fitted fifteen, so it read "Search beauty,
   h" and stopped mid-word; and the input inside the pill kept the generic
   input border, so there was a second pill drawn inside the first.

   The wording is shortened in the markup. Here the input is told it is part of
   the pill rather than a control sitting in one, and the pill is given room to
   grow before anything else in the bar does.
   --------------------------------------------------------------------------- */
.kd #store.kg .kd-search {
  flex: 1 1 260px;
  max-width: 380px;
  min-width: 150px;
  gap: 8px;
}
.kd #store.kg .kd-search .shopSearch {
  background: transparent !important;
  border: 0 !important;
  outline: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  height: 100%;
  min-width: 0;
  flex: 1 1 auto;
  text-overflow: ellipsis;   /* if it ever does run out, it ends in a dot, not a cut letter */
}
.kd #store.kg .kd-search .shopSearch:focus,
.kd #store.kg .kd-search .shopSearch:focus-visible {
  background: transparent !important;
  border: 0 !important;
  outline: none;
}
.kd #store.kg .kd-search:focus-within {
  background: var(--kg-veil-2);
  border-color: var(--kg-edge-lit);
}

/* ---------------------------------------------------------------------------
   Category tiles: photographs, not drawings.

   These were small cartoon icons — a pink lipstick, a purple parcel. Wrong for
   a shop that sells real objects, and the last coloured thing on a monochrome
   page. Each tile is now one of the shop's own photographs with the name laid
   over it, which is also what makes a tile worth tapping: you can see what is
   in there before you read it.
   --------------------------------------------------------------------------- */
.kd #store.kg .kf-cat {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  min-height: 132px;
  border-radius: 16px !important;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.kd #store.kg .kf-cat .kf-cat-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  margin: 0;
  width: auto;
  height: auto;
}
.kd #store.kg .kf-cat .kf-cat-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* held back a little so white type reads over any photograph, and lifted on
     hover so the tile feels like a door rather than a label */
  filter: brightness(.66) saturate(.95);
  transform: scale(1.02);
  transition: filter .25s, transform .35s;
}
.kd #store.kg .kf-cat:hover .kf-cat-photo,
.kd #store.kg .kf-cat:focus-visible .kf-cat-photo {
  filter: brightness(.78) saturate(1);
  transform: scale(1.07);
}
/* a category the owner has not given a picture yet */
.kd #store.kg .kf-cat .kf-cat-blank {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(140deg, #4a4742, #2f2d2a);
}
/* the scrim: without it a name can land on a pale part of a photograph */
.kd #store.kg .kf-cat::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 19, 17, .12) 30%, rgba(20, 19, 17, .82) 100%);
}
.kd #store.kg .kf-cat .kf-cat-name {
  position: relative;
  z-index: 2;
  padding: 12px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.kd #store.kg .kf-cat.active {
  box-shadow: 0 0 0 2px var(--kg-pink) inset;
}
.kd #store.kg .kf-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 12px;
}
@media (max-width: 760px) {
  .kd #store.kg .kf-cats { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .kd #store.kg .kf-cat { min-height: 108px; }
  .kd #store.kg .kf-cat .kf-cat-name { font-size: 13px; padding: 10px 11px; }
}

/* The name wraps rather than being cut off. "Fashion & Accessories" was
   arriving as "Fashion & Accessorie" — a clipped word reads as a bug, and on a
   tile the name is the only thing telling you what the picture is. */
.kd #store.kg .kf-cat .kf-cat-name {
  white-space: normal;
  overflow-wrap: anywhere;
  width: 100%;
}

/* "All" has no photograph of its own and should not borrow one, because a
   category picture is a promise about what is inside. Four of the shop's own
   pictures, quartered, say "everything" without claiming to be any of them. */
.kd #store.kg .kf-cat .kf-cat-blank {
  background:
    url('/store/images/makeup.jpg') left top / 50% 50% no-repeat,
    url('/store/images/hair-portrait-pexels.jpg') right top / 50% 50% no-repeat,
    url('/store/images/catalog-tote.jpg') left bottom / 50% 50% no-repeat,
    url('/store/images/catalog-hoops.jpg') right bottom / 50% 50% no-repeat,
    #2f2d2a;
  filter: brightness(.6) saturate(.9);
  transition: filter .25s;
}
.kd #store.kg .kf-cat:hover .kf-cat-blank { filter: brightness(.72) saturate(1); }

/* ---------------------------------------------------------------------------
   The sign-in door.

   It sits outside #store — it is a fixed overlay on the body — so the shop's
   own scoping never reaches it, and every re-lighting of the shop has to be
   repeated here by hand. It has been missed twice that way. When the palette
   above changes, this block changes with it.
   --------------------------------------------------------------------------- */
.kd .ke-door {
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(255, 255, 255, .10), transparent 62%),
    radial-gradient(760px 480px at 88% 6%, rgba(255, 255, 255, .07), transparent 60%),
    radial-gradient(640px 440px at 50% 110%, rgba(237, 217, 172, .10), transparent 62%),
    var(--kg-ground, #413830);
}

.kd .ke-door-card {
  width: min(430px, 100%);
  padding: 34px 32px 26px !important;
  border-radius: 20px;
  background: rgba(255, 255, 255, .085) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--kg-edge, rgba(255, 255, 255, .15)) !important;
  box-shadow: 0 1px 0 0 var(--kg-edge-lit, rgba(255, 255, 255, .28)) inset,
              0 40px 80px -40px rgba(0, 0, 0, .8) !important;
  color: var(--kg-ink, #fbfaf8);
  text-align: left;
}
@supports not (backdrop-filter: blur(2px)) {
  .kd .ke-door-card { background: #4f4b47 !important; }
}

.kd .ke-door-card img {
  width: auto !important;
  height: 52px !important;
  display: block;
  margin: 0 0 18px;
}
.kd .ke-door-card h1 {
  margin: 0 0 6px;
  font-size: 27px;
  line-height: 1.2;
  color: var(--kg-ink, #fbfaf8);
  text-align: left;
}
.kd .ke-door-card > p[data-blurb] {
  margin: 0 0 20px;
  color: var(--kg-ink-2, #e3e0db);
  font-size: 14.5px;
  text-align: left;
}

.kd .ke-door-card label {
  display: block;
  margin-top: 14px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kg-faint, #c2beb7);
}
.kd .ke-door-card input {
  width: 100%;
  margin-top: 7px;
  min-height: 50px;
  padding: 0 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .09) !important;
  border: 1px solid var(--kg-edge, rgba(255, 255, 255, .17)) !important;
  color: #fff !important;
  font-size: 16px;   /* 16px or more, or iOS zooms the page on focus */
  text-transform: none;
  letter-spacing: normal;
}
.kd .ke-door-card input::placeholder { color: rgba(255, 255, 255, .45); }
.kd .ke-door-card input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, .6) !important;
  background: rgba(255, 255, 255, .14) !important;
}

.kd .ke-door-card .ke-big-btn {
  width: 100%;
  margin-top: 22px;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--kg-pink, #ffffff) !important;
  color: var(--kg-on-pink, #26241f) !important;
  font-weight: 700;
  font-size: 15.5px;
  cursor: pointer;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .9);
  transition: background .15s, transform .12s;
}
.kd .ke-door-card .ke-big-btn:hover { background: #000000 !important; }
.kd .ke-door-card .ke-big-btn:active { transform: translateY(1px); }

.kd .ke-door-card .ke-door-hint,
.kd .ke-door-card .ke-door-msg { color: var(--kg-faint, #c2beb7); font-size: 13px; }
.kd .ke-door-card .ke-door-msg:not(:empty) {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .1); color: #ffd9d2;
}

.kd .ke-door-card .ke-test-logins {
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--kg-edge, rgba(255, 255, 255, .17));
}
.kd .ke-door-card .ke-test-btn {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px !important;
  text-align: left;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid var(--kg-edge, rgba(255, 255, 255, .17)) !important;
  color: #fff !important;
  cursor: pointer;
}
.kd .ke-door-card .ke-test-btn:hover { background: rgba(255, 255, 255, .14) !important; }
.kd .ke-door-card .ke-test-btn b { color: var(--kg-ink, #fbfaf8); display: block; }
.kd .ke-door-card .ke-test-btn span,
.kd .ke-door-card .ke-test-btn small { color: var(--kg-faint, #c2beb7); }

/* the warning about test sign-ins: the one thing here that should not be quiet */
.kd .ke-door-card .ke-test-logins > p:last-child,
.kd .ke-door-card .ke-test-warn {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid var(--kg-metal, #edd9ac);
  background: rgba(237, 217, 172, .12);
  color: var(--kg-metal, #edd9ac) !important;
  font-size: 12.5px;
  line-height: 1.5;
}

.kd .ke-door-card .ke-door-swap { margin-top: 20px; color: var(--kg-ink-2, #e3e0db); font-size: 14px; }
.kd .ke-door-card .ke-door-swap button,
.kd .ke-door-card .ke-door-back {
  background: none; border: 0; cursor: pointer;
  color: var(--kg-ink, #fbfaf8); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; font-size: 14px;
}
.kd .ke-door-card .ke-door-back {
  display: block; width: 100%; margin-top: 16px;
  color: var(--kg-faint, #c2beb7); font-weight: 500; text-decoration: none;
}
.kd .ke-door-card .ke-door-back:hover { color: var(--kg-ink, #fbfaf8); text-decoration: underline; }

@media (max-width: 760px) {
  .kd .ke-door-card { padding: 26px 22px 20px !important; border-radius: 18px; }
  .kd .ke-door-card img { height: 44px !important; }
  .kd .ke-door-card h1 { font-size: 23px; }
}

/* the heading over the one-tap buttons kept the old mauve */
.kd .ke-door-card .ke-test-logins > p:first-child,
.kd .ke-door-card .ke-test-logins > b,
.kd .ke-door-card .ke-test-logins > div:first-child {
  color: var(--kg-ink-2, #d5d2cd) !important;
  font-weight: 600;
  font-size: 13px;
}

/* =====================================================================
   More glass — September 21.

   The panes are a touch clearer and the frost behind them heavier, and each
   one catches a line of light along its top edge, the way a sheet of glass
   does. The header stays glass when the page moves as well: the earlier
   version went solid once scrolled, because product names could be read
   through it. The frost is now thick enough that they cannot, and the
   backdrop is dimmed as it is blurred, so the white words on the bar keep
   their contrast whatever passes underneath.
   ===================================================================== */
.kd #store.kg {
  --kg-pane: rgba(255, 255, 255, .075);
  --kg-edge: rgba(255, 255, 255, .2);
  --kg-edge-lit: rgba(255, 255, 255, .38);
}
.kd #store.kg .nav,
.kd #store.kg .box,
.kd #store.kg .card,
.kd #store.kg .summaryBox,
.kd #store.kg .trust {
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 46%);
}
.kd #store.kg > .nav,
.kd.ks-scrolled #store.kg > .nav,
.ks-scrolled .kd #store.kg > .nav {
  background: rgba(40, 40, 40, .56) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0)) !important;
  -webkit-backdrop-filter: blur(34px) saturate(170%) brightness(.66);
  backdrop-filter: blur(34px) saturate(170%) brightness(.66);
  border-bottom: 1px solid var(--kg-edge);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .12) inset, 0 14px 34px -14px rgba(0, 0, 0, .5);
}
.kd #store.kg .ks-rail-wrap,
.kd #store.kg .ks-toolbar {
  background: rgba(40, 40, 40, .5) !important;
  -webkit-backdrop-filter: blur(30px) saturate(170%) brightness(.7);
  backdrop-filter: blur(30px) saturate(170%) brightness(.7);
  border: 1px solid var(--kg-edge);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .12) inset;
}
@supports not (backdrop-filter: blur(2px)) {
  .kd #store.kg > .nav, .kd #store.kg .ks-rail-wrap, .kd #store.kg .ks-toolbar { background: #2f2f2f !important; }
}

/* Out of the way going down the page — on every screen now, not only a
   phone — and back the moment you scroll up or reach for the top. The rail
   and the sort bar slide up into the room it leaves. */
.kd #store > .nav { transition: transform .28s ease, background .22s ease, box-shadow .22s ease; }
.kd #store > .nav.ks-hide { transform: translateY(-101%); box-shadow: none; }
.ks-rail-wrap, .ks-toolbar { transition: top .28s ease; }
@media (max-width: 760px) { .ks-rail-wrap { top: var(--ks-head, 0px); } }

/* =====================================================================
   Product photos fill their glass frame.

   The frames used to be painted white and the photo sat inside them with a
   white margin all round. Now the photo — with its own background, nothing
   cut out — fills the frame edge to edge, the way the tiles on the Kisun
   catalogue do, and the glass shows only as the frame's edge.
   ===================================================================== */
.kd #store.kg .pic,
.kd #store.kg .productImage,
.kd #store.kg .galleryThumb,
.kd #store.kg .mini,
.kd #store.kg .ks-thumb,
.kd #store.kg .ks-quick-art {
  background: rgba(255, 255, 255, .06) !important;
  overflow: hidden;
}
.kd #store.kg .productImage {
  padding: 0 !important;
  border: 1px solid var(--kg-edge-lit) !important;
  box-shadow: 0 1px 0 0 var(--kg-edge-lit) inset, 0 30px 60px -30px rgba(0, 0, 0, .6) !important;
}
.kd #store.kg .pic { padding: 0 !important; border-bottom: 1px solid var(--kg-edge) !important; }
.kd #store.kg .galleryThumb { padding: 0 !important; border: 1.5px solid var(--kg-edge) !important; overflow: hidden; }
.kd #store.kg .galleryThumb.active, .kd #store.kg .galleryThumb[aria-current="true"] { border-color: #fff !important; }
.kd #store.kg .pic img,
.kd #store.kg .productImage img,
.kd #store.kg .galleryThumb img,
.kd #store.kg .mini img,
.kd #store.kg .ks-thumb img,
.kd #store.kg .ks-quick-art > img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  padding: 0 !important; margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  filter: none !important;
}

/* On a phone the rail runs the full width of the screen, as one strip of
   glass, rather than a box that stops short of the right-hand edge. */
@media (max-width: 760px) {
  .kd #store.kg .ks-rail-wrap {
    margin-inline: -16px !important; padding-inline: 16px !important;
    width: calc(100% + 32px) !important; max-width: none !important;
    border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important;
  }
}

/* =====================================================================
   The basket page: every word and every figure bright.

   The basket rows had been painted white by an older layer while their
   words were white too, so names, prices and the quantity could not be
   read at all. The rows are glass now, like the product cards, with the
   name, the price and the quantity in white. The totals are a receipt
   (see kisu-paper.css).
   ===================================================================== */
.kd #store.kg #cartPage .cartItem {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid var(--kg-edge) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 0 var(--kg-edge-lit) inset, 0 20px 40px -26px rgba(0, 0, 0, .6) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  color: #fff !important;
  align-items: center;
}
.kd #store.kg #cartPage .cartItem b { color: #fff !important; font-size: 16px; font-weight: 800; }
.kd #store.kg #cartPage .cartItem > div:last-child b { font-size: 18px; font-variant-numeric: tabular-nums; }
.kd #store.kg #cartPage .cartItem .muted { color: #e8e5e0 !important; font-size: 13.5px; }
.kd #store.kg #cartPage .cartItem .qty {
  display: inline-flex; align-items: center; gap: 12px;
  color: #fff !important; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.kd #store.kg #cartPage .cartItem .qty button {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .14) !important; color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .35) !important; font-size: 18px; font-weight: 800;
}
.kd #store.kg #cartPage .cartItem .qty button:last-child {
  width: auto; height: auto; border-radius: 8px; border: 0 !important;
  background: transparent !important; color: #fff !important;
  text-decoration: underline; text-underline-offset: 3px; font-size: 14px;
}
.kd #store.kg #cartPage .cartItem .mini { border-radius: 12px; overflow: hidden; }
@media (min-width: 761px) {
  .kd #store.kg #cart #cartPage .summaryBox { position: sticky; top: calc(var(--ks-head, 64px) + 20px); }
}

/* =====================================================================
   The header: one row. The search box is small until somebody uses it.
   ===================================================================== */
.kd #store > .nav .kd-search { transition: flex-basis .22s ease, max-width .22s ease, width .22s ease; }
.kd #store > .nav .kd-cart { position: relative; }
.kd #store > .nav .kd-cart .kd-icon { width: 23px; height: 23px; }
@media (min-width: 761px) {
  .kd #store > .nav .kd-search { flex: 0 1 230px !important; max-width: 230px !important; }
  .kd #store > .nav .kd-search:focus-within { flex-basis: 460px !important; max-width: 460px !important; }
}
@media (max-width: 760px) {
  .kd #store > .nav {
    flex-wrap: nowrap !important; gap: 8px !important;
    padding: 10px 12px !important; min-height: 64px; position: sticky !important;
  }
  .kd #store > .nav .logo { order: 1; height: 28px !important; }
  .kd #store > .nav .kd-search {
    order: 2; flex: 0 0 44px !important; width: 44px !important; max-width: 44px !important;
    min-width: 0 !important; padding: 0 !important; justify-content: center; cursor: pointer; overflow: hidden;
  }
  .kd #store > .nav .kd-search input { width: 0 !important; min-width: 0 !important; padding: 0 !important; opacity: 0; border: 0 !important; }
  .kd #store > .nav .kd-search:focus-within {
    position: absolute; left: 12px; right: 12px; top: 10px; bottom: 10px; z-index: 5;
    width: auto !important; max-width: none !important; padding: 0 14px !important; justify-content: flex-start;
    background: #2f2f2f !important; border: 1px solid rgba(255, 255, 255, .35) !important;
  }
  .kd #store > .nav .kd-search:focus-within input { width: 100% !important; opacity: 1; padding: 0 0 0 8px !important; }
  .kd #store > .nav .kd-cart { order: 3; margin-left: auto; }
  .kd #store > .nav .kl-pick { order: 4; max-width: 108px; }
  .kd #store > .nav .kl-pick select { font-size: 13px !important; max-width: 86px; }
  .kd #store > .nav .select { order: 5; margin-left: 0 !important; width: 78px; font-size: 13.5px !important; padding-left: 10px !important; }
}

/* the count on the phone bar's basket */
.mobileDock button[data-page="cart"] { position: relative; }
.ks-dock-count {
  position: absolute; top: 2px; left: calc(50% + 6px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #fff; color: #26241f; font: 800 11px/18px system-ui, sans-serif; text-align: center;
}
.ks-dock-count[hidden] { display: none; }

/* the basket that stays pinned when the header slides away */
.ks-basket-pin {
  position: fixed; top: 10px; right: 12px; z-index: 70;
  display: flex; align-items: center; gap: 8px; padding: 6px;
  border-radius: 999px; background: rgba(40, 40, 40, .62);
  -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(.7); backdrop-filter: blur(24px) saturate(170%) brightness(.7);
  border: 1px solid rgba(255, 255, 255, .24); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
  animation: ks-pin-in .22s ease;
}
.ks-basket-pin[hidden] { display: none; }
@keyframes ks-pin-in { from { transform: translateY(-12px); opacity: 0; } }
.ks-pin-basket {
  position: relative; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center;
}
.ks-pin-count {
  position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: #fff; color: #26241f; font: 800 11px/19px system-ui, sans-serif;
}
.ks-pin-checkout {
  min-height: 42px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: #fff; color: #26241f; font: 900 13.5px system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase;
}

/* the basket page's checkout bar, on a phone */
.ks-checkout-bar { display: none; }
@media (max-width: 760px) {
  .ks-checkout-bar:not([hidden]) {
    position: fixed; left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 95;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 18px; border-radius: 20px;
    background: rgba(40, 40, 40, .7); -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(.7); backdrop-filter: blur(24px) saturate(170%) brightness(.7);
    border: 1px solid rgba(255, 255, 255, .24); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .7);
  }
  .ks-cb-total span { display: block; color: #e8e5e0; font: 600 12px system-ui, sans-serif; }
  .ks-cb-total b { color: #fff; font: 900 18px system-ui, sans-serif; font-variant-numeric: tabular-nums; }
  .ks-cb-go {
    min-height: 50px; padding: 0 26px; border-radius: 999px; border: 0;
    background: #fff; color: #26241f; font: 900 15px system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase;
  }
  body.ks-has-checkout-bar #cart { padding-bottom: 90px; }
}

/* =====================================================================
   Coming soon — the rest of the Kisun catalogue
   ===================================================================== */
.ks-coming { margin: 40px 0 10px; }
.ks-coming[hidden] { display: none; }
.ks-coming-head h2 { margin: 0; color: #fff; font-size: clamp(24px, 3vw, 32px); }
.ks-coming-head p { margin: 6px 0 18px; color: #e8e5e0; font-size: 15px; }
.ks-coming-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
@media (max-width: 760px) { .ks-coming-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
.ks-coming-card {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  border-radius: 20px; background: rgba(255, 255, 255, .075); border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .3) inset;
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  transition: transform .18s ease;
}
.ks-coming-card:hover, .ks-coming-card:focus-visible { transform: translateY(-3px); outline: none; }
.ks-coming-pic { aspect-ratio: 1; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.ks-coming-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* no photo yet: a catalogue card on paper, with the name printed on it */
.ks-coming-pic.is-paper { padding: 12px; background: rgba(255, 255, 255, .04); }
.ks-coming-paper {
  height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px 12px;
  background: #fbfbfa; color: #25231f; border-radius: 5px; text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 26px -16px rgba(0, 0, 0, .6);
}
.ks-coming-paper small { font: 800 10.5px system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8a7140; }
.ks-coming-paper b { font: 400 clamp(17px, 2.2vw, 21px)/1.15 Georgia, 'Times New Roman', serif; color: #25231f; }
.ks-coming-paper span { font: 700 9.5px system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #837f79; border-top: 1px dashed rgba(37, 35, 31, .25); padding-top: 8px; }
.ks-coming-info { display: grid; gap: 4px; padding: 12px 14px 14px; }
.ks-coming-info small { color: #e8e5e0; font: 800 11px system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.ks-coming-info b { color: #fff; font: 800 15.5px/1.3 system-ui, sans-serif; }
.ks-coming-price { color: #edd9ac; font: 800 14px system-ui, sans-serif; }
.ks-coming-sheet {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ks-coming-panel {
  position: relative; width: min(560px, 100%); max-height: 86vh; overflow: auto;
  padding: 22px 22px 26px; border-radius: 6px; background: #fbfbfa; color: #25231f;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
}
.ks-coming-panel small { font: 800 11px system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8a7140; }
.ks-coming-panel h3 { margin: 6px 0 10px; font: 400 26px/1.15 Georgia, serif; color: #25231f; }
.ks-coming-panel p { margin: 0 0 12px; font: 500 15px/1.55 system-ui, sans-serif; color: #3f3c37; }
.ks-coming-panel .ks-coming-note { padding: 10px 12px; border-left: 3px solid #25231f; background: #f1efeb; font-weight: 700; color: #25231f; }
.ks-coming-photos { display: flex; gap: 8px; overflow-x: auto; margin: 6px 0 14px; scroll-snap-type: x mandatory; }
.ks-coming-photos img { flex: 0 0 78%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; scroll-snap-align: start; }
.ks-coming-photos img:only-child { flex-basis: 100%; }
.ks-coming-close {
  position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: #25231f; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2;
}
.ks-coming-link {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; margin: 22px 0 0; padding: 16px 20px; border-radius: 18px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .24); color: #fff;
}
.ks-coming-link b { font: 800 16px system-ui, sans-serif; color: #fff; }
.ks-coming-link span { font: 700 14px system-ui, sans-serif; color: #edd9ac; }
.kd #store.kg #cartPage .cartItem .qty { display: flex !important; width: max-content; margin-top: 12px !important; }
/* the pinned basket lives bottom-right, clear of the category strip */
.ks-basket-pin { top: auto; bottom: 24px; right: 20px; }
@keyframes ks-pin-in { from { transform: translateY(12px); opacity: 0; } }
@media (max-width: 760px) {
  .ks-basket-pin { bottom: calc(84px + env(safe-area-inset-bottom)); right: 12px; }
  .ks-toast { bottom: calc(150px + env(safe-area-inset-bottom)) !important; }
}
.mobileDock button[data-page="cart"] .ks-dock-count {
  display: block; color: #26241f !important; background: #fff !important;
  font: 800 11px/18px system-ui, sans-serif !important; letter-spacing: 0;
}
.mobileDock button[data-page="cart"] .ks-dock-count[hidden] { display: none; }
@media (max-width: 760px) { .kd #store > .nav .kd-search:focus-within { z-index: 30 !important; } }
/* ink on the paper tiles, stronger than the page's white-text rules */
.kd #store.kg .ks-coming-paper b { color: #25231f !important; }
.kd #store.kg .ks-coming-paper small { color: #7a6337 !important; }
.kd #store.kg .ks-coming-paper span { color: #5f5b55 !important; }
.kd #store.kg .ks-coming-info b { color: #fff !important; }
.kd #store.kg .ks-coming-info small { color: #ece9e4 !important; }
.kd #store.kg .ks-coming-price { color: #edd9ac !important; }
@media (max-width: 760px) { .kd #store > .nav:focus-within .kd-cart .count, .kd #store > .nav:focus-within #cartCount { visibility: hidden; } }

/* =====================================================================
   Coming-soon stock: the same cards as the rest, with a small tag
   ===================================================================== */
.kd #store.kg .ks-soon-card { cursor: pointer; }
.kd #store.kg .ks-soon-pic { position: relative; }
.kd #store.kg .ks-soon-pic .ks-coming-paper { position: absolute; inset: 10px; height: auto; }
.kd #store.kg .ks-soon-tag {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(20, 20, 20, .72); color: #fff !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 800 11px/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .3);
}
.kd #store.kg .ks-soon-card .cardInfo b { color: #fff !important; }
.kd #store.kg .ks-soon-card .cardInfo .muted { color: #ece9e4 !important; }
.kd #store.kg .ks-soon-line {
  margin: 6px 0 0; color: #e4e1dc !important; font: 500 13.5px/1.45 system-ui, sans-serif;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ks-coming-photo-note { margin: -6px 0 12px !important; font: 600 12.5px system-ui, sans-serif !important; color: #6b675f !important; }

/* the home row */
.kd #store.kg .ks-soon-row { margin-top: 34px; }
.kd #store.kg .ks-soon-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.kd #store.kg .ks-soon-head h2 { margin: 0; color: #fff; }
.kd #store.kg .ks-soon-all { border: 0; background: transparent; color: #edd9ac; font: 800 14.5px system-ui, sans-serif; cursor: pointer; }
.kd #store.kg .ks-soon-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 230px); gap: 16px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.kd #store.kg .ks-soon-strip > .card { scroll-snap-align: start; }
@media (max-width: 760px) { .kd #store.kg .ks-soon-strip { grid-auto-columns: 62%; } }

/* =====================================================================
   Shop by category — round pictures with the name under them, the way
   the big shopping apps do it: small enough to see many at once, one tap
   each, names allowed to run to two lines. On a phone the row scrolls
   sideways in two lines, so every category is reachable without a long
   page of big tiles.
   ===================================================================== */
.kd #store.kg #homeCats.kf-cats {
  display: grid !important; gap: 18px 12px !important;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
}
.kd #store.kg #homeCats .kf-cat {
  display: flex !important; flex-direction: column; align-items: center; gap: 8px;
  height: auto !important; min-height: 0 !important; padding: 4px 2px !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible !important;
}
.kd #store.kg #homeCats .kf-cat .kf-cat-art {
  position: relative !important; inset: auto !important; display: block;
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7);
  background: rgba(255, 255, 255, .08);
}
.kd #store.kg #homeCats .kf-cat .kf-cat-photo { width: 100%; height: 100%; object-fit: cover; position: static !important; }
.kd #store.kg #homeCats .kf-cat .kf-cat-art::after { display: none !important; }
.kd #store.kg #homeCats .kf-cat .kf-cat-name {
  position: static !important; padding: 0 !important; background: none !important;
  color: #fff !important; text-align: center; font: 700 13.5px/1.25 system-ui, sans-serif !important;
  text-transform: none !important; letter-spacing: 0 !important; max-width: 110px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kd #store.kg #homeCats .kf-cat:hover .kf-cat-art,
.kd #store.kg #homeCats .kf-cat.active .kf-cat-art { border-color: #fff; transform: translateY(-2px); transition: transform .15s ease; }
@media (max-width: 760px) {
  .kd #store.kg #homeCats.kf-cats {
    grid-template-columns: none !important; grid-auto-flow: column; grid-template-rows: auto auto;
    grid-auto-columns: 84px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity;
    scrollbar-width: none; margin-inline: -16px; padding-inline: 16px;
  }
  .kd #store.kg #homeCats.kf-cats::-webkit-scrollbar { display: none; }
  .kd #store.kg #homeCats .kf-cat { scroll-snap-align: start; }
  .kd #store.kg #homeCats .kf-cat .kf-cat-art { width: 72px; height: 72px; }
  .kd #store.kg #homeCats .kf-cat .kf-cat-name { font-size: 12.5px !important; }
}
.kd #store.kg #homeCats .kf-cat::before,
.kd #store.kg #homeCats .kf-cat::after { display: none !important; content: none !important; }
.kd #store.kg #homeCats .kf-cat { background-image: none !important; }
/* Coming soon: a demo price, clearly labelled */
.ks-demo-price { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 2px; }
.ks-demo-price .price { color: #fff !important; font-weight: 800; font-size: 17px; }
.ks-demo-price small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #e2c58f; }
#home section[hidden] { display: none !important; }