:root {
    --dks-ink: #141816;
    --dks-ink-soft: #252d29;
    --dks-paper: #f5f6f2;
    --dks-surface: #ffffff;
    --dks-muted: #667069;
    --dks-border: #dce2dc;
    --dks-mint: #9cf0cf;
    --dks-mint-soft: #e9faf2;
    --dks-mint-deep: #47c894;
    --dks-radius-sm: 12px;
    --dks-radius-md: 20px;
    --dks-radius-lg: 32px;
    --dks-shadow: 0 18px 55px rgba(20, 24, 22, 0.08);
}

/*
 * Blocksy prints its own palette into an inline `:root` block in the document
 * head, which lands after this stylesheet at equal specificity and therefore
 * wins. Declaring the same custom properties on `body` puts them one level
 * deeper than `:root`, so they are inherited by everything that reads them and
 * the parent theme's defaults stop leaking through. Without this the storefront
 * runs on Blocksy blue: links render #2872fa and borders #e1e8ed.
 */
body {
    --theme-palette-color-1: #1c7758;
    --theme-palette-color-2: #12593f;
    --theme-palette-color-3: #475149;
    --theme-palette-color-4: #141816;
    --theme-palette-color-5: #dce2dc;
    --theme-palette-color-6: #eef1ec;
    --theme-palette-color-7: #f5f6f2;
    --theme-palette-color-8: #ffffff;
    --theme-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --theme-button-background-initial-color: var(--dks-ink);
    --theme-button-background-hover-color: #33413a;
    --theme-button-border-radius: 999px;
    --theme-normal-container-max-width: 1320px;
    --theme-link-initial-color: var(--theme-palette-color-1);
    --theme-link-hover-color: var(--theme-palette-color-2);
}

/*
 * A product card can appear inside page content — the empty cart carries the same
 * row the front page does — and its own links must keep the card's styling rather
 * than pick up the prose underline meant for a sentence. Hence the exclusions.
 */
/*
 * Page copy links to the policy pages, so an in-text link has to read as a link
 * without shouting. Palette green plus a hairline underline carries that at body
 * size; the underline thickens on hover rather than the colour changing, which
 * keeps the paragraph colour-stable while the pointer moves through it.
 */
.digital-key-store .entry-content a:not(.wp-block-button__link):not(.button):not(.ct-media-container):not(.woocommerce-loop-product__link):not(.digital-key-store-row__see-all),
.digital-key-store .wp-block-post-content a:not(.wp-block-button__link):not(.button):not(.ct-media-container):not(.woocommerce-loop-product__link):not(.digital-key-store-row__see-all) {
    color: var(--theme-palette-color-1);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(28, 119, 88, 0.4);
    transition: text-decoration-color 150ms ease, color 150ms ease;
}

.digital-key-store .entry-content a:not(.wp-block-button__link):not(.button):not(.ct-media-container):not(.woocommerce-loop-product__link):not(.digital-key-store-row__see-all):hover,
.digital-key-store .wp-block-post-content a:not(.wp-block-button__link):not(.button):not(.ct-media-container):not(.woocommerce-loop-product__link):not(.digital-key-store-row__see-all):hover {
    color: var(--theme-palette-color-2);
    text-decoration-color: currentColor;
}

html {
    scroll-behavior: smooth;
}

body.digital-key-store {
    color: var(--dks-ink);
    background: var(--dks-paper);
    font-family: var(--theme-font-family);
}

body.digital-key-store h1,
body.digital-key-store h2,
body.digital-key-store h3 {
    color: var(--dks-ink);
    letter-spacing: -0.035em;
}

body.digital-key-store a,
body.digital-key-store button,
body.digital-key-store input,
body.digital-key-store select {
    outline-offset: 4px;
}

body.digital-key-store :focus-visible {
    outline: 3px solid var(--dks-mint-deep) !important;
}

.digital-key-store [data-header*="type-1"] {
    --header-height: 86px;
}

.digital-key-store [data-header*="type-1"] .ct-header [data-row*="middle"] {
    --height: 86px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--dks-border);
    backdrop-filter: blur(16px);
}

/*
 * Image replacement for the header lockup.
 *
 * Blocksy only inlines a logo that exists as a WordPress attachment, and adding
 * one would mean allowing SVG uploads site-wide — a needless attack surface for a
 * file the theme already ships. Painting the lockup behind the title keeps the
 * site name in the document for assistive technology while showing the mark.
 */
.digital-key-store [data-id="logo"] .site-title {
    margin: 0;
    font-size: 0;
    line-height: 0;
}

.digital-key-store [data-id="logo"] .site-title a {
    display: block;
    /* The lockup's own canvas is 262x56, so this renders it 1:1 with no scaling. */
    width: 262px;
    max-width: 56vw;
    height: 56px;
    overflow: hidden;
    background: url("../images/logo-horizontal.svg") left center / contain no-repeat;
    text-indent: 110%;
    white-space: nowrap;
}

.digital-key-store [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
    color: var(--dks-ink);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.digital-key-store-commerce {
    position: relative;
    z-index: 8;
    background: var(--dks-surface);
    border-bottom: 1px solid var(--dks-border);
}

.digital-key-store-commerce__inner {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(280px, 420px) auto;
    align-items: center;
    gap: 24px;
    width: min(90vw, 1320px);
    min-height: 70px;
    margin: 0 auto;
}

.digital-key-store-categories,
.digital-key-store-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}


