/* Product page, product cards, style archives. */

/* ============ Product page ============ */
/* Figma: product page > pdp. Gallery (arch main image + thumbnails) beside the purchase module. */

/* Breadcrumb: align to the page gutter, not the viewport edge. */
.woocommerce-breadcrumb { max-width: var(--pty-max-width); margin-inline: auto; padding: var(--pty-space-4) 20px 0; font-size: var(--pty-text-sm); color: var(--pty-ink-soft); }
.woocommerce-breadcrumb a { color: var(--pty-ink-soft); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--pty-ink); text-decoration: underline; }

.pty-pdp__grid { display: grid; gap: 40px; padding: 24px 20px 40px; max-width: var(--pty-max-width); margin-inline: auto; }
@media (min-width: 1024px) {
  .woocommerce-breadcrumb { padding-inline: 48px; }
  /* Columns stretch to the same height so the sticky purchase column can travel. */
  .pty-pdp__grid { grid-template-columns: minmax(0, 632fr) minmax(0, 648fr); gap: 64px; padding: 32px 48px 64px; }
}

/* Gallery */
.pty-gallery { display: grid; gap: 16px; }
.pty-gallery__viewport { position: relative; min-width: 0; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--pty-line); }
.pty-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pty-gallery__track::-webkit-scrollbar { display: none; }
.pty-gallery__slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; aspect-ratio: 3 / 4; background: var(--pty-line); }
.pty-gallery__zoom-trigger { display: block; width: 100%; height: 100%; padding: 0; cursor: zoom-in; }
.pty-gallery__img, .pty-gallery__video { width: 100%; height: 100%; object-fit: cover; }
.pty-gallery__counter { position: absolute; bottom: var(--pty-space-4); right: var(--pty-space-4); background: rgba(28,25,23,.6); color: var(--pty-paper); font-size: var(--pty-text-xs); padding: 2px 10px; border-radius: var(--pty-radius-pill); }
.pty-gallery__rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pty-gallery__thumb { padding: 0; border: 1px solid transparent; border-radius: 8px; overflow: hidden; background: var(--pty-white); aspect-ratio: 3 / 4; cursor: pointer; transition: border-color var(--pty-duration-fast) var(--pty-ease); }
.pty-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pty-gallery__thumb:hover { border-color: var(--pty-stone); }
.pty-gallery__thumb.is-active { border-color: var(--pty-ink); }
.pty-gallery__thumb--video { display: flex; align-items: center; justify-content: center; color: var(--pty-ink); }
.pty-gallery__thumb--video .pty-icon { width: 20px; height: 20px; }
.pty-pdp__gallery-empty { aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; }
@media (min-width: 1024px) { .pty-gallery__counter { display: none; } }

