/* ==========================================================================
   WM WooCommerce — product grid and single-product widget styles
   ========================================================================== */

/* ── Products toolbar (sorting + result count) ───────────────────────────── */
.wm-products-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.wm-products-toolbar__count {
    flex: 1 1 auto;
    font-size: 0.9em;
    color: #666;
}

.wm-products-toolbar__sorting {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.wm-products-toolbar__sorting form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.wm-products-toolbar__label {
    white-space: nowrap;
    font-size: 0.875em;
}

.wm-products-sorting__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    padding: 8px 32px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875em;
    color: #333;
    background-color: #fff;
    min-width: 160px;
    line-height: 1.4;
}

.wm-products-sorting__select:focus {
    outline: none;
    border-color: #999;
}

/* ── Product grid ─────────────────────────────────────────────────────────── */
.wm-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wm-products__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px;
    opacity: 0.5;
}

/* ── Product card ─────────────────────────────────────────────────────────── */
.wm-product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* ── Card image ───────────────────────────────────────────────────────────── */
.wm-product-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
    flex-shrink: 0;
}

.wm-product-card__image a {
    display: block;
    width: 100%;
    height: 100%;
}

.wm-product-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.3s ease;
}

/* Hover scale — only when the grid wrapper carries the modifier class */
.wm-products--scale-hover .wm-product-card:hover .wm-product-card__image img {
    transform: scale(1.05);
}

/* ── Badges (standalone widget) ──────────────────────────────────────────── */
.wm-product-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex-wrap: wrap;
}

/* ── Badges (inside product card) ────────────────────────────────────────── */
.wm-product-card__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    z-index: 2;
    pointer-events: none;
}

.wm-product-card__badge {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.3;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.wm-product-card__badge--sale     { background: #e74c3c; color: #fff; }
.wm-product-card__badge--new      { background: #2ecc71; color: #fff; }
.wm-product-card__badge--hot      { background: #e67e22; color: #fff; }
.wm-product-card__badge--oos      { background: #95a5a6; color: #fff; }
.wm-product-card__badge--custom   { background: #3498db; color: #fff; }

/* ── Card body ────────────────────────────────────────────────────────────── */
.wm-product-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 16px;
    box-sizing: border-box;
}

/* ── Categories ───────────────────────────────────────────────────────────── */
.wm-product-card__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.wm-product-card__cat {
    font-size: 0.75em;
    text-decoration: none;
    opacity: 0.6;
    line-height: 1;
}

.wm-product-card__cat:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ── Title ────────────────────────────────────────────────────────────────── */
.wm-product-card__title {
    margin: 0 0 8px;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
}

.wm-product-card__title a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s ease;
}

.wm-product-card__title a:hover {
    opacity: 0.75;
}

/* ── Rating ───────────────────────────────────────────────────────────────── */
.wm-product-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.wm-product-card__rating .star-rating {
    font-size: 14px;
}

/* ── Price ────────────────────────────────────────────────────────────────── */
.wm-product-card__price {
    margin-top: auto;
}

.wm-product-card__price .price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
}

.wm-product-card__price .price del {
    opacity: 0.5;
    font-size: 0.9em;
}

.wm-product-card__price .price ins {
    text-decoration: none;
    font-weight: 700;
}

/* ── Actions / Add to Cart ────────────────────────────────────────────────── */
.wm-product-card__actions {
    margin-top: 12px;
}

.wm-product-card__atc {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── Product Gallery widget ───────────────────────────────────────────────── */

/* Bottom layout — stack main then thumbs vertically */
.wm-pg--bottom {
    display: flex;
    flex-direction: column;
}

/* Left / Right layout — thumbs + main side by side */
.wm-pg--left,
.wm-pg--right {
    display: flex;
    align-items: flex-start;
    gap: 0; /* gap controlled by margin via Elementor spacing control */
}

.wm-pg--right {
    flex-direction: row-reverse;
}

/* Main image area */
.wm-pg__main {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Each slide — only the active one is visible */
.wm-pg__slide {
    display: none;
}

.wm-pg__slide--active {
    display: block;
}

/* Main image wrapper — aspect ratio applied here via Elementor selectors */
.wm-pg__main-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.wm-pg__main-wrap img,
.wm-pg__main-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.wm-pg__lightbox {
    display: block;
    width: 100%;
    height: 100%;
}

/* Thumbnails strip */
.wm-pg__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wm-pg--left  .wm-pg__thumbs,
.wm-pg--right .wm-pg__thumbs {
    flex-direction: column;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* Individual thumbnail button */
.wm-pg__thumb {
    display: block;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    overflow: hidden;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.wm-pg__thumb:hover,
.wm-pg__thumb--active {
    opacity: 1;
}

.wm-pg__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}

/* ── Stack layout ─────────────────────────────────────────────────────────── */
.wm-pg--stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wm-pg__stack-img {
    width: 100%;
    overflow: hidden;
}

.wm-pg__stack-img img {
    display: block;
    width: 100%;
    height: auto;
}

.wm-pg__stack-img a {
    display: block;
}

/* ── Single product widgets: shared helpers ───────────────────────────────── */

/* Product Rating widget */
.wm-product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wm-product-rating__count {
    font-size: 0.85em;
    opacity: 0.65;
}

/* Product Meta widget */
.wm-product-meta {
    display: flex;
    flex-direction: column;
}

.wm-product-meta__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: baseline;
}

.wm-product-meta__label {
    font-weight: 600;
    white-space: nowrap;
}

/* Add to Cart wrap — ensures the form renders sensibly */
.wm-atc-wrap .quantity {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

.wm-atc-wrap form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Full-width button layout */
.wm-atc-wrap--full .single_add_to_cart_button {
    width: 100%;
}

/* Fill-row: qty + button together fill the available width */
.wm-atc-wrap--fill_row form.cart {
    width: 100%;
    flex-wrap: nowrap;
}

.wm-atc-wrap--fill_row .single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Quantity stepper ─────────────────────────────────────────────────────── */
.wm-qty-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden; /* clips child buttons when a border-radius pill is set */
}

.wm-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.wm-qty-btn:hover {
    background: #e0e0e0;
}

.wm-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Keep the input visually centred inside the wrap */
.wm-qty-wrap input.qty {
    text-align: center;
    flex-shrink: 0;
    /* hide browser spinners — stepper handles incrementing */
    -moz-appearance: textfield;
}

.wm-qty-wrap input.qty::-webkit-inner-spin-button,
.wm-qty-wrap input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Editor placeholder ───────────────────────────────────────────────────── */
.wm-wc-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    background: #f6f7f7;
    border: 1px dashed #ccc;
    text-align: center;
    color: #888;
}

.wm-wc-placeholder .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.wm-wc-placeholder p {
    margin: 0;
    font-size: 0.85em;
}