.digital-key-store-categories a,
.digital-key-store-actions a {
    flex: none;
    color: var(--dks-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.digital-key-store-categories a:hover,
.digital-key-store-actions a:hover {
    color: #176a4c;
}

.digital-key-store-categories__primary {
    padding: 8px 13px;
    border-radius: 999px;
}

.digital-key-store-categories__primary.is-current {
    color: #0d432f !important;
    background: var(--dks-mint);
}

.digital-key-store-categories__group {
    position: relative;
    flex: none;
    display: inline-flex;
}

.digital-key-store-categories__panel {
    position: absolute;
    top: calc(100% + 14px);
    left: -12px;
    z-index: 40;
    display: grid;
    gap: 2px;
    min-width: 210px;
    padding: 8px;
    background: var(--dks-surface);
    border: 1px solid var(--dks-border);
    border-radius: var(--dks-radius-sm);
    box-shadow: var(--dks-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

/* Bridges the gap between the trigger and the card. Without it the pointer
   crosses dead space on the way down and the panel closes underneath it. */
.digital-key-store-categories__panel::before {
    content: "";
    position: absolute;
    inset: -14px 0 100% 0;
}

.digital-key-store-categories__group:hover .digital-key-store-categories__panel,
.digital-key-store-categories__group:focus-within .digital-key-store-categories__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.digital-key-store-categories__panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 10px;
    border-radius: 9px;
    font-weight: 600;
    white-space: nowrap;
}

.digital-key-store-categories__panel a:hover,
.digital-key-store-categories__panel a:focus-visible {
    background: var(--dks-mint-soft);
}

.digital-key-store-categories__count {
    color: var(--dks-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.digital-key-store-search {
    display: grid;
    grid-template-columns: 1fr 42px;
    min-width: 0;
    overflow: hidden;
    background: #eef1ed;
    border: 1px solid transparent;
    border-radius: 999px;
}

.digital-key-store-search:focus-within {
    background: var(--dks-surface);
    border-color: var(--dks-mint-deep);
}

.digital-key-store-search input[type="search"] {
    min-width: 0;
    height: 42px;
    padding: 0 4px 0 18px;
    color: var(--dks-ink);
    background: transparent;
    border: 0;
    font-size: 14px;
}

.digital-key-store-search button {
    display: grid;
    min-height: 42px;
    padding: 0;
    place-items: center;
    color: var(--dks-ink);
    background: transparent;
    border: 0;
    font-size: 24px;
}

.digital-key-store-search button:hover {
    color: #0d432f;
    background: var(--dks-mint);
}

.digital-key-store-actions {
    justify-content: flex-end;
}

.digital-key-store-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.digital-key-store-cart-count {
    display: inline-grid;
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    place-items: center;
    color: var(--dks-ink);
    background: var(--dks-mint);
    border-radius: 999px;
    font-size: 11px;
}

.woocommerce-shop .hero-section {
    display: none;
}

.digital-key-store .site-main > .ct-container {
    padding-top: 34px;
}

.digital-key-store-hero {
    position: relative;
    min-height: 510px;
    margin: 0 0 76px;
    padding: clamp(40px, 6vw, 82px);
    overflow: hidden;
    color: #effbf5;
    background:
        radial-gradient(circle at 78% 15%, rgba(156, 240, 207, 0.18), transparent 29%),
        linear-gradient(135deg, #111512 0%, #1d2822 58%, #152b21 100%);
    border-radius: var(--dks-radius-lg);
    box-shadow: var(--dks-shadow);
}

.digital-key-store-hero::after {
    position: absolute;
    right: -120px;
    bottom: -240px;
    width: 540px;
    height: 540px;
    background: var(--dks-mint);
    border-radius: 50%;
    content: "";
    opacity: 0.08;
}

/*
 * Every slide sits in the same single grid cell, so the block is always as tall as
 * its tallest slide and nothing on the page moves when the hero advances. Hidden
 * slides keep `visibility: hidden` rather than `display: none` for exactly that
 * reason: they must still take part in sizing the cell.
 */
.digital-key-store-hero__slides {
    display: grid;
}

.digital-key-store-hero__slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 38px;
    align-items: center;
    transition: opacity 480ms ease, visibility 480ms;
}

.digital-key-store-hero__slide:not(.is-current) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*
 * The dots do nothing until the script has claimed the carousel, and a control
 * that does nothing is worse than no control, so they stay out of the document's
 * visual flow until then. Without JavaScript the hero is simply its first slide.
 */
.digital-key-store-hero__dots {
    position: relative;
    z-index: 2;
    display: none;
    gap: 10px;
    margin: 34px 0 0;
}

.digital-key-store-hero[data-dks-hero-enhanced] .digital-key-store-hero__dots {
    display: flex;
}

.digital-key-store-hero__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(233, 251, 242, 0.32);
    cursor: pointer;
    transition: background 200ms ease, width 200ms ease;
}

/*
 * The current dot stretches instead of only changing colour. At ten pixels on a
 * dark field a colour shift alone is close to invisible, and it is the sole state
 * anyone has for working out where they are.
 */
.digital-key-store-hero__dot.is-current {
    width: 28px;
    border-radius: 999px;
    background: var(--dks-mint);
}

.digital-key-store-hero__dot:hover {
    background: #c4ffe8;
}

.digital-key-store-hero__copy {
    position: relative;
    z-index: 2;
    align-self: center;
    max-width: 760px;
}

.digital-key-store-eyebrow {
    margin: 0 0 13px;
    color: #176a4c;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.digital-key-store-hero .digital-key-store-eyebrow {
    color: var(--dks-mint);
}

.digital-key-store .digital-key-store-hero h1,
.digital-key-store .digital-key-store-hero__title {
    max-width: 740px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(48px, 6.3vw, 88px);
    font-weight: 850;
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.digital-key-store-hero p:not(.digital-key-store-eyebrow) {
    max-width: 640px;
    margin: 28px 0 34px;
    color: #c7d1cb;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.6;
}

.digital-key-store-hero__cta {
    display: inline-flex;
    min-height: 50px;
    padding: 0 24px;
    align-items: center;
    justify-content: center;
    color: #0f281e;
    background: var(--dks-mint);
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
}

.digital-key-store-hero__cta:hover {
    color: var(--dks-ink);
    background: #c4ffe8;
    transform: translateY(-2px);
}

.digital-key-store-hero__art {
    position: relative;
    z-index: 2;
    /*
     * The hero reserves 510px and spends 164 of it on padding, so 346 is every
     * pixel the artwork can have without making the block taller for all three
     * slides. The gift card stack is sized against this ceiling.
     */
    min-height: 346px;
}

.digital-key-store-hero__tile {
    position: absolute;
    display: grid;
    width: 180px;
    aspect-ratio: 0.78;
    place-items: center;
    color: var(--dks-ink);
    background: var(--dks-mint);
    border: 8px solid rgba(255, 255, 255, 0.35);
    border-radius: 28px;
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.28);
    font-size: 56px;
    font-weight: 900;
}

.digital-key-store-hero__tile--one {
    top: 35px;
    left: 4%;
    transform: rotate(-13deg);
}

.digital-key-store-hero__tile--two {
    top: 2px;
    right: 2%;
    color: #fff;
    background: #3b4c44;
    transform: rotate(9deg);
}

.digital-key-store-hero__tile--three {
    right: 20%;
    bottom: 5px;
    width: 145px;
    background: #f7faf7;
    transform: rotate(3deg);
}

/*
 * Real catalog covers.
 *
 * The 8:7 shape is forced by the data: every visible cover has that ratio, and
 * cropping one into the lettered tiles' 0.78 portrait would cut the game title
 * off the artwork. Landscape cards also overlap more than portrait ones at the
 * same offsets, so the composition is spread wider here.
 */
.digital-key-store-hero__art--covers .digital-key-store-hero__tile {
    /* The art column is ~354 px, so three landscape cards only read at this
       width; at 232 px they buried each other. */
    width: 190px;
    aspect-ratio: 8 / 7;
    background: var(--dks-hero-cover) center / cover no-repeat;
    border-width: 5px;
    border-radius: 16px;
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.45);
}

.digital-key-store-hero__art--covers .digital-key-store-hero__tile--one {
    top: 14px;
    left: 0;
    transform: rotate(-10deg);
}

.digital-key-store-hero__art--covers .digital-key-store-hero__tile--two {
    top: 0;
    right: 0;
    background: var(--dks-hero-cover) center / cover no-repeat;
    transform: rotate(7deg);
}

/* Overlaps the pair above rather than sitting below it, so the three read as one
   cluster; at `bottom` the third card detached from the group. */
.digital-key-store-hero__art--covers .digital-key-store-hero__tile--three {
    right: auto;
    bottom: auto;
    top: 112px;
    left: 50%;
    width: 190px;
    background: var(--dks-hero-cover) center / cover no-repeat;
    transform: translateX(-50%) rotate(2deg);
}

/*
 * The labelled slide.
 *
 * The metaphor comes from the shop's own mark, which already carries a keyhole: a
 * key either fits or it does not, and platform and region are what decide that. The
 * bow repeats the seal's hexagon so the two read as one family of shapes rather
 * than two objects that happen to share a slide.
 *
 * The bow is a real ring — two subpaths and `evenodd`, so the hole is transparent
 * rather than a shape painted in the background colour, which would drift the
 * moment the gradient behind it moved.
 *
 * The dotted gap is deliberate. The key stops short of the keyhole, so the eye
 * finishes the movement itself, and an action left unfinished holds attention
 * longer than one already completed.
 */
.digital-key-store-hero__art--labelled {
    display: grid;
    place-items: center;
}

.digital-key-store-hero__lock {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    /*
     * The canvas is cropped to the drawing rather than padded around it, so the
     * whole column goes to the key and the lock instead of to empty margin.
     */
    max-width: 380px;
    height: auto;
}

/*
 * The gift card slide.
 *
 * Landscape cards rather than portrait covers, because that is the shape of the
 * thing being sold. Names are typeset, never a platform's own mark: the shop has
 * no licence to reproduce those.
 */
/*
 * A gift card, not a coloured rectangle.
 *
 * The light edge along the top and the dark one along the bottom are how a real
 * object behaves under a single overhead light, and they do more for the sense of
 * material than the fill does. Name at the top, price at the bottom, both clear of
 * the artwork behind them — the anatomy of a voucher rather than a label.
 */
/*
 * Only the gift card slide needs the extra height, and asking for it here rather
 * than on every slide keeps the other two centred in the taller cell instead of
 * stranded at the top of it.
 */
.digital-key-store-hero__art--cards {
    min-height: 406px;
}

.digital-key-store-hero__tile--card {
    width: 240px;
    aspect-ratio: 8 / 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 18px;
    overflow: hidden;
    color: #ffffff;
    border: 0;
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 26px 52px rgba(0, 0, 0, 0.45);
    font-size: inherit;
    font-weight: inherit;
}

/*
 * One specular sweep, at the same angle on all three. Different angles would read
 * as three light sources and the stack would stop looking like one photograph.
 */
.digital-key-store-hero__tile--card::after {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(
        112deg,
        transparent 26%,
        rgba(255, 255, 255, 0.15) 44%,
        rgba(255, 255, 255, 0.03) 52%,
        transparent 68%
    );
    content: "";
}

/*
 * The hardware sits behind the copy at a sixth of full strength and runs off two
 * edges. Shown whole and bright it would read as clip art; cropped and sunk into
 * the fill it reads as printing on the card.
 */
.digital-key-store-hero__tile-scene {
    position: absolute;
    right: -32px;
    bottom: -16px;
    z-index: 1;
    width: 223px;
    height: 152px;
    /*
     * No group opacity here. Each fill inside the scene carries its own alpha, and
     * dimming the whole thing again would flatten the difference between a lit edge
     * and a recess — which is the only thing holding the volume together.
     */
    opacity: 1;
}

.digital-key-store-hero__tile-name {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.digital-key-store-hero__tile-value {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-size: 23px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/*
 * Platform colours held well below full saturation. At full strength they fight
 * the hero's own dark green and each other; darkened they read as the platform
 * without turning the slide into three signal lights.
 */
/*
 * The stack is stepped by slightly more than a card height, so each card clears the
 * name and price of the one above it. Overlapping them further looked better empty
 * but buried the very lines the cards exist to show, and the column is 363px wide
 * at the widest, so nothing may hang past its edges either.
 */
.digital-key-store-hero__tile--steam {
    top: 0;
    left: 0;
    background: linear-gradient(150deg, #31597c, #152232);
    transform: rotate(-6deg);
}

.digital-key-store-hero__tile--xbox {
    top: 128px;
    right: 0;
    background: linear-gradient(150deg, #1d6b28, #0d2f12);
    transform: rotate(3deg);
}

.digital-key-store-hero__tile--playstation {
    top: 256px;
    left: 6%;
    background: linear-gradient(150deg, #1f4d9e, #0d1c3c);
    transform: rotate(-2deg);
}

.digital-key-store-category-strip {
    margin: 0 0 78px;
}

.digital-key-store-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 26px;
}

.digital-key-store-section-heading h2 {
    margin: 0;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1;
}

.digital-key-store-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

/*
 * A category tile is an object on the page, not a box drawn on it.
 *
 * Dark mass, a light hairline along the top edge and a dark one along the bottom:
 * the same material as the mark and the hero, and the same trick that makes the
 * gift cards read as things rather than fills. The page stays paper; the tiles sit
 * on it.
 */
.digital-key-store-category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    min-height: 168px;
    padding: 20px 22px;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(155deg, #242e29, #0f1411);
    border: 0;
    border-radius: var(--dks-radius-md);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55),
        0 20px 44px rgba(20, 24, 22, 0.2);
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

/*
 * One sweep, same angle on every tile. It sits above the artwork, so it is kept
 * weak — at full strength it washes out exactly the diagonal the hardware runs
 * along and the scene stops reading.
 */
.digital-key-store-category-card::after {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(
        112deg,
        transparent 34%,
        rgba(255, 255, 255, 0.07) 48%,
        transparent 62%
    );
    content: "";
}

.digital-key-store-category-card:hover {
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55),
        0 28px 60px rgba(20, 24, 22, 0.28);
    transform: translateY(-3px);
}

/*
 * The lead tile takes two columns and both rows, so the grid stops reading as a
 * list of equals. It is the category with the most catalog behind it, so the space
 * it takes matches the space it occupies in the shop.
 */
.digital-key-store-category-card--feature {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 350px;
}

/*
 * The scene. Sunk to a quarter strength and run off two edges: shown whole and
 * bright it would be clip art, cropped and dimmed it is printing on the surface.
 * It scales with the tile — one size for both would leave the lead tile looking
 * empty rather than roomy.
 */
.digital-key-store-category-card__mark {
    position: absolute;
    right: -24px;
    bottom: -18px;
    z-index: 1;
    display: block;
    width: 210px;
    height: 144px;
    color: #ffffff;
    opacity: 0.26;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.digital-key-store-category-card__mark svg {
    display: block;
    width: 100%;
    height: 100%;
}

.digital-key-store-category-card--feature .digital-key-store-category-card__mark {
    right: -34px;
    bottom: -30px;
    width: 430px;
    height: 293px;
}

.digital-key-store-category-card__body {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 3px;
}

.digital-key-store-category-card__go {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--dks-mint);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    font-size: 15px;
}

.digital-key-store-category-card strong {
    color: #ffffff;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.digital-key-store-category-card--feature strong {
    font-size: 38px;
}

.digital-key-store-category-card small {
    color: rgba(233, 251, 242, 0.66);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/*
 * The one accented tile in the section, and the only way out for someone whose
 * category is not on the board. Mint rather than dark so it reads as an action
 * instead of a fifth category.
 */
.digital-key-store-category-card--all {
    color: #0d432f;
    background: linear-gradient(155deg, var(--dks-mint), var(--dks-mint-deep));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 20px 44px rgba(20, 24, 22, 0.18);
}

.digital-key-store-category-card--all:hover {
    color: #0d432f;
}

.digital-key-store-category-card--all strong {
    color: #0d432f;
}

.digital-key-store-category-card--all small {
    color: rgba(13, 67, 47, 0.72);
}

.digital-key-store-category-card--all .digital-key-store-category-card__go {
    color: #0d432f;
    background: rgba(13, 67, 47, 0.14);
}

/*
 * Obsidian, not pale mint.
 *
 * The block sits low enough on the page that it never meets the dark hero, so a
 * dark mass here splits a long paper page into chapters instead of stacking two
 * dark blocks. The old surface was also the reason the copy failed contrast: grey
 * body text on a pale tint measured around 3:1, under the 4.5:1 a paragraph needs.
 */
.digital-key-store-value-props {
    position: relative;
    max-width: 1080px;
    margin: 0 auto 78px;
    padding: clamp(38px, 5vw, 64px) clamp(24px, 4vw, 58px);
    overflow: hidden;
    border-radius: var(--dks-radius-lg);
    background:
        radial-gradient(circle at 84% 6%, rgba(156, 240, 207, 0.16), transparent 36%),
        linear-gradient(135deg, #111512 0%, #1c2721 62%, #152b21 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 60px rgba(20, 24, 22, 0.16);
}

/*
 * The headline needs an explicit measure, not a `ch` value on this wrapper:
 * `ch` resolves against the wrapper's own 16px font, not the headline's 46px,
 * which collapsed the intro to a 262px column six lines tall.
 */
.digital-key-store-value-props__intro {
    max-width: 820px;
    margin: 0 0 46px;
}

.digital-key-store-value-props__intro .digital-key-store-eyebrow {
    color: var(--dks-mint);
}

.digital-key-store .digital-key-store-value-props__intro h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.08;
}

.digital-key-store-value-props__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Ranged left, not centred. A centred paragraph gives the eye no fixed edge to
 * return to on each new line, which costs more in reading than it buys in
 * symmetry; centring earns its place on a single short line, not on three
 * stacked ones. The hairline above each column does the alignment work the
 * symmetry used to.
 */
.digital-key-store-value-prop {
    display: grid;
    justify-items: start;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    text-align: left;
}

.digital-key-store-value-prop__badge {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    color: var(--dks-mint);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(156, 240, 207, 0.28);
    border-radius: 50%;
}

.digital-key-store-value-prop__icon {
    width: 28px;
    height: 28px;
}

.digital-key-store .digital-key-store-value-prop h3 {
    margin: 6px 0 0;
    color: #ffffff;
    font-size: 22px;
    letter-spacing: -0.03em;
}

.digital-key-store-value-prop p {
    max-width: 34ch;
    margin: 0;
    color: rgba(233, 251, 242, 0.68);
    font-size: 15px;
    line-height: 1.6;
}

/*
 * The empty cart carries its own mark instead of WooCommerce's.
 *
 * The block draws a frowning face through a `mask-image` on a pseudo-element, so
 * the shape can be replaced without touching the page or its markup — the same
 * mechanism, a different silhouette, and nothing to reapply on another install.
 *
 * The shape is the seal as an outline with the keyhole left hollow: the brand's own
 * form, reading as a slot with nothing in it yet. A drawn frown is somebody else's
 * illustration in the one place a visitor is already disappointed.
 *
 * Muted rather than ink or mint: an empty state should be quiet, and an accent here
 * would compete with the row of products directly beneath it.
 */
.digital-key-store .with-empty-cart-icon::before {
    background-color: var(--dks-muted);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M50 6 L86 27 V69 L50 90 L14 69 V27 Z' stroke='%23000' stroke-width='6' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='42' r='9' fill='%23000'/%3E%3Cpath d='M44.5 49 L40 68 H60 L55.5 49 Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M50 6 L86 27 V69 L50 90 L14 69 V27 Z' stroke='%23000' stroke-width='6' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='42' r='9' fill='%23000'/%3E%3Cpath d='M44.5 49 L40 68 H60 L55.5 49 Z' fill='%23000'/%3E%3C/svg%3E");
}

.digital-key-store-product-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.digital-key-store-product-facts li {
    padding: 6px 13px;
    color: var(--dks-ink);
    background: var(--dks-mint-soft);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.digital-key-store-product-availability {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    color: var(--dks-muted);
    font-size: 14px;
}

.digital-key-store-product-availability__dot {
    width: 9px;
    height: 9px;
    background: var(--dks-mint-deep);
    border-radius: 50%;
}

/* Removing the meta layer leaves Blocksy's divider hanging with nothing after it. */
.digital-key-store .ct-product-divider:last-child {
    display: none;
}

.digital-key-store-product-details {
    display: grid;
    gap: 34px;
    /* Only the top margin: the shorthand would zero the inline margins that
       Blocksy's `is-width-constrained` sets to auto, un-centring the block. */
    margin-top: 56px;
}

/* The reading measure lives on the section, so the wrapper can stay the width
   Blocksy's `is-width-constrained` gives it and the text still aligns left. */
.digital-key-store-product-section {
    max-width: 820px;
}

.digital-key-store .digital-key-store-product-section h2 {
    margin: 0 0 14px;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.15;
}

.digital-key-store-product-section__body {
    color: var(--dks-ink-soft);
    font-size: 16px;
    line-height: 1.68;
}

.digital-key-store-product-section__body p {
    margin: 0 0 14px;
}

.digital-key-store-product-section__body p:last-child {
    margin-bottom: 0;
}

/*
 * The gallery has no frame. An earlier version held a fixed 440 px box and filled
 * the space around a small cover with a blurred copy of itself; the owner found
 * that worse than the problem. Without a box, a small cover simply reads as small
 * instead of as a gap.
 */
.digital-key-store.single-product .flexy-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/*
 * Blocksy sets `aspect-ratio: 3/4` inline on the gallery image and a matching
 * height on its media container. An inline declaration outranks a stylesheet, so
 * without `!important` the box keeps that ratio and the artwork is drawn
 * native-size inside a taller container.
 */
.digital-key-store.single-product .flexy-item .ct-media-container {
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
}

/*
 * `scale-down` is the whole trick: it paints at native size when the image fits
 * and behaves as `contain` when it does not. Supplier covers run from 172 px to
 * 2550 px wide, so nothing is ever enlarged and nothing is distorted.
 */
.digital-key-store.single-product .woocommerce-product-gallery__image img,
.digital-key-store.single-product .flexy-items img {
    display: block;
    width: 100% !important;
    height: 360px !important;
    aspect-ratio: auto !important;
    object-fit: scale-down;
}

/* Thumbnails stay plain: they are navigation, not the subject. */
.digital-key-store.single-product .flexy-pills img {
    max-width: 100%;
    max-height: none;
    border-radius: 4px;
    box-shadow: none;
}

.digital-key-store-row {
    margin: 0 0 78px;
}

.digital-key-store-row__see-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--dks-border);
    border-radius: 999px;
    color: var(--dks-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.digital-key-store-row__see-all:hover,
.digital-key-store-row__see-all:focus-visible {
    background: var(--dks-ink);
    color: var(--dks-surface);
    border-color: var(--dks-ink);
}

.digital-key-store .digital-key-store-row__items {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.digital-key-store .digital-key-store-row__items::before,
.digital-key-store .digital-key-store-row__items::after {
    content: none;
}

.digital-key-store .digital-key-store-row__items > li.product {
    width: 100%;
    margin: 0;
    float: none;
    clear: none;
}

.digital-key-store-collections {
    margin: 0 0 78px;
    padding: 34px;
    border-radius: var(--dks-radius-lg);
    background: var(--dks-mint);
}

.digital-key-store-collections .digital-key-store-eyebrow,
.digital-key-store-collections h2 {
    color: var(--dks-ink);
}

.digital-key-store-collections__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.digital-key-store-collection {
    display: grid;
    gap: 4px;
    min-height: 132px;
    align-content: end;
    padding: 20px;
    border-radius: var(--dks-radius-md);
    background: var(--dks-ink);
    color: var(--dks-surface);
    text-decoration: none;
}

.digital-key-store-collection strong {
    font-size: 19px;
    letter-spacing: -0.02em;
}

.digital-key-store-collection small {
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
}

.digital-key-store-collection span {
    margin-top: 6px;
    color: var(--dks-mint);
}

.digital-key-store-collection:hover,
.digital-key-store-collection:focus-visible {
    background: var(--dks-ink-soft);
}

.digital-key-store-landing-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 44px;
    border-radius: var(--dks-radius-lg);
    background: var(--dks-ink);
    color: var(--dks-surface);
}

/*
 * Needs the body-level class to out-specify `body.digital-key-store h2`, which
 * otherwise paints this heading ink-on-ink and makes it invisible.
 */
.digital-key-store .digital-key-store-landing-cta h2 {
    margin: 0 0 10px;
    color: var(--dks-surface);
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.05;
}

.digital-key-store-landing-cta p {
    margin: 0;
    max-width: 52ch;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
}

.digital-key-store .woo-listing-top {
    margin-bottom: 24px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--dks-border);
    border-radius: 14px;
}

.digital-key-store [data-products] {
    --shop-columns: repeat(4, minmax(0, 1fr));
    --grid-columns-gap: 18px;
    --grid-rows-gap: 28px;
}

.digital-key-store [data-products] .product {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 12px 12px 16px;
    flex-direction: column;
    background: var(--dks-surface);
    border: 1px solid var(--dks-border);
    border-radius: var(--dks-radius-md);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.digital-key-store [data-products] .product:hover {
    border-color: #b5c9bd;
    box-shadow: var(--dks-shadow);
    transform: translateY(-4px);
}

.digital-key-store [data-products] .product figure {
    margin-bottom: 16px;
    overflow: hidden;
    background: #e8ece8;
    border-radius: 14px;
}

/* The frame follows the artwork. Every supplier cover is 8:7; the 16:10 this
   used to be cut 29% off the height of every cover in the catalog, on top of the
   square thumbnail crop underneath it. The cover is the product here. */
.digital-key-store [data-products] .product figure .ct-media-container,
.digital-key-store [data-products] .product figure img {
    aspect-ratio: 8 / 7;
}

/* Both the figure and the container need an explicit width. Left to intrinsic
   sizing they follow whichever srcset candidate the browser picked, so two covers
   of the same 8:7 ratio rendered 204px and 211px wide and the row went ragged. */
.digital-key-store [data-products] .product figure,
.digital-key-store [data-products] .product figure .ct-media-container {
    width: 100%;
    justify-self: stretch;
}

.digital-key-store [data-products] .product figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 280ms ease;
}

.digital-key-store [data-products] .product:hover figure img {
    transform: scale(1.035);
}

.digital-key-store [data-products] .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.8em;
    margin: 8px 4px 6px;
    color: var(--dks-ink);
    font-size: 16px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: -0.018em;
}

.digital-key-store-product-category {
    order: -1;
    margin: 0 4px;
    color: #207451;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.digital-key-store [data-products] .product .price,
.digital-key-store-price-unavailable {
    /* Bottom margin is small: the price and the button below it are one block. */
    margin: 10px 4px 8px;
    color: var(--dks-ink);
    font-size: 18px;
    font-weight: 850;
}

.digital-key-store-price-unavailable {
    color: var(--dks-muted);
    font-size: 14px;
}

.digital-key-store [data-products] .product .entry-meta {
    display: none;
}

/* One column. The price gets a line, the action gets the line under it.

   This replaced a two-column grid that put them side by side. A grid track
   cannot wrap, so the action column was `minmax(0, 1fr)` and was free to shrink
   below the 88px floor its button carried; the button then overflowed leftwards
   straight across the price. That measured 3px at a 1280px viewport, where only
   the three-digit prices were hit, and 59px at 1024px, where all twelve cards in
   the row were. Side by side only ever fitted at 1440px and above.

   No column width fixes it, because a card is 139px wide at 1024px and an 88px
   button beside a price does not fit in that at any price. Stacking is the
   layout that holds at every width, and it costs about 40px of card height. */
.digital-key-store [data-products] .product {
    display: grid;
    /* minmax(0, ...): a grid item's automatic minimum is its min-content, and a
       long word in a title otherwise pushed the whole grid past the card. */
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}

.digital-key-store [data-products] .product > * {
    min-width: 0;
}

.digital-key-store [data-products] .product > figure,
.digital-key-store [data-products] .product > .woocommerce-loop-product__title,
.digital-key-store [data-products] .product > .digital-key-store-product-category,
.digital-key-store [data-products] .product > .price,
.digital-key-store [data-products] .product > .digital-key-store-price-unavailable,
.digital-key-store [data-products] .ct-woo-card-actions {
    grid-column: 1 / -1;
}

.digital-key-store [data-products] .product > .price,
.digital-key-store [data-products] .product > .digital-key-store-price-unavailable {
    /* Never wraps: a price broken over two lines reads as two numbers. */
    white-space: nowrap;
}

.digital-key-store [data-products] .ct-woo-card-actions {
    display: flex;
    margin: 0 4px 4px;
}

/* Full width, so the label fits on one line. At 88px it used to break as
   `Add to` / `cart` on every card narrower than a desktop column. */
.digital-key-store [data-products] .product .add_to_cart_button {
    width: 100%;
    min-width: 0;
}

.digital-key-store [data-products] .product .button {
    display: inline-flex;
    min-height: 42px;
    padding: 8px 14px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.digital-key-store [data-products] .product .add_to_cart_button {
    color: #ffffff;
    background: var(--dks-ink);
}

.digital-key-store .woocommerce-pagination {
    margin-top: 48px;
}

.digital-key-store .woocommerce-pagination .page-numbers a,
.digital-key-store .woocommerce-pagination .page-numbers.current {
    border-radius: 999px;
}



/* Kept when the prototype notice was removed: this one belongs to the plugin's
   inquiry flow and shared the deleted rule. */
.digital-key-store .kinguin-test-mode-notice {
    margin-bottom: 28px;
    padding: 18px 22px;
    color: #173d2e;
    background: #ddf7ed;
    border: 1px solid #a8dfca;
    border-radius: var(--dks-radius-sm);
}

.digital-key-store .kinguin-test-mode-notice::before {
    display: none;
}

.digital-key-store .product.type-product > .woocommerce-product-gallery,
.digital-key-store .product.type-product > .summary {
    margin-top: 12px;
}

/*
 * No card around the artwork. The gallery used to be a white bordered panel, which
 * made a small cover look like a gap inside a box; the artwork now sits directly
 * on the page. `overflow` stays because the slider relies on it.
 */
.digital-key-store .woocommerce-product-gallery {
    overflow: hidden;
}

.digital-key-store .entry-summary .entry-title {
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.05;
}

.digital-key-store .entry-summary .price {
    color: #176a4c;
    font-size: 28px;
}

.digital-key-store .entry-summary .cart .button,
.digital-key-store .checkout-button,
.digital-key-store .kinguin-test-checkout .button {
    min-height: 52px;
    border-radius: 999px;
    font-weight: 800;
}

.digital-key-store .entry-summary .cart .button,
.digital-key-store .kinguin-test-checkout .button {
    color: #ffffff;
    background: var(--dks-ink);
}

.digital-key-store .wc-block-cart__submit-button {
    color: #ffffff;
    background: var(--dks-ink);
    border-radius: 999px;
    font-weight: 800;
}

.digital-key-store .wc-block-cart__submit-button:hover {
    color: var(--dks-ink);
    background: var(--dks-mint);
}

.digital-key-store .entry-summary .cart .button:hover,
.digital-key-store .kinguin-test-checkout .button:hover {
    color: var(--dks-ink);
    background: var(--dks-mint);
}

.digital-key-store .woocommerce-tabs,
.digital-key-store .related,
.digital-key-store .up-sells {
    margin-top: 70px;
}

.digital-key-store .woocommerce-tabs .entry-content,
.digital-key-store .ct-woocommerce-cart-form,
.digital-key-store .cart_totals,
.digital-key-store .kinguin-test-checkout {
    padding: clamp(22px, 4vw, 40px);
    background: var(--dks-surface);
    border: 1px solid var(--dks-border);
    border-radius: var(--dks-radius-md);
    box-shadow: 0 14px 40px rgba(20, 24, 22, 0.045);
}

.digital-key-store .ct-woocommerce-cart-form .cart_totals {
    box-shadow: none;
}

.digital-key-store .kinguin-inquiry-cart {
    display: grid;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.digital-key-store .kinguin-inquiry-cart li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 18px;
    padding: 14px 0;
    align-items: center;
    border-bottom: 1px solid var(--dks-border);
}

.digital-key-store .kinguin-inquiry-total {
    font-size: 18px;
}

.digital-key-store .kinguin-test-checkout input[type="email"] {
    border-radius: 12px;
}

.digital-key-store .woocommerce-breadcrumb {
    color: var(--dks-muted);
    font-size: 13px;
}

.digital-key-store .ct-footer {
    margin-top: 80px;
    border-top: 1px solid var(--dks-border);
}

.digital-key-store-footer {
    margin-top: 80px;
    border-top: 1px solid var(--dks-border);
    background: var(--dks-surface);
    color: var(--dks-ink);
}

.digital-key-store-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
    max-width: var(--theme-normal-container-max-width);
    margin: 0 auto;
    padding: 64px 20px 48px;
}

.digital-key-store-footer__column {
    flex: 1 1 190px;
    min-width: 0;
}

.digital-key-store-footer__brand {
    flex: 1.6 1 280px;
}

.digital-key-store-footer__heading {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.digital-key-store-footer__wordmark {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.digital-key-store-footer__tagline {
    margin: 0 0 14px;
    max-width: 36ch;
    color: var(--dks-muted);
    font-size: 14px;
}

/*
 * The Company column before it has any data. Only an administrator ever sees it,
 * so it is styled as an unfilled form rather than as content: dashed rules stand
 * in for the values and read as slots, not as text a visitor missed.
 */
.digital-key-store-footer__company--pending .digital-key-store-footer__details {
    color: var(--dks-muted);
}

.digital-key-store-footer__company--pending .digital-key-store-footer__details li {
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--dks-border);
    font-size: 13px;
}

.digital-key-store-footer__pending-note {
    margin: 14px 0 0;
    max-width: 32ch;
    font-size: 12px;
    line-height: 1.5;
}

.digital-key-store-footer__links,
.digital-key-store-footer__details {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    font-size: 14px;
}

.digital-key-store-footer__details {
    color: var(--dks-muted);
}

.digital-key-store-footer__details strong {
    color: var(--dks-ink);
    font-weight: 600;
}

.digital-key-store-footer a {
    color: var(--dks-muted);
    text-decoration: none;
}

.digital-key-store-footer a:hover,
.digital-key-store-footer a:focus-visible {
    color: var(--dks-ink);
    text-decoration: underline;
}

.digital-key-store-footer__base {
    border-top: 1px solid var(--dks-border);
}

/* The border spans the full width; the contents sit in the same centred column
   as the rest of the footer, with the payment marks opposite the copyright. */
.digital-key-store-footer__base-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    max-width: var(--theme-normal-container-max-width);
    margin: 0 auto;
    padding: 22px 20px;
}

.digital-key-store-footer__base p {
    margin: 0;
    color: var(--dks-muted);
    font-size: 13px;
}

@media (max-width: 1199px) {
    .digital-key-store-categories {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .digital-key-store-categories::-webkit-scrollbar {
        display: none;
    }

    .digital-key-store-categories__panel {
        display: none;
    }

    .digital-key-store-commerce__inner {
        grid-template-columns: 1fr minmax(260px, 360px);
        padding: 12px 0;
    }

    .digital-key-store-categories {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-bottom: 2px;
    }

    .digital-key-store-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .digital-key-store-search {
        grid-column: 1;
        grid-row: 1;
    }

    .digital-key-store-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .digital-key-store .digital-key-store-row__items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .digital-key-store-collections__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 999px) {
    .digital-key-store-footer__inner {
        gap: 36px;
    }

    .digital-key-store-footer__column,
    .digital-key-store-footer__brand {
        flex: 1 1 calc(50% - 18px);
    }

    .digital-key-store [data-header*="type-1"] {
        --header-height: 70px;
    }

    .digital-key-store [data-header*="type-1"] .ct-header [data-row*="middle"] {
        --height: 70px;
    }

    .digital-key-store-hero {
        min-height: 0;
    }

    .digital-key-store-hero__slide {
        grid-template-columns: 1fr;
    }

    .digital-key-store-hero__art {
        display: none;
    }

    .digital-key-store [data-products] {
        --shop-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .digital-key-store [data-id="logo"] .site-title a {
        width: 200px;
        height: 43px;
    }

    .digital-key-store-product-details {
        gap: 26px;
        margin-top: 38px;
    }

    .digital-key-store.single-product .woocommerce-product-gallery__image img,
    .digital-key-store.single-product .flexy-items img {
        height: 230px !important;
    }

    .digital-key-store-value-props__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .digital-key-store-value-props__intro {
        margin-bottom: 34px;
    }

    .digital-key-store .digital-key-store-row__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .digital-key-store-collections {
        padding: 24px 18px;
    }

    .digital-key-store-collections__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .digital-key-store-landing-cta {
        padding: 30px 22px;
    }

    .digital-key-store-row__see-all {
        padding: 8px 14px;
        font-size: 13px;
    }

    .digital-key-store-footer__inner {
        gap: 32px;
        padding: 44px 20px 32px;
    }

    .digital-key-store-footer__column,
    .digital-key-store-footer__brand {
        flex: 1 1 100%;
    }

    .digital-key-store-footer__tagline,
    .digital-key-store-footer__pending-note {
        max-width: none;
    }

    .digital-key-store-commerce__inner {
        grid-template-columns: 1fr auto;
        gap: 10px 14px;
        width: min(92vw, 1320px);
    }

    .digital-key-store-search {
        min-width: 0;
    }

    .digital-key-store-search input[type="search"] {
        font-size: 16px;
    }

    .digital-key-store-categories {
        margin-right: -4vw;
        padding-right: 4vw;
    }

    .digital-key-store .site-main > .ct-container {
        padding-top: 20px;
    }

    .digital-key-store-hero {
        margin-bottom: 54px;
        padding: 38px 26px 42px;
        border-radius: 24px;
    }

    .digital-key-store-hero__title {
        font-size: clamp(44px, 14vw, 66px);
    }

    .digital-key-store-category-strip {
        margin-bottom: 56px;
    }

    .digital-key-store-category-grid {
        grid-template-columns: 1fr;
    }

    .digital-key-store-section-heading h2 {
        font-size: 36px;
    }

    .digital-key-store [data-products] {
        --shop-columns: repeat(2, minmax(0, 1fr));
        --grid-columns-gap: 12px;
        --grid-rows-gap: 18px;
    }

    .digital-key-store [data-products] .product {
        padding: 8px 8px 12px;
        border-radius: 16px;
    }

    .digital-key-store [data-products] .product figure {
        border-radius: 11px;
    }

    .digital-key-store [data-products] .woocommerce-loop-product__title {
        min-height: 3.75em;
        font-size: 14px;
        line-height: 1.25;
    }

    .digital-key-store [data-products] .product .price {
        font-size: 16px;
    }

    .digital-key-store [data-products] .product .button {
        min-height: 39px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .digital-key-store .kinguin-inquiry-cart li {
        grid-template-columns: 1fr auto;
    }

    .digital-key-store .kinguin-inquiry-cart li strong {
        grid-column: 1 / -1;
    }
}

@media (max-width: 419px) {
    .digital-key-store-search input[type="search"]::placeholder {
        color: transparent;
    }

    .digital-key-store-cart-link {
        font-size: 0;
    }

    .digital-key-store-cart-link > span {
        font-size: 13px;
    }

    .digital-key-store-hero__title {
        font-size: 43px;
    }

    .digital-key-store-hero p:not(.digital-key-store-eyebrow) {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Accepted payment methods. Renders only when the owner has ticked a brand and a
   gateway is actually available, so this block is invisible until the store can
   really take a card. */
.digital-key-store-footer__payment ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Colours come from the footer's own palette. Written first for a dark footer
   without checking, which put white text on a white surface — the strip rendered
   and was invisible. */
.digital-key-store-footer__payment li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 32px;
    padding: 4px 10px;
    background: var(--dks-paper);
    border: 1px solid var(--dks-border);
    border-radius: 6px;
    color: var(--dks-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* A logotype sits on white, which is how the networks present their marks. The
   border is what makes the tile read as a tile on a white footer.

   The tile is a fixed box and the artwork is contained inside it. Supplied files
   are not the same shape — one arrived 16:9 with wide margins, the other almost
   square — and scaling by height alone made one mark twice the size of the
   other. */
.digital-key-store-footer__payment li:has(img) {
    width: 54px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 0;
    overflow: hidden;
    border-radius: 5px;
}

.digital-key-store-footer__payment img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* Contact page.

   Scoped, not global: 35px headings are right on a landing page and wrong on a
   short informational one, which is a page decision rather than a site one. The
   page also showed three kinds of list three different ways; everything here is
   now either a label/value pair or a bullet. */
.digital-key-store-contact h2 {
    margin: 40px 0 14px;
    font-size: 22px;
    line-height: 1.3;
}

.digital-key-store-contact__lead {
    color: var(--dks-muted);
}

.digital-key-store-contact__details {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 10px 28px;
    margin: 0;
}

.digital-key-store-contact__details dt {
    color: var(--dks-muted);
    font-weight: 600;
}

.digital-key-store-contact__details dd {
    margin: 0;
}

.digital-key-store-contact ul {
    margin: 0;
    padding-left: 20px;
}

.digital-key-store-contact li {
    margin-bottom: 8px;
}

/* Two columns from 900px: the text reads down the left, the form sits beside it
   rather than after it. Every child defaults to column one and only the form is
   moved, so adding a paragraph to the page needs no CSS change. It spans a wide
   row range because the row count follows the page content, which the owner
   edits. */
@media (min-width: 900px) {
    .digital-key-store-contact {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
        column-gap: 56px;
        align-items: start;
    }

    .digital-key-store-contact > * {
        grid-column: 1;
    }

    .digital-key-store-contact > .digital-key-store-contact-form {
        grid-column: 2;
        grid-row: 1 / span 200;
        position: sticky;
        top: 24px;
        max-width: none;
        margin-top: 0;
    }
}

.digital-key-store-contact-form {
    max-width: 560px;
    margin-top: 48px;
    padding: 28px;
    background: var(--dks-paper);
    border: 1px solid var(--dks-border);
    border-radius: var(--dks-radius-md);
}

.digital-key-store-contact-form h2 {
    margin-top: 0;
}

.digital-key-store-contact-form__field {
    display: grid;
    gap: 6px;
    margin: 0 0 18px;
}

.digital-key-store-contact-form__field label {
    color: var(--dks-ink);
    font-size: 14px;
    font-weight: 600;
}

.digital-key-store-contact-form__field input,
.digital-key-store-contact-form__field textarea {
    width: 100%;
    padding: 11px 13px;
    background: var(--dks-surface);
    border: 1px solid var(--dks-border);
    border-radius: var(--dks-radius-sm);
    font: inherit;
    font-size: 15px;
}

.digital-key-store-contact-form__field textarea {
    resize: vertical;
}

/* Off-canvas rather than display:none — a bot reading the DOM cannot tell it is
   hidden, which is the entire point of the trap. */
.digital-key-store-contact-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.digital-key-store-contact-form__consent {
    color: var(--dks-muted);
    font-size: 13px;
}

.digital-key-store-contact-form__notice {
    padding: 12px 14px;
    border-radius: var(--dks-radius-sm);
    font-size: 14px;
}

.digital-key-store-contact-form__notice--stored {
    color: #0d432f;
    background: var(--dks-mint-soft);
    border: 1px solid var(--dks-mint);
}

.digital-key-store-contact-form__notice--invalid {
    color: #7a2718;
    background: #fdf0ed;
    border: 1px solid #f3c9bf;
}

@media (max-width: 600px) {
    .digital-key-store-contact__details {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px 0;
    }

    .digital-key-store-contact__details dd {
        margin-bottom: 14px;
    }
}

/* FAQ.

   Nine questions were nine 35px headings, so one question and its answer filled
   half a screen and the page could not be scanned. Each is now a native
   <details>: no script, keyboard-operable without ARIA, and every answer is
   simply visible if this stylesheet never loads. */
.digital-key-store-faq h2 {
    margin: 44px 0 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dks-muted);
}

.digital-key-store-faq h2:first-of-type {
    margin-top: 32px;
}

.digital-key-store-faq__lead {
    color: var(--dks-muted);
}

.digital-key-store-faq details {
    border-bottom: 1px solid var(--dks-border);
}

.digital-key-store-faq details:first-of-type {
    border-top: 1px solid var(--dks-border);
}

.digital-key-store-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 4px;
    color: var(--dks-ink);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.digital-key-store-faq summary::-webkit-details-marker {
    display: none;
}

/* The chevron is drawn rather than a glyph, so it cannot depend on a font. */
.digital-key-store-faq summary::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-right: 2px solid var(--dks-muted);
    border-bottom: 2px solid var(--dks-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 160ms ease;
}

.digital-key-store-faq details[open] summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.digital-key-store-faq summary:hover,
.digital-key-store-faq details[open] summary {
    color: #176a4c;
}

.digital-key-store-faq summary:focus-visible {
    outline: 2px solid var(--dks-mint-deep);
    outline-offset: 2px;
}

.digital-key-store-faq details > p {
    max-width: 78ch;
    margin: 0 4px 16px;
    color: var(--dks-ink-soft);
}

.digital-key-store-faq details > p:first-of-type {
    margin-top: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .digital-key-store-faq summary::after {
        transition: none;
    }
}

/* Long-form pages.

   About us ran 159 characters to the line at 1440px. Comfortable is 60 to 75;
   past that the eye loses its place returning to the next line and the page
   reads as unedited whatever the typeface. Everything below is space and
   restraint rather than decoration — that is what reads as considered. */
.digital-key-store-longform .entry-content > * {
    max-width: 40rem;
    margin-right: auto;
    margin-left: auto;
}

/* The page title is rendered outside the content, so it needs the same column
   or the header and the article read as two different pages. */
.digital-key-store-longform .entry-header {
    max-width: 40rem;
    margin: 0 auto 8px;
}

.digital-key-store-longform .entry-header .page-title {
    margin-bottom: 0;
    color: var(--dks-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.digital-key-store-longform .entry-content p,
.digital-key-store-longform .entry-content li {
    font-size: 17px;
    line-height: 1.75;
    color: var(--dks-ink-soft);
}

/* The opening paragraph carries the page. */
.digital-key-store-longform .entry-content > p:first-of-type {
    font-size: 20px;
    line-height: 1.6;
    color: var(--dks-ink);
}

.digital-key-store-longform .entry-content h2 {
    margin: 72px auto 16px;
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

/* A hairline above each section, except the first — quiet structure rather than
   a heavier typeface. */
.digital-key-store-longform .entry-content h2::before {
    content: "";
    display: block;
    width: 44px;
    margin-bottom: 26px;
    border-top: 2px solid var(--dks-mint-deep);
}

.digital-key-store-longform .entry-content > h2:first-child {
    margin-top: 8px;
    font-size: 38px;
    letter-spacing: -0.025em;
}

.digital-key-store-longform .entry-content > h2:first-child::before {
    display: none;
}

.digital-key-store-longform .entry-content h3 {
    margin: 40px auto 12px;
    font-size: 20px;
}

.digital-key-store-longform .entry-content ul,
.digital-key-store-longform .entry-content ol {
    padding-left: 22px;
}

.digital-key-store-longform .entry-content li {
    margin-bottom: 10px;
}

.digital-key-store-longform .entry-content li::marker {
    color: var(--dks-mint-deep);
}

.digital-key-store-longform .entry-content strong {
    color: var(--dks-ink);
}

@media (max-width: 782px) {
    .digital-key-store-longform .entry-content > h2:first-child {
        font-size: 30px;
    }

    .digital-key-store-longform .entry-content h2 {
        margin-top: 52px;
        font-size: 24px;
    }
}

/* Cookie notice.

   A notice, not a consent gate: every cookie here is strictly necessary, so
   there is nothing to accept. It sits at the bottom, never covers the whole
   screen, and does not block anything behind it. */
.digital-key-store-cookie-notice {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 20px;
    background: var(--dks-surface);
    border: 1px solid var(--dks-border);
    border-radius: var(--dks-radius-md);
    box-shadow: var(--dks-shadow);
}

.digital-key-store-cookie-notice[hidden] {
    display: none;
}

.digital-key-store-cookie-notice p {
    flex: 1 1 320px;
    margin: 0;
    color: var(--dks-ink-soft);
    font-size: 13px;
    line-height: 1.55;
}

.digital-key-store-cookie-notice a {
    color: var(--dks-ink);
    text-decoration: underline;
}

.digital-key-store-cookie-notice button {
    flex: none;
    min-height: 38px;
    padding: 8px 20px;
    color: #ffffff;
    background: var(--dks-ink);
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.digital-key-store-cookie-notice button:hover {
    background: #33413a;
}

.digital-key-store-cookie-notice button:focus-visible {
    outline: 2px solid var(--dks-mint-deep);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .digital-key-store-cookie-notice {
        right: 10px;
        bottom: 10px;
        left: 10px;
        padding: 14px 16px;
    }

    .digital-key-store-cookie-notice button {
        width: 100%;
    }
}