/* Car diffuser route only. Product photography and catalog data remain original. */
.diffuser-page {
  background: #0b0908;
}
.diffuser-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0b0908 url('../img/car-diffuser/dashboard-stage.webp') center 69% / cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.diffuser-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,#0b0908e8 0%,#0b0908bd 29%,#0b090800 57%,#0b09081a);
}
.diffuser-hero-inner {
  display: grid;
  grid-template-columns: 43% minmax(0,1fr);
  min-height: clamp(490px,39vw,620px);
  position: relative;
}
.diffuser-hero-copy {
  align-self: center;
  padding: 54px 0 75px;
  position: relative;
  z-index: 2;
  animation: arrive .7s ease both;
}
.diffuser-hero .collection-eyebrow {
  justify-content: flex-start;
  gap: 17px;
  font-size: 11px;
  letter-spacing: .32em;
  margin-bottom: 21px;
}
.diffuser-hero .collection-eyebrow::before, .diffuser-hero .collection-eyebrow::after {
  width: 39px;
  flex-shrink: 0;
}
.diffuser-hero h1 {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: clamp(69px,6.4vw,105px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.045em;
  white-space: nowrap;
  margin: 0 0 24px;
}
.diffuser-hero h1 em {
  color: #f0c45a;
}
.diffuser-hero-description {
  font-size: clamp(15px,1.3vw,19px);
  line-height: 1.75;
  max-width: 420px;
  color: var(--champagne);
  margin-bottom: 29px;
}
.diffuser-page .diffuser-shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 53px;
  padding: 14px 27px;
  gap: 12px;
  border-radius: 999px;
  background: linear-gradient(115deg,#f6ce6d,#edbb41 52%,#d4a63a);
  color: #171005;
  border: 1px solid #f0c45a;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 7px 25px #0002;
  transition: transform .2s,background .2s,box-shadow .2s;
}
.diffuser-shop .icon {
  width: 23px;
  height: 23px;
}
.diffuser-page .diffuser-shop:hover {
  background: linear-gradient(115deg,#ffda7c,#f0c45a);
  color: #171005;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px #d4a63a25;
}
.diffuser-hero-scene {
  position: relative;
  min-width: 0;
  animation: arrive .9s .1s ease both;
}
.diffuser-products {
  position: absolute;
  inset: 0 24% 0 -8%;
  margin: 0;
}
.diffuser-products::after {
  content: '';
  position: absolute;
  left: 13%;
  right: 2%;
  bottom: 10%;
  height: 7%;
  background: radial-gradient(ellipse,#0009,transparent 70%);
  z-index: -1;
}
.diffuser-bottle {
  position: absolute;
  height: 87%;
  width: auto;
  max-width: 67%;
  bottom: 9%;
  object-fit: contain;
  object-position: center bottom;
  overflow: visible;
  filter: drop-shadow(4px 8px 7px #0005);
}
.diffuser-bottle--mocha {
  left: -3%;
  transform: rotate(-4deg);
}
.diffuser-bottle--cotton {
  right: -5%;
  transform: rotate(3deg);
}
.diffuser-benefits {
  position: absolute;
  right: -10px;
  width: 174px;
  top: 50%;
  transform: translateY(-53%);
  padding: 23px 16px;
  border: 1px solid #bd91498c;
  border-radius: 25px;
  background: linear-gradient(135deg,#241b0edb,#100e0bc9);
  box-shadow: 0 12px 36px #0003,inset 0 1px 0 #f0c45a16;
  backdrop-filter: blur(12px);
}
.diffuser-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 27px;
}
.diffuser-benefits li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--champagne);
}
.diffuser-benefits .icon {
  color: #f0c45a;
  width: 29px;
  height: 29px;
  stroke-width: 1.2;
}
.diffuser-benefits li span span {
  color: #f0c45a;
}
.diffuser-marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid #b88d354f;
  background: linear-gradient(90deg,#100d08,#151006,#0b0908);
}
.diffuser-marquee-track {
  width: max-content;
  display: flex;
  animation: diffuser-drift 42s linear infinite;
}
.diffuser-marquee-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 39px;
  padding: 17px 39px 17px 0;
  min-width: max(100vw,1000px);
}
.diffuser-marquee-group > span {
  display: flex;
  align-items: center;
  gap: 17px;
  color: var(--champagne);
  font-size: 13px;
  white-space: nowrap;
}
.diffuser-marquee-group .icon {
  color: #f0c45a;
  width: 27px;
  height: 27px;
  stroke-width: 1.3;
}
.diffuser-marquee-group b {
  font-weight: 400;
  font-size: 8px;
  color: #f0c45a;
}
.diffuser-page .diffuser-marquee-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: #0b0908;
  border: 1px solid var(--line);
  border-radius: 50%;
  min-width: 32px;
  min-height: 32px;
  padding: 7px;
  color: #d4a63a;
}
.diffuser-marquee-toggle .icon {
  width: 15px;
  height: 15px;
}
.diffuser-marquee:hover .diffuser-marquee-track, .diffuser-marquee:focus-within .diffuser-marquee-track, .diffuser-marquee.is-paused .diffuser-marquee-track {
  animation-play-state: paused;
}
@keyframes diffuser-drift {
  to {
    transform: translateX(-25%);
  }
}
.diffuser-collection {
  position: relative;
  isolation: isolate;
  padding: 39px 0 70px;
  scroll-margin-top: 0;
}
.diffuser-collection::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  height: 210px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at -4% 95%,#b7791735,transparent 32%),radial-gradient(ellipse at 104% 90%,#b779172e,transparent 31%);
}
.diffuser-collection::after {
  content: '';
  position: absolute;
  top: 100px;
  inset-inline: 0;
  height: 100px;
  z-index: -1;
  pointer-events: none;
  background: url('../img/car-diffuser/gold-ribbons.svg') center / 100% 100% no-repeat;
  opacity: .6;
}
.diffuser-page .collection-heading {
  margin-bottom: 22px;
}
.diffuser-page .collection-heading .collection-eyebrow {
  margin-bottom: 8px;
  font-size: 10px;
}
.diffuser-page .collection-heading h2 {
  font-size: clamp(37px,4vw,58px);
}
.diffuser-search {
  margin: 0 auto 34px;
  max-width: 650px;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: linear-gradient(120deg,#17120d,#100e0b);
  border: 1px solid #d4a63a;
  border-radius: 999px;
}
.diffuser-search > .icon {
  width: 23px;
  height: 23px;
  color: #f0c45a;
}
.diffuser-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--champagne);
  padding: 16px 0;
  font-size: 13px;
  outline: none;
  box-shadow: none;
}
.diffuser-search input::placeholder {
  color: #b9b0a3;
  opacity: 1;
}
.diffuser-search input::-webkit-search-cancel-button {
  display: none;
}
.diffuser-search:focus-within {
  border-color: #f0c45a;
  box-shadow: 0 0 0 3px #d4a63a20;
}
.diffuser-search input:focus-visible {
  outline: none;
}
.diffuser-search-clear {
  padding: 7px;
  min-width: 32px;
  min-height: 32px;
}
.diffuser-search-clear .icon {
  width: 17px;
  height: 17px;
}
.diffuser-no-results {
  padding: 28px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #17120d;
  color: var(--muted);
}
.diffuser-reset {
  border: 0;
  background: none;
  padding: 0;
  color: #f0c45a;
  text-decoration: underline;
}
.diffuser-page .diffuser-catalog .flip-box {
  border: 0;
  border-radius: 0;
}
.diffuser-page .flip-box-front img, .diffuser-page .flip-box-back img {
  aspect-ratio: 1;
  border-radius: 0;
  object-fit: cover;
}
.diffuser-page .flip-box-front, .diffuser-page .flip-box-back {
  will-change: auto;
}
.diffuser-page .flip-box:focus-visible:not(.is-flipped):not(:hover) .flip-box-front {
  opacity: 1;
  transform: none;
}
.diffuser-page .flip-box:focus-visible:not(.is-flipped):not(:hover) .flip-box-back {
  opacity: 0;
}
.diffuser-page .diffuser-info-btn {
  background: #17120de8;
  color: #f0c45a;
  border: 1px solid #d4a63a90;
  box-shadow: 0 3px 10px #0003;
}
.diffuser-info-btn .icon {
  width: 18px;
  height: 18px;
}
.diffuser-page .diffuser-product-eyebrow {
  font-size: 9px;
  letter-spacing: .19em;
  color: #ddbc70;
  margin-bottom: 8px;
}
.diffuser-page .collection-product-info h3 {
  margin-right: 0;
  font-size: 29px;
}
.diffuser-scent-description {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.75;
  margin: 8px 0 19px;
}
.diffuser-page .collection-notes {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.collection-notes .icon {
  width: 13px;
  height: 13px;
}
.diffuser-page .perfume-modal-img-wrapper img {
  max-height: 300px;
}
@media (min-width: 1600px) {
  .diffuser-hero-inner {
    width: min(1540px,calc(100% - 150px));
  }
  .diffuser-benefits {
    width: 200px;
    padding: 28px 20px;
    right: 0;
  }
  .diffuser-benefits li {
    font-size: 13px;
  }
  .diffuser-benefits .icon {
    width: 34px;
    height: 34px;
  }
  .diffuser-products {
    right: 25%;
  }
}
@media (max-width: 1199px) {
  .diffuser-hero-inner {
    grid-template-columns: 42% minmax(0,1fr);
    min-height: 470px;
  }
  .diffuser-hero h1 {
    font-size: clamp(60px,6.4vw,78px);
  }
  .diffuser-hero .collection-eyebrow {
    font-size: 9px;
    gap: 11px;
    letter-spacing: .25em;
  }
  .diffuser-hero .collection-eyebrow::before, .diffuser-hero .collection-eyebrow::after {
    width: 25px;
  }
  .diffuser-hero-description {
    font-size: 14px;
    max-width: 340px;
  }
  .diffuser-benefits {
    width: 148px;
    padding: 20px 12px;
    right: -25px;
  }
  .diffuser-benefits li {
    font-size: 10px;
    gap: 9px;
  }
  .diffuser-benefits .icon {
    width: 25px;
    height: 25px;
  }
  .diffuser-products {
    right: 23%;
    left: -10%;
  }
  .diffuser-bottle {
    bottom: 11%;
    height: 85%;
  }
}
@media (max-width: 991px) {
  .diffuser-hero-inner {
    min-height: 580px;
    grid-template-columns: 43% minmax(0,1fr);
  }
  .diffuser-hero-copy {
    padding-bottom: 130px;
  }
  .diffuser-hero h1 {
    white-space: normal;
    font-size: 68px;
  }
  .diffuser-hero h1 em {
    display: block;
  }
  .diffuser-products {
    right: 4%;
    left: 0;
    bottom: 72px;
  }
  .diffuser-bottle {
    height: 78%;
    max-width: 62%;
    bottom: 7%;
  }
  .diffuser-bottle--mocha {
    left: 0;
  }
  .diffuser-bottle--cotton {
    right: 0;
  }
  .diffuser-benefits {
    right: 0;
    left: 0;
    width: auto;
    top: auto;
    bottom: 20px;
    transform: none;
    padding: 16px;
    border-radius: 16px;
  }
  .diffuser-benefits ul {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 15px;
  }
  .diffuser-benefits li {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    font-size: 9px;
  }
  .diffuser-benefits .icon {
    width: 25px;
    height: 25px;
  }
  .diffuser-hero-description {
    font-size: 14px;
  }
  .diffuser-page .diffuser-shop {
    font-size: 11px;
    padding-inline: 20px;
  }
}
@media (max-width: 700px) {
  .diffuser-hero {
    background: #0b0908;
  }
  .diffuser-hero::before {
    display: none;
  }
  .diffuser-hero-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    width: 100%;
  }
  .diffuser-hero-copy {
    text-align: center;
    padding: 36px 24px 23px;
    background: radial-gradient(ellipse at 90% 0,#78501e23,transparent 70%);
  }
  .diffuser-hero .collection-eyebrow {
    justify-content: center;
    font-size: 9px;
    letter-spacing: .24em;
    margin-bottom: 13px;
  }
  .diffuser-hero h1 {
    font-size: clamp(53px,11vw,75px);
    white-space: nowrap;
    margin-bottom: 15px;
  }
  .diffuser-hero h1 em {
    display: inline;
  }
  .diffuser-hero-description {
    max-width: 340px;
    margin: 0 auto 21px;
    font-size: 13px;
  }
  .diffuser-page .diffuser-shop {
    min-height: 49px;
    font-size: 12px;
    padding: 12px 24px;
  }
  .diffuser-hero-scene {
    height: clamp(430px,97vw,570px);
    background: url('../img/car-diffuser/dashboard-stage.webp') 64% 75% / auto 110% no-repeat;
  }
  .diffuser-products {
    inset: 0 9% 107px;
    max-width: 510px;
    margin-inline: auto;
  }
  .diffuser-bottle {
    bottom: 6%;
    height: 88%;
    max-width: 67%;
  }
  .diffuser-bottle--mocha {
    left: -3%;
  }
  .diffuser-bottle--cotton {
    right: -5%;
  }
  .diffuser-benefits {
    left: 20px;
    right: 20px;
    bottom: 16px;
    padding: 14px 12px;
    background: #100e0bdd;
  }
  .diffuser-benefits ul {
    gap: 8px;
  }
  .diffuser-benefits li {
    font-size: 10px;
    line-height: 1.45;
    gap: 8px;
  }
  .diffuser-benefits .icon {
    width: 24px;
    height: 24px;
  }
  .diffuser-marquee-group {
    padding-block: 14px;
    gap: 25px;
    min-width: 820px;
  }
  .diffuser-marquee-group > span {
    font-size: 11px;
    gap: 12px;
  }
  .diffuser-marquee-group .icon {
    width: 24px;
    height: 24px;
  }
  .diffuser-collection {
    padding-top: 30px;
    padding-bottom: 45px;
    scroll-margin-top: 0;
  }
  .diffuser-page .collection-heading .collection-eyebrow {
    font-size: 9px;
    gap: 14px;
  }
  .diffuser-page .collection-heading .collection-eyebrow::before, .diffuser-page .collection-heading .collection-eyebrow::after {
    width: 28px;
  }
  .diffuser-search {
    gap: 10px;
    padding-inline: 15px;
    margin-bottom: 24px;
    min-height: 50px;
    border-radius: 25px;
  }
  .diffuser-search input {
    font-size: 16px;
  }
  .diffuser-search input::placeholder {
    font-size: 12px;
  }
  .diffuser-search > .icon {
    width: 20px;
    height: 20px;
  }
  .diffuser-page .collection-status {
    font-size: 9px;
  }
  .diffuser-page .collection-product-info h3 {
    font-size: 24px;
  }
  .diffuser-scent-description {
    font-size: 10px;
    margin-bottom: 12px;
  }
  .diffuser-page .collection-product-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .diffuser-page .collection-notes {
    font-size: 10px;
    min-height: 36px;
    padding: 7px 10px;
  }
  .diffuser-page .diffuser-info-btn {
    width: 32px;
    height: 32px;
    top: 8px;
    right: 8px;
  }
  .diffuser-page .collection-product-info {
    padding: 14px 11px;
  }
}
@media (max-width: 360px) {
  .diffuser-hero h1 {
    font-size: 51px;
  }
  .diffuser-hero-copy {
    padding-inline: 18px;
  }
  .diffuser-benefits {
    left: 12px;
    right: 12px;
    padding-inline: 10px;
  }
  .diffuser-benefits li {
    font-size: 9.5px;
  }
  .diffuser-page .collection-status {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .diffuser-page .collection-product-info h3 {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .diffuser-hero-copy, .diffuser-hero-scene, .diffuser-marquee-track {
    animation: none;
  }
  .diffuser-page *, .diffuser-page *::before, .diffuser-page *::after {
    transition: none !important;
  }
}