/* =========================================================
   HOME HERO
   ========================================================= */

.home-hero { display: grid; grid-template-columns: 52% 48%; align-items: center; width: 94%; margin: 0 auto; padding: 36px 3% 34px; background: var(--innacup-cream); }/* ---------- What's New ---------- */

.hero-left { display: flex; flex-direction: column; gap: 16px; }
.whats-new-panel { display: grid; grid-template-columns: 25% 75%; align-items: center; width: 100%; padding: 10px 18px; background: #fff7f3; border: 2px solid var(--innacup-pink); border-radius: 12px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10); }
.market-wagon-logo { display: flex; align-items: center; justify-content: center; padding-right: 18px; border-right: 1px solid #d9b1aa; }
.market-wagon-logo img { display: block; width: 88px; max-width: 100%; height: auto; }
.whats-new-content { padding-left: 20px; text-align: center; }
.whats-new-kicker { margin-bottom: 2px; font-family: "Patrick Hand", Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1; color: #e65f7a; }
.whats-new-content strong { display: block; font-size: 16px; }
.whats-new-content p { margin: 4px auto 8px; max-width: 560px; font-size: 13px; line-height: 1.3; }
.market-wagon-button { display: inline-block; padding: 7px 12px; background: var(--innacup-teal); border-radius: 6px; color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.market-wagon-button:hover { filter: brightness(0.95); }

/* ---------- Storefront ---------- */

.hero-photo { width: 100%; height: 360px; overflow: hidden; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); }.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }/* ---------- Hero Content ---------- */

.hero-content { display: flex; flex-direction: column; justify-content: center; margin-left: 7%; padding: 28px 8%; background: var(--innacup-cream); }.hero-script { margin: 0 0 5px 0; font-family: "Patrick Hand", cursive; font-size: 38px; line-height: 1; color: #e65f7a; }.hero-content h1 { margin: 0; font-family: "Oswald", Arial, sans-serif; font-size: clamp(46px, 4vw, 68px); font-weight: 600; line-height: 0.95; text-align: left; text-transform: uppercase; color: var(--innacup-teal); }/* ---------- Divider ---------- */

.hero-divider { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 430px; margin: 14px 0 8px; }.hero-divider span:not(.hero-heart) { flex: 1; height: 2px; background: #e65f7a; }.hero-heart { color: #e65f7a; font-size: 18px; }/* ---------- Welcome Copy ---------- */

.welcome-tagline { margin: 6px 0 10px; font-size: 24px; line-height: 1.15; }.welcome-intro { max-width: 500px; margin: 0 0 5px; font-size: 16px; line-height: 1.35; color: var(--text-dark); }.welcome-highlights { margin: 0 0 10px; }.welcome-group { margin: 0 0 8px; }.welcome-group:last-child { margin-bottom: 0; }.welcome-group strong { font-size: 15px; line-height: 1.25; }.welcome-group:nth-child(2) strong { display: block; }.welcome-closing { max-width: 500px; margin: 6px 0 0; font-size: 16px; line-height: 1.35; color: var(--text-dark); }/* =========================================================
   HOMEPAGE SECTION DIVIDERS
   ========================================================= */

.ice-cream-section,
.bakery-section { position: relative; }.ice-cream-section::before,
.bakery-section::before { content: ""; position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 6px; background: linear-gradient( to right, #222222 0%, #222222 25%, var(--innacup-aqua) 25%, var(--innacup-aqua) 33.333%, var(--innacup-teal) 33.333%, var(--innacup-teal) 41.666%, var(--innacup-cream) 41.666%, var(--innacup-cream) 50%, var(--innacup-yellow) 50%, var(--innacup-yellow) 58.333%, var(--innacup-pink) 58.333%, var(--innacup-pink) 66.666%, var(--innacup-chocolate) 66.666%, var(--innacup-chocolate) 75%, #222222 75%, #222222 100% ); }/* =========================================================
   SHARED HOMEPAGE FEATURE PHOTO STYLE
   ========================================================= */

.hero-photo,
.ice-cream-photo,
.bakery-photo { width: 100%; height: 360px; overflow: hidden; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); }.hero-photo img,
.ice-cream-photo img,
.bakery-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }/* =========================================================
   ICE CREAM SECTION
   ========================================================= */

.ice-cream-section { display: grid; grid-template-columns: 52% 48%; align-items: center; width: 94%; margin: 0 auto; padding: 36px 3% 34px; background: #e8f4f1; }.ice-cream-content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-left: 7%; padding: 28px 10%; }.ice-cream-logo { display: block; width: 325px; max-width: 100%; height: auto; margin-bottom: 8px; }/* ---------- Section Logo Divider ---------- */

.ice-cream-rule,
.bakery-rule { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 280px; margin: 10px 0 18px; }.ice-cream-rule span:not(.section-heart),
.bakery-rule span:not(.section-heart) { flex: 1; height: 2px; background: #e65f7a; }.section-heart { color: #e65f7a; font-size: 16px; line-height: 1; }.ice-cream-content p { max-width: 390px; margin: 0 0 24px; color: var(--text-dark); font-size: 16px; line-height: 1.5; }.ice-cream-button { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 6px; background: var(--innacup-teal); color: #ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); font-size: 13px; font-weight: 800; letter-spacing: 0.4px; text-decoration: none; text-transform: uppercase; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }.ice-cream-button:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.20); filter: brightness(0.95); }.ice-cream-button span { font-size: 19px; line-height: 1; }/* =========================================================
   GLAD ALICE BAKERY
   ========================================================= */

.bakery-section { display: grid; grid-template-columns: 48% 52%; align-items: center; width: 94%; margin: 0 auto; padding: 36px 3% 34px; background: #fff3f5; }.bakery-content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-right: 7%; padding: 28px 10%; }.bakery-logo { display: block; width: 280px; max-width: 100%; height: auto; margin-bottom: 8px; }.bakery-content p { max-width: 390px; margin: 0 0 24px; color: var(--text-dark); font-size: 16px; line-height: 1.5; }.bakery-button { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 6px; background: #d94463; color: #ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); font-size: 13px; font-weight: 800; letter-spacing: 0.4px; text-decoration: none; text-transform: uppercase; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }.bakery-button:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.20); filter: brightness(0.95); }.bakery-button span { font-size: 19px; line-height: 1; }/* =========================================================
   BETTER TOGETHER
   ========================================================= */

.better-together-section { position: relative; display: grid; grid-template-columns: 52% 48%; align-items: start; width: 94%; margin: 0 auto; padding: 36px 3% 34px; background: var(--innacup-cream); }
.better-together-section::before { content: ""; position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 6px; background: linear-gradient(to right, #222222 0%, #222222 25%, var(--innacup-aqua) 25%, var(--innacup-aqua) 33.333%, var(--innacup-teal) 33.333%, var(--innacup-teal) 41.666%, var(--innacup-cream) 41.666%, var(--innacup-cream) 50%, var(--innacup-yellow) 50%, var(--innacup-yellow) 58.333%, var(--innacup-pink) 58.333%, var(--innacup-pink) 66.666%, var(--innacup-chocolate) 66.666%, var(--innacup-chocolate) 75%, #222222 75%, #222222 100%); }
.better-together-photo { width: 100%; overflow: hidden; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); }.better-together-photo img { display: block; width: 100%; height: auto; }
.better-together-right { display: flex; flex-direction: column; gap: 22px; margin-left: 7%; }
.better-together-content { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 22px 7% 24px; background: var(--innacup-cream); border: 6px solid var(--innacup-teal); border-radius: 16px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); text-align: center; }
.better-together-logo { display: block; width: 390px; max-width: 100%; height: auto; margin: 0 auto 4px; }.better-together-tagline { margin: 0; color: var(--text-dark); font-size: 19px; font-weight: 800; line-height: 1.3; }.better-together-rule { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 280px; margin: 12px auto 14px; }.better-together-rule span:not(.section-heart) { flex: 1; height: 2px; background: #e65f7a; }
.better-together-lead { max-width: 440px; margin: 0 0 16px; color: var(--text-dark); font-size: 17px; font-weight: 600; line-height: 1.45; }.better-together-lead strong { display: inline-block; margin-top: 3px; font-weight: 800; }.better-together-matchmaking { display: flex; flex-direction: column; gap: 1px; margin: 0 0 11px; }.better-together-matchmaking strong { color: var(--innacup-teal); font-size: 16px; line-height: 1.2; }.better-together-matchmaking span { color: var(--text-dark); font-size: 14px; font-style: italic; line-height: 1.3; }
.better-together-pairings { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 430px; color: var(--text-dark); font-size: 14px; line-height: 1.3; }.better-together-question { margin: 14px 0 0; color: #e65f7a; font-size: 16px; font-weight: 800; line-height: 1.3; }
.better-together-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.better-together-item { overflow: hidden; background: #ffffff; border-radius: 14px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14); }.better-together-item img { display: block; width: 100%; aspect-ratio: 1 / 1.12; object-fit: cover; object-position: center; }.better-together-caption { padding: 9px 8px 10px; color: var(--innacup-teal); font-family: "Oswald", Arial, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.3px; text-align: center; text-transform: uppercase; }

/* =========================================================
   HOMEPAGE FEATURE CONTENT PANELS
   ========================================================= */

.hero-content,
.ice-cream-content,
.bakery-content { border: 6px solid; border-radius: 16px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); text-align: center; align-items: center; }.hero-content { border-color: var(--innacup-teal); }.ice-cream-content { border-color: #8f6f91; }.bakery-content { border-color: #765044; }.hero-content h1,
.hero-script,
.welcome-tagline,
.welcome-intro,
.welcome-highlights,
.welcome-closing,
.ice-cream-content p,
.bakery-content p { text-align: center; }.hero-divider,
.section-divider,
.ice-cream-rule,
.bakery-rule { margin-left: auto; margin-right: auto; }.ice-cream-logo,
.bakery-logo { margin-left: auto; margin-right: auto; }.ice-cream-button,
.bakery-button { align-self: center; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
    .home-hero, .ice-cream-section, .bakery-section, .better-together-section { grid-template-columns: 1fr; width: 100%; padding: 36px 5%; }
    .hero-photo, .ice-cream-photo, .bakery-photo { max-width: 850px; height: 340px; margin: 0 auto; }
    .hero-content, .ice-cream-content, .bakery-content { margin: 28px auto 0; width: min(92%, 700px); padding: 28px 6%; }
    .bakery-content { order: 1; }
    .bakery-photo { order: 2; }
    .better-together-photo { width: min(100%, 700px); margin: 0 auto; }
    .better-together-right { width: min(100%, 700px); margin: 28px auto 0; }
    .better-together-content { width: 100%; padding: 28px 6%; }
}

.section-divider { display: flex; align-items: center; gap: 10px; width: 230px; margin: 14px 0 18px; }.section-divider span:not(.section-heart) { flex: 1; height: 2px; background: #e65f7a; }.section-heart { color: #e65f7a; font-size: 18px; line-height: 1; }

@media (max-width: 700px) {
    .hero-left { gap: 12px; }
    .whats-new-panel { grid-template-columns: 1fr; padding: 12px 14px; }
    .market-wagon-logo { padding: 0 0 9px; border-right: 0; border-bottom: 1px solid #d9b1aa; }
    .market-wagon-logo img { width: 72px; }
    .whats-new-content { padding: 9px 0 0; }
    .whats-new-kicker { font-size: 20px; }
    .whats-new-content strong { font-size: 15px; }
    .whats-new-content p { font-size: 12px; }
    .home-hero, .ice-cream-section, .bakery-section, .better-together-section { padding: 30px 5%; }
    .hero-photo, .ice-cream-photo, .bakery-photo { height: 300px; border-radius: 12px; }
    .hero-script { font-size: 34px; }
    .hero-content h1 { font-size: 48px; }
    .welcome-tagline { font-size: 22px; }
    .welcome-intro, .welcome-closing, .ice-cream-content p, .bakery-content p { font-size: 15px; }
    .welcome-group strong { font-size: 14px; }
    .hero-content, .ice-cream-content, .bakery-content { width: 100%; margin: 24px auto 0; padding: 24px 5%; border-width: 4px; border-radius: 12px; }
    .better-together-photo { border-radius: 12px; }
    .better-together-right { width: 100%; margin: 24px auto 0; gap: 16px; }
    .better-together-content { width: 100%; padding: 24px 5%; border-width: 4px; border-radius: 12px; }
    .better-together-showcase { gap: 10px; }
    .better-together-item { border-radius: 10px; }
    .better-together-caption { padding: 8px 5px 9px; font-size: 14px; }
    .better-together-logo { width: 330px; }
    .better-together-tagline { font-size: 17px; }
    .better-together-lead { font-size: 15px; }
    .better-together-matchmaking strong { font-size: 15px; }
    .better-together-matchmaking span, .better-together-pairings { font-size: 13px; }
    .better-together-question { font-size: 15px; }
}