.whats-included {
    background-color: var(--color-grey-1);
    color: var(--color-beige-2);
}

.whats-included__inner {
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding: 100px 60px;
    display: grid;
    /* Was 1fr/2fr — with the image capped at 308px (see .whats-included__image)
       that left the table's track noticeably wider than the table itself
       actually needs for a 2–3 column comparison, reading as too much empty
       space next to it. */
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    align-items: start;
    gap: clamp(var(--space-4), 4vw, 3rem);
}

/* No photo supplied — the table takes the full width instead of leaving a
   blank left column where it would have sat. See render.php: this modifier
   is added whenever the "Image" field is empty. */
.whats-included--no-image .whats-included__inner {
    grid-template-columns: 1fr;
}

.whats-included__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.whats-included__heading {
    margin: 0;
    color: var(--color-cream);
    font-size: 64px;
    line-height: 58px;
}

.whats-included__description {
    color: var(--color-beige-1);
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 26px;
    margin-bottom:28px
}

.whats-included__description p {
    margin: 0;
}

.whats-included__media {
    max-width: 450px;
    padding: var(--space-4);
    border-radius: 12px;
    background-color: var(--color-beige-2);
}

.whats-included__image {
    display: block;
    /* The image's own width (below) is narrower than .whats-included__media's
       content box (450px card minus padding) — without this it just sits
       flush left inside the wider cream card instead of centered in it. */
    margin-inline: auto;
    /* Pixel-measured from the mockup (308×286) rather than left to whatever
       aspect ratio the source photo happens to be — a portrait-oriented
       photo at width:100%/height:auto blew up to 500+px tall and dominated
       the whole block before this was capped.
       width (not height) is the property pinned to a value here, with
       height derived from it via aspect-ratio below — render.php outputs
       the *source* photo's real width/height as HTML attributes (e.g.
       1425×1852, for lazy-load/CLS purposes), and with height pinned
       instead, that natural ratio won CSS's auto-width algorithm once
       max-width:100% (global.css's img reset) was in the mix, stretching
       the box to fill the card. Pinning width instead doesn't have that
       problem — global.css's own max-width:100% is exactly what should
       win once the card gets narrower than this on mobile, shrinking width
       (and, via aspect-ratio, height with it) to fit instead of forcing a
       fixed 300px-tall box into a card that's no longer wide enough for
       it, which used to leave the box disproportionately tall/narrow
       instead of just uniformly smaller. */
    width: calc(300px * 308 / 286);
    max-width: 100%;
    height: auto;
    aspect-ratio: 308 / 286;
    /* contain, not cover: the 308:286 box is close to square, but uploaded
       photos are frequently portrait-oriented (people shots) and cover
       would crop into the top/bottom of the photo — cutting off faces —
       whenever the source ratio doesn't match the box. contain always shows
       the whole photo, letterboxed (on whichever sides the ratio mismatch
       falls) against .whats-included__media's own cream background instead. */
    object-fit: contain;
}

.whats-included__table-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-4);
    min-width: 0;
}

