{"id":112,"date":"2026-08-17T13:08:50","date_gmt":"2026-08-17T13:08:50","guid":{"rendered":"https:\/\/hetvenhat.hu\/?page_id=112"},"modified":"2026-08-29T08:36:44","modified_gmt":"2026-08-29T08:36:44","slug":"webshop-2","status":"publish","type":"page","link":"https:\/\/hetvenhat.hu\/en\/webshop-2\/","title":{"rendered":"Online shop"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"112\" class=\"elementor elementor-112\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c3ad15e e-flex e-con-boxed e-con e-parent\" data-id=\"c3ad15e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9cc4c2 elementor-widget elementor-widget-html\" data-id=\"d9cc4c2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"hh-webshop-page\" id=\"webshop\">\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@400;500;600&display=swap');\r\n\r\n:root {\r\n    --hh-black: #050505;\r\n    --hh-black-soft: #0a0a0a;\r\n    --hh-gold: #d3ad5d;\r\n    --hh-gold-light: #efd38f;\r\n    --hh-cream: #f3ead8;\r\n    --hh-muted: #9f978b;\r\n    --hh-border: rgba(211,173,93,.22);\r\n}\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n    scroll-behavior: smooth;\r\n}\r\n\r\nbody {\r\n    margin: 0;\r\n    background: var(--hh-black);\r\n}\r\n\r\n.elementor-widget-html,\r\n.elementor-widget-html .elementor-widget-container {\r\n    width: 100%;\r\n    max-width: none !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n}\r\n\r\n.hh-webshop-page {\r\n    width: 100vw;\r\n    max-width: none;\r\n\r\n    margin-left: calc(50% - 50vw);\r\n    margin-right: calc(50% - 50vw);\r\n\r\n    min-height: 100vh;\r\n\r\n    background: #050505;\r\n\r\n    color: var(--hh-cream);\r\n\r\n    font-family: 'Montserrat', sans-serif;\r\n\r\n    overflow: hidden;\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   HEADER\r\n============================================================ *\/\r\n\r\n.hh-header {\r\n    position: fixed;\r\n\r\n    top: 0;\r\n    left: 0;\r\n\r\n    width: 100%;\r\n    height: 88px;\r\n\r\n    z-index: 9999;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    background: rgba(5,5,5,.34);\r\n\r\n    backdrop-filter: blur(6px);\r\n    -webkit-backdrop-filter: blur(6px);\r\n\r\n    border-bottom: 1px solid rgba(211,173,93,.06);\r\n\r\n    transition:\r\n        background .35s ease,\r\n        backdrop-filter .35s ease,\r\n        border-color .35s ease;\r\n}\r\n\r\n.hh-header.scrolled {\r\n    background: rgba(5,5,5,.94);\r\n\r\n    backdrop-filter: blur(20px);\r\n    -webkit-backdrop-filter: blur(20px);\r\n\r\n    border-bottom-color: rgba(211,173,93,.14);\r\n}\r\n\r\n.hh-header-inner {\r\n    width: min(1500px, calc(100% - 64px));\r\n\r\n    margin: 0 auto;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n\r\n    gap: 40px;\r\n}\r\n\r\n\r\n\/* LOGO *\/\r\n\r\n.hh-logo {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 14px;\r\n\r\n    color: var(--hh-cream);\r\n\r\n    text-decoration: none;\r\n\r\n    flex-shrink: 0;\r\n}\r\n\r\n.hh-logo-number {\r\n    font-family: 'Cormorant Garamond', serif;\r\n\r\n    font-size: 52px;\r\n    font-weight: 500;\r\n\r\n    line-height: .85;\r\n\r\n    letter-spacing: -3px;\r\n\r\n    color: var(--hh-gold);\r\n}\r\n\r\n.hh-logo-text {\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    line-height: 1;\r\n}\r\n\r\n.hh-logo-main {\r\n    font-family: 'Cormorant Garamond', serif;\r\n\r\n    font-size: 25px;\r\n    font-weight: 600;\r\n\r\n    letter-spacing: .5px;\r\n}\r\n\r\n.hh-logo-sub {\r\n    margin-top: 5px;\r\n\r\n    color: var(--hh-gold);\r\n\r\n    font-size: 8px;\r\n\r\n    letter-spacing: 3px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* NAV *\/\r\n\r\n.hh-nav {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: clamp(14px, 1.7vw, 28px);\r\n}\r\n\r\n.hh-nav a {\r\n    position: relative;\r\n\r\n    color: #ded7cb;\r\n\r\n    font-size: 13px;\r\n    font-weight: 500;\r\n\r\n    text-decoration: none;\r\n\r\n    transition: color .25s ease;\r\n}\r\n\r\n.hh-nav a::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    left: 0;\r\n    bottom: -10px;\r\n\r\n    width: 0;\r\n    height: 1px;\r\n\r\n    background: var(--hh-gold);\r\n\r\n    transition: width .3s ease;\r\n}\r\n\r\n.hh-nav a:hover,\r\n.hh-nav a.active {\r\n    color: var(--hh-gold-light);\r\n}\r\n\r\n.hh-nav a:hover::after,\r\n.hh-nav a.active::after {\r\n    width: 100%;\r\n}\r\n\r\n\r\n\/* MOBILE MENU BUTTON *\/\r\n\r\n.hh-mobile-toggle {\r\n    display: none;\r\n\r\n    width: 42px;\r\n    height: 42px;\r\n\r\n    border: 1px solid var(--hh-border);\r\n\r\n    background: rgba(0,0,0,.42);\r\n\r\n    border-radius: 50%;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    cursor: pointer;\r\n\r\n    padding: 0;\r\n}\r\n\r\n.hh-mobile-toggle span,\r\n.hh-mobile-toggle span::before,\r\n.hh-mobile-toggle span::after {\r\n    width: 18px;\r\n    height: 1px;\r\n\r\n    display: block;\r\n\r\n    position: relative;\r\n\r\n    background: var(--hh-gold-light);\r\n\r\n    transition:\r\n        transform .25s ease,\r\n        opacity .25s ease;\r\n}\r\n\r\n.hh-mobile-toggle span::before,\r\n.hh-mobile-toggle span::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    left: 0;\r\n}\r\n\r\n.hh-mobile-toggle span::before {\r\n    top: -6px;\r\n}\r\n\r\n.hh-mobile-toggle span::after {\r\n    top: 6px;\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   HERO\r\n============================================================ *\/\r\n\r\n.hh-webshop-hero {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    \/*\r\n       A gener\u00e1lt banner sz\u00e9les k\u00e9par\u00e1nya.\r\n       Desktopon NINCS cover \/ zoom.\r\n    *\/\r\n\r\n    aspect-ratio: 15 \/ 8;\r\n\r\n    min-height: 0;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    overflow: hidden;\r\n\r\n    background: #050505;\r\n}\r\n\r\n.hh-webshop-image {\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    background: #050505;\r\n}\r\n\r\n.hh-webshop-image img {\r\n    display: block;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    object-fit: contain;\r\n\r\n    object-position: center center;\r\n\r\n    transform: none !important;\r\n}\r\n\r\n\r\n\/* DARK OVERLAYS *\/\r\n\r\n.hh-webshop-hero::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    z-index: 1;\r\n\r\n    pointer-events: none;\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(5,5,5,.97) 0%,\r\n            rgba(5,5,5,.91) 18%,\r\n            rgba(5,5,5,.62) 35%,\r\n            rgba(5,5,5,.18) 55%,\r\n            rgba(5,5,5,.03) 100%\r\n        ),\r\n\r\n        linear-gradient(\r\n            0deg,\r\n            rgba(5,5,5,.96) 0%,\r\n            rgba(5,5,5,.20) 24%,\r\n            rgba(5,5,5,.04) 55%\r\n        );\r\n}\r\n\r\n\r\n\/* HERO CONTENT *\/\r\n\r\n.hh-webshop-content {\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n\r\n    width: min(1500px, calc(100% - 64px));\r\n\r\n    margin: 0 auto;\r\n\r\n    padding-top: 88px;\r\n}\r\n\r\n.hh-webshop-content-inner {\r\n    max-width: 610px;\r\n}\r\n\r\n\r\n\/* EYEBROW *\/\r\n\r\n.hh-webshop-eyebrow {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 14px;\r\n\r\n    margin-bottom: 24px;\r\n\r\n    color: var(--hh-gold);\r\n\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n\r\n    letter-spacing: 5px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n.hh-webshop-eyebrow::before {\r\n    content: \"\";\r\n\r\n    width: 42px;\r\n    height: 1px;\r\n\r\n    background: var(--hh-gold);\r\n}\r\n\r\n\r\n\/* TITLE *\/\r\n\r\n.hh-webshop-content h1 {\r\n    margin: 0;\r\n\r\n    font-family: 'Cormorant Garamond', serif;\r\n\r\n    font-size: clamp(62px, 7vw, 116px);\r\n\r\n    font-weight: 500;\r\n\r\n    line-height: .84;\r\n\r\n    letter-spacing: -4px;\r\n}\r\n\r\n.hh-webshop-content h1 em {\r\n    display: block;\r\n\r\n    color: var(--hh-gold-light);\r\n\r\n    font-style: italic;\r\n    font-weight: 400;\r\n}\r\n\r\n\r\n\/* COPY *\/\r\n\r\n.hh-webshop-copy {\r\n    max-width: 520px;\r\n\r\n    margin: 30px 0 0;\r\n\r\n    font-family: 'Cormorant Garamond', serif;\r\n\r\n    color: rgba(243,234,216,.80);\r\n\r\n    font-size: 22px;\r\n\r\n    line-height: 1.5;\r\n}\r\n\r\n\r\n\/* STATUS *\/\r\n\r\n.hh-webshop-status {\r\n    display: inline-flex;\r\n    align-items: center;\r\n\r\n    gap: 12px;\r\n\r\n    margin-top: 31px;\r\n\r\n    padding: 12px 17px;\r\n\r\n    border: 1px solid rgba(211,173,93,.27);\r\n\r\n    background: rgba(5,5,5,.45);\r\n\r\n    backdrop-filter: blur(10px);\r\n    -webkit-backdrop-filter: blur(10px);\r\n\r\n    color: #d6c8ae;\r\n\r\n    font-size: 10px;\r\n\r\n    letter-spacing: 2px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n.hh-webshop-status-dot {\r\n    position: relative;\r\n\r\n    width: 8px;\r\n    height: 8px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: var(--hh-gold);\r\n}\r\n\r\n.hh-webshop-status-dot::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: -5px;\r\n\r\n    border: 1px solid rgba(211,173,93,.32);\r\n\r\n    border-radius: 50%;\r\n\r\n    animation: hhPulse 2.2s ease-out infinite;\r\n}\r\n\r\n@keyframes hhPulse {\r\n\r\n    0% {\r\n        transform: scale(.4);\r\n        opacity: .9;\r\n    }\r\n\r\n    100% {\r\n        transform: scale(1.5);\r\n        opacity: 0;\r\n    }\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   BELOW HERO\r\n============================================================ *\/\r\n\r\n.hh-webshop-bottom {\r\n    position: relative;\r\n\r\n    padding: 92px 0 105px;\r\n\r\n    background:\r\n\r\n        radial-gradient(\r\n            circle at 50% 0%,\r\n            rgba(211,173,93,.045),\r\n            transparent 34%\r\n        ),\r\n\r\n        #050505;\r\n}\r\n\r\n.hh-webshop-bottom-inner {\r\n    width: min(1120px, calc(100% - 64px));\r\n\r\n    margin: 0 auto;\r\n\r\n    text-align: center;\r\n}\r\n\r\n\r\n\/* SMALL LINE *\/\r\n\r\n.hh-webshop-mini {\r\n    color: var(--hh-gold);\r\n\r\n    font-size: 9px;\r\n    font-weight: 600;\r\n\r\n    letter-spacing: 5px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* BOTTOM TITLE *\/\r\n\r\n.hh-webshop-bottom h2 {\r\n    max-width: 850px;\r\n\r\n    margin: 18px auto 0;\r\n\r\n    font-family: 'Cormorant Garamond', serif;\r\n\r\n    font-size: clamp(42px, 5vw, 68px);\r\n\r\n    font-weight: 500;\r\n\r\n    line-height: 1;\r\n\r\n    color: var(--hh-cream);\r\n}\r\n\r\n.hh-webshop-bottom h2 em {\r\n    color: var(--hh-gold-light);\r\n\r\n    font-style: italic;\r\n\r\n    font-weight: 400;\r\n}\r\n\r\n\r\n\/* BOTTOM COPY *\/\r\n\r\n.hh-webshop-bottom p {\r\n    max-width: 660px;\r\n\r\n    margin: 26px auto 0;\r\n\r\n    color: var(--hh-muted);\r\n\r\n    font-size: 14px;\r\n\r\n    line-height: 1.9;\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   THREE LITTLE CARDS\r\n============================================================ *\/\r\n\r\n.hh-webshop-progress {\r\n    display: grid;\r\n\r\n    grid-template-columns: repeat(3, 1fr);\r\n\r\n    max-width: 900px;\r\n\r\n    margin: 58px auto 0;\r\n\r\n    border-top: 1px solid var(--hh-border);\r\n    border-bottom: 1px solid var(--hh-border);\r\n}\r\n\r\n.hh-progress-item {\r\n    position: relative;\r\n\r\n    padding: 32px 25px;\r\n\r\n    text-align: center;\r\n}\r\n\r\n.hh-progress-item:not(:last-child)::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    top: 25%;\r\n\r\n    right: 0;\r\n\r\n    width: 1px;\r\n    height: 50%;\r\n\r\n    background: var(--hh-border);\r\n}\r\n\r\n.hh-progress-number {\r\n    font-family: 'Cormorant Garamond', serif;\r\n\r\n    color: var(--hh-gold);\r\n\r\n    font-size: 34px;\r\n\r\n    line-height: 1;\r\n}\r\n\r\n.hh-progress-title {\r\n    margin-top: 10px;\r\n\r\n    color: #ded5c6;\r\n\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n\r\n    letter-spacing: 2px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n.hh-progress-text {\r\n    margin-top: 10px;\r\n\r\n    color: #716b62;\r\n\r\n    font-size: 11px;\r\n\r\n    line-height: 1.6;\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   CRINGE NOTE\r\n============================================================ *\/\r\n\r\n.hh-webshop-note {\r\n    max-width: 650px;\r\n\r\n    margin: 54px auto 0;\r\n\r\n    padding: 28px 30px;\r\n\r\n    border: 1px solid rgba(211,173,93,.16);\r\n\r\n    background: rgba(211,173,93,.02);\r\n}\r\n\r\n.hh-webshop-note p {\r\n    margin: 0;\r\n\r\n    font-family: 'Cormorant Garamond', serif;\r\n\r\n    color: #c8bba4;\r\n\r\n    font-size: 22px;\r\n\r\n    font-style: italic;\r\n\r\n    line-height: 1.4;\r\n}\r\n\r\n.hh-webshop-note span {\r\n    display: block;\r\n\r\n    margin-top: 13px;\r\n\r\n    color: var(--hh-gold);\r\n\r\n    font-size: 8px;\r\n\r\n    letter-spacing: 3px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   REVEALS\r\n============================================================ *\/\r\n\r\n.hh-reveal {\r\n    opacity: 0;\r\n\r\n    transform: translateY(24px);\r\n\r\n    transition:\r\n        opacity .8s cubic-bezier(.2,.75,.25,1),\r\n        transform .8s cubic-bezier(.2,.75,.25,1);\r\n}\r\n\r\n.hh-reveal.visible {\r\n    opacity: 1;\r\n\r\n    transform: translateY(0);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   TABLET\r\n============================================================ *\/\r\n\r\n@media (max-width: 1050px) {\r\n\r\n    .hh-header-inner {\r\n        width: calc(100% - 38px);\r\n    }\r\n\r\n    .hh-mobile-toggle {\r\n        display: flex;\r\n\r\n        z-index: 10002;\r\n    }\r\n\r\n    .hh-nav {\r\n        position: fixed;\r\n\r\n        inset: 0;\r\n\r\n        display: flex;\r\n\r\n        flex-direction: column;\r\n\r\n        justify-content: center;\r\n\r\n        gap: 26px;\r\n\r\n        background: rgba(5,5,5,.985);\r\n\r\n        opacity: 0;\r\n\r\n        visibility: hidden;\r\n\r\n        pointer-events: none;\r\n\r\n        transition:\r\n            opacity .3s ease,\r\n            visibility .3s ease;\r\n\r\n        z-index: 10001;\r\n    }\r\n\r\n    .hh-nav.open {\r\n        opacity: 1;\r\n\r\n        visibility: visible;\r\n\r\n        pointer-events: auto;\r\n    }\r\n\r\n    .hh-nav a {\r\n        font-family: 'Cormorant Garamond', serif;\r\n\r\n        font-size: 31px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   MOBILE\r\n============================================================ *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    \/* ========================================================\r\n       MOBILE HEADER \u2014 stabil, teljes viewport sz\u00e9less\u00e9g\r\n    ======================================================== *\/\r\n\r\n    .hh-header {\r\n        position: fixed !important;\r\n        top: 0 !important;\r\n        left: 0 !important;\r\n        right: 0 !important;\r\n\r\n        width: 100vw !important;\r\n        max-width: 100vw !important;\r\n        height: 74px;\r\n\r\n        display: flex !important;\r\n        align-items: center;\r\n\r\n        background: rgba(5,5,5,.94);\r\n\r\n        backdrop-filter: blur(16px);\r\n        -webkit-backdrop-filter: blur(16px);\r\n\r\n        border-bottom: 1px solid rgba(211,173,93,.13);\r\n\r\n        z-index: 99999 !important;\r\n    }\r\n\r\n    .hh-header-inner {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n\r\n        margin: 0 !important;\r\n        padding: 0 16px;\r\n\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n\r\n        gap: 12px;\r\n    }\r\n\r\n    .hh-logo {\r\n        min-width: 0;\r\n        gap: 9px;\r\n    }\r\n\r\n    .hh-logo-number {\r\n        font-size: 40px;\r\n    }\r\n\r\n    .hh-logo-main {\r\n        font-size: 18px;\r\n        white-space: nowrap;\r\n    }\r\n\r\n    .hh-logo-sub {\r\n        margin-top: 4px;\r\n\r\n        font-size: 6px;\r\n        letter-spacing: 1.7px;\r\n\r\n        white-space: nowrap;\r\n    }\r\n\r\n    .hh-mobile-toggle {\r\n        display: flex !important;\r\n\r\n        flex: 0 0 44px;\r\n\r\n        width: 44px;\r\n        height: 44px;\r\n\r\n        margin-left: auto;\r\n\r\n        position: relative;\r\n\r\n        z-index: 100001 !important;\r\n    }\r\n\r\n\r\n    \/* ========================================================\r\n       MOBILE MENU \u2014 ne tudjon kics\u00faszni \/ elt\u0171nni\r\n    ======================================================== *\/\r\n\r\n    .hh-nav {\r\n        position: fixed !important;\r\n\r\n        top: 0 !important;\r\n        left: 0 !important;\r\n\r\n        width: 100vw !important;\r\n        height: 100svh !important;\r\n        max-width: 100vw !important;\r\n\r\n        padding: 105px 24px 45px;\r\n\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n        justify-content: center;\r\n\r\n        gap: 18px;\r\n\r\n        overflow-y: auto;\r\n        overflow-x: hidden;\r\n\r\n        background: rgba(5,5,5,.99);\r\n\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        pointer-events: none;\r\n\r\n        z-index: 100000 !important;\r\n    }\r\n\r\n    .hh-nav.open {\r\n        opacity: 1;\r\n        visibility: visible;\r\n        pointer-events: auto;\r\n    }\r\n\r\n    .hh-nav a {\r\n        width: 100%;\r\n\r\n        padding: 5px 0;\r\n\r\n        font-family: 'Cormorant Garamond', serif;\r\n\r\n        font-size: clamp(32px, 10vw, 46px);\r\n        line-height: 1.05;\r\n    }\r\n\r\n\r\n    \/* ========================================================\r\n       MOBILE HERO \u2014 a banner teljes kompoz\u00edci\u00f3ja l\u00e1tsz\u00f3djon\r\n    ======================================================== *\/\r\n\r\n    .hh-webshop-hero {\r\n        width: 100%;\r\n\r\n        aspect-ratio: auto;\r\n\r\n        min-height: 760px;\r\n\r\n        display: flex;\r\n        align-items: flex-end;\r\n\r\n        padding-top: 74px;\r\n\r\n        overflow: hidden;\r\n\r\n        background: #050505;\r\n    }\r\n\r\n    .hh-webshop-image {\r\n        position: absolute;\r\n\r\n        top: 74px;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: auto;\r\n\r\n        width: 100%;\r\n        height: auto;\r\n\r\n        aspect-ratio: 15 \/ 8;\r\n\r\n        overflow: hidden;\r\n\r\n        background: #050505;\r\n    }\r\n\r\n    .hh-webshop-image img {\r\n        width: 100%;\r\n        height: 100%;\r\n\r\n        display: block;\r\n\r\n        object-fit: contain;\r\n        object-position: center center;\r\n\r\n        transform: none !important;\r\n    }\r\n\r\n    .hh-webshop-hero::before {\r\n        z-index: 1;\r\n\r\n        background:\r\n\r\n            linear-gradient(\r\n                to bottom,\r\n                rgba(5,5,5,.02) 0%,\r\n                rgba(5,5,5,.05) 26%,\r\n                rgba(5,5,5,.40) 42%,\r\n                rgba(5,5,5,.92) 58%,\r\n                #050505 72%,\r\n                #050505 100%\r\n            );\r\n    }\r\n\r\n    .hh-webshop-content {\r\n        width: calc(100% - 36px);\r\n\r\n        margin: 0 auto;\r\n\r\n        padding:\r\n            0\r\n            0\r\n            52px;\r\n\r\n        position: relative;\r\n\r\n        z-index: 2;\r\n    }\r\n\r\n    .hh-webshop-content-inner {\r\n        width: 100%;\r\n        max-width: 100%;\r\n    }\r\n\r\n    .hh-webshop-eyebrow {\r\n        margin-bottom: 15px;\r\n\r\n        font-size: 9px;\r\n        letter-spacing: 3px;\r\n    }\r\n\r\n    .hh-webshop-eyebrow::before {\r\n        width: 30px;\r\n    }\r\n\r\n    .hh-webshop-content h1 {\r\n        font-size: clamp(54px, 16vw, 74px);\r\n\r\n        line-height: .87;\r\n\r\n        letter-spacing: -2.5px;\r\n    }\r\n\r\n    .hh-webshop-copy {\r\n        max-width: 340px;\r\n\r\n        margin-top: 22px;\r\n\r\n        font-size: 18px;\r\n        line-height: 1.45;\r\n    }\r\n\r\n    .hh-webshop-status {\r\n        max-width: 100%;\r\n\r\n        margin-top: 24px;\r\n\r\n        padding: 11px 13px;\r\n\r\n        font-size: 8px;\r\n        line-height: 1.45;\r\n\r\n        letter-spacing: 1.3px;\r\n    }\r\n\r\n\r\n    \/* ========================================================\r\n       MOBILE LOWER CONTENT\r\n    ======================================================== *\/\r\n\r\n    .hh-webshop-bottom-inner {\r\n        width: calc(100% - 36px);\r\n    }\r\n\r\n    .hh-webshop-bottom {\r\n        padding: 68px 0 78px;\r\n    }\r\n\r\n    .hh-webshop-bottom h2 {\r\n        font-size: clamp(40px, 12vw, 50px);\r\n\r\n        line-height: .98;\r\n    }\r\n\r\n    .hh-webshop-bottom p {\r\n        font-size: 13px;\r\n        line-height: 1.8;\r\n    }\r\n\r\n    .hh-webshop-progress {\r\n        grid-template-columns: 1fr;\r\n\r\n        margin-top: 42px;\r\n    }\r\n\r\n    .hh-progress-item {\r\n        padding: 26px 15px;\r\n    }\r\n\r\n    .hh-progress-item:not(:last-child)::after {\r\n        top: auto;\r\n        bottom: 0;\r\n\r\n        left: 15%;\r\n        right: auto;\r\n\r\n        width: 70%;\r\n        height: 1px;\r\n    }\r\n\r\n    .hh-webshop-note {\r\n        padding: 24px 20px;\r\n    }\r\n\r\n    .hh-webshop-note p {\r\n        font-size: 20px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   VERY SMALL MOBILE\r\n============================================================ *\/\r\n\r\n@media (max-width: 420px) {\r\n\r\n    .hh-webshop-hero {\r\n        min-height: 735px;\r\n    }\r\n\r\n    .hh-header-inner {\r\n        padding-left: 13px;\r\n        padding-right: 13px;\r\n    }\r\n\r\n    .hh-logo-number {\r\n        font-size: 37px;\r\n    }\r\n\r\n    .hh-logo-main {\r\n        font-size: 16px;\r\n    }\r\n\r\n    .hh-webshop-content {\r\n        width: calc(100% - 30px);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   REDUCED MOTION\r\n============================================================ *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    *,\r\n    *::before,\r\n    *::after {\r\n        scroll-behavior: auto !important;\r\n\r\n        transition-duration: .01ms !important;\r\n\r\n        animation-duration: .01ms !important;\r\n    }\r\n\r\n    .hh-reveal {\r\n        opacity: 1;\r\n\r\n        transform: none;\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ============================================================\r\n   18+ AGE GATE\r\n   Minden egyes webshop-megnyit\u00e1skor \u00fajra megjelenik.\r\n   Nincs cookie, localStorage vagy sessionStorage.\r\n============================================================ *\/\r\n\r\n.hh-age-gate {\r\n    position: fixed;\r\n    inset: 0;\r\n\r\n    z-index: 9999999;\r\n\r\n    width: 100%;\r\n    height: 100dvh;\r\n    min-height: 100svh;\r\n\r\n    padding:\r\n        max(18px, env(safe-area-inset-top))\r\n        max(18px, env(safe-area-inset-right))\r\n        max(18px, env(safe-area-inset-bottom))\r\n        max(18px, env(safe-area-inset-left));\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 50% 22%,\r\n            rgba(211,173,93,.08),\r\n            transparent 32%\r\n        ),\r\n        rgba(3,3,3,.992);\r\n\r\n    backdrop-filter: blur(18px);\r\n    -webkit-backdrop-filter: blur(18px);\r\n\r\n    overscroll-behavior: contain;\r\n}\r\n\r\n.hh-age-gate[hidden] {\r\n    display: none !important;\r\n}\r\n\r\n.hh-age-card {\r\n    width: min(1040px, 100%);\r\n\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr);\r\n\r\n    overflow: hidden;\r\n\r\n    border: 1px solid rgba(211,173,93,.34);\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(255,255,255,.022),\r\n            rgba(255,255,255,0)\r\n        ),\r\n        #080808;\r\n\r\n    box-shadow:\r\n        0 32px 100px rgba(0,0,0,.66);\r\n}\r\n\r\n.hh-age-visual {\r\n    position: relative;\r\n\r\n    min-height: 560px;\r\n\r\n    overflow: hidden;\r\n\r\n    background: #050505;\r\n}\r\n\r\n.hh-age-visual img {\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    display: block;\r\n\r\n    object-fit: cover;\r\n    object-position: 50% center;\r\n}\r\n\r\n.hh-age-visual::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    pointer-events: none;\r\n\r\n    background:\r\n        linear-gradient(\r\n            to right,\r\n            rgba(5,5,5,.02) 0%,\r\n            rgba(5,5,5,.02) 65%,\r\n            rgba(5,5,5,.42) 100%\r\n        ),\r\n        linear-gradient(\r\n            to top,\r\n            rgba(5,5,5,.58) 0%,\r\n            transparent 34%\r\n        );\r\n}\r\n\r\n.hh-age-panel {\r\n    position: relative;\r\n\r\n    min-width: 0;\r\n\r\n    padding:\r\n        clamp(42px, 5vw, 68px)\r\n        clamp(30px, 4vw, 55px);\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n\r\n    text-align: left;\r\n}\r\n\r\n.hh-age-panel::before {\r\n    content: \"76\";\r\n\r\n    position: absolute;\r\n\r\n    top: 22px;\r\n    right: 27px;\r\n\r\n    color: rgba(211,173,93,.13);\r\n\r\n    font-family: 'Cormorant Garamond', serif;\r\n\r\n    font-size: 58px;\r\n    font-weight: 500;\r\n\r\n    line-height: 1;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n.hh-age-kicker {\r\n    margin-bottom: 18px;\r\n\r\n    color: var(--hh-gold);\r\n\r\n    font-family: 'Montserrat', sans-serif;\r\n\r\n    font-size: 9px;\r\n    font-weight: 600;\r\n\r\n    letter-spacing: 4px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n.hh-age-title {\r\n    margin: 0;\r\n\r\n    color: var(--hh-cream);\r\n\r\n    font-family: 'Cormorant Garamond', serif;\r\n\r\n    font-size: clamp(53px, 5vw, 76px);\r\n    font-weight: 500;\r\n\r\n    line-height: .91;\r\n\r\n    letter-spacing: -2px;\r\n}\r\n\r\n.hh-age-title em {\r\n    display: block;\r\n\r\n    color: var(--hh-gold-light);\r\n\r\n    font-style: italic;\r\n    font-weight: 400;\r\n}\r\n\r\n.hh-age-copy {\r\n    max-width: 460px;\r\n\r\n    margin: 25px 0 0;\r\n\r\n    color: rgba(243,234,216,.76);\r\n\r\n    font-family: 'Cormorant Garamond', serif;\r\n\r\n    font-size: 20px;\r\n\r\n    line-height: 1.48;\r\n}\r\n\r\n.hh-age-copy strong {\r\n    color: var(--hh-gold-light);\r\n\r\n    font-weight: 500;\r\n}\r\n\r\n.hh-age-actions {\r\n    margin-top: 31px;\r\n\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n\r\n    gap: 10px;\r\n}\r\n\r\n.hh-age-btn {\r\n    width: 100%;\r\n    min-height: 56px;\r\n\r\n    padding: 13px 17px;\r\n\r\n    border: 1px solid rgba(211,173,93,.42);\r\n\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    font-family: 'Montserrat', sans-serif;\r\n\r\n    font-size: 9px;\r\n    font-weight: 600;\r\n\r\n    letter-spacing: 1.55px;\r\n\r\n    line-height: 1.35;\r\n\r\n    text-align: center;\r\n    text-decoration: none;\r\n    text-transform: uppercase;\r\n\r\n    cursor: pointer;\r\n\r\n    transition:\r\n        transform .25s ease,\r\n        background .25s ease,\r\n        border-color .25s ease,\r\n        color .25s ease;\r\n}\r\n\r\n.hh-age-btn:hover {\r\n    transform: translateY(-2px);\r\n}\r\n\r\n.hh-age-btn-primary {\r\n    border-color: var(--hh-gold);\r\n\r\n    background: var(--hh-gold);\r\n\r\n    color: #090806;\r\n}\r\n\r\n.hh-age-btn-primary:hover {\r\n    border-color: var(--hh-gold-light);\r\n\r\n    background: var(--hh-gold-light);\r\n}\r\n\r\n.hh-age-btn-secondary {\r\n    background: transparent;\r\n\r\n    color: #d9d0c2;\r\n}\r\n\r\n.hh-age-btn-secondary:hover {\r\n    border-color: rgba(239,211,143,.72);\r\n\r\n    background: rgba(211,173,93,.045);\r\n\r\n    color: var(--hh-gold-light);\r\n}\r\n\r\n.hh-age-rejected {\r\n    display: none;\r\n}\r\n\r\n.hh-age-gate.is-rejected .hh-age-question {\r\n    display: none;\r\n}\r\n\r\n.hh-age-gate.is-rejected .hh-age-rejected {\r\n    display: block;\r\n}\r\n\r\n.hh-age-rejected .hh-age-title {\r\n    font-size: clamp(48px, 4.5vw, 68px);\r\n}\r\n\r\n.hh-age-rejected .hh-age-copy {\r\n    margin-top: 22px;\r\n}\r\n\r\n.hh-age-small {\r\n    margin-top: 18px;\r\n\r\n    color: #81796f;\r\n\r\n    font-family: 'Montserrat', sans-serif;\r\n\r\n    font-size: 9px;\r\n\r\n    line-height: 1.65;\r\n\r\n    letter-spacing: .6px;\r\n}\r\n\r\n\r\n\r\n\r\n\/* ============================================================\r\n   18+ AGE GATE \u2014 DESKTOP IMAGE FIX\r\n   Desktopon a teljes eredeti k\u00e9p l\u00e1tszik, v\u00e1g\u00e1s n\u00e9lk\u00fcl.\r\n   Tablet \/ mobil be\u00e1ll\u00edt\u00e1sok v\u00e1ltozatlanok.\r\n============================================================ *\/\r\n\r\n@media (min-width: 901px) {\r\n\r\n    .hh-age-card {\r\n        width: min(1180px, 100%);\r\n\r\n        grid-template-columns:\r\n            minmax(0, 1.25fr)\r\n            minmax(380px, .75fr);\r\n    }\r\n\r\n    .hh-age-visual {\r\n        min-height: 0;\r\n\r\n        aspect-ratio: 4 \/ 3;\r\n    }\r\n\r\n    .hh-age-visual img {\r\n        object-fit: contain;\r\n        object-position: center center;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* TABLET \/ SMALL LAPTOP *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n    .hh-age-gate {\r\n        align-items: flex-start;\r\n    }\r\n\r\n    .hh-age-card {\r\n        width: min(680px, 100%);\r\n\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .hh-age-visual {\r\n        min-height: 0;\r\n\r\n        aspect-ratio: 3 \/ 1.65;\r\n    }\r\n\r\n    .hh-age-visual img {\r\n        object-position: center 34%;\r\n    }\r\n\r\n    .hh-age-visual::after {\r\n        background:\r\n            linear-gradient(\r\n                to bottom,\r\n                transparent 48%,\r\n                rgba(5,5,5,.68) 100%\r\n            );\r\n    }\r\n\r\n    .hh-age-panel {\r\n        padding:\r\n            38px\r\n            clamp(25px, 6vw, 48px)\r\n            42px;\r\n\r\n        text-align: center;\r\n    }\r\n\r\n    .hh-age-copy {\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* MOBILE *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n    .hh-age-gate {\r\n        padding:\r\n            max(10px, env(safe-area-inset-top))\r\n            max(10px, env(safe-area-inset-right))\r\n            max(10px, env(safe-area-inset-bottom))\r\n            max(10px, env(safe-area-inset-left));\r\n    }\r\n\r\n    .hh-age-card {\r\n        width: 100%;\r\n    }\r\n\r\n    .hh-age-visual {\r\n        aspect-ratio: 1.55 \/ 1;\r\n    }\r\n\r\n    .hh-age-visual img {\r\n        object-position: center center;\r\n    }\r\n\r\n    .hh-age-panel {\r\n        padding:\r\n            31px\r\n            20px\r\n            28px;\r\n    }\r\n\r\n    .hh-age-panel::before {\r\n        top: 14px;\r\n        right: 16px;\r\n\r\n        font-size: 42px;\r\n    }\r\n\r\n    .hh-age-kicker {\r\n        margin-bottom: 12px;\r\n\r\n        font-size: 8px;\r\n\r\n        letter-spacing: 3px;\r\n    }\r\n\r\n    .hh-age-title {\r\n        font-size: clamp(43px, 13vw, 58px);\r\n\r\n        line-height: .91;\r\n\r\n        letter-spacing: -1.5px;\r\n    }\r\n\r\n    .hh-age-copy {\r\n        margin-top: 18px;\r\n\r\n        font-size: 17px;\r\n\r\n        line-height: 1.43;\r\n    }\r\n\r\n    .hh-age-actions {\r\n        margin-top: 23px;\r\n    }\r\n\r\n    .hh-age-btn {\r\n        min-height: 52px;\r\n\r\n        padding:\r\n            12px\r\n            11px;\r\n\r\n        font-size: 8px;\r\n\r\n        letter-spacing: 1.15px;\r\n    }\r\n\r\n    .hh-age-small {\r\n        margin-top: 14px;\r\n\r\n        font-size: 8px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* VERY SMALL \/ SHORT PHONES *\/\r\n\r\n@media (max-width: 390px) {\r\n\r\n    .hh-age-visual {\r\n        aspect-ratio: 1.7 \/ 1;\r\n    }\r\n\r\n    .hh-age-panel {\r\n        padding:\r\n            25px\r\n            16px\r\n            22px;\r\n    }\r\n\r\n    .hh-age-title {\r\n        font-size: clamp(39px, 12.2vw, 49px);\r\n    }\r\n\r\n    .hh-age-copy {\r\n        font-size: 16px;\r\n    }\r\n\r\n    .hh-age-btn {\r\n        min-height: 49px;\r\n\r\n        font-size: 7.6px;\r\n\r\n        letter-spacing: .9px;\r\n    }\r\n\r\n}\r\n\r\n@media (max-height: 650px) and (orientation: landscape) {\r\n\r\n    .hh-age-gate {\r\n        align-items: flex-start;\r\n    }\r\n\r\n    .hh-age-card {\r\n        grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr);\r\n    }\r\n\r\n    .hh-age-visual {\r\n        min-height: 520px;\r\n\r\n        aspect-ratio: auto;\r\n    }\r\n\r\n    .hh-age-panel {\r\n        padding:\r\n            30px\r\n            32px;\r\n    }\r\n\r\n    .hh-age-title {\r\n        font-size: 48px;\r\n    }\r\n\r\n    .hh-age-copy {\r\n        margin-top: 17px;\r\n\r\n        font-size: 17px;\r\n    }\r\n\r\n    .hh-age-actions {\r\n        margin-top: 20px;\r\n    }\r\n\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n\r\n\r\n\r\n\r\n<!-- ==========================================================\r\n     18+ AGE GATE\r\n     Minden oldalbet\u00f6lt\u00e9sn\u00e9l \u00fajra megjelenik.\r\n=========================================================== -->\r\n\r\n<div\r\n    class=\"hh-age-gate\"\r\n    id=\"hhAgeGate\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    aria-labelledby=\"hhAgeTitle\"\r\n>\r\n\r\n    <div class=\"hh-age-card\">\r\n\r\n        <div class=\"hh-age-visual\">\r\n\r\n            <img decoding=\"async\"\r\n                src=\"https:\/\/hetvenhat.hu\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-29-2026-09_33_05-AM.png\"\r\n                alt=\"Zsolt \u00e9s Feri stopot mutatnak\"\r\n            >\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"hh-age-panel\">\r\n\r\n\r\n            <!-- ELS\u0150 K\u00c9PERNY\u0150 -->\r\n\r\n            <div class=\"hh-age-question\">\r\n\r\n                <div class=\"hh-age-kicker\">\r\n                    Korhat\u00e1ros tartalom\r\n                <\/div>\r\n\r\n                <h2\r\n                    class=\"hh-age-title\"\r\n                    id=\"hhAgeTitle\"\r\n                >\r\n                    Elm\u00falt\u00e1l\r\n                    <em>18?<\/em>\r\n                <\/h2>\r\n\r\n                <p class=\"hh-age-copy\">\r\n                    Zsolt \u00e9s Feri szeretn\u00e9k ellen\u0151rizni,\r\n                    hogy jogilag m\u00e1r hozhatsz\r\n                    <strong>rossz d\u00f6nt\u00e9seket.<\/strong>\r\n                <\/p>\r\n\r\n                <div class=\"hh-age-actions\">\r\n\r\n                    <button\r\n                        class=\"hh-age-btn hh-age-btn-primary\"\r\n                        id=\"hhAgeYes\"\r\n                        type=\"button\"\r\n                    >\r\n                        Igen, sajnos feln\u0151tt vagyok\r\n                    <\/button>\r\n\r\n                    <button\r\n                        class=\"hh-age-btn hh-age-btn-secondary\"\r\n                        id=\"hhAgeNo\"\r\n                        type=\"button\"\r\n                    >\r\n                        Nem, m\u00e9g van rem\u00e9ny\r\n                    <\/button>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- NEM V\u00c1LASZ -->\r\n\r\n            <div\r\n                class=\"hh-age-rejected\"\r\n                aria-live=\"polite\"\r\n            >\r\n\r\n                <div class=\"hh-age-kicker\">\r\n                    Ezt megbesz\u00e9lt\u00fck\r\n                <\/div>\r\n\r\n                <h2 class=\"hh-age-title\">\r\n                    Na, akkor\r\n                    <em>STOP.<\/em>\r\n                <\/h2>\r\n\r\n                <p class=\"hh-age-copy\">\r\n                    Zsolt \u00e9s Feri ezt meglep\u0151en komolyan veszik.\r\n                    <strong>Bort most nem mutatunk.<\/strong>\r\n                <\/p>\r\n\r\n                <p class=\"hh-age-small\">\r\n                    Menj, igy\u00e1l egy kaka\u00f3t.\r\n                    A bor megv\u00e1r \u2014 ez konkr\u00e9tan az egyik f\u0151 tulajdons\u00e1ga.\r\n                <\/p>\r\n\r\n                <div class=\"hh-age-actions\">\r\n\r\n                    <a\r\n                        class=\"hh-age-btn hh-age-btn-primary\"\r\n                        href=\"https:\/\/hetvenhat.hu\/\"\r\n                    >\r\n                        Vissza a f\u0151oldalra\r\n                    <\/a>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- ==========================================================\r\n     HEADER\r\n=========================================================== -->\r\n\r\n<header class=\"hh-header\" id=\"hhHeader\">\r\n\r\n    <div class=\"hh-header-inner\">\r\n\r\n\r\n        <a class=\"hh-logo\" href=\"https:\/\/hetvenhat.hu\/\">\r\n\r\n            <span class=\"hh-logo-number\">\r\n                76\r\n            <\/span>\r\n\r\n\r\n            <span class=\"hh-logo-text\">\r\n\r\n                <span class=\"hh-logo-main\">\r\n                    HETVENHAT\r\n                <\/span>\r\n\r\n                <span class=\"hh-logo-sub\">\r\n                    Wine Bar &amp; Webshop\r\n                <\/span>\r\n\r\n            <\/span>\r\n\r\n        <\/a>\r\n\r\n\r\n\r\n        <nav class=\"hh-nav\" id=\"hhNav\">\r\n\r\n            <a href=\"https:\/\/hetvenhat.hu\/\">\r\n                F\u0151oldal\r\n            <\/a>\r\n\r\n            <a\r\n                href=\"https:\/\/hetvenhat.hu\/webshop-2\/\"\r\n                class=\"active\"\r\n            >\r\n                Webshop\r\n            <\/a>\r\n\r\n            <a href=\"https:\/\/hetvenhat.hu\/kostolok\/\">\r\n                K\u00f3stol\u00f3k\r\n            <\/a>\r\n\r\n            <a href=\"https:\/\/hetvenhat.hu\/boraszaink\/\">\r\n                Bor\u00e1szaink\r\n            <\/a>\r\n\r\n            <a href=\"https:\/\/hetvenhat.hu\/hirek-2\/\">\r\n                H\u00edrek\r\n            <\/a>\r\n\r\n            <a href=\"https:\/\/hetvenhat.hu\/viszonteladoknak-2\/\">\r\n                Viszontelad\u00f3knak\r\n            <\/a>\r\n\r\n            <a href=\"https:\/\/hetvenhat.hu\/kapcsolat-2\/\">\r\n                Kapcsolat\r\n            <\/a>\r\n\r\n        <\/nav>\r\n\r\n\r\n\r\n        <button\r\n            class=\"hh-mobile-toggle\"\r\n            id=\"hhMobileToggle\"\r\n            type=\"button\"\r\n            aria-label=\"Men\u00fc megnyit\u00e1sa\"\r\n            aria-expanded=\"false\"\r\n        >\r\n\r\n            <span><\/span>\r\n\r\n        <\/button>\r\n\r\n    <\/div>\r\n\r\n<\/header>\r\n\r\n\r\n\r\n<!-- ==========================================================\r\n     HERO\r\n=========================================================== -->\r\n\r\n<section class=\"hh-webshop-hero\">\r\n\r\n\r\n    <div class=\"hh-webshop-image\">\r\n\r\n        <img decoding=\"async\"\r\n            src=\"https:\/\/hetvenhat.hu\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-28-2026-01_40_07-PM-1.png\"\r\n            alt=\"\"\r\n        >\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <div class=\"hh-webshop-content\">\r\n\r\n\r\n        <div class=\"hh-webshop-content-inner\">\r\n\r\n\r\n            <div class=\"hh-webshop-eyebrow\">\r\n\r\n                Webshop\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <h1>\r\n\r\n                M\u00e9g<br>\r\n\r\n                <em>pakolunk.<\/em>\r\n\r\n            <\/h1>\r\n\r\n\r\n\r\n            <p class=\"hh-webshop-copy\">\r\n\r\n                A pince tele van borral.\r\n                A webshop m\u00e9g kev\u00e9sb\u00e9.\r\n                Dolgozunk az \u00fcgy\u00f6n.\r\n\r\n            <\/p>\r\n\r\n\r\n\r\n            <div class=\"hh-webshop-status\">\r\n\r\n                <span class=\"hh-webshop-status-dot\"><\/span>\r\n\r\n                Webshop felt\u00f6lt\u00e9se folyamatban\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<!-- ==========================================================\r\n     BELOW HERO\r\n=========================================================== -->\r\n\r\n<section class=\"hh-webshop-bottom\">\r\n\r\n\r\n    <div class=\"hh-webshop-bottom-inner hh-reveal\">\r\n\r\n\r\n        <div class=\"hh-webshop-mini\">\r\n\r\n            Hamarosan\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <h2>\r\n\r\n            Feri hozza a bort.<br>\r\n\r\n            Zsolt \u00e1ll\u00edt\u00f3lag\r\n\r\n            <em>rendszerezi.<\/em>\r\n\r\n        <\/h2>\r\n\r\n\r\n\r\n        <p>\r\n\r\n            V\u00e1logatott borokkal t\u00f6ltj\u00fck fel a webshopot,\r\n            mik\u00f6zben megpr\u00f3b\u00e1ljuk eld\u00f6nteni,\r\n            hogy egy bor technikailag mennyivel lesz jobb att\u00f3l,\r\n            ha legal\u00e1bb h\u00fasz percig komoly arccal n\u00e9zz\u00fck.\r\n\r\n        <\/p>\r\n\r\n\r\n\r\n        <!-- THREE ITEMS -->\r\n\r\n        <div class=\"hh-webshop-progress\">\r\n\r\n\r\n            <div class=\"hh-progress-item\">\r\n\r\n                <div class=\"hh-progress-number\">\r\n                    01\r\n                <\/div>\r\n\r\n                <div class=\"hh-progress-title\">\r\n                    Borok \u00e9rkeznek\r\n                <\/div>\r\n\r\n                <div class=\"hh-progress-text\">\r\n                    Ez a k\u00f6nnyebb r\u00e9sze.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <div class=\"hh-progress-item\">\r\n\r\n                <div class=\"hh-progress-number\">\r\n                    02\r\n                <\/div>\r\n\r\n                <div class=\"hh-progress-title\">\r\n                    Fot\u00f3zzuk \u0151ket\r\n                <\/div>\r\n\r\n                <div class=\"hh-progress-text\">\r\n                    Indokolatlanul komoly megvil\u00e1g\u00edt\u00e1sban.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <div class=\"hh-progress-item\">\r\n\r\n                <div class=\"hh-progress-number\">\r\n                    03\r\n                <\/div>\r\n\r\n                <div class=\"hh-progress-title\">\r\n                    Felt\u00f6ltj\u00fck\r\n                <\/div>\r\n\r\n                <div class=\"hh-progress-text\">\r\n                    Amint siker\u00fcl nem meginni a k\u00e9szletet.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <div class=\"hh-webshop-note\">\r\n\r\n            <p>\r\n\r\n                \u201eA webshop akkor nyit ki,\r\n                amikor a borok k\u00e9szen \u00e1llnak.\r\n                Vagy mi. Amelyik el\u0151bb megt\u00f6rt\u00e9nik.\u201d\r\n\r\n            <\/p>\r\n\r\n            <span>\r\n                Hetvenhat logisztikai oszt\u00e1ly\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n(() => {\r\n\r\n    \/* ========================================================\r\n       18+ AGE GATE\r\n       Sz\u00e1nd\u00e9kosan NEM t\u00e1roljuk a v\u00e1laszt.\r\n       Minden webshop-megnyit\u00e1skor \u00fajra megk\u00e9rdezi.\r\n    ======================================================== *\/\r\n\r\n    const ageGate =\r\n        document.getElementById('hhAgeGate');\r\n\r\n    const ageYes =\r\n        document.getElementById('hhAgeYes');\r\n\r\n    const ageNo =\r\n        document.getElementById('hhAgeNo');\r\n\r\n\r\n    if (ageGate && ageYes && ageNo) {\r\n\r\n        const previousBodyOverflow =\r\n            document.body.style.overflow;\r\n\r\n        const previousHtmlOverflow =\r\n            document.documentElement.style.overflow;\r\n\r\n\r\n        document.body.style.overflow = 'hidden';\r\n        document.documentElement.style.overflow = 'hidden';\r\n\r\n\r\n        ageYes.addEventListener(\r\n            'click',\r\n            () => {\r\n\r\n                ageGate.hidden = true;\r\n\r\n                document.body.style.overflow =\r\n                    previousBodyOverflow;\r\n\r\n                document.documentElement.style.overflow =\r\n                    previousHtmlOverflow;\r\n\r\n            }\r\n        );\r\n\r\n\r\n        ageNo.addEventListener(\r\n            'click',\r\n            () => {\r\n\r\n                ageGate.classList.add(\r\n                    'is-rejected'\r\n                );\r\n\r\n                \/*\r\n                   Nem z\u00e1rjuk be a gate-et,\r\n                   \u00edgy a webshop tov\u00e1bbra sem l\u00e1that\u00f3 \/ haszn\u00e1lhat\u00f3.\r\n                *\/\r\n\r\n                ageGate.scrollTop = 0;\r\n\r\n            }\r\n        );\r\n\r\n\r\n        \/*\r\n           ESC se ker\u00fclje meg a korhat\u00e1r-k\u00e9rd\u00e9st.\r\n        *\/\r\n\r\n        document.addEventListener(\r\n            'keydown',\r\n            event => {\r\n\r\n                if (\r\n                    event.key === 'Escape' &&\r\n                    !ageGate.hidden\r\n                ) {\r\n                    event.preventDefault();\r\n                }\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* ========================================================\r\n       HEADER\r\n    ======================================================== *\/\r\n\r\n    const header =\r\n        document.getElementById('hhHeader');\r\n\r\n\r\n    const updateHeader = () => {\r\n\r\n        if (window.scrollY > 35) {\r\n\r\n            header.classList.add('scrolled');\r\n\r\n        } else {\r\n\r\n            header.classList.remove('scrolled');\r\n\r\n        }\r\n\r\n    };\r\n\r\n\r\n    updateHeader();\r\n\r\n\r\n    window.addEventListener(\r\n        'scroll',\r\n        updateHeader,\r\n        {\r\n            passive: true\r\n        }\r\n    );\r\n\r\n\r\n\r\n    \/* ========================================================\r\n       MOBILE MENU\r\n    ======================================================== *\/\r\n\r\n    const mobileToggle =\r\n        document.getElementById(\r\n            'hhMobileToggle'\r\n        );\r\n\r\n    const nav =\r\n        document.getElementById(\r\n            'hhNav'\r\n        );\r\n\r\n\r\n    mobileToggle.addEventListener(\r\n        'click',\r\n        () => {\r\n\r\n            const opened =\r\n                nav.classList.toggle('open');\r\n\r\n\r\n            mobileToggle.setAttribute(\r\n                'aria-expanded',\r\n                opened ? 'true' : 'false'\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n\r\n    nav\r\n        .querySelectorAll('a')\r\n        .forEach(link => {\r\n\r\n            link.addEventListener(\r\n                'click',\r\n                () => {\r\n\r\n                    nav.classList.remove('open');\r\n\r\n                    mobileToggle.setAttribute(\r\n                        'aria-expanded',\r\n                        'false'\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n        });\r\n\r\n\r\n\r\n    \/* ========================================================\r\n       SCROLL REVEAL\r\n    ======================================================== *\/\r\n\r\n    const reveals =\r\n        document.querySelectorAll(\r\n            '.hh-reveal'\r\n        );\r\n\r\n\r\n    if (\r\n        'IntersectionObserver'\r\n        in window\r\n    ) {\r\n\r\n        const observer =\r\n            new IntersectionObserver(\r\n\r\n                entries => {\r\n\r\n                    entries.forEach(\r\n                        entry => {\r\n\r\n                            if (\r\n                                entry.isIntersecting\r\n                            ) {\r\n\r\n                                entry.target\r\n                                    .classList\r\n                                    .add('visible');\r\n\r\n\r\n                                observer.unobserve(\r\n                                    entry.target\r\n                                );\r\n\r\n                            }\r\n\r\n                        }\r\n                    );\r\n\r\n                },\r\n\r\n                {\r\n                    threshold: .12\r\n                }\r\n\r\n            );\r\n\r\n\r\n        reveals.forEach(\r\n            element => {\r\n\r\n                observer.observe(\r\n                    element\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n\r\n    } else {\r\n\r\n\r\n        reveals.forEach(\r\n            element => {\r\n\r\n                element.classList.add(\r\n                    'visible'\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n})();\r\n<\/script>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Korhat\u00e1ros tartalom Elm\u00falt\u00e1l 18? Zsolt \u00e9s Feri szeretn\u00e9k ellen\u0151rizni, hogy jogilag m\u00e1r hozhatsz rossz d\u00f6nt\u00e9seket. Igen, sajnos feln\u0151tt vagyok Nem, m\u00e9g van rem\u00e9ny Ezt megbesz\u00e9lt\u00fck Na, akkor STOP. Zsolt \u00e9s Feri ezt meglep\u0151en komolyan veszik. Bort most nem mutatunk. Menj, igy\u00e1l egy kaka\u00f3t. A bor megv\u00e1r \u2014 ez konkr\u00e9tan az egyik f\u0151 tulajdons\u00e1ga. Vissza a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-112","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/pages\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":19,"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/pages\/112\/revisions"}],"predecessor-version":[{"id":244,"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/pages\/112\/revisions\/244"}],"wp:attachment":[{"href":"https:\/\/hetvenhat.hu\/en\/wp-json\/wp\/v2\/media?parent=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}