/* Kisun: take the lines out.
   The shop was drawn with a box around everything — a 1px line for every card,
   bar and panel — which is what makes a page feel like a form to fill in rather
   than a shop to look at. This sheet replaces those lines with soft shading,
   lets the bars fade instead of ending on a rule, makes the money summary read
   like a receipt, and takes a size off everything, because it all sat too big.
   Loaded last, so it only softens what is already there. */

#store {
  --soft-tint: rgba(255, 255, 255, .055);
  --soft-tint-2: rgba(255, 255, 255, .085);
  --soft-shadow: 0 18px 40px rgba(0, 0, 0, .22);
  --soft-radius: 18px;
}

/* ---------- no more boxes ---------- */
#store .card,
#store .box,
#store .summaryBox,
#store .cartItem,
#store .ks-soon-card,
#store .option,
#store .pay,
#store .field,
#store .note,
#store .sumrow {
  border-color: transparent !important;
}
#store .card,
#store .ks-soon-card,
#store .cartItem {
  background: linear-gradient(180deg, var(--soft-tint-2), var(--soft-tint)) !important;
  box-shadow: var(--soft-shadow);
  border-radius: var(--soft-radius) !important;
}
/* The paper panels (checkout, basket summary, tracking) keep their own light
   background — their words are dark. Only the ruled border goes. */
#store .box,
#store .summaryBox {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
  border-radius: 20px !important;
}
/* a card's picture should meet its words, not sit in its own frame */
#store .card .pic,
#store .ks-soon-card .pic {
  border-radius: var(--soft-radius) var(--soft-radius) 0 0 !important;
  border: 0 !important;
}

/* ---------- bars fade, they do not end on a rule ---------- */
#store .kisu-livebar,
.kisu-livebar {
  border-bottom: 0 !important;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
#store header,
#store .kd-shop-top,
#store .topbar,
#store .kf-marquee,
#store .kc-site-foot {
  border-bottom-color: transparent !important;
  border-top-color: transparent !important;
}
#store .kf-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
#store .kc-site-foot { box-shadow: 0 -1px 0 rgba(255, 255, 255, .06); }

/* ---------- the money summary reads like a receipt ---------- */
#store .summaryBox,
#store #checkoutSummary {
  font-variant-numeric: tabular-nums;
}
#store .sumrow {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0 !important;
  background-image: linear-gradient(90deg, currentColor 34%, transparent 0);
  background-size: 6px 1px; opacity: .92; background-repeat: repeat-x; background-position: 0 100%;
  opacity: .96;
}
#store .sumrow:last-of-type { background-image: none; }
#store .total {
  border-top: 0 !important;
  margin-top: 10px !important;
  padding-top: 12px !important;
  display: flex; justify-content: space-between; gap: 16px;
  background-image: linear-gradient(90deg, currentColor 40%, transparent 0);
  background-size: 7px 1.5px; background-repeat: repeat-x; background-position: 0 0;
  font-size: 19px !important;
}

/* ---------- a size smaller, everywhere ---------- */
#store { font-size: 15.5px; }
#store h1 { font-size: clamp(30px, 5.4vw, 46px) !important; }
#store h2 { font-size: clamp(22px, 3.4vw, 30px) !important; }
#store h3 { font-size: 18px !important; }
#store .card b, #store .ks-soon-card b { font-size: 15px !important; line-height: 1.3; }
#store .price, #store .card .price { font-size: 17px !important; }
#store .box, #store .summaryBox { padding: 16px 18px !important; }
#store .card .cardInfo, #store .ks-soon-card .cardInfo { padding: 12px 13px 14px !important; gap: 5px !important; }
#store button, #store .btn, #store .primary { font-size: 14.5px !important; }
#store .primary, #store .wide { min-height: 46px !important; }
#store .cat { font-size: 13.5px !important; min-height: 38px !important; padding: 0 14px !important; }
#store .breadcrumbs { font-size: 12.5px !important; opacity: .7; }
#store .wrap { padding-block: 22px !important; }

/* the preview's own step chips: a quiet line of words, not four boxes */
.kisu-livebar .kisu-steps span,
.kisu-steps span {
  border: 0 !important;
  background: transparent !important;
  padding: 0 10px 0 0 !important;
}

