/**
 * evov-sub — Product Loop: Buttons-on-Hover Reskin  (v1.3.23)
 * Target layout: .wd-product.wd-hover-buttons-on-hover
 *
 * Built for WoodMart dark theme (Theme Options → Dark Version enabled).
 * The body carries class: global-color-scheme-light
 *
 * Architecture
 * ─────────────────────────────────────────────────────────────
 * • Extends WoodMart's animation mechanics — never replaces them.
 *   All clip-path, translateY, and opacity transitions are left
 *   to WoodMart's own CSS (woo-product-loop-buttons-on-hover.min.css).
 * • Custom design tokens are prefixed --evov-* so they never
 *   clash with WoodMart's internal --wd-* namespace.
 * • WoodMart theme-option variables (--wd-*, --btn-accented-*)
 *   are referenced but NOT overridden — changes in Theme Options
 *   still propagate through as expected.
 * ─────────────────────────────────────────────────────────────
 */


/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */

:root {
  /* Card surface */
  --evov-card-bg:              #141414;
  --evov-card-border:          rgba(255, 255, 255, 0.07);
  --evov-card-border-hover:    rgba(255, 255, 255, 0.16);

  /* CTA button height (overrides WoodMart's --btn-height: 36px) */
  --evov-cta-height:           44px;

  /* Title typography */
  --evov-title-weight:         700;
  --evov-title-size:           0.93rem;
  --evov-title-max-lines:      2;

  /* Content area horizontal padding — used by both the container
     and the platform label's negative margins to stay in sync     */
  --evov-content-padding-x:    14px;

  /* Platform label */
  --evov-platform-label-h:     38px;   /* height of the frosted bar */
  --evov-platform-label-bg:    rgba(5, 5, 5, 0.65);
  --evov-platform-label-blur:  12px;

  /* Region badge */
  --evov-region-badge-color:   rgba(255, 255, 255, 0.55);
  --evov-region-badge-border:  rgba(255, 255, 255, 0.28);
}


/* ================================================================
   2. LAYOUT TOKEN OVERRIDES (feed into WoodMart's internal vars)
   ================================================================ */

/*
 * WHY html prefix?
 * WoodMart's woo-product-loop-buttons-on-hover.min.css loads AFTER
 * this stylesheet and re-declares --btn-height: 36px on the plain
 * .wd-product.wd-hover-buttons-on-hover selector (specificity 0,2,0).
 * Adding the html type-selector bumps our specificity to (0,2,1),
 * which wins regardless of source order.  All overrides that must
 * beat WoodMart's same-selector declarations need this prefix.
 */
html .wd-product.wd-hover-buttons-on-hover {
  /* Increase CTA height for a bolder digital-store feel.
     WoodMart uses --btn-height for the button-text line-height;
     our section-8 rule also sets height/line-height directly on
     the <a> element so the button is always the correct size.    */
  --btn-height:        var(--evov-cta-height);

  /* --wd-trans-h drives three things on desktop:
       1. margin-bottom: calc(--wd-trans-h * -1)  on .product-element-bottom
          → pulls the card wrapper height DOWN, clipping the footer
            and bottom padding out of the default-state view.
       2. translateY(calc(--wd-trans-h * -1))      on .product-element-bottom (hover)
       3. clip-path: inset(0 0 --wd-trans-h 0)     on .wd-product-thumb   (hover)
     Formula: trans_h = button_height + desired_bottom_padding
              = 44px + 10px = 54px
     This guarantees wrapper_height − footer_top = 0 at rest
     (no invisible-footer bleed) while exposing 10 px of bottom
     breathing-room below the CTA on hover.                       */
  --wd-trans-h:        calc(var(--evov-cta-height) + 10px);

  /* Zero the gap WoodMart inserts between image and content section. */
  --wd-prod-gap:       0px;

  /* Keep image flush to the card edges (no outer spacing) */
  --wd-prod-bg-sp:      0;
}




/* ================================================================
   3. CARD WRAPPER — dark surface, border, transitions
   ================================================================ */

