/* Font face moved to csl_design_tokens.css */

/* Fix Alignment for Product Cards */
.card.h-100 {
    border: 1px solid #ebedef;
    transition: transform 0.2s;
}

.card.h-100:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Force image to fixed height so cards align */
.card-img-top {
    height: 250px;       /* Fixed height for all images */
    width: 100%;         /* Full width of the card */
    object-fit: contain; /* Ensures the whole shoe is visible without cropping */
    padding: 15px;       /* Adds some breathing room inside the card */
    background-color: #fff;
}

/* Ensure the card body fills remaining space */
.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Prevent long titles from breaking layout */
.card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    min-height: 40px; /* Reserve space for 2 lines of text */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   Product Action Buttons (Wishlist & Compare)
   ======================================== */

.product-action-buttons {
    flex-shrink: 0;
}

.product-action-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
}

.product-action-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.product-action-buttons .btn .icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
}

.product-action-buttons .btn .btn-label {
    white-space: nowrap;
}

/* Wishlist Button */
.btn-wishlist {
    color: #e74c3c;
    border-color: #e74c3c;
}

.btn-wishlist:hover {
    background: #fff5f5;
    border-color: #c0392b;
}

.btn-wishlist.active,
.btn-wishlist.wished {
    background: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
}

.btn-wishlist.active:hover,
.btn-wishlist.wished:hover {
    background: #c0392b;
}

.btn-wishlist .icon use.wished {
    fill: currentColor;
}

.btn-wishlist .icon use.not-wished {
    fill: none;
}

/* Compare Button */
.btn-compare {
    color: #3498db;
    border-color: #3498db;
}

.btn-compare:hover {
    background: #f0f8ff;
    border-color: #2980b9;
}

.btn-compare.active {
    background: #3498db;
    color: #fff;
    border-color: #3498db;
}

.btn-compare.active:hover {
    background: #2980b9;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .product-action-buttons .btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    .product-action-buttons .btn .btn-label {
        display: none;
    }

    .product-action-buttons .btn .icon {
        margin-right: 0;
    }
}

/* ========================================
   Compare Floating Widget
   ======================================== */

.compare-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 1050;
    max-width: 350px;
    min-width: 300px;
    overflow: hidden;
    display: none;
}

.compare-widget.show {
    display: block;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.compare-widget-header {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.compare-widget-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.compare-widget-header .compare-count {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
}

.compare-widget-body {
    padding: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.compare-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fafafa;
}

.compare-item:last-child {
    margin-bottom: 0;
}

.compare-item-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    margin-right: 10px;
}

.compare-item-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-item-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.compare-item-remove:hover {
    background: #fee;
    color: #e74c3c;
}

.compare-widget-footer {
    padding: 12px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 8px;
}

.compare-widget-footer .btn {
    flex: 1;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
}

.compare-widget-footer .btn-primary {
    background: #3498db;
    color: #fff;
    border: none;
}

.compare-widget-footer .btn-primary:hover {
    background: #2980b9;
}

.compare-widget-footer .btn-outline {
    background: #fff;
    color: #666;
    border: 1px solid #ddd;
}

.compare-widget-footer .btn-outline:hover {
    background: #f5f5f5;
}

/* Compare Page Styles */
.compare-page-container {
    padding: 30px 0;
}

.compare-table-wrapper {
    overflow-x: auto;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.compare-table th,
.compare-table td {
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.compare-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #333;
    min-width: 200px;
}

.compare-table th:first-child {
    text-align: left;
    background: #fff;
    font-weight: 500;
    color: #666;
    min-width: 150px;
}

.compare-table tbody tr:hover {
    background: #fafafa;
}

.compare-product-image {
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin-bottom: 12px;
}

.compare-product-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.compare-product-name a {
    color: #333;
    text-decoration: none;
}

.compare-product-name a:hover {
    color: #3498db;
}

.compare-remove-btn {
    background: #fee;
    color: #e74c3c;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.compare-remove-btn:hover {
    background: #e74c3c;
    color: #fff;
}

.compare-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.compare-empty-state img {
    max-width: 200px;
    margin-bottom: 20px;
}

.compare-empty-state h3 {
    color: #333;
    margin-bottom: 10px;
}

.compare-empty-state p {
    color: #666;
    margin-bottom: 20px;
}

/* Compare Button on Product Cards */
.compare-card-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    padding: 0;
}

.compare-card-btn .icon {
    width: 18px;
    height: 18px;
    stroke: #3498db;
}

.compare-card-btn:hover {
    background: #3498db;
    border-color: #3498db;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.compare-card-btn:hover .icon {
    stroke: #fff;
}

.compare-card-btn.active {
    background: #3498db;
    border-color: #3498db;
}

.compare-card-btn.active .icon {
    stroke: #fff;
}

.compare-btn-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover .compare-btn-overlay,
.card.h-100:hover .compare-btn-overlay {
    opacity: 1;
}

.compare-card-btn.active.compare-btn-overlay {
    opacity: 1;
}

/* Adjust card image container for overlay button */
.card .card-img-container {
    position: relative;
}

/* Compare icon in navbar (optional) */
.compare-nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px;
    color: #333;
    cursor: pointer;
}

.compare-nav-icon .compare-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #3498db;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* ========================================
   Wishlist Icon in Navbar
   ======================================== */

/* Ensure wishlist icon shows when not hidden */
.navbar .wishlist-icon {
    position: relative;
}

.navbar .wishlist-icon .nav-link {
    position: relative;
    padding: 0.5rem;
}

