/* =====================================================================
   REFURB IT WEBSHOP — ALAP STÍLUSLAP
   Letisztult, modern, keretrendszer-mentes CSS (a 4. lépésben bővül)
   ===================================================================== */

:root {
    /* Arculat: mély petróleum. Azért nem általános kék, mert az arany/ezüst/
       bronz esztétikai jelvények mellett nem versenyez, a zöld felé hajlása
       pedig alátámasztja a felújított eszköz környezeti érvét. */
    --color-primary: #0C5F6E;
    --color-primary-dark: #08454F;
    --color-primary-soft: #E8F2F2;   /* kiválasztott állapot, kiemelt doboz */
    --color-primary-line: #C3DCDE;   /* ugyanennek a kerete */
    --color-text: #0D1B21;
    --color-muted: #5C7079;
    --color-bg: #F4F7F6;
    --color-surface: #ffffff;
    --color-border: #D7E0E0;
    --color-success: #1F7A4D;
    --color-danger: #B3302B;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.55;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* --- Fejléc --- */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;          /* enélkül a keresőmező 860px alatt nem tud új sorba törni */
    gap: .6rem 1rem;
    padding: .9rem 1rem;
}

/* Logó: "Lp" márkajel + kéttónusú névszedés.
   A jel currentColor-ral fest, így a paletta cseréje automatikusan viszi. */
.logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--color-primary);
    text-decoration: none;
}

.logo-mark {
    width: 30px;
    height: 30px;
    flex: none;
    display: block;
}

.logo-text {
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--color-text);
}

.logo-text b { color: var(--color-primary); }

.logo-text i {
    font-style: normal;
    font-weight: 500;
    color: var(--color-muted);
}

.main-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
}

.main-nav a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;      /* a kosár és a darabszám ne szakadjon két sorba */
}

.main-nav a:hover { color: var(--color-primary); }

.badge {
    display: inline-block;
    min-width: 1.4em;
    padding: .1em .4em;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: .78rem;
    text-align: center;
}

/* --- Hero --- */
.hero {
    text-align: center;
    padding: 3rem 1rem 2rem;
}

.hero h1 { margin: 0 0 .5rem; font-size: 2rem; }
.hero p  { color: var(--color-muted); margin: 0; }

/* --- Kategória pillek --- */
.category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.category-pill {
    padding: .4rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    font-size: .9rem;
}

.category-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* --- Termékrács --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    padding-bottom: 3rem;
}

.product-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
}

.product-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--color-bg);
}

.product-card h2 {
    font-size: 1rem;
    margin: .75rem 0 .25rem;
    color: var(--color-text);
}

.product-card a { text-decoration: none; }

.price { margin: .25rem 0; }
.price strong { font-size: 1.15rem; }
.net-price {
    display: block;
    font-size: .82rem;
    color: var(--color-muted);
}

.stock { font-size: .85rem; margin: .25rem 0 .75rem; }
.in-stock     { color: var(--color-success); }
.out-of-stock { color: var(--color-danger); }

/* --- Gombok --- */
.btn {
    display: inline-block;
    padding: .55rem 1.1rem;
    border: none;
    border-radius: var(--radius);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    margin-top: auto;
}

.btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Hibaoldal / üres állapot --- */
.error-page { text-align: center; padding: 4rem 1rem; }
.error-page h1 { font-size: 4rem; margin: 0; color: var(--color-primary); }
.empty-state { color: var(--color-muted); text-align: center; grid-column: 1 / -1; }

/* --- Lábléc --- */
.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: .85rem 0;
    text-align: center;
    color: var(--color-muted);
    font-size: .82rem;
}
.site-footer > .container > p { margin-top: .15rem; margin-bottom: .15rem; } /* csak függőlegesen — a vízszintes auto (középre igazítás) maradjon! */
.footer-company {
    margin: .35rem auto 0;
    max-width: 900px;
    font-size: .72rem;
    line-height: 1.45;
    color: var(--color-muted);
}
.footer-company .fc-item { white-space: nowrap; }
.footer-company .fc-sep { margin: 0 .15rem; opacity: .5; }
.footer-company a { color: var(--color-muted); text-decoration: none; }
.footer-company a:hover { color: var(--color-primary); }

/* =====================================================================
   4. LÉPÉS KIEGÉSZÍTÉSEK — termékoldal, kosár, auth, flash üzenetek
   ===================================================================== */

/* --- Flash üzenetek --- */
.alert {
    margin: 1rem 0;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    font-size: .95rem;
}
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-info    { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* --- Fejléc: kijelentkezés gomb linkként --- */
.inline-form { display: inline; margin-left: 1.25rem; }
.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-muted);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}
.link-button:hover { color: var(--color-primary); }

/* --- Breadcrumb --- */
.breadcrumb { font-size: .88rem; color: var(--color-muted); margin: 1.25rem 0; }
.breadcrumb a { color: var(--color-primary); text-decoration: none; }

