/* Product page of Owebia (views/product/view.phtml), the tiles of the related products in tiles.css; the gallery and
   the purchase bar of Zeste (gallery.css, buy-bar.css). --c: product color; --ck-d / --ck-l: its readable variant on
   dark / on light. */

/* Home page width (--wrap), margins of its .wrap elements */
[data-page="product"] .page-main { --gutter: 1.6rem; max-width: var(--wrap); }
/* Gallery: the illustration of the module, tinted with its color */
.pp { --ck: var(--ck-d); --gallery-html-bg: color-mix(in srgb, var(--c) 10%, var(--art-bg)); padding-top: 2.4rem; }
html[data-theme="light"] .pp { --ck: var(--ck-l); }
.pp h2 { margin: 0 0 1.6rem; font-size: 2.4rem; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.pp-sec, .pp-lead { margin-top: 4.8rem; scroll-margin-top: 8.8rem; }

/* ——— Top of page: gallery and purchase ——— */
.pp-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4rem; align-items: start; }
@media (max-width: 63.99rem) { .pp-hero { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; } }

/* Without screenshot: the home page illustration alone (in .gallery of Zeste, for its width) */
.pp-art { aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--r); background: var(--gallery-html-bg); overflow: hidden; }
.pp-art svg { display: block; width: 100%; height: 100%; }
@media (min-width: 64rem) { .gallery.is-art .pp-art { aspect-ratio: 1; } }
@media (max-width: 47.99rem) {
  .pp { padding-top: 0; }
  .pp-art { margin-inline: 0; border-radius: 0; border-inline: 0; }
}

