/* op-pdp-ui.css — shared description UI for custom & style product pages (glance/order guide, closing CTA, mobile rails). Scoped to .opx and specific section ids. */
.opx{--x-p:#7C3AED;--x-p2:#5B21B6;--x-pl:#F3EEFF;--x-ink:#17131F;--x-mut:#5F5A6B;--x-line:#E7E2F1;--x-bg:#F8F6FC;box-sizing:border-box;max-width:1120px;margin:0 auto;color:var(--x-ink);font-family:Intertight,'Segoe UI',Arial,sans-serif;line-height:1.55;text-align:left}
.opx *,.opx *::before,.opx *::after{box-sizing:border-box}
.opx h2,.opx h3,.opx p,.opx ul,.opx ol,.opx dl,.opx dd,.opx dt,.opx figure{margin:0;padding:0}
.opx ul,.opx ol{list-style:none}
.opx a{color:var(--x-p2)}
/* glance */
.opx-glance{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:20px;margin:18px auto 8px;padding:28px;border:1px solid var(--x-line);border-radius:22px;background:linear-gradient(180deg,#FBFAFE 0%,#F5F1FD 100%)}
.opx-k{display:block;margin:0 0 8px;color:var(--x-p);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.opx-glance h2{font-size:clamp(22px,2.3vw,30px);line-height:1.2;font-weight:750;letter-spacing:-.01em;color:var(--x-ink)}
.opx-lead{margin-top:10px!important;color:var(--x-mut);font-size:15px;line-height:1.6;max-width:44em}
.opx-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px!important}
.opx-spec{padding:12px 14px;border:1px solid var(--x-line);border-radius:14px;background:#fff;min-width:0}
.opx-spec dt{color:var(--x-mut);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.opx-spec dd{margin-top:3px!important;color:var(--x-ink);font-size:14px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.opx-order{display:flex;flex-direction:column;padding:20px;border-radius:18px;background:#fff;border:1px solid var(--x-line);box-shadow:0 10px 28px rgba(60,30,120,.07)}
.opx-order h3{font-size:17px;line-height:1.3;font-weight:750}
.opx-steps{margin-top:12px!important;counter-reset:opx}
.opx-steps li{position:relative;padding:9px 0 9px 40px;border-bottom:1px dashed var(--x-line);font-size:14px;line-height:1.45;color:var(--x-mut);counter-increment:opx}
.opx-steps li:last-child{border-bottom:0}
.opx-steps li::before{content:counter(opx,decimal-leading-zero);position:absolute;left:0;top:8px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:var(--x-pl);color:var(--x-p2);font-size:12px;font-weight:800}
.opx-steps b{display:block;color:var(--x-ink);font-size:14px}
.opx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin-top:14px;padding:0 20px;border-radius:999px!important;background:var(--x-p);color:#fff!important;font-size:15px;font-weight:750;text-decoration:none!important;transition:background .2s,transform .2s}
.opx-btn:hover,.opx-btn:focus-visible{background:var(--x-p2);transform:translateY(-1px)}
.opx-btn.is-ghost{background:#fff;color:var(--x-p2)!important;border:1px solid #D9CCF8!important}
.opx-btn.is-ghost:hover{background:var(--x-pl)}
.opx-trust{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px!important;color:var(--x-mut);font-size:12.5px;font-weight:600}
.opx-trust li{display:inline-flex;align-items:center;gap:6px}
.opx-trust li::before{content:"";width:7px;height:7px;border-radius:50%;background:#16A34A;flex:0 0 auto}
.opx-note{margin-top:12px!important;color:var(--x-mut);font-size:12.5px;line-height:1.5}
.opx-glance__main{align-self:center;min-width:0}
#hs{scroll-margin-top:72px}
/* closing CTA */
.opx-end{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:28px auto 8px;padding:24px 28px;border-radius:22px;background:#1E1531;color:#fff}
.opx-end__t{font-size:clamp(19px,2vw,24px);font-weight:750;line-height:1.25;color:#fff}
.opx-end__s{margin-top:6px!important;color:#D9D2EA;font-size:14px;line-height:1.5}
.opx-end__a{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}
.opx-end .opx-btn{margin-top:0}
.opx-end .opx-btn.is-ghost{background:transparent;color:#fff!important;border:1px solid rgba(255,255,255,.45)!important}
.opx-end .opx-btn.is-ghost:hover{background:rgba(255,255,255,.08)}
/* generic style-template block (template-level, non-custom products) */
.opx-style{margin:8px auto 0}
.opx-style .opx-glance{grid-template-columns:1fr}
.opx-hide-custom{display:block}
body:has(#hs) .opx-hide-custom{display:none!important}
@media(max-width:1023px){.opx-glance{grid-template-columns:1fr;padding:22px}.opx-specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 .opx-glance{margin:10px auto 4px;padding:18px 14px;border-radius:18px;gap:14px}
 .opx-lead{font-size:14px}
 .opx-specs{gap:8px;margin-top:14px!important}
 .opx-spec{padding:10px 11px}
 .opx-spec dd{font-size:13px}
 .opx-order{padding:16px 14px}
 .opx-btn{width:100%}
 .opx-end{flex-direction:column;align-items:stretch;padding:20px 16px;margin-top:20px}
 .opx-end__a{flex-direction:column}
 /* mobile photo rails instead of very long stacked grids */
 #real-gallery-58617 .gallery-grid{display:flex!important;overflow-x:auto;gap:10px!important;scroll-snap-type:x mandatory;scroll-padding-left:2px;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 #real-gallery-58617 .gallery-tile{flex:0 0 74%;scroll-snap-align:start}
 #real-gallery-58617 .gallery-tile[hidden]{display:none!important}
 #real-gallery-58617 .gallery-tile img{width:100%;height:340px!important;object-fit:cover!important}
 .slrg .slrg__grid{display:flex!important;overflow-x:auto;gap:10px!important;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 .slrg .slrg__grid>.slrg__item{flex:0 0 74%;scroll-snap-align:start;min-width:0}
}
@media(prefers-reduced-motion:reduce){.opx-btn{transition:none}}
/* style FAQ + shipping (template-level) */
.opx-faq{margin:28px auto 0;padding:28px;border:1px solid var(--x-line);border-radius:22px;background:#fff}
.opx-faq h2{font-size:clamp(21px,2.2vw,28px);line-height:1.2;font-weight:750}
.opx-qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;align-items:start}
.opx-q{border:1px solid var(--x-line);border-radius:14px;background:var(--x-bg)}
.opx-q summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;list-style:none;font-size:15px;font-weight:700;line-height:1.35;color:var(--x-ink)}
.opx-q summary::-webkit-details-marker{display:none}
.opx-q summary::after{content:"+";flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--x-pl);color:var(--x-p2);font-weight:800}
.opx-q[open] summary::after{content:"−"}
.opx-a{padding:0 16px 14px;color:var(--x-mut);font-size:14px;line-height:1.6}
.opx-ship{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px auto 8px}
.opx-ship__i{padding:16px 18px;border:1px solid var(--x-line);border-radius:16px;background:var(--x-bg)}
.opx-ship__i h3{font-size:15px;font-weight:750;margin:0 0 4px}
.opx-ship__i p{margin:0;color:var(--x-mut);font-size:13.5px;line-height:1.55}
.opx-tpl{max-width:1120px;margin:0 auto;padding:0 0 12px}
.opx-tpl .opd{max-width:1120px;margin:0 auto}
@media(max-width:760px){.opx-qs{grid-template-columns:1fr}.opx-ship{grid-template-columns:1fr}.opx-faq{padding:18px 14px}.opx-q summary{font-size:14px;padding:12px 13px}}
.opx-dyn{display:block;margin:-2px 0 8px;color:var(--x-mut);font-size:13px;font-weight:600}
.opx-dyn:empty{display:none}
.opx-style-section .f-custom-content__block,.opx-style-section .f-custom-content__wrapper{width:100%}

/* hide empty style-guide section wrapper on custom (designer) pages */
body:has(#hs) .f-section:has(.opx-hide-custom),body:has(#hs) #f-custom-custom-content-opxStyleG1{display:none!important}