/* ============================================================ dv-home.css - DopeVill homepage v2 (IZOLALT) Minden szabaly a .dv-home gyoker ala scope-olva: a tema tobbi oldalara (archiv, single-product) NEM szivarog at. Dark mode: html.dark-mode .dv-home (a meglevo globalis toggle). Font: Saira + IBM Plex Mono (mar self-hostolt) - nincs Google Fonts. Ikonok: Phosphor (kulon enqueue). ============================================================ */ .dv-home, .dv-home *, .dv-home *::before, .dv-home *::after{box-sizing:border-box} .dv-home{position:relative; min-height:100vh} .dv-home{--dv-bg:#F5F6F5; --dv-surface:#FFFFFF; --dv-raised:#FAFBFA; --dv-text:#14171A; --dv-muted:#5B6166; --dv-faint:#878D92; --dv-border:#E2E4E2; --dv-border-strong:#CBD0CB; --dv-lime:#C8D400; --dv-lime-ink:#5E6700; --dv-on-lime:#14171A; --dv-ok:#3C7D2E; --dv-ok-bg:#EAF3E6; --dv-warn:#9A6B00; --dv-warn-bg:#FBF1DC; --dv-err:#B0322B; --dv-err-bg:#F8E7E5; --dv-focus:#14171A; --dv-radius:12px; --dv-radius-lg:16px; --sp-1:6px; --sp-2:10px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px; --sp-7:72px; --dv-shadow-1:0 1px 2px rgba(20,23,26,.06), 0 1px 1px rgba(20,23,26,.04); --dv-shadow-2:0 6px 18px rgba(20,23,26,.10), 0 2px 6px rgba(20,23,26,.06); --dv-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --dv-display:"Saira", system-ui, sans-serif; --dv-body:"Saira", system-ui, sans-serif; --dv-head-h:64px;} html.dark-mode .dv-home{--dv-bg:#14171A; --dv-surface:#1B1F22; --dv-raised:#22272B; --dv-text:#F0F2F0; --dv-muted:#9AA0A4; --dv-faint:#787E82; --dv-border:#2C3236; --dv-border-strong:#3A4146; --dv-lime:#C8D400; --dv-lime-ink:#C8D400; --dv-on-lime:#14171A; --dv-ok:#8FD27A; --dv-ok-bg:#1E2A1A; --dv-warn:#E3B45A; --dv-warn-bg:#2A2310; --dv-err:#E88A82; --dv-err-bg:#2A1715; --dv-focus:#F0F2F0; --dv-shadow-1:0 1px 2px rgba(0,0,0,.4); --dv-shadow-2:0 10px 30px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.4);} .dv-home *{box-sizing:border-box} .dv-home{margin:0} .dv-home{background:var(--dv-bg); color:var(--dv-text); font-family:var(--dv-body); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;} .dv-home .wrap{max-width:1360px; margin:0 auto; padding:0 20px} .dv-home a{color:inherit; text-decoration:none} .dv-home button{font-family:inherit; cursor:pointer} .dv-home :focus-visible{outline:2px solid var(--dv-focus); outline-offset:2px; border-radius:10px} .dv-home .ph{line-height:1; vertical-align:middle} .dv-home .hdr{position:sticky; top:0; z-index:60; height:var(--dv-head-h); background:var(--dv-surface); border-bottom:1px solid var(--dv-border); display:flex; align-items:center;} .dv-home .hdr .wrap{display:flex; align-items:center; gap:14px; width:100%} .dv-home .cat-btn{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; background:var(--dv-text); color:var(--dv-surface); border:none; border-radius:var(--dv-radius); font-family:var(--dv-display); font-weight:600; font-size:14px; letter-spacing:.01em; white-space:nowrap;} .dv-home .cat-btn:hover{opacity:.92} .dv-home .cat-btn .ph{font-size:18px} .dv-home .brand{font-family:var(--dv-display); font-weight:800; font-size:21px; letter-spacing:-.02em; white-space:nowrap} .dv-home .brand b{color:var(--dv-lime-ink)} .dv-home .hdr-search{flex:1; min-width:0; position:relative} .dv-home .hdr-search input{width:100%; height:40px; padding:0 14px 0 40px; background:var(--dv-raised); border:1px solid var(--dv-border-strong); border-radius:var(--dv-radius); color:var(--dv-text); font-size:14px;} .dv-home .hdr-search input::placeholder{color:var(--dv-faint)} .dv-home .hdr-search .ph{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--dv-muted); font-size:17px; pointer-events:none} .dv-home .hdr-tools{display:flex; align-items:center; gap:8px} .dv-home .toggle{display:inline-flex; border:1px solid var(--dv-border-strong); border-radius:var(--dv-radius); overflow:hidden; background:var(--dv-raised); height:40px;} .dv-home .toggle button{border:none; background:transparent; color:var(--dv-muted); font-weight:600; font-size:12.5px; padding:0 11px; letter-spacing:.02em;} .dv-home .toggle button[aria-pressed="true"]{background:var(--dv-lime); color:var(--dv-on-lime)} .dv-home .icon-btn{width:40px; height:40px; display:inline-grid; place-items:center; position:relative; background:var(--dv-raised); border:1px solid var(--dv-border-strong); border-radius:var(--dv-radius); color:var(--dv-text); font-size:19px;} .dv-home .icon-btn:hover{border-color:var(--dv-text)} .dv-home .cart-count{position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; background:var(--dv-lime); color:var(--dv-on-lime); border-radius:10px; font-family:var(--dv-mono); font-size:11px; font-weight:600; display:grid; place-items:center;} .dv-home .mega{position:absolute; top:var(--dv-head-h); left:0; right:0; z-index:55; background:var(--dv-surface); border-bottom:1px solid var(--dv-border); box-shadow:var(--dv-shadow-2); display:none;} .dv-home .mega[data-open="true"]{display:block} .dv-home .mega .wrap{display:grid; grid-template-columns:280px 1fr; min-height:340px; padding:0} .dv-home .mega-l{border-right:1px solid var(--dv-border); padding:14px 0} .dv-home .mega-l a{display:flex; align-items:center; gap:11px; padding:9px 20px; font-size:14px; font-weight:500; color:var(--dv-text); border-left:2px solid transparent;} .dv-home .mega-l a .ph{font-size:19px; color:var(--dv-muted); width:20px} .dv-home .mega-l a:hover, .dv-home .mega-l a[aria-current="true"]{background:var(--dv-raised); border-left-color:var(--dv-lime)} .dv-home .mega-l a:hover .ph, .dv-home .mega-l a[aria-current="true"] .ph{color:var(--dv-lime-ink)} .dv-home .mega-r{padding:20px 24px} .dv-home .mega-r h4{font-family:var(--dv-display); font-size:13px; font-weight:700; margin:0 0 10px; color:var(--dv-muted)} .dv-home .mega-cols{columns:3; column-gap:28px} .dv-home .mega-cols a{display:block; padding:5px 0; font-size:13.5px; color:var(--dv-text); break-inside:avoid} .dv-home .mega-cols a:hover{color:var(--dv-lime-ink)} .dv-home .hero{padding:var(--sp-5) 0 var(--sp-6)} .dv-home .hero-head{max-width:720px; margin-bottom:var(--sp-4)} .dv-home .hero-head h1{font-family:var(--dv-display); font-weight:700; font-size:clamp(26px,3.4vw,40px); line-height:1.08; letter-spacing:-.02em; margin:0 0 8px;} .dv-home .hero-head p{margin:0; color:var(--dv-muted); font-size:15.5px; max-width:560px} .dv-home .hero-main{display:grid; grid-template-columns:1.65fr 1fr; gap:var(--sp-4); align-items:stretch} .dv-home .search{position:relative} .dv-home .hero-upload{background:var(--dv-surface); border:1px solid var(--dv-border); border-radius:var(--dv-radius); padding:22px; display:flex; flex-direction:column; box-shadow:var(--dv-shadow-1);} .dv-home .up-ico{width:44px; height:44px; border-radius:var(--dv-radius); background:var(--dv-lime); color:var(--dv-on-lime); display:grid; place-items:center; font-size:24px; margin-bottom:14px} .dv-home .hero-upload h3{font-family:var(--dv-display); font-weight:700; font-size:19px; margin:0 0 8px; letter-spacing:-.01em} .dv-home .hero-upload p{margin:0 0 16px; color:var(--dv-muted); font-size:14px} .dv-home .dropzone{flex:1; min-height:118px; border:1.5px dashed var(--dv-border-strong); border-radius:var(--dv-radius); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; background:var(--dv-raised); margin-bottom:14px; padding:16px;} .dv-home .dropzone:hover{border-color:var(--dv-lime-ink)} .dv-home .dropzone .ph{font-size:30px; color:var(--dv-faint)} .dv-home .dropzone span{font-size:13.5px; font-weight:500; color:var(--dv-text)} .dv-home .dropzone small{font-family:var(--dv-mono); font-size:11px; color:var(--dv-faint); text-transform:uppercase; letter-spacing:.04em} .dv-home .hero-upload .b2b-cta{align-self:stretch; justify-content:center} .dv-home .search-box{display:flex; align-items:center; gap:12px; height:62px; padding:0 8px 0 18px; background:var(--dv-surface); border:2px solid var(--dv-text); border-radius:var(--dv-radius); box-shadow:var(--dv-shadow-1);} .dv-home .search-box .ph-magnifying-glass{font-size:24px; color:var(--dv-text)} .dv-home .search-box input{flex:1; min-width:0; height:100%; border:none; background:transparent; color:var(--dv-text); font-size:17px; font-family:var(--dv-body);} .dv-home .search-box input::placeholder{color:var(--dv-faint)} .dv-home .search-go{height:46px; padding:0 20px; border:none; border-radius:var(--dv-radius); background:var(--dv-lime); color:var(--dv-on-lime); font-family:var(--dv-display); font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:7px;} .dv-home .search-go:hover{filter:brightness(.95)} .dv-home .search-go:active{transform:translateY(1px)} .dv-home .panel{margin-top:10px; background:var(--dv-surface); border:1px solid var(--dv-border-strong); border-radius:var(--dv-radius); box-shadow:var(--dv-shadow-2); overflow:hidden;} .dv-home .panel-chips{display:flex; flex-wrap:wrap; gap:7px; padding:14px 16px; border-bottom:1px solid var(--dv-border)} .dv-home .chip{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:1px solid var(--dv-border-strong); border-radius:999px; background:var(--dv-raised); color:var(--dv-text); font-size:12.5px; font-weight:500; white-space:nowrap;} .dv-home .chip:hover{border-color:var(--dv-text)} .dv-home .chip[data-on="true"]{background:var(--dv-lime); color:var(--dv-on-lime); border-color:var(--dv-lime)} .dv-home .chip .ph{font-size:14px; color:var(--dv-muted)} .dv-home .chip[data-on="true"] .ph{color:var(--dv-on-lime)} .dv-home .chip-label{font-family:var(--dv-mono); font-size:11px; color:var(--dv-faint); letter-spacing:.04em; align-self:center; margin-right:2px; text-transform:uppercase} .dv-home .popular{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:11px 16px; border-bottom:1px solid var(--dv-border)} .dv-home .popular .lab{font-size:12.5px; color:var(--dv-muted)} .dv-home .pop-q{font-family:var(--dv-mono); font-size:12.5px; color:var(--dv-text); padding:3px 9px; border-radius:10px; background:var(--dv-raised)} .dv-home .pop-q:hover{background:var(--dv-lime); color:var(--dv-on-lime)} .dv-home .panel-grid{display:grid; grid-template-columns:248px 1fr} .dv-home .pcol{padding:12px 8px} .dv-home .pcol.cats{border-right:1px solid var(--dv-border)} .dv-home .pcol h5{font-family:var(--dv-display); font-size:11.5px; font-weight:700; color:var(--dv-faint); letter-spacing:.06em; text-transform:uppercase; margin:4px 10px 8px} .dv-home .cat-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:10px; font-size:13.5px} .dv-home .cat-row:hover{background:var(--dv-raised)} .dv-home .cat-row .ph-caret-right{color:var(--dv-faint); font-size:15px} .dv-home .cat-row .cnt{font-family:var(--dv-mono); font-size:11.5px; color:var(--dv-faint)} .dv-home .res-row{display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px} .dv-home .res-row:hover{background:var(--dv-raised)} .dv-home .res-thumb{width:42px; height:42px; flex:none; border-radius:10px; background:var(--dv-bg); border:1px solid var(--dv-border); display:grid; place-items:center; overflow:hidden} .dv-home .res-thumb img{width:100%; height:100%; object-fit:contain} .dv-home .res-thumb .ph{color:var(--dv-faint); font-size:18px} .dv-home .res-main{flex:1; min-width:0} .dv-home .res-name{font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .dv-home .res-meta{display:flex; gap:10px; align-items:center; margin-top:2px} .dv-home .res-sku{font-family:var(--dv-mono); font-size:11.5px; color:var(--dv-muted)} .dv-home .res-stock{font-size:11.5px; color:var(--dv-ok); display:inline-flex; align-items:center; gap:4px} .dv-home .res-stock .ph{font-size:13px} .dv-home .res-price{font-family:var(--dv-mono); font-weight:600; font-size:14px; white-space:nowrap} .dv-home .res-price small{display:block; font-weight:400; font-size:10.5px; color:var(--dv-faint); text-align:right} .dv-home .panel-empty{padding:34px 20px; text-align:center; color:var(--dv-muted)} .dv-home .panel-empty .ph{font-size:30px; color:var(--dv-faint); display:block; margin-bottom:8px} .dv-home .panel-empty b{color:var(--dv-text); font-weight:600} .dv-home .section{padding:var(--sp-6) 0} .dv-home .section-h{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:var(--sp-4)} .dv-home .section-h h2{font-family:var(--dv-display); font-weight:700; font-size:21px; letter-spacing:-.01em; margin:0} .dv-home .section-h a{font-size:13.5px; color:var(--dv-lime-ink); font-weight:600; display:inline-flex; align-items:center; gap:5px} .dv-home .section-h a:hover{text-decoration:underline} .dv-home .cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3)} .dv-home .cat-tile{display:flex; align-items:center; gap:13px; padding:16px; background:var(--dv-surface); border:1px solid var(--dv-border); border-radius:var(--dv-radius);} .dv-home .cat-tile:hover{border-color:var(--dv-text); box-shadow:var(--dv-shadow-1)} .dv-home .cat-ico{width:42px; height:42px; flex:none; border-radius:var(--dv-radius); background:var(--dv-raised); display:grid; place-items:center; color:var(--dv-text); font-size:22px} .dv-home .cat-tile:hover .cat-ico{background:var(--dv-lime); color:var(--dv-on-lime)} .dv-home .cat-tile .t{font-family:var(--dv-display); font-weight:600; font-size:14.5px; line-height:1.2} .dv-home .cat-tile .c{font-family:var(--dv-mono); font-size:11.5px; color:var(--dv-faint); margin-top:3px} .dv-home .toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:var(--sp-4)} .dv-home .toolbar .count{font-size:13.5px; color:var(--dv-muted)} .dv-home .toolbar .count b{color:var(--dv-text); font-family:var(--dv-mono); font-weight:600} .dv-home .toolbar .spacer{flex:1} .dv-home .facet{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px; font-size:12.5px; border:1px solid var(--dv-border-strong); border-radius:999px; background:var(--dv-surface); color:var(--dv-text);} .dv-home .facet:hover{border-color:var(--dv-text)} .dv-home .facet .ph{font-size:14px; color:var(--dv-muted)} .dv-home .facet[data-on="true"]{background:var(--dv-text); color:var(--dv-surface); border-color:var(--dv-text)} .dv-home .facet[data-on="true"] .ph{color:var(--dv-surface)} .dv-home .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3)} .dv-home .card{position:relative; display:flex; flex-direction:column; background:var(--dv-surface); border:1px solid var(--dv-border); border-radius:var(--dv-radius); overflow:hidden; transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;} .dv-home .card:hover{box-shadow:var(--dv-shadow-2); border-color:var(--dv-border-strong); transform:translateY(-2px)} .dv-home .card-top{display:flex; align-items:center; justify-content:space-between; padding:11px 12px 4px} .dv-home .brandname{font-family:var(--dv-display); font-weight:700; font-size:12px; letter-spacing:.04em; color:var(--dv-muted); text-transform:uppercase} .dv-home .cmp{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--dv-faint); user-select:none} .dv-home .cmp input{accent-color:var(--dv-lime-ink); width:14px; height:14px} /* FEHER kepcsempe egyseges 8px levegovel (2026-07-02 homecard fix — a fajl vegi 2026-07-01-es foltok IDE konszolidalva). object-fit !important: plugin bare-img cover ellen. */ .dv-home .card-media{position:relative; aspect-ratio:1/1; margin:2px 12px 8px; border-radius:10px; background:#fff; display:grid; grid-template:100%/100%; place-items:center; overflow:hidden; border:1px solid var(--dv-border); padding:8px; box-sizing:border-box} /* ^ grid-template:100%/100% KELL: enelkul az implicit sor a kep intrinsic magassagara no (grid-auto-rows:auto), es a hosszukas fotok height:100%-a a megnott sorhoz meretezodik → tullogas. */ .dv-home .card-media img{width:100% !important; height:100% !important; object-fit:contain !important; object-position:center; display:block; max-width:none; max-height:none; margin:0; padding:0} /* ^ width/height !important: kulso bare `img{height:auto !important}` (plugin/Woo global) ellen — e nelkul a portre kepek intrinsic aranyban tullognak es a place-items:center sem centraz. */ .dv-home .media-empty{display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--dv-faint); font-size:11.5px} .dv-home .media-empty .ph{font-size:30px} .dv-home .deal-tag{position:absolute; top:8px; left:8px; background:var(--dv-lime); color:var(--dv-on-lime); font-family:var(--dv-mono); font-weight:600; font-size:11px; padding:2px 7px; border-radius:10px;} .dv-home .card-body{padding:0 12px 12px; display:flex; flex-direction:column; flex:1} .dv-home .sku{font-family:var(--dv-mono); font-size:11.5px; color:var(--dv-muted); margin-bottom:5px} .dv-home .title{font-size:13.5px; font-weight:500; line-height:1.3; margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:35px} .dv-home .params{display:flex; flex-wrap:wrap; align-items:center; gap:0; margin-bottom:10px; min-height:20px} .dv-home .params span{font-family:var(--dv-mono); font-size:11.5px; color:var(--dv-text); padding:1px 9px; border-left:1px solid var(--dv-border-strong)} .dv-home .params span:first-child{padding-left:0; border-left:none} .dv-home .price-row{display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:auto; margin-bottom:10px} .dv-home .price-main{display:flex; flex-direction:column} .dv-home .price-net{font-family:var(--dv-mono); font-weight:600; font-size:19px; line-height:1.1; letter-spacing:-.01em} .dv-home .price-net .u{font-size:12px; color:var(--dv-muted); font-weight:400} .dv-home .price-sub{font-family:var(--dv-mono); font-size:11.5px; color:var(--dv-muted)} .dv-home .price-old{font-family:var(--dv-mono); font-size:11.5px; color:var(--dv-faint); text-decoration:line-through} .dv-home .good{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--dv-lime-ink)} .dv-home .good .ph{font-size:14px} .dv-home .stock{display:flex; align-items:center; gap:6px; font-size:12px; margin-bottom:4px} .dv-home .stock .ph{font-size:15px} .dv-home .stock.in{color:var(--dv-ok)} .dv-home .stock.order{color:var(--dv-warn)} .dv-home .stock.limited{color:var(--dv-warn)} .dv-home .deliv{font-size:11.5px; color:var(--dv-muted); margin-bottom:11px; display:flex; align-items:center; gap:6px} .dv-home .deliv .ph{font-size:14px} /* KOZOS explicit magassag (40px) a qty-vezerlon ES a Kosarba gombon — korabban a qty 38px belso + 1-1px border = 40px kulso volt az add 38px-e mellett (2px elcsuszas). */ .dv-home .buy{display:flex; align-items:stretch; gap:10px} .dv-home .qty{display:flex; align-items:center; height:40px; box-sizing:border-box; border:1px solid var(--dv-border-strong); border-radius:var(--dv-radius); overflow:hidden} .dv-home .qty button{width:36px; height:100%; border:0; padding:0; display:grid; place-items:center; line-height:1; background:var(--dv-surface); color:var(--dv-text); font-size:16px} .dv-home .qty button:hover{background:var(--dv-raised)} .dv-home .qty input{flex:1; min-width:0; width:36px; height:100%; border:0; padding:0; margin:0; text-align:center; line-height:38px; background:transparent; color:var(--dv-text); font-family:var(--dv-mono); font-size:15px; -moz-appearance:textfield; appearance:textfield} .dv-home .qty input::-webkit-outer-spin-button, .dv-home .qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0} .dv-home .add{flex:1; height:40px; box-sizing:border-box; border:none; border-radius:var(--dv-radius); background:var(--dv-lime); color:var(--dv-on-lime); font-family:var(--dv-display); font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; justify-content:center; gap:7px} .dv-home .add:hover{filter:brightness(.95)} .dv-home .add:active{transform:translateY(1px)} .dv-home .add.done{background:var(--dv-ok); color:#fff} .dv-home .add .ph{font-size:17px} .dv-home .sk{position:relative; overflow:hidden; background:var(--dv-raised); border-radius:10px} .dv-home .sk::after{content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation:sh 1.3s infinite} html.dark-mode .dv-home .sk::after{background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent)} @keyframes sh{100%{transform:translateX(100%)}} .dv-home .sk-line{height:11px; margin:7px 12px; border-radius:10px} .dv-home .sk-media{aspect-ratio:1/1; margin:2px 12px 8px} .dv-home .sk-btn{height:38px; margin:4px 12px 12px; border-radius:var(--dv-radius)} .dv-home .card-error{padding:26px 16px; text-align:center; color:var(--dv-muted)} .dv-home .card-error .ph{font-size:30px; color:var(--dv-err); display:block; margin-bottom:8px} .dv-home .card-error b{display:block; color:var(--dv-text); font-weight:600; margin-bottom:3px; font-size:13.5px} .dv-home .retry{margin-top:12px; height:34px; padding:0 14px; border:1px solid var(--dv-border-strong); border-radius:var(--dv-radius); background:var(--dv-surface); color:var(--dv-text); font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px} .dv-home .retry:hover{border-color:var(--dv-text)} .dv-home .b2b{background:var(--dv-surface); border:1px solid var(--dv-border); border-radius:var(--dv-radius); overflow:hidden} .dv-home .b2b-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:0} .dv-home .b2b-hero{padding:30px; border-right:1px solid var(--dv-border); display:flex; flex-direction:column} .dv-home .b2b-hero .ico{width:46px; height:46px; border-radius:var(--dv-radius); background:var(--dv-lime); color:var(--dv-on-lime); display:grid; place-items:center; font-size:26px; margin-bottom:16px} .dv-home .b2b-hero h3{font-family:var(--dv-display); font-weight:700; font-size:22px; margin:0 0 8px; letter-spacing:-.01em} .dv-home .b2b-hero p{margin:0 0 20px; color:var(--dv-muted); font-size:14.5px; max-width:420px} .dv-home .b2b-cta{align-self:flex-start; height:44px; padding:0 20px; border:none; border-radius:var(--dv-radius); background:var(--dv-lime); color:var(--dv-on-lime); font-family:var(--dv-display); font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:8px} .dv-home .b2b-cta:hover{filter:brightness(.95)} .dv-home .b2b-cta:active{transform:translateY(1px)} .dv-home .b2b-list{display:flex; flex-direction:column} .dv-home .b2b-item{display:flex; gap:14px; padding:18px 24px; border-bottom:1px solid var(--dv-border)} .dv-home .b2b-item:last-child{border-bottom:none} .dv-home .b2b-item .ico{width:38px; height:38px; flex:none; border-radius:var(--dv-radius); background:var(--dv-raised); display:grid; place-items:center; color:var(--dv-text); font-size:20px} .dv-home .b2b-item:hover .ico{color:var(--dv-lime-ink)} .dv-home .b2b-item h4{font-family:var(--dv-display); font-weight:600; font-size:15px; margin:0 0 3px} .dv-home .b2b-item p{margin:0; font-size:13px; color:var(--dv-muted)} .dv-home .why{display:grid; grid-template-columns:repeat(3,1fr); background:var(--dv-surface); border:1px solid var(--dv-border); border-radius:var(--dv-radius); overflow:hidden} .dv-home .why-item{display:flex; gap:14px; padding:20px 22px; border-left:1px solid var(--dv-border)} .dv-home .why-item:first-child{border-left:none} .dv-home .why-item .ico{width:38px; height:38px; flex:none; border-radius:var(--dv-radius); background:var(--dv-raised); display:grid; place-items:center; color:var(--dv-text); font-size:20px} .dv-home .why-item:hover .ico{color:var(--dv-lime-ink)} .dv-home .why-item h4{font-family:var(--dv-display); font-weight:600; font-size:15px; margin:0 0 3px} .dv-home .why-item p{margin:0; font-size:13px; color:var(--dv-muted)} .dv-home .ftr{border-top:1px solid var(--dv-border); margin-top:var(--sp-6); padding:var(--sp-5) 0; color:var(--dv-muted); font-size:13px} .dv-home .ftr .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap} .dv-home .ftr .brand{font-size:18px} .dv-home .ftr-note{max-width:520px} @media (max-width:1080px){ .dv-home .grid{grid-template-columns:repeat(3,1fr)} .dv-home .cat-grid{grid-template-columns:repeat(3,1fr)} } @media (max-width:820px){ .dv-home .hdr-search{display:none} /* minmax(0,1fr) KELL (mobilfix 2026-07-03): a sima 1fr min-erteke auto = a tartalom min-contentje -> a panel-grid 519px-re feszitette az oszlopot 390-es viewportnal, es minden (search-box, chipek) kilogott/vagodott. */ .dv-home .hero-main{grid-template-columns:minmax(0,1fr)} .dv-home .why{grid-template-columns:1fr} .dv-home .why-item{border-left:none; border-top:1px solid var(--dv-border)} .dv-home .why-item:first-child{border-top:none} .dv-home .grid{grid-template-columns:repeat(2,1fr)} .dv-home .cat-grid{grid-template-columns:repeat(2,1fr)} .dv-home .panel-grid{grid-template-columns:minmax(0,1fr)} .dv-home .pcol.cats{border-right:none; border-bottom:1px solid var(--dv-border)} /* mobil chipsav: vizszintesen gorgetheto egy sorban (webshop-standard minta, fuggoleges helyet sporol a nagy panelban) — mobilfix 2026-07-03 */ .dv-home .panel-chips, .dv-home .popular{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none} .dv-home .panel-chips::-webkit-scrollbar, .dv-home .popular::-webkit-scrollbar{display:none} .dv-home .panel-chips > *, .dv-home .popular > *{flex:0 0 auto; white-space:nowrap} .dv-home .mega .wrap{grid-template-columns:1fr} .dv-home .mega-l{border-right:none; border-bottom:1px solid var(--dv-border)} .dv-home .b2b-grid{grid-template-columns:1fr} .dv-home .b2b-hero{border-right:none; border-bottom:1px solid var(--dv-border)} .dv-home .mega-cols{columns:2} } @media (max-width:520px){ .dv-home .grid{grid-template-columns:1fr} .dv-home .cat-grid{grid-template-columns:1fr} .dv-home .brand{font-size:18px} /* search-box mobil (mobilfix 2026-07-03): auto magassag, a gomb nem zsugorodhat, min. 44px erintheto; az input nem megy 0 ala es 16px (iOS zoom ellen) */ .dv-home .search-box{height:auto; min-height:54px; padding:6px 8px 6px 14px; flex-direction:row; align-items:center} .dv-home .search-box input{min-width:0; flex:1 1 auto; font-size:16px; height:44px} .dv-home .search-go{flex:0 0 auto; height:44px; min-height:44px; padding:0 16px} } @media (prefers-reduced-motion:reduce){ .dv-home *{transition:none !important; animation:none !important} } /* ============================================================ HOME v2 PREVIEW - szulo-tema (style.css) szivargas semlegesitese ------------------------------------------------------------ A style.css a get_stylesheet_uri()-n keresztul MINDEN oldalon betolt (functions.php:16). Az a fajl valojaban egy PHP/HTML sablon inline