/* ==========================================================================
   Products — product discovery page. Everything scoped under .pdx.
   Filters sit on the RIGHT in fa / LEFT in en without any [dir="rtl"]
   override: .pdx-layout below places the filters aside in grid-column 1,
   which the grid's writing-mode-aware track numbering puts at inline-start
   automatically — right for RTL, left for LTR. See templates/products.php.
   ========================================================================== */

.pdx {
  background: var(--c-paper);
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- 1 · HERO */
.pdx-hero {
  /* ⚠️ Was var(--s-16) — that space existed to give the headline air above it.
     With only a banner in here it read as a gap, not as breathing room. */
  /* padding-block: var(--s-8) var(--s-10); */
  background: linear-gradient(180deg, var(--c-wash) 0%, var(--c-paper) 100%);
  border-bottom: 1px solid var(--c-line);
}
/* The banner carousel IS the hero — the headline block and the packshot fan it
   sat beside were removed on 2026-08-19, so this is the section's only content.
   The <h1> survives as .sr-only text; see templates/products.php. */
.pdx-hero__slider {
  margin-block: 0;
}
/* ⚠️ `.slider` ships as a full-bleed homepage hero. Inside this section it is a
   CARD: rounded, clipped and bounded, so it reads as part of the page rather
   than as a second page header.

   ⚠️ **THE HOMEPAGE SKIRT MUST GO.** `.slider` reserves 52px below the image for
   the floating stat bar to sit half over, and the dots are pinned 74px up to
   clear it. There is no stat bar here, so both numbers are wrong: the skirt
   becomes a white band and the dots float in the middle of nothing. */
.pdx-hero__slider .slider {
  /* border-radius: var(--radius-card); */
  overflow: hidden;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--c-line);
  padding-block-end: 0;
}
.pdx-hero__slider .slide__img {
  block-size: auto;
  max-block-size: none;
  aspect-ratio: auto;
}
.pdx-hero__slider .slider__dots {
  inset-block-end: var(--s-4);
}

/* ---- dots-only variant --------------------------------------------------
   ⚠️ **THERE ARE NO ARROWS TO STYLE — THE MARKUP OMITS THEM.** This block only
   makes the dots big enough to BE the control: at the homepage's 3px they are a
   progress bar you happen to be able to click; here they are the navigation, so
   they get a real hit area. The active-state width is restated because the base
   rule `.slider__dot[aria-current="true"]` has the same specificity as this
   one — without it, the wider active dot would be lost to source order. */
.slider--dots .slider__dots {
  gap: var(--s-2);
}
.slider--dots .slider__dot {
  inline-size: 30px;
  block-size: 6px;
  border-radius: 999px;
  background: rgba(14, 31, 39, 0.22);
}
.slider--dots .slider__dot[aria-current="true"] {
  inline-size: 56px;
  background: rgba(14, 31, 39, 0.22);
}
@media (max-width: 640px) {
  .slider--dots .slider__dot {
    inline-size: 22px;
  }
  .slider--dots .slider__dot[aria-current="true"] {
    inline-size: 40px;
  }
}



/* --------------------------------------------------------- 2 · CATEGORY NAV */
.pdx-cats {
  display: flex;
  gap: var(--s-3);
  padding-block: var(--s-8) var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.pdx-cats::-webkit-scrollbar {
  display: none;
}

.pdx-chip {
  scroll-snap-align: start;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-ink);
  transition: border-color var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}
.pdx-chip:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.pdx-chip.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.pdx-chip__icon {
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  flex: none;
}
.pdx-chip__icon svg {
  inline-size: 17px;
  block-size: 17px;
}
.pdx-chip.is-active .pdx-chip__icon {
  color: #fff;
}
.pdx-chip__text {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pdx-chip__name {
  font-size: var(--t-sm);
  font-weight: 700;
  white-space: nowrap;
}
.pdx-chip__count {
  font-size: 11px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.pdx-chip.is-active .pdx-chip__count {
  color: rgba(255, 255, 255, 0.75);
}

/* ------------------------------------------------------- 3 · SEARCH/TOOLBAR */
.pdx-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-6);
  flex-wrap: wrap;
}
.pdx-search {
  flex: 1 1 340px;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  padding-inline: var(--s-4);
  block-size: 52px;
  transition: border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}
.pdx-search:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.pdx-search svg {
  inline-size: 19px;
  block-size: 19px;
  color: var(--c-muted);
  flex: none;
}
.pdx-search input {
  flex: 1;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--t-sm);
  color: var(--c-ink);
  min-inline-size: 0;
}
.pdx-search input::placeholder {
  color: var(--c-muted);
}
.pdx-search__clear {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  color: var(--c-muted);
}
.pdx-search__clear:hover {
  background: var(--c-wash);
  color: var(--c-ink);
}
.pdx-search__clear svg {
  inline-size: 15px;
  block-size: 15px;
}

.pdx-toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}

.pdx-filters-btn {
  display: none; /* revealed once JS confirms the drawer will actually work */
  align-items: center;
  gap: var(--s-2);
  block-size: 52px;
  padding-inline: var(--s-5);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--t-sm);
  font-weight: 700;
  position: relative;
}
.pdx-filters-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.pdx-filters-btn svg {
  inline-size: 18px;
  block-size: 18px;
}
.pdx-filters-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 19px;
  block-size: 19px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
/* Only ever shown where the sidebar has collapsed into a drawer — on desktop
   the filters are already on screen, so the button would be a no-op. */
@media (max-width: 960px) {
  .pdx--js .pdx-filters-btn {
    display: inline-flex;
  }
}

.pdx-sort {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  block-size: 52px;
  padding-inline: var(--s-5);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  position: relative;
}
.pdx-sort__label {
  font-size: var(--t-xs);
  color: var(--c-muted);
  white-space: nowrap;
}
.pdx-sort select {
  appearance: none;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-ink);
  padding-inline-end: var(--s-6);
  cursor: pointer;
}
.pdx-sort__chev {
  position: absolute;
  inset-inline-end: var(--s-4);
  inline-size: 14px;
  block-size: 14px;
  color: var(--c-muted);
  pointer-events: none;
}
@media (max-width: 560px) {
  .pdx-toolbar {
    gap: var(--s-3);
  }
  .pdx-search {
    flex-basis: 100%;
  }
  .pdx-toolbar__actions {
    flex: 1;
  }
  .pdx-filters-btn,
  .pdx-sort {
    flex: 1;
    justify-content: center;
  }
}

/* ------------------------------------------------------------ 4 · LAYOUT === */
.pdx-layout {
  display: grid;
  grid-template-columns: minmax(272px, 300px) 1fr;
  grid-template-areas: "filters results";
  align-items: start;
  gap: var(--s-10);
  padding-block-end: var(--sec-y);
}
.pdx-results {
  grid-area: results;
  min-inline-size: 0;
}
.pdx-filters {
  grid-area: filters;
}

@media (max-width: 960px) {
  .pdx-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "results" "filters";
    gap: var(--s-6);
  }
}

/* --------------------------------------------------------- ACTIVE CHIPS === */
.pdx-active {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4);
  margin-block-end: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
}
.pdx-active__label {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-muted);
  flex: none;
}
.pdx-active__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  flex: 1;
}
.pdx-active__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
  font-size: var(--t-xs);
  font-weight: 600;
  border: 1px solid rgba(15, 127, 184, 0.18);
  transition: background var(--dur-1) var(--ease);
}
.pdx-active__chip:hover {
  background: #dcebf3;
  color: var(--c-primary-deep);
}
.pdx-active__chip svg {
  inline-size: 12px;
  block-size: 12px;
}
.pdx-active__clear {
  flex: none;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-crit);
  padding: 6px 10px;
  border-radius: var(--radius);
}
.pdx-active__clear:hover {
  background: rgba(168, 56, 42, 0.08);
}

/* ------------------------------------------------------------ RESULTS === */
.pdx-results__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--s-5);
}
.pdx-results__count {
  font-size: var(--t-sm);
  color: var(--c-body);
}
.pdx-results__count b {
  color: var(--c-ink);
  font-size: var(--t-md);
}

.pdx-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
@media (max-width: 1180px) {
  .pdx-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .pdx-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }
}
@media (max-width: 420px) {
  .pdx-grid {
    grid-template-columns: 1fr;
  }
}

