/* ══ Cartify storefront ══ */

/* the font lives on our own server, so there is no third party to wait for */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/pjs-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/pjs-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/pjs-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

body.shop {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

:root {
  --sh-green:  #10B981;
  --sh-deep:   #047857;
  --sh-soft:   #A7F3D0;
  --sh-tint:   #ECFDF5;
  --sh-red:    #A32D2D;
  --sh-badge:  #0A8A43;
  --sh-line:   #E7E5DF;
  --sh-ink:    #1A1A18;
  --sh-muted:  #6B6B66;
  --sh-pad:    14px;
}

body.shop { background: #fff; display: flex; flex-direction: column; min-height: 100vh; }
@supports (min-height: 100svh) { body.shop { min-height: 100svh; } }

/* no double-tap zoom and no 300ms tap delay; pinch zoom still works */
html:has(body.shop) { touch-action: manipulation; }
body.shop, body.shop * { touch-action: manipulation; }
body.shop svg { max-width: 100%; }

/* body is a flex column so the footer sits at the bottom; without an explicit
   width the auto margins below would shrink these to their content */
.sh-banner, .sh-sec, .sh-trust, .sh-flash, .pd, .rv, .sh-legal, .co, .ok, .tk {
  width: 100%; box-sizing: border-box;
}

/* anything under 16px makes iPhones zoom in when tapped */
body.shop input, body.shop select, body.shop textarea {
  font-size: 16px;
}
body.shop.sh-locked { overflow: hidden; }
body.shop .top, body.shop .head { display: none; }
body.shop [hidden] { display: none !important; }

/* ── announcement bar ───────────────────────────────── */
.sh-top {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: #fff; color: var(--sh-deep); border-bottom: 1px solid var(--sh-line);
  font-size: .7rem; font-weight: 600; padding: 8px 14px; text-align: center;
}
.sh-top-free { display: none; color: var(--sh-muted); font-weight: 400; }

/* ── header ─────────────────────────────────────────── */
.sh-head { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--sh-line); }
.sh-head-in {
  display: flex; align-items: center; gap: 10px;
  max-width: 1240px; margin: 0 auto; padding: 10px var(--sh-pad);
}
.sh-brand {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  font-size: 1.05rem; font-weight: 800; color: var(--sh-ink); text-decoration: none;
}
.sh-logo {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  border: 1px solid var(--sh-line); background: #fff; color: #111;
  display: flex; align-items: center; justify-content: center;
}
.sh-logo svg { width: 25px; height: 25px; }
.sh-logo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 10px; }

.sh-nav { display: none; gap: 18px; font-size: .88rem; }
.sh-nav a { color: var(--sh-muted); text-decoration: none; }
.sh-nav a:hover { color: var(--sh-deep); }

.sh-search { display: none; flex: 1; align-items: center; gap: 9px; min-width: 0;
  height: 38px; padding: 0 14px; border: 1px solid var(--sh-line);
  border-radius: 999px; background: #FAFAF8; }
.sh-search svg { width: 17px; height: 17px; color: var(--sh-muted); flex-shrink: 0; }
.sh-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 16px; }

.sh-ico {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 38px; height: 38px; flex-shrink: 0; padding: 0; cursor: pointer;
  border: 0; border-radius: 10px; background: none; color: var(--sh-ink); text-decoration: none;
}
.sh-ico:hover { background: #F4F4F1; }
.sh-ico svg { width: 21px; height: 21px; }
.sh-n {
  position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700; border-radius: 999px;
  background: var(--sh-deep); color: #fff; padding: 0 4px;
}
.sh-brand + .sh-nav { margin-left: 10px; }
.sh-head-in > .sh-ico:first-of-type { margin-left: auto; }

.sh-search-m {
  display: flex; align-items: center; gap: 9px;
  margin: 0 var(--sh-pad) 10px; height: 40px; padding: 0 14px;
  border: 1px solid var(--sh-line); border-radius: 999px; background: #FAFAF8;
}
.sh-search-m svg { width: 17px; height: 17px; color: var(--sh-muted); flex-shrink: 0; }
.sh-search-m input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 16px; }

/* ── slide-out menu ─────────────────────────────────── */
.sh-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .45); }
.sh-drawer {
  position: fixed; top: 0; left: 0; z-index: 45;
  width: 270px; max-width: 84vw; height: 100dvh; background: #fff;
  transform: translateX(-100%); transition: transform .22s ease;
  display: flex; flex-direction: column;
}
.sh-drawer.on { transform: none; }
.sh-drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 10px 12px 18px; border-bottom: 1px solid var(--sh-line);
  font-size: .92rem; font-weight: 700;
}
.sh-drawer-nav { display: flex; flex-direction: column; padding: 8px 10px; overflow-y: auto; }
.sh-drawer-nav a {
  padding: 11px 12px; border-radius: 10px;
  font-size: .92rem; color: var(--sh-ink); text-decoration: none;
}
.sh-drawer-nav a:hover { background: var(--sh-tint); color: var(--sh-deep); }
.sh-drawer-lbl {
  padding: 14px 12px 6px; font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sh-muted);
}

