/* Theme-owned rules for product pages, loaded after the ported page stylesheet (which the port
   regenerates from the prototypes — never add rules there). Both layouts share the accordion
   additions; the simple layout (controllers, accessories) adds its hero split and related cards.
   Sections: simple layout hero · accordion · related products · phones · touch devices. */

/* ---------- simple layout hero: photos left (60%), content right (40%); the right column follows the
   model pages' buy block (eyebrow, title, lead, black full-width "Request a quote", warranty badge) ---------- */
.phero-grid{grid-template-columns:1.5fr 1fr;gap:56px}
.phero-grid .pgal{order:-1}
/* the stage photo is a real image that fills its square (object-fit: cover), so every image shows the same rounded frame */
.yphos-accessory .stage .ph.has-img{position:relative;overflow:hidden}
.yphos-accessory .stage .ph.has-img .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:inherit}
/* the stage is swipeable (assets/js/yphos.js); pan-y keeps vertical scrolling native on touch */
.yphos-accessory .stage{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;outline:none}
.yphos-accessory .stage:focus-visible{box-shadow:0 0 0 2px var(--blue)}
.pinfo .ey{margin-bottom:12px}
.pinfo h1{font-size:36px;font-weight:400;line-height:1.15;letter-spacing:-.01em}
.pinfo .lead{font-size:16px;margin-top:16px;max-width:42ch;font-weight:400}
.pinfo .meta{margin-top:26px}
.pinfo .acts{margin-top:30px;display:flex;flex-direction:column;align-items:stretch;gap:10px;max-width:330px}
.pinfo .acts .btn{width:100%;padding:10px 32px;font-size:16px;margin-bottom:0;background:var(--ink);border-color:var(--ink);color:#fff}
.pinfo .acts .btn:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.pinfo .acts .warrbadge{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:10px}
.pinfo .acts .warrbadge .cert-ic{height:36px;width:auto;display:block;margin:0}
.pinfo .acts .wb-txt{font-size:8px;font-weight:600;letter-spacing:.12em;line-height:1.15;color:#424345;text-align:left}
/* dimensional drawing on the simple pages (the model pages keep their prototype's 400px) */
.yphos-accessory .draw img{max-width:460px}

/* ---------- accordion additions (both layouts) ---------- */
/* small print always on its own greyer line */
.ac-inner dd small{display:block;margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--muted)}
/* group headings inside bullet lists ("Lights:", "Accessories:") */
.ac-inner h4.grp{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:18px 0 4px}
.ac-inner h4.grp:first-child{margin-top:0}
.ac-inner h4.grp+ul{margin-top:2px}
/* product links inside bullets (Compatible Accessories, hub compatibility lists) */
.ac-inner li a{color:var(--blue);text-decoration:none;transition:color .3s var(--ease)}
.ac-inner li a:hover{text-decoration:underline}
/* figures (wiring diagrams, layouts, screenshots) */
.figs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 24px}
.figs figure{margin:0;background:rgb(250 250 250);border-radius:0;padding:28px 24px 18px;text-align:center}
.figs img{display:block;width:100%;height:auto;max-width:520px;margin:0 auto}
.figs img[src$=".jpg"],.figs img[src$=".jpeg"],.figs img[src$=".png"]{width:auto;max-width:100%;max-height:440px;border-radius:0}
.figs figure:only-child{grid-column:1/-1}
.figs figcaption{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.5}
.figs+ul{margin-top:12px}
.figs+p{max-width:62ch}
/* one figure: the image beside the text */
.figrow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:center}
.figrow .figs{margin:0}
.figrow .figs figure{padding:32px 28px 20px}
.figrow .figs img[src$=".jpg"],.figrow .figs img[src$=".jpeg"],.figrow .figs img[src$=".png"]{max-height:520px}
.figrow .figtext p{max-width:none}
.figrow .figtext ul{margin-top:14px}
/* captionless row of screens (app screenshots): side by side like an app store, the text below */
.figs.screens{grid-template-columns:repeat(4,1fr);gap:16px;max-width:none;margin-bottom:28px}
.figs.screens figure{background:none;padding:0;border-radius:0}
.figs.screens img,.figs.screens img[src$=".jpg"],.figs.screens img[src$=".jpeg"],.figs.screens img[src$=".png"]{width:100%;max-width:none;max-height:none;border-radius:16px}
/* app store badges under the app screens */
.appbadges{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:24px}
.appbadges a{display:block;line-height:0}
.appbadges img{display:block;height:40px;width:auto}
.appbadges .gp img{height:60px;margin:-10px 0}
/* downloads: the same note + buttons as the model pages */
.ac-inner p.dlnote{font-size:13.5px;font-weight:400;line-height:1.7;max-width:74ch;margin:0 0 32px}
.dlgrid{display:flex;flex-wrap:wrap;gap:10px}
.dlbtn{display:inline-flex;align-items:center;gap:10px;padding:10px 22px;border:2px solid var(--line);border-radius:40px;background:#fff;color:var(--ink);font-size:12px;font-weight:500;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.dlbtn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.dlbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dlbtn em{font-style:normal;font-weight:400;font-size:11.5px;letter-spacing:.1em;color:var(--muted)}
.dlbtn:hover em{color:rgba(255,255,255,.62)}

/* ---------- "You might also like" on the simple pages: the products hub's accessory cards on a #fafafa
   section — borderless, centred name/SKU block that turns white on hover ---------- */
.rel{background:#fafafa;border-top:0}
.rel .rgrid{grid-template-columns:repeat(4,1fr)}
.rel .acard{background:#fff;border:0;border-radius:16px;padding:0;overflow:hidden;transition:box-shadow .4s var(--ease)}
.rel .acard:hover{box-shadow:0 18px 44px rgba(10,14,19,.1)}
.rel .acard .img{aspect-ratio:1;border-radius:0;margin-bottom:0;background-color:#fafafa;background-position:center;background-size:100%;background-repeat:no-repeat}
.rel .acard .abody{padding:18px 20px 22px;background:#fafafa;text-align:center;transition:background .4s var(--ease)}
.rel .acard:hover .abody{background:#fff}
.rel .acard h4{font-size:16px;font-weight:400;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel .acard .sku{font-size:12px;color:var(--muted);margin-top:3px;font-weight:400}

/* ---------- tablets and phones ---------- */
@media(max-width:900px){.figs{grid-template-columns:1fr}.figs.screens{grid-template-columns:repeat(4,1fr);gap:10px}.figrow{grid-template-columns:1fr;gap:22px}.rel .rgrid{grid-template-columns:1fr 1fr}}
@media(max-width:880px){.phero-grid{grid-template-columns:1fr;gap:36px}}
/* full-bleed gallery figure (Model 02, 03 Bronze …): at least 70vh, cropped to cover — the same breakpoint as the
   shared yphos.css rule (110vh) it replaces; the page stylesheets reset the image to height:auto, this loads after them */
@media(max-width:760px){.gal-full{min-height:70vh}.gal-full img{width:100%;height:auto;min-height:70vh;object-fit:cover;object-position:center}}
/* photo band on Model 03 and 03 Bronze only: the text sits high, over a top shade instead of the bottom one
   (the other models keep their prototype's centred text and bottom shade) */
@media(max-width:680px){.yphos-model-03 .band,.yphos-model-03b .band{align-items:flex-start}.yphos-model-03 .band .ov,.yphos-model-03b .band .ov{padding-top:max(56px,9vh)}.yphos-model-03 .band.right::after,.yphos-model-03 .band.left::after,.yphos-model-03b .band.right::after,.yphos-model-03b .band.left::after{background:linear-gradient(180deg,rgba(6,8,12,.55),transparent 58%)}}
/* opening statement; video panel (Model 03 gallery, Model 07 mosaic) at least 70vh with slightly smaller text —
   aspect-ratio off, or the 70vh height would set the panel's width inside the Model 07 mosaic grid */
@media(max-width:620px){.stmt p{font-size:22px;font-weight:400;color:var(--ink);max-width:90%}.vidpanel-in{aspect-ratio:auto;width:100%;min-height:70vh}.vidpanel-tx p{font-size:clamp(14px,4vw,17px);line-height:1.5}}
@media(max-width:600px){.dlgrid{flex-direction:column;align-items:stretch}.dlbtn{justify-content:center}.figs.screens{grid-template-columns:1fr 1fr}.pinfo .acts{max-width:none}}
/* two related cards per row on phones too (accessory.css would drop to one) */
@media(max-width:480px){.rel .rgrid{grid-template-columns:1fr 1fr}}

/* ---------- touch devices: the quote button keeps its solid fill on tap ---------- */
@media(hover:none){.pinfo .acts .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}}