/* Buying Guides Hub — page layer on top of site.css.
   Sizes are measured from the design scaled to 1280 px wide (content width 1160 px, compact sections). */
#main { --container: 1160px; }
.hub-list { list-style: none; padding: 0; margin: 0; }
.hub-circle { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #edf3f0; color: var(--teal-800); }
.hub-circle .icon { width: 15px; height: 15px; }
#main .ph { word-break: normal; overflow-wrap: anywhere; }

/* ---------- Hero: full-bleed still life, copy left, script top right ---------- */
.hub-hero .hero__bg img { object-position: 50% 100%; }
.hub-hero.hero--bleed .hero__bg::after { background: linear-gradient(90deg, rgba(250, 252, 249, .95) 0%, rgba(250, 252, 249, .86) 36%, rgba(250, 252, 249, .3) 50%, rgba(250, 252, 249, 0) 58%); }
.hub-hero.hero--bleed .hero__inner { min-height: 0; padding-block: .45rem 1.15rem; }
.hub-hero .hero__copy { max-width: 640px; }
.hub-hero .breadcrumb { font-size: .72rem; margin-bottom: .3rem; }
.hub-hero .eyebrow { font-size: .8rem; letter-spacing: .16em; margin-bottom: .25rem; }
.hub-hero .hero__title { font-size: clamp(2rem, 1.1rem + 2.9vw, 2.95rem); line-height: 1.1; margin-bottom: .3em; color: var(--teal-800); }
.hub-hero .hero__lead { font-size: .9rem; line-height: 1.32; max-width: 28.6rem; margin: 0; color: var(--ink); }
.hub-hero .hero__actions { margin-top: 1rem; }
.hub-hero .btn--lg { min-height: 42px; padding: .5rem 1.6rem; font-size: 1rem; }
.hub-script { font-size: 2.35rem; line-height: .98; color: var(--teal-800); transform: rotate(-14deg); top: .9rem; right: clamp(1rem, 5vw, 4.25rem); padding: .6rem 1.1rem .9rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .78) 55%, rgba(255, 255, 255, 0) 100%); text-shadow: 0 0 6px #fff, 0 0 2px #fff; }
.hub-script > span { display: block; }
.hub-script > span:nth-child(2) { padding-left: .5em; }
.hub-script > span:nth-child(3) { padding-left: .1em; }
.hub-script > span:nth-child(4) { padding-left: 1.6em; }
.hub-script > span:nth-child(4)::after { content: ""; display: block; width: 3.4em; height: 3px; margin: .12em 0 0 -.2em; border-radius: 3px; background: var(--green-600); transform: rotate(-6deg); }
@media (min-width: 1100px) { .hub-hero .hero__copy { padding-left: 72px; max-width: 712px; } }
@media (max-width: 899px) {
  .hub-hero.hero--bleed .hero__bg { height: 210px; }
  .hub-hero .hero__bg img { object-position: 80% 92%; }
  .hub-hero.hero--bleed .hero__bg::after { background: linear-gradient(180deg, rgba(250, 252, 249, 0) 60%, rgba(250, 252, 249, 1) 100%); }
  .hub-hero .hero__lead { font-size: .95rem; line-height: 1.5; }
}

