/* CAREpharma homepage layout. Depends on root.css tokens + style.css base. */

.cp-section { padding-block: var(--space-section); }
.cp-center { text-align: center; }
.cp-lead { font-size: var(--fs-body); color: var(--color-grey-400); margin-top: var(--space-16); max-width: 760px; margin-inline: auto; }
.cp-eyebrow { color: var(--color-primary); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-small-2); margin-bottom: var(--space-8); }
/* brown accent eyebrow (about + expertise) — double class beats section-scoped p colours */
.cp-eyebrow.cp-eyebrow--accent { color: var(--color-secondary-ink); margin-bottom: 0; }

/* ===== Hero ===== */
.cp-hero {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  min-height: 594px;
  background: url("../../images/carepharma-life/home-page/hero-l.webp") center/cover no-repeat;
  overflow: hidden;
}
.cp-hero__text {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24);
  padding: 96px var(--space-64) 64px var(--space-edge);
}
.cp-hero__text h1 { color: var(--color-white); }
.cp-hero__sub { color: var(--color-grey-50); max-width: 42ch; }
.cp-hero__visual { position: relative; flex: 0 0 620px; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.cp-hero__splash { width: 92%; max-width: 620px; height: auto; }

/* ===== Photo strip ===== */
.cp-photostrip { background: var(--color-primary); padding: var(--space-32) 0; }
.cp-photostrip__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); max-width: 1180px; margin: 0 auto; padding-inline: var(--space-edge); }
.cp-photostrip img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius-24); }

/* ===== What is CAREpharma ===== */
.cp-intro { background:  url("../../images/carepharma-life/home-page/about-bg-l.webp") center/cover no-repeat; }
.cp-intro h2 { color: var(--color-primary); }
.cp-intro__lead { margin-bottom: var(--space-32); color: var(--color-grey-500) ; }
.cp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); margin-bottom: var(--space-32); }
.cp-feature { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-16); padding: var(--space-32); border-radius: var(--radius-12); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); 
  border: 1px solid rgb(255 255 255 / 29%);
  box-shadow: 0 8px 32px rgb(163 163 163 / 10%), inset 10px 8px 13px 0px rgb(208 208 208 / 69%), inset -10px -7px 13px 0px rgb(255 255 255 / 90%);   
}
.cp-feature__icon { width: 80px; height: 80px; }
.cp-feature h3 { font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--color-primary); margin: 0; }
.cp-feature p { color: var(--color-grey-500); font-size: var(--fs-small); }

/* ===== Quote section ===== */
.cp-quote-sec { background: var(--color-bg-02); }
.cp-quote { margin: 0 0 var(--space-32); text-align: center; font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: 1.2; color: var(--color-grey-500); }
.cp-quote__hl { color: var(--color-primary); }
.cp-quote__mark { color: var(--color-primary-soft); }
.cp-twocards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); margin-bottom: var(--space-32); }
.cp-card { 
  padding: var(--space-32);
    border-radius: var(--radius-12);
    background: rgb(247 249 251);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgb(163 163 163 / 10%), inset 10px 8px 13px 0px rgb(233 233 233 / 89%), inset -10px -7px 13px 0px rgb(255 255 255 / 90%);
}
.cp-card h3 { color: var(--color-primary); font-size: var(--fs-body); font-weight: var(--fw-regular); margin-bottom: var(--space-8); }
.cp-card p { color: var(--color-grey-500); font-size: var(--fs-small); }

