/* POLYMATH — merchandising sections: featured collection, collection list, promo grid, shop the look. */

/* ---------- Featured collection ---------- */
.pm-head__aside { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pm-fc__grid { grid-auto-flow: dense; }
.pm-fc__feature { position: relative; grid-column: span 2; grid-row: span 2; display: grid; align-content: end; min-height: 26rem; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--radius-img); overflow: hidden; color: #fff; isolation: isolate; text-decoration: none; }
.pm-fc__feature .pm-media { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.pm-fc__feature .pm-media img { transition: transform 1.6s var(--ease); }
.pm-fc__feature:hover .pm-media img { transform: scale(1.05); }
.pm-fc__feature::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .45) 40%, transparent 72%); }
.pm-fc__feature .h2 { color: #fff; }
.pm-fc__feature:has(.pm-cl__link:focus-visible) { outline: 2px solid var(--fg); outline-offset: 4px; }
.pm-fc__feature .eyebrow { color: rgb(255 255 255 / .9); }
.pm-fc__feature-cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; font-weight: 600; font-size: var(--t-small); }
.pm-fc__feature-cta svg { transition: transform .4s var(--ease); }
.pm-fc__feature:hover .pm-fc__feature-cta svg { transform: translateX(6px); }
@media (max-width: 749px) { .pm-fc__feature { grid-column: 1 / -1; grid-row: span 1; min-height: 22rem; } }
.pm-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
/* Phones: tabs stay on one line and scroll sideways instead of wrapping into a second row. */
@media (max-width: 749px) { .pm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } .pm-tabs::-webkit-scrollbar { display: none; } .pm-tabs > * { flex: none; } .pm-tabs--center { justify-content: flex-start; } }
.pm-tabs--center { justify-content: safe center; }
.pm-tab { min-height: 2.75rem; padding: .4rem 1.25rem; border-radius: 999px; border: 1.5px solid var(--line); font-size: var(--t-small); font-weight: 600; transition: background-color .3s, color .3s, border-color .3s; }
.pm-tab:hover { border-color: var(--fg); }
.pm-tab:has(svg) { display: inline-flex; align-items: center; gap: .5rem; padding-left: .9rem; }
.pm-tab svg { width: 1.35rem; height: 1.35rem; flex: none; transition: transform .5s var(--ease-back); }
.pm-tab:hover svg, .pm-tab[aria-selected='true'] svg { transform: rotate(-12deg) scale(1.15); }
.pm-tab[aria-selected='true'] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.js-motion .pm-tabpanel:not([hidden]) { animation: pm-drop .6s var(--ease); }
.pm-fc__foot { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Collection list ---------- */
.pm-cl { display: grid; gap: var(--gap); grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr)); }
@media (min-width: 990px) { .pm-cl { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
.pm-cl__item { position: relative; display: grid; gap: .9rem; text-decoration: none; min-width: 0; }
.pm-cl__media { position: relative; aspect-ratio: var(--ratio, 3 / 4); border-radius: var(--radius-img); overflow: hidden; background: var(--surface); }
.pm-cl__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.pm-cl__item:hover .pm-cl__media img { transform: scale(1.06); }
.pm-cl__title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; font-size: var(--t-h4); overflow-wrap: anywhere; hyphens: auto; }
.pm-cl__title svg { width: 1.1rem; height: 1.1rem; transition: transform .45s var(--ease); flex: none; }
.pm-cl__item:hover .pm-cl__title svg { transform: translateX(5px); }
.pm-cl__count { font-size: var(--t-small); color: var(--fg-muted); }
/* Tiles: the title sits on the image. */
.pm-cl[data-layout='tiles'] .pm-cl__item { color: #fff; }
.pm-cl[data-layout='tiles'] .pm-cl__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .86) 0%, rgb(0 0 0 / .6) 35%, rgb(0 0 0 / .15) 70%, transparent 85%); }
.pm-cl[data-layout='tiles'] .pm-cl__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(1rem, 2vw, 1.5rem); display: grid; gap: .2rem; }
.pm-cl[data-layout='tiles'] .pm-cl__count { color: rgb(255 255 255 / .92); }
.pm-cl[data-layout='tiles'] .pm-cl__title { text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
/* Circles */
.pm-cl[data-layout='circles'] { --ratio: 1; text-align: center; }
.pm-cl[data-layout='circles'] .pm-cl__media { border-radius: 50%; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.pm-cl[data-layout='circles'] .pm-cl__item:hover .pm-cl__media { transform: translateY(-6px); box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent); }
.pm-cl[data-layout='circles'] .pm-cl__title { justify-content: center; font-size: var(--t-h5); }
.pm-cl[data-layout='circles'] .pm-cl__title svg { display: none; }
@media (max-width: 749px) { .pm-cl[data-layout='circles'] { grid-auto-flow: column; grid-auto-columns: 32%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: none; } .pm-cl[data-layout='circles'] > * { scroll-snap-align: start; } }
/* Expanding panels: the hovered or focused panel grows. */
.pm-cl__caption { font-size: var(--t-small); color: var(--fg-muted); }
.pm-cl[data-layout='bubbles'] { --ratio: 1; text-align: center; row-gap: 2rem; }
.pm-cl[data-layout='bubbles'] .pm-cl__media { border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; background: var(--surface); box-shadow: 0 0 0 .55rem var(--surface); margin: .55rem; transition: border-radius 1.2s var(--ease), transform .7s var(--ease-back); }
.pm-cl[data-layout='bubbles'] .pm-cl__item:nth-child(3n+2) .pm-cl__media { border-radius: 44% 56% 40% 60% / 58% 44% 56% 42%; }
.pm-cl[data-layout='bubbles'] .pm-cl__item:nth-child(3n) .pm-cl__media { border-radius: 52% 48% 62% 38% / 42% 52% 48% 58%; }
.pm-cl[data-layout='bubbles'] .pm-cl__item:hover .pm-cl__media { border-radius: 50%; transform: translateY(-8px) rotate(-3deg); }
.pm-cl[data-layout='bubbles'] .pm-cl__item:hover .pm-cl__media img { transform: scale(1.08) rotate(3deg); }
.pm-cl[data-layout='bubbles'] .pm-cl__body { justify-items: center; gap: .35rem; }
.pm-cl[data-layout='bubbles'] .pm-cl__title { justify-content: center; font-size: var(--t-h4); }
.pm-cl[data-layout='bubbles'] .pm-cl__title svg { display: none; }
.pm-cl[data-layout='bubbles'] .pm-cl__caption { display: inline-block; padding: .2rem .75rem; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; }
.js-motion .pm-cl[data-layout='bubbles'] .pm-cl__media { animation: pm-bob 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s); }
.js-motion .pm-cl[data-layout='bubbles'] .pm-cl__item:nth-child(2n) .pm-cl__media { animation-duration: 7.5s; animation-delay: -2s; }
.js-motion .pm-cl[data-layout='bubbles'] .pm-cl__item:hover .pm-cl__media { animation-play-state: paused; }
@keyframes pm-bob { 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .pm-cl[data-layout='bubbles'] .pm-cl__media { animation: none !important; } }

