/*
Theme Name: Mal- und Rätselbücher
Author: Gabor
Description: 100% tiszta Tailwind CSS alapú egyedi sablon.
Version: 1.0.0
*/

:root {
    /* Surface */
    --background: 0 0% 100%;
    --foreground: 240 5% 11%;
    --muted: 0 0% 94%;
    --muted-foreground: 240 4% 38%;
    --card: 0 0% 100%;
    --card-foreground: 240 5% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 5% 11%;
    --primary: 28 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 211 71% 59%;
    --secondary-foreground: 0 0% 100%;
    --accent: 0 0% 96%;
    --accent-foreground: 240 5% 11%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 28 100% 50%;
    --radius: 0.875rem;
    --shadow-soft: 0 4px 20px -8px hsl(240 5% 11% / 0.08);
    --shadow-lift: 0 12px 32px -10px hsl(240 5% 11% / 0.12);
    --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
}

/* * TAILWIND & LOVABLE BORDER FIX 
 * Ez garantálja, hogy a keretek látszódjanak és felvegyék a var(--border) színt 
 */
*,
::before,
::after {
    border-style: solid;
    border-width: 0;
    border-color: hsl(var(--border));
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Onest', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6;
}

/* ── GLOBÁLIS CÍMSOROK (HEADLINES) ───────────────────────── */
h1:not(.eyebrow),
h2:not(.eyebrow),
h3:not(.eyebrow),
h4:not(.eyebrow),
h5:not(.eyebrow),
h6:not(.eyebrow),
.elementor-widget-heading:not(.eyebrow) .elementor-heading-title {
    font-family: 'Onest', ui-sans-serif, system-ui, sans-serif !important;
    color: hsl(var(--foreground));
    text-wrap: balance;
    letter-spacing: -0.02em;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

/* H1 - Főcímek (pl. text-4xl / md:text-5xl) */
h1 {
    font-size: 2.25rem !important;
    /* 36px */
    line-height: 1.1 !important;
    font-weight: 800;
    /* Extra bold */
}

@media (min-width: 768px) {
    h1 {
        font-size: 3rem !important;
        /* 48px */
    }
}

/* H2 - Szekció címek (pl. text-3xl / md:text-4xl) */
h2 {
    font-size: 1.875rem !important;
    /* 30px */
}

@media (min-width: 768px) {
    h2 {
        font-size: 2.25rem !important;
        /* 36px */
    }
}

/* H3 - Kisebb blokk címek (pl. text-2xl / md:text-3xl) */
h3 {
    font-size: 1.5rem !important;
    /* 24px */
}

@media (min-width: 768px) {
    h3 {
        font-size: 1.875rem !important;
        /* 30px */
    }
}

/* H4 - Kártya címek (pl. text-xl) */
h4 {
    font-size: 1.25rem !important;
    /* 20px */
    font-weight: 600;
    /* Semibold */
}

/* H5 & H6 - Apró címek */
h5 {
    font-size: 1.125rem !important;
    font-weight: 600;
}

/* 18px */
h6 {
    font-size: 1rem !important;
    font-weight: 600;
}

/* 16px */

p {
    text-wrap: pretty;
    overflow-wrap: break-word;
}

::selection {
    background: hsl(var(--primary) / 0.2);
}

/* ── ENTRY CONTENT (POST/PAGE) TYPOGRAPHY ───────────────── */
.entry-content > * + * {
    margin-top: 1.5em;
}

.entry-content ul {
    list-style-type: disc;
    padding-left: 1.5em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.entry-content ol {
    list-style-type: decimal;
    padding-left: 1.5em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.entry-content li + li {
    margin-top: 0.5em;
}

.entry-content img {
    border-radius: 0.75rem;
    height: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.entry-content a:not(.button):not(.added_to_cart):not(.woocommerce-MyAccount-navigation a):not(.no-underline):not(.bg-primary):not(.bg-muted) {
    color: hsl(var(--primary));
    text-decoration: none;
    font-weight: 500;
}

.entry-content a:not(.button):not(.added_to_cart):not(.woocommerce-MyAccount-navigation a):not(.no-underline):not(.bg-primary):not(.bg-muted):hover {
    color: hsl(var(--primary) / 0.8);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ── WooCommerce Account Speciális Fixek ───────────────────────── */
.woocommerce-account .entry-content ul {
    list-style-type: none !important;
    padding-left: 0 !important;
}

.woocommerce-MyAccount-navigation a,
.woocommerce-MyAccount-content a:not(.view) {
    text-decoration: none !important;
}

.woocommerce-MyAccount-content .prose a,
.woocommerce-MyAccount-content p a {
    text-decoration: underline !important;
}

.eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

/* Hide Spin Buttons */
.hide-spin-button::-webkit-outer-spin-button,
.hide-spin-button::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.hide-spin-button {
    -moz-appearance: textfield;
}

/* WP Utilities (Ezek kellenek a WP admin sávhoz és az akadálymentesítéshez, de nem zavarnak be a dizájnba) */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    word-break: normal
}

.screen-reader-text:focus {
    background-color: #f7f7f7;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
    clip: auto !important;
    clip-path: none;
    color: #007acc;
    display: block;
    font-size: 14px;
    font-size: .875rem;
    font-weight: 700;
    height: auto;
    right: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000
}

/* WooCommerce Grid Fix - Megállítjuk a Woo alapértelmezett elrendezését */
.woocommerce ul.products.grid,
.woocommerce-page ul.products.grid {
    display: grid !important;
}

.woocommerce ul.products.grid::before,
.woocommerce ul.products.grid::after {
    display: none !important;
    /* A Woo 'clearfix' elrontja a gridet */
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: auto !important;
    /* Felülírjuk a Woo fix %-os szélességét */
    margin: 0 !important;
    /* A Tailwind gap-et használunk helyette */
    float: none !important;
    display: flex !important;
    flex-direction: column;
}

/* WooCommerce felesleges gombok és elemek elrejtése */
.woocommerce-loop-product__title,
.woocommerce-after-shop-loop-item .button,
.woocommerce-product-details__short-description+.button {
    display: none !important;
}

/* A rendező és számláló legyen teljes szélességű, ne a rács része */
.woocommerce-before-shop-loop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 2rem;
    grid-column: 1 / -1;
    /* Ha véletlen rácson belül maradna */
}

/* Rács fix: kényszerítjük a 3 oszlopot és töröljük a Woo floatokat */
.woocommerce ul.products.grid {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 768px) {
    .woocommerce ul.products.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .woocommerce ul.products.grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

.woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    list-style: none !important;
}

/* A "clear" elemek törlése, amik eltolják az első sort */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
 * UNIFIED BUTTON SYSTEM
 * Etalon: 404.php Primary Button
 * Három variáns: Primary, Secondary (Quiet), Outline
 * Két méret: Default (h-12), Compact (h-10)
 * ═══════════════════════════════════════════════════════════════ */

/* ── Base: Minden gomb közös tulajdonsága ────────────────────── */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wp-element-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    font-family: 'Onest', ui-sans-serif, system-ui, sans-serif !important;
    border-radius: 9999px !important;
    height: 3rem !important;
    /* h-12 */
    padding: 0 2rem !important;
    /* px-8 */
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
    line-height: 1 !important;
    border: none !important;
    outline: none !important;
}

/* ── PRIMARY: .button.alt, .checkout-button, .single_add_to_cart_button ── */
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.checkout-button,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit.alt,
.wc-block-components-button:not(.wc-block-components-button--outlined),
.wp-element-button {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    box-shadow: var(--shadow-soft) !important;
}

.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #respond input#submit.alt:hover,
.wc-block-components-button:not(.wc-block-components-button--outlined):hover,
.wp-element-button:hover {
    box-shadow: var(--shadow-lift) !important;
    transform: translateY(-2px) !important;
}

.woocommerce .button.alt:active,
.woocommerce a.button.alt:active,
.woocommerce button.button.alt:active,
.woocommerce input.button.alt:active,
.woocommerce a.checkout-button:active,
.woocommerce .single_add_to_cart_button:active,
.wc-block-components-button:not(.wc-block-components-button--outlined):active,
.wp-element-button:active {
    transform: scale(0.97) !important;
}

/* ── SECONDARY (Quiet): .button (alap, nem .alt) ────────────── */
.woocommerce .button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button),
.woocommerce a.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button),
.woocommerce button.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button),
.woocommerce input.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button) {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    box-shadow: none !important;
}

