/*
Theme Name: Emilia
Theme URI: https://www.emilia.digital
Author: Emilia Digital
Author URI: https://www.emilia.digital
Description: Liam Hotels — network + hotel template set, bilingual (he/en), Woo gift-card shop.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: em
*/

/* ============================================================================
   LIAM HOTELS — style.css
   ----------------------------------------------------------------------------
   The site's DESIGN lives in assets/css/main.css (migrated verbatim from the
   static source, hand-edited from that point on — §4B). This file holds only
   the three things that must NOT live there:

     1. Legacy lazy-load support  — Woo templates only (em_set_picture)
     2. Gravity Forms CSS         — single-copy location per §4B
     3. A .woocommerce-scoped carve-out of the old EMILIA shop CSS

   ⚠ REM BASE. main.css sets html{font-size:62.5%} globally, so 1rem = 10px
   site-wide. The carve-out below was authored against a 16px root, so every
   rem value in it was converted to px (x16) during the Option-A surgery on
   11/08/2026. DO NOT reintroduce rem units in the carve-out — use px, or use
   main.css's own tokens if the rule is really a design rule.

   ⚠ SCOPING. Everything in the carve-out is scoped to body.woocommerce-page or
   .woocommerce. The originals used bare selectors (button[type="submit"],
   textarea, select, .accordion-button, ...) which would restyle the Liam
   contact form and the FAQ accordions on every page. See discovery-findings.md
   §10 for the full list of what was dropped and why.
   ============================================================================ */


/* ============================================================================
   1. LEGACY LAZY-LOAD SUPPORT — WooCommerce templates only
   ----------------------------------------------------------------------------
   The Liam static source does NOT JS-lazy-load (verified: zero .lazy /
   data-src / data-bg-multi across all 14 statics, all 11 JS files and
   main.css). New Liam templates use em_image(), which emits a plain <img src>
   with native loading/decoding — no placeholder swap, no pop-in.

   These rules exist ONLY because the pre-existing Woo templates in
   woocommerce/ and inc/ still call em_set_picture(), which always emits
   .lazy + data-src + load.gif. They are inert on any page that has no .lazy
   element, so they cost nothing on Liam pages. Do not call em_set_picture()
   from new templates.
   ============================================================================ */

img.lazy {
    opacity: 0;
}

img:not(.initial) {
    transition: opacity 1s;
}

img.initial, img.loaded, img.error {
    opacity: 1;
}

img:not([src]) {
    visibility: hidden;
}

.lazy[data-bg-multi] {
    background-size: cover;
    background-position: center;
    background-color: transparent;
}

/* Native dimension attributes require this reset, always emitted together
   (gotcha 21): without height:auto an <img> carrying width/height attributes
   renders at its attribute height while the width clamps -> distortion. */
img {
    max-width: 100%;
    height: auto;
}


/* ============================================================================
   2. GRAVITY FORMS — the Liam contact form
   ----------------------------------------------------------------------------
   ONE form site-wide: the contact form, embedded on both page-contact.php and
   template-hotel-contact.php (hotel preselected in hotel context). Mapped onto
   the static's own tokens, taken from main.css .contact-form* — no invented
   values.

   ⚠ REWRITTEN 13/08/2026 — SPECIFICITY + LOAD ORDER. The rules below were
   correct in content and still lost. Two measured causes, from the real
   staging DOM and the real GF 3.0.2 stylesheets:

   1. LOAD ORDER. style.css is enqueued at document position 73; GF's
      basic.min.css / theme-components.min.css / theme.min.css come in at 96, 97
      and 98. So on any TIE, Gravity Forms wins.

   2. THE TIES WERE REAL, and every one of them broke layout:
      · GF basic.css `.gform_wrapper.gravity-theme .gfield.gfield--width-half
        { grid-column: span 6 }` and `...--width-full { grid-column: span 12 }`
        are (0,4,0). The old override for --width-full was ALSO (0,4,0) and
        --width-half had no override at all. With .gform_fields on
        `display: contents` the .gfield elements are direct children of the
        form's 2-COLUMN grid, so a surviving `span 6` / `span 12` forces 6 and
        12 implicit columns into a 2-column grid — the whole form re-flows.
        That is the "spacing off".
      · GF basic.css `.gform_wrapper.gravity-theme .gfield select.medium
        { width: calc(50% - 8px) }` and `.gfield textarea.medium
        { height: 192px }` are (0,4,0). The old control rule was (0,4,0) for
        select/textarea (no attribute selector to lift it, unlike the
        input[type=…] arms) — so the hotel select rendered at HALF width and the
        message box at 192px instead of the design's 129px. That is the
        "inputs unstyled".
      · GF basic.css `.gform_wrapper.gravity-theme
        input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file])
        { line-height: 2; min-height: 32px }` is (0,6,1) — it outranked
        everything here. §7 flags this one as a ≤641px trap; in 3.0.2 it is
        UNCONDITIONAL.

   THE FIX: scope on the form's own GF Custom CSS Class instead of the section.
   GF renders it as `em-contact-form` on the <form> and `em-contact-form_wrapper`
   on the wrapper (verified in the staging DOM), so
   `.em-contact-form_wrapper.gform_wrapper.gravity-theme` is a 3-class scope on a
   single element — one class more than GF's own `.gform_wrapper.gravity-theme`
   prefix everywhere, before the target is even added. Still NOT keyed on
   #gform_wrapper_{id} (§7: form IDs are user-assigned; staging is on id 3, not
   the 2 in the brief). It also covers BOTH contact contexts by construction,
   since both embed the same form.

   The static's submit sits INSIDE the form grid (grid-column: 1/-1;
   justify-self: start). GF renders submit in .gform_footer, a sibling of
   .gform-body — so .gform-body and .gform_fields get `display: contents`,
   promoting the fields to direct children of <form> and letting the source's
   own .contact-form grid rule apply verbatim (§7 house technique).

   The source form is a 2-COLUMN grid (1fr 1fr), not a 12-column framework
   grid, so §7's repeat(12,1fr) recipe does not apply here: half-width is the
   default and only full-width fields need a span.
   ============================================================================ */

/* --- error token -----------------------------------------------------------
   DECISION (flagged): the static source ships no required fields, no error
   styling and no error colour, so there is nothing in the palette to map GF's
   error states onto. Reusing a near-focus colour on a lead form is a
   conversion risk (§7), so ONE dedicated error token is introduced here. It is
   deliberately outside main.css's palette because it is not a design token the
   client edits. Change it here and nowhere else.

   Declared on the WRAPPER now, not on .contact-form-section, so the token
   travels with the form into any context that embeds it. */
.em-contact-form_wrapper {
    --clr-error: #b3261e;
}

/* Promote GF's field list into the source's own grid. */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gform-body,
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_fields {
    display: contents;
}

/* The <form> itself becomes the grid — same tracks/gaps as main.css
   .contact-form (gap: 4.4rem 12.7rem = the design's 44px row / 127px column). */
.em-contact-form_wrapper.gform_wrapper.gravity-theme form.em-contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 12/10/2026 (client: too much gap) — was 4.4rem 12.7rem (44px / 127px). */
    gap: 2.4rem 4rem;
}

/* One field = one grid item, matching .contact-form__field. */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* GF ships its own padding on .gfield; the source has none. */
    padding: 0;
    /* validation messages stay IN FLOW: this is a multi-row form, so a taller
       row is correct and does not break a shared baseline (§7). */
    position: relative;
}

/* ⚠ NEUTRALISE GF'S 12-COLUMN SPANS — the rule the old block was missing.
   (0,5,0) via the attribute selector, so it beats GF's (0,4,0)
   `.gfield.gfield--width-half { grid-column: span 6 }` regardless of load
   order, and it covers EVERY width class GF ships (half / third /
   two-thirds / quarter / full) rather than enumerating the ones this form
   happens to use today. In a 2-column grid the correct value is "one track". */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield[class*="gfield--width-"] {
    grid-column: auto;
}

/* Message field spans both columns — .contact-form__field--full.
   MUST stay after the reset above: same (0,5,0), so source order decides. */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield.gfield--width-full {
    grid-column: 1 / -1;
}

/* --- labels ---------------------------------------------------------------
   GF's .gfield_label ships font-size 16px / font-weight 700 / margin-bottom 8px
   (theme.css, (0,3,0)), which both bolds the label and adds a second gap on top
   of .gfield's own 1rem. Restated explicitly from main.css .contact-form__label,
   including display, since inline-block vs block changes the line box. */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield_label {
    display: block;
    margin: 0;
    padding: 0;
    font-family: var(--ff-secondary);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4;
    color: #3d454d;
    text-align: right;
}

/* --- controls -------------------------------------------------------------
   Restated from main.css .contact-form__control (42px tall, 8px radius,
   1px #33302D, transparent fill). The `.gfield` in the selector is load-bearing:
   it lifts these to (0,5,0) so they outrank GF's own (0,4,0)
   `.gfield input.medium / select.medium / textarea.medium` sizing rules, which
   otherwise won on source order and halved the select's width. */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container input[type="text"],
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container input[type="email"],
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container input[type="tel"],
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container select,
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container textarea {
    width: 100%;
    height: 4.2rem;
    border: 1px solid #33302d;
    border-radius: 0.8rem;
    background: transparent;
    padding-inline: 1.4rem;
    padding-block: 0;
    font-family: var(--ff-secondary);
    font-size: 1.6rem;
    color: var(--clr-primary-200);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* GF basic.css sets `line-height: 2; min-height: 32px` on every non-radio,
   non-checkbox, non-image, non-file input at (0,6,1) — the highest-specificity
   selector it aims at these controls, and above everything else in this block.
   The :not() chain is repeated verbatim so this lands at (0,9,0) and wins; it is
   the only place in this file that mirrors a vendor selector, and it exists
   solely to beat that one declaration pair. line-height 2 on a 16px font is a
   32px line box inside a 42px control, which pushes the text off the design's
   optical centre. */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container input:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]) {
    line-height: 1.4;
    min-height: 0;
}

.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container textarea {
    /* 129px in the design; GF's .gfield textarea.medium says 192px. */
    height: 12.9rem;
    padding-block: 1.2rem;
    resize: vertical;
}

/* Kill GF's default focus glow, restore the source's. */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container input:focus,
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container select:focus,
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container textarea:focus {
    outline: none;
    border-color: var(--clr-primary-400);
    box-shadow: 0 0 0 2px rgba(71, 65, 50, 0.15);
}

/* --- the hotel select -----------------------------------------------------
   The source's select is a PLAIN NATIVE <select> (the only native select in
   the whole source), so GF's select stays native and only its CLOSED state is
   styled — the open list is OS-drawn and cannot be styled, which is correct
   and expected (§7). No JS dropdown widget is built here; the custom
   role="listbox" widget belongs to the deals / gift-card FILTER bars only.

   The GF placeholder option ("בחרו מלון") comes through as
   <option value='' class='gf_placeholder'> and needs no styling of its own —
   it is a normal option in the closed control.

   Chevron is the source's inline SVG, positioned at the control's LEFT edge in
   both directions via background-position: left. */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield .ginput_container select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2333302D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 1.4rem center;
    /* 12/10/2026 (client) — the chevron sits on the PHYSICAL left in both
       directions, so its room goes on padding-left; the text side keeps the
       inputs' 1.4rem. Was padding-inline-start: 3.6rem, which in RTL put
       36px on the RIGHT (the text side). */
    padding-left: 3.6rem;
    padding-right: 1.4rem;
}

/* --- submit ---------------------------------------------------------------
   Restated from main.css .contact-form__submit. GF renders this as a <button>
   (not input[type=submit]) in 3.0.2 — both are matched. theme.css puts
   `display: flex` on .gform_footer and `align-self: flex-end` on the button;
   `display: contents` on the footer removes the former's box entirely so the
   button becomes a grid item of the form, and align-self is restated to start
   so it cannot drift. margin/line-height beat GF's own footer defaults (§7). */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_footer {
    display: contents;
}

.em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_footer button.gform_button,
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_button {
    grid-column: 1 / -1;
    justify-self: start;
    align-self: start;
    width: auto;
    min-width: 16.9rem;
    height: 4.1rem;
    margin: 0; /* beats GF theme.css .gform_footer input { margin-bottom: 8px } */
    padding-inline: 2.4rem;
    padding-block: 0;
    line-height: 1; /* beats GF basic.css input { line-height: 2 } */
    border: 1px solid var(--clr-primary-400);
    border-radius: var(--radius-pill);
    background-color: var(--clr-primary-400);
    color: var(--clr-neutral-100);
    font-family: var(--ff-secondary);
    font-weight: 500;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_footer button.gform_button:hover,
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_button:hover {
    background-color: transparent;
    color: var(--clr-primary-400);
}

/* --- required indicator + legend ------------------------------------------
   The source marks nothing as required (confirmed in the rendered DOM: no
   .gfield_required anywhere). If the client later turns required fields on,
   GF's per-form "Asterisk" setting adds a "* indicates required fields" legend
   that the design has no room for. */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_required_legend {
    display: none;
}

/* --- error / validation states --------------------------------------------
   GF's default red boxes are never acceptable (§7). The design has no error
   state at all, so this is the minimum honest treatment: small text under the
   control in the error colour, no box, no background, no border, text-align
   start so it stays RTL/LTR-correct. Pure CSS, so it survives the
   gform_post_render re-render after a failed AJAX submit. */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_validation_errors {
    display: none; /* the design has no summary banner */
}

.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield_description.validation_message {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--ff-secondary);
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--clr-error);
    text-align: start;
}

.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield_error .ginput_container input,
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield_error .ginput_container select,
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield_error .ginput_container textarea {
    /* border colour only — the field keeps its shape */
    border-color: var(--clr-error);
}

/* GF marks the errored field wrapper; strip its default box. */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield.gfield_error {
    background: none;
    border: 0;
    padding: 0;
}

/* --- AJAX confirmation ----------------------------------------------------
   ⚠ The confirmation is NOT scopable off .em-contact-form_wrapper. In ajax mode
   GF's iframe handler does
     jQuery('#gform_wrapper_{id}').replaceWith(confirmation_content)
   (gravityforms/form_display.php l.1355) — the wrapper element itself is
   REPLACED, so `em-contact-form_wrapper`, `gform_wrapper` and `gravity-theme`
   all disappear along with it, and every rule above stops matching. What lands
   in their place is
     <div class="gform_confirmation_wrapper em-contact-form">   (l.2094,
        {$css_class} = the form's cssClass = "em-contact-form")
       <div class="gform_confirmation_message ...">
   with no gravity-theme class, so GF's own theme CSS does not style it either —
   without this rule the message renders as bare unstyled body text.
   Scope is therefore the SECTION (owned by us, survives the replaceWith, and is
   identical in both contact contexts: page-contact.php's part and
   template-hotel-contact.php). Tokens copied from main.css .main-desc
   (l.262-267) minus its margin-top, which is a stacking figure for a paragraph
   that follows a heading. */
.contact-form-section .gform_confirmation_message {
    font-family: var(--ff-secondary);
    font-size: var(--sub-text);
    line-height: 1.6;
    color: var(--clr-primary-200);
    text-align: start;
}

/* Spinner sits next to the button rather than shifting the grid. */
.em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_ajax_spinner {
    margin-inline-start: 1.2rem;
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
}

/* Submitting state (06/10/2026): the spinner lands over the button label, so
   while it exists the label is painted in the button's own fill colour (hidden)
   and the fill is held, so a hover during submit can't reveal it. GF only
   inserts the spinner (legacy img .gform_ajax_spinner, or .gform-loader in
   GF 2.8+) on submit and removes it after, so :has() is the state flag. */
.em-contact-form_wrapper.gform_wrapper.gravity-theme:has(.gform_ajax_spinner, .gform-loader) .gform_footer input[type="submit"],
.em-contact-form_wrapper.gform_wrapper.gravity-theme:has(.gform_ajax_spinner, .gform-loader) .gform_footer button.gform_button,
.em-contact-form_wrapper.gform_wrapper.gravity-theme:has(.gform_ajax_spinner, .gform-loader) .gform_button {
    background-color: var(--clr-primary-400);
    color: var(--clr-primary-400);
    cursor: progress;
}

/* --- one-column below the design's breakpoint -----------------------------
   main.css collapses .contact-form to `grid-template-columns: 1fr; gap: 2.4rem`
   at max-width 767.98px (l.3052-3055) — its own comment: the 127px column gap is
   a desktop-only figure and would become dead vertical space at one column. The
   GF grid lives on the <form>, not on .contact-form, so it needs its own copy of
   that boundary or the two-column layout survives on mobile. Values copied
   exactly, breakpoint copied exactly. */
@media (max-width: 767.98px) {
    .em-contact-form_wrapper.gform_wrapper.gravity-theme form.em-contact-form {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }

    .em-contact-form_wrapper.gform_wrapper.gravity-theme .gfield.gfield--width-full {
        grid-column: auto;
    }

    /* F6 (18/08/2026) — centre the submit on mobile. Same selectors/specificity
       as the base rule (l.304-306, justify-self: start); source order + this
       media condition decide, so desktop keeps start-alignment. */
    .em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
    .em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_footer button.gform_button,
    .em-contact-form_wrapper.gform_wrapper.gravity-theme .gform_button {
        justify-self: center;
    }
}

