/* ============================================================
   CHOOSE LIFE EXPRESS — Save (bookmark) button
   Loaded on catalogue and product pages only. Everything is
   prefixed .cle-save- so it cannot collide with the Sage theme's
   archive filters, sort controls, or hover-to-play layer.
   ============================================================ */

/* The tile and gallery are theme markup, so give them a positioning
   context without changing anything else about them. */
.woocommerce ul.products li.product,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .images {
   position: relative;
}

/* Single product page: the theme renders the button (and the media) inside
   .cle-single-media. Without a positioning context there, the button anchored
   to the whole main column and floated up by the breadcrumb. Making the media
   box the context pins it to the TOP CORNER OF THE VIDEO itself, matching the
   tiles on the category pages (Aug 2026 request). */
.cle-single-product .cle-single-media {
   position: relative;
}

/* IMPORTANT — the archive theme (archive-product.blade.php) runs a "nuclear
   hide of WC card chrome" rule:

     .cle-products-main ul.products li.product > *:not(a):not(picture):not(img)
        :not(.cle-product-overlay) { display: none !important; }

   Our button is a direct child of li.product and matches none of those, so it
   would be hidden outright on the archive. Re-assert it at higher specificity
   with the same !important weight. Scoped to .cle-save-btn, so nothing else
   the theme hides comes back. */
.cle-products-main ul.products li.product > .cle-save-btn,
.woocommerce ul.products li.product > .cle-save-btn {
   display: inline-flex !important;
}

.cle-save-btn {
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 6; /* above .cle-product-overlay (z-index 2) */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   padding: 0;
   margin: 0;
   border: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, .92);
   color: #1a1a1a;
   cursor: pointer;
   line-height: 0;
   box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
   transition: opacity .25s ease, background .15s ease, transform .15s ease, color .15s ease;
   -webkit-appearance: none;
   appearance: none;
}

.cle-save-btn:hover {
   background: #fff;
   transform: scale(1.05);
}

.cle-save-btn:focus-visible {
   outline: 2px solid #3d566e;
   outline-offset: 2px;
}

/* --- Reveal on hover (Etsy pattern) ----------------------------------
   Hidden until the tile is hovered. Guarded by (hover: hover) so touch
   devices — which have no hover state and would otherwise never reveal the
   button — always show it. This mirrors what the theme already does for its
   gallery arrows. An ALREADY SAVED item stays visible at all times, so a
   user can see what they saved without hunting tile by tile. */
@media (hover: hover) and (pointer: fine) {

   .woocommerce ul.products li.product .cle-save-btn {
      opacity: 0;
      pointer-events: none;
   }

   .woocommerce ul.products li.product:hover .cle-save-btn,
   .woocommerce ul.products li.product:focus-within .cle-save-btn,
   .woocommerce ul.products li.product .cle-save-btn.is-saved,
   .woocommerce ul.products li.product .cle-save-btn:focus-visible {
      opacity: 1;
      pointer-events: auto;
   }
}

/* Saved state: filled bookmark. */
.cle-save-btn.is-saved {
   background: #3d566e;
   color: #fff;
}

.cle-save-btn.is-saved .cle-save-ico path {
   fill: currentColor;
}

.cle-save-btn.is-busy {
   opacity: .55;
   pointer-events: none;
}

.cle-save-ico {
   display: block;
   pointer-events: none;
}

/* Sits slightly further in on the single product page, where the media
   is larger and has its own controls near the corner. */
.cle-save-btn--single {
   top: 14px;
   right: 14px;
   width: 40px;
   height: 40px;
}

/* --- Sign-in prompt --------------------------------------------------- */

.cle-save-modal {
   position: fixed;
   inset: 0;
   z-index: 999999;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   background: rgba(20, 30, 40, .55);
}

.cle-save-modal[hidden] {
   display: none;
}

.cle-save-modal__box {
   background: #fff;
   border-radius: 10px;
   padding: 26px 24px 22px;
   max-width: 380px;
   width: 100%;
   text-align: center;
   box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.cle-save-modal__title {
   font-size: 17px;
   font-weight: 700;
   color: #2c3e52;
   margin: 0 0 6px;
}

.cle-save-modal__text {
   font-size: 13px;
   line-height: 1.5;
   color: #6b7f8e;
   margin: 0 0 18px;
}

.cle-save-modal__actions {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.cle-save-modal__btn {
   display: block;
   padding: 10px 16px;
   border-radius: 6px;
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   border: 1px solid #3d566e;
   transition: opacity .15s;
}

.cle-save-modal__btn:hover {
   opacity: .88;
   text-decoration: none;
}

.cle-save-modal__btn--primary {
   background: #3d566e;
   color: #fff;
}

.cle-save-modal__btn--primary:hover,
.cle-save-modal__btn--primary:focus {
   color: #fff;
}

.cle-save-modal__btn--ghost {
   background: #fff;
   color: #3d566e;
}

.cle-save-modal__btn--ghost:hover,
.cle-save-modal__btn--ghost:focus {
   color: #3d566e;
}

.cle-save-modal__close {
   margin-top: 14px;
   background: none;
   border: 0;
   padding: 0;
   font-size: 12px;
   color: #9aaab5;
   cursor: pointer;
   text-decoration: underline;
}

/* --- Toast ------------------------------------------------------------ */

.cle-save-toast {
   position: fixed;
   left: 50%;
   bottom: 26px;
   transform: translateX(-50%);
   z-index: 999998;
   background: #2c3e52;
   color: #fff;
   font-size: 13px;
   padding: 10px 18px;
   border-radius: 6px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
   opacity: 0;
   transition: opacity .2s;
   pointer-events: none;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.cle-save-toast.is-on {
   opacity: 1;
}

@media (max-width: 600px) {
   .cle-save-btn {
      width: 30px;
      height: 30px;
      top: 8px;
      right: 8px;
   }

   .cle-save-btn--single {
      width: 36px;
      height: 36px;
   }
}