/* =========================================================
   Retail shop (settings.shop_model = 'retail', 2026-11-13):
   loaded after store.css only on a retail shop. The header,
   footer and product pages of views/retail/. Brand colours and
   the word mark stay in the brand's own brand.css.
   ========================================================= */

/* ----- header: logo · search · account · basket, categories underneath ----- */
.rh .rh-row{ display:flex; align-items:center; gap:20px; padding:12px 24px; }
.rh .brand{ flex:0 0 auto; }
.rh-search{ flex:1; display:flex; align-items:center; max-width:640px; margin:0 auto; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:0 4px 0 16px; transition:border-color .15s, box-shadow .15s; }
.rh-search:focus-within{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(0,0,0,.06); background:#fff; }
.rh-search input{ flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:15px; padding:11px 0; outline:none; }
.rh-search input::-webkit-search-cancel-button{ display:none; }
.rh-search button{ flex:0 0 auto; width:38px; height:38px; border:0; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.rh-search button .ic{ width:18px; height:18px; }
.rh-actions{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.rh-act{ position:relative; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; font-weight:600; font-size:14.5px; color:var(--ink); }
.rh-act:hover{ background:var(--paper); }
.rh-act .ic{ width:22px; height:22px; }
.rh-cart .icon-badge{ position:absolute; top:0; left:26px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--sale); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.rh .rh-cats{ border-top:1px solid var(--line); }
.rh .rh-cats .wrap{ display:flex; gap:4px; padding:0 24px; overflow-x:auto; scrollbar-width:none; }
.rh .rh-cats .wrap::-webkit-scrollbar{ display:none; }
.rh-cats a{ flex:0 0 auto; white-space:nowrap; padding:11px 12px; font-size:14px; font-weight:500; color:var(--muted); border-bottom:2px solid transparent; }
.rh-cats a:hover, .rh-cats a.on{ color:var(--ink); border-bottom-color:var(--ink); }

/* ----- home hero ----- */
.rhero{ background:var(--paper); border-bottom:1px solid var(--line); }
.rhero-row{ display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center; padding:52px 24px; }
.rhero-copy h1{ font-size:clamp(34px,4.6vw,58px); letter-spacing:-.035em; }
.rhero-copy .lead{ font-size:18px; color:var(--muted); max-width:46ch; margin:16px 0 26px; }
.rhero .kicker{ color:var(--sale); }
.rhero .hp-price{ background:var(--ink); }

/* ----- product cards: the price leads ----- */
.rcard .rprice{ display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; }
.rcard .rprice .amt{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--ink); letter-spacing:-.02em; }
.rcard .rprice .amt.sale{ color:var(--sale); }
.rcard .rprice .was{ font-size:13px; color:var(--muted); }

/* ----- product page ----- */
.r-brand{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.r-brand:hover{ color:var(--ink); }
.rpricebox .big{ color:var(--ink); font-size:40px; }
.rpricebox.sale .big{ color:var(--sale); }
.stock-line{ display:flex; align-items:center; gap:8px; margin:12px 0 0; font-size:14.5px; font-weight:600; }
.stock-line .dot{ width:9px; height:9px; border-radius:50%; background:var(--good); }
.stock-line.ok{ color:var(--good); }
.stock-line.out{ color:var(--bad); } .stock-line.out .dot{ background:var(--bad); }
.r-buy{ display:flex; gap:12px; align-items:flex-end; width:100%; }
.r-buy .btn{ flex:1; }
.r-points{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:8px; font-size:14px; color:var(--muted); }
.r-points li{ display:flex; align-items:center; gap:10px; }
.r-points .ic{ width:18px; height:18px; color:var(--ink); flex:0 0 18px; }

/* ----- footer ----- */
.rf .foot-trust .ft-ic{ background:#fff; color:var(--ink); }

/* ----- phones ----- */
@media (max-width:1000px){
  .rhero-row{ grid-template-columns:1fr; gap:26px; padding:36px 24px; }
}
@media (max-width:760px){
  /* logo + basket on one row, the search box under it: search is the first thing people use on a phone */
  .rh .rh-row{ flex-wrap:wrap; gap:10px 12px; padding:10px 16px 12px; }
  .rh .brand{ order:1; }
  .rh-actions{ order:2; margin-left:auto; gap:0; }
  .rh-act{ padding:8px; }
  .rh-act span:not(.icon-badge){ display:none; }
  .rh-act .ic{ width:24px; height:24px; }
  .rh-cart .icon-badge{ top:2px; left:22px; }
  .rh-search{ order:3; flex:1 0 100%; max-width:none; }
  .rh-search input{ font-size:16px; padding:10px 0; }
  .rh .rh-cats .wrap{ padding:0 10px; }
  .rh-cats a{ padding:10px 10px; font-size:13.5px; }
  .rhero-row{ padding:24px 16px 22px; gap:20px; }
  .rhero-copy h1{ font-size:clamp(30px,8.6vw,38px); }
  .rhero-copy .lead{ font-size:15.5px; margin:10px 0 18px; }
  .rcard .rprice .amt{ font-size:17px; }
  .rpricebox .big{ font-size:34px; }
  .r-buy .qty{ width:72px; }
}

/* The text-message opt-in under the mobile number on sign-up (2026-11-14): the shop's own permission row (.consent,
   a switch, tap anywhere), the bold line on top, the Terms / Privacy links right under the row. */
.sms-optin{ margin:0 0 6px; }
.sms-optin label strong{ display:block; font-size:15px; margin-bottom:4px; color:var(--ink); }
.sms-optin .sms-body{ display:block; font-size:12.5px; font-weight:400; line-height:1.5; color:var(--muted); }
.sms-links{ margin:0 0 16px; font-size:12.5px; }
.contact-quick{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }