/* bioQ · product pages (UI-UX plan, phase 4, 19 Oct 2026): the flagship's order for every product.
   Category bar, picture and buy panel, what it is, rate and making time, making it yours, proof, questions, the ask.
   Every section appears only when there is something to put in it. */
/* the other kinds: one small button that opens a panel, so the product starts at once (22 Oct). On a laptop it sits in the crumb row
   (the hero is its positioned parent); up to 900 px it sits under the name, so the name is on the first screen of a phone (27 Oct) */
.pp-kinds{position:absolute;top:-33px;right:var(--bq-gut);z-index:20;display:flex;justify-content:flex-end;align-items:flex-start;height:44px}
.pp-kinds summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--bq-line);border-radius:var(--bq-pill);background:var(--bq-field);font:500 var(--bq-small)/1 var(--bq-sans);color:var(--bq-ink);cursor:pointer;list-style:none;transition:background var(--bq-fast) var(--bq-ease)}
.pp-kinds summary::-webkit-details-marker{display:none}
.pp-kinds summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--bq-fast) var(--bq-ease)}
.pp-kinds[open] summary{background:var(--bq-ink);color:var(--bq-on-ink);border-color:var(--bq-ink)}
.pp-kinds[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.pp-kinds .bq-chips{position:absolute;right:0;top:48px;width:min(640px,calc(100vw - 2 * var(--bq-gut)));display:flex;flex-wrap:wrap;gap:8px;padding:16px;background:var(--bq-plaster);border:1px solid var(--bq-line);border-radius:var(--bq-r);box-shadow:0 14px 40px rgba(10,46,48,.14)}
.pp-kinds .bq-chip{flex:none;min-height:44px;padding:0 16px 0 12px;font-size:var(--bq-small)}
@media (max-width:900px){.pp-kinds{position:relative;top:auto;right:auto;height:auto;justify-content:flex-start}.pp-kinds .bq-chips{left:0;right:auto;width:min(640px,calc(100vw - 2 * var(--bq-gut)))}}
.bq a.bq-chip[aria-current="page"]{background:var(--bq-ink);border-color:var(--bq-ink);color:var(--bq-on-ink)}

/* the first screen (27 Oct 2026, after Caraway and Aesop): the gallery left; right, every decision as a box, in one calm column.
   Gaps are 8 px steps: 8 inside a group, 16 between groups, 24 before the buttons.
   The kind and the name (.pp-head) come first in the markup so a phone reads them above the gallery; on a laptop the grid
   puts them back at the top of the right column, and the gallery spans both right-hand rows. */
.pp-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"stage head" "stage buy";column-gap:clamp(24px,4vw,64px);row-gap:16px;align-items:start;padding:16px var(--bq-gut) var(--bq-sec)}
.pp-stage{grid-area:stage;position:sticky;top:16px;display:flex;flex-direction:column;gap:16px}
.pp-stage .bq-stage{background:#fff}
.pp-stage .pg-thumbs{grid-template-columns:repeat(5,minmax(0,1fr))}
.pp-head{grid-area:head;display:flex;flex-direction:column;gap:16px;min-width:0;padding-top:clamp(0px,1.6vw,16px)}
.pp-head h1{margin:0;overflow-wrap:anywhere;font-size:var(--bq-d1)}
.pp-buy{grid-area:buy;display:flex;flex-direction:column;gap:16px;min-width:0}
/* the kind: a small capital label that links to its shelf, not a pill; it sits close over the name */
.pp-kicker,.bq a.pp-kicker{align-self:flex-start;display:inline-flex;align-items:center;min-height:24px;margin-bottom:-8px;font:600 var(--bq-cap)/1.4 var(--bq-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bq-soft);text-decoration:none}
.bq a.pp-kicker:hover{color:var(--bq-ink)}
/* the touch target is 44 px tall though the label is 12 px: an invisible pad above and below */
.pp-kicker{position:relative}
.pp-kicker::before{content:"";position:absolute;inset:-10px -4px}
.pp-buy>.bq-lead{margin:-8px 0 0;color:var(--bq-soft)}
.pp-proof{margin:0;font-size:var(--bq-small);line-height:1.5;color:var(--bq-soft)}
.pp-proof span{color:var(--bq-teal-deep);font-size:var(--bq-cap);vertical-align:1px;margin-right:4px}
.pp-proof a{color:var(--bq-ink)}
/* From, the number at section size, the unit; the GST line under it */
.pp-price{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--bq-line)}
.pp-price p{margin:0}
.pp-price p:first-child{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pp-price b{font:500 var(--bq-d2)/1.1 var(--bq-sans);letter-spacing:-.01em}
.pp-price__from,.pp-price__unit{font-size:var(--bq-body);color:var(--bq-soft)}
.pp-small{font-size:var(--bq-small);line-height:1.5;color:var(--bq-soft);margin:0}
/* the stock line: a quiet line with a green dot, not a green slab */
.pp-stock{position:relative;margin:0;padding-left:24px;font-size:var(--bq-small);line-height:1.5;color:var(--bq-soft)}
.pp-stock::before{content:"";position:absolute;left:4px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--bq-green)}
.pp-stock b{color:var(--bq-ink);font-weight:600}
.pp-opt__label{margin:0 0 8px;font:600 var(--bq-cap)/1.4 var(--bq-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bq-soft)}
.pp-opt__label span{text-transform:none;letter-spacing:0;font-weight:400;margin-left:8px}
/* what a "How many" chip answers: the making time, one quiet line */
.pp-opt .pp-opt__answer{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 14px;border-radius:var(--bq-r);background:var(--bq-plaster-2);font-size:var(--bq-small);line-height:1.4;color:var(--bq-ink)}
.pp-opt .pp-opt__answer[hidden]{display:none}
.pp-opt__answer svg{flex:none;color:var(--bq-teal-deep)}
.pp-opt__answer b{font-weight:600}
/* the boxes (Caraway's "Select product"): square corners, one row, the chosen one framed in ink */
.pp-seg{display:flex;flex-wrap:wrap;gap:8px}
.pp-seg .bq-chip{flex:1 1 0;min-width:max-content;justify-content:center;min-height:48px;padding:0 16px;border-radius:var(--bq-r);font:500 var(--bq-small)/1.2 var(--bq-sans);text-align:center}
.pp-seg .bq-chip[aria-pressed="true"]{background:var(--bq-white);border-color:var(--bq-ink);color:var(--bq-ink);box-shadow:inset 0 0 0 1px var(--bq-ink)}
.pp-seg[data-brief-group]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pp-seg[data-brief-group] .bq-chip{min-width:0}
/* two buttons side by side, the same width; the reply line under them */
.pp-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pp-cta .bq-btn{flex:1 1 200px}
.pp-cta .pp-small{flex:1 1 100%}
.pp-ticks{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--bq-line);display:flex;flex-direction:column;gap:8px}
.pp-ticks li{position:relative;padding-left:32px;font-size:var(--bq-small);line-height:1.5}
.pp-ticks li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--bq-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.2l3 3 6-6.4' fill='none' stroke='%230A2E30' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.pp-accs{border-top:1px solid var(--bq-line)}
.pp-acc{border-bottom:1px solid var(--bq-line)}
.pp-acc summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:16px 0;cursor:pointer;list-style:none;font:500 var(--bq-body)/1.3 var(--bq-sans)}
.pp-acc summary::-webkit-details-marker{display:none}
.pp-acc summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform .3s var(--bq-ease)}
.pp-acc[open] summary::after{transform:rotate(45deg)}
.pp-acc>div{padding:0 0 16px;color:var(--bq-soft);font-size:var(--bq-small);line-height:1.6;max-width:40em;display:flex;flex-direction:column;gap:8px}
.pp-acc p{margin:0}

