/*
 * Product grid corrections.
 *
 * WHY THIS FILE EXISTS AT ALL, rather than the two rules living in local.css where they belong:
 *
 * local.css is linked by the theme's layout with no version query, and nginx serves /skin with
 * `expires max` - Thu 31 Dec 2037, max-age=315360000. So a browser that has fetched local.css once
 * never asks for it again, and Cloudflare caches it at the edge on the same terms. When this fix was
 * first made in local.css the change was correct, deployed, and completely undeliverable: the edge was
 * still handing out a copy whose Last-Modified read 11 Feb 2021, cf-cache-status HIT, age 27 days.
 *
 * Hipno Online's own stylesheets - hipno-cart.css, hipno-player.css, hipno-subscriber.css - are all
 * emitted with ?v=<mtime> for exactly this reason, and they load last, after the vendor theme. So the
 * override goes here and arrives under a url that changes whenever the file does. That is the existing
 * convention in this codebase rather than a new one, and it needs no cache purge to ship.
 *
 * Emitted by template hipnoonline/grid-css.phtml, attached to before_body_end in the theme's local.xml.
 */

/*
 * THE BUG: hovering a product tile overflowed onto the product below it.
 *
 * Each tile holds two cards - `.regular`, which is what you see, and `.hover`, the panel revealed on
 * hover. The panel is position:absolute at top:0 inside the tile, so it is out of flow and the tile's
 * height comes from `.regular` alone. But the panel carries MORE than the resting card does: a ratings
 * row, a bordered button strip, and a centred product name that wraps to an extra line when the name
 * is long. It is therefore always taller than the tile it lives in, and every pixel of the difference
 * lands on whatever is underneath - the next row of products.
 *
 * The only thing absorbing that was margin-bottom: 30px. Measured by triggering the hover on every
 * tile on the homepage:
 *
 *     1366 / 1440 / 1600 / 1920px    panel overhangs its tile by 62px    clearance 30px
 *     worst overlap                  8640px2, tile 3 over tile 7
 *
 * 72px is the measured 62 plus room for a name one line longer than anything in the catalogue today.
 *
 * Two things made this look intermittent and cost a wrong diagnosis first time round. It depends which
 * tile you hover - a short name overhangs by only 19px and fits inside 30px, so hovering the first tile
 * on the page never reproduces it. And it depends on width, because a wider tile wraps the name
 * differently.
 *
 * min-width: 963px because script.js sets `mobile = (sw > breakpoint)` with breakpoint = 962, and the
 * mouseenter handler returns immediately when mobile - so below 963 there is no panel to make room for.
 * That matters more than it looks: responsive.css sets its own 24px margin for 768-979px, a band which
 * OVERLAPS the 963-979 range where the panel is live, so the override has to reach into it. This file
 * loads after responsive.css, so it does.
 *
 * A BASELINE, NOT THE ANSWER. 72px was measured on dev; production measures 93px, because the overhang
 * depends on which rows the panel has - a ratings row, a compare strip, 21px of dead margin on a
 * zero-height ajax_loading span - and not on the product names, which are the same 38px in both cards.
 * Any constant here is calibrated against one environment on one day. hipno-grid.js measures the real
 * panel after load and sets the reserve from that; this value only has to be sane for the moment
 * before the script runs, so the page does not visibly reflow.
 */
@media only screen and (min-width: 963px) {
    .products-grid li.item {
        margin-bottom: 72px;
    }
}

/*
 * Collapse the links strip when the only thing in it is the compare link, which this theme hides.
 *
 * The strip reserves 40px and paints a panel, and the product tile ends with it. Wishlist is switched
 * off in configuration so it contributes no entry, and options_base_default.css hides the compare link
 * with display:none !important - so on this store the strip is 40px of blank panel under every card.
 *
 * MOVED HERE FROM local.css, where it had been correct and invisible for 27 days. local.css is linked
 * with no version query under an Expires of 2037, so Cloudflare kept serving the copy it already had:
 * 160,988 bytes at the edge against 162,278 on disk, a difference of exactly this rule and its
 * comment. Dev looked right, production showed the strip, and that 40px was also the whole reason the
 * hover panel overhung by 93px on production against 62px on dev - so the reserve came out 105px
 * there and 74px here, which is what "it is still not like development" actually was.
 *
 * Written as a condition rather than switching the strip off outright: matching only a single-entry
 * list whose one entry is the compare link means turning wishlist back on brings the strip back by
 * itself, instead of a rule here quietly hiding a feature somebody has just enabled.
 *
 * A browser without :has() simply keeps today's behaviour.
 */
.products-grid .add-to-links:has(> li:only-child > a.link-compare) {
    display: none;
}

/*
 * 21px of margin on a zero-height element.
 *
 * `span.ajax_loading` measures 0px tall inside the hover panel and still contributes 21px of
 * margin-top, which is 21px of the overhang that pushed the panel onto the row below for no visual
 * purpose whatsoever. It belongs to an ajax add-to-cart spinner that is positioned when it has
 * something to show.
 *
 * Dropped only while it is empty, so the day it does render something it gets its spacing back.
 */
.products-grid .hover .ajax_loading:empty {
    margin-top: 0;
}

/*
 * The hovered tile lifts above its siblings.
 *
 * `.hover` already carried z-index:2, but that only orders it against its own tile's contents. Every
 * tile is position:relative with z-index:auto, so tiles paint in document order and a later sibling
 * draws over an earlier one's panel - tile 7 was painting on top of tile 3's panel. That is why the
 * overhang read as torn rather than as a card lifting: the product below was being drawn through it.
 *
 * Unscoped by width on purpose: below 963px the panel never opens, so this is inert there rather than
 * wrong, and leaving it unconditional means it cannot fall out of step with the breakpoint above.
 */
.products-grid li.item:hover {
    z-index: 5;
}