.whats-included__table-wrap {
    width: 100%;
    /* Reserves the room .whats-included__col-header.is-highlighted /
       .whats-included__cell.is-highlighted's ::before draws its outside
       outline into (see the comment there) — without this, overflow-x: auto
       below clips anything that paints past the table's own edge, cutting
       the outline off instead of letting it sit outside. */
    padding: 4px;
    overflow-x: auto;
    /* Real drag-to-scroll is wired up in assets/js/global.js
       (initDragScroll) via [data-drag-scroll] — this cursor is backed by
       actual behavior, unlike the "cursor: grab, nothing implements it"
       rows noted elsewhere in this theme. */
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Two <table>s exist in the DOM (see render.php) sharing the same row data
   but in a different column order — only one is ever shown at a time. */
.whats-included__table-wrap--mobile,
.whats-included__scroll-track {
    display: none;
}

.whats-included__table-wrap.is-dragging {
    cursor: grabbing;
    /* Dragging selects the table's text otherwise, which looks broken mid-drag. */
    user-select: none;
}

.whats-included__table {
    width: 100%;
    min-width: 480px;
    border-collapse: separate;
    border-spacing: 0;
    /* No shared background/rounding on the <table> itself — the corner cell
       above the row-label column needs to stay genuinely blank (see
       .whats-included__corner below), which a table-wide background would
       otherwise show through. Every other cell carries its own background
       instead, and the rounded outer corners are drawn on the first/last
       real column specifically (:nth-child(2)/:last-child — column 1 is
       always the corner/row-label, never rounded). */
}

/* No fill of its own here on purpose, unlike the real column headers next
   to it — per the mockup, this corner cell (above the row-label column) is
   just blank space showing the section's own background, not a cream box —
   so it's painted with that background color explicitly rather than left
   transparent (below), not left/top: 0 by coincidence either.
   .whats-included__row-label (directly beneath this, in tbody) is sticky so
   it stays put while the data columns scroll underneath — but that's a
   *different* table cell in a *different* row; nothing was pinning this
   header cell to match, so other column headers slid freely through the
   space above the pinned label column as they scrolled past, right where
   this corner is supposed to visually anchor. Sticky positioning, same as
   row-label, plus an opaque fill (transparent would just let those sliding
   headers show through) fixes it — they now disappear behind this cell
   instead of riding through the reserved corner. */
.whats-included__corner {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--color-grey-1);
}

.whats-included__col-header:nth-child(2) {
    border-top-left-radius: 12px;
}

.whats-included__col-header:last-child {
    border-top-right-radius: 12px;
}

.whats-included__row.is-last-row .whats-included__cell:last-child {
    border-bottom-right-radius: 12px;
}

/* The row-label column is its own visual box too (the corner cell above it
   is deliberately blank, not part of the card) — without this its first/last
   rows kept square corners while the data column next to them rounded,
   which read as a stray sharp corner poking out of an otherwise rounded
   card. */
.whats-included__row:first-child .whats-included__row-label {
    border-top-left-radius: 12px;
}

.whats-included__row.is-last-row .whats-included__row-label {
    border-bottom-left-radius: 12px;
}

.whats-included__col-header {
    position: relative;
    min-width: 140px;
    padding: 20px;
    /* Pixel-sampled from the mockup: header fill is the same beige-2 tone as
       the body rows, not the lighter --color-cream this used to be set to. */
    background-color: var(--color-beige-2);
    border-top: 1px solid var(--color-beige-1);
    border-bottom: 1px solid var(--color-beige-1);
    font-weight: 700;
    text-align: left;
}

/* Vertical column dividers — pixel-sampled from the mockup: a faint
   beige-1 line runs the full height of the table (header through every
   row) between the row-label column and each data column, and between
   each data column and the next. Easy to miss at a glance since it's so
   close in tone to the beige-2 fill either side of it, but it's
   consistently there at every column boundary, not just the horizontal
   row dividers. No divider after the last column — that edge is the
   table's own outer edge, not a seam between two columns. The highlighted
   column's boundary is the one exception: its ::before orange outline
   (below) already draws that seam, 4px wide and positioned to fully cover
   this 1px line, so no separate rule is needed to suppress it there. */
.whats-included__row-label,
.whats-included__col-header:not(:last-child),
.whats-included__cell:not(:last-child) {
    border-right: 1px solid var(--color-beige-1);
}

.whats-included__col-header,
.whats-included__cell {
    text-align: center;
}

.whats-included__col-icon {
    display: inline-flex;
    align-items: center;
    margin-right: var(--space-1);
    /* Explicit — .whats-included sets color: var(--color-beige-2) at the
       block root for text sitting directly on the dark section background
       (heading/description), and that was inheriting straight through into
       these icons too. Icons drawn with fill="currentColor" (e.g.
       exp_storyworth.svg) picked it up and rendered beige-on-cream —
       invisible against the header's own background. Icons that hardcode
       their own fill (heart.svg's orange) were never affected, which is why
       only Storyworth's logo went missing. */
    color: var(--color-grey-1);
}

.whats-included__col-icon svg {
    display: block;
    width: auto;
    height: 18px;
}

.whats-included__col-name {
    color: var(--color-grey-1);
    font-family: var(--font-family-base);
    font-size: 16px;
}

