/* Theme Name: Játékdepó Theme URI: https://jatekdepo.hu Description: A Játékdepó saját gyerektémája GeneratePress alapon. Elementor nélkül, kézzel írt CSS-sel — ezért tölt be töredék annyi stílust, mint a régi XStore + Elementor páros. A színek a bolt logójából származnak. Author: Játékdepó Template: generatepress Version: 1.0.0 Text Domain: jatekdepo */ /* ========================================================================= 1. BETŰTÍPUSOK — helyben tárolva, magyar karakterkészletre szűkítve A Google CDN-ről töltött betű renderelést blokkoló KÜLSŐ kérés lenne (a régi oldalon 134 KB volt, lásd dokumentáció 22.10). Ez itt 31,7 KB, és a saját domainünkről jön. ========================================================================= */ @font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/baloo2-700.woff2') format('woff2')} @font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/nunito-400.woff2') format('woff2')} @font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/nunito-700.woff2') format('woff2')} /* ========================================================================= 2. DIZÁJN TOKENEK Minden szín a logóból: a mozdony kékje, a "d" zöldje, az "e" narancsa, az "o" sárgája. Ezért néz ki egy családnak a bolt és a logó. ========================================================================= */ :root{ /* Márkaszínek */ --jd-navy: #0B3A73; --jd-blue: #2E9BD6; --jd-blue-dark: #1B7BB0; /* gombok, árnyékok — nem szöveg */ --jd-link: #0F4C81; /* szöveges link: 8,4:1 a krém sávon is */ --jd-green: #5FAE2E; --jd-orange: #F2960F; --jd-red: #E0491A; --jd-yellow: #FFC81E; --jd-pink: #EC5B8D; --jd-purple: #8B5CF6; /* Szöveg — mind WCAG AA fölött fehér háttéren */ --jd-ink: #14243D; /* 14,8:1 */ --jd-muted: #56657E; /* 6,1:1 */ --jd-price: #B23A12; /* 5,5:1 — a bright narancs csak dekoráció lehet */ /* Hátterek */ --jd-cream: #FFF8EC; --jd-sky: #EDF7FD; --jd-mint: #EEF9E8; --jd-blush: #FDF0F4; --jd-line: #E6EDF5; /* Formák — a kerekség adja a "gyerek" érzetet */ --jd-r-sm: 10px; --jd-r: 18px; --jd-r-lg: 26px; --jd-r-xl: 34px; --jd-pill: 999px; /* Árnyékok: színezettek, nem szürkék — így nem lesz "irodai" a kinézet */ --jd-shadow: 0 8px 24px -10px rgba(11,58,115,.28); --jd-shadow-lg: 0 18px 40px -14px rgba(11,58,115,.32); --jd-shadow-up: 0 -6px 20px -8px rgba(11,58,115,.18); --jd-wrap: 1600px; /* fejléc, kereső és termékrács UGYANEZT használja */ } /* ========================================================================= 3. ALAPOK ========================================================================= */ body{ font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--jd-ink); background:#fff; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,.jd-display{ font-family:'Baloo 2','Nunito',system-ui,sans-serif; font-weight:700; line-height:1.15; color:var(--jd-navy); letter-spacing:-.01em; } h1{font-size:clamp(1.9rem,4.5vw,3rem)} h2{font-size:clamp(1.5rem,3.2vw,2.15rem)} h3{font-size:clamp(1.1rem,2vw,1.35rem)} a{color:var(--jd-blue-dark);text-decoration:none} a:hover{color:var(--jd-navy)} img{max-width:100%;height:auto} /* Minden képnek legyen arány-helyfoglalása: e nélkül ugrál az oldal betöltés közben (CLS). Ezt az élesen külön hibaként kellett javítani. */ img[width][height]{height:auto} .jd-wrap{max-width:var(--jd-wrap);margin-inline:auto;padding-inline:20px} .jd-section{padding-block:clamp(36px,5vw,60px)} .jd-section--tint{background:var(--jd-sky)} .jd-section--cream{background:var(--jd-cream)} /* Szekciócím: aláhúzva egy vidám ecsetvonással */ .jd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap} .jd-head h2{margin:0;position:relative;padding-bottom:10px} .jd-head h2::after{ content:"";position:absolute;left:0;bottom:0;width:64px;height:6px;border-radius:var(--jd-pill); background:linear-gradient(90deg,var(--jd-yellow),var(--jd-orange)); } .jd-head__link{font-weight:700;color:var(--jd-blue-dark);white-space:nowrap} .jd-head__link::after{content:" →"} /* ========================================================================= 4. GOMBOK — kerek, "megnyomható" érzet ========================================================================= */ .jd-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1rem; padding:13px 26px;border-radius:var(--jd-pill);border:0;cursor:pointer; background:var(--jd-blue);color:#fff; box-shadow:0 5px 0 var(--jd-blue-dark); transition:transform .12s ease,box-shadow .12s ease,background .2s; text-align:center; } .jd-btn:hover{background:var(--jd-blue-dark);color:#fff;transform:translateY(2px);box-shadow:0 3px 0 var(--jd-navy)} .jd-btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--jd-navy)} .jd-btn--sun{background:var(--jd-orange);box-shadow:0 5px 0 #C87708;color:#fff} .jd-btn--sun:hover{background:#DB8408;box-shadow:0 3px 0 #A96406} .jd-btn--ghost{background:#fff;color:var(--jd-navy);box-shadow:0 0 0 2px var(--jd-line) inset} .jd-btn--ghost:hover{background:var(--jd-sky);color:var(--jd-navy);box-shadow:0 0 0 2px var(--jd-blue) inset} .jd-btn--sm{padding:9px 18px;font-size:.9rem} .jd-btn--block{display:flex;width:100%} /* ========================================================================= 5. FEJLÉC ========================================================================= */ .jd-topbar{ background:linear-gradient(90deg,var(--jd-navy),var(--jd-blue-dark),var(--jd-navy)); color:#fff;font-size:.85rem;font-weight:600; } .jd-topbar .jd-wrap{display:flex;gap:22px;justify-content:center;align-items:center;padding-block:8px;flex-wrap:wrap} .jd-topbar span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .jd-header{background:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px -6px rgba(11,58,115,.25)} .jd-header .jd-wrap{display:flex;align-items:center;gap:20px;padding-block:12px} .jd-logo{flex:0 0 auto;display:block;line-height:0} .jd-logo img{width:190px;aspect-ratio:800/322;height:auto;display:block} /* Kereső: nagy, kerek, barátságos */ .jd-search{flex:1 1 auto;max-width:540px;position:relative} .jd-search form{display:flex;align-items:center;background:var(--jd-sky);border-radius:var(--jd-pill); padding:5px 5px 5px 20px;border:2px solid transparent;transition:border-color .2s,background .2s} .jd-search form:focus-within{border-color:var(--jd-blue);background:#fff} .jd-search input[type=search]{flex:1;border:0;background:transparent;font:inherit;font-size:.95rem; padding:9px 0;color:var(--jd-ink);min-width:0} .jd-search input[type=search]:focus{outline:0} .jd-search input::placeholder{color:var(--jd-muted)} .jd-search button{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer; background:var(--jd-orange);color:#fff;display:grid;place-items:center;transition:background .2s} .jd-search button:hover{background:#DB8408} .jd-actions{flex:0 0 auto;display:flex;align-items:center;gap:6px;margin-left:auto} .jd-act{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;border-radius:var(--jd-r); color:var(--jd-navy);font-size:.72rem;font-weight:700;position:relative;transition:background .2s} .jd-act:hover{background:var(--jd-sky);color:var(--jd-navy)} .jd-act svg{width:24px;height:24px} .jd-act__count{position:absolute;top:2px;right:6px;min-width:19px;height:19px;padding:0 5px; background:var(--jd-red);color:#fff;border-radius:var(--jd-pill); font-size:.68rem;font-weight:700;display:grid;place-items:center;line-height:1} /* Kategória sáv */ .jd-catbar{background:var(--jd-navy)} .jd-catbar .jd-wrap{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;padding-block:0} .jd-catbar .jd-wrap::-webkit-scrollbar{display:none} .jd-catbar a{color:#fff;font-weight:700;font-size:.92rem;padding:13px 15px;white-space:nowrap; border-radius:var(--jd-r-sm) var(--jd-r-sm) 0 0;transition:background .2s} .jd-catbar a:hover,.jd-catbar a[aria-current]{background:rgba(255,255,255,.14);color:#fff} .jd-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--jd-navy); flex-direction:column;align-items:center;gap:2px;font-size:.7rem;font-weight:700;font-family:inherit} .jd-burger svg{width:24px;height:24px} /* ========================================================================= 6. HERO ========================================================================= */ .jd-hero{position:relative;background:linear-gradient(160deg,var(--jd-sky),#fff 60%);overflow:hidden} .jd-hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center; padding-block:clamp(28px,4vw,56px)} .jd-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--jd-yellow);color:#5A4300; font-weight:700;font-size:.85rem;padding:7px 16px;border-radius:var(--jd-pill);margin-bottom:16px} .jd-hero h1{margin:0 0 14px} .jd-hero h1 em{font-style:normal;color:var(--jd-orange)} .jd-hero p{font-size:1.1rem;color:var(--jd-muted);margin:0 0 26px;max-width:46ch} .jd-hero__cta{display:flex;gap:12px;flex-wrap:wrap} .jd-hero__art{position:relative} .jd-hero__art img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--jd-r-xl); box-shadow:var(--jd-shadow-lg)} /* Vidám színes pöttyök a hero mögé */ .jd-hero::before,.jd-hero::after{content:"";position:absolute;border-radius:50%;opacity:.5;pointer-events:none} .jd-hero::before{width:180px;height:180px;background:var(--jd-yellow);top:-60px;right:18%;opacity:.35} .jd-hero::after{width:120px;height:120px;background:var(--jd-green);bottom:-40px;left:-30px;opacity:.25} /* ========================================================================= 7. KATEGÓRIA CSEMPÉK — minden csempe más pasztell szín ========================================================================= */ .jd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px} .jd-tile{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; padding:22px 14px;border-radius:var(--jd-r-lg);background:var(--jd-sky); text-align:center;font-weight:700;color:var(--jd-navy);min-height:132px; transition:transform .16s ease,box-shadow .16s ease; } .jd-tile:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:var(--jd-shadow);color:var(--jd-navy)} .jd-tile__img{width:64px;height:64px;object-fit:contain} .jd-tile__emoji{font-size:2.5rem;line-height:1} .jd-tile__name{font-size:.95rem;line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .jd-tile__count{font-size:.78rem;font-weight:600;color:var(--jd-muted)} /* Színváltogatás, hogy ne legyen egyhangú */ .jd-tile:nth-child(6n+1){background:var(--jd-sky)} .jd-tile:nth-child(6n+2){background:var(--jd-mint)} .jd-tile:nth-child(6n+3){background:var(--jd-cream)} .jd-tile:nth-child(6n+4){background:var(--jd-blush)} .jd-tile:nth-child(6n+5){background:#F0EDFD} .jd-tile:nth-child(6n+6){background:#E8F6F6} /* ========================================================================= 8. ÉLETKOR PIRULÁK ========================================================================= */ .jd-ages{display:flex;flex-wrap:wrap;gap:10px} .jd-age{ display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--jd-pill); background:#fff;border:2px solid var(--jd-line);font-weight:700;color:var(--jd-navy); transition:all .16s ease; } .jd-age:hover{border-color:var(--jd-blue);background:var(--jd-blue);color:#fff;transform:translateY(-2px)} .jd-age__dot{width:10px;height:10px;border-radius:50%;background:var(--jd-orange);flex:0 0 auto} .jd-age:hover .jd-age__dot{background:var(--jd-yellow)} /* ========================================================================= 9. TERMÉKKÁRTYA ========================================================================= */ .jd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:20px} .jd-card{ position:relative;background:#fff;border-radius:var(--jd-r-lg);overflow:hidden; border:2px solid var(--jd-line);display:flex;flex-direction:column; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; } .jd-card:hover{transform:translateY(-6px);box-shadow:var(--jd-shadow-lg);border-color:var(--jd-blue)} .jd-card__media{position:relative;display:block;background:#fff;padding:12px} .jd-card__media img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;border-radius:var(--jd-r-sm)} .jd-card__body{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1} .jd-card__cat{font-size:.74rem;font-weight:700;color:var(--jd-muted);text-transform:uppercase;letter-spacing:.03em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jd-card__title{font-family:'Nunito',sans-serif;font-size:.95rem;font-weight:700;line-height:1.35;margin:0;color:var(--jd-ink); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em} .jd-card__title a{color:inherit} .jd-card__title a:hover{color:var(--jd-blue-dark)} .jd-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px} .jd-card__price{min-width:0;overflow-wrap:anywhere} .jd-card__price{font-family:'Baloo 2',sans-serif;font-size:1.2rem;font-weight:700;color:var(--jd-price)} .jd-card__price del{font-size:.85rem;color:var(--jd-muted);font-weight:400;margin-right:6px} .jd-card__price ins{text-decoration:none} /* Kosár gomb: kerek, ikonos */ .jd-card__add{width:44px;height:44px;border-radius:50%;background:var(--jd-green);color:#fff; display:grid;place-items:center;flex:0 0 auto;box-shadow:0 4px 0 #4A8A22;transition:transform .12s,box-shadow .12s} .jd-card__add:hover{color:#fff;transform:translateY(2px);box-shadow:0 2px 0 #4A8A22} .jd-card__add svg{width:21px;height:21px} .jd-card__add.loading{opacity:.6;pointer-events:none} .jd-card__add.added{background:var(--jd-blue);box-shadow:0 4px 0 var(--jd-blue-dark)} /* Matrica-jelvények */ .jd-badge{position:absolute;top:14px;left:14px;z-index:2;font-family:'Baloo 2',sans-serif;font-weight:700; font-size:.78rem;padding:5px 12px;border-radius:var(--jd-pill);color:#fff;transform:rotate(-4deg); box-shadow:0 3px 8px -2px rgba(0,0,0,.25)} .jd-badge--sale{background:var(--jd-red)} .jd-badge--new{background:var(--jd-green)} .jd-badge--out{background:var(--jd-muted);transform:none;left:auto;right:14px} /* Készlethiányos kártya halványabb */ .jd-card--out .jd-card__media img{opacity:.55;filter:grayscale(.4)} /* ========================================================================= 10. MESEHŐS / MÁRKA CSÚSZKA ========================================================================= */ .jd-rail{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none} .jd-rail::-webkit-scrollbar{display:none} .jd-rail>*{scroll-snap-align:start;flex:0 0 auto} .jd-hero-chip{width:132px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px; padding:16px 10px;border-radius:var(--jd-r-lg);background:#fff;border:2px solid var(--jd-line); font-weight:700;color:var(--jd-navy);font-size:.87rem;transition:all .16s ease} .jd-hero-chip:hover{transform:translateY(-5px);border-color:var(--jd-pink);box-shadow:var(--jd-shadow);color:var(--jd-navy)} .jd-hero-chip img{width:84px;height:84px;object-fit:cover;border-radius:50%;border:3px solid var(--jd-blush)} /* ========================================================================= 11. BIZALMI SÁV ========================================================================= */ .jd-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px} .jd-trust__item{display:flex;align-items:center;gap:14px;background:#fff;border-radius:var(--jd-r); padding:18px 20px;border:2px solid var(--jd-line)} .jd-trust__ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;font-size:1.5rem} .jd-trust__t{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--jd-navy);line-height:1.2} .jd-trust__d{font-size:.85rem;color:var(--jd-muted);line-height:1.35} /* ========================================================================= 12. LÁBLÉC ========================================================================= */ .jd-footer{background:var(--jd-navy);color:#C9DCF0;margin-top:50px;position:relative} /* Hullámos elválasztó — ettől lesz "mesés" a lezárás */ .jd-footer__wave{display:block;width:100%;height:44px} .jd-footer__wave path{fill:var(--jd-navy)} .jd-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;padding-block:12px 40px} .jd-footer h3{color:#fff;font-size:1.05rem;margin:0 0 14px} .jd-footer a{color:#C9DCF0} .jd-footer a:hover{color:var(--jd-yellow)} .jd-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.93rem} .jd-footer__logo img{width:190px;aspect-ratio:800/322;height:auto;background:#fff;border-radius:var(--jd-r);padding:10px} .jd-footer__about{font-size:.92rem;line-height:1.6;margin:14px 0 0} .jd-footer__bottom{border-top:1px solid rgba(255,255,255,.14);padding-block:18px;font-size:.87rem; display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} /* ========================================================================= 13. MOBIL ALSÓ SÁV ========================================================================= */ .jd-tabbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:120;background:#fff; box-shadow:var(--jd-shadow-up);padding-bottom:env(safe-area-inset-bottom)} .jd-tabbar__in{display:grid;grid-template-columns:repeat(4,1fr)} .jd-tabbar a,.jd-tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px; font-size:.68rem;font-weight:700;color:var(--jd-navy);background:none;border:0;cursor:pointer; font-family:inherit;position:relative} .jd-tabbar svg{width:23px;height:23px} .jd-tabbar .jd-act__count{top:2px;right:calc(50% - 22px)} /* Mobil menü lap */ /* Zárva `display:none`, hogy a -340px-re kitolt panel se okozzon vízszintes görgetést. */ .jd-drawer{display:none;position:fixed;inset:0;z-index:200;opacity:0;transition:opacity .2s} .jd-drawer.is-open{display:block;opacity:1} .jd-drawer__bg{position:absolute;inset:0;background:rgba(11,36,61,.5)} .jd-drawer__panel{position:absolute;left:0;top:0;bottom:0;width:min(86vw,340px);background:#fff; padding:18px;overflow-y:auto;transform:translateX(-100%);transition:transform .24s ease; display:flex;flex-direction:column;gap:6px} .jd-drawer.is-open .jd-drawer__panel{transform:none} .jd-drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .jd-drawer__close{background:var(--jd-sky);border:0;width:40px;height:40px;border-radius:50%;cursor:pointer; font-size:1.3rem;color:var(--jd-navy);display:grid;place-items:center} .jd-drawer nav a{display:block;padding:13px 14px;border-radius:var(--jd-r-sm);font-weight:700;color:var(--jd-navy)} .jd-drawer nav a:hover{background:var(--jd-sky)} /* ========================================================================= 14. WOOCOMMERCE ÁLTALÁNOS ========================================================================= */ .woocommerce-message,.woocommerce-info,.woocommerce-error{ border-radius:var(--jd-r);border:0;background:var(--jd-sky);color:var(--jd-ink); padding:15px 20px;border-left:5px solid var(--jd-blue);list-style:none} .woocommerce-error{background:#FDECEC;border-left-color:var(--jd-red)} .woocommerce-message{background:var(--jd-mint);border-left-color:var(--jd-green)} .jd-breadcrumb{font-size:.86rem;color:var(--jd-muted);padding-block:16px} .jd-breadcrumb a{color:var(--jd-muted)} .jd-breadcrumb a:hover{color:var(--jd-blue-dark)} /* Termékoldal */ .jd-product{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-block:20px 40px} .jd-product__gallery img{width:100%;border-radius:var(--jd-r-lg);border:2px solid var(--jd-line)} .jd-product h1{margin:0 0 10px} .jd-product .price{font-family:'Baloo 2',sans-serif;font-size:1.9rem;font-weight:700;color:var(--jd-price);display:block;margin-bottom:18px} .jd-product .price del{font-size:1.1rem;color:var(--jd-muted);font-weight:400} .jd-product .price ins{text-decoration:none} .jd-specs{width:100%;border-collapse:collapse;margin-top:22px;font-size:.93rem} .jd-specs th,.jd-specs td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--jd-line)} .jd-specs th{color:var(--jd-muted);font-weight:700;width:44%} /* Lapozó */ .jd-pager{display:flex;gap:8px;justify-content:center;padding-block:34px;flex-wrap:wrap} .jd-pager a,.jd-pager span{min-width:44px;height:44px;padding:0 14px;border-radius:var(--jd-pill); display:grid;place-items:center;font-weight:700;background:#fff;border:2px solid var(--jd-line);color:var(--jd-navy)} .jd-pager .current{background:var(--jd-blue);border-color:var(--jd-blue);color:#fff} .jd-pager a:hover{border-color:var(--jd-blue);color:var(--jd-blue-dark)} /* Üres állapot */ .jd-empty{text-align:center;padding:60px 20px} .jd-empty__emoji{font-size:3.5rem;display:block;margin-bottom:12px} /* ========================================================================= 15. RESZPONZÍV ========================================================================= */ @media (max-width:1024px){ .jd-hero__inner{grid-template-columns:1fr;gap:24px} .jd-hero__art{order:-1} .jd-footer__grid{grid-template-columns:1fr 1fr;gap:26px} .jd-product{grid-template-columns:1fr;gap:26px} } @media (max-width:860px){ .jd-catbar{display:none} .jd-burger{display:flex} .jd-header .jd-wrap{gap:12px;flex-wrap:wrap} .jd-logo img{width:150px} .jd-search{order:3;flex:1 0 100%;max-width:none} .jd-act--account{display:none} .jd-tabbar{display:block} body{padding-bottom:64px} .jd-topbar .jd-wrap{gap:14px;font-size:.78rem} .jd-topbar span:nth-child(3){display:none} } @media (max-width:600px){ .jd-grid{grid-template-columns:repeat(2,1fr);gap:12px} .jd-tiles{grid-template-columns:repeat(3,1fr);gap:10px} .jd-tile{min-height:112px;padding:16px 8px} .jd-tile__emoji{font-size:2rem} .jd-tile__name{font-size:.8rem} .jd-tile__count{display:none} .jd-footer__grid{grid-template-columns:1fr;gap:22px} .jd-card__body{padding:0 12px 12px} .jd-card__price{font-size:1.05rem} .jd-card__add{width:40px;height:40px} .jd-hero::before{display:none} } /* Mozgáscsökkentés kérésre — kisegítő lehetőség */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} .jd-card:hover,.jd-tile:hover,.jd-hero-chip:hover{transform:none} } /* Billentyűzetes fókusz jól látható legyen */ :focus-visible{outline:3px solid var(--jd-orange);outline-offset:2px;border-radius:4px} /* Ugrás a tartalomra */ /* Az ugrás-link elrejtése clip-tel, NEM -9999px-szel: az utóbbi vízszintes görgetést okozott az oldalon (a scrollWidth 8 px-szel nagyobb lett). */ .jd-skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); white-space:nowrap;background:var(--jd-navy);color:#fff;padding:12px 20px; border-radius:0 0 var(--jd-r) 0;z-index:999;font-weight:700} .jd-skip:focus{position:fixed;left:0;top:0;width:auto;height:auto;clip-path:none;color:#fff} /* ========================================================================= 16. A GENERATEPRESS KONTÉNER FELOLDÁSA A GP alapból 1200 px-es, középre igazított dobozba teszi a tartalmat, és a .site-content flex konténer. Nekünk viszont TELJES SZÉLESSÉGŰ színes sávok kellenek (.jd-section--tint / --cream), a középre igazítást pedig a .jd-wrap végzi. A flex miatt ráadásul a
túl is nőtt a szülőjén, és 8 px vízszintes görgetést okozott. Oldalsáv nincs sehol a boltban, ezért a flex elrendezésre nincs szükség. ========================================================================= */ .site.grid-container,.site.container{max-width:none;width:100%;margin:0;padding:0} .site-content{display:block;padding:0} .site-content .content-area,.site-main{width:100%;max-width:none;margin:0;padding:0} #page{overflow-x:clip} /* ========================================================================= 17. VÉGSŐ BIZTOSÍTÉK Ha bármelyik beágyazott tartalom (rövidkód, beszállítói HTML) szélesebb lenne a képernyőnél, az a saját dobozában görögjön — a LAP soha. ========================================================================= */ html{overflow-x:hidden} .jd-brands__grid,.jd-rail{max-width:100%} /* ========================================================================= 18. BOLT / ARCHÍVUM ========================================================================= */ .jd-shophead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px; flex-wrap:wrap;padding-block:6px 26px;border-bottom:2px solid var(--jd-line);margin-bottom:26px} .jd-shophead h1{margin:0} .jd-shophead__desc{color:var(--jd-muted);margin-top:8px;max-width:70ch} .jd-shophead__tools{display:flex;align-items:center;gap:12px} /* A rendezés legördülő: kerek, márkaszínű — nem rendszer-alapértelmezett doboz */ .woocommerce-ordering select,.jd-shophead select{ appearance:none;-webkit-appearance:none; font:inherit;font-weight:700;color:var(--jd-navy);cursor:pointer; background:var(--jd-sky);border:2px solid transparent;border-radius:var(--jd-pill); padding:11px 42px 11px 20px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B3A73' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center; } .woocommerce-ordering select:focus{outline:0;border-color:var(--jd-blue);background-color:#fff} .jd-shopgrid{padding-bottom:10px} .woocommerce-result-count{color:var(--jd-muted);font-size:.9rem;margin:0} /* A WooCommerce alap lapozója a mi pirula-stílusunkkal */ .woocommerce-pagination ul{display:flex;gap:8px;justify-content:center;list-style:none;margin:0;padding:34px 0;flex-wrap:wrap} .woocommerce-pagination li{list-style:none} .woocommerce-pagination a,.woocommerce-pagination span{ min-width:46px;height:46px;padding:0 16px;border-radius:var(--jd-pill); display:grid;place-items:center;font-weight:700;background:#fff; border:2px solid var(--jd-line);color:var(--jd-navy)} .woocommerce-pagination .current{background:var(--jd-blue);border-color:var(--jd-blue);color:#fff} .woocommerce-pagination a:hover{border-color:var(--jd-blue);color:var(--jd-blue-dark)} @media (max-width:600px){ .jd-shophead{padding-bottom:18px;margin-bottom:18px} .jd-shophead__tools{width:100%} .woocommerce-ordering,.woocommerce-ordering select{width:100%} } /* A bolt/archívum címét a saját .jd-shophead adja — a téma sajátját elrejtjük, hogy ne legyen két azonos

