/* Onitsha Promo Inserts - Modern marketplace blocks */
:root{
  --card: #ffffff;
  --border: #e9edf3;
  --shadow: 0 14px 34px rgba(0,0,0,.08);
  --text: #111827;
  --muted: #6b7280;
  --blue: #0b57d0;
  --green: #16a34a;
  --hot: #e11d48;
}
.onitsha-pi-wrap{ width:100%; display:block; margin: 26px 0; }
.onitsha-pi.pi-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
  overflow:hidden;
}
.pi-head{ display:flex; flex-direction:column; gap:6px; margin-bottom: 12px; }
.pi-title{ font-size: 20px; font-weight: 1000; color: var(--text); }
.pi-sub{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; color: var(--muted); font-weight: 800; font-size: 13px; }
.pi-kicker{ color: var(--blue); font-weight: 1000; }
.pi-dot{ opacity:.5; }
.pi-empty{ padding: 14px; border: 1px dashed #d6dde7; border-radius: 14px; color: var(--muted); font-weight: 800; background: #f8fafc; }

.pi-carousel{ position:relative; }
.pi-track{
  display:flex; gap: 14px; overflow-x:auto;
  scroll-snap-type: x mandatory; scroll-behavior:smooth;
  padding: 6px 44px;
}
.pi-track::-webkit-scrollbar{ height: 8px; }
.pi-track::-webkit-scrollbar-thumb{ background: #e5e7eb; border-radius: 999px; }

.pi-slide{ scroll-snap-align:start; flex: 0 0 auto; width: 320px; }
.pi-banner .pi-slide{ width: min(920px, calc(100vw - 120px)); }
.pi-banner img{ width:100%; object-fit:cover; display:block; border-radius: 16px; }

.pi-nav{
  position:absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  font-size: 22px; font-weight: 1000; cursor:pointer; z-index: 3;
}
.pi-nav.prev{ left: 8px; }
.pi-nav.next{ right: 8px; }

.pi-countdown{ background: linear-gradient(135deg, #fff7ed, #fff1f2); border-color: #ffd5dd; }
.pi-count-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.pi-timer{ display:flex; gap:10px; flex-wrap:wrap; }
.pi-box{ min-width: 76px; text-align:center; background:#fff; border:1px solid #ffe0e6; border-radius: 16px; padding: 12px 12px; }
.pi-box .n{ display:block; font-size: 24px; font-weight: 1000; color: var(--text); }
.pi-box .l{ display:block; font-size: 12px; font-weight: 1000; color: #9f1239; letter-spacing:.6px; }
.pi-btn{ display:inline-block; padding: 12px 16px; border-radius: 14px; background: var(--blue); color:#fff !important; text-decoration:none; font-weight: 1000; }
.pi-btn:hover{ background: var(--green); }

.pi-prod{ position: relative; border: 1px solid #eef2f7; border-radius: 16px; padding: 12px; background:#fff; height: 100%; transition: transform .16s ease, box-shadow .16s ease; }
.pi-prod:hover{ transform: translateY(-4px); box-shadow: 0 14px 22px rgba(0,0,0,.10); }
.pi-badge{ position:absolute; top:10px; left:10px; background: linear-gradient(90deg, var(--hot), #fb7185); color:#fff; font-weight: 1000; font-size: 12px; padding: 6px 10px; border-radius: 999px; }
.pi-prod-link{ display:block; text-decoration:none; }
.pi-prod-img{ background: #f8fafc; border-radius: 14px; padding: 10px; }
.pi-prod-img img{ width: 100%; object-fit: contain; display:block; }
.pi-prod-name{ margin-top: 10px; font-size: 14px; font-weight: 1000; line-height: 1.25; color: var(--text); min-height: 38px; }
.pi-prod-price{ margin-top: 8px; font-weight: 1000; color: var(--hot); }

@media (max-width: 820px){
  .pi-title{ font-size: 18px; }
  .pi-slide{ width: 280px; }
  .pi-banner .pi-slide{ width: calc(100vw - 110px); }
}
@media (max-width: 520px){
  .onitsha-pi.pi-card{ padding: 14px; }
  .pi-track{ padding: 6px 40px; }
  .pi-count-row{ justify-content:center; }
}


/* ===== Onitsha PI 1.2.0 - Modern marketplace look ===== */
:root{
  --opi-primary: #ff6a00;
  --opi-accent:  #007bff;
  --opi-bg:      #f4f6f8;
  --opi-card:    #ffffff;
  --opi-text:    #1f2937;
}
.onitsha-pi-wrap{ width:100%; }
.onitsha-pi{ background: var(--opi-card); color: var(--opi-text); }
.onitsha-pi.pi-card{
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(17,24,39,.08);
  overflow:hidden;
}
.onitsha-pi .pi-head{
  padding: 14px 16px 10px;
  background: linear-gradient(90deg, rgba(255,106,0,.10), rgba(0,123,255,.08));
}
.onitsha-pi .pi-title{ font-size: 18px; font-weight: 900; letter-spacing: .2px; }
.onitsha-pi .pi-sub{ margin-top:6px; font-size:13px; opacity:.9; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.onitsha-pi .pi-dot{ opacity:.45; }
.onitsha-pi .pi-kicker{ color: var(--opi-primary); font-weight:800; }
.onitsha-pi .pi-tag{ font-weight:700; }

.onitsha-pi .pi-carousel{ position:relative; padding: 12px 14px 16px; background: var(--opi-bg); }
.onitsha-pi .pi-track{ display:flex; gap:14px; overflow:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.onitsha-pi .pi-slide{ min-width: 280px; scroll-snap-align:start; }
@media (max-width:768px){ .onitsha-pi .pi-slide{ min-width: 78vw; } }
.onitsha-pi .pi-nav{
  position:absolute; top:52%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; border:0;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
  cursor:pointer; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.onitsha-pi .pi-nav.prev{ left:10px; } .onitsha-pi .pi-nav.next{ right:10px; }
@media (max-width:768px){ .onitsha-pi .pi-nav{ display:none; } }

.onitsha-pi .pi-banner-slide{ position:relative; border-radius:16px; overflow:hidden; }
.onitsha-pi .pi-banner-slide img{ width:100%; height:auto; display:block; object-fit:cover; }
.onitsha-pi .pi-banner-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45));
  display:flex; align-items:flex-end; justify-content:space-between;
  padding: 12px; gap:10px;
}
.onitsha-pi .pi-banner-badge{
  background: rgba(255,255,255,.92);
  color: var(--opi-primary);
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .4px;
}
.onitsha-pi .pi-banner-cta{
  background: var(--opi-primary);
  color:#fff;
  font-weight: 900;
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(255,106,0,.25);
}
.onitsha-pi .pi-banner-cta:hover{ filter:brightness(.95); }

.onitsha-pi.pi-countdown .pi-count-row{
  padding: 14px 16px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--opi-bg);
}
.onitsha-pi .pi-timer{ display:flex; gap:10px; flex-wrap:wrap; }
.onitsha-pi .pi-box{
  background:#fff; border:1px solid rgba(17,24,39,.10);
  border-radius:14px; width:70px; padding:10px 8px; text-align:center;
}
.onitsha-pi .pi-box .n{ font-size:18px; font-weight:900; display:block; }
.onitsha-pi .pi-box .l{ font-size:12px; opacity:.75; font-weight:800; }
.onitsha-pi .pi-btn{
  display:inline-block;
  background: var(--opi-accent);
  color:#fff; text-decoration:none; font-weight:900;
  padding: 12px 14px; border-radius:12px;
  box-shadow: 0 12px 22px rgba(0,123,255,.22);
}
.onitsha-pi .pi-btn:hover{ filter:brightness(.95); }

.onitsha-pi .pi-prod{
  background:#fff; border:1px solid rgba(17,24,39,.10);
  border-radius:16px; overflow:hidden; position:relative;
  transition: transform .12s ease, box-shadow .12s ease;
}
.onitsha-pi .pi-prod:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(17,24,39,.14); }
.onitsha-pi .pi-badge{
  position:absolute; top:10px; left:10px;
  background: var(--opi-primary); color:#fff;
  font-weight:900; font-size:12px;
  padding: 6px 10px; border-radius:999px;
}
.onitsha-pi .pi-prod-link{ display:block; color:inherit; text-decoration:none; }
.onitsha-pi .pi-prod-img img{ width:100%; object-fit:cover; display:block; }
.onitsha-pi .pi-prod-name{ padding:10px 12px 0; font-weight:800; font-size:13px; line-height:1.25; min-height:34px; }
.onitsha-pi .pi-prod-price{ padding:6px 12px 12px; font-weight:900; }

/* Fix theme grid spacing for injected LI/DIV */
.onitsha-pi-li{
  height:auto !important;
  min-height:unset !important;
  padding: 0 !important;
  margin: 10px 0 18px !important;
  clear: both !important;
}
.onitsha-pi-li:before, .onitsha-pi-li:after{ display:none !important; }
.onitsha-pi-li .onitsha-pi-wrap{ margin:0 !important; }
.onitsha-pi .pi-carousel{ min-height: auto; }
.onitsha-pi .pi-track{ align-items: stretch; }

/* Intro block */
.onitsha-pi.pi-intro .pi-intro-top{
  padding: 16px 16px 10px;
  background: radial-gradient(circle at 20% 10%, rgba(255,106,0,.18), transparent 45%),
              radial-gradient(circle at 80% 0%, rgba(0,123,255,.18), transparent 45%),
              linear-gradient(90deg, rgba(17,24,39,.04), rgba(17,24,39,.02));
}
.onitsha-pi.pi-intro .pi-intro-title{
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .3px;
}
.onitsha-pi.pi-intro .pi-intro-glow{
  margin-top: 10px;
  font-weight: 900;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(90deg, var(--opi-primary), var(--opi-accent));
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
}

/* Decorative text promo */
.onitsha-pi.pi-textpromo{
  background: linear-gradient(90deg, rgba(255,106,0,.14), rgba(0,123,255,.12));
  background-size: cover;
  background-position: center;
}
.onitsha-pi.pi-textpromo .pi-textpromo-inner{
  padding: 18px 16px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(6px);
}
.onitsha-pi.pi-textpromo .pi-textpromo-title{
  font-size: 18px;
  font-weight: 1000;
}
.onitsha-pi.pi-textpromo .pi-textpromo-text{
  margin-top: 8px;
  font-weight: 800;
  opacity: .95;
  line-height: 1.35;
}
.onitsha-pi.pi-textpromo .pi-btn{ margin-top: 12px; }

/* Smaller product cards */
.onitsha-pi .pi-slide{
  min-width: 210px !important;
}
.onitsha-pi .pi-prod-img img{
  height: 170px !important;
  object-fit: cover;
}

.onitsha-pi-li{
  margin: 6px 0 10px !important;
}
.onitsha-pi .pi-card{
  padding-bottom: 4px !important;
}

.onitsha-pi .pi-head::before{
  content:'AP';
  display:inline-block;
  font-weight:900;
  background:#111;
  color:#fff;
  padding:4px 8px;
  border-radius:6px;
  margin-right:8px;
  font-size:12px;
}

/* ===== ULTRA COMPACT sizing (v2.0.0) ===== */
.onitsha-pi .pi-slide{ min-width: 190px !important; }
@media (max-width:768px){ .onitsha-pi .pi-slide{ min-width: 72vw !important; } }
.onitsha-pi .pi-prod-img img{ height: 155px !important; object-fit: cover; }
.onitsha-pi .pi-prod-name{ font-size: 12.5px !important; }
.onitsha-pi .pi-prod-price{ font-size: 13px !important; }

/* ===== Ultra Blocks styles ===== */
.onitsha-pi.pi-minibanners .pi-mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:12px 14px 16px;background:var(--opi-bg);}
.onitsha-pi.pi-minibanners .pi-mini{position:relative;border-radius:16px;overflow:hidden;display:block;box-shadow:0 12px 24px rgba(0,0,0,.10);}
.onitsha-pi.pi-minibanners .pi-mini img{width:100%;height:160px;object-fit:cover;display:block;}
.onitsha-pi.pi-minibanners .pi-mini-badge{position:absolute;top:10px;left:10px;background:var(--opi-primary);color:#fff;font-weight:900;padding:6px 10px;border-radius:999px;font-size:12px;}

.onitsha-pi.pi-categories .pi-cat-row{display:flex;gap:10px;overflow:auto;padding:12px 14px 16px;background:var(--opi-bg);-webkit-overflow-scrolling:touch;}
.onitsha-pi.pi-categories .pi-cat{min-width:140px;background:#fff;border:1px solid rgba(17,24,39,.10);border-radius:16px;padding:12px;text-decoration:none;color:inherit;display:flex;align-items:center;gap:10px;}
.onitsha-pi.pi-categories .pi-cat-ico{font-size:20px;}
.onitsha-pi.pi-categories .pi-cat-txt{font-weight:900;font-size:13px;}

.onitsha-pi.pi-brands .pi-brand-track{display:flex;gap:14px;overflow:auto;padding:12px 14px 16px;background:var(--opi-bg);-webkit-overflow-scrolling:touch;}
.onitsha-pi.pi-brands .pi-brand{min-width:140px;background:#fff;border:1px solid rgba(17,24,39,.10);border-radius:16px;padding:12px;display:flex;align-items:center;justify-content:center;}
.onitsha-pi.pi-brands .pi-brand img{max-height:34px;width:auto;display:block;opacity:.95;}

.onitsha-pi.pi-features .pi-feature-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px;background:var(--opi-bg);}
@media (max-width:780px){.onitsha-pi.pi-features .pi-feature-row{grid-template-columns:repeat(2,1fr);}}
.onitsha-pi.pi-features .pi-feature{background:#fff;border:1px solid rgba(17,24,39,.10);border-radius:16px;padding:12px;display:flex;align-items:center;gap:10px;}
.onitsha-pi.pi-features .pi-feature-ico{font-size:18px;}
.onitsha-pi.pi-features .pi-feature-txt{font-weight:900;font-size:13px;}

.onitsha-pi.pi-testimonials .pi-quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 14px 16px;background:var(--opi-bg);}
@media (max-width:900px){.onitsha-pi.pi-testimonials .pi-quote-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.onitsha-pi.pi-testimonials .pi-quote-grid{grid-template-columns:1fr;}}
.onitsha-pi.pi-testimonials .pi-quote{background:#fff;border:1px solid rgba(17,24,39,.10);border-radius:16px;padding:12px;}
.onitsha-pi.pi-testimonials .pi-quote-text{font-weight:800;font-size:13px;line-height:1.35;}
.onitsha-pi.pi-testimonials .pi-quote-name{margin-top:8px;font-weight:900;opacity:.8;font-size:12px;}

.onitsha-pi.pi-newsletter{background:linear-gradient(90deg, rgba(255,106,0,.16), rgba(0,123,255,.14));}
.onitsha-pi.pi-newsletter .pi-news-inner{padding:18px 16px;background:rgba(255,255,255,.80);backdrop-filter:blur(6px);}
.onitsha-pi.pi-newsletter .pi-news-title{font-weight:1000;font-size:18px;}
.onitsha-pi.pi-newsletter .pi-news-text{margin-top:8px;font-weight:800;opacity:.95;}

.onitsha-pi.pi-promogrid .pi-promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 14px 16px;background:var(--opi-bg);}
@media (max-width:780px){.onitsha-pi.pi-promogrid .pi-promo-grid{grid-template-columns:1fr;}}
.onitsha-pi.pi-promogrid .pi-promo{border-radius:16px;overflow:hidden;display:block;box-shadow:0 12px 24px rgba(0,0,0,.10);}
.onitsha-pi.pi-promogrid .pi-promo img{width:100%;height:170px;object-fit:cover;display:block;}

.onitsha-pi.pi-flash .pi-flash-inner{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(90deg, rgba(17,24,39,.05), rgba(17,24,39,.02));}
.onitsha-pi.pi-flash .pi-flash-badge{background:var(--opi-primary);color:#fff;font-weight:1000;padding:8px 10px;border-radius:12px;}
.onitsha-pi.pi-flash .pi-flash-text{font-weight:900;}
.onitsha-pi.pi-flash .pi-flash-btn{background:var(--opi-accent);color:#fff;text-decoration:none;font-weight:1000;padding:10px 12px;border-radius:12px;}

/* ===== Martfury / marketplace stability fixes (v2.1.1) ===== */
.onitsha-pi-li,
.products .onitsha-pi-li,
ul.products .onitsha-pi-li{
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  display:block !important;
}
.products .onitsha-pi-li .product-inner,
.products .onitsha-pi-li .mf-product-thumbnail,
.products .onitsha-pi-li .mf-product-content{
  display:none !important;
}
.onitsha-pi.pi-card{
  margin: 0 !important;
}
.onitsha-pi.pi-minibanners .pi-mini,
.onitsha-pi.pi-promogrid .pi-promo,
.onitsha-pi.pi-brands .pi-brand{
  text-decoration:none;
  color:inherit;
}
.onitsha-pi.pi-minibanners .pi-mini-placeholder,
.onitsha-pi.pi-promogrid .pi-promo-placeholder,
.onitsha-pi.pi-brands .pi-brand-placeholder{
  min-height: 120px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background: linear-gradient(135deg, rgba(255,106,0,.14), rgba(0,123,255,.12));
  color: var(--opi-text);
  font-weight: 900;
  letter-spacing: .2px;
}
.onitsha-pi.pi-promogrid .pi-promo-placeholder{ min-height:170px; }
.onitsha-pi.pi-flash .pi-flash-inner{
  flex-wrap:wrap;
}
.onitsha-pi.pi-flash .pi-flash-btn,
.onitsha-pi .pi-btn,
.onitsha-pi .pi-banner-cta{
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.onitsha-pi.pi-flash .pi-flash-btn:hover,
.onitsha-pi .pi-btn:hover,
.onitsha-pi .pi-banner-cta:hover{
  transform: translateY(-1px);
}

/* v3.1 fixes */
.onitsha-pi-li{display:block !important;width:100% !important;max-width:100% !important;flex:0 0 100% !important;}
.onitsha-pi-li .onitsha-pi-wrap{display:block !important;width:100% !important;}
.onitsha-pi.pi-revolution .pi-revo-inner{padding:14px;background:var(--opi-bg);}
.onitsha-pi.pi-revolution .pi-revo-inner .rev_slider_wrapper,
.onitsha-pi.pi-revolution .pi-revo-inner .rs-module-wrap{max-width:100% !important;}
.onitsha-pi.pi-card{position:relative;}
.onitsha-pi.pi-card:after{content:'';position:absolute;inset:0;border-radius:18px;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
.onitsha-pi .pi-head{position:relative;overflow:hidden;}
.onitsha-pi .pi-head:before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:radial-gradient(circle, rgba(255,106,0,.16), transparent 65%);pointer-events:none;}


/* =========================================================
   v3.1.1 — MOBILE LAYOUT / 3-PRODUCT GRID
   Optimized for phones without changing desktop layout.
   ========================================================= */
@media (max-width: 767px){

  /* Keep every inserted block inside the product area */
  .onitsha-pi-li{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    margin:8px 0 12px !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }
  .onitsha-pi-li .onitsha-pi-wrap{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }
  .onitsha-pi.pi-card{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:14px !important;
    box-sizing:border-box !important;
  }

  /* Compact, readable block headers */
  .onitsha-pi .pi-head{
    padding:11px 12px 9px !important;
  }
  .onitsha-pi .pi-title,
  .onitsha-pi.pi-intro .pi-intro-title,
  .onitsha-pi.pi-textpromo .pi-textpromo-title,
  .onitsha-pi.pi-newsletter .pi-news-title{
    font-size:16px !important;
    line-height:1.2 !important;
  }
  .onitsha-pi .pi-sub{
    font-size:11px !important;
    gap:5px !important;
  }

  /* PRODUCTS: exactly 3 cards visible on a phone */
  .onitsha-pi.pi-products .pi-carousel{
    padding:8px 6px 10px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  .onitsha-pi.pi-products .pi-track{
    width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    padding:2px 0 5px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }
  .onitsha-pi.pi-products .pi-track::-webkit-scrollbar{
    display:none !important;
  }
  .onitsha-pi.pi-products .pi-slide{
    flex:0 0 calc((100% - 12px) / 3) !important;
    width:calc((100% - 12px) / 3) !important;
    min-width:calc((100% - 12px) / 3) !important;
    max-width:calc((100% - 12px) / 3) !important;
    scroll-snap-align:start !important;
    box-sizing:border-box !important;
  }
  .onitsha-pi.pi-products .pi-prod{
    width:100% !important;
    min-width:0 !important;
    height:100% !important;
    padding:0 !important;
    border-radius:10px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  .onitsha-pi.pi-products .pi-prod-img{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:5px !important;
    border-radius:9px !important;
    background:#f8fafc !important;
    box-sizing:border-box !important;
  }
  .onitsha-pi.pi-products .pi-prod-img img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    object-fit:contain !important;
    display:block !important;
  }
  .onitsha-pi.pi-products .pi-prod-name{
    padding:6px 6px 0 !important;
    margin:0 !important;
    min-height:32px !important;
    max-height:32px !important;
    overflow:hidden !important;
    font-size:10.5px !important;
    line-height:1.25 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
  }
  .onitsha-pi.pi-products .pi-prod-price{
    padding:4px 6px 7px !important;
    margin:0 !important;
    min-height:25px !important;
    font-size:10.5px !important;
    line-height:1.15 !important;
    overflow:hidden !important;
  }
  .onitsha-pi.pi-products .pi-badge{
    top:5px !important;
    left:5px !important;
    padding:3px 5px !important;
    font-size:8px !important;
    line-height:1 !important;
    z-index:2 !important;
  }
  .onitsha-pi.pi-products .pi-nav{
    display:none !important;
  }

  /* Intro products: also show 3 at once */
  .onitsha-pi.pi-intro .pi-carousel{
    padding:8px 6px 10px !important;
  }
  .onitsha-pi.pi-intro .pi-track{
    gap:6px !important;
    padding:2px 0 5px !important;
    scrollbar-width:none !important;
  }
  .onitsha-pi.pi-intro .pi-track::-webkit-scrollbar{display:none !important;}
  .onitsha-pi.pi-intro .pi-slide{
    flex:0 0 calc((100% - 12px) / 3) !important;
    width:calc((100% - 12px) / 3) !important;
    min-width:calc((100% - 12px) / 3) !important;
    max-width:calc((100% - 12px) / 3) !important;
  }
  .onitsha-pi.pi-intro .pi-nav{display:none !important;}
  .onitsha-pi.pi-intro .pi-intro-top{
    padding:11px 12px 8px !important;
  }
  .onitsha-pi.pi-intro .pi-intro-glow{
    margin-top:7px !important;
    padding:7px 9px !important;
    border-radius:10px !important;
    font-size:11px !important;
  }

  /* Banners: one clean full-width slide */
  .onitsha-pi.pi-banner .pi-carousel{
    padding:7px 6px 9px !important;
  }
  .onitsha-pi.pi-banner .pi-track{
    gap:6px !important;
    padding:0 !important;
    scrollbar-width:none !important;
  }
  .onitsha-pi.pi-banner .pi-track::-webkit-scrollbar{display:none !important;}
  .onitsha-pi.pi-banner .pi-slide{
    flex:0 0 100% !important;
    width:100% !important;
    min-width:100% !important;
  }
  .onitsha-pi.pi-banner .pi-banner-slide{
    border-radius:10px !important;
    overflow:hidden !important;
  }
  .onitsha-pi.pi-banner .pi-banner-slide img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 7 !important;
    object-fit:cover !important;
  }
  .onitsha-pi.pi-banner .pi-banner-overlay{
    padding:7px !important;
  }
  .onitsha-pi.pi-banner .pi-banner-badge{
    padding:4px 7px !important;
    font-size:9px !important;
  }
  .onitsha-pi.pi-banner .pi-banner-cta{
    padding:6px 8px !important;
    border-radius:8px !important;
    font-size:10px !important;
  }
  .onitsha-pi.pi-banner .pi-nav{display:none !important;}

  /* Countdown: 4 boxes fit on one row */
  .onitsha-pi.pi-countdown .pi-count-row{
    padding:9px 8px 11px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:9px !important;
  }
  .onitsha-pi.pi-countdown .pi-timer{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:5px !important;
  }
  .onitsha-pi.pi-countdown .pi-box{
    width:auto !important;
    min-width:0 !important;
    padding:6px 3px !important;
    border-radius:9px !important;
  }
  .onitsha-pi.pi-countdown .pi-box .n{font-size:15px !important;}
  .onitsha-pi.pi-countdown .pi-box .l{font-size:9px !important;}
  .onitsha-pi.pi-countdown .pi-cta,
  .onitsha-pi.pi-countdown .pi-btn{
    width:100% !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }
  .onitsha-pi.pi-countdown .pi-btn{
    padding:8px 10px !important;
    border-radius:9px !important;
    font-size:11px !important;
  }

  /* Text / newsletter blocks */
  .onitsha-pi.pi-textpromo .pi-textpromo-inner,
  .onitsha-pi.pi-newsletter .pi-news-inner{
    padding:12px !important;
  }
  .onitsha-pi.pi-textpromo .pi-textpromo-text,
  .onitsha-pi.pi-newsletter .pi-news-text{
    margin-top:6px !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }
  .onitsha-pi.pi-textpromo .pi-btn,
  .onitsha-pi.pi-newsletter .pi-btn{
    margin-top:8px !important;
    padding:8px 10px !important;
    border-radius:9px !important;
    font-size:11px !important;
  }

  /* Mini banners: two equal columns, no overflow */
  .onitsha-pi.pi-minibanners .pi-mini-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:7px 6px 9px !important;
  }
  .onitsha-pi.pi-minibanners .pi-mini{
    min-width:0 !important;
    border-radius:10px !important;
  }
  .onitsha-pi.pi-minibanners .pi-mini img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 10 !important;
    object-fit:cover !important;
  }
  .onitsha-pi.pi-minibanners .pi-mini-badge{
    top:5px !important;
    left:5px !important;
    padding:3px 5px !important;
    font-size:8px !important;
  }

  /* Categories / brands: compact horizontal rows */
  .onitsha-pi.pi-categories .pi-cat-row,
  .onitsha-pi.pi-brands .pi-brand-track{
    gap:6px !important;
    padding:7px 6px 9px !important;
    scrollbar-width:none !important;
  }
  .onitsha-pi.pi-categories .pi-cat-row::-webkit-scrollbar,
  .onitsha-pi.pi-brands .pi-brand-track::-webkit-scrollbar{display:none !important;}
  .onitsha-pi.pi-categories .pi-cat{
    min-width:112px !important;
    padding:8px !important;
    border-radius:10px !important;
    gap:6px !important;
  }
  .onitsha-pi.pi-categories .pi-cat-ico{font-size:16px !important;}
  .onitsha-pi.pi-categories .pi-cat-txt{font-size:10px !important;}
  .onitsha-pi.pi-brands .pi-brand{
    min-width:105px !important;
    padding:8px !important;
    border-radius:10px !important;
  }
  .onitsha-pi.pi-brands .pi-brand img{max-height:26px !important;}

  /* Features: two neat columns */
  .onitsha-pi.pi-features .pi-feature-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:7px 6px 9px !important;
  }
  .onitsha-pi.pi-features .pi-feature{
    min-width:0 !important;
    padding:8px !important;
    border-radius:10px !important;
    gap:6px !important;
  }
  .onitsha-pi.pi-features .pi-feature-ico{font-size:15px !important;}
  .onitsha-pi.pi-features .pi-feature-txt{font-size:10px !important;}

  /* Testimonials: one card per row */
  .onitsha-pi.pi-testimonials .pi-quote-grid{
    grid-template-columns:1fr !important;
    gap:6px !important;
    padding:7px 6px 9px !important;
  }
  .onitsha-pi.pi-testimonials .pi-quote{
    padding:9px !important;
    border-radius:10px !important;
  }
  .onitsha-pi.pi-testimonials .pi-quote-text{font-size:11px !important;}
  .onitsha-pi.pi-testimonials .pi-quote-name{font-size:10px !important;}

  /* Promo grid: two columns so all 3 offers remain compact */
  .onitsha-pi.pi-promogrid .pi-promo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:7px 6px 9px !important;
  }
  .onitsha-pi.pi-promogrid .pi-promo{
    min-width:0 !important;
    border-radius:10px !important;
  }
  .onitsha-pi.pi-promogrid .pi-promo img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 10 !important;
    object-fit:cover !important;
  }
  .onitsha-pi.pi-promogrid .pi-promo-placeholder{
    min-height:100px !important;
  }

  /* Flash bar */
  .onitsha-pi.pi-flash .pi-flash-inner{
    padding:9px !important;
    gap:6px !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
  }
  .onitsha-pi.pi-flash .pi-flash-badge{
    padding:5px 6px !important;
    border-radius:8px !important;
    font-size:9px !important;
  }
  .onitsha-pi.pi-flash .pi-flash-text{
    min-width:0 !important;
    font-size:10px !important;
    line-height:1.25 !important;
  }
  .onitsha-pi.pi-flash .pi-flash-btn{
    padding:6px 7px !important;
    border-radius:8px !important;
    font-size:9px !important;
  }

  /* Revolution slider */
  .onitsha-pi.pi-revolution .pi-revo-inner{
    padding:6px !important;
    overflow:hidden !important;
  }

}

/* Very narrow phones */
@media (max-width:360px){
  .onitsha-pi.pi-products .pi-prod-name,
  .onitsha-pi.pi-products .pi-prod-price{font-size:9.5px !important;}
  .onitsha-pi .pi-title{font-size:15px !important;}
}

/* =========================================================
   v3.2.0 — MOBILE PREMIUM SELECTION / ONE-PRODUCT STEP
   Keeps 3 products visible, removes empty card height and
   makes autoplay advance exactly one product at a time.
   ========================================================= */
@media (max-width: 767px){
  /* Do not let flex stretching create a large empty area under products. */
  .onitsha-pi.pi-products .pi-track,
  .onitsha-pi.pi-intro .pi-track{
    align-items:flex-start !important;
    height:auto !important;
    min-height:0 !important;
  }
  .onitsha-pi.pi-products .pi-slide,
  .onitsha-pi.pi-intro .pi-slide{
    height:auto !important;
    align-self:flex-start !important;
  }
  .onitsha-pi.pi-products .pi-prod,
  .onitsha-pi.pi-intro .pi-prod{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:column !important;
  }

  /* Premium Selection: compact image area with consistent proportions. */
  .onitsha-pi.pi-intro .pi-prod-img,
  .onitsha-pi.pi-products .pi-prod-img{
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }
  .onitsha-pi.pi-intro .pi-prod-img img,
  .onitsha-pi.pi-products .pi-prod-img img{
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:contain !important;
  }

  /* Keep product text compact so the three cards stay balanced. */
  .onitsha-pi.pi-intro .pi-prod-name,
  .onitsha-pi.pi-products .pi-prod-name{
    min-height:2.5em !important;
    max-height:2.5em !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    line-height:1.25 !important;
  }
  .onitsha-pi.pi-intro .pi-prod-price,
  .onitsha-pi.pi-products .pi-prod-price{
    min-height:0 !important;
    max-height:none !important;
    padding-bottom:8px !important;
  }

  /* Remove visual bottom space caused by the injected block/card wrappers. */
  .onitsha-pi.pi-intro,
  .onitsha-pi.pi-products{
    padding-bottom:0 !important;
  }
  .onitsha-pi.pi-intro .pi-carousel,
  .onitsha-pi.pi-products .pi-carousel{
    padding-bottom:6px !important;
  }
  .onitsha-pi.pi-intro .pi-track,
  .onitsha-pi.pi-products .pi-track{
    padding-bottom:0 !important;
  }

  /* One-product movement: scrolling is handled by JS using one slide width. */
  .onitsha-pi.pi-intro .pi-track,
  .onitsha-pi.pi-products .pi-track{
    scroll-snap-stop:always !important;
  }
}

/* =========================================================
   v3.2.1 — MOBILE PRODUCT CARDS / ZERO EMPTY SPACE
   Same image box for Premium + Recommended products.
   Compact cards with natural height and one-product scrolling.
   ========================================================= */
@media (max-width: 767px){
  /* Never allow the theme/injected wrapper to reserve a large blank area. */
  .onitsha-pi-wrap,
  .onitsha-pi.pi-card,
  .onitsha-pi.pi-products,
  .onitsha-pi.pi-intro,
  .onitsha-pi.pi-products .pi-carousel,
  .onitsha-pi.pi-intro .pi-carousel{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  .onitsha-pi-wrap{ margin:6px 0 !important; }
  .onitsha-pi-li{ margin:4px 0 8px !important; }

  /* Exactly the same product image frame in both blocks. */
  .onitsha-pi.pi-products .pi-prod-img,
  .onitsha-pi.pi-intro .pi-prod-img{
    width:100% !important;
    height:150px !important;
    min-height:150px !important;
    max-height:150px !important;
    aspect-ratio:auto !important;
    padding:5px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#f8fafc !important;
    border-radius:10px !important;
    box-sizing:border-box !important;
  }

  .onitsha-pi.pi-products .pi-prod-img img,
  .onitsha-pi.pi-intro .pi-prod-img img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    display:block !important;
    margin:0 !important;
  }

  /* Natural card height: no artificial empty area below the price. */
  .onitsha-pi.pi-products .pi-prod,
  .onitsha-pi.pi-intro .pi-prod{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:5px !important;
    box-sizing:border-box !important;
    align-self:flex-start !important;
  }

  .onitsha-pi.pi-products .pi-prod-name,
  .onitsha-pi.pi-intro .pi-prod-name{
    margin:6px 0 0 !important;
    padding:0 2px !important;
    min-height:0 !important;
    max-height:2.5em !important;
    font-size:11px !important;
    line-height:1.25 !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
  }

  .onitsha-pi.pi-products .pi-prod-price,
  .onitsha-pi.pi-intro .pi-prod-price{
    margin:5px 0 0 !important;
    padding:0 2px 5px !important;
    min-height:0 !important;
    max-height:none !important;
    font-size:11px !important;
    line-height:1.2 !important;
    overflow:hidden !important;
  }

  .onitsha-pi.pi-products .pi-track,
  .onitsha-pi.pi-intro .pi-track{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    align-items:flex-start !important;
    padding:2px 0 0 !important;
    gap:6px !important;
    scroll-snap-type:x mandatory !important;
    scroll-snap-stop:always !important;
  }

  .onitsha-pi.pi-products .pi-slide,
  .onitsha-pi.pi-intro .pi-slide{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    align-self:flex-start !important;
    flex:0 0 calc((100% - 12px) / 3) !important;
    width:calc((100% - 12px) / 3) !important;
    min-width:calc((100% - 12px) / 3) !important;
    max-width:calc((100% - 12px) / 3) !important;
    box-sizing:border-box !important;
  }

  /* Tight bottom edge: only the real product content remains. */
  .onitsha-pi.pi-products .pi-carousel,
  .onitsha-pi.pi-intro .pi-carousel{
    padding:7px 6px 4px !important;
    margin:0 !important;
  }
  .onitsha-pi.pi-products,
  .onitsha-pi.pi-intro{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }
}

@media (max-width:360px){
  .onitsha-pi.pi-products .pi-prod-img,
  .onitsha-pi.pi-intro .pi-prod-img{
    height:128px !important;
    min-height:128px !important;
    max-height:128px !important;
  }
  .onitsha-pi.pi-products .pi-prod-name,
  .onitsha-pi.pi-intro .pi-prod-name,
  .onitsha-pi.pi-products .pi-prod-price,
  .onitsha-pi.pi-intro .pi-prod-price{
    font-size:10px !important;
  }
}


/* =========================================================
   3.2.1 CORRECTED — recommended products at the top +
   hard reset of theme height/stretching on mobile.
   ========================================================= */
@media (max-width: 767px){
  /* The injected LI is a WooCommerce product item, so reset theme grid sizing. */
  ul.products > li.onitsha-pi-li,
  .products > li.onitsha-pi-li,
  .mf-products > .onitsha-pi-li,
  .onitsha-pi-li.onitsha-pi-recommended-top,
  .onitsha-pi-li.onitsha-pi-slot-products{
    display:block !important;
    float:none !important;
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    flex:none !important;
    flex-basis:auto !important;
    grid-row:auto !important;
    align-self:flex-start !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  .onitsha-pi-li .onitsha-pi-wrap,
  .onitsha-pi-li .onitsha-pi,
  .onitsha-pi-li .pi-card,
  .onitsha-pi-li .pi-products,
  .onitsha-pi-li .pi-carousel,
  .onitsha-pi-li .pi-track,
  .onitsha-pi-li .pi-slide,
  .onitsha-pi-li .pi-prod,
  .onitsha-pi-li .pi-prod-link{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    box-sizing:border-box !important;
  }

  .onitsha-pi-li .onitsha-pi-wrap{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Compact section: no reserved vertical area after the cards. */
  .onitsha-pi.pi-products{
    margin:0 !important;
    padding:0 0 4px !important;
    overflow:hidden !important;
  }
  .onitsha-pi.pi-products .pi-head{
    margin:0 !important;
    padding:14px 16px 10px !important;
  }
  .onitsha-pi.pi-products .pi-carousel{
    margin:0 !important;
    padding:8px 8px 4px !important;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
  }
  .onitsha-pi.pi-products .pi-track{
    display:flex !important;
    align-items:flex-start !important;
    gap:6px !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 0 2px !important;
    margin:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .onitsha-pi.pi-products .pi-slide{
    flex:0 0 calc((100% - 12px)/3) !important;
    width:calc((100% - 12px)/3) !important;
    min-width:calc((100% - 12px)/3) !important;
    max-width:calc((100% - 12px)/3) !important;
    margin:0 !important;
    padding:0 !important;
    align-self:flex-start !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
  }
  .onitsha-pi.pi-products .pi-prod{
    display:block !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    border-radius:12px !important;
    overflow:hidden !important;
  }
  .onitsha-pi.pi-products .pi-prod-link{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }
  .onitsha-pi.pi-products .pi-prod-img{
    display:flex !important;
    width:100% !important;
    height:145px !important;
    min-height:145px !important;
    max-height:145px !important;
    margin:0 !important;
    padding:4px !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#f8fafc !important;
    box-sizing:border-box !important;
  }
  .onitsha-pi.pi-products .pi-prod-img img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:0 !important;
  }
  .onitsha-pi.pi-products .pi-prod-name{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    height:auto !important;
    min-height:0 !important;
    max-height:2.6em !important;
    margin:7px 5px 0 !important;
    padding:0 !important;
    font-size:11px !important;
    line-height:1.3 !important;
  }
  .onitsha-pi.pi-products .pi-prod-price{
    height:auto !important;
    min-height:0 !important;
    max-height:2.8em !important;
    margin:5px 5px 7px !important;
    padding:0 !important;
    font-size:10.5px !important;
    line-height:1.2 !important;
    overflow:hidden !important;
  }
  .onitsha-pi.pi-products .pi-badge{
    top:7px !important;
    left:7px !important;
    padding:4px 7px !important;
    font-size:9px !important;
    z-index:2 !important;
  }

  /* No Premium Selection block at all. */
  .onitsha-pi.pi-intro,
  .onitsha-pi-li.onitsha-pi-intro-slot{display:none !important;}
}

@media (max-width:360px){
  .onitsha-pi.pi-products .pi-prod-img{
    height:125px !important;
    min-height:125px !important;
    max-height:125px !important;
  }
  .onitsha-pi.pi-products .pi-prod-name{font-size:10px !important;}
  .onitsha-pi.pi-products .pi-prod-price{font-size:9.5px !important;}
}

/* v3.2.2 additions */
.onitsha-pi-dynamic-after-second { width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
.onitsha-pi .pi-dynamic-images { overflow:hidden; }
.onitsha-pi .pi-dynamic-track { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 2px 2px; }
.onitsha-pi .pi-dynamic-track::-webkit-scrollbar { display:none; }
.onitsha-pi .pi-dynamic-item { flex:0 0 78%; scroll-snap-align:start; border-radius:12px; overflow:hidden; background:#fff; }
.onitsha-pi .pi-dynamic-item img { display:block; width:100%; height:auto; aspect-ratio:16/7; object-fit:cover; }
.onitsha-pi-onitsha-promo-top { margin-bottom:0 !important; }
@media (min-width: 768px){ .onitsha-pi .pi-dynamic-item { flex-basis:32%; } }

/* =========================================================
   v3.2.2 FINAL — professional responsive/mobile normalization
   ========================================================= */
.onitsha-pi-first-top,
.onitsha-pi-onitsha-promo-top{
  width:100% !important;
  max-width:100% !important;
  display:block !important;
  clear:both !important;
  box-sizing:border-box !important;
  margin:0 0 10px !important;
}
.onitsha-pi-first-top .onitsha-pi-wrap,
.onitsha-pi-onitsha-promo-top .onitsha-pi-wrap{ margin:0 !important; }

/* Never crop logos, promo images or product images. */
.onitsha-pi .pi-brand img,
.onitsha-pi .pi-mini img,
.onitsha-pi .pi-promo img,
.onitsha-pi .pi-dynamic-item img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
}
.onitsha-pi .pi-brand{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:92px !important;
  width:92px !important;
  height:72px !important;
  padding:8px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.onitsha-pi .pi-brand img{ max-width:100% !important; max-height:100% !important; }
.onitsha-pi .pi-dynamic-item{ background:#fff; }
.onitsha-pi .pi-dynamic-item img{ aspect-ratio:16/7 !important; height:auto !important; object-fit:contain !important; }

@media (max-width:767px){
  .onitsha-pi-first-top,
  .onitsha-pi-onitsha-promo-top{ margin:0 0 6px !important; }
  .onitsha-pi-first-top .onitsha-pi,
  .onitsha-pi-onitsha-promo-top .onitsha-pi{ margin:0 !important; }

  /* FIRST and Onitsha Promo use exactly the same 3-card mobile layout. */
  .onitsha-pi-first-top .pi-products .pi-track,
  .onitsha-pi-onitsha-promo-top .pi-products .pi-track,
  .onitsha-pi-onitsha-promo-top .pi-onitsha-promo .pi-track{
    display:flex !important;
    gap:6px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    padding:0 !important;
    margin:0 !important;
    align-items:flex-start !important;
  }
  .onitsha-pi-first-top .pi-products .pi-slide,
  .onitsha-pi-onitsha-promo-top .pi-products .pi-slide,
  .onitsha-pi-onitsha-promo-top .pi-onitsha-promo .pi-slide{
    flex:0 0 calc((100% - 12px)/3) !important;
    width:calc((100% - 12px)/3) !important;
    min-width:calc((100% - 12px)/3) !important;
    max-width:calc((100% - 12px)/3) !important;
    margin:0 !important;
    padding:0 !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
  }
  .onitsha-pi-first-top .pi-products .pi-prod,
  .onitsha-pi-onitsha-promo-top .pi-products .pi-prod,
  .onitsha-pi-onitsha-promo-top .pi-onitsha-promo .pi-prod{
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  .onitsha-pi-first-top .pi-products .pi-prod-img,
  .onitsha-pi-onitsha-promo-top .pi-products .pi-prod-img,
  .onitsha-pi-onitsha-promo-top .pi-onitsha-promo .pi-prod-img{
    height:145px !important;
    min-height:145px !important;
    max-height:145px !important;
    padding:4px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  .onitsha-pi-first-top .pi-products .pi-prod-img img,
  .onitsha-pi-onitsha-promo-top .pi-products .pi-prod-img img,
  .onitsha-pi-onitsha-promo-top .pi-onitsha-promo .pi-prod-img img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
  }
  .onitsha-pi-first-top .pi-products .pi-prod-name,
  .onitsha-pi-onitsha-promo-top .pi-products .pi-prod-name,
  .onitsha-pi-onitsha-promo-top .pi-onitsha-promo .pi-prod-name{
    min-height:0 !important;
    max-height:2.6em !important;
    margin:7px 5px 0 !important;
    padding:0 !important;
    font-size:11px !important;
    line-height:1.3 !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
  }
  .onitsha-pi-first-top .pi-products .pi-prod-price,
  .onitsha-pi-onitsha-promo-top .pi-products .pi-prod-price,
  .onitsha-pi-onitsha-promo-top .pi-onitsha-promo .pi-prod-price{
    min-height:0 !important;
    margin:5px 5px 7px !important;
    padding:0 !important;
    font-size:10.5px !important;
    line-height:1.2 !important;
  }
  .onitsha-pi-first-top .pi-products .pi-carousel,
  .onitsha-pi-onitsha-promo-top .pi-products .pi-carousel,
  .onitsha-pi-onitsha-promo-top .pi-onitsha-promo .pi-carousel{
    padding:7px 6px 4px !important;
    margin:0 !important;
    min-height:0 !important;
    height:auto !important;
  }

  .onitsha-pi .pi-brand{
    min-width:76px !important;
    width:76px !important;
    height:58px !important;
    padding:6px !important;
  }
  .onitsha-pi .pi-brand-track{ gap:8px !important; overflow-x:auto !important; }
  .onitsha-pi .pi-dynamic-item{ flex:0 0 86% !important; }
  .onitsha-pi .pi-dynamic-item img{ width:100% !important; height:auto !important; aspect-ratio:16/7 !important; object-fit:contain !important; }
  .onitsha-pi .pi-mini-grid,
  .onitsha-pi .pi-promo-grid{ grid-template-columns:1fr 1fr !important; gap:8px !important; }
  .onitsha-pi .pi-mini,
  .onitsha-pi .pi-promo{ min-height:90px !important; }
}
@media (max-width:360px){
  .onitsha-pi-first-top .pi-products .pi-prod-img,
  .onitsha-pi-onitsha-promo-top .pi-products .pi-prod-img,
  .onitsha-pi-onitsha-promo-top .pi-onitsha-promo .pi-prod-img{ height:125px !important; min-height:125px !important; max-height:125px !important; }
  .onitsha-pi-first-top .pi-products .pi-prod-name,
  .onitsha-pi-onitsha-promo-top .pi-products .pi-prod-name,
  .onitsha-pi-onitsha-promo-top .pi-onitsha-promo .pi-prod-name{ font-size:10px !important; }
  .onitsha-pi-first-top .pi-products .pi-prod-price,
  .onitsha-pi-onitsha-promo-top .pi-products .pi-prod-price,
  .onitsha-pi-onitsha-promo-top .pi-onitsha-promo .pi-prod-price{ font-size:9.5px !important; }
}

/* v3.2.3 - reliable top mounting and responsive slots */
.onitsha-pi-top-slot{width:100%!important;max-width:100%!important;display:block!important;clear:both!important;margin:0!important;padding:0!important;box-sizing:border-box!important;}
.onitsha-pi-top-slot > .onitsha-pi{width:100%!important;max-width:100%!important;box-sizing:border-box!important;}
.onitsha-pi-top-slot .onitsha-pi-wrap{width:100%!important;margin:0!important;padding:0!important;}
.onitsha-pi-top-slot .pi-products{overflow:hidden!important;}
@media(max-width:768px){
 .onitsha-pi-top-slot{margin:0 0 8px!important;}
 .onitsha-pi-top-slot .pi-head{padding:10px 12px!important;margin-bottom:6px!important;}
 .onitsha-pi-top-slot .pi-track{gap:8px!important;padding:0 8px 4px!important;}
 .onitsha-pi-top-slot .pi-slide{min-width:30vw!important;width:30vw!important;}
 .onitsha-pi-top-slot .pi-prod-img{height:112px!important;min-height:112px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;}
 .onitsha-pi-top-slot .pi-prod-img img{height:100%!important;width:100%!important;object-fit:contain!important;}
 .onitsha-pi-top-slot .pi-prod-name{font-size:11px!important;line-height:1.2!important;max-height:2.4em!important;overflow:hidden!important;}
 .onitsha-pi-top-slot .pi-prod-price{font-size:11px!important;line-height:1.2!important;}
}

/* v3.2.4 — fast mobile carousels, marquee and stock image manager */
.pi-marquee{margin:10px 0!important;padding:0!important;border-radius:12px!important;overflow:hidden!important;background:linear-gradient(90deg,var(--opi-primary),var(--opi-accent))!important;color:#fff!important;border:0!important;box-shadow:none!important}
.pi-marquee-track{display:block;white-space:nowrap;overflow:hidden;padding:9px 0;font-weight:900;line-height:1.2;animation:opi-marquee 13s linear infinite}
.pi-marquee-main{margin-left:100%;display:inline-block}
.pi-marquee-sep{display:inline-block;margin:0 18px;opacity:.8}
.pi-marquee-dynamic{display:inline-block}
@keyframes opi-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.pi-stock-images .pi-carousel{padding:10px 12px 12px!important;background:var(--opi-bg)}
.pi-stock-images .pi-slide{min-width:100%!important;width:100%!important}
.pi-stock-image{width:100%;height:210px;background:#fff;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pi-stock-image img{width:100%;height:100%;object-fit:contain;display:block}
.opi-image-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.opi-image-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 7px;background:#f8fafc;border:1px solid #dbe3ee;border-radius:9px}
.opi-image-chip img{width:54px;height:38px;object-fit:contain;background:#fff;border-radius:5px}
.opi-image-chip .button-link-delete{color:#b42318;text-decoration:none;cursor:pointer}
@media(max-width:767px){
 .pi-marquee-track{font-size:12px;padding:8px 0;animation-duration:10s}
 .pi-stock-image{height:160px}
}

/* v3.2.5 — Bloc INT + professional animated marquee */
.pi-int-block{margin:8px 0!important;padding:6px!important;overflow:hidden!important;background:var(--opi-bg,#f4f6f8)!important;border-radius:14px!important}
.pi-int-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;position:relative}
.pi-int-item{min-width:0;overflow:hidden;border-radius:12px;background:#fff;aspect-ratio:2/1;display:none;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.pi-int-item.is-active{display:block}
.pi-int-item img{display:block;width:100%;height:100%;object-fit:cover!important}
.pi-int-item a{display:block;width:100%;height:100%}
.pi-int-dots{display:flex;justify-content:center;gap:5px;margin:5px 0 1px}.pi-int-dots i{width:6px;height:6px;border-radius:50%;background:#cbd5e1;display:block}.pi-int-dots i.is-active{background:var(--opi-primary,#ff6a00);transform:scale(1.15)}
.pi-marquee-pro{margin:7px 0!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:12px!important;background:linear-gradient(90deg,var(--opi-primary,#ff6a00),var(--opi-accent,#007bff))!important;color:#fff!important}
.pi-marquee-line{overflow:hidden;white-space:nowrap}.pi-marquee-line-main{padding:7px 0;background:rgba(255,255,255,.10)}.pi-marquee-line-dynamic{padding:6px 0;background:rgba(0,0,0,.10)}
.pi-marquee-flow{display:flex;width:max-content;animation:opi-marquee-loop var(--opi-marquee-speed,12s) linear infinite}.pi-marquee-flow span{display:inline-block;padding:0 28px;font-size:12px;font-weight:900;letter-spacing:.2px}.pi-marquee-flow-reverse{animation-direction:reverse;animation-duration:calc(var(--opi-marquee-speed,12s) + 2s)}
@keyframes opi-marquee-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:767px){.pi-int-block{margin:6px 0!important;padding:5px!important}.pi-int-track{gap:6px}.pi-int-item{border-radius:10px;aspect-ratio:2/1}.pi-marquee-flow span{font-size:11px;padding:0 20px}.pi-marquee-line-main{padding:6px 0}.pi-marquee-line-dynamic{padding:5px 0}}


/* v3.2.6 — Bloc INT: always show two images side-by-side on mobile */
.pi-int-block{width:100%!important;box-sizing:border-box!important;overflow:hidden!important;margin:8px 0!important;padding:6px!important}
.pi-int-track{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;padding:0!important;margin:0!important}
.pi-int-track::-webkit-scrollbar{display:none!important}
.pi-int-item{display:block!important;flex:0 0 calc((100% - 8px)/2)!important;width:calc((100% - 8px)/2)!important;min-width:calc((100% - 8px)/2)!important;max-width:calc((100% - 8px)/2)!important;aspect-ratio:2/1!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important;scroll-snap-align:start!important;scroll-snap-stop:always!important;border-radius:12px!important;background:#fff!important}
.pi-int-item img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center!important}
.pi-int-item a{display:block!important;width:100%!important;height:100%!important}
.pi-int-dots{display:flex!important;justify-content:center!important;gap:5px!important;margin:5px 0 1px!important}
@media(max-width:767px){
  .pi-int-block{margin:5px 0!important;padding:4px!important;border-radius:12px!important}
  .pi-int-track{gap:6px!important}
  .pi-int-item{flex-basis:calc((100% - 6px)/2)!important;width:calc((100% - 6px)/2)!important;min-width:calc((100% - 6px)/2)!important;max-width:calc((100% - 6px)/2)!important;border-radius:10px!important}
  .pi-int-item img{object-fit:cover!important}
}

/* v3.2.7 — Bloc INT taller + tik-tak visual pulse + premium marquee */
.pi-int-block{
  background:linear-gradient(135deg,#fff7ed,#eef6ff,#fff7ed)!important;
  border:1px solid rgba(255,106,0,.22)!important;
  box-shadow:0 5px 18px rgba(15,23,42,.08)!important;
  animation:opi-int-pulse 1s steps(1,end) infinite!important;
}
.pi-int-track{gap:8px!important;}
.pi-int-item{
  aspect-ratio:1/1!important;
  border:2px solid rgba(255,106,0,.18)!important;
  box-shadow:0 4px 14px rgba(15,23,42,.10)!important;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease!important;
}
.pi-int-item img{object-fit:cover!important;}
@keyframes opi-int-pulse{
  0%,49%{filter:saturate(1);box-shadow:0 5px 18px rgba(15,23,42,.08),0 0 0 0 rgba(255,106,0,0)}
  50%,100%{filter:saturate(1.18);box-shadow:0 6px 20px rgba(15,23,42,.10),0 0 0 3px rgba(0,123,255,.10)}
}
.pi-marquee-pro{
  position:relative!important;
  min-height:96px!important;
  border:2px solid rgba(255,255,255,.28)!important;
  border-radius:16px!important;
  background:linear-gradient(100deg,#ff6a00 0%,#e91e63 38%,#6a35ff 68%,#007bff 100%)!important;
  box-shadow:0 7px 22px rgba(15,23,42,.16), inset 0 0 24px rgba(255,255,255,.10)!important;
}
.pi-marquee-glow{position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(255,255,255,.10);animation:opi-marquee-glow 1s steps(1,end) infinite}
@keyframes opi-marquee-glow{0%,49%{opacity:.45}50%,100%{opacity:1;box-shadow:inset 0 0 18px rgba(255,214,64,.28),inset 0 0 0 2px rgba(255,255,255,.18)}}
.pi-marquee-line-main{padding:14px 0!important;background:rgba(0,0,0,.14)!important;border-bottom:1px solid rgba(255,255,255,.18)!important}
.pi-marquee-line-dynamic{padding:11px 0!important;background:rgba(255,255,255,.10)!important}
.pi-marquee-flow span{font-size:17px!important;line-height:1.35!important;text-shadow:0 2px 7px rgba(0,0,0,.25)!important}
.pi-marquee-line-dynamic .pi-marquee-flow span{font-size:14px!important}
@media(max-width:767px){
 .pi-int-block{padding:5px!important;margin:7px 0!important}
 .pi-int-track{gap:6px!important}
 .pi-int-item{flex-basis:calc((100% - 6px)/2)!important;width:calc((100% - 6px)/2)!important;min-width:calc((100% - 6px)/2)!important;max-width:calc((100% - 6px)/2)!important;aspect-ratio:1/1!important;border-radius:12px!important}
 .pi-marquee-pro{min-height:108px!important;border-radius:15px!important}
 .pi-marquee-line-main{padding:14px 0!important}
 .pi-marquee-line-dynamic{padding:12px 0!important}
 .pi-marquee-flow span{font-size:15px!important;padding:0 24px!important}
 .pi-marquee-line-dynamic .pi-marquee-flow span{font-size:13px!important;padding:0 20px!important}
}

/* =========================================================
   3.2.8 — INT enlarged/animated + Shop popup
   ========================================================= */
.pi-int-block{position:relative!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow:hidden!important}
.pi-int-block .pi-int-track{width:100%!important;display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;scrollbar-width:none!important}
.pi-int-block .pi-int-track::-webkit-scrollbar{display:none!important}
.pi-int-block .pi-int-item{flex:0 0 calc((100% - 8px)/2)!important;width:calc((100% - 8px)/2)!important;min-width:calc((100% - 8px)/2)!important;aspect-ratio:var(--opi-int-aspect,1.15)!important;height:auto!important;min-height:0!important;display:block!important;position:relative!important;overflow:hidden!important;border-radius:16px!important}
.pi-int-block .pi-int-item img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;object-position:center!important}
.pi-int-block.pi-int-flashing{animation:opi-int-flash 1s steps(1,end) infinite!important}
.pi-int-block .pi-int-item.is-flash{animation:opi-int-image-flash 1s steps(1,end) infinite!important}
@keyframes opi-int-flash{0%,49%{filter:saturate(1) brightness(1)}50%,100%{filter:saturate(1.22) brightness(1.06)}}
@keyframes opi-int-image-flash{0%,49%{box-shadow:0 0 0 2px rgba(255,106,0,.25),0 8px 22px rgba(15,23,42,.10)}50%,100%{box-shadow:0 0 0 4px rgba(0,123,255,.32),0 0 24px rgba(255,214,64,.55)}}
@media(max-width:767px){
  .pi-int-block{margin:8px 0!important;padding:5px!important;border-radius:16px!important}
  .pi-int-block .pi-int-track{gap:7px!important}
  .pi-int-block .pi-int-item{flex-basis:calc((100% - 7px)/2)!important;width:calc((100% - 7px)/2)!important;min-width:calc((100% - 7px)/2)!important;border-radius:14px!important}
}

.opi-popup-backdrop{display:none;position:fixed;inset:0;z-index:2147483000;background:rgba(8,15,30,.68);backdrop-filter:blur(5px);align-items:center;justify-content:center;padding:18px;box-sizing:border-box}
.opi-popup-backdrop.is-open{display:flex;animation:opi-popup-fade .25s ease both}
.opi-popup{position:relative;width:min(var(--opi-popup-width,60%),520px);max-width:calc(100vw - 36px);max-height:86vh;overflow:hidden;background:#fff;border-radius:22px;box-shadow:0 18px 60px rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.7);transform:scale(.92);animation:opi-popup-in .3s cubic-bezier(.2,.8,.2,1) both}
.opi-popup-media{width:100%;background:#f6f8fb;display:flex;align-items:center;justify-content:center;max-height:58vh;overflow:hidden}
.opi-popup-media img{display:block;width:100%;height:auto;max-height:58vh;object-fit:contain}
.opi-popup-body{padding:16px;text-align:center;background:linear-gradient(135deg,#fff7ef,#eef6ff)}
.opi-popup-title{font-size:20px;font-weight:900;color:var(--opi-text,#1f2937);line-height:1.15;margin-bottom:7px}
.opi-popup-text{font-size:14px;font-weight:700;color:#64748b;line-height:1.4;margin-bottom:12px}
.opi-popup-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none!important;padding:11px 17px;border-radius:999px;background:linear-gradient(90deg,var(--opi-primary,#ff6a00),var(--opi-accent,#007bff));color:#fff!important;font-weight:900;box-shadow:0 8px 18px rgba(15,23,42,.18)}
.opi-popup-close{position:absolute;right:9px;top:8px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(0,0,0,.68);color:#fff;font-size:25px;line-height:1;cursor:pointer;z-index:3}
@keyframes opi-popup-fade{from{opacity:0}to{opacity:1}}
@keyframes opi-popup-in{from{transform:scale(.88) translateY(12px);opacity:.4}to{transform:scale(1) translateY(0);opacity:1}}
@media(max-width:767px){
  .opi-popup{width:min(var(--opi-popup-width,60%),calc(100vw - 36px));max-height:82vh;border-radius:18px}
  .opi-popup-media img{max-height:48vh}
  .opi-popup-title{font-size:18px}
  .opi-popup-text{font-size:13px}
}
.opi-banner-admin-preview{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px;border:1px solid #dbe4ef;border-radius:12px;background:#f8fbff;max-width:760px}.opi-banner-admin-preview img{width:180px;height:75px;object-fit:contain;background:#fff;border-radius:8px;border:1px solid #e5e7eb}.opi-banner-admin-preview span{font-size:12px;color:#475569}