@font-face {
  font-family: "Aktiv Grotesk";
  src: url("AktivGrotesk-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Aktiv Grotesk";
  src: url("AktivGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "LTC Metropolitan";
  src: url("LTC Metropolitan W00 Italic.ttf") format("truetype");
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #e5dfd4;
  --ink-soft: #b9b2a8;
  --muted: #7e7971;
  --night: #0d0c0b;
  --panel: #12110f;
  --line: rgba(229, 223, 212, 0.18);
  --line-soft: rgba(229, 223, 212, 0.09);
  --header-h: 70px;
  --sans: "Aktiv Grotesk", Arial, Helvetica, sans-serif;
  --display: "LTC Metropolitan", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { background: var(--night); color: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: radial-gradient(circle at 50% -12%, rgba(130, 111, 88, 0.08), transparent 29rem), var(--night);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
body::after {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: 0.12;
  pointer-events: none;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
body.cart-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { color: inherit; font: inherit; }
button { border: 0; background: transparent; cursor: pointer; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
img { display: block; max-width: 100%; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 12, 11, 0.93);
  backdrop-filter: blur(12px);
}
.site-wordmark {
  justify-self: start;
  font-family: var(--display);
  font-size: 26px;
  font-style: italic;
  letter-spacing: -0.05em;
  line-height: 1;
}
.site-context { display: flex; gap: 28px; align-items: center; font-size: 9px; letter-spacing: 0.13em; }
.site-context a:last-child { color: var(--muted); }
.cart-trigger { justify-self: end; font-size: 10px; letter-spacing: 0.1em; }
.shop-page, .product-page { min-height: 100vh; }

.shop-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.6fr);
  gap: 50px;
  align-items: end;
  min-height: 390px;
  padding: calc(var(--header-h) + 70px) 28px 46px;
  border-bottom: 1px solid var(--line);
}
.kicker { display: block; margin-bottom: 24px; color: var(--muted); font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; }
.shop-intro h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(92px, 12vw, 184px);
  font-style: italic;
  font-weight: 400;
  line-height: 0.65;
  letter-spacing: -0.075em;
}
.shop-intro-copy { justify-self: end; max-width: 430px; }
.shop-intro-copy p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 43px);
  font-style: italic;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.shop-intro-copy span { display: block; margin-top: 24px; color: var(--muted); font-size: 8px; letter-spacing: 0.13em; text-transform: uppercase; }

.catalog { padding: 0 14px 86px; }
.catalog-tools {
  position: sticky;
  top: var(--header-h);
  z-index: 25;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 50px;
  margin: 0 -14px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 12, 11, 0.94);
  backdrop-filter: blur(12px);
}
.catalog-count { color: var(--muted); font-size: 9px; letter-spacing: 0.11em; }
.filter-group { display: flex; align-self: stretch; }
.filter-group button { position: relative; min-width: 88px; padding: 0 17px; color: var(--muted); font-size: 9px; letter-spacing: 0.09em; }
.filter-group button::after { position: absolute; right: 17px; bottom: -1px; left: 17px; height: 1px; background: var(--ink); content: ""; transform: scaleX(0); transition: transform 180ms ease; }
.filter-group button:hover, .filter-group button.is-active { color: var(--ink); }
.filter-group button.is-active::after { transform: scaleX(1); }
.sort-select { justify-self: end; min-width: 142px; border: 0; padding: 6px 0; color: var(--ink-soft); background: var(--night); font-size: 9px; letter-spacing: 0.08em; text-align: right; }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 14px; border: 1px solid var(--line); background: var(--line); }
.product-card { min-width: 0; background: var(--night); }
.card-image { position: relative; aspect-ratio: 4 / 5; margin: 0; overflow: hidden; background: #211e1a; }
.card-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.74) contrast(0.96) brightness(0.88); transition: opacity 500ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease; }
.card-image-alt { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .card-image > img:first-child { opacity: 0; }
.product-card:hover .card-image-alt { opacity: 1; transform: scale(1.012); filter: saturate(0.86) contrast(1) brightness(0.94); }
.card-stock { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 6px 7px; color: rgba(244, 238, 226, 0.84); background: rgba(13, 12, 11, 0.56); font-size: 8px; letter-spacing: 0.11em; backdrop-filter: blur(7px); }
.card-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 18px; min-height: 126px; padding: 14px 15px 17px; border-top: 1px solid var(--line-soft); }
.card-copy h2 { grid-column: 1 / -1; margin: 0; font-family: var(--display); font-size: clamp(27px, 2.6vw, 43px); font-style: italic; font-weight: 400; line-height: 0.88; letter-spacing: -0.045em; }
.card-price { font-size: 10px; letter-spacing: 0.05em; }
.card-material, .card-view { align-self: end; color: var(--muted); font-size: 8px; letter-spacing: 0.11em; text-transform: uppercase; }
.card-view { justify-self: end; color: var(--ink-soft); text-transform: lowercase; }
.shop-footer { display: flex; justify-content: space-between; align-items: end; gap: 40px; min-height: 270px; padding: 58px 28px 30px; border-top: 1px solid var(--line); }
.shop-footer p { max-width: 800px; margin: 0; font-family: var(--display); font-size: clamp(42px, 6vw, 90px); font-style: italic; line-height: 0.84; letter-spacing: -0.055em; }
.shop-footer span { color: var(--muted); font-size: 8px; letter-spacing: 0.13em; white-space: nowrap; text-transform: uppercase; }

