/*
Theme Name: Cleocollection
Theme URI: https://pixdream.hu
Author: Bognár-Bohár Anita | Pixdream 
Author URI: https://pixdream.hu/bognar-bohar-anita-webdeisgner/
Description: Basic Block Theme by Bognár-Bohár Anita
Tags: one-column, custom-colors, custom-menu
Version: 1.0
Update URI: false
Requires at least: 5.0
Tested up to: 7.1
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cleocollection
*/

@media screen and (max-width: 1199px) {
    body {
        font-size: 18px;
    }
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

main {
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}

/* a kártya a viszonyítási pont: nélküle az akciós címkék a szakasz sarkába kerültek, egymásra */
.wc-block-product > .wp-block-group {
    position: relative;
    height: 100%;
}

/* Termékcsúszka: egyforma magas kártyák, az ár és a gomb a kártya aljára igazítva */
.wc-block-product-template.is-product-collection-layout-carousel {
    align-items: stretch;
}

.wc-block-product-template.is-product-collection-layout-carousel .wc-block-product > .wp-block-group > :last-child {
    margin-top: auto;
    padding-bottom: var(--wp--preset--spacing--s);
}

/* Termékvideó: álló formátum, asztali nézetben korlátozott szélességgel */
.cleo-product-video {
    max-width: 360px;
    margin-inline: auto;
}

.cleo-product-video iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border: 0;
    border-radius: 1rem;
}

.wp-block-woocommerce-product-sale-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.hero-text {
    max-width: 60%;
    width: 60%;
    align-content: center;
}

/* Elfogyott címke: a kép aljához igazítva (a kép négyzetes, magassága = a csoport szélessége, 100cqw),
   így a cím hossza nem tolja el; a bottom-alapú pozíció a cím sorainak számától függött */
.wc-block-product .wp-block-group:has(> .sold-out-badge) {
    container-type: inline-size;
}

.sold-out-badge {
    position: absolute;
    top: 100cqw !important;
    bottom: auto !important;
    left: 0 !important;
    margin: 0 !important;
    transform: translateY(calc(-100% - 10px));
    background-color: var(--wp--preset--color--primary-hover) !important;
}

.product-category-card,
.overflow-hidden {
    overflow: hidden;
}

.utalvanybg {
    background-image: url(img/ajandek.jpg);
    background-size: cover;
    background-position: right;
}

.egyedibg {
    background-image: url(img/egyedi_bg.jpg);
    background-size: cover;
    background-position: right;
}

/* Termékkép: betöltetlen vagy hiányzó képnél is 1:1 doboz, a core 3000×1500px-es lazy-load helyfoglalója nélkül */
.wc-block-components-product-image img {
    display: block;
    width: 100%;
    contain-intrinsic-size: none;
}

/* Kiemelt kép (listák, szócikkek): hiányzó képnél se nyújtsa meg a kártyát a core 3000×1500px-es helyfoglalója */
.wp-block-post-featured-image img {
    contain-intrinsic-size: none;
}

/* Rendezés: alacsonyabb select, felirattal együtt egy vonalban a találatszámmal */
.wc-block-catalog-sorting form.woocommerce-ordering {
    display: flex;
    align-items: center;
}

.wc-block-catalog-sorting form.woocommerce-ordering label {
    margin-bottom: 0;
}

.wc-block-catalog-sorting select.orderby {
    height: 2rem;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 2rem;
}

.wc-block-components-product-stock-indicator--out-of-stock {
    color: red;
}

.wc-block-product-filter-removable-chips__item {
    border-radius: 10px !important;
    font-size: smaller !important;
}

.wp-block-query-pagination-numbers .page-numbers {
    background: 2rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    margin: 0 5px;

}

.wp-block-query-pagination-numbers .page-numbers.current {
    font-weight: bold;
    background-color: var(--wp--preset--color--neutral);

}

/* Ár szűrő: a form.css 250px-es range min-szélessége kilógatta a csúszkát az oldalsávból;
   a Woo 60px-es max-szélessége levágta az összeget */
.wc-block-product-filter-price-slider input[type="range"] {
    min-width: 0;
}

.wc-block-product-filter-price-slider .text input[type="text"] {
    width: 6rem;
    max-width: none;
    padding-inline: 0.5rem;
}

@media only screen and (max-width: 450px) {
    .category-filter {
        display: none;
    }

    .wc-block-catalog-sorting form.woocommerce-ordering {
        flex-direction: column;
        align-items: flex-start
    }

    .wp-block-query-title {
        font-size: 2rem;
    }
}

