/* ══════════════════════════════════════════════════════════
   MUNE MADE — promotions, sale pricing, announcement bar.
   Shared by the storefront and the admin preview. Themes:
   yolk · ink · sky · sand · clay.  Attention: none · pulse · shimmer.
   ══════════════════════════════════════════════════════════ */
.pm-yolk{--pm-bg:linear-gradient(100deg,#1b1105,#311e08 58%,#3d2609);--pm-fg:#fff;--pm-k:#e2a327;--pm-p:rgba(255,255,255,.8);--pm-btn:#e2a327;--pm-btnfg:#241701;--pm-btn2:#f0b437}
.pm-ink {--pm-bg:linear-gradient(100deg,#0f1622,#1b2a3f 60%,#22364f);--pm-fg:#fff;--pm-k:#8fc0ff;--pm-p:rgba(255,255,255,.78);--pm-btn:#fff;--pm-btnfg:#16202e;--pm-btn2:#e9f1fc}
.pm-sky {--pm-bg:linear-gradient(100deg,#e9f1fc,#f4f8fe 60%,#fff);--pm-fg:#16202e;--pm-k:#2f66b0;--pm-p:#4b5a6e;--pm-btn:#3d7fd6;--pm-btnfg:#fff;--pm-btn2:#2f66b0}
.pm-sand{--pm-bg:linear-gradient(100deg,#f7f1e5,#efe4cf 60%,#e6d9c0);--pm-fg:#3b2e1c;--pm-k:#a8834e;--pm-p:#5e4d33;--pm-btn:#3b2e1c;--pm-btnfg:#fff;--pm-btn2:#5a4527}
.pm-clay{--pm-bg:linear-gradient(100deg,#7a2f22,#a2452f 58%,#c2553f);--pm-fg:#fff;--pm-k:#ffd9c9;--pm-p:rgba(255,255,255,.82);--pm-btn:#fff;--pm-btnfg:#7a2f22;--pm-btn2:#fbeeea}

/* announcement bar — sits above the header */
.mm-bar{background:var(--pm-bg,#16202e);color:var(--pm-fg,#fff);font-size:13.5px;font-weight:600;letter-spacing:.01em;
  text-align:center;padding:9px clamp(16px,3vw,32px);line-height:1.4;position:relative;z-index:60}
.mm-bar a{color:inherit;display:inline-flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.mm-bar a::after{content:"→";color:var(--pm-k,#e2a327);font-weight:800}
.mm-bar span:empty{display:none}

/* campaign band — same silhouette as the Yolk Gang drop block */
.mm-band{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(18px,2.6vw,40px);align-items:center;
  background:var(--pm-bg);color:var(--pm-fg);border-radius:var(--r2,22px);overflow:hidden;
  box-shadow:var(--sh,0 8px 24px rgba(22,32,46,.06));margin-bottom:clamp(14px,2vw,24px);
  transition:transform .3s var(--e,ease),box-shadow .3s var(--e,ease)}
.mm-band:hover{transform:translateY(-3px);box-shadow:var(--sh2,0 18px 44px rgba(22,32,46,.10))}
.mm-band .ph{aspect-ratio:4/3.4;overflow:hidden;background:rgba(0,0,0,.12)}
.mm-band .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .6s var(--e,ease)}
.mm-band:hover .ph img{transform:scale(1.04)}
.mm-band.noimg{grid-template-columns:1fr}
.mm-band.noimg .tx{padding:clamp(26px,3vw,44px) clamp(22px,3vw,44px)}
.mm-band .tx{display:grid;gap:11px;justify-items:start;padding:clamp(20px,2.6vw,36px) clamp(20px,2.6vw,40px) clamp(20px,2.6vw,36px) 0}
.mm-band .k{color:var(--pm-k);letter-spacing:.16em;font-size:11.5px;font-weight:700;text-transform:uppercase}
.mm-band h2{color:var(--pm-fg);font-size:clamp(26px,3.4vw,44px);line-height:1.04;letter-spacing:-.02em;font-weight:800;margin:0}
.mm-band .zh{color:var(--pm-k);font-weight:700;font-size:clamp(15px,1.5vw,19px);letter-spacing:.05em}
.mm-band .p{color:var(--pm-p);max-width:42ch;margin:0}
.mm-band .btn{background:var(--pm-btn);color:var(--pm-btnfg);margin-top:4px;box-shadow:none}
.mm-band:hover .btn{background:var(--pm-btn2)}
@media(max-width:820px){
  .mm-band{grid-template-columns:1fr}
  .mm-band .ph{aspect-ratio:16/10}
  .mm-band .tx{padding:0 22px 24px}
}

/* sale pricing on cards / sheet / PDP */
.pr .was,s.was{color:var(--mut,#69788c);font-weight:500;text-decoration:line-through;font-size:.82em;margin-right:6px}
.pr .now{color:var(--bad,#c0392b)}
.off{display:inline-block;margin-left:7px;padding:2px 8px;border-radius:999px;background:#fdecea;color:#c0392b;
  font-size:11px;font-weight:800;letter-spacing:.04em;vertical-align:middle;line-height:1.5}
.tg.sale{background:#c0392b;color:#fff}
.sale-until{font-size:12px;color:var(--mut,#69788c);margin-top:4px}

/* attention effects — deliberately soft; a shop should feel confident, not shout */
.att-1 .btn,.att-1 .off,.mm-bar.att-1 a::after,.tg.sale,.chero.att-1 .btn.acc{animation:mmPulse 2.4s ease-in-out infinite}
.att-2 h2,.att-2 .now,.mm-bar.att-2 a{--sh-a:var(--pm-fg,#16202e);--sh-b:var(--pm-k,#e2a327);
  background:linear-gradient(100deg,var(--sh-a) 0 40%,var(--sh-b) 50%,var(--sh-a) 60% 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:mmShimmer 3.2s linear infinite}
.att-2 .now{--sh-a:#c0392b;--sh-b:#ff8a76}
.chero.att-2 h1{--sh-a:#fff;--sh-b:#e2a327;background:linear-gradient(100deg,var(--sh-a) 0 40%,var(--sh-b) 50%,var(--sh-a) 60% 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:mmShimmer 3.2s linear infinite;text-shadow:none}
.mm-bar.att-2 a::after{color:var(--pm-k,#e2a327);background:none;-webkit-text-fill-color:var(--pm-k,#e2a327)}
@keyframes mmPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(192,57,43,.35)}50%{transform:scale(1.05);box-shadow:0 0 0 9px rgba(192,57,43,0)}}
.att-1 .btn,.chero.att-1 .btn.acc{animation-name:mmGlow}
@keyframes mmGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.0)}50%{box-shadow:0 0 0 7px rgba(255,255,255,.18)}}
@keyframes mmShimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){
  .att-1 .btn,.att-1 .off,.mm-bar.att-1 a::after,.tg.sale,.att-2 h2,.att-2 .now,.mm-bar.att-2 a{animation:none}
  .att-2 h2,.att-2 .now,.mm-bar.att-2 a,.chero.att-2 h1{color:inherit;background:none;-webkit-text-fill-color:inherit}
  .att-2 .now{color:var(--bad,#c0392b)} .chero.att-2 h1{color:#fff}
}