/**
 * Wishlist Off-Canvas Styles
 *
 * Organized styles for the off-canvas wishlist functionality in Blocksy child theme.
 *
 * Table of Contents:
 * 1. Design Tokens
 * 2. Off-Canvas Panel Structure
 * 3. Unified Product Cards (Wishlist & Recommendations)
 * 4. Layout & Grid Systems
 * 5. Component-Specific Styles
 * 6. State Styles (Empty, Loading, Hover)
 * 7. Responsive Design
 * 8. Theme Integration & Overrides
 */

/* ========================================
   1. DESIGN TOKENS
   ======================================== */
:root {
    /* Colors */
    --wishlist-border-color: #cdd1d4;
    --wishlist-foreground: #4E594D;

    /* Layout */
    --wishlist-card-border-radius: 12px;
    --wishlist-card-padding: 0px;
    --wishlist-card-spacing: 16px;
    --wishlist-image-height: 192px;

    /* Typography */
    --wishlist-title-size: 18px;
    --wishlist-title-line-height: 28px;
    --wishlist-price-size: 16px;
    --wishlist-button-size: 13px;

    /* Spacing */
    --wishlist-panel-padding: 24px;
    --wishlist-card-details-padding: 16px;
    --wishlist-card-gap: 8px;
}

/* ========================================
   2. OFF-CANVAS PANEL STRUCTURE
   ======================================== */

/* Panel positioning and z-index */
#wishlist-offcanvas-panel {
    z-index: 999999 !important;
    max-width: 500px;
    width: 100%;
}

#wishlist-offcanvas-panel[data-behaviour="right-side"] {
    right: 0 !important;
    left: auto !important;
    margin: 0 0 0 auto !important; /* Override dialog centering */
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
}

#wishlist-offcanvas-panel[data-behaviour="left-side"] {
    left: 0 !important;
    right: auto !important;
    margin: 0 auto 0 0 !important; /* Override dialog centering */
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
}

/* Panel slide animations */
.ct-panel[data-behaviour="right-side"] {
    transform: translateX(100%) !important;
}

.ct-panel[data-behaviour="right-side"].active {
    transform: translateX(0) !important;
}

.ct-panel[data-behaviour="left-side"] {
    transform: translateX(-100%) !important;
}

.ct-panel[data-behaviour="left-side"].active {
    transform: translateX(0) !important;
}

/* Panel header */
#wishlist-offcanvas-panel .ct-panel-actions {
    padding: 12px 20px;
    border-bottom: none;
    margin-left: 0;
    margin-right: 0;
    position: relative;
}

/* Header border with left/right spacing */
#wishlist-offcanvas-panel .ct-panel-actions::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background-color: var(--wishlist-border-color);
}

#wishlist-offcanvas-panel .ct-panel-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Cardo', serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5em;
    color: #2D2D2D;
}

#wishlist-offcanvas-panel .wishlist-count {
    font-family: 'Cardo', serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5em;
    color: #2D2D2D;
}

/* Close button */
#wishlist-offcanvas-panel .ct-toggle-close {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 0;
    padding: 0 !important;
    background: transparent;
}

#wishlist-offcanvas-panel .ct-toggle-close svg {
    width: 24px;
    height: 24px;
    stroke: #2D2D2D;
    fill: none;
}

/* Panel heading icon */
#wishlist-offcanvas-panel .ct-panel-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

#wishlist-offcanvas-panel .ct-panel-heading-icon svg,
#wishlist-offcanvas-panel .ct-panel-heading-icon .ct-icon {
    width: 100%;
    height: 100%;
}

#wishlist-offcanvas-panel .ct-panel-heading-icon svg {
    fill: none;
}

/* Panel content background */
#wishlist-offcanvas-panel .ct-panel-content-inner {
    background: white;
    padding: 0;
}

#wishlist-offcanvas-panel .ct-panel-inner {
    background-color: white;
}

/* ========================================
   3. UNIFIED PRODUCT CARDS (WISHLIST & RECOMMENDATIONS)
   ======================================== */