/* Termékgaléria: a YITH kedvencek gombja csak a kép mellett kell, a galéria képein nem */
.wc-block-product-gallery .yith-add-to-wishlist-button-block {
    display: none;
}

/* Termékgaléria lapozó: a kép bal és jobb alsó sarkában, kisebb lekerekítéssel;
   a téma általános gombpaddingje (16px 36px) elcsúsztatta a nyilat */
.wc-block-product-gallery-large-image .wc-block-next-previous-buttons {
    box-sizing: border-box;
    align-items: flex-end;
    padding: var(--wp--preset--spacing--s);
}

.wc-block-product-gallery-large-image .wc-block-next-previous-buttons__button,
.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 6px;
}

/* Termékoldal: készletinfó a termékkártyák készletjelzőjével azonos
   (a Woo .woocommerce div.product p.stock 0.92em-jét csak ilyen erős szelektor üti) */
.single-product div.product .wp-block-add-to-cart-form p.stock {
    font-size: var(--wp--preset--font-size--small);
    color: #27ae60;
}

.single-product div.product .wp-block-add-to-cart-form p.stock.out-of-stock {
    color: red;
}

/* Extra Product Options mezők kiemelve */
.wp-block-add-to-cart-form .thwepo-extra-options {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: var(--wp--preset--spacing--m);
    padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--12);
    background: var(--wp--preset--color--tertiary);
    border-radius: 8px;
    border-spacing: 0 0.5rem;
}

.wp-block-add-to-cart-form .thwepo-extra-options td {
    padding: 0 0.25rem;
    vertical-align: middle;
    border: 0;
}

.wp-block-add-to-cart-form .thwepo-extra-options .label-tag {
    color: var(--wp--preset--color--primary);
}

/* a plugin width: auto-ja a form.css appearance: none-jával 2px-es checkboxot adott */
.wp-block-add-to-cart-form form.cart table.thwepo-extra-options input[type="checkbox"] {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0 0.5rem 0 0;
    vertical-align: middle;
}

.wp-block-add-to-cart-form .thwepo-extra-options select {
    min-width: 5rem;
}

.wp-block-add-to-cart-form .quantity {
    height: 44px;
}

/* a Woo 0.9rem-es paddingje ezzel az erős szelektorral jön; nélküle 44px-ben a szám levágódhat */
.single-product div.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper .wc-block-components-quantity-selector input[type="number"].input-text.qty.text {
    box-sizing: border-box;
    height: 100%;
    padding-block: 0;
}

/* Mennyiség, Kosárba és Kedvencekhez egy sorban. A YITH blokk a formon kívül van,
   ezért a csoport lesz a rács, a form és burkolója display: contents. */
.wp-block-group:has(> .wp-block-add-to-cart-form) {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    column-gap: 0.5rem;
}

.wp-block-group:has(> .wp-block-add-to-cart-form) > *,
.wp-block-group:has(> .wp-block-add-to-cart-form) .wp-block-add-to-cart-form > *,
.wp-block-group:has(> .wp-block-add-to-cart-form) form.cart > * {
    grid-column: 1 / -1;
    max-width: none;
    /* a constrained layout auto !important margója rácsban középre tolná az elemeket */
    margin-inline: 0 !important;
}

.wp-block-group:has(> .wp-block-add-to-cart-form) > .wp-block-add-to-cart-form,
.wp-block-group:has(> .wp-block-add-to-cart-form) form.cart {
    display: contents;
}

/* a Woo clearfix pszeudoelemei rácselemként elfoglalnák a Kedvencekhez helyét */
.wp-block-group:has(> .wp-block-add-to-cart-form) .wp-block-add-to-cart-form form.cart::before,
.wp-block-group:has(> .wp-block-add-to-cart-form) .wp-block-add-to-cart-form form.cart::after {
    content: none;
}

.wp-block-group:has(> .wp-block-add-to-cart-form) form.cart > br {
    display: none;
}

.wp-block-group:has(> .wp-block-add-to-cart-form) form.cart > .quantity {
    grid-column: 1;
}

.wp-block-group:has(> .wp-block-add-to-cart-form) form.cart > .single_add_to_cart_button {
    grid-column: 2;
}

.wp-block-group:has(> .wp-block-add-to-cart-form) > .yith-add-to-wishlist-button-block {
    grid-column: 3;
    justify-self: start;
    margin: 0;
}

del {
    color: var(--wp--preset--color--lilac-300);
}