/* ---------- the last hard edges ---------- */
#store .hero, #store .kf-hero,
#store .trust,
#store .journeyStep,
#store .kl-notice,
#store .kf-hero-badge,
#store .kd-credits,
#store .categories-note,
#store .kg-parade-item,
#store .kf-cat-art { border-color: transparent !important; }
#store .hero, #store .kf-hero { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important; box-shadow: 0 20px 50px rgba(0,0,0,.2); }
#store .trust { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important; }
#store nav.nav, #store .nav { border-bottom: 0 !important; box-shadow: 0 10px 24px -18px rgba(0,0,0,.8); }
#store .journeyStep { background: rgba(255,255,255,.07) !important; }
#store .journeyStep.active { background: rgba(226,197,143,.22) !important; }
/* buttons and boxes in the bar: a soft tint instead of an outline */
#store .navbtn, #store .kd-search, #store select, #store .select, #store .kf-ghost-btn {
  border-color: transparent !important;
  background: rgba(255,255,255,.08) !important;
}
#store .kd-search:focus-within, #store .navbtn:hover, #store .kf-ghost-btn:hover { background: rgba(255,255,255,.14) !important; }
/* the preview's own progress chips: a row of boxes over the shop, gone */
#store .journeySteps, #store .journeyStep { display: none !important; }

/* ---------- the top bars fade into the page ---------- */
#store nav.nav, #store .nav {
  background: linear-gradient(180deg, rgba(28,26,24,.97) 0%, rgba(28,26,24,.88) 62%, rgba(28,26,24,0) 100%) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 0 !important; box-shadow: none !important;
  padding-bottom: 18px !important;
}
.kisu-livebar, #store .kisu-livebar {
  background: linear-gradient(180deg, rgba(28,26,24,.55), rgba(28,26,24,0)) !important;
  color: #d6d1ca !important; border: 0 !important; padding-bottom: 14px !important;
  -webkit-mask-image: none; mask-image: none;
}

/* ---------- quick look: a sheet that leaves the page showing ---------- */
.ks-modal { align-items: flex-end !important; }
.ks-modal-card {
  width: min(880px, 100%); max-height: 86vh !important; border-radius: 26px 26px 0 0 !important;
  box-shadow: 0 -20px 60px rgba(0,0,0,.45); border: 0 !important; overflow: auto;
}
.ks-modal-card::before {
  content: ""; display: block; width: 44px; height: 4px; border-radius: 99px;
  background: currentColor; opacity: .25; margin: 10px auto 2px; grid-column: 1 / -1;
}
.ks-swipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; scrollbar-width: none; }
.ks-swipe::-webkit-scrollbar { display: none; }
.ks-swipe img { flex: 0 0 100%; scroll-snap-align: center; width: 100%; height: auto; border-radius: 16px; object-fit: cover; }
.ks-swipe-hint { margin: 8px 0 0; text-align: center; font-size: 12.5px; opacity: .7; }
.ks-quick-specs { display: grid; gap: 6px; margin: 12px 0 0; }
.ks-quick-specs div { display: flex; justify-content: space-between; gap: 14px; font-size: 14px;
  background-image: linear-gradient(90deg, currentColor 30%, transparent 0); background-size: 6px 1px;
  background-repeat: repeat-x; background-position: 0 100%; padding-bottom: 6px; }
.ks-quick-specs dt { opacity: .7; }
.ks-quick-specs dd { margin: 0; font-weight: 700; }
.ks-quick-actions { display: grid; gap: 8px; margin-top: 14px; }
.ks-quiet { border: 0; border-radius: 999px; min-height: 46px; background: rgba(255,255,255,.12); color: inherit;
  font: 700 14.5px inherit; cursor: pointer; }
@media (max-width: 760px) { .ks-modal-card { max-height: 84vh !important; } }
/* the hero must not be stretched by what is inside it */
#store .hero, #store .kf-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#store .hero > *, #store .kf-hero > * { min-width: 0; }
#store .heroArt { overflow: hidden; }
@media (max-width: 900px) { #store .hero, #store .kf-hero { grid-template-columns: minmax(0, 1fr); } }

/* ---------- alignment on the shop ---------- */
#store .navbtn, #store .kd-search, #store .cat, #store button, #store .primary, #store .wide {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.1; }
#store .kd-search { padding: 0 14px; }
#store .kd-search input { height: 44px; line-height: 44px; padding: 0; border: 0; background: transparent; }
#store select, #store input[type=text], #store input[type=email], #store input[type=tel], #store input[type=search] {
  min-height: 46px; padding-block: 0; line-height: 46px; }
