
/* Black Friday 2026: every rule is intentionally scoped to this template. */
.fh-black-friday {
  --fhbf-blue: #006fb6;
  --fhbf-blue-dark: #004f86;
  --fhbf-yellow: #fff200;
  --fhbf-green: #2f8f59;
  --fhbf-red: #d8112b;
  --fhbf-ink: #172033;
  --fhbf-muted: #667085;
  --fhbf-line: #dce5e9;
  --fhbf-soft: #f5f8f5;
  --fhbf-campaign-navy: #0b1b27;
  color: var(--fhbf-ink);
  font-family: inherit;
  width: 100%;
  min-width: 0;
  flex: 0 0 100%;
  background: #fff;
}
.fh-black-friday *, .fh-black-friday *::before, .fh-black-friday *::after { box-sizing: border-box; }
.fh-black-friday img { display: block; max-width: 100%; }
.fh-black-friday a { text-decoration: none; }
.fhbf-shell { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
.fhbf-section { padding: 64px 0; }
.fhbf-section--soft { background: var(--fhbf-soft); }
.fhbf-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.fhbf-heading h2 { margin: 0; color: var(--fhbf-ink); font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 900; letter-spacing: -.025em; }
.fhbf-heading p { max-width: 640px; margin: 7px 0 0; color: var(--fhbf-muted); line-height: 1.55; }
.fhbf-text-link { flex: 0 0 auto; color: var(--fhbf-blue); font-weight: 800; }
.fhbf-text-link:hover, .fhbf-text-link:focus { color: var(--fhbf-blue-dark); text-decoration: underline; }

/* Original landscape hero composition, image, sizing and type. Only its
   palette changes: navy image wash, white copy and red promotional accents. */
.fhbf-hero { position:relative; min-height:420px; isolation:isolate; background:var(--fhbf-campaign-navy); color:#fff; }
.fhbf-hero::before { content:""; position:absolute; z-index:-2; inset:0; background:url('../images/spring-sale-2026-hero.jpg') center / cover no-repeat; }
.fhbf-hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(11,27,39,.98) 0%,rgba(11,27,39,.94) 32%,rgba(11,27,39,.6) 66%,rgba(11,27,39,.22) 100%); }
.fhbf-hero__inner { min-height:420px; display:flex; align-items:center; }
.fhbf-hero__copy { width:52%; max-width:600px; padding:48px 0; }
.fhbf-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 8px 13px; border-radius: 999px; background: #fff; color: var(--fhbf-green); box-shadow: 0 5px 18px rgba(24,89,57,.12); font-size: .78rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.fhbf-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #68bd45; }
.fhbf-hero h1 { margin:0; color:#fff; font-size:clamp(3rem,6vw,5.6rem); font-weight:950; line-height:.97; letter-spacing:-.065em; }
.fhbf-hero__offer { display:inline-block; margin:13px 0 20px; padding:7px 14px 9px; color:#fff; background:var(--fhbf-red); font-size:clamp(1.15rem,2vw,1.6rem); font-weight:950; line-height:1; transform:rotate(-1deg); box-shadow:6px 6px 0 #901125; }
.fhbf-hero p { margin:0; max-width:500px; color:#e0e6ef; font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.55; }
.fhbf-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 25px; padding: 12px 24px; border: 2px solid var(--fhbf-blue); border-radius: 8px; background: var(--fhbf-blue); color: #fff !important; font-weight: 850; box-shadow: 0 10px 22px rgba(0,111,182,.2); transition: transform .18s ease, background .18s ease; }
.fhbf-cta:hover, .fhbf-cta:focus { transform: translateY(-2px); background: var(--fhbf-blue-dark); }
.fhbf-hero .fhbf-cta { background:var(--fhbf-red); border-color:var(--fhbf-red); box-shadow:0 10px 22px rgba(216,17,43,.2); }
.fhbf-hero .fhbf-cta:hover, .fhbf-hero .fhbf-cta:focus { background:#9d1b2c; border-color:#9d1b2c; }
.fhbf-hero .fhbf-cta:focus-visible { outline:3px solid #fff; outline-offset:4px; }

.fhbf-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fhbf-category { position: relative; min-height: 174px; overflow: hidden; border: 1px solid rgba(0,79,134,.12); border-radius: 14px; background-color: #eaf4f6; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 5px 16px rgba(17,40,60,.08); color: #fff !important; transition: transform .2s ease, box-shadow .2s ease; }
.fhbf-category::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,28,43,.9), rgba(8,28,43,.05) 72%); }
.fhbf-category:hover, .fhbf-category:focus { transform: translateY(-4px); box-shadow: 0 13px 28px rgba(17,40,60,.16); }
.fhbf-category span { position: absolute; z-index: 1; right: 14px; bottom: 12px; left: 14px; color: #fff; font-size: 1.04rem; font-weight: 900; text-shadow: 0 2px 8px #000; }
.fhbf-category--rc { background-image: url('../images/spring-sale-2026-rc.jpg'); }
.fhbf-category--models { background-image: url('../images/spring-sale-2026-model-building.jpg'); }
.fhbf-category--lego { background-image: url('../images/spring-sale-2026-lego.jpg'); }
.fhbf-category--warhammer { background-image: url('../images/spring-sale-2026-warhammer.jpg'); }
.fhbf-category--bandai { background-image: url('../images/spring-sale-2026-bandai.jpg'); }
.fhbf-category--toys { background-image: url('../images/spring-sale-2026-toys.jpg'); }
.fhbf-category--diecast { background-image: url('../images/spring-sale-2026-diecast.jpg'); }
.fhbf-category--rail { background-image: url('../images/spring-sale-2026-model-rail.jpg'); }
.fhbf-category--slot { background-image: url('../images/spring-sale-2026-slot-cars.jpg'); }
.fhbf-category--games { background-image: url('../images/spring-sale-2026-games-puzzles.jpg'); }
.fhbf-category--supplies { background-image: url('../images/spring-sale-2026-hobby-supplies.jpg'); }


/* Campaign root is a Bootstrap column inside the shared header's container row. */
@media (min-width:1200px) {
 #main-content.container:has(> .row > .fh-black-friday) { max-width:1320px; }
 .fhbf-hero__copy { padding:60px 0; }
}
.fh-black-friday { --fhbf-green:#005b96; }
.fh-black-friday [hidden] { display:none !important; }
.fh-black-friday a:focus-visible, .fh-black-friday button:focus-visible { outline:3px solid #006fb6; outline-offset:4px; }
.fhbf-eyebrow::before { background:#006fb6; }
.fhbf-section { padding:40px 0; }
.fhbf-category { width:100%; min-width:0; min-height:0; aspect-ratio:1.9 / 1; }
.fhbf-more-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.fhbf-more-card { display:flex; align-items:center; justify-content:center; min-height:96px; padding:16px; border:1px solid var(--fhbf-line); border-radius:4px; background:#fff; color:var(--fhbf-blue-dark); text-align:center; }
.fhbf-more-card:hover { border-color:var(--fhbf-blue); background:#eef6fc; }
.fhbf-more-card strong { display:block; font-size:22px; font-weight:800; }
.fhbf-more-card span { display:block; margin-top:4px; color:#005b96; font-size:13px; font-weight:700; }
.fhbf-final { text-align:center; background:#eef6fc; }
.fhbf-final h2 { margin:0; color:var(--fhbf-blue-dark); font-weight:800; font-size:clamp(1.7rem,4vw,2.4rem); }
.fhbf-help { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; margin-top:18px; }
.fhbf-help a { display:inline-flex; align-items:center; min-height:44px; color:#005b96; font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.fhbf-products { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:stretch; gap:12px; }
@media (min-width:768px) and (max-width:1199px) {
 .fhbf-products { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:768px) and (max-width:1024px) {
 .fhbf-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .fhbf-hero h1 { font-size:clamp(3rem,6vw,4rem); }
 .fhbf-hero__copy { width:55%; }
 .fhbf-hero__offer { font-size:1.15rem; }
}
@media (max-width:767px) {
 .fhbf-shell { width:calc(100% - 28px); }
 .fhbf-section { padding:28px 0; }
 .fhbf-hero, .fhbf-hero__inner { min-height:0; }
 .fhbf-hero::before { background-position:70% center; }
 .fhbf-hero::after { background:linear-gradient(90deg,rgba(11,27,39,.97),rgba(11,27,39,.9)); }
 .fhbf-hero__copy { width:100%; padding:28px 0; }
 .fhbf-hero h1 { font-size:clamp(2.8rem,11vw,4.5rem); }
 .fhbf-eyebrow { margin-bottom:14px; }
 .fhbf-hero__offer { margin:14px 0 18px; }
 .fhbf-cta { margin-top:20px; max-width:100%; text-align:center; }
 .fhbf-heading { display:block; margin-bottom:20px; }
 .fhbf-heading > a { display:inline-flex; align-items:center; min-height:44px; margin-top:8px; }
 .fhbf-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .fhbf-category { min-height:84px; aspect-ratio:1.8 / 1; border-radius:8px; }
 .fhbf-category span { font-size:14px; left:10px; right:10px; bottom:10px; }
 .fhbf-more-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .fhbf-products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}
@media (prefers-reduced-motion:reduce) {
 .fh-black-friday *, .fh-black-friday *::before, .fh-black-friday *::after { transition:none !important; scroll-behavior:auto !important; }
}
.fhbf-product { min-width:0; }
.fh-black-friday .fhbf-product > .m_article {
 width:100%; max-width:100%; flex:0 0 100%; height:100%;
 padding:0 !important;
}
.fh-black-friday .fhbf-product .thumbnail.card-body { height:100%; }
.fh-black-friday .fhbf-product .thumbnail-image {
 display:flex; align-items:center; justify-content:center;
 height:154px;
}
.fh-black-friday .fhbf-product .thumbnail-image .product-image {
 width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain;
}
.fh-black-friday .fhbf-product .m_caption {
 display:flex; flex:1; flex-direction:column; min-width:0; padding:5px;
}
.fh-black-friday .fhbf-product .card-title {
 height:auto; min-height:60px; margin:0 0 8px; overflow:visible;
 line-height:20px; overflow-wrap:anywhere;
}
.fh-black-friday .fhbf-product .price { margin:0 0 10px; }
.fh-black-friday .fhbf-product .buying-options { width:100%; margin-top:auto; text-align:center; }
.fh-black-friday .fhbf-product .m_caption .form-inline > .btn {
 display:inline-flex; align-items:center; justify-content:center; gap:5px;
 width:100%; max-width:156px; min-height:36px; height:auto;
 padding:7px 4px; white-space:normal; line-height:20px;
}
.fh-black-friday .fhbf-product .savings-container { max-width:100%; }
.fh-black-friday .fhbf-product .savings-container .badge { white-space:normal; }
.fh-black-friday .fhbf-product .buying-options .m_thamb_img { display:inline-block; flex:none; width:auto; max-height:20px; margin:0; }
@media (min-width:768px) and (max-width:1199px) {
 .fhbf-products--featured { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:767px) {
 .fhbf-products--featured { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .fh-black-friday .fhbf-product .thumbnail-image { height:120px; }
 .fh-black-friday .fhbf-product .thumbnail.card-body { padding:6px; }
 .fh-black-friday .fhbf-product .m_caption { padding:3px 0; }
 .fh-black-friday .fhbf-product .m_caption .form-inline > .btn { min-height:44px; }
}



/* Native promo cards already say Now. Label the campaign's regular-price
   branch too, without duplicating the native prefix or changing price data. */
.fh-black-friday .fhbf-product .thumbnail.card-body .price {
 font-weight:800;
 font-size:20px;
 line-height:1.3;
}
.fh-black-friday .fhbf-product[data-fhbf-inpromo="0"] .price::before { content:"Now "; }
@media (max-width:767px) {
 .fh-black-friday .fhbf-product .thumbnail.card-body .price { font-size:18px; }
}

.fh-black-friday .fhbf-product .fhbf-product-brand { margin:0 0 4px; color:#596575; font-size:12px; line-height:1.4; }
.fh-black-friday .fhbf-product .card-title { order:1; }
.fh-black-friday .fhbf-product .price { order:2; margin-bottom:4px; }
.fh-black-friday .fhbf-product .savings-container { position:static; order:3; text-align:center; margin:0 0 10px; }
.fh-black-friday .fhbf-product .savings-container .badge-secondary { color:#273442; }
.fh-black-friday .fhbf-product .buying-options { order:4; }

/* Red is reserved for campaign emphasis and native, data-backed savings.
   Standard product/cart buttons, navigation links and RRP labels stay native. */
.fh-black-friday #fhbf-featured-title { color:var(--fhbf-red); }
.fh-black-friday .fhbf-product .savings-container .badge-danger { background:var(--fhbf-red); color:#fff; }
.fh-black-friday .fhbf-product .savings-container .badge-warning { background:#fff0f2; color:#a11e30; }

/* Featured carousel: compact native cards, no autoplay. */
.fhbf-products.fhbf-products--carousel {
 position:relative;
 grid-template-columns:none;
 grid-auto-flow:column;
 grid-auto-columns:calc((100% - 48px) / 5);
 gap:12px;
 min-width:0;
 padding:4px 0 12px;
 overflow-x:auto;
 overscroll-behavior-inline:contain;
 scroll-snap-type:x mandatory;
 scroll-padding-inline:0;
 scrollbar-width:thin;
 scrollbar-color:#9ab0c0 transparent;
}
.fhbf-products--carousel > .fhbf-product { scroll-snap-align:start; }
.fhbf-products--carousel:focus-visible { outline:3px solid #006fb6; outline-offset:4px; }
.fhbf-carousel-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:-8px 0 12px; }
.fhbf-carousel-status, .fhbf-carousel-hint { color:#596575; font-size:13px; }
.fhbf-carousel-buttons { display:flex; gap:8px; }
.fhbf-carousel-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid #b5c6d2; border-radius:4px; background:#fff; color:#005b96; font-family:inherit; font-size:22px; font-weight:700; line-height:1; cursor:pointer; }
.fhbf-carousel-button:hover:not(:disabled) { border-color:#005b96; background:#eaf4fc; }
.fhbf-carousel-button:disabled { opacity:.4; cursor:default; }
.fhbf-carousel-hint { margin:10px 0 0; }
@media (min-width:768px) and (max-width:1199px) {
 .fhbf-products.fhbf-products--carousel { grid-auto-columns:calc((100% - 24px) / 3); }
}
@media (max-width:767px) {
 .fhbf-products.fhbf-products--carousel { grid-auto-columns:calc((100% - 10px) / 1.7); gap:10px; }
 .fhbf-carousel-toolbar { margin-top:0; }
}

/* Deal categories: inset the content from the adjacent coloured sections. */
.fhbf-shortcuts { padding:48px 0; background:#fff; }
.fhbf-shortcuts__heading { margin-bottom:24px; }
.fhbf-shortcuts__heading h2 { margin:0; color:var(--fhbf-ink); font-size:clamp(24px,3vw,34px); line-height:1.2; font-weight:800; letter-spacing:-.025em; }
.fhbf-shortcuts__heading p { max-width:640px; margin:8px 0 0; color:var(--fhbf-muted); font-size:14px; line-height:1.55; }
.fhbf-shortcuts__grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.fh-black-friday .fhbf-shortcuts__card { display:grid; grid-template-columns:56px minmax(0,1fr) 12px; align-items:center; gap:10px; min-width:0; min-height:88px; padding:12px; border:1px solid #d5e0e8; border-radius:6px; background:#fff; color:#002952; transition:border-color .15s ease,background-color .15s ease; }
.fh-black-friday .fhbf-shortcuts__card:hover { border-color:#006fb6; background:#f1f7fc; }
.fhbf-shortcuts__image { width:56px; height:56px; object-fit:contain; background:#fff; border-radius:3px; }
.fhbf-shortcuts__name { min-width:0; font-size:14px; line-height:1.4; font-weight:700; overflow-wrap:anywhere; }
.fhbf-shortcuts__arrow { color:#006fb6; font-size:16px; }
@media (min-width:768px) and (max-width:1199px) {
 .fhbf-shortcuts__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:767px) {
 .fhbf-shortcuts { padding:32px 0; }
 .fhbf-shortcuts__heading { margin-bottom:20px; }
 .fhbf-shortcuts__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .fh-black-friday .fhbf-shortcuts__card { grid-template-columns:40px minmax(0,1fr) 10px; gap:6px; min-height:78px; padding:10px; }
 .fhbf-shortcuts__image { width:40px; height:40px; }
 .fhbf-shortcuts__name { font-size:13px; }
}
