:root {
    --ink: #241811;
    --coffee: #33241b;
    --mocha: #6f5543;
    --latte: #b79f8a;
    --wash: #eee7df;
    --cream: #faf8f4;
    --white: #ffffff;
    --line: #ded2c7;
    --shadow: 0 24px 70px rgba(44, 31, 23, 0.16);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: "Inter", sans-serif;
    background: var(--cream);
    color: var(--ink);
    overflow-x: hidden;
    padding-top: 124px;
}

body.menu-open {
    overflow: hidden;
}

html.popup-open,
body.popup-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.popup-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms ease, transform 700ms ease;
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

button,
input,
select {
    font: inherit;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: rgba(250, 248, 244, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 0;
    transition: background 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.site-header.is-scrolled {
    background: rgba(250, 248, 244, 0.78);
    border-color: rgba(51, 36, 27, 0.08);
    box-shadow: 0 14px 44px rgba(44, 31, 23, 0.08);
}

.announcement-bar {
    position: relative;
    z-index: 2;
    background: var(--coffee);
    color: var(--white);
    text-align: center;
    padding: 0.78rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.navbar {
    position: relative;
    z-index: 2;
    min-height: 76px;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
    width: 100%;
    padding: 0 clamp(0.7rem, 2.5vw, 2rem);
    margin: 0 auto;
    transition: min-height 220ms ease;
}

.site-header.is-scrolled .navbar {
    min-height: 68px;
}

.logo {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    line-height: 0;
}

.logo img {
    display: block;
    width: clamp(170px, 18vw, 260px);
    height: auto;
    max-height: 34px;
    object-fit: contain;
}

.nav-links {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.7rem);
    color: rgba(36, 24, 17, 0.72);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.nav-links a {
    position: relative;
    color: inherit;
    text-decoration: none;
    transition: color 180ms ease, opacity 180ms ease, text-shadow 180ms ease;
}

.nav-links a::after {
    content: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.45rem;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 180ms ease, transform 180ms ease;
}

.nav-links a:hover {
    color: var(--ink);
    opacity: 1;
    text-shadow: 0 0 0.4px currentColor, 0 0 0.4px currentColor;
}

.nav-links a.is-active {
    color: var(--ink);
    opacity: 1;
    text-shadow: 0 0 0.4px currentColor, 0 0 0.4px currentColor;
}

.nav-links a.is-active:hover {
    color: var(--ink);
    text-shadow: 0 0 0.4px currentColor, 0 0 0.4px currentColor;
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
    opacity: 0;
    transform: scaleX(0);
}

.site-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    display: block;
    height: calc(100vh - 124px);
    padding: 0;
    background: rgba(17, 12, 9, 0.22);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 240ms ease, visibility 240ms ease;
}

.site-menu[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.site-menu-panel {
    width: min(390px, 88vw);
    height: 100%;
    display: grid;
    gap: 0.2rem;
    align-content: start;
    border-right: 1px solid rgba(51, 36, 27, 0.12);
    border-radius: 0;
    background: rgba(250, 248, 244, 0.97);
    box-shadow: 28px 0 80px rgba(17, 12, 9, 0.16);
    padding: clamp(1.35rem, 3vw, 2rem);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 240ms ease;
}

.site-menu[aria-hidden="false"] .site-menu-panel {
    transform: translateX(0);
}

.site-menu-panel a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 42px;
    margin-inline: -0.55rem;
    padding: 0.15rem 0.55rem;
    border-bottom: 1px solid rgba(51, 36, 27, 0.08);
    color: rgba(36, 24, 17, 0.82);
    font-family: "Playfair Display", serif;
    font-size: clamp(1.12rem, 2.2vw, 1.52rem);
    line-height: 1;
    transition: background 180ms ease, color 180ms ease, padding 180ms ease;
}

.site-menu-panel a::after {
    content: "→";
    color: rgba(36, 24, 17, 0.34);
    font-family: Inter, sans-serif;
    font-size: 0.9rem;
}

.site-menu-panel a:hover {
    color: var(--coffee);
    background: transparent;
    font-weight: 600;
}

.site-menu-panel a:hover::after {
    color: var(--coffee);
}

.site-menu-panel a.is-active {
    color: var(--ink);
    background: rgba(51, 36, 27, 0.08);
    font-weight: 600;
}

.site-menu-panel a.is-active::after {
    color: var(--ink);
}

.nav-icons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.icon-btn {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--coffee);
    cursor: pointer;
    transition: transform 180ms ease, color 180ms ease, opacity 180ms ease;
}

.icon-btn:hover {
    transform: translateY(-2px);
    background: transparent;
    color: var(--ink);
}

.icon-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-account {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 42px;
    padding: 0 0.5rem;
    max-width: 170px;
    color: var(--coffee);
    text-decoration: none;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 180ms ease, transform 180ms ease;
}

.nav-account:hover {
    color: var(--ink);
    transform: translateY(-2px);
}

.nav-account svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-account span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-btn {
    width: 62px;
    height: 54px;
    display: inline-grid;
    place-items: center;
    justify-self: start;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    color: var(--coffee);
}

.menu-btn:hover {
    background: transparent;
    transform: none;
    color: var(--ink);
}

.menu-btn svg {
    width: 42px;
    height: 30px;
}

.menu-btn svg path {
    stroke-width: 3.6;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.cart-btn,
.wishlist-btn {
    position: relative;
}

.cart-btn span,
.wishlist-btn span {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--coffee);
    color: var(--white);
    font-size: 0.68rem;
    font-weight: 800;
    pointer-events: none;
}

.hero {
    min-height: calc(100vh - 124px);
    margin-top: -2px;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    align-items: stretch;
    background:
        linear-gradient(115deg, rgba(250, 248, 244, 0.98), rgba(238, 231, 223, 0.78)),
        radial-gradient(circle at 10% 90%, rgba(183, 159, 138, 0.34), transparent 35%);
    overflow: hidden;
}

.hero-media {
    min-height: 620px;
    background:
        linear-gradient(180deg, rgba(36, 24, 17, 0) 0%, rgba(36, 24, 17, 0.28) 100%),
        url("../../assets/goslin-hero.png");
    background-size: cover;
    background-position: 50% 50%;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5.5rem);
}

.eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--mocha);
    margin-bottom: 1.2rem;
}

h1,
h2 {
    font-family: "Playfair Display", serif;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0;
}

h1 {
    max-width: 780px;
    font-size: clamp(3rem, 7vw, 6.7rem);
    line-height: 0.92;
}

h2 {
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: 1;
}

.hero-content p {
    max-width: 580px;
    margin: 1.8rem 0 0;
    color: rgba(36, 24, 17, 0.72);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2.2rem;
}

.btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    padding: 0 1.3rem;
    font-size: 0.9rem;
    font-weight: 800;
}

.btn.primary {
    background: var(--coffee);
    color: var(--white);
}

.btn.secondary {
    border: 1px solid rgba(51, 36, 27, 0.22);
    background: rgba(255, 255, 255, 0.5);
}

.marquee-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

.marquee-strip span {
    position: relative;
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--coffee);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.marquee-strip span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -0.5px;
    width: 1px;
    height: calc(100% + 2px);
    background: var(--line);
    transform: skewX(-10deg);
    transform-origin: center;
}

.mobile-hero-ribbon {
    display: none;
}

.shop-section,
.movement-section,
.about-section,
.journal-section {
    width: min(1220px, calc(100% - 32px));
    margin: 0 auto;
}

.shop-section {
    padding: clamp(4rem, 8vw, 7rem) 0;
    width: min(1380px, calc(100% - 32px));
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.section-heading a {
    font-weight: 800;
    color: var(--mocha);
    border-bottom: 1px solid currentColor;
}

.product-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (3 * clamp(1rem, 1.6vw, 1.35rem))) / 4);
    grid-template-columns: none;
    gap: clamp(1rem, 1.6vw, 1.35rem);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    padding: 0.15rem 0 1.1rem;
}

.product-grid::-webkit-scrollbar {
    display: none;
}

.product-card {
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    scroll-snap-align: start;
}

.feature-card {
    min-height: 0;
}

.product-image {
    --garment: #171717;
    --garment-shadow: rgba(0, 0, 0, 0.22);
    --print: rgba(255, 255, 255, 0.88);
    position: relative;
    display: block;
    aspect-ratio: 1 / 1.08;
    overflow: hidden;
    background-color: #ddd8cc;
    background-image: url("../../assets/product-background.jpeg?v=3");
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(51, 36, 27, 0.1);
    transition: filter 220ms ease;
}

.product-image::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 47%;
    width: var(--product-width, 64%);
    height: var(--product-height, 60%);
    background: var(--garment);
    border-radius: var(--product-radius, 10% 10% 6% 6% / 12% 12% 4% 4%);
    clip-path: var(--front-shape, polygon(22% 8%, 38% 0, 62% 0, 78% 8%, 96% 31%, 86% 41%, 76% 27%, 76% 100%, 24% 100%, 24% 27%, 14% 41%, 4% 31%));
    transform: translate(-50%, -50%);
    box-shadow: 0 18px 18px var(--garment-shadow);
    transition: clip-path 260ms ease, width 260ms ease, height 260ms ease, transform 260ms ease, background 260ms ease;
}

.product-image::after {
    content: var(--front-mark, "GO");
    position: absolute;
    left: 50%;
    top: 40%;
    width: 30%;
    transform: translate(-50%, -50%);
    color: var(--print);
    font-size: clamp(0.58rem, 1vw, 0.84rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
    transition: content 260ms ease, top 260ms ease, width 260ms ease, color 260ms ease;
}

.hoodie {
    --garment: #5f4b3f;
    --print: #eee9df;
    --product-width: 63%;
    --product-height: 57%;
    --front-mark: "GOSLIN";
    --back-mark: "ORIGINAL";
    --front-shape: polygon(22% 9%, 36% 0, 64% 0, 78% 9%, 96% 34%, 87% 46%, 77% 31%, 77% 100%, 23% 100%, 23% 31%, 13% 46%, 4% 34%);
    --back-shape: polygon(20% 8%, 35% 0, 65% 0, 80% 8%, 97% 32%, 88% 44%, 78% 31%, 78% 100%, 22% 100%, 22% 31%, 12% 44%, 3% 32%);
}

.tee {
    --garment: #f6f1e7;
    --print: #302219;
    --front-mark: "GO";
    --back-mark: "REFUSE";
}

.cap {
    --garment: #4f3d32;
    --print: #f8f3ea;
    --product-width: 52%;
    --product-height: 32%;
    --front-mark: "G";
    --back-mark: "GOSLIN";
    --front-shape: polygon(10% 62%, 20% 34%, 37% 18%, 62% 18%, 80% 34%, 90% 62%, 75% 76%, 50% 80%, 25% 76%);
    --back-shape: polygon(9% 62%, 22% 31%, 40% 16%, 60% 16%, 78% 31%, 91% 62%, 74% 78%, 50% 82%, 26% 78%);
}

.pants {
    --garment: #241812;
    --print: #bfa994;
    --product-width: 46%;
    --product-height: 62%;
    --front-mark: "";
    --back-mark: "GO";
    --front-shape: polygon(18% 0, 82% 0, 76% 100%, 55% 100%, 50% 30%, 45% 100%, 24% 100%);
    --back-shape: polygon(18% 0, 82% 0, 77% 100%, 56% 100%, 50% 31%, 44% 100%, 23% 100%);
}

.crewneck {
    --garment: #a9a8a2;
    --print: #2b211a;
    --front-mark: "GO";
    --back-mark: "DISCIPLINE";
}

.longsleeve {
    --garment: #242321;
    --print: #eee9df;
    --product-width: 60%;
    --front-mark: "STANDARD";
    --back-mark: "GOSLIN ORIGINAL";
}

.shorts {
    --garment: #b7aea0;
    --print: #302219;
    --product-width: 50%;
    --product-height: 36%;
    --front-mark: "GO";
    --back-mark: "ORIGIN";
    --front-shape: polygon(12% 0, 88% 0, 82% 100%, 55% 100%, 50% 48%, 45% 100%, 18% 100%);
    --back-shape: polygon(11% 0, 89% 0, 83% 100%, 56% 100%, 50% 48%, 44% 100%, 17% 100%);
}

.tote {
    --garment: #d5c8b2;
    --print: #302219;
    --product-width: 46%;
    --product-height: 48%;
    --front-mark: "BUILDER";
    --back-mark: "GOSLIN";
    --front-shape: polygon(24% 18%, 36% 0, 64% 0, 76% 18%, 88% 100%, 12% 100%);
    --back-shape: polygon(22% 18%, 35% 0, 65% 0, 78% 18%, 90% 100%, 10% 100%);
}

.product-page-image,
.product-media-thumb {
    background-image: url("../../assets/product-background.jpeg?v=3");
}

.product-card:hover .product-image::before {
    clip-path: var(--back-shape, var(--front-shape));
    transform: translate(-50%, -50%) scale(1.015);
}

.product-card:hover .product-image::after {
    content: var(--back-mark, "GOSLIN");
    top: 44%;
    width: 48%;
}





















.badge {
    position: absolute;
    top: 1.15rem;
    right: 1.1rem;
    z-index: 2;
    border-radius: 0;
    background: transparent;
    color: #b20f0f;
    padding: 0;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.badge.muted {
    background: transparent;
    color: rgba(36, 24, 17, 0.6);
}

.preorder-pill {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: rgba(36, 24, 17, 0.82);
    padding: 0.3rem 0.65rem;
    border-radius: 20px;
}

.preorder-pill-mini {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: rgba(36, 24, 17, 0.82);
    padding: 0.18rem 0.5rem;
    border-radius: 20px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.preorder-limit-note {
    margin: 0.6rem 0 0;
    font-size: 0.72rem;
    text-align: center;
    color: rgba(36, 24, 17, 0.6);
}

.checkout-preorder-notice {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
}

.checkout-preorder-notice strong {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mocha);
    margin-bottom: 0.25rem;
}

.checkout-preorder-notice p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #241811;
}

.product-info {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 0.85rem;
    padding: 0.9rem 0.25rem 0.35rem;
    color: var(--ink);
    text-decoration: none;
}

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

.product-info h3 {
    margin: 0;
    font-size: clamp(0.92rem, 1.05vw, 1.03rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-info p {
    margin: 0.35rem 0 0;
    color: rgba(36, 24, 17, 0.56);
    font-size: clamp(0.86rem, 1vw, 0.98rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-swatches {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    margin-top: 0.52rem;
    min-height: 0.85rem;
}

.product-swatches small {
    color: rgba(36, 24, 17, 0.66);
    font-size: 0.78rem;
    line-height: 1;
}

.swatch-square {
    display: block;
    width: 0.82rem;
    height: 0.82rem;
    border: 1px solid rgba(36, 24, 17, 0.18);
    background: var(--ink);
}

.swatch-black,
.swatch-vintage-black {
    background: #050505;
}

.swatch-cream {
    background: #f1eadc;
}

.swatch-mocha {
    background: #584031;
}

.swatch-blue {
    background: #59626b;
}

.swatch-green {
    background: #3f4941;
}

.swatch-maroon {
    background: #741f2b;
}

.product-info span {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 800;
    color: #b20f0f;
    font-size: clamp(0.92rem, 1.05vw, 1.03rem);
}

.product-card button {
    position: relative;
    z-index: 3;
    margin: 0 1rem 1rem;
    min-height: 46px;
    border: 0;
    border-radius: 0;
    background: var(--white);
    color: var(--coffee);
    font-weight: 800;
    cursor: pointer;
}

.product-card .card-wishlist-btn {
    position: absolute;
    left: auto;
    right: 0.9rem;
    bottom: calc(0.85rem + 58px);
    z-index: 4;
    width: 34px;
    height: 34px;
    min-height: 0;
    display: inline-grid;
    place-items: center;
    margin: 0;
    border: 1px solid rgba(36, 24, 17, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: var(--coffee);
    box-shadow: none;
    backdrop-filter: blur(4px);
}

.card-wishlist-btn::before {
    content: "\2661";
    font-size: 1.35rem;
    line-height: 1;
}

.card-wishlist-btn.saved {
    background: var(--coffee);
    color: var(--white);
    border-color: var(--coffee);
}

.card-wishlist-btn.saved::before {
    content: "\2665";
}

.product-card::before {
    content: "View";
    position: absolute;
    left: 0.9rem;
    top: 1.1rem;
    z-index: 2;
    border-radius: 0;
    background: transparent;
    color: rgba(36, 24, 17, 0.58);
    padding: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.product-card:hover::before {
    opacity: 1;
    transform: translateY(0);
}

.product-card button:hover,
.checkout-btn:hover,
.clear-cart-btn:hover {
    transform: translateY(-1px);
}

.cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(36, 24, 17, 0.38);
    backdrop-filter: blur(4px);
}

.cart-overlay[hidden] {
    display: none;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 20;
    width: min(460px, 100%);
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
    padding: 1.2rem;
    background: var(--cream);
    border-left: 1px solid var(--line);
    box-shadow: -24px 0 70px rgba(36, 24, 17, 0.18);
    transform: translateX(105%);
    transition: transform 240ms ease;
}

.cart-drawer[aria-hidden="true"] {
    visibility: hidden;
}

.cart-drawer[aria-hidden="false"] {
    visibility: visible;
    transform: translateX(0);
}

.cart-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.cart-header .eyebrow {
    margin-bottom: 0.45rem;
}

.cart-header h2 {
    font-size: clamp(2rem, 7vw, 3.1rem);
}

.cart-items {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.cart-items:empty {
    display: none;
}

.cart-item {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 0.9rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.cart-item-image {
    position: relative;
    overflow: hidden;
    min-height: 124px;
    border-radius: 6px;
    background-color: #ddd8cc;
    background-image: url("../../assets/product-background.jpeg?v=3");
    background-size: cover;
    background-position: center;
}

.cart-item-image::before,
.wishlist-item-image::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--product-width, 58%);
    height: var(--product-height, 54%);
    background: var(--garment, #171717);
    border-radius: var(--product-radius, 10% 10% 6% 6% / 12% 12% 4% 4%);
    clip-path: var(--front-shape, polygon(22% 8%, 38% 0, 62% 0, 78% 8%, 96% 31%, 86% 41%, 76% 27%, 76% 100%, 24% 100%, 24% 27%, 14% 41%, 4% 31%));
    transform: translate(-50%, -50%);
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.18);
}

.cart-item-image::after,
.wishlist-item-image::after {
    content: var(--front-mark, "GO");
    position: absolute;
    left: 50%;
    top: 42%;
    width: 46%;
    transform: translate(-50%, -50%);
    color: var(--print, rgba(255, 255, 255, 0.88));
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: center;
}










.cart-item-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

.cart-item-top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.cart-item h3 {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.25;
}

.cart-item p {
    margin: 0.35rem 0 0;
    color: rgba(36, 24, 17, 0.62);
    font-size: 0.88rem;
}

.cart-item strong {
    white-space: nowrap;
}

.quantity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.quantity-control {
    display: inline-grid;
    grid-template-columns: 34px 34px 34px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
    background: var(--cream);
}

.quantity-control button {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--coffee);
    font-weight: 800;
    cursor: pointer;
}

.quantity-control span {
    text-align: center;
    font-size: 0.88rem;
    font-weight: 800;
}

.remove-item,
.clear-cart-btn {
    border: 0;
    background: transparent;
    color: var(--mocha);
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.cart-empty {
    align-self: start;
    padding: 1.4rem;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.58);
}

.cart-empty[hidden],
.cart-summary[hidden] {
    display: none;
}

.cart-empty h3 {
    margin: 0;
    font-size: 1.15rem;
}

.cart-empty p {
    margin: 0.55rem 0 1.2rem;
    color: rgba(36, 24, 17, 0.65);
    line-height: 1.6;
}

.cart-summary {
    display: grid;
    gap: 0.85rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.cart-upsell {
    display: grid;
    gap: 0.5rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
}

.cart-upsell .eyebrow {
    margin: 0;
    font-size: 0.62rem;
}

.cart-upsell p {
    margin: 0;
}

.upsell-btn {
    min-height: 44px;
    border: 1px solid rgba(51, 36, 27, 0.2);
    border-radius: 8px;
    background: var(--ink);
    color: var(--white);
    font-weight: 900;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.upsell-btn:hover {
    background: var(--coffee);
    box-shadow: 0 12px 26px rgba(36, 24, 17, 0.14);
    transform: translateY(-1px);
}

.cart-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1rem;
}

.cart-summary strong {
    font-size: 1.35rem;
}

.cart-summary p {
    margin: 0;
    color: rgba(36, 24, 17, 0.62);
    font-size: 0.86rem;
    line-height: 1.5;
}

.checkout-btn {
    min-height: 50px;
    border: 0;
    border-radius: 0;
    background: var(--coffee);
    color: var(--white);
    font-weight: 800;
    cursor: pointer;
    transition: transform 180ms ease;
}

.clear-cart-btn {
    justify-self: center;
    padding: 0.3rem 0.6rem;
}

.cart-toast {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    z-index: 30;
    transform: translate(-50%, 150%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    background: var(--coffee);
    color: var(--white);
    box-shadow: var(--shadow);
    padding: 0.85rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 800;
    opacity: 0;
    transition: transform 220ms ease, opacity 220ms ease;
}

.cart-toast.show {
    transform: translate(-50%, 0);
    opacity: 1;
}

.checkout-modal {
    position: fixed;
    inset: 50% auto auto 50%;
    z-index: 25;
    width: min(1060px, calc(100% - 28px));
    max-height: min(760px, calc(100vh - 28px));
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translate(-50%, -48%) scale(0.98);
    transition: opacity 200ms ease, transform 200ms ease;
}

.checkout-modal[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.checkout-modal[aria-hidden="true"] {
    visibility: hidden;
}

.product-page {
    overflow-y: auto;
}

.product-page-main {
    width: min(1360px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(1.2rem, 4vw, 3.4rem) 0 clamp(4rem, 8vw, 7rem);
}

.product-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(340px, 0.72fr);
    gap: clamp(1.2rem, 3vw, 3.7rem);
    align-items: start;
}

.product-page-media {
    display: grid;
    gap: 0.75rem;
}

.product-page-image {
    position: relative;
    width: 100%;
    min-height: clamp(560px, 72vh, 780px);
    overflow: hidden;
    border-radius: 0;
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

.product-page-image::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 49%;
    z-index: 1;
    width: var(--mockup-width, var(--product-width, 58%));
    height: var(--mockup-height, var(--product-height, 56%));
    background:
        radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.18), transparent 18%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 34%),
        var(--garment);
    border-radius: var(--product-radius, 10% 10% 6% 6% / 12% 12% 4% 4%);
    clip-path: var(--front-shape, polygon(22% 8%, 38% 0, 62% 0, 78% 8%, 96% 31%, 86% 41%, 76% 27%, 76% 100%, 24% 100%, 24% 27%, 14% 41%, 4% 31%));
    box-shadow: 0 30px 32px var(--garment-shadow, rgba(0, 0, 0, 0.24));
    transform: translate(-50%, -50%);
}

.product-page-image::after {
    content: var(--front-mark, "GOSLIN");
    position: absolute;
    left: 50%;
    top: 42%;
    z-index: 2;
    width: 34%;
    color: var(--print);
    font-size: clamp(1rem, 2.1vw, 1.9rem);
    font-weight: 950;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.product-media-thumb::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: var(--thumb-width, var(--product-width, 54%));
    height: var(--thumb-height, var(--product-height, 54%));
    background: var(--garment);
    clip-path: var(--front-shape, polygon(22% 8%, 38% 0, 62% 0, 78% 8%, 96% 31%, 86% 41%, 76% 27%, 76% 100%, 24% 100%, 24% 27%, 14% 41%, 4% 31%));
    box-shadow: 0 8px 12px var(--garment-shadow, rgba(0, 0, 0, 0.2));
    transform: translate(-50%, -50%);
}

.product-page-image.front-product,
.product-media-thumb.front-product {
    background-position: center;
}

.product-page-image.back-product,
.product-media-thumb.back-product {
    background-position: center 42%;
}

.product-page-image.back-product::before,
.product-media-thumb.back-product::before {
    clip-path: var(--back-shape, var(--front-shape));
}

.product-page-image.back-product::after {
    content: var(--back-mark, "GOSLIN ORIGINAL");
    top: 46%;
    width: 48%;
}

.product-page-image.on-body-front,
.product-media-thumb.on-body-front {
    background-position: center top;
}

.product-page-image.on-body-front::before,
.product-page-image.on-body-back::before {
    top: 52%;
    width: calc(var(--mockup-width, var(--product-width, 58%)) * 0.82);
    height: calc(var(--mockup-height, var(--product-height, 56%)) * 0.9);
    box-shadow:
        0 28px 34px rgba(0, 0, 0, 0.18),
        0 -110px 0 -76px rgba(36, 24, 17, 0.28);
}

.product-page-image.on-body-back,
.product-media-thumb.on-body-back {
    background-position: center bottom;
}

.product-page-image.on-body-back::before {
    clip-path: var(--back-shape, var(--front-shape));
}

.product-page-image.on-body-back::after {
    content: var(--back-mark, "GOSLIN ORIGINAL");
    top: 47%;
    width: 42%;
}

.product-page-image.fabric-close-up,
.product-media-thumb.fabric-close-up {
    background-size: 220%;
    background-position: 42% 52%;
}

.product-page-image.fabric-close-up::before {
    inset: 0;
    left: auto;
    top: auto;
    width: 100%;
    height: 100%;
    border-radius: 0;
    clip-path: none;
    background:
        repeating-linear-gradient(35deg, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 8px),
        repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 7px),
        var(--garment);
    box-shadow: none;
    transform: none;
}

.product-page-image.fabric-close-up::after {
    content: "FABRIC";
    top: 50%;
    width: auto;
    color: var(--print);
    font-size: clamp(2.2rem, 7vw, 6rem);
    opacity: 0.42;
}

.product-page-image.print-close-up,
.product-media-thumb.print-close-up {
    background-size: 180%;
    background-position: 58% 44%;
}

.product-page-image.print-close-up::before {
    inset: 0;
    left: auto;
    top: auto;
    width: 100%;
    height: 100%;
    border-radius: 0;
    clip-path: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.14), transparent 32%),
        var(--garment);
    box-shadow: none;
    transform: none;
}

.product-page-image.print-close-up::after {
    content: var(--back-mark, var(--front-mark, "GOSLIN"));
    top: 50%;
    width: 68%;
    color: var(--print);
    font-size: clamp(2.2rem, 7vw, 6rem);
}

.product-page-image.tag-close-up,
.product-media-thumb.tag-close-up {
    background-size: 240%;
    background-position: 70% 28%;
}

.product-page-image.tag-close-up::before {
    left: 50%;
    top: 50%;
    width: min(44%, 300px);
    height: min(28%, 190px);
    border-radius: 3px;
    clip-path: none;
    background: #111;
    box-shadow: 0 28px 44px rgba(0, 0, 0, 0.22);
}

.product-page-image.tag-close-up::after {
    content: "GOSLIN ORIGINAL";
    top: 50%;
    width: auto;
    color: #f8f3ea;
    font-size: clamp(1rem, 3vw, 2.3rem);
}





















































































































































.product-page-image.movement-video,
.product-media-thumb.movement-video {
    background-size: cover;
    background-position: center;
}

.media-type-label {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 1;
    max-width: calc(100% - 2rem);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.92);
    color: var(--coffee);
    padding: 0.65rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product-page-image .media-type-label,
.product-media-thumb span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.product-gallery-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 180ms ease, transform 180ms ease;
}

.product-gallery-arrow.previous {
    left: 1rem;
}

.product-gallery-arrow.next {
    right: 1rem;
}

.product-gallery-arrow span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 17px;
    border-top: 4px solid rgba(18, 13, 10, 0.92);
    border-right: 4px solid rgba(18, 13, 10, 0.92);
    transform-origin: center;
}

.product-gallery-arrow span::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    border-top: 2px solid rgba(255, 255, 255, 0.96);
    border-right: 2px solid rgba(255, 255, 255, 0.96);
}