/* ---------- Trust strip: big filled icons, three columns with rules ---------- */
.bg-trust { border-top: 0; background: linear-gradient(90deg, #eef5eb, #f3f8f1 50%, #eef5eb); }
.bg-trust .trust-strip__list { padding-block: .8rem; gap: .75rem; }
.bg-trust .trust-item { gap: 1.05rem; }
.bg-trust .trust-item__icon { width: 44px; height: 44px; background: none; box-shadow: none; color: var(--green-600); border-radius: 0; }
.bg-trust .trust-item__icon .icon { width: 40px; height: 40px; }
.bg-trust .trust-item__title { font-size: .8rem; font-weight: 600; }
.bg-trust .trust-item__text { font-size: .7rem; line-height: 1.4; color: var(--text); margin-top: .1rem; }
@media (min-width: 900px) {
  .bg-trust .trust-strip__list { grid-template-columns: 1fr 1.08fr 1fr; gap: 0; padding-inline: 16px 0; }
  .bg-trust .trust-strip__list > li + li { padding-left: 2.2rem; }
  .bg-trust .trust-strip__list > li { padding-right: .6rem; }
}

/* ---------- Leafy page background and compact sections ---------- */
.bg-leafy { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(232, 243, 228, .7), #fff 6%, #fff 94%, rgba(232, 243, 228, .7)); }
.bg-leafy::before, .bg-leafy::after { content: ""; position: absolute; width: 150px; height: 150px; background: url("../../images/deco-leaves.svg") center / contain no-repeat; opacity: .16; pointer-events: none; }
.bg-leafy::before { left: -52px; top: 34%; transform: rotate(20deg); }
.bg-leafy::after { right: -52px; top: 58%; transform: scaleX(-1) rotate(10deg); }
.bg-sec { position: relative; z-index: 1; padding-top: .85rem; }
.bg-sec--first { padding-top: 1rem; }
.bg-sec--last { padding-bottom: 1rem; }
.bg-head { align-items: center; margin-bottom: .55rem; gap: .25rem 1.5rem; }
.hub-h2 { margin: 0; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.4rem); line-height: 1.25; color: var(--teal-800); }
.bg-viewall { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; color: var(--teal-800); text-decoration: none; white-space: nowrap; }
.bg-viewall .icon { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease); }
.bg-viewall:hover { color: var(--green-700); }
.bg-viewall:hover .icon { transform: translateX(3px); }
#main .bg-leafy .card { border-radius: 10px; border-color: #e6ece9; box-shadow: 0 2px 8px rgba(15, 47, 54, .06); }
#main .bg-leafy .card__title { font-weight: 600; color: var(--ink); }
.bg-btn { min-height: 27px; padding: .2rem 1rem; border-radius: 5px; font-size: .76rem; gap: .45rem; }

/* ---------- Categories: 6 cards, wide inset photo, copy left + arrow right ---------- */
.bg-cats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .bg-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bg-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 13px; } }
.bg-cat { padding: 4px; }
.bg-cat .card__media { aspect-ratio: 2 / 1; border-radius: 7px; }
.bg-cat .card__body { flex-direction: row; align-items: center; justify-content: space-between; gap: .25rem; padding: .5rem .2rem .45rem .5rem; }
.bg-cat .card__title { font-size: .73rem; line-height: 1.22; margin-bottom: .2rem; }
.bg-cat .card__text { font-size: .6rem; line-height: 1.38; color: var(--text); }