.whats-included__row-label {
    /* Stays put while the product columns scroll underneath it on narrow
       screens — see the mobile mockup, where the label column never moves. */
    position: sticky;
    left: 0;
    z-index: 1;
    padding: 12px 24px;
    background-color: var(--color-beige-2);
    color: #000000;
    font-family: var(--font-family-base);
    font-size: 18px;
    text-align: left;
    white-space: normal;
}

/* Row dividers instead of alternating row colors — per the mockup, every
   row shares the same background (odd/even striping read as "разноцветные
   строчки", not the subtle single-tone card the mockup shows). No divider
   under the last row: that edge is the card's own rounded bottom instead. */
.whats-included__row:not(.is-last-row) .whats-included__row-label,
.whats-included__row:not(.is-last-row) .whats-included__cell {
    border-bottom: 1px solid var(--color-beige-1);
}

.whats-included__cell {
    background-color: var(--color-beige-2);
    padding: 12px 24px;
    color: #000000;
    font-family: var(--font-family-base);
    font-size: 18px;
    font-weight: 600;
}

.whats-included__check svg,
.whats-included__cross svg {
    display: inline-block;
    width: 16px;
    height: auto;
}

.whats-included__check svg path {
    stroke: var(--color-grey-1);
}

.whats-included__cross svg path {
    stroke: var(--color-orange-dark);
    stroke-width: 2.5;
}

/* The highlighted (normally StoryKeeper's own) column — a continuous orange
   outline drawn around the outside of every cell in the column, since CSS
   has no way to select "this table column as one box" directly.
   Deliberately a ::before instead of a real border: a real border is part
   of the box (sits flush with/inside the shared edge against the next
   column, eating into this column's own width — every other column keeps
   its full width, so bordered cells would end up very slightly
   narrower/inset compared to them). This ::before is its own separate box,
   positioned outside the cell's actual edges, so it reads as a line sitting
   just outside the column rather than inset into it — same visual idea as
   `outline`, but with per-side control (left/right on every cell, top only
   on the header, bottom only on the last row), which `outline` itself can't
   do (always all four sides at once).
   An earlier version tried this with a directional box-shadow instead
   (offsetting a full copy of the box's own rounded corner) — that broke
   down exactly at the rounded corners, where two independently-shifted
   copies don't meet cleanly and the line reads as cut short. A ::before
   sized and rounded explicitly for its own corner doesn't have that
   problem: it's one real shape, not a composite of shifted duplicates.
   .whats-included__table-wrap's padding is what stops this from getting
   clipped by its own overflow-x: auto. The ::before's own radius is
   set explicitly below, matched to :last-child same as the position-based
   rounding elsewhere in this file, so a highlighted column that isn't at an
   edge (e.g. the middle of 4 columns) doesn't wrongly pick up corners that
   belong to the table, not to it. */
.whats-included__col-header.is-highlighted,
.whats-included__cell.is-highlighted {
    position: relative;
}

/* Pixel-sampled from the mockup: unlike the data cells (which keep the same
   beige-2 fill as every other column), the highlighted column's *header*
   specifically is a solid dark-green fill (same tone as the section's own
   background) with light text/icon — on desktop as well as mobile. An
   earlier pass here assumed no shade difference at all; re-checking the
   mockup pixel-by-pixel showed that was wrong. */
.whats-included__col-header.is-highlighted {
    background-color: var(--color-grey-1);
    border-color: var(--color-grey-1);
}

.whats-included__col-header.is-highlighted .whats-included__col-name {
    color: var(--color-cream);
}

/* Same currentColor situation as .whats-included__col-icon's own comment
   above, just inverted: this header's fill is dark, so a currentColor icon
   (e.g. exp_storyworth) needs to go light or it disappears — dark-on-dark
   this time instead of the original light-on-light. Icons with their own
   hardcoded fill (heart's orange) are unaffected either way. */
.whats-included__col-header.is-highlighted .whats-included__col-icon {
    color: var(--color-cream);
}

