/* Homepage (mockup: Home) */
.jfs-p .hm-kicker { font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #f2b8b3; }
.jfs-p .hm-kicker-red { color: #b3261e; }
.jfs-p .hm-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.jfs-p .hm-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px; padding: 14px 22px; border-radius: 12px; }
.jfs-p .hm-btn-white { background: #fff; color: #14324f; }
.jfs-p .hm-btn-white:hover { background: #eef2f6; color: #14324f; }
.jfs-p .hm-btn-ghost { border: 1.5px solid #fff; color: #fff; padding: 13px 22px; }
.jfs-p .hm-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.jfs-p .hm-btn-navy { background: #14324f; color: #fff; }
.jfs-p .hm-btn-navy:hover { background: #0b1f33; color: #fff; }
.jfs-p .hm-btn-line { border: 1.5px solid #14324f; color: #14324f; padding: 13px 22px; }
.jfs-p .hm-btn-line:hover { background: #eef2f6; color: #14324f; }
.jfs-p .hm-u { font-weight: 700; text-decoration: underline; }

/* Banners / hero */
.hm-banners { position: relative; background: #111; }
.hm-slide { display: block; }
.hm-slide img { width: 100%; max-width: 1920px; margin: 0 auto; display: block; height: auto; }
.hm-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
.jfs-p .hm-dots button { width: 10px; height: 10px; min-height: 0; padding: 0; border-radius: 999px; border: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.jfs-p .hm-dots button[aria-current="true"] { background: #fff; width: 26px; }
.hm-hero { background: #0f2740; color: #fff; }
.jfs-p .hm-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
.hm-hero-text { display: flex; flex-direction: column; gap: 16px; }
body .jfs-p .hm-hero h1 { margin: 0; font-size: 54px; line-height: 1.03; font-weight: 800; color: #fff; }
.hm-hero p { font-size: 18px; line-height: 1.55; color: #d6e0ea; max-width: 520px; }
.hm-proofline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #d6e0ea; }
.hm-proofline span { color: #f2b01e; }
.hm-hero-img { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; }
.hm-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* Section heads */
.jfs-p .hm-sec { padding-top: 48px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 18px; }
.hm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
body .jfs-p .hm-head h2 { margin: 0; font-size: 28px; color: #14324f; }
.hm-head span { font-size: 15px; color: #56606c; }
.jfs-p .hm-head a { font-weight: 700; color: #14324f; white-space: nowrap; }

/* Categories */
.hm-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.jfs-p .hm-cat { text-decoration: none; color: #1b2430; display: flex; flex-direction: column; gap: 10px; }
.hm-cat-img { aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; display: block; background: #f3f6f9; }
.hm-cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.hm-fit-contain img { object-fit: contain; }
.hm-cat:hover .hm-cat-img img { transform: scale(1.04); }
.hm-cat strong { font-family: Poppins, sans-serif; font-size: 16px; line-height: 1.25; }
.jfs-p .hm-best { padding-top: 40px; padding-bottom: 56px; gap: 20px; }
body .jfs-p .hm-best .hm-head h2 { font-size: 30px; }

/* Proof band */
.hm-proof { background: #f3f6f9; }
.hm-proof .wrap { padding-top: 48px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 28px; }
.hm-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hm-proof-grid div { display: flex; flex-direction: column; gap: 4px; }
.hm-proof-grid strong { font-family: Poppins, sans-serif; font-weight: 800; font-size: 34px; color: #14324f; line-height: 1.15; }
.hm-proof-grid span { font-size: 15px; color: #36404c; }
.hm-seen { display: flex; gap: 36px; align-items: center; justify-content: center; flex-wrap: wrap; border-top: 1px solid #dde3ea; padding-top: 24px; }
.hm-seen span { font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #56606c; }
.hm-seen img { height: 56px; width: auto; mix-blend-mode: multiply; }

/* Luke + OLD BAY */
.jfs-p .hm-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding-top: 56px; padding-bottom: 40px; }
.jfs-p .hm-luke { position: relative; display: block; border-radius: 20px; overflow: hidden; min-height: 360px; color: #fff; text-decoration: none; background: #0f2740; }
.hm-luke img { position: absolute; inset: 0; width: 100%; height: 135%; object-fit: cover; object-position: top; }
.hm-luke::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(15, 39, 64, .92)); }
.hm-luke-text { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.hm-luke-text .hm-kicker { font-size: 12px; letter-spacing: 1.4px; }
.hm-luke-text strong { font-family: Poppins, sans-serif; font-size: 26px; line-height: 1.15; }
.jfs-p .hm-oldbay { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff6d6; color: #14324f; text-decoration: none; }
.hm-oldbay img { width: 100%; display: block; }
.hm-oldbay-text { padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.hm-oldbay-text strong { font-family: Poppins, sans-serif; font-size: 22px; }
.hm-oldbay-text span:not(.hm-u) { font-size: 15px; color: #36404c; }

/* Reviews */
.jfs-p .hm-revs-sec { padding-top: 40px; padding-bottom: 56px; gap: 20px; }
.hm-revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hm-revs figure { margin: 0; border: 1px solid #dde3ea; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.hm-stars { color: #d99a00; letter-spacing: 1px; }
.hm-revs blockquote { font-size: 16px; line-height: 1.6; color: #1b2430; }
.hm-revs figcaption { font-size: 13px; color: #56606c; margin-top: auto; }

/* Visit */
.hm-visit { background: #0f2740; color: #fff; }
.hm-visit .wrap { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 24px; }
.hm-visit-head { display: flex; flex-direction: column; gap: 6px; }
body .jfs-p .hm-visit h2 { margin: 0; font-size: 32px; color: #fff; }
.hm-visit-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.jfs-p .hm-visit-tiles a { text-decoration: none; color: #fff; display: flex; flex-direction: column; gap: 10px; }
.hm-vt-img { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; display: block; }
.hm-vt-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.hm-visit-tiles a:hover img { transform: scale(1.04); }
.hm-visit-tiles strong { font-family: Poppins, sans-serif; font-size: 18px; }
.hm-live { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; }
.hm-live-box { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.hm-live-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hm-live-head strong { font-family: Poppins, sans-serif; font-size: 18px; }
.jfs-p .hm-live-head a, .jfs-p .hm-live-empty a { color: #fff; font-weight: 700; font-size: 14px; }
.jfs-p .hm-ev { display: flex; gap: 12px; align-items: center; text-decoration: none; color: #fff; }
.hm-ev img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.hm-ev > span { display: flex; flex-direction: column; gap: 2px; }
.hm-ev-date { font-size: 12px; font-weight: 700; color: #f2b8b3; }
.hm-truck { display: flex; flex-direction: column; gap: 2px; }
.hm-truck span { font-size: 14px; color: #d6e0ea; }
.hm-live-empty { font-size: 14px; color: #d6e0ea; }

/* Gifting */
.jfs-p .hm-gift { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 56px; }
.hm-gift img { width: 100%; border-radius: 18px; display: block; }
.hm-gift-text { display: flex; flex-direction: column; gap: 14px; }
body .jfs-p .hm-gift h2 { margin: 0; font-size: 34px; line-height: 1.12; color: #14324f; }
.hm-gift p { font-size: 16px; line-height: 1.65; color: #36404c; }

/* Email signup */
.hm-signup { background: #b3261e; color: #fff; }
.jfs-p .hm-signup-in { padding-top: 40px; padding-bottom: 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.hm-signup-text { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.hm-signup-text strong { font-family: Poppins, sans-serif; font-size: 26px; }
.hm-signup-text span { font-size: 15px; color: #fbe3e1; }
.hm-signup-form { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
.jfs-p .hm-signup-form input[type=email] { border: 0; border-radius: 12px; padding: 0 16px; min-height: 50px; width: 280px; max-width: 100%; font-size: 16px; }
.jfs-p .hm-signup-form button { border: 0; background: #14324f; color: #fff; font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px; padding: 0 22px; border-radius: 12px; min-height: 50px; cursor: pointer; }
.jfs-p .hm-signup-form button:hover { background: #0b1f33; }
.jfs-p .hm-signup-form button:disabled { opacity: .6; }
.hm-signup-msg { flex-basis: 100%; font-weight: 600; font-size: 15px; }
.hm-signup-msg.is-err { color: #ffe1de; }

/* Responsive */
@media (max-width: 1080px) {
	.hm-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hm-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.jfs-p .hm-hero-in, .hm-live, .jfs-p .hm-gift, .jfs-p .hm-duo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	body .jfs-p .hm-hero h1 { font-size: 34px; }
	.hm-cats { gap: 10px; }
	.hm-revs { grid-template-columns: minmax(0, 1fr); }
	.hm-visit-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hm-proof-grid strong { font-size: 26px; }
	.hm-seen { gap: 20px; }
	.hm-seen img { height: 40px; }
	body .jfs-p .hm-gift h2 { font-size: 28px; }
	.jfs-p .hm-luke { min-height: 300px; }
}
@media (max-width: 560px) {
	.jfs-p .hm-hero-in, .jfs-p .hm-sec, .jfs-p .hm-duo, .jfs-p .hm-gift, .jfs-p .hm-signup-in { padding-left: 16px; padding-right: 16px; }
	.hm-proof .wrap, .hm-visit .wrap { padding-left: 16px; padding-right: 16px; }
	.hm-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hm-cat strong { font-size: 13px; }
	.hm-signup-form, .jfs-p .hm-signup-form input[type=email] { width: 100%; }
	.jfs-p .hm-signup-form button { flex: 1; }
}
.jfs-p a.hm-truck { text-decoration: none; color: #fff; }
.jfs-p a.hm-truck:hover strong { text-decoration: underline; }

/* Best sellers: a sliding row (4 visible on desktop, 1 + a peek on phones) */
.hm-rail-ctl { display: flex; align-items: center; gap: 10px; }
.jfs-p .hm-rail-btn { width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 999px; border: 1.5px solid #14324f; background: #fff; color: #14324f; font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.jfs-p .hm-rail-btn:hover:not(:disabled) { background: #14324f; color: #fff; }
.jfs-p .hm-rail-btn:disabled { opacity: .3; cursor: default; }
.hm-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px; }
.hm-rail::-webkit-scrollbar { display: none; }
.hm-rail > .jfs-card { scroll-snap-align: start; }
.hm-rail:focus-visible { outline: 3px solid #b3261e; outline-offset: 4px; }
.hm-rail-dots { display: none; justify-content: center; gap: 6px; }
.hm-rail-dots span { width: 8px; height: 8px; border-radius: 999px; background: #c9d2dc; transition: width .2s; }
.hm-rail-dots span.on { background: #14324f; width: 20px; }
@media (max-width: 1080px) {
	.hm-rail { grid-auto-columns: calc((100% - 2 * 16px) / 2.5); gap: 16px; }
}
@media (max-width: 560px) {
	.hm-rail { grid-auto-columns: 82%; gap: 14px; margin: 0 -16px; padding: 0 16px 4px; scroll-padding-left: 16px; }
	.hm-rail-btn { display: none !important; }
	.hm-rail-dots { display: flex; }
}

/* Links on the navy sections stay white on hover/focus (the generic .jfs-p a:hover is dark navy). */
.jfs-p .hm-luke:hover, .jfs-p .hm-luke:focus,
.jfs-p .hm-visit a:hover, .jfs-p .hm-visit a:focus { color: #fff; }
.jfs-p .hm-visit-tiles a:hover, .jfs-p .hm-live-head a:hover, .jfs-p .hm-live-empty a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jfs-p .hm-ev:hover strong, .jfs-p .hm-truck:hover strong { text-decoration: underline; text-underline-offset: 3px; }