/* ==========================================================================
   Product detail page.

   Carries the same language as the "Toy Tag" product card: the product's accent
   colour on --pd, a tinted radial stage behind a cut-out photo, dashed tear
   lines, pill buttons, and the body face for headings — the same one the card
   sets its product name in. The accent is set inline from the product id so a
   product looks the same here as it does on its card.

   Replaces the old .page-product .pd-* rules that used to live in style.css.
   ========================================================================== */

.page-product {
  --pd: #fcc603;
  --pd-tint: #fff2c9;
  --pd-shade: #b08a00;
  --ink: #001430;
  --muted: #69778a;
  --line: #ececf1;

  background: #fff;
}

.page-product > .container {
  max-width: 1240px;
  padding-bottom: 70px;
}

/* --- breadcrumb ----------------------------------------------------------- */

.page-product .breadcrumb {
  background: none;
  /* No padding or margin here on purpose. style.css sets both with !important
     to beat Bootstrap's left indent, so anything written here loses silently -
     this used to say `padding: 22px 0 20px` and it never once applied. The
     vertical spacing lives in that one rule now. */
  font-size: 13.5px;
  color: var(--muted);
}

.page-product .breadcrumb a { color: var(--muted); }
.page-product .breadcrumb a:hover { color: var(--pd-shade); }

/* ONE LINE, AND THE PRODUCT NAME IS WHAT GETS CUT.
   The last crumb is the product's own name, and the supplier names here run to
   a dozen words - on a phone that wrapped to three lines of grey text above the
   photo, which is a lot of nothing to scroll past before seeing the toy.
   Capping the whole line puts the ellipsis exactly where it belongs, because
   the name is the tail: "Home > Shop Toys > Stationery. > KHODALEMART Colo…".
   The <span> around it carries a title="" so the full name is still there on
   hover. */
.page-product .breadcrumb {
  /* display: block is doing the work, not the three lines under it.
     Bootstrap declares `.breadcrumb { display: flex; flex-wrap: wrap }`, and on
     a flex container text-overflow does nothing at all - the crumbs become flex
     items and simply wrap to a second line, which is exactly what this rule was
     written to stop. Back to normal inline flow and the ellipsis works. */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- two columns ---------------------------------------------------------- */

.page-product .pd-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px;
  align-items: start;
}

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

/* The tinted stage the photo sits on. No border, no bar.

   It used to carry a 44px accent bar across the top - an oversized copy of the
   one the product card had. The card's was taken off a while ago (see the notes
   at the top of product-card.css: "not in a bar across the top", and its
   padding cut from 42px to 14px), and this one was missed, so the detail page
   went on wearing a band the rest of the site had dropped.

   The 44px `padding-top` went with it. That padding existed only to keep the
   photo clear of the bar; left behind it would have parked the picture 44px
   below centre with a strip of nothing above it - which is the trap in deleting
   an absolutely-positioned element and thinking the job is done. */
