:root {
  --color-ink: #000000;
  --color-silver-foam: #cacaca;
  --color-canvas-white: #ffffff;
  --color-graphite-outline: #404040;
  --color-light-gray: #f1f1f1;
  --color-muted-ash: #616161;
  --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-akkstdrg: 'AkkStdRg', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-frg: 'FRg', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-heading: clamp(22px, 2.1vw, 28px);
  --text-heading-lg: clamp(30px, 4vw, 46px);
  --text-display: clamp(42px, 7vw, 84px);
  --leading-tight: 0.96;
  --leading-heading: 1.08;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-48: 48px;
  --section-gap: clamp(64px, 9vw, 116px);
  --page-max-width: 1240px;
  --radius-md: 4px;
  --radius-images: 16px;
  --radius-navigation: 18px;
  --radius-buttons: 9999px;
  --shadow-soft: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lift: 0 18px 42px rgba(0,0,0,0.14);
  --shadow-ring: 0 0 0 3px var(--color-canvas-white), 0 0 0 5px var(--color-ink);
  --transition: 0.24s ease;
}

* { box-sizing: border-box; }
html { background: var(--color-silver-foam); color: var(--color-ink); font-family: var(--font-ui-sans-serif); line-height: 1.5; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 20% 0, rgba(255,255,255,0.5), transparent 34rem), var(--color-silver-foam); color: var(--color-ink); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, select, input { font: inherit; }
button, a, select, input, summary, .gallery-thumb, .swatch, .size-option { transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition); }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }
::selection { background: var(--color-ink); color: var(--color-canvas-white); }

@keyframes page-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.page-shell { animation: page-in 0.42s ease both; padding: clamp(36px, 5vw, 64px) 0 var(--section-gap); }
.nav-shell, .page-shell, .footer-shell { width: min(100% - var(--spacing-48), var(--page-max-width)); margin: 0 auto; }
.skip-link { position: absolute; left: var(--spacing-12); top: var(--spacing-12); z-index: 40; transform: translateY(-170%); border: 1px solid var(--color-ink); border-radius: var(--radius-buttons); background: var(--color-canvas-white); font-family: var(--font-frg); font-size: 10px; letter-spacing: 0.08em; padding: var(--spacing-12) var(--spacing-16); text-transform: uppercase; box-shadow: var(--shadow-soft); }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(0,0,0,0.16); background: rgba(202,202,202,0.88); backdrop-filter: blur(16px); }
.nav-shell { display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 76px; gap: var(--spacing-20); }
.brand { font-family: var(--font-akkstdrg); font-size: var(--text-heading); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.primary-nav, .utility-nav { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }
.primary-nav { justify-content: center; }
.utility-nav { justify-content: flex-end; }
.nav-link, .utility-link { position: relative; border-radius: var(--radius-navigation); font-family: var(--font-frg); font-size: 10px; letter-spacing: 0.075em; line-height: 1; padding: 10px 14px; text-transform: uppercase; }
.nav-link:hover, .utility-link:hover { background: rgba(255,255,255,0.52); transform: translateY(-1px); }
.nav-link[aria-current="page"], .utility-link[aria-current="page"] { background: var(--color-canvas-white); box-shadow: inset 0 -2px 0 var(--color-ink); }
.nav-link[aria-current="page"]::after { position: absolute; right: 14px; bottom: 4px; left: 14px; height: 2px; background: var(--color-ink); content: ""; }

.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr); gap: 0; align-items: stretch; margin-bottom: var(--section-gap); }
.hero-media { min-height: clamp(420px, 56vw, 720px); overflow: hidden; border-radius: var(--radius-images) 0 0 var(--radius-images); background: var(--color-light-gray); box-shadow: var(--shadow-soft); }
.hero-media img, .hero-image { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.12) contrast(1.06); transform: scale(1.01); }
.hero-copy, .panel { display: grid; align-content: center; gap: var(--spacing-20); border: 1px solid rgba(0,0,0,0.2); background: linear-gradient(135deg, var(--color-canvas-white), var(--color-light-gray)); padding: clamp(32px, 5vw, 64px); box-shadow: var(--shadow-lift); }
.hero-copy { position: relative; z-index: 1; margin: clamp(28px, 5vw, 60px) 0 clamp(28px, 5vw, 60px) -48px; border-radius: var(--radius-images); }
.hero-copy::before { width: 56px; height: 8px; background: var(--color-ink); content: ""; }
.hero-copy h1, .display-heading { margin: 0; font-family: var(--font-akkstdrg); font-size: var(--text-display); font-weight: 400; letter-spacing: -0.055em; line-height: var(--leading-tight); }
.eyebrow, .kicker, .selector-label { margin: 0; font-family: var(--font-frg); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; }
.intro-text { margin: 0; max-width: 42rem; color: var(--color-graphite-outline); font-size: 16px; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--spacing-12); align-items: center; }

