/**
 * Copyright (c) 2026 DNA Genics, S.L. All rights reserved.
 *
 * Heritage storefront, catalog cards, and product detail.
 */

.store-v4 {
    --store-v4-accent: #765b33;
    --store-v4-control-line: #827c70;
    --store-v4-action: var(--hd-primary);
    --store-v4-action-hover: #315343;
    --store-v4-action-text: #fff;
    --store-v4-gutter: clamp(.875rem, 3vw, 3rem);
    padding-top: calc(var(--nav-height, 72px) + 8px);
    padding-bottom: clamp(3rem, 7vw, 6rem);
    background: var(--hd-bg);
    color: var(--hd-ink);
    font-family: var(--hd-sans);
    line-height: 1.55;
}

:is([data-theme="dark"], .theme-dark, .dark-theme) .store-v4,
.store-v4:is([data-theme="dark"], .theme-dark, .dark-theme) {
    --store-v4-accent: var(--hd-gold);
    --store-v4-control-line: #819980;
    --store-v4-action: var(--hd-gold);
    --store-v4-action-hover: #eed79f;
    --store-v4-action-text: #18291f;
}

.store-v4 [hidden] {
    display: none !important;
}

.store-v4 :is(a, button, input, select, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--store-v4-accent);
    outline-offset: 3px;
}

.store-v4-shell {
    width: min(100% - 2 * var(--store-v4-gutter), 88rem);
    margin-inline: auto;
}

.store-v4-shell :where(section, nav) {
    padding: 0;
}

.store-v4-shell :is(h1, h2, h3, h4, p) {
    margin: 0;
}

.store-v4-shell :is(h1, h2, h3, h4) {
    color: var(--hd-ink);
    font-family: var(--hd-serif);
    font-weight: 600;
    line-height: 1.06;
}

.store-v4-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.store-v4-hero {
    padding-block: clamp(.5rem, 1vw, .875rem) .625rem;
}

.store-v4-hero h1 {
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 500;
    letter-spacing: -.02em;
}

.store-v4-browse {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: .625rem 1.25rem;
    padding-block-end: .625rem;
    border-block-end: 1px solid var(--hd-line);
}

.store-v4 .store-v4-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .375rem;
    min-width: 0;
    margin: 0;
}

.store-v4 .store-v4-search:has(.store-v4-category) {
    grid-template-columns: clamp(7.75rem, 37vw, 12rem) minmax(0, 1fr);
}

.store-v4-category {
    min-width: 0;
}

.store-v4-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: .375rem;
    min-width: 0;
}