.pdx-grid[hidden],
.pdx-empty[hidden],
.pdx-pager[hidden],
.pdx-pager__status[hidden],
.pdx-active[hidden] {
  display: none;
}

/* ------------------------------------------------------------- CARD === */
.pdx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.pdx-card:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}

.pdx-card__media {
  position: relative;
  aspect-ratio: 4/3.1;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #f7f9fb 0%, #eef3f6 100%);
  padding: var(--s-5);
}
.pdx-card__media img {
  max-inline-size: 82%;
  max-block-size: 84%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--dur-3) var(--ease);
}
.pdx-card:hover .pdx-card__media img {
  transform: scale(1.035);
}
.pdx-card__media--empty {
  color: #c6d3da;
}
.pdx-card__media--empty svg {
  inline-size: 40px;
  block-size: 40px;
}

.pdx-card__fav {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-end: var(--s-3);
  z-index: 2;
  display: none; /* hidden until JS confirms comparison actually works */
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-muted);
  border: 1px solid var(--c-line);
  transition: color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}
.pdx--js .pdx-card__fav {
  display: inline-flex;
}
.pdx-card__fav svg {
  inline-size: 15px;
  block-size: 15px;
}
.pdx-card__fav:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.pdx-card__fav.is-active {
  color: #fff;
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.pdx-card__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.pdx-card__brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pdx-card__sep {
  color: var(--c-line-strong);
}
.pdx-card__name {
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pdx-card__name a {
  color: inherit;
}
.pdx-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pdx-card__desc {
  font-size: var(--t-xs);
  color: var(--c-muted);
  line-height: var(--lh-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pdx-card__foot {
  margin-block-start: auto;
  padding-block-start: var(--s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.pdx-card__quick {
  position: relative;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-muted);
  padding: 4px 6px;
  border-radius: var(--radius);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--c-line-strong);
}
.pdx-card__quick:hover {
  color: var(--c-primary);
  text-decoration-color: var(--c-primary);
}
.pdx-card__cta {
  margin-block-start: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-ink);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--c-line);
}
.pdx-card__cta .arw {
  inline-size: 13px;
  block-size: 13px;
  transition: transform var(--dur-1) var(--ease);
}
[dir="rtl"] .pdx-card__cta .arw {
  transform: scaleX(-1);
}
.pdx-card:hover .pdx-card__cta {
  color: var(--c-primary);
}
.pdx-card:hover .pdx-card__cta .arw {
  transform: translateX(3px);
}
[dir="rtl"] .pdx-card:hover .pdx-card__cta .arw {
  transform: scaleX(-1) translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .pdx-card:hover {
    transform: none;
  }
  .pdx-card:hover .pdx-card__media img {
    transform: none;
  }
}

/* --------------------------------------------------------- SKELETON === */
.pdx-grid--skeleton[hidden] {
  display: none;
}
.pdx-card--skeleton {
  pointer-events: none;
}
.pdx-card--skeleton .pdx-card__media {
  background: var(--c-wash);
}
.sk-line {
  display: block;
  block-size: 10px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--c-wash) 25%,
    var(--c-line) 37%,
    var(--c-wash) 63%
  );
  background-size: 400% 100%;
  animation: pdxShimmer 1.4s ease infinite;
}
.sk-line--sm {
  inline-size: 40%;
  block-size: 8px;
}
.sk-line--lg {
  inline-size: 85%;
  block-size: 14px;
}
@keyframes pdxShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sk-line {
    animation: none;
  }
}

/* ----------------------------------------------------------- EMPTY === */
.pdx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  padding: var(--s-16) var(--s-6);
  background: var(--c-surface);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius-card);
}
.pdx-empty svg {
  inline-size: 38px;
  block-size: 38px;
  color: var(--c-line-strong);
}
.pdx-empty h3 {
  font-size: var(--t-md);
  color: var(--c-ink);
}
.pdx-empty p {
  font-size: var(--t-sm);
  color: var(--c-muted);
  max-width: 42ch;
}
.pdx-empty .btn {
  margin-block-start: var(--s-2);
}

/* --------------------------------------------------------- PAGINATION === */
.pdx-pager {
  margin-block-start: var(--s-10);
}
.pdx-pager__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* prev / next */
.pdx-pager__step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: 40px;
  padding-inline: 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-body);
  white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.pdx-pager__step:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.pdx-pager__step.is-disabled {
  opacity: 0.38;
  pointer-events: none;
}
.pdx-pager__chev {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  /* The shared chevron glyph points down; rotate it into a caret. Prev is
     "towards the start of the list", so it follows the writing direction —
     [dir="rtl"] flips both, which is why this is not hard-coded to left. */
  transform: rotate(90deg);
}
.pdx-pager__chev--next {
  transform: rotate(-90deg);
}
[dir="rtl"] .pdx-pager__chev--prev {
  transform: rotate(-90deg);
}
[dir="rtl"] .pdx-pager__chev--next {
  transform: rotate(90deg);
}

/* numbers */
.pdx-pager__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pdx-pager__page {
  display: inline-grid;
  place-items: center;
  min-inline-size: 40px;
  block-size: 40px;
  padding-inline: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-body);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.pdx-pager__page:hover {
  background: var(--c-wash);
  color: var(--c-primary);
}
.pdx-pager__page.is-current {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.pdx-pager__gap {
  min-inline-size: 22px;
  text-align: center;
  color: var(--c-muted);
  user-select: none;
}

.pdx-pager__status {
  margin-block-start: var(--s-3);
  text-align: center;
  font-size: var(--t-xs);
  color: var(--c-muted);
}

@media (max-width: 560px) {
  /* Keep the control on one line on a phone: the chevrons carry prev/next. */
  .pdx-pager__step-txt {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pdx-pager__step {
    padding-inline: 10px;
  }
  .pdx-pager__page {
    min-inline-size: 36px;
    block-size: 36px;
  }
}

/* ------------------------------------------------------ FILTERS ASIDE === */
.pdx-filters {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  max-block-size: calc(100svh - var(--header-h) - var(--topbar-h) - 32px);
  position: sticky;
  top: calc(var(--header-h) + var(--topbar-h) + 16px);
}
.pdx-filters__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
  border-block-end: 1px solid var(--c-line);
  flex: none;
}
.pdx-filters__head h2 {
  font-size: var(--t-md);
  /* Pushes the clear link + close button to the end of the row so the two
     stay together regardless of how many of them are rendered. */
  margin-inline-end: auto;
}
.pdx-filters__close {
  display: none;
  color: var(--c-muted);
}
.pdx-filters__close svg {
  inline-size: 18px;
  block-size: 18px;
}

.pdx-filters__scroll {
  overflow-y: auto;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  flex: 1;
}

/* Collapsed by default — each group is a <details>. The summary is the
   clickable header; the default disclosure triangle is replaced by the
   chevron so it can be direction-aware and match the rest of the UI. */
.pdx-fgroup {
  border-block-end: 1px solid var(--c-line);
  padding-block-end: var(--s-4);
}
.pdx-fgroup:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.pdx-fgroup__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
  padding-block: var(--s-2);
  user-select: none;
}
.pdx-fgroup__title::-webkit-details-marker {
  display: none;
}
.pdx-fgroup__title:hover {
  color: var(--c-primary);
}
.pdx-fgroup__title:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
/* count of active selections in this group, shown while it is collapsed */
.pdx-fgroup__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 18px;
  block-size: 18px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--c-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.pdx-fgroup__chev {
  margin-inline-start: auto;
  inline-size: 15px;
  block-size: 15px;
  color: var(--c-muted);
  flex: none;
  transition: transform var(--dur-1) var(--ease);
}
.pdx-fgroup[open] .pdx-fgroup__chev {
  transform: rotate(180deg);
}
.pdx-fgroup__title + * {
  margin-block-start: var(--s-3);
}

.pdx-fgroup__sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-block: var(--s-3) 6px;
}
.pdx-fgroup__sub:first-child {
  margin-block-start: 0;
}

.pdx-fgroup__search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding-inline: var(--s-3);
  block-size: 38px;
  margin-block-end: var(--s-3);
}
.pdx-fgroup__search svg {
  inline-size: 15px;
  block-size: 15px;
  color: var(--c-muted);
  flex: none;
}
.pdx-fgroup__search input {
  flex: 1;
  border: 0;
  outline: none;
  background: none;
  font-size: var(--t-xs);
  min-inline-size: 0;
}
.pdx-fgroup__search:focus-within {
  border-color: var(--c-primary);
}