/* Zoom viewer */
.pty-zoom { position: fixed; inset: 0; z-index: var(--pty-z-drawer); background: var(--pty-paper); display: flex; align-items: center; justify-content: center; }
.pty-zoom__close { position: absolute; top: var(--pty-space-3); right: var(--pty-space-3); z-index: 2; }
.pty-zoom__stage { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; touch-action: pinch-zoom; }
.pty-zoom__img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Purchase module */
@media (min-width: 1024px) { .pty-purchase { position: sticky; top: calc(var(--pty-header-height) + var(--pty-space-4)); } }
.pty-purchase__title { display: grid; gap: 12px; margin-bottom: 24px; }
.pty-purchase__kicker { margin: 0; font-size: var(--pty-text-sm); font-weight: 500; line-height: 20px; color: var(--pty-merlot); }
.pty-purchase__style { margin: 0; font-family: var(--pty-font-display); font-weight: var(--pty-display-weight); font-size: 32px; line-height: 36px; letter-spacing: var(--pty-display-tracking); }
.pty-purchase__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pty-purchase__price { font-size: var(--pty-text-md); font-weight: 500; line-height: 20px; }
.pty-purchase__price .amount { white-space: nowrap; }
.pty-purchase__origin { font-size: var(--pty-text-sm); color: var(--pty-stone); }
.pty-purchase__story { margin-bottom: 24px; font-size: var(--pty-text-md); line-height: 22px; }
.pty-purchase__story p { margin: 0 0 8px; }
.pty-purchase__field { display: grid; gap: 12px; padding-block: 16px; border-top: var(--pty-border); }
.pty-purchase__label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--pty-text-sm); font-weight: 500; line-height: 20px; }
.pty-purchase__swatch-name { font-weight: 400; color: var(--pty-stone); }
.pty-purchase__label--size { gap: 16px; }
.pty-purchase__label--size > span:first-child { flex: 1; }
.pty-purchase__guide { font-weight: 400; color: var(--pty-merlot); text-decoration: none; }
.pty-purchase__guide:hover { text-decoration: underline; }
.pty-unit { display: inline-flex; border: 1px solid var(--pty-line); border-radius: 2px; overflow: hidden; }
.pty-unit button { padding: 4px 10px; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--pty-stone); }
.pty-unit button[aria-pressed="true"] { background: var(--pty-ink); color: var(--pty-paper); }
.pty-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.pty-swatch { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 1px solid transparent; padding: 3px; background: transparent; display: block; }
.pty-swatch img, .pty-swatch__dot { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 1px solid var(--pty-line); box-sizing: border-box; }
.pty-swatch:hover { border-color: var(--pty-stone); }
.pty-swatch.is-selected { border-color: var(--pty-ink); }
.pty-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pty-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 58px; min-height: 38px; padding: 10px 12px; border: 1px solid var(--pty-line); border-radius: 0; background: var(--pty-white); color: var(--pty-ink); font-size: var(--pty-text-sm); font-weight: 500; line-height: 18px; }
.pty-chip__au, .pty-chip__eu { line-height: 16px; }
.pty-chips[data-unit="au"] .pty-chip__eu, .pty-chips[data-unit="eu"] .pty-chip__au { display: none; }
.pty-chip:hover { border-color: var(--pty-ink); }
.pty-chip[aria-pressed="true"], .pty-chip.is-selected { border-color: var(--pty-ink); background: var(--pty-blush); }
.pty-chip.is-soldout { color: var(--pty-stone); cursor: not-allowed; background: transparent; }
.pty-chip.is-soldout .pty-chip__au, .pty-chip.is-soldout .pty-chip__eu { text-decoration: line-through; }
.pty-chip__note { font-size: 10px; color: var(--pty-ink-soft); line-height: 1; font-weight: 400; }
.pty-purchase__fit { margin: 0; font-size: var(--pty-text-sm); line-height: 20px; color: var(--pty-stone); }
[data-pty-sizes].is-flash .pty-chips { outline: 2px solid var(--pty-rose); outline-offset: 6px; }
.pty-purchase__actions { display: grid; gap: 12px; padding-block: 16px; border-top: var(--pty-border); }
.pty-purchase__primary { display: flex; gap: 8px; }
.pty-purchase__primary .pty-btn { flex: 1; }
.pty-purchase__wish { width: 52px; height: 52px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pty-ink); background: var(--pty-white); color: var(--pty-ink); transition: color var(--pty-duration-fast) var(--pty-ease), border-color var(--pty-duration-fast) var(--pty-ease); }
.pty-purchase__wish:hover { color: var(--pty-rose); border-color: var(--pty-rose); }
.pty-purchase__wish[aria-pressed="true"] .pty-icon { fill: var(--pty-rose); stroke: var(--pty-rose); }
.pty-express__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pty-express__btn, .pty-btn--express { min-height: 44px; background: transparent; border: 1px solid var(--pty-line); color: var(--pty-stone); font-size: var(--pty-text-sm); }
@media (min-width: 1024px) { .pty-express__row { gap: 12px; } }
.pty-purchase__assurance { display: grid; gap: 8px; padding-bottom: 16px; }
.pty-purchase__assurance .pty-hint { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--pty-text-sm); line-height: 20px; color: var(--pty-stone); }
.pty-purchase__assurance .pty-icon { width: 20px; height: 20px; }
@media (min-width: 1024px) { .pty-purchase__style { font-size: var(--pty-display-lg); line-height: 52px; } }

/* Accordions */
.pty-accordions { border-top: var(--pty-border); }
.pty-accordion { border-bottom: var(--pty-border); }
.pty-accordion__summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; cursor: pointer; list-style: none; font-size: var(--pty-text-md); line-height: 22px; }
.pty-accordion__summary .pty-icon { width: 16px; height: 16px; }
.pty-accordion__summary::-webkit-details-marker { display: none; }
.pty-accordion__summary .pty-icon { transition: transform var(--pty-duration-fast) var(--pty-ease); }
.pty-accordion[open] .pty-accordion__summary .pty-icon { transform: rotate(180deg); }
.pty-accordion__body { padding-bottom: var(--pty-space-4); color: var(--pty-ink-soft); font-size: var(--pty-text-sm); }
.pty-materials__steps { margin: var(--pty-space-2) 0 0; padding-left: 18px; display: grid; gap: 4px; } /* Hannah's care steps, 3 Nov */
.pty-size-table { width: 100%; border-collapse: collapse; }
.pty-size-table th, .pty-size-table td { text-align: left; padding: var(--pty-space-2) var(--pty-space-3); border-bottom: 1px solid var(--pty-line); font-size: var(--pty-text-sm); }

