/* Gift hampers + corporate gifting pages: dark hero, hamper builder, "how it works" steps,
   the corporate call-to-action, and the shop page's request-a-flavour / new-drops forms.
   Tokens only. */
@layer components {
  /* ---- Hero (dark, photo on the right like the home Gift Atelier panel) ---- */
  .gift-hero {
    position: relative;
    display: grid;
    background-color: var(--ink-950);
    color: var(--text-on-dark);
    overflow: hidden;
  }

  .gift-hero__media {
    grid-area: 1 / 1;

    & img {
      display: block;
      width: 100%;
      height: 100%;
      max-height: 560px;
      object-fit: cover;
      opacity: 0.22;   /* text sits on top below 900px: keep the intro ≥ 4.5:1 */
    }
  }

  .gift-hero__inner {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
    padding-block: var(--section-pad) calc(var(--section-pad) * 1.35);
  }

  .gift-hero__eyebrow { color: var(--gold-200); margin: 0; }

  .gift-hero__title {
    max-width: 18ch;
    min-width: 0;
    margin: 0;
    overflow-wrap: break-word;
    color: var(--text-on-dark);
    font-size: var(--fs-hero);
  }

  .gift-hero__lead {
    max-width: 52ch;
    margin: 0;
    color: var(--text-on-dark-muted);
  }

  .gift-hero__list { margin: 0; }

  @media (min-width: 900px) {
    .gift-hero {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .gift-hero__media {
      grid-area: 1 / 2;

      & img { opacity: 1; max-height: none; min-height: 460px; }
    }

    .gift-hero__inner {
      grid-area: 1 / 1;
      max-width: none;
      padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)) var(--space-7);
    }
  }

  .gifting,
  .hamper {
    background-color: var(--cream-100);
    padding-block: var(--section-pad);
  }

  .hamper + .gifting {
    background-color: var(--sand-100);
  }

  .gifting__intro {
    max-width: 60ch;
    margin: var(--space-4) auto var(--space-7);
    text-align: center;
  }

  /* ---- Hamper builder ---------------------------------------------------- */
  .hamper__boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-7);
    padding: 0;
    border: none;
  }

  .hamper-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    height: 100%;
    padding: var(--space-5);
    border: 1px solid var(--sand-300);
    background-color: var(--cream-50);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);

    &:hover { border-color: var(--gold-400); }

    &:has(input:checked) {
      border-color: var(--gold-600);
      box-shadow: inset 0 0 0 1px var(--gold-600);
    }

    &:has(input:focus-visible) {
      outline: 2px solid var(--cocoa-700);
      outline-offset: 2px;
    }

    &:active { background-color: var(--cream-100); }
  }

  .hamper-box__name { color: var(--ca-heading); }
  .hamper-box__slots { color: var(--cocoa-700); letter-spacing: var(--ls-micro); text-transform: uppercase; }

  .hamper-box__price {
    margin-top: var(--space-2);
    color: var(--ca-heading);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-lead);
  }

  .hamper-box__desc { color: var(--ca-body); }

  /* Phones: boxes as a compact two-up row, so the cookies start sooner. */
  @media (max-width: 599.98px) {
    .hamper__boxes {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2);
    }

    .hamper-box {
      padding: var(--space-3);
    }

    .hamper-box__desc {
      display: none;
    }
  }

  .hamper__progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);

    & p { margin: 0; color: var(--ca-heading); }
  }

  .hamper__slots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hamper__slot {
    width: 48px;
    height: 48px;
    border: 1px dashed var(--cocoa-600);
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--cream-50);

    &.is-filled { border: 1px solid var(--gold-500); }

    & img { display: block; width: 100%; height: 100%; object-fit: cover; }
  }

  .hamper__picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hamper-pick {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: var(--space-1) var(--space-4);
    align-items: start;
    padding: var(--space-4);
    border: 1px solid var(--sand-300);
    background-color: var(--cream-50);

    &.is-picked { border-color: var(--gold-500); }

    & .qty { grid-column: 2; margin-top: var(--space-2); justify-self: start; }
  }

  .hamper-pick__img {
    grid-row: 1 / span 3;
    width: 72px;
    height: 72px;
    object-fit: cover;
  }

  .hamper-pick__name { color: var(--ca-heading); }
  .hamper-pick__desc { color: var(--ca-muted); }

  .hamper__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin-top: var(--space-6);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--sand-300);
    background-color: var(--cream-100);
  }

  .hamper__foot .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .hamper__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin: 0;
    color: var(--ca-heading);

    & strong { font-family: var(--font-display); font-size: var(--fs-lead); }
  }

  /* ---- "How it works" ------------------------------------------------------ */
  /* Numbered steps on one rule (a timeline, not three icon cards). */
  .gifting-steps {
    display: grid;
    gap: var(--space-6);
    max-width: 1000px;
    margin: var(--space-7) auto 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
  }

  .gifting-step {
    position: relative;
    display: grid;
    grid-template-columns: var(--space-8) minmax(0, 1fr);   /* one width for every numeral, so the text lines up */
    gap: var(--space-1) var(--space-4);
    align-items: baseline;
    counter-increment: step;

    &::before {
      content: counter(step, decimal-leading-zero);
      grid-row: span 2;
      color: var(--cocoa-700);
      font-family: var(--font-display);
      font-size: var(--fs-hero);
      font-weight: 600;
      line-height: 1;
    }

    & h3 { margin: 0; color: var(--ca-heading); }
    & p { margin: 0; max-width: 45ch; }
  }

  @media (min-width: 900px) {
    .gifting-steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-7);
      padding-top: var(--space-5);
      border-top: 1px solid var(--sand-300);
    }

    .gifting-step {
      grid-template-columns: minmax(0, 1fr);

      &::before { grid-row: auto; margin-bottom: var(--space-3); }
    }
  }

  /* ---- Corporate call-to-action (dark band) ------------------------------- */
  .gifting-cta {
    background-color: var(--ink-900);
    color: var(--text-on-dark);
    padding-block: var(--section-pad-tight);
  }

  .gifting-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;

    & h2 { margin: 0; color: var(--text-on-dark); }
    & p { margin: 0; color: var(--text-on-dark-muted); }
  }

  .form-page--flush { min-height: 0; }

  /* ---- Shop: request a flavour + new drops ------------------------------- */
  .shop-extras {
    background-color: var(--sand-100);
    padding-block: var(--section-pad);
  }

  .shop-extras__grid {
    display: grid;
    gap: var(--space-7);
  }

  @media (min-width: 900px) {
    .shop-extras__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
    }
  }

  .shop-extras__form {
    max-width: none;
    margin: 0;
    padding: var(--space-6);
    border: 1px solid var(--sand-300);
    background-color: var(--cream-50);

    & h2 { margin: 0; color: var(--ca-heading); }
    & > p:not([data-status]) { margin: 0 0 var(--space-3); }
  }
}