/* ==========================================================================
   PRODUCTS page — composed hero, product-mix chart, four product groups
   ========================================================================== */

/* ---------- Hero ---------- */
.p-hero__l2 { padding-left: 8vw; }
.p-hero__media {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  margin-top: clamp(48px, 7vw, 104px); align-items: start;
}
.p-hero__media figure { margin: 0; }
.p-hero__a { grid-column: 1 / span 3; grid-row: 1; aspect-ratio: 3 / 4; margin-top: 22%; }
.p-hero__b { grid-column: 4 / span 6; grid-row: 1; aspect-ratio: 4 / 3; }
.p-hero__b img { height: 112%; margin-top: -6%; }
.p-hero__c { grid-column: 10 / span 3; grid-row: 1; aspect-ratio: 3 / 4; margin-top: 44%; }
.p-hero__cap { grid-column: 4 / span 6; grid-row: 2; margin-top: 14px; color: var(--muted); }
.p-hero__a img { object-position: 50% 45%; }
.p-hero__c img { object-position: 40% 40%; }

/* ---------- Product mix chart ---------- */
.mix { margin: 0; }
.mix + .mix { margin-top: clamp(72px, 8vw, 128px); }
.mix__cap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mix__band { display: flex; height: clamp(64px, 7.4vw, 124px); }
.mix__seg {
  display: block; flex: 0 0 calc(var(--v) * 1%); height: 100%;
  background-color: var(--ink);
  /* a faint twill so the band reads as cloth, not a UI bar */
  background-image: repeating-linear-gradient(118deg, rgba(246,244,239,.07) 0 1px, transparent 1px 6px);
  box-shadow: inset -3px 0 0 var(--bg);
  transform-origin: left center;
}
.mix__seg:last-child { box-shadow: none; }
.mix__seg--m { background-color: var(--taupe); }
.mix__seg--c { background-color: var(--madder); }
.mix__seg--sw { background-color: var(--taupe); }

/* tape-measure scale */
.mix__scale {
  position: relative; height: 34px; margin-top: 10px; color: var(--muted);
  background-image:
    linear-gradient(90deg, var(--rule-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 25% 12px, 5% 6px;
  background-repeat: repeat-x;
}
.mix__scale::after { content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 12px; background: var(--rule-strong); }
.mix__scale span {
  position: absolute; top: 16px; left: calc(var(--p) * 1%); transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; line-height: 1.5;
}
.mix__scale span:first-child { transform: none; }
.mix__scale span:last-child { transform: translateX(-100%); }

.mix__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--rule-strong); }
.mix__item { padding: 22px clamp(16px, 2vw, 32px) 0; border-left: 1px solid var(--rule); }
.mix__item:first-child { padding-left: 0; border-left: 0; }
.mix__item dt { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.mix__key { display: block; width: 10px; height: 10px; flex: none; background: var(--ink); }
.mix__key--m { background: var(--taupe); }
.mix__key--c { background: var(--madder); }
.mix__key--sw { background: var(--taupe); }
.mix__legend--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mix__v {
  display: flex; align-items: baseline; margin-top: 18px;
  font-family: var(--f-display); font-size: clamp(64px, 7vw, 132px); line-height: .9; letter-spacing: -.03em; font-variant-numeric: lining-nums;
}
.mix__v small { font-size: .42em; letter-spacing: 0; margin-left: .06em; }
:lang(tr) .mix__v small { order: -1; margin: 0 .06em 0 0; }


/* ---------- Working terms: mono label + serif value + hairlines ---------- */
.terms { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(72px, 8vw, 128px); }
.terms__label { grid-column: 1 / span 3; padding-top: 22px; }
.terms__list { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.terms__item { padding: 22px clamp(14px, 1.6vw, 28px) 0; border-left: 1px solid var(--rule); }
.terms__item:first-child { padding-left: 0; border-left: 0; }
.terms__v { margin-top: 14px; font-family: var(--f-display); font-size: clamp(22px, 1.8vw, 30px); line-height: 1.2; letter-spacing: -.01em; }
.terms__v span { display: block; }
.terms__v span + span { margin-top: 6px; }

/* ---------- Sticky group index ---------- */
.groups { position: relative; }
.gindex {
  position: sticky; top: 0; z-index: 60; height: 56px;
  background: rgba(246, 244, 239, .88);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  --rule: rgba(20, 24, 38, .12);
  transition: transform .6s var(--ease);
}
/* when the bar is stuck and the site header slides back in, step down beneath it */
body:has(.site-header.is-solid:not(.is-hidden)) .gindex.is-stuck { transform: translateY(var(--header-h)); }
.gindex__inner { display: flex; align-items: center; gap: clamp(20px, 3vw, 56px); height: 100%; }
.gindex__label { color: var(--taupe); white-space: nowrap; }
.gindex__list { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); }
.gindex__link { position: relative; display: inline-block; padding: 8px 0; white-space: nowrap; opacity: .55; transition: opacity .3s; }
.gindex__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--madder); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.gindex__link:hover, .gindex__link.is-active { opacity: 1; }
.gindex__link.is-active::after { transform: scaleX(1); }
.gindex__bar { position: relative; margin-left: auto; width: clamp(120px, 14vw, 240px); height: 1px; background: rgba(20, 24, 38, .16); flex: none; }
.gindex__bar i { position: absolute; inset: 0; background: var(--madder); transform-origin: left; transform: scaleX(0); }

