/* =============================================
   WL Category Products – wlcp.css
   Design: Clean minimal cards matching WooCommerce
   default archive style (as seen in screenshot)
   ============================================= */

/* ── Base / Reset ─────────────────────────── */
.wlcp-products,
.wlcp-slider-outer,
.wlcp-tabs-wrapper,
.wlcp-filter-wrapper {
    box-sizing: border-box;
    font-family: inherit;
}

/* ── GRID LAYOUT ──────────────────────────── */
/* Responsive column grid using CSS grid */
.wlcp-layout-grid {
    display: grid;
    gap: 1px;                      /* thin divider lines between cards */
    background: #e5e7eb;           /* acts as the divider color */
    border: 1px solid #e5e7eb;
}
.wlcp-layout-grid.wlcp-cols-1 { grid-template-columns: repeat(1, 1fr); }
.wlcp-layout-grid.wlcp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.wlcp-layout-grid.wlcp-cols-3 { grid-template-columns: repeat(3, 1fr); }
.wlcp-layout-grid.wlcp-cols-4 { grid-template-columns: repeat(4, 1fr); }
.wlcp-layout-grid.wlcp-cols-5 { grid-template-columns: repeat(5, 1fr); }
.wlcp-layout-grid.wlcp-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ── PRODUCT CARD – Grid & Slider ─────────── */
/* White card, no border-radius, clean look */
.wlcp-product-item {
    background: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 0 24px 0;
    transition: box-shadow .2s ease;
}
.wlcp-product-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    z-index: 1;
}

/* ── PRODUCT IMAGE ────────────────────────── */
/* Full-width square-ish image area, white bg */
.wlcp-product-image {
    position: relative;
    overflow: hidden;
    background: #fff;
    aspect-ratio: 1 / 1;           /* square crop like the screenshot */
}
.wlcp-product-image a {
    display: block;
    width: 100%;
    height: 100%;
}
.wlcp-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;            /* show full product, no crop */
    display: block;
    padding: 16px;                  /* breathing room around product image */
    transition: transform .3s ease;
}
.wlcp-product-item:hover .wlcp-product-image img {
    transform: scale(1.03);
}

/* ── ADD TO CART – hover overlay on image ─── */
/* Slides up from bottom on card hover */
.wlcp-hover-btn {
    position: absolute;
    bottom: -48px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .92);
    border-top: 1px solid #e5e7eb;
    transition: bottom .22s ease;
}
.wlcp-product-item:hover .wlcp-hover-btn {
    bottom: 0;
}
.wlcp-hover-btn .button,
.wlcp-hover-btn .add_to_cart_button {
    background: transparent;
    color: #111;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: color .2s;
    white-space: nowrap;
}
.wlcp-hover-btn .button:hover,
.wlcp-hover-btn .add_to_cart_button:hover {
    color: #666;
}

/* ── PRODUCT INFO (title, price, button) ──── */
.wlcp-product-info {
    padding: 12px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* Product title – normal weight, small size */
.wlcp-product-title {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}
.wlcp-product-title a {
    color: #111;
    text-decoration: none;
}
.wlcp-product-title a:hover {
    color: #555;
}

/* Price – slightly bolder, same size as title */
.wlcp-price {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin: 2px 0 0;
}
.wlcp-price del {
    color: #aaa;
    font-weight: 400;
    font-size: 13px;
    margin-right: 4px;
}
.wlcp-price ins {
    text-decoration: none;
}

/* Static Add to Cart button below price (visible always) */
.wlcp-product-info .button,
.wlcp-product-info .add_to_cart_button {
    display: inline-block;
    margin-top: 10px;
    background: transparent;
    color: #111;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color .2s;
    width: fit-content;
}
.wlcp-product-info .button:hover,
.wlcp-product-info .add_to_cart_button:hover {
    color: #666;
}

/* ── SALE BADGE ───────────────────────────── */
.wlcp-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    border-radius: 2px;
}
.wlcp-badge.wlcp-sale {
    background: #111;
    color: #fff;
}

