/* === Custom card layout (screenshot A) === */
:root{
  --zcwf-cols-d: 3;
  --zcwf-cols-t: 2;
  --zcwf-cols-m: 1;
  --zcwf-card-radius: 12px;
  --zcwf-card-shadow: 0 8px 20px rgba(15,30,50,0.08);
  --zcwf-card-thumb-h: 240px;
  --zcwf-btn-bg: #093b66;
  --zcwf-btn-color: #fff;
  --zcwf-gap: 28px;
}

/* Grid */

/* Robust grid: use auto-fit with a sensible min column width so pagination/AJAX cannot collapse layout */
.zcwf-grid { display:grid; gap:var(--zcwf-gap,24px); grid-auto-rows: auto; grid-auto-flow: row; }
.zcwf-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width:1200px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width:1023px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width:639px){ .zcwf-grid{ grid-template-columns: repeat(1, 1fr); } }
.zcwf-grid > * { display:flex; flex-direction:column; }

@media (min-width:1024px){ 
/* Robust grid: use auto-fit with a sensible min column width so pagination/AJAX cannot collapse layout */
.zcwf-grid { display:grid; gap:var(--zcwf-gap,24px); grid-auto-rows: auto; grid-auto-flow: row; }
.zcwf-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width:1200px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width:1023px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width:639px){ .zcwf-grid{ grid-template-columns: repeat(1, 1fr); } }
.zcwf-grid > * { display:flex; flex-direction:column; }
 }
@media (min-width:640px) and (max-width:1023px){ 
/* Robust grid: use auto-fit with a sensible min column width so pagination/AJAX cannot collapse layout */
.zcwf-grid { display:grid; gap:var(--zcwf-gap,24px); grid-auto-rows: auto; grid-auto-flow: row; }
.zcwf-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width:1200px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width:1023px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width:639px){ .zcwf-grid{ grid-template-columns: repeat(1, 1fr); } }
.zcwf-grid > * { display:flex; flex-direction:column; }
 }
@media (max-width:639px){ 
/* Robust grid: use auto-fit with a sensible min column width so pagination/AJAX cannot collapse layout */
.zcwf-grid { display:grid; gap:var(--zcwf-gap,24px); grid-auto-rows: auto; grid-auto-flow: row; }
.zcwf-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width:1200px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width:1023px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width:639px){ .zcwf-grid{ grid-template-columns: repeat(1, 1fr); } }
.zcwf-grid > * { display:flex; flex-direction:column; }
 }

/* Card */
.zcwf-card, .pg-card {
  background: #fff;
  border-radius: var(--zcwf-card-radius);
  box-shadow: var(--zcwf-card-shadow);
  overflow: hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  border: 1px solid rgba(0,0,0,0.04);
}

/* Thumb */
.zcwf-card .zcwf-card-thumb, .pg-card .pg-thumb {
  height: var(--zcwf-card-thumb-h);
  overflow:hidden;
  display:block;
}
.zcwf-card .zcwf-card-thumb img,
.pg-card .pg-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Body: content grows and keeps button at bottom */
.zcwf-card-body, .pg-card .pg-content {
  padding: 22px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.zcwf-card-title, .pg-card .pg-title {
  font-size:20px;
  line-height:1.2;
  margin:0 0 12px 0;
  color:#083b66;
  font-weight:700;
}
.zcwf-card-excerpt, .pg-card .pg-excerpt {
  color:#6b7684;
  font-size:14px;
  margin-bottom:18px;
  flex:0 0 auto;
}

/* Actions / CTA */
.zcwf-card-actions, .pg-card .pg-cta {
  padding: 16px 22px 22px 22px;
  background: transparent;
}
.zcwf-card-actions .button, .pg-card .pg-readmore {
  display:block;
  width:100%;
  text-align:center;
  padding:14px 18px;
  border-radius:8px;
  background: var(--zcwf-btn-bg);
  color: var(--zcwf-btn-color);
  text-decoration:none;
  font-weight:700;
}

/* Ensure equal-height cards in grid */

/* Robust grid: use auto-fit with a sensible min column width so pagination/AJAX cannot collapse layout */
.zcwf-grid { display:grid; gap:var(--zcwf-gap,24px); grid-auto-rows: auto; grid-auto-flow: row; }
.zcwf-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width:1200px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width:1023px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width:639px){ .zcwf-grid{ grid-template-columns: repeat(1, 1fr); } }
.zcwf-grid > * { display:flex; flex-direction:column; }


/* Small tweaks */
.zcwf-card .zcwf-p { margin:0; }


