/* homepage.css — GondolaFixtures.com Homepage-specific styles */

/* ══ PROMO BANNER ═══════════════════════════════════════════════════════ */
.promo-banner {
  background: #2F6DAE;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  padding: 10px 24px;
  letter-spacing: 0.01em;
}
.promo-banner__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.promo-banner__link:hover { opacity: 0.85; }

/* ══ HERO — CMS background image support ═══════════════════════════════ */
.hero--has-image .hero-bg { display: none; }
.hero--has-image .hero-bg::after { display: none; }

/* ══ HEADER — nav label + hamburger ════════════════════════════════════ */
.nav-item--link {
  text-decoration: none;
}
.nav-item--active {
  color: var(--navy) !important;
  background: var(--accent-dim);
}

/* Span label replaces button — same visual style, no button chrome */
.nav-item__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
  cursor: pointer;
  user-select: none;
}
.nav-item__label svg { width: 12px; height: 12px; opacity: 0.5; }

/* ── Quote button ─────────────────────────────────────────────────── */
.btn-quote {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: #1F3A5F;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  text-decoration: none;
}
.btn-quote:hover { background: #2F6DAE; color: #fff; }

/* ── Hamburger ────────────────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  margin-left: auto;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
}

/* ══ BRANDS BAR — optional headline ════════════════════════════════════ */
.brands-bar__headline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 12px;
  text-align: center;
}

/* ══ CATEGORY CARDS — icon variant with branded gradient ════════════════
   Overrides main.css .cat-img (aspect-ratio:4/3, background:surface2,
   svg opacity:0.18) to give icon cards a rich navy-to-steel gradient
   with a visible white icon instead of a faint gray placeholder. */
.cat-img--icon {
  aspect-ratio: 4/3;
  background: linear-gradient(140deg, #1a3a6b 0%, #2a5a9a 60%, #4a7fc1 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cat-img--icon svg {
  width: 52px !important;
  height: 52px !important;
  opacity: 1 !important;
  stroke: rgba(255,255,255,0.75) !important;
}

/* Photo variant — background-image set inline via style attribute */
.cat-img--photo {
  aspect-ratio: 4/3;
  background-size: cover !important;
  background-position: center !important;
  display: block !important;
}

/* ══ SECTION SUBTITLE ════════════════════════════════════════════════════ */
.section-subtitle {
  font-size: 15px;
  color: var(--slate);
  margin-top: 4px;
}

/* ══ CONTENT BLOCKS ══════════════════════════════════════════════════════ */
.content-block {
  padding: 64px 0;
}
.content-block + .content-block {
  padding-top: 0;
}
.content-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.content-block--image-right .content-block__img { order: 2; }
.content-block--image-right .content-block__body { order: 1; }
.content-block--full-width .content-block__inner {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.content-block__img img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.content-block__headline {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--navy);
  margin-bottom: 16px;
  line-height: 1.2;
}
.content-block__body p {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.65;
  margin-bottom: 16px;
}
.btn-content-block {
  display: inline-flex;
  align-items: center;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.15s;
  margin-top: 8px;
}
.btn-content-block:hover { background: var(--accent-dark); }

/* ══ NO PRODUCTS MESSAGE ════════════════════════════════════════════════ */
.no-products-msg {
  padding: 32px;
  text-align: center;
  color: var(--slate);
  font-size: 14px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-mid);
}

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nav-hamburger { display: flex; }
  .header-inner { position: relative; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
    z-index: 999;
  }
  .main-nav.is-mobile-open { display: flex; }

  /* Mobile: labels and links are full-width tap targets */
  .nav-item--link,
  .nav-item__label {
    padding: 13px 20px;
    font-size: 15px;
    width: 100%;
    justify-content: space-between;
    border-radius: 0;
  }
  .nav-item { border-radius: 0; }

  /* Mobile dropdowns — accordion, not floating */
  .nav-dropdown {
    position: static !important;
    opacity: 1 !important;
    pointer-events: all !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
    display: none;
    padding: 0 !important;
    background: var(--surface) !important;
    min-width: unset !important;
  }
  .nav-dropdown.is-open { display: block !important; }
  .nav-dropdown a { padding: 11px 32px; font-size: 14px; border-radius: 0; }

  .header-right .btn-quote { display: none; }
  .content-block__inner { grid-template-columns: 1fr; }
  .content-block--image-right .content-block__img { order: 0; }
  .content-block--image-right .content-block__body { order: 0; }
}

@media (max-width: 600px) {
  .promo-banner { font-size: 12px; padding: 8px 16px; }
}

/* ============================================================
   Extracted from HomePage.ss inline <style> blocks on 2026-10-11
   Blocks: .two-tools (3D Builder + Store Planner cards) and
   .gfc-promo (GF Custom promo section). No SS template vars.
   ============================================================ */

