/* ============================================================
   IPOOLGO — Shared section layouts (home + content pages)
   ============================================================ */

/* Split media/text section */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.reverse .split-media { order: 2; } }
.split-body .lead { margin-top: var(--sp-4); }
.split-body .icon-list { margin-top: var(--sp-5); }
.split-body .btn { margin-top: var(--sp-6); }

.media-frame { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); aspect-ratio: 4 / 3; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame.tall { aspect-ratio: 3 / 4; }
.media-badge {
  position: absolute; left: var(--sp-5); bottom: var(--sp-5);
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); box-shadow: var(--sh-md);
  display: flex; align-items: center; gap: var(--sp-3);
}
.media-badge .num { font-family: var(--font-display); font-size: 1.75rem; font-weight: var(--fw-semi); color: var(--c-deep); line-height: 1; }
.media-badge .lbl { font-size: var(--fs-xs); color: var(--c-muted); }

/* Checkmark list */
.icon-list { display: grid; gap: var(--sp-3); }
.icon-list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.icon-list .tick { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(30,158,106,.12); color: var(--c-success); margin-top: 1px; }
.icon-list.on-dark .tick { background: rgba(56,198,224,.18); color: var(--c-aqua); }
.icon-list span { color: var(--c-ink); }
.on-dark .icon-list span, .icon-list.on-dark span { color: rgba(255,255,255,.82); }

/* Steps / process */
.steps { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); counter-reset: step; }
.step { position: relative; padding: var(--sp-6); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.step .step-num { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-semi); font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--c-deep), var(--c-azure)); margin-bottom: var(--sp-4); }
.step h3 { font-family: var(--font-sans); font-size: 1.15rem; font-weight: var(--fw-bold); letter-spacing: 0; margin-bottom: var(--sp-2); }
.step p { color: var(--c-ink); font-size: var(--fs-sm); }

/* Spec table (product) */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.spec-table th { color: var(--c-muted); font-weight: var(--fw-med); width: 45%; }
.spec-table td { color: var(--c-ink); font-weight: var(--fw-semi); }

/* Page hero (interior pages) */
.page-hero { position: relative; background: linear-gradient(135deg, var(--c-deep-900), var(--c-deep) 55%, var(--c-azure)); color: #fff; overflow: hidden; }
.page-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 120% at 85% 10%, rgba(56,198,224,.25), transparent 55%); }
.page-hero .container { position: relative; z-index: 1; padding-block: clamp(3.5rem, 8vw, 6rem); }
.page-hero h1 { color: #fff; font-size: var(--fs-h1); max-width: 20ch; }
.page-hero .lead { color: rgba(255,255,255,.88); margin-top: var(--sp-4); max-width: 55ch; }
.page-hero .breadcrumbs, .page-hero .breadcrumbs a { color: rgba(255,255,255,.7); margin-bottom: var(--sp-4); }
.page-hero .breadcrumbs a:hover { color: #fff; }
.page-hero .breadcrumbs [aria-current] { color: #fff; }

/* Section title alignment helper */
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: clamp(2rem, 4vw, 3rem); }
.head-row .section-head { margin-bottom: 0; }

/* Legal / policy pages */
.legal { max-width: 52rem; }
.legal h2 { font-size: 1.4rem; margin-top: 2.25rem; margin-bottom: .6rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--c-muted); }
.legal p + p, .legal ul { margin-top: 1rem; }
.legal ul { padding-left: 1.25rem; color: var(--c-muted); display: grid; gap: .45rem; }
.legal a { color: var(--c-azure); }

/* ---- Catalog toolbar ---- */
.catalog-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); }
.catalog-toolbar .chips { flex: 1 1 auto; }
.sort-form { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-muted); }
.sort-form select { padding: .55rem .8rem; border: 1.5px solid var(--c-line-2); border-radius: var(--r-md); background: #fff; }
.result-count { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-4); }
.empty-state { text-align: center; padding: var(--sp-9) var(--sp-4); color: var(--c-muted); }

/* ---- Product detail ---- */
.product-layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .product-layout { grid-template-columns: 1.05fr 1fr; } }
.product-gallery .main-img { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md); aspect-ratio: 4 / 3; background: var(--c-mist); }
.product-gallery .main-img img { width: 100%; height: 100%; object-fit: cover; }
.thumb-strip { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); flex-wrap: wrap; }
.thumb { width: 76px; height: 76px; border-radius: var(--r-md); overflow: hidden; border: 2px solid transparent; cursor: pointer; background: var(--c-mist); padding: 0; }
.thumb.is-active { border-color: var(--c-azure); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-collection { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--c-azure); font-weight: var(--fw-semi); }
.p-title { margin: .4rem 0 .5rem; }
.p-rating { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--c-muted); }
.p-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-5) 0; }
.p-price { font-family: var(--font-display); font-size: 2rem; font-weight: var(--fw-semi); color: var(--c-deep); line-height: 1; }
.p-was { text-decoration: line-through; color: var(--c-muted); }
.p-save { background: var(--c-success); color: #fff; padding: .28em .7em; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.p-lead { color: var(--c-muted); font-size: var(--fs-lead); line-height: 1.55; }
.p-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-6) 0 var(--sp-5); }
.p-trust { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.p-trust .trust-item { font-size: var(--fs-xs); }
.stock-pill { display: inline-flex; align-items: center; gap: .45em; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-success); }
.stock-pill.out { color: var(--c-error); }
.stock-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---- Reviews ---- */
.reviews-list { display: grid; gap: var(--sp-4); }
.review { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-xs); }
.review .r-head { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-2); }
.review .r-name { font-weight: var(--fw-bold); }
.review .r-loc { font-size: var(--fs-xs); color: var(--c-muted); }
.review .r-title { font-weight: var(--fw-semi); margin: .3rem 0; }
.review p { color: var(--c-muted); font-size: var(--fs-sm); }