/* newage home: hero carousel, trust bar, products, brands, categories, story, offers, newsletter (from the home mock-up) */
/* ---------- hero carousel ---------- */
/* sits on the page background with no dividing rule — the hairline plus a white
   band made the top of the page read as a separate strip from the rest */
.hero{background:transparent;}
.hero-wrap{position:relative;padding-top:var(--s-tight);padding-bottom:var(--s-tight);}
.carousel{
  position:relative;overflow:hidden;border-radius:5px;background:#e9e5e1;
  aspect-ratio:1312/440;box-shadow:0 24px 60px -40px rgba(32,32,32,.55);
}
.slides{display:flex;height:100%;transition:transform .6s cubic-bezier(.4,.05,.2,1);}
.slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;background:#EFEAE4;}
.slide > img,.slide > picture img{width:100%;height:100%;object-fit:cover;}
/* optional HTML text overlay — only rendered when a slide supplies copy */
.slide-copy{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(26px,4.4vw,60px);max-width:min(680px,62%);
}
/* scrim only when the copy sits over a photo — a plain colour slide needs none */
.slide.has-img .slide-copy::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 58%,rgba(255,255,255,0) 100%);
}
.slide.has-img.dark .slide-copy::before{
  background:linear-gradient(90deg,rgba(24,22,21,.92) 0%,rgba(24,22,21,.74) 58%,rgba(24,22,21,0) 100%);
}
.slide-copy .s-eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--orange-text);margin:0 0 10px;white-space:nowrap;
}
.slide-copy h1,.slide-copy h2{font-size:clamp(28px,3.9vw,52px);text-transform:uppercase;color:var(--charcoal);}
.slide-copy p{
  font-size:clamp(16px,1.35vw,18.5px);line-height:1.5;color:#3b3937;margin:12px 0 0;max-width:40ch;
}
.slide.dark .slide-copy h1,.slide.dark .slide-copy h2{color:#fff;}
.slide.dark .slide-copy p{color:#E4DFDB;}
.slide.dark .slide-copy .s-eyebrow{color:var(--coral);}
.slide-copy .btn{margin-top:clamp(16px,2vw,24px);align-self:flex-start;}
.slide-link{position:absolute;inset:0;z-index:3;}

/* controls */
/* one control cluster in the bottom-right corner, so nothing ever sits on top of
   the slide copy the way centred side-arrows did */
.c-controls{
  position:absolute;right:clamp(14px,1.8vw,24px);bottom:clamp(14px,1.8vw,22px);z-index:6;
  display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);
  border-radius:40px;padding:5px 8px;box-shadow:0 8px 24px -12px rgba(32,32,32,.45);
}
.c-arrow,.c-pause{
  width:40px;height:40px;border-radius:50%;border:0;background:transparent;
  color:var(--charcoal);display:grid;place-items:center;transition:background .22s ease,color .22s ease;
}
.c-arrow:hover,.c-pause:hover{background:var(--orange-cta);color:#fff;}
.c-dots{display:flex;align-items:center;gap:5px;padding:0 4px;}
.c-dots button{width:24px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;}
.c-dots button i{display:block;width:14px;height:4px;border-radius:3px;background:#CFC8C1;transition:background .3s ease,width .3s ease;}
.c-dots button[aria-current="true"] i{background:var(--orange);width:22px;}


/* ---------- trust ---------- */
/* the dark band sits inside the page container so it lines up with every other
   section, rather than bleeding to the edges of the screen */
.trust{background:transparent;padding:0 0 var(--s-tight);}
/* the dark band sits inside the page container so it lines up with every other
   section, rather than bleeding to the edges of the screen */
.trust-in{
  background:var(--dark);color:#EFECE9;border-radius:5px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g-md);
  padding:18px clamp(16px,1.8vw,26px);
}
.stars{display:inline-flex;gap:2px;color:var(--coral);}
.stars svg{width:13px;height:13px;}
.trust-item .rate{display:flex;align-items:center;gap:7px;}
.trust-item .rate b{font-size:15px;font-weight:600;color:#fff;letter-spacing:.01em;}
.gmark{width:19px;height:19px;flex:none;margin-top:1px;}
a.trust-item{transition:opacity .2s ease;}
a.trust-item:hover{opacity:.82;}
a.trust-item:hover .rate b{text-decoration:underline;text-underline-offset:3px;}
.trust-item{display:flex;gap:11px;align-items:center;min-width:0;}
.trust-item .ic{display:contents;}
.trust-item svg{flex:none;color:var(--coral);}
/* both lines are written to fit on one line each — nowrap keeps it that way
   rather than silently reflowing to two lines at awkward widths */
.trust-item b{display:block;font-size:15px;font-weight:600;letter-spacing:.01em;color:#fff;white-space:nowrap;}
.trust-item span{display:block;font-size:14px;color:#C9C3BE;line-height:1.35;white-space:nowrap;}

/* ---------- popular products section (cards live in cards.css) ---------- */
.prods{padding:var(--s-section) 0;border-top:1px solid var(--line);}
.prods-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:var(--s-head);}
.prods-top h2{font-size:clamp(26px,3vw,40px);text-transform:uppercase;}

/* ---------- brand strip ---------- */
.brands{background:var(--white);padding:var(--s-section) 0;border-top:1px solid var(--line);}
.brands .cap{text-align:center;margin-bottom:var(--s-head);}
.brands .cap h2{
  font-family:var(--head);font-size:clamp(22px,2.2vw,30px);text-transform:uppercase;
  letter-spacing:.03em;color:var(--charcoal);margin:0;
}
.brands .cap p{margin:6px 0 0;font-size:16px;color:#4e4c4a;}
.bstrip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(6px,1.4vw,18px);}
.btrack{
  display:flex;align-items:center;gap:var(--g-lg);
  overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding:0;
}
.btrack::-webkit-scrollbar{display:none;}
.blogo{
  flex:0 0 calc((100% - 3 * var(--g-lg)) / 4);
  /* flex (not grid+place-items) so the image's percentage max-height resolves
     against a definite height — in a centred grid cell it resolves to auto and
     the logo blows past the tile. */
  scroll-snap-align:start;display:flex;align-items:center;justify-content:center;
  height:clamp(84px,8.6vw,116px);padding:18px;box-sizing:border-box;overflow:hidden;
  background:var(--offwhite);border:1px solid var(--line);border-radius:4px;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.blogo img{
  /* object-fit:contain guarantees the whole mark fits the tile — percentage
     max-height did not constrain reliably and was cropping logos.
     The padding leaves room for the small per-logo --z nudge (files with heavy
     built-in white margin) without anything being cut off. */
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transform:scale(var(--z,1));transform-origin:center;
  transition:transform .3s ease;
}
.blogo:hover{border-color:#D8D2CC;box-shadow:0 10px 24px -16px rgba(32,32,32,.5);}
.blogo:hover img{transform:scale(calc(var(--z,1) * 1.04));}
.b-arrow{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--charcoal);display:grid;place-items:center;flex:none;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.b-arrow:hover{background:var(--orange-cta);color:#fff;border-color:var(--orange-cta);}
.b-arrow[disabled]{opacity:.3;cursor:default;}
.b-arrow[disabled]:hover{background:#fff;color:var(--charcoal);border-color:var(--line);}

/* ---------- categories ---------- */
.cats{padding:var(--s-section) 0;}
.cats-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g-md);margin-top:var(--s-head);}
.cat{position:relative;display:block;border-radius:4px;overflow:hidden;background:#e9e5e1;aspect-ratio:1/1;}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.cat:hover img{transform:scale(1.07);}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,18,17,.72) 0%,rgba(20,18,17,.12) 45%,transparent 70%);}
.cat-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.cat-label b{font-family:var(--head);font-size:clamp(17px,1.5vw,20px);letter-spacing:.04em;text-transform:uppercase;color:#fff;font-weight:500;}
.cat-label .chev{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;transition:background .3s ease,transform .3s ease;flex:none;}
.cat:hover .chev{background:var(--orange-cta);transform:translateX(3px);}

/* ---------- why we stock ---------- */
.why{background:var(--white);padding:var(--s-section) 0;border-top:1px solid var(--line);}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g-lg);}
.bcard{background:var(--offwhite);border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s ease,box-shadow .4s ease;}
.bcard:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(32,32,32,.45);}
.bcard .pic{aspect-ratio:700/440;background:#e9e5e1;overflow:hidden;}
.bcard .pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.bcard:hover .pic img{transform:scale(1.05);}
.bcard .body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;}
.bcard .origin{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--orange-text);font-weight:700;}
.bcard h3{font-size:26px;text-transform:uppercase;margin:8px 0 9px;}
.bcard p{margin:0 0 18px;font-size:16px;line-height:1.55;color:#454341;flex:1;}

/* ---------- value band ---------- */
.value{padding:var(--s-section) 0;border-top:1px solid var(--line);}
.value-top{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:var(--s-head);}
.value h2{font-size:clamp(28px,3.2vw,42px);text-transform:uppercase;}
.value .sub{margin:0 0 4px;color:#454341;font-size:17px;line-height:1.55;max-width:56ch;}
.vlist{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g-md);}
.vitem{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:clamp(22px,2.2vw,28px);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;}
.vnum{font-family:var(--head);font-size:36px;line-height:1;color:var(--orange);opacity:.85;}
.vitem h3{font-size:21px;text-transform:uppercase;margin-bottom:5px;}
.vitem p{margin:0;font-size:16px;line-height:1.55;color:#4e4c4a;}

/* ---------- reviews ---------- */
.reviews{background:var(--white);border-top:1px solid var(--line);
  padding:var(--s-section) 0;}
.rev-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:var(--s-head);}
.rev-score{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.rev-score .gmark{width:26px;height:26px;flex:none;}
.stars{display:inline-flex;gap:3px;color:var(--orange);}
.stars svg{width:17px;height:17px;}
.rev-score .val{font-family:var(--head);font-size:30px;line-height:1;}
.rev-score .meta{font-size:15.5px;color:#454341;}
.rev-score .meta b{color:var(--charcoal);font-weight:600;}
.rev-body{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(20px,2.6vw,34px);align-items:stretch;}
.rev-pic{border-radius:6px;overflow:hidden;background:#EFEAE4;min-height:320px;position:relative;
  box-shadow:0 22px 46px -34px rgba(32,32,32,.5);}
.rev-pic img{width:100%;height:100%;object-fit:cover;}
.rev-pic figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 22px 16px;color:#fff;
  font-size:14.5px;line-height:1.45;
  background:linear-gradient(to top,rgba(20,18,17,.82),rgba(20,18,17,0));}
.rev-pic figcaption b{display:block;font-family:var(--head);font-size:19px;font-weight:500;
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:2px;}
.rev-grid{display:grid;gap:var(--g-sm);}
/* stars sit on the attribution line rather than in their own column, so the
   quote gets the full width of the card */
.rcard{background:var(--offwhite);border:1px solid var(--line);border-radius:6px;
  padding:clamp(20px,2.1vw,26px) clamp(20px,2.1vw,26px) clamp(16px,1.7vw,20px);
  position:relative;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;}
.rcard:hover{background:#fff;border-color:#DCD6D0;box-shadow:0 14px 30px -22px rgba(32,32,32,.45);}
.rcard::before{content:"\201C";position:absolute;top:6px;right:18px;font-family:var(--head);
  font-size:56px;line-height:1;color:var(--orange);opacity:.16;}
.rcard p{margin:0 0 14px;font-size:16.5px;line-height:1.6;color:#33302e;position:relative;}
.rcard .who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14.5px;color:#6b6764;}
.rcard .who .stars{gap:2px;}
.rcard .who .stars svg{width:14px;height:14px;}
.rcard .who b{color:var(--charcoal);font-weight:600;}
.rcard .who .gmark{width:15px;height:15px;flex:none;}
.rcard .who .sep{color:#C9C2BB;}
.rev-more{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-text);
  border-bottom:1px solid rgba(255,90,31,.35);padding-bottom:3px;transition:gap .25s ease;}
.rev-more:hover{gap:14px;}
@media(max-width:1080px){ .rev-body{grid-template-columns:1fr;} .rev-pic{min-height:0;aspect-ratio:16/9;} }
@media(max-width:520px){ .rcard{grid-template-columns:1fr;gap:10px;} }

/* ---------- family story ---------- */
.story{background:var(--charcoal);color:#F2EFEC;padding:var(--s-section) 0;}
.story-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,76px);align-items:center;}
.story h2{font-size:clamp(28px,3.3vw,44px);text-transform:uppercase;color:#fff;}
.story p:not(.eyebrow){color:#CFC9C4;font-size:17.5px;line-height:1.6;margin:16px 0 0;max-width:54ch;}
.storyrate{
  display:inline-flex;align-items:center;gap:14px;margin-top:24px;padding:14px 20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:44px;
  transition:background .25s ease,border-color .25s ease;
}
.storyrate:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);}
.storyrate .gmark{width:20px;height:20px;flex:none;}
.storyrate .stars{display:inline-flex;gap:2px;color:var(--coral);}
.storyrate .stars svg{width:15px;height:15px;}
.storyrate .val{font-family:var(--head);font-size:22px;line-height:1;color:#fff;}
.storyrate .txt{font-size:15px;color:#CFC9C4;}
.storyrate .txt b{color:#fff;font-weight:600;}
@media(max-width:520px){ .storyrate{flex-wrap:wrap;border-radius:10px;gap:10px;} }
.story .sig{margin-top:22px;font-family:var(--head);font-size:16.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);}
.storycard{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:4px;padding:clamp(24px,3vw,36px);
}
.storycard .row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.storycard .row:last-child{border-bottom:0;padding-bottom:0;}
.storycard .row:first-child{padding-top:0;}
.storycard svg{flex:none;color:var(--coral);margin-top:3px;}
.storycard b{display:block;font-size:16.5px;color:#fff;font-weight:600;margin-bottom:2px;}
.storycard span{font-size:15px;color:#BEB8B3;line-height:1.5;}

/* ---------- offers ---------- */
.offers{padding:var(--s-section) 0;border-top:1px solid var(--line);}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--g-lg);margin-top:var(--s-head);}
.offer{
  background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;transition:box-shadow .4s ease;
}
.offer:hover{box-shadow:0 24px 46px -30px rgba(32,32,32,.4);}
.offer .pic{background:#e9e5e1;overflow:hidden;min-height:230px;}
.offer .pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.offer:hover .pic img{transform:scale(1.05);}
.offer .body{padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column;justify-content:center;}
.offer .tag{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:#6b6764;font-weight:700;}
.offer h3{font-size:clamp(22px,2.1vw,28px);text-transform:uppercase;margin:9px 0 7px;}
.offer .save{font-family:var(--head);font-size:17.5px;letter-spacing:.04em;color:var(--orange-text);text-transform:uppercase;}
.offer p{font-size:16px;line-height:1.55;color:#4e4c4a;margin:9px 0 16px;}

/* ---------- newsletter ---------- */
.news{background:var(--white);border-top:1px solid var(--line);padding:var(--s-section) 0;}
.news-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
.news h2{font-size:clamp(24px,2.8vw,34px);text-transform:uppercase;}
.news p:not(.eyebrow){margin:11px 0 0;color:#454341;font-size:16.5px;line-height:1.55;max-width:48ch;}
.nform{display:flex;gap:10px;flex-wrap:wrap;}
.nform input{
  flex:1;min-width:230px;padding:16px 20px;border:1px solid var(--line);border-radius:2px;
  font-family:var(--body);font-size:16px;background:var(--offwhite);color:var(--charcoal);outline:none;
  transition:border-color .25s ease,background .25s ease;
}
.nform input:focus{border-color:var(--orange);background:#fff;}
.nfine{font-size:13.5px;color:#6b6764;margin:12px 0 0;}


/* home responsive */
@media (max-width: 1080px) {
  .slide-copy { max-width: 70%; }
  .story-in, .news-in { grid-template-columns: 1fr; }
  .value-top { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .vlist { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .blogo { flex-basis: calc((100% - 2 * var(--g-lg)) / 3); }
  .why-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .offer-grid { grid-template-columns: 1fr; }
  .trust-in { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .blogo { flex-basis: calc((100% - var(--g-lg)) / 2); }
  .offer { grid-template-columns: 1fr; }
  .offer .pic { min-height: 190px; aspect-ratio: 16 / 10; }
  /* portrait-ish crop so banner artwork still reads on a phone */
  .carousel { aspect-ratio: 4 / 3; }
  .slide-copy { max-width: 100%; padding: 22px; justify-content: flex-end; padding-bottom: 74px; }
  .slide-copy::before { background: linear-gradient(to top, rgba(255, 255, 255, .97) 42%, rgba(255, 255, 255, .75) 66%, rgba(255, 255, 255, 0) 100%); }
  .slide.dark .slide-copy::before { background: linear-gradient(to top, rgba(24, 22, 21, .93) 42%, rgba(24, 22, 21, .7) 66%, rgba(24, 22, 21, 0) 100%); }
  .slide-copy p { max-width: 100%; }
  .c-controls { left: 14px; right: 14px; justify-content: center; bottom: 14px; }
  .c-pause { display: none; }
  /* banners whose text is part of the picture: show the whole image, never crop it */
  .carousel:not(:has(.slide-copy)) { aspect-ratio: 1312 / 440; }
  .carousel:not(:has(.slide-copy)) .c-controls { bottom: 6px; left: auto; right: 8px; padding: 2px 6px; }
}
@media (max-width: 520px) {
  .trust-in { grid-template-columns: 1fr; }
  .carousel { aspect-ratio: 1 / 1; }
  .blogo { flex-basis: calc((100% - var(--g-lg)) / 2); height: 88px; }
  .b-arrow { width: 40px; height: 40px; }
}

/* controls are only useful with JS */
html:not(.js) .c-controls{display:none;}

/* admin-managed promo banners (home "more" and 2x2 modules) */
.promo{padding:var(--s-section) 0;}
.promo-grid{display:grid;gap:var(--g-lg);}
.promo-grid img{width:100%;height:auto;border-radius:5px;background:#e9e5e1;}
.promo-grid a{display:block;overflow:hidden;border-radius:5px;transition:transform .3s ease,box-shadow .3s ease;}
.promo-grid a:hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(32,32,32,.5);}
.promo-more{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);grid-template-areas:"a b" "a c";}
.promo-more > :nth-child(1){grid-area:a;}
.promo-more > :nth-child(2){grid-area:b;}
.promo-more > :nth-child(3){grid-area:c;}
.promo-2x2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:760px){
  .promo-more{grid-template-columns:1fr;grid-template-areas:none;}
  .promo-more > *{grid-area:auto !important;}
  .promo-2x2{grid-template-columns:1fr;}
}