/* POLYMATH — product, collection and search pages. */

/* ---------- Product ---------- */
.pm-product { display: grid; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
@media (min-width: 990px) {
  .pm-product { grid-template-columns: minmax(0, var(--media-w, 1.3fr)) minmax(0, 1fr); }
  .pm-product[data-media-size='large'] { --media-w: 1.7fr; }
  .pm-product[data-media-size='small'] { --media-w: 1fr; }
  .pm-product__info { position: sticky; top: calc(var(--header-h, 72px) + 1.5rem); }
  /* A short gallery (carousel, single, grid) stays in view while the longer details scroll past. */
  .pm-product:has(.pm-pgallery:not([data-layout='stack'])) > .pm-gallery-wrap { position: sticky; top: calc(var(--header-h, 72px) + 1.5rem); align-self: start; }
}
.pm-product__info { display: grid; gap: 1.35rem; align-content: start; min-width: 0; }
.pm-product__title { font-size: var(--t-h2); }
.pm-product__price { font-size: calc(1.3rem * var(--body-scale)); }
.pm-product__price .pm-price__sale { font-size: 1em; }
.pm-product__badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.pm-product__badges .pm-badge { border: 1px solid var(--line); }
.pm-product__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--t-small); color: var(--fg-muted); }
.pm-product__tax { font-size: var(--t-xs); color: var(--fg-muted); margin-top: -.9rem; }
.pm-product__tax a { color: inherit; }
.pm-product__desc { color: var(--fg-muted); }
.pm-highlight { margin: 0; padding: 1.1rem 1.25rem 1.1rem 1.4rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); border-radius: 0 var(--radius) var(--radius) 0; }
.pm-highlight blockquote { margin: 0; font-family: var(--font-accent); font-style: var(--accent-style); font-size: calc(1.2rem * var(--heading-scale)); line-height: 1.35; }
.pm-highlight figcaption { margin-top: .6rem; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--fg-muted); }
.pm-icons-row { display: grid; gap: .75rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--surface); font-size: var(--t-small); }
.pm-icons-row li { display: flex; align-items: center; gap: .75rem; }
.pm-icons-row svg { width: 1.3rem; height: 1.3rem; color: var(--accent-text); }
.pm-tabs-acc .pm-acc summary { font-size: var(--t-body); padding-block: 1.05rem; }
.pm-tabs-acc .pm-acc__icon { width: 1.9rem; height: 1.9rem; }
.pm-share { display: flex; align-items: center; gap: .6rem; font-size: var(--t-small); }
.pm-share button { display: inline-flex; align-items: center; gap: .45rem; text-decoration: underline; text-underline-offset: .25em; }
.pm-share svg { width: 1.1rem; height: 1.1rem; }
.pm-size-guide { justify-self: start; display: inline-flex; align-items: center; gap: .45rem; font-size: var(--t-small); text-decoration: underline; text-underline-offset: .25em; }
.pm-size-guide svg { width: 1.2rem; height: 1.2rem; }
.pm-specs { display: grid; gap: .75rem; }
.pm-specs__title { font-family: var(--font-body); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.pm-specs dl { margin: 0; border-top: 1px solid var(--line); }
.pm-specs__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; padding-block: .7rem; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.pm-specs__row dt { color: var(--fg-muted); }
.pm-specs__row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-complementary { display: grid; gap: .75rem; }
.pm-complementary h2 { font-family: var(--font-body); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }

/* Gallery */
.pm-gallery-wrap { position: relative; min-width: 0; }
.pm-pgallery { display: grid; gap: var(--gap-g, .6rem); }
.pm-pgallery__item { position: relative; overflow: hidden; border-radius: var(--radius-img); background: var(--surface); }
.pm-pgallery__item > .pm-media, .pm-pgallery__open { display: block; width: 100%; aspect-ratio: var(--media-ratio, auto); }
.pm-pgallery__open { position: relative; cursor: zoom-in; }
.pm-pgallery__open img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pm-pgallery__open:hover img { transform: scale(1.03); }
.pm-pgallery__zoom-hint { position: absolute; right: .9rem; bottom: .9rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--bg); color: var(--fg); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .4s var(--ease); }
.pm-pgallery__zoom-hint svg { width: 1.1rem; height: 1.1rem; }
.pm-pgallery__open:is(:hover, :focus-visible) .pm-pgallery__zoom-hint { opacity: 1; transform: none; }
.pm-pgallery__item video, .pm-pgallery__item iframe, .pm-pgallery__item model-viewer { width: 100%; aspect-ratio: 1; display: block; border: 0; }
.pm-pgallery__count { display: none; position: absolute; right: 1rem; bottom: 1rem; z-index: 2; padding: .3rem .7rem; border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 990px) {
  .pm-pgallery[data-layout='grid'] { grid-template-columns: 1fr 1fr; }
  /* An odd number of images: the first one spans both columns, so the grid ends evenly. */
  .pm-pgallery[data-layout='grid']:has(> :last-child:nth-child(odd)) > :first-child { grid-column: 1 / -1; }
  .pm-pgallery[data-layout='stack'] { grid-template-columns: 1fr 1fr; }
  .pm-pgallery[data-layout='stack'] > :first-child { grid-column: 1 / -1; }
  /* The first image spans both columns, so an even count leaves the last one alone: let it span too. */
  .pm-pgallery[data-layout='stack'] > :last-child:nth-child(even) { grid-column: 1 / -1; }
  .pm-pgallery[data-layout='single'] { grid-template-columns: 1fr; }
}
/* Carousel layout on large screens and every layout on small screens: one image at a time with swipe. */
@media (max-width: 989px) {
  .pm-product .pm-gallery-wrap { margin-inline: calc(-1 * var(--gutter)); }
  .pm-pgallery { grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; }
  .pm-pgallery::-webkit-scrollbar { display: none; }
  .pm-pgallery__item { scroll-snap-align: start; border-radius: 0; }
  .pm-pgallery__count { display: block; }
}
@media (min-width: 990px) {
  .pm-pgallery[data-layout='carousel'] { grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pm-pgallery[data-layout='carousel']::-webkit-scrollbar { display: none; }
  .pm-pgallery[data-layout='carousel'] .pm-pgallery__item { scroll-snap-align: start; }
}
.pm-thumbs { display: none; gap: .6rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: thin; }
@media (min-width: 990px) { .pm-gallery-wrap:has([data-layout='carousel']) .pm-thumbs { display: flex; } }
.pm-thumb { flex: none; width: 5rem; aspect-ratio: 1; border-radius: calc(var(--radius-img) * .5); overflow: hidden; opacity: .55; outline-offset: 2px; transition: opacity .3s; }
.pm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pm-thumb:hover, .pm-thumb[aria-current='true'] { opacity: 1; }
.pm-thumb[aria-current='true'] { outline: 2px solid var(--fg); }

/* Single-image viewer */
.pm-viewer .pm-dialog__panel { width: 100%; height: 100%; background: var(--bg); }
.pm-viewer__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .6rem 1rem .6rem 1.5rem; border-bottom: 1px solid var(--line); }
.pm-viewer__head h2 { grid-column: 2; font-size: var(--t-h5); line-height: 1.4; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-viewer__head .pm-icon-btn { grid-column: 3; justify-self: end; }
.pm-viewer__count { grid-column: 1; font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.pm-viewer__stage { position: relative; flex: 1; min-height: 0; }
.pm-viewer__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; padding: 0; list-style: none; }
.pm-viewer__track::-webkit-scrollbar { display: none; }
.pm-viewer__slide { flex: none; width: 100%; height: calc(100dvh - 3.9rem); display: grid; place-items: center; scroll-snap-align: center; padding: clamp(.5rem, 2vw, 1.5rem); }
.pm-viewer__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-img); }
.pm-viewer__nav { position: absolute; top: 50%; z-index: 2; width: 3.25rem; height: 3.25rem; margin-top: -1.625rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--fg); box-shadow: var(--shadow); transition: opacity .3s, transform .3s var(--ease); }
.pm-viewer__nav:hover:not(:disabled) { transform: scale(1.08); }
.pm-viewer__nav:disabled { opacity: .3; }
.pm-viewer__nav svg { width: 1.2rem; height: 1.2rem; }
.pm-viewer__nav--prev { left: 1rem; }
.pm-viewer__nav--next { right: 1rem; }
@media (hover: none), (max-width: 749px) { .pm-viewer__nav { top: auto; bottom: 1rem; margin-top: 0; } .pm-viewer__nav--prev { left: calc(50% - 4rem); } .pm-viewer__nav--next { right: calc(50% - 4rem); } }

