/* =========================================================
   PowerUp-inspired design for ShopMall.bg
   Pill buttons (30px) | Grey cards (#EAEAEC, 16px radius)
   Bebas Neue display font | Dark sidebar | Rounded everything
   v1 — 2026-05-12
   ========================================================= */

:root {
  --pu-radius-card: clamp(12px, 0.9vw, 18px);
  --pu-radius-btn: 30px;
  --pu-grey-card: #EAEAEC;
  --pu-grey-card-img: #d4d4d6;
  --pu-display: 'Oswald', 'Arial Narrow Bold', Impact, sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   DISPLAY HEADINGS — Bebas Neue
   ═══════════════════════════════════════════════════════════ */
.ni-section__title,
.sm-section__title,
.sm-mw-tile__title,
.sm-mw-header__title,
.sm-roulette__title,
.sm-quiz__title,
.ni-hero__title,
.sm2-cat-head__title,
.spd-h1,
.ni-botw__name,
.ni-outfit__title,
.ni-look__title,
.sm-producers-hero__title,
.ni-hero__copy .ni-hero__title {
  font-family: var(--pu-display) !important;
  letter-spacing: 0.04em !important;
}

/* ═══════════════════════════════════════════════════════════
   PILL BUTTONS — all rounded to 999px (full pill)
   ═══════════════════════════════════════════════════════════ */
.ni-btn,
.ni-btn--accent,
.ni-btn--outline,
.ni-btn--lg,
.ni-hero__cta,
.ni-hero__pill,
.sm-roulette__btn,
.sm-quiz__start,
.sm-quiz__btn,
.sm-mw-tile__cta,
.ni-ai-guide__cta,
button.sm2-mob-filter-btn,
.sm-section__more,
.ni-section__more,
.spd-buy-btn,
.spd-sticky__btn,
.smn-btn,
.smr-back,
.ni-outfit__refresh,
.sm-pv-buy-btn,
.sm-cat-banner__breadcrumb,
.ni-newsletter__form button,
.ni-newsletter__form input[type="submit"],
.ni-quick__pill,
.sm2-subcat-pill,
.smh-search__cta {
  border-radius: 999px !important;
}

/* ── "More" links get pill border ── */
.ni-section__more,
.sm-section__more {
  border: 1.5px solid currentColor !important;
  padding: 7px 20px !important;
  border-radius: var(--pu-radius-btn) !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}
.ni-section__more:hover,
.sm-section__more:hover {
  background: #FFE600 !important;
  color: #000 !important;
  border-color: #FFE600 !important;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT CARDS — grey background, rounded, shadow on hover
   ═══════════════════════════════════════════════════════════ */

/* Homepage ni-prod */
.ni-prod,
.ni-fullscreen .ni-prod {
  background: var(--pu-grey-card) !important;
  border: none !important;
  border-radius: var(--pu-radius-card) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.ni-prod:hover,
.ni-fullscreen .ni-prod:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.13) !important;
  transform: translateY(-4px) !important;
  border: none !important;
}
.ni-prod__img {
  background: var(--pu-grey-card-img) !important;
}
.ni-prod__img img {
  padding: 6px !important;
  object-fit: contain !important;
}

/* Category page sm2-card */
.sm2-card {
  background: var(--pu-grey-card) !important;
  border: none !important;
  border-radius: var(--pu-radius-card) !important;
  box-shadow: none !important;
}
.sm2-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.13) !important;
  transform: translateY(-4px) !important;
  border: none !important;
}
.sm2-card__img {
  background: var(--pu-grey-card-img) !important;
  border-radius: var(--pu-radius-card) var(--pu-radius-card) 0 0 !important;
}
.sm2-card__img img {
  padding: 8px !important;
  object-fit: contain !important;
}
.sm2-card__body {
  background: var(--pu-grey-card) !important;
}
.sm2-card__buy {
  border-radius: 20px !important;
  margin: 6px 10px 10px !important;
}

/* shopmall-theme sm-card */
.sm-card {
  background: var(--pu-grey-card) !important;
  border: none !important;
  border-radius: var(--pu-radius-card) !important;
  overflow: hidden !important;
}
.sm-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.13) !important;
  border: none !important;
}
.sm-card__img {
  background: var(--pu-grey-card-img) !important;
}