/* ---------- Featured: 3 wide cards, photo right, copy + orange button left ---------- */
.bg-feats { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .bg-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; } }
.bg-feat { min-height: 168px; justify-content: center; }
.bg-feat__img { position: absolute; inset: 0 0 0 28%; overflow: hidden; }
.bg-feat__img img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transition: transform .5s var(--ease); }
.bg-feat__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .92) 24%, rgba(255, 255, 255, .35) 44%, rgba(255, 255, 255, 0) 58%); }
.bg-feat:hover .bg-feat__img img { transform: scale(1.03); }
.bg-feat .card__body { position: relative; flex: none; max-width: 57%; gap: .3rem; padding: .7rem .5rem .75rem .95rem; }
.bg-feat .card__title { font-size: 1.03rem; font-weight: 700; line-height: 1.12; margin-top: .1rem; }
.bg-feat .card__text { font-size: .7rem; line-height: 1.36; color: var(--ink); }
.bg-feat .bg-btn { align-self: flex-start; margin-top: .3rem; }
.bg-pill { align-self: flex-start; display: inline-block; padding: .2rem .5rem; border-radius: 4px; background: #3d9b35; color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.bg-pill--teal { background: #2a8ea6; }
.bg-pill--violet { background: #6a4fc0; }
@media (max-width: 1099px) and (min-width: 1000px) { .bg-feat .card__body { max-width: 66%; } }

/* ---------- Popular: 6 small horizontal cards in one row ---------- */
.bg-pops { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .bg-pops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bg-pops { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } }
.bg-pop { flex-direction: row; align-items: stretch; padding: 5px; min-height: 78px; }
.bg-pop .card__media { flex: 0 0 66px; height: 66px; aspect-ratio: auto; border-radius: 6px; align-self: center; }
.bg-pop .card__body { padding: .25rem .2rem .05rem .6rem; gap: .2rem; justify-content: space-between; }
.bg-pop .card__title { font-size: .66rem; line-height: 1.3; }
.bg-pop__go { align-self: flex-end; width: 20px; height: 20px; }
.bg-pop__go .icon { width: 11px; height: 11px; }

/* ---------- Shop by goal: 5 cards with big colourful icons ---------- */
.bg-goals { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .bg-goals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bg-goals { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } }
.bg-goal { flex-direction: row; align-items: center; gap: .7rem; padding: .7rem .5rem .7rem .75rem; min-height: 80px; }
.bg-goal__icon { flex: none; width: 48px; height: 48px; }
.bg-goal .card__title { font-size: .78rem; line-height: 1.25; margin-bottom: .15rem; }
.bg-goal .card__text { font-size: .66rem; line-height: 1.35; color: var(--text); }
.bg-goal__chev { flex: none; width: 16px; height: 16px; color: var(--ink); margin-left: auto; }

/* ---------- Products: 5 cards, image left, name, stars, button ---------- */
.bg-prods__note { margin: -.35rem 0 .5rem; font-size: .7rem; line-height: 1.4; color: var(--muted); }
.bg-prods__note a { color: var(--teal-800); }
.bg-prods { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .bg-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .bg-prods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bg-prods { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } }
.bg-prod { flex-direction: row; align-items: center; gap: .55rem; padding: .45rem .7rem .45rem .45rem; min-height: 99px; }
.bg-prod__img { flex: 0 0 78px; height: 86px; overflow: hidden; }
.bg-prod__img img { width: 100%; height: 100%; object-fit: contain; }
.bg-prod__img--zoom img { object-fit: cover; object-position: 50% 62%; transform: scale(1.45); transform-origin: 50% 62%; }
.bg-prod__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.bg-prod .card__title { font-size: .68rem; line-height: 1.28; }
.bg-prod .rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; font-size: .6rem; line-height: 1.35; }
.bg-prod .stars .icon { width: 10px; height: 10px; }
.bg-prod .bg-btn { min-height: 22px; padding: .1rem .5rem; font-size: .64rem; border-radius: 5px; margin-top: .15rem; }

/* ---------- Latest articles: 5 horizontal cards ---------- */
.bg-arts { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .bg-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .bg-arts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bg-arts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; } }
.bg-art { flex-direction: row; align-items: center; padding: 6px; min-height: 78px; }
.bg-art .card__media { flex: 0 0 72px; height: 64px; aspect-ratio: auto; border-radius: 6px; }
.bg-art .card__body { padding: .1rem .1rem .1rem .5rem; gap: .2rem; }
.bg-art .card__title { font-size: .66rem; line-height: 1.3; }
.bg-art .card__meta { gap: 0 .3rem; font-size: .6rem; line-height: 1.35; }

