/*
Theme Name: Sittkonti Modern
Theme URI: https://sittkonti.hu
Author: Sittkonti
Description: Fekete-narancs konténeres weboldal, MAN teherautós főképpel.
Version: 1.3.0
Text Domain: sittkonti-modern
*/
:root{--orange:#ff7100;--dark:#080b0e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--dark);color:#fff;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}.wrap{max-width:1250px;margin:auto;padding:0 22px}.top{background:#080a0c;border-bottom:1px solid #222;position:relative;z-index:3}.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:82px}.logo{font-weight:900;font-size:27px;white-space:nowrap}.logo span,.accent{color:var(--orange)}.logo small{display:block;color:#b8c0c8;font-weight:400;font-size:11px}.links{display:flex;flex-wrap:wrap;gap:17px;font-size:13px}.links a:hover{color:var(--orange)}.hero{background:linear-gradient(90deg,#080a0d 0%,#080a0d 31%,rgba(8,10,13,.92) 42%,rgba(8,10,13,.15) 73%),url('assets/man-truck.jpg') right center/auto 100% no-repeat;min-height:475px;display:flex;align-items:center}.hero .wrap{width:100%}.hero h1{font-size:clamp(38px,5vw,64px);line-height:1.05;margin:0 0 18px;max-width:680px}.hero p{font-size:20px;color:#d4dbe2;max-width:510px;line-height:1.5}.chips{display:flex;flex-wrap:wrap;gap:16px;margin:28px 0;color:#fff;font-weight:600;font-size:13px}.chips span:before{content:'✓';color:var(--orange);padding-right:7px}.btn{display:inline-block;background:var(--orange);color:#090909;padding:15px 22px;border:0;border-radius:7px;font-weight:800;cursor:pointer}.btn.alt{background:transparent;color:white;border:1px solid #a4a4a4;margin-left:8px}.categories{background:#141719;border-block:1px solid #272b2d}.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:17px;padding-bottom:17px}.catgrid div{font-size:14px;font-weight:700}.catgrid span{display:block;font-size:12px;font-weight:400;color:#b7bdc2;margin-top:5px}.section{padding:42px 0}.section h2{font-size:32px;margin:0 0 8px}.muted{color:#b5bec5}.layout{display:grid;grid-template-columns:2.2fr 1fr;gap:25px;margin-top:23px}.sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.tile,.calculator{border:1px solid #292f33;background:linear-gradient(150deg,#1c2023,#0d1012);border-radius:12px;padding:20px}.tile h3{font-size:32px;margin:0 0 18px}.bin{height:100px;background:var(--orange);clip-path:polygon(6% 8%,100% 8%,90% 92%,20% 92%);display:flex;align-items:center;justify-content:center;color:#111;font-weight:900;margin:16px 0 25px}.tile p{font-size:14px;min-height:58px;color:#cdd1d4}.tile .btn{width:100%;text-align:center}.calculator h3{font-size:26px;margin:0 0 6px}.calculator label{display:block;font-size:13px;font-weight:bold;margin-top:17px}.calculator select,.calculator input,.calculator textarea{width:100%;background:#272e32;border:1px solid #40484d;border-radius:7px;color:#fff;padding:13px;margin-top:6px;font:inherit}.calculator .btn{width:100%;margin-top:18px}.notice{font-size:13px;color:#ffbd88;line-height:1.5}.foot{padding:24px 0;border-top:1px solid #252a2e;color:#aab1b8;font-size:13px}.ai{position:fixed;bottom:18px;right:18px;background:var(--orange);color:#0c0c0c;border-radius:40px;padding:15px 20px;font-weight:800;box-shadow:0 8px 30px #0009;z-index:10}.ai-panel{display:none;position:fixed;right:18px;bottom:80px;background:#1b2024;color:#fff;padding:20px;border:1px solid #50565b;border-radius:12px;max-width:320px;z-index:10}.ai-panel:target{display:block}.ai-panel a{color:#ff8b2e}@media(max-width:950px){.links{display:none}.hero{background:linear-gradient(90deg,#080a0de8,#080a0d88),url('assets/man-truck.jpg') center/cover no-repeat}.layout{grid-template-columns:1fr}}@media(max-width:650px){.hero{min-height:540px}.catgrid,.sizes{grid-template-columns:1fr 1fr}.hero p{font-size:17px}.sizes{grid-template-columns:1fr}.btn.alt{margin:10px 0 0}.logo{font-size:23px}}

/* Sittkonti container cards v2 — phone-free, responsive */
.layout{grid-template-columns:minmax(0,3fr) minmax(245px,1fr)}
.sizes-new{gap:14px}
.container-card{padding:16px;display:flex;flex-direction:column;min-width:0}
.container-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;min-height:58px}
.container-head h3{font-size:clamp(28px,3vw,42px);margin:0}
.flap-tag{background:#ff7900;color:#101010;font-size:10px;line-height:1.2;border-radius:8px;padding:8px;text-align:center}
.container-art{position:relative;height:135px;margin:12px 0 8px;perspective:400px}
.container-rim{position:absolute;top:8px;left:6%;width:86%;height:22px;background:#ff7900;transform:skew(-12deg);border:3px solid #fa9c36}
.container-shell{position:absolute;left:10%;top:28px;width:78%;height:95px;background:linear-gradient(155deg,#242a2e,#050607);border-top:18px solid #f87900;clip-path:polygon(0 0,100% 0,90% 100%,12% 100%);display:grid;place-items:center}
.container-shell b{color:#ff7900;font-size:clamp(12px,1.4vw,19px);white-space:nowrap}
.container-flap{position:absolute;right:0;bottom:5px;width:34%;height:47px;background:#f87900;transform:skewY(-16deg);border:2px solid #ffae53;box-shadow:0 5px 0 #733000}
.dimensions{color:#fff;font-weight:700;font-size:12px;text-align:center;line-height:1.6;min-height:44px}
.features{padding:0;list-style:none;margin:12px 0 18px;flex:1}
.features li{font-size:13px;color:#e6e6e6;line-height:1.5;margin:7px 0}
.features li:before{content:"✓";color:#ff7900;font-weight:900;margin-right:8px}
.container-card .btn{margin-top:auto}
@media(max-width:1100px){.layout{grid-template-columns:1fr}}
@media(max-width:680px){.sizes-new{grid-template-columns:1fr}.container-art{height:165px}.container-shell{height:115px}.container-shell b{font-size:20px}.container-head h3{font-size:40px}}

.container-photo{height:175px;margin:10px 0;overflow:hidden;border-radius:9px;background:#141719}
.container-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:680px){.container-photo{height:220px}}

.calculator .price-result{margin:18px 0;padding:16px;background:#171b1e;border:1px solid #ef920c;border-radius:12px}.calculator .compare{color:#c6c6c6;font-size:14px}.calculator del{color:#a8a8a8}.calculator .new-price-label{margin-top:12px;font-size:14px}.calculator .new-price{font-size:29px;font-weight:800;color:#ff9c00}.calculator .gross-price{margin-top:8px;font-size:16px}.calculator .discount{color:#9dd890;margin-top:8px}.calculator .price-footnote{font-size:11px;line-height:1.5;color:#bbb;margin-top:14px}.calculator select{width:100%;max-width:100%}

/* 2026-10-25: mobile-friendly container dimensions and three categories */
.catgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.container-photo{height:auto;aspect-ratio:4/3;overflow:visible}
.container-photo img{width:100%;height:100%;object-fit:contain}
.dimensions{font-size:clamp(13px,1.15vw,16px);line-height:1.55;min-height:0;padding:12px 6px;margin:5px 0 12px;background:#22282c;border:1px solid #424a4f;border-radius:8px;overflow-wrap:anywhere}
@media(max-width:650px){.catgrid{grid-template-columns:1fr;gap:15px}.container-photo{height:auto;aspect-ratio:4/3}.dimensions{font-size:16px}}