/**
 * T14 "Compare" — reskin of Magento's own compare table.
 *
 * UNLIKE T13, THE FEATURE IS REAL. The core compare module and the
 * catalog_product_compare_index handle both exist; the theme simply had 0 compare CSS and 0
 * overrides. So this styles working functionality rather than reviving a corpse.
 *
 * Every class below is READ FROM THE CORE TEMPLATE
 * (vendor/magento/module-catalog/view/frontend/templates/product/compare/list.phtml), not
 * guessed: .table-comparison, .cell.label, .cell.product.info, .cell.product.attribute,
 * .attribute.label, .attribute.value, .action.delete, .message.info.empty. Guessing markup is
 * what produced dead selectors twice already this sprint.
 *
 * WHAT THE ARTBOARD ASKS FOR AND THE CATALOGUE CANNOT SUPPLY — audited before styling:
 *   Price       rendered natively by Magento, fine
 *   Harvest     exists ONLY inside the hrv_specs JSON blob; cannot render as a table row
 *   Unit price  NO ATTRIBUTE
 *   Origin      NO ATTRIBUTE  ("Crete", "Alentejo" are claims about real goods)
 *   Organic     NO ATTRIBUTE  ("Yes"/"Wild" likewise)
 * Origin and Organic are the same class as the Polyphenols lab measurement refused on T12 and
 * are NOT invented.
 *
 * THE FIRST VERSION OF THIS FILE WAS 100% DEAD. Every selector was scoped to
 * `.catalog-product-compare-index` — all hyphens — and the live body class is
 * `catalog-product_compare-index`, with an UNDERSCORE, because the controller is
 * `product_compare`. The stylesheet loaded and matched nothing: the empty state kept its
 * inherited 14px radius instead of the 18px declared here. This repo already records that a
 * body class is the full action name with `_`->`-`, which does NOT mean every separator
 * becomes a hyphen. Read the live body class; never derive it.
 *
 * ROWS THAT SHOULD NOT BE THERE, AND WHY THEY STILL ARE: the table currently renders color,
 * description and short_description because those carry is_comparable=1. That flag is an
 * ATTRIBUTE-LEVEL setting in catalog_eav_attribute, set per attribute — NOT a
 * Stores > Configuration entry, so do not go looking for it there. Because attributes are
 * global, flipping it would also reshape the Porto catalogue sharing this install. The row
 * markup carries no attribute code, so CSS cannot target the rows individually.
 *
 * IT IS NOT THE ONLY ALTERNATIVE, and an earlier version of this comment wrongly implied it
 * was ("blast radius beyond this theme" framed as the sole option). Already in this repo:
 * EcommPaaS\ThemeConfig\ViewModel\CompareList plus
 * atelier/Magento_Theme/templates/html/compare.phtml drop description/short_description
 * THEME-LOCALLY, touching no flag — its ROW_INPUT_TYPES deliberately excludes textarea
 * because a multi-paragraph blob destroys the table. That path costs a template + i18n +
 * cacheable="false" (this repo has a recorded cross-customer caching incident from replacing
 * native session blocks without it), so reskinning the native block was chosen deliberately.
 * The choice is defensible; claiming no alternative existed was not.
 */

.catalog-product_compare-index .table-comparison {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 0;
}

.catalog-product_compare-index .table-comparison .cell {
    padding: 16px;
    border-bottom: 1px solid var(--hrv-border);
    vertical-align: top;
    text-align: left;
}

/* The attribute-name column: fixed and quiet, so the values carry the eye. */
.catalog-product_compare-index .table-comparison .cell.label,
.catalog-product_compare-index .table-comparison .attribute.label {
    width: 160px;
    font-size: 13px;
    font-weight: 700;
    color: var(--hrv-text-muted);
}

.catalog-product_compare-index .table-comparison .attribute.value {
    font-size: 14px;
    line-height: 1.5;
    color: var(--hrv-text);
}

