/* ============================================================
   AK FISHERS — Homepage styles
   ============================================================ */

/* Category strip under hero */
.cat-strip { background: #fff; border-bottom: 1px solid var(--line-soft); }
.cat-strip-inner { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0; scrollbar-width: none; }
.cat-strip-inner::-webkit-scrollbar { display: none; }
.cat-strip-inner a {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  padding: 9px 16px; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  transition: all 0.16s ease; background: #fff;
}
.cat-strip-inner a:hover { border-color: var(--ocean-400); color: var(--ocean-600); background: var(--ocean-50); }
.cat-strip-inner a img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

/* Best sellers header row */
.bs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.bs-head .section-head { margin-bottom: 0; }

/* Freshness promise — ocean band */
.promise-band { background: var(--ocean-900); border-radius: var(--r-xl); padding: 56px 50px; position: relative; overflow: hidden; }
.promise-band::before { content: ""; position: absolute; left: -80px; top: -80px; width: 300px; height: 300px; border-radius: 50%; background: rgba(34,184,224,0.08); }
.promise-band::after { content: ""; position: absolute; right: -60px; bottom: -100px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,0.04); }
.promise-band .section-head h2 { color: #fff; }
.promise-band .section-head p { color: #a9c6d8; }
.promise-band .promise-grid { position: relative; z-index: 1; }
.promise-band .promise-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(6px); }
.promise-band .promise-card .pc-icon { background: rgba(34,184,224,0.16); color: var(--aqua); }
.promise-band .promise-card h3 { color: #fff; }
.promise-band .promise-card p { color: #a9c6d8; }

/* How it works */
.steps-wrap { position: relative; }
.steps-line { position: absolute; top: 64px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--ocean-200) 0 8px, transparent 8px 16px); z-index: 0; }
.steps { position: relative; z-index: 1; }

/* Why choose — split layout */
.why-split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 44px; align-items: center; }
.why-media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 4.4; box-shadow: var(--shadow-lg); }
.why-media img { width: 100%; height: 100%; object-fit: cover; }
.why-media .wm-badge {
  position: absolute; bottom: 20px; left: 20px; right: 20px;
  background: rgba(255,255,255,0.94); border-radius: var(--r-lg); padding: 18px 20px;
  display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-md);
}
.why-media .wm-badge .wmb-icon { width: 46px; height: 46px; border-radius: 13px; background: var(--sea-green-soft); color: var(--sea-green-dark); display: grid; place-items: center; flex-shrink: 0; }
.why-media .wm-badge b { display: block; font-size: 14.5px; }
.why-media .wm-badge span { font-size: 12.5px; color: var(--muted); }

/* Testimonials */
.testi-band { background: var(--off-white); }
.testi-card .t-quote { font-family: var(--font-display); font-size: 40px; line-height: 0.6; color: var(--ocean-200); }

/* Delivery banner */
.delivery-section { padding-bottom: 80px; }

/* App / WhatsApp strip */
.app-strip { background: var(--sea-green-soft); border-radius: var(--r-xl); padding: 34px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.app-strip .as-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--sea-green); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.app-strip h3 { font-size: 20px; }
.app-strip p { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }

@media (max-width: 1040px) {
  .why-split { grid-template-columns: 1fr; gap: 34px; }
  .why-media { max-width: 520px; }
}

@media (max-width: 900px) {
  .promise-band { padding: 40px 26px; }
  .steps-line { display: none; }
}

@media (max-width: 640px) {
  .promise-band { border-radius: var(--r-lg); }
  .app-strip { padding: 26px 22px; }
}
/* ---------- Why AK Fishers ---------- */
.why-section { background: linear-gradient(180deg, #fff 0%, var(--ocean-50) 100%); }
.wy-accent { color: var(--ocean-500); }
.wy-stats { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 940px; margin: 0 auto 38px; background: var(--navy); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.wy-stat { padding: 24px 16px; text-align: center; color: #fff; }
.wy-stat + .wy-stat { border-left: 1px solid rgba(255,255,255,0.12); }
.wy-stat b { display: block; font-family: var(--font-display); font-size: 34px; line-height: 1.1; color: #fff; }
.wy-stat b small { font-size: 22px; color: #f5b342; margin-left: 3px; }
.wy-stat span { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--ocean-200); }
.wy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wy-card { position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 30px 26px 26px; overflow: hidden; }
.wy-card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--ocean-500), var(--aqua)); transition: width 0.35s ease; }
.wy-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--ocean-200); }
.wy-card:hover::before { width: 100%; }
.wy-num { position: absolute; right: 20px; top: 14px; font-family: var(--font-display); font-size: 44px; font-weight: 700; color: var(--ocean-100); line-height: 1; }
.wy-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--ocean-600), var(--ocean-400)); box-shadow: 0 10px 22px rgba(18, 127, 176, 0.3); margin-bottom: 18px; position: relative; }
.wy-icon svg { width: 26px; height: 26px; }
.wy-card h3 { font-size: 18px; margin-bottom: 8px; position: relative; }
.wy-card p { font-size: 14px; color: var(--muted); line-height: 1.7; position: relative; }
.wy-cta { margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 30px 34px; border-radius: var(--r-xl); color: #fff; background: radial-gradient(60% 120% at 90% 0%, rgba(34, 184, 224, 0.35), transparent 70%), linear-gradient(120deg, var(--ocean-900), var(--ocean-700)); box-shadow: var(--shadow-lg); }
.wy-cta h3 { color: #fff; font-size: 22px; margin-bottom: 6px; }
.wy-cta p { color: #c3dbe9; font-size: 14.5px; max-width: 520px; }
.wy-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.wy-card, .wy-stat, .wy-cta { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.6s ease; }
.wy-hide { opacity: 0; transform: translateY(18px); }
@media (max-width: 900px) { .wy-grid { grid-template-columns: repeat(2, 1fr); } .wy-stats { grid-template-columns: repeat(2, 1fr); } .wy-stat:nth-child(3) { border-left: 0; } .wy-stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.12); } }
@media (max-width: 640px) { .wy-grid { grid-template-columns: 1fr; } .wy-card { padding: 24px 20px 22px; } .wy-stat b { font-size: 28px; } .wy-cta { padding: 24px 20px; } .wy-cta-btns, .wy-cta-btns .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .wy-hide { opacity: 1; transform: none; } .wy-card, .wy-stat, .wy-cta { transition: none; } }