:root {
    /* Aliases for the Blocksy palette (Customizer → Colors), so colour changes there reach these styles too */
    --lior-blue: var(--theme-palette-color-1);
    --lior-blue-dark: var(--theme-palette-color-2);
    --lior-ink: var(--theme-palette-color-4);
    --lior-sand: var(--theme-palette-color-6);
    --lior-cream: var(--theme-palette-color-7);
}
/* Fonts, button shape and product-card corners live in the Customizer (Typography, Buttons, WooCommerce → Product Archives). */
body {
    -webkit-font-smoothing: antialiased;
}

/* Text rhythm, in rem. Blocksy spaces blocks in em, which grows with the font size (a 40px heading got 60px above it).
   This replaces Customizer → Entry Content → Content Spacing. Block spacing / Margin set in Gutenberg still win. */
body,
.editor-styles-wrapper {
    --theme-content-spacing: 1rem; /* between blocks, and under paragraphs */
}
:is(.is-layout-flow, .is-layout-constrained) > :where(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 2rem;
}
:is(.is-layout-flow, .is-layout-constrained) :where(h1, h2, h3, h4, h5, h6) {
    margin-block-end: 0.5rem;
}
/* A heading sits close to the text it introduces */
:is(.is-layout-flow, .is-layout-constrained)
    > :where(h1, h2, h3, h4, h5, h6)
    + * {
    margin-block-start: 0.5rem;
}

/* Block editor: the admin user's locale is English, so force the canvas RTL like the site */
.editor-styles-wrapper {
    direction: rtl;
}
.editor-styles-wrapper .wp-block-cover__inner-container {
    text-align: start;
}

/* Logo is dark grey: show it white while the header sits over the hero */
[data-transparent-row="yes"] .site-logo-container img {
    filter: brightness(0) invert(1);
}

/* Buttons: lift on hover */
.wp-block-button__link,
.button,
.ct-button,
button[type="submit"],
.wpforms-submit {
    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}
.wp-block-button__link:hover,
.button:hover {
    transform: translateY(-2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
    border: 2px solid currentColor;
    background: transparent;
}

/* Page sections: every top-level Group on a page is a section with the same vertical rhythm. Sections without a
   background share the space between them (padding on top only, plus the bottom of the last one); sections with a
   background get it on both sides. Padding / margin set on the block in Gutenberg still wins (inline style). */
:root {
    --lior-section-space: clamp(48px, 7vw, 104px);
}
.entry-content > .wp-block-group {
    margin-block: 0;
    padding-block-start: var(--lior-section-space);
}
.entry-content > .wp-block-group:last-child,
.entry-content > .wp-block-group:is(.has-background, .lior-sand) {
    padding-block-end: var(--lior-section-space);
}

/* Section helpers used on pages. They're defaults: whatever is set on the block in Gutenberg wins. */
p.lior-eyebrow {
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lior-blue);
    font-weight: 600;
    margin-bottom: 0.5rem;
}
/* The small label belongs to the heading under it */
.lior-eyebrow + :where(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
}
:where(.lior-sand) {
    background: var(--lior-sand);
}

/* Hero: text sits at the bottom (Cover block → content position), lined up with the 1200px content column rather
   than the screen edge. Padding set on the block in Gutenberg wins over this. */
.wp-block-cover.lior-hero {
    padding: clamp(24px, 5vw, 72px);
    padding-bottom: clamp(48px, 10vh, 120px);
    padding-inline: max(clamp(24px, 5vw, 72px), (100% - 1200px) / 2);
}
.lior-hero .wp-block-cover__inner-container {
    max-width: 760px;
}
/* The text block sits over the empty part of the photo in both languages: its right edge 30% in from the right
   (Cover → content position bottom right, which core's RTL sheet keeps physical by forcing the Cover to ltr). Inside
   the block, lines start at the line start: right in Hebrew, left in English. */
