/* ==========================================================================
   Fez Store (rebuilt 2026) — fz- prefix, built on anou-tokens.css.
   Design source: design_handoff_fezstore/Fez Store v2.dc.html
   Explicit resets throughout: this page must not lean on Bootstrap 2.3.
   Every media block reserves its space (fixed height or aspect-ratio) — this
   page's URL group failed Core Web Vitals on CLS; keep it that way.
   ========================================================================== */

.fz-hero, .fz-utility, .fz-sections, .fz-quotes, .fz-shop, .fz-residencies,
.fz-visit, .fz-coop {
  box-sizing: border-box;
  font-family: var(--font-body, grap, sans-serif);
}
.fz-hero *, .fz-utility *, .fz-sections *, .fz-quotes *, .fz-shop *,
.fz-residencies *, .fz-visit *, .fz-coop * { box-sizing: border-box; }

.fz-eyebrow {
  margin: 0 0 12px 0;
  font-family: var(--font-ui, grap-med, sans-serif);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--anou-blue, #407bd9);
}
.fz-eyebrow--dark { color: #85A9E4; }

/* --- Hero ----------------------------------------------------------------- */
.fz-hero { position: relative; height: 440px; }
.fz-hero video {
  width: 100%; height: 440px; object-fit: cover; display: block;
}
.fz-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(24,30,42,.3), rgba(24,30,42,.68));
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 56px;
}
.fz-hero-eyebrow {
  margin: 0 0 12px 0; font-family: var(--font-ui, grap-med, sans-serif);
  font-size: 11px; letter-spacing: 3px; color: #85A9E4;
}
.fz-hero-title {
  margin: 0 0 14px 0; font-family: var(--font-display, grotesk, sans-serif);
  font-weight: 900; font-size: 40px; line-height: 1.15; color: #ffffff;
  max-width: 700px;
}
.fz-hero-copy {
  margin: 0 0 22px 0; font-size: 15.5px; line-height: 1.7; color: #e5e8ee;
  max-width: 620px;
}
.fz-hero-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.fz-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--anou-blue, #407bd9); color: #ffffff; height: 48px;
  padding: 0 30px; font-family: var(--font-ui, grap-med, sans-serif);
  font-size: 12px; letter-spacing: 2px; text-decoration: none; border: 0;
  cursor: pointer;
}
.fz-btn-primary:hover { background: var(--anou-blue-dark, #3568bd); color: #ffffff; text-decoration: none; }
.fz-hero-visit { font-size: 13px; color: #ffffff; text-decoration: underline; }
.fz-hero-visit:hover { color: #e5e8ee; }

/* --- Utility strip -------------------------------------------------------- */
.fz-utility {
  display: flex; justify-content: center; gap: 32px; padding: 16px 40px;
  border-bottom: 1px solid var(--border, #e5e8ee); background: #fafbfd;
  flex-wrap: wrap;
}
.fz-utility span { font-size: 12.5px; color: var(--ink-body, #4b5563); }
.fz-utility .fz-dot { color: var(--anou-blue-border, #ccd8eb); }
.fz-utility a { font-size: 12.5px; color: var(--anou-blue, #407bd9); text-decoration: none; }
.fz-utility a:hover { color: var(--anou-blue-dark, #3568bd); }

/* --- Experience sections -------------------------------------------------- */
.fz-sections { max-width: 1280px; margin: 0 auto; }
.fz-section {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px;
  padding: 0 40px 56px 40px; align-items: center;
}
.fz-section:first-child { padding-top: 56px; }
.fz-section--img-left { grid-template-columns: 1.1fr 1fr; }
.fz-section h2 {
  margin: 0 0 14px 0; font-family: var(--font-display, grotesk, sans-serif);
  font-weight: 900; font-size: 28px; line-height: 1.2; color: var(--ink, #2e333d);
}
.fz-section p { margin: 0 0 12px 0; font-size: 15px; line-height: 1.7; color: var(--ink-body, #4b5563); }
.fz-section p:last-child { margin-bottom: 0; }
.fz-link { font-size: 13px; color: var(--anou-blue, #407bd9); text-decoration: none; }
.fz-link:hover { color: var(--anou-blue-dark, #3568bd); }
.fz-shadow-r { box-shadow: var(--anou-blue, #407bd9) 12px -12px; }
.fz-shadow-l { box-shadow: var(--anou-blue, #407bd9) -12px -12px; }
.fz-section img {
  width: 100%; aspect-ratio: 1000 / 620; object-fit: cover; display: block;
}

/* --- Quote band ----------------------------------------------------------- */
.fz-quotes {
  background:
    linear-gradient(rgba(36, 41, 51, .82), rgba(36, 41, 51, .82)),
    var(--ink, #2e333d)
    url('https://res.cloudinary.com/hork5h8x1/image/upload/q_auto,f_auto,w_1600/v10000000/IMG_3404_cob8on')
    center / cover no-repeat;
  padding: 44px 56px;
}
.fz-quotes .fz-eyebrow { margin-bottom: 14px; }
.fz-quote-slide { display: none; }
.fz-quote-slide.fz-active { display: block; }
/* Reserve the tallest quote's height so rotation never shifts the page. */
.fz-quote-stage { min-height: 200px; }
.fz-quote-text {
  margin: 0 0 10px 0; font-family: var(--font-display, grotesk, sans-serif);
  font-weight: 900; font-size: 26px; line-height: 1.4; color: #ffffff;
  max-width: 900px;
}
.fz-quote-source { margin: 0 0 14px 0; font-size: 13px; color: var(--ink-faint, #9aa1ad); }
.fz-quote-dots { display: flex; gap: 8px; }
.fz-quote-dot {
  width: 24px; height: 3px; background: #4b5563; display: inline-block;
  cursor: pointer; border: 0; padding: 0;
}
.fz-quote-dot.fz-active { background: var(--anou-blue, #407bd9); }

/* --- Shop ------------------------------------------------------------------ */
.fz-shop { max-width: 1280px; margin: 0 auto; padding: 48px 40px; }
.fz-shop-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap; margin: 0 0 8px 0;
}
.fz-shop-head h2 {
  margin: 0; font-family: var(--font-display, grotesk, sans-serif);
  font-weight: 900; font-size: 28px; color: var(--ink, #2e333d);
}
.fz-shop-count { font-size: 13px; color: var(--ink-muted, #6b7280); }
.fz-shop-intro {
  margin: 0 0 20px 0; font-size: 14px; line-height: 1.6;
  color: var(--ink-muted, #6b7280); max-width: 680px;
}
.fz-chips { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 24px 0; }
.fz-chip {
  padding: 9px 17px; border: 1px solid var(--anou-blue-border, #ccd8eb);
  font-size: 12.5px; color: var(--ink, #2e333d); cursor: pointer;
  background: none; font-family: var(--font-body, grap, sans-serif);
}
.fz-chip--active {
  padding: 8px 16px; border: 2px solid var(--anou-blue, #407bd9);
  background: var(--anou-blue-panel, #f2f6fc);
  font-family: var(--font-ui, grap-med, sans-serif);
}
.fz-chip--search { border-style: dashed; color: var(--anou-blue, #407bd9); }

/* Size search panel */
.fz-search[hidden] { display: none; }
.fz-search {
  border: 1px solid var(--border, #e5e8ee); background: #fafbfd;
  padding: 18px 20px; display: flex; gap: 14px; align-items: flex-end;
  flex-wrap: wrap; margin: 0 0 24px 0;
}
.fz-search-label {
  display: block; margin: 0 0 6px 0; font-family: var(--font-ui, grap-med, sans-serif);
  font-size: 11px; letter-spacing: 1.5px; color: var(--ink-faint, #9aa1ad);
}
/* height/box-shadow resets: Bootstrap 2.3 sets input height 20px + inset shadow
   at equal specificity. */
.fz-search input {
  border: 1px solid var(--anou-blue-border, #ccd8eb); padding: 10px 12px;
  font-size: 13px; color: var(--ink, #2e333d);
  font-family: var(--font-body, grap, sans-serif); outline: 0; width: 120px;
  border-radius: 0; margin: 0; height: auto; box-shadow: none;
}
.fz-search input:focus { border-color: var(--anou-blue, #407bd9); box-shadow: none; }
.fz-search-tolerance input { width: 100px; }
.fz-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--anou-blue, #407bd9); color: #ffffff; height: 40px;
  padding: 0 24px; font-family: var(--font-ui, grap-med, sans-serif);
  font-size: 12px; letter-spacing: 1.5px; cursor: pointer; border: 0;
}
.fz-search-btn:hover { background: var(--anou-blue-dark, #3568bd); }
.fz-search-clear {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 24px; border: 1px solid var(--anou-blue-border, #ccd8eb);
  font-family: var(--font-ui, grap-med, sans-serif); font-size: 12px;
  letter-spacing: 1.5px; color: var(--ink, #2e333d); text-decoration: none;
}
.fz-search-clear:hover { border-color: var(--anou-blue, #407bd9); color: var(--anou-blue, #407bd9); }
.fz-search-hint { font-size: 12px; color: var(--ink-faint, #9aa1ad); }
.fz-search-error { color: var(--error, #ef4444); font-size: 12px; display: block; margin-top: 4px; }
.fz-search-note { margin: 0 0 20px 0; font-size: 14px; line-height: 1.6; color: var(--ink-muted, #6b7280); }
.fz-search-note--error { color: var(--error, #ef4444); }

/* Product grid */
.fz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fz-card a { display: block; text-decoration: none; }
.fz-card img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  background: var(--anou-blue-panel, #f2f6fc);
}
.fz-card-name { margin: 10px 0 2px 0; font-size: 13.5px; color: var(--ink, #2e333d); }
.fz-card-stock { color: var(--success, #10b981); }
.fz-card-mto { color: var(--ink-muted, #6b7280); }
.fz-card-seller { margin: 0; font-size: 12px; color: var(--ink-faint, #9aa1ad); }
.fz-card-admin { margin: 4px 0 0 0; font-size: 12px; color: var(--error, #ef4444); }

/* Pagination */
.fz-pager { display: flex; justify-content: center; gap: 8px; margin: 28px 0 0 0; flex-wrap: wrap; }
.fz-pager a, .fz-pager span {
  padding: 7px 13px; font-size: 12.5px; color: var(--ink, #2e333d);
  text-decoration: none; border: 1px solid var(--anou-blue-border, #ccd8eb);
}
.fz-pager a:hover { border-color: var(--anou-blue, #407bd9); color: var(--anou-blue, #407bd9); }
.fz-pager .fz-page-current {
  background: var(--anou-blue, #407bd9); color: #ffffff; border-color: var(--anou-blue, #407bd9);
  font-family: var(--font-ui, grap-med, sans-serif);
}
.fz-pager .fz-page-gap { border: 0; color: var(--ink-faint, #9aa1ad); }

/* --- Residencies band ------------------------------------------------------ */
.fz-residencies { background: var(--ink, #2e333d); }
.fz-residencies-inner {
  max-width: 1280px; margin: 0 auto; display: grid;
  grid-template-columns: 1fr 400px; align-items: center;
}
.fz-residencies-copy { padding: 40px; }
.fz-residencies h2 {
  margin: 0 0 12px 0; font-family: var(--font-display, grotesk, sans-serif);
  font-weight: 900; font-size: 26px; line-height: 1.2; color: #ffffff;
}
.fz-residencies p {
  margin: 0 0 18px 0; font-size: 14.5px; line-height: 1.7; color: #c3c8d1;
  max-width: 560px;
}
.fz-residencies .fz-btn-primary { height: 44px; padding: 0 26px; }
.fz-residencies video {
  width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block;
}

/* --- Find us --------------------------------------------------------------- */
.fz-visit {
  max-width: 1280px; margin: 0 auto; display: grid;
  grid-template-columns: 1fr 1.1fr; gap: 56px; padding: 48px 40px;
  align-items: start;
}
.fz-visit h2 {
  margin: 0 0 16px 0; font-family: var(--font-display, grotesk, sans-serif);
  font-weight: 900; font-size: 26px; color: var(--ink, #2e333d);
}
.fz-visit-rows { display: flex; flex-direction: column; gap: 14px; }
.fz-visit-label {
  margin: 0 0 2px 0; font-family: var(--font-ui, grap-med, sans-serif);
  font-size: 11px; letter-spacing: 1.5px; color: var(--ink-faint, #9aa1ad);
}
.fz-visit-rows p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-body, #4b5563); }
.fz-visit iframe { display: block; width: 100%; border: 0; }
.fz-visit-caption {
  margin: 8px 0 0 0; font-size: 12px; color: var(--ink-faint, #9aa1ad);
  text-align: center;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  .fz-hero-scrim { padding: 0 24px; }
  .fz-hero-title { font-size: 28px; }
  .fz-utility { gap: 10px 16px; padding: 14px 20px; }
  .fz-utility .fz-dot { display: none; }
  .fz-section, .fz-section--img-left {
    grid-template-columns: 1fr; gap: 28px; padding: 0 20px 48px 20px;
  }
  .fz-section:first-child { padding-top: 40px; }
  /* Keep text above its image when the image is markup-first. */
  .fz-section--img-left .fz-section-media { order: 2; }
  .fz-quotes { padding: 36px 24px; }
  .fz-quote-stage { min-height: 260px; }
  .fz-quote-text { font-size: 20px; }
  .fz-shop { padding: 40px 20px; }
  .fz-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .fz-residencies-inner { grid-template-columns: 1fr; }
  .fz-visit { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px; }
}