:root{ --zcwf-cols-d:4; --zcwf-cols-t:2; --zcwf-cols-m:1; }

/* === Theme inheritance overrides (added by ChatGPT on 2025-09-11) === */
.zcwf-wrapper, .zcwf-wrapper * {
  font-family: inherit !important;
  color: inherit !important;
}
.zcwf-wrapper a { color: inherit !important; }
.zcwf-clear, .zcwf-search, .zcwf-filter-block, .zcwf-filter-head,
.zcwf-chip, .zcwf-pagination .zcwf-page, .zcwf-card, .zcwf-card-actions .button {
  border-color: currentColor;
}

/**********************
 * Frontend UI (v1.6.4)
 **********************/
.zcwf-wrapper{border:1px solid #e5e7eb;padding:16px;border-radius:12px;background:#fff}
.zcwf-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.zcwf-search{flex:1;min-width:220px;padding:10px 12px;border:1px solid #e5e7eb;border-radius:8px}
.zcwf-selected{display:flex;gap:8px;flex-wrap:wrap}
.zcwf-chip{background:#f1f5f900;border-radius:1px solid #003262;color: #003262;padding:6px 10px;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.zcwf-chip button{border:none;background:transparent;cursor:pointer;font-size:14px;line-height:1}
.zcwf-chip:hover {
    background: #003262;
    color: white !important;
}
.zcwf-clear{margin-left:auto;padding:8px 12px;border-radius:0px;border: 1px solid #003262;color: #003262;background:#fff;cursor:pointer}
.zcwf-clear:hover{background:#003262;color:white}
/* Filters: one item per line */
.zcwf-filters{display:grid;grid-template-columns:1fr;gap:12px}
.zcwf-filter-block{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fafafa}
.zcwf-filter-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#F1F5F9}
.zcwf-filter-head h4{margin:0;font-size:15px}
.zcwf-collapse-toggle{border:1px solid #003262;color: #003262 ;background:transparent;cursor:pointer;font-size:18px}
.zcwf-filter-body{padding:10px 12px}
.zcwf-terms{display:block}
.zcwf-term{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed #e5e7eb}
.zcwf-term:last-child{border-bottom:none}
.zcwf-term input[type="checkbox"]{width:16px;height:16px}
.zcwf-more{margin-top:4px}
.zcwf-view-more{margin-top:8px;background:#fff;border:1px solid #e5e7eb;padding:6px 10px;border-radius:6px;cursor:pointer;font-size: 14px}
.zcwf-view-more:hover{background-color:#003262;
color:white;}

/* Results + Spinner */
.zcwf-results-wrap{position:relative;margin-top:16px}
.zcwf-results-overlay{position:absolute;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;z-index:5}
.zcwf-spinner{width:28px;height:28px;border-radius:50%;border:3px solid #e5e7eb;border-top-color:#00356B;animation:wcfspin 1s linear infinite}
@keyframes wcfspin{to{transform:rotate(360deg)}}

/* Responsive Grid */

/* Robust grid: use auto-fit with a sensible min column width so pagination/AJAX cannot collapse layout */
.zcwf-grid { display:grid; gap:var(--zcwf-gap,24px); grid-auto-rows: auto; grid-auto-flow: row; }
.zcwf-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width:1200px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width:1023px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width:639px){ .zcwf-grid{ grid-template-columns: repeat(1, 1fr); } }
.zcwf-grid > * { display:flex; flex-direction:column; }

@media (min-width:1024px){
/* Robust grid: use auto-fit with a sensible min column width so pagination/AJAX cannot collapse layout */
.zcwf-grid { display:grid; gap:var(--zcwf-gap,24px); grid-auto-rows: auto; grid-auto-flow: row; }
.zcwf-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width:1200px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width:1023px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width:639px){ .zcwf-grid{ grid-template-columns: repeat(1, 1fr); } }
.zcwf-grid > * { display:flex; flex-direction:column; }
}
@media (min-width:640px) and (max-width:1023px){
/* Robust grid: use auto-fit with a sensible min column width so pagination/AJAX cannot collapse layout */
.zcwf-grid { display:grid; gap:var(--zcwf-gap,24px); grid-auto-rows: auto; grid-auto-flow: row; }
.zcwf-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width:1200px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width:1023px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width:639px){ .zcwf-grid{ grid-template-columns: repeat(1, 1fr); } }
.zcwf-grid > * { display:flex; flex-direction:column; }
}
@media (max-width:639px){
/* Robust grid: use auto-fit with a sensible min column width so pagination/AJAX cannot collapse layout */
.zcwf-grid { display:grid; gap:var(--zcwf-gap,24px); grid-auto-rows: auto; grid-auto-flow: row; }
.zcwf-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width:1200px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width:1023px){ .zcwf-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width:639px){ .zcwf-grid{ grid-template-columns: repeat(1, 1fr); } }
.zcwf-grid > * { display:flex; flex-direction:column; }
}

/* Card */
.zcwf-card{border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:#fff;display:flex;flex- .15s ease, box-shadow .15s ease}
.zcwf-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.zcwf-card-thumb{display:block}
.zcwf-card-thumb img{display:block;width:100%;height:auto}
.zcwf-price{color:var(--zcwf-price-color,#2e7d32);font-weight:var(--zcwf-price-weight,700);font-size:var(--zcwf-price-font,1.05rem);padding:12px 14px 0 14px}
.zcwf-card-title{font-size:1.05rem;font-weight:700;margin:4px 14px 8px 14px}
.zcwf-card-title a{text-decoration:none;color:#111827}
.zcwf-card-title a:hover{text-decoration:underline}
.zcwf-card-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:12px}
.zcwf-card-excerpt{font-size:14px;color:#374151}

/* Button: visible & buttonized (works with theme baseline) */
.zcwf-card-actions .button{display:inline-block;padding:10px 14px;font-weight:700;line-height:1.1;border-radius:10px;box-shadow:0 1px 1px rgba(0,0,0,.04);text-align:center}
.zcwf-btn-custom .zcwf-card .button{background:var(--zcwf-btn-bg,#00356B)!important;color:var(--zcwf-btn-color,#fff)!important;border:none;border-radius:var(--zcwf-btn-radius,12px)!important;font-size:var(--zcwf-btn-font,1rem)}
.zcwf-btn-theme .zcwf-card .button{font-size:var(--zcwf-btn-font,1rem)}
.zcwf-card .button:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.zcwf-card .quantity{display:none !important}

/* Add-to-cart loading/success states */
.zcwf-atc.zcwf-loading{opacity:.85;pointer-events:none;position:relative}
.zcwf-atc.zcwf-loading:after{content:"";display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.6);border-top-color:#fff;margin-left:8px;vertical-align:-3px;animation:wcfspin .9s linear infinite}
.zcwf-atc.zcwf-added{pointer-events:none}
.zcwf-btn-custom .zcwf-atc.zcwf-added{background:#2e7d32!important}
/* Pagination */
.zcwf-paginate{display:flex;gap:10px;justify-content:center;margin-top:18px}
.zcwf-paginate .zcwf-page{border:1px solid #cbd5e1;background:#fff;padding:8px 12px;cursor:pointer;transition:all .12s ease}
.zcwf-paginate .zcwf-page:hover{transform:translateY(-1px);background:#f8fafc}
.zcwf-paginate .zcwf-page.active{background:var(--zcwf-pagi-active-bg,#00356B);color:var(--zcwf-pagi-active-color,#fff);border-color:var(--zcwf-pagi-active-bg,#00356B)}
.zcwf-results[style*="--zcwf-pagi-style:pill"] ~ .zcwf-pagination .zcwf-page{border-radius:999px}
.zcwf-results[style*="--zcwf-pagi-style:square"] ~ .zcwf-pagination .zcwf-page{border-radius:6px}
.zcwf-results[style*="--zcwf-pagi-style:round"] ~ .zcwf-pagination .zcwf-page{border-radius:50% ; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center}

/* ZCWF custom tweaks per request */
.zcwf-card-thumb{display:block;position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#f7f7f7}
.zcwf-card-thumb img{width:100%;height:100%;object-fit:contain;display:block}

.zcwf-card-actions .button, .zcwf-atc, .zcwf-card .button{display:block;width:100%;text-align:center}
.zcwf-card-actions{margin-top:0.5rem}

/* Ensure pg-grid matches zcwf-grid for consistent layout */
.pg-grid{display:grid;gap:16px}
@media (min-width:1024px){.pg-grid{grid-template-columns:repeat(var(--zcwf-cols-d,4),1fr)}}
@media (min-width:640px) and (max-width:1023px){.pg-grid{grid-template-columns:repeat(var(--zcwf-cols-t,2),1fr)}}
@media (max-width:639px){.pg-grid{grid-template-columns:repeat(var(--zcwf-cols-m,1),1fr)}}


.zcwf-card-price-wrap{
    padding:0 16px;
    margin-top:8px;
}
.zcwf-card-price{
    font-weight:600;
    line-height:1.4;
}