/* ============================================================
   TCS Showcase Layout — Clean, Organized, Responsive
   - Desktop-first; tablet & mobile tweaks at the end
   - Colors/typography via CSS variables (theme/Advanced Settings)
   ============================================================ */


/* ========== 0) THEME TOKENS (DEFAULTS) =================================== */

.tcs-showcase-root {
  --tcs-topbar-bg: #f7f7f7;
  --tcs-pills-bg:  #ffffff;

  --tcs-title-color:        #111827;
  --tcs-subtitle-color:     #6b7280;

  --tcs-pro-title-color:    #111827;
  --tcs-pro-title-size:     15px;
  --tcs-pro-title-weight:   700;

  --tcs-price-color:        #111827;
  --tcs-price-size:         14px;

  --tcs-catsbar-bg:         transparent;
  --tcs-grid-bg:            #ffffff;
}


/* ========== 1) SCOPE / WRAPPERS ========================================== */

.tcs-showcase {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: #fff;
}

.tcs-full { width: 100%; margin: 0; padding: 0; }


/* ========== 2) TOP BAR ==================================================== */
/* Colors consume tokens (can be overridden upstream) */

.tcs-topbar {
  background: var(--tcs-topbar-bg, #ffffff);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.tcs-topbar-left  { display: flex; align-items: center; gap: 12px; }
.tcs-topbar-center{ flex: 1; display: flex; justify-content: center; }
.tcs-topbar-right { display: flex; align-items: center; gap: 10px; }

.tcs-icon {
  font-size: 18px;
  color: var(--tcs-title-color, #111827);
  text-decoration: none;
}
.tcs-icon:hover { color: #808080; }


/* ========== 3) HEADER MINI (AVATAR / NAME / DESC) ======================== */

.tcs-header { display: flex; align-items: center; gap: 12px; }

.tcs-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; border: 2px solid #fff;
}

.tcs-store-name {
  font-size: 18px; font-weight: 700;
  color: var(--tcs-title-color, #111827);
}

.tcs-store-desc {
  font-size: 13px; color: var(--tcs-subtitle-color, #6b7280);
}


/* ========== 4) PILLS (CATEGORIES / LOCATIONS) ============================ */

.tcs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--tcs-pills-bg, #ffffff);
  justify-content:center; 
   padding:10px 18px;
}

.tcs-pills ul {
  display: flex; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}

.tcs-pills a {
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  color: #111827;
  background: #ffffff;
  white-space: nowrap;
}

.tcs-pills a:hover { background: #eef2ff; border-color: #c7d2fe; }

/* Center pills transparent + custom offset (as requested) */
.tcs-topbar-center .tcs-pills { background: none; margin-left: -115px; }

/* Locations variant */
.tcs-pills.tcs-locations-pills { background: var(--tcs-topbar-bg, transparent); }
.tcs-locations-pills a { background: #fff; color: #000; }
.tcs-locations-pills a:hover { background: #bae6fd; border-color: #0284c7; }


/* ========== 5) BANNER ===================================================== */

.tcs-banner {
  width: 100%; height: 220px;
  background: #eef2f7; overflow: hidden;
}
.tcs-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ========== 6) CUSTOM CATEGORIES BAR ===================================== */

.tcs-catsbar {
  padding: 10px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: var(--tcs-catsbar-bg, transparent);
}

/* Optional: make categories horizontally scrollable if needed */
.tcs-catsbar .categories_list {
  display: flex; gap: 10px; margin: 0; padding: 6px 0; list-style: none;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; flex-wrap: nowrap;
}
.tcs-catsbar .categories_list::-webkit-scrollbar { display: none; }
.tcs-catsbar .categories_list li { flex: 0 0 auto; }


/* ========== 7) FILTERS / CONTROLS ======================================== */

.tcs-filters {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.tcs-input, .tcs-select {
  border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 8px 10px; min-height: 38px; background: #fff; font-size: 14px;
}
.tcs-btn {
  border: 1px solid #2563eb; background: #2563eb; color: #fff;
  border-radius: 10px; padding: 8px 14px; font-weight: 700; cursor: pointer;
}
.tcs-btn:hover { background: #1d4ed8; border-color: #1d4ed8; }


/* ========== 8) PRODUCT GRID ============================================== */

.tcs-grid {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 22px;
  background: var(--tcs-grid-bg, #ffffff);
}

.tcs-item { text-align: center; }

.tcs-thumb {
  width: 200px; height: 200px;
  margin: 0 auto 10px;
  background: #ffffff; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative; /* for future overlays */
}
.tcs-thumb img {
  width: 100%; height: 100%;
  object-fit: contain; transition: opacity .18s ease;
}

/* Product title (via tokens) */
.tcs-title {
  color: var(--tcs-pro-title-color);
  font-size: var(--tcs-pro-title-size);
  font-weight: var(--tcs-pro-title-weight);
}

/* Price (scoped) */
.tcs-showcase .woocommerce-Price-amount.amount {
  color: var(--tcs-price-color);
  font-size: var(--tcs-price-size);
}


/* ========================================================================== */
/* ======================= RESPONSIVE BREAKPOINTS =========================== */
/* ========================================================================== */

/* ---- ≤1200px: reduce grid columns via --cols-md ------------------------- */
@media (max-width: 1200px) {
  .tcs-grid {
    grid-template-columns: repeat(var(--cols-md, 3), minmax(0, 1fr));
  }
}

/* ---- ≤900px: tighten layout where useful -------------------------------- */
@media (max-width: 900px) {
  .tcs-topbar { padding: 8px 14px; }
  .tcs-catsbar { padding: 8px 14px; }
  .tcs-filters { padding: 10px 14px; }
}

/* ---- ≤820px: 2-up product grid ----------------------------------------- */
@media (max-width: 820px) {
  .tcs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



/* ---- ≤640px: phone tweaks ----------------------------------------------- */


@media (max-width: 640px) {
  .tcs-topbar {
   padding: 8px 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

}
.tcs-pills {

	padding: 10px 0px;
}

  /* Pills scroll horizontally */
  .tcs-topbar-center .tcs-pills {
    margin-left: 0;              /* undo large negative offset on phones */
    justify-content: flex-start; /* let pills start at left */
  }
  .tcs-pills ul {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .tcs-pills ul::-webkit-scrollbar { display: none; }

  /* Filters scroll horizontally just like pills */
  .tcs-filters {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .tcs-filters::-webkit-scrollbar { display: none; }

  /* Keep each filter input/button from shrinking */
  .tcs-filters > * {
    flex: 0 0 auto;
  }

  .tcs-grid { gap: 18px; padding: 14px; }
  .tcs-thumb { width: 160px; height: 160px; }
  .tcs-title { font-size: calc(var(--tcs-pro-title-size) - 1px); }
  .tcs-showcase .woocommerce-Price-amount.amount {
    font-size: calc(var(--tcs-price-size) - 1px);
  }
}


/* ---- ≤380px: single column featured/pill compress (optional) ------------ */
@media (max-width: 380px) {
  .tcs-pills a { padding: 6px 10px; font-size: 12px; }
}