/* /print-on-demand/ option C: split screen, dark selling panel on the left, picture + form on the right (sticky).
   On phones: headline, then the form, then the gifts. */
.oc{display:grid;grid-template-columns:55% 45%;grid-template-areas:"head form" "body form";grid-template-rows:auto 1fr;
  background:linear-gradient(90deg,var(--navy) 55%,var(--sky,#eef7fd) 55%)}
.oc-head{grid-area:head;padding:56px 48px 0 max(24px,calc(55vw - 670px));color:#fff}
.oc-body{grid-area:body;padding:8px 48px 64px max(24px,calc(55vw - 670px));color:#c9d8e6}
.oc-right{grid-area:form;padding:44px max(24px,calc(45vw - 540px)) 56px 40px}
.oc-h1{font-family:var(--hf);font-weight:800;font-size:clamp(30px,3.1vw,44px);line-height:1.15;color:#fff;margin:0 0 16px;max-width:640px}
.oc-hot{color:#ff8a7e}
.oc-sell{font:700 clamp(20px,1.7vw,23px)/1.35 var(--hf);color:#fff;margin:0 0 10px;max-width:640px}
.oc-sell em{font-weight:500;color:#c9d8e6}
.oc-art{display:block;width:100%;max-width:470px;height:auto;margin:0 0 22px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
.oc-list{list-style:none;counter-reset:g;margin:0;padding:0;display:grid;gap:18px;max-width:640px}
.oc-list li{counter-increment:g;position:relative;padding:0 0 0 54px}
.oc-list li::before{content:counter(g);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font:800 18px/1 var(--hf)}
.oc-list b{display:block;color:#fff;font:700 19px/1.3 var(--hf);margin-bottom:2px}
.oc-fb{margin:22px 0 0;padding-left:16px;border-left:4px solid var(--teal);color:#e7eef5;max-width:640px}
.oc-mark{display:flex;gap:18px;align-items:center;margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.15);max-width:640px}
.oc-mark img{width:84px;height:84px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 8%;background:var(--teal-l,#e6f5f5)}
.oc-mark p{margin:0;font-size:17px;color:#e7eef5}
.oc-mark span{display:block;margin-top:6px;color:#a9bccd;font-weight:600;font-size:16px}
.oc-sticky{position:sticky;top:96px;max-width:500px}
.oc-photo{display:block;width:100%;height:auto;border-radius:18px 18px 0 0}
.oc-form{background:#fff;border-radius:0 0 18px 18px;padding:24px 26px 22px;box-shadow:var(--shadow,0 10px 30px rgba(15,42,68,.12));border-top:6px solid var(--coral,#e8473b)}
.oc-form .oi-box-t{margin-bottom:4px}
.oc-sub{text-align:center;color:var(--muted);margin:0 0 16px;font-size:17px}
.oc-form .oi-lock{text-align:center;margin-top:12px}
.oc-again{display:none;margin:32px 0 0;text-align:center}
@media (max-width:980px){
  .oc{display:block;background:var(--navy)}
  .oc-head{padding:32px 24px 8px}
  .oc-right{padding:12px 24px 8px}
  .oc-sticky{position:static;margin:0 auto}
  .oc-body{padding:32px 24px 48px}
  .oc-again{display:block}
  .oc-art{margin-left:auto;margin-right:auto;max-width:340px}
}
/* phones: the form button in the first screen (Edsun 11 Nov); the picture moves under the form */
@media (max-width:600px){
  .oc-head{padding-top:20px}
  .oc-h1{font-size:27px;margin-bottom:10px}
  .oc-sell{font-size:18px;margin-bottom:4px}
  .oc-sticky{display:flex;flex-direction:column}
  .oc-form{order:1;border-radius:18px 18px 0 0;padding:18px 20px 18px}
  .oc-photo{order:2;border-radius:0 0 18px 18px}
  .oc-sub{margin-bottom:12px;font-size:16px}
}
@media (max-width:380px){.oc-h1{font-size:24px}.oc-sell{font-size:17px}}
@media (max-width:380px){.oc-head{padding-top:14px}.oc-form{padding-top:14px}}