.pdx-fgroup__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdx-fgroup__list--scroll {
  max-block-size: 220px;
  overflow-y: auto;
  padding-inline-end: 4px;
}

.pdx-check {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 7px var(--s-2);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--c-body);
}
.pdx-check:hover {
  background: var(--c-wash);
}
.pdx-check input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}
.pdx-check__box {
  flex: none;
  inline-size: 17px;
  block-size: 17px;
  border-radius: 4px;
  border: 1.5px solid var(--c-line-strong);
  background: var(--c-surface);
  display: grid;
  place-items: center;
  transition: background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}
/* PHYSICAL border-left/bottom, not logical. A checkmark is a glyph, not layout:
   `border-inline-start` resolves to the right edge in RTL and draws a mirrored,
   backwards tick. Same trap as the directional arrows in hitco.css. */
.pdx-check__box::after {
  content: "";
  width: 9px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
}
.pdx-check input:checked + .pdx-check__box {
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.pdx-check input:checked + .pdx-check__box::after {
  opacity: 1;
}
.pdx-check input:focus-visible + .pdx-check__box {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.pdx-check__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdx-check__count {
  font-size: 11px;
  color: var(--c-muted);
  flex: none;
}
.pdx-check.is-zero {
  display: none;
}
.pdx-check.is-filtered-out {
  display: none;
}

/* The foot only carries the mobile apply button, so on desktop it would be an
   empty strip with a top border — keep it out of the layout there entirely. */
.pdx-filters__foot {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-block-start: 1px solid var(--c-line);
  flex: none;
}
.pdx-filters__clear {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-crit);
}
.pdx-filters__clear:hover {
  text-decoration: underline;
}
.pdx-filters__apply {
  display: none;
}

@media (max-width: 960px) {
  .pdx-filters {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(400px, 100%);
    max-block-size: none;
    z-index: 220;
    border-radius: 0;
    border: 0;
    transform: translateX(100%);
    transition: transform var(--dur-3) var(--ease);
  }
  [dir="rtl"] .pdx-filters {
    transform: translateX(-100%);
  }
  .pdx-filters__close {
    display: inline-flex;
  }

  /* No JS: the aside is a normal in-flow block beneath the results, fully
     usable, just without the slide-over treatment. */
  .pdx--js .pdx-filters {
    display: flex;
  }
  .pdx--js .pdx-filters:not(.is-open) {
    visibility: hidden;
  }
  .pdx--js .pdx-filters.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  .pdx--js .pdx-filters__foot {
    display: flex;
  }
  .pdx--js .pdx-filters__apply {
    display: inline-flex;
  }
}

.pdx-scrim {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(14, 31, 39, 0.45);
}
.pdx-scrim[hidden] {
  display: none;
}

/* ------------------------------------------------------------ HELP CTA === */
.pdx-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding: var(--s-8) var(--s-10);
  margin-block-end: var(--sec-y);
  background: var(--c-band);
  border-radius: var(--radius-card);
  color: rgba(255, 255, 255, 0.8);
}
.pdx-help__text h2 {
  color: #fff;
  margin-block-end: 6px;
}
.pdx-help__text p {
  max-width: 56ch;
  font-size: var(--t-sm);
}
@media (max-width: 640px) {
  .pdx-help {
    padding: var(--s-6);
  }
}

/* -------------------------------------------------------------- MODALS === */
.pdx-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: var(--s-6);
}
.pdx-modal[hidden] {
  display: none;
}
.pdx-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(14, 31, 39, 0.55);
}
.pdx-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--c-surface);
  border-radius: var(--radius-card);
  inline-size: min(720px, 100%);
  max-block-size: min(86svh, 780px);
  overflow-y: auto;
  box-shadow: var(--shadow-2);
  padding: var(--s-8);
}
.pdx-modal__panel--wide {
  inline-size: min(920px, 100%);
}
.pdx-modal__close {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-end: var(--s-4);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: var(--c-wash);
  color: var(--c-ink);
}
.pdx-modal__close:hover {
  background: var(--c-line);
}
.pdx-modal__close svg {
  inline-size: 16px;
  block-size: 16px;
}
.pdx-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: var(--s-5);
  margin-block-end: var(--s-5);
  border-block-end: 1px solid var(--c-line);
}
.pdx-modal__head h2 {
  font-size: var(--t-lg);
}

/* quick view content */
.pdx-qv {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-8);
}
.pdx-qv__media {
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  background: var(--c-wash);
  display: grid;
  place-items: center;
  padding: var(--s-5);
  overflow: hidden;
}
.pdx-qv__media img {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.pdx-qv__media svg {
  inline-size: 44px;
  block-size: 44px;
  color: var(--c-line-strong);
}
.pdx-qv__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pdx-qv__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-primary);
}
.pdx-qv__name {
  font-size: var(--t-xl);
  color: var(--c-ink);
}
.pdx-qv__desc {
  font-size: var(--t-sm);
  color: var(--c-body);
  line-height: var(--lh-body);
}
.pdx-qv__facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-start: var(--s-2);
}
.pdx-qv__fact {
  display: flex;
  gap: var(--s-2);
  font-size: var(--t-sm);
}
.pdx-qv__fact b {
  color: var(--c-muted);
  font-weight: 500;
  min-inline-size: 9ch;
}
.pdx-qv__actions {
  display: flex;
  gap: var(--s-3);
  margin-block-start: var(--s-4);
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .pdx-qv {
    grid-template-columns: 1fr;
  }
  .pdx-qv__media {
    max-inline-size: 220px;
    margin-inline: auto;
  }
}

/* compare bar + table */
.pdx-compare-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 200;
  background: var(--c-ink);
  color: #fff;
  box-shadow: 0 -8px 24px rgba(14, 31, 39, 0.25);
}
.pdx-compare-bar[hidden] {
  display: none;
}
.pdx-compare-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block: var(--s-3);
  flex-wrap: wrap;
}
.pdx-compare-bar__items {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.pdx-compare-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 6px 6px 6px 10px;
  font-size: var(--t-xs);
}
.pdx-compare-chip button {
  display: grid;
  place-items: center;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.pdx-compare-chip button svg {
  inline-size: 10px;
  block-size: 10px;
}
.pdx-compare-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.pdx-compare-bar__clear {
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.65);
}
.pdx-compare-bar__clear:hover {
  color: #fff;
}

.pdx-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.pdx-compare-table th,
.pdx-compare-table td {
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--c-line);
  text-align: start;
  vertical-align: top;
}
.pdx-compare-table thead th {
  font-size: var(--t-xs);
  color: var(--c-muted);
  font-weight: 700;
}
.pdx-compare-table tbody th {
  font-size: var(--t-xs);
  color: var(--c-muted);
  font-weight: 600;
  white-space: nowrap;
}
.pdx-compare-table__product {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-inline-size: 160px;
}
.pdx-compare-table__img {
  aspect-ratio: 1/1;
  background: var(--c-wash);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pdx-compare-table__img img {
  max-inline-size: 80%;
  max-block-size: 80%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.pdx-compare-table__name {
  font-weight: 700;
  color: var(--c-ink);
  font-size: var(--t-sm);
}
.pdx-compare-table__wrap {
  overflow-x: auto;
}

/* keep the mobile-filter drawer and modals from ever causing page scroll */
.pdx-lock {
  overflow: hidden;
}

@media (max-width: 440px) {
  .pdx-help {
    padding: var(--s-5);
  }
  .pdx-modal__panel {
    padding: var(--s-5);
  }
}

/* ==========================================================================
/* ==========================================================================
   PRODUCT DETAIL — /products/{slug}
   Redesigned 2026-08-16 to a written brief: premium, medical, clean, corporate.

   The brief asks for deep navy + white with a narrow blue accent. Local aliases
   remain for readability, but they resolve to the global brand/band tokens so
   this page follows Website Settings with the rest of the site.

   ⚠️ The related-products cards are `.pd-pcard`, NOT the `.pdx-card` used by
   the discovery grid. That card carries six elements and wraps every label
   twice at this width; this one is picture, category, names, brand, link.

   Everything is scoped under `.pd`. Logical properties throughout.
   ========================================================================== */

.pd {
  --pd-navy: var(--c-band);
  --pd-navy-deep: var(--c-band-deep);
  --pd-teal: var(--c-primary);
  --pd-line: #e6ebf2;
  --pd-ground: #f8fafc;
  --pd-radius: 16px;
  --pd-radius-sm: 12px;
  /* Soft and wide, never a hard drop — the brief's "shadow بسیار soft". */
  --pd-shadow: 0 1px 2px rgba(22, 41, 92, 0.04),
    0 10px 30px -18px rgba(22, 41, 92, 0.18);

  padding-block: var(--s-6) var(--s-16);
  background: var(--pd-ground);
  color: var(--c-body);
}

/* Persian needs air between lines; the brief asks for ≥1.9 and these are the
   two places long copy lands. */
.pd .pd-prose,
.pd .pd-list {
  line-height: 1.95;
}

/* ============================================================= breadcrumb */

.pd-crumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--c-muted);
  margin-block-end: var(--s-8);
}
.pd-crumb a {
  color: var(--c-muted);
}
.pd-crumb a:hover {
  color: var(--pd-teal);
}
.pd-crumb [aria-current] {
  color: var(--pd-navy);
  font-weight: 600;
}
/* `chevron` is drawn pointing DOWN; a quarter turn aims it along the text, and
   the other way round in RTL. */
