@font-face {
  font-family: 'Chathura';
  src: url('../assets/fonts/chathura/chathura-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #ffffff;
  color: #6b6b6b;
  font-family: 'Chathura', sans-serif;
  font-weight: 400;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a, button {
  font-family: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid #6b6b6b;
  outline-offset: 3px;
}

.page {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 40px 64px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.page > main {
  flex: 1 0 auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 185px;
  position: relative;
  z-index: 20;
}

.wordmark {
  margin: 0;
  font-size: 26px;
  /* System Helvetica Thin (not self-hosted: Helvetica isn't freely
     licensable). Present on macOS/iOS; elsewhere falls back to the
     next sans-serif at weight 100, or its regular weight if it has no thin. */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 100;
}

.wordmark-link {
  color: inherit;
  text-decoration: none;
}

.nav-trigger-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-trigger {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.nav-trigger-img {
  display: inline-block;
  width: auto;
  height: 64px;
}

.dropdown-nav {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 14px 20px;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background-color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out), visibility 0s linear 0.18s;
}

.dropdown-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s var(--ease-out), visibility 0s linear 0s;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 26px;
  text-decoration: none;
}

.nav-link::before {
  content: "";
  width: 6px;
  height: 8px;
  background-color: #6b6b6b;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

@media (min-width: 769px) {
  .nav-link:hover::before {
    transform: rotate(90deg);
  }

  /* index.html only (.home-trigger), desktop only -- everywhere else
     (this page on mobile, every other page's .header-trigger dropdown)
     keeps the default vertical column. */
  .home-trigger .dropdown-nav {
    flex-direction: row;
    left: 50%;
    transform: translateX(-50%);
  }
}

.home-main {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.nav-trigger-wrap.home-trigger {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nav-trigger-wrap.header-trigger {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.header-trigger .dropdown-nav {
  right: 0;
  transform-origin: top right;
}

.message-wrap {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.page-message {
  max-width: 460px;
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #a3a3a3;
  text-align: center;
  line-height: 1.5;
}

.back-nav {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 80px;
}

/* Used by archive.html, availability.html and the 4 archive category pages
   (tops.html x3, headwear.html) -- about.html/contact.html/404.html
   place "back" differently (inside .message-wrap, next to the page
   message) since they share that layout instead of a header-based one.
   The nav-trigger sits at the header's right (see
   .nav-trigger-wrap.header-trigger); "back" takes the matching left
   spot in that same row instead of its own row further down the page. */
.back-nav.back-nav--header {
  top: 50%;
  left: 0;
  right: auto;
  transform: translateY(-50%);
  margin-top: 0;
}

.back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  cursor: pointer;
  text-decoration: none;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #a3a3a3;
  transition: color 0.15s ease;
}

.back-link:hover {
  color: #6b6b6b;
}

.back-link:active {
  transform: scale(0.95);
}

.products-main {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category-main {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.person-select {
  position: relative;
  width: 100%;
  max-width: 260px;
}

.collection-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 0 24px;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #6b6b6b;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.collection-label.is-active {
  opacity: 1;
}

.person-figure {
  position: relative;
  width: 100%;
}

.person-outline,
.person-fill {
  display: block;
  width: 100%;
  height: auto;
}

.person-fill {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.person-fill.is-active {
  opacity: 1;
}

.person-fill--legs-slice {
  clip-path: inset(0 0 10% 0);
}

.person-fill--feet-slice {
  clip-path: inset(90% 0 0 0);
}

.person-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  touch-action: none;
}

.person-hit.is-unavailable {
  cursor: default;
}

.person-hit--front-head {
  clip-path: polygon(49.54% 2.40%, 51.55% 2.53%, 54.16% 3.63%, 55.58% 5.21%, 56.26% 7.33%, 55.67% 13.77%, 54.41% 15.82%, 52.06% 16.92%, 47.02% 16.71%, 45.42% 15.68%, 44.33% 13.77%, 43.74% 8.70%, 44.25% 5.68%, 46.26% 3.49%, 48.03% 2.67%, 49.45% 2.47%);
}

.person-hit--front-torso {
  clip-path: polygon(55.42% 15.82%, 55.25% 17.81%, 56.68% 19.11%, 66.25% 19.66%, 71.45% 27.74%, 73.80% 33.22%, 73.80% 36.51%, 72.54% 39.04%, 60.62% 46.64%, 60.37% 44.04%, 66.33% 36.51%, 66.83% 35.07%, 66.41% 33.63%, 64.23% 31.10%, 61.80% 31.10%, 60.87% 32.19%, 58.44% 43.77%, 59.32% 46.71%, 40.43% 46.71%, 41.39% 43.29%, 38.29% 31.30%, 37.36% 30.89%, 35.43% 31.23%, 33.33% 33.84%, 33.08% 35.55%, 39.71% 44.04%, 39.38% 46.51%, 27.12% 38.49%, 25.94% 35.62%, 26.11% 32.88%, 29.30% 26.30%, 34.01% 19.32%, 43.58% 18.84%, 44.75% 17.60%, 44.67% 15.96%, 47.36% 17.53%, 52.23% 17.60%, 55.42% 15.89%);
}

.person-hit--front-legs {
  clip-path: polygon(59.32% 46.71%, 65.24% 66.51%, 68.60% 90.00%, 60.29% 90.00%, 52.23% 64.32%, 51.05% 63.15%, 49.71% 63.01%, 47.94% 64.38%, 39.90% 90.00%, 31.73% 90.00%, 34.76% 66.85%, 40.43% 46.71%);
}

.person-hit--front-feet {
  clip-path: polygon(68.60% 90.00%, 69.19% 94.11%, 73.64% 97.47%, 73.89% 98.29%, 72.88% 99.18%, 63.98% 99.18%, 62.97% 98.56%, 60.29% 90.00%, 39.90% 90.00%, 37.20% 98.63%, 36.36% 99.11%, 26.36% 99.04%, 25.52% 98.36%, 25.61% 97.47%, 30.31% 94.86%, 31.23% 93.77%, 31.73% 90.00%);
}

.person-hit--behind-head-left {
  clip-path: polygon(41.81% 2.67%, 45.59% 3.08%, 43.91% 4.66%, 42.91% 7.12%, 43.91% 16.78%, 43.83% 17.67%, 42.91% 18.29%, 40.39% 17.81%, 39.13% 16.85%, 37.95% 15.27%, 36.36% 7.53%, 36.78% 5.48%, 37.78% 4.18%, 39.71% 3.08%, 41.73% 2.74%);
}

.person-hit--behind-head-right {
  clip-path: polygon(57.26% 2.81%, 59.70% 3.08%, 61.88% 4.04%, 63.31% 5.62%, 63.81% 7.33%, 62.13% 15.68%, 60.29% 17.74%, 59.28% 18.29%, 57.85% 18.49%, 56.84% 18.42%, 56.09% 17.67%, 57.09% 7.26%, 56.51% 5.21%, 54.74% 3.15%, 57.18% 2.88%);
}

.person-hit--behind-torso-left {
  clip-path: polygon(29.72% 19.11%, 33.08% 19.11%, 28.21% 26.58%, 26.28% 30.41%, 25.19% 33.08%, 25.10% 35.75%, 25.78% 37.74%, 26.62% 39.11%, 28.30% 40.41%, 33.33% 43.56%, 32.58% 46.03%, 21.41% 41.16%, 19.31% 39.11%, 18.39% 37.33%, 18.05% 35.89%, 18.22% 33.56%, 19.31% 30.14%, 20.99% 26.64%, 23.76% 22.12%, 24.85% 20.62%, 26.03% 19.73%, 27.79% 19.18%, 29.64% 19.18%);
}

.person-hit--behind-torso-right {
  clip-path: polygon(66.92% 19.25%, 72.71% 19.38%, 74.22% 19.86%, 75.40% 20.68%, 77.25% 23.29%, 80.02% 28.08%, 81.61% 31.85%, 82.28% 34.59%, 82.20% 36.64%, 81.61% 38.36%, 80.35% 40.14%, 79.01% 41.30%, 77.67% 42.05%, 67.67% 46.30%, 66.83% 43.63%, 72.38% 40.21%, 73.47% 39.18%, 74.56% 36.99%, 74.81% 34.38%, 74.22% 31.64%, 72.80% 28.49%, 69.86% 23.49%, 67.00% 19.32%);
}

.person-hit--behind-torso-left-2 {
  clip-path: polygon(36.44% 31.58%, 37.20% 31.58%, 37.53% 31.71%, 37.95% 32.05%, 38.12% 32.40%, 40.47% 42.95%, 40.47% 43.77%, 34.84% 36.78%, 33.92% 35.41%, 33.92% 34.66%, 34.34% 33.77%, 35.68% 32.05%, 36.10% 31.71%, 36.36% 31.64%);
}

.person-hit--behind-torso-right-2 {
  clip-path: polygon(62.80% 31.51%, 63.22% 31.51%, 63.81% 31.71%, 64.99% 33.08%, 65.91% 34.45%, 65.91% 35.48%, 65.58% 36.16%, 59.87% 43.36%, 59.45% 44.18%, 59.28% 43.22%, 61.71% 32.33%, 62.22% 31.71%, 62.72% 31.58%);
}

.person-hit--behind-legs-left {
  clip-path: polygon(34.01% 44.04%, 39.38% 47.47%, 33.84% 67.19%, 30.87% 90.00%, 24.92% 90.00%, 27.12% 68.49%, 28.21% 63.08%, 34.01% 44.11%);
}

.person-hit--behind-legs-right {
  clip-path: polygon(66.08% 44.11%, 72.88% 67.88%, 75.17% 90.00%, 69.45% 90.00%, 65.99% 66.03%, 60.54% 47.74%, 65.99% 44.18%);
}

.person-hit--behind-feet-left {
  clip-path: polygon(30.87% 90.00%, 30.39% 93.63%, 25.02% 96.92%, 25.02% 99.04%, 16.12% 99.04%, 16.12% 98.08%, 22.50% 94.93%, 24.69% 92.26%, 24.92% 90.00%);
}

.person-hit--behind-feet-right {
  clip-path: polygon(75.17% 90.00%, 75.40% 92.19%, 76.57% 94.18%, 84.05% 98.22%, 83.96% 99.18%, 74.31% 99.18%, 74.39% 97.12%, 70.03% 93.97%, 69.45% 90.00%);
}

/* Entities 1 and 2 (see entity-mapping note below): all 4 categories are
   permanently unavailable (gray, no click action) -- these two pairs
   aren't assigned to a real collection yet, unlike entity 3
   (obvious-reference) and entity 4 (outdoor-office) above. */
.person-hit--entity2-head-left {
  clip-path: polygon(34.51% 2.81%, 37.78% 3.22%, 36.27% 4.73%, 35.52% 6.85%, 37.11% 18.36%, 33.50% 18.22%, 32.41% 17.67%, 30.90% 16.16%, 30.06% 14.52%, 28.88% 8.08%, 29.05% 6.10%, 29.97% 4.59%, 32.33% 3.15%, 34.42% 2.88%);
}

.person-hit--entity2-head-right {
  clip-path: polygon(64.82% 3.08%, 67.34% 3.29%, 69.61% 4.32%, 70.95% 5.96%, 71.28% 8.29%, 70.11% 14.79%, 69.10% 16.64%, 68.01% 17.74%, 66.58% 18.49%, 63.06% 18.56%, 64.65% 7.19%, 63.98% 5.14%, 62.38% 3.49%, 64.74% 3.15%);
}

.person-hit--entity2-torso-left {
  clip-path: polygon(24.52% 19.18%, 25.52% 19.18%, 23.93% 20.48%, 20.24% 26.30%, 18.30% 30.41%, 17.21% 34.45%, 17.63% 37.74%, 19.23% 40.27%, 21.58% 42.12%, 25.19% 43.70%, 24.52% 46.44%, 16.79% 43.63%, 13.77% 41.92%, 11.84% 39.93%, 10.58% 36.78%, 10.75% 33.97%, 12.17% 29.73%, 17.04% 21.16%, 18.39% 19.93%, 19.82% 19.38%, 24.43% 19.25%);
}

.person-hit--entity2-torso-right {
  clip-path: polygon(74.98% 19.45%, 80.10% 19.59%, 82.54% 20.75%, 85.73% 25.55%, 87.66% 29.25%, 89.59% 35.21%, 89.25% 38.36%, 87.32% 41.37%, 83.04% 44.04%, 75.65% 46.71%, 74.98% 43.97%, 79.09% 42.12%, 81.11% 40.48%, 82.87% 37.47%, 83.12% 34.45%, 82.28% 31.23%, 80.35% 26.92%, 76.74% 21.10%, 75.06% 19.52%);
}

.person-hit--entity2-legs-left {
  clip-path: polygon(26.03% 44.04%, 32.33% 46.85%, 26.28% 68.36%, 24.06% 90.00%, 17.75% 90.00%, 19.90% 68.29%, 26.03% 44.11%);
}

.person-hit--entity2-legs-right {
  clip-path: polygon(74.14% 44.32%, 80.27% 68.56%, 82.45% 90.00%, 76.03% 90.00%, 73.89% 68.63%, 67.84% 47.12%, 74.06% 44.38%);
}

.person-hit--entity2-feet-left {
  clip-path: polygon(24.06% 90.00%, 23.85% 92.12%, 22.08% 94.32%, 15.45% 97.60%, 15.03% 99.04%, 8.90% 99.04%, 8.90% 98.08%, 15.20% 95.00%, 17.55% 92.05%, 17.75% 90.00%);
}

.person-hit--entity2-feet-right {
  clip-path: polygon(82.45% 90.00%, 82.70% 92.53%, 84.89% 95.14%, 91.27% 98.29%, 91.18% 99.25%, 85.05% 99.25%, 84.97% 97.95%, 78.09% 94.45%, 76.24% 92.05%, 76.03% 90.00%);
}

.person-hit--entity1-head-left {
  clip-path: polygon(26.45% 3.08%, 30.23% 3.42%, 28.88% 4.66%, 28.04% 6.58%, 29.55% 18.49%, 26.53% 18.42%, 25.44% 18.01%, 23.68% 16.44%, 22.67% 14.38%, 21.49% 7.81%, 21.75% 6.23%, 22.42% 5.07%, 23.68% 3.97%, 26.36% 3.15%);
}

.person-hit--entity1-head-right {
  clip-path: polygon(71.62% 3.36%, 74.31% 3.42%, 76.41% 4.18%, 78.00% 5.68%, 78.67% 7.74%, 77.16% 15.62%, 75.65% 17.60%, 73.55% 18.70%, 70.53% 18.63%, 72.12% 6.92%, 71.28% 4.93%, 70.03% 3.63%, 71.54% 3.42%);
}

.person-hit--entity1-torso-left {
  clip-path: polygon(16.46% 19.32%, 18.05% 19.32%, 16.20% 20.96%, 12.17% 27.74%, 10.08% 33.15%, 9.74% 36.92%, 10.58% 39.45%, 12.34% 41.71%, 14.19% 43.08%, 17.97% 44.86%, 17.38% 47.12%, 10.50% 44.52%, 6.63% 42.26%, 4.37% 39.66%, 3.53% 37.12%, 3.69% 34.38%, 5.37% 29.45%, 10.16% 21.10%, 12.17% 19.66%, 16.37% 19.38%);
}

.person-hit--entity1-torso-right {
  clip-path: polygon(82.12% 19.59%, 86.90% 19.66%, 88.50% 20.14%, 89.84% 21.16%, 94.54% 29.18%, 96.64% 35.62%, 96.31% 38.77%, 95.55% 40.34%, 94.12% 42.05%, 89.92% 44.66%, 82.79% 47.40%, 82.20% 45.14%, 86.40% 43.08%, 89.00% 40.62%, 90.26% 37.95%, 90.43% 35.07%, 89.34% 31.10%, 87.32% 26.71%, 83.96% 21.23%, 82.20% 19.59%);
}

.person-hit--entity1-legs-left {
  clip-path: polygon(18.81% 45.14%, 24.35% 47.12%, 19.06% 68.22%, 16.90% 90.00%, 10.74% 90.00%, 13.01% 67.95%, 18.81% 45.21%);
}

.person-hit--entity1-legs-right {
  clip-path: polygon(81.28% 45.41%, 87.15% 68.22%, 89.40% 90.00%, 83.25% 90.00%, 81.11% 68.49%, 75.82% 47.40%, 81.19% 45.48%);
}

.person-hit--entity1-feet-left {
  clip-path: polygon(16.90% 90.00%, 16.71% 91.92%, 14.78% 94.38%, 8.23% 97.60%, 7.89% 99.11%, 1.93% 99.11%, 1.93% 98.15%, 8.23% 95.07%, 10.50% 92.40%, 10.74% 90.00%);
}

.person-hit--entity1-feet-right {
  clip-path: polygon(89.40% 90.00%, 89.67% 92.60%, 91.77% 95.14%, 98.40% 98.42%, 98.07% 99.32%, 92.36% 99.25%, 91.94% 97.81%, 85.31% 94.52%, 83.46% 92.12%, 83.25% 90.00%);
}

/* availability.html: every product in a grid -- 4 across on desktop (cards
   stay 160px wide, the extra room goes into the gaps), one per row on
   mobile. Tops aligned (align-items:start so a taller card never stretches
   its row). */
.availability-main {
  width: 100%;
}

.availability-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 216px);
  justify-content: center;
  gap: 56px;
  align-items: start;
}

.availability-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  text-align: center;
}

.availability-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: contain;
}

.availability-card-img.is-faded {
  opacity: 0.4;
}

.availability-card-name {
  font-size: 20px;
  letter-spacing: 0.04em;
}

.availability-card-price {
  font-size: 26px;
}

.availability-card-status {
  display: inline-block;
  cursor: pointer;
}

.availability-card:hover .availability-card-status {
  background: #6b6b6b;
  color: #ffffff;
}

@media (min-width: 769px) {
  .availability-grid {
    grid-template-columns: repeat(4, minmax(0, 160px));
    justify-content: space-between;
    gap: 56px 40px;
  }
}

.collection-name-label {
  margin: 0 0 16px;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #a3a3a3;
  text-align: center;
  /* Relative positioning (not margin) so this shifts visually without
     changing the flow space it occupies -- the lupa/carousel below it
     stay exactly where they were. -84.5px centers it in the gap between
     .site-header and .detail-select at desktop's 185px header margin
     (measured via getBoundingClientRect); the mobile override below
     re-centers it for that breakpoint's smaller 134px header margin. */
  position: relative;
  top: -84.5px;
}

.detail-select {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.detail-trigger {
  border: none;
  background: none;
  padding: 4px;
  color: #a3a3a3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, transform 0.12s ease-out;
}

.detail-trigger:hover {
  color: #6b6b6b;
}

.detail-trigger:active {
  transform: scale(0.95);
}

.detail-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.detail-dropdown {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  width: 480px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  z-index: 12;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out), visibility 0s linear 0.18s;
}

.detail-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s var(--ease-out), visibility 0s linear 0s;
}

/* Only when a product has more than one detail image (currently just
   headwear's two): cap the box so opening it shows the first photo plus
   a peek of the next, scrolling internally for the rest, instead of
   growing tall enough to fit every image at once. Single-image products
   are untouched -- overflow-y only, so the border-radius corner-clip
   from overflow-x:hidden (inherited from .detail-dropdown) still holds. */
.detail-dropdown:has(.detail-image:not(:only-child)) {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.detail-dropdown:has(.detail-image:not(:only-child))::-webkit-scrollbar {
  width: 4px;
}

.detail-dropdown:has(.detail-image:not(:only-child))::-webkit-scrollbar-thumb {
  background: #e5e5e5;
  border-radius: 2px;
}

.detail-image {
  display: block;
  width: 100%;
  border-radius: 8px;
}

/* When a product has more than one detail image (see products.js's
   detailImages), scale each down instead of stacking full-width images
   -- the dropdown's own width (.detail-dropdown, shared by every
   category page) is unchanged either way. Single-image products
   (:only-child) keep the full-width rule above. */
.detail-image:not(:only-child) {
  width: 65%;
}

.detail-missing {
  margin: 0;
  padding: 20px 0;
  font-size: 18px;
  color: #a3a3a3;
  text-align: center;
}

.carousel {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 260px;
  margin: 0 auto 44px;
}

.carousel-track {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* pan-y keeps vertical page-scroll native and leaves horizontal drag to
     the swipe handler in setupCarousel() (js/products.js); pinch-zoom
     re-enables native pinch-to-zoom over the product photo, which pan-y
     alone was blocking. */
  touch-action: pan-y pinch-zoom;
}

.carousel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 0.35s var(--ease-in-out), opacity 0.35s var(--ease-in-out);
  pointer-events: none;
}

.carousel-item.is-dragging {
  transition: none;
}

.carousel-item img {
  display: block;
  width: 200px;
  height: 220px;
  object-fit: contain;
}

/* Landscape photo (Exercise 2, 900x629): wider box so the jacket comes out
   as tall as Exercise 1's (1134x996 in 200px -> 176px; 176/629*900 = 252px). */
.carousel-item--wide img {
  width: 252px;
}

.carousel-item--active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
}

.carousel-item--next {
  transform: translate(calc(-50% + 130px), calc(-50% - 30px)) scale(0.72);
  opacity: 0.4;
  z-index: 2;
}

.carousel-item--prev {
  transform: translate(calc(-50% - 130px), calc(-50% - 30px)) scale(0.72);
  opacity: 0.4;
  z-index: 2;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 4;
  transition: transform 0.12s ease-out;
}

.carousel-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel-arrow--prev {
  left: 0;
}

.carousel-arrow--next {
  right: 0;
}

.carousel-arrow-icon {
  display: block;
  width: 10px;
  height: 14px;
  background: #a3a3a3;
  transition: background-color 0.15s ease;
}

.carousel-arrow:hover .carousel-arrow-icon {
  background: #6b6b6b;
}

.carousel-arrow--prev .carousel-arrow-icon {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.carousel-arrow--next .carousel-arrow-icon {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.price-row {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 26px;
  margin-bottom: 18px;
}

.buy-btn {
  border: 1px solid #6b6b6b;
  background: transparent;
  padding: 8px 26px;
  font-size: 20px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease-out;
}

.buy-btn:hover {
  background: #6b6b6b;
  color: #ffffff;
}

.buy-btn:active {
  transform: scale(0.97);
}

.buy-btn-label {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.buy-btn-label.is-hidden {
  opacity: 0;
}

.size-select {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.more-btn {
  border: none;
  background: none;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #a3a3a3;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.15s ease, transform 0.12s ease-out;
}

.more-btn:hover {
  color: #6b6b6b;
}

.more-btn:active {
  transform: scale(0.95);
}

.size-dropdown {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  list-style: none;
  padding: 14px 0;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 100px;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out), visibility 0s linear 0.18s;
}

.size-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s var(--ease-out), visibility 0s linear 0s;
}

.size-option {
  border: none;
  background: none;
  padding: 8px 20px;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.15s ease, transform 0.12s ease-out;
}

.size-option:hover {
  background: #f5f5f5;
}

.size-option:active {
  transform: scale(0.97);
}

.size-option.is-selected {
  color: #ffffff;
  background: #6b6b6b;
}

.info-select {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
}

.info-dropdown {
  position: absolute;
  bottom: 100%;
  margin-bottom: 8px;
  width: 280px;
  /* Grows with content up to this, then scrolls internally instead of
     pushing the box taller and overlapping whatever sits above it (back
     link, route label) -- this was already possible with just 3 short
     paragraphs on a short mobile viewport, and became visible once a
     product's specs grew past a few lines. */
  max-height: 320px;
  padding: 18px 20px;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out), visibility 0s linear 0.18s;
}

.info-dropdown::-webkit-scrollbar {
  width: 4px;
}

.info-dropdown::-webkit-scrollbar-thumb {
  background: #e5e5e5;
  border-radius: 2px;
}

.info-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s var(--ease-out), visibility 0s linear 0s;
}

.info-title {
  margin: 0 0 8px;
  font-size: 26px;
  color: #6b6b6b;
}

/* One-off rich title treatment for a product's name, opted into via
   PRODUCTS[].nameParts (see products.js) instead of plain textContent.
   Currently used only by obvious-reference/headwear's single product:
   "obvious" stacked above "reference", each in its own typeface. These
   font-family names aren't self-hosted (no licensed files for them yet —
   see CLAUDE.md); until real files are added under assets/fonts/ and an
   @font-face is declared, both fall back to the sans-serif/serif stack. */
.name-part {
  display: block;
  /* Chathura (used for every other product's plain-text .info-title, e.g.
     "Exercise 1") has an unusually small glyph-to-em ratio: at 26px its
     actual cap-height measures ~10.5px. The fallback fonts below render
     far larger letters at the same declared size (~19px cap-height at
     26px, measured via Range.getBoundingClientRect()) -- 14px here is the
     scaled-down size that matches Chathura's real on-screen letter size,
     not just its font-size number. Re-check this once real licensed font
     files replace the fallback stack (see CLAUDE.md) -- their metrics
     will likely differ from the generic sans-serif/serif used today. */
  font-size: 14px;
}

.name-part--obvious {
  font-family: "Arial Rounded MT Bold", "Arial Rounded MT", sans-serif;
}

.name-part--reference {
  font-family: "Minion Variable Concept", Georgia, serif;
  font-weight: 700;
  font-style: italic;
  /* 6.5% of the font's own em -- a slight increase over the font's normal
     (untracked) spacing, not the much wider tracking used before. */
  letter-spacing: 0.065em;
}

.info-description {
  font-size: 20px;
  line-height: 1.5;
  color: #a3a3a3;
}

.info-description p {
  margin: 0 0 12px;
}

.info-description > *:last-child {
  margin-bottom: 0;
}

.info-description strong {
  color: #6b6b6b;
}

.info-list {
  margin: 0 0 12px;
  padding-left: 0;
  list-style-position: inside;
}

.info-list li {
  margin-bottom: 4px;
}

.info-list li::marker {
  font-size: 10px;
  color: #a3a3a3;
}

.info-list li:last-child {
  margin-bottom: 0;
}

.site-footer {
  margin-top: 96px;
  padding-top: 24px;
  text-align: center;
  border-top: 1px solid #e5e5e5;
}

.footer-text {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #a3a3a3;
}

@media (max-width: 768px) {
  .page {
    padding: 24px 20px 24px;
  }

  .message-wrap {
    padding: 0 20px;
  }

  .detail-dropdown {
    width: 360px;
  }

  .detail-dropdown:has(.detail-image:not(:only-child)) {
    max-height: 213px;
  }

  .site-header {
    margin-bottom: 134px;
  }

  /* 15% smaller (260px * 0.85 = 221px), mobile only. Every hit-zone's
     clip-path polygon (css/style.css .person-hit--*) is in percentage
     units relative to this container's own box, and the artwork
     (.person-outline/.person-fill) is width:100% of it too -- shrinking
     .person-select's max-width scales the visual artwork and the
     invisible hit-zones together in lockstep, so alignment is preserved
     exactly with no separate hit-zone changes needed. */
  .person-select {
    max-width: 221px;
  }

  .collection-name-label {
    top: -59px;
  }

  .back-nav {
    margin-top: 55px;
  }

  .nav-trigger-img {
    width: auto;
    height: 44px;
  }

  .carousel {
    height: 190px;
  }

  .carousel-track {
    width: 190px;
    height: 190px;
  }

  .carousel-item img {
    width: 150px;
    height: 170px;
  }

  .carousel-item--wide img {
    width: 189px;
  }

  .carousel-item--next {
    transform: translate(calc(-50% + 85px), calc(-50% - 20px)) scale(0.68);
  }

  .carousel-item--prev {
    transform: translate(calc(-50% - 85px), calc(-50% - 20px)) scale(0.68);
  }

  .carousel-arrow {
    display: none;
  }

  .site-footer {
    margin-top: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .buy-btn {
    transition: none;
  }

  .dropdown-nav {
    transition: none;
  }

  .size-dropdown {
    transition: none;
  }

  .nav-link::before {
    transition: none;
  }

  .carousel-item {
    transition: none;
  }

  .buy-btn-label {
    transition: none;
  }

  .info-dropdown {
    transition: none;
  }

  .detail-dropdown {
    transition: none;
  }

  .person-fill {
    transition: none;
  }
}