/* Sections under the purchase module */
.pty-pdp__siblings, .pty-pdp__also { padding-top: 0; }
.pty-pdp__siblings .pty-section-header { padding-bottom: 8px; }

/* Mobile sticky add bar */
.pty-pdp__stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--pty-space-4); padding: var(--pty-space-3) var(--pty-gutter); padding-bottom: calc(var(--pty-space-3) + env(safe-area-inset-bottom)); background: var(--pty-paper); border-top: var(--pty-border); }
.pty-pdp__stickybar-info { display: grid; }
.pty-pdp__stickybar-name { font-size: var(--pty-text-sm); }
.pty-pdp__stickybar .pty-btn { padding-inline: var(--pty-space-5); }
@media (min-width: 1024px) { .pty-pdp__stickybar { display: none !important; } }

/* ============ Cards + archive ============ */
/* Figma: Cards | Product (product-card). White 4:5 media with soft corners, wishlist heart, italic shoe name, colourway dots, price. */
.pty-archive { padding-bottom: 0; }

/* Collection hero (Section Checks 27 Oct, "collection page - the elysa heel"): arch media on the left (video or slideshow of the style), copy on the right with the two best sellers under it. Stacks on phones. */
.pty-chero { padding: 20px 20px 0; }
.pty-chero__inner { display: grid; gap: 24px; max-width: 1376px; margin-inline: auto; }
.pty-chero__arch { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 8px 8px; background: var(--pty-shell); }
.pty-chero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--pty-ease); }
.pty-chero__slide.is-active { opacity: 1; }
.pty-chero__slide img, .pty-chero__slide video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; }
.pty-chero__copy { display: flex; flex-direction: column; gap: 20px; padding: 8px 0 0; }
.pty-chero__kicker { margin: 0; font-size: var(--pty-text-md); font-weight: 500; line-height: 20px; letter-spacing: 2px; text-transform: uppercase; }
.pty-chero__heading { margin: 0; font-family: var(--pty-font-display); font-weight: var(--pty-display-weight); font-size: 40px; line-height: 44px; letter-spacing: var(--pty-display-tracking); color: var(--pty-merlot); }
.pty-chero__bio { margin: 0; font-size: var(--pty-text-md); line-height: 22px; }
.pty-chero__picks { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin: 4px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .pty-chero { padding: 32px 32px 0; }
  .pty-chero__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pty-chero__arch { aspect-ratio: auto; height: 100%; min-height: 640px; }
  .pty-chero__side { display: flex; flex-direction: column; gap: 24px; }
  .pty-chero__copy { flex: 1; padding: 32px; }
  .pty-chero__heading { font-size: 48px; line-height: 52px; }
  .pty-chero__bio { font-size: var(--pty-text-xl); line-height: 26px; }
  .pty-chero__picks { gap: 24px; margin: 0; }
}
@media (min-width: 1200px) { .pty-chero__heading { font-size: 64px; line-height: 68px; } }
/* Tablets (768 to 1179px): the arch used to stretch to the full height of the copy column, which made it
   tall and narrow (336x915 at 768) and cut the shoes in half on every style page. Keep the phone's 4:5 arch,
   put the two best sellers under it, and centre the copy beside them. Found in the 5 Nov breakpoint sweep. */