#store textarea { line-height: 1.5; padding-block: 12px; }
#store .sumrow, #store .total { align-items: baseline; }
#store .card .cardInfo { align-content: start; }
#store .bottomNav a, #store .bottomNav button { display: grid; justify-items: center; gap: 4px; }

/* ---------- the money summary is a piece of paper ----------
   A receipt is a torn strip: paper colour, ink on it, a rough edge at the top
   and another at the bottom. It had a jagged edge underneath and nothing above,
   which is what made it look broken rather than printed. */
#store .kp-receipt,
#store #cartPage .summaryBox,
#store #checkout .box:has(#checkoutSummary) {
  position: relative;
  background: #fdfaf2 !important;
  color: #232019 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 26px 22px 28px !important;
  margin: 12px 0 !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28) !important;
  font-variant-numeric: tabular-nums;
}
#store .kp-receipt::before,
#store #cartPage .summaryBox::before,
#store #checkout .box:has(#checkoutSummary)::before,
#store .kp-receipt::after,
#store #cartPage .summaryBox::after,
#store #checkout .box:has(#checkoutSummary)::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 11px; pointer-events: none;
  background:
    linear-gradient(135deg, #fdfaf2 50%, transparent 50%) 0 0 / 15px 11px repeat-x,
    linear-gradient(225deg, #fdfaf2 50%, transparent 50%) 0 0 / 15px 11px repeat-x;
}
#store .kp-receipt::before,
#store #cartPage .summaryBox::before,
#store #checkout .box:has(#checkoutSummary)::before { top: -11px; transform: scaleY(-1); }
#store .kp-receipt::after,
#store #cartPage .summaryBox::after,
#store #checkout .box:has(#checkoutSummary)::after { bottom: -11px; }

/* the ink on it */
#store .kp-receipt h2, #store .kp-receipt h3,
#store #cartPage .summaryBox h2, #store #cartPage .summaryBox h3,
#store #checkout .box:has(#checkoutSummary) h2,
#store #checkout .box:has(#checkoutSummary) h3 {
  color: #232019 !important;
  font: 800 13px/1.2 inherit !important;
  letter-spacing: .18em; text-transform: uppercase;
  text-align: center; margin: 0 0 4px !important;
}
#store .kp-receipt .kp-strapline { display: block; text-align: center; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #6d675c; margin-bottom: 14px; }
#store .kp-receipt .sumrow, #store #cartPage .summaryBox .sumrow,
#store #checkout .box:has(#checkoutSummary) .sumrow {
  color: #232019 !important; font-size: 14.5px !important; padding: 8px 0 !important;
  background-image: linear-gradient(90deg, #b9b2a4 42%, transparent 0) !important;
  background-size: 5px 1px !important; background-position: 0 100% !important; background-repeat: repeat-x !important;
}
#store .kp-receipt .sumrow span, #store .kp-receipt .sumrow b,
#store #cartPage .summaryBox .sumrow span, #store #cartPage .summaryBox .sumrow b,
#store #checkout .box:has(#checkoutSummary) .sumrow span,
#store #checkout .box:has(#checkoutSummary) .sumrow b { color: #232019 !important; }
#store .kp-receipt .total, #store #cartPage .summaryBox .total,
#store #checkout .box:has(#checkoutSummary) .total {
  color: #232019 !important; margin-top: 12px !important; padding-top: 14px !important;
  font-size: 18px !important; font-weight: 900 !important;
  background-image: linear-gradient(90deg, #232019 46%, transparent 0) !important;
  background-size: 6px 2px !important; background-position: 0 0 !important; background-repeat: repeat-x !important;
}
#store .kp-receipt .total span, #store #cartPage .summaryBox .total span,
#store #checkout .box:has(#checkoutSummary) .total span { color: #232019 !important; }
#store .kp-receipt .muted, #store #cartPage .summaryBox .muted,
#store #checkout .box:has(#checkoutSummary) .muted,
#store .kp-receipt .note, #store #checkout .box:has(#checkoutSummary) .note {
  color: #6d675c !important; background: transparent !important; font-size: 12.5px !important;
  border: 0 !important; padding: 0 !important; margin-top: 10px !important; line-height: 1.55;
}
#store .kp-receipt #kisuExactDelivery, #store #checkout .box:has(#checkoutSummary) #kisuExactDelivery {
  color: #232019 !important; font-size: 13.5px; display: block; margin-top: 10px;
  border-top: 1px dashed #c7c0b1; padding-top: 10px;
}
#store .kp-receipt button.primary, #store #cartPage .summaryBox button.primary,
#store #checkout .box:has(#checkoutSummary) button.primary {
  background: #232019 !important; color: #fdfaf2 !important; border: 0 !important; margin-top: 14px;
}

