/* ==========================================================================
   PRODUTO — DETALHE: layout that only exists on this page. Text, boxes and images come from presets.css; the carousel, the rolling
   step buttons, the choice options, the viewer / sheet pop-ups, the stats table and the call-to-action buttons from components.css.
   Proportions are measured on the sketch (canvas 1144px, container 81vw): content column 65.6% · gap 3% · buy panel 31.4%.
   Every big box of this page (photo window, buy panel, features box, tiles, table, pop-ups) is a pill 2.
   ========================================================================== */

.pd { --pd-gap: clamp(1rem, 2vw, 2.5rem); --pd-breath: clamp(1rem, 2vw, 2.5rem); --pd-section: clamp(1.5rem, 3.5vw, 4.5rem); display: grid; gap: var(--pd-section); }
.pd__content { display: contents; }   /* below 1025px the blocks of the content column interleave with the buy panel (see order) */
.pd__msg { grid-column: 1 / -1; }

/* ---------- phones and tablets: one column, gallery → buy panel → the rest ---------- */
@media (max-width: 1024px) {
  .pd__gallery { order: 1; } .pd__buy { order: 2; } .pd__info { order: 3; } .pd__tiles { order: 4; } .pd__components { order: 5; }

  /* On a phone the boxes are as wide as the screen, so the viewport-based tokens would drop to their floors (11px / 5px radii, tiny
     text) and the page would stop looking like the desktop one. Here the radii keep their desktop look (≈ 20px / 10px) and the text
     sizes have larger floors. The same values apply to the viewer (it lives outside .pd); the text pop-up has its own copy in components.css. */
  .pd, .viewer {
    --pill-2: clamp(18px, 5.3vw, 22px); --pill-3: calc(var(--pill-2) / 2);
    --fs-0: clamp(0.95rem, 1.5vw, 1.1rem);
    --fs-1: clamp(1.05rem, 2.6vw, 1.35rem);
    --fs-2: clamp(1.15rem, 2.8vw, 1.5rem);
    --fs-3: clamp(1.45rem, 3.4vw, 1.9rem);
    --fs-4: clamp(1.9rem, 4.6vw, 2.6rem);
  }
}

/* ---------- desktop: two columns. The buy panel is sticky: it rides up with the page until the END of the panel is on the screen
   (with a breath under it), then stays put while the content keeps scrolling; when the footer arrives it is released and goes up
   with the page. If the panel is shorter than the window, it simply sticks near the top. --buy-h is measured in JS. ---------- */
@media (min-width: 1025px) {
  .pd { grid-template-columns: minmax(0, 65.6fr) minmax(0, 31.4fr); column-gap: 3%; row-gap: 0; align-items: start; }
  .pd__content { display: grid; gap: var(--pd-section); min-width: 0; }
  .pd__buy { position: sticky; top: min(var(--pd-gap), calc(100dvh - var(--buy-h, 0px) - var(--pd-breath))); }
}

/* ---------- gallery: the big window + a strip of 4 thumbnails ---------- */
.pd__gallery { display: grid; gap: var(--marquee-gap); min-width: 0; }
.pd__main { aspect-ratio: 602 / 398; }   /* + .carousel .window .pill-2 */
.pd__main .carousel__btn { top: 50%; }
.pd__open { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: none; cursor: zoom-in; }   /* the photo opens the viewer; under the step buttons */
.pd__thumbs { position: relative; }
.pd__strip { position: relative; display: flex; gap: var(--marquee-gap); margin: 0; padding: 0; list-style: none; overflow-x: hidden; scroll-behavior: smooth; }
.pd__strip > li { flex: 0 0 calc((100% - 3 * var(--marquee-gap)) / 4); }
.pd__thumb { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1.75; padding: 0; border: 0; cursor: pointer; }
/* the current thumbnail: the blue ring is drawn INSIDE the thumbnail, over the photo's edge — it is the thumbnail's outer border, so no photo is left outside it */
.pd__thumb::after { content: ""; position: absolute; inset: 0; border: calc(var(--rim) * 1.4) solid transparent; border-radius: inherit; pointer-events: none; transition: border-color var(--dur-1) var(--ease-out); }
.pd__thumb.is-current::after { border-color: var(--blue-500); }
.pd__thumbs .carousel__btn { top: 50%; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear 0s; }
/* the strip's arrows appear and disappear with the site's standard motion (fade + a little scale, --dur-2 --ease-out) as the strip reaches its ends */
.pd__thumbs .carousel__btn.is-away { opacity: 0; transform: scale(0.6); visibility: hidden; pointer-events: none; transition-delay: 0s, 0s, var(--dur-2); }

/* ---------- title + text, and the box of features: the box is exactly one tile wide and tall (the third column of the tiles below) ---------- */
.pd__info { display: grid; gap: var(--pd-gap); min-width: 0; }
.pd__about { min-width: 0; }
.pd__about p { max-width: none; }
.pd__features {   /* + .pill-2 .fill-liquid .on-dark .text-fine; bullets, close to the edges as in the sketch */
  container-type: inline-size; margin: 0; padding: 0.75em 0.6em 0.75em 1.55em;
}
.pd__features li { margin-bottom: 0.25em; }
.pd__features li:last-child { margin-bottom: 0; }
@media (min-width: 640px) {
  .pd__info { grid-template-columns: minmax(0, 1fr) calc((100% - 2 * var(--marquee-gap)) / 3); column-gap: var(--marquee-gap); align-items: start; }
  .pd__features { aspect-ratio: 182 / 257; }
  .pd__features li { font-size: max(0.8rem, 7.3cqw); }   /* the box is one tile wide and tall: the text scales with it, sized so the 9 lines fill the tile without growing it */
}