/* ── STAR RATING ──────────────────────────── */
.wlcp-rating {
    margin: 2px 0;
}
.wlcp-rating .star-rating {
    display: inline-flex;
    font-size: 12px;
}

/* ── LIST LAYOUT ──────────────────────────── */
/* Horizontal card: image left, details right */
.wlcp-layout-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #e5e7eb;
    border: 1px solid #e5e7eb;
}
.wlcp-list-item {
    display: flex;
    gap: 0;
    align-items: stretch;
    background: #fff;
    padding: 0;
    transition: box-shadow .2s;
}
.wlcp-list-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    z-index: 1;
}
.wlcp-list-item .wlcp-product-image {
    flex: 0 0 200px;
    max-width: 200px;
    aspect-ratio: 1 / 1;
}
.wlcp-list-item .wlcp-product-info {
    flex: 1;
    padding: 20px 24px;
    justify-content: center;
}
.wlcp-list-item .wlcp-product-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
}
.wlcp-product-excerpt {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
    margin: 6px 0 0;
}

/* List layout – static visible button */
.wlcp-layout-list .button,
.wlcp-layout-list .add_to_cart_button {
    background: transparent;
    color: #111;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color .2s;
    display: inline-block;
}
.wlcp-layout-list .button:hover,
.wlcp-layout-list .add_to_cart_button:hover {
    color: #666;
}

/* ── SLIDER LAYOUT ────────────────────────── */
.wlcp-slider-outer {
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

/* Track: flex row, no gap (dividers via background) */
.wlcp-layout-slider {
    display: flex;
    gap: 0;
    background: #e5e7eb;
    transition: transform .4s ease;
}

/* Each slider card gets a 1px right gap acting as divider */
.wlcp-layout-slider .wlcp-product-item {
    border-right: 1px solid #e5e7eb;
    flex-shrink: 0;
    min-width: 0;
}

/* Slider column widths */
.wlcp-layout-slider.wlcp-cols-2 .wlcp-product-item { flex: 0 0 50%; }
.wlcp-layout-slider.wlcp-cols-3 .wlcp-product-item { flex: 0 0 33.333%; }
.wlcp-layout-slider.wlcp-cols-4 .wlcp-product-item { flex: 0 0 25%; }
.wlcp-layout-slider.wlcp-cols-5 .wlcp-product-item { flex: 0 0 20%; }
.wlcp-layout-slider.wlcp-cols-6 .wlcp-product-item { flex: 0 0 16.666%; }

/* Slider prev/next arrow buttons */
.wlcp-slider-prev,
.wlcp-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    transition: background .2s, color .2s;
    line-height: 1;
}
.wlcp-slider-prev { left: 10px; }
.wlcp-slider-next { right: 10px; }
.wlcp-slider-prev:hover,
.wlcp-slider-next:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* Slider dot indicators */
.wlcp-slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 0 4px;
}
.wlcp-slider-dots .wlcp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.wlcp-slider-dots .wlcp-dot.active {
    background: #111;
    transform: scale(1.4);
}

/* ── TABS LAYOUT ──────────────────────────── */
.wlcp-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0 0 0;
    padding: 0;
    border-bottom: 2px solid #e5e7eb;
}
.wlcp-tab-item {
    cursor: pointer;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: all .2s;
    white-space: nowrap;
    position: relative;
    bottom: -2px;              /* overlap border-bottom for active underline */
}

/* Underline style – active tab has solid bottom border */
.wlcp-tabs-style-underline .wlcp-tab-item {
    color: #999;
    border-bottom: 2px solid transparent;
}
.wlcp-tabs-style-underline .wlcp-tab-item:hover,
.wlcp-tabs-style-underline .wlcp-tab-item.wlcp-active {
    color: #111;
    border-bottom-color: #111;
}