.sh-flash {
  margin: 12px var(--sh-pad); padding: 11px 15px; border-radius: 12px;
  font-size: .86rem; background: var(--sh-tint); color: var(--sh-deep);
}
.sh-flash.err { background: #FCEBEB; color: var(--sh-red); }

.sh-sec { padding: 18px 0; }
.sh-h { margin: 0 0 12px; padding: 0 var(--sh-pad); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.sh-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 var(--sh-pad); }
.sh-sec-head .sh-h { padding: 0; }
.sh-clear { font-size: .84rem; color: var(--sh-deep); font-weight: 600; }

/* ── banner ─────────────────────────────────────────── */
.sh-banner { position: relative; padding: var(--sh-pad) var(--sh-pad) 0; }
.sh-slides {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sh-slides::-webkit-scrollbar { display: none; }
.sh-slide {
  flex: 0 0 100%; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 168px; padding: 0 20px 22px; border-radius: 16px; text-decoration: none;
}
.sh-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.sh-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; line-height: 1.2; }
.sh-note { font-size: .78rem; margin-top: 3px; opacity: .85; }
.sh-cta {
  align-self: flex-start; margin-top: 12px;
  font-size: .8rem; font-weight: 700; padding: 8px 18px;
  border-radius: 999px; background: var(--sh-deep); color: #ECFDF5;
}
.sh-dots { display: flex; justify-content: center; gap: 5px; margin-top: 9px; }
.sh-dot {
  width: 5px; height: 5px; padding: 0; border: 0; border-radius: 99px;
  background: #C9CCC6; cursor: pointer; transition: width .18s;
}
.sh-dot.on { width: 18px; background: var(--sh-deep); }

/* ── trust strip ────────────────────────────────────── */
.sh-trust {
  display: flex; justify-content: space-around; gap: 8px;
  background: var(--sh-tint); padding: 14px 8px;
  width: auto; margin: 16px var(--sh-pad) 0; border-radius: 16px;
  font-size: .68rem; color: #065F46; text-align: center;
}
.sh-trust span { flex: 1; min-width: 0; }
.sh-i { display: block; width: 20px; height: 20px; margin: 0 auto 5px; background: var(--sh-deep); }
.sh-i-cash { -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.sh-i-fast { -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16V8h11v8'/%3E%3Cpath d='M14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16V8h11v8'/%3E%3Cpath d='M14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E") center/contain no-repeat; }
.sh-i-swap { -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11A8 8 0 0 0 6 6L4 8'/%3E%3Cpath d='M4 13a8 8 0 0 0 14 5l2-2'/%3E%3Cpath d='M4 4v4h4M20 20v-4h-4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11A8 8 0 0 0 6 6L4 8'/%3E%3Cpath d='M4 13a8 8 0 0 0 14 5l2-2'/%3E%3Cpath d='M4 4v4h4M20 20v-4h-4'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ── horizontal rails ───────────────────────────────── */
.sh-rail {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 0 var(--sh-pad) 4px; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sh-rail::-webkit-scrollbar { display: none; }
.sh-rail > * { scroll-snap-align: start; }

/* exactly four categories fill the screen, whatever the phone */
.sh-cats > .sh-cat { flex: 0 0 calc((100% - 36px) / 4); }
.sh-cat { text-decoration: none; text-align: center; min-width: 0; }
.sh-cat img, .sh-cat-blank {
  display: block; width: 100%; max-width: 62px; aspect-ratio: 1;
  margin: 0 auto; border-radius: 50%; object-fit: cover; background: var(--sh-tint);
}
.sh-cat-blank {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 800; color: var(--sh-deep);
}
.sh-cat-name {
  display: block; margin-top: 7px; font-size: .68rem; color: var(--sh-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* two sale cards fill the screen */
.sh-sale {
  background: #FAFAF8; border: 1px solid var(--sh-soft); width: auto;
  margin: 0 var(--sh-pad); border-radius: 20px;
}
.sh-sale .sh-h { color: #065F46; padding-left: 16px; }
.sh-sale .sh-rail { padding-left: 16px; padding-right: 16px; }
.sh-sale { padding-bottom: 4px; }
.sh-sale-rail > .sh-card { flex: 0 0 calc((100% - 12px) / 2); }

/* ── product card ───────────────────────────────────── */
.sh-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 0 var(--sh-pad);
}
.sh-card {
  display: block; min-width: 0; text-decoration: none; color: inherit;
  border: 1px solid var(--sh-line); border-radius: 14px;
  background: #fff; overflow: hidden;
}
.sh-card:active { transform: scale(.99); }
.sh-card-img { position: relative; display: block; aspect-ratio: 1; background: var(--sh-tint); }
.sh-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-off {
  position: absolute; top: 8px; left: 8px;
  font-size: .64rem; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: var(--sh-red); color: #fff;
}
.sh-off.sh-out { background: #4A4A46; }
.is-out .sh-card-img img { opacity: .55; }

.sh-card-body { display: block; padding: 10px 11px 12px; }
.sh-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .8rem; line-height: 1.35; color: var(--sh-ink);
}
.sh-prices {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: nowrap; margin-top: 7px; min-width: 0; overflow: hidden;
}
/* sizes follow the screen so the row never drops to a second line */
.sh-now {
  flex-shrink: 0; white-space: nowrap; font-weight: 800; color: var(--sh-deep);
  font-size: clamp(12px, 3.6vw, 15px);
}
.sh-was {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--sh-red); text-decoration: line-through;
  font-size: clamp(9px, 2.7vw, 12px);
}
.sh-cut {
  flex-shrink: 0; white-space: nowrap; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: var(--sh-green); color: #fff;
  font-size: clamp(8px, 2.4vw, 11px);
}
.sh-sold {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin-top: 5px; font-size: .68rem; color: var(--sh-muted);
}
.sh-rate { display: inline-flex; align-items: center; gap: 3px; color: var(--sh-ink); font-weight: 700; }
.sh-rate svg { width: 12px; height: 12px; color: #E0A11A; }
.sh-rate i { font-style: normal; font-weight: 400; color: var(--sh-muted); }
.sh-dot-sep { font-style: normal; color: #C9CCC6; }

/* all products sits in its own rounded band, like the sale block */
#products.sh-sec {
  width: auto; margin: 18px var(--sh-pad);
  border-radius: 20px; background: #FAFAF8; padding: 16px 0 18px;
}
#products .sh-h, #products .sh-sec-head { padding-left: 16px; padding-right: 16px; }
#products .sh-grid { padding: 0 16px; }

.sh-empty { padding: 46px var(--sh-pad); text-align: center; color: var(--sh-muted); }
.sh-btn {
  display: inline-block; margin-top: 12px; font-size: .84rem; font-weight: 700;
  padding: 9px 20px; border-radius: 999px; background: var(--sh-deep); color: #ECFDF5;
}

/* ── product page ───────────────────────────────────── */
.pd { max-width: 1100px; margin: 0 auto; padding: 0 var(--sh-pad) 96px; }

.pd-top { padding-top: 16px; }

/* gallery */
.pd-shots {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: 16px; position: relative;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pd-shots::-webkit-scrollbar { display: none; }
.pd-shot { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1; background: var(--sh-tint); }
.pd-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-off {
  position: absolute; top: 11px; left: 11px;
  font-size: .68rem; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; background: var(--sh-red); color: #fff;
}
.pd-dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.pd-dot { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 99px; background: #C9CCC6; cursor: pointer; transition: width .18s; }
.pd-dot.on { width: 16px; background: var(--sh-deep); }
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.pd-thumbs::-webkit-scrollbar { display: none; }
.pd-thumb {
  width: 56px; height: 56px; flex-shrink: 0; padding: 0; cursor: pointer;
  border: 2px solid var(--sh-line); border-radius: 12px; overflow: hidden; background: var(--sh-tint);
}
.pd-thumb.on { border-color: var(--sh-green); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* info */
.pd-info { padding-top: 16px; }
.pd-info h1 { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.pd-meta { margin: 8px 0 0; font-size: .78rem; color: var(--sh-muted); }
.pd-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 13px; }
.pd-now { font-size: 1.65rem; font-weight: 800; color: var(--sh-deep); }
.pd-was { font-size: .88rem; color: var(--sh-red); text-decoration: line-through; }
.pd-cut { font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--sh-badge); color: #fff; align-self: center; }
.pd-stock { margin: 12px 0 0; font-size: .8rem; color: var(--sh-deep); }

.pd-save {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 12px 0 0; padding: 8px 14px; border-radius: 999px;
  background: #E8F7EE; color: var(--sh-badge);
  font-size: .84rem; font-weight: 700;
}
.pd-save svg { width: 16px; height: 16px; flex-shrink: 0; }

.pd-alert {
  display: flex; align-items: center; gap: 9px;
  margin: 12px 0 0; padding: 11px 15px; border-radius: 14px;
  background: #FDECEC; color: #E02B2B;
  font-size: .88rem; font-weight: 700;
}
.pd-alert svg { width: 18px; height: 18px; flex-shrink: 0; }

/* trust row */
.pd-trust {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--sh-line); border-radius: 18px; overflow: hidden; margin-top: 18px;
}
.pd-trust > span { position: relative; text-align: center; padding: 16px 4px; min-width: 0; }
.pd-trust > span::after {
  content: ''; position: absolute; right: 0; top: 14px; bottom: 14px;
  width: 1px; background: var(--sh-line);
}
.pd-trust > span:last-child::after { display: none; }
.pd-ico {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 9px; color: var(--sh-badge);
}
.pd-ico svg { width: 26px; height: 26px; }
.pd-trust b {
  display: block; font-weight: 700; line-height: 1.35;
  font-size: clamp(10px, 2.9vw, 13px); letter-spacing: -.01em;
}

.pd-order {
  display: block; width: 100%; margin-top: 16px; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700; text-align: center;
  padding: 16px; border: 0; border-radius: 14px; text-decoration: none;
  background: var(--sh-badge); color: #fff;
}
.pd-order:hover { background: #076B34; }
.pd-order.is-off { background: #D3D1C7; color: #6B6B66; cursor: default; }
.pd-note { margin: 9px 0 0; text-align: center; font-size: .7rem; color: var(--sh-muted); }

.pd-sec { padding: 22px 0; border-top: 1px solid var(--sh-line); margin-top: 22px; }
.pd-sec h2 { margin: 0 0 11px; font-size: 1.05rem; font-weight: 700; }
.pd-h-ico { display: flex; align-items: center; gap: 8px; }
.pd-h-ico svg { width: 19px; height: 19px; color: var(--sh-badge); flex-shrink: 0; }
.pd-desc {
  font-size: .9rem; line-height: 1.7; color: #3A3A36;
  border: 1px solid var(--sh-line); border-radius: 16px;
  padding: 16px 17px; background: #fff; overflow: hidden;
}
.pd-desc h2, .pd-desc h3 { font-size: 1rem; font-weight: 700; margin: 16px 0 8px; color: var(--sh-ink); }
.pd-desc p { margin: 0 0 11px; }
.pd-desc ul, .pd-desc ol { margin: 0 0 11px; padding-left: 20px; }
.pd-desc li { margin-bottom: 5px; }
/* photos pasted into the description run to both edges of the card */
.pd-desc img, .pd-desc video {
  display: block; width: calc(100% + 34px); max-width: none; height: auto;
  margin: 14px -17px; border-radius: 14px;
}
/* it stands in for a GIF, so it must not look like a player */
.pd-desc video { pointer-events: none; background: var(--sh-tint); }
.pd-desc video::-webkit-media-controls { display: none !important; }
.pd-desc p:has(> img:only-child), .pd-desc p:has(> video:only-child) { margin: 0; }
.pd-desc a { color: var(--sh-deep); font-weight: 600; }

/* sticky order bar */
.pd-sticky {
  position: fixed; left: 0; right: 0; z-index: 30;
  bottom: calc(10px + env(safe-area-inset-bottom));
  margin: 0 var(--sh-pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 11px 13px;
  background: #fff; border: 1px solid var(--sh-line); border-radius: 18px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .12);
  transform: translateY(150%); opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  pointer-events: none;
}
.pd-sticky.on { transform: none; opacity: 1; pointer-events: auto; }
.pd-sticky.no-wa { grid-template-columns: 1fr 1.3fr; }

.pd-sticky-price { min-width: 0; }
.pd-sticky-price b {
  display: block; font-weight: 800; line-height: 1.2; color: var(--sh-badge);
  font-size: clamp(13px, 4vw, 17px);
}
.pd-sticky-price > span { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.pd-sticky-price i {
  font-style: normal; color: var(--sh-red); text-decoration: line-through;
  font-size: clamp(9px, 2.8vw, 12px);
}
.pd-sticky-price em {
  font-style: normal; font-weight: 700; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px;
  background: var(--sh-badge); color: #fff;
  font-size: clamp(8px, 2.4vw, 10px);
}

.pd-sticky-mid { display: flex; align-items: center; gap: 10px; }
.pd-sticky-rule { width: 1px; height: 30px; background: var(--sh-line); flex-shrink: 0; }
.pd-wa {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--sh-line); border-radius: 14px;
  background: #F0FBF4; color: #25D366;
}
.pd-wa:hover { border-color: #25D366; }
.pd-wa svg { width: 22px; height: 22px; }

.pd-sticky-go {
  text-align: center; text-decoration: none; white-space: nowrap;
  font-weight: 700; padding: 13px 6px; border-radius: 14px;
  background: var(--sh-badge); color: #fff;
  font-size: clamp(12px, 3.4vw, 15px);
}
.pd-sticky-go:hover { background: #076B34; }

@media (max-width: 360px) {
  .pd-sticky { gap: 7px; padding-left: 11px; padding-right: 11px; }
  .pd-sticky-mid { gap: 7px; }
  .pd-wa { width: 40px; height: 40px; border-radius: 12px; }
  .pd-wa svg { width: 20px; height: 20px; }
  .pd-sticky-go { border-radius: 12px; padding: 12px 4px; }
}

/* ── checkout ───────────────────────────────────────── */
.co { max-width: 1000px; margin: 0 auto; padding: 16px var(--sh-pad) 24px; width: 100%; box-sizing: border-box; }

.co-top { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.co-back {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--sh-line); border-radius: 12px;
  background: #fff; color: var(--sh-muted);
}
.co-back:hover { border-color: var(--sh-badge); color: var(--sh-badge); }
.co-back svg { width: 19px; height: 19px; }
.co-top h1 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }

.co-err-box {
  margin: 0 0 12px; padding: 11px 15px; border-radius: 12px;
  background: #FDECEC; color: #E02B2B; font-size: .86rem; font-weight: 600;
}

.co-grid { display: flex; flex-direction: column; gap: 12px; }
.co-side { display: flex; flex-direction: column; gap: 12px; }
.co-card {
  border: 1px solid var(--sh-line); border-radius: 16px;
  background: #fff; padding: 14px;
}
.co-h { margin: 0 0 12px; font-size: .88rem; font-weight: 700; }

/* pack picker */
.co-pack {
  display: flex; align-items: center; gap: 11px; margin: 0 0 9px;
  border: 1px solid var(--sh-line); border-radius: 14px;
  padding: 10px 12px; cursor: pointer;
}
.co-pack:last-child { margin-bottom: 0; }
.co-pack.on { border: 2px solid var(--sh-badge); background: #F4FBF6; padding: 9px 11px; }
.co-pack input { position: absolute; opacity: 0; width: 0; height: 0; }
.co-pack-img {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 11px;
  overflow: hidden; background: var(--sh-tint);
}
.co-pack-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-pack-txt { flex: 1; min-width: 0; }
.co-pack-txt b { display: block; font-size: .86rem; font-weight: 700; }
.co-pack-txt i {
  display: inline-block; margin-top: 4px; font-style: normal;
  font-size: .62rem; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; color: #fff; white-space: nowrap;
}
.co-pack-txt i.none { background: #E02B2B; }
.co-pack-txt i.good { background: var(--sh-badge); }
.co-pack-cost { text-align: right; flex-shrink: 0; }
.co-pack-cost s { display: block; font-size: .68rem; color: #E02B2B; }
.co-pack-cost b { display: block; font-size: .96rem; font-weight: 800; color: var(--sh-badge); }

/* totals */
.co-sum { font-size: .86rem; }
.co-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.co-sum > div > span:first-child { color: var(--sh-ink); }
.co-total {
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--sh-line);
  font-size: 1.05rem; font-weight: 800;
}
.co-total span:first-child { color: var(--sh-ink) !important; }
.co-total span:last-child { color: var(--sh-badge); }

/* form */
.co-lbl { display: block; font-size: .72rem; color: var(--sh-muted); margin: 0 0 5px; }
.co-in {
  display: block; width: 100%; box-sizing: border-box;
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--sh-ink);
  padding: 12px 13px; margin-bottom: 14px;
  border: 1px solid var(--sh-line); border-radius: 12px; background: #FAFAF8;
}
textarea.co-in { resize: none; overflow: hidden; min-height: 0; }
.co-in.bad { border-color: #E02B2B; background: #FDF4F4; }
.co-lbl b { color: #E02B2B; font-weight: 700; }
.co-in:focus { outline: none; border-color: var(--sh-badge); background: #fff; box-shadow: 0 0 0 3px #E8F7EE; }
.co-err { display: block; margin: -10px 0 14px; font-size: .74rem; color: var(--sh-red); }

.co-go {
  display: block; width: 100%; margin-top: 21px; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700;
  padding: 15px; border: 0; border-radius: 14px;
  background: var(--sh-badge); color: #fff;
}
.co-go:hover { background: #076B34; }
.co-note { margin: 10px 0 0; text-align: center; font-size: .72rem; color: var(--sh-muted); }

@media (min-width: 860px) {
  .co { padding-top: 26px; }
  .co-top h1 { font-size: 1.5rem; }
  .co-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .co-card { padding: 16px; }
  .co-pack-img { width: 56px; height: 56px; }
}

/* ── write a review ─────────────────────────────────── */
.rv { max-width: 560px; margin: 0 auto; padding: 20px var(--sh-pad) 10px; }
.rv-card { border: 1px solid var(--sh-line); border-radius: 18px; padding: 20px 17px; background: #fff; }
.rv-card h1 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.rv-sub { margin: 7px 0 0; font-size: .84rem; line-height: 1.6; color: var(--sh-muted); }
.rv-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.rv-lbl { display: block; margin: 18px 0 7px; font-size: .8rem; font-weight: 700; }
.rv-lbl span { font-weight: 400; color: var(--sh-muted); }
.rv-hint { display: block; margin-top: 6px; font-size: .72rem; color: var(--sh-muted); }
.rv-hint b { color: var(--sh-deep); }
.rv-err { display: block; margin-top: 6px; font-size: .74rem; color: var(--sh-red); }

.rv-in {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--sh-ink);
  padding: 12px 13px; border: 1px solid var(--sh-line);
  border-radius: 12px; background: #FAFAF8; resize: vertical;
}
.rv-in:focus { outline: none; border-color: var(--sh-green); background: #fff; box-shadow: 0 0 0 3px var(--sh-tint); }

/* product picker */
.rv-pick {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border: 1px solid var(--sh-line);
  border-radius: 14px; background: #FAFAF8; cursor: pointer; margin: 0;
}
.rv-pick:hover { border-color: var(--sh-green); }
.rv-pick select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 16px; }
.rv-pick-img {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 11px; overflow: hidden;
  background: var(--sh-tint); color: var(--sh-deep);
  display: flex; align-items: center; justify-content: center;
}
.rv-pick-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-pick-img svg { width: 20px; height: 20px; }
.rv-pick-txt { flex: 1; min-width: 0; }
.rv-pick-txt b { display: block; font-size: .88rem; font-weight: 600; }
.rv-pick-txt small { display: block; font-size: .74rem; color: var(--sh-muted); }
.rv-pick-go { flex-shrink: 0; font-size: .78rem; font-weight: 600; color: var(--sh-deep); }

/* stars */
.rv-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 6px; }
.rv-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.rv-stars label { cursor: pointer; color: #DCDAD1; line-height: 0; transition: color .12s; margin: 0; }
.rv-stars label svg { width: 34px; height: 34px; display: block; }
.rv-stars label:hover, .rv-stars label:hover ~ label,
.rv-stars input:checked ~ label { color: #E0A11A; }
.rv-stars input:focus-visible + label { outline: 2px solid var(--sh-green); outline-offset: 2px; border-radius: 4px; }
.rv-word { order: -1; margin-left: 8px; font-size: .84rem; font-weight: 700; color: var(--sh-deep); }

/* name with avatar */
.rv-name-row { display: flex; align-items: center; gap: 10px; }
.rv-name-row .rv-in { flex: 1; min-width: 0; }
.rv-avatar {
  position: relative; width: 48px; height: 48px; flex-shrink: 0; margin: 0; cursor: pointer;
  border: 2px dashed var(--sh-line); border-radius: 50%; overflow: hidden;
  background: #FAFAF8; color: var(--sh-muted);
  display: flex; align-items: center; justify-content: center;
}
.rv-avatar:hover { border-color: var(--sh-green); color: var(--sh-deep); }
.rv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-avatar svg { width: 21px; height: 21px; }
.rv-avatar input { position: absolute; opacity: 0; width: 0; height: 0; }

/* photos */
.rv-shots { display: flex; flex-wrap: wrap; gap: 9px; }
.rv-shot {
  width: 74px; height: 74px; border-radius: 12px; overflow: hidden;
  background: var(--sh-tint); flex-shrink: 0;
}
.rv-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-add {
  position: relative; width: 74px; height: 74px; flex-shrink: 0; margin: 0; cursor: pointer;
  border: 2px dashed var(--sh-line); border-radius: 12px; color: var(--sh-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.rv-add:hover { border-color: var(--sh-green); background: var(--sh-tint); }
.rv-add svg { width: 20px; height: 20px; }
.rv-add span { font-size: .66rem; font-weight: 700; }
.rv-add input { position: absolute; opacity: 0; width: 0; height: 0; }

.rv-send {
  display: block; width: 100%; margin-top: 22px; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700;
  padding: 15px; border: 0; border-radius: 14px;
  background: var(--sh-badge); color: #fff;
}
.rv-send:hover { background: #076B34; }

.rv-done { text-align: center; padding: 40px 10px 20px; }
.rv-tick {
  width: 78px; height: 78px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--sh-tint); color: var(--sh-deep);
  display: flex; align-items: center; justify-content: center;
}
.rv-tick svg { width: 34px; height: 34px; }
.rv-done h1 { margin: 0; font-size: 1.4rem; font-weight: 800; }
.rv-done p { margin: 9px auto 0; max-width: 40ch; font-size: .88rem; line-height: 1.6; color: var(--sh-muted); }
.rv-back { margin-top: 44px; }

/* ── track an order ─────────────────────────────────── */
.tk { max-width: 620px; margin: 0 auto; padding: 16px var(--sh-pad) 24px; width: 100%; box-sizing: border-box; }

.tk-top { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.tk-back {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--sh-line); border-radius: 12px;
  background: #fff; color: var(--sh-muted);
}
.tk-back:hover { border-color: var(--sh-badge); color: var(--sh-badge); }
.tk-back svg { width: 19px; height: 19px; }
.tk-top h1 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }

.tk-card {
  border: 1px solid var(--sh-line); border-radius: 16px;
  background: #fff; padding: 15px; margin-bottom: 12px;
}

.tk-code {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid #C9E7D5; border-radius: 16px; background: #F4FBF6;
  padding: 13px 15px; margin-bottom: 12px;
}
.tk-code small { display: block; font-size: .68rem; color: #2F7D4A; }
.tk-code b { font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; color: #3E9B5F; }
.tk-code i {
  flex-shrink: 0; font-style: normal; font-size: .68rem; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; background: var(--sh-badge); color: #fff;
}
.tk-code.off { border-color: #F3C9C9; background: #FDF4F4; }
.tk-code.off small { color: #A32D2D; }
.tk-code.off b { color: #E02B2B; }
.tk-code.off i { background: #E02B2B; }

/* the rail runs straight from one dot into the next */
.tk-step { display: flex; gap: 13px; }
.tk-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.tk-dot {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--sh-line); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.tk-dot svg { width: 12px; height: 12px; }
.tk-step.done .tk-dot { border-color: var(--sh-badge); background: var(--sh-badge); }
.tk-line { width: 2px; flex: 1; min-height: 22px; background: var(--sh-line); }
.tk-step.done .tk-line { background: var(--sh-badge); }
.tk-what { flex: 1; min-width: 0; padding-bottom: 18px; }
.tk-step:last-child .tk-what { padding-bottom: 0; }
.tk-what b { display: block; font-size: .88rem; font-weight: 700; }
.tk-step:not(.done) .tk-what b { color: var(--sh-muted); }
.tk-what small { display: block; margin-top: 2px; font-size: .74rem; color: var(--sh-muted); }

.tk-cancel { margin: 0; font-size: .88rem; line-height: 1.6; color: #3A3A36; }

.tk-item { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid var(--sh-line); }
.tk-thumb { width: 52px; height: 52px; flex-shrink: 0; border-radius: 11px; overflow: hidden; background: var(--sh-tint); }
.tk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-name { flex: 1; min-width: 0; }
.tk-name b { display: block; font-size: .86rem; font-weight: 700; line-height: 1.35; }
.tk-name small { display: block; margin-top: 2px; font-size: .74rem; color: var(--sh-muted); }
.tk-line-cost { flex-shrink: 0; font-size: .9rem; font-weight: 700; }

.tk-sums { padding-top: 12px; font-size: .86rem; }
.tk-sums > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.tk-sums > div > span:first-child { color: var(--sh-muted); }
.tk-sums .free { color: var(--sh-badge); }
.tk-total {
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--sh-line);
  font-size: 1.05rem; font-weight: 800;
}
.tk-total span:first-child { color: var(--sh-ink); }
.tk-total span:last-child { color: var(--sh-badge); }

.tk-who > div { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; }
.tk-who svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--sh-badge); }
.tk-who span { font-size: .84rem; line-height: 1.5; color: #3A3A36; }

.tk-ask, .tk-review {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none; font-size: .95rem; font-weight: 700;
  padding: 15px; border-radius: 14px;
}
.tk-ask { border: 1px solid #C9E7D5; background: #F0FBF4; color: var(--sh-badge); }
.tk-ask svg { width: 20px; height: 20px; color: #25D366; }
.tk-ask:hover { border-color: #25D366; }
.tk-review { background: var(--sh-badge); color: #fff; }
.tk-review svg { width: 18px; height: 18px; color: #FFD166; }
.tk-review:hover { background: #076B34; }
.tk-note { margin: 9px 0 0; text-align: center; font-size: .72rem; color: var(--sh-muted); }

.tk-find { text-align: center; padding: 22px 16px; }
.tk-find > svg { width: 30px; height: 30px; color: var(--sh-badge); }
.tk-find-h { margin: 12px 0 4px; font-size: .98rem; font-weight: 700; }
.tk-find-p { margin: 0 0 14px; font-size: .82rem; line-height: 1.6; color: var(--sh-muted); }
.tk-miss {
  margin: 0 0 12px; padding: 10px 13px; border-radius: 12px;
  background: #FDECEC; color: #E02B2B; font-size: .8rem; font-weight: 600;
}
.tk-in {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px;
  text-align: center; letter-spacing: .05em; text-transform: uppercase;
  padding: 13px; margin-bottom: 12px;
  border: 1px solid var(--sh-line); border-radius: 12px; background: #FAFAF8;
}
.tk-in:focus { outline: none; border-color: var(--sh-badge); background: #fff; box-shadow: 0 0 0 3px #E8F7EE; }
.tk-go {
  display: block; width: 100%; cursor: pointer; font: inherit;
  font-size: .95rem; font-weight: 700; padding: 15px;
  border: 0; border-radius: 14px; background: var(--sh-badge); color: #fff;
}
.tk-go:hover { background: #076B34; }

@media (min-width: 700px) {
  .tk { padding-top: 26px; }
  .tk-top h1 { font-size: 1.5rem; }
  .tk-card { padding: 17px; }
}

/* ── order placed ───────────────────────────────────── */
.ok { max-width: 1000px; margin: 0 auto; padding: 0 var(--sh-pad) 20px; }
.ok-wrap { max-width: 480px; margin: 0 auto; padding: 26px 0 14px; text-align: center; }

/* a plain ring and tick, nothing filled behind it */
.ok-tick { width: 78px; height: 78px; margin: 0 auto 16px; color: #3E9B5F; }
.ok-tick svg { width: 100%; height: 100%; display: block; }

.ok-wrap h1 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.ok-sub { margin: 9px auto 0; max-width: 34ch; font-size: .9rem; line-height: 1.6; color: var(--sh-muted); }
.ok-sub strong { color: var(--sh-ink); font-weight: 700; }

.ok-code {
  margin: 22px 0 12px; padding: 14px; border-radius: 16px;
  background: #F4FBF6; border: 1px solid #C9E7D5;
}
.ok-code > span { display: block; font-size: .7rem; color: #2F7D4A; }
.ok-copy {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 4px;
  padding: 2px 4px; border: 0; background: none; cursor: pointer; font: inherit;
  color: #3E9B5F;
}
.ok-copy strong { font-size: 1.35rem; font-weight: 800; letter-spacing: .02em; }
.ok-copy svg { width: 17px; height: 17px; flex-shrink: 0; }
.ok-copy.done svg { color: var(--sh-badge); }
.ok-copy.done::after { content: 'Copied'; font-size: .68rem; font-weight: 700; color: var(--sh-badge); }

.ok-card {
  border: 1px solid var(--sh-line); border-radius: 16px;
  background: #fff; padding: 14px; margin-bottom: 12px; text-align: left;
}

.ok-item { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid var(--sh-line); }
.ok-thumb {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 11px;
  overflow: hidden; background: var(--sh-tint);
}
.ok-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ok-what { flex: 1; min-width: 0; }
.ok-what b { display: block; font-size: .86rem; font-weight: 700; line-height: 1.35; }
.ok-what small { display: block; margin-top: 2px; font-size: .74rem; color: var(--sh-muted); }
.ok-line { flex-shrink: 0; font-size: .9rem; font-weight: 700; }

.ok-sums { padding-top: 12px; font-size: .86rem; }
.ok-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.ok-row > span:first-child { color: var(--sh-muted); }
.ok-row .free { color: var(--sh-badge); }
.ok-total {
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--sh-line);
  font-size: 1.05rem; font-weight: 800;
}
.ok-total span:first-child { color: var(--sh-ink); }
.ok-total span:last-child { color: var(--sh-badge); }

.ok-facts > div { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; }
.ok-facts svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--sh-badge); }
.ok-facts span { font-size: .84rem; line-height: 1.5; color: #3A3A36; }

.ok-go {
  display: block; text-align: center; text-decoration: none;
  font-size: 1rem; font-weight: 700; padding: 16px; border-radius: 14px;
  background: var(--sh-badge); color: #fff; margin-top: 4px;
}
.ok-go:hover { background: #076B34; }

@media (min-width: 700px) {
  .ok-wrap { padding: 44px 0 24px; }
  .ok-tick { width: 86px; height: 86px; }
  .ok-wrap h1 { font-size: 1.8rem; }
  .ok-copy strong { font-size: 1.55rem; }
  .ok-card { padding: 16px; }
}

/* ── reviews on the product page ────────────────────── */
.pd-stars { display: inline-flex; gap: 1px; vertical-align: -2px; }
.rv-s { width: 14px; height: 14px; color: #DCDAD1; display: block; flex-shrink: 0; }
.rv-s.on { color: #E0A11A; }
.pd-stars.sm .rv-s { width: 12px; height: 12px; }

.pd-rate { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.pd-rate b { font-weight: 700; color: var(--sh-ink); }
.pd-meta i { font-style: normal; margin: 0 4px; }

.rvs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rvs-head h2 { margin: 0; }
.rvs-write {
  flex-shrink: 0; font-size: .78rem; font-weight: 700;
  padding: 8px 14px; border: 1px solid var(--sh-green);
  border-radius: 999px; color: var(--sh-deep); text-decoration: none;
}
.rvs-write:hover { background: var(--sh-tint); }
.rvs-none { margin: 0; font-size: .88rem; color: var(--sh-muted); }

.rvs-summary {
  display: flex; align-items: center; gap: 20px;
  border: 1px solid var(--sh-line); border-radius: 16px;
  padding: 18px 17px; background: #fff; margin-bottom: 12px;
}
.rvs-score { text-align: center; flex-shrink: 0; }
.rvs-score b { display: block; font-size: 2.1rem; font-weight: 800; line-height: 1; }
.rvs-score .pd-stars { margin-top: 6px; }
.rvs-score small { display: block; margin-top: 4px; font-size: .7rem; color: var(--sh-muted); }
.rvs-bars { flex: 1; min-width: 0; }
.rvs-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.rvs-bar i { font-style: normal; font-size: .7rem; color: var(--sh-muted); width: 8px; flex-shrink: 0; }
.rvs-bar > span { flex: 1; height: 6px; border-radius: 99px; background: #EFEEE9; overflow: hidden; }
.rvs-bar > span > span { display: block; height: 100%; background: #E0A11A; }

.rvs-list { display: flex; flex-direction: column; gap: 10px; }
.rvs-item {
  border: 1px solid var(--sh-line); border-radius: 16px;
  padding: 15px 16px; background: #fff;
}
.rvs-top { display: flex; align-items: center; gap: 10px; }
.rvs-face {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  background: var(--sh-soft); color: #064E3B;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .84rem;
}
.rvs-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rvs-who { flex: 1; min-width: 0; }
.rvs-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: .86rem; font-weight: 700; }
.rvs-ok {
  font-style: normal; font-size: .6rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; background: var(--sh-tint); color: var(--sh-deep);
}
.rvs-top time { flex-shrink: 0; font-size: .7rem; color: var(--sh-muted); }
.rvs-text { margin: 9px 0 0; font-size: .88rem; line-height: 1.65; color: #3A3A36; }
.rvs-shots { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rvs-shots img { width: 68px; height: 68px; border-radius: 10px; object-fit: cover; display: block; }

/* ── legal pages ────────────────────────────────────── */
.sh-legal { max-width: 1000px; margin: 0 auto; padding: 0 var(--sh-pad) 10px; }

.sh-legal-head { padding: 26px 0 22px; border-bottom: 1px solid var(--sh-line); }
.sh-legal-eyebrow {
  display: inline-block; font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sh-deep); background: var(--sh-tint);
  padding: 4px 10px; border-radius: 999px;
}
.sh-legal-head h1 {
  margin: 12px 0 0; font-size: 1.65rem; font-weight: 800;
  letter-spacing: -.025em; line-height: 1.2;
}
.sh-legal-sub { margin: 8px 0 0; max-width: 46ch; font-size: .92rem; line-height: 1.6; color: var(--sh-muted); }
.sh-legal-date {
  display: flex; align-items: center; gap: 7px;
  margin: 14px 0 0; font-size: .74rem; color: var(--sh-muted);
}
.sh-legal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sh-green); flex-shrink: 0; }

.sh-legal-wrap { display: block; }

.sh-legal-toc {
  display: flex; gap: 8px; overflow-x: auto;
  margin: 18px calc(var(--sh-pad) * -1) 0; padding: 0 var(--sh-pad) 4px;
  scrollbar-width: none;
}
.sh-legal-toc::-webkit-scrollbar { display: none; }
.sh-legal-toc-lbl { display: none; }
.sh-legal-toc a {
  flex-shrink: 0; font-size: .76rem; font-weight: 600; white-space: nowrap;
  padding: 7px 13px; border: 1px solid var(--sh-line); border-radius: 999px;
  color: var(--sh-muted); text-decoration: none;
}
.sh-legal-toc a:hover { border-color: var(--sh-green); color: var(--sh-deep); background: var(--sh-tint); }

.sh-legal-body section {
  padding: 22px 0;
  border-bottom: 1px solid var(--sh-line);
  scroll-margin-top: 90px;
}
.sh-legal-body section:last-child { border-bottom: 0; }
.sh-legal-body h2 {
  margin: 0 0 10px; font-size: 1.05rem; font-weight: 700;
  letter-spacing: -.01em; padding-left: 13px; border-left: 3px solid var(--sh-green);
  border-radius: 0;
}
.sh-legal-body p { margin: 0 0 12px; font-size: .93rem; line-height: 1.75; color: #3A3A36; }
.sh-legal-body p:last-child { margin-bottom: 0; }
.sh-legal-body strong { font-weight: 700; color: var(--sh-ink); }

.sh-legal-help {
  margin-top: 22px; padding: 20px; border-radius: 16px;
  background: var(--sh-tint); border: 1px solid var(--sh-soft);
}
.sh-legal-help h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: #064E3B; }
.sh-legal-help p { margin: 0; font-size: .88rem; line-height: 1.6; color: #065F46; max-width: 48ch; }
.sh-legal-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.sh-legal-links a {
  font-size: .8rem; font-weight: 600; padding: 8px 14px;
  border: 1px solid var(--sh-soft); border-radius: 999px;
  background: #fff; color: var(--sh-deep); text-decoration: none;
}
.sh-legal-links a:hover { border-color: var(--sh-green); }
.sh-legal-links .sh-legal-cta { background: var(--sh-deep); border-color: var(--sh-deep); color: #ECFDF5; }

/* ── footer ─────────────────────────────────────────── */
body.shop .foot { display: none; }

.sh-foot { margin-top: auto; background: #FAFAF8; border-top: 1px solid var(--sh-line); }
.sh-foot-btm {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  max-width: 1240px; margin: 0 auto;
  padding: 16px var(--sh-pad) calc(16px + env(safe-area-inset-bottom));
  font-size: .68rem; color: var(--sh-muted);
}
.sh-foot-btm > span { min-width: 0; }
.sh-foot-btm a { flex-shrink: 0; color: var(--sh-muted); text-decoration: none; }
.sh-foot-btm a:hover { color: var(--sh-deep); }

/* ── wider screens ──────────────────────────────────── */
@media (min-width: 700px) {
  :root { --sh-pad: 24px; }
  .sh-top { font-size: .78rem; justify-content: space-between; max-width: 1240px; margin: 0 auto; }
  .sh-top-free { display: inline; }
  .sh-m { display: none; }
  .sh-nav { display: flex; }
  .sh-search { display: flex; margin: 0 8px; }
  .sh-search-m { display: none; }
  .sh-brand { font-size: 1.15rem; }
  .sh-sec { padding: 26px 0; }
  .sh-h { font-size: 1.2rem; }
  .sh-slide { min-height: 240px; padding: 0 40px 26px; }
  .sh-title { font-size: 2rem; }
  .sh-note { font-size: .92rem; }
  .sh-trust { font-size: .82rem; padding: 16px 8px; }
  .sh-i { width: 22px; height: 22px; }
  .sh-cats > .sh-cat { flex: 0 0 calc((100% - 60px) / 6); }
  .sh-cat img, .sh-cat-blank { max-width: 86px; }
  .sh-cat-blank { font-size: 1.4rem; }
  .sh-cat-name { font-size: .8rem; }
  .sh-sale-rail > .sh-card { flex: 0 0 calc((100% - 36px) / 4); }
  .sh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .sh-name { font-size: .88rem; }
  .sh-cut { padding: 2px 8px; }
  .sh-sold { font-size: .76rem; }
  .sh-banner, .sh-sec { max-width: 1240px; margin-left: auto; margin-right: auto; }
  /* the width matters here: body is a flex column, and a child with auto
     side margins but no width shrinks to its own text instead of filling */
  .sh-trust, .sh-sale, #products.sh-sec {
    width: calc(100% - var(--sh-pad) * 2);
    max-width: calc(1240px - var(--sh-pad) * 2);
    margin-left: auto; margin-right: auto;
  }
  #products .sh-h, #products .sh-sec-head { padding-left: 22px; padding-right: 22px; }
  #products .sh-grid { padding: 0 22px; }
  .sh-foot-btm { font-size: .78rem; justify-content: space-between; }

  .pd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; padding-top: 22px; }
  .pd-info { padding-top: 0; }
  .pd-info h1 { font-size: 1.5rem; }
  .pd-now { font-size: 1.9rem; }
  .pd-was { font-size: 1rem; }
  .pd-thumb { width: 66px; height: 66px; }
  .pd-trust > span { padding: 16px 8px; }
  .pd-ico { margin-bottom: 11px; }
  .pd-ico svg { width: 32px; height: 32px; }
  .pd-trust > span { padding: 22px 10px; }
  .pd-trust > span::after { top: 20px; bottom: 20px; }
  .pd-trust b { font-size: .8rem; }
  .pd-order, .pd-confirm { font-size: 1.05rem; }
  .pd-sticky { display: none; }
  .pd { padding-bottom: 20px; }
  .pd-sec h2 { font-size: 1.2rem; }
  .pd-desc { font-size: .96rem; padding: 20px 22px; }
  .pd-desc img, .pd-desc video { width: calc(100% + 44px); margin: 16px -22px; }
  .pd-h-ico svg { width: 21px; height: 21px; }
  .rvs-summary { padding: 22px 20px; }
  .rvs-item { padding: 17px 20px; }
  .ok-wrap { padding: 46px 0 20px; }

  .sh-legal-head { padding: 40px 0 28px; }
  .sh-legal-head h1 { font-size: 2.2rem; margin-top: 14px; }
  .sh-legal-sub { font-size: 1rem; }
  .sh-legal-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 44px; align-items: start; }
  .sh-legal-toc {
    display: flex; flex-direction: column; gap: 2px; overflow: visible;
    position: sticky; top: 96px; margin: 30px 0 0; padding: 0;
  }
  .sh-legal-toc-lbl {
    display: block; margin-bottom: 8px; font-size: .64rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--sh-muted);
  }
  .sh-legal-toc a {
    border: 0; border-left: 2px solid var(--sh-line); border-radius: 0;
    padding: 7px 0 7px 14px; font-weight: 400; font-size: .84rem;
  }
  .sh-legal-toc a:hover { background: none; border-left-color: var(--sh-green); }
  .sh-legal-body section { padding: 26px 0; }
  .sh-legal-body section:first-child { padding-top: 30px; }
  .sh-legal-body h2 { font-size: 1.15rem; }
  .sh-legal-body p { font-size: .96rem; }
  .sh-legal-help { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; }
  .sh-legal-links { margin-top: 0; flex-shrink: 0; }
}

@media (min-width: 1100px) {
  .sh-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sh-cats > .sh-cat { flex: 0 0 calc((100% - 84px) / 8); }
  .sh-sale-rail > .sh-card { flex: 0 0 calc((100% - 60px) / 5); }
}
/* the order number block sat too tall — View order was pushed off the screen */
.ok-code { margin: 14px 0 10px; padding: 11px; border-radius: 14px; }
.ok-code > span { font-size: .66rem; }
.ok-copy { margin-top: 2px; gap: 8px; }
.ok-copy strong { font-size: 1.15rem; }
.ok-copy svg { width: 15px; height: 15px; }

@media (min-width: 700px) {
  .ok-copy strong { font-size: 1.3rem; }
}
/* the description needs no box of its own — the section line above it is enough */
.pd-desc { border: 0; }
/* ten reviews show at once; the rest wait behind the button */
.rvs-item.rvs-more { display: none; }

.rvs-all {
  display: block; width: 100%; margin-top: 14px;
  font: inherit; font-size: .9rem; font-weight: 700; color: var(--sh-deep);
  padding: 13px; cursor: pointer;
  background: #fff; border: 1px solid var(--sh-soft); border-radius: 14px;
  transition: background .14s, border-color .14s;
}
.rvs-all:hover { background: var(--sh-tint); border-color: var(--sh-green); }
.rvs-all:active { transform: scale(.995); }
/* ten reviews show at once; the rest wait behind the button */
.rvs-item.rvs-more { display: none; }

.rvs-all {
  display: block; width: 100%; margin-top: 14px;
  font: inherit; font-size: .9rem; font-weight: 700; color: var(--sh-deep);
  padding: 13px; cursor: pointer;
  background: #fff; border: 1px solid var(--sh-soft); border-radius: 14px;
  transition: background .14s, border-color .14s;
}
.rvs-all:hover { background: var(--sh-tint); border-color: var(--sh-green); }
.rvs-all:active { transform: scale(.995); }

/* a reviewer with no photo gets a colour of their own, always the same one */
.rvs-face.c1 { background: #D9EAD3; color: #2F5D2A; }
.rvs-face.c2 { background: #FCE4D6; color: #7A3A15; }
.rvs-face.c3 { background: #DEE7F5; color: #1F3F70; }
.rvs-face.c4 { background: #F6E2EC; color: #6E2545; }
.rvs-face.c5 { background: #FBEFD2; color: #6B4C10; }
.rvs-face.c6 { background: #E2E0F2; color: #37306B; }
/* the order button while the order is on its way */
.co-go.is-busy {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #0B7A3C; cursor: default; opacity: 1;
}
.co-go.is-busy::before {
  content: ''; width: 17px; height: 17px; flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff; border-radius: 50%;
  animation: coSpin .7s linear infinite;
}
@keyframes coSpin { to { transform: rotate(360deg); } }

/* nothing on the form can be changed once it is on its way */
.co-go.is-busy ~ *, form.co:has(.co-go.is-busy) .co-in,
form.co:has(.co-go.is-busy) .co-pack { pointer-events: none; }
form.co:has(.co-go.is-busy) .co-pack { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .co-go.is-busy::before { animation: none; }
}
/* ── was this review any use? ───────────────────────── */
.rvs-vote {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #F1F0EC;
}
.rvs-v {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; cursor: pointer; font: inherit;
  font-size: .84rem; font-weight: 600; line-height: 1;
  background: #fff; border-radius: 999px; border: 1px solid var(--sh-line);
  transition: background .14s, border-color .14s;
}
.rvs-v svg { width: 17px; height: 17px; flex-shrink: 0; }
.rvs-v b { font-variant-numeric: tabular-nums; }
.rvs-v b:empty { display: none; }

.rvs-v.up   { border-color: #d6e5d9; color: #2e7d4f; }
.rvs-v.down { border-color: #eddada; color: #c0392b; }
.rvs-v.up.on   { background: #eef6f0; border-color: #2e7d4f; }
.rvs-v.down.on { background: #fdeeec; border-color: #c0392b; }
.rvs-v.on svg { fill: currentColor; }

.rvs-ask { margin-left: auto; font-size: .78rem; color: #8a8a8a; }
.co-tel {
  display: flex; align-items: stretch;
  margin-bottom: 14px;
  border: 1px solid var(--sh-line); border-radius: 12px;
  background: #FAFAF8; overflow: hidden;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.co-tel:focus-within {
  border-color: var(--sh-badge); background: #fff; box-shadow: 0 0 0 3px #E8F7EE;
}

.co-tel-code {
  display: flex; align-items: center; gap: 7px;
  padding: 0 11px 0 13px; flex-shrink: 0;
  border-right: 1px solid var(--sh-line);
  color: var(--sh-muted);
}
.co-tel:focus-within .co-tel-code { color: var(--sh-deep); }
.co-tel-code svg { width: 17px; height: 17px; flex-shrink: 0; }
.co-tel-code b { font-size: 15px; font-weight: 600; color: var(--sh-ink); }

/* the box inside gives up its own frame — the wrapper carries it now */
.co-tel .co-in {
  margin: 0; border: 0; border-radius: 0; background: none;
  letter-spacing: .3px;
}
.co-tel .co-in:focus { box-shadow: none; background: none; }

/* a number we cannot deliver to */
.co-tel:has(.co-in.bad) { border-color: #E02B2B; background: #FDF4F4; }
.co-tel:has(.co-in.bad) .co-tel-code { color: #B91C1C; border-right-color: #F0C4BC; }
.co-tel .co-in.bad { background: none; border: 0; }
/* ── name and address: an icon inside, no divider ───── */
.co-field {
  display: flex; align-items: stretch;
  margin-bottom: 14px;
  border: 1px solid var(--sh-line); border-radius: 12px;
  background: #FAFAF8; overflow: hidden;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.co-field:focus-within {
  border-color: var(--sh-badge); background: #fff; box-shadow: 0 0 0 3px #E8F7EE;
}

.co-field-ico {
  display: flex; align-items: center; padding: 0 11px 0 13px;
  flex-shrink: 0; color: var(--sh-muted);
}
.co-field:focus-within .co-field-ico { color: var(--sh-deep); }
.co-field-ico svg { width: 18px; height: 18px; }

/* an address can run to two lines, so its pin holds the top */
.co-field-tall { align-items: flex-start; }
.co-field-tall .co-field-ico { align-items: flex-start; padding-top: 14px; }

/* the box gives up its own frame — the wrapper carries it now */
.co-field .co-in {
  margin: 0; border: 0; border-radius: 0; background: none; padding-left: 0;
}
.co-field .co-in:focus { box-shadow: none; background: none; }

/* a field left empty */
.co-field:has(.co-in.bad) { border-color: #E02B2B; background: #FDF4F4; }
.co-field:has(.co-in.bad) .co-field-ico { color: #B91C1C; }
.co-field .co-in.bad { background: none; border: 0; }

/* ── the warning under a field ──────────────────────── */
.co-err {
  display: flex; align-items: flex-start; gap: 5px;
  margin: -8px 0 14px; font-size: .76rem; line-height: 1.5; color: var(--sh-red);
}
.co-err svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
/* ── an order this number already has ───────────────── */
.co-have {
  margin: 0 0 12px; padding: 13px 15px;
  border: 1px solid #C9E7D5; border-radius: 14px; background: #F4FBF6;
}
.co-have-top { display: flex; align-items: flex-start; gap: 10px; }
.co-have-top > svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; color: #3E9B5F; }
.co-have-top b { display: block; font-size: .84rem; font-weight: 600; color: #2F7D4A; }
.co-have-top small { display: block; margin-top: 3px; font-size: .78rem; line-height: 1.55; color: #3A6B4C; }

.co-have-go {
  display: block; margin-top: 11px; text-align: center; text-decoration: none;
  font-size: .84rem; font-weight: 700; padding: 10px;
  border-radius: 10px; background: var(--sh-badge); color: #fff;
}
.co-have-go:hover { background: #076B34; }



/* ── the checkout, in two shades ─────────────────────
   The cards sit back a shade; everything you can tap or type into comes
   forward in white. What has been chosen is the only thing tinted, so the
   eye goes to it without any heavier line being needed. */

.co-card { background: #F8F8F5; }

/* an unchosen pack, and an empty field, both come forward */
.co-pack { background: #fff; }
.co-pack.on { background: #F0FBF4; }

.co-field, .co-tel { background: #fff; }
.co-field:focus-within, .co-tel:focus-within { background: #fff; }

/* an empty field should read as empty — the hint and its icon stay pale
   until something is typed */
.co-in::placeholder { color: #B4B4AE; opacity: 1; }
.co-field-ico, .co-tel-code { color: #B4B4AE; }
.co-field:focus-within .co-field-ico,
.co-tel:focus-within .co-tel-code { color: var(--sh-deep); }

/* ── the running total under the packs ──────────────── */
.co-pack-sum {
  display: flex; align-items: baseline; gap: 11px;
  margin-top: 14px; border-top: 1px solid var(--sh-line);
  /* a pack sits in a card with its own padding, so the same inset is needed
     here for the figures to line up down the right edge */
  padding: 13px 11px 0 0;
}
.co-pack-sum > span { flex: 1; min-width: 0; font-size: .88rem; font-weight: 700; }
.co-pack-sum b {
  width: 86px; flex-shrink: 0; text-align: right;
  font-size: 1.05rem; font-weight: 800; color: var(--sh-ink);
}
.co-pack-cost { width: 86px; }

/* ── size and colour, where a product comes in more than one ── */
.co-pick { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--sh-line); }
.co-pick .co-h { margin-bottom: 10px; }
.co-pick .co-h b { color: #E02B2B; font-weight: 700; }
.co-pick .co-h-next { margin-top: 16px; }

.co-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.co-chip { margin: 0; cursor: pointer; }
.co-chip input { position: absolute; opacity: 0; width: 0; height: 0; }

.co-chip span {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 46px; justify-content: center;
  padding: 9px 13px; border: 1px solid var(--sh-line); border-radius: 10px;
  background: #fff; color: var(--sh-muted);
  font-size: .82rem; font-weight: 600;
  transition: border-color .12s, background .12s, color .12s;
}
.co-chip:hover span { border-color: var(--sh-soft); color: var(--sh-deep); }

.co-chip input:checked + span {
  border: 2px solid var(--sh-badge); padding: 8px 12px;
  background: #F0FBF4; color: var(--sh-badge); font-weight: 700;
}
.co-chip input:focus-visible + span { outline: 2px solid var(--sh-deep); outline-offset: 2px; }

/* the dot takes the colour of the thing itself */
.co-dot {
  width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .14);
}

/* nothing chosen yet, and Order was pressed */
.co-chips.bad .co-chip span { border-color: #E02B2B; background: #FDF4F4; }
.co-chips.bad .co-chip input:checked + span { border-color: var(--sh-badge); background: #F0FBF4; }
.co-chips + .co-err { margin-top: 8px; margin-bottom: 0; }

/* ── the totals, inside the details card ────────────── */
.co-card .co-sum {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--sh-line);
}
.co-card .co-go { margin-top: 16px; }

/* the rating and the sold count share one line, and one baseline */
.pd-meta {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.pd-rate { display: inline-flex; align-items: center; gap: 5px; }

/* the rating and the sold count read as one line, in one weight */
.pd-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--sh-ink); font-weight: 500;
}
.pd-rate { display: inline-flex; align-items: center; gap: 5px; color: inherit; }
.pd-rate b, .pd-rate span { font-weight: 500; color: inherit; }

/* an upright bar parts them more cleanly than a dot did */
.pd-meta i {
  font-style: normal; margin: 0;
  color: var(--sh-line); font-weight: 400;
}

/* a card's rating and sold count read as one line, the way the product page does */
.sh-sold {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--sh-ink); font-weight: 500;
}
.sh-sold .sh-rate,
.sh-sold .sh-rate i,
.sh-sold > span { color: inherit; font-weight: 500; font-style: normal; }

/* an upright bar parts them more cleanly than a dot did */
.sh-dot-sep { font-style: normal; margin: 0; color: var(--sh-line); font-weight: 400; }

/* ── On sale: exactly two cards, and neither one clipped ──
   A card snaps to the rail's edge, not to where its padding ends — so after a
   swipe the first one slid under the padding and read as cut off. Telling the
   rail where its scroll should stop puts every card flush with the same
   left edge the heading uses. */
.sh-sale-rail {
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  scroll-padding-right: 16px;
}

/* two fill the width; the third waits off-screen until it is swiped to */
.sh-sale-rail > .sh-card { flex: 0 0 calc((100% - 12px) / 2); }

@media (min-width: 700px) {
  .sh-sale-rail { scroll-padding-left: 16px; scroll-padding-right: 16px; }
}
.sh-sale .sh-h { padding-left: 12px; padding-right: 12px; }
.sh-sale { padding-bottom: 8px; }

/* the rail gives back a little of its edge, so the struck-through price
   has room to sit whole instead of trailing off */
.sh-sale .sh-rail { padding-left: 12px; padding-right: 12px; gap: 10px; }
.sh-sale-rail { scroll-padding-left: 12px; scroll-padding-right: 12px; }
.sh-sale-rail > .sh-card { flex: 0 0 calc((100% - 10px) / 2); }
/* Three things share one narrow line — the price, the old price and the
   discount. On a small phone the middle one ran out of room and trailed off,
   so the row is tightened a touch and the old price is allowed to stay whole
   rather than being the one that gives way. */
.sh-prices { gap: 4px; }
.sh-was { flex-shrink: 0; overflow: visible; text-overflow: clip; font-size: clamp(9px, 2.5vw, 12px); }
.sh-cut { padding: 2px 6px; font-size: clamp(8.5px, 2.3vw, 11px); }
.sh-now { font-size: clamp(12px, 3.4vw, 15px); }

@media (max-width: 360px) {
  .sh-cut { padding: 2px 5px; }
  .sh-prices { gap: 3px; }
}
/* The two-across rule for a phone was appended at the end of this file, which
   put it after the wider-screen rules and let it win everywhere. Saying the
   desktop widths again, last, settles it: two on a phone, four on a laptop,
   five on a wide screen. */
@media (min-width: 700px) {
  .sh-sale-rail > .sh-card { flex: 0 0 calc((100% - 36px) / 4); }
  .sh-sale .sh-rail { padding-left: 16px; padding-right: 16px; gap: 12px; }
  .sh-sale-rail { scroll-padding-left: 16px; scroll-padding-right: 16px; }
}
@media (min-width: 1100px) {
  .sh-sale-rail > .sh-card { flex: 0 0 calc((100% - 60px) / 5); }
}
/* On this page there is nothing to see sideways and nothing to zoom into —
   only a form to fill in. The page is told to take a finger up and down and
   nothing else, which stops the sideways drift and the double-tap zoom that
   comes with it. */
html:has(.rv), body.shop:has(.rv) {
  touch-action: pan-y;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
.rv, .rv-card, .rv-card * { touch-action: pan-y; max-width: 100%; }

/* a plain outline instead of a dashed one — the camera inside already says
   what it is for, so the ring does not need to shout */
.rv-avatar { border: 1px solid #E7E5DF; }
.rv-avatar:hover { border-color: var(--sh-green); }

/* ── the strip above the header ──────────────────────
   A line that moves gets read; one that sits still stops being seen. The four
   notes are written out twice and the pair slides left by exactly half its
   width, so the loop closes on itself with no gap and no jump. */
.sh-top {
  display: block; padding: 0; overflow: hidden;
  background: var(--sh-badge); color: #fff; border-bottom: 0;
}

.sh-top-run {
  display: flex; width: max-content; padding: 9px 0;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  animation: shTopRun 26s linear infinite;
}
@keyframes shTopRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.sh-top-one { display: inline-flex; align-items: center; gap: 7px; padding: 0 20px; }
.sh-top-one svg { width: 14px; height: 14px; flex-shrink: 0; }
.sh-top-one b { font-weight: 800; }
.sh-top-gem { font-style: normal; opacity: .45; }

/* the plain line is what a reader gets when movement is unwelcome */
.sh-top-plain { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sh-top-run { display: none; }
  .sh-top-plain {
    display: block; padding: 9px 14px; text-align: center;
    font-size: .72rem; font-weight: 600;
  }
}

@media (min-width: 700px) {
  .sh-top-run { font-size: .76rem; animation-duration: 34s; }
  .sh-top-one { padding: 0 26px; }
}
.sh-top {
  display: block; padding: 0; overflow: hidden;
  background: #F0FBF4; color: var(--sh-ink); border-bottom: 0;
    margin: 10px var(--sh-pad) 0; border-radius: 10px;
}

/* the marks and the offer keep the green; the words read as ordinary text */
.sh-top-one svg { color: var(--sh-badge); }
.sh-top-one b { color: var(--sh-badge); }
.sh-top-gem { color: var(--sh-ink); opacity: 1; }

/* the running strip belongs on the home page — a shopper already reading a
   product or filling in a checkout does not need it moving above them */
body.shop .sh-top { display: none; }
body.shop:has(.sh-banner) .sh-top { display: block; }

/* Three figures share one line, and on a narrow phone they simply ran out of
   room. Rather than dropping the discount to a second line — which changes
   the shape of the card — the whole row shrinks with the screen, so every
   phone shows the same thing, just smaller. */
.sh-prices { flex-wrap: nowrap; overflow: visible; gap: 3px; }
.sh-now { flex-shrink: 0; font-size: clamp(11px, 3.3vw, 15px); }
.sh-was { flex-shrink: 0; overflow: visible; text-overflow: clip; font-size: clamp(8px, 2.4vw, 12px); }
.sh-cut {
  flex-shrink: 0; white-space: nowrap;
  padding: 2px clamp(4px, 1.4vw, 7px);
  font-size: clamp(7.5px, 2.1vw, 11px);
}

/* every card in a row keeps the same height */
.sh-grid > .sh-card, .sh-rail > .sh-card { display: flex; flex-direction: column; }
.sh-card-body { flex: 1; display: flex; flex-direction: column; }
.sh-prices { margin-top: auto; }

/* the courier's known places, suggested as the address is typed */
.co-sugg { position: relative; }
.co-sugg .co-field { margin-bottom: 14px; }

.co-sugg-list {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 40;
  max-height: 264px; overflow-y: auto;
  border: 1px solid var(--sh-line); border-radius: 12px; background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.co-sugg-list[hidden], .co-sugg-ok[hidden] { display: none; }

.co-sugg-one {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 13px; cursor: pointer; text-align: left;
  font: inherit; background: none; border: 0; border-top: 1px solid #F1F0EC;
}
.co-sugg-one:first-child { border-top: 0; background: var(--sh-tint); }
.co-sugg-one:hover { background: var(--sh-tint); }

.co-sugg-pin { display: flex; flex-shrink: 0; color: var(--sh-muted); }
.co-sugg-pin svg { width: 16px; height: 16px; }
.co-sugg-one:first-child .co-sugg-pin { color: var(--sh-badge); }

.co-sugg-txt { min-width: 0; }
.co-sugg-txt b, .co-sugg-txt small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-sugg-txt b { font-size: .84rem; font-weight: 600; }
.co-sugg-txt small { margin-top: 1px; font-size: .72rem; color: var(--sh-muted); }

.co-sugg-ok {
  display: flex; align-items: center; gap: 5px;
  margin: -8px 0 14px; font-size: .74rem; color: var(--sh-badge);
}
.co-sugg-ok svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── a buyer whose order we can see ─────────────────── */
.rvs-name { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.rvs-tick {
  width: 15px; height: 15px; flex-shrink: 0;
  color: #1D9BF0;   /* the blue everyone already reads as "checked" */
}

/* the words stay quiet — the tick is what carries the meaning */
.rvs-ok {
  font-style: normal; font-size: .68rem; font-weight: 500;
  padding: 0; border-radius: 0; background: none; color: var(--sh-muted);
}

/* the count is a footnote to the score, and the bar between them a divider —
   neither is the figure being read, so neither sits at full black */
.pd-rate span:last-child { color: var(--sh-muted); font-weight: 500; }
.pd-meta i { color: var(--sh-ink); opacity: .45; font-weight: 400; }