.button, .pill-button, .ghost-button, .square-button, .size-option { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--color-ink); border-radius: var(--radius-buttons); font-family: var(--font-frg); font-size: 10px; letter-spacing: 0.075em; line-height: 1; padding: 10px 28px; text-transform: uppercase; }
.button--dark { background: var(--color-ink); color: var(--color-canvas-white); box-shadow: var(--shadow-soft); }
.button--ghost, .button--pill, .pill-button { background: var(--color-light-gray); color: var(--color-ink); }
.button:hover, .pill-button:hover, .ghost-button:hover, .square-button:hover, .size-option:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.button--dark:hover { background: var(--color-graphite-outline); }
.button--ghost:hover, .button--pill:hover, .pill-button:hover, .pill-button.is-active, .pill-button[aria-pressed="true"] { background: var(--color-canvas-white); }
.ghost-button { justify-self: start; background: transparent; padding: 10px 18px; }

.section { margin-top: var(--section-gap); }
.section-head, .listing-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-24); margin-bottom: var(--spacing-32); }
.section-head h2, .page-heading { margin: 0; font-family: var(--font-akkstdrg); font-size: var(--text-heading-lg); font-weight: 400; letter-spacing: -0.045em; line-height: var(--leading-heading); }
.listing-header { border-bottom: 1px solid rgba(0,0,0,0.22); padding-bottom: var(--spacing-20); }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--spacing-12); margin: 0 0 var(--spacing-36); }
.sub-category-hero { display: grid; gap: var(--spacing-24); margin-bottom: var(--spacing-36); }
.hero-image { max-height: 430px; border-radius: var(--radius-images); box-shadow: var(--shadow-soft); }

.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-24); }
.category-tile { position: relative; display: grid; min-height: 280px; align-items: end; overflow: hidden; border: 1px solid rgba(0,0,0,0.28); border-radius: var(--radius-images); background: var(--color-light-gray); padding: var(--spacing-28); box-shadow: var(--shadow-soft); isolation: isolate; }
.category-tile::before, .category-tile::after { position: absolute; inset: 0; content: ""; transition: transform var(--transition), opacity var(--transition); }
.category-tile::before { z-index: -2; background: center / cover no-repeat url("https://picsum.photos/seed/freitag-cat-1/720/520"); filter: grayscale(0.2) contrast(1.05); }
.category-tile:nth-child(2)::before { background-image: url("https://picsum.photos/seed/freitag-cat-2/720/520"); }
.category-tile:nth-child(3)::before { background-image: url("https://picsum.photos/seed/freitag-cat-3/720/520"); }
.category-tile::after { z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.68)); }
.category-tile h3 { margin: 0; max-width: 9ch; color: var(--color-canvas-white); font-family: var(--font-akkstdrg); font-size: clamp(30px, 4vw, 48px); font-weight: 400; letter-spacing: -0.05em; line-height: 0.94; text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
.category-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.category-tile:hover::before { transform: scale(1.05); }

.sort-control { position: relative; min-width: 230px; }
.sort-control select, input[type="email"], input[type="text"], input[type="search"] { width: 100%; min-height: 44px; appearance: none; border: 1px solid var(--color-ink); border-radius: var(--radius-buttons); background: var(--color-canvas-white); color: var(--color-ink); padding: 0 var(--spacing-48) 0 var(--spacing-24); }
.sort-control select { cursor: pointer; font-family: var(--font-frg); font-size: 10px; letter-spacing: 0.075em; text-transform: uppercase; }
.sort-control::after { position: absolute; top: 50%; right: var(--spacing-20); width: var(--spacing-8); height: var(--spacing-8); border-right: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); content: ""; pointer-events: none; transform: translateY(-70%) rotate(45deg); }
input[type="email"] { min-height: 48px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); }
input[type="email"]:focus-visible, .sort-control select:focus-visible { box-shadow: var(--shadow-ring); }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-48) var(--spacing-24); }
.product-card { display: grid; gap: var(--spacing-12); align-content: start; border-radius: var(--radius-images); background: rgba(255,255,255,0.38); padding: var(--spacing-12); box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); background: rgba(255,255,255,0.72); }
.product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius-images) - 4px); background: var(--color-light-gray); filter: grayscale(0.08) contrast(1.04); transition: transform var(--transition), filter var(--transition); }
.product-card:hover img { transform: scale(1.03); filter: grayscale(0) contrast(1.08); }
.product-card h2, .product-card__name { margin: var(--spacing-4) 0 0; font-family: var(--font-akkstdrg); font-size: var(--text-heading); font-weight: 400; letter-spacing: -0.035em; line-height: var(--leading-heading); }
.product-price, .product-card__price { margin: 0; font-family: var(--font-akkstdrg); font-size: 16px; letter-spacing: 0.01em; line-height: 1.15; }
.product-card__meta { color: var(--color-muted-ash); font-family: var(--font-frg); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.pagination { display: flex; flex-wrap: wrap; gap: var(--spacing-8); justify-content: center; margin-top: var(--spacing-48); }
.square-button { min-width: 44px; min-height: 44px; border-radius: var(--radius-md); background: var(--color-canvas-white); padding: 0 var(--spacing-12); }
.square-button[aria-current="page"] { background: var(--color-ink); color: var(--color-canvas-white); }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-10, 10px); color: var(--color-muted-ash); font-size: 12px; letter-spacing: 0.02em; margin-bottom: var(--spacing-28); }
.breadcrumbs a { position: relative; color: var(--color-ink); }
.breadcrumbs a::after { display: inline-block; margin-left: var(--spacing-10, 10px); color: var(--color-muted-ash); content: "›"; }
.breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.product-gallery { display: grid; gap: var(--spacing-16); position: sticky; top: 104px; }
.gallery-main img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-images); box-shadow: var(--shadow-soft); }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-12); }
.gallery-thumb { cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; padding: var(--spacing-4); opacity: 0.72; }
.gallery-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); }
.gallery-thumb:hover { opacity: 1; transform: translateY(-2px); background: var(--color-canvas-white); }
.gallery-thumb.is-active, .gallery-thumb[aria-selected="true"] { opacity: 1; border-color: var(--color-ink); box-shadow: var(--shadow-ring); }