.product-gallery-arrow.previous span {
    transform: translate(-38%, -50%) rotate(-135deg);
}

.product-gallery-arrow.next span {
    transform: translate(-62%, -50%) rotate(45deg);
}

.product-gallery-arrow:hover {
    opacity: 0.7;
    transform: translateY(-50%) scale(1.04);
}

.product-zoom-active {
    overflow: hidden;
}

.product-page-image {
    cursor: zoom-in;
}

.product-page-image .product-gallery-arrow,
.product-zoom-image {
    cursor: default;
}

.product-zoom-viewer {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    background: rgba(18, 13, 10, 0.76);
    padding: clamp(1rem, 3vw, 2.5rem);
}

.product-zoom-viewer[aria-hidden="true"] {
    display: none;
}

.product-zoom-stage {
    display: grid;
    gap: 1rem;
    justify-items: center;
    width: min(100%, 1120px);
}

.product-zoom-frame {
    width: 100%;
    overflow: hidden;
    background: #f1efeb;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
    touch-action: none;
}

.product-zoom-image {
    width: 100%;
    min-height: min(72vh, 720px);
    background-color: #f1efeb;
    cursor: zoom-in;
    transform: translate(var(--zoom-x, 0px), var(--zoom-y, 0px)) scale(var(--zoom-scale, 1));
    transform-origin: center;
    transition: transform 220ms ease;
    will-change: transform;
    user-select: none;
}

.product-zoom-image.is-zoomed {
    cursor: grab;
}

.product-zoom-image.is-dragging {
    cursor: grabbing;
    transition: none;
}

.product-zoom-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.product-zoom-control,
.product-zoom-close,
.product-zoom-scale {
    position: relative;
    z-index: 92;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 999px;
    background: rgba(250, 248, 244, 0.94);
    color: var(--coffee);
    cursor: pointer;
    transition: opacity 180ms ease, transform 180ms ease;
}

.product-zoom-close,
.product-zoom-scale {
    font-size: 0;
}

.product-zoom-close::before,
.product-zoom-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 21px;
    height: 2px;
    background: var(--coffee);
}

.product-zoom-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.product-zoom-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.product-zoom-scale::before {
    content: attr(aria-label);
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.product-zoom-scale::after {
    content: "+";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1;
}

.product-zoom-scale[data-zoom-scale="-0.25"]::after {
    content: "-";
    padding-bottom: 0.1rem;
}

.product-zoom-control span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-top: 2px solid var(--coffee);
    border-right: 2px solid var(--coffee);
}

.product-zoom-control.previous span {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.product-zoom-control.next span {
    transform: translate(-65%, -50%) rotate(45deg);
}

.product-zoom-control:hover,
.product-zoom-close:hover,
.product-zoom-scale:hover {
    opacity: 0.86;
    transform: translateY(-1px);
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 76px;
    height: 76px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%);
}

.video-play-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 19px solid var(--coffee);
    transform: translate(-50%, -50%);
}

.video-play-icon[hidden] {
    display: none;
}

.product-media-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(118px, 1fr);
    grid-template-columns: none;
    gap: 0.55rem;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
}

.product-media-thumb {
    position: relative;
    min-height: 74px;
    display: flex;
    align-items: end;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    color: var(--latte);
    cursor: pointer;
    padding: 0.45rem;
    text-align: left;
    scroll-snap-align: start;
}

.product-media-thumb.selected {
    border-color: var(--coffee);
    box-shadow: 0 0 0 2px rgba(51, 36, 27, 0.14);
}

.product-media-thumb span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.product-page-content {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.42rem;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.product-wishlist-btn {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(36, 24, 17, 0.58);
    padding: 0;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    transition: color 180ms ease;
}

.product-wishlist-btn::after {
    content: "\2661";
    width: auto;
    height: auto;
    flex: 0 0 auto;
    background: none;
    color: currentColor;
    font-size: 1.08rem;
    line-height: 1;
    transition: opacity 180ms ease, transform 180ms ease;
}

.product-wishlist-btn:hover,
.product-wishlist-btn.saved {
    color: var(--coffee);
}

.product-wishlist-btn.saved::after {
    content: "\2665";
    transform: translateY(-1px);
}

.product-rating {
    color: var(--mocha);
    font-size: 0.76rem;
    font-weight: 900;
}

.product-rating a,
.product-review-summary a {
    color: rgba(36, 24, 17, 0.64);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.product-rating span {
    color: #080808;
    letter-spacing: 0.08em;
}

.product-page-content h1,
.checkout-header h2,
.order-confirmation h2 {
    font-size: clamp(2.9rem, 5.6vw, 5.8rem);
    letter-spacing: 0;
}

.product-page-content h1 {
    font-size: clamp(1.58rem, 2.55vw, 2.6rem);
    line-height: 0.98;
}

.product-color {
    display: none;
}

.product-page-price {
    margin: -0.12rem 0 0;
    color: var(--coffee);
    font-size: 0.9rem;
    font-weight: 900;
}

.product-page-meaning {
    margin: 0;
    color: rgba(36, 24, 17, 0.72);
    font-size: 0.74rem;
    line-height: 1.3;
}

.detail-block {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    padding: 0.44rem 0 0;
}

.detail-block h3,
.product-accordions summary {
    margin: 0 0 0.32rem;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.detail-heading-row {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 1.25rem;
}

.detail-heading-row span {
    color: var(--mocha);
    font-size: 0.68rem;
    font-weight: 800;
}

.color-options {
    display: flex;
    gap: 0.38rem;
    overflow-x: auto;
    padding-bottom: 0.08rem;
}

.color-option {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    min-width: 46px;
    border: 0;
    background: transparent;
    color: rgba(36, 24, 17, 0.66);
    cursor: pointer;
    text-align: left;
}

.color-option span {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid rgba(51, 36, 27, 0.12);
    background: #ddd8cc;
}

.color-option[data-tone="hoodie"] span,
.color-option[data-tone="pants"] span,
.color-option[data-tone="black"] span,
.color-option[data-tone="longsleeve"] span {
    background: #25211e;
}

.color-option[data-tone="tee"] span,
.color-option[data-tone="bone"] span {
    background: #f1eee6;
}

.color-option[data-tone="cap"] span {
    background: #6b5242;
}

.color-option[data-tone="cap-blue"] span {
    background: #59626b;
}

.color-option[data-tone="cap-green"] span {
    background: #3f4941;
}

.color-option[data-tone="crewneck"] span {
    background: #aaa7a1;
}

.color-option[data-tone="shorts"] span,
.color-option[data-tone="tote"] span {
    background: #c6b8a4;
}

.color-option.selected span {
    border-color: var(--coffee);
    box-shadow: inset 0 0 0 2px var(--cream), 0 0 0 1px var(--coffee);
}

.detail-block p,
.materials-list,
.description-list {
    margin: 0;
    color: rgba(36, 24, 17, 0.66);
    font-size: 0.74rem;
    line-height: 1.32;
}

.materials-list,
.description-list {
    padding-left: 1.1rem;
}

.product-accordions {
    display: grid;
    gap: 0.18rem;
    order: 20;
}

.product-accordions details {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    padding: 0.48rem 0;
}

.product-accordions summary {
    margin: 0;
    cursor: pointer;
}

.emotional-line,
.size-recommendation {
    color: var(--coffee);
    font-weight: 900;
}

.size-recommend-btn {
    display: none;
    margin-top: 0.28rem;
    min-height: 28px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--cream);
    color: var(--coffee);
    padding: 0 0.62rem;
    font-size: 0.7rem;
    font-weight: 900;
    cursor: pointer;
}

.size-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.size-heading-row h3 {
    margin: 0;
}

.size-guide-link {
    color: var(--coffee);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 0.18rem;
    white-space: nowrap;
}

.size-guide-link:hover,
.size-guide-link:focus-visible {
    color: var(--black);
}

.size-guide-open {
    overflow: hidden;
}

.size-guide-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 2rem);
    background: rgba(36, 24, 17, 0.42);
    opacity: 1;
    transition: opacity 180ms ease;
}

.size-guide-modal[aria-hidden="true"] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.size-guide-card {
    position: relative;
    width: min(760px, 100%);
    max-height: min(760px, calc(100vh - 2rem));
    overflow: auto;
    border: 1px solid var(--line);
    background: var(--cream);
    color: var(--ink);
    box-shadow: 0 28px 80px rgba(36, 24, 17, 0.2);
}

.size-guide-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
}

.size-guide-close::before,
.size-guide-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--ink);
}

.size-guide-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.size-guide-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.size-guide-copy {
    padding: clamp(1.4rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem) 1rem;
    max-width: 620px;
}

.size-guide-copy h2 {
    margin: 0.4rem 0 0.75rem;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.size-guide-copy p {
    margin: 0.6rem 0 0;
    color: rgba(36, 24, 17, 0.72);
    line-height: 1.6;
}

.size-guide-table-wrap {
    padding: 0 clamp(1.2rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem);
}

.size-guide-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.8rem;
    background: rgba(255, 255, 255, 0.45);
}

.size-guide-table th,
.size-guide-table td {
    border: 1px solid var(--line);
    padding: 0.85rem 0.65rem;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 900;
}

.size-guide-table th {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.52);
}

.size-guide-table-wrap > p {
    margin: 0.8rem 0 0;
    color: rgba(36, 24, 17, 0.62);
    font-size: 0.78rem;
}

.size-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
    gap: 0.22rem;
}

.size-option {
    min-width: 0;
    min-height: 30px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.72);
    color: var(--coffee);
    font-size: 0.68rem;
    font-weight: 900;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.size-option.selected {
    background: var(--coffee);
    color: var(--white);
    border-color: var(--coffee);
}

.size-note {
    margin-top: 0.22rem;
    font-size: 0.7rem;
}

.modal-add-btn,
.product-add-btn,
.place-order-btn {
    min-height: 38px;
    border: 0;
    border-radius: 0;
    background: var(--coffee);
    color: var(--white);
    font-weight: 900;
    cursor: pointer;
}

.product-add-btn {
    width: 100%;
    order: 10;
    margin-top: 0.1rem;
    border-radius: 0;
    background: rgba(36, 24, 17, 0.2);
    color: rgba(36, 24, 17, 0.62);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.product-add-btn.is-ready {
    background: #050505;
    color: #fff;
}

.product-add-btn:disabled {
    cursor: not-allowed;
}

.product-add-btn.is-ready:hover {
    transform: translateY(-1px);
}

.product-trust-row,
.secure-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.product-trust-row {
    order: 11;
}

.product-trust-row span,
.secure-badges span {
    border-radius: 0;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--coffee);
    padding: 0.28rem 0.45rem;
    font-size: 0.62rem;
    font-weight: 900;
}

.style-with-section {
    margin-top: clamp(2.5rem, 6vw, 5rem);
    padding-top: clamp(1.6rem, 4vw, 3rem);
    border-top: 1px solid var(--line);
}

.style-with-section h3 {
    margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
    color: #080808;
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.style-with-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 25%);
    gap: 3px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    border-left: 1px solid rgba(51, 36, 27, 0.1);
}

.style-with-grid::-webkit-scrollbar {
    display: none;
}

.style-with-card .product-image {
    aspect-ratio: 1 / 1.16;
}

.style-with-card .product-info {
    align-items: start;
    padding: 0.85rem 0.95rem 1.1rem;
}

.style-with-card .product-info h4 {
    margin: 0;
    color: #080808;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 950;
}

.style-with-card .product-info p {
    margin-top: 0.28rem;
    font-size: 0.82rem;
}

.style-with-card .product-info span {
    font-size: 0.86rem;
}

.product-social-proof {
    display: grid;
    gap: clamp(1.4rem, 3vw, 2.6rem);
    grid-column: 1 / -1;
    margin-top: clamp(2rem, 5vw, 4rem);
    padding-top: clamp(1.6rem, 4vw, 3rem);
    border-top: 1px solid var(--line);
    scroll-margin-top: 140px;
}