[dir="rtl"] .lior-hero .wp-block-cover__inner-container {
    direction: rtl;
}
/* Narrow screens crop the photo to a tall slice: keep the book (left third of the photo) in it */
@media (max-width: 999px) {
    .lior-hero .wp-block-cover__image-background {
        object-position: 30% 50%;
    }
    /* Flare on mobile. Knobs:
       --lior-flare-size: how tall the flare is, as a share of its layer (100% = as big as before; smaller = smaller).
       --lior-flare-shift: moves the flare sideways, in vw (1vw = 1% of the screen width): 0vw puts the flare's right
       edge on the screen's right edge, -30vw moves it left, 20vw moves it right.
       --lior-flare-drop: moves the flare down, in vh (1vh = 1% of the screen height): 0vh = top of the hero, higher =
       lower.
       --lior-flare-opacity: how strong the flare is (1 = full, 0.6 = 60%).
       The layer reaches 300vw past both screen edges, so shifting never shows a cut edge. */
    .wp-block-cover.lior-hero::after {
        --lior-flare-size: 60%;
        --lior-flare-shift: 20vw;
        --lior-flare-drop: 15vh;
        --lior-flare-opacity: 0.6;
        left: -300vw;
        right: -300vw;
        background-size: auto var(--lior-flare-size);
        background-position: right calc(300vw - var(--lior-flare-shift)) top
            var(--lior-flare-drop);
        transform-origin: 370vw 30%;
    }
}
@media (min-width: 1000px) {
    .wp-block-cover.lior-hero {
        padding-right: 30%;
    }
    .lior-hero .wp-block-cover__inner-container {
        width: min(460px, 100%);
    }
    /* English lines start where the Hebrew block starts (its title is ~345px wide); the longer English title runs
       past the 30% line on the right */
    html:not([dir="rtl"]) .wp-block-cover.lior-hero {
        justify-content: flex-start;
        padding-left: calc(70% - 345px);
        padding-right: max(clamp(24px, 5vw, 72px), (100% - 1200px) / 2);
    }
}
:root .lior-hero h1 {
    font-size: clamp(40px, 6vw, 76px);
    line-height: 1.05;
    margin-bottom: 16px;
    color: #fff;
}
/* Hero text is always white, whatever photo or overlay colour is set: Gutenberg flips a cover to dark text (is-light)
   when the overlay colour is light, and the photo can change */
:root .lior-hero .wp-block-cover__inner-container,
:root .lior-hero :is(h1, h2, h3, p) {
    color: #fff;
}
/* White outline buttons over the photo; Blocksy's outline rule is 4 classes deep, so these need 5 */
.lior-hero
    .wp-block-button.is-style-outline
    .wp-block-button__link:not(.has-text-color) {
    color: #fff;
}
.lior-hero
    .wp-block-button.is-style-outline
    .wp-block-button__link:not(.has-border-color) {
    border-color: rgba(255, 255, 255, 0.85);
}
.lior-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: #fff;
    color: var(--lior-ink);
}
.lior-hero p.lior-hero-sub {
    font-size: clamp(18px, 2vw, 22px);
    opacity: 0.92;
}
/* Lift instead of an overlay: a soft shadow keeps the text readable over the undimmed photo */
.lior-hero :is(h1, h2, p),
.lior-hero .wp-block-button.is-style-outline .wp-block-button__link {
    text-shadow:
        0 1px 3px rgba(18, 21, 22, 0.55),
        0 2px 18px rgba(18, 21, 22, 0.6),
        0 4px 48px rgba(18, 21, 22, 0.55);
}
.lior-hero .wp-block-button__link {
    box-shadow:
        0 2px 6px rgba(18, 21, 22, 0.25),
        0 10px 36px rgba(18, 21, 22, 0.4);
}
.lior-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
    text-shadow: none;
}

/* Light flare over the photo (screen blend), clipped to the hero. lior-site.php sets --lior-flare-y on scroll so it
   moves faster than the page; it runs past the bottom edge so the shift never shows an edge. On load it settles into
   place (translate/scale, separate from the scroll transform). */