/* ---------- Product groups: shared ---------- */
.group__name { font-size: clamp(64px, 10vw, 188px); line-height: .9; }
.group figure { margin: 0; }
.group figcaption { margin-top: 12px; }
.gspec__k { margin-bottom: 16px; }
.gspec__tags { display: flex; flex-wrap: wrap; gap: 14px 12px; padding: 4px; margin: -4px; }
.gspec__tags .tag { font-size: 10.5px; }
.gspec__feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--rule); }
.gspec__feat--1 { grid-template-columns: 1fr; }
.gspec__feat li { font-family: var(--f-display); font-size: clamp(21px, 1.6vw, 27px); line-height: 1.2; padding: 13px 0 12px; border-bottom: 1px solid var(--rule); }
.gspec__lines { border-top: 1px solid var(--rule); }
.gspec__lines li { display: flex; align-items: baseline; gap: 14px; font-size: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.gspec__lines li::before { content: ""; width: 14px; height: 1px; background: var(--madder); flex: none; transform: translateY(-4px); }

/* ---------- Sample rail: real samples on the fitting mannequin, contact-sheet style.
   Every photo is shown at a fixed height no taller than its native pixels (the
   smallest is 482 px tall), so nothing is ever upscaled. ---------- */
.rail { --card: var(--linen); margin-top: clamp(40px, 5vw, 72px); }
.on-linen .rail { --card: var(--paper); }
.rail__k { margin-bottom: 18px; }
.rail__list { --rail-h: clamp(240px, 27vw, 420px); display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(12px, 1.4vw, 20px); }
.sample { flex: none; }
.sample figure { margin: 0; width: min-content; padding: 10px 10px 12px; background: var(--card); border: 1px solid var(--rule); }
.sample img { display: block; height: var(--rail-h); width: auto; max-width: none; }
.sample__cap { display: block; margin-top: 11px; font-size: 10.5px; letter-spacing: .08em; line-height: 1.45; color: var(--muted); }
.sample__brand { display: block; margin-top: 3px; color: var(--madder); }

/* ---------- Jersey: head across, sample rail, three spec columns ---------- */
.gj__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-bottom: clamp(48px, 6vw, 96px); }
.gj__eyebrow { grid-column: 1 / -1; margin-bottom: clamp(16px, 2vw, 28px); }
.gj__name { grid-column: 1 / span 6; }
.gj__desc { grid-column: 7 / span 6; padding-bottom: .4em; max-width: 30ch; justify-self: end; }
.gspec--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(64px, 8vw, 128px); }
.gspec__col { border-top: 1px solid var(--rule-strong); padding-top: 20px; }
.gspec--3 .gspec__k, .gspec--woven .gspec__k { margin-bottom: 20px; }

/* ---------- Heavy Weight: text left, finishing-floor photo right, sample rail below ---------- */
.gh { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.gh__text { grid-column: 1 / span 5; align-self: stretch; }
.gh__name { font-size: clamp(60px, 7.6vw, 140px); margin: clamp(16px, 2vw, 28px) 0 clamp(24px, 2.4vw, 36px); }
.gh__desc { max-width: 40ch; margin-bottom: 28px; }
.gh__spec { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); margin-top: clamp(32px, 3.4vw, 48px); }
.gh__photo { grid-column: 7 / span 6; margin: 0; }
.gh__photo .media { aspect-ratio: 4 / 3; }
.gh__photo img { object-position: 50% 62%; }
.gh__photo figcaption { margin-top: 12px; }
.gh__rail { grid-column: 1 / -1; }

/* ---------- Soft Woven: head with the name set right, sample rail, specs ---------- */
.gw__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(48px, 6vw, 96px); }
.gw__head .label { padding-bottom: 1.2em; }
.gw__name { font-size: clamp(64px, 11.5vw, 216px); text-align: right; margin-left: auto; }
.gspec--woven { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(64px, 8vw, 128px); }
.gspec--woven .gspec__col--lead { grid-column: 1 / span 5; }
.gspec--woven .gspec__col--lead .lede { margin-bottom: 28px; max-width: 26ch; }
.gspec--woven .gspec__col:nth-child(2) { grid-column: 7 / span 3; }
.gspec--woven .gspec__col:nth-child(3) { grid-column: 10 / span 3; }

