/* Cri-One store — Luma card polish for product tiles.
   Mirrors the /channel/ river-card treatment: clean white card, hairline
   border, subtle hover-lift shadow, small colored top-bar for accent.

   SAFETY: every rule scoped to body:not([class*='adminhtml-']) so the
   Magento admin UI is untouched. */

/* ── The product-tile card itself ─────────────────────────────── */
html body:not([class*='adminhtml-']) .product-item .product-item-info {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    padding: 16px !important;
    transition: box-shadow .18s ease,
                transform .12s ease,
                border-color .12s ease !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: inset 0 3px 0 #0a1e40;   /* navy top-bar — brand accent */
}

/* Hover — the Luma signature soft lift */
html body:not([class*='adminhtml-']) .product-item .product-item-info:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .10),
                inset 0 3px 0 #c2410c !important;   /* accent shifts to orange on hover */
    transform: translateY(-1px) !important;
    border-color: #d5d5d5 !important;
}

/* Space product-item name a touch below the image */
html body:not([class*='adminhtml-']) .product-item .product-item-name {
    margin-top: 12px !important;
    margin-bottom: 6px !important;
}

/* Price + "Add to cart" row — cleaner spacing */
html body:not([class*='adminhtml-']) .product-item .price-box {
    margin: 8px 0 12px !important;
}

/* Grid gap between cards — a little more breathing room */
html body:not([class*='adminhtml-']) .products.list.items.product-items {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
html body:not([class*='adminhtml-']) .products.list.items.product-items > li {
    margin: 0 !important;
    width: auto !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
}