.product-social-proof h3 {
    margin: 0;
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product-review-summary {
    display: grid;
    grid-template-columns: minmax(180px, 0.25fr) minmax(0, 1fr);
    gap: clamp(1.4rem, 4vw, 4rem);
    align-items: start;
}

.product-review-summary > div:first-child {
    display: grid;
    gap: 0.3rem;
}

.product-review-summary > div:first-child strong {
    color: #050505;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    line-height: 0.95;
}

.product-review-summary > div:first-child span {
    color: #050505;
    font-size: 1.55rem;
    letter-spacing: 0.03em;
}

.review-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 0.8rem;
}

.review-metrics div {
    display: grid;
    gap: 0.45rem;
}

.review-metrics strong {
    font-size: 0.9rem;
}

.review-metrics span {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(36, 24, 17, 0.1);
}

.review-metrics i {
    position: absolute;
    top: 50%;
    width: 26px;
    height: 6px;
    border-radius: 999px;
    background: rgba(36, 24, 17, 0.72);
    transform: translate(-50%, -50%);
}

.review-metrics small {
    font-size: 0.72rem;
    font-weight: 900;
    text-align: center;
}

.review-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.8rem;
}

.review-search {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.9rem;
    min-height: 50px;
    background: rgba(255, 255, 255, 0.58);
    padding: 0 1rem;
}

.review-search span {
    color: rgba(36, 24, 17, 0.64);
    font-size: 1.2rem;
}

.review-search input,
.review-sort select {
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    outline: 0;
}

.review-sort {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(36, 24, 17, 0.72);
    font-weight: 800;
}

.review-sort select {
    font-weight: 900;
}

.review-submit-form {
    display: grid;
    gap: 1rem;
    margin: clamp(1.2rem, 3vw, 2rem) 0;
    padding: clamp(1.1rem, 3vw, 1.8rem);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.52);
}

.review-submit-form > div:first-child {
    display: grid;
    gap: 0.35rem;
}

.review-submit-form h2,
.review-submit-form h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    line-height: 1;
}

.review-submit-form p {
    margin: 0;
    color: rgba(36, 24, 17, 0.68);
    line-height: 1.55;
}

.review-submit-form label {
    display: grid;
    gap: 0.45rem;
    color: var(--ink);
    font-weight: 800;
}

.review-submit-form textarea,
.review-submit-form input:not([type="radio"]):not([type="checkbox"]) {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.76);
    color: var(--ink);
    font: inherit;
    padding: 0.85rem 0.9rem;
    outline: 0;
}

.review-submit-form textarea {
    min-height: 130px;
    resize: vertical;
}

.review-submit-form textarea:focus,
.review-submit-form input:focus {
    border-color: var(--coffee);
}

.review-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.rating-field {
    align-items: start;
}

.star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.15rem;
    width: max-content;
}

.star-rating input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.star-rating label {
    display: inline-grid;
    cursor: pointer;
    color: rgba(36, 24, 17, 0.42);
    font-size: 1.65rem;
    line-height: 1;
    transition: color 180ms ease, transform 180ms ease;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: var(--maroon);
}

.star-rating label:hover {
    transform: translateY(-1px);
}

.review-save-field {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    color: rgba(36, 24, 17, 0.72);
    font-weight: 600 !important;
}

.review-submit-form button {
    width: fit-content;
    border: 0;
    background: var(--coffee);
    color: var(--cream);
    cursor: pointer;
    font: inherit;
    font-weight: 950;
    padding: 0.95rem 1.8rem;
    transition: transform 180ms ease, background 180ms ease;
}

.review-submit-form button:hover {
    background: #28180f;
    transform: translateY(-1px);
}

.review-submit-message {
    color: var(--coffee) !important;
    font-weight: 800;
}

.product-reviews {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.product-review-row {
    display: grid;
    grid-template-columns: minmax(170px, 0.28fr) minmax(0, 1fr) auto;
    gap: clamp(1rem, 4vw, 3rem);
    border-bottom: 1px solid var(--line);
    padding: clamp(1.2rem, 3vw, 2.2rem) 0;
}

.product-review-row aside {
    display: grid;
    align-content: start;
    gap: 0.28rem;
}

.product-review-row aside strong {
    color: #050505;
    font-size: 1rem;
}

.product-review-row aside small,
.product-review-row div small {
    color: rgba(36, 24, 17, 0.58);
}

.product-review-row aside span {
    color: #050505;
    font-size: 0.78rem;
    font-weight: 900;
}

.product-review-row aside b {
    color: #050505;
    letter-spacing: 0.08em;
}

.product-review-row dl {
    display: grid;
    gap: 0.2rem;
    margin: 1rem 0 0;
}

.product-review-row dl div {
    display: flex;
    gap: 0.7rem;
}

.product-review-row dt,
.product-review-row dd {
    margin: 0;
    font-size: 0.78rem;
}

.product-review-row dt {
    font-weight: 900;
}

.product-review-row div p {
    margin: 0 0 1.8rem;
    color: #050505;
    font-weight: 800;
    line-height: 1.65;
}

.product-review-row time {
    color: #050505;
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
}

.product-review-row footer {
    grid-column: 2 / -1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(36, 24, 17, 0.72);
    font-size: 0.8rem;
}

.product-review-row footer button {
    border: 0;
    background: transparent;
    color: #050505;
    cursor: pointer;
    font: inherit;
}

.review-empty {
    margin: 0;
    padding: 2rem 0;
    border-bottom: 1px solid var(--line);
    color: rgba(36, 24, 17, 0.68);
}

.reviews-main {
    padding: clamp(4.5rem, 9vw, 7rem) clamp(1.25rem, 5vw, 5rem);
}

.reviews-hero {
    display: grid;
    gap: 1rem;
    max-width: 940px;
    margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
}

.reviews-hero .eyebrow {
    margin: 0;
}

.reviews-hero h1 {
    margin: 0;
    font-family: "Playfair Display", serif;
    color: var(--ink);
    font-size: clamp(3rem, 7vw, 6.4rem);
    line-height: 0.92;
}

.reviews-hero p {
    max-width: 620px;
    margin: 0 auto;
    color: rgba(36, 24, 17, 0.68);
    font-size: clamp(1rem, 1.7vw, 1.18rem);
    line-height: 1.75;
}

.reviews-board {
    max-width: 1120px;
    margin: 0 auto;
}

.reviews-board .product-review-summary {
    margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.reviews-tabs {
    display: flex;
    align-items: center;
    gap: clamp(1.2rem, 3vw, 2.4rem);
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.2rem;
}

.reviews-tabs button {
    border: 0;
    background: transparent;
    color: rgba(36, 24, 17, 0.62);
    padding: 0 0 1rem;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: color 180ms ease;
}

.reviews-tabs button:hover,
.reviews-tabs button.is-active {
    color: var(--ink);
}

.reviews-page .review-tools {
    margin-bottom: 0.3rem;
}

.reviews-page .product-review-row[hidden] {
    display: none;
}

.checkout-modal {
    display: grid;
    grid-template-rows: auto 1fr;
    padding: clamp(1rem, 3vw, 2rem);
    overflow-y: auto;
}

.checkout-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.checkout-form {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 1.1rem;
    padding-top: 1rem;
}

.checkout-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.checkout-fields label {
    display: grid;
    gap: 0.42rem;
    color: var(--coffee);
    font-size: 0.84rem;
    font-weight: 900;
}

.wide-field {
    grid-column: 1 / -1;
}

.checkout-fields input,
.checkout-fields select {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    padding: 0 0.9rem;
    outline: 0;
}

.checkout-fields input:focus,
.checkout-fields select:focus {
    border-color: var(--mocha);
    box-shadow: 0 0 0 3px rgba(111, 85, 67, 0.13);
}

.checkout-summary {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    padding: 1rem;
}

.checkout-summary h3 {
    margin: 0;
    font-size: 1.05rem;
}

.checkout-items {
    display: grid;
    gap: 0.65rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
}

.checkout-item,
.summary-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: rgba(36, 24, 17, 0.7);
    line-height: 1.45;
}

.checkout-item strong,
.summary-line strong {
    color: var(--ink);
    white-space: nowrap;
}

.summary-line.total {
    align-items: center;
    padding-top: 0.55rem;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-weight: 900;
}

.summary-line.total strong {
    font-size: 1.35rem;
}

.checkout-note {
    margin: 0;
    color: rgba(36, 24, 17, 0.58);
    font-size: 0.78rem;
    line-height: 1.55;
}

.checkout-page {
    background: var(--paper);
}

.checkout-page-main {
    min-height: 100vh;
    padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem);
}

.checkout-page-hero {
    width: min(1280px, 100%);
    margin: 0 auto clamp(2rem, 4vw, 3.5rem);
    display: grid;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.checkout-page-hero h1 {
    margin: 0;
    max-width: 980px;
    font-family: "Playfair Display", serif;
    font-size: clamp(3rem, 7vw, 7.2rem);
    line-height: 0.88;
    font-weight: 600;
    color: var(--ink);
}

.checkout-page-hero p {
    max-width: 900px;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.7;
}

.checkout-page-shell {
    width: min(1280px, 100%);
    margin: 0 auto;
}

.checkout-page-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.46fr);
    gap: clamp(1.25rem, 3vw, 3rem);
    align-items: start;
}

.checkout-page-form .checkout-fields {
    padding: clamp(1rem, 2vw, 1.6rem);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.44);
}

.checkout-page-summary {
    position: sticky;
    top: 7.5rem;
}

.checkout-secure-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.3rem;
}

.checkout-secure-heading strong {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--coffee);
}

.checkout-empty {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.checkout-item-image {
    width: 58px;
    height: 72px;
    flex: 0 0 auto;
    display: block;
    background-color: #f1efeb;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.checkout-item-copy {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
    margin-right: auto;
}

.checkout-item-copy small {
    color: var(--muted);
}

.checkout-page-confirmation {
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.58);
    padding: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 820px) {
    .checkout-page-main {
        padding: 3rem 1rem 4rem;
    }

    .checkout-page-hero h1 {
        font-size: clamp(3rem, 18vw, 5.4rem);
    }

    .checkout-page-form {
        grid-template-columns: 1fr;
    }

    .checkout-page-summary {
        position: static;
    }

    .checkout-secure-heading {
        align-items: start;
        flex-direction: column;
    }
}

.order-confirmation {
    display: grid;
    align-content: center;
    justify-items: start;
    min-height: 420px;
    max-width: 740px;
    gap: 1rem;
}

.order-confirmation[hidden] {
    display: none;
}

.order-confirmation p {
    margin: 0;
    color: rgba(36, 24, 17, 0.7);
    font-size: 1.08rem;
    line-height: 1.8;
}

.content-section {
    width: min(1220px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    border-top: 1px solid var(--line);
}

.story-grid,
.process-grid,
.review-grid,
.policy-grid,
.recent-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
}

.story-grid::-webkit-scrollbar,
.process-grid::-webkit-scrollbar,
.review-grid::-webkit-scrollbar,
.policy-grid::-webkit-scrollbar,
.recent-grid::-webkit-scrollbar {
    display: none;
}

.process-grid,
.policy-grid {
    grid-template-columns: none;
}

.story-grid > *,
.process-grid > *,
.review-grid > *,
.policy-grid > *,
.recent-grid > * {
    scroll-snap-align: start;
}

.story-card,
.process-grid article,
.policy-grid article,
.review-grid blockquote,
.recent-card {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    padding: 1.25rem;
    box-shadow: 0 12px 36px rgba(44, 31, 23, 0.06);
}

.story-card {
    color: var(--white);
    background:
        linear-gradient(180deg, rgba(36, 24, 17, 0.14), rgba(36, 24, 17, 0.72)),
        url("https://images.unsplash.com/photo-1496747611176-843222e1e57c?auto=format&fit=crop&w=1000&q=85");
    background-size: cover;
    background-position: center;
}

.story-card.tall {
    grid-row: span 2;
    min-height: 476px;
}

.story-card span,
.process-grid span,
.review-grid span {
    color: var(--latte);
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.story-card h3,
.process-grid h3,
.policy-grid h3,
.recent-card span {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    line-height: 1.15;
}

.process-grid p,
.policy-grid p,
.review-grid p,
.community-section p {
    color: rgba(36, 24, 17, 0.68);
    line-height: 1.65;
}

.review-grid blockquote {
    margin: 0;
}

.review-grid cite {
    color: var(--mocha);
    font-style: normal;
    font-weight: 900;
}

.community-section {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 0.7fr);
    gap: 2rem;
    align-items: center;
}

.home-build-cta {
    background: var(--cream);
    color: var(--ink);
    padding: clamp(3.8rem, 8vw, 7rem) clamp(1rem, 4vw, 4rem);
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.home-build-inner {
    width: min(1380px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(520px, 1.08fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.home-build-cta h2 {
    max-width: 620px;
    margin: 0 0 clamp(1.4rem, 3vw, 2rem);
    color: var(--ink);
    font-family: "Playfair Display", serif;
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}

.home-build-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--coffee);
    color: var(--cream);
    padding: 0 1.3rem;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: filter 180ms ease, transform 180ms ease;
}

.home-build-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.home-build-note {
    max-width: 360px;
    margin: 1.2rem 0 0;
    color: rgba(36, 24, 17, 0.66);
    font-size: 1rem;
    line-height: 1.55;
}

.builder-wall {
    position: relative;
    min-height: clamp(500px, 42vw, 650px);
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(57, 38, 29, 0.16);
    background:
        linear-gradient(180deg, rgba(14, 11, 9, 0.04), rgba(14, 11, 9, 0.34)),
        url("../../assets/home-community-split.jpeg") center 44% / cover no-repeat;
    box-shadow: 0 24px 80px rgba(57, 38, 29, 0.12);
}

.builder-wall::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(14, 11, 9, 0.7), rgba(14, 11, 9, 0.08) 58%, rgba(14, 11, 9, 0.48)),
        radial-gradient(circle at 18% 18%, rgba(255, 248, 239, 0.13), transparent 26rem);
    z-index: -1;
}

.home-split-cta {
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 4rem);
}

.home-split-cta .home-build-inner {
    width: min(1480px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
    min-height: clamp(560px, 48vw, 720px);
    background:
        linear-gradient(90deg, rgba(11, 9, 8, 0.56), rgba(11, 9, 8, 0.22) 50%, rgba(11, 9, 8, 0.58)),
        url("../../assets/home-community-split.jpeg") center 44% / cover no-repeat;
    border: 1px solid rgba(57, 38, 29, 0.18);
    box-shadow: 0 24px 80px rgba(57, 38, 29, 0.14);
    overflow: hidden;
}

.home-split-panel {
    min-height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4.8rem);
    color: var(--cream);
    isolation: isolate;
}

.home-split-panel + .home-split-panel {
    border-left: 1px solid rgba(255, 248, 239, 0.2);
}

.home-split-panel-built {
    background: linear-gradient(90deg, rgba(11, 9, 8, 0.42), rgba(11, 9, 8, 0.08));
}

.home-split-panel-community {
    background: linear-gradient(270deg, rgba(11, 9, 8, 0.5), rgba(11, 9, 8, 0.14));
}

.home-split-panel .eyebrow,
.home-split-panel h2,
.home-split-panel .home-build-note {
    color: var(--cream);
}

.home-split-panel h2 {
    max-width: 620px;
    text-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
    font-size: clamp(2.1rem, 3.8vw, 3.75rem);
    line-height: 1.02;
    min-height: 3.08em;
}

.home-split-panel .home-build-note {
    max-width: 520px;
    margin: 0 0 1.4rem;
    color: rgba(255, 248, 239, 0.78);
    font-size: 0.95rem;
    line-height: 1.48;
}

.home-split-panel .home-build-btn {
    width: fit-content;
    background: var(--cream);
    color: var(--coffee);
}

.home-split-panel .home-build-btn-light {
    background: transparent;
    color: var(--cream);
    border: 1px solid rgba(255, 248, 239, 0.45);
}

.home-split-panel .home-build-btn:hover {
    filter: none;
    background: var(--white);
}

.home-split-panel .home-build-btn-light:hover {
    background: rgba(255, 248, 239, 0.12);
}

@media (max-width: 720px) {
    .home-build-cta {
        padding: 3.6rem 1rem;
    }

    .home-build-inner {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }

    .home-build-cta h2 {
        font-size: clamp(2.2rem, 12vw, 4.6rem);
        line-height: 1;
    }

    .home-split-panel h2 {
        font-size: clamp(2rem, 10vw, 3.2rem);
        line-height: 1.04;
        min-height: 0;
    }

    .home-build-btn {
        width: 100%;
        min-height: 50px;
    }

    .builder-wall {
        min-height: 360px;
        background-position: center;
    }

    .home-split-cta .home-build-inner {
        grid-template-columns: 1fr;
        min-height: auto;
        background-position: center;
    }

    .home-split-panel {
        min-height: 420px;
    }

    .home-split-panel + .home-split-panel {
        border-left: 0;
        border-top: 1px solid rgba(255, 248, 239, 0.2);
    }

    .home-split-panel .home-build-btn {
        width: 100%;
    }

}

.cta-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: end;
}

.page-shell {
    min-height: 100vh;
}

.page-hero {
    width: min(1040px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(5rem, 10vw, 9rem) 0 clamp(3rem, 7vw, 6rem);
    text-align: center;
}

.page-hero h1 {
    margin-inline: auto;
    text-transform: uppercase;
}

.page-hero p {
    max-width: 660px;
    margin: 1.6rem auto 0;
    color: rgba(36, 24, 17, 0.68);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.85;
}

.editorial-section {
    width: min(1040px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    border-top: 1px solid var(--line);
}

.editorial-split {
    display: grid;
    grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(2rem, 8vw, 6rem);
    align-items: start;
}

.editorial-copy {
    display: grid;
    gap: 1rem;
}

.editorial-copy p {
    margin: 0;
    color: rgba(36, 24, 17, 0.7);
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.85;
}

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

.page-card-grid article,
.policy-detail {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
    padding: clamp(1.1rem, 2.4vw, 1.8rem);
    box-shadow: 0 12px 36px rgba(44, 31, 23, 0.05);
}

.page-card-grid h3,
.policy-detail h3 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.1;
}

.page-card-grid p,
.policy-detail p,
.policy-detail li {
    color: rgba(36, 24, 17, 0.68);
    line-height: 1.7;
}

.early-access-form,
.popup-form {
    display: grid;
    gap: 0.7rem;
}

.early-access-form input,
.popup-form input {
    min-height: 50px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: #ffffff;
    color: var(--ink);
    padding: 0 1rem;
    box-shadow: none;
    backdrop-filter: none;
}

.early-access-form input::placeholder,
.popup-form input::placeholder {
    color: rgba(36, 24, 17, 0.58);
}

.early-access-form button,
.popup-form button {
    min-height: 50px;
    border: 0;
    border-radius: 0;
    background: var(--coffee);
    color: var(--white);
    font-weight: 900;
    cursor: pointer;
}

.early-access-form a {
    color: var(--mocha);
    font-weight: 900;
}

.recent-card {
    min-height: 0;
    display: grid;
    grid-template-columns: 88px 1fr auto;
    align-items: center;
    gap: 0.9rem;
    border: 1px solid var(--line);
    color: var(--coffee);
    cursor: pointer;
    text-align: left;
}

.recent-card-image {
    width: 88px;
    aspect-ratio: 4 / 5;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
}

.recent-card-copy {
    display: grid;
    gap: 0.25rem;
}

.recent-card-copy span {
    font-size: 1rem;
    font-weight: 900;
}

.recent-card-copy small {
    color: rgba(36, 24, 17, 0.64);
    font-weight: 800;
}

.recent-card strong {
    font-size: 1rem;
    white-space: nowrap;
}

.rail-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    top: var(--rail-center, 50%);
    z-index: 5;
    pointer-events: none;
    transform: translateY(-50%);
}

.rail-arrow {
    position: relative;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(36, 24, 17, 0.84);
    font-size: 0;
    cursor: pointer;
    opacity: 0.68;
    pointer-events: auto;
    transition: opacity 180ms ease, transform 180ms ease;
}

.rail-arrow::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-top: 1.8px solid currentColor;
    border-right: 1.8px solid currentColor;
    transform-origin: center;
}

.rail-arrow[data-rail-direction="-1"]::before {
    transform: translateX(3px) rotate(-135deg);
}

.rail-arrow[data-rail-direction="1"]::before {
    transform: translateX(-3px) rotate(45deg);
}

