/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: clamp(520px, 82vh, 860px);
  display: flex;
  align-items: center;
  color: var(--color-ivory);
  overflow: hidden;
  background: var(--color-nearblack);
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      rgba(22, 19, 15, 0.9) 0%,
      rgba(22, 19, 15, 0.5) 38%,
      rgba(22, 19, 15, 0.12) 72%
    ),
    radial-gradient(
      60% 50% at 50% 55%,
      rgba(201, 166, 104, 0.18),
      transparent 70%
    );
}

/* Full container width so the text aligns with the site's left edge,
   instead of a centred 820px box floating in the middle. */
.hero__inner {
  position: relative;
  z-index: 1;
  text-align: left;
  padding-block: var(--space-6);
}

/* Constrain the text column, left-aligned within the container. */
.hero__title,
.hero__lede {
  max-width: 16ch;
}

.hero__lede {
  max-width: 44ch;
}

.hero .eyebrow {
  color: var(--color-gold-soft);
  letter-spacing: var(--track-widest);
}

.hero__title {
  font-size: var(--text-display);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-gold-soft);
}

.hero__lede {
  font-size: var(--text-body-lg);
  color: rgba(250, 247, 242, 0.75);
  max-width: 46ch;
  line-height: 1.7;
  margin-bottom: var(--space-5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.scroll-cue {
  position: absolute;
  right: var(--container-pad);
  bottom: var(--space-6);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: rgba(250, 247, 242, 0.55);
}

@media (max-width: 860px) {
  .scroll-cue {
    display: none;
  }
}

@media (max-width: 768px) {
  /* The desktop scrim is darkest at the bottom because the copy sits low
     there. On a phone the block is vertically centred, landing on the
     bright middle of the photo — so the gold eyebrow and the lede lose
     their footing. Even out the gradient to keep the text legible
     wherever the crop happens to fall. */
  .hero__media::after {
    background: linear-gradient(
        to top,
        rgba(22, 19, 15, 0.92) 0%,
        rgba(22, 19, 15, 0.68) 45%,
        rgba(22, 19, 15, 0.45) 100%
      ),
      radial-gradient(
        60% 50% at 50% 55%,
        rgba(201, 166, 104, 0.18),
        transparent 70%
      );
  }

  /* 10.9px with wide tracking is below comfortable reading size on a
     phone; nudge it up and tighten the tracking a little. */
  .hero .eyebrow {
    font-size: var(--text-xs);
    letter-spacing: var(--track-wider);
  }
}

/* ============ Story ============ */
.story {
  text-align: center;
}

.story__body {
  font-size: var(--text-body-lg);
  color: var(--color-ink-60);
  line-height: 1.85;
}

.story__signature {
  display: inline-block;
  margin-top: var(--space-5);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-body);
  color: var(--color-gold);
}

/* ============ Featured spotlight ============ */
.spotlight {
  background: var(--color-nearblack);
  color: var(--color-ivory);
  overflow: hidden;
}

.spotlight__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 560px;
}

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

.spotlight__media {
  position: relative;
  overflow: hidden;
  min-height: 340px;
}

.spotlight__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

.spotlight:hover .spotlight__media img {
  transform: scale(1.04);
}

.spotlight__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-5), 6vw, var(--space-8));
}

.spotlight__title {
  font-size: var(--text-h1);
  margin-bottom: var(--space-3);
}

.spotlight__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-body-lg);
  color: rgba(250, 247, 242, 0.7);
  margin-bottom: var(--space-4);
}

.spotlight__text {
  font-size: var(--text-sm);
  color: rgba(250, 247, 242, 0.62);
  line-height: 1.8;
  margin-bottom: var(--space-5);
  max-width: 46ch;
}

.spotlight__price {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: var(--space-5);
  font-variant-numeric: tabular-nums;
}

/* ============ Newsletter ============ */
.newsletter {
  background: var(--color-sand);
  text-align: center;
}

.newsletter__title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-3);
}

.newsletter__text {
  color: var(--color-ink-60);
  max-width: 44ch;
  margin: 0 auto var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.newsletter-form {
  display: flex;
  max-width: 460px;
  margin-inline: auto;
  gap: var(--space-2);
}

@media (max-width: 480px) {
  .newsletter-form {
    flex-direction: column;
  }
}

.newsletter-form input {
  flex: 1;
  padding: 15px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.newsletter-form input:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(245, 96, 10, 0.12);
}

.newsletter__fineprint {
  font-size: var(--text-micro);
  color: var(--color-ink-45);
  margin-top: var(--space-3);
}

/* ============ Breadcrumb ============ */
.breadcrumb {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--color-ink-45);
  padding-block: var(--space-5) 0;
}

.breadcrumb a:hover {
  color: var(--color-orange);
}

.breadcrumb span {
  color: var(--color-nearblack);
}

/* ============ Product detail ============ */
.product-detail {
  padding-block: var(--space-5) var(--section-y);
}

.product-detail__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(var(--space-5), 5vw, var(--space-8));
  align-items: start;
}

@media (max-width: 900px) {
  .product-detail__grid {
    grid-template-columns: 1fr;
  }
}

.product-detail__media {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-sand);
}

@media (max-width: 900px) {
  .product-detail__media {
    position: static;
  }
}

.product-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail__type {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--color-gold);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.product-detail__name {
  font-size: var(--text-h1);
  margin-bottom: var(--space-3);
}

.product-detail__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-body-lg);
  color: var(--color-ink-60);
  margin-bottom: var(--space-4);
}