.woocommerce .button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):hover,
.woocommerce a.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):hover,
.woocommerce button.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):hover,
.woocommerce input.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):hover {
    background-color: hsl(var(--muted) / 0.8) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-soft) !important;
}

.woocommerce .button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):active,
.woocommerce a.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):active,
.woocommerce button.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):active,
.woocommerce input.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):active {
    transform: scale(0.97) !important;
}

/* ── OUTLINE variáns: .btn-outline (egyedi osztály) ──────────── */
.btn-outline,
.woocommerce .button.btn-outline,
.wc-block-components-button--outlined {
    background-color: transparent !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    box-shadow: none !important;
}

.btn-outline:hover,
.woocommerce .button.btn-outline:hover,
.wc-block-components-button--outlined:hover {
    background-color: hsl(var(--muted)) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-soft) !important;
}

.btn-outline:active,
.woocommerce .button.btn-outline:active,
.wc-block-components-button--outlined:active {
    transform: scale(0.97) !important;
}

/* ── COMPACT méret: .btn-compact ─────────────────────────────── */
.btn-compact,
.woocommerce .button.btn-compact {
    height: 2.5rem !important;
    /* h-10 */
    padding: 0 1.5rem !important;
    /* px-6 */
    font-size: 0.8125rem !important;
}

/* ── Disabled állapot ────────────────────────────────────────── */
.woocommerce .button:disabled,
.woocommerce .button[disabled],
.woocommerce input.button:disabled,
.woocommerce input.button[disabled] {
    opacity: 0.5 !important;
    pointer-events: none !important;
    transform: none !important;
}