.lior-hero::after {
    content: "";
    position: absolute;
    inset: 0 0 -50% 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    transform: translate3d(
        0,
        calc(var(--lior-flare-y, 0px) + var(--lior-flare-float)),
        0
    );
    will-change: transform;
    /* Media Library: "Hero flare – feathered" (Texturelabs LensFX 162L with its edges faded to black, which drops out
       in screen mode) */
    background: url("/wp-content/uploads/2026/10/lior-hero-flare-feathered.jpg")
        center top / cover no-repeat;
    transform-origin: 70% 30%;
    animation:
        lior-flare-settle 2.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both,
        lior-flare-float 5s ease-in-out infinite alternate;
}
/* Slow drift up and down; a registered property so it can animate inside the scroll transform */
@property --lior-flare-float {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}
@keyframes lior-flare-float {
    from {
        --lior-flare-float: -12px;
    }
    to {
        --lior-flare-float: 12px;
    }
}
@keyframes lior-flare-settle {
    from {
        opacity: 0;
        translate: 0 18%;
        scale: 1.2;
    }
    to {
        opacity: var(--lior-flare-opacity, 1);
        translate: 0 0;
        scale: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .lior-hero::after {
        animation: none;
    }
}
.lior-hero .wp-block-cover__inner-container {
    z-index: 2;
}

/* Category cards: the image is the link, the name sits on top of it */
.lior-cat .wp-block-column {
    position: relative;
    transition: transform 0.35s ease;
}
.lior-cat .wp-block-column:hover {
    transform: translateY(-6px);
}
.lior-cat .wp-block-image {
    position: relative;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    transition: box-shadow 0.35s ease;
}
.lior-cat .wp-block-column:hover .wp-block-image {
    box-shadow: 0 24px 50px -20px rgba(18, 21, 22, 0.45);
}
/* core makes the link inline-block, which leaves a descender gap under it */
.lior-cat .wp-block-image a,
.lior-cat .wp-block-image img {
    display: block;
}
.lior-cat .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
/* Darken the bottom of the image so the name stays readable */
.lior-cat .wp-block-image a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 21, 22, 0.6), transparent 55%);
}
:root .lior-cat h3 {
    position: absolute;
    inset-inline-start: 28px;
    bottom: 24px;
    margin: 0;
    font-size: 28px;
    color: #fff;
    pointer-events: none; /* clicks fall through to the image link */
}
.editor-styles-wrapper .lior-cat h3 {
    pointer-events: auto; /* keep the name editable in Gutenberg */
}

/* Home category cards stack one per row on phones: a wide crop keeps them short */
@media (max-width: 781px) {
    .lior-cat .wp-block-image img {
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }
    :root .lior-cat h3 {
        inset-inline-start: 20px;
        bottom: 16px;
        font-size: 22px;
    }
}

/* Rounded media */
.lior-rounded img,
.lior-rounded video {
    display: block;
    border-radius: 1rem;
}

/* Product carousel (arrows added by lior-site.php). Cards per view on desktop follow the shortcode's columns="N". */
.lior-carousel {
    position: relative;
    --lior-carousel-cols: 4;
}
@media (min-width: 1000px) {
    .lior-carousel:has(.columns-2) {
        --lior-carousel-cols: 2;
    }
    .lior-carousel:has(.columns-3) {
        --lior-carousel-cols: 3;
    }
    .lior-carousel:has(.columns-5) {
        --lior-carousel-cols: 5;
    }
    .lior-carousel:has(.columns-6) {
        --lior-carousel-cols: 6;
    }
}
.lior-carousel ul.products {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: calc(
        (100% - (var(--lior-carousel-cols) - 1) * 30px) /
            var(--lior-carousel-cols)
    );
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 8px;
}
.lior-carousel ul.products::-webkit-scrollbar {
    display: none;
}
.lior-carousel ul.products li.product {
    scroll-snap-align: start;
}
.lior-carousel-arrow {
    position: absolute;
    top: 35%;
    z-index: 2;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--lior-cream);
    color: var(--lior-ink);
    box-shadow: 0 6px 20px -6px rgba(18, 21, 22, 0.35);
    cursor: pointer;
    transition:
        opacity 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}