.pd-crumb__sep {
  inline-size: 13px;
  block-size: 13px;
  color: var(--c-line-strong);
  transform: rotate(90deg);
}
[dir="rtl"] .pd-crumb__sep {
  transform: rotate(-90deg);
}

/* ================================================================== hero ==
   Summary at the inline-start, gallery at the inline-end. Both are grid items
   in DOM order — no `order` — so the <h1> genuinely precedes the thumbnails. */

/* ⚠️ `align-items: center`, not `start`. Once the brand band moved out of this
   column the summary is often just a name, a line of copy and two tags — a
   quarter the height of the gallery beside it — and top-aligning left it
   stranded against a tall column of white. Centred, the pair reads as one
   block whatever the summary's height. */
.pd-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-block-end: clamp(40px, 5vw, 72px);
}

/* ---- gallery ------------------------------------------------------------ */

/* ⚠️ 118px, not 92: the rail carries 12px of padding and a 1px border on each
   side now, so the column has to be the thumbnail (92) plus that chrome (26) or
   every thumbnail is squeezed narrower than it is tall. */
/* ⚠️ `align-items: stretch` — the rail must end level with the main shot. Left
   at `start` it was only as tall as its thumbnails, so a four-image product had
   a short rail beside a tall picture and a five-image one had a long rail
   overhanging it. The row's height comes from the main shot's aspect-ratio; the
   rail fills it and scrolls inside. */
.pd-gallery {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: var(--s-4);
  align-items: stretch;
}
/* One image, no rail — the main shot takes the whole width. */
.pd-gallery:not(:has(.pd-rail)) {
  grid-template-columns: minmax(0, 1fr);
}

.pd-gallery__main {
  position: relative;
  aspect-ratio: 4 / 4;
  display: grid;
  place-items: center;
  padding: clamp(20px, 3vw, 8px);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  background: #fff;
  overflow: hidden;
}
/* ⚠️ `inline-size`/`block-size: 100%`, NOT the `max-*` pair. The box has a fixed
   `aspect-ratio` AND padding, so its inner area is a different ratio from the
   box — and an <img> carrying `width`/`height` attributes sizes itself from
   those, overflows the padded area by a few pixels and gets sliced by
   `overflow: hidden`. Filling the area and letting `object-fit: contain`
   letterbox inside it is the only version that cannot clip. */
.pd-gallery__main img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
.pd-gallery__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-line-strong);
}
.pd-gallery__empty svg {
  inline-size: 40px;
  block-size: 40px;
}
.pd-gallery__empty span {
  font-size: var(--t-xs);
  color: var(--c-muted);
}

.pd-gallery__zoom {
  position: absolute;
  inset-block-end: var(--s-4);
  inset-inline-start: var(--s-4);
  inline-size: 36px;
  block-size: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--pd-line);
  background: #fff;
  color: var(--c-muted);
  transition: color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}
.pd-gallery__zoom:hover {
  color: var(--pd-teal);
  border-color: var(--pd-teal);
}
.pd-gallery__zoom svg {
  inline-size: 17px;
  block-size: 17px;
}

/* The thumbnail rail. Vertical here, horizontal under 900px — which is why
   products.js measures the scrolling axis instead of assuming one. */
/* The rail sits on its own quiet plate, so the strip reads as one object beside
   the main shot rather than as loose thumbnails floating on the page ground. */
/* ⚠️ THE RAIL IS TAKEN OUT OF FLOW, AND THAT IS THE ONLY THING KEEPING THE MAIN
   SHOT SQUARE. As an ordinary grid child it contributes its MAX-CONTENT height
   to the auto-sized row, so a product with nine thumbnails made the row ~950px
   tall, stretched the square main shot to match, and left a small picture
   floating in a tall white letterbox. `flex: 1` on the track never got a chance
   to scroll, because the rail was never shorter than its thumbnails.

   Out of flow it contributes nothing: the row is the main shot's aspect-ratio
   alone, and the rail is stretched to that by `inset: 0` and scrolls inside.
   ⚠️ `grid-row`/`grid-column` are REQUIRED — an absolutely positioned grid child
   with auto placement resolves against the whole grid container, not its cell.
   Reverted to `static` under 960px, where the rail goes horizontal. */
.pd-rail {
  position: absolute;
  inset: 0;
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-block-size: 0;
  padding: var(--s-3);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  background: #fff;
}
/* ⚠️ `flex: 1` + `min-block-size: 0`, and no fixed cap. The rail's height now
   comes from the row (it stretches to the main shot), so the track takes what
   is left after the two arrows and scrolls inside that. Without
   `min-block-size: 0` a flex child refuses to shrink below its own content and
   the rail would overhang the picture instead of scrolling. */
.pd-rail__track {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  scroll-snap-type: block proximity;
  overscroll-behavior-block: contain;
  scrollbar-width: none;
}
.pd-rail__track::-webkit-scrollbar {
  display: none;
}
.pd-rail__arw {
  flex: none;
  align-self: center;
  inline-size: 28px;
  block-size: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--pd-line);
  border-radius: 50%;
  background: #fff;
  color: var(--c-muted);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}
.pd-rail__arw:hover:not(:disabled) {
  color: var(--pd-teal);
  border-color: var(--pd-teal);
}
.pd-rail__arw:disabled {
  opacity: 0.35;
  cursor: default;
}
.pd-rail__arw[hidden] {
  display: none;
}
.pd-rail__arw svg {
  inline-size: 15px;
  block-size: 15px;
}
/* Vertical pair: "previous" is up. ⚠️ The one arrow pair on the site that does
   NOT mirror in LTR — up is up in both languages. */
[data-pd-rail-prev] svg {
  transform: rotate(180deg);
}

/* ⚠️ `inline-size: 100%`, NOT a hard 92px. The rail's plate is 118px with 12px
   of padding and a 1px border per side, which leaves exactly 92px of content —
   zero slack, so any sub-pixel rounding clipped the thumbnails down their right
   edge. Filling the track means the two numbers can never disagree again.
   The horizontal rail under 960px sets its own fixed width instead, because
   there the cross axis is the height. */
.pd-gallery__thumb {
  flex: none;
  scroll-snap-align: start;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 6px;
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease);
}
.pd-gallery__thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
.pd-gallery__thumb:hover {
  border-color: var(--c-line-strong);
}
.pd-gallery__thumb.is-active {
  border-color: var(--pd-teal);
  box-shadow: 0 0 0 1px var(--pd-teal);
}

/* ---- summary ------------------------------------------------------------ */

.pd-summary {
  padding-block-start: var(--s-2);
}

.pd-summary__name {
  font-size: clamp(1.75rem, 2.6vw, 2.35rem);
  line-height: 1.25;
  color: var(--pd-navy);
  margin: 0;
}
.pd-summary__alt {
  margin-block-start: var(--s-2);
  font-size: var(--t-lg);
  font-weight: 400;
  color: var(--c-muted);
  letter-spacing: 0.01em;
}
.pd-summary__lede {
  margin-block-start: var(--s-5);
  max-inline-size: 52ch;
  font-size: var(--t-md);
  line-height: 1.95;
  color: var(--c-body);
}

