/* Product page and its price diary (DESIGN.md §6–§8). First ported from the reference
   build's CSS (5 Oct); since 7-8 Oct this file is the site's design (DESIGN.md §17), without
   inline styles: every
   variant is a class here. Owned by the product page (step 6, batch 1). */

/* ---------- the top: photo card and price ---------- */
.pp .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px;align-items:start;padding-block:20px 40px}
/* the tabs run exactly over the colour inside the stamp's white edge, never past it (owner,
   16 Oct): the same inset as the stamp's padding, on both sides */
.pp .photocard{--stampin:16px}
.pp .photocard .ftabs{margin-top:14px;padding-inline:var(--stampin)}
.pp .photocard .s{background:var(--white);padding:var(--stampin)}
.pp .photocard .card{filter:drop-shadow(0 10px 22px var(--shadow))}
.pp .photocard .in{background:var(--tint,var(--blue));padding:26px;position:relative;overflow:hidden}  /* its category's pastel (tint-*) */
.pp .photocard .mount{min-height:440px}
.pp .photocard .pml{left:0;right:0;bottom:0;width:100%;height:120px}
.pp .photocard .nophoto{min-height:300px;display:grid;place-items:center;text-align:center}
.pp .photocard .nophoto .disp{position:relative;font-size:clamp(26px,3vw,34px);max-width:16ch}
.pp .photocard .cap{font:400 11px/1.4 var(--label);letter-spacing:.06em;margin:10px 0 0;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.pp .info{padding-top:12px}
.pp h1{font-size:clamp(34px,4vw,48px)}
.pp .pricebox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin:22px 0 6px;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pp .pricebox.single{grid-template-columns:minmax(0,1fr)}
.pp .pricebox p{margin:0}
.pp .pricebox .pricelink{margin-top:0}
.pp .pricebox .plus{font-size:15px;margin-top:4px}
.pp .pricebox .pm{width:104px;height:104px}
.pp .na{font-size:17px;max-width:40ch}
.pp .others{margin-top:28px}
.pp .others .offers{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:14px}
.pp .others .offers li{border-top:1px solid var(--rule);padding-top:14px}
.pp .others .pricelink{margin-top:0}

/* ---------- the price diary ---------- */
.pp .two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
.pp .h3{font-size:24px}
.pp .h3.gap{margin-top:26px}
.diary{margin:18px 0 0}
.diary figcaption{margin-bottom:4px}
.diary + .diary{margin-top:30px}
.dsvg{width:100%;height:auto;display:block;margin-top:6px;color:var(--ink);overflow:visible}
.dsvg text{font-family:var(--label);fill:color-mix(in srgb,var(--ink) 74%,transparent)}
.dsvg .lab{font-size:11px;letter-spacing:.06em}
/* the copies under the price line: pearl at full strength (reference). #dpearl is the
   page's pearl across the chart's width (components/diary.html), so a flat line keeps it. */
.dsvg .cp{stroke:url(#dpearl);opacity:1}
.dsvg .cp:nth-child(even){stroke:url(#dpearl2)}
.dsvg .chg{fill:var(--paper);stroke:currentColor}
.dsvg .now{fill:var(--accent)}
.dsvg .dpmbox{overflow:visible}
.dsvg .dpm{width:92px;height:92px;color:var(--ink2)}
.dsvg .dpm text{fill:currentColor}
.diary .lowyet{margin-top:8px}

/* the last seven days */
.tblwrap{overflow-x:auto;box-shadow:0 8px 20px var(--shadow);margin-top:10px}  /* a safety net only */
.tblwrap + .tblwrap{margin-top:18px}
.readtbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px;background:var(--paper)}
.readtbl caption.lbl{text-align:left;padding:10px 12px 0;background:var(--paper)}
.readtbl th,.readtbl td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--rule);white-space:nowrap}
.readtbl thead th{font:400 11px/1.2 var(--label);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 75%,transparent)}
.readtbl th:first-child,.readtbl td:first-child{text-align:left}
.readtbl tbody th{font-weight:400}
.readtbl td.ch{background:var(--pink);font-weight:600}
.readtbl td.na{color:color-mix(in srgb,var(--ink) 60%,transparent)}
/* a range heading on two lines ("02:46" over "–03:13"); a time never wraps inside itself */
.readtbl thead .t{display:block;white-space:nowrap}
/* five or more reading rounds (drifting feed times, the clock change): tighter, so the
   table fits the right-hand column at 1300 px without scrolling */
.readtbl.many{font-size:13px}
.readtbl.many th,.readtbl.many td{padding:9px 6px}
.readtbl.many th:first-child,.readtbl.many td:first-child{padding-left:10px}
.readtbl.many thead th{letter-spacing:.04em}

/* where it sits */
.sits{display:flex;gap:6px;align-items:center;margin:14px 0 8px;flex-wrap:wrap}
.sits i{width:22px;height:22px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 30%,transparent)}
.sits i.me{background:var(--ink);box-shadow:none}

/* ---------- a row of stamps: "further along the row" ---------- */
.rowhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px}
.rowsign{font:400 12px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border:1.5px solid var(--ink);border-radius:4px;background:var(--paper)}
.rowwrap{filter:drop-shadow(0 8px 16px var(--shadow));margin-top:20px}
/* one stamp strip of four equal cells, a quarter each even when fewer (reference) */
.rowstrip{background:var(--white);padding:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;list-style:none;margin:0}
.rowstrip .cell{position:relative;padding:10px 14px}
.rowstrip .cell + .cell::before{content:"";position:absolute;left:-4px;top:0;bottom:0;width:8px;background:radial-gradient(circle 3.2px,var(--ground) 96%,transparent) 50% 0/8px 13px repeat-y}
.rowstrip .in{background:var(--tint);padding:14px;height:100%;position:relative;border:1.5px solid color-mix(in srgb,var(--ink) 40%,transparent)}
.rowstrip .mount{height:176px}
.rowstrip h3{font:var(--dw) 19px/1.12 var(--display);margin:10px 0 6px}
.rowstrip .cover{text-decoration:none}
.rowstrip .cover::after{content:"";position:absolute;inset:0}  /* the whole stamp opens its diary */
.rowstrip .cover:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.rowstrip .cover:focus-visible{outline:none}
.rowstrip .cell:focus-within .in{outline:2px solid var(--ink2);outline-offset:2px}
.rowstrip p{margin:0}
.rowstrip .price{margin-top:4px}

/* ---------- phone ---------- */
@media (max-width:900px){
  .pp .top,.pp .two{grid-template-columns:minmax(0,1fr)}
  .rowstrip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto}
  .pp .photocard .mount{min-height:0;height:auto;padding-block:6px}
  .ftabs span{padding:8px 11px calc(9px + var(--ftuck))}
  .ftabs span b{font-size:15px}
}
@media (max-width:520px){
  .pp .photocard .ftabs span{padding-inline:9px;letter-spacing:.1em}  /* three tabs over the colour */
  .pp .photocard .ftabs{gap:3px}
  .pp .pricebox .pm{width:84px;height:84px}
  .pp .photocard .in{padding:18px}
}
@media (max-width:380px){.pp .photocard .ftabs span{padding-inline:7px}}