/* ===== Appended to public/css/ecom/ecom.css — Day 3 catalog components ===== */

/* section heading */
.ecom-section { padding-block: 28px; }
.ecom-section__head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.ecom-section__title { font-size: var(--ecom-fs-xl); font-weight: var(--ecom-fw-bold); color: var(--ecom-navy); margin:0; }
.ecom-section__sub { color: var(--ecom-muted); font-size: var(--ecom-fs-sm); }
.ecom-section__all { color: var(--ecom-navy); font-weight: var(--ecom-fw-medium); }

/* brand rail */
.ecom-brandgrid { display:grid; grid-template-columns: repeat(8, 1fr); gap:14px; }
.ecom-brandgrid__item { background:var(--ecom-surface); border:1px solid var(--ecom-border); border-radius:var(--ecom-radius); aspect-ratio: 1/1; display:grid; place-items:center; padding:14px; }
.ecom-brandgrid__item img { max-height:70%; object-fit:contain; }
.ecom-brandgrid__item span { font-weight:var(--ecom-fw-medium); color:var(--ecom-navy); text-align:center; }

/* category grid */
.ecom-catgrid { display:grid; grid-template-columns: repeat(6, 1fr); gap:16px; }
.ecom-catcard { background:var(--ecom-surface); border:1px solid var(--ecom-border); border-radius:var(--ecom-radius); padding:20px 12px; text-align:center; }
.ecom-catcard__icon { width:64px; height:64px; border-radius:50%; border:1px solid var(--ecom-border); display:grid; place-items:center; margin:0 auto 12px; font-size:26px; color:var(--ecom-navy); }
.ecom-catcard__name { font-weight:var(--ecom-fw-medium); color:var(--ecom-navy); font-size:var(--ecom-fs-sm); }



