/*
 * Jeere Studio — store.css
 * Styles of the rendered stores (render.js). Everything is scoped under .jst: nothing leaks to
 * the page around the preview. The layout reads only data-device ("phone" ≈ 390 px,
 * "desktop" ≈ 1200 px), never the viewport, because the preview sits in a frame of fixed width.
 *
 * Variables set by render.js on the root: --st-bg --st-surface --st-text --st-muted --st-accent
 * --st-on-accent --st-line --st-radius --st-font-display --st-font-text --st-display-weight,
 * with the seller's fonts (theme.typography) --st-hs (titles' size), --st-hf (text logo's size), --st-fsa and
 * [data-hcase="upper" | "none"] (capitals), see « the seller's fonts » at the end; plus derived ones: --st-accent-ink --st-accent-soft --st-surface-2 --st-text-soft
 * --st-photo-btn-bg --st-photo-btn-fg, and the contrast-checked vivid set: --st-tint
 * --st-tint-strong --st-accent-text --st-muted-tint --st-muted-strong --st-on-accent-soft
 * --st-field-line. Product tiles carry --tile --tile-hi --ink inline.
 *
 * Templates: [data-tpl="plateau"] editorial · [data-tpl="cocody"] soft · [data-tpl="treichville"] bold.
 * Pages: [data-page="home" | "product" | "cart" | "checkout" | "confirmation" | "page"] (page: the
 * seller's own pages, .jst-cp*); the phone menu is .jst-drawer, the footer pages .jst-footer-links.
 * Colour intensity: [data-intensity="vivid"] (the accent carries the page) or "soft".
 */

/* ===================================================================== base */

.jst {
  --st-gutter: 20px;
  --st-sec: 64px;
  --st-max: 1120px;
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip; /* clips decoration without turning the root into a scroll container */
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: var(--st-bg, #F6F2EA);
  color: var(--st-text, #1B1814);
  font-family: var(--st-font-text, system-ui, sans-serif);
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: left;
  text-transform: none;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
.jst[data-device="desktop"] { --st-gutter: 40px; --st-sec: 104px; font-size: 16px; }

.jst *, .jst *::before, .jst *::after { box-sizing: border-box; }
.jst * { letter-spacing: inherit; word-spacing: inherit; text-shadow: inherit; }
.jst :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, figcaption, nav, header, footer, main, section, article) { margin: 0; padding: 0; border: 0; }
/* Text elements take everything from the store, whatever global rules the host page has. */
.jst :where(h1, h2, h3, h4, p, li, blockquote, figcaption, span, a, b, strong, small, i) { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; background: none; box-shadow: none; }
.jst :where(ul, ol) { list-style: none; }
.jst :where(img, svg) { display: block; max-width: 100%; }
.jst :where(img) { height: auto; border: 0; }
.jst :where(a) { color: inherit; text-decoration: none; background: none; }
.jst :where(b, strong) { font-weight: 700; }
.jst :where(i) { font-style: normal; }
.jst :where(button) {
  font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
  width: auto; height: auto; min-width: 0; min-height: 0; box-shadow: none; text-align: inherit;
  letter-spacing: inherit; text-transform: inherit; line-height: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.jst ::selection { background: var(--st-accent); color: var(--st-on-accent); }

.jst .jst-wrap { width: 100%; max-width: calc(var(--st-max) + 2 * var(--st-gutter)); margin: 0 auto; padding: 0 var(--st-gutter); }
.jst .jst-main { display: block; padding-bottom: calc(var(--st-sec) / 4); }
/* A full-bleed band that ends the page meets the footer. */
.jst[data-tpl="plateau"] .jst-main > .jst-sec--whatsapp:last-child,
.jst[data-tpl="treichville"] .jst-main > .jst-sec--whatsapp:last-child { padding-bottom: 0; margin-bottom: calc(var(--st-sec) / -4); }
.jst .jst-sec { display: block; padding: calc(var(--st-sec) / 2) 0; }

/* ===================================================================== primitives */

.jst .jst-h {
  font-family: var(--st-font-display);
  font-weight: var(--st-display-weight, 600);
  line-height: 1.12;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.jst .jst-ico { width: 20px; height: 20px; flex: none; }
.jst .jst-muted-inline { opacity: .55; font-style: italic; }

/* Buttons: theme.buttons solid = accent background, outline = 1.5 px accent border. */
.jst .jst-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; max-width: 100%;
  border: 1.5px solid var(--st-accent); border-radius: var(--st-radius);
  background: var(--st-accent); color: var(--st-on-accent);
  font-family: var(--st-font-text); font-size: 14px; font-weight: 600; line-height: 1.15; text-align: center;
  letter-spacing: .01em; text-transform: none; white-space: normal;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, opacity .18s ease;
}
.jst .jst-btn .jst-ico { width: 18px; height: 18px; }
.jst .jst-btn-label { min-width: 0; overflow-wrap: anywhere; }
.jst .jst-btn--lg { min-height: 52px; padding: 0 26px; font-size: 15px; }
.jst .jst-btn--sm { min-height: 38px; padding: 0 12px; font-size: 13px; gap: 6px; white-space: nowrap; }
.jst .jst-btn--sm .jst-ico { width: 16px; height: 16px; }
.jst .jst-btn--block { width: 100%; }
.jst[data-buttons="outline"] .jst-btn { background: transparent; color: var(--st-accent-ink); border-color: var(--st-accent-ink); }
.jst .jst-on-accent .jst-btn { background: var(--st-on-accent); color: var(--st-accent); border-color: var(--st-on-accent); }
.jst[data-buttons="outline"] .jst-on-accent .jst-btn { background: transparent; color: var(--st-on-accent); }
.jst[data-device="desktop"] .jst-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45); }
.jst .jst-btn-arrow { transition: transform .2s ease; }
.jst[data-device="desktop"] .jst-btn:hover .jst-btn-arrow { transform: translateX(3px); }

.jst .jst-price { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.jst .jst-price-c { font-size: max(11px, .72em); font-weight: 500; letter-spacing: .05em; }
.jst .jst-price.is-empty { font-weight: 500; font-size: .92em; color: var(--st-muted); }

.jst .jst-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--st-accent-ink); flex: none; }
.jst .jst-star { width: 14px; height: 14px; flex: none; }
.jst .jst-star.is-off { opacity: .22; }

.jst .jst-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  background: var(--st-surface); color: var(--st-text);
  font-family: var(--st-font-text); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .02em; white-space: nowrap;
}

/* Product tiles: the seller's photo, or the illustration on a tile of the product colour. */
.jst .jst-tile { position: relative; overflow: hidden; background: var(--tile, var(--st-surface)); }
.jst .jst-tile > svg.jst-art { position: absolute; left: 7%; top: 6%; width: 86%; height: 88%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.jst[data-tpl="cocody"] .jst-card-media > svg.jst-art, .jst[data-tpl="treichville"] .jst-card-media > svg.jst-art { left: 3%; top: 3%; width: 94%; height: 94%; }
.jst .jst-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }

.jst .jst-empty {
  display: flex; align-items: center; gap: 12px; padding: 22px 20px;
  border: 1.5px dashed var(--st-line); border-radius: max(var(--st-radius), 8px);
  color: var(--st-muted); font-size: 14px; line-height: 1.5;
}
.jst .jst-empty .jst-ico { width: 22px; height: 22px; color: var(--st-accent-ink); opacity: .7; }
.jst .jst-page-empty { padding-top: 48px; padding-bottom: 48px; }

.jst .jst-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jst .jst-chip {
  display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px;
  border: 1px solid var(--st-line); font-size: 12.5px; font-weight: 500; line-height: 1.2;
}

.jst .jst-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; }
.jst .jst-kicker::before { content: ''; flex: none; width: 28px; height: 1px; background: currentColor; }

.jst .jst-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--st-accent-ink); cursor: pointer; white-space: nowrap; }
.jst .jst-link .jst-ico { width: 16px; height: 16px; }

/* ===================================================================== shared structure */

/* Header */
.jst .jst-header { position: relative; z-index: 3; background: var(--st-bg); border-bottom: 1px solid var(--st-line); }
.jst .jst-header-in { display: grid; align-items: center; gap: 8px; min-height: 64px; }
.jst .jst-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; color: inherit; }
.jst .jst-icon-btn .jst-ico { width: 22px; height: 22px; }
.jst .jst-menu { grid-area: menu; }
.jst .jst-logo {
  grid-area: logo; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); font-size: calc(20px * var(--st-hf, 1)); line-height: 1.25;
}
.jst .jst-logo.is-placeholder { opacity: .5; }
.jst .jst-nav { grid-area: nav; display: none; align-items: center; gap: 28px; min-width: 0; }
/* Plateau and Treichville: links that do not fit drop to a hidden second row instead of overlapping the logo. */
.jst[data-tpl="plateau"] .jst-nav, .jst[data-tpl="treichville"] .jst-nav { flex-wrap: wrap; height: 44px; overflow: hidden; row-gap: 0; }
.jst[data-tpl="plateau"] .jst-nav-link, .jst[data-tpl="treichville"] .jst-nav-link { display: inline-flex; align-items: center; height: 44px; }
.jst .jst-nav-link { font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: opacity .15s ease; }
.jst[data-device="desktop"] .jst-nav-link:hover { opacity: .6; }
.jst .jst-header-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.jst[data-device="phone"] .jst-search { display: none; }
.jst[data-device="desktop"] .jst-menu { display: none; }
.jst[data-device="desktop"] .jst-nav { display: flex; }

/* Section heads */
.jst .jst-head { display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 24px; }
.jst .jst-head--reviews { flex-wrap: wrap; }
.jst .jst-head-title { flex: 0 1 auto; min-width: 0; font-size: calc(28px * var(--st-hs, 1)); }
.jst .jst-head-aside { flex: none; max-width: 100%; }
.jst .jst-head-count { font-size: 13px; color: var(--st-muted); white-space: nowrap; }