/* ---------- Hot right now: the picture is the card ----------
   A thin strip of small pictures with a price on a line underneath reads as a
   list. A big photograph with the price written on it reads as a shop window,
   which is what it is. Slower, too — it was moving faster than anybody reads. */
#store .kg-parade-item {
  width: 268px !important; padding: 0 !important; border: 0 !important; overflow: hidden;
  border-radius: 20px !important; background: #1d1c1b !important;
  box-shadow: 0 18px 38px -22px rgba(0, 0, 0, .8) !important;
}
#store .kg-parade-pic {
  position: relative; height: 300px !important; border-radius: 20px !important; overflow: hidden;
}
#store .kg-parade-pic img { width: 100%; height: 100%; object-fit: cover; }
#store .kg-parade-words {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px;
  padding: 48px 14px 14px; text-align: left;
  background: linear-gradient(0deg, rgba(10, 9, 8, .88), rgba(10, 9, 8, .45) 52%, transparent);
}
#store .kg-parade-name {
  margin: 0 !important; color: #fff !important; font-size: 14.5px !important; line-height: 1.35;
  -webkit-line-clamp: 2;
}
#store .kg-parade-price {
  margin: 0 !important; color: #f6e6c6 !important; font-size: 17px !important; font-weight: 800 !important;
  letter-spacing: .01em;
}
#store .kg-parade-run { animation-duration: 96s !important; }
#store .kf-marquee-run { animation-duration: 62s !important; }
#store .kg-parade-head h2 { font-size: 26px !important; }
@media (max-width: 760px) {
  #store .kg-parade-item { width: 214px !important; }
  #store .kg-parade-pic { height: 244px !important; }
}

/* the category tiles: big enough to see what is on that shelf */
#store .kf-cat-art { width: 104px !important; height: 104px !important; }
#store .kf-cat .kf-art, #store .kf-cat-art img { width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center; border-radius: 50%; }
@media (max-width: 760px) { #store .kf-cat-art { width: 84px !important; height: 84px !important; } }

/* ---------- the shop's own bars run the full width ----------
   The category rail and the sort bar sat as rounded boxes in the middle of the
   page, each with two visible ends, which made them look like cards that had
   landed on top of the shop rather than part of it. They are bands now: edge to
   edge, in the same dark glass as the bar at the top, with their words still
   lined up with everything else on the page. */
#store #shop .ks-rail-wrap,
#store #shop .ks-toolbar,
#store #shop .breadcrumbs {
  /* out to both edges, whatever the page's own margins are */
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  /* and the content inside still lines up with the products below */
  /* the words inside still start exactly where the products do */
  max-width: none !important;
  padding-left: max(14px, calc(50vw - 571px)) !important;
  padding-right: max(14px, calc(50vw - 571px)) !important;
  background: linear-gradient(180deg, rgba(28,26,24,.97), rgba(28,26,24,.9)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  color: #e8e3db !important;
}
#store #shop .breadcrumbs {
  padding-top: 10px !important; padding-bottom: 10px !important;
  margin-bottom: 0 !important; font-size: 12.5px !important; opacity: 1 !important;
}
#store #shop .ks-rail-wrap { padding-top: 12px !important; padding-bottom: 12px !important; margin-bottom: 0 !important; }
#store #shop .ks-toolbar {
  padding-top: 12px !important; padding-bottom: 12px !important; margin-bottom: 20px !important;
  box-shadow: 0 14px 26px -22px rgba(0,0,0,.9) !important;
}
#store #shop .ks-toolbar .ks-count { color: #cfc8bb !important; }
#store #shop .ks-toolbar select, #store #shop .ks-toolbar .ks-filter-open {
  background: rgba(255,255,255,.1) !important; color: #f3efe8 !important; border: 0 !important;
}
/* the heading between the bands keeps the page's own margins */
#store #shop .sectionHead { padding-block: 18px 14px; }
@media (max-width: 760px) {
  #store #shop .ks-rail-wrap, #store #shop .ks-toolbar, #store #shop .breadcrumbs {
    padding-left: 14px !important; padding-right: 14px !important;
  }
}