.lior-carousel-arrow::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: auto;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.lior-carousel-arrow:hover {
    background: var(--lior-blue);
    color: #fff;
}
.lior-carousel-arrow:disabled {
    opacity: 0;
    pointer-events: none;
}
/* RTL: "prev" sits on the right and points right, "next" on the left and points left */
.lior-carousel-prev {
    inset-inline-start: -22px;
}
.lior-carousel-prev::before {
    transform: translateX(-2px) rotate(45deg); /* › */
}
.lior-carousel-next {
    inset-inline-end: -22px;
}
.lior-carousel-next::before {
    transform: translateX(2px) rotate(-135deg); /* ‹ */
}
.lior-carousel.is-static .lior-carousel-arrow {
    display: none;
}
@media (max-width: 999px) {
    .lior-carousel {
        --lior-carousel-cols: 2.3;
    }
    .lior-carousel-arrow {
        display: none;
    }
}
@media (max-width: 689px) {
    /* Two cards and the edge of a third, so it reads as a row you can swipe */
    .lior-carousel {
        --lior-carousel-cols: 2.25;
    }
    .lior-carousel ul.products {
        gap: 12px;
        grid-auto-columns: calc(
            (100% - (var(--lior-carousel-cols) - 1) * 12px) /
                var(--lior-carousel-cols)
        );
    }
}
/* Swipe progress bar under the carousel (added by lior-site.php); arrows take over from 1000px */
.lior-carousel-progress {
    height: 3px;
    margin: 16px auto 0;
    max-width: 160px;
    border-radius: 3px;
    background: rgba(18, 21, 22, 0.1);
    overflow: hidden;
}
.lior-carousel-progress span {
    display: block;
    width: var(--lior-progress-size, 30%);
    height: 100%;
    border-radius: inherit;
    background: var(--lior-blue);
    transform: translateX(var(--lior-progress-offset, 0));
}
.lior-carousel.is-static .lior-carousel-progress {
    display: none;
}
@media (min-width: 1000px) {
    .lior-carousel-progress {
        display: none;
    }
}

/* Product cards (shop, categories, home carousel, related): image and text in one white card; name on the right, price
   on the left; a light outlined "add to cart" across the bottom. Corner radius comes from the Customizer's card radius. */
.woocommerce ul.products li.product {
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: start;
    column-gap: 12px;
    padding: 0 16px 16px;
    border-radius: var(--theme-border-radius, 20px);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(18, 21, 22, 0.06);
    text-align: start;
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -22px rgba(18, 21, 22, 0.35);
}
.woocommerce ul.products li.product > * {
    grid-column: 1 / -1;
}
.woocommerce ul.products li.product > figure {
    width: calc(
        100% + 32px
    ); /* image runs edge to edge, past the card padding */
    margin: 0 -16px 14px;
}
.woocommerce ul.products li.product > figure .ct-media-container,
.woocommerce ul.products li.product > figure img {
    border-radius: 0; /* the card clips the corners */
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    grid-column: 1;
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
}
.woocommerce ul.products li.product .price {
    grid-column: 2;
    align-self: start;
    margin: 0;
    color: var(--lior-blue);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.woocommerce ul.products li.product .ct-woo-card-actions {
    margin-top: 14px;
}
.woocommerce ul.products li.product .ct-woo-card-actions .button {
    width: 100%;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid rgba(69, 104, 140, 0.45);
    background: transparent;
    color: var(--lior-blue);
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
}
.woocommerce ul.products li.product .ct-woo-card-actions .button:hover {
    transform: none;
    border-color: var(--lior-blue);
    background: var(--lior-blue);
    color: #fff;
}

/* Phones: two cards per row (Customizer → WooCommerce → Product Archives), so the card gets compact: price under
   the name, smaller text and button */
@media (max-width: 689px) {
    .woocommerce ul.products {
        --grid-columns-gap: 12px;
    }
    .woocommerce ul.products li.product {
        padding: 0 10px 10px;
    }
    .woocommerce ul.products li.product > figure {
        width: calc(100% + 20px);
        margin: 0 -10px 10px;
    }
    .woocommerce
        ul.products
        li.product
        :is(.woocommerce-loop-product__title, .price) {
        grid-column: 1 / -1;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 14px;
    }
    .woocommerce ul.products li.product .price {
        font-size: 13px;
    }
    .woocommerce ul.products li.product .ct-woo-card-actions {
        margin-top: 10px;
    }
    .woocommerce ul.products li.product .ct-woo-card-actions .button {
        min-height: 34px;
        padding: 6px 8px;
        font-size: 13px;
    }
}

/* Shop filter bar (added by lior-site.php): category chips on the right, price slider on the left */
.lior-shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(18, 21, 22, 0.08);
}
.lior-shop-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.lior-shop-filters a {
    padding: 6px 14px;
    border: 1px solid rgba(18, 21, 22, 0.14);
    border-radius: 999px;
    background: transparent;
    color: var(--lior-ink);
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}
.lior-shop-filters a:hover {
    border-color: var(--lior-blue);
    color: var(--lior-blue);
}
.lior-shop-filters a.is-active {
    border-color: var(--lior-ink);
    background: var(--lior-ink);
    color: #fff;
}
.lior-shop-price {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
}
.lior-shop-price form {
    margin: 0;
}
.lior-shop-price .price_slider_wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
}
.lior-shop-price .price_slider {
    width: 180px;
    margin: 0 9px;
}
.lior-shop-price .price_slider_amount {
    flex-wrap: nowrap;
}
/* The "300 ₪ — 4,500 ₪" label changes width while dragging (950 → 1,190), which used to shift the slider under the
   mouse. A fixed width with same-width digits keeps it still. */
