/* =============================
   Light Catalog — Clean Theme
   3 columns • uniform cards • pretty UI
   ============================= */

:root{
  --lc-radius:16px;
  --lc-gap:24px;
  --lc-border:#e9eef3;
  --lc-bg:#ffffff;
  --lc-text:#1f2937;
  --lc-muted:#6b7280;
  --lc-brand:#2563eb;         /* ganti sesuai brand */
  --lc-brand-hover:#1d4ed8;
  --lc-shadow:0 6px 18px rgba(17, 24, 39, .08);
  --lc-shadow-hover:0 10px 24px rgba(17, 24, 39, .12);
}

/* Controls: search + sort */
.lc-controls{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin:12px 0 18px;
  flex-wrap:wrap;
}
.lc-search input,
.lc-search button,
.lc-sort select{
  height:40px;
  border:1px solid var(--lc-border);
  border-radius:10px;
  padding:0 12px;
  font-size:14px;
}
.lc-search input{ min-width:260px; }
.lc-search button{
  background:#f9fafb;
  cursor:pointer;
}
.lc-sort select{ background:#fff; }

/* Grid 3 kolom (tablet 2, mobile 1) */
.lc-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--lc-gap);
  margin:16px 0;
  align-items:stretch;
}
@media (max-width:1024px){
  .lc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .lc-grid{ grid-template-columns:1fr; }
}

/* Card */
.lc-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--lc-bg);
  border:1px solid var(--lc-border);
  border-radius:var(--lc-radius);
  overflow:hidden;
  box-shadow:var(--lc-shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.lc-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--lc-shadow-hover);
}

/* Thumbnail: seragam 3:4 (ubah ke 1/1 kalau mau kotak) */
.lc-thumb{ display:block; aspect-ratio:3/4; overflow:hidden; }
.lc-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
}

/* Body */
.lc-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
  flex:1;
  color:var(--lc-text);
}
.lc-title{
  margin:0;
  font-size:16px;
  line-height:1.35;
}
.lc-title a{ color:var(--lc-text); text-decoration:none; }
.lc-title a:hover{ color:var(--lc-brand); }

.lc-price{ font-weight:700; margin-top:4px; }
.lc-sku{ color:var(--lc-muted); font-size:12px; }

/* Excerpt: clamp 3 baris agar rapi */
.lc-excerpt{
  color:#444;
  margin:2px 0 4px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:3.6em; /* kira-kira 3 baris */
}

/* Tombol CTA full width, nempel bawah */
.lc-btn{
  margin-top:auto;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  height:42px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--lc-brand);
  background:var(--lc-brand);
  color:#fff !important;
  text-decoration:none;
  font-weight:600;
  transition:background .18s ease, border-color .18s ease, transform .06s ease;
}
.lc-btn:hover{
  background:var(--lc-brand-hover);
  border-color:var(--lc-brand-hover);
  transform:translateY(-1px);
}

/* Pagination */
.lc-pagination ul{
  list-style:none;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:0;
  margin:10px 0 0;
}
.lc-pagination a, .lc-pagination span{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--lc-border);
  border-radius:10px;
  text-decoration:none;
  background:#fff;
}

/* Single product layout */
.lc-single{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:16px;
}
@media(max-width:900px){
  .lc-single{ grid-template-columns:1fr; }
}

/* Safeguard against theme/Elementor overrides */
.lc-card img{ max-width:100% !important; height:auto; }h1:where(.wp-block-heading).has-background,h2:where(.wp-block-heading).has-background,h3:where(.wp-block-heading).has-background,h4:where(.wp-block-heading).has-background,h5:where(.wp-block-heading).has-background,h6:where(.wp-block-heading).has-background{padding:1.25em 2.375em}h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h3.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h3.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h4.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h4.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h5.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h5.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h6.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]){rotate:180deg}.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}