#aromika-promos-page{
  --ap-bg:#f7f4f1;
  --ap-card:#fff;
  --ap-text:#201a1b;
  --ap-muted:#756c6e;
  --ap-line:rgba(32,26,27,.11);
  --ap-pink:#ea2f78;
  --ap-burg:#4a172a;
  --ap-green:#1d6e55;
  --ap-kaspi:#f14655;
  min-height:100vh;
  background:var(--ap-bg);
  color:var(--ap-text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
html[data-aromika-theme="dark"] #aromika-promos-page{
  --ap-bg:#171315;
  --ap-card:#211b1e;
  --ap-text:#fff9fb;
  --ap-muted:#b9aeb2;
  --ap-line:rgba(255,255,255,.11);
  --ap-burg:#35101e;
}
#aromika-promos-page *{box-sizing:border-box}
#aromika-promos-page button,
#aromika-promos-page select,
#aromika-promos-page input{font-family:inherit}

.ap-wrap{width:min(calc(100% - 64px),1380px);margin:0 auto}

/* HERO — typography synced with home sections */
.ap-hero{padding:74px 0 42px}
.ap-kicker{display:flex;align-items:center;gap:12px;margin-bottom:25px;font-size:10px;line-height:1;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.ap-kicker i{width:30px;height:1px;background:var(--ap-pink);border-radius:99px}
.ap-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:46px;align-items:end}
.ap-hero h1{margin:0;max-width:850px;font-size:clamp(50px,4.6vw,73px);line-height:1;letter-spacing:-2.5px;font-weight:680}
.ap-hero h1 em{display:block;margin-top:.06em;color:var(--ap-pink);font-family:Georgia,"Times New Roman",serif;font-size:.96em;font-style:italic;font-weight:400;letter-spacing:-1.5px}
.ap-lead{max-width:650px;margin:24px 0 0;color:#716c6e;font-size:14px;line-height:1.72}
html[data-aromika-theme="dark"] .ap-lead{color:var(--ap-muted)}

.ap-livebox{border:1px solid var(--ap-line);background:var(--ap-card);border-radius:22px;padding:20px}
.ap-livehead{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ap-livehead b{font-size:12px;font-weight:700}
.ap-live-dot{width:8px;height:8px;border-radius:50%;background:#25b67a;box-shadow:0 0 0 5px rgba(37,182,122,.12)}
.ap-updated{margin-top:13px;color:var(--ap-muted);font-size:11px;line-height:1.5}
.ap-source-mini{display:flex;gap:7px;margin-top:16px;flex-wrap:wrap}
.ap-source-mini span{border:1px solid var(--ap-line);padding:7px 9px;border-radius:999px;font-size:10px;font-weight:700}

/* TOOLBAR */
.ap-main{padding:8px 0 90px}
.ap-toolbar{position:sticky;top:12px;z-index:15;display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:24px;padding:9px;background:color-mix(in srgb,var(--ap-card) 92%,transparent);border:1px solid var(--ap-line);border-radius:18px;backdrop-filter:blur(14px)}
.ap-tabs{display:flex;gap:5px;flex-wrap:wrap}
.ap-tab,.ap-sort{appearance:none;border:0;background:transparent;color:var(--ap-text);font:inherit;cursor:pointer}
.ap-tab{padding:10px 14px;border-radius:12px;font-size:12px;font-weight:700}
.ap-tab.is-active{background:var(--ap-text);color:var(--ap-bg)}
.ap-sort{border-left:1px solid var(--ap-line);padding:8px 13px;color:var(--ap-muted);font-size:11px;font-weight:600}
.ap-sort:hover{color:var(--ap-text)}

.ap-statuses{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.ap-status{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--ap-line);background:var(--ap-card);border-radius:15px;font-size:11px;color:var(--ap-muted)}
.ap-status strong{color:var(--ap-text);font-weight:700}
.ap-status-dot{width:7px;height:7px;border-radius:50%;background:#aaa;flex:0 0 auto}
.ap-status[data-state="ok"] .ap-status-dot{background:#25b67a}
.ap-status[data-state="error"] .ap-status-dot{background:#e6a537}
.ap-status[data-state="empty"] .ap-status-dot{background:#9b9094}

/* PRODUCT GRID — 5 cards desktop */
.ap-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.ap-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--ap-card);border:1px solid var(--ap-line);border-radius:20px;text-decoration:none;color:inherit;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.ap-card:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(30,18,22,.09);border-color:rgba(234,47,120,.25)}
.ap-media{position:relative;height:205px;background:linear-gradient(145deg,#f6f1f3,#fff);display:flex;align-items:center;justify-content:center;padding:18px}
.ap-card[data-source="kaspi"] .ap-media{background:linear-gradient(145deg,#fff0f1,#fff)}
html[data-aromika-theme="dark"] .ap-media{background:linear-gradient(145deg,#2d2428,#211b1e)}
.ap-media img{display:block;max-width:92%;max-height:94%;object-fit:contain;filter:drop-shadow(0 13px 14px rgba(48,30,36,.12));transition:transform .35s ease}
.ap-card:hover .ap-media img{transform:scale(1.025)}
.ap-discount{position:absolute;top:11px;left:11px;padding:7px 9px;border-radius:10px;background:var(--ap-pink);color:white;font-size:12px;font-weight:800;letter-spacing:-.2px}
.ap-source{position:absolute;top:11px;right:11px;padding:7px 8px;border-radius:999px;background:rgba(255,255,255,.92);color:#261b1e;border:1px solid rgba(0,0,0,.06);font-size:9px;font-weight:800;letter-spacing:.25px}
.ap-card[data-source="kaspi"] .ap-source{color:#d72f42}
.ap-body{display:flex;flex-direction:column;flex:1;padding:14px 15px 16px}
.ap-brand{margin-bottom:6px;color:var(--ap-muted);font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.ap-name{min-height:55px;font-size:14px;line-height:1.32;font-weight:650;letter-spacing:-.25px}
.ap-price{display:flex;align-items:baseline;gap:8px;margin-top:14px;flex-wrap:wrap}
.ap-price strong{font-size:20px;line-height:1;font-weight:720;letter-spacing:-.7px}
.ap-price del{font-size:11px;color:var(--ap-muted)}
.ap-saving{margin-top:5px;color:var(--ap-green);font-size:10px;font-weight:700}
.ap-cta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px;font-size:11px;font-weight:700}
.ap-cta span:last-child{font-size:16px;transition:transform .2s}
.ap-card:hover .ap-cta span:last-child{transform:translate(3px,-3px)}

.ap-empty{display:none;grid-column:1/-1;border:1px dashed var(--ap-line);border-radius:22px;padding:48px 24px;text-align:center;background:var(--ap-card)}
.ap-empty.is-visible{display:block}
.ap-empty b{display:block;margin-bottom:8px;font-size:21px;font-weight:650;letter-spacing:-.5px}
.ap-empty p{max-width:550px;margin:0 auto;color:var(--ap-muted);font-size:13px;line-height:1.6}
.ap-skeleton{height:350px;border-radius:20px;background:linear-gradient(90deg,var(--ap-card),color-mix(in srgb,var(--ap-card) 75%,#bbb),var(--ap-card));background-size:220% 100%;animation:apSh 1.25s infinite}
.ap-demo-note{display:none;margin:0 0 18px;padding:12px 15px;border-radius:16px;background:#fff1c9;color:#715212;font-size:12px;font-weight:700}
.ap-demo-note.is-visible{display:block}

@keyframes apSh{to{background-position:-220% 0}}

/* Responsive density */
@media(max-width:1240px){
  .ap-wrap{width:min(calc(100% - 48px),1180px)}
  .ap-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ap-media{height:215px}
}
@media(max-width:980px){
  .ap-hero-grid{grid-template-columns:1fr}
  .ap-livebox{max-width:520px}
  .ap-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ap-media{height:230px}
}
@media(max-width:720px){
  .ap-wrap{width:min(100% - 28px,1180px)}
  .ap-hero{padding:50px 0 30px}
  .ap-kicker{margin-bottom:21px;font-size:9px}
  .ap-hero h1{font-size:43px;line-height:1.04;letter-spacing:-1.4px}
  .ap-hero h1 em{letter-spacing:-1px}
  .ap-lead{font-size:13px;line-height:1.65}
  .ap-toolbar{top:8px;align-items:stretch;flex-direction:column;padding:8px}
  .ap-tabs{display:grid;grid-template-columns:repeat(3,1fr)}
  .ap-tab{padding:10px 7px;font-size:11px}
  .ap-sort{border-left:0;border-top:1px solid var(--ap-line);text-align:center}
  .ap-statuses{grid-template-columns:1fr}
  .ap-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ap-media{height:190px;padding:14px}
  .ap-body{padding:12px 12px 14px}
  .ap-name{min-height:52px;font-size:13px}
  .ap-price strong{font-size:18px}
  .ap-main{padding-bottom:64px}
}
@media(max-width:430px){
  .ap-grid{grid-template-columns:1fr}
  .ap-media{height:280px}
  .ap-name{min-height:0;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.ap-card,.ap-media img{transition:none}.ap-skeleton{animation:none}}

/* keep header compact when the new “Акции” item is present */
#aromika-hero .ar-nav{gap:8px}
#aromika-hero .ar-nav a{padding-left:10px;padding-right:10px}
#aromika-hero .ar-shop{margin-left:16px}
@media(max-width:1180px) and (min-width:981px){
  #aromika-hero .ar-nav{gap:2px}
  #aromika-hero .ar-nav a{font-size:12px;padding-left:7px;padding-right:7px}
  #aromika-hero .ar-logo img{width:138px}
  #aromika-hero .ar-shop{padding:13px 14px;margin-left:8px}
}