/* ── Focus-visible (akadálymentesítés) ───────────────────────── */
.woocommerce .button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce input.button:focus-visible,
.wp-element-button:focus-visible {
    outline: 2px solid hsl(var(--ring)) !important;
    outline-offset: 2px !important;
}

/* ── WooCommerce natív quantity input melletti gomb fix ───────── */
.woocommerce div.quantity+.button,
.woocommerce div.quantity+.single_add_to_cart_button {
    margin-left: 0.75rem !important;
}

/* ── Custom Quantity Input Double Border Fix ──────────────────── */
.qty-wrapper input.qty {
    border: 0 !important;
    box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════
 * CHECKOUT PAGE — Layout & Form Overrides
 * ═══════════════════════════════════════════════════════════════ */

/* ── Float → Grid: form-row-first / form-row-last ────────────── */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {

    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Wide mezők (email, street, country, notes) teljes szélességre */
.woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-shipping-fields__field-wrapper .form-row-wide,
.woocommerce-additional-fields__field-wrapper .form-row-wide {
    grid-column: 1 / -1;
}

/* Woo float reset */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
    float: none !important;
    width: auto !important;
}

.woocommerce form .form-row {
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Review order table reset ────────────────────────────────── */
.woocommerce-checkout-review-order-table {
    border: none !important;
    padding: 0 !important;
    list-style: none !important;
}

.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout-review-order-table tr,
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* ── Shipping method radios in checkout ──────────────────────── */
.woocommerce-shipping-methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-shipping-methods li {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-shipping-methods label {
    font-size: 0.875rem;
    cursor: pointer;
}

.woocommerce-shipping-methods input[type="radio"] {
    accent-color: hsl(var(--primary));
}

/* ── Payment box (gateway fields) ────────────────────────────── */
.woocommerce-checkout-payment .payment_box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0.5rem !important;
    color: hsl(var(--muted-foreground)) !important;
    font-size: 13px !important;
}

.woocommerce-checkout-payment .payment_box::before {
    display: none !important;
}

/* ── Payment method radio highlight ──────────────────────────── */
.wc_payment_method input[type="radio"]:checked~div .payment_box,
.wc_payment_method input[type="radio"]:checked+div .payment_box {
    display: block !important;
}

/* ── Checkout error states ───────────────────────────────────── */
.woocommerce form .form-row.woocommerce-invalid .select2-container,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
    border-color: #ef4444 !important;
}

.woocommerce form .form-row.woocommerce-invalid label {
    color: #ef4444 !important;
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
    border-color: hsl(var(--primary)) !important;
}

/* ── Global Input Overrides ── */
input.input-text,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    border: 1px solid hsl(var(--input)) !important;
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    transition: all 0.2s ease !important;
}

input.input-text:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus {
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 0 2px hsla(var(--primary), 0.15) !important;
    outline: none !important;
}

/* ── Terms & Conditions checkbox area ────────────────────────── */
.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 1rem;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text {
    font-size: 12.5px;
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

/* ── WooCommerce notices on checkout (styled alerts) ─────────── */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 13.5px !important;
    border-width: 1px !important;
    border-style: solid !important;
    margin-bottom: 1.5rem !important;
    list-style: none !important;
    background-image: none !important;
}