.wc-block-components-notice-banner.is-info {
    background-color: var(--wp--preset--color--surface-footer);
    color: #fff;
    border: none;
}

.wc-block-components-notice-banner.is-info > svg {
    background-color: var(--wp--preset--color--amethyst-900);
}

.wc-block-components-notice-banner.is-info a {
    color: #fff;
}

/* keskeny kijelzőn csak a szív fér ki a sorban; a felirat képernyőolvasónak megmarad */
@media (max-width: 450px) {
    .wp-block-group:has(> .wp-block-add-to-cart-form) > .yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Terméklisták a termékoldalon (pl. Upsells): a YITH ott a fő termék gombjaként (--single) rajzolja ki
   a kép sarkába tett szívet, felirattal és más térközzel; legyen olyan, mint a kategóriaoldali kártyákon */
.wc-block-product-template .yith-wcwl-add-to-wishlist-button-over-image.yith-wcwl-add-to-wishlist-button--single {
    margin: 10px;
    padding: 6px 10px;
}

.wc-block-product-template .yith-wcwl-add-to-wishlist-button-over-image .yith-wcwl-add-to-wishlist-button__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Klasszikus kosár: a form.css 16px-es oldalsó paddingje mellett a Woo 3.631em-es mezőjében nem fért ki a szám */
.woocommerce-cart-form .quantity input.qty {
    width: 4.5rem;
    padding-inline: 0.5rem;
}

/* Termékszűrők: mobilon (a Woo 600px-es töréspontja alatt) csak a „Termékek szűrése” gomb látszik, kisebb doboz kell köré;
   a padding a blokkbeállításból inline jön, ezért !important */
@media (max-width: 600px) {
    .wp-block-group:has(> .wp-block-woocommerce-product-filters) {
        padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--12) !important;
    }
}

/* Kategóriakártyák (Terms Query + Kiemelt kategória): négyzetesek; a blokk min-height-ja inline jön, ezért !important */
.wp-block-term-template .wp-block-woocommerce-featured-category {
    aspect-ratio: 1;
    min-height: 0 !important;
}

/* az egész kártya kattintható: a gomb linkjének kattintási felülete kitölti a kártyát */
.wp-block-term-template .wp-block-woocommerce-featured-category .wp-block-button__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* a gombok lenyomási effektje (transform) a linkre szűkítené az ::after-t, és a kártyán a kattintás elveszne */
.wp-block-term-template .wp-block-woocommerce-featured-category .wp-block-button__link:active {
    transform: none;
}

/* Kategóriakártyák: a teljes lila szűrő helyett alulról sötétedő átmenet, a cím és a gomb balra lent.
   A sötétítést a Woo az overlay ::before rétegén rajzolja (a blokk dimRatio-ja), ezért azt írjuk felül. */
.wp-block-term-template .wp-block-woocommerce-featured-category .background-dim__overlay::before {
    opacity: 1 !important;
    background: linear-gradient(to top, rgb(46 59 62 / 0.7) 0%, rgb(46 59 62 / 0.3) 38%, rgb(46 59 62 / 0) 62%) !important;
}

.wp-block-term-template .wp-block-woocommerce-featured-category .wc-block-featured-category__wrapper {
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
}

.wp-block-term-template .wp-block-woocommerce-featured-category .wc-block-featured-category__inner-blocks {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--wp--preset--spacing--m) var(--wp--preset--spacing--s);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

/* a cím a blokkban lila hátteret és középre igazítást kap – itt átlátszó, balra zárt */
.wp-block-term-template .wp-block-woocommerce-featured-category h3.wp-block-woocommerce-category-title {
    background: none !important;
    padding: 0 !important;
    margin: 0;
    text-align: left;
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}

.wp-block-term-template .wp-block-woocommerce-featured-category .wp-block-buttons {
    justify-content: flex-start;
    margin: 0;
}

/* Véleménycsúszka: egységes, egyforma magas kártyák, külön hely a lapozónak.
   A kártya kerete a ::before réteg 8px-es beljebb húzással, így a blokk térköz-beállításától
   függetlenül van köztük rés; a kártyák inline paddingje eltérhet, ezért !important */
swiper-container.wp-block-cb-reviews::part(container) {
    padding: 4px 0 88px;
}

.wp-block-cb-reviews .wp-block-cb-review {
    position: relative;
    isolation: isolate;
    align-self: stretch;
    height: auto;
    box-sizing: border-box;
    padding: var(--wp--preset--spacing--l) calc(var(--wp--preset--spacing--l) + 8px) !important;
    overflow-wrap: anywhere;
}

