:root {
  --ivory: #faf8f4;
  --ivory-deep: #f1ede5;
  --paper: #fffdfa;
  --ink: #25211f;
  --muted: #756c64;
  --line: #d9d0c4;
  --brown: #3b150d;
  --brown-soft: #74564a;
  --danger: #7a5046;
  --shadow: 0 12px 28px rgba(58, 29, 17, 0.11);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--ivory);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--ivory); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }
.page-shell { width: min(1440px, 100%); min-height: 100vh; margin: 0 auto; padding: 0 44px; }
.site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 28px 0 24px; border-bottom: 1px solid var(--line); }
.header-balance { grid-column: 1; }
.brand { grid-column: 2; display: inline-flex; align-items: center; width: 168px; min-height: 44px; }
.brand-logo { display: block; width: 100%; height: auto; object-fit: contain; }
.header-meta { grid-column: 3; justify-self: end; display: flex; align-items: center; }
.private-access, .eyebrow { color: var(--brown-soft); font-size: 10px; font-weight: 700; letter-spacing: .18em; line-height: 1.4; }
.language-switcher { display: inline-flex; gap: 8px; align-items: center; color: var(--line); font-size: 12px; }
.language-option { border: 0; padding: 3px 0; color: var(--muted); background: transparent; font-size: 12px; }
.language-option.is-active { color: var(--brown); font-weight: 700; }
.catalog-main { padding: 58px 0 40px; }
.hero { display: grid; max-width: 760px; margin: 0 auto; justify-items: center; gap: 12px; text-align: center; }
.eyebrow { margin: 0; }
h1 { max-width: 650px; margin: 0; color: var(--brown); font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 4.5vw, 56px); font-weight: 500; letter-spacing: -.04em; line-height: 1.03; }
.hero-copy { max-width: 560px; margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.preview-notice { width: max-content; max-width: 100%; margin: 6px 0 0; border: 1px solid var(--line); padding: 7px 10px; color: var(--brown-soft); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.catalog-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 46px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.search-field { position: relative; display: block; width: min(100%, 420px); }
.search-field input { width: 100%; border: 0; padding: 10px 35px 10px 0; color: var(--ink); background: transparent; font-size: 14px; outline: 0; }
.search-field input::placeholder { color: #968b81; }
.search-mark { position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; border: 1.6px solid var(--brown); border-radius: 50%; transform: translateY(-60%); pointer-events: none; }
.search-mark::after { position: absolute; right: -5px; bottom: -3px; width: 6px; border-top: 1.6px solid var(--brown); content: ''; transform: rotate(45deg); transform-origin: left center; }
.result-meta { margin: 0; color: var(--muted); font-size: 12px; text-align: right; }
.catalog-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 42px; padding-top: 34px; }
.category-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.category-button { width: 100%; border: 0; border-left: 1px solid transparent; padding: 10px 12px; color: var(--muted); background: transparent; font-size: 13px; text-align: left; transition: color .16s ease, border-color .16s ease, background-color .16s ease; }
.category-button:hover, .category-button.is-active { border-left-color: var(--brown); color: var(--brown); background: rgba(59, 21, 13, .045); }
.catalog-content { min-width: 0; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 22px; }
.product-card { min-width: 0; border: 0; padding: 0; color: inherit; background: transparent; text-align: left; }
.product-card:hover .product-media, .product-card:focus-visible .product-media { border-color: var(--brown-soft); }
.product-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid transparent; background: linear-gradient(145deg, #f1ece3, #e7ddd0); transition: border-color .2s ease; }
.product-media::after { position: absolute; inset: 12%; border: 1px solid rgba(88, 69, 58, .12); content: ''; pointer-events: none; }
.media-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; color: #8c8178; font-size: 10px; letter-spacing: .14em; line-height: 1.6; text-align: center; text-transform: uppercase; }
.catalog-image { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; background: var(--paper); opacity: 0; transition: opacity .18s ease; }
.product-media.has-image .catalog-image { opacity: 1; }
.product-media.has-image .media-fallback { display: none; }
.product-media.has-image::after { display: none; }
.product-copy { padding-top: 13px; }
.product-sku { display: block; color: var(--brown-soft); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.product-name { display: block; margin-top: 6px; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 500; line-height: 1.18; }
.product-category { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.state-message { border: 1px solid var(--line); padding: 20px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.state-error { border-color: #b7998e; color: var(--danger); }
.loading-row { display: inline-flex; align-items: center; gap: 10px; padding: 30px 0; color: var(--muted); font-size: 13px; }
.loading-line { display: inline-block; width: 26px; border-top: 1px solid var(--brown); animation: loading-line 1s ease-in-out infinite alternate; }
@keyframes loading-line { from { transform: scaleX(.35); transform-origin: left; } to { transform: scaleX(1); transform-origin: right; } }
.load-more { display: block; min-width: 150px; margin: 45px auto 10px; border: 1px solid var(--brown); padding: 12px 22px; color: var(--brown); background: transparent; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; transition: background .15s ease, color .15s ease; }
.load-more:hover { color: var(--paper); background: var(--brown); }
.site-footer { display: flex; gap: 8px; padding: 22px 0 34px; border-top: 1px solid var(--line); color: var(--brown-soft); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.detail-dialog, .image-dialog { width: min(1180px, calc(100% - 32px)); max-height: min(900px, 90dvh); border: 0; padding: 0; color: var(--ink); background: transparent; }
.detail-dialog::backdrop, .image-dialog::backdrop { background: rgba(37, 33, 31, .53); backdrop-filter: blur(4px); }
.detail-shell { position: relative; height: min(900px, 90dvh); max-height: inherit; overflow: hidden; background: var(--ivory); box-shadow: var(--shadow); }
.close-button { position: absolute; z-index: 5; right: 14px; top: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--brown); background: rgba(250, 248, 244, .94); font-size: 29px; font-weight: 300; line-height: 1; }
.detail-loading { min-height: 400px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); height: 100%; min-height: 0; }
.detail-gallery { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; background: var(--ivory-deep); }
.detail-stage { position: relative; min-height: 0; height: 100%; overflow: hidden; background: var(--ivory-deep); }
.detail-gallery-button { display: block; width: 100%; height: 100%; border: 0; padding: 0; overflow: hidden; background: transparent; }
.detail-gallery-button .product-media { height: 100%; border: 0; }
.detail-gallery-button .detail-media { aspect-ratio: auto; }
.detail-image-arrow { position: absolute; z-index: 3; top: 50%; width: 42px; height: 54px; border: 0; color: var(--brown); background: rgba(255, 253, 250, .84); font-family: Georgia, "Times New Roman", serif; font-size: 38px; line-height: .8; transform: translateY(-50%); transition: background .16s ease, color .16s ease; }
.detail-image-arrow:hover { color: var(--paper); background: var(--brown); }
.detail-image-previous { left: 18px; }
.detail-image-next { right: 18px; }
.detail-carousel-meta { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 16px; padding: 10px 18px; border-top: 1px solid rgba(117, 108, 100, .16); color: var(--brown-soft); background: var(--paper); font-size: 11px; letter-spacing: .08em; }
.detail-image-dots { display: inline-flex; align-items: center; gap: 7px; }
.detail-image-dot { width: 7px; height: 7px; border: 1px solid var(--brown-soft); border-radius: 50%; padding: 0; background: transparent; }
.detail-image-dot.is-active { background: var(--brown); border-color: var(--brown); }
.detail-image-count { min-width: 58px; }
.detail-info { min-height: 0; overflow-y: auto; padding: 72px 48px; background: var(--ivory); }
.detail-sku { margin: 0; color: var(--brown-soft); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.detail-name { margin: 12px 0 0; color: var(--brown); font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 4vw, 52px); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; }
.detail-description { margin: 25px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.detail-specs { display: grid; gap: 0; margin: 32px 0 0; border-top: 1px solid var(--line); }
.detail-spec { display: grid; grid-template-columns: 98px 1fr; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.45; }
.detail-spec dt { color: var(--brown-soft); }
.detail-spec dd { margin: 0; text-align: right; }
.image-dialog { width: min(1100px, calc(100% - 24px)); height: min(860px, calc(100dvh - 24px)); background: transparent; }
.image-dialog img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ivory); }
.image-close { position: fixed; right: 24px; top: 24px; background: var(--paper); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

@media (max-width: 860px) {
  .page-shell { padding: 0 22px; }
  .site-header { padding-top: 22px; }
  .brand { width: 136px; }
  .private-access { display: none; }
  .catalog-main { padding-top: 46px; }
  .catalog-controls { display: block; margin-top: 48px; }
  .search-field { width: 100%; }
  .result-meta { margin-top: 10px; text-align: left; }
  .catalog-layout { display: block; padding-top: 20px; }
  .category-nav { flex-direction: row; max-width: calc(100vw - 44px); margin: 0 -1px 25px; padding: 0 1px 8px; overflow-x: auto; scrollbar-width: none; }
  .category-nav::-webkit-scrollbar { display: none; }
  .category-button { flex: 0 0 auto; width: auto; border-bottom: 1px solid transparent; border-left: 0; padding: 9px 11px; white-space: nowrap; }
  .category-button:hover, .category-button.is-active { border-bottom-color: var(--brown); border-left-color: transparent; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .detail-dialog { width: min(720px, calc(100% - 20px)); max-height: min(900px, 94dvh); }
  .detail-shell { height: auto; max-height: min(900px, 94dvh); overflow-y: auto; }
  .detail-layout { display: block; height: auto; }
  .detail-gallery { height: min(62dvh, 620px); min-height: 340px; }
  .detail-info { overflow: visible; padding: 46px 24px 50px; }
}

@media (max-width: 480px) {
  .page-shell { padding: 0 16px; }
  .site-header { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding-bottom: 20px; }
  .brand { width: 126px; }
  .header-meta { gap: 12px; }
  .catalog-main { padding-top: 42px; }
  h1 { font-size: clamp(32px, 10vw, 42px); }
  .hero-copy { font-size: 14px; }
  .product-name { font-size: 16px; }
  .detail-dialog { width: 100%; max-height: 100dvh; margin: 0; }
  .detail-shell { max-height: 100dvh; }
  .detail-gallery { height: min(58dvh, 540px); min-height: 300px; }
  .detail-image-arrow { width: 38px; height: 48px; font-size: 34px; }
  .detail-image-previous { left: 10px; }
  .detail-image-next { right: 10px; }
  .detail-info { padding: 32px 20px 42px; }
}

/* A phone detail view is a single full-screen scrolling surface. The desktop
   dialog deliberately retains its existing two-column, two-pane treatment. */
@media (max-width: 600px) {
  html.detail-open,
  body.detail-open { overflow: hidden; overscroll-behavior: none; }
  body.detail-open { position: fixed; width: 100%; }
  .detail-dialog { position: fixed; inset: 0; box-sizing: border-box; width: 100vw; min-width: 100vw; max-width: none; height: 100dvh; min-height: 100dvh; max-height: none; margin: 0; border: 0; }
  .detail-dialog::backdrop { background: transparent; backdrop-filter: none; }
  .detail-shell { height: 100dvh; min-height: 100dvh; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .detail-layout { display: flex; flex-direction: column; height: auto; min-height: 100%; }
  .detail-gallery { flex: 0 0 auto; height: min(58dvh, 540px); min-height: 300px; }
  .detail-stage { touch-action: pan-y; }
  .detail-info { min-height: 0; overflow: visible; }
  .detail-dialog .close-button { position: fixed; top: 12px; top: calc(12px + env(safe-area-inset-top)); right: 16px; right: calc(16px + env(safe-area-inset-right)); }
}