:root{
  /* Layout */
  --cpl-cols:3;
  --cpl-gap:24px;--cpl-gap-md:20px;--cpl-gap-sm:16px;
  --cpl-card-bg:transparent;--cpl-thumb-max:300px;

  /* Stars */
  --cpl-star-size:16px;--cpl-star-gap:4px;
  --cpl-star-color:#f5a623;--cpl-star-empty-color:#ccc;

  /* Focus */
  --cpl-focus-ring:2px;--cpl-focus-color:Highlight;--cpl-focus-fallback:#1a73e8;

  /* Motion */
  --cpl-trans:.35s ease;
}

/* Grid */
.cpl-grid{
  display:grid;
  grid-template-columns:repeat(var(--cpl-cols,3),minmax(0,1fr));
  gap:var(--cpl-gap,24px);
  contain:layout paint style;
}
@media (max-width:1024px){.cpl-grid{gap:var(--cpl-gap-md,20px)}}
@media (max-width:767px){ .cpl-grid{gap:var(--cpl-gap-sm,16px)}}

/* Card */
.cpl-item{
  position:relative;background:var(--cpl-card-bg,transparent);
  transition:box-shadow .25s ease,transform .25s ease;
  content-visibility:auto;contain-intrinsic-size:400px 520px;
}

/* Media */
.cpl-image{
  position:relative;overflow:hidden;display:grid;aspect-ratio:1/1;
}
.cpl-image img{
  display:block;width:100%;height:300px;object-fit:cover;max-width:none;
  transition:transform var(--cpl-trans),opacity var(--cpl-trans);
  will-change:opacity,transform;
}
.cpl-image > a{display:block;height:300px}
.cpl-image .cpl-img-wrap{display:block;height:300px}

/* Title / price */
.cpl-title{margin:.75rem 0 .25rem;line-height:1.3}
.cpl-title a{text-decoration:none;outline:0}

/* Actions */
.cpl-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;margin-top:.5rem}
.cpl-actions .button{
  display:inline-block;line-height:1;text-decoration:none;white-space:normal;
  overflow-wrap:anywhere;word-break:break-word;max-width:100%;box-sizing:border-box;
}

/* Secondary image swap */
.cpl-image.has-secondary .cpl-img-primary{transition:opacity var(--cpl-trans)}
.cpl-image .cpl-img-secondary{
  position:absolute;inset:0;opacity:0;display:grid;place-items:center;width:100%;height:300px;object-fit:cover;
  transition:opacity var(--cpl-trans),transform var(--cpl-trans);
}
.cpl-item:hover .cpl-image.has-secondary .cpl-img-primary{opacity:0}
.cpl-item:hover .cpl-image .cpl-img-secondary{opacity:1}

/* Rating */
.cpl-rating{margin:.25rem 0;--_size:var(--cpl-star-size,16px);--_gap:var(--cpl-star-gap,4px)}
.cpl-rating .cpl-stars{display:inline-flex;align-items:center;gap:var(--_gap)}
.cpl-rating .cpl-star{position:relative;width:var(--_size);height:var(--_size);display:inline-block}
.cpl-rating .cpl-star-layer{position:absolute;inset:0;display:grid;place-items:center;line-height:1}
.cpl-rating .cpl-star-empty{color:var(--cpl-star-empty-color)}
.cpl-rating .cpl-star-fill{color:var(--cpl-star-color);overflow:hidden}
.cpl-rating .cpl-star-half{width:50%;overflow:hidden}
.cpl-rating .cpl-star-svg{width:100%;height:100%;display:inline-block}
.cpl-rating .cpl-star-svg path{fill:currentColor}