.woocommerce-checkout .woocommerce-error {
    border-color: #fecaca !important;
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

.woocommerce-checkout .woocommerce-message {
    border-color: hsl(var(--border)) !important;
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
}

.woocommerce-checkout .woocommerce-info {
    border-color: hsl(var(--border)) !important;
    background-color: hsl(var(--muted) / 0.5) !important;
    color: hsl(var(--muted-foreground)) !important;
}

/* ── Select2 (country/state dropdown) override ───────────────── */
.woocommerce .select2-container--default .select2-selection--single {
    height: 2.5rem !important;
    border: 1px solid hsl(var(--input)) !important;
    border-radius: 0.375rem !important;
    background-color: hsl(var(--background)) !important;
    padding: 0 0.75rem !important;
    display: flex !important;
    align-items: center !important;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1 !important;
    padding: 0 !important;
    color: hsl(var(--foreground)) !important;
    font-size: 15px !important;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 0.5rem !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.select2-dropdown {
    border-color: hsl(var(--border)) !important;
    border-radius: 0.375rem !important;
    box-shadow: var(--shadow-lift) !important;
}

.select2-container--open .select2-selection--single {
    outline: 2px solid hsl(var(--ring)) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   WOOCOMMERCE ÉRTESÍTÉSEK (TOASTS / NOTICES) JAVÍTÁSA
   ========================================================================== */

/* Az értesítéseket összefogó konténer */
.woocommerce-notices-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1.5rem 0 !important;
    float: none !important;
    clear: both !important;
    display: block !important;
}

/* Alapstílus minden értesítésre (Info, Error, Success) */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 1.5rem 0 !important;
    float: none !important;
    clear: both !important;
    padding: 1rem 1.25rem !important;
    border-radius: calc(var(--radius) - 2px) !important;
    font-size: 0.875rem !important;
    font-weight: 450 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    word-break: break-word !important;
    line-height: 1.5 !important;
    list-style: none !important;
    border: 1px solid transparent !important;
}

/* Ikonok és dekorációs elemek eltüntetése a Woo-ból */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    display: none !important;
}

/* 1. INFO (pl. "Van kuponod?") - Shadcn Muted */
.woocommerce-info,
.showcoupon {
    background-color: hsl(var(--muted)) !important;
    border-color: hsl(var(--border)) !important;
    color: hsl(var(--foreground)) !important;
}

/* 2. ERROR (Hibaüzenetek) - Destructive Tint */
.woocommerce-error {
    background-color: hsla(0, 100%, 50%, 0.03) !important;
    border-color: hsla(0, 100%, 50%, 0.2) !important;
    color: #e11d48 !important;
    /* Rose-600 */
}

/* 3. SUCCESS (Sikeres művelet) - Success Tint */
.woocommerce-message {
    background-color: hsla(142, 70%, 45%, 0.03) !important;
    border-color: hsla(142, 70%, 45%, 0.2) !important;
    color: #16a34a !important;
    /* Green-600 */
}

/* Linkek az értesítéseken belül */
.woocommerce-message a:not(.button),
.woocommerce-error a:not(.button),
.woocommerce-info a:not(.button) {
    color: inherit !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 1px !important;
    transition: opacity 0.2s ease !important;
}

.woocommerce-message a:not(.button):hover,
.woocommerce-error a:not(.button):hover,
.woocommerce-info a:not(.button):hover {
    opacity: 0.7 !important;
}

/* Ha a Woo egy GOMBOT tesz az értesítésbe (pl. "Kosár megtekintése") */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
    margin-left: auto !important;
    background-color: hsl(var(--background)) !important;
    border: 1px solid hsl(var(--border)) !important;
    color: hsl(var(--foreground)) !important;
    padding: 0.4rem 0.85rem !important;
    border-radius: calc(var(--radius) - 4px) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
    background-color: hsl(var(--muted)) !important;
    transform: none !important;
}

/* Speciális eset: Ha az értesítés nem konténerben van (pl. más oldalak tetején) */
body:not(.woocommerce-checkout) .woocommerce-notices-wrapper {
    max-width: 1280px;
    padding: 0 1.5rem;
}

@media (min-width: 768px) {
    body:not(.woocommerce-checkout) .woocommerce-notices-wrapper {
        padding: 0 2.5rem;
    }
}

/* ── Shop Rendezés (Sorting Dropdown) Stílusok ───────────────────────────── */
.woocommerce-ordering {
    margin: 0 !important;
}

