/* ---- Theme variables (defaults) ---- */
.tcs-showcase-root {
--tcs-topbar-bg: #f7f7f7; /* default */
--tcs-pills-bg: #ffffff; /* default */
}
/* ---- Consume variables ---- */
.tcs-pills { background: var(--tcs-pills-bg); }
/* Scope everything so it only affects this layout */
.tcs-showcase { font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif; background:#fff; }
.tcs-full { width:100%; margin:0; padding:0; }
/* Top bar (colors come from CSS vars) */
.tcs-topbar {
background: transparent;
display:flex; justify-content:space-between; align-items:center;
padding:10px 18px; border-bottom:0px;
}
.tcs-topbar-center { flex:1; display:flex; justify-content:center; }
.tcs-topbar-right {
align-self: flex-start;
justify-content: flex-end;
margin-left: auto;
display: flex;
gap: 12px;
align-items: flex-start;
flex-shrink: 0;
}
.tcs-info {
display: flex;
flex-direction: column;
}
/* Header — background uses shared var --tcs-header-bg */
.tcs-header {
display: flex
;
gap: 22px;
padding: 16px 18px;
background: var(--tcs-header-bg);
border-radius: 15px;
margin: 15px 30px 0px 30px;
justify-content: flex-start;
}
/* Sidebar — background uses shared var --tcs-pills-bg per your request */
.tcs-body {
display: flex;
gap: clamp(16px, 3vw, 40px);
margin: 20px 30px 30px 30px;
}
.tcs-store-name { font-size:18px; font-weight:700; color: var(--tcs-header-title-color, #111827); }
.tcs-store-desc{color:var(--tcs-header-subtitle-color,#64748b);font-size:14px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tcs-store-desc a{color:inherit;text-decoration:none}
/* Pills */
.tcs-pills { display:flex; flex-wrap:wrap; gap:10px; }
.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;
}
.tcs-pills a:hover { background:#eef2ff; border-color:#c7d2fe; }
/* Separate styling for location pills */
.tcs-locations-bar.tcs-pills {
background: #fff; /* example */
}
.tcs-topbar-center .tcs-pills {
background: none;
margin-left: -115px;
}
.tcs-pills.tcs-locationsf4f7fbckground: var(--tcs-topbar-bg, transparent);
}
.tcs-locations-pills a {
background: #fff;
color: #000;
}
.tcs-locations-pills a:hover {
background: #bae6fd;
border-color: #0284c7;
}
/* Title Font
.tcs-title {
color: var(--tcs-pro-title-color);
font-size: var(--tcs-title-size);
font-weight: var(--tcs-title-weight);
}
/* Price Font */
.tcs-showcase .woocommerce-Price-amount.amount {
color: var(--tcs-price-color);
font-size: var(--tcs-price-size);
}
/*icons*/
.tcs-icon { font-size:18px; color: #111827; text-decoration:none; }
/* Banner */
.tcs-banner { width:100%; height:220px; background:#eef2f7; overflow:hidden; }
.tcs-banner img { width:100%; height:100%; object-fit:cover; }
/* Custom categories bar */
.tcs-catsbar { padding:10px 18px; border-bottom:1px solid #e5e7eb; background: var(--tcs-catsbar-bg, transparent); }
/* Filters */
.tcs-filters { display:flex; justify-content: center;
flex-wrap:wrap; gap:10px; align-items:center; padding:12px 18px; border-bottom:1px solid #e5e7eb; }
.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; }
/* 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; }
.tcs-thumb img { width:100%; height:100%; object-fit:contain; transition: opacity .18s ease; }
/* Title (color/size/weight via vars)*/
.tcs-title {
color: var(--tcs-pro-title-color);
font-size: var(--tcs-pro-title-size);
font-weight: var(--tcs-pro-title-weight);
}
/* Overlay circle that shows first gallery image on top of the main thumb */
.tcs-thumb {
position: relative; /* ensure overlay positions correctly */
}
/* Price (scope safely) */
.tcs-showcase .woocommerce-Price-amount.amount { color:#16a34a; font-weight:700; }
ul.categories_list {
font-weight: 500;
color: #0073aa;
/* background: #f0f0f0; */
padding: 4px 6px;
list-style: none;
border-radius: 4px;
}
.tcs-thumb-overlay {
position: absolute;
left: 8px;
bottom: 8px;
width: 55px;
height: 55px;
border-radius: 999px;
overflow: hidden;
background: #fff;
border: 1px solid #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.12);
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: none; /* overlay is decorative; clicks go to the link */
}
.tcs-thumb-overlay img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tcs-imgwrap img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 10px;
background: #fff!important;
}
.page-numbers.dots {
margin-top: 0px;
}
/* === Mobile fixes for Minimal Store (place at end) ===================== */
/* 1) Banner: shrink on smaller screens */
.tcs-cc__banner { height: clamp(120px, 28vw, 220px); } /* fluid */
@media (max-width: 640px) {
.tcs-cc__banner { height: 140px; }
}
/* 2) Force 2-up product grid on phones (overrides inline --cols) */
@media (max-width: 640px) {
/* Minimal layout grid */
.tcs-cc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* If your other grid class is used anywhere, keep it consistent */
.tcs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* Scale image boxes down a touch for tighter phones */
.tcs-cc__img { width: clamp(120px, 42vw, 160px); height: clamp(120px, 42vw, 160px); }
.tcs-thumb { width: clamp(120px, 42vw, 160px); height: clamp(120px, 42vw, 160px); }
}
/* Keep 2-up even on very small phones; nudge sizes smaller */
@media (max-width: 380px) {
.tcs-cc__grid,
.tcs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.tcs-cc__img, .tcs-thumb { width: 120px; height: 120px; }
}
/* 3) Tighten spacing on mobile so content breathes */
@media (max-width: 640px) {
.tcs-cc__body { gap: 14px; padding: 12px; }
.tcs-cc__sidebar { padding: 12px; }
.tcs-cc__productsHead { gap: 8px; }
.tcs-topbar { padding: 8px 12px; }
.tcs-topbar-right{ gap: 10px; }
}
/* === Mobile pagination tweaks ================================== */
@media (max-width: 640px) {
.woocommerce-pagination,
.page-numbers {
display: flex;
gap: 6px; /* slightly tighter on phones */
justify-content: center;
margin: 16px 0 24px; /* reduce vertical space */
padding: 0;
flex-flow: row wrap; /* allow wrapping instead of cutoff */
font-size: 14px; /* smaller, readable text */
}
.page-numbers li,
.woocommerce-pagination li {
flex: 0 0 auto;
}
.woocommerce nav.woocommerce-pagination ul li {
margin: 6px !important; /* extra spacing for touch targets */
}
}
/* === Tablet / Mid-size (fully responsive tuning) ======================= */
/* Targets iPad / small laptops / large phones in landscape */
@media (min-width: 641px) and (max-width: 1024px) {
/* Top bar & header */
.tcs-topbar { padding: 10px 16px; }
.tcs-topbar-right { gap: 10px; }
.tcs-header { gap: 16px; padding: 14px 16px; margin: 12px 16px 0; }
/* Banner: slightly shorter than desktop, taller than phone */
.tcs-cc__banner { height: clamp(160px, 22vw, 200px); }
/* Body spacing & sidebar */
.tcs-cc__body { gap: 18px; padding: 16px; }
.tcs-cc__sidebar { padding: 14px; border-radius: 12px; }
.tcs-cc__slab + .tcs-cc__slab { margin-top: 14px; }
/* Filters tighten up */
.tcs-cc__field { gap: 8px; }
.tcs-cc__input { min-width: 140px; }
.tcs-cc__btn { padding: 8px 12px; }
/* Products header */
.tcs-cc__productsHead { gap: 10px; }
/* GRID: force a clean 3-up on mid screens */
.tcs-cc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.tcs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
/* Thumbs scale down slightly for 3-up fit */
.tcs-cc__img,
.tcs-thumb { width: clamp(150px, 26vw, 170px); height: clamp(150px, 26vw, 170px); }
/* Product text sizing */
.tcs-cc__titleP { font-size: clamp(14px, 1.6vw, 16px); }
.tcs-cc__price .amount { font-size: clamp(14px, 1.6vw, 16px); }
.tcs-cc__sw { gap: 6px; }
/* Pills: allow horizontal scroll if many */
.tcs-pills { gap: 8px; overflow:auto; -webkit-overflow-scrolling:touch; }
.tcs-pills ul { gap: 8px; }
/* Pagination: centered, comfortable tap targets */
.woocommerce-pagination,
.page-numbers {
display:flex; gap:8px; justify-content:center;
margin:18px 0 26px; padding:0; flex-flow:row wrap; font-size:15px;
}
.woocommerce nav.woocommerce-pagination ul li { margin: 6px; }
}
/* Optional: slightly narrower mid tier for 641–820px to keep 2-up if needed */
/* Comment out if you prefer 3-up down to 641px */
@media (min-width: 641px) and (max-width: 820px) {
.tcs-cc__grid,
.tcs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.tcs-cc__img, .tcs-thumb { width: clamp(140px, 32vw, 160px); height: clamp(140px, 32vw, 160px); }
}