/* Product header cells — name, photo, price sit here.
   `.cell.product` unqualified is REQUIRED and the qualified pair was a real defect: the thead
   remove row emits <td class="cell remove product hidden-print"> with neither `info` nor
   `attribute`, so it fell through to the page background and every product column carried a
   visible notch of --hrv-bg above its surface. MEASURED on the deployed build before this
   fix: that cell was rgba(0,0,0,0) while .cell.product.info was rgb(255,255,255). */
.catalog-product_compare-index .table-comparison .cell.product:not(.label) {
    background: var(--hrv-surface);
}

.catalog-product_compare-index .table-comparison .product-item-name {
    font-family: var(--hrv-font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

.catalog-product_compare-index .table-comparison .product-item-name a {
    color: var(--hrv-text);
    text-decoration: none;
}

.catalog-product_compare-index .table-comparison .product-item-photo {
    display: block;
    margin: 0 0 10px;
}

/* Remove control — the artboard's "✕ Remove". Kept visible and full-size: this is the only
   way to take a product out of the comparison, and hiding an interactive control to match a
   picture is a mistake this sprint has already made once. */
/* DOUBLE-SCOPED, and the reason is measured rather than stylistic. Blank ships
   `.table-comparison .cell.remove .action.delete` at (0,5,0); the single-scoped rule below
   was (0,4,0) and LOST. On the deployed build this control computed Blank's
   `display:inline-block`, not `inline-flex` — so `align-items`/`gap` were inert — and the
   whole :hover block was dead. Adding `hrv-page-compare` in the layout XML buys the extra
   class that wins it.

   The GLYPH IS A PSEUDO-ELEMENT. Blank hides the <span> (@_icon-font-text-hide) and paints
   the × via `.action.delete:before`, which it colours rgb(48,48,48) at (0,5,0) and pins to
   the SAME grey on hover — i.e. core gives the page's only destructive control no hover
   feedback at all. Colouring the anchor alone changes nothing visible; ::before must be
   targeted directly. Measured before this fix: ::before was rgb(48,48,48). */
.catalog-product_compare-index.hrv-page-compare .table-comparison .cell.remove .action.delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
}

.catalog-product_compare-index.hrv-page-compare .table-comparison .cell.remove .action.delete:before {
    color: var(--hrv-text-muted);
}

/* NOT --hrv-accent, deliberately. The S3 review computed accent-on-bg at 2.82 on wheat and
   4.05 on honey — both FAIL AA, and wheat is the DEFAULT palette. Winning the cascade with
   an inaccessible colour would have traded a dead rule for a live accessibility defect.
   --hrv-text measures 16.52 on wheat and passes in all five palettes, and reads as a clear
   state change from the muted default. */
.catalog-product_compare-index.hrv-page-compare .table-comparison .cell.remove .action.delete:hover:before,
.catalog-product_compare-index.hrv-page-compare .table-comparison .cell.remove .action.delete:focus-visible:before {
    color: var(--hrv-text);
}

/* Keyboard focus must be at least as loud as hover on a destructive control. */
.catalog-product_compare-index.hrv-page-compare .table-comparison .cell.remove .action.delete:focus-visible {
    outline: 2px solid var(--hrv-text);
    outline-offset: 2px;
}

/* Empty state — reached whenever nothing has been added, which is the DEFAULT state of this
   page for a new visitor, so it is styled rather than left bare. */
.catalog-product_compare-index .message.info.empty {
    margin: 24px 0 0;
    padding: 28px;
    background: var(--hrv-surface);
    border: 1px solid var(--hrv-border);
    border-radius: var(--hrv-radius);
    color: var(--hrv-text-muted);
    text-align: center;
}

@media (max-width: 767px) {
    .catalog-product_compare-index .table-comparison .cell {
        padding: 12px;
    }

    .catalog-product_compare-index .table-comparison .cell.label,
    .catalog-product_compare-index .table-comparison .attribute.label {
        width: 110px;
        font-size: 12px;
    }
}

/* Product image sizing — FOUND ONLY BY LOOKING AT A SCREENSHOT of the populated table.
   Every numeric check passed (backgrounds correct, bodyScroll 0, display values correct)
   while each ~140px thumbnail sat top-left inside a ~300px grey box, leaving a large empty
   grey rectangle under every product.

   This is the same defect _category.css already solved, so the pattern below is COPIED from
   there rather than reinvented — three moving parts, all required:
     1. `.product-image-container` is sized by Magento's image helper and needs !important to
        override. NOTE THE MECHANISM, because an earlier version of this comment named the
        wrong one: it is NOT an inline `style="width:NNNpx"` attribute. MEASURED in the raw
        server HTML, the tag is `<span class="product-image-container product-image-container-46">`
        with NO style attribute; Magento 2.4.9 emits a `<style>` block instead —
        `.product-image-container-46 { width:140px; height:auto; aspect-ratio:140/140 }` plus
        a wrapper rule — i.e. author rules at (0,1,0) and (0,2,1), not an inline declaration.
        Whether the !important can therefore be DROPPED is untested: an isolation attempt
        omitted `aspect-ratio` and collapsed the wrapper to height 0, which is the very trap
        described in point 2. Needs its own controlled test before anyone removes it.
     2. Blank sizes `.product-image-wrapper` with `height: 0` + a percentage `padding-bottom`
        ratio hack. BOTH must be reset: an explicit `height: 0` BEATS `aspect-ratio`, so
        killing only the padding collapses every image to 0px tall — an invisible image on a
        page that still returns HTTP 200. That trap is recorded in _category.css and cost a
        harness pass there; it is not re-learned here.
     3. The photo is absolutely positioned by Blank; `position: static` + object-fit lets it
        fill the box instead of floating at its natural 140px in the corner. */
.catalog-product_compare-index.hrv-page-compare .table-comparison .product-image-container {
    display: block;
    width: 100% !important;
}

.catalog-product_compare-index.hrv-page-compare .table-comparison .product-image-wrapper {
    padding: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    display: block;
    overflow: hidden;
    border-radius: var(--hrv-radius-sm);
}

.catalog-product_compare-index.hrv-page-compare .table-comparison .product-image-photo {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* THE CARD, THE COLUMN RULES AND THE LABEL RAIL — all three were simply MISSING, and the
   S8 gate caught it because it derived its checklist from the ARTBOARD rather than from the
   rules this file had already written. Every earlier probe (pinfo_bg, thRemove_bg,
   del_display, label_borderRight) targeted a cell the theme had a rule for, so the battery
   was structurally blind to things the comp has and the diff did not.

   Verified in the artboard before writing this: 18 `border-left` declarations (the vertical
   column rules), one `border-radius: 18px`, `min-width: 900px` and `overflow-x: auto` on the
   scroller. The tell that it was a gap rather than a judgement call: the EMPTY state already
   had the card treatment, so the empty page matched the comp and the populated one did not.

   The vertical rules here are NOT the grey border-right S3 raised and measurement refuted —
   that was an unwanted Blank artefact on the label column. These are affirmative comp
   styling, and they use the artboard's own colour expression. */
.catalog-product_compare-index.hrv-page-compare .table-wrapper.comparison {
    background: var(--hrv-surface);
    border: 1px solid var(--hrv-border);
    border-radius: var(--hrv-radius);
    overflow-x: auto;
}

/* The label rail carries the card surface too; without this it drops to page background and
   the card reads as a hole. NOTE: no one has ever measured a label cell's background on this
   page — the S3 battery measured the product cells only — so this is the comp's requirement
   applied, and S7's screenshot is what confirms the rendered result. */
.catalog-product_compare-index.hrv-page-compare .table-comparison .cell.label {
    background: var(--hrv-surface);
}

/* Vertical rules between product columns, per the artboard. `:not(:first-child)` keeps the
   card's own left edge from doubling up with a cell rule. */
.catalog-product_compare-index.hrv-page-compare .table-comparison .cell.product:not(:first-child) {
    border-left: 1px solid var(--hrv-border);
}