/* part_card_glass.css — the repair checkout's part cards, upright, photo first
   (Luis, 2026-10-15).

   "make card vertical show only the item icon/photo and make them larger add
   a liquid glass style panel in the bottom on top of the item photo and place
   the price there only the price then when on hover a liquid glass over the
   whole item photo will slide from bottom and display the item name and the
   4 bottom small panels info like stock circle badge / grade / source /
   warranty and sku".

   THE SAME MARKUP, REARRANGED. Nothing in index.php's cards changed — the
   cart, the parts table (drawn from these cards), the stock updates and the
   warehouse cards all read the same elements they always did. Every rule is
   under .cards-glass on the grid, so taking that class off (or this sheet
   out) brings the old cards straight back; the old look is also saved in
   repairs/backups/2026-10-15-cards/.

   Layout: the card is 3:4, the photo fills it (multiplied onto the card so
   its white studio ground disappears, as on the model card), the price sits
   in a glass panel along the bottom. Hovering slides a sheet of glass up over
   the photo with the name, the stock ring and the four tiles on it; the
   price stays on top. Arrivals in the house curve; leaving is quicker. */

/* ── The grid: as many upright cards as fit, none narrower than 260px ── */
.products-grid.cards-glass {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

/* ── The card ── */
.cards-glass .product-card.gsm-card {
    position: relative;
    aspect-ratio: 3 / 4;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
}

/* A clean wash at the foot (Luis, 2026-10-16: "does the bottom gradient have
   a soft dark colour … it makes them look dirty; when the liquid glass pulls
   up it looks clean"). It did: the Apple theme mixes the house plum (out of
   stock) and slate blue (in stock) into white at 36%, and a dark muted colour
   mixed into white comes out grey, measured #ddd0d3 and #e1e7ef three
   quarters down. With the glass up the same spots read #f3dce2 and #ebf5fb.
   These washes are the same hues, lighter and clearer, chosen to land there
   at rest. The stock ring keeps --card-tint, the exact house colours. Beats
   apple.css's rule, which is !important. */
.cards-glass .product-card.card-restock,
.cards-glass .product-card.card-pop { --glass-wash: #eecfd8; }
.cards-glass .product-card.card-instock { --glass-wash: #dfecf8; }
body.apple-mode .products-glass-container .products-grid.cards-glass > .product-card.gsm-card:not(.ar-hcard):is(.card-instock, .card-restock, .card-pop),
.products-grid.cards-glass > .product-card.gsm-card:is(.card-instock, .card-restock, .card-pop) {
    background: linear-gradient(180deg,
                #ffffff 0%,
                #ffffff 34%,
                color-mix(in srgb, var(--glass-wash) 45%, #ffffff) 62%,
                var(--glass-wash) 100%) !important;
}

/* The photo fills it. The middle row stops being a two-column grid and
   becomes the whole card. */
.cards-glass .gsm-card .gsm-mid {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    margin: 0;
}
/* Bigger photos in the same card (Luis, 2026-10-15): the margins round the
   photo trimmed, and its foot runs a little under the price panel. */
.cards-glass .gsm-card .gsm-imgwrap {
    position: absolute;
    inset: 10px 8px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cards-glass .gsm-card .gsm-imgwrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: brightness(1.04) contrast(1.06);
    transition: transform .42s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1));
}

/* ── Liquid glass ── one recipe for the price panel and the hover sheet:
   a frosted, brightened backdrop, a light rim, a sheen across the top. */
.cards-glass .gsm-card::after {
    -webkit-backdrop-filter: blur(16px) saturate(185%) brightness(1.04);
    backdrop-filter: blur(16px) saturate(185%) brightness(1.04);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
                inset 0 -1px 0 rgba(255, 255, 255, .3),
                0 10px 26px rgba(30, 40, 60, .14);
}

/* The price, along the bottom: the stock at the left, the price beside it.
   No pill under it any more (Luis, 2026-10-16: "remove the price pill and
   make price engraved"); the figure is cut into the card instead (below).
   The same box as the capsule had, so nothing else on the card moves. */
.cards-glass .gsm-card .gsm-heroes { display: block; }
.cards-glass .gsm-card .gsm-hero {
    position: absolute;
    left: 78px;                /* 12 in, the 58px stock column, an 8px gap */
    right: 12px;
    bottom: 12px;
    z-index: 4;
    height: 58px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* The price with the MS cost under it as a plain line (Luis, 2026-10-16:
   "move the ms- just below the item price, remove the pill from the ms-").
   The dearest part is $429.00, seven characters, which fits at this size
   with room to spare. Centred in its space, the same room either side (it
   sat in a capsule then: "make pill even proportion from both sides"). A
   grid of one column as wide as the price, centred, with the MS line set to
   that column's right edge: the price and its cost read as one block. */
.cards-glass .gsm-card .gsm-hero {
    display: grid;
    /* In the card's bottom-right corner (Luis, 2026-10-16: "move price and ms
       to right corner of the card"), 18px in from the card's edge, level with
       the stock ring at the other corner. */
    justify-content: end;
    justify-items: end;
    align-content: center;
    row-gap: 3px;
    padding: 0 6px 0 0;
}
.cards-glass .gsm-card .gsm-hero b { font-size: 27px; line-height: 1; white-space: nowrap; }
/* Engraved: the house engrave (apple.css's --ap-engrave-filter), a dark edge
   up-left and a light one down-right, the reverse of the raised figure the
   old cards drew (part_card.css). Light catching the lower lip of a groove is
   what reads as cut in. The blue fill stays: it is still the price. */
.cards-glass .gsm-card .gsm-hero b.product-price {
    filter: var(--ap-engrave-filter,
                drop-shadow(-1px -1px 1px rgba(0, 0, 0, .26))
                drop-shadow(1px 1px 1px rgba(255, 255, 255, .95)));
}
/* A warehouse card's "Check price" is eleven characters to a price's seven
   or eight; at the 30px part_card.css forces (with !important) it ran past
   the capsule's round end. Sized to the room beside the ring. */
.cards-glass .product-card.gsm-card.card-wh .gsm-hero b.product-price.wh-price { font-size: 19px !important; }
.cards-glass .gsm-card .gsm-cost-chip {
    flex: none;
    margin: 0;
    padding: 0;
    gap: 4px;
    background: none;
    box-shadow: none;
    font-size: 11px;
    line-height: 1;
}
.cards-glass .gsm-card .gsm-cost-chip svg { width: 11px; height: 11px; }

/* The stock, always showing, left of the price: the dashed ring with its
   "IN STOCK" (a warehouse card: "AVAILABLE") under it, on no pill of its own
   (Luis, 2026-10-16: "remove the round pill and add the In Stock label
   below"). The same 58px column and height as before, so the price capsule
   does not move. */
.cards-glass .gsm-card .gsm-stock {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 5;
    width: 58px;
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
}
.cards-glass .gsm-card .gsm-stock-dot {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, .55);
}
.cards-glass .gsm-card .gsm-stock-dot b { font-size: 16px; }
/* The label as a plain line, like the MS cost under the price: the chip
   part_card.css gives it is taken off. */
.cards-glass .gsm-card .gsm-stock-label {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    font-size: 9px;
    line-height: 1;
    letter-spacing: .06em;
    white-space: nowrap;
}
/* iPad mode sizes the ring up for the old cards (ipad.css); in the panel it
   stays the size the panel has room for. */
html.ipad-mode .cards-glass .gsm-card .gsm-stock-dot { width: 38px; height: 38px; }
html.ipad-mode .cards-glass .gsm-card .gsm-stock-dot b { font-size: 16px; }

/* ── The sheet that slides up on hover ──
   Liquid glass, not frosted (Luis, 2026-10-16: "make the pull-up panel more
   liquid glass instead of the frosted glass it has now"). Clear enough that
   the part shows through it: a light blur that only softens, colour lifted
   a little, and almost no white of its own. What says "glass" is the light:
   a bright rim, a sheen across the top as if lit from above, and edges that
   catch more light than the middle, the way a thick clear pane does. The
   tiles keep their own backing, so they still read on it. */
.cards-glass .gsm-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    border-width: 0;
    background:
        radial-gradient(120% 55% at 50% 0%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .14) 100%);
    -webkit-backdrop-filter: blur(3px) saturate(190%) brightness(1.06) contrast(1.04);
    backdrop-filter: blur(3px) saturate(190%) brightness(1.06) contrast(1.04);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95),
                inset 0 0 0 1px rgba(255, 255, 255, .45),
                inset 0 0 22px rgba(255, 255, 255, .38),
                inset 0 -22px 34px -26px rgba(255, 255, 255, .7);
    transform: translateY(101%);
    transition: transform .26s cubic-bezier(.4, 0, 1, 1);
    pointer-events: none;
}
.cards-glass .gsm-card:hover::after {
    transform: translateY(0);
    transition: transform .42s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1));
}

