/* Pattern detail page components — colorful, responsive and reference-inspired */
/* Corrected pattern page layout: prevent sticky/oversized image panels and keep the detail page full-width. */
.cis-pattern-detail-wrap{display:block!important;width:min(1160px,calc(100% - 3rem))!important;max-width:1160px!important;margin:0 auto!important;padding:1.3rem 0 3rem!important}
.cis-pattern-detail-wrap .cis-pattern-top{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:1.5rem!important;align-items:start!important}
.cis-pattern-detail-wrap .cis-pattern-visual{position:relative!important;top:auto!important;min-height:0!important;aspect-ratio:1/1!important;width:100%!important;max-width:none!important}
.cis-pattern-detail-wrap .cis-pattern-visual img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover!important}
.cis-pattern-detail-wrap .cis-pattern-purchase-column{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:.8rem!important;min-width:0!important}
.cis-pattern-detail-wrap .cis-pattern-buy-card h1{font-size:clamp(1.8rem,3vw,2.7rem)!important;line-height:1.12!important;overflow-wrap:anywhere!important}
.cis-pattern-detail-wrap .cis-pattern-info-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1rem!important}
.cis-pattern-detail-wrap .cis-pattern-content{overflow-wrap:anywhere}
@media(max-width:800px){.cis-pattern-detail-wrap{width:calc(100% - 2rem)!important}.cis-pattern-detail-wrap .cis-pattern-top{grid-template-columns:minmax(0,1fr)!important}.cis-pattern-detail-wrap .cis-pattern-visual{max-width:620px!important;aspect-ratio:1.1/1!important;margin:0 auto!important}.cis-pattern-detail-wrap .cis-pattern-info-grid{grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:480px){.cis-pattern-detail-wrap{width:calc(100% - 1rem)!important}.cis-pattern-detail-wrap .cis-pattern-visual{aspect-ratio:1/1!important}.cis-pattern-detail-wrap .cis-pattern-top{gap:1rem!important}}

.cis-pattern-detail-wrap{max-width:1200px!important;width:min(100% - 3rem,1200px)!important;margin:0 auto;padding:1.5rem 0 4rem;color:#29251f}
.cis-pattern-breadcrumb{font-size:.82rem;color:#7a7068;margin:0 0 1.1rem}.cis-pattern-breadcrumb a{color:#526a2a;text-decoration:none}
.cis-pattern-top{display:grid;grid-template-columns:minmax(0, .95fr) minmax(0,1.12fr);gap:1.35rem;align-items:start}
.cis-pattern-visual{position:sticky;top:1rem;overflow:hidden;border-radius:22px;background:#fbe5eb;min-height:430px;aspect-ratio: .95/1.0;display:flex;align-items:center;justify-content:center}
.cis-pattern-visual img{width:100%;height:100%;object-fit:cover;display:block}.cis-pattern-image-empty{padding:2rem;text-align:center;color:#795362;font-size:1.2rem}
.cis-pattern-purchase-column{display:grid;gap:.8rem}.cis-pattern-buy-card,.cis-download-details,.cis-pattern-info-card,.cis-pattern-faq{background:#fff;border-radius:22px;padding:1.15rem;border:1px solid #f0ece6}
.cis-pattern-badges{display:flex;gap:.45rem;flex-wrap:wrap}.cis-pattern-badge{border-radius:7px;padding:.28rem .65rem;font-size:.76rem;font-weight:700}.cis-badge-level{background:#e7efc9;color:#40551f}.cis-badge-category{background:#fff1d6;color:#684b17;border:1px solid #f4dfb3}
.cis-pattern-buy-card h1{font-size:clamp(1.7rem,2.5vw,2.3rem);line-height:1.14;margin:.85rem 0 .35rem;letter-spacing:-.035em;color:#25211d}.cis-pattern-byline{margin:0;color:#756c64;font-size:.9rem}.cis-pattern-price-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:1rem 0}.cis-pattern-price-row strong{font-size:1.7rem;color:#28783d}.cis-pattern-price-row span{font-size:.82rem;color:#756c64}.cis-pattern-price-row em{font-style:normal;font-size:.72rem;font-weight:800;background:#ffda49;color:#3e3210;padding:.28rem .55rem;border-radius:6px}
.cis-pattern-download{display:flex;align-items:center;justify-content:center;gap:.65rem;width:100%;box-sizing:border-box;background:#4c6b22;color:#fff!important;border-radius:12px;padding:1rem;font-size:1.02rem;font-weight:800;text-decoration:none;transition:background .2s,transform .2s}.cis-pattern-download:hover{background:#38531a;transform:translateY(-1px)}.cis-pattern-download-unavailable{background:#dce5cf;color:#41552b!important}.cis-pattern-pdf-note{font-size:.78rem;color:#857a70;margin:.55rem 0 0}
.cis-pattern-share{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;border-top:1px solid #eee7df;padding-top:.8rem;margin-top:.9rem;font-size:.8rem}.cis-pattern-share span{color:#786f66}.cis-pattern-share a,.cis-pattern-share button{color:#456525;font-weight:700;text-decoration:underline;text-decoration-color:#ffd34c;text-underline-offset:4px;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.cis-pattern-rank-card{display:flex;align-items:center;gap:.8rem;border-radius:18px;padding:.9rem;background:linear-gradient(100deg,#edf4d9,#fff);border:1px solid #dce9bb;color:#25251d;text-decoration:none}.cis-pattern-rank-star{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:50%;background:#4c6128;color:#fff;font-size:1.2rem}.cis-pattern-rank-card span:nth-child(2){display:grid;gap:.18rem}.cis-pattern-rank-card strong{font-size:.87rem}.cis-pattern-rank-card small{color:#786f66;font-size:.77rem}.cis-pattern-rank-card>b{margin-left:auto;font-size:1.5rem}
.cis-ad-slot{position:relative;box-sizing:border-box;border:1px solid #e8e3dc;border-radius:15px;background:#eeece7;color:#82776c;display:flex;align-items:center;justify-content:center;text-align:center;min-height:100px;overflow:hidden}.cis-ad-slot>span{position:absolute;top:9px;left:12px;font-size:.58rem;letter-spacing:.09em}.cis-ad-slot>div{display:grid;gap:.2rem;font-size:.7rem}.cis-ad-slot>div strong{letter-spacing:.09em}.cis-ad-slot>div small{font-size:.68rem}.cis-ad-728{min-height:94px}.cis-ad-336{min-height:280px;margin:1.25rem 0}.cis-ad-responsive{min-height:300px;margin:1.25rem 0 2rem}
.cis-download-details h2{font-size:1.1rem;margin:0 0 .7rem}.cis-download-detail-row{display:flex;align-items:center;gap:.7rem;background:#f7f5f2;border-radius:13px;padding:.7rem;margin-top:.5rem}.cis-file-icon{display:grid;place-items:center;background:white;border-radius:10px;min-width:38px;height:38px;color:#4d6e26;font-size:1.2rem}.cis-download-detail-row>span:nth-child(2){display:grid;gap:.15rem}.cis-download-detail-row strong{font-size:.85rem}.cis-download-detail-row small{font-size:.75rem;color:#81776e}.cis-download-detail-row>b{margin-left:auto;font-size:.82rem}
.cis-pattern-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.cis-pattern-info-card h2{font-size:1.35rem;margin:0 0 .7rem;letter-spacing:-.02em}.cis-pattern-info-card h3{font-size:1.05rem;margin:1.2rem 0 .5rem}.cis-pattern-quick-answer,.cis-pattern-content{font-size:.96rem;line-height:1.75}.cis-pattern-content>*:first-child{margin-top:0}.cis-pattern-facts{margin:0}.cis-pattern-facts>div{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;border-bottom:1px solid #eee8e0;font-size:.84rem}.cis-pattern-facts dt{color:#82766b}.cis-pattern-facts dd{margin:0;text-align:right;font-weight:700;max-width:60%}.cis-pattern-print{margin-top:1rem;border:1px solid #d9dfcc;border-radius:999px;padding:.65rem 1rem;background:#f4f7ed;color:#405622;font-weight:700;cursor:pointer}
.cis-pattern-faq{margin-top:1rem}.cis-pattern-faq h2{font-size:1.3rem;margin:0 0 .8rem}.cis-pattern-faq details{background:#f7f5f2;border-radius:12px;margin:.5rem 0;padding:.85rem 1rem}.cis-pattern-faq summary{font-weight:700;cursor:pointer}.cis-pattern-faq details p{font-size:.9rem;line-height:1.6;margin:.7rem 0 0}
@media(max-width:800px){.cis-pattern-detail-wrap{width:min(100% - 1.5rem,620px)!important}.cis-pattern-top{grid-template-columns:1fr}.cis-pattern-visual{position:static;min-height:300px;aspect-ratio:1.15/1}.cis-pattern-info-grid{grid-template-columns:1fr}.cis-ad-728{min-height:90px}}
@media(max-width:480px){.cis-pattern-detail-wrap{width:calc(100% - 1rem)!important}.cis-pattern-buy-card,.cis-download-details,.cis-pattern-info-card,.cis-pattern-faq{padding:.9rem;border-radius:16px}.cis-pattern-facts>div{font-size:.8rem}.cis-pattern-share{gap:.65rem}.cis-ad-responsive{min-height:250px}}
@media print{.cis-pattern-breadcrumb,.cis-pattern-share,.cis-pattern-rank-card,.cis-ad-slot,.cis-pattern-faq,.cis-pattern-print,.cis-header,.cis-footer{display:none!important}.cis-pattern-top,.cis-pattern-info-grid{display:block}.cis-pattern-visual{position:static;max-width:5in;min-height:0;margin:0 auto 1rem}.cis-pattern-buy-card,.cis-download-details,.cis-pattern-info-card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}}
/* Download preparation modal, matching the reference interaction. */
.cis-pattern-download.cis-open-download-modal{font:inherit;font-size:1.02rem;cursor:pointer;border:0;text-align:center}
.cis-pattern-download-unavailable{opacity:1;cursor:pointer}
body.cis-download-modal-open{overflow:hidden}
.cis-download-modal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:1rem;box-sizing:border-box}
.cis-download-modal.is-open{display:flex}
.cis-download-modal-backdrop{position:absolute;inset:0;background:rgba(25,23,20,.52);backdrop-filter:blur(1px)}
.cis-download-modal-panel{position:relative;z-index:1;width:min(100%,635px);max-height:calc(100vh - 2rem);overflow:auto;box-sizing:border-box;padding:1.2rem;border-radius:27px;background:#fff;color:#29251f;box-shadow:0 18px 70px rgba(0,0,0,.18)}
.cis-download-modal-panel h2{font-size:1.45rem;line-height:1.2;margin:.25rem 3rem 1rem 0;letter-spacing:-.025em}
.cis-download-modal-close{position:absolute;right:1rem;top:.9rem;width:42px;height:42px;border:0;border-radius:50%;background:#f3f1ed;color:#302d28;font-size:1.8rem;line-height:1;cursor:pointer}
.cis-download-modal-file{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:#82776c;font-size:1rem;margin-bottom:.8rem}
.cis-download-modal-file strong{font-size:.95rem;color:#82776c;white-space:nowrap}
.cis-download-progress{height:12px;border-radius:999px;background:#eeeae4;overflow:hidden;margin-bottom:.9rem}
.cis-download-progress span{display:block;width:0;height:100%;background:#4e702a;transition:width .25s ease}
.cis-download-modal-ad{height:300px;max-height:42vh;min-height:210px;position:relative;box-sizing:border-box;border-radius:18px;background:#eeece7;color:#82776c;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.cis-download-modal-ad>span{position:absolute;top:13px;left:15px;font-size:.65rem;letter-spacing:.08em}
.cis-download-modal-ad>div{display:grid;gap:.3rem;font-size:.8rem}
.cis-download-modal-ad>div strong{letter-spacing:.1em}
.cis-download-modal-ad>div small{font-size:.78rem}
.cis-download-modal-status{margin:.9rem .1rem .1rem;color:#6f665d;font-size:.9rem;line-height:1.5}
.cis-download-modal-fallback{display:block;box-sizing:border-box;width:100%;margin:.65rem 0 0;padding:1rem 1.2rem;border:0;border-radius:10px;background:#4c6b22;color:white!important;text-align:center;text-decoration:none;font-size:1.15rem;font-weight:850;line-height:1.6;box-shadow:0 0 0 4px #fff,0 0 0 7px #b94b78;cursor:pointer}.cis-download-modal-fallback[hidden]{display:none}
@media(max-width:480px){.cis-download-modal{padding:.55rem}.cis-download-modal-panel{padding:1rem;border-radius:21px}.cis-download-modal-panel h2{font-size:1.25rem}.cis-download-modal-ad{height:250px;min-height:180px}.cis-download-modal-file{font-size:.85rem}}