.wd-product.wd-hover-buttons-on-hover .wd-product-wrapper {
  background-color: var(--evov-card-bg);
  border:           1px solid var(--evov-card-border);

  /* Respect Theme Options → Border Radius; fallback to 6px */
  border-radius:    var(--wd-brd-radius, 6px);

  /* Replace WoodMart's broad 'transition: all .3s ease' with targeted
     properties so only card-level values animate (not clip-path etc.) */
  transition:
    transform    0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow   0.3s ease,
    border-color 0.3s ease;
}


/* ================================================================
   4. CARD HOVER — glow + border highlight (desktop only)

   Note: WoodMart already applies translateY(-10px) on this hover
   selector inside its own @media (min-width: 1025px) block.
   We add box-shadow and border-color on top of that.
   ================================================================ */

@media (min-width: 1025px) {
  .wd-product.wd-hover-buttons-on-hover .wd-product-wrapper:hover {
    border-color: var(--evov-card-border-hover);

    /* Multi-layer shadow:
       1. Deep directional shadow for lift
       2. Soft primary-color glow (tied to Theme Options → Primary Color) */
    box-shadow:
      0 10px 35px rgba(0, 0, 0, 0.50),
      0 0   22px color-mix(in srgb, var(--wd-primary-color, #6366f1) 22%, transparent);
  }
}


/* ================================================================
   5. IMAGE THUMB — radius matches top corners of card
   ================================================================ */

/* overflow: visible lets the platform label's translateY(8px) base
   extend 8px below the thumb into the gap without being clipped.
   The image's top-corner border-radius is moved to .wd-product-img-link
   (with overflow: hidden there) so it still clips correctly.           */
.wd-product.wd-hover-buttons-on-hover .wd-product-thumb {
  position: relative;
  z-index:  5;
  overflow: visible;
  border-radius:
    var(--wd-thumb-brd-radius, var(--wd-brd-radius, 0))
    var(--wd-thumb-brd-radius, var(--wd-brd-radius, 0))
    0 0;
}

/* Clip the image to rounded top corners now that the thumb uses overflow:visible */
.wd-product.wd-hover-buttons-on-hover .wd-product-img-link {
  display:  block;
  overflow: hidden;
  border-radius:
    var(--wd-thumb-brd-radius, var(--wd-brd-radius, 0))
    var(--wd-thumb-brd-radius, var(--wd-brd-radius, 0))
    0 0;
}


/* ================================================================
   5b. DOM GAP CLOSER

   WoodMart inserts ~8px of margin between .wd-product-thumb and
   .product-element-bottom. Because clip-path on the thumb clips
   all its children, no child element can visually bridge this gap
   from inside the thumb. Pulling the content section up by 8px is
   the only reliable fix. The platform label's translateY(8px) base
   covers the top 8px of the content section at rest (label is above
   content due to thumb's z-index: 5), so nothing is visually hidden.
   ================================================================ */

.wd-product.wd-hover-buttons-on-hover .product-element-bottom {
  margin-top: -8px;
}

/*
 * WHY direct padding override (not --wd-prod-bg-cont-sp)?
 * WoodMart's `:is(.wd-products-with-bg, …) .wd-product…` rule has
 * specificity (0,4,0) and overrides our variable to 15px.
 * Setting padding directly on .product-element-bottom with the html
 * prefix gives specificity (0,3,1) > WoodMart's (0,3,0) rule that
 * applies `padding: var(--wd-prod-bg-cont-sp)` — so our value wins.
 *
 * Padding values:
 *   top  12 px — provides ≈ 8 px of visible breathing-room between
 *               the platform-label frosted bar and the product title.
 *               (The label extends ~4 px below the image edge via its
 *               margin-bottom: -6px, so a larger offset than 0 is
 *               required to keep the title text clear of the label.)
 *   bottom 10 px — visible on hover as the breathing-room below the
 *               CTA button. Matched exactly by the + 10 px term in
 *               --wd-trans-h above, so the formula
 *               footer_height(44) + bottom_pad(10) − trans_h(54) = 0
 *               still holds: footer clips exactly at the card edge at
 *               rest — no invisible-footer bleed-in.
 *
 * background-color: --bgcolor-white
 *   WoodMart sets background-color: inherit on this element, so it
 *   picks up .wd-product-wrapper's --evov-card-bg (#141414). We want
 *   the content section to use --bgcolor-white (#121420 in dark mode,
 *   #FFF in light mode) so it shifts slightly from the image area and
 *   adapts automatically when the colour scheme changes.
 */
html .wd-product.wd-hover-buttons-on-hover .product-element-bottom {
  padding:          12px var(--evov-content-padding-x) 10px;
  background-color: var(--bgcolor-white);
  cursor:           pointer; /* entire content section is clickable via JS */
}


/* ================================================================
   6. TITLE — bold, 2-line clamp
   ================================================================ */

/* Restore the top breathing-room that --wd-prod-bg-cont-sp used to
   provide (now 0). The platform label sits flush at the image
   bottom; this margin pushes the title 10px below it.           */
.wd-product.wd-hover-buttons-on-hover .wd-product-header {
  margin-top: 10px;
}

.wd-product.wd-hover-buttons-on-hover .wd-entities-title {
  font-size:   var(--evov-title-size);
  font-weight: var(--evov-title-weight);

  /* Clamp to N lines with ellipsis.
     min-width: 0 is required for line-clamp to work in a flex parent. */
  min-width:          0;
  display:            -webkit-box;
  -webkit-line-clamp: var(--evov-title-max-lines);
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* WoodMart's Typography → "Product loop title" line-height writes to the
   inner <a> element (html .wd-product .wd-entities-title a). However,
   WoodMart's own wd-loop-builder-off rule forces line-height: inherit on
   the h3.wd-entities-title block, creating a CSS strut sized by the parent's
   inherited value (~21px) that prevents the <a>'s setting from having any
   visual effect.
   Specificity (0,3,1) > WoodMart's (0,2,0) — sets line-height: 0 on the h3
   to collapse the strut, so the <a>'s WoodMart-written value is the sole
   contributor to each line box height. */
html .wd-product.wd-hover-buttons-on-hover .wd-entities-title {
  line-height: 0;
}


/* ================================================================
   7. PRICE — fully inherits from WoodMart theme settings (no overrides)
   ================================================================ */


/* ================================================================
   8. FOOTER REVEAL AREA — CTA + action buttons
   ================================================================ */

.wd-product.wd-hover-buttons-on-hover .wd-product-footer {
  gap:        8px;
  margin-top: 12px;   /* breathing room between price and CTA */
}

/* CTA button — WoodMart already sets width: 100%, border-radius,
   and all color vars from Theme Options. We only adjust font. */
.wd-product.wd-hover-buttons-on-hover .wd-add-btn > a {
  font-size:      0.82rem;
  font-weight:    700;
  letter-spacing: 0.04em;
  height:         var(--evov-cta-height);
  line-height:    var(--evov-cta-height);
}

/* Action buttons (compare, quick-view) in footer —
   glassmorphism circles matching CTA height */
.wd-product.wd-hover-buttons-on-hover .wd-product-footer .wd-action-btn > a,
.wd-product.wd-hover-buttons-on-hover .wd-product-footer .wd-action-btn > button {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            var(--evov-cta-height);
  height:           var(--evov-cta-height);
  border-radius:    50%;
  background-color: rgba(255, 255, 255, 0.07);
  border:           1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter:  blur(6px);
  transition:
    background-color 0.2s ease,
    border-color     0.2s ease;
}

.wd-product.wd-hover-buttons-on-hover .wd-product-footer .wd-action-btn > a:hover,
.wd-product.wd-hover-buttons-on-hover .wd-product-footer .wd-action-btn > button:hover {
  background-color: rgba(255, 255, 255, 0.14);
  border-color:     rgba(255, 255, 255, 0.20);
}


/* ================================================================
   9. ALWAYS-VISIBLE ICON BUTTONS (top-right: wishlist, compare)
   .wd-buttons.wd-pos-r-t
   ================================================================ */

.wd-product.wd-hover-buttons-on-hover .wd-buttons.wd-pos-r-t .wd-action-btn > a,
.wd-product.wd-hover-buttons-on-hover .wd-buttons.wd-pos-r-t .wd-action-btn > button {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            32px;
  height:           32px;
  border-radius:    50%;
  background-color: rgba(0, 0, 0, 0.55);
  border:           1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter:  blur(8px);
  color:            rgba(255, 255, 255, 0.80);
  transition:       background-color 0.2s ease;
}

.wd-product.wd-hover-buttons-on-hover .wd-buttons.wd-pos-r-t .wd-action-btn > a:hover,
.wd-product.wd-hover-buttons-on-hover .wd-buttons.wd-pos-r-t .wd-action-btn > button:hover {
  background-color: rgba(0, 0, 0, 0.80);
}


/* ================================================================
   10. PRODUCT LABELS (sale badge, custom labels)
   ================================================================ */

.wd-product.wd-hover-buttons-on-hover .onsale {
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  border-radius:  var(--wd-brd-radius, 4px);
}


/* ================================================================
   11. STAR RATING — de-emphasised
   ================================================================ */

.wd-product.wd-hover-buttons-on-hover .star-rating {
  font-size: 0.72rem;
  opacity:   0.65;
}


/* ================================================================
   12. BORDERED / SHADOW / BACKGROUND WRAPPER VARIANTS
   When WoodMart adds .wd-products-with-bg, .wd-products-with-shadow,
   or .products-bordered-grid-ins, ensure our card surface still wins.
   ================================================================ */

:is(
  .products-bordered-grid-ins,
  .wd-products-with-bg:not(.products-bordered-grid),
  .wd-products-with-shadow:not(.products-bordered-grid)
) .wd-product.wd-hover-buttons-on-hover .wd-product-wrapper {
  background-color: var(--evov-card-bg);
}


/* ================================================================
   13. PLATFORM LABEL — frosted bar anchored to the image bottom

   Placement: position: absolute inside .wd-product-thumb.
   .wd-product-thumb has z-index: 2 (section 5 above), so the label
   always paints above .product-element-bottom. On hover, WoodMart's
   clip-path: inset(0 0 var(--wd-trans-h) 0) clips the thumb from
   the bottom — the label cleanly disappears as the image shrinks
   rather than being covered by the rising content section.
   ================================================================ */

.wd-product.wd-hover-buttons-on-hover .evov-platform-label {
  position: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  z-index:  3;   /* above hover image, below .wd-buttons (z-index 4+) */

  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  height:          var(--evov-platform-label-h);
  padding:         0 var(--evov-content-padding-x);

  background-color:        var(--evov-platform-label-bg);
  backdrop-filter:         blur(var(--evov-platform-label-blur));
  -webkit-backdrop-filter: blur(var(--evov-platform-label-blur));

  font-size:      12px !important;
  font-weight:    600;
  letter-spacing: 0.02em;
  color:          rgba(255, 255, 255, 0.92);
  pointer-events: none;

  /* -6px extends the label slightly below the thumb so it sits flush
     at the image/content seam. translateY(0) is explicit so the
     browser has a clean start value for the hover transition.    */
  transform:     translateY(0);
  margin-bottom: -6px;
  transition:    transform 0.3s ease;
}

@media (min-width: 1025px) {
  .wd-product.wd-hover-buttons-on-hover .wd-product-wrapper:hover .evov-platform-label {
    transform: translateY(calc(var(--wd-trans-h, var(--evov-cta-height)) * -1));
  }
}

.wd-product.wd-hover-buttons-on-hover .evov-platform-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  color:       rgba(255, 255, 255, 0.70);
}

/* Term image from pa_platform attribute */
.wd-product.wd-hover-buttons-on-hover .evov-platform-icon img {
  width:      18px;
  height:     18px;
  object-fit: contain;
  display:    block;
}

.wd-product.wd-hover-buttons-on-hover .evov-platform-name {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}


/* ================================================================
   14. REGION BADGE — compact text label below the product title

   No border. align-self: flex-start prevents it from stretching
   to full width when .product-element-bottom is a flex column.
   ================================================================ */

.wd-product.wd-hover-buttons-on-hover .evov-region-badge {
  align-self:     flex-start;   /* don't stretch in flex column */
  display:        inline-block;
  padding:        1px 0;
  margin-top:     2px;
  margin-bottom:  4px;
  font-size:      0.63rem;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--evov-region-badge-color);
  line-height:    1.5;
}


/* ================================================================
   15. MOBILE (≤ 1024px)
   WoodMart already handles the no-animation fallback.
   We strip expensive transitions on touch devices.
   ================================================================ */

@media (max-width: 1024px) {
  .wd-product.wd-hover-buttons-on-hover .wd-product-wrapper {
    transition: none;
  }
  /* Label is in normal flex flow — no mobile override needed.
     On mobile WoodMart renders the full content section visible,
     so the label naturally sits at the image/content junction.   */
}


/* ================================================================
   16. BUY NOW BUTTON — site-wide outlined style

   Applied to every .wd-buy-now-btn instance (single product page,
   sticky add-to-cart bar, quick-view, etc.).
   Add To Cart stays solid primary; Buy Now becomes a ghost/outlined
   button — transparent background, white text, 2 px primary border.

   Padding is reduced by 2 px each side to compensate for the border
   so the content box stays the same size as the adjacent buttons.
   ================================================================ */

.wd-buy-now-btn {
  background-color: transparent !important;
  color:            #fff !important;
  border:           2px solid var(--wd-primary-color, #ff0f7b) !important;
  box-shadow:       none !important;
  /* Compensate for the 2 px border so height/width stay consistent
     with the adjacent Add To Cart button.                         */
  padding:          3px 18px !important;
}

.wd-buy-now-btn:hover {
  background-color: var(--wd-primary-color, #ff0f7b) !important;
  color:            #fff !important;
}


/* ================================================================
   17. CAROUSEL SCROLLBAR — show/hide with arrows

   WoodMart's carousel arrows use:
     - opacity: 0 at rest   (on .wd-btn-arrow inside .wd-nav-arrows[class*="wd-hover"])
     - opacity: 1 on hover  (:is(.wd-carousel-container, .wd-products-element):hover)
   Both rules are inside @media (min-width: 1025px).

   The scrollbar track (.wd-nav-scroll) has transition: all .25s ease built in,
   so mirroring the same opacity + pointer-events pair gives a synchronised
   fade with zero extra JS.

   On mobile (≤ 1024px) there are no arrows at all — the scrollbar is the
   only scroll affordance so we leave it always visible there.
   ================================================================ */

@media (min-width: 1025px) {
  :is(.wd-carousel-container, .wd-products-element) .wd-nav-scroll {
    opacity:        0;
    pointer-events: none;
  }
  :is(.wd-carousel-container, .wd-products-element):hover .wd-nav-scroll {
    opacity:        1;
    pointer-events: unset;
  }
}


/* ================================================================
   18. DARK MODE — background color override

   How WoodMart's mode system works
   ─────────────────────────────────────────────────────────────
   Dark Version ON  → PHP adds `global-color-scheme-light` to <body>
                    → WoodMart's [class*="color-scheme-light"] rule fires
                    → --bgcolor-white: #0f0f0f  (dark background)

   Dark Version OFF → PHP adds `global-color-scheme-dark` to <body>
                    → WoodMart's .color-scheme-dark rule fires
                    → --bgcolor-white: #FFF  (light background)

   WoodMart's naming is intentionally inverted: "color-scheme-light"
   refers to the TEXT colour being light (white text on dark bg).

   We match the same attribute selector WoodMart uses, at the same
   specificity (0,1,0). Because our stylesheet loads later (priority 25
   vs WoodMart's 20) source-order wins — no !important needed.
   Light mode is unaffected; --bgcolor-white stays #FFF there.
   ─────────────────────────────────────────────────────────────
   ================================================================ */

[class*="color-scheme-light"] {
  --bgcolor-white: #121420;
}


/* ================================================================
   19. CLAMPED-TITLE TOOLTIP
   Floating div (#evov-title-tooltip) injected by pjax-nav.js.
   Shown only when scrollHeight > clientHeight confirms the title
   is actually truncated by -webkit-line-clamp.
   ================================================================ */

#evov-title-tooltip {
  position:       absolute;
  z-index:        9999;
  max-width:      240px;
  padding:        8px 12px;
  border-radius:  var(--wd-brd-radius, 6px);
  background:     var(--evov-card-bg, #141414);
  border:         1px solid var(--evov-card-border-hover, rgba(255, 255, 255, 0.16));
  color:          rgba(255, 255, 255, 0.90);
  font-size:      0.8rem;
  line-height:    1.45;
  word-break:     break-word;
  pointer-events: none;
  opacity:        0;
  visibility:     hidden;
  transition:     opacity 0.15s ease, visibility 0.15s;
  box-shadow:     0 6px 24px rgba(0, 0, 0, 0.55);
}

#evov-title-tooltip.evov-tt-visible {
  opacity:    1;
  visibility: visible;
}