.wp-block-cb-reviews .wp-block-cb-review::before {
    content: "";
    position: absolute;
    inset: 0 8px;
    z-index: -1;
    border: 1px solid var(--wp--preset--color--lilac-200);
    border-radius: 1rem;
    background: var(--wp--preset--color--white);
    box-shadow: var(--wp--preset--shadow--sm);
}

.wp-block-cb-reviews .review-txt:empty {
    display: none;
}

.wp-block-cb-reviews .review-title > span {
    min-width: 0;
}

swiper-container.wp-block-cb-reviews::part(button-prev),
swiper-container.wp-block-cb-reviews::part(button-next) {
    box-sizing: border-box;
    top: auto;
    bottom: 24px;
    right: auto;
    width: 40px;
    height: 40px;
    margin-top: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 6px;
    background: var(--wp--preset--color--accent-muted);
    color: var(--wp--preset--color--white);
}

swiper-container.wp-block-cb-reviews::part(button-prev) {
    left: calc(50% - 44px);
}

swiper-container.wp-block-cb-reviews::part(button-next) {
    left: calc(50% + 4px);
}

swiper-container.wp-block-cb-reviews::part(button-prev):hover,
swiper-container.wp-block-cb-reviews::part(button-next):hover {
    background: var(--wp--preset--color--primary-hover);
}

swiper-container.wp-block-cb-reviews::part(button-prev):focus-visible,
swiper-container.wp-block-cb-reviews::part(button-next):focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
}

swiper-container.wp-block-cb-reviews::part(pagination) {
    bottom: 0;
    line-height: 1;
}

/* Kiemelt kategóriák: 800px alatt hármasával, 600px alatt kettesével */
@media (max-width: 799px) {
    .wp-block-columns:has(> .wp-block-column > .product-category-card) {
        flex-wrap: wrap !important;
        gap: var(--wp--preset--spacing--m);
    }

    .wp-block-columns:has(> .wp-block-column > .product-category-card) > .wp-block-column {
        flex-basis: calc((100% - 2 * var(--wp--preset--spacing--m)) / 3) !important;
        flex-grow: 0;
    }
}

@media (max-width: 599px) {
    .wp-block-columns:has(> .wp-block-column > .product-category-card) > .wp-block-column {
        flex-basis: calc(50% - var(--wp--preset--spacing--m) / 2) !important;
    }
}

/* Főoldal mobilon (a core oszlopok 782px-es töréspontja alatt) */
@media (max-width: 781px) {
    /* Hero: a szövegdoboz teljes szélességű, kis margóval (a constrained layout margója !important) */
    .hero-text {
        width: auto;
        max-width: none !important;
        margin-inline: var(--wp--preset--spacing--m) !important;
    }

    /* Előnyök: egyforma, kisebb ikonoszlop, így a szövegek egy vonalban kezdődnek */
    .wp-block-column > .wp-block-group.is-nowrap:has(> .wp-block-image.size-thumbnail:first-child) {
        justify-content: flex-start;
    }

    .wp-block-column > .wp-block-group.is-nowrap > .wp-block-image.size-thumbnail:first-child {
        flex: 0 0 56px !important;
    }

    .wp-block-columns.has-background:has(> .wp-block-column > .wp-block-group.is-nowrap > .wp-block-image.size-thumbnail:first-child) {
        padding-inline: var(--wp--preset--spacing--20);
    }

    /* Ajándékutalvány / egyedi tervezés: szélesebb szöveg, a kép jobbra tolva, balra elhalványítva */
    .utalvanybg,
    .egyedibg {
        background-size: auto 100%;
        background-position: right -4rem center;
        background-repeat: no-repeat;
    }

    .utalvanybg {
        background-image: linear-gradient(90deg, var(--wp--preset--color--pink-50) 35%, transparent 75%), url(img/ajandek.jpg);
    }

    .egyedibg {
        background-image: linear-gradient(90deg, var(--wp--preset--color--pink-50) 35%, transparent 75%), url(img/egyedi_bg.jpg);
    }

    .utalvanybg > .wp-block-group > *,
    .egyedibg > .wp-block-group > * {
        max-width: 70% !important;
    }
}

/* Újdonságok: a Woo érintőképernyőn 600px alatt elrejti a lapozót, mi mutatjuk */
@media (max-width: 600px) {
    .wp-block-woocommerce-product-collection .wp-block-group > .wc-block-next-previous-buttons {
        display: flex;
    }
    .wp-container-core-cover-is-layout-f5f4b0ca > .alignwide{
        max-width: 95%!important;
    }
}

