/* ============================================================
   Scentry — design refinement layer.
   Loaded after style.css. Purely additive polish: unified gold
   accent, elevated cards, softer surfaces, micro-interactions,
   scroll reveal. Delete the <link> to return to the base look.
   ============================================================ */
:root {
  --gold:#a3763a;
  --gold-deep:#7d5726;
  --gold-soft:#e8d9c2;
  --shadow-sm:0 1px 2px #1c130a0a,0 4px 12px #1c130a0d;
  --shadow-md:0 2px 6px #1c130a0f,0 14px 34px -8px #1c130a1f;
  --ease:cubic-bezier(.4,.14,.2,1);
}

::selection {
  background:var(--gold-soft);
  color:#1a1208;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline-color:var(--gold);
  outline-offset:3px;
  border-radius:3px;
}

/* --- Header: stays with the reader, lifts once the page scrolls --- */
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  /* isolate: the logo's mix-blend-mode repaints wrong inside a sticky layer. */
  isolation:isolate;
  max-width:100%;
  padding-inline:6.3%;
  background:#fdfcfa;
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}

.site-header.is-stuck {
  box-shadow:var(--shadow-sm);
  border-bottom-color:#00000010;
}

.desktop-nav a:hover {
  color:var(--gold-deep);
}

.desktop-nav a:hover:after,.desktop-nav .active:after {
  background:var(--gold);
}

.desktop-nav a:hover:after {
  animation:underline-in .25s var(--ease);
}

@keyframes underline-in {
  from { transform:scaleX(0); }
  to { transform:scaleX(1); }
}

.icon-button {
  border-radius:50%;
  transition:background .2s var(--ease),color .2s var(--ease);
}

.icon-button:hover,.social-links button:hover {
  color:var(--gold);
}

.icon-button:hover {
  background:#f4ede3;
}

.cart-count {
  background:var(--gold-deep);
  font-weight:600;
  box-shadow:0 0 0 2px #fff;
}