/* ===== Core ingredients ===== */
.cp-ingredients { position: relative; color: #fff; background: url("../../images/carepharma-life/home-page/ingredients-library-bg-l.webp") center/cover no-repeat; }
.cp-ingredients .cp-eyebrow { color: #fff; font-size: var(--fs-body); font-weight: var(--fw-regular); letter-spacing: .04em; margin-bottom: var(--space-32); }
.cp-ingredients h2 { color: #fff; font-size: var(--fs-h1); }
.cp-ingredients .cp-lead { color: #fff; }
.cp-ing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-24); margin: var(--space-32) 0; }
.cp-ing-card { background: #fff; border-radius: var(--radius-12); padding: var(--space-24); }
.cp-ing-card h3 { color: var(--color-grey-500); font-size: var(--fs-h3); margin: 0 0 var(--space-4); }
.cp-ing-card__desc { color: var(--color-grey-500); font-size: var(--fs-small); margin: 0 0 var(--space-16); }
.cp-ing-card__label { text-transform: uppercase; font-size: var(--fs-small); color: var(--color-primary); font-weight: var(--fw-regular); margin: 0; }
.cp-ing-card__moa { color: var(--color-grey-500); font-size: var(--fs-small); margin: 0 0 var(--space-16); }
.cp-ing-card__stat { background: var(--color-primary-50); border-radius: var(--radius-12); padding: var(--space-8) var(--space-16); font-size: var(--fs-small); color: var(--color-grey-500); margin: 0; }

/* ===== Benefits ===== */
.cp-benefits { position: relative; color: #fff; background: #01727d url("../../images/carepharma-life/home-page/ingredient-categories-bg-l.webp") center bottom/cover no-repeat; overflow: hidden; padding-block: var(--space-32) 0; border-bottom: 1px solid #c2e4e6; }
.cp-benefits .cp-container { position: relative; z-index: 1; padding-bottom: 190px; }
.cp-benefits__panel { display: flex; gap: var(--space-32); align-items: center; background: rgba(255,255,255,.2); border-radius: var(--radius-24); padding: var(--space-64); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); 
box-shadow: 0 8px 32px rgb(163 163 163 / 10%), inset 10px 8px 20px 0px rgb(0 103 112 / 68%), inset -10px -7px 20px 0px rgb(255 255 255 / 39%)
}
.cp-benefits__grid { flex: 0 0 auto; width: 604px; max-width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-8); }
.cp-cat { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; }
.cp-cat__icon { width: 90px; height: 90px; }
.cp-cat__icon img { width: 90px; height: 90px; display: block; }
.cp-cat__label { font-size: var(--fs-small-2); color: #fff; line-height: 1.4; }
.cp-benefits__copy { flex: 1 1 0; min-width: 0; }
.cp-benefits__copy h2 { color: #fff; font-size: var(--fs-h2); }
.cp-benefits__copy p { color: #fff; font-size: var(--fs-small); margin-top: var(--space-16); }

/* ===== Process ===== */
.cp-process { position: relative; background: var(--color-bg-02); overflow: hidden; }
.cp-process::before { content: ""; position: absolute; inset: 0; background: url("../../images/carepharma-life/home-page/formulation-process-bg-l.webp") center/cover no-repeat; opacity: .65; z-index: 0; pointer-events: none; }
.cp-process .cp-container { position: relative; z-index: 1; }
.cp-process h2 { font-size: var(--fs-h1); }
.cp-steps { list-style: none; margin: var(--space-32) 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); }
.cp-step { 
  padding: var(--space-32);
  border-radius: var(--radius-12);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border: 1px solid rgb(255 255 255 / 8%);
  box-shadow: 0 8px 32px rgb(163 163 163 / 10%), inset 9px 8px 8px 0px rgb(228 228 228), inset -10px -7px 11px 0px rgb(255 255 255 / 69%);
}
.cp-step__num { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-weight: var(--fw-regular); font-size: var(--fs-body); margin-bottom: var(--space-16); }
.cp-step h3 { font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--color-primary); margin: 0 0 var(--space-4); }
.cp-step p { color: var(--color-grey-500); font-size: var(--fs-small); margin: 0; }

/* ===== US map ===== */
.cp-usamap { background: #005b64; color: #fff; }
.cp-usamap h2 { color: #fff; font-size: var(--fs-h2); }
.cp-usamap__sub { color: #fff; font-size: var(--fs-small); margin-top: var(--space-16); }
.cp-usamap__img { display: block; width: 100%; max-width: 974px; height: auto; margin: var(--space-32) auto 0; }

/* ===== Comparison table ===== */
.cp-compare-sec h2 { font-size: var(--fs-h1); }
.cp-compare { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: var(--space-32) 0; border: 1px solid var(--color-grey-100); border-radius: var(--radius-24); overflow: hidden; }
.cp-compare th, .cp-compare td { width: 33.33%; padding: var(--space-16); text-align: left; vertical-align: middle; font-size: var(--fs-small); }
/* header row */
.cp-compare thead th { background: var(--color-grey-100); color: var(--color-grey-300); font-weight: var(--fw-medium); font-size: var(--fs-body); }
.cp-compare thead th.cp-compare__hl { background: var(--color-primary); color: #fff; }
/* body — column striped */
.cp-compare tbody th { background: var(--color-grey-50); color: var(--color-grey-500); font-weight: var(--fw-medium); font-size: var(--fs-body); }
.cp-compare td.cp-compare__hl { background: var(--color-primary-50); color: var(--color-primary); }
.cp-compare td.cp-compare__neg { background: var(--color-grey-50); color: var(--color-grey-300); }
.cp-compare tbody tr + tr th, .cp-compare tbody tr + tr td { border-top: 2px solid #fff; }
.cp-yes { color: var(--color-primary); margin-right: 8px; }
.cp-no { color: var(--color-grey-300); margin-right: 8px; }
.cp-who { display: none; font-weight: var(--fw-medium); }

/* Comparison table -> stacked cards on mobile */
@media (max-width: 767.98px) {
  .cp-compare, .cp-compare tbody, .cp-compare tr, .cp-compare th, .cp-compare td { display: block; width: auto; }
  .cp-compare { border: 0; border-radius: 0; overflow: visible; }
  .cp-compare thead { display: none; }
  .cp-compare tbody tr { background: var(--color-grey-50); border-radius: var(--radius-12); padding: var(--space-16); margin-bottom: var(--space-16); }
  .cp-compare tbody tr + tr th, .cp-compare tbody tr + tr td { border-top: 0; }
  .cp-compare tbody th { background: transparent; padding: 0 0 var(--space-16); font-size: var(--fs-body); font-weight: var(--fw-bold); }
  .cp-compare td { padding: var(--space-8) var(--space-16); border-radius: var(--radius-12); }
  .cp-compare td.cp-compare__hl { background: var(--color-primary-50); margin-bottom: var(--space-8); }
  .cp-compare td.cp-compare__neg { background: transparent; }
  .cp-who { display: inline; }
}

/* ===== Bestsellers ===== */
.cp-bestsellers { position: relative; background: var(--color-bg-02); overflow: hidden; }
.cp-bestsellers h2 { font-size: var(--fs-h1); }
.cp-bestsellers::before { content: ""; position: absolute; inset: 0; background: url("../../images/carepharma-life/home-page/section-bestsellers-l.webp") center/cover no-repeat; z-index: 0; }
.cp-bestsellers::after { content: ""; position: absolute; inset: 0; background: rgba(247,249,251,.6); z-index: 0; }
.cp-bestsellers .cp-container { position: relative; z-index: 1; }
.cp-best-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); margin: var(--space-32) 0; align-items: stretch; }
.cp-best-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); background: #fff; border-radius: var(--radius-12); padding: var(--space-24); }
.cp-best-card__badge { display: inline-flex; align-items: center; padding: 4px 16px; border-radius: var(--radius-pill); color: #fff; font-size: var(--fs-body); }
.cp-best-card__badge--1 { background: linear-gradient(125deg, #ff77af 26%, #e876aa 30%, #6f7592 50%, #237583 64%, #06757e 69%); }
.cp-best-card__badge--2 { background: linear-gradient(90deg, #e3ff00, #01727c); }
.cp-best-card__badge--3 { background: linear-gradient(123deg, #d50406 19%, #91272c 35%, #455057 54%, #166972 68%, #04737d 75%); }
.cp-best-card h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-grey-500); margin: 0; }
.cp-best-card__block { width: 100%; }
.cp-best-card__label { color: var(--color-primary); font-size: var(--fs-small); margin: 0; }
.cp-best-card__block p + p { color: var(--color-grey-500); font-size: var(--fs-small); margin: 0; }
.cp-best-card__stat { width: 100%; background: var(--color-primary-50); color: var(--color-grey-500); border-radius: var(--radius-12); padding: var(--space-8); font-size: var(--fs-small); margin: 0; }
.cp-best-card__stat-hl { color: var(--color-primary); }

/* ===== FAQ ===== */
.cp-faq-sec { background: #fff; }
.cp-faq-sec h2 { color: var(--color-primary); font-weight: var(--fw-medium); }
.cp-faq { max-width: 1140px; }
.cp-faq__item { border-bottom: 1px solid var(--color-primary-50); padding: var(--space-16); }
.cp-faq__item:last-of-type { border-bottom: 0; }
.cp-faq__item summary { cursor: pointer; font-weight: var(--fw-medium); font-size: var(--fs-body); color: var(--color-primary); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); }
.cp-faq__item summary::-webkit-details-marker { display: none; }
.cp-faq__item summary::after { content: ""; flex: 0 0 24px; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2301727c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .2s; }
.cp-faq__item[open] summary::after { transform: rotate(180deg); }
.cp-faq__item p { margin-top: 10px; color: var(--color-grey-500); font-weight: var(--fw-light); font-size: var(--fs-small); line-height: 1.5; }
.cp-faq__item:first-of-type { margin-top: var(--space-32); }

/* ===== Responsive ===== */
/* Tablet/small-desktop: hero text was squeezed by the fixed 620px visual */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .cp-hero__visual { flex: 1 1 0; }
  .cp-hero__splash { width: 100%; max-width: 460px; }
  .cp-hero__text { padding-right: var(--space-32); }
  .cp-hero__text h1, .cp-hero__sub { max-width: none; }
}
@media (max-width: 991.98px) {
  .cp-section { padding-block: 56px; }
  .cp-hero { flex-direction: column-reverse; min-height: 0; }
  .cp-hero__text { padding: 24px var(--space-edge) 48px; align-items: flex-start; text-align: left; }
  .cp-hero__text h1 { color: var(--color-white); max-width: none; }
  .cp-hero__sub { color: var(--color-white); max-width: none; }
  .cp-hero__visual { flex: 0 0 auto; width: 100%; height: auto; padding-top: var(--space-24); overflow: hidden; }
  .cp-hero__splash { width: auto; max-width: none; height: 450px; margin: 0 auto; }
  .cp-hero__text .btn-care { align-self: center; }
  .cp-photostrip { padding: var(--space-16) 0; }
  .cp-photostrip__inner {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-8);
    padding-inline: var(--space-16);
    scroll-padding-inline: var(--space-16);
  }
  .cp-photostrip__inner::-webkit-scrollbar { display: none; }
  .cp-photostrip img { flex: 0 0 37%; scroll-snap-align: start; height: 240px; }
  .cp-features { grid-template-columns: 1fr; gap: var(--space-16); }
  .cp-quote { font-size: 28px; }
  .cp-twocards { grid-template-columns: 1fr; gap: var(--space-16); }
  .cp-ing-grid { grid-template-columns: 1fr; gap: var(--space-16); }
  .cp-benefits__panel { flex-direction: column; padding: var(--space-32); }
  .cp-benefits__grid { width: 100%; max-width: 360px; margin-inline: auto; grid-template-columns: repeat(3, 1fr); }
  .cp-benefits .cp-container { padding-bottom: 140px; }
  .cp-steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
  .cp-best-grid { grid-template-columns: 1fr; gap: var(--space-16); }
}
@media (max-width: 575.98px) {
  :root { --fs-h1: 28px; --fs-h2: 24px; --fs-h3: 18px; --fs-body: 14px; --fs-small: 14px; }
  .cp-section { padding-block: var(--space-32); }
  .cp-hero__splash { height: 450px; }
  .cp-photostrip img { flex-basis: 37%; height: 200px; }
  .cp-cat__icon, .cp-cat__icon img { width: 72px; height: 72px; }
  .cp-steps { grid-template-columns: 1fr; }
  .cp-quote { font-size: 28px; }
  .cp-feature h3 { font-size: 18px; }
  .cp-card h3 { font-size: 18px; }
  .cp-ing-card h3 { font-size: 20px; }
  .cp-step h3 { font-size: 18px; }
  .cp-lead { font-size: 12px; }
  .cp-faq__item { padding: var(--space-16) 0px; }
}

/* ===== Responsive background images (use -m / -s variants) ===== */
@media (max-width: 991.98px) {
  .cp-hero { background-image: linear-gradient(to bottom, rgba(0,40,45,0) 42%, rgba(0,52,57,.6) 100%), url("../../images/carepharma-life/home-page/hero-m.webp"); }
  .cp-intro { background-image: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.62)), url("../../images/carepharma-life/home-page/about-bg-m.webp"); }
  .cp-ingredients { background-image: url("../../images/carepharma-life/home-page/ingredients-library-bg-m.webp"); }
  .cp-benefits { background-image: url("../../images/carepharma-life/home-page/ingredient-categories-bg-m.webp"); }
  .cp-process::before { background-image: url("../../images/carepharma-life/home-page/formulation-process-bg-m.webp"); }
  .cp-bestsellers::before { background-image: url("../../images/carepharma-life/home-page/section-bestsellers-m.webp"); }
}
@media (max-width: 575.98px) {
  .cp-hero { background-image: linear-gradient(to bottom, rgba(0,40,45,0) 42%, rgba(0,52,57,.6) 100%), url("../../images/carepharma-life/home-page/hero-s.webp"); }
  .cp-intro { background-image: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.62)), url("../../images/carepharma-life/home-page/about-bg-s.webp"); }
  .cp-ingredients { background-image: url("../../images/carepharma-life/home-page/ingredients-library-bg-s.webp"); }
  .cp-benefits { background-image: url("../../images/carepharma-life/home-page/ingredient-categories-bg-s.webp"); }
  .cp-process::before { background-image: url("../../images/carepharma-life/home-page/formulation-process-bg-s.webp"); }
  .cp-bestsellers::before { background-image: url("../../images/carepharma-life/home-page/section-bestsellers-s.webp"); }
  /* every card/box gets 16px padding on mobile */
  .cp-feature, .cp-card, .cp-ing-card, .cp-step, .cp-best-card, .cp-benefits__panel { padding: var(--space-16); }
}