/* Bejegyzés-rács mobilon: a core 1fr-es oszlopa a kiemelt képhez nőtt (532px a 343px-es helyen), ettől oldalra görgetett */
@media (max-width: 600px) {
    .wp-block-post-template.is-layout-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Klasszikus Woo terméklista ([product_category]): a termékcím és a lapozó ne kapja az accent linkszínt */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce nav.woocommerce-pagination ul li a {
    color: var(--wp--preset--color--primary);
}

/* Vissza a tetejére gomb (functions.php + js/custom.js); a menü és a mini-kosár (9998–9999) alatt marad */
.cleo-to-top {
    position: fixed;
    right: var(--wp--preset--spacing--m);
    bottom: var(--wp--preset--spacing--m);
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: var(--wp--preset--color--accent-muted);
    color: var(--wp--preset--color--white);
    box-shadow: var(--wp--preset--shadow--sm);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background-color 0.2s;
}

.cleo-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.cleo-to-top:hover {
    background: var(--wp--preset--color--primary-hover);
}

.cleo-to-top:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .cleo-to-top {
        transition: none;
    }
}

/* Mozgás: csak transform és opacity (nincs újratördelés), csak egérrel és ha a látogató nem kért csökkentett mozgást */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    li.wc-block-product > .wp-block-group,
    li.wp-block-post > .wp-block-group,
    .wp-block-term .wc-block-featured-category {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    li.wc-block-product > .wp-block-group:hover,
    li.wp-block-post > .wp-block-group:hover,
    .wp-block-term .wc-block-featured-category:hover {
        transform: translateY(-4px);
        box-shadow: var(--wp--preset--shadow--md);
    }

    li.wc-block-product .wc-block-components-product-image,
    li.wp-block-post .wp-block-post-featured-image {
        overflow: hidden;
    }

    li.wc-block-product .wc-block-components-product-image img,
    li.wp-block-post .wp-block-post-featured-image img,
    .wp-block-term .wc-block-featured-category__background-image {
        transition: transform 0.4s ease;
    }

    li.wc-block-product:hover .wc-block-components-product-image img,
    li.wp-block-post:hover .wp-block-post-featured-image img,
    .wp-block-term:hover .wc-block-featured-category__background-image {
        transform: scale(1.04);
    }

    .wp-element-button {
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }

    .wp-element-button:active {
        transform: scale(0.97);
    }
}

/* Kártyák beúszása görgetéskor: az osztályokat a js/custom.js teszi fel, csak a még nem látható kártyákra;
   script nélkül és az utólag betöltött (pl. szűrt) kártyáknál nincs rejtés */
@media (prefers-reduced-motion: no-preference) {
    /* átmenet csak megjelenéskor, az elrejtés azonnali */
    .cleo-reveal-item:not(.is-pending) {
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .cleo-reveal-item.is-pending {
        opacity: 0;
        transform: translateY(16px);
    }
}

/* Hírlevél-feliratkozás (Mailchimp beágyazott űrlap, a lábléc fölötti sávban) – a Mailchimp saját CSS-e és scriptje nélkül */
.cleo-newsletter form {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--s);
}

.cleo-newsletter p {
    margin: 0;
}

.cleo-newsletter__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--s);
}

.cleo-newsletter__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cleo-newsletter__field--email {
    grid-column: 1 / -1;
}

.cleo-newsletter__field label {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--text-heading);
}

.cleo-newsletter .asterisk {
    color: var(--wp--preset--color--accent);
}

.cleo-newsletter input[type="text"],
.cleo-newsletter input[type="email"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--wp--preset--color--border-field);
    border-radius: 0.5rem;
    background: var(--wp--preset--color--white);
    font: inherit;
}

.cleo-newsletter input[type="text"]:focus,
.cleo-newsletter input[type="email"]:focus {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 1px;
}

.cleo-newsletter__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--wp--preset--font-size--small);
}

.cleo-newsletter__consent input {
    flex: none;
    margin: 0;
}

.cleo-newsletter__submit .button {
    width: 100%;
    min-height: 48px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .cleo-newsletter__fields {
        grid-template-columns: 1fr;
    }
}

.cleo-newsletter__message {
    font-weight: 600;
    color: var(--wp--preset--color--success);
}

.cleo-newsletter__message.is-error {
    color: var(--wp--preset--color--error);
}

.cleo-newsletter__submit .button:disabled {
    opacity: 0.6;
    cursor: wait;
}