/* ---------- the three tiles: Características · Geometria · Manual ---------- */
.pd__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--marquee-gap); margin: 0; padding: 0; list-style: none; }
.pd__tile { position: relative; display: block; width: 100%; aspect-ratio: 182 / 257; padding: 0; border: 0; text-align: left; text-decoration: none; cursor: pointer; }   /* + .window .pill-2 .link-host .text-white */
.pd__tile > .pd__label { position: absolute; left: 0.4em; bottom: 0.35em; z-index: 1; }   /* the label: .link-line */
@media (max-width: 639px) {
  .pd__tiles { grid-template-columns: minmax(0, 1fr); }
  .pd__tile { aspect-ratio: 16 / 7; }
  /* the Geometria photo is a tall close-up shown in a wide strip: zoom in on its dark red part (bottom left) so the white label reads clearly */
  .pd__tile[data-open="geometria"] .img { transform: scale(1.35); transform-origin: 8% 60%; object-position: 8% 60%; }
  .pd__features li { font-size: var(--fs-0); }   /* on a phone the features box is a full-width box, not a tile */
}

/* ---------- components table ---------- */
.pd__components { min-width: 0; }
.pd__components .page-title { margin-bottom: calc(var(--marquee-gap) - var(--descent, 0em)); }
.pd__components-note { margin-top: var(--marquee-gap); }

/* ---------- buy panel ---------- */
.pd__buy { display: grid; align-content: start; gap: calc(var(--marquee-gap) * 1.7); min-width: 0; }
.pd__head { display: grid; gap: 0.15em; }
.pd__head p, .pd__head h2 { margin: 0; }
.pd__brand { display: block; }   /* "Muzzicycles" over "Mississipi" (one line on phones, see below) */
.pd__head .pd__desc { margin-top: 0.5em; }   /* the model's short text (the same one as on its card), under the name */
.pd__head .pd__price { justify-self: end; margin-top: 1.1em; }   /* room above the price */
.pd__group { display: grid; gap: 0.5em; min-width: 0; }
.pd__group > p { margin: 0; }
.pd__group--size, .pd__group--color { position: relative; }   /* the small white windows (.pop) open under their button / swatches, inside their group */
/* the price: a one-line window whose text rolls vertically when the value changes (the .roll window; old and new share one cell) */
.pd__roll { display: grid; justify-items: end; }
.pd__roll-cell { grid-area: 1 / 1; white-space: nowrap; text-align: right; }
.pd__roll-cell.is-request { font-size: var(--fs-2); }   /* "VALOR À CONSULTAR" is a text, not a figure: one size down so it always fits the panel on one line */
.pd__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--marquee-gap) * 0.6); }
.pd__opts--line { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }   /* the sizes share the row equally, whatever their number */
.pd__opts--cards { grid-template-columns: minmax(0, 1fr); }   /* the models: one card per row, whatever the width */
.pd__guide { justify-self: end; margin: 0; padding: 0; border: 0; color: inherit; text-align: right; cursor: pointer; }   /* + .link-line .link-host .text-small: a text button */
.pd__pay { display: grid; gap: 0.4em; }
.pd__pay p { margin: 0; max-width: none; }

/* phones and tablets: the panel is as wide as the page, so every choice (sizes AND gears) is a short one-line button and each group's buttons
   share the row equally (3 gears + gaps = the width of 2 sizes + gap); the colors keep a sensible size and the buy button does not grow with the text */
@media (max-width: 1024px) {
  .pd__opts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .pd__opts--cards { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
  .opt:not(.opt--card) { display: block; aspect-ratio: auto; padding: 0.45em 0.6em; }
  .opt:not(.opt--card) > span { display: inline; white-space: nowrap; }
  .swatches { width: 100%; max-width: 21rem; }
  .pd__buy .cta { font-size: min(var(--fs-3), 1.6rem); }
  .viewer .carousel__btn, .viewer .lightbox__close { font-size: 1.3rem; }
  .viewer__thumb { --r: var(--pill-3); border-radius: var(--r); }   /* the pop-up's small thumbnails: a pill 2 on a 40px-tall photo would be a capsule (the page's own thumbnails keep the big photo's radius) */
}

/* narrow phones: three one-line gear buttons in a 280px panel need a slightly smaller text and tighter sides to keep "Nexus 3v" on one line */
@media (max-width: 400px) {
  .pd__opts { --fs-2: 1rem; }
  .opt:not(.opt--card) { padding-inline: 0.45em; }
}

/* phones: "Muzzicycles Mississipi" on one line and a larger price (after the panel rules above, so it overrides them) */
@media (max-width: 1024px) { .pd__roll-cell.is-request { font-size: var(--fs-3); } }   /* the panel is as wide as the page below 1025px */
@media (max-width: 639px) {
  .pd__brand { display: inline; }
  .pd__head .pd__price { font-size: var(--fs-4); margin-top: 0.5em; }
}

@media (prefers-reduced-motion: reduce) { .pd__strip { scroll-behavior: auto; } .pd__thumbs .carousel__btn { transition: none; } }