/* what it is */
.pp-mats{display:flex;flex-wrap:wrap;gap:8px}
.pp-dl{margin:0}
.pp-dl>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 24px;padding:16px 0;border-bottom:1px solid var(--bq-line)}
.pp-dl dt{font:600 var(--bq-cap)/1.7 var(--bq-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bq-soft);padding-top:2px}
.pp-dl dd{margin:0;font-size:var(--bq-body);line-height:1.5}
.pp-dl--grid{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;border-top:1px solid var(--bq-line)}
.pp-rail .pp-dl--grid{column-gap:32px}
.pp-rail .pp-dl>div{padding:13px 0}
.pp-rail .pp-dl--grid>div{grid-template-columns:100px minmax(0,1fr);gap:0 16px}

/* rate and making time */
.pp-rate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
/* no version table: the rate list fills the wide column of its rail */
.pp-rate:not(:has(.pp-table)){grid-template-columns:minmax(0,1fr)}
.pp-table{width:100%;border-collapse:collapse;font-size:var(--bq-small);line-height:1.5}
.pp-table th,.pp-table td{text-align:left;padding:16px 16px 16px 0;border-bottom:1px solid var(--bq-line);vertical-align:top}
.pp-table th{font:600 var(--bq-cap)/1.4 var(--bq-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bq-soft)}
.pp-table tr[aria-selected="true"] td{background:var(--bq-green-soft)}
.pp-table tr[aria-selected="true"] td:first-child{padding-left:8px;border-radius:var(--bq-r) 0 0 var(--bq-r)}

