/* =============================================================
   CANVAS - onallo arculat
   Vilagos, vidam, szines. Az alap style.css UTAN toltodik be.
   Eltavolitashoz eleg a head.php-bol kivenni ezt az egy sort.
   ============================================================= */

:root {
    --c-ink:       #1d2433;
    --c-ink-soft:  #566074;
    --c-muted:     #8a93a5;
    --c-line:      #e6e9f0;
    --c-bg:        #ffffff;
    --c-bg-soft:   #f7f8fc;
    --c-bg-tint:   #fff4ef;

    --c-coral:     #ff6b5b;
    --c-coral-dk:  #e8513f;
    --c-sun:       #ffb23f;
    --c-teal:      #16c2a3;

    /* A regi valtozok felulirasa, hogy a meglevo elemek is atszinezodjenek */
    --accent:      #ff6b5b;
    --accent-dark: #e8513f;
    --text:        #1d2433;
    --muted:       #8a93a5;
    --border:      #e6e9f0;
    --off-white:   #f7f8fc;
    --black:       #1d2433;
    --radius:      14px;

    --font-sans:  "Outfit", "Inter", system-ui, -apple-system, sans-serif;
    --font-serif: "Outfit", "Inter", system-ui, sans-serif;

    --shadow-sm: 0 2px 10px rgba(29,36,51,.06);
    --shadow-md: 0 10px 30px rgba(29,36,51,.10);
    --shadow-lg: 0 24px 60px rgba(29,36,51,.16);
}

html, body { background: var(--c-bg) !important; }
body { color: var(--c-ink); font-size: 16px; letter-spacing: -.01em; }
h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -.03em; color: var(--c-ink); }

/* ── Fejlec ──────────────────────────────────────────────── */
.site-header {
    background: rgba(255,255,255,.88) !important;
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(230,233,240,.8) !important;
    box-shadow: none !important;
}
.site-header.scrolled { box-shadow: 0 4px 24px rgba(29,36,51,.07) !important; }
.logo-text {
    font-family: var(--font-sans) !important; font-weight: 800 !important;
    letter-spacing: -.04em !important; font-size: 1.45rem !important; color: var(--c-ink) !important;
}
.logo-text span { color: var(--c-coral) !important; }

.site-nav a {
    font-weight: 500; font-size: 15px; color: var(--c-ink-soft) !important;
    border-radius: 100px; padding: 8px 15px !important; background: none !important;
    transition: background .22s, color .22s, transform .22s;
}
.site-nav a:hover { background: var(--c-bg-tint) !important; color: var(--c-coral) !important; transform: translateY(-1px); }
.site-nav a.active { background: var(--c-ink) !important; color: #fff !important; }

.lang-switcher a { color: var(--c-muted) !important; font-weight: 600; font-size: 13px; }
.lang-switcher a.active { color: var(--c-coral) !important; }
.cart-btn { color: var(--c-ink) !important; }
.cart-badge { background: var(--c-coral) !important; }

/* ── Gombok ──────────────────────────────────────────────── */
.btn-submit, .btn-gold, .art-card-atc {
    background: var(--c-ink) !important; color: #fff !important;
    border: none !important; border-radius: 100px !important;
    font-weight: 600 !important; letter-spacing: 0 !important;
    text-transform: none !important; font-size: 15px !important;
    box-shadow: var(--shadow-sm);
    transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, background .22s;
}
.btn-submit:hover, .btn-gold:hover, .art-card-atc:hover {
    background: var(--c-coral) !important; transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255,107,91,.32);
}
.btn-etsy-large, .btn-etsy-footer { border-radius: 100px !important; }

/* ── Hero slider ─────────────────────────────────────────────
   Az eredeti arculat eros fekete atfedest tett a kepre. A vilagos
   temahoz lagyabb, oldalrol indulo atmenetet hasznalunk, es a szoveg
   egy jol olvashato "kartyan" ul. */
.hero { background: var(--c-bg-soft) !important; }
.hero-slider { border-radius: 0 !important; }

.hero-slide-overlay {
    background: linear-gradient(100deg,
        rgba(18,22,34,.74) 0%,
        rgba(18,22,34,.52) 38%,
        rgba(18,22,34,.18) 66%,
        rgba(18,22,34,.04) 100%) !important;
}

.hero-slide-content { padding: 0 56px !important; }

.slide-tag {
    display: inline-block;
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 7px 16px !important;
    font-size: 11px !important; letter-spacing: .16em !important;
    text-transform: uppercase; font-weight: 600 !important;
    backdrop-filter: blur(6px);
}

.slide-title, .hero-slider h1, .hero-slider h2 {
    font-family: var(--font-sans) !important; font-weight: 800 !important;
    letter-spacing: -.045em !important; line-height: 1.03 !important;
    color: #fff !important;
    font-size: clamp(2.1rem, 5vw, 3.6rem) !important;
    text-shadow: 0 3px 28px rgba(0,0,0,.42);
    max-width: 17ch; margin: 16px 0 14px !important;
}
.slide-sub, .hero-slider p {
    color: rgba(255,255,255,.92) !important;
    text-shadow: 0 2px 16px rgba(0,0,0,.4);
    max-width: 46ch; font-size: 17px !important; line-height: 1.6 !important;
    margin-bottom: 26px !important;
}
.slide-btn { margin-top: 4px; }

/* Nyilak es pontok */
.slider-btn {
    background: rgba(255,255,255,.92) !important;
    border: none !important; color: var(--c-ink) !important;
    width: 46px !important; height: 46px !important;
    border-radius: 100px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    transition: transform .22s cubic-bezier(.2,.8,.3,1), background .22s;
}
.slider-btn:hover { background: #fff !important; transform: scale(1.09); }
.slider-dot {
    width: 9px !important; height: 9px !important;
    background: rgba(255,255,255,.45) !important;
    border: none !important; border-radius: 100px !important;
    transition: width .3s cubic-bezier(.2,.8,.3,1), background .3s;
}
.slider-dot.active { background: #fff !important; width: 26px !important; }

/* A hero alatti sima atmenet a kovetkezo szekcioba */
.hero-slider::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92));
    pointer-events: none; z-index: 4;
}

.hero-title, .hero h1 {
    font-family: var(--font-sans) !important; font-weight: 800 !important;
    letter-spacing: -.045em !important; line-height: 1.02 !important;
}
.hero-sub { color: var(--c-ink-soft) !important; font-weight: 400; }

@media (max-width: 860px) {
    .hero-slide-content { padding: 0 24px !important; }
    .slide-title { max-width: 100%; }
    .slide-sub { font-size: 15px !important; }
    .slider-btn { width: 38px !important; height: 38px !important; }
}

/* ── Termekkartyak: 3D-s beuszas gorgetesre ──────────────── */
.art-card-wrap {
    opacity: 0;
    transform: perspective(1100px) translateY(56px) rotateX(9deg) scale(.95);
    transition: opacity .72s cubic-bezier(.16,.84,.3,1), transform .72s cubic-bezier(.16,.84,.3,1);
    will-change: opacity, transform;
}
.art-card-wrap.in-view { opacity: 1; transform: perspective(1100px) translateY(0) rotateX(0) scale(1); }

