/* ======================================================
   Home Tabs Section (SAFE) — FINAL (V4.3)
   File: assets/css/home-tabs.css

   FIX (V4.3):
   ✅ Tabs buttons size reduced on mobile + tablet
   ✅ Guaranteed INLINE (single row) on mobile + tablet
   ✅ NO swipe/scroll (no horizontal scroll)
   ✅ Tabs buttons TRUE CENTER (all devices)
   ✅ Desktop styling unchanged
====================================================== */

.stm-home-tabs{
  margin: 0px 0 25px;
  padding-left: 20px;
  padding-right: 20px;
}

.stm-home-tabs > .container{
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.stm-tabs-head{
  display:flex;
  align-items:center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.stm-tabs-h{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

/* ======================================================
   Tabs bar
====================================================== */

.tabbar{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;

  /* ✅ center */
  justify-content:center;
  align-items:center;

  /* ✅ TRUE center fix (prevents right shift) */
  width:100%;
  margin-left:0;
  margin-right:0;
}

.tabbar button{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  color:#0f172a;
  font-weight:700;
  font-size:13px;
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
}

.tabbar button.active{
  background:#111827;
  border-color:#111827;
  color:#fff;
}

/* ======================================================
   ✅ FIX: Mobile + Tablet tabs inline + smaller buttons
   - No swipe/scroll
   - Shrinks buttons so 3 tabs fit in one row
====================================================== */

@media (max-width: 1024px){

  /* Force single line */
  .tabbar{
    flex-wrap:nowrap !important;
    justify-content:center;
    gap: 6px;
  }

  /* Allow shrink a bit (but keep readable) */
  .tabbar button{
    font-size:12px;
    padding:8px 10px;
    height:32px;
    line-height:1;
  }
}

@media (max-width: 640px){

  .tabbar{
    gap: 6px;
  }

  .tabbar button{
    font-size:11px;
    padding:7px 9px;
    height:30px;
    line-height:1;
  }
}

/* Extra small phones fallback (guarantee inline) */
@media (max-width: 360px){
  .tabbar{
    gap: 5px;
  }

  .tabbar button{
    font-size:10.5px;
    padding:6px 8px;
    height:28px;
  }
}


/* ======================================================
   Layout
====================================================== */

.pane-wrap{
  display:grid;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* ======================================================
   Left Big Card
====================================================== */

.stm-tabs-bigcard{
  border: 2px solid #ff7a00;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  position: relative;

  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 34px;
}

/* RIGHT chip (HOT/SALE/NEW) — same size always */
.stm-tabs-chip{
  position:absolute;
  top:12px;
  right:12px;
  left:auto;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 28px;
  padding: 0 10px;
  min-width: 56px;
  border-radius: 999px;

  font-weight: 1000;
  font-size: 12px;
  line-height: 1;
  border: 0;
}

/* ✅ Right label colors per tab */
#pane-featured .stm-tabs-chip{ background:#111827; color:#ffffff; } /* Featured = black */
#pane-onsale2  .stm-tabs-chip{ background:#ef4444; color:#ffffff; } /* Onsale = red */
#pane-recent   .stm-tabs-chip{ background:#16a34a; color:#ffffff; } /* Recent = green */

/* LEFT label (Featured Product / Onsale Product / Recently Added)
   ✅ minimum width (NOT full), 1px border, 25px radius
*/
.stm-tabs-badge-top{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* ✅ force minimum width (content only) */
  width: fit-content;
  max-width: max-content;

  white-space: nowrap;

  font-size:12px;
  font-weight:1000;
  line-height: 1;

  height: 28px;              /* slim + equal to right chip */
  padding: 0 12px;
  margin: 0 0 12px 2px;      /* ⬇️ 10–12px gap from image */

  color:#ff7a00;
  background:#ffffff;
  border: 1px solid #ff7a00;
  border-radius: 25px;
}


/* Image wrapper — 1:1 square + slightly bigger */
.stm-tabs-art{
  display:block;
  width:100%;

  aspect-ratio: 1 / 1;
  max-height: 340px;       /* ✅ +20px size increase (was ~320) */

  background:#ffffff;

  border-radius: 0px;    /* ✅ +10px radius (was ~14) */
  overflow:hidden;

  margin-bottom: 14px;    /* keep spacing balanced */
}

/* Image inside big card */
.stm-tabs-art img{
  width:100%;
  height:100%;

  object-fit: contain;
  object-position: center;

  display:block;
}

.stm-tabs-art img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Title */
.stm-tabs-bigtitle{
  display:block;
  margin: 22px 0 6px;
  color:#0a58ca;
  text-decoration:none;
  font-weight:1000;
  line-height:1.25;
}

.stm-tabs-bigtitle:hover{
  color:#063a8a;
  text-decoration: underline;
}

/* Price */
.stm-tabs-bigprice{
  margin-top: 16px;
  text-align:center;
  font-weight:1000;
  font-size:22px;
}

/* Badges */
.stm-tabs-badges{
  margin-top: 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}

.stm-tabs-stock,
.stm-tabs-sold{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  font-size:12px;
  font-weight:900;
  border-radius:999px;
  padding:6px 10px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#374151;
  text-align:center;
}

.stm-tabs-stock.in{ color:#047857; background:#ecfdf5; border-color:#a7f3d0; }
.stm-tabs-stock.out{ color:#7c2d12; background:#fef3c7; border-color:#fcd34d; }

/* CTA */
.stm-tabs-cta{
  display:inline-flex;
  width:100%;
  justify-content:center;
  align-items:center;
  height:42px;
  border-radius:12px;
  background:#111827;
  color:#fff;
  text-decoration:none;
  font-weight:1000;
  margin-top: auto;
  margin-bottom: 0;
}

.stm-tabs-cta:hover{ filter:brightness(.97); }

/* ======================================================
   Tabs Woo loop layout (tabs only)
====================================================== */

.stm-home-tabs.woocommerce ul.products{
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px 26px;
}

.stm-home-tabs.woocommerce ul.products > li.product{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* ======================================================
   Responsive
====================================================== */

@media (max-width: 1024px){
  .pane-wrap{ grid-template-columns: 1fr; }
  .stm-home-tabs.woocommerce ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px){
  .stm-home-tabs.woocommerce ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ======================================================
   Horizontal scroll on tablet/mobile
====================================================== */

@media (max-width: 1024px){

  .stm-home-tabs .pane-wrap{ grid-template-columns: 1fr !important; }

  .stm-home-tabs .pane-wrap .woocommerce ul.products,
  .stm-home-tabs .pane-wrap ul.products{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: none !important;
    padding: 8px 2px 12px !important;
    margin: 0 !important;
  }

  .stm-home-tabs .pane-wrap .woocommerce ul.products > li.product,
  .stm-home-tabs .pane-wrap ul.products > li.product{
    flex: 0 0 40% !important;
    scroll-snap-align: start;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
}

@media (max-width: 640px){

  .stm-home-tabs .pane-wrap .woocommerce ul.products > li.product,
  .stm-home-tabs .pane-wrap ul.products > li.product{
    flex-basis: 66.666% !important;
  }

  .stm-home-tabs .pane-wrap .woocommerce ul.products,
  .stm-home-tabs .pane-wrap ul.products{
    gap: 12px !important;
  }
}