/* Deal cards */
.ni-deal,
.ni-drop {
  background: var(--pu-grey-card) !important;
  border: none !important;
  border-radius: var(--pu-radius-card) !important;
  overflow: hidden !important;
}
.ni-deal:hover,
.ni-drop:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.13) !important;
  border: none !important;
}

/* Outfit items */
.ni-outfit__item {
  background: var(--pu-grey-card) !important;
  border: none !important;
  border-radius: var(--pu-radius-card) !important;
  overflow: hidden !important;
}
.ni-outfit__name {
  color: #333 !important;
}
.ni-outfit__price {
  color: #000 !important;
  font-weight: 800 !important;
}
.ni-outfit__slot {
  background: rgba(0,0,0,.06) !important;
  color: #555 !important;
}

/* Similar products on product page */
.spd-sc {
  background: var(--pu-grey-card) !important;
  border: none !important;
  border-radius: var(--pu-radius-card) !important;
  overflow: hidden !important;
}
.spd-sc:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
  border: none !important;
}
.spd-sc__img {
  background: var(--pu-grey-card-img) !important;
}
.spd-sc__body {
  background: var(--pu-grey-card) !important;
}

/* Producer cards */
.sm-producer-card {
  background: var(--pu-grey-card) !important;
  border: none !important;
  border-radius: var(--pu-radius-card) !important;
  overflow: hidden !important;
}
.sm-producer-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.1) !important;
  border: none !important;
}
.sm-producer-card__img {
  background: var(--pu-grey-card-img) !important;
}

/* Product gallery background */
.spd-gallery {
  background: var(--pu-grey-card) !important;
  border-radius: var(--pu-radius-card) !important;
}

/* ═══════════════════════════════════════════════════════════
   PILL SUBCATEGORY / QUICK LINKS
   ═══════════════════════════════════════════════════════════ */
.sm2-subcat-pill {
  border-radius: var(--pu-radius-btn) !important;
  padding: 7px 18px !important;
}
.sm2-subcat-pill:hover,
.sm2-subcat-pill.is-active {
  background: #FFE600 !important;
  border-color: #FFE600 !important;
  color: #000 !important;
}
/* duplicates removed — see pill button rule above (999px) */

/* ═══════════════════════════════════════════════════════════
   FILTER SIDEBAR — dark background
   ═══════════════════════════════════════════════════════════ */
