/* YITH Wishlist — icon-only heart button (card + PDP).
   Robust to BOTH YITH markup variants, because the active one depends on plugin
   options that a production-data import can flip:
     - link-style:  .yith-wcwl-add-to-wishlist > .yith-wcwl-add-button > a.add_to_wishlist > svg + bare <span>
     - block-style:  .yith-wcwl-add-to-wishlist-button-block > a.yith-wcwl-add-to-wishlist-button > svg + span.__label
   We scope to the stable container class .yith-wcwl-add-to-wishlist (present in
   both) inside our own wraps, style ANY anchor as the icon button, and hide ANY
   text label. Do NOT narrow these to one variant or the label leaks / the button
   loses its styling after a YITH settings change. */

.odonata-wishlist-wrap {
    z-index: 10;
    line-height: 0;
}
.odonata-wishlist-wrap .yith-wcwl-add-to-wishlist,
.odonata-wishlist-wrap .yith-wcwl-add-button,
.odonata-wishlist-wrap .yith-wcwl-add-to-wishlist-button-block,
.odonata-wishlist-wrap .yith-wcwl-wishlistexistsbrowse,
.odonata-wishlist-wrap .yith-wcwl-wishlistaddedbrowse,
.odo-pdp-wishlist .yith-wcwl-add-to-wishlist,
.odo-pdp-wishlist .yith-wcwl-add-button {
    margin: 0;
    padding: 0;
    line-height: 0;
}
/* Keep YITH's hidden (inactive add/browse) state hidden even if its own CSS is off */
.odonata-wishlist-wrap .hide,
.odo-pdp-wishlist .hide {
    display: none !important;
}

