/* ========================================================================== Sütierdő webshop – widget és WooCommerce stílusok A színek az Elementor globális színeire hivatkoznak, így a Kit-ben állíthatók. ========================================================================== */ :root { --sut-pink: var(--e-global-color-primary, #E5195E); --sut-dark: var(--e-global-color-secondary, #231419); --sut-muted: var(--e-global-color-text, #6E5761); --sut-deep: var(--e-global-color-accent, #B80F47); --sut-blush: var(--e-global-color-sut_blush, #FFE1EA); --sut-blush-l: var(--e-global-color-sut_blush_light, #FFEFF4); --sut-cream: var(--e-global-color-sut_cream, #FFF8F9); --sut-line: var(--e-global-color-sut_line, #F5CCD9); --sut-green: var(--e-global-color-sut_green, #2E6B3F); --sut-green-soft: var(--e-global-color-sut_green_soft, #EAF4EC); --sut-rose: var(--e-global-color-sut_rose, #F7A1BE); --sut-head: 'Titan One', 'Outfit', system-ui, sans-serif; --sut-body: 'Outfit', system-ui, sans-serif; --sut-script: 'Caveat', cursive; --sut-shadow: 0 1px 0 var(--sut-line), 0 10px 30px rgba(184, 15, 71, .06); --sut-shadow-lg: 0 24px 50px rgba(184, 15, 71, .08); } html { overflow-x: clip; } body { font-family: var(--sut-body); color: var(--sut-dark); background: var(--sut-cream); -webkit-font-smoothing: antialiased; } .sut-ico { display: inline-block; vertical-align: middle; flex-shrink: 0; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* Szín kiemelés címsorokban: */ .sut-accent { color: var(--sut-pink); } .sut-accent-rose { color: var(--sut-rose); } /* ---------- Animációk (Haladó → CSS osztályok) ---------- */ .sut-spin img, img.sut-spin { animation: sut-spin 22s linear infinite; } .sut-floaty { animation: sut-floaty 5s ease-in-out infinite; } @keyframes sut-spin { to { transform: rotate(360deg); } } @keyframes sut-floaty { 50% { transform: translateY(-10px); } } @keyframes sut-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 107, 63, .55); } 100% { box-shadow: 0 0 0 10px rgba(46, 107, 63, 0); } } .sut-pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sut-green); flex-shrink: 0; animation: sut-pulse 1.6s ease-out infinite; display: inline-block; } @media (prefers-reduced-motion: reduce) { .sut-spin img, img.sut-spin, .sut-floaty, .sut-mq-track, .sut-pulse-dot { animation: none !important; } } /* Dekor képek ne fogják el a kattintást */ .sut-deco, .sut-deco img { pointer-events: none; } /* Kártya emelkedés (konténerekre: CSS osztály sut-lift) */ .sut-lift { transition: transform .2s ease, box-shadow .2s ease; } .sut-lift:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(184, 15, 71, .14) !important; } .sut-bento img { transition: transform .45s cubic-bezier(.2, .8, .2, 1); } .sut-bento:hover img { transform: scale(1.07) rotate(-4deg); } .sut-bento .sut-go .elementor-icon, .sut-bento .sut-go { transition: transform .3s; } .sut-bento:hover .sut-go .elementor-icon { transform: rotate(45deg); } /* Kerek ikon gombok (fejléc) */ .sut-roundbtn, .sut-round .elementor-icon { width: 52px; height: 52px; border-radius: 50%; border: 0; background: #fff; color: var(--sut-dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 30px rgba(184, 15, 71, .10); transition: color .2s, background .2s; } .sut-round .elementor-icon { font-size: 22px; padding: 0 !important; } .sut-round .elementor-icon svg { width: 22px; height: 22px; } .sut-roundbtn:hover, .sut-round .elementor-icon:hover { color: var(--sut-pink); background: var(--sut-blush-l); } /* Gombok: nyíl ikon fehér körben (Elementor gomb + CSS osztály sut-btn-arrow) */ .sut-btn-arrow .elementor-button { padding-right: 8px !important; } .sut-btn-arrow .elementor-button-icon { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--sut-pink); display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; } .sut-btn-arrow .elementor-button-icon svg { width: 20px; height: 20px; fill: none !important; stroke: var(--sut-pink); } .elementor-button .elementor-button-icon svg[stroke] { fill: none; } .elementor-button-content-wrapper { align-items: center; } /* Pipa lista előnyök (Ikonlista + sut-checks) */ .sut-checks .elementor-icon-list-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--sut-green); display: inline-flex !important; align-items: center; justify-content: center; } .sut-checks .elementor-icon-list-icon svg { width: 13px !important; height: 13px !important; stroke: #fff; stroke-width: 3; fill: none !important; } /* Függőleges felirat (hero bal oldal) */ .sut-vertical .elementor-heading-title { writing-mode: vertical-rl; transform: rotate(180deg); } /* Ikon dobozok lucide ikonjai: kitöltés nélkül */ .elementor-icon svg[stroke], .elementor-icon-list-icon svg[stroke], .elementor-social-icon svg[stroke] { fill: none !important; } .elementor-icon svg[stroke] *, .elementor-icon-list-icon svg[stroke] * { fill: none; } /* Sorszám kör (egyedi torta lépései) + szaggatott vonal a kártyák mögött */ .sut-steps-row { position: relative; } .sut-steps-row::before { content: ""; position: absolute; left: 40px; right: 40px; top: 46px; border-top: 2px dashed rgba(255, 255, 255, .6); pointer-events: none; } .sut-steps-row > .e-con { position: relative; } /* Hero ív: a pink "árnyék" ív a kép mögött */ .sut-arch { box-shadow: 22px -14px 0 0 var(--sut-pink); } /* ========================================================================== Csipkés elválasztó ========================================================================== */ .sut-scallop { --sut-sc: var(--sut-pink); --sut-sr: 24px; height: calc(var(--sut-sr) + 2px); width: 100%; } .sut-scallop--down { background: radial-gradient(circle at var(--sut-sr) 0, var(--sut-sc) var(--sut-sr), transparent calc(var(--sut-sr) + 1px)) 0 0 / calc(var(--sut-sr) * 2) calc(var(--sut-sr) + 2px) repeat-x; } .sut-scallop--up { background: radial-gradient(circle at var(--sut-sr) calc(var(--sut-sr) + 2px), var(--sut-sc) var(--sut-sr), transparent calc(var(--sut-sr) + 1px)) 0 0 / calc(var(--sut-sr) * 2) calc(var(--sut-sr) + 2px) repeat-x; } /* ========================================================================== Futószalag ========================================================================== */ .sut-mq { --sut-mq-speed: 28s; position: relative; height: 170px; overflow: hidden; } .sut-mq-band { --sut-rot: 0deg; position: absolute; left: -80px; right: -80px; top: 50%; height: 74px; margin-top: -37px; transform: rotate(var(--sut-rot)); display: flex; align-items: center; overflow: hidden; font-family: var(--sut-head); font-size: 28px; white-space: nowrap; } .sut-mq-band--a { background: var(--sut-dark); color: #fff; } .sut-mq-band--a .sut-ico { color: var(--sut-pink); } .sut-mq-band--b { background: var(--sut-blush); color: var(--sut-pink); margin-top: -33px; } .sut-mq-band--b .sut-ico { color: var(--sut-dark); } .sut-mq-track { display: flex; width: max-content; animation: sut-marquee var(--sut-mq-speed) linear infinite; } .sut-mq-track.is-reverse { animation-direction: reverse; } .sut-mq-item { display: inline-flex; align-items: center; gap: 30px; padding-right: 30px; } @keyframes sut-marquee { to { transform: translateX(-50%); } } @media (max-width: 767px) { .sut-mq { height: 120px; } .sut-mq-band { height: 54px; margin-top: -27px; font-size: 20px; } .sut-mq-band--b { margin-top: -24px; } .sut-mq-item { gap: 18px; padding-right: 18px; } .sut-mq-item .sut-ico { width: 18px; height: 18px; } } /* ========================================================================== Termékkártya (Loop Item és beépített) ========================================================================== */ .sut-card, .sut-grid-item > .elementor, .sut-grid-item > .e-loop-item { height: 100%; } .sut-card { background: #fff; border-radius: 30px; padding: 10px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sut-shadow); transition: transform .2s ease, box-shadow .2s ease; } .sut-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(184, 15, 71, .14); } .sut-pmedia { position: relative; height: 240px; border-radius: 24px; background: var(--sut-blush-l); overflow: hidden; } .sut-pmedia-link { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .sut-pmedia img { width: 210px; height: auto; max-width: 88%; max-height: 88%; object-fit: contain; transition: transform .45s cubic-bezier(.2, .8, .2, 1); } .sut-zoom-yes .sut-pmedia:hover img, .e-loop-item:hover .sut-zoom-yes .sut-pmedia img, .sut-card:hover .sut-pmedia img { transform: scale(1.06); } .sut-badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: var(--sut-green); color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; } .sut-badge .sut-ico { stroke-width: 2.5; } .sut-size { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 600; color: var(--sut-dark); line-height: 1.2; } .sut-wish { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--sut-pink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px rgba(35, 20, 25, .08); padding: 0; transition: transform .15s; } .sut-wish:hover { transform: scale(1.08); background: #fff; color: var(--sut-pink); } .sut-wish[aria-pressed="true"] svg path { fill: currentColor; } .sut-wish--lg { position: static; width: 60px; height: 60px; border: 2px solid var(--sut-pink); box-shadow: none; flex-shrink: 0; } .sut-pinfo { padding: 0 10px; display: flex; flex-direction: column; gap: 6px; } .sut-ptitle { margin: 0; font-family: var(--sut-head); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--sut-dark); } .sut-ptitle a { color: inherit; text-decoration: none; } .sut-ptitle a:hover { color: var(--sut-pink); } .sut-pexcerpt { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sut-muted); } .sut-pbuy { padding: 0 4px 4px 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; } .sut-price-wrap { display: flex; flex-direction: column; line-height: 1.15; } .sut-price-label { font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--sut-muted); } .sut-price { font-family: var(--sut-head); font-size: 20px; color: var(--sut-dark); white-space: nowrap; } .sut-price del { font-size: .7em; opacity: .5; } .sut-price ins { text-decoration: none; } .sut-from { font-family: var(--sut-body); font-size: 13px; font-weight: 600; color: var(--sut-muted); margin-left: 2px; } .sut-add, .sut-add.button { height: 46px; padding: 0 7px 0 16px !important; border-radius: 999px !important; border: 0; background: var(--sut-pink) !important; color: #fff !important; display: inline-flex !important; align-items: center; gap: 10px; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important; white-space: nowrap; transition: background .2s; margin: 0 !important; } .sut-add:hover { background: var(--sut-deep) !important; } .sut-add-ico { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: inline-flex; align-items: center; justify-content: center; } .sut-add.loading { opacity: .7; } .sut-add.loading .sut-add-ico svg { animation: sut-spin 1s linear infinite; } .sut-add.added .sut-add-ico { background: #fff; color: var(--sut-pink); } .sut-pbuy .added_to_cart { display: none !important; } /* Mobil kompakt kártya */ @media (max-width: 767px) { .sut-pmedia { height: 150px !important; border-radius: 18px; } .sut-pmedia img { width: 120px; } .sut-badge { top: 8px; left: 8px; font-size: 11px; padding: 4px 9px; } .sut-badge .sut-ico, .sut-size { display: none; } .sut-wish { width: 34px; height: 34px; top: 8px; right: 8px; } .sut-wish svg { width: 16px; height: 16px; } .sut-ptitle { font-size: 17px; } .sut-mhide-yes .sut-pexcerpt { display: none; } .sut-mcompact-yes .sut-price-label, .sut-mcompact-yes .sut-add-txt { display: none; } .sut-mcompact-yes .sut-add { width: 36px; height: 36px; padding: 0 !important; justify-content: center; } .sut-mcompact-yes .sut-add-ico { background: none; } .sut-mcompact-yes .sut-price { color: var(--sut-pink); font-size: 17px; } .sut-card { border-radius: 22px; padding: 8px; gap: 10px; } .sut-pinfo { padding: 0 6px; } .sut-pbuy { padding: 0 2px 2px 6px; } } /* ========================================================================== Termékrács + fülek + lapozó ========================================================================== */ .sut-grid { --sut-cols: 4; --sut-gap: 28px; display: grid; grid-template-columns: repeat(var(--sut-cols), minmax(0, 1fr)); gap: var(--sut-gap); align-items: stretch; } .sut-grid-item[hidden] { display: none; } .sut-grid-item { min-width: 0; } .sut-grid-item .e-loop-item, .sut-grid-item > div { height: 100%; } @media (max-width: 767px) { .sut-grid { --sut-gap: 14px; } } .sut-grid.is-list { grid-template-columns: 1fr; } .sut-grid.is-list .sut-card, .sut-grid.is-list .e-loop-item > .e-con { flex-direction: row !important; align-items: center; } .sut-grid.is-list .sut-pmedia { width: 220px; height: 170px; flex-shrink: 0; } .sut-grid.is-list .sut-pinfo { flex: 1; } .sut-grid.is-list .sut-pbuy { margin-top: 0; } .sut-tabs-wrap { display: flex; justify-content: flex-end; margin-bottom: 0; } .sut-grid-wrap { display: flex; flex-direction: column; gap: 28px; } .sut-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: var(--sut-shadow); } .sut-tab { height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: transparent; color: var(--sut-dark); font: 500 16px/1 var(--sut-body); cursor: pointer; transition: background .2s, color .2s; } .sut-tab:hover { background: var(--sut-blush-l); color: var(--sut-pink); } .sut-tab.is-active { background: var(--sut-dark); color: #fff; font-weight: 600; } .sut-empty { padding: 40px; text-align: center; background: #fff; border-radius: 28px; color: var(--sut-muted); } .sut-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } .sut-pagination .page-numbers { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--sut-line); color: var(--sut-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; text-decoration: none; } .sut-pagination .page-numbers.current { background: var(--sut-pink); border-color: var(--sut-pink); color: #fff; } .sut-pagination .next, .sut-pagination .prev { color: var(--sut-pink); } .sut-pagination a.page-numbers:hover { border-color: var(--sut-pink); color: var(--sut-pink); } /* ========================================================================== Fejléc elemek ========================================================================== */ .sut-cartbtn { height: 52px; padding: 0 8px 0 20px; border-radius: 999px; background: var(--sut-dark); color: #fff !important; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; text-decoration: none !important; transition: background .2s; white-space: nowrap; } .sut-cartbtn:hover { background: var(--sut-deep); } .sut-cart-count { min-width: 36px; height: 36px; border-radius: 50%; background: var(--sut-pink); color: #fff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transition: transform .25s; } .sut-cart-count.is-bump { transform: scale(1.25); } /* Csak ikon változat (eszközönként: sut-cartbtn-icon / -tablet-icon / -mobile-icon) */ .sut-cartbtn-iconic { padding: 0; width: 48px; height: 48px; background: transparent; color: var(--sut-dark) !important; position: relative; justify-content: center; } @media (min-width: 1025px) { .sut-cartbtn-icon .sut-cartbtn { padding: 0; width: 52px; height: 52px; background: #fff; color: var(--sut-dark) !important; position: relative; justify-content: center; box-shadow: 0 10px 30px rgba(184, 15, 71, .10); } .sut-cartbtn-icon .sut-cartbtn-label { display: none; } .sut-cartbtn-icon .sut-cart-count { position: absolute; top: -2px; right: -4px; min-width: 20px; height: 20px; font-size: 11px; } } @media (min-width: 768px) and (max-width: 1024px) { .sut-cartbtn-tablet-icon .sut-cartbtn { padding: 0; width: 48px; height: 48px; background: transparent; color: var(--sut-dark) !important; position: relative; justify-content: center; } .sut-cartbtn-tablet-icon .sut-cartbtn-label { display: none; } .sut-cartbtn-tablet-icon .sut-cart-count { position: absolute; top: 0; right: -2px; min-width: 20px; height: 20px; font-size: 11px; } } @media (max-width: 767px) { .sut-cartbtn-mobile-icon .sut-cartbtn { padding: 0; width: 46px; height: 46px; background: transparent; color: var(--sut-dark) !important; position: relative; justify-content: center; } .sut-cartbtn-mobile-icon .sut-cartbtn .sut-ico { width: 24px; height: 24px; } .sut-cartbtn-mobile-icon .sut-cartbtn-label { display: none; } .sut-cartbtn-mobile-icon .sut-cart-count { position: absolute; top: 0; right: -2px; min-width: 20px; height: 20px; font-size: 11px; } } .sut-search { position: relative; } .sut-search-form { position: relative; margin: 0; } .sut-search input[type="search"] { width: 100%; box-sizing: border-box; height: 48px; border-radius: 999px !important; border: 1px solid var(--sut-line) !important; background: var(--sut-blush-l); padding: 0 64px 0 44px !important; font: 400 15px var(--sut-body); color: var(--sut-dark); -webkit-appearance: none; } .sut-search input[type="search"]:focus { outline: 2px solid var(--sut-pink); outline-offset: 2px; } .sut-search-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--sut-muted); display: flex; } .sut-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 28px; padding: 0 8px; border-radius: 8px; background: #fff; border: 1px solid var(--sut-line); font: 600 12px var(--sut-body); color: var(--sut-muted); display: flex; align-items: center; } .sut-search--field { width: 240px; max-width: 100%; } .sut-search-pop { position: absolute; right: 0; top: calc(100% + 10px); width: 320px; z-index: 50; background: #fff; padding: 8px; border-radius: 999px; box-shadow: 0 20px 40px rgba(35, 20, 25, .16); } .sut-search-pop[hidden] { display: none; } @media (max-width: 767px) { .sut-search--field { width: 100%; } .sut-kbd { display: none; } .sut-search-pop { width: calc(100vw - 40px); right: -60px; } } /* Pro Nav Menu kapszula stílus (a widgetre tett sut-nav osztállyal) */ .sut-nav .elementor-nav-menu--main .elementor-nav-menu { gap: 4px; padding: 6px; border-radius: 999px; background: #fff; } .sut-nav--shadow .elementor-nav-menu--main .elementor-nav-menu { box-shadow: 0 10px 30px rgba(184, 15, 71, .10); } .sut-nav--line .elementor-nav-menu--main .elementor-nav-menu { border: 1px solid var(--sut-line); } .sut-nav .elementor-nav-menu--main .elementor-item { height: 44px; padding: 0 18px !important; border-radius: 999px; display: flex; align-items: center; font-weight: 500; font-size: 16px; color: var(--sut-dark); transition: background .2s, color .2s; } .sut-nav .elementor-nav-menu--main .elementor-item:hover { background: var(--sut-blush-l); color: var(--sut-pink); } .sut-nav .elementor-nav-menu--main .elementor-item.elementor-item-active, .sut-nav .elementor-nav-menu--main .current-menu-item > .elementor-item { background: var(--sut-dark); color: #fff !important; font-weight: 600; } .sut-nav .elementor-nav-menu--main .elementor-item::before, .sut-nav .elementor-nav-menu--main .elementor-item::after { display: none !important; } .sut-nav .elementor-menu-toggle { background: transparent; color: var(--sut-dark); font-size: 26px; } .sut-nav .elementor-nav-menu--dropdown { border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px rgba(35, 20, 25, .16); background: #fff; margin-top: 12px; } .sut-nav .elementor-nav-menu--dropdown a { font: 600 17px var(--sut-body); color: var(--sut-dark); padding: 16px 24px !important; } .sut-nav .elementor-nav-menu--dropdown a.elementor-item-active { background: var(--sut-blush-l); color: var(--sut-pink); } /* Mobil alsó menü */ .sut-bnav { display: flex; align-items: center; gap: 4px; padding: 8px; border-radius: 999px; background: var(--sut-dark); box-shadow: 0 20px 40px rgba(35, 20, 25, .25); } .sut-bnav.is-fixed { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 999; } .sut-bnav a { flex: 1; height: 52px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff; text-decoration: none; font: 600 15px var(--sut-body); } .sut-bnav a span { display: none; } .sut-bnav a.is-active { flex: 2.2; background: var(--sut-pink); } .sut-bnav a.is-active span { display: inline; } .sut-bnav .sut-bnav-cart { flex: 0 0 52px; background: #fff; color: var(--sut-dark); border-radius: 50%; position: relative; } .sut-bnav .sut-bnav-cart .sut-cart-count { display: inline-flex; position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; font-size: 11px; } body.sut-has-bnav { padding-bottom: 96px; } @media (min-width: 768px) { .sut-bnav.is-fixed { display: none; } body.sut-has-bnav { padding-bottom: 0; } } /* ========================================================================== Bolt: szűrők, eszköztár ========================================================================== */ .sut-filters-body { display: flex; flex-direction: column; gap: 22px; } .sut-fbox { background: #fff; border-radius: 28px; padding: 26px; box-shadow: var(--sut-shadow); display: flex; flex-direction: column; gap: 10px; } .sut-fbox-title { margin: 0 0 6px; font-family: var(--sut-head); font-weight: 400; font-size: 21px; color: var(--sut-dark); } .sut-fcat { display: flex; align-items: center; height: 46px; padding: 0 16px; border-radius: 14px; background: var(--sut-blush-l); color: var(--sut-dark) !important; font-weight: 600; font-size: 16px; text-decoration: none !important; transition: background .2s, color .2s; } .sut-fcat:hover { background: var(--sut-blush); } .sut-fcat.is-active { background: var(--sut-pink); color: #fff !important; } .sut-fcheck { display: flex; align-items: center; gap: 12px; min-height: 32px; font-size: 16px; color: var(--sut-dark) !important; text-decoration: none !important; } .sut-fcheck .sut-box { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #b9aab0; display: inline-flex; align-items: center; justify-content: center; color: transparent; background: #fff; transition: all .15s; } .sut-fcheck:hover .sut-box { border-color: var(--sut-pink); } .sut-fcheck.is-on .sut-box { background: var(--sut-pink); border-color: var(--sut-pink); color: #fff; } .sut-fcheck .sut-box svg { stroke-width: 3.5; } .sut-filters-toggle { display: none; } @media (max-width: 1024px) { .sut-filters.is-collapsible .sut-filters-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; border-radius: 999px; border: 1px solid var(--sut-line); background: #fff; color: var(--sut-dark); font: 600 16px var(--sut-body); cursor: pointer; } .sut-filters.is-collapsible .sut-filters-body { display: none; margin-top: 16px; } .sut-filters.is-collapsible.is-open .sut-filters-body { display: flex; } } .sut-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 22px; border-radius: 999px; background: #fff; box-shadow: var(--sut-shadow); flex-wrap: wrap; } .sut-toolbar-l, .sut-toolbar-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .sut-count { font-size: 16px; color: var(--sut-muted); } .sut-count strong { color: var(--sut-dark); } .sut-sep { width: 1px; height: 24px; background: var(--sut-line); } .sut-chipf { height: 36px; padding: 0 8px 0 14px; border-radius: 999px; background: var(--sut-blush); color: var(--sut-deep); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .sut-chipf:only-child, .sut-chipf:not(:has(a)) { padding-right: 14px; } .sut-chipf a { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--sut-deep); display: inline-flex; align-items: center; justify-content: center; } .sut-view { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--sut-blush-l); } .sut-view button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--sut-dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .sut-view button.is-active { background: var(--sut-dark); color: #fff; } .sut-sort { display: flex; align-items: center; gap: 12px; margin: 0; } .sut-sort label { font-size: 15px; color: var(--sut-muted); } .sut-sort select { height: 48px; padding: 0 40px 0 18px; border-radius: 999px; border: 0; background: var(--sut-blush-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23231419' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; font: 500 15px var(--sut-body); color: var(--sut-dark); -webkit-appearance: none; appearance: none; cursor: pointer; } @media (max-width: 767px) { .sut-toolbar { border-radius: 24px; padding: 12px 14px; } .sut-view, .sut-sort label { display: none; } .sut-toolbar-r, .sut-sort, .sut-sort select { width: 100%; } } /* ========================================================================== Termékoldal ========================================================================== */ .sut-sprice { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .sut-sprice-amount { font-family: var(--sut-head); font-size: 36px; color: var(--sut-pink); line-height: 1.1; } .sut-sprice-amount del { font-size: .6em; color: var(--sut-muted); } .sut-sprice-note { font-size: 15px; color: var(--sut-muted); } .sut-field-subtitle { font-family: var(--sut-script); font-weight: 700; font-size: 30px; line-height: 1; color: var(--sut-pink); margin: 0; } .sut-dnote { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: var(--sut-green-soft); color: var(--sut-green); font-size: 15px; font-weight: 500; } /* Pro „Kosárba” widget űrlap: fehér kártya */ .sut-atc form.cart { background: #fff; border-radius: 30px; padding: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; box-shadow: 0 1px 0 var(--sut-line), var(--sut-shadow-lg); margin: 0 !important; } .sut-atc form.variations_form { display: block; } .sut-atc form.variations_form .single_variation_wrap .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .sut-atc .sut-order-box { flex: 1 0 100%; display: flex; flex-direction: column; gap: 20px; margin-bottom: 6px; } .sut-label { display: block; font-size: 15px; font-weight: 600; color: var(--sut-dark); margin: 0 0 10px; padding: 0; } .sut-field { margin: 0; border: 0; padding: 0; min-width: 0; } .sut-input { width: 100%; box-sizing: border-box; height: 52px; border-radius: 16px !important; border: 1px solid var(--sut-line) !important; background: #fff; padding: 0 16px !important; font: 400 16px var(--sut-body); color: var(--sut-dark); } .sut-input:focus { outline: 2px solid var(--sut-pink); outline-offset: 2px; border-color: var(--sut-pink) !important; } .sut-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .sut-chip { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 64px; padding: 0 10px; border-radius: 16px; border: 1px solid var(--sut-line); background: #fff; color: var(--sut-dark); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; } .sut-chip input { position: absolute; opacity: 0; pointer-events: none; } .sut-chip:hover { border-color: var(--sut-pink); } .sut-chip.is-active { border: 2px solid var(--sut-pink); background: var(--sut-blush-l); color: var(--sut-deep); } .sut-chip:focus-within { outline: 2px solid var(--sut-pink); outline-offset: 2px; } .sut-chip-top { font-size: 12px; font-weight: 600; opacity: .75; } .sut-chip-main { font-size: 15px; font-weight: 700; white-space: nowrap; } .sut-date-other { margin-top: 10px; } /* Méret választó gombok (a variációs select helyett, JS készíti) */ .sut-atc table.variations { margin: 0 0 20px !important; border: 0 !important; } .sut-atc table.variations tr { display: flex; flex-direction: column; gap: 12px; } .sut-atc table.variations th, .sut-atc table.variations td { padding: 0 !important; border: 0 !important; background: none !important; text-align: left; } .sut-atc table.variations th label { font-size: 15px; font-weight: 600; color: var(--sut-dark); } .sut-atc table.variations select.sut-hidden-select { position: absolute !important; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .sut-atc .reset_variations { display: none !important; } .sut-pills { display: flex; gap: 12px; flex-wrap: wrap; } .sut-pill { height: 50px; padding: 0 22px; border-radius: 16px; border: 1px solid var(--sut-line); background: #fff; color: var(--sut-dark); font: 600 16px var(--sut-body); cursor: pointer; transition: all .15s; } .sut-pill:hover { border-color: var(--sut-pink); background: #fff; color: var(--sut-dark); } .sut-pill.is-active { border: 2px solid var(--sut-pink); background: var(--sut-blush-l); color: var(--sut-deep); } .sut-pill:disabled { opacity: .4; cursor: not-allowed; } .sut-atc .woocommerce-variation-price { display: none; } .sut-atc .woocommerce-variation-availability p { margin: 0 0 8px; font-size: 14px; color: var(--sut-green); } /* Mennyiség léptető */ .sut-qty, .woocommerce .quantity.sut-qty { display: inline-flex !important; align-items: center; gap: 4px; height: 60px; padding: 0 6px; border-radius: 999px; background: #fff; border: 1px solid var(--sut-line); margin: 0 !important; } .sut-qty .qty { width: 40px !important; height: auto !important; border: 0 !important; background: transparent !important; text-align: center; font: 400 20px var(--sut-head) !important; color: var(--sut-dark); padding: 0 !important; -moz-appearance: textfield; } .sut-qty .qty::-webkit-outer-spin-button, .sut-qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sut-qty-btn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--sut-blush-l); color: var(--sut-pink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .15s; } .sut-qty-btn:hover { background: var(--sut-blush); color: var(--sut-pink); } .sut-atc .single_add_to_cart_button, .sut-atc button.single_add_to_cart_button.button.alt { flex: 1 1 auto; height: 60px; padding: 0 38px !important; border-radius: 999px !important; border: 0 !important; background: var(--sut-pink) !important; color: #fff !important; font: 600 17px var(--sut-body) !important; letter-spacing: .3px; box-shadow: 0 12px 26px rgba(229, 25, 94, .28); display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; transition: background .2s; } .sut-atc .single_add_to_cart_button:hover { background: var(--sut-deep) !important; } .sut-atc .single_add_to_cart_button::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--sut-basket) no-repeat center / contain; mask: var(--sut-basket) no-repeat center / contain; } :root { --sut-basket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 11-1 9'/%3E%3Cpath d='m19 11-4-7'/%3E%3Cpath d='M2 11h20'/%3E%3Cpath d='m3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8a2 2 0 0 0 2-1.6l1.7-7.4'/%3E%3Cpath d='M4.5 15.5h15'/%3E%3Cpath d='m5 11 4-7'/%3E%3Cpath d='m9 11 1 9'/%3E%3C/svg%3E"); } .sut-atc .single_add_to_cart_button.disabled { opacity: .5; } .sut-atc .stock { margin: 0 0 10px; font-size: 14px; } @media (max-width: 767px) { .sut-atc form.cart { padding: 18px; border-radius: 24px; } .sut-atc .single_add_to_cart_button { padding: 0 20px !important; font-size: 16px !important; } .sut-chips { grid-template-columns: repeat(2, 1fr); } } /* Pro termékképek galéria */ .sut-gallery .woocommerce-product-gallery { position: relative; } .sut-gallery .woocommerce-product-gallery__wrapper, .sut-gallery .flex-viewport { border-radius: 36px; background: var(--sut-blush); overflow: hidden; } .sut-gallery .woocommerce-product-gallery__image { background-image: var(--sut-doodle-light); background-size: 260px; } .sut-gallery .woocommerce-product-gallery__image img { padding: 40px; box-sizing: border-box; object-fit: contain; aspect-ratio: 1 / 1; } .sut-gallery .flex-control-thumbs { display: flex !important; gap: 16px; margin-top: 18px !important; } .sut-gallery .flex-control-thumbs li { width: 110px !important; float: none !important; margin: 0 !important; } .sut-gallery .flex-control-thumbs img { width: 110px; height: 110px; border-radius: 20px; border: 1px solid var(--sut-line); background: var(--sut-blush-l); padding: 12px; box-sizing: border-box; opacity: 1 !important; object-fit: contain; cursor: pointer; } .sut-gallery .flex-control-thumbs img.flex-active { border: 3px solid var(--sut-pink); } .sut-gallery .woocommerce-product-gallery__trigger { top: 20px !important; right: 20px !important; background: #fff !important; border-radius: 50%; } @media (max-width: 767px) { .sut-gallery .woocommerce-product-gallery__wrapper, .sut-gallery .flex-viewport { border-radius: 24px; } .sut-gallery .flex-control-thumbs { gap: 10px; } .sut-gallery .flex-control-thumbs img { width: 68px; height: 68px; border-radius: 14px; } } /* Harmonika */ .sut-acc details { border-bottom: 1px solid var(--sut-line); padding: 18px 0; } .sut-acc summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: var(--sut-head); font-size: 19px; color: var(--sut-dark); list-style: none; } .sut-acc summary::-webkit-details-marker { display: none; } .sut-acc summary .sut-ico { color: var(--sut-pink); transition: transform .2s; } .sut-acc details[open] summary .sut-ico { transform: rotate(180deg); } .sut-acc-body { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--sut-muted); } .sut-acc-body p { margin: 0 0 8px; } /* ========================================================================== Kosár (klasszikus [woocommerce_cart] shortcode) ========================================================================== */ .sut-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 36px; align-items: start; } .sut-cart .woocommerce > .woocommerce-notices-wrapper, .sut-cart .woocommerce > .cart-empty, .sut-cart .woocommerce > .return-to-shop, .sut-cart .woocommerce > .wc-empty-cart-message { grid-column: 1 / -1; } .sut-cart .woocommerce-cart-form { margin: 0; } .sut-cart table.shop_table.cart { border: 0 !important; margin: 0; border-collapse: separate; } .sut-cart table.shop_table.cart thead { display: none; } .sut-cart table.shop_table.cart tbody { display: flex; flex-direction: column; gap: 18px; } .sut-cart table.shop_table.cart tr.cart_item { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto 140px 44px; grid-template-areas: "thumb name qty sub rm"; align-items: center; gap: 24px; padding: 18px; background: #fff; border-radius: 28px; box-shadow: var(--sut-shadow); } .sut-cart table.shop_table.cart td { border: 0 !important; padding: 0 !important; background: none !important; } .sut-cart td.product-thumbnail { grid-area: thumb; } .sut-cart td.product-thumbnail a { display: flex; width: 120px; height: 120px; border-radius: 20px; background: var(--sut-blush-l); align-items: center; justify-content: center; } .sut-cart td.product-thumbnail img { width: 100px !important; height: 100px !important; object-fit: contain; } .sut-cart td.product-name { grid-area: name; display: flex !important; flex-direction: column; gap: 6px; } .sut-cart td.product-name > a, .sut-cart td.product-name .sut-cart-title { font-family: var(--sut-head); font-size: 21px; color: var(--sut-dark); text-decoration: none; line-height: 1.15; } .sut-cart td.product-name dl.variation { margin: 0; font-size: 15px; color: var(--sut-muted); display: flex; flex-wrap: wrap; gap: 0 6px; } .sut-cart td.product-name dl.variation dt, .sut-cart td.product-name dl.variation dd { margin: 0; padding: 0; float: none; font-weight: 400; } .sut-cart td.product-name dl.variation dd p { margin: 0; display: inline; } .sut-cart td.product-name dl.variation dd:not(:last-child)::after { content: " · "; } .sut-cart td.product-price { display: none !important; } .sut-cart td.product-quantity { grid-area: qty; } .sut-cart td.product-quantity .sut-qty { height: 52px; padding: 0 5px; background: var(--sut-blush-l); border: 0; } .sut-cart td.product-quantity .sut-qty-btn { width: 44px; height: 44px; background: #fff; } .sut-cart td.product-quantity .qty { font-size: 18px !important; width: 34px !important; } .sut-cart td.product-subtotal { grid-area: sub; text-align: right; font-family: var(--sut-head); font-size: 21px; color: var(--sut-pink); } .sut-cart td.product-remove { grid-area: rm; } .sut-cart td.product-remove a.remove { width: 44px !important; height: 44px !important; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center; font-size: 0 !important; color: var(--sut-muted) !important; background: transparent !important; } .sut-cart td.product-remove a.remove::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--sut-trash) no-repeat center / contain; mask: var(--sut-trash) no-repeat center / contain; } .sut-cart td.product-remove a.remove:hover { background: var(--sut-blush-l) !important; color: var(--sut-pink) !important; } :root { --sut-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E"); } .sut-cart table.shop_table.cart tr:not(.cart_item) { display: block; } .sut-cart table.shop_table.cart td.actions { display: block; } .sut-cart td.actions .coupon { display: none !important; } .sut-cart td.actions button[name="update_cart"] { display: none !important; } .sut-cart .cart-collaterals { width: auto !important; float: none !important; } .sut-cart .cart-collaterals .cross-sells { display: none; } .sut-cart .cart_totals { width: 100% !important; float: none !important; background: #fff; border-radius: 30px; padding: 30px; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--sut-shadow-lg); box-sizing: border-box; position: sticky; top: 30px; } .sut-cart .cart_totals h2 { margin: 0; font-family: var(--sut-head); font-weight: 400; font-size: 26px; color: var(--sut-dark); order: -2; } .sut-cart .sut-coupon { order: 0; margin: 0; } .sut-coupon-row { display: flex; gap: 8px; } .sut-coupon .sut-input { height: 50px; flex: 1; min-width: 0; } .sut-btn-dark { height: 50px; padding: 0 20px; border-radius: 16px; border: 0; background: var(--sut-dark); color: #fff; font: 600 15px var(--sut-body); cursor: pointer; white-space: nowrap; } .sut-btn-dark:hover { background: var(--sut-deep); color: #fff; } .sut-cart .cart_totals table.shop_table { border: 0 !important; margin: 0 !important; order: 1; } .sut-cart .cart_totals table.shop_table tbody { display: flex; flex-direction: column; gap: 12px; } .sut-cart .cart_totals table.shop_table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .sut-cart .cart_totals th, .sut-cart .cart_totals td { border: 0 !important; padding: 0 !important; background: none !important; font-size: 16px; font-weight: 400; color: var(--sut-dark); } .sut-cart .cart_totals th { color: var(--sut-muted); } .sut-cart .cart_totals tr.cart-subtotal { padding-top: 18px; border-top: 1px dashed var(--sut-line); } /* Szállítási módok: kártyák a totals elején (CSS order-rel a táblázat fölé) */ .sut-cart .cart_totals tr.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; order: -1; margin-bottom: 8px; } .sut-cart .cart_totals tr.woocommerce-shipping-totals th { font-size: 15px; font-weight: 600; color: var(--sut-dark); } .sut-cart .cart_totals tr.woocommerce-shipping-totals th::before { content: "Átvétel módja"; } .sut-cart .cart_totals tr.woocommerce-shipping-totals th { font-size: 0; } .sut-cart .cart_totals tr.woocommerce-shipping-totals th::before { font-size: 15px; } .sut-cart .cart_totals tr.woocommerce-shipping-totals td { text-align: left !important; } #shipping_method { list-style: none; margin: 0 !important; padding: 0; display: flex; flex-direction: column; gap: 10px; } #shipping_method li { position: relative; margin: 0 !important; padding: 0 !important; } #shipping_method li input.shipping_method { position: absolute; opacity: 0; } #shipping_method li label { display: block; margin: 0; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--sut-line); background: #fff; cursor: pointer; transition: all .15s; } #shipping_method li input:checked + label { border: 2px solid var(--sut-pink); background: var(--sut-blush-l); padding: 15px 17px; } #shipping_method li input:focus-visible + label { outline: 2px solid var(--sut-pink); outline-offset: 2px; } .sut-ship { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .sut-ship-txt { display: flex; flex-direction: column; gap: 2px; } .sut-ship-name { font-weight: 600; font-size: 16px; color: var(--sut-dark); } .sut-ship-sub { font-size: 14px; color: var(--sut-muted); } .sut-ship-fee { font-weight: 600; font-size: 15px; color: var(--sut-dark); white-space: nowrap; } .sut-cart .woocommerce-shipping-destination, .sut-cart .woocommerce-shipping-calculator { font-size: 13px; color: var(--sut-muted); margin: 8px 0 0; } .sut-cart .cart_totals tr.order-total { margin-top: 6px; } .sut-cart .cart_totals tr.order-total th { font-family: var(--sut-head); font-size: 22px; color: var(--sut-dark); } .sut-cart .cart_totals tr.order-total td, .sut-total { font-family: var(--sut-head); font-size: 30px; color: var(--sut-pink); } .sut-total strong { font-weight: 400; } .sut-total small { display: block; font: 400 13px var(--sut-body); color: var(--sut-muted); } .sut-cart .wc-proceed-to-checkout { order: 2; padding: 0 !important; } .sut-cart .wc-proceed-to-checkout a.checkout-button { margin: 0 !important; height: 60px; border-radius: 999px !important; background: var(--sut-pink) !important; color: #fff !important; font: 600 17px var(--sut-body) !important; display: flex !important; align-items: center; justify-content: center; gap: 10px; padding: 0 30px !important; box-shadow: 0 12px 26px rgba(229, 25, 94, .28); } .sut-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--sut-deep) !important; } .sut-cart .wc-proceed-to-checkout a.checkout-button::after { content: "→"; font-size: 20px; } .sut-cart .cart_totals::after { content: "🔒 Biztonságos online fizetés"; order: 3; text-align: center; font-size: 14px; color: var(--sut-muted); } .sut-cart .cart-empty { background: #fff; border-radius: 28px; padding: 40px !important; text-align: center; border: 0 !important; font-size: 18px; } .sut-cart .cart-empty::before { display: none !important; } .sut-cart .return-to-shop { text-align: center; } .sut-cart .return-to-shop .button { border-radius: 999px !important; background: var(--sut-pink) !important; color: #fff !important; padding: 16px 30px !important; } @media (max-width: 1024px) { .sut-cart .woocommerce { grid-template-columns: 1fr; } .sut-cart .cart_totals { position: static; } } @media (max-width: 767px) { .sut-cart table.shop_table.cart tr.cart_item { grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "thumb name rm" "thumb qty sub"; gap: 10px 14px; padding: 12px; border-radius: 22px; } .sut-cart td.product-thumbnail a { width: 84px; height: 84px; border-radius: 16px; } .sut-cart td.product-thumbnail img { width: 70px !important; height: 70px !important; } .sut-cart td.product-name > a, .sut-cart td.product-name .sut-cart-title { font-size: 17px; } .sut-cart td.product-name dl.variation { font-size: 13px; } .sut-cart td.product-subtotal { font-size: 17px; } .sut-cart td.product-quantity .sut-qty { height: 42px; } .sut-cart td.product-quantity .sut-qty-btn { width: 34px; height: 34px; } .sut-cart td.product-remove a.remove { width: 36px !important; height: 36px !important; } .sut-cart table.shop_table.cart td::before { display: none !important; } .sut-cart .cart_totals { padding: 22px; border-radius: 24px; } } /* WooCommerce mobil táblázat stílusok semlegesítése */ .sut-cart .shop_table_responsive tr td::before { display: none !important; } .sut-cart .shop_table_responsive tr:nth-child(2n) td { background: none !important; } /* Ingyenes szállítás sáv */ .sut-ship-bar { display: flex; flex-direction: column; gap: 12px; padding: 22px 26px; border-radius: 26px; background: #fff; box-shadow: var(--sut-shadow); } .sut-ship-bar-inner { display: flex; flex-direction: column; gap: 12px; } .sut-ship-msg { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--sut-dark); } .sut-ship-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--sut-blush); color: var(--sut-pink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .sut-progress { display: block; height: 10px; border-radius: 999px; background: var(--sut-blush-l); overflow: hidden; } .sut-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sut-rose), var(--sut-pink)); transition: width .4s ease; } /* Rendelés lépései */ .sut-steps { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .sut-step { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; color: var(--sut-muted); } .sut-step-n { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: #fff; border: 1px solid var(--sut-line); color: var(--sut-muted); box-sizing: border-box; } .sut-step.is-active { color: var(--sut-dark); } .sut-step.is-active .sut-step-n { background: var(--sut-dark); border-color: var(--sut-dark); color: #fff; } .sut-step-line { width: 70px; height: 2px; background: var(--sut-line); } @media (max-width: 767px) { .sut-step-line { width: 20px; } .sut-step { font-size: 14px; gap: 8px; } .sut-step-n { width: 32px; height: 32px; } } /* Ajándék ajánló */ .sut-gift { display: flex; align-items: center; gap: 16px; padding: 22px 26px; border-radius: 26px; background: var(--sut-blush); flex-wrap: wrap; } .sut-gift-ico { color: var(--sut-pink); display: flex; } .sut-gift p { margin: 0; flex: 1; min-width: 200px; font-size: 16px; color: var(--sut-dark); } .sut-btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--sut-pink); color: var(--sut-pink) !important; font-weight: 600; font-size: 15px; text-decoration: none !important; transition: background .2s, color .2s; background: transparent; } .sut-btn-line:hover { background: var(--sut-pink); color: #fff !important; } .sut-gift-price { font-weight: 400; opacity: .8; } .sut-gift-done { display: inline-flex; align-items: center; gap: 6px; color: var(--sut-green); font-weight: 600; } /* Pénztár (klasszikus shortcode) finomítások */ .sut-checkout .woocommerce form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 36px; align-items: start; } .sut-checkout .woocommerce form.checkout > .col2-set { grid-column: 1; width: 100%; background: #fff; border-radius: 30px; padding: 30px; box-shadow: var(--sut-shadow); box-sizing: border-box; } .sut-checkout .woocommerce form.checkout .col2-set .col-1, .sut-checkout .woocommerce form.checkout .col2-set .col-2 { width: 100%; float: none; } .sut-checkout #order_review_heading { display: none; } .sut-checkout #order_review { grid-column: 2; grid-row: 1 / span 3; background: #fff; border-radius: 30px; padding: 30px; box-shadow: var(--sut-shadow-lg); position: sticky; top: 30px; } .sut-checkout h3 { font-family: var(--sut-head); font-weight: 400; font-size: 24px; } .sut-checkout .input-text, .sut-checkout select, .sut-checkout .select2-selection { border-radius: 16px !important; border: 1px solid var(--sut-line) !important; min-height: 50px; padding: 0 16px !important; font: 400 16px var(--sut-body); } .sut-checkout textarea.input-text { padding: 12px 16px !important; } .sut-checkout #place_order { width: 100%; height: 60px; border-radius: 999px !important; background: var(--sut-pink) !important; color: #fff !important; font: 600 17px var(--sut-body) !important; border: 0; } .sut-checkout #place_order:hover { background: var(--sut-deep) !important; } .sut-checkout .woocommerce-checkout-review-order-table { border: 0 !important; } .sut-checkout .woocommerce-checkout-review-order-table td, .sut-checkout .woocommerce-checkout-review-order-table th { border-color: var(--sut-line) !important; background: none !important; } .sut-checkout .order-total .amount { font-family: var(--sut-head); color: var(--sut-pink); font-size: 24px; } .sut-checkout #payment { background: var(--sut-blush-l) !important; border-radius: 20px; } @media (max-width: 1024px) { .sut-checkout .woocommerce form.checkout { grid-template-columns: 1fr; } .sut-checkout #order_review { grid-column: 1; grid-row: auto; position: static; } } /* Woo értesítők */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: 18px; border-top: 0 !important; background: #fff !important; box-shadow: var(--sut-shadow); font-family: var(--sut-body); } .woocommerce-message { border-left: 4px solid var(--sut-green) !important; } .woocommerce-error { border-left: 4px solid var(--sut-pink) !important; } .woocommerce-message::before { color: var(--sut-green) !important; } .woocommerce-message .button, .woocommerce-info .button { border-radius: 999px !important; background: var(--sut-dark) !important; color: #fff !important; } /* Pro breadcrumb */ .sut-crumbs .woocommerce-breadcrumb { font-size: 15px; color: var(--sut-muted); margin: 0; } .sut-crumbs .woocommerce-breadcrumb a { color: var(--sut-muted); } .sut-crumbs .woocommerce-breadcrumb a:hover { color: var(--sut-pink); } /* Toast */ .sut-toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px); opacity: 0; z-index: 99999; background: var(--sut-dark); color: #fff; padding: 14px 22px; border-radius: 999px; font: 600 15px var(--sut-body); display: flex; align-items: center; gap: 10px; box-shadow: 0 20px 40px rgba(35, 20, 25, .3); transition: all .3s; pointer-events: none; } .sut-toast.is-on { opacity: 1; transform: translate(-50%, 0); } .sut-toast a { color: var(--sut-rose); pointer-events: auto; } @media (max-width: 767px) { .sut-toast { bottom: 100px; width: max-content; max-width: calc(100vw - 40px); } } /* Hírlevél (Pro űrlap, sut-newsletter osztállyal) */ .sut-newsletter .elementor-form-fields-wrapper { background: #fff; padding: 6px; border-radius: 999px; flex-wrap: nowrap !important; margin: 0 !important; } .sut-newsletter .elementor-field-group { padding: 0 !important; margin: 0 !important; } .sut-newsletter .elementor-field-type-email { flex: 1; } .sut-newsletter .elementor-field-type-submit { width: auto !important; flex: 0 0 auto; } .sut-newsletter .elementor-field-type-email .elementor-field-label { position: absolute; top: -32px; left: 0; color: #F7C6D6; font-weight: 600; font-size: 14px; } .sut-newsletter .elementor-form { position: relative; padding-top: 32px; } .sut-newsletter input[type="email"] { border: 0 !important; background: transparent !important; height: 52px; padding: 0 20px !important; font-size: 16px; } .sut-newsletter .elementor-button { height: 52px; border-radius: 999px !important; padding: 0 28px !important; } .sut-newsletter .elementor-field-type-acceptance, .sut-newsletter .elementor-message { color: #D9C6CE; } @media (max-width: 767px) { .sut-newsletter .elementor-form-fields-wrapper { flex-wrap: wrap !important; border-radius: 26px; } .sut-newsletter .elementor-field-type-submit { width: 100% !important; } .sut-newsletter .elementor-button { width: 100%; } } /* Kosár widget: bal oszlop tagolása */ .sut-cart .woocommerce-cart-form { display: flex; flex-direction: column; gap: 18px; } .sut-continue { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: var(--sut-pink); text-decoration: none; margin-top: 6px; } .sut-continue:hover { color: var(--sut-deep); } /* Bolt címsor */ .sut-atitle-wrap { display: flex; flex-direction: column; gap: 12px; } .sut-atitle { margin: 0; font-family: var(--sut-head); font-weight: 400; font-size: 56px; line-height: 1.1; color: var(--sut-dark); } .sut-adesc { margin: 0; font-size: 18px; color: var(--sut-muted); } @media (max-width: 767px) { .sut-atitle { font-size: 36px; } .sut-adesc { font-size: 16px; } } /* Kézírásos felirat utáni vonal (Címsor + sut-dash) */ .sut-dash .elementor-heading-title::after { content: ""; display: inline-block; vertical-align: middle; width: 52px; height: 3px; background: currentColor; margin-left: 14px; } /* Sorszám kör (Címsor + sut-num) */ .sut-num .elementor-heading-title { width: 44px; height: 44px; border-radius: 50%; background: var(--sut-pink); color: #fff; display: inline-flex; align-items: center; justify-content: center; } /* Élő jelző pötty (Címsor + sut-live) */ .sut-live .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; } .sut-live .elementor-heading-title::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sut-green); animation: sut-pulse 1.6s ease-out infinite; } /* Hero ár címke: "már" kisebb, halvány */ .sut-pricetag small { font-family: var(--sut-body); font-size: 15px; color: #F7C6D6; margin-right: 12px; } /* Fülek a címsor sorában (Termékrács + sut-tabs-float) */ @media (min-width: 768px) { .sut-tabs-float .sut-grid-wrap { position: relative; } .sut-tabs-float .sut-tabs-wrap { position: absolute; right: 0; top: -94px; } } @media (max-width: 767px) { .sut-tabs-float .sut-tabs-wrap { display: none; } } /* Kártya link konténer (bento) */ a.e-con, a.e-con:hover { text-decoration: none; color: inherit; } /* Termékoldal: címke a galérián */ .sut-gallery-badge .sut-field-out { display: inline-flex; padding: 8px 16px; border-radius: 999px; background: var(--sut-green); color: #fff; font-size: 14px; font-weight: 600; } /* ========================================================================== Gomb reset: a téma és az Elementor Kit általános