/* ============================================================================
   3. WOOCOMMERCE CARVE-OUT
   ----------------------------------------------------------------------------
   What follows is the surviving part of the original EMILIA shop CSS, kept for
   cart / checkout / my-account / product pages and the YITH gift-card UI.

   DROPPED in the Option-A surgery (main.css owns these now, or the Liam
   header/footer replaces them):
     - GENERAL: body, h1-h5, main, a, .reg-title, #wpadminbar
     - FOOTER:  footer, .last-small, .emilia, .social-media
     - HEADER:  header, .nav-main, #menuWrapper, #logo, .action-row,
                .search-wrapper, .cartClick, .menu-item-has-children,
                .sub-menu, header.scrolled, .hamburger-menu, .toggler-icon
     - the entire header/nav MEDIA QUERY block (7 breakpoints)
     - the old #gform_2 / .gform_validation_errors rules (replaced by section 2
       above; scoping GF by a hardcoded form ID is exactly what §7 forbids)

   SCOPED (were bare, would have leaked onto every Liam page):
     button[type=submit], input[type=submit], .btn, textarea, select, select:focus,
     input[type=text|email|password|search|tel|url|number], .form-control,
     .form-select, .btn-close, .accordion-button, .accordion-item
   ============================================================================ */

/* --- 3a. Buttons and form controls (was lines 123-236, all bare selectors) ---
   Every selector here gained a body.woocommerce-page / .woocommerce scope. The
   originals styled button[type="submit"], textarea, select and every text input
   GLOBALLY, which would have overridden the Liam contact form, the GF fields in
   section 2, and the deals/gift-card filter controls. rem -> px (x16). */

body.woocommerce-page .button.wc-backward,
.woocommerce .button.wc-backward {
    display: inline-block;
    margin-top: 32px;
    line-height: 45px !important;
}

body.woocommerce-page button[type="submit"],
body.woocommerce-page input[type="submit"],
body.woocommerce-page .btn,
body.woocommerce-page .checkout-button,
body.woocommerce-page .wishlist_table .product-add-to-cart a,
body.woocommerce-page .button.wc-backward,
.woocommerce button[type="submit"],
.woocommerce input[type="submit"],
.woocommerce .btn,
.woocommerce .checkout-button,
.woocommerce .wishlist_table .product-add-to-cart a,
.woocommerce .button.wc-backward {
    border: 0 !important;
    background-color: var(--action-color) !important;
    color: var(--action-text) !important;
    border-radius: var(--border-radius) !important;
    position: relative;
    top: 0;
    transition: var(--transition);
    font-family: var(--title-family);
    height: 45px;
    line-height: 34px;
    font-weight: 500;
    box-shadow: none !important;
    padding-left: 25px;
    padding-right: 25px;
}

/* Round #5 (fix #4): REMOVED the legacy `.loading { color: var(--action-color) }`
   tint. It forced EVERY loading button's text to primary-100 regardless of
   state, which — with a currentColor spinner (below) — would paint the spinner
   primary-100 on a filled primary-100 button = invisible. Dropping it lets each
   button keep its own state colour while loading (white on the filled default,
   primary-100 on the transparent hover/outline), so the spinner is legible in
   both. §4d already overrode this for the add-to-cart button anyway. */

body.woocommerce-page .btn.loading::after,
.woocommerce .btn.loading::after,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.loading::after,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.loading::after,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.loading::after,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.loading::after,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.loading::after,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.loading::after,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.loading::after,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.loading::after {
    font-family: 'Line Awesome Free';
    font-weight: 900;
    content: "\f1ce";
    position: absolute;
    /* Round #6 (fix #1): the old hardcoded 45px math (top:calc(50% - 23px);
       line-height:45px; left:calc(50% - 12px)) was written for a 45px button, but
       §4d makes the add-to-cart --btn-height (4rem/40px) and full-width, so the
       glyph sat off-centre. Centre it height-AGNOSTICALLY: a fixed 2rem box with
       inset:0 + margin:auto sits dead-centre in ANY button height; line-height:1
       centres the glyph in that box. transform is left free for the spin
       animation (transform-origin defaults to the box centre → spins in place).
       Confirmed live: emilia.js AJAX-adds the single/gift-card button and applies
       .loading, and Line Awesome (icon-css) is enqueued on every Woo page, so the
       glyph renders. currentColor kept from round #5 so it inverts on hover. */
    inset: 0;
    margin: auto;
    width: 2rem;
    height: 2rem;
    text-align: center;
    line-height: 1;
    font-size: 2rem;
    color: currentColor;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

body.woocommerce-page .btn.invert,
body.woocommerce-page button[name="apply_coupon"],
body.woocommerce-page button[type="submit"].ywgc_apply_gift_card_button,
.woocommerce .btn.invert,
.woocommerce button[name="apply_coupon"],
.woocommerce button[type="submit"].ywgc_apply_gift_card_button {
    background-color: transparent !important;
    color: var(--action-color) !important;
    border: var(--border-width) solid var(--action-color) !important;
}

body.woocommerce-page button[type="submit"]:hover,
body.woocommerce-page input[type="submit"]:hover,
body.woocommerce-page .btn:hover,
.woocommerce button[type="submit"]:hover,
.woocommerce input[type="submit"]:hover,
.woocommerce .btn:hover {
    top: -4px;
}

body.woocommerce-page input[type="text"],
body.woocommerce-page input[type="email"],
body.woocommerce-page input[type="password"],
body.woocommerce-page input[type="search"],
body.woocommerce-page input[type="tel"],
body.woocommerce-page input[type="url"],
body.woocommerce-page input[type="number"],
body.woocommerce-page textarea,
body.woocommerce-page .form-control,
body.woocommerce-page .form-select,
body.woocommerce-page select,
body.woocommerce-page .select2-container--default .select2-selection--single {
    /* Round #4 (fix #2): the YITH .step-content input/textarea selectors were
       REMOVED from this list. As a 3-class selector they outranked §5b's 2-class
       field treatment — the reason the gift-card fields stayed pills. §5b (below)
       now owns them; select2 keeps this legacy skin. */
    border: var(--border-width) solid var(--solid-color);
    transition: var(--transition);
    background-color: transparent;
    border-radius: var(--border-radius);
    padding: 10px;
    height: 45px;
    font-family: var(--font-family);
    outline: 0 !important;
    max-width: 100%;
    box-shadow: none !important;
}

body.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px;
}

body.woocommerce-page input[type="text"]:focus,
body.woocommerce-page input[type="email"]:focus,
body.woocommerce-page input[type="password"]:focus,
body.woocommerce-page input[type="search"]:focus,
body.woocommerce-page input[type="tel"]:focus,
body.woocommerce-page input[type="url"]:focus,
body.woocommerce-page input[type="number"]:focus,
body.woocommerce-page textarea:focus,
body.woocommerce-page .form-control:focus,
body.woocommerce-page .form-select:focus,
body.woocommerce-page select:focus {
    /* Round #4 (fix #2): YITH step-content :focus selectors removed — §5b owns
       the gift-card field focus state now. */
    border-color: var(--action-color);
}

body.woocommerce-page textarea {
    height: auto;
    min-height: 150px;
}

body.woocommerce-page .btn-close {
    box-shadow: none !important;
    opacity: 1 !important;
}

/* --- 3b. Shop / product / cart / checkout / account / YITH -----------------
   Lifted from the original lines 786-2341 with rem -> px (x16). Selectors here
   are already Woo-namespaced (.woocommerce*, .ywgc-*, .gift-card*, .quantity,
   .price, ...) EXCEPT the Bootstrap accordion rules, which are scoped below
   because the Liam FAQ sections use .accordion-button / .accordion-item on 28
   elements across the statics and 4 rules in main.css. */
/*** PRICES ***/

ins {
text-decoration: none !important;;
}

.price {
    font-size: 22px !important;
    font-weight: 500;
    color: var(--text-color) !important;
    text-decoration: none !important;

    del {
        opacity: 0.7;
    }
}

.woocommerce-Price-currencySymbol {
    /*font-size: 75%;*/
}



/*** QUANTITY INPUT ***/
.quantity {
    position: relative;
    float: none !important;
    margin: 0 !important;
    display: inline-flex;
    flex-wrap: wrap;
    vertical-align: middle;
}

.quantity .plus,
.quantity .minus {
    background-color: var(--solid-color);
    border: none;
    height: 45px;
    width: 45px;
    color: var(--text-color);
    font-weight: bold;
    cursor: pointer;
    top: 0;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.quantity .plus:hover,
.quantity .minus:hover {
    opacity: 0.7;
}

.quantity .qty {
    text-align: center;
    padding: 0 0px;
    height: 45px;
    line-height: 30px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    width: 60px !important;
}

.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.woocommerce-page .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/*** PRODUCT PAGE ***/

/** giftcard **/

.product-type-gift-card .woocommerce-product-gallery__wrapper {
    box-shadow: none;
}
.product-type-gift-card .woocommerce-product-gallery__image {
    padding: 0;
}

.gift-cards_form>h3 {
    display: none;
}

.gift-card-content-editor.step-content label {
    font-weight: 600;
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 4px;
    line-height: 20px;
}


/* Round #6 (fix #2): the jQuery-Validate error label, restyled to the house GF
   error pattern (§2, style.css:344-380) — small text, --clr-error, no
   box/background/border, text-align:start (RTL-correct). This is the element
   jQuery Validate inserts (emilia.js `.gift-cards_form.valid()` auto-inits it
   with default errorElement `<label class="error">`); the Hebrew message + the
   below-the-field placement are set in §6e / emilia.js. The old rule painted it
   left-aligned #ff4141 12px — replaced, not stacked. */
.gift-card-content-editor.step-content label.error {
    display: block;
    margin: var(--size-100) 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--ff-secondary);
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--clr-error);
    text-align: start;
}

.gift-card-content-editor.step-content input, .gift-card-content-editor.step-content textarea {
    width: 100%;
}

/* Round #4 (fix #2): REMOVED the legacy `.step-content textarea { height:60px;
   padding-top:8px !important }` — that was the 60px pill-stub the brief calls
   out; §5b gives the textarea a real min-height + resize:vertical. Also REMOVED
   `.gift-card-content-editor { max-width:433px }` so the fields fill the card
   body and share one common edge (fix #3) instead of capping at 433px. */

.gift_card_add_to_cart_button + .added_to_cart {
    max-width: 433px;
}

/* Round #4 (fix #4): REMOVED the legacy `.gift-cards-list button` default and
   its `.selected_button, :hover { background: transparent !important }` rule.
   That `!important transparent` was overriding §5b's filled selected state, so
   clicking a preset amount produced no visible fill (E2 root cause). §5b now
   owns the amount buttons — default transparent, selected/hover filled
   --clr-primary-100 with white text. */

.gift_card_template_button .quantity {
    display: none !important;
}

.gift_card_template_button button {
    margin: 0 !important;
}

/* Round #4 (fix #5): REMOVED the unconditional `.ywgc-choose-design-preview
   { display:none !important }`. The empty design picker is now unhooked
   SERVER-SIDE (em_woo_hide_empty_design_picker, inc/woo.php) only when no
   giftcard-category designs are configured — so nothing renders when it's empty,
   AND the chooser becomes visible the moment Ron adds designs. A blanket
   display:none here would have kept the chooser hidden even after designs exist.
   The live card mock-up preview stays hidden (not wanted in the compact card). */
.ywgc-main-form-preview-container {
    display: none !important;
}

.single-product .yith-wcwl-add-to-wishlist {
    position: absolute;
    top: 0;
    right: 24px;
    width: 17px;
    overflow: hidden;
    height: 20px;
    margin: 0;
}


.summary-content {
    position: relative;
}

.woocommerce table.shop_attributes {
    border-top: 0 !important;


}

.woocommerce table.shop_attributes td {
    font-style: normal;
}

.woocommerce .woocommerce-breadcrumb {
    font-size: 14px !important;
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 8px;
}


.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb a {
    text-decoration: underline !important;
    color: inherit !important;

}

.thumbnail {
    cursor: pointer;
    opacity: 0.5;
    transition: 0.3s ease-in-out;

}

.thumb-col {
    max-width: 25%;
}

.thumbnail:hover, .thumbnail.active {
    opacity: 1;
}

body.woocommerce-page .accordion-button {
    box-shadow: none !important;
    background:  transparent !important;
    color: var(--text-color) !important;
    font-weight: 600;
}

body.woocommerce-page .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    background: transparent !important;
}

body.woocommerce-page .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    background: transparent !important;
}

body.woocommerce-page .accordion-item:first-of-type {
    border-color: var(--solid-color);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.woocommerce div.product form.cart .button {
    float: none !important;;
    margin: 0 !important;
}

.woocommerce span.onsale {
    background-color: var(--action-color);
    color: var(--action-text);
    padding: 8px 14px;
    border-radius: var(--border-radius);
    font-weight: bold;
    font-size: 12px;
    position: absolute;
    top: 8px;
    left: 8px;
    min-width: 0;
    min-height: 0;
    line-height: 1;
    z-index: 2;
}

.woocommerce span.out-of-stock-badge {
    background-color: transparent;
    white-space: nowrap;
    color: var(--action-color);
    padding: 8px 14px;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--action-color);
    font-weight: bold;
    font-size: 12px;
    position: absolute;
    top: 8px;
    left: 8px;
    min-width: 0;
    min-height: 0;
    line-height: 1;
    z-index: 2;
}

.single_add_to_cart_button {
    margin-left: calc(16px - 2px) !important;
    min-width: 150px;
}

.variations {
    display: block;
    margin-bottom: 16px;

    tr {
        display: block;
    }
    .label {
        display: block;
        font-weight: 600;
        font-size: 14px;
        opacity: 0.7;
        margin-bottom: 8px;
    }

    .value select {
        width: 317px;
    }

    .reset_variations {
        display: none !important;
    }
}

.woocommerce-variation-price .price {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 16px;
    display: inline-block;
}

.woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering {
    float: none;
    width: auto;
}

.woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count {
    float: none;
    width: auto;
    font-size: 14px;
}

.orderby {
    border: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    margin: 0 !important;
    height: auto !important;
    background-position: center right;
}

.action-wrapper .woocommerce-notices-wrapper {
    width: 100%;
}

.type-product > a {
    position: relative;
}

@media (max-width: 994px) {
   .woocommerce-breadcrumb {
       margin-top: 32px !important;
   }
}

@media (max-width: 768px) {
    .single_add_to_cart_button {
        width: calc(100% - 169px) !important;
    }

    form.checkout {
        overflow: hidden;
    }


}

@media (max-width: 600px) {
    #wpadminbar {
        bottom: auto;
        top: 0;
        display: none !important;
    }
}


@media (max-width: 480px) {
    .single_add_to_cart_button {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 48px !important;
    }
}


    /** SLICK ***/

.carousel-control-next, .carousel-control-prev {
    width: 10%;
}


.slick-track {
    margin: 0;
}

.slick-default span.onsale {
    left: 16px;
}

.slick-default .slick-list {
    margin: 0 -8px;
}

.slick-default .product {
    padding: 0 8px;
}

.slick-dots {
    list-style: none;
    padding: 0;
    margin: 24px 0 0 !important;

    li {
        display: inline-block;
        margin-right: 8px;
        padding: 0;
        cursor: pointer;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: var(--solid-color);
        overflow: hidden;
        transition: var(--transition);
        position: relative;

        button {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0;
        }
    }

    li.slick-active {
        background-color: var(--action-color);
    }
}

@media (max-width: 768px) {
    .slick-dots {
        margin-top: 16px !important;
    }

    .slick-dots {
        & li {
            width: 8px !important;
            height: 8px !important;
        }
    }
}

/*** PRODUCT LOOP CONTENT **/

.product-image-wrap {
    padding-bottom: 120%;
    position: relative;
    overflow: hidden;

    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition);
    }

    img.img-second {
        opacity: 0;
        visibility: hidden;
    }
}

.product-image-wrap:hover img.img-second {
    opacity: 1;
    visibility: visible;
}

@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}

/*** CART ***/



.product-title {
    font-weight: 500;
}


.woocommerce-mini-cart a.remove {
    background:  transparent !important;
    width: 12px;
    height: 12px;
    background-size: contain;
    opacity: 0.5;
    position: relative;
}

.woocommerce-mini-cart-item img {
    width: 100%;
    height: auto;
}

.woocommerce-mini-cart a.remove::before {
    content: "\f2ed";
    font-family: 'Line Awesome Free';
    font-weight: 900;
    color: var(--text-color);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 12px;
    font-size: 19px;
}

