@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Archivo:wght@400;500;600&family=Space+Mono&display=swap");
:root {
  --main-bg: #ffffff;
  --color-primary: #00ccff;
  --color-secondary: #fdf8f2;
  --color-thirdary: #c2c2c2;
  --color-grey: #636363;
  --color-black-title: #1c1c1c;
  --color-black: #262626;
  --color-white: #ffffff;
  --color-white-transparant: rgba(255, 255, 255, 0.85);
  --color-black-transparant: rgba(99, 99, 99, 0.35);
  --shadow-light: 0px 0px 30px rgba(0, 0, 0, 0.05);
  --shadow-hard: 0px 0px 30px rgba(0, 0, 0, 0.15);
  --font-heading-1: "Arsenal", sans-serif;
  --font-heading-2: "Marcellus", serif;
  --font-paragraf: "Inter", sans-serif;
  --font-menu: "DM Mono", monospace;
  --font-x-small: 0.7rem;
  --font-small: 0.8rem;
  --font-normal: 0.85rem;
  --font-medium: 1rem;
  --font-medium-1: 1.8rem;
  --font-medium-2: 1.6rem;
  --font-medium-3: 1.4rem;
  --font-medium-4: 1.2rem;
  --font-large: 2.5rem;
  --font-xslarge: 2rem;
  --hero-forest: #14503c;
  --hero-gold: #c8862a;
  --hero-cream: #ece8dc;
  --font-display: "Fraunces", serif;
  --font-mono-alt: "Space Mono", monospace;
}

h1 {
  font-family: var(--font-menu);
  line-height: 1.5;
  font-size: 2.5rem;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

h2 {
  font-family: var(--font-menu);
  line-height: 1.5;
  font-size: 2rem;
  margin: 0;
  padding: 0;
}

h3 {
  font-family: var(--font-menu);
  line-height: 1.5;
  font-size: 1.3rem;
  margin: 0;
  padding: 0;
}

body {
  background: var(--main-bg);
  font-family: var(--font-paragraf);
  font-weight: 300;
  color: var(--color-black);
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
  padding: 40px 44px;
  box-sizing: border-box;
  transition: all 0.5s;
  font-family: var(--font-mono-alt);
  color: var(--color-white);
  font-size: var(--font-normal);
}
header nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .brand {
  display: flex;
  align-items: center;
}
header .menu-btn {
  display: none;
}
header .hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-mono-alt);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
header .lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 2px;
}
header .lang a {
  font-family: var(--font-mono-alt);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 5px 9px;
  color: var(--color-white);
  text-decoration: none;
}
header .lang a.is-active {
  background: var(--hero-cream);
  color: var(--color-black-title);
}
header .icon-search {
  width: 16px;
  height: 16px;
  fill: var(--color-white);
  opacity: 0.9;
}
header .menu-icon {
  display: inline-flex;
  cursor: pointer;
}
header .burger {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
header .burger i {
  width: 22px;
  height: 1.5px;
  background: var(--color-white);
  display: block;
  transition: background 0.3s;
}
header nav > ul {
  position: absolute;
  background: var(--color-white-transparant);
  width: 80%;
  max-width: 360px;
  margin: 0;
  top: 0;
  right: -100%;
  height: 100vh;
  padding: 3rem 3rem 2rem 3rem;
  opacity: 0;
  transition: all 0.5s ease-out;
}
header nav > ul .spacer {
  width: 50px;
  background-color: var(--hero-gold);
  height: 4px;
}
header nav > ul li {
  list-style: none;
  padding: 0.9rem 0;
}
header nav > ul li img {
  max-width: 186px;
}
header nav > ul li > ul {
  display: flex;
  padding: 0;
}
header nav > ul li > ul li:nth-child(2) {
  padding-left: 1rem;
}
header nav > ul li a {
  text-decoration: none;
  color: var(--color-black);
  font-family: var(--font-mono-alt);
  font-weight: 300;
  font-size: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  padding-left: 0.15rem;
}
header .menu-btn:checked ~ ul {
  opacity: 1;
  right: 0;
}

.page-header {
  color: var(--color-black-title);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-thirdary);
}
.page-header .lang a,
.page-header .icon-search {
  color: var(--color-black-title);
  fill: var(--color-black-title);
}
.page-header .burger i {
  background: var(--color-black-title);
}

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--hero-forest);
}
.hero__media {
  position: absolute;
  inset: 0;
  animation: kb 26s ease-in-out infinite alternate;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(12, 20, 15, 0.62) 0%,
    rgba(12, 20, 15, 0.14) 26%,
    rgba(12, 20, 15, 0.18) 66%,
    rgba(12, 20, 15, 0.5) 100%
  );
}
@keyframes kb {
  from {
    transform: scale(1.03);
  }
  to {
    transform: scale(1.12);
  }
}
.hero__center {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  padding: 0 24px;
}
.hero__logomark {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero__lede {
  font-size: 15.5px;
  color: var(--hero-cream);
  margin: 24px 0 28px;
  max-width: 48ch;
  line-height: 1.65;
}
.hero__cta {
  font-family: var(--font-mono-alt);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 7px;
}
.hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
  50% {
    transform: translate(-50%, 7px);
  }
}

.page-hero {
  margin-top: 8rem;
  display: flex;
  align-items: center;
  height: 90vh;
}
.page-hero div {
  text-align: center;
  margin: 0;
}
.page-hero div h1 {
  font-size: 4rem;
}
.page-hero div img {
  margin-bottom: 2rem;
}

.grey {
  background-color: var(--color-secondary);
}

.link-default {
  background-color: var(--color-white);
  border: 1px solid;
  border-color: var(--color-black-title);
  padding: 0.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: -moz-max-content;
  width: max-content;
  font-family: var(--font-menu);
}
.link-default svg {
  margin-right: 1rem;
}

.content {
  padding: 5rem 2.05rem;
}
.content h1 {
  margin-bottom: 2rem;
}
.content p {
  font-size: var(--font-normal);
  line-height: 2.5rem;
  display: block;
  margin-bottom: 3rem;
  font-family: var(--font-paragraf);
}
.content .spacer {
  width: 80px;
  background-color: var(--color-primary);
  height: 10px;
  margin: 4rem 0;
}
.content .area-co-footer {
  display: flex;
  flex-direction: column;
}
.content .area-co-footer .co-footer {
  margin-bottom: 3rem;
}
.content .area-co-footer .co-footer:nth-child(3) {
  margin-bottom: 0;
}
.content .co-footer {
  position: relative;
  color: var(--color-white);
}
.content .co-footer > div {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3rem;
  width: calc(100% - 3rem);
  text-align: center;
}
.content .co-footer > div p {
  margin-bottom: 1rem;
  text-align: center;
}
.content .co-footer > div div {
  text-align: right;
}
.content .co-footer > div a {
  border: 1px solid var(--color-white);
  padding: 0.5rem;
}
.content .page-content-1 {
  border-left: 1px solid var(--color-thirdary);
  padding-left: 3rem;
}
.content .page-content-1 h1 {
  margin-bottom: 0.5rem;
}
.content .page-content-1 h2 {
  font-size: var(--font-medium);
}
.content .contact-us h1 {
  margin-bottom: 0.5rem;
  margin-top: 4rem;
}
.content .contact-us h2 {
  font-size: var(--font-medium);
}
.content .contact-us ul {
  margin-top: 3rem;
}
.content .contact-us ul li {
  display: flex;
  align-items: start;
  justify-content: start;
  margin-bottom: 2rem;
}
.content .contact-us ul li div:nth-child(1) {
  width: 10%;
}
.content .contact-us ul li div:nth-child(1) svg {
  margin-top: 0.5rem;
}
.content .contact-us ul li div:nth-child(2) {
  width: 90%;
  line-height: 2;
}