.store-v4 :is(.store-v4-search input:not([type="hidden"]), .store-v4-search select, .store-v4-sort select) {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: .5rem .625rem;
    border: 1px solid var(--store-v4-control-line);
    border-radius: 6px;
    background: var(--hd-surface);
    color: var(--hd-ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.3;
}

.store-v4 :is(.store-v4-search, .store-v4-sort) select {
    appearance: auto;
    background-image: none;
    background-repeat: no-repeat;
}

.store-v4 .store-v4-search select.store-v4-category-select {
    padding-inline: .5rem;
    font-size: .875rem;
}

.store-v4-search input::placeholder {
    color: var(--hd-muted);
    opacity: 1;
}

.store-v4 :is(.store-v4-primary, .store-v4-secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    min-width: 0;
    max-width: 100%;
    padding: .625rem .95rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font: 650 .875rem/1.35 var(--hd-sans);
    text-align: center;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
}

.store-v4 .store-v4-primary {
    border-color: var(--store-v4-action);
    background: var(--store-v4-action);
    color: var(--store-v4-action-text);
}

.store-v4 .store-v4-primary:hover {
    border-color: var(--store-v4-action-hover);
    background: var(--store-v4-action-hover);
    color: var(--store-v4-action-text);
    text-decoration: none;
}

.store-v4 .store-v4-secondary {
    border-color: var(--store-v4-control-line);
    background: var(--hd-surface);
    color: var(--hd-ink);
}

.store-v4 .store-v4-secondary:hover {
    border-color: var(--store-v4-accent);
    background: var(--hd-cream);
    color: var(--hd-ink);
    text-decoration: none;
}

.store-v4 :is(.store-v4-primary, .store-v4-secondary) .dna-icon {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
}

.store-v4-intents { display: none; }

.store-v4-intent-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.store-v4 .store-v4-intent {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    max-inline-size: 100%;
    padding: .375rem .625rem;
    border: 1px solid var(--hd-line);
    border-radius: 6px;
    background: var(--hd-surface);
    color: var(--hd-ink);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.store-v4 .store-v4-intent:hover,
.store-v4 .store-v4-intent[aria-current]:not([aria-current="false"]) {
    border-color: var(--store-v4-accent);
    background: var(--hd-cream);
    color: var(--hd-ink);
    text-decoration: none;
}

.store-v4 .store-v4-intent[aria-current]:not([aria-current="false"]) {
    box-shadow: inset 0 -2px var(--store-v4-accent);
}

.store-v4 .store-v4-catalog {
    scroll-margin-top: calc(var(--nav-height, 72px) + 1rem);
}

.store-v4-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .375rem 1rem;
    padding-block: .375rem;
}

.store-v4 .store-v4-count {
    color: var(--hd-muted);
    font-size: .8125rem;
}

.store-v4-sort {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .375rem;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

.store-v4-sort > button { cursor: pointer; }

:is([data-theme="dark"], .theme-dark, .dark-theme) .store-v4.hd-page :is(.store-v4-search, .store-v4-search-row, .store-v4-category, .store-v4-sort) {
    background-color: transparent !important;
}

.store-v4-sort label:not(.store-v4-visually-hidden) {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--hd-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.store-v4 .store-v4-sort select {
    width: 100%;
    max-width: 100%;
}

.store-v4-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    padding-block: .375rem;
}

.store-v4 :is(.store-v4-chip, .store-v4-reset) {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    max-width: 100%;
    padding: .375rem .75rem;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--hd-ink);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
}

.store-v4 .store-v4-chip {
    border-color: var(--hd-line);
    background: var(--hd-surface);
    text-decoration: none;
}

.store-v4 .store-v4-chip:hover,
.store-v4 .store-v4-chip[aria-current]:not([aria-current="false"]) {
    border-color: var(--store-v4-accent);
    background: var(--hd-cream);
    color: var(--hd-ink);
    text-decoration: none;
}

.store-v4 .store-v4-chip[aria-current]:not([aria-current="false"]) {
    box-shadow: inset 0 -2px var(--store-v4-accent);
}

.store-v4 .store-v4-reset {
    color: var(--store-v4-accent);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.store-v4 .store-v4-group + .store-v4-group {
    margin-top: clamp(1.75rem, 4vw, 3.5rem);
}

.store-v4-toolbar + :is(.store-v4-group, .store-v4-empty) {
    margin-top: .5rem;
}

.store-v4-group h3 {
    margin-bottom: .5rem;
    font-size: clamp(1.5rem, 2.3vw, 1.95rem);
}

.store-v4-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.875rem, 2vw, 1.5rem);
}

.store-v4-grid:has(.store-v4-card details[open]) { align-items: start; }

.store-v4-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--hd-line);
    border-radius: 10px;
    background: var(--hd-surface);
}

.store-v4-card-media {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    inline-size: 100%;
    block-size: clamp(7rem, 12vw, 9.5rem);
    overflow: hidden;
    border-start-start-radius: 9px;
    border-start-end-radius: 9px;
    border-block-end: 1px solid var(--hd-line);
    background: var(--hd-cream);
}

.store-v4-card-media > .dna-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.store-v4-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
}

.store-v4-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    min-width: 0;
    padding: clamp(.75rem, 1.4vw, 1.125rem);
}

.store-v4-card-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}

.store-v4-card-labels:empty { display: none; }

.store-v4-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: 100%;
    padding: .25rem .5rem;
    border-radius: 4px;
    background: var(--hd-sage);
    color: var(--hd-ink);
    font-size: .75rem;
    font-weight: 650;
    line-height: 1.3;
}

.store-v4-card h4 {
    font-size: clamp(1.5rem, 2.1vw, 1.875rem);
}

.store-v4-card :is(.store-v4-description, .store-v4-requirements) {
    color: var(--hd-muted);
    font-size: .875rem;
    line-height: 1.45;
}

.store-v4-card .store-v4-requirements {
    display: grid;
    gap: .125rem;
    margin: 0;
    color: var(--hd-ink);
    font-size: .8rem;
    font-weight: 550;
}