/* ⚠ ROUND #9 (E3): THIS WHOLE BLOCK IS CURRENTLY DEAD. There is no element with
   id="cartModal" in the theme or in any installed plugin — header.php renders
   only em_cart_link() (an <a href="/cart/">, inc/nav.php:348) and the only modal
   shells in the theme are #loginModal / #registerModal (inc/user/user.php).
   emilia.js's loadCartModal() AJAXes load_cart_modal_content into
   `#cartModal .modal-content`, which matches nothing, so woocommerce_mini_cart()
   output never reaches the DOM. `.cartModal` (the CLASS, on cart.php's row) is a
   different selector and IS live — it is what emilia.js:440 updateSubtotal()
   walks. Rounds #7/#8 described a "header mini-cart dropdown"; it does not
   render. Kept, not deleted, because the dropdown may still be built — but note
   the nested `.quantity .qty { height:25px !important }` below is (1,2,0) + and
   would override §4d's round-#9 stepper the moment a #cartModal exists. */
#cartModal {
    width: 400px;
    max-width: 100%;
    left: auto;
    right: 0;


    .modal-fullscreen {
        width: 100%;

        .modal-footer .btn {
            padding-left: 5px !important;
            padding-right: 5px !important;
        }
    }

    .woocommerce-mini-cart {
        max-height: calc(100% - 35px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 15px;
    }

    .quantity .qty {
        height: 25px !important;
        border: 0 !important;
        font-size: 14px;
        width: 40px !important;
    }

    .quantity .plus, .quantity .minus {
        height: 25px;
        background: transparent;
        width: auto;
        line-height: 25px;
        font-size: 14px;
    }

    .woocommerce-mini-cart__total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
    }

    .woocommerce-mini-cart__total {
        border-top: var(--border-width) solid var(--solid-color);
    }
}
/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

/*** ARCHIVE ***/
.border-bottom, .border-top {
    border-color: var(--solid-color) !important;
}

main#archive {
    margin-top: 0px;
}

#yith-wcwl-popup-message {
    display: none !important;
}

.add-to-wishlist-before_image .yith-wcwl-add-to-wishlist {
    position: absolute;
    right: 24px;
    top: 8px;
    left: auto;

    .blockOverlay.blockUI {
        top: -12px !important;
        left: -5px !important;
    }

    .blockUI.blockOverlay::after {
        width: 10px;
        height: 10px;
        line-height: 10px;
        font-size: 10px !important;
    }

}

.add-to-wishlist-before_image .yith-wcwl-add-to-wishlist i {
    font-size: 18px;
}

.view-wishlist {
    display: none !important;
}

.filter-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 23px;
}


.widget {

    margin-bottom: 16px;
    border-bottom: 1px solid var(--solid-color);

    form {
        display: none;
    }

    h3 {
        position: relative;
        font-size: 16px;
        font-weight: 500 !important;
        cursor: pointer;
        padding-bottom: 16px;
        margin-bottom: 0 !important;

    }

    h3::after {
        content: "\f107";
        font-family: 'Line Awesome Free';
        font-weight: 900;
        color: var(--text-color);
        transition: var(--transition);
        position: absolute;
        right: 0;
        font-size: 16px;
        top: 0px;
    }

   h3.active::after {
        transform: rotate(180deg);
    }

    .woocommerce-widget-layered-nav-list {
        list-style: none;
        padding: 0 0 12px !important;
        margin: 0;
        display: none;

        li {
            position: relative;

            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 500;

            a {
                display: block;
                padding-left: 25px;
            }
            span {
                position: absolute;
                right: 0;
                top: 0;
            }
        }

        li a:before {
            content: "\f00c";
            font-family: 'Line Awesome Free';
            font-weight: 900;
            color: #fff;
            position: absolute;
            left: 0;
            top: 2px;
            width: 17px;
            height: 17px;
            border: var(--border-width) solid var(--solid-color);
            transition: var(--transition);
            font-size: 12px;
            text-align: center;
            line-height: 16px;

        }

        li.chosen a:before {
            background-color: var(--action-color);
            border-color: var(--action-color);
        }
    }

    /* Container for the price slider amount */
    .price_slider_wrapper {
        padding: 0;
        margin-bottom: 20px;

    }

    /* Price slider track */
    .price_slider {
        height: 4px;
        background: var(--solid-color);
        border-radius: var(--border-radius);
        position: relative;
        margin: 20px 0;
        width: calc(100% - 17px);
    }

    /* Price slider range */
    .price_slider .ui-slider-range {
        background: var(--action-color);
        border-radius: var(--border-radius);
        height: 100%;
        position: absolute;
    }

    /* Price slider handles */
    .price_slider .ui-slider-handle {
        width: 19px;
        height: 19px;
        background: #fff;
        border: 2px solid var(--action-color);
        border-radius: 50%;
        top: -7px;
        position: absolute;
    }

    /* Styling for the price label */
    .price_label {
        font-size: 16px;
        color: #333;
        margin-top: 10px;
    }

    /* Styling for the filter button */
    .price_slider_amount .button {
        display: block;
        width: 100%;
    }

    .price_slider_amount .button:hover {
        background: #0056b3;
    }

    /* Clearfix for floating elements */
    .price_label {
        font-weight: 600;
        font-size: 12px;
    }
}

/* 07/10/2026: legacy shop-loop size — no longer reaches the product page's
   purchase panel, whose price is set in §12c (it was forcing that to 14px). */
.type-product .price:not(.woo-purchase-card .price) {
    font-size: 14px !important;
}

@media (max-width: 994px) {

    .filter-title {
        position: relative;
    }

    .widget h3 {
        font-size: 14px;
    }

    .filter-title::after {
        content: "\f107";
        font-family: 'Line Awesome Free';
        font-weight: 900;
        color: var(--text-color);
        transition: var(--transition);
        position: absolute;
        right: 0;
        font-size: 16px;
        top: 0px;
    }

    .filter-title.active::after {
        transform: rotate(180deg);
    }
    
    .mobile-wrap {
        display: none;
    }

    .orderby {
        font-size: 12px !important;
    }

    .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count {
        font-size: 12px;
    }
}


/*** CHECKOUT **/
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2
{
    width: 100%;
}

.woocommerce-NoticeGroup-checkout {
    border: var(--border-width) solid #ff4141;
    border-radius: var(--border-radius);
    padding: 24px;
    margin-bottom: 32px;
}

.woocommerce-NoticeGroup-checkout ul {
    list-style: none;
    padding: 0;
    margin-bottom: 0;

    ul {
        list-style: none;
    padding: 0;
        margin-bottom: 0;
    }

}

.woocommerce-checkout h3 {
    margin-bottom: 24px;
}

.woocommerce-billing-fields {
    margin-bottom: 16px;
}

.woocommerce-form__label-for-checkbox {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    padding-left: 25px;
    input {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

}

.woocommerce-form__label-for-checkbox span::before {
    content: "\f00c";
    font-family: 'Line Awesome Free';
    font-weight: 900;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0px;
    width: 17px;
    height: 17px;
    border: var(--border-width) solid var(--solid-color);
    transition: var(--transition);
    font-size: 12px;
    text-align: center;
    line-height: 16px;
}

.woocommerce-form__label-for-checkbox input:checked + span::before {
    background-color: var(--action-color);
    border-color: var(--action-color);
}

.form-row {
    margin-bottom: 24px;
}

.form-row label {
    font-weight: 600;
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 8px;
}

.woocommerce-form-coupon-toggle  {
    display: none !important;

    + p {
    display: none !important;

        + .form-row-first {
            width: 60%;
            margin-bottom: 0 !important;
            + .form-row-last {
                width: 40%;
                margin-bottom: 0 !important;
            }
        }
    }


 }



button[name="apply_coupon"] {
    width: 100%;
    top: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.review-block {
    overflow: visible;

    .woocommerce-message {
        display: none !important;
    }
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 0;
}

.woocommerce-remove-coupon {
    font-size: 12px;
}

.blockOverlay.blockUI {
    background-image: none !important;
}

.blockUI.blockOverlay::after {
    font-family: 'Line Awesome Free';
    font-weight: 900;
    content: "\f1ce";
    position: absolute;
    width: 30px;
    height: 30px;
    top: 50%;
    left: 50%;
    color: var(--action-color);
    font-size: 30px;
    text-align: center;
    line-height: 30px;
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;
}

.ywgc_enter_code {
    padding: 0 !important;
    margin: 0;

    p:first-child {
        display: none !important;

    }

    p {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ROUND #11 (fix #1): the `width: 60% / 40% !important` pair was REMOVED from
       these two rules. They were sizing YITH's own floated .form-row columns
       (ywgc-frontend.css:558 — `float:left; width:50%; padding:0 15px`), which is
       what made the code field and the Apply button read as two mismatched boxes
       on separate lines rather than one row. §10a lays the pair out with flex and
       owns their widths; an !important width here would have outranked it. */
    .form-row-first {
        margin-bottom: 0 !important;
    }

    .form-row-last {
        margin-bottom: 0 !important;
    }
}

.ywgc_enter_code>div {
    width: 100% !important;
    margin: 0 !important;
}

/* ROUND #11 (fix #1): `width:100% !important` and the `padding-left/right:5px
   !important` pair were REMOVED. The 100% width was written for the old 40%
   float column; inside §10a's flex row it stretched the button across the whole
   line. The 5px side padding outranked §3a's own 25px (that rule is (0,2,0) and
   NOT important, this one is (0,1,0) and was) and squashed the pill to its label.
   Both are now left to §3a + §10a. `top:0` stays — it suppresses §3a's -4px
   hover lift for this button, which is existing behaviour and out of scope. */
.ywgc_apply_gift_card_button {
    top: 0 !important;
}

.review-block.review-gift {

    /* ROUND #11 (fix #1): `height: 45px !important` REMOVED from here. It pinned
       the gift-card WRAPPER to 45px while the input inside is 4.2rem (42px) and
       the Apply button sits beside it — with `.review-block { overflow:hidden }`
       (below) anything taller than 45px was clipped. §10a sizes the wrapper from
       its content instead. Do not re-add a height here.

       `display: block !important` STAYS, and the !important is load-bearing:
       YITH's own template ships the wrapper with an INLINE `style="display:none"`
       attribute (yith-woocommerce-gift-cards/templates/checkout/form-gift-cards.php:42,
       whenever ywgc_display_form is left on its 'hidden' default). An inline
       attribute cannot be beaten by specificity — only by !important — so this is
       the insurance that the row is visible even if emilia.js's .show() never
       runs. It is the ONLY !important round #11 relies on. */
    .ywgc_enter_code {
        display: block !important;
    }
}

.review-block {
    border-bottom: var(--border-width) solid var(--solid-color);
    overflow: hidden;
}

#review .product-line-total {
    font-size: 14px;
}

.woocommerce-mini-cart__sub-total {
    border-top: var(--border-width) solid var(--solid-color);
    font-weight: 600;
}

#order_review ul {
    list-style: none;
    padding-left:16px;
    padding-top: 16px;
}

#order_review ul li:first-child:last-child {
        label {
            padding: 0;
        }

    label::before {
        display: none;
    }
}

#order_review ul li {
    font-weight: 400;
    font-size: 14px;
    position: relative;
    margin-bottom: 8px;
     input {
         position: absolute;
         top: 0;
         left: 0;
         opacity: 0;

     }

    label {
        position: relative;
        padding-left: 25px;
        cursor: pointer;

    }

    label::before {
        content: '';

        width: 15px;
        height: 15px;
        border: 3px solid #fff;
        box-shadow: 0 0 0 1px var(--solid-color);
        border-radius: 50%;
        transition: var(--transition);
        display: inline-block;
        vertical-align: middle;
        position: absolute;
        left: 0;
        top: 3px;
    }

    input:checked + label::before {
        background-color: var(--action-color);
    }

}

.payment_box {
    padding-left: 25px;
    padding-top: 3px;
    opacity: 0.7;
    font-size: 12px;
    line-height: 17px;
}

.woocommerce-privacy-policy-text {
    padding-top: 16px;
    font-size: 13px;
    opacity: 0.7;
    border-top: var(--border-width) solid var(--solid-color);
    font-weight: normal;

    a {
        text-decoration: underline;
    }
}

#place_order {
    width: 100% !important;
    float: none !important;
}

.sub-price strong {
    font-weight: 600;
}

.ywgc_have_code {
    display: none !important;
}

.review-block .woocommerce-error {
    color: #ff4141;
    font-size: 12px;
    font-weight: 600;
    list-style: none;
    padding: 0;
    margin-top: 8px;
    margin-bottom: 0;
    float: left;
}

label.error {
    color: #ff4141;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

.yith-giftcard {
    position: relative;

    .ywgc-remove-gift-card {
        position: absolute;
        right: 0;
        font-size: 12px;
        top: 19px;
    }

    .amount {
        padding-right: 58px;
    }
}

#ship-to-different-address {
    border: 0;
    padding: 0;
}

.woocommerce-terms-and-conditions {

    + .form-row {
        label {
            opacity: 1;
            font-weight: normal;
            padding-top: 1px;

            a {
                text-decoration: underline;
                position: relative;
                z-index: 2;
            }
        }
    }
}

form.checkout h3 {
    padding-bottom: 16px;
    border-bottom: var(--border-width) solid var(--solid-color);
}



/*** CART **/

.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
    width: 100%;
    float: none !important;
}

.checkout-button {
    text-align: center;
    display: block;
    line-height: 45px;
}

.woocommerce-cart-form .product-title {
    font-weight: 600;
    font-size: 18px;
}

/** WISHLIST ***/
table.wishlist_table {
    width: 100%;
    text-align: left;
}

.wishlist_table tr td, .wishlist_table tr th.product-checkbox, .wishlist_table tr th.wishlist-delete {
    text-align: left;
}

.wishlist-title-container {
    display: none !important;
}

.wishlist_table .product-add-to-cart a {

    text-align: center;
    padding-left: 15px !important;
    padding-right: 15px !important;
    font-size: 16px;
    display: inline-block !important;
    line-height: 45px !important;
}

.wishlist_table {
    padding: 0 !important;
    margin: 0 !important;
}

.wishlist_table.mobile li .additional-info-wrapper .product-add-to-cart {
    text-align: left !important;
}

.wishlist_table.mobile li {
    position: relative;
    margin-bottom: 48px;
}

.wishlist_table.mobile li .additional-info-wrapper .product-remove {
    position: absolute;
    right: 0;
    top: 0;
}

/** MY ACCOUNT **/

.woocommerce-orders-table {
    width: 100%;
    td, th {
        padding: 10px;
        border: 1px solid var(--solid-color);
    }
}

#loginModal, #registerModal {
    img {
        height: 70px;
        margin: auto;
        display: block;
    }

    .modal-dialog {
        max-width: 400px;
    }

    .woocommerce-form__label-for-checkbox {
        font-weight: 500;

        a {
            text-decoration: underline !important;
            position: relative;
            z-index: 3;
        }
    }
}

.forget-passowrd {
    font-size: 14px;
    text-decoration: underline !important;
}

.modal-content {
    border-radius: var(--border-radius);
    border: 0 !important;
}

.woocommerce-MyAccount-content {

    h3 {
        font-size: 18px;
    }

    .woocommerce-order-details {
        h2 {
            font-size: 18px;
        }

        table {
            width: 100%;
            td, th {
                padding: 10px;
                border: 1px solid var(--solid-color);
            }
        }

        margin-bottom: 16px;
    }

    .woocommerce-customer-details {
        h2 {
            font-size: 18px;
        }

    }
}

.my_account_giftcards {
    width: 100%;
    td, th {
        border: var(--border-width) solid var(--solid-color);
        padding: 10px;
    }
}

.woocommerce-MyAccount-content a {
    text-decoration: underline;
}

.woocommerce-MyAccount-content em {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 5px;
}

.ywgc-empty-table-icon {
    margin-bottom: 15px;
}

.woocommerce-MyAccount-navigation {
    width: 25% !important;
    ul {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            position: relative;

            font-weight: 500;
            padding-bottom: 8px;
            margin-bottom: 8px;
            border-bottom: var(--border-width) solid var(--solid-color);
            a {
                transition: var(--transition);
                opacity: 0.5;
            }
        }

        li.is-active a, li:hover a {
            opacity: 1;
        }

        li::before {
            content: '\f3fd';
            font-size: 22px;
            font-family: 'Line Awesome Free';
            font-weight: 900;
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
        }

        .woocommerce-MyAccount-navigation-link--orders::before {
            content: '\f03a';
        }

        .woocommerce-MyAccount-navigation-link--gift-cards::before {
            content: '\f06b';
        }

        .woocommerce-MyAccount-navigation-link--edit-address::before {
            content: '\f015';
        }

        .woocommerce-MyAccount-navigation-link--edit-account::before {
            content: '\f2bd';
        }

        .woocommerce-MyAccount-navigation-link--customer-logout::before {
            content: '\f2f5';
        }
    }


}