.pm-cl[data-layout='arches'] { --ratio: 3 / 4; row-gap: 2.25rem; text-align: center; }
.pm-cl[data-layout='arches'] .pm-cl__media { border-radius: 999px 999px var(--radius-img) var(--radius-img); outline: 1px solid var(--line); outline-offset: .5rem; transition: outline-offset .6s var(--ease), outline-color .6s var(--ease); }
.pm-cl[data-layout='arches'] .pm-cl__item:hover .pm-cl__media { outline-offset: .9rem; outline-color: var(--accent); }
.pm-cl[data-layout='arches'] .pm-cl__item { padding-top: .5rem; }
.pm-cl[data-layout='arches'] .pm-cl__body { justify-items: center; gap: .3rem; }
.pm-cl[data-layout='arches'] .pm-cl__title { justify-content: center; font-size: var(--t-h4); }
.pm-cl[data-layout='arches'] .pm-cl__title svg { display: none; }
.pm-cl[data-layout='arches'] .pm-cl__caption { font-family: var(--font-accent); font-style: var(--accent-style); }

.pm-cl[data-layout='panels'] { display: flex; gap: .6rem; height: clamp(26rem, 62vh, 40rem); }
.pm-cl[data-layout='panels'] .pm-cl__item { flex: 1 1 0; min-width: 0; color: #fff; transition: flex-grow .9s var(--ease); }
.pm-cl[data-layout='panels'] .pm-cl__item:first-child { flex-grow: 3.2; }
.pm-cl[data-layout='panels']:is(:hover, :focus-within) .pm-cl__item { flex-grow: 1; }
.pm-cl[data-layout='panels'] .pm-cl__item:is(:hover, :focus-within) { flex-grow: 3.2; }
.pm-cl[data-layout='panels'] .pm-cl__media { position: absolute; inset: 0; aspect-ratio: auto; }
.pm-cl[data-layout='panels'] .pm-cl__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .45) 38%, transparent 70%); }
.pm-cl[data-layout='panels'] .pm-cl__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(1rem, 2vw, 1.75rem); display: grid; gap: .25rem; }
.pm-cl[data-layout='panels'] .pm-cl__title { font-size: var(--t-h3); white-space: nowrap; }
.pm-cl[data-layout='panels'] .pm-cl__item { container-type: inline-size; }
@container (max-width: 15rem) {
  .pm-cl[data-layout='panels'] .pm-cl__body { padding: 1rem; }
  .pm-cl[data-layout='panels'] .pm-cl__title { font-size: var(--t-h4); }
  .pm-cl[data-layout='panels'] .pm-cl__title svg, .pm-cl[data-layout='panels'] .pm-cl__count { display: none; }
}
.pm-cl[data-layout='panels'] .pm-cl__count { color: rgb(255 255 255 / .85); }
.pm-cl[data-layout='panels'] .pm-cl__index { position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: .2rem .55rem; border-radius: 999px; background: rgb(0 0 0 / .55); backdrop-filter: blur(6px); font-size: var(--t-xs); letter-spacing: .14em; font-weight: 700; }
@media (max-width: 749px) { .pm-cl[data-layout='panels'] { flex-direction: column; height: auto; } .pm-cl[data-layout='panels'] .pm-cl__item { min-height: 11rem; flex: none; } .pm-cl[data-layout='panels'] .pm-cl__item:first-child { min-height: 18rem; } }
/* Cards with a plain surface */
.pm-cl[data-layout='cards'] .pm-cl__item { padding: .75rem .75rem 1.1rem; border-radius: var(--radius); background: var(--surface); transition: transform .5s var(--ease); }
.pm-cl[data-layout='cards'] .pm-cl__item:hover { transform: translateY(-5px); }
.pm-cl[data-layout='cards'] .pm-cl__body { padding-inline: .35rem; }
.pm-cl__link { color: inherit; text-decoration: none; }
.pm-cl__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.pm-cl__item:has(.pm-cl__link:focus-visible) { outline: 2px solid currentColor; outline-offset: 4px; border-radius: var(--radius-img); }
.pm-cl__link:focus-visible { outline: 0; }