.store-v4-requirements ul {
    margin: 0;
    padding-inline-start: 1.1rem;
}

.store-v4-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: .625rem;
    padding-block-start: .5rem;
    border-block-start: 1px solid var(--hd-line);
}

.store-v4-offer:has(> .store-v4-inclusions) {
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
}

.store-v4-offer:has(> .store-v4-inclusions) > .store-v4-price {
    justify-content: flex-end;
    max-inline-size: 9rem;
    text-align: end;
}

.store-v4-inclusions {
    min-width: 0;
    color: var(--hd-ink);
    font-size: .8125rem;
    line-height: 1.35;
}

.store-v4-inclusions ul {
    margin: .125rem 0 0;
    padding-inline-start: 1.1rem;
}

.store-v4 .store-v4-inclusions-more > summary {
    min-block-size: 1.75rem;
    padding-block: .25rem;
    color: var(--store-v4-accent);
    font-weight: 600;
    cursor: pointer;
}

.store-v4-inclusions-more > summary:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.store-v4-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
}

.store-v4-actions > .store-v4-card-checkout,
.store-v4-actions:not(:has(> .store-v4-wishlist:not([hidden]))) > .store-v4-primary {
    grid-column: 1 / -1;
    min-inline-size: 0;
}

.store-v4 a:is(.store-v4-card-checkout, .store-v4-detail-option-link) {
    display: grid;
    place-items: center;
    min-block-size: 2.75rem;
    padding-block: .625rem;
    color: var(--store-v4-accent);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.store-v4-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .125rem .375rem;
    font-variant-numeric: tabular-nums;
}

.store-v4-price :is(.store-v4-price-current, .store-v4-price-old) {
    direction: ltr;
    unicode-bidi: isolate;
}

.store-v4-price-current {
    color: var(--hd-ink);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.store-v4-price-old,
.store-v4-unit {
    color: var(--hd-muted);
    font-size: .8rem;
}

.store-v4-price-old { text-decoration: line-through; }

.store-v4 .store-v4-wishlist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    max-width: 100%;
    padding: .375rem .625rem;
    border: 1px solid var(--store-v4-control-line);
    border-radius: 6px;
    background: var(--hd-surface);
    color: var(--hd-ink);
    font: 600 .8rem/1.3 var(--hd-sans);
    text-align: center;
    cursor: pointer;
}

.store-v4 .store-v4-wishlist:hover,
.store-v4 .store-v4-wishlist[aria-pressed="true"] {
    border-color: var(--store-v4-accent);
    background: var(--hd-cream);
    color: var(--store-v4-accent);
}

.store-v4-wishlist .dna-icon {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
}

.store-v4 :is(.store-v4-more, .store-v4-variants) {
    min-width: 0;
}

.store-v4 :is(.store-v4-more, .store-v4-variants) > summary {
    display: list-item;
    min-height: 2.75rem;
    padding-block: .625rem;
    padding-inline-end: .25rem;
    color: var(--store-v4-accent);
    font-size: .875rem;
    font-weight: 650;
    line-height: 1.5;
    cursor: pointer;
}

.store-v4 :is(.store-v4-more, .store-v4-variants) > summary:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.store-v4-more { margin-top: .75rem; }

.store-v4-more[open] > summary { margin-bottom: .75rem; }

.store-v4-variants > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.store-v4-variant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: .5rem;
    padding-block: .625rem;
    border-block-start: 1px solid var(--hd-line);
}

.store-v4-variant > div { grid-column: 1 / -1; }

.store-v4-empty {
    padding: clamp(1rem, 4vw, 2rem);
    border: 1px solid var(--hd-line);
    border-radius: 10px;
    background: var(--hd-cream);
}

.store-v4-empty h3 {
    margin-bottom: .5rem;
    font-size: 1.75rem;
}