@media (max-width: 760px) {
    .woocommerce-MyAccount-navigation {
        width: 50px !important;
        float: left !important;
    }

    .single-product .yith-wcwl-add-to-wishlist {
        top: 29px;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        width: calc(100% - 50px);
        padding-left: 48px;
        float: right !important;

    }

    .woocommerce-MyAccount-navigation {
        border-right: var(--border-width) solid var(--solid-color);
        & ul {
            & li {
                position: relative;
                border-bottom: 0;
                opacity: 0.5;

                a {
                    opacity: 0 !important;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                }
            }
        }

        & ul {
            & li.is-active {
                opacity: 1
            }
        }
    }
}

/** THANK YOU PAGE **/
.woocommerce-order-received {
    h1  {
        display: none !important;
    }
    .woocommerce-thankyou-order-details {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            margin-bottom: 8px;
        }

        i {
            font-size: 20px;
        }
    }
    .woocommerce-order-details {
        width: 50%;
        float: left;
        font-size: 14px;





        border-top: var(--border-width) solid var(--solid-color);

        table {
            width: 100%;
        }

        th, td {
            padding: 10px;
            border: 1px solid var(--solid-color);
        }

        .product-name {
            width: 40%;
        }

        h2 {
            border-left: var(--border-width) solid var(--solid-color);
            border-right: var(--border-width) solid var(--solid-color);

        }
    }

    h2 {
        font-size: 18px;
        padding: 10px;
        margin-bottom: 0;
    }

    .woocommerce-customer-details {
        width: 50%;
        float: left;
        font-size: 14px;
        padding-left: 48px;
        address {
            padding: 10px;
        }

        .woocommerce-column {
            float: left;
            width: 50%;
        }

        .woocommerce-column:last-child {
            padding-left: 24px;
        }
    }

    @media (max-width: 760px) {
        .woocommerce-order-details {
            width: 100%;
            float: none;

            margin-bottom: 32px;
        }

        .woocommerce-customer-details {
            width: 100%;
            float: none;
            padding-left: 0;
        }
    }

}

.woocommerce-order-pay {

    .woocommerce {
        text-align: center;
    }

    .order_details {
        border-radius:0px;
        border: 1px solid #e5e5e5;
        margin-bottom: 24px;
        display: inline-block;

        list-style: none;
        padding: 0;
        margin: 0 auto 15px;
        li {
            display: inline-block;
            margin: 0 -2px;
            padding: 16px;
            font-size: 14px;
        }
    }

}


/* ============================================================================
   4. WOOCOMMERCE FIX ROUND — 16/08/2026
   ----------------------------------------------------------------------------
   Single product (wrapper / two-column layout / gallery / tabs→description /
   add-to-cart) + the related-vouchers strip + a light cart/checkout skin.
   Every value traces to an existing main.css token — no new design values.
   New rules use main.css's own custom properties (sanctioned in the section-3
   header: "use main.css's own tokens if the rule is really a design rule");
   the only raw px is 37px, the computed value of .mybtn's 3.7rem padding.

   ⚠ Placed here (style.css carve-out), NOT liam-hotels/scss/_woocommerce.scss:
   per CLAUDE.md's Option-A decision nothing compiles SCSS at runtime, and
   liam-hotels/ is excluded from deploy and deleted at launch (§12). style.css
   IS the theme's dedicated .woocommerce location. Recorded deviation.

   ⚠ TOKEN REVIVAL. The section-3 carve-out referenced --action-color,
   --action-text, --border-radius, --text-color, --solid-color, --title-family,
   --font-family, --border-width and --transition — NONE of which are defined
   anywhere, so every rule using them dropped its value and Woo buttons / inputs
   / prices / quantity / YITH controls rendered unstyled. These aliases point
   each legacy name at an existing Liam token (introducing NO new value) and so
   revive the entire carve-out at once.
   ============================================================================ */
.woocommerce,
body.woocommerce-page {
     /* 07/10/2026: follows the HOTEL accent in hotel context (body.hotel-{slug}
       prints --accent — incl. products opened with ?hotel=). This alias is
       what the high-specificity legacy submit-button rule paints with
       (body.woocommerce-page button[type="submit"], (0,2,2) !important), so
       fixing it here colours every Woo button at once. Network: unchanged. */
    --action-color: var(--accent, var(--clr-primary-100));   /* .mybtn primary fill (הזמנת חדר) */
    --action-text:  var(--clr-neutral-100);
    --text-color:   var(--clr-primary-200);   /* body-copy colour */
    --solid-color:  var(--clr-primary-400);   /* borders / rules */
    --border-radius: var(--radius-pill);
    --border-width: 1px;
    --title-family: var(--ff-secondary);
    --font-family:  var(--ff-secondary);
    --transition:   background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    /* Round #6: --clr-error is declared only on .em-contact-form_wrapper (§2), so
       it is UNDEFINED in this scope. Re-declare the SAME value here (no new token
       name, no new value) so the gift-card validation error surfaces (§6e) can
       resolve it. Keep in sync with §2's .em-contact-form_wrapper declaration. */
    --clr-error: #b3261e;
}

/* --- 4a. Single-product two-column layout (RTL grid; stacks at lg 991.98) -- */
.woo-single {
    /* Round #2: top = header clearance (the hero band is gone). --size-900
       (96px) clears the fixed header's ~72px desktop / ~56px mobile bar with
       breathing room. Bottom is 0 so the description reads as the same block
       (fix #5); .woo-single__layout carries the internal rhythm. */
    padding-block: var(--size-900) 0;
}
/* 07/10/2026 (client): on mobile the back-link row sat too far from the header
   and from the image. Clear the header's REAL height (--header-h, published by
   header.js; 96px fallback) plus a small gap, and tighten the row's bottom
   margin. Desktop unchanged. */
/* All widths now: the back row sits --size-400 (16px) under the header's real
   bottom edge (header.js measures it, admin-bar offset excluded). Fallbacks
   before the script runs: 96px desktop, 136px mobile (bar + booking row). */
.woo-single {
    padding-top: calc(var(--header-h, 8rem) + var(--size-400));
}
@media (max-width: 991.98px) {
    .woo-single {
        padding-top: calc(var(--header-h, 12rem) + var(--size-400));
    }
    /* row bottom margin: see §12 mobile block (must come after §6a's base rule) */
}
.woo-single__layout {
    display: grid;
    grid-template-columns: 52fr 48fr;
    gap: var(--size-700);            /* 48px column gap */
    align-items: start;
}
@media (max-width: 991.98px) {
    .woo-single__layout {
        grid-template-columns: 1fr;
        gap: var(--size-600);        /* 32px when stacked */
    }
}
/* Round #4 (fix #6): REMOVED dead `.woo-single__summary` — that class is not in
   any rendered markup (round #3 replaced it with .woo-single__buy). */

/* --- 4b. Gallery --------------------------------------------------------- */
.woo-gallery__main {
    position: relative;
}
.woo-gallery__img {
    width: 100%;
    aspect-ratio: 4 / 3;             /* matches .hotel-card__gallery slides */
    object-fit: cover;
    display: block;
    border-radius: var(--size-200);  /* 8px — matches the purchase-card radius */
}
/* Nav arrows (round #3): reuse the theme's circle gallery-nav component
   (.hotel-card__gallery-nav-btn — 2.6rem circle+chevron, hover/disabled states),
   overriding ONLY position to sit vertically centred and half-overlapping the
   image's start/end edges. left/right:auto neutralise the component's physical
   bottom-left offsets; the -1.3rem is half the component's own 2.6rem width. */
.woo-gallery__nav {
    top: 50%;
    bottom: auto;
    left: auto;
    right: auto;
    transform: translateY(-50%);
    z-index: 3;
}
.woo-gallery__nav--prev { inset-inline-start: calc(2.6rem / -2); }
.woo-gallery__nav--next { inset-inline-end: calc(2.6rem / -2); }

.woo-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-300);           /* 12px */
    margin-top: var(--size-300);
}
.woo-gallery__thumb {
    flex: 0 0 auto;
    width: calc((100% - (var(--size-300) * 3)) / 4);  /* up to 4 per row, equal */
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    border-radius: var(--size-200);  /* squared to the card radius (round #3) */
}
.woo-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.woo-gallery__thumb:hover,
.woo-gallery__thumb.active {
    opacity: 1;
}
.woo-gallery__thumb.active {
    outline: 2px solid var(--clr-primary-400);
    outline-offset: 2px;
}

/* --- 4c. Description body typography -------------------------------------- */
/* Round #4 (fix #6): REMOVED dead `.woo-description` (wrapper) and
   `.woo-description__title` — round #3 moved the description INTO the right
   column as `.woo-single__desc.woo-description__body` with .woo-single__title
   (h2) + .woo-single__rule doing the title/hairline, so neither dead class is in
   the markup. Only `.woo-description__body` survives (it IS still applied). */
.woo-description__body {
    font-family: var(--ff-secondary);
    font-size: var(--fs-150);
    line-height: 1.6;
    color: var(--clr-primary-200);
}
.woo-description__body p { margin-bottom: var(--size-400); }
.woo-description__body p:last-child { margin-bottom: 0; }

/* --- 4d. Add-to-cart + quantity (both product shapes) -------------------- */
.woocommerce div.product form.cart {
    display: flex;
    align-items: center;
    gap: var(--size-400);
    flex-wrap: wrap;
    margin-top: var(--size-500);
}
/* הוספה לסל = the primary .mybtn used for הזמנת חדר */
.woocommerce .single_add_to_cart_button,
.woocommerce .gift_card_add_to_cart_button,
body.woocommerce-page .single_add_to_cart_button,
body.woocommerce-page .gift_card_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;                       /* anchor for the .loading spinner ::after (round #6) */
    height: var(--btn-height) !important;
    line-height: 1 !important;
    padding: 0 37px !important;               /* = .mybtn 3.7rem @ 10px root */
    border: 1px solid var(--clr-neutral-100) !important;
    border-radius: var(--radius-pill) !important;
    /* 07/10/2026: the hotel accent in hotel context (body.hotel-{slug} prints
       --accent, incl. products opened with ?hotel=); network pages have no
       --accent and keep --clr-primary-100. */
    background-color: var(--accent, var(--clr-primary-100)) !important;
    color: var(--clr-neutral-100) !important;
    font-family: var(--ff-secondary) !important;
    font-weight: 500;
    font-size: var(--fs-100) !important;
    margin: 0 !important;
    min-width: 0;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .gift_card_add_to_cart_button:hover,
body.woocommerce-page .single_add_to_cart_button:hover,
body.woocommerce-page .gift_card_add_to_cart_button:hover {
    /* 07/10/2026 (client): add-to-cart does NOT change or move on hover — same
       fill / text / border as its rest state. `top` needs !important: the
       legacy `body.woocommerce-page button[type="submit"]:hover { top:-4px }`
       (l.~574, (0,3,2)) outranks this (0,3,1) rule and lifted it 4px. */
    top: 0 !important;
    transform: none !important;
    background-color: var(--accent, var(--clr-primary-100)) !important;
    color: var(--clr-neutral-100) !important;
    border-color: var(--clr-neutral-100) !important;
}
/* Quantity stepper → form-control look (matches .zamarin-balance__input).

   ⚠ ROUND #9 (fix #2) EDITED THIS BLOCK IN PLACE — do not re-add a second
   stepper block in a later section. §4d is the ONLY owner of the stepper's
   geometry; §7d owns line-height and §3b's bare `.quantity` rules are the
   (0,2,0) legacy layer this beats at (0,3,0).
   WAS: 44px square buttons + a 64px field, all --radius-pill → three circles
   in a row, reading as decoration rather than a control.
   NOW: 32px (--size-600) buttons, a 48px (--size-700) field, 4px (--size-100)
   gap and the FIELD radius --size-200 (0.8rem/8px) that §4b/§5b/§6c already use
   for every other boxed control in the carve-out. Same values on the cart page
   and the single product (the two places the stepper actually renders — see
   §9's header note on #cartModal), so there is one stepper size site-wide.
   Buttons are inline-flex/centred and the field is padding-0 + text-align
   centre, so the −, the value and the + share one optical centre line at the
   smaller height. Value font is --fs-100 (1.6rem/16px), i.e. body size — it did
   not shrink with the box, so legibility is unchanged.
   ⚠ 32px is under the 44px touch-target guideline; deliberate, per the brief's
   "smaller, less round". */
.woocommerce .quantity {
    display: inline-flex;
    align-items: center;
    gap: var(--size-100);            /* 4px — was --size-200 (8px) */
}
.woocommerce .quantity .qty {
    height: var(--size-600);         /* 32px — was 44px */
    width: var(--size-700) !important;  /* 48px — was 64px; !important beats §3b's own */
    padding: 0;                      /* kills §3b's `padding: 0 0px` shorthand ambiguity */
    text-align: center;
    font-size: var(--fs-100);        /* 1.6rem/16px — unchanged from the body scale */
    background-color: transparent;
    color: var(--clr-primary-400);
    border: 1px solid var(--clr-primary-400);
    border-radius: var(--size-200);  /* was --radius-pill */
}
.woocommerce .quantity .plus,
.woocommerce .quantity .minus {
    display: inline-flex;            /* centres the glyph on both axes at 32px */
    align-items: center;
    justify-content: center;
    height: var(--size-600);         /* 32px — was 44px */
    width: var(--size-600);          /* 32px — was 44px */
    padding: 0;
    background-color: transparent;
    color: var(--clr-primary-400);
    border: 1px solid var(--clr-primary-400);
    border-radius: var(--size-200);  /* was --radius-pill */
    font-size: var(--fs-100);        /* was --fs-150; matches the value's size */
    line-height: 1;
    cursor: pointer;
}

/* --- 4e. Related-vouchers strip (#6). Grid + cards inherit from main.css
   (.deals-listing__grid, .zamarin-deal-card); only the heading needs a rule. */
.em-related-vouchers {
    padding-block: var(--section-gap);
}
.em-related-vouchers__title {
    font-family: var(--ff-primary);
    font-weight: 300;
    font-size: calc(var(--sub-heading) * var(--title-scale, 1));
    color: var(--clr-primary-200);
    text-align: center;
    margin-bottom: var(--section-gap);
}

/* --- 4f. Cart / checkout / order-received: table borders from a token ----- */
.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.cart td,
.woocommerce .cart_totals table,
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
    border-color: var(--clr-primary-400);
}


/* ============================================================================
   5. WOOCOMMERCE FIX ROUND #2 — 16/08/2026
   ----------------------------------------------------------------------------
   Header solid on product singles; text inputs/textarea/select split OFF the
   pill radius onto the Gravity-Forms field treatment; YITH gift-card form skin;
   related-vouchers Swiper. All values trace to existing main.css tokens.
   ============================================================================ */

/* --- 5a. Header readability on Woo pages with NO hero band -----------------
   The header is always white text; with no dark hero behind it the network nav
   is invisible on cream. Force the solid dark background on every Woo page that
   lacks a hero — the single product AND the shop / category / tag archives.
   body.woocommerce-page:not(.page) covers the single + archives (they are not WP
   Pages).
   ⚠ Round #6 CORRECTION: cart / checkout / my-account are WP Pages (body.page)
   but they do NOT use page.php and have NO .contact-hero band — they use
   checkout.php (Template Name: Checkout/Cart/My Account: <main id="page"> + an
   <h1>, no hero). So the round-#3 :not(.page) was EXCLUDING exactly the pages
   that most need the solid header (invisible white nav on cream + no clearance).
   They are added back here by their guaranteed WooCommerce body classes
   (woocommerce-cart/-checkout/-account — template-name-independent, and never
   present on a hero content Page, so no hero page regresses). */
/* 07/10/2026: :not(.zamarin-page) — a product opened in HOTEL mode (?hotel=,
   em_current_hotel()) takes the hotel's own scrolled bar instead (cream + dark
   logo + accent, main.css Z12); forcing this dark fill there would put the dark
   logo on dark. The header is now always .is-scrolled on these pages
   (body.em-solid-header), so the divider line is gone in both modes. */
body.woocommerce-page:not(.page):not(.zamarin-page) .header,
body.woocommerce-cart:not(.zamarin-page) .header,
body.woocommerce-checkout:not(.zamarin-page) .header,
body.woocommerce-account:not(.zamarin-page) .header {
    background-color: var(--clr-primary-200);
}

/* Round #6 (fix #4): real top clearance for checkout.php's <main id="page"> —
   the SAME offset the single uses (.woo-single padding-block-start var(--size-900)),
   so the fixed header never sits over the cart/checkout/account content. Scoped
   to the three Woo Page body classes so no other <main id="page"> is affected. */
body.woocommerce-cart #page,
body.woocommerce-checkout #page,
body.woocommerce-account #page {
    padding-top: var(--size-900);
}

.woo-single__title {
    margin-bottom: var(--size-400);
}

/* --- 5b. Field radius SPLIT (fix #4). Round #1 aliased --border-radius to the
   pill for the whole .woocommerce scope, so section-3a pilled inputs AND the
   textarea. Buttons keep the pill; text inputs / textarea / select take the
   Gravity-Forms field treatment (E4): 4.2rem tall, --clr-primary-400 border,
   8px (--size-200) radius, transparent, 1.4rem inline padding. */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce input[type="tel"],