/* The «معرفی کوتاه» line, sitting just above the brand card. */
.pd-summary__lede {
  margin-block-start: var(--s-6);
  font-size: var(--t-md);
  line-height: 1.95;
  color: var(--c-body);
}

/* ---- tags ---------------------------------------------------------------- */

.pd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
}
.pd-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px var(--s-3);
  border: 1px solid var(--pd-line);
  border-radius: 999px;
  background: #fff;
  color: var(--c-body);
  font-size: var(--t-xs);
}
a.pd-tag:hover {
  border-color: var(--pd-teal);
  color: var(--pd-navy);
  text-decoration: none;
}

/* ---- brand + manufacturer ------------------------------------------------
   ⚠️ `block-size` fixed with `inline-size: auto`, not a pair of `max-*`: many
   of these logo files are small, and a max-only box leaves them at their
   intrinsic size — which drew them as specks. */

/* A full-width band under the hero since 2026-08-16 — it used to be a card in
   the summary column. `auto-fit` so a product with only a brand fills the band
   rather than sitting half-width. */
.pd-makers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--s-4);
  /* padding: var(--s-6) var(--s-5); */
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  background: #fff;
  margin-block-end: clamp(40px, 5vw, 40px);
}
.pd-maker {
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
  min-inline-size: 0;
}
.pd-maker + .pd-maker {
  border-inline-start: 1px solid var(--pd-line);
}
.pd-maker__label {
  font-size: var(--t-xs);
  color: var(--c-muted);
}
.pd-maker__body {
  display: grid;
  place-items: center;
  /* block-size: 70px; */
}
.pd-maker__logo {
  block-size: 95px;
  inline-size: auto;
  max-inline-size: 150px;
  object-fit: contain;
}
.pd-maker__name {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--pd-navy);
}
a.pd-maker__body:hover .pd-maker__name {
  color: var(--pd-teal);
}

/* ---- options ------------------------------------------------------------- */

.pd-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4);
  margin-block-start: var(--s-4);
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  background: #fff;
}
.pd-option {
  min-inline-size: 0;
}
.pd-option + .pd-option {
  border-inline-start: 1px solid var(--pd-line);
  padding-inline-start: var(--s-4);
}
.pd-option__label {
  display: block;
  font-size: var(--t-xs);
  color: var(--c-muted);
  margin-block-end: var(--s-2);
}

/* ⚠️ A LIST OF WHAT EXISTS, not a picker — this site sells nothing, so there is
   nothing for a control to act on. Values wrap as quiet pills; the group's own
   plural label above them («طعم‌ها») is what says these are the variants. */
.pd-option__values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.pd-option__value {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-3);
  border: 1px solid var(--pd-line);
  border-radius: 999px;
  background: var(--pd-ground);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--pd-navy);
}
/* A value that carries a photograph is a button: pressing it shows that shot in
   the gallery. Only these get a pointer and a lit state — a value with no
   photograph stays a label, because there is nothing for it to change. */
.pd-option__value--shot {
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease);
}
.pd-option__value--shot:hover {
  border-color: var(--pd-teal);
  background: #fff;
}
.pd-option__value--shot.is-active {
  border-color: var(--pd-teal);
  background: #fff;
  box-shadow: 0 0 0 1px var(--pd-teal);
}
.pd-option__value--shot:focus-visible {
  outline: 2px solid var(--pd-teal);
  outline-offset: 2px;
}

.pd-option__shot {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.pd-option__dot {
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
}

/* ---- the buy link -------------------------------------------------------
   The one outbound CTA on the page. Navy, full width, and absent entirely when
   no shop address is set — see the note in partials/product/summary.php. */
.pd-buy {
  margin-block-start: var(--s-5);
}
.pd-buy__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  inline-size: 100%;
  block-size: 52px;
  border-radius: var(--pd-radius-sm);
  background: var(--pd-navy);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  transition: background-color var(--dur-1) var(--ease);
}
.pd-buy__btn:hover {
  background: var(--pd-navy-deep);
  color: #fff;
  text-decoration: none;
}
.pd-buy__icon {
  inline-size: 19px;
  block-size: 19px;
}

/* ============================================================== content ==
   Vertical rail at the inline-start, panes beside it. */

.pd-content {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  background: #fff;
  box-shadow: var(--pd-shadow);
  margin-block-end: clamp(40px, 5vw, 72px);
}
/* One tab means no rail — the pane carries its own heading. */
.pd-content--single {
  grid-template-columns: minmax(0, 1fr);
}

/* Sticky, pinned BELOW the site header rather than at the viewport top.
   ⚠️ `--header-h` is the shared token from hitco.css (76px, 64px under 900px) —
   never a hard-coded number, or this rail drifts the moment the header is
   re-tuned. ⚠️ Only `.header` is sticky; `.topbar` scrolls away, so
   `--topbar-h` must NOT be added here. `max-block-size` + `overflow` keep a
   long rail from being pinned taller than the screen with its last tabs
   unreachable. */
.pd-tabnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--s-4));
  max-block-size: calc(100vh - var(--header-h) - var(--s-8));
  overflow-y: auto;
  scrollbar-width: none;
}
.pd-tabnav::-webkit-scrollbar {
  display: none;
}
.pd-tabnav__btn {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--pd-radius-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-body);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}
.pd-tabnav__btn:hover {
  background: var(--pd-ground);
  color: var(--pd-navy);
}
/* Navy text, teal rule, near-white ground — the brief's three-part active
   state. ⚠️ The rule is an absolutely-positioned bar, NOT an inset box-shadow:
   a 3px inset shadow follows the button's 12px corner radius and draws as a
   curved arc bulging out of the tab, which is exactly what it looked like. */
.pd-tabnav__btn {
  position: relative;
}
.pd-tabnav__btn[aria-selected="true"] {
  background: var(--pd-ground);
  color: var(--pd-navy);
  font-weight: 700;
}
.pd-tabnav__btn[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 8px;
  inline-size: 3px;
  border-radius: 3px;
  background: var(--pd-teal);
}
.pd-tabnav__icon {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  color: var(--c-muted);
}
.pd-tabnav__btn[aria-selected="true"] .pd-tabnav__icon {
  color: var(--pd-teal);
}

.pd-pane[hidden] {
  display: none;
}
.pd-pane__title {
  margin: 0 0 var(--s-5);
  font-size: var(--t-lg);
  color: var(--pd-navy);
}
/* With no rail beside it the pane's own title is the section heading, so it
   takes the rule the rail would otherwise have separated it with. */
.pd-content--single .pd-pane__title {
  padding-block-end: var(--s-4);
  border-block-end: 1px solid var(--pd-line);
}
.pd-pane__sub {
  margin: var(--s-8) 0 var(--s-4);
  font-size: var(--t-md);
  color: var(--pd-navy);
}

/* Full width of the pane — the user's call, 2026-08-16. It was capped at 68ch
   because body copy sets justified site-wide (see hitco.css) and justified
   Persian across a wide measure opens rivers between the words. The line-height
   of 1.95 above is what keeps that readable now that the cap is gone; drop it
   and the rivers come back. */
.pd-prose {
  font-size: var(--t-md);
  color: var(--c-body);
}
.pd-prose p {
  margin-block-end: var(--s-4);
}
.pd-prose ul,
.pd-prose ol {
  margin-inline-start: 1.4em;
  margin-block-end: var(--s-4);
  list-style: revert;
}
.pd-prose h3,
.pd-prose h4,
.pd-prose h5 {
  margin-block: var(--s-6) var(--s-3);
  font-size: var(--t-md);
  color: var(--pd-navy);
}
/* ⚠️ Legacy bodies carry tables authored in a WYSIWYG. They are content, not
   layout — but they must never widen the page, so they scroll inside a box. */
.pd-prose table {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-block-end: var(--s-4);
  font-size: var(--t-sm);
}
.pd-prose td,
.pd-prose th {
  border: 1px solid var(--pd-line);
  padding: var(--s-2) var(--s-3);
  text-align: start;
}

/* ---- bullet lists — nutrition and benefits ------------------------------
   ⚠️ NUTRITION RENDERS HERE, AS TEXT. The brief rules out a nutrition-facts
   table in the UI; `product_highlight.kind = 'fact'` rows arrive as lines. */