.lior-shop-price .price_label {
    min-width: 13.5em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lior-shop-price .price_slider_amount .button {
    min-height: 0;
    padding: 6px 16px;
    font-size: 14px;
}
@media (max-width: 689px) {
    /* Phones: chips wrap onto more lines, price slider under them */
    .lior-shop-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .lior-shop-price,
    .lior-shop-price form {
        width: 100%;
    }
    .lior-shop-price .price_slider_wrapper {
        flex-wrap: wrap;
    }
    .lior-shop-price .price_slider {
        flex: 1 1 100%;
        width: auto;
    }
    .lior-shop-price .price_slider_amount {
        flex: 1 1 100%;
    }
}

/* Contact page: details card. A plain List block; each link gets its icon from its address (tel:, WhatsApp, mailto:, maps). */
:where(.lior-contact-card) {
    background: var(--lior-sand);
    border-radius: 24px;
    padding: clamp(24px, 4vw, 40px);
}
.lior-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.lior-contact-list li {
    padding: 10px 0;
    font-size: 17px;
}
.lior-contact-list li + li {
    border-top: 1px solid rgba(18, 21, 22, 0.08);
}
.lior-contact-list a {
    --lior-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-inline-start: 58px;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.lior-contact-list a:hover {
    color: var(--lior-blue);
}
/* white circle + icon */
.lior-contact-list a::before,
.lior-contact-list a::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.lior-contact-list a::before {
    inset-inline-start: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 16px -8px rgba(18, 21, 22, 0.25);
    transition: background 0.2s ease;
}
.lior-contact-list a::after {
    inset-inline-start: 12px;
    width: 20px;
    height: 20px;
    background: var(--lior-blue);
    mask: var(--lior-icon) center / contain no-repeat;
    transition: background 0.2s ease;
}
.lior-contact-list a:hover::before {
    background: var(--lior-blue);
}
.lior-contact-list a:hover::after {
    background: #fff;
}
.lior-contact-list a[href^="tel:"] {
    --lior-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.lior-contact-list a:is([href*="whatsapp"], [href*="wa.me"]) {
    --lior-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}
.lior-contact-list a[href^="mailto:"] {
    --lior-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
}

/* White card around the contact form */
:where(.lior-card) {
    background: #fff;
    border-radius: 24px;
    padding: clamp(24px, 4vw, 40px);
    box-shadow: 0 20px 50px -30px rgba(18, 21, 22, 0.35);
}

/* WPForms in page content (the footer form has its own dark style below) */
.entry-content .wpforms-container .wpforms-form .wpforms-field {
    padding: 0 0 14px;
}
.entry-content
    .wpforms-container
    .wpforms-form
    .wpforms-field
    :is(input, textarea) {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 50px;
    padding: 12px 16px;
    border: 1px solid var(--theme-palette-color-5);
    border-radius: 12px;
    background: var(--lior-cream);
    color: var(--lior-ink);
    font-size: 16px;
    box-shadow: none;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}
.entry-content .wpforms-container .wpforms-form .wpforms-field textarea {
    min-height: 150px;
    resize: vertical;
}
.entry-content
    .wpforms-container
    .wpforms-form
    .wpforms-field
    :is(input, textarea):focus {
    border-color: var(--lior-blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(69, 104, 140, 0.15);
    outline: none;
}
.entry-content
    .wpforms-container
    .wpforms-form
    .wpforms-field
    :is(input, textarea)::placeholder {
    color: rgba(18, 21, 22, 0.5);
}
.entry-content .wpforms-container .wpforms-form .wpforms-submit-container {
    padding-top: 6px;
}
.entry-content .wpforms-container .wpforms-form .wpforms-submit {
    min-width: 160px;
    padding: 12px 32px;
}

/* Footer */
.ct-footer .widget-title {
    color: #fff;
}
.ct-footer .wp-block-heading {
    color: #fff;
}
.ct-footer ul.lior-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ct-footer ul.lior-footer-links li {
    margin-bottom: 8px;
}
.ct-footer .wpforms-container input {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}
.ct-footer .wpforms-container input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
.ct-footer .wpforms-submit {
    background: var(--lior-cream) !important;
    color: var(--lior-ink) !important;
    border: 0 !important;
}

/* Product page (hooks in lior-site.php) */
.lior-back-to-shop {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 0.75rem;
    font-size: 14px;
    font-weight: 500;
    color: rgba(18, 21, 22, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}
.lior-back-to-shop::before {
    content: "←"; /* "back" points toward the start of the line: left in English, right in Hebrew */
}
[dir="rtl"] .lior-back-to-shop::before {
    content: "→";
}
.lior-back-to-shop:hover {
    color: var(--lior-blue);
}
.single-product .product_title {
    color: var(--lior-blue);
}
/* Sizes | FAQ, side by side like the live site */
.lior-product-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    margin-block: 1.25rem 1.5rem;
    padding: 20px 24px;
    border-radius: 16px;
    background: var(--lior-sand);
    font-size: 15px;
    line-height: 1.6;
}
.lior-product-sizes {
    margin: 0;
    padding-inline-end: 24px;
    border-inline-end: 1px solid rgba(18, 21, 22, 0.12);
    white-space: nowrap;
}
.lior-product-sizes dt {
    font-weight: 700;
}
.lior-product-sizes dd {
    margin: 0;
}
.lior-product-faq p {
    margin: 0;
}
.lior-product-faq p + p {
    margin-top: 0.75rem;
}
@media (max-width: 689px) {
    .lior-product-info {
        grid-template-columns: 1fr;
    }
    .lior-product-sizes {
        padding: 0 0 16px;
        border-inline-end: 0;
        border-bottom: 1px solid rgba(18, 21, 22, 0.12);
    }
}
.single-product .entry-summary .price {
    font-size: 24px;
    font-weight: 600;
    color: var(--lior-ink);
}
/* Buttons: "personal order" (WhatsApp) first and filled, add to cart outlined. Each book is made to order, so no quantity. */
.single-product form.cart .ct-cart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}
.single-product form.cart .quantity {
    display: none;
}
.single-product
    form.cart
    :is(.single_add_to_cart_button, .lior-personal-order) {
    flex: 1 1 180px;
    min-height: 52px;
    margin: 0;
}
.single-product form.cart .lior-personal-order {
    order: -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.single-product form.cart .single_add_to_cart_button {
    border: 2px solid var(--lior-blue);
    background: transparent;
    color: var(--lior-blue);
}
.single-product form.cart .single_add_to_cart_button:hover {
    background: var(--lior-blue);
    color: #fff;
}

/* Sort dropdown: a pill like the category chips, at every size (Blocksy shrinks it to a bare icon on phones) */
.woo-listing-top .woocommerce-ordering select,
.woo-listing-top .woocommerce-ordering select:focus {
    width: auto;
    height: 36px;
    padding-block: 0;
    padding-inline: 16px 36px;
    border: 1px solid rgba(18, 21, 22, 0.14);
    border-radius: 999px;
    background: transparent
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121516' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
        no-repeat right 14px center / 14px;
    color: var(--lior-ink);
    font-size: 14px;
    user-select: auto;
}
[dir="rtl"] .woo-listing-top .woocommerce-ordering select {
    background-position: left 14px center;
}
.woo-listing-top .woocommerce-ordering .ct-sort-icon {
    display: none;
}
@media (max-width: 689px) {
    .woo-listing-top .woocommerce-ordering {
        margin-inline-start: 0;
    }
}

/* Phone header: the EN / עב language link (Blocksy HTML element, [lior_language_link]) */
.lior-lang-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding-inline: 4px;
    color: var(--lior-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.lior-lang-link:hover {
    color: var(--lior-blue);
}
[data-transparent-row="yes"] .lior-lang-link {
    color: #fff;
}

/* Phone menu panel: the current page is underlined (its colour is the Customizer's white, like the other links) */
#offcanvas .current-menu-item > a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

/* WooCommerce price slider (classic widget, shown in the shop filter bar; nothing else styles it with Blocksy) */
.price_slider {
    position: relative;
    direction: ltr; /* jQuery UI positions from the left; on RTL pages it's mirrored below, so cheap is on the right */
    height: 4px;
    margin: 18px 9px 22px;
    border-radius: 4px;
    background: var(--theme-palette-color-5);
}
[dir="rtl"] .price_slider {
    transform: scaleX(-1); /* lior-site.php flips the mouse maths to match */
}
.price_slider .ui-slider-range {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 4px;
    background: var(--lior-blue);
}
.price_slider .ui-slider-handle {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border: 2px solid var(--lior-blue);
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    cursor: grab;
    outline: none;
}
.price_slider .ui-slider-handle:focus-visible {
    box-shadow: 0 0 0 4px rgba(69, 104, 140, 0.25);
}
.price_slider_amount {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.price_slider_amount input {
    display: none; /* the min/max text fields; the slider replaces them */
}
.price_slider_amount .clear {
    display: none;
}

/* Floating WhatsApp button: the end side of the screen (left in RTL, right in LTR) */
.lior-whatsapp {
    position: fixed;
    inset-inline-end: 1.25rem;
    inset-block-end: 1.25rem;
    z-index: 99;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--lior-blue);
    color: var(--lior-cream);
    box-shadow: 0 0.25rem 1rem rgb(18 21 22 / 0.2);
    transition: background-color 0.2s, transform 0.2s;
}
.lior-whatsapp:hover {
    background: var(--lior-blue-dark);
    color: var(--lior-cream);
    transform: translateY(-2px);
}

/* Cookie banner: the start side, so it never covers the WhatsApp button */
.lior-consent {
    position: fixed;
    inset-inline-start: 1.25rem;
    inset-block-end: 1.25rem;
    z-index: 100;
    max-width: 24rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background: var(--lior-sand);
    color: var(--lior-ink);
    box-shadow: 0 0.25rem 1.5rem rgb(18 21 22 / 0.18);
    font-size: 0.9rem;
}
.lior-consent[hidden] {
    display: none;
}
.lior-consent p {
    margin: 0 0 0.75rem;
}
.lior-consent a {
    text-decoration: underline;
}
.lior-consent-actions {
    display: flex;
    gap: 0.5rem;
}
.lior-consent button {
    flex: 1;
    min-height: 2.5rem;
    cursor: pointer;
}
.lior-consent-decline {
    background: transparent;
    color: var(--lior-ink);
    border: 1px solid var(--lior-ink);
}
@media (max-width: 600px) {
    .lior-consent {
        inset-inline-end: 1.25rem;
        inset-block-end: 5.5rem; /* above the WhatsApp button */
        max-width: none;
    }
}

/* No breadcrumbs anywhere */
.ct-breadcrumbs,
.woocommerce-breadcrumb {
    display: none;
}

/* "הכירו את הספר" section: a rendered book (frame sequence) that opens as the section scrolls into view. The <img> is
   the last frame and the fallback; lior-site.php draws the scrolled-to frame on a canvas over it. The render's edges
   are feathered to transparent, so it sits straight on the sand background. */
.lior-book-seq {
    position: relative;
    max-width: 420px;
    margin-inline: auto;
}
.lior-book-seq img,
.lior-book-seq canvas {
    display: block;
    width: 100%;
    height: auto;
}
.lior-book-seq canvas {
    position: absolute;
    inset: 0;
}
.lior-book-seq.is-live img {
    visibility: hidden;
}

/* Compact: this section is a small aside, not a full-size one */
.entry-content > .lior-book-section {
    --lior-section-space: clamp(28px, 4vw, 52px);
}
.lior-book-section .wp-block-columns {
    gap: clamp(1.5rem, 4vw, 3rem);
    justify-content: center;
}
.lior-book-section .wp-block-column {
    flex-grow: 0;
}
.lior-book-section h2 {
    font-size: 1.5rem;
}
.lior-book-section p:not(.lior-eyebrow) {
    font-size: 0.9375rem;
}
.lior-book-section .wp-block-button__link {
    font-size: 0.875rem;
    padding: 0.55rem 1.2rem;
}

/* Narrow section: add "lior-w-900" (Advanced → Additional CSS class) to a Group block to cap its content at 900px */
.lior-w-900 {
    --wp--style--global--content-size: 900px;
    --theme-block-max-width: 900px;
}