.woocommerce input[type="url"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
body.woocommerce-page input[type="text"],
body.woocommerce-page input[type="email"],
body.woocommerce-page input[type="password"],
body.woocommerce-page input[type="search"],
body.woocommerce-page input[type="tel"],
body.woocommerce-page input[type="url"],
body.woocommerce-page input[type="number"],
body.woocommerce-page textarea,
body.woocommerce-page select {
    height: 4.2rem;
    border: 1px solid var(--clr-primary-400);
    border-radius: var(--size-200);   /* 8px — matches the GF field skin */
    background-color: transparent;
    padding-inline: 1.4rem;
    padding-block: 0;
    font-family: var(--ff-secondary);
    font-size: var(--fs-100);
}
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
body.woocommerce-page input:focus,
body.woocommerce-page textarea:focus,
body.woocommerce-page select:focus {
    border-color: var(--clr-primary-400);
    outline: 0;
}
/* Textarea: never a pill; sane multi-line box, full column, vertical resize. */
.woocommerce textarea,
body.woocommerce-page textarea {
    height: auto;
    min-height: 12.9rem;
    padding-block: 1.2rem;
    resize: vertical;
    width: 100%;
}

/* --- 5b-email. RTL email field (round #6, fix #3) --------------------------
   E3: there is NO direction:ltr carve-out on the email input anywhere in the
   theme or YITH CSS (the only direction:ltr is .emilia a, the footer credit —
   main.css:661, unrelated). Left unstated, the email input fell to a UA/left
   rendering so its Hebrew placeholder ('כתובת אימייל') and empty caret sat at
   the wrong edge while every sibling field was RTL. Assert RTL explicitly so the
   placeholder + empty state align to the right edge like the others, while
   unicode-bidi:plaintext keeps a typed (Latin, LTR) address reading LTR — the
   line direction follows its own first strong character, so no value is forced
   the wrong way. */
.woocommerce input[type="email"],
body.woocommerce-page input[type="email"] {
    direction: rtl;
    text-align: start;
    unicode-bidi: plaintext;
}

/* --- 5c. YITH gift-card purchase form skin (fix #3/#4) --------------------- */
/* REAL DOM (round #4, E5 — YITH gift-card-details.php):
     .step-content
       .ywgc-single-recipient        (wraps BOTH .ywgc-recipient-name + -email)
         .ywgc-recipient-name.clearfix  > label + input#ywgc-recipient-name
         .ywgc-recipient-email.clearfix > label + input#ywgc-recipient-email
       .ywgc-sender-name.clearfix       > label + input#ywgc-sender-name
       .ywgc-message.clearfix           > label + textarea#ywgc-edit-message
   Dead round-#3 selectors dropped: .ywgc-single-sender (never exists) and
   .ywgc-sender-title (the real class is .ywgc-sender-info-title). */

/* One vertical rhythm for the whole editor and the recipient sub-group. */
.gift-card-content-editor.step-content,
.ywgc-single-recipient {
    display: flex;
    flex-direction: column;
    gap: var(--size-300);   /* 15/10/2026: was --size-400 — tighter form (client) */
}
/* 15/10/2026 (client) — no gap inside the recipient block (name + email). */
.ywgc-single-recipient {
    gap: 0;
}
/* Every field wrapper: label above by default (rows flip to label-beside at
   ≥768 in §6c; the message textarea stays label-above). */
.ywgc-recipient-name,
.ywgc-recipient-email,
.ywgc-sender-name,
.ywgc-message {
    display: flex;
    flex-direction: column;
    gap: var(--size-100);
}
/* Every input/select/textarea fills its wrapper → one common start edge. */
.gift-card-content-editor input[type="text"],
.gift-card-content-editor input[type="email"],
.gift-card-content-editor textarea,
.yith_wc_gift_card_input_recipient_details {
    width: 100%;
}
/* Labels: theme small-label typography, RTL-correct start edge. */
.ywgc-recipient-name label,
.ywgc-recipient-email label,
.ywgc-sender-name label,
.ywgc-message label,
.gift-card-content-editor.step-content label {
    display: block;
    font-family: var(--ff-secondary);
    font-weight: 500;
    font-size: var(--fs-50);
    color: var(--clr-primary-400);
    opacity: 1;
    margin-bottom: 0;   /* 15/10/2026: the wrapper gap already spaces label→input; this doubled it */
    text-align: start;
}
/* Required marker — driven ONLY by YITH's real `required` attribute (emitted on
   the recipient name+email when the plugin's "recipient info mandatory" setting
   is on). Never invented: no required setting → no asterisk. */
.ywgc-recipient-name:has(input:required) label::after,
.ywgc-recipient-email:has(input:required) label::after {
    content: " *";
    color: var(--clr-primary-100);
}
/* Group headings — amount 'בחרו סכום' (.gift-cards-list > h3), 'פרטי המקבל'
   (.ywgc_recipient_info_title) and 'הפרטים שלך' (.ywgc-sender-info-title):
   one consistent scale + space, de-capsed from the plugin default. */
.gift-cards-list > h3,
.ywgc_recipient_info_title,
.ywgc-sender-info-title {
    font-family: var(--ff-secondary);
    font-weight: 500;
    font-size: calc(var(--fs-200) * var(--title-scale, 1));
    color: var(--clr-primary-200);
    text-transform: none;
    letter-spacing: 0;
    /* 15/10/2026 (client: title→inputs too far). Each heading is a flex item of a
       column whose gap is --size-300 (12px); a negative bottom margin cancels most
       of it so the title sits --size-100 (4px) above its first field. */
    margin: 0 0 calc(var(--size-100) - var(--size-300));
    display: block;
}
/* Hairline dividers between the three groups — same treatment as
   .woo-purchase-card__divider (1px --clr-primary-400 at ~0.2), applied as a
   border-top on the group heading because YITH's markup gives us no <hr> to
   reuse literally without a template override. The amount block is first, so it
   gets NO top rule; the divider sits above פרטי המקבל and above הפרטים שלך. */
.ywgc_recipient_info_title,
.ywgc-sender-info-title {
    padding-top: var(--size-300);   /* 15/10/2026: was --size-400 */
    border-top: 1px solid rgba(71, 65, 50, 0.2);   /* --clr-primary-400 @ 20% */
}
.ywgc-empty-recipient-note {
    display: block;
    font-size: var(--fs-50);
    color: var(--clr-primary-400);
    opacity: 0.75;
    margin-top: var(--size-100);
}
/* Amount buttons — consistent pill sizing + brand default/hover/selected.
   Round #5 (fix #3): dropped `margin-bottom` — it stacked on top of the form's
   flex gap. The form gap is now the single source of the amount→recipient
   spacing. */
.gift-cards-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-300);
}
/* 15/10/2026 — the "בחרו סכום" heading is a flex item of the same row as the
   amount buttons, so it sat inline beside them. Full-width basis = its own row,
   buttons wrap below it. */
.gift-cards-list > h3 {
    flex: 0 0 100%;
    margin: 0 0 calc(var(--size-100) - var(--size-300));   /* 4px above the amount buttons (row gap is --size-300) */
}
.gift-cards-list button.ywgc-predefined-amount-button {
    height: var(--btn-height);
    padding: 0 var(--size-500);
    border: 1px solid var(--clr-primary-400);
    border-radius: var(--radius-pill);
    background-color: transparent;
    color: var(--clr-primary-400);
    font-family: var(--ff-secondary);
    font-weight: 500;
    font-size: var(--fs-100);
    opacity: 1;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.gift-cards-list button.ywgc-predefined-amount-button:hover,
.gift-cards-list button.ywgc-predefined-amount-button.selected_button {
    background-color: var(--clr-primary-100);
    color: var(--clr-neutral-100);
    border-color: var(--clr-primary-100);
    opacity: 1;
}
/* 15/10/2026 — ₪ on the same side as everywhere else on the site ("₪200", the
   deals-card convention, main.css .zamarin-deal-card__price). Woo prints the
   symbol in its own dir="auto" span; inside an RTL button that isolate lands on
   the RIGHT of the number. One LTR run puts it back on the left. Also the
   price line on the voucher purchase card, same cause. */
.gift-cards-list .woocommerce-Price-amount,
.woo-purchase-card .price .woocommerce-Price-amount,
body.em-checkout-flow .woocommerce-Price-amount { /* 18/10/2026: cart / checkout / thank-you too */
    direction: ltr;
    unicode-bidi: isolate;
}
/* Whole form vertical rhythm. (Dead `.gift_cards_form` underscore variant
   dropped — the real class is `.gift-cards_form`, round #4 E5.) */
.gift-cards_form {
    display: flex;
    flex-direction: column;
    gap: var(--size-300);   /* 15/10/2026: was --size-400 — tighter form (client) */
}

/* --- 5d. Related-vouchers Swiper (fix #6). Nav + slide plumbing mirrors the
   treatment carousel; slide WIDTH is owned by js/related-vouchers.js
   (slidesPerView), so no width here. */
.em-related-vouchers {
    padding-block: var(--section-gap);
}
.em-related-vouchers__title {
    font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
    font-weight: 300;
    font-size: calc(var(--sub-heading) * var(--title-scale, 1));
    color: var(--clr-primary-200);
    text-align: center;
    margin-bottom: var(--size-700);
}
.em-related-vouchers__nav-group {
    display: flex;
    align-items: center;
    gap: var(--size-300);
    margin-bottom: var(--size-500);
    /* RTL: flex-end packs the pair at the physical left edge, matching the
       treatment carousel's nav row. */
    justify-content: flex-end;
}
/* Reuse .hotel-card__gallery-nav-btn for all visual styling; that base class is
   position:absolute with offsets, so undo positioning to sit in normal flow
   (same override the treatment carousel makes). */
.em-related-vouchers__nav {
    position: static;
    inset: auto;
    color: var(--clr-primary-400);
}
.em-related-vouchers__wrap {
    position: relative;
    /* 07/10/2026 (client): the CARDS run edge to edge of the screen; the title
       and the prev/next buttons stay in the container (they're siblings above
       this wrap). Breaks out of .container symmetrically: -(viewport − container)/2
       on both sides. The section clips the overflow so no horizontal scrollbar. */
    margin-inline: calc(50% - 50vw);
}
.em-related-vouchers {
     overflow-x: clip;
}
.em-related-vouchers .swiper-slide {
    height: auto;
    flex-shrink: 0;
}
.em-related-vouchers .swiper-slide .zamarin-deal-card {
    height: 100%;
}


/* ============================================================================
   6. WOOCOMMERCE FIX ROUND #3 — Atlas-style RESTRUCTURE (structure only)
   ----------------------------------------------------------------------------
   Crumbs + back link above the grid; right column = gallery→title(h2)→rule→
   description; left column = the purchase card (H1 bar + summary hooks + terms).
   Every value is a Liam token. Atlas is a STRUCTURE reference only.
   ============================================================================ */

/* --- 6a. Crumbs + back link (above the grid) ----------------------------- */
.woo-single__crumbs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--size-300);
    margin-bottom: var(--size-500);
}
.woo-single__crumbs .woocommerce-breadcrumb {
    margin-bottom: 0;
}
/* Back link reuses .blog-article__pager-link (chevron + label, RTL-aware). */
.woo-single__back {
    flex-shrink: 0;
}
.woo-single__back svg {
    width: 1.6rem;
    height: 1.6rem;
}

/* --- 6b. Right column: title (h2) → hairline → description ---------------- */
.woo-single__title {
    margin: var(--size-500) 0 var(--size-300);
}
.woo-single__rule {
    border: 0;
    border-top: 1px solid var(--clr-primary-400);
    opacity: 0.25;
    width: 100%;
    margin: 0 0 var(--size-400);
}
/* .woo-single__desc reuses .woo-description__body typography (round #1 §4c). */

/* Mobile stack order: purchase card FIRST, then gallery + title + description.
   The grid stacks to one column at 991.98 (round #1 §4a); the buy column is 2nd
   in the DOM, so pull it above the gallery column when stacked. */
/* 07/10/2026 (client): REVERSED — on mobile the product IMAGE comes first, then
   the purchase panel (DOM order; the old order:-1 pulled the panel above it). */
@media (max-width: 991.98px) {
    .woo-single__buy {
        order: 0;
    }
}

/* --- 6c. Purchase card --------------------------------------------------- */
.woo-single__buy {
    align-self: start;   /* never stretch the card to the gallery's height */
}
.woo-purchase-card {
    align-self: start;
    background-color: var(--clr-neutral-100);
    border: 1px solid var(--clr-primary-400);
    border-radius: var(--size-200);
    overflow: hidden;
}
/* Header bar: filled dark brand token + white title (same pairing as the site
   header, which is the only filled-bar precedent in the theme). */
.woo-purchase-card__bar {
    background-color: var(--clr-primary-200);
    padding: var(--size-400) var(--size-500);
}
.woo-purchase-card__title {
    margin: 0;
    font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
    font-weight: 500;
    font-size: calc(var(--fs-250) * var(--title-scale, 1));
    line-height: 1.2;
    color: var(--clr-neutral-100);
}
.woo-purchase-card__body {
    padding: var(--size-500);
    display: flex;
    flex-direction: column;
    gap: var(--size-400);
}

/* Add-to-cart = full card width at the bottom of the card. Higher specificity
   than round #2 §4d's .woocommerce div.product form.cart (0,2,2). */
.woocommerce .woo-purchase-card form.cart {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--size-300);
    margin-top: var(--size-500); /* 07/10/2026: was 0 — more room above the − / + stepper (client) */
}
.woocommerce .woo-purchase-card .quantity {
    align-self: flex-start;
}
/* 15/10/2026 (client: too much space above the button). YITH's ywgc-frontend.css
   sets `.gift_card_template_button { margin-top: 3em }` (~48px) on the add-to-cart
   wrapper, ON TOP of the form's flex gap. (0,2,0) beats it; the gap alone now
   spaces the button from the message field. */
.woo-purchase-card .gift_card_template_button {
    margin-top: 0;
}
.woo-purchase-card .single_add_to_cart_button,
.woo-purchase-card .gift_card_add_to_cart_button {
    width: 100% !important;   /* justified: beats round #2's inline-width button */
}

/* Field rows: label + input on ONE row at ≥768, stacking to label-above below
   768. Round #5 (fix #1/#2): the message textarea now ALSO goes label-beside so
   it shares the fields' start+end edges (was the full-width outlier); the label
   column is a FIXED 8rem instead of 30% so every field begins at the same
   x-position and the old wide label→input gap is gone. Fields flex-fill the rest
   → no px cap, all the same width, both edges shared. */
@media (min-width: 768px) {
    .ywgc-recipient-name,
    .ywgc-recipient-email,
    .ywgc-sender-name,
    .ywgc-message {
        flex-direction: row;
        gap: var(--size-300);
    }
    .ywgc-recipient-name,
    .ywgc-recipient-email,
    .ywgc-sender-name {
        align-items: center;
    }
    /* Multi-line: label tops with the textarea, not vertically centred on it. */
    .ywgc-message {
        align-items: flex-start;
    }
    .ywgc-recipient-name label,
    .ywgc-recipient-email label,
    .ywgc-sender-name label,
    .ywgc-message label {
        flex: 0 0 8rem;   /* consistent label column → shared field start edge */
        margin-bottom: 0;
    }
    .ywgc-recipient-name input,
    .ywgc-recipient-email input,
    .ywgc-sender-name input,
    .ywgc-message textarea {
        flex: 1 1 auto;
    }
}
/* Divider'd group headings tightened so the card reads as one object (round #4:
   real classes — .ywgc-sender-info-title, not the dead .ywgc-sender-title; the
   dead .gift_cards_form underscore selector dropped). The amount heading is the
   first group (no top divider) so it is not tightened here.
   Round #5 (fix #3): `margin-top:0` KILLS YITH's own
   `.gift-card-content-editor.step-content h5 { margin-top: 3em }`
   (ywgc-frontend.css) — a (0,2,1) rule that outranked round #4's reset and left
   ~48px of dead space above each heading (the ~100px band). This card-scoped
   selector is (0,3,1) so it wins without !important. */
.woo-purchase-card .gift-card-content-editor.step-content h5 {
    margin-top: 0;
}
/* 15/10/2026 (client: title→inputs too far). These card-scoped rules are the
   ones that win inside the purchase card. Each heading sits in a flex column /
   wrap row whose gap is --size-300 (12px); the old margin-bottom:--size-300
   stacked on top of it (~24px). A negative margin now cancels most of the gap
   so the title is --size-100 (4px) above its first field / the amount buttons. */
.woo-purchase-card .ywgc_recipient_info_title,
.woo-purchase-card .ywgc-sender-info-title {
    padding-top: var(--size-300);
    margin-bottom: var(--size-200);   /* 15/10/2026 (client): real bottom margin under each form title */
}
/* Amount heading: first group, no divider above it. */
.woo-purchase-card .gift-cards-list > h3 {
    margin-bottom: var(--size-200);
}