.two-tools{
    position:relative;
    background:radial-gradient(ellipse at 20% 0%, rgba(47,109,174,0.22) 0%, transparent 55%),
               radial-gradient(ellipse at 80% 100%, rgba(46,125,50,0.18) 0%, transparent 55%),
               linear-gradient(180deg,#0F1F3D 0%,#1F3A5F 100%);
    padding:72px 24px;
    color:#ffffff;
    overflow:hidden;
}
.two-tools__inner{max-width:1180px;margin:0 auto;position:relative;z-index:1;}
.two-tools__eyebrow{margin:0 0 10px 0;font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#93C5FD;text-align:center;}
.two-tools__title{margin:0 0 14px 0;font-size:38px;font-weight:800;color:#ffffff;letter-spacing:-0.015em;text-align:center;line-height:1.1;}
.two-tools__sub{margin:0 auto 48px;max-width:680px;font-size:16px;line-height:1.6;color:#CBD5E1;text-align:center;}
.two-tools__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:28px;}
.tt-card{
    position:relative;
    background:#ffffff;
    border-radius:16px;
    padding:36px 32px 32px;
    display:flex;
    flex-direction:column;
    box-shadow:0 8px 24px rgba(15,23,42,0.18), 0 2px 4px rgba(15,23,42,0.06);
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
}
.tt-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(15,23,42,0.24), 0 4px 8px rgba(15,23,42,0.08);}
.tt-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;}
.tt-card--configurator::before{background:linear-gradient(90deg,#2F6DAE 0%,#38BDF8 100%);}
.tt-card--planner::before{background:linear-gradient(90deg,#2E7D32 0%,#22C55E 100%);}
.tt-card__header{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.tt-card__icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(15,23,42,0.08);}
.tt-card--configurator .tt-card__icon{background:linear-gradient(135deg,#EFF6FF 0%,#DBEAFE 100%);}
.tt-card--planner .tt-card__icon{background:linear-gradient(135deg,#F0FDF4 0%,#DCFCE7 100%);}
.tt-card__kicker{font-size:11px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:2px;}
.tt-card--configurator .tt-card__kicker{color:#2F6DAE;}
.tt-card--planner .tt-card__kicker{color:#2E7D32;}
.tt-card__title{margin:0;font-size:26px;font-weight:800;color:#1F3A5F;letter-spacing:-0.01em;}
.tt-card__body{margin:0 0 20px 0;font-size:15px;line-height:1.65;color:#374151;}
.tt-card__list{margin:0 0 26px 0;padding:0;list-style:none;}
.tt-card__list li{position:relative;padding:6px 0 6px 28px;font-size:14px;line-height:1.55;color:#374151;}
.tt-card__list li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:16px;border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:12px;background-repeat:no-repeat;background-position:center;}
.tt-card--configurator .tt-card__list li::before{background-color:#2F6DAE;}
.tt-card--planner .tt-card__list li::before{background-color:#2E7D32;}
.tt-card__cta{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 26px;color:#ffffff;text-decoration:none;
    border-radius:8px;font-weight:700;font-size:14px;letter-spacing:0.06em;
    transition:transform .2s ease, box-shadow .2s ease;
}
.tt-card__cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,0.22);}
.tt-card--configurator .tt-card__cta{background:linear-gradient(135deg,#2F6DAE 0%,#1D4ED8 100%);box-shadow:0 6px 16px rgba(47,109,174,0.4);}
.tt-card--planner .tt-card__cta{background:linear-gradient(135deg,#2E7D32 0%,#166534 100%);box-shadow:0 6px 16px rgba(46,125,50,0.4);}
.tt-card__cta-note{margin-top:10px;font-size:12px;color:#6B7280;}
.tt-card__cta-wrap{margin-top:auto;}
@media (max-width:700px){
    .two-tools{padding:56px 20px;}
    .two-tools__title{font-size:30px;}
    .tt-card{padding:32px 24px 28px;}
}
.gfc-promo{
    position:relative;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(47,109,174,0.28) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(56,189,248,0.15) 0%, transparent 55%),
        linear-gradient(180deg,#0B1D33 0%,#1F3A5F 100%);
    color:#fff;
    padding:80px 24px;
    overflow:hidden;
}
.gfc-promo__inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;position:relative;z-index:1;}
.gfc-promo__eyebrow{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#93C5FD;}
.gfc-promo__headline{margin:0 0 18px;font-family:'DM Serif Display','DM Sans',serif;font-size:44px;font-weight:700;line-height:1.06;letter-spacing:-0.02em;color:#fff;}
.gfc-promo__sub{margin:0 0 28px;font-size:17px;line-height:1.6;color:#CBD5E1;max-width:520px;}
.gfc-promo__ctas{display:flex;gap:14px;flex-wrap:wrap;}
.gfc-promo__cta{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:8px;font-weight:700;font-size:14px;letter-spacing:0.02em;text-decoration:none;transition:transform .18s ease, box-shadow .18s ease;}
.gfc-promo__cta--primary{background:linear-gradient(135deg,#2F6DAE 0%,#1D4ED8 100%);color:#fff;box-shadow:0 6px 16px rgba(47,109,174,0.4);}
.gfc-promo__cta--primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(47,109,174,0.5);}
.gfc-promo__cta--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.35);}
.gfc-promo__cta--ghost:hover{border-color:#fff;background:rgba(255,255,255,0.06);}
.gfc-promo__proof{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gfc-promo__proof li{background:rgba(255,255,255,0.04);border:1px solid rgba(148,163,184,0.18);border-radius:12px;padding:22px 20px;}
.gfc-promo__proof-k{display:block;font-family:'DM Serif Display',serif;font-size:24px;font-weight:700;color:#fff;letter-spacing:-0.01em;margin-bottom:6px;}
.gfc-promo__proof-v{display:block;font-size:12px;color:#93C5FD;text-transform:uppercase;letter-spacing:0.1em;font-weight:600;}
.gfc-promo__scope{margin-top:22px;font-size:13px;color:#94A3B8;letter-spacing:0.02em;line-height:1.55;}
@media (max-width:900px){
    .gfc-promo__inner{grid-template-columns:1fr;gap:36px;}
    .gfc-promo__headline{font-size:34px;}
    .gfc-promo__proof{grid-template-columns:1fr;}
}