/* Product, checkout, tracking and policy pages in the store design's colours, light or dark.
   store.css draws these pages; this file swaps its fixed light colours for the design's. */
body.kit-page{background:var(--bg);color:var(--ink);font-family:var(--body)}
.kit-page h1,.kit-page h2,.kit-page h3{font-family:var(--display)}
.kit-page .k-inner{min-height:50vh}
.kit-page .btn{background:var(--btn);color:var(--on-btn);border-radius:var(--r-btn);box-shadow:none}
.kit-page .btn:active{box-shadow:none}
.kit-page .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.kit-page .add{background:var(--btn);color:var(--on-btn)}
.kit-page .protect{background:var(--well)!important;color:var(--ink);border-color:var(--line)}
.kit-page .field input,.kit-page .field select,.kit-page .field textarea,.kit-page input,.kit-page select,.kit-page textarea{background:var(--surface);color:var(--ink);border-color:var(--line)}
.kit-page input::placeholder,.kit-page textarea::placeholder{color:var(--muted);opacity:1}
.kit-page .opt{background:var(--surface);color:var(--ink)}
.kit-page .product-page .pp-media,.kit-page .related .im{background:var(--well)}
.kit-page .product-page .pp-trust{background:var(--well);border-color:var(--line);color:var(--muted)}
.kit-page .related a{background:var(--surface);color:var(--ink);border-color:var(--line)}
.kit-page .k-was{color:var(--muted);opacity:1;text-decoration:line-through}
.kit-page .k-off{background:var(--sale);color:var(--on-sale)}
.kit-page .k-salebadge{background:var(--sale);color:var(--on-sale)}

/* Basket (checkout): picture, name, price, − / + and remove. Same in every design; colours come from the design. */
.bag{--b-line:var(--line,#e3ddcd);--b-surface:var(--surface,#fff);--b-well:var(--well,#f4f1ea);--b-ink:var(--ink,#1b231e);--b-muted:var(--muted,#5e6b63);--b-btn:var(--btn,#14432f);--b-on:var(--on-btn,#fff);
  margin:14px 0 22px;background:var(--b-surface);border:1px solid var(--b-line);border-radius:18px;padding:6px 16px 14px;color:var(--b-ink)}
.bag-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0 6px}
.bag-head h2{margin:0;font-size:1.3rem}
.bag-count{color:var(--b-muted);font-size:.88rem;font-variant-numeric:tabular-nums}
.bag-list{list-style:none;margin:0;padding:0}
.bag-item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--b-line);transition:opacity .2s}
.bag-item.is-busy{opacity:.55;pointer-events:none}
.bag-img{width:72px;height:72px;border-radius:14px;overflow:hidden;background:var(--b-well);display:grid;place-items:center;text-decoration:none;color:var(--b-muted);font-weight:700;font-size:1.4rem}
.bag-img img{width:100%;height:100%;object-fit:cover;display:block}
.bag-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.bag-name{color:var(--b-ink);font-weight:650;text-decoration:none;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bag-name:hover{text-decoration:underline}
.bag-unit{color:var(--b-muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.bag-unit s{opacity:.8}
.bag-qty{display:inline-flex;align-items:center;margin-top:4px;border:1px solid var(--b-line);border-radius:999px;width:max-content;overflow:hidden;background:var(--b-surface)}
.bag-qty form{margin:0;display:flex}
.bag-qty button{width:36px;height:34px;border:0;background:transparent;color:var(--b-ink);font-size:1.15rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.bag-qty button:hover:not(:disabled){background:var(--b-well)}
.bag-qty button:disabled{opacity:.35;cursor:not-allowed}
.bag-qty output{min-width:30px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.bag-end{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.bag-end form{margin:0}
.bag-tot{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}.bag-tot s{color:var(--b-muted);font-size:.8rem}
.bag-total{font-variant-numeric:tabular-nums;font-size:1.02rem;white-space:nowrap}
.bag-remove{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--b-muted);font:inherit;font-size:.82rem;cursor:pointer;padding:4px 2px;border-radius:8px}
.bag-remove:hover{color:#c0392b}
.bag-remove svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bag-sum{margin:0;border-top:1px solid var(--b-line);padding-top:10px;display:grid;gap:6px}
.bag-sum div{display:flex;justify-content:space-between;gap:12px}
.bag-sum dt{color:var(--b-muted)}.bag-sum dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.bag-sum small{font-weight:400}
.bag-grand dt{color:var(--b-ink);font-weight:700}
.bag-note{margin:8px 0 0;color:var(--b-muted);font-size:.8rem}
@media (max-width:480px){.bag{padding:4px 12px 12px}.bag-item{grid-template-columns:60px minmax(0,1fr);gap:10px 12px}.bag-img{width:60px;height:60px}
  .bag-end{grid-column:2;flex-direction:row;justify-content:space-between;align-items:center}}