/* making it yours */
.pp-way__n{margin:0;font:600 var(--bq-cap)/1 var(--bq-sans);letter-spacing:.08em;color:var(--bq-teal-deep)}

/* the live copy, the film, the parts, the questions */
.pp-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.pp-block--text{grid-template-columns:minmax(0,1fr)}
.pp-block--rail{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(24px,4vw,56px)}
.pp-block--rail>:first-child{max-width:34ch}
.pp-block--rail .pp-faq{max-width:880px}
.pp-block--rail .pp-film{max-width:640px}
/* a text-only block with a heading: heading left, words right, so the row is not half empty.
   The words space themselves with margins, not a row gap, so the unused rows under the heading add no height. */
.pp-block--text .pg-prose:has(>h2:first-child){max-width:none;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(24px,4vw,56px);row-gap:0;align-items:start}
.pp-block--text .pg-prose:has(>h2:first-child)>h2{grid-column:1;grid-row:1/span 12;margin:0}
.pp-block--text .pg-prose:has(>h2:first-child)>:not(h2){grid-column:2;max-width:40em;margin:0 0 16px}
.pp-block--text .pg-prose:has(>h2:first-child)>:not(h2):last-child{margin-bottom:0}
/* a small heading in the words ("Employees") sits close to what it introduces */
.pp-block--text .pg-prose:has(>h2:first-child)>h3{margin:8px 0 8px}
.pp-block figure{margin:0}
.pp-block figure img{width:100%;height:auto;background:var(--bq-white);border-radius:var(--bq-r)}
.pp-block ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:8px}
.pp-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;padding:0;margin:0;list-style:none}
.pp-parts li{display:flex;flex-direction:column;gap:8px}
.pp-parts img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--bq-white);border-radius:var(--bq-r)}
.pp-faq details{border-bottom:1px solid var(--bq-line)}
.pp-faq summary{cursor:pointer;padding:16px 0;font:400 var(--bq-t1)/1.3 var(--bq-serif);list-style:none}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq .in{padding:0 0 16px;color:var(--bq-soft);font-size:var(--bq-body);line-height:1.6}
/* the film's picture keeps its own shape (27 Oct 2026): a landscape opening frame is no longer cut into a 9:16 strip with half the row empty.
   A still from YouTube fills its column at its own ratio; a Configurator film is a portrait clip, shown whole inside a square on ink. */