.whats-included__col-header.is-highlighted::before,
.whats-included__cell.is-highlighted::before {
    content: "";
    position: absolute;
    top: 0;
    /* -1px, not 0: absolute offsets resolve against the containing block's
       *padding* edge, not its border edge. Every one of these cells (except
       the last row) also carries the 1px grey row-divider border-bottom, so
       a plain 0 left this ::before stopping 1px short of where the next
       cell's ::before picks up — a visible 1px break in the line at every
       row boundary. -1px extends it past that border so consecutive cells'
       ::befores butt up with no gap. */
    bottom: -1px;
    left: -4px;
    right: -4px;
    border-left: 4px solid var(--color-orange-dark);
    border-right: 4px solid var(--color-orange-dark);
    pointer-events: none;
}

.whats-included__col-header.is-highlighted::before {
    top: -4px;
    border-top: 4px solid var(--color-orange-dark);
}

/* 16px, not the cell's own 12px: this ::before sits 4px further out than
   the cell it's drawn on, so matching its radius exactly would curve
   noticeably tighter than the cell's own corner right behind it (same
   radius, bigger box = a visibly flatter-looking arc). Adding back the same
   4px it's offset by keeps the two curves concentric instead. */
.whats-included__col-header.is-highlighted:last-child::before {
    border-top-right-radius: 16px;
}

.whats-included__col-header.is-highlighted:nth-child(2)::before {
    border-top-left-radius: 16px;
}

.whats-included__row.is-last-row .whats-included__cell.is-highlighted::before {
    bottom: -3px;
    border-bottom: 4px solid var(--color-orange-dark);
}

.whats-included__row.is-last-row .whats-included__cell.is-highlighted:last-child::before {
    border-bottom-right-radius: 16px;
}

.whats-included__row.is-last-row .whats-included__cell.is-highlighted:nth-child(2)::before {
    border-bottom-left-radius: 16px;
}

.whats-included__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding-inline: var(--space-4);
    border-radius: 8px;
    background-color: var(--color-orange-dark);
    color: var(--color-beige-2);
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.whats-included__button:hover,
.whats-included__button:focus-visible {
    opacity: 0.85;
}

.whats-included__media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    width: 100%;
    border: 1px dashed var(--color-beige-1);
    border-radius: 1rem;
    color: var(--color-beige-1);
    font-family: var(--font-family-base);
}