/* Uncapped to match `.pd-prose` — the benefits list sits directly under the
   prose in the same pane, and one of the two running narrow reads as a fault. */
.pd-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--t-md);
  color: var(--c-body);
}
.pd-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.pd-list__dot {
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--pd-teal);
  margin-block-start: 0.72em;
}
.pd-list__icon {
  flex: none;
  inline-size: 19px;
  block-size: 19px;
  color: var(--pd-teal);
  margin-block-start: 0.28em;
}

/* ---- warnings — light card, one red hairline, no alarm ------------------ */
.pd-warn {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid #f3dcdc;
  border-inline-start: 3px solid #c0564a;
  border-radius: var(--pd-radius-sm);
  background: #fdf9f9;
}
.pd-warn__icon {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  color: #c0564a;
  margin-block-start: 2px;
}

/* ---- FAQ accordion ------------------------------------------------------
   <details>/<summary>, so every answer is reachable with JS off and the whole
   thing is findable by the browser's own in-page search. */
.pd-faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-inline-size: 72ch;
}
.pd-faq__item {
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius-sm);
  background: #fff;
  overflow: hidden;
}
.pd-faq__item[open] {
  border-color: var(--c-line-strong);
}
.pd-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--pd-navy);
  cursor: pointer;
  list-style: none;
}
.pd-faq__q::-webkit-details-marker {
  display: none;
}
.pd-faq__chev {
  flex: none;
  inline-size: 17px;
  block-size: 17px;
  color: var(--c-muted);
  transition: transform var(--dur-1) var(--ease);
}
.pd-faq__item[open] .pd-faq__chev {
  transform: rotate(180deg);
}
.pd-faq__a {
  padding: 0 var(--s-4) var(--s-4);
  font-size: var(--t-sm);
}

/* ================================================== related and popular == */

.pd-block {
  margin-block-end: clamp(40px, 5vw, 72px);
}
.pd-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-block-end: var(--s-6);
}
.pd-block__title {
  margin: 0;
  font-size: var(--t-xl);
  color: var(--pd-navy);
}
.pd-block__title--sm {
  font-size: var(--t-lg);
}
.pd-block__all {
  font-size: var(--t-sm);
  color: var(--pd-teal);
  white-space: nowrap;
}

/* Five in view, scroll-snapped. The arrows only call `scrollBy`, so the track
   is a working scroller with JS off and they stay hidden until it overflows. */
.pd-rel {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.pd-rel__track {
  flex: 1;
  min-inline-size: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--s-4) * 4) / 5);
  gap: var(--s-4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  padding-block: 4px;
}
.pd-rel__track::-webkit-scrollbar {
  display: none;
}
.pd-rel__arw {
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--pd-line);
  border-radius: 50%;
  background: #fff;
  color: var(--c-muted);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}
.pd-rel__arw:hover:not(:disabled) {
  color: var(--pd-teal);
  border-color: var(--pd-teal);
}
.pd-rel__arw:disabled {
  opacity: 0.35;
  cursor: default;
}
.pd-rel__arw[hidden] {
  display: none;
}
.pd-rel__arw svg {
  inline-size: 17px;
  block-size: 17px;
}
/* ⚠️ `chevron` is drawn pointing DOWN, and a POSITIVE rotation is clockwise —
   so +90° aims it at the LEFT and -90° at the RIGHT. Each button must point the
   way it travels, i.e. outward toward its own edge: "previous" goes back toward
   the start of the track, which is the left in LTR and the right in RTL. These
   were the other way round, so both arrows pointed inward at each other. */
.pd-rel [data-pd-rail-prev] svg {
  transform: rotate(90deg);
}
.pd-rel [data-pd-rail-next] svg {
  transform: rotate(-90deg);
}
[dir="rtl"] .pd-rel [data-pd-rail-prev] svg {
  transform: rotate(-90deg);
}
[dir="rtl"] .pd-rel [data-pd-rail-next] svg {
  transform: rotate(90deg);
}

/* ⚠️ A flex COLUMN with the link on `margin-block-start: auto`: that is what
   keeps a one-line name and a three-line name ending on the same baseline,
   which the brief asks for by name. */
.pd-pcard {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}
.pd-pcard:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--pd-shadow);
}
.pd-pcard__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: var(--s-5);
  background: var(--pd-ground);
  border-block-end: 1px solid var(--pd-line);
}
.pd-pcard__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
.pd-pcard__media.is-empty svg {
  inline-size: 30px;
  block-size: 30px;
  color: var(--c-line-strong);
}
.pd-pcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
  padding: var(--s-4);
}
.pd-pcard__cat {
  font-size: var(--t-xs);
  color: var(--c-muted);
}
.pd-pcard__name {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.pd-pcard__name a {
  color: var(--pd-navy);
  /* Titles run to 60+ characters in the migrated data; two lines is the
     budget, and the clamp is what keeps the cards a matched set. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-pcard__name a:hover {
  color: var(--pd-teal);
  text-decoration: none;
}
.pd-pcard__brand {
  font-size: var(--t-xs);
  color: var(--c-muted);
}
.pd-pcard__go {
  margin-block-start: auto;
  padding-block-start: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--pd-teal);
}
.pd-pcard__go .arw {
  inline-size: 14px;
  block-size: 14px;
}

/* ---- popular: quieter by design ----------------------------------------- */

.pd-pop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3) var(--s-6);
}
/* Boxed, like the related cards — but still the quieter of the two blocks: no
   shadow at rest and a smaller thumbnail. */
.pd-pop__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius-sm);
  background: #fff;
  min-inline-size: 0;
  transition: border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}
.pd-pop__item:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--pd-shadow);
}
.pd-pop__shot {
  flex: none;
  inline-size: 56px;
  block-size: 56px;
  display: grid;
  place-items: center;
  padding: 5px;
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius-sm);
  background: #fff;
}
.pd-pop__shot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
.pd-pop__shot.is-empty svg {
  inline-size: 22px;
  block-size: 22px;
  color: var(--c-muted);
  opacity: 0.5;
}
.pd-pop__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
.pd-pop__name {
  font-size: var(--t-sm);
  color: var(--pd-navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-pop__name:hover {
  color: var(--pd-teal);
}
.pd-pop__brand {
  font-size: var(--t-xs);
  color: var(--c-muted);
}

/* ============================================================== promo === */

.pd-promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--pd-radius);
  background: linear-gradient(
    135deg,
    var(--pd-navy) 0%,
    var(--pd-navy-deep) 100%
  );
  color: #fff;
  margin-block-end: clamp(32px, 4vw, 56px);
}
.pd-promo__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.35;
  color: #fff;
  max-inline-size: 26ch;
}
.pd-promo__lede {
  margin-block: var(--s-4) 0;
  max-inline-size: 52ch;
  font-size: var(--t-sm);
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.82);
}
.pd-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-6);
  padding: 11px var(--s-6);
  border-radius: 999px;
  background: #fff;
  color: var(--pd-navy);
  font-size: var(--t-sm);
  font-weight: 700;
}
.pd-promo__cta:hover {
  background: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}
