/* ---------------------------------------------------------------------------
   Product comparison.
   --------------------------------------------------------------------------- */

.gms-cmp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--gms-ink-soft, #6b6b6b);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.gms-cmp__box {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--gms-line, #d8d8d8);
    border-radius: 3px;
    background: var(--gms-surface, #fff);
}

.gms-cmp.is-on {
    color: var(--gms-ink, #1a1a1a);
}

.gms-cmp.is-on .gms-cmp__box {
    position: relative;
    border-color: var(--gms-ink, #1a1a1a);
    background: var(--gms-ink, #1a1a1a);
}

/* A tick from two borders — no icon font for what is decoration. */
.gms-cmp.is-on .gms-cmp__box::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 3px;
    width: 5px;
    height: 2px;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg);
}

/* ---- The tray ---------------------------------------------------------- */

.gms-cmptray {
    position: fixed;
    right: 0;
    left: 0;
    /* bottom is set below, where it can account for the cart pill. */
    /* Above the bottom bar, not a thousandfold below it.

       This sat at 90 while the bottom bar is 99990, so on a phone the compare
       tray was painted underneath it and simply never appeared — ticking two
       products to compare looked like a button that did nothing. The offset
       above keeps them from overlapping; this decides who wins if they ever
       do, and the answer has to be the thing the customer just asked for.

       Below the drawer and the filter sheet, which are modal and should cover
       everything. */
    z-index: 99991;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    /* A pill, sized to what it says, rather than a slab across the screen.
       
       Full width and square-cornered it read as a third bar of chrome under
       the cart pill and the navigation — three stacked strips over the
       products, each in a different shape. Matching the cart pill makes them
       look like two states of one thing instead of two plugins arguing. */
    width: auto;
    max-width: min(calc(100% - 24px), 420px);
    margin: 0 auto;
    padding: 8px 8px 8px 18px;
    border: 1px solid var(--gms-line, #e4e4e4);
    border-radius: 999px;
    background: var(--gms-surface, #fff);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
}

/* Clear of the cart pill when there is one. The class is already on <body>
   for the header heart, so the tray can read it rather than needing its own
   measurement — and when the basket is empty the tray drops back down to sit
   directly above the navigation instead of floating over a gap. */
.gms-cmptray { bottom: calc(var(--gms-bottom-chrome, 0px) + 12px); }
body.gms-has-cart .gms-cmptray { bottom: calc(var(--gms-bottom-chrome, 0px) + 80px); }

.gms-cmptray__actions .gms-btn,
.gms-cmptray__actions button,
.gms-cmptray__actions a {
    border-radius: 999px;
}

.gms-cmptray[hidden] {
    display: none;
}

.gms-cmptray__items {
    color: var(--gms-ink, #1a1a1a);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.gms-cmptray__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gms-cmptray__note {
    flex: 1 1 100%;
    order: -1;
    margin: 0;
    color: var(--gms-bad, #b42318);
    font-size: 0.8125rem;
}

/* One product is not a comparison, so the button says so rather than leading
   to an empty table. */
.gms-cmptray .is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ---- The table -------------------------------------------------------- */

.gms-cmp-table__tools {
    margin-bottom: 12px;
}

.gms-cmp-table__only {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gms-ink, #1a1a1a);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.gms-cmp-table__scroll {
    overflow-x: auto;
    /* The row labels stay put while the columns scroll, which is the only way
       a four-column table works on a phone. */
    -webkit-overflow-scrolling: touch;
}

.gms-cmp-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.gms-cmp-grid th,
.gms-cmp-grid td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--gms-line, #e4e4e4);
    text-align: left;
    vertical-align: top;
}

.gms-cmp-grid thead th {
    border-bottom: 2px solid var(--gms-line, #e4e4e4);
}

/* The label column is sticky so you never lose track of which row you are on. */
.gms-cmp-grid th[scope="row"],
.gms-cmp-grid thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 120px;
    background: var(--gms-surface, #fff);
    color: var(--gms-ink-soft, #6b6b6b);
    font-weight: 600;
}

.gms-cmp-grid td {
    min-width: 150px;
    color: var(--gms-ink, #1a1a1a);
}

.gms-cmp-grid__head {
    display: block;
    color: inherit;
    text-decoration: none;
}

.gms-cmp-grid__head img {
    display: block;
    width: 100%;
    max-width: 130px;
    aspect-ratio: 1;
    margin-bottom: 8px;
    border-radius: 8px;
    object-fit: cover;
}

.gms-cmp-grid__name {
    display: block;
    font-weight: 650;
    line-height: 1.3;
}

.gms-cmp-grid__drop {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gms-ink-soft, #6b6b6b);
    font-size: 0.75rem;
    text-decoration: underline;
    cursor: pointer;
}

/* Rows where every product says the same thing. Dimmed rather than removed by
   default: sameness is information too, just not the information you came for. */
.gms-cmp-grid tr.is-same th[scope="row"],
.gms-cmp-grid tr.is-same td {
    color: var(--gms-ink-soft, #9a9a9a);
}

.gms-cmp-yes {
    color: var(--gms-good, #059669);
    font-weight: 600;
}

.gms-cmp-no {
    color: var(--gms-bad, #b42318);
    font-weight: 600;
}

.gms-cmp-grid__buy td {
    border-bottom: 0;
}

.gms-cmp-empty {
    padding: 32px 0;
    text-align: center;
}

@media (max-width: 640px) {
    .gms-cmp-grid th,
    .gms-cmp-grid td {
        padding: 10px;
    }

    .gms-cmp-grid td {
        min-width: 130px;
    }
}


/* ---------------------------------------------------------------------------
   Presentation pass.

   The table was correct and read as a spreadsheet. Three changes carry it:
   the header row is sticky so you never lose which column is which while
   scanning down; matching rows recede rather than shouting; and the price row
   is given weight, because it is the row every comparison is actually about.
   --------------------------------------------------------------------------- */

.gms-cmp-table__scroll {
    /* A frame, so the table reads as one object rather than loose rows. */
    border: 1px solid var(--gms-line, #e4e4e4);
    border-radius: 14px;
    background: var(--gms-surface, #fff);
}

.gms-cmp-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--gms-surface, #fff);
    /* The label column is already sticky horizontally; the corner has to sit
       above both or it is overlapped while scrolling diagonally. */
}

.gms-cmp-grid thead th:first-child {
    z-index: 3;
}

.gms-cmp-grid th,
.gms-cmp-grid td {
    padding: 13px 16px;
}

/* Zebra on the label column only. Striping the whole row fights the "same"
   dimming; striping one column still guides the eye across. */
.gms-cmp-grid tbody tr:nth-child(even) th[scope="row"] {
    background: var(--gms-muted, #fafafa);
}

/* The row the comparison is about. */
.gms-cmp-grid tbody tr:first-child td {
    font-size: 1.0625rem;
}

.gms-cmp-grid tbody tr:first-child td strong {
    font-weight: 700;
}

/* Matching rows recede to about half weight — present, but not competing with
   the differences. */
.gms-cmp-grid tr.is-same th[scope="row"],
.gms-cmp-grid tr.is-same td {
    opacity: 0.55;
}

.gms-cmp-grid tr.is-same:hover th[scope="row"],
.gms-cmp-grid tr.is-same:hover td {
    opacity: 1;
}

.gms-cmp-grid__head img {
    max-width: 100%;
    border: 1px solid var(--gms-line, #e4e4e4);
}

.gms-cmp-grid__name {
    font-size: 0.9375rem;
}

.gms-cmp-grid__drop {
    color: var(--gms-bad, #b42318);
}

.gms-cmp-grid__buy td {
    padding-top: 16px;
    padding-bottom: 18px;
}

.gms-cmp-grid__buy .gms-btn-p {
    width: 100%;
}

.gms-cmp-table__only {
    padding: 8px 12px;
    border: 1px solid var(--gms-line, #e4e4e4);
    border-radius: 999px;
    background: var(--gms-surface, #fff);
}

@media (prefers-reduced-motion: no-preference) {
    .gms-cmp-grid tr.is-same th[scope="row"],
    .gms-cmp-grid tr.is-same td {
        transition: opacity 0.15s ease;
    }
}

/* ---- The icon on the photograph -------------------------------------------
   Under the wishlist heart, same size, same treatment. A tool sits with the
   other tool rather than as a line of text arguing with the price. */

.gms-cmp--icon {
    position: absolute;
    top: 47px;            /* the heart is 32px tall at top: 9px, plus 6px */
    right: 9px;
    width: 32px;
    height: 32px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    color: var(--gms-ink, #14161a);
    z-index: 2;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
    transition: transform .15s ease, background .15s ease, color .15s ease;
}

.gms-cmp--icon:hover { transform: scale(1.08); }
.gms-cmp--icon svg { width: 16px; height: 16px; }

/* Selected reads as filled, the way the heart does, rather than as a subtle
   tint nobody notices they have toggled. */
.gms-cmp--icon[aria-pressed="true"] {
    background: var(--gms-accent, #2563eb);
    color: var(--gms-accent-ink, #fff);
}

/* The word is still there for a screen reader — an icon alone announces
   nothing, and "Compare" is not guessable from two arrows. */
.gms-cmp__sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The icon carries no tickbox or label. */
.gms-cmp--icon .gms-cmp__box,
.gms-cmp--icon .gms-cmp__label { display: none; }