@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,800;9..144,900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --ink: #202020;
  --paper: #fffaf0;
  --white: #ffffff;
  --orange: #f2532f;
  --yellow: #f5cb45;
  --sky: #8bcbed;
  --grape: #7c42d8;
  --mint: #a8dbbf;
  --muted: #6b655e;
  --line: 2px solid var(--ink);
  --radius: 22px;
  --display: "Fraunces", Georgia, serif;
  --sans: "Space Grotesk", Arial, sans-serif;
  --max: 1400px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.5; letter-spacing: 0; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 4px solid var(--sky); outline-offset: 3px; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--yellow); border: var(--line); padding: 10px 16px; font-weight: 700; }
.skip-link:focus { top: 16px; }
.utility { background: var(--ink); color: var(--paper); font-size: 12px; }
.utility-inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.utility-links { display: flex; gap: 22px; }
.utility .hot { color: var(--yellow); }
.site-header { position: sticky; top: 0; z-index: 80; background: var(--paper); border-bottom: var(--line); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { font: 900 34px/1 var(--display); }
.logo-mark { color: var(--orange); }
.main-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 700; }
.main-nav a { position: relative; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 3px; background: var(--orange); transition: right .25s; }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { right: 0; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.icon-button { width: 44px; height: 44px; display: grid; place-items: center; border: var(--line); background: var(--paper); border-radius: 50%; padding: 0; position: relative; }
.icon-button:hover { background: var(--yellow); }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bag-button { background: var(--orange); color: var(--white); }
.count { position: absolute; right: -7px; top: -7px; min-width: 23px; height: 23px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; border: var(--line); background: var(--yellow); color: var(--ink); font-size: 10px; font-weight: 800; }
.menu-button { display: none; }
.search-panel { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); width: min(92%, 560px); display: none; gap: 8px; padding: 10px; border: var(--line); background: var(--paper); box-shadow: 7px 7px 0 var(--ink); }
.search-panel.open { display: flex; }
.search-panel input { min-width: 0; flex: 1; border: 0; background: transparent; padding: 0 12px; outline: 0; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: var(--line); border-radius: 999px; padding: 11px 22px; background: var(--paper); font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.button-primary { background: var(--orange); color: var(--white); }
.button-yellow { background: var(--yellow); color: var(--ink); }
.button-dark { background: var(--ink); color: var(--paper); }
.button-small { min-height: 40px; padding: 8px 16px; font-size: 13px; }
.eyebrow { display: inline-block; margin: 0; border: var(--line); border-radius: 999px; background: var(--yellow); padding: 8px 14px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.hero { min-height: calc(100vh - 112px); display: grid; grid-template-columns: 7fr 5fr; align-items: center; gap: 54px; padding-block: 40px; }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin: 24px 0; font: 900 clamp(64px, 9vw, 138px)/.84 var(--display); }
.hero h1 em, .section-title em { color: var(--orange); }
.hero-copy > p { max-width: 520px; color: var(--muted); font-size: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-art { position: relative; }
.image-frame { overflow: hidden; border: var(--line); border-radius: 32px; background: var(--yellow); }
.image-frame img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.image-frame:hover img, .product-media:hover img { transform: scale(1.035); }
.sticker { position: absolute; left: -14px; bottom: -12px; transform: rotate(-4deg); border: var(--line); background: var(--paper); padding: 11px 16px; box-shadow: 5px 5px 0 var(--ink); font: 800 20px var(--display); }
.marquee { overflow: hidden; border-block: var(--line); background: var(--orange); color: var(--white); }
.marquee-track { width: max-content; display: flex; gap: 38px; padding: 12px 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; animation: marquee 26s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.section { padding-block: 78px; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.section-title h2 { margin: 0; font: 900 clamp(38px, 5vw, 64px)/.95 var(--display); }
.text-link { font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.category-card img { aspect-ratio: 4/5; width: 100%; object-fit: cover; border: var(--line); border-radius: 28px; transition: transform .6s; }
.category-card:hover img { transform: translateY(-6px) rotate(1deg); }
.category-info { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 14px; }
.category-info h3 { margin: 0; font: 800 25px var(--display); }
.category-info span { color: var(--muted); font-size: 13px; }
.products { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.product-card { position: relative; border: var(--line); background: var(--white); padding: 11px; }
.product-media { position: relative; overflow: hidden; background: #eee9df; }
.product-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .7s; }
.tag { position: absolute; left: 11px; top: 11px; border: var(--line); border-radius: 999px; background: var(--paper); padding: 5px 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.wishlist { position: absolute; right: 11px; top: 11px; width: 38px; height: 38px; display: grid; place-items: center; border: var(--line); border-radius: 50%; background: var(--paper); font-size: 20px; }
.wishlist.active { background: var(--orange); color: var(--white); }
.product-copy { padding: 14px 2px 2px; }
.product-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.product-head h3 { margin: 0; font: 800 18px/1.15 var(--display); }
.price { flex: 0 0 auto; font-weight: 800; }
.product-copy p { margin: 5px 0 15px; color: var(--muted); font-size: 13px; }
.product-copy .button { width: 100%; }
.offer { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; border: var(--line); border-radius: 32px; background: var(--grape); color: var(--white); padding: 38px; overflow: hidden; }
.offer h2 { margin: 22px 0 14px; max-width: 620px; font: 900 clamp(42px,6vw,76px)/.95 var(--display); }
.offer p { max-width: 520px; color: rgba(255,255,255,.8); }
.offer img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border: var(--line); border-radius: 24px; }
.form-row { display: flex; gap: 10px; margin-top: 24px; }
.input { min-height: 50px; width: 100%; border: var(--line); border-radius: 999px; background: var(--white); padding: 10px 18px; outline: 0; }
textarea.input { min-height: 150px; border-radius: 18px; resize: vertical; }
.site-footer { margin-top: 20px; background: var(--ink); color: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 48px; padding-block: 54px; }
.footer-about p { max-width: 330px; margin-top: 18px; color: rgba(255,250,240,.6); font-size: 14px; }
.footer-group h3 { margin-bottom: 15px; color: rgba(255,250,240,.55); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
.footer-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14px; }
.footer-group a:hover { color: var(--yellow); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.16); }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 20px; padding-block: 18px; color: rgba(255,250,240,.55); font-size: 12px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translate(-50%, 30px); opacity: 0; border: var(--line); background: var(--ink); color: var(--paper); padding: 13px 20px; box-shadow: 6px 6px 0 var(--orange); font-size: 14px; font-weight: 700; pointer-events: none; transition: .25s; }
.toast.show { transform: translate(-50%,0); opacity: 1; }
.page-hero { border-bottom: var(--line); background: var(--sky); }
.page-hero.orange { background: var(--orange); color: var(--white); }
.page-hero.yellow { background: var(--yellow); }
.page-hero.grape { background: var(--grape); color: var(--white); }
.page-hero-inner { min-height: 310px; display: flex; flex-direction: column; justify-content: end; padding-block: 50px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: 13px; font-weight: 700; }
.page-hero h1 { max-width: 1000px; margin: 0; font: 900 clamp(54px,9vw,118px)/.88 var(--display); }
.page-hero p { max-width: 650px; margin: 22px 0 0; font-size: 18px; }
.shop-tools { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 26px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { min-height: 40px; border: var(--line); border-radius: 999px; background: var(--paper); padding: 8px 15px; font-weight: 700; }
.filter.active, .filter:hover { background: var(--yellow); }
.sort { border: var(--line); border-radius: 999px; background: var(--paper); padding: 9px 14px; font-weight: 700; }
.info-band { display: grid; grid-template-columns: repeat(3,1fr); border-block: var(--line); background: var(--yellow); }
.info-item { padding: 30px; text-align: center; border-right: var(--line); }
.info-item:last-child { border-right: 0; }
.info-item strong { display: block; font: 800 21px var(--display); }
.empty-state { border: var(--line); background: var(--white); padding: 70px 24px; text-align: center; }
.empty-state h2 { font: 800 40px var(--display); }
.cart-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(300px,.7fr); gap: 28px; }
.cart-list { display: grid; gap: 14px; }
.cart-item { display: grid; grid-template-columns: 120px 1fr auto; gap: 18px; align-items: center; border: var(--line); background: var(--white); padding: 12px; }
.cart-item img { width: 120px; height: 145px; object-fit: cover; }
.cart-item h3 { margin-bottom: 5px; font: 800 20px var(--display); }
.cart-item p { margin-bottom: 13px; color: var(--muted); font-size: 13px; }
.quantity { display: inline-flex; align-items: center; border: var(--line); border-radius: 999px; overflow: hidden; }
.quantity button { width: 34px; height: 34px; border: 0; background: transparent; }
.quantity span { width: 28px; text-align: center; font-weight: 800; }
.remove { border: 0; background: transparent; color: var(--muted); text-decoration: underline; }
.summary { position: sticky; top: 108px; align-self: start; border: var(--line); background: var(--yellow); padding: 24px; }
.summary h2 { font: 800 31px var(--display); }
.summary-row { display: flex; justify-content: space-between; gap: 20px; padding-block: 12px; border-bottom: 1px solid rgba(32,32,32,.3); }
.summary-total { font-weight: 800; font-size: 19px; }
.summary .button { width: 100%; margin-top: 20px; }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.product-gallery img { width: 100%; max-height: 760px; object-fit: cover; border: var(--line); border-radius: 28px; }
.product-info { position: sticky; top: 112px; }
.product-info h1 { margin: 14px 0; font: 900 clamp(45px,6vw,76px)/.95 var(--display); }
.product-price { font-size: 23px; font-weight: 800; }
.product-description { max-width: 570px; color: var(--muted); }
.option-label { display: block; margin: 25px 0 10px; font-weight: 800; }
.swatches, .sizes { display: flex; gap: 9px; flex-wrap: wrap; }
.swatch, .size { min-width: 45px; height: 45px; border: var(--line); background: var(--paper); display: grid; place-items: center; font-weight: 800; }
.swatch { border-radius: 50%; }
.swatch[data-color="orange"] { background: var(--orange); }
.swatch[data-color="sky"] { background: var(--sky); }
.swatch[data-color="cream"] { background: var(--paper); }
.swatch.active, .size.active { box-shadow: 0 0 0 4px var(--yellow); }
.product-facts { display: grid; gap: 12px; margin-top: 28px; padding-top: 25px; border-top: var(--line); font-size: 14px; }
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.editorial img { width: 100%; max-height: 720px; object-fit: cover; border: var(--line); border-radius: 30px; }
.editorial h2 { font: 900 clamp(46px,7vw,90px)/.92 var(--display); }
.editorial p { color: var(--muted); font-size: 18px; }
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.value { border: var(--line); padding: 26px; background: var(--white); }
.value:nth-child(2) { background: var(--sky); }
.value:nth-child(3) { background: var(--yellow); }
.value h3 { font: 800 25px var(--display); }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 45px; }
.contact-card { border: var(--line); background: var(--sky); padding: 28px; }
.contact-card h2, .content-block h2 { font: 800 34px var(--display); }
.contact-form { display: grid; gap: 16px; }
.field label { display: block; margin-bottom: 7px; font-weight: 800; }
.content-wrap { max-width: 900px; }
.content-block { padding: 28px 0; border-bottom: var(--line); }
.content-block p, .content-block li { color: var(--muted); }
.size-table { width: 100%; border-collapse: collapse; background: var(--white); }
.size-table th, .size-table td { border: var(--line); padding: 15px; text-align: left; }
.size-table th { background: var(--yellow); }
.js-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.js-ready [data-reveal].visible { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .main-nav { position: fixed; inset: 112px 0 0; display: none; align-content: start; gap: 0; background: var(--paper); padding: 24px; font: 800 28px var(--display); }
  .main-nav.open { display: grid; }
  .main-nav a { border-bottom: 1px solid rgba(32,32,32,.18); padding: 16px 0; }
  .menu-button { display: grid; }
  .hero { grid-template-columns: 1fr 1fr; }
  .products { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 2fr repeat(3,1fr); gap: 28px; }
}
@media (max-width: 760px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .utility-links, .search-trigger, .wishlist-link { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-block: 44px 60px; }
  .hero h1 { font-size: clamp(58px,19vw,94px); }
  .hero-art { width: 90%; margin-left: auto; }
  .category-grid, .offer, .editorial, .values, .contact-grid, .cart-layout, .product-detail { grid-template-columns: 1fr; }
  .products { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .product-card { padding: 8px; }
  .product-head { display: block; }
  .price { display: block; margin-top: 4px; }
  .offer { padding: 24px; }
  .offer-copy { order: 2; }
  .form-row { flex-direction: column; }
  .page-hero-inner { min-height: 260px; }
  .shop-tools { align-items: start; flex-direction: column; }
  .info-band { grid-template-columns: 1fr; }
  .info-item { border-right: 0; border-bottom: var(--line); }
  .info-item:last-child { border-bottom: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .cart-item { grid-template-columns: 92px 1fr; }
  .cart-item img { width: 92px; height: 120px; }
  .cart-item > strong { grid-column: 2; }
  .summary, .product-info { position: static; }
  .product-gallery { order: 1; }
  .product-info { order: 2; }
}
@media (max-width: 480px) {
  .products { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom .container { flex-direction: column; }
  .hide-small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js-ready [data-reveal] { opacity: 1; transform: none; }
}


/* Expanded storefront */
.nav-group { position: relative; display: flex; align-items: center; }
.submenu-toggle { width: 20px; height: 20px; border: 0; background: transparent; padding: 0; font-weight: 800; }
.submenu { position: absolute; left: -18px; top: calc(100% + 18px); width: 210px; display: none; padding: 12px; border: var(--line); background: var(--paper); box-shadow: 7px 7px 0 var(--ink); }
.nav-group:hover .submenu, .nav-group:focus-within .submenu { display: grid; }
.submenu.mega { width: 310px; grid-template-columns: 1fr 1fr; }
.submenu a { padding: 9px 8px; font-size: 13px; }
.submenu a:hover { background: var(--yellow); }
.submenu a::after { display: none; }
.nav-close { display: none; }
.section-tint { background: color-mix(in srgb, var(--sky) 20%, var(--paper)); border-block: var(--line); }
.result-count { margin: -14px 0 25px; color: var(--muted); font-size: 13px; }
.product-copy small { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.dense-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.product-slider { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 25%); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 18px; }
.slider-card { scroll-snap-align: start; }
.slider-controls { display: flex; gap: 8px; }
.product-list { display: grid; gap: 18px; }
.list-product { display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 35px; padding: 14px; border: var(--line); background: var(--white); }
.list-product img { width: 260px; aspect-ratio: 4/3; object-fit: cover; }
.list-product h2 { margin: 7px 0; font: 800 34px var(--display); }
.list-product p { max-width: 680px; color: var(--muted); }
.campaign-hero { position: relative; min-height: min(820px,calc(100vh - 112px)); overflow: hidden; border-bottom: var(--line); }
.campaign-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.campaign-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(32,32,32,.72),rgba(32,32,32,.06)); }
.campaign-overlay { position: relative; z-index: 1; width: min(calc(100% - 40px),var(--max)); min-height: inherit; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: var(--paper); }
.campaign-overlay h1 { margin: 22px 0 30px; font: 900 clamp(80px,13vw,185px)/.72 var(--display); }
.statement { padding: 90px 0; background: var(--yellow); border-bottom: var(--line); }
.statement p { max-width: 1100px; margin: 0; font: 800 clamp(42px,7vw,90px)/1 var(--display); }
.statement em { color: var(--orange); }
.split-feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 680px; border-block: var(--line); background: var(--orange); color: var(--white); }
.split-feature img { width: 100%; height: 100%; object-fit: cover; }
.split-copy { display: flex; flex-direction: column; justify-content: center; align-items: start; padding: clamp(40px,7vw,100px); }
.split-copy h2 { margin: 25px 0; font: 900 clamp(52px,7vw,95px)/.9 var(--display); }
.testimonials { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.testimonials blockquote { margin: 0; padding: 35px; border: var(--line); background: var(--white); font: 700 27px/1.25 var(--display); }
.testimonials cite { display: block; margin-top: 22px; font: 600 13px var(--sans); }
.journal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.post-card { border-top: var(--line); padding-top: 12px; }
.post-card img { width: 100%; aspect-ratio: 16/11; object-fit: cover; }
.post-card h2 { margin: 8px 0; font: 800 28px/1.05 var(--display); }
.post-card p { color: var(--muted); font-size: 14px; }
.post-meta { display: block; margin-top: 14px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.newsletter-wide { padding: 46px 0; border-top: var(--line); background: var(--grape); color: var(--white); }
.newsletter-inner { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 40px; }
.newsletter-inner h2 { margin: 17px 0 0; font: 800 clamp(32px,4vw,56px)/.95 var(--display); }
.story-strip { display: grid; grid-template-columns: repeat(3,1fr); border-block: var(--line); background: var(--yellow); }
.story-strip div { padding: 26px; text-align: center; border-right: var(--line); }
.story-strip div:last-child { border: 0; }
.story-strip strong, .story-strip span { display: block; }
.story-strip span { color: var(--muted); font-size: 13px; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 10px; }
.gallery-thumbs img { aspect-ratio: 1; border-radius: 0; }
.product-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 24px; }
.rating { color: var(--orange); font-weight: 800; }
.rating span { color: var(--muted); font-size: 12px; }
.float-right { float: right; font-weight: 500; }
.product-facts details { padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb,var(--ink) 25%,transparent); }
.product-facts summary, .faq-list summary { cursor: pointer; font-weight: 800; }
.product-facts p { margin: 8px 0 0; color: var(--muted); }
.secure-note { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 11px; }
.checkout-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: start; }
.checkout-form { display: grid; gap: 18px; }
.checkout-step { display: grid; grid-template-columns: 50px 1fr; gap: 20px; padding: 26px; border: var(--line); background: var(--white); }
.checkout-step > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); border: var(--line); font-weight: 800; }
.checkout-step h2 { font: 800 32px var(--display); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field.full { grid-column: 1/-1; }
.field { font-size: 13px; font-weight: 800; }
.field .input { display: block; margin-top: 7px; border-radius: 8px; }
.check { font-size: 13px; }
.payment-choice { display: flex; gap: 20px; margin-bottom: 18px; }
.checkout-submit { justify-self: end; min-width: 260px; }
.checkout-item { display: grid; grid-template-columns: 55px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb,var(--ink) 25%,transparent); font-size: 12px; }
.checkout-item img { width: 55px; height: 66px; object-fit: cover; }
.timeline { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: var(--line); }
.timeline article { padding: 30px; border-right: var(--line); }
.timeline article:last-child { border: 0; }
.timeline strong { color: var(--orange); font: 900 42px var(--display); }
.timeline h3 { font: 800 24px var(--display); }
.faq-layout { display: grid; grid-template-columns: 240px 1fr; gap: 60px; }
.faq-nav { position: sticky; top: 120px; align-self: start; display: grid; gap: 14px; }
.faq-list details { padding: 23px 0; border-bottom: var(--line); }
.faq-list summary { font: 800 25px var(--display); }
.faq-list p { max-width: 700px; margin: 14px 0 0; color: var(--muted); }
.lookbook-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.look { position: relative; min-height: 520px; overflow: hidden; border: var(--line); }
.look.tall { min-height: 760px; }
.look.wide { grid-column: 1/-1; min-height: 620px; }
.look img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.look > span { position: absolute; top: 18px; left: 18px; width: 44px; height: 44px; display: grid; place-items: center; border: var(--line); border-radius: 50%; background: var(--yellow); font-weight: 800; }
.look div { position: absolute; left: 20px; right: 20px; bottom: 20px; padding: 18px; border: var(--line); background: var(--paper); }
.look h2 { margin: 0; font: 800 32px var(--display); }
.look p { margin: 4px 0 0; }
.auth-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: stretch; }
.auth-card { display: grid; align-content: center; gap: 18px; padding: 40px; border: var(--line); background: var(--white); }
.auth-card h2 { font: 800 46px var(--display); }
.between { display: flex; justify-content: space-between; gap: 15px; font-size: 12px; }
.auth-promo { position: relative; min-height: 650px; overflow: hidden; border: var(--line); }
.auth-promo img { width: 100%; height: 100%; object-fit: cover; }
.auth-promo div { position: absolute; inset: auto 20px 20px; padding: 25px; border: var(--line); background: var(--grape); color: var(--white); }
.auth-promo h2 { font: 800 40px var(--display); }
.coming-page .site-header, .coming-page .utility, .coming-page .newsletter-wide, .coming-page .site-footer { display: none; }
.coming { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--grape); color: var(--white); }
.coming > img { width: 100%; height: 100vh; object-fit: cover; }
.coming-copy { display: flex; flex-direction: column; align-items: start; justify-content: center; padding: clamp(35px,7vw,110px); }
.coming-copy h1 { margin: 50px 0 20px; font: 900 clamp(65px,9vw,130px)/.82 var(--display); }
.countdown { display: flex; gap: 25px; margin: 25px 0; }
.countdown div { display: grid; }
.countdown strong { font: 800 40px var(--display); }
.countdown span { font-size: 10px; text-transform: uppercase; }
.center-page, .error-page { min-height: 72vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; }
.center-page h1, .error-page h1 { max-width: 900px; margin: 25px 0; font: 900 clamp(58px,9vw,120px)/.85 var(--display); }
.center-page > p, .error-page > p { max-width: 620px; color: var(--muted); font-size: 18px; }
.center-icon { width: 90px; height: 90px; display: grid; place-items: center; border: var(--line); border-radius: 50%; background: var(--mint); font-size: 45px; }
.order-number { margin: 15px 0; padding: 12px 20px; border: var(--line); background: var(--yellow); }
.error-number { color: var(--orange); font: 900 clamp(130px,25vw,360px)/.6 var(--display); }
.error-number span { color: var(--grape); }
.rate-grid { display: grid; grid-template-columns: repeat(3,1fr); border: var(--line); margin-top: 25px; }
.rate-grid div { display: grid; gap: 5px; padding: 20px; border-right: var(--line); }
.rate-grid div:last-child { border: 0; }
.rate-grid span { font-size: 13px; color: var(--muted); }
.table-scroll { overflow-x: auto; }
.featured-post { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; border: var(--line); background: var(--yellow); }
.featured-post img { width: 100%; height: 600px; object-fit: cover; }
.featured-post > div { padding: 45px; }
.featured-post h2 { margin: 24px 0; font: 900 clamp(48px,6vw,84px)/.9 var(--display); }
.blog-sidebar { display: grid; grid-template-columns: 280px 1fr; gap: 50px; }
.blog-sidebar aside { position: sticky; top: 110px; align-self: start; }
.sidebar-block { display: grid; gap: 0; margin-top: 28px; padding-top: 20px; border-top: var(--line); }
.sidebar-block a { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb,var(--ink) 20%,transparent); }
.sidebar-block.promo { padding: 22px; border: var(--line); background: var(--yellow); }
.masonry > .journal-grid { align-items: start; }
.masonry .post-card:nth-child(2n) img { aspect-ratio: 4/5; }
.masonry .post-card:nth-child(3n) img { aspect-ratio: 1; }
.article { width: min(calc(100% - 40px),850px); margin: 0 auto; padding: 70px 0; }
.article-meta { margin-bottom: 20px; color: var(--muted); font-size: 12px; text-align: center; }
.article-lead { width: 100%; max-height: 760px; object-fit: cover; border: var(--line); }
.article-intro { margin: 45px 0; font: 600 28px/1.4 var(--display); }
.article h2 { margin: 50px 0 15px; font: 800 42px var(--display); }
.article p { color: var(--muted); font-size: 17px; line-height: 1.8; }
.article blockquote { margin: 55px -80px; padding: 35px 80px; border-block: var(--line); background: var(--yellow); font: 800 38px/1.2 var(--display); }
.article-images { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 35px 0; }
.article-images img { height: 480px; width: 100%; object-fit: cover; }
.article-author { display: flex; gap: 18px; align-items: center; margin-top: 60px; padding-top: 25px; border-top: var(--line); }
.author-mark { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--white); font-weight: 800; }
.article-author p { margin: 3px 0; font-size: 13px; }
@media (max-width: 1180px) { .dense-grid { grid-template-columns: repeat(4,1fr); } .main-nav { gap: 18px; } }
@media (max-width: 1000px) {
  .nav-close { display: flex; justify-content: space-between; width: 100%; padding: 0 0 18px; border: 0; border-bottom: var(--line); background: transparent; font: 800 22px var(--display); }
  .nav-group { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .submenu-toggle { width: 42px; height: 42px; border: var(--line); border-radius: 50%; }
  .submenu { position: static; grid-column: 1/-1; width: auto; padding: 0 0 8px 18px; border: 0; box-shadow: none; background: transparent; }
  .submenu.mega { width: auto; grid-template-columns: 1fr 1fr; }
  .nav-group:hover .submenu, .nav-group:focus-within .submenu { display: none; }
  .nav-group.submenu-open .submenu { display: grid; }
  .main-nav { overflow-y: auto; }
  .dense-grid { grid-template-columns: repeat(3,1fr); }
  .newsletter-inner, .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary { position: static; order: -1; }
  .journal-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .dense-grid { grid-template-columns: repeat(2,1fr); }
  .product-slider { grid-auto-columns: 78%; }
  .list-product, .split-feature, .testimonials, .story-strip, .timeline, .faq-layout, .lookbook-grid, .auth-grid, .coming, .featured-post, .blog-sidebar { grid-template-columns: 1fr; }
  .list-product img { width: 100%; }
  .split-feature img { min-height: 500px; order: -1; }
  .story-strip div, .timeline article { border-right: 0; border-bottom: var(--line); }
  .faq-nav { position: static; grid-template-columns: 1fr 1fr; }
  .look.tall, .look.wide { grid-column: auto; min-height: 520px; }
  .coming > img { height: 48vh; }
  .coming-copy h1 { margin-top: 35px; }
  .rate-grid { grid-template-columns: 1fr; }
  .rate-grid div { border-right: 0; border-bottom: var(--line); }
  .featured-post img { height: 430px; }
  .blog-sidebar aside { position: static; }
  .article blockquote { margin-inline: 0; padding: 28px; }
  .article-images { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
}
@media (max-width: 480px) { .journal-grid { grid-template-columns: 1fr; } .dense-grid { grid-template-columns: 1fr; } .checkout-step { grid-template-columns: 1fr; } .campaign-overlay h1 { font-size: 70px; } }

/* Store expansion v3 */
@media (min-width: 1001px) {
  .nav-group { padding-block: 26px; margin-block: -26px; }
  .nav-group::after { content: ""; position: absolute; top: 100%; left: -18px; width: 100%; height: 24px; }
  .submenu { top: calc(100% + 8px); }
}
.search-close { flex: 0 0 42px; width: 42px; height: 42px; align-self: center; border: var(--line); border-radius: 50%; background: var(--yellow); font: 800 24px/1 var(--sans); }
.search-close:hover { background: var(--orange); color: var(--white); }
.discovery-block { border-block: var(--line); background: var(--mint); }
.discovery-grid { display: grid; grid-template-columns: .85fr 1.35fr; gap: clamp(35px,7vw,100px); align-items: center; }
.discovery-copy h2 { margin: 24px 0; font: 900 clamp(48px,7vw,92px)/.9 var(--display); }
.discovery-copy p { max-width: 560px; color: var(--muted); font-size: 17px; }
.mood-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mood-grid a:first-child { grid-row: span 2; }
.mood-grid img { width: 100%; height: 290px; object-fit: cover; border: var(--line); }
.mood-grid a:first-child img { height: 620px; }
.mood-grid strong { display: block; margin-top: 8px; font: 800 20px var(--display); }
.service-edit { background: var(--sky); border-block: var(--line); }
.service-grid { display: grid; grid-template-columns: repeat(4,1fr); border: var(--line); background: var(--paper); }
.service-grid article { min-height: 270px; padding: 28px; border-right: var(--line); }
.service-grid article:last-child { border: 0; }
.service-grid span { display: inline-grid; width: 42px; height: 42px; place-items: center; border: var(--line); border-radius: 50%; background: var(--yellow); font-weight: 800; }
.service-grid h3 { margin: 35px 0 10px; font: 800 26px var(--display); }
.service-grid p { color: var(--muted); font-size: 14px; }
.statement-mini { background: var(--yellow); border-block: var(--line); }
.statement-mini p { max-width: 1100px; margin: 25px 0; font: 800 clamp(42px,7vw,88px)/1 var(--display); }
.statement-mini em { color: var(--orange); }
.material-story { background: var(--grape); color: var(--white); border-block: var(--line); }
.material-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.material-grid h2 { margin: 25px 0; font: 900 clamp(48px,6vw,82px)/.92 var(--display); }
.material-grid p { color: color-mix(in srgb,var(--white) 75%,transparent); font-size: 18px; }
.material-grid img { width: 100%; height: 580px; object-fit: cover; border: var(--line); }
@media (max-width: 1000px) { .service-grid { grid-template-columns: 1fr 1fr; } .service-grid article:nth-child(2) { border-right: 0; } .service-grid article:nth-child(-n+2) { border-bottom: var(--line); } }
@media (max-width: 760px) { .search-panel { width: calc(100% - 28px); top: calc(100% + 7px); } .search-panel .button { padding-inline: 14px; } .discovery-grid, .material-grid { grid-template-columns: 1fr; } .mood-grid img { height: 210px; } .mood-grid a:first-child img { height: 460px; } .service-grid { grid-template-columns: 1fr; } .service-grid article { min-height: 220px; border-right: 0; border-bottom: var(--line); } .service-grid article:nth-child(2) { border-right: 0; } .material-grid img { height: 440px; } }
@media (max-width: 480px) { .search-panel input { width: 40%; padding-inline: 6px; } .search-panel .button { min-width: 0; padding-inline: 10px; } .mood-grid { grid-template-columns: 1fr; } .mood-grid a:first-child { grid-row: auto; } .mood-grid a:first-child img, .mood-grid img { height: 390px; } }