.pp-film{position:relative;width:100%;max-width:520px;background:var(--bq-ink);border-radius:var(--bq-r);overflow:hidden}
.pp-film img{width:100%;height:auto;display:block}
.pp-film--mp4{aspect-ratio:1/1}
.pp-film--mp4 video{display:block;width:100%;height:100%;object-fit:contain;background:var(--bq-ink)}
.pp-film a{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;color:#fff;text-decoration:none;font:600 var(--bq-cap)/1.3 var(--bq-sans);letter-spacing:.08em;text-transform:uppercase}

/* the ask, the date, the bar that follows */
.pp-end{padding:var(--bq-sec) var(--bq-gut);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pp-end .bq-lead{color:var(--bq-on-ink)}
/* title and lead on the left, the two buttons on the right: one row, about 170 px */
@media (min-width:1024px){
.pp-end{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,4vw,64px);row-gap:8px;align-items:center;padding:calc(var(--bq-sec) * .75) var(--bq-gut)}
.pp-end>h2,.pp-end>p{grid-column:1;max-width:48ch;margin:0}
.pp-end>.bq-row{grid-column:2;grid-row:1/span 2}
}
.pp-updated{padding:24px var(--bq-gut) 112px;margin:0}
.pp-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;width:min(620px,calc(100% - 24px));display:flex;align-items:center;gap:16px;padding:8px;border-radius:var(--bq-pill);background:rgba(10,46,48,.94);color:var(--bq-on-ink);box-shadow:0 18px 40px -14px rgba(4,20,12,.6);transform:translate(-50%,170%);transition:transform .6s var(--bq-ease)}
@supports (backdrop-filter:blur(8px)){.pp-bar{background:rgba(10,46,48,.86);backdrop-filter:blur(12px) saturate(1.2)}}
.pp-bar.is-up{transform:translate(-50%,0)}
.pp-bar img{width:44px;height:44px;border-radius:var(--bq-r);object-fit:contain;background:#fff;flex:none}
.pp-bar p{margin:0;flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pp-bar b{font-weight:500;font-size:var(--bq-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-bar span{font-size:var(--bq-cap);color:var(--bq-on-ink-soft)}
.pp-bar .bq-btn{min-height:46px;padding:0 22px;flex:none}

/* up to 900 px the hero is one column: kind and name, then the gallery strip and its thumbnails, then the buy panel */
@media (max-width:900px){
  .pp-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "stage" "buy";row-gap:16px;padding:8px var(--bq-gut) var(--bq-sec)}
  .pp-head{gap:8px;padding-top:0}
  .pp-stage{position:static}
  /* the trail stays on one line; the product name is cut with an ellipsis, not wrapped (specificity beats pages.css, which loads after) */
  .bq .pg-crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* on a phone the trail above already links to the kind, so the small label over the name goes and the name starts at the top of the screen */
@media (max-width:760px){.pp-kicker,.bq a.pp-kicker{display:none}}
@media (max-width:1023px){.pp-block--rail{grid-template-columns:minmax(0,1fr)}.pp-block--rail>:first-child{max-width:60ch}}
@media (max-width:860px){
  .pp-seg[data-brief-group]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-block,.pp-rate{grid-template-columns:1fr}
  .pp-block--text .pg-prose:has(>h2:first-child){display:flex;row-gap:16px}
  .pp-block--text .pg-prose:has(>h2:first-child)>:not(h2){margin:0}
  .pp-block--text .pg-prose:has(>h2:first-child)>h3{margin-bottom:-8px}
  .pp-dl--grid{grid-template-columns:1fr}
  .pp-dl>div{grid-template-columns:120px minmax(0,1fr)}
  .pp-bar span{display:none}
}
@media (prefers-reduced-motion:reduce){.pp-bar{transition:none}}

/* ═════════ visual build, step 3: the product page (27 Oct 2026) ═════════ */
/* M32: the price is said once at the top, the minimum under it in ink; buyer-facing notes are 14 px in ink (S3) */
.pp-price .pp-small,.pp-stock,.pp-cta .pp-small{color:var(--bq-ink)}
.pp-price__min{font-size:var(--bq-small)}
.pp-rate .pp-dl dd{font-size:var(--bq-body)}
.pp-updated{padding:12px 0 0;margin:0}
.pp-rail__body>.pp-updated,.pg-band>.pp-updated{padding-left:0}
.pp-rail__body .pp-updated{padding-top:0}
/* M07: Need fewer? three small cards of the same kind that start lower */
.pp-fewer{display:flex;flex-direction:column;gap:12px;padding:16px 0;border-top:1px solid var(--bq-line)}
.pp-fewer__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pp-fewer .bq-card{gap:8px}
/* M35: the floating bar is for phones only (it shows once the on-page button has scrolled away); on a laptop the right column sticks instead */
@media (min-width:901px){
  .pp-bar{display:none}
  .pp-buy{position:sticky;top:16px;align-self:start}
}
@media (max-width:900px){body:has(.pp-bar){padding-bottom:88px}}
/* M03 (Saurabh's alternative): on a phone the title stays above the picture, the picture takes 60 % of the width and the rate line,
   the minimum, 'Add to brief' and WhatsApp stack to its right; the thumbnails and the rest follow */
@media (max-width:640px){
  .pp-hero{grid-template-columns:60% minmax(0,1fr);grid-template-areas:none;column-gap:16px;row-gap:16px}
  .pp-stage,.pp-buy{display:contents}
  .pp-head{grid-column:1/-1;grid-row:1}
  .pp-stage>*,.pp-buy>*{grid-column:1/-1}
  .pp-frame{grid-column:1;grid-row:2/span 2}
  .pp-buy>.pp-price{grid-column:2;grid-row:2;align-self:start;border-top:0;padding-top:0;gap:4px}
  .pp-price b{font-size:var(--bq-d2)}
  .pp-price p:first-child{flex-direction:column;gap:0}
  .pp-buy>.pp-cta{grid-column:2;grid-row:3;align-self:end;flex-direction:column;gap:8px;margin-top:0}
  .pp-cta .bq-btn{flex:none;width:100%;min-height:48px;padding:0 12px}
  .pp-cta .pp-small{display:none}
  .pp-arrow{width:36px;height:36px}
  .pp-fewer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){.pp-wa-ask{display:none}}