/* kisu-paper.css — paper on glass.
 *
 * The ground and the glass panes are left to kisu-glass.css. What this file
 * changes is everything a person has to *read and keep*: the tracking ticket,
 * the order summary, the notices, the three steps. Those stop being another
 * pane of glass and become a sheet laid on top of it — square-ish corners, a
 * contact shadow where it touches, a soft one where it lifts, and a grain so it
 * is not a flat rectangle.
 *
 * The sheet is whatever the ground is not. It has been warm off-white on a
 * purple ground, pure white on an off-white one, and is now plain near-white on
 * a neutral near-black one. Either way the job is the same — the sheet has to
 * look like something you could pick up.
 *
 * The distinction is the whole point and is worth keeping honest: glass is for
 * browsing, paper is for reading. Product cards, the hero and the moving band
 * stay glass. The moment everything is paper, nothing is.
 *
 * Nothing in this file changes a word, a price or a status. It moves existing
 * nodes and colours them. The tracking ticket in particular is decorated, never
 * rebuilt — the only text it can show is the text the app already put there, so
 * a ticket can never say a parcel has moved when it hasn't.
 */

.kd #store.kg {
  /* Against the warm graphite ground the sheet is a plain near-white with the
     faintest warmth in its ink, so it belongs to the same family as the page
     rather than sitting on it like a cut-out. */
  --kp-sheet: #fbfbfa;
  --kp-sheet-edge: #e8e8e6;
  --kp-ink: #25231f;
  --kp-ink-2: #56534e;
  --kp-faint: #837f79;
  --kp-rule: rgba(37, 35, 31, .16);
  /* the accent on paper: ink, not colour */
  --kp-pink: #25231f;
  /* the warm tone again, darkened so it reads as text on a white sheet */
  --kp-metal: #8a7140;
}

/* ------------------------------------------------------------------ *
 * The sheet
 * ------------------------------------------------------------------ */

.kd #store.kg .kp-paper {
  position: relative;
  background: var(--kp-sheet);
  color: var(--kp-ink);
  border: 0;
  border-radius: 5px;   /* paper has corners, not pills */
  /* Three shadows, because one never reads as paper: a hairline where the
     sheet touches the glass, a short one just under it, and a wide soft one
     for the lift. Without the wide one it looks printed onto the background
     rather than resting on it. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .3),
    0 4px 10px -2px rgba(0, 0, 0, .26),
    0 26px 52px -24px rgba(0, 0, 0, .6);
  /* no blur: a sheet is opaque, and that is what separates it from the glass */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* the grain. Kept under the content, and pointer-transparent, so it can never
   swallow a click on a button that sits on the sheet */
.kd #store.kg .kp-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)' opacity='.14'/%3E%3C/svg%3E");
}
.kd #store.kg .kp-paper > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ *
 * Ink on the sheet
 * ------------------------------------------------------------------ */

.kd #store.kg .kp-paper h1,
.kd #store.kg .kp-paper h2,
.kd #store.kg .kp-paper h3,
.kd #store.kg .kp-paper h4,
.kd #store.kg .kp-paper b,
.kd #store.kg .kp-paper strong,
.kd #store.kg .kp-paper label,
.kd #store.kg .kp-paper summary,
.kd #store.kg .kp-paper .price,
.kd #store.kg .kp-paper .total { color: var(--kp-ink); }

.kd #store.kg .kp-paper p,
.kd #store.kg .kp-paper li,
.kd #store.kg .kp-paper span,
.kd #store.kg .kp-paper small,
.kd #store.kg .kp-paper .note,
.kd #store.kg .kp-paper .muted { color: var(--kp-ink-2); }

.kd #store.kg .kp-paper .muted,
.kd #store.kg .kp-paper small { color: var(--kp-faint); }

.kd #store.kg .kp-paper a { color: var(--kp-pink); }
.kd #store.kg .kp-paper hr,
.kd #store.kg .kp-paper .sumrow + .total { border-color: var(--kp-rule); }

/* a note that is itself the sheet needs no second colour layer */
.kd #store.kg .kp-paper.kp-note,
.kd #store.kg .kp-paper.kp-note p,
.kd #store.kg .kp-paper.kp-note span { color: var(--kp-ink-2); }

/* ------------------------------------------------------------------ *
 * The note strip — small print, still on paper
 * ------------------------------------------------------------------ */

.kd #store.kg .kp-note {
  padding: 11px 15px;
  font-size: 13px;
  line-height: 1.6;
  border-left: 3px solid rgba(37, 35, 31, .4);
  border-radius: 4px;
}

/* the language notice runs the full width under the bar, so it is a strip of
   paper rather than a card — same sheet, no floating corners */
.kd #store.kg .kl-notice.kp-paper {
  border-radius: 0;
  border-left: 0;
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .5);
  background: var(--kp-sheet);
  color: var(--kp-ink-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ------------------------------------------------------------------ *
 * The ticket
 * ------------------------------------------------------------------ */

.kd #store.kg .kp-ticket {
  max-width: 560px;
  margin-top: 22px;
  padding: 0 0 22px;
  border-radius: 0;         /* a torn stub has no rounded corner */
  font-variant-numeric: tabular-nums;
}