/* Shared icon-button base (card + PDP), ANY wishlist anchor */
.odonata-wishlist-wrap .yith-wcwl-add-to-wishlist a,
.odo-pdp-wishlist .yith-wcwl-add-to-wishlist a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* Card heart — glass button over the product image */
.odonata-wishlist-wrap .yith-wcwl-add-to-wishlist a {
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    backdrop-filter: blur(8px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.odonata-wishlist-wrap .yith-wcwl-add-to-wishlist a:hover {
    transform: scale(1.06);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Visually hide YITH text labels but KEEP them as the control's accessible name
   (screen readers still read "Добави в любими"). Do NOT use display:none here —
   that strips the anchor's accessible name, leaving an unlabeled icon-only link.
   This is the standard .sr-only / visually-hidden pattern. */
.odonata-wishlist-wrap .yith-wcwl-add-to-wishlist a > span,
.odo-pdp-wishlist .yith-wcwl-add-to-wishlist a > span,
.yith-wcwl-add-to-wishlist-button__label,
.yith-wcwl-add-to-wishlist span.__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Heart icon (SVG).
   UNSAVED = OUTLINE heart, not a solid black fill. YITH ships a solid heart glyph
   (<svg fill="currentColor"> with a filled silhouette path); painting it with the
   near-black --foreground token rendered a heavy black heart the client rejected
   ("no black heart"). We override the inline fill to none and stroke the silhouette
   edge instead → a light, elegant outline. CSS fill/stroke beat the SVG's inline
   fill="currentColor" presentation attribute. Saved state re-fills solid red below.
   Do NOT restore fill:currentColor here — it reintroduces the black filled heart. */
.odonata-wishlist-wrap .yith-wcwl-icon-svg,
.odo-pdp-wishlist .yith-wcwl-icon-svg {
    margin: 0 !important;
    fill: none;
    stroke: hsl(var(--muted-foreground));
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: color 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
}
.odonata-wishlist-wrap .yith-wcwl-icon-svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
}
/* Saved → filled accent heart (covers link-style browse/exists blocks + block-style --added) */
.odonata-wishlist-wrap .yith-wcwl-wishlistexistsbrowse .yith-wcwl-icon-svg,
.odonata-wishlist-wrap .yith-wcwl-wishlistaddedbrowse .yith-wcwl-icon-svg,
.odonata-wishlist-wrap a.yith-wcwl-add-to-wishlist-button--added .yith-wcwl-icon-svg,
.odo-pdp-wishlist .yith-wcwl-wishlistexistsbrowse .yith-wcwl-icon-svg,
.odo-pdp-wishlist .yith-wcwl-wishlistaddedbrowse .yith-wcwl-icon-svg,
.odo-pdp-wishlist a.yith-wcwl-add-to-wishlist-button--added .yith-wcwl-icon-svg {
    color: hsl(var(--destructive));
    fill: hsl(var(--destructive));
    stroke: hsl(var(--destructive));
}

/* Font-icon variant of the same heart.

   YITH emits EITHER an inline <svg class="yith-wcwl-icon-svg"> (styled above) OR
   a Font Awesome <i class="yith-wcwl-icon fa fa-heart">, depending on its saved
   settings — and a prod-data import can flip it between the two. Porto used to
   supply Font Awesome; with Porto retired that font is gone, so the <i>
   collapsed to 0×0 and the heart disappeared from every product card.

   Draw the shape ourselves with a CSS mask: renders identically in both
   variants and never depends on an icon font again. Do NOT "simplify" this to a
   font-family rule — that is exactly what broke. */
.odonata-wishlist-wrap i.yith-wcwl-icon,
.odo-pdp-wishlist i.yith-wcwl-icon {
    --odo-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    background-color: hsl(var(--muted-foreground));
    -webkit-mask: var(--odo-heart) center / contain no-repeat;
    mask: var(--odo-heart) center / contain no-repeat;
    transition: background-color 0.2s ease;
}
.odo-pdp-wishlist i.yith-wcwl-icon {
    width: 1.5rem;
    height: 1.5rem;
}
/* Saved → solid accent heart (same swap as the SVG variant above). */
.odonata-wishlist-wrap .yith-wcwl-wishlistexistsbrowse i.yith-wcwl-icon,
.odonata-wishlist-wrap .yith-wcwl-wishlistaddedbrowse i.yith-wcwl-icon,
.odo-pdp-wishlist .yith-wcwl-wishlistexistsbrowse i.yith-wcwl-icon,
.odo-pdp-wishlist .yith-wcwl-wishlistaddedbrowse i.yith-wcwl-icon {
    --odo-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
    background-color: hsl(var(--destructive));
}

/* Larger PDP heart (solid button on white background, not over an image) */
.odo-pdp-wishlist {
    display: inline-flex !important;
}
.odo-pdp-wishlist .yith-wcwl-add-to-wishlist a {
    width: 3rem !important;
    height: 3rem !important;
    background: hsl(var(--secondary) / 0.6);
    border: 1px solid hsl(var(--border));
}
.odo-pdp-wishlist .yith-wcwl-add-to-wishlist a:hover {
    background: hsl(var(--secondary));
    border-color: hsl(var(--foreground) / 0.25);
}
.odo-pdp-wishlist .yith-wcwl-icon-svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* Hide WC "View cart" link after add-to-cart (we auto-open the side-cart).
   Global: homepage V2 uses custom card markup outside ul.products. */
.added_to_cart {
    display: none !important;
}

/* Hide YITH wishlist feedback popup/toast */
.yith-wcwl-feedback-messages-container {
    display: none !important;
}

/* ============================================================
   SAVED STATE — product already in the wishlist.
   YITH renders a DIFFERENT block when a product is saved (both at page
   load for already-saved items, and injected client-side after an add):
     .yith-wcwl-add-to-wishlist.exists
       > .yith-wcwl-wishlistaddedbrowse  (or .yith-wcwl-wishlistexistsbrowse)
           > span.feedback   (svg.yith-wcwl-icon-svg + "Продукта е добавен!" text)
           > a               ("Разгледай любими" → wishlist page)
   Without these rules the bare Cyrillic text nodes leak next to the heart and
   the button loses its shape. We render the SAME icon-only button with a filled
   RED heart (red fill already set above), hide both text nodes, and turn the
   browse <a> into an invisible full-button click layer (→ wishlist page).
   Do NOT delete: the unsaved markup (a.add_to_wishlist) is a separate variant
   styled above; this block is what shows once an item is in the wishlist. */

/* Saved block becomes the button box — mirror the unsaved CARD heart */
.odonata-wishlist-wrap .yith-wcwl-wishlistaddedbrowse,
.odonata-wishlist-wrap .yith-wcwl-wishlistexistsbrowse {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    backdrop-filter: blur(8px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.odonata-wishlist-wrap .yith-wcwl-wishlistaddedbrowse:hover,
.odonata-wishlist-wrap .yith-wcwl-wishlistexistsbrowse:hover {
    transform: scale(1.06);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Saved block — larger PDP heart box (solid button on white, matches unsaved PDP) */
.odo-pdp-wishlist .yith-wcwl-wishlistaddedbrowse,
.odo-pdp-wishlist .yith-wcwl-wishlistexistsbrowse {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0;
    background: hsl(var(--secondary) / 0.6);
    border: 1px solid hsl(var(--border));
    transition: transform 0.15s ease, background 0.2s ease;
}
.odo-pdp-wishlist .yith-wcwl-wishlistaddedbrowse:hover,
.odo-pdp-wishlist .yith-wcwl-wishlistexistsbrowse:hover {
    background: hsl(var(--secondary));
    border-color: hsl(var(--foreground) / 0.25);
}

/* feedback span holds the heart svg — center it and kill its text node */
.odonata-wishlist-wrap .yith-wcwl-wishlistaddedbrowse .feedback,
.odonata-wishlist-wrap .yith-wcwl-wishlistexistsbrowse .feedback,
.odo-pdp-wishlist .yith-wcwl-wishlistaddedbrowse .feedback,
.odo-pdp-wishlist .yith-wcwl-wishlistexistsbrowse .feedback {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-size: 0;   /* hides the "Продукта е добавен!" text node; svg keeps its !important size */
    line-height: 0;
}

/* browse link → invisible full-button click layer (keeps click→wishlist, no visible text).
   font-size:0/color:transparent hide the text VISUALLY but, unlike display:none, keep
   "Разгледай любими" as the link's accessible name for screen readers. */
.odonata-wishlist-wrap .yith-wcwl-wishlistaddedbrowse > a,
.odonata-wishlist-wrap .yith-wcwl-wishlistexistsbrowse > a,
.odo-pdp-wishlist .yith-wcwl-wishlistaddedbrowse > a,
.odo-pdp-wishlist .yith-wcwl-wishlistexistsbrowse > a {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
    color: transparent;
    background: none;
    border: 0;
    box-shadow: none;
}

/* Keyboard focus ring for ALL wishlist controls (unsaved anchor + saved-state
   browse overlay, card + PDP). Icon-only controls must show a visible focus
   indicator (WCAG 2.4.7); the saved overlay is absolute inset:0 so the ring
   frames the whole button box. */
.odonata-wishlist-wrap .yith-wcwl-add-to-wishlist a:focus-visible,
.odo-pdp-wishlist .yith-wcwl-add-to-wishlist a:focus-visible,
.odonata-wishlist-wrap .yith-wcwl-wishlistaddedbrowse > a:focus-visible,
.odonata-wishlist-wrap .yith-wcwl-wishlistexistsbrowse > a:focus-visible,
.odo-pdp-wishlist .yith-wcwl-wishlistaddedbrowse > a:focus-visible,
.odo-pdp-wishlist .yith-wcwl-wishlistexistsbrowse > a:focus-visible {
    outline: 2px solid hsl(var(--foreground));
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============================================================
   Shortcode product sliders embedded INSIDE the product description
   (.prose) — e.g. a [products]/[porto_products] block a merchant
   pasted into the long description ("МОЖЕ БИ, ЩЕ ЖЕЛАЕТЕ ДА
   СЪЧЕТАЕТЕ СЪС:"). WooCommerce outputs these as
   `ul.products.columns-N`, which the theme never styled (only the
   shop/archive/account `ul.products` got grids, none inside `.prose`).
   Left unstyled the `ul` is `display:block`, so each `.odo-product-card`
   stretches to full prose width and its `aspect-[4/5]` tile balloons
   (the giant image the client flagged).
   Client then asked this to match the homepage product sliders —
   horizontal native-swipe scroll with a peek of the next card — so it
   is rendered as a horizontal slider mirroring `.slider-products` in
   page-homepage-v2.php (same 64%/30%/25% widths, gap, and scroll-snap).
   Scoped to `.prose` so it can never touch the real
   shop/archive/account product grids.
   `> li` targets the cards directly (robust regardless of WC's
   `.product`/`.odo-product-card` class set on the <li>).
   ============================================================ */
.prose ul.products {
    display: flex !important;
    gap: 1.25rem; /* 20px — matches homepage .slider-products gap */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: auto; /* cancel WC's CSS-columns layout from .columns-N */
    scrollbar-width: none;
    -ms-overflow-style: none;
    contain: layout paint;
}
.prose ul.products::-webkit-scrollbar { display: none; }
/* Neutralise WC's float/clear hacks that fight the flex row */
.prose ul.products::before,
.prose ul.products::after {
    display: none;
}
.prose ul.products > li {
    flex-shrink: 0;
    width: 64%; /* mobile: ~1.5 cards visible with a peek, matches homepage */
    float: none !important;
    margin: 0 !important;
    scroll-snap-align: start;
    align-self: stretch;
    /* Override the canonical card's h-full so align-self:stretch takes effect
       (an explicit height blocks align-self:stretch). */
    height: auto;
}
@media (min-width: 768px) {
    .prose ul.products > li { width: 30%; }
}
@media (min-width: 1024px) {
    .prose ul.products > li { width: calc(25% - 0.9375rem); }
}
 /* Reset .prose typography bleed: prose underlines+colors the title <a> and
    adds margins to the brand <p>, breaking the card. Let cards self-style.
    EXCLUDE the buy button (it carries a bg-* utility): color:inherit would
    clobber its Tailwind text-primary-foreground / text-muted-foreground and
    render the КУПИ label dark olive on the olive button — keep its own color. */
 .prose ul.products a:not([class*="bg-"]) {
     text-decoration: none;
     color: inherit;
 }
 .prose ul.products a[class*="bg-"] {
     text-decoration: none;
 }
.prose ul.products p {
    margin: 0;
}
/* Client: do not truncate — overrides the site-wide 2-line clamp. */
.prose ul.products .product-name {
    -webkit-line-clamp: unset;
}