/* ============================================================
   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;
}

/* 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;
   }
}