/* et2026 product page (WP2). Loaded by html/com_content/article/product.php after et.css. Same rules as et.css: hard rules, square corners. */

/* the sticky rail must not sit on top of whatever a keyboard user has just focused */
html:has(.et-product){scroll-padding-bottom:calc(var(--et-rail-h) + 16px)}

/* the name fills the line but never outgrows the longest word: --et-n is that word's length, printed by the layout */
.et-product .et-pstage__name{
  font-size:clamp(38px,min(14vw,calc((100vw - 2 * var(--et-gutter)) / (var(--et-n,8) * .62))),208px);
  overflow-wrap:anywhere}
.et-pstage__sub{line-height:1.4}
.et-pstage__for{margin:14px 0 0;font-size:16px;line-height:1.45;max-width:46ch;color:var(--et-on-ink)}
.et-pstage__for .et-mono{display:block;color:var(--et-on-ink-muted);margin-bottom:2px}
.et-pstage__price--hold{font-size:clamp(30px,3.2vw,42px);letter-spacing:-.035em;line-height:1;color:var(--et-on-ink)}
.et-pstage__or{margin:12px 0 0;font-size:14.5px;line-height:1.4;color:var(--et-on-ink)}
.et-pstage__pay{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--et-on-ink-muted)}
.et-rail__hold{font-family:var(--et-font-m);font-size:12.5px;color:var(--et-accent-text)}

/* keep both device frames inside the page on a phone */
.et-devices{min-width:0}
.et-devices__desk{min-width:0;max-width:100%}
@media (max-width:640px){
  .et-devices__phone{min-width:0;width:26%}
  .et-frame__bar{font-size:10px}
}

.et-pmain{min-width:0}
.et-pmain h2,.et-product .et-sec h2{font-size:clamp(28px,3.4vw,44px);margin:0 0 .55em}
.et-product .et-box__h{font-size:clamp(21px,2vw,26px);letter-spacing:-.015em;line-height:1.1;margin:0 0 12px}
.et-product .et-sec--tight{padding:clamp(36px,4.5vw,64px) 0}
.et-pnote{margin:12px 0 0;font-size:14.5px;line-height:1.45;color:var(--et-muted)}
.et-box .et-pnote{color:var(--et-body)}
.et-plinks{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;font-weight:600;font-size:15.5px}
.et-pinc li{border-bottom-color:var(--et-soft)}
.et-pinc li::before{background:var(--et-panel)}

/* style screenshots: tall pages cropped to the top. A row on desktop, a strip you swipe on a phone */
.et-gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:clamp(10px,1.2vw,16px)}
.et-gal a{display:block;text-decoration:none;color:var(--et-ink)}
.et-gal img{display:block;width:100%;height:clamp(220px,20vw,300px);object-fit:cover;object-position:top;border:var(--et-b);background:var(--et-soft)}
.et-gal__cap{display:block;font-family:var(--et-font-m);font-size:12.5px;padding-top:6px}
.et-gal a:hover .et-gal__cap{text-decoration:underline}
.et-gal--panel{padding-top:14px}
.et-gal--panel img{height:auto;max-height:340px;object-fit:contain;background:var(--et-card)}
.et-gal__pos{display:block}
.et-gal__pos img{display:block;width:100%;height:auto;border:var(--et-b)}
@media (max-width:640px){
  .et-gal:not(.et-gal--panel){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(150px,44vw);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px}
  .et-gal:not(.et-gal--panel) li{scroll-snap-align:start}
  .et-gal--panel{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* folds: square, ruled, one plus sign */
.et-more{border-block:var(--et-b)}
.et-more+.et-more{border-top:0}
.et-more summary{cursor:pointer;list-style:none;padding:14px 42px 14px 0;position:relative;font-family:var(--et-font-d);font-weight:700;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.015em;line-height:1.15;color:var(--et-ink)}
.et-more summary::-webkit-details-marker{display:none}
.et-more summary::after{content:"+";position:absolute;right:4px;top:8px;font-family:var(--et-font-m);font-size:26px;font-weight:400}
.et-more[open] summary::after{content:"\2212"}
.et-more .et-prose{padding:0 0 22px}
.et-more .et-prose ul{padding-left:1.2em;margin:0}
.et-more .et-prose li{margin:0 0 .55em}
.et-gal+.et-pnote+.et-more,.et-gal+.et-more{margin-top:22px}

/* recent changes */
.et-log{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:var(--et-b);background:var(--et-card)}
.et-log__rel{padding:clamp(16px,2vw,26px);min-width:0}
.et-log__rel+.et-log__rel{border-left:var(--et-b)}
.et-log__rel:only-child{grid-column:1/-1}
.et-log__h{font-family:var(--et-font-b);font-size:15px;font-weight:600;letter-spacing:0;line-height:1.3;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.et-log__list{margin:0;padding:0 0 0 1.1em;font-size:15.5px;line-height:1.45}
.et-log__list li{margin:0 0 .5em}
@media (max-width:760px){.et-log{grid-template-columns:minmax(0,1fr)}.et-log__rel+.et-log__rel{border-left:0;border-top:var(--et-b)}}

.et-deal__copy{font-size:20px;line-height:1.4;margin:0 0 16px;color:var(--et-ink)}
.et-pfaq{max-width:880px}

/* a table on a phone: label above the value would waste the line, so just keep it inside its box */
.et-box{min-width:0}
.et-spec td{overflow-wrap:anywhere}