.page-product .pd-stage {
  position: relative;
  /* Slightly wider than tall: a square stage runs taller than the info column
     beside it and leaves a band of dead space above the tabs. */
  aspect-ratio: 1 / 0.88;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 62%, var(--pd-tint) 0%, #fff 70%);
  box-shadow: 0 10px 30px rgba(0, 20, 48, 0.09);
  overflow: hidden;

  /* flex, not `display: grid; place-items: center`.
     With grid, the row was sized from the image's own square box - 92% of the
     stage's WIDTH, which on a 1/0.88 stage is taller than the stage itself. The
     photo was then centred inside that too-tall row and clipped at the bottom:
     22px of air above it, 2px of it cut off below. It looked like the picture
     had simply been nudged down, which is why it survived the bar going.

     Flex sizes on the cross axis from the container, so the slack is split
     evenly. Measured after the change: 21px above, 21px below, offset 0. */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* No cut-out for this photo (see CUTOUT_SKIP) — it still carries its own white
   backdrop, which would read as a white block sitting on the tint. */
.page-product .pd-stage.is-plain { background: #fff; }

/* Which of the gallery you're looking at, without a second row of chrome. */
.page-product .pd-count {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 700;
  color: var(--pd-shade);
  box-shadow: 0 2px 8px rgba(0, 20, 48, 0.10);
}

.page-product .pd-stage img {
  /* max-*, not width/height. A fixed `height: 92%` on a square photo fought the
     92% width and resolved to neither - the element came out 549x505 in a 597x525
     stage. As a maximum it scales proportionally and stays inside: 483x483. */
  width: auto;
  height: auto;
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Only a cut-out earns a shadow — an original still sitting on its white
   background would just get a grey rectangle under it. */
.page-product .pd-stage img.is-cutout {
  filter: drop-shadow(0 14px 18px rgba(0, 20, 48, 0.16));
}

.page-product .pd-stage:hover img { transform: scale(1.05); }

.page-product .pd-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.page-product .pd-thumb {
  width: 74px;
  height: 74px;
  padding: 6px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.page-product .pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.page-product .pd-thumb:hover { transform: translateY(-2px); }

.page-product .pd-thumb.active {
  border-color: var(--pd);
  background: var(--pd-tint);
  box-shadow: 0 0 0 3px rgba(0, 20, 48, 0.04);
}

/* Clicking a <button> leaves it focused, and Chrome draws its default dark ring
   around it — which reads as a stray black border on the active thumbnail and
   the active tab. Drop it for pointer clicks, and give keyboard users a ring in
   the product's own colour instead of removing the cue altogether. */
.page-product .pd-thumb:focus,
.page-product .pd-tabbtn:focus,
.page-product .pd-qty button:focus {
  outline: none;
}

.page-product .pd-thumb:focus-visible,
.page-product .pd-tabbtn:focus-visible,
.page-product .pd-qty button:focus-visible {
  outline: 3px solid var(--pd);
  outline-offset: 2px;
}

/* --- info panel ----------------------------------------------------------- */

.page-product .pd-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--pd-shade);
  letter-spacing: 0.06em;
}

.page-product .pd-rating span {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0;
}

/* Five empty stars rendered in the accent colour read as a faded rating rather
   than "nobody has reviewed this yet". */
.page-product .pd-rating.is-empty { color: #ccd2db; }

/* No family of its own — it inherits the body face, which is what the product
   cards use for their names. The same product read in one font on the card and
   another on its own page.

   SIZE: 26px, brought down from 36px at the shop's request.

   36px was set so the title would not lose to the price under it. That reads
   well on a short name, and badly on a real one: the supplier names in this
   catalogue run to a dozen words ("KHODALEMART Colorful Mechanical Calculator,
   12 Digits Large Display Cute Calculator for Desk Office...") and at 36px one
   of those filled six lines and pushed the price, the stock badge and the Add
   to Cart button off the first screen.

   26px is still the largest text in the panel after the price, and a long name
   now takes three lines instead of six. */
.page-product .pd-title {
  margin: 8px 0 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* --- the name, bounded ----------------------------------------------------
   TWO LINES, then an ellipsis and a Read more.

   Bounding it is the point: a name can be any length the supplier's listing was,
   and at 26px an unlucky one pushed the price, the stock badge and Add to Cart
   below the fold.

   WHY TWO AND NOT THREE. It was three at first, and on the live site that meant
   the Read more never appeared - measured on the longest name in the catalogue,
   "KHODALEMART Colorful Mechanical Calculator, 12-Digit Large Display for Office
   & Desk", 84 characters:

       clamped to 3 lines   92px shown, 94px total   -> fits, no button
       clamped to 2 lines   61px shown, 94px total   -> cut, button appears

   (Those two figures came from the scrollHeight test the script no longer uses
   - see product-details.php for why it had to go. The conclusion holds: it is
   the line count that differs between them, not the way it was counted.)

   Three lines was a ceiling nothing in the catalogue reached, so the feature was
   real but invisible. Two lines is also what the product cards use
   (product-card.css), so a name is cut at the same place on the grid and on the
   page it leads to.

   Change the 2 below to change how much shows - and the LINES in the script in
   product-details.php with it, because that is the number the script measures
   the name against when it decides whether to offer Read more at all. Those two
   are the only places the figure appears; it is measured from there, never
   counted in words.

   ADDED BY THE SCRIPT, not written on the element. Without it the title is a
   plain heading showing the whole name - see the note in product-details.php
   for why that is the right way round. */
.page-product .pd-title.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A button, because it does something on this page - not an <a href="#">, which
   would put a junk entry in the browser's history and scroll the page. Styled
   to read as a link so it does not compete with Add to Cart.

   THE COLOUR IS THE SHOP'S, NOT THE PRODUCT'S.
   This was var(--pd-shade) at first, and --pd-shade is set INLINE FROM THE
   PRODUCT ID (see the style="" on .page-product in product-details.php) - so
   Read more came out dark green on one toy, mustard on the next and blue on the
   one after. That accent is right for the badges and the photo stage, which are
   meant to feel like the product's own card. It is wrong for a control: a
   control should look the same everywhere, or it reads as an accident.

   --ck-plum is the shop's magenta from chrome.css, which every page loads.

   `font: inherit` first, so the family and style come from the panel - the same
   Poppins the title above it is set in - and only size, weight and colour are
   stated here. Nothing declares a font-family, on purpose: if the site's face
   ever changes, this follows it. */
.page-product .pd-title-more {
  display: inline-block;
  margin: 7px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1px;
  color: var(--ck-plum, #ab2d72);
  /* No underline sitting there all the time - it made a small link look like
     raw unstyled HTML under a heavy heading. It arrives on hover instead. */
  text-decoration: none;
  cursor: pointer;
  transition: color .18s;
}

.page-product .pd-title-more:hover {
  color: var(--ink, #001430);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Keyboard users need to see where they are. The heading sits at the top of the
   panel, so an outline here is the only sign the button has focus. */
.page-product .pd-title-more:focus-visible {
  outline: 2px solid var(--ck-plum, #ab2d72);
  outline-offset: 3px;
  border-radius: 3px;
}

/* The script hides the button with the `hidden` attribute, and `hidden` is only
   a CSS rule: the browser's own [hidden] { display: none } is one class worth of
   specificity, while `display: inline-block` above is two. Bootstrap's reset
   happens to say !important and so wins today - but that is a stylesheet this
   page merely happens to load. Said here as well, so a hidden button stays
   hidden whatever else is on the page. */
.page-product .pd-title-more[hidden] {
  display: none;
}

.page-product .pd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.page-product .pd-pill {
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--pd-tint);
  color: var(--pd-shade);
}

.page-product .pd-pill.stock { background: #e7f7ee; color: #1a7f4b; }
.page-product .pd-pill.out { background: #fdecec; color: #c0392b; }

.page-product .pd-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.page-product .pd-price .new {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pd-shade);
}

.page-product .pd-price .new sup {
  font-size: 19px;
  top: -0.62em;
  margin-right: 2px;
}

.page-product .pd-price .old {
  font-size: 17px;
  font-weight: 600;
  color: #9aa1ae;
  text-decoration: line-through;
}

.page-product .pd-price .save {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--pd);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
}

.page-product .pd-desc {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-product .pd-tear {
  margin: 22px 0 0;
  border: 0;
  border-top: 2px dashed #e2e6ed;
}

/* --- buy row -------------------------------------------------------------- */

.page-product .pd-buy {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.page-product .pd-qty {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 54px;
  border: 2px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

/* Inset round chips, not full-height cells. A cell that reaches the pill's
   rounded end has its hover fill clipped by the radius, which shows as a pale
   crescent trapped against the border. */
.page-product .pd-qty button {
  width: 38px;
  height: 38px;
  margin: 0 3px;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  transition: background 0.18s, color 0.18s;
}

.page-product .pd-qty button:hover { background: var(--pd-tint); color: var(--pd-shade); }

.page-product .pd-qty input {
  width: 42px;
  height: 100%;
  border: 0;
  outline: 0;
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: none;
}

.page-product .pd-add {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  border-radius: 999px;
  background: var(--pd);
  color: #fff;
  font-size: 15.5px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.22s, transform 0.22s, letter-spacing 0.22s;
}

.page-product .pd-add:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
  letter-spacing: 0.03em;
}

.page-product .pd-wish {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #c3cad4;
  font-size: 17px;
  text-decoration: none;
  transition: 0.2s;
}

.page-product .pd-wish:hover { color: #e83e8c; border-color: #f7cfe1; transform: scale(1.05); }
.page-product .pd-wish.active { color: #e83e8c; border-color: #f7cfe1; }

/* --- reassurance ---------------------------------------------------------- */

.page-product .pd-assure {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.page-product .pd-assure div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-product .pd-assure i {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--pd-tint);
  color: var(--pd-shade);
  font-size: 15px;
}

.page-product .pd-assure span {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.page-product .pd-assure strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

/* --- tabs ----------------------------------------------------------------- */

.page-product .pd-tabs { margin-top: 56px; }

.page-product .pd-tabhead {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.page-product .pd-tabhead::-webkit-scrollbar { display: none; }

.page-product .pd-tabbtn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 22px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  transition: 0.2s;
}

.page-product .pd-tabbtn:hover { border-color: var(--pd); color: var(--pd-shade); }

.page-product .pd-tabbtn.active {
  background: var(--pd);
  border-color: var(--pd);
  color: #fff;
}

.page-product .pd-tabpane {
  display: none;
  margin-top: 16px;
  padding: 26px 28px;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: #fff;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-product .pd-tabpane.active { display: block; }
.page-product .pd-tabpane p:last-child { margin-bottom: 0; }

/* --- specifications ------------------------------------------------------- */

.page-product .pd-specs {
  width: 100%;
  border-collapse: collapse;
}

.page-product .pd-specs tr + tr td { border-top: 1px solid var(--line); }

.page-product .pd-specs td {
  padding: 12px 0;
  font-size: 14.5px;
  color: var(--ink);
}

.page-product .pd-specs td:first-child {
  width: 40%;
  color: var(--muted);
  font-weight: 600;
}

/* --- reviews -------------------------------------------------------------- */

/* Score on the left, the spread of stars on the right. The average alone hides
   the shape of the thing: a 4.2 built from twenty fives and two ones is a
   different toy from a 4.2 where everyone said four. */
.page-product .pd-revsum {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--pd-tint);
}

.page-product .pd-revsum__score { text-align: center; flex: 0 0 auto; }
.page-product .pd-revsum__score b { display: block; font-size: 40px; font-weight: 800; line-height: 1; color: var(--pd-shade); }
.page-product .pd-revsum__score .pd-revstars { margin: 7px 0 3px; justify-content: center; }
.page-product .pd-revsum__score small { display: block; font-size: 12.5px; color: var(--muted); }

.page-product .pd-revsum__bars { flex: 1 1 240px; min-width: 0; }

.page-product .pd-revbar { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.page-product .pd-revbar__n { display: flex; align-items: center; gap: 2px; width: 30px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.page-product .pd-revbar__n i { font-style: normal; color: #fcc603; font-size: 11px; }

.page-product .pd-revbar__track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}

.page-product .pd-revbar__track > span { display: block; height: 100%; border-radius: 999px; background: #fcc603; }
.page-product .pd-revbar__c { width: 22px; text-align: right; font-size: 12px; color: var(--muted); }

/* --- the photo strip ------------------------------------------------------
   Above the paragraphs on purpose: a parent scrolling a product page looks at
   pictures long before they read anyone's sentence. */
.page-product .pd-revshots { margin-bottom: 22px; }

.page-product .pd-revshots h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink);
}

.page-product .pd-revshots h3 span {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--pd-tint);
  font-size: 12px;
  color: var(--pd-shade);
}

/* A scroller, not a wrapping grid: twenty customer photos should not push the
   reviews themselves two screens down the page. */
.page-product .pd-revshots__strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.page-product .pd-revshot {
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--pd-tint);
  cursor: zoom-in;
}

.page-product .pd-revshot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.22s; }
.page-product .pd-revshot:hover img { transform: scale(1.08); }
.page-product .pd-revshot:focus-visible { outline: 3px solid var(--pd); outline-offset: 2px; }

.page-product .pd-revlist { list-style: none; margin: 0; padding: 0; }
.page-product .pd-revlist li + li { margin-top: 14px; }

.page-product .pd-rev {
  display: flex;
  gap: 13px;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
}

.page-product .pd-rev__body { flex: 1; min-width: 0; }

.page-product .pd-rev__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.page-product .pd-rev__meta { text-align: right; font-size: 12px; color: var(--muted); }

.page-product .pd-revverified {
  display: block;
  font-weight: 700;
  color: #1f9e78;
}

.page-product .pd-revverified i { font-size: 11px; }

.page-product .pd-revwho {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pd);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.page-product .pd-revname { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.page-product .pd-revtext { margin: 7px 0 0; font-size: 14px; line-height: 1.65; }

/* The author's own review, before anyone has checked it. Dashed and tinted so
   it plainly is not what the rest of the page is showing the public. */
.page-product .pd-rev.is-mine {
  border-style: dashed;
  border-color: #f0dbe8;
  background: #fdf9fb;
}

.page-product .pd-revmine {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 7px 11px;
  border-radius: 10px;
  background: #fff4e0;
  font-size: 12.5px;
  font-weight: 600;
  color: #b06f00;
}

.page-product .pd-revmine i { font-size: 11px; }

.page-product .pd-revphotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.page-product .pd-revphotos .pd-revshot { width: 82px; height: 82px; border-radius: 12px; }

/* --- the viewer ----------------------------------------------------------- */

.pd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 30px 20px;
  background: rgba(10, 4, 8, 0.86);
  cursor: zoom-out;
}

.pd-lightbox[hidden] { display: none; }
.pd-lightbox figure { margin: 0; text-align: center; cursor: default; }

.pd-lightbox img {
  max-width: min(920px, 92vw);
  max-height: 78vh;
  border-radius: 14px;
  display: block;
}

.pd-lightbox figcaption { margin-top: 12px; font-size: 13.5px; color: #e3d6dd; }

.pd-lightbox__close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s;
}

.pd-lightbox__close:hover { background: rgba(255, 255, 255, 0.3); }

@media (max-width: 575px) {
  .page-product .pd-revsum { gap: 18px; padding: 15px; }
  .page-product .pd-revsum__score b { font-size: 32px; }
  .page-product .pd-revshot { width: 88px; height: 88px; }
  .page-product .pd-rev__head { flex-direction: column; gap: 4px; }
  .page-product .pd-rev__meta { text-align: left; }
}

/* --- related -------------------------------------------------------------- */

.page-product .pd-related { margin-top: 60px; }

/* Same face as the title above it — a different face here would put two
   different fonts in the two headings of one page. */
.page-product .pd-related h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 18px;
}

.page-product .pd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 991px) {
  .page-product .pd-main { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .page-product .pd-stage { aspect-ratio: 1 / 0.8; }
  .page-product .pd-title { font-size: 24px; }
  .page-product .pd-price .new { font-size: 31px; }
  .page-product .pd-tabs { margin-top: 42px; }
  .page-product .pd-related { margin-top: 46px; }
}

/* ==========================================================================
   Phone
   ========================================================================== */

@media (max-width: 767px) {
  .page-product > .container { padding-bottom: 50px; }
  .page-product .breadcrumb { font-size: 12.5px; }   /* padding: see above */

  .page-product .pd-stage { border-radius: 18px; aspect-ratio: 1 / 0.86; }
  .page-product .pd-count { right: 10px; bottom: 10px; padding: 4px 10px; font-size: 11px; }
  .page-product .pd-thumb { width: 60px; height: 60px; border-radius: 12px; }

  .page-product .pd-title { font-size: 21px; }
  .page-product .pd-price .new { font-size: 28px; }
  .page-product .pd-price .new sup { font-size: 16px; }
  .page-product .pd-desc { font-size: 14px; }

  /* The stepper and the heart sit on one row, the button gets the next one —
     a 54px-tall button squeezed next to both is unusable on a phone. */
  .page-product .pd-buy { flex-wrap: wrap; }
  .page-product .pd-qty { height: 48px; order: 1; }
  .page-product .pd-wish { width: 48px; height: 48px; order: 2; }
  .page-product .pd-add { order: 3; flex: 1 0 100%; height: 50px; font-size: 15px; }

  .page-product .pd-assure {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 20px;
    padding-top: 18px;
  }

  .page-product .pd-tabpane { padding: 20px 18px; border-radius: 16px; font-size: 14px; }
  .page-product .pd-tabbtn { height: 40px; padding: 0 17px; font-size: 13px; }
  .page-product .pd-specs td { font-size: 13.5px; padding: 10px 0; }
  .page-product .pd-related h2 { font-size: 21px; }
  .page-product .pd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 359px) {
  .page-product .pd-grid { grid-template-columns: minmax(0, 1fr); }
}