.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 440px); min-height: 100vh; padding-top: var(--header-h); }
.product-gallery { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; min-height: calc(100vh - var(--header-h)); padding: 2px 0 2px 2px; background: #050504; }
.product-gallery figure { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #211e1a; }
.gallery-main { grid-row: 1 / 3; }
.product-gallery img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.76) contrast(0.97) brightness(0.89); }
.product-gallery figure span { position: absolute; right: 11px; bottom: 10px; padding: 5px 6px; color: var(--ink); background: rgba(13, 12, 11, 0.5); font-size: 8px; letter-spacing: 0.1em; backdrop-filter: blur(5px); }
.product-info { position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 18px 24px 30px; border-left: 1px solid var(--line); background: var(--panel); scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
.product-topline { display: flex; justify-content: space-between; gap: 22px; margin-bottom: 54px; color: var(--muted); font-size: 8px; letter-spacing: 0.1em; }
.product-topline a { color: var(--ink-soft); }
.product-record { margin: 0 0 12px; color: var(--muted); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; }
.product-info h1 { margin: 0; font-family: var(--display); font-size: clamp(47px, 5.2vw, 72px); font-style: italic; font-weight: 400; line-height: 0.82; letter-spacing: -0.06em; }
.product-price-line { display: flex; justify-content: space-between; gap: 22px; align-items: baseline; margin: 26px 0 24px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.product-price-line strong { font-size: 11px; font-weight: 300; letter-spacing: 0.06em; }
.product-price-line span { color: var(--muted); font-size: 8px; letter-spacing: 0.09em; }
.product-description { color: var(--ink-soft); font-family: Georgia, "Times New Roman", serif; font-size: 13px; line-height: 1.52; }
.product-description p { margin: 0 0 12px; }
.purchase-box { margin-top: 29px; }
.selector-label { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 9px; color: var(--muted); font-size: 8px; letter-spacing: 0.11em; }
.selector-label a { text-decoration: underline; text-underline-offset: 3px; }
.size-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.size-options button { min-height: 43px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: 0.1em; text-align: center; }
.size-options button:hover:not(:disabled), .size-options button.is-selected { background: var(--ink); color: var(--night); }
.size-options button:disabled { color: #5a5650; cursor: not-allowed; text-decoration: line-through; }
.purchase-actions { display: grid; grid-template-columns: 92px 1fr; gap: 8px; margin-top: 9px; }
.quantity-control { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--line); }
.quantity-control button, .quantity-control span { display: grid; place-items: center; min-width: 0; font-size: 9px; }
.quantity-control button:first-child { border-right: 1px solid var(--line); }
.quantity-control button:last-child { border-left: 1px solid var(--line); }
.add-button { min-height: 47px; padding: 0 14px; background: var(--ink); color: var(--night); font-size: 9px; letter-spacing: 0.11em; text-align: center; }
.add-button:hover { background: #f3ede1; }
.purchase-note { margin: 10px 0 0; color: var(--muted); font-size: 8px; letter-spacing: 0.08em; }
.product-details { margin-top: 28px; border-top: 1px solid var(--line); }
.product-details details { border-bottom: 1px solid var(--line); }
.product-details summary { position: relative; display: flex; justify-content: space-between; padding: 13px 0; font-size: 9px; letter-spacing: 0.1em; list-style: none; cursor: pointer; }
.product-details summary::-webkit-details-marker { display: none; }
.product-details summary::after { content: "+"; }
.product-details details[open] summary::after { content: "−"; }
.product-details details p { margin: 0; padding: 0 30px 15px 0; color: var(--ink-soft); font-family: Georgia, "Times New Roman", serif; font-size: 12px; line-height: 1.45; }
.product-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; letter-spacing: 0.08em; }
.product-nav a:last-child { text-align: right; }
.mobile-buybar { display: none; }

.cart-backdrop { position: fixed; inset: 0; z-index: 70; visibility: hidden; opacity: 0; background: rgba(0, 0, 0, 0.5); transition: opacity 220ms ease, visibility 220ms ease; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-rows: auto 1fr auto; width: min(470px, 100%); border-left: 1px solid var(--line); background: #151310; box-shadow: -25px 0 70px rgba(0, 0, 0, 0.38); transform: translateX(100%); transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); }
.cart-open .cart-backdrop { visibility: visible; opacity: 1; }
.cart-open .cart-drawer { transform: translateX(0); }
.cart-head { position: relative; padding: 20px; border-bottom: 1px solid var(--line); }
.cart-head h2 { margin: 0; font-family: var(--display); font-size: 31px; font-style: italic; font-weight: 400; letter-spacing: -0.04em; }
.cart-head p { margin: 6px 0 0; color: var(--muted); font-size: 8px; letter-spacing: 0.08em; }
.cart-close { position: absolute; top: 20px; right: 20px; font-size: 18px; }
.cart-lines { overflow-y: auto; padding: 0 20px; }
.cart-empty { padding: 56px 0; color: var(--muted); font-family: var(--display); font-size: 26px; font-style: italic; }
.cart-line { display: grid; grid-template-columns: 82px 1fr auto; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-line img { width: 82px; height: 106px; object-fit: cover; filter: saturate(0.75) brightness(0.9); }
.cart-line > div { display: flex; flex-direction: column; align-items: flex-start; }
.cart-line a { font-family: var(--display); font-size: 19px; font-style: italic; line-height: 1; }
.cart-line span { margin-top: 9px; color: var(--muted); font-size: 8px; line-height: 1.5; letter-spacing: 0.08em; }
.cart-line button { margin-top: auto; color: var(--muted); font-size: 8px; text-decoration: underline; text-underline-offset: 3px; }
.cart-line > strong { font-size: 8px; font-weight: 300; letter-spacing: 0.04em; white-space: nowrap; }
.cart-foot { padding: 20px; border-top: 1px solid var(--line); }
.cart-subtotal { display: flex; justify-content: space-between; padding-bottom: 15px; font-size: 9px; letter-spacing: 0.08em; }
.cart-subtotal strong { font-weight: 300; }
.checkout-button { display: grid; place-items: center; min-height: 48px; background: var(--ink); color: var(--night); font-size: 9px; letter-spacing: 0.11em; }
.checkout-button.is-disabled { pointer-events: none; opacity: 0.3; }
.cart-foot p { margin: 9px 0 0; color: var(--muted); font-size: 8px; letter-spacing: 0.06em; }

@media (max-width: 980px) {
  .site-context a:last-child { display: none; }
  .shop-intro { min-height: 350px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-layout { display: block; }
  .product-gallery { min-height: 74vh; }
  .product-info { position: relative; top: auto; height: auto; padding: 28px 24px 110px; border-top: 1px solid var(--line); border-left: 0; }
  .product-info h1 { font-size: clamp(58px, 10vw, 92px); }
  .mobile-buybar { position: fixed; z-index: 35; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr minmax(190px, 0.5fr); min-height: 59px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(13, 12, 11, 0.96); backdrop-filter: blur(12px); }
  .mobile-buybar span, .mobile-buybar button { display: grid; place-items: center; font-size: 9px; letter-spacing: 0.09em; }
  .mobile-buybar span { justify-content: start; padding-left: 7px; color: var(--ink-soft); }
  .mobile-buybar button { background: var(--ink); color: var(--night); }
}

@media (max-width: 700px) {
  :root { --header-h: 58px; }
  .site-header { grid-template-columns: 1fr auto; padding: 0 12px; }
  .site-wordmark { font-size: 22px; }
  .site-context { display: none; }
  .cart-trigger { grid-column: 2; }
  .shop-intro { grid-template-columns: 1fr; gap: 42px; min-height: 440px; padding: calc(var(--header-h) + 56px) 12px 30px; }
  .shop-intro h1 { font-size: clamp(88px, 33vw, 144px); }
  .shop-intro-copy { justify-self: start; }
  .shop-intro-copy p { font-size: 32px; }
  .catalog { padding: 0 6px 56px; }
  .catalog-tools { grid-template-columns: 1fr auto; margin: 0 -6px; padding: 0 10px; overflow: hidden; }
  .catalog-count { display: none; }
  .filter-group { justify-self: start; overflow-x: auto; }
  .filter-group button { min-width: auto; padding: 0 10px; }
  .filter-group button::after { right: 10px; left: 10px; }
  .sort-select { min-width: 105px; max-width: 105px; }
  .product-grid { grid-template-columns: 1fr; margin-top: 6px; }
  .card-copy { min-height: 116px; }
  .card-copy h2 { font-size: clamp(34px, 10vw, 49px); }
  .product-card:hover .card-image > img:first-child { opacity: 1; }
  .card-image-alt { display: none; }
  .shop-footer { display: block; min-height: 240px; padding: 44px 12px 24px; }
  .shop-footer p { font-size: 46px; }
  .shop-footer span { display: block; margin-top: 30px; }
  .product-gallery { display: flex; gap: 2px; min-height: 0; padding: 2px 0; overflow-x: auto; scroll-snap-type: x mandatory; }
  .product-gallery figure, .gallery-main, .gallery-side { flex: 0 0 88vw; height: 68vh; scroll-snap-align: start; }
  .product-info { padding: 24px 14px 100px; }
  .product-topline { margin-bottom: 40px; }
  .product-info h1 { font-size: clamp(50px, 16vw, 76px); }
  .purchase-actions { grid-template-columns: 86px 1fr; }
  .product-nav { align-items: flex-end; }
  .mobile-buybar { grid-template-columns: minmax(0, 1fr) minmax(150px, 0.7fr); }
  .cart-drawer { width: 100%; }
}

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