/* Lepcsozetes megjelenes - minden kartya kicsit kesobb */
.art-card-wrap.in-view:nth-child(4n+2) { transition-delay: .07s; }
.art-card-wrap.in-view:nth-child(4n+3) { transition-delay: .14s; }
.art-card-wrap.in-view:nth-child(4n+4) { transition-delay: .21s; }

.art-card {
    border-radius: var(--radius) !important;
    border: 1px solid var(--c-line) !important;
    background: #fff !important;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
}
.art-card-wrap:hover .art-card {
    transform: translateY(-7px) scale(1.012);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255,107,91,.3) !important;
}
.art-card img { transition: transform .5s cubic-bezier(.2,.8,.3,1); }
.art-card-wrap:hover .art-card img { transform: scale(1.055); }

.art-card-title { font-weight: 650 !important; letter-spacing: -.02em !important; color: var(--c-ink) !important; }
.art-card-price { color: var(--c-coral) !important; font-weight: 700 !important; }
.art-card-cat { color: var(--c-muted) !important; text-transform: uppercase; font-size: 11px; letter-spacing: .12em; }

/* Mozgascsokkentes beallitasnal nincs animacio */
@media (prefers-reduced-motion: reduce) {
    .art-card-wrap { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Lapozo ──────────────────────────────────────────────── */
.pager {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; flex-wrap: wrap; margin: 52px auto 12px;
}
.pager a, .pager span {
    min-width: 42px; height: 42px; padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 100px; font-size: 15px; font-weight: 600;
    text-decoration: none; border: 1px solid var(--c-line);
    background: #fff; color: var(--c-ink-soft);
    transition: all .22s cubic-bezier(.2,.8,.3,1);
}
.pager a:hover { border-color: var(--c-coral); color: var(--c-coral); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255,107,91,.18); }
.pager .current { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.pager .gap { border: none; background: none; color: var(--c-muted); min-width: 26px; padding: 0; }
.pager .disabled { opacity: .35; pointer-events: none; }
.pager-info { text-align: center; font-size: 13px; color: var(--c-muted); margin-top: 10px; }

/* ── Szekciok ────────────────────────────────────────────── */
.section-title, .gallery-head h1 {
    font-family: var(--font-sans) !important; font-weight: 800 !important;
    letter-spacing: -.04em !important; color: var(--c-ink) !important;
}
.section-sub, .gallery-head p { color: var(--c-ink-soft) !important; }

.cat-filter a, .gallery-filter a {
    border-radius: 100px !important; border: 1px solid var(--c-line) !important;
    color: var(--c-ink-soft) !important; font-weight: 500 !important;
    background: #fff !important; transition: all .22s;
}
.cat-filter a:hover, .gallery-filter a:hover { border-color: var(--c-coral) !important; color: var(--c-coral) !important; }
.cat-filter a.active, .gallery-filter a.active { background: var(--c-ink) !important; color: #fff !important; border-color: var(--c-ink) !important; }

/* ── Lablec ──────────────────────────────────────────────── */
.site-footer { background: var(--c-ink) !important; color: #c9d0de !important; }
.site-footer h4, .footer-col h4 { color: #fff !important; letter-spacing: .1em; font-size: 11px; }
.site-footer a { color: #c9d0de !important; transition: color .2s; }
.site-footer a:hover { color: var(--c-coral) !important; }
.footer-logo, .site-footer .logo-text { color: #fff !important; }
.footer-bottom { border-top-color: rgba(255,255,255,.1) !important; color: #8a93a5 !important; }

/* ── Bizalmi sav ─────────────────────────────────────────────
   FONTOS: eredetileg sotet hatteru volt feher szoveggel. A vilagos
   hatterhez a szoveget IS at kell szinezni, kulonben olvashatatlan. */
.usp-bar, .trust-bar { background: var(--c-bg-tint) !important; border: none !important; }
.usp-item svg, .trust-item svg, .trust-icon-wrap { color: var(--c-coral) !important; }
.trust-title { color: var(--c-ink) !important; font-weight: 650 !important; }
.trust-sub   { color: var(--c-ink-soft) !important; }
.trust-divider { background: rgba(29,36,51,.1) !important; border-color: rgba(29,36,51,.1) !important; }

/* ── Kategoria kartyak ───────────────────────────────────── */
.cat-card-title, .cat-tile-title { color: #fff !important; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.cat-card::after, .cat-tile::after {
    background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.68) 100%) !important;
}
.cat-card, .cat-tile { border-radius: var(--radius) !important; overflow: hidden; }

/* ── Apro finomsagok ─────────────────────────────────────── */
.preorder-badge { background: var(--c-sun) !important; color: var(--c-ink) !important; border-radius: 100px !important; }
.art-card-soldout { border-radius: 100px !important; }
.cart-toast { border-radius: 100px !important; }
::selection { background: rgba(255,107,91,.22); }

/* ── Kontraszt-biztositas ────────────────────────────────────
   Az eredeti arculat sok helyen sotet hatteret feltetelezett feher
   szoveggel. Ahol a hatter most vilagos lett, ott a szoveget is
   sotetre valtjuk, hogy minden olvashato maradjon. */
/* A hero-slideron a kep SOTET atfedest kap, ott a feher szoveg a helyes
   (lasd fentebb). Ez a szabaly csak a kep NELKULI, vilagos hero-ra vonatkozik. */
.page-hero .hero-title, .hero:not(.hero-slider) .hero-title { color: var(--c-ink) !important; }
.page-hero .hero-sub,   .hero:not(.hero-slider) .hero-sub   { color: var(--c-ink-soft) !important; }

.btn-hero {
    background: #fff !important; color: var(--c-ink) !important;
    border: none !important; border-radius: 100px !important;
    font-weight: 650 !important; padding: 15px 30px !important;
    box-shadow: 0 8px 26px rgba(0,0,0,.22);
    transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, background .22s, color .22s;
}
.btn-hero:hover {
    background: var(--c-coral) !important; color: #fff !important;
    transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,107,91,.42);
}

/* Szekciok vilagos hatteren */
.section-light, .section-white { color: var(--c-ink) !important; }
.newsletter-section, .nl-section { background: var(--c-bg-soft) !important; }
.newsletter-section h2, .nl-section h2, .nl-title { color: var(--c-ink) !important; }
.newsletter-section p, .nl-section p, .nl-privacy { color: var(--c-ink-soft) !important; }
.nl-input {
    background: #fff !important; color: var(--c-ink) !important;
    border: 1px solid var(--c-line) !important; border-radius: 100px !important;
}
.nl-input::placeholder { color: var(--c-muted) !important; }

/* A lablec marad sotet — ott a feher szoveg a helyes */
.site-footer, .site-footer * { }

/* Termekoldal */
.product-price { color: var(--c-coral) !important; font-weight: 700 !important; }
.product-desc  { color: var(--c-ink-soft) !important; }
.product-title { color: var(--c-ink) !important; }

/* Urlapok */
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=url], select, textarea {
    border-radius: 10px !important; border: 1px solid var(--c-line) !important;
    color: var(--c-ink) !important; background: #fff !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--c-coral) !important;
    box-shadow: 0 0 0 3px rgba(255,107,91,.14) !important; outline: none !important;
}
label { color: var(--c-ink) !important; }

/* ── Mobil ───────────────────────────────────────────────── */
@media (max-width: 860px) {
    .site-nav { background: #fff !important; }
    .site-nav a { border-radius: 10px; }
    .pager a, .pager span { min-width: 38px; height: 38px; font-size: 14px; padding: 0 11px; }
}


/* ── Kiemelt menupont: Sajat fotodbol ────────────────────── */
.pw-nav-cta {
    display: inline-flex !important; align-items: center; gap: 7px;
    background: linear-gradient(135deg, #ff6b5b, #ff8f52) !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 9px 17px !important;
    font-size: 12.5px !important; font-weight: 750 !important;
    letter-spacing: .06em !important; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(255,107,91,.34);
    transition: transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s, filter .24s;
    position: relative; overflow: hidden;
}
.pw-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(255,107,91,.46);
    filter: saturate(1.1);
}
.pw-nav-cta.active { box-shadow: 0 0 0 3px rgba(255,107,91,.22), 0 6px 18px rgba(255,107,91,.4); }
.pw-nav-cta svg { flex-shrink: 0; }

/* Finom fenycsik, ami idonkent vegigfut rajta */
.pw-nav-cta::after {
    content: ""; position: absolute; top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
    animation: pwShine 4.5s ease-in-out infinite;
}
@keyframes pwShine {
    0%, 62% { left: -60%; }
    82%, 100% { left: 125%; }
}
@media (prefers-reduced-motion: reduce) { .pw-nav-cta::after { animation: none; display: none; } }

@media (max-width: 860px) {
    .pw-nav-cta { width: 100%; justify-content: center; margin-top: 8px; }
}


/* ── Ketts ar: forint elol, euro alatta ──────────────────── */
.price-dual { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.price-huf  { font-weight: 800; color: var(--c-coral, #ff6b5b); }
.price-eur  { font-size: .76em; font-weight: 500; color: var(--c-muted, #8a93a5); margin-top: 2px; }

/* A termekoldali nagy ar */
.product-price .price-dual { align-items: flex-start; }
.product-price .price-huf  { font-size: 1.08em; }

/* Kartyakon kozepre, ha a kartya kozepre igazit */
.art-card-price .price-dual { align-items: inherit; }


/* ── Kosar-fiok: ketts ar ────────────────────────────────── */
.cd-dual { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.cd-huf  { font-weight: 750; color: var(--c-ink, #1d2433); }
.cd-eur  { font-size: .8em; font-weight: 500; color: var(--c-muted, #8a93a5); }
.cart-item-price .cd-dual { align-items: flex-start; }
.cart-item-price .cd-huf  { font-size: .95em; }
#cd-total .cd-huf { font-size: 1.12em; color: var(--c-coral, #ff6b5b); }

/* Checkout osszesito */
#summary-total .price-dual, #summary-shipping .price-dual { align-items: flex-end; }
#summary-total .price-huf { font-size: 1.1em; }


/* ═══ MOBIL-ATVIZSGALAS ══════════════════════════════════════
   Az egesz oldal telefonra igazitva. A fejlecben a kiemelt gomb
   a kosar melle kerult, ezert ott kell a legtobb igazitas. */

/* Semmi ne logjon ki oldalra, semmilyen keszuleken */
/* A vízszintes túlcsordulás ellen a body-n: az overflow-x: hidden
   a html-en megszüntetné a position:sticky működését, ezért csak
   a body-ra tesszük, és clip-pel, ami nem hoz létre görgetési
   környezetet. Ahol a böngésző nem ismeri a clip-et, ott marad
   a hidden — ott a sticky helyett a videó egyszerűen végiggörgethető. */
html { max-width: 100%; }
body { max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) {
    body { overflow-x: hidden; }
}
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

@media (max-width: 860px) {
    /* A fejlec harom eleme (logo / gomb+kosar / hamburger) egy sorban elfer */
    .header-inner { gap: 10px; flex-wrap: nowrap; }
    .site-logo { flex-shrink: 1; min-width: 0; }
    .logo-text, .logo-img { max-width: 100%; }
    .header-actions { gap: 8px; flex-shrink: 0; }

    /* A kiemelt gomb mobilon rovidebb, de marad feltuno */
    .header-actions .pw-nav-cta {
        width: auto; margin-top: 0;
        padding: 8px 13px !important;
        font-size: 11px !important;
        letter-spacing: .04em !important;
        gap: 6px;
    }
    /* A nav-ban mar nincs ott, de ha valahol megis, ne duplazodjon */
    .site-nav .pw-nav-cta { display: none !important; }
}

/* Keskeny telefon: a gombon csak az ikon + rovid szoveg */
@media (max-width: 480px) {
    .header-inner { padding-left: 14px; padding-right: 14px; }
    .header-actions .pw-nav-cta {
        padding: 8px 11px !important;
        font-size: 10.5px !important;
    }
    .header-actions .pw-nav-cta svg { width: 14px; height: 14px; }
}

/* Nagyon keskeny (iPhone SE es tarsai): a gomb csak ikon */
@media (max-width: 374px) {
    .header-actions .pw-nav-cta { padding: 9px !important; }
    .header-actions .pw-nav-cta span,
    .header-actions .pw-nav-cta { font-size: 0 !important; }
    .header-actions .pw-nav-cta svg { width: 17px; height: 17px; }
}

/* ── Kosar-fiok telefonon ──────────────────────────────── */
@media (max-width: 480px) {
    .cart-drawer { width: 100vw; }
    .cart-drawer-header { padding: 16px 18px; }
    .cart-item { gap: 10px; }
    .cart-item-img { width: 62px; height: 62px; }
    .cart-item-title { font-size: 14px; }
    /* A ketsoros ar ne torjon szet */
    .cart-item-price .cd-dual, .cart-item-subtotal .cd-dual { align-items: flex-end; }
    .cd-huf { font-size: 14px; }
    .cd-eur { font-size: 11.5px; }
    /* A fizetes gomb kenyelmes meretu legyen */
    .cart-checkout-btn { min-height: 50px; font-size: 15px; }
}

/* ── Termekoldal es galeria telefonon ──────────────────── */
@media (max-width: 600px) {
    .product-price .price-huf { font-size: 1.5rem; }
    .product-price .price-eur { font-size: .85rem; }
    /* A kosarba/megveszem gombok egymas alatt, teljes szelessegben */
    .product-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .product-actions .btn { width: 100%; min-height: 50px; justify-content: center; }
}

/* ── Erintes-baratsag: minden kattinthato elem elerjen 44px-t ── */
@media (pointer: coarse) {
    .pager a, .pager span { min-width: 44px; min-height: 44px; }
    .cart-item-remove, .qty-btn { min-height: 34px; min-width: 34px; }
    .nav-toggle { min-width: 44px; min-height: 44px; }
}

/* iOS: a 16px alatti betumeret beviteli mezoben belenagyitast okoz */
@media (max-width: 860px) {
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="number"], input[type="search"], select, textarea {
        font-size: 16px;
    }
}


/* ── Kiemelt menupont: Egyedi felirat ───────────────────── */
.tw-nav-cta {
    display: inline-flex !important; align-items: center; gap: 7px;
    background: linear-gradient(135deg, #1d2433, #39455f) !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 9px 17px !important;
    font-size: 12.5px !important; font-weight: 750 !important;
    letter-spacing: .06em !important; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(29,36,51,.28);
    transition: transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s, filter .24s;
}
.tw-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(29,36,51,.38); }
.tw-nav-cta.active { box-shadow: 0 0 0 3px rgba(29,36,51,.18), 0 6px 18px rgba(29,36,51,.34); }
.tw-nav-cta svg { flex-shrink: 0; }

@media (max-width: 860px) {
    .header-actions .tw-nav-cta {
        padding: 8px 13px !important; font-size: 11px !important;
        letter-spacing: .04em !important; gap: 6px;
    }
}
@media (max-width: 480px) {
    .header-actions .tw-nav-cta { padding: 8px 11px !important; font-size: 10.5px !important; }
    .header-actions .tw-nav-cta svg { width: 14px; height: 14px; }
}
@media (max-width: 374px) {
    .header-actions .tw-nav-cta { padding: 9px !important; font-size: 0 !important; }
    .header-actions .tw-nav-cta svg { width: 17px; height: 17px; }
}


/* ── Videó a hero sliderben ──────────────────────────────
   A kép fölé kerül, ugyanúgy kitöltve. Amíg a videó betölt,
   vagy ha nem játszható le, a kép marad látható alatta. */
.hero-slide .slide-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}
.hero-slide .hero-slide-overlay { z-index: 2; }

/* Mozgáscsökkentésnél ne játsszon automatikusan */
@media (prefers-reduced-motion: reduce) {
    .hero-slide .slide-video { display: none; }
}


/* ═══ MOBIL JAVÍTÁSOK ══════════════════════════════════════════
   Három hiba egy helyen, mert mindhárom a fejléc magasságából
   és a felülírásokból fakad. */

@media (max-width: 860px) {

    /* ── 0. A fejléc VALÓDI magassága ──────────────────────────
       Mobilon a fejléc kétsoros lett (logó + a két gomb), ezért
       109 px magas — de a --header-h változó 54-56 px maradt.
       Minden lap ebből számolja a felső térközt, így a tartalom
       a fejléc alá csúszott: a varázslók címe, a slider, minden.

       Ezt egy helyen javítjuk, és mindegyik rendbe jön. */
    :root { --header-h: 108px !important; }

    /* ── 1. A fejléc: két sor, felesleges sáv nélkül ───────────
       A .site-header -60px-re van tolva és 60px felső belső
       margót kap (ez tartja a helyet az asztali bejelentkező
       sávnak). Mobilon ebből üres fehér csík lesz a lap tetején. */
    .site-header {
        top: 0 !important;
        padding-top: 0 !important;
        height: auto !important;
    }

    .header-inner {
        flex-wrap: wrap !important;
        align-items: center;
        height: auto !important;
        padding: 8px 16px 10px !important;
        gap: 0 !important;
    }

    /* Első sor: logó balra, hamburger jobbra. */
    .site-logo  { order: 1; flex: 0 1 auto; min-width: 0; }
    .nav-toggle { order: 2; margin-left: auto; flex: 0 0 auto; }
    .cart-btn   { order: 3; flex: 0 0 auto; margin-left: 12px; }

    /* Második sor: a két gomb, teljes felirattal. */
    .header-actions {
        order: 4;
        flex: 0 0 100% !important;
        width: 100%;
        margin-top: 9px;
        gap: 8px !important;
    }
    .header-actions .tw-nav-cta,
    .header-actions .pw-nav-cta {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0;
        justify-content: center;
        padding: 10px 8px !important;
        font-size: 11.5px !important;
        letter-spacing: .03em !important;
        white-space: nowrap;
        margin-top: 0 !important;
    }
    .header-actions .tw-nav-cta svg,
    .header-actions .pw-nav-cta svg {
        width: 14px !important; height: 14px !important;
    }

    /* A legördülő menü a fejléc teljes magassága alatt nyíljon. */
    .site-nav { top: 104px !important; }

    /* ── 2. A slider alcíme legyen látható ─────────────────────
       Valahol display:none-t kapott mobilon. A rövid alcím a
       címnél is fontosabb lehet: ez mondja meg, mit árulunk. */
    .slide-sub {
        display: block !important;
        color: #fff !important;
        text-shadow: 0 2px 14px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.55) !important;
        margin-bottom: 18px !important;
    }

    /* ── 3. A varázslók fejléce ne csússzon a tartalom alá ─────
       A lépés-sáv (Vissza · 1. lépés / 4) ragadós, és eltakarta
       a címet. Elég hely kell alatta. */
    .pw-wrap, .tw-wrap, .st-wrap {
        padding-top: 0 !important;
    }
    .pw-bar, .tw-bar, [class*="-steps-bar"] {
        position: static !important;   /* ne ragadjon a cím fölé */
    }
    .pw-head, .tw-head {
        padding-top: 18px !important;
    }
}

@media (max-width: 480px) {
    .header-inner { padding: 8px 13px 10px !important; }
    .header-actions { gap: 6px !important; }
    .header-actions .tw-nav-cta,
    .header-actions .pw-nav-cta {
        font-size: 10.5px !important;
        padding: 10px 6px !important;
        gap: 5px !important;
    }
    .header-actions .tw-nav-cta svg,
    .header-actions .pw-nav-cta svg {
        width: 13px !important; height: 13px !important;
    }
}

@media (max-width: 374px) {
    /* A legkisebb kijelzőkön az IKON marad el, nem a felirat:
       a szöveg hordozza a jelentést. */
    .header-actions .tw-nav-cta,
    .header-actions .pw-nav-cta {
        font-size: 10px !important;
        padding: 10px 4px !important;
        gap: 0 !important;
    }
    .header-actions .tw-nav-cta svg,
    .header-actions .pw-nav-cta svg { display: none !important; }
}

/* ═══ MOBIL: menü és lapozó ════════════════════════════════════ */

@media (max-width: 860px) {
    /* ── A MENÜ ────────────────────────────────────────────────
       A rejtő szabály csak 768 px alatt szólt, a fejléc-átrendezés
       viszont 860-nál kezdődik. A köztes sávban a menü láthatóan
       ott maradt, és kitakarta a lap tetejét.

       Most az egész mobil-sávban rejtve van, és csak a hamburgerre
       csúszik le. */
    .site-nav {
        position: fixed !important;
        top: var(--header-h) !important;
        left: 0; right: 0;
        flex-direction: column !important;
        flex: none !important;
        background: #fff !important;
        padding: 8px 0 16px;
        border-bottom: 1px solid var(--c-line, #e6e9f0);
        box-shadow: 0 10px 28px rgba(29,36,51,.14);
        /* Alaphelyzetben NINCS a lapon: a fejléc fölé csúsztatva
           és elrejtve. Enélkül elfoglalta a helyét a sorban, és
           kitakarta a logót meg a hamburgert. */
        display: none;
        z-index: 840;
        gap: 0 !important;
    }
    .site-nav.open {
        display: flex;
    }
    .site-nav a {
        padding: 13px 20px !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #f2f2f2;
    }
    .site-nav a:last-child { border-bottom: none; }

    /* ── A LAPOZÓ PÖTTYÖK ──────────────────────────────────────
       A gomb ("Kollekciók") ugyanabban a sávban volt, mint a
       pöttyök, és kitakarta őket. A pöttyök a slider aljára
       kerülnek, a gomb fölé. */
    .slider-dots {
        bottom: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    /* A tartalomnak hely kell alul, hogy a gomb ne érjen a
       pöttyökig. */
    .hero-slide-content { padding-bottom: 34px !important; }
}

/* ═══ GALÉRIA: A MÁSODIK KÉP EGÉRRÁVITELRE ═════════════════════
   A kártyán a házikóval jelölt borító látszik. Ha a terméknek
   van további képe, az egér fölé vitelekor az úszik be helyette —
   így a vásárló a lista elhagyása nélkül lát egy második nézetet.

   A második kép a borító FÖLÖTT ül, átlátszóan. Nem cseréljük a
   src-t, mert akkor a váltás villanna egyet, amíg a kép betölt. */

/* ── A két kép közti átmenet ────────────────────────────────
   Nem egyszerű áttűnés: a borító hátrafelé távolodik és finoman
   elmosódik, a második kép pedig előrébb jön. Ettől mélysége lesz
   a váltásnak, mintha a néző áthaladna az első képen.

   Lassú és lágyított görbével: gyorsan indul, puhán áll meg.
   Nem kapkod — ez egy luxus oldal.

   A .van-masodik osztályt a PHP teszi a borítóra, de CSAK akkor,
   ha tényleg van második kép. Így ahol egyetlen kép van, ott nem
   mosódik el a semmibe. */

.art-card-img2 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* Nagyobb kezdés: a kép "előrébb jön", nem csak felúszik. */
    transform: scale(1.08);
    transition:
        opacity   .85s cubic-bezier(.22, .61, .36, 1),
        transform .95s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
    /* A sötét fejléc-árnyék (::after, z-index 1) maradjon fölötte. */
    z-index: 0;
    will-change: opacity, transform;
}

.art-card:hover .art-card-img2,
.art-card:focus-visible .art-card-img2 {
    opacity: 1;
    transform: scale(1.03);
}

/* A borító: minden kártyán lágyan ránagyít. */
.art-card-img1 {
    transition:
        transform .95s cubic-bezier(.22, .61, .36, 1),
        filter    .85s cubic-bezier(.22, .61, .36, 1);
}
.art-card:hover .art-card-img1,
.art-card:focus-visible .art-card-img1 {
    transform: scale(1.045);
}

/* Ahol VAN második kép, ott a borító hátrébb lép és elmosódik —
   ez adja az átúszás mélységét. Enélkül csak egy lapos áttűnés
   lenne. */
.art-card:hover .art-card-img1.van-masodik,
.art-card:focus-visible .art-card-img1.van-masodik {
    transform: scale(1.07);
    filter: blur(2.5px) saturate(1.06);
}

/* ── A fénysáv ──────────────────────────────────────────────
   Egyszer fut át a képen, balról jobbra, ferdén. Mint amikor a
   fény megcsillan egy üveg mögötti képen. Finoman: alig látszik,
   de ettől lesz drága hatása. */
.art-card-img::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -75%;
    width: 50%;
    height: 220%;
    background: linear-gradient(
        100deg,
        rgba(255,255,255,0)    0%,
        rgba(255,255,255,.24) 45%,
        rgba(255,255,255,.40) 50%,
        rgba(255,255,255,.24) 55%,
        rgba(255,255,255,0)  100%
    );
    transform: rotate(14deg);
    pointer-events: none;
    opacity: 0;
    z-index: 2;
}
.art-card:hover .art-card-img::before,
.art-card:focus-visible .art-card-img::before {
    animation: artFenysav 1.15s cubic-bezier(.3, .5, .3, 1) .12s;
}
@keyframes artFenysav {
    0%   { left: -75%; opacity: 0; }
    12%  {             opacity: 1; }
    88%  {             opacity: 1; }
    100% { left: 125%; opacity: 0; }
}

/* Érintőkijelzőn nincs egér: ott a borító marad, a második képet
   a termékoldal galériája mutatja. Így nem tölt le fölöslegesen. */
@media (hover: none) {
    .art-card-img2 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    /* Aki kérte, hogy kevesebb mozgás legyen: egyszerű váltás,
       fénysáv és elmosás nélkül. */
    .art-card-img2 { transition: opacity .01s; transform: none; }
    .art-card:hover .art-card-img2 { transform: none; }
    .art-card:hover .art-card-img > img:first-of-type {
        transform: none; filter: none;
    }
    .art-card:hover .art-card-img::before { animation: none; }
}

/* ═══ JOGI OLDALAK ═════════════════════════════════════════════
   A hosszú jogi szövegben a vásárló nem olvas el mindent. Két
   dolgot viszont muszáj észrevennie: hogy a személyre szabott
   képre nincs elállás, és hogy a jogvédett tartalomért ő felel.
   Ezeket emeljük ki. */

.legal-body .legal-lead {
    font-size: 16px;
    line-height: 1.7;
    color: var(--c-ink, #1d2433);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--c-line, #e6e9f0);
    margin-bottom: 8px;
}

.legal-body .legal-kiemelt {
    background: #fff8ef;
    border: 1px solid #f0d9b8;
    border-left: 4px solid #d99b3d;
    border-radius: 10px;
    padding: 15px 18px;
    margin: 16px 0;
    color: #6b4a1c;
}
.legal-body .legal-kiemelt strong { color: #52380f; }

/* A táblázatok ne lógjanak ki keskeny kijelzőn. */
.legal-body .impressum-table { width: 100%; }
@media (max-width: 620px) {
    .legal-body .impressum-table,
    .legal-body .impressum-table tbody,
    .legal-body .impressum-table tr,
    .legal-body .impressum-table td { display: block; width: 100%; }
    .legal-body .impressum-table td:first-child {
        width: auto; padding-bottom: 2px; border-bottom: none;
        font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em;
    }
    .legal-body .impressum-table td:last-child { padding-top: 0; }
    .legal-body .legal-kiemelt { padding: 13px 15px; }
}

/* ═══ AJÁNLÓ SÁVOK ═════════════════════════════════════════════
   A prémium oldalra küldő képsávok. A kép maga a banner — a
   felirat és a gomb bele van szerkesztve —, ezért itt csak a
   térköz, a lekerekítés és a finom mozgás a dolgunk.

   Szándékosan visszafogott: a vásárlót ajánlja, nem rákiabál. */

.bnr {
    max-width: 1180px;
    margin: 54px auto;
    padding: 0 24px;
}
.bnr-link {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    /* A filter containing blockot csinál és levágná a gyereket,
       ezért árnyék, nem drop-shadow. */
    box-shadow: 0 10px 30px rgba(29, 36, 51, .10);
    transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.bnr-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(29, 36, 51, .16);
}
.bnr-kep {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}
/* Link nélküli sáv: ugyanaz a kinézet, mozgás nélkül. */
.bnr > picture > .bnr-kep {
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(29, 36, 51, .10);
}

/* ── A galéria rácsában ──────────────────────────────────
   Itt a sáv a teljes soron átér, hogy ne tűnjön eltévedt
   terméknek a kártyák között. */
.art-grid .bnr.bnr-racsban {
    grid-column: 1 / -1;
    max-width: none;
    margin: 10px 0;
    padding: 0;
}

@media (max-width: 860px) {
    .bnr { margin: 38px auto; padding: 0 16px; }
    .art-grid .bnr.bnr-racsban { margin: 4px 0; }
}
@media (max-width: 520px) {
    .bnr { margin: 30px auto; }
    .bnr-link, .bnr-kep, .bnr > picture > .bnr-kep { border-radius: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .bnr-link { transition: none; }
    .bnr-link:hover { transform: none; }
}

/* ═══ MÉRETVÁLASZTÓ A TERMÉKOLDALON ════════════════════════════
   Csak akkor jelenik meg, ha az adminban több méretet adtál meg
   ehhez a képhez. Az ár követi a választást. */

.prod-meretek { margin: 18px 0 22px; }

.prod-meret-cim {
    font-size: 12.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muted, #8a93a5);
    margin-bottom: 10px;
}

.prod-meret-sor {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.prod-meret {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 118px;
    padding: 11px 16px;
    background: #fff;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.prod-meret:hover {
    border-color: rgba(255, 107, 91, .45);
    transform: translateY(-1px);
}
.prod-meret.is-on {
    border-color: var(--accent, #ff6b5b);
    box-shadow: 0 0 0 3px rgba(255, 107, 91, .13);
}

.prod-meret-nev {
    font-size: 14.5px;
    font-weight: 650;
    color: var(--black, #1d2433);
}
.prod-meret-ar {
    font-size: 13px;
    color: var(--muted, #8a93a5);
}
.prod-meret.is-on .prod-meret-ar { color: var(--accent, #ff6b5b); }

/* A választott ár nagyban, fent. */
#prod-ar { transition: opacity .15s; }

@media (max-width: 520px) {
    .prod-meret-sor { gap: 8px; }
    .prod-meret { min-width: 0; flex: 1 1 calc(50% - 4px); padding: 10px 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .prod-meret { transition: none; }
    .prod-meret:hover { transform: none; }
}


/* ═══ RENDELÉSKÖVETÉS ══════════════════════════════════════════
   A vásárló regisztráció nélkül, az e-mailben kapott linkkel
   nyitja meg. A legfontosabb itt a fizetési adat: ha még fizetnie
   kell, azt kell elsőként meglátnia. */

.ord-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: calc(var(--header-h, 60px) + 34px) 20px 70px;
}

.ord-fej { text-align: center; margin-bottom: 30px; }
.ord-szam {
    font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--c-muted, #8a93a5); margin: 0 0 6px;
}
.ord-fej h1 {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.9rem; margin: 0 0 6px; color: var(--c-ink, #1d2433);
}
.ord-datum { font-size: 13.5px; color: var(--c-muted, #8a93a5); margin: 0; }

/* ── Állapot-lépcső ─────────────────────────────────────── */
.ord-lepcso {
    display: flex; align-items: center;
    margin: 0 0 28px; padding: 0 4px;
}
.ord-lepes {
    display: flex; flex-direction: column; align-items: center;
    gap: 7px; flex: 0 0 auto;
}
.ord-pont {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #eef0f4; color: var(--c-muted, #8a93a5);
    font-size: 13.5px; font-weight: 700;
    border: 2px solid transparent;
}
.ord-lepes.is-kesz .ord-pont { background: #16a06f; color: #fff; }
.ord-lepes.is-most .ord-pont {
    background: #fff; color: #16a06f; border-color: #16a06f;
}
.ord-cimke {
    font-size: 11.5px; color: var(--c-muted, #8a93a5);
    text-align: center; white-space: nowrap;
}
.ord-lepes.is-kesz .ord-cimke,
.ord-lepes.is-most .ord-cimke { color: var(--c-ink, #1d2433); font-weight: 600; }
.ord-vonal {
    flex: 1 1 auto; height: 2px; background: #eef0f4;
    margin: 0 4px; position: relative; top: -10px;
}
.ord-vonal.is-kesz { background: #16a06f; }

/* ── Kártyák ────────────────────────────────────────────── */
.ord-card {
    background: #fff;
    border: 1px solid var(--c-line, #e6e9f0);
    border-radius: 14px;
    padding: 24px 26px;
    margin-bottom: 18px;
    box-shadow: 0 2px 12px rgba(29, 36, 51, .05);
}
.ord-cim {
    font-size: 15px; font-weight: 700; margin: 0 0 16px;
    color: var(--c-ink, #1d2433);
}

/* Fizetésre vár — ez a legfontosabb doboz a lapon. */
.ord-card--fizetes {
    border: 1.5px solid #f0c98a;
    background: #fffaf2;
}
.ord-jelzo {
    display: inline-block; padding: 4px 11px; border-radius: 100px;
    background: #f5a623; color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; margin-bottom: 10px;
}
.ord-fiz-fej h2 { font-size: 19px; margin: 0 0 6px; color: #6b4a1c; }
.ord-fiz-mit { font-size: 14px; color: #8a6a3a; margin: 0 0 18px; line-height: 1.6; }

.ord-osszeg {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 14px 0; margin-bottom: 16px;
    border-top: 1px solid #f0d9b8; border-bottom: 1px solid #f0d9b8;
}
.ord-osszeg span { font-size: 14px; color: #8a6a3a; }
.ord-osszeg strong { font-size: 24px; color: #6b4a1c; }

.ord-fiz-mod {
    display: flex; align-items: center; gap: 13px;
    background: #fff; border: 1px solid #f0d9b8;
    border-radius: 10px; padding: 13px 15px; margin-bottom: 10px;
}
.ord-fiz-ikon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #f3f5f8; flex-shrink: 0; font-size: 17px;
}
.ord-fiz-ikon--rev { background: #0666eb; color: #fff; font-weight: 700; }
.ord-fiz-adat { flex: 1; min-width: 0; }
.ord-fiz-nev { font-size: 11.5px; color: var(--c-muted, #8a93a5); margin-bottom: 2px; }
.ord-fiz-ertek {
    font-size: 16px; font-weight: 700; color: var(--c-ink, #1d2433);
    word-break: break-all;
}

.ord-masol {
    flex-shrink: 0; padding: 8px 14px; border-radius: 8px;
    border: 1.5px solid var(--c-line, #e6e9f0); background: #fff;
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--c-ink-soft, #566074); cursor: pointer;
    transition: border-color .18s, color .18s, background .18s;
}
.ord-masol:hover { border-color: #16a06f; color: #16a06f; }
.ord-masol.is-kesz { background: #e7f8f1; border-color: #16a06f; color: #0d7a57; }
.ord-masol--kicsi { padding: 5px 10px; font-size: 12px; margin-left: 6px; }

.ord-fontos {
    background: #fff; border: 1px dashed #d9a84a;
    border-radius: 10px; padding: 13px 15px; margin-top: 14px;
    font-size: 13.5px; line-height: 1.7; color: #6b4a1c;
}
.ord-szam-kiemelt {
    display: inline-block; font-weight: 800; font-size: 15px;
    background: #fff4e0; padding: 2px 9px; border-radius: 6px;
    margin-left: 4px; letter-spacing: .5px;
}
.ord-fiz-utana {
    font-size: 13px; color: #8a6a3a; line-height: 1.65;
    margin: 16px 0 0;
}

.ord-card--jo { border-color: #c8ebdc; background: #f3faf6; }
.ord-card--jo h2 { font-size: 18px; margin: 0 0 8px; color: #1f6b4f; }
.ord-card--jo p { font-size: 14px; color: #2d7a5c; margin: 0; line-height: 1.65; }

.ord-card--lezart { border-color: #e6e9f0; background: #fafbfc; text-align: center; }
.ord-card--lezart h2 { font-size: 18px; margin: 0 0 8px; }
.ord-card--lezart p { color: var(--c-muted, #8a93a5); font-size: 14px; margin: 0 0 16px; }

.ord-card--ures { text-align: center; padding: 44px 26px; }
.ord-card--ures h1 { font-size: 1.5rem; margin: 0 0 12px; }
.ord-card--ures p { color: var(--c-muted, #8a93a5); line-height: 1.7; margin: 0 0 20px; }

.ord-gomb {
    display: inline-block; padding: 12px 24px; border-radius: 100px;
    background: var(--c-ink, #1d2433); color: #fff;
    font-size: 14.5px; font-weight: 600; text-decoration: none;
    transition: background .2s;
}
.ord-gomb:hover { background: var(--c-coral, #ff6b5b); }
.ord-gomb--halvany { background: none; border: 1.5px solid var(--c-line, #e6e9f0); color: var(--c-ink-soft, #566074); }
.ord-gomb--halvany:hover { background: #f5f6f8; color: var(--c-ink, #1d2433); }

/* ── Tételek ────────────────────────────────────────────── */
.ord-tetel {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 0; border-bottom: 1px solid #f1f3f7;
}
.ord-tetel img {
    width: 52px; height: 52px; object-fit: cover;
    border-radius: 7px; flex-shrink: 0;
}
.ord-tetel-nev { flex: 1; font-size: 14px; line-height: 1.45; }
.ord-db {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    background: #f3f5f8; border-radius: 100px;
    font-size: 12px; color: var(--c-muted, #8a93a5);
}
.ord-tetel-ar { font-size: 14px; font-weight: 650; white-space: nowrap; }

.ord-sor {
    display: flex; justify-content: space-between;
    padding: 9px 0; font-size: 14px; color: var(--c-ink-soft, #566074);
}
.ord-sor small { color: var(--c-muted, #8a93a5); }
.ord-sor--vegosszeg {
    margin-top: 6px; padding-top: 14px;
    border-top: 2px solid var(--c-ink, #1d2433);
    font-size: 15px;
}
.ord-sor--vegosszeg strong { font-size: 20px; color: var(--c-coral, #ff6b5b); }

.ord-cim-adat { font-size: 14.5px; line-height: 1.8; margin: 0 0 12px; }
.ord-segitseg { font-size: 13px; color: var(--c-muted, #8a93a5); margin: 0; }
.ord-segitseg a { color: var(--c-coral, #ff6b5b); }

@media (max-width: 560px) {
    .ord-wrap { padding: calc(var(--header-h, 60px) + 22px) 15px 54px; }
    .ord-card { padding: 20px 17px; border-radius: 12px; }
    .ord-cimke { font-size: 10.5px; }
    .ord-pont { width: 28px; height: 28px; font-size: 12.5px; }
    .ord-osszeg strong { font-size: 21px; }
    .ord-fiz-mod { flex-wrap: wrap; }
    .ord-masol { width: 100%; margin-top: 4px; }
}


/* ── Követő link a köszönő oldalon ───────────────────────────
   A vásárló itt kattint el a boltba. Ha nem teszi el a linket,
   soha nem találja meg újra a rendelését — ezért hangsúlyos. */
.succ-kovetes {
    max-width: 520px;
    margin: 0 auto 26px;
    padding: 22px 24px;
    background: #f6f8fc;
    border: 1.5px solid #dbe3f0;
    border-radius: 14px;
    text-align: left;
}
.succ-kov-cim {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-ink, #1d2433);
    margin-bottom: 7px;
}
.succ-kov-mit {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--c-ink-soft, #566074);
    margin: 0 0 15px;
}
.succ-kov-link {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid #dbe3f0;
    border-radius: 9px;
    padding: 10px 13px;
    margin-bottom: 13px;
}
.succ-kov-link span {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--c-ink-soft, #566074);
    word-break: break-all;
    line-height: 1.5;
}
.succ-masol {
    flex-shrink: 0;
    padding: 7px 13px;
    border-radius: 7px;
    border: 1.5px solid #dbe3f0;
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-ink-soft, #566074);
    cursor: pointer;
    transition: border-color .18s, color .18s;
}
.succ-masol:hover { border-color: #16a06f; color: #16a06f; }

.succ-kov-gomb {
    display: block;
    text-align: center;
    padding: 13px 22px;
    border-radius: 100px;
    background: var(--c-ink, #1d2433);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.succ-kov-gomb:hover { background: var(--c-coral, #ff6b5b); }

@media (max-width: 560px) {
    .succ-kovetes { padding: 18px 16px; border-radius: 12px; }
    .succ-kov-link { flex-wrap: wrap; }
    .succ-masol { width: 100%; }
}

/* ── Rendelés megkeresése ───────────────────────────────── */
.ker-urlap { display: grid; gap: 17px; }
.ker-mezo label {
    display: block; font-size: 13.5px; font-weight: 650;
    margin-bottom: 6px; color: var(--c-ink, #1d2433);
}
.ker-mezo input {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--c-line, #e6e9f0); border-radius: 9px;
    font-family: inherit; font-size: 15px;
    transition: border-color .18s;
}
.ker-mezo input:focus {
    outline: none; border-color: var(--c-coral, #ff6b5b);
}
.ker-sugo {
    font-size: 12.5px; color: var(--c-muted, #8a93a5);
    margin: 6px 0 0; line-height: 1.55;
}
.ker-gomb { width: 100%; text-align: center; border: none; cursor: pointer; font-family: inherit; }
.ker-uzenet {
    background: #f3faf6; border: 1px solid #c8ebdc; color: #1f6b4f;
    border-radius: 10px; padding: 13px 16px; margin-bottom: 18px;
    font-size: 14px; line-height: 1.6;
}
.ker-uzenet--hiba {
    background: #fff5f4; border-color: #ffd3cd; color: #a1544a;
}

/* Egyetlen elérhető méret: nincs mit választani, csak tudnia kell
   a vásárlónak, mekkora képet vesz. Ezért nem gomb, hanem adat. */
.prod-egymeret {
    display: inline-block;
    padding: 9px 16px;
    background: #f5f6f8;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 650;
    color: var(--black, #1d2433);
}

/* Méret nélküli termék: nem rendelhető, de ne nézzen ki hibának. */
.prod-nincs-meret {
    margin-top: 10px;
    padding: 15px 18px;
    background: #f5f6f8;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 11px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted, #8a93a5);
}
.prod-nincs-meret a {
    display: inline-block;
    margin-top: 6px;
    color: var(--accent, #ff6b5b);
    font-weight: 600;
}


/* ═══ KÉPEK MOZGÁSA — LUXUS TEMPÓBAN ═══════════════════════════
   A gyors, lineáris nagyítás olcsó hatást kelt: a kép "ugrik".
   Egy igényes oldalon a mozgás lassú, lágyan indul és lágyan áll
   meg — alig észrevehető, mégis érezhető.

   Amit változtatunk:
     • 0,4 mp helyett 0,9 mp — van ideje a szemnek követni
     • lineáris helyett lágy görbe (cubic-bezier), ami lassan
       gyorsul és lassan áll meg
     • 4% helyett 6% nagyítás, de lassabban — így nem kapkodó
     • a kártya maga is megemelkedik egy hajszálnyit, árnyékkal

   A visszafelé út (amikor leveszed az egeret) MÉG lassabb: ez a
   "drága" érzés titka — a mozdulat kiül, nem csattan vissza. */

.art-card-img img,
.art-card-img .art-card-img2 {
    transition: transform 1.1s cubic-bezier(.2, .6, .25, 1);
}
.art-card:hover .art-card-img img,
.art-card:focus-visible .art-card-img img {
    transform: scale(1.06);
    transition: transform .9s cubic-bezier(.16, .84, .32, 1);
}

/* A kártya finom megemelkedése. Nem ugrik: felúszik. */
.art-card-wrap {
    transition: transform .7s cubic-bezier(.2, .6, .25, 1);
}
.art-card-wrap:hover {
    transform: translateY(-4px);
}

/* Az árnyék külön, lassabban jön — ettől lesz mélysége. */
.art-card-img {
    transition: box-shadow .8s cubic-bezier(.2, .6, .25, 1);
}
.art-card-wrap:hover .art-card-img {
    box-shadow: 0 18px 44px rgba(29, 36, 51, .14);
}

/* ── Kategória-kártyák ─────────────────────────────────────── */
.cat-card img {
    transition: transform 1.1s cubic-bezier(.2, .6, .25, 1);
}
.cat-card:hover img {
    transform: scale(1.07);
    transition: transform .9s cubic-bezier(.16, .84, .32, 1);
}

/* ── Blog-kártyák ──────────────────────────────────────────── */
.blog-card-img img {
    transition: transform 1.1s cubic-bezier(.2, .6, .25, 1);
}
.blog-card:hover .blog-card-img img {
    transform: scale(1.06);
    transition: transform .9s cubic-bezier(.16, .84, .32, 1);
}

/* ── A galéria második képe (egérrávitelre) ────────────────── */
/* Az átúszás is lassabb: a két kép összeolvad, nem vált. */
.art-card-img2 {
    transition: opacity .85s cubic-bezier(.3, .2, .2, 1) !important;
}

/* ── Kapcsolódó termékek ───────────────────────────────────── */
.related-card img {
    transition: transform 1.1s cubic-bezier(.2, .6, .25, 1);
}
.related-card:hover img {
    transform: scale(1.05);
    transition: transform .9s cubic-bezier(.16, .84, .32, 1);
}

/* Aki kéri, hogy ne mozogjon semmi, annak nem mozog. */
@media (prefers-reduced-motion: reduce) {
    .art-card-img img, .cat-card img, .blog-card-img img,
    .related-card img, .art-card-wrap, .art-card-img {
        transition: none !important;
    }
    .art-card:hover .art-card-img img,
    .cat-card:hover img,
    .blog-card:hover .blog-card-img img,
    .related-card:hover img,
    .art-card-wrap:hover {
        transform: none !important;
    }
}

/* ── Érintőkijelzőn nincs egér ─────────────────────────────── */
/* Telefonon a hover "beragad" az első koppintás után — ezért
   ott nem alkalmazzuk. */
@media (hover: none) {
    .art-card-wrap:hover { transform: none; }
    .art-card-wrap:hover .art-card-img { box-shadow: none; }
    .art-card:hover .art-card-img img { transform: none; }
}

/* ═══ A KIEMELT KÉPEK RÁCSA ════════════════════════════════════
   Négy oszlop, hogy a 12 kiemelt kép pontosan három sorban
   álljon. A korábbi auto-fill a képernyő szélességétől tette
   függővé a sorok számát — így sosem lehetett tudni, hogy 2,
   3 vagy 4 sor lesz belőle. */

@media (min-width: 1100px) {
    .art-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 700px) and (max-width: 1099px) {
    .art-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ═══ ÁTVEZETÉS A GALÉRIÁBA ════════════════════════════════════
   A kiemelt munkák alatt, középen. Nem harsány gomb: vékony
   keret, sok levegő, és a nyíl finoman elindul, amikor ráviszed
   az egeret — ugyanazzal a lassú tempóval, mint a képek. */

.fo-tovabb {
    text-align: center;
    margin-top: 54px;
}

.fo-tovabb-gomb {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 17px 44px;
    border: 1.5px solid var(--black, #1d2433);
    border-radius: 100px;
    background: transparent;
    color: var(--black, #1d2433);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    transition: color .55s cubic-bezier(.2,.6,.25,1),
                border-color .55s cubic-bezier(.2,.6,.25,1);
}

/* A kitöltés alulról úszik fel, nem villan. */
.fo-tovabb-gomb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--black, #1d2433);
    transform: translateY(101%);
    transition: transform .6s cubic-bezier(.16,.84,.32,1);
    z-index: 0;
}
.fo-tovabb-gomb:hover::before,
.fo-tovabb-gomb:focus-visible::before {
    transform: translateY(0);
}

.fo-tovabb-gomb span,
.fo-tovabb-gomb svg {
    position: relative;
    z-index: 1;
}

.fo-tovabb-gomb svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    transition: transform .6s cubic-bezier(.16,.84,.32,1);
}

.fo-tovabb-gomb:hover,
.fo-tovabb-gomb:focus-visible {
    color: #fff;
    border-color: var(--black, #1d2433);
}
.fo-tovabb-gomb:hover svg,
.fo-tovabb-gomb:focus-visible svg {
    transform: translateX(6px);
}

.fo-tovabb-alcim {
    margin: 15px 0 0;
    font-size: 13.5px;
    color: var(--muted, #8a93a5);
    letter-spacing: .02em;
}

@media (max-width: 560px) {
    .fo-tovabb { margin-top: 38px; }
    .fo-tovabb-gomb {
        padding: 15px 32px;
        font-size: 14.5px;
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fo-tovabb-gomb, .fo-tovabb-gomb::before, .fo-tovabb-gomb svg {
        transition: none;
    }
    .fo-tovabb-gomb:hover svg { transform: none; }
}

/* Az utánvétes bontás a követő oldalon: mit most, mit a futárnak. */
.ord-cod-bontas {
    margin: -8px 0 16px;
    padding: 12px 0 0;
    border-top: 1px dashed #f0d9b8;
    font-size: 13.5px;
}
.ord-cod-bontas div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    color: #8a6a3a;
}
.ord-cod-bontas strong { color: #6b4a1c; }