/* Product examples: approved two-video composition, isolated from order players. */
#formats .pd-heading { text-align:center; margin-bottom:34px; }
#formats .pd-heading h2 { font-size:clamp(32px,3.5vw,52px); line-height:1.12; text-wrap:balance; }
#formats .pd-heading p:last-child { color:#ded4c4; margin:16px auto 0; font-size:16px; }
.pd-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.pd-card { min-width:0; padding:8px; border-radius:16px; background:#eae7dc; color:#2d2a26; box-shadow:0 12px 40px #17110b24; }
.pd-media { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:10px; background:#211d19; }
.pd-cover { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; color:#fff6e9; background:#211d19; cursor:pointer; text-align:center; }
.pd-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.pd-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 45%,#100b079c); pointer-events:none; }
.pd-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:72px; height:72px; border:2px solid #eae7dc; border-radius:50%; background:#211d1999; z-index:1; box-shadow:0 6px 30px #211d1955; transition:background .2s ease; }
.pd-play svg { width:27px; height:27px; margin-left:4px; fill:currentColor; }
.pd-cover-caption { position:absolute; bottom:20px; left:12px; right:12px; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; font-size:13px; font-weight:700; }
.pd-cover-caption small { font-size:11px; font-weight:500; opacity:.85; border-left:1px solid #eae7dc80; padding-left:10px; }
.pd-cover:hover img { transform:scale(1.025); }
.pd-cover:hover .pd-play { background:#b63c32; }
.pd-cover:focus-visible { outline:3px solid #e85a4f; outline-offset:-5px; }
.pd-media video { display:block; width:100%; height:100%; object-fit:contain; background:#11100f; }
.pd-media [hidden], .pd-error[hidden] { display:none !important; }
.pd-card-copy { padding:20px 14px 14px; display:grid; grid-template-columns:1fr auto; gap:12px 18px; align-items:center; }
#formats .pd-card h3 { margin:0 0 8px; font-size:clamp(18px,1.6vw,23px); line-height:1.2; font-weight:750; letter-spacing:-.6px; }
.pd-card-copy p { margin:0; font-size:13px; line-height:1.6; color:#635b51; }
.pd-cta { display:inline-flex; justify-content:center; align-items:center; gap:18px; min-height:46px; padding:12px 16px; border:0; border-radius:9px; font:inherit; font-size:12px; font-weight:800; color:#2d2a26; background:#e85a4f; cursor:pointer; transition:background .2s,transform .2s; white-space:nowrap; }
.pd-cta:hover { background:#e98074; }
.pd-cta:active { transform:translateY(1px); }
.pd-cta:focus-visible,.pd-error button:focus-visible { outline:3px solid #873c32; outline-offset:4px; }
.pd-error { padding:12px 14px; font-size:13px; color:#8f3028; }
.pd-error button { display:inline-block; min-height:44px; padding:8px 12px; margin-left:8px; border:1px solid currentColor; border-radius:6px; color:inherit; background:transparent; cursor:pointer; }
.pd-loading { position:absolute; inset:0; display:grid; place-items:center; color:#eae7dc; background:#211d19bc; font-size:14px; pointer-events:none; }
.pd-surprise { display:grid; grid-template-columns:220px 1fr auto; align-items:center; gap:32px; margin-top:22px; padding:0 32px 0 12px; min-height:174px; border-radius:16px; background:#d8c3a5; color:#2d2a26; overflow:hidden; position:relative; }
.pd-surprise-art { height:174px; display:grid; place-items:center; overflow:hidden; }
.pd-phone { width:112px; height:192px; transform:rotate(-9deg) translateY(23px); border:5px solid #302b26; border-radius:19px; background:#b63c32; color:#fff2df; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; box-shadow:8px 12px 24px #543a3438; text-align:center; }
.pd-phone small { font-size:8px; letter-spacing:1.5px; text-transform:uppercase; }
.pd-phone strong { font-weight:500; line-height:1.4; font-size:16px; }
.pd-phone span { font-size:30px; }
#formats .pd-surprise h3 { margin:0 0 8px; font-size:26px; letter-spacing:-.7px; }
.pd-surprise p { max-width:560px; font-size:14px; line-height:1.6; margin:0; color:#635344; }
.pd-surprise .pd-cta { background:transparent; border:1px solid #806b52; font-size:13px; min-height:48px; }
.pd-surprise .pd-cta:hover { background:#eae7dc70; }
@media(max-width:1100px) { .pd-card-copy { grid-template-columns:1fr; } .pd-card-copy .pd-cta { justify-self:start; } .pd-surprise { grid-template-columns:150px 1fr auto; gap:20px; padding-right:22px; } }
@media(max-width:700px) {
  #formats .pd-heading { text-align:left; margin-bottom:24px; }
  #formats .pd-heading p:last-child { font-size:14px; line-height:1.6; }
  .pd-grid { grid-template-columns:1fr; gap:20px; }
  .pd-card { padding:6px; border-radius:13px; }
  .pd-card-copy { padding:17px 12px 12px; gap:15px; }
  .pd-card-copy .pd-cta { justify-self:stretch; font-size:13px; }
  .pd-play { width:58px; height:58px; }
  .pd-cover-caption { bottom:12px; gap:8px; font-size:12px; }
  .pd-cover-caption small { font-size:10px; padding-left:8px; }
  .pd-surprise { grid-template-columns:90px 1fr; padding:18px 16px; gap:14px; }
  .pd-surprise-art { height:140px; }
  .pd-phone { width:74px; height:128px; border-width:3px; border-radius:13px; transform:rotate(-8deg); gap:9px; }
  .pd-phone strong { font-size:11px; } .pd-phone small { font-size:6px; } .pd-phone span { font-size:22px; }
  #formats .pd-surprise h3 { font-size:20px; }
  .pd-surprise p { font-size:12px; }
  .pd-surprise .pd-cta { grid-column:1/-1; }
}
@media(prefers-reduced-motion:reduce) { .pd-cover img,.pd-play,.pd-cta { transition:none; } .pd-cover:hover img { transform:none; } }