/* Accessible focus */
:where(.cpl-title a,.cpl-actions .button,.cpl-image a):focus-visible{
  outline:var(--cpl-focus-ring) solid var(--cpl-focus-color,Highlight);
  outline-offset:2px;border-radius:.25rem;
  box-shadow:0 0 0 var(--cpl-focus-ring) color-mix(in srgb,var(--cpl-focus-fallback,#1a73e8) 40%,transparent);
}

/* Color inheritance for dark-mode friendliness */
:where(.cpl-item,.cpl-actions .button,.cpl-title a,.cpl-price){color:inherit}
.cpl-price{font-weight:600}

/* ===========================================
   WooCommerce Archive Pages (Categories, Tags)
   =========================================== */

/* Grid for WooCommerce archives */
ul.products{
  display:grid !important;
  grid-template-columns:repeat(var(--cpl-cols,4),minmax(0,1fr));
  gap:var(--cpl-gap,24px);
  contain:layout paint style;
  list-style:none;
  padding:0;
  margin:0;
}
ul.products::before,
ul.products::after{display:none}
@media (max-width:1024px){ ul.products{--cpl-cols:3;gap:var(--cpl-gap-md,20px)}}
@media (max-width:767px){ ul.products{--cpl-cols:2;gap:var(--cpl-gap-sm,16px)}}
@media (max-width:480px){ ul.products{--cpl-cols:1}}

/* Product card */
ul.products li.product{
  position:relative;
  background:var(--cpl-card-bg,transparent);
  transition:box-shadow .25s ease,transform .25s ease;
  content-visibility:auto;
  contain-intrinsic-size:400px 520px;
  width:100% !important;
  margin:0 !important;
  padding:0;
  float:none !important;
}

/* Product image container */
ul.products li.product a.woocommerce-LoopProduct-link{
  display:block;
  text-decoration:none;
}
ul.products li.product .woocommerce-loop-product__link{
  display:block;
  text-decoration:none;
}
ul.products li.product img{
  display:block;
  width:100%;
  height:300px;
  object-fit:cover;
  max-width:none;
  transition:transform var(--cpl-trans),opacity var(--cpl-trans);
  will-change:opacity,transform;
  margin:0;
}
ul.products li.product:hover img{
  transform:scale(1.05);
}

/* Product title */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2{
  margin:.75rem 0 .25rem;
  line-height:1.3;
  font-size:1rem;
  padding:0;
}
ul.products li.product a{
  text-decoration:none;
  outline:0;
  color:inherit;
}

/* Product price */
ul.products li.product .price{
  font-weight:600;
  color:inherit;
  margin:.25rem 0;
  display:block;
}
ul.products li.product .price del{
  opacity:.5;
  margin-right:.5em;
}
ul.products li.product .price ins{
  text-decoration:none;
  font-weight:700;
}

/* Star rating */
ul.products li.product .star-rating{
  margin:.25rem 0;
  font-size:var(--cpl-star-size,16px);
  color:var(--cpl-star-color,#f5a623);
}
ul.products li.product .star-rating::before{
  color:var(--cpl-star-empty-color,#ccc);
}

/* Add to cart button */
ul.products li.product .button,
ul.products li.product a.add_to_cart_button{
  display:inline-block;
  line-height:1;
  text-decoration:none;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
  box-sizing:border-box;
  margin-top:.5rem;
}

/* Sale badge */
ul.products li.product .onsale{
  position:absolute;
  top:10px;
  left:10px;
  z-index:1;
  margin:0;
  border-radius:4px;
  padding:.35em .75em;
  font-size:.85em;
  font-weight:600;
}

/* Focus styles for accessibility */
ul.products li.product a:focus-visible{
  outline:var(--cpl-focus-ring) solid var(--cpl-focus-color,Highlight);
  outline-offset:2px;
  border-radius:.25rem;
}

/* Pagination styling */
nav.woocommerce-pagination{
  margin-top:2rem;
}
nav.woocommerce-pagination ul{
  display:flex;
  justify-content:center;
  gap:.5rem;
  list-style:none;
  padding:0;
  margin:0;
  border:none;
}
nav.woocommerce-pagination ul li{
  border:none;
  margin:0;
  padding:0;
}
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.5em;
  height:2.5em;
  padding:.25em .75em;
  text-decoration:none;
  border-radius:4px;
  transition:background .2s,color .2s;
}
nav.woocommerce-pagination ul li span.current{
  font-weight:600;
}