/* =========================================================
   PRODUCT DETAIL PAGE — Showcase Hero
========================================================= */

.productShowcaseHero{
  position: relative;
  overflow: hidden;

  min-height: max(610px, 64svh);
  padding-top: calc(var(--nav-h) + 12px);
  padding-bottom: clamp(36px, 4.5vw, 54px);
  background: var(--brand-900);
  color: #FFFFFF;
}


/* =========================================================
   Background image
========================================================= */

.productShowcaseHero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.productShowcaseHero__bg img{
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


/* =========================================================
   Overlay
========================================================= */

.productShowcaseHero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(5,48,37,.96) 0%,
      rgba(7,63,48,.90) 28%,
      rgba(7,58,46,.60) 50%,
      rgba(7,58,46,.24) 72%,
      rgba(6,31,25,.20) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6,31,25,.24) 0%,
      rgba(6,31,25,.05) 38%,
      rgba(6,31,25,.15) 68%,
      rgba(6,31,25,.66) 100%
    ),
    radial-gradient(
      circle at 78% 38%,
      rgba(201,151,53,.08) 0%,
      transparent 34%
    );
}


/* =========================================================
   Main layout
========================================================= */

.productShowcaseHero__inner{
  position: relative;
  z-index: 2;

  min-height: calc(max(610px, 64svh) - var(--nav-h));

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 500px);

  gap: clamp(42px, 7vw, 100px);
  align-items: end;
}

.productShowcaseHero__content{
  max-width: 720px;
  padding-bottom: clamp(8px, 2vw, 22px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  color: #FFFFFF;
}


/* =========================================================
   Category badge
========================================================= */

.productShowcaseHero__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  min-height: 30px;

  margin: 0 0 18px;
  padding: 8px 14px;

  border: 1px solid #D9AA4A;
  border-radius: var(--radius-pill);

  background: #C99735;
  color: #FFFFFF;

  font-size: 10px;
  font-weight: 850;
  letter-spacing: .15em;
  line-height: 1;
  text-transform: uppercase;
}


/* =========================================================
   Product name
========================================================= */

.productShowcaseHero h1{
  max-width: 9ch;
  margin: 0;

  color: #FFFFFF;

  font-size: clamp(68px, 7.5vw, 116px);
  line-height: .88;
  letter-spacing: -.065em;
  font-weight: 860;

  text-wrap: balance;

  text-shadow: 0 16px 36px rgba(0,0,0,.22);
}


/* Optional class for long product names */

.productShowcaseHero h1.is-long{
  max-width: 12ch;

  font-size: clamp(54px, 6.2vw, 94px);
  line-height: .94;
  letter-spacing: -.055em;
}


/* =========================================================
   Origin line
========================================================= */

.productShowcaseHero__originLine{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;

  margin: 26px 0 0;

  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.4;
}

.productShowcaseHero__originLabel{
  color: rgba(255,255,255,.70);
  font-weight: 720;
}

.productShowcaseHero__originValue{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;

  color: #FFFFFF;
  font-weight: 840;
}

.productShowcaseHero__originValue span{
  color: #45B777;
  font-weight: 860;
}

.productShowcaseHero__originValue b{
  color: rgba(255,255,255,.48);
  font-weight: 700;
}


/* =========================================================
   Lead text
========================================================= */

.productShowcaseHero__lead{
  max-width: 620px;
  margin: 18px 0 0;

  color: rgba(255,255,255,.82);

  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.62;
  font-weight: 400;
}


/* =========================================================
   Available options
========================================================= */

.productShowcaseHero__options{
  margin-top: 28px;
}

