* {
    box-sizing: border-box;
}

:root {
    --navy: #0d1b2a;
    --navy-2: #13263a;
    --red: #e63946;
    --red-dark: #c92835;
    --paper: #f5f5f5;
    --cream: #fff8ef;
    --wood: #b87948;
    --wood-dark: #6f4327;
    --ink: #102032;
    --muted: #657181;
    --line: #e6dfd4;
    --surface: #ffffff;
    --surface-warm: #fffaf2;
    --shadow: 0 22px 44px rgba(13, 27, 42, 0.16);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}

input[type="radio"] {
    accent-color: var(--red);
}

.announcement {
    align-items: center;
    background: var(--red);
    color: var(--paper);
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 14px;
    justify-content: center;
    min-height: 38px;
    padding: 7px 18px;
}

.announcement a {
    border-bottom: 1px solid rgba(245, 245, 245, 0.65);
    font-weight: 800;
}

.topbar {
    align-items: center;
    background: var(--navy);
    border-bottom: 1px solid rgba(245, 245, 245, 0.14);
    color: var(--paper);
    display: grid;
    gap: 18px;
    grid-template-columns: auto minmax(280px, 1fr) auto;
    padding: 14px 28px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.brand {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 230px;
}

.brand-mark {
    align-items: center;
    border: 2px solid var(--red);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: var(--paper);
    display: inline-flex;
    font-size: 22px;
    font-weight: 900;
    height: 42px;
    justify-content: center;
    position: relative;
    width: 38px;
}

.brand-mark::after {
    background: var(--red);
    content: "";
    height: 8px;
    position: absolute;
    right: 5px;
    top: 8px;
    transform: rotate(45deg);
    width: 8px;
}

.brand-copy {
    display: grid;
    gap: 3px;
    line-height: 1;
}

.brand-name {
    display: block;
    font-size: 25px;
    font-weight: 900;
}

.brand-subtitle {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0.78;
}

.top-search {
    display: grid;
    grid-template-columns: 180px 1fr 108px;
    min-width: 0;
}

.top-search select,
.top-search input,
.top-search button {
    border: 0;
    min-height: 44px;
}

.top-search select {
    background: #eef0f2;
    border-radius: 8px 0 0 8px;
    color: var(--ink);
    padding: 0 12px;
}

.top-search input {
    border-left: 1px solid var(--line);
    color: var(--ink);
    min-width: 0;
    padding: 0 15px;
}

.top-search button,
.primary-action,
.filter-submit,
.quote-form button,
.quote-button,
.reset-filters {
    background: var(--red);
    color: var(--paper);
    cursor: pointer;
    font-weight: 800;
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.top-search button {
    border-radius: 0 8px 8px 0;
}

.top-search button:hover,
.primary-action:hover,
.filter-submit:hover,
.quote-form button:hover,
.quote-button:hover,
.reset-filters:hover {
    background: var(--red-dark);
    box-shadow: 0 10px 22px rgba(230, 57, 70, 0.22);
    transform: translateY(-1px);
}

.top-actions {
    align-items: center;
    display: flex;
    gap: 18px;
    white-space: nowrap;
}

.top-actions a {
    color: var(--paper);
    font-size: 14px;
    font-weight: 700;
}

.subnav {
    align-items: center;
    background: var(--navy-2);
    color: var(--paper);
    display: flex;
    gap: 22px;
    min-height: 42px;
    overflow-x: auto;
    padding: 0 28px;
    white-space: nowrap;
}

.subnav::-webkit-scrollbar {
    display: none;
}

.subnav {
    scrollbar-width: none;
}

.subnav a {
    color: var(--paper);
    font-size: 14px;
}

.hero-band {
    background: var(--navy);
    color: var(--paper);
    display: grid;
    grid-template-columns: minmax(280px, 0.96fr) minmax(320px, 1fr);
    min-height: 560px;
    overflow: hidden;
    position: relative;
}

.hero-art {
    min-height: 560px;
    overflow: hidden;
}

.hero-art img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hero-copy {
    align-self: center;
    max-width: 690px;
    padding: 64px 56px 116px;
    position: relative;
    z-index: 1;
}

.hero-copy::before {
    background: var(--red);
    content: "";
    height: 12px;
    left: 56px;
    position: absolute;
    top: 42px;
    transform: rotate(45deg);
    width: 12px;
}

.eyebrow {
    color: var(--red);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.hero-copy h1 {
    font-size: 56px;
    line-height: 1.02;
    margin: 0;
    max-width: 660px;
}

.hero-copy p {
    color: rgba(245, 245, 245, 0.82);
    font-size: 19px;
    line-height: 1.55;
    margin: 18px 0 0;
    max-width: 560px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.primary-action,
.ghost-action {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    min-height: 46px;
    padding: 0 18px;
}

.ghost-action {
    border: 1px solid rgba(245, 245, 245, 0.36);
    color: var(--paper);
    font-weight: 800;
}

.hero-panel {
    align-items: stretch;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    left: 0;
    position: absolute;
    right: 0;
    z-index: 2;
}

.hero-panel div {
    background: rgba(13, 27, 42, 0.9);
    border-right: 1px solid rgba(245, 245, 245, 0.16);
    min-height: 86px;
    padding: 18px 28px;
}

.hero-panel strong {
    color: var(--paper);
    display: block;
    font-size: 28px;
    line-height: 1;
}

.hero-panel span {
    color: rgba(245, 245, 245, 0.72);
    display: block;
    font-size: 13px;
    margin-top: 8px;
}

.shop-intro,
.craft-strip,
.market-shell,
.product-page {
    margin: 0 auto;
    max-width: 1440px;
}

.shop-intro {
    align-items: center;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    padding: 42px 28px 28px;
}

.shop-intro h2,
.results-head h2,
.section-head h2,
.related h2,
.product-story h2 {
    font-size: 28px;
    line-height: 1.12;
    margin: 0;
}

.picker-links {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.picker-links a {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font-weight: 800;
    min-height: 56px;
    padding: 17px 16px;
    text-align: center;
}

.picker-links a:hover {
    border-color: var(--red);
}

.craft-strip {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 28px 36px;
}

.craft-strip article {
    background: var(--navy);
    color: var(--paper);
    min-height: 150px;
    padding: 26px;
}

.craft-strip article:first-child {
    border-radius: 8px 0 0 8px;
}

.craft-strip article:last-child {
    border-radius: 0 8px 8px 0;
}

.star-icon {
    color: var(--red);
    display: block;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 14px;
}

.craft-strip h3 {
    font-size: 19px;
    margin: 0;
}

.craft-strip p {
    color: rgba(245, 245, 245, 0.72);
    line-height: 1.5;
    margin: 8px 0 0;
}

.market-shell {
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: 272px minmax(0, 1fr);
    padding: 0 28px 54px;
}

.filters {
    position: sticky;
    top: 116px;
}

.filters form,
.buy-box,
.product-story article,
.empty-state {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.filter-block {
    border-bottom: 1px solid var(--line);
    padding: 20px;
}

.filter-block:last-of-type {
    border-bottom: 0;
}

.filter-block h2 {
    font-size: 15px;
    margin: 0 0 13px;
}

.department-list,
.department-trail {
    display: grid;
    gap: 8px;
}

.department-link,
.department-crumb,
.radio-row {
    align-items: center;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.department-link {
    background: var(--surface-warm);
    border: 1px solid transparent;
    min-height: 42px;
    padding: 10px 12px;
}

.department-link strong,
.department-crumb strong {
    color: var(--red);
    font-size: 13px;
}

.department-link.is-active {
    background: var(--navy);
    color: var(--paper);
}

.department-crumb {
    background: #f1ece4;
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 8px;
    min-height: 36px;
    padding: 8px 10px;
}

.department-crumb.is-current {
    color: var(--ink);
    font-weight: 800;
}

.filter-block select,
.sort-form select,
.quote-form input,
.quote-form textarea {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    min-height: 42px;
    padding: 0 12px;
    width: 100%;
}

.radio-row {
    justify-content: flex-start;
    margin: 10px 0;
}

.filter-submit {
    border: 0;
    border-radius: 0 0 8px 8px;
    min-height: 48px;
    width: 100%;
}

.results {
    min-width: 0;
}

.results-head {
    align-items: end;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.small-muted,
.active-filters {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 6px;
}

.active-filters {
    margin: 8px 0 0;
}

.sort-form label {
    color: var(--muted);
    display: grid;
    font-size: 13px;
    gap: 6px;
    min-width: 210px;
}

.deal-strip {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
}

.deal-strip a {
    align-items: center;
    background: var(--navy);
    border-radius: 8px;
    color: var(--paper);
    display: grid;
    gap: 10px;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 78px;
    padding: 10px;
}

.deal-strip img {
    aspect-ratio: 1;
    border-radius: 6px;
    object-fit: cover;
    width: 64px;
}

.deal-strip span {
    font-size: 14px;
    font-weight: 800;
}

.product-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(13, 27, 42, 0.08);
    min-width: 0;
    overflow: hidden;
}

.product-media {
    background: var(--navy);
    display: block;
    position: relative;
}

.product-media img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

.product-badge {
    background: rgba(13, 27, 42, 0.82);
    border: 1px solid rgba(245, 245, 245, 0.2);
    border-radius: 8px;
    color: var(--paper);
    font-size: 12px;
    font-weight: 800;
    left: 12px;
    padding: 6px 8px;
    position: absolute;
    top: 12px;
}

.product-body {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.product-kicker {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.product-title {
    color: var(--ink);
    font-size: 19px;
    font-weight: 900;
    line-height: 1.16;
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-meta span {
    background: var(--surface-warm);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 8px;
}

.card-row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 2px;
}

.price {
    color: var(--ink);
    font-size: 22px;
    font-weight: 950;
    white-space: nowrap;
}

.quote-button {
    border-radius: 8px;
    display: inline-flex;
    font-size: 14px;
    justify-content: center;
    min-height: 40px;
    padding: 11px 14px;
    white-space: nowrap;
}

.empty-state {
    grid-column: 1 / -1;
    padding: 28px;
}

.empty-state h3 {
    font-size: 22px;
    margin: 0;
}

.empty-state p {
    color: var(--muted);
}

.reset-filters {
    border-radius: 8px;
    display: inline-flex;
    padding: 12px 16px;
}

.pagination-wrap {
    margin-top: 26px;
}

.market-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}

.market-pagination-summary {
    color: var(--muted);
    margin: 0;
}

.market-pagination-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.market-page-link,
.market-page-gap {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: inline-flex;
    min-height: 38px;
    min-width: 38px;
    justify-content: center;
    padding: 0 12px;
}

.market-page-link.is-active {
    background: var(--navy);
    color: var(--paper);
}

.market-page-link.is-disabled {
    color: var(--muted);
    opacity: 0.55;
}

.product-page {
    padding: 28px;
}

.breadcrumbs {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.breadcrumbs a {
    color: var(--navy);
    font-weight: 800;
}

.success-banner {
    background: #e7f7ee;
    border: 1px solid #b8e7ca;
    border-radius: 8px;
    color: #176b3c;
    margin-bottom: 18px;
    padding: 14px 16px;
}

.product-detail {
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(420px, 1.08fr) minmax(320px, 0.82fr) 320px;
}

.gallery {
    display: grid;
    gap: 12px;
    grid-template-columns: 86px minmax(0, 1fr);
}

.thumb-list {
    display: grid;
    gap: 10px;
}

.thumb-list button {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    padding: 5px;
}

.thumb-list img {
    aspect-ratio: 1;
    border-radius: 6px;
    object-fit: cover;
}

.main-image {
    background: var(--navy);
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.main-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

.product-info {
    min-width: 0;
}

.product-info h1 {
    font-size: 42px;
    line-height: 1.05;
    margin: 0;
}

.spec-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.spec-list div {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
}

.spec-list dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.spec-list dd {
    margin: 0;
}

.description {
    margin-top: 22px;
}

.description h2 {
    font-size: 22px;
    margin: 0 0 8px;
}

.description p,
.product-story p {
    color: var(--muted);
    line-height: 1.62;
    margin: 0;
}

.buy-box {
    box-shadow: 0 14px 34px rgba(13, 27, 42, 0.09);
    padding: 20px;
    position: sticky;
    top: 116px;
}

.price.big {
    font-size: 32px;
}

.delivery {
    color: var(--muted);
    line-height: 1.45;
    margin: 8px 0 18px;
}

.seller-box {
    background: var(--navy);
    border-radius: 8px;
    color: var(--paper);
    display: grid;
    gap: 5px;
    margin-bottom: 18px;
    padding: 14px;
}

.seller-box span {
    color: rgba(245, 245, 245, 0.72);
    font-size: 13px;
}

.seller-box .trust {
    color: #ffd3d7;
}

.quote-form {
    display: grid;
    gap: 10px;
}

.quote-form textarea {
    min-height: 96px;
    padding: 12px;
    resize: vertical;
}

.quote-form button {
    border: 0;
    border-radius: 8px;
    min-height: 46px;
}

.form-error {
    color: var(--red);
    margin: 0;
}

.product-story {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 26px;
}

.product-story article {
    padding: 24px;
}

.related {
    margin-top: 38px;
}

.section-head {
    margin-bottom: 18px;
}

.site-footer {
    align-items: center;
    background: var(--navy);
    color: var(--paper);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 28px;
}

.site-footer div {
    display: grid;
    gap: 4px;
}

.site-footer span,
.site-footer a {
    color: rgba(245, 245, 245, 0.72);
}

.site-footer nav {
    display: flex;
    gap: 18px;
}

@media (max-width: 1180px) {
    .topbar {
        grid-template-columns: 1fr;
    }

    .brand {
        min-width: 0;
    }

    .top-actions {
        flex-wrap: wrap;
    }

    .hero-band {
        grid-template-columns: 1fr;
    }

    .hero-art {
        min-height: 340px;
    }

    .hero-copy {
        padding: 48px 32px 116px;
    }

    .hero-copy::before {
        left: 32px;
        top: 28px;
    }

    .hero-copy h1 {
        font-size: 44px;
    }

    .product-detail {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .product-info {
        grid-column: 1 / -1;
        order: 3;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Product box mockups: puzzle products should sit on a surface, not look like flat thumbnails. */
.ef-hero-media {
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 248, 239, 0.36), transparent 26%),
        radial-gradient(circle at 82% 78%, rgba(111, 67, 39, 0.22), transparent 30%),
        linear-gradient(135deg, #b98555 0%, #8e613f 42%, #c49a6a 100%);
}

.ef-hero-media img {
    border-radius: 24px;
    box-shadow: 28px 30px 42px rgba(3, 9, 16, 0.42);
    transform: rotate(-5deg);
}

.product-card {
    text-align: center;
}

.product-media.puzzle-product-media {
    --box-rotate: -5deg;
    align-items: center;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 248, 239, 0.6), transparent 28%),
        radial-gradient(circle at 82% 76%, rgba(96, 70, 48, 0.2), transparent 26%),
        linear-gradient(135deg, #deded5 0%, #cfd0c6 48%, #e6e2d7 100%);
    border: 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 12%;
}

.product-media.puzzle-product-media::before {
    background:
        linear-gradient(90deg, rgba(13, 27, 42, 0.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(13, 27, 42, 0.026) 1px, transparent 1px);
    background-size: 52px 52px;
    content: "";
    inset: 0;
    opacity: 0.28;
    position: absolute;
}

.product-card:nth-child(4n + 2) .puzzle-product-media {
    --box-rotate: 5deg;
}

.product-card:nth-child(4n + 3) .puzzle-product-media {
    --box-rotate: -2deg;
}

.product-card:nth-child(4n + 4) .puzzle-product-media {
    --box-rotate: 7deg;
}

.puzzle-box-mockup {
    aspect-ratio: 1.24 / 1;
    display: block;
    max-width: 360px;
    position: relative;
    transform: rotate(var(--box-rotate));
    transition: transform 260ms ease;
    width: min(78%, 360px);
    z-index: 2;
}

.puzzle-box-mockup::before {
    display: none;
}

.puzzle-box-mockup::after {
    display: none;
}

.puzzle-box-lid {
    background: var(--navy);
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(245, 245, 245, 0.04);
    color: var(--paper);
    display: grid;
    gap: 7%;
    height: 100%;
    padding: 7% 7% 6%;
    position: relative;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
}

.puzzle-box-logo {
    font-size: clamp(13px, 2vw, 21px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

.puzzle-box-logo::after {
    background: var(--red);
    content: "";
    display: block;
    height: 1px;
    margin: 4px auto 0;
    opacity: 0.8;
    width: 42%;
}

.puzzle-box-art-frame {
    align-self: stretch;
    border-radius: 7%;
    display: block;
    overflow: hidden;
    position: relative;
}

.puzzle-box-art-frame::after {
    background: radial-gradient(circle at 50% 50%, transparent 54%, rgba(13, 27, 42, 0.66) 100%);
    content: "";
    inset: 0;
    position: absolute;
}

.product-media.puzzle-product-media .puzzle-box-art {
    aspect-ratio: 1.58 / 1;
    display: block;
    height: 100%;
    object-fit: cover;
    transform: none;
    width: 100%;
}

.puzzle-box-footer {
    align-items: end;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr minmax(0, 1.8fr) 1fr;
}

.puzzle-box-footer span {
    color: rgba(245, 245, 245, 0.9);
    font-size: clamp(7px, 1.1vw, 11px);
    line-height: 1;
}

.puzzle-box-footer strong {
    color: var(--paper);
    font-size: clamp(10px, 1.7vw, 18px);
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.puzzle-chip {
    background-image: var(--puzzle-art);
    background-position: center;
    background-size: 190px auto;
    border-radius: 36% 44% 38% 48%;
    box-shadow: 8px 10px 14px rgba(3, 9, 16, 0.28);
    display: block;
    height: 9%;
    opacity: 0.92;
    position: absolute;
    width: 11%;
    z-index: 1;
}

.puzzle-chip-one {
    left: 10%;
    top: 20%;
    transform: rotate(-18deg);
}

.puzzle-chip-two {
    bottom: 18%;
    right: 14%;
    transform: rotate(24deg);
}

.puzzle-chip-three {
    bottom: 10%;
    left: 22%;
    transform: rotate(10deg);
}

.product-media.puzzle-product-media .product-badge {
    display: none;
}

.product-card:hover .product-media.puzzle-product-media img {
    transform: none;
}

.product-card:hover .puzzle-box-mockup {
    transform: rotate(var(--box-rotate)) translateY(-5px);
}

.product-body {
    justify-items: center;
}

.product-title,
.product-mood,
.product-meta-line {
    max-width: 100%;
    text-align: center;
}

.card-row {
    border-top: 0;
    display: grid;
    justify-items: center;
}

@media (max-width: 860px) {
    .ef-hero-media {
        background:
            radial-gradient(circle at 18% 18%, rgba(255, 248, 239, 0.28), transparent 28%),
            linear-gradient(135deg, #9a6b45 0%, #c19665 100%);
    }

    .ef-hero-media img {
        border-radius: 16px;
        transform: rotate(-4deg);
    }

    .product-media.puzzle-product-media {
        padding: 11%;
    }

    .puzzle-box-mockup {
        width: min(82%, 360px);
    }
}

@media (max-width: 860px) {
    .announcement {
        justify-content: flex-start;
    }

    .topbar,
    .subnav,
    .product-page,
    .site-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .top-search {
        grid-template-columns: 1fr;
    }

    .top-search select,
    .top-search input,
    .top-search button {
        border-radius: 8px;
        border: 0;
        margin-bottom: 8px;
    }

    .hero-copy h1 {
        font-size: 36px;
    }

    .hero-copy p {
        font-size: 17px;
    }

    .hero-copy {
        order: 1;
    }

    .hero-art {
        order: 2;
    }

    .hero-panel {
        grid-template-columns: 1fr;
        order: 3;
        position: static;
    }

    .hero-panel div {
        min-height: 72px;
    }

    .shop-intro,
    .market-shell,
    .product-detail,
    .product-story {
        grid-template-columns: 1fr;
    }

    .shop-intro,
    .craft-strip,
    .market-shell {
        padding-left: 18px;
        padding-right: 18px;
    }

    .picker-links,
    .craft-strip,
    .deal-strip,
    .product-grid,
    .product-grid.compact {
        grid-template-columns: 1fr;
    }

    .craft-strip article,
    .craft-strip article:first-child,
    .craft-strip article:last-child {
        border-radius: 8px;
    }

    .filters,
    .buy-box {
        position: static;
    }

    .results-head,
    .site-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .sort-form label {
        min-width: 0;
    }

    .gallery {
        grid-template-columns: 1fr;
    }

    .thumb-list {
        grid-template-columns: repeat(3, 72px);
        order: 2;
    }

    .product-info {
        order: initial;
    }

    .product-info h1 {
        font-size: 34px;
    }

    .spec-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .brand-name {
        font-size: 22px;
    }

    .brand-subtitle {
        font-size: 9px;
    }

    .hero-copy {
        padding: 42px 22px;
    }

    .hero-copy::before {
        left: 22px;
    }

    .hero-copy h1 {
        font-size: 31px;
    }

    .card-row {
        align-items: stretch;
        flex-direction: column;
    }

    .quote-button {
        width: 100%;
    }

    .market-pagination {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Premium refresh */
:root {
    --paper: #f3efe7;
    --cream: #fbf6ed;
    --surface: #fffaf2;
    --surface-warm: #f6efe3;
    --line: #ded2c0;
    --ink: #102032;
    --muted: #68717c;
    --red: #d93b46;
    --red-dark: #aa2630;
    --wood: #b98253;
    --shadow: 0 18px 44px rgba(13, 27, 42, 0.11);
}

body {
    background:
        linear-gradient(180deg, rgba(13, 27, 42, 0.04), transparent 360px),
        var(--paper);
}

.announcement {
    background: #091521;
    border-bottom: 1px solid rgba(245, 245, 245, 0.1);
    color: rgba(245, 245, 245, 0.78);
    font-size: 12px;
    justify-content: space-between;
    min-height: 34px;
    padding: 7px 28px;
    text-transform: uppercase;
}

.announcement a {
    border-bottom: 0;
    color: var(--paper);
    font-weight: 700;
    text-transform: none;
}

.topbar {
    background: var(--navy);
    gap: 24px;
    grid-template-columns: auto minmax(260px, 560px) auto;
    padding: 18px 32px;
    z-index: 80;
}

.brand-name {
    font-size: 24px;
}

.brand-subtitle {
    color: rgba(245, 245, 245, 0.62);
}

.top-search {
    grid-template-columns: 156px 1fr 86px;
}

.top-search select,
.top-search input,
.top-search button {
    min-height: 38px;
}

.top-search select,
.top-search input {
    background: rgba(245, 245, 245, 0.92);
    font-size: 14px;
}

.top-search button,
.primary-action,
.filter-submit,
.quote-form button,
.quote-button,
.reset-filters {
    box-shadow: none;
}

.top-search button {
    background: var(--paper);
    color: var(--navy);
}

.top-search button:hover {
    background: #ffffff;
    color: var(--navy);
    transform: none;
}

.top-actions a,
.subnav a {
    color: rgba(245, 245, 245, 0.78);
    font-weight: 700;
}

.top-actions a:hover,
.subnav a:hover {
    color: var(--paper);
}

.subnav {
    background: #0b1724;
    border-top: 1px solid rgba(245, 245, 245, 0.08);
    min-height: 46px;
    padding: 0 32px;
}

.hero-band {
    background: #07111d;
    display: block;
    min-height: 690px;
}

.hero-art {
    inset: 0;
    min-height: 690px;
    opacity: 0.74;
    position: absolute;
}

.hero-art::after {
    background:
        linear-gradient(90deg, rgba(7, 17, 29, 0.96) 0%, rgba(7, 17, 29, 0.74) 44%, rgba(7, 17, 29, 0.18) 100%),
        linear-gradient(180deg, rgba(7, 17, 29, 0.2) 0%, rgba(7, 17, 29, 0.82) 100%);
    content: "";
    inset: 0;
    position: absolute;
}

.hero-art img {
    filter: saturate(0.9) contrast(1.03);
}

.hero-copy {
    margin-left: 0;
    max-width: 760px;
    min-height: 604px;
    padding: 112px 32px 160px;
}

.hero-copy::before {
    background: transparent;
    border: 1px solid var(--red);
    height: 13px;
    top: 82px;
    width: 13px;
}

.eyebrow {
    color: var(--red);
    font-size: 12px;
    font-weight: 800;
}

.hero-copy h1 {
    font-size: 64px;
    font-weight: 900;
    line-height: 1.02;
    max-width: 720px;
}

.hero-copy p {
    color: rgba(245, 245, 245, 0.78);
    font-size: 20px;
    line-height: 1.64;
    max-width: 620px;
}

.primary-action,
.ghost-action {
    border-radius: 6px;
    min-height: 48px;
    padding: 0 20px;
}

.primary-action {
    background: var(--paper);
    color: var(--navy);
}

.primary-action:hover {
    background: #ffffff;
    box-shadow: none;
    color: var(--navy);
}

.ghost-action {
    background: rgba(245, 245, 245, 0.05);
}

.hero-panel {
    border-top: 1px solid rgba(245, 245, 245, 0.16);
}

.hero-panel div {
    background: rgba(7, 17, 29, 0.74);
    padding: 22px 32px;
}

.hero-panel strong {
    font-size: 20px;
    text-transform: uppercase;
}

.shop-intro,
.collection-showcase,
.atelier-strip,
.market-shell,
.product-page {
    max-width: 1380px;
}

.premium-intro {
    align-items: end;
    border-bottom: 1px solid var(--line);
    margin-top: 16px;
    padding: 56px 32px 28px;
}

.premium-intro h2 {
    font-size: 34px;
}

.premium-copy p {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
    margin: 0;
}

.collection-showcase {
    display: grid;
    gap: 14px;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    margin: 0 auto;
    padding: 28px 32px 36px;
}

.collection-tile {
    background: var(--navy);
    border-radius: 8px;
    color: var(--paper);
    min-height: 260px;
    overflow: hidden;
    position: relative;
}

.collection-tile.is-large {
    grid-row: span 2;
    min-height: 536px;
}

.collection-tile img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.collection-tile::after {
    background: linear-gradient(180deg, transparent 36%, rgba(7, 17, 29, 0.86) 100%);
    content: "";
    inset: 0;
    position: absolute;
}

.collection-tile span,
.collection-tile strong {
    left: 22px;
    position: absolute;
    right: 22px;
    z-index: 1;
}

.collection-tile span {
    bottom: 62px;
    color: rgba(245, 245, 245, 0.66);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.collection-tile strong {
    bottom: 24px;
    font-size: 24px;
    line-height: 1.05;
}

.atelier-strip {
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 auto 38px;
    padding: 0 32px;
}

.atelier-strip div {
    min-height: 164px;
    padding: 28px 26px;
}

.atelier-strip span {
    color: var(--red);
    display: block;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 18px;
}

.atelier-strip strong {
    display: block;
    font-size: 19px;
    margin-bottom: 8px;
}

.atelier-strip p {
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}

.market-shell {
    gap: 30px;
    grid-template-columns: 248px minmax(0, 1fr);
    padding: 0 32px 70px;
}

.filters form,
.product-card,
.buy-box,
.product-story article,
.empty-state {
    background: rgba(255, 250, 242, 0.82);
    box-shadow: none;
}

.filters form {
    border-color: rgba(222, 210, 192, 0.78);
}

.filter-block h2,
.small-muted,
.product-kicker {
    text-transform: uppercase;
}

.department-link {
    background: transparent;
}

.department-link.is-active {
    background: var(--navy);
}

.filter-submit {
    background: var(--navy);
}

.filter-submit:hover {
    background: var(--red-dark);
}

.results-head h2 {
    font-size: 34px;
}

.deal-strip {
    display: none;
}

.product-grid {
    gap: 22px;
}

.product-card {
    border-color: rgba(222, 210, 192, 0.84);
}

.product-card:hover {
    border-color: rgba(13, 27, 42, 0.24);
}

.product-media img {
    aspect-ratio: 1.08 / 1;
}

.product-badge {
    background: rgba(7, 17, 29, 0.72);
    border-radius: 6px;
    font-size: 11px;
    text-transform: uppercase;
}

.product-body {
    gap: 12px;
    padding: 18px;
}

.product-title {
    font-size: 22px;
}

.product-meta span {
    background: transparent;
    border-color: rgba(13, 27, 42, 0.12);
    border-radius: 6px;
}

.price {
    font-size: 19px;
}

.quote-button {
    background: transparent;
    border: 1px solid var(--navy);
    border-radius: 6px;
    color: var(--navy);
}

.quote-button:hover {
    background: var(--navy);
    color: var(--paper);
}

.product-detail {
    gap: 30px;
}

.product-info h1 {
    font-size: 48px;
}

.product-note {
    color: var(--muted);
    gap: 12px;
}

.product-note span {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.seller-box {
    background: #0b1724;
}

.quote-form button {
    background: var(--navy);
}

.quote-form button:hover {
    background: var(--red-dark);
}

.site-footer {
    background: #07111d;
}

@media (max-width: 1180px) {
    .topbar {
        grid-template-columns: 1fr;
    }

    .hero-copy h1 {
        font-size: 52px;
    }

    .collection-showcase {
        grid-template-columns: 1fr 1fr;
    }

    .collection-tile.is-large {
        grid-column: 1 / -1;
        min-height: 420px;
    }
}

@media (max-width: 860px) {
    .announcement {
        gap: 8px;
        justify-content: flex-start;
        padding-left: 18px;
        padding-right: 18px;
    }

    .topbar {
        padding: 16px 18px;
    }

    .hero-band,
    .hero-art {
        min-height: 620px;
    }

    .hero-copy {
        min-height: 0;
        padding: 70px 22px 48px;
    }

    .hero-copy::before {
        top: 44px;
    }

    .hero-copy h1 {
        font-size: 40px;
    }

    .collection-showcase,
    .atelier-strip {
        grid-template-columns: 1fr;
        padding-left: 18px;
        padding-right: 18px;
    }

    .collection-tile,
    .collection-tile.is-large {
        min-height: 330px;
    }

    .premium-intro {
        padding-left: 18px;
        padding-right: 18px;
    }

    .atelier-strip {
        border-bottom: 0;
    }

    .atelier-strip div {
        border-bottom: 1px solid var(--line);
        min-height: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 520px) {
    .hero-copy h1 {
        font-size: 34px;
    }

    .hero-copy p {
        font-size: 16px;
    }
}

/* Premium refinement: cleaner gallery rhythm and less marketplace noise. */
body {
    background: #f4f6f4;
}

.premium-intro,
.atelier-strip {
    background: #ffffff;
}

.premium-intro {
    border-bottom: 1px solid rgba(13, 27, 42, 0.08);
    border-top: 0;
}

.premium-intro h2 {
    max-width: 470px;
}

.premium-copy p {
    color: #4f5b68;
}

.collection-showcase,
.market-shell {
    background: #f4f6f4;
}

.collection-showcase {
    padding-bottom: 46px;
    padding-top: 28px;
}

.collection-tile {
    box-shadow: 0 18px 44px rgba(13, 27, 42, 0.12);
}

.collection-tile::after {
    background: linear-gradient(180deg, rgba(7, 17, 29, 0) 32%, rgba(7, 17, 29, 0.82) 100%);
}

.atelier-strip {
    border-color: rgba(13, 27, 42, 0.09);
    margin-bottom: 48px;
}

.atelier-strip div + div {
    border-left: 1px solid rgba(13, 27, 42, 0.08);
}

.filters form,
.buy-box,
.product-story article,
.empty-state {
    background: #ffffff;
    border-color: rgba(13, 27, 42, 0.1);
}

.filters form {
    box-shadow: 0 16px 40px rgba(13, 27, 42, 0.06);
}

.department-link,
.department-crumb {
    background: transparent;
}

.department-link {
    border-color: rgba(13, 27, 42, 0.08);
}

.department-link.is-active {
    border-color: var(--navy);
}

.department-link strong,
.department-crumb strong {
    color: var(--red-dark);
}

.filter-block select,
.sort-form select,
.quote-form input,
.quote-form textarea {
    background: #fbfbfa;
    border-color: rgba(13, 27, 42, 0.12);
}

.results-head {
    margin-bottom: 22px;
}

.results-head h2 {
    letter-spacing: 0;
}

.product-card {
    background: #ffffff;
    border-color: transparent;
    box-shadow: 0 18px 42px rgba(13, 27, 42, 0.08);
}

.product-card:hover {
    box-shadow: 0 24px 54px rgba(13, 27, 42, 0.14);
    transform: translateY(-2px);
}

.product-media img {
    aspect-ratio: 1.12 / 1;
}

.product-body {
    gap: 10px;
    padding: 20px 20px 18px;
}

.product-kicker {
    color: #7c2631;
    font-size: 11px;
    letter-spacing: 0.08em;
}

.product-title {
    font-size: 21px;
    font-weight: 850;
}

.product-meta-line {
    color: #68737f;
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}

.card-row {
    border-top: 1px solid rgba(13, 27, 42, 0.08);
    margin-top: 8px;
    padding-top: 14px;
}

.price {
    font-size: 18px;
    font-weight: 850;
}

.quote-button {
    border-color: rgba(13, 27, 42, 0.2);
    font-size: 13px;
    min-height: 36px;
    padding: 9px 13px;
}

.product-note {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin: 14px 0 18px;
}

@media (max-width: 860px) {
    .collection-showcase {
        padding-top: 18px;
    }

    .atelier-strip div + div {
        border-left: 0;
    }

    .product-card:hover {
        transform: none;
    }
}

@media (max-width: 860px) {
    .topbar {
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
    }

    .top-search {
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
        width: 100%;
    }

    .top-search select,
    .top-search input,
    .top-search button {
        min-width: 0;
        width: 100%;
    }

    .nav-links {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .subnav {
        display: flex;
        flex-wrap: nowrap;
        gap: 22px;
        overflow-x: auto;
        padding-bottom: 12px;
        scrollbar-width: none;
    }

    .subnav::-webkit-scrollbar {
        display: none;
    }

    .subnav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .market-shell,
    .product-grid,
    .product-grid.compact {
        grid-template-columns: minmax(0, 1fr);
    }

    .market-shell,
    .results,
    .filters,
    .product-card {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .product-body {
        padding: 18px;
    }

    .product-meta-line {
        font-size: 12px;
    }
}

/* Brand background: the storefront canvas uses Lunariska navy. */
body,
main {
    background: var(--navy);
}

.premium-intro,
.collection-showcase,
.atelier-strip,
.market-shell,
.product-page {
    background: var(--navy);
    color: var(--paper);
}

.premium-intro {
    border-color: rgba(245, 245, 245, 0.12);
}

.premium-intro h2,
.results-head h2,
.atelier-strip strong,
.product-info h1,
.description h2,
.section-head h2 {
    color: var(--paper);
}

.premium-copy p,
.atelier-strip p,
.small-muted,
.active-filters,
.sort-form label,
.breadcrumbs,
.description p,
.product-note,
.product-note a {
    color: rgba(245, 245, 245, 0.72);
}

.breadcrumbs a,
.breadcrumbs span:last-child {
    color: var(--paper);
}

.atelier-strip {
    border-color: rgba(245, 245, 245, 0.12);
}

.atelier-strip div + div {
    border-color: rgba(245, 245, 245, 0.12);
}

.collection-showcase {
    padding-top: 36px;
}

.filters form,
.buy-box,
.product-story article,
.product-card,
.spec-list div,
.thumb-list button,
.empty-state {
    color: var(--ink);
}

.filters form,
.buy-box,
.product-story article,
.product-card,
.empty-state {
    background: #ffffff;
}

.results-head {
    border-top: 1px solid rgba(245, 245, 245, 0.12);
    padding-top: 28px;
}

.sort-form select {
    background: #ffffff;
}

@media (max-width: 860px) {
    .collection-showcase {
        padding-top: 24px;
    }
}

/* Product-led presentation inspired by quiet object-first shops. */
.market-shell {
    gap: 48px;
    grid-template-columns: 218px minmax(0, 1fr);
    padding-bottom: 96px;
}

.filters form {
    background: transparent;
    border-color: rgba(245, 245, 245, 0.16);
    box-shadow: none;
    color: var(--paper);
}

.filter-block {
    border-color: rgba(245, 245, 245, 0.12);
    padding: 18px 0;
}

.filter-block h2 {
    color: rgba(245, 245, 245, 0.64);
    font-size: 11px;
    letter-spacing: 0.12em;
}

.department-link,
.department-crumb,
.radio-row {
    border-radius: 0;
    color: rgba(245, 245, 245, 0.72);
}

.department-link {
    border: 0;
    border-bottom: 1px solid rgba(245, 245, 245, 0.1);
    min-height: 40px;
    padding: 10px 0;
}

.department-link.is-active {
    background: transparent;
    border-color: rgba(230, 57, 70, 0.64);
    color: var(--paper);
}

.department-link strong,
.department-crumb strong {
    color: var(--red);
}

.filter-block select {
    background: rgba(245, 245, 245, 0.08);
    border-color: rgba(245, 245, 245, 0.18);
    color: var(--paper);
}

.filter-submit {
    background: transparent;
    border: 1px solid rgba(245, 245, 245, 0.2);
    border-radius: 0;
    color: var(--paper);
}

.filter-submit:hover {
    background: var(--paper);
    color: var(--navy);
}

.results-head {
    align-items: start;
    border-top: 0;
    margin-bottom: 34px;
    padding-top: 0;
}

.results-head h2 {
    font-size: 42px;
    line-height: 1.04;
}

.sort-form label {
    color: rgba(245, 245, 245, 0.64);
}

.sort-form select {
    border-radius: 0;
}

.product-grid {
    column-gap: 34px;
    row-gap: 58px;
}

.product-grid.compact {
    column-gap: 26px;
    row-gap: 42px;
}

.product-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--paper);
    overflow: visible;
}

.product-card:hover {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.product-media {
    background: #eef0ee;
    border: 1px solid rgba(245, 245, 245, 0.16);
    border-radius: 0;
    overflow: hidden;
}

.product-media img {
    aspect-ratio: 1 / 1;
    transition: transform 420ms ease;
}

.product-card:hover .product-media img {
    transform: scale(1.025);
}

.product-badge {
    background: rgba(7, 17, 29, 0.68);
    border-radius: 0;
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 7px 9px;
}

.product-body {
    background: transparent;
    gap: 8px;
    padding: 16px 0 0;
}

.product-kicker {
    color: rgba(245, 245, 245, 0.58);
    font-size: 11px;
    letter-spacing: 0.12em;
}

.product-title {
    color: var(--paper);
    font-size: 20px;
    font-weight: 760;
    line-height: 1.2;
}

.product-mood,
.product-meta-line {
    color: rgba(245, 245, 245, 0.68);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}

.product-mood {
    color: rgba(245, 245, 245, 0.84);
}

.card-row {
    border-color: rgba(245, 245, 245, 0.14);
    margin-top: 8px;
    padding-top: 12px;
}

.price {
    color: var(--paper);
    font-size: 16px;
    font-weight: 760;
}

.quote-button {
    border: 0;
    border-bottom: 1px solid rgba(245, 245, 245, 0.46);
    border-radius: 0;
    color: var(--paper);
    min-height: 0;
    padding: 0 0 3px;
}

.quote-button:hover {
    background: transparent;
    color: var(--paper);
    border-color: var(--red);
}

.product-detail {
    gap: 54px;
    grid-template-columns: minmax(0, 1.14fr) minmax(340px, 0.86fr);
}

.gallery {
    gap: 16px;
    grid-row: span 2;
    grid-template-columns: minmax(0, 1fr);
}

.thumb-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    order: 2;
}

.thumb-list button {
    background: rgba(245, 245, 245, 0.92);
    border-radius: 0;
    width: 82px;
}

.main-image {
    border-radius: 0;
    box-shadow: none;
}

.main-image img {
    aspect-ratio: 1 / 1;
}

.product-info {
    align-self: end;
}

.product-info h1 {
    font-size: 58px;
    font-weight: 780;
}

.product-subtitle {
    color: rgba(245, 245, 245, 0.78);
    font-size: 17px;
    line-height: 1.5;
    margin: 16px 0 0;
}

.spec-list {
    border-top: 1px solid rgba(245, 245, 245, 0.14);
    gap: 0;
    margin-top: 22px;
}

.spec-list div {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(245, 245, 245, 0.14);
    border-radius: 0;
    color: var(--paper);
    display: block;
    padding: 13px 0;
}

.spec-list dt {
    color: rgba(245, 245, 245, 0.58);
}

.spec-list dd {
    text-align: left;
}

.buy-box {
    border-radius: 0;
    box-shadow: none;
}

.product-options {
    border-bottom: 1px solid rgba(13, 27, 42, 0.12);
    border-top: 1px solid rgba(13, 27, 42, 0.12);
    display: grid;
    gap: 0;
    margin: 18px 0;
}

.product-options div {
    display: grid;
    gap: 4px;
    padding: 12px 0;
}

.product-options div + div {
    border-top: 1px solid rgba(13, 27, 42, 0.08);
}

.product-options span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.product-options strong {
    font-size: 15px;
}

.product-story article {
    background: transparent;
    border-color: rgba(245, 245, 245, 0.16);
    color: var(--paper);
}

.product-story p {
    color: rgba(245, 245, 245, 0.7);
}

@media (max-width: 1180px) {
    .product-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .gallery {
        grid-row: auto;
    }

    .product-info h1 {
        font-size: 44px;
    }
}

@media (max-width: 860px) {
    .market-shell {
        gap: 34px;
        grid-template-columns: minmax(0, 1fr);
        padding-left: 18px;
        padding-right: 18px;
    }

    .filters form {
        padding-left: 18px;
        padding-right: 18px;
        width: 100%;
    }

    .results-head {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .results-head h2 {
        font-size: 34px;
    }

    .sort-form label {
        min-width: 0;
        width: 100%;
    }

    .product-grid,
    .product-grid.compact {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 42px;
    }

    .filters,
    .results,
    .product-card {
        min-width: 0;
        width: 100%;
    }

    .product-card:hover .product-media img {
        transform: none;
    }

    .product-info h1 {
        font-size: 38px;
    }
}

/* East Fork-inspired home system, rebuilt with Lunariska color and products. */
.ef-hero,
.ef-shelf,
.ef-feature,
.ef-palette {
    background: var(--navy);
    color: var(--paper);
}

.ef-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
    min-height: 700px;
}

.ef-hero-media {
    background: #edf0ee;
    display: block;
    min-height: 520px;
    overflow: hidden;
}

.ef-hero-media img,
.ef-feature-media img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.ef-hero-copy {
    align-content: center;
    border-left: 1px solid rgba(245, 245, 245, 0.14);
    display: grid;
    gap: 26px;
    padding: 72px 56px;
}

.ef-hero-copy h1 {
    color: var(--paper);
    font-size: 80px;
    font-weight: 820;
    line-height: 0.95;
    margin: 0;
}

.ef-hero-copy p:not(.eyebrow) {
    color: rgba(245, 245, 245, 0.76);
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
    max-width: 560px;
}

.ef-link {
    align-items: center;
    border-bottom: 1px solid currentColor;
    color: inherit;
    display: inline-flex;
    font-weight: 850;
    justify-self: start;
    padding-bottom: 4px;
}

.ef-shelf,
.ef-feature,
.ef-palette {
    padding: 72px 32px;
}

.ef-shelf {
    border-top: 1px solid rgba(245, 245, 245, 0.14);
}

.ef-section-head {
    align-items: end;
    display: flex;
    gap: 28px;
    justify-content: space-between;
    margin: 0 auto 32px;
    max-width: 1360px;
}

.ef-section-head h2 {
    color: var(--paper);
    font-size: 48px;
    line-height: 1;
    margin: 0;
}

.ef-section-head > p {
    color: rgba(245, 245, 245, 0.72);
    line-height: 1.55;
    margin: 0;
    max-width: 500px;
}

.ef-shelf-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 1360px;
}

.ef-feature {
    border-top: 1px solid rgba(245, 245, 245, 0.14);
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 0;
}

.ef-feature-media {
    display: block;
    min-height: 560px;
    overflow: hidden;
}

.ef-feature-copy {
    align-content: center;
    border-left: 1px solid rgba(245, 245, 245, 0.14);
    display: grid;
    gap: 24px;
    padding: 64px;
}

.ef-feature-copy h2 {
    color: var(--paper);
    font-size: 56px;
    line-height: 1;
    margin: 0;
    max-width: 620px;
}

.ef-feature-copy p:not(.eyebrow) {
    color: rgba(245, 245, 245, 0.72);
    font-size: 18px;
    line-height: 1.58;
    margin: 0;
    max-width: 610px;
}

.ef-palette {
    border-top: 1px solid rgba(245, 245, 245, 0.14);
}

.ef-palette-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 1360px;
}

.ef-palette-card {
    color: var(--paper);
    display: grid;
    gap: 10px;
}

.ef-palette-card img {
    aspect-ratio: 1;
    border: 1px solid rgba(245, 245, 245, 0.16);
    object-fit: cover;
    width: 100%;
}

.ef-palette-card span {
    color: rgba(245, 245, 245, 0.62);
    font-size: 13px;
    line-height: 1.4;
}

.ef-palette-card strong {
    font-size: 21px;
    line-height: 1.12;
}

.ef-values {
    margin-bottom: 0;
}

.ef-values + .market-shell {
    border-top: 1px solid rgba(245, 245, 245, 0.14);
    padding-top: 76px;
}

@media (max-width: 1180px) {
    .ef-hero,
    .ef-feature {
        grid-template-columns: minmax(0, 1fr);
    }

    .ef-hero-copy,
    .ef-feature-copy {
        border-left: 0;
        border-top: 1px solid rgba(245, 245, 245, 0.14);
    }

    .ef-shelf-grid,
    .ef-palette-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .ef-hero {
        min-height: 0;
    }

    .ef-hero-media,
    .ef-feature-media {
        min-height: 360px;
    }

    .ef-hero-copy,
    .ef-feature-copy,
    .ef-shelf,
    .ef-palette {
        padding: 44px 18px;
    }

    .ef-hero-copy h1 {
        font-size: 50px;
    }

    .ef-feature-copy h2,
    .ef-section-head h2 {
        font-size: 38px;
    }

    .ef-section-head {
        align-items: start;
        flex-direction: column;
    }

    .ef-shelf-grid,
    .ef-palette-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ef-values + .market-shell {
        padding-top: 48px;
    }
}

/* Polish pass from visual QA: product box, header strips, and catalog filters. */
.announcement,
.topbar,
.subnav {
    border: 0;
    box-shadow: none;
}

.announcement {
    background: var(--navy);
    color: rgba(245, 245, 245, 0.6);
    min-height: 30px;
    padding: 6px 32px;
}

.topbar {
    border-bottom: 0;
    padding-bottom: 16px;
}

.subnav {
    background: var(--navy);
    gap: 28px;
    min-height: 40px;
    padding-bottom: 12px;
    padding-top: 0;
}

.subnav a {
    color: rgba(245, 245, 245, 0.66);
    font-size: 14px;
}

.subnav a:hover {
    color: var(--paper);
}

.ef-hero-media {
    align-items: center;
    background:
        radial-gradient(circle at 50% 48%, rgba(245, 245, 245, 0.08), transparent 42%),
        linear-gradient(180deg, #102237 0%, var(--navy) 100%);
    display: flex;
    justify-content: center;
    min-height: 700px;
    padding: clamp(32px, 4vw, 74px);
}

.ef-hero-media img {
    height: auto;
    max-height: min(680px, 74vh);
    max-width: 920px;
    object-fit: contain;
    object-position: center;
    width: min(92%, 880px);
}

.ef-feature-media img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.market-shell {
    gap: 64px;
    grid-template-columns: 286px minmax(0, 1fr);
    margin: 0 auto;
    max-width: 1360px;
}

.filters {
    top: 126px;
}

.filters form {
    border: 0;
    padding: 0;
}

.filter-block {
    border: 0;
    padding: 0 0 30px;
}

.filter-block + .filter-block {
    border-top: 1px solid rgba(245, 245, 245, 0.1);
    padding-top: 26px;
}

.filter-block h2 {
    color: rgba(245, 245, 245, 0.52);
    font-size: 12px;
    letter-spacing: 0.14em;
    margin-bottom: 16px;
}

.department-list,
.department-trail {
    gap: 4px;
}

.department-link,
.department-crumb {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: rgba(245, 245, 245, 0.62);
    font-size: 15px;
    line-height: 1.25;
    min-height: 0;
    padding: 8px 0;
}

.department-link span,
.department-crumb span {
    min-width: 0;
}

.department-link strong,
.department-crumb strong {
    color: rgba(230, 57, 70, 0.92);
    flex: 0 0 auto;
    font-size: 12px;
}

.department-link.is-active,
.department-crumb.is-current {
    background: transparent;
    color: var(--paper);
    font-weight: 760;
}

.department-link.is-active {
    box-shadow: inset 0 -1px 0 rgba(230, 57, 70, 0.84);
}

.filter-block select {
    background: transparent;
    border: 1px solid rgba(245, 245, 245, 0.22);
    border-radius: 0;
    color: var(--paper);
}

.radio-row {
    color: rgba(245, 245, 245, 0.66);
    font-size: 15px;
    margin: 8px 0;
}

.filter-submit {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(245, 245, 245, 0.58);
    border-radius: 0;
    display: inline-flex;
    justify-self: start;
    min-height: 0;
    padding: 0 0 4px;
    width: auto;
}

.filter-submit:hover {
    background: transparent;
    border-color: var(--red);
    color: var(--paper);
}

@media (max-width: 1180px) {
    .market-shell {
        gap: 42px;
        grid-template-columns: 250px minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    .announcement {
        padding-left: 18px;
        padding-right: 18px;
    }

    .topbar {
        padding-bottom: 18px;
        position: relative;
        top: auto;
    }

    .subnav {
        padding: 0 18px 12px;
    }

    .ef-hero-media {
        min-height: 420px;
        padding: 26px 18px;
    }

    .ef-hero-media img {
        max-height: 390px;
        width: min(96%, 520px);
    }

    .market-shell {
        gap: 40px;
        grid-template-columns: minmax(0, 1fr);
    }

    .filters,
    .filters form,
    .filter-block,
    .departments-block {
        max-width: 100%;
        min-width: 0;
    }

    .filters {
        position: static;
    }

    .filters form {
        display: grid;
        gap: 20px;
    }

    .departments-block {
        padding-bottom: 18px;
    }

    .departments-block .department-list {
        display: flex;
        gap: 10px;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
        width: 100%;
    }

    .departments-block .department-list::-webkit-scrollbar {
        display: none;
    }

    .departments-block .department-link {
        border: 1px solid rgba(245, 245, 245, 0.16);
        flex: 0 0 auto;
        gap: 8px;
        min-height: 38px;
        padding: 8px 12px;
    }

    .departments-block .department-link.is-active {
        border-color: rgba(230, 57, 70, 0.74);
        box-shadow: none;
    }

    .filter-block + .filter-block {
        padding-top: 20px;
    }

    .filter-submit {
        justify-self: start;
        width: auto;
    }
}

/* Final override: keep product scenes as objects lying on a warm surface. */
.ef-hero-media {
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 248, 239, 0.34), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(77, 45, 24, 0.28), transparent 32%),
        linear-gradient(135deg, #b98555 0%, #8e613f 42%, #c49a6a 100%);
}

.ef-hero-media img {
    border-radius: 24px;
    box-shadow: 28px 30px 42px rgba(3, 9, 16, 0.42);
    transform: rotate(-5deg);
}

.product-media.puzzle-product-media {
    padding: 9%;
}

.puzzle-box-mockup {
    width: min(100%, 380px);
}

@media (max-width: 860px) {
    .ef-hero-media {
        background:
            radial-gradient(circle at 18% 18%, rgba(255, 248, 239, 0.28), transparent 28%),
            linear-gradient(135deg, #9a6b45 0%, #c19665 100%);
    }

    .ef-hero-media img {
        border-radius: 16px;
        transform: rotate(-4deg);
    }

    .product-media.puzzle-product-media {
        padding: 8%;
    }
}

.puzzle-box-footer {
    align-items: center;
    gap: 4px;
    grid-template-columns: 0.72fr minmax(0, 2.5fr) 0.72fr;
}

.puzzle-box-footer strong {
    font-size: clamp(6px, 0.94vw, 12px);
    line-height: 1;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/* Hardgraft-style product bands: one light canvas, large quiet objects, minimal text. */
.ef-shelf,
.market-shell {
    background: #deded5;
    color: #26231d;
}

.ef-shelf {
    border-top: 0;
    padding-bottom: 86px;
}

.ef-shelf .eyebrow,
.market-shell .small-muted,
.market-shell .sort-form label,
.market-shell .filter-block h2 {
    color: rgba(38, 35, 29, 0.56);
}

.ef-shelf .ef-section-head h2,
.market-shell .results-head h2 {
    color: #26231d;
}

.ef-shelf .ef-link,
.market-shell .ef-link,
.market-shell .active-filters {
    color: #26231d;
}

.ef-values + .market-shell {
    border-top: 0;
    margin: 0;
    max-width: none;
    padding: 76px max(24px, calc((100vw - 1360px) / 2 + 32px)) 96px;
}

.market-shell .filters form {
    color: #26231d;
}

.market-shell .filter-block + .filter-block {
    border-color: rgba(38, 35, 29, 0.14);
}

.market-shell .department-link,
.market-shell .department-crumb,
.market-shell .radio-row {
    color: rgba(38, 35, 29, 0.68);
}

.market-shell .department-link.is-active,
.market-shell .department-crumb.is-current {
    color: #26231d;
}

.market-shell .department-link strong,
.market-shell .department-crumb strong {
    color: var(--red);
}

.market-shell .filter-block select,
.market-shell .sort-form select {
    background: #f6f4ea;
    border-color: rgba(38, 35, 29, 0.18);
    color: #26231d;
}

.market-shell .filter-submit,
.market-shell .filter-submit:hover {
    color: #26231d;
}

.product-card {
    color: #26231d;
    overflow: visible;
}

.product-media.puzzle-product-media {
    background: transparent;
    padding: 3%;
}

.product-media.puzzle-product-media::before,
.puzzle-chip {
    display: none;
}

.puzzle-box-mockup {
    width: min(96%, 460px);
}

.puzzle-box-lid {
    border-radius: 24px;
    gap: 5%;
    padding: 6% 6% 5%;
}

.puzzle-box-logo {
    font-size: clamp(14px, 2.2vw, 24px);
}

.puzzle-box-art-frame {
    border-radius: 8%;
}

.puzzle-box-footer strong {
    font-size: clamp(8px, 1.2vw, 15px);
}

.product-body {
    justify-items: center;
    padding-top: 20px;
}

.product-kicker {
    color: rgba(38, 35, 29, 0.5);
}

.product-title,
.price {
    color: #26231d;
}

.product-mood,
.product-meta-line {
    color: rgba(38, 35, 29, 0.68);
}

.card-row {
    border-color: rgba(38, 35, 29, 0.13);
}

.quote-button,
.quote-button:hover {
    color: #26231d;
}

@media (max-width: 860px) {
    .ef-values + .market-shell {
        padding-left: 18px;
        padding-right: 18px;
    }

    .product-media.puzzle-product-media {
        padding: 4%;
    }
}

/* Red product-block trial: straight boxes on a branded surface. */
.ef-shelf,
.market-shell {
    background: var(--red);
    color: var(--paper);
}

.ef-shelf .eyebrow,
.market-shell .small-muted,
.market-shell .sort-form label,
.market-shell .filter-block h2 {
    color: rgba(245, 245, 245, 0.64);
}

.ef-shelf .ef-section-head h2,
.market-shell .results-head h2,
.product-title,
.price {
    color: var(--paper);
}

.ef-shelf .ef-link,
.market-shell .active-filters,
.market-shell .filter-submit,
.market-shell .filter-submit:hover,
.quote-button,
.quote-button:hover {
    color: var(--paper);
}

.market-shell .department-link,
.market-shell .department-crumb,
.market-shell .radio-row {
    color: rgba(245, 245, 245, 0.72);
}

.market-shell .department-link.is-active,
.market-shell .department-crumb.is-current {
    color: var(--paper);
}

.market-shell .department-link strong,
.market-shell .department-crumb strong {
    color: var(--navy);
}

.market-shell .filter-block + .filter-block {
    border-color: rgba(245, 245, 245, 0.24);
}

.market-shell .filter-block select,
.market-shell .sort-form select {
    background: #fff8ef;
    border-color: rgba(13, 27, 42, 0.16);
    color: var(--navy);
}

.product-kicker,
.product-mood,
.product-meta-line {
    color: rgba(245, 245, 245, 0.72);
}

.card-row {
    border-color: rgba(245, 245, 245, 0.24);
}

.product-media.puzzle-product-media,
.product-card:nth-child(4n + 2) .puzzle-product-media,
.product-card:nth-child(4n + 3) .puzzle-product-media,
.product-card:nth-child(4n + 4) .puzzle-product-media {
    --box-rotate: 0deg;
}

.puzzle-box-mockup,
.product-card:hover .puzzle-box-mockup {
    transform: none;
}

.ef-hero-media img {
    transform: none;
}

/* Logo-color product-block trial: navy surface instead of red. */
.ef-shelf,
.market-shell {
    background: var(--navy);
    color: var(--paper);
}

.ef-shelf .eyebrow,
.market-shell .small-muted,
.market-shell .sort-form label,
.market-shell .filter-block h2 {
    color: rgba(245, 245, 245, 0.62);
}

.ef-shelf .ef-section-head h2,
.market-shell .results-head h2,
.product-title,
.price {
    color: var(--paper);
}

.ef-shelf .ef-link,
.market-shell .active-filters,
.market-shell .filter-submit,
.market-shell .filter-submit:hover,
.quote-button,
.quote-button:hover {
    color: var(--paper);
}

.market-shell .department-link,
.market-shell .department-crumb,
.market-shell .radio-row,
.product-kicker,
.product-mood,
.product-meta-line {
    color: rgba(245, 245, 245, 0.72);
}

.market-shell .department-link.is-active,
.market-shell .department-crumb.is-current {
    color: var(--paper);
}

.market-shell .department-link strong,
.market-shell .department-crumb strong {
    color: var(--red);
}

.market-shell .filter-block + .filter-block,
.card-row {
    border-color: rgba(245, 245, 245, 0.18);
}

.market-shell .filter-block select,
.market-shell .sort-form select {
    background: #fff8ef;
    border-color: rgba(245, 245, 245, 0.2);
    color: var(--navy);
}

.puzzle-box-lid {
    box-shadow:
        0 24px 34px rgba(3, 9, 16, 0.42),
        inset 0 0 0 1px rgba(245, 245, 245, 0.08);
}

/* Final direction: light commerce band, logo-color surface only under the product. */
.ef-shelf,
.market-shell {
    background: #deded5;
    color: #26231d;
}

.ef-shelf .eyebrow,
.market-shell .small-muted,
.market-shell .sort-form label,
.market-shell .filter-block h2 {
    color: rgba(38, 35, 29, 0.56);
}

.ef-shelf .ef-section-head h2,
.market-shell .results-head h2,
.product-title,
.price {
    color: #26231d;
}

.ef-shelf .ef-link,
.market-shell .active-filters,
.market-shell .filter-submit,
.market-shell .filter-submit:hover,
.quote-button,
.quote-button:hover {
    color: #26231d;
}

.market-shell .department-link,
.market-shell .department-crumb,
.market-shell .radio-row,
.product-kicker,
.product-mood,
.product-meta-line {
    color: rgba(38, 35, 29, 0.68);
}

.market-shell .department-link.is-active,
.market-shell .department-crumb.is-current {
    color: #26231d;
}

.market-shell .department-link strong,
.market-shell .department-crumb strong {
    color: var(--red);
}

.market-shell .filter-block + .filter-block,
.card-row {
    border-color: rgba(38, 35, 29, 0.14);
}

.market-shell .filter-block select,
.market-shell .sort-form select {
    background: #fff8ef;
    border-color: rgba(38, 35, 29, 0.18);
    color: var(--navy);
}

.product-media.puzzle-product-media {
    background: transparent;
    overflow: visible;
    padding: 3%;
}

.puzzle-box-mockup {
    aspect-ratio: 1.34 / 1;
    isolation: isolate;
    max-width: 540px;
    width: min(94%, 540px);
}

.puzzle-box-mockup::before,
.puzzle-box-mockup::after {
    content: "";
    pointer-events: none;
    position: absolute;
}

.puzzle-box-mockup::before {
    background: rgba(7, 10, 12, 0.62);
    border-radius: clamp(18px, 5.2%, 30px);
    display: block;
    filter: blur(10px);
    inset: 0;
    mix-blend-mode: multiply;
    opacity: 0.58;
    transform: translate(5.8%, 4.8%);
    z-index: -1;
}

.puzzle-box-mockup::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.18) 16%,
        rgba(0, 0, 0, 0.46) 52%,
        rgba(0, 0, 0, 0.35) 82%,
        transparent 100%
    );
    border-radius: 999px;
    bottom: -3%;
    display: block;
    filter: blur(4px);
    height: 8%;
    left: 8%;
    mix-blend-mode: multiply;
    opacity: 0.5;
    transform: translate(6%, 0);
    width: 92%;
    z-index: -1;
}

.puzzle-box-lid {
    background: #102237;
    border-radius: clamp(18px, 5.2%, 30px);
    box-shadow:
        0 0 0 1px rgba(230, 57, 70, 0.14),
        inset 0 0 0 1px rgba(245, 245, 245, 0.08);
    display: block;
    gap: 0;
    padding: 0;
}

.puzzle-box-logo {
    font-size: clamp(13px, 1.55vw, 22px);
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 8%;
}

.puzzle-box-logo::after {
    margin-top: 3px;
    width: 28%;
}

.puzzle-box-art-frame {
    border-radius: 6%;
    bottom: 21%;
    left: 8.5%;
    position: absolute;
    right: 8.5%;
    top: 23%;
}

.puzzle-box-art-frame::after {
    background: radial-gradient(circle at 50% 50%, transparent 66%, rgba(13, 27, 42, 0.58) 100%);
}

.puzzle-box-art {
    border-radius: 0;
    box-shadow: none;
    display: block;
    height: 100%;
    object-fit: cover;
    transform: none;
    width: 100%;
}

.puzzle-box-footer {
    align-items: end;
    bottom: 7%;
    display: grid;
    gap: 5px;
    grid-template-columns: 0.72fr minmax(0, 2.35fr) 0.72fr;
    left: 6%;
    position: absolute;
    right: 6%;
}

.puzzle-box-footer span {
    font-size: clamp(7px, 0.82vw, 11px);
}

.puzzle-box-footer strong {
    font-size: clamp(10px, 1.22vw, 18px);
    letter-spacing: 0.035em;
    line-height: 0.94;
    white-space: normal;
}

.card-row {
    justify-content: center;
}

.quote-button {
    display: none;
}

.ef-hero-box-media {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 8%;
}

.ef-hero-box-media .puzzle-box-mockup {
    max-width: 780px;
    width: min(88%, 780px);
}

.ef-hero-box-media .puzzle-box-lid {
    box-shadow:
        0 0 0 1px rgba(230, 57, 70, 0.16),
        inset 0 0 0 1px rgba(245, 245, 245, 0.08);
}

.ef-hero-box-media .puzzle-box-mockup::before {
    filter: blur(14px);
    inset: 0;
    opacity: 0.6;
    transform: translate(6%, 5%);
}

.ef-hero-box-media .puzzle-box-mockup::after {
    bottom: -3.5%;
    filter: blur(5px);
    height: 9%;
    opacity: 0.52;
}

.ef-hero-box-media img.puzzle-box-art {
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

@media (max-width: 860px) {
    .product-media.puzzle-product-media {
        padding: 4%;
    }

    .puzzle-box-logo {
        font-size: clamp(16px, 6vw, 24px);
    }

    .puzzle-box-footer span {
        font-size: clamp(8px, 2.6vw, 12px);
    }

    .puzzle-box-footer strong {
        font-size: clamp(11px, 4.2vw, 17px);
    }

    .ef-hero-box-media {
        padding: 10%;
    }
}