/* ---------- How we create: leafy mint band, 4 steps with arrows ---------- */
.bg-process { position: relative; overflow: hidden; padding-block: .45rem .7rem; background: linear-gradient(180deg, #eaf4e6, #f2f8ef); }
.bg-process::before, .bg-process::after { content: ""; position: absolute; bottom: -10px; width: 110px; height: 110px; background: url("../../images/deco-leaves.svg") center / contain no-repeat; pointer-events: none; }
.bg-process::before { left: -14px; }
.bg-process::after { right: -14px; transform: scaleX(-1); }
.bg-process .container { position: relative; z-index: 1; }
.bg-process__title { font-size: clamp(1.15rem, 1rem + .6vw, 1.3rem); margin: 0 0 .35rem; color: var(--teal-800); }
.hub-steps { gap: 1rem; }
.hub-steps .step { gap: .7rem; align-items: center; }
.hub-steps .step__icon { width: 46px; height: 46px; background: var(--green-600); color: #fff; box-shadow: 0 0 0 3px #cfe6c7; }
.hub-steps .step__icon .icon { width: 24px; height: 24px; }
.hub-steps .step h3 { font-size: .78rem; margin: 0 0 .1rem; color: var(--teal-800); }
.hub-steps .step p { font-size: .62rem; line-height: 1.4; color: var(--text); }
@media (min-width: 1000px) {
  .hub-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem; padding-inline: 8px 0; }
  .hub-steps .step { position: relative; }
  .hub-steps .step:not(:last-child)::after { content: ""; position: absolute; right: -2rem; top: 50%; width: 22px; height: 14px; margin-top: -7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='%2301545b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h19M14 1l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
}

/* ---------- Newsletter: dark teal band ---------- */
.bg-news { padding-block: .6rem .55rem; background: linear-gradient(90deg, #0c5b55 0%, #0a4a4b 55%, #0c5754 100%); }
.bg-news::before, .bg-news::after { content: ""; position: absolute; top: 50%; width: 92px; height: 92px; margin-top: -46px; background: url("../../images/deco-leaves.svg") center / contain no-repeat; opacity: .55; pointer-events: none; }
.bg-news::before { left: -18px; }
.bg-news::after { right: -18px; transform: scaleX(-1); }
.bg-news .community__inner { position: relative; z-index: 1; gap: 1rem 2.5rem; }
@media (min-width: 900px) { .bg-news .community__inner { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); padding-inline: 58px 40px; } }
.bg-news__copy { display: flex; gap: 1rem; align-items: center; }
.bg-news__icon { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--green-600); color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.bg-news__icon .icon { width: 26px; height: 26px; }
.bg-news h2 { font-size: clamp(1.05rem, 1rem + .4vw, 1.15rem); margin: 0 0 .15rem; }
.bg-news p { font-size: .72rem; }
.bg-news .inline-form { gap: 0; flex-wrap: wrap; }
.bg-news .inline-form .input-wrap { flex: 1 1 160px; min-width: 0; }
.bg-news .inline-form .form-status { flex-basis: 100%; margin: .3rem 0 0; }
.bg-news .inline-form input[type="email"] { height: 40px; min-height: 40px; padding: 0 2.9rem 0 1rem; border-radius: var(--radius-pill); font-size: .85rem; }
.bg-news .inline-form .btn { height: 40px; min-height: 40px; padding: 0 1.3rem; margin-left: -2.5rem; border-radius: var(--radius-pill); font-size: .85rem; position: relative; }
.bg-news .inline-form .form-status:empty { display: none; }
.bg-news .check-inline { margin-top: .25rem; font-size: .66rem; }
@media (max-width: 420px) { .bg-news .inline-form { flex-wrap: wrap; gap: .5rem; } .bg-news .inline-form input[type="email"] { border-radius: var(--radius-pill); } .bg-news .inline-form .btn { margin-left: 0; width: 100%; } }

/* ---------- Small screens: keep decorations out of the copy ---------- */
@media (max-width: 1199px) { .bg-process::before, .bg-process::after { display: none; } }
@media (max-width: 899px) { .bg-news::before, .bg-news::after { opacity: .3; } }
@media (max-width: 479px) {
  .bg-goal { gap: .55rem; padding: .6rem .6rem .6rem .65rem; }
  .bg-goal__icon { width: 38px; height: 38px; }
  .bg-goal__chev { display: none; }
}