/* Pneus Ruelland — industrial-automotive blueprint */
:root{
  --bg:#17191c;
  --bg-alt:#1c1f22;
  --surface:#212427;
  --surface-2:#26292c;
  --red:#c8241f;
  --red-light:#e2352f;
  --red-dark:#8f1815;
  --ink:#f4f3f1;
  --muted:#a3a6a8;
  --muted-2:#6f7274;
  --line:#32363a;
  --font-display:'Anton', sans-serif;
  --font-body:'Space Grotesk', sans-serif;
}

html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);}
.font-display{font-family:var(--font-display);}
h1,h2,h3,h4,.display{font-family:var(--font-display);text-transform:uppercase;letter-spacing:0.01em;}
::selection{background:var(--red);color:#fff;}

/* utility strip */
.util-bar{background:var(--red-dark);color:#f5e7e6;font-size:0.78rem;}
.util-bar a:hover{color:#fff;}

/* nav */
.main-nav{background:rgba(23,25,28,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.logo-badge{position:relative;}
.logo-badge::before{
  content:"";position:absolute;inset:-10px -18px;
  background:var(--red);
  clip-path:polygon(0 0, 92% 0, 100% 100%, 8% 100%);
  z-index:0;opacity:0;transition:opacity .2s;
}
.nav-link{position:relative;font-weight:600;font-size:0.92rem;letter-spacing:.02em;}
.nav-link::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--red);transition:width .25s ease;}
.nav-link:hover::after,.nav-link.active::after{width:100%;}
.nav-link.active{color:var(--red-light);}

.btn-cta{
  background:var(--red);color:#fff;font-weight:700;letter-spacing:.02em;
  clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);
  transition:background .2s, transform .2s;
}
.btn-cta:hover{background:var(--red-light);transform:translateY(-1px);}
.btn-outline{border:1.5px solid var(--line);color:var(--ink);transition:border-color .2s,background .2s;}
.btn-outline:hover{border-color:var(--red);background:rgba(200,36,31,.08);}

/* hero */
.hero-clip{clip-path:polygon(14% 0,100% 0,100% 100%,0% 100%);}
@media(max-width:900px){.hero-clip{clip-path:none;}}
.hero-badge{background:var(--surface);border:1px solid var(--line);}
.stat-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stat-num{font-family:var(--font-display);font-size:2.4rem;color:var(--red-light);}

/* zigzag service rows */
.svc-row{border-top:1px solid var(--line);position:relative;}
.svc-row:last-child{border-bottom:1px solid var(--line);}
.svc-num{font-family:var(--font-display);font-size:3.2rem;color:var(--surface-2);-webkit-text-stroke:1px var(--line);}
.svc-icon-wrap{background:var(--surface);border:1px solid var(--line);}
.svc-row:hover .svc-icon-wrap{background:var(--red);border-color:var(--red);}
.svc-row:hover .svc-icon-wrap svg{stroke:#fff;}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);}
.card-diag{position:relative;overflow:hidden;}
.card-diag::before{content:"";position:absolute;top:0;right:0;width:70px;height:70px;background:var(--red);clip-path:polygon(100% 0,0 0,100% 100%);}

.badge-cert{background:var(--surface-2);border:1px solid var(--line);}

/* footer */
footer{background:#101112;border-top:3px solid var(--red);}
.footer-link:hover{color:var(--red-light);}

/* portal */
.portal-shell{background:radial-gradient(circle at 30% 20%, #22262a 0%, #131416 70%);}
.portal-card{background:var(--surface);border:1px solid var(--line);}
.spinner{border:3px solid var(--line);border-top-color:var(--red);border-radius:50%;width:22px;height:22px;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.toast{background:var(--surface-2);border:1px solid var(--red);}

/* dashboard */
.dash-sidebar{background:#131416;border-right:1px solid var(--line);}
.dash-nav-item{border-radius:6px;transition:background .15s;}
.dash-nav-item:hover,.dash-nav-item.active{background:var(--surface-2);}
.dash-nav-item.active{border-left:3px solid var(--red);}
.progress-track{background:var(--surface-2);}
.progress-fill{background:var(--red);}
.tread-good{color:#5fbf6b;}
.tread-mid{color:#e0b23a;}
.tread-low{color:var(--red-light);}
.bay-tag{background:var(--surface-2);border:1px dashed var(--muted-2);}

/* catalogue */
.season-tab{background:var(--surface);border:1px solid var(--line);color:var(--muted);}
.season-tab:hover{border-color:var(--red);}
.season-tab.active{background:var(--red);border-color:var(--red);color:#fff;}
.season-pill{font-size:.68rem;font-weight:700;letter-spacing:.04em;padding:.2rem .6rem;border-radius:2px;text-transform:uppercase;}
.season-pill.hiver{background:rgba(90,150,255,.12);color:#7fa8ff;}
.season-pill.ete{background:rgba(226,53,47,.12);color:var(--red-light);}
.season-pill.saisons{background:rgba(160,166,168,.12);color:var(--muted);}

/* misc */
.reveal{opacity:0;transform:translateY(24px);}
.section-tag{color:var(--red-light);font-weight:700;letter-spacing:.14em;font-size:.78rem;}
.divider-diag{height:40px;background:var(--bg-alt);clip-path:polygon(0 100%,100% 0,100% 100%);}
input:focus,select:focus{outline:none;box-shadow:0 0 0 2px var(--red);}

/* ===== shop: vehicle lookup ===== */
.lookup-card{background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden;}
.lookup-card::before{content:"";position:absolute;top:0;right:0;width:110px;height:110px;background:var(--red);clip-path:polygon(100% 0,0 0,100% 100%);opacity:.9;}
.lookup-select{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:2px;padding:.85rem 1rem;font-size:.9rem;color:var(--ink);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3a6a8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;}
.lookup-select:disabled{opacity:.4;cursor:not-allowed;}
.lookup-result{background:var(--surface-2);border:1px dashed var(--red-light);}

/* ===== shop: filter bar ===== */
.brand-chip{background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:.78rem;font-weight:600;padding:.4rem .85rem;border-radius:2px;transition:all .15s;}
.brand-chip:hover{border-color:var(--red);}
.brand-chip.active{background:var(--red);border-color:var(--red);color:#fff;}
.filter-select{background:var(--surface-2);border:1px solid var(--line);border-radius:2px;padding:.65rem 2rem .65rem 1rem;font-size:.85rem;color:var(--ink);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3a6a8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;}

/* ===== shop: tire cards ===== */
.tire-card{background:var(--surface);border:1px solid var(--line);transition:border-color .2s,transform .2s;display:flex;flex-direction:column;}
.tire-card:hover{border-color:var(--red);transform:translateY(-3px);}
.tire-card-img{aspect-ratio:4/3;overflow:hidden;background:var(--surface-2);}
.tire-card-img img{width:100%;height:100%;object-fit:cover;}
.season-pill.allweather{background:rgba(95,191,107,.12);color:#5fbf6b;}

/* ===== shop: cart ===== */
.cart-icon-btn{position:relative;}
.cart-badge{position:absolute;top:-7px;right:-9px;background:var(--red);color:#fff;font-size:.65rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;}
.cart-overlay{position:fixed;inset:0;background:rgba(10,11,12,.7);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s;}
.cart-overlay.open{opacity:1;pointer-events:auto;}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:420px;background:var(--bg-alt);border-left:1px solid var(--line);z-index:91;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;}
.cart-drawer.open{transform:translateX(0);}
.cart-line{border-bottom:1px solid var(--line);}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:2px;}
.qty-stepper button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--muted);}
.qty-stepper button:hover{color:var(--red-light);}
.qty-stepper span{min-width:26px;text-align:center;font-weight:600;font-size:.85rem;}

/* ===== shop: product modal ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(10,11,12,.8);z-index:95;opacity:0;pointer-events:none;transition:opacity .2s;display:flex;align-items:center;justify-content:center;padding:1.25rem;}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal-panel{background:var(--surface);border:1px solid var(--line);max-width:920px;width:100%;max-height:88vh;overflow-y:auto;}
.size-option{border:1px solid var(--line);border-radius:2px;transition:border-color .15s,background .15s;cursor:pointer;}
.size-option:hover{border-color:var(--red);}
.size-option.selected{border-color:var(--red);background:rgba(200,36,31,.1);}

/* ===== shop: misc ===== */
.empty-state{border:1px dashed var(--line);}
.step-num{font-family:var(--font-display);color:var(--red-light);font-size:.85rem;}