/* ============================================================
   ICT BASIC & ESSENTIAL — STYLES (v2)
   Font & text scale aligned with ICT Beats (index.html)
   Layout, color, structure: unchanged
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --ink:#111;
  --paper:#f5f4ef;
  --white:#fff;
  --line:#d8d7d0;
  --muted:#6e6c65;
  --lime:#d8ff45;
  --orange:#ff6a2a;
  --max:1440px;
  --radius:24px;
  --font: Inter, Arial, Helvetica, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.5;
  letter-spacing:.01em;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  height:34px;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  letter-spacing:.04em;
  gap:8px;
  font-weight:600;
}
.topbar strong{font-weight:900}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  height:82px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  max-width:var(--max);
  padding:0 36px;
  margin:auto;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:rgba(245,244,239,.94);
  backdrop-filter:blur(14px);
  z-index:20;
}
.brand img{width:184px;height:auto;display:block}

.desktop-nav{display:flex;gap:30px}
.desktop-nav a,
.footer-links a,
.footer-links button{
  color:inherit;
  text-decoration:none;
  font-size:.95rem;
  font-weight:600;
}

.header-actions{justify-self:end;display:flex;gap:8px;align-items:center}

.icon-btn,.cart-btn{
  border:1px solid #111;
  background:transparent;
  height:42px;
  border-radius:999px;
  padding:0 16px;
  font:inherit;
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
}
.icon-btn{width:42px;padding:0;font-size:20px;line-height:1}

.cart-btn span{
  display:inline-grid;
  place-items:center;
  background:#111;
  color:#fff;
  border-radius:50%;
  width:22px;
  height:22px;
  margin-left:6px;
  font-size:.75rem;
}

/* ============================================================
   LANGUAGE SWITCH
   ============================================================ */
