/* ========================================================================== Olyan Zsuzsis – fő stíluslap Tartalom: 1. betűk 2. színek, méretek 3. alapok 4. elemek (gomb, címke…) 5. fejléc 6. mobilmenü 7. lábléc 8. oldalak 9. kezdőlap 10. WooCommerce (átmeneti) ========================================================================== */ /* 1. Betűk – a témából, nem a Google-ről (Playfair Display: címek, Nunito: szöveg) */ @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/playfair-display-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("../fonts/playfair-display-latin-ext-wght-italic.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/nunito-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/nunito-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url("../fonts/nunito-latin-ext-wght-italic.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Nunito"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url("../fonts/nunito-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 2. Színek, méretek */ :root { --krem: #fdfcf0; /* háttér (a régi oldalé) */ --papir: #fffefa; /* kártyák */ --tinta: #2b2226; /* szöveg */ --tinta-halvany: #6b5c63; /* másodlagos szöveg */ --rozsa: #e5b4d4; /* márkaszín (a régi kiemelőszín) */ --rozsa-halvany: #f8e8f0; --rozsa-mely: #9b3d6f; /* linkek, kis szöveg rózsaszínben (olvasható a krémen) */ --zsalya: #7f9a7a; /* hímzett levelek zöldje – apró díszekhez */ --fa: #c9a26b; /* hímzőkeret */ --vonal: #ece3d9; --betu-cim: "Playfair Display", Georgia, "Times New Roman", serif; --betu-szoveg: "Nunito", "Segoe UI", system-ui, sans-serif; --kerekites: 22px; --kerekites-kicsi: 12px; --arnyek: 0 1px 2px rgb(43 34 38 / .05), 0 8px 28px rgb(43 34 38 / .07); --szelesseg: 1200px; --szelesseg-szoveg: 760px; --margo: clamp(16px, 4vw, 40px); --fejlec-magassag: 76px; } /* 3. Alapok */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--fejlec-magassag) + 16px); } body { margin: 0; background: var(--krem); color: var(--tinta); font: 400 1.0625rem/1.7 var(--betu-szoveg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.ozs-menu-nyitva { overflow: hidden; } img, svg, video { max-width: 100%; height: auto; } img { display: block; } h1, h2, h3, h4, h5, h6 { font-family: var(--betu-cim); font-weight: 500; line-height: 1.2; margin: 0 0 .6em; color: var(--tinta); text-wrap: balance; } h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); } h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem); } h3 { font-size: 1.375rem; } h4, h5, h6 { font-size: 1.125rem; } p, ul, ol, figure { margin: 0 0 1.1em; } a { color: var(--rozsa-mely); text-decoration-thickness: 1px; text-underline-offset: .2em; } a:hover { color: var(--tinta); } :focus-visible { outline: 2px solid var(--rozsa-mely); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--rozsa); color: var(--tinta); } input, select, textarea, button { font: inherit; color: inherit; } input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], input[type="number"], select, textarea { width: 100%; padding: .7em 1em; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites-kicsi); transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rozsa-mely); box-shadow: 0 0 0 3px var(--rozsa-halvany); } .ozs-keret { width: 100%; max-width: calc(var(--szelesseg) + 2 * var(--margo)); margin-inline: auto; padding-inline: var(--margo); } .ozs-keret--szoveg { max-width: calc(var(--szelesseg-szoveg) + 2 * var(--margo)); } .ozs-fo { padding-block: clamp(32px, 5vw, 64px); min-height: 50vh; } .ozs-rejtett { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ozs-ugras { position: absolute; left: 16px; top: -60px; z-index: 100; padding: .6em 1em; background: var(--tinta); color: var(--krem); border-radius: 8px; } .ozs-ugras:focus { top: 12px; } /* 4. Elemek */ .ozs-ikon { width: 24px; height: 24px; flex: none; } .ozs-gomb, .button, button.button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .forminator-button-submit { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .75em 1.6em; border: 1.5px solid var(--rozsa); border-radius: 999px; background: var(--rozsa); color: var(--tinta); text-decoration: none; cursor: pointer; font: 600 1rem/1.2 var(--betu-szoveg); letter-spacing: .01em; transition: background-color .15s, border-color .15s, transform .15s; } .ozs-gomb:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .forminator-button-submit:hover { background: #dc9ec5; border-color: #dc9ec5; color: var(--tinta); } .ozs-gomb:active { transform: translateY(1px); } .ozs-gomb--korvonal { background: transparent; border-color: var(--tinta); } .ozs-gomb--korvonal:hover { background: var(--tinta); border-color: var(--tinta); color: var(--krem); } .ozs-gombsor { display: flex; flex-wrap: wrap; gap: 12px; } .ozs-felirat { margin: 0 0 .5em; font: 700 .8125rem/1.3 var(--betu-szoveg); letter-spacing: .16em; text-transform: uppercase; color: var(--rozsa-mely); } .ozs-cimke { display: inline-block; padding: .15em .6em; border-radius: 999px; background: var(--rozsa-halvany); color: var(--rozsa-mely); font: 700 .6875rem/1.4 var(--betu-szoveg); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; } .ozs-megjegyzes { padding: .8em 1.1em; border-left: 3px solid var(--fa); background: var(--papir); border-radius: 0 var(--kerekites-kicsi) var(--kerekites-kicsi) 0; font-size: .9375rem; color: var(--tinta-halvany); } .ozs-ikon-gomb { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tinta); cursor: pointer; text-decoration: none; transition: background-color .15s; } .ozs-ikon-gomb:hover { background: var(--rozsa-halvany); color: var(--tinta); } /* „hímzőkeret”: kerek kép fa színű kerettel és öltésvonallal */ .ozs-hurok { position: relative; aspect-ratio: 1; border-radius: 50%; padding: 14px; background: var(--fa); box-shadow: inset 0 0 0 4px #b48c56, var(--arnyek); } .ozs-hurok img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .ozs-hurok__ablak { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; } .ozs-hurok::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; border: 2px dashed rgb(255 255 255 / .75); pointer-events: none; } /* 5. Fejléc */ .ozs-fejlec { position: sticky; top: 0; z-index: 50; background: rgb(253 252 240 / .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; } .ozs-fejlec.ozs-gorgetve { border-color: var(--vonal); box-shadow: 0 6px 24px rgb(43 34 38 / .05); } body.admin-bar .ozs-fejlec { top: var(--wp-admin--admin-bar--height, 32px); } .ozs-fejlec__sor { display: flex; align-items: center; gap: 24px; height: var(--fejlec-magassag); } .ozs-logo { display: block; flex: none; } .ozs-logo img { height: 54px; width: auto; } .ozs-fejlec__ikonok { display: flex; align-items: center; gap: 2px; margin-left: auto; } .ozs-kosar-szam { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rozsa-mely); color: #fff; font: 800 .6875rem/18px var(--betu-szoveg); text-align: center; } .ozs-kosar-szam[data-db="0"] { display: none; } .ozs-mobilmenu-gomb { display: none; } .ozs-fomenu { margin-left: auto; } .ozs-fomenu > ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .ozs-fomenu > ul > li { position: relative; display: flex; align-items: center; } .ozs-fomenu > ul > li > a { display: block; padding: .5em .8em; border-radius: 999px; color: var(--tinta); text-decoration: none; font: 500 1.0625rem/1.3 var(--betu-cim); transition: background-color .15s; } .ozs-fomenu > ul > li > a:hover { background: var(--rozsa-halvany); } .ozs-fomenu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--rozsa); border-radius: 0; } .ozs-lenyilo-gomb { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -6px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; } .ozs-lenyilo-gomb .ozs-ikon { width: 18px; height: 18px; transition: transform .2s; } .ozs-lenyilo-gomb[aria-expanded="true"] .ozs-ikon { transform: rotate(180deg); } .ozs-lenyilo { position: absolute; top: calc(100% + 10px); left: -16px; width: 680px; padding: 24px; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); box-shadow: var(--arnyek); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility 0s .15s; } .ozs-lenyilo::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; } /* ne zárjon be, amíg az egér átér */ .ozs-fomenu__bolt:hover .ozs-lenyilo, .ozs-fomenu__bolt.ozs-nyitva .ozs-lenyilo { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; } .ozs-lenyilo__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; margin: 0 0 12px; padding: 0; list-style: none; } .ozs-lenyilo__lista a { display: block; padding: .45em .6em; border-radius: 10px; color: var(--tinta); text-decoration: none; } .ozs-lenyilo__lista a:hover, .ozs-lenyilo__lista a[aria-current] { background: var(--rozsa-halvany); } .ozs-lenyilo__lista .ozs-szezonalis { grid-column: 1 / -1; } .ozs-lenyilo__lista .ozs-szezonalis a { background: var(--rozsa-halvany); font-weight: 700; } .ozs-lenyilo__mind { display: inline-flex; align-items: center; gap: .4em; padding: .3em .6em; font-weight: 700; text-decoration: none; } .ozs-lenyilo__mind .ozs-ikon { width: 18px; height: 18px; } .ozs-kereses { border-top: 1px solid var(--vonal); background: var(--krem); padding-block: 16px; } .ozs-kereses__urlap { display: flex; gap: 10px; } .ozs-kereses__urlap input[type="search"] { flex: 1; border-radius: 999px; padding-inline: 1.3em; } /* 6. Mobilmenü (a régi oldal egész képernyős, középre igazított menüjét vittük tovább) */ .ozs-mobilmenu { position: fixed; inset: 0; z-index: 60; overflow-y: auto; padding: 0 var(--margo) 40px; background: var(--krem); } .ozs-mobilmenu[hidden] { display: none; } .ozs-mobilmenu__fej { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; height: 64px; background: var(--krem); } .ozs-mobilmenu__cim { font: 700 .8125rem/1 var(--betu-szoveg); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-halvany); } .ozs-mobilmenu__fo { margin: 8px 0 28px; padding: 0; list-style: none; text-align: center; } .ozs-mobilmenu__fo a { display: block; padding: .45em 0; color: var(--tinta); text-decoration: none; font: 500 1.625rem/1.3 var(--betu-cim); } .ozs-mobilmenu .ozs-felirat { text-align: center; } .ozs-mobilmenu__kategoriak { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .ozs-mobilmenu__kategoriak a { display: block; padding: .5em 1em; border: 1px solid var(--vonal); border-radius: 999px; background: var(--papir); color: var(--tinta); text-decoration: none; } .ozs-mobilmenu__kategoriak .ozs-szezonalis a { border-color: var(--rozsa); background: var(--rozsa-halvany); font-weight: 700; } .ozs-mobilmenu__kategoriak .ozs-cimke { display: none; } @media (max-width: 900px) { :root { --fejlec-magassag: 64px; } .ozs-fomenu { display: none; } .ozs-mobilmenu-gomb { display: inline-grid; margin-left: -10px; } .ozs-fejlec__sor { gap: 8px; } .ozs-fejlec .ozs-logo { position: absolute; left: 50%; transform: translateX(-50%); } .ozs-fejlec .ozs-logo img { height: 42px; } .ozs-fiok-link { display: none; } /* mobilon a menüben van */ } /* 7. Lábléc */ .ozs-lablec { margin-top: clamp(24px, 3vw, 40px); background: var(--papir); border-top: 1px solid var(--vonal); } .ozs-hirlevel { background: linear-gradient(90deg, rgb(253 252 240 / .96) 0%, rgb(253 252 240 / .86) 55%, rgb(253 252 240 / .25) 100%), url("https://olyanzsuzsis.hu/wp-content/uploads/2022/05/nefelejcs-lablec-rotated.jpg") center / cover; } .ozs-hirlevel__belso { display: grid; grid-template-columns: 1fr minmax(280px, 420px); gap: 32px 56px; align-items: center; padding-block: clamp(36px, 5vw, 56px); } .ozs-hirlevel__szoveg h2 { margin-bottom: .3em; } .ozs-hirlevel__szoveg p:last-child { margin: 0; color: var(--tinta-halvany); } .grecaptcha-badge { visibility: hidden; } /* helyette a szöveges tájékoztató az űrlap alatt (a Google feltételei szerint) */ .ozs-recaptcha { margin: 10px 0 0; font-size: .75rem; color: var(--tinta-halvany); } .ozs-recaptcha a { color: inherit; } .ozs-hirlevel__urlap { padding: 20px 22px; background: rgb(255 254 250 / .92); border-radius: var(--kerekites); box-shadow: var(--arnyek); } .ozs-lablec__oszlopok { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 32px; padding-block: 48px 32px; } .ozs-lablec__marka p { color: var(--tinta-halvany); font-size: .9375rem; } .ozs-logo--kicsi img { height: 48px; margin-bottom: 14px; } .ozs-lablec__cim { margin: 0 0 .8em; font: 700 .8125rem/1.3 var(--betu-szoveg); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-halvany); } .ozs-lablec__menu ul { margin: 0; padding: 0; list-style: none; } .ozs-lablec__menu li { margin-bottom: .35em; } .ozs-lablec__menu a { color: var(--tinta); text-decoration: none; font-size: .9375rem; } .ozs-lablec__menu a:hover { color: var(--rozsa-mely); text-decoration: underline; } .ozs-cib { width: 210px; margin-top: 14px; background: #fff; padding: 6px; border-radius: 8px; } .ozs-kozosseg { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; } .ozs-kozosseg a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--vonal); color: var(--tinta); background: var(--krem); transition: background-color .15s, color .15s; } .ozs-kozosseg a:hover { background: var(--rozsa); border-color: var(--rozsa); } .ozs-kozosseg .ozs-ikon { width: 20px; height: 20px; } .ozs-lablec__also { border-top: 1px solid var(--vonal); font-size: .875rem; color: var(--tinta-halvany); } .ozs-lablec__also-sor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 18px; } .ozs-lablec__also p { margin: 0; } .ozs-lablec__also a { color: inherit; } @media (max-width: 900px) { .ozs-hirlevel__belso { grid-template-columns: 1fr; } .ozs-lablec__oszlopok { grid-template-columns: 1fr 1fr; } .ozs-lablec__marka { grid-column: 1 / -1; } } @media (max-width: 520px) { .ozs-lablec__oszlopok { grid-template-columns: 1fr; } } /* Forminator hírlevél-űrlap: a saját stílusait a miénkhez igazítjuk */ .ozs-hirlevel .forminator-ui.forminator-custom-form { margin: 0 !important; } .ozs-hirlevel .forminator-field-html { display: none !important; } /* az űrlap saját címe – nálunk már ott van mellette */ .ozs-hirlevel .forminator-row { margin-bottom: 12px !important; } .ozs-hirlevel .forminator-input { background: #fff !important; border: 1px solid var(--vonal) !important; border-radius: 999px !important; padding: .7em 1.2em !important; font-family: var(--betu-szoveg) !important; } .ozs-hirlevel .forminator-checkbox__label, .ozs-hirlevel .forminator-checkbox-label { font-family: var(--betu-szoveg) !important; font-size: .875rem !important; } .ozs-hirlevel .forminator-button-submit { width: 100%; font-family: var(--betu-szoveg) !important; border-radius: 999px !important; background: var(--rozsa) !important; color: var(--tinta) !important; } /* 8. Oldalak */ .ozs-oldalfej { margin-bottom: 28px; } .ozs-szoveg { font-size: 1.0625rem; overflow-wrap: break-word; } .ozs-szoveg a { overflow-wrap: anywhere; } .ozs-szoveg h2 { margin-top: 1.6em; } .ozs-szoveg h3, .ozs-szoveg h4 { margin-top: 1.4em; } .ozs-szoveg img { border-radius: var(--kerekites-kicsi); } .ozs-szoveg .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .ozs-szoveg .gallery br { display: none; } .ozs-szoveg .gallery-item { margin: 0; width: auto !important; } .ozs-szoveg .gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; border: 0 !important; } .ozs-404 { text-align: center; } .ozs-404 .ozs-kereses__urlap { max-width: 520px; margin: 28px auto; } /* 9. Kezdőlap (vázlat) */ .ozs-kezdolap { padding-top: 0; } .ozs-nyito { background: radial-gradient(ellipse at 85% 30%, var(--rozsa-halvany) 0%, transparent 60%), var(--krem); } .ozs-nyito__belso { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px 64px; align-items: center; padding-block: clamp(40px, 7vw, 96px); } .ozs-nyito h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem); } .ozs-nyito__bevezeto { font-size: 1.1875rem; color: var(--tinta-halvany); max-width: 34em; margin-bottom: 1.6em; } .ozs-nyito__kep { max-width: 520px; justify-self: center; width: 100%; margin: 0; } @media (max-width: 800px) { .ozs-nyito__belso { grid-template-columns: 1fr; text-align: center; } .ozs-nyito .ozs-gombsor { justify-content: center; } .ozs-nyito__kep { max-width: 280px; order: -1; } } .ozs-szakasz { padding-block: clamp(28px, 4.5vw, 56px); } .ozs-szakaszfej { text-align: center; margin-bottom: 32px; } .ozs-kartyak { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; } .ozs-kartya a { display: flex; flex-direction: column; height: 100%; padding: 12px 12px 16px; border-radius: var(--kerekites); background: var(--papir); box-shadow: var(--arnyek); color: var(--tinta); text-decoration: none; transition: transform .2s, box-shadow .2s; } .ozs-kartya a:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(43 34 38 / .06), 0 14px 36px rgb(43 34 38 / .1); } .ozs-kartya__kep { display: block; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--kerekites) - 8px); background: var(--rozsa-halvany); margin-bottom: 12px; } .ozs-kartya__kep img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .ozs-kartya a:hover .ozs-kartya__kep img { transform: scale(1.04); } .ozs-kartya__nev { font: 500 1.1875rem/1.25 var(--betu-cim); text-align: center; } .ozs-kartya__db { font-size: .8125rem; color: var(--tinta-halvany); text-align: center; } @media (max-width: 600px) { .ozs-kartyak { grid-template-columns: 1fr 1fr; gap: 12px; } .ozs-kartya a { padding: 8px 8px 12px; } .ozs-kartya__nev { font-size: 1rem; } } .ozs-kartya--szezon a { box-shadow: 0 0 0 2px var(--rozsa), var(--arnyek); } .ozs-sajat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 4vw, 48px); border-radius: var(--kerekites); background: var(--rozsa-halvany); } .ozs-sajat h2 { margin-bottom: .3em; } .ozs-sajat p:last-child { margin: 0; max-width: 36em; } /* 10. WooCommerce – átmeneti, alap igazítások (a bolt saját sablonjai a 3–6. lépésben) */ .woocommerce ul.products li.product .woocommerce-loop-product__title { font: 500 1.125rem/1.3 var(--betu-cim); } .woocommerce ul.products li.product .price { color: var(--rozsa-mely); font-weight: 700; } .woocommerce ul.products li.product a img { border-radius: var(--kerekites-kicsi); } .woocommerce span.onsale { background: var(--rozsa-mely); } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--rozsa-mely); } .ozs-bolt .woocommerce-products-header__title { margin-bottom: .4em; } /* 11. Oldalak (2. lépés) */ .ozs-fo--sajat { padding-top: 0; } .ozs-oldalfej-sav { padding-block: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px); background: radial-gradient(ellipse at 90% 0%, var(--rozsa-halvany) 0%, transparent 55%), var(--krem); } .ozs-oldalfej-sav h1 { margin-bottom: .3em; } .ozs-oldalfej-sav__bevezeto { max-width: 40em; margin: 0; font-size: 1.1875rem; color: var(--tinta-halvany); } .ozs-oldalfej-sav--kicsi h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); } .ozs-szakasz--elso { padding-top: 8px; } .ozs-alcim { margin: 1.6em 0 .7em; font: 700 .8125rem/1.3 var(--betu-szoveg); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-halvany); } .ozs-apro { font-size: .875rem; color: var(--tinta-halvany); } .ozs-kozep { margin-inline: auto; } .ozs-kozep-szoveg { text-align: center; margin-top: 20px; } /* űrlapkártya (Forminator) */ .ozs-urlapkartya { padding: clamp(20px, 3vw, 32px); background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); box-shadow: var(--arnyek); } .ozs-urlapkartya__cim { font-size: 1.5rem; margin-bottom: .6em; } .ozs-urlapkartya .forminator-ui.forminator-custom-form { margin: 0 !important; } .ozs-urlapkartya .forminator-input, .ozs-urlapkartya .forminator-textarea, .ozs-urlapkartya select, .ozs-urlapkartya .forminator-select2 + .select2 .select2-selection { background: #fff !important; border: 1px solid var(--vonal) !important; border-radius: var(--kerekites-kicsi) !important; padding: .7em 1em !important; font-family: var(--betu-szoveg) !important; font-size: 1rem !important; } .ozs-urlapkartya .forminator-label, .ozs-urlapkartya .forminator-checkbox__label, .ozs-urlapkartya .forminator-radio-label, .ozs-urlapkartya .forminator-description { font-family: var(--betu-szoveg) !important; color: var(--tinta) !important; } .ozs-urlapkartya .forminator-label { font-weight: 700 !important; font-size: .9375rem !important; } .ozs-urlapkartya .forminator-design--material .forminator-label { position: static !important; transform: none !important; display: block !important; margin: 0 0 6px !important; padding: 0 !important; line-height: 1.4 !important; } .ozs-urlapkartya .forminator-design--material .forminator-input, .ozs-urlapkartya .forminator-design--material .forminator-textarea { margin: 0 !important; } .ozs-urlapkartya .forminator-design--material .forminator-field:before, .ozs-urlapkartya .forminator-design--material .forminator-input--wrap:after { display: none !important; } .ozs-urlapkartya textarea.forminator-textarea { min-height: 160px !important; height: 180px !important; } .ozs-urlapkartya .forminator-button-submit { font-family: var(--betu-szoveg) !important; border-radius: 999px !important; background: var(--rozsa) !important; color: var(--tinta) !important; padding: .8em 2em !important; font-weight: 700 !important; } .ozs-urlapkartya .forminator-button-upload { border-radius: 999px !important; font-family: var(--betu-szoveg) !important; background: #fff !important; color: var(--tinta) !important; border: 1.5px solid var(--tinta) !important; box-shadow: none !important; } .ozs-urlapkartya .forminator-button-upload:hover { background: var(--tinta) !important; color: var(--krem) !important; } /* adatlapok (impresszum, kapcsolat) */ .ozs-adatlapok { display: grid; gap: 20px; } .ozs-adatlap { padding: 24px 28px; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); } .ozs-adatlap h2 { font-size: 1.375rem; margin-bottom: .8em; } .ozs-adatlap dl, dl.ozs-adatlap, .ozs-bankadat { display: grid; grid-template-columns: 200px 1fr; gap: .45em 24px; margin: 0; } .ozs-adatlap dt, .ozs-bankadat dt { color: var(--tinta-halvany); font-size: .9375rem; } .ozs-adatlap dd, .ozs-bankadat dd { margin: 0; font-weight: 600; } .ozs-adatlap--kicsi { padding: 18px 20px; font-size: .9375rem; grid-template-columns: 90px 1fr !important; } @media (max-width: 520px) { .ozs-adatlap dl, dl.ozs-adatlap, .ozs-bankadat { grid-template-columns: 1fr; gap: 0; } .ozs-adatlap dd, .ozs-bankadat dd { margin-bottom: .6em; } } /* jogi oldalak */ .ozs-jogi { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; } .ozs-jogi__tartalom { position: sticky; top: calc(var(--fejlec-magassag) + 24px); max-height: calc(100vh - var(--fejlec-magassag) - 48px); overflow-y: auto; padding-right: 8px; font-size: .9375rem; } .ozs-jogi__tartalom summary { margin-bottom: .6em; font: 700 .8125rem/1.3 var(--betu-szoveg); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-halvany); cursor: pointer; list-style: none; } .ozs-jogi__tartalom summary::-webkit-details-marker { display: none; } .ozs-jogi__tartalom ol { margin: 0; padding: 0; list-style: none; counter-reset: fejezet; border-left: 1px solid var(--vonal); } .ozs-jogi__tartalom li a { display: block; padding: .35em 0 .35em 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--tinta-halvany); text-decoration: none; line-height: 1.4; } .ozs-jogi__tartalom li a:hover { color: var(--tinta); } .ozs-jogi__tartalom li a.ozs-aktiv { color: var(--tinta); border-left-color: var(--rozsa-mely); font-weight: 700; } .ozs-jogi__nyomtat { margin-top: 18px; font-size: .875rem; } .ozs-jogi__szoveg { max-width: var(--szelesseg-szoveg); font-size: 1rem; } .ozs-jogi__szoveg h2 { font-size: 1.625rem; padding-top: .4em; } .ozs-jogi__szoveg h2:first-child { margin-top: 0; } .ozs-jogi__szoveg h3 { font-size: 1.25rem; } .ozs-jogi__szoveg h4 { font: 700 1.0625rem/1.4 var(--betu-szoveg); margin-top: 1.4em; } .ozs-tabla { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--vonal); border-radius: var(--kerekites-kicsi); background: var(--papir); } .ozs-tabla table { width: 100%; border-collapse: collapse; font-size: .9375rem; } .ozs-tabla th, .ozs-tabla td { padding: .6em .9em; border-bottom: 1px solid var(--vonal); text-align: left; vertical-align: top; } .ozs-tabla tr:last-child > * { border-bottom: 0; } @media (max-width: 900px) { .ozs-jogi { grid-template-columns: minmax(0, 1fr); gap: 24px; } .ozs-jogi__tartalom { position: static; max-height: none; padding: 16px 20px; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); } .ozs-jogi__tartalom summary { margin: 0; list-style: revert; } .ozs-jogi__tartalom details[open] summary { margin-bottom: .6em; } } @media print { .ozs-fejlec, .ozs-lablec, .ozs-jogi__tartalom, .ozs-mobilmenu { display: none !important; } .ozs-jogi { display: block; } body { background: #fff; font-size: 11pt; } } /* szállítás és fizetés */ .ozs-modok { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .ozs-mod { padding: 22px 24px; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); } .ozs-mod__fej { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: .5em; } .ozs-mod h4, .ozs-mod__cim { margin: 0; font-size: 1.25rem; } .ozs-ar { flex: none; padding: .2em .8em; border-radius: 999px; background: var(--rozsa-halvany); color: var(--rozsa-mely); font-weight: 800; white-space: nowrap; } .ozs-mod p { font-size: .9688rem; margin-bottom: .7em; } .ozs-mod__utanvet { margin: 0 !important; font-size: .875rem !important; color: var(--tinta-halvany); } .ozs-modok--fizetes .ozs-mod { display: flex; flex-direction: column; } .ozs-bankadat { margin-top: 12px; padding: 14px 16px; border-radius: var(--kerekites-kicsi); background: var(--krem); font-size: .9375rem; } .ozs-modok .ozs-bankadat { grid-template-columns: 1fr; gap: 0; } .ozs-modok .ozs-bankadat dd { margin-bottom: .55em; } .ozs-masolhato { font-variant-numeric: tabular-nums; } .ozs-masol { margin-left: 8px; padding: .1em .6em; border: 1px solid var(--vonal); border-radius: 999px; background: #fff; font-size: .75rem; font-weight: 700; cursor: pointer; } .ozs-masol:hover { border-color: var(--rozsa-mely); } /* rólam */ .ozs-rolam { background: radial-gradient(ellipse at 10% 10%, var(--rozsa-halvany) 0%, transparent 55%), var(--krem); } .ozs-rolam__belso { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px 64px; align-items: center; padding-block: clamp(40px, 6vw, 88px); } .ozs-rolam__kep { margin: 0; } .ozs-rolam__kep img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 40%; border-radius: 200px 200px var(--kerekites) var(--kerekites); box-shadow: var(--arnyek); } .ozs-rolam__bevezeto { font-size: 1.25rem; color: var(--tinta); } .ozs-idezet { max-width: 720px; margin: 0 auto; text-align: center; } .ozs-idezet blockquote { margin: 0 0 .3em; font: italic 500 clamp(2.4rem, 1.6rem + 3vw, 3.6rem)/1.1 var(--betu-cim); color: var(--rozsa-mely); } .ozs-idezet p:last-child { font-size: 1.125rem; color: var(--tinta-halvany); } @media (max-width: 800px) { .ozs-rolam__belso { grid-template-columns: 1fr; } .ozs-rolam__kep { max-width: 360px; margin-inline: auto; } } /* kapcsolat */ .ozs-kapcsolat { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 48px; align-items: start; } .ozs-kapcsolat__adatok { display: grid; gap: 22px; } .ozs-kapcsolat__bemutatkozas { display: flex; align-items: center; gap: 16px; } .ozs-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: 72% 40%; box-shadow: 0 0 0 4px var(--papir), 0 0 0 6px var(--rozsa); } .ozs-kapcsolat__nev { margin: 0; font: 500 1.375rem/1.2 var(--betu-cim); } .ozs-kapcsolat__bemutatkozas .ozs-apro { margin: .2em 0 0; } .ozs-elerhetoseg { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .ozs-elerhetoseg li { display: flex; align-items: center; gap: 12px; } .ozs-elerhetoseg .ozs-ikon { color: var(--rozsa-mely); } .ozs-elerhetoseg a { color: var(--tinta); font-weight: 700; font-size: 1.125rem; text-decoration: none; } .ozs-elerhetoseg a:hover { color: var(--rozsa-mely); text-decoration: underline; } @media (max-width: 800px) { .ozs-kapcsolat { grid-template-columns: 1fr; } } /* tervezz sajátot – lépések */ .ozs-lepesek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 40px; padding: 0; list-style: none; counter-reset: lepes; } .ozs-lepesek li { position: relative; padding: 24px; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); } .ozs-lepesek__szam { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--rozsa); font: 600 1.25rem/1 var(--betu-cim); } .ozs-lepesek h2 { font-size: 1.3125rem; margin-bottom: .35em; } .ozs-lepesek p { margin: 0; color: var(--tinta-halvany); } @media (max-width: 800px) { .ozs-lepesek { grid-template-columns: 1fr; } } /* galéria + nagyító */ .ozs-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 0 0 40px; padding: 0; list-style: none; } .ozs-galeria a { display: block; overflow: hidden; border-radius: var(--kerekites-kicsi); box-shadow: var(--arnyek); } .ozs-galeria img { width: 100%; transition: transform .4s; } .ozs-galeria a:hover img { transform: scale(1.04); } @media (max-width: 600px) { .ozs-galeria { grid-template-columns: 1fr 1fr; gap: 10px; } } .ozs-nagyito { width: min(1100px, 100vw); max-width: none; max-height: none; height: 100dvh; margin: 0 auto; padding: 0; border: 0; background: transparent; } .ozs-nagyito::backdrop { background: rgb(28 22 25 / .9); } .ozs-nagyito__belso { display: grid; grid-template-rows: 1fr auto; height: 100%; padding: 56px 16px 20px; } .ozs-nagyito img { width: 100%; height: 100%; object-fit: contain; } .ozs-nagyito p { margin: 10px 0 0; text-align: center; color: #fff; font-size: .9375rem; } .ozs-nagyito button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .14); color: #fff; cursor: pointer; } .ozs-nagyito button:hover { background: rgb(255 255 255 / .28); } .ozs-nagyito .ozs-nagyito__bezar { top: 8px; right: 12px; } .ozs-nagyito .ozs-nagyito__elozo { left: 12px; top: 50%; transform: translateY(-50%) rotate(180deg); } .ozs-nagyito .ozs-nagyito__kovetkezo { right: 12px; top: 50%; transform: translateY(-50%); } /* 12. Bolt: kategória- és boltoldal, termékkártya (3. lépés) */ .ozs-boltfej { padding-bottom: clamp(20px, 3vw, 32px); } .ozs-boltfej__belso { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .ozs-boltfej__kep { flex: none; width: 168px; margin: 0; padding: 9px; } .ozs-boltfej__kep::after { inset: 17px; } .ozs-morzsa { margin-bottom: 10px; font-size: .875rem; color: var(--tinta-halvany); } .ozs-morzsa a { color: var(--tinta-halvany); } @media (max-width: 600px) { .ozs-boltfej__kep { width: 96px; padding: 6px; } .ozs-boltfej__kep::after { inset: 11px; border-width: 1.5px; } } .ozs-chipek { margin: 0 calc(-1 * var(--margo)) 20px; } .ozs-chipek ul { display: flex; gap: 8px; margin: 0; padding: 4px var(--margo) 10px; list-style: none; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; scroll-padding-inline: var(--margo); } .ozs-chipek li { flex: none; scroll-snap-align: start; } .ozs-chipek a { display: block; padding: .5em 1.05em; border: 1px solid var(--vonal); border-radius: 999px; background: var(--papir); color: var(--tinta); text-decoration: none; font-size: .9375rem; white-space: nowrap; transition: border-color .15s, background-color .15s; } .ozs-chipek a:hover { border-color: var(--rozsa); } .ozs-chipek a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: var(--krem); } .ozs-chipek .ozs-szezonalis a:not([aria-current]) { border-color: var(--rozsa); background: var(--rozsa-halvany); font-weight: 700; } @media (min-width: 1000px) { .ozs-chipek { margin-inline: 0; } .ozs-chipek ul { flex-wrap: wrap; padding-inline: 0; overflow: visible; } } .ozs-eszkoztar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .ozs-eszkoztar__db { margin: 0; color: var(--tinta-halvany); font-size: .9375rem; } .ozs-eszkoztar .woocommerce-ordering { margin: 0; } .ozs-eszkoztar select { width: auto; padding: .5em 2.4em .5em 1em; border-radius: 999px; font-size: .9375rem; appearance: none; cursor: pointer; background: var(--papir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%232b2226' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .9em center; } .ozs-termekek { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; margin: 0 0 40px; padding: 0; list-style: none; } @media (max-width: 900px) { .ozs-termekek { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .ozs-termekek { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } } .ozs-termek { margin: 0; } .ozs-termek__link { display: flex; flex-direction: column; gap: 4px; height: 100%; color: var(--tinta); text-decoration: none; } .ozs-termek__kep { position: relative; display: block; aspect-ratio: 1; overflow: hidden; margin-bottom: 8px; border-radius: var(--kerekites); background: var(--rozsa-halvany); box-shadow: var(--arnyek); } .ozs-termek__kep img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform .5s; } .ozs-termek__kep2 { position: absolute; inset: 0; opacity: 0; } @media (hover: hover) { .ozs-termek__link:hover .ozs-termek__kep--ket .ozs-termek__kep2 { opacity: 1; } .ozs-termek__link:hover .ozs-termek__kep img { transform: scale(1.03); } } .ozs-termek__jelek { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; } .ozs-jel { padding: .25em .7em; border-radius: 999px; background: var(--papir); color: var(--tinta); font: 800 .6875rem/1.4 var(--betu-szoveg); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 1px 3px rgb(43 34 38 / .12); } .ozs-jel--akcio { background: var(--rozsa-mely); color: #fff; } .ozs-jel--elfogyott { background: var(--tinta); color: var(--krem); } .ozs-termek__nev { font: 500 1.125rem/1.3 var(--betu-cim); } .ozs-termek__link:hover .ozs-termek__nev { text-decoration: underline; text-decoration-color: var(--rozsa); text-underline-offset: .2em; } .ozs-termek__ar { color: var(--rozsa-mely); font-weight: 800; } .ozs-termek__ar del { color: var(--tinta-halvany); font-weight: 400; margin-right: .3em; } .ozs-termek__ar ins { text-decoration: none; } .ozs-termek__megj { font-size: .8125rem; color: var(--tinta-halvany); } @media (max-width: 600px) { .ozs-termek__nev { font-size: 1rem; } .ozs-termek__kep { border-radius: var(--kerekites-kicsi); } } .woocommerce-pagination { margin: 0 0 24px; } .woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; border: 0 !important; } .woocommerce-pagination ul.page-numbers li { border: 0 !important; } .woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .8em; border: 1px solid var(--vonal) !important; border-radius: 999px; background: var(--papir); color: var(--tinta) !important; text-decoration: none; font-weight: 700; } .woocommerce-pagination .page-numbers span.current { background: var(--tinta) !important; border-color: var(--tinta) !important; color: var(--krem) !important; } .woocommerce-pagination .page-numbers a:hover { border-color: var(--rozsa) !important; background: var(--rozsa-halvany) !important; } .ozs-ures { padding: 48px 24px; text-align: center; background: var(--papir); border: 1px dashed var(--vonal); border-radius: var(--kerekites); } .ozs-gombsor--kozep { justify-content: center; } /* 13. Termékoldal (4. lépés) */ .ozs-termekfo { padding-top: clamp(20px, 3vw, 40px); } .ozs-termekoldal__felso { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px clamp(32px, 5vw, 72px); align-items: start; } @media (max-width: 900px) { .ozs-termekoldal__felso { grid-template-columns: minmax(0, 1fr); } } .ozs-termekoldal div.summary, .ozs-termekoldal div.images { float: none !important; width: auto !important; margin: 0 !important; } .ozs-termekek::before, .ozs-termekek::after { content: none !important; display: none !important; } /* a WooCommerce „clearfix”-e rácselem lenne */ .ozs-termekoldal__kepek { position: sticky; top: calc(var(--fejlec-magassag) + 20px); } @media (max-width: 900px) { .ozs-termekoldal__kepek { position: static; margin-inline: calc(-1 * var(--margo)); } } .ozs-tgaleria__sav { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--kerekites); box-shadow: var(--arnyek); background: var(--rozsa-halvany); } .ozs-tgaleria__sav::-webkit-scrollbar { display: none; } .ozs-tgaleria__kep { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1; } .ozs-tgaleria__kep a { display: block; height: 100%; cursor: zoom-in; } .ozs-tgaleria__kep img { width: 100%; height: 100%; object-fit: cover; } .ozs-tgaleria__belyegek { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; } .ozs-tgaleria__belyegek a { display: block; width: 76px; height: 76px; overflow: hidden; border-radius: var(--kerekites-kicsi); border: 2px solid transparent; opacity: .75; transition: opacity .15s, border-color .15s; } .ozs-tgaleria__belyegek a:hover, .ozs-tgaleria__belyegek a[aria-current] { opacity: 1; border-color: var(--rozsa-mely); } .ozs-tgaleria__belyegek img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .ozs-tgaleria__sav { border-radius: 0; box-shadow: none; } .ozs-tgaleria__belyegek { justify-content: center; gap: 8px; margin-top: 10px; } .ozs-tgaleria__belyegek a { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--vonal); opacity: 1; } .ozs-tgaleria__belyegek a[aria-current] { background: var(--rozsa-mely); } .ozs-tgaleria__belyegek img { display: none; } } .ozs-termekoldal__adatok .ozs-morzsa { margin-bottom: 12px; } .ozs-termekoldal__cim { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem); margin-bottom: .35em; } .ozs-tulajdonsagok { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .ozs-tulajdonsag { padding: .25em .8em; border-radius: 999px; background: var(--papir); border: 1px solid var(--vonal); font-size: .875rem; } .ozs-tulajdonsag span { display: inline-block; color: var(--tinta-halvany); } .ozs-termekoldal__adatok p.price, .ozs-termekoldal__adatok span.price { margin: 0 0 12px; color: var(--rozsa-mely) !important; font: 800 1.75rem/1.2 var(--betu-szoveg) !important; } .ozs-termekoldal__adatok .price del { color: var(--tinta-halvany); font-weight: 400; font-size: .7em; } .ozs-termekoldal__adatok .price ins { text-decoration: none; } .ozs-termekoldal__megjegyzes { margin-bottom: 18px; padding: 14px 18px; border-radius: var(--kerekites-kicsi); background: var(--rozsa-halvany); font-size: .9688rem; } .ozs-termekoldal__megjegyzes p:last-child { margin: 0; } /* kosár űrlap */ .ozs-termekoldal form.cart { margin: 0 0 22px !important; padding: 20px; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); } .ozs-termekoldal form.cart table.variations { width: 100%; margin: 0 0 14px !important; border: 0; border-collapse: collapse; } .ozs-termekoldal table.variations tr { display: grid; gap: 6px; margin-bottom: 12px; } .ozs-termekoldal table.variations th, .ozs-termekoldal table.variations td { display: block; padding: 0 !important; text-align: left; line-height: 1.3 !important; } .ozs-termekoldal table.variations th label { display: inline-block; font-weight: 700; font-size: .9375rem; text-transform: none; } .ozs-termekoldal table.variations th label::first-letter, .ozs-tulajdonsag span::first-letter { text-transform: uppercase; } .ozs-termekoldal table.variations select { width: 100%; min-width: 0; margin: 0 !important; padding: .75em 2.6em .75em 1em; appearance: none; border-radius: var(--kerekites-kicsi); cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%232b2226' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1em center; } .ozs-termekoldal .reset_variations { display: inline-block; margin-top: 6px; font-size: .875rem; color: var(--tinta-halvany); } .ozs-termekoldal .woocommerce-variation-price .price { font-size: 1.375rem !important; } .ozs-termekoldal .woocommerce-variation-availability p, .ozs-termekoldal p.stock { margin: 0 0 10px; font-size: .9375rem; color: var(--zsalya); font-weight: 700; } .ozs-termekoldal .woocommerce-variation-add-to-cart, .ozs-termekoldal form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; } .ozs-termekoldal form.cart .quantity { display: flex; align-items: stretch; margin: 0 !important; float: none !important; } .ozs-termekoldal form.cart .quantity input.qty { width: 56px; padding: .6em .2em; text-align: center; border-radius: 0; -moz-appearance: textfield; } .ozs-termekoldal form.cart .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; } .ozs-termekoldal form.cart .quantity button, .ozs-termekoldal form.cart .quantity input[type="button"] { width: 40px; padding: 0 !important; border: 1px solid var(--vonal) !important; background: #fff !important; color: var(--tinta) !important; border-radius: 0 !important; font-size: 1.125rem !important; } .ozs-termekoldal form.cart .quantity > :first-child { border-radius: 999px 0 0 999px !important; } .ozs-termekoldal form.cart .quantity > :last-child { border-radius: 0 999px 999px 0 !important; } .ozs-termekoldal .single_add_to_cart_button { flex: 1; min-height: 50px; float: none !important; font-size: 1.0625rem !important; font-weight: 800 !important; background: var(--tinta) !important; border-color: var(--tinta) !important; color: var(--krem) !important; } .ozs-termekoldal .single_add_to_cart_button:hover { background: var(--rozsa-mely) !important; border-color: var(--rozsa-mely) !important; } .ozs-termekoldal .single_add_to_cart_button.disabled { opacity: 1 !important; background: var(--vonal) !important; border-color: var(--vonal) !important; color: #4f4449 !important; cursor: not-allowed; } /* tájékoztató */ .ozs-tinfo { display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; font-size: .9375rem; } .ozs-tinfo li { display: flex; gap: 12px; align-items: flex-start; } .ozs-tinfo .ozs-ikon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--rozsa-mely); } .ozs-termekoldal__kategoriak { font-size: .875rem; color: var(--tinta-halvany); } /* leírás, vélemények, kapcsolódó */ .ozs-tleiras, .ozs-tvelemenyek, .ozs-termekoldal .up-sells, .ozs-termekoldal .related { margin-top: clamp(40px, 6vw, 72px); } .ozs-tleiras { max-width: var(--szelesseg-szoveg); } .ozs-tleiras ul { padding-left: 1.2em; } .ozs-tleiras li { margin-bottom: .3em; } .ozs-tleiras li::marker { color: var(--rozsa-mely); } .ozs-tvelemenyek { max-width: var(--szelesseg-szoveg); padding-top: 24px; border-top: 1px solid var(--vonal); } .ozs-tvelemenyek summary { cursor: pointer; list-style: none; } .ozs-tvelemenyek summary::-webkit-details-marker { display: none; } .ozs-tvelemenyek summary h2 { display: inline-flex; align-items: baseline; gap: .4em; margin: 0; font-size: 1.5rem; } .ozs-tvelemenyek summary h2::after { content: "+"; margin-left: .4em; color: var(--rozsa-mely); } .ozs-tvelemenyek details[open] summary h2::after { content: "–"; } .ozs-tvelemenyek #reviews { margin-top: 16px; } .ozs-tvelemenyek .woocommerce-Reviews-title { display: none; } .ozs-termekoldal .up-sells > h2, .ozs-termekoldal .related > h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 20px; } /* ragadós sáv (mobil) */ .ozs-ragados { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--margo) calc(10px + env(safe-area-inset-bottom)); background: rgb(255 254 250 / .97); border-top: 1px solid var(--vonal); box-shadow: 0 -6px 24px rgb(43 34 38 / .08); } .ozs-ragados[hidden] { display: none; } .ozs-ragados__adat { display: grid; min-width: 0; } .ozs-ragados__nev { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 1rem/1.3 var(--betu-cim); } .ozs-ragados__ar { color: var(--rozsa-mely); font-weight: 800; font-size: .9375rem; } .ozs-ragados .ozs-gomb { flex: none; background: var(--tinta); border-color: var(--tinta); color: var(--krem); } /* Bolt-panel két oszlopban (terméktípusok | alkalmak) */ .ozs-lenyilo__oszlopok { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; } .ozs-lenyilo__fej { margin: 0 0 10px; font: 700 .75rem/1.3 var(--betu-szoveg); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-halvany); } .ozs-lenyilo__csoportok { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0; padding: 0; list-style: none; } .ozs-lenyilo__csoportok ul { margin: 2px 0 0; padding: 0; list-style: none; } .ozs-lenyilo a { display: block; padding: .25em .5em; margin-left: -.5em; border-radius: 8px; color: var(--tinta); text-decoration: none; } .ozs-lenyilo a:hover, .ozs-lenyilo a[aria-current] { background: var(--rozsa-halvany); } .ozs-lenyilo a.ozs-lenyilo__csoport { font: 600 1.0625rem/1.3 var(--betu-cim); } .ozs-lenyilo__csoportok ul a { font-size: .9375rem; color: var(--tinta-halvany); } .ozs-lenyilo__alkalmak { padding-left: 24px; border-left: 1px solid var(--vonal); } .ozs-lenyilo__alkalmak ul { margin: 0 0 14px; padding: 0; list-style: none; } .ozs-lenyilo__alkalmak .ozs-szezonalis a { background: var(--rozsa-halvany); font-weight: 700; } .ozs-lenyilo__alkalmak .ozs-cimke { display: block; width: max-content; margin-top: 2px; } .ozs-lenyilo__mind { display: inline-flex !important; align-items: center; gap: .4em; font-weight: 700; color: var(--rozsa-mely) !important; } /* szűrősorok címkével és darabszámmal */ .ozs-chipek { display: flex; align-items: center; gap: 4px 12px; } .ozs-chipek__cim { flex: none; font: 700 .75rem/1.3 var(--betu-szoveg); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-halvany); padding-left: var(--margo); } .ozs-chipek ul { flex: 1; min-width: 0; } .ozs-chipek__db { display: inline-block; min-width: 1.6em; margin-left: .25em; padding: 0 .4em; border-radius: 999px; background: var(--rozsa-halvany); color: var(--rozsa-mely); font-size: .75rem; font-weight: 800; text-align: center; } .ozs-chipek a[aria-current] .ozs-chipek__db { background: rgb(255 255 255 / .2); color: var(--krem); } .ozs-chipek + .ozs-chipek { margin-top: -10px; } .ozs-chipek--kozep { justify-content: center; margin-top: 24px; } @media (min-width: 1000px) { .ozs-chipek__cim { padding-left: 0; min-width: 110px; } .ozs-chipek--kozep ul { flex: initial; } } @media (max-width: 999px) { .ozs-chipek { flex-direction: column; align-items: stretch; } .ozs-chipek__cim { padding-bottom: 2px; } } .ozs-boltfej__szuro { color: var(--rozsa-mely); font-style: italic; } /* 14. Kosár, pénztár, fiók (5–6. lépés) – a WooCommerce saját sablonjai, saját megjelenéssel */ .ozs-vasarlas, .ozs-fiok { padding-top: clamp(28px, 4vw, 48px); } .ozs-vasarlas__fej { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; } .ozs-vasarlas__fej h1 { margin: 0; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); } .ozs-vasarlas__fej .ozs-apro { flex-basis: 100%; margin: 0; } .ozs-lepesjelzo { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .875rem; } .ozs-lepesjelzo li { display: flex; align-items: center; gap: 8px; color: var(--tinta-halvany); } .ozs-lepesjelzo li + li::before { content: ""; width: 28px; height: 1px; background: var(--vonal); margin-right: 2px; } .ozs-lepesjelzo__szam { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--vonal); background: var(--papir); font-weight: 800; font-size: .8125rem; } .ozs-lepesjelzo__most { color: var(--tinta) !important; font-weight: 700; } .ozs-lepesjelzo__most .ozs-lepesjelzo__szam { background: var(--tinta); border-color: var(--tinta); color: var(--krem); } .ozs-lepesjelzo__kesz .ozs-lepesjelzo__szam { background: var(--rozsa); border-color: var(--rozsa); color: var(--tinta); } .ozs-lepesjelzo a { color: inherit; } @media (max-width: 600px) { .ozs-lepesjelzo li:not(.ozs-lepesjelzo__most) { font-size: 0; gap: 0; } .ozs-lepesjelzo li:not(.ozs-lepesjelzo__most) .ozs-lepesjelzo__szam { font-size: .8125rem; } .ozs-lepesjelzo li + li::before { width: 14px; } } /* üzenetek */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error, .woocommerce-message, .woocommerce-info, .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 20px !important; padding: 14px 18px !important; border: 1px solid var(--vonal) !important; border-left: 4px solid var(--zsalya) !important; border-radius: var(--kerekites-kicsi); background: var(--papir) !important; color: var(--tinta) !important; list-style: none; font-size: .9688rem; } .woocommerce-info { border-left-color: var(--fa) !important; } .woocommerce-error { border-left-color: #b3261e !important; flex-direction: column; align-items: flex-start; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; } .woocommerce-message::after, .woocommerce-info::after, .woocommerce-error::after { display: none !important; } .woocommerce-message .button, .woocommerce-info .button { order: 2; float: none !important; padding: .45em 1.1em !important; font-size: .875rem !important; } /* közös: táblák, mezők, select2 */ .ozs-vasarlas .shop_table, .ozs-fiok .shop_table { width: 100%; border: 0 !important; border-collapse: collapse; border-radius: 0 !important; margin: 0 0 16px !important; } .ozs-vasarlas .shop_table th, .ozs-vasarlas .shop_table td, .ozs-fiok .shop_table th, .ozs-fiok .shop_table td { padding: 14px 10px !important; border: 0 !important; border-bottom: 1px solid var(--vonal) !important; vertical-align: middle; text-align: left; } .ozs-vasarlas .shop_table thead th, .ozs-fiok .shop_table thead th { font: 700 .75rem/1.3 var(--betu-szoveg); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-halvany); } .ozs-vasarlas .form-row, .ozs-fiok .form-row { margin: 0 0 14px !important; padding: 0 !important; } .ozs-vasarlas .form-row label, .ozs-fiok .form-row label { display: block; margin-bottom: 5px; font-weight: 700; font-size: .9063rem; line-height: 1.4; } .ozs-vasarlas .form-row label.checkbox, .ozs-fiok .form-row label.checkbox, .ozs-vasarlas .woocommerce-form__label-for-checkbox { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; } .ozs-vasarlas input[type="checkbox"], .ozs-vasarlas input[type="radio"], .ozs-fiok input[type="checkbox"] { width: 18px; height: 18px; margin: 3px 0 0 !important; flex: none; accent-color: var(--rozsa-mely); } .ozs-vasarlas .required, .ozs-fiok .required { color: var(--rozsa-mely); text-decoration: none; } .ozs-vasarlas .optional { font-weight: 400; color: var(--tinta-halvany); } .select2-container .select2-selection--single { height: 48px !important; border: 1px solid var(--vonal) !important; border-radius: var(--kerekites-kicsi) !important; background: var(--papir) !important; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px !important; padding-left: 1em !important; color: var(--tinta) !important; } .select2-container .select2-selection--single .select2-selection__arrow { height: 46px !important; right: 8px !important; } .select2-dropdown { border-color: var(--vonal) !important; border-radius: var(--kerekites-kicsi) !important; overflow: hidden; } .select2-results__option--highlighted { background: var(--rozsa-halvany) !important; color: var(--tinta) !important; } /* kosár */ .woocommerce-cart .ozs-vasarlas > .woocommerce { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 32px 48px; align-items: start; } .woocommerce-cart .ozs-vasarlas > .woocommerce > .woocommerce-notices-wrapper, .woocommerce-cart .ozs-vasarlas > .woocommerce > .cart-empty, .woocommerce-cart .ozs-vasarlas > .woocommerce > .return-to-shop, .woocommerce-cart .ozs-vasarlas > .woocommerce > .wc-empty-cart-message { grid-column: 1 / -1; } .woocommerce-cart .cart-collaterals { position: sticky; top: calc(var(--fejlec-magassag) + 20px); width: auto !important; } .woocommerce-cart .cart-collaterals .cart_totals { float: none !important; width: auto !important; padding: 24px; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); box-shadow: var(--arnyek); } .woocommerce-cart .cart_totals h2 { font-size: 1.5rem; margin-bottom: .4em; } .woocommerce-cart .cart_totals th { width: 34%; font-weight: 700; } .woocommerce-cart table.cart .product-thumbnail img { width: 72px !important; height: 72px; object-fit: cover; border-radius: var(--kerekites-kicsi); } .woocommerce-cart table.cart .product-name a { color: var(--tinta); font: 500 1.125rem/1.3 var(--betu-cim); text-decoration: none; } .woocommerce-cart table.cart .product-name a:hover { color: var(--rozsa-mely); } .woocommerce-cart table.cart .product-name .variation { display: grid; grid-template-columns: max-content 1fr; gap: 0 6px; margin: 4px 0 0; font-size: .875rem; color: var(--tinta-halvany); } .woocommerce-cart table.cart .product-name .variation dt, .woocommerce-cart table.cart .product-name .variation dd { float: none !important; margin: 0 !important; padding: 0 !important; } .woocommerce-cart table.cart .product-name .variation dd p { margin: 0; } .woocommerce-cart table.cart a.remove { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--tinta-halvany) !important; font-size: 1.25rem; font-weight: 400; } .woocommerce-cart table.cart a.remove:hover { background: #fbe9e7 !important; color: #b3261e !important; } .woocommerce-cart table.cart td.actions { padding-top: 18px !important; border-bottom: 0 !important; } .woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 8px; float: left; } .woocommerce-cart table.cart td.actions .coupon input.input-text { width: 180px !important; padding: .6em 1em !important; border-radius: 999px !important; } .woocommerce-cart table.cart td.actions > .button { float: right; background: transparent !important; border-color: var(--vonal) !important; color: var(--tinta-halvany) !important; } .woocommerce-cart .quantity input.qty, .ozs-vasarlas .quantity input.qty { width: 52px; padding: .45em .2em; text-align: center; } .woocommerce-cart .quantity { display: inline-flex; align-items: stretch; } .woocommerce-cart .quantity button, .woocommerce-cart .quantity input[type="button"] { width: 34px; padding: 0 !important; border: 1px solid var(--vonal) !important; background: #fff !important; color: var(--tinta) !important; border-radius: 0 !important; } .woocommerce-cart .quantity > :first-child { border-radius: 999px 0 0 999px !important; } .woocommerce-cart .quantity > :last-child { border-radius: 0 999px 999px 0 !important; } .wc-proceed-to-checkout { display: grid; gap: 10px; padding: 8px 0 0 !important; } .wc-proceed-to-checkout a.checkout-button, #place_order { display: flex !important; width: 100%; min-height: 54px; margin: 0 !important; background: var(--tinta) !important; border-color: var(--tinta) !important; color: var(--krem) !important; font-size: 1.125rem !important; font-weight: 800 !important; } .wc-proceed-to-checkout a.checkout-button:hover, #place_order:hover { background: var(--rozsa-mely) !important; border-color: var(--rozsa-mely) !important; } .wc-proceed-to-checkout .returntoshop { background: transparent !important; border-color: var(--vonal) !important; } .ozs-vasarlas .cart-empty { text-align: center; font-size: 1.125rem; border-left-color: var(--rozsa) !important; justify-content: center; } .ozs-vasarlas .return-to-shop { text-align: center; } @media (max-width: 900px) { .woocommerce-cart .ozs-vasarlas > .woocommerce { grid-template-columns: minmax(0, 1fr); } .woocommerce-cart .cart-collaterals { position: static; } } @media (max-width: 768px) { .woocommerce-cart table.cart tr.cart_item { display: grid; grid-template-columns: 72px 1fr auto; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--vonal); } .woocommerce-cart table.cart tr.cart_item td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; } .woocommerce-cart table.cart tr.cart_item td::before { display: none; } .woocommerce-cart table.cart td.product-thumbnail { grid-row: 1 / span 3; display: block !important; } .woocommerce-cart table.cart td.product-remove { grid-column: 3; grid-row: 1; } .woocommerce-cart table.cart td.product-name { grid-column: 2; grid-row: 1; } .woocommerce-cart table.cart td.product-price { display: none !important; } .woocommerce-cart table.cart td.product-quantity { grid-column: 2; grid-row: 2; } .woocommerce-cart table.cart td.product-subtotal { grid-column: 3; grid-row: 2; align-self: center; font-weight: 800; } .woocommerce-cart table.cart td.actions .coupon { float: none; width: 100%; margin-bottom: 10px; } .woocommerce-cart table.cart td.actions .coupon input.input-text { flex: 1; width: auto !important; } .woocommerce-cart table.cart td.actions > .button { float: none; width: 100%; } } /* szállítási módok listája (kosár és pénztár) */ #shipping_method { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 6px; } #shipping_method li { display: flex !important; align-items: flex-start; flex-wrap: wrap; gap: 4px 8px; margin: 0 !important; padding: 10px 12px !important; border: 1px solid var(--vonal); border-radius: var(--kerekites-kicsi); background: #fff; text-indent: 0 !important; line-height: 1.4; } #shipping_method li:has(input:checked) { border-color: var(--rozsa-mely); background: var(--rozsa-halvany); } #shipping_method li input { margin: 2px 0 0 !important; accent-color: var(--rozsa-mely); } #shipping_method li label { flex: 1; display: inline !important; font-weight: 600; cursor: pointer; } .woocommerce-shipping-totals td, .woocommerce-shipping-totals th { vertical-align: top !important; } .woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: .875rem; color: var(--tinta-halvany); } /* pénztár */ .woocommerce-checkout .ozs-vasarlas form.checkout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); grid-template-areas: "adatok fej" "adatok rendeles"; gap: 0 48px; align-items: start; } .woocommerce-checkout #customer_details { grid-area: adatok; display: grid; gap: 20px; width: auto !important; } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { float: none !important; width: auto !important; display: grid; gap: 20px; } .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout .woocommerce-account-fields { padding: 24px; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); } .woocommerce-checkout .woocommerce-additional-fields:not(:has(.form-row)), .woocommerce-checkout .woocommerce-account-fields:not(:has(.form-row)) { display: none; } .woocommerce-checkout #customer_details h3, .woocommerce-checkout #order_review_heading { margin: 0 0 16px; font-size: 1.375rem; } .woocommerce-checkout #ship-to-different-address { margin: 0; font-size: 1.125rem; } .woocommerce-checkout #ship-to-different-address label { display: flex; align-items: center; gap: 10px; cursor: pointer; } .woocommerce-checkout .shipping_address { margin-top: 16px; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .shipping_address, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > *, .woocommerce-checkout .shipping_address > *, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper > * { grid-column: 1 / -1; float: none !important; width: auto !important; } .woocommerce-checkout .form-row-first { grid-column: 1 !important; } .woocommerce-checkout .form-row-last { grid-column: 2 !important; } .woocommerce-checkout .shipping_address[style*="display: none"], .woocommerce-checkout .shipping_address[style*="display:none"] { display: none !important; } .woocommerce-checkout #order_review_heading { grid-area: fej; margin-top: 4px !important; } .woocommerce-checkout #order_review { grid-area: rendeles; position: sticky; top: calc(var(--fejlec-magassag) + 20px); width: auto !important; float: none !important; padding: 24px; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); box-shadow: var(--arnyek); } .woocommerce-checkout-review-order-table .product-name { font-weight: 600; } .woocommerce-checkout-review-order-table .product-name .variation { margin: 4px 0 0; font-size: .8125rem; font-weight: 400; color: var(--tinta-halvany); } .woocommerce-checkout-review-order-table .product-name .variation dt, .woocommerce-checkout-review-order-table .product-name .variation dd { display: inline; float: none; margin: 0; } .woocommerce-checkout-review-order-table .product-name .variation dd p { display: inline; margin: 0; } .woocommerce-checkout-review-order-table .product-total, .woocommerce-checkout-review-order-table tfoot td { text-align: right !important; } .woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals td { text-align: left !important; } .woocommerce-checkout-review-order-table tr.order-total th, .woocommerce-checkout-review-order-table tr.order-total td, .cart_totals tr.order-total th, .cart_totals tr.order-total td { font-size: 1.25rem; border-bottom: 0 !important; } .woocommerce-checkout-review-order-table tr.order-total .amount, .cart_totals tr.order-total .amount { color: var(--rozsa-mely); font-weight: 800; } .woocommerce-checkout #payment { background: transparent !important; border-radius: 0 !important; } .woocommerce-checkout #payment ul.payment_methods { display: grid; gap: 8px; margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; } .woocommerce-checkout #payment ul.payment_methods li { margin: 0 !important; padding: 12px 14px !important; border: 1px solid var(--vonal); border-radius: var(--kerekites-kicsi); background: #fff; line-height: 1.4 !important; } .woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border-color: var(--rozsa-mely); background: var(--rozsa-halvany); } .woocommerce-checkout #payment ul.payment_methods li > label { font-weight: 700; cursor: pointer; } .woocommerce-checkout #payment ul.payment_methods li img { display: inline-block; max-height: 22px; width: auto; margin-left: 6px; vertical-align: middle; } .woocommerce-checkout #payment div.payment_box { margin: 10px 0 0 !important; padding: 10px 12px !important; background: var(--papir) !important; color: var(--tinta-halvany) !important; font-size: .875rem; border-radius: 8px; } .woocommerce-checkout #payment div.payment_box::before { display: none !important; } .woocommerce-checkout #payment div.payment_box p:last-child { margin: 0; } .woocommerce-checkout #payment .place-order { padding: 0 !important; margin: 0 !important; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper, .woocommerce-checkout #surbma_hc_legal_checkout { font-size: .875rem; } .woocommerce-checkout .woocommerce-privacy-policy-text p { font-size: .8125rem; color: var(--tinta-halvany); } @media (max-width: 900px) { .woocommerce-checkout .ozs-vasarlas form.checkout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "adatok" "fej" "rendeles"; } .woocommerce-checkout #order_review_heading { margin-top: 28px !important; } .woocommerce-checkout #order_review { position: static; padding: 18px; } } @media (max-width: 520px) { .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .shipping_address { grid-template-columns: 1fr; } .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { grid-column: 1 !important; } .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .woocommerce-additional-fields { padding: 18px; } } /* köszönőoldal */ .woocommerce-order { display: grid; gap: 20px; } .woocommerce-order .woocommerce-thankyou-order-received { margin: 0; padding: 20px 24px; border-radius: var(--kerekites); background: var(--rozsa-halvany); font: 500 1.25rem/1.4 var(--betu-cim); } .woocommerce-order ul.order_details { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0 !important; padding: 0 !important; list-style: none; } .woocommerce-order ul.order_details li { float: none !important; margin: 0 !important; padding: 14px 16px !important; border: 1px solid var(--vonal) !important; border-radius: var(--kerekites-kicsi); background: var(--papir); font-size: .75rem !important; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-halvany); } .woocommerce-order ul.order_details li strong { display: block; margin-top: 4px; font-size: 1rem !important; letter-spacing: 0; text-transform: none; color: var(--tinta); } .woocommerce-order section { padding: 22px 24px; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); } .woocommerce-order section h2 { font-size: 1.375rem; } .woocommerce-order .woocommerce-customer-details address { padding: 0 !important; border: 0 !important; font-style: normal; line-height: 1.7; } .woocommerce-order .wc-bacs-bank-details-heading { font-size: 1.25rem; } .woocommerce-order ul.wc-bacs-bank-details { padding: 0; list-style: none; } /* fiók */ .woocommerce-account .ozs-fiok > .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px 48px; align-items: start; } .woocommerce-account .ozs-fiok > .woocommerce:has(#customer_login), .woocommerce-account .ozs-fiok > .woocommerce:has(.lost_reset_password) { display: block; } .woocommerce-MyAccount-navigation { float: none !important; width: auto !important; position: sticky; top: calc(var(--fejlec-magassag) + 20px); } .woocommerce-MyAccount-navigation ul { display: grid; gap: 2px; margin: 0; padding: 8px; list-style: none; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); } .woocommerce-MyAccount-navigation a { display: block; padding: .6em .9em; border-radius: 10px; color: var(--tinta); text-decoration: none; } .woocommerce-MyAccount-navigation a:hover { background: var(--rozsa-halvany); } .woocommerce-MyAccount-navigation .is-active a { background: var(--tinta); color: var(--krem); font-weight: 700; } .woocommerce-MyAccount-content { float: none !important; width: auto !important; } .woocommerce-MyAccount-content > p:first-child { padding: 18px 22px; background: var(--rozsa-halvany); border-radius: var(--kerekites); } .woocommerce-MyAccount-content .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .woocommerce-MyAccount-content .woocommerce-Address { float: none !important; width: auto !important; padding: 20px; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); } .woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .woocommerce-MyAccount-content .woocommerce-Address-title h2 { font-size: 1.25rem; margin: 0 0 .6em; } .woocommerce-MyAccount-content address { font-style: normal; } .woocommerce-MyAccount-content form .form-row-first, .woocommerce-MyAccount-content form .form-row-last { width: 48% !important; } .woocommerce-MyAccount-content fieldset { margin: 20px 0; padding: 18px 20px; border: 1px solid var(--vonal); border-radius: var(--kerekites); } .woocommerce-MyAccount-content table.my_account_orders .button { padding: .4em 1em !important; font-size: .875rem !important; margin: 2px; } #customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } #customer_login .u-column1, #customer_login .u-column2 { float: none !important; width: auto !important; padding: 28px; background: var(--papir); border: 1px solid var(--vonal); border-radius: var(--kerekites); } #customer_login h2 { font-size: 1.5rem; } .woocommerce-account form.login, .woocommerce-account form.register, .woocommerce-account form.lost_reset_password { margin: 0 !important; padding: 0 !important; border: 0 !important; } .woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: 8px; margin-right: 16px; font-weight: 400 !important; } .woocommerce-account .lost_reset_password { max-width: 520px; padding: 28px !important; background: var(--papir); border: 1px solid var(--vonal) !important; border-radius: var(--kerekites); } @media (max-width: 800px) { .woocommerce-account .ozs-fiok > .woocommerce { grid-template-columns: minmax(0, 1fr); } .woocommerce-MyAccount-navigation { position: static; } .woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; } .woocommerce-MyAccount-navigation li { flex: none; } #customer_login, .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr; } .woocommerce-MyAccount-content form .form-row-first, .woocommerce-MyAccount-content form .form-row-last { width: 100% !important; float: none !important; } } /* sütisáv (CookieLawInfo) a témához igazítva */ #cookie-law-info-bar { padding: 16px var(--margo) !important; background: var(--papir) !important; color: var(--tinta) !important; border-top: 1px solid var(--vonal); box-shadow: 0 -8px 28px rgb(43 34 38 / .08) !important; font-family: var(--betu-szoveg) !important; font-size: .9375rem !important; } #cookie-law-info-bar .cli-bar-container { max-width: var(--szelesseg); margin: 0 auto; gap: 12px 24px; } #cookie-law-info-bar .cli-plugin-button, #cookie-law-info-bar .cli_settings_button { border-radius: 999px !important; padding: .55em 1.2em !important; font-weight: 700 !important; } #cookie-law-info-bar #cookie_action_close_header { background: var(--tinta) !important; color: var(--krem) !important; } /* mennyiségválasztó (a HuCommerce „− / +” gombjai a .quantity-wrap-ben, a mezőn kívül) */ .quantity-wrap { display: inline-flex !important; align-items: stretch; height: 46px; border: 1px solid var(--vonal); border-radius: 999px; background: #fff; overflow: hidden; vertical-align: middle; } .quantity-wrap .quantity { display: block !important; margin: 0 !important; float: none !important; } .quantity-wrap input.qty { width: 46px !important; height: 100%; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; text-align: center; font-weight: 700; -moz-appearance: textfield; box-shadow: none !important; } .quantity-wrap input.qty::-webkit-inner-spin-button, .quantity-wrap input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .quantity-wrap .qty-button { width: 40px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--tinta) !important; font-size: 1.25rem !important; line-height: 1 !important; cursor: pointer; box-shadow: none !important; } .quantity-wrap .qty-button:hover { background: var(--rozsa-halvany) !important; } .ozs-termekoldal .woocommerce-variation-add-to-cart .quantity-wrap, .ozs-termekoldal form.cart .quantity-wrap { height: auto; min-height: 50px; } /* pénztár mezői: a WooCommerce saját mezőstílusa helyett a miénk */ .ozs-vasarlas .form-row .input-text, .ozs-vasarlas .form-row select, .ozs-vasarlas .form-row textarea, .ozs-fiok .form-row .input-text, .ozs-fiok .form-row select { padding: .75em 1em !important; border: 1px solid var(--vonal) !important; border-radius: var(--kerekites-kicsi) !important; background: #fff !important; line-height: 1.4 !important; font-size: 1rem !important; } .ozs-vasarlas .form-row .input-text:focus, .ozs-fiok .form-row .input-text:focus { border-color: var(--rozsa-mely) !important; box-shadow: 0 0 0 3px var(--rozsa-halvany) !important; } .ozs-vasarlas .form-row.woocommerce-invalid .input-text { border-color: #b3261e !important; } /* a vezeték- és keresztnév egy sorba kerüljön (a mezőszerkesztő sorrendje fordított, a „dense” kitölti a hézagot) */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .shipping_address { grid-auto-flow: row dense; } .woocommerce-order ul.wc-bacs-bank-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .woocommerce-order ul.wc-bacs-bank-details li { overflow-wrap: anywhere; } .woocommerce-order .wc-bacs-bank-details-account-name { margin: 0 0 10px; font-size: 1.0625rem; } #billing_last_name_field, #shipping_last_name_field { order: -1; } /* magyar sorrend: vezetéknév, keresztnév */ .col2-set::before, .col2-set::after, .woocommerce-Addresses::before, .woocommerce-Addresses::after, .ozs-vasarlas > .woocommerce::before, .ozs-vasarlas > .woocommerce::after, .ozs-fiok > .woocommerce::before, .ozs-fiok > .woocommerce::after, form.checkout::before, form.checkout::after { content: none !important; display: none !important; } /* a WooCommerce „clearfix”-e rácselem lenne */ ul.order_details::before, ul.order_details::after { content: none !important; display: none !important; } .ozs-urlapkartya .forminator-file-upload span, .ozs-urlapkartya .forminator-file-upload > span { color: var(--tinta-halvany) !important; font-size: .8125rem !important; } /* Kezdőlap: nyitókép-vetítés a hímzőkeretben */ .ozs-vetites::after { inset: 19px; z-index: 2; } /* az öltésvonal a keret mellett fusson, ne a mintán */ .ozs-dia { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; } .ozs-dia.ozs-aktiv { opacity: 1; animation: ozs-lassu-nagyitas 8s ease-out both; } .ozs-dia img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .ozs-dia--kivagas img { position: absolute; max-width: none; height: auto; object-fit: initial; } /* méret és hely: inline stílus (front-page.php) */ @keyframes ozs-lassu-nagyitas { from { transform: scale(1); } to { transform: scale(1.06); } } .ozs-vetites { margin-bottom: 40px !important; } .ozs-vetites__pottyok { position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%); display: flex; } .ozs-vetites__pottyok button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; } /* nagy érintési felület, kis pötty */ .ozs-vetites__pottyok button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--vonal); transition: background-color .2s, transform .2s; } .ozs-vetites__pottyok button[aria-current]::before { background: var(--rozsa-mely); transform: scale(1.2); } .ozs-vetites__pottyok button:focus-visible { outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .ozs-dia { transition: none; } .ozs-dia.ozs-aktiv { animation: none; } } /* Kezdőlap: évszakos girland (Zsuzsi hímzéseiből kivágott motívumok egy zsinóron) */ .ozs-nyito { position: relative; } .ozs-girland { position: absolute; left: 0; right: 0; top: 0; height: var(--girland-m, 140px); pointer-events: none; z-index: 1; } .ozs-nyito--girland .ozs-nyito__belso { padding-top: calc(var(--girland-m, 140px) + 16px); } .ozs-girland__zsinor { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ozs-girland__zsinor path { fill: none; stroke: #a9865a; stroke-width: 2.2; stroke-dasharray: 7 4; stroke-linecap: round; vector-effect: non-scaling-stroke; } .ozs-girland__disz { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; } .ozs-girland__disz::before { content: ""; position: absolute; left: -.5px; top: 0; width: 1px; height: 18px; background: #a9865a; } /* cérna */ .ozs-girland__disz img { position: absolute; left: 0; top: 14px; width: auto; height: var(--disz-m, 78px); max-width: none; transform: translateX(-50%); transform-origin: 50% -14px; filter: drop-shadow(0 3px 4px rgb(43 34 38 / .18)); animation: ozs-leng calc(5s + var(--k) * .7s) ease-in-out calc(var(--k) * -1.3s) infinite alternate; } .ozs-girland__disz:nth-child(even) img { animation-direction: alternate-reverse; } @keyframes ozs-leng { from { transform: translateX(-50%) rotate(-4deg); } to { transform: translateX(-50%) rotate(4deg); } } @media (max-width: 800px) { .ozs-girland { --girland-m: 80px; --disz-m: 38px; } .ozs-nyito--girland .ozs-nyito__belso { padding-top: calc(80px + 12px); } .ozs-girland__disz::before { height: 12px; } .ozs-girland__disz img { top: 10px; transform-origin: 50% -10px; } } @media (prefers-reduced-motion: reduce) { .ozs-girland__disz img { animation: none; } } /* Safari/iOS (WebKit): az aspect-ratio + padding kombinációt másképp számolja (ovális keret, elcsúszott kép). A vetítés kerete ezért a régi, mindenhol egyformán működő módszerrel négyzet: az ablak magassága = a szélessége (padding-bottom: 100%). */ .ozs-vetites { aspect-ratio: auto; height: auto; } .ozs-vetites .ozs-hurok__ablak { height: 0; padding-bottom: 100%; } /* ugyanez a kategória-/alkalomoldal kerek fejlécképénél: rögzített, egyforma szélesség és magasság */ .ozs-boltfej__kep { aspect-ratio: auto; height: 168px; } @media (max-width: 600px) { .ozs-boltfej__kep { height: 96px; } }