@media (min-width: 58rem) {
    .store-v4-browse:has(.store-v4-intents):has(.store-v4-search) {
        grid-template-columns: minmax(0, 1fr) clamp(15rem, 25vw, 26rem);
    }

    .store-v4-intents { display: block; }
    .store-v4-category { display: none; }

    .store-v4 .store-v4-search:has(.store-v4-category) {
        grid-template-columns: minmax(0, 1fr);
    }

    .store-v4-search { max-inline-size: 28rem; }

    .store-v4-sort label:not(.store-v4-visually-hidden) {
        grid-column: auto;
    }

    .store-v4-sort:has(label:not(.store-v4-visually-hidden)) {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .store-v4-offer:has(> .store-v4-inclusions) {
        margin-block-start: auto;
    }
}

@media (max-width: 57.999rem) {
    .store-v4-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-v4 .store-v4-search-button {
        min-inline-size: 2.75rem;
        padding-inline: .625rem;
    }

    .store-v4-search-button-label {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 36rem) {
    .store-v4-grid { grid-template-columns: minmax(0, 1fr); }
}

.store-v4-detail .store-v4-shell {
    max-inline-size: 75rem;
}

.store-v4 a.store-v4-detail-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-block-size: 2.75rem;
    color: var(--store-v4-accent);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.store-v4 a.store-v4-detail-back:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.store-v4-detail-back .dna-icon {
    inline-size: .875rem;
    block-size: .875rem;
}

[dir="rtl"] .store-v4-detail-back .dna-icon {
    transform: scaleX(-1);
}

.store-v4-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-block-start: .5rem;
}

.store-v4-detail-intro {
    display: grid;
    align-content: start;
    gap: clamp(1rem, 2vw, 1.5rem);
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.store-v4-detail-heading {
    display: grid;
    justify-items: start;
    gap: .625rem;
}

.store-v4-detail-intro h1 {
    font-size: clamp(2.25rem, 4.4vw, 3.75rem);
    font-weight: 500;
    line-height: 1.04;
}

.store-v4-detail-summary {
    display: grid;
    align-items: center;
    gap: 1rem clamp(1rem, 3vw, 2rem);
}

.store-v4-detail-summary:has(> .store-v4-detail-description):has(> .store-v4-detail-media img:not([hidden])) {
    grid-template-columns: clamp(7rem, 26vw, 15rem) minmax(0, 1fr);
}

.store-v4-detail-media:has(img[hidden]) {
    display: none;
}

.store-v4-detail-media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 1px solid var(--hd-line);
    border-radius: 12px;
    background: var(--hd-surface);
}

.store-v4-detail-description {
    max-inline-size: 62ch;
    color: var(--hd-ink);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.store-v4-detail-more {
    max-inline-size: 70ch;
    border-block: 1px solid var(--hd-line);
}

.store-v4-detail-more summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 2.75rem;
    color: var(--hd-ink);
    font-size: .9375rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.store-v4-detail-more summary::-webkit-details-marker {
    display: none;
}

.store-v4-detail-more summary .dna-icon {
    inline-size: .875rem;
    block-size: .875rem;
    transition: transform .2s ease;
}

.store-v4-detail-more[open] summary .dna-icon {
    transform: rotate(180deg);
}

.store-v4-detail-more p {
    padding-block-end: 1rem;
    color: var(--hd-muted);
    font-size: .9375rem;
    line-height: 1.7;
}

.store-v4-detail-purchase {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-inline-size: 0;
    padding: clamp(1.125rem, 2.75vw, 1.75rem);
    border: 1px solid var(--hd-line);
    border-radius: 14px;
    background: var(--hd-surface);
    box-shadow: 0 1px 2px rgba(24, 41, 31, .06), 0 12px 32px rgba(24, 41, 31, .07);
    overflow-wrap: anywhere;
}

.store-v4-detail .store-v4-detail-section h2,
.store-v4-detail-options legend {
    color: var(--hd-ink);
    font-family: var(--hd-serif);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 600;
    line-height: 1.14;
}

.store-v4-detail-purchase > .store-v4-price {
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .625rem;
}

.store-v4-detail-purchase > .store-v4-price .store-v4-price-current {
    font-size: clamp(2rem, 3.6vw, 2.5rem);
    line-height: 1.05;
}

.store-v4-detail-purchase > .store-v4-price .store-v4-price-old {
    font-size: 1rem;
}

.store-v4-detail-savings {
    justify-self: start;
    margin-block-start: -.375rem;
    padding: .25rem .625rem;
    border: 1px solid var(--store-v4-accent);
    border-radius: 999px;
    color: var(--store-v4-accent);
    font-size: .8125rem;
    font-weight: 600;
}

.store-v4-detail-delivery {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--hd-ink);
    font-size: .875rem;
    font-weight: 600;
}

.store-v4-detail-delivery .dna-icon,
.store-v4-detail-assurance .dna-icon {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--store-v4-accent);
}