.navbar .wishlist-icon .icon {
    color: #e74c3c;
    fill: none;
    stroke: currentColor;
}

.navbar .wishlist-icon:hover .icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Badge styling - wishlist (compact circle) */
.navbar .wishlist-icon .shopping-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 14px;
    height: 14px;
    font-size: 9px;
    font-weight: 600;
    line-height: 14px;
    padding: 0 3px;
    border-radius: 50%;
    background: #e74c3c;
    color: #fff;
}

/* Cart badge - pill shape to fit count + total */
.navbar .cart-icon .shopping-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    min-width: auto;
    height: auto;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    padding: 3px 8px;
    border-radius: 12px;
    background: #e74c3c;
    color: #fff;
    white-space: nowrap;
}

/* Animation when item added */
.navbar .wishlist-icon.cart-animate {
    animation: heartBeat 0.5s ease;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ========================================
   Product Badges
   ======================================== */

.product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: calc(100% - 60px); /* Leave room for wishlist/compare buttons */
}

.product-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Best Seller - Gold/Amber */
.badge-bestseller {
    background: linear-gradient(135deg, #c9a227, #a88a1e);
    color: #fff;
}

/* New Arrival - Fresh Green */
.badge-new {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: #fff;
}

/* Limited Stock - Urgent Orange */
.badge-limited {
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: #fff;
}

/* Coming Soon - Blue */
.badge-coming-soon {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
}

/* Sale - Red */
.badge-sale {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
}

/* Featured - Teal (WCAG AA compliant) */
.badge-featured {
    background: linear-gradient(135deg, #138370, #0a4f43);
    color: #fff;
}

/* Custom Badge - Purple/Brand */
.badge-custom {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
}

/* Top Rated - Vivid Purple */
.badge-toprated {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #fff;
}

/* Hover effects */
.product-badge:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-badges {
        top: 8px;
        left: 8px;
        gap: 4px;
    }

    .product-badge {
        padding: 3px 8px;
        font-size: 10px;
    }
}

/* Animation for badges */
@keyframes badgePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.badge-limited {
    animation: badgePulse 2s ease-in-out infinite;
}

/* Badge stacking - limit to 3 visible */
.product-badges .product-badge:nth-child(n+4) {
    display: none;
}

/* ----------------------------------------------------------------------------
   Backend #9 / Phase T — List-view badge sizing overrides
   ----------------------------------------------------------------------------
   /all-products List view renders product cards in a narrow .col-2 thumbnail
   (~120-130px usable width after Bootstrap padding) vs the larger Grid card.
   At the default badge size (4px 10px padding, 11px font), labels like
   "Featured" or "Best Seller" would clip or wrap inside .list-image.

   These rules shrink badges in list view only and reposition them to top:4px/
   left:4px so they clear webshop's wishlist heart (.like-action-list, anchored
   at top:0/left:20px, visible on row hover/focus-within).

   No .list-image { position: relative } rule is needed — Bootstrap 4.6 already
   sets `position: relative` on all .col-* classes, so the absolutely-positioned
   .product-badges anchors to the .list-image cell automatically.
   ---------------------------------------------------------------------------- */
.list-image .product-badges {
    top: 4px;
    left: 4px;
    gap: 3px;
    max-width: calc(100% - 36px);
}

.list-image .product-badge {
    padding: 2px 6px;
    font-size: 9px;
    letter-spacing: 0.3px;
}

/* ----------------------------------------------------------------------------
   Session C — Tile-level wishlist heart (.csl-tile-heart)

   Renders on /all-products tiles (grid + list), homepage product cards, and
   PDP "You May Also Like" related cards. Click handler in tile_wishlist.js.

   Hearts sit inside <a> link wrappers on every surface — the JS handler does
   preventDefault + stopImmediatePropagation. CSS adds pointer-events:auto so
   parent .product-card-link doesn't swallow the click.

   Parent containers always have position:relative either explicitly
   (.product-image, .related-card-image, .card-img-container) or implicitly
   via Bootstrap (.col-* per ERP-084), so position:absolute anchors correctly.

   Webshop's native .like-action / .like-action-list hearts are dead today
   (backend hardcodes has_variants=1 → !item.has_variants gate is false).
   Belt-and-suspenders: hide them in tile contexts so a future backend change
   doesn't render duplicate hearts (auditor C5).
   ---------------------------------------------------------------------------- */
.csl-tile-heart {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    z-index: 2;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.csl-tile-heart:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    background: #fff5f5;
}

.csl-tile-heart:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.csl-tile-heart svg {
    width: 18px;
    height: 18px;
    stroke: #6b7280;
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
}

.csl-tile-heart.is-wished {
    background: #fff;
    border-color: rgba(231, 76, 60, 0.25);
}

.csl-tile-heart.is-wished svg {
    stroke: #e74c3c;
    fill: #e74c3c;
}

.csl-tile-heart.is-wished:hover {
    background: #fff5f5;
}

.csl-tile-heart.is-disabled-guest {
    opacity: 0.45;
    cursor: not-allowed;
}

.csl-tile-heart:disabled {
    cursor: progress;
}

/* WCAG 2.5.5 minimum tap target — bump to 36px on small screens. */
@media (max-width: 480px) {
    .csl-tile-heart {
        width: 36px;
        height: 36px;
    }
    .csl-tile-heart svg {
        width: 20px;
        height: 20px;
    }
}

/* Hide webshop's native .like-action / .like-action-list in tile contexts.
   These surfaces are now owned by .csl-tile-heart. (Auditor C5.) */
.card-img-container .like-action,
.col-2.list-image .like-action-list {
    display: none !important;
}