/* PDP content sections: notes extras + who / howto / brand / qa / faq grid. */

.woocommerce.aura-pdp div.product, .aura-pdp div.product {
  row-gap: 0;
  grid-template-areas:
    "notices notices"
    "gallery summary"
    "notes notes"
    "story story"
    "who who"
    "howto howto"
    "brand brand"
    "qa qa"
    "related related"
    "faq faq";
}

.aura-pdp .aura-note-card {
  display: flex;
  flex-direction: column;
}
.aura-pdp .aura-note-moment {
  order: -1;
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245, 238, 232, .55);
}
.aura-pdp .aura-note-card .aura-note-line {
  font-size: 15px;
  color: rgba(245, 238, 232, .72);
  max-width: 24em;
  margin-top: 14px;
}

.aura-pdp .aura-who,
.aura-pdp .aura-howto,
.aura-pdp .aura-qa,
.aura-pdp .aura-faq {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 104px 0 0;
}
.aura-pdp .aura-qa,
.aura-pdp .aura-faq {
  padding: 104px 0;
}
/* Design: the who-cards close the story band (72px under the story text),
   then "Hogyan viseld" and the perfume house are their own 88px bands. */
.aura-pdp .aura-who { padding: 72px 0 104px; }
.aura-pdp .aura-howto { padding: 88px 0; }
.aura-pdp .aura-who { grid-area: who; }
.aura-pdp .aura-howto { grid-area: howto; border-top: 1px solid var(--line); }
.aura-pdp .aura-brand { grid-area: brand; }
.aura-pdp .aura-qa { grid-area: qa; }
.aura-pdp .aura-faq { grid-area: faq; border-top: 1px solid var(--line); }

.aura-pdp .aura-who-inner,
.aura-pdp .aura-howto-inner,
.aura-pdp .aura-qa-inner,
.aura-pdp .aura-faq-inner {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 0 28px;
}

.aura-pdp .aura-who h2,
.aura-pdp .aura-howto h2,
.aura-pdp .aura-brand h2,
.aura-pdp .aura-qa h2,
.aura-pdp .aura-faq h2,
.aura-pdp .aura-who h3,
.aura-pdp .aura-howto h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}
.aura-pdp .aura-howto h2,
.aura-pdp .aura-brand h2,
.aura-pdp .aura-qa h2,
.aura-pdp .aura-faq h2 {
  margin: 0;
  font-size: var(--heading);
  letter-spacing: -.026em;
  line-height: .98;
}

.aura-who-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.aura-who-inner:has(.aura-who-card:only-child) {
  grid-template-columns: 1fr;
}
.aura-who-card {
  background: var(--white);
  padding: 34px;
  border: 1px solid var(--line);
}
.aura-who-card h3 {
  margin: 0 0 18px;
  font-size: 1.65rem;
  line-height: 1.15;
}
.aura-who-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.aura-who-card li {
  position: relative;
  padding-left: 19px;
  font-size: 16px;
  color: var(--ink);
}
.aura-who-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--burgundy);
}
.aura-who-card--not li::before {
  background: transparent;
  border: 1px solid var(--muted);
}
.aura-who-card--not a {
  color: var(--burgundy);
  font-weight: 600;
}

.aura-howto-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.aura-howto-step {
  border-top: 1px solid var(--burgundy);
  padding-top: 22px;
}
.aura-howto-num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--rose);
}
.aura-howto-step h3 {
  margin: 6px 0 8px;
  font-size: 1.5rem;
  line-height: 1.15;
}
.aura-howto-step p {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
}