.product-info { display: grid; gap: var(--spacing-24); align-content: start; border-radius: var(--radius-images); background: rgba(255,255,255,0.42); padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-soft); }
.product-info h1 { margin: 0; font-family: var(--font-akkstdrg); font-size: var(--text-display); font-weight: 400; letter-spacing: -0.055em; line-height: var(--leading-tight); }
.selector-group { display: grid; gap: var(--spacing-12); }
.swatches { display: flex; flex-wrap: wrap; gap: var(--spacing-12); align-items: center; }
.swatch { width: 40px; height: 40px; border: 2px solid var(--color-canvas-white); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.28); cursor: pointer; }
.swatch:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 0 0 1px var(--color-ink), var(--shadow-soft); }
.swatch.is-active, .swatch[aria-pressed="true"], .swatch:focus-visible { box-shadow: var(--shadow-ring); }
.size-selector { display: flex; flex-wrap: wrap; gap: var(--spacing-8); align-items: center; }
.size-option { min-width: 48px; min-height: 46px; border-radius: var(--radius-md); background: var(--color-canvas-white); padding: 0 var(--spacing-16); }
.size-option.is-active, .size-option[aria-pressed="true"] { background: var(--color-ink); color: var(--color-canvas-white); transform: translateY(1px); box-shadow: inset 0 2px 8px rgba(255,255,255,0.16); }

.accordion { display: grid; gap: var(--spacing-12); }
.accordion details { overflow: hidden; border: 1px solid rgba(0,0,0,0.28); border-radius: var(--radius-md); background: var(--color-canvas-white); box-shadow: 0 1px 0 rgba(0,0,0,0.04); transition: box-shadow var(--transition), background-color var(--transition); }
.accordion details[open] { box-shadow: var(--shadow-soft); }
.accordion summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-family: var(--font-frg); font-size: 10px; letter-spacing: 0.075em; list-style: none; padding: var(--spacing-16) var(--spacing-20); text-transform: uppercase; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { width: 9px; height: 9px; border-right: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); content: ""; transform: rotate(45deg); transition: transform var(--transition); }
.accordion details[open] summary::after { transform: rotate(225deg); }
.accordion summary:hover { background: var(--color-light-gray); }
.accordion details > *:not(summary) { margin: 0; padding: 0 var(--spacing-20) var(--spacing-20); color: var(--color-graphite-outline); }

.site-footer { border-top: 1px solid rgba(0,0,0,0.28); background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent), var(--color-silver-foam); }
.footer-shell { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--spacing-24); padding: clamp(36px, 5vw, 56px) 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--spacing-20); justify-content: flex-end; margin: 0; }
.footer-link { position: relative; font-size: 11px; letter-spacing: 0.04em; line-height: 1.15; text-transform: uppercase; }
a.footer-link::after { position: absolute; right: 0; bottom: -5px; left: 0; height: 1px; background: var(--color-ink); content: ""; transform: scaleX(0); transform-origin: right; transition: transform var(--transition); }
a.footer-link:hover::after, a.footer-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }

@media (max-width: 920px) {
  .nav-shell { grid-template-columns: 1fr; align-items: start; padding: var(--spacing-16) 0; }
  .primary-nav, .utility-nav { justify-content: flex-start; }
  .hero, .detail-layout { grid-template-columns: 1fr; }
  .hero-media { border-radius: var(--radius-images); min-height: 360px; }
  .hero-copy { margin: -48px var(--spacing-20) 0; }
  .product-gallery { position: static; }
  .category-grid, .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-shell, .section-head, .listing-header { grid-template-columns: 1fr; display: grid; justify-items: start; }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .nav-shell, .page-shell, .footer-shell { width: min(100% - var(--spacing-24), var(--page-max-width)); }
  .primary-nav, .utility-nav, .filter-bar { gap: var(--spacing-8); }
  .nav-link, .utility-link { padding: 9px 10px; }
  .hero-copy, .panel, .product-info { padding: var(--spacing-24); }
  .category-grid, .product-grid { grid-template-columns: 1fr; }
  .category-tile { min-height: 220px; }
  .sort-control { width: 100%; }
  .gallery-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .button, .pill-button, .ghost-button { width: 100%; }
}