.pd-promo__cta .arw {
  inline-size: 16px;
  block-size: 16px;
}
.pd-promo__shot {
  inline-size: clamp(120px, 15vw, 200px);
}
.pd-promo__shot img {
  inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

.pd-back {
  padding-block-start: var(--s-2);
}
.pd-back .arw {
  transform: scaleX(-1);
}
[dir="rtl"] .pd-back .arw {
  transform: none;
}

/* ============================================================ responsive */

@media (max-width: 1100px) {
  .pd-rel__track {
    grid-auto-columns: calc((100% - var(--s-4) * 3) / 4);
  }
}

@media (max-width: 960px) {
  .pd-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  /* ⚠️ Gallery ABOVE the summary on a stacked layout — the brief asks for the
     picture first on mobile. The only `order` on this page, and it applies
     only here, where the DOM order stops being the reading order. */
  .pd-gallery {
    order: -1;
    grid-template-columns: minmax(0, 1fr);
  }
  /* Back into flow — one column here, so the rail sits UNDER the main shot and
     has to take part in sizing the rows again. */
  .pd-rail {
    position: static;
    flex-direction: row;
  }
  .pd-rail__track {
    flex-direction: row;
    max-block-size: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: inline proximity;
  }
  /* ⚠️ The base rule sizes a thumbnail at `inline-size: 100%` so it fills the
     VERTICAL rail exactly. On this axis 100% is the whole track, which would
     put one thumbnail on screen at a time — so the width goes back to a fixed
     square here, and the height follows the aspect-ratio. */
  .pd-gallery__thumb {
    inline-size: 88px;
  }
  /* Horizontal now. Same rule as the related rail above: each arrow points the
     way it travels — back is the right in RTL, the left in LTR. */
  [data-pd-rail-prev] svg {
    transform: rotate(-90deg);
  }
  [data-pd-rail-next] svg {
    transform: rotate(90deg);
  }
  [dir="ltr"] [data-pd-rail-prev] svg {
    transform: rotate(90deg);
  }
  [dir="ltr"] [data-pd-rail-next] svg {
    transform: rotate(-90deg);
  }

  /* ⚠️ The tab rail becomes a horizontal scroller rather than an accordion:
     the panes are already siblings of it, so one grid change does the whole
     job and products.js needs no branch. */
  .pd-content {
    grid-template-columns: minmax(0, 1fr);
  }
  .pd-tabnav {
    position: static;
    flex-direction: row;
    gap: var(--s-2);
    overflow-x: auto;
    padding-block-end: var(--s-3);
    border-block-end: 1px solid var(--pd-line);
    margin-block-end: var(--s-5);
    scrollbar-width: none;
  }
  .pd-tabnav::-webkit-scrollbar {
    display: none;
  }
  .pd-tabnav__btn {
    flex: none;
    white-space: nowrap;
  }
  /* Horizontal now, so the bar lies along the bottom edge instead. */
  .pd-tabnav__btn[aria-selected="true"]::before {
    inset-inline: 8px;
    inset-block: auto 0;
    inline-size: auto;
    block-size: 3px;
  }
}

@media (max-width: 760px) {
  .pd-rel__track {
    grid-auto-columns: calc((100% - var(--s-4)) / 2);
  }
  .pd-promo {
    grid-template-columns: minmax(0, 1fr);
  }
  .pd-promo__shot {
    justify-self: center;
  }
  /* The dividers assumed a row; stacked they draw a stray vertical. */
  .pd-maker + .pd-maker,
  .pd-option + .pd-option {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
  .pd-makers,
  .pd-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .pd-rel__track {
    grid-auto-columns: 78%;
  }
  .pd-gallery__main {
    padding: var(--s-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-pcard,
  .pd-faq__chev {
    transition: none;
  }
}
/* ---- justified body copy · centred blocks keep their centring ------------
   The `:where(p, blockquote, dd)` rule in hitco.css declares alignment ON the
   paragraph, and a direct declaration outranks the `text-align: center` these
   containers pass DOWN to it by inheritance. Re-inheriting restores them.
   Add a centred container that holds a paragraph and it belongs in this list. */
.pdx-empty :where(p, blockquote, dd) {
  text-align: inherit;
}

/* ==========================================================================
   PRODUCT REVIEWS — `.pdr`, under the product detail page
   Redesigned 2026-08-18: summary card with a per-star distribution, a
   filter/sort toolbar, avatar-led review cards, a pager, and the form as its
   own panel. See templates/partials/product/reviews.php.

   ⚠️ Scoped under .pdr like every other page-specific block in this project.
   ⚠️ Brand teal, not the purple of the reference the user sent. Only the stars
      are gold — that colour is a convention, `--c-primary` is not.
   ⚠️ Everything the script drives is hidden until `.pdr--js` lands, so a
      no-JS page never shows a chip that does nothing.
   ========================================================================== */

.pdr {
  --pdr-gold: #e8a317;
  padding-block: var(--s-12) var(--s-10);
  border-block-start: 1px solid var(--c-line);
}

/* ---------- section heading ---------- */
.pdr__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-block-end: var(--s-6);
}
.pdr__headicon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 12px;
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
}
.pdr__headicon svg {
  inline-size: 20px;
  block-size: 20px;
}
.pdr__title {
  font-size: var(--t-xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0;
}
.pdr__sub {
  font-size: var(--t-sm);
  color: var(--c-muted);
  margin: 4px 0 0;
}

/* ---------- notices ---------- */
.pdr__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  margin-block-end: var(--s-5);
}
.pdr__noteicon svg {
  inline-size: 18px;
  block-size: 18px;
  display: block;
}
.pdr__note--ok {
  background: var(--c-green-soft);
  color: #1f6b32;
}
.pdr__note--err {
  background: #fdecea;
  color: var(--c-crit);
}

/* ==========================================================================
   FRACTIONAL STARS
   ⚠️ Two identical rows stacked; the gold one is clipped to `inline-size: N%`
   from PHP. Whole-star rounding painted ۴٫۶ and ۵٫۰ identically, which is the
   one thing a rating row must never do. `inset-inline-start` anchors the clip
   to the reading edge, so RTL and LTR both fill from the first star.
   ========================================================================== */
.pdr-stars {
  position: relative;
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
  vertical-align: middle;
}
.pdr-stars__row {
  display: block;
  color: var(--c-line-strong);
}
.pdr-stars__row--on {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  overflow: hidden;
  color: var(--pdr-gold);
}
.pdr-stars--lg {
  font-size: 26px;
  letter-spacing: 4px;
}
.pdr-stars--sm {
  font-size: 12px;
  letter-spacing: 1px;
}

/* ==========================================================================
   RATING SUMMARY CARD
   ========================================================================== */
.pdr-sum {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
  padding: var(--s-6) var(--s-8);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  margin-block-end: var(--s-6);
}
.pdr-sum__score {
  text-align: center;
  /* The rule between score and bars, on the side the bars are on. */
  border-inline-end: 1px solid var(--c-line);
  padding-inline-end: var(--s-8);
}
.pdr-sum__avg {
  display: block;
  font-size: var(--t-3xl);
  line-height: 1;
  font-weight: 700;
  color: var(--c-ink);
  margin-block-end: 10px;
}
.pdr-sum__count {
  font-size: var(--t-sm);
  color: var(--c-muted);
  margin: 10px 0 0;
}
.pdr-sum__rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-ok);
  margin: 8px 0 0;
}
.pdr-sum__recicon {
  display: grid;
  place-items: center;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: var(--c-ok);
  color: #fff;
}
.pdr-sum__recicon svg {
  inline-size: 11px;
  block-size: 11px;
}

/* ---------- distribution bars ---------- */
.pdr-sum__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.pdr-bar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) 3.5ch;
  align-items: center;
  gap: 10px;
}
.pdr-bar__label {
  font-size: var(--t-xs);
  color: var(--c-body);
  white-space: nowrap;
}
.pdr-bar__track {
  block-size: 8px;
  border-radius: 99px;
  background: var(--c-wash);
  overflow: hidden;
}
.pdr-bar__fill {
  display: block;
  block-size: 100%;
  border-radius: 99px;
  background: var(--c-primary);
  /* Width is set inline from the data. 0% stays invisible on purpose. */
  min-inline-size: 0;
}
.pdr-bar__n {
  font-size: var(--t-xs);
  color: var(--c-muted);
  text-align: start;
}

/* ==========================================================================
   TOOLBAR — filter chips + sort. JS-only.
   ========================================================================== */
.pdr-tools {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-5);
}
.pdr--js .pdr-tools {
  display: flex;
}
.pdr-tools__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
}
.pdr-chip {
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--c-line);
  border-radius: 99px;
  background: var(--c-surface);
  color: var(--c-body);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.pdr-chip:hover {
  border-color: var(--c-primary);
  color: var(--c-primary-deep);
}
.pdr-chip.is-on {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
  color: var(--c-primary-deep);
}
.pdr-chip:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.pdr-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.pdr-sort__label {
  font-size: var(--t-xs);
  color: var(--c-muted);
}
.pdr-sort__select {
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  /* Room for the chevron on the end side. */
  padding: 8px 12px;
  padding-inline-end: 32px;
  cursor: pointer;
  appearance: none;
}
.pdr-sort__select:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}
.pdr-sort__chev {
  position: absolute;
  inset-inline-end: 10px;
  pointer-events: none;
  color: var(--c-muted);
  display: grid;
  place-items: center;
}
.pdr-sort__chev svg {
  inline-size: 14px;
  block-size: 14px;
}

/* ==========================================================================
   THE LIST
   ========================================================================== */