@media (min-width: 768px) and (max-width: 1179px) {
  .pty-chero__inner { grid-template-rows: auto auto; align-items: start; }
  .pty-chero__side { display: contents; }
  .pty-chero__arch { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5; height: auto; min-height: 0; }
  .pty-chero__picks { grid-column: 1; grid-row: 2; }
  .pty-chero__copy { grid-column: 2; grid-row: 1 / span 2; align-self: center; flex: none; }
}
.pty-chero + .pty-products { padding-top: 24px; }
@media (min-width: 768px) { .pty-chero + .pty-products { padding-top: 32px; } }
.pty-card { position: relative; }
.pty-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--pty-white); border-radius: 8px; overflow: hidden; }
.pty-card__media-link { display: block; width: 100%; height: 100%; } /* kept for the photo; the name's ::after covers the whole card */
.pty-card__img, .pty-card__video { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.pty-card.is-picking .pty-card__media { overflow: visible; } /* lets the size picker hang below the photo */
.pty-card__video { position: absolute; inset: 0; opacity: 0; transition: opacity 650ms var(--pty-ease); } /* Marty 5 Nov: ease into the video, about 0.4s slower than the 250ms it was */
.pty-card:hover .pty-card__video[src] { opacity: 1; }
.pty-card__wish { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: var(--pty-white); display: inline-flex; align-items: center; justify-content: center; color: var(--pty-ink); box-shadow: 0 1px 4px rgba(28,25,23,.08); transition: color var(--pty-duration-fast) var(--pty-ease); }
.pty-card__wish .pty-icon { width: 18px; height: 18px; }
.pty-card__wish:hover { color: var(--pty-rose); } /* Hub review 27 Oct: heart goes Pentony pink on hover */
.pty-card__wish[aria-pressed="true"] .pty-icon { fill: var(--pty-rose); stroke: var(--pty-rose); }
.pty-card__flag { position: absolute; top: 12px; left: 12px; background: var(--pty-paper); color: var(--pty-ink-soft); font-size: var(--pty-text-xs); letter-spacing: var(--pty-label-tracking); text-transform: uppercase; padding: 4px 10px; }
.pty-card__quickadd-btn { position: absolute; bottom: 8px; right: 8px; z-index: 2; min-width: 32px; min-height: 32px; background: var(--pty-white); border-radius: 50%; box-shadow: 0 1px 4px rgba(28,25,23,.08); transition: color var(--pty-duration-fast) var(--pty-ease); }
.pty-card__quickadd-btn .pty-icon { width: 18px; height: 18px; }
.pty-card__quickadd-btn:hover, .pty-card__quickadd-btn[aria-expanded="true"] { color: var(--pty-rose); }
/* Hub review 27 Oct: the size picker sits under the photo (over the name/price) instead of cropping it, and its content lines up with the card's left edge. */
.pty-card__quickadd { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; background: var(--pty-paper); padding: 12px 0 16px; box-shadow: 0 12px 24px -12px rgba(28,25,23,.18); }
.pty-card__quickadd .pty-label { margin-bottom: var(--pty-space-2); font-size: var(--pty-text-sm); line-height: 20px; }
.pty-card__sizes { display: flex; flex-wrap: wrap; gap: var(--pty-space-1); }
.pty-card__size { min-width: 44px; min-height: 40px; padding: 0 var(--pty-space-2); border: var(--pty-border); border-radius: var(--pty-radius); font-size: var(--pty-text-sm); background: var(--pty-paper); }
.pty-card__size:hover:not(.is-soldout) { border-color: var(--pty-ink); background: var(--pty-blush); }
.pty-card__size.is-soldout { color: var(--pty-stone); text-decoration: line-through; cursor: not-allowed; }
.pty-card__info { display: grid; gap: 8px; justify-items: start; padding-top: 12px; }
.pty-card__name { font-family: var(--pty-font-display); font-weight: var(--pty-display-weight); font-size: 20px; line-height: 24px; letter-spacing: var(--pty-display-tracking); text-decoration: none; }
.pty-card__name::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the photo and name share one link; dots and buttons sit above it */
.pty-card__colourway { font-size: var(--pty-text-sm); color: var(--pty-ink-soft); }
.pty-card__dots { position: relative; z-index: 2; display: flex; gap: 6px; }
.pty-card__dot { position: relative; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--pty-line); background: var(--pty-line); cursor: pointer; }
/* The dot stays 20px. The tap target is 26px, which clears WCAG 2.2 AA (24px)
   and still cannot overlap its neighbour: the centres sit 26px apart. */
.pty-card__dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); }
.pty-card__dot:hover { outline: 1px solid var(--pty-rose); outline-offset: 2px; }
.pty-card__dot.is-current { outline: 1px solid var(--pty-ink); outline-offset: 2px; }
.pty-card__price { margin-top: 4px; font-size: var(--pty-text-sm); font-weight: 500; line-height: 18px; }
.pty-card:hover .pty-card__name { color: var(--pty-rose); }
.pty-card__img.is-swapping { opacity: 0; }
.pty-card__img { transition: opacity var(--pty-duration-fast) var(--pty-ease); }

.pty-archive__empty { padding-block: var(--pty-space-8); color: var(--pty-ink-soft); }
.woocommerce-pagination { padding-top: var(--pty-space-7); }
.woocommerce-pagination ul { display: flex; gap: var(--pty-space-2); list-style: none; padding: 0; justify-content: center; }
.woocommerce-pagination a, .woocommerce-pagination span { display: inline-flex; min-width: var(--pty-touch-target); min-height: var(--pty-touch-target); align-items: center; justify-content: center; border: var(--pty-border); text-decoration: none; }
.woocommerce-pagination .current { background: var(--pty-ink); color: var(--pty-paper); }