.location {
  align-items: center;
  flex-direction: column;
  justify-content: start;
  height: auto;
  margin-bottom: 5rem;
  margin-top: 9rem;
}
.location > div:nth-child(1) {
  color: var(--color-black);
  margin-bottom: 0 !important;
}
.location > div:nth-child(1) h1 {
  font-size: 3rem;
}
.location > div:nth-child(2) {
  margin-top: 4rem;
  margin-bottom: 0 !important;
}
.location > div:nth-child(2) iframe {
  width: 100%;
}

.product {
  padding-top: 1rem;
  padding-bottom: 0;
}
.product .link-horizontal {
  overflow: auto;
  white-space: nowrap;
}
.product .link-horizontal a {
  background-color: var(--color-white);
  border: 1px solid;
  border-color: var(--color-black-title);
  padding: 0.5rem 3rem;
  display: inline-block;
  align-items: center;
  justify-content: space-around;
  width: -moz-max-content;
  width: max-content;
  font-family: var(--font-menu);
  color: var(--color-black);
  font-size: var(--font-medium);
  margin-right: 1.5rem;
}
.product .link-horizontal a.act {
  background-color: var(--color-black);
  color: var(--color-white);
}
.product .link-horizontal a:nth-child(4) {
  margin-right: 0;
}
.product .list-product {
  color: var(--color-black);
}
.product .list-product h1 {
  margin-bottom: 0;
  text-align: center;
}
.product .list-product h2 {
  margin: 0;
  text-align: center;
  font-size: var(--font-medium);
}
.product .list-product .spacer {
  height: 5px;
  margin: 0 auto;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.product .list-product p {
  text-align: center;
}
.product .list-product .item {
  margin-bottom: 4rem;
}
.product .list-product .item > div:nth-child(1) {
  text-align: center;
  margin-bottom: 2.5rem;
}
.product .list-product .item > div {
  margin-top: 1.5rem;
}

.gal-about {
  margin-top: 5rem;
}
.gal-about img {
  margin-bottom: 2rem;
}














footer {
  padding: 5rem 2.05rem 7rem 2.05rem;
}
footer h4 {
  margin: 2rem 0 3rem 0;
  line-height: 2;
  font-size: var(--font-normal);
}
footer .left svg {
  margin-bottom: 2rem;
}
footer .left .links ul li {
  margin-bottom: 2rem;
}
footer .left .links ul li a {
  font-family: var(--font-menu);
  text-decoration: underline;
  font-size: 0.9rem;
}
footer .right h3 {
  font-size: 1.8rem;
}
footer .right ul {
  margin: 2rem 0;
  display: flex;
  width: 150px;
  justify-content: space-between;
}
footer .right .copyright {
  font-size: var(--font-small);
}

.whatsapp-fly {
  position: fixed;
  z-index: 100;
  background-color: var(--color-white);
  bottom: 2rem;
  left: 2rem;
  display: flex;
  align-items: center;
  font-family: var(--font-menu);
  padding: 0.5rem 1rem;
  border: 1px solid;
  border-color: var(--color-primary);
}
.whatsapp-fly svg {
  margin-right: 0.8rem;
}

@media only screen and (min-width: 768px) {
  .co-footer img {
    width: 100%;
  }
  .page-hero div img {
    max-width: 500px;
  }
  .gal-about {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .gal-about img {
    width: calc(50% - 1rem);
  }
  .contact-us ul li div:nth-child(1) {
    width: 5% !important;
  }
  .contact-us ul li div:nth-child(2) {
    width: 90%;
  }
  .list-product {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .list-product .item {
    width: calc(50% - 2.5rem);
  }
  .list-product .item h1,
  .list-product .item h2,
  .list-product .item p {
    text-align: left;
  }
  .list-product .item .spacer {
    margin-left: 0px;
  }
  .list-product .item img {
    max-width: 300px;
  }
}
@media only screen and (min-width: 992px) {
  .home-top {
    display: flex;
    justify-content: space-between;
  }
  .home-top img {
    width: 50%;
  }
  .home-top > div {
    width: calc(50% - 2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .area-co-footer {
    flex-direction: row !important;
    justify-content: space-between;
  }
  .area-co-footer .co-footer {
    width: calc(33.33% - 1.5rem);
    margin-bottom: 0 !important;
  }
  .contact-us h1 {
    margin-top: 0 !important;
  }
  .contact-us ul li div:nth-child(1) {
    width: 7% !important;
  }
  .contact-us ul li div:nth-child(2) {
    width: 90%;
  }







  footer .top {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0rem;
  }
  footer .area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  footer .area .left .links {
    display: flex;
    flex-direction: row;
    margin-top: 1.5rem;
  }
  footer .area .left .links ul {
    margin-right: 5rem;
  }
  footer .area .right {
    text-align: right;
  }
  footer .area .right .followus {
    width: 100%;
    justify-content: right;
    margin-top: 1rem;
  }
  footer .area .right .followus li {
    margin-left: 1.5rem;
  }
  footer .area .right .copyright {
    display: block;
  }
  .whatsapp-fly {
    right: 2rem !important;
    left: auto;
    bottom: 3rem;
  }
  .home-hero > div {
    margin-bottom: 6rem !important;
  }
  .product {
    margin-bottom: 2rem;
  }
  .list-product .item {
    width: calc(50% - 3rem);
  }
  .list-product .item img {
    max-width: 500px;
  }
}
@media only screen and (min-width: 1200px) {
  .big {
    display: flex;
    flex-direction: row-reverse;
    width: 100% !important;
    justify-content: space-between;
    align-items: end;
  }
  .big > div {
    width: calc(50% - 3rem);
  }
  .big-reverse {
    flex-direction: row !important;
  }
}
@media only screen and (min-width: 1440px) {
  header {
    padding: 30px 4rem;
  }
  header nav ul {
    padding-left: 4rem;
  }
  .contact-us ul li div:nth-child(1) {
    width: 5% !important;
  }
  .contact-us ul li div:nth-child(2) {
    width: 90%;
  }
  .home-hero > div {
    width: calc(100% - 8rem);
  }
  .content {
    padding: 6rem 4rem;
  }





  footer {
    padding: 6rem 4rem 7rem 4rem;
  }
  .whatsapp-fly {
    right: 4rem !important;
  }
  .home-top img {
    width: calc(50% - 2rem);
  }
}
@media only screen and (min-width: 1920px) {
  section,
  footer {
    width: 1920px;
    margin: 0 auto;
  }
  .home-hero {
    width: 100%;
  }
}/*# sourceMappingURL=style.css.map */
/* ============================================================
   HOMEPAGE - mockup port (offer rows, product carousel,
   wholesale band, category grid, testimonial).
   NOTE: style.scss is stale - it predates the redesign and does
   NOT contain these rules. Edit this file directly. Do not
   recompile style.scss over it or the redesign is lost.
   ============================================================ */
:root {
  --paper: #ece8dc;
  --paper-2: #f6f3ea;
  --ink: #221a14;
  --ink-soft: #5c5044;
  --line: #cfc8b5;
  --forest: #14503c;
  --amber: #c8862a;
  --wa: #1fa855;
}

/* --- shared --- */
.kicker { font-family: var(--font-mono-alt); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.kicker--forest { color: var(--forest); }
.kicker--amber  { color: var(--amber); }
.kicker--gold   { color: #e7c98c; }
.display-head { font-family: var(--font-display); font-weight: 600; line-height: 1.06;
  font-size: clamp(28px, 5.4vw, 44px); letter-spacing: .01em; margin: 18px 0 16px; }
.body-copy { color: var(--ink-soft); font-size: 16px; line-height: 1.7; margin: 0 0 28px; max-width: 46ch; }
.btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono-alt); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; }
.btn svg { width: 18px; height: 18px; }
.btn--outline { color: var(--ink); border: 1px solid var(--ink); padding: 15px 26px; }
.btn--dark    { color: #fff; background: var(--ink); padding: 16px 28px; }
.btn--amber   { color: var(--ink); background: var(--amber); padding: 16px 28px; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--dark:hover    { background: var(--forest); }
.btn--amber:hover   { background: #b3761f; }

/* --- offer rows --- */





/* --- product carousel --- */
.caro { padding: 72px 0 68px; background: var(--paper); border-top: 1px solid var(--line); }
.caro__head { display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 48px 28px; flex-wrap: wrap; gap: 20px; }
.caro__title { font-family: var(--font-display); font-weight: 600; margin: 10px 0 0;
  font-size: clamp(26px, 4.6vw, 36px); }
.caro__controls { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button { font-family: var(--font-mono-alt); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 16px; border-radius: 30px; border: 1px solid var(--ink); background: transparent;
  color: var(--ink-soft); cursor: pointer; }
.tabs button.is-active { background: var(--ink); color: var(--paper); }
.arrows { display: flex; gap: 8px; }
.arrows button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); font-size: 16px; cursor: pointer; }
.track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 48px 12px; scroll-padding-left: 48px; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.pcard { flex: 0 0 272px; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); }
.pcard[hidden] { display: none; }
.pcard__media { position: relative; height: 214px; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard__badge { position: absolute; top: 12px; left: 12px; font-family: var(--font-mono-alt);
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); padding: 5px 9px; }
.pcard__bd { padding: 18px 18px 22px; }
.pcard__t { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 0 0 8px; }
.pcard__notes { font-size: 13px; color: var(--ink-soft); line-height: 1.6; min-height: 42px; }
.pcard__go { display: inline-flex; font-family: var(--font-mono-alt); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; margin-top: 14px; }
.pcard__go:hover { color: var(--forest); }
/* The photo and the title link to the product, so the card is clickable
   without relying on the small "view" link in the corner. */
.pcard__imglink { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; }
.pcard__tlink { color: inherit; text-decoration: none; }
.pcard__tlink:hover { color: var(--forest); }

/* --- wholesale --- */
.wholesale { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--forest);
  color: var(--paper); border-top: 1px solid var(--line); }
.wholesale__text { padding: 88px 72px; display: flex; flex-direction: column; justify-content: center; }
.wholesale__text .body-copy { color: #c7d6cd; }
.wholesale__media { position: relative; min-height: 360px; }
.wholesale__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- category grid --- */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line); }
.cat { position: relative; height: 340px; display: block; text-decoration: none; overflow: hidden; }
.cat img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.cat:hover img { transform: scale(1.05); }
.cat__veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,25,18,0) 40%, rgba(20,25,18,.72) 100%); }
.cat__label { position: absolute; left: 22px; bottom: 22px; color: #fff; }
.cat__label .t { font-family: var(--font-display); font-weight: 600; font-size: 24px; }
.cat__label .s { font-family: var(--font-mono-alt); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; margin-top: 6px; }

/* --- testimonial (restyled over the legacy block) --- */










/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .wholesale__text { padding: 64px 44px; }
  .caro__head, .track { padding-left: 32px; padding-right: 32px; }
  .track { scroll-padding-left: 32px; }
  .cat { height: 300px; }
}
@media (max-width: 820px) {
  .wholesale { grid-template-columns: 1fr; }
  .wholesale__media { min-height: 0; aspect-ratio: 4 / 3; }
  .wholesale__text { padding: 48px 24px; }
  /* image always leads on a phone - the alternating desktop order does not read stacked */
  .cats { grid-template-columns: 1fr 1fr; }
  .cat { height: 220px; }
  .caro { padding: 52px 0 48px; }
  .caro__head { padding: 0 24px 22px; }
  .track { padding: 4px 24px 12px; scroll-padding-left: 24px; }
  .arrows { display: none; }


}
@media (max-width: 640px) {
  .wholesale__text { padding: 40px 20px; }
  .cats { grid-template-columns: 1fr; }
  .caro__head { padding: 0 20px 18px; }
  .track { padding: 4px 20px 12px; scroll-padding-left: 20px; }
  .pcard { flex: 0 0 78vw; max-width: 300px; }
  .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cat img { transition: none; }
}

/* ============================================================
   PRODUCT LISTING (/page/product/<category>/)
   Category is URL-driven so deep links survive; search and sort
   run client-side over the already-rendered cards.
   ============================================================ */
.pl__head { padding: 56px 64px 28px; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pl__crumb { font-family: var(--font-mono-alt); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #8b8073; display: flex; gap: 8px; }
.pl__crumb a { color: inherit; text-decoration: none; }
.pl__crumb a:hover { color: var(--ink); }
.pl__title { font-family: var(--font-display); font-weight: 600; line-height: 1; letter-spacing: -.01em;
  font-size: clamp(30px, 5.4vw, 50px); margin: 14px 0 12px; }
.pl__intro { font-size: 15px; color: var(--ink-soft); margin: 0; max-width: 62ch; line-height: 1.7; }

.pl { display: grid; grid-template-columns: 240px minmax(0, 1fr); background: var(--paper); }
.pl__rail { border-right: 1px solid var(--line); padding: 34px 24px 44px; }
.pl__group { margin-bottom: 30px; }
.pl__label { font-family: var(--font-mono-alt); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #8b8073; margin-bottom: 11px; }
.pl__search { width: 100%; border: 1px solid var(--line); background: #fff; padding: 11px 12px;
  font-family: var(--font-paragraf); font-size: 13.5px; color: var(--ink); outline: none; }
.pl__search:focus { border-color: var(--ink); }
.pl__filter { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; font-size: 13.5px; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid #e4ded0; }
.pl__filter:last-child { border-bottom: 0; }
.pl__filter:hover { color: var(--ink); }
.pl__filter.is-active { color: var(--ink); font-weight: 600; }
.pl__filter.is-active .pl__count { background: var(--ink); color: var(--paper); }
.pl__filter.is-static { cursor: default; }
.pl__count { font-family: var(--font-mono-alt); font-size: 10.5px; color: #8b8073;
  border: 1px solid var(--line); padding: 2px 7px; min-width: 26px; text-align: center; }
.pl__wa { display: inline-flex; align-items: center; gap: 9px; background: var(--wa); color: #fff;
  font-size: 13px; font-weight: 600; padding: 12px 16px; text-decoration: none; width: 100%; justify-content: center; }
.pl__wa svg { width: 18px; height: 18px; }
.pl__wa:hover { background: #178f47; }

.pl__main { padding: 30px 48px 56px; min-width: 0; }
.pl__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pl__resultcount { font-family: var(--font-mono-alt); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); }
.pl__sortwrap { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono-alt);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8b8073; }
.pl__sort { font-family: var(--font-paragraf); font-size: 13px; color: var(--ink); background: #fff;
  border: 1px solid var(--line); padding: 8px 10px; outline: none; }

.pl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.plcard { background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; display: block; }
.plcard[hidden] { display: none; }
.plcard:hover { border-color: var(--ink); }
.plcard__media { height: 200px; background: var(--paper-2); display: flex; align-items: center; justify-content: center; padding: 14px; }
.plcard__media img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.plcard__bd { padding: 16px 16px 20px; border-top: 1px solid var(--line); }
.plcard__t { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.1; }
.plcard__sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }
.plcard__notes { font-family: var(--font-mono-alt); font-size: 11px; color: var(--forest); margin-top: 10px; line-height: 1.6; }
.pl__empty { padding: 44px 0; color: var(--ink-soft); font-size: 15px; }
.pl__empty[hidden] { display: none; }

@media (max-width: 1080px) {
  .pl__head { padding: 44px 40px 24px; }
  .pl__main { padding: 26px 32px 48px; }
  .pl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .pl { grid-template-columns: 1fr; }
  .pl__rail { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px; }
  .pl__group { margin-bottom: 22px; }
  .pl__head { padding: 36px 24px 20px; }
  .pl__main { padding: 22px 24px 44px; }
}
@media (max-width: 640px) {
  .pl__grid { grid-template-columns: 1fr; gap: 16px; }
  .plcard__media { height: 220px; }
}

.plcard__cat { font-family: var(--font-mono-alt); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--forest); margin-bottom: 6px; }

/* ============================================================
   FLOATING WHATSAPP - authoritative rule.
   The legacy block earlier in this file pins the button to
   `left: 2rem`. Setting only `right` left BOTH edges anchored, so
   the button stretched the full viewport width and border-radius
   turned it into a giant ellipse on mobile. Everything the legacy
   rule sets is reset here explicitly.
   ============================================================ */
.whatsapp-fly {
  position: fixed;
  left: auto;
  right: 18px;
  top: auto;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 100;
  width: auto;
  max-width: calc(100vw - 36px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wa);
  background-color: var(--wa);
  color: #fff;
  border: 0;
  font-family: var(--font-paragraf);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 13px 18px;
  border-radius: 30px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  text-decoration: none;
  white-space: nowrap;
}
.whatsapp-fly svg { width: 20px; height: 20px; margin-right: 0; flex: 0 0 20px; fill: currentColor; }
.whatsapp-fly:hover { background: #178f47; background-color: #178f47; color: #fff; }

/* Mobile: a proper circular FAB. Fixed box so it cannot stretch, and the
   label is hidden rather than relying on the old bare text node. */
@media (max-width: 820px) {
  .whatsapp-fly {
    width: 52px;
    height: 52px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    justify-content: center;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .whatsapp-fly span { display: none; }
  .whatsapp-fly svg { width: 24px; height: 24px; flex: 0 0 24px; }
}

/* ============================================================
   HIGHLIGHTED BLOCK (product listing)
   Renders only when something carries the highlight flag.
   ============================================================ */
.plhl { padding: 4px 0 30px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.plhl__title { font-family: var(--font-display); font-weight: 600; line-height: 1.08;
  font-size: clamp(22px, 3.4vw, 30px); margin: 12px 0 20px; }
.plhl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plhl__card { display: block; text-decoration: none; color: inherit;
  background: #fff; border: 2px solid var(--ink); }
.plhl__card:hover { background: var(--paper-2); }
.plhl__media { height: 190px; background: var(--paper-2); display: flex; align-items: center;
  justify-content: center; padding: 14px; border-bottom: 2px solid var(--ink); }
.plhl__media img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.plhl__bd { padding: 15px 16px 18px; }
.plhl__cat { font-family: var(--font-mono-alt); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--forest); }
.plhl__name { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.08; margin: 6px 0 5px; }
.plhl__notes { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }

@media (max-width: 1080px) {
  .plhl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .plhl__grid { grid-template-columns: 1fr; }
  .plhl__media { height: 200px; }
}

/* ============================================================
   HERO VIDEO
   The footage carries the Fruute mark burned in at frame centre,
   so the hero renders no wordmark of its own. Copy is pushed to
   the lower band to leave that centre clear.

   Both encodes are centre crops and the poster is the full frame,
   so `object-position: center` puts the mark in the same place at
   every viewport, and the poster-to-video handover does not jump.
   ============================================================ */
.hero__media video,
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* Copy sits in the bottom band, clear of the mark. */
.hero__center { justify-content: flex-end; padding-bottom: 8vh; }
.hero__lede { margin: 0 0 22px; }

/* A little extra floor contrast so the copy holds over moving beans. */
.hero__veil { background:
  linear-gradient(180deg, rgba(12,20,15,.55) 0%, rgba(12,20,15,.10) 26%,
                          rgba(12,20,15,.22) 58%, rgba(12,20,15,.68) 100%); }

@media (max-width: 820px) {
  .hero__center { padding-bottom: 6vh; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media { animation: none; }
}

/* ============================================================
   HOMEPAGE RESTRUCTURE
   Section order now matches the approved design:
   hero / what is Fruute / products / featured / testimonial /
   great brew / roastery / journal / wholesale / categories /
   newsletter.
   ============================================================ */

:root { --accent: #d6452b; }

/* Kicker with the red rule from the design. */
.kicker--rule { position: relative; padding-left: 14px; color: var(--forest); }
.kicker--rule::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px;
  width: 3px; background: var(--accent); }

/* ---------- 2. WHAT IS FRUUTE ---------- */
.whatis { background: var(--paper-2); border-top: 1px solid var(--line); padding: 84px 64px 76px; }
.whatis__head { font-family: var(--font-display); font-weight: 600; line-height: 1.12;
  font-size: clamp(28px, 4.6vw, 46px); letter-spacing: -.01em; margin: 22px 0 0; max-width: 26ch; }
.whatis__intro { color: var(--ink-soft); font-size: 16px; line-height: 1.75; margin: 22px 0 0; max-width: 62ch; }
.whatis__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 56px; }
.whatis__num { font-family: var(--font-mono-alt); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--forest); border-top: 2px solid var(--forest); padding-top: 14px; }
.whatis__body { color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; margin: 12px 0 0; }

/* ---------- 3. PRODUCTS ---------- */
.caro__head { align-items: flex-start; }
.caro__intro { max-width: 52ch; }
.caro__sub { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin: 12px 0 0; }
.caro__controls { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.caro__all { font-family: var(--font-mono-alt); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 5px; }
.caro__all:hover { color: var(--forest); border-color: var(--forest); }

/* Tabs become an underlined row, matching the design. */
.tabs { padding: 0 48px; border-bottom: 1px solid var(--line); gap: 26px; margin-bottom: 26px; }
.tabs button { border: 0; border-radius: 0; background: transparent; padding: 0 0 14px;
  border-bottom: 2px solid transparent; color: #8b8073; font-size: 12px; letter-spacing: .12em; }
.tabs button.is-active { background: transparent; color: var(--ink); border-bottom-color: var(--accent); }
.tabs__n { font-size: 10px; margin-left: 7px; color: #a9a196; }
.tabs button.is-active .tabs__n { color: var(--accent); }

.pcard { display: flex; flex-direction: column; }
.pcard__media { height: 230px; background: var(--paper-2); display: flex; align-items: center;
  justify-content: center; padding: 16px; }
.pcard__media img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.pcard__bd { display: flex; flex-direction: column; flex: 1; }
.pcard__origin { font-family: var(--font-mono-alt); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #8b8073; margin-bottom: 6px; }
.pcard__notes { min-height: 0; margin-bottom: 14px; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.pcard__tag { font-family: var(--font-mono-alt); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #8b8073; }
.pcard__go { margin-top: 0; }

/* ---------- 4. FEATURED OFFERING ---------- */
.feat { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper);
  border-top: 1px solid var(--line); }
.feat__media { position: relative; min-height: 520px; background: var(--forest); }
.feat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat__text { padding: 84px 72px; display: flex; flex-direction: column; justify-content: center; }
.feat__title { font-family: var(--font-display); font-weight: 600; line-height: .96;
  font-size: clamp(38px, 6.4vw, 60px); letter-spacing: -.02em; margin: 18px 0 14px; }
.feat__notes { font-size: 14px; letter-spacing: .04em; color: var(--ink); margin: 0 0 18px; }
.feat__body { color: var(--ink-soft); font-size: 16px; line-height: 1.75; margin: 0 0 28px; max-width: 46ch; }
.feat__body p { margin: 0 0 12px; }

/* ---------- 5. TESTIMONIAL ---------- */
.quote { background: var(--paper-2); border-top: 1px solid var(--line); padding: 76px 64px; position: relative; }
.quote__stage { margin-top: 34px; display: grid; }
.quote__item { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity .5s ease; pointer-events: none; }
.quote__item.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.quote__text { font-family: var(--font-display); font-weight: 600; line-height: 1.18;
  font-size: clamp(22px, 3.4vw, 38px); letter-spacing: -.01em; margin: 0; max-width: 24ch; }
.quote__text::before { content: "\201C"; color: var(--accent); }
.quote__text::after { content: "\201D"; color: var(--accent); }
.quote__by { margin-top: 30px; font-family: var(--font-mono-alt); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.quote__by strong { color: var(--ink); font-weight: 700; }
.quote__by span::before { content: " \00B7 "; }
.quote__dots { position: absolute; right: 64px; bottom: 76px; display: flex; gap: 10px; }
.quote__dots button { width: 9px; height: 9px; border-radius: 50%; padding: 0;
  border: 1px solid var(--ink); background: transparent; cursor: pointer; }
.quote__dots button.is-active { background: var(--ink); }

/* ---------- 6/7. SPLIT SECTIONS (Great Brew, Roastery) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper);
  border-top: 1px solid var(--line); }
.split--rev { background: var(--paper-2); }
.split__media { position: relative; min-height: 460px; background: var(--forest); }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split__text { padding: 84px 72px; display: flex; flex-direction: column; justify-content: center; }
.split__title { font-family: var(--font-display); font-weight: 600; line-height: .98;
  font-size: clamp(30px, 5.2vw, 56px); letter-spacing: -.02em; margin: 18px 0 16px; }

/* ---------- 8. JOURNAL ---------- */
.journal { background: var(--paper); border-top: 1px solid var(--line); padding: 76px 64px; }
.journal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.journal__title { font-family: var(--font-display); font-weight: 600; margin: 10px 0 0;
  font-size: clamp(26px, 4.6vw, 40px); }
.journal__all { font-family: var(--font-mono-alt); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #8b8073; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.journal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 32px; }
.jcard__media { height: 190px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.jcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jcard__meta { font-family: var(--font-mono-alt); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--forest); margin-top: 16px; }
.jcard__meta span { color: #a9a196; margin-left: 12px; }
.jcard__title { font-family: var(--font-display); font-weight: 600; font-size: 21px;
  line-height: 1.16; margin: 10px 0 8px; }
.jcard__ex { color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; margin: 0; }
.journal__note { margin: 30px 0 0; font-family: var(--font-mono-alt); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: #a9a196; }

/* ---------- 11. NEWSLETTER ---------- */
.news { background: #17110c; color: var(--paper); text-align: center;
  padding: 78px 48px; border-top: 1px solid var(--line); }
.news__title { font-family: var(--font-display); font-weight: 600; line-height: .98;
  font-size: clamp(30px, 5.4vw, 52px); letter-spacing: -.02em; margin: 16px 0 14px; }
.news__sub { color: #b6ab9c; font-size: 15px; line-height: 1.7; max-width: 52ch; margin: 0 auto 30px; }
.news__form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 520px; margin: 0 auto; }
.news__form input { flex: 1; min-width: 220px; background: transparent; border: 1px solid #4a4038;
  color: var(--paper); font-family: var(--font-paragraf); font-size: 14px; padding: 15px 18px; outline: none; }
.news__form input:focus { border-color: var(--amber); }
.news__form button { font-family: var(--font-mono-alt); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink); background: var(--amber); border: 0; cursor: pointer; padding: 15px 28px; }
.news__form button:hover { background: #b3761f; }
.news__status { margin: 18px 0 0; font-size: 13.5px; color: #e7c98c; }
.news__status[hidden] { display: none; }

/* ---------- hero scroll cue ---------- */
.hero__scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 6; color: rgba(255,255,255,.75); font-size: 18px; text-decoration: none;
  animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 7px); } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .whatis, .quote, .journal { padding-left: 40px; padding-right: 40px; }
  .feat__text, .split__text { padding: 64px 44px; }
  .quote__dots { right: 40px; }
  .tabs { padding-left: 32px; padding-right: 32px; }
  .journal__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .whatis { padding: 52px 24px 48px; }
  .whatis__grid { grid-template-columns: 1fr; gap: 26px; margin-top: 36px; }
  .feat, .split { grid-template-columns: 1fr; }
  .feat__media, .split__media { min-height: 0; aspect-ratio: 4 / 3; }
  .feat__text, .split__text { padding: 44px 24px; }
  /* image always leads on a phone, whichever way the desktop row runs */
  .split--rev .split__text { order: 2; }
  .split--rev .split__media { order: 1; }
  .quote { padding: 48px 24px 68px; }
  .quote__dots { right: 24px; bottom: 28px; }
  .journal { padding: 48px 24px; }
  .journal__grid { grid-template-columns: 1fr; }
  .tabs { padding-left: 24px; padding-right: 24px; gap: 18px; overflow-x: auto; }
  .news { padding: 52px 24px; }
  .news__form { flex-direction: column; }
  .news__form input, .news__form button { width: 100%; min-width: 0; }
}
@media (max-width: 640px) {
  .feat__text, .split__text { padding: 36px 20px; }
  .whatis { padding: 44px 20px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
  .quote__item { transition: none; }
}

/* ============================================================
   PRODUCT DETAIL (/page/product/<cat>/<slug>/)
   Matches the approved design: breadcrumb bar, split hero,
   spec strip, paired scales, story, related, wholesale band.
   Every block is conditional in the template — anything the
   client has not filled in does not render at all.
   ============================================================ */

/* ---------- breadcrumb ---------- */
.pd__crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 16px 40px 0; background: var(--paper);
  font-family: var(--font-mono-alt); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #8b8073; }
.pd__crumb a { color: inherit; text-decoration: none; }
.pd__crumb a:hover { color: var(--accent); }
.pd__crumb-now { color: var(--ink); }

/* ---------- hero ---------- */
.pd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--paper); border-top: 1px solid var(--line); margin-top: 14px; }
.pd__hero { position: relative; min-height: 470px; padding: 34px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 30% 15%, #2c6b52 0%, #14503c 55%, #0e3a2b 100%); }
.pd__pack { position: relative; width: 216px; height: 296px; z-index: 2;
  box-shadow: 0 22px 34px rgba(0, 0, 0, .34); }
.pd__pack img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd__stamp { position: absolute; left: 26px; bottom: 24px;
  font-family: var(--font-mono-alt); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(236, 232, 220, .72); }

.pd__body { padding: 40px 40px 34px; display: flex; flex-direction: column; justify-content: center; }
.pd__title { font-family: var(--font-display); font-weight: 600; line-height: .94;
  font-size: clamp(36px, 6.2vw, 62px); letter-spacing: -.02em; margin: 14px 0 8px; }
.pd__sub { font-size: 16px; color: var(--ink-soft); }
.pd__label { font-family: var(--font-mono-alt); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #8b8073; margin-top: 24px; }
.pd__chips { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.pd__chip { font-size: 12.5px; letter-spacing: .04em; padding: 9px 15px; border: 1px solid var(--ink); }
.pd__copy { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); margin: 22px 0 24px; }
.pd__copy p { margin: 0 0 12px; }

.pd__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pd__wa { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--wa); color: #fff; font-weight: 700; font-size: 15px; padding: 15px 24px; }
.pd__wa:hover { background: #178f47; color: #fff; }
.pd__wa svg { width: 20px; height: 20px; }
.pd__ctanote { font-family: var(--font-mono-alt); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #8b8073; }

/* ---------- spec strip ---------- */
.pd__specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.pd__spec { padding: 20px 22px; border-right: 1px solid var(--line); }
.pd__spec:last-child { border-right: 0; }
.pd__spec-l { font-family: var(--font-mono-alt); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: #8b8073; }
.pd__spec-v { font-family: var(--font-display); font-weight: 600; font-size: 21px;
  margin-top: 7px; line-height: 1.15; }

/* ---------- scales ---------- */
.pd__scales { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background: var(--paper); }
.pd__scale { padding: 30px 40px 34px; border-right: 1px solid var(--line); }
.pd__scale:last-child { border-right: 0; }
.pd__scale .pd__label { margin-top: 0; }
.pd__rail { position: relative; height: 6px; border-radius: 4px; margin: 44px 6px 0; }
.pd__marker { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--paper); transform: translate(-50%, -50%); }
.pd__marker i { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--font-display); font-style: normal; font-weight: 600;
  font-size: 17px; color: var(--ink); }
.pd__ends { display: flex; justify-content: space-between; margin: 16px 6px 0;
  font-family: var(--font-mono-alt); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: #8b8073; }

/* ---------- story ---------- */
.pd__story { padding: 44px 40px 40px; border-top: 1px solid var(--line); background: var(--paper);
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 56px; }
.pd__story-l { font-family: var(--font-mono-alt); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #8b8073; }
.pd__story-t { font-size: 15.5px; line-height: 1.8; color: var(--ink); max-width: 68ch; }
.pd__story-t p { margin: 0 0 16px; }
.pd__story-t p:last-child { margin-bottom: 0; }

/* ---------- related ---------- */
.pd__rel { padding: 26px 40px 34px; border-top: 1px solid var(--line); background: var(--paper); }
.pd__rel-head { display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.pd__rel-title { font-family: var(--font-display); font-weight: 600; margin: 0;
  font-size: clamp(22px, 3.4vw, 28px); letter-spacing: -.02em; }
.pd__rel-all { font-family: var(--font-mono-alt); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.pd__rel-all:hover { color: var(--accent); border-color: var(--accent); }
.pd__rel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pd__rel-card { display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); }
.pd__rel-card:hover { border-color: var(--ink); }
.pd__rel-media { position: relative; height: 130px; background: var(--paper-2);
  display: flex; align-items: center; justify-content: center; padding: 12px; }
.pd__rel-media img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.pd__rel-cat { position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--font-mono-alt); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; background: var(--paper); color: var(--ink); padding: 4px 8px; }
.pd__rel-bd { padding: 13px 14px 16px; border-top: 1px solid var(--line); }
.pd__rel-name { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.08; }
.pd__rel-sub { font-size: 11.5px; color: var(--ink-soft); line-height: 1.65; margin-top: 5px; }

/* ---------- wholesale band ---------- */
.pd__ws { background: var(--forest); color: var(--paper); padding: 34px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.pd__ws-text h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3.4vw, 30px);
  letter-spacing: -.02em; margin: 0 0 8px; }
.pd__ws-text p { margin: 0; color: #c7d6cd; font-size: 14.5px; line-height: 1.7; max-width: 62ch; }

.pd-missing { padding: 90px 40px; text-align: center; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pd__crumb, .pd__rel, .pd__ws { padding-left: 32px; padding-right: 32px; }
  .pd__body, .pd__story { padding-left: 32px; padding-right: 32px; }
  .pd__scale { padding-left: 32px; padding-right: 32px; }
  .pd__rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .pd { grid-template-columns: 1fr; }
  .pd__hero { min-height: 0; aspect-ratio: 4 / 3; padding: 28px; }
  .pd__pack { width: auto; height: 100%; max-width: 60%; }
  .pd__body { padding: 34px 24px; }
  .pd__crumb { padding: 14px 24px 0; }
  .pd__story { grid-template-columns: 1fr; gap: 14px; padding: 36px 24px; }
  .pd__scale { border-right: 0; border-bottom: 1px solid var(--line); padding: 26px 24px; }
  .pd__scale:last-child { border-bottom: 0; }
  .pd__spec { border-right: 0; border-bottom: 1px solid var(--line); }
  .pd__rel { padding: 24px 24px 30px; }
  .pd__ws { padding: 28px 24px; }
  .pd__wa { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .pd__rel-grid { grid-template-columns: 1fr; }
  .pd__rel-media { height: 160px; }
}

/* ============================================================
   LOGO
   One <symbol> in the footer sprite, referenced by the header,
   the mobile menu and the footer. It inherits `currentColor`,
   so the same asset works white over the hero video and dark on
   the light inner-page bar and footer — no second file, no
   filter hacks, no swapping images at breakpoints.
   Lockup is 2:1, so width follows from height.
   ============================================================ */
.logo { display: block; width: auto; aspect-ratio: 2 / 1;
  color: #fff; fill: currentColor; }

/* Inner pages put the header on a light bar. */
.page-header .logo { color: var(--ink); }

/* The mobile drawer and the footer are both light. */
.logo--menu { color: var(--ink); }
.logo--footer { color: var(--ink); }


/* ------------------------------------------------------------
   Logo sizing + header breathing room.
   The 1440+ breakpoint used to zero the header's vertical
   padding, which pinned the nav to the very top of the viewport
   on wide screens; that is restored above. Sizes here are the
   authoritative ones — they sit after the base .logo rule.
   ------------------------------------------------------------ */
.logo { height: 48px; }
.logo--menu { height: 40px; }
.logo--footer { height: 58px; }

header { padding-top: 30px; padding-bottom: 30px; }
.page-header { padding-top: 22px; padding-bottom: 22px; }

@media (max-width: 1080px) {
  header { padding-top: 24px; padding-bottom: 24px; }
  .logo { height: 42px; }
}
@media (max-width: 820px) {
  header { padding-top: 18px; padding-bottom: 18px; }
  .logo { height: 36px; }
  .logo--menu { height: 32px; }
  .logo--footer { height: 46px; }
}

/* ============================================================
   JOURNAL - hub (/page/journal/) and article
   ============================================================ */

/* ---------- hub head ---------- */
.jrhead { background: var(--paper); border-top: 1px solid var(--line); padding: 56px 64px 34px; }
.jrhead__title { font-family: var(--font-display); font-weight: 600; line-height: 1;
  font-size: clamp(34px, 6vw, 60px); letter-spacing: -.02em; margin: 16px 0 14px; }
.jrhead__intro { color: var(--ink-soft); font-size: 16px; line-height: 1.75; max-width: 60ch; margin: 0; }

.jrempty { background: var(--paper); padding: 70px 64px; color: var(--ink-soft); }
.jrempty h1 { font-family: var(--font-display); font-weight: 600; font-size: 32px; margin: 0 0 12px; color: var(--ink); }

/* ---------- lead article ---------- */
.jrlead { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--paper-2);
  border-top: 1px solid var(--line); }
.jrlead__media { display: block; position: relative; min-height: 420px; background: var(--forest); }
.jrlead__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jrlead__text { padding: 56px; display: flex; flex-direction: column; justify-content: center; }
.jrlead__flag { align-self: flex-start; font-family: var(--font-mono-alt); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; background: var(--accent); color: #fff;
  padding: 5px 10px; margin-bottom: 16px; }
.jrlead__title { font-family: var(--font-display); font-weight: 600; line-height: 1.08;
  font-size: clamp(26px, 3.8vw, 40px); letter-spacing: -.015em; margin: 10px 0 12px; }
.jrlead__title a { text-decoration: none; color: inherit; }
.jrlead__title a:hover { color: var(--forest); }
.jrlead__ex { color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; margin: 0 0 18px; max-width: 46ch; }

/* ---------- filter bar ---------- */
.jrfilter { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 16px 64px; }
.jrfilter__label { font-family: var(--font-mono-alt); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #8b8073; }
.jrfilter__tabs { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.jrfilter__tabs button { font-family: var(--font-mono-alt); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--line); background: transparent;
  color: var(--ink-soft); cursor: pointer; }
.jrfilter__tabs button.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.jrfilter__total { font-family: var(--font-mono-alt); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #8b8073; }

/* ---------- article grid + card ---------- */
.jrgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px;
  background: var(--paper); padding: 40px 64px 56px; }
.jrcard { display: block; text-decoration: none; color: inherit; }
.jrcard[hidden] { display: none; }
.jrcard__media { height: 200px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.jrcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.jrcard:hover .jrcard__media img { transform: scale(1.04); }
.jrcard__meta { font-family: var(--font-mono-alt); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--forest); margin-top: 16px; }
.jrcard__meta span { color: #a9a196; margin-left: 12px; }
.jrcard__title { font-family: var(--font-display); font-weight: 600; font-size: 21px;
  line-height: 1.16; margin: 10px 0 8px; }
.jrcard:hover .jrcard__title { color: var(--forest); }
.jrcard__ex { color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; margin: 0; }
.jrcard__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px;
  font-family: var(--font-mono-alt); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #a9a196; }
.jrgrid__empty { background: var(--paper); margin: 0; padding: 0 64px 56px; color: var(--ink-soft); font-size: 15px; }
.jrgrid__empty[hidden] { display: none; }
.jrgrid__empty button { margin-left: 10px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono-alt); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding: 0 0 3px; }

/* ---------- article ---------- */
.jr__crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--paper); padding: 16px 64px 0;
  font-family: var(--font-mono-alt); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #8b8073; }
.jr__crumb a { color: inherit; text-decoration: none; }
.jr__crumb a:hover { color: var(--accent); }
.jr__crumb-now { color: var(--ink); }

.jr { background: var(--paper); display: block; }
.jr__head { padding: 26px 64px 30px; max-width: 1100px; }
.jr__title { font-family: var(--font-display); font-weight: 600; line-height: 1.02;
  font-size: clamp(32px, 5.6vw, 58px); letter-spacing: -.022em; margin: 0 0 16px; max-width: 20ch; }
.jr__stand { font-size: 18px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 26px; max-width: 56ch; }
.jr__byline { display: flex; gap: 34px; flex-wrap: wrap; align-items: flex-start;
  border-top: 1px solid var(--line); padding-top: 18px; }
.jr__byline > div { display: flex; flex-direction: column; gap: 5px;
  font-family: var(--font-mono-alt); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.jr__byline span { color: #8b8073; }
.jr__byline strong { color: var(--ink); font-weight: 700; font-size: 11.5px; }
.jr__share { flex-direction: row !important; align-items: center; gap: 12px !important; margin-left: auto; }
.jr__share a, .jr__share button { font-family: var(--font-mono-alt); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); text-decoration: none; background: none;
  border: 0; border-bottom: 1px solid var(--line); cursor: pointer; padding: 0 0 3px; }
.jr__share a:hover, .jr__share button:hover { border-color: var(--ink); }

.jr__lead { margin: 0; }
.jr__lead img { width: 100%; height: auto; max-height: 620px; object-fit: cover; display: block; }
.jr__lead figcaption { padding: 12px 64px 0; font-family: var(--font-mono-alt); font-size: 10.5px;
  letter-spacing: .06em; color: #8b8073; }

.jr__body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px;
  padding: 44px 64px 56px; align-items: start; }
.jr__rail { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 26px; }
.jr__raillabel { font-family: var(--font-mono-alt); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #8b8073; margin-bottom: 10px; }
.jr__toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.jr__toc li { counter-increment: toc; border-top: 1px solid var(--line); }
.jr__toc a { display: block; padding: 9px 0; text-decoration: none; color: var(--ink-soft);
  font-size: 13.5px; line-height: 1.5; }
.jr__toc a::before { content: counter(toc, decimal-leading-zero) ".  "; color: #a9a196;
  font-family: var(--font-mono-alt); font-size: 10px; }
.jr__toc a:hover { color: var(--ink); }
.jr__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.jr__tags span { font-family: var(--font-mono-alt); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; border: 1px solid var(--line); padding: 5px 9px; color: var(--ink-soft); }

.jr__prose { max-width: 68ch; font-size: 16.5px; line-height: 1.85; color: var(--ink); }
.jr__prose p { margin: 0 0 20px; }
.jr__prose h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2; letter-spacing: -.015em; margin: 40px 0 14px; scroll-margin-top: 120px; }
.jr__prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; margin: 30px 0 10px; }
.jr__prose ul, .jr__prose ol { margin: 0 0 20px; padding-left: 22px; }
.jr__prose li { margin: 0 0 8px; }
.jr__prose blockquote { margin: 30px 0; padding-left: 22px; border-left: 3px solid var(--accent);
  font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.35; color: var(--ink); }
.jr__prose img { max-width: 100%; height: auto; display: block; margin: 26px 0; }
.jr__prose a { color: var(--forest); }

.jr__author { display: flex; gap: 18px; align-items: flex-start; margin-top: 44px;
  border-top: 1px solid var(--line); padding-top: 26px; }
.jr__author img { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; object-fit: cover; }
.jr__authorname { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.jr__author p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }

/* ---------- used products + keep reading ---------- */
.jr__used, .jr__more { background: var(--paper); border-top: 1px solid var(--line); padding: 40px 64px 48px; }
.jr__more { background: var(--paper-2); }
.jr__used-head { display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.jr__used-head h2 { font-family: var(--font-display); font-weight: 600; margin: 0;
  font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -.02em; }
.jr__used-head a { font-family: var(--font-mono-alt); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.jr__used-head a:hover { color: var(--accent); border-color: var(--accent); }
.jr__used-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.jr__used-card { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--line); }
.jr__used-card:hover { border-color: var(--ink); }
.jr__used-media { height: 130px; background: var(--paper-2); display: flex; align-items: center;
  justify-content: center; padding: 12px; }
.jr__used-media img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.jr__used-bd { padding: 13px 14px 16px; border-top: 1px solid var(--line); }
.jr__used-cat { font-family: var(--font-mono-alt); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--forest); }
.jr__used-name { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.08; margin-top: 5px; }
.jr__used-notes { font-size: 11.5px; color: var(--ink-soft); line-height: 1.6; margin-top: 4px; }
.jr__more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .jrhead, .jrfilter, .jrgrid, .jrgrid__empty, .jr__crumb, .jr__head,
  .jr__body, .jr__used, .jr__more { padding-left: 40px; padding-right: 40px; }
  .jr__lead figcaption { padding-left: 40px; padding-right: 40px; }
  .jrlead__text { padding: 44px 40px; }
  .jrgrid, .jr__more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr__used-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr__body { grid-template-columns: 180px minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 820px) {
  .jrhead { padding: 40px 24px 24px; }
  .jrlead { grid-template-columns: 1fr; }
  .jrlead__media { min-height: 0; aspect-ratio: 4 / 3; }
  .jrlead__text { padding: 32px 24px; }
  .jrfilter { padding: 14px 24px; }
  .jrgrid, .jrgrid__empty { padding-left: 24px; padding-right: 24px; }
  .jrgrid { grid-template-columns: 1fr; gap: 26px; padding-top: 28px; }
  .jr__crumb, .jr__head { padding-left: 24px; padding-right: 24px; }
  .jr__lead figcaption { padding-left: 24px; padding-right: 24px; }
  .jr__body { grid-template-columns: 1fr; gap: 28px; padding: 30px 24px 44px; }
  .jr__rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 30px; }
  .jr__share { margin-left: 0; }
  .jr__used, .jr__more { padding: 32px 24px 40px; }
  .jr__used-grid, .jr__more-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .jrcard__media img { transition: none; }
}

/* ------------------------------------------------------------
   Header positioning.

   `header` is position:fixed so the homepage nav can sit over the
   hero video. On every other page it is a solid white bar, and
   fixing it meant page content started at y=0 underneath it —
   which is why the journal article's title was hidden behind the
   logo. The legacy pages hid this by pushing .page-hero down with
   margin-top:8rem; new pages had no such compensation.

   Inner pages now put the header in normal flow instead, so
   content simply follows it, and that manual offset is removed.
   ------------------------------------------------------------ */
.page-header { position: static; }
.page-hero { margin-top: 0; }

/* Sticky offsets assumed a floating header; without one they only
   need to clear a little breathing room. */
.jr__rail { top: 30px; }
.jr__prose h2 { scroll-margin-top: 30px; }

/* ------------------------------------------------------------
   The legacy stylesheet targets a bare `header` selector with
   position:fixed, top:0, full width and white text. That is meant
   for the site nav, but it matches ANY <header> element — so an
   article's own <header> got yanked out of the flow and painted
   white over the page. Scope the treatment to the site header and
   neutralise it for headers nested in content.
   ------------------------------------------------------------ */
article header,
section header,
main header,
aside header {
  position: static;
  top: auto;
  width: auto;
  z-index: auto;
  color: inherit;
  transition: none;
}

/* ------------------------------------------------------------
   Nav drawer (the "megamenu").

   It was position:absolute inside <header>, so it inherited
   wherever the header happened to be: it started below the
   header's own padding rather than at the top of the screen, its
   right edge stopped at the header's gutter instead of the
   viewport, and once the inner-page header stopped being fixed it
   scrolled away with the page and floated mid-document.

   Anchoring it to the viewport instead makes it behave the same
   whether the header is fixed (homepage) or in flow (inner pages),
   and puts it above the header rather than inside its box.
   ------------------------------------------------------------ */
header nav > ul {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: -18px 0 40px rgba(0, 0, 0, .18);
}

/* The slide-in still runs off the right edge of the screen. */
header nav > ul { right: -100%; }
header .menu-btn:checked ~ ul { right: 0; }

@media (prefers-reduced-motion: reduce) {
  header nav > ul { transition: none; }
}

/* ------------------------------------------------------------
   Stacking order around the open drawer.

   The floating WhatsApp button sat at z-index:100 and would have
   covered the menu. On the homepage the drawer is also trapped
   inside the fixed header's stacking context (z-index:20), so
   raising the drawer alone would not have been enough there —
   the button had to come down below the header as well. They
   never overlap on screen, so nothing is lost by it.
   ------------------------------------------------------------ */
header nav > ul { z-index: 120; }
.whatsapp-fly { z-index: 15; }

/* ------------------------------------------------------------
   Media panels in the split sections.

   These were `min-height` on the panel plus `height:100%` on the
   image. A percentage height needs a DEFINITE parent height, and
   min-height is not one — so the image fell back to `auto` and
   rendered at its natural size. Any tall source photo then stretched
   its section: the roastery panel came out roughly twice the height
   of Great Brew purely because its photo is taller.

   Filling the panel with an absolutely positioned image makes the
   height come from the section, not the file, so every split reads
   the same regardless of what is uploaded.
   ------------------------------------------------------------ */
.split__media,
.wholesale__media,
.feat__media,
.jrlead__media { position: relative; overflow: hidden; }

.split__media img,
.wholesale__media img,
.feat__media img,
.jrlead__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* One shared height so the split sections match each other. */
.split__media,
.wholesale__media,
.feat__media { min-height: 460px; }

@media (max-width: 820px) {
  /* Stacked: the panels are already aspect-ratio boxes, so drop the floor. */
  .split__media,
  .wholesale__media,
  .feat__media,
  .jrlead__media { min-height: 0; }
}

/* ------------------------------------------------------------
   Common footer tiles (common.php).

   This block renders on every inner page but predates the redesign,
   so it sat on the legacy `.content` gutter — 2.05rem against the
   64px every rebuilt section uses — which made the three tiles run
   noticeably wider than whatever section preceded them. It also had
   no ground or top rule, so it floated free of the page rhythm.

   `.content` itself is left alone because the legacy pages still
   rely on it; the block gets its own class instead.

   Tile heights come from the tile, not the photo, for the same
   reason the split sections do.
   ------------------------------------------------------------ */
.cofoot { background: var(--paper); border-top: 1px solid var(--line); padding: 76px 64px; }
.cofoot .area-co-footer { gap: 24px; }
.cofoot .area-co-footer .co-footer { width: auto; flex: 1 1 0; margin-bottom: 0; }
.cofoot .co-footer { position: relative; overflow: hidden; aspect-ratio: 3 / 4; }
.cofoot .co-footer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cofoot .co-footer > div { z-index: 2; }
.cofoot .co-footer::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,25,18,0) 40%, rgba(20,25,18,.72) 100%);
}

@media (max-width: 1080px) {
  .cofoot { padding: 56px 40px; }
}
@media (max-width: 820px) {
  .cofoot { padding: 44px 24px; }
  .cofoot .area-co-footer { flex-direction: column !important; gap: 20px; }
  .cofoot .co-footer { aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------------------
   Homepage carousel card: whole card clickable.

   Only the "View" link was a target, so the image and title were
   dead. Wrapping each in its own anchor would have put three links
   to the same URL on every card — noisy for screen readers and for
   search engines.

   Instead the single "View" link is stretched over the whole card
   with a pseudo-element, so the entire tile is the hit area while
   the markup keeps exactly one link. Anything that needs to sit
   above it (the category badge) just needs a higher z-index.
   ------------------------------------------------------------ */
.pcard { position: relative; }
.pcard__go::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pcard:hover { border-color: var(--ink); }
.pcard:hover .pcard__t { color: var(--forest); }
.pcard:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.pcard__badge { z-index: 2; }