/* What the sheet carries: hidden until it arrives, then in from below. */
.cards-glass .gsm-card .gsm-tiles {
    position: absolute;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .2s ease;
}
.cards-glass .gsm-card:hover .gsm-tiles {
    opacity: 1;
    transition: opacity .3s ease, transform .42s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1));
}

/* The name, top middle, always showing, on glass that fades away down the
   photo (Luis, 2026-10-16: first "add a subtle glass overlay and place the
   name on top of it", then "it looks like a pill … i want it to be like a
   fading glass overlay"). No edge and no corners of its own: frosted and
   brightest at the card's top edge, thinning to clear photo below the name,
   the way a photo card's caption sits on a fade. Over the hover sheet too, so
   it stays put while the sheet comes up under it. The photo keeps its size. */
.cards-glass .gsm-card .gsm-head {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px 16px 42px;
    justify-content: center;
    pointer-events: none;
    background: none;
    border: 0;
    box-shadow: none;
}
/* The glass is its own layer, behind the name: the fade is a mask, and a mask
   on the name's own box would fade the words with it. The blur thins out
   along the same mask, so the frosting dissolves instead of stopping at a
   line. */
.cards-glass .gsm-card .gsm-head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
                rgba(255, 255, 255, .78) 0%,
                rgba(255, 255, 255, .55) 40%,
                rgba(255, 255, 255, .18) 75%,
                rgba(255, 255, 255, 0) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
