/* ==========================================================================
   Ninja Pro — v30 "dispatch manifest" skin for the website surface.
   Loaded after website.css; every rule is scoped to the website surface so the
   Telegram Mini App keeps miniapp.css. Nothing here changes behaviour: the
   selectors are the ones app.js / website.js already query.
   ========================================================================== */

html[data-storefront-surface="website"]{
  /* ground: the night dock the parcels leave from */
  --ground:#08111f;
  --ground-2:#0c1a2b;
  --navy-ink:#e8eef8;
  --navy-2:#93a5bf;
  --navy-3:#6b7f9c;
  --rule:#1e3048;
  --rule-2:#16263a;

  /* the slip: the paper the manifest is printed on */
  --slip:#f4f0e6;
  --slip-2:#ece6d8;
  --slip-3:#fbf8f0;
  --slip-ink:#0b1524;
  --slip-ink-2:#4c5566;

  /* one accent, one job: the thing you can act on */
  --accent:#2158d6;
  --accent-ink:#ffffff;
  --accent-hover:#1746b8;

  --container:1180px;
  --radius:3px;

  --t-display:clamp(2.15rem, 1.15rem + 2.6vw, 3.35rem);
  --t-h2:1.5rem;
  --t-h3:1.0625rem;
  --t-body:1rem;
  --t-small:.9375rem;
  --t-meta:.8125rem;
  --t-micro:.75rem;

  /* legacy tokens used by the remaining website.css rules */
  --page:#08111f;
  --surface:#0c1a2b;
  --surface-2:#12233a;
  --ink:#e8eef8;
  --muted:#93a5bf;
  --line:#1e3048;
  --blue:#2158d6;

  color-scheme:dark;
}

html[data-storefront-surface="website"] body{
  background:var(--ground);
  color:var(--navy-ink);
  font-size:var(--t-body);
  line-height:1.5;
}
html[data-storefront-surface="website"] main{
  max-width:var(--container);
  padding-inline:clamp(16px,4vw,32px);
  margin-inline:auto;
}
html[data-storefront-surface="website"] :is(a,button,input,summary,textarea):focus-visible{
  outline:2px solid #8fb0ff;
  outline-offset:3px;
}

html[data-storefront-surface="website"] .skip-link{
  background:#fff;color:#0b1524;border:1px solid #0b1524;border-radius:3px;
  padding:8px 12px;font-size:var(--t-small);font-weight:800;
}

/* --------------------------------------------------------------------------
   1. Announcement strip — a line on the docket, not a banner
   -------------------------------------------------------------------------- */
html[data-storefront-surface="website"] .announcement{
  background:var(--ground-2);
  border-bottom:1px solid var(--rule);
  color:#c2cfe2;
  font-size:var(--t-meta);
  letter-spacing:.01em;
  padding:6px clamp(16px,4vw,32px);
  text-align:center;
}

/* --------------------------------------------------------------------------
   2. Header — flat, hairline, no capsule
   -------------------------------------------------------------------------- */
