/* ---- Theme variables (defaults) ---- */
.tcs-showcase-root {
--tcs-topbar-bg: #f7f7f7; /* default */
--tcs-pills-bg: #ffffff; /* default */
}
/* ---- Consume variables ---- */
.tcs-topbar { background: var(--tcs-topbar-bg); }
.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: 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 {
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-title-color, #111827); }
.tcs-store-desc { font-size:13px; color: var(--tcs-subtitle-color, #6b7280); }
/* 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: var(--tcs-header-title-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;
}
/* ============================================================
Modern layout — mobile-first responsive CSS
(Relies on CSS vars you already output in PHP)
============================================================ */
/* ---------- Tablet & mobile (≤ 820px) ---------- */
@media (max-width: 820px){
/* layout */
.tcs-body { display:grid; grid-template-columns: 1fr; gap: clamp(16px, 3vw, 40px); padding: 16px 18px 24px; }
.tcs-sidebar { width:unset; background: var(--tcs-pills-bg, #fff); border-radius:12px; padding:12px 14px; margin:12px 10px 0px 10px; justify-content:flex-start; }
/* grid density on tablet/phones */
.tcs-grid { --cols: 2 !important; } /* beats any inline var */
/* card visuals only on mobile/tablet */
.tcs-card { background:#fff; border-radius:14px; padding:0px; }
.tcs-imgwrap { width:160px; height:160px; margin:0 auto; }
}
/* ---------------------------
Breakpoints (Tablet & Up)
--------------------------- */
@media (min-width: 641px) {
.tcs-banner { height:240px; }
.tcs-imgwrap { width:180px; height:180px; }
}
/* Grid: use chosen density */
.tcs-grid { --cols: 2; }
}
@media (min-width: 1024px) {
.tcs-header { gap:20px; }
.tcs-header-title h1 { font-size:32px; }
.tcs-grid { --cols: 3; }
}
@media (min-width: 1280px) {
.tcs-grid { --cols: 4; }
}
/* If you output --cols from PHP, these optional fallbacks keep it responsive */
@media (max-width: 1200px) { .tcs-grid { --cols: 3; } }
@media (max-width: 820px) { .tcs-grid { --cols: 2; } }
@media (max-width: 520px) { .tcs-grid { --cols: 2; } }
/* ---------------------------
Small screens polish
--------------------------- */
@media (max-width: 640px) {
.tcs-header { flex-wrap: wrap; padding:12px 14px; margin:12px 10px 0px 10px; }
.tcs-avatar { width:84px; height:84px; }
.tcs-header-title h1 { font-size:22px; }
.tcs-topbar { padding:8px 12px; gap:8px; }
.tcs-topbar-right { gap:10px; }
.orderby { min-width: 160px; }
.tcs-input { flex:1 1 100%; }
.tcs-btn { width:auto; }
.tcs-body {padding: 0px;
margin: 0px;
}
.woocommerce nav.woocommerce-pagination ul li {
margin: 0px!important;}
}
@media (max-width: 820px) { .tcs-grid { --cols: 2; } }