/* Pills style */
.wlcp-tabs-style-pills .wlcp-tab-item {
    border-radius: 30px;
    background: #f3f4f6;
    color: #555;
    margin: 0 4px 8px;
    bottom: 0;
}
.wlcp-tabs-style-pills .wlcp-tab-item:hover,
.wlcp-tabs-style-pills .wlcp-tab-item.wlcp-active {
    background: #111;
    color: #fff;
}

/* Boxed style */
.wlcp-tabs-style-boxed .wlcp-tab-item {
    border: 1px solid #e5e7eb;
    border-bottom: none;
    background: #f9f9f9;
    color: #555;
    margin-right: 4px;
    bottom: 0;
    border-radius: 4px 4px 0 0;
}
.wlcp-tabs-style-boxed .wlcp-tab-item:hover,
.wlcp-tabs-style-boxed .wlcp-tab-item.wlcp-active {
    background: #fff;
    color: #111;
    border-color: #e5e7eb;
}

/* Tab content panes */
.wlcp-tabs-content {
    padding-top: 1px;
}
.wlcp-tab-pane { display: none; }
.wlcp-tab-pane.wlcp-active { display: block; }

/* Loading spinner inside tab pane */
.wlcp-tab-pane.wlcp-loading::after {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    margin: 48px auto;
    border: 3px solid #e5e7eb;
    border-top-color: #111;
    border-radius: 50%;
    animation: wlcp-spin .6s linear infinite;
}
@keyframes wlcp-spin { to { transform: rotate(360deg); } }

/* ── DROPDOWN FILTER BAR ──────────────────── */
.wlcp-filter-bar {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.wlcp-cat-dropdown {
    padding: 8px 14px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    min-width: 200px;
    transition: border-color .2s;
    appearance: auto;
}
.wlcp-cat-dropdown:focus {
    border-color: #111;
    outline: none;
}

/* ── PAGINATION ───────────────────────────── */
.wlcp-pagination {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 4px;
}
.wlcp-pagination .page-numbers {
    padding: 7px 12px;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    color: #111;
    font-size: 13px;
    transition: all .2s;
    border-radius: 2px;
}
.wlcp-pagination .page-numbers.current,
.wlcp-pagination .page-numbers:hover {
    background: #111;
    border-color: #111;
    color: #fff;
}

/* ── NO PRODUCTS MESSAGE ──────────────────── */
.wlcp-no-products {
    text-align: center;
    padding: 48px 0;
    color: #aaa;
    font-size: 14px;
}

/* ── RESPONSIVE BREAKPOINTS ───────────────── */

/* Tablet landscape: max 4 columns */
@media (max-width: 1200px) {
    .wlcp-layout-grid.wlcp-cols-6 { grid-template-columns: repeat(4, 1fr); }
    .wlcp-layout-grid.wlcp-cols-5 { grid-template-columns: repeat(4, 1fr); }
}

/* Tablet portrait: max 3 columns */
@media (max-width: 900px) {
    .wlcp-layout-grid.wlcp-cols-4,
    .wlcp-layout-grid.wlcp-cols-5,
    .wlcp-layout-grid.wlcp-cols-6 { grid-template-columns: repeat(3, 1fr); }

    .wlcp-list-item { flex-direction: column; }
    .wlcp-list-item .wlcp-product-image {
        flex: unset;
        max-width: 100%;
    }
}

/* Mobile: 2 columns grid, stacked list */
@media (max-width: 600px) {
    .wlcp-layout-grid.wlcp-cols-3,
    .wlcp-layout-grid.wlcp-cols-4,
    .wlcp-layout-grid.wlcp-cols-5,
    .wlcp-layout-grid.wlcp-cols-6 { grid-template-columns: repeat(2, 1fr); }

    .wlcp-tab-item { padding: 8px 14px; font-size: 11px; }
}

/* Small mobile: 1 column */
@media (max-width: 380px) {
    .wlcp-layout-grid { grid-template-columns: repeat(1, 1fr) !important; }
}