/* Base card styling - applies to both wishlist items and recommendations */
.ct-offcanvas-wishlist .wishlist-item,
.wishlist-recommendations .recommendation-item {
    display: flex;
    flex-direction: column;
    padding: var(--wishlist-card-padding);
    border: 1px solid var(--wishlist-border-color);
    border-radius: var(--wishlist-card-border-radius);
    background: #fff;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Card hover effects - removed per design request */

/* Product images */
.ct-offcanvas-wishlist .wishlist-item-image,
.wishlist-recommendations .recommendation-item-image {
    width: 100%;
    height: var(--wishlist-image-height);
    overflow: hidden;
    background: #f8f8f8;
    border-radius: 0;
    margin-bottom: 0;
}

.ct-offcanvas-wishlist .wishlist-item-image img,
.wishlist-recommendations .recommendation-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ct-offcanvas-wishlist .wishlist-item-image:hover img,
.wishlist-recommendations .recommendation-item-image:hover img {
    transform: scale(1.05);
}

/* Product details container */
.ct-offcanvas-wishlist .wishlist-item-details,
.wishlist-recommendations .recommendation-item-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    padding: 16px 0 0 0;
    text-align: center;
}

/* Product titles */
.ct-offcanvas-wishlist .wishlist-item-title,
.wishlist-recommendations .recommendation-item-title {
    margin: 0;
    font-family: 'Cardo', serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #2D2D2D;
}