egymás alatt. */ .woocommerce-products-header,.page-header-content .entry-title{display:none} .jd-shophead .entry-title{display:block} /* ========================================================================= 19. TERMÉKOLDAL A WooCommerce alap stílusa lila gombot és olívazöld árat ad — semmi köze a bolt arculatához. Itt hozzuk márkaszínre, és tesszük gyerekbaráttá. ========================================================================= */ .single-product div.product{max-width:var(--jd-wrap);margin-inline:auto;padding:24px 20px 40px; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start} .single-product .woocommerce-product-gallery{margin:0} .single-product .woocommerce-product-gallery__image img{border-radius:var(--jd-r-lg);border:2px solid var(--jd-line)} .single-product .flex-control-thumbs{display:flex;gap:10px;list-style:none;margin:12px 0 0;padding:0;flex-wrap:wrap} .single-product .flex-control-thumbs li{width:74px} .single-product .flex-control-thumbs img{border-radius:var(--jd-r-sm);border:2px solid var(--jd-line);cursor:pointer} .single-product .flex-control-thumbs img.flex-active{border-color:var(--jd-blue)} .single-product .product_title{margin:0 0 12px} /* Ár */ .single-product .summary p.price,.single-product .summary span.price{ font-family:'Baloo 2',sans-serif;font-size:2rem;font-weight:700;color:var(--jd-price); margin:0 0 16px;display:block} .single-product .summary .price del{font-size:1.15rem;color:var(--jd-muted);font-weight:400;margin-right:8px} .single-product .summary .price ins{text-decoration:none} /* Készlet-jelzés */ .single-product .stock{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem; padding:7px 16px;border-radius:var(--jd-pill);margin:0 0 18px} .single-product .stock.in-stock{background:var(--jd-mint);color:#3D7A17} .single-product .stock.out-of-stock{background:#FDECEC;color:#A83214} .single-product .stock::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor} /* Mennyiség + kosárgomb */ .single-product form.cart{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin:0 0 22px} .single-product .quantity{display:flex;align-items:center;background:var(--jd-sky);border-radius:var(--jd-pill); padding:4px;border:2px solid transparent} .single-product .quantity:focus-within{border-color:var(--jd-blue);background:#fff} .single-product .quantity input.qty{width:64px;border:0;background:transparent;text-align:center; font:inherit;font-weight:700;font-size:1.05rem;color:var(--jd-navy);padding:11px 0;-moz-appearance:textfield} .single-product .quantity input.qty:focus{outline:0} .single-product .quantity input::-webkit-outer-spin-button, .single-product .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .single-product button.single_add_to_cart_button, .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button.alt{ font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.05rem; background:var(--jd-green);color:#fff;border:0;border-radius:var(--jd-pill); padding:15px 34px;cursor:pointer;box-shadow:0 5px 0 #4A8A22; transition:transform .12s,box-shadow .12s,background .2s} .single-product button.single_add_to_cart_button:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce input.button.alt:hover{background:#55A028;color:#fff;transform:translateY(2px);box-shadow:0 3px 0 #4A8A22} /* Általános WooCommerce gombok (kosár, pénztár, fiók) */ .woocommerce .button,.woocommerce button.button,.woocommerce input.button,.woocommerce a.button{ font-family:'Baloo 2',sans-serif;font-weight:700;background:var(--jd-blue);color:#fff; border:0;border-radius:var(--jd-pill);padding:13px 26px;box-shadow:0 5px 0 var(--jd-blue-dark); transition:transform .12s,box-shadow .12s,background .2s} .woocommerce .button:hover,.woocommerce button.button:hover, .woocommerce input.button:hover,.woocommerce a.button:hover{ background:var(--jd-blue-dark);color:#fff;transform:translateY(2px);box-shadow:0 3px 0 var(--jd-navy)} /* Termék meta (cikkszám, kategória, címkék) — külön sorokban, olvashatóan */ .single-product .product_meta{border-top:2px solid var(--jd-line);padding-top:18px; font-size:.9rem;color:var(--jd-muted);display:flex;flex-direction:column;gap:7px} .single-product .product_meta>span{display:block} .single-product .product_meta a{color:var(--jd-blue-dark);font-weight:600} /* Fülek */ .woocommerce-tabs{max-width:var(--jd-wrap);margin-inline:auto;padding:10px 20px 30px} .woocommerce-tabs ul.tabs{display:flex;gap:8px;list-style:none;margin:0 0 22px;padding:0;flex-wrap:wrap;border:0} .woocommerce-tabs ul.tabs li{margin:0;padding:0;background:none;border:0} .woocommerce-tabs ul.tabs li a{display:block;padding:11px 22px;border-radius:var(--jd-pill); background:var(--jd-sky);color:var(--jd-navy);font-weight:700;font-family:'Baloo 2',sans-serif} .woocommerce-tabs ul.tabs li.active a{background:var(--jd-blue);color:#fff} .woocommerce-tabs .panel{padding:0} .woocommerce-tabs h2{font-size:1.3rem;margin:0 0 12px} /* A beszállítói adatlap táblázata */ .woocommerce-product-attributes{width:100%;border-collapse:collapse;font-size:.94rem} .woocommerce-product-attributes th,.woocommerce-product-attributes td{ text-align:left;padding:11px 14px;border-bottom:1px solid var(--jd-line)} .woocommerce-product-attributes th{color:var(--jd-muted);font-weight:700;width:42%} /* Kapcsolódó termékek */ .related.products,.up-sells{max-width:var(--jd-wrap);margin-inline:auto;padding:16px 20px 44px} .related.products>h2,.up-sells>h2{margin:0 0 20px;position:relative;padding-bottom:10px} .related.products>h2::after,.up-sells>h2::after{content:"";position:absolute;left:0;bottom:0; width:64px;height:6px;border-radius:var(--jd-pill);background:linear-gradient(90deg,var(--jd-yellow),var(--jd-orange))} /* Kosár és pénztár */ .woocommerce-cart .woocommerce,.woocommerce-checkout .woocommerce, .woocommerce-account .woocommerce{max-width:var(--jd-wrap);margin-inline:auto;padding:24px 20px 44px} .woocommerce table.shop_table{border-collapse:collapse;border-radius:var(--jd-r);overflow:hidden; border:2px solid var(--jd-line);width:100%} .woocommerce table.shop_table th{background:var(--jd-sky);color:var(--jd-navy);font-weight:700; padding:14px;text-align:left} .woocommerce table.shop_table td{padding:14px;border-top:1px solid var(--jd-line)} .woocommerce .cart_totals h2,.woocommerce-checkout h3{font-size:1.25rem} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea, .woocommerce form .form-row select{ border:2px solid var(--jd-line);border-radius:var(--jd-r-sm);padding:12px 14px;font:inherit;width:100%} .woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row select:focus{ outline:0;border-color:var(--jd-blue)} .woocommerce form .form-row label{font-weight:700;color:var(--jd-navy);margin-bottom:5px;display:block} @media (max-width:1024px){ .single-product div.product{grid-template-columns:1fr;gap:26px} } @media (max-width:600px){ .single-product .summary p.price,.single-product .summary span.price{font-size:1.6rem} .single-product form.cart{gap:10px} .single-product button.single_add_to_cart_button{flex:1} .woocommerce-tabs ul.tabs li a{padding:9px 16px;font-size:.9rem} } /* ========================================================================= 20. TERMÉKOLDAL — JAVÍTÁSOK ========================================================================= */ /* a) A
NÉGY gyereket tartalmaz: galéria, összefoglaló, fülek, kapcsolódó termékek. Rácsnál a fülek és a kapcsolódók is cellába estek (egymás mellé kerültek). Csak az első kettő legyen két hasábban. */ .single-product div.product>.woocommerce-tabs, .single-product div.product>.related, .single-product div.product>.up-sells, .single-product div.product>.woocommerce-notices-wrapper{grid-column:1/-1} /* b) A galéria alapból opacity:0, és a flexslider JS állítja 1-re. Ha az bármiért nem fut le (szkripthiba, késleltetett JS), a termékfotó LÁTHATATLAN marad — webshopnál ez a legrosszabb hiba. Ezért kényszerítjük. A flexslider ettől még ugyanúgy működik, ha elindul. */ .woocommerce-product-gallery{opacity:1!important} /* c) A WooCommerce saját woocommerce.css-e a MI stíluslapunk UTÁN töltődik, és olívazöldre (#958e09) festi az árat. Ez nem a bolt színe. A márkaszínek itt !important-tal védettek — szándékosan, mert egy WooCommerce-frissítés különben bármikor visszahozná a saját palettáját. */ .single-product .summary p.price, .single-product .summary p.price .amount, .single-product .summary span.price, .jd-card__price,.jd-card__price .amount{color:var(--jd-price)!important} .single-product .summary p.price del,.single-product .summary p.price del .amount, .jd-card__price del,.jd-card__price del .amount{color:var(--jd-muted)!important} /* d) A cím ne törjön csúnyán a keskenyebb hasábban. */ .single-product .product_title{font-size:clamp(1.5rem,2.6vw,2.3rem);overflow-wrap:break-word;hyphens:auto} /* e) A fül-pirulák ne zsugorodjanak körré. */ .woocommerce-tabs ul.tabs li a{white-space:nowrap} .woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs li{border:0;background:none;border-radius:0} .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none} /* f) A "2 készleten" a WooCommerce zöldje helyett a miénk. */ .single-product .stock.in-stock{color:#3D7A17!important} /* ========================================================================= 21. TERMÉKOLDAL — SPECIFICITÁS A WooCommerce saját szabályai (.woocommerce div.product ...) hosszabbak, mint a mieink voltak, ezért felülírták a kitöltést és a szélességet. Itt ugyanazzal a mélységgel írunk, hogy a miénk nyerjen. ========================================================================= */ /* a) A galéria töltse ki a saját hasábját. A WooCommerce 48%-ot ad neki, ami a mi rács-hasábunkon belül már csak a fele helyet jelentette — a termékfotó fele akkora lett, mint kellene. */ /* (lásd a 22. szekciót — azonosító-erősségű változat kellett) */ .woocommerce div.product .woocommerce-product-gallery__image img{width:100%;height:auto} /* b) Fül-pirulák: a WooCommerce az -nak 0 vízszintes kitöltést ad, ezért a háttér körré zsugorodott a szöveg körül. */ .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 22px} .woocommerce div.product .woocommerce-tabs ul.tabs li{ padding:0;margin:0;background:none;border:0;border-radius:0} .woocommerce div.product .woocommerce-tabs ul.tabs li a{ display:block;padding:11px 22px;border-radius:var(--jd-pill); background:var(--jd-sky);color:var(--jd-navy);font-weight:700; font-family:'Baloo 2',sans-serif;text-decoration:none;white-space:nowrap} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{background:var(--jd-blue);color:#fff} .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{background:var(--jd-blue-dark);color:#fff} /* c) A galéria bélyegképei egy sorban. */ .woocommerce div.product div.images .flex-control-thumbs{margin-top:12px} .woocommerce div.product div.images .flex-control-thumbs li{width:74px;margin:0;float:none} /* Csúszka nélküli galéria: a képek egymás alatt, az elsőn kívül kisebben. */ .woocommerce div.product .woocommerce-product-gallery__image{margin:0} .woocommerce div.product .woocommerce-product-gallery__image a{display:block} .woocommerce div.product .woocommerce-product-gallery__image img{ width:100%;height:auto;display:block;border-radius:var(--jd-r-lg);border:2px solid var(--jd-line)} /* Ha több kép van, a továbbiak kisebb rácsban a fő kép alatt. */ .woocommerce div.product .woocommerce-product-gallery__wrapper>.woocommerce-product-gallery__image:first-child{ grid-column:1/-1} /* A galéria konténere ne kapjon a JS-től örökölt fix méretet. */ .woocommerce div.product .woocommerce-product-gallery{position:relative} /* A teljes képernyő gomb a fotó jobb felső sarkába. */ .woocommerce div.product .woocommerce-product-gallery__trigger{ position:absolute;top:14px;right:14px;z-index:3;width:42px;height:42px;border-radius:50%; background:#fff;box-shadow:var(--jd-shadow);display:grid;place-items:center;font-size:1.1rem; text-decoration:none} .woocommerce div.product .woocommerce-product-gallery__trigger:hover{background:var(--jd-sky)} /* ========================================================================= 22. A GALÉRIA ÉS AZ ÖSSZEFOGLALÓ SZÉLESSÉGE — SPECIFICITÁSI CSAPDA ========================================================================= */ /* A woocommerce-layout.css szabálya így néz ki: .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { float:left; width:48% } A listában szerepel egy AZONOSÍTÓS változat (#content), a GeneratePress pedig épp `id="content"`-et ad a tartalom konténernek. Emiatt a szabály (1,2,3) erősséggel fogott, és hiába állt az én (0,2,2)-es szabályom később a fájlban — a specificitás előbbre való a sorrendnél. Ezért itt UGYANAZZAL a mélységgel írjuk. A két hasábot a rács adja (541 px + 541 px), a galéria és az összefoglaló töltse ki a sajátját. */ .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce #content div.product .woocommerce-product-gallery, .woocommerce div.product .woocommerce-product-gallery{ width:100%;float:none;margin:0 0 1em} .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary{ width:100%;float:none;margin:0} /* ========================================================================= 23. LINKKONTRASZT A SZÍNES SÁVOKON A --jd-blue-dark (#1B7BB0) fehéren még megfelelt (4,6:1), de a krém (#FFF8EC) és az égkék (#EDF7FD) sávon 4,28–4,41-re esett — a WCAG AA 4,5:1-et vár. A szöveges linkek ezért külön, sötétebb tokent kapnak; a gombok és árnyékok maradnak a világosabb kéken. ========================================================================= */ a{color:var(--jd-link)} a:hover{color:var(--jd-navy)} .jd-head__link{color:var(--jd-link)} .jd-card__title a:hover{color:var(--jd-link)} .jd-breadcrumb a:hover{color:var(--jd-link)} .woocommerce div.product .product_meta a, .single-product .product_meta a{color:var(--jd-link)} .jd-footer a{color:#C9DCF0} .jd-footer a:hover{color:var(--jd-yellow)} /* ========================================================================= 24. KOSÁR — FINOMÍTÁS ========================================================================= */ /* A WooCommerce üzenetdoboza felül vastag színes keretet kap; nálunk a bal oldali sáv jelöli a típust, a többi keret zavaró volt. */ .woocommerce-message,.woocommerce-info,.woocommerce-error{ border:0;border-left:5px solid var(--jd-green);border-radius:var(--jd-r); background:var(--jd-mint);color:var(--jd-ink);padding:16px 22px; display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none} .woocommerce-info{background:var(--jd-sky);border-left-color:var(--jd-blue)} .woocommerce-error{background:#FDECEC;border-left-color:var(--jd-red)} .woocommerce-message .button,.woocommerce-info .button{margin:0} /* A kosárban a termékkép legyen nézhető méretű. */ .woocommerce table.shop_table td.product-thumbnail img{ width:72px;height:72px;object-fit:contain;border-radius:var(--jd-r-sm);border:1px solid var(--jd-line)} .woocommerce table.shop_table td.product-thumbnail{width:92px} .woocommerce table.shop_table td.product-remove{width:44px;text-align:center} .woocommerce table.shop_table td.product-remove a.remove{ display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%; background:var(--jd-sky);color:var(--jd-red)!important;font-size:1.1rem;text-decoration:none} .woocommerce table.shop_table td.product-remove a.remove:hover{background:#FDECEC;color:var(--jd-red)!important} .woocommerce table.shop_table td.product-name a{color:var(--jd-link);font-weight:700} .woocommerce table.shop_table .product-subtotal,.woocommerce table.shop_table .product-price{ font-weight:700;color:var(--jd-price)} /* Kosár összesen doboz */ .woocommerce .cart_totals{background:var(--jd-sky);border-radius:var(--jd-r-lg);padding:22px} .woocommerce .cart_totals table.shop_table{border:0;background:transparent} .woocommerce .cart_totals table.shop_table th{background:transparent} .woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout{padding:14px 0 0} .woocommerce .wc-proceed-to-checkout a.checkout-button{ display:block;text-align:center;background:var(--jd-green);box-shadow:0 5px 0 #4A8A22;font-size:1.05rem} .woocommerce .wc-proceed-to-checkout a.checkout-button:hover{background:#55A028;box-shadow:0 3px 0 #4A8A22} /* Kuponsor: ne tapadjon össze */ .woocommerce table.shop_table td.actions .coupon{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .woocommerce table.shop_table td.actions .coupon input#coupon_code{ border:2px solid var(--jd-line);border-radius:var(--jd-pill);padding:12px 18px;font:inherit;width:auto;min-width:150px} /* ========================================================================= 25. TERMÉKKÁRTYA — AZ EGÉSZ KÁRTYA KATTINTHATÓ Korábban csak a kép és a cím volt link, a köztük lévő üres részek nem reagáltak. A "kifeszített link" mintával a cím -jából egy láthatatlan réteg lefedi a teljes kártyát. ========================================================================= */ .jd-card{position:relative;isolation:isolate} .jd-card__link::after{ content:"";position:absolute;inset:0;z-index:1;border-radius:var(--jd-r-lg)} .jd-card__link{text-decoration:none} /* A + jel csak jelzés, nem külön kattintási cél — így nincs link a linkben. */ .jd-card__add{pointer-events:none} .jd-card:hover .jd-card__add{transform:translateY(2px);box-shadow:0 2px 0 #4A8A22} /* Billentyűzetes fókusznál az egész kártya kapjon keretet. */ .jd-card:focus-within{outline:3px solid var(--jd-orange);outline-offset:3px;border-radius:var(--jd-r-lg)} .jd-card__link:focus-visible{outline:0} /* Az ár soha ne törjön két sorba ("9" / "770 Ft"). */ .jd-card__price,.jd-card__price .amount,.jd-card__price bdi{white-space:nowrap} /* ========================================================================= 26. MOBIL TERMÉKKÁRTYA — TÖBB HELY A KÉPNEK A 375 px-es telefonon a két hasáb ~170 px, amiből a régi kitöltés sokat elvett. Kevesebb belső margó, nagyobb kép, tömörebb szöveg. ========================================================================= */ @media (max-width:600px){ .jd-grid{grid-template-columns:repeat(2,1fr);gap:10px} .jd-card{border-radius:var(--jd-r)} .jd-card__media{padding:8px} .jd-card__media img{border-radius:8px} .jd-card__body{padding:0 10px 12px;gap:5px} .jd-card__cat{font-size:.66rem;letter-spacing:0} .jd-card__title{font-size:.84rem;line-height:1.3;min-height:2.6em} .jd-card__price{font-size:1rem} .jd-card__foot{gap:6px;padding-top:2px} .jd-card__add{width:34px;height:34px;box-shadow:0 3px 0 #4A8A22} .jd-card__add svg{width:17px;height:17px} .jd-badge{top:8px;left:8px;font-size:.68rem;padding:4px 9px} } /* Nagyon keskeny telefonon (<360px) inkább egy hasáb, mint zsúfolt kettő. */ @media (max-width:359px){ .jd-grid{grid-template-columns:1fr} .jd-card__title{min-height:0} } /* ========================================================================= 27. TERMÉKOLDALI GALÉRIA — FIX ARÁNY, KÖZÉPRE A beszállítói fotók aránya nagyon eltérő (magas dobozképek is vannak), ezért magasságkorlát nélkül a kép kinyúlt a keretéből és elcsúszottnak látszott. Fix négyzetes kerettel és `contain` illesztéssel minden termék ugyanúgy, középre igazítva jelenik meg — a kép sosem torzul és sosem lóg ki. ========================================================================= */ .woocommerce div.product .woocommerce-product-gallery__image{ margin:0;overflow:hidden!important;border-radius:var(--jd-r-lg); border:2px solid var(--jd-line);background:#fff} .woocommerce div.product .woocommerce-product-gallery__image a{ display:block;width:100%;height:100%} /* A fő kép négyzetes, a továbbiak kisebb négyzetek. */ .woocommerce div.product .woocommerce-product-gallery__image:not(:first-child) img{padding:8px} /* Egyetlen kép esetén ne legyen fölösleges rács-hézag. */ .woocommerce div.product .woocommerce-product-gallery--columns-4 .woocommerce-product-gallery__wrapper:has(>*:only-child){ grid-template-columns:1fr} @media (max-width:600px){ .woocommerce div.product .woocommerce-product-gallery__wrapper{grid-template-columns:repeat(3,1fr);gap:8px} .woocommerce div.product .woocommerce-product-gallery__image img{padding:10px} } /* ========================================================================= 28. TERMÉKGALÉRIA — A CSÚSZKÁVAL EGYÜTTMŰKÖDVE ========================================================================= */ /* Korábban rácsba tettem a képeket, KÖZBEN a WooCommerce flexslidere is futott (a GeneratePress kapcsolja be). A kettő egymás ellen dolgozott: a bélyegképre kattintva a csúszka odébb tolta volna a sávot, de a rács fixen tartotta — ezért "nem jelent meg" a második kép. Itt már NEM szólunk bele az elrendezésbe: a csúszka rakja a képeket egymás mellé, mi csak a keretet, a méretet és a bélyegképeket stílusozzuk. */ .woocommerce div.product .woocommerce-product-gallery{position:relative;width:100%} /* A csúszka ablaka: ami kilóg, azt levágjuk — e nélkül a mellette lévő dia is kilátszott és vízszintes görgetést okozott. */ .woocommerce div.product .woocommerce-product-gallery .flex-viewport{ overflow:hidden;border:2px solid var(--jd-line);border-radius:var(--jd-r-lg);background:#fff} /* Egy dia: a kép magasságát korlátozzuk, hogy az álló dobozfotók se nyúljanak el. A `contain` miatt a kép sosem torzul. */ .woocommerce div.product .woocommerce-product-gallery__image{ margin:0;padding:16px;background:#fff;display:flex;align-items:center;justify-content:center} .woocommerce div.product .woocommerce-product-gallery__image a{ display:flex;align-items:center;justify-content:center;width:100%} .woocommerce div.product .woocommerce-product-gallery__image img{ width:auto;max-width:100%;height:auto;max-height:430px; margin:0 auto;display:block;border:0;border-radius:0;box-shadow:none} /* Ha nincs csúszka (egyetlen kép), a keret a képre kerül. */ .woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image{ border:2px solid var(--jd-line);border-radius:var(--jd-r-lg)} /* Bélyegképsor a fő kép alatt. */ .woocommerce div.product .flex-control-thumbs{ display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:12px 0 0;padding:0} .woocommerce div.product .flex-control-thumbs li{width:76px;margin:0;float:none;list-style:none} .woocommerce div.product .flex-control-thumbs img{ width:100%;height:76px;object-fit:contain;padding:6px;background:#fff;cursor:pointer; border:2px solid var(--jd-line);border-radius:var(--jd-r-sm);opacity:1;transition:border-color .15s} .woocommerce div.product .flex-control-thumbs img:hover{border-color:var(--jd-blue)} .woocommerce div.product .flex-control-thumbs img.flex-active{border-color:var(--jd-blue);border-width:3px} /* Teljes képernyő gomb. */ .woocommerce div.product .woocommerce-product-gallery__trigger{ position:absolute;top:14px;right:14px;z-index:5;width:42px;height:42px;border-radius:50%; background:#fff;box-shadow:var(--jd-shadow);display:grid;place-items:center; font-size:1.05rem;text-decoration:none} .woocommerce div.product .woocommerce-product-gallery__trigger:hover{background:var(--jd-sky)} /* A zoom overlay-t akkor sem engedjük kilógni, ha valamiért mégis lefutna. */ .woocommerce div.product img.zoomImg{display:none!important} @media (max-width:600px){ .woocommerce div.product .woocommerce-product-gallery__image{padding:12px} .woocommerce div.product .woocommerce-product-gallery__image img{max-height:300px} .woocommerce div.product .flex-control-thumbs li{width:62px} .woocommerce div.product .flex-control-thumbs img{height:62px} } /* ========================================================================= 29. TERMÉKOLDAL MOBILON — EGY HASÁB ========================================================================= */ /* A kéthasábos rácsot egy médialekérdezés már egy hasábra váltotta, DE azt a szabályt a fájl elején írtam, és utána még kilenc szekciót fűztem hozzá. A CSS-ben a médialekérdezés NEM erősebb a később jövő szabálynál — így a telefon is a 2×541 px-es rácsot kapta, és emiatt lógott ki a fotó, a cím és a leírás szövege is. Ez a blokk a fájl VÉGÉN áll, tehát biztosan érvényesül. Ha új szekciót fűzöl hozzá, ezt hagyd legalul. */ @media (max-width:1024px){ .single-product div.product{ grid-template-columns:1fr; gap:24px; padding-inline:16px} .single-product div.product>*{min-width:0;max-width:100%} .woocommerce-tabs,.related.products,.up-sells{ max-width:100%;padding-inline:16px} .woocommerce-tabs .panel{max-width:100%} } /* Hosszú szó vagy URL se feszítse szét a leírást. */ .woocommerce-tabs .panel,.woocommerce-tabs .panel p, .single-product .woocommerce-product-details__short-description{ overflow-wrap:anywhere;max-width:100%} /* A cím és a meta se lógjon ki. */ .single-product .product_title,.single-product .product_meta{max-width:100%;overflow-wrap:anywhere} /* A mennyiség + kosárgomb sor telefonon töltse ki a szélességet. */ @media (max-width:600px){ .single-product form.cart{width:100%} .single-product form.cart .quantity{flex:0 0 auto} .single-product button.single_add_to_cart_button{flex:1 1 auto;min-width:0} } /* ========================================================================= 30. FÜLEK ÉS KAPCSOLÓDÓ TERMÉKEK IGAZÍTÁSA A .woocommerce-tabs rács-cellában ül (grid-column:1/-1), és a korábbi `margin-inline:auto` középre húzta. A tartalom balra igazodjon, mint az oldal többi része. ========================================================================= */ .single-product div.product>.woocommerce-tabs, .single-product div.product>.related, .single-product div.product>.up-sells{ justify-self:stretch;width:100%;max-width:100%;margin-inline:0;padding-inline:0} .woocommerce div.product .woocommerce-tabs ul.tabs{justify-content:flex-start;text-align:left} .woocommerce-tabs .panel{max-width:100%} /* ========================================================================= 31. GALÉRIA CSÚSZKA — A KERET NEM ARRA AZ ELEMRE KERÜL, AMIT A CSÚSZKA MÉR ========================================================================= */ /* KÉT HIBÁT KELLETT ITT JAVÍTANI, MINDKETTŐ UGYANABBÓL FAKADT: beleírtam azokba a dobozokba, amiket a flexslider maga méricskél. 1) A dia-sávot (`__wrapper`) `display:grid`-be tettem. A flexslider `float:left`-tel rakja egymás MELLÉ a diákat — rácsban a floatok hatástalanok, ezért a 2. kép az első ALÁ került (mérve: slide[0] top=307, slide[1] top=783). A csúszka közben rendesen elcsúsztatta a sávot, csak épp nem a második kép volt ott. Innen a "furcsán jelenik meg". 2) A keretet és a 16 px belső margót a `.flex-viewport`-ra és a diára tettem. A flexslider viszont a dia szélességét INDULÁSKOR számolja ki (501,5 px), a keret és a margó pedig utólag szűkítette a helyet (538 px) — a kép ezért csúszott el és lógott ki jobbra. MEGOLDÁS: a csúszka által mért dobozok (`__wrapper`, `__image`, `.flex-viewport`) MÉRET SZEMPONTJÁBÓL ÉRINTETLENEK maradnak. A látható keretet a dián BELÜLI `` kapja, amihez a flexslider soha nem nyúl. */ /* A sáv: a flexslider modellje (block + float) — nem írjuk felül. */ .woocommerce div.product .woocommerce-product-gallery__wrapper{ display:block;margin:0;padding:0;list-style:none} /* A dia: SEMMI keret, margó vagy kitöltés — ezt a csúszka méri. */ .woocommerce div.product .woocommerce-product-gallery__image{ margin:0;padding:0;border:0;background:transparent;box-sizing:border-box} /* A csúszka ablaka: csak levágás, méretet befolyásoló keret nélkül. */ .woocommerce div.product .flex-viewport{ overflow:hidden;border:0;padding:0;background:transparent;border-radius:var(--jd-r-lg)} /* A LÁTHATÓ KERET: a dián belüli . Ehhez a flexslider nem nyúl. */ .woocommerce div.product .woocommerce-product-gallery__image>a{ display:flex;align-items:center;justify-content:center; width:100%;min-height:400px;padding:16px;box-sizing:border-box; background:#fff;border:2px solid var(--jd-line);border-radius:var(--jd-r-lg); text-decoration:none} .woocommerce div.product .woocommerce-product-gallery__image img{ width:auto;max-width:100%;height:auto;max-height:368px; margin:0 auto;display:block;border:0;border-radius:0;box-shadow:none} /* Bélyegképsor. */ .woocommerce div.product .flex-control-thumbs{ display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:12px 0 0;padding:0} .woocommerce div.product .flex-control-thumbs li{width:76px;margin:0;float:none;list-style:none} .woocommerce div.product .flex-control-thumbs img{ width:100%;height:76px;object-fit:contain;padding:6px;background:#fff;cursor:pointer; border:2px solid var(--jd-line);border-radius:var(--jd-r-sm);opacity:1;transition:border-color .15s} .woocommerce div.product .flex-control-thumbs img:hover{border-color:var(--jd-blue)} .woocommerce div.product .flex-control-thumbs img.flex-active{border-color:var(--jd-blue);border-width:3px} /* Teljes képernyő gomb. */ .woocommerce div.product .woocommerce-product-gallery__trigger{ position:absolute;top:14px;right:14px;z-index:5;width:42px;height:42px;border-radius:50%; background:#fff;box-shadow:var(--jd-shadow);display:grid;place-items:center; font-size:1.05rem;text-decoration:none} .woocommerce div.product .woocommerce-product-gallery__trigger:hover{background:var(--jd-sky)} /* A hover-nagyító másolatát sosem mutatjuk (kilógott a képernyőről). */ .woocommerce div.product img.zoomImg{display:none!important} @media (max-width:600px){ .woocommerce div.product .woocommerce-product-gallery__image>a{min-height:280px;padding:12px} .woocommerce div.product .woocommerce-product-gallery__image img{max-height:256px} .woocommerce div.product .flex-control-thumbs li{width:62px} .woocommerce div.product .flex-control-thumbs img{height:62px} } /* ========================================================================= 32. KOSÁR-FIÓK (mini kosár) Kosárba tételkor jobbról becsúszik, oldalfrissítés nélkül. Ugyanaz a komponens asztalon és telefonon — telefonon teljes szélességű. ========================================================================= */ .jd-cart{position:fixed;inset:0;z-index:300} .jd-cart[hidden]{display:none} .jd-cart__bg{position:absolute;inset:0;background:rgba(11,36,61,.45);opacity:0;transition:opacity .25s ease} .jd-cart.is-open .jd-cart__bg{opacity:1} .jd-cart__panel{ position:absolute;top:0;right:0;bottom:0;width:min(92vw,420px); background:#fff;display:flex;flex-direction:column; box-shadow:-10px 0 40px -12px rgba(11,58,115,.35); transform:translateX(100%);transition:transform .26s cubic-bezier(.22,.7,.3,1)} .jd-cart.is-open .jd-cart__panel{transform:none} .jd-cart__head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 18px;border-bottom:2px solid var(--jd-line);flex:0 0 auto} .jd-cart__head h2{ margin:0;font-size:1.15rem;display:flex;align-items:center;gap:10px;color:var(--jd-navy)} .jd-cart__head svg{color:var(--jd-blue)} .jd-cart__close{ width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;flex:0 0 auto; background:var(--jd-sky);color:var(--jd-navy);font-size:1.5rem;line-height:1; display:grid;place-items:center;transition:background .2s} .jd-cart__close:hover{background:var(--jd-blue);color:#fff} .jd-cart__scroll{flex:1 1 auto;display:flex;flex-direction:column;min-height:0} .jd-cart__body{flex:1 1 auto;overflow-y:auto;padding:8px 18px} .jd-cart__list{list-style:none;margin:0;padding:0} .jd-cart__item{ display:grid;grid-template-columns:64px 1fr 28px;gap:12px;align-items:start; padding:14px 0;border-bottom:1px solid var(--jd-line)} .jd-cart__item:last-child{border-bottom:0} .jd-cart__thumb img{ width:64px;height:64px;object-fit:contain;background:#fff; border:1px solid var(--jd-line);border-radius:var(--jd-r-sm);display:block} .jd-cart__info{min-width:0;display:flex;flex-direction:column;gap:8px} .jd-cart__name{font-weight:700;font-size:.92rem;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .jd-cart__name a{color:var(--jd-ink)} .jd-cart__name a:hover{color:var(--jd-link)} .jd-cart__row{display:flex;align-items:center;justify-content:space-between;gap:10px} .jd-cart__price{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--jd-price);white-space:nowrap} /* Mennyiség léptető */ .jd-qty{display:inline-flex;align-items:center;background:var(--jd-sky);border-radius:var(--jd-pill);padding:3px} .jd-qty__btn{ width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;background:#fff; color:var(--jd-navy);font-size:1rem;font-weight:700;line-height:1; display:grid;place-items:center;transition:background .15s} .jd-qty__btn:hover{background:var(--jd-blue);color:#fff} .jd-qty__num{ width:34px;border:0;background:transparent;text-align:center;font:inherit;font-weight:700; font-size:.9rem;color:var(--jd-navy);-moz-appearance:textfield;padding:0} .jd-qty__num:focus{outline:0} .jd-qty__num::-webkit-outer-spin-button,.jd-qty__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .jd-cart__remove{ width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;background:transparent; color:var(--jd-muted);font-size:1.35rem;line-height:1;display:grid;place-items:center; transition:background .15s,color .15s} .jd-cart__remove:hover{background:#FDECEC;color:var(--jd-red)} /* Üres kosár */ .jd-cart__empty{text-align:center;padding:48px 10px} .jd-cart__empty-emoji{font-size:3rem;display:block;margin-bottom:10px} .jd-cart__empty p{color:var(--jd-muted);margin:0 0 18px} /* Lábrész */ .jd-cart__foot{ flex:0 0 auto;padding:16px 18px calc(16px + env(safe-area-inset-bottom)); border-top:2px solid var(--jd-line);background:var(--jd-sky); display:flex;flex-direction:column;gap:10px} .jd-cart__foot[hidden]{display:none} .jd-cart__sum{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .jd-cart__sum span{font-weight:700;color:var(--jd-navy)} .jd-cart__sum strong{font-family:'Baloo 2',sans-serif;font-size:1.35rem;color:var(--jd-price)} .jd-cart__note{margin:0;font-size:.8rem;color:var(--jd-muted)} .jd-cart__continue{ display:block;text-align:center;font-weight:700;color:var(--jd-link);padding:6px 0 2px} .jd-cart__continue:hover{color:var(--jd-navy)} /* Töltés közben */ .jd-cart.is-busy .jd-cart__body{opacity:.5;pointer-events:none} .jd-cart__body{transition:opacity .15s} .single_add_to_cart_button.is-loading{opacity:.7;pointer-events:none} @media (max-width:600px){ .jd-cart__panel{width:88%} .jd-cart__head{padding:14px 16px} .jd-cart__body{padding:6px 16px} .jd-cart__foot{padding:14px 16px calc(14px + env(safe-area-inset-bottom))} .jd-cart__item{grid-template-columns:56px 1fr 26px;gap:10px} .jd-cart__thumb img{width:56px;height:56px} } /* Mozgáscsökkentés kérésre */ @media (prefers-reduced-motion:reduce){ .jd-cart__panel{transition:none} .jd-cart__bg{transition:none} } /* ========================================================================= 33. KOSÁR-FIÓK — SPECIFICITÁS ÉS SZÉLESSÉG ========================================================================= */ /* a) A mennyiség mezőt a GeneratePress `input[type="number"]` szabálya felülírta: 10px/15px belső margót adott neki. Egy 34 px széles mezőben a 2×15 px margó után 4 px maradt a számnak — ezért tűnt üresnek. Az attribútum-szelektor (0,1,1) erősebb, mint az én osztályom (0,1,0), ezért itt is mélyebbre kell írni. (Ugyanaz a csapda, mint a WooCommerce `#content`-es szabályánál a 22. szekcióban.) b) A mobil panel `100vw` volt. A `vw` egység a GÖRGETŐSÁVOT IS beleszámolja, ezért a panel néhány képponttal szélesebb lett a látható területnél, és a részösszeg jobb széle levágódott. A szülő `.jd-cart` `inset:0`-val pontosan a látható terület, tehát a `100%` a helyes. */ .jd-cart .jd-qty input.jd-qty__num, .jd-cart .jd-qty input[type="number"].jd-qty__num{ width:38px;min-width:0;height:auto;padding:0;margin:0;border:0;background:transparent; text-align:center;font-family:inherit;font-size:.92rem;font-weight:700;line-height:1.2; color:var(--jd-navy);box-shadow:none;-moz-appearance:textfield;appearance:textfield} .jd-cart .jd-qty input.jd-qty__num:focus{outline:0;box-shadow:none;background:transparent} .jd-cart .jd-qty input.jd-qty__num::-webkit-outer-spin-button, .jd-cart .jd-qty input.jd-qty__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* A részösszeg sora ne tudjon kilógni. */ .jd-cart__sum{min-width:0} .jd-cart__sum strong{white-space:nowrap} .jd-cart__panel{max-width:100%} /* A programból adott fókusz ne rajzoljon keretet a bezáró gombra — billentyűzetes fókusznál viszont igen. */ .jd-cart__close:focus:not(:focus-visible){outline:0} /* ========================================================================= 34. MENNYISÉG-LÉPTETŐ A TERMÉKOLDALON ========================================================================= */ .single-product .quantity{display:inline-flex;align-items:center;gap:2px; background:var(--jd-sky);border-radius:var(--jd-pill);padding:4px;border:2px solid transparent} .single-product .quantity:focus-within{border-color:var(--jd-blue);background:#fff} .single-product .quantity .jd-qty__btn{ width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;background:#fff; color:var(--jd-navy);font-size:1.25rem;font-weight:700;line-height:1;flex:0 0 auto; display:grid;place-items:center;font-family:inherit;transition:background .15s,color .15s} .single-product .quantity .jd-qty__btn:hover{background:var(--jd-blue);color:#fff} .single-product .quantity .jd-qty__btn:active{transform:translateY(1px)} /* A mezőt a GeneratePress `input[type=number]` szabálya belső margóval látja el (ugyanaz a specificitási csapda, mint a kosár-fióknál), ezért itt is mélyebbre írunk. */ .single-product .quantity input.qty, .single-product .quantity input[type="number"].qty{ width:48px;min-width:0;height:auto;padding:0;margin:0;border:0;background:transparent; text-align:center;font-family:inherit;font-size:1.02rem;font-weight:700;line-height:1.2; color:var(--jd-navy);box-shadow:none;-moz-appearance:textfield;appearance:textfield} .single-product .quantity input.qty:focus{outline:0;box-shadow:none;background:transparent} .single-product .quantity input.qty::-webkit-outer-spin-button, .single-product .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* ========================================================================= 35. MOBIL FINOMHANGOLÁS ========================================================================= */ @media (max-width:860px){ /* a) A LOGÓ KÖZÉPRE. A hamburger és a kosár egyenlő szélességű oldalsávot kap (`flex:1 1 0`), így a köztük lévő logó pontosan középre esik. */ .jd-header .jd-wrap{gap:8px} .jd-burger{flex:1 1 0;align-items:flex-start} .jd-logo{flex:0 0 auto;margin-inline:auto} .jd-actions{flex:1 1 0;justify-content:flex-end;margin-left:0} } @media (max-width:600px){ /* b) SZÉLESEBB TERMÉKKÁRTYÁK, DE NEM MAGASABBAK. Kevesebb külső margó és kisebb rés → szélesebb kártya. A kép viszont NEM marad négyzetes: rögzített magasságot kap, különben a szélesítés automatikusan meg is növelné a kártyát. Az arányt a `contain` őrzi, tehát a kép nem torzul. */ .jd-wrap{padding-inline:12px} .jd-grid{grid-template-columns:repeat(2,1fr);gap:8px} .jd-card__media{padding:6px} .jd-card__body{padding:0 9px 11px} /* c) A kosár-fiók hagyja látszani az oldalt a bal szélen. */ .jd-cart__panel{width:88%} } /* ========================================================================= 36. TERMÉKKÁRTYA KÉPMEZŐJE — FIX ARÁNY, BIZTONSÁGOS ZSUGORODÁS ========================================================================= */ /* MI VOLT A HIBA A képmezőt flex konténerré tettem, hogy a kép középre kerüljön. A flex-elem alapértelmezett `min-height: auto` értéke viszont MEGTILTJA, hogy a kép a saját tartalmi mérete alá zsugorodjon. Betöltetlen (lazy) képnél ez 1500 px-es magasságot eredményezett: a kártyák üresen, 1670 px magasan jelentek meg, a szöveg pedig lecsúszott a látható területről. A MEGOLDÁS A képmező adja az arányt és vágja is, ami kilóg; a kép pedig `max-*` korlátokkal illeszkedik bele, `min-width/height: 0`-val — ez engedi meg a flexnek, hogy a képet a doboz méretére fogja. Mobilon laposabb az arány (5:4), így a szélesebb kártya sem lesz magasabb. */ .jd-card__media{ aspect-ratio:1/1;display:flex;align-items:center;justify-content:center; overflow:hidden} .jd-card__media img{ max-width:100%;max-height:100%;width:auto;height:auto; min-width:0;min-height:0; /* e nélkül a flex-elem nem zsugorodik */ object-fit:contain;display:block} @media (max-width:600px){ .jd-card__media{aspect-ratio:5/4} } /* ========================================================================= 37. EGYSÉGES SZÉLESSÉG — A KERESŐ ÉS A KÁRTYÁK SZÉLE EGYBEESIK ========================================================================= */ /* Korábban három különböző korlát versengett: a `.jd-wrap` 1240 px-e, a `.jd-shopgrid` 97vw-je és a `.jd-grid` saját max-width-je. Emiatt a felső keresőmező és a termékrács MÁS szélességű lett. Most egyetlen forrás van: a `--jd-wrap` változó. Minden konténer ezt használja, a rács pedig egyszerűen kitölti a szülőjét — így a kereső bal és jobb széle pontosan ott van, ahol a kártyáké, minden képernyőméreten. A belső margó (`padding-inline`) is közös: ez adja a lap szélétől mért távolságot, és egy helyen állítható. */ .jd-wrap, .jd-wrap--shop{max-width:var(--jd-wrap);margin-inline:auto;padding-inline:16px} /* A rács és a bolt-fejléc NE kapjon saját korlátot — töltse ki a konténert. */ .jd-shopgrid, .jd-shophead, .jd-breadcrumb, .jd-section .jd-grid{max-width:100%;margin-inline:0;padding-inline:0} /* Minél szélesebb a hely, annál több hasáb — a kártya nem hízik túl nagyra. */ .jd-grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:18px} @media (max-width:600px){ /* Mobilon szinte a lap széléig: a kereső és a kártyák ugyanazt a 10 px-es szegélyt kapják. */ .jd-wrap,.jd-wrap--shop{padding-inline:10px} .jd-grid{grid-template-columns:repeat(2,1fr);gap:10px} .jd-card__media{aspect-ratio:5/4} } /* ========================================================================= 38. A GENERATEPRESS CIKK-KONTÉNER BELSŐ MARGÓJA ========================================================================= */ /* A GP „separate containers" módban a `.inside-article` dobozra ~30 px belső margót és fehér hátteret tesz. A fejlécben ülő keresőmezőt ez nem érinti, a tartalmat viszont beljebb tolta — ezért nem esett egybe a kereső és a termékrács széle, hiába állítottam be a közös konténer-szélességet. A mi elrendezésünk minden szekció margóját és hátterét maga adja, ezért ezt a réteget nullázzuk. */ .inside-article, .site-content .content-area, .site-main{padding:0;background:transparent;border:0;box-shadow:none} .separate-containers .site-main{margin:0} .separate-containers .inside-article{padding:0} /* ========================================================================= 39. TERMÉKOLDAL SZÉLESSÉGE ÉS AZ EGYMEZŐS MENNYISÉG ========================================================================= */ /* a) A `--jd-wrap` 1600 px-re nőtt, hogy a TERMÉKRÁCS majdnem a lap széléig érjen. A termékoldalnak viszont ez túl sok: a kétoszlopos elrendezésben a fotó ~800 px-esre hízott. A termék adatlapja saját, szűkebb sávot kap — a listákra a széles marad. */ .single-product div.product{max-width:1240px} .single-product .woocommerce-tabs, .single-product .related.products, .single-product .up-sells{max-width:1240px;margin-inline:auto} .woocommerce div.product .woocommerce-product-gallery__image>a{min-height:0} .woocommerce div.product .woocommerce-product-gallery__image img{max-height:420px} /* b) Ha csak egy darab rendelhető, a WooCommerce rejtett mezőt ad — ilyenkor a mennyiség-doboz üres maradna. A PHP már nem írja ki a +/− gombokat; ez a szabály magát a dobozt is elrejti, hogy ne maradjon üres folt. */ .single-product .quantity:has(input[type="hidden"]){display:none} .single-product form.cart:has(input.qty[type="hidden"]) .single_add_to_cart_button{margin-left:0} @media (max-width:1024px){ .single-product div.product, .single-product .woocommerce-tabs, .single-product .related.products, .single-product .up-sells{max-width:100%} } /* ========================================================================= 40. KOSÁR AKCIÓSOR ÉS PÉNZTÁR ELRENDEZÉS ========================================================================= */ /* a) A kosár akciósora: kupon balra, gombok jobbra. FIGYELEM: a cellára NEM szabad `display:flex`-et tenni. A ezzel kikerül a táblázat elrendezéséből, elveszti a `colspan`-t, és a tartalma szerint zsugorodik — mérve 1481 px helyett 264 px lett. Ezért a cella marad rendes táblázatcella, a belső elemeket pedig lebegtetéssel rendezzük. */ .woocommerce table.shop_table td.actions{padding:16px 14px;text-align:right} .woocommerce table.shop_table td.actions::after{content:"";display:table;clear:both} .woocommerce table.shop_table td.actions .coupon{ float:left;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .woocommerce table.shop_table td.actions button[name="update_cart"], .jd-cart-actions__checkout{display:inline-flex;margin-left:10px;vertical-align:middle} .jd-cart-actions__checkout{white-space:nowrap} @media (max-width:860px){ .woocommerce table.shop_table td.actions{text-align:center} .woocommerce table.shop_table td.actions .coupon{float:none;justify-content:center;margin-bottom:12px} .woocommerce table.shop_table td.actions .coupon input#coupon_code{flex:1 1 160px} .jd-cart-actions__checkout, .woocommerce table.shop_table td.actions button[name="update_cart"]{ width:100%;justify-content:center;margin:6px 0 0} } /* b) Az ország mező elrejtése — az értéket a