/* Safaroka V1.9.86 — image-first promo gallery + detail modal. */
.promo-showcase-section{padding:26px 0 32px!important;background:#fff!important;overflow:hidden}
.promo-showcase-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:14px}
.promo-showcase-head>div>span{display:block;margin-bottom:5px;color:#08745d;font-size:10px;font-weight:900;letter-spacing:.16em}
.promo-showcase-head h2{margin:0;color:#173f35;font-size:28px;line-height:1.08;letter-spacing:-.025em}
.promo-showcase-head p{margin:6px 0 0;color:#75847e;font-size:12.5px;line-height:1.45}
.promo-showcase-head>a{display:inline-flex;align-items:center;gap:5px;color:#08745d;font-size:12px;font-weight:850;white-space:nowrap}
.promo-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,360px));gap:14px;justify-content:start}
.promo-gallery-all{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch}
.promo-gallery-card{appearance:none;position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;padding:0;border:1px solid #e3e9e6;border-radius:20px;background:#e8efec;box-shadow:0 10px 28px rgba(22,58,48,.10);cursor:pointer;text-align:left;isolation:isolate;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.promo-gallery-card:hover{transform:translateY(-3px);border-color:#c9ddd5;box-shadow:0 16px 36px rgba(22,58,48,.15)}
.promo-gallery-card:focus-visible{outline:3px solid rgba(8,116,93,.24);outline-offset:3px}
.promo-gallery-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.promo-gallery-card:hover>img{transform:scale(1.025)}
.promo-gallery-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,32,25,.04) 24%,rgba(4,32,25,.12) 52%,rgba(4,32,25,.80) 100%)}
.promo-gallery-badge{position:absolute;z-index:2;left:12px;top:12px;max-width:calc(100% - 24px);padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.92);color:#08705a;font-size:8.5px;line-height:1;font-weight:900;letter-spacing:.10em;box-shadow:0 5px 14px rgba(9,45,35,.12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.promo-gallery-copy{position:absolute;z-index:2;left:14px;right:48px;bottom:12px;color:#fff;text-shadow:0 2px 9px rgba(0,0,0,.30)}
.promo-gallery-copy b{display:block;font-size:16px;line-height:1.13;font-weight:850;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.promo-gallery-copy small{display:block;margin-top:4px;color:#f5d88f;font-size:10px;font-weight:800}
.promo-gallery-arrow{position:absolute;z-index:2;right:12px;bottom:12px;width:29px;height:29px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.94);color:#08624f;box-shadow:0 5px 15px rgba(0,0,0,.15)}

/* Detail dialog */
.promo-detail-modal[hidden]{display:none!important}
.promo-detail-modal{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:22px}
.promo-detail-backdrop{position:absolute;inset:0;border:0;background:rgba(5,31,25,.58);backdrop-filter:blur(4px);cursor:default}
.promo-detail-panel{position:relative;z-index:1;width:min(1000px,100%);max-height:min(720px,calc(100vh - 44px));display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);align-items:start;overflow:hidden;border:1px solid rgba(255,255,255,.55);border-radius:26px;background:#fff;box-shadow:0 30px 90px rgba(2,28,21,.34)}
.promo-detail-close{position:absolute;z-index:4;right:14px;top:14px;width:38px;height:38px;border:1px solid rgba(18,62,50,.12);border-radius:999px;background:rgba(255,255,255,.95);color:#244d42;font-size:25px;line-height:1;box-shadow:0 7px 20px rgba(16,51,42,.12);cursor:pointer}
.promo-detail-media{position:relative;align-self:stretch;min-height:100%;padding:18px;background:radial-gradient(circle at top right,rgba(111,168,145,.22),transparent 30%),linear-gradient(180deg,#f3f7f5 0%,#eef5f2 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.promo-detail-media img{width:100%;height:auto;max-height:100%;aspect-ratio:16/9;object-fit:contain;object-position:center;display:block;border-radius:18px;box-shadow:0 14px 36px rgba(7,47,37,.12);background:#dfe8e4}
.promo-detail-content{overflow:auto;max-height:min(720px,calc(100vh - 44px));padding:30px 30px 28px}
.promo-detail-badge{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:#eaf7f2;color:#08705a;font-size:9px;font-weight:900;letter-spacing:.12em}
.promo-detail-content h2{margin:12px 0 4px;color:#173f35;font-size:27px;line-height:1.1;letter-spacing:-.025em}
.promo-detail-content>strong{display:block;color:#b78427;font-family:Georgia,"Times New Roman",serif;font-size:23px;line-height:1.2}
.promo-detail-description{margin:13px 0 0;color:#63756e;font-size:13px;line-height:1.62}
.promo-detail-meta{display:grid;gap:7px;margin-top:18px;padding:14px 0;border-top:1px solid #edf1ef;border-bottom:1px solid #edf1ef}
.promo-detail-meta span{display:flex;align-items:center;gap:8px;color:#789087;font-size:11px}.promo-detail-meta b{color:#35594f;font-weight:800}
.promo-detail-terms{margin-top:16px;padding:14px;border-radius:14px;background:#f7faf8;border:1px solid #e8efec}
.promo-detail-terms[hidden]{display:none!important}.promo-detail-terms small{color:#9a762d;font-size:8.5px;font-weight:900;letter-spacing:.12em}.promo-detail-terms p{margin:7px 0 0;color:#63756e;font-size:11px;line-height:1.55;white-space:pre-line}
.promo-detail-cta{width:100%;margin-top:18px;justify-content:center}
body.promo-detail-open{overflow:hidden}

/* Public /promo page */
.promo-showcase-page{background:#fbfcfb}.promo-page-head{align-items:center;margin-bottom:17px}.promo-page-head>div>p{max-width:720px}.promo-public-empty{padding:38px;border:1px solid #e6ece9;border-radius:20px;background:#fff;text-align:center}.promo-public-empty h2{margin:10px 0 4px;color:#173f35}.promo-public-empty p{margin:0 0 16px;color:#718078}

/* Admin artwork uploader */
.promo-artwork-admin{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:18px;align-items:center;padding:16px;border:1px solid #dfe9e5;border-radius:16px;background:#f8fbf9}
.promo-artwork-copy>b{display:block;color:#173f35;font-size:13px}.promo-artwork-copy>p{margin:5px 0 11px;color:#71827b;font-size:11px;line-height:1.5}.promo-artwork-pick{width:max-content}.promo-remove-image{display:flex!important;align-items:center;gap:7px;margin-top:10px;color:#915151!important;font-size:10.5px!important}.promo-remove-image input{width:auto!important;height:auto!important}
.promo-artwork-preview{aspect-ratio:16/9;overflow:hidden;border:1px solid #dfe8e4;border-radius:13px;background:#eef4f1}.promo-artwork-preview img{width:100%;height:100%;object-fit:cover;display:block}.promo-artwork-preview>div{height:100%;display:grid;place-items:center;align-content:center;gap:7px;padding:12px;color:#799088;text-align:center;font-size:10.5px;line-height:1.4}
.promo-admin-media{display:grid;gap:7px;justify-items:start}.promo-admin-thumb{width:72px;height:48px;object-fit:cover;border-radius:9px;border:1px solid #dde7e3;flex:0 0 auto}

@media(max-width:900px){
 .promo-gallery-all{grid-template-columns:repeat(2,minmax(0,1fr))}
 .promo-detail-panel{grid-template-columns:1fr;max-width:680px;overflow:auto}.promo-detail-media{min-height:0;padding:0;aspect-ratio:auto;background:#e8eeeb;display:block}.promo-detail-media img{min-height:0;aspect-ratio:16/9;width:100%;height:auto;max-height:none;object-fit:cover;border-radius:0;box-shadow:none;background:transparent}.promo-detail-content{overflow:visible;max-height:none}
}
@media(max-width:700px){
 .promo-showcase-section{padding:16px 0 20px!important;border-top:1px solid #eff3f1}
 .promo-showcase-section .section-shell{width:100%!important}
 .promo-showcase-head{margin:0 14px 11px;align-items:center}.promo-showcase-head>div>span{font-size:9px;margin-bottom:4px}.promo-showcase-head h2{font-size:20.5px}.promo-showcase-head p{display:none}.promo-showcase-head>a{font-size:11px}
 .promo-gallery,.promo-gallery-all{display:flex;overflow-x:auto;gap:11px;width:100%;padding:1px 14px 6px;scroll-snap-type:x mandatory;scroll-padding-left:14px;scrollbar-width:none;justify-content:flex-start}.promo-gallery::-webkit-scrollbar{display:none}
 .promo-gallery-card{flex:0 0 min(78vw,310px);aspect-ratio:16/9;border-radius:17px;scroll-snap-align:start}.promo-gallery-copy b{font-size:15px}.promo-gallery-copy small{font-size:9.5px}.promo-gallery-badge{font-size:8px}
 .promo-detail-modal{align-items:end;padding:0}.promo-detail-panel{width:100%;max-height:90vh;border-radius:24px 24px 0 0;border-bottom:0}.promo-detail-media,.promo-detail-media img{aspect-ratio:16/9}.promo-detail-content{padding:20px 18px calc(22px + env(safe-area-inset-bottom))}.promo-detail-content h2{font-size:22px}.promo-detail-content>strong{font-size:20px}.promo-detail-close{right:10px;top:10px;width:35px;height:35px}
 .promo-showcase-page .section-shell{width:100%}.promo-page-head{padding:0 14px}.promo-page-head>a{display:none}
 .promo-artwork-admin{grid-template-columns:1fr}.promo-artwork-preview{max-width:420px}
}
@media(prefers-reduced-motion:reduce){.promo-gallery-card,.promo-gallery-card>img{transition:none!important}}

/* V1.9.86 R2: keep promo detail image same 16:9 proportion as homepage cards on desktop modal. */

/* V1.9.86 R3: desktop promo popup left media now fills full column and removes empty white area below the artwork. */