/* Home page sections. Figma: Website Concepts > home page (desktop 1440, mobile 390). */

.pty-home { background: var(--pty-paper); }
.pty-home + .pty-footer, .pty-home ~ .pty-footer { margin-top: 0; }
.pty-ph { display: block; width: 100%; height: 100%; background: var(--pty-shell); }

/* ---------- Promo arches (marquee) ---------- */
.pty-arches { overflow: hidden; padding: 20px 0; }
.pty-arches__track { display: flex; gap: 14px; width: max-content; animation: pty-marquee 60s linear infinite; } /* Marty 4 Nov: 25% slower than 48s, and it never pauses on hover */
.pty-arches__row { display: flex; gap: 14px; }
.pty-arch {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px;
  width: 201px; aspect-ratio: 3 / 4; flex: none; overflow: hidden; background: var(--pty-white);
  border-radius: 999px 999px 0 0; text-decoration: none;
}
.pty-arch__img { width: 100%; height: 100%; object-fit: cover; }
.pty-arch--text { padding: 60px 40px 40px; background: linear-gradient(180deg, var(--pty-rose) 0%, var(--pty-merlot) 100%); color: var(--pty-paper); text-align: center; }
.pty-arch__kicker { font-size: 9px; font-weight: 500; line-height: 1.4; letter-spacing: var(--pty-label-tracking); text-transform: uppercase; white-space: pre-line; }
.pty-arch__heading { font-family: var(--pty-font-display); font-size: 40px; line-height: 1.1; letter-spacing: var(--pty-display-tracking); text-transform: uppercase; }
.pty-arch__btn { margin-top: 5px; padding: 7px 10px; border: 1px solid currentColor; font-size: 10px; font-weight: 500; line-height: 1.4; }
.pty-arch__logo { display: block; width: 100%; max-width: 130px; height: auto; } /* Hub review 4 Nov: wordmark in the promo arch instead of the sale words */
.pty-arch--logo { background: var(--pty-rose); } /* Section Checks 4 Nov (Marty): flat rose, no gradient, no button */
.pty-arch--text:hover .pty-arch__btn { background: var(--pty-paper); color: var(--pty-ink); border-color: var(--pty-paper); }
@keyframes pty-marquee { to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) { .pty-arches__track { animation: none; } }
@media (min-width: 768px) {
  .pty-arches { padding: 32px 0; }
  .pty-arches__track, .pty-arches__row { gap: 16px; }
  .pty-arch { width: 324px; gap: 24px; }
  .pty-arch--text { padding: 96px 64px 64px; }
  .pty-arch__kicker { font-size: var(--pty-text-sm); line-height: 20px; }
  .pty-arch__heading { font-size: 64px; line-height: 68px; }
  .pty-arch__btn { padding: 12px 16px; font-size: var(--pty-text-md); line-height: 20px; }
  .pty-arch__logo { max-width: 209px; }
  @keyframes pty-marquee { to { transform: translateX(calc(-50% - 8px)); } }
}

