/* ========================================================= SZOM KART – GLOBAL FULL WIDTH + WEBSHOP LAYOUT Cél / Purpose: - az egész smink legyen teljes szélességű - webshop oldal: bal sidebar szűrők + jobb termékkártyák - termékoldal (.path-product) külön kezelést kap a product-page.css és szom.css fájlokban MÓDOSÍTÁS / MODIFICATION: 2026-05-22 HU: Webshop termékkártya stílusok hozzáadva (4. szekció). Sidebar szélesség 320px → 260px csökkentve. EN: Webshop product card styles added (section 4). Sidebar width reduced from 320px to 260px. ROLLBACK / VISSZAÁLLÍTÁS: HU: Az előző verziót visszatölteni FileZillán keresztül. EN: Restore the previous version via FileZilla. ========================================================= */ /* --------------------------------------------------------- 1) ÁLTALÁNOS FULL WIDTH / GENERAL FULL WIDTH HU: HTML és body teljes szélesség, vízszintes scroll tiltva EN: HTML and body full width, horizontal scroll disabled --------------------------------------------------------- */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } /* --------------------------------------------------------- 2) CONTAINER SZÉLESSÉG FELÜLÍRÁS / CONTAINER WIDTH OVERRIDE HU: Drupal/Kart alapértelmezett container szélességek felülírása EN: Override Drupal/Kart default container widths --------------------------------------------------------- */ .container, .main-wrapper .container, .highlighted .container, .footer .container, .topbar .container, .header .container, .region-highlighted .container { width: 100%; max-width: 100% !important; } .main-container, #main, .main, .region-content, .block-region { width: 100%; max-width: 100%; box-sizing: border-box; } /* --------------------------------------------------------- 3) WEBSHOP ÉS ÁLTALÁNOS SIDEBAR LAYOUT HU: Sidebar + fő tartalom egymás mellé (flex). Csak nem-termékoldalakon aktív. Sidebar: 260px fix szélesség (korábban 320px volt). EN: Sidebar + main content side by side (flex). Active on non-product pages only. Sidebar: 260px fixed width (was 320px before). ROLLBACK: HU: Ha vissza kell állítani a 320px-es szélességet, módosítsd ezt a sort: flex: 0 0 260px; EN: To revert to 320px, change this line: flex: 0 0 260px; --------------------------------------------------------- */ body:not(.path-product) .main-container { display: flex; align-items: flex-start; gap: 32px; width: 100%; max-width: 100%; } body:not(.path-product) #main { flex: 1 1 auto; min-width: 0; } /* OLD / RÉGI: flex: 0 0 320px; width: 320px; max-width: 320px; */ body:not(.path-product) #sidebar-left, body:not(.path-product) .sidebar-left, body:not(.path-product) aside.sidebar-left { flex: 0 0 260px; width: 260px; max-width: 260px; } /* --------------------------------------------------------- 4) WEBSHOP TERMÉKKÁRTYÁK / WEBSHOP PRODUCT CARDS HU: A Views grid termékkártyáit formázza. Csak a webshop oldalon (.path-webshop) aktív. A Views HTML struktúra: .views-view-grid > .views-row > .views-col .views-field-title (cím) .views-field-price__number (ár) .views-field-field-image (kép) Az elválasztó • karaktereket elrejtjük. EN: Styles the Views grid product cards. Active on webshop page (.path-webshop) only. Views HTML structure: .views-view-grid > .views-row > .views-col .views-field-title (title) .views-field-price__number (price) .views-field-field-image (image) The bullet • separators are hidden. ROLLBACK: HU: Töröld ezt a teljes 4. szekciót. EN: Delete this entire section 4. --------------------------------------------------------- */ /* A grid sor flex konténerként viselkedjen / Grid row as flex container */ body.path-webshop .views-view-grid .views-row { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; width: 100% !important; } /* Egy termékkártya / Single product card */ body.path-webshop .views-view-grid .views-col { /* OLD / RÉGI: width: 33.333333333333% (inline style a Views-ből) */ width: calc(33.333% - 14px) !important; background: #fff !important; border: 1px solid #e8e0d0 !important; border-radius: 8px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; transition: box-shadow 0.2s ease !important; box-sizing: border-box !important; padding: 0 !important; } body.path-webshop .views-view-grid .views-col:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important; } /* HU: Kép felülre kerül - a flex-direction: column miatt az order: -1 a kép mezőt a lista elejére tolja. EN: Image goes to top - with flex-direction: column, order: -1 pushes the image field to the front. */ body.path-webshop .views-field-field-image { order: -1 !important; width: 100% !important; margin: 0 !important; } body.path-webshop .views-field-field-image img { width: 100% !important; /* OLD / RÉGI: height: 200px !important; object-fit: cover !important; HU: A rögzített magasság elvágta a termékképeket. Visszaállítva auto-ra. EN: Fixed height was cropping product images. Reverted to auto. */ height: auto !important; object-fit: contain !important; display: block !important; border-radius: 0 !important; } /* Cím stílus / Title style */ body.path-webshop .views-field-title { padding: 10px 12px 4px 12px !important; order: 0 !important; } body.path-webshop .views-field-title a { font-weight: 600 !important; color: #2b2112 !important; text-decoration: none !important; font-size: 0.9rem !important; line-height: 1.4 !important; display: block !important; } body.path-webshop .views-field-title a:hover { color: #b88a1d !important; } /* Ár stílus / Price style */ body.path-webshop .views-field-price__number { padding: 4px 12px 12px 12px !important; order: 1 !important; color: #b88a1d !important; font-weight: 700 !important; font-size: 1rem !important; } /* HU: A Views alapból  •  elválasztókat szúr be a mezők közé. Ezeket CSS-sel elrejtjük. A selector a Views-generált szövegcsomópontra céloz. EN: Views inserts  •  separators between fields. We hide them with CSS targeting the text nodes around the Views field spans. */ body.path-webshop .views-view-grid .views-col > span.views-field + br, body.path-webshop .views-view-grid .views-col > .views-field ~ .views-field::before { display: none !important; } /* HU: Alternatív megoldás: a teljes views-col szöveges tartalmát (a • karaktereket) elrejtjük, csak a span.views-field elemek maradnak láthatók. EN: Alternative: hide the raw text content (• chars) of views-col, keeping only span.views-field visible. */ body.path-webshop .views-view-grid .views-col { font-size: 0 !important; } body.path-webshop .views-view-grid .views-col .views-field, body.path-webshop .views-view-grid .views-col .views-field * { font-size: initial !important; } body.path-webshop .views-view-grid .views-col .views-field-title a { font-size: 0.9rem !important; } body.path-webshop .views-view-grid .views-col .views-field-price__number { font-size: 1rem !important; } /* Reszponzív / Responsive */ @media (max-width: 900px) { body:not(.path-product) .main-container { flex-direction: column !important; } body:not(.path-product) #sidebar-left, body:not(.path-product) .sidebar-left, body:not(.path-product) aside.sidebar-left { flex: none !important; width: 100% !important; max-width: 100% !important; } body.path-webshop .views-view-grid .views-col { width: calc(50% - 10px) !important; } } @media (max-width: 600px) { body.path-webshop .views-view-grid .views-col { width: 100% !important; } } /* --------------------------------------------------------- 5) BIZTONSÁGI RESET / SAFETY RESET HU: Képek, videók, iframek ne lógjanak ki a konténerből EN: Images, videos, iframes should not overflow container --------------------------------------------------------- */ img, iframe, video { max-width: 100%; height: auto; }