/*
 * The shared product card (resources/views/includes/frontend/home_product.blade.php).
 *
 * This lived in the card itself, inside @once <style>. @once printed the <style>
 * tag right after the FIRST card - i.e. inside the grid or slider holding the
 * cards. A Bootstrap row hides it, but the product page's "related products"
 * sliders do not: Slick wraps every child in a slide and forces
 * display:inline-block on it, so the stylesheet rendered as a 13,000px-tall
 * "card" made of CSS. Loaded once from layouts.front instead, it can never land
 * among the cards, and every page that shows a card already uses that layout.
 */

/* Brand label: quiet enough not to compete with the product name, but the
   uppercase tracking makes it scannable when comparing across vendors. */
.single-product .oya-card-brand {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #16a34a;
    margin-bottom: 2px;
}

/* Cleaner product card: subtle overlay icons + full-width Add to Cart below the image */
.single-product .oya-card-icons {
    position: absolute; top: 12px; right: 12px;
    display: flex; flex-direction: column; gap: 8px;
    opacity: 0; transform: translateX(6px); transition: all .25s ease; z-index: 3;
}
.single-product:hover .oya-card-icons { opacity: 1; transform: translateX(0); }
.single-product .oya-card-icons { top: 56px; } /* clear the wishlist button */
.oya-icon-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.95); box-shadow: 0 2px 8px rgba(0,0,0,.15);
    display: flex; align-items: center; justify-content: center; transition: all .2s ease;
}
.oya-icon-btn:hover { background: #16a34a; }
.oya-icon-btn:hover svg path { stroke: #fff; }
.oya-cart-action { margin-top: 10px; width: 100%; align-self: stretch; }
.oya-add-cart {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 10px 12px; border-radius: 10px;
    /* Deeper than the mid greens this used, because the label has to be
       readable on it. White measures 2.28:1 on #22c55e and 3.30:1 on
       #16a34a; the label is 14.4px bold, which needs 4.5:1 — the 3:1
       allowance only starts at 18.66px. From --g-600 down it passes, and
       this gradient is 5.02:1 at its lightest point.
       Gold was the other candidate and is not close: 1.23:1 on the old
       light end, 2.71:1 even on this one. Yellow on green is two colours
       of nearly the same brightness. */
    background: linear-gradient(135deg, var(--g-600, #15803d) 0%, var(--g-900, #14532d) 100%);
    /* The theme repaints every <a> with the shop's body colour unless the
       class is on the exclusion list in styles.php, which is where this
       control now is - so a plain declaration holds. */
    color: #fff;
    font-weight: 700; font-size: .9rem; text-decoration: none; border: none;
    transition: all .2s ease; cursor: pointer;
}
/* The basket glyph inherits from the anchor, so it needs saying too. */
.oya-add-cart i, .oya-add-cart svg { color: #fff; }
.oya-add-cart svg path { stroke: currentColor; }
.oya-add-cart:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20,83,45,.34); }
.oya-add-cart--disabled {
    background: #e5e7eb; color: #6b7280; cursor: not-allowed;
}
/* On touch devices the overlay icons can't be hovered, keep them visible but subtle */
@media (hover: none) {
    .single-product .oya-card-icons { opacity: 1; transform: none; }
    .oya-icon-btn { width: 32px; height: 32px; }
}

/* Plenty of catalogue rows point at images that were never uploaded, so a
   grid can be mostly placeholder. Shown at full size and full contrast,
   "NO IMAGE FOUND" shouts louder than the products; shrunk and faded into
   the tile it reads as a deliberate blank instead of a broken page. This
   lives on the shared card so every grid gets it: shop, category, vendor
   and home all had the same problem. */
.single-product .img-wrapper .product-img[src$="noimage.png"] {
    object-fit: contain;
    padding: 24%;
    opacity: .34;
    mix-blend-mode: multiply;
}