.sm2-sidebar {
  background: #0C0C0D !important;
  border-right: none !important;
}
.sm2-sidebar__title {
  color: #fff !important;
}
.sm2-filter-group__name {
  color: #fff !important;
}
.sm2-filter-item label {
  color: rgba(255,255,255,.7) !important;
}
.sm2-filter-item__count {
  color: rgba(255,255,255,.4) !important;
}
.sm2-filter-group {
  border-bottom-color: rgba(255,255,255,.1) !important;
}
.sm2-sidebar__head {
  border-bottom-color: #FFE600 !important;
}
.sm2-filter-group__toggle {
  color: rgba(255,255,255,.5) !important;
}
.sm2-filter-clear {
  background: #1a1a1a !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #ccc !important;
  border-radius: 20px !important;
}
.sm2-filter-clear:hover {
  background: #FFE600 !important;
  color: #000 !important;
}
@media (max-width:991px) {
  .sm2-sidebar {
    background: #0C0C0D !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT PAGE — pill buy button, grey image bg
   ═══════════════════════════════════════════════════════════ */
.spd-buy-btn {
  border-radius: 30px !important;
}
.spd-sticky__btn {
  border-radius: 24px !important;
}

/* ═══════════════════════════════════════════════════════════
   CATEGORY PAGE — rounded toolbar
   ═══════════════════════════════════════════════════════════ */
.sm2-toolbar {
  border-radius: 12px !important;
}
.sm2-sort select {
  border-radius: 20px !important;
}

/* ═══════════════════════════════════════════════════════════
   LOOK + SWIPE CARDS
   ═══════════════════════════════════════════════════════════ */
.ni-look,
.ni-fullscreen .ni-look {
  border-radius: var(--pu-radius-card) !important;
  overflow: hidden !important;
}
.ni-swipe__card {
  border-radius: var(--pu-radius-card) !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   CATEGORY TILES
   ═══════════════════════════════════════════════════════════ */
.ni-cat,
.ni-fullscreen .ni-cat {
  border-radius: var(--pu-radius-card) !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   NEWS / BLOG CARDS
   ═══════════════════════════════════════════════════════════ */
.ni-news-card,
.ni-fullscreen .ni-news-card {
  border-radius: var(--pu-radius-card) !important;
  overflow: hidden !important;
  border: none !important;
  background: var(--pu-grey-card) !important;
}
.ni-news-card:hover,
.ni-fullscreen .ni-news-card:hover {
  border: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}

/* ═══════════════════════════════════════════════════════════
   USP STRIP — more padding + rounded items
   ═══════════════════════════════════════════════════════════ */
.ni-usp {
  border-radius: 14px !important;
  padding: 18px 16px !important;
}

/* ═══════════════════════════════════════════════════════════
   SECTION HEADS — more breathing room
   ═══════════════════════════════════════════════════════════ */
.ni-section__head,
.sm-section__head {
  margin-bottom: 36px !important;
}

/* ═══════════════════════════════════════════════════════════
   BADGES — pill shape
   ═══════════════════════════════════════════════════════════ */
.sm2-card__badge,
.spd-disc-badge,
.spd-sc__badge,
.ni-deal__badge,
.ni-drop__pct {
  border-radius: 30px !important;
  padding: 3px 10px !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* ═══════════════════════════════════════════════════════════
   SOCIAL PROOF + TICKER
   ═══════════════════════════════════════════════════════════ */
.ni-social-proof {
  border-radius: 30px !important;
}
.ni-hero__kicker {
  border-radius: 30px !important;
}
.sm-section__kicker,
.ni-section__kicker,
.ni-section__kicker--green,
.sm-section__kicker {
  border-radius: 30px !important;
}

/* ═══════════════════════════════════════════════════════════
   MALL WINDOW tile CTAs
   ═══════════════════════════════════════════════════════════ */
.sm-mw-tile__cta {
  border-radius: var(--pu-radius-btn) !important;
}
.sm-mw-tile__tag {
  border-radius: 20px !important;
}
.sm-subcat-chip {
  border-radius: 20px !important;
}

/* ═══════════════════════════════════════════════════════════
   BOTW + BRAND WALL
   ═══════════════════════════════════════════════════════════ */
.sm-brand-cell {
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════════════════ */
.smn-card {
  border-radius: 24px !important;
}
.smn-benefit {
  border-radius: 20px !important;
}
.smn-email-row input[type="email"] {
  border-radius: 20px !important;
}
.smn-btn {
  border-radius: var(--pu-radius-btn) !important;
}

/* ═══════════════════════════════════════════════════════════
   BLOG (smbl- / smbp- namespaces)
   ═══════════════════════════════════════════════════════════ */
[class^="smbl-"], [class^="smbp-"] {
  --pu-radius-card: clamp(12px, 0.9vw, 18px);
}

/* ═══════════════════════════════════════════════════════════
   ARTICLE / READ PAGE
   ═══════════════════════════════════════════════════════════ */
.smr-article {
  border-radius: 20px !important;
}
.smr-back {
  border-radius: var(--pu-radius-btn) !important;
}
.smr-gallery-link {
  border-radius: var(--pu-radius-card) !important;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT / FAQ
   ═══════════════════════════════════════════════════════════ */
.smc-card,
.smq-item {
  border-radius: 20px !important;
}

/* ═══════════════════════════════════════════════════════════
   HEADER bar (smh- namespace) adjustments
   ═══════════════════════════════════════════════════════════ */
.smh-search__input {
  border-radius: 30px 0 0 30px !important;
}
.smh-search__go {
  border-radius: 0 30px 30px 0 !important;
}
.smh-search-row {
  border-radius: 12px !important;
}