/* Sticky purchase bar */
.pm-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom)); background: rgb(var(--bg-rgb) / .95); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 -12px 30px -18px rgb(0 0 0 / .35); border-top: 1px solid var(--line); transform: translateY(105%); transition: transform .5s var(--ease); }
.pm-sticky.is-visible { transform: none; }
.pm-sticky__inner { display: flex; align-items: center; gap: 1rem; }
.pm-sticky__media { width: 3.25rem; aspect-ratio: 1; border-radius: calc(var(--radius-img) * .5); overflow: hidden; flex: none; }
.pm-sticky__media img { width: 100%; height: 100%; object-fit: cover; }
.pm-sticky__title { flex: 1; min-width: 0; font-weight: 600; font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-sticky__title .pm-price { display: flex; font-weight: 400; }
.pm-sticky .btn { min-height: 2.9rem; }
@media (max-width: 599px) { .pm-sticky__media { display: none; } }

/* ---------- Collection ---------- */
.pm-banner { position: relative; display: grid; gap: 1rem; padding-block: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.pm-banner--image { min-height: clamp(18rem, 42vw, 30rem); align-content: end; color: #fff; padding-inline: clamp(1.25rem, 4vw, 3rem); border-radius: var(--radius-img); overflow: hidden; isolation: isolate; margin-top: 1.25rem; }
.pm-banner--image .pm-banner__media { position: absolute; inset: 0; z-index: -1; }
.pm-banner--image .pm-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.pm-banner--image::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(0 0 0 / .75), rgb(0 0 0 / .4)); }
.pm-banner--image .pm-breadcrumbs, .pm-banner--image .rte { color: rgb(255 255 255 / .88); }
.pm-banner .rte { max-width: 44rem; color: var(--fg-muted); }
/* Split banner: text beside the collection picture (a portrait or square picture keeps most of itself in view). */
.pm-banner--split { align-items: center; gap: clamp(1.25rem, 3vw, 3rem); padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 750px) { .pm-banner--split { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); } }
.pm-banner--split .pm-banner__text { display: grid; gap: 1rem; align-content: center; }
.pm-banner--split .pm-banner__media { position: relative; aspect-ratio: 1; max-height: 34rem; border-radius: var(--radius-img); overflow: hidden; background: var(--surface); }
@media (max-width: 749px) { .pm-banner--split .pm-banner__media { order: -1; aspect-ratio: 4 / 3; } }
.pm-banner--split .pm-banner__media img, .pm-banner--split .pm-banner__media svg { width: 100%; height: 100%; object-fit: cover; }
.pm-banner.pm-banner--image .rte, .pm-banner.pm-banner--image .pm-breadcrumbs { color: rgb(255 255 255 / .9); }
.pm-banner__count { font-family: var(--font-body); font-size: var(--t-small); font-weight: 400; letter-spacing: 0; text-transform: none; vertical-align: top; position: relative; top: .5em; margin-left: .2em; color: var(--fg-muted); }
.pm-banner--image .pm-banner__count { color: rgb(255 255 255 / .85); }
.pm-toolbar { position: sticky; top: var(--sticky-top, 0px); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-block: .75rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); background: var(--bg); }
.pm-toolbar__group { display: flex; align-items: center; gap: .75rem; }
.pm-toolbar .select { min-height: 2.6rem; padding-block: .3rem; font-size: var(--t-small); width: auto; }
.pm-toolbar label { font-size: var(--t-small); color: var(--fg-muted); }
.pm-filter-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: 0 1rem; border: 1.5px solid var(--fg); border-radius: var(--radius-btn); font-size: var(--t-small); font-weight: 600; }
.pm-filter-btn svg { width: 1.1rem; height: 1.1rem; }
.pm-filter-btn .pm-count { position: static; background: var(--fg); color: var(--bg); }
.pm-cols-toggle { display: none; gap: .25rem; }
@media (min-width: 990px) { .pm-cols-toggle { display: flex; } }
.pm-cols-toggle button { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: var(--fg-muted); }
.pm-cols-toggle button[aria-pressed='true'] { color: var(--fg); background: var(--fg-subtle); }
.pm-cols-toggle svg { width: 1.2rem; height: 1.2rem; }
.pm-shop { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 990px) { .pm-shop[data-filters='sidebar'] { grid-template-columns: 16rem minmax(0, 1fr); } .pm-shop[data-filters='sidebar'] .pm-facets--side { position: sticky; top: calc(var(--header-h, 72px) + 5rem); max-height: calc(100vh - var(--header-h, 72px) - 6rem); overflow: auto; } }
.pm-facets--side { display: none; }
@media (min-width: 990px) { .pm-shop[data-filters='sidebar'] .pm-facets--side { display: block; } .pm-shop[data-filters='sidebar'] ~ * .pm-filter-btn--drawer, .pm-toolbar[data-filters='sidebar'] .pm-filter-btn { display: none; } }
.pm-facet { border-bottom: 1px solid var(--line); }
.pm-facet summary { display: flex; justify-content: space-between; align-items: center; padding-block: 1rem; font-weight: 600; font-size: var(--t-small); }
.pm-facet summary svg { width: 1rem; height: 1rem; transition: transform .3s; }
.pm-facet[open] summary svg { transform: rotate(180deg); }
.pm-facet__list { display: grid; gap: .55rem; padding-bottom: 1.1rem; max-height: 17rem; overflow: auto; }
.pm-facet__list .checkbox { justify-content: space-between; width: 100%; }
.pm-facet__list .checkbox span:last-child { color: var(--fg-muted); font-size: var(--t-xs); }
.pm-facet__list .checkbox:has(input:disabled) { opacity: .45; }
.pm-facet__swatches { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: 1.1rem; }
.pm-facet__swatch { position: relative; }
.pm-facet__swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pm-facet__swatch span { display: block; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--swatch); background-size: cover; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.pm-facet__swatch input:checked + span { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15), 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg); }
.pm-facet__swatch input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 4px; }
.pm-facet__price { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding-bottom: 1.1rem; }
.pm-facet__price .field input { min-height: 2.75rem; }
.pm-active { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.pm-active a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.2rem; padding: .2rem .5rem .2rem .9rem; border-radius: 999px; background: var(--fg-subtle); font-size: var(--t-small); text-decoration: none; }
.pm-active a svg { width: .9rem; height: .9rem; }
.pm-active a:hover { background: var(--fg); color: var(--bg); }
.pm-active .pm-active__clear { background: none; text-decoration: underline; }
.pm-results { position: relative; transition: opacity .3s; }
.pm-results.is-loading { opacity: .4; pointer-events: none; }
.pm-load-more { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-top: 3rem; font-size: var(--t-small); color: var(--fg-muted); }
.pm-load-more__bar { width: 12rem; height: 2px; background: var(--line); }
.pm-load-more__bar span { display: block; height: 100%; background: var(--fg); width: calc(var(--p, 0) * 100%); }
.pm-drawer-facets .pm-dialog__foot { grid-template-columns: 1fr 1fr; }

/* ---------- Search ---------- */
.pm-result-list { display: grid; gap: 1rem; margin-top: 3rem; }
.pm-result-row { position: relative; display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: center; padding: .75rem; border-radius: var(--radius); border: 1px solid var(--line); }
.pm-result-row .pm-media { aspect-ratio: 1; }
.pm-result-row a { font-weight: 600; text-decoration: none; }
.pm-result-row a::after { content: ''; position: absolute; inset: 0; }