.woocommerce-ordering select {
    display: flex !important;
    height: 2.5rem !important;
    /* h-10 */
    width: 100% !important;
    min-width: 200px !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: calc(var(--radius) - 2px) !important;
    /* rounded-md */
    border: 1px solid hsl(var(--border)) !important;
    background-color: hsl(var(--card)) !important;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    /* text-sm */
    font-weight: 500 !important;
    color: hsl(var(--foreground)) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* Custom Chevron SVG */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    /* shadow-sm */
    transition: all 0.2s ease !important;
}

.woocommerce-ordering select:hover {
    border-color: hsl(var(--primary) / 0.5) !important;
}

.woocommerce-ordering select:focus {
    outline: none !important;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* ── Kosárba tétel utáni AJAX gomb logikája ───────────────────────────── */

/* 1. Töltés (Loading) állapota az Add to cart gombnak */
ul.products li.product .add_to_cart_button.loading {
    opacity: 0.8 !important;
    pointer-events: none !important;
    position: relative !important;
    color: transparent !important;
    /* Szöveg eltüntetése */
}

ul.products li.product .add_to_cart_button.loading::after {
    content: "sync" !important;
    font-family: 'Material Symbols Outlined' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    color: hsl(var(--primary-foreground)) !important;
    font-size: 1.25rem !important;
    animation: spin-center 1s linear infinite !important;
    /* Alapértelmezett Woo spinner felülírása */
    background: none !important;
    display: block !important;
    margin: 0 !important;
}

@keyframes spin-center {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 2. Az eredeti kosárba rakás gomb eltüntetése sikeres hozzáadás után */
ul.products li.product .add_to_cart_button.added {
    display: none !important;
}

/* ── Checkout Kupon Űrlap Rejtése ─────────────────────────────────────────── */
.woocommerce-form-coupon-toggle,
form.checkout_coupon {
    display: none !important;
}

/* 3. A dinamikusan bekerülő "Kosár megtekintése" (View cart) link formázása és animálása */
ul.products li.product a.added_to_cart {
    display: inline-flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 200ms !important;
    border-radius: 9999px !important;
    /* rounded-full */
    font-size: 0.875rem !important;
    /* text-sm */
    height: 3rem !important;
    /* h-12 */
    padding-left: 1.5rem !important;
    /* px-6 */
    padding-right: 1.5rem !important;
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--secondary-foreground)) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    text-decoration: none !important;
    margin-top: 0 !important;
    /* Finom megjelenési animáció */
    animation: slideUpFade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

ul.products li.product a.added_to_cart:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
    transform: translateY(-0.125rem) !important;
}

ul.products li.product a.added_to_cart:active {
    transform: scale(0.97) !important;
}

/* ── Widgets & Sidebar ────────────────────────────────────────── */
.widget-container ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.widget-container ul li {
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid hsl(var(--border) / 0.3) !important;
}

.widget-container ul li:last-child {
    border-bottom: none !important;
}

.widget-container ul li a {
    font-size: 14.5px !important;
    color: hsl(var(--foreground)) !important;
    text-decoration: none !important;
    transition: all 200ms ease !important;
    display: block !important;
}

.widget-container ul li a:hover {
    color: hsl(var(--primary)) !important;
    padding-left: 2px !important;
}

.widget-container .eyebrow {
    color: hsl(var(--foreground)) !important;
    font-weight: 600 !important;
    opacity: 0.9 !important;
}

/* ── Single Product Layout Fixes ─────────────────────────────── */
.single-product form.cart {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* Ensure the button doesn't have default top margin if flex is used */
.single-product form.cart .single_add_to_cart_button {
    margin-top: 0 !important;
}

/* ── Variation Card Selector ─────────────────────────────────── */
/* Override: variations_form should NOT use the simple product flex layout */
.single-product .variations_form.cart {
    display: block !important;
}

/* Active / selected variation card */
.variation-card.is-active {
    border-color: hsl(var(--primary)) !important;
    background-color: hsl(var(--primary) / 0.04) !important;
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12) !important;
}

/* Hide the default WooCommerce variation table */
.variations_form .variations {
    display: none !important;
}

/* Reset link styling inside variation forms */
.variations_form .reset_variations {
    display: none !important;
}

/* Price display within the variation area */
.woocommerce-variation-price .price {
    font-family: 'Onest', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: hsl(var(--foreground)) !important;
    letter-spacing: -0.02em !important;
}

.woocommerce-variation-price .price del {
    opacity: 0.4;
    font-size: 20px !important;
}

.woocommerce-variation-price .price ins {
    text-decoration: none !important;
}

/* Hide the duplicate single_variation inside the wrap (WC renders its own) */
.single_variation_wrap > .woocommerce-variation.single_variation {
    display: none !important;
}