/* category page */
.ecom-subtabs { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
.ecom-subtab { padding:8px 16px; border-radius:var(--ecom-radius-pill); border:1px solid var(--ecom-border); background:var(--ecom-surface); color:var(--ecom-navy); font-size:var(--ecom-fs-sm); }
.ecom-subtab.is-active { background:var(--ecom-orange); color:#fff; border-color:var(--ecom-orange); }
.ecom-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.ecom-sort { display:flex; align-items:center; gap:8px; }
.ecom-sort select { padding:8px 12px; border-radius:var(--ecom-radius-sm); border:1px solid var(--ecom-border); font-family:inherit; }
.ecom-seo { color:var(--ecom-muted); line-height:1.7; margin-top:28px; font-size:var(--ecom-fs-sm); }
.ecom-pagination { display:flex; gap:6px; justify-content:center; margin-top:24px; }
/*.ecom-pagination a, .ecom-pagination span { padding:8px 13px; border-radius:var(--ecom-radius-sm); border:1px solid var(--ecom-border); background:var(--ecom-surface); color:var(--ecom-navy); }*/
.ecom-pagination .is-active { background:var(--ecom-orange); color:#fff; border-color:var(--ecom-orange); }

/* PDP */
.ecom-pdp { display:grid; grid-template-columns: 1fr 1fr; gap:32px; padding-block:28px; }
.ecom-pdp__gallery { /*background:var(--ecom-surface); border:1px solid var(--ecom-border);*/ border-radius:var(--ecom-radius); aspect-ratio:1/1; display:grid; place-items:center; }
.ecom-pdp__gallery img { max-width:80%; max-height:80%; object-fit:contain; }
.ecom-pdp__title { font-size:26px; font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); margin:0 0 10px; }
.ecom-pdp__code { color:var(--ecom-muted); font-size:var(--ecom-fs-sm); margin-bottom:14px; }
.ecom-pdp__price { font-size:30px; font-weight:var(--ecom-fw-bold); color:var(--ecom-orange); display:flex; align-items:center; gap:8px; }
.ecom-pdp__price small { color:var(--ecom-muted); font-size:var(--ecom-fs-sm); font-weight:var(--ecom-fw-normal); }
.ecom-pdp__options { margin:18px 0; }
.ecom-pdp__options label { font-weight:var(--ecom-fw-medium); color:var(--ecom-navy); display:block; margin-bottom:6px; }
.ecom-pdp__pack { display:inline-block; padding:10px 16px; border:1px solid var(--ecom-border); border-radius:var(--ecom-radius-sm); background:var(--ecom-surface-2); }
.ecom-pdp__details { margin-top:28px; color:var(--ecom-ink); line-height:1.8; }
.ecom-pdp__details h3 { color:var(--ecom-navy); }

@media (max-width: 1024px){ .ecom-prodgrid{grid-template-columns:repeat(3,1fr);} .ecom-catgrid{grid-template-columns:repeat(4,1fr);} .ecom-brandgrid{grid-template-columns:repeat(5,1fr);} .ecom-pdp{grid-template-columns:1fr;} }
@media (max-width: 640px){ .ecom-prodgrid{grid-template-columns:repeat(2,1fr);} .ecom-catgrid{grid-template-columns:repeat(3,1fr);} .ecom-brandgrid{grid-template-columns:repeat(3,1fr);} }



/* ═══ PDP GALLERY — polish for MANY images (append/replace dots + thumbs rules) ═══ */

/* Hide dots when there are many images — thumbnails already show position.
   Add class .has-many on the dots container from Alpine (images.length > 6). */
.ecom-gallery__dots.is-hidden { display: none !important; }

/* Keep dots compact even with several images */
.ecom-gallery__dots {
  max-width: 70%;
  margin-inline: auto;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Thumbnail strip — smooth scroll + snap so active thumb lands cleanly */
.ecom-gallery__thumbs {
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}
.ecom-gallery__thumb { scroll-snap-align: start; }

/* Nice thin scrollbar for the strip (webkit) */
.ecom-gallery__thumbs::-webkit-scrollbar { height: 6px; }
.ecom-gallery__thumbs::-webkit-scrollbar-thumb {
  background: var(--ecom-border, #e6ece0); border-radius: 3px;
}
.ecom-gallery__thumbs::-webkit-scrollbar-thumb:hover {
  background: var(--ecom-orange, #80C018);
}/* ═══ PDP GALLERY — polish for MANY images (append/replace dots + thumbs rules) ═══ */

/* Hide dots when there are many images — thumbnails already show position.
   Add class .has-many on the dots container from Alpine (images.length > 6). */
.ecom-gallery__dots.is-hidden { display: none !important; }

/* Keep dots compact even with several images */
.ecom-gallery__dots {
  max-width: 70%;
  margin-inline: auto;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Thumbnail strip — smooth scroll + snap so active thumb lands cleanly */
.ecom-gallery__thumbs {
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}
.ecom-gallery__thumb { scroll-snap-align: start; }

/* Nice thin scrollbar for the strip (webkit) */
.ecom-gallery__thumbs::-webkit-scrollbar { height: 6px; }
.ecom-gallery__thumbs::-webkit-scrollbar-thumb {
  background: var(--ecom-border, #e6ece0); border-radius: 3px;
}
.ecom-gallery__thumbs::-webkit-scrollbar-thumb:hover {
  background: var(--ecom-orange, #80C018);
}/* ═══ PDP GALLERY — polish for MANY images (append/replace dots + thumbs rules) ═══ */

/* ═══ PDP GALLERY — FIXED-SIZE main image (replace the earlier gallery CSS) ═══ */

.ecom-pdp__gallery { display: flex; flex-direction: column; gap: 12px; width: 100%; }

/* Main image area — FIXED height so every image shows in the same box,
   regardless of the source image's own dimensions/aspect ratio. */
.ecom-gallery__main {
  position: relative;
  background: var(--ecom-surface, #fff);
  border: 1px solid var(--ecom-border, #e6ece0);
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
  height: 460px;                 /* fixed height — the key fix */
  display: flex; align-items: center; justify-content: center;
}
.ecom-gallery__main > img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;           /* whole image visible, never cropped/stretched */
  padding: 24px;
  display: block;
}

/* Arrows */
.ecom-gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
  display: grid; place-items: center;
  color: var(--ecom-navy, #1e293b); font-size: 16px;
  z-index: 2; transition: background .15s, color .15s;
}
.ecom-gallery__nav:hover { background: #fff; color: var(--ecom-orange, #80C018); }
.ecom-gallery__nav--prev { inset-inline-start: 12px; }
.ecom-gallery__nav--next { inset-inline-end: 12px; }

/* Dots */
.ecom-gallery__dots {
  position: absolute; bottom: 12px; inset-inline: 0;
  display: flex; gap: 6px; justify-content: center; z-index: 2;
}
.ecom-gallery__dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.22); padding: 0; transition: background .15s, width .15s;
}
.ecom-gallery__dot.is-active { background: var(--ecom-orange, #80C018); width: 22px; border-radius: 4px; }

/* Thumbnail strip — FIXED square thumbs */
.ecom-gallery__thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: thin;
  flex-wrap: wrap;
}
.ecom-gallery__thumb {
	flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border: 1px solid var(--ecom-border, #e6ece0);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    padding: 0;
    transition: border-color .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ecom-gallery__thumb.is-active { border-color: var(--ecom-orange, #80C018); }
.ecom-gallery__thumb > img {
  width: 100%; height: 100%;
  object-fit: contain;            /* thumbs also contained, not stretched */
  padding: 6px; display: block;
}

/* Tablet / mobile — smaller fixed sizes */
@media (max-width: 1024px) {
  .ecom-gallery__main { height: 380px; }
}
@media (max-width: 640px) {
  .ecom-gallery__main { height: 300px; }
  .ecom-gallery__main > img { padding: 16px; }
  .ecom-gallery__thumb { width: 64px; height: 64px; }
  .ecom-gallery__nav { width: 36px; height: 36px; font-size: 14px; }
}


/* Hide dots when there are many images — thumbnails already show position.
   Add class .has-many on the dots container from Alpine (images.length > 6). */
.ecom-gallery__dots.is-hidden { display: none !important; }

/* Keep dots compact even with several images */
.ecom-gallery__dots {
  max-width: 70%;
  margin-inline: auto;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Thumbnail strip — smooth scroll + snap so active thumb lands cleanly */
.ecom-gallery__thumbs {
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}
.ecom-gallery__thumb { scroll-snap-align: start; }

/* Nice thin scrollbar for the strip (webkit) */
.ecom-gallery__thumbs::-webkit-scrollbar { height: 6px; }
.ecom-gallery__thumbs::-webkit-scrollbar-thumb {
  background: var(--ecom-border, #e6ece0); border-radius: 3px;
}
.ecom-gallery__thumbs::-webkit-scrollbar-thumb:hover {
  background: var(--ecom-orange, #80C018);
}/* ═══ PDP GALLERY — polish for MANY images (append/replace dots + thumbs rules) ═══ */

/* Hide dots when there are many images — thumbnails already show position.
   Add class .has-many on the dots container from Alpine (images.length > 6). */
.ecom-gallery__dots.is-hidden { display: none !important; }

/* Keep dots compact even with several images */
.ecom-gallery__dots {
  max-width: 70%;
  margin-inline: auto;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Thumbnail strip — smooth scroll + snap so active thumb lands cleanly */
.ecom-gallery__thumbs {
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}
.ecom-gallery__thumb { scroll-snap-align: start; }

/* Nice thin scrollbar for the strip (webkit) */
.ecom-gallery__thumbs::-webkit-scrollbar { height: 6px; }
.ecom-gallery__thumbs::-webkit-scrollbar-thumb {
  background: var(--ecom-border, #e6ece0); border-radius: 3px;
}
.ecom-gallery__thumbs::-webkit-scrollbar-thumb:hover {
  background: var(--ecom-orange, #80C018);
}/* ═══ PDP GALLERY — polish for MANY images (append/replace dots + thumbs rules) ═══ */

/* ═══ PDP GALLERY — polish for MANY images (append/replace dots + thumbs rules) ═══ */

/* Hide dots when there are many images — thumbnails already show position.
   Add class .has-many on the dots container from Alpine (images.length > 6). */
.ecom-gallery__dots.is-hidden { display: none !important; }

/* Keep dots compact even with several images */
.ecom-gallery__dots {
  max-width: 70%;
  margin-inline: auto;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Thumbnail strip — smooth scroll + snap so active thumb lands cleanly */
.ecom-gallery__thumbs {
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}
.ecom-gallery__thumb { scroll-snap-align: start; }

/* Nice thin scrollbar for the strip (webkit) */
.ecom-gallery__thumbs::-webkit-scrollbar { height: 6px; }
.ecom-gallery__thumbs::-webkit-scrollbar-thumb {
  background: var(--ecom-border, #e6ece0); border-radius: 3px;
}
.ecom-gallery__thumbs::-webkit-scrollbar-thumb:hover {
  background: var(--ecom-orange, #80C018);
}