/* ===== 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);} }