/* Purchase */
.pp-buy { min-width: 0; max-width: 72rem; }
.pp-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .64rem; margin: 0 0 .8rem; }
.pp .kicker { margin: 0; color: var(--ck); font-size: 1.28rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pp-chip { padding: .16rem .8rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-buy h1 { margin: 0; font-size: clamp(2.8rem, 4vw, 4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
.pp-sub { margin: .8rem 0 0; color: var(--muted); font-size: 1.68rem; line-height: 1.45; }
.pp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.12rem; margin: 2rem 0 0; }
.pp-price strong { font-size: 3.2rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pp-price.free strong { color: var(--accent-ink); }
.pp-price s { color: var(--muted); font-size: 1.76rem; }
.pp-note { flex-basis: 100%; color: var(--accent-ink); font-size: 1.36rem; font-weight: 600; }
.pp-form { display: grid; gap: 1.6rem; margin-top: 2rem; padding: 2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pp-field label { display: block; margin: 0 0 .64rem; padding: 0; font-size: 1.44rem; font-weight: 600; }
.pp-field input { width: 100%; height: 4.8rem; padding: 0 1.44rem; border: 1px solid var(--field-line); border-radius: .96rem; background: var(--field); color: var(--ink); font-size: 1.6rem; }
.pp-field input:focus { outline: 2px solid transparent; outline-offset: 0; border-color: var(--accent); box-shadow: var(--focus-ring); }
.pp-field input[aria-invalid="true"] { border-color: var(--danger); }
.pp-err { margin: .64rem 0 0; color: var(--danger); font-size: 1.312rem; }
.pp-field { min-width: 0; }
.pp-upg { display: grid; min-width: 0; gap: .8rem; margin-top: 1.12rem; font-size: 1.36rem; }
.pp-upg-doms { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .64rem; margin: 0; color: var(--muted); }
.pp-upg-doms button { display: inline-flex; gap: .4em; min-width: 0; max-width: 100%; white-space: nowrap; padding: .48rem 1.12rem; border: 1px solid var(--line); border-radius: 99rem; background: var(--bg); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.pp-upg-doms button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.pp-upg-doms button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pp-upg-txt { margin: 0; color: var(--accent-ink); font-weight: 600; }
.pp-upg-more { justify-self: start; }
.pp-upg[hidden], .pp-upg [hidden] { display: none; }
.pp-add { gap: .96rem; width: 100%; height: 5.2rem; font-size: 1.6rem; }
.pp-add .i { width: 2rem; height: 2rem; }
/* Link as a button (archive download): no underline or link color, on hover like « Add to cart » */
a.pp-add, a.pp-add:visited, a.pp-add:hover, a.pp-add:focus { color: var(--on-accent); text-decoration: none; }
.pp-add .pp-total { padding-left: .96rem; border-left: 1px solid color-mix(in srgb, var(--on-accent) 30%, transparent); font-variant-numeric: tabular-nums; }
/* Retired product: the module asleep in its archive box (images/art/retired.svg, styled in tiles.css) */
.pp-retired { display: flex; align-items: center; gap: 1.6rem; margin: 2rem 0 0; padding: 1.44rem 1.6rem; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); border-radius: 1.28rem; background: color-mix(in srgb, var(--c) 7%, var(--surface)); }
.pp-retired p { margin: 0; color: var(--muted); font-size: 1.4rem; line-height: 1.5; }
.pp-retired .pp-retired-t { margin-bottom: .24rem; color: var(--ink); font-size: 1.6rem; font-weight: 700; }
.pp-retired a { white-space: nowrap; }
.pp-retired .art-retired { flex: none; width: 9.6rem; height: auto; }
.pp-licence { display: flex; gap: 1.12rem; margin: 1.6rem 0 0; padding: 1.28rem 1.44rem; border-radius: .96rem; background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 1.36rem; line-height: 1.5; color: var(--muted); }
.pp-licence strong { color: var(--ink); }
.pp-licence .i { width: 2.24rem; height: 2.24rem; margin-top: .08rem; color: var(--accent-ink); }
.pp-licence a { white-space: nowrap; }
/* Free module: the Composer commands */
.pp-install { display: grid; gap: 1.12rem; margin-top: 2rem; padding: 2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pp-install-h { display: flex; align-items: center; gap: .8rem; margin: 0; font-size: 1.76rem; font-weight: 700; }
.pp-install-h .i { color: var(--accent-ink); }
.pp-hint { margin: 0; color: var(--muted); font-size: 1.36rem; }
.pp-src, .pp-src:visited { display: inline-flex; align-items: center; gap: .48rem; font-size: 1.44rem; font-weight: 600; }
.pp-src .i { transition: transform .2s; }
.pp-src:hover .i { transform: translateX(3px); }
/* Guarantees below the purchase */
.pp-perks { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.pp-perks li { margin: 0; }
.pp-perks a, .pp-perks a:visited { display: inline-flex; align-items: center; gap: .64rem; color: var(--muted); font-size: 1.36rem; text-decoration: none; }
.pp-perks a:hover { color: var(--ink); }
.pp-perks .i { width: 1.8rem; height: 1.8rem; color: var(--accent-ink); }

/* ——— Description: main column and side column (features, compatibility, requirements…) ——— */
.pp-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(32rem, 40rem); gap: 1.6rem 4rem; align-items: start; }
.pp-side { display: grid; gap: 1.44rem; margin-top: 4.8rem; }
@media (max-width: 63.99rem) { .pp-body { grid-template-columns: minmax(0, 1fr); } }
.pp-prose { color: var(--muted); font-size: 1.6rem; line-height: 1.65; }
.pp-prose > :first-child { margin-top: 0; }
.pp-prose > :last-child { margin-bottom: 0; }
.pp-prose p, .pp-prose ul { margin: 0 0 1.2rem; }
.pp-prose ul { padding-left: 2rem; }
.pp-prose li { margin: 0 0 .48rem; }
.pp-prose strong, .pp-prose code { color: var(--ink); }
.pp-prose a { color: var(--accent-ink); }
.pp-prose pre { max-width: 100%; font-size: 1.36rem; }
.pp-prose img { vertical-align: middle; }
.pp-prose .message { margin: 1.6rem 0; padding: 1.2rem 1.6rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: .96rem; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pp-prose br + br { display: none; }
/* Lead: the first section, in large type */
.pp-lead { max-width: 88rem; }
.pp-sec .pp-prose { max-width: 96rem; }
.pp-lead h2 { font-size: clamp(2.6rem, 3.4vw, 3.2rem); }
.pp-lead .pp-prose { font-size: 1.84rem; line-height: 1.6; }
/* Features: one point per tile, accent edge (not the module color, kept for the eyebrow and the illustration) */
.pp-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.pp-feat { position: relative; margin: 0; padding: 1.6rem 1.6rem 1.6rem 2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; transition: border-color .25s, transform .25s; }
.pp-feat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .4rem; background: var(--accent); }
.pp-feat:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); transform: translateY(-2px); }
.pp-feat h3 { margin: 0 0 .64rem; font-size: 1.76rem; font-weight: 700; line-height: 1.3; }
.pp-feat p { margin: 0; color: var(--muted); font-size: 1.44rem; line-height: 1.55; }
.pp-feat a { color: var(--accent-ink); }
.pp-feat h3 a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: .2em; }
.pp-feat h3 a:hover { color: var(--accent-ink); }
/* Points without a title: a checked list, in two columns */
.pp-checks { columns: 2 30rem; column-gap: 3.2rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.pp-feats + .pp-checks { margin-top: 2rem; }
.pp-checks li { display: flex; gap: 1rem; margin: 0 0 1rem; break-inside: avoid; color: var(--ink); font-size: 1.48rem; line-height: 1.5; }
.pp-checks .i { width: 1.84rem; height: 1.84rem; margin-top: .2rem; color: var(--accent-ink); }
.pp-checks a { color: var(--accent-ink); }
/* Side column cards */
.pp-card { margin: 0; padding: 2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); scroll-margin-top: 8.8rem; }
.pp-card h2 { display: flex; align-items: center; gap: 1.12rem; margin: 0 0 1.28rem; font-size: 1.76rem; font-weight: 700; }
.pp-card h2 .i { width: 3.6rem; height: 3.6rem; padding: .8rem; border-radius: 1.04rem; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, transparent); transform: rotate(-6deg); transition: transform .25s; }
.pp-card h2 .i svg { stroke-width: 1.75; }
.pp-card:hover h2 .i { transform: rotate(0) scale(1.06); }
.pp-card .pp-prose { font-size: 1.36rem; line-height: 1.55; }
.pp-card .pp-prose ul { padding-left: 1.6rem; }
.pp-specs dl { display: grid; gap: 0; margin: 0; }
.pp-specs dl > div { display: grid; grid-template-columns: 11.2rem minmax(0, 1fr); gap: 1.2rem; padding: .88rem 0; border-top: 1px solid var(--line); font-size: 1.36rem; }
.pp-specs dl > div.is-more { padding-top: 0; border-top: 0; }
.pp-specs dl > div:first-child { border-top: 0; padding-top: 0; }
.pp-specs dt { color: var(--muted); }
.pp-specs dd { margin: 0; min-width: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.pp-pkg { display: flex; flex-wrap: wrap; align-items: center; gap: .64rem; }
.pp-pkg code { padding: .16rem .64rem; font-size: 1.28rem; font-weight: 500; }
/* Questions: accordions (zeste.css), like the FAQ */
.pp-qa { display: grid; gap: .8rem; }
.pp-qa .pp-prose { font-size: 1.48rem; }

/* ——— Related products: the home page tiles ——— */
.pp-related .row { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
@media (max-width: 47.99rem) { .pp-related .row { grid-template-columns: 1fr; } }

/* ——— Mobile: tiles in horizontal scrolling (features, related products) ——— */
@media (max-width: 47.99rem) {
  .pp-feats, .pp-related .row { display: flex; gap: 1.2rem; margin-inline: -1.6rem; padding: .4rem 1.6rem 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1.6rem; scrollbar-width: none; }
  .pp-feats::-webkit-scrollbar, .pp-related .row::-webkit-scrollbar { display: none; }
  .pp-feats > li { flex: 0 0 78%; scroll-snap-align: start; }
  /* Related products: one tile per screen (tile margin on each side), dots below */
  .pp-related .row { gap: 1.6rem; padding-bottom: .4rem; }
  .pp-related .row > li { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .pp-checks { columns: 1; }
}

/* ——— Print: the product page alone, tightened, one image (gallery.css), without purchase or related products;
   address, date, footer and open answers: zeste.css ——— */
@media print {
  .pp-related, .pp-form, .pp-perks, .pp-licence a { display: none !important; }
  .pp { --ck: var(--ck-l); padding-top: 1.6rem; }
  /* A little color (light theme accent, theme.css): the icon backgrounds and the card bar are
     printed even without the « background graphics » option */
  .pp-card h2 .i, .pp-feat::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pp h2 { margin-bottom: 1rem; font-size: 1.92rem; }
  .pp-hero { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2.4rem; }
  .pp-buy h1 { font-size: 2.8rem; }
  .pp-sub { font-size: 1.44rem; }
  .pp-price { margin-top: 1.2rem; }
  .pp-price strong { font-size: 2.4rem; }
  .pp-licence { margin-top: 1.2rem; padding: .8rem 1.2rem; font-size: 1.24rem; }
  .pp-install { margin-top: 1.2rem; }
  .pp-sec, .pp-lead { margin-top: 2.4rem; }
  .pp-lead h2 { font-size: 2.24rem; }
  .pp-lead .pp-prose { font-size: 1.44rem; line-height: 1.5; }
  .pp-body { display: block; }
  /* Two per row, in flex: in a grid, a card pushed to the next page leaves its top border at the bottom of the page */
  .pp-feats { display: flex; flex-wrap: wrap; gap: .8rem; }
  .pp-feats > .pp-feat { flex: 0 1 calc(50% - .4rem); min-width: 0; }
  .pp-install .cmds pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.2rem; line-height: 1.45; }
  .pp-feat { padding: 1rem 1.2rem; }
  .pp-feat h3 { margin-bottom: .32rem; font-size: 1.44rem; }
  .pp-feat p { font-size: 1.24rem; line-height: 1.45; }
  .pp-qa { gap: .64rem; }
  .pp-qa summary { padding: .8rem 1.2rem .32rem; font-size: 1.36rem; }
  .pp-qa summary, .pp-qa details[open] summary { color: var(--accent-ink); }
  .pp-qa .pp-prose { padding: 0 1.2rem .8rem; font-size: 1.28rem; line-height: 1.45; }
  .pp-checks { margin-top: 1rem; }
  .pp-feats + .pp-checks { margin-top: 1rem; }
  .pp-checks li { gap: .64rem; margin-bottom: .48rem; font-size: 1.28rem; line-height: 1.45; }
  .pp-checks .i { width: 1.44rem; height: 1.44rem; }
  /* Cards two by two, in flex: a grid would move whole to the next page */
  .pp-side { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .8rem; margin-top: 2.4rem; }
  .pp-side > .pp-card { flex: 1 1 calc(50% - .4rem); min-width: 0; }
  .pp-card { padding: 1.2rem 1.4rem; }
  .pp-specs dl > div { grid-template-columns: 10rem minmax(0, 1fr); gap: .8rem; padding: .4rem 0; font-size: 1.24rem; }
  .pp-card h2 { margin-bottom: .8rem; font-size: 1.44rem; }
  .pp-card h2 .i { width: 2.8rem; height: 2.8rem; padding: .56rem; transform: none; }
  .pp-card .pp-prose { font-size: 1.24rem; line-height: 1.45; }
  .pp-feat, .pp-card, .pp-qa details { break-inside: avoid; background: #fff !important; }
  .pp h2, .pp-qa summary { break-after: avoid; }
}