.aura-pdp .aura-brand {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.aura-brand-inner {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 88px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.aura-brand-range {
  display: flex;
  gap: 28px;
  align-items: flex-end;
  justify-content: center;
  height: 380px;
  padding: 44px 24px 0;
  overflow: hidden;
  background: var(--cream);
  border-radius: 180px 180px 6px 6px;
}
.aura-brand-range img {
  /* Catalogue shots are square with the bottle in the middle ~40%:
     size by height like the design and crop the empty sides. */
  flex: 0 1 auto;
  height: 290px;
  width: auto;
  aspect-ratio: 5 / 8;
  min-width: 0;
  object-fit: cover;
  object-position: center bottom;
  /* Product shots are on white; multiply drops the white box onto the cream arch. */
  mix-blend-mode: multiply;
}
.aura-brand-range img.is-mid {
  height: 336px;
}
.aura-brand-copy p:not(.factory-kicker) {
  max-width: 32em;
  margin: 16px 0 0;
  font-size: 16.5px;
  color: var(--muted);
}
.aura-brand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  margin-top: 28px;
  padding: 0 26px;
  border: 1px solid var(--burgundy);
  background: transparent;
  color: var(--burgundy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.aura-brand-btn:hover {
  background: var(--burgundy);
  color: var(--white);
}

.aura-qa-list {
  display: grid;
  gap: 0;
  max-width: 900px;
  margin-top: 36px;
}
.aura-qa-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.aura-qa-q,
.aura-qa-a {
  display: flex;
  gap: 16px;
}
.aura-qa-q {
  font-size: 16.5px;
  font-weight: 600;
}
.aura-qa-a {
  margin-top: 10px;
  font-size: 16px;
  color: var(--muted);
}
.aura-qa-tag {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.aura-qa-q .aura-qa-tag {
  background: var(--deep);
  color: var(--cream);
}
.aura-qa-a .aura-qa-tag {
  background: var(--powder);
  color: var(--deep);
}

.aura-faq-inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 80px;
  align-items: start;
}
.aura-faq-contact {
  margin-top: 28px;
  font-size: 16px;
  color: var(--muted);
}
.aura-faq-contact a {
  color: var(--burgundy);
  font-weight: 600;
}
.aura-faq-acc details {
  border-bottom: 1px solid var(--line);
}
.aura-faq-acc details:first-child {
  border-top: 1px solid var(--line);
}
.aura-faq-acc summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
}
.aura-faq-acc summary::-webkit-details-marker { display: none; }
.aura-faq-acc summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 1.6px solid var(--ink);
  border-bottom: 1.6px solid var(--ink);
  transform: rotate(45deg);
}
.aura-faq-acc details[open] summary::after { transform: rotate(-135deg); }
.aura-faq-body {
  padding: 0 0 20px;
  font-size: 16px;
  color: var(--muted);
}
.aura-faq-body a {
  color: var(--burgundy);
  font-weight: 600;
}

/* Grid children must be allowed to shrink: the related scroll row's min-content
   otherwise widens the single mobile column past the viewport. */
.woocommerce.aura-pdp div.product > *, .aura-pdp div.product > * { min-width: 0; }

@media (max-width: 960px) {
  .woocommerce.aura-pdp div.product, .aura-pdp div.product {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    grid-template-areas:
      "notices"
      "gallery"
      "summary"
      "notes"
      "story"
      "who"
      "howto"
      "brand"
      "qa"
      "related"
      "faq";
  }
  .aura-pdp .aura-who,
  .aura-pdp .aura-howto,
  .aura-pdp .aura-qa,
  .aura-pdp .aura-faq {
    padding: 72px 0 0;
  }
  .aura-pdp .aura-qa,
  .aura-pdp .aura-faq {
    padding: 72px 0;
  }
  .aura-pdp .aura-who { padding: 44px 0 72px; }
  .aura-pdp .aura-howto { padding: 64px 0; }
  .aura-pdp .aura-who-inner,
  .aura-pdp .aura-howto-inner,
  .aura-pdp .aura-qa-inner,
  .aura-pdp .aura-faq-inner {
    padding: 0 18px;
  }
  .aura-who-inner,
  .aura-howto-steps,
  .aura-brand-inner,
  .aura-faq-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .aura-who-card { padding: 26px 22px; }
  .aura-howto-steps { margin-top: 28px; gap: 22px; }
  .aura-brand-inner { padding: 64px 18px; }
  .aura-brand-range {
    height: 300px;
    gap: 8px;
    padding: 44px 12px 0;
  }
  .aura-brand-range img { height: 215px; }
  .aura-brand-range img.is-mid { height: 256px; }
}