/* Golden Bloom Bake: page layout. Builds on tokens.css + components.css. */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-16)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; }
img { height: auto; }

.skip-link {
  position: absolute; left: var(--space-16); top: -60px; z-index: 100;
  background: var(--brand); color: var(--on-brand); padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-sm); text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: var(--space-16); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-32); }
.section { padding: var(--space-96) 0; }
.section--linen { background: var(--surface-linen); }
@media (max-width: 860px) {
  .container { padding: 0 var(--space-16); }
  .section { padding: var(--space-64) 0; }
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ---------- Header: sticky, with a mobile panel ---------- */
.gbb-header { position: sticky; top: 0; z-index: 50; }
.gbb-header.is-scrolled { background: var(--surface-raised); }
.gbb-nav__cta { display: none; }
@media (max-width: 860px) {
  .gbb-header.is-open .gbb-nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 64px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--hairline);
    padding: var(--space-8) var(--space-16) var(--space-24); margin: 0;
  }
  .gbb-header.is-open .gbb-nav a { display: block; padding: var(--space-16) 0; border-bottom: 1px solid var(--hairline); font-size: 17px; }
  .gbb-header.is-open .gbb-nav__cta { display: block; padding-top: var(--space-24); }
  .gbb-header.is-open .gbb-nav__cta a { display: flex; border-bottom: 0; padding: 0 var(--space-24); color: var(--on-brand); }
}

/* ---------- Promise row under the hero ---------- */
.promise-wrap { padding-bottom: var(--space-64); }

/* ---------- Our craft ---------- */
.craft { display: grid; grid-template-columns: 5fr 6fr; gap: var(--space-64); align-items: center; }
.craft__photo { position: relative; margin: 0; }
.craft__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.craft__photo .gbb-tape { top: -20px;
    left: 7%;
    width: 132px;
    transform: translateX(-59%) rotate(-38deg); }
.craft__body { display: flex; flex-direction: column; gap: var(--space-48); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-32) var(--space-32); }
.steps li { border-top: 1px solid var(--ink); padding-top: var(--space-16); }
.steps__num { display: block; font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 600; color: var(--ink); }
.steps h3 { margin: var(--space-4) 0 var(--space-8); font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.steps p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
@media (max-width: 860px) {
  .craft { grid-template-columns: 1fr; gap: var(--space-48); }
  .craft__photo { max-width: 420px; }
}
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Collection ---------- */
.collection__filter { margin: var(--space-48) 0 var(--space-32); }
.collection__filter .gbb-catstrip { gap: 0; }
.collection__filter li { flex: 1 1 0; min-width: 104px; display: flex; }
.collection__filter .gbb-catstrip__tab { width: 100%; }
.gbb-catstrip__tab--all { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.gbb-catstrip__tab--all[aria-pressed="true"] { border-bottom-color: var(--ink); }
@media (max-width: 600px) {
  .collection__filter .gbb-catstrip { display: grid; grid-template-columns: 1fr 1fr; }
  .collection__filter li { min-width: 0; }
}
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: var(--space-24); margin: 0; padding: 0; list-style: none; }
.product-grid > li { display: flex; }
.product-grid > li > .gbb-product { flex: 1; }
.product-grid > li[hidden] { display: none; }
.collection__empty { margin: var(--space-32) 0 0; padding: var(--space-32); text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--ink-muted); }
.collection__empty a { color: var(--brand); }
.collection .gbb-note { margin-top: var(--space-48); }
.gbb-product--soon .gbb-product__media img { filter: none; }

/* ---------- Why partner ---------- */
.partners { display: grid; grid-template-columns: 4fr 7fr; gap: var(--space-64); align-items: start; }
.partners__head { position: sticky; top: calc(var(--header-height) + var(--space-32)); display: flex; flex-direction: column; gap: var(--space-32); }
.partners__head .gbb-section-head h2 { font-size: 44px; line-height: 50px; }
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-48) var(--space-32); }
.features li { border-top: 1px solid var(--hairline); padding-top: var(--space-24); }
.features h3 { margin: 0 0 var(--space-8); font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 600; color: var(--ink); }
.features p { margin: 0; color: var(--ink-muted); }
.partners__photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); margin-top: var(--space-48); }
.partners__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 960px) {
  .partners { grid-template-columns: 1fr; gap: var(--space-48); }
  .partners__head { position: static; }
}
@media (max-width: 600px) { .features { grid-template-columns: 1fr; gap: var(--space-32); } }

/* ---------- Contact / become a partner ---------- */
.contact { position: relative; overflow: hidden; }
.contact__wash { position: absolute; inset: 0; background: url("../images/decor/paris-market-wash.png") center / cover no-repeat; opacity: .35; }
.contact .container { position: relative; }
.contact__panel {
  max-width: 820px; margin: 0 auto; background: var(--surface-raised);
  border: 1px solid var(--hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: var(--space-64); display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center;
}
.seal { position: relative; width: 88px; height: 108px; }
.seal img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
.seal img:last-child { position: absolute; left: 20px; top: 29px; width: 48px; }
.contact__panel .gbb-section-head h2 { font-size: 46px; line-height: 52px; }
.contact__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-16) var(--space-24); align-items: center; }
.contact__details { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); width: 100%; margin: var(--space-16) 0 0; padding-top: var(--space-32); border-top: 1px solid var(--hairline); text-align: left; }
.contact__details dt { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-8); }
.contact__details dd { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink); }
.contact__details a { color: var(--brand); text-decoration: none; }
.contact__details a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .contact__panel { padding: var(--space-32) var(--space-24); }
  .contact__panel .gbb-section-head h2 { font-size: 36px; line-height: 42px; }
  .contact__details { grid-template-columns: 1fr; text-align: center; }
}