.rail-arrow:hover {
    opacity: 0.86;
    transform: scale(1.02);
}

.rail-controls:has(+ .process-grid) .rail-arrow,
.rail-controls:has(+ .policy-grid) .rail-arrow,
.rail-controls:has(+ .review-grid) .rail-arrow,
.rail-controls:has(+ .recent-grid) .rail-arrow,
.rail-controls:has(+ .journal-grid) .rail-arrow {
    color: rgba(36, 24, 17, 0.82);
}

.shop-section,
.content-section,
.movement-section,
.journal-section {
    position: relative;
}

.shop-section {
    --rail-center: 58%;
}

.content-section,
.movement-section,
.journal-section {
    --rail-center: 56%;
}

.mini-panel {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 35;
    width: min(390px, calc(100% - 2rem));
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--cream);
    box-shadow: var(--shadow);
    padding: 1.2rem;
}

.email-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 80;
    width: min(520px, calc(100% - 2rem));
    border: 1px solid rgba(51, 36, 27, 0.16);
    border-radius: 0;
    background: #eee8e0;
    box-shadow: 0 28px 90px rgba(17, 12, 9, 0.24);
    padding: clamp(1.7rem, 4vw, 2.25rem);
    transform: translate(-50%, -50%);
    isolation: isolate;
    backdrop-filter: none;
}

.email-popup::before {
    content: "";
    position: fixed;
    inset: -100vh;
    z-index: -2;
    background: rgba(17, 12, 9, 0.18);
    backdrop-filter: none;
    pointer-events: none;
}

.email-popup > * {
    position: relative;
    z-index: 1;
}

.mini-panel[aria-hidden="true"],
.email-popup[aria-hidden="true"] {
    display: none;
}

.mini-close,
.popup-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.cart-close,
.checkout-close,
.mini-close,
.popup-close {
    font-size: 0;
}

.cart-close::before,
.checkout-close::before,
.mini-close::before,
.popup-close::before {
    content: "x";
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.wishlist-panel .eyebrow {
    margin: 0 2.5rem 0.9rem 0;
}

.wishlist-panel h2 {
    max-width: 7ch;
    margin: 0 2.5rem 1.15rem 0;
    font-size: clamp(3.1rem, 11vw, 4.8rem);
    line-height: 0.88;
}

.wishlist-items {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.2rem;
}

.wishlist-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    padding: 0.65rem;
    color: var(--coffee);
    text-align: left;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.wishlist-item:hover {
    border-color: rgba(51, 36, 27, 0.3);
    box-shadow: 0 12px 30px rgba(44, 31, 23, 0.1);
    transform: translateY(-1px);
}

.wishlist-item-image {
    position: relative;
    overflow: hidden;
    width: 64px;
    height: 72px;
    border-radius: 6px;
    background-color: #ddd8cc;
    background-image: url("../../assets/product-background.jpeg?v=3");
    background-size: cover;
    background-position: center;
}

.wishlist-item-copy {
    display: grid;
    gap: 0.2rem;
}

.wishlist-item strong {
    font-size: 0.95rem;
}

.wishlist-item small {
    color: rgba(36, 24, 17, 0.62);
    font-weight: 700;
}

.wishlist-item > span:last-child {
    font-weight: 900;
}

.wishlist-empty {
    margin: 0;
    color: rgba(36, 24, 17, 0.66);
    line-height: 1.55;
    max-width: 24ch;
}

.email-popup h2 {
    max-width: 10ch;
    margin-block: 1.4rem 0.8rem;
    font-size: clamp(3rem, 8vw, 4.7rem);
    line-height: 0.9;
}

.email-popup p {
    margin: 0 0 1.25rem;
    color: rgba(36, 24, 17, 0.86);
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    line-height: 1.35;
}

.email-popup .popup-close {
    top: 1rem;
    right: 1rem;
    width: auto;
    height: auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0.35rem;
    color: var(--ink);
}

.email-popup .popup-close::before {
    font-size: 1.05rem;
}

.email-popup .eyebrow {
    color: rgba(36, 24, 17, 0.76);
}

.error-page {
    min-height: 100vh;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 1rem;
    width: min(760px, calc(100% - 32px));
    margin: 0 auto;
}

.error-page p {
    color: rgba(36, 24, 17, 0.7);
    font-size: 1.1rem;
    line-height: 1.7;
}

.movement-section {
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: clamp(1rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(4rem, 8vw, 7rem) 0;
    border-top: 1px solid var(--line);
}

.movement-copy p {
    color: rgba(36, 24, 17, 0.72);
    line-height: 1.85;
    font-size: 1.05rem;
}

.movement-copy .btn {
    margin-top: 1.4rem;
}

.movement-panel {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-template-columns: none;
    gap: 0;
    min-height: 390px;
    overflow-x: auto;
    border: 1px solid rgba(51, 36, 27, 0.18);
    background: rgba(255, 255, 255, 0.34);
    box-shadow: 0 24px 60px rgba(51, 36, 27, 0.08);
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
}

.movement-panel::-webkit-scrollbar {
    display: none;
}

.movement-panel div {
    min-height: 390px;
    padding: clamp(1.6rem, 3vw, 2rem) clamp(1.8rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    scroll-snap-align: start;
}

.movement-panel span {
    margin-bottom: auto;
    color: var(--mocha);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.movement-panel h3 {
    margin: 0;
    font-family: inherit;
    color: var(--ink);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 850;
    line-height: 1.15;
}

.movement-panel p {
    max-width: 640px;
    margin: 0.85rem 0 0;
    color: rgba(36, 24, 17, 0.66);
    line-height: 1.65;
    font-size: clamp(1rem, 1.5vw, 1.16rem);
}

.about-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    margin-inline: 0;
    padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 3vw, 2rem);
    background: #f8f4ed;
    color: var(--ink);
    border-top: 1px solid rgba(51, 36, 27, 0.08);
    border-bottom: 1px solid rgba(51, 36, 27, 0.08);
}

.about-grain {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.42;
    background-image:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.74) 0 1px, transparent 1.3px),
        radial-gradient(circle at 78% 62%, rgba(51, 36, 27, 0.08) 0 1px, transparent 1.4px),
        linear-gradient(115deg, rgba(255, 255, 255, 0.44), rgba(229, 219, 206, 0.14));
    background-size: 9px 9px, 13px 13px, 100% 100%;
}

.about-story-hero,
.about-story-body,
.about-split,
.about-journey,
.founder-note,
.belief-grid,
.about-close {
    width: min(100%, 1040px);
    margin-inline: auto;
}

.about-story-hero {
    display: grid;
    justify-items: start;
    min-height: min(720px, 82vh);
    align-content: center;
    padding: clamp(2rem, 7vw, 5rem) 0 clamp(5rem, 9vw, 8rem);
    text-align: left;
}

.about-story-hero h1,
.about-story-hero h2,
.about-close h2 {
    max-width: 920px;
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(3rem, 8vw, 6.9rem);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: 0;
    text-transform: uppercase;
}

.about-story-hero h1 {
    text-transform: none;
}

.about-story-hero p {
    max-width: 560px;
    margin: 1.25rem 0 0;
    color: rgba(36, 24, 17, 0.68);
    font-size: clamp(1rem, 1.4vw, 1.16rem);
    line-height: 1.85;
}

.about-scroll-cue {
    position: relative;
    justify-self: start;
    margin-top: clamp(2.2rem, 5vw, 4rem);
    color: rgba(36, 24, 17, 0.72);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-decoration: none;
    text-transform: uppercase;
    animation: aboutFloat 2.4s ease-in-out infinite;
}

.about-scroll-cue::before {
    content: "→";
    margin-right: 0.55rem;
}

.about-scroll-cue::after {
    content: "↓";
    display: block;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    letter-spacing: 0;
}

.about-story-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 700ms ease, opacity 360ms ease;
}

.about-story-body:target,
.about-story-body.is-open {
    max-height: 14000px;
    overflow: visible;
    opacity: 1;
    visibility: visible;
}

.about-split {
    display: grid;
    grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(2rem, 8vw, 7rem);
    padding: clamp(4.5rem, 9vw, 8rem) 0;
    border-top: 1px solid rgba(51, 36, 27, 0.12);
}

.about-kicker {
    display: block;
    color: rgba(36, 24, 17, 0.52);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    line-height: 1.5;
    text-transform: uppercase;
}

.about-copy {
    display: grid;
    gap: clamp(1.35rem, 3vw, 2.2rem);
}

.about-copy p,
.about-journey p,
.founder-note p,
.belief-card p,
.about-close p {
    margin: 0;
    color: rgba(36, 24, 17, 0.68);
    font-size: clamp(1rem, 1.25vw, 1.14rem);
    line-height: 1.85;
}

.about-copy p {
    max-width: 650px;
    color: rgba(36, 24, 17, 0.74);
    font-size: clamp(1.14rem, 2vw, 1.55rem);
}

.about-journey {
    padding: clamp(4.5rem, 9vw, 8rem) 0;
    border-top: 1px solid rgba(51, 36, 27, 0.12);
}

.journey-line {
    position: relative;
    display: grid;
    gap: 0;
    margin: clamp(2rem, 4vw, 3.2rem) 0 1.5rem;
    padding-left: 2rem;
}

.journey-line::before {
    content: "";
    position: absolute;
    top: 0.65rem;
    bottom: 0.65rem;
    left: 0.35rem;
    width: 1px;
    background: rgba(51, 36, 27, 0.18);
    transform-origin: top;
    animation: aboutLine both linear;
    animation-timeline: view();
    animation-range: entry 10% cover 62%;
}

.journey-line span {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 4rem;
    color: rgba(36, 24, 17, 0.82);
    font-family: "Playfair Display", serif;
    font-size: clamp(1.55rem, 3vw, 2.65rem);
    line-height: 1;
}

.journey-line span::before {
    content: "";
    position: absolute;
    left: -1.85rem;
    width: 0.72rem;
    height: 0.72rem;
    border: 1px solid rgba(51, 36, 27, 0.28);
    border-radius: 999px;
    background: #f8f4ed;
}

.journey-line span + span::after {
    content: "↓";
    position: absolute;
    top: -0.35rem;
    left: -2.05rem;
    color: rgba(36, 24, 17, 0.32);
    font-family: Inter, sans-serif;
    font-size: 0.8rem;
}

.founder-note {
    display: grid;
    grid-template-columns: minmax(180px, 0.68fr) minmax(0, 1.32fr);
    gap: clamp(1.5rem, 5vw, 4.5rem);
    align-items: stretch;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(51, 36, 27, 0.11);
    border-radius: 8px;
    background: rgba(255, 252, 247, 0.74);
    box-shadow: 0 22px 70px rgba(44, 31, 23, 0.08);
}

.founder-note-image {
    min-height: 320px;
    border-radius: 7px;
    background:
        linear-gradient(rgba(248, 244, 237, 0.93), rgba(248, 244, 237, 0.93)),
        url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=900&q=75");
    background-size: cover;
    background-position: center;
}

.founder-note > div:last-child {
    display: grid;
    align-content: center;
    gap: 1rem;
    padding: clamp(1rem, 4vw, 2.5rem);
}

.founder-signature {
    margin-top: 0.75rem;
    color: rgba(36, 24, 17, 0.78);
    font-family: "Playfair Display", serif;
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-style: italic;
}

.belief-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    padding: clamp(4.5rem, 9vw, 8rem) 0;
}

.belief-card {
    min-height: 210px;
    display: grid;
    align-content: space-between;
    padding: clamp(1.1rem, 2.4vw, 2rem);
    border: 1px solid rgba(51, 36, 27, 0.1);
    background: rgba(255, 252, 247, 0.56);
    transition: transform 220ms ease, background 220ms ease;
}

.belief-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 252, 247, 0.86);
}

.belief-card span {
    color: rgba(36, 24, 17, 0.9);
    font-family: "Playfair Display", serif;
    font-size: clamp(1.55rem, 2.5vw, 2.35rem);
    line-height: 1;
    text-transform: uppercase;
}

.about-close {
    display: grid;
    justify-items: center;
    gap: 1.2rem;
    padding: clamp(4rem, 8vw, 7rem) 0 0;
    border-top: 1px solid rgba(51, 36, 27, 0.12);
    text-align: center;
}

.about-close h2 {
    max-width: 900px;
}

.about-close .btn {
    margin-top: 1rem;
}

.about-section {
    background:
        radial-gradient(circle at 18% 8%, rgba(101, 76, 58, 0.22), transparent 34%),
        linear-gradient(135deg, #201711 0%, #15100d 48%, #0f0c0a 100%);
    color: #f7f0e7;
    border-color: rgba(247, 240, 231, 0.08);
}

.about-section .about-grain {
    opacity: 0.2;
    background-image:
        radial-gradient(circle at 22% 18%, rgba(247, 240, 231, 0.18) 0 1px, transparent 1.3px),
        radial-gradient(circle at 78% 62%, rgba(183, 159, 138, 0.2) 0 1px, transparent 1.4px),
        linear-gradient(115deg, rgba(255, 255, 255, 0.03), rgba(101, 76, 58, 0.1));
}

.about-section .eyebrow,
.about-section .about-kicker,
.about-section .about-scroll-cue {
    color: rgba(207, 180, 153, 0.82);
}

.about-section h1,
.about-section h2,
.about-section .journey-line span,
.about-section .belief-card span,
.about-section .founder-signature {
    color: #fff8ef;
}

.about-section p,
.about-section .about-copy p,
.about-section .about-journey p,
.about-section .founder-note p,
.about-section .belief-card p,
.about-section .about-close p {
    color: rgba(247, 240, 231, 0.72);
}

.about-section .about-split,
.about-section .about-journey,
.about-section .about-close {
    border-top-color: rgba(247, 240, 231, 0.12);
}

.about-section .journey-line::before {
    background: rgba(247, 240, 231, 0.18);
}

.about-section .journey-line span::before {
    border-color: rgba(247, 240, 231, 0.3);
    background: #201711;
}

.about-section .journey-line span + span::after {
    color: rgba(247, 240, 231, 0.36);
}

.about-section .founder-note,
.about-section .belief-card {
    border-color: rgba(247, 240, 231, 0.12);
    background: rgba(247, 240, 231, 0.055);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
}

.about-section .founder-note-image {
    background:
        linear-gradient(rgba(32, 23, 17, 0.55), rgba(32, 23, 17, 0.74)),
        url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=900&q=75");
    background-size: cover;
    background-position: center;
}

.about-section .belief-card:hover {
    background: rgba(247, 240, 231, 0.095);
}

.about-section .btn.primary {
    background: #f7f0e7;
    color: #261a13;
}

.about-section {
    background: #f8f4ed;
    color: var(--ink);
    border-top-color: rgba(51, 36, 27, 0.08);
    border-bottom-color: rgba(51, 36, 27, 0.08);
}

.about-section .about-grain {
    opacity: 0.42;
    background-image:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.74) 0 1px, transparent 1.3px),
        radial-gradient(circle at 78% 62%, rgba(51, 36, 27, 0.08) 0 1px, transparent 1.4px),
        linear-gradient(115deg, rgba(255, 255, 255, 0.44), rgba(229, 219, 206, 0.14));
}

.about-section .eyebrow,
.about-section .about-kicker,
.about-section .about-scroll-cue {
    color: rgba(101, 76, 58, 0.82);
}

.about-section h1,
.about-section h2,
.about-section .journey-line span,
.about-section .belief-card span,
.about-section .founder-signature {
    color: var(--ink);
}

.about-section p,
.about-section .about-copy p,
.about-section .about-journey p,
.about-section .founder-note p,
.about-section .belief-card p,
.about-section .about-close p {
    color: rgba(36, 24, 17, 0.7);
}

.about-section .about-split,
.about-section .about-journey,
.about-section .about-close {
    border-top-color: rgba(51, 36, 27, 0.12);
}

.about-section .journey-line::before {
    background: rgba(51, 36, 27, 0.18);
}

.about-section .journey-line span::before {
    border-color: rgba(51, 36, 27, 0.28);
    background: #f8f4ed;
}

.about-section .journey-line span + span::after {
    color: rgba(36, 24, 17, 0.32);
}

.about-section .founder-note,
.about-section .belief-card {
    border-color: rgba(51, 36, 27, 0.11);
    background: rgba(255, 252, 247, 0.74);
    box-shadow: 0 22px 70px rgba(44, 31, 23, 0.08);
}

.about-section .founder-note-image {
    background:
        linear-gradient(rgba(248, 244, 237, 0.93), rgba(248, 244, 237, 0.93)),
        url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=900&q=75");
    background-size: cover;
    background-position: center;
}

.about-section .belief-card:hover {
    background: rgba(255, 252, 247, 0.86);
}

.about-section .btn.primary {
    background: var(--coffee);
    color: #fffaf3;
}

.about-section::before {
    content: "";
    position: absolute;
    inset: -14rem -10vw auto auto;
    width: min(46vw, 560px);
    aspect-ratio: 1;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(101, 76, 58, 0.18), transparent 68%);
    filter: blur(28px);
    animation: aboutFloat 11s ease-in-out infinite;
}

.about-section-heading {
    display: grid;
    gap: 1rem;
    max-width: 840px;
    margin-bottom: clamp(1.6rem, 4vw, 3rem);
}

.about-section-heading h2,
.about-editorial-copy h2,
.about-community-panel h2,
.about-forward-section h2,
.about-final-cta h2 {
    margin: 0;
    color: var(--ink);
    font-family: "Playfair Display", serif;
    font-size: clamp(2rem, 4.8vw, 4.8rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: 0;
}

.about-section-heading p,
.about-editorial-copy p,
.about-community-panel p,
.about-forward-text p {
    max-width: 72ch;
    margin: 0;
    color: rgba(36, 24, 17, 0.7);
    font-size: clamp(1rem, 1.25vw, 1.14rem);
    line-height: 1.85;
}

.about-editorial-panel,
.about-values-section,
.about-originals-section,
.about-community-panel,
.about-forward-section,
.about-final-cta {
    width: min(100%, 1040px);
    margin-inline: auto;
    border-top: 1px solid rgba(51, 36, 27, 0.12);
    padding: clamp(4.5rem, 9vw, 8rem) 0;
}

.about-editorial-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
    gap: clamp(2rem, 7vw, 5.8rem);
    align-items: center;
}