/* The torn bottom edge: one triangle per 13px, drawn as an SVG rather than as
   crossed 45-degree gradients. Gradients at 45 degrees over a tile that is not
   square do not meet where you expect and quietly render as a solid band — it
   looks like a slightly paler stripe, which is worse than no stub at all.
   The fill repeats --kp-sheet's value because an SVG data URI cannot read a
   custom property; if the sheet colour changes, change it here too. */
.kd #store.kg .kp-ticket::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 8px;
  z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8'%3E%3Cpath d='M0 0 L6.5 8 L13 0 Z' fill='%23fbfbfa'/%3E%3C/svg%3E") 0 0 / 13px 8px repeat-x;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3));
}

.kd #store.kg .kp-ticket-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 15px 22px 11px;
  border-bottom: 2px solid var(--kp-ink);
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kp-ink) !important;   /* it may arrive wearing .muted */
}
.kd #store.kg .kp-ticket-brand {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--kp-ink);
}
.kd #store.kg .kp-ticket-kind {
  margin-left: auto;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kp-faint);
}

/* the order number is the thing someone reads off the sheet */
.kd #store.kg .kp-ticket > h3 {
  margin: 12px 22px 2px;
  font-size: 26px;
  letter-spacing: .04em;
  color: var(--kp-ink);
}
.kd #store.kg .kp-ticket > p { margin: 8px 22px; }
.kd #store.kg .kp-ticket > .trackLine { margin: 4px 22px 0; }

/* the perforation a stub is torn along */
.kd #store.kg .kp-perf {
  position: relative;
  height: 1px;
  margin: 16px 0 14px;
  border-top: 1px dashed var(--kp-rule);
}
.kd #store.kg .kp-perf::before,
.kd #store.kg .kp-perf::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  /* Punched holes: they are filled with the ground colour so the sheet looks
     cut through. The ground carries a soft wash on top of that flat colour, so
     the match is close rather than exact — the inset shadow is what sells the
     hole, and it hides the couple of per cent of difference. */
  background: var(--kg-ground, #3a3a3a);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
.kd #store.kg .kp-perf::before { left: -8px; }
.kd #store.kg .kp-perf::after { right: -8px; }

/* the timeline, in ink rather than in glass-white */
.kd #store.kg .kp-ticket .trackLine .event { color: var(--kp-ink-2); }
.kd #store.kg .kp-ticket .trackLine .event b { color: var(--kp-ink); }
.kd #store.kg .kp-ticket .trackLine .event small { color: var(--kp-faint); }

/* ------------------------------------------------------------------ *
 * The three steps — three sheets, numbered
 * ------------------------------------------------------------------ */

.kd #store.kg .kf-step.kp-paper { padding: 22px 20px 20px; }
.kd #store.kg .kf-step.kp-paper .kf-step-number {
  background: var(--kp-ink);
  color: var(--kp-sheet);
  border-color: transparent;
}
.kd #store.kg .kf-step.kp-paper h3 { color: var(--kp-ink); }
.kd #store.kg .kf-step.kp-paper p { color: var(--kp-ink-2); }

/* the figures strip: the number is the point, so it gets the ink */
.kd #store.kg .kf-stat.kp-paper { border: 0; }
.kd #store.kg .kf-stat.kp-paper b { color: var(--kp-ink); }
.kd #store.kg .kf-stat.kp-paper span { color: var(--kp-ink-2); }

/* ------------------------------------------------------------------ *
 * Summaries — the figures someone checks before paying
 * ------------------------------------------------------------------ */

.kd #store.kg .kp-summary .sumrow,
.kd #store.kg .kp-summary .total { color: var(--kp-ink); }
.kd #store.kg .kp-summary .sumrow span { color: var(--kp-ink-2); }
.kd #store.kg .kp-summary .total {
  border-top: 1px solid var(--kp-rule);
  padding-top: 10px;
  margin-top: 8px;
}
.kd #store.kg .kp-summary .ks-rate-note,
.kd #store.kg .kp-summary .muted { color: var(--kp-faint); }

/* The payment choice. It has to be obvious which one is selected, because the
   consequence of getting it wrong is a customer paying by a method they did
   not mean to use. */
.kd #store.kg .kp-form .pay {
  background: #fff;
  border: 1px solid var(--kp-rule);
  color: var(--kp-ink);
}
.kd #store.kg .kp-form .pay b { color: var(--kp-ink); }
.kd #store.kg .kp-form .pay span,
.kd #store.kg .kp-form .pay small,
.kd #store.kg .kp-form .pay .muted { color: var(--kp-ink-2); }
.kd #store.kg .kp-form .pay.selected {
  background: #f1f1ef;
  border-color: var(--kp-ink);
  box-shadow: 0 0 0 1px var(--kp-ink) inset;
}

