/* Actual VAREN product photography; isolated from the rest of the storefront. */
.varen-signature {
  --signature-gold: #d8b77a;
  --signature-ink: #191714;
  background: radial-gradient(ellipse at 90% 15%, #46332255, transparent 55%), #191714;
  color: #f6f0e5;
  padding: clamp(32px, 5vw, 76px) 0;
  overflow: hidden;
  font-family: "Vazirmatn", sans-serif;
}
.varen-signature *, .varen-signature *::before, .varen-signature *::after { box-sizing: border-box; }
.varen-signature [hidden] { display: none !important; }
.signature-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 76px); align-items: center; }
.signature-copy { min-width: 0; }
.signature-eyebrow { display: inline-block; color: var(--signature-gold); font-size: 11px; letter-spacing: .19em; }
.signature-kicker { margin: 28px 0 12px; color: #dfc9a8; font-size: 14px; }
.varen-signature h1 { font-size: clamp(32px, 3.65vw, 58px); line-height: 1.65; letter-spacing: -.035em; margin: 0 0 20px; font-weight: 600; color: #fff7eb; }
.varen-signature h1 em { font-style: normal; color: var(--signature-gold); }
.signature-description { max-width: 480px; font-size: 15px; line-height: 2.15; color: #d1c8ba; margin: 0 0 28px; }
.signature-finishes { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.signature-finishes legend { font-size: 12px; color: #dfc9a8; margin-bottom: 12px; }
.signature-finish-options { display: flex; flex-wrap: wrap; gap: 8px; }
.signature-finish-options button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #685941; background: transparent; color: #eee4d5; font: inherit; font-size: 12px; cursor: pointer; border-radius: 3px; }
.signature-finish-options button.is-active { border-color: var(--signature-gold); background: #d8b77a18; }
.signature-finish-options i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #a99575; flex-shrink: 0; }
.finish-white { background: linear-gradient(135deg, #fff 65%, #b48a43 66%); }
.finish-black-gloss { background: linear-gradient(135deg, #777, #080808 55%, #444); }
.finish-black-matte { background: #252525; }
.finish-colors-a { background: conic-gradient(#af7f82, #d2b99b, #829e89, #7392ac, #af7f82); }
.signature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.signature-actions a { font-size: 13px; text-decoration: none; }
.signature-primary { padding: 15px 20px; background: var(--signature-gold); color: #211b12; display: inline-flex; align-items: center; gap: 24px; border: 1px solid var(--signature-gold); }
.signature-secondary { color: #f2dfbc; border-bottom: 1px solid #a38a63; padding: 8px 0; }
.signature-note { color: #bfb3a1; font-size: 11px; line-height: 1.9; margin: 18px 0 0; }
.signature-wordmark { color: #8c765650; font: 600 clamp(44px, 6vw, 88px)/1.1 Georgia, serif; letter-spacing: .1em; margin-top: 38px; }
.signature-wordmark span { display: block; font: 11px/2 "Vazirmatn", sans-serif; letter-spacing: .55em; }
.signature-gallery { min-width: 0; border: 1px solid #685941; padding: 16px; background: #231e19; }
.signature-gallery-heading { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #e0cba7; padding: 0 2px 12px; }
.signature-figure { margin: 0; }
.signature-image-wrap { height: clamp(360px, 39vw, 570px); background: #ece7df; display: grid; place-items: center; position: relative; }
.signature-image-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; min-height: 0; }
.signature-image-wrap[aria-busy="true"] { opacity: .65; }
.signature-image-message { padding: 24px; color: #493b29; text-align: center; line-height: 2; font-size: 14px; }
.signature-figure figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 13px 2px; color: #f5e6cf; font-size: 13px; }
.signature-photo-label { color: #bfb3a1; font-size: 10px; }
.signature-thumbnails { display: flex; overflow-x: auto; gap: 8px; padding: 4px 2px 10px; scrollbar-color: #a38a63 #231e19; scrollbar-width: thin; }
.signature-thumb { background: transparent; border: 1px solid #685941; color: #ddcbb0; padding: 3px; width: 76px; flex: 0 0 76px; cursor: pointer; font: inherit; }
.signature-thumb img { display: block; width: 68px; height: 64px; object-fit: contain; background: #ece7df; }
.signature-thumb span { display: block; padding: 5px 0 2px; font-size: 11px; white-space: normal; line-height: 1.6; }
.signature-thumb.is-active { border-color: #edc991; background: #d8b77a20; }
.signature-finish-options button:hover, .signature-thumb:hover { border-color: #f8dab0; }
.signature-primary:hover { background: #edcd97; }
.signature-secondary:hover { color: #fff; }
.varen-signature button:focus-visible, .varen-signature a:focus-visible { outline: 2px solid #fff0c9; outline-offset: 4px; }
@media (max-width: 900px) {
  .signature-layout { grid-template-columns: 1fr; gap: 28px; }
  .signature-gallery { order: -1; }
  .signature-copy { max-width: 640px; }
  .signature-wordmark { display: none; }
  .signature-image-wrap { height: clamp(350px, 70vw, 580px); }
}
@media (max-width: 480px) {
  .signature-gallery { padding: 10px; }
  .signature-image-wrap { height: 380px; }
  .signature-actions { gap: 14px; }
  .signature-primary { width: 100%; justify-content: space-between; }
  .signature-description { font-size: 14px; }
  .signature-kicker { margin-top: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .signature-finish-options button, .signature-thumb, .signature-actions a { transition: background .2s, border-color .2s, color .2s; }
}