/* ══ Woo Product Carousel & Grid v2 ══════════════════════════════════════════ */

/* ── Shared card styles ──────────────────────────────────────────────────────── */
.wpc-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    transition: transform .25s ease, box-shadow .25s ease;
}
.wpc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0,0,0,.18);
}
.wpc-img-wrap { width:100%; aspect-ratio:4/3; overflow:hidden; background:#f0f0f0; }
.wpc-img      { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.wpc-card:hover .wpc-img { transform:scale(1.04); }

.wpc-meta {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px 6px; font-size:12.5px; color:#555; flex-wrap:wrap; gap:6px;
}
.wpc-rating { display:flex; align-items:center; gap:4px; font-weight:500; color:#444; }
.wpc-star   { color:#f5a623; font-size:15px; }
.wpc-validity { font-size:12px; color:#666; white-space:nowrap; }

.wpc-title   { font-size:16px; font-weight:700; color:#0f1f4b; margin:4px 16px 8px; line-height:1.35; }
.wpc-excerpt { font-size:13px; color:#777; margin:0 16px 12px; line-height:1.5; flex:1; }

.wpc-footer { display:flex; align-items:center; justify-content:space-between; padding:0 16px; margin-top:auto; gap:10px; }
.wpc-price  { font-size:20px; font-weight:800; color:#0f1f4b; white-space:nowrap; }
.wpc-price ins { text-decoration:none; }

.wpc-btn {
    text-decoration:none !important;
    padding:10px 18px; border-radius:8px; font-size:13px; font-weight:600;
    white-space:nowrap; display:inline-block;
    transition:filter .2s ease, transform .2s ease;
}
.wpc-btn:hover { filter:brightness(1.15); transform:translateX(2px); }

/* ══ CAROUSEL ════════════════════════════════════════════════════════════════ */
.wpc-outer {
    position: relative;
    width: 100%;
    padding: 8px 0;
    box-sizing: border-box;
}

.wpc-wrapper {
    display: flex;
    align-items: center;
    background: transparent;
    box-sizing: border-box;
    width: 100%;
}

/* Arrows — outside on desktop */
.wpc-arrow {
    background: var(--wpc-arrow, #4ec9d4);
    color: #fff;
    border: none;
    border-radius: 10px;
    width: 48px; height: 48px; min-width: 48px;
    font-size: 30px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease, filter .2s ease;
    padding: 0; outline: none;
    position: absolute;
    top: 50%; z-index: 10;
}
.wpc-prev { left: -28px; transform: translateY(-50%); }
.wpc-next { right:-28px; transform: translateY(-50%); }
.wpc-arrow:hover        { filter:brightness(1.12); }
.wpc-prev:hover         { transform:translateY(-50%) scale(1.08); }
.wpc-next:hover         { transform:translateY(-50%) scale(1.08); }
.wpc-arrow:disabled     { opacity:.3; cursor:not-allowed; }
.wpc-arrow:disabled:hover { filter:none; transform:translateY(-50%) scale(1); }

.wpc-viewport {
    flex:1; overflow:hidden; min-width:0;
    padding: 8px 2px 14px;
}

.wpc-track {
    display:flex; gap:20px;
    /* transition set by JS */
    will-change: transform;
}

/* Carousel card width — set by JS via --wpc-visible */
.wpc-track .wpc-card { flex-shrink:0; }

/* ══ GRID ════════════════════════════════════════════════════════════════════ */
.wpc-grid-outer { width:100%; box-sizing:border-box; }

.wpc-grid-wrap {
    display: grid;
    grid-template-columns: repeat(var(--wpc-columns, 3), 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

/* Load More / Pagination */
.wpc-pagination { text-align:center; margin-top:8px; }

.wpc-loadmore-btn {
    background:#1a2f5e; color:#fff;
    border:none; border-radius:8px;
    padding:13px 36px; font-size:15px; font-weight:600;
    cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.wpc-loadmore-btn:hover    { background:#243f7e; transform:translateY(-2px); }
.wpc-loadmore-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.wpc-page-numbers { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.wpc-page-btn {
    background:#f0f0f0; color:#333; border:1px solid #ddd;
    border-radius:6px; width:40px; height:40px;
    font-size:14px; font-weight:600; cursor:pointer;
    transition:background .2s, color .2s;
}
.wpc-page-btn:hover  { background:#e0e0e0; }
.wpc-page-btn.active { background:#1a2f5e; color:#fff; border-color:#1a2f5e; }

/* Loading spinner overlay */
.wpc-loading {
    text-align:center; padding:24px;
    color:#888; font-size:14px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px) {
    .wpc-prev { left:4px; }
    .wpc-next { right:4px; }
    .wpc-wrapper { padding:0 50px; }
    .wpc-grid-wrap { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width:540px) {
    .wpc-arrow { display:none; }
    .wpc-wrapper { padding:0; }
    .wpc-viewport { overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
    .wpc-track .wpc-card { scroll-snap-align:start; }
    .wpc-grid-wrap { grid-template-columns: 1fr !important; }
}


/* ══ RELATED PRODUCTS ════════════════════════════════════════════════════════ */

.wpc-related-section {
    margin-top: 60px !important;
    padding-top: 40px !important;
    border-top: 1px solid #eee !important;
    clear: both !important;
}

.wpc-related-heading {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0f1f4b !important;
    margin-bottom: 28px !important;
}

/* Force grid — inline style on the element handles columns,
   this just ensures display:grid isn't overridden */
.wpc-related-grid {
    display: grid !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Nuke ALL WooCommerce float/width/column defaults on related section */
.wpc-related-section::before,
.wpc-related-section::after { display: none !important; content: none !important; }

.wpc-related-section .products {
    display: block !important;
    float: none !important;
    clear: both !important;
}

/* Related card reset — clear any WooCommerce li styling */
.wpc-related-card {
    float: none !important;
    width: 100% !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    display: flex !important;
    flex-direction: column !important;
}
.wpc-related-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.18) !important;
}

/* Image link */
.wpc-related-img-link {
    display: block !important;
    text-decoration: none !important;
}
.wpc-related-img-link img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Title link */
.wpc-related-card .wpc-title a {
    color: #0f1f4b !important;
    text-decoration: none !important;
    transition: color .2s ease;
}
.wpc-related-card .wpc-title a:hover { color: #4ec9d4 !important; }

/* Hide default WC add-to-cart / price inside related if they leak in */
.wpc-related-section .button.add_to_cart_button { display: none !important; }

/* ── Responsive — override inline grid-template-columns on small screens ── */
@media (max-width: 900px) {
    .wpc-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 540px) {
    .wpc-related-grid {
        grid-template-columns: 1fr !important;
    }
    .wpc-related-heading { font-size: 20px !important; }
}