/* ============================================================ Mélia Kids — theme stylesheet Épül a style.css tetején definiált --mk-* design tokenekre. Osztálynevek 1:1 a hivatalos design-system.html / fooldal / piactér mockupokból (unprefixed: .btn, .card, .badge, .nav, .footer, ...), hogy a design docs-ból copy-paste-elt markup mindig illeszkedjen. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--mk-cream); color: var(--mk-walnut); font-family: var(--mk-font-body); font-size: 16px; line-height: 1.7; /* FONTOS: `overflow-x: hidden` a -n NEM használható! Amint a body-nak nem `visible` az egyik tengelye, a böngésző a másikat `auto`-ra állítja, és a body SAJÁT görgetési tartománnyá válik. Ettől elromlik az IntersectionObserver (a piactér görgetéses termékbetöltése emiatt nem indult el a kategória-oldalakon) és a `position: sticky` is. A `clip` ugyanúgy levágja a vízszintes túlcsordulást, de NEM hoz létre görgetési tartományt. A vízszintes védelmet a html-re tesszük. */ overflow-x: clip; } html { overflow-x: hidden; } img { max-width: 100%; display: block; } ::selection { background: var(--mk-terracotta-soft); } /* Vintage papírszemcse az egész oldalon (design system aláírás-eleme) */ body::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='0.7'/%3E%3C/svg%3E"); } .fleuron { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--mk-gold); font-size: 13px; padding: 0 0 clamp(40px, 5vw, 56px); } .fleuron::before, .fleuron::after { content: ""; width: min(120px, 18vw); height: 1px; background: linear-gradient(to right, transparent, var(--mk-gold)); opacity: 0.55; } .fleuron::after { background: linear-gradient(to left, transparent, var(--mk-gold)); } /* ---------- Tipográfia ---------- */ .display, h1.display { font-family: var(--mk-font-display); font-weight: 500; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.12; letter-spacing: -0.01em; } h1, .h1 { font-family: var(--mk-font-display); font-weight: 500; font-size: clamp(32px, 4vw, 40px); line-height: 1.15; margin: 0 0 var(--mk-space-4); } h2, .h2 { font-family: var(--mk-font-display); font-weight: 500; font-size: clamp(26px, 3.2vw, 30px); line-height: 1.25; margin: 0 0 var(--mk-space-4); } h3, .h3 { font-family: var(--mk-font-display); font-weight: 500; font-size: 24px; line-height: 1.3; margin: 0 0 var(--mk-space-3); } h4, h5, h6 { font-family: var(--mk-font-display); font-weight: 500; margin: 0 0 var(--mk-space-2); } p { margin: 0 0 var(--mk-space-4); } .accent-italic { font-family: var(--mk-font-display); font-style: italic; font-weight: 400; color: var(--mk-terracotta); } .eyebrow { font-family: var(--mk-font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mk-warmgray); display: flex; align-items: center; gap: 14px; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--mk-gold); flex-shrink: 0; } /* A főoldal saját mockupja (melia-kids-fooldal.html) csillagot használ vonal helyett. */ .home .eyebrow::before { content: "\2726"; width: auto; height: auto; background: none; font-size: 9px; color: var(--mk-gold); line-height: 1; } .body-lg { font-size: 18px; } .small { font-size: 14px; } .caption { font-size: 12px; color: var(--mk-warmgray); } .muted { color: var(--mk-warmgray); } a { color: var(--mk-terracotta); } .link { color: var(--mk-terracotta); text-decoration: none; border-bottom: 1px solid rgba(184,107,75,0.35); transition: border-color var(--mk-ease); } .link:hover { border-color: var(--mk-terracotta); } /* ---------- Akadálymentesség: csak képernyőolvasónak ---------- A WordPress mag és a WooCommerce is kiír `.screen-reader-text` elemeket (pl. „Ugrás a tartalomra", űrlap-feliratok), de a stílust a TÉMÁNAK kell adnia — enélkül ezek láthatóan beleírnak a designba. Egyben ezzel tudunk szemantikailag szükséges, de vizuálisan felesleges címsorokat elhelyezni. `display:none` NEM jó: azt a képernyőolvasó sem olvassa fel. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Billentyűzettel fókuszálva viszont LÁTSZÓDJON (pl. „Ugrás a tartalomra”). */ .screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; padding: 8px 16px; overflow: visible; clip: auto; clip-path: none; background: var(--mk-cream); color: var(--mk-walnut); } /* ---------- Elrendezés ---------- */ .wrap { max-width: var(--mk-content-width); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } section { position: relative; } .section-pad { padding: clamp(64px, 8vw, 96px) 0; } /* Gutenberg align-wide/align-full klasszikus témában (nincs theme.json layout). Az alapblokkok (szöveg) OLVASHATÓ mérőt (~72 karakter) kapnak, a wide/full képek/szekciók szélesebbet — így a hosszú szövegű statikus oldalak (Rólunk, ÁSZF, GYIK) kényelmesen olvashatók, a kiemelt elemek mégis levegősek. */ /* Az .entry-content a .pagehead-del AZONOS szélességű, középre zárt konténer (content-width + ugyanaz a padding), a próza pedig BALRA igazítva a konténer bal széléhez — így a tartalom pontosan a cím alatt, azonos bal széllel kezdődik (nem lebeg középen). A wide/full elemek szélesebbek maradnak. */ .entry-content { max-width: var(--mk-content-width); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); padding-block: var(--mk-space-8) var(--mk-space-9); } .entry-content > * { max-width: var(--mk-prose-width, 46rem); margin-inline: 0; } .entry-content > .alignwide { max-width: min(var(--mk-content-width), 1040px); } .entry-content > .alignfull { max-width: none; width: 100%; margin-inline: clamp(-48px, -4vw, -20px); } /* ---------- Statikus oldalak tipográfiája (.entry-content prose) ---------- Design-rendszer szerinti szöveg-stílus, hogy MINDEN natív Gutenberg tartalom (címsor/bekezdés/lista/idézet/kép/táblázat) egységesen, arculatosan jelenjen meg — az ügyfél csak a szöveget írja, a kinézet innen jön. */ .entry-content { color: var(--mk-walnut); font-family: var(--mk-font-body); font-size: var(--mk-fs-body-lg); line-height: 1.72; } .entry-content > * + * { margin-top: var(--mk-space-5); } .entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--mk-font-display); font-weight: 500; color: var(--mk-walnut); line-height: 1.2; } .entry-content h2 { font-size: var(--mk-fs-h2); margin-top: var(--mk-space-8); } .entry-content h3 { font-size: var(--mk-fs-h3); margin-top: var(--mk-space-7); } .entry-content h4 { font-size: var(--mk-fs-body-lg); letter-spacing: 0.01em; margin-top: var(--mk-space-6); } .entry-content > h2:first-child, .entry-content > h3:first-child { margin-top: 0; } .entry-content p { margin: 0; } .entry-content a { color: var(--mk-terracotta); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--mk-ease); } .entry-content a:hover { color: var(--mk-terracotta-hover); } /* A .btn saját színét a prózás link-szín (fent) NE írja felül — különben a .btn--primary szövege terrakotta lenne terrakottán (láthatatlan). */ .entry-content a.btn { text-decoration: none; } .entry-content a.btn--primary, .entry-content a.btn--primary:hover, .entry-content a.btn--on-dark, .entry-content a.btn--on-dark-primary, .entry-content a.btn--on-dark-primary:hover { color: #fff; } .entry-content a.btn--secondary, .entry-content a.btn--secondary:hover, .entry-content a.btn--ghost { color: var(--mk-walnut); } /* Gutenberg gomb-blokk a prózában: a próza-link szín (.entry-content a) NE írja felül a gomb fehér szövegét (különben terrakotta-terrakottán = eltűnik). */ .entry-content .wp-block-button__link, .entry-content .wp-block-button__link:hover { color: #fff; text-decoration: none; } .entry-content .wp-block-button.is-style-outline .wp-block-button__link { color: var(--mk-walnut); } /* A gomb-blokk fölött MINDIG legyen levegő (oszlopon belül a próza-ritmus nem éri el, ezért alapból 0 lenne) — egységes, nagyobb térköz. */ .entry-content .wp-block-buttons { margin-top: var(--mk-space-6); } .entry-content strong, .entry-content b { font-weight: 600; color: var(--mk-walnut); } .entry-content ul, .entry-content ol { margin: 0; padding-left: 1.4em; } .entry-content li + li { margin-top: var(--mk-space-2); } .entry-content ul { list-style: disc; padding-left: 1.4em; } .entry-content ul > li { padding-left: 0; } .entry-content ul > li::before { content: none; } .entry-content ul > li::marker { color: var(--mk-warmgray); } .entry-content ol { list-style: decimal; } .entry-content ol > li::marker { color: var(--mk-terracotta); font-family: var(--mk-font-display); } /* KÉP-RENDSZER a tartalomban: bármilyen beszúrt kép egységesen jelenik meg. A kulcs a MAGASSÁG-KORLÁT (max-height) + arány-tartás (width/height auto): így a magas portré képek sem lesznek túl nagyok, a fekvők kitöltik a szélességet, mind középre igazítva, kerek sarokkal, egyenletes térközzel. Így a kliens akármilyen képet szúr be (blokk-szerkesztő VAGY nyers img), automatikusan rendezett marad. */ .entry-content img { display: block; max-width: 100%; width: auto; height: auto; max-height: 560px; margin: var(--mk-space-6) 0; border-radius: var(--mk-radius-lg); } .entry-content p img, .entry-content li img { margin-block: var(--mk-space-4); } .entry-content figure { margin: var(--mk-space-6) 0; text-align: left; } .entry-content figure img { margin: 0; } .entry-content .wp-block-image { margin: var(--mk-space-6) 0; text-align: left; } .entry-content .wp-block-image img { margin: 0; } .entry-content figcaption, .entry-content .wp-block-image figcaption { font-size: var(--mk-fs-small); color: var(--mk-warmgray); text-align: left; margin-top: var(--mk-space-3); } /* Gutenberg igazítások (ha a kliens balra/jobbra/középre igazít) — a középre igazítás a próza-oszlopon belül a képet is középre teszi. */ .entry-content .aligncenter { margin-inline: auto; text-align: center; } .entry-content .aligncenter img, .entry-content img.aligncenter { margin-inline: auto; } .entry-content .alignleft, .entry-content img.alignleft { float: left; margin: 6px 24px 14px 0; max-width: 48%; } .entry-content .alignright, .entry-content img.alignright { float: right; margin: 6px 0 14px 24px; max-width: 48%; } @media (max-width: 560px) { .entry-content .alignleft, .entry-content .alignright, .entry-content img.alignleft, .entry-content img.alignright { float: none; max-width: 100%; margin: var(--mk-space-4) auto; } } /* Galéria: egységes rács, azonos magasságú (kivágott) képek */ /* Gutenberg galéria: a core `is-layout-flex` apróra zsugorítja a képeket — felülírjuk RÁCSRA (a .is-layout-flex a szelektorban emeli a specificitást). */ .entry-content .wp-block-gallery, .entry-content .wp-block-gallery.is-layout-flex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; padding: 0; margin: var(--mk-space-6) 0; } .entry-content .wp-block-gallery.columns-1 { grid-template-columns: 1fr; } .entry-content .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); } .entry-content .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); } .entry-content .wp-block-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); } .entry-content .wp-block-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); } /* flex-gyerekek reset: a core `flex`/`width:calc()` ne zsugorítson a rácscellában */ .entry-content .wp-block-gallery figure, .entry-content .wp-block-gallery .wp-block-image, .entry-content .wp-block-gallery li { margin: 0; width: auto !important; max-width: none !important; flex: initial !important; } .entry-content .wp-block-gallery img { width: 100%; height: 100%; max-height: none; aspect-ratio: 1; object-fit: cover; margin: 0; border-radius: var(--mk-radius-sm); display: block; } @media (max-width: 640px) { .entry-content .wp-block-gallery, .entry-content .wp-block-gallery.is-layout-flex { grid-template-columns: repeat(2, 1fr); } } .entry-content blockquote { margin: 0; padding: var(--mk-space-4) var(--mk-space-6); border-left: 3px solid var(--mk-terracotta); background: var(--mk-sage-soft); border-radius: 0 var(--mk-radius-md) var(--mk-radius-md) 0; font-family: var(--mk-font-display); font-size: var(--mk-fs-h3); font-style: italic; color: var(--mk-walnut-soft); } .entry-content blockquote p { margin: 0; } .entry-content hr, .entry-content .wp-block-separator { border: none; height: 1px; background: var(--mk-border); max-width: 80px; margin-inline: auto; } .entry-content .wp-block-separator.is-style-wide { max-width: var(--mk-prose-width, 46rem); } .entry-content table { width: 100%; border-collapse: collapse; font-size: var(--mk-fs-body); } .entry-content th, .entry-content td { text-align: left; padding: var(--mk-space-3) var(--mk-space-4); border-bottom: 1px solid var(--mk-border); } .entry-content th { font-family: var(--mk-font-display); font-weight: 500; color: var(--mk-walnut); } /* Natív "Details" blokk = GYIK harmonika, JS nélkül. */ .entry-content .wp-block-details { border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); padding: var(--mk-space-4) var(--mk-space-5); background: var(--mk-paper); transition: border-color var(--mk-ease); } .entry-content .wp-block-details + .wp-block-details { margin-top: var(--mk-space-3); } .entry-content .wp-block-details[open] { border-color: var(--mk-sage); } .entry-content .wp-block-details summary { font-family: var(--mk-font-display); font-size: var(--mk-fs-body-lg); font-weight: 500; color: var(--mk-walnut); cursor: pointer; list-style-position: inside; } .entry-content .wp-block-details summary:hover { color: var(--mk-terracotta); } .entry-content .wp-block-details > *:not(summary) { margin-top: var(--mk-space-3); } /* ---------- Gombok ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--mk-font-body); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--mk-radius-md); border: 1px solid transparent; padding: 15px 32px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--mk-ease), border-color var(--mk-ease), color var(--mk-ease), transform var(--mk-ease); } .btn:active { transform: scale(0.985); } .btn:focus-visible { outline: 2px solid var(--mk-terracotta); outline-offset: 3px; } .btn--primary { background: var(--mk-terracotta); color: #fff; } .btn--primary:hover { background: var(--mk-terracotta-hover); color: #fff; } .btn--secondary { background: transparent; color: var(--mk-walnut); border-color: var(--mk-walnut); } .btn--secondary:hover { background: rgba(62,46,34,0.06); } .btn--ghost { background: transparent; color: var(--mk-walnut); padding: 15px 4px; border: none; } .btn--ghost::after { content: "\2192"; font-size: 15px; transition: transform var(--mk-ease); } .btn--ghost:hover { color: var(--mk-sage-hover); } .btn--ghost:hover::after { transform: translateX(4px); } .btn--on-dark-primary { background: var(--mk-terracotta); color: #fff; } .btn--on-dark-primary:hover { background: var(--mk-terracotta-hover); } .btn--on-dark { background: transparent; color: var(--mk-cream); border-color: rgba(247,243,236,0.5); } .btn--on-dark:hover { border-color: var(--mk-cream); background: rgba(247,243,236,0.08); } .btn--ghost-dark { background: transparent; color: var(--mk-cream); padding: 15px 4px; border: none; } .btn--ghost-dark::after { content: "\2192"; font-size: 15px; transition: transform var(--mk-ease); } .btn--ghost-dark:hover { color: var(--mk-gold); } .btn--ghost-dark:hover::after { transform: translateX(4px); } .btn--sm { padding: 11px 22px; font-size: 12px; } .btn--lg { padding: 17px 38px; font-size: 14px; } .btn:disabled, .btn--disabled { background: var(--mk-cream-deep); color: var(--mk-warmgray); border-color: transparent; cursor: not-allowed; transform: none; } /* WordPress core block gombok is a rendszer nyelvét beszéljék */ .wp-block-button__link { background: var(--mk-terracotta); color: #fff; border-radius: var(--mk-radius-md); font-family: var(--mk-font-body); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: 15px 32px; } .wp-block-button__link:hover { background: var(--mk-terracotta-hover); } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--mk-walnut); border: 1px solid var(--mk-walnut); } /* ---------- Badge ---------- */ .badge { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--mk-radius-pill); } .badge--cream { background: var(--mk-cream); color: var(--mk-walnut); border: 1px solid var(--mk-border); } .badge--sage { background: var(--mk-sage-soft); color: #5A6B4C; } .badge--terracotta { background: var(--mk-terracotta-soft); color: var(--mk-terracotta-hover); } .badge--gold { background: var(--mk-gold-soft); color: #8A6A33; } .badge--dark { background: var(--mk-walnut); color: var(--mk-cream); } /* ---------- Kártyák ---------- */ .card { background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: var(--mk-space-5); transition: box-shadow var(--mk-ease), transform var(--mk-ease); } .card--hover:hover { box-shadow: var(--mk-shadow-md); transform: translateY(-2px); } /* ---------- Értesítések ---------- */ .notice { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--mk-radius-md); padding: 16px 20px; font-size: 14px; line-height: 1.6; border: 1px solid transparent; } .notice--info { background: var(--mk-sage-soft); border-color: rgba(147,160,132,0.4); color: #4E5C42; } .notice--success { background: var(--mk-success-soft); border-color: rgba(95,115,80,0.35); color: var(--mk-success); } .notice--warning { background: var(--mk-warning-soft); border-color: rgba(138,106,51,0.3); color: var(--mk-warning); } .notice--error { background: var(--mk-error-soft); border-color: rgba(155,59,46,0.3); color: var(--mk-error); } /* ---------- Űrlapelemek ---------- */ .field { display: flex; flex-direction: column; gap: 8px; max-width: 380px; } .field label { font-size: 13px; font-weight: 500; letter-spacing: 0.04em; } .field .hint { font-size: 12px; color: var(--mk-warmgray); } .input, .select, .textarea { font-family: var(--mk-font-body); font-size: 15px; color: var(--mk-walnut); background: var(--mk-white); border: 1px solid var(--mk-border-strong); border-radius: var(--mk-radius-md); padding: 13px 16px; width: 100%; transition: border-color var(--mk-ease), box-shadow var(--mk-ease); } .input::placeholder, .textarea::placeholder { color: #A79E93; } .input:hover, .select:hover, .textarea:hover { border-color: var(--mk-walnut); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--mk-terracotta); box-shadow: 0 0 0 3px rgba(184,107,75,0.16); } .input--error { border-color: var(--mk-error); } .error-msg { font-size: 12px; color: var(--mk-error); } .textarea { min-height: 110px; resize: vertical; } .select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233E2E22' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } .check-row { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; } .check-row input { appearance: none; width: 20px; height: 20px; flex-shrink: 0; border: 1px solid var(--mk-border-strong); border-radius: 5px; background: var(--mk-white); display: grid; place-content: center; cursor: pointer; transition: background var(--mk-ease), border-color var(--mk-ease); } .check-row input[type="radio"] { border-radius: 50%; } .check-row input:checked { background: var(--mk-terracotta); border-color: var(--mk-terracotta); } /* ============================================================ WOOCOMMERCE TELJES SZÍN-RESET (globális, az egész site-ra) A WooCommerce saját CSS-e (woocommerce-general, amit szándékosan megtartunk a csillag-értékelés ikonfontja és az alap form/select2 stílusok miatt) a :where() CSS-trükkel mesterségesen megnöveli bizonyos szabályai specificitását (pl. .button.alt, div.product .price/.stock, .woocommerce-breadcrumb) — a :where() maga nulla specificitású, de a benne lévő extra osztályok mégis magasabb specificitást adnak, mint egy sima "egy-két osztályos" szelektorunk. Ahelyett hogy oldalanként !important-tal foltoznánk (ahogy a termékoldalon tettük), itt EGYSZER, globálisan (kosár/pénztár/fiók/shop is beleértve) lecseréljük az összes ismert WC szín-opíniót a saját design tokenjeinkre. Elementor-maradvány nincs a site-on (a plugin ki van kapcsolva, semmilyen CSS/JS-t nem ad ki többé) — ez itt kizárólag a WooCommerce saját alapértelmezéseit nullázza. ============================================================ */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { background: var(--mk-cream-deep) !important; color: var(--mk-walnut) !important; border: 1px solid var(--mk-border-strong) !important; border-radius: var(--mk-radius-md) !important; font-family: var(--mk-font-body) !important; font-weight: 500 !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background: var(--mk-cream) !important; color: var(--mk-walnut) !important; } .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt { background: var(--mk-terracotta) !important; color: #fff !important; border-color: transparent !important; } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover { background: var(--mk-terracotta-hover) !important; color: #fff !important; } .woocommerce a.button.alt.disabled, .woocommerce button.button.alt.disabled, .woocommerce input.button.alt.disabled, .woocommerce .button.disabled, .woocommerce .button:disabled, .woocommerce .wc-variation-selection-needed { background: var(--mk-cream-deep) !important; color: var(--mk-warmgray) !important; } .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce ul.products li.product .price, .woocommerce .price { color: var(--mk-sage-hover) !important; } .woocommerce div.product .stock, .woocommerce .stock.in-stock { color: var(--mk-success) !important; } .woocommerce div.product .stock.out-of-stock, .woocommerce .out-of-stock { color: var(--mk-error) !important; } .woocommerce-breadcrumb, .woocommerce-breadcrumb a { color: var(--mk-warmgray) !important; } .woocommerce #reviews #comments ol.commentlist li .meta { color: var(--mk-warmgray) !important; } /* ============================================================ NAVIGÁCIÓ — fix, kétsoros: márka+eszközsáv / elválasztó / piactér+kategóriák ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(247,243,236,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 300ms ease; } .nav.scrolled { border-bottom-color: var(--mk-border); } .nav__row { max-width: var(--mk-content-width); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); display: flex; align-items: center; } .nav__row--top { gap: 36px; padding-top: 16px; padding-bottom: 14px; } .nav__brand { font-family: var(--mk-font-display); font-weight: 500; font-size: 26px; color: var(--mk-walnut); text-decoration: none; margin-right: auto; line-height: 1.1; } .nav__brand em { color: var(--mk-terracotta); font-style: italic; } .nav__divider { max-width: var(--mk-content-width); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } .nav__divider span { display: block; height: 1px; background: var(--mk-border); } .nav__row--bottom { gap: 26px; padding-top: 12px; padding-bottom: 14px; justify-content: flex-end; } .nav__market { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-cream); background: var(--mk-walnut); text-decoration: none; padding: 10px 20px; border: 1px solid var(--mk-walnut); border-radius: var(--mk-radius-pill); transition: background var(--mk-ease), border-color var(--mk-ease), color var(--mk-ease); } .nav__market:hover, .nav__market.active { background: var(--mk-terracotta); border-color: var(--mk-terracotta); } .nav__sep { width: 1px; height: 20px; background: var(--mk-border); flex-shrink: 0; } .nav__links { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .nav__links a { font-size: 13px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mk-walnut); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color var(--mk-ease), border-color var(--mk-ease); } .nav__links a:hover { color: var(--mk-sage-hover); } .nav__links .current-menu-item > a, .nav__links a.active { border-color: var(--mk-sage-hover); } /* A jobb oldali eszközsáv KITÖLTI a márkanév utáni helyet (`flex: 1 1 auto`), * és jobbra igazítja a tartalmát — nem a tartalmából méretezi magát. * * Ez a lényeg: a saját TARTALMI szélessége böngészőnként eltér (Firefox és a * Chromium másképp számolja a keresőmező hozzájárulását), és amíg ebből * méretezett, Firefoxban hol a „Mélia Klub” tört két sorba, hol kilógott a * sávból. Növekedő elemként a rendelkezésre álló helyet kapja, így a méretezés * böngészőfüggetlen: a kereső tartja a 420px-et, ha van hely, és zsugorodik, * ha nincs — a menüpontok pedig soha nem törnek és nem tűnnek el. */ .nav__utils { display: flex; align-items: center; justify-content: flex-end; gap: 24px; flex: 1 1 auto; min-width: 0; } .nav__utils > .nav__util { flex-shrink: 0; white-space: nowrap; } .nav__utils > .nav__util { flex-shrink: 0; white-space: nowrap; } .nav__util { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mk-walnut); text-decoration: none; border: none; background: none; cursor: pointer; transition: color var(--mk-ease); } .nav__util:hover { color: var(--mk-sage-hover); } .nav__util__icon { width: 18px; height: 18px; flex-shrink: 0; background: currentColor; } .icon-search { -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-user { -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-bag { -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center/contain no-repeat; } .nav__market::before { content: ""; width: 13px; height: 13px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat; } .nav__cart { position: relative; } .nav__cart__count { position: absolute; top: -7px; right: -11px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--mk-radius-pill); background: var(--mk-terracotta); color: #fff; font-size: 10px; font-weight: 500; display: grid; place-content: center; } .menu-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--mk-walnut); font-size: 22px; line-height: 1; padding: 4px 8px; margin-left: auto; } .nav__mobile-only { display: none; } @media (max-width: 1080px) { .nav__links, .nav__sep { display: none; } .nav__row--bottom { padding-top: 10px; padding-bottom: 12px; flex-wrap: wrap; } .menu-toggle { display: block; } /* Hamburger-panel: teljes szélességű, lecsukható lista a nav alatt. */ .nav__links.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--mk-border); } .nav__links.is-open li { width: 100%; } .nav__links.is-open a { display: block; width: 100%; padding: 14px 2px; font-size: 14px; border-bottom: 1px solid var(--mk-border); } .nav__links.is-open li:last-child a { border-bottom: none; } .nav__links.is-open a:hover { color: var(--mk-terracotta); } } @media (max-width: 900px) { /* A szöveges eszköz-linkek (Klub, Blog) a felső sávból a hamburgerbe kerülnek. */ .nav__util--extra { display: none; } .nav__links.is-open .nav__mobile-only { display: block; } .nav__row--top { gap: 16px; } .nav__utils { gap: 20px; } } /* TARTALÉK keresőűrlap: csak akkor renderelődik, ha a FiboSearch plugin nincs aktív. Ugyanaz a pirula-forma, mint a plugin mezőjénél, hogy a fejléc képe ne változzon. (A `form.` előtag azért kell, hogy ne fogja meg a FiboSearch burkoló DIV-jét, ami szintén `.nav__search`.) */ form.nav__search { height: 40px; padding: 0 6px 0 16px; background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill); } form.nav__search input[type="search"] { flex: 1 1 auto; min-width: 0; width: 100%; border: none; background: none; font-size: 13.5px; color: var(--mk-walnut); margin: 0; font-family: var(--mk-font-body); } form.nav__search input[type="search"]::placeholder { color: var(--mk-warmgray); } form.nav__search input[type="search"]:focus { outline: none; box-shadow: none; } .nav__search__btn { flex-shrink: 0; border: none; background: none; padding: 4px; cursor: pointer; color: var(--mk-terracotta); display: inline-flex; align-items: center; } .nav__search__btn .nav__util__icon { width: 17px; height: 17px; background: currentColor; } /* Csak a SZÖVEG-címkéket rejtjük mobilon, az ikon (.nav__util__icon) NEM tűnhet el, és a kosár-számláló badge sem. */ @media (max-width: 640px) { .nav__util > span:not(.nav__cart__count):not(.nav__util__icon) { display: none; } .nav__brand { margin-right: 12px; font-size: 20px; } .nav__utils { flex: 1 1 auto; gap: 14px; } form.nav__search { height: 38px; } } /* ---------- FiboSearch a fejlécben ---------- EGYETLEN keresőmező van a lapon, a fejléc eszközsorában — se legördülő panel, se külön mobil mező. Korábban KÉT példány volt (fejléc + panel), a plugin mindkettőt inicializálta, és mobilon emiatt duplázódott a mező. A plugin „Pirx" stílusa MAGAS FAJSÚLYÚ szelektorokkal dolgozik, ezért ugyanazt az alakot használjuk `.nav` előtaggal — nem `!important`-tal. A nagyító ikon a mező BAL oldalán ülő gomb SVG-je (ezért a bal belső margó), és csak `background-color`-t írunk felül, hogy a plugin hátterei ne sérüljenek. */ /* 420px az alapszélesség, zsugorodás ENGEDVE — így szűk sávban a mező adja át a helyet, nem a menüpontok tűnnek el a konténerből. Növekednie nem kell: a `.nav__utils` növekvő elem, a maradék hely a mezőtől BALRA gyűlik össze (`justify-content: flex-end`), a mező pedig marad 420px. */ .nav__search { display: flex; align-items: center; min-width: 0; flex: 0 1 420px; margin-right: 14px; } /* A mezőnek ZSUGORODNIA kell, különben szűk kijelzőn kitolja a Fiók/Kosár ikonokat a képernyőről. A `min-width: 0` mindhárom szinten kell, mert a flex-elemek alapból nem mennek a tartalmuk alá. */ .nav__search .dgwt-wcas-search-wrapp { width: 100%; min-width: 0; } .nav__search .dgwt-wcas-search-form, .nav__search .dgwt-wcas-sf-wrapp { min-width: 0; width: 100%; } .nav .dgwt-wcas-search-wrapp input[type="search"].dgwt-wcas-search-input { min-width: 0; width: 100%; } /* A plugin fehér belső doboza felesleges — a keretet maga a mező adja. */ .nav .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp { background: none; box-shadow: none; border-radius: 0; padding: 0; } .nav .dgwt-wcas-style-pirx.dgwt-wcas-search-wrapp input[type="search"].dgwt-wcas-search-input { height: 40px; padding: 0 48px 0 18px; background-color: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill); color: var(--mk-walnut); font-family: var(--mk-font-body); font-size: 13.5px; box-shadow: none; } .nav .dgwt-wcas-style-pirx.dgwt-wcas-search-wrapp input[type="search"].dgwt-wcas-search-input:focus, .nav .dgwt-wcas-style-pirx.dgwt-wcas-search-wrapp.dgwt-wcas-search-focused input[type="search"].dgwt-wcas-search-input { outline: none; background-color: var(--mk-white); border-color: var(--mk-terracotta); box-shadow: 0 0 0 3px rgba(173, 97, 66, 0.14); } .nav .dgwt-wcas-search-wrapp .dgwt-wcas-search-input::placeholder { color: var(--mk-warmgray); } /* A nagyító-gomb abszolút pozicionált. A plugin BALRA teszi, és FIX `top`-ot ad neki (a saját 54px-es mezőjéhez számolva) — a mi alacsonyabb mezőnkben ettől kicsúszott. Itt a JOBB oldalra kötjük, 8px-re a mező szélétől, és függőlegesen középre — a mező magasságától függetlenül. */ .nav .dgwt-wcas-style-pirx.dgwt-wcas-search-wrapp button.dgwt-wcas-search-submit, .nav .dgwt-wcas-style-pirx.dgwt-wcas-search-wrapp .dgwt-wcas-preloader { top: 50%; bottom: auto; transform: translateY(-50%); left: auto; right: 8px; } .nav .dgwt-wcas-search-wrapp button.dgwt-wcas-search-submit { background: none; box-shadow: none; } .nav .dgwt-wcas-search-wrapp button.dgwt-wcas-search-submit svg { fill: var(--mk-terracotta); } @media (max-width: 900px) { .nav__search { flex: 1 1 0; min-width: 90px; margin-right: 4px; } .nav .dgwt-wcas-style-pirx.dgwt-wcas-search-wrapp input[type="search"].dgwt-wcas-search-input { height: 38px; font-size: 13px; padding: 0 42px 0 14px; } } /* A fix nav miatt szükséges felső térköz a tartalomnak */ .site-main { padding-top: 128px; } .site-main--no-pad { padding-top: 0; } /* A prose lista-pötty (.entry-content ul>li::before, zsálye) NE kerüljön a WooCommerce listákra — pl. a szállítási-mód rádiók elé a kosárban/pénztárban. */ .entry-content .woocommerce ul { list-style: none; padding-left: 0; } .entry-content .woocommerce ul li { padding-left: 0; } .entry-content .woocommerce ul li::before { content: none; } /* ---------- Kosár oldal (klasszikus WooCommerce kosár, 2 oszlop 70/30) ---------- */ /* Kitörés a prose 46rem korlátból + 2 oszlopos grid: bal a tétel-lista (70%), jobb az összesítő (30%), ami görgetésnél sticky. A notices teljes szélességű. */ .woocommerce-cart .entry-content > .woocommerce { max-width: var(--mk-content-width); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: clamp(24px, 3vw, 44px); align-items: start; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-cart .woocommerce-cart-form { grid-column: 1; margin: 0; } .woocommerce-cart .cart-collaterals { grid-column: 2; width: auto; float: none; margin: 0; position: sticky; top: 150px; } .woocommerce-cart .cart-collaterals .cross-sells { display: none; } @media (max-width: 900px) { .woocommerce-cart .entry-content > .woocommerce { grid-template-columns: 1fr; } .woocommerce-cart .cart-collaterals { grid-column: 1; position: static; } } /* Tétel-lista táblázat — Mélia kártya-kinézet */ .woocommerce-cart table.cart { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); overflow: hidden; margin: 0; } .woocommerce-cart table.cart thead th { font-family: var(--mk-font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mk-warmgray); border-bottom: 1px solid var(--mk-border); padding: 16px; } .woocommerce-cart table.cart td { padding: 18px 16px; border-top: 1px solid var(--mk-border); vertical-align: middle; } .woocommerce-cart table.cart td.product-thumbnail img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--mk-radius-img); } .woocommerce-cart table.cart td.product-name a { font-family: var(--mk-font-display); font-weight: 500; color: var(--mk-walnut); text-decoration: none; } .woocommerce-cart table.cart td.product-name a:hover { color: var(--mk-terracotta); } .woocommerce-cart table.cart .product-price, .woocommerce-cart table.cart .product-subtotal { color: var(--mk-walnut); } .woocommerce-cart table.cart td.actions { background: transparent; padding: 16px; } .woocommerce-cart .product-remove a.remove { color: var(--mk-warmgray) !important; font-size: 20px; } .woocommerce-cart .product-remove a.remove:hover { background: var(--mk-terracotta) !important; color: #fff !important; } /* Mobil: a 6 oszlopos táblázat nem fér ki — soronként KÁRTYÁVÁ bontjuk. * A táblázat-megjelenítést blokkra váltjuk, a tétel-sor rács lesz: fent a kép, * a név és a törlés, alatta teljes szélességű címke–érték sorok. A címkéket a * WooCommerce `data-title` attribútumából vesszük, így nem duplikálunk szöveget * (és a fordítás is a pluginból jön). */ @media (max-width: 720px) { .woocommerce-cart table.cart, .woocommerce-cart table.cart tbody, .woocommerce-cart table.cart tr { display: block; width: 100%; } .woocommerce-cart table.cart thead { display: none; } .woocommerce-cart table.cart tr.cart_item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 2px 14px; padding: 16px; border-top: 1px solid var(--mk-border); } .woocommerce-cart table.cart tr.cart_item:first-child { border-top: none; } .woocommerce-cart table.cart tr.cart_item td { border: none; padding: 0; } .woocommerce-cart table.cart td.product-thumbnail { grid-column: 1; grid-row: 1; } .woocommerce-cart table.cart td.product-name { grid-column: 2; grid-row: 1; min-width: 0; } .woocommerce-cart table.cart td.product-remove { grid-column: 3; grid-row: 1; justify-self: end; } /* A többi cella teljes szélességű sor a kép/név alatt. */ .woocommerce-cart table.cart td.product-price, .woocommerce-cart table.cart td.product-quantity, .woocommerce-cart table.cart td.product-subtotal { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0 0; } .woocommerce-cart table.cart td.product-price::before, .woocommerce-cart table.cart td.product-quantity::before, .woocommerce-cart table.cart td.product-subtotal::before { content: attr(data-title); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mk-warmgray); } .woocommerce-cart table.cart td.product-subtotal { font-weight: 500; color: var(--mk-walnut); } .woocommerce-cart table.cart td.product-name a { display: block; overflow-wrap: break-word; } /* Kupon + kosár frissítése: egymás alá, teljes szélességben. */ .woocommerce-cart table.cart td.actions { display: block; padding: 16px; border-top: 1px solid var(--mk-border); } .woocommerce-cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; } .woocommerce-cart td.actions .coupon .input-text { flex: 1 1 140px; min-width: 0; } .woocommerce-cart td.actions .button { width: 100%; } } /* Összesítő doboz (jobb oszlop) */ .woocommerce-cart .cart_totals { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: var(--mk-space-5); } .woocommerce-cart .cart_totals h2 { font-family: var(--mk-font-display); font-weight: 500; font-size: var(--mk-fs-h3); color: var(--mk-walnut); margin: 0 0 18px; } .woocommerce-cart .cart_totals table { border: none; margin: 0; } .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { border-top: 1px solid var(--mk-border); padding: 12px 0; font-size: 14px; } .woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { font-family: var(--mk-font-display); font-size: 18px; color: var(--mk-walnut); } .woocommerce-cart .wc-proceed-to-checkout { padding: 18px 0 0; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; background: var(--mk-terracotta) !important; color: #fff !important; border-radius: var(--mk-radius-pill) !important; padding: 15px 20px !important; font-family: var(--mk-font-body); font-weight: 500; letter-spacing: 0.04em; font-size: 15px; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--mk-terracotta-hover) !important; } /* Kupon + kosár-frissítés sor */ .woocommerce-cart td.actions .coupon .input-text { border: 1px solid var(--mk-border-strong); border-radius: var(--mk-radius-md); padding: 10px 14px; } .woocommerce-cart td.actions .button { background: var(--mk-sage-hover) !important; color: #fff !important; border-radius: var(--mk-radius-pill) !important; } /* ---------- Pénztár (klasszikus WooCommerce checkout) ---------- */ /* Kitörés a prose 46rem korlátból + 2 oszlop: bal az adatok (~63%), jobb a rendelés-összegzés (~37%), ami görgetésnél sticky. */ .woocommerce-checkout .entry-content > .woocommerce { max-width: var(--mk-content-width); } .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; } .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; } .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 14px; } .woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 150px; } @media (max-width: 900px) { .woocommerce-checkout form.checkout { grid-template-columns: 1fr; } .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; position: static; } } /* Szekció-címek */ .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading { font-family: var(--mk-font-display); font-weight: 500; font-size: var(--mk-fs-h3); color: var(--mk-walnut); } .woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .woocommerce-shipping-fields > h3, .woocommerce-checkout .woocommerce-additional-fields > h3 { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--mk-border); } /* Mezők 2 oszlopban a rövidebb űrlaphoz: first→bal, last→jobb, wide→teljes. A név alapból first/last; a PHP szűrő az irsz.+város és telefon+e-mail párokat is 2-oszloposra állítja (lásd checkout_two_column_fields). */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .woocommerce-checkout .form-row-wide { grid-column: 1 / -1; } .woocommerce-checkout .form-row-first { grid-column: 1; } .woocommerce-checkout .form-row-last { grid-column: 2; } @media (max-width: 560px) { .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; } .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { grid-column: 1; } } /* Űrlap-mezők — Mélia input stílus */ .woocommerce-checkout .form-row { margin-bottom: 16px; } .woocommerce-checkout .form-row label { font-size: 13px; color: var(--mk-warmgray); margin-bottom: 6px; display: block; } .woocommerce-checkout .input-text, .woocommerce-checkout textarea, .woocommerce-checkout select, .woocommerce-checkout .select2-selection { border: 1px solid var(--mk-border-strong) !important; border-radius: var(--mk-radius-md) !important; padding: 11px 14px !important; font-family: var(--mk-font-body); font-size: 15px; color: var(--mk-walnut); background: var(--mk-white); min-height: 46px; width: 100%; box-shadow: none !important; } .woocommerce-checkout .input-text:focus, .woocommerce-checkout textarea:focus, .woocommerce-checkout select:focus { border-color: var(--mk-terracotta) !important; outline: none; box-shadow: 0 0 0 3px rgba(184,107,75,0.16) !important; } .woocommerce-checkout .select2-selection__rendered { line-height: 24px !important; color: var(--mk-walnut) !important; padding: 0 !important; } .woocommerce-checkout .select2-selection { display: flex; align-items: center; } /* Rendelés-összegzés doboz (jobb) + fizetés */ .woocommerce-checkout #order_review { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: var(--mk-space-5); } .woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100%; border: none; margin: 0 0 12px; } .woocommerce-checkout .woocommerce-checkout-review-order-table th, .woocommerce-checkout .woocommerce-checkout-review-order-table td { border-top: 1px solid var(--mk-border); padding: 12px 0; font-size: 14px; } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td { font-family: var(--mk-font-display); font-size: 18px; color: var(--mk-walnut); } .woocommerce-checkout #payment { background: transparent; border-radius: 0; } .woocommerce-checkout #payment ul.payment_methods { border: none; padding: 0 0 12px; } .woocommerce-checkout #payment div.payment_box { background: var(--mk-sage-soft); border-radius: var(--mk-radius-md); color: var(--mk-walnut-soft); font-size: 13px; } .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--mk-sage-soft); } .woocommerce-checkout #place_order { display: block; width: 100%; text-align: center; background: var(--mk-terracotta) !important; color: #fff !important; border-radius: var(--mk-radius-pill) !important; padding: 15px 20px !important; font-family: var(--mk-font-body); font-weight: 500; letter-spacing: 0.04em; font-size: 15px; margin-top: 8px; } .woocommerce-checkout #place_order:hover { background: var(--mk-terracotta-hover) !important; } /* Bejelentkezés / kupon "toggle" sávok */ .woocommerce-checkout .woocommerce-form-login-toggle, .woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 20px; } .woocommerce-checkout .checkout_coupon .button, .woocommerce-checkout .woocommerce-form-login .button { background: var(--mk-sage-hover) !important; color: #fff !important; border-radius: var(--mk-radius-pill) !important; } /* ---------- Fiókom (My Account) ---------- */ /* A fiók tartalma a TELJES tartalomszélességet kapja — ugyanazt, amiben az oldalfejléc („Fiókom” cím + morzsamenü) is ül. Korábban 1060px-re szűkült és középre zárt, ezért a bal széle beljebb kezdődött, mint a főcímé. Az `.entry-content > *` 46rem-es prose-korlátja alól is ki kell törnie. */ .woocommerce-account .entry-content > .woocommerce { max-width: none; margin-inline: 0; } /* Kijelentkezve: Bejelentkezés + Regisztráció két kártyaként egymás mellett, a közös fiók-szélességet kitöltve (nincs saját szűkítés). */ .woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); } .woocommerce-account .u-columns .col-1, .woocommerce-account .u-columns .col-2 { width: auto; float: none; } .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: var(--mk-space-6); margin: 0; } .woocommerce-account .u-columns h2 { font-family: var(--mk-font-display); font-weight: 500; font-size: var(--mk-fs-h3); color: var(--mk-walnut); margin: 0 0 18px; } @media (max-width: 720px) { .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; } } /* Csak belépés (regisztráció kikapcsolva): szűkebb, középre zárt login-kártya, középre igazított „Belépés" fejléccel. */ .woocommerce-account .woocommerce:has(> .woocommerce-form-login) { max-width: 460px; margin-inline: auto; } .woocommerce-account .woocommerce:has(> .woocommerce-form-login) > h2 { text-align: center; font-family: var(--mk-font-display); font-weight: 500; font-size: var(--mk-fs-h3); color: var(--mk-walnut); margin: 0 0 20px; } .woocommerce-account .woocommerce:has(> .woocommerce-form-login) .woocommerce-LostPassword { text-align: center; margin-top: 14px; } /* Alkotói belépés: „Partnerként jelentkezem" utalás a login-kártya alatt. */ .woocommerce-account .melia-creator-login__cta { text-align: center; margin-top: 20px; font-size: 14px; color: var(--mk-warmgray); } .woocommerce-account .melia-creator-login__cta a { color: var(--mk-terracotta); font-weight: 500; } /* Login/register mezők — Mélia input stílus */ .woocommerce-account .woocommerce-form-row label { font-size: 13px; color: var(--mk-warmgray); margin-bottom: 6px; display: block; } .woocommerce-account .woocommerce-form .input-text, .woocommerce-account .woocommerce-form input[type="text"], .woocommerce-account .woocommerce-form input[type="email"], .woocommerce-account .woocommerce-form input[type="password"] { border: 1px solid var(--mk-border-strong) !important; border-radius: var(--mk-radius-md) !important; padding: 11px 14px !important; font-family: var(--mk-font-body); font-size: 15px; color: var(--mk-walnut); background: var(--mk-white); min-height: 46px; width: 100%; box-shadow: none !important; } .woocommerce-account .woocommerce-form .input-text:focus, .woocommerce-account .woocommerce-form input:focus { border-color: var(--mk-terracotta) !important; outline: none; box-shadow: 0 0 0 3px rgba(184,107,75,0.16) !important; } .woocommerce-account .woocommerce-form-login__rememberme { font-size: 13px; color: var(--mk-warmgray); } /* WooCommerce jelszó-megjelenítő (show/hide) — rendes szem-ikon a mezőn belül, jobbra (a téma-reset miatt korábban pozíció/ikon nélkül lógott „pöcökként"). */ .woocommerce-account .password-input { position: relative; display: block; } .woocommerce-account .password-input .input-text, .woocommerce-account .password-input input { padding-right: 42px; width: 100%; } .woocommerce-account .show-password-input { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; margin: 0; padding: 0; border: 0; background-color: var(--mk-warmgray); cursor: pointer; -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat; } .woocommerce-account .show-password-input:hover { background-color: var(--mk-walnut); } .woocommerce-account .show-password-input.display-password { background-color: var(--mk-terracotta); } .woocommerce-account .woocommerce-form .woocommerce-Button, .woocommerce-account .woocommerce-form .button { display: inline-flex; align-items: center; justify-content: center; background: var(--mk-terracotta) !important; color: #fff !important; border: none !important; border-radius: var(--mk-radius-pill) !important; padding: 13px 26px !important; font-family: var(--mk-font-body); font-weight: 500; letter-spacing: 0.03em; font-size: 15px; cursor: pointer; } .woocommerce-account .woocommerce-form .woocommerce-Button:hover, .woocommerce-account .woocommerce-form .button:hover { background: var(--mk-terracotta-hover) !important; } .woocommerce-account .woocommerce-LostPassword a { color: var(--mk-sage-hover); font-size: 13px; } /* Bejelentkezve: nav (bal) + tartalom (jobb). A :has() miatt a grid CSAK a dashboardon aktiválódik (ahol van nav), a login nézetet nem érinti. */ .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; } /* Bármely EGYÉB közvetlen gyerek (értesítések, vagy pluginok által beszúrt "Kedvenceim"/wishlist link) teljes szélességű legyen — különben harmadik grid-elemként elcsúsztatná a nav/tartalom két oszlopát. */ .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; } .woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; grid-column: 1; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .woocommerce-account .woocommerce-MyAccount-navigation ul li::before { content: none; } .woocommerce-account .woocommerce-MyAccount-navigation-link a { display: block; padding: 11px 16px; border-radius: var(--mk-radius-md); color: var(--mk-warmgray); text-decoration: none; font-weight: 500; font-size: 14.5px; transition: background var(--mk-ease), color var(--mk-ease); } .woocommerce-account .woocommerce-MyAccount-navigation-link a:hover { background: var(--mk-cream); color: var(--mk-walnut); } .woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a { background: var(--mk-walnut); color: #fff; } .woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; grid-column: 2; } .woocommerce-account .woocommerce-MyAccount-content > *:first-child { margin-top: 0; } /* ----- A fiókfelület kártyás keretezése ----- * Korábban a menü és a tartalom keret nélkül „lebegett" a háttéren. Mindkettő * kártyát kap; a menü ezzel vizuálisan is oldalsávvá válik, nem csak egy * link-lista. A BEÁGYAZOTT elemekről (rendelés-táblázat, cím-kártyák) levesszük * a saját keretet és hátteret, különben kártya kerülne kártyába. */ .woocommerce-account .woocommerce-MyAccount-navigation { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 10px; position: sticky; top: 150px; } .woocommerce-account .woocommerce-MyAccount-content { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: clamp(22px, 3vw, 34px); } /* Kártya a kártyában elkerülése */ .woocommerce-account .woocommerce-MyAccount-content .shop_table, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address { background: transparent; border: none; border-radius: 0; padding: 0; } .woocommerce-account .woocommerce-MyAccount-content .shop_table thead th { border-bottom: 1px solid var(--mk-border); } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address + .woocommerce-Address { padding-left: clamp(18px, 2.5vw, 28px); border-left: 1px solid var(--mk-border); } /* Üdvözlő szöveg a vezérlőpulton — levegősebb sorok, halkabb másodlagos szín */ .woocommerce-account .woocommerce-MyAccount-content p { color: var(--mk-warmgray); } .woocommerce-account .woocommerce-MyAccount-content p strong { color: var(--mk-walnut); font-weight: 500; } .woocommerce-account .woocommerce-MyAccount-content a { color: var(--mk-terracotta); } /* Dokan „Go to Vendor Dashboard" gomb — a plugin nyers lila gombja helyett a * téma másodlagos gombja (alkotóknál jelenik meg, vásárlónál nem). */ .woocommerce-account .woocommerce-MyAccount-content a.dokan-btn, .woocommerce-account .woocommerce-MyAccount-content a.vendor-dashboard { display: inline-flex; align-items: center; margin-top: 6px; padding: 12px 24px; background: var(--mk-walnut); color: var(--mk-cream); border: none; border-radius: var(--mk-radius-pill); font-family: var(--mk-font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; text-shadow: none; transition: background var(--mk-ease); } .woocommerce-account .woocommerce-MyAccount-content a.dokan-btn:hover, .woocommerce-account .woocommerce-MyAccount-content a.vendor-dashboard:hover { background: var(--mk-terracotta); color: #fff; } @media (max-width: 720px) { .woocommerce-account .woocommerce-MyAccount-navigation { position: static; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address + .woocommerce-Address { padding-left: 0; border-left: none; } } @media (max-width: 720px) { .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; } .woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; } } /* Rendelések / letöltések táblázat + gombok */ .woocommerce-account .woocommerce-MyAccount-content .shop_table { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; margin: 0; } .woocommerce-account .woocommerce-MyAccount-content .shop_table thead th { font-family: var(--mk-font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-warmgray); padding: 14px 16px; border: none; } .woocommerce-account .woocommerce-MyAccount-content .shop_table tbody td { padding: 14px 16px; border-top: 1px solid var(--mk-border); } .woocommerce-account .woocommerce-MyAccount-content .shop_table .button { display: inline-flex; align-items: center; background: transparent !important; color: var(--mk-terracotta) !important; border: 1px solid var(--mk-terracotta) !important; border-radius: var(--mk-radius-pill) !important; padding: 7px 16px !important; font-size: 13px; font-weight: 500; } .woocommerce-account .woocommerce-MyAccount-content .shop_table .button:hover { background: var(--mk-terracotta) !important; color: #fff !important; } /* Címek (Addresses) — 2 kártya */ .woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); margin-top: 10px; } .woocommerce-account .woocommerce-Address { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: var(--mk-space-5); } .woocommerce-account .woocommerce-Address-title h3 { font-family: var(--mk-font-display); font-weight: 500; color: var(--mk-walnut); margin: 0; } .woocommerce-account .woocommerce-Address-title a.edit { color: var(--mk-sage-hover); font-size: 13px; } @media (max-width: 640px) { .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; } } /* ---------- Rendelés-visszaigazoló (köszönő) oldal ---------- */ .woocommerce-order-received .entry-content > .woocommerce { max-width: 840px; margin-inline: auto; } .woocommerce-order-received .woocommerce-thankyou-order-received { font-family: var(--mk-font-display); font-weight: 500; font-size: var(--mk-fs-h2); line-height: 1.2; color: var(--mk-walnut); background: var(--mk-sage-soft); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: var(--mk-space-6); margin: 0 0 var(--mk-space-6); } .woocommerce-order-received ul.order_details { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0 0 var(--mk-space-7); padding: 0; background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); overflow: hidden; } .woocommerce-order-received ul.order_details li { flex: 1 1 150px; list-style: none; padding: 18px 20px; border-right: 1px solid var(--mk-border); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-warmgray); text-align: center; } .woocommerce-order-received ul.order_details li::before { content: none; } .woocommerce-order-received ul.order_details li:last-child { border-right: none; } .woocommerce-order-received ul.order_details li strong { display: block; margin-top: 7px; font-family: var(--mk-font-display); font-weight: 500; font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--mk-walnut); } .woocommerce-order-received .woocommerce-order-details__title, .woocommerce-order-received .woocommerce-column__title { font-family: var(--mk-font-display); font-weight: 500; font-size: var(--mk-fs-h3); color: var(--mk-walnut); margin-bottom: 14px; } .woocommerce-order-received .woocommerce-table--order-details { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; margin-bottom: var(--mk-space-7); } .woocommerce-order-received .woocommerce-table--order-details th, .woocommerce-order-received .woocommerce-table--order-details td { padding: 13px 18px; border-top: 1px solid var(--mk-border); } .woocommerce-order-received .woocommerce-table--order-details thead th { border-top: none; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mk-warmgray); } .woocommerce-order-received .woocommerce-table--order-details tfoot .order-total th, .woocommerce-order-received .woocommerce-table--order-details tfoot .order-total td { font-family: var(--mk-font-display); font-size: 18px; color: var(--mk-walnut); } .woocommerce-order-received .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); } .woocommerce-order-received .woocommerce-customer-details address { border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: var(--mk-space-5); background: var(--mk-paper); font-style: normal; color: var(--mk-walnut-soft); line-height: 1.7; } @media (max-width: 640px) { .woocommerce-order-received .woocommerce-customer-details .woocommerce-columns { grid-template-columns: 1fr; } } /* ---------- Mélia rendelés-köszönő (thankyou.php override) ---------- */ .melia-ty__hero { text-align: center; margin-bottom: var(--mk-space-7); } .melia-ty__check { width: 60px; height: 60px; border-radius: 50%; background: var(--mk-sage); display: inline-grid; place-content: center; margin-bottom: var(--mk-space-4); position: relative; } .melia-ty__check::after { content: ""; width: 22px; height: 12px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) translate(1px, -2px); } .melia-ty__title { font-family: var(--mk-font-display); font-weight: 500; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; color: var(--mk-walnut); margin: 0 0 var(--mk-space-3); } .melia-ty__lead { color: var(--mk-warmgray); font-size: 17px; line-height: 1.7; max-width: 560px; margin: 0 auto; } .melia-ty__subtitle { font-family: var(--mk-font-display); font-weight: 500; font-size: var(--mk-fs-h3); color: var(--mk-walnut); margin: 0 0 var(--mk-space-5); } .melia-ty__steps { margin: var(--mk-space-8) 0; text-align: center; } .melia-ty__steplist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); counter-reset: none; } .melia-ty__steplist li { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .melia-ty__steplist li::before { content: none; } .melia-ty__num { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mk-gold); color: var(--mk-gold); font-family: var(--mk-font-display); font-size: 18px; display: grid; place-content: center; flex-shrink: 0; } .melia-ty__steptext { display: block; color: var(--mk-warmgray); font-size: 15px; line-height: 1.6; } .melia-ty__steptext strong { display: block; font-family: var(--mk-font-display); font-weight: 500; font-size: 18px; color: var(--mk-walnut); margin-bottom: 4px; } .melia-ty__club { background: var(--mk-walnut); border-radius: var(--mk-radius-lg); padding: clamp(28px, 4vw, 44px); margin: var(--mk-space-8) 0; display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; } .melia-ty__club .eyebrow { color: rgba(247,243,236,0.7); } .melia-ty__club .melia-ty__subtitle { color: #fff; margin: 12px 0 8px; } .melia-ty__club p { color: rgba(247,243,236,0.8); font-size: 15px; line-height: 1.6; margin: 0; max-width: 440px; } .melia-ty__club-body { flex: 1 1 300px; } .melia-ty__club-cta { flex-shrink: 0; } @media (max-width: 640px) { .melia-ty__steplist { grid-template-columns: 1fr; gap: 20px; } .melia-ty__club { flex-direction: column; align-items: flex-start; text-align: left; } } /* ---------- 404 – nem található oldal ---------- */ .notfound { text-align: center; background: var(--mk-cream); padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 120px); } .notfound .eyebrow { justify-content: center; } .notfound__title { margin-top: 20px; } .notfound__lead { color: var(--mk-warmgray); font-size: 17px; line-height: 1.6; max-width: 520px; margin: 18px auto 0; } .notfound__search { max-width: 480px; margin: clamp(28px, 4vw, 40px) auto 0; } .notfound__search .search-form { display: flex; gap: 10px; } .notfound__search label { flex: 1; margin: 0; } .notfound__search .search-field { width: 100%; border: 1px solid var(--mk-border-strong); border-radius: var(--mk-radius-md); padding: 12px 16px; font-family: var(--mk-font-body); font-size: 15px; color: var(--mk-walnut); background: var(--mk-white); min-height: 48px; box-shadow: none; } .notfound__search .search-field:focus { border-color: var(--mk-terracotta); outline: none; box-shadow: 0 0 0 3px rgba(184,107,75,0.16); } .notfound__search .search-submit { border: none; background: var(--mk-terracotta); color: #fff; border-radius: var(--mk-radius-pill); padding: 0 26px; font-family: var(--mk-font-body); font-weight: 500; letter-spacing: 0.04em; font-size: 14px; cursor: pointer; min-height: 48px; transition: background var(--mk-ease); } .notfound__search .search-submit:hover { background: var(--mk-terracotta-hover); } .notfound__cta { margin-top: 24px; } @media (max-width: 480px) { .notfound__search .search-form { flex-direction: column; } .notfound__search .search-submit { padding: 13px 26px; } } /* ---------- Partner landing (/partner/) — kártyás/lépéses elrendezés ---------- */ .partner { background: var(--mk-cream-deep); padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 110px); } .partner__block { margin-bottom: clamp(40px, 5vw, 72px); } .partner__title { font-family: var(--mk-font-display); font-weight: 500; font-size: var(--mk-fs-h2); color: var(--mk-walnut); text-align: center; margin: 0 0 clamp(24px, 3vw, 40px); } .partner__benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } @media (max-width: 560px) { .partner__benefits { grid-template-columns: 1fr; } } .pcard { display: flex; gap: 14px; align-items: flex-start; background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 22px; transition: box-shadow var(--mk-ease), transform var(--mk-ease); } .pcard:hover { box-shadow: var(--mk-shadow-md); transform: translateY(-3px); } .pcard__check { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-content: center; background: var(--mk-sage-soft); color: var(--mk-sage-hover); font-size: 15px; font-weight: 700; } .pcard p { margin: 0; color: var(--mk-walnut-soft); line-height: 1.55; font-size: 15px; } .partner__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 820px) { .partner__steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .partner__steps { grid-template-columns: 1fr; } } .pstep { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 26px 22px; text-align: center; } .pstep__num { display: inline-grid; place-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mk-terracotta); color: #fff; font-family: var(--mk-font-display); font-size: 20px; font-weight: 500; margin-bottom: 14px; } .pstep p { margin: 0; color: var(--mk-walnut-soft); line-height: 1.55; font-size: 15px; } .partner__cta { background: var(--mk-walnut); color: var(--mk-cream); border-radius: var(--mk-radius-lg); text-align: center; padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 48px); } .partner__cta-title { font-family: var(--mk-font-display); font-weight: 500; font-size: var(--mk-fs-h2); color: var(--mk-cream); margin: 0 0 14px; } .partner__cta-lead { color: rgba(247,243,236,0.82); max-width: 560px; margin: 0 auto 26px; line-height: 1.6; } /* Jelentkezési űrlap szekció (/partner) + Fluent Forms mezők Mélia stílusa */ .partner-form { background: var(--mk-cream); text-align: center; padding: clamp(48px, 6vw, 88px) 0; } .partner-form .eyebrow { justify-content: center; } .partner-form__lead { color: var(--mk-warmgray); max-width: 620px; margin: 0 auto 36px; line-height: 1.6; } .partner-form__box { max-width: 720px; margin: 0 auto; text-align: left; background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: clamp(24px, 4vw, 44px); } .partner-form__box .ff-el-input--label label { font-size: 14px; font-weight: 500; color: var(--mk-walnut); } .partner-form__box .ff-el-form-control { border: 1px solid var(--mk-border-strong); border-radius: var(--mk-radius-md); padding: 11px 14px; font-family: var(--mk-font-body); font-size: 15px; color: var(--mk-walnut); background: var(--mk-white); box-shadow: none; } .partner-form__box .ff-el-form-control:focus { border-color: var(--mk-terracotta); outline: none; box-shadow: 0 0 0 3px rgba(184,107,75,0.16); } .partner-form__box .ff-el-form-check-label, .partner-form__box label { color: var(--mk-walnut-soft); } /* Checkbox/rádió opciók egymás mellett (inline), tördeléssel. */ .partner-form__box .ff-el-form-check { display: inline-flex; align-items: center; margin: 0 24px 8px 0; } .partner-form__box .ff-el-form-check .ff-el-form-check-label { margin: 0; } .partner-form__box .ff-btn-submit { background: var(--mk-terracotta) !important; border: none !important; color: #fff !important; border-radius: var(--mk-radius-pill) !important; padding: 13px 30px !important; font-family: var(--mk-font-body); font-weight: 500; letter-spacing: 0.03em; } .partner-form__box .ff-btn-submit:hover { background: var(--mk-terracotta-hover) !important; } /* Két oszlopos elrendezés: a rövid mezők párban, a hosszúak (textarea, checkbox/rádió-csoport, fájl, elfogadások, gomb) teljes szélességben. A rejtett inputok display:none-ok, így nem foglalnak grid-cellát. */ @media (min-width: 640px) { .partner-form__box form fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; border: 0; margin: 0; padding: 0; min-width: 0; } .partner-form__box form fieldset > div:has(textarea), .partner-form__box form fieldset > div:has(input[type="checkbox"]), .partner-form__box form fieldset > div:has(input[type="radio"]), .partner-form__box form fieldset > div:has(input[type="file"]), .partner-form__box form fieldset > div:has(button[type="submit"]), .partner-form__box form fieldset > div:has(.ff-btn-submit), .partner-form__box form fieldset > .ff-message-success { grid-column: 1 / -1; } } /* ---------- Termékoldali szállítási infó (per-alkotó) ---------- */ /* A termékleírás ALATT áll, teljes szélességben — ezért nagyobb belső tér és címméret, mint amikor még a keskeny jobb hasábban volt. A szövegtörzs mérete korlátozva, hogy széles képernyőn se fusson végig a teljes szélességen. */ .product-shipping { margin-top: var(--mk-space-6); padding: var(--mk-space-6); background: var(--mk-sage-soft); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); } .product-shipping__title { font-family: var(--mk-font-display); font-weight: 500; font-size: 20px; color: var(--mk-walnut); margin: 0 0 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .product-shipping__row, .product-shipping__text { max-width: 70ch; } .product-shipping__vendor { font-family: var(--mk-font-body); font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mk-warmgray); } .product-shipping__row { margin: 0 0 6px; font-size: 14px; color: var(--mk-walnut-soft); } .product-shipping__label { font-weight: 600; color: var(--mk-walnut); margin-right: 8px; } .product-shipping__text { font-size: 14px; line-height: 1.6; color: var(--mk-walnut-soft); } .product-shipping__text p { margin: 0 0 8px; } .product-shipping__text p:last-child { margin-bottom: 0; } /* ---------- WAPF (Advanced Product Fields) mező-címkék ---------- */ /* Minden testre-szabó mező CÍMKÉJE balra igazítva — a plugin per-mező „center" (.wapf-center) beállítása ellenére is. CSAK a címkéket érinti; a swatch/szín- négyzetek belső igazítását nem bántja. */ .wapf-field-label, .wapf-field-label.wapf-center, .wapf-field-label label, .wapf-label-text, .wapf-input-label { text-align: left !important; } /* ---------- Ajándék blokk (ajándék-segítő szekció alkalom-címkékkel) ---------- */ .gifts { background: var(--mk-cream-deep); text-align: center; } .gifts__inner { max-width: 840px; } .gifts .eyebrow { justify-content: center; } .gifts__chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px 0 34px; } .gift-chip { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: var(--mk-radius-pill); border: 1px solid var(--mk-gold); background: var(--mk-paper); color: var(--mk-walnut); font-size: 13.5px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; transition: background var(--mk-ease), color var(--mk-ease), border-color var(--mk-ease); } .gift-chip:hover { background: var(--mk-gold); color: var(--mk-walnut); border-color: var(--mk-gold); } /* ---------- Kapcsolat oldal (kódolt sablon) ---------- */ .contact-page { background: var(--mk-cream-deep); padding: clamp(32px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); } .contact-page__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); align-items: start; } @media (max-width: 720px) { .contact-page__grid { grid-template-columns: 1fr; } } .contact-card { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; } .contact-card__title { font-family: var(--mk-font-display); font-weight: 500; font-size: var(--mk-fs-h3); color: var(--mk-walnut); margin: 0 0 14px; } .contact-card p { color: var(--mk-walnut-soft); line-height: 1.65; margin: 0 0 12px; } .contact-card__sub { font-weight: 500; color: var(--mk-walnut); margin-top: 6px; } .contact-card__list { list-style: disc; padding-left: 1.3em; margin: 0 0 12px; color: var(--mk-walnut-soft); } .contact-card__list li { margin-bottom: 6px; } /* A kártya a saját tartalma magasságú (nem nyúlik a másik kártyához) — a gomb a tartalom után, egységes térközzel áll (nem rögzül a doboz aljára). */ .contact-card__cta { align-self: flex-start; margin-top: var(--mk-space-6); } /* Fluent Forms kapcsolat-form a kártyában — Mélia mezőstílus */ .contact-card__form { margin-top: 14px; } .contact-card__form .ff-el-input--label label { font-size: 13.5px; font-weight: 500; color: var(--mk-walnut); } .contact-card__form .ff-el-form-control { border: 1px solid var(--mk-border-strong); border-radius: var(--mk-radius-md); padding: 10px 13px; font-family: var(--mk-font-body); font-size: 15px; color: var(--mk-walnut); background: var(--mk-white); box-shadow: none; } .contact-card__form .ff-el-form-control:focus { border-color: var(--mk-terracotta); outline: none; box-shadow: 0 0 0 3px rgba(184,107,75,0.16); } .contact-card__form .ff-btn-submit { background: var(--mk-terracotta) !important; border: none !important; color: #fff !important; border-radius: var(--mk-radius-pill) !important; padding: 12px 28px !important; font-family: var(--mk-font-body); font-weight: 500; letter-spacing: 0.03em; } .contact-card__form .ff-btn-submit:hover { background: var(--mk-terracotta-hover) !important; } /* ---------- Lábléc ---------- */ .footer { background: var(--mk-walnut); color: rgba(247,243,236,0.7); border-top: 1px solid rgba(247,243,236,0.12); padding: 64px 0 36px; } .footer__grid { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 30px; } @media (max-width: 1080px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } } .footer a.footer__brand { font-family: var(--mk-font-display); font-weight: 500; font-size: 36px; color: var(--mk-cream); text-decoration: none; display: inline-block; line-height: 1.1; } .footer a.footer__brand em { color: var(--mk-terracotta); font-style: italic; font-size: inherit; } .footer p { font-size: 13px; line-height: 1.7; max-width: 280px; margin-top: 14px; } .footer__title, .footer h4, .footer .footer-widget__title { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-cream); margin-bottom: 16px; font-family: var(--mk-font-body); } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; } .footer a { color: rgba(247,243,236,0.7); text-decoration: none; font-size: 14px; transition: color var(--mk-ease); } .footer a:hover { color: var(--mk-gold); } .footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(247,243,236,0.12); margin-top: 52px; padding-top: 24px; font-size: 12px; color: rgba(247,243,236,0.45); } .footer-widget { margin-bottom: 0; } /* ---------- Reveal-on-scroll (opcionális, JS kapcsolja be) ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms cubic-bezier(0.22,1,0.36,1), transform 800ms cubic-bezier(0.22,1,0.36,1); transition-delay: var(--d, 0ms); } .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1 !important; transform: none !important; } html { scroll-behavior: auto; } } /* ============================================================ PIACTÉR (shop archívum) ============================================================ */ /* A .site-main már ad 128px felső térközt a fix nav miatt (lásd .site-main), ezért itt csak tartalmi távolság kell, nem még egy nav-clearance. */ .pagehead { padding: clamp(32px, 5vw, 56px) 0 56px; position: relative; overflow: hidden; background: var(--mk-cream); } .pagehead .wrap { position: relative; z-index: 1; } .crumbs { font-size: 12px; color: var(--mk-warmgray); letter-spacing: 0.04em; margin-bottom: 22px; } .crumbs a { color: var(--mk-warmgray); text-decoration: none; transition: color var(--mk-ease); } .crumbs a:hover { color: var(--mk-sage-hover); } .crumbs span { margin: 0 8px; color: var(--mk-gold); } .pagehead h1 { max-width: 760px; margin-bottom: 20px; } .pagehead__lead { color: var(--mk-warmgray); max-width: 660px; font-size: 17px; } /* ---------- Dokumentum-oldalak (GYIK, ÁSZF, Visszaküldés, …) ---------- A cím külön, elválasztott fejléc-sávban (alsó szegély + halványabb paper háttér-váltás a body cream-jéhez képest), a tartalom alatta önálló, normál olvasási szélességű szekcióban, KÖZÉPRE zárva, hogy a szöveg kitöltse a szakaszt (ne keskeny oszlop lebegjen egy széles üres konténerben). A cím és a tartalom AZONOS 800px-es oszlopban, közös bal széllel. */ .page--doc .pagehead { background: var(--mk-cream-deep); border-bottom: 1px solid var(--mk-border); padding: clamp(32px, 5vw, 52px) 0; } .page--doc .pagehead .wrap { max-width: 1140px; } .page--doc .pagehead h1 { max-width: none; margin-bottom: 0; } .page--doc .entry-content { max-width: 1140px; padding-block: clamp(40px, 6vw, 72px) var(--mk-space-9); } .page--doc .entry-content > * { max-width: none; } .page--doc .entry-content > .alignwide, .page--doc .entry-content > .alignfull { max-width: none; width: auto; margin-inline: 0; } /* ---------- Dokan alkotói (bolt) oldal fejléce ---------- */ .storehead { background: var(--mk-cream); padding: clamp(36px, 6vw, 72px) 0 0; } .storehead .crumbs { margin-bottom: 24px; } .storehead__card { display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); } .storehead__avatar { width: clamp(84px, 12vw, 118px); height: clamp(84px, 12vw, 118px); border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-content: center; background: linear-gradient(150deg, var(--mk-terracotta), var(--mk-terracotta-hover)); border: 4px solid var(--mk-white); box-shadow: var(--mk-shadow-md); } .storehead__avatar img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; display: block; } .storehead__initials { font-family: var(--mk-font-display); font-weight: 500; font-size: clamp(28px, 4vw, 40px); color: var(--mk-white); line-height: 1; } .storehead__body .eyebrow { margin-bottom: 8px; } .storehead__name { font-family: var(--mk-font-display); font-weight: 500; font-size: var(--mk-fs-h1); color: var(--mk-walnut); margin: 0 0 8px; line-height: 1.08; } .storehead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--mk-warmgray); font-size: 14px; } .storehead__count { position: relative; padding-left: 14px; } .storehead__count::before { content: "\00B7"; position: absolute; left: 4px; color: var(--mk-gold); } .storehead__loc:only-child + .storehead__count, .storehead__count:only-child { padding-left: 0; } .storehead__count:only-child::before { content: none; } .storehead__tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 28px; border-bottom: 1px solid var(--mk-border); } .storehead__tab { padding: 12px 18px; font-size: 14px; color: var(--mk-warmgray); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--mk-ease), border-color var(--mk-ease); } .storehead__tab:hover { color: var(--mk-walnut); } .storehead__tab.is-active { color: var(--mk-walnut); border-bottom-color: var(--mk-terracotta); font-weight: 500; } .storehead + .market { padding-top: clamp(40px, 5vw, 60px); } /* A .pagehead (keresés + piactér) után is legyen levegő a kártyák fölött. */ .pagehead + .market { padding-top: clamp(32px, 4vw, 56px); } @media (max-width: 620px) { .storehead__card { flex-direction: column; align-items: flex-start; text-align: left; } } /* Alkotói bemutatkozás (vendor biography tab): a közös bolt-fejléc alatt a szöveg a statikus oldalak prózastílusában (.entry-content), a szekció adja a keretet. */ .storebio { background: var(--mk-cream-deep); } .storehead + .storebio { padding-top: clamp(24px, 3vw, 44px); padding-bottom: clamp(48px, 6vw, 88px); } .storebio__body { padding-block: 0; } /* Bemutatkozás középre igazítva: kör-maszkos logó + alatta a centrált szöveg. */ .storebio__logo { width: 108px; height: 108px; border-radius: 50%; overflow: hidden; margin: 0 auto clamp(18px, 3vw, 28px); border: 3px solid var(--mk-white); box-shadow: var(--mk-shadow-md); background: var(--mk-cream); display: grid; place-content: center; } .storebio__logo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius: 50%; margin: 0; display: block; } .storebio__initials { font-family: var(--mk-font-display); font-weight: 500; font-size: 38px; color: var(--mk-walnut); } .storebio--centered .storebio__body { text-align: center; } /* ---------- Alkotói „Szállítás és feltételek" fül ---------- */ .storeinfo { background: var(--mk-cream-deep); padding-top: clamp(24px, 3vw, 44px); padding-bottom: clamp(48px, 6vw, 88px); } .storeinfo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 24px); } .storeinfo__card { background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: var(--mk-space-5); box-shadow: var(--mk-shadow-sm); } .storeinfo__title { font-family: var(--mk-font-display); font-weight: 500; font-size: 18px; color: var(--mk-walnut); margin: 0 0 12px; } .storeinfo__lead { font-size: 20px; font-weight: 500; color: var(--mk-terracotta); margin: 0 0 6px; } .storeinfo__note { font-size: 13px; color: var(--mk-warmgray); margin: 0; } /* „Feltöltés alatt" — a szakasz látszik (hogy a vásárló tudja, hol keresse), de vizuálisan halkabb, hogy ne tűnjön valódi tartalomnak. */ .storeinfo__card--pending { background: transparent; box-shadow: none; border-style: dashed; } .storeinfo__pending { margin: 0; font-size: 14px; font-style: italic; color: var(--mk-warmgray); } .storeinfo__text { font-size: 14.5px; line-height: 1.65; color: var(--mk-walnut-soft); } .storeinfo__text p { margin: 0 0 10px; } .storeinfo__text p:last-child { margin-bottom: 0; } .storeinfo__row { margin: 0 0 8px; font-size: 14.5px; color: var(--mk-walnut-soft); } .storeinfo__row:last-child { margin-bottom: 0; } .storeinfo__label { font-weight: 600; color: var(--mk-walnut); margin-right: 8px; } .storeinfo__tnc { margin-top: clamp(24px, 3vw, 40px); } .storeinfo__global { margin-top: clamp(20px, 3vw, 32px); font-size: 14px; color: var(--mk-warmgray); } /* Alkotói dashboard: kötelező mező jelölése + súgó */ .melia-required { color: var(--mk-error, #b3261e); margin-left: 2px; } .melia-field-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--mk-warmgray); } .storebio--centered .storebio__body > * { margin-inline: auto; } /* Alkotói vélemények (reviews tab): a Dokan natív értékelés-listája Mélia kártyákban. */ .storereviews { background: var(--mk-cream-deep); } .storehead + .storereviews { padding-top: clamp(24px, 3vw, 44px); padding-bottom: clamp(48px, 6vw, 88px); } .storereviews .commentlist { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 16px; max-width: 820px; } .storereviews .commentlist > li::before { content: none; } .storereviews .review_comment_container { display: grid; grid-template-columns: 52px 1fr; gap: 16px; background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 20px 22px; } .storereviews .dokan-review-author-img { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; } .storereviews .dokan-review-author-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; margin: 0; } .storereviews .comment-text { min-width: 0; } .storereviews .comment-text .star-rating { margin-bottom: 8px; } .storereviews .comment-text .meta { color: var(--mk-warmgray); font-size: 13px; margin-bottom: 8px; } .storereviews .comment-text .description { color: var(--mk-walnut-soft); line-height: 1.65; } .storereviews .dokan-pagination-container { margin-top: 24px; } /* ---------- Alkategória-csempék a szülő-kategória oldalán ---------- */ .subcats { background: var(--mk-cream); padding: clamp(6px, 1.5vw, 16px) 0 clamp(28px, 4vw, 44px); } .subcats__title { font-family: var(--mk-font-display); font-weight: 500; font-size: var(--mk-fs-h3); color: var(--mk-walnut); margin-bottom: 22px; } .subcats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 960px) { .subcats__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .subcats__grid { grid-template-columns: repeat(2, 1fr); } } .subcat { display: flex; flex-direction: column; text-decoration: none; background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); overflow: hidden; transition: box-shadow var(--mk-ease), transform var(--mk-ease); } .subcat:hover { box-shadow: var(--mk-shadow-md); transform: translateY(-3px); } .subcat__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(160deg, var(--mk-sage) 0%, #7F8E71 100%); } .subcat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(0.22,1,0.36,1); } .subcat:hover .subcat__img img { transform: scale(1.05); } .subcat__body { padding: 13px 16px 16px; } .subcat__name { display: block; font-family: var(--mk-font-display); font-weight: 500; font-size: 16px; color: var(--mk-walnut); } .subcat__count { display: block; font-size: 12px; color: var(--mk-warmgray); margin-top: 3px; } .market { background: var(--mk-white); padding-bottom: clamp(72px, 8vw, 110px); } .market__layout { padding-top: clamp(44px, 5vw, 64px); } /* ---------- Kategória-oldal: bal oldali facet-szűrő + terméklista ---------- */ .market__layout--sidebar { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); padding-top: clamp(28px, 4vw, 48px); align-items: start; } @media (max-width: 860px) { .market__layout--sidebar { grid-template-columns: 1fr; } } /* Teljes szélességű (100%) piactér: a konténer max-szélessége feloldva, az oldalpadding megmarad; a termékrács auto-fill-lel tölti ki a rendelkezésre álló helyet (több oszlop nagy képernyőn, kevesebb kicsin). */ .market__layout--full { max-width: none; } .market__layout--full .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } @media (max-width: 520px) { .market__layout--full .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } .fsidebar { position: sticky; top: 150px; max-height: calc(100vh - 172px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--mk-border-strong) transparent; } .fsidebar::-webkit-scrollbar { width: 8px; } .fsidebar::-webkit-scrollbar-track { background: transparent; } .fsidebar::-webkit-scrollbar-thumb { background: var(--mk-border-strong); border-radius: 4px; } /* AJAX-os szűrés: halvány, „dolgozom" állapot a találati blokkon. Nem tüntetjük el a tartalmat — a régi találatok láthatók maradnak, amíg az újak megjönnek, így nem ugrik össze a lap. A kattintást viszont letiltjuk, hogy ne induljon több kérés egymásra. */ #melia-shop-results { transition: opacity 140ms ease; } #melia-shop-results.is-loading { opacity: 0.45; pointer-events: none; } /* ---------- MOBIL SZŰRŐ-FIÓK (≤860px) ---------- Asztalon a sidebar ragadós oldaloszlop. Mobilon korábban egyszerűen `static` lett, vagyis a NYITOTT szűrő a termékek FÖLÖTT ült, és végig kellett görgetni rajta a rácsig. Helyette: alapból rejtett, jobbról beúszó fiók, amit a „Szűrés" gomb nyit. A facetek mobilon összecsukva indulnak (main.js). */ .fsidebar__trigger, .fsidebar__close, .fsidebar__backdrop { display: none; } @media (max-width: 860px) { .fsidebar__trigger { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mk-font-body); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-walnut); background: var(--mk-white); border: 1px solid var(--mk-border-strong); border-radius: var(--mk-radius-pill); padding: 12px 22px; cursor: pointer; margin-bottom: 18px; min-height: 44px; } .fsidebar__trigger__icon { width: 15px; height: 11px; flex: none; background: linear-gradient(var(--mk-walnut), var(--mk-walnut)) 0 0 / 15px 2px no-repeat, linear-gradient(var(--mk-walnut), var(--mk-walnut)) 2px 4.5px / 11px 2px no-repeat, linear-gradient(var(--mk-walnut), var(--mk-walnut)) 4px 9px / 7px 2px no-repeat; } .fsidebar__badge { display: inline-grid; place-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--mk-radius-pill); background: var(--mk-terracotta); color: #fff; font-size: 11px; letter-spacing: 0; font-weight: 600; } .fsidebar__backdrop { display: block; position: fixed; inset: 0; z-index: 998; background: rgba(62, 46, 34, 0.45); opacity: 0; transition: opacity var(--mk-ease); } /* KRITIKUS: a `hidden` attribútumnak nyernie KELL a fenti `display: block` felett. A böngésző alap `[hidden] { display: none }` szabálya gyengébb a szerzői stílusnál, ezért enélkül a háttér ZÁRT állapotban is kifeszül az egész képernyőre — láthatatlanul (opacity 0), de elnyelve MINDEN kattintást: a szűrő gombot, a termékkártyákat, a linkeket. Pontosan ez okozta, hogy „a gomb nem csinál semmit". */ .fsidebar__backdrop[hidden] { display: none; } .fsidebar__backdrop.is-open { opacity: 1; } /* A nyitás/zárás a `right` tulajdonságon megy, NEM transformon. Indok: a transform-átmenet a kompozitor szálon fut, és ha az bármiért nem lép (rejtett fül, energiatakarékos mód, egyes mobil böngészők), a panel BERAGAD kint — az osztály felkerül, a `visibility` átvált, a panel mégsem jön be. Méréssel igazolva. A `right` animációja a fő szálon, az elrendezésből számolódik, ezért mindig lefut. Egyetlen panel 200 ms-os csúszásánál ez nem érezhető teljesítmény-különbség. */ .fsidebar { position: fixed; top: 0; bottom: 0; left: auto; right: -101vw; width: min(88vw, 400px); max-height: none; z-index: 999; background: var(--mk-cream); overflow-y: auto; overscroll-behavior: contain; padding: 0; margin: 0; transform: none; /* SZÁNDÉKOSAN NINCS átmenet a pozíción. A becsúszó animáció szép volt, de nem megbízható: a transform-átmenet a kompozitor szálon fut, és ha az nem lép (rejtett fül, energiatakarékos mód, egyes mobil böngészők), a panel KINT RAGAD — az osztály felkerül, mégsem jön be. Ugyanez a `right` átmenetével is előfordult. Egy szűrő, ami mindig kinyílik, többet ér, mint egy, ami néha nem. A finom átúszás a HÁTTÉREN marad. */ transition: none; box-shadow: -14px 0 40px rgba(62, 46, 34, 0.18); visibility: hidden; } .fsidebar.is-open { right: 0; visibility: visible; } /* A fiókban a doboz-keret felesleges — a fiók MAGA a doboz. */ .fsidebar .fsidebar__form { border: none; border-radius: 0; box-shadow: none; min-height: 100%; padding: 18px 20px 28px; background: transparent; } /* A fejléc és az „alkalmaz" gomb tapadjon, hogy hosszú listánál is elérhető legyen. */ .fsidebar .fsidebar__head { position: sticky; top: 0; z-index: 2; background: var(--mk-cream); padding: 14px 0 12px; margin: 0 0 4px; border-bottom: 1px solid var(--mk-border); align-items: center; } .fsidebar__close { display: grid; place-content: center; width: 36px; height: 36px; margin-left: auto; border: 1px solid var(--mk-border); border-radius: 50%; background: var(--mk-white); color: var(--mk-walnut); font-size: 22px; line-height: 1; cursor: pointer; } .fsidebar .fsidebar__apply { position: sticky; bottom: 0; width: 100%; margin-top: 18px; } /* Amíg a fiók nyitva, a háttér ne görögjön. */ body.melia-filter-open { overflow: hidden; } } @media (prefers-reduced-motion: reduce) { .fsidebar, .fsidebar__backdrop { transition: none; } } .fsidebar__form { background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 20px 20px 22px; box-shadow: var(--mk-shadow-sm); } .fsidebar__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .fsidebar__title { font-family: var(--mk-font-display); font-weight: 500; font-size: 18px; color: var(--mk-walnut); margin: 0; } .fsidebar__clear { font-size: 12.5px; color: var(--mk-sage); text-decoration: none; border-bottom: 1px solid rgba(126,140,112,0.4); } .fsidebar__clear:hover { color: var(--mk-sage-hover); } .facet { padding: 14px 0; border-top: 1px solid var(--mk-border); } .facet:first-of-type { border-top: none; padding-top: 6px; } /* Összecsukható szűrő-csoport (details/summary) — kattintható fejléc + chevron. */ .facet__title { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-warmgray); display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; user-select: none; padding: 2px 0; } .facet__title::-webkit-details-marker { display: none; } .facet__title::after { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--mk-warmgray); border-bottom: 2px solid var(--mk-warmgray); transform: rotate(45deg); margin-top: -3px; transition: transform var(--mk-ease); } details.facet[open] > .facet__title { color: var(--mk-walnut); } details.facet[open] > .facet__title::after { transform: rotate(-135deg); margin-top: 3px; } .facet__title:hover { color: var(--mk-walnut); } .facet__body { padding-top: 10px; } .fsidebar .check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; padding: 5px 0; color: var(--mk-walnut); } .fsidebar .check input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex-shrink: 0; border: 1px solid var(--mk-border-strong); border-radius: 5px; background: var(--mk-white); cursor: pointer; transition: background var(--mk-ease), border-color var(--mk-ease); } .fsidebar .check input[type="radio"] { border-radius: 50%; } /* Lefúrás a kategória-facetben: a bepipált kategória alkategóriái behúzva, halvány függőleges vezetővonallal, hogy látszódjon a hierarchia. */ .fsidebar .check--child { margin-left: calc(var(--melia-depth, 1) * 14px); padding-left: 10px; border-left: 1px solid var(--mk-border); font-size: 13px; } .fsidebar .check input:checked { background: var(--mk-terracotta); border-color: var(--mk-terracotta); box-shadow: inset 0 0 0 3px var(--mk-white); } .fsidebar .check span { line-height: 1.3; } .fsidebar .check em { color: var(--mk-warmgray); font-style: normal; font-size: 12.5px; } .fsidebar__apply { width: 100%; margin-top: 18px; } .filterbar { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 24px 26px; margin-bottom: 30px; position: relative; } .filterbar__row { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; } .fselect { display: flex; flex-direction: column; gap: 9px; flex: 1 1 0; min-width: 160px; } .fselect__label { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-warmgray); } .filterbar .select { width: 100%; } .filterbar__clear { flex-shrink: 0; font-size: 12.5px; color: var(--mk-sage); text-decoration: none; border-bottom: 1px solid rgba(126,140,112,0.4); white-space: nowrap; padding-bottom: 12px; transition: color var(--mk-ease); background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; } .filterbar__clear:hover { color: var(--mk-sage-hover); } /* Piactér felső sáv: speciális (akciós / személyre szabható) inline jelölők. */ .filterbar__special { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding-bottom: 4px; } .check--inline { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--mk-walnut); white-space: nowrap; margin: 0; } .check--inline input { flex-shrink: 0; } @media (max-width: 900px) { .filterbar__special { flex: 1 1 100%; align-items: center; } } /* Bolt-oldali szűrősáv: kompaktabb mezők (csak 3 van), a Rendezés jobbra. */ .filterbar--store .fselect { flex: 0 1 220px; } .filterbar--store .fselect--push { margin-left: auto; } @media (max-width: 900px) { .fselect { flex: 1 1 calc(50% - 10px); } } @media (max-width: 520px) { .fselect { flex: 1 1 100%; } } .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; } .toolbar__count { font-size: 14px; color: var(--mk-warmgray); } .toolbar__count strong { font-family: var(--mk-font-display); font-weight: 600; color: var(--mk-walnut); font-size: 17px; } .toolbar .select { background: var(--mk-paper); } /* Aktív szűrő-chipek a rács tetején — egy chip = egy aktív szűrő, kattintásra leveszi. A × körrel egyértelmű az „eltávolítás" affordancia; hover-en a chip terrakottára vált fehér szöveggel (elég kontraszt), fókusz látható. */ .chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 22px; } .chips__label { font-size: 13px; color: var(--mk-warmgray); font-weight: 500; margin-right: 2px; } .chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 8px 7px 14px; border-radius: var(--mk-radius-pill); background: var(--mk-terracotta-soft); color: var(--mk-terracotta-hover); text-decoration: none; border: 1px solid transparent; transition: background var(--mk-ease), color var(--mk-ease); } .chip:hover { background: var(--mk-terracotta); color: #fff; } .chip:focus-visible { outline: 2px solid var(--mk-terracotta); outline-offset: 2px; } .chip__text { line-height: 1.15; } .chip__x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; font-size: 15px; line-height: 1; background: rgba(184, 107, 75, 0.16); transition: background var(--mk-ease); } .chip:hover .chip__x { background: rgba(255, 255, 255, 0.28); } .chips__clear { font-size: 12.5px; color: var(--mk-sage); text-decoration: none; border-bottom: 1px solid rgba(126, 140, 112, 0.4); margin-left: 4px; } .chips__clear:hover { color: var(--mk-sage-hover); } .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1240px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .grid { grid-template-columns: 1fr; } } /* Kereső-oldal: sűrűbb, 6 oszlopos rács (kisebb kártyák, több termék). */ .grid--search { grid-template-columns: repeat(6, 1fr); gap: 16px; } @media (max-width: 1240px) { .grid--search { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 860px) { .grid--search { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .grid--search { grid-template-columns: repeat(2, 1fr); } } .melia-product-card { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 16px; position: relative; display: flex; flex-direction: column; transition: box-shadow var(--mk-ease), transform var(--mk-ease); } .melia-product-card::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(201,166,107,0.32); border-radius: 10px; pointer-events: none; } .melia-product-card:hover { box-shadow: var(--mk-shadow-md); transform: translateY(-3px); } .product__img { border-radius: var(--mk-radius-img); height: 210px; margin-bottom: 16px; position: relative; overflow: hidden; background: linear-gradient(160deg, var(--mk-sage) 0%, #7F8E71 100%); } .product__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(0.22,1,0.36,1); } .melia-product-card:hover .product__img img { transform: scale(1.06); } .product__img .badge { position: absolute; top: 12px; left: 12px; z-index: 2; } .product__title { font-family: var(--mk-font-display); font-weight: 500; font-size: 19px; margin-bottom: 4px; /* Hosszú, szóköz nélküli terméknevek (pl. „asztallappal/hátlappal”, „Pelenkabelső/csónak”) kilógnának a kártyából. A `break-word` csak akkor tör szó közben, ha másképp nem fér ki; a `hyphens: auto` pedig szótagolva teszi ezt — a lap `lang="hu"`, így magyar szabály szerint. */ overflow-wrap: break-word; hyphens: auto; } .product__title a { color: var(--mk-walnut); text-decoration: none; } .product__meta { font-size: 12px; color: var(--mk-warmgray); } .product__material { font-size: 11.5px; color: #5A6B4C; margin-top: 6px; display: flex; align-items: center; gap: 6px; } .product__material::before { content: ""; width: 10px; height: 10px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 6 4 10 4 14a8 8 0 0 0 16 0c0-4-3-8-8-12zm0 18a6 6 0 0 1-6-6c0-2.8 2-6 6-9.4V20z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 6 4 10 4 14a8 8 0 0 0 16 0c0-4-3-8-8-12zm0 18a6 6 0 0 1-6-6c0-2.8 2-6 6-9.4V20z'/%3E%3C/svg%3E") center/contain no-repeat; } .product__foot { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: auto; padding-top: 14px; } .product__price { display: block; width: 100%; font-family: var(--mk-font-display); font-weight: 600; font-size: 18px; } .product__price del { color: var(--mk-warmgray); font-weight: 400; font-size: 14px; margin-right: 6px; } .product__link { width: 100%; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-sage-hover); text-decoration: none; display: flex; align-items: center; justify-content: flex-start; gap: 6px; } .product__link::after { content: "\2192"; transition: transform var(--mk-ease); } .product__link:hover::after { transform: translateX(3px); } .pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 52px; } /* A `hidden` attribútumot vissza kell venni, mert a fenti display:flex különben felülírná (a görgetéses betöltésnél a lapozó alapból rejtett). */ .pager[hidden] { display: none; } .pager ul { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .pager .page-numbers { min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--mk-radius-md); border: 1px solid var(--mk-border-strong); display: grid; place-content: center; font-size: 14px; color: var(--mk-walnut); text-decoration: none; transition: background var(--mk-ease), border-color var(--mk-ease), color var(--mk-ease); } .pager .page-numbers:hover { border-color: var(--mk-sage-hover); background: rgba(126,140,112,0.08); } .pager .page-numbers.current { background: var(--mk-sage-hover); border-color: var(--mk-sage-hover); color: var(--mk-cream); } .pager .page-numbers.dots { border: none; color: var(--mk-warmgray); } /* ---------- Dokan alkotó-lista (store-listing / "Alkotóink" oldal) ---------- A lista a page.php .entry-content-jén belül, shortcode-ból renderel. A Dokan sablonokat NEM forkoljuk (frissítés-biztos): a funkció (szűrés/rendezés/nézet- váltás/lapozás) a plugin natív JS-én marad, mi csak a vizuális réteget cseréljük CSS-ből, a lila (dokan-btn-theme) helyett Mélia terrakottára. */ /* 1) Kitörés a prose 46rem korlátból — teljes tartalom-szélesség. */ .entry-content > #dokan-store-listing-filter-wrap, .entry-content > #dokan-seller-listing-wrap { max-width: var(--mk-content-width); margin-inline: auto; } /* 2) Szűrősáv. */ #dokan-store-listing-filter-wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 14px 20px; margin-bottom: 28px; } #dokan-store-listing-filter-wrap .left, #dokan-store-listing-filter-wrap .right { display: flex; align-items: center; gap: 18px; float: none; margin: 0; } #dokan-store-listing-filter-wrap .store-count { margin: 0; font-size: 14px; color: var(--mk-warmgray); } #dokan-store-listing-filter-wrap .dokan-icons { display: none; } #dokan-store-listing-filter-wrap .dokan-btn-theme { background: var(--mk-terracotta) !important; border: 1px solid var(--mk-terracotta) !important; color: #fff !important; border-radius: var(--mk-radius-pill) !important; padding: 8px 18px !important; font-size: 13px !important; box-shadow: none !important; text-shadow: none !important; } #dokan-store-listing-filter-wrap .dokan-btn-theme:hover { background: var(--mk-terracotta-hover) !important; border-color: var(--mk-terracotta-hover) !important; } #dokan-store-listing-filter-wrap .sort-by label { color: var(--mk-warmgray); font-size: 14px; margin-right: 6px; } #dokan-store-listing-filter-wrap #stores_orderby { border: 1px solid var(--mk-border-strong); border-radius: var(--mk-radius-md); padding: 7px 12px; background: var(--mk-white); font-family: var(--mk-font-body); font-size: 14px; color: var(--mk-walnut); } /* Nézetváltó (rács/lista ikonok) elrejtve — csak a rács-kártyát használjuk. */ #dokan-store-listing-filter-wrap .toggle-view { display: none !important; } /* 3) Alkotó-kártyák rácsa (a Dokan float/coloum-* helyett grid). */ .dokan-seller-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; } @media (max-width: 900px) { .dokan-seller-wrap { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .dokan-seller-wrap { grid-template-columns: 1fr; } } /* A Dokan a li-t float+fix szélességre állítja, és a grid-itemen a width-et nem lehetett felülírni (list-item + aspect-ratio interferencia). Megoldás: display:contents — így a li „eltűnik", és a .mvc lesz maga a grid-elem, ami rendesen kitölti a cellát. */ .dokan-seller-wrap .dokan-single-seller { display: contents !important; } .dokan-seller-wrap .mvc { width: auto; } /* A Woo/Dokan clearfix ::before/::after a grid-konténeren külön grid-elemként elfoglalná az 1. cellát és eltolná a kártyákat (első sor csak 2 oszlop) — ki kell venni a rácsból; a záró .dokan-clearfix div szintén. */ .dokan-seller-wrap::before, .dokan-seller-wrap::after { content: none !important; display: none !important; } .dokan-seller-wrap > .dokan-clearfix { display: none !important; } /* A prose (.entry-content ul>li::before) sage pöttye NE kerüljön a Dokan listákra (kártyák, belső info-listák, lapozó) — ott nem kell felsorolásjel. */ #dokan-seller-listing-wrap ul, #dokan-store-listing-filter-wrap ul { list-style: none; padding-left: 0; } #dokan-seller-listing-wrap li, #dokan-store-listing-filter-wrap li { padding-left: 0; } #dokan-seller-listing-wrap li::before, #dokan-store-listing-filter-wrap li::before { content: none; } /* Új alkotó-kártya: termékkép háttér + kör-maszkos logó középen + „Megnézem". */ .melia-vendor-card { list-style: none; } .mvc { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--mk-radius-lg); overflow: hidden; text-decoration: none; isolation: isolate; } .mvc__bg { position: absolute; inset: 0; z-index: 0; background-color: var(--mk-sage); background-image: var(--mvc-bg, none); background-size: cover; background-position: center; transition: transform 900ms cubic-bezier(0.22,1,0.36,1); } .mvc:hover .mvc__bg { transform: scale(1.06); } .mvc__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(62,46,34,0.25) 0%, rgba(62,46,34,0.52) 52%, rgba(62,46,34,0.80) 100%); } .mvc__inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; } .mvc__logo { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; background: var(--mk-white); border: 3px solid var(--mk-white); box-shadow: var(--mk-shadow-md); display: grid; place-content: center; margin-bottom: 16px; } /* A logó MINDIG pontos kör, a kép közepére igazítva. Az `aspect-ratio` + `height:auto` azért kell, mert a szülő `place-content:center` miatt a rács-cella magassága a tartalomhoz igazodna, így a `height:100%` önmagára hivatkozna — ettől a kép magasabb lett a körnél, az alja levágódott, és a logó elcsúszottnak látszott. */ .mvc__logo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius: 50%; margin: 0; display: block; } .mvc__logo--initials { background: var(--mk-cream); } .mvc__initials { font-family: var(--mk-font-display); font-weight: 500; font-size: 30px; color: var(--mk-walnut); } .mvc__name { font-family: var(--mk-font-display); font-weight: 500; font-size: 21px; line-height: 1.2; color: #fff; } .mvc__loc { font-size: 13px; color: rgba(247,243,236,0.82); margin-top: 4px; } .mvc__btn { margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; background: var(--mk-terracotta); color: #fff; border-radius: var(--mk-radius-pill); padding: 10px 22px; font-family: var(--mk-font-body); font-weight: 500; font-size: 14px; letter-spacing: 0.03em; transition: background var(--mk-ease); } .mvc__btn::after { content: "\2192"; transition: transform var(--mk-ease); } .mvc:hover .mvc__btn { background: var(--mk-terracotta-hover); } .mvc:hover .mvc__btn::after { transform: translateX(3px); } /* 4) Lapozó. */ .seller-listing-content .pagination-container { margin-top: 34px; } .seller-listing-content .pagination { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; } .seller-listing-content .pagination li { list-style: none; margin: 0; } .seller-listing-content .pagination .page-numbers { min-width: 42px; height: 42px; display: grid; place-content: center; padding: 0 12px; border: 1px solid var(--mk-border-strong); border-radius: var(--mk-radius-md); color: var(--mk-walnut); text-decoration: none; transition: background var(--mk-ease), border-color var(--mk-ease), color var(--mk-ease); } .seller-listing-content .pagination .page-numbers:hover { border-color: var(--mk-terracotta); } .seller-listing-content .pagination .page-numbers.current { background: var(--mk-terracotta); border-color: var(--mk-terracotta); color: #fff; } /* Görgetéses betöltés figyelőpontja + töltésjelző (infinite scroll). Alapból nem foglal helyet; csak töltés közben (.is-loading) jelenik meg a spinner. */ .market__more { display: flex; justify-content: center; align-items: center; min-height: 8px; margin-top: 40px; } /* Forgó vintage csillag töltésjelző (a márka ✦ motívuma). */ .market__spinner { width: 40px; height: 40px; display: grid; place-content: center; opacity: 0; transition: opacity var(--mk-ease); } .market__spinner::before { content: "\2726"; font-size: 30px; line-height: 1; color: var(--mk-gold); animation: melia-spin 1.3s cubic-bezier(0.45,0.05,0.55,0.95) infinite; } .market__more.is-loading { min-height: 60px; } .market__more.is-loading .market__spinner { opacity: 1; } @keyframes melia-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .market__spinner::before { animation: none; } } .makerband { background: var(--mk-walnut); color: var(--mk-cream); overflow: hidden; position: relative; } .makerband__inner { display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center; } @media (max-width: 860px) { .makerband__inner { grid-template-columns: 1fr; } } .makerband .eyebrow { color: rgba(247,243,236,0.7); } .makerband h2 { margin: 20px 0 16px; max-width: 600px; color: var(--mk-cream); } .makerband h2 em { font-style: italic; color: var(--mk-gold); } .makerband p { color: rgba(247,243,236,0.78); max-width: 560px; } .makerband__cta { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; } .no-products { padding: 48px 0; } /* ---------- Blog: lista + poszt-kártyák (archívum/kereső) ---------- */ .bloglist { background: var(--mk-cream-deep); padding: clamp(40px, 5vw, 64px) 0 clamp(72px, 8vw, 110px); } .post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 900px) { .post-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .post-list { grid-template-columns: 1fr; } } .post-card { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--mk-ease), transform var(--mk-ease); } .post-card:hover { box-shadow: var(--mk-shadow-md); transform: translateY(-3px); } .post-card__thumbnail { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: linear-gradient(160deg, var(--mk-sage) 0%, #7F8E71 100%); } .post-card__thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(0.22,1,0.36,1); } .post-card:hover .post-card__thumbnail img { transform: scale(1.05); } .post-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .post-card__meta { font-size: 12px; color: var(--mk-warmgray); letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .post-card__sep { color: var(--mk-gold); } .post-card__cat { color: var(--mk-sage-hover); text-decoration: none; font-weight: 500; } .post-card__cat:hover { color: var(--mk-terracotta); } .post-card__title { font-family: var(--mk-font-display); font-weight: 500; font-size: 20px; line-height: 1.25; margin-bottom: 10px; } .post-card__title a { color: var(--mk-walnut); text-decoration: none; } .post-card__title a:hover { color: var(--mk-terracotta); } .post-card__excerpt { color: var(--mk-warmgray); font-size: 14px; line-height: 1.6; margin: 0 0 16px; } .post-card__more { margin-top: auto; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-terracotta); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .post-card__more::after { content: "\2192"; transition: transform var(--mk-ease); } .post-card__more:hover::after { transform: translateX(3px); } /* Blog kategória-gombsor (blog-lista + kategória-archívum) */ .blog-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); } .blog-tabs__btn { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: var(--mk-radius-pill); border: 1px solid var(--mk-border); background: var(--mk-paper); color: var(--mk-warmgray); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; transition: color var(--mk-ease), background var(--mk-ease), border-color var(--mk-ease); } .blog-tabs__btn:hover { color: var(--mk-walnut); border-color: var(--mk-sage); background: var(--mk-cream); } .blog-tabs__btn.is-active { background: var(--mk-walnut); border-color: var(--mk-walnut); color: #fff; } /* Single poszt — 70/30 elrendezés főszöveggel + oldalsávval */ .post-single__meta { color: var(--mk-warmgray); font-size: 14px; margin-top: 4px; } .post-single__layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: clamp(32px, 4.5vw, 64px); align-items: start; padding-bottom: var(--mk-space-8); } .post-single__main { min-width: 0; } .post-single__hero { border-radius: var(--mk-radius-lg); overflow: hidden; } .post-single__foot { padding-top: clamp(20px, 3vw, 36px); } .post-single__comments { padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--mk-border); margin-top: clamp(24px, 3vw, 40px); } @media (max-width: 900px) { .post-single__layout { grid-template-columns: 1fr; } } /* Blog oldalsáv (sticky): kapcsolódó posztok + termékajánlók */ .post-single__sidebar { position: sticky; top: 120px; display: flex; flex-direction: column; gap: clamp(22px, 3vw, 32px); } @media (max-width: 900px) { .post-single__sidebar { position: static; } } .blog-side { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 22px 22px 24px; } .blog-side__title { font-family: var(--mk-font-display); font-weight: 500; font-size: 17px; color: var(--mk-walnut); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--mk-border); } .blog-side__posts, .blog-side__products { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .blog-side__posts > li::before, .blog-side__products > li::before { content: none; } .blog-side__post, .blog-side__product { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; } .blog-side__thumb { display: block; width: 64px; height: 64px; border-radius: var(--mk-radius-md); overflow: hidden; background: var(--mk-cream-deep); } .blog-side__thumb--empty { background: linear-gradient(160deg, var(--mk-sage) 0%, #7F8E71 100%); } .blog-side__thumb img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; } .blog-side__meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .blog-side__link { font-family: var(--mk-font-display); font-weight: 500; font-size: 14.5px; line-height: 1.3; color: var(--mk-walnut); text-decoration: none; } .blog-side__link:hover { color: var(--mk-terracotta); } .blog-side__date { font-size: 12px; color: var(--mk-warmgray); } .blog-side__price { font-size: 13.5px; color: var(--mk-terracotta); font-weight: 500; } .blog-side__price .woocommerce-Price-amount { color: var(--mk-terracotta); } .blog-side__cta { margin-top: 18px; width: 100%; justify-content: center; } /* ============================================================ TERMÉKOLDAL (single product) — a WooCommerce natív hookjait/markupját tartjuk meg funkcionálisan (galéria zoom, variációk, AJAX kosár, pluginok), csak a köré rakott elrendezést és a WC alap-osztályait stílusozzuk a design rendszerre. ============================================================ */ /* A wc_product_class() sima "product" osztályt is rátesz erre a divre — ha bármelyik plugin ehhez kártya-hátteret/keretet ad, itt nullázzuk, hogy a külső konténer biztosan díszítés nélküli maradjon. */ .product-page.product { background: none !important; border: none !important; box-shadow: none !important; outline: none !important; } .product-page { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; padding-block: var(--mk-space-6) var(--mk-space-8); } @media (max-width: 860px) { .product-page { grid-template-columns: 1fr; } } /* Grid-elemek alapból nem zsugorodnak a tartalmuk (itt: a termékkép) természetes mérete alá — min-width:0 nélkül a nagy kép kinyomja a mellette lévő oszlopot a látható területről. */ .product-page__gallery, .product-page__summary { min-width: 0; } /* A képgaléria görgetésnél FIXEN marad (sticky), és a grid alján — a leírás/ tabok szekciónál — magától elenged (mert a .product-page grid ott véget ér). A .product-page align-items:start miatt a galéria nem nyúlik ki, így a sticky működik. Mobilon (egy oszlop) nincs sticky. */ .product-page__gallery { position: sticky; top: 150px; align-self: start; } @media (max-width: 860px) { .product-page__gallery { position: static; } } /* A háttér+keret ("doboz") csak az összegzés (jobb) oldalon legyen — a galéria/külső konténer szándékosan díszítés nélküli marad. */ .product-page__summary { background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: var(--mk-space-5); } /* Galéria (WooCommerce saját markup-ja: .woocommerce-product-gallery). A WC a galériát inline "opacity:0"-val indítja, és csak a saját JS-e (flexslider/photoswipe init) teszi láthatóvá — itt kényszerítjük láthatóra, és a wrapper-t rács-alapú, JS NÉLKÜL is rendezett elrendezésre állítjuk, hogy a galéria attól függetlenül is jól nézzen ki, hogy a WC saját JS-e mikor/hogyan fut le. */ /* Semelyik szinten ne legyen doboz (háttér/keret/árnyék) a galérián — akárhonnan is jönne (WC alap, plugin), itt véglegesen nullázzuk. */ .product-page__gallery, .product-page__gallery .woocommerce-product-gallery, .product-page__gallery .woocommerce-product-gallery.images { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } .product-page__gallery .woocommerce-product-gallery { position: relative; opacity: 1 !important; } /* A WooCommerce galéria flexslider "slider" módban fut (wc-product-gallery-slider theme support): egy fő kép + alatta thumbnail sáv, kattintásra vált. A flexslider a wrapper-t inline `width:400%` + `transform:translate3d(...)`-tal csúsztatja, a slide-okat lebegteti (float) — EZÉRT NEM szabad rá grid/flex elrendezést kényszeríteni, mert a viewport összeomlik és a váltott kép eltűnik. A wrapper-t hagyjuk a flexslider saját logikájára, csak a képek méretezését és a lekerekítést adjuk hozzá. */ .product-page__gallery .flex-viewport { border-radius: var(--mk-radius-lg); overflow: hidden; } .product-page__gallery .woocommerce-product-gallery__wrapper { list-style: none; margin: 0; padding: 0; } .product-page__gallery .woocommerce-product-gallery__image { margin: 0; min-width: 0; } .product-page__gallery .woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: var(--mk-radius-lg); } /* Ha a JS mégsem futna le (nincs flex-viewport), a képek egyszerű, rendezett oszlopban jelennek meg fallbackként. */ .product-page__gallery .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper { display: grid; gap: 10px; } /* A WC eredeti szabálya (woocommerce.css): `.woocommerce div.product div.images .flex-control-thumbs { margin:0; padding:0 }`. UGYANEZT a szelektort használjuk (azonos specificitás), csak az értéket írjuk át — mivel a main.css a WC CSS-e UTÁN töltődik (ld. Assets.php), a miénk nyer `!important` nélkül. A flex/gap a mi vizuális kiegészítésünk. */ .woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 10px; list-style: none; margin: 0; padding: 20px 0 0; flex-wrap: wrap; } .product-page__gallery .flex-control-thumbs li { width: 72px; } .product-page__gallery .flex-control-thumbs img { border-radius: var(--mk-radius-img); border: 1px solid var(--mk-border); cursor: pointer; opacity: 0.7; transition: opacity var(--mk-ease), border-color var(--mk-ease); } .product-page__gallery .flex-control-thumbs img:hover, .product-page__gallery .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--mk-terracotta); } .product-page__gallery span.onsale, .product-page span.onsale { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--mk-terracotta); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--mk-radius-pill); } /* Összegzés (.summary .entry-summary — WooCommerce alapból ezt adja) */ .product-page__summary .product_title { font-family: var(--mk-font-display); font-weight: 500; font-size: clamp(26px, 3vw, 34px); margin-bottom: 10px; } .product-page__summary .star-rating { color: var(--mk-gold); font-size: 15px; margin-bottom: 12px; } .product-page__summary .price { font-family: var(--mk-font-display); font-weight: 600; font-size: 26px; margin-bottom: 16px; display: block; } .product-page__summary .price del { font-weight: 400; font-size: 18px; opacity: 0.8; } .product-page__summary .woocommerce-product-details__short-description { color: var(--mk-walnut); margin-bottom: var(--mk-space-4); line-height: 1.7; } .product-page__summary .stock { display: inline-block; font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: var(--mk-radius-pill); margin-bottom: var(--mk-space-4); } .product-page__summary .stock.in-stock { background: var(--mk-success-soft); } .product-page__summary .stock.out-of-stock { background: var(--mk-error-soft); } /* Variáció-választó lenyílók (pl. "név", "Mérete") — egymás mellett, ne egymás alatt egy oszlopban. */ .product-page__summary form.cart { margin-bottom: var(--mk-space-5); } .product-page__summary .variations { width: 100%; margin-bottom: var(--mk-space-4); border-collapse: separate; } .product-page__summary .variations tbody { display: flex; flex-wrap: wrap; gap: var(--mk-space-4); } .product-page__summary .variations tr { display: flex; flex-direction: column; gap: 8px; flex: 1 1 180px; min-width: 160px; } .product-page__summary .variations tr th.label, .product-page__summary .variations tr td.value { display: block; padding: 0; text-align: left; } /* A alapból középre igazít — a variáció-attribútum (pl. „választott szín") címkéje is balra zárjon, mint a többi mező. */ .product-page__summary .variations tr th.label { text-align: left; } .product-page__summary .variations label { font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-align: left; } .product-page__summary .variations select { font-family: var(--mk-font-body); font-size: 15px; color: var(--mk-walnut); background: var(--mk-white); border: 1px solid var(--mk-border-strong); border-radius: var(--mk-radius-md); padding: 10px 36px 10px 14px; width: 100%; } .product-page__summary a.reset_variations { font-size: 12px; color: var(--mk-terracotta); margin-top: 4px; display: inline-block; } .product-page__summary .woocommerce-variation-price .price { font-size: 22px; } .product-page__summary .quantity { display: inline-block; margin-right: 12px; vertical-align: middle; } .product-page__summary .quantity .qty { width: 76px; font-family: var(--mk-font-body); font-size: 15px; color: var(--mk-walnut); background: var(--mk-white); border: 1px solid var(--mk-border-strong); border-radius: var(--mk-radius-md); padding: 13px 14px; } /* A gomb magassága a darabszám-mezőével EGYEZIK (mindkettő 50px), hogy egy * vonalban álljanak. A méretet `min-height` adja, nem a függőleges padding — * így a betűméret változtatása nem billenti el. * A szelektorba az elemtípust és a `.button` osztályt is bevonjuk (0,3,1), * mert a WooCommerce `.woocommerce button.button` szabálya (0,2,1) egyébként * felülírná a paddinget (0.618em 1em → 38px magas gomb). */ .product-page__summary button.single_add_to_cart_button.button, .product-page__summary .single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; font-family: var(--mk-font-body); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--mk-radius-md); padding: 0 32px; cursor: pointer; vertical-align: middle; transition: background var(--mk-ease); } .product-page__summary .product_meta { margin-top: var(--mk-space-5); padding-top: var(--mk-space-4); border-top: 1px solid var(--mk-border); font-size: 13px; color: var(--mk-warmgray); display: flex; flex-direction: column; gap: 6px; } .product-page__summary .product_meta a { color: var(--mk-warmgray); text-decoration: underline; text-decoration-color: var(--mk-border-strong); } /* Alkotó-kártya a termékoldalon (design-system "maker-card" komponens) */ .maker-card { display: flex; align-items: center; gap: 16px; background: var(--mk-cream); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: var(--mk-space-4) var(--mk-space-5); } .maker-card__avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: var(--mk-gold-soft); display: grid; place-content: center; font-family: var(--mk-font-display); font-weight: 500; font-size: 16px; color: #8A6A33; } /* ============================================================ Termék-részletek fül-menü (Leírás / Termékadatok / Vélemények). CSS-only tab-váltás, JS nélkül: rejtett rádiógombok + label-ek + a ":checked ~" általános testvér-szelektor mutatja/rejti a hozzá tartozó panelt. A gombok egy sorban, vízszintesen, mint egy menü — nem egymás alatt lenyíló kártyák. Szándékosan saját "melia-" prefixes osztálynevek, hogy semmilyen WooCommerce/plugin CSS ne tudjon véletlenül belenyúlni (nem kell !important-tal harcolni, mint a .product/.price/.stock esetén). ============================================================ */ .melia-tabs { padding-bottom: var(--mk-space-8); } .melia-tabs__radio { position: absolute; opacity: 0; pointer-events: none; } .melia-tabs__list { display: flex; gap: var(--mk-space-6); border-bottom: 1px solid var(--mk-border); margin-bottom: var(--mk-space-5); flex-wrap: wrap; } .melia-tabs__label { display: inline-block; padding: var(--mk-space-3) 0; margin-bottom: -1px; cursor: pointer; font-family: var(--mk-font-display); font-weight: 500; font-size: 19px; color: var(--mk-warmgray); border-bottom: 2px solid transparent; transition: color var(--mk-ease), border-color var(--mk-ease); } .melia-tabs__label:hover { color: var(--mk-walnut); } .melia-tabs__panel { display: none; } /* Minden rádió a saját panelét mutatja + a saját label-ét emeli ki — a label-ek a .melia-tabs__list-ben vannak, ami a rádió közvetlen testvére, a "~ .list label[for=...]" leszármazott-keresés ezen belül. */ #melia-tab-radio-description:checked ~ .melia-tabs__list label[for="melia-tab-radio-description"], #melia-tab-radio-attributes:checked ~ .melia-tabs__list label[for="melia-tab-radio-attributes"], #melia-tab-radio-reviews:checked ~ .melia-tabs__list label[for="melia-tab-radio-reviews"] { color: var(--mk-walnut); border-bottom-color: var(--mk-terracotta); } #melia-tab-radio-description:checked ~ #melia-panel-description, #melia-tab-radio-attributes:checked ~ #melia-panel-attributes, #melia-tab-radio-reviews:checked ~ #reviews { display: block; } .melia-tabs__panel table.woocommerce-product-attributes { width: 100%; border-collapse: collapse; } .melia-tabs__panel table.woocommerce-product-attributes tr { border-bottom: 1px solid var(--mk-border); } .melia-tabs__panel table.woocommerce-product-attributes th { text-align: left; padding: 12px 16px 12px 0; font-weight: 500; width: 220px; color: var(--mk-walnut); } .melia-tabs__panel table.woocommerce-product-attributes td { padding: 12px 0; color: var(--mk-warmgray); } /* A leírás-fül tartalmában a szállítók vegyes címsor-szinteket használnak (pl.

a „Leírása:" / „Anyaga:" felirathoz), ami az alap h6-méreten kisebb lett a törzsszövegnél. Egységes, olvasható Fraunces-skálát adunk minden szintnek, hogy a feliratok rendes h3–h4 méretű címsorként nézzenek ki. / .melia-tabspanel h1, .melia-tabspanel h2, .melia-tabspanel h3, .melia-tabspanel h4, .melia-tabspanel h5, .melia-tabspanel h6 { font-family: var(--mk-font-display); font-weight: 600; color: var(--mk-walnut); line-height: 1.25; letter-spacing: 0; text-transform: none; margin: 1.5em 0 0.4em; } .melia-tabspanel h1, .melia-tabspanel h2, .melia-tabspanel h3 { font-size: 23px; } .melia-tabspanel h4, .melia-tabspanel h5, .melia-tabspanel h6 { font-size: 19px; } .melia-tabspanel h4 strong, .melia-tabspanel h5 strong, .melia-tabspanel h6 strong, .melia-tabspanel h1 strong, .melia-tabspanel h2 strong, .melia-tabspanel h3 strong { font-weight: 600; } .melia-tabspanel > :first-child { margin-top: 0; } .melia-tabspanel p { line-height: 1.7; } / A WooCommerce saját "X vélemény ehhez" címét elrejtjük — a fül felirata ("Vélemények") már megadja ugyanezt, felesleges duplikálni. / .melia-tabspanel--reviews .woocommerce-Reviews-title { display: none; } / Vélemények — a WooCommerce saját single-product-reviews.php markupját és logikáját (értékelés-ellenőrzés, csillag-választó) szándékosan nem írjuk felül, csak a stabil osztálynevein keresztül stílusozzuk. / .product-pagepanel .woocommerce-Reviews-title { font-family: var(--mk-font-display); font-weight: 500; font-size: 20px; margin-bottom: var(--mk-space-4); } .product-pagepanel .commentlist { list-style: none; margin: 0 0 var(--mk-space-5); padding: 0; display: flex; flex-direction: column; gap: 16px; } .product-pagepanel .commentlist .comment { background: var(--mk-cream); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: var(--mk-space-4) var(--mk-space-5); } .product-page__panel .commentlist .comment_container { display: flex; gap: 14px; align-items: flex-start; } .product-pagepanel .commentlist img.avatar { border-radius: 50%; flex-shrink: 0; } .product-pagepanel .commentlist .comment-text { flex: 1; } .product-pagepanel .commentlist .meta strong { font-family: var(--mk-font-display); } .product-pagepanel .commentlist .star-rating { color: var(--mk-gold); margin: 4px 0; } .product-pagepanel .woocommerce-noreviews { color: var(--mk-warmgray); margin-bottom: var(--mk-space-5); } .product-pagepanel #review_form_wrapper #respond { max-width: 560px; } .product-page__panel #review_form_wrapper .comment-reply-title { font-family: var(--mk-font-display); font-weight: 500; font-size: 20px; } .product-page__panel #review_form_wrapper p { margin-bottom: var(--mk-space-4); } .product-page__panel #review_form_wrapper label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; } .product-page__panel #review_form_wrapper input[type="text"], .product-page__panel #review_form_wrapper input[type="email"], .product-page__panel #review_form_wrapper textarea, .product-page__panel #review_form_wrapper select { font-family: var(--mk-font-body); font-size: 15px; color: var(--mk-walnut); background: var(--mk-white); border: 1px solid var(--mk-border-strong); border-radius: var(--mk-radius-md); padding: 12px 14px; width: 100%; max-width: 380px; } .product-page__panel #review_form_wrapper textarea { max-width: none; min-height: 110px; } .product-page__panel #review_form_wrapper .form-submit input[type="submit"] { display: inline-flex; align-items: center; font-family: var(--mk-font-body); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--mk-terracotta); color: #fff; border: none; border-radius: var(--mk-radius-md); padding: 14px 30px; cursor: pointer; } .product-page__panel #review_form_wrapper .form-submit input[type="submit"]:hover { background: var(--mk-terracotta-hover); } / ---------- Hozzászólások ---------- / .melia-comments { max-width: var(--mk-content-width); margin: 0 auto; padding: var(--mk-space-7) clamp(20px, 4vw, 48px) var(--mk-space-9); } .melia-comment-list, .melia-comment-list ul { list-style: none; margin: var(--mk-space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .melia-comment-list .children { margin-top: 16px; margin-left: 32px; } .melia-comment-avatar { border-radius: 50%; flex-shrink: 0; } .melia-comment-form { margin-top: var(--mk-space-7); display: flex; flex-direction: column; gap: 16px; max-width: 560px; } .melia-comment-form .comment-form-comment, .melia-comment-form .comment-form-author, .melia-comment-form .comment-form-email { margin: 0; } .melia-comment-form #reply-title { font-family: var(--mk-font-display); font-weight: 500; font-size: 24px; margin-bottom: 4px; } / ============================================================ FŐOLDAL — hero, marquee, értékek, kategóriák, karusel, stb. ============================================================ / / ---------- Hero ---------- / .hero { min-height: 100svh; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--mk-cream) 0%, var(--mk-cream-deep) 100%); color: var(--mk-walnut); position: relative; overflow: hidden; padding: 196px 0 110px; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C9A66B' stroke-width='1'%3E%3Cpath d='M0 36a36 36 0 0 1 72 0'/%3E%3Cpath d='M-36 72a36 36 0 0 1 72 0'/%3E%3Cpath d='M36 72a36 36 0 0 1 72 0'/%3E%3C/g%3E%3C/svg%3E"); background-size: 72px 72px; opacity: 0.14; -webkit-mask-image: radial-gradient(ellipse 62% 55% at 50% 46%, transparent 0%, transparent 42%, #000 88%); mask-image: radial-gradient(ellipse 62% 55% at 50% 46%, transparent 0%, transparent 42%, #000 88%); } .hero::after { content: ""; position: absolute; inset: 16px; z-index: 1; pointer-events: none; border: 1px solid rgba(201,166,107,0.4); border-radius: 4px; } @media (max-width: 940px) { .hero::after { inset: 10px; } } .herolayout { position: relative; z-index: 2; width: 100%; max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 760px) minmax(170px, 1fr); gap: clamp(20px, 3.5vw, 64px); align-items: center; padding: 0 clamp(16px, 2.5vw, 44px); } .heroside { display: flex; flex-direction: column; gap: clamp(20px, 4vh, 42px); } @media (max-width: 940px) { .herolayout { grid-template-columns: 1fr; } .heroside { display: none; } } .mini-card { position: relative; width: 172px; background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: 12px; padding: 12px; box-shadow: var(--mk-shadow-md); rotate: var(--rot, 0deg); outline: 1px solid var(--mk-border); outline-offset: -5px; animation: mini-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both; opacity: 0; } .mini-card::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(201,166,107,0.32); border-radius: 8px; pointer-events: none; } .mini-cardimg { height: 96px; border-radius: 8px; margin-bottom: 10px; background-size: cover; background-position: center; background-color: var(--mk-sage-soft); } .mini-cardimg img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .mini-cardname { font-family: var(--mk-font-display); font-weight: 500; font-size: 14px; line-height: 1.3; } .mini-cardmeta { font-size: 10.5px; color: var(--mk-warmgray); margin-top: 2px; } .mini-cardprice { font-family: var(--mk-font-display); font-weight: 600; font-size: 13px; margin-top: 6px; } / Egyszeri BEÚSZÁS az oldalakról (nem végtelen lebegés). A kiúszást görgetésre a JS adja: a .heroside konténert tolja el + halványítja (lásd main.js). / @keyframes mini-in { from { opacity: 0; transform: translateX(var(--in-x, 0)) translateY(14px); } to { opacity: 1; transform: none; } } .heroside { will-change: transform, opacity; } .heroside--left .mini-card { --in-x: -48px; } .heroside--right .mini-card { --in-x: 48px; } .heroside--left .mini-card:nth-child(1) { --rot: -4deg; --dur: 7s; align-self: flex-end; } .heroside--left .mini-card:nth-child(2) { --rot: 3deg; --dur: 8.5s; --delay: .3s; width: 156px; align-self: flex-start; } .heroside--left .mini-card:nth-child(3) { --rot: -2deg; --dur: 7.6s; --delay: .6s; width: 148px; align-self: flex-end; } .heroside--right .mini-card:nth-child(1) { --rot: 4deg; --dur: 8s; --delay: .15s; align-self: flex-start; } .heroside--right .mini-card:nth-child(2) { --rot: -3deg; --dur: 7.2s; --delay: .45s; width: 156px; align-self: flex-end; } .heroside--right .mini-card:nth-child(3) { --rot: 2deg; --dur: 8.8s; --delay: .75s; width: 148px; align-self: flex-start; } @media (max-width: 1280px) { .heroside .mini-card { width: 150px; } .mini-cardimg { height: 80px; } } @media (prefers-reduced-motion: reduce) { .mini-card { animation: none; opacity: 1; } } .herocontent { position: relative; z-index: 3; max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero .eyebrow { color: var(--mk-warmgray); justify-content: center; } .herotitle { margin: 26px 0 30px; } / Mobilon az „egy helyen." SAJÁT SORBA kerül, teljes szélességben — így a kiemelt, dőlt zárlat nem lóg oda az előző sor végére, hanem külön ül, ahogy a hangsúlya kívánja. Asztalon marad soron belül. / @media (max-width: 640px) { .herotitle .accent-italic { display: block; } } .herolead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.75; color: var(--mk-warmgray); max-width: 620px; margin: 0 auto; } .heroctas { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 40px; } .stamp { width: 106px; height: 106px; margin-top: 40px; } .stampring { animation: stamp-spin 28s linear infinite; transform-origin: 60px 60px; } @keyframes stamp-spin { to { transform: rotate(360deg); } } / ---------- Marquee (alkotó-szalag) ---------- / .marquee { background: var(--mk-cream); border-top: 1px solid var(--mk-border); border-bottom: 1px solid var(--mk-border); overflow: hidden; padding: 26px 0; } .marqueetrack { display: flex; gap: 0; width: max-content; animation: marquee 46s linear infinite; } .marqueeitem { font-family: var(--mk-font-display); font-style: italic; font-weight: 400; font-size: 26px; color: var(--mk-warmgray); white-space: nowrap; padding: 0 34px; position: relative; } .marqueeitem::after { content: "\2766"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); font-size: 14px; font-style: normal; color: var(--mk-mustard); } @keyframes marquee { to { transform: translateX(-50%); } } / ---------- Értékjelző sáv ---------- / .values { background: var(--mk-cream); border-bottom: 1px solid var(--mk-border); } .values .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); } @media (max-width: 820px) { .values .wrap { grid-template-columns: 1fr; gap: 28px; } } .value { display: flex; gap: 18px; align-items: flex-start; } .valueicon { width: 46px; height: 46px; flex-shrink: 0; border: 1px solid rgba(201,166,107,0.55); border-radius: 50%; display: grid; place-content: center; color: var(--mk-gold); } .value h3 { font-size: 18px; margin-bottom: 6px; } .value p { font-size: 14px; color: var(--mk-warmgray); line-height: 1.65; } / ---------- Ajándékcsomagok ---------- / .bundles { background: var(--mk-cream-deep); } .bundleshead { max-width: 760px; } .bundlesgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 52px; } @media (max-width: 1080px) { .bundlesgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .bundlesgrid { grid-template-columns: 1fr; } } .bundle { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 20px; position: relative; display: flex; flex-direction: column; transition: box-shadow var(--mk-ease), transform var(--mk-ease); } .bundle::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(201,166,107,0.32); border-radius: 10px; pointer-events: none; } .bundle:hover { box-shadow: var(--mk-shadow-md); transform: translateY(-3px); } .bundleimg { border-radius: var(--mk-radius-img); height: 180px; margin-bottom: 18px; position: relative; overflow: hidden; background: linear-gradient(160deg, var(--mk-terracotta) 0%, #9C5537 80%); } .bundleimg .badge { position: absolute; top: 14px; left: 14px; z-index: 2; } .bundle h3 { font-size: 20px; margin-bottom: 8px; } .bundle p { font-size: 14px; color: var(--mk-warmgray); line-height: 1.65; flex: 1; } .bundlefoot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mk-border); } .bundleprice { font-family: var(--mk-font-display); font-weight: 600; font-size: 19px; } .bundlenote { font-size: 11.5px; color: var(--mk-warmgray); } .bundle .btn { margin-top: 14px; align-self: stretch; } / ---------- Fő kategóriák ---------- / .cats { background: var(--mk-cream); } .catsgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 52px; } @media (max-width: 1080px) { .catsgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .catsgrid { grid-template-columns: 1fr; } } .cat { position: relative; border-radius: var(--mk-radius-lg); overflow: hidden; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 26px; color: var(--mk-cream); text-decoration: none; background: linear-gradient(160deg, var(--mk-sage) 0%, #7F8E71 100%); } .catbg { position: absolute; inset: 0; z-index: 0; transition: transform 1100ms cubic-bezier(0.22,1,0.36,1); background-size: cover; background-position: center; } .cat:hover .catbg { transform: scale(1.06); } .cat::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(62,46,34,0.82) 0%, rgba(62,46,34,0.28) 55%, rgba(62,46,34,0.06) 100%); z-index: 1; } .cat::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(247,243,236,0.4); border-radius: 10px; pointer-events: none; z-index: 2; } / A szöveg-tartalom az overlay fölé (z-index 3), DE a .catbg-t kihagyjuk, különben a position:absolute-ja relative-re íródna és a kép-div összeomlana. / .cat > :not(.catbg) { position: relative; z-index: 3; } .cat h3 { font-size: 22px; margin-bottom: 8px; color: var(--mk-cream); } .cat p { font-size: 13.5px; line-height: 1.6; color: rgba(247,243,236,0.85); } .catcta { margin-top: 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; color: var(--mk-cream); transition: color var(--mk-ease); } .cat:hover .catcta { color: var(--mk-gold); } .catcta::after { content: "\2192"; transition: transform var(--mk-ease); } .cat:hover .catcta::after { transform: translateX(4px); } /* ---------- Sztár termékeink — karusel ---------- / .products { background: var(--mk-cream); overflow: hidden; } .productshead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .carousel { position: relative; height: 560px; margin-top: 48px; } .carousel .melia-product-card { position: absolute; left: 50%; top: 24px; width: 300px; margin-left: -150px; transition: transform 700ms cubic-bezier(0.22,1,0.36,1), opacity 700ms ease; will-change: transform; cursor: pointer; } .carousel .melia-product-card.is-active { cursor: default; } .carousel .melia-product-card.is-active::after { border-color: rgba(223,163,32,0.7); } .carousel .melia-product-card.is-active .badge { background: var(--mk-mustard); color: #fff; } .carouselnav { display: flex; justify-content: center; gap: 14px; margin-top: 8px; } .carouselbtn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--mk-walnut); background: transparent; color: var(--mk-walnut); font-size: 17px; cursor: pointer; display: grid; place-content: center; transition: background var(--mk-ease), color var(--mk-ease), border-color var(--mk-ease); } .carouselbtn:hover { background: var(--mk-sage-hover); border-color: var(--mk-sage-hover); color: #fff; } @media (max-width: 720px) { .carousel { height: 520px; } .carousel .melia-product-card { width: 260px; margin-left: -130px; } } / ---------- Bevezető idézet ---------- / .intro { background: var(--mk-cream); } .introlayout { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 76px); align-items: center; } .introfigure { position: relative; margin: 0; max-width: 440px; } .introimg { width: 100%; height: auto; display: block; border-radius: var(--mk-radius-lg); object-fit: cover; } .introfigure::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(201,166,107,0.42); border-radius: 10px; pointer-events: none; } .introquote { font-family: var(--mk-font-display); font-weight: 400; font-size: clamp(23px, 2.6vw, 34px); line-height: 1.45; max-width: 640px; } .introquote em { font-style: italic; color: var(--mk-terracotta); } .intrometa { margin-top: 34px; display: flex; align-items: center; gap: 16px; } .intrometa .line { width: 56px; height: 1px; background: var(--mk-gold); } @media (max-width: 860px) { .introlayout { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); } .introfigure { max-width: 380px; margin-inline: auto; } } / ---------- Miért Mélia Kids ---------- / .why { background: var(--mk-cream-deep); position: relative; } .whygrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 52px; } @media (max-width: 1080px) { .whygrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .whygrid { grid-template-columns: 1fr; } } .why-card { background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 34px 30px; position: relative; transition: box-shadow var(--mk-ease), transform var(--mk-ease); } .why-card::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(201,166,107,0.32); border-radius: 10px; pointer-events: none; } .why-card:hover { box-shadow: var(--mk-shadow-md); transform: translateY(-3px); } .why-card { background: var(--mk-paper); } .why-cardnum { font-family: var(--mk-font-display); font-style: italic; font-weight: 400; font-size: 15px; color: var(--mk-gold); letter-spacing: 0.04em; margin-bottom: 16px; display: block; } .why-card h3 { font-size: 21px; margin-bottom: 12px; } .why-card p { font-size: 15px; color: var(--mk-warmgray); line-height: 1.65; } / ---------- Kurátori folyamat ---------- / .curation { background: var(--mk-cream-deep); } .curationsteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; margin-top: 56px; } .step { padding: 8px 34px 8px 0; position: relative; } .step + .step { padding-left: 34px; border-left: 1px solid var(--mk-border); } .stepnum { font-family: var(--mk-font-display); font-weight: 500; font-size: 52px; color: var(--mk-terracotta-soft); line-height: 1; -webkit-text-stroke: 1px var(--mk-terracotta); margin-bottom: 18px; } .step h3 { font-size: 20px; margin-bottom: 10px; } .step p { font-size: 15px; color: var(--mk-warmgray); line-height: 1.65; } @media (max-width: 760px) { .step + .step { padding-left: 0; padding-top: 28px; border-left: none; } } / ---------- Alkotóink (sötét) ---------- / .makers { background: var(--mk-walnut); color: var(--mk-cream); overflow: hidden; position: relative; } .makers::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C9A66B' stroke-width='1'%3E%3Cpath d='M0 36a36 36 0 0 1 72 0'/%3E%3Cpath d='M-36 72a36 36 0 0 1 72 0'/%3E%3Cpath d='M36 72a36 36 0 0 1 72 0'/%3E%3C/g%3E%3C/svg%3E"); background-size: 72px 72px; } .makers .wrap { position: relative; z-index: 1; } .makers .eyebrow { color: rgba(247,243,236,0.7); } .makers h2 { margin: 22px 0 20px; max-width: 640px; color: var(--mk-cream); } .makers h2 em { color: var(--mk-gold); } .makerslead { color: rgba(247,243,236,0.78); max-width: 620px; } .makersgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 58px; } / Alkotók carousel (3-as csoportok, auto-rotáló, pontokkal) / .makerscarousel { margin-top: 52px; } .makersviewport { overflow: hidden; } .makerstrack { display: flex; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .makersslide { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-content: start; } @media (max-width: 860px) { .makersslide { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .makersslide { grid-template-columns: 1fr; } } / AKADÁLYMENTESSÉG — érintőfelület: a lapozópontok vizuálisan 9×9 px-esek, ami jóval a 24×24 px-es minimum alatt van (ujjal alig eltalálhatók, Lighthouse „target-size" hiba). A pontot NEM nagyítjuk meg — helyette egy láthatatlan `::after` réteg terjeszti ki a kattintható területet a pont köré. Az elrendezés nem mozdul, mert az `::after` abszolút pozicionált. / .makersdot, .socialdot { position: relative; } .makersdot::after, .socialdot::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; min-width: 100%; } .makersdots { display: flex; gap: 16px; justify-content: center; margin-top: 34px; } .makersdot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: rgba(247,243,236,0.3); cursor: pointer; transition: width var(--mk-ease), background var(--mk-ease), border-radius var(--mk-ease); } .makersdot:hover { background: rgba(247,243,236,0.55); } .makersdot.is-active { width: 26px; border-radius: var(--mk-radius-pill); background: var(--mk-gold); } .maker { background: var(--mk-walnut-soft); border: 1px solid rgba(247,243,236,0.12); border-radius: var(--mk-radius-lg); padding: 30px 28px; position: relative; transition: transform var(--mk-ease), border-color var(--mk-ease); } .maker::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(201,166,107,0.22); border-radius: 10px; pointer-events: none; } .maker:hover { transform: translateY(-3px); border-color: rgba(201,166,107,0.5); } .makerhead { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .makeravatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: var(--mk-gold-soft); display: grid; place-content: center; font-family: var(--mk-font-display); font-weight: 500; font-size: 18px; color: #8A6A33; overflow: hidden; } .makeravatar--img { background: #fff; } .makeravatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .makername { font-family: var(--mk-font-display); font-weight: 500; font-size: 19px; } .makermeta { font-size: 12px; color: rgba(247,243,236,0.6); } .maker p { font-size: 14px; line-height: 1.65; color: rgba(247,243,236,0.75); } .makerscta { margin-top: 48px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; } / ---------- Vélemények ---------- / .social { background: var(--mk-sage-soft); } .social--photo { position: relative; isolation: isolate; } .social--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(247,243,236,0.72), rgba(247,243,236,0.60)), var(--social-bg); background-size: cover; background-position: center 32%; background-repeat: no-repeat; } / Mobilon a jóval kisebb (768 px) változatot töltjük — háttérképnél nincs srcset, ezért media query dönt. Ha nincs mobil változat, marad az eredeti. / @media (max-width: 860px) { .social--photo::before { background-image: linear-gradient(rgba(247,243,236,0.72), rgba(247,243,236,0.60)), var(--social-bg-m, var(--social-bg)); } } .social--photo .quote { background: rgba(255,255,255,0.86); backdrop-filter: blur(2px); } / Vélemények carousel: 1 slide/nézet, transform-alapú váltás, pontokkal. / .socialcarousel { margin-top: 40px; } .socialviewport { overflow: hidden; } .socialtrack { display: flex; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .socialslide { flex: 0 0 100%; min-width: 0; display: flex; justify-content: center; padding: 0 4px; box-sizing: border-box; } .socialslide .quote { max-width: 840px; width: 100%; text-align: center; padding: 40px clamp(24px, 4vw, 56px); } .socialslide .quotemark { text-align: center; } .socialslide .quote p { max-width: 640px; margin-inline: auto; } .socialdots { display: flex; gap: 16px; justify-content: center; margin-top: 30px; } .socialdot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: rgba(62,46,34,0.22); cursor: pointer; transition: width var(--mk-ease), background var(--mk-ease), border-radius var(--mk-ease); } .socialdot:hover { background: rgba(62,46,34,0.4); } .socialdot.is-active { width: 26px; border-radius: var(--mk-radius-pill); background: var(--mk-terracotta); } .quote { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 32px 30px; position: relative; } .quote::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(201,166,107,0.3); border-radius: 10px; pointer-events: none; } .quotemark { font-family: var(--mk-font-display); font-size: 44px; line-height: 1; color: var(--mk-gold); display: block; margin-bottom: 6px; } .quote p { font-family: var(--mk-font-display); font-weight: 400; font-size: 17.5px; line-height: 1.6; font-style: italic; } .quotemeta { font-size: 12px; color: var(--mk-warmgray); margin-top: 16px; letter-spacing: 0.04em; } / ---------- FAQ ---------- / .faq { background: var(--mk-cream); } .faqgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; } @media (max-width: 900px) { .faqgrid { grid-template-columns: 1fr; } } .faq-item { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 32px 30px; position: relative; } .faq-item::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(201,166,107,0.3); border-radius: 10px; pointer-events: none; } .faq-itemicon { display: inline-grid; place-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--mk-gold-soft); color: var(--mk-terracotta); margin-bottom: 18px; } .faq-itemicon svg { width: 24px; height: 24px; display: block; } .faq-item h3 { font-size: 19px; margin-bottom: 12px; } .faq-item p { font-size: 14.5px; color: var(--mk-warmgray); line-height: 1.7; } / ---------- Mélia Klub ---------- / .club { background: var(--mk-walnut); color: var(--mk-cream); overflow: hidden; position: relative; } .club::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F7F3EC' stroke-width='1'%3E%3Cpath d='M0 36a36 36 0 0 1 72 0'/%3E%3Cpath d='M-36 72a36 36 0 0 1 72 0'/%3E%3Cpath d='M36 72a36 36 0 0 1 72 0'/%3E%3C/g%3E%3C/svg%3E"); background-size: 72px 72px; } .club .wrap { position: relative; z-index: 1; } .clubinner { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; } @media (max-width: 900px) { .clubinner { grid-template-columns: 1fr; gap: 48px; } } .club .eyebrow { color: rgba(247,243,236,0.7); } .club h2 { margin: 22px 0 20px; max-width: 620px; color: var(--mk-cream); } .club h2 em { font-style: italic; color: var(--mk-gold); } .clublead { color: rgba(247,243,236,0.8); max-width: 560px; } .clubtopics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .clubtopic { font-size: 13px; letter-spacing: 0.04em; padding: 9px 18px; border: 1px solid rgba(247,243,236,0.28); border-radius: var(--mk-radius-pill); color: rgba(247,243,236,0.88); transition: border-color var(--mk-ease), background var(--mk-ease); } .clubtopic:hover { border-color: var(--mk-gold); background: rgba(201,166,107,0.12); } .clubcta { margin-top: 38px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; } .clubcard { background: var(--mk-walnut-soft); border: 1px solid rgba(247,243,236,0.14); border-radius: var(--mk-radius-lg); padding: 36px 34px; position: relative; } .clubcard::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(201,166,107,0.3); border-radius: 11px; pointer-events: none; } .clubbenefits { list-style: none; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; } .clubbenefits li { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; color: rgba(247,243,236,0.85); } .clubbenefits li::before { content: ""; width: 9px; height: 9px; flex-shrink: 0; margin-top: 7px; border-radius: 50%; background: var(--mk-gold); } .clubbenefits strong { display: block; font-family: var(--mk-font-display); font-weight: 500; font-size: 16px; color: var(--mk-cream); margin-bottom: 3px; } / ---------- Történetünk (teljes magasságú képes szekció) ---------- / .fullsplit { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .fullsplit .figure { aspect-ratio: auto; height: 100%; min-height: 100%; border-radius: 0; box-shadow: none; } .fullsplit .figure::after { inset: 14px; } .fullsplit .figurebadge { top: 28px; left: 28px; } .fullsplitbody { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(64px, 9vh, 120px) clamp(28px, 6vw, 110px); } @media (max-width: 860px) { .fullsplit { grid-template-columns: 1fr; min-height: 0; } .fullsplit .figure { min-height: 52vh; order: -1; } } .figure { border-radius: var(--mk-radius-lg); overflow: hidden; position: relative; aspect-ratio: 4/4.6; box-shadow: var(--mk-shadow-lg); background: linear-gradient(160deg, var(--mk-terracotta) 0%, #9C5537 80%); background-size: cover; background-position: center; } .figure::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(247,243,236,0.5); border-radius: 8px; pointer-events: none; z-index: 1; } .figurebadge { position: absolute; top: 18px; left: 18px; z-index: 2; } / A story-kép valódi (nem CSS háttér), hogy a böngésző a képernyőhöz illő méretet tölthesse le a srcset-ből — mobilon ez több száz KB megtakarítás. / .figure--img { display: block; } .figureimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; margin: 0; } .story { background: var(--mk-gold-soft); } .story h2 { margin: 22px 0 20px; } .story p { max-width: 540px; margin-bottom: 18px; } .storyhighlight { font-family: var(--mk-font-display); font-style: italic; font-weight: 400; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; color: var(--mk-walnut); border-left: 3px solid var(--mk-mustard); padding-left: 20px; margin: 6px 0 24px; max-width: 520px; } / ---------- Newsletter ---------- / .newsletter { background: var(--mk-cream); } .newsletterpanel { background: var(--mk-terracotta-soft); border-radius: var(--mk-radius-lg); padding: clamp(44px, 6vw, 72px); display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; overflow: hidden; } @media (max-width: 820px) { .newsletterpanel { grid-template-columns: 1fr; } } .newsletter h2 { margin: 20px 0 14px; } .newsletter p { color: var(--mk-warmgray); max-width: 460px; } .newsletterform { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; } .newsletterrow { display: flex; gap: 12px; } @media (max-width: 520px) { .newsletterrow { flex-direction: column; } } .newsletterrow .input { flex: 1; } .newsletterhint { font-size: 12px; color: var(--mk-warmgray); } / ---------- Záró blokk ---------- / .closing { background: var(--mk-walnut); color: var(--mk-cream); text-align: center; overflow: hidden; position: relative; } .closingquote { font-family: var(--mk-font-display); font-weight: 400; font-size: clamp(26px, 3.8vw, 42px); line-height: 1.4; max-width: 840px; margin: 0 auto; color: var(--mk-cream); } .closingquote em { font-style: italic; color: var(--mk-gold); } .closing p { color: rgba(247,243,236,0.75); max-width: 600px; margin: 26px auto 0; } .closing .btn { margin-top: 42px; } / ============================================================ Rólunk / „Így válogatunk" történet-oldal (page-magyar-kezmuves-termekek.php) A főoldal háttereit, ív-mintáját és arany keret-motívumát újrahasználva. Minden kép szöveg mellett áll (split) — egyetlen kép sem áll magában. ============================================================ / .story { overflow: hidden; } .storywrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); position: relative; z-index: 1; } .storyprose { max-width: 760px; margin-inline: auto; } .storyprose--center { text-align: center; } / A főoldali ív-minta (hero/makers) megosztott háttérként / .story-arc { position: relative; } .story-arc::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C9A66B' stroke-width='1'%3E%3Cpath d='M0 36a36 36 0 0 1 72 0'/%3E%3Cpath d='M-36 72a36 36 0 0 1 72 0'/%3E%3Cpath d='M36 72a36 36 0 0 1 72 0'/%3E%3C/g%3E%3C/svg%3E"); background-size: 72px 72px; opacity: 0.13; } / Hero — cream→cream-deep átmenet + ív-minta (mint a főoldali hero) / .story-hero { background: linear-gradient(180deg, var(--mk-cream) 0%, var(--mk-cream-deep) 100%); text-align: center; padding: clamp(60px, 9vw, 120px) 0 clamp(44px, 6vw, 78px); } .story-hero .eyebrow { justify-content: center; color: var(--mk-warmgray); } .story-herolead { font-family: var(--mk-font-display); font-weight: 400; font-size: clamp(28px, 4.6vw, 48px); line-height: 1.16; color: var(--mk-walnut); max-width: 900px; margin: 22px auto 0; } .story-herolead em { color: var(--mk-terracotta); font-style: italic; } / Fleuron elválasztó (a záró szekció díszéből) / .story-fleuron { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--mk-gold); font-size: 13px; padding-top: clamp(34px, 5vw, 50px); } .story-fleuron::before, .story-fleuron::after { content: ""; width: min(120px, 18vw); height: 1px; background: linear-gradient(to right, transparent, var(--mk-gold)); opacity: 0.55; } .story-fleuron::after { background: linear-gradient(to left, transparent, var(--mk-gold)); } / Szöveg-szekció + háttér-variánsok / .story-section { padding: clamp(44px, 6.5vw, 84px) 0; position: relative; } .story-section--cream { background: var(--mk-cream); } .story-section--deep { background: var(--mk-cream-deep); } .story-section--paper { background: var(--mk-paper); } .story-section--dark { background: var(--mk-walnut); } .story-section h2 { font-family: var(--mk-font-display); font-weight: 500; font-size: clamp(25px, 3.3vw, 37px); line-height: 1.22; color: var(--mk-walnut); margin: 0 0 var(--mk-space-4); } .story-section h3 { font-family: var(--mk-font-display); font-weight: 500; font-size: clamp(19px, 2.3vw, 25px); line-height: 1.3; color: var(--mk-walnut); margin: var(--mk-space-5) 0 var(--mk-space-2); } .story-section p { font-size: 17px; line-height: 1.78; color: var(--mk-warmgray); margin: 0 0 1.1em; } .story-section p:last-child { margin-bottom: 0; } .story-section p strong { color: var(--mk-walnut); font-weight: 600; } .story-section .storyprose > :first-child, .story-splittext > :first-child { margin-top: 0; } / Sötét szekció szövegszínei / .story-section--dark h2, .story-section--dark h3 { color: #fff; } .story-section--dark p { color: rgba(247,243,236,0.82); } .story-section--dark p strong { color: #fff; } / Kis eyebrow a split-szekciók fölé / .story-eyebrow { font-family: var(--mk-font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mk-terracotta); display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .story-eyebrow::before { content: "\2726"; font-size: 9px; color: var(--mk-gold); } .story-section--dark .story-eyebrow { color: var(--mk-gold); } / Kép + szöveg split — MINDEN kép szöveg mellett áll / .story-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); position: relative; z-index: 1; } .story-split--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } .story-split--rev .story-splitmedia { order: 2; } .story-splittext > :first-child { margin-top: 0; } / Kép + arany belső keret (a főoldali kártya-motívum) / .story-figure { position: relative; margin: 0; } .story-figure--portrait { max-width: 460px; } .story-figure--square { max-width: 430px; margin-inline: auto; } .story-figureimg { width: 100%; height: auto; display: block; border-radius: var(--mk-radius-lg); object-fit: cover; } .story-figure::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(201,166,107,0.42); border-radius: 10px; pointer-events: none; } / „Nehéz jól választani" kártyák (arany belső kerettel) / .story-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: var(--mk-space-6); position: relative; z-index: 1; } .story-card { background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 30px 26px; position: relative; } .story-card::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(201,166,107,0.32); border-radius: 10px; pointer-events: none; } .story-card h3 { font-family: var(--mk-font-display); font-weight: 500; font-size: 19px; color: var(--mk-walnut); margin: 0 0 8px; } .story-card p { font-size: 14.5px; line-height: 1.62; color: var(--mk-warmgray); margin: 0; } / Küldetés-lista (pipás) / .story-mission { list-style: none; padding: 0; margin: var(--mk-space-4) 0; display: grid; gap: 12px; } .story-mission li { position: relative; padding-left: 36px; font-size: 17px; line-height: 1.55; color: var(--mk-walnut); } .story-mission li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--mk-sage); color: #fff; font-size: 12px; display: grid; place-content: center; } .story-section--dark .story-mission li { color: rgba(247,243,236,0.9); } .story-missionfoot { margin-top: var(--mk-space-4); } / Záró kategória-CTA (sötét + ív-minta) / .story-cta { background: var(--mk-walnut); text-align: center; padding: clamp(54px, 7vw, 88px) 0; position: relative; overflow: hidden; } .story-cta h2 { font-family: var(--mk-font-display); font-weight: 500; font-size: clamp(24px, 3.2vw, 35px); color: #fff; margin: 0; } .story-ctalead { color: rgba(247,243,236,0.78); max-width: 560px; margin: 16px auto 0; font-size: 17px; } .story-ctabtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: var(--mk-space-6); } @media (max-width: 960px) { .story-cards { grid-template-columns: 1fr 1fr; } } @media (max-width: 820px) { .story-split, .story-split--rev { grid-template-columns: 1fr; } .story-split--rev .story-split__media { order: 0; } .story-figure--portrait, .story-figure--square { max-width: 520px; margin-inline: auto; } } @media (max-width: 520px) { .story-cards { grid-template-columns: 1fr; } } / ---------- Advanced Product Fields (személyre szabás) — Mélia színek ---------- * A plugin defaultja rózsaszín (#ecc1d3, pl. --apf-cb-border). Felülírjuk a * változókat a .wapf wrapperen (közelebbi ős, mint a plugin :root-ja → nyer), * plusz a kiválasztott állapotot !important-tal (per-field inline szín ellen is). / .wapf, :root { --apf-cb-border: 1.6px solid rgba(62, 46, 34, 0.30) !important; --apf-cb-border-color-hov: var(--mk-terracotta) !important; --apf-cb-bg-sel: var(--mk-terracotta) !important; --apf-cb-border-color-sel: var(--mk-terracotta) !important; --apf-cs-border: 1.6px solid rgba(62, 46, 34, 0.30) !important; --apf-cs-border-color-hov: var(--mk-terracotta) !important; --apf-cs-border-color-sel: var(--mk-terracotta) !important; --apf-is-border: 1.6px solid rgba(62, 46, 34, 0.18) !important; --apf-is-border-color-hov: var(--mk-terracotta) !important; --apf-is-border-color-sel: var(--mk-terracotta) !important; --apf-is-bg-sel: var(--mk-terracotta-soft) !important; --apf-input-border-color-foc: var(--mk-terracotta) !important; --apf-date-bg-sel: var(--mk-terracotta) !important; --apf-date-color-sel: #fff !important; --apf-progress-bg: var(--mk-terracotta) !important; --apf-ts-border: 1.6px solid rgba(62, 46, 34, 0.30) !important; / Kipipálatlan rádiógomb kerete — a plugin defaultja rózsaszín (#ecc1d3). / --apf-radio-border: 1.6px solid rgba(62, 46, 34, 0.30) !important; --apf-radio-border-color-hov: var(--mk-terracotta) !important; --apf-radio-border-color-sel: var(--mk-terracotta) !important; --apf-radio-bg-sel: var(--mk-terracotta) !important; --apf-ts-border-color-hov: var(--mk-terracotta) !important; --apf-ts-border-color-sel: var(--mk-terracotta) !important; --apf-ts-bg-sel: var(--mk-terracotta) !important; } .wapf .wapf-checkbox input:checked + .wapf-custom, .wapf .wapf-radio input:checked + .wapf-custom { background-color: var(--mk-terracotta) !important; border-color: var(--mk-terracotta) !important; } / Kötelező () jelölés: rózsaszín/piros helyett terrakotta / .wapf .wapf-required, .wapf [class="required"], .wapf-field-label .wapf-required, .wapf .wapf-field-label sup, .wapf abbr[title] { color: var(--mk-terracotta) !important; border: none !important; text-decoration: none !important; } / ---------- Cookie-consent (Moove GDPR) — Mélia arculat ---------- * A plugin saját CSS-e után/mellett fut, ezért a színeknél !important a * megbízható felülíráshoz. Alsó sáv: dió háttér (mint a footer), krém szöveg, * terrakotta „Elfogad", kerettes „Elutasít/Beállítások", arany linkek. / #moove_gdpr_cookie_info_bar, .moove-gdpr-info-bar-container { background: var(--mk-walnut) !important; color: var(--mk-cream) !important; border-top: 1px solid rgba(201, 166, 107, 0.4) !important; font-family: var(--mk-font-body) !important; box-shadow: 0 -6px 24px rgba(62, 46, 34, 0.18) !important; } .moove-gdpr-info-bar-content, .moove-gdpr-cookie-notice, .moove-gdpr-info-bar-content p { color: var(--mk-cream) !important; font-family: var(--mk-font-body) !important; font-size: 14px !important; line-height: 1.6 !important; } .moove-gdpr-cookie-notice a, .moove-gdpr-info-bar-content a { color: var(--mk-gold) !important; text-decoration: underline !important; } / Gombok / .moove-gdpr-info-bar-container .mgbutton, .moove-gdpr-modal-footer-content .mgbutton { border-radius: var(--mk-radius-md) !important; font-family: var(--mk-font-body) !important; font-weight: 500 !important; letter-spacing: 0.2px !important; transition: background var(--mk-ease), border-color var(--mk-ease) !important; } .moove-gdpr-infobar-allow-all, .moove-gdpr-modal-allow-all, .moove-gdpr-modal-save-settings { background: var(--mk-terracotta) !important; border: 1px solid var(--mk-terracotta) !important; color: #fff !important; } .moove-gdpr-infobar-allow-all:hover, .moove-gdpr-modal-allow-all:hover, .moove-gdpr-modal-save-settings:hover { background: var(--mk-terracotta-hover) !important; border-color: var(--mk-terracotta-hover) !important; } .moove-gdpr-infobar-reject-btn, .moove-gdpr-infobar-settings-btn { background: transparent !important; border: 1px solid rgba(247, 243, 236, 0.55) !important; color: var(--mk-cream) !important; } .moove-gdpr-infobar-reject-btn:hover, .moove-gdpr-infobar-settings-btn:hover { background: rgba(247, 243, 236, 0.12) !important; border-color: var(--mk-cream) !important; } / Beállítás-modal / .moove-gdpr-modal-content { font-family: var(--mk-font-body) !important; border-radius: var(--mk-radius-lg) !important; overflow: hidden !important; } .moove-gdpr-modal-content h1, .moove-gdpr-modal-content h2, .moove-gdpr-modal-content h3, .moove-gdpr-modal-left-content .moove-gdpr-branding-cnt { font-family: var(--mk-font-display) !important; color: var(--mk-walnut) !important; } .moove-gdpr-modal-left-content { background: var(--mk-cream) !important; } .menu-item-off.menu-item-selected > a, .moove-gdpr-modal-left-content .menu-item-selected a { color: var(--mk-terracotta) !important; } / Kapcsoló (aktív = zsálya) / .cookie-switch input:checked + .cookie-slider, .gdpr-sr input:checked + .gdpr-sr-label, input:checked + .cookie-slider { background: var(--mk-sage) !important; } / Expressz fizetés melletti tájékoztatás (csomagpont a normál pénztárban) / .melia-express-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--mk-warmgray); text-align: center; } / ---------- WAPF: felár-jelzés és végösszeg a kosárgomb fölött ---------- * A plugin a `.wapf-product-totals` blokkot a kosárgomb elé teszi. Itt csak a * vizuális hangsúlyt adjuk hozzá: a felár (pricing hint) kiemelése, a * Végösszeg sor elválasztása, és a változatra váró állapot szövege. / .wapf-pricing-hint { color: var(--mk-terracotta); font-weight: 500; white-space: nowrap; } / Ahol nincs felárral járó opció, a plugin ÜRES totals-blokkot rendel ki (és * inline `display:block`-ot ad rá) — a mi háttér/keret/padding stílusunkkal ez * egy üres doboz lenne a kosárgomb fölött. Az inline stílust csak !important * üti; a `:empty` élőben újraértékelődik, tehát amint tartalmat kap, megjelenik. / .wapf-product-totals:empty { display: none !important; } .wapf-product-totals { margin: 18px 0 14px; padding: 16px 18px; background: var(--mk-cream); border: 1px solid rgba(62, 46, 34, 0.12); border-radius: 10px; } .wapf-product-totals .wapf-total-row, .wapf-product-totals .wapf--inner > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 5px 0; } / A Végösszeg sor a hangsúlyos: elválasztóvonal + nagyobb, sötét szám. * A totals-sorok `price amount` osztályt is kapnak, ezért rájuk illeszkedik a * `.woocommerce div.product span.price` (0,3,2) — az méretezné 1.25em-re és * színezné zsályára. Az elem saját osztályait bevonva (0,4,0) fölé megyünk. / .wapf-product-totals .wapf-grand-total.price.amount { font-family: var(--mk-font-display); font-size: 23px; font-weight: 600; color: var(--mk-walnut) !important; } .wapf-product-totals .wapf-product-total.price.amount, .wapf-product-totals .wapf-options-total.price.amount { font-size: 17px; } .wapf-product-totals .wapf-grand-total-row, .wapf-product-totals .wapf--inner > div:last-child { margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(62, 46, 34, 0.16); } / Amíg nincs változat kiválasztva, a végösszeg helyett ez a sor áll. / .melia-osszeg-jelzo { margin: 18px 0 14px; padding: 12px 16px; background: var(--mk-cream); border: 1px dashed rgba(62, 46, 34, 0.22); border-radius: 10px; font-size: 14px; line-height: 1.5; color: var(--mk-warmgray); } .melia-osszeg-jelzo[hidden] { display: none; } / ---------- Belépés: MÓD-SÁV (vásárlói vs. alkotói fiók) ---------- * Két külön belépő felület van, és ezt félreérthetetlenül jelezni kell. A sáv * a bejelentkező űrlap FÖLÖTT ül, teljes szélességben, és a két mód eltérő * színvilágot kap: a vásárlói világos krém terrakotta kiemeléssel, az alkotói * sötét dió hátterű. Mindkettőben ott az átváltó link a másik felületre. / .loginmode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin: 0 0 var(--mk-space-5); padding: 20px 24px; border-radius: var(--mk-radius-lg); } .loginmodefo { min-width: 0; flex: 1 1 320px; } .loginmodebadge { display: inline-block; margin-bottom: 8px; padding: 5px 13px; border-radius: var(--mk-radius-pill); font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .loginmodelead { margin: 0; font-size: 14.5px; line-height: 1.55; } .loginmodevalto { flex: 0 1 auto; margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; } .loginmodekerdes { opacity: 0.85; } .loginmodelink { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; white-space: nowrap; } / Vásárlói mód — világos, terrakotta kiemeléssel / .loginmode--vasarlo { background: var(--mk-cream); border: 1px solid rgba(62, 46, 34, 0.12); color: var(--mk-walnut); } .loginmode--vasarlo .loginmodebadge { background: var(--mk-terracotta); color: #fff; } .loginmode--vasarlo .loginmodelead { color: var(--mk-warmgray); } .loginmode--vasarlo .loginmodelink { color: var(--mk-terracotta); } .loginmode--vasarlo .loginmodelink:hover { color: var(--mk-terracotta-hover); } / Alkotói mód — sötét dió háttér, hogy azonnal más felületnek látsszon / .loginmode--alkoto { background: var(--mk-walnut); border: 1px solid var(--mk-walnut); color: var(--mk-cream); } .loginmode--alkoto .loginmodebadge { background: var(--mk-gold); color: var(--mk-walnut); } .loginmode--alkoto .loginmodelead { color: rgba(247, 243, 236, 0.82); } .loginmode--alkoto .loginmodelink { color: var(--mk-gold); } .loginmode--alkoto .loginmodelink:hover { color: #fff; } @media (max-width: 640px) { .loginmode { padding: 16px 18px; } .loginmodevalto { flex-basis: 100%; } } / ---------- Hírlevél: a FluentForm űrlap a Mélia designban ---------- * A főoldali feliratkozást a FluentForm „Hírlevél feliratkozás” (#2) veszi fel. * A plugin saját markupját (`.ff-`) hozzuk a téma input/gomb kinézetéhez, hogy a szekció ugyanúgy nézzen ki, mint a korábbi statikus űrlap. / .newsletterform .fluentform { position: relative; z-index: 1; } .newsletterform .frm-fluent-form { margin: 0; } .newsletterform .fluentform form.frm-fluent-form .ff-t-container { display: flex; flex-wrap: nowrap; gap: 12px; align-items: flex-start; margin: 0; } / A plugin INLINE `flex-basis: 50%`-ot ad a cellákra (50/50 osztás). Inline stílust csak !important üt: a mező vigye a helyet, a gomb a tartalmát. / .newsletterform .fluentform form.frm-fluent-form .ff-t-cell { flex: 1 1 0 !important; width: auto; min-width: 0; padding: 0; } .newsletterform .fluentform form.frm-fluent-form .ff-t-cell + .ff-t-cell { flex: 0 0 auto !important; width: auto; } .newsletterform .fluentform form.frm-fluent-form .ff-el-group { margin: 0; } .newsletterform .fluentform form.frm-fluent-form .ff-el-form-control { font-family: var(--mk-font-body); font-size: 15px; color: var(--mk-walnut); background: var(--mk-white); border: 1px solid var(--mk-border-strong); border-radius: var(--mk-radius-md); padding: 13px 16px; width: 100%; box-shadow: none; transition: border-color var(--mk-ease), box-shadow var(--mk-ease); } .newsletterform .fluentform form.frm-fluent-form .ff-el-form-control::placeholder { color: #A79E93; } .newsletterform .fluentform form.frm-fluent-form .ff-el-form-control:hover { border-color: var(--mk-walnut); } .newsletterform .fluentform form.frm-fluent-form .ff-el-form-control:focus { border-color: var(--mk-terracotta); outline: none; box-shadow: 0 0 0 3px rgba(184,107,75,0.16); } / A plugin a gombot flex-konténerbe teszi, ezért 100%-ra nyúlna. A burkolót blokká tesszük, a gomb pedig a tartalmához igazodik. A magasságot `min-height` adja, hogy pontosan egy vonalban álljon a beviteli mezővel (50px). / .newsletterform .fluentform form.frm-fluent-form .ff_submit_btn_wrapper { display: block; } .newsletterform .fluentform form.frm-fluent-form .ff-btn-submit { display: inline-flex; align-items: center; justify-content: center; width: auto; flex: 0 0 auto; min-height: 50px; font-family: var(--mk-font-body); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--mk-terracotta); color: #fff; border: 1px solid transparent; border-radius: var(--mk-radius-md); padding: 0 32px; cursor: pointer; white-space: nowrap; box-shadow: none; transition: background var(--mk-ease); } .newsletterform .fluentform form.frm-fluent-form .ff-btn-submit:hover { background: var(--mk-terracotta-hover); color: #fff; } / Hibaüzenet és sikeres beküldés — a téma színeivel / .newsletterform .error, .newsletterform .text-danger, .newsletterform .fluentform form.frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: var(--mk-terracotta); } .newsletterform .error.text-danger { color: var(--mk-terracotta); font-size: 12.5px; margin-top: 6px; } .newsletterform .fluentform form.frm-fluent-form .ff-message-success { background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); padding: 16px 18px; color: var(--mk-walnut); font-size: 14.5px; line-height: 1.6; } .newsletterform .fluentform form.frm-fluent-form .ff-message-success p { margin: 0; color: inherit; max-width: none; } .newsletterpolicy { color: var(--mk-warmgray); text-decoration: underline; text-underline-offset: 2px; margin-left: 6px; } .newsletterpolicy:hover { color: var(--mk-terracotta); } @media (max-width: 520px) { .newsletterform .fluentform form.frm-fluent-form .ff-t-container { flex-direction: column; flex-wrap: wrap; } .newsletterform .fluentform form.frm-fluent-form .ff-t-cell, .newsletterform .fluentform form.frm-fluent-form .ff-t-cell + .ff-t-cell { flex: 1 1 auto !important; width: 100%; } .newsletterform .fluentform form.frm-fluent-form .ff-btn-submit { width: 100%; } } / ============================================================ FEJLÉC FELSŐ SÁV — futó promó-üzenet Markup: template-parts/header/topbar.php ============================================================ / / A sáv magassága. Egy helyen definiáljuk, mert három dolog függ tőle: maga a sáv, és a fix nav miatt eltolt tartalom két helyen (.site-main, illetve a főoldali .hero, ami saját clearance-t használ). / :root { --mk-topbar-h: 38px; } .site-headertopbar { position: relative; height: var(--mk-topbar-h); display: flex; align-items: center; background: var(--mk-terracotta); color: var(--mk-white); / A kifutó szöveg nem okozhat vízszintes görgetést. / overflow: hidden; font-family: var(--mk-font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; / A két szélen elhalványul a szöveg, hogy ne éles vágással tűnjön el. / -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); } .topbartrack { display: flex; width: max-content; / A tényleges időtartamot a JS számolja a szöveg hosszából, hogy a sebesség állandó maradjon (lásd assets/js/main.js). A 40s csak akkor érvényesül, ha a JS nem futott le. / animation: melia-topbar-run var(--mk-topbar-duration, 40s) linear infinite; } .topbargroup { display: flex; align-items: center; flex: none; } .topbaritem { white-space: nowrap; } / Elválasztó pont a példányok között — karakter helyett rajzolva, hogy ne függjön a betűkészlet glifakészletétől. / .topbardot { flex: none; width: 4px; height: 4px; margin: 0 clamp(20px, 3vw, 34px); border-radius: 50%; background: currentColor; opacity: 0.5; } / -50% = pontosan egy csoportnyi út (lásd a topbar.php magyarázatát). / @keyframes melia-topbar-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } / Olvashatóság: aki rámutat vagy oda-fókuszál, meg tudja állítani. / .site-headertopbar:hover .topbartrack, .site-headertopbar:focus-within .topbartrack { animation-play-state: paused; } / A fix nav magassága a sávval megnő, ezért a tartalom felső térközét is ugyanennyivel toljuk lejjebb — különben a sáv rácsúszna a tartalomra. A `:has()` miatt ez csak akkor lép életbe, ha a sáv tényleg kirenderelődött (üres üzenetnél a template korán kilép, és nincs mit kompenzálni). A főoldal `.site-main--no-pad`-et használ, ott a .hero adja a clearance-t. / body:has(.site-headertopbar) .site-main:not(.site-main--no-pad) { padding-top: calc(128px + var(--mk-topbar-h)); } body:has(.site-headertopbar) .hero { padding-top: calc(196px + var(--mk-topbar-h)); } / Mozgásérzékenység: a globális reduced-motion szabály (lásd fentebb) már leállítja az animációt, itt csak a látványt rendezzük — egyetlen, középre igazított, tördelhető üzenet marad. / @media (prefers-reduced-motion: reduce) { .site-headertopbar { height: auto; min-height: var(--mk-topbar-h); justify-content: center; padding: 9px clamp(16px, 4vw, 32px); text-align: center; -webkit-mask-image: none; mask-image: none; } .topbartrack { width: auto; } .topbargroup + .topbargroup { display: none; } .topbaritem + ~ .topbaritem, .topbardot { display: none; } .topbaritem { white-space: normal; } } @media (max-width: 600px) { :root { --mk-topbar-h: 34px; } .site-headertopbar { font-size: 11px; letter-spacing: 0.06em; } } /* ============================================================ NYITÓ POPUP Markup: template-parts/popup.php — natív ============================================================ / / A böngésző alapértelmezett dialog-stílusa (fekete keret, fehér doboz, automatikus margó) mindent felülírna, ezért nullázzuk. / .melia-popup { padding: 0; border: none; background: transparent; color: var(--mk-walnut); max-width: min(460px, calc(100vw - 32px)); width: 100%; overflow: visible; } .melia-popup::backdrop { background: rgba(62, 46, 34, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .melia-popupinner { position: relative; background: var(--mk-paper); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); box-shadow: var(--mk-shadow-lg, 0 24px 60px rgba(62,46,34,0.22)); padding: clamp(30px, 5vw, 44px) clamp(24px, 4.5vw, 40px) clamp(26px, 4vw, 36px); text-align: center; / Aranyszínű belső keret — a design system aláírás-eleme (vö. .hero::after). / outline: 1px solid rgba(201, 166, 107, 0.42); outline-offset: -9px; } .melia-popupclose { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--mk-warmgray); cursor: pointer; transition: background var(--mk-ease), color var(--mk-ease); } .melia-popupclose:hover { background: var(--mk-cream-deep); color: var(--mk-walnut); } .melia-popupclose:focus-visible { outline: 2px solid var(--mk-terracotta); outline-offset: 2px; } .melia-popuptitle { font-family: var(--mk-font-display); font-weight: 500; font-size: clamp(24px, 4vw, 30px); line-height: 1.2; margin: 0 0 12px; } .melia-popuptext { color: var(--mk-walnut-soft); line-height: 1.7; } .melia-popuptext p { margin: 0 0 10px; } .melia-popuptext p:last-child { margin-bottom: 0; } .melia-popupbtn { margin-top: 22px; } / Belépő animáció. A base állapot LÁTHATÓ (opacity: 1) — a globális reduced-motion szabály `animation: none !important`-tal kilövi az animációt, és ha a base rejtve lenne, a popup láthatatlan maradna. / .melia-popup[open] .melia-popupinner { animation: melia-popup-in 340ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes melia-popup-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } } / Penztar: a Szallitas masik cimre? cimsor koré NE folyjon a megjegyzes. A WooCommerce alap-stilusa float: left-et ad a #ship-to-different-address elemre (a regi, ket-oszlopos elrendezeshez). Emiatt az utana kovetkezo megjegyzes-blokk melle sodrodik, mobilon pedig ki is log a kepernyobol. A megjegyzes onallo, teljes szelessegu blokk legyen. / / A szelektornak legalabb olyan eros(nek kell lennie, mint a WooCommerce-e: .woocommerce-checkout .checkout .col-2 h3#ship-to-different-address Ezert vesszuk be a body-t is - igy a betoltesi sorrendtol fuggetlenul nyer. */ body.woocommerce-checkout .checkout .col-2 h3#ship-to-different-address { float: none; width: 100%; } .woocommerce-checkout .woocommerce-additional-fields { clear: both; }