/* fields printed on paper get a paper-coloured well rather than a dark one */
.kd #store.kg .kp-paper input,
.kd #store.kg .kp-paper select,
.kd #store.kg .kp-paper textarea {
  background: #fff;
  color: var(--kp-ink);
  border: 1px solid var(--kp-rule);
}
.kd #store.kg .kp-paper input::placeholder { color: var(--kp-faint); }

/* ------------------------------------------------------------------ *
 * Small screens
 * ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .kd #store.kg .kp-ticket { max-width: none; }
  .kd #store.kg .kp-ticket > h3 { font-size: 22px; margin-left: 16px; margin-right: 16px; }
  .kd #store.kg .kp-ticket-head { padding: 13px 16px 10px; }
  .kd #store.kg .kp-ticket > p,
  .kd #store.kg .kp-ticket > .trackLine { margin-left: 16px; margin-right: 16px; }
}

/* Someone printing a ticket wants the ticket, not the shop around it. */
@media print {
  .kd #store.kg .kp-paper { box-shadow: none; }
  .kd #store.kg .kp-paper::before { display: none; }
  .kd #store.kg .kp-perf::before,
  .kd #store.kg .kp-perf::after { background: #fff; box-shadow: none; }
}

/* ------------------------------------------------------------------ *
 * On paper, the accent inverts
 * ------------------------------------------------------------------ */

/* A white button on a white sheet is not a button. Where the glass gives the
   primary action a white fill, paper gives it a black one. */
.kd #store.kg .kp-paper .primary,
.kd #store.kg .kp-paper .primary.wide {
  background: var(--kp-ink) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .55) !important;
}
.kd #store.kg .kp-paper .primary:hover { background: #3a3733 !important; }

/* the price keeps the warm tone here too, darkened to read as ink */
.kd #store.kg .kp-paper .price,
.kd #store.kg .kp-summary .total b,
.kd #store.kg .kp-summary .total span:last-child { color: var(--kp-metal); }
.kd #store.kg .kp-paper .ks-star-slot .ks-star:last-child { color: var(--kp-metal); }
.kd #store.kg .kp-paper .ks-star-slot .ks-star:first-child { color: #dededa; }

/* A note that is still on paper — the ones inside the checkout form and the
   basket summary — keeps paper's ink. The glass layer now paints every other
   note light, and it has to, because everywhere else a note sits on the dark
   page; but light ink on a white sheet is the same fault in the other
   direction, so the sheets take their colour back here. */
.kd #store.kg .note.kp-note,
.kd #store.kg .kp-paper .note,
.kd #store.kg .kp-paper .muted,
.kd #store.kg .kp-paper p,
.kd #store.kg .kp-paper span,
.kd #store.kg .kp-paper small { color: var(--kp-ink-2) !important; }
.kd #store.kg .note.kp-note b,
.kd #store.kg .kp-paper b,
.kd #store.kg .kp-paper strong,
.kd #store.kg .kp-paper h3 { color: var(--kp-ink) !important; }
.kd #store.kg .note.kp-note {
  background: var(--kp-sheet) !important;
  border-color: var(--kp-sheet-edge) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* The step number sits in a dark disc on the sheet. The small-print rule above
   reaches every span on paper, including this one, and turned the number the
   same dark grey as its own disc. The disc keeps a light number. */
.kd #store.kg .kf-step.kp-paper .kf-step-number { color: #ffffff !important; }

/* ------------------------------------------------------------------ *
 * Receipts: the basket total and the checkout's order summary
 * ------------------------------------------------------------------ */
.kd #store.kg .kp-paper.kp-receipt {
  border-radius: 4px 4px 0 0;
  margin-bottom: 14px;
  padding-bottom: 26px;
}
/* the torn edge along the bottom, like a slip from a till */
.kd #store.kg .kp-paper.kp-receipt::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background:
    linear-gradient(135deg, var(--kp-sheet) 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
    linear-gradient(225deg, var(--kp-sheet) 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .22));
  pointer-events: none;
}
.kd #store.kg .kp-receipt .sumrow {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px dashed var(--kp-rule);
  font-variant-numeric: tabular-nums;
}
.kd #store.kg .kp-receipt .sumrow span { color: var(--kp-ink-2) !important; font-size: 15px; }
.kd #store.kg .kp-receipt .sumrow b { color: var(--kp-ink) !important; font-size: 15.5px; font-weight: 800; }
.kd #store.kg .kp-receipt .total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 6px; padding: 14px 0 16px; border-top: 2px solid var(--kp-ink) !important;
  font-variant-numeric: tabular-nums;
}
.kd #store.kg .kp-receipt .total span { color: var(--kp-ink) !important; font-size: 20px; font-weight: 900; }
.kd #store.kg .kp-receipt button.primary,
.kd #store.kg .kp-receipt .primary {
  background: #25231f !important; color: #fff !important; border: 0 !important;
  min-height: 54px; border-radius: 999px; font-size: 15px; font-weight: 900; letter-spacing: .06em;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6) !important;
}
.kd #store.kg .kp-receipt #checkoutSummary > div,
.kd #store.kg .kp-receipt #checkoutSummary .sumrow { font-variant-numeric: tabular-nums; }