/* --- 6d. Terms block (E2 data: valid_until + card_features) -------------- */
.woo-purchase-card__divider {
    border: 0;
    border-top: 1px solid var(--clr-primary-400);
    opacity: 0.2;
    width: 100%;
    margin: var(--size-200) 0 var(--size-400);
}
.woo-terms {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--size-300);
}
.woo-terms__item {
    display: flex;
    align-items: center;
    gap: var(--size-300);
    font-family: var(--ff-secondary);
    font-size: var(--fs-100);
    color: var(--clr-primary-200);
}
.woo-terms__item svg,
.woo-terms__item img {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

/* --- 6e. Gift-card validation errors (round #6, fix #2) --------------------
   The validator is jQuery Validate (E2): emilia.js runs `.gift-cards_form.valid()`
   on add-to-cart, which auto-inits it with default options. emilia.js now sets an
   errorPlacement that APPENDS the <label class="error"> INTO the field wrapper
   (.ywgc-recipient-name / -email / -sender-name / .ywgc-message) and Hebrew
   messages (gated on em_is_rtl_lang via window.emGiftValidate). The wrappers flip
   to flex-row at ≥768 (§6c), so the error must break to its own line UNDER the
   input — flex:0 0 100% forces the wrap; at ≥768 it is indented by the 8rem label
   column so it sits under the field, not under the label. label.error typography
   is the house GF pattern (see the §3 label.error rule). */
.woo-purchase-card .ywgc-recipient-name,
.woo-purchase-card .ywgc-recipient-email,
.woo-purchase-card .ywgc-sender-name,
.woo-purchase-card .ywgc-message {
    flex-wrap: wrap;
}
.woo-purchase-card label.error {
    flex: 0 0 100%;
}
@media (min-width: 768px) {
    /* Line up the message under the input (past the 8rem label column). */
    .woo-purchase-card label.error {
        padding-inline-start: 8rem;
    }
}
/* Errored field: border colour ONLY — the field keeps its shape (house pattern).
   jQuery Validate adds .error to the invalid input; label.error is the message
   (distinguished by tag), so this never hits the message element. */
.woo-purchase-card .gift-card-content-editor input.error,
.woo-purchase-card .gift-card-content-editor textarea.error {
    border-color: var(--clr-error);
}


/* ============================================================================
   7. WOOCOMMERCE FIX ROUND #7 — cart line-item polish + single-title scale
   ----------------------------------------------------------------------------
   The cart page (woocommerce/cart/cart.php, .row.gx-5) and the header mini-cart
   dropdown (woocommerce/cart/mini-cart.php, #cartModal, .row.gx-3) are SEPARATE
   files with duplicated markup; both give each line item .woocommerce-mini-cart-
   item, so scoping to that class covers BOTH and nothing else. All values reuse
   existing tokens / mirror existing components — no new tokens.
   ============================================================================ */

/* --- 7a. Cart item title link --------------------------------------------
   E2: .product-title's <a> had no theme rule and fell through to Bootstrap's
   --bs-link-color (blue). Match the voucher card title (.zamarin-deal-card__title
   = --clr-primary-400, no underline); hover to the interactive accent
   (--clr-primary-100, the .mybtn fill). Covers cart page + header dropdown. */
.woocommerce-mini-cart-item .product-title,
.woocommerce-mini-cart-item .product-title a {
    color: var(--clr-primary-400);
}
.woocommerce-mini-cart-item .product-title a {
    text-decoration: none;
    transition: color 0.25s ease;
}
.woocommerce-mini-cart-item .product-title a:hover,
.woocommerce-mini-cart-item .product-title a:focus {
    color: var(--clr-primary-100);
    text-decoration: none;
}

/* --- 7b. .product-meta blurb (fix #2) ------------------------------------
   Small body-copy scale, muted — mirrors .zamarin-deal-card__desc so the cart
   reads like the site's voucher cards. Collapses fully when empty: the PHP emits
   <div class="product-meta"></div> with NO inner whitespace when both card_blurb
   and the short description are empty, so :empty matches and removes it (no hole,
   fix #2 CRITICAL). */
.woocommerce-mini-cart-item .product-meta {
    margin-top: var(--size-200);
}
.woocommerce-mini-cart-item .product-meta:empty {
    display: none;
    margin: 0;
}
.woocommerce-mini-cart-item .product-meta__blurb {
    display: block;
    font-family: var(--ff-secondary);
    font-size: 1.4rem;                 /* = .zamarin-deal-card__desc */
    line-height: 1.6;
    color: rgba(60, 60, 67, 0.85);     /* = .zamarin-deal-card__desc muted body */
}

/* --- 7c. REVERTED in round #8 (fix #2) -----------------------------------
   Was `.woocommerce-mini-cart-item > .col-8 { justify-content:flex-start
   !important; gap:var(--size-400) }`. It treated the SYMPTOM: the hole existed
   because the row was as tall as a full-column-width SQUARE thumbnail (~200-256px
   on the cart page) while the text stack next to it is ~150px, so Bootstrap's
   space-between had ~50-100px of slack to spread. §8a shortens the image instead,
   which removes the slack at its source — so Bootstrap's own space-between stands
   and no !important is layered on top of a utility class. */

/* --- 7d. Cart quantity value (fix #4) ------------------------------------
   The value IS server-bound (cart.php input_value => $cart_item['quantity']) and
   coloured --clr-primary-400 (dark on cream), and no JS clears it — so the
   "empty" field in the screenshot is the focus caret, NOT a real binding/colour
   bug. Defensive only: the stale §3b `.quantity .qty { line-height:30px }` still
   cascades onto this input; reset it to normal so the digit is reliably centred
   and never sits oddly. (Height was 44px when this was written; §4d took it to
   32px in round #9 — this rule is height-agnostic, so it still applies.) */
.woocommerce .quantity .qty {
    line-height: normal;
}

/* --- 7e. Single-product title scale (fix #3, E4) -------------------------
   Drop .woo-single__title from --sub-heading (clamp peaking 5.4rem — reads as a
   page hero) to --heading-sm (clamp peaking 4rem), the next scale down the theme
   already uses for section/column headings. Stays an <h2> (the H1 is the
   purchase-card bar). Only the size changes — .sub-heading keeps the family /
   weight / colour. style.css loads after main.css, so this equal-specificity
   rule wins by source order (same as the existing .woo-single__title margins). */
.woo-single__title {
    font-size: calc(var(--heading-sm) * var(--title-scale, 1));
}

/* ============================================================================
   8. WOOCOMMERCE FIX ROUND #8 — cart thumbnail size + checkout-button centring
   ----------------------------------------------------------------------------
   Same two-file scope as §7: the cart page (woocommerce/cart/cart.php) and the
   header dropdown (woocommerce/cart/mini-cart.php, #cartModal) both stamp each
   line item .woocommerce-mini-cart-item, so that class covers both. No new
   tokens: --size-200 (0.8rem/8px radius, the product-gallery convention) and
   --btn-height are the only variables used here.
   ============================================================================ */

/* --- 8a. Cart line-item thumbnail (fix #1) -------------------------------
   CAUSE: the thumbnail is WooCommerce's `woocommerce_thumbnail` size (300x300,
   square) and §3's legacy `.woocommerce-mini-cart-item img { width:100%;
   height:auto }` (style.css:1130) lets it fill the whole Bootstrap .col-4 at its
   native 1/1 ratio. Column width drives row height: .col-4 inside
   .col-lg-8.pe-lg-5 inside checkout.php's .col-lg-10 measures ~198px at a 1440
   viewport and ~256px at 1920 — so the image alone was a ~200-256px-tall row
   against a ~150px text stack.

   FIX: constrain the IMAGE, never the column (the Bootstrap grid is untouched,
   so the two-column line-item layout is identical). aspect-ratio is the driver
   because it is width-independent: 3/2 makes the rendered height exactly 2/3 =
   66.7% of the square it replaces, at EVERY viewport — the middle of the 60-70%
   target. object-fit:cover crops the square source to that ratio (centre crop,
   never letterboxed or squashed). max-width is a ceiling, not the driver: it only
   engages above a ~220px column (≈1650px+ viewports) so an ultra-wide screen
   cannot grow the thumb past 220x147 — everywhere below that the ratio alone is
   what shrinks it. Radius = --size-200, the same 8px the product gallery
   (.woo-gallery__img) and the thumbnail strip use. */
.woocommerce-mini-cart-item img {
    display: block;
    max-width: 220px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--size-200);
}

/* The dropdown wants it smaller still: #cartModal is a fixed 400px panel, so its
   .col-4 is only ~117px and the item has to read as a compact list row, not a
   card. A 100px ceiling DOES engage here (unlike the cart page's 220px) and
   takes the thumb to 100x67 — ~57% of the ~117px square it replaces — leaving
   the width for the title + blurb. Ratio and crop are inherited from 8a. */
#cartModal .woocommerce-mini-cart-item img {
    max-width: 100px;
}

/* --- 8b. Checkout button label centring (fix #3) -------------------------
   CAUSE (E2) — it is NOT a missing text-align and NOT asymmetric padding:
     · `.checkout-button { text-align:center; display:block; line-height:45px }`
       (style.css:1811) DOES apply text-align:center, and §3a's padding is
       symmetric (padding-left:25px = padding-right:25px, style.css:492-493), so
       the label is centred on the INLINE axis already.
     · The miscentring is on the BLOCK axis: §3a sets `height:45px` +
       `line-height:34px` on `.woocommerce .checkout-button` (0,2,0), which
       outranks style.css:1814's `line-height:45px` on the bare `.checkout-button`
       (0,1,0). So a 34px line box sits at the TOP of a 45px content box and the
       label rides ~5.5px above centre. Line 1814 was written to fix exactly this
       and has been silently losing the cascade ever since.
     · WooCommerce's own stylesheet is not a factor — 'woocommerce-general' is
       dequeued AND deregistered (functions.php:297-298), so core's
       `.wc-proceed-to-checkout a.checkout-button` rules never load.

   FIX: reuse §4d's add-to-cart treatment verbatim — flex + align-items:center +
   justify-content:center + line-height:1 — so both buttons are centred by the
   same mechanism. `flex` (not §4d's `inline-flex`) because this button is
   deliberately full-width in the totals card and inline-flex would shrink it to
   its label; block-level flex keeps the current full-width render and adds the
   centring. This rule is (0,2,0) like §3a but later in source, so it wins without
   !important. Both axes are now centred by the flex box, so the result is
   correct at the narrow (mobile, label may wrap) and wide widths alike, and
   text-align:center is kept as the wrapped-line fallback. */
.woocommerce .checkout-button,
body.woocommerce-page .checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    padding-left: 25px;
    padding-right: 25px;
}



/* ============================================================================
   9. WOOCOMMERCE FIX ROUND #9 — core-CSS chrome leak + cart mobile proportions
   ----------------------------------------------------------------------------
   Fix #2 (the quantity stepper) is NOT here: §4d was edited IN PLACE so the
   stepper keeps exactly one owner. See the round-#9 note above
   `.woocommerce .quantity`.

   Tokens used in this section (all pre-existing, none introduced):
   --size-200, --size-300, --size-400.
   ============================================================================ */

/* --- 9a. WooCommerce core CSS leaking onto the site chrome (fix #1) --------
   DO NOT "CLEAN UP" THIS BLOCK. It is not redundant with main.css — it is
   defending main.css against a plugin stylesheet, and deleting it silently
   resizes the header and footer logos on every Woo page.

   CAUSE. WooCommerce ships THREE frontend stylesheets (WC_Frontend_Scripts::
   get_styles): woocommerce-general, woocommerce-layout, woocommerce-smallscreen.
   functions.php:297-298 dequeues + deregisters ONLY woocommerce-general. The
   other two still load on every front-end request, and woocommerce-layout
   carries, as its 8th rule:

       .woocommerce img, .woocommerce-page img { height: auto; max-width: 100% }

   `woocommerce-page` is a BODY class (wc_body_class(), added on the single, the
   shop, cart, checkout, my-account and order-received), so that selector is not
   scoped to Woo content at all — it matches EVERY <img> in the document,
   header and footer included. At (0,1,1) it outranks the theme's own (0,1,0)
   chrome rules, which put a class on the <img> itself:

     - .header__logo { height:5.2rem }         main.css:743  (0,1,0) -> LOST
     - .header__logo { height:4.2rem } <=991.98 main.css:907 (0,1,0) -> LOST
     - .footer__logo { height:8rem }           main.css:575  (0,1,0) -> LOST

   Result: both logos fell back to their intrinsic pixel size on Woo pages —
   logo.png 146x62 instead of ~122x52, b-logo.png 238x107 instead of ~178x80.
   The footer logo was therefore visibly LARGER on /cart/ than on the front page.

   .emilia img (main.css:663, the hand-coded footer credit) is (0,1,1) — a TIE,
   currently won only because main.css prints after woocommerce-layout. It is
   restated below so it is decided by SPECIFICITY, not by enqueue order.

   WHY COUNTER-RULES AND NOT A DEQUEUE. woocommerce-layout is load-bearing for
   this theme's checkout and account pages: the carve-out sets
   `.form-row-first/-last { width: 60%/40% }` (style.css section 3b) and
   `.woocommerce-MyAccount-navigation { width: 25% }` (style.css section 3b) but
   never sets a `float` above 760px — the `float:left/right` those widths depend
   on comes from woocommerce-layout. Dequeuing it would stack the checkout name
   fields and drop the My Account nav above its content. So it stays, and the
   chrome is defended by name instead. (woocommerce-smallscreen is inert here —
   every one of its selectors targets table.shop_table_responsive / table.cart /
   ul.products / .col2-set, none of which the theme's overridden cart, checkout
   or mini-cart templates emit. Left enqueued rather than dequeued because
   removing it changes nothing and adds a moving part.)

   SCOPE. Scoped by the theme's OWN chrome classes, never by re-blanketing img.
   Each rule is (0,2,0)/(0,2,1) — one class more than the plugin's — so it wins
   on specificity alone, with no !important and no dependence on load order.
   Both body classes are listed because cart/checkout/my-account get ONLY
   `woocommerce-page`, while the single and the shop get both (wc_body_class). */
.woocommerce .header__logo,
body.woocommerce-page .header__logo {
    height: 5.2rem;   /* = main.css:743 */
    width: auto;
    max-width: 18rem; /* = main.css .header__logo (07/10/2026 wide-logo cap) — the plugin's max-width:100% would beat it here */
    object-fit: contain;
}
@media (max-width: 991.98px) {
    .woocommerce .header__logo,
    body.woocommerce-page .header__logo {
        height: 4.2rem;   /* = main.css:907 */
    }
}
.woocommerce .footer__logo,
body.woocommerce-page .footer__logo {
    height: 8rem;     /* = main.css:575 */
    width: auto;
}
/* Ron's hand-coded footer credit. Restated at (0,2,1) so the plugin's (0,1,1)
   can never take it, whatever the enqueue order ends up being. */
.woocommerce .emilia img,
body.woocommerce-page .emilia img {
    height: 12px;     /* = main.css:663 */
    width: auto;
}
/* 06/10/2026 — same leak on the voucher card's hotel logo in the product
   single's "שוברים נוספים" strip: the plugin's max-width:100% (0,1,1) beat
   main.css .zamarin-deal-card__logo { max-inline-size: 9rem } (0,1,0), so the
   logo rendered at its intrinsic size and overflowed the card. */
.woocommerce .zamarin-deal-card__logo,
body.woocommerce-page .zamarin-deal-card__logo {
    max-width: 9rem;  /* = main.css .zamarin-deal-card__logo max-inline-size */
    height: auto;
}

/* --- 9b. Cart line item below 768 (fix #3) --------------------------------
   Proportion pass only — the Bootstrap row/col STRUCTURE is untouched
   (.col-4 / .col-8 stay, .container stays, no template edit).

   E4 measurements at a 375px viewport, cart page
   (checkout.php .container.px-4 > .row > .col-12 > [woocommerce_cart] >
    .row.gx-5 > .col-lg-8 > .woocommerce-mini-cart-item.row.gx-5):
     - .col-4 / .col-8 carry NO breakpoint suffix, so the split stays a fixed
       33.3/66.7 all the way down — the image column does shrink proportionally,
       it never reflows.
     - The line item's own .gx-5 gutter is a FIXED 3rem, so as the viewport
       narrows it eats a growing share of the row: at 375px the parent measures
       ~303px, of which 48px (16%) is inter-column gutter, leaving the image
       column ~69px of content and the text column ~186px.
     - In that ~186px, .product-action (d-flex, justify-content-between, NO
       wrap) had to fit a 168px stepper (44+8+64+8+44) plus the line total —
       ~230px of content. Nothing in it can shrink (the field carries
       `width:64px !important`), so it OVERFLOWED rather than wrapped.

   Three changes, in the theme's own breakpoint (767.98, as main.css uses):
     1. Gutter 3rem -> --size-400 (1.6rem/16px) on the line-item row only. This
        is a --bs-gutter-x VALUE override on our own .woocommerce-mini-cart-item,
        not a change to the grid: it returns 32px to content, taking the image
        column from ~69px to ~90px and the text column from ~186px to ~197px.
        (0,2,0) beats Bootstrap's .gx-5 (0,1,0) on specificity.
     2. Image back to 1/1 below 768. Section 8a's 3/2 exists to SHORTEN the row
        when the column is 200-256px wide (desktop); at ~90px the row height is
        set by the text stack instead and the 3/2 crop just makes the thumb look
        starved, so the square restores the source ratio and fills the column.
        Ratio only — 8a's object-fit, radius and max-width ceiling still apply.
     3. .product-action is allowed to wrap with a real row gap instead of
        overflowing, and the line total no longer breaks mid-price. With fix #2's
        120px stepper (32+4+48+4+32) + a ~65px total it stays on ONE line at
        375px; below ~340px it now breaks cleanly onto two rows.
   The blurb is clamped to 3 lines so a 20-word card_blurb cannot push the row
   taller than the rest of the list at this width (em_cart_item_blurb already
   trims at 20 words; this is the visual half of the same limit). */
