/* ===========================================================
   Spacivo Sale Hub — banner (sale image/countdown/EMI/banking partners) +
   Master Tab (product tags) / Inner Tab (product categories) product
   browser. Self-contained plugin CSS (no theme dependency).
   =========================================================== */

.spacivo-sale-hub { background: #F1ECE5; }

/* --- Banner: 4 genuinely equal-width columns (image | timer+shop-now |
   EMI text | banking partners), each taking exactly 25% via CSS Grid so
   none can grow at another's expense. min-width:0 on the columns is what
   lets their contents (nowrap text, images) shrink/ellipsis instead of
   forcing the grid track wider than its 1fr share. */
.spacivo-sale-hub__banner {
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 1.5rem;
  max-width: 1400px; margin: 0 auto; padding: .875rem 1.5rem;
}
.spacivo-sale-hub__banner-col { min-width: 0; }

.spacivo-sale-hub__banner-col--image { display: flex; align-items: center; justify-content: center; }
/* width/height:auto — the box follows the actual uploaded image's own
   aspect ratio instead of a fixed width/height forcing its own ratio onto
   it; object-fit:contain scales proportionally rather than cropping if an
   admin uploads something bigger than the column's own share. */
.spacivo-sale-hub__sale-image { width: auto; height: auto; max-width: 100%; max-height: 110px; object-fit: contain; }

.spacivo-sale-hub__banner-col--deal { display: flex; align-items: center; }
.spacivo-sale-hub__deal { min-width: 0; }
.spacivo-sale-hub__deal-label { font-size: .7rem; font-weight: 700; letter-spacing: .05em; color: #4A4640; margin: 0 0 .4rem; white-space: nowrap; }
.spacivo-sale-hub__deal-row { display: flex; align-items: center; gap: 1rem; }
.spacivo-sale-hub__countdown { display: flex; gap: .5rem; }
.spacivo-sale-hub__timer-unit {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: #1a1a1a; color: #fff; border-radius: 4px; padding: .4rem .6rem; min-width: 44px;
}
.spacivo-sale-hub__timer-value { font-size: 1.1rem; font-weight: 700; line-height: 1; }
.spacivo-sale-hub__timer-label { font-size: .6rem; text-transform: uppercase; opacity: .8; }
.spacivo-sale-hub__deal-cta { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding-left: 1rem; border-left: 1px solid #D6CFC5; }
.spacivo-sale-hub__shop-now {
  display: inline-block; background: #1a1a1a; color: #fff; font-size: .75rem; font-weight: 700;
  padding: .5rem .9rem; text-decoration: none; white-space: nowrap;
}
.spacivo-sale-hub__shop-now:hover { background: #72192D; color: #fff; }
.spacivo-sale-hub__upto-off { margin: 0; font-size: .7rem; font-weight: 700; color: #72192D; white-space: nowrap; }

.spacivo-sale-hub__banner-col--emi { display: flex; align-items: center; }
.spacivo-sale-hub__emi-text { margin: 0; font-size: .75rem; line-height: 1.4; color: #2A211D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spacivo-sale-hub__emi-text strong { color: #72192D; }

.spacivo-sale-hub__banner-col--partners { display: block; }
.spacivo-sale-hub__partners-label { margin: 0 0 .4rem; font-size: .75rem; color: #4A4640; white-space: nowrap; }
.spacivo-sale-hub__partners-row { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; }
.spacivo-sale-hub__partner-logo { max-height: 24px; max-width: 60px; width: auto; height: auto; object-fit: contain; flex-shrink: 0; }
.spacivo-sale-hub__tc-text { margin: .35rem 0 0; font-size: .68rem; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Master / Inner tabs ---
   Segmented-control look: a rounded pill container with a softer rounded
   highlight sitting behind whichever tab is active. Colors reuse the
   plugin's own existing tokens (#E7E1D8 tan / #72192D maroon, the same
   ones the panel below and every other accent in this component already
   use) instead of new one-off hex values, so the active tab visually
   connects to the panel it opens rather than clashing against it.
   outline/border explicitly zeroed on the button itself — without it,
   :focus-visible falls back to the browser/OS default outline color
   (can be an arbitrary accent color depending on the visitor's own
   OS/browser theme), which read as a stray, unintended border here. */
.spacivo-sale-hub__master-tabs {
  display: flex; width: fit-content; max-width: 100%; align-items: center; gap: .25rem;
  background: #F1ECE5; border-radius: 999px; padding: .35rem; margin: 1.25rem auto 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.spacivo-sale-hub__master-tab {
  background: transparent; border: none; outline: none; padding: .65rem 1.5rem; font-size: .9rem; font-weight: 600;
  color: #2A211D; cursor: pointer; border-radius: 14px; white-space: nowrap; transition: background .2s ease, color .2s ease;
}
.spacivo-sale-hub__master-tab:hover { background: #E7E1D8; }
.spacivo-sale-hub__master-tab:focus-visible { box-shadow: 0 0 0 2px rgba(114,25,45,.35); }
.spacivo-sale-hub__master-tab.is-active { background: #E7E1D8; color: #72192D; font-weight: 700; }
.spacivo-sale-hub__master-tab.is-active:hover { background: #DED5C7; }

.spacivo-sale-hub__tag-panel { display: none; background: #E7E1D8; }
.spacivo-sale-hub__tag-panel.is-active { display: block; }

.spacivo-sale-hub__inner-tabs {
  display: flex; gap: 2rem; padding: 1rem 1.5rem 0; max-width: 1400px; margin: 0 auto;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.15) transparent;
}
.spacivo-sale-hub__inner-tabs::-webkit-scrollbar { height: 3px; }
.spacivo-sale-hub__inner-tabs::-webkit-scrollbar-track { background: transparent; }
.spacivo-sale-hub__inner-tabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 2px; }
.spacivo-sale-hub__inner-tab {
  background: none; border: none; padding: 0 0 .85rem; font-size: .9rem; font-weight: 600;
  color: #4A4640; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
}
.spacivo-sale-hub__inner-tab.is-active { color: #72192D; border-bottom-color: #72192D; }
.spacivo-sale-hub__inner-tab:hover { color: #72192D; }

.spacivo-sale-hub__cat-panel { display: none; }
.spacivo-sale-hub__cat-panel.is-active { display: block; }

/* --- Carousel --- */
.spacivo-sale-hub__carousel { position: relative; max-width: 1400px; margin: 0 auto; padding: 1.5rem; }
.spacivo-sale-hub__track {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
  padding-bottom: .25rem;
}
.spacivo-sale-hub__track::-webkit-scrollbar { display: none; }

.spacivo-sale-hub__carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%); background: #fff; border: 1px solid #ddd;
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #2A211D; box-shadow: 0 2px 8px rgba(0,0,0,.1); transition: all .2s ease; z-index: 2;
}
.spacivo-sale-hub__carousel-nav:hover { background: #72192D; color: #fff; }
.spacivo-sale-hub__carousel-nav--prev { left: -4px; }
.spacivo-sale-hub__carousel-nav--next { right: -4px; }

/* --- Product tile --- */
.spacivo-sale-hub__tile {
  flex: 0 0 260px; background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); display: flex; flex-direction: column;
}
.spacivo-sale-hub__tile-media { position: relative; aspect-ratio: 1; background: #F1ECE5; overflow: hidden; }
.spacivo-sale-hub__tile-media img { width: 100%; height: 100%; object-fit: cover; }
.spacivo-sale-hub__tile-nav {
  position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .5rem; opacity: 0; transition: opacity .2s ease;
}
.spacivo-sale-hub__tile-media:hover .spacivo-sale-hub__tile-nav { opacity: 1; }
.spacivo-sale-hub__nav-icon {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.75); color: #fff;
  display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
  text-decoration: none; transition: background .2s ease;
}
.spacivo-sale-hub__nav-icon:hover { background: #72192D; color: #fff; }
.spacivo-sale-hub__nav-icon.is-loading { opacity: .6; pointer-events: none; }

.spacivo-sale-hub__tile-info { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.spacivo-sale-hub__tile-title { margin: 0; font-size: .9rem; font-weight: 500; line-height: 1.4; }
.spacivo-sale-hub__tile-title a { color: #2A211D; text-decoration: none; }
.spacivo-sale-hub__tile-title a:hover { text-decoration: none; }
.spacivo-sale-hub__tile-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.spacivo-sale-hub__tile-price ins { text-decoration: none; font-size: 1.05rem; font-weight: 700; color: #2A211D; }
.spacivo-sale-hub__tile-price del { font-size: .85rem; color: #999; }
.spacivo-sale-hub__tile-pct { font-size: .8rem; font-weight: 600; color: #1E8449; }
.spacivo-sale-hub__tile-tax-note { margin: 0; font-size: .7rem; color: #999; }
.spacivo-sale-hub__tile-choice { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 0; font-size: .78rem; font-weight: 600; color: #72192D; }
.spacivo-sale-hub__tile-choice-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: #72192D; color: #fff; flex-shrink: 0;
}

.spacivo-cs-unconfigured-notice {
  font-size: .85rem; color: #a22022; background: #fff3f3; border: 1px dashed #a22022;
  padding: .75rem 1rem; margin: 1rem auto; max-width: 1280px;
}

@media (max-width: 1024px) {
  .spacivo-sale-hub__banner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 750px) {
  .spacivo-sale-hub__banner { grid-template-columns: 1fr; }
  .spacivo-sale-hub__master-tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.15) transparent;
  }
  .spacivo-sale-hub__master-tabs::-webkit-scrollbar { height: 3px; }
  .spacivo-sale-hub__master-tabs::-webkit-scrollbar-track { background: transparent; }
  .spacivo-sale-hub__master-tabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 2px; }
  .spacivo-sale-hub__deal-row { flex-wrap: wrap; }
  .spacivo-sale-hub__tile { flex: 0 0 200px; }
  .spacivo-sale-hub__carousel-nav { display: none; }
}