/* ================================================================== */
/* HOME PRODUCT GRID + CARD                                            */
/* Markup: resources/views/components/product-card.blade.php and the   */
/* product grids in resources/views/core/home.blade.php.               */
/* Plain CSS on purpose: the compiled Tailwind build has no responsive  */
/* grid utilities, so sm:/lg: column classes never applied.            */
/* ================================================================== */

/* ── Grid: two cards a row on phones, three on tablets, four on desktop ── */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 768px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1024px) {
    .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* ── Section heading: title left, View All right, dispatch note below ── */
.product-grid-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.product-grid-head__all {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    color: var(--mm-color-primary, #b20015) !important;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none !important;
}
.product-grid-head__all:hover { color: #8f0011 !important; }
.product-grid-head__all:focus-visible {
    outline: 2px solid var(--mm-color-primary, #b20015);
    outline-offset: 2px;
    border-radius: 4px;
}
.product-grid-head__sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

/* ── Card ── */
.pc {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    font-family: 'Inter', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pc:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
}
.pc a { text-decoration: none !important; }
@media (hover: none) {
    .pc:active { transform: scale(0.98); }
}

/* Image: one fixed height for every card, the picture shown whole. */
.pc__media {
    position: relative;
    height: 132px;
    background-color: #f8f9fb;
    border-bottom: 1px solid #f1f2f4;
}
.pc__media-link {
    display: block;
    width: 100%;
    height: 100%;
}
.pc__img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.pc:hover .pc__img { transform: scale(1.04); }
.pc__noimg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pc__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 3px 7px;
    border-radius: 4px;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    pointer-events: none;
}
.pc__badge--bestseller { background-color: #D92228; }
.pc__badge--new { background-color: #047857; }
.pc__badge--other { background-color: #111827; }

.pc__wish-form {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    margin: 0;
}
.pc__wish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 0; /* mobile.css gives every button a 36px minimum */
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.95);
    color: #374151;
    box-shadow: 0 1px 4px rgba(17, 24, 39, 0.15);
    cursor: pointer;
}
.pc__wish[aria-pressed="true"] { color: #D92228; }
.pc__wish:focus-visible {
    outline: 2px solid var(--mm-color-primary, #b20015);
    outline-offset: 2px;
}

/* "Quick View" hint over the picture, for mouse users only; the picture and
   title already link to the product, so it is not a separate control. */
.pc__quickview { display: none; }
@media (hover: hover) and (min-width: 768px) {
    .pc__quickview {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(17, 24, 39, 0.08);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .pc:hover .pc__quickview { opacity: 1; }
    .pc__quickview span {
        padding: 8px 16px;
        border-radius: 4px;
        background-color: #ffffff;
        color: #111827;
        font-size: 12px;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(17, 24, 39, 0.15);
    }
}

/* Details */
.pc__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 10px;
}
.pc__sku {
    overflow: hidden;
    color: #6b7280;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Two lines are always reserved, so titles of any length keep the rows level. */
.pc__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 36px;
    margin: 2px 0 0;
    overflow: hidden;
    color: #111827;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    overflow-wrap: anywhere;
}
.pc__title a { color: #111827 !important; }
.pc__title a:hover { color: #D92228 !important; }
.pc__title a:focus-visible {
    outline: 2px solid var(--mm-color-primary, #b20015);
    outline-offset: 1px;
    border-radius: 2px;
}
.pc__specs {
    min-height: 16px;
    margin-top: 4px;
    overflow: hidden;
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pc__specs-sep {
    padding: 0 4px;
    color: #d1d5db;
}

.pc__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 6px;
}
.pc__rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
}
.pc__stars { display: inline-flex; }
.pc__star { width: 12px; height: 12px; color: #e5e7eb; fill: currentColor; }
.pc__star--on { color: #f59e0b; }
.pc__star-half { position: relative; display: inline-flex; }
.pc__star-half .pc__star--on {
    position: absolute;
    inset: 0;
    clip-path: inset(0 50% 0 0);
}

.pc__stock {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}
.pc__stock--in { border-color: #a7f3d0; background-color: #ecfdf5; color: #047857; }
.pc__stock--low { border-color: #fde68a; background-color: #fffbeb; color: #b45309; }
.pc__stock--out { border-color: #fecaca; background-color: #fef2f2; color: #b91c1c; }
.pc__stock--made { border-color: #bfdbfe; background-color: #eff6ff; color: #1d4ed8; }

/* Options (products sold in sizes) */
.pc__variant { margin-top: 8px; }
.pc__variant-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 6px;
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pc__variant-count { color: #D92228; }
.pc__select {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #ffffff;
    color: #1f2937;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.pc__select:focus {
    outline: none;
    border-color: #D92228;
    box-shadow: 0 0 0 2px rgba(217, 34, 40, 0.2);
}

/* Price and buttons sit at the bottom, level across a row. */
.pc__buy {
    margin-top: auto;
    padding-top: 10px;
}
.pc__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 4px;
}
.pc__from {
    color: #6b7280;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.pc__amount {
    color: #111827;
    font-size: 16px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.pc__unit {
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
}

.pc__qty-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
}
.pc__stepper {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background-color: #ffffff;
}
.pc__stepper button {
    width: 32px;
    height: 32px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #4b5563;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.pc__stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.pc__stepper output {
    min-width: 30px;
    border-right: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
    color: #111827;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 32px;
    text-align: center;
}
.pc__total {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: #6b7280;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pc__total strong {
    color: #111827;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-transform: none;
}

.pc__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}
.pc__actions--single { grid-template-columns: minmax(0, 1fr); }
.pc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    height: 38px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.pc__btn svg { flex-shrink: 0; width: 15px; height: 15px; }
.pc__btn-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pc__btn:focus-visible {
    outline: 2px solid #111827;
    outline-offset: 2px;
}
.pc__btn--quote {
    border-color: #e5e7eb;
    background-color: #f3f4f6;
    color: #1f2937 !important;
}
.pc__btn--quote:hover { background-color: #e5e7eb; }
.pc__btn--add {
    background-color: #D92228;
    color: #ffffff !important;
}
.pc__btn--add:hover { background-color: #b20015; }
.pc__btn--add.is-busy { background-color: #b20015; cursor: wait; }
.pc__btn--add.is-added { background-color: #047857; }
.pc__btn--light {
    border-color: #d1d5db;
    background-color: #ffffff;
    color: #111827 !important;
}
.pc__btn--light:hover { background-color: #f9fafb; }
.pc__btn--dark {
    background-color: #1f2937;
    color: #ffffff !important;
}
.pc__btn[disabled]:not(.is-busy):not(.is-added),
.pc__btn--soldout {
    border-color: #e5e7eb;
    background-color: #f3f4f6;
    color: #6b7280 !important;
    cursor: not-allowed;
}
.pc__spin { animation: pc-spin 1s linear infinite; }
@keyframes pc-spin { to { transform: rotate(360deg); } }

/* On phones the card is half the screen wide: the size picker loses its
   heading (the select is labelled for screen readers), the stepper slims down
   and the "Total" label is read out but not shown, so the stepper and the line
   total share one row. */
@media (max-width: 767.98px) {
    .pc__variant-head { display: none; }
    .pc__stepper button { width: 28px; }
    .pc__stepper output { min-width: 26px; }
    .pc__total-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* The narrowest phones drop the button icons so both labels still fit. */
@media (max-width: 359.98px) {
    .pc__btn svg:not(.pc__spin) { display: none; }
}

@media (min-width: 768px) {
    .pc__media { height: 170px; }
    .pc__body { padding: 14px; }
    .pc__title { height: 40px; font-size: 14px; line-height: 20px; }
    .pc__specs { font-size: 12px; }
    .pc__amount { font-size: 18px; }
    .pc__btn { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .pc, .pc__img, .pc__quickview, .pc__btn { transition: none; }
    .pc:hover .pc__img { transform: none; }
    .pc__spin { animation: none; }
}