@media (max-width: 767.98px) {
    .woocommerce .woocommerce-mini-cart-item {
        --bs-gutter-x: var(--size-400);
    }
    .woocommerce .woocommerce-mini-cart-item img {
        aspect-ratio: 1 / 1;
    }
    .woocommerce .woocommerce-mini-cart-item .product-meta__blurb {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .woocommerce .woocommerce-mini-cart-item .product-action {
        flex-wrap: wrap;
        gap: var(--size-300);
    }
    .woocommerce .woocommerce-mini-cart-item .product-line-total {
        white-space: nowrap;
    }
    /* The title block and the qty/price row are the two ends of a
       justify-content:between column; at this width the image no longer sets
       the row height, so give them a floor of breathing room instead of
       letting them sit flush. --size-200 = 0.8rem/8px. */
    .woocommerce .woocommerce-mini-cart-item .product-top-part {
        margin-bottom: var(--size-200);
    }
}


/* ============================================================================
   10. WOOCOMMERCE FIX ROUND #11 — checkout gift-card code row
   ----------------------------------------------------------------------------
   Fix #2 (hiding the coupon form) is NOT here — it is a PHP unhook in
   inc/checkout/checkout.php (em_checkout_show_coupon_form()) plus the anchor
   guard in assets/js/emilia.js. Nothing about it is CSS, on purpose: a
   display:none'd form is still in the DOM and still tab-focusable.

   Tokens used in this section (all pre-existing, none introduced):
   --size-200, --size-300, --clr-primary-400, --text-color (§4 alias of
   --clr-primary-200), --fs-100, --ff-secondary.
   ============================================================================ */

/* --- 10a. Gift-card code field + Apply button (fix #1) ---------------------
   DO NOT "CLEAN UP" THIS BLOCK — it is what keeps the row from reverting to a
   white slab with two mismatched boxes in it.

   WHERE THE WHITE CAME FROM. Not an inline style attribute, and not the static
   ywgc-frontend.css either: YITH BUILDS it at runtime and attaches it with
   wp_add_inline_style( 'ywgc-frontend', … ) —
   yith-woocommerce-gift-cards/includes/class-yith-ywgc-frontend.php:538, string
   composed at :586-589 from the option `ywgc_apply_gift_cards_colors`, whose
   defaults are #ffffff background / #000000 text (:567-572). It therefore ships
   as <style id="ywgc-frontend-inline-css">, which is why DevTools attributes it
   to "ywgc-frontend...css". That matters: it is a STYLESHEET rule at (0,1,0)
   with NO !important, so plain specificity beats it. Everything below is
   (0,2,0)+ and carries no !important.

   WHAT .ywgc_enter_code IS. A WRAPPER <div>, not the input
   (…/templates/checkout/form-gift-cards.php:42). The real control is
   `input#giftcard_code.input-text[type=text]` nested two levels down, and it
   ALREADY picks up the theme field treatment from §5b via
   `body.woocommerce-page input[type="text"]` — so the field was never the
   problem. The white slab Ron saw was this wrapper painted #ffffff behind a
   transparent input.

   Structure being laid out (from that template):
     .ywgc_enter_code                        ← wrapper, painted white by YITH
       └ div[style="position: relative"]      ← inline attr, harmless
           ├ p                                ← YITH's instruction line, hidden
           │                                    by the legacy `p:first-child`
           │                                    rule further up this file
           ├ p.form-row.form-row-first  › input#giftcard_code
           ├ p.form-row.form-row-last   › button.button.ywgc_apply_gift_card_button
           └ div.clear                        ← float clearfix, now inert

   The Apply button needs no colour rule here: §3a:541-550 already gives
   `button[type="submit"].ywgc_apply_gift_card_button` the transparent /
   --action-color / 1px-border "invert" treatment at (0,3,1) !important, which
   outranks YITH's teal `.ywgc_apply_gift_card_button{background-color:#448a85
   !important}` (0,1,0) !important on specificity. Only its box geometry is set
   below, so it lines up with the 4.2rem field. */
.woocommerce .ywgc_enter_code,
body.woocommerce-page .ywgc_enter_code {
    background-color: transparent;   /* beats YITH's inline-style #ffffff (0,1,0) */
    color: var(--text-color);        /* beats YITH's #000000; = --clr-primary-200 */
    height: auto;                    /* legacy 45px pin removed at §.review-gift */
    margin: 0;
}

/* One row: field flexes, button keeps its natural width. Replaces YITH's
   float:left + width:50% columns (ywgc-frontend.css:558-563) — float:none is
   what actually collapses that layout, the flex parent alone would not. */
.woocommerce .ywgc_enter_code > div,
body.woocommerce-page .ywgc_enter_code > div {
    display: flex;
    align-items: center;
    gap: var(--size-300);            /* 1.2rem/12px */
    width: 100%;
    margin: 0;
}
.woocommerce .ywgc_enter_code .form-row,
body.woocommerce-page .ywgc_enter_code .form-row {
    float: none;
    width: auto;
    padding: 0;
    margin: 0;
}
.woocommerce .ywgc_enter_code .form-row-first,
body.woocommerce-page .ywgc_enter_code .form-row-first {
    flex: 1 1 auto;
    min-width: 0;                    /* lets the field shrink below its intrinsic
                                        size instead of overflowing the column */
}
.woocommerce .ywgc_enter_code .form-row-last,
body.woocommerce-page .ywgc_enter_code .form-row-last {
    flex: 0 0 auto;
}
/* The float clearfix is dead weight once the row is flex — and as a flex item it
   would otherwise become a third column with a gap in front of it. */
.woocommerce .ywgc_enter_code .clear,
body.woocommerce-page .ywgc_enter_code .clear {
    display: none;
}

/* Field: §5b already supplies height/border/radius/family/size. Only the fill
   width and the RTL treatment are new. The trio is the same one round #6 put on
   the email input (§5b-email): the page is RTL so the Hebrew placeholder and the
   empty caret belong at the RIGHT edge like every sibling field, while
   unicode-bidi:plaintext lets a typed (Latin) gift-card code still read LTR —
   the line follows its own first strong character, so no value is forced. */
.woocommerce .ywgc_enter_code input[type="text"],
body.woocommerce-page .ywgc_enter_code input[type="text"] {
    width: 100%;
    direction: rtl;
    text-align: start;
    unicode-bidi: plaintext;
}

/* Button: match the field's 4.2rem box so the two are the same height, and
   centre the label optically rather than relying on §3a's 34px line-height
   (written for its 45px box). white-space:nowrap keeps the Hebrew label on one
   line when the column narrows. Colours/radius/padding all come from §3a. */
.woocommerce .ywgc_enter_code .ywgc_apply_gift_card_button,
body.woocommerce-page .ywgc_enter_code .ywgc_apply_gift_card_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 4.2rem;                  /* = §5b field height */
    line-height: 1;
    white-space: nowrap;
    font-family: var(--ff-secondary);
    font-size: var(--fs-100);
}

/* ============================================================================
   12. PRODUCT PAGE REDESIGN (07/10/2026) — in the site's own component language
   ----------------------------------------------------------------------------
   Client: "redesign it to be more like the website style and components", and
   the back link at the START of the row. Built from existing site pieces, no new
   tokens:
     · purchase panel = the voucher card (.zamarin-deal-card): white, soft shadow,
       the 3rem single rounded top corner; no border, no dark title bar
     · one H1 in the title stack (--ff-primary) + the site hairline
     · price = the card price (Heebo 700, --clr-primary-400), one step larger
     · "what's included" = the card feature row: icon over label, wrapping
     · under the gallery: an "על השובר" block (title font heading + main-desc)
   Template: woocommerce/content-single-product.php. Overrides §6a–6c by source
   order at equal or higher specificity — the older rules are left in place.
    ========================================================================== */

/* 12a. Crumbs row: back link first (DOM), then the breadcrumb next to it. */
.woo-single__crumbs {
    justify-content: flex-start;
    gap: var(--size-500);
}

/* 12b. Purchase panel = voucher card surface. */
.woo-purchase-card {
    border: 0;
    border-radius: 3rem 0 0 0;               /* = .zamarin-deal-card */
    box-shadow: 0 1rem 1.6rem rgba(24, 39, 75, 0.08);
    background-color: var(--clr-neutral-100);
}
.woo-purchase-card__body {
    padding: clamp(2.4rem, 3vw, 4rem);
    gap: var(--size-400);
}
.woo-purchase-card__title {
    color: var(--clr-title);
    font-family: var(--ff-primary);
    font-weight: 500;
    font-size: calc(var(--heading-sm) * var(--title-scale, 1));
    line-height: 1.15;
    margin: 0;
}
.woo-purchase-card__rule {
    border: 0;
    border-top: 1px solid var(--clr-primary-400);
    opacity: 0.25;
    width: 100%;
    margin: 0;
}

/* 12c. Price + short text, card typography. */
.woocommerce .woo-purchase-card p.price,
.woocommerce .woo-purchase-card span.price {
    margin: 0;
    font-family: var(--ff-secondary);
    font-weight: 700;
    font-size: clamp(2.8rem, 2.2vw, 3.6rem);
    line-height: 1;
    color: var(--clr-primary-400);
}
.woo-purchase-card__desc,
.woo-purchase-card__desc p,
.woo-purchase-card .woocommerce-product-details__short-description,
.woo-purchase-card .woocommerce-product-details__short-description p {
    margin: 0;
    font-family: var(--ff-secondary);
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--clr-primary-200);
}

/* 12d. "What's included": icon BESIDE its text, aligned to the start (client
   07/10/2026), two columns when there's room. A fixed icon slot keeps every
   label on the same start edge, with or without an icon. */
.woo-purchase-card__terms .woo-purchase-card__divider {
    margin: 0 0 var(--size-400);
}
.woo-terms {
    display: grid;
    grid-template-columns: 1fr;              /* one after the other (client 07/10/2026) */
    gap: var(--size-300);
    justify-items: start;
}
.woo-terms__item {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    align-items: center;
    justify-content: start;
    gap: var(--size-300);
    text-align: start;
    font-size: 1.5rem;
    line-height: 1.35;
}
.woo-terms__item > span {
    grid-column: 2;
}
.woo-terms__item svg,
.woo-terms__item img {
    width: 2.4rem;
    height: 2.4rem;
}

/* 12e. Gallery + "about" block under it. */
.woo-gallery__img {
    border-radius: 3rem 0 0 0;               /* same corner as the panel / cards */
}
.woo-purchase-card__desc p + p {
    margin-top: 0.8em;                       /* multi-paragraph descriptions */
}
/* (unused since 07/10/2026 — the "על השובר" block was removed; kept harmless) */
.woo-single__about-title {
    margin: var(--size-600) 0 var(--size-300);
    font-family: var(--ff-primary);
    font-weight: 500;
    font-size: calc(var(--heading-sm) * var(--title-scale, 1));
    color: var(--clr-title);
}
.woo-single__desc.main-desc {
    margin: 0;
    text-align: start;
}

@media (max-width: 991.98px) {
    .woo-single__crumbs {
        gap: var(--size-300);
        margin-bottom: var(--size-300);   /* 07/10/2026: was 24px — less space under the back row on mobile */
    }
    /* The breadcrumb wrapped to 2–3 lines under "חזרה" on phones (a 92px row),
       pushing the image down; on mobile the back link alone is the navigation. */
    .woo-single__crumbs .woocommerce-breadcrumb {
        display: none;
    }
}

/* ============================================================================
   13. ADD-TO-CART FEEDBACK (07/10/2026) — emilia.js AJAX add
   ----------------------------------------------------------------------------
   loading → label hidden, spinner only · success → "✓ נוסף לסל" + toast with
   "מעבר לסל" + header cart count bump · error → same toast, error colour.
   ========================================================================== */

/* 13a. Loading: hide the label (keep the button's size), spinner stays white.
   (0,3,1)+!important to beat §4d's `color: … !important`. */
body.woocommerce-page .single_add_to_cart_button.loading,
body.woocommerce-page .gift_card_add_to_cart_button.loading {
    color: transparent !important;
    pointer-events: none;
}
body.woocommerce-page .single_add_to_cart_button.loading::after,
body.woocommerce-page .gift_card_add_to_cart_button.loading::after {
    color: var(--clr-neutral-100) !important;
}

/* 13b. Added: same fill, a quiet confirmation label for ~2s. */
body.woocommerce-page .single_add_to_cart_button.is-added,
body.woocommerce-page .gift_card_add_to_cart_button.is-added {
    gap: 0.6rem;
}

/* 13c. Toast — bottom centre, the site's card surface (white, soft shadow,
   the single rounded corner), above the WhatsApp float. */
.em-cart-toast {
    position: fixed;
    z-index: 1100;
    inset-inline: 0;
    bottom: 2.4rem;
    margin-inline: auto;
    width: max-content;
    max-width: min(56rem, calc(100% - 3.2rem));
    display: flex;
    align-items: center;
    gap: var(--size-300);
    padding: var(--size-300) var(--size-400);
    background-color: var(--clr-neutral-100);
    color: var(--clr-primary-400);
    border-radius: 1.6rem 0 1.6rem 0;
    box-shadow: 0 1.2rem 3.2rem rgba(24, 39, 75, 0.18);
    font-family: var(--ff-secondary);
    font-size: 1.5rem;
    opacity: 0;
    transform: translateY(1.6rem);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.em-cart-toast.is-in {
    opacity: 1;
    transform: none;
}
.em-cart-toast__icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background-color: var(--accent, var(--clr-primary-100));
    color: var(--clr-neutral-100);
    font-size: 1.4rem;
    font-weight: 700;
}
.em-cart-toast.is-error .em-cart-toast__icon {
    background-color: #b3261e; /* = --clr-error */
}
.em-cart-toast__msg {
    flex: 1 1 auto;
    font-weight: 500;
}
.em-cart-toast__cta.mybtn {
    flex: 0 0 auto;
    height: 3.6rem;
    padding: 0 2rem;
    font-size: 1.4rem;
    background-color: var(--accent, var(--clr-primary-100));
    border-color: var(--accent, var(--clr-primary-100));
    color: var(--clr-neutral-100);
}
.em-cart-toast__close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0 0.4rem;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--clr-primary-400);
    opacity: 0.55;
    cursor: pointer;
}
.em-cart-toast__close:hover,
.em-cart-toast__close:focus-visible {
    opacity: 1;
}
@media (max-width: 575.98px) {
    .em-cart-toast {
        width: auto;
        inset-inline: 1.6rem;
        bottom: 1.6rem;
        flex-wrap: wrap;
    }
}
@media (prefers-reduced-motion: reduce) {
    .em-cart-toast {
        transition: opacity 0.15s ease;
        transform: none;
    }
}

/* 13d. Header cart icon: a small bump when the count changes. */
.header__cart.is-bumped {
    animation: em-cart-bump 0.5s ease;
}
@keyframes em-cart-bump {
    0%, 100% { transform: scale(1); }
    40%      { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
    .header__cart.is-bumped { animation: none; }
}

/* 13e. Added-to-cart confirmation block (emilia.js emCartFeedback) — the main
   feedback, right under the button in the purchase panel. Hotel accent. */
.em-added {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--size-300) var(--size-400);
    margin-top: var(--size-400);
    padding: var(--size-400) var(--size-500);
    border-radius: 1.6rem 0 1.6rem 0;
    background-color: color-mix(in srgb, var(--accent, var(--clr-primary-100)) 8%, var(--clr-neutral-100));
    border: 1px solid color-mix(in srgb, var(--accent, var(--clr-primary-100)) 35%, transparent);
    opacity: 0;
    transform: translateY(0.8rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.em-added.is-in {
    opacity: 1;
    transform: none;
}
.em-added:focus {
    outline: none;
}
.em-added__icon {
    display: inline-grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background-color: var(--accent, var(--clr-primary-100));
    color: var(--clr-neutral-100);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}
.em-added__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.em-added__title {
    font-family: var(--ff-primary);
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 1.2;
    color: var(--clr-title);
}
.em-added__name {
    font-family: var(--ff-secondary);
    font-size: 1.5rem;
    color: var(--clr-primary-200);
}
.em-added__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--size-300) var(--size-500);
}
.em-added__cart.mybtn {
    flex: 1 1 auto;
    background-color: var(--accent, var(--clr-primary-100));
    border-color: var(--accent, var(--clr-primary-100));
    color: var(--clr-neutral-100);
}
.em-added__cart.mybtn:hover {
    background-color: var(--accent, var(--clr-primary-100));
    color: var(--clr-neutral-100);
    filter: brightness(1.08);
}
.em-added__more {
    font-family: var(--ff-secondary);
    font-size: 1.5rem;
    color: var(--clr-primary-400);
    text-decoration: underline;
    text-underline-offset: 0.3em;
}
.em-added.is-error {
    background-color: #fdf3f2;
    border-color: rgba(179, 38, 30, 0.35);
}
.em-added.is-error .em-added__icon {
    background-color: #b3261e; /* = --clr-error */
}
.em-added.is-error .em-added__title {
    font-family: var(--ff-secondary);
    font-size: 1.6rem;
    color: #b3261e;
}
@media (prefers-reduced-motion: reduce) {
    .em-added { transition: opacity 0.15s ease; transform: none; }
}