.productShowcaseHero__options > p{
  margin: 0 0 12px;

  color: var(--accent-400);
  font-size: 11px;
  font-weight: 860;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

.productShowcaseHero__optionTags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.productShowcaseHero__optionTags span{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;
  padding: 9px 14px;

  border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--radius-pill);

  background: rgba(255,255,255,.12);
  color: #FFFFFF;

  font-size: 13px;
  font-weight: 780;
  line-height: 1;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


/* =========================================================
   Formats panel
========================================================= */

.productFormatPanel--inline{
  position: relative;

  width: 100%;
  max-width: 500px;

  padding: 0 0 clamp(8px, 2vw, 22px);

  background: transparent;
  border: 0;
  box-shadow: none;

  color: #FFFFFF;
}

.productFormatPanel__label{
  margin: 0 0 18px;

  color: rgba(255,255,255,.88);

  font-size: 12px;
  font-weight: 860;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

.productFormatPanel__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.productFormatPanel__tags span{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;
  padding: 9px 16px;

  border: 1px solid #E0B85C;
  border-radius: var(--radius-pill);

  background:
    linear-gradient(
      180deg,
      #D3A33E 0%,
      #C3912D 100%
    );

  color: #FFFFFF;

  box-shadow:
    0 7px 16px rgba(71,43,3,.11),
    inset 0 1px 0 rgba(255,255,255,.20);

  font-size: 13px;
  font-weight: 790;
  line-height: 1;
}

.productFormatPanel__note{
  max-width: 460px;

  margin: 22px 0 0;
  padding-top: 18px;

  border-top: 1px solid rgba(255,255,255,.16);

  color: rgba(255,255,255,.72);

  font-size: 13px;
  line-height: 1.58;
}


/* =========================================================
   Responsive — tablet
========================================================= */

@media (max-width: 980px){

  .productShowcaseHero{
    min-height: auto;

    padding-top: calc(var(--nav-h) + 50px);
    padding-bottom: 58px;
  }

  .productShowcaseHero__inner{
    min-height: auto;

    grid-template-columns: 1fr;
    gap: 46px;

    align-items: start;
  }

  .productShowcaseHero__content{
    max-width: 720px;
    padding-bottom: 0;
  }

  .productShowcaseHero h1{
    max-width: 10ch;

    font-size: clamp(64px, 11vw, 104px);
  }

  .productFormatPanel--inline{
    max-width: 680px;
    padding-bottom: 0;
  }

  .productShowcaseHero__overlay{
    background:
      linear-gradient(
        90deg,
        rgba(5,48,37,.96) 0%,
        rgba(7,63,48,.88) 44%,
        rgba(7,58,46,.48) 72%,
        rgba(6,31,25,.34) 100%
      ),
      linear-gradient(
        180deg,
        rgba(6,31,25,.28) 0%,
        rgba(6,31,25,.10) 34%,
        rgba(6,31,25,.28) 66%,
        rgba(6,31,25,.82) 100%
      );
  }
}


/* =========================================================
   Responsive — mobile
========================================================= */

@media (max-width: 680px){

  .productShowcaseHero{
    padding-top: calc(var(--nav-h) + 36px);
    padding-bottom: 44px;
  }

  .productShowcaseHero__inner{
    gap: 38px;
  }

  .productShowcaseHero__back{
    margin-bottom: 22px;
    font-size: 13px;
  }

  .productShowcaseHero__badge{
    min-height: 30px;

    margin-bottom: 16px;
    padding: 7px 12px;

    font-size: 10px;
  }

  .productShowcaseHero h1{
    max-width: 10ch;

    font-size: clamp(54px, 17vw, 78px);
    line-height: .92;
    letter-spacing: -.06em;
  }

  .productShowcaseHero h1.is-long{
    max-width: 12ch;

    font-size: clamp(46px, 14vw, 66px);
    line-height: .96;
  }

  .productShowcaseHero__originLine{
    margin-top: 22px;

    font-size: 15px;
  }

  .productShowcaseHero__lead{
    margin-top: 16px;

    font-size: 16px;
    line-height: 1.6;
  }

  .productShowcaseHero__options{
    margin-top: 24px;
  }

  .productShowcaseHero__optionTags{
    gap: 8px;
  }

  .productShowcaseHero__optionTags span{
    min-height: 34px;
    padding: 8px 12px;

    font-size: 12px;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .productFormatPanel__label{
    margin-bottom: 14px;
    font-size: 11px;
  }

  .productFormatPanel__tags{
    gap: 8px;
  }

  .productFormatPanel__tags span{
    min-height: 38px;
    padding: 10px 14px;

    font-size: 13px;
  }

  .productFormatPanel__note{
    margin-top: 18px;
    padding-top: 16px;

    font-size: 12px;
  }

  .productShowcaseHero__overlay{
    background:
      linear-gradient(
        90deg,
        rgba(5,48,37,.96) 0%,
        rgba(7,63,48,.88) 65%,
        rgba(7,58,46,.58) 100%
      ),
      linear-gradient(
        180deg,
        rgba(6,31,25,.34) 0%,
        rgba(6,31,25,.14) 28%,
        rgba(6,31,25,.42) 64%,
        rgba(6,31,25,.88) 100%
      );
  }
}
/* =========================================================
   PRODUCT DETAIL PAGE — Format Panel Inline
========================================================= */

.productFormatPanel{
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  padding: 0;

  color: #FFFFFF;
}

.productFormatPanel::before{
  display: none;
}

.productFormatPanel__label{
  margin: 0 0 22px;

  color: #FFFFFF;
  font-size: 13px;
  font-weight: 880;
  letter-spacing: .16em;
  text-transform: uppercase;

  text-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.productFormatPanel__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.productFormatPanel__tags span{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;
  padding: 9px 16px;

  border: 1px solid #E0B85C;
  border-radius: var(--radius-pill);

  background:
    linear-gradient(
      180deg,
      #D3A33E 0%,
      #C3912D 100%
    );

  color: #FFFFFF;

  box-shadow:
    0 7px 16px rgba(71,43,3,.11),
    inset 0 1px 0 rgba(255,255,255,.20);

  font-size: 13px;
  font-weight: 790;
  line-height: 1;
}

.productFormatPanel__note{
  max-width: 470px;
  margin: 26px 0 0;

  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.66;
}

.productFormatPanel__group + .productFormatPanel__group{
  margin-top: 24px;
}

.productFormatPanel__optionTags{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.productFormatPanel__optionTags span{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;
  padding: 8px 14px;

  border: 1px solid #56B981;
  border-radius: var(--radius-pill);

  background: #237B54;
  color: #FFFFFF;

  box-shadow:
    0 7px 16px rgba(4,31,24,.12),
    inset 0 1px 0 rgba(255,255,255,.14);

  font-size: 12px;
  font-weight: 780;
  line-height: 1;
}
/* =========================================================
   Showcase Hero — Responsive
========================================================= */

@media (max-width: 1180px){
  .productShowcaseHero{
    min-height: auto;
  }

  .productShowcaseHero__inner{
    min-height: auto;
    grid-template-columns: 1fr;
    align-items: end;
  }

  .productShowcaseHero__content{
    max-width: 760px;
  }

  .productFormatPanel{
    max-width: 760px;
    margin-left: 0;
  }
}

@media (max-width: 760px){
  .productShowcaseHero{
    padding-top: calc(var(--nav-h) + 28px);
    padding-bottom: 42px;
  }

  .productShowcaseHero__inner{
    gap: 30px;
  }

  .productShowcaseHero h1{
    font-size: clamp(58px, 17vw, 86px);
  }

  .productShowcaseHero__originLine{
    font-size: 15px;
  }

  .productShowcaseHero__lead{
    font-size: 16px;
  }

  .productShowcaseHero__optionTags span{
    min-height: 34px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .productFormatPanel__label{
    font-size: 12px;
  }

  .productFormatPanel__tags{
    gap: 9px;
  }

  .productFormatPanel__tags span{
    min-height: 36px;
    padding: 9px 13px;
    font-size: 13px;
  }

  .productFormatPanel__note{
    font-size: 14px;
  }
}

/* =========================================================
   PRODUCT DETAIL PAGE — Availability by Origin
========================================================= */

.productOriginDetails{
  padding-top: clamp(68px, 7vw, 104px);
  padding-bottom: clamp(68px, 7vw, 104px);
}


/* =========================================================
   Section header
========================================================= */

.originSectionHead{
  max-width: 1180px;
  margin-inline: auto;
  margin-bottom: 30px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(26px, 5vw, 64px);
  align-items: end;
}

.originSectionHead__content{
  max-width: 750px;
}

.originSectionHead .sectionKicker{
  margin-bottom: 14px;
}



.originSectionHead__lead{
  margin: 18px 0 0;

  color: var(--text-muted);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.68;
}

.originSectionHead__tabs{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;

  padding-bottom: 4px;
}

.originSelector__tabs{
  margin: 0;
}


/* =========================================================
   Selector panels
========================================================= */

.originSelector__panels{
  max-width: 1180px;
  margin-inline: auto;
}


/* =========================================================
   Origin detail panel
========================================================= */

.originDetailPanel{
  position: relative;
  overflow: hidden;

  display: none;

  padding: clamp(28px, 3.8vw, 46px);

  border: 1px solid rgba(10,47,38,.09);
  border-radius: var(--radius-xl);

  background:
    linear-gradient(
      145deg,
      #FFF9F4 0%,
      #F8F3EC 100%
    );

  box-shadow:
    0 22px 54px rgba(10,47,38,.065);

  color: var(--brand-900);
}

.originDetailPanel.is-active{
  display: block;
}

.originDetailPanel[hidden]{
  display: none !important;
}

.originDetailPanel::before{
  content: "";

  position: absolute;
  top: 0;
  left: 34px;
  right: 34px;

  height: 3px;

  border-radius: var(--radius-pill);

  background:
    linear-gradient(
      90deg,
      var(--brand-600) 0%,
      rgba(30,127,78,.36) 62%,
      transparent 100%
    );
}


/* =========================================================
   Origin summary
========================================================= */

.originDetailPanel__summary{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;

  padding-bottom: 28px;

  border-bottom: 1px solid rgba(10,47,38,.09);
}

.originDetailPanel__intro{
  max-width: 720px;
}

.originDetailPanel__kicker{
  margin: 0 0 10px;

  color: var(--brand-600);
  font-size: 11px;
  font-weight: 860;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

.originDetailPanel h3{
  max-width: 20ch;
  margin: 0;

  color: var(--brand-600);
  font-size: clamp(27px, 2.6vw, 38px);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 780;
}



.originDetailPanel__note{
  max-width: 680px;
  margin: 18px 0 0;

  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.68;
}


/* Supplier data */

.originDetailPanel__supplier{
  min-width: 190px;
  padding: 18px 20px;

  border: 1px solid rgba(30,127,78,.12);
  border-radius: var(--radius-lg);

  background: #FFFFFF;

  box-shadow:
    0 10px 28px rgba(10,47,38,.045);
}

.originDetailPanel__dataLabel{
  display: block;

  margin-bottom: 9px;

  color: var(--brand-600);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}

.originDetailPanel__supplier strong{
  display: block;

  color: var(--brand-900);
  font-size: 17px;
  font-weight: 780;
  line-height: 1.3;
}


/* =========================================================
   Variants grid
========================================================= */

.originVariants{
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 300px), 1fr));

  gap: 16px;

  margin-top: 28px;
}


/* =========================================================
   Technical variant card
========================================================= */

.originVariantCard{
  position: relative;
  overflow: hidden;

  min-width: 0;
  padding: 24px;

  border: 1px solid rgba(10,47,38,.09);
  border-radius: var(--radius-lg);

  background: #FFFFFF;

  box-shadow:
    0 12px 32px rgba(10,47,38,.045);

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.originVariantCard:hover{
  transform: translateY(-2px);

  border-color: rgba(30,127,78,.18);

  box-shadow:
    0 17px 38px rgba(10,47,38,.07);
}

.originVariantCard::before{
  content: "";

  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;

  height: 3px;

  border-radius: var(--radius-pill);

  background:
      var(--accent-500);
     
}


/* Card header */

.originVariantCard__header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;

  margin-bottom: 22px;
}

.originVariantCard__eyebrow{
  display: block;

  margin-bottom: 8px;

  color: var(--brand-600);
  font-size: 10px;
  font-weight: 840;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.originVariantCard h4{
  margin: 0;

  color: var(--brand-900);
  font-size: clamp(21px, 1.8vw, 27px);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 780;
}


/* Technical groups */

.originVariantCard__group{
  padding-top: 18px;

  border-top: 1px solid rgba(10,47,38,.08);
}

.originVariantCard__group + .originVariantCard__group{
  margin-top: 18px;
}

.originVariantCard__label{
  display: block;

  margin-bottom: 12px;

  color: var(--text-muted);
  font-size: 10px;
  font-weight: 840;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}


/* Format tags */

.originVariantCard__formats{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.originVariantCard__formats span{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 30px;
  padding: 7px 11px;

  border: 1px solid #E2C77F;
  border-radius: var(--radius-pill);

  background: #F3E5BE;
  color: var(--brand-900);

  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}


/* Variant details */

.originVariantCard__details{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.originVariantCard__details li{
  position: relative;

  padding-left: 14px;

  color: var(--brand-600);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.originVariantCard__details li::before{
  content: "";

  position: absolute;
  left: 0;
  top: .62em;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--brand-600);
}


/* =========================================================
   Technical footer note
========================================================= */

.originDetailPanel__footer{
  margin-top: 26px;
  padding: 17px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  border: 1px solid rgba(30,127,78,.11);
  border-radius: var(--radius-lg);

  background: #EEF6F0;
}

.originDetailPanel__footerLabel{
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: var(--brand-600);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.originDetailPanel__footerLabel::before{
  content: "";

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--brand-600);
}

.originDetailPanel__footer p{
  max-width: 720px;
  margin: 0;

  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px){

  .originSectionHead{
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  .originSectionHead__tabs{
    justify-content: flex-start;
    padding-bottom: 0;
  }

  .originSectionHead .filterTabs{
    margin-inline: 0;
  }

  .originDetailPanel__summary{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .originDetailPanel__supplier{
    width: min(100%, 320px);
  }
}


@media (max-width: 680px){

  .productOriginDetails{
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .originDetailPanel{
    padding: 24px 20px;

    border-radius: var(--radius-lg);
  }

  .originDetailPanel::before{
    left: 20px;
    right: 20px;
  }

  .originDetailPanel h3{
    font-size: clamp(28px, 9vw, 38px);
  }

  .originDetailPanel__summary{
    padding-bottom: 24px;
  }

  .originVariantCard{
    padding: 22px 18px;
  }

  .originVariantCard::before{
    left: 18px;
    right: 18px;
  }

  .originVariantCard__formats span{
    white-space: normal;
  }

  .originDetailPanel__footer{
    align-items: flex-start;
    flex-direction: column;

    padding: 16px 18px;
  }
}
/* =========================================================
   PRODUCT DETAIL PAGE — Applications
========================================================= */

.productApplicationsEditorial{
  --section-py: clamp(46px, 5vw, 68px);
}


/* Main layout */

.productApplicationsEditorial__inner{
  max-width: 1120px;
  margin-inline: auto;

  display: grid;
  grid-template-columns: minmax(230px, .42fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}


/* =========================================================
   Header
========================================================= */

.productApplicationsEditorial__head{
  max-width: 330px;
}

.productApplicationsEditorial__head .sectionKicker{
  margin-bottom: 14px;
}

.productApplicationsEditorial__head h2{
  max-width: 12ch;
  margin: 0;

  color: var(--brand-900);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 780;
}


/* =========================================================
   Applications list
========================================================= */

.productApplicationsEditorial__list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}


/* =========================================================
   Application unit
========================================================= */

.productApplicationUnit{
  position: relative;
  overflow: hidden;

  min-height: 92px;
  padding: 18px 20px;

  display: flex;
  align-items: center;
  gap: 14px;

  border: 1px solid rgba(10,47,38,.08);
  border-radius: var(--radius-lg);

  background: #FFFFFF;
  color: var(--brand-900);

  box-shadow:
    0 10px 26px rgba(10,47,38,.04);

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition),
    color var(--transition);
}


/* Gold line */

.productApplicationUnit::before{
  content: "";

  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;

  height: 3px;

  border-radius: var(--radius-pill);

  background:
    linear-gradient(
      90deg,
      var(--accent-500) 0%,
      rgba(201,151,53,.34) 74%,
      transparent 100%
    );

  transition:
    background var(--transition),
    left var(--transition),
    right var(--transition);
}




/* =========================================================
   Icon
========================================================= */

.productApplicationUnit__icon{
  flex: 0 0 auto;

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(201,151,53,.30);
  border-radius: 50%;

  background: #F6EBCF;
  color: var(--accent-500);

  transition:
    border-color var(--transition),
    background var(--transition),
    color var(--transition);
}

.productApplicationUnit__icon svg{
  width: 19;
  height: 19px;

  display: block;

  fill: currentColor;
  color: currentColor;
}



/* =========================================================
   Label
========================================================= */

.productApplicationUnit__label{
  min-width: 0;

  color: inherit;

  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 760;
  line-height: 1.16;
  letter-spacing: -.02em;

  transition: color var(--transition);
}


/* =========================================================
   PRODUCT DETAIL PAGE — Responsive
========================================================= */

@media (max-width: 1080px){
  .productDetailHero__inner{
    grid-template-columns: 1fr;
  }

  .productDetailHero__content{
    max-width: 820px;
    text-align: center;
    margin-inline: auto;
  }

  .productDetailHero h1,
  .productDetailHero__lead{
    margin-inline: auto;
  }

  .productDetailHero__chips .chipGroup{
    justify-content: center;
  }

  .productDetailHero__media{
    min-height: 380px;
  }

  .productOriginDetails__grid{
    grid-template-columns: 1fr;
  }

  .productApplications__inner{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .productApplications h2,
  .productApplications p:not(.sectionKicker){
    margin-inline: auto;
  }

  .productApplications .chipGroup{
    justify-content: center;
  }
}

@media (max-width: 760px){
  .productDetailHero{
    padding-top: calc(var(--nav-h) + 46px);
  }

  .productDetailHero h1{
    font-size: clamp(54px, 17vw, 82px);
  }

  .productDetailHero__media{
    min-height: 280px;
    border-radius: var(--radius-lg);
  }

  .productInfoCard{
    min-height: auto;
    padding: 22px;
  }

  .productOriginCard{
    padding: 24px;
    border-radius: var(--radius-lg);
  }

  .productOriginCard h3{
    font-size: clamp(28px, 9vw, 38px);
  }

  .productApplications h2{
    font-size: clamp(34px, 11vw, 48px);
  }

  .relatedProductCard{
    min-height: auto;
    padding: 22px;
  }
}

@media (max-width: 520px){
  .productDetailHero__chips{
    gap: 10px;
  }

  .productDetailHero__chips .chipGroup{
    gap: 6px;
  }

  .productDetailHero__chips .chip{
    min-height: 28px;
    padding: 7px 10px;
    font-size: 11px;
  }
}


/* =========================================================
   PRODUCT SHOWCASE HERO INTRO
   Product detail page
   ========================================================= */


/* ---------------------------------------------------------
   1. Initial state
   ---------------------------------------------------------

   Elements are hidden only when JavaScript has successfully
   added .motion-ready to the document.

   If JavaScript fails, the hero remains fully visible.
   --------------------------------------------------------- */

.motion-ready .productShowcaseIntro__item,
.motion-ready .productShowcaseIntro__panel,
.motion-ready .productShowcaseIntro__media {
  opacity: 0;
  visibility: hidden;
}


/* ---------------------------------------------------------
   2. Content sequence
   --------------------------------------------------------- */

.motion-ready.motion-loaded .productShowcaseIntro__item {
  visibility: visible;

  animation-name: productShowcaseContentReveal;
  animation-duration: 850ms;
  animation-timing-function: var(--motion-ease-standard);
  animation-fill-mode: both;
}


/* Back link */

.motion-ready.motion-loaded .productShowcaseIntro__item--1 {
  animation-delay: 120ms;
}


/* Category badge */

.motion-ready.motion-loaded .productShowcaseIntro__item--2 {
  animation-delay: 220ms;
}


/* Product name */

.motion-ready.motion-loaded .productShowcaseIntro__item--3 {
  animation-delay: 340ms;
}


/* Origins */

.motion-ready.motion-loaded .productShowcaseIntro__item--4 {
  animation-delay: 470ms;
}


/* Introductory text */

.motion-ready.motion-loaded .productShowcaseIntro__item--5 {
  animation-delay: 600ms;
}


/* ---------------------------------------------------------
   3. Availability panel
   --------------------------------------------------------- */

.motion-ready.motion-loaded .productShowcaseIntro__panel {
  visibility: visible;

  animation-name: productShowcasePanelReveal;
  animation-duration: 1000ms;
  animation-timing-function: var(--motion-ease-soft);
  animation-delay: 420ms;
  animation-fill-mode: both;
}


/* ---------------------------------------------------------
   4. Background image
   --------------------------------------------------------- */

.motion-ready.motion-loaded .productShowcaseIntro__media {
  visibility: visible;

  animation-name: productShowcaseMediaReveal;
  animation-duration: 1400ms;
  animation-timing-function: var(--motion-ease-soft);
  animation-delay: 80ms;
  animation-fill-mode: both;
}


/* ---------------------------------------------------------
   5. Keyframes
   --------------------------------------------------------- */

@keyframes productShowcaseContentReveal {
  from {
    opacity: 0;
    translate: 0 28px;
  }

  to {
    opacity: 1;
    translate: none;
  }
}


@keyframes productShowcasePanelReveal {
  from {
    opacity: 0;
    translate: 32px 0;
    scale: 0.985;
  }

  to {
    opacity: 1;
    translate: none;
    scale: 1;
  }
}


@keyframes productShowcaseMediaReveal {
  from {
    opacity: 0;
    scale: 1.045;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}


/* ---------------------------------------------------------
   6. Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .motion-ready .productShowcaseIntro__item,
  .motion-ready .productShowcaseIntro__panel,
  .motion-ready .productShowcaseIntro__media,
  .motion-ready.motion-loaded .productShowcaseIntro__item,
  .motion-ready.motion-loaded .productShowcaseIntro__panel,
  .motion-ready.motion-loaded .productShowcaseIntro__media {
    opacity: 1 !important;
    visibility: visible !important;
    translate: none !important;
    scale: 1 !important;
    animation: none !important;
  }
}

/* =========================================================
   PRODUCT DETAIL PAGE — Applications Editorial
========================================================= */

.productApplicationsEditorial__inner{
  position: relative;
  z-index: 1;

  max-width: var(--container);
  margin-inline: auto;

  display: grid;
  gap: clamp(34px, 4vw, 48px);
}

.productApplicationsEditorial__head{
  max-width: 760px;
  margin-inline: auto;

  text-align: left;
}

.productApplicationsEditorial__head .sectionKicker{
  margin-bottom: 14px;
  color: var(--accent-400);
}

.productApplicationsEditorial__head h2{
  max-width: 720px;
  margin: 0 auto;

  color: var(--text-inverse);
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 760;
}


/* Application units */

.productApplicationsEditorial__list{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.productApplicationUnit{
  position: relative;
  overflow: hidden;

  min-height: 84px;
  padding: 16px 18px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;

  border: 1px solid rgba(10,47,38,.08);
  border-radius: var(--radius-lg);

  background: #FFFFFF;
  color: var(--brand-900);

  text-align: left;

  box-shadow:
    0 10px 26px rgba(10,47,38,.04);

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition),
    color var(--transition);
}

.productApplicationUnit::before{
  content: "";

  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;

  height: 3px;

  border-radius: var(--radius-pill);
  background: var(--accent-500);

  transition:
    left var(--transition),
    right var(--transition),
    background var(--transition);
}


.productApplicationUnit__icon{
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;
  border: 1px solid rgba(201, 151, 53, .34);
  background: rgba(201, 151, 53, .16);
  color: var(--accent-500);
}

.productApplicationUnit__icon svg{
  width: 22px;
  height: 22px;

  display: block;

  fill: currentColor;
  color: currentColor;
}

.productApplicationUnit__label{
  display: block;

  color: var(--brand-900);
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
}

@media (hover: hover) and (pointer: fine) {
  .productApplicationUnit:hover {
    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.16);
    background: var(--brand-600);
    color: #fff;

    box-shadow:
      0 16px 34px rgba(3, 30, 23, 0.16);
  }

  .productApplicationUnit:hover::before {
    left: 0;
    right: 0;
    background: #fff;
  }

  .productApplicationUnit:hover .productApplicationUnit__icon {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }

  .productApplicationUnit:hover .productApplicationUnit__label {
    color: #fff;
  }
}
/* Responsive */

@media (max-width: 980px){
  .productApplicationsEditorial__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px){
  .productApplicationsEditorial{
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .productApplicationsEditorial__head{
    text-align: left;
    margin-inline: 0;
  }

  .productApplicationsEditorial__head h2{
    margin-inline: 0;
    font-size: clamp(32px, 10vw, 44px);
  }
}

/* =========================================================
   PRODUCT APPLICATIONS — RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .productApplicationsEditorial__inner {
    gap: 28px;
  }

  .productApplicationsEditorial__head {
    max-width: 620px;
  }

  .productApplicationsEditorial__head h2 {
    max-width: 16ch;
  }
}

@media (max-width: 680px) {

  .productApplicationsEditorial {
    --section-py: 52px;
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .productApplicationsEditorial__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .productApplicationsEditorial__head {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    text-align: left;
  }

  .productApplicationsEditorial__head h2 {
    max-width: 12ch;
    margin-inline: 0;

    font-size: clamp(32px, 10vw, 44px);
  }


  /* Grid 2x2 */

  .productApplicationsEditorial__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }


  /* Card */

  .productApplicationUnit {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    width: 100%;
    min-width: 0;
    min-height: 142px;
    padding: 18px 14px;

    border-radius: 18px;

    opacity: 1;
    overflow: hidden;
  }


  /* Neutralizar estados táctiles */

  .productApplicationUnit,
  .productApplicationUnit:hover,
  .productApplicationUnit:active,
  .productApplicationUnit:focus,
  .productApplicationUnit:focus-visible,
  .productApplicationUnit:focus-within {
    border-color: rgba(10, 47, 38, 0.08);
    background: #fff;
    color: var(--brand-900);

    box-shadow:
      0 10px 26px rgba(10, 47, 38, 0.04);

    transform: none !important;
    translate: none !important;
  }


  /* Línea superior */

  .productApplicationUnit::before,
  .productApplicationUnit:hover::before,
  .productApplicationUnit:active::before,
  .productApplicationUnit:focus::before,
  .productApplicationUnit:focus-visible::before {
    top: 0;
    left: 14px;
    right: 14px;

    background: var(--accent-500);
    transform: none;
  }


  /* Icono */

  .productApplicationUnit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    margin: 0;
  }

  .productApplicationUnit__icon,
  .productApplicationUnit:hover .productApplicationUnit__icon,
  .productApplicationUnit:active .productApplicationUnit__icon,
  .productApplicationUnit:focus .productApplicationUnit__icon,
  .productApplicationUnit:focus-visible .productApplicationUnit__icon {
    border-color: rgba(201, 151, 53, 0.34);
    background: rgba(201, 151, 53, 0.16);
    color: var(--accent-500);

    opacity: 1;
    transform: none !important;
  }

  .productApplicationUnit__icon svg {
    width: 22px;
    height: 22px;
  }


  /* Texto */

  .productApplicationUnit__label {
    display: block;

    width: 100%;
    max-width: none;
    margin-top: 18px;

    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .productApplicationUnit__label,
  .productApplicationUnit:hover .productApplicationUnit__label,
  .productApplicationUnit:active .productApplicationUnit__label,
  .productApplicationUnit:focus .productApplicationUnit__label,
  .productApplicationUnit:focus-visible .productApplicationUnit__label {
    color: var(--brand-900);

    opacity: 1;
    visibility: visible;
    transform: none !important;
  }
}

@media (max-width: 380px) {

  .productApplicationsEditorial__list {
    gap: 10px;
  }

  .productApplicationUnit {
    min-height: 128px;
    padding: 15px 12px;
  }

  .productApplicationUnit__icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .productApplicationUnit__icon svg {
    width: 20px;
    height: 20px;
  }

  .productApplicationUnit__label {
    margin-top: 14px;
    font-size: 1.0rem;
  }
}

/* =========================================================
   PRODUCT DETAIL PAGE — Next Step / Related + CTA
========================================================= */


/* Main layout */

.productNextStep__grid{
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(340px, .72fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: stretch;

  max-width: 1180px;
  margin-inline: auto;
}


/* =========================================================
   PRODUCT DETAIL PAGE — Related Products
========================================================= */

.productNextStep__related{
  min-width: 0;
}

.productNextStep__head{
  --head-max: 540px;
  --lead-max: 520px;

  margin-bottom: 28px;
}

.productNextStep__head .sectionKicker{
  margin-bottom: 14px;
}

.productNextStep__head .sectionTitle{
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 760;
}

.productNextStep__head .sectionLead{
  margin-top: 14px;

  font-size: 15px;
  line-height: 1.65;
}

.productRelatedTiles{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.productRelatedTile{
  position: relative;
  overflow: hidden;

  min-height: 130px;
  padding: 22px 24px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  border: 1px solid rgba(10,47,38,.08);
  border-radius: var(--radius-lg);
  background: #FFFFFF;
  color: var(--brand-900);
  text-decoration: none;

  box-shadow: 0 12px 30px rgba(10,47,38,.04);

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

.productRelatedTile::before{
  content: "";

  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;

  height: 3px;

  border-radius: var(--radius-pill);
  background: var(--brand-600);

  transition:
    left var(--transition),
    right var(--transition),
    background var(--transition);
}

.productRelatedTile:nth-child(even)::before{
  background: var(--accent-500);
}

.productRelatedTile:hover{
  transform: translateY(-2px);
  border-color: rgba(30,127,78,.18);
  box-shadow: 0 16px 36px rgba(10,47,38,.07);
}

.productRelatedTile:hover::before{
  left: 0;
  right: 0;
}

.productRelatedTile__kicker{
  position: relative;
  z-index: 1;

  margin-bottom: 12px;

  color: var(--brand-600);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}

.productRelatedTile strong{
  position: relative;
  z-index: 1;

  color: var(--brand-900);
  font-size: clamp(20px, 1.65vw, 27px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 740;
}

.productRelatedTile__origins{
  position: relative;
  z-index: 1;

  margin-top: 12px;

  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.productRelatedTile__watermark{
  position: absolute;
  right: 14px;
  bottom: 8px;

  width: 68px;
  height: 68px;

  color: var(--brand-600);
  opacity: .025;

  transform: translate(8px, 8px) scale(.92);

  transition:
    opacity var(--transition),
    transform var(--transition);
}

.productRelatedTile__watermark svg{
  width: 100%;
  height: 100%;

  fill: currentColor;
  color: currentColor;
}

.productRelatedTile:hover .productRelatedTile__watermark{
  opacity: .07;
  transform: translate(0, 0) scale(1);
}

.productRelatedTile small{
  position: relative;
  z-index: 1;

  margin-top: auto;
  padding-top: 18px;

  color: var(--brand-600);
  font-size: 13px;
  font-weight: 840;
  line-height: 1;
}

.productRelatedTile small span{
  color: var(--accent-600);
}


/* CTA card */

.productNextCta{
  position: relative;
  overflow: hidden;

  min-height: 100%;
  padding: clamp(28px, 3.2vw, 42px);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  border-radius: var(--radius-xl);
  border: 1px solid rgba(201,151,53,.22);
  background:radial-gradient(
      circle at 88% 18%,
      rgba(201,151,53,.10) 0%,
      rgba(201,151,53,.04) 18%,
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #1A6048 0%,
      #10503D 50%,
      #0B3D30 100%
    );

  color: var(--text-inverse);
  box-shadow: 0 22px 58px rgba(10,47,38,.16);
}

.productNextCta::before{
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;

  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent-500);
}

.productNextCta::after{
  content: "";
  position: absolute;
  right: -58px;
  bottom: -58px;

  width: 190px;
  height: 190px;

  border-radius: 50%;
  border: 1px solid rgba(201,151,53,.16);

  pointer-events: none;
}

.productNextCta__eyebrow{
  margin: 0 0 16px;

  color: var(--accent-400);
  font-size: 11px;
  font-weight: 880;
  letter-spacing: .15em;
  line-height: 1;
  text-transform: uppercase;
}

.productNextCta h2{
  position: relative;
  z-index: 1;

  max-width: 17ch;
  margin: 0;

  color: var(--text-inverse);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 850;
}

.productNextCta p:not(.productNextCta__eyebrow){
  position: relative;
  z-index: 1;

  max-width: 440px;
  margin: 22px 0 0;

  color: var(--text-inverse-muted);
  font-size: 15px;
  line-height: 1.72;
}

.productNextCta__actions{
  position: relative;
  z-index: 1;

  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 30px;
}

.productNextCta--solo{
  max-width: 760px;
  min-height: auto;
  margin-inline: auto;
}


/* Responsive */

@media (max-width: 980px){
  .productNextStep__grid{
    grid-template-columns: 1fr;
  }

  .productNextCta{
    min-height: auto;
  }

  .productNextCta h2{
    max-width: 20ch;
  }
}

@media (max-width: 680px){
  .productNextStep{
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .productNextStep__head h2{
    font-size: clamp(32px, 10vw, 46px);
  }

  .productRelatedTiles{
    grid-template-columns: 1fr;
  }

  .productRelatedTile{
    min-height: 156px;
    padding: 22px;
  }

  .productNextCta{
    padding: 28px 24px;
    border-radius: var(--radius-lg);
  }

  .productNextCta::before{
    left: 24px;
    right: 24px;
  }

  .productNextCta h2{
    font-size: clamp(30px, 9vw, 40px);
  }

  .productNextCta__actions{
    width: 100%;
  }

  .productNextCta__actions .btn{
    width: 100%;
    justify-content: center;
  }
}

.productBreadcrumb {
  display: block;
}

.productBreadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;

  margin: 0 0 26px;
  padding: 0;

  list-style: none;
}

.productBreadcrumb__item,
.productBreadcrumb__separator {
  font-size: 0.82rem;
  line-height: 1.4;
}

.productBreadcrumb__item a {
  color: inherit;
  text-decoration: none;
  opacity: 0.78;

  transition:
    opacity 180ms ease,
    color 180ms ease;
}

.productBreadcrumb__item a:hover,
.productBreadcrumb__item a:focus-visible {
  opacity: 1;
}

.productBreadcrumb__item--current {
  opacity: 0.62;
}

.productBreadcrumb__separator {
  opacity: 0.42;
}