/* --- Termék részletes oldal --- */
.product-detail {
    display: grid;
    grid-template-columns: minmax(280px, 480px) 1fr;
    gap: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.product-detail-image img {
    width: 100%;
    border-radius: var(--radius);
    background: var(--color-bg);
}
.product-detail-info h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
.price-large strong { font-size: 1.8rem; color: var(--color-primary); }
.qty-group input { max-width: 110px; }
.btn-large { padding: .8rem 1.6rem; font-size: 1.05rem; }

.product-detail .form-group { margin-bottom: .9rem; }
.product-detail label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.product-detail select, .product-detail input[type="number"] {
    padding: .5rem .65rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font: inherit;
    min-width: 220px;
}

.add-feedback {
    margin-top: .75rem;
    padding: .5rem .9rem;
    border-radius: 6px;
    background: #dcfce7;
    color: #166534;
    font-weight: 600;
}
.add-feedback.error { background: #fee2e2; color: #991b1b; }

/* --- B2B kedvezmény tábla --- */
.b2b-pricing {
    margin-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}
.b2b-pricing h3 { font-size: 1rem; margin: 0 0 .5rem; }
.pricing-table { border-collapse: collapse; width: 100%; max-width: 440px; font-size: .9rem; }
.pricing-table th, .pricing-table td {
    border: 1px solid var(--color-border);
    padding: .4rem .7rem;
    text-align: left;
}
.pricing-table th { background: var(--color-bg); }

.product-description {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
    line-height: 1.7;
}
/* Egyedi terméklap-bevezető: kiemelt, jól olvasható vezető szöveg */
.product-intro-section { border-left: 3px solid var(--color-primary); }
.product-intro-title {
    margin: 0 0 .6rem;
    font-size: 1.2rem;
    line-height: 1.35;
    color: var(--color-primary-dark, var(--color-text));
}
.product-intro { margin: 0 0 .8rem; font-size: 1.02rem; color: var(--color-text); }
.product-intro:last-child { margin-bottom: 0; }

/* --- Kosár oldal --- */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 2.5rem;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.cart-table th, .cart-table td {
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}
.cart-table th {
    background: var(--color-bg);
    font-size: .8rem;
    text-transform: uppercase;
    color: var(--color-muted);
}
.cart-table a { color: var(--color-text); text-decoration: none; }
.cart-img-cell { width: 70px; }
.cart-img-cell img { width: 60px; height: 45px; object-fit: cover; border-radius: 6px; }
.cart-qty { width: 75px; padding: .4rem; border: 1px solid var(--color-border); border-radius: 6px; }

.option-tag, .discount-tag {
    display: inline-block;
    font-size: .78rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    margin-top: .15rem;
}
.option-tag { background: #e2e8f0; color: #334155; }
.discount-tag { background: #fef3c7; color: #92400e; font-weight: 600; }

.cart-summary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    position: sticky;
    top: 1rem;
}
.cart-summary h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.cart-summary dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .4rem 0;
    margin: 0 0 1rem;
}
.cart-summary dt { color: var(--color-muted); }
.cart-summary dd { margin: 0; text-align: right; font-weight: 600; }
.cart-summary .grand-total { font-size: 1.15rem; color: var(--color-primary); font-weight: 700; }

.btn-block { display: block; width: 100%; margin-bottom: .6rem; }
.quote-btn { border: 1px solid var(--color-primary); color: var(--color-primary); background: #fff; }
.quote-btn:hover { background: var(--color-primary-soft); }
.quote-note { font-size: .8rem; margin: 0; }

.empty-state-block {
    text-align: center;
    padding: 3.5rem 1rem;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 2rem;
}

/* --- Auth oldalak --- */
.auth-page { display: flex; justify-content: center; padding: 2.5rem 0; }
.auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow);
}
.auth-card-wide { max-width: 640px; }
.auth-card h1 { margin: 0 0 .75rem; font-size: 1.4rem; }
.auth-card .form-group { margin-bottom: .9rem; }
.auth-card label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.auth-card input, .auth-card textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font: inherit;
    box-sizing: border-box;
}
.auth-card input:focus, .auth-card textarea:focus {
    outline: 2px solid rgba(15,106,180,.35);
    border-color: var(--color-primary);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.auth-switch { text-align: center; margin-top: 1.25rem; font-size: .92rem; }

.role-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.role-toggle .radio {
    display: flex;
    gap: .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .75rem;
    cursor: pointer;
    font-weight: 400;
}
.role-toggle .radio:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.role-toggle small { color: var(--color-muted); }

/* --- Fiók oldal --- */
.account-page { max-width: 720px; margin: 1.5rem auto; }
.account-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.detail-list { display: grid; grid-template-columns: 160px 1fr; gap: .4rem .75rem; margin: 0; }
.detail-list dt { font-weight: 600; color: var(--color-muted); font-size: .88rem; }
.detail-list dd { margin: 0; }
.muted { color: var(--color-muted); }

/* --- Reszponzív --- */
@media (max-width: 860px) {
    .product-detail { grid-template-columns: 1fr; }
    .cart-layout { grid-template-columns: 1fr; }
    .form-row, .role-toggle { grid-template-columns: 1fr; }
    .cart-table { display: block; overflow-x: auto; }
}

/* =====================================================================
   5. LÉPÉS — PÉNZTÁR ÉS KÖSZÖNŐOLDAL
   ===================================================================== */

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 2.5rem;
}

.checkout-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.checkout-section h2 { margin: 0 0 1rem; font-size: 1.15rem; }
.checkout-section .form-group { margin-bottom: .9rem; }
.checkout-section label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.checkout-section input[type="text"], .checkout-section input[type="email"],
.checkout-section textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font: inherit;
}
.checkout-section input:focus, .checkout-section textarea:focus {
    outline: 2px solid rgba(15,106,180,.35);
    border-color: var(--color-primary);
}

.payment-option {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin-bottom: .75rem;
    cursor: pointer;
    font-weight: 400;
}
.payment-option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.payment-option input { margin-top: .3rem; }
.payment-option small { color: var(--color-muted); }

.terms-checkbox {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin-top: 1rem;
    font-weight: 400;
    font-size: .92rem;
}
.terms-checkbox input { margin-top: .25rem; }

.summary-items { list-style: none; margin: 0 0 1rem; padding: 0; }
.summary-items li {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: .92rem;
}
.summary-item-name { flex: 1; }

/* --- Köszönőoldal --- */
.success-page { display: flex; justify-content: center; padding: 2rem 0 3rem; }
.success-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2.5rem;
    max-width: 720px;
    width: 100%;
    text-align: center;
}
.success-icon {
    width: 64px;
    height: 64px;
    line-height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #dcfce7;
    color: #166534;
    font-size: 1.9rem;
}
.success-card h1 { margin: 0 0 .5rem; }
.order-number { font-size: 1.1rem; }
.transfer-box {
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-line);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin: 1.5rem 0;
    text-align: left;
}
.transfer-box h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
.success-items { margin: 1.5rem 0 .75rem; text-align: left; }
.success-total { font-size: 1.15rem; color: var(--color-primary); }
.success-actions { display: flex; gap: .75rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
.success-actions .btn { border: 1px solid var(--color-border); }
.success-actions .btn-primary { border-color: var(--color-primary); }

@media (max-width: 860px) {
    .checkout-layout { grid-template-columns: 1fr; }
}

/* =====================================================================
   6. LÉPÉS — ÜGYFÉLKAPU, GARANCIA, HIBAJEGYEK
   ===================================================================== */

.account-page-wide { max-width: 960px; }

.account-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.25rem;
}
.account-nav a {
    padding: .55rem 1rem;
    text-decoration: none;
    color: var(--color-muted);
    font-weight: 600;
    font-size: .92rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.account-nav a:hover { color: var(--color-primary); }
.account-nav a.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.account-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}
.account-stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    text-decoration: none;
    color: var(--color-text);
}
.account-stat .stat-value { display: block; font-size: 1.6rem; font-weight: 700; }
.account-stat .stat-label { color: var(--color-muted); font-size: .85rem; }