.about-editorial-copy {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

.about-editorial-figure {
    display: grid;
    gap: 0.8rem;
    margin: 0;
}

.about-editorial-figure div {
    min-height: clamp(360px, 46vw, 560px);
    background:
        linear-gradient(rgba(248, 244, 237, 0.18), rgba(36, 24, 17, 0.42)),
        url("../../assets/bbo-hero-builders.jpeg");
    background-size: cover;
    background-position: center;
    box-shadow: 0 22px 70px rgba(44, 31, 23, 0.1);
    transform: translateZ(0);
}

.about-editorial-figure figcaption {
    color: rgba(101, 76, 58, 0.72);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid rgba(51, 36, 27, 0.11);
    background: rgba(51, 36, 27, 0.11);
}

.about-value-card {
    min-height: 250px;
    display: grid;
    align-content: space-between;
    gap: 1.2rem;
    background: rgba(255, 252, 247, 0.74);
    padding: clamp(1rem, 2.3vw, 1.55rem);
    transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.about-value-card:hover {
    background: rgba(255, 252, 247, 0.9);
    transform: translateY(-3px);
    box-shadow: 0 24px 70px rgba(44, 31, 23, 0.08);
}

.about-value-card span,
.about-original-step span {
    color: rgba(101, 76, 58, 0.72);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.about-value-card h3 {
    max-width: 13rem;
    margin: 0;
    color: var(--ink);
    font-family: "Playfair Display", serif;
    font-size: clamp(1.45rem, 2.5vw, 2.45rem);
    font-weight: 500;
    line-height: 1.02;
}

.about-value-card p,
.about-original-step p {
    margin: 0;
    color: rgba(36, 24, 17, 0.68);
    line-height: 1.7;
}

.about-originals-timeline {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(51, 36, 27, 0.12);
}

.about-original-step {
    position: relative;
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: clamp(1rem, 4vw, 3rem);
    align-items: center;
    min-height: 96px;
    border-bottom: 1px solid rgba(51, 36, 27, 0.12);
}

.about-original-step::before {
    content: "";
    position: absolute;
    left: 5.5rem;
    top: 50%;
    width: 0.4rem;
    height: 0.4rem;
    border: 1px solid rgba(101, 76, 58, 0.56);
    background: #f8f4ed;
    transform: translate(-50%, -50%) rotate(45deg);
}

.about-original-step p {
    color: var(--ink);
    font-family: "Playfair Display", serif;
    font-size: clamp(1.45rem, 3vw, 2.8rem);
    line-height: 1;
}

.about-community-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) auto;
    gap: 2rem;
    align-items: center;
    padding-inline: clamp(1.2rem, 4vw, 3.5rem);
    border: 1px solid rgba(51, 36, 27, 0.12);
    background:
        linear-gradient(120deg, rgba(255, 252, 247, 0.78), rgba(235, 225, 213, 0.48)),
        url("../../assets/builder-wall-leaving-a-mark.jpeg");
    background-size: cover;
    background-position: center;
    box-shadow: 0 22px 70px rgba(44, 31, 23, 0.08);
}

.about-community-panel div {
    display: grid;
    gap: 1rem;
}

.about-forward-section {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
    gap: clamp(2rem, 8vw, 6rem);
}

.about-forward-text {
    display: grid;
    gap: 1.25rem;
}

.about-final-cta {
    min-height: clamp(420px, 56vw, 620px);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: clamp(1rem, 2.5vw, 1.8rem);
    width: 100%;
    max-width: none;
    padding-inline: max(1rem, calc((100vw - 1040px) / 2));
    text-align: center;
    border-top: 1px solid rgba(51, 36, 27, 0.12);
    background:
        linear-gradient(rgba(248, 244, 237, 0.82), rgba(248, 244, 237, 0.88)),
        url("../../assets/goslin-campaign-couple.png");
    background-size: cover;
    background-position: center;
}

.about-final-cta h2 {
    max-width: 860px;
    font-size: clamp(2.8rem, 7vw, 7rem);
}

.about-final-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}

.about-final-cta .btn.secondary,
.about-community-panel .btn.primary + .btn.secondary {
    border: 1px solid rgba(51, 36, 27, 0.24);
    background: rgba(255, 252, 247, 0.5);
    color: var(--ink);
}

.about-reveal {
    animation: aboutFade both ease-out;
    animation-timeline: view();
    animation-range: entry 8% cover 36%;
}

@keyframes aboutFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aboutLine {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

@keyframes aboutFloat {
    0%,
    100% {
        opacity: 0.56;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(8px);
    }
}

.journal-section {
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
}

.lookbook-page .section-heading {
    display: grid;
    justify-content: start;
    align-items: start;
    gap: 1rem;
    max-width: 900px;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.lookbook-page .section-heading .eyebrow {
    margin-bottom: 0;
}

.lookbook-page .section-heading h2 {
    max-width: 720px;
    font-size: clamp(3.2rem, 6vw, 6rem);
    line-height: 0.94;
}

.journal-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
}

.journal-grid::-webkit-scrollbar {
    display: none;
}

.journal-grid > * {
    scroll-snap-align: start;
}

.journal-grid a {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    padding: 1.25rem;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.journal-grid a:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(44, 31, 23, 0.1);
}

.journal-grid span {
    color: var(--mocha);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.journal-grid h3 {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.45rem, 2.3vw, 2rem);
    line-height: 1.08;
}

.drop-hero,
.drop-campaign-section,
.drop-shop-section,
.drop-details-section {
    padding-inline: clamp(1rem, 4vw, 5rem);
}

.drop-hero {
    min-height: clamp(520px, 56vw, 760px);
    display: grid;
    align-items: center;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(14, 11, 9, 0.78) 0%, rgba(14, 11, 9, 0.6) 38%, rgba(14, 11, 9, 0.22) 72%, rgba(14, 11, 9, 0.08) 100%),
        url("../../assets/lookbook-origin-story-hero.png?v=1") center / cover no-repeat;
    text-align: left;
}

.drop-hero-inner {
    width: min(1220px, 100%);
    margin-inline: auto;
    display: grid;
    justify-items: start;
    gap: clamp(1rem, 1.8vw, 1.45rem);
}

.drop-hero h1 {
    max-width: 720px;
    margin: 0;
    color: #fff8ef;
    font-family: "Playfair Display", serif;
    font-size: clamp(4.2rem, 7.4vw, 7.7rem);
    line-height: 0.9;
    text-transform: uppercase;
}

.drop-hero p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 248, 239, 0.82);
    font-size: clamp(1rem, 1.35vw, 1.28rem);
    line-height: 1.58;
}

.drop-hero .drop-subheading {
    color: #fff8ef;
    font-weight: 700;
}

.drop-hero .eyebrow {
    color: rgba(255, 248, 239, 0.82);
}

.drop-hero .btn {
    margin-top: clamp(0.7rem, 1.5vw, 1.1rem);
    min-height: 58px;
    padding-inline: 2rem;
    font-size: 0.88rem;
}

.drop-campaign-section {
    padding-top: clamp(4rem, 8vw, 8rem);
    padding-bottom: clamp(4rem, 8vw, 8rem);
    background: var(--cream);
}

.drop-section-heading {
    width: min(1220px, 100%);
    margin: 0 auto clamp(2rem, 5vw, 4rem);
}

.drop-section-heading.inline {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem;
}

.drop-section-heading h2 {
    max-width: 720px;
    margin: 0.45rem 0 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(3.4rem, 6vw, 6.4rem);
    line-height: 0.94;
    color: var(--ink);
}