.lang-switch{
  display:flex;
  border:1px solid #111;
  border-radius:999px;
  overflow:hidden;
  height:42px;
}
.lang-btn{
  border:0;
  background:transparent;
  padding:0 14px;
  font:inherit;
  font-size:.85rem;
  font-weight:800;
  cursor:pointer;
}
.lang-btn.active{background:#111;color:#fff}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  max-width:var(--max);
  margin:auto;
  min-height:690px;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  border-bottom:1px solid var(--line);
}
.hero-copy{
  padding:95px 56px 70px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.eyebrow{
  font-size:.85rem;
  letter-spacing:.17em;
  font-weight:800;
  margin:0 0 24px;
}
.eyebrow.light{color:#fff}

.hero h1,
.section-heading h2,
.app-price-banner h2,
.ecosystem h2{
  font-family:var(--font);
  margin:0;
  letter-spacing:-.045em;
  line-height:.95;
  font-weight:900;
}
.hero h1{font-size:clamp(3.3rem,8vw,8rem)}
.hero h1 span{color:#79766c}

.hero-lead{
  max-width:690px;
  font-size:1.4rem;
  line-height:1.55;
  color:#5f5d56;
  margin:32px 0;
}

.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

.btn{
  border:0;
  border-radius:999px;
  padding:16px 24px;
  font:inherit;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  justify-content:center;
  align-items:center;
}
.btn-dark{background:#111;color:#fff}
.btn-outline{background:transparent;color:#111;border:1px solid #111}
.btn-app{background:var(--lime);color:#111}
.full{width:100%}

.hero-meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:46px;
  font-weight:800;
  font-size:1.05rem;
}
.hero-meta i{display:block;width:28px;height:1px;background:#aaa79d}

/* ============================================================
   HERO VISUAL — WEIGHT CARDS
   ============================================================ */
.hero-visual{
  background:#111;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:32px;
  gap:8px;
}
.weight-card{
  flex:1;
  border-radius:18px 18px 8px 8px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:18px;
  min-width:0;
  transition:.25s transform;
}
.weight-card:hover{transform:translateY(-8px)}
.weight-card span{
  font-family:var(--font);
  font-size:clamp(2rem,3.5vw,3.6rem);
  font-weight:900;
  letter-spacing:-.05em;
  line-height:1;
}
.weight-card small{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  margin-top:6px;
}

/* Updated heights per ICT Basic */
.hero-visual .wc-20{height:62%;background:#f7f5ef}
.hero-visual .wc-18{height:78%;background:#8a8780;color:#fff}
.hero-visual .wc-16{height:94%;background:var(--lime)}

/* Legacy fallbacks (kalau ada elemen lain pakai) */
.wc-30{height:42%;background:#e6e3da}
.wc-24{height:52%;background:#c7c3b9}
.wc-20{background:#f7f5ef}
.wc-18{background:#8a8780;color:#fff}
.wc-16{background:var(--lime)}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip{
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);
}
.trust-strip div{
  padding:24px 36px;
  border-right:1px solid var(--line);
}
.trust-strip div:last-child{border-right:0}
.trust-strip strong{
  display:block;
  font-size:.85rem;
  letter-spacing:.12em;
  font-weight:900;
}
.trust-strip span{
  font-size:.95rem;
  color:var(--muted);
  margin-top:4px;
  display:block;
}

/* ============================================================
   SHOP / GUIDE / ECOSYSTEM / SIZE GUIDE SECTIONS
   ============================================================ */
.shop-section,
.guide-section,
.ecosystem,
.size-guide-section{
  max-width:var(--max);
  margin:auto;
  padding:110px 36px;
}

.size-guide-section{border-top:1px solid var(--line)}

.section-heading{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:80px;
  align-items:end;
  margin-bottom:58px;
}
.section-heading h2,
.ecosystem h2{
  font-size:clamp(2.2rem,5vw,5rem);
}
.section-heading>p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  max-width:590px;
  font-size:1.25rem;
}

/* ============================================================
   SHOP TOOLBAR
   ============================================================ */
.shop-toolbar{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:26px;
}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{
  border:1px solid var(--line);
  background:transparent;
  border-radius:999px;
  padding:11px 18px;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
}
.filter.active{background:#111;color:#fff;border-color:#111}

.sort-wrap{
  font-size:.95rem;
  font-weight:700;
}
.sort-wrap select{
  border:0;
  border-bottom:1px solid #111;
  background:transparent;
  margin-left:10px;
  padding:8px;
  font:inherit;
  font-size:1rem;
}

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.product-card{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  position:relative;
}
.product-art{
  aspect-ratio:4/4.5;
  background:#eceae3;
  display:grid;
  place-items:center;
  position:relative;
}
.product-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(150deg,transparent 52%,rgba(0,0,0,.03));
}
.tee-svg{
  width:68%;
  height:auto;
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.08));
}
.app-badge{
  position:absolute;
  top:18px;
  left:18px;
  background:var(--lime);
  padding:8px 12px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.08em;
  z-index:2;
}

.product-info{padding:22px}
.product-title-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.product-info h3{
  font-size:1.35rem;
  margin:0;
  font-weight:900;
  letter-spacing:-.01em;
}
.product-weight{
  font-family:var(--font);
  font-size:1.05rem;
  font-weight:800;
}
.product-sub{
  font-size:1rem;
  color:var(--muted);
  margin:6px 0 18px;
}
.price-line{display:flex;gap:12px;align-items:baseline}
.web-price{
  font-weight:800;
  font-size:1.15rem;
}
.app-price{
  font-size:1rem;
  color:#4c6300;
  font-weight:800;
}
.swatches{display:flex;gap:7px;margin-top:18px}
.swatch{
  width:16px;
  height:16px;
  border-radius:50%;
  border:1px solid #aaa;
}

/* ============================================================
   APP PRICE BANNER
   ============================================================ */
.app-price-banner{
  max-width:var(--max);
  margin:auto;
  background:#111;
  color:#fff;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  min-height:570px;
}
.app-price-banner>div:first-child{
  padding:90px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.app-price-banner h2{
  font-size:clamp(2.2rem,5vw,5rem);
}
.app-price-banner p:not(.eyebrow){
  color:#b5b3ad;
  max-width:650px;
  line-height:1.6;
  font-size:1.25rem;
}

.app-card{
  display:grid;
  place-items:center;
  background:radial-gradient(circle at center,#31312e 0,#181817 42%,#111 70%);
}
.phone-ui{
  width:min(310px,70%);
  aspect-ratio:9/18.5;
  border:8px solid #333;
  border-radius:48px;
  background:#f5f4ef;
  color:#111;
  padding:44px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  box-shadow:0 30px 90px #000;
}
.phone-pill{
  position:absolute;
  top:16px;
  width:80px;
  height:20px;
  border-radius:999px;
  background:#111;
}
.app-tag{
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.1em;
  background:var(--lime);
  border-radius:999px;
  padding:8px 12px;
}
.phone-ui strong{
  font-family:var(--font);
  font-size:3rem;
  margin-top:18px;
  font-weight:900;
  letter-spacing:-.03em;
}
.phone-ui small{
  color:var(--muted);
  margin:6px 0 30px;
  font-size:1rem;
}
.phone-ui button{
  background:#111;
  color:#fff;
  border:0;
  border-radius:999px;
  padding:14px 22px;
  font-weight:800;
  font-size:1rem;
  cursor:pointer;
}

/* ============================================================
   GUIDE TABLE
   ============================================================ */
.guide-table{border-top:1px solid #111}
.guide-row{
  display:grid;
  grid-template-columns:.5fr 1fr 1.1fr 1.2fr;
  gap:18px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.guide-head{
  font-size:.8rem;
  letter-spacing:.12em;
  font-weight:800;
  color:var(--muted);
}
.guide-row b{
  font-family:var(--font);
  font-size:2rem;
  font-weight:900;
  letter-spacing:-.03em;
}
.guide-row span{
  color:var(--muted);
  font-size:1.1rem;
}
.guide-row strong{
  font-size:.9rem;
  letter-spacing:.08em;
  font-weight:900;
}

/* ============================================================
   SIZE GUIDE (Master Size Chart)
   ============================================================ */
.master-size-chart-wrap{
  background:#fff;
  border-radius:24px;
  padding:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.06);
}
.master-size-chart-wrap img{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
}
.size-guide-link{
  display:inline-block;
  margin:4px 0 18px;
  color:#111;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.06em;
  text-decoration:none;
  border-bottom:1px solid #111;
  padding-bottom:4px;
}

/* ============================================================
   SPLIT SECTION
   ============================================================ */
.split-section{
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.split-card{
  min-height:450px;
  padding:60px 36px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.split-card h3{
  font-family:var(--font);
  font-size:clamp(2.5rem,5vw,4.5rem);
  letter-spacing:-.04em;
  line-height:.96;
  margin:0 0 20px;
  font-weight:900;
}
.split-card p:not(.eyebrow){
  line-height:1.6;
  max-width:560px;
  font-size:1.2rem;
}
.split-card a{
  margin-top:24px;
  color:inherit;
  font-weight:800;
  font-size:1rem;
  text-decoration:none;
  letter-spacing:.06em;
}
.wholesale-card{background:var(--lime)}
.print-card{background:#111;color:#fff}
.print-card p:not(.eyebrow){color:#aaa}

/* ============================================================
   ECOSYSTEM
   ============================================================ */
.ecosystem{text-align:center}
.ecosystem .eyebrow{margin-bottom:24px}

.ecosystem-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:60px;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

/* Kartu ekosistem */
.ecosystem-grid > *{
  min-height:280px;
  padding:0 0 24px 0;
  text-align:left;
  background:transparent;
  color:inherit;
  border:0;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:6px;
  font:inherit;
  cursor:pointer;
  transition:background .2s;
}
.ecosystem-grid > *:hover{
  background:#fff;
}

/* Nomor 01 / 02 / 03 / 04 */
.ecosystem-grid .eco-num{
  font-size:.9rem;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.02em;
  padding:20px 24px 12px 24px;
}

/* Wrapper logo — ada padding, tidak full width */
.ecosystem-grid .eco-logo-wrap{
  width:100%;
  background:#fff;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  min-height:90px;
  box-sizing:border-box;
}

/* Logo di dalam wrapper — ada batas maksimum */
.ecosystem-grid .eco-logo{
  display:block;
  max-width:160px;
  max-height:58px;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* Judul */
.ecosystem-grid strong{
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1.15;
  padding:0 24px;
  margin-top:6px;
}

/* Subtitle */
.ecosystem-grid small{
  font-size:1rem;
  color:var(--muted);
  font-weight:400;
  padding:0 24px;
  margin-top:2px;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:#111;
  color:#fff;
  padding:60px 36px;
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:70px;
}
.footer-brand img{max-width:260px;filter:none}
.footer-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
.footer-links div{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer-links strong{
  font-size:.8rem;
  letter-spacing:.13em;
  color:#999;
  font-weight:900;
}
.footer-links button{
  background:none;
  border:0;
  color:#fff;
  text-align:left;
  padding:0;
  cursor:pointer;
  font-size:.95rem;
}
.footer-links span,
.footer-links small{
  font-size:.95rem;
  color:#aaa;
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.drawer-backdrop,.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:.2s;
  z-index:49;
}
.drawer-backdrop.open,.modal-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.cart-drawer{
  position:fixed;
  right:0;
  top:0;
  width:min(430px,100%);
  height:100vh;
  background:#f7f6f1;
  z-index:50;
  transform:translateX(100%);
  transition:.28s ease;
  display:flex;
  flex-direction:column;
}
.cart-drawer.open{transform:none}
.drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px;
  border-bottom:1px solid var(--line);
}
.drawer-head h3{
  margin:0;
  font-family:var(--font);
  font-size:1.7rem;
  font-weight:900;
  letter-spacing:-.02em;
}
.drawer-head button,
.modal-close{
  border:0;
  background:transparent;
  font-size:32px;
  cursor:pointer;
}
.cart-items{
  padding:18px 24px;
  overflow:auto;
  flex:1;
}
.cart-empty{
  padding:40px 24px;
  color:var(--muted);
  font-size:1.1rem;
}
.cart-item{
  display:grid;
  grid-template-columns:70px 1fr auto;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.mini-tee{
  width:70px;
  height:70px;
  border-radius:12px;
  display:grid;
  place-items:center;
}
.mini-tee svg{width:72%}
.cart-item strong{
  font-size:1.05rem;
  font-weight:800;
}
.cart-item small{
  display:block;
  color:var(--muted);
  margin-top:4px;
  font-size:.9rem;
}
.remove-item{
  border:0;
  background:none;
  font-size:18px;
  cursor:pointer;
}
.cart-summary{
  border-top:1px solid var(--line);
  padding:20px 24px;
  display:grid;
  gap:10px;
}
.cart-summary>div{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
  font-size:1.05rem;
}
.cart-summary small{
  color:var(--muted);
  line-height:1.5;
  font-size:.9rem;
}

/* ============================================================
   PRODUCT MODAL
   ============================================================ */
.product-modal-card{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(940px,92vw);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:28px;
  padding:0;
}
.modal-close{
  position:absolute;
  right:18px;
  top:14px;
  z-index:3;
}
.modal-product{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.modal-art{
  background:#eceae3;
  min-height:560px;
  display:grid;
  place-items:center;
}
.modal-art svg{width:68%}
.modal-info{padding:52px}
.modal-info h3{
  font-family:var(--font);
  font-size:2.8rem;
  line-height:1;
  margin:8px 0 14px;
  letter-spacing:-.04em;
  font-weight:900;
}
.modal-info>p{
  color:var(--muted);
  line-height:1.6;
  font-size:1.15rem;
}
.modal-prices{
  padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:24px 0;
}
.modal-prices strong{
  font-size:1.6rem;
  font-weight:900;
}
.modal-prices span{
  display:block;
  color:#4c6300;
  font-size:1rem;
  font-weight:800;
  margin-top:5px;
}

.selectors{display:grid;gap:16px}
.selector label{
  display:block;
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.select-buttons{display:flex;gap:8px;flex-wrap:wrap}
.select-buttons button{
  border:1px solid var(--line);
  background:#fff;
  padding:10px 16px;
  border-radius:999px;
  cursor:pointer;
  font-size:1rem;
  font-weight:600;
}
.select-buttons button.selected{
  border-color:#111;
  background:#111;
  color:#fff;
}
.modal-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:24px;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%,20px);
  background:#111;
  color:#fff;
  padding:12px 20px;
  border-radius:999px;
  font-size:1rem;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  z-index:70;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   RESPONSIVE — TABLET (≤980px)
   ============================================================ */
@media(max-width:980px){
  .site-header{grid-template-columns:1fr auto;padding:0 18px}
  .desktop-nav{display:none}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:70px 22px}
  .hero-lead{font-size:1.35rem}
  .hero-visual{min-height:470px}
  .trust-strip{grid-template-columns:1fr 1fr}
  .trust-strip strong{font-size:.95rem}
  .trust-strip span{font-size:1.05rem}
  .product-grid{grid-template-columns:1fr 1fr}
  .app-price-banner{grid-template-columns:1fr}
  .app-card{min-height:520px}
  .section-heading{grid-template-columns:1fr;gap:20px}
  .section-heading>p{font-size:1.3rem}
  .ecosystem-grid{grid-template-columns:1fr 1fr}
  .split-section{grid-template-columns:1fr}
  footer{grid-template-columns:1fr}
  .modal-product{grid-template-columns:1fr}
  .modal-art{min-height:330px}
  .modal-info{padding:32px}
  .modal-info h3{font-size:2.3rem}
}

/* ============================================================
   RESPONSIVE — MOBILE (≤700px) — Size Guide tweaks
   ============================================================ */
@media(max-width:700px){
  .size-guide-section{padding:72px 18px}
  .master-size-chart-wrap{padding:7px;border-radius:14px}
  .master-size-chart-wrap img{border-radius:9px}
}

/* ============================================================
   RESPONSIVE — MOBILE (≤620px)
   ============================================================ */
@media(max-width:620px){
  .topbar{
    font-size:.75rem;
    letter-spacing:.02em;
    padding:0 10px;
    text-align:center;
  }
  .site-header{height:70px}
  .brand img{width:145px}

  .shop-section,
  .guide-section,
  .ecosystem,
  .size-guide-section{
    padding:78px 18px;
  }

  /* HERO mobile */
  .hero-copy{padding:60px 20px}
  .hero h1{font-size:clamp(2.6rem,11vw,3.6rem)}
  .hero-lead{
    font-size:1.25rem;
    line-height:1.55;
    margin:26px 0;
  }
  .eyebrow{font-size:.9rem;letter-spacing:.15em}
  .hero-actions{gap:8px}
  .btn{font-size:1.05rem;padding:15px 20px}
  .hero-meta{
    font-size:1rem;
    margin-top:34px;
  }

  .hero-visual{
    padding:14px;
    gap:4px;
    min-height:370px;
  }
  .weight-card{padding:10px}
  .weight-card span{font-size:clamp(1.6rem,7vw,2.4rem)}
  .weight-card small{font-size:.68rem}

  .trust-strip{
    grid-template-columns:1fr;
  }
  .trust-strip div{
    padding:20px 22px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .trust-strip div:last-child{border-bottom:0}
  .trust-strip strong{font-size:1rem}
  .trust-strip span{font-size:1.05rem}

  /* SHOP */
  .product-grid{grid-template-columns:1fr}
  .shop-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .filter{font-size:1rem;padding:10px 16px}
  .product-info h3{font-size:1.35rem}
  .product-sub{font-size:1.05rem}
  .web-price{font-size:1.2rem}
  .app-price{font-size:1.05rem}

  /* HEADINGS */
  .section-heading h2,
  .ecosystem h2,
  .app-price-banner h2{
    font-size:clamp(2rem,9vw,3rem);
  }
  .section-heading>p,
  .app-price-banner p:not(.eyebrow){
    font-size:1.2rem;
  }

  /* GUIDE */
  .guide-row{
    grid-template-columns:.5fr 1fr;
    padding:20px 0;
  }
  .guide-row>*:nth-child(3),
  .guide-row>*:nth-child(4){display:none}
  .guide-row b{font-size:1.6rem}
  .guide-row span{font-size:1.05rem}
  .guide-row strong{font-size:.9rem}

  /* SPLIT */
  .split-card{padding:44px 20px}
  .split-card h3{font-size:clamp(2rem,9vw,3rem)}
  .split-card p:not(.eyebrow){font-size:1.2rem}
  .split-card a{font-size:1rem}

  /* ECOSYSTEM mobile */
  .ecosystem-grid{grid-template-columns:1fr}
  .ecosystem-grid > *{
    min-height:0;
    padding:0 0 20px 0;
  }
  .ecosystem-grid .eco-logo-wrap{
    min-height:80px;
    padding:14px 16px;
  }
  .ecosystem-grid .eco-logo{
    max-width:130px;
    max-height:50px;
  }
  .ecosystem-grid strong{font-size:1.2rem}
  .ecosystem-grid small{font-size:.95rem}
  .ecosystem-grid .eco-num{
    font-size:.85rem;
    padding:16px 20px 10px 20px;
  }
  .ecosystem-grid strong,
  .ecosystem-grid small{
    padding:0 20px;
  }

  /* FOOTER */
  .footer-links{grid-template-columns:1fr}
  .footer-links strong{font-size:.85rem}
  .footer-links a,
  .footer-links button,
  .footer-links span,
  .footer-links small{font-size:1rem}

  /* MODAL */
  .modal-actions{grid-template-columns:1fr}
  .modal-info h3{font-size:2rem}
  .modal-info>p{font-size:1.1rem}
  .select-buttons button{font-size:1rem}

  /* LANGUAGE */
  .lang-switch{height:36px}
  .lang-btn{padding:0 10px;font-size:.85rem}
  .icon-btn{display:none}

  /* CART */
  .drawer-head h3{font-size:1.5rem}
  .cart-item strong{font-size:1.05rem}
  .cart-item small{font-size:.95rem}
  .cart-summary>div{font-size:1.05rem}
  .cart-summary small{font-size:.9rem}
  .cart-empty{font-size:1.1rem}

  /* TOAST */
  .toast{font-size:.95rem;padding:12px 18px}

  /* SIZE GUIDE */
  .size-guide-section{padding:72px 18px}
  .size-guide-link{font-size:.9rem}
}