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

/*
  kolesa.city brand system
  Orange #F05A32 · Milk #F5F0E6 · Graphite #262521
*/
:root {
  --ink:#262521;
  --ink-2:#36342f;
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --muted:#747066;
  --line:#DED7CA;
  --accent:#F05A32;
  --accent-dark:#C74625;
  --accent-tint:#FFE0D6;
  --green:#28734D;
  --green-tint:#E4F2E8;
  --body:"Manrope",Arial,sans-serif;
  --display:"Roboto Condensed","Arial Narrow",Arial,sans-serif;
}

body { background:var(--paper); color:var(--ink); font-family:var(--body); }
/* One site grid for every public page: home, catalogue, brands, products and service pages. */
.wrap { width:min(1320px,calc(100% - 48px)); margin-left:auto; margin-right:auto; }
.logo { display:block; width:168px; line-height:0; }
.logo .brand-logo { display:block; width:100%; height:auto; }
.logo-mark,.logo::before { display:none!important; }

/* Catalog */
.site-head { border-bottom:1px solid rgb(38 37 33/.1); background:#fff; box-shadow:0 4px 20px rgb(38 37 33/.035); }
.head-row { min-height:80px; }
.nav a { position:relative; padding:8px 0; color:#5B584F; transition:color .2s ease; }
.nav a::after { content:""; position:absolute; right:0; bottom:2px; left:0; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .22s ease; }
.nav a:hover,.nav a:focus-visible { color:var(--accent); }
.nav a:hover::after,.nav a:focus-visible::after { transform:scaleX(1); transform-origin:left; }
.header-note { color:var(--muted); }
.header-note b { color:var(--ink); }
.head-cta { gap:8px; border-radius:7px; background:var(--accent); }
.head-cta svg,.popular-side a svg { width:17px; height:17px; flex:0 0 17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.head-cta:hover { background:var(--accent-dark); }

/* Three-level shop header. Icons deliberately repeat the product-card language. */
.site-head { position:sticky; top:0; z-index:20; }
.header-service { border-bottom:1px solid #EEE8DE; background:#FAF8F4; }
.header-service-row { min-height:33px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#817A6F; font-size:10px; font-weight:700; }
.header-service-links { display:flex; align-items:center; gap:16px; }
.header-service-links a { color:#706B61; text-decoration:none; transition:color .18s; }
.header-service-links a:hover { color:var(--accent); }
.header-service-links .header-social { display:grid; width:19px; height:19px; place-items:center; color:#5E594F; }
.header-service-links .header-social svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; transition:color .18s,transform .18s; }
.header-service-links .header-social:first-of-type svg { fill:currentColor; stroke:#FAF8F4; stroke-width:1.1; }
.header-service-links .header-social:hover svg { color:var(--accent); transform:translateY(-1px); }
.header-main-row { min-height:76px; display:flex; align-items:center; gap:14px; }
.header-main-row .logo { flex:0 0 168px; }
.header-catalog { display:inline-flex; flex:0 0 auto; align-items:center; gap:8px; min-height:42px; padding:0 13px; border-radius:9px; background:var(--accent); color:#fff; font-size:12px; font-weight:800; text-decoration:none; transition:background .18s; }
.header-catalog:hover { background:var(--accent-dark); }
.header-catalog svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.header-search { min-width:160px; height:42px; flex:1 1 380px; display:flex; align-items:center; gap:9px; padding:0 5px 0 13px; border:1px solid #DED7CA; border-radius:9px; background:#fff; transition:border-color .18s,box-shadow .18s; }
.header-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgb(240 90 50/.12); }
.header-search > svg { width:17px; height:17px; flex:0 0 17px; fill:none; stroke:#8A847A; stroke-width:1.8; stroke-linecap:round; }
.header-search input { min-width:0; flex:1; height:100%; border:0!important; outline:0; background:transparent!important; box-shadow:none!important; color:var(--ink); font-size:11px; }
.header-search input::placeholder { color:#9A9388; }
.header-search button { height:32px; padding:0 11px; border:0; border-radius:6px; background:#F5F0E6; color:#454139; font-size:10px; font-weight:800; cursor:pointer; transition:background .18s,color .18s; }
.header-search button:hover { background:var(--ink); color:#fff; }
.header-phone { display:grid; flex:0 0 auto; gap:2px; padding-left:5px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.header-phone small { color:#8A847A; font-size:9px; font-weight:700; }
.header-phone b { font:800 18px/1 var(--display); letter-spacing:.025em; }
.header-phone:hover b { color:var(--accent); }
.header-actions { display:flex; align-items:center; gap:5px; }
.header-action { position:relative; display:grid; width:40px; height:40px; place-items:center; border:1px solid #E4DED4; border-radius:10px; background:#fff; color:#575249; text-decoration:none; transition:border-color .18s,color .18s,background .18s; }
.header-action:hover { border-color:var(--accent); background:#FFF7F4; color:var(--accent); }
.header-action svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.header-action .header-cart-icon { fill:currentColor; }
.header-action .header-cart-icon .cart-handle { fill:none; stroke:currentColor; stroke-width:2; }
.header-badge { position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px; border:2px solid #fff; border-radius:99px; background:var(--accent); color:#fff; font:800 9px/12px Arial,sans-serif; text-align:center; }
.header-nav { border-top:1px solid #F0EBE2; }
.header-nav-row { min-height:46px; display:flex; align-items:center; gap:20px; }
.header-nav .nav { display:flex; flex-wrap:wrap; align-items:center; margin:0; gap:25px; }
.header-nav .nav a { padding:13px 0 11px; color:#5F5A50; font-size:13px; }

.hero { padding-top:22px; }
.hero-card { border-radius:28px; background:var(--ink); box-shadow:0 24px 60px rgb(38 37 33/.15); }
.hero-card::before { background:radial-gradient(circle,rgb(240 90 50/.44),transparent 68%); }
.hero-copy .eyebrow { color:#FFB49E; }
.hero h1 em { color:var(--accent); }
.hero-lead { color:#DED9D0; }
.hero-search { border-color:rgb(255 255 255/.14); border-radius:10px; }
.hero-search input { color:var(--ink); }
.hero-search button { border-radius:7px; background:var(--accent); }
.hero-search button:hover { background:var(--accent-dark); }
.hero-links button { color:#EFE9DE; }
.hero-links button:hover { border-color:var(--accent); background:var(--accent); }
.hero-stage::before { border-color:rgb(245 240 230/.18); }
.hero-stage::after { border-color:rgb(245 240 230/.23); }
.hero-product { background:linear-gradient(145deg,#FFFDF8,#EEE7DA); box-shadow:22px 26px 0 var(--accent),0 28px 70px rgb(0 0 0/.28); }
.hero-product::before { background:radial-gradient(circle at 50% 40%,#fff 0 28%,#F4EFE5 29% 56%,#D9D1C3 57% 59%,transparent 60%); }
.hero-product::after { color:#E1D8C9; }
.hero-sticker { background:var(--accent); }
.stage-meta { color:#BDB8AE; }

/* Homepage calculator: a useful seasonal banner instead of decorative advertising. */
.hero-calculator-stage { padding:42px 58px 38px 30px; }
.hero-calculator-stage::before { width:500px; height:500px; border-color:rgb(245 240 230/.13); }
.hero-calculator-stage::after { width:396px; height:396px; border-color:rgb(245 240 230/.14); }
.hero-calculator { position:relative; z-index:2; width:min(100%,430px); padding:22px; border:1px solid rgb(255 255 255/.17); border-radius:22px; background:linear-gradient(145deg,#FFFDF8,#F1ECE2); color:var(--ink); box-shadow:18px 22px 0 var(--accent),0 25px 56px rgb(0 0 0/.3); }
.calc-banner { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:7px 11px; padding:10px 12px; border-radius:10px; background:var(--ink); color:#F5F0E6; }
.calc-banner span { grid-row:1 / span 2; padding:5px 7px; border-radius:5px; background:var(--accent); color:#fff; font-size:9px; font-weight:800; text-transform:uppercase; }
.calc-banner b { font:800 13px/1 var(--display); letter-spacing:.02em; }
.calc-banner i { color:#C9C2B6; font-size:9px; font-style:normal; }
.calc-top { display:flex; align-items:center; justify-content:space-between; margin:20px 0 15px; }
.calc-top .eyebrow { margin-bottom:7px; color:var(--accent); font-size:9px; }
.calc-top h2 { margin:0; font:800 32px/.9 var(--display); letter-spacing:-.025em; }
.calc-wheel { display:grid; width:53px; height:53px; place-items:center; border:1px solid #DDD5C8; border-radius:50%; color:#D5CDC0; font:800 32px/1 var(--display); }
.calc-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.calc-form label { display:grid; gap:5px; }
.calc-form label > span { color:#817A6F; font-size:8px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.calc-form select { width:100%; height:42px; appearance:none; -webkit-appearance:none; padding:0 36px 0 11px; border:1px solid #DED7CA; border-radius:7px; background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='m4.5 6.75 4.5 4.5 4.5-4.5' stroke='%23262521' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:18px; color:var(--ink); font-size:11px; font-weight:800; outline:0; }
.calc-form select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgb(240 90 50/.12); }

/* One quiet, consistent select control for the catalogue filters. */
#filters select,.bar-right select {
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:44px;
  background-color:#FFFDF8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5.5 7.5 4.5 4.5 4.5-4.5' stroke='%23262521' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:20px;
  cursor:pointer;
}
#filters select::-ms-expand,.bar-right select::-ms-expand { display:none; }
#filters .sizebox select { padding-right:32px; background-position:right 9px center; background-size:18px; }

/* The sticky desktop filter may be taller than the viewport. Scroll its body,
   rather than trapping the lower controls below the fold. */
@media (min-width:761px) {
  .filters {
    display:flex;
    flex-direction:column;
    max-height:calc(100dvh - 104px);
  }
  .filter-title { flex:0 0 auto; }
  .filter-content {
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#C9C0B2 transparent;
  }
  .filter-content::-webkit-scrollbar { width:7px; }
  .filter-content::-webkit-scrollbar-thumb { border:2px solid #fff; border-radius:99px; background:#C9C0B2; }
}

/* Product landings use the available viewport instead of a narrow fixed canvas. */
.product-page {
  width:min(1320px,calc(100% - 48px)) !important;
  max-width:none !important;
  box-sizing:border-box;
  padding-left:0 !important;
  padding-right:0 !important;
}
.product-page > .top { display:none !important; }
.product-page .product { grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr) !important; }
.product-page .product-photo { min-height:clamp(390px,42vw,560px) !important; }
.product-page .product-photo img { max-height:clamp(390px,42vw,560px) !important; }
.product-page .product-photo { padding:34px; box-sizing:border-box; }
.product-page .product-photo img { width:100%; height:100%; max-width:100%; padding:0!important; box-sizing:border-box; }
.product-page .product > div:last-child { margin:26px 26px 26px 0; padding:8px 0 0; }
.product-page .eyebrow { margin-bottom:15px; color:var(--accent); font-size:11px; letter-spacing:.14em; }
.product-page .product h1 { max-width:560px; font-family:var(--display); font-size:clamp(40px,3.7vw,58px); line-height:.92; letter-spacing:-.035em; }
.product-size { display:flex; flex-wrap:wrap; gap:6px; margin:28px 0 30px; }
.product-size span { display:inline-flex; align-items:center; justify-content:center; min-width:45px; height:38px; padding:0 10px; border:1px solid #E4DED4; border-radius:8px; background:#F8F6F1; color:var(--ink); font:800 19px/1 var(--display); }
.product-page .details { gap:0!important; margin:0!important; padding:3px 0!important; border-top:1px solid #E6DED2; border-bottom:1px solid #E6DED2; }
.product-page .details div { padding:15px 12px!important; border:0!important; border-radius:0!important; }
.product-page .details div:nth-child(odd) { padding-left:0!important; }
.product-page .details div:nth-child(odd):not(:last-child) { border-right:1px solid #EEE8DE!important; }
.product-page .details div:nth-child(-n+2) { border-bottom:1px solid #EEE8DE!important; }
.product-page .details small { color:#8A8276; font-size:9px; letter-spacing:.11em; }
.product-page .details b { margin-top:6px; color:var(--ink); font-family:var(--display); font-size:17px; }
.purchase-card { display:grid; gap:0; margin-top:25px; padding:20px; border:1px solid #E8E1D6; border-radius:18px; background:#fff; box-shadow:0 12px 30px rgb(38 37 33/.09); }
.purchase-lead { display:grid; gap:5px; padding:0 0 17px; border-bottom:1px solid #EEE8DE; }
.purchase-lead b { color:var(--ink); font-size:14px; }
.purchase-lead span { color:#817A6F; font-size:11px; }
.product-page .price-box { align-items:end; margin:0!important; padding:20px 0 11px!important; border-radius:0!important; background:transparent!important; color:var(--ink); }
.product-page .price-box small { color:#817A6F; font-size:10px; font-weight:700; }
.product-page .price-box strong { margin-top:5px; color:var(--ink)!important; font-family:var(--display)!important; font-size:44px!important; letter-spacing:-.035em!important; }
.product-page .price-box .stock { padding:7px 10px; border-radius:999px; background:var(--green-tint); color:var(--green); font-size:10px; font-weight:800; }
.kit-price { display:flex; align-items:baseline; gap:7px; margin:0 0 18px; color:#746D62; font-size:11px; }
.kit-price b { color:var(--accent); font:800 17px/1 var(--display); }
.product-page .buy { width:100%; min-height:54px; box-sizing:border-box; align-items:center; justify-content:center; margin:0!important; border-radius:10px!important; background:var(--accent)!important; font-size:15px!important; letter-spacing:.01em; transition:background .18s,transform .18s; }
.product-page .buy:hover { background:var(--accent-dark)!important; transform:translateY(-1px); }
.product-page .note { display:none; }
.availability-card { display:flex; align-items:center; gap:11px; margin-top:14px; padding:15px 17px; border-radius:14px; background:var(--green-tint); color:var(--ink); }
.availability-dot { width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgb(40 115 77/.12); }
.availability-card div { display:grid; gap:2px; }
.availability-card b { color:#296946; font-size:12px; }
.availability-card span:last-child { color:#54705D; font-size:10px; }

/* Product description and specs: factual fields first, editorial content can grow separately. */
.product-info { width:min(1320px,calc(100% - 48px)); margin:74px auto 0; }
.product-info-tabs { display:flex; gap:29px; border-bottom:1px solid #E6DED2; }
.product-info-tabs button { position:relative; appearance:none; padding:0 0 15px; border:0; background:transparent; color:#8B8479; font:700 13px var(--body); cursor:pointer; }
.product-info-tabs .is-active { color:var(--ink); }
.product-info-tabs .is-active::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; border-radius:99px; background:var(--accent); }
.product-info-grid { display:grid; grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr); gap:72px; padding-top:30px; }
.product-description h2 { margin:7px 0 14px; color:var(--ink); font:800 clamp(30px,3vw,42px)/.95 var(--display); letter-spacing:-.025em; }
.product-description > p:not(.eyebrow) { max-width:475px; margin:0; color:#615C53; font-size:14px; line-height:1.62; }
.product-description small { display:block; max-width:450px; margin-top:17px; color:#938C80; font-size:10px; line-height:1.5; }
.product-specs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 36px; margin:0; }
.product-specs div { display:flex; gap:9px; align-items:baseline; min-height:24px; }
.product-specs dt { display:flex; flex:1; gap:7px; align-items:baseline; min-width:0; overflow:hidden; color:#766F65; font-size:12px; white-space:nowrap; }
.product-specs dt::after { content:""; flex:1; min-width:10px; border-bottom:1px dotted #CEC6BA; transform:translateY(-3px); }
.product-specs dd { flex:0 0 auto; margin:0; color:var(--ink); font-size:12px; font-weight:800; text-align:right; }
.compatibility-layout { display:grid; grid-template-columns:minmax(250px,.76fr) minmax(0,1.24fr); gap:72px; padding-top:30px; }
.compatibility-copy h2 { margin:7px 0 14px; color:var(--ink); font:800 clamp(30px,3vw,42px)/.95 var(--display); letter-spacing:-.025em; }
.compatibility-copy > p:not(.eyebrow) { max-width:410px; margin:0; color:#615C53; font-size:14px; line-height:1.62; }
.car-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
.car-picker label { display:grid; gap:7px; color:#766F65; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.car-picker select { width:100%; min-height:52px; appearance:none; padding:0 42px 0 15px; border:1px solid #DCD4C8; border-radius:10px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='m1 1 7 7 7-7' fill='none' stroke='%23262521' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E") right 16px center/16px 10px no-repeat; color:var(--ink); font:700 14px var(--body); outline:none; }
.car-picker select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgb(240 90 50/.10); }
.car-picker select:disabled { background-color:#F8F6F1; color:#9A9388; cursor:not-allowed; }
.compatibility-status { grid-column:1/-1; display:flex; align-items:flex-start; gap:10px; margin-top:4px; padding:15px 17px; border:1px solid #E7E0D5; border-radius:13px; background:#F8F6F1; }
.compatibility-status::before { content:""; width:8px; height:8px; flex:0 0 8px; margin-top:4px; border-radius:50%; background:#938C80; }
.compatibility-status b,.compatibility-status span { display:block; }
.compatibility-status b { color:var(--ink); font-size:12px; }
.compatibility-status span { margin-top:3px; color:#766F65; font-size:11px; line-height:1.45; }
.compatibility-status.is-loading::before { background:var(--accent); animation:compatibility-pulse 1s ease-in-out infinite; }
.compatibility-status.is-success { border-color:#CBE5D3; background:var(--green-tint); }
.compatibility-status.is-success::before { background:var(--green); }
.compatibility-status.is-warning { border-color:#E7D6AB; background:#FFF9E9; }
.compatibility-status.is-warning::before { background:#C88B18; }
.compatibility-status.is-error { border-color:#F0D2C9; background:#FFF7F4; }
.compatibility-status.is-error::before { background:var(--accent); }
.compatibility-list { padding-top:30px; }
.compatibility-loading { margin:0; color:#766F65; font-size:13px; }
.compatibility-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.compatibility-heading h2 { margin:7px 0 0; color:var(--ink); font:800 clamp(30px,3vw,42px)/.95 var(--display); letter-spacing:-.025em; }
.compatibility-heading > p { max-width:300px; margin:0; color:#766F65; font-size:12px; line-height:1.5; }
.compatibility-brands { display:flex; flex-wrap:wrap; gap:9px 17px; margin:0 0 24px; }
.compatibility-brands a { color:#28734D; font-size:13px; font-weight:700; text-decoration:none; }
.compatibility-brands a:hover { color:var(--accent); }
.compatibility-table { border:1px solid #E5DED3; border-radius:14px; overflow:hidden; }
.compatibility-row { display:grid; grid-template-columns:190px 190px minmax(0,1fr); min-height:58px; border-top:1px solid #E8E1D6; }
.compatibility-row:first-child { border-top:0; }
.compatibility-row > * { min-width:0; margin:0; padding:17px 15px; border-left:1px solid #E8E1D6; color:var(--ink); font-size:12px; }
.compatibility-row > :first-child { border-left:0; }
.compatibility-row b { align-self:center; font-weight:800; }
.compatibility-row > span { align-self:center; color:#28734D; font-weight:700; }
.compatibility-row p { display:flex; flex-wrap:wrap; align-content:center; gap:7px 14px; line-height:1.45; }
.compatibility-row em { color:#28734D; font-style:normal; }
.compatibility-row-head { min-height:43px; background:#262521; }
.compatibility-row-head > * { padding-top:13px; padding-bottom:13px; border-color:#56544E; color:#fff!important; font-size:10px; font-weight:700!important; letter-spacing:.04em; text-transform:uppercase; }
.compatibility-empty { display:grid; gap:5px; max-width:590px; padding:22px; border:1px solid #E7E0D5; border-radius:14px; background:#F8F6F1; }
.compatibility-empty b { color:var(--ink); font-size:14px; }
.compatibility-empty span { color:#766F65; font-size:12px; line-height:1.5; }
@keyframes compatibility-pulse { 50% { opacity:.25; transform:scale(.7); } }
@media (max-width:1000px) {
  .product-page .product { grid-template-columns:1fr !important; gap:28px !important; }
  .product-page .product-photo { min-height:360px !important; }
  .product-page .product > div:last-child { max-width:760px; margin:0 26px 26px; }
}
@media (max-width:760px) {
  .product-page { width:calc(100% - 30px) !important; }
  .product-page .product-photo { min-height:290px !important; }
  .product-page .product-photo { padding:22px; }
  .product-page .product-photo img { max-height:310px !important; }
  .product-page .product h1 { font-size:42px; }
  .product-page .product > div:last-child { margin:0 0 20px; }
  .purchase-card { padding:16px; border-radius:15px; }
  .product-page .price-box { padding:18px 0 10px!important; }
  .product-info { width:calc(100% - 30px); margin-top:52px; }
  .product-info-tabs { gap:20px; overflow:auto; }
  .product-info-tabs span { flex:0 0 auto; }
  .product-info-grid { grid-template-columns:1fr; gap:28px; padding-top:22px; }
  .product-specs { grid-template-columns:1fr; gap:0; }
  .compatibility-layout { grid-template-columns:1fr; gap:24px; padding-top:22px; }
  .compatibility-list { padding-top:22px; }
  .compatibility-heading { align-items:start; flex-direction:column; gap:10px; }
  .compatibility-row { grid-template-columns:145px 150px minmax(250px,1fr); }
}
@media (max-width:700px) { .compatibility-table { overflow-x:auto; } .compatibility-row { min-width:600px; } }

/* Shared shop shell and related products on static product landings. */
.product-site-head .wrap,.site-footer .wrap { width:min(1320px,calc(100% - 48px)); margin-left:auto; margin-right:auto; }
/* The header on static pages uses exactly the same sizing and navigation rhythm as the home page. */
.product-site-head .nav { display:flex; flex-wrap:wrap; align-items:center; gap:25px; }
.product-site-head .nav a { display:block; color:#5F5A50; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
.product-related { width:min(1320px,calc(100% - 48px)); margin:72px auto 0; }
.product-related-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:20px; }
.product-related h2 { margin:0; font:800 clamp(30px,3vw,42px)/.95 var(--display); letter-spacing:-.025em; }
.product-related p { max-width:330px; margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.related-grid .card { position:relative; overflow:hidden; border:1px solid #E4DED4; border-radius:18px; background:#fff; color:var(--ink); box-shadow:0 5px 14px rgb(38 37 33/.055); transition:border-color .18s,box-shadow .18s; }
.related-grid .card:hover { border-color:#D9D0C3; box-shadow:0 12px 24px rgb(38 37 33/.10); transform:none; }
.related-grid .card-open { display:block; color:inherit; text-decoration:none; }
.related-grid .card-media { position:relative; }
.related-grid .pic { position:relative; display:grid; min-height:255px; aspect-ratio:1/.88; place-items:center; overflow:hidden; background:#fff; }
.related-grid .pic::before { content:""; position:absolute; width:77%; aspect-ratio:1; border:1px solid #F0ECE4; border-radius:50%; }
.related-grid .pic::after { content:""; position:absolute; width:83%; aspect-ratio:1; border:1px solid #ECE5D9; border-radius:50%; }
.related-grid .pic img { position:relative; z-index:1; width:100%; height:100%; box-sizing:border-box; padding:18px 26px 38px; object-fit:contain; transform:scale(.89); }
.related-grid .season { position:absolute; z-index:2; top:13px; left:13px; padding:7px 10px; border-radius:999px; background:var(--ink); color:#fff; font-size:11px; font-weight:800; letter-spacing:.025em; box-shadow:0 4px 10px rgb(38 37 33/.13); }
.related-grid .picture-actions { position:absolute; z-index:5; top:13px; right:13px; display:grid; gap:8px; }
.related-grid .picture-action { display:grid; width:42px; height:42px; place-items:center; padding:0; border:1px solid #EEE8DE; border-radius:13px; background:rgb(255 255 255/.96); color:#4f4b43; box-shadow:0 7px 17px rgb(38 37 33/.11); cursor:pointer; }
.related-grid .picture-action svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.related-grid .picture-action:hover { border-color:var(--accent); color:var(--accent); }
.related-grid .picture-action[aria-pressed="true"] { border-color:#F4AD9A; background:#FFE6DE; color:var(--accent-dark); }
.related-grid .picture-favorite[aria-pressed="true"] svg { fill:currentColor; }
.related-grid .card-content-link { border-top:1px solid #EEE8DE; }
.related-grid .body { display:grid; align-content:start; gap:8px; padding:18px 18px 14px; }
.related-grid .mk { overflow:hidden; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.12em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.related-grid .model { min-height:42px; color:var(--ink); font-size:15px; font-weight:800; line-height:1.32; }
.related-grid .size-cells { display:flex; align-items:center; flex-wrap:wrap; gap:4px; min-height:29px; }
.related-grid .size-cells > span { display:inline-flex; align-items:center; justify-content:center; min-width:31px; height:27px; padding:0 6px; border:1px solid #E4DED4; border-radius:6px; background:#F8F6F1; color:var(--ink); font:800 14px/1 var(--display); }
.related-grid .index-cell { min-width:25px!important; }
.related-grid .tags { min-height:21px; }
.related-grid .foot { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:1px; padding-top:13px; border-top:1px solid #EEE8DE; }
.related-grid .price { color:var(--accent); font:800 29px/1 var(--display); letter-spacing:-.02em; white-space:nowrap; }
.related-grid .price span { margin-left:3px; color:#817A6F; font:700 10px/1 Arial,sans-serif; }
.related-grid .stock { display:inline-flex; align-items:center; justify-content:center; min-width:58px; padding:6px 8px; border-radius:999px; background:var(--green-tint); color:var(--green); font-size:10px; font-weight:800; white-space:nowrap; }
.related-grid .card-actions { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; margin:0 18px 18px; }
.related-grid .quantity-stepper { display:grid; grid-template-columns:26px 25px 26px; align-items:center; height:43px; overflow:hidden; border:1px solid #E4DED4; border-radius:9px; background:#fff; color:var(--ink); }
.related-grid .quantity-stepper button { display:grid; height:100%; place-items:center; border:0; background:transparent; color:#706B61; font:500 18px/1 Arial,sans-serif; cursor:pointer; }
.related-grid .quantity-stepper button:hover { background:#FFF0EB; color:var(--accent); }
.related-grid .quantity-stepper span { color:var(--ink); font-size:12px; font-weight:800; text-align:center; }
.related-grid .card-buy { display:grid; grid-template-columns:minmax(0,1fr) 1px 48px; gap:0; min-height:43px; padding:0 7px 0 14px; border:1px solid var(--accent); border-radius:9px; background:var(--accent); color:#fff; box-shadow:0 7px 14px rgb(240 90 50/.18); cursor:pointer; }
.related-grid .card-buy[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); }
.related-grid .buy-label { justify-self:center; align-self:center; padding-left:26px; font-size:13px; font-weight:800; }
.related-grid .buy-divider { width:1px; height:23px; align-self:center; background:rgb(255 255 255/.32); }
.related-grid .buy-cart-icon { align-self:center; justify-self:center; width:21px; height:21px; fill:currentColor; }
.related-grid .buy-cart-icon .cart-handle { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:1000px) { .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Brand landings use the catalogue card component too. Their legacy inline
   grid must not compress the common cards between tablet and desktop. */
@media (max-width:1000px) { .brand-page .brand-grid.related-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:760px) { .product-site-head .wrap,.site-footer .wrap,.product-related { width:calc(100% - 30px); }.product-related { margin-top:48px; }.product-related-head { align-items:start; flex-direction:column; gap:10px; }.related-grid .pic { min-height:190px; }.related-grid .body { padding:12px; }.related-grid .card-actions { margin:0 12px 12px; }.related-grid .picture-actions { top:8px; right:8px; gap:6px; }.related-grid .picture-action { width:34px; height:34px; border-radius:10px; }.related-grid .picture-action svg { width:17px; height:17px; }.related-grid .price { font-size:22px; }.related-grid .buy-label { padding-left:6px; font-size:12px; } }
.calc-total { display:grid; grid-template-columns:1fr auto; align-items:end; gap:3px 14px; margin-top:16px; padding-top:14px; border-top:1px solid #E2DBCF; }
.calc-total span { color:#706B61; font-size:11px; font-weight:700; }
.calc-total strong { color:var(--accent); font:800 27px/1 var(--display); letter-spacing:-.02em; }
.calc-total small { grid-column:1 / -1; color:#938B7F; font-size:9px; }
.calc-go { width:100%; min-height:43px; display:flex; align-items:center; justify-content:center; gap:9px; margin-top:15px; border:0; border-radius:8px; background:var(--accent); color:#fff; font-size:11px; font-weight:800; cursor:pointer; transition:background .18s,opacity .18s; }
.calc-go svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.calc-go:hover:not(:disabled) { background:var(--accent-dark); }
.calc-go:disabled { cursor:not-allowed; opacity:.48; }

/* Split hero: tool on the left, editorial seasonal banner on the right. */
.hero-split { min-height:458px; grid-template-columns:minmax(390px,.76fr) minmax(0,1.24fr); gap:16px; padding:0; border-radius:24px; background:transparent; box-shadow:none; overflow:visible; color:var(--ink); }
.hero-split::before,.hero-split::after { display:none; }
.calc-panel { display:flex; flex-direction:column; justify-content:center; padding:38px; border:1px solid #E5DED3; border-radius:22px; background:#fff; box-shadow:0 16px 34px rgb(38 37 33/.08); }
.calc-panel .eyebrow { margin:0 0 9px; color:var(--accent); }
.hero .calc-panel h1 { max-width:none; margin:0; color:var(--ink); font:800 42px/.91 var(--display); letter-spacing:-.028em; }
.calc-panel > p:not(.eyebrow) { max-width:345px; margin:13px 0 24px; color:#706B61; font-size:12px; line-height:1.5; }
.calc-panel .calc-form { margin-top:28px; }
.calc-panel .calc-total { margin-top:18px; }
.calc-panel .calc-go { margin-top:17px; }
.promo-banner { position:relative; display:flex; align-items:center; min-width:0; overflow:hidden; padding:52px clamp(30px,5vw,70px); border-radius:22px; background:var(--ink); color:#fff; box-shadow:0 22px 50px rgb(38 37 33/.14); }
.promo-banner::before { content:""; position:absolute; top:-180px; right:5%; width:560px; height:560px; border:1px solid rgb(255 255 255/.12); border-radius:50%; }
.promo-banner::after { content:""; position:absolute; right:-80px; bottom:-140px; width:370px; height:370px; border:1px dashed rgb(255 255 255/.17); border-radius:50%; }
.promo-copy { position:relative; z-index:2; width:54%; min-width:260px; }
.promo-copy .eyebrow { color:#FFB49E; }
.promo-copy h2 { margin:12px 0 15px; font:800 clamp(38px,4vw,61px)/.88 var(--display); letter-spacing:-.035em; }
.promo-copy p { max-width:295px; margin:0 0 24px; color:#D4CEC3; font-size:12px; line-height:1.55; }
.promo-copy a { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px; border-radius:9px; background:var(--accent); color:#fff; font-size:12px; font-weight:800; text-decoration:none; transition:background .18s; }
.promo-copy a:hover { background:var(--accent-dark); }
.promo-copy a svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.promo-tyre { position:absolute; z-index:1; right:4%; bottom:0; width:min(43%,340px); height:89%; display:grid; place-items:center; border-radius:160px 160px 0 0; background:linear-gradient(155deg,#FFFDF8,#EAE2D5); box-shadow:16px 18px 0 var(--accent); }
.promo-tyre img { width:115%; height:90%; object-fit:contain; filter:drop-shadow(0 20px 17px rgb(0 0 0/.23)); transform:rotate(-6deg); }
.promo-mark { position:absolute; z-index:2; right:22px; bottom:18px; color:#C9C2B6; font-size:9px; font-weight:800; letter-spacing:.12em; line-height:1.35; text-align:right; text-transform:uppercase; }

/* Two-slide seasonal banner. */
.promo-slider { position:relative; min-width:0; overflow:hidden; border-radius:22px; background:var(--ink); box-shadow:0 22px 50px rgb(38 37 33/.14); }
.promo-slide { position:absolute; inset:0; display:flex; align-items:center; padding:52px clamp(30px,5vw,70px); opacity:0; pointer-events:none; transform:scale(1.015); transition:opacity .42s ease,transform .55s ease; }
.promo-slide.is-active { position:relative; min-height:458px; opacity:1; pointer-events:auto; transform:scale(1); }
.promo-winter { color:#fff; }
.promo-bg,.promo-shade { position:absolute; inset:0; width:100%; height:100%; }
.promo-bg { object-fit:cover; object-position:center; }
.promo-shade { background:linear-gradient(90deg,rgb(12 14 14/.94) 0%,rgb(12 14 14/.79) 39%,rgb(12 14 14/.1) 72%); }
.promo-slider .promo-copy { position:relative; z-index:2; }
.promo-ikon { overflow:hidden; background:radial-gradient(circle at 87% 12%,#605B52 0%,transparent 31%),#262521; color:#fff; }
.promo-ikon::before { content:""; position:absolute; right:-115px; bottom:-170px; width:500px; height:500px; border:1px solid rgb(255 255 255/.13); border-radius:50%; }
.promo-ikon-copy { position:relative; z-index:2; width:55%; min-width:260px; }
.promo-ikon-copy .eyebrow { color:#FFB49E; }
.promo-ikon-copy h2 { margin:12px 0 14px; font:800 clamp(38px,4vw,61px)/.88 var(--display); letter-spacing:-.035em; }
.promo-ikon-copy p { margin:0 0 8px; color:#D4CEC3; font-size:12px; }
.promo-ikon-copy strong { display:block; margin-bottom:22px; color:var(--accent); font:800 27px/1 var(--display); }
.promo-ikon-copy a { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px; border-radius:9px; background:var(--accent); color:#fff; font-size:12px; font-weight:800; text-decoration:none; transition:background .18s; }
.promo-ikon-copy a:hover { background:var(--accent-dark); }
.promo-ikon-copy a svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.promo-ikon-tyre { position:absolute; z-index:1; right:4%; bottom:0; width:min(43%,340px); height:89%; display:grid; place-items:center; border-radius:160px 160px 0 0; background:linear-gradient(155deg,#FFFDF8,#EAE2D5); box-shadow:16px 18px 0 var(--accent); }
.promo-ikon-tyre img { width:115%; height:90%; object-fit:contain; filter:drop-shadow(0 20px 17px rgb(0 0 0/.23)); transform:rotate(-6deg); }
.promo-controls { position:absolute; z-index:5; right:clamp(24px,4vw,48px); bottom:20px; display:flex; align-items:center; gap:12px; }
.promo-controls > button { display:grid; width:48px; height:48px; place-items:center; border:1px solid rgb(255 255 255/.52); border-radius:12px; background:rgb(0 0 0/.18); color:#fff; cursor:pointer; transition:border-color .18s,background .18s; }
.promo-controls > button:hover { border-color:var(--accent); background:var(--accent); }
.promo-controls svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.promo-dots { display:flex; gap:8px; }
.promo-dots button { width:10px; height:10px; padding:0; border:0; border-radius:99px; background:rgb(255 255 255/.42); cursor:pointer; transition:width .2s,background .2s; }
.promo-dots button.is-active { width:28px; background:var(--accent); }
.promo-ikon { background:#171917; }
.promo-ikon::before { display:none; }
.promo-ikon .promo-shade { background:linear-gradient(90deg,rgb(10 13 14/.94) 0%,rgb(10 13 14/.77) 42%,rgb(10 13 14/.1) 75%); }

@media (max-width:760px) {
  .promo-slider { border-radius:17px; }
  .promo-slide.is-active { min-height:375px; padding:32px 24px; }
  .promo-copy,.promo-ikon-copy { width:62%; min-width:0; }
  .promo-copy h2,.promo-ikon-copy h2 { font-size:39px; }
  .promo-copy p,.promo-ikon-copy p { font-size:11px; }
  .promo-ikon-tyre { right:-11%; width:52%; height:80%; }
  .promo-mark { right:14px; bottom:13px; }
  .promo-controls { right:16px; bottom:14px; gap:8px; }
  .promo-controls > button { width:38px; height:38px; border-radius:10px; }
  .promo-controls svg { width:18px; height:18px; }
}

.proof { border-color:var(--line); background:var(--surface); box-shadow:0 16px 35px rgb(38 37 33/.06); }
.proof-item { border-color:var(--line); }
.proof-item b { color:var(--ink); }
.proof-item span { color:var(--muted); }

/* Keep the three value propositions separate from the hero, not sitting on it. */
.proof { width:min(1320px,calc(100% - 48px)); margin:20px auto 0; border:0; border-radius:16px; background:transparent; box-shadow:none; overflow:visible; gap:14px; }
.proof-item { min-height:104px; padding:20px 22px; border:1px solid #E5DED3!important; border-radius:14px; background:#fff; box-shadow:0 10px 22px rgb(38 37 33/.055); }
.proof-icon { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border-radius:11px; background:#F5F0E6; color:var(--accent); }
.proof-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.proof-item b { color:var(--ink); font-size:13px; }
.proof-item b strong { color:var(--accent); font:800 23px/1 var(--display); letter-spacing:-.025em; }
.proof-item span { margin-top:5px; color:#746E63; font-size:11px; line-height:1.4; }

.season-card { border-color:transparent; background:var(--surface); transition:box-shadow .18s; }
.season-card:hover { border-color:transparent; transform:none; box-shadow:0 16px 32px rgb(38 37 33/.08); }
.season-card:focus,.season-card:focus-visible { outline:none; outline-offset:0; border-color:transparent; box-shadow:none; }
.season-card::before { z-index:0; top:17px; right:15px; width:188px; height:224px; border:1px solid rgb(38 37 33/.055); border-radius:18px; background:linear-gradient(145deg,#fff 0%,#F8F6F0 100%); box-shadow:0 12px 22px rgb(0 0 0/.12),inset 0 1px 0 rgb(255 255 255/.95); transform:none; }
.season-card::after { display:none; }
.season-card img { z-index:1; top:19px; right:0; width:212px; height:212px; opacity:1; mix-blend-mode:multiply; filter:contrast(1.06) drop-shadow(0 14px 14px rgb(0 0 0/.22)); }
.season-card > :not(img) { position:relative; z-index:2; }
.season-card.all strong { max-width:174px; font-size:31px; letter-spacing:-.045em; }
.season-card.all p { max-width:172px; }
.season-card .season-arrow { display:none; }
.season-card .season-name { color:var(--ink); }
.season-card .season-meta { color:var(--muted); }
.season-card .season-arrow { color:var(--accent); }

.quick-panel { border-radius:18px; background:linear-gradient(118deg,#F05A32,#D94A27); box-shadow:0 18px 36px rgb(240 90 50/.2); }
.quick-panel .eyebrow { color:#FFE1D6; }
.quick-panel p { color:#FFEDE8; }
.quick-field span { color:#FFE8E0; }
.quick-field select { appearance:none; -webkit-appearance:none; padding:0 44px 0 15px; background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23262521' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; background-size:16px; }
.quick-form button { background:var(--ink); }
.quick-form button:hover { background:#3B3933; }

/* Home: curated models. The full filter catalogue lives on ?catalog=1. */
.popular-section { padding:94px 0 70px; }
.popular-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,.55fr) auto; gap:24px; align-items:end; margin-bottom:26px; }
.popular-head h2 { margin:8px 0 0; color:var(--ink); font:800 clamp(36px,4vw,56px)/.93 var(--display); letter-spacing:-.026em; }
.popular-side { max-width:270px; padding:0 0 3px; color:var(--muted); font-size:12px; line-height:1.5; }
.popular-side p { margin:0 0 12px; }
.popular-side a { display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:12px; font-weight:800; text-decoration:none; transition:color .18s; }
.popular-side a svg { color:var(--accent); transition:transform .18s; }
.popular-side a:hover { color:var(--accent); }
.popular-side a:hover svg { transform:translateX(3px); }
.popular-nav { display:flex; gap:8px; padding-bottom:2px; }
.popular-nav button { display:grid; width:40px; height:40px; place-items:center; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); cursor:pointer; transition:border-color .18s,background .18s,color .18s; }
.popular-nav button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.popular-nav button:hover { border-color:var(--accent); background:var(--accent); color:#fff; }
.popular-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 64px) / 5); gap:16px; overflow-x:auto; overscroll-behavior-inline:contain; padding:2px 2px 18px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.popular-track::-webkit-scrollbar { display:none; }
.popular-track .card { scroll-snap-align:start; }
.popular-track .pic { min-height:210px; aspect-ratio:1/.9; }
.popular-track .pic img,.popular-track .card:hover .pic img { padding:12px 15px 25px; transform:scale(.9); }
.popular-track .season { top:10px; left:10px; padding:6px 8px; font-size:9px; }
.popular-track .picture-actions { top:10px; right:10px; gap:6px; }
.popular-track .picture-action { width:34px; height:34px; border-radius:10px; }
.popular-track .body { gap:6px; padding:14px 14px 11px; }
.popular-track .mk { font-size:9px; }
.popular-track .model { min-height:36px; font-size:13px; }
.popular-track .size { font-size:18px; }
.popular-track .size-cells { min-height:25px; gap:3px; }
.popular-track .size-cells > span { min-width:27px; height:23px; padding:0 4px; border-radius:5px; font-size:12px; }
.popular-track .index-cell { min-width:20px; height:23px; padding:0 3px; border-radius:5px; font-size:12px; }
.popular-track .tags { min-height:17px; }
.popular-track .tag { padding:3px 6px; font-size:8px; }
.popular-track .foot { padding-top:10px; }
.popular-track .price { font-size:23px; }
.popular-track .stock { min-width:0; padding:5px 6px; font-size:9px; }
.popular-track .card-actions { margin:0 14px 14px; }
.popular-track .card-actions { gap:6px; }
.popular-track .quantity-stepper { grid-template-columns:20px 20px 20px; height:39px; border-radius:8px; }
.popular-track .quantity-stepper button { font-size:15px; }
.popular-track .quantity-stepper span { font-size:10px; }
.popular-track .card-buy { min-height:39px; }
.popular-track .buy-label { padding-left:14px; font-size:12px; }
.popular-track .card .card-buy { grid-template-columns:minmax(0,1fr) 1px 40px; }
.popular-track .buy-cart-icon { width:18px; height:18px; }
body:not(.catalog-mode) .catalog-section { display:none; }
body.catalog-mode .popular-section { display:none; }

.catalog-meta,.filter-availability { background:#EEE8DB; color:#706B61; }
.catalog-meta { border-color:var(--accent); }
.catalog-meta b,.filter-availability b { color:var(--ink); }
.filters,.card,.empty { border-color:var(--line); background:var(--surface); }
.filter-title { border-color:var(--line); }
select,input[type="search"] { border-color:#D8D0C2; background:#FFFDF8; }
select:focus,input[type="search"]:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgb(240 90 50/.14); }
.chip { border-color:#D8D0C2; background:#FFFDF8; color:#5E5A51; }
.chip:hover { border-color:var(--accent); color:var(--accent); }
.chip[aria-pressed="true"] { border-color:var(--accent); background:var(--accent); }
.check { color:#514E46; }
.check input { accent-color:var(--accent); }
.card { transition:border-color .18s,box-shadow .18s; }
.card { border:1px solid #E4DED4; border-radius:18px; box-shadow:0 5px 14px rgb(38 37 33/.055); }
.card:hover { border-color:#D9D0C3; transform:none; box-shadow:0 12px 24px rgb(38 37 33/.10); }
.card-content-link { border-top:1px solid #EEE8DE; }
.pic { min-height:300px; aspect-ratio:1/.88; background:#fff; }
.pic::before { content:""; position:absolute; width:77%; aspect-ratio:1; border:1px solid #F0ECE4; border-radius:50%; }
.pic::after { width:83%; height:auto; aspect-ratio:1; border-color:#ECE5D9; }
.pic img,.card:hover .pic img { width:100%; height:100%; padding:18px 26px 38px; transform:scale(.89); transition:none; }
.season { top:13px; left:13px; padding:7px 10px; border-radius:999px; background:var(--ink); color:#fff; font-size:11px; letter-spacing:.025em; box-shadow:0 4px 10px rgb(38 37 33/.13); }
.picture-actions { top:13px; right:13px; gap:8px; }
.picture-action { width:42px; height:42px; border-color:#EEE8DE; border-radius:13px; background:rgb(255 255 255/.96); box-shadow:0 7px 17px rgb(38 37 33/.11); }
.body { gap:8px; padding:18px 18px 14px; }
.mk { color:var(--accent); font-size:11px; letter-spacing:.12em; }
.model { min-height:42px; color:var(--ink); font-size:15px; line-height:1.32; }
.size { font-size:20px; }
.size-cells { display:flex; align-items:center; flex-wrap:wrap; gap:4px; min-height:29px; }
.size-cells > span,.index-cell { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:31px; height:27px; padding:0 6px; border:1px solid #E4DED4; border-radius:6px; background:#F8F6F1; color:var(--ink); font:800 14px/1 var(--display); letter-spacing:.01em; cursor:help; }
.index-cell { min-width:25px; }
.size-cells [data-tip]::after { content:attr(data-tip); position:absolute; z-index:12; bottom:calc(100% + 8px); left:50%; padding:7px 9px; border-radius:6px; background:var(--ink); color:#F5F0E6; font:700 10px/1.15 Arial,sans-serif; letter-spacing:0; white-space:nowrap; opacity:0; pointer-events:none; transform:translate(-50%,4px); transition:opacity .16s ease,transform .16s ease; box-shadow:0 6px 16px rgb(38 37 33/.16); }
.size-cells [data-tip]:hover::after,.size-cells [data-tip]:focus-visible::after { opacity:1; transform:translate(-50%,0); }
.size-cells [data-tip]:focus-visible { outline:2px solid rgb(240 90 50/.55); outline-offset:2px; }
/* The first value sits on the card edge: keep its hint inside the card. */
.size-cells > span:first-child[data-tip]::after { left:0; transform:translate(0,4px); }
.size-cells > span:first-child[data-tip]:hover::after,.size-cells > span:first-child[data-tip]:focus-visible::after { transform:translate(0,0); }
.tags { min-height:21px; gap:5px; }
.tag { padding:4px 7px; border-radius:999px; background:#F3EEE6; color:#6E675D; font-size:9px; }
.foot { align-items:center; margin-top:1px; padding-top:13px; }
.price { color:var(--accent); font-size:29px; }
.price span { font-size:10px; }
.stock { display:inline-flex; align-items:center; justify-content:center; min-width:58px; padding:6px 8px; border-radius:999px; font-size:10px; }
.card-actions { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; margin:0 18px 18px; }
.quantity-stepper { display:grid; grid-template-columns:26px 25px 26px; align-items:center; height:43px; overflow:hidden; border:1px solid #E4DED4; border-radius:9px; background:#fff; color:var(--ink); }
.quantity-stepper button { display:grid; height:100%; place-items:center; border:0; background:transparent; color:#706B61; font:500 18px/1 Arial,sans-serif; cursor:pointer; }
.quantity-stepper button:hover { background:#FFF0EB; color:var(--accent); }
.quantity-stepper button:focus-visible { outline:0; background:#FFF0EB; color:var(--accent); }
.quantity-stepper span { color:var(--ink); font-size:12px; font-weight:800; text-align:center; }
.card-buy { min-height:43px; border-color:var(--accent); border-radius:9px; background:var(--accent); box-shadow:0 7px 14px rgb(240 90 50/.18); font-size:11px; letter-spacing:.02em; }
.card .card-buy { display:grid; grid-template-columns:minmax(0,1fr) 1px 48px; gap:0; padding:0 7px 0 14px; }
.buy-label { justify-self:center; padding-left:26px; font-size:13px; font-weight:800; }
.buy-divider { width:1px; height:23px; background:rgb(255 255 255/.32); }
.buy-cart-icon { justify-self:center; width:21px; height:21px; fill:currentColor; }
.buy-cart-icon .cart-handle { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.card-buy:hover { border-color:var(--accent-dark); background:var(--accent-dark); color:#fff; }
.mk { color:#7A746A; }
.card-open:hover .model { color:var(--accent); }
.size small,.price span { color:#817A6F; }
.tag { background:#F0E9DD; color:#716B62; }
.foot { border-color:#EEE8DE; }
.stock { background:var(--green-tint); color:var(--green); }
.card-action { border-color:#DDD5C8; background:#FFFDF8; color:#615C52; }
.card-action:hover { border-color:var(--accent); color:var(--accent); }
.card-action[aria-pressed="true"] { border-color:#F4AD9A; background:#FFE6DE; color:var(--accent-dark); }
.card-buy { border-color:var(--ink); background:var(--ink); color:#fff; }
.card-buy:hover { border-color:var(--accent); background:var(--accent); color:#fff; }
.card-buy[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:#fff; }
.more { border-radius:7px; background:var(--accent); }
.more:hover { background:var(--accent-dark); }

/* Final catalogue card accents: declared after legacy card rules. */
.card .mk { color:var(--accent); }
.card .card-buy { border-color:var(--accent); background:var(--accent); color:#fff; }
.card .card-buy:hover { border-color:var(--accent-dark); background:var(--accent-dark); color:#fff; }
.card .card-buy[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:#fff; }

.process { border-color:var(--line); }
.step b,.process h2 { color:var(--ink); }
.step span { color:var(--muted); }

/* Brand showcase before the footer. Official brand assets are used where supplied. */
.brands-section { padding:82px 0 0; }
.brands-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:25px; }
.brands-head h2 { margin:8px 0 0; color:var(--ink); font:800 clamp(34px,4vw,52px)/.94 var(--display); letter-spacing:-.025em; }
.brands-head > p { max-width:290px; margin:0 0 5px; color:var(--muted); font-size:12px; line-height:1.5; }
.brands-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.brand-tile { min-height:78px; display:grid; align-content:center; justify-items:center; gap:7px; padding:10px; border:1px solid #E5DED3; border-radius:11px; background:#fff; color:var(--ink); text-align:center; text-decoration:none; transition:border-color .18s,box-shadow .18s,transform .18s; }
.brand-tile:hover { border-color:var(--accent); box-shadow:0 10px 20px rgb(38 37 33/.08); transform:translateY(-2px); }
.brand-tile > span { font:800 17px/1 var(--display); letter-spacing:-.025em; }
.brand-tile img { width:min(115px,90%); height:27px; object-fit:contain; }
.brand-tile small { color:#8A8378; font-size:9px; font-weight:700; }
.brands-grid:not(.is-expanded) .brand-tile:nth-child(n+19) { display:none; }
.brands-more { display:block; min-height:42px; margin:20px auto 0; padding:0 16px; border:1px solid #DCD4C8; border-radius:8px; background:#fff; color:var(--ink); font-size:11px; font-weight:800; cursor:pointer; transition:border-color .18s,color .18s; }
.brands-more:hover { border-color:var(--accent); color:var(--accent); }

footer { margin-top:18px; border-top:1px solid var(--line); background:var(--paper); color:#655F55; }
footer .footer-text { color:#777066; }
footer .footer-link { color:var(--ink); }
footer .footer-link:hover { color:var(--accent); }

/* Full site footer */
.site-footer { margin-top:82px; border-top:1px solid var(--line); background:#F6F4EF; }
.footer-grid { display:grid; grid-template-columns:1.45fr .85fr .85fr .85fr 1.1fr; gap:34px; padding:48px 0 42px; }
.footer-brand .logo { width:164px; }
.footer-brand p { max-width:265px; margin:18px 0; color:#706B61; font-size:12px; line-height:1.5; }
.footer-brand small,.footer-contact small { display:block; margin-top:18px; color:#8A847A; font-size:10px; line-height:1.45; }
.footer-search { display:flex; max-width:270px; height:43px; overflow:hidden; border:1px solid #DCD5C9; border-radius:8px; background:#fff; }
.footer-search input { min-width:0; height:100%; border:0; border-radius:0; background:transparent; font-size:11px; box-shadow:none!important; }
.footer-search button { display:grid; width:43px; flex:0 0 43px; place-items:center; border:0; border-left:1px solid #E6E0D6; background:#fff; color:#514C43; font:500 24px/1 sans-serif; cursor:pointer; }
.footer-search button:hover { background:var(--accent); color:#fff; }
.footer-column { display:grid; align-content:start; gap:11px; padding-top:4px; }
.footer-column b,.footer-contact b { margin-bottom:3px; color:var(--ink); font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.footer-column a { position:relative; width:max-content; max-width:100%; padding:2px 0; color:#625D54; font-size:12px; line-height:1.25; text-decoration:none; transition:color .18s ease; }
.footer-column a::after { content:""; position:absolute; right:0; bottom:0; left:0; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .2s ease; }
.footer-column a:hover { color:var(--accent); }
.footer-column a:hover::after { transform:scaleX(1); transform-origin:left; }
.footer-contact { align-self:start; padding:18px; border:1px solid #E1DACE; border-radius:14px; background:#fff; }
.footer-contact p { margin:9px 0 15px; color:#706B61; font-size:12px; line-height:1.45; }
.footer-cta { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:0 13px; border-radius:8px; background:var(--accent); color:#fff; font-size:11px; font-weight:800; text-decoration:none; }
.footer-cta:hover { background:var(--accent-dark); }
.footer-cta span { font-size:20px; line-height:1; }
.footer-contact small { margin-top:12px; }

/* Dark footer: graphite is the second core brand colour. */
.site-footer { border-top:0; background:var(--ink); color:#F5F0E6; }
.footer-brand p { color:#C9C2B6; }
.footer-brand small,.footer-contact small { color:#A9A196; }
.footer-search { border-color:#4A4740; background:#302F2A; }
.footer-search input { color:#F5F0E6; }
.footer-search input::placeholder { color:#AAA397; }
.footer-search button { border-left-color:#4A4740; background:#302F2A; color:#F5F0E6; }
.footer-search button:hover { background:var(--accent); }
.footer-column b,.footer-contact b { color:#F5F0E6; }
.footer-column a { color:#C9C2B6; }
.footer-column a:hover { color:#fff; }
.footer-contact { display:grid; align-content:start; gap:0; padding:4px 0 0; border:0; border-radius:0; background:transparent; }
.footer-contact p { color:#C9C2B6; }
.footer-phone { display:block; margin:12px 0 7px; color:#F5F0E6; font:800 17px/1.15 var(--display); letter-spacing:.015em; text-decoration:none; }
.footer-phone:hover { color:var(--accent); }
.footer-email { display:block; margin:0 0 10px; color:#F5F0E6; font-size:12px; font-weight:800; text-decoration:none; }
.footer-email:hover { color:var(--accent); }
.footer-contact-note { display:block; color:#A9A196; font-size:10px; line-height:1.45; }
.footer-legal { display:grid; gap:6px; margin-top:18px; }
.footer-legal small { margin-top:0; }
.footer-legal span { color:#A9A196; font-size:10px; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:54px; border-top:1px solid #444139; color:#A9A196; font-size:10px; }
.footer-bottom b { color:#F5F0E6; font-weight:800; }

/* Catalog opens as its own screen from category and search links. */
body.catalog-mode .hero,
body.catalog-mode .proof,
body.catalog-mode .season-section,
body.catalog-mode #quick-pick,
body.catalog-mode .process { display:none; }
body.catalog-mode .catalog-section { padding-top:46px; }

/* Keep the common footer and service-page content readable before the
   narrow-phone breakpoint. Five footer columns and three delivery cards are
   only comfortable on a wide desktop canvas. */
@media (max-width:980px) {
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 32px; }
  .footer-brand,.footer-contact { grid-column:1 / -1; }
  .footer-brand p { max-width:360px; }
  .delivery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .delivery-grid .delivery-card:last-child { grid-column:1 / -1; }
}

@media (max-width:760px) {
  .wrap { width:calc(100% - 30px); }
  .popular-section { padding:65px 0 52px; }
  .popular-head { grid-template-columns:1fr auto; gap:14px; align-items:end; margin-bottom:18px; }
  .popular-side { grid-column:1 / -1; max-width:420px; order:3; }
  .popular-nav { grid-column:2; grid-row:1; }
  .popular-nav button { width:40px; height:40px; border-radius:10px; }
  .popular-track { grid-auto-columns:minmax(260px,82vw); gap:12px; }
  .site-footer { margin-top:56px; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 18px; padding:34px 0; }
  .footer-brand,.footer-contact { grid-column:1 / -1; }
  .footer-brand p { max-width:340px; }
  .footer-bottom { align-items:flex-start; flex-direction:column; justify-content:center; gap:5px; min-height:70px; }
  .brands-section { padding-top:58px; }
  .brands-head { display:block; margin-bottom:18px; }
  .brands-head > p { margin-top:12px; }
  .brands-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .brand-tile { min-height:68px; padding:8px; }
  .brand-tile > span { font-size:14px; }
}

@media (max-width:560px) {
  .head-cta { gap:0; }
  .head-cta span { display:none; }
  .head-cta::after { content:none!important; display:none!important; }
  .head-cta svg { width:19px; height:19px; }
}

/* Product page */
body:has(.product) { background:radial-gradient(circle at 12% 9%,#FFFDF8 0 14%,transparent 38%),var(--paper); }
.head { height:80px; border-color:rgb(38 37 33/.1); background:rgb(255 255 255/.94); }
.head .logo { width:168px; }
.phone { color:var(--ink); }
.phone small { color:var(--muted); }
.crumbs { color:var(--muted); }
.crumbs a { color:var(--ink); }
.product { box-shadow:0 22px 60px rgb(38 37 33/.11); }
.photo { background:linear-gradient(145deg,#E6DED0,#F8F3E9 62%,#EDE4D6); }
.photo:before { border-color:#FFFC; box-shadow:0 0 0 36px #F05A3220,0 0 0 90px #F05A3212; }
.season { background:var(--ink); color:#FFFDF8; }
.product>div:nth-child(2),.details { background:var(--surface); }
.brand { color:var(--accent); }
.product h1 { max-width:440px; font-size:clamp(38px,3.5vw,48px); line-height:.96; letter-spacing:-.025em; }
.spec-main { color:#38352F; }
.price { color:var(--accent); }
.availability { background:var(--green-tint); color:var(--green); }
.availability:before { background:var(--green); box-shadow:0 0 0 5px #D5E9DB; }
.buy-primary { background:var(--accent); border-radius:7px; }
.buy-primary:hover { background:var(--accent-dark); }
.action-btn { border-color:#DDD5C8; background:#FFFDF8; color:#575249; border-radius:7px; }
.action-btn:hover { border-color:var(--accent); color:var(--accent); background:#FFF7F4; }
.action-btn[aria-pressed="true"] { border-color:#F4AD9A; background:#FFE6DE; color:var(--accent-dark); }
.action-note { color:var(--muted); }
.details { border-top:1px solid var(--line); }
.specs tr { border-color:var(--line); }
.specs th { color:var(--muted); }
.product-footer { min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:#777066; font-size:12px; }
.product-footer .logo { width:154px; flex:0 0 auto; }

@media(max-width:760px) {
  .logo,.head .logo { width:145px; }
  .head-row { min-height:68px; }
  .hero-card { border-radius:19px; }
  .product h1 { font-size:38px; }
  .product-footer { min-height:0; align-items:flex-start; flex-direction:column; padding:28px 0; gap:14px; }
}

@media(max-width:560px) {
  .pic { min-height:0; }
  .season { top:8px; left:8px; padding:5px 7px; font-size:9px; }
  .picture-actions { top:8px; right:8px; gap:6px; }
  .picture-action { width:34px; height:34px; border-radius:10px; }
  .body { gap:6px; padding:12px 12px 10px; }
  .mk { font-size:9px; }
  .model { min-height:39px; font-size:11px; }
  .size { font-size:18px; }
  .tags { min-height:17px; }
  .tag { padding:3px 5px; font-size:8px; }
  .price { font-size:23px; }
  .stock { padding:4px 5px; font-size:8px; }
  .card-actions { margin:0 12px 12px; }
  .card .card-buy { grid-template-columns:minmax(0,1fr) 1px 39px; min-height:35px; padding-left:8px; }
  .buy-label { padding-left:17px; font-size:11px; }
  .buy-divider { height:19px; }
  .buy-cart-icon { width:17px; height:17px; }
}

@media (max-width:1050px) {
  .header-phone { display:none; }
  .header-main-row .logo { flex-basis:150px; }
  .header-service-links { gap:12px; }
}
@media (max-width:760px) {
  .header-service-row { min-height:30px; font-size:9px; }
  .header-service-row > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .header-service-links a:not(.header-social) { display:none; }
  .header-main-row { min-height:64px; gap:7px; }
  .header-main-row .logo { width:128px; flex-basis:128px; }
  .header-catalog { width:38px; min-height:38px; justify-content:center; padding:0; }
  .header-catalog span { display:none; }
  .header-search { order:3; flex-basis:100%; height:39px; margin:0 0 9px; }
  .header-search button { display:none; }
  .header-actions { margin-left:auto; gap:3px; }
  .header-action { width:34px; height:34px; border-radius:8px; }
  .header-action svg { width:18px; height:18px; }
  .header-nav { display:none; }
  .hero-calculator-stage { min-height:440px; padding:28px 24px 38px; }
  .hero-calculator { width:min(100%,410px); padding:16px; border-radius:17px; box-shadow:10px 13px 0 var(--accent),0 22px 42px rgb(0 0 0/.25); }
  .calc-banner { padding:8px 9px; }
  .calc-top { margin:15px 0 12px; }
  .calc-top h2 { font-size:28px; }
  .calc-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .calc-total { margin-top:13px; padding-top:12px; }
  .hero-split { display:grid; grid-template-columns:1fr; gap:14px; min-height:0; }
  .calc-panel { min-height:0; padding:25px 20px; border-radius:17px; }
  .hero .calc-panel h1 { font-size:36px; }
  .calc-panel > p:not(.eyebrow) { margin-bottom:20px; }
  .promo-banner { min-height:375px; padding:32px 24px; border-radius:17px; }
  .promo-copy { width:62%; min-width:0; }
  .promo-copy h2 { font-size:39px; }
  .promo-copy p { font-size:11px; }
  .promo-tyre { right:-11%; width:52%; height:80%; opacity:.96; }
  .promo-mark { right:14px; bottom:13px; }
}
@media (max-width:430px) {
  .header-service-row > span { max-width:190px; }
  .header-main-row .logo { width:115px; flex-basis:115px; }
  .header-action { width:31px; height:31px; }
  .header-action svg { width:17px; height:17px; }
}

/* Homepage readability and narrow-screen safety. */
html { overflow-x:clip; }
body { min-width:320px; overflow-x:clip; }
.eyebrow { font-size:12px!important; }
.header-service-row { font-size:12px; }
.header-search input,.header-search button { font-size:14px; }
.header-phone small { font-size:12px; }
.header-nav .nav a { font-size:14px; }
.calc-form label > span,.f-label { font-size:12px; }
.calc-form select,select,input[type="search"] { font-size:14px; }
.proof-item span,.section-side,.popular-side,.brands-head > p { font-size:14px; }
.proof-item b { font-size:15px; }
.brand-tile small { font-size:12px; }
.footer-brand p,.footer-column a,.footer-contact p,.footer-email,.footer-contact-note,.footer-legal small,.footer-legal a,.footer-bottom { font-size:13px; }
.footer-legal a { color:#C9C2B6; text-decoration:none; }
.footer-legal a:hover { color:#fff; }
.calc-go { background:var(--accent)!important; color:#fff!important; opacity:1!important; cursor:pointer!important; }
.calc-go:hover { background:var(--accent-dark)!important; }
.calc-go[aria-disabled="true"] { box-shadow:0 7px 14px rgb(240 90 50/.18); }
.calc-form.has-errors select:invalid { border-color:var(--accent)!important; box-shadow:0 0 0 3px rgb(240 90 50/.13)!important; }

@media (max-width:760px) {
  .header-main-row,.header-search,.popular-head,.season-grid,.brands-head { min-width:0; }
  .header-search { min-width:0; width:100%; }
  .popular-track { grid-auto-columns:minmax(248px,78vw); padding-bottom:16px; }
  .popular-track .card { min-width:0; }
  .season-card { min-height:286px; padding:22px; }
  .season-card img { top:14px; right:-34px; width:184px; height:184px; opacity:.55; }
  .season-card strong,.season-card.all strong { max-width:60%; font-size:clamp(28px,9vw,36px); }
  .season-card p,.season-card.all p { max-width:60%; font-size:14px; line-height:1.4; }
  .promo-copy p,.promo-ikon-copy p { font-size:14px; }
}

/* Live catalogue suggestions in the site header. */
.header-search.live-search { position:relative; }
.live-search-panel { position:absolute; z-index:80; top:calc(100% + 8px); right:0; left:0; overflow:hidden; border:1px solid #E4DED4; border-radius:12px; background:#fff; box-shadow:0 16px 38px rgb(38 37 33/.18); }
.live-search-row,.live-search-all,.live-search-loading { display:grid; grid-template-columns:112px minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid #EEE8DE; color:var(--ink); font-size:13px; line-height:1.25; text-decoration:none; }
.live-search-row:hover,.live-search-row:focus-visible,.live-search-all:hover,.live-search-all:focus-visible { background:#FFF7F4; color:var(--accent); outline:0; }
.live-search-row span { overflow:hidden; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.08em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.live-search-row b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-search-row i { color:#746E63; font-size:12px; font-style:normal; text-align:right; white-space:nowrap; }
.live-search-brand { background:#FFFDF8; }
.live-search-all { display:block; border:0; color:var(--accent); font-weight:800; }
.live-search-loading { display:block; color:#746E63; }
@media (max-width:760px) { .live-search-panel { top:calc(100% + 4px); }.live-search-row { grid-template-columns:78px minmax(0,1fr); }.live-search-row i { grid-column:2; text-align:left; white-space:normal; }.live-search-row span { font-size:10px; } }