/* Woo's own "View cart" link (a.added_to_cart) — our block replaces it. */
.woo-purchase-card .added_to_cart,
.woo-purchase-card a.added_to_cart.wc-forward {
    display: none !important;
}

/* ============================================================================
   14. CHECKOUT FLOW — standalone cart / checkout / order received (07/10/2026)
   ----------------------------------------------------------------------------
   Client: "feel like a standalone part of Liam Hotels, with back to website —
   our design but clean and stripped". body.em-checkout-flow (functions.php);
   header/footer = template-parts/checkout/header-min.php / footer-min.php.
   Same tokens as the site: cream page, white cards with the single rounded
   corner + soft shadow, title font headings, hairlines.
   ========================================================================== */
body.em-checkout-flow {
    background-color: var(--bg-main);
}

/* 14a. Header: white strip, three slots — back · logo · secure. Not fixed. */
.checkout-head {
    background-color: var(--clr-neutral-100);
    border-bottom: 1px solid rgba(71, 65, 50, 0.12);
}
.checkout-head__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 7.2rem;
    gap: var(--size-400);
}
.checkout-head__back,
.checkout-head__secure {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ff-secondary);
    font-size: 1.5rem;
    color: var(--clr-primary-400);
    text-decoration: none;
}
.checkout-head__back {
    justify-self: start;
}
.checkout-head__back:hover {
    color: var(--clr-primary-400);
    opacity: 0.7;
}
.checkout-head__back svg,
.checkout-head__secure svg {
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 auto;
}
/* The back chevron points to the inline-start edge — mirror it in English. */
.dir-ltr .checkout-head__back svg {
    transform: scaleX(-1);
}
.checkout-head__logo {
    display: block;
    justify-self: center;
}
.checkout-head__logo-img,
body.woocommerce-page .checkout-head__logo-img {
    display: block;
    height: 4.4rem;
    width: auto;
    max-width: 18rem;
    object-fit: contain;
}
.checkout-head__secure {
    justify-self: end;
    opacity: 0.75;
}

/* 14b. Progress steps. */
.checkout-steps {
    padding-block: var(--size-300) var(--size-400);
}
.checkout-steps__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--size-300);
    margin: 0;
    padding: 0;
    list-style: none;
}
.checkout-steps__item {
    display: flex;
    align-items: center;
    gap: var(--size-300);
    font-family: var(--ff-secondary);
    font-size: 1.4rem;
    color: rgba(71, 65, 50, 0.55);
}
.checkout-steps__item a {
    display: inline-flex;
    align-items: center;
    gap: var(--size-200);
    color: inherit;
    text-decoration: none;
}
.checkout-steps__item + .checkout-steps__item::before {
    content: "";
    width: clamp(2.4rem, 6vw, 6.4rem);
    height: 1px;
    background-color: rgba(71, 65, 50, 0.25);
}
.checkout-steps__num {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 1.3rem;
    font-weight: 500;
    margin-inline-end: var(--size-200);
}
.checkout-steps__item.is-current {
    color: var(--clr-primary-400);
    font-weight: 500;
}
.checkout-steps__item.is-current .checkout-steps__num {
    background-color: var(--clr-primary-400);
    border-color: var(--clr-primary-400);
    color: var(--clr-neutral-100);
}
.checkout-steps__item.is-done {
    color: var(--clr-primary-400);
}
.checkout-steps__item.is-done .checkout-steps__num {
    background-color: var(--clr-primary-100);
    border-color: var(--clr-primary-100);
    color: var(--clr-neutral-100);
}

/* 14c. Page body: header is static here, so only a normal top gap; the title
   reads as a section heading, centred. */
body.em-checkout-flow #page {
    padding-top: var(--size-600);
    padding-bottom: var(--size-800);
}
body.em-checkout-flow #page h1.sub-heading {
    text-align: center;
    font-family: var(--ff-primary);
    font-weight: 500;
    font-size: calc(var(--heading-sm) * var(--title-scale, 1));
    color: var(--clr-title);
    margin-bottom: var(--size-600) !important;
}

/* 14d. Content blocks as the site's white cards. */
body.em-checkout-flow .woocommerce-cart-form,
body.em-checkout-flow .cart-collaterals,
body.em-checkout-flow .col2-set,
body.em-checkout-flow .woocommerce-checkout-review-order,
body.em-checkout-flow .woocommerce-order {
    background-color: var(--clr-neutral-100);
    border-radius: 3rem 0 0 0;                 /* = .zamarin-deal-card */
    box-shadow: 0 1rem 1.6rem rgba(24, 39, 75, 0.08);
    padding: clamp(2rem, 3vw, 3.2rem);
}
body.em-checkout-flow .cart-collaterals,
body.em-checkout-flow .woocommerce-checkout-review-order {
    position: sticky;
    top: var(--size-500);
}
@media (max-width: 991.98px) {
    body.em-checkout-flow .cart-collaterals,
    body.em-checkout-flow .woocommerce-checkout-review-order {
        position: static;
        margin-top: var(--size-500);
    }
}

/* 14e. Slim footer. */
.checkout-foot {
    border-top: 1px solid rgba(71, 65, 50, 0.12);
    padding-block: var(--size-500);
    font-family: var(--ff-secondary);
    font-size: 1.3rem;
    color: rgba(71, 65, 50, 0.7);
}
.checkout-foot__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-300) var(--size-500);
}
.checkout-foot__help {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--clr-primary-400);
    text-decoration: none;
    font-weight: 500;
}
.checkout-foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-200) var(--size-500);
    margin: 0;
    padding: 0;
    list-style: none;
}
.checkout-foot__links a {
    color: inherit;
    text-decoration: none;
}
.checkout-foot__links a:hover {
    color: var(--clr-primary-400);
}
.checkout-foot__copy {
    margin: 0;
}

/* 14f. Mobile: back + logo on one row, secure note hidden; steps labels shrink. */
@media (max-width: 575.98px) {
    .checkout-head__bar {
        /* 11/10/2026: equal side columns (was auto 1fr auto) so the logo sits
           in the true centre whatever the back link / lock widths are. */
        grid-template-columns: 1fr auto 1fr;
        min-height: 6rem;
    }
    .checkout-head__secure span {
        display: none;
    }
    .checkout-head__logo-img,
    body.woocommerce-page .checkout-head__logo-img {
        height: 3.6rem;
    }
    .checkout-steps__item {
        font-size: 1.2rem;
        gap: var(--size-200);
    }
    .checkout-steps__item + .checkout-steps__item::before {
        width: 1.6rem;
    }
    .checkout-steps__label {
        max-width: 7em;
        line-height: 1.2;
    }
    .checkout-foot__inner {
        flex-direction: column;
        text-align: center;
    }
}

/* 14g. Cart totals card: no heading (cart-totals.php) — just the subtotal and
   the checkout button, with room to breathe. `py-3` is Bootstrap !important. */
body.em-checkout-flow .cart-collaterals .woocommerce-mini-cart__sub-total {
    border-top: 0;
    align-items: baseline;
    padding-top: var(--size-200) !important;
    padding-bottom: var(--size-500) !important;
    font-family: var(--ff-secondary);
    font-size: 1.7rem;
    font-weight: 500;
    color : var(--clr-primary-400);
}
body.em-checkout-flow .cart-collaterals .sub-price,
body.em-checkout-flow .cart-collaterals .sub-price strong {
    font-size: 2.6rem;
    font-weight: 700;
}
body.em-checkout-flow .cart-collaterals .wc-proceed-to-checkout {
    padding-top: var(--size-500);
    border-top: 1px solid rgba(71, 65, 50, 0.15);
}

/* 14h. The voucher's hotel logo in each cart row (cart.php .product-hotel). */
.product-hotel {
    margin-top: var(--size-300);
}
.product-hotel__logo,
body.woocommerce-page .product-hotel__logo {
    display: block;
    height: 4.4rem;                      /* 07/10/2026: was 2.8rem (client: bigger) */
    width: auto;
    max-width: 16rem;
    object-fit: contain;
    object-position: right center;
}

/* 14i. "צריכים עזרה?" WhatsApp icon: .myicon is a mask stretched to its box
   (mask-size 100% 100%); as a flex item it was squeezed narrower than tall, so
   the handset slid out of the bubble. Fixed square that never shrinks, and the
   glyph keeps its proportions. */
.checkout-foot__help .myicon {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
}

/* 14j. Checkout order summary lines (review-order.php — subtotal / gift card /
   total rows share .woocommerce-mini-cart__sub-total): more air per line, a
   hairline between them, and the final total a step larger. `py-3` is
   Bootstrap !important. */
body.em-checkout-flow .woocommerce-checkout-review-order .woocommerce-mini-cart__sub-total:not(#payment) {
    align-items: baseline;
    padding-top: var(--size-400) !important;
    padding-bottom: var(--size-400) !important;
    border-top: 1px solid rgba(71, 65, 50, 0.12);
    font-family: var(--ff-secondary);
    font-size: 1.6rem;
    color: var(--clr-primary-400);
}
body.em-checkout-flow .woocommerce-checkout-review-order .woocommerce-mini-cart__sub-total:last-of-type .sub-price,
body.em-checkout-flow .woocommerce-checkout-review-order .woocommerce-mini-cart__sub-total:last-of-type .sub-price strong {
    font-size: 2.4rem;
    font-weight: 700;
}

/* 14k. Thank-you page (woocommerce/checkout/thankyou.php, 18/10/2026). Built
   from the checkout's own pieces: the white card (14d) holds a centred
   confirmation, four summary tiles, the order lines (thumbnail like the cart),
   totals as hairline rows with the final total larger (= 14j), billing in a
   soft card, and the site's pills to leave. */
body.em-checkout-flow .em-thankyou {
    max-width: 96rem;
    margin-inline: auto;
    padding: clamp(2.4rem, 4vw, 4.8rem);
    color: var(--clr-primary-200);
    font-family: var(--ff-secondary);
}
.em-thankyou__hero {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: var(--size-300);
}
.em-thankyou__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    border: 1px solid var(--clr-primary-400);
    color: var(--clr-primary-400);
}
.em-thankyou__title,
body.em-checkout-flow .em-thankyou h2.em-thankyou__title {
    margin: 0;
    font-family: var(--ff-primary);
    font-weight: 500;
    font-size: calc(var(--heading-sm) * var(--title-scale, 1));
    line-height: 1.1;
    color: var(--clr-title);
}
.em-thankyou__lead {
    margin: 0;
    font-size: 1.6rem;
    color: var(--clr-primary-200);
}
.em-thankyou__lead strong {
    font-weight: 500;
}
.em-thankyou__hero--failed .em-thankyou__title {
    color: var(--clr-error, #b3261e);
}

.em-thankyou__facts {
    list-style: none;
    margin: var(--size-600) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block: 1px solid rgba(71, 65, 50, 0.15);
}
.em-thankyou__facts li {
    display: grid;
    gap: 0.4rem;
    padding: var(--size-400) var(--size-300);
    text-align: center;
    min-width: 0;
}
.em-thankyou__facts li + li {
    border-inline-start: 1px solid rgba(71, 65, 50, 0.15);
}
.em-thankyou__label {
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    color: var(--clr-primary-200);
    opacity: 0.75;
}
.em-thankyou__value {
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--clr-primary-400);
    overflow-wrap: anywhere;
}

/* Payment-method output (e.g. BACS "Our bank details"). */
body.em-checkout-flow .em-thankyou .woocommerce-bacs-bank-details,
body.em-checkout-flow .em-thankyou > p:not([class]) {
    margin-top: var(--size-500);
    padding: var(--size-400) var(--size-500);
    background-color: var(--bg-main);
    border-radius: var(--size-200);
    font-size: 1.5rem;
}
body.em-checkout-flow .em-thankyou .wc-bacs-bank-details-heading {
    font-family: var(--ff-secondary);
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--clr-primary-400);
    margin: 0 0 var(--size-300);
}
body.em-checkout-flow .em-thankyou .wc-bacs-bank-details {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-300) var(--size-500);
}

.em-thankyou__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--size-600);
    align-items: start;
    margin-top: var(--size-600);
}
.em-thankyou__heading {
    margin: 0 0 var(--size-300);
    font-family: var(--ff-secondary);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--clr-primary-400);
}
.em-thankyou__lines {
    list-style: none;
    margin: 0;
    padding: 0;
}
.em-thankyou__line {
    display: grid;
    grid-template-columns: 6.4rem minmax(0, 1fr) auto;
    gap: var(--size-400);
    align-items: center;
    padding-block: var(--size-400);
    border-bottom: 1px solid rgba(71, 65, 50, 0.12);
}
.em-thankyou__line:first-child {
    border-top: 1px solid rgba(71, 65, 50, 0.12);
}
body.em-checkout-flow .em-thankyou__thumb {
    width: 6.4rem;
    height: 6.4rem;
    object-fit: cover;
    border-radius: var(--size-200);
    background-color: var(--bg-main);
    display: block;
}
.em-thankyou__line-body {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}
.em-thankyou__name,
body.em-checkout-flow .em-thankyou a.em-thankyou__name {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--clr-primary-400);
    text-decoration: none;
}
body.em-checkout-flow .em-thankyou a.em-thankyou__name:hover {
    color: var(--clr-primary-100);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.em-thankyou__qty,
.em-thankyou__line .wc-item-meta {
    font-size: 1.4rem;
    color: var(--clr-primary-200);
    opacity: 0.75;
    list-style: none;
    margin: 0;
    padding: 0;
}
.em-thankyou__line .wc-item-meta p {
    display: inline;
    margin: 0;
}
.em-thankyou__amount {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--clr-primary-400);
    white-space: nowrap;
}

.em-thankyou__totals {
    margin: var(--size-300) 0 0;
}
.em-thankyou__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--size-400);
    padding-block: var(--size-300);
    font-size: 1.6rem;
    color: var(--clr-primary-400);
}
.em-thankyou__total dt {
    font-weight: 400;
}
.em-thankyou__total dd {
    margin: 0;
}
.em-thankyou__total--order_total {
    border-top: 1px solid rgba(71, 65, 50, 0.12);
    padding-top: var(--size-400);
}
.em-thankyou__total--order_total dt {
    font-weight: 500;
}
.em-thankyou__total--order_total dd {
    font-size: 2.4rem;
    font-weight: 700;
}
.em-thankyou__note {
    margin-top: var(--size-400);
    font-size: 1.5rem;
}

.em-thankyou__billing {
    background-color: var(--bg-main);
    border-radius: 2rem 0 0 0;
    padding: var(--size-500);
}
.em-thankyou__billing address {
    font-style: normal;
    font-size: 1.5rem;
    line-height: 1.7;
    display: grid;
}
.em-thankyou__contact {
    text-align: start;
    unicode-bidi: plaintext;
}

.em-thankyou__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--size-400);
    margin-top: var(--size-700);
}
body.em-checkout-flow .em-thankyou .mybtn--outline {
    color: var(--clr-primary-400);
    border-color: var(--clr-primary-400);
}
body.em-checkout-flow .em-thankyou .mybtn--outline:hover {
    background-color: var(--clr-primary-400);
    color: var(--clr-neutral-100);
}

@media (max-width: 767.98px) {
    .em-thankyou__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .em-thankyou__facts li:nth-child(3) {
        border-inline-start: 0;
    }
    .em-thankyou__facts li:nth-child(n + 3) {
        border-top: 1px solid rgba(71, 65, 50, 0.15);
    }
    .em-thankyou__grid {
        grid-template-columns: 1fr;
    }
    .em-thankyou__line {
        grid-template-columns: 5.2rem minmax(0, 1fr) auto;
        gap: var(--size-300);
    }
    body.em-checkout-flow .em-thankyou__thumb {
        width: 5.2rem;
        height: 5.2rem;
    }
}