/* ---------- Promo grid ---------- */
.pm-promos { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 750px) { .pm-promos { grid-template-columns: repeat(6, minmax(0, 1fr)); } .pm-promo { grid-column: span var(--span, 3); } }
.pm-promo { position: relative; display: grid; align-content: var(--ay, end); justify-items: var(--ax, start); text-align: var(--ta, left); min-height: var(--min-h, 28rem); padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--radius-img); overflow: hidden; isolation: isolate; gap: .75rem; }
.pm-promo__media { position: absolute; inset: 0; z-index: -2; }
.pm-promo__media img, .pm-promo__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.pm-promo:hover .pm-promo__media img { transform: scale(1.05); }
.pm-promo[data-text='light'] { color: #fff; --fg: #fff; --bg: #111; --btn: #fff; --on-btn: #111; }
.pm-promo[data-text='light']::before { content: ''; position: absolute; inset: 0; z-index: -1; --s: var(--shade, .5); background: linear-gradient(to top, rgb(0 0 0 / min(.92, calc(var(--s) * 1.7))) 0%, rgb(0 0 0 / min(.85, calc(var(--s) * 1.3))) 40%, rgb(0 0 0 / calc(var(--s) * .7)) 65%, rgb(0 0 0 / calc(var(--s) * .25)) 95%); }
.pm-promo[data-text='light'][data-position='top-left']::before { background: linear-gradient(to bottom, rgb(0 0 0 / min(.92, calc(var(--s) * 1.7))) 0%, rgb(0 0 0 / var(--s)) 45%, rgb(0 0 0 / calc(var(--s) * .25)) 85%); }
.pm-promo[data-text='light'][data-position='center']::before { background: rgb(0 0 0 / calc(var(--s) * 1.2)); }
.pm-promo[data-text='dark'] { color: #111; --fg: #111; --bg: #fff; --btn: #111; --on-btn: #fff; }
.pm-promo[data-text='dark']::before { content: ''; position: absolute; inset: 0; z-index: -1; --s: var(--shade, .5); background: linear-gradient(to top, rgb(255 255 255 / min(.94, calc(var(--s) * 1.75))) 0%, rgb(255 255 255 / var(--s)) 45%, transparent 85%); }
.pm-promo[data-text='dark'][data-position='top-left']::before { background: linear-gradient(to bottom, rgb(255 255 255 / min(.94, calc(var(--s) * 1.75))) 0%, rgb(255 255 255 / var(--s)) 45%, transparent 85%); }
.pm-promo[data-text='dark'][data-position='center']::before { background: rgb(255 255 255 / calc(var(--s) * 1.25)); }
.pm-promo .rte { max-width: 28rem; }

/* ---------- Shop the look ---------- */
.pm-look { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
@media (min-width: 990px) { .pm-look { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .pm-look[data-side='right'] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } .pm-look[data-side='right'] .pm-look__stage { order: 2; } }
.pm-look__stage { position: relative; border-radius: var(--radius-img); overflow: hidden; }
/* With many pieces the list outgrows the picture: the picture stays in view while the list scrolls. */
@media (min-width: 990px) { .pm-look__stage { position: sticky; top: calc(var(--header-h, 72px) + 1.5rem); } }
.pm-look__stage > .pm-media { aspect-ratio: var(--ratio, 4 / 5); border-radius: 0; }
.pm-spot { position: absolute; left: var(--x); top: var(--y); z-index: 2; }
.pm-spot > summary { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; border-radius: 50%; background: var(--bg); color: var(--fg); box-shadow: 0 6px 20px rgb(0 0 0 / .25); transition: transform .4s var(--ease-back); }
.pm-spot > summary::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--bg); opacity: .8; animation: pm-ping 2.4s var(--ease) infinite; }
.pm-spot > summary svg { width: 1rem; height: 1rem; transition: transform .4s var(--ease); }
.pm-spot[open] > summary { transform: scale(1.1); background: var(--fg); color: var(--bg); }
.pm-spot[open] > summary svg { transform: rotate(45deg); }
@keyframes pm-ping { 0% { transform: scale(.8); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pm-spot > summary::before { animation: none; } }
.pm-spot__card { position: absolute; z-index: 3; top: 2rem; left: 50%; width: min(17rem, 70vw); transform: translateX(-50%); display: grid; grid-template-columns: 4.5rem 1fr; gap: .9rem; align-items: center; padding: .7rem; border-radius: var(--radius); background: var(--bg); color: var(--fg); box-shadow: var(--shadow-lg); font-size: var(--t-small); }
.pm-spot[data-flip-x] .pm-spot__card { left: auto; right: -1.5rem; transform: none; }
.pm-spot[data-flip-x='left'] .pm-spot__card { left: -1.5rem; right: auto; }
.pm-spot[data-flip-y] .pm-spot__card { top: auto; bottom: 2rem; }
.js-motion .pm-spot[open] .pm-spot__card { animation: pm-drop .45s var(--ease); }
.pm-spot__card .pm-media { aspect-ratio: 1; border-radius: calc(var(--radius) * .6); }
.pm-spot__card a { font-weight: 600; text-decoration: none; }
.pm-spot__card a::after { content: ''; position: absolute; inset: 0; }
.pm-look__list { display: grid; gap: 1.25rem; }
.pm-look__list .pm-grid { --cols: 2; --cols-m: 2; }
@media (min-width: 750px) and (max-width: 989px) { .pm-look__list .pm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pm-look__list .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Featured product ---------- */
.pm-fp { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 990px) { .pm-fp { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .pm-fp[data-side='right'] .pm-fp__media { order: 2; } }
.pm-fp__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-img); overflow: visible; }
.pm-fp__media > img, .pm-fp__media > svg { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-img); }
/* This frame does not clip (the second image hangs over its edge), so the reveal keeps the wipe but not the zoom. */
[data-motion].js-motion:not(.motion-failsafe) .pm-fp__media[data-reveal='media']:not(.is-in) > img { transform: none; }
.pm-fp__second { position: absolute; right: -5%; bottom: -6%; width: 38%; aspect-ratio: 3 / 4; border-radius: var(--radius-img); overflow: hidden; border: 6px solid var(--bg); box-shadow: var(--shadow); }
.pm-fp__second img { width: 100%; height: 100%; object-fit: cover; }
.pm-fp__info { display: grid; gap: 1.25rem; align-content: start; }
@media (max-width: 749px) { .pm-fp__second { right: 0; } }
/* The inset hangs over the media's edge; the section clips it so it never widens the page. */
.pm-section:has(.pm-fp__second) { overflow-x: clip; }