.cards-glass .gsm-card .gsm-title {
    font-size: 13px;
    line-height: 1.22;
    text-align: center;
    -webkit-line-clamp: 2;
    min-height: 0;
    margin: 0;
    /* Near-black ink (Luis, 2026-10-16: "for the items labels use this color
       #161618"). The old cards paint the name with a grey gradient through
       the letters (part_card.css), so the fill is replaced, not just the colour. */
    color: #161618;
    background: none;
    -webkit-text-fill-color: #161618;
}

/* The four tiles, two by two, above the price panel. */
.cards-glass .gsm-card .gsm-tiles {
    left: 12px;
    right: 12px;
    bottom: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    transform: translateY(18px);
}
.cards-glass .gsm-card:hover .gsm-tiles { transform: none; transition-delay: .14s; }
.cards-glass .gsm-card .gsm-tile {
    justify-content: center;
    min-height: 46px;
    padding: 5px 4px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(30, 40, 60, .08);
}
.cards-glass .gsm-card .gsm-tile-sku b { font-size: 12px; }

/* Not on the new card: the warranty line along the foot. */
.cards-glass .gsm-card .gsm-foot { display: none; }

/* The photo eases back a touch as the sheet comes up. */
.cards-glass .gsm-card:hover .gsm-imgwrap img { transform: scale(.94); }

/* The Check Warehouse tile keeps the cards' shape. */
.products-grid.cards-glass .wh-tile { aspect-ratio: 3 / 4; min-height: 0; border-radius: 24px; }

@media (prefers-reduced-motion: reduce) {
    .cards-glass .gsm-card::after,
    .cards-glass .gsm-card .gsm-head,
    .cards-glass .gsm-card .gsm-tiles,
    .cards-glass .gsm-card .gsm-imgwrap img { transition: opacity .15s ease; transform: none; }
}