.product-detail__price {
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

.product-detail__price small {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-45);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin-left: var(--space-2);
}

.product-detail__desc {
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--color-ink-80);
  margin-bottom: var(--space-5);
}

.product-detail__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.buy-row {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
  margin-bottom: var(--space-4);
}

.buy-row .btn {
  flex: 1;
}

/* On a phone the stepper and the primary action can't share a row without
   squeezing the CTA to a stub — give "Ajouter au panier" its own full
   width line underneath. */
@media (max-width: 768px) {
  .buy-row {
    flex-wrap: wrap;
  }

  .buy-row .btn {
    flex: 1 1 100%;
  }
}

.product-reassure {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-ivory);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

.product-reassure__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-80);
}

.product-reassure__item svg {
  color: var(--color-orange);
  flex-shrink: 0;
}

.notes-block {
  margin-bottom: var(--space-6);
}

.notes-block__title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-weight: 700;
  color: var(--color-ink-60);
  margin-bottom: var(--space-4);
}

/* ============ Cart page ============ */
.cart-page {
  padding-block: var(--space-6) var(--section-y);
  min-height: 55vh;
}

.page-title {
  font-size: var(--text-h1);
  margin-bottom: var(--space-6);
}

.cart-page__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(var(--space-5), 4vw, var(--space-7));
  align-items: start;
}

@media (max-width: 900px) {
  .cart-page__grid {
    grid-template-columns: 1fr;
  }
}

.cart-page__list {
  border-top: 1px solid var(--line);
  padding-top: var(--space-5);
}

.cart-page__list .cart-item {
  grid-template-columns: 108px 1fr;
}

.order-summary {
  background: var(--color-ivory);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

@media (max-width: 900px) {
  .order-summary {
    position: static;
  }
}

.order-summary__title {
  font-size: 1.25rem;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.order-summary .btn {
  margin-top: var(--space-5);
}

/* ============ Checkout ============ */
.checkout-page {
  padding-block: var(--space-6) var(--section-y);
  min-height: 55vh;
}

.checkout-steps {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--color-ink-45);
  flex-wrap: wrap;
}

.checkout-steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.checkout-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  font-weight: 700;
  font-size: 0.62rem;
}

.checkout-steps__item.is-active {
  color: var(--color-nearblack);
  font-weight: 700;
}

.checkout-steps__item.is-active .checkout-steps__num {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
}

.checkout-steps__sep {
  width: 22px;
  height: 1px;
  background: var(--line-strong);
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(var(--space-5), 4vw, var(--space-7));
  align-items: start;
}

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

.form-section-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-weight: 700;
  color: var(--color-ink-60);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
}

.payment-method {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-orange);
  background: rgba(245, 96, 10, 0.04);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.payment-method svg {
  color: var(--color-orange);
  flex-shrink: 0;
  margin-top: 2px;
}

.payment-method__title {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: 2px;
}

.payment-method__text {
  font-size: var(--text-xs);
  color: var(--color-ink-60);
  line-height: 1.6;
}

.checkout-summary-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.checkout-summary-item__name {
  color: var(--color-ink-80);
}

.checkout-summary-item__qty {
  color: var(--color-ink-45);
  font-size: var(--text-micro);
  display: block;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  margin-top: 2px;
}

.checkout-summary-item__price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* Confirmation */
.checkout-confirmation {
  text-align: center;
  padding-block: var(--space-8);
  max-width: 540px;
  margin-inline: auto;
}

.checkout-confirmation__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill);
  background: var(--color-orange);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
}

.checkout-confirmation h1 {
  font-size: var(--text-h2);
  margin-bottom: var(--space-3);
}

.checkout-confirmation p {
  color: var(--color-ink-60);
  line-height: 1.8;
  margin-bottom: var(--space-5);
}

.order-ref {
  display: inline-block;
  padding: var(--space-3) var(--space-4);
  background: var(--color-ivory);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

.order-ref strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ============ Related products ============ */
.related {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
}

/* ============ Empty states ============ */
.empty-state {
  text-align: center;
  padding-block: var(--space-8);
}

.empty-state h1 {
  font-size: var(--text-h2);
  margin-bottom: var(--space-3);
}

.empty-state p {
  color: var(--color-ink-60);
  margin-bottom: var(--space-5);
}

/* ============ Shop / boutique pages ============ */
.shop-header {
  padding-block: var(--space-6) var(--space-5);
}

.shop-header__lede {
  font-size: var(--text-body-lg);
  color: var(--color-ink-60);
  max-width: 58ch;
  line-height: 1.75;
}

.shop {
  padding-bottom: var(--section-y);
}

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.shop-count {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--color-ink-45);
  white-space: nowrap;
}

.shop-empty {
  text-align: center;
  padding-block: var(--space-7);
  color: var(--color-ink-45);
}

/* ============ Category hero ============ */
.cat-hero {
  padding-block: var(--space-5) var(--space-7);
}

.cat-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-5), 5vw, var(--space-7));
  align-items: center;
}

@media (max-width: 860px) {
  .cat-hero__grid {
    grid-template-columns: 1fr;
  }
}

.cat-hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-body-lg);
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.cat-hero__desc {
  font-size: var(--text-body);
  color: var(--color-ink-60);
  line-height: 1.8;
  max-width: 52ch;
}

.cat-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-sand);
}

.cat-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Price "dès" prefix on cards */
.price em {
  font-style: normal;
  font-size: var(--text-micro);
  font-weight: 600;
  color: var(--color-ink-45);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  margin-right: 3px;
}