.account-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: .92rem;
}
.account-table th, .account-table td {
    padding: .6rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.account-table th {
    background: var(--color-bg);
    font-size: .78rem;
    text-transform: uppercase;
    color: var(--color-muted);
}
.account-table tr:last-child td { border-bottom: none; }
.account-table a { color: var(--color-primary); text-decoration: none; }

/* Státusz badge-ek (ügyfél oldalon is) */
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #e2e8f0; color: #334155; }
.status-pending    { background: #fef3c7; color: #92400e; }
.status-processing { background: #dbeafe; color: #1e40af; }
.status-shipped    { background: #e0e7ff; color: #3730a3; }
.status-completed  { background: #dcfce7; color: #166534; }
.status-cancelled  { background: #fee2e2; color: #991b1b; }

/* Eszközök / garancia */
.device-card { padding: 1.1rem 1.25rem; }
.device-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
    align-items: flex-start;
    padding: .35rem 0;
}
.device-info { flex: 1; min-width: 240px; }
.device-info .option-tag { margin-left: .25rem; }

.warranty-badge {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}
.warranty-active  { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.warranty-expired { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

.device-serials {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    padding-top: .5rem;
    margin-top: .5rem;
    border-top: 1px dashed var(--color-border);
    font-size: .9rem;
}
.serial-item { display: inline-flex; gap: .35rem; align-items: center; }

.serial {
    display: inline-block;
    background: #f1f5f9;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: .05rem .45rem;
    font-size: .84rem;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.btn-small { padding: .25rem .6rem; font-size: .8rem; border: 1px solid var(--color-border); background: #fff; color: var(--color-text); }
.btn-small:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-danger { background: #fff; border: 1px solid #fecaca; color: var(--color-danger); }

/* Hibajegy üzenetfolyam */
.ticket-thread { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }
.ticket-message {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    background: #f8fafc;
}
.ticket-message.from-admin { background: var(--color-primary-soft); border-color: var(--color-primary-line); }
.ticket-message-meta { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .25rem; }
.ticket-message p { margin: 0; }

.account-card .form-group { margin-bottom: .9rem; }
.account-card label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.account-card input[type="text"], .account-card select, .account-card textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font: inherit;
}

@media (max-width: 700px) {
    .device-row { flex-direction: column; }
}

/* =====================================================================
   FURBIFY IMPORT — állapot-jelvény, galéria, specifikáció
   ===================================================================== */

/* Állapot-fokozat jelvények */
.grade-badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.grade-arany { background: linear-gradient(135deg,#fde68a,#f59e0b); color: #663c00; }
.grade-ezust { background: linear-gradient(135deg,#e5e7eb,#9ca3af); color: #1f2933; }
.grade-bronz { background: linear-gradient(135deg,#e9c9a8,#b57e50); color: #4a2c12; }
.grade-uj    { background: #dcfce7; color: #166534; }

/* Kártyán a jelvény a név alatt */
.product-card .grade-badge { align-self: flex-start; margin: 0 0 .4rem; }

/* Termék-jelvények — Furbify-stílus jelvénysor: állapot + Windows-az-árban
   + garancia. A kártya TETEJÉN, a kép fölött, TELJES szélességben, 3 EGYENLŐ
   oszlopban (a legszélesebb „Nagyon jó”-hoz méretezve) — levegős, nem tömött.
   Közös alap (.pbadge): a háttér az állapotnál arany/ezüst/bronz, a Windows
   semleges, a garancia a márkaszín. */
.pbadges {
    display: flex;
    gap: .3rem;
    width: 100%;
    margin: 0 0 .8rem;
}
.pbadge {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .22rem;
    box-sizing: border-box;
    padding: .3rem .3rem;
    border-radius: 6px;
    line-height: 1;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 0, 0, .06);
}
.pbadge__text {
    display: flex;
    align-items: center;
    gap: .22rem;
    font-weight: 800;
    font-size: .62rem;
    letter-spacing: .01em;
    text-align: center;
    white-space: nowrap;
}
.pbadge__sub {
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .75;
}
.os-badge__logo { flex: 0 0 auto; }

/* Állapot: 3-szegmenses sáv (a szélességet a flex-oszlop adja) */
.cond-badge { min-width: 0; }
.cond-badge .pbadge__bar { display: flex; gap: 2px; width: 100%; margin-top: .05rem; }
.cond-badge .pbadge__bar i {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: currentColor;
    opacity: .22;
}
.cond-badge[data-level="1"] .pbadge__bar i:nth-child(-n+1),
.cond-badge[data-level="2"] .pbadge__bar i:nth-child(-n+2),
.cond-badge[data-level="3"] .pbadge__bar i:nth-child(-n+3) { opacity: 1; }

.cond-arany { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #663c00; }
.cond-ezust { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #1f2933; }
.cond-bronz { background: linear-gradient(135deg, #e9c9a8, #b57e50); color: #4a2c12; }
.cond-uj    { background: #dcfce7; color: #166534; }

/* Windows-az-árban: semleges világos, kék logóval */
.os-badge { background: #eef2f4; color: #1f2933; }

/* Garancia: márkaszín (sötét petrol) */
.warranty-badge { background: var(--color-primary); color: #fff; border-color: rgba(0,0,0,.12); }

/* Termékoldal fejléc-sor (gyártó + állapot) */
.product-meta-line { display: flex; gap: .5rem; align-items: center; margin: .25rem 0 .5rem; flex-wrap: wrap; }
.vendor-tag {
    display: inline-block;
    padding: .2rem .6rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-muted);
}

/* Képgaléria a termékoldalon */
.product-gallery { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.gallery-thumb {
    width: 64px; height: 48px; object-fit: cover;
    border: 2px solid var(--color-border); border-radius: 6px; cursor: pointer;
    background: var(--color-bg);
}
.gallery-thumb:hover, .gallery-thumb.active { border-color: var(--color-primary); }

/* Specifikációs táblázat */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.spec-table th { width: 38%; color: var(--color-muted); font-weight: 600; font-size: .9rem; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }

/* Alkategória al-menü */
.subcategory-nav { margin-top: -1rem; }
.subcategory-nav .category-pill { font-size: .82rem; background: var(--color-bg); }

/* =====================================================================
   SZŰRŐK + LISTAOLDAL + ÉLŐ KERESŐ
   ===================================================================== */

.listing-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    align-items: start;
    padding-bottom: 3rem;
}

.filter-sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    position: sticky;
    top: 1rem;

    /* A szűrőlista magasabb, mint a képernyő (21 képernyőméret, 13 processzor...).
       max-height + saját görgetés nélkül a ragadó doboz alja ELÉRHETETLEN volt:
       a teteje odaragadt a viewporthoz, és csak az oldal legalján csúszott fel. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;   /* a lista végén ne rántsa magával az oldalt */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.filter-sidebar::-webkit-scrollbar { width: 10px; }
.filter-sidebar::-webkit-scrollbar-track { background: transparent; }

.filter-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 999px;
    border: 3px solid var(--color-surface);
}

.filter-sidebar::-webkit-scrollbar-thumb:hover { background: var(--color-primary-line); }

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--color-border);
}
.filter-clear { font-size: .82rem; color: var(--color-danger); text-decoration: none; }

.filter-group { margin-bottom: .5rem; border-bottom: 1px solid var(--color-border); padding-bottom: .5rem; }
.filter-group summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    padding: .3rem 0;
    list-style-position: inside;
}
.filter-label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .35rem; }
.filter-search {
    width: 100%;
    padding: .45rem .6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font: inherit;
}

.filter-options { max-height: 240px; overflow-y: auto; padding: .35rem .1rem .1rem; }
.filter-opt {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem 0;
    font-size: .88rem;
    cursor: pointer;
}
.filter-opt span:nth-of-type(1) { flex: 1; }
.filter-count { color: var(--color-muted); font-size: .78rem; }

.result-count { margin: 0 0 1rem; }

/* --- Globális élő kereső (fejléc) --- */
.header-search { position: relative; flex: 1; max-width: 360px; margin: 0 1.5rem; }
.header-search input {
    width: 100%;
    padding: .5rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font: inherit;
}
.search-results {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 50;
    display: none;
}
.search-results.open { display: block; }
.search-result {
    display: flex;
    gap: .6rem;
    align-items: center;
    padding: .5rem .7rem;
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}
.search-result:hover { background: var(--color-bg); }
.search-result img { width: 44px; height: 33px; object-fit: cover; border-radius: 4px; background: var(--color-bg); }
.search-result-info { flex: 1; min-width: 0; }
.search-result-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-price { font-size: .82rem; color: var(--color-primary); font-weight: 700; }
.search-empty, .search-more { padding: .6rem .7rem; color: var(--color-muted); font-size: .85rem; text-align: center; }

@media (max-width: 860px) {
    .listing-layout { grid-template-columns: 1fr; }

    /* Mobilon a szűrő nem ragad, ezért a saját görgetése is felesleges lenne:
       dobozon belüli görgetés az oldalgörgetés helyett rossz élmény. */
    .filter-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
    /* Mobilon a ~800px magas szűrőpanel 2 képernyőnyire tolta le az első terméket.
       Ezért itt összecsukható: a gombot a JS teszi láthatóvá, és ő adja az
       `is-collapsed` osztályt is — JS nélkül a szűrők a régi módon nyitva maradnak. */
    .filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        color: inherit;
        font: inherit;
        font-weight: 600;
        padding: .3rem .7rem;
        border-radius: 999px;
        cursor: pointer;
    }
    .filter-toggle::after { content: '▾'; font-size: .8em; }
    .filter-sidebar.is-collapsed .filter-toggle::after { content: '▸'; }
    .filter-sidebar.is-collapsed .filter-body { display: none; }
    .filter-sidebar.is-collapsed .filter-header { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
    .header-search { order: 3; flex-basis: 100%; max-width: none; margin: .5rem 0 0; }
}

/* --- Listaoldal lapozó --- */
.listing-results .pagination { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: 1.5rem; align-items: center; }
.listing-results .pagination a {
    padding: .4rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
    font-size: .9rem;
}
.listing-results .pagination a.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.listing-results .pagination a:hover:not(.active) { border-color: var(--color-primary); color: var(--color-primary); }
.page-gap { color: var(--color-muted); padding: 0 .2rem; }

/* --- Esztétikai besorolás oldal + termékoldali leírás --- */
.grade-desc {
    background: var(--color-bg);
    border-left: 3px solid var(--color-border);
    padding: .6rem .8rem;
    border-radius: 6px;
    font-size: .9rem;
    margin: .5rem 0;
}
.grade-desc a { color: var(--color-primary); text-decoration: none; white-space: nowrap; }

.grades-page { max-width: 900px; margin: 0 auto 3rem; }
.grades-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.grade-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
}
.grade-card h2 { font-size: 1.1rem; margin: .6rem 0 .4rem; }
.grade-card .grade-short { font-weight: 600; color: var(--color-text); margin: 0 0 .5rem; }
.grade-card p { font-size: .92rem; }
.grades-note { text-align: center; margin-top: 1rem; }
.footer-links { margin: 0 0 .5rem; }
.footer-links a { color: var(--color-muted); text-decoration: none; }
.footer-links a:hover { color: var(--color-primary); }

/* --- Akciós ár --- */
.price-sale { position: relative; }
.sale-badge {
    display: inline-block;
    background: var(--color-danger);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 4px;
    margin-right: .4rem;
    vertical-align: middle;
}
.price-sale strong { color: var(--color-danger); }
.price-original {
    display: inline-block;
    margin-left: .4rem;
    color: var(--color-muted);
    text-decoration: line-through;
    font-size: .9rem;
}
.price-large .price-original { font-size: 1.1rem; }

/* --- Esztétikai besorolás felsorolás + tájékoztató oldalak --- */
.grade-bullets { margin: .75rem 0 0; padding-left: 1.1rem; }
.grade-bullets li { font-size: .9rem; margin-bottom: .3rem; line-height: 1.45; }

.info-page { max-width: 820px; margin: 0 auto 3rem; }
.info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}
.info-card h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
.info-list { margin: 0; padding-left: 1.2rem; }
.info-list li { margin-bottom: .4rem; line-height: 1.5; }
.info-legal .info-card p { font-size: .93rem; line-height: 1.6; }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* --- Kiemelt figyelmeztetés (pl. nem átvevőpont) --- */
.notice-inline {
    display: inline-block;
    margin-top: .25rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 4px;
    padding: .15rem .5rem;
    font-size: .85rem;
}

/* --- Stripe teszt mód jelzés --- */
.test-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: .3rem;
}

/* =====================================================================
   FŐOLDAL — HERO, ELŐNYSÁV, BIZALMI BLOKK, GYIK
   ===================================================================== */

/* --- Hero körhinta --- */
.hero-carousel {
    position: relative;
    margin: 1.25rem 0 2rem;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.hero-slide { display: none; }

.hero-slide.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 340px;
}

/* A termékfotók fehér hátterűek, ezért világos panelen ülnek. */
.hero-media {
    background: linear-gradient(160deg, #ffffff, var(--color-primary-soft));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.hero-media img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    mix-blend-mode: multiply;   /* elnyeli a fotók fehér hátterét */
}

.hero-copy {
    background: linear-gradient(150deg, #0A4C58, #062E36);
    color: #fff;
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .85rem;
}

.hero-copy h1 {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.18;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.hero-copy h1 em {
    font-style: normal;
    color: #6FD3D8;
}

.hero-lead {
    margin: 0;
    color: #C8DEE0;
    font-size: 1rem;
    max-width: 46ch;
}

.hero-featured {
    margin: 0;
    font-size: .9rem;
    color: #A9C8CC;
    padding-top: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.hero-featured strong { color: #fff; font-weight: 600; }
.hero-price { color: #6FD3D8; font-weight: 700; white-space: nowrap; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-top: .35rem;
}

.btn-hero {
    background: #fff;
    color: var(--color-primary-dark);
    font-weight: 600;
}

.btn-hero:hover { background: #DCEFF0; color: var(--color-primary-dark); }

.hero-link {
    color: #C8DEE0;
    font-size: .9rem;
    text-decoration: underline;
}

.hero-link:hover { color: #fff; }

/* pöttyök */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: .9rem;
    transform: translateX(-50%);
    display: flex;
    gap: .45rem;
}

.hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: width .18s ease, background .18s ease;
}

.hero-dot.is-active {
    width: 26px;
    background: #6FD3D8;
}

.hero-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- Előnysáv --- */
.usp-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 2.25rem;
}

.usp {
    background: var(--color-surface);
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem 1.25rem;
}

.usp-icon {
    width: 38px;
    height: 38px;
    flex: none;
    color: var(--color-primary);
}

.usp h2 {
    margin: 0 0 .15rem;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.usp p { margin: 0; font-size: .87rem; color: var(--color-muted); }

/* --- Szekciócím --- */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin-bottom: 1rem;
}

.section-head h2 {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: -.015em;
}

.section-head p { margin: 0; color: var(--color-muted); font-size: .92rem; }

/* --- Bizalmi blokk --- */
.trust {
    margin: 1rem 0 3rem;
    padding: 2rem 0 0;
    border-top: 1px solid var(--color-border);
}

.trust > h2 {
    margin: 0 0 1.25rem;
    font-size: 1.35rem;
    letter-spacing: -.015em;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 1.5rem;
}

.trust-item h3 {
    margin: 0 0 .4rem;
    font-size: 1rem;
    color: var(--color-primary-dark);
}

.trust-item p { margin: 0; font-size: .92rem; color: var(--color-muted); line-height: 1.6; }

/* --- Vélemények (csak valós adattal jelenik meg) --- */
.reviews { margin: 0 0 3rem; }
.reviews h2 { margin: 0 0 1.25rem; font-size: 1.35rem; letter-spacing: -.015em; }

.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.5rem;
}

.review {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 1px 2px rgba(13, 27, 33, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: hidden;
}
.review::before {
    content: "\201C";                     /* nagy díszidézőjel a háttérben */
    position: absolute; top: -.55rem; right: .75rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 5rem; line-height: 1;
    color: var(--color-primary-soft);
    pointer-events: none; z-index: 0;
}
.review:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(13, 27, 33, .10);
    border-color: var(--color-primary-line);
}
.review > * { position: relative; z-index: 1; }

.review-top { display: flex; flex-direction: column; gap: .55rem; margin-bottom: .8rem; }
.review-stars { color: #E6A817; letter-spacing: .12em; font-size: 1.05rem; }

/* Bizalmi jelvények: ellenőrzött (zöld pill) + csatorna (semleges pill) */
.review-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0; }
.review-verified {
    display: inline-flex; align-items: center; gap: .3em;
    padding: .14rem .6rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; color: var(--color-success);
    background: rgba(31, 122, 77, .10);
}
.review-verified span { font-weight: 800; }
.review-channel {
    display: inline-flex; align-items: center;
    padding: .14rem .6rem; border-radius: 999px;
    font-size: .72rem; color: var(--color-muted);
    background: var(--color-bg); border: 1px solid var(--color-border);
}

.review blockquote {
    margin: 0 0 1rem; padding: 0;
    font-size: 1rem; line-height: 1.62; color: var(--color-text);
}

.review-product {
    margin: 0 0 1.1rem; padding: .7rem .85rem;
    background: var(--color-bg); border-radius: 10px; font-size: .82rem;
}
.review-product-label { display: block; margin-bottom: .3rem; color: var(--color-muted); font-weight: 600; }
.review-product-list { list-style: none; margin: 0; padding: 0; }
.review-product-list li { margin: .18rem 0; }
.review-product-list a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.review-product-list a:hover { text-decoration: underline; }

/* Szerző (név + dátum), a kártya alján, elválasztóval */
.review-author {
    display: flex; flex-direction: column; line-height: 1.3;
    margin-top: auto; padding-top: .95rem;
    border-top: 1px solid var(--color-border);
}
.review-author-name { font-weight: 600; color: var(--color-text); font-size: .9rem; }
.review-author-date { font-size: .78rem; color: var(--color-muted); }

/* Elkelt / már nem elérhető termék (közvetlen linkről megnyitva) */
.product-unavailable {
    margin: 1rem 0; padding: 1rem 1.2rem;
    background: #fbf5f0; border: 1px solid #e5cbb8; border-radius: 8px;
}
.product-unavailable p { margin: 0 0 .8rem; color: #7a4a2b; }

/* --- GYIK --- */
.faq {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 2rem;
    margin: 0 0 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.faq-intro h2 {
    margin: 0 0 .6rem;
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.faq-intro p { margin: 0 0 1rem; color: var(--color-muted); font-size: .95rem; }

.faq-more {
    font-size: .87rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

.faq-more:hover { text-decoration: underline; }

.faq-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:last-child { border-bottom: none; }

.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 3rem 1rem 1.25rem;
    position: relative;
    font-size: .97rem;
    font-weight: 500;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "";
    position: absolute;
    right: 1.4rem;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 2px solid var(--color-muted);
    border-bottom: 2px solid var(--color-muted);
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.faq-item[open] summary::after {
    transform: rotate(-135deg);
    margin-top: -2px;
    border-color: var(--color-primary);
}

.faq-item summary:hover { color: var(--color-primary); }

.faq-item summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.faq-answer {
    padding: 0 1.25rem 1.1rem;
    font-size: .93rem;
    line-height: 1.65;
    color: var(--color-muted);
}

.faq-answer p { margin: 0; }
.faq-answer strong { color: var(--color-text); }

@media (max-width: 860px) {
    .hero-slide.is-active { grid-template-columns: 1fr; }
    .hero-media { padding: 1.25rem; }
    .hero-media img { max-height: 210px; }
    .hero-copy { padding: 1.5rem 1.35rem 2.5rem; }
    .faq { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-dot { transition: none; }
    .faq-item summary::after { transition: none; }
}

/* A projektben nincs globális "a" színszabály, ezért az új főoldali szekciók
   linkjei böngésző-alapkékek lennének. */
.usp a,
.trust-item a,
.faq-answer a,
.faq-more {
    color: var(--color-primary);
}

.usp a:hover,
.trust-item a:hover,
.faq-answer a:hover { color: var(--color-primary-dark); }

/* Hero: kategória belépő ára + a képen látható gép neve */
.hero-featured {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.hero-from { font-size: .97rem; color: #DCEFF0; }
.hero-shown { font-size: .84rem; color: #93B4BA; }

/* --- Listaoldal: rendezősáv --- */
.listing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

.listing-toolbar .result-count { margin: 0; }

.sort-form {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sort-label { font-size: .88rem; color: var(--color-muted); }

.sort-select {
    padding: .4rem 1.9rem .4rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit;
    font-size: .88rem;
    color: var(--color-text);
    cursor: pointer;
}

.sort-select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* A hero gomb hover-javítása: a .btn-primary:hover szabály specifikusabb volt,
   és sötét hátteret adott a sötét szöveg alá. A tripla osztály mindent felülír,
   ha a gombon véletlenül btn-primary is maradna. */
.btn.btn-hero,
.btn.btn-primary.btn-hero {
    background: #fff;
    color: var(--color-primary-dark);
}

.btn.btn-hero:hover,
.btn.btn-primary.btn-hero:hover:not(:disabled) {
    background: #DCEFF0;
    color: var(--color-primary-dark);
}

/* =====================================================================
   KATEGÓRIÁK — főoldali csempék + hangsúlyosabb pillek a listaoldalon
   ===================================================================== */

/* --- Főoldal: kategóriacsempék --- */
.cat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.cat-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    box-shadow: var(--shadow);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.cat-tile:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 18px rgba(12, 95, 110, .14);
    transform: translateY(-2px);
}

.cat-tile:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.cat-tile-icon {
    flex: none;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.cat-tile-icon svg { width: 30px; height: 30px; display: block; }

.cat-tile-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.cat-tile-name {
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.015em;
}

.cat-tile-meta { font-size: .86rem; color: var(--color-muted); }
.cat-tile-meta strong { color: var(--color-primary); font-weight: 600; }

.cat-tile-arrow {
    margin-left: auto;
    flex: none;
    font-size: 1.2rem;
    color: var(--color-muted);
    transition: transform .16s ease, color .16s ease;
}

.cat-tile:hover .cat-tile-arrow {
    color: var(--color-primary);
    transform: translateX(3px);
}

/* --- Listaoldal: nagyobb, olvashatóbb pillek --- */
.category-nav {
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.category-pill {
    padding: .6rem 1.35rem;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: var(--shadow);
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.category-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

/* Eddig NEM volt aktív állapot: a kiválasztott kategória semmiben nem
   különbözött a többitől a listaoldalon. */
.category-pill.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.category-pill.active:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

.category-pill:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Alkategóriák: egy fokkal visszafogottabbak, de már nem apró betűsek */
.subcategory-nav { margin-top: -.5rem; }

.subcategory-nav .category-pill {
    font-size: .92rem;
    font-weight: 500;
    padding: .45rem 1.1rem;
    background: var(--color-bg);
    box-shadow: none;
}

.subcategory-nav .category-pill:hover { background: var(--color-primary-soft); }

@media (max-width: 620px) {
    .cat-tile { padding: 1rem; gap: .85rem; }
    .cat-tile-icon { width: 46px; height: 46px; }
    .cat-tile-icon svg { width: 26px; height: 26px; }
    .cat-tile-name { font-size: 1.06rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-tile,
    .cat-tile-arrow,
    .category-pill { transition: none; }
    .cat-tile:hover { transform: none; }
}

/* =====================================================================
   CÉLCSOPORT-AJÁNLÓK ("Kinek keresel gépet?")
   ===================================================================== */
.profiles { margin: 0 0 2.75rem; }

.profiles .section-head { margin-bottom: 1.1rem; }

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 1rem;
}

.profile-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.35rem 1.35rem 1.15rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    box-shadow: var(--shadow);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.profile-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 18px rgba(12, 95, 110, .14);
    transform: translateY(-2px);
}

.profile-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.profile-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    margin-bottom: .15rem;
}

.profile-icon svg { width: 27px; height: 27px; display: block; }

.profile-title {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.profile-lead {
    font-size: .89rem;
    color: var(--color-muted);
    line-height: 1.55;
    flex: 1;          /* a CTA minden kártyán alul, egy vonalban */
}

.profile-cta {
    font-size: .87rem;
    font-weight: 600;
    color: var(--color-primary);
    padding-top: .35rem;
}

.profile-card:hover .profile-cta { color: var(--color-primary-dark); }

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

/* --- Visszaküldési irányelv: kiemelt tények (Google Merchant is ezt keresi) --- */
.policy-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.policy-fact {
    background: var(--color-primary-soft);
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.policy-label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.policy-fact strong { font-size: 1.1rem; }
.policy-note { font-size: .85rem; color: var(--color-muted); }

.policy-address {
    display: inline-block;
    margin-top: .35rem;
    padding: .5rem .75rem;
    background: var(--color-bg);
    border-left: 3px solid var(--color-primary);
    font-size: .93rem;
}

/* --- Szállítási díj a kosárban / pénztárban --- */
.shipping-free {
    color: var(--color-success);
    font-weight: 600;
}

.free-ship-hint {
    margin: .5rem 0 0;
    padding: .6rem .75rem;
    background: var(--color-primary-soft);
    border-left: 3px solid var(--color-primary);
    border-radius: 4px;
    font-size: .87rem;
    line-height: 1.45;
    color: var(--color-text);
}

.free-ship-hint strong { color: var(--color-primary); }

.free-ship-hint.is-free {
    background: #E6F4EC;
    border-left-color: var(--color-success);
    color: var(--color-success);
    font-weight: 600;
}

/* --- Termékkártya: műszaki spec-sor ---
   A rácson sok terméknév azonos (ugyanaz a modell más konfigurációval),
   a különbséget ez a sor mutatja meg. */
.card-specs {
    margin: .1rem 0 .35rem;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

/* --- Süti-tájékoztató sáv --- */
.cookie-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--color-surface);
    border-top: 2px solid var(--color-primary);
    box-shadow: 0 -4px 18px rgba(13, 27, 33, .12);
    padding: .9rem 1rem;
}

/* A [hidden] alapértelmezett display:none-ját bármelyik saját display-szabály
   felülírná — itt nincs ilyen, de a védőszabály olcsó és megelőz egy hibát. */
.cookie-bar[hidden] { display: none; }

.cookie-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
}

.cookie-bar p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--color-text);
    max-width: 78ch;
}

.cookie-bar a { color: var(--color-primary); }

.cookie-bar .btn {
    flex: none;
    margin-top: 0;      /* a .btn-primary "margin-top:auto"-ját semlegesíti */
    padding: .5rem 1.6rem;
}

@media (max-width: 620px) {
    .cookie-bar-inner { flex-direction: column; align-items: stretch; }
    .cookie-bar .btn { width: 100%; }
}

/* =====================================================================
   RÓLUNK OLDAL
   ===================================================================== */
.about-hero {
    max-width: 62ch;
    margin: 2rem 0 2.5rem;
}

.about-kicker {
    margin: 0 0 .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.about-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.about-lead {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--color-muted);
}

/* --- Számok sávja --- */
.about-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 3rem;
}

.about-fact {
    background: var(--color-primary-soft);
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.about-fact strong {
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--color-primary-dark);
    font-variant-numeric: tabular-nums;
}

.about-fact span {
    font-size: .88rem;
    line-height: 1.45;
    color: var(--color-muted);
}

/* --- Szövegtörzs --- */
.about-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem 3rem;
    margin-bottom: 3rem;
}

.about-block h2 {
    margin: 0 0 .6rem;
    font-size: 1.2rem;
    letter-spacing: -.015em;
    color: var(--color-primary-dark);
}

.about-block p {
    margin: 0 0 .85rem;
    font-size: .97rem;
    line-height: 1.7;
    max-width: 62ch;
}

.about-block p:last-child { margin-bottom: 0; }
.about-block a { color: var(--color-primary); }
.about-block em { font-style: italic; }

/* --- Lezáró blokk --- */
.about-cta {
    background: linear-gradient(150deg, #0A4C58, #062E36);
    color: #fff;
    border-radius: var(--radius);
    padding: 2rem 2rem 2.25rem;
    margin-bottom: 3rem;
}

.about-cta h2 {
    margin: 0 0 .5rem;
    font-size: 1.4rem;
    letter-spacing: -.02em;
}

.about-cta p {
    margin: 0 0 1.25rem;
    color: #C8DEE0;
    max-width: 58ch;
    line-height: 1.6;
}

.about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.about-cta .btn-primary {
    background: #fff;
    color: var(--color-primary-dark);
    margin-top: 0;
}

.about-cta .btn-primary:hover:not(:disabled) { background: #DCEFF0; }

.about-cta .quote-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
}

.about-cta .quote-btn:hover { background: rgba(255, 255, 255, .1); }

/* ÁSZF/GDPR: alcím az info-kártyán belül */
.aszf-subhead {
    margin: 1.25rem 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.info-card .aszf-subhead:first-of-type { margin-top: 1rem; }

/* Jogi oldalak: hatályosság dátuma a cím alatt */
.legal-updated {
    margin: -.35rem 0 1.25rem;
    font-size: .85rem;
    color: var(--color-muted);
}

/* =====================================================================
   BLOG + TUDÁSTÁR (SEO tartalom)
   ===================================================================== */

/* Közös: szöveges oldal fej */
.info-page { margin-top: .25rem; }
.info-page > h1 { margin-bottom: .35rem; }
.info-page .lead,
.lead {
    color: var(--color-muted);
    font-size: 1.08rem;
    line-height: 1.6;
    max-width: 62ch;
    margin: 0 0 1.75rem;
}

/* --- Blog: bejegyzéslista --- */
.blog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.blog-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.blog-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 18px rgba(12, 95, 110, .14);
    transform: translateY(-2px);
}
.blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: var(--color-text);
}
.blog-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--color-primary-soft);
    display: block;
}
.blog-card-body {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: 1;
}
.blog-card-body h2 {
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0;
}
.blog-card-body p {
    color: var(--color-muted);
    font-size: .92rem;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.blog-date {
    font-size: .78rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.blog-more {
    color: var(--color-primary);
    font-weight: 600;
    font-size: .9rem;
    margin-top: auto;
}

/* --- Blog: egy bejegyzés (olvasható tipográfia) --- */
.blog-article {
    max-width: 740px;
    margin: 0 auto 2.5rem;
}
.blog-article-header { margin-bottom: 1rem; }
.blog-article-header h1 {
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    line-height: 1.2;
    margin: .35rem 0 0;
}
.blog-article-cover {
    width: 100%;
    border-radius: var(--radius);
    margin: 1.25rem 0 1.75rem;
    display: block;
}
.blog-article-body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text);
}
.blog-article-body > *:first-child { margin-top: 0; }
.blog-article-body h2 {
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 2rem 0 .6rem;
    color: var(--color-primary-dark);
}
.blog-article-body h3 {
    font-size: 1.12rem;
    margin: 1.6rem 0 .5rem;
}
.blog-article-body p { margin: 0 0 1.05rem; }
.blog-article-body ul,
.blog-article-body ol { margin: 0 0 1.05rem 1.3rem; }
.blog-article-body li { margin: .3rem 0; }

/* Összehasonlító táblázatok a cikkekben — telefonon a doboz görget, nem az oldal */
.blog-article-body .table-wrap { overflow-x: auto; margin: 0 0 1.25rem; -webkit-overflow-scrolling: touch; }
.blog-article-body table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.45; }
.blog-article-body th,
.blog-article-body td { padding: .55rem .7rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.blog-article-body th { background: var(--color-primary-soft); font-weight: 600; white-space: nowrap; }
.blog-article-body tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .02); }
.blog-article-body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-back { margin-top: 1.75rem; }
.blog-back a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}
.blog-back a:hover { text-decoration: underline; }

/* Lista lapozó (a listing-results scope-on kívül) */
.info-page .pagination {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.info-page .pagination a {
    padding: .4rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
    font-size: .9rem;
}
.info-page .pagination a.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* --- Tudástár: betűugró + fogalomlista --- */
.glossary-letters {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1.75rem;
}
.glossary-letters a {
    display: inline-flex;
    min-width: 2.1rem;
    justify-content: center;
    padding: .3rem .5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 600;
    font-size: .9rem;
    background: var(--color-surface);
    transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.glossary-letters a:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.glossary-group { margin-bottom: 2rem; scroll-margin-top: 1rem; }
.glossary-letter {
    font-size: 1.15rem;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary-line);
    padding-bottom: .4rem;
    margin: 0 0 .9rem;
    scroll-margin-top: 1rem;
}
.glossary-list {
    display: grid;
    grid-template-columns: minmax(150px, 240px) 1fr;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.glossary-list dt {
    padding: .95rem 1.25rem;
    font-weight: 600;
    border-top: 1px solid var(--color-border);
}
.glossary-list dd {
    padding: .95rem 1.25rem;
    margin: 0;
    color: var(--color-muted);
    font-size: .93rem;
    line-height: 1.55;
    border-top: 1px solid var(--color-border);
}
.glossary-list dt:first-of-type,
.glossary-list dd:first-of-type { border-top: none; }
.glossary-list dt a {
    color: var(--color-primary);
    text-decoration: none;
}
.glossary-list dt a:hover { text-decoration: underline; }

/* --- Tudástár: egy fogalom oldala --- */
.glossary-term .info-card p {
    margin: 0;
    line-height: 1.7;
    font-size: 1.03rem;
    color: var(--color-text);
}

@media (max-width: 640px) {
    /* A definíciós rács mobilon egyoszlopos: fogalom fölött, magyarázat alatta */
    .glossary-list { grid-template-columns: 1fr; }
    .glossary-list dd {
        border-top: none;
        padding-top: 0;
        padding-bottom: 1rem;
    }
    .glossary-list dt:first-of-type + dd { border-top: none; }
}

/* =====================================================================
   PÉNZTÁR — szállítási mód választó + GLS csomagpont-választó
   ===================================================================== */
.shipping-option span { flex: 1; }
.shipping-fee-badge {
    float: right;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
    margin-left: .75rem;
}

/* A csomagpont-választó (GLS térkép vagy MPL szöveges mező) a hozzá tartozó
   rádió alatt, kicsit behúzva */
.shipping-point-picker {
    margin: -.35rem 0 .85rem 2.1rem;
}
.shipping-logistics-note {
    display: block;
    margin-top: .25rem;
    color: var(--color-muted);
    font-style: italic;
}
.mpl-point-help {
    display: block;
    font-size: .85rem;
    color: var(--color-text);
    margin-bottom: .4rem;
}
.mpl-point-input {
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .9rem;
}
.mpl-point-input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.gls-point-selected {
    margin-top: .55rem;
    padding: .55rem .8rem;
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    font-size: .9rem;
    line-height: 1.4;
}
.gls-point-selected .muted { display: block; font-size: .8rem; }

.btn-outline {
    background: #fff;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary-soft); }

.shipping-free-hint { margin: .25rem 0 .5rem; }
.success-shipping {
    margin: .75rem 0;
    padding: .6rem .9rem;
    background: var(--color-primary-soft);
    border-radius: var(--radius);
    font-size: .95rem;
}

/* A GLS térkép-dialog a widget saját stílusát hozza; csak biztosítjuk,
   hogy felugró módban elég nagy legyen a lista + térkép. */
gls-dpm-dialog:not(:defined) { display: none; }

/* =====================================================================
   KUPON — pénztári doboz + kedvezmény sor
   ===================================================================== */
.coupon-box { margin: 0 0 1rem; }
.coupon-input-row { display: flex; gap: .5rem; }
.coupon-input-row input {
    flex: 1;
    padding: .5rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .9rem;
    text-transform: uppercase;
}
.coupon-input-row input:focus { outline: none; border-color: var(--color-primary); }
.coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    font-size: .9rem;
}
/* A saját display:flex felülírná a [hidden] attribútumot, ezért a kupon-blokk
   üres kóddal is látszana. Ez az override visszaadja a rejtést (mint a
   .cookie-bar[hidden] / .welcome-popup[hidden] esetén). */
.coupon-input-row[hidden], .coupon-applied[hidden] { display: none; }

/* Ugyanez a fizetési opcióknál: a .payment-option display:flex-e miatt a rejtett
   utánvét (értékhatár / Utánvét Ellenőr) látszott, de kattintásra a JS azonnal
   visszaváltott utalásra — „nem lehet rákattintani". */
.payment-option[hidden] { display: none; }

/* Fizetési logók a kártyás opció alatt (Visa / Mastercard / Powered by Stripe).
   Csak akkor jelennek meg, ha a kártyás fizetés tényleg elérhető (a Stripe-blokkon
   belül) — így nem ígérünk kártyát, amíg nincs bekapcsolva. */
.payment-logos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .55rem;
}
.payment-logo {
    height: 26px;
    width: auto;
    display: block;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
    padding: 3px 5px;
}
.payment-logo-stripe {
    height: 26px;
    border: none;
    background: transparent;
    padding: 0;
}

/* Lábléc — fizetési logók (csak ha a kártyás fizetés él). */
.footer-payments {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 .5rem;
}
.footer-payments-label { color: var(--color-muted); font-size: .85rem; }
.footer-payment-logo {
    height: 24px;
    width: auto;
    display: block;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
    padding: 3px 5px;
}
.footer-payment-stripe { height: 24px; border: none; background: transparent; padding: 0; }
.coupon-msg { margin: .4rem 0 0; font-size: .85rem; color: #b91c1c; }
.summary-discount { color: #15803d; font-weight: 600; }

/* =====================================================================
   „ELSŐ VÁSÁRLÁS" FELUGRÓ
   ===================================================================== */
.welcome-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(12, 24, 28, .55);
}
/* A hidden attribútum győzzön a fenti display:flex fölött (különben nem
   lehet elrejteni/bezárni, és mindig látszana). */
.welcome-popup[hidden] { display: none; }

/* =====================================================================
   VÉLEMÉNY — csillagos értékelő űrlap + összegző
   ===================================================================== */
.star-rating { border: none; padding: 0; margin: 0 0 1rem; }
.star-rating legend { font-weight: 600; margin-bottom: .35rem; padding: 0; }
.star-rating .stars { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.star-rating .stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.star-rating .stars label { font-size: 2.1rem; line-height: 1; color: var(--color-border); cursor: pointer; }
.star-rating .stars input:checked ~ label,
.star-rating .stars label:hover,
.star-rating .stars label:hover ~ label { color: #E0A32E; }
.star-rating .stars input:focus-visible + label { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.reviews-summary { font-size: 1.1rem; margin: 0 0 1.25rem; }
.reviews-summary .review-stars { font-size: 1.15rem; }

/* Facet landing oldalak bevezető szövege a H1 alatt */
.listing-intro { color: var(--color-muted); max-width: 70ch; margin: -.25rem 0 1.25rem; line-height: 1.6; }
.welcome-popup-inner {
    position: relative;
    max-width: 420px;
    width: 100%;
    background: #fff;
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem 1.5rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .25);
    text-align: center;
}
.welcome-popup-close {
    position: absolute;
    top: .5rem; right: .6rem;
    border: none; background: none;
    font-size: 1.6rem; line-height: 1;
    color: var(--color-muted); cursor: pointer;
}
.welcome-popup-kicker {
    margin: 0 0 .25rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .8rem;
    color: var(--color-primary);
    font-weight: 700;
}
.welcome-popup-inner h3 { margin: 0 0 .5rem; font-size: 1.35rem; }
.welcome-popup-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: .75rem 0 1rem;
}
.welcome-popup-code code {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .35rem .75rem;
    background: var(--color-primary-soft);
    border: 1px dashed var(--color-primary);
    border-radius: var(--radius);
    color: var(--color-primary);
}

/* --- SEO belső linkháló: facet-landing linkek a lista alján --- */
.facet-links {
    margin: 2.5rem 0 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border);
}

.facet-links > h2 {
    font-size: 1.15rem;
    margin: 0 0 1.25rem;
    color: var(--color-text);
}

.facet-links-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem 2rem;
}

.facet-links-group h3 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-muted);
    margin: 0 0 .6rem;
}

.facet-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.facet-links-list a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .8rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text);
    text-decoration: none;
    font-size: .9rem;
    box-shadow: var(--shadow);
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.facet-links-list a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.facet-links-count {
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-muted);
    background: var(--color-bg);
    border-radius: 999px;
    padding: .05rem .45rem;
}

.facet-links-list a:hover .facet-links-count {
    color: var(--color-primary);
}

/* Márkafüggetlenségi nyilatkozat a láblécben (Google Merchant „Megtévesztés”
   irányelv: nyilatkozat, ha nem hivatalos partnerként használunk márkaneveket). */
.footer-disclaimer {
    margin: .3rem auto 0;
    max-width: 860px;
    font-size: .68rem;
    line-height: 1.4;
    color: var(--color-muted);
    opacity: .8;
}

/* =====================================================================
   KOSÁRTÁBLA MOBILON — blokkos elrendezés
   375 px-en a 7 oszlopos táblázat ~509 px széles volt, így az „Összesen”
   oszlop és a törlés gomb csak vízszintes görgetéssel volt elérhető.
   Mobilon ezért soronként kártyává alakítjuk: a fejléc eltűnik, és minden
   érték a saját címkéjével (data-label) jelenik meg.
   ===================================================================== */
@media (max-width: 600px) {
    .cart-table thead { display: none; }
    .cart-table,
    .cart-table tbody,
    .cart-table tr,
    .cart-table td { display: block; width: auto; }

    .cart-table tr {
        position: relative;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: .75rem;
        margin-bottom: .75rem;
        overflow: hidden;
    }
    .cart-table td { border: 0; padding: .15rem 0; }

    /* A termékkép a név mellé kerül, nem fölé */
    .cart-table .cart-img-cell { float: left; margin: 0 .75rem .25rem 0; }
    .cart-table .cart-img-cell img { width: 64px; height: auto; display: block; }

    /* Címkés sorok: bal oldalt a megnevezés, jobb oldalt az érték */
    .cart-table td[data-label] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        clear: both;
    }
    .cart-table td[data-label]::before {
        content: attr(data-label);
        color: var(--color-muted);
        font-size: .85em;
    }
    .cart-table td[data-label] .cart-qty { width: 72px; }

    /* A törlés gomb a kártya jobb felső sarkába */
    .cart-table .cart-remove-cell {
        position: absolute;
        top: .5rem;
        right: .5rem;
        padding: 0;
    }
}

/* =====================================================================
   CÉGES VENDÉGVÁSÁRLÁS — a cégnév/adószám mezők csak akkor látszanak,
   ha a vevő bepipálta a „Cégként vásárolok” jelölőt.
   A CSS önmagában (JS NÉLKÜL is) megoldja a nyitást — a checkbox a
   .company-fields blokk ELŐTTI testvér, ezért működik a ~ szelektor.
   ===================================================================== */
.company-fields { display: none; }
.form-check:has(#is_company:checked) ~ .company-fields { display: block; }
.form-check { display: flex; align-items: center; gap: .5rem; }
.form-check label { margin: 0; font-weight: 500; }
.form-hint { font-size: .85rem; margin-top: -.25rem; }

/* =====================================================================
   ISKOLAKEZDÉS gyűjtőoldal (/iskolakezdes)
   ===================================================================== */
.school-hero { max-width: 760px; margin: 0 auto 2rem; text-align: center; }
.school-hero h1 { margin: .25rem 0 1rem; }
.school-stock {
    display: inline-block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-size: .95rem;
}
.school-segments { margin: 2.5rem 0; }
.school-segments > h2 { text-align: center; margin-bottom: 1.5rem; }
.school-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.school-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    padding: 1.25rem;
}
.school-card h3 { margin: 0 0 .25rem; }
.school-kinek { color: var(--color-muted); font-size: .9rem; margin: 0 0 .75rem; }
.school-tipp {
    font-size: .9rem;
    border-left: 3px solid var(--color-primary);
    padding-left: .75rem;
    margin: .75rem 0;
}
.school-meta { font-size: .9rem; color: var(--color-muted); margin-top: auto; }
.school-card .btn { margin-top: .75rem; }

/* Főoldali szezonális kiemelés */
.season-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    border: 1px solid var(--color-primary-line, var(--color-border));
    background: var(--color-surface);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}
.season-banner-text { flex: 1 1 320px; }
.season-banner h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.season-banner p { margin: 0; color: var(--color-muted); font-size: .95rem; }

/* Blog szerzői sor (pl. az iskolakezdés cikknél) — a valós szerzőség
   hitelességi jel is, ezért látszódjon, de ne nyomja el a szöveget. */
.post-byline {
    color: var(--color-muted);
    font-size: .9rem;
    border-left: 3px solid var(--color-primary);
    padding-left: .75rem;
    margin-bottom: 1.25rem;
}

/* Kapcsolódó cikkek az iskolakezdés gyűjtőoldalon (a .school-grid/-card stílust
   használja, csak a szekció térközét adjuk hozzá). */
.school-posts { margin: 2.5rem 0; }
/* Egyetlen kártyánál ne feszüljön ki a teljes szélességre — középre, korlátozott
   szélességgel jobban néz ki (a szekcióban jellemzően 1-2 cikk van). */
.school-posts .school-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 460px));
    justify-content: center;
}
.school-posts > h2 { text-align: center; margin-bottom: 1.5rem; }
.school-posts .school-card h3 { font-size: 1.05rem; line-height: 1.35; }
.school-posts .school-card h3 a { text-decoration: none; }
.school-posts .school-card h3 a:hover { text-decoration: underline; }