/* ==========================================================================
   DEXIE - product page
   Gallery beside a buy box, then the note ladder, then the supplier's own
   copy. The option and cart markup underneath keeps the core contract, so
   only the surrounding structure and the typography are ours.
   ========================================================================== */

.dx-product {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 20px;
}
@media (min-width: 900px) {
  .dx-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
}
@media (min-width: 1200px) {
  .dx-product { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
}

/* ---------- 1. gallery --------------------------------------------------- */
@media (min-width: 900px) {
  .dx-gallery { position: sticky; top: 96px; }
}

.dx-gallery__main {
  position: relative;
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  aspect-ratio: 1;
  overflow: hidden;
}
.dx-gallery__main img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(18px, 4vw, 44px);
  transition: transform .5s cubic-bezier(.16,.84,.44,1);
}
.dx-gallery__main:hover img { transform: scale(1.04); }

.dx-gallery__strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.dx-gallery__strip a {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  aspect-ratio: 1;
  overflow: hidden;
  transition: border-color .18s;
}
.dx-gallery__strip a:hover { border-color: var(--ink); }
.dx-gallery__strip img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }

/* ---------- 2. buy box --------------------------------------------------- */
.dx-buy__brand {
  display: inline-block;
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
  text-decoration: none; margin-bottom: 12px;
}
.dx-buy__brand:hover { color: var(--ink); }

.dx-buy__title {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.05;
  text-transform: none;
  margin: 0 0 14px;
  color: var(--ink);
  text-wrap: balance;
}

.dx-buy__rating { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; font-size: 12px; }
.dx-buy__rating i { color: var(--accent); font-size: 11px; }
.dx-buy__rating a { margin-left: 8px; color: var(--ink-3); text-decoration: none; }
.dx-buy__rating a:hover { color: var(--accent); }

.dx-buy__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 6px; }
.dx-buy__now {
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  font-weight: 800; letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dx-buy__was {
  font-size: 15px; color: var(--ink-3); text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.dx-buy__tax { margin: 0 0 4px; font-size: 12px; color: var(--ink-3); }

.dx-buy__bulk { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ground); }
.dx-buy__bulk li { font-size: 13px; color: var(--ink-2); }

/* Facts read as a table without being one. */
.dx-buy__meta { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule); }
.dx-buy__meta li {
  display: flex; gap: 14px; align-items: baseline;
  font-size: 13.5px; color: var(--ink); padding: 5px 0;
}
.dx-buy__meta li > span:first-child {
  flex: 0 0 118px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.dx-buy__stock.is-in { color: var(--trade); }

.dx-buy__aside { display: flex; gap: 18px; margin: 18px 0 6px; flex-wrap: wrap; }
.dx-buy__icon {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  transition: color .16s;
}
.dx-buy__icon:hover { color: var(--accent); }

/* ---------- 3. the option and cart block --------------------------------- */
#product { margin-top: 4px; }
#product hr { display: none; }
#product h3 {
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin: 22px 0 12px;
}
#product .form-label { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
#product .form-control,
#product .form-select {
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  padding: 11px 13px; font-size: 14.5px; box-shadow: none; color: var(--ink);
}
#product .form-control:focus,
#product .form-select:focus { border-color: var(--ink); box-shadow: none; }

/* Quantity and Add to Cart share one row.
   The core markup wraps them in a Bootstrap .input-group, which is
   flex-wrap:wrap. Giving the button width:100% therefore pushed it onto its
   own line and left the quantity field 472px wide. The group is re-laid out
   here rather than the markup being changed, because the ids and names in it
   are the ones the cart javascript binds to. */
#product .input-group {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  gap: 10px;
}
#product .input-group > * { margin: 0 !important; }

#product .input-group-text {
  flex: 0 0 auto;
  background: transparent; border: 0; padding: 0 2px 0 0;
  display: flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}

#product #input-quantity {
  flex: 0 0 74px; width: 74px;
  text-align: center;
  border-radius: var(--radius) !important;
  font-variant-numeric: tabular-nums;
}

#button-cart {
  flex: 1 1 auto; width: auto;
  background: var(--ink); border: 1px solid var(--ink); color: var(--accent-ink);
  border-radius: var(--radius) !important;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 16px 24px;
  transition: background .16s, color .16s;
}
#button-cart:hover { background: transparent; color: var(--ink); }

/* Wishlist and compare belong after the decision to buy, not before the size
   has even been chosen. The column is laid out as flex purely so this one
   block can be moved without touching the markup. */
.dx-buy { display: flex; flex-direction: column; }
.dx-buy__aside { order: 1; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }

/* ---------- 4. the note ladder ------------------------------------------- */
/* The one thing a fragrance shopper actually wants, and it was buried in a
   paragraph. Read straight out of the supplier copy; a product that does not
   state its notes shows nothing rather than a guess. */
/* Deliberately outside .dx-product. While it was a full-width row inside the
   grid, the sticky gallery treated the whole grid as its containing block and
   drifted 173px down over these notes as the page scrolled. */
.dx-ladder { margin: 0 0 34px; }

.dx-ladder__steps {
  margin: 0; padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  counter-reset: rung;
}

.dx-rung {
  position: relative;
  display: grid;
  gap: 4px 20px;
  grid-template-columns: 1fr;
  padding: 20px 22px 20px 26px;
  border-bottom: 1px solid var(--rule);
}
.dx-rung:last-child { border-bottom: 0; }
@media (min-width: 700px) {
  .dx-rung { grid-template-columns: 96px 132px minmax(0, 1fr); align-items: baseline; padding-block: 18px; }
}

/* A bar down the left that fades as the fragrance dries down. */
.dx-rung::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}
.dx-rung--top::before   { opacity: 1; }
.dx-rung--heart::before { opacity: .62; }
.dx-rung--base::before  { opacity: .32; }

.dx-rung__label {
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink);
}
.dx-rung__when { font-size: 12px; color: var(--ink-3); }
.dx-rung__notes { display: flex; flex-wrap: wrap; gap: 6px; }

.dx-note {
  display: inline-block;
  font-size: 12.5px; color: var(--ink-2);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 5px 10px;
}

.dx-ladder__flat {
  display: flex; flex-wrap: wrap; gap: 7px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); padding: 20px 22px;
}

/* ---------- 5. tabs ------------------------------------------------------ */
.dx-producttabs { margin-bottom: 56px; }
.dx-producttabs .nav-tabs { border-bottom: 1px solid var(--rule); gap: 4px; }
.dx-producttabs .nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; background: transparent;
  padding: 12px 4px; margin-right: 26px;
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.dx-producttabs .nav-tabs .nav-link:hover { color: var(--ink); }
.dx-producttabs .nav-tabs .nav-link.active { color: var(--ink); border-bottom-color: var(--accent); }

.dx-producttabs .tab-content { padding-top: 26px; }
.dx-producttabs .tab-pane p { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); max-width: 78ch; }
.dx-producttabs .tab-pane h1,
.dx-producttabs .tab-pane h2,
.dx-producttabs .tab-pane h3 { font-size: 1.05rem; margin: 22px 0 10px; }
.dx-producttabs .table { font-size: 14px; }
.dx-producttabs .table > :not(caption) > * > * { border-bottom-color: var(--rule); padding: 10px 8px; background: transparent; }

/* ---------- 6. reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dx-gallery__main img, .dx-gallery__strip a, .dx-buy__icon, #button-cart { transition: none; }
}