/* Products grid (phone always 2 columns) */
.jst .jst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
.jst[data-device="desktop"] .jst-grid { gap: 48px 24px; }
.jst[data-device="desktop"] .jst-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jst[data-device="desktop"] .jst-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jst[data-device="desktop"] .jst-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jst .jst-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.jst .jst-card-media { aspect-ratio: 1 / 1; border-radius: var(--st-radius); }
.jst .jst-card-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 3px; min-width: 0; padding-top: 12px; }
.jst .jst-card-cat { font-size: 11px; line-height: 1.3; color: var(--st-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jst .jst-card-name {
  font-family: var(--st-font-text); font-size: 14px; font-weight: 500; line-height: 1.35;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jst .jst-card-price { font-size: 14.5px; font-weight: 600; margin-bottom: 12px; }
.jst .jst-card-btn { margin-top: auto; }
.jst .jst-fav { display: none; }
.jst[data-device="desktop"] .jst-card-name { font-size: 15px; }
.jst[data-device="desktop"] .jst-card-price { font-size: 15.5px; }
.jst[data-device="desktop"] .jst-card:hover .jst-tile > svg.jst-art,
.jst[data-device="desktop"] .jst-card:hover .jst-tile > img { transform: scale(1.045); }

/* Categories */
.jst .jst-cats { display: grid; gap: 12px; }
.jst .jst-cat { position: relative; display: flex; min-width: 0; cursor: pointer; color: inherit; }
.jst .jst-cat-media { flex: none; }
.jst .jst-cat-body { display: flex; flex-direction: column; min-width: 0; }
.jst .jst-cat-num { font-size: 10.5px; letter-spacing: .14em; color: var(--st-muted); }
.jst .jst-cat-name { font-size: calc(20px * var(--st-hs, 1)); overflow-wrap: anywhere; }
.jst .jst-cat-count { font-size: 12.5px; color: var(--st-muted); }
.jst .jst-cat-go { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.jst .jst-cat-go .jst-ico { width: 18px; height: 18px; }
.jst[data-device="desktop"] .jst-cat:hover .jst-tile > svg.jst-art,
.jst[data-device="desktop"] .jst-cat:hover .jst-tile > img { transform: scale(1.05); }

/* About */
.jst .jst-about { display: grid; gap: 28px; align-items: center; }
.jst[data-device="desktop"] .jst-about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
.jst .jst-about-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--tile, var(--st-surface)); }
.jst .jst-about-media.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jst .jst-about-art { position: absolute; overflow: hidden; }
.jst .jst-about-art > svg, .jst .jst-about-art > img { width: 100%; height: 100%; }
.jst .jst-about-art > img { object-fit: cover; }
.jst .jst-about-deco, .jst .jst-about-stamp { position: absolute; }
.jst .jst-about-copy { min-width: 0; }
.jst .jst-about-title { font-size: calc(30px * var(--st-hs, 1)); margin-bottom: 18px; }
.jst .jst-about-text { font-size: 15.5px; line-height: 1.75; }
.jst .jst-about-text p + p { margin-top: 14px; }
.jst[data-device="desktop"] .jst-about-title { font-size: calc(44px * var(--st-hs, 1)); }
.jst[data-device="desktop"] .jst-about-text { font-size: 17px; }

/* Reviews */
.jst .jst-head--reviews { align-items: flex-end; }
.jst .jst-rating { display: flex; align-items: center; gap: 12px; }
.jst .jst-rating-n { font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); font-size: 34px; line-height: 1; letter-spacing: -0.02em; }
.jst .jst-rating-side { display: flex; flex-direction: column; gap: 4px; }
.jst .jst-rating-count { font-size: 12.5px; color: var(--st-muted); white-space: nowrap; }
.jst .jst-reviews { display: grid; gap: 16px; }
.jst[data-device="desktop"] .jst-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.jst[data-device="desktop"] .jst-reviews[data-count="1"] { grid-template-columns: minmax(0, 560px); }
.jst[data-device="desktop"] .jst-reviews[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jst .jst-review { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.jst .jst-review-text { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.jst .jst-review-by { display: flex; align-items: center; gap: 12px; margin-top: auto; min-width: 0; }
.jst .jst-avatar { display: none; }
.jst .jst-review-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.jst .jst-review-who b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.jst .jst-review-who span { font-size: 12.5px; color: var(--st-muted); }
.jst .jst-quote { display: none; }

/* Delivery */
.jst .jst-delivery { display: grid; gap: 28px; }
.jst[data-device="desktop"] .jst-delivery { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: start; }
.jst .jst-delivery-intro { min-width: 0; }
.jst .jst-delivery-ico { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.jst .jst-delivery-ico .jst-ico { width: 26px; height: 26px; }
.jst .jst-delivery-title { font-size: calc(28px * var(--st-hs, 1)); }
.jst[data-device="desktop"] .jst-delivery-title { font-size: calc(42px * var(--st-hs, 1)); }
.jst .jst-delivery-text { margin-top: 14px; color: var(--st-muted); line-height: 1.65; }
.jst .jst-delivery-text p + p { margin-top: 10px; }
.jst .jst-delivery-notes { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; font-size: 13px; font-weight: 500; }
.jst .jst-delivery-notes span { display: inline-flex; align-items: center; gap: 6px; }
.jst .jst-delivery-notes .jst-ico { width: 16px; height: 16px; color: var(--st-accent-ink); }
.jst .jst-zones { display: grid; min-width: 0; }
.jst[data-device="desktop"] .jst-zones.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.jst .jst-zone { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.jst .jst-zone-name { min-width: 0; overflow-wrap: anywhere; }
.jst .jst-zone-dots { flex: 1 1 auto; min-width: 12px; }
.jst .jst-zone .jst-price { flex: none; font-weight: 600; }
.jst .jst-free { color: var(--st-accent-ink); }

/* WhatsApp call to action (accent block) */
.jst .jst-on-accent { color: var(--st-on-accent); }
.jst .jst-wa { position: relative; overflow: hidden; isolation: isolate; background: var(--st-accent); color: var(--st-on-accent); }
.jst .jst-wa-deco { position: absolute; z-index: -1; display: none; }
.jst .jst-wa-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.jst .jst-wa-ico .jst-ico { width: 26px; height: 26px; }
.jst .jst-wa-copy { min-width: 0; }
.jst .jst-wa-title { font-size: calc(28px * var(--st-hs, 1)); }
.jst .jst-wa-text { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--st-on-accent-soft); overflow-wrap: anywhere; }
.jst .jst-wa-cta { display: flex; flex-direction: column; align-items: inherit; gap: 12px; margin-top: 24px; min-width: 0; }
.jst .jst-wa-num { font-size: 13px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; }

/* Footer */
.jst .jst-footer { display: block; padding: 48px 0 28px; border-top: 1px solid var(--st-line); }
.jst .jst-footer-top { display: grid; gap: 32px; }
.jst[data-device="desktop"] .jst-footer-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.jst .jst-footer-brand { min-width: 0; }
.jst .jst-footer-name { font-size: calc(26px * var(--st-hs, 1)); }
.jst .jst-footer-tag { margin-top: 8px; max-width: 34ch; color: var(--st-muted); line-height: 1.55; }
.jst .jst-footer-col { min-width: 0; }
.jst .jst-footer-h { margin-bottom: 14px; font-family: var(--st-font-text); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted); }
.jst .jst-footer-line { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14.5px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.jst .jst-footer-line .jst-ico { width: 18px; height: 18px; color: var(--st-muted); }
.jst .jst-footer-wa span { text-decoration: none; }
.jst .jst-footer-muted { font-size: 13.5px; color: var(--st-muted); }
.jst .jst-footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--st-line);
  font-size: 12.5px; color: var(--st-muted);
}
.jst .jst-powered b { font-weight: 700; letter-spacing: .02em; color: var(--st-text); text-transform: none; } /* the brand word keeps its case: « Jeere » */

/* =====================================================================
   PLATEAU — editorial: magazine layout, large serif type, thin lines, space.
   ===================================================================== */

.jst[data-tpl="plateau"] { --pl-r: calc(var(--st-radius) * .4); --st-sec: 72px; }
.jst[data-tpl="plateau"][data-device="desktop"] { --st-sec: 128px; }

.jst[data-tpl="plateau"] .jst-btn { border-radius: var(--pl-r); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 600; }
.jst[data-tpl="plateau"] .jst-btn--lg { font-size: 12.5px; min-height: 52px; padding: 0 28px; }
.jst[data-tpl="plateau"] .jst-btn--sm { font-size: 11.5px; min-height: 38px; letter-spacing: .12em; }

/* announcement */
.jst[data-tpl="plateau"] .jst-sec--announcement { padding: 0; }
.jst .jst-ann { background: var(--st-accent); color: var(--st-on-accent); }
.jst .jst-ann-in { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 38px; padding-top: 9px; padding-bottom: 9px; text-align: center; overflow: hidden; }
.jst .jst-ann-item { min-width: 0; overflow-wrap: anywhere; }
.jst .jst-ann-sep, .jst .jst-ann-rep { display: none; }
.jst[data-tpl="plateau"] .jst-ann-in { font-size: 10.5px; font-weight: 500; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-ann-in { min-height: 42px; font-size: 11.5px; }

/* header */
.jst[data-tpl="plateau"] .jst-header-in { grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "menu logo actions"; min-height: 64px; }
.jst[data-tpl="plateau"] .jst-menu { margin-left: -11px; }
.jst[data-tpl="plateau"] .jst-header-actions { margin-right: -11px; }
.jst[data-tpl="plateau"] .jst-logo { text-align: center; font-size: calc(21px * var(--st-hf, 1)); letter-spacing: -0.01em; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-header-in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "nav logo actions"; min-height: 88px; gap: 32px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-logo { max-width: 400px; font-size: calc(30px * var(--st-hf, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-header-actions { margin-right: -11px; }
.jst[data-tpl="plateau"] .jst-nav { gap: 30px; }
.jst[data-tpl="plateau"] .jst-nav-link { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }

/* hero */
.jst[data-tpl="plateau"] .jst-sec--hero { padding: 0; }
.jst[data-tpl="plateau"] .jst-main > .jst-sec--hero:first-child + .jst-sec { padding-top: var(--st-sec); }
.jst[data-tpl="plateau"] .jst-hero-stage { position: relative; display: flex; flex-direction: column; min-height: 640px; overflow: hidden; background: var(--tile); color: var(--ink); }
.jst[data-tpl="plateau"] .jst-hero-copy { position: relative; z-index: 2; padding: 28px var(--st-gutter) 40px; }
.jst[data-tpl="plateau"] .jst-hero-copy::before { content: ''; position: absolute; top: 0; left: var(--st-gutter); right: var(--st-gutter); height: 1px; background: currentColor; opacity: .22; }
.jst[data-tpl="plateau"] .jst-hero-stage.has-img .jst-hero-copy::before { display: none; }
.jst[data-tpl="plateau"] .jst-hero-title { font-size: calc(40px * var(--st-hs, 1)); line-height: 1.03; letter-spacing: -0.025em; }
.jst[data-tpl="plateau"] .jst-hero-title[data-len="s"] { font-size: calc(46px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"] .jst-hero-title[data-len="l"] { font-size: calc(33px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"] .jst-hero-text { margin-top: 16px; max-width: 34em; font-size: 15px; line-height: 1.6; opacity: .82; }
.jst[data-tpl="plateau"] .jst-hero-actions { margin-top: 26px; }
.jst[data-tpl="plateau"] .jst-hero-art { position: relative; order: -1; flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; min-height: 300px; padding: 56px var(--st-gutter) 0; }
.jst[data-tpl="plateau"] .jst-arch { position: relative; width: 64%; max-width: 268px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--tile-hi); }
.jst[data-tpl="plateau"] .jst-arch > svg { position: absolute; left: 5%; top: 9%; width: 90%; height: 91%; }
.jst[data-tpl="plateau"] .jst-arch > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jst[data-tpl="plateau"] .jst-hero-cap {
  position: absolute; top: 20px; left: var(--st-gutter); right: var(--st-gutter);
  display: flex; gap: 14px; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; opacity: .9;
}
.jst[data-tpl="plateau"] .jst-hero-cap span { white-space: nowrap; }
.jst[data-tpl="plateau"] .jst-hero-cap span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jst .jst-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Plateau with a photo: the photo is never under the text. Phone: the whole square photo on top, its
   foot melting into a dark ground that carries the white copy. Desktop: the photo fills the right 56%
   of the stage (the whole square at 1200 px), its left edge melting into the ground under the copy. */
.jst[data-tpl="plateau"] .jst-hero-stage.has-img { justify-content: flex-start; min-height: 0; background: #1C1A17; }
.jst[data-tpl="plateau"] .jst-hero-stage.has-img .jst-hero-img { position: relative; inset: auto; display: block; height: auto; aspect-ratio: 1 / 1; }
.jst[data-tpl="plateau"] .jst-hero-scrim { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1 / 1; z-index: 1; background: linear-gradient(to bottom, rgba(28, 26, 23, 0) 76%, rgba(28, 26, 23, .7) 92%, #1C1A17 100%); }
.jst[data-tpl="plateau"] .jst-hero-stage.has-img .jst-hero-copy { padding-top: 18px; }
.jst .jst-hero-stage.has-img .jst-btn,
.jst .jst-hero-block.has-img ~ .jst-btn { background: var(--st-photo-btn-bg); color: var(--st-photo-btn-fg); border-color: var(--st-photo-btn-bg); }
.jst[data-buttons="outline"] .jst-hero-stage.has-img .jst-btn { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.jst[data-tpl="plateau"]:not([data-buttons="outline"]) .jst-hero-stage:not(.has-img) .jst-btn { background: var(--hero-btn-bg); color: var(--hero-btn-fg); border-color: var(--hero-btn-bg); }
.jst[data-tpl="plateau"][data-buttons="outline"] .jst-hero-stage:not(.has-img) .jst-btn { color: var(--hero-btn-line); border-color: var(--hero-btn-line); }

.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-stage { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: 680px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-copy { align-self: center; padding: 96px 56px 96px var(--st-gutter); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-copy::before { display: none; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-kicker { font-size: 11.5px; margin-bottom: 24px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-title { font-size: calc(66px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-title[data-len="s"] { font-size: calc(80px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-title[data-len="l"] { font-size: calc(54px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-text { margin-top: 24px; font-size: 17px; max-width: 30em; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-actions { margin-top: 36px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-art { order: 0; min-height: 0; padding: 120px var(--st-gutter) 0 0; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-arch { width: 82%; max-width: 420px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-cap { top: 40px; left: auto; right: var(--st-gutter); width: 82%; max-width: 420px; font-size: 11.5px; justify-content: space-between; }
/* wider screens: the stage grows with the width (680 to 820 px) so a wide window still shows most of the photo */
.jst[data-tpl="plateau"][data-device="desktop"] .jst-sec--hero { container-type: inline-size; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-stage.has-img { min-height: 680px; min-height: clamp(680px, 44cqw, 820px); }
/* the tablet range (768–1199 px, the Studio's 768 artboard; wave 2, B-23): the title scales with the hero's width
   down to 42 px at 768 (it was 66 px: five lines for eight words); 1200 px and wider are unchanged */
.jst[data-tpl="plateau"][data-device="desktop"] .jst-sec--hero:not([data-eng]) .jst-hero-title:not([class*="de-"]) { font-size: calc(clamp(42px, 5.556cqw - 0.667px, 66px) * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-sec--hero:not([data-eng]) .jst-hero-title:not([class*="de-"])[data-len="s"] { font-size: calc(clamp(50px, 6.944cqw - 3.333px, 80px) * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-sec--hero:not([data-eng]) .jst-hero-title:not([class*="de-"])[data-len="l"] { font-size: calc(clamp(36px, 4.167cqw + 4px, 54px) * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-stage.has-img .jst-hero-img { position: absolute; top: 0; bottom: 0; left: 44%; right: 0; width: 56%; height: 100%; aspect-ratio: auto; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-stage.has-img .jst-hero-copy { grid-column: 1; padding-top: 96px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-hero-scrim { top: 0; bottom: 0; left: 44%; right: 0; aspect-ratio: auto; background: linear-gradient(90deg, #1C1A17 0%, #1C1A17 6%, rgba(28, 26, 23, .55) 18%, rgba(28, 26, 23, 0) 34%); }

/* section heads */
.jst[data-tpl="plateau"] .jst-head { align-items: baseline; padding-bottom: 16px; margin-bottom: 28px; border-bottom: 1px solid var(--st-line); }
.jst[data-tpl="plateau"] .jst-head-title { font-size: calc(30px * var(--st-hs, 1)); letter-spacing: -0.02em; }
.jst[data-tpl="plateau"] .jst-head-count { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-head { margin-bottom: 44px; padding-bottom: 22px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-head-title { font-size: calc(46px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-head-count { font-size: 11.5px; }

/* categories: an index on phone, tall tiles on desktop */
.jst[data-tpl="plateau"] .jst-cats { display: flex; flex-direction: column; gap: 0; margin-top: -28px; }
.jst[data-tpl="plateau"] .jst-cat { align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--st-line); }
.jst[data-tpl="plateau"] .jst-cat-media { width: 60px; aspect-ratio: 4 / 5; border-radius: var(--pl-r); }
.jst[data-tpl="plateau"] .jst-cat-body { flex: 1 1 auto; gap: 2px; }
.jst[data-tpl="plateau"] .jst-cat-num { font-size: 11px; font-weight: 600; }
.jst[data-tpl="plateau"] .jst-cat-name { font-size: calc(22px * var(--st-hs, 1)); line-height: 1.15; letter-spacing: -0.015em; }
.jst[data-tpl="plateau"] .jst-cat-count { font-size: 12px; }
.jst[data-tpl="plateau"] .jst-cat-go { width: 40px; height: 40px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; margin-top: 0; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cats[data-count="1"] { grid-template-columns: minmax(0, 360px); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cats[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cats[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cat { flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 0; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cat-media { width: 100%; margin-bottom: 18px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cats[data-count="2"] .jst-cat-media { aspect-ratio: 5 / 4; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cat-name { font-size: calc(28px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cat-go { position: absolute; right: 0; bottom: 0; width: 32px; height: 32px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cat-body { padding-right: 40px; }

/* products */
.jst[data-tpl="plateau"] .jst-grid { gap: 32px 12px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-grid { gap: 56px 24px; }
.jst[data-tpl="plateau"] .jst-card-media { aspect-ratio: 4 / 5; border-radius: var(--pl-r); }
.jst[data-tpl="plateau"] .jst-card-body { padding-top: 14px; }
.jst[data-tpl="plateau"] .jst-card-cat { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px; }
.jst[data-tpl="plateau"] .jst-card-price { font-weight: 500; }
.jst[data-tpl="plateau"] .jst-badge { top: 10px; left: 10px; height: 24px; padding: 0 9px; border-radius: var(--pl-r); background: var(--st-bg); color: var(--st-text); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.jst[data-tpl="plateau"] .jst-badge--best { background: var(--st-text); color: var(--st-bg); }
.jst[data-tpl="plateau"] .jst-badge--promo { background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-badge { top: 14px; left: 14px; height: 26px; font-size: 11px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-card-btn { width: auto; align-self: flex-start; padding: 0 18px; }

/* about */
.jst[data-tpl="plateau"] .jst-about-media { border-radius: var(--pl-r); }
.jst[data-tpl="plateau"] .jst-about-deco { inset: 16px; border: 1px solid var(--ink); opacity: .2; border-radius: var(--pl-r); }
.jst[data-tpl="plateau"] .jst-about-art--a { right: 8%; bottom: 7%; width: 58%; height: 72%; }
.jst[data-tpl="plateau"] .jst-about-art--b { left: 8%; bottom: 7%; width: 38%; height: 47%; }
.jst[data-tpl="plateau"] .jst-about-art > img { border-radius: var(--pl-r); }
.jst[data-tpl="plateau"] .jst-about-title { letter-spacing: -0.02em; }
.jst[data-tpl="plateau"] .jst-about-text { opacity: .86; }
.jst[data-tpl="plateau"] .jst-sign { margin-top: 26px; font-family: var(--st-font-display); font-size: 20px; font-style: italic; font-weight: 400; overflow-wrap: anywhere; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-about-media { aspect-ratio: 4 / 5; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-about-copy { padding-right: 32px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-kicker { margin-bottom: 22px; }

/* reviews */
.jst[data-tpl="plateau"] .jst-head--reviews { align-items: flex-end; }
.jst[data-tpl="plateau"] .jst-rating-n { font-size: 36px; font-weight: 400; }
.jst[data-tpl="plateau"] .jst-stars { color: var(--st-text); }
.jst[data-tpl="plateau"] .jst-star { width: 12px; height: 12px; }
.jst[data-tpl="plateau"] .jst-reviews { gap: 0; }
.jst[data-tpl="plateau"] .jst-review { padding: 24px 0; border-bottom: 1px solid var(--st-line); gap: 16px; }
.jst[data-tpl="plateau"] .jst-review:first-child { padding-top: 0; }
.jst[data-tpl="plateau"] .jst-review-text { font-family: var(--st-font-display); font-size: 20px; font-weight: 400; line-height: 1.42; letter-spacing: -0.005em; }
.jst[data-tpl="plateau"] .jst-review-who { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.jst[data-tpl="plateau"] .jst-review-who b { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.jst[data-tpl="plateau"] .jst-review-who span { font-size: 12px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-reviews { gap: 0 56px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-review { padding: 0; border: 0; gap: 22px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-review-text { font-size: 22px; }

/* delivery */
.jst[data-tpl="plateau"] .jst-delivery-ico { width: 44px; height: 44px; border: 1px solid var(--st-line); border-radius: 50%; }
.jst[data-tpl="plateau"] .jst-delivery-ico .jst-ico { width: 22px; height: 22px; stroke-width: 1.4; }
.jst[data-tpl="plateau"] .jst-delivery-title { letter-spacing: -0.02em; }
.jst[data-tpl="plateau"] .jst-zones { border-top: 1px solid var(--st-text); }
.jst[data-tpl="plateau"] .jst-zone { padding: 15px 0; border-bottom: 1px solid var(--st-line); font-size: 15px; }
.jst[data-tpl="plateau"] .jst-zone-dots { border-bottom: 1px dotted var(--st-muted); opacity: .45; transform: translateY(-4px); }
.jst[data-tpl="plateau"] .jst-zone .jst-price { font-weight: 500; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-zone { padding: 18px 0; font-size: 16px; }

/* whatsapp: a full-bleed accent band */
.jst[data-tpl="plateau"] .jst-sec--whatsapp .jst-wrap { max-width: none; padding: 0; }
.jst[data-tpl="plateau"] .jst-sec--whatsapp { padding: calc(var(--st-sec) / 2) 0; }
.jst[data-tpl="plateau"] .jst-wa { display: flex; flex-direction: column; align-items: center; padding: 64px var(--st-gutter); text-align: center; }
.jst[data-tpl="plateau"] .jst-wa-ico { width: 52px; height: 52px; margin-bottom: 22px; border: 1px solid currentColor; border-radius: 50%; opacity: .9; }
.jst[data-tpl="plateau"] .jst-wa-ico .jst-ico { width: 22px; height: 22px; stroke-width: 1.4; }
.jst[data-tpl="plateau"] .jst-wa-title { max-width: 16em; font-size: calc(32px * var(--st-hs, 1)); letter-spacing: -0.02em; }
.jst[data-tpl="plateau"] .jst-wa-text { max-width: 30em; margin-left: auto; margin-right: auto; }
.jst[data-tpl="plateau"] .jst-wa-cta { align-items: center; margin-top: 30px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-wa { padding: 112px var(--st-gutter); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-wa-title { font-size: calc(52px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-wa-text { font-size: 17px; }

/* footer */
.jst[data-tpl="plateau"] .jst-footer { padding-top: 56px; }
.jst[data-tpl="plateau"] .jst-footer-name { font-size: calc(30px * var(--st-hs, 1)); letter-spacing: -0.02em; }
.jst[data-tpl="plateau"] .jst-chip { border-radius: var(--pl-r); font-size: 11.5px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-footer { padding-top: 88px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-footer-name { font-size: calc(40px * var(--st-hs, 1)); }

/* =====================================================================
   COCODY — soft: rounded cards, pastel surfaces, soft circles, chips.
   ===================================================================== */

.jst[data-tpl="cocody"] { --cc-r: var(--st-radius); --cc-in: max(0px, calc(var(--st-radius) - 6px)); --cc-pill: calc(var(--st-radius) * 2); --st-sec: 56px; }
.jst[data-tpl="cocody"][data-device="desktop"] { --st-sec: 96px; }
.jst[data-tpl="cocody"] .jst-h { letter-spacing: -0.02em; }

.jst[data-tpl="cocody"] .jst-btn { border-radius: var(--cc-pill); }
.jst[data-tpl="cocody"] .jst-btn--sm { border-radius: var(--cc-pill); }

/* announcement */
.jst[data-tpl="cocody"] .jst-sec--announcement { padding: 0; }
.jst[data-tpl="cocody"] .jst-ann-in { font-size: 12.5px; font-weight: 500; line-height: 1.45; }

/* header */
.jst[data-tpl="cocody"] .jst-header { border-bottom: 0; }
.jst[data-tpl="cocody"] .jst-header-in { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "logo actions menu"; min-height: 72px; gap: 8px; }
.jst[data-tpl="cocody"] .jst-logo { font-size: calc(21px * var(--st-hf, 1)); }
.jst[data-tpl="cocody"] .jst-icon-btn { border-radius: var(--cc-pill); background: var(--st-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.jst[data-tpl="cocody"] .jst-icon-btn .jst-ico { width: 20px; height: 20px; }
.jst[data-tpl="cocody"] .jst-header-actions { gap: 8px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-header-in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "logo nav actions"; min-height: 84px; gap: 24px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-logo { font-size: calc(25px * var(--st-hf, 1)); }
.jst[data-tpl="cocody"] .jst-nav { gap: 4px; padding: 5px; border-radius: var(--cc-pill); background: var(--st-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.jst[data-tpl="cocody"] .jst-nav-link { padding: 9px 16px; border-radius: var(--cc-pill); font-size: 14px; }
.jst[data-tpl="cocody"] .jst-nav-link.is-current { background: var(--st-accent-soft); color: var(--st-accent-ink); font-weight: 600; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-nav-link:hover { opacity: 1; background: var(--st-accent-soft); }

/* hero: a soft banner card with circles */
.jst[data-tpl="cocody"] .jst-sec--hero { padding-top: 4px; }
.jst[data-tpl="cocody"] .jst-hero-card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 24px;
  padding: 28px 20px 28px; border-radius: calc(var(--st-radius) * 1.3); background: var(--st-surface-2);
}
.jst[data-tpl="cocody"] .jst-blob { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.jst[data-tpl="cocody"] .jst-blob--a { width: 300px; height: 300px; right: -120px; top: -110px; background: var(--st-accent); opacity: .08; }
.jst[data-tpl="cocody"] .jst-blob--b { width: 180px; height: 180px; left: -80px; bottom: -70px; background: var(--st-accent); opacity: .06; }
.jst[data-tpl="cocody"] .jst-blob--c { display: none; }
.jst[data-tpl="cocody"] .jst-hero-visual { position: relative; order: -1; display: flex; justify-content: center; padding-bottom: 14px; }
.jst[data-tpl="cocody"] .jst-hero-circle { position: relative; width: 236px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--tile-hi) 0%, var(--tile) 72%); box-shadow: 0 0 0 10px rgba(255, 255, 255, .35); }
.jst[data-tpl="cocody"][data-tone="dark"] .jst-hero-circle { box-shadow: 0 0 0 10px rgba(255, 255, 255, .06); }
.jst[data-tpl="cocody"] .jst-hero-circle > svg { position: absolute; left: 13%; top: 9%; width: 74%; height: 80%; }
.jst[data-tpl="cocody"] .jst-hero-circle > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jst[data-tpl="cocody"] .jst-hero-photo { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: calc(var(--st-radius) * 1.2); }
.jst[data-tpl="cocody"] .jst-float {
  position: absolute; left: 4px; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
  max-width: 220px; padding: 7px 14px 7px 7px; border-radius: calc(var(--st-radius) * .8 + 4px);
  background: var(--st-surface); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .06);
}
.jst[data-tpl="cocody"] .jst-float-media { width: 44px; height: 44px; flex: none; border-radius: calc(var(--st-radius) * .6); }
.jst[data-tpl="cocody"] .jst-float-body { min-width: 0; line-height: 1.3; }
.jst[data-tpl="cocody"] .jst-float-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jst[data-tpl="cocody"] .jst-float .jst-price { font-size: 12.5px; font-weight: 700; color: var(--st-accent-ink); }
.jst[data-tpl="cocody"] .jst-hero-copy { text-align: center; }
.jst .jst-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 14px; margin-bottom: 16px;
  border-radius: var(--cc-pill, 999px); background: var(--st-surface); color: var(--st-accent-ink);
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
}
.jst .jst-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--st-accent); flex: none; }
.jst[data-tpl="cocody"] .jst-hero-title { font-size: calc(30px * var(--st-hs, 1)); line-height: 1.1; }
.jst[data-tpl="cocody"] .jst-hero-title[data-len="s"] { font-size: calc(34px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"] .jst-hero-title[data-len="l"] { font-size: calc(26px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"] .jst-hero-text { margin: 14px auto 0; max-width: 32em; color: var(--st-muted); font-size: 15px; line-height: 1.6; }
.jst[data-tpl="cocody"] .jst-hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 24px; }
.jst .jst-hero-proof { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--st-muted); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-hero-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 48px; min-height: 520px; padding: 56px 64px; border-radius: calc(var(--st-radius) * 1.6); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-hero-copy { text-align: left; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-hero-visual { order: 0; padding-bottom: 0; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-hero-circle { width: 400px; box-shadow: 0 0 0 16px rgba(255, 255, 255, .35); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-hero-photo { max-width: 440px; aspect-ratio: 4 / 5; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-float { left: 0; bottom: 34px; max-width: 250px; padding: 9px 18px 9px 9px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-float-media { width: 52px; height: 52px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-float-name, .jst[data-tpl="cocody"][data-device="desktop"] .jst-float .jst-price { font-size: 13.5px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-blob--a { width: 520px; height: 520px; right: -140px; top: -200px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-blob--b { width: 260px; height: 260px; left: -90px; bottom: -120px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-hero-title { font-size: calc(48px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-hero-title[data-len="s"] { font-size: calc(56px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-hero-title[data-len="l"] { font-size: calc(40px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-hero-text { margin-left: 0; font-size: 17px; max-width: 28em; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-hero-actions { flex-direction: row; align-items: center; gap: 22px; margin-top: 32px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-pill { font-size: 13.5px; margin-bottom: 20px; }

/* heads */
.jst[data-tpl="cocody"] .jst-head { align-items: center; margin-bottom: 18px; }
.jst[data-tpl="cocody"] .jst-head-title { font-size: calc(24px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-head { margin-bottom: 28px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-head-title { font-size: calc(34px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"] .jst-head-count { padding: 6px 12px; border-radius: var(--cc-pill); background: var(--st-surface); font-size: 12.5px; font-weight: 500; }

/* categories: soft cards with a round illustration */
.jst[data-tpl="cocody"] .jst-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jst[data-tpl="cocody"] .jst-cats > .jst-cat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.jst[data-tpl="cocody"] .jst-cat { align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: var(--st-radius); background: var(--st-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.jst[data-tpl="cocody"] .jst-cat-media { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--tile-hi) 0%, var(--tile) 75%); }
.jst[data-tpl="cocody"] .jst-cat-num { display: none; }
.jst[data-tpl="cocody"] .jst-cat-body { flex: 1 1 auto; }
.jst[data-tpl="cocody"] .jst-cat-name { font-size: calc(15px * var(--st-hs, 1)); line-height: 1.25; }
.jst[data-tpl="cocody"] .jst-cat-count { font-size: 12px; }
.jst[data-tpl="cocody"] .jst-cat-go { display: none; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cats[data-count="1"] { grid-template-columns: minmax(0, 280px); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cats[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cats[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cats > .jst-cat:last-child:nth-child(odd) { grid-column: auto; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cat { flex-direction: column; text-align: center; gap: 16px; padding: 28px 20px 26px; transition: transform .2s ease, box-shadow .2s ease; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cat:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .3); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cat-media { width: 128px; height: 128px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cat-name { font-size: calc(19px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cat-count { font-size: 13px; margin-top: 2px; }

/* products */
.jst[data-tpl="cocody"] .jst-filter { display: flex; gap: 8px; margin: 0 calc(-1 * var(--st-gutter)) 18px; padding: 0 var(--st-gutter); overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-filter { margin: 0 0 28px; padding: 0; -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }
.jst[data-tpl="cocody"] .jst-filter-chip { display: inline-flex; align-items: center; flex: none; min-height: 36px; padding: 0 16px; border-radius: var(--cc-pill); background: var(--st-surface); font-size: 13.5px; font-weight: 500; }
.jst[data-tpl="cocody"] .jst-filter-chip.is-on { background: var(--st-text); color: var(--st-bg); }
.jst[data-tpl="cocody"] .jst-grid { gap: 12px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-grid { gap: 22px; }
.jst[data-tpl="cocody"] .jst-card { padding: 7px; border-radius: var(--st-radius); background: var(--st-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 24px -18px rgba(0, 0, 0, .22); transition: transform .2s ease, box-shadow .2s ease; }
.jst[data-tpl="cocody"][data-tone="dark"] .jst-card { box-shadow: none; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-card { padding: 9px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 22px 40px -22px rgba(0, 0, 0, .32); }
.jst[data-tpl="cocody"] .jst-card-media { border-radius: var(--cc-in); background: radial-gradient(circle at 50% 36%, var(--tile-hi) 0%, var(--tile) 78%); }
.jst[data-tpl="cocody"] .jst-card-body { padding: 10px 5px 3px; gap: 2px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-card-body { padding: 14px 7px 5px; }
.jst[data-tpl="cocody"] .jst-card-cat { display: none; }
.jst[data-tpl="cocody"] .jst-card-price { font-weight: 700; margin-bottom: 12px; }
.jst[data-tpl="cocody"] .jst-badge { top: 8px; left: 8px; height: 24px; padding: 0 10px; border-radius: var(--cc-pill); background: var(--st-accent); color: var(--st-on-accent); font-size: 11px; }
.jst[data-tpl="cocody"] .jst-badge--new { background: var(--st-surface); color: var(--st-accent-ink); }
.jst[data-tpl="cocody"] .jst-badge--promo { background: var(--st-text); color: var(--st-bg); }
.jst[data-tpl="cocody"] .jst-fav { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--cc-pill); background: var(--st-surface); color: var(--st-muted); }
.jst[data-tpl="cocody"] .jst-fav .jst-ico { width: 16px; height: 16px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-badge, .jst[data-tpl="cocody"][data-device="desktop"] .jst-fav { top: 12px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-badge { left: 12px; height: 26px; font-size: 12px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-fav { right: 12px; width: 34px; height: 34px; }

/* reviews */
.jst[data-tpl="cocody"] .jst-rating { padding: 8px 14px 8px 10px; border-radius: var(--cc-pill); background: var(--st-surface); gap: 10px; }
.jst[data-tpl="cocody"] .jst-rating-n { font-size: 24px; }
.jst[data-tpl="cocody"] .jst-rating-side { gap: 2px; }
.jst[data-tpl="cocody"] .jst-rating-count { font-size: 11.5px; }
.jst[data-tpl="cocody"] .jst-reviews { gap: 12px; }
.jst[data-tpl="cocody"] .jst-review { padding: 20px; border-radius: var(--st-radius); background: var(--st-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.jst[data-tpl="cocody"] .jst-star { width: 15px; height: 15px; }
.jst[data-tpl="cocody"] .jst-review-text { font-size: 14.5px; }
.jst[data-tpl="cocody"] .jst-avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: var(--cc-pill); background: var(--st-accent-soft); color: var(--st-accent-ink); font-weight: 700; font-size: 15px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-reviews { gap: 22px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-review { padding: 28px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-review-text { font-size: 15.5px; }

/* about */
.jst[data-tpl="cocody"] .jst-about-media { aspect-ratio: 1 / 1; border-radius: calc(var(--st-radius) * 1.3); background: var(--st-surface-2); }
.jst[data-tpl="cocody"] .jst-about-deco { left: 50%; top: 50%; width: 76%; height: 76%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--tile-hi) 0%, var(--tile) 74%); }
.jst[data-tpl="cocody"] .jst-about-art--a { left: 24%; top: 19%; width: 52%; height: 60%; }
.jst[data-tpl="cocody"] .jst-about-art--b { right: 8%; bottom: 8%; width: 28%; height: 28%; padding: 3%; border-radius: 50%; background: var(--st-surface); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .35); }
.jst[data-tpl="cocody"] .jst-about-art--b > img { border-radius: 50%; }
.jst[data-tpl="cocody"] .jst-about-media.has-img { aspect-ratio: 1 / 1; }
.jst[data-tpl="cocody"] .jst-about-title { font-size: calc(26px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"] .jst-about-text { color: var(--st-muted); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-about { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-about-title { font-size: calc(38px * var(--st-hs, 1)); }

/* delivery: one soft card */
.jst[data-tpl="cocody"] .jst-delivery { padding: 24px 20px; border-radius: calc(var(--st-radius) * 1.3); background: var(--st-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); gap: 22px; }
.jst[data-tpl="cocody"] .jst-sec--delivery .jst-wrap.jst-delivery { width: calc(100% - 2 * var(--st-gutter)); max-width: var(--st-max); }
.jst[data-tpl="cocody"] .jst-delivery-ico { width: 48px; height: 48px; border-radius: var(--cc-pill); background: var(--st-accent-soft); color: var(--st-accent-ink); margin-bottom: 16px; }
.jst[data-tpl="cocody"] .jst-delivery-ico .jst-ico { width: 24px; height: 24px; }
.jst[data-tpl="cocody"] .jst-delivery-title { font-size: calc(24px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"] .jst-delivery-notes span { padding: 6px 12px; border-radius: var(--cc-pill); background: var(--st-accent-soft); color: var(--st-accent-ink); }
.jst[data-tpl="cocody"] .jst-delivery-notes { gap: 8px; }
.jst[data-tpl="cocody"] .jst-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.jst[data-tpl="cocody"] .jst-zone { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: max(0px, calc(var(--st-radius) * .7)); background: var(--st-bg); }
.jst[data-tpl="cocody"] .jst-zone-name { font-size: 14px; font-weight: 600; }
.jst[data-tpl="cocody"] .jst-zone-dots { display: none; }
.jst[data-tpl="cocody"] .jst-zone .jst-price { font-size: 13px; color: var(--st-accent-ink); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-delivery { padding: 48px 56px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-delivery-title { font-size: calc(34px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-zones,
.jst[data-tpl="cocody"][data-device="desktop"] .jst-zones.is-many { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* whatsapp: a rounded accent card with soft circles */
.jst[data-tpl="cocody"] .jst-wa { display: flex; flex-direction: column; align-items: center; padding: 36px 22px; border-radius: calc(var(--st-radius) * 1.3); text-align: center; }
.jst[data-tpl="cocody"] .jst-wa-deco { display: block; border-radius: 50%; background: currentColor; opacity: .09; }
.jst[data-tpl="cocody"] .jst-wa-deco--a { width: 220px; height: 220px; right: -80px; top: -90px; }
.jst[data-tpl="cocody"] .jst-wa-deco--b { width: 150px; height: 150px; left: -60px; bottom: -70px; }
.jst[data-tpl="cocody"] .jst-wa-ico { width: 56px; height: 56px; margin-bottom: 18px; border-radius: var(--cc-pill); background: var(--st-on-accent); color: var(--st-accent); }
.jst[data-tpl="cocody"] .jst-wa-title { font-size: calc(25px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"] .jst-wa-cta { align-items: center; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-wa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 52px 56px; text-align: left; border-radius: calc(var(--st-radius) * 1.6); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-wa-ico { width: 72px; height: 72px; margin: 0; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-wa-ico .jst-ico { width: 32px; height: 32px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-wa-title { font-size: calc(34px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-wa-cta { margin-top: 0; align-items: flex-end; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-wa-deco--a { width: 360px; height: 360px; right: -100px; top: -180px; }

/* footer */
.jst[data-tpl="cocody"] .jst-footer { margin: 0 8px; border-top: 0; border-radius: calc(var(--st-radius) * 1.3) calc(var(--st-radius) * 1.3) 0 0; background: var(--st-surface); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-footer { margin: 0 16px; padding-top: 64px; }
.jst[data-tpl="cocody"] .jst-chip { border: 0; border-radius: var(--cc-pill); background: var(--st-bg); }
.jst[data-tpl="cocody"] .jst-footer-name { font-size: calc(24px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-footer-name { font-size: calc(30px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"] .jst-footer-bottom { border-top-style: dashed; }

/* =====================================================================
   TREICHVILLE — bold: huge uppercase type, accent blocks, strong contrast.
   ===================================================================== */

.jst[data-tpl="treichville"] { --st-sec: 64px; --tv-line: 1.5px solid var(--st-text); }
.jst[data-tpl="treichville"][data-device="desktop"] { --st-sec: 112px; }
.jst[data-tpl="treichville"] .jst-h { text-transform: uppercase; line-height: .98; letter-spacing: -0.02em; }

.jst[data-tpl="treichville"] .jst-btn { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 13px; }
.jst[data-tpl="treichville"] .jst-btn--lg { min-height: 56px; padding: 0 28px; font-size: 14px; }
.jst[data-tpl="treichville"] .jst-btn--sm { min-height: 40px; font-size: 11.5px; }

/* announcement: a ticker on desktop */
.jst[data-tpl="treichville"] .jst-sec--announcement { padding: 0; }
.jst[data-tpl="treichville"] .jst-ann-in { min-height: 40px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; line-height: 1.4; text-transform: uppercase; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-ann-in { justify-content: flex-start; white-space: nowrap; gap: 28px; min-height: 44px; font-size: 12.5px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-ann-item { flex: none; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-ann-sep,
.jst[data-tpl="treichville"][data-device="desktop"] .jst-ann-rep { display: inline; flex: none; }

/* header */
.jst[data-tpl="treichville"] .jst-header { border-bottom: var(--tv-line); }
.jst[data-tpl="treichville"] .jst-header-in { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "logo actions menu"; min-height: 64px; gap: 8px; }
.jst[data-tpl="treichville"] .jst-logo { font-size: calc(17px * var(--st-hf, 1)); text-transform: uppercase; letter-spacing: -0.01em; }
.jst[data-tpl="treichville"] .jst-icon-btn { border-radius: var(--st-radius); }
.jst[data-tpl="treichville"] .jst-bag { background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-tpl="treichville"] .jst-menu { border: var(--tv-line); width: 44px; height: 44px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-header-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo nav actions"; min-height: 80px; gap: 32px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-logo { font-size: calc(22px * var(--st-hf, 1)); max-width: 420px; }
.jst[data-tpl="treichville"] .jst-nav { justify-content: flex-end; gap: 30px; }
.jst[data-tpl="treichville"] .jst-nav-link { position: relative; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.jst[data-tpl="treichville"] .jst-nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; background: var(--st-accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-nav-link:hover { opacity: 1; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-nav-link:hover::after { transform: scaleX(1); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-header-actions { gap: 8px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-search { border: var(--tv-line); }

/* hero */
.jst[data-tpl="treichville"] .jst-sec--hero { padding: 0; }
.jst[data-tpl="treichville"] .jst-hero-grid { display: flex; flex-direction: column; padding-top: 30px; padding-bottom: 40px; }
.jst .jst-tag {
  display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; margin-bottom: 18px;
  border-radius: calc(var(--st-radius) * .5); background: var(--st-accent); color: var(--st-on-accent);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase;
}
.jst[data-tpl="treichville"] .jst-hero-title { font-size: calc(34px * var(--st-hs, 1)); line-height: .96; }
.jst[data-tpl="treichville"] .jst-hero-title[data-len="s"] { font-size: calc(42px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"] .jst-hero-title[data-len="l"] { font-size: calc(27px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"] .jst-hero-text { margin-top: 18px; max-width: 32em; color: var(--st-muted); font-size: 15px; line-height: 1.6; }
.jst[data-tpl="treichville"] .jst-hero-actions { margin-top: 26px; }
.jst[data-tpl="treichville"][data-device="phone"] .jst-hero-actions .jst-btn { width: 100%; }
.jst[data-tpl="treichville"] .jst-hero-visual { position: relative; margin: 36px 12px 0 0; }
.jst[data-tpl="treichville"] .jst-hero-block { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--st-radius); background: var(--tile); box-shadow: 12px 12px 0 var(--st-accent); }
.jst[data-tpl="treichville"] .jst-hero-block > svg { position: absolute; left: 8%; top: 5%; width: 84%; height: 90%; }
.jst[data-tpl="treichville"] .jst-hero-block > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jst[data-tpl="treichville"] .jst-hero-block.has-img { background: #222; }
.jst[data-tpl="treichville"] .jst-sticker {
  position: absolute; top: -16px; right: -10px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 50%; background: var(--st-text); color: var(--st-bg);
  transform: rotate(12deg); text-align: center; line-height: 1.05; text-transform: uppercase;
}
.jst[data-tpl="treichville"] .jst-sticker span { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; }
.jst[data-tpl="treichville"] .jst-sticker b { margin: 3px 0; font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.jst[data-tpl="treichville"] .jst-strip { border-top: var(--tv-line); border-bottom: var(--tv-line); overflow: hidden; }
.jst[data-tpl="treichville"] .jst-strip-in { display: flex; align-items: center; gap: 16px; padding: 13px var(--st-gutter); white-space: nowrap; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.jst[data-tpl="treichville"] .jst-strip-in span, .jst[data-tpl="treichville"] .jst-strip-in i { flex: none; font-style: normal; }
.jst[data-tpl="treichville"] .jst-strip-in i { color: var(--st-accent-ink); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: 64px; padding-top: 72px; padding-bottom: 88px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-tag { font-size: 12.5px; padding: 7px 12px; margin-bottom: 26px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-hero-title { font-size: calc(64px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-hero-title[data-len="s"] { font-size: calc(82px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-hero-title[data-len="l"] { font-size: calc(50px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-hero-text { margin-top: 26px; font-size: 18px; max-width: 30em; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-hero-actions { margin-top: 36px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-hero-visual { margin: 0 18px 0 0; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-hero-block { box-shadow: 18px 18px 0 var(--st-accent); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-sticker { width: 128px; height: 128px; top: -28px; right: -24px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-sticker span { font-size: 11px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-sticker b { font-size: 23px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-strip-in { font-size: 13px; padding: 16px var(--st-gutter); gap: 22px; }

/* heads */
.jst[data-tpl="treichville"] .jst-head { align-items: flex-end; margin-bottom: 22px; }
.jst[data-tpl="treichville"] .jst-head-title { font-size: calc(30px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"] .jst-head-count { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--st-text); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-head { margin-bottom: 36px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-head-title { font-size: calc(56px * var(--st-hs, 1)); }
.jst .jst-count-block {
  display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 36px; padding: 0 10px;
  border-radius: calc(var(--st-radius) * .5); background: var(--st-accent); color: var(--st-on-accent);
  font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); font-size: 17px; letter-spacing: -0.02em;
}
.jst[data-tpl="treichville"][data-device="desktop"] .jst-count-block { min-width: 64px; min-height: 48px; font-size: 24px; }

/* categories: big colour blocks */
.jst[data-tpl="treichville"] .jst-cats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.jst[data-tpl="treichville"] .jst-cat {
  align-items: center; gap: 12px; min-height: 108px; padding: 14px 0 14px 18px; overflow: hidden;
  border-radius: var(--st-radius); background: var(--tile); color: var(--ink);
}
.jst[data-tpl="treichville"] .jst-cat:nth-child(3n + 1) { background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-tpl="treichville"] .jst-cat:nth-child(3n + 2) { background: var(--st-surface); color: var(--st-text); box-shadow: inset 0 0 0 1.5px var(--st-line); }
.jst[data-tpl="treichville"] .jst-cat-media { order: 2; width: 104px; height: 104px; margin: -14px 0; background: transparent; }
.jst[data-tpl="treichville"] .jst-cat-media > svg.jst-art { left: 0; top: 0; width: 100%; height: 100%; }
.jst[data-tpl="treichville"] .jst-cat-media.has-photo { width: 108px; height: 108px; margin: -14px 0; }
.jst[data-tpl="treichville"] .jst-cat-body { flex: 1 1 auto; gap: 6px; }
.jst[data-tpl="treichville"] .jst-cat-num { font-family: var(--st-font-display); font-size: 11px; letter-spacing: 0; color: inherit; }
.jst[data-tpl="treichville"] .jst-cat-name { font-size: calc(22px * var(--st-hs, 1)); line-height: 1; }
.jst[data-tpl="treichville"] .jst-cat-count { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: inherit; }
.jst[data-tpl="treichville"] .jst-cat-go { display: none; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cats[data-count="1"] { grid-template-columns: minmax(0, 400px); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cats[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cats[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cat { flex-direction: column; align-items: stretch; justify-content: space-between; min-height: 380px; padding: 28px; transition: transform .18s ease, box-shadow .18s ease; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cat:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--st-text); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cat-media { order: 0; align-self: flex-end; width: 74%; height: auto; aspect-ratio: 1 / 1; margin: -12px -12px 0 0; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cat-media.has-photo { width: 64%; margin: 0; border-radius: var(--st-radius); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cat-name { font-size: calc(34px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cat-num { font-size: 13px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cat-count { font-size: 12px; }

/* products */
.jst[data-tpl="treichville"] .jst-grid { gap: 26px 10px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-grid { gap: 48px 18px; }
.jst[data-tpl="treichville"] .jst-card { transition: transform .18s ease; }
.jst[data-tpl="treichville"] .jst-card-media { border-radius: var(--st-radius); transition: box-shadow .18s ease; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-card:hover { transform: translate(-4px, -4px); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-card:hover .jst-card-media { box-shadow: 8px 8px 0 var(--st-accent); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-card:hover .jst-tile > svg.jst-art { transform: scale(1.06) rotate(-3deg); }
.jst[data-tpl="treichville"] .jst-card-body { padding-top: 12px; gap: 4px; }
.jst[data-tpl="treichville"] .jst-card-cat { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--st-accent-ink); }
.jst[data-tpl="treichville"] .jst-card-name { font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: .01em; text-transform: uppercase; }
.jst[data-tpl="treichville"] .jst-card-price { font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); font-size: 16px; letter-spacing: -0.01em; margin-bottom: 12px; }
.jst[data-tpl="treichville"] .jst-badge { top: 0; left: 0; height: 28px; padding: 0 10px; border-radius: 0 0 calc(var(--st-radius) * .6) 0; background: var(--st-accent); color: var(--st-on-accent); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.jst[data-tpl="treichville"] .jst-badge--new { background: var(--st-text); color: var(--st-bg); }
.jst[data-tpl="treichville"] .jst-badge--promo { top: 10px; left: 8px; border-radius: calc(var(--st-radius) * .5); transform: rotate(-6deg); box-shadow: 3px 3px 0 var(--st-text); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-card-name { font-size: 14px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-card-price { font-size: 19px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-badge { height: 32px; padding: 0 14px; font-size: 11.5px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-badge--promo { top: 14px; left: 12px; }

/* whatsapp: a full-bleed accent block */
.jst[data-tpl="treichville"] .jst-sec--whatsapp .jst-wrap { max-width: none; padding: 0; }
.jst[data-tpl="treichville"] .jst-wa { padding: 48px var(--st-gutter) 52px; }
.jst[data-tpl="treichville"] .jst-wa-ico { width: 56px; height: 56px; margin-bottom: 22px; border: 2px solid currentColor; border-radius: var(--st-radius); }
.jst[data-tpl="treichville"] .jst-wa-ico .jst-ico { width: 28px; height: 28px; stroke-width: 2; }
.jst[data-tpl="treichville"] .jst-wa-title { font-size: calc(34px * var(--st-hs, 1)); line-height: .96; }
.jst[data-tpl="treichville"] .jst-wa-text { font-size: 15.5px; max-width: 34em; }
.jst[data-tpl="treichville"] .jst-wa-cta { align-items: stretch; margin-top: 28px; }
.jst[data-tpl="treichville"] .jst-wa-num { font-family: var(--st-font-display); font-size: 14px; letter-spacing: 0; text-align: center; }
.jst[data-tpl="treichville"] .jst-wa-deco--a { display: block; right: -40px; top: -40px; width: 180px; height: 180px; border: 2px solid currentColor; border-radius: 50%; opacity: .25; }
.jst[data-tpl="treichville"] .jst-wa-deco--b { display: block; right: 10px; top: 10px; width: 100px; height: 100px; border: 2px solid currentColor; border-radius: 50%; opacity: .25; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-wa {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ico ico" "copy cta"; align-items: end; column-gap: 64px;
  padding: 88px max(var(--st-gutter), calc((100% - var(--st-max)) / 2)) 96px;
}
.jst[data-tpl="treichville"][data-device="desktop"] .jst-wa-ico { grid-area: ico; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-wa-copy { grid-area: copy; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-wa-cta { grid-area: cta; margin-top: 0; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-wa-title { font-size: calc(66px * var(--st-hs, 1)); max-width: 12em; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-wa-text { font-size: 18px; margin-top: 20px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-wa-deco--a { right: 6%; top: -120px; width: 380px; height: 380px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-wa-deco--b { right: calc(6% + 90px); top: -30px; width: 200px; height: 200px; }

/* reviews */
.jst[data-tpl="treichville"] .jst-rating-n { font-size: 44px; color: var(--st-accent-ink); }
.jst[data-tpl="treichville"] .jst-rating-count { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; color: var(--st-text); }
.jst[data-tpl="treichville"] .jst-reviews { gap: 12px; }
.jst[data-tpl="treichville"] .jst-review { padding: 22px 20px 20px; border-radius: var(--st-radius); background: var(--st-surface); box-shadow: inset 0 0 0 1.5px var(--st-line); }
.jst[data-tpl="treichville"] .jst-quote { display: block; height: 30px; margin-bottom: -6px; font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); font-size: 64px; line-height: .9; color: var(--st-accent-ink); }
.jst[data-tpl="treichville"] .jst-star { width: 15px; height: 15px; }
.jst[data-tpl="treichville"] .jst-review-text { font-size: 15px; font-weight: 500; }
.jst[data-tpl="treichville"] .jst-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none;
  border-radius: calc(var(--st-radius) * .5); background: var(--st-accent); color: var(--st-on-accent);
  font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); font-size: 15px;
}
.jst[data-tpl="treichville"] .jst-review-who b { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jst[data-tpl="treichville"] .jst-review-who span { font-size: 12px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-reviews { gap: 18px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-review { padding: 30px 28px 28px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-rating-n { font-size: 60px; }

/* about */
.jst[data-tpl="treichville"] .jst-about-media { aspect-ratio: 1 / 1; margin-right: 12px; overflow: visible; border-radius: var(--st-radius); background: var(--tile); box-shadow: 12px 12px 0 var(--st-accent); }
.jst[data-tpl="treichville"] .jst-about-media.has-img { overflow: hidden; }
.jst[data-tpl="treichville"] .jst-about-media.has-img img { border-radius: var(--st-radius); }
.jst[data-tpl="treichville"] .jst-about-deco { display: none; }
.jst[data-tpl="treichville"] .jst-about-art--a { left: 14%; top: 7%; width: 72%; height: 86%; }
.jst[data-tpl="treichville"] .jst-about-art--b { display: none; }
.jst[data-tpl="treichville"] .jst-about-stamp {
  left: -6px; bottom: 22px; padding: 8px 12px; border-radius: calc(var(--st-radius) * .5); background: var(--st-text); color: var(--st-bg);
  font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); font-size: 13px; letter-spacing: 0; text-transform: uppercase; transform: rotate(-4deg);
  max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jst[data-tpl="treichville"] .jst-about-title { font-size: calc(30px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"] .jst-about-text { font-size: 16px; }
.jst[data-tpl="treichville"] .jst-about-text p:first-child:not(:only-child) { font-size: 1.1em; font-weight: 600; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-about { gap: 88px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-about-media { margin-right: 18px; box-shadow: 18px 18px 0 var(--st-accent); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-about-title { font-size: calc(52px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-about-text { font-size: 17.5px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-about-stamp { font-size: 17px; padding: 10px 16px; bottom: 36px; left: -14px; }

/* delivery */
.jst[data-tpl="treichville"] .jst-delivery-ico { width: 56px; height: 56px; border-radius: var(--st-radius); background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-tpl="treichville"] .jst-delivery-ico .jst-ico { width: 28px; height: 28px; stroke-width: 2; }
.jst[data-tpl="treichville"] .jst-delivery-title { font-size: calc(30px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-delivery-title { font-size: calc(52px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"] .jst-delivery-notes { gap: 8px; }
.jst[data-tpl="treichville"] .jst-delivery-notes span { padding: 7px 12px; border: var(--tv-line); border-radius: calc(var(--st-radius) * .5); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jst[data-tpl="treichville"] .jst-zones { border-top: 3px solid var(--st-text); }
.jst[data-tpl="treichville"] .jst-zone { padding: 15px 0; border-bottom: 1.5px solid var(--st-line); }
.jst[data-tpl="treichville"] .jst-zone-name { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.jst[data-tpl="treichville"] .jst-zone .jst-price { font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); font-size: 15px; color: var(--st-accent-ink); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-zone { padding: 18px 0; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-zone-name { font-size: 15px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-zone .jst-price { font-size: 17px; }

/* footer */
.jst[data-tpl="treichville"] .jst-footer { padding-top: 52px; border-top: 0; background: var(--st-surface); }
.jst[data-tpl="treichville"] .jst-footer-name { font-size: calc(38px * var(--st-hs, 1)); line-height: .95; letter-spacing: -0.03em; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-footer { padding-top: 80px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-footer-name { font-size: calc(64px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"] .jst-footer-h { color: var(--st-text); font-weight: 800; }
.jst[data-tpl="treichville"] .jst-chip { border: var(--tv-line); border-radius: calc(var(--st-radius) * .5); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.jst[data-tpl="treichville"] .jst-footer-bottom { border-top: var(--tv-line); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }

/* =====================================================================
   JOURNEY — product page, cart, checkout and confirmation (shared base).
   Each template restyles these below; nothing here reads the viewport.
   ===================================================================== */

.jst [data-jst-action] { cursor: pointer; }
.jst .jst-step[disabled] { cursor: default; }
.jst a.jst-logo { display: block; color: inherit; }
.jst .jst-nav-link.is-current { opacity: 1; }
.jst .jst-bag { position: relative; }
.jst .jst-bag-n {
  position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--st-accent); color: var(--st-on-accent); box-shadow: 0 0 0 2px var(--st-bg);
  font-family: var(--st-font-text); font-size: 10.5px; font-weight: 700; font-style: normal; line-height: 19px; letter-spacing: 0; text-align: center; text-transform: none;
}
.jst .jst-main--product, .jst .jst-main--cart, .jst .jst-main--checkout, .jst .jst-main--confirmation { padding-bottom: calc(var(--st-sec) / 2); }

.jst .jst-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--st-text); }
.jst .jst-label .jst-ico { width: 16px; height: 16px; color: var(--st-accent-ink); }
.jst .jst-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--st-muted); }
.jst .jst-back .jst-ico { width: 18px; height: 18px; }
.jst[data-device="desktop"] .jst-back:hover, .jst[data-device="desktop"] .jst-crumbs a:hover { color: var(--st-text); }
.jst .jst-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; min-height: 44px; font-size: 13px; color: var(--st-muted); }
.jst .jst-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.jst .jst-crumbs li + li::before { content: '/'; margin: 0 10px; opacity: .6; }
.jst .jst-crumbs [aria-current] { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--st-text); }
.jst .jst-page-pad { padding-top: 12px; padding-bottom: 48px; }
.jst .jst-page-pad .jst-empty { margin-top: 12px; }

/* Quantity stepper */
.jst .jst-stepper {
  --jst-step: 40px;
  display: inline-flex; align-items: stretch; flex: none; height: var(--jst-step); overflow: hidden;
  border: 1px solid var(--st-field-line); border-radius: min(var(--st-radius), 12px); background: var(--st-surface); color: var(--st-text);
}
.jst .jst-stepper--lg { --jst-step: 48px; }
.jst .jst-stepper--sm { --jst-step: 32px; }
.jst .jst-step { display: inline-flex; align-items: center; justify-content: center; width: var(--jst-step); flex: none; color: inherit; transition: background-color .15s ease; }
.jst .jst-step .jst-ico { width: 16px; height: 16px; stroke-width: 2; }
.jst .jst-stepper--sm .jst-step .jst-ico { width: 14px; height: 14px; }
.jst .jst-step[disabled] { opacity: .32; }
.jst[data-device="desktop"] .jst-step:not([disabled]):hover { background: var(--st-accent-soft); }
.jst .jst-step-n { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jst .jst-stepper--sm .jst-step-n { min-width: 24px; font-size: 13px; }

/* Secondary button (WhatsApp) */
.jst .jst-btn.jst-btn--ghost { background: transparent; color: var(--st-text); border-color: var(--st-text); }
.jst .jst-free { color: var(--st-accent-ink); font-weight: 600; }

/* Product page */
.jst .jst-pdp-nav { padding-top: 6px; padding-bottom: 6px; }
.jst[data-device="desktop"] .jst-pdp-nav { padding-top: 18px; padding-bottom: 18px; }
.jst .jst-pdp { padding-bottom: calc(var(--st-sec) / 2); }
.jst .jst-pdp-in { display: grid; gap: 24px; }
.jst[data-device="desktop"] .jst-pdp-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: start; }
.jst .jst-pdp-media { position: relative; min-width: 0; }
.jst .jst-pdp-tile { aspect-ratio: 1 / 1; border-radius: var(--st-radius); }
.jst .jst-pdp-tile > svg.jst-art { left: 10%; top: 6%; width: 80%; height: 88%; }
.jst .jst-pdp-tile .jst-badge { top: 14px; left: 14px; }
.jst .jst-pdp-info { display: flex; flex-direction: column; min-width: 0; }
.jst[data-device="desktop"] .jst-pdp-info { padding-top: 8px; }
.jst .jst-pdp-cat { margin-bottom: 8px; font-size: 12.5px; font-weight: 500; color: var(--st-muted); }
.jst .jst-pdp-name { font-size: calc(28px * var(--st-hs, 1)); overflow-wrap: break-word; }
.jst[data-device="desktop"] .jst-pdp-name { font-size: calc(42px * var(--st-hs, 1)); }
.jst .jst-pdp-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: 13px; color: var(--st-muted); }
.jst .jst-pdp-price { margin-top: 14px; font-size: 22px; font-weight: 600; line-height: 1.2; }
.jst[data-device="desktop"] .jst-pdp-price { font-size: 26px; }
.jst .jst-pdp-desc { margin-top: 16px; max-width: 38em; color: var(--st-text-soft); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.jst .jst-pdp-desc p + p { margin-top: 10px; }
.jst .jst-pdp-buy { display: grid; gap: 10px; margin-top: 24px; }
.jst .jst-pdp-qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.jst .jst-pdp-qty .jst-label { margin: 0; }
.jst .jst-perks { display: grid; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--st-line); font-size: 14px; line-height: 1.45; }
.jst .jst-perks li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; overflow-wrap: anywhere; }
.jst .jst-perks .jst-ico { width: 20px; height: 20px; color: var(--st-accent-ink); }
.jst .jst-pdp-pay { margin-top: 22px; }
.jst .jst-related .jst-head { margin-bottom: 20px; }

/* Page head (cart, checkout) */
.jst .jst-cart, .jst .jst-co, .jst .jst-ok { padding-top: 8px; padding-bottom: 8px; }
.jst[data-device="desktop"] .jst-cart, .jst[data-device="desktop"] .jst-co, .jst[data-device="desktop"] .jst-ok { padding-top: 24px; }
.jst .jst-page-head { margin-bottom: 20px; }
.jst .jst-page-title { font-size: calc(30px * var(--st-hs, 1)); overflow-wrap: anywhere; }
.jst[data-device="desktop"] .jst-page-title { font-size: calc(46px * var(--st-hs, 1)); }
.jst .jst-page-head .jst-page-title { margin-top: 6px; }
.jst .jst-page-sub { margin-top: 6px; font-size: 14px; color: var(--st-muted); }
.jst[data-device="desktop"] .jst-page-head { margin-bottom: 32px; }

/* Cart */
.jst .jst-cart-grid { display: grid; gap: 24px; }
.jst[data-device="desktop"] .jst-cart-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 64px; align-items: start; }
.jst .jst-lines { display: grid; border-top: 1px solid var(--st-line); }
.jst .jst-line { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--st-line); min-width: 0; }
.jst .jst-line-media { flex: none; width: 88px; }
.jst[data-device="desktop"] .jst-line-media { width: 120px; }
.jst .jst-line-tile { aspect-ratio: 1 / 1; border-radius: min(var(--st-radius), 14px); }
.jst .jst-line-tile > svg.jst-art { left: 6%; top: 4%; width: 88%; height: 92%; }
.jst .jst-line-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-width: 0; }
.jst .jst-line-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.jst .jst-line-info { min-width: 0; }
.jst .jst-line-cat { margin-bottom: 2px; font-size: 11.5px; color: var(--st-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jst .jst-line-name { font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jst[data-device="desktop"] .jst-line-name { font-size: 16px; }
.jst .jst-line-unit { margin-top: 3px; font-size: 12.5px; color: var(--st-muted); }
.jst .jst-line-total { flex: none; font-size: 14.5px; font-weight: 600; }
.jst[data-device="desktop"] .jst-line-total { font-size: 16px; }
.jst .jst-line-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: auto; }
.jst .jst-remove { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 2px; font-size: 13px; font-weight: 500; color: var(--st-muted); }
.jst .jst-remove .jst-ico { width: 16px; height: 16px; }
.jst[data-device="desktop"] .jst-remove:hover { color: var(--st-text); }
.jst .jst-cart-empty { display: flex; flex-direction: column; align-items: center; padding: 44px 20px 48px; border: 1px solid var(--st-line); border-radius: var(--st-radius); background: var(--st-surface); text-align: center; }
.jst .jst-cart-empty-title { font-size: calc(24px * var(--st-hs, 1)); }
.jst .jst-cart-empty-text { max-width: 30em; margin: 8px 0 24px; color: var(--st-muted); }
.jst .jst-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 16px; border-radius: 50%; background: var(--st-accent-soft); color: var(--st-accent-ink); }
.jst .jst-empty-ico .jst-ico { width: 26px; height: 26px; }

/* Summary card (cart, checkout, confirmation) */
.jst .jst-summary { min-width: 0; padding: 20px; border: 1px solid var(--st-line); border-radius: var(--st-radius); background: var(--st-surface); }
.jst[data-device="desktop"] .jst-summary { padding: 28px; }
.jst .jst-summary-title { margin-bottom: 16px; font-size: calc(21px * var(--st-hs, 1)); }
.jst .jst-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.jst .jst-summary-head .jst-summary-title { margin: 0; }
.jst .jst-rows { display: grid; gap: 10px; }
.jst .jst-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; }
.jst .jst-row dt { min-width: 0; color: var(--st-muted); overflow-wrap: anywhere; }
.jst .jst-row dd { margin: 0; font-weight: 600; text-align: right; }
.jst .jst-row-sub::before { content: '·'; margin: 0 6px; }
.jst .jst-row--total { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--st-line); font-size: 15px; }
.jst .jst-row--total dt { color: var(--st-text); font-weight: 600; }
.jst .jst-row--total dt .jst-row-sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--st-muted); }
.jst .jst-row--total dt .jst-row-sub::before { content: none; }
.jst .jst-row dt { overflow-wrap: break-word; }
.jst .jst-row--total dd { font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); font-size: 22px; line-height: 1.1; }
.jst .jst-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 18px; font-size: 13px; line-height: 1.45; color: var(--st-muted); }
.jst .jst-note .jst-ico { width: 18px; height: 18px; }
.jst .jst-continue { display: flex; justify-content: center; min-height: 44px; margin-top: 6px; }
.jst .jst-summary-pay { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--st-line); }
.jst .jst-summary-pay .jst-chip { min-height: 28px; font-size: 12px; }
.jst .jst-mini-lines { display: grid; gap: 14px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--st-line); }
.jst .jst-mini { display: flex; align-items: center; gap: 12px; min-width: 0; }
.jst .jst-mini-tile { flex: none; width: 60px; height: 60px; border-radius: min(var(--st-radius), 12px); }
.jst .jst-mini-tile > svg.jst-art { left: 5%; top: 3%; width: 90%; height: 94%; }
.jst .jst-mini-q {
  position: absolute; top: 4px; right: 4px; z-index: 2; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--st-text); color: var(--st-bg); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.jst .jst-mini-body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.jst .jst-mini-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jst .jst-mini-unit { font-size: 12.5px; color: var(--st-muted); }
.jst .jst-mini-total { flex: none; font-size: 14px; font-weight: 600; }

/* Checkout header */
.jst .jst-co-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; }
.jst .jst-header--co .jst-logo { min-width: 0; font-size: calc(19px * var(--st-hf, 1)); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jst[data-device="desktop"] .jst-header--co .jst-logo { font-size: calc(24px * var(--st-hf, 1)); }
.jst .jst-co-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; font-size: 14px; font-weight: 500; }
.jst .jst-co-back .jst-ico { width: 20px; height: 20px; }
.jst[data-device="phone"] .jst-co-back { justify-content: flex-start; }
.jst[data-device="phone"] .jst-co-back span { display: none; }
.jst .jst-secure { display: inline-flex; align-items: center; gap: 6px; max-width: 128px; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--st-text); }
.jst[data-device="desktop"] .jst-secure { max-width: none; font-size: 13.5px; }
.jst .jst-secure .jst-ico { width: 18px; height: 18px; color: var(--st-accent-ink); }
.jst[data-device="desktop"] .jst-co-head { min-height: 76px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.jst[data-device="desktop"] .jst-co-back { justify-self: start; }
.jst[data-device="desktop"] .jst-secure { justify-self: end; }

/* Steps: Panier › Livraison et paiement › Confirmation */
.jst .jst-steps-nav { margin: 8px 0 16px; }
.jst .jst-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-size: 12.5px; line-height: 1.3; color: var(--st-muted); }
.jst .jst-stp { display: inline-flex; align-items: center; min-width: 0; white-space: nowrap; }
.jst .jst-stp + .jst-stp::before { content: '›'; margin: 0 9px; font-size: 15px; line-height: 1; color: var(--st-muted); }
.jst .jst-stp-link { display: inline-flex; align-items: center; min-height: 32px; }
.jst .jst-stp-dot { display: none; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; margin-right: 8px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 700; }
.jst .jst-stp-dot .jst-ico { width: 13px; height: 13px; stroke-width: 2.4; }
.jst .jst-stp.is-done { color: var(--st-text); }
.jst .jst-stp.is-on { color: var(--st-text); font-weight: 700; }
.jst[data-device="desktop"] .jst-steps { font-size: 13.5px; }
.jst[data-device="desktop"] .jst-stp-dot { display: inline-flex; }
.jst[data-device="desktop"] .jst-stp.is-done .jst-stp-dot { border-color: var(--st-text); background: var(--st-text); color: var(--st-bg); }
.jst[data-device="desktop"] .jst-stp.is-on .jst-stp-dot { border-color: var(--st-accent); background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-device="desktop"] .jst-stp + .jst-stp::before { margin: 0 14px; }
/* Phone: numbered dots and only the current step's label, so the line never wraps */
.jst[data-device="phone"] .jst-stp-dot { display: inline-flex; margin-right: 6px; }
.jst[data-device="phone"] .jst-stp.is-done .jst-stp-dot { border-color: var(--st-text); background: var(--st-text); color: var(--st-bg); }
.jst[data-device="phone"] .jst-stp.is-on .jst-stp-dot { border-color: var(--st-accent); background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-device="phone"] .jst-stp:not(.is-on) .jst-stp-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Checkout */
.jst .jst-co > .jst-page-title { margin-bottom: 20px; }
.jst[data-device="desktop"] .jst-co > .jst-page-title { margin-bottom: 36px; }
/* Phone: the form, then the summary and the pay button together. Desktop: the form on the left, the
   summary with the pay button right under its total on the right (sticky in a real store page). */
.jst .jst-co-grid { display: grid; grid-template-areas: "main" "side"; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.jst[data-device="desktop"] .jst-co-grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, .9fr); grid-template-areas: "main side"; gap: 20px 56px; align-items: start; }
.jst .jst-co-main { grid-area: main; display: grid; gap: 16px; min-width: 0; }
.jst .jst-co-side { grid-area: side; display: grid; gap: 16px; min-width: 0; }
.jst[data-device="desktop"] .jst-co-side { position: sticky; top: 24px; gap: 20px; }
.jst .jst-co-actions { display: grid; gap: 12px; min-width: 0; }
.jst .jst-co-block { min-width: 0; padding: 20px; border: 1px solid var(--st-line); border-radius: var(--st-radius); background: var(--st-surface); }
.jst[data-device="desktop"] .jst-co-block { padding: 28px; }
.jst .jst-co-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-family: var(--st-font-text); font-size: 17px; font-weight: 700; line-height: 1.25; }
.jst .jst-co-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--st-accent); color: var(--st-on-accent); font-size: 13px; font-weight: 700; }
.jst .jst-fields { display: grid; gap: 16px; }
.jst[data-device="desktop"] .jst-fields { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.jst .jst-co-block > .jst-field + .jst-field { margin-top: 16px; }
.jst .jst-field { display: flex; flex-direction: column; min-width: 0; }
.jst .jst-input {
  display: block; width: 100%; min-width: 0; min-height: 50px; margin: 0; padding: 12px 14px;
  border: 1px solid var(--st-field-line); border-radius: min(var(--st-radius), 12px); background: var(--st-surface); color: var(--st-text);
  font-family: var(--st-font-text); font-size: 16px; font-weight: 400; line-height: 1.35; letter-spacing: normal; text-transform: none;
  box-shadow: none; outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.jst .jst-input::placeholder { color: var(--st-muted); opacity: 1; }
.jst .jst-input:focus { border-color: var(--st-accent-ink); box-shadow: 0 0 0 3px var(--st-accent-soft); }
.jst .jst-textarea { min-height: 92px; resize: vertical; }
.jst .jst-input-group { display: flex; align-items: stretch; min-width: 0; }
.jst .jst-prefix {
  display: inline-flex; align-items: center; flex: none; padding: 0 12px; border: 1px solid var(--st-field-line); border-right: 0;
  border-radius: min(var(--st-radius), 12px) 0 0 min(var(--st-radius), 12px); background: var(--st-bg); font-size: 15px; font-weight: 600;
}
.jst .jst-input-group .jst-input { flex: 1 1 auto; border-radius: 0 min(var(--st-radius), 12px) min(var(--st-radius), 12px) 0; }
.jst .jst-select { position: relative; }
.jst .jst-select .jst-input { padding-right: 44px; cursor: pointer; }
.jst .jst-select > .jst-ico { position: absolute; top: 50%; right: 14px; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
.jst .jst-select.is-empty .jst-input { color: var(--st-muted); }
.jst .jst-select option { color: var(--st-text); background: var(--st-surface); }
.jst .jst-select.is-invalid .jst-input { border-color: var(--st-error); box-shadow: inset 0 0 0 1px var(--st-error); }
.jst .jst-error { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--st-error); text-transform: none; letter-spacing: normal; }
.jst .jst-error .jst-ico { width: 16px; height: 16px; margin-top: 1px; }
.jst .jst-help { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--st-muted); }
.jst .jst-eta { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: min(var(--st-radius), 12px); background: var(--st-bg); font-size: 13.5px; line-height: 1.45; }
.jst .jst-eta .jst-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--st-accent-ink); }
.jst .jst-eta b { font-weight: 600; }
.jst .jst-eta.is-empty { color: var(--st-muted); }

.jst .jst-pay { display: grid; gap: 10px; }
.jst .jst-pay-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 14px 16px;
  border: 1px solid var(--st-field-line); border-radius: min(var(--st-radius), 14px); background: var(--st-surface); color: var(--st-text); text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.jst .jst-pay-opt.is-on { border-color: var(--st-accent-ink); background: var(--st-tint); box-shadow: inset 0 0 0 1px var(--st-accent-ink); }
.jst .jst-pay-opt.is-on .jst-pay-hint { color: var(--st-muted-tint); }
.jst .jst-radio { position: relative; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--st-field-line); border-radius: 50%; background: var(--st-surface); }
.jst .jst-pay-opt.is-on .jst-radio { border-color: var(--st-accent-ink); }
.jst .jst-pay-opt.is-on .jst-radio::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--st-accent-ink); }
.jst .jst-pay-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.jst .jst-pay-label { font-size: 15px; font-weight: 600; line-height: 1.25; }
.jst .jst-pay-hint { font-size: 12.5px; line-height: 1.45; color: var(--st-muted); }
.jst .jst-pay-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: min(var(--st-radius), 10px); background: var(--st-bg); color: var(--st-text); }
.jst .jst-pay-ico .jst-ico { width: 20px; height: 20px; }
.jst[data-device="desktop"] .jst-pay-opt:not(.is-on):hover { border-color: var(--st-text); }
/* Only the chosen method shows its hint: three mobile-money lines say the same thing */
.jst .jst-pay-opt:not(.is-on) .jst-pay-hint { display: none; }
.jst .jst-pay-opt:not(.is-on) { min-height: 56px; padding-top: 10px; padding-bottom: 10px; }

.jst .jst-pay-btn { min-height: 58px; font-size: 16px; }
.jst .jst-pay-note { margin-top: -2px; font-size: 12.5px; line-height: 1.45; text-align: center; color: var(--st-muted); }
.jst .jst-pay-note:empty { display: none; }
.jst .jst-or { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--st-muted); }
.jst .jst-or::before, .jst .jst-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--st-line); }
.jst .jst-trust {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; padding: 14px 16px;
  border: 1px dashed var(--st-field-line); border-radius: min(var(--st-radius), 12px); font-size: 12.5px; line-height: 1.5; color: var(--st-text-soft);
}
.jst .jst-trust .jst-ico { width: 20px; height: 20px; color: var(--st-accent-ink); }
.jst .jst-co-none { padding: 32px 22px; border: 1.5px dashed var(--st-field-line); border-radius: var(--st-radius); background: var(--st-surface); text-align: center; color: var(--st-muted); }
.jst .jst-co-none-title { margin-bottom: 8px; font-size: calc(21px * var(--st-hs, 1)); color: var(--st-text); }
.jst .jst-co-alone { margin-top: 20px; }

/* Phone: « Voir ma commande · 3 articles  65 000 FCFA », folded at the top of the checkout */
.jst .jst-co-peek { margin: -8px calc(-1 * var(--st-gutter)) 16px; padding: 0 var(--st-gutter); border-bottom: 1px solid var(--st-line); background: var(--st-surface); }
.jst[data-intensity="vivid"] .jst-co-peek { background: var(--st-tint); --st-muted: var(--st-muted-tint); }
.jst .jst-co-peek-bar { display: flex; align-items: center; gap: 10px; min-height: 54px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.3; }
.jst .jst-co-peek-bar::-webkit-details-marker { display: none; }
.jst .jst-co-peek-bar::marker { content: ''; }
.jst .jst-co-peek-bag { position: relative; display: inline-flex; flex: none; padding: 4px 6px 0 0; }
.jst .jst-co-peek-bag > .jst-ico { width: 22px; height: 22px; color: var(--st-accent-ink); }
.jst .jst-co-peek-n {
  position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--st-text); color: var(--st-bg); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; letter-spacing: 0;
}
.jst .jst-co-peek-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jst .jst-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.jst .jst-co-peek-hide, .jst .jst-co-peek[open] .jst-co-peek-show { display: none; }
.jst .jst-co-peek[open] .jst-co-peek-hide { display: inline; }
.jst .jst-co-peek-bar .jst-price { font-size: 16px; font-weight: 700; }
.jst .jst-co-peek-bar > .jst-co-peek-chev { width: 18px; height: 18px; color: var(--st-text); transition: transform .2s ease; }
.jst .jst-co-peek[open] > .jst-co-peek-bar > .jst-co-peek-chev { transform: rotate(180deg); }
.jst .jst-co-peek-body { padding: 4px 0 18px; }

/* Confirmation */
.jst .jst-ok-hero { display: flex; flex-direction: column; align-items: center; padding: 32px 20px 28px; border: 1px solid var(--st-line); border-radius: var(--st-radius); background: var(--st-surface); text-align: center; }
.jst[data-device="desktop"] .jst-ok-hero { padding: 56px 40px 48px; }
.jst .jst-ok-check {
  display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin-bottom: 20px;
  border-radius: 50%; background: var(--st-accent); color: var(--st-on-accent); box-shadow: 0 0 0 10px var(--st-accent-soft);
}
.jst .jst-ok-check .jst-ico { width: 38px; height: 38px; stroke-width: 2.2; }
.jst .jst-ok-title { font-size: calc(34px * var(--st-hs, 1)); }
.jst[data-device="desktop"] .jst-ok-title { font-size: calc(54px * var(--st-hs, 1)); }
.jst .jst-ok-num { margin-top: 10px; font-size: 15.5px; font-weight: 600; }
.jst .jst-ok-status {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 16px;
  border-radius: 999px; background: var(--st-tint); color: var(--st-text); font-size: 13.5px; font-weight: 500; line-height: 1.35;
}
.jst .jst-ok-status .jst-ico { width: 18px; height: 18px; color: var(--st-accent-text); stroke-width: 2.2; }
.jst .jst-ok-status b { font-weight: 700; }
.jst .jst-ok-eta { display: flex; align-items: flex-start; justify-content: center; gap: 8px; max-width: 30em; margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--st-muted); }
.jst .jst-ok-eta .jst-ico { width: 18px; height: 18px; margin-top: 1px; }
.jst .jst-ok-actions { display: grid; gap: 6px; width: 100%; max-width: 360px; margin-top: 26px; }
.jst[data-device="desktop"] .jst-ok-actions { max-width: 440px; }
.jst .jst-ok-back { justify-content: center; min-height: 44px; }
.jst .jst-ok-grid { display: grid; gap: 16px; margin-top: 16px; }
.jst[data-device="desktop"] .jst-ok-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px; margin-top: 24px; align-items: start; }
.jst .jst-ok-dl { display: grid; gap: 16px; }
.jst .jst-ok-dl dt { margin-bottom: 3px; font-size: 12px; font-weight: 600; color: var(--st-muted); }
.jst .jst-ok-dl dd { margin: 0; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }

/* A note next to a button that only works in the real store */
.jst .jst-toast-dock { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 40; pointer-events: none; }
.jst .jst-toast {
  position: absolute; left: 0; right: 0; display: flex; align-items: flex-start; gap: 10px;
  width: max-content; max-width: min(360px, calc(100% - 32px)); margin: 0 auto; padding: 12px 16px;
  border-radius: 12px; background: var(--st-text); color: var(--st-bg); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
  font-family: var(--st-font-text); font-size: 13.5px; font-weight: 500; line-height: 1.45; text-transform: none; letter-spacing: normal;
  animation: jst-toast .22s ease both;
}
.jst .jst-toast .jst-ico { width: 18px; height: 18px; margin-top: 1px; }
@keyframes jst-toast { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.jst .jst-header--co .jst-logo { grid-area: auto; }
.jst .jst-co-n0 { display: none; }
.jst[data-intensity="soft"] .jst-pay-opt.is-on { background: var(--st-surface-2); }
.jst[data-intensity="soft"] .jst-pay-opt.is-on .jst-pay-hint { color: var(--st-muted); }
.jst[data-intensity="soft"] .jst-ok-status { background: var(--st-accent-soft); }
.jst[data-intensity="soft"] .jst-ok-status .jst-ico { color: var(--st-accent-ink); }

/* ---------------------------------------------------------------- Plateau journey: thin rules,
   serif titles, small capitals, square corners, lots of air. */
.jst[data-tpl="plateau"] .jst-label,
.jst[data-tpl="plateau"] .jst-back,
.jst[data-tpl="plateau"] .jst-crumbs ol,
.jst[data-tpl="plateau"] .jst-remove,
.jst[data-tpl="plateau"] .jst-or,
.jst[data-tpl="plateau"] .jst-page-sub,
.jst[data-tpl="plateau"] .jst-ok-dl dt,
.jst[data-tpl="plateau"] .jst-co-back,
.jst[data-tpl="plateau"] .jst-secure { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.jst[data-tpl="plateau"] .jst-crumbs [aria-current] { max-width: 28ch; }
.jst[data-tpl="plateau"] .jst-stepper,
.jst[data-tpl="plateau"] .jst-input,
.jst[data-tpl="plateau"] .jst-pay-opt,
.jst[data-tpl="plateau"] .jst-eta,
.jst[data-tpl="plateau"] .jst-trust,
.jst[data-tpl="plateau"] .jst-summary,
.jst[data-tpl="plateau"] .jst-cart-empty,
.jst[data-tpl="plateau"] .jst-co-none,
.jst[data-tpl="plateau"] .jst-ok-hero,
.jst[data-tpl="plateau"] .jst-ok-status,
.jst[data-tpl="plateau"] .jst-line-tile,
.jst[data-tpl="plateau"] .jst-mini-tile { border-radius: var(--pl-r); }
.jst[data-tpl="plateau"] .jst-prefix { border-radius: var(--pl-r) 0 0 var(--pl-r); }
.jst[data-tpl="plateau"] .jst-input-group .jst-input { border-radius: 0 var(--pl-r) var(--pl-r) 0; }
.jst[data-tpl="plateau"] .jst-page-title { font-size: calc(36px * var(--st-hs, 1)); letter-spacing: -0.02em; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-page-title { font-size: calc(60px * var(--st-hs, 1)); }
/* product page */
.jst[data-tpl="plateau"] .jst-pdp-tile { aspect-ratio: 4 / 5; border-radius: var(--pl-r); }
.jst[data-tpl="plateau"][data-device="phone"] .jst-pdp-media { margin: 0 calc(-1 * var(--st-gutter)); }
.jst[data-tpl="plateau"][data-device="phone"] .jst-pdp-tile { border-radius: 0; }
.jst[data-tpl="plateau"] .jst-pdp-tile > svg.jst-art { left: 14%; top: 10%; width: 72%; height: 80%; }
.jst[data-tpl="plateau"] .jst-pdp-cat { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.jst[data-tpl="plateau"] .jst-pdp-name { font-size: calc(34px * var(--st-hs, 1)); line-height: 1.06; letter-spacing: -0.02em; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-pdp-name { font-size: calc(54px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"] .jst-pdp-price { font-size: 19px; font-weight: 500; letter-spacing: .02em; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-pdp-price { font-size: 22px; }
.jst[data-tpl="plateau"] .jst-pdp-desc { font-size: 15.5px; line-height: 1.75; }
.jst[data-tpl="plateau"] .jst-perks { border-top-color: var(--st-text); }
.jst[data-tpl="plateau"] .jst-perks .jst-ico { stroke-width: 1.4; }
/* cart */
.jst[data-tpl="plateau"] .jst-lines { border-top-color: var(--st-text); }
.jst[data-tpl="plateau"] .jst-line { gap: 16px; padding: 20px 0; }
.jst[data-tpl="plateau"] .jst-line-tile { aspect-ratio: 4 / 5; }
.jst[data-tpl="plateau"] .jst-line-cat { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.jst[data-tpl="plateau"] .jst-line-name { font-family: var(--st-font-display); font-size: 18px; font-weight: var(--st-display-weight, 600); line-height: 1.2; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-line-name { font-size: 22px; }
.jst[data-tpl="plateau"] .jst-line-total, .jst[data-tpl="plateau"] .jst-mini-total { font-weight: 500; }
.jst[data-tpl="plateau"] .jst-summary { border: 0; padding: 24px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-summary { padding: 32px; }
.jst[data-tpl="plateau"] .jst-summary-title { font-size: calc(24px * var(--st-hs, 1)); letter-spacing: -0.01em; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-summary-title { font-size: calc(28px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"] .jst-row--total { border-top-color: var(--st-text); }
.jst[data-tpl="plateau"] .jst-row--total dd { font-size: 25px; font-weight: 500; }
.jst[data-tpl="plateau"] .jst-mini-name { font-weight: 500; }
/* steps */
.jst[data-tpl="plateau"] .jst-steps { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-steps { font-size: 11.5px; }
.jst[data-tpl="plateau"] .jst-stp-dot { letter-spacing: 0; font-weight: 600; border-width: 1px; }
.jst[data-tpl="plateau"][data-device="phone"] .jst-steps { font-size: 11.5px; letter-spacing: .12em; }
.jst[data-tpl="plateau"][data-device="phone"] .jst-stp + .jst-stp::before { margin: 0 7px; }
/* checkout */
.jst[data-tpl="plateau"] .jst-header--co .jst-logo { font-size: calc(21px * var(--st-hf, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-header--co .jst-logo { font-size: calc(28px * var(--st-hf, 1)); }
.jst[data-tpl="plateau"] .jst-co-main { gap: 32px; }
.jst[data-tpl="plateau"] .jst-co-block { padding: 22px 0 0; border: 0; border-top: 1px solid var(--st-text); border-radius: 0; background: transparent; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-co-block { padding: 30px 0 0; }
.jst[data-tpl="plateau"] .jst-co-h { gap: 14px; margin-bottom: 20px; font-family: var(--st-font-display); font-size: 25px; font-weight: var(--st-display-weight, 600); letter-spacing: -0.015em; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-co-h { font-size: 30px; }
.jst[data-tpl="plateau"] .jst-co-n { width: auto; height: auto; padding-top: 4px; border-radius: 0; background: none; color: var(--st-muted); font-family: var(--st-font-text); font-size: 11px; font-weight: 600; letter-spacing: .14em; align-self: flex-start; }
.jst[data-tpl="plateau"] .jst-co-n0 { display: inline; }
.jst[data-tpl="plateau"] .jst-pay-ico { border: 1px solid var(--st-line); border-radius: 50%; background: transparent; }
.jst[data-tpl="plateau"] .jst-pay-ico .jst-ico { stroke-width: 1.4; }
.jst[data-tpl="plateau"] .jst-pay-opt.is-on { border-color: var(--st-text); box-shadow: inset 0 0 0 1px var(--st-text); }
.jst[data-tpl="plateau"] .jst-pay-opt.is-on .jst-radio { border-color: var(--st-text); }
.jst[data-tpl="plateau"] .jst-pay-opt.is-on .jst-radio::after { background: var(--st-text); }
.jst[data-tpl="plateau"] .jst-eta, .jst[data-tpl="plateau"] .jst-prefix { background: var(--st-surface); }
.jst[data-tpl="plateau"] .jst-trust { border-style: solid; border-color: var(--st-line); }
.jst[data-tpl="plateau"] .jst-pay-btn { font-size: 12.5px; }
/* confirmation */
.jst[data-tpl="plateau"] .jst-ok-hero { border: 0; }
.jst[data-tpl="plateau"] .jst-ok-check { width: 80px; height: 80px; border: 1px solid var(--st-text); background: transparent; color: var(--st-text); box-shadow: none; }
.jst[data-tpl="plateau"] .jst-ok-check .jst-ico { width: 34px; height: 34px; stroke-width: 1.4; }
.jst[data-tpl="plateau"] .jst-ok-title { font-size: calc(42px * var(--st-hs, 1)); letter-spacing: -0.025em; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-ok-title { font-size: calc(68px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"] .jst-ok-num { margin-top: 14px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; }
.jst[data-tpl="plateau"] .jst-ok-status { font-size: 13px; }

/* ---------------------------------------------------------------- Cocody journey: soft cards,
   pills, round thumbnails, gentle shadows. */
.jst[data-tpl="cocody"] { --cc-field: min(var(--st-radius), 16px); --cc-card: calc(var(--st-radius) * 1.1); }
.jst[data-tpl="cocody"] .jst-stepper,
.jst[data-tpl="cocody"] .jst-pay-ico { border-radius: var(--cc-pill); }
.jst[data-tpl="cocody"] .jst-input,
.jst[data-tpl="cocody"] .jst-eta,
.jst[data-tpl="cocody"] .jst-trust { border-radius: var(--cc-field); }
.jst[data-tpl="cocody"] .jst-prefix { border-radius: var(--cc-field) 0 0 var(--cc-field); }
.jst[data-tpl="cocody"] .jst-input-group .jst-input { border-radius: 0 var(--cc-field) var(--cc-field) 0; }
.jst[data-tpl="cocody"] .jst-pay-opt { border-radius: calc(var(--cc-field) + 2px); }
.jst[data-tpl="cocody"] .jst-summary,
.jst[data-tpl="cocody"] .jst-co-block,
.jst[data-tpl="cocody"] .jst-cart-empty,
.jst[data-tpl="cocody"] .jst-ok-hero,
.jst[data-tpl="cocody"] .jst-line {
  border: 0; border-radius: var(--cc-card); background: var(--st-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -20px rgba(0, 0, 0, .24);
}
.jst[data-tpl="cocody"][data-tone="dark"] .jst-summary,
.jst[data-tpl="cocody"][data-tone="dark"] .jst-co-block,
.jst[data-tpl="cocody"][data-tone="dark"] .jst-cart-empty,
.jst[data-tpl="cocody"][data-tone="dark"] .jst-ok-hero,
.jst[data-tpl="cocody"][data-tone="dark"] .jst-line { box-shadow: none; }
.jst[data-tpl="cocody"] .jst-co-none { border-radius: var(--cc-card); }
/* product page */
.jst[data-tpl="cocody"] .jst-pdp-tile { border-radius: calc(var(--st-radius) * 1.3); background: radial-gradient(circle at 50% 38%, var(--tile-hi) 0%, var(--tile) 78%); }
.jst[data-tpl="cocody"] .jst-pdp-tile .jst-badge { top: 14px; left: 14px; height: 28px; padding: 0 12px; font-size: 12px; }
.jst[data-tpl="cocody"] .jst-pdp-cat { align-self: flex-start; padding: 5px 12px; border-radius: var(--cc-pill); background: var(--st-surface); font-size: 12.5px; font-weight: 600; color: var(--st-text); }
.jst[data-tpl="cocody"] .jst-pdp-name { font-size: calc(27px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-pdp-name { font-size: calc(40px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"] .jst-pdp-price { font-weight: 700; }
.jst[data-tpl="cocody"] .jst-pdp-desc { color: var(--st-muted); }
.jst[data-tpl="cocody"] .jst-perks { padding: 16px 18px; border: 0; border-radius: var(--cc-field); background: var(--st-surface); }
.jst[data-tpl="cocody"] .jst-perks .jst-ico { padding: 0; }
.jst[data-tpl="cocody"] .jst-pdp-pay .jst-chip { background: var(--st-surface); }
/* cart */
.jst[data-tpl="cocody"] .jst-lines { gap: 10px; border: 0; }
.jst[data-tpl="cocody"] .jst-line { padding: 10px 12px 10px 10px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-line { padding: 14px 20px 14px 14px; gap: 20px; }
.jst[data-tpl="cocody"] .jst-line-tile, .jst[data-tpl="cocody"] .jst-mini-tile { border-radius: var(--cc-in); background: radial-gradient(circle at 50% 36%, var(--tile-hi) 0%, var(--tile) 78%); }
.jst[data-tpl="cocody"] .jst-line-cat { display: none; }
.jst[data-tpl="cocody"] .jst-line-total, .jst[data-tpl="cocody"] .jst-mini-total { font-weight: 700; }
.jst[data-tpl="cocody"] .jst-remove { padding: 0 10px; border-radius: var(--cc-pill); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-remove:hover { background: var(--st-bg); }
.jst[data-tpl="cocody"] .jst-summary-pay .jst-chip { background: var(--st-bg); }
/* steps: a soft pill */
.jst[data-tpl="cocody"] .jst-steps { display: inline-flex; padding: 7px 16px; border-radius: var(--cc-pill); background: var(--st-surface); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-steps { padding: 8px 20px 8px 10px; }
/* checkout */
.jst[data-tpl="cocody"] .jst-co-main { gap: 12px; }
.jst[data-tpl="cocody"] .jst-co-h { font-family: var(--st-font-display); font-size: 18px; font-weight: var(--st-display-weight, 600); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-co-h { font-size: 21px; }
.jst[data-tpl="cocody"] .jst-co-n { width: 30px; height: 30px; }
.jst[data-tpl="cocody"] .jst-pay-opt.is-on { box-shadow: inset 0 0 0 1px var(--st-accent-ink), 0 10px 24px -18px rgba(0, 0, 0, .35); }
.jst[data-tpl="cocody"] .jst-or { text-transform: none; }
/* confirmation */
.jst[data-tpl="cocody"] .jst-ok-hero { position: relative; overflow: hidden; isolation: isolate; }
.jst[data-tpl="cocody"] .jst-ok-hero::before,
.jst[data-tpl="cocody"] .jst-ok-hero::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; background: var(--st-accent); opacity: .07; pointer-events: none; }
.jst[data-tpl="cocody"] .jst-ok-hero::before { width: 240px; height: 240px; right: -90px; top: -100px; }
.jst[data-tpl="cocody"] .jst-ok-hero::after { width: 160px; height: 160px; left: -70px; bottom: -80px; }
.jst[data-tpl="cocody"] .jst-ok-title { letter-spacing: -0.02em; }

/* ---------------------------------------------------------------- Treichville journey: thick
   lines, capitals, accent blocks and hard shadows. */
.jst[data-tpl="treichville"] { --tv-r: calc(var(--st-radius) * .5); }
.jst[data-tpl="treichville"] .jst-label,
.jst[data-tpl="treichville"] .jst-back,
.jst[data-tpl="treichville"] .jst-crumbs ol,
.jst[data-tpl="treichville"] .jst-remove,
.jst[data-tpl="treichville"] .jst-or,
.jst[data-tpl="treichville"] .jst-page-sub,
.jst[data-tpl="treichville"] .jst-ok-dl dt,
.jst[data-tpl="treichville"] .jst-co-back,
.jst[data-tpl="treichville"] .jst-secure,
.jst[data-tpl="treichville"] .jst-steps,
.jst[data-tpl="treichville"] .jst-pdp-cat,
.jst[data-tpl="treichville"] .jst-line-cat,
.jst[data-tpl="treichville"] .jst-ok-num { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jst[data-tpl="treichville"] .jst-stepper { border: var(--tv-line); border-radius: var(--tv-r); }
.jst[data-tpl="treichville"] .jst-input { border: var(--tv-line); border-radius: var(--tv-r); font-weight: 500; }
.jst[data-tpl="treichville"] .jst-input:focus { border-color: var(--st-text); box-shadow: 4px 4px 0 var(--st-accent); }
.jst[data-tpl="treichville"] .jst-input-group .jst-prefix { border: var(--tv-line); border-right: 0; border-radius: var(--tv-r) 0 0 var(--tv-r); background: var(--st-accent); color: var(--st-on-accent); font-weight: 800; }
.jst[data-tpl="treichville"] .jst-input-group .jst-input { border-radius: 0 var(--tv-r) var(--tv-r) 0; }
.jst[data-tpl="treichville"] .jst-eta, .jst[data-tpl="treichville"] .jst-pay-ico { border-radius: var(--tv-r); }
.jst[data-tpl="treichville"] .jst-summary,
.jst[data-tpl="treichville"] .jst-co-block,
.jst[data-tpl="treichville"] .jst-cart-empty,
.jst[data-tpl="treichville"] .jst-ok-hero,
.jst[data-tpl="treichville"] .jst-co-none { border: var(--tv-line); border-radius: var(--st-radius); }
.jst[data-tpl="treichville"] .jst-cart-summary,
.jst[data-tpl="treichville"] .jst-co-summary { margin-right: 8px; box-shadow: 8px 8px 0 var(--st-accent); }
.jst[data-tpl="treichville"] .jst-page-title { font-size: calc(38px * var(--st-hs, 1)); line-height: .96; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-page-title { font-size: calc(76px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"] .jst-summary-title { font-size: calc(20px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"] .jst-row--total { border-top: var(--tv-line); }
.jst[data-tpl="treichville"] .jst-row--total dd { font-size: 24px; letter-spacing: -0.02em; }
.jst[data-tpl="treichville"] .jst-row--total dt { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
/* product page */
.jst[data-tpl="treichville"] .jst-pdp-media { margin-right: 12px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-pdp-media { margin-right: 18px; }
.jst[data-tpl="treichville"] .jst-pdp-tile { box-shadow: 12px 12px 0 var(--st-accent); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-pdp-tile { box-shadow: 18px 18px 0 var(--st-accent); }
.jst[data-tpl="treichville"] .jst-pdp-tile .jst-badge { top: 0; left: 0; }
.jst[data-tpl="treichville"] .jst-pdp-tile .jst-badge--promo { top: 14px; left: 12px; }
.jst[data-tpl="treichville"] .jst-pdp-cat { color: var(--st-accent-ink); }
.jst[data-tpl="treichville"] .jst-pdp-name { font-size: calc(34px * var(--st-hs, 1)); line-height: .98; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-pdp-name { font-size: calc(46px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"] .jst-pdp-price { font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); font-size: 26px; letter-spacing: -0.02em; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-pdp-price { font-size: 34px; }
.jst[data-tpl="treichville"] .jst-perks { border-top: 3px solid var(--st-text); font-weight: 600; }
.jst[data-tpl="treichville"] .jst-perks .jst-ico { stroke-width: 2; }
/* cart */
.jst[data-tpl="treichville"] .jst-lines { border-top: 3px solid var(--st-text); }
.jst[data-tpl="treichville"] .jst-line { border-bottom-width: 1.5px; }
.jst[data-tpl="treichville"] .jst-line-tile, .jst[data-tpl="treichville"] .jst-mini-tile { border-radius: var(--st-radius); }
.jst[data-tpl="treichville"] .jst-line-cat { font-size: 10.5px; color: var(--st-accent-ink); }
.jst[data-tpl="treichville"] .jst-line-name, .jst[data-tpl="treichville"] .jst-mini-name { font-size: 13.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.jst[data-tpl="treichville"] .jst-mini-name { -webkit-line-clamp: 3; }
.jst[data-tpl="treichville"] .jst-line-total, .jst[data-tpl="treichville"] .jst-mini-total { font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); letter-spacing: -0.01em; }
.jst[data-tpl="treichville"] .jst-remove { font-size: 10.5px; }
.jst[data-tpl="treichville"] .jst-bag-n { background: var(--st-text); color: var(--st-bg); }
.jst[data-tpl="treichville"] .jst-empty-ico { border-radius: var(--tv-r); background: var(--st-accent); color: var(--st-on-accent); }
/* steps: the current one is an accent block */
.jst[data-tpl="treichville"] .jst-steps { font-size: 10.5px; }
.jst[data-tpl="treichville"] .jst-stp.is-on .jst-stp-label { padding: 4px 8px; border-radius: var(--tv-r); background: var(--st-accent); color: var(--st-on-accent); box-shadow: none; }
.jst[data-tpl="treichville"] .jst-stp-dot { border-radius: var(--tv-r); border-width: 1.5px; }
.jst[data-tpl="treichville"] .jst-stp.is-on .jst-stp-dot { display: none; }
/* checkout */
.jst[data-tpl="treichville"] .jst-co-main { gap: 14px; }
.jst[data-tpl="treichville"] .jst-co-h { font-family: var(--st-font-display); font-size: 19px; font-weight: var(--st-display-weight, 600); letter-spacing: -0.01em; text-transform: uppercase; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-co-h { font-size: 24px; }
.jst[data-tpl="treichville"] .jst-co-n { border-radius: var(--tv-r); font-family: var(--st-font-display); }
.jst[data-tpl="treichville"] .jst-pay-opt { border: var(--tv-line); border-radius: var(--tv-r); transition: transform .15s ease, box-shadow .15s ease; }
.jst[data-tpl="treichville"] .jst-pay-opt.is-on { border-color: var(--st-text); background: var(--st-accent); color: var(--st-on-accent); box-shadow: 4px 4px 0 var(--st-text); }
.jst[data-tpl="treichville"] .jst-pay-opt.is-on .jst-pay-hint { color: var(--st-on-accent-soft); }
.jst[data-tpl="treichville"] .jst-pay-opt.is-on .jst-radio { border-color: var(--st-on-accent); background: transparent; }
.jst[data-tpl="treichville"] .jst-pay-opt.is-on .jst-radio::after { background: var(--st-on-accent); }
.jst[data-tpl="treichville"] .jst-pay-opt.is-on .jst-pay-ico { background: var(--st-on-accent); color: var(--st-accent); }
.jst[data-tpl="treichville"] .jst-pay-label { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: 14px; }
.jst[data-tpl="treichville"] .jst-pay-btn { box-shadow: 6px 6px 0 var(--st-text); }
.jst[data-tpl="treichville"] .jst-trust { border: 1.5px dashed var(--st-text); border-radius: var(--tv-r); }
.jst[data-tpl="treichville"] .jst-header--co .jst-logo { font-size: calc(17px * var(--st-hf, 1)); text-transform: uppercase; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-header--co .jst-logo { font-size: calc(22px * var(--st-hf, 1)); }
/* confirmation */
.jst[data-tpl="treichville"] .jst-ok-hero .jst-ok-check { margin-bottom: 26px; border-radius: var(--tv-r); box-shadow: 8px 8px 0 var(--st-text); transform: rotate(-4deg); }
.jst[data-tpl="treichville"] .jst-ok-title { font-size: calc(42px * var(--st-hs, 1)); line-height: .96; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-ok-title { font-size: calc(84px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"] .jst-ok-num { margin-top: 14px; font-size: 12.5px; }
.jst[data-tpl="treichville"] .jst-ok-hero .jst-ok-status { border-radius: var(--tv-r); background: var(--st-text); color: var(--st-bg); font-weight: 600; }
.jst[data-tpl="treichville"] .jst-ok-hero .jst-ok-status .jst-ico { color: inherit; }

/* =====================================================================
   VIVID — the palette's strong colour carries the page. Every colour comes from the
   contrast-checked set computed by render.js; tinted areas swap --st-muted for a version
   that still reads at 4.5:1 there.
   ===================================================================== */

.jst[data-intensity="vivid"] .jst-sec--tint { padding: calc(var(--st-sec) * .62) 0; background: var(--st-tint); --st-muted: var(--st-muted-tint); }
.jst[data-intensity="vivid"] .jst-card-price,
.jst[data-intensity="vivid"] .jst-pdp-price,
.jst[data-intensity="vivid"] .jst-float .jst-price { color: var(--st-accent-ink); }
.jst[data-intensity="vivid"] .jst-stars { color: var(--st-accent-ink); }
.jst[data-intensity="vivid"] .jst-empty-ico { background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-intensity="vivid"] .jst-related { padding: calc(var(--st-sec) * .62) 0; background: var(--st-tint); --st-muted: var(--st-muted-tint); }
.jst[data-intensity="vivid"] .jst-main > .jst-related:last-child { margin-bottom: calc(var(--st-sec) / -2); }
.jst[data-intensity="vivid"] .jst-cart-summary,
.jst[data-intensity="vivid"] .jst-co-summary { border-color: transparent; background: var(--st-tint); --st-muted: var(--st-muted-tint); }
.jst[data-intensity="vivid"] .jst-ok-hero { border-color: transparent; background: var(--st-tint-strong); --st-muted: var(--st-muted-strong); }
.jst[data-intensity="vivid"] .jst-ok-status { background: var(--st-surface); }
.jst[data-intensity="vivid"] .jst-ok-check { box-shadow: 0 0 0 10px var(--st-surface); }
.jst[data-intensity="vivid"] .jst-eta,
.jst[data-intensity="vivid"] .jst-prefix { background: var(--st-tint); }
.jst[data-intensity="vivid"] .jst-pay-ico { background: var(--st-tint); }
/* The footer takes the stronger tint, so it never merges with a tinted last section above it */
.jst[data-intensity="vivid"] .jst-footer { background: var(--st-tint-strong); --st-muted: var(--st-muted-strong); }
/* A tinted last section runs straight into the footer (no stray band of page colour) */
.jst[data-intensity="vivid"] .jst-main--end-tint { padding-bottom: 0; }

/* Plateau: a deep accent band behind the hero text, an accent frame around a hero photo */
.jst[data-tpl="plateau"][data-intensity="vivid"] .jst-badge--new { background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-tpl="plateau"][data-intensity="vivid"] .jst-hero-stage:not(.has-img) .jst-hero-copy { background: var(--st-accent); color: var(--st-on-accent); --st-muted: var(--st-on-accent-soft); }
.jst[data-tpl="plateau"][data-intensity="vivid"] .jst-hero-stage:not(.has-img) .jst-hero-copy::before { display: none; }
.jst[data-tpl="plateau"][data-intensity="vivid"] .jst-hero-stage:not(.has-img) .jst-hero-text { opacity: 1; color: var(--st-on-accent-soft); }
.jst[data-tpl="plateau"][data-intensity="vivid"]:not([data-buttons="outline"]) .jst-hero-stage:not(.has-img) .jst-btn { background: var(--st-on-accent); color: var(--st-accent); border-color: var(--st-on-accent); }
.jst[data-tpl="plateau"][data-intensity="vivid"][data-buttons="outline"] .jst-hero-stage:not(.has-img) .jst-btn { background: transparent; color: var(--st-on-accent); border-color: var(--st-on-accent); }
.jst[data-tpl="plateau"][data-intensity="vivid"][data-device="desktop"] .jst-hero-stage:not(.has-img) .jst-hero-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.jst[data-tpl="plateau"][data-intensity="vivid"] .jst-hero-stage.has-img::after { content: ''; position: absolute; inset: 0; z-index: 1; border: 10px solid var(--st-accent); pointer-events: none; }
.jst[data-tpl="plateau"][data-intensity="vivid"][data-device="desktop"] .jst-hero-stage.has-img::after { border-width: 16px; }
.jst[data-tpl="plateau"][data-intensity="vivid"] .jst-head { border-bottom: 2px solid var(--st-accent-ink); }
.jst[data-tpl="plateau"][data-intensity="vivid"] .jst-main > .jst-sec--hero:first-child + .jst-sec--tint { padding-top: calc(var(--st-sec) * .62); }
/* Dark palettes: a neon slab behind the editorial serif reads garish. A charcoal band with the
   accent on the title, a top rule and the button keeps the colour and the editorial calm. */
.jst[data-tpl="plateau"][data-intensity="vivid"][data-tone="dark"] .jst-hero-stage:not(.has-img) .jst-hero-copy { background: var(--st-tint-strong); color: var(--st-text); --st-muted: var(--st-muted-strong); box-shadow: inset 0 6px 0 var(--st-accent); }
.jst[data-tpl="plateau"][data-intensity="vivid"][data-tone="dark"] .jst-hero-stage:not(.has-img) .jst-hero-title { color: var(--st-accent); }
.jst[data-tpl="plateau"][data-intensity="vivid"][data-tone="dark"] .jst-hero-stage:not(.has-img) .jst-hero-text { color: var(--st-muted-strong); }
.jst[data-tpl="plateau"][data-intensity="vivid"][data-tone="dark"]:not([data-buttons="outline"]) .jst-hero-stage:not(.has-img) .jst-btn { background: var(--st-accent); color: var(--st-on-accent); border-color: var(--st-accent); }
.jst[data-tpl="plateau"][data-intensity="vivid"][data-tone="dark"][data-buttons="outline"] .jst-hero-stage:not(.has-img) .jst-btn { background: transparent; color: var(--st-accent); border-color: var(--st-accent); }

/* Cocody: saturated soft blocks */
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-hero-card { background: var(--st-tint-strong); --st-muted: var(--st-muted-strong); }
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-blob { background: var(--st-surface); opacity: .3; }
.jst[data-tpl="cocody"][data-intensity="vivid"][data-tone="dark"] .jst-blob { background: var(--st-bg); opacity: .45; }
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-badge--new { background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-avatar,
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-delivery-ico { background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-nav-link.is-current,
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-filter-chip.is-on { background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-zone,
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-delivery-notes span { background: var(--st-tint); }
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-steps { background: var(--st-tint); }

/* Treichville: full accent blocks */
.jst[data-tpl="treichville"][data-intensity="vivid"] .jst-sec--hero { background: var(--st-accent); color: var(--st-on-accent); --st-muted: var(--st-on-accent-soft); --tv-line: 1.5px solid var(--st-on-accent); }
.jst[data-tpl="treichville"][data-intensity="vivid"] .jst-sec--hero .jst-tag { background: var(--st-on-accent); color: var(--st-accent); }
.jst[data-tpl="treichville"][data-intensity="vivid"] .jst-sec--hero .jst-hero-text { color: var(--st-on-accent-soft); }
.jst[data-tpl="treichville"][data-intensity="vivid"]:not([data-buttons="outline"]) .jst-sec--hero .jst-btn { background: var(--st-on-accent); color: var(--st-accent); border-color: var(--st-on-accent); }
.jst[data-tpl="treichville"][data-intensity="vivid"][data-buttons="outline"] .jst-sec--hero .jst-btn { background: transparent; color: var(--st-on-accent); border-color: var(--st-on-accent); }
.jst[data-tpl="treichville"][data-intensity="vivid"] .jst-hero-block { box-shadow: 12px 12px 0 var(--st-on-accent); }
.jst[data-tpl="treichville"][data-intensity="vivid"][data-device="desktop"] .jst-hero-block { box-shadow: 18px 18px 0 var(--st-on-accent); }
.jst[data-tpl="treichville"][data-intensity="vivid"] .jst-sticker { background: var(--st-on-accent); color: var(--st-accent); }
.jst[data-tpl="treichville"][data-intensity="vivid"] .jst-strip { border-color: var(--st-on-accent); background: var(--st-on-accent); color: var(--st-accent); }
.jst[data-tpl="treichville"][data-intensity="vivid"] .jst-strip-in i { color: inherit; }
.jst[data-tpl="treichville"][data-intensity="vivid"] .jst-page-head { margin: -8px calc(-1 * var(--st-gutter)) 24px; padding: 4px var(--st-gutter) 22px; background: var(--st-accent); color: var(--st-on-accent); --st-muted: var(--st-on-accent-soft); }
.jst[data-tpl="treichville"][data-intensity="vivid"][data-device="desktop"] .jst-page-head { margin: -24px calc(-1 * var(--st-gutter)) 40px; padding: 16px var(--st-gutter) 36px; }


/* =====================================================================
   PAGES — the seller's own pages (config.pages, page 'page'), the phone menu, the footer column
   « Informations » and « Propulsé par Jeere ». Shared base first, then each template, then vivid.
   ===================================================================== */

/* Footer: the pages column and the Jeere line */
.jst[data-device="desktop"] .jst-footer-top[data-cols="4"] { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.2fr); gap: 40px; }
/* Four columns leave the store name less room: it wraps between words, never inside one */
.jst[data-device="desktop"] .jst-footer-top[data-cols="4"] .jst-footer-name { overflow-wrap: break-word; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-footer-top[data-cols="4"] .jst-footer-name { font-size: calc(48px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-footer-top[data-cols="4"] .jst-footer-name { font-size: calc(36px * var(--st-hs, 1)); }
.jst .jst-footer-pages .jst-footer-h { margin-bottom: 2px; }
.jst[data-device="desktop"] .jst-footer-pages .jst-footer-h { margin-bottom: 10px; }
.jst .jst-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.jst[data-device="desktop"] .jst-footer-links { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
.jst .jst-footer-link { display: flex; align-items: center; min-height: 44px; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; cursor: pointer; }
.jst[data-device="desktop"] .jst-footer-link { display: inline-flex; min-height: 26px; }
.jst[data-device="desktop"] .jst-footer-link:hover { text-decoration: none; }
.jst .jst-footer-link.is-current { font-weight: 600; text-decoration: none; }
.jst .jst-footer-bottom { align-items: center; }
.jst .jst-powered { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.jst .jst-powered-mark { display: block; width: 16px; height: 12px; flex: none; margin-left: 1px; color: var(--st-text); }
.jst .jst-powered b { line-height: 1; }

/* Desktop nav: page links never push the logo away (long titles end with …) */
.jst .jst-nav-txt { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jst[data-page="page"][data-tpl="plateau"] .jst-nav-link.is-current .jst-nav-txt { padding-bottom: 5px; margin-bottom: -5px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; }
/* Five links: a little less air between them */
.jst[data-tpl="plateau"] .jst-nav[data-count="5"] { gap: 24px; }
.jst[data-tpl="treichville"] .jst-nav[data-count="5"] { gap: 24px; }
.jst[data-tpl="cocody"] .jst-nav[data-count="5"] .jst-nav-link { padding: 9px 13px; }
/* A long store name leaves the links little room: tighter links, shorter titles */
.jst .jst-nav.is-tight { gap: 18px; }
.jst .jst-nav.is-tight .jst-nav-txt { max-width: 132px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-header-in.is-tight .jst-logo { max-width: 340px; font-size: calc(24px * var(--st-hf, 1)); }
.jst[data-tpl="plateau"] .jst-nav.is-tight .jst-nav-link { letter-spacing: .12em; }
.jst[data-tpl="cocody"] .jst-nav.is-tight { gap: 0; }
.jst[data-tpl="cocody"] .jst-nav.is-tight .jst-nav-link { padding: 9px 11px; }
.jst[data-page="page"][data-tpl="treichville"] .jst-nav-link.is-current::after { transform: scaleX(1); }

/* Phone menu, inside the preview: a panel under the header over a dimmed store */
.jst .jst-header.is-menu-open { z-index: 30; }
.jst .jst-drawer {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 2;
  border-top: 1px solid var(--st-line); background: var(--st-bg); color: var(--st-text);
  box-shadow: 0 30px 48px -28px rgba(0, 0, 0, .5);
  animation: jst-drawer .22s cubic-bezier(.2, .7, .2, 1) both;
}
.jst .jst-drawer-in { padding-top: 4px; padding-bottom: 16px; }
.jst .jst-drawer-list { display: grid; }
.jst .jst-drawer-link {
  display: flex; align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--st-line);
  font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; cursor: pointer;
}
.jst .jst-drawer-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; padding: 8px 0; }
.jst .jst-drawer-chev { width: 18px; height: 18px; color: var(--st-muted); }
.jst .jst-drawer-link.is-current .jst-drawer-label { color: var(--st-accent-ink); }
.jst .jst-drawer-n {
  display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 12px; background: var(--st-accent); color: var(--st-on-accent);
  font-family: var(--st-font-text); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;
}
.jst .jst-drawer-wa { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--st-muted); cursor: pointer; }
.jst .jst-drawer-wa .jst-ico { width: 20px; height: 20px; color: var(--st-accent-ink); }
.jst .jst-drawer-wa b { font-weight: 600; color: var(--st-text); white-space: nowrap; }
.jst .jst-drawer-scrim {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1; display: block; width: 100%; height: 2400px;
  background: rgba(10, 8, 6, .38); cursor: pointer; animation: jst-fade .22s ease both;
}
@keyframes jst-drawer { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes jst-fade { from { opacity: 0; } to { opacity: 1; } }

/* The page: back link or crumbs, a title band, the text, then the WhatsApp block or the fees */
.jst .jst-main--page { padding-bottom: 0; }
.jst .jst-cp-nav { padding-top: 6px; padding-bottom: 2px; }
.jst[data-device="desktop"] .jst-cp-nav { padding-top: 18px; padding-bottom: 0; }
.jst .jst-cp { display: block; padding-bottom: calc(var(--st-sec) * .6); }
.jst .jst-cp-head { position: relative; }
.jst .jst-cp-head-in { position: relative; padding-top: 14px; padding-bottom: 30px; }
.jst[data-device="desktop"] .jst-cp-head-in { padding-top: 32px; padding-bottom: 56px; }
.jst .jst-cp-head .jst-blob { display: none; }
.jst .jst-cp-title { font-size: calc(38px * var(--st-hs, 1)); line-height: 1.05; overflow-wrap: break-word; }
.jst .jst-cp-title[data-len="l"] { font-size: calc(30px * var(--st-hs, 1)); }
.jst[data-device="desktop"] .jst-cp-title { font-size: calc(64px * var(--st-hs, 1)); }
.jst[data-device="desktop"] .jst-cp-title[data-len="l"] { font-size: calc(46px * var(--st-hs, 1)); }
.jst .jst-cp-in { display: block; }
.jst[data-device="desktop"] .jst-cp.has-side .jst-cp-in { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 80px; align-items: start; }
.jst .jst-cp-content { min-width: 0; max-width: 700px; }
.jst .jst-cp-body { font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
.jst[data-device="desktop"] .jst-cp-body { font-size: 17px; }
.jst .jst-cp-body > * + * { margin-top: 16px; }
.jst .jst-cp-body > .jst-cp-h2 { margin-top: 34px; }
.jst .jst-cp-h2 { font-size: calc(22px * var(--st-hs, 1)); line-height: 1.2; }
.jst[data-device="desktop"] .jst-cp-h2 { font-size: calc(27px * var(--st-hs, 1)); }
.jst .jst-cp-list { display: grid; gap: 8px; }
.jst .jst-cp-list li { position: relative; padding-left: 24px; }
.jst .jst-cp-list li::before { content: ''; position: absolute; left: 3px; top: calc(.875em - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--st-accent-ink); }
.jst .jst-cp-list.is-ordered { counter-reset: jst-cp; }
.jst .jst-cp-list.is-ordered li { counter-increment: jst-cp; padding-left: 30px; }
.jst .jst-cp-list.is-ordered li::before { content: counter(jst-cp) '.'; top: 0; left: 0; width: auto; height: auto; border-radius: 0; background: none; color: var(--st-accent-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.jst .jst-cp-label { font-weight: 700; color: var(--st-text); }
.jst .jst-cp-ref { text-decoration: none; cursor: pointer; }
.jst[data-device="desktop"] .jst-cp-ref:hover { color: var(--st-accent-ink); }
.jst .jst-cp-extra { margin-top: 40px; }
.jst[data-device="desktop"] .jst-cp-extra { margin-top: 56px; }
.jst .jst-cp-more { margin-top: 32px; }
.jst .jst-cp-more .jst-link { min-height: 44px; }

/* Desktop: the store's other pages beside the text */
.jst .jst-cp-side { position: sticky; top: 24px; min-width: 0; }
.jst .jst-cp-side-h { margin-bottom: 12px; font-size: 11.5px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted); }
.jst .jst-cp-side-list { display: grid; border-top: 1px solid var(--st-line); }
.jst .jst-cp-side-link { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 0; border-bottom: 1px solid var(--st-line); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; cursor: pointer; transition: opacity .15s ease; }
.jst .jst-cp-side-link.is-current { font-weight: 600; color: var(--st-accent-ink); }
.jst[data-device="desktop"] .jst-cp-side-link:not(.is-current):hover { opacity: .6; }

/* WhatsApp block (Contact page) */
.jst .jst-cp-wa {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 18px; padding: 28px 22px;
  border-radius: var(--st-radius); background: var(--st-accent); color: var(--st-on-accent); --st-muted: var(--st-on-accent-soft);
}
.jst .jst-cp-wa.is-empty { display: block; overflow: visible; padding: 0; border-radius: 0; background: none; color: inherit; --st-muted: inherit; }
.jst .jst-cp-wa-deco { position: absolute; z-index: -1; display: none; border-radius: 50%; background: currentColor; opacity: .09; pointer-events: none; }
.jst .jst-cp-wa-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--st-on-accent); color: var(--st-accent); }
.jst .jst-cp-wa-ico .jst-ico { width: 24px; height: 24px; }
.jst .jst-cp-wa-copy { min-width: 0; }
.jst .jst-cp-wa-title { font-size: calc(26px * var(--st-hs, 1)); }
.jst .jst-cp-wa-text { margin-top: 8px; max-width: 34em; font-size: 15px; line-height: 1.6; color: var(--st-on-accent-soft); overflow-wrap: anywhere; }
.jst .jst-cp-wa-cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; }
.jst .jst-cp-wa-num { font-size: 14px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; text-align: center; }
.jst .jst-cp-wa-city { position: relative; display: flex; align-items: center; gap: 8px; padding-top: 16px; font-size: 14px; font-weight: 500; }
.jst .jst-cp-wa-city::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: currentColor; opacity: .28; }
.jst .jst-cp-wa-city .jst-ico { width: 18px; height: 18px; }
.jst[data-device="desktop"] .jst-cp-wa { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 28px; padding: 36px 40px; }
.jst[data-device="desktop"] .jst-cp-wa-cta { align-items: center; }
.jst[data-device="desktop"] .jst-cp-wa-city { grid-column: 1 / -1; }
.jst[data-device="desktop"] .jst-cp-wa-title { font-size: calc(30px * var(--st-hs, 1)); }

/* Delivery fees (delivery page): the zones list of the template, under a heading */
.jst .jst-cp-zones .jst-cp-h2 { margin-bottom: 18px; }
.jst .jst-cp-zones .jst-zones.is-many { grid-template-columns: minmax(0, 1fr); }
.jst[data-device="desktop"] .jst-cp-zones .jst-zones.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }

/* ---------------------------------------------------------------- Plateau: an editorial page,
   a big serif title over a thin rule, a lede, the pages listed in serif with a dash. */
.jst[data-tpl="plateau"] .jst-drawer-link { font-size: 24px; letter-spacing: -0.015em; min-height: 60px; }
.jst[data-tpl="plateau"] .jst-drawer-list { border-top: 0; }
.jst[data-tpl="plateau"] .jst-drawer-chev { stroke-width: 1.3; }
.jst[data-tpl="plateau"] .jst-drawer-n { border-radius: var(--pl-r); }
.jst[data-tpl="plateau"] .jst-drawer-link.is-current .jst-drawer-label::before { content: '—'; margin-right: 12px; font-weight: 400; }
.jst[data-tpl="plateau"] .jst-drawer-wa { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.jst[data-tpl="plateau"] .jst-drawer-wa b { letter-spacing: .06em; }
.jst[data-tpl="plateau"] .jst-cp-head-in { padding-top: 22px; padding-bottom: 34px; }
.jst[data-tpl="plateau"] .jst-cp-head-in::after { content: ''; display: block; height: 1px; margin-top: 30px; background: var(--st-text); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cp-head-in { padding-top: 40px; padding-bottom: 64px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cp-head-in::after { margin-top: 48px; }
.jst[data-tpl="plateau"] .jst-cp-title { font-size: calc(46px * var(--st-hs, 1)); line-height: 1.02; letter-spacing: -0.025em; }
.jst[data-tpl="plateau"] .jst-cp-title[data-len="l"] { font-size: calc(34px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cp-title { font-size: calc(84px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cp-title[data-len="m"] { font-size: calc(68px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cp-title[data-len="l"] { font-size: calc(54px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"] .jst-cp-body { font-size: 16px; line-height: 1.8; }
.jst[data-tpl="plateau"] .jst-cp-body > p:first-child { font-family: var(--st-font-display); font-size: 21px; line-height: 1.5; letter-spacing: -0.005em; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cp-body { font-size: 17px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cp-body > p:first-child { font-size: 26px; line-height: 1.45; }
.jst[data-tpl="plateau"] .jst-cp-h2 { font-size: calc(26px * var(--st-hs, 1)); letter-spacing: -0.015em; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cp-h2 { font-size: calc(32px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"] .jst-cp-list li { padding-left: 26px; }
.jst[data-tpl="plateau"] .jst-cp-list li::before { left: 0; top: calc(.9em - .5px); width: 14px; height: 1px; border-radius: 0; background: currentColor; }
.jst[data-tpl="plateau"] .jst-cp-list.is-ordered li::before { top: 0; width: auto; height: auto; background: none; font-family: var(--st-font-display); font-weight: 400; color: var(--st-text); }
.jst[data-tpl="plateau"] .jst-cp-side-h { font-size: 11px; letter-spacing: .16em; }
.jst[data-tpl="plateau"] .jst-cp-side-list { border-top-color: var(--st-text); }
.jst[data-tpl="plateau"] .jst-cp-side-link { font-family: var(--st-font-display); font-weight: var(--st-display-weight, 600); font-size: 20px; letter-spacing: -0.01em; min-height: 58px; }
.jst[data-tpl="plateau"] .jst-cp-side-link.is-current { color: var(--st-text); }
.jst[data-tpl="plateau"] .jst-cp-side-link.is-current::before { content: '—'; flex: none; font-weight: 400; }
.jst[data-tpl="plateau"] .jst-cp-wa { justify-items: center; padding: 40px 24px; border-radius: var(--pl-r); text-align: center; }
.jst[data-tpl="plateau"] .jst-cp-wa-ico { width: 52px; height: 52px; border: 1px solid currentColor; background: transparent; color: inherit; }
.jst[data-tpl="plateau"] .jst-cp-wa-ico .jst-ico { width: 22px; height: 22px; stroke-width: 1.4; }
.jst[data-tpl="plateau"] .jst-cp-wa-title { font-size: calc(30px * var(--st-hs, 1)); letter-spacing: -0.02em; }
.jst[data-tpl="plateau"] .jst-cp-wa-text { margin-left: auto; margin-right: auto; }
.jst[data-tpl="plateau"] .jst-cp-wa-cta { width: 100%; align-items: center; }
.jst[data-tpl="plateau"][data-device="phone"] .jst-cp-wa-btn { width: 100%; }
.jst[data-tpl="plateau"] .jst-cp-wa-num { font-size: 11.5px; letter-spacing: .16em; }
.jst[data-tpl="plateau"] .jst-cp-wa-city { justify-content: center; justify-self: stretch; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cp-wa { grid-template-columns: minmax(0, 1fr); padding: 64px 48px; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cp-wa-title { font-size: calc(40px * var(--st-hs, 1)); }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-cp-wa-cta { width: auto; }

/* ---------------------------------------------------------------- Cocody: a soft title card with
   circles, the text on a white card, the pages as pills. */
.jst[data-tpl="cocody"] .jst-drawer { left: 8px; right: 8px; top: calc(100% + 2px); border: 0; border-radius: calc(var(--st-radius) * 1.1 + 4px); background: var(--st-surface); box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 26px 50px -24px rgba(0, 0, 0, .45); }
.jst[data-tpl="cocody"] .jst-drawer-in { padding: 8px; }
.jst[data-tpl="cocody"] .jst-drawer-list { gap: 2px; }
.jst[data-tpl="cocody"] .jst-drawer-link { min-height: 52px; padding: 0 14px; border: 0; border-radius: var(--cc-field); font-family: var(--st-font-text); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.jst[data-tpl="cocody"] .jst-drawer-label { padding: 6px 0; }
.jst[data-tpl="cocody"] .jst-drawer-link.is-current { background: var(--st-accent-soft); }
.jst[data-tpl="cocody"] .jst-drawer-wa { margin: 6px 6px 0; padding: 0 8px; border-top: 1px dashed var(--st-line); padding-top: 6px; }
.jst[data-tpl="cocody"] .jst-cp-head-in { width: calc(100% - 2 * var(--st-gutter)); max-width: var(--st-max); margin-top: 6px; padding: 30px 22px 34px; overflow: hidden; isolation: isolate; border-radius: calc(var(--st-radius) * 1.3); background: var(--st-surface-2); text-align: center; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp-head-in { margin-top: 10px; padding: 64px 56px 68px; border-radius: calc(var(--st-radius) * 1.6); }
.jst[data-tpl="cocody"] .jst-cp-head .jst-blob { display: block; }
.jst[data-tpl="cocody"] .jst-cp-kicker { margin-bottom: 14px; }
.jst[data-tpl="cocody"] .jst-cp-title { font-size: calc(32px * var(--st-hs, 1)); line-height: 1.1; letter-spacing: -0.02em; }
.jst[data-tpl="cocody"] .jst-cp-title[data-len="l"] { font-size: calc(27px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp-title { font-size: calc(52px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp-title[data-len="l"] { font-size: calc(40px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"] .jst-cp-in { padding-top: 12px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp-in { padding-top: 32px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp:not(.has-side) .jst-cp-content { margin: 0 auto; }
.jst[data-tpl="cocody"] .jst-cp-body,
.jst[data-tpl="cocody"] .jst-cp-zones {
  padding: 24px 20px; border-radius: var(--cc-card); background: var(--st-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -20px rgba(0, 0, 0, .24);
}
.jst[data-tpl="cocody"][data-tone="dark"] .jst-cp-body,
.jst[data-tpl="cocody"][data-tone="dark"] .jst-cp-zones { box-shadow: none; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp-body,
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp-zones { padding: 44px 48px; }
.jst[data-tpl="cocody"] .jst-cp-body.is-empty { padding: 0; background: none; box-shadow: none; }
.jst[data-tpl="cocody"] .jst-cp-extra { margin-top: 12px; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp-extra { margin-top: 20px; }
.jst[data-tpl="cocody"] .jst-cp-h2 { font-size: calc(20px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp-h2 { font-size: calc(24px * var(--st-hs, 1)); }
.jst[data-tpl="cocody"] .jst-cp-list li::before { left: 2px; top: calc(.875em - 4.5px); width: 9px; height: 9px; background: var(--st-accent-soft); box-shadow: inset 0 0 0 2.5px var(--st-accent-ink); }
.jst[data-tpl="cocody"] .jst-cp-list.is-ordered li::before { top: 0; left: 0; width: auto; height: auto; box-shadow: none; background: none; }
.jst[data-tpl="cocody"] .jst-cp-more { text-align: center; }
.jst[data-tpl="cocody"] .jst-cp-side nav { padding: 8px; border-radius: var(--cc-card); background: var(--st-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -20px rgba(0, 0, 0, .24); }
.jst[data-tpl="cocody"][data-tone="dark"] .jst-cp-side nav { box-shadow: none; }
.jst[data-tpl="cocody"] .jst-cp-side-h { padding: 8px 12px 2px; margin-bottom: 4px; }
.jst[data-tpl="cocody"] .jst-cp-side-list { gap: 2px; border: 0; }
.jst[data-tpl="cocody"] .jst-cp-side-link { min-height: 46px; padding: 8px 14px; border: 0; border-radius: var(--cc-field); font-weight: 500; }
.jst[data-tpl="cocody"] .jst-cp-side-link.is-current { background: var(--st-accent-soft); font-weight: 600; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp-side-link:not(.is-current):hover { opacity: 1; background: var(--st-bg); }
.jst[data-tpl="cocody"] .jst-cp-wa { justify-items: center; padding: 34px 22px; border-radius: calc(var(--st-radius) * 1.3); text-align: center; }
.jst[data-tpl="cocody"] .jst-cp-wa-deco { display: block; }
.jst[data-tpl="cocody"] .jst-cp-wa-deco--a { width: 220px; height: 220px; right: -80px; top: -90px; }
.jst[data-tpl="cocody"] .jst-cp-wa-deco--b { width: 150px; height: 150px; left: -60px; bottom: -70px; }
.jst[data-tpl="cocody"] .jst-cp-wa-ico { width: 56px; height: 56px; border-radius: var(--cc-pill); }
.jst[data-tpl="cocody"] .jst-cp-wa-cta { width: 100%; }
.jst[data-tpl="cocody"] .jst-cp-wa-city { justify-content: center; justify-self: stretch; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp-wa { justify-items: stretch; padding: 40px 44px; text-align: left; border-radius: calc(var(--st-radius) * 1.6); }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp-wa-cta { width: auto; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp-wa-city { justify-content: flex-start; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-cp-wa-deco--a { width: 320px; height: 320px; right: -90px; top: -170px; }
.jst[data-tpl="cocody"] .jst-cp-zones .jst-delivery-notes { margin-top: 16px; }

/* ---------------------------------------------------------------- Treichville: a huge uppercase
   title over a thick rule, bold text, accent bars and hard shadows. */
.jst[data-tpl="treichville"] .jst-drawer { border-top: var(--tv-line); }
.jst[data-tpl="treichville"] .jst-drawer-link { min-height: 58px; border-bottom: var(--tv-line); font-size: 22px; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; }
.jst[data-tpl="treichville"] .jst-drawer-chev { stroke-width: 2.2; color: var(--st-text); }
.jst[data-tpl="treichville"] .jst-drawer-link.is-current { margin: 0 calc(-1 * var(--st-gutter)); padding: 0 var(--st-gutter); background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-tpl="treichville"] .jst-drawer-link.is-current .jst-drawer-label,
.jst[data-tpl="treichville"] .jst-drawer-link.is-current .jst-drawer-chev { color: inherit; }
.jst[data-tpl="treichville"] .jst-drawer-n { border-radius: var(--tv-r); background: var(--st-text); color: var(--st-bg); }
.jst[data-tpl="treichville"] .jst-drawer-wa { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.jst[data-tpl="treichville"] .jst-cp-head { border-bottom: 3px solid var(--st-text); }
.jst[data-tpl="treichville"] .jst-cp-head-in { padding-top: 18px; padding-bottom: 28px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cp-head-in { padding-top: 36px; padding-bottom: 52px; }
.jst[data-tpl="treichville"] .jst-cp-title { font-size: calc(46px * var(--st-hs, 1)); line-height: .94; letter-spacing: -0.03em; }
.jst[data-tpl="treichville"] .jst-cp-title[data-len="m"] { font-size: calc(38px * var(--st-hs, 1)); line-height: .98; }
.jst[data-tpl="treichville"] .jst-cp-title[data-len="l"] { font-size: calc(30px * var(--st-hs, 1)); line-height: 1.02; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cp-title { font-size: calc(104px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cp-title[data-len="m"] { font-size: calc(76px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cp-title[data-len="l"] { font-size: calc(56px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"] .jst-cp-in { padding-top: 30px; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cp-in { padding-top: 64px; }
.jst[data-tpl="treichville"] .jst-cp-body { font-weight: 500; line-height: 1.7; }
.jst[data-tpl="treichville"] .jst-cp-body > p:first-child { font-size: 19px; font-weight: 700; line-height: 1.45; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cp-body > p:first-child { font-size: 23px; }
.jst[data-tpl="treichville"] .jst-cp-h2 { padding-left: 14px; border-left: 6px solid var(--st-accent); font-size: calc(22px * var(--st-hs, 1)); line-height: 1; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cp-h2 { font-size: calc(30px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"] .jst-cp-list li::before { left: 2px; top: calc(.85em - 4px); width: 8px; height: 8px; border-radius: 0; background: var(--st-accent); }
.jst[data-tpl="treichville"] .jst-cp-list.is-ordered li::before { top: 0; width: auto; height: auto; background: none; color: var(--st-accent-ink); font-weight: 800; }
.jst[data-tpl="treichville"] .jst-cp-more .jst-link { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.jst[data-tpl="treichville"] .jst-cp-side-h { color: var(--st-text); font-weight: 800; }
.jst[data-tpl="treichville"] .jst-cp-side-list { border-top: 3px solid var(--st-text); }
.jst[data-tpl="treichville"] .jst-cp-side-link { border-bottom: var(--tv-line); font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.jst[data-tpl="treichville"] .jst-cp-side-link.is-current { padding: 10px 14px; background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-tpl="treichville"] .jst-cp-wa { margin-right: 8px; border: var(--tv-line); box-shadow: 8px 8px 0 var(--st-text); }
.jst[data-tpl="treichville"] .jst-cp-wa.is-empty { margin-right: 0; border: 0; box-shadow: none; }
.jst[data-tpl="treichville"] .jst-cp-wa-ico { border-radius: var(--tv-r); }
.jst[data-tpl="treichville"] .jst-cp-wa-title { font-size: calc(28px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-cp-wa-title { font-size: calc(36px * var(--st-hs, 1)); }
.jst[data-tpl="treichville"] .jst-cp-wa-num { font-family: var(--st-font-display); font-size: 16px; font-weight: var(--st-display-weight, 600); letter-spacing: 0; }
.jst[data-tpl="treichville"] .jst-cp-wa-city { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* ---------------------------------------------------------------- vivid: the colour carries the
   title band; the text stays on the page colour. */
.jst[data-tpl="plateau"][data-intensity="vivid"] .jst-cp-head { background: var(--st-tint); --st-muted: var(--st-muted-tint); }
.jst[data-tpl="plateau"][data-intensity="vivid"] .jst-cp-head-in { padding-top: 36px; padding-bottom: 40px; }
.jst[data-tpl="plateau"][data-intensity="vivid"][data-device="desktop"] .jst-cp-head-in { padding-top: 80px; padding-bottom: 84px; }
.jst[data-tpl="plateau"][data-intensity="vivid"] .jst-cp-head-in::after { display: none; }
.jst[data-tpl="plateau"][data-intensity="vivid"] .jst-cp-kicker { color: var(--st-accent-ink); }
.jst[data-tpl="plateau"][data-intensity="vivid"] .jst-cp-in { padding-top: 40px; }
.jst[data-tpl="plateau"][data-intensity="vivid"][data-device="desktop"] .jst-cp-in { padding-top: 72px; }
.jst[data-tpl="plateau"][data-intensity="vivid"][data-tone="dark"] .jst-cp-head { box-shadow: inset 0 6px 0 var(--st-accent); }
.jst[data-tpl="plateau"][data-intensity="vivid"][data-tone="dark"] .jst-cp-title { color: var(--st-accent); }
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-cp-head-in { background: var(--st-tint-strong); --st-muted: var(--st-muted-strong); }
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-drawer-link.is-current,
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-cp-side-link.is-current { background: var(--st-accent); color: var(--st-on-accent); }
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-drawer-link.is-current .jst-drawer-label,
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-drawer-link.is-current .jst-drawer-chev { color: inherit; }
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-drawer-link.is-current .jst-drawer-n { background: var(--st-on-accent); color: var(--st-accent); }
.jst[data-tpl="cocody"][data-intensity="vivid"] .jst-cp-zones .jst-zone { background: var(--st-tint); }
.jst[data-tpl="treichville"][data-intensity="vivid"] .jst-cp-head { border-bottom: 0; background: var(--st-accent); color: var(--st-on-accent); --st-muted: var(--st-on-accent-soft); }
.jst[data-tpl="treichville"][data-intensity="vivid"] .jst-cp-head .jst-tag { background: var(--st-on-accent); color: var(--st-accent); }
.jst[data-tpl="treichville"][data-intensity="vivid"] .jst-cp-h2 { border-left-color: var(--st-accent); }

/* ===================================================================== the seller's logo
   store.logo (render.js logoImg): an image in place of the name, sized by render.js from
   store.logoSize and never stretched; store.showName writes the name next to it. A fiche without
   a logo never gets these classes. store.logoPosition, when it differs from the template's place,
   puts .jst-header--logo-left / --logo-center on the header. */

.jst .jst-logo.has-img { display: flex; align-items: center; gap: 10px; text-overflow: clip; line-height: 1; }
.jst .jst-logo-img { display: block; flex: none; max-width: 100%; object-fit: contain; object-position: left center; }
.jst .jst-logo.has-name .jst-logo-img { max-width: 60%; }
.jst .jst-logo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.jst[data-tpl="plateau"] .jst-logo.has-img,
.jst .jst-header--co .jst-logo.has-img { justify-content: center; }
.jst[data-tpl="plateau"] .jst-logo.has-img .jst-logo-img,
.jst .jst-header--co .jst-logo.has-img .jst-logo-img { object-position: center; }
.jst .jst-footer-logo { display: block; margin: 0; line-height: 0; }
.jst .jst-footer-logo + .jst-footer-name { margin-top: 12px; }

/* Plateau, logo on the left: beside the menu on a phone; logo, links, then the bag on a computer */
.jst[data-tpl="plateau"] .jst-header--logo-left .jst-logo { text-align: left; }
.jst[data-tpl="plateau"] .jst-header--logo-left .jst-logo.has-img { justify-content: flex-start; }
.jst[data-tpl="plateau"] .jst-header--logo-left .jst-logo.has-img .jst-logo-img { object-position: left center; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-header--logo-left .jst-header-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo nav actions"; }
.jst[data-tpl="plateau"][data-device="desktop"] .jst-header--logo-left .jst-nav { justify-content: center; }
/* Cocody and Treichville, logo in the centre: the menu on the left, the bag on the right (phone);
   the links on the left, the logo in the middle (computer) */
.jst[data-tpl="cocody"] .jst-header--logo-center .jst-header-in,
.jst[data-tpl="treichville"] .jst-header--logo-center .jst-header-in { grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "menu logo actions"; }
.jst[data-tpl="cocody"] .jst-header--logo-center .jst-logo,
.jst[data-tpl="treichville"] .jst-header--logo-center .jst-logo { text-align: center; }
.jst[data-tpl="cocody"] .jst-header--logo-center .jst-logo.has-img,
.jst[data-tpl="treichville"] .jst-header--logo-center .jst-logo.has-img { justify-content: center; }
.jst[data-tpl="cocody"] .jst-header--logo-center .jst-logo-img,
.jst[data-tpl="treichville"] .jst-header--logo-center .jst-logo-img { object-position: center; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-header--logo-center .jst-header-in,
.jst[data-tpl="treichville"][data-device="desktop"] .jst-header--logo-center .jst-header-in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "nav logo actions"; }
.jst[data-tpl="cocody"][data-device="desktop"] .jst-header--logo-center .jst-nav { justify-self: start; }
.jst[data-tpl="treichville"][data-device="desktop"] .jst-header--logo-center .jst-nav { justify-content: flex-start; }

/* =====================================================================
   CUSTOM COLOURS — a part of the store with colours of its own: the header, the footer and the
   announcement bar (theme.colors), a section (sections[].settings.bg / fg). render.js writes the
   part's colours on its element as --sc-* (computed by JEERE_DATA.zoneColors: the text reads at
   4.5:1 unless the seller chose it, then Qualité checks it) and marks it .jst-cz; the store's
   colours are replaced inside it, so every template rule keeps working. Each rule starts with the
   five root attributes the renderer always sets, so it wins over the template and vivid rules.
   Without theme.colors or a section colour, nothing here applies (no .jst-cz, no data-c-badge).
   ===================================================================== */

.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons] .jst-cz {
  --st-bg: var(--sc-bg); --st-surface: var(--sc-surface); --st-text: var(--sc-fg); --st-text-soft: var(--sc-soft);
  --st-muted: var(--sc-muted); --st-muted-tint: var(--sc-muted); --st-muted-strong: var(--sc-muted);
  --st-line: var(--sc-line); --st-tint: var(--sc-tint); --st-tint-strong: var(--sc-tint2); --st-surface-2: var(--sc-tint);
  --st-accent: var(--sc-acc); --st-on-accent: var(--sc-onacc); --st-on-accent-soft: var(--sc-onacc-soft);
  --st-accent-ink: var(--sc-ink); --st-accent-text: var(--sc-ink); --st-accent-soft: var(--sc-accsoft);
  --tv-line: 1.5px solid var(--sc-fg);
  color: var(--sc-fg);
}

/* Header and footer: their ground */
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons] .jst-header.jst-cz,
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons] .jst-footer.jst-cz { background: var(--sc-bg); }
.jst[data-tpl="treichville"][data-device][data-intensity][data-tone][data-buttons] .jst-header.jst-cz .jst-bag-n { background: var(--sc-fg); color: var(--sc-bg); }
/* Cocody's payment chips are pills of the page colour: on a footer of her colour they take a raised
   shade of it and a fine line, so they still read as chips */
.jst[data-tpl="cocody"][data-device][data-intensity][data-tone][data-buttons] .jst-footer.jst-cz .jst-chip { background: var(--sc-tint2); box-shadow: inset 0 0 0 1px var(--sc-line); color: var(--sc-fg); }

/* A section on its own ground (categories, products, about, reviews, delivery): a band with the
   padding of a tinted section */
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons] .jst-sec--cbg:not(.jst-sec--announcement):not(.jst-sec--whatsapp):not(.jst-sec--hero) { padding: calc(var(--st-sec) * .62) 0; background: var(--sc-bg); }

/* Panels drawn on the accent (the announcement bar, « Commander sur WhatsApp »): the panel takes the
   chosen ground, what sat on the accent takes its text colour */
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons] .jst-sec--cbg .jst-ann,
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons] .jst-sec--cbg .jst-wa {
  --st-accent: var(--sc-bg); --st-on-accent: var(--sc-fg); --st-on-accent-soft: var(--sc-muted);
  background: var(--sc-bg); color: var(--sc-fg);
}
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons] .jst-sec--cbg .jst-ann .jst-muted-inline { color: var(--sc-muted); }

/* The hero on its own ground. Plateau: the stage (with a photo, the ground beside or under it);
   Cocody: the banner card; Treichville: the whole band. The template's accent slab, tile or dark
   ground gives way; the button keeps the accent (or the text colour when the accent would vanish). */
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-hero-stage { background: var(--sc-bg); color: var(--sc-fg); }
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-hero-copy { background: transparent; color: var(--sc-fg); box-shadow: none; }
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-hero-title { color: var(--sc-fg); }
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-hero-text { color: var(--sc-muted); opacity: 1; }
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-hero-cap { color: var(--sc-fg); }
.jst[data-tpl="plateau"][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-hero-stage.has-img::after { border-color: var(--sc-acc); }
.jst[data-tpl="plateau"][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-hero-scrim { background: linear-gradient(to bottom, transparent 76%, color-mix(in srgb, var(--sc-bg) 70%, transparent) 92%, var(--sc-bg) 100%); }
.jst[data-tpl="plateau"][data-device="desktop"][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-hero-scrim { background: linear-gradient(90deg, var(--sc-bg) 0%, var(--sc-bg) 6%, color-mix(in srgb, var(--sc-bg) 55%, transparent) 18%, transparent 34%); }
.jst[data-tpl="cocody"][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-hero-card { background: var(--sc-bg); }
.jst[data-tpl="treichville"][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg { background: var(--sc-bg); color: var(--sc-fg); }
.jst[data-tpl="treichville"][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-tag,
.jst[data-tpl="treichville"][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-sticker { background: var(--sc-acc); color: var(--sc-onacc); }
.jst[data-tpl="treichville"][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-strip { border-color: var(--sc-fg); background: var(--sc-fg); color: var(--sc-bg); }
.jst[data-tpl="treichville"][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-hero-block { box-shadow: 12px 12px 0 var(--sc-acc); }
.jst[data-tpl="treichville"][data-device="desktop"][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbg .jst-hero-block { box-shadow: 18px 18px 0 var(--sc-acc); }
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons="solid"] .jst-sec--hero.jst-sec--cbg .jst-btn { background: var(--sc-acc); color: var(--sc-onacc); border-color: var(--sc-acc); }
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons="outline"] .jst-sec--hero.jst-sec--cbg .jst-btn { background: transparent; color: var(--sc-ink); border-color: var(--sc-ink); }

/* The hero's button colours (settings.buttonBg / buttonText), over everything above. A button the
   seller coloured herself is drawn filled with her two colours, with outline buttons too: the pair
   Qualité checks (her text on her background) is then the pair the customer sees. */
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons] .jst-sec--hero.jst-sec--cbtn .jst-hero-actions .jst-btn { background: var(--sc-hbtn-bg); color: var(--sc-hbtn-fg); border-color: var(--sc-hbtn-bg); }

/* A store with the seller's own colours (data-colors="custom"): her grounds can be mid-tones, where white
   or black text reads at 5:1, not 15:1. Texts the templates soften with opacity are drawn solid, and the
   dark stores' accent titles use the readable accent. */
.jst[data-colors="custom"] .jst-about-text,
.jst[data-colors="custom"] .jst-hero-text,
.jst[data-colors="custom"] .jst-hero-cap,
.jst[data-colors="custom"] .jst-muted-inline,
.jst .jst-cz .jst-about-text,
.jst .jst-cz .jst-hero-text,
.jst .jst-cz .jst-hero-cap,
.jst .jst-cz .jst-muted-inline { opacity: 1; }
.jst[data-colors="custom"][data-tpl="plateau"][data-intensity="vivid"][data-tone="dark"][data-device] .jst-cp-title,
.jst[data-colors="custom"][data-tpl="plateau"][data-intensity="vivid"][data-tone="dark"][data-device] .jst-hero-stage:not(.has-img) .jst-hero-title { color: var(--st-accent-text); }

/* Badges and promos with their own colours (theme.colors.badgeBg / badgeText): every badge */
.jst[data-tpl][data-device][data-intensity][data-tone][data-buttons][data-c-badge] .jst-badge { background: var(--st-badge-bg); color: var(--st-badge-fg); }

/* ===================================================================== touch
   Phone: every control of the journey is at least 44 px tall (cheap Android, a thumb). Links keep
   their place in the text: the hit area grows, not the layout. */

.jst[data-device="phone"] .jst-stepper:not(.jst-stepper--lg) { --jst-step: 44px; }
.jst[data-device="phone"] .jst-stepper { box-sizing: content-box; } /* the border sits outside: the buttons themselves are 44 px */
.jst .jst-header a.jst-logo { padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
.jst[data-device="phone"] .jst-stepper--sm .jst-step .jst-ico { width: 16px; height: 16px; }
.jst[data-device="phone"] .jst-remove { min-height: 44px; }
.jst[data-device="phone"] .jst-card-btn,
.jst[data-device="phone"] .jst-btn--sm { min-height: 44px; }
.jst .jst-summary-head .jst-link,
.jst .jst-head-aside .jst-link { min-height: 44px; margin: -12px -8px; padding: 0 8px; }
.jst .jst-stp-link { min-height: 44px; min-width: 44px; margin: -14px -8px; padding: 0 8px; }
.jst[data-tpl="treichville"] .jst-co-actions { margin-right: 8px; }

/* ===================================================================== the seller's fonts
   theme.typography (render.js): the heading and the text font arrive through --st-font-display / --st-font-text /
   --st-display-weight like the pairs'. The titles' font-size is multiplied by --st-hs (« Taille des titres » × the
   font's own scale) and the name in the header by --st-hf (the font's scale); both are unset, so 1, without the key.
   [data-hcase] is set only when the capitals differ from the template's own choice (Treichville: capitals): her
   choice, on (« upper ») or off (« none »), or a handwriting heading font on Treichville (« none »), for the titles,
   the name in the header and the checkout's step titles. */

/* A font without ɛ ɔ ŋ gets them from a subset of Montserrat or Noto Serif: render.js sets --st-fsa: from-font so
   those letters take the x-height of the font they sit in (a Montserrat ɛ inside Caveat would look like a capital) */
.jst, .jst * { font-size-adjust: var(--st-fsa, none); } /* on each element: from-font is read from its own font */
.jst[data-hcase="upper"][data-tpl] :is(.jst-h, .jst-logo, .jst-co-h) { text-transform: uppercase; }
.jst[data-hcase="none"][data-tpl] :is(.jst-h, .jst-logo, .jst-co-h) { text-transform: none; }
/* Her own fonts (data-fonts="custom"): every weight the store uses is loaded on purpose, so a font with a single
   weight (Anton, Great Vibes…) stays as drawn instead of a smeared fake bold (the checkout's step numbers at 700) */
.jst[data-fonts="custom"] { font-synthesis-weight: none; }
/* …except an imported text font with no bold of its own (data-fsynth, theme.customFonts: a Regular alone): the
   prices and buttons then get the browser's bold rather than none at all */
.jst[data-fonts="custom"][data-fsynth] { font-synthesis-weight: auto; }
/* A heading font without a real italic (data-hital="none"): Plateau's signature upright rather than slanted by the browser */
.jst[data-hital="none"][data-tpl] .jst-sign { font-style: normal; }
/* A handwriting heading font (data-hstyle="manuscrit") is for titles: the prices, figures, badges and paragraphs
   the templates draw in the heading font (Treichville's prices, Plateau's review quotes…) use the text font */
.jst[data-hstyle="manuscrit"][data-tpl] :is(.jst-rating-n, .jst-count-block, .jst-row--total dd),
.jst[data-hstyle="manuscrit"][data-tpl="treichville"] :is(.jst-sticker b, .jst-card-price, .jst-avatar, .jst-about-stamp, .jst-zone .jst-price, .jst-pdp-price,
  .jst-line-total, .jst-mini-total, .jst-co-n, .jst-cat-num, .jst-wa-num, .jst-cp-wa-num),
.jst[data-hstyle="manuscrit"][data-tpl="cocody"] .jst-co-n,
.jst[data-hstyle="manuscrit"][data-tpl="plateau"] :is(.jst-line-name, .jst-review-text, .jst-cp-body > p:first-child) { font-family: var(--st-font-text); --st-display-weight: 700; }
.jst[data-hstyle="manuscrit"][data-tpl="plateau"] .jst-cp-list.is-ordered li::before { font-family: var(--st-font-text); }

/* ===================================================================== motion */

@media (prefers-reduced-motion: reduce) {
  .jst *, .jst *::before, .jst *::after { transition: none !important; animation: none !important; }
}