html[data-storefront-surface="website"] .site-header{
  min-height:64px;
  padding:0 clamp(16px,4vw,32px);
  gap:28px;
  max-width:none;
  margin-inline:auto;
  background:var(--ground);
  border-bottom:1px solid var(--rule);
}
html[data-storefront-surface="website"] .brand{gap:9px;align-items:center}
html[data-storefront-surface="website"] .brand-mark{width:26px;height:26px;border-radius:6px;overflow:hidden}
html[data-storefront-surface="website"] .brand-mark img{width:26px;height:26px;display:block}
html[data-storefront-surface="website"] .brand-name{
  font-family:ManropeWebsite,Manrope,system-ui,sans-serif;
  font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;color:var(--navy-ink);
}
html[data-storefront-surface="website"] .brand-name em{font-style:normal;color:#a9bdd8}
html[data-storefront-surface="website"] .site-header nav{gap:24px;margin-inline-start:auto}
html[data-storefront-surface="website"] .site-header nav a{
  font-size:var(--t-meta);font-weight:700;color:#b9c8dd;padding:4px 0;position:relative;
}
html[data-storefront-surface="website"] .site-header nav a:hover{color:#fff}
html[data-storefront-surface="website"] .nav-capsule>a:first-child{color:#fff}
html[data-storefront-surface="website"] .nav-capsule>a:first-child:after{
  content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:#fff;
}
html[data-storefront-surface="website"] .header-actions{gap:8px}
html[data-storefront-surface="website"] :is(.language-button,.account-trigger){
  min-height:36px;border-radius:var(--radius);
  background:transparent;border:1px solid var(--rule);color:#cfdaeb;
  font-size:var(--t-meta);font-weight:700;padding:0 11px;
}
html[data-storefront-surface="website"] :is(.language-button,.account-trigger):hover{
  border-color:#3d5372;color:#fff;
}
html[data-storefront-surface="website"] .account-trigger-avatar{
  width:20px;height:20px;font-size:.6875rem;background:#22364f;color:#dbe7f7;
}

/* --------------------------------------------------------------------------
   3. First screen — the headline and the docket, no picture
   -------------------------------------------------------------------------- */
html[data-storefront-surface="website"] .store-intro,
html[data-storefront-surface="website"] .home-hero{
  display:grid !important;
  grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);
  align-items:end;
  gap:clamp(20px,4vw,56px);
  min-height:0;
  padding:clamp(26px,3.6vw,44px) 0 clamp(22px,2.6vw,30px);
  margin:0;
  background:none;
  border:0;
  border-radius:0;
  overflow:visible;
  isolation:auto;
}
html[data-storefront-surface="website"] .home-hero .web-hero-copy{
  display:block !important;width:auto;max-width:none;
}
html[data-storefront-surface="website"] .store-intro h1,
html[data-storefront-surface="website"] .home-hero h1{
  font-size:var(--t-display);
  line-height:1.03;
  letter-spacing:-.04em;
  font-weight:800;
  max-width:17ch;
  color:#fff;
  text-wrap:balance;
}
html[data-storefront-surface="website"] .web-hero-title{display:block !important}
html[data-storefront-surface="website"] .web-hero-title>span{display:inline;color:#fff}
html[data-storefront-surface="website"] .web-accent{color:#a9bdd8}
html[data-storefront-surface="website"] .store-intro p,
html[data-storefront-surface="website"] .home-hero p{
  margin:16px 0 0;max-width:44ch;color:#b7c6db;font-size:var(--t-small);line-height:1.55;
}
html[data-storefront-surface="website"] .web-hero-cta{
  margin-top:22px;min-width:0;min-height:48px;
  display:inline-flex !important;align-items:center;gap:14px;
  padding:0 20px;border:1px solid var(--accent);border-radius:var(--radius);
  background:var(--accent);color:var(--accent-ink);
  font-size:var(--t-small);font-weight:800;
}
html[data-storefront-surface="website"] .web-hero-cta:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
html[data-storefront-surface="website"] .web-hero-cta svg{width:17px;height:17px}

/* the docket: four facts a buyer actually checks */
html[data-storefront-surface="website"] .web-docket{
  border-top:1px solid var(--rule);
  display:grid;
}
html[data-storefront-surface="website"] .web-docket>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--rule);
  font-size:var(--t-meta);color:var(--navy-2);
}
html[data-storefront-surface="website"] .web-docket b{
  font-weight:800;color:var(--navy-ink);font-variant-numeric:tabular-nums;text-align:end;
}
html[data-storefront-surface="website"] .web-docket .web-pay{display:flex;gap:6px;align-items:center;justify-content:flex-end}
html[data-storefront-surface="website"] .web-docket .web-pay img{width:15px;height:15px;opacity:.9}

/* the supplier line is part of the docket now, not a floating pill */
html[data-storefront-surface="website"] #top>.supplier-notice{display:none}

/* --------------------------------------------------------------------------
   4. The slip — catalogue printed on paper
   -------------------------------------------------------------------------- */
html[data-storefront-surface="website"] .products-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  align-items:center;
  padding:0;
  margin:0 0 clamp(30px,4vw,52px);
  background:var(--slip);
  color:var(--slip-ink);
  border:1px solid #0a1220;
  border-radius:var(--radius);
  box-shadow:0 22px 50px #00000059;
  overflow:hidden;
  scroll-margin-top:12px;
}
html[data-storefront-surface="website"] .web-shop-heading{
  grid-column:1/-1;grid-row:1;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px;
  margin:0 !important;
  padding:14px 20px 12px;
  border-bottom:2px solid var(--slip-ink);
  background:var(--slip-2);
}
html[data-storefront-surface="website"] .web-shop-heading h2{
  font-size:var(--t-meta) !important;
  font-weight:800 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase;
  color:var(--slip-ink) !important;
}
html[data-storefront-surface="website"] .web-shop-heading p{
  font-size:var(--t-meta) !important;
  color:var(--slip-ink-2) !important;
  margin:2px 0 0 !important;
}
/* the search + tabs toolbar */
html[data-storefront-surface="website"] .section-heading{
  display:block;border:0;padding:10px 20px;grid-column:2;grid-row:2;
}
html[data-storefront-surface="website"] .section-heading>h2{display:none}
html[data-storefront-surface="website"] .search-box{
  width:100%;min-height:42px;padding-inline:13px;
  background:#fffdf7;border:1px solid #c9c1b0;border-radius:var(--radius);
}
html[data-storefront-surface="website"] .search-box input{
  height:40px;font-size:var(--t-small);color:var(--slip-ink);background:transparent;
}
html[data-storefront-surface="website"] .search-box input::placeholder{color:#6d7482}
html[data-storefront-surface="website"] .search-box svg{stroke:#5b6472}
html[data-storefront-surface="website"] .search-box:focus-within{outline:2px solid var(--accent);outline-offset:2px}
html[data-storefront-surface="website"] .catalog-controls{
  grid-column:1;grid-row:2;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:10px 20px;
}
html[data-storefront-surface="website"] .web-category-tabs{
  display:flex !important;gap:6px;flex-wrap:wrap;
}
html[data-storefront-surface="website"] .web-category-tabs button{
  min-height:34px;padding:0 11px;border-radius:var(--radius);
  border:1px solid #c9c1b0;background:transparent;color:#3d4553;
  font-size:var(--t-meta);font-weight:700;white-space:nowrap;
}
html[data-storefront-surface="website"] .web-category-tabs button:hover{background:#efe9db;color:var(--slip-ink)}
html[data-storefront-surface="website"] .web-category-tabs button[aria-pressed="true"]{
  background:var(--slip-ink);border-color:var(--slip-ink);color:var(--slip-3);
}
html[data-storefront-surface="website"] #filterToggle,
html[data-storefront-surface="website"] #filterPanel{display:none !important}
html[data-storefront-surface="website"] .filter-interaction{z-index:auto}
html[data-storefront-surface="website"] #viewToggle{
  min-height:34px;padding:0 10px;border:1px solid #c9c1b0;background:transparent;
  border-radius:var(--radius);color:#3d4553;
}
html[data-storefront-surface="website"] #viewToggle svg{stroke:currentColor;width:15px;height:15px}
html[data-storefront-surface="website"] #viewToggle[aria-pressed="true"]{background:var(--slip-ink);border-color:var(--slip-ink);color:var(--slip-3)}
html[data-storefront-surface="website"] .catalog-result{
  margin-inline-start:auto;font-size:var(--t-meta);color:var(--slip-ink-2);font-weight:700;
}
html[data-storefront-surface="website"] .catalog-result strong{color:var(--slip-ink);font-variant-numeric:tabular-nums}
html[data-storefront-surface="website"] .activity-controls{
  grid-column:1/-1;grid-row:3;
  display:flex;justify-content:flex-end;margin:0;padding:0 20px 8px;
}
html[data-storefront-surface="website"] .activity-toggle{
  min-height:30px;padding:0 9px;border:1px solid #c9c1b0;border-radius:var(--radius);
  background:transparent;color:#5b6472;font-size:var(--t-micro);font-weight:700;
}

/* column labels */
html[data-storefront-surface="website"] .web-cols{
  grid-column:1/-1;grid-row:4;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) 190px 140px;
  gap:16px;
  padding:8px 20px;
  border-top:1px solid var(--slip-ink);
  border-bottom:1px solid #c9c1b0;
  font-size:var(--t-micro);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--slip-ink-2);
}
html[data-storefront-surface="website"] .web-cols span:nth-child(3),
html[data-storefront-surface="website"] .web-cols span:nth-child(4){text-align:end}

@media (prefers-reduced-motion:no-preference){
  html[data-storefront-surface="website"] .web-stamp{animation:stampPress .42s cubic-bezier(.2,.9,.25,1) .18s both}
  @keyframes stampPress{
    0%{opacity:0;transform:rotate(-4deg) scale(1.6)}
    62%{opacity:1;transform:rotate(-4deg) scale(.95)}
    100%{opacity:.9;transform:rotate(-4deg) scale(1)}
  }
  html[data-storefront-surface="website"] .web-shop-heading{border-bottom-width:2px;animation:ruleDraw .36s cubic-bezier(.2,.8,.2,1) both}
}
html[data-storefront-surface="website"] .web-stamp{
  display:inline-block;flex:none;
  border:2px solid #16305e;color:#16305e;
  font-size:var(--t-micro);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 9px;border-radius:2px;transform:rotate(-4deg);
  margin-inline-start:14px;opacity:.9;
}

/* ---- live catalogue: the grouped ChatGPT Plus card ------------------------
   The live source renders .web-plus-group instead of the plain card (see
   docs/design/manifest-v30/CONTRACTS.md §3.4). Its children are different, so
   it needs its own grid map or the plan selector and the price fall into the
   wrong columns. */
html[data-storefront-surface="website"] .product-card.web-plus-group{
  grid-template-areas:
    "head  desc  price  cta"
    "opts  desc  stock  cta";
  align-items:start;
  row-gap:10px;
}
html[data-storefront-surface="website"] .web-plus-group .web-card-header{grid-area:head;align-self:center}
html[data-storefront-surface="website"] .gpt-monogram{
  width:38px;height:38px;border:1px solid #0b1524;border-radius:5px;background:#0b1524;
  color:#f4f0e6;display:grid;place-items:center;align-content:center;gap:1px;
  font-family:ManropeWebsite,Manrope,system-ui,sans-serif;
  font-size:.625rem;font-weight:800;letter-spacing:.05em;line-height:1.05;text-align:center;flex:none;
}
html[data-storefront-surface="website"] .gpt-monogram span{
  font-size:.4375rem;letter-spacing:.08em;opacity:.75;
}
html[data-storefront-surface="website"] .web-plus-group .gpt-card-options{
  grid-area:opts;display:flex!important;gap:6px;flex-wrap:wrap;margin:0;padding:0;padding-inline-start:49px;
}
html[data-storefront-surface="website"] .web-plus-group .gpt-card-options button{
  min-height:28px;padding:0 10px;border-radius:2px;
  border:1px solid #b9b1a0;background:transparent;color:#3d4553;
  font-family:inherit;font-size:.75rem;font-weight:800;letter-spacing:.01em;
}
html[data-storefront-surface="website"] .web-plus-group .gpt-card-options button:hover{background:#efe9db;color:#0b1524}
html[data-storefront-surface="website"] .web-plus-group .gpt-card-options button[aria-pressed="true"]{
  background:#0b1524;border-color:#0b1524;color:#f4f0e6;
}
html[data-storefront-surface="website"] .web-plus-group .web-plus-description{
  grid-area:desc;margin:0!important;font-size:var(--t-meta)!important;line-height:1.5!important;
  color:#4c5566!important;max-width:52ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
html[data-storefront-surface="website"] .web-plus-group .gpt-card-bottom{display:contents!important}
/* the grouped card prints the same amount + period pair as every other row */
html[data-storefront-surface="website"] .product-card.web-plus-group .web-plus-price{
  grid-area:price;display:flex;align-items:baseline;justify-content:flex-end;gap:5px;flex-wrap:wrap;
  text-align:end;color:#0b1524;line-height:1.15;direction:ltr;unicode-bidi:isolate;
}
html[data-storefront-surface="website"] .product-card.web-plus-group .web-plus-price strong{
  font-size:1.375rem;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
html[data-storefront-surface="website"] .product-card.web-plus-group .web-plus-price span{
  font-size:var(--t-micro);font-weight:700;color:#55606e;letter-spacing:0;
}
html[data-storefront-surface="website"] .web-plus-group .web-plus-stock{
  grid-area:stock;margin:0;text-align:end;font-size:var(--t-micro);font-weight:700;color:#4c5566;
}
html[data-storefront-surface="website"] .web-plus-group .web-plus-stock[data-state="unavailable"],
html[data-storefront-surface="website"] .web-plus-group[data-available="false"] .web-plus-stock{color:#8a3b2e}
html[data-storefront-surface="website"] .web-plus-group .card-cta{grid-area:cta;align-self:center;margin-top:0}

/* long supplier descriptions are clamped to the catalogue's two lines; the full
   text stays on the product page and in the DOM (not display:none) */
html[data-storefront-surface="website"] .product-card .card-heading p{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
html[data-storefront-surface="website"] .product-card .web-card-header h3{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---- rows: one product per line ---- */
/* the shipped skin ends its responsive ladder at 30px for the amount; the
   catalogue prints one size for every row so the prices read as a column */
html[data-storefront-surface="website"] .product-card .card-price strong{
  font-size:1.375rem;line-height:1.15;font-weight:800;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--slip-ink);white-space:normal;
}
html[data-storefront-surface="website"] .product-card .card-price strong.price-message{
  font-size:var(--t-meta);line-height:1.45;letter-spacing:0;font-weight:700;
}
html[data-storefront-surface="website"] .product-grid{
  grid-column:1/-1;grid-row:5;
  display:block;grid-template-columns:none;gap:0;
  padding:0;margin:0;background:none;
}
html[data-storefront-surface="website"] .product-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) 190px 140px;
  grid-template-areas:
    "head desc price cta"
    "badges desc price cta";
  align-items:center;
  gap:6px 16px;
  min-height:0;
  padding:11px 20px;
  border:0;
  border-bottom:1px solid #d8d1c1;
  border-radius:0;
  background:transparent;
  color:var(--slip-ink);
  box-shadow:none;
  transition:background .14s linear;
}
html[data-storefront-surface="website"] .product-card:last-child{border-bottom:0}
html[data-storefront-surface="website"] .product-card:hover{background:#efe9db}
html[data-storefront-surface="website"] .product-card:focus-visible{outline-offset:-3px}

/* hydrated website card */
html[data-storefront-surface="website"] .product-card .web-card-header{
  grid-area:head;display:grid;grid-template-columns:38px minmax(0,1fr);
  align-items:center;column-gap:14px;row-gap:0;justify-content:start;justify-items:start;
  flex-direction:row;width:100%;min-height:0;text-align:start;
}
/* the live catalogue marks arrive from website.css as 48px teal tiles; the
   catalogue prints the shop own chip instead: 38px navy, 22px artwork, and a
   tidy 13px letter when a product has no artwork of its own */
html[data-storefront-surface="website"] .product-card .web-card-header .product-symbol{
  width:38px;height:38px;border:1px solid #0b1524;border-radius:5px;background:#0b1524;
  color:#f4f0e6;display:grid;place-items:center;overflow:hidden;flex:none;
  font-family:ManropeWebsite,Manrope,system-ui,sans-serif;
  font-size:13px;font-weight:800;line-height:1;letter-spacing:.01em;
}
html[data-storefront-surface="website"] .product-card .web-card-header .product-symbol img{
  width:22px;height:22px;object-fit:contain;display:block;
}
html[data-storefront-surface="website"] .web-card-header h3{
  font-size:var(--t-h3) !important;line-height:1.25 !important;font-weight:800 !important;
  letter-spacing:-.015em;color:var(--slip-ink);min-height:0 !important;padding:0 !important;display:block !important;
}
html[data-storefront-surface="website"] .card-heading{grid-area:desc;min-width:0}
html[data-storefront-surface="website"] .card-heading p{
  font-size:var(--t-meta) !important;line-height:1.5 !important;color:#4c5566 !important;
  margin:0 !important;max-width:52ch;
}
html[data-storefront-surface="website"] .card-badges{
  grid-area:badges;min-height:0;margin:0;display:flex;gap:8px;align-items:center;
  padding-inline-start:49px;
}
html[data-storefront-surface="website"] .product-card .supplier-badge{
  font-size:var(--t-micro);color:#5b6472;border:0;background:transparent;padding:0;
  display:inline-flex;align-items:center;gap:5px;
}
html[data-storefront-surface="website"] .supplier-badge svg{width:12px;height:12px;stroke:#6d7482}
html[data-storefront-surface="website"] .shop-pick-badge{
  font-size:var(--t-micro);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#0b1524;background:#e6dc9f;border:0;border-radius:2px;padding:2px 6px;
}
html[data-storefront-surface="website"] .card-topline{
  position:static;inset:auto;display:block;
}
html[data-storefront-surface="website"] .card-category{
  display:none;font-size:.6875rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#6d7482;
}
html[data-storefront-surface="website"] .product-symbol{
  width:34px;height:34px;border-radius:5px;background:#0b1524;border:0;
  display:grid;place-items:center;
}
html[data-storefront-surface="website"] .product-symbol img{width:22px;height:22px}
html[data-storefront-surface="website"] .card-sales,
html[data-storefront-surface="website"] .card-recent{display:none !important}

html[data-storefront-surface="website"] .card-bottom{
  display:contents;
}
html[data-storefront-surface="website"] .card-pricing{
  grid-area:price;display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:end;
}
html[data-storefront-surface="website"] .card-price{
  display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;justify-content:flex-end;
  direction:ltr;unicode-bidi:isolate;
}
html[data-storefront-surface="website"] .card-price strong{
  font-size:1.375rem;line-height:1.1;font-weight:800;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;color:var(--slip-ink);white-space:normal;
}
html[data-storefront-surface="website"] .card-price strong.price-message{font-size:var(--t-meta);line-height:1.4;letter-spacing:0}
html[data-storefront-surface="website"] .card-price-period{font-size:var(--t-micro);color:#5b6472;font-weight:700}
html[data-storefront-surface="website"] .card-price-from{display:none}
html[data-storefront-surface="website"] .card-plan-count{
  font-size:var(--t-micro);line-height:1.4;color:#55606e;margin:0;max-width:none;white-space:nowrap;
}
html[data-storefront-surface="website"] .product-card .card-cta{
  grid-area:cta;justify-self:end;align-self:center;
  min-width:140px;min-height:36px;padding:0 14px;border-radius:var(--radius);
  border:1.5px solid var(--slip-ink);background:transparent;color:var(--slip-ink);
  font-size:var(--t-meta);font-weight:800;display:inline-flex;align-items:center;gap:10px;
  justify-content:center;white-space:nowrap;
}
html[data-storefront-surface="website"] .product-card .card-cta:after{content:"→";font-size:1rem;line-height:1}
html[data-storefront-surface="website"][dir="rtl"] .product-card .card-cta:after{content:"←"}
html[data-storefront-surface="website"] .product-card .card-cta:hover{background:var(--slip-ink);color:var(--slip-3)}
html[data-storefront-surface="website"] .product-card .card-cta:focus-visible{outline-offset:2px}

/* pre-hydration card: server HTML is an <a> with a different order */
html[data-storefront-surface="website"] a.product-card:not(.web-product-card){
  grid-template-areas:
    "head price cta"
    "desc desc desc";
  grid-template-columns:minmax(0,1.4fr) 130px 132px;
  align-items:center;
}
html[data-storefront-surface="website"] a.product-card:not(.web-product-card) .card-topline{grid-area:head;display:inline-flex;align-items:center;gap:10px}
html[data-storefront-surface="website"] a.product-card:not(.web-product-card) .card-heading{grid-area:desc}
html[data-storefront-surface="website"] a.product-card:not(.web-product-card) .card-bottom{display:contents}
html[data-storefront-surface="website"] a.product-card:not(.web-product-card) h3{
  font-size:var(--t-h3);font-weight:800;letter-spacing:-.015em;color:var(--slip-ink);margin:0;
}
html[data-storefront-surface="website"] a.product-card:not(.web-product-card) .card-badges{display:none}
html[data-storefront-surface="website"] a.product-card:not(.web-product-card) .card-heading p{margin-top:2px !important}

/* details disclosure sits on its own line under the row */
html[data-storefront-surface="website"] .product-card .web-card-details{
  grid-column:1/-1;margin:2px 0 0;border-top:1px dashed #d8d1c1;
}
html[data-storefront-surface="website"] .web-card-details summary{
  padding:5px 0 2px;font-size:var(--t-micro);font-weight:800;color:#4c5566;
  letter-spacing:.02em;list-style:none;display:flex;align-items:center;gap:7px;
}
html[data-storefront-surface="website"] .web-card-details summary::-webkit-details-marker{display:none}
html[data-storefront-surface="website"] .web-card-details{grid-column:1/-1;margin:0 !important;border-top:1px dashed #d8d1c1}
html[data-storefront-surface="website"] .web-card-details summary:after{
  content:"+";margin-inline-start:auto;font-size:.9375rem;font-weight:800;color:#6d7482;
}
html[data-storefront-surface="website"] .web-card-details[open] summary:after{content:"−"}
html[data-storefront-surface="website"] .web-card-info{
  padding:2px 0 8px;font-size:var(--t-meta);color:#4c5566;display:grid;gap:8px;
}
html[data-storefront-surface="website"] .web-card-info :is(.card-sales,.card-recent){display:block !important}

html[data-storefront-surface="website"] .empty-products{
  grid-column:1/-1;grid-row:6;
  padding:18px 20px 22px;font-size:var(--t-small);color:var(--slip-ink-2);
}
html[data-storefront-surface="website"] .empty-products .button{
  margin-top:10px;background:var(--slip-ink);color:var(--slip-3);border:0;border-radius:var(--radius);
}

/* --------------------------------------------------------------------------
   5. Practical sections — a hairline ledger under the slip
   -------------------------------------------------------------------------- */
html[data-storefront-surface="website"] :is(.web-access,.web-faq,.steps-section){
  display:block !important;
  margin:0 0 clamp(26px,3.4vw,40px);
  padding:0;
  border:0;
  border-top:1px solid var(--rule);
  border-radius:0;
  background:transparent;
}
html[data-storefront-surface="website"] .web-section-title{
  padding:20px 0 0;margin:0 0 18px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:baseline;
}
html[data-storefront-surface="website"] .web-section-title h2{
  font-size:var(--t-h2);font-weight:800;letter-spacing:-.03em;color:#fff;margin:0;
}
html[data-storefront-surface="website"] .web-section-title p{
  font-size:var(--t-small);color:var(--navy-2);margin:0;max-width:46ch;
}
html[data-storefront-surface="website"] .web-access-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--rule);
}
html[data-storefront-surface="website"] .web-access-item{
  display:block;padding:16px 20px 18px 0;border:0;
  border-inline-end:1px solid var(--rule);
}
html[data-storefront-surface="website"] .web-access-item:last-child{border-inline-end:0}
html[data-storefront-surface="website"] .web-access-item+.web-access-item{padding-inline-start:20px}
html[data-storefront-surface="website"] .web-line-icon{
  width:26px;height:26px;display:block;margin-bottom:10px;color:#9db4d2;
}
html[data-storefront-surface="website"] .web-line-icon svg{width:24px;height:24px;stroke-width:1.4}
html[data-storefront-surface="website"] .web-access-item h3{
  font-size:var(--t-small);font-weight:800;margin:0 0 5px;color:#fff;
}
html[data-storefront-surface="website"] .web-access-item p{
  font-size:var(--t-meta);line-height:1.55;color:var(--navy-2);margin:0;max-width:34ch;
}

/* how it works */
html[data-storefront-surface="website"] .steps-section>div{padding:20px 0 0}
html[data-storefront-surface="website"] .steps-section h2{
  font-size:var(--t-h2);font-weight:800;letter-spacing:-.03em;color:#fff;margin:0;
}
html[data-storefront-surface="website"] .steps-section>div>p{
  font-size:var(--t-small);color:var(--navy-2);margin:5px 0 0;max-width:52ch;
}
html[data-storefront-surface="website"] .steps-section ol{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule);
}
html[data-storefront-surface="website"] .steps-section li{
  display:block;padding:16px 20px 0 0;border:0;border-inline-end:1px solid var(--rule);
}
html[data-storefront-surface="website"] .steps-section li:last-child{border-inline-end:0}
html[data-storefront-surface="website"] .steps-section li+li{padding-inline-start:20px}
html[data-storefront-surface="website"] .steps-section li>span{
  display:block;font-size:var(--t-micro);font-weight:800;letter-spacing:.1em;color:#94a9c6;\n  margin-bottom:7px;font-variant-numeric:tabular-nums;
}
html[data-storefront-surface="website"] .steps-section li h3{
  font-size:var(--t-small);font-weight:800;margin:0 0 4px;color:#fff;
}
html[data-storefront-surface="website"] .steps-section li p{
  font-size:var(--t-meta);line-height:1.55;color:var(--navy-2);margin:0;max-width:34ch;
}

/* FAQ */
html[data-storefront-surface="website"] .web-faq{padding-bottom:4px}
html[data-storefront-surface="website"] .web-faq-list{border-top:1px solid var(--rule)}
html[data-storefront-surface="website"] .web-faq details{border-bottom:1px solid var(--rule)}
html[data-storefront-surface="website"] .web-faq summary{
  list-style:none;display:flex;align-items:center;gap:12px;padding:13px 0;
  font-size:var(--t-small);font-weight:800;color:#fff;cursor:pointer;
}
html[data-storefront-surface="website"] .web-faq summary::-webkit-details-marker{display:none}
html[data-storefront-surface="website"] .web-faq summary svg{
  margin-inline-start:auto;width:16px;height:16px;stroke:#8fa4c0;flex:none;
}
html[data-storefront-surface="website"] .web-faq details[open] summary svg{transform:rotate(45deg)}
html[data-storefront-surface="website"] .web-faq details p{
  font-size:var(--t-meta);line-height:1.65;color:var(--navy-2);margin:0 0 14px;max-width:66ch;
}

/* help band */
html[data-storefront-surface="website"] .web-help{
  display:grid !important;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:18px;
  margin:0 0 clamp(30px,4vw,46px);padding:18px 20px;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--ground-2);
}
html[data-storefront-surface="website"] .web-help .web-line-icon{margin:0;width:24px;height:24px}
html[data-storefront-surface="website"] .web-help h2{font-size:var(--t-small);font-weight:800;margin:0;color:#fff}
html[data-storefront-surface="website"] .web-help p{font-size:var(--t-meta);color:var(--navy-2);margin:3px 0 0}
html[data-storefront-surface="website"] .web-outline{
  display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:0 14px;
  border:1px solid #3d5372;border-radius:var(--radius);
  font-size:var(--t-meta);font-weight:800;color:#e8eef8;
}
html[data-storefront-surface="website"] .web-outline:hover{background:#16263a;border-color:#5a7398}
html[data-storefront-surface="website"] .web-outline svg{width:15px;height:15px}

/* --------------------------------------------------------------------------
   5b. Mobile dock — same palette, AA labels
   -------------------------------------------------------------------------- */
html[data-storefront-surface="website"] .mobile-nav{
  background:#08111f;border:1px solid #26384f;border-radius:8px;
  box-shadow:0 12px 28px #00000080;backdrop-filter:none;
}
html[data-storefront-surface="website"] .mobile-nav a{color:#a9bdd8}
html[data-storefront-surface="website"] .mobile-nav a small{color:#a9bdd8;font-size:.6875rem;font-weight:700}
html[data-storefront-surface="website"] .mobile-nav a svg{stroke:currentColor;width:20px;height:20px}
html[data-storefront-surface="website"] .mobile-nav a[aria-current="page"],
html[data-storefront-surface="website"] .mobile-nav a:hover{color:#fff}
html[data-storefront-surface="website"] .mobile-nav a{background:none !important;box-shadow:none !important;position:relative}
html[data-storefront-surface="website"] .mobile-nav a[aria-current="page"]{background:none !important}
html[data-storefront-surface="website"] .mobile-nav a[aria-current="page"]:after{
  content:"";position:absolute;inset-inline:18%;bottom:4px;height:2px;background:#e8eef8;
}
html[data-storefront-surface="website"] .mobile-nav a[aria-current="page"] small{color:#fff}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */
html[data-storefront-surface="website"] footer{
  max-width:var(--container);margin-inline:auto;
  padding:22px clamp(16px,4vw,32px) 34px;
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 24px;align-items:center;
  font-size:var(--t-meta);color:var(--navy-2);
}
html[data-storefront-surface="website"] footer .brand{grid-column:1}
html[data-storefront-surface="website"] footer>p{margin:0;color:var(--navy-2);font-size:var(--t-meta)}
html[data-storefront-surface="website"] footer>div:nth-of-type(1){
  grid-column:3;grid-row:1;display:flex;gap:18px;justify-content:flex-end;font-weight:700;
}
html[data-storefront-surface="website"] footer>div:nth-of-type(1) a{color:#b9c8dd}
html[data-storefront-surface="website"] footer>div:nth-of-type(1) a:hover{color:#fff}
html[data-storefront-surface="website"] .web-payment-note{
  grid-column:1/-1;display:flex !important;gap:14px;align-items:center;
  padding-top:12px;margin-top:6px;border-top:1px solid var(--rule-2);
  font-size:var(--t-micro);color:var(--navy-3);font-weight:700;
}
html[data-storefront-surface="website"] .web-payment-note span{display:inline-flex;align-items:center;gap:5px}
html[data-storefront-surface="website"] .web-payment-note img{width:14px;height:14px}
html[data-storefront-surface="website"] footer small{
  grid-column:1/-1;color:var(--navy-3);font-size:var(--t-micro);margin-top:2px;
}

/* --------------------------------------------------------------------------
   7. Phones — the manifest becomes a stack of dockets
   -------------------------------------------------------------------------- */
@media (max-width:600px){
  html[data-storefront-surface="website"] .search-box{min-height:40px}
  html[data-storefront-surface="website"] .search-box input{height:38px}
  html[data-storefront-surface="website"] .catalog-controls{padding:8px 16px 6px}
  html[data-storefront-surface="website"] .section-heading{padding:10px 16px 0}
  html[data-storefront-surface="website"] .activity-controls{padding:2px 16px 6px;justify-content:flex-start}
  html[data-storefront-surface="website"] .activity-toggle{
    min-height:26px;padding:0 8px;font-size:.6875rem;border-color:#cfc7b6;color:#5b6472;
  }
  /* phones: the docket repeats what the announcement, the supplier badge on every
     row and the footer payment note already say, so the price list can start sooner. */
  html[data-storefront-surface="website"] .web-docket{display:none !important}
  html[data-storefront-surface="website"] .store-intro,
  html[data-storefront-surface="website"] .home-hero{padding:18px 0 14px;gap:0}
  html[data-storefront-surface="website"] .store-intro p,
  html[data-storefront-surface="website"] .home-hero p{margin-top:12px;font-size:var(--t-small);max-width:34ch}
  html[data-storefront-surface="website"] .web-hero-cta{margin-top:16px}
  html[data-storefront-surface="website"] .products-section{margin-bottom:24px}
}

@media (max-width:900px){
  html[data-storefront-surface="website"] .products-section{grid-template-columns:1fr}
  html[data-storefront-surface="website"] .section-heading{grid-column:1;grid-row:2;padding:12px 20px 0}
  html[data-storefront-surface="website"] .catalog-controls{grid-column:1;grid-row:3}
  html[data-storefront-surface="website"] .activity-controls{grid-row:4;grid-column:1;justify-content:flex-start;padding:4px 20px 8px}
  html[data-storefront-surface="website"] .web-cols{grid-row:5}
  html[data-storefront-surface="website"] .product-grid{grid-row:6}
  html[data-storefront-surface="website"] .empty-products{grid-row:7}

  html[data-storefront-surface="website"] .store-intro,
  html[data-storefront-surface="website"] .home-hero{
    grid-template-columns:1fr;align-items:start;gap:18px;
    padding:22px 0 18px;
  }
  html[data-storefront-surface="website"] .store-intro h1,
  html[data-storefront-surface="website"] .home-hero h1{max-width:20ch}
  html[data-storefront-surface="website"] .web-docket{grid-template-columns:1fr 1fr;gap:0 18px;border-top:0}
  html[data-storefront-surface="website"] .web-docket>div{border-top:1px solid var(--rule);border-bottom:0}
  html[data-storefront-surface="website"] .web-section-title{grid-template-columns:1fr;gap:6px}
  html[data-storefront-surface="website"] .web-access-grid,
  html[data-storefront-surface="website"] .steps-section ol{grid-template-columns:1fr}
  html[data-storefront-surface="website"] .web-access-item,
  html[data-storefront-surface="website"] .steps-section li{
    border-inline-end:0;border-bottom:1px solid var(--rule);
    padding:14px 0 !important;
  }
  html[data-storefront-surface="website"] .web-cols{display:none !important}
  html[data-storefront-surface="website"] .product-card{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "head   price"
      "badges badges"
      "cta    cta"
      "details details";
    gap:9px 12px;
    padding:13px 16px;
  }
  html[data-storefront-surface="website"] .card-heading{display:none}
  html[data-storefront-surface="website"] .product-card.web-plus-group{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "opts" "price" "stock" "cta" "details";
    row-gap:9px;
  }
  html[data-storefront-surface="website"] .web-plus-group .web-card-header{width:100%}
  html[data-storefront-surface="website"] .web-plus-group .web-plus-price{text-align:start;font-size:1.375rem}
  html[data-storefront-surface="website"] .web-plus-group .web-plus-stock{text-align:start}
  html[data-storefront-surface="website"] .product-card.web-plus-group .card-cta{
    justify-self:start;width:auto;min-width:140px;display:inline-flex;
  }
  html[data-storefront-surface="website"] .web-plus-group .web-plus-description{display:none}
  html[data-storefront-surface="website"] .web-plus-group .gpt-card-options{padding-inline-start:0}
  html[data-storefront-surface="website"] .product-card .web-card-details{grid-area:details;margin-top:2px !important}
  html[data-storefront-surface="website"] .product-card .card-pricing{align-items:flex-end;text-align:end}
  html[data-storefront-surface="website"] .product-card .card-cta{justify-self:start;margin-top:2px}
  html[data-storefront-surface="website"] .card-pricing{align-items:flex-end}
  html[data-storefront-surface="website"] a.product-card:not(.web-product-card){
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"head price" "desc desc" "cta cta";
  }
  html[data-storefront-surface="website"] .card-badges{padding-inline-start:0}
  html[data-storefront-surface="website"] .card-category{display:block}

  html[data-storefront-surface="website"] .products-section{grid-template-columns:1fr}
  html[data-storefront-surface="website"] .section-heading{grid-column:1;grid-row:2;padding:10px 16px 0}
  html[data-storefront-surface="website"] .catalog-controls{grid-column:1;grid-row:3;padding:10px 16px 12px}
  html[data-storefront-surface="website"] .web-shop-heading{padding:12px 16px 10px}
  html[data-storefront-surface="website"] footer{grid-template-columns:1fr;gap:12px}
  html[data-storefront-surface="website"] footer>div:nth-of-type(1){grid-column:1;grid-row:auto;justify-content:flex-start}
  html[data-storefront-surface="website"] .web-help{grid-template-columns:auto minmax(0,1fr);gap:12px}
  html[data-storefront-surface="website"] .web-help .web-outline{grid-column:1/-1;justify-self:start}
}