.ct-offcanvas-wishlist .wishlist-item-title a,
.wishlist-recommendations .recommendation-item-title a {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ct-offcanvas-wishlist .wishlist-item-title a:hover,
.wishlist-recommendations .recommendation-item-title a:hover {
    color: var(--theme-link-hover-color, #0073aa);
}

/* Product prices */
.ct-offcanvas-wishlist .wishlist-item-price,
.wishlist-recommendations .recommendation-item-price {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.125em;
    letter-spacing: 0.01em;
    color: #2D2D2D;
}

.ct-offcanvas-wishlist .wishlist-item-price .price,
.wishlist-recommendations .recommendation-item-price .price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Sale price styling */
.ct-offcanvas-wishlist .wishlist-item-price del,
.wishlist-recommendations .recommendation-item-price del {
    margin-right: 5px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.14em;
    color: #939395;
    text-decoration: line-through;
}

.ct-offcanvas-wishlist .wishlist-item-price ins,
.wishlist-recommendations .recommendation-item-price ins {
    text-decoration: none;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #2D2D2D;
}

.ct-offcanvas-wishlist .wishlist-item-price .woocommerce-Price-amount,
.wishlist-recommendations .recommendation-item-price .woocommerce-Price-amount {
    color: inherit;
}

/* Product action buttons */
.ct-offcanvas-wishlist .wishlist-item-actions,
.wishlist-recommendations .recommendation-item-actions {
    display: flex;
    gap: var(--wishlist-card-gap);
    margin-top: auto;
    justify-content: center;
}

.ct-offcanvas-wishlist .wishlist-item-actions .button,
.ct-offcanvas-wishlist .wishlist-item-actions .ct-wishlist-remove,
.wishlist-recommendations .recommendation-item-actions .button {
    padding: 10px 16px;
    font-size: var(--wishlist-button-size);
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    flex: 1;
    text-align: center;
}

/* Add to cart buttons */
.ct-offcanvas-wishlist .wishlist-item-actions .button,
.wishlist-recommendations .recommendation-item-actions .button {
    background: var(--theme-button-background, #333);
    color: var(--theme-button-text, #fff);
}

.ct-offcanvas-wishlist .wishlist-item-actions .button:hover,
.wishlist-recommendations .recommendation-item-actions .button:hover {
    background: var(--theme-button-hover-background, #555);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Remove buttons (wishlist only) */
.ct-offcanvas-wishlist .wishlist-item-actions .ct-wishlist-remove {
    padding: 0px 20px !important;
    background: transparent;
    color: #999;
    border: 1px solid var(--wishlist-border-color);
    font-weight: 500;
    flex: none !important;
    font-size: 14px !important;
}

.ct-offcanvas-wishlist .wishlist-item-actions .ct-wishlist-remove:hover {
    background: #f44336;
    color: #fff;
    border-color: #f44336;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

/* Loading state for buttons */
.ct-offcanvas-wishlist .wishlist-item-actions .button.loading,
.ct-offcanvas-wishlist .wishlist-item-actions .ct-wishlist-remove.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ========================================
   4. LAYOUT & GRID SYSTEMS
   ======================================== */

/* Main container */
.ct-offcanvas-wishlist {
    padding: var(--wishlist-panel-padding);
    width: 100%;
}

/* Wishlist items grid */
.ct-offcanvas-wishlist .wishlist-items {
    display: grid;
    gap: var(--wishlist-card-spacing);
    grid-template-columns: 1fr;
}

.ct-offcanvas-wishlist[data-columns="2"] .wishlist-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Ensure consistent card heights in grid */
.ct-offcanvas-wishlist[data-columns="2"] .wishlist-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Recommendations section */
.wishlist-recommendations {
    margin-top: 24px;
    padding-top: 0;
    border-top: none;
}

.wishlist-recommendations .recommendations-title {
    margin: 0 0 12px 0;
    padding: 0 0 12px 0;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55em;
    color: #2D2D2D;
    border-bottom: 1px solid #E4E5E7;
}

.wishlist-recommendations .recommendations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* ========================================
   5. COMPONENT-SPECIFIC STYLES
   ======================================== */

/* Guest notice */
.wishlist-guest-notice {
    margin: 24px 0 24px 0;
    padding: 0;
}

.wishlist-guest-notice .notice-text {
    margin: 0 0 12px 0;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.71em;
    color: #939395 !important;
}

.wishlist-guest-notice .notice-actions {
    margin: 0;
}

.wishlist-guest-notice .notice-actions a:before {
    content: '';
    display: none;
}

.wishlist-guest-notice .notice-actions .button.notice-signup {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: #2D2D2D;
    background: transparent;
    border: 1px solid #274832;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wishlist-guest-notice .notice-actions .button.notice-signup:hover {
    background: #274832;
    color: #fff;
    border-color: #274832;
}

/* ========================================
   6. STATE STYLES (EMPTY, LOADING, HOVER)
   ======================================== */

/* Empty wishlist state */
.ct-offcanvas-wishlist .wishlist-empty {
    text-align: center;
    padding: 40px 0 0;
    color: var(--theme-text-color, #666);
}

.ct-offcanvas-wishlist .wishlist-empty p {
    margin: 0 0 1rem 0;
    font-size: 16px;
    line-height: 1.5;
}

/* Empty wishlist state - center in grid container */
.ct-offcanvas-wishlist .wishlist-items .wishlist-empty {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.ct-offcanvas-wishlist .wishlist-empty .button {
    background-color: var(--theme-button-background);
    color: var(--theme-button-text);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    transition: all 0.3s ease;
}

.ct-offcanvas-wishlist .wishlist-empty .button:hover {
    background-color: var(--theme-button-background-hover);
    color: var(--theme-button-text-hover);
}

/* Empty state image styling */
.ct-offcanvas-wishlist .wishlist-empty-image {
    margin-bottom: 1.5rem;
}

.ct-offcanvas-wishlist .wishlist-empty-image img {
    max-width: 120px;
    max-height: 120px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Default empty state icon styling */
.ct-offcanvas-wishlist .wishlist-empty-icon {
    margin-bottom: 1.5rem;
    opacity: 0.6;
}

.ct-offcanvas-wishlist .wishlist-empty-icon svg {
    display: block;
    margin: 0 auto;
    color: var(--theme-text-color);
}

/* Legacy support for old class name */
.ct-offcanvas-wishlist .ct-wishlist-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--theme-text-color, #666);
}

.ct-offcanvas-wishlist .ct-wishlist-empty p {
    margin: 0;
    font-size: 16px;
}

/* Loading state */
.ct-offcanvas-wishlist .loading {
    position: relative;
    opacity: 0.6;
}

.ct-offcanvas-wishlist .loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--theme-button-background, #0073aa);
    border-radius: 50%;
    animation: wishlist-spin 1s linear infinite;
}

@keyframes wishlist-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ========================================
   7. RESPONSIVE DESIGN
   ======================================== */

/* Mobile adjustments for main layout */
@media (max-width: 768px) {
    .ct-offcanvas-wishlist {
        padding: 15px;
    }
}

/* Mobile adjustments for grid columns */
@media (max-width: 600px) {
    .ct-offcanvas-wishlist[data-columns="2"] .wishlist-items {
        gap: 16px;
    }

    .wishlist-guest-notice {
        margin: 12px 0;
        padding: 12px 0;
    }

    .wishlist-recommendations .recommendations-grid {
        gap: 12px;
    }
}

/* Mobile adjustments for product cards */
@media (max-width: 600px) {

    /* Card images */
    .ct-offcanvas-wishlist .wishlist-item-image,
    .wishlist-recommendations .recommendation-item-image {
        height: 150px;
    }

    /* Card titles */
    .ct-offcanvas-wishlist .wishlist-item-title,
    .wishlist-recommendations .recommendation-item-title {
        font-size: 14px;
    }

    /* Card prices */
    .ct-offcanvas-wishlist .wishlist-item-price,
    .wishlist-recommendations .recommendation-item-price {
        font-size: 14px;
        margin-bottom: 8px;
    }

    /* Card actions */
    .ct-offcanvas-wishlist .wishlist-item-actions,
    .wishlist-recommendations .recommendation-item-actions {
        flex-direction: column;
        gap: 8px;
        padding-top: 6px;
    }

    .ct-offcanvas-wishlist .wishlist-item-actions .button,
    .wishlist-recommendations .recommendation-item-actions .button {
        padding: 10px 14px;
        font-size: 12px;
        text-align: center;
    }
}

/* ========================================
   8. THEME INTEGRATION & OVERRIDES
   ======================================== */

/* Integration with Blocksy off-canvas system */
body[data-panel] #wishlist-offcanvas-panel.active {
    display: flex;
    max-width: 500px;
    width: 100%;
}

/* Show backdrop when any panel is open */
body[data-panel]::after {
    display: block !important;
}

/* Fallback styles for when Blocksy off-canvas is not available */
body.wishlist-offcanvas-open {
    overflow: hidden;
}

body.wishlist-offcanvas-open #wishlist-offcanvas-panel {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Dark mode support (system preference) */
@media (prefers-color-scheme: dark) {

    .ct-offcanvas-wishlist .wishlist-item,
    .wishlist-recommendations .recommendation-item {
        background: var(--theme-background-color, #2a2a2a);
        border-color: var(--theme-border-color, #444);
    }

    .ct-offcanvas-wishlist .wishlist-item-title a,
    .wishlist-recommendations .recommendation-item-title a,
    .ct-offcanvas-wishlist .wishlist-item-price,
    .wishlist-recommendations .recommendation-item-price {
        color: var(--theme-text-color, #fff);
    }

    .wishlist-recommendations {
        border-bottom-color: var(--theme-border-color, #444);
    }

    .wishlist-recommendations .recommendations-title {
        color: var(--theme-text-color, #fff);
    }
}

/* Force light cards override (design requirement) */
#wishlist-offcanvas-panel .ct-offcanvas-wishlist .wishlist-item,
#wishlist-offcanvas-panel .wishlist-recommendations .recommendation-item {
    background: #fff;
    border-color: var(--wishlist-border-color);
}

#wishlist-offcanvas-panel .wishlist-item-title a,
#wishlist-offcanvas-panel .wishlist-recommendations .recommendation-item-title a {
    color: #242424;
}

#wishlist-offcanvas-panel .wishlist-item-price,
#wishlist-offcanvas-panel .wishlist-recommendations .recommendation-item-price {
    color: var(--wishlist-foreground);
}

#wishlist-offcanvas-panel .wishlist-item-price .sale-price,
#wishlist-offcanvas-panel .wishlist-recommendations .recommendation-item-price .sale-price {
    display: inline;
}

/* ========================================
   9. ICON OVERRIDES (FiboSearch Pattern)
   Hide default Blocksy icons, replace with Figma SVGs via ::after pseudo-elements
   ======================================== */

/* Close button icon - hide default Blocksy X icon */
#wishlist-offcanvas-panel .ct-toggle-close svg {
    display: none !important;
}

/* Close button - add Figma circle with X icon via ::after */
#wishlist-offcanvas-panel .ct-toggle-close {
    position: relative;
    width: 24px !important;
    height: 24px !important;
}

#wishlist-offcanvas-panel .ct-toggle-close::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z' stroke='%232D2D2D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.17188 14.8299L14.8319 9.16992' stroke='%232D2D2D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.8319 14.8299L9.17188 9.16992' stroke='%232D2D2D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Heart icon - hide default Blocksy heart */
#wishlist-offcanvas-panel .ct-panel-heading-icon svg {
    display: none !important;
}

/* Heart icon - add Figma heart icon (24x24, 2px stroke) via ::after */
#wishlist-offcanvas-panel .ct-panel-heading-icon {
    position: relative;
    width: 24px !important;
    height: 24px !important;
}

#wishlist-offcanvas-panel .ct-panel-heading-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.582 20.298L11.5756 20.2946L11.5534 20.283C11.5345 20.273 11.5077 20.2587 11.4733 20.2402C11.4046 20.2031 11.3058 20.1489 11.1813 20.0785C10.9324 19.9376 10.58 19.7311 10.1584 19.4648C9.31711 18.9333 8.19121 18.1578 7.0609 17.1837C4.85181 15.2799 2.39844 12.4228 2.39844 9.0001C2.39844 6.01776 4.8161 3.6001 7.79844 3.6001C9.49572 3.6001 11.0089 4.38295 11.9984 5.60599C12.9879 4.38295 14.5012 3.6001 16.1984 3.6001C19.1808 3.6001 21.5984 6.01776 21.5984 9.0001C21.5984 12.4228 19.1451 15.2799 16.936 17.1837C15.8057 18.1578 14.6798 18.9333 13.8385 19.4648C13.4169 19.7311 13.0645 19.9376 12.8156 20.0785C12.6911 20.1489 12.5923 20.2031 12.5236 20.2402C12.4892 20.2587 12.4623 20.273 12.4435 20.283L12.4213 20.2946L12.4149 20.298L12.4128 20.299C12.1544 20.4361 11.8424 20.4361 11.5848 20.2994L11.582 20.298Z' stroke='%232D2D2D' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Sign Up button hover - user requested #E6DEBD background */
.wishlist-guest-notice .notice-actions .button.notice-signup:hover {
    background: #E6DEBD !important;
    color: #2D2D2D !important;
    border-color: #E6DEBD !important;
}

/* ========================================
   10. WISHLIST BACKDROP OVERLAY
   Migrated from Perfmatters snippet #30 (30-wishlist-backdrop-heart.php)
   ======================================== */

/**
 * Create overlay using CSS pseudo-element
 * - Fixed positioning covers entire viewport
 * - Semi-transparent black background (50% opacity)
 * - Hidden by default with opacity 0
 * - Smooth fade in/out transition (0.3s)
 * - Z-index 99999 to cover header (9999) but stay below panel (999999)
 * - pointer-events: none when hidden to avoid blocking clicks
 */
body::before {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5) !important;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
   z-index: 99999;
   pointer-events: none;
}

/**
 * Show overlay when wishlist panel is active
 * Uses CSS :has() selector to detect active wishlist dialog
 */
body:has([id*="wishlist"][role="dialog"].active)::before,
body:has([id*="wish-list"][role="dialog"].active)::before {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}
/* ========================================
   11. WISHLIST BUTTON ON RECOMMENDATION ITEMS
   Add heart/wishlist button to recommended products in offcanvas
   Matches archive page wishlist button styling
   ======================================== */

/* Position container for absolute button placement */
.wishlist-recommendations .recommendation-item-image {
    position: relative;
}

/* Wishlist button styling - matches archive .ct-wishlist-button-archive */
.wishlist-recommendations .recommendation-wishlist-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.wishlist-recommendations .recommendation-wishlist-btn:hover {
    background: transparent !important;
}

/* Icon container - matches archive sizing */
.wishlist-recommendations .recommendation-wishlist-btn .ct-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 21.5px;
}

/* SVG styling - default state (gray fill, matches archive) */
.wishlist-recommendations .recommendation-wishlist-btn svg {
    width: 100%;
    height: 100%;
    fill: #939395 !important;
    stroke: none;
}

.wishlist-recommendations .recommendation-wishlist-btn svg path {
    fill: #939395 !important;
    stroke: none;
}

.wishlist-recommendations .recommendation-wishlist-btn svg .ct-heart-fill {
    fill: #939395 !important;
}

/* Hover state - dark fill like archive */
.wishlist-recommendations .recommendation-wishlist-btn:hover svg,
.wishlist-recommendations .recommendation-wishlist-btn:hover svg path,
.wishlist-recommendations .recommendation-wishlist-btn:hover svg .ct-heart-fill {
    fill: #2D2D2D !important;
}

/* Active state (filled red heart when in wishlist) */
.wishlist-recommendations .recommendation-wishlist-btn[data-button-state="active"] svg,
.wishlist-recommendations .recommendation-wishlist-btn[data-button-state="active"] svg path,
.wishlist-recommendations .recommendation-wishlist-btn[data-button-state="active"] svg .ct-heart-fill {
    fill: #e74c3c !important;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .wishlist-recommendations .recommendation-wishlist-btn {
        width: 28px;
        height: 28px;
        top: 6px;
        right: 6px;
    }

    .wishlist-recommendations .recommendation-wishlist-btn .ct-icon-container {
        width: 20px;
        height: 18px;
    }
}