/* ---------- Activewear: sample rail left, text right ---------- */
.ga { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.ga__images { grid-column: 1 / span 7; margin-top: 0; }
.ga__text { grid-column: 8 / span 5; padding-left: clamp(0px, 3vw, 56px); padding-top: clamp(0px, 4vw, 64px); }
.ga__name { font-size: clamp(56px, 6.4vw, 120px); margin: clamp(16px, 2vw, 28px) 0 clamp(24px, 2.4vw, 36px); }
.ga__desc { max-width: 40ch; margin-bottom: 28px; }
.ga__spec { margin-top: clamp(36px, 4vw, 56px); }
.ga__spec .gspec__lines { margin-bottom: 0; }
.ga__spec .gspec__feat { margin-bottom: 36px; }

/* ---------- CTA ---------- */
.p-cta > .wrap { position: relative; z-index: 2; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .gindex__label { display: none; }
  .gj__name, .gj__desc { grid-column: 1 / -1; }
  .gj__desc { justify-self: start; margin-top: 24px; max-width: 36ch; }
  .gh__text, .gh__photo { grid-column: 1 / -1; }
  .gh__photo { margin-top: 56px; max-width: 720px; }
  .terms__label { grid-column: 1 / -1; padding-top: 0; margin-bottom: 18px; }
  .terms__list { grid-column: 1 / -1; }
  .gh__spec { max-width: 720px; }
  .gspec--woven .gspec__col--lead { grid-column: 1 / -1; margin-bottom: 48px; }
  .gspec--woven .gspec__col:nth-child(2) { grid-column: 1 / span 6; }
  .gspec--woven .gspec__col:nth-child(3) { grid-column: 7 / span 6; }
  .ga__text { grid-column: 1 / -1; grid-row: 1; padding: 0; margin-bottom: 48px; }
  .ga__images { grid-column: 1 / -1; grid-row: 2; }
  .ga__spec { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .ga__spec > .gspec__k:nth-of-type(1), .ga__spec > .gspec__feat { grid-column: 1; }
  .ga__spec > .gspec__k:nth-of-type(2), .ga__spec > .gspec__lines { grid-column: 2; }
  .ga__spec > .gspec__k:nth-of-type(1) { grid-row: 1; }
  .ga__spec > .gspec__feat { grid-row: 2; grid-template-columns: 1fr; margin-bottom: 0; }
  .ga__spec > .gspec__k:nth-of-type(2) { grid-row: 1; }
  .ga__spec > .gspec__lines { grid-row: 2; align-self: start; }
}

@media (max-width: 720px) {
  .p-hero__l2 { padding-left: 0; }
  .p-hero__media { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
  .p-hero__b { grid-column: 1 / -1; grid-row: 1; }
  .p-hero__cap { grid-column: 1 / -1; grid-row: 2; }
  .p-hero__a { grid-column: 1; grid-row: 3; margin-top: 28px; }
  .p-hero__c { grid-column: 2; grid-row: 3; margin-top: 72px; }

  .mix__band { height: 56px; }
  .mix__legend { grid-template-columns: 1fr; border-top: 0; }
  .mix__item, .mix__item:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0 14px; border-left: 0; border-top: 1px solid var(--rule); }
  .mix__item:first-child { border-top-color: var(--rule-strong); }
  .mix__v { margin-top: 0; font-size: 56px; }

  .terms__list { grid-template-columns: 1fr; border-top: 0; }
  .terms__item, .terms__item:first-child { padding: 16px 0 14px; border-left: 0; border-top: 1px solid var(--rule); }
  .terms__item:first-child { border-top-color: var(--rule-strong); }
  .terms__v { margin-top: 8px; font-size: 24px; }

  /* the sample rail becomes a swipeable strip running to the screen edges */
  .rail__list {
    --rail-h: 300px; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px;
  }
  .rail__list::-webkit-scrollbar { display: none; }
  .sample { scroll-snap-align: start; }

  .gindex { height: 48px; }
  .gindex__inner { padding-inline: 0; }
  .gindex__list { gap: 22px; overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); height: 100%; }
  .gindex__list::-webkit-scrollbar { display: none; }
  .gindex__bar { display: none; }

  .group__name { font-size: clamp(54px, 16vw, 84px); }
  .gspec--3 { grid-template-columns: 1fr; row-gap: 40px; }
  .gspec__feat li { font-size: 21px; }

  .gh__name { font-size: clamp(54px, 16vw, 84px); }
  .gh__spec { grid-template-columns: 1fr; row-gap: 36px; }

  .gw__head { display: block; }
  .gw__name { text-align: left; margin-top: 18px; }
  .gspec--woven .gspec__col:nth-child(2), .gspec--woven .gspec__col:nth-child(3) { grid-column: 1 / -1; }
  .gspec--woven .gspec__col:nth-child(3) { margin-top: 40px; }

  .ga__name { font-size: clamp(50px, 14.5vw, 84px); }
  .ga__spec { display: block; }
  .ga__spec .gspec__feat { margin-bottom: 36px; }
}