.store-v4-detail-options {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.store-v4-detail-options legend {
    margin-block-end: .625rem;
    font-size: 1.25rem;
}

.store-v4-detail-option-list {
    display: grid;
    gap: .5rem;
}

.store-v4-detail-option {
    display: grid;
    min-inline-size: 0;
}

.store-v4-detail-option label {
    display: grid;
    align-items: start;
    gap: .625rem;
    margin: 0;
    padding: .75rem .875rem;
    border: 1px solid var(--hd-line);
    border-radius: 8px;
}

.store-v4-detail-option label:has(input:not([hidden])) {
    grid-template-columns: auto minmax(0, 1fr);
    border-color: var(--store-v4-control-line);
    cursor: pointer;
}

.store-v4-detail-option label:has(input:checked:not([hidden])) {
    border-color: var(--store-v4-accent);
    background: var(--hd-cream);
}

.store-v4-detail-option input {
    inline-size: 1rem;
    block-size: 1rem;
    margin: .2rem 0 0;
    accent-color: var(--store-v4-accent);
}

.store-v4-detail-option-info {
    display: grid;
    gap: .125rem;
    min-inline-size: 0;
    font-size: .9375rem;
}

.store-v4-detail-requirements {
    padding-block-start: .875rem;
    border-block-start: 1px solid var(--hd-line);
}

.store-v4-detail .store-v4-detail-requirements h2 {
    margin-block-end: .25rem;
    font: 650 .875rem/1.35 var(--hd-sans);
}

.store-v4-detail-requirements ul {
    margin: 0;
    padding: 0;
    color: var(--hd-muted);
    font-size: .875rem;
    list-style: none;
}

.store-v4-detail-purchase > .store-v4-primary {
    inline-size: 100%;
    min-block-size: 3rem;
    font-size: 1rem;
}

.store-v4-detail-assurance {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: .875rem 0 0;
    border-block-start: 1px solid var(--hd-line);
    color: var(--hd-muted);
    font-size: .8125rem;
    list-style: none;
}

.store-v4-detail-assurance li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

.store-v4-detail-assurance a {
    color: var(--store-v4-accent);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.store-v4-detail-content {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    min-inline-size: 0;
}

.store-v4-detail .store-v4-detail-section {
    display: grid;
    justify-items: start;
    gap: .75rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--hd-line);
}

.store-v4-detail-section > p {
    color: var(--hd-muted);
    font-size: .9375rem;
}

.store-v4-detail-section ul {
    margin: 0;
    padding-inline-start: 1.25rem;
}

.store-v4-detail-section li + li {
    margin-block-start: .4rem;
}

.store-v4-detail .store-v4-detail-inclusions > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: .625rem;
    inline-size: 100%;
    padding: 0;
    list-style: none;
}

.store-v4-detail-inclusions li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .75rem .875rem;
    border: 1px solid var(--hd-line);
    border-radius: 10px;
    background: var(--hd-surface);
    font-size: .9375rem;
    line-height: 1.4;
}

.store-v4-detail-inclusions li + li {
    margin-block-start: 0;
}

.store-v4-detail-inclusions li .dna-icon {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    margin-block-start: .15rem;
    color: var(--store-v4-accent);
}

.store-v4-detail-inclusions strong {
    font-weight: 600;
}

.store-v4-detail-inclusion-note {
    display: block;
    margin-block-start: .2rem;
    color: var(--hd-muted);
    font-size: .8125rem;
}

.store-v4-detail-upgrades li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .625rem;
}

.store-v4-detail-links {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}

@media (min-width: 58rem) {
    .store-v4-detail-grid {
        grid-template-columns: minmax(0, 1fr) minmax(19rem, .42fr);
        grid-template-areas: "intro purchase" "content purchase";
        align-items: start;
        column-gap: clamp(2rem, 4vw, 3.5rem);
    }

    .store-v4-detail-intro { grid-area: intro; }
    .store-v4-detail-purchase {
        grid-area: purchase;
        position: sticky;
        inset-block-start: 96px;
    }
    .store-v4-detail-content { grid-area: content; }
}