/* Size Chart — content inside the shared info-modal panel.
   The dialog shell (.dealer-modal / .dealer-info-modal), its mobile bottom-sheet
   behaviour and its close button all come from components.css. This file owns
   only what sits inside the panel, plus one desktop width override: a size table
   needs more room than the 540px shared default.
   Local values stay local (DESIGN-TOKENS.md "Token Boundary"). */

.dealer-size-chart {
    /* Module-local surfaces — derived from the black/accent tokens. */
    --size-chart-line:        rgba(0, 0, 0, 0.08);
    --size-chart-line-head:   rgba(0, 0, 0, 0.14);
    --size-chart-muted:       rgba(0, 0, 0, 0.50);
    /* Unavailable sizes stay comfortably readable — they are still useful
       conversion data, only secondary to what is in stock. */
    --size-chart-unavailable: rgba(0, 0, 0, 0.46);
    --size-chart-current:     rgba(3, 76, 57, 0.07);
    --size-chart-cell-pad-y:  12px;
    --size-chart-cell-pad-x:  16px;

    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Title -> scope line pairing. The shared title keeps its own font, we only
   tighten the gap so the scope reads as its subtitle. */
.dealer-size-chart-modal .dealer-modal__title {
    margin-bottom: 6px;
}

.dealer-size-chart__scope {
    margin: 0 0 22px;
    color: var(--size-chart-muted);
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-light);
    line-height: 1.35;
}

.dealer-size-chart__intro {
    margin: 0;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-light);
    line-height: 1.6;
}

/* Wide content must scroll inside its own box, never the page. */
.dealer-size-chart__scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.dealer-size-chart__table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    line-height: 1.35;
}

/* --- Storefront compatibility -------------------------------------------
   Storefront's customizer paints every plain <table> on the site, from
   storefront-style-inline-css:

     table:not( .has-background ) th                        (0,1,2)  #f8f8f8
     table:not( .has-background ) tbody td                  (0,1,3)  #fdfdfd
     table:not( .has-background ) tbody tr:nth-child(2n) td (0,2,4)  zebra

   The zebra is the hard one: :not() and :nth-child() give it two class-level
   points plus four element points. The `:nth-child(n)` below matches every row
   and exists ONLY to add the third class-level point, so these rules land at
   (0,3,3) and outrank it without !important.

   Body cells read --size-chart-row-bg, a per-row variable, so the selected-row
   tint comes from the variable instead of yet another background rule fighting
   the same cascade. Do not lower these specificities.
   (See CSS-FOUNDATION-GUIDE.md "Storefront Compatibility Layer".) */
.dealer-size-chart .dealer-size-chart__table thead th {
    background-color: var(--color-white);
}

.dealer-size-chart .dealer-size-chart__table tbody tr:nth-child(n) th,
.dealer-size-chart .dealer-size-chart__table tbody tr:nth-child(n) td {
    background-color: var(--size-chart-row-bg, #fff);
}

.dealer-size-chart__caption {
    padding: 0 0 12px;
    color: var(--size-chart-muted);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-medium);
    text-align: left;
    caption-side: top;
}

.dealer-size-chart__table th,
.dealer-size-chart__table td {
    padding: var(--size-chart-cell-pad-y) var(--size-chart-cell-pad-x) var(--size-chart-cell-pad-y) 0;
    border: 0;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

.dealer-size-chart__table th:last-child,
.dealer-size-chart__table td:last-child {
    padding-right: 0;
}

.dealer-size-chart__table thead th {
    padding-top: 0;
    padding-bottom: 12px;
    border-bottom: var(--border-width-thin) solid var(--size-chart-line-head);
    color: var(--size-chart-muted);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-medium);
}

.dealer-size-chart__table tbody tr {
    /* Read by the sticky first column so it tints with the rest of the row. */
    --size-chart-row-bg: var(--color-white);
}

.dealer-size-chart__table tbody th,
.dealer-size-chart__table tbody td {
    border-bottom: var(--border-width-thin) solid var(--size-chart-line);
    color: var(--color-black);
    font-weight: var(--font-weight-light);
}