/* ---------- Collection cards ---------- */
.pty-collections { padding: 32px 20px 48px; }
.pty-collections__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; max-width: 1376px; margin-inline: auto; }
.pty-collection__link { display: flex; flex-direction: column; align-items: center; gap: 20px; text-decoration: none; text-align: center; }
.pty-collection__media { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: var(--pty-white); }
.pty-collection__media img, .pty-collection__media .pty-ph { width: 100%; height: 100%; object-fit: cover; }
.pty-collection__name { font-family: var(--pty-font-display); font-size: var(--pty-display-sm); line-height: var(--pty-line-display); letter-spacing: var(--pty-display-tracking); }
.pty-collection__count { margin-top: -8px; font-size: var(--pty-text-sm); font-weight: 500; line-height: 20px; letter-spacing: var(--pty-label-tracking); text-transform: uppercase; }
.pty-collection__link:hover .pty-collection__name { color: var(--pty-rose); }
@media (min-width: 768px) { .pty-collections__row { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
@media (min-width: 1024px) {
  .pty-collections { padding: 32px 32px 48px; }
  .pty-collection__name { font-size: 28px; line-height: 32px; }
}

/* ---------- Story banner ---------- */
/* Section Checks 27 Oct: 50/50 split, copy padding 64/64/80/64, kicker 16 + 2px tracking, heading 64/70 in dusty pink, body 20/28, CTA hangs 40 under. Section padding 48 (desktop is always 1440). Height follows the copy; stacks below 1024. */
.pty-story { padding: 0; }
.pty-story__banner { display: grid; color: var(--pty-paper); background: var(--pty-cobalt); overflow: hidden; }
.pty-story--merlot .pty-story__banner { background: var(--pty-merlot); }
.pty-story--velvet .pty-story__banner { background: var(--pty-velvet); }
.pty-story--rose .pty-story__banner { background: var(--pty-rose); color: var(--pty-ink); }
.pty-story--sala .pty-story__banner { background: var(--pty-sala); }
.pty-story--ink .pty-story__banner { background: var(--pty-ink); }
.pty-story__media { position: relative; height: 400px; }
.pty-story__img, .pty-story__media .pty-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; } /* fills whatever height the copy needs; shoes stay in frame, cropping the head is fine */
.pty-story__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 24px 40px; }
.pty-story__kicker { margin: 0; font-size: var(--pty-text-md); font-weight: 500; line-height: 20px; letter-spacing: 2px; text-transform: uppercase; }
.pty-story__heading { margin: 0; font-family: var(--pty-font-display); font-weight: var(--pty-display-weight); font-size: var(--pty-display-xl); line-height: var(--pty-line-display); letter-spacing: -0.5px; color: var(--pty-blush); }
.pty-story--rose .pty-story__heading { color: var(--pty-ink); }
.pty-story__body { margin: 0; font-size: var(--pty-text-md); line-height: 22px; letter-spacing: 0.5px; }
.pty-story__copy .pty-btn { margin-top: 20px; }
.pty-story--rose .pty-btn--paper { background: var(--pty-ink); border-color: var(--pty-ink); color: var(--pty-paper); }
@media (min-width: 1024px) {
  .pty-story { padding: 0 48px; }
  .pty-story__banner { grid-template-columns: 1fr 1fr; max-width: 1344px; margin-inline: auto; min-height: 674px; border-radius: 8px; }
  .pty-story__media { height: auto; min-height: 674px; }
  .pty-story__copy { justify-content: center; padding: 64px clamp(40px, 4.5vw, 64px) 80px; }
  .pty-story__heading { font-size: clamp(2.75rem, 4.6vw, 4rem); line-height: var(--pty-line-display); }
  .pty-story__body { font-size: var(--pty-text-xl); line-height: 26px; letter-spacing: 0; }
}

/* ---------- Section header + lookbook ---------- */
/* Hub review 27 Oct: four fixed slots on the site grid (no marquee); each slot flicks to another look on its own random timer (home.js), hover zooms the photo slightly and pauses every slot. */
.pty-lookbook { padding-top: 64px; }
.pty-lookbook__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; max-width: 1376px; margin: 0 auto; padding: 32px 20px 24px; list-style: none; }
.pty-look { position: relative; }
.pty-look__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--pty-line); border-radius: 8px 8px 0 0; }
.pty-look__img, .pty-look__media .pty-ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--pty-ease), opacity 400ms var(--pty-ease); }
.pty-look__img--out { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pty-look:hover .pty-look__img { transform: scale(1.04); }
.pty-look__handle { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 4px 8px; background: var(--pty-white); border-radius: 2px; font-size: 12px; line-height: 20px; box-shadow: 0 1px 4px rgba(28, 25, 23, 0.10); }
.pty-look__strip { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--pty-white); color: var(--pty-ink); text-decoration: none; border-radius: 0 0 8px 8px; }
.pty-look__strip::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.pty-look__thumb { display: none; width: 44px; height: 44px; flex: none; border-radius: 4px; overflow: hidden; background: var(--pty-paper); } /* no room for the thumb in the 2-up phone grid */
.pty-look__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pty-look__copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pty-look__name { font-family: var(--pty-font-display); font-weight: var(--pty-display-weight); font-size: 16px; line-height: 20px; letter-spacing: var(--pty-display-tracking); } /* wraps in the 2-up phone grid */
.pty-look__price { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--pty-stone); }
.pty-look__strip .pty-icon { width: 16px; height: 16px; }
.pty-look:hover .pty-look__name { color: var(--pty-rose); }
@media (prefers-reduced-motion: reduce) { .pty-look__img { transition: none; } .pty-look:hover .pty-look__img { transform: none; } }
@media (min-width: 768px) {
  .pty-lookbook__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 32px 0; } /* Section Checks 3 Nov: cards sit on the same 32px gutter as the section heading (the 1376 cap already gives 32px at 1440) */
  .pty-look__handle { top: 16px; left: 16px; font-size: var(--pty-text-sm); }
  .pty-look__strip { gap: 12px; padding: 12px; }
  .pty-look__thumb { display: block; width: 48px; height: 48px; }
  .pty-look__price { font-size: var(--pty-text-sm); line-height: 18px; }
  .pty-look__name { font-size: 20px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}