.pdr__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.pdr__empty,
.pdr__nomatch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--s-10) var(--s-5);
  background: var(--c-paper);
  border: 1px dashed var(--c-line-strong);
  border-radius: 16px;
  color: var(--c-muted);
  font-size: var(--t-sm);
  text-align: center;
}
/* ⚠️ `display: flex` above beats the `hidden` attribute, and the script toggles
   exactly that attribute — without this the "no match" panel is on screen next
   to the reviews it claims do not exist. */
.pdr__nomatch[hidden] {
  display: none;
}
.pdr__emptyicon svg {
  inline-size: 20px;
  block-size: 20px;
  display: block;
}

/* ---------- one review ---------- */
.pdr-item {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pdr-item:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-1);
}
.pdr-item[hidden] {
  display: none;
}

.pdr-item__who {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  align-content: start;
}
.pdr-item__avatar {
  grid-row: span 2;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
.pdr-item__name {
  font-weight: 600;
  color: var(--c-ink);
  align-self: end;
  overflow-wrap: anywhere;
}
.pdr-item__date {
  font-size: var(--t-xs);
  color: var(--c-muted);
  align-self: start;
}

.pdr-item__body {
  margin: 10px 0 0;
  color: var(--c-body);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

/* ---------- our reply under a review ---------- */
.pdr-item__reply {
  margin-block-start: var(--s-4);
  padding: 14px 16px;
  background: var(--c-paper);
  border-inline-start: 3px solid var(--c-primary);
  border-radius: 12px;
}
.pdr-item__reply p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-body);
  line-height: var(--lh-snug);
}
.pdr-item__replyfrom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-primary-deep);
  margin-block-end: 6px;
}
.pdr-item__replyicon svg {
  inline-size: 14px;
  block-size: 14px;
  display: block;
}

/* ==========================================================================
   PAGER — built by the script, so it only exists with JS.
   ========================================================================== */
.pdr-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-block-start: var(--s-6);
}
.pdr-pager[hidden] {
  display: none;
}
.pdr-pager__btn {
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  min-inline-size: 36px;
  block-size: 36px;
  padding-inline: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-surface);
  color: var(--c-body);
  cursor: pointer;
}
.pdr-pager__btn:hover:not(:disabled) {
  border-color: var(--c-primary);
  color: var(--c-primary-deep);
}
.pdr-pager__btn[aria-current='true'] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.pdr-pager__btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.pdr-pager__btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
/* ⚠️ The arrows point at the previous/next page, so they must flip with the
   document. `scale(-1,1)` on the RTL side is cheaper than two icon names. */
.pdr-pager__btn svg {
  inline-size: 16px;
  block-size: 16px;
}
[dir='rtl'] .pdr-pager__btn svg {
  transform: scaleX(-1);
}

/* ==========================================================================
   THE FORM PANEL
   ========================================================================== */
.pdr-form {
  margin-block-start: var(--s-8);
  padding: var(--s-6) var(--s-8) var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
}
.pdr-form__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-block-end: var(--s-5);
}
.pdr-form__headicon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 11px;
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
}
.pdr-form__headicon svg {
  inline-size: 18px;
  block-size: 18px;
}
.pdr-form__title {
  font-size: var(--t-lg);
  color: var(--c-ink);
  margin: 0;
}
.pdr-form__sub {
  font-size: var(--t-xs);
  color: var(--c-muted);
  margin: 3px 0 0;
}

/* ⚠️ THE HONEYPOT. Hidden from people, left in the DOM for robots. Never
   `display:none` alone on a field some bots check for — off-screen is the
   pattern the contact forms already use. */
.pdr-form__hp {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* Rating and body across the top, then name and email side by side. */
.pdr-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-4) var(--s-5);
}
.pdr-form__rating,
.pdr-form__field--body {
  grid-column: 1 / -1;
}

.pdr-form__rating {
  border: 0;
  padding: 0;
  margin: 0;
}
.pdr-form__rating legend {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-ink);
  padding: 0;
  margin-block-end: 6px;
}

/* ⚠️ `row-reverse` + the inputs emitted 5→1 is what makes the sibling selector
   work: hovering star 3 must light 1..3, and CSS can only reach LATER siblings.
   Reversing the DOM order and the flex direction gets both. */
.pdr-form__stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}
.pdr-form__stars input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pdr-form__stars label {
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  color: var(--c-line-strong);
  transition: color 0.12s, transform 0.12s;
}
.pdr-form__stars label:hover,
.pdr-form__stars label:hover ~ label,
.pdr-form__stars input:checked ~ label {
  color: var(--pdr-gold);
}
.pdr-form__stars label:hover {
  transform: scale(1.1);
}
.pdr-form__stars input:focus-visible + label {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 3px;
}
.pdr-form__rating.is-bad legend {
  color: var(--c-crit);
}

.pdr-form__field label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-ink);
  margin-block-end: 6px;
}
.pdr-form__field input,
.pdr-form__field textarea {
  inline-size: 100%;
  font: inherit;
  font-size: var(--t-sm);
  padding: 11px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: 12px;
  background: var(--c-paper);
  color: var(--c-ink);
  transition: border-color 0.15s, background-color 0.15s;
}
.pdr-form__field textarea {
  resize: vertical;
  min-block-size: 120px;
  line-height: var(--lh-snug);
}
.pdr-form__field input::placeholder,
.pdr-form__field textarea::placeholder {
  color: var(--c-muted);
}
.pdr-form__field input:focus,
.pdr-form__field textarea:focus {
  background: var(--c-surface);
  border-color: var(--c-primary);
  outline: 2px solid var(--c-primary-soft);
  outline-offset: 0;
}
.pdr-form__field input[aria-invalid='true'],
.pdr-form__field textarea[aria-invalid='true'] {
  border-color: var(--c-crit);
}

/* Error on the start side, character counter on the end side. */
.pdr-form__under {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-block-start: 5px;
  min-block-size: 1em;
}
.pdr-form__under .pdr-form__err {
  margin: 0;
}
.pdr-form__counter {
  font-size: var(--t-xs);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}
.pdr-form__counter.is-near {
  color: var(--c-warn);
}

.pdr-form__req {
  color: var(--c-crit);
}
.pdr-form__note {
  font-size: var(--t-xs);
  color: var(--c-muted);
  margin-block-start: 5px;
}
.pdr-form__err {
  font-size: var(--t-xs);
  color: var(--c-crit);
  margin-block-start: 5px;
}
/* Screen-reader-only: the stars are aria-hidden decoration, so the number has
   to be readable somewhere. */
.pdr-form__sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pdr-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--c-line);
}
.pdr-form__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-xs);
  color: var(--c-muted);
  margin: 0;
  flex: 1 1 240px;
}
.pdr-form__hinticon svg {
  inline-size: 16px;
  block-size: 16px;
  display: block;
}
.pdr-form__send {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  padding: 12px 32px;
  border: 0;
  border-radius: 12px;
  background: var(--c-primary);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s;
}
.pdr-form__send:hover {
  background: var(--c-primary-deep);
}
.pdr-form__send:focus-visible {
  outline: 2px solid var(--c-primary-deep);
  outline-offset: 2px;
}

/* ==========================================================================
   NARROWER SCREENS
   ========================================================================== */
@media (max-width: 900px) {
  .pdr-sum {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    padding: var(--s-5);
  }
  .pdr-sum__score {
    border-inline-end: 0;
    padding-inline-end: 0;
    padding-block-end: var(--s-5);
    border-block-end: 1px solid var(--c-line);
  }
  .pdr-item {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .pdr-form {
    padding: var(--s-5);
  }
}

@media (max-width: 620px) {
  .pdr {
    padding-block: var(--s-10) var(--s-8);
  }
  .pdr-form__grid {
    grid-template-columns: 1fr;
  }
  .pdr-sum__avg {
    font-size: var(--t-2xl);
  }
  /* The star column on a distribution row is the first thing to go: the
     wording already says "۵ ستاره". */
  .pdr-bar .pdr-stars {
    display: none;
  }
  .pdr-form__foot {
    flex-direction: column;
    align-items: stretch;
  }
  .pdr-form__send {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdr-chip,
  .pdr-item,
  .pdr-form__stars label,
  .pdr-form__field input,
  .pdr-form__field textarea,
  .pdr-form__send {
    transition: none;
  }
}