.drop-section-heading a {
    color: var(--coffee);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.campaign-gallery {
    width: min(1220px, 100%);
    margin-inline: auto;
    display: grid;
    gap: clamp(1.25rem, 4vw, 4.5rem);
}

.campaign-frame {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin: 0;
    display: grid;
    align-items: end;
    overflow: hidden;
    border: 1px solid rgba(51, 36, 27, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(44, 31, 23, 0.08)),
        #e5dfd4;
}

.campaign-frame:nth-child(even) {
    margin-left: 0;
}

.campaign-frame.wide {
    width: 100%;
    min-height: 0;
}

.campaign-frame img {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: contain;
    object-position: center;
    filter: saturate(0.9) contrast(0.98);
}

.campaign-frame:not(.wide) img {
    object-fit: contain;
    padding: 0;
}

.campaign-frame figcaption {
    grid-area: 1 / 1;
    width: fit-content;
    margin: clamp(1rem, 3vw, 2rem);
    padding: 0.55rem 0.75rem;
    background: rgba(248, 244, 238, 0.9);
    color: var(--coffee);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.drop-shop-section {
    position: relative;
    padding-top: clamp(3.5rem, 7vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
    border-top: 1px solid var(--line);
    background: #f7f3ee;
}

.drop-product-row {
    width: min(1220px, 100%);
    margin-inline: auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3rem) / 4);
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    padding-bottom: 0;
    scrollbar-width: none;
}

.drop-product-row::-webkit-scrollbar {
    display: none;
}

.rail-controls:has(+ .drop-product-row) {
    width: min(1220px, calc(100% - 2rem));
    max-width: 1220px;
}

.rail-controls:has(+ .drop-product-row) .rail-arrow {
    color: rgba(36, 24, 17, 0.78);
}

.drop-product-card {
    scroll-snap-align: start;
    min-width: 0;
}

.drop-product-card a {
    display: grid;
    gap: 0.85rem;
    color: var(--ink);
    text-decoration: none;
}

.drop-product-image {
    aspect-ratio: 1 / 1.04;
}

.drop-product-info {
    display: grid;
    gap: 0.25rem;
}

.drop-product-info strong {
    font-size: clamp(0.96rem, 1.2vw, 1.08rem);
}

.drop-product-info small {
    color: rgba(36, 24, 17, 0.62);
    font-size: 0.9rem;
    line-height: 1.45;
}

.drop-product-info span {
    margin-top: 0.1rem;
    color: #b20f0f;
    font-weight: 900;
}

.drop-product-cta {
    width: fit-content;
    border-bottom: 1px solid currentColor;
    color: var(--coffee);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.drop-details-section {
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
    background: var(--cream);
}

.drop-detail-row {
    width: min(1220px, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.drop-detail-row figure {
    margin: 0;
    background: #f8f4ee;
}

.drop-detail-row img {
    width: 100%;
    aspect-ratio: 1 / 0.84;
    display: block;
    object-fit: cover;
}

.drop-detail-row figcaption {
    padding: 1rem;
    color: var(--coffee);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

@media (max-width: 820px) {
    .drop-hero {
        min-height: 520px;
        padding-top: clamp(4rem, 16vw, 6rem);
        padding-bottom: clamp(4rem, 16vw, 6rem);
    }

    .drop-hero h1 {
        font-size: clamp(4rem, 17vw, 6.4rem);
        line-height: 0.9;
    }

    .drop-section-heading.inline {
        align-items: start;
        flex-direction: column;
    }

    .campaign-gallery {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min(86vw, 420px);
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
    }

    .campaign-gallery::-webkit-scrollbar {
        display: none;
    }

    .campaign-frame,
    .campaign-frame.wide,
    .campaign-frame:nth-child(even) {
        width: auto;
        min-height: 0;
        aspect-ratio: 16 / 10;
        margin: 0;
        scroll-snap-align: start;
    }

    .campaign-frame img,
    .campaign-frame:not(.wide) img {
        object-fit: contain;
        padding: 0;
    }

    .drop-product-row {
        grid-auto-columns: min(78vw, 310px);
    }

    .drop-detail-row {
        grid-auto-flow: column;
        grid-auto-columns: min(72vw, 290px);
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: inline mandatory;
    }

    .drop-detail-row figure {
        scroll-snap-align: start;
    }
}

@media (max-width: 520px) {
    .drop-hero,
    .drop-campaign-section,
    .drop-shop-section,
    .drop-details-section {
        padding-inline: 1rem;
    }

    .drop-section-heading h2 {
        font-size: clamp(2.8rem, 16vw, 4.6rem);
    }

    .campaign-frame figcaption {
        margin: 0.8rem;
        font-size: 0.62rem;
    }
}

.footer {
    width: 100%;
    margin: 0;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem);
    border-top: 1px solid var(--line);
    background: var(--cream);
}

.footer-primary,
.footer-links {
    width: min(1220px, 100%);
    margin-inline: auto;
}

.footer-primary {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 420px) minmax(240px, 0.7fr);
    gap: clamp(1.25rem, 4vw, 3rem);
    align-items: start;
}

.footer-brand {
    display: grid;
    gap: 0.75rem;
}

.footer p,
.footer li {
    color: rgba(36, 24, 17, 0.64);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
    border-top: 1px solid rgba(51, 36, 27, 0.12);
}

.footer-column {
    display: grid;
    align-content: start;
    gap: 0.75rem;
}

    .footer-column h3 {
        margin: 0;
        color: var(--coffee);
        font-size: 0.76rem;
        font-weight: 900;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

.footer-column ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-column a {
    transition: color 180ms ease, opacity 180ms ease;
}

.footer-column a:hover {
    color: var(--ink);
    opacity: 0.82;
}

.footer-toggle {
    display: none;
}

.newsletter {
    display: grid;
    gap: 0.65rem;
}

.newsletter label {
    font-weight: 800;
}

.newsletter-note {
    max-width: 52ch;
    margin: 0.15rem 0 0;
    color: var(--muted);
    line-height: 1.42;
    font-size: 0.94rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.newsletter div {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
    background: var(--white);
}

.newsletter input {
    min-width: 0;
    flex: 1;
    border: 0;
    padding: 0 1rem;
    color: var(--ink);
    outline: 0;
}

.newsletter button {
    border: 0;
    background: var(--coffee);
    color: var(--white);
    padding: 0.85rem 1.2rem;
    font-weight: 800;
    cursor: pointer;
}

.subscriber-admin {
    display: none !important;
    gap: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    padding: 1rem;
}

.subscriber-admin .eyebrow {
    margin: 0;
    font-size: 0.62rem;
}

.subscriber-admin p {
    margin: 0;
}

.download-subscribers-btn {
    min-height: 42px;
    border: 0;
    border-radius: 0;
    background: var(--coffee);
    color: var(--white);
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 980px) {
    body {
        padding-top: 118px;
    }

    .navbar {
        grid-template-columns: auto 1fr auto;
        padding-inline: 0.75rem;
    }

    .menu-btn {
        display: inline-grid;
    }

    .logo {
        justify-self: center;
    }

    .nav-links {
        display: none;
    }

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

    .hero-media {
        min-height: 50vh;
        clip-path: none;
        order: -1;
    }

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

    .feature-card {
        min-height: 475px;
    }

    .movement-section,
    .content-section,
    .editorial-split,
    .footer-primary {
        grid-template-columns: 1fr;
    }

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

    .page-card-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .cta-stack {
        justify-content: start;
    }

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

    .checkout-form {
        grid-template-columns: 1fr;
    }

    .movement-panel,
    .journal-grid,
    .story-grid,
    .process-grid,
    .review-grid,
    .policy-grid,
    .community-section,
    .recent-grid {
        grid-template-columns: 1fr;
    }

    .movement-panel div {
        min-height: 330px;
    }
}

@media (max-width: 680px) {
    body {
        padding-top: 111px;
    }

    .announcement-bar {
        font-size: 0.68rem;
        letter-spacing: 0.08em;
    }

    .navbar {
        width: 100%;
        min-height: 66px;
        gap: 0.5rem;
        padding-inline: 0.55rem;
    }

    .site-header.is-scrolled .navbar {
        min-height: 62px;
    }

    .site-menu {
        height: calc(100vh - 111px);
    }

    .site-menu-panel a {
        min-height: 44px;
    }

    .logo {
        font-size: 1rem;
    }

    .logo img {
        width: clamp(132px, 38vw, 170px);
        max-height: 28px;
    }

    .icon-btn {
        width: 38px;
        height: 38px;
    }

    .nav-account {
        height: 38px;
        max-width: 38px;
        padding: 0;
        justify-content: center;
    }

    .nav-account span {
        display: none;
    }

    .menu-btn {
        width: 54px;
        height: 46px;
    }

    .menu-btn svg {
        width: 40px;
        height: 30px;
    }

    .hero {
        min-height: auto;
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
    }

    .hero-media {
        min-height: 420px;
        clip-path: none;
        background-size: cover;
        background-position: 46% 52%;
    }

    .hero-content {
        min-width: 0;
        justify-content: start;
        padding: clamp(2.2rem, 7vw, 3rem) clamp(1.15rem, 5vw, 1.5rem) clamp(3rem, 8vw, 3.8rem);
    }

    .hero-content .eyebrow {
        margin-bottom: 0.75rem;
        font-size: clamp(0.52rem, 1.9vw, 0.68rem);
        letter-spacing: 0.24em;
    }

    .hero-content h1 {
        max-width: 100%;
        font-size: clamp(2.35rem, 9.4vw, 4rem);
        line-height: 0.91;
    }

    .hero-content p {
        margin-top: 1rem;
        max-width: 100%;
        font-size: clamp(0.72rem, 2.8vw, 0.95rem);
        line-height: 1.55;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.55rem;
        margin-top: 1.15rem;
    }

    .btn {
        width: 100%;
        min-height: 44px;
        padding-inline: 0.7rem;
        font-size: clamp(0.72rem, 2.6vw, 0.84rem);
    }

    .marquee-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: hidden;
    }

    main > .marquee-strip {
        display: none;
    }

    .mobile-hero-ribbon {
        display: grid;
    }

    .marquee-strip span {
        min-width: 0;
        min-height: 34px;
        display: grid;
        place-items: center;
        padding: 0.24rem 0.16rem;
        border-bottom: 0;
        font-size: clamp(0.44rem, 1.65vw, 0.56rem);
        letter-spacing: 0.16em;
        line-height: 1.2;
        overflow-wrap: normal;
    }

    .marquee-strip span:not(:last-child)::after {
        top: 0;
        right: -0.5px;
        height: 100%;
        transform: skewX(-10deg);
    }

    .shop-section,
    .movement-section,
    .journal-section,
    .content-section {
        width: min(100% - 20px, 1220px);
    }

    .about-section {
        width: 100%;
        margin-inline: 0;
        padding-inline: 1rem;
    }

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

    .product-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: clamp(142px, 43vw, 190px);
        grid-template-columns: none;
        gap: 0.65rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        padding-bottom: 0.75rem;
        scrollbar-width: thin;
    }

    .product-card {
        scroll-snap-align: start;
    }

    .about-story-hero {
        min-height: 76vh;
        padding-top: 3.5rem;
    }

    .about-split,
    .founder-note,
    .belief-grid,
    .about-editorial-panel,
    .about-forward-section,
    .about-community-panel {
        grid-template-columns: 1fr;
    }

    .about-split {
        gap: 1.4rem;
    }

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

    .about-community-panel {
        align-items: start;
    }

    .founder-note-image {
        min-height: 180px;
    }

    .belief-grid {
        gap: 0.7rem;
    }

    .belief-card {
        min-height: 150px;
    }

    .product-card,
    .feature-card {
        min-height: 0;
        display: grid;
        grid-template-rows: auto 1fr;
        align-content: start;
        justify-content: stretch;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        cursor: default;
    }

    .product-image {
        position: relative;
        inset: auto;
        display: block;
        aspect-ratio: 1 / 1.18;
        border: 1px solid rgba(51, 36, 27, 0.08);
        border-radius: 0;
        background-color: #ddd8cc;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .product-image::after {
        display: block;
        font-size: 0.56rem;
    }

    .product-info {
        display: grid;
        gap: 0.45rem;
        padding: 0.72rem 0.05rem 0.4rem;
        color: var(--ink);
    }

    .product-info h3 {
        font-size: 0.78rem;
        line-height: 1.15;
    }

    .product-info p {
        margin-top: 0.2rem;
        font-size: 0.72rem;
        color: rgba(36, 24, 17, 0.58);
    }

    .product-info span {
        font-size: 0.82rem;
        color: #b20f0f;
    }

    .product-card .card-wishlist-btn {
        top: auto;
        left: auto;
        right: 0.55rem;
        bottom: calc(0.65rem + 74px);
        width: 28px;
        height: 28px;
        background: rgba(255, 255, 255, 0.92);
    }

    .card-wishlist-btn::before {
        font-size: 0.92rem;
    }

    .badge {
        top: 0.55rem;
        left: 0.55rem;
        padding: 0.35rem 0.5rem;
        font-size: 0.56rem;
        color: #b20f0f;
        background: transparent;
    }

    .journey-line span {
        min-height: 3.4rem;
    }

    .cart-drawer {
        padding: 1rem;
    }

    .cart-item {
        grid-template-columns: 82px 1fr;
    }

    .cart-item-image {
        min-height: 112px;
    }

    .quantity-row {
        align-items: start;
        flex-direction: column;
    }

    .product-card::before {
        display: none;
    }

    .checkout-modal {
        width: 100%;
        height: 100vh;
        max-height: none;
        border-radius: 0;
    }

    .product-page-main {
        width: min(100% - 20px, 1220px);
    }

    .product-page-content {
        max-height: none;
        overflow: visible;
        padding: 0;
    }

    .product-page-layout {
        grid-template-columns: 1fr;
    }

    .product-page-image {
        min-height: min(78vh, 520px);
    }

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

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

    .product-review-summary,
    .review-tools,
    .product-review-row {
        grid-template-columns: 1fr;
    }

    .review-tools {
        gap: 0.7rem;
    }

    .review-form-grid {
        grid-template-columns: 1fr;
    }

    .review-submit-form {
        padding: 1rem;
    }

    .review-submit-form button {
        width: 100%;
    }

    .reviews-main {
        padding-inline: 1rem;
    }

    .reviews-tabs {
        overflow-x: auto;
        white-space: nowrap;
    }

    .product-review-row footer {
        grid-column: 1;
        justify-self: start;
    }

    .product-media-strip {
        grid-auto-columns: minmax(104px, 38vw);
    }

    .product-gallery-arrow {
        width: 42px;
        height: 42px;
    }

    .media-type-label {
        left: 0.75rem;
        bottom: 0.75rem;
        font-size: 0.66rem;
    }

    .product-page-image .media-type-label {
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .movement-panel,
    .journal-grid,
    .story-grid,
    .process-grid,
    .review-grid,
    .policy-grid,
    .recent-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        grid-template-columns: none;
        overflow-x: auto;
        gap: 0;
        padding-bottom: 0;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
    }

    .movement-panel::-webkit-scrollbar,
    .journal-grid::-webkit-scrollbar,
    .story-grid::-webkit-scrollbar,
    .process-grid::-webkit-scrollbar,
    .review-grid::-webkit-scrollbar,
    .policy-grid::-webkit-scrollbar,
    .recent-grid::-webkit-scrollbar {
        display: none;
    }

    .movement-panel > *,
    .journal-grid > *,
    .story-grid > *,
    .process-grid > *,
    .review-grid > *,
    .policy-grid > *,
    .recent-grid > * {
        scroll-snap-align: start;
    }

    .movement-panel > * {
        min-height: 310px;
    }

    .rail-arrow {
        width: 42px;
        height: 42px;
    }

    .footer {
        padding-inline: 1.15rem;
    }

    .footer-links {
        display: grid;
        gap: 0;
        margin-top: 2rem;
        padding-top: 0;
        border-top: 1px solid rgba(51, 36, 27, 0.14);
        grid-template-columns: 1fr;
    }

    .footer-column {
        gap: 0;
        border-bottom: 1px solid rgba(51, 36, 27, 0.14);
    }

    .footer-column h3 {
        display: none;
    }

    .footer-toggle {
        width: 100%;
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        background: transparent;
        color: var(--coffee);
        padding: 0;
        font: inherit;
        font-size: 0.9rem;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-align: left;
        text-transform: uppercase;
    }

    .footer-toggle::after {
        content: "▸";
        font-size: 0.75rem;
        line-height: 1;
        transform: rotate(0deg);
        transition: transform 180ms ease;
    }

    .footer-column.is-open .footer-toggle::after {
        transform: rotate(90deg);
    }

    .footer-column ul {
        display: none;
        gap: 0.72rem;
        padding: 0 0 1.15rem;
    }

    .footer-column.is-open ul {
        display: grid;
    }

    .footer-column li,
    .footer-column a {
        font-size: 0.96rem;
    }

    .product-add-btn {
        position: sticky;
        bottom: 0;
        z-index: 2;
        box-shadow: 0 -10px 30px rgba(44, 31, 23, 0.12);
    }

    .story-card.tall {
        min-height: 330px;
    }

    .about-values-grid,
    .about-original-step {
        grid-template-columns: 1fr;
    }

    .about-value-card {
        min-height: 190px;
    }

    .about-original-step {
        gap: 0.45rem;
        padding: 1.2rem 0;
    }

    .about-original-step::before {
        display: none;
    }

    .about-editorial-figure div {
        min-height: 280px;
    }

    .about-community-panel {
        padding-inline: 1.1rem;
    }

    .about-final-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-section::before,
    .about-reveal,
    .reveal-on-scroll {
        animation: none !important;
        transition: none !important;
    }

    .reveal-on-scroll {
        opacity: 1;
        transform: none;
    }

    .about-value-card,
    .about-editorial-figure div {
        transition: none !important;
        transform: none !important;
    }
}
/* About page top alignment */
.about-section {
    padding-top: clamp(2rem, 4vw, 3.5rem);
    background: #f8f4ed;
}

.about-section .about-grain,
.about-section::before {
    display: none;
}

.about-story-hero {
    min-height: auto;
    align-content: start;
    padding: clamp(1rem, 2vw, 2rem) 0 clamp(3rem, 6vw, 5rem);
}
/* About story flow refinements */
.about-scroll-cue {
    display: none;
}

.about-story-hero {
    padding-bottom: clamp(1.75rem, 4vw, 3rem);
}

.about-story-hero p {
    max-width: 680px;
}

.about-split {
    grid-template-columns: minmax(160px, 0.45fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 4vw, 3rem);
    padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.25rem, 3vw, 2.25rem);
    border-top: 0;
}

.about-copy {
    display: block;
    max-width: 72ch;
}

.about-copy p {
    max-width: 72ch;
    font-size: clamp(1.02rem, 1.35vw, 1.2rem);
    line-height: 1.78;
}

.about-copy p + p {
    margin-top: 0.95rem;
}

.about-journey {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.25rem, 5vw, 4rem);
}

.journey-line {
    margin: clamp(1.15rem, 2.5vw, 2rem) 0 1rem;
}

.journey-line span {
    min-height: 3.1rem;
    font-size: clamp(1.35rem, 2.5vw, 2.2rem);
}

.founder-note {
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    background: rgba(255, 252, 247, 0.9);
}

.founder-note-image {
    min-height: 380px;
    background-image: url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1100&q=85");
    background-size: cover;
    background-position: center;
}

.founder-note > div:last-child {
    gap: 0.85rem;
    padding: clamp(1rem, 3vw, 2rem);
}

.founder-note p {
    max-width: 62ch;
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.75;
}

.founder-signature {
    margin-top: 0.65rem;
}
/* About founder note clarity */
.about-section .founder-note {
    background: rgba(255, 252, 247, 0.9);
}

.about-section .founder-note-image {
    min-height: 380px;
    background-image: url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1100&q=85");
    background-size: cover;
    background-position: center;
}
/* About core values connected five-card layout */
.about-values-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.about-value-card {
    min-height: 260px;
    grid-template-rows: auto 1fr auto;
    align-content: stretch;
    align-items: start;
    padding: clamp(1rem, 1.8vw, 1.35rem);
}

.about-value-card h3 {
    width: 100%;
    max-width: 10.5rem;
    min-height: 5.4rem;
    display: flex;
    align-items: flex-end;
    font-size: clamp(1.35rem, 2vw, 2.12rem);
    line-height: 1.04;
}

.about-value-card p {
    max-width: 12rem;
    font-size: clamp(0.95rem, 1.05vw, 1.02rem);
}

@media (max-width: 1100px) {
    .about-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .about-values-grid {
        grid-template-columns: 1fr;
    }

    .about-value-card h3 {
        min-height: auto;
    }
}
/* About originals and community split */
.about-originals-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.about-original-step {
    grid-template-columns: 5.6rem minmax(0, 1fr);
    gap: clamp(0.75rem, 2.5vw, 2rem);
    min-height: 74px;
}

.about-original-step::before {
    left: 4.35rem;
    width: 0.32rem;
    height: 0.32rem;
}

.about-original-step p {
    font-size: clamp(1.18rem, 2.15vw, 2rem);
    line-height: 1.08;
}

.about-community-panel {
    min-height: 520px;
    align-content: center;
}

.about-community-panel h2 {
    max-width: 900px;
    font-size: clamp(2.4rem, 5.6vw, 5.6rem);
}

.about-community-about {
    width: min(100%, 1040px);
    margin: clamp(1.25rem, 3vw, 2rem) auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: end;
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
    border-top: 1px solid rgba(51, 36, 27, 0.12);
}

.about-community-about div {
    display: grid;
    gap: 1rem;
}

.about-community-about h2 {
    max-width: 900px;
    margin: 0;
    color: var(--ink);
    font-family: "Playfair Display", serif;
    font-size: clamp(2rem, 4.6vw, 4.4rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: 0;
}

.about-community-about p {
    max-width: 72ch;
    margin: 0;
    color: rgba(36, 24, 17, 0.7);
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.85;
}

@media (max-width: 900px) {
    .about-community-about {
        grid-template-columns: 1fr;
        align-items: start;
    }
}
/* About spacing and closing alignment refinements */
.about-editorial-panel,
.about-values-section,
.about-originals-section,
.about-community-panel,
.about-forward-section,
.about-final-cta {
    padding-top: clamp(2.6rem, 5.5vw, 4.8rem);
    padding-bottom: clamp(2.6rem, 5.5vw, 4.8rem);
}

.about-brand-pillars {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.about-values-section {
    padding-top: clamp(2rem, 4vw, 3.5rem);
}

.about-community-panel {
    min-height: 430px;
}

.about-community-about {
    margin-top: 0;
    padding-top: clamp(1.6rem, 3.5vw, 3rem);
    padding-bottom: clamp(2rem, 4vw, 3.6rem);
}

.about-final-cta .about-kicker {
    display: none;
}

.about-close {
    justify-items: start;
    text-align: left;
    align-items: start;
    padding-top: clamp(2.8rem, 6vw, 5rem);
}

.about-close h2 {
    color: #241811;
    max-width: 840px;
}

.about-close p {
    color: rgba(36, 24, 17, 0.82);
}
/* About founders intro */
.about-founders-intro {
    width: min(100%, 1040px);
    margin: clamp(1.5rem, 4vw, 3rem) auto clamp(1rem, 2vw, 1.5rem);
    display: grid;
    gap: 0.9rem;
    border-top: 1px solid rgba(51, 36, 27, 0.12);
    padding-top: clamp(2rem, 4vw, 3rem);
}

.about-founders-intro h2 {
    max-width: 900px;
    margin: 0;
    color: #241811;
    font-family: "Playfair Display", serif;
    font-size: clamp(2.2rem, 4.8vw, 4.8rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: 0;
}

.about-founders-intro p {
    max-width: 68ch;
    margin: 0;
    color: rgba(36, 24, 17, 0.78);
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.75;
}
/* About why-we-started stacked alignment */
.about-split {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.9rem, 2vw, 1.25rem);
}

.about-split .about-kicker,
.about-split .about-copy {
    width: min(100%, 72ch);
}
/* About hero copy alignment */
.about-story-hero {
    gap: 0;
}

.about-story-hero p {
    width: min(100%, 64ch);
    max-width: 64ch;
    margin-top: 1rem;
    color: rgba(36, 24, 17, 0.78);
    font-size: clamp(1rem, 1.18vw, 1.12rem);
    line-height: 1.72;
}

.about-story-hero p + p {
    margin-top: 1.1rem;
}
/* About dark readable text pass */
.about-section .eyebrow,
.about-section .about-kicker {
    color: rgba(66, 45, 33, 0.9);
}

.about-section h1,
.about-section h2,
.about-section h3,
.about-section .journey-line span,
.about-section .belief-card span,
.about-section .founder-signature {
    color: #241811;
}

.about-section p,
.about-section .about-copy p,
.about-section .about-journey p,
.about-section .founder-note p,
.about-section .belief-card p,
.about-section .about-close p,
.about-section .about-section-heading p,
.about-section .about-editorial-copy p,
.about-section .about-community-panel p,
.about-section .about-community-about p,
.about-section .about-forward-text p {
    color: rgba(36, 24, 17, 0.84);
}

.about-forward-section h2,
.about-forward-section .about-kicker,
.about-forward-text p {
    color: #241811;
}
/* About force dark readable text */
.about-section,
.about-section * {
    color-scheme: light;
}

.about-section .eyebrow,
.about-section .about-kicker,
.about-section figcaption,
.about-section .about-value-card span,
.about-section .about-original-step span {
    color: rgba(66, 45, 33, 0.92) !important;
}

.about-section h1,
.about-section h2,
.about-section h3,
.about-section .journey-line span,
.about-section .belief-card span,
.about-section .founder-signature,
.about-section .about-original-step p {
    color: #241811 !important;
}

.about-section p,
.about-section .about-story-hero p,
.about-section .about-copy p,
.about-section .about-journey p,
.about-section .founder-note p,
.about-section .belief-card p,
.about-section .about-close p,
.about-section .about-section-heading p,
.about-section .about-editorial-copy p,
.about-section .about-value-card p,
.about-section .about-community-panel p,
.about-section .about-community-about p,
.about-section .about-forward-text p {
    color: rgba(36, 24, 17, 0.88) !important;
}

/* About final contrast lock */
.about-section h1,
.about-section h2,
.about-section h3,
.about-section .about-community-about h2,
.about-section .about-forward-section h2,
.about-section .about-close h2 {
    color: #241811 !important;
}

.about-section p,
.about-section .about-community-about p,
.about-section .about-forward-text p,
.about-section .about-section-heading p,
.about-section .about-editorial-copy p {
    color: #3a2a21 !important;
}

.about-section .eyebrow,
.about-section .about-kicker,
.about-section figcaption {
    color: #5a4031 !important;
}

/* About unified dark ink override */
.about-section .about-forward-section,
.about-section .about-forward-section *,
.about-section .about-final-cta,
.about-section .about-final-cta *,
.about-section .about-close,
.about-section .about-close *,
.about-section [data-about-addons],
.about-section [data-about-addons] * {
    color: #241811 !important;
    opacity: 1 !important;
}

.about-section .about-forward-section p,
.about-section .about-forward-text p,
.about-section .about-final-cta p,
.about-section .about-close p,
.about-section [data-about-addons] p {
    color: #241811 !important;
}

.about-section .about-kicker,
.about-section .eyebrow,
.about-section [data-about-addons] .about-kicker {
    color: #5a4031 !important;
}

.about-section .btn.primary,
.about-section .about-close .btn.primary,
.about-section .about-final-cta .btn.primary {
    color: #fffaf3 !important;
    background: #3a251b !important;
}

.about-section .btn.secondary,
.about-section .about-final-cta .btn.secondary {
    color: #241811 !important;
}

/* Home view all product grid */
.shop-section.is-showing-all .product-grid {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
}

.shop-section.is-showing-all .product-card {
    scroll-snap-align: unset;
    animation: productReveal 420ms ease both;
}

.shop-section.is-showing-all .rail-controls {
    display: none;
}

.shop-section.is-showing-all [data-view-all-products] {
    opacity: 1;
}

@keyframes productReveal {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 980px) {
    .shop-section.is-showing-all .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .shop-section.is-showing-all .product-grid {
        grid-template-columns: 1fr;
    }
}
.swatch-pants {
    background: #2f2018;
}

.swatch-shorts {
    background: #b7aea0;
}

.swatch-tote {
    background: #d5c8b2;
}
/* About mindset rows */
.about-original-step div {
    display: grid;
    gap: 0.55rem;
}

.about-original-step h3 {
    margin: 0;
    color: #241811;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.25rem, 2.35vw, 2.35rem);
    font-weight: 600;
    line-height: 1.06;
}

.about-section .about-original-step p {
    max-width: 680px;
    color: rgba(36, 24, 17, 0.82) !important;
    font-family: inherit;
    font-size: clamp(0.98rem, 1.25vw, 1.16rem);
    font-weight: 500;
    line-height: 1.55;
}
/* About mindset row alignment */
.about-originals-timeline .about-original-step {
    grid-template-columns: 3rem 2rem minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: center;
    min-height: 128px;
    padding: 1.15rem 0;
}

.about-originals-timeline .about-original-step > span {
    align-self: center;
    color: rgba(66, 45, 33, 0.92) !important;
}

.about-originals-timeline .about-original-step::before {
    position: static;
    grid-column: 2;
    align-self: center;
    justify-self: center;
    transform: rotate(45deg);
}

.about-originals-timeline .about-original-step > div {
    grid-column: 3;
    display: grid;
    gap: 0.45rem;
    align-self: center;
    max-width: 920px;
}

.about-originals-timeline .about-original-step h3 {
    margin: 0;
    color: #241811;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.65rem, 2.65vw, 2.45rem);
    font-weight: 600;
    line-height: 1.02;
}

.about-section .about-originals-timeline .about-original-step p {
    max-width: 900px;
    margin: 0;
    color: rgba(36, 24, 17, 0.86) !important;
    font-family: inherit;
    font-size: clamp(1rem, 1.2vw, 1.14rem);
    font-weight: 500;
    line-height: 1.48;
}

@media (max-width: 760px) {
    .about-originals-timeline .about-original-step {
        grid-template-columns: 3rem minmax(0, 1fr);
        min-height: auto;
        gap: 0.85rem;
        padding: 1.25rem 0;
    }

    .about-originals-timeline .about-original-step::before {
        display: none;
    }

    .about-originals-timeline .about-original-step > div {
        grid-column: 2;
    }
}
/* Behind the Brand hero alignment */
.behind-brand-hero {
    width: min(1280px, calc(100% - 32px));
    text-align: left;
}

.behind-brand-hero h1 {
    max-width: 760px;
    margin-inline: 0;
    text-align: left;
}

.behind-brand-hero p {
    max-width: 700px;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}
/* Lookbook campaign captions above images */
.campaign-frame {
    aspect-ratio: auto;
    align-items: stretch;
    overflow: visible;
    border: 0;
    background: transparent;
}

.campaign-frame img {
    grid-area: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(51, 36, 27, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(44, 31, 23, 0.08)),
        #e5dfd4;
}

.campaign-frame figcaption {
    grid-area: auto;
    order: -1;
    width: fit-content;
    margin: 0 0 0.75rem;
    padding: 0;
    background: transparent;
    color: var(--coffee);
}

@media (max-width: 820px) {
    .campaign-frame,
    .campaign-frame.wide,
    .campaign-frame:nth-child(even) {
        aspect-ratio: auto;
    }

    .campaign-frame img,
    .campaign-frame:not(.wide) img {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 520px) {
    .campaign-frame figcaption {
        margin: 0 0 0.65rem;
        font-size: 0.62rem;
    }
}
/* Lookbook campaign viewport fit */
.campaign-frame img {
    height: min(64vw, calc(100vh - 9.5rem));
    min-height: 420px;
    object-fit: contain;
}

@media (max-width: 820px) {
    .campaign-frame img,
    .campaign-frame:not(.wide) img {
        height: min(76vw, calc(100vh - 8rem));
        min-height: 300px;
    }
}

@media (max-width: 520px) {
    .campaign-frame img,
    .campaign-frame:not(.wide) img {
        height: min(92vw, calc(100vh - 7rem));
        min-height: 260px;
    }
}
/* Home split dedicated backgrounds */
.home-split-cta .home-build-inner {
    background: #120e0c;
}

.home-split-panel-built {
    background:
        linear-gradient(90deg, rgba(9, 7, 6, 0.72), rgba(9, 7, 6, 0.44)),
        url("../../assets/home-built-originals-split.jpeg") center 50% / cover no-repeat;
}

.home-split-panel-community {
    background:
        linear-gradient(270deg, rgba(9, 7, 6, 0.72), rgba(9, 7, 6, 0.44)),
        url("../../assets/home-community-split.jpeg") center 46% / cover no-repeat;
}

@media (max-width: 720px) {
    .home-split-panel-built {
        background:
            linear-gradient(180deg, rgba(9, 7, 6, 0.72), rgba(9, 7, 6, 0.5)),
            url("../../assets/home-built-originals-split.jpeg") center / cover no-repeat;
    }

    .home-split-panel-community {
        background:
            linear-gradient(180deg, rgba(9, 7, 6, 0.72), rgba(9, 7, 6, 0.5)),
            url("../../assets/home-community-split.jpeg") center / cover no-repeat;
    }
}
/* About community image panel */
.about-section .about-community-about {
    width: min(100%, 1180px);
    min-height: clamp(500px, 48vw, 680px);
    margin: clamp(2rem, 5vw, 4rem) auto 0;
    padding: clamp(3rem, 7vw, 5.5rem);
    align-items: center;
    border: 1px solid rgba(247, 240, 231, 0.14);
    background:
        linear-gradient(90deg, rgba(9, 7, 6, 0.78), rgba(9, 7, 6, 0.5) 52%, rgba(9, 7, 6, 0.24)),
        url("../../assets/about-community-night.jpeg") center 45% / cover no-repeat;
    box-shadow: 0 24px 80px rgba(57, 38, 29, 0.16);
    overflow: hidden;
}

.about-section .about-community-about .about-kicker,
.about-section .about-community-about h2,
.about-section .about-community-about p {
    color: #f7f0e7 !important;
}

.about-section .about-community-about p {
    max-width: 66ch;
    color: rgba(247, 240, 231, 0.78) !important;
}

.about-section .about-community-about .btn.secondary {
    border-color: rgba(247, 240, 231, 0.45);
    background: rgba(247, 240, 231, 0.96);
    color: #241811;
}

.about-section .about-community-about .btn.secondary:hover {
    background: #ffffff;
}

@media (max-width: 900px) {
    .about-section .about-community-about {
        min-height: auto;
        padding: clamp(2.4rem, 8vw, 4rem) 1.25rem;
        background:
            linear-gradient(180deg, rgba(9, 7, 6, 0.8), rgba(9, 7, 6, 0.52)),
            url("../../assets/about-community-night.jpeg") center / cover no-repeat;
    }
}
/* Slightly smaller image-section headings */
.home-split-panel h2 {
    font-size: clamp(1.9rem, 3.25vw, 3.25rem);
    line-height: 1.03;
}

.promo-tile h2,
.vault-tile h2,
.split-promo h2,
.promo-card h2 {
    font-size: clamp(1.55rem, 2.35vw, 2.3rem);
    line-height: 1.08;
}

@media (max-width: 720px) {
    .home-split-panel h2 {
        font-size: clamp(1.85rem, 8.5vw, 2.85rem);
    }
}
/* About Built By Originals panel clarity */
.about-section .about-community-panel {
    background:
        linear-gradient(90deg, rgba(8, 6, 5, 0.8) 0%, rgba(8, 6, 5, 0.56) 42%, rgba(8, 6, 5, 0.28) 100%),
        radial-gradient(circle at 18% 52%, rgba(92, 25, 22, 0.18), transparent 42%),
        url("../../assets/home-built-originals-split.jpeg") center 50% / cover no-repeat !important;
    color: #f8f2eb !important;
    border: 1px solid rgba(248, 242, 235, 0.08) !important;
    box-shadow: none !important;
}

.about-section .about-community-panel .about-kicker,
.about-section .about-community-panel h2,
.about-section .about-community-panel p {
    color: #f8f2eb !important;
    text-shadow: 0 14px 42px rgba(0, 0, 0, 0.42);
}

.about-section .about-community-panel p {
    color: rgba(248, 242, 235, 0.82) !important;
}

.about-section .about-community-panel .btn.primary {
    background: #f8f2eb !important;
    border-color: #f8f2eb !important;
    color: #241811 !important;
}

.about-section .about-community-panel .btn.primary:hover {
    background: transparent !important;
    color: #f8f2eb !important;
    border-color: rgba(248, 242, 235, 0.72) !important;
}

@media (max-width: 760px) {
    .about-section .about-community-panel {
        background:
            linear-gradient(180deg, rgba(8, 6, 5, 0.76), rgba(8, 6, 5, 0.6)),
            url("../../assets/home-built-originals-split.jpeg") center / cover no-repeat !important;
    }
}
/* About brand editorial image */
.about-editorial-figure div {
    background:
        linear-gradient(rgba(248, 244, 237, 0.08), rgba(36, 24, 17, 0.24)),
        url("../../assets/about-brand-lounge.jpeg") center / cover no-repeat;
}
/* Mobile split panels: keep imagery visible */
@media (max-width: 720px) {
    .home-split-panel {
        min-height: 430px;
        justify-content: flex-end;
        padding: 1.8rem 1.55rem;
    }

    .home-split-panel h2 {
        max-width: 360px;
        font-size: clamp(1.7rem, 7.4vw, 2.35rem) !important;
        line-height: 1.04;
        letter-spacing: 0;
        margin-bottom: 1rem;
    }

    .home-split-panel .eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.28em;
        margin-bottom: 1rem;
    }

    .home-split-panel .home-build-note {
        max-width: 340px;
        font-size: 0.82rem;
        line-height: 1.42;
        margin-bottom: 1.35rem;
    }

    .home-split-panel .home-build-btn {
        min-height: 48px;
        font-size: 0.78rem;
        padding: 0 1rem;
    }

    .home-split-panel-built {
        background:
            linear-gradient(180deg, rgba(8, 6, 5, 0.18), rgba(8, 6, 5, 0.72)),
            url("../../assets/home-built-originals-split.jpeg") center 50% / cover no-repeat !important;
    }

    .home-split-panel-community {
        background:
            linear-gradient(180deg, rgba(8, 6, 5, 0.18), rgba(8, 6, 5, 0.74)),
            url("../../assets/home-community-split.jpeg") center 45% / cover no-repeat !important;
    }
}
/* Cart drawer close control visibility */
.cart-overlay {
    z-index: 90;
}

.cart-drawer {
    z-index: 100;
}

.cart-close {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(51, 36, 27, 0.18);
    background: rgba(250, 248, 244, 0.92);
    color: #241811;
}

.cart-close::before {
    content: "×";
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.cart-close:hover,
.cart-close:focus-visible {
    background: #241811;
    color: #fffaf3;
    transform: none;
}

@media (max-width: 720px) {
    .cart-drawer {
        width: 100%;
        padding-top: 1rem;
    }

    .cart-header {
        align-items: center;
    }
}
/* Keep saved wishlist hearts visible on mobile */
.card-wishlist-btn.saved {
    background: #fffaf3;
    color: #241811;
    border-color: #241811;
    box-shadow: 0 3px 12px rgba(36, 24, 17, 0.16);
}

.card-wishlist-btn.saved::before {
    content: "♥";
    color: #241811;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 720px) {
    .product-card .card-wishlist-btn.saved {
        background: #fffaf3;
        border-color: #241811;
        color: #241811;
    }

    .card-wishlist-btn.saved::before {
        font-size: 1rem;
    }
}
/* Mobile view-all products use two columns */
@media (max-width: 640px) {
    .shop-section.is-showing-all .product-grid {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: unset;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem;
        overflow: visible;
        scroll-snap-type: none;
        scrollbar-width: none;
    }

    .shop-section.is-showing-all .product-card {
        min-width: 0;
    }

    .shop-section.is-showing-all .product-image {
        aspect-ratio: 1 / 1.12;
        min-height: 0;
    }

    .shop-section.is-showing-all .product-info {
        padding: 0.62rem 0 0;
        gap: 0.35rem;
        align-items: start;
    }

    .shop-section.is-showing-all .product-info h3 {
        font-size: 0.82rem;
        line-height: 1.15;
    }

    .shop-section.is-showing-all .product-info p,
    .shop-section.is-showing-all .product-swatches small {
        font-size: 0.72rem;
    }

    .shop-section.is-showing-all .product-info span {
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .shop-section.is-showing-all .product-card .card-wishlist-btn {
        right: 0.45rem;
        bottom: calc(0.55rem + 66px);
    }
}

/* Mobile rails use swipe gestures */
@media (max-width: 720px) {
    .rail-controls .rail-arrow {
        display: none !important;
    }
}

/* Mobile movement copy scale */
@media (max-width: 720px) {
    .movement-section .movement-copy h2 {
        font-size: clamp(2rem, 10vw, 2.8rem) !important;
        line-height: 0.98;
        letter-spacing: 0;
        margin-bottom: 1rem;
    }

    .movement-section .movement-copy p {
        max-width: 36rem;
        font-size: 0.96rem;
        line-height: 1.55;
    }

    .movement-section .eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.28em;
    }
}

/* Mobile movement swipe cards */
@media (max-width: 720px) {
    .rail-controls:has(+ .movement-panel) {
        display: none !important;
    }

    .movement-panel {
        min-height: 275px !important;
        touch-action: pan-x;
    }

    .movement-panel div,
    .movement-panel > * {
        min-height: 275px !important;
        padding: 1.25rem 1.35rem !important;
    }

    .movement-panel span {
        font-size: 0.74rem;
    }

    .movement-panel h3 {
        font-size: 1.02rem !important;
        line-height: 1.12;
    }

    .movement-panel p {
        margin-top: 0.55rem;
        font-size: 0.9rem !important;
        line-height: 1.5;
    }
}

/* Mobile home split text breathing */
@media (max-width: 720px) {
    .home-split-panel {
        min-height: 460px;
        padding: 1.45rem 1.25rem;
    }

    .home-split-panel h2 {
        max-width: 330px;
        font-size: clamp(1.55rem, 6.6vw, 2.05rem) !important;
        line-height: 1.02;
        margin-bottom: 0.85rem;
    }

    .home-split-panel .home-build-note {
        max-width: 318px;
        font-size: 0.76rem;
        line-height: 1.42;
        margin-bottom: 1.15rem;
    }

    .home-split-panel .eyebrow {
        font-size: 0.62rem;
        margin-bottom: 0.82rem;
    }

    .home-split-panel .home-build-btn {
        min-height: 42px;
        font-size: 0.72rem;
    }
}

/* Final mobile tightening for about page and home split panels */
@media (max-width: 720px) {
    .founder-note,
    .about-section .founder-note {
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
        padding: 0.95rem !important;
        width: 100% !important;
        overflow: hidden;
    }

    .founder-note-image,
    .about-section .founder-note-image {
        width: 100% !important;
        min-height: 180px !important;
        aspect-ratio: 16 / 10;
        order: 0;
        border-radius: 6px;
    }

    .founder-note > div:last-child,
    .about-section .founder-note > div:last-child {
        order: 1;
        gap: 0.52rem !important;
        padding: 0 !important;
    }

    .founder-note p,
    .about-section .founder-note p {
        max-width: 100% !important;
        font-size: 0.78rem !important;
        line-height: 1.42 !important;
    }

    .founder-note .about-kicker {
        font-size: 0.56rem !important;
        letter-spacing: 0.2em !important;
    }

    .founder-signature {
        font-size: 1.45rem !important;
        margin-top: 0.1rem;
    }

    .about-brand-pillars {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        margin-top: 1rem;
        margin-bottom: 1.25rem;
    }

    .about-brand-pillars > * {
        min-height: 116px !important;
        padding: 1rem !important;
    }

    .about-brand-pillars h3,
    .about-brand-pillars strong {
        font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
        line-height: 0.96 !important;
    }

    .about-brand-pillars p,
    .about-brand-pillars span {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
    }

    .about-values-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .about-value-card {
        min-height: 132px !important;
        padding: 1.05rem 1.15rem !important;
        align-content: start !important;
        gap: 0.75rem !important;
    }

    .about-value-card span {
        font-size: 0.58rem !important;
        margin-bottom: 0.2rem;
    }

    .about-value-card h3 {
        max-width: 100% !important;
        min-height: 0 !important;
        font-size: clamp(1.35rem, 6.2vw, 1.85rem) !important;
        line-height: 0.98 !important;
    }

    .about-value-card p {
        max-width: 100% !important;
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }

    .about-originals-timeline .about-original-step {
        grid-template-columns: 2.25rem minmax(0, 1fr) !important;
        gap: 0.65rem !important;
        padding: 0.85rem 0 !important;
    }

    .about-originals-timeline .about-original-step > span {
        font-size: 0.68rem !important;
        align-self: start;
        padding-top: 0.22rem;
    }

    .about-originals-timeline .about-original-step > div {
        grid-column: 2 !important;
        gap: 0.3rem !important;
    }

    .about-originals-timeline .about-original-step h3 {
        font-size: clamp(1.25rem, 6.2vw, 1.75rem) !important;
        line-height: 1 !important;
    }

    .about-section .about-originals-timeline .about-original-step p {
        font-size: 0.76rem !important;
        line-height: 1.35 !important;
    }

    .home-split-panel {
        min-height: 390px !important;
        padding: 1rem 1rem 1.2rem !important;
        justify-content: flex-end !important;
    }

    .home-split-panel h2 {
        max-width: 295px !important;
        font-size: clamp(1.28rem, 5.7vw, 1.72rem) !important;
        line-height: 1.02 !important;
        margin-bottom: 0.65rem !important;
    }

    .home-split-panel .home-build-note {
        max-width: 295px !important;
        font-size: 0.66rem !important;
        line-height: 1.34 !important;
        margin-bottom: 0.75rem !important;
    }

    .home-split-panel .eyebrow {
        font-size: 0.54rem !important;
        letter-spacing: 0.24em !important;
        margin-bottom: 0.55rem !important;
    }

    .home-split-panel .home-build-btn {
        width: auto !important;
        min-height: 36px !important;
        padding: 0.65rem 0.85rem !important;
        font-size: 0.64rem !important;
    }

    .home-split-panel-built {
        background:
            linear-gradient(180deg, rgba(8, 6, 5, 0.08), rgba(8, 6, 5, 0.62)),
            url("../../assets/home-built-originals-split.jpeg") center 50% / cover no-repeat !important;
    }

    .home-split-panel-community {
        background:
            linear-gradient(180deg, rgba(8, 6, 5, 0.08), rgba(8, 6, 5, 0.62)),
            url("../../assets/home-community-split.jpeg") center 44% / cover no-repeat !important;
    }
}

/* Mobile origin story copy scale */
@media (max-width: 720px) {
    .content-section.community-section h2 {
        font-size: clamp(2rem, 10vw, 2.8rem) !important;
        line-height: 0.98;
        letter-spacing: 0;
        margin-bottom: 1rem;
    }

    .content-section.community-section p {
        max-width: 36rem;
        font-size: 0.96rem;
        line-height: 1.55;
    }

    .content-section.community-section .eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.28em;
    }

    .content-section.community-section .cta-stack {
        margin-top: 1rem;
    }
}

/* Product page mobile polish */
@media (max-width: 720px) {
    .announcement-bar { padding: 0.42rem 0.75rem; font-size: 0.55rem; line-height: 1.2; letter-spacing: 0.11em; }
    .product-page-image { min-height: min(70vh, 500px); cursor: zoom-in; touch-action: pan-y pinch-zoom; }
    .product-page-image .product-gallery-arrow, .product-gallery-arrow { display: none !important; }
    .product-media-strip { grid-auto-flow: row; grid-auto-columns: initial; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 0.5rem; }
    .product-media-thumb { min-height: 92px; aspect-ratio: 1 / 1; }
    .style-with-grid { grid-auto-flow: row; grid-auto-columns: initial; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; overflow: visible; border-left: 0; }
    .style-with-card { min-width: 0; }
    .style-with-card .product-image { aspect-ratio: 1 / 1.08; }
    .style-with-card .product-info { padding: 0.68rem 0 0.2rem; }
    .style-with-card .product-info h4 { font-size: 0.78rem; line-height: 1.15; }
    .style-with-card .product-info p, .style-with-card .product-info span { font-size: 0.76rem; }
    .product-review-summary { gap: 1rem; }
    .review-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
    .review-tools { grid-template-columns: 1fr; }
    .product-reviews, .product-review-row { grid-template-columns: 1fr !important; }
    .product-review-row { gap: 0.85rem; padding: 1.15rem 0; }
    .product-review-row div p { margin-bottom: 0.9rem; font-size: 0.96rem; line-height: 1.45; }
    .product-review-row footer { grid-column: 1 !important; justify-self: start; flex-wrap: wrap; gap: 0.32rem 0.55rem; font-size: 0.72rem; }
    .review-submit-form { gap: 0.75rem; margin: 1rem 0; padding: 0.85rem; }
    .review-submit-form h2, .review-submit-form h3 { font-size: clamp(1.35rem, 7vw, 1.85rem); line-height: 1.02; }
    .review-submit-form p, .review-submit-form label, .review-save-field { font-size: 0.82rem; line-height: 1.4; }
    .review-submit-form textarea { min-height: 112px; }
    .star-rating label { font-size: 1.36rem; }
}

/* Keep product thumbnails compact under the main image on mobile */
@media (max-width: 720px) {
    .product-media-strip {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: clamp(62px, 18vw, 82px);
        grid-template-columns: none;
        gap: 0.45rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: inline mandatory;
        padding-bottom: 0.2rem;
        scrollbar-width: none;
    }

    .product-media-strip::-webkit-scrollbar {
        display: none;
    }

    .product-media-thumb {
        min-height: 62px;
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        scroll-snap-align: start;
    }
}

/* Final mobile header and product-toggle polish */
@media (max-width: 640px) {
    .navbar .logo img {
        width: clamp(158px, 43vw, 190px);
        max-height: 32px;
    }

    .navbar .menu-btn {
        width: 42px;
        height: 40px;
    }

    .navbar .menu-btn svg {
        width: 28px;
        height: 22px;
    }

    .navbar .menu-btn svg path {
        stroke-width: 3;
    }

    .shop-section.is-showing-all [data-view-all-products] {
        pointer-events: auto;
        opacity: 1;
    }
}

/* Lookbook mobile polish */
@media (max-width: 720px) {
    .lookbook-page .drop-hero {
        min-height: 480px;
        padding: 4.25rem 1.15rem 2rem;
        align-items: end;
    }

    .lookbook-page .drop-hero-inner {
        gap: 0.72rem;
    }

    .lookbook-page .drop-hero h1 {
        max-width: 9ch;
        font-size: clamp(2.65rem, 13vw, 3.9rem);
        line-height: 0.92;
    }

    .lookbook-page .drop-hero p {
        max-width: 34ch;
        font-size: 0.88rem;
        line-height: 1.42;
    }

    .lookbook-page .drop-hero .drop-subheading {
        font-size: 0.9rem;
    }

    .lookbook-page .drop-hero .btn {
        width: 100%;
        min-height: 46px;
        margin-top: 0.4rem;
        font-size: 0.78rem;
    }

    .lookbook-page .drop-campaign-section,
    .lookbook-page .drop-shop-section,
    .lookbook-page .drop-details-section {
        padding: 2.65rem 1rem;
    }

    .lookbook-page .drop-section-heading {
        margin-bottom: 1.35rem;
    }

    .lookbook-page .drop-section-heading.inline {
        gap: 0.55rem;
    }

    .lookbook-page .drop-section-heading h2 {
        max-width: 9ch;
        font-size: clamp(2.05rem, 10vw, 2.85rem);
        line-height: 0.96;
    }

    .lookbook-page .drop-section-heading a {
        font-size: 0.84rem;
    }

    .lookbook-page .campaign-gallery {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: initial;
        grid-template-columns: 1fr;
        gap: 1rem;
        overflow: visible;
    }

    .lookbook-page .campaign-frame,
    .lookbook-page .campaign-frame.wide,
    .lookbook-page .campaign-frame:nth-child(even) {
        width: 100%;
        aspect-ratio: auto;
        scroll-snap-align: none;
    }

    .lookbook-page .campaign-frame img,
    .lookbook-page .campaign-frame:not(.wide) img {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    .lookbook-page .drop-product-row {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: initial;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 0.8rem;
        overflow: visible;
    }

    .lookbook-page .drop-product-card a {
        gap: 0.48rem;
    }

    .lookbook-page .drop-product-image {
        aspect-ratio: 1 / 1;
    }

    .lookbook-page .drop-product-info {
        gap: 0.14rem;
    }

    .lookbook-page .drop-product-info strong {
        font-size: 0.82rem;
        line-height: 1.15;
    }

    .lookbook-page .drop-product-info small {
        font-size: 0.74rem;
        line-height: 1.25;
    }

    .lookbook-page .drop-product-info span {
        font-size: 0.86rem;
    }

    .lookbook-page .drop-product-cta {
        display: none;
    }

    .lookbook-page .drop-detail-row {
        grid-auto-flow: row;
        grid-auto-columns: initial;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }

    .lookbook-page .drop-detail-row img {
        aspect-ratio: 1 / 1;
    }

    .lookbook-page .drop-detail-row figcaption {
        padding: 0.55rem;
        font-size: 0.6rem;
        letter-spacing: 0.12em;
    }
}

/* Returns page mobile tightening */
@media (max-width: 720px) {
    .returns-page .page-hero {
        width: calc(100% - 2rem);
        padding: 3.35rem 0 2.15rem;
        text-align: left;
    }

    .returns-page .page-hero h1 {
        max-width: 8.5ch;
        margin: 0.7rem 0 0;
        font-size: clamp(2.45rem, 12vw, 3.35rem);
        line-height: 0.92;
        text-align: left;
    }

    .returns-page .page-hero p {
        max-width: 31ch;
        margin: 1rem 0 0;
        font-size: 0.92rem;
        line-height: 1.5;
        text-align: left;
    }

    .returns-page .editorial-section {
        width: calc(100% - 2rem);
        padding: 1.25rem 0;
    }

    .returns-page .policy-detail,
    .returns-page .page-card-grid article {
        min-height: 0;
        padding: 1.15rem;
        gap: 0.8rem;
    }

    .returns-page .page-card-grid {
        gap: 0.55rem;
    }

    .returns-page .policy-detail h3,
    .returns-page .page-card-grid h3 {
        font-size: 1.05rem;
        line-height: 1.12;
    }

    .returns-page .policy-detail p,
    .returns-page .policy-detail li,
    .returns-page .page-card-grid p {
        font-size: 0.84rem;
        line-height: 1.48;
    }

    .returns-page .policy-detail ul {
        margin: 0.25rem 0 0;
        padding-left: 1rem;
    }
}

/* Compact mobile footer accordion */
@media (max-width: 640px) {
    .footer {
        padding-inline: 0.95rem;
        padding-bottom: 1.45rem;
    }

    .footer-links {
        margin-top: 1.25rem;
    }

    .footer-toggle {
        min-height: 42px;
        font-size: 0.72rem;
        letter-spacing: 0.16em;
        line-height: 1;
    }

    .footer-toggle::after {
        font-size: 0.62rem;
    }

    .footer-column ul {
        gap: 0.42rem;
        padding-bottom: 0.72rem;
    }

    .footer-column li,
    .footer-column a {
        font-size: 0.82rem;
        line-height: 1.28;
    }
}

/* Final mobile typography audit */
@media (max-width: 720px) {
    .about-section .about-section-heading h2,
    .about-section .about-editorial-copy h2,
    .about-section .about-community-panel h2,
    .about-section .about-forward-section h2,
    .about-section .about-close h2 {
        font-size: clamp(1.65rem, 8vw, 2.25rem) !important;
        line-height: 1.02 !important;
    }

    .about-section .about-section-heading p,
    .about-section .about-editorial-copy p,
    .about-section .about-community-panel p,
    .about-section .about-forward-text p,
    .about-section .about-copy p {
        font-size: 0.84rem !important;
        line-height: 1.48 !important;
    }

    .about-brand-pillars > * {
        min-height: 92px !important;
        padding: 0.78rem !important;
    }

    .about-brand-pillars h3,
    .about-brand-pillars strong {
        font-size: clamp(1.05rem, 5vw, 1.45rem) !important;
        line-height: 1 !important;
    }

    .about-brand-pillars p,
    .about-brand-pillars span {
        font-size: 0.66rem !important;
        line-height: 1.25 !important;
    }

    .about-value-card {
        min-height: 105px !important;
        padding: 0.82rem 0.9rem !important;
        gap: 0.42rem !important;
    }

    .about-value-card h3 {
        font-size: clamp(1.08rem, 5.4vw, 1.48rem) !important;
        line-height: 1.02 !important;
    }

    .about-value-card p {
        font-size: 0.72rem !important;
        line-height: 1.32 !important;
    }

    .about-originals-timeline .about-original-step {
        grid-template-columns: 1.85rem minmax(0, 1fr) !important;
        gap: 0.5rem !important;
        padding: 0.65rem 0 !important;
    }

    .about-originals-timeline .about-original-step h3 {
        font-size: clamp(1.05rem, 5.2vw, 1.45rem) !important;
        line-height: 1.02 !important;
    }

    .about-section .about-originals-timeline .about-original-step p {
        font-size: 0.72rem !important;
        line-height: 1.33 !important;
    }

    .founder-note p,
    .about-section .founder-note p {
        font-size: 0.74rem !important;
        line-height: 1.38 !important;
    }

    .lookbook-page .drop-hero h1 {
        font-size: clamp(2.05rem, 9.6vw, 2.85rem) !important;
        line-height: 0.94 !important;
    }

    .lookbook-page .drop-hero p,
    .lookbook-page .drop-hero .drop-subheading {
        font-size: 0.8rem !important;
        line-height: 1.38 !important;
    }

    .lookbook-page .drop-section-heading h2,
    .lookbook-page .drop-details-section h2 {
        font-size: clamp(1.62rem, 7.8vw, 2.18rem) !important;
        line-height: 0.98 !important;
    }

    .lookbook-page .drop-section-heading a,
    .lookbook-page .drop-product-info strong,
    .lookbook-page .drop-product-info span {
        font-size: 0.78rem !important;
    }

    .lookbook-page .drop-product-info small {
        font-size: 0.68rem !important;
    }

    .returns-page .page-hero h1 {
        font-size: clamp(1.95rem, 9vw, 2.55rem) !important;
        line-height: 0.94 !important;
    }

    .returns-page .page-hero p {
        font-size: 0.82rem !important;
        line-height: 1.44 !important;
    }

    .returns-page .policy-detail h3,
    .returns-page .page-card-grid h3 {
        font-size: 0.94rem !important;
    }

    .returns-page .policy-detail p,
    .returns-page .policy-detail li,
    .returns-page .page-card-grid p {
        font-size: 0.76rem !important;
        line-height: 1.42 !important;
    }
}

/* Wishlist drawer aligned with the basket drawer */
.wishlist-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 100;
    width: min(460px, 100%);
    height: 100vh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 1rem;
    padding: 1.2rem;
    overflow-y: auto;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    background: var(--cream);
    box-shadow: -24px 0 70px rgba(36, 24, 17, 0.18);
    transform: translateX(105%);
    transition: transform 240ms ease, visibility 240ms ease;
}

.wishlist-panel[aria-hidden="true"] {
    display: grid;
    visibility: hidden;
}

.wishlist-panel[aria-hidden="false"] {
    visibility: visible;
    transform: translateX(0);
}

.wishlist-panel .mini-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(51, 36, 27, 0.18);
    border-radius: 0;
    background: rgba(250, 248, 244, 0.92);
    color: #241811;
}

.wishlist-panel .mini-close::before {
    content: "×";
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.wishlist-panel .mini-close:hover,
.wishlist-panel .mini-close:focus-visible {
    background: #241811;
    color: #fffaf3;
    transform: none;
}

.wishlist-panel > .eyebrow {
    display: block;
    margin: 0 4rem 0.45rem 0;
}

.wishlist-panel > h2 {
    max-width: none;
    margin: 0 0 1rem;
    padding: 0 4rem 1rem 0;
    border-bottom: 1px solid var(--line);
    font-size: clamp(2rem, 7vw, 3.1rem);
    line-height: 0.95;
}

.wishlist-items {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    margin: 0;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.wishlist-item {
    width: 100%;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--coffee);
    text-align: left;
}

.wishlist-item-image {
    width: 86px;
    height: 86px;
    min-height: 0;
    border-radius: 6px;
}

.wishlist-item-copy {
    min-width: 0;
    gap: 0.15rem;
}

.wishlist-item strong {
    font-size: 0.98rem;
    line-height: 1.15;
}

.wishlist-item small {
    color: rgba(36, 24, 17, 0.62);
    font-size: 0.86rem;
    font-weight: 800;
}

.wishlist-item > span:last-child {
    font-size: 1rem;
    font-weight: 900;
    white-space: nowrap;
}

.wishlist-empty {
    max-width: none;
    margin: 0;
    padding: 1.55rem;
    border: 1px dashed rgba(88, 64, 48, 0.22);
    border-radius: 8px;
    color: rgba(36, 24, 17, 0.66);
    font-size: 1rem;
    line-height: 1.45;
}

@media (max-width: 720px) {
    .wishlist-panel {
        width: 100%;
        padding: 1rem 0.95rem;
    }

    .wishlist-panel > h2 {
        font-size: clamp(2.25rem, 12vw, 3.1rem);
    }

    .wishlist-item {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        gap: 0.75rem;
        padding: 0.7rem;
    }

    .wishlist-item-image {
        width: 72px;
        height: 82px;
    }

    .wishlist-item strong {
        font-size: 0.9rem;
    }

    .wishlist-item small,
    .wishlist-item > span:last-child {
        font-size: 0.82rem;
    }
}

/* Wishlist hearts fill dark brown after saving. */
.card-wishlist-btn.saved,
.product-card .card-wishlist-btn.saved,
.product-card .card-wishlist-btn.saved:hover,
.product-card .card-wishlist-btn.saved:focus-visible {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(36, 24, 17, 0.22) !important;
    color: var(--coffee) !important;
    box-shadow: 0 8px 20px rgba(36, 24, 17, 0.16) !important;
}

.card-wishlist-btn.saved::before,
.product-card .card-wishlist-btn.saved::before {
    content: "\2665" !important;
    color: var(--coffee) !important;
    font-family: inherit !important;
    font-size: 1.16rem !important;
    font-weight: 900 !important;
}

.product-wishlist-btn.saved {
    color: var(--coffee) !important;
}

.product-wishlist-btn.saved::after {
    content: "\2665" !important;
    color: var(--coffee) !important;
    transform: none !important;
}

@media (max-width: 720px) {
    .card-wishlist-btn.saved::before,
    .product-card .card-wishlist-btn.saved::before {
        font-size: 1.16rem !important;
    }
}

/* Compact shared footer spacing */
.footer {
    padding-block: clamp(1.6rem, 3vw, 2.6rem) !important;
}

.footer-primary,
.footer-links {
    min-height: 0 !important;
}

.footer-primary {
    gap: clamp(1.25rem, 3vw, 2.25rem) !important;
    padding-bottom: clamp(1.1rem, 2vw, 1.7rem) !important;
    margin-bottom: clamp(1.1rem, 2vw, 1.7rem) !important;
}

.footer-brand {
    gap: 0.65rem !important;
}

.footer-brand p,
.newsletter-note {
    margin-top: 0.55rem !important;
    max-width: 430px;
    font-size: 0.92rem !important;
    line-height: 1.42 !important;
}

.newsletter {
    gap: 0.5rem !important;
}

.newsletter div,
.newsletter input,
.newsletter button {
    min-height: 42px !important;
}

.newsletter input {
    padding: 0.72rem 0.95rem !important;
    font-size: 0.94rem !important;
}

.newsletter button {
    padding-inline: 1.25rem !important;
    font-size: 0.9rem !important;
}

.footer-links {
    gap: clamp(1rem, 3vw, 2.25rem) !important;
    padding-top: 0 !important;
}

.footer-column {
    gap: 0.48rem !important;
}

.footer-column h3,
.footer-toggle {
    margin-bottom: 0.38rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.22em !important;
}

.footer-column ul {
    gap: 0.28rem !important;
}

.footer-column a,
.footer-column li {
    font-size: 0.9rem !important;
    line-height: 1.32 !important;
}

@media (max-width: 720px) {
    .footer {
        padding: 1.05rem 1rem 1.25rem !important;
    }

    .footer-primary {
        gap: 0.85rem !important;
        padding-bottom: 0.85rem !important;
        margin-bottom: 0.75rem !important;
    }

    .footer-brand {
        gap: 0.42rem !important;
    }

    .footer-brand p,
    .newsletter-note {
        margin-top: 0.35rem !important;
        font-size: 0.82rem !important;
        line-height: 1.34 !important;
    }

    .newsletter {
        gap: 0.42rem !important;
    }

    .newsletter div,
    .newsletter input,
    .newsletter button {
        min-height: 38px !important;
    }

    .newsletter input {
        padding: 0.6rem 0.72rem !important;
        font-size: 0.84rem !important;
    }

    .newsletter button {
        padding-inline: 0.88rem !important;
        font-size: 0.78rem !important;
    }

    .footer-links {
        gap: 0 !important;
    }

    .footer-column {
        padding: 0 !important;
    }

    .footer-toggle {
        padding: 0.68rem 0 !important;
        font-size: 0.68rem !important;
    }

    .footer-column ul {
        padding-bottom: 0.68rem !important;
        gap: 0.28rem !important;
    }

    .footer-column a,
    .footer-column li {
        font-size: 0.82rem !important;
        line-height: 1.28 !important;
    }
}

/* Home split panels: keep text anchored near the bottom of the image */
.home-split-panel {
    justify-content: flex-end !important;
    padding-bottom: clamp(2.5rem, 5vw, 4.4rem) !important;
}

@media (max-width: 720px) {
    .home-split-panel {
        padding-bottom: 1.2rem !important;
    }
}

/* Footer spacing refinement */
.footer-primary {
    margin-bottom: clamp(1.45rem, 2.5vw, 2.15rem) !important;
}

.footer-links {
    padding-top: clamp(0.7rem, 1.5vw, 1.1rem) !important;
}

.newsletter-note {
    margin-top: 0.85rem !important;
}

@media (max-width: 720px) {
    .footer-primary {
        margin-bottom: 1rem !important;
    }

    .footer-links {
        padding-top: 0.4rem !important;
    }

    .newsletter-note {
        margin-top: 0.55rem !important;
    }
}

/* Compact mobile basket drawer */
@media (max-width: 640px) {
    .cart-drawer {
        grid-template-rows: auto auto auto;
        gap: 0.72rem;
        padding: 0.82rem;
        overflow-y: auto;
    }

    .cart-header {
        gap: 0.6rem;
        padding-bottom: 0.68rem;
    }

    .cart-header .eyebrow {
        margin-bottom: 0.28rem;
        font-size: 0.68rem;
        letter-spacing: 0.3em;
    }

    .cart-header h2 {
        padding-right: 3rem;
        font-size: clamp(1.85rem, 9.5vw, 2.45rem);
        line-height: 0.95;
    }

    .cart-close {
        width: 42px;
        height: 42px;
        top: 0.75rem;
        right: 0.75rem;
    }

    .cart-items {
        gap: 0.62rem;
        overflow: visible;
        padding-right: 0;
    }

    .cart-item {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 0.62rem;
        padding: 0.58rem;
        border-radius: 7px;
    }

    .cart-item-image {
        min-height: 96px;
        border-radius: 6px;
    }

    .cart-item-content {
        gap: 0.55rem;
    }

    .cart-item-top {
        gap: 0.48rem;
    }

    .cart-item h3 {
        font-size: 0.86rem;
        line-height: 1.1;
    }

    .cart-item p {
        margin-top: 0.2rem;
        font-size: 0.76rem;
        line-height: 1.25;
    }

    .cart-item strong {
        font-size: 0.88rem;
    }

    .quantity-row {
        gap: 0.42rem;
    }

    .quantity-control {
        grid-template-columns: 28px 30px 28px;
    }

    .quantity-control button {
        width: 28px;
        height: 28px;
        font-size: 0.88rem;
    }

    .quantity-control span {
        font-size: 0.82rem;
    }

    .remove-item {
        font-size: 0.76rem;
    }

    .cart-summary {
        gap: 0.58rem;
        padding-top: 0.66rem;
    }

    .cart-upsell {
        grid-template-columns: 74px minmax(0, 1fr) 86px;
        align-items: center;
        gap: 0.48rem;
        padding: 0.62rem;
        border-radius: 7px;
    }

    .cart-upsell .eyebrow {
        font-size: 0.56rem;
        line-height: 1.45;
        letter-spacing: 0.28em;
    }

    .cart-upsell p {
        font-size: 0.72rem;
        line-height: 1.32;
    }

    .upsell-btn {
        min-height: 56px;
        padding: 0.42rem 0.48rem;
        border-radius: 7px;
        font-size: 0.78rem;
        line-height: 1.08;
        letter-spacing: 0.02em;
    }

    .cart-summary div {
        font-size: 0.9rem;
    }

    .cart-summary strong {
        font-size: 1.12rem;
    }

    .cart-summary p {
        font-size: 0.76rem;
        line-height: 1.35;
    }

    .checkout-btn {
        min-height: 46px;
        font-size: 0.9rem;
    }

    .clear-cart-btn {
        padding: 0.2rem 0.45rem;
        font-size: 0.76rem;
    }
}

/* Final wishlist heart state: same white circle, filled dark-brown heart. */
.product-card .card-wishlist-btn.saved,
.product-card .card-wishlist-btn[aria-pressed="true"],
.card-wishlist-btn.saved,
.card-wishlist-btn[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(36, 24, 17, 0.2) !important;
    color: var(--coffee) !important;
    box-shadow: 0 8px 18px rgba(36, 24, 17, 0.14) !important;
}

.product-card .card-wishlist-btn.saved::before,
.product-card .card-wishlist-btn[aria-pressed="true"]::before,
.card-wishlist-btn.saved::before,
.card-wishlist-btn[aria-pressed="true"]::before {
    content: "\2665" !important;
    color: var(--coffee) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.12rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.product-image::before,
.product-image::after,
.cart-item-image::before,
.cart-item-image::after,
.wishlist-item-image::before,
.wishlist-item-image::after {
    content: none;
}

.product-image {
    background-color: #ddd8cc;
    background-image: var(--card-front-image), url("../../assets/product-background.jpeg?v=3");
    background-size: 76% auto, cover;
    background-repeat: no-repeat;
    background-position: center 50%, center;
}

.product-card:hover .product-image {
    background-image: var(--card-back-image), url("../../assets/product-background.jpeg?v=3");
}

.cart-item-image,
.wishlist-item-image {
    background-color: #ddd8cc;
    background-repeat: no-repeat;
    background-position: center 50%, center;
    background-image: var(--item-image), url("../../assets/product-background.jpeg?v=3");
    background-size: 78% auto, cover;
}

.checkout-item-image {
    background-image: var(--item-image);
}

/*
 * The base .product-page-image/.product-media-thumb ::before/::after rules
 * (further up this file) draw a CSS-generated garment silhouette + text
 * mark. That system previously only ever appeared paired with a token class
 * (e.g. ".product-page-image.hoodie"), which Step 4's removal script has
 * now deleted entirely. Without a suppression rule here, the leftover
 * base-level silhouette would render as an opaque shape on top of every
 * real product photo now set via inline style on these elements (product
 * detail page main image, media strip thumbnails, and the zoom viewer,
 * which also carries the "product-page-image" class). Hiding it here is
 * required for the photos to actually be visible.
 */
.product-page-image::before,
.product-page-image::after,
.product-media-thumb::before {
    content: none;
}

/* ---- Store page (catalog with filters) ---- */

.store-page {
    width: min(1380px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.2rem) 0 6rem;
}

.store-header {
    margin-bottom: 2.4rem;
}

.store-header h1 {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 0.98;
    margin: 0.5rem 0 0.6rem;
}

.store-header p {
    margin: 0;
    color: rgba(36, 24, 17, 0.62);
    font-size: 0.98rem;
    max-width: 560px;
    line-height: 1.6;
}

.store-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 3rem;
    align-items: start;
}

.store-filters {
    position: sticky;
    top: 1.5rem;
}

.store-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.store-clear-filters {
    border: none;
    background: transparent;
    color: var(--mocha);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.store-filter-group {
    border-top: 1px solid var(--line);
    padding: 1rem 0;
}

.store-filter-group:last-child {
    border-bottom: 1px solid var(--line);
}

.store-filter-group h3 {
    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.7rem;
}

.store-filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.4rem 0;
    cursor: pointer;
}

.store-filter-option-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.store-filter-check {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border: 1px solid var(--line);
    flex: 0 0 auto;
}

.store-filter-option.is-active .store-filter-check {
    background: var(--ink);
    border-color: var(--ink);
}

.store-filter-label {
    font-size: 0.9rem;
    color: var(--ink);
}

.store-filter-count {
    font-size: 0.78rem;
    color: rgba(36, 24, 17, 0.62);
}

.store-filter-swatch {
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(36, 24, 17, 0.18);
    flex: 0 0 auto;
}

.store-filter-option.is-active .store-filter-swatch {
    box-shadow: inset 0 0 0 2px var(--ink);
}

.store-size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.store-size-option {
    min-width: 38px;
    height: 36px;
    padding: 0 0.6rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.store-size-option.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
}

.store-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.store-result-count {
    margin: 0;
    font-size: 0.86rem;
    color: rgba(36, 24, 17, 0.62);
}

.store-sort {
    display: flex;
    border: 1px solid var(--line);
}

.store-sort-option {
    border: none;
    padding: 0.55rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    color: var(--ink);
}

.store-sort-option.is-active {
    background: var(--coffee);
    color: var(--white);
}

.store-empty {
    padding: 5rem 1rem;
    text-align: center;
    border: 1px solid var(--line);
    color: rgba(36, 24, 17, 0.62);
    font-size: 0.98rem;
}

.store-product-grid-wrap.shop-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

.store-grid .product-card[hidden] {
    display: none;
}

@media (max-width: 980px) {
    .store-layout {
        grid-template-columns: 1fr;
    }

    .store-filters {
        position: static;
    }
}