.dealer-size-chart__table tbody th[scope="row"] {
    font-weight: var(--font-weight-medium);
}

.dealer-size-chart__table tbody tr:last-child th,
.dealer-size-chart__table tbody tr:last-child td {
    border-bottom: 0;
}

/* --- Availability -------------------------------------------------------
   Active only when the product told us what is in stock. Without that the
   modifier class is absent and every row renders at full strength, so a
   sold-out product never shows an entirely grey table. */
.dealer-size-chart--availability .dealer-size-chart__table tbody th,
.dealer-size-chart--availability .dealer-size-chart__table tbody td {
    color: var(--size-chart-unavailable);
    font-weight: var(--font-weight-light);
}

.dealer-size-chart--availability .dealer-size-chart__table tbody tr.is-available th,
.dealer-size-chart--availability .dealer-size-chart__table tbody tr.is-available td {
    color: var(--color-black);
}

.dealer-size-chart--availability .dealer-size-chart__table tbody tr.is-available th[scope="row"] {
    font-weight: var(--font-weight-medium);
}

/* The shopper's currently selected size. The row tint is carried by the
   variable, which the cell-background rule above already reads — no second
   background declaration is needed, and none should be added. Declared after
   the availability rules on purpose: same specificity, source order decides. */
.dealer-size-chart .dealer-size-chart__table tbody tr.is-current {
    --size-chart-row-bg: var(--size-chart-current);
}

.dealer-size-chart .dealer-size-chart__table tbody tr.is-current th,
.dealer-size-chart .dealer-size-chart__table tbody tr.is-current td {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.dealer-size-chart__figure {
    margin: 0;
}

.dealer-size-chart__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--form-control-radius);
}

/* A block container, not a paragraph: the note is wp_kses_post()-filtered and
   may legitimately contain block-level tags. */
.dealer-size-chart__note {
    padding-top: 4px;
    color: var(--size-chart-muted);
    font-family: var(--font-family);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-light);
    line-height: 1.6;
}

.dealer-size-chart__note > :first-child {
    margin-top: 0;
}

.dealer-size-chart__note > :last-child {
    margin-bottom: 0;
}

.dealer-size-chart__note p {
    margin: 0 0 8px;
}

.dealer-size-chart__note a {
    color: var(--color-primary);
}

/* Mobile: the panel is a bottom sheet, so the size column stays pinned while
   the conversion columns scroll sideways. */
@media (max-width: 767px) {
    .dealer-size-chart {
        --size-chart-cell-pad-x: 14px;

        gap: 18px;
    }

    .dealer-size-chart__scope {
        margin-bottom: 18px;
    }

    .dealer-size-chart__table thead th:first-child,
    .dealer-size-chart__table tbody th[scope="row"] {
        position: sticky;
        left: 0;
        z-index: 1;
        padding-right: 16px;
        background-color: var(--size-chart-row-bg, #fff);
    }

    .dealer-size-chart__table thead th:first-child {
        background-color: var(--color-white);
    }

    /* The pinned column only needs an edge once something is actually sliding
       under it. Narrow charts fit the screen and never scroll, and a permanent
       shadow there reads as a stray vertical rule through the whole table.
       `is-scrolled` is toggled by size-chart.js on horizontal scroll. */
    .dealer-size-chart__scroller.is-scrolled .dealer-size-chart__table thead th:first-child,
    .dealer-size-chart__scroller.is-scrolled .dealer-size-chart__table tbody th[scope="row"] {
        box-shadow: 1px 0 0 var(--size-chart-line);
    }
}

/* Desktop: a conversion table needs more width than the shared 540px panel.
   Scoped to >=768px so the mobile sheet keeps its full-width rule. */
@media (min-width: 768px) {
    .dealer-size-chart-modal .dealer-modal__panel {
        max-width: 720px;
    }

    .dealer-size-chart__scope {
        font-size: var(--font-size-body);
    }
}