@media (max-width: 899px) {
    /* Pixel-sampled from whats_included_mob.png: unlike desktop, the mobile
       mockup's section background is light (--color-cream), not the dark
       --color-grey-1 used above — heading/description flip to dark text to
       match. */
    .whats-included {
        background-color: var(--color-cream);
        color: var(--color-grey-1);
    }

    .whats-included__inner {
        grid-template-columns: 1fr;
        padding:68px 16px;
        gap:32px;
    }

    .whats-included__heading{
        color: var(--color-grey-1);
        font-size: 40px;
        line-height: 36px;
    }

    .whats-included__content{
        gap:20px;
    }

    .whats-included__description{
        color: var(--color-grey-3);
        font-size: 16px;
        line-height: 24px;
        margin-bottom:12px;
    }

    /* Same source: on mobile the row-label column and non-highlighted data
       columns sit flush with the now-cream section background (no fill of
       their own) — only the highlighted column's cells keep the beige-2
       fill, which is what actually sets it apart from the rest on this
       breakpoint instead of the desktop divider lines/tone difference. */
    .whats-included__row-label,
    .whats-included__cell {
        background-color: var(--color-cream);
    }

    /* Same reasoning as .whats-included__corner's own comment — it needs an
       opaque fill to actually hide column headers sliding past underneath
       it while scrolling, matching whatever the section's background
       happens to be at this breakpoint (cream here, not the desktop dark
       grey-1 the base rule uses). */
    .whats-included__corner {
        background-color: var(--color-cream);
    }

    .whats-included__cell.is-highlighted {
        background-color: var(--color-beige-2);
    }

    /* On desktop the table's outer left/right/bottom edges are left
       borderless on purpose — the card's own background already contrasts
       against the dark section behind it, so a seam there would be
       redundant. On mobile the section background is now cream (see
       .whats-included above) and the row-label/cell fill is cream too, so
       without an explicit line the card has no visible edge at all on
       those three sides — pixel-checked against whats_included_mob.png,
       which does draw them. Scoped to the mobile table specifically since
       the desktop table (hidden here, not removed) should keep its own
       borderless edges if the viewport is ever resized back up. */
    .whats-included__table-wrap--mobile .whats-included__row-label {
        border-left: 1px solid var(--color-beige-1);
    }

    .whats-included__table-wrap--mobile .whats-included__col-header:last-child,
    .whats-included__table-wrap--mobile .whats-included__cell:last-child {
        border-right: 1px solid var(--color-beige-1);
    }

    .whats-included__table-wrap--mobile .whats-included__row.is-last-row .whats-included__row-label,
    .whats-included__table-wrap--mobile .whats-included__row.is-last-row .whats-included__cell {
        border-bottom: 1px solid var(--color-beige-1);
    }

    .whats-included__media{
        max-width: unset;
        width: 100%;
        padding:16px 0px;
    }

    .whats-included__image {
        /* Same width-pinned-to-height approach as the base rule (see its
           comment) with a different target height for this breakpoint —
           still explicit, not left to shrink from whatever the desktop
           calc() resolves to, since that would only coincidentally land on
           170px if this container happened to be exactly the right width. */
        height: 170px;
        width: calc(170px * 308 / 286);
        max-width: 100%;
    }

    .whats-included__row-label{
        padding:10px 8px;
        font-size:14px;
    }

    .whats-included__table-area {
        align-items: stretch;
    }

    .whats-included__cell{
        font-size:14px;
    }
    .whats-included__col-header{
        padding: 10px 0px;
    }
    .whats-included__row.is-last-row .whats-included__cell:nth-child(2){
        border-bottom-left-radius:0px;
    }
    .whats-included__row:first-child .whats-included__row-label{
        border-top:1px solid var(--color-beige-1);
    }

    /* Swap which of the two <table>s is visible — see the comment on
       .whats-included__table-wrap--mobile above and render.php's
       $render_table()/$mobile_order. */
    .whats-included__table-wrap--desktop {
        display: none;
    }

    .whats-included__table-wrap--mobile {
        display: block;
        /* .whats-included__table-wrap's own scrollbar-width:thin (shared
           with the desktop variant) was rendering the browser's native
           scrollbar right under this table AND the decorative track/thumb
           below — two visible scrollbars stacked for what's really one
           scroll position. The decorative one already covers that job on
           mobile, so the native one is hidden here (scrolling itself is
           untouched — overflow-x:auto and the drag-scroll JS still work,
           this only hides the browser-drawn bar). */
        scrollbar-width: none;
    }

    .whats-included__table-wrap--mobile::-webkit-scrollbar {
        display: none;
    }

    /* Decorative scroll-position indicator for the mobile table — a plain
       track + thumb, sized/positioned by assets/js/global.js
       (initScrollIndicator) off the adjacent [data-drag-scroll]'s scroll
       state. Centered under the table rather than full-width so it reads as
       a scrollbar, not another content row. */
    .whats-included__scroll-track {
        display: block;
        width: 50%;
        height: 4px;
        margin-left: auto;
        border-radius: 999px;
        background-color: var(--color-beige-1);
        overflow: hidden;
    }

    .whats-included__scroll-thumb {
        display: block;
        height: 100%;
        border-radius: inherit;
        background-color: var(--color-beige-2);
        transition: transform 0.1s linear;
    }

    .whats-included__button {
        width: 100%;
        background-color: var(--color-grey-1);
    }

    /* Desktop draws the highlighted column's outline as an outside-the-cell
       ::before border (see the desktop rules above) on every cell down the
       column, header included. On mobile that column is already moved to
       the front (render.php's mobile_order) and its header alone gets a
       solid dark-green fill to mark it out — the ::before outline on top of
       that read as redundant/heavy, so it's suppressed here. Only the
       ::before is turned off; the header's green background rule doesn't
       use ::before at all, so it's unaffected and still applies. */
    .whats-included__col-header.is-highlighted::before,
    .whats-included__cell.is-highlighted::before {
        display: none;
    }
}