.announcement {
  background:linear-gradient(90deg,#f2e9de,#f7f0e6 50%,#f2e9de);
}

/* --- Buttons: warmer press, an arrow that leans forward --- */
.button {
  border-radius:5px;
  box-shadow:var(--shadow-sm);
  transition:background .25s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}

.button:hover {
  background:linear-gradient(115deg,var(--gold),var(--gold-deep));
  border-color:var(--gold-deep);
  box-shadow:0 6px 20px -6px #7d572666;
}

.button:active {
  transform:translateY(0);
  box-shadow:var(--shadow-sm);
}

.button .ph-arrow-right,.text-link .ph-arrow-right,.journal-card span .ph-arrow-right {
  transition:transform .25s var(--ease);
}

.button:hover .ph-arrow-right,.text-link:hover .ph-arrow-right,.journal-card:hover span .ph-arrow-right {
  transform:translateX(4px);
}

.text-link {
  border-bottom-color:#cfc4b4;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}

.text-link:hover {
  color:var(--gold-deep);
  border-bottom-color:var(--gold);
}

/* --- Eyebrows get a small gold rule --- */
.eyebrow {
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:.75rem;
}

.eyebrow:before {
  content:'';
  width:1.7rem;
  height:1px;
  background:var(--gold);
  flex-shrink:0;
}

/* --- Benefits strip --- */
.benefits {
  background:linear-gradient(180deg,#f8f6f3,#f4f1ec);
  border-block:1px solid #ece6dd;
}

.benefit {
  border-right-color:#e2ddd4;
}

.benefit>.ph {
  color:var(--gold-deep);
}

/* --- Mood circles: gold ring on hover, softer caption ---
   The caption used to sit inside the circle, so wider labels
   ("Fresh & Energizing", "Perfect For Loved Ones") were sliced off
   by the round clip. It now floats free as a pill under the photo:
   the photo keeps the circular mask, the card no longer clips. */
.mood-card {
  aspect-ratio:auto;
  overflow:visible;
  background:none;
  border-radius:0;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  transition:transform .3s var(--ease);
}

.mood-card:hover {
  transform:translateY(-6px);
}

/* The photo keeps the circle; the caption sits below it in normal
   flow, so long labels wrap instead of being clipped by the mask. */
.mood-photo {
  position:relative;
  inset:auto;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 1px #00000008;
  transition:transform .5s var(--ease),box-shadow .3s var(--ease);
}

.mood-card:hover .mood-photo {
  transform:scale(1.04);
  box-shadow:0 0 0 2px var(--gold),var(--shadow-md);
}

.mood-caption {
  position:static;
  width:auto;
  height:auto;
  padding:0;
  gap:.15rem;
  background:none;
  text-align:center;
}

.mood-caption strong,.mood-caption span {
  white-space:normal;
  line-height:1.3;
  transition:color .2s var(--ease);
}

.mood-caption span {
  color:var(--muted);
}

.mood-card:hover .mood-caption strong {
  color:var(--gold-deep);
}

/* --- Gift band --- */
.gift-section {
  background:linear-gradient(120deg,#f8f2ea,#f5eee5);
}

.gift-perks .ph {
  color:var(--gold-deep);
}

/* The perks column is narrow; nowrap was cutting "Long-Lasting Fragrance". */
.gift-perks>div {
  white-space:normal;
  align-items:center;
  padding-right:.9rem;
  line-height:1.3;
  transition:transform .2s var(--ease);
}

.gift-perks .ph {
  flex-shrink:0;
}

.gift-perks>div:hover {
  transform:translateX(3px);
}

/* --- Product cards: real cards, not floating text --- */
.product-card {
  background:#fff;
  border:1px solid #efeae3;
  border-radius:8px;
  padding:.65rem .8rem 1rem;
  box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}

.product-card:hover {
  transform:translateY(-5px);
  border-color:var(--gold-soft);
  box-shadow:var(--shadow-md);
}

.product-image {
  border:0;
  border-radius:6px;
  background:linear-gradient(165deg,#faf7f2,#f2ede5);
}

.product-image img {
  transition:transform .45s var(--ease);
}

.product-view:hover img {
  transform:scale(1.07);
}

.favorite {
  right:.45rem;
  top:.45rem;
  background:#ffffffe6;
  box-shadow:var(--shadow-sm);
  transition:color .2s var(--ease),transform .2s var(--ease);
}

.favorite:hover {
  color:#b23647;
  transform:scale(1.12);
}

.price {
  font-family:var(--serif);
  font-size:1.32rem;
  letter-spacing:-.02em;
}

.add-cart {
  border-radius:5px;
}

/* --- Journal --- */
.journal {
  background:linear-gradient(120deg,#f8f5f0,#f6f1ea);
}

.journal-card {
  border:1px solid #efe9e0;
  border-radius:8px;
  box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}

.journal-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.journal-card img {
  transition:transform .5s var(--ease),filter .3s var(--ease);
}

.journal-card:hover img {
  transform:scale(1.05);
}

.journal-card h3 {
  transition:color .2s var(--ease);
}

.journal-card:hover h3 {
  color:var(--gold-deep);
}

.journal-card span {
  color:var(--gold-deep);
}

/* --- Newsletter --- */
.newsletter input {
  border-color:#e0d6c9;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}

.newsletter input:focus,#search-input:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px #a3763a1f;
  outline:none;
}

/* --- Footer --- */
.site-footer {
  max-width:100%;
}

.footer-grid li a,.footer-grid li button {
  transition:color .2s var(--ease),padding-left .2s var(--ease);
}

.footer-grid li a:hover,.footer-grid li button:hover {
  color:var(--gold);
  padding-left:4px;
}

.contact-links .ph {
  color:var(--gold-deep);
}

/* --- Dialogs --- */
dialog {
  border-color:var(--gold-soft);
  border-radius:14px;
}

dialog[open] {
  animation:dialog-in .28s var(--ease);
}

@keyframes dialog-in {
  from { opacity:0; transform:translateY(12px) scale(.985); }
  to { opacity:1; transform:none; }
}

@media(max-width:767px) {
  .site-header {
    padding-inline:20px;
  }
  /* On phones the copy was tall enough to land on top of the photo.
     Stack them instead of overlaying, so nothing sits over the image. */
  .hero {
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .hero-copy {
    order:1;
    padding-bottom:22px;
  }
  .hero-image {
    order:2;
    position:relative;
    inset:auto;
    width:100%;
    height:250px;
    object-position:60% 52%;
  }
  .hero:after {
    display:none;
  }
  .hero-controls {
    bottom:14px;
  }
  .product-card {
    padding:.5rem .55rem .8rem;
  }
  .eyebrow:before {
    width:1.1rem;
  }
  /* nowrap + the new rule pushed this eyebrow past its column edge. */
  .gift-copy .eyebrow {
    white-space:normal;
    letter-spacing:.18em;
  }
}

/* ============================================================
   Breathing room. The base layout packs sections tightly; this
   pass opens up section padding, grid gaps and the space around
   headings so the page reads calmer.
   ============================================================ */
.page-shell {
  gap:1.5rem;
}

.hero-copy {
  padding-top:3.3rem;
  padding-bottom:2.7rem;
}

.hero .button {
  margin-bottom:2.3rem;
}

.hero-description {
  margin-bottom:1.6rem;
}

.benefits {
  padding:1.95rem 1.7rem;
}

.moods {
  padding:2.6rem 3.55% 2.5rem;
}

.section-heading {
  margin-bottom:2rem;
}

.section-heading p {
  margin-top:.4rem;
}

.mood-grid {
  gap:3rem;
}

.gift-section {
  min-height:23rem;
}

.gift-copy {
  padding-top:2.9rem;
  padding-bottom:2.9rem;
}

.gift-copy h2 {
  margin:.55rem 0 1.05rem;
}

.gift-copy>p:not(.eyebrow) {
  margin-bottom:1.5rem;
}

.gift-perks {
  gap:2.1rem;
}

.bestsellers {
  padding:2.6rem 3.2% 2.9rem;
}

.product-grid {
  gap:2.4rem;
}

.product-card {
  padding:.7rem .9rem 1.15rem;
}

.product-card h3 {
  margin-top:.85rem;
}

/* The extra card padding narrows this line; nowrap would clip it. Since
   it can now run to two lines, reserve both so ratings, prices and
   buttons stay on a shared baseline across the row. */
.product-card {
  display:flex;
  flex-direction:column;
}

.product-card>p {
  white-space:normal;
  min-height:2.9em;
}

.add-cart {
  margin-top:auto;
}

.price {
  margin:.35rem 0 .8rem;
}

.journal {
  padding:2.5rem 3.2% 2.6rem;
  gap:1.8rem;
}

.journal-intro {
  padding:.9rem 0 1rem;
}

.journal-intro p {
  margin:1rem 0 1.6rem;
}

.journal-card button>div {
  padding:1rem 1.3rem 1.1rem;
}

.newsletter {
  min-height:9.2rem;
  padding-top:2.5rem;
  padding-bottom:2.5rem;
}

.newsletter p {
  margin-top:.55rem;
}

.site-footer {
  padding-top:3.3rem;
  padding-bottom:1.6rem;
}

.brand-description {
  margin:1.5rem 0 1.3rem;
}

.footer-grid h3 {
  margin-bottom:1.05rem;
}

.footer-bottom {
  margin-top:2.6rem;
  padding-top:1.3rem;
}

@media(max-width:767px) {
  .page-shell {
    gap:14px;
  }
  .hero-copy {
    padding:32px 24px 30px;
  }
  .benefits {
    padding:24px 10px;
    gap:26px 0;
  }
  .moods {
    padding:30px 18px 32px;
  }
  .section-heading {
    margin-bottom:24px;
  }
  .mood-grid {
    gap:26px 15px;
  }
  .gift-copy {
    padding:30px 0 26px 22px;
  }
  .gift-perks {
    padding:22px;
    gap:20px;
  }
  .bestsellers {
    padding:30px 18px 32px;
  }
  .product-grid {
    gap:28px 18px;
  }
  .journal {
    padding:30px 18px 32px;
    gap:20px;
  }
  .newsletter {
    padding:30px 22px;
    gap:22px;
  }
  .site-footer {
    padding:36px 26px 22px;
  }
  .footer-grid {
    gap:34px 22px;
  }
  .footer-bottom {
    margin-top:28px;
  }
}