/* ------------------------------------------------------------------ *
 * What is left on the shelf
 *
 * Two labels only. "Only 3 left" is a fact a shopper can act on; a
 * finished thing is stated plainly and the card steps back rather than
 * disappearing, because somebody who wanted it should still be able to
 * see it and ask.
 * ------------------------------------------------------------------ */
.ks-left,
.ks-finished {
  display: inline-block;
  margin: 6px 0 2px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}
.ks-left {
  background: #fdf3e0;
  color: #7a5a1c;
  border: 1px solid #ecd9ae;
}
.ks-finished {
  background: #f1efec;
  color: #6a635b;
  border: 1px solid #e0dbd3;
}
.card.ks-gone .pic,
.card.ks-gone .price {
  opacity: .55;
  filter: saturate(.7);
}
.card.ks-gone button {
  background: transparent;
  color: #6a635b;
  border: 1.5px solid #cfc8bf;
}
.card.ks-gone button:hover {
  background: #f4f1ec;
  color: #1f1c19;
}
.ks-askBtn {
  background: transparent !important;
  color: #1f1c19 !important;
  border: 1.5px solid #cfc8bf !important;
}
@media (prefers-color-scheme: dark) {
  .ks-left { background: #3a2f18; color: #f0d79a; border-color: #5b4a24; }
  .ks-finished { background: #2a2825; color: #bdb6ad; border-color: #3d3a35; }
}

/* ------------------------------------------------------------------ *
 * The "On the shelf" screen
 *
 * Ordered by trouble, so the colour has to carry the same order: what
 * is finished reads red, what is nearly gone reads amber, and what is
 * fine says nothing at all.
 * ------------------------------------------------------------------ */
.ke-stock-tiles { margin: 6px 0 14px; }
.ke-stock-tile {
  flex: 1 1 120px;
  background: #fff;
  border: 1px solid #e6e0d6;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.ke-stock-tile b { font-size: 26px; line-height: 1.1; }
.ke-stock-tile span { font-size: 13px; color: #6f675e; }
.ke-stock-tile.is-bad { border-color: #e6b8ad; background: #fdf3f1; }
.ke-stock-tile.is-warn { border-color: #ecd9ae; background: #fdf8ee; }

.ke-stock-card {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #e6e0d6;
  border-left: 4px solid #d9d3c9;
  border-radius: 14px;
  background: #fff;
  margin-bottom: 10px;
}
.ke-stock-card.is-out_of_stock { border-left-color: #c0553f; }
.ke-stock-card.is-off_shelf { border-left-color: #8a8178; background: #f7f5f2; }
.ke-stock-card.is-low { border-left-color: #d4ae66; }
.ke-stock-card.is-on_shelf { border-left-color: #6f9e77; }
.ke-stock-pic {
  width: 62px; height: 62px; border-radius: 10px; overflow: hidden;
  background: #f3efe9; display: grid; place-items: center;
}
.ke-stock-pic img { width: 100%; height: 100%; object-fit: cover; }
.ke-stock-main b { display: block; font-size: 16px; }
.ke-stock-tag {
  display: inline-block; margin-top: 3px; padding: 2px 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: #f0ece6; color: #5f584f;
}
.is-out_of_stock .ke-stock-tag { background: #fbe6e1; color: #8e3a26; }
.is-low .ke-stock-tag { background: #fdf3e0; color: #7a5a1c; }
.is-off_shelf .ke-stock-tag { background: #e8e5e0; color: #56504a; }
.ke-stock-says { margin: 5px 0 0; font-size: 13.5px; color: #4b453e; }
.ke-stock-do { display: flex; flex-direction: column; gap: 6px; }
.ke-stock-rulebox {
  margin-top: 16px; padding: 14px;
  border: 1px dashed #d8d2c8; border-radius: 14px; background: #faf8f4;
}
@media (max-width: 640px) {
  .ke-stock-card { grid-template-columns: 48px 1fr; }
  .ke-stock-pic { width: 48px; height: 48px; }
  .ke-stock-do { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

/* what the chosen setting actually means, under the four buttons */
.ke-conn-means {
  margin: 6px 0 2px; font-size: 12.5px; line-height: 1.45; color: #6f675e;
}