/** Shopify CDN: Minification failed

Line 336:1 Unexpected "~"
Line 340:1 Unexpected "~"
Line 353:1 Unexpected "~"
Line 367:1 Unexpected "~"
Line 383:1 Unexpected "~"
Line 388:1 Unexpected "~"
Line 408:3 Unexpected "~"
Line 417:3 Unexpected "~"
Line 428:3 Unexpected "~"
Line 435:3 Unexpected "~"

**/
@charset "UTF-8";

/*! ============================================================================
  Broadcast Theme | ADDITIONAL CSS
============================================================================== */
/* CUSTOM CSS GLOBAL  */
.hero__subheading {
    font-weight:700;
}

 .collection-block {
  background: #0077C8 !important;
} 

/* /* additonal jss  */
.collection-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(//fatbraintoys.co.uk/cdn/shop/files/fbt-pattern-bright.png?v=1761081782);
    background-repeat: repeat;
    background-size: auto;
    background-position: center;
    opacity: 0.1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    pointer-events: none;
    z-index: 0;
}
/* Prevent pattern overlay from appearing under collection images */
.collection-block__image::before {
  display: none !important;
  content: none !important;
}

/* Ensure the pattern only sits under the text, not image */
.collection-block__image {
  position: relative;
  z-index: 2 !important;
}

.collection-block__content {
  position: relative;
  z-index: 3 !important;
}

.collection-block__content {color: #fff;}
/* button shop all ages */
/* Match collection button to global orange button style */
.collection-block__button.btn {
  background-color: #ff8330 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border: none !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  transition: background-color 0.3s ease-in-out;
}
.collection-block__button.btn:hover {
  background-color: #212121 !important; /* slightly brighter orange */
  color: #ffffff !important;
}
/* button end  */

/* === COLLECTION BLOCK MOBILE ORDER FIX === */
@media (max-width: 768px) {
  .collection-block {
    display: flex;
    flex-direction: column;
  }
  /* force image to top */
  .collection-block__image {
    order: -1 !important;
    width: 100%;
    margin-bottom: 20px;
  }
  /* ensure text follows */
  .collection-block__content {
    order: 2;
  }
  /* clean containment & spacing */
  .collection-block__wrapper {
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  /* optional – make sure image stays within its own block visually */
  .collection-block__image-bg,
  .collection-block__image figure {
    display: block;
    width: 100%;
    overflow: hidden;
  }
}
@media only screen and (max-width: 749px) {
    .collection-block__image {
        width: 100%;
        height: 400px;
        margin: 0 auto;
    }
}
@media (max-width: 749px) {
  #Rte--template--26857286402387__section_h1_intro_qmVMY3  .h1__content {
    margin-top: -20px !important;
  }
}

/* collections shop by age
grid images slider change to 2x2 */
.index-products .image-wrapper--cover {
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}
/* stack 2x2  */
@media only screen and (max-width: 749px) {
    /* Ensuring 2x2 grid on mobile */
    .grid--mobile-slider {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
        gap: 20px; /* Add space between items */
        margin-right: auto; /* Corrects the right alignment */
    }

    .grid--mobile-slider .grid-item {
        width: 100%; /* Full width for each item within grid */
        margin-right: 0; /* Remove any unwanted margin */
        scroll-snap-align: start;
    }

    .product-item {
        position: relative;
        box-shadow: #0000001a 0 4px 12px;
   
    }
}



/*! ============ Add any custom styles below this line ================== */
.shopify-pc__banner__dialog {
  display: none !important;
}

h1, .hero__title {
  color: #ff8330;
}
/* magshuto font black */
@font-face {
  font-family: "SF Archery Black Oblique";
  src: url("/cdn/shop/files/sf-archery-black.oblique.woff2?v=1759846861") format("woff2"),
       url("/cdn/shop/files/sf-archery-black.oblique.woff?v=1759846861") format("woff"),
       url("/cdn/shop/files/sf-archery-black.oblique.ttf?v=1759846861") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.hexagon-text,
.hexagon-text h3,
.hexagon-text span {
  font-family: "SF Archery Black Oblique", sans-serif !important;
}
.image__fill img {
  top: 0 !important;
  right: auto !important;
  height: 100% !important;
  width: 100% !important;
  object-position: center !important;
}
/* AIR TOOBZ AIR TOOBZ Custom Fat Brain AirToobz section */
#BrickSection--template--26118120145235__section_double_FzxFzW {
  background-color: #eee !important;
}
#BrickSection--template--26118120145235__section_double_FzxFzW {
  /* Top layer = your banner (unchanged). Bottom layer = gradient fill beyond it */
  background-image: url(/cdn/shop/files/feature-airtoobz-bg4.webp?v=1760340193),
    linear-gradient(to bottom, #ffab3e 0%, #ffb900 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top center;
  background-size: auto 550px, cover;
  background-color: #ffab3e; /* fallback */
}
.brick__block,
.hero__content,
.brick__block__text {
  background-color: transparent !important;
}
.has-circle-bg .hero__content {
  background-color: #cafd79 !important;
  border-radius: 50%;
  width: 480px;
  height: 480px;
  padding: 80px;
  text-align: center;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
/* Custom Fat Brain AirToobz section */
#BrickSection--template--26118120145235__section_double_FzxFzW {
  background-color: #eee !important;
}
.brick__block,
.hero__content,
.brick__block__text {
  background-color: transparent !important;
}

/* Wobbly blob shape on text side only *//* Wobbly blob shape on text side only */
/* 🎯 Scope only to this specific section + content wrapper */
#BrickSection--template--26118120145235__section_double_FzxFzW 
.hero__content.hero__content--compact.hero__content--no-padding {
  background: #cafd79 !important;
  border-radius: 57% 43% 68% 32% / 38% 54% 46% 62%;
  margin: 0 !important;
  padding: 40px !important;
  transition: all 0.6s ease;
  position: relative;
  z-index: 1;
  animation: blobWobble 8s ease-in-out infinite;
}

/* gentle wobble animation */
@keyframes blobWobble {
  0% {
    border-radius: 57% 43% 68% 32% / 38% 54% 46% 62%;
    transform: scale(1);
  }
  25% {
    border-radius: 63% 37% 60% 40% / 42% 58% 52% 48%;
    transform: scale(1.02);
  }
  50% {
    border-radius: 60% 40% 50% 50% / 50% 50% 60% 40%;
    transform: scale(0.98);
  }
  75% {
    border-radius: 62% 38% 58% 42% / 45% 55% 50% 50%;
    transform: scale(1.01);
  }
  100% {
    border-radius: 57% 43% 68% 32% / 38% 54% 46% 62%;
    transform: scale(1);
  }
}

/* responsive fine-tuning */
@media (max-width: 1200px) {
  #BrickSection--template--26118120145235__section_double_FzxFzW 
  .hero__content.hero__content--compact.hero__content--no-padding {
    padding: 35px;
  }
}

@media (max-width: 900px) {
  #BrickSection--template--26118120145235__section_double_FzxFzW 
  .hero__content.hero__content--compact.hero__content--no-padding {
    padding: 30px;
    animation-duration: 10s;
  }
}

@media (max-width: 750px) {
  /* make Air Toobz image larger */
  #BrickSection--template--26118120145235__section_double_FzxFzW 
  .brick__block--images img {
    width: 110% !important;
    max-width: none !important;
    transform: scale(1.1);
    margin-top: -10px !important;
  }

  /* optional: tighten blob + image spacing slightly */
  #BrickSection--template--26118120145235__section_double_FzxFzW .brick__block--text {
    margin-top: -10px !important;
  }
}
 @media (max-width: 600px) {
  #BrickSection--template--26118120145235__section_double_FzxFzW 
  .brick__section {
    padding: 0 !important;
    
  }
  #BrickSection--template--26118120145235__section_double_FzxFzW 
  .hero__content.hero__content--compact.hero__content--no-padding {
    padding: 25px;
    animation-duration: 11s;
  }
} 
/* AIR TOOBZ ICON Wobbly */
/* Air Toobz logo — top-left, smaller, with wobble */
#BrickSection--template--26118120145235__section_double_FzxFzW{
  position:relative !important;
  overflow:visible !important;
}
#BrickSection--template--26118120145235__section_double_FzxFzW::after{
  content:"";
  position:absolute;
  top:4%;
  left:6%;
  width:240px;          /* smaller */
  height:80px;          /* smaller */
  background:url("/cdn/shop/files/AirToobzLogo.webp?v=1760431842") no-repeat center/contain;
  z-index:15;
  pointer-events:none;
}
/* Optional: even smaller on mobile */
@media(max-width:768px){
  #BrickSection--template--26118120145235__section_double_FzxFzW::after{
    top:2%;
    left:5%;
    width:250px;
    height:72px;
  }
}
/* AIR TOOBZ END  */
/* HEADER HOME PAGE LIGHT GREY */
#shopify-section-sections--26118121587027__header .theme__header {
    /* background: #eee !important; */
}
/* Fat Brain Toys LOGO ONLY 1 hotspot overlay + wobble animation */
/* Fat Brain Toys logo overlay on home banner */
~~#Hero1600--template--26118120145235__section_image_banner_1600px_d43gmP {
  position: relative !important;
  overflow: visible !important; /* allow logo to show */
}
~~#Hero1600--template--26118120145235__section_image_banner_1600px_d43gmP::after {
  content: "";
  position: absolute;
    top: 7.8%;
    right: 6%;
    width: 420px;
    height: 120px;
  background: url("/cdn/shop/files/fb-logo-stacked.webp?v=1760367616") no-repeat center/contain;
  z-index: 15;
  animation: wobble 2.5s ease-in-out infinite;
  transition: transform 0.25s ease;
  pointer-events: none;
}
~~#Hero1600--template--26118120145235__section_image_banner_1600px_d43gmP::after:hover {
  transform: scale(1.08);
}
/* Wobble animation */
@keyframes wobble {
  0%,100% { transform: rotate(0deg); }
  15% { transform: rotate(3deg); }
  30% { transform: rotate(-3deg); }
  45% { transform: rotate(2deg); }
  60% { transform: rotate(-2deg); }
  75% { transform: rotate(1deg); }
}
/* SPINNING COG */
/* Spinning cog overlay inside the wobbling Fat Brain logo */
~~#Hero1600--template--26118120145235__section_image_banner_1600px_d43gmP::before {
  content: "";
  position: absolute;
  top: calc(8% + 25px);     /* aligns cog vertically within logo */
  right: calc(6% + 180px);  /* centers cog roughly in logo width */
  width: 70px;
  height: 70px;
  background: url("/cdn/shop/files/fb-cog.svg") no-repeat center/contain;
  z-index: 16;
  animation: spin 3s linear infinite;
  transform-origin: center;
  pointer-events: none;
}

/* Spin animation */
/* Spinning orange cog inside the wobbling Fat Brain logo */
~~#Hero1600--template--26118120145235__section_image_banner_1600px_d43gmP {
  position: relative !important;
  overflow: visible !important;
}

~~#Hero1600--template--26118120145235__section_image_banner_1600px_d43gmP::before {
  content: "";
  position: absolute;
  top: calc(10% + 47px);      /* aligns cog vertically within logo */
  right: calc(6% + 189px);   /* centres cog horizontally within 420 px logo */
  width: 33px;               /* cog size */
  height: 33px;
  background: url("/cdn/shop/files/logo-cog-black.webp?v=1760381845") no-repeat center/contain;
  z-index: 9999;
  animation: spin 3s linear infinite;
  transform-origin: center;
  pointer-events: none;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  ~~#Hero1600--template--26118120145235__section_image_banner_1600px_d43gmP::before {
    top: calc(10% + 52px); /* nudges cog 5px lower on mobile */
  }
}

/* MOBILE Fat Brain Toys LOGO ONLY 1 hotspot overlay + wobble animation */
/* Limit height of mobile image for this one banner only */
/* Mobile: lock image height + position bottom center for this banner only */
@media (max-width: 768px) {
  ~~#Hero1600--template--26118120145235__section_image_banner_1600px_d43gmP img.hero__main-image {
    object-fit: cover !important;
    object-position: left center !important;
    min-height: 400px !important;
    max-height: 500px !important;
    width: 100% !important;
    height: auto !important;
  }
}
@media (max-width: 768px) {
  /* scale logo down a bit */
  ~~#Hero1600--template--26118120145235__section_image_banner_1600px_d43gmP::after {
    transform: scale(0.8) !important;
    transform-origin: top right !important;
    top: 7.9%;
  }

  /* re-position cog 2px LEFT */
  ~~#Hero1600--template--26118120145235__section_image_banner_1600px_d43gmP::before {
    top: calc(10% + 38px) !important;
    right: calc(6% + 152px) !important; /* was 157px */
    width: 26px !important;
    height: 26px !important;
  }
}

/* =========================================================
   JJS CUSTOM STYLES — PRODUCT DESCRIPTION ACCORDION
   (List icons + bold text styling for all product pages)
   ========================================================= */

/* jjs additional — Description section list + bold styling */
.product__block--accordion .accordion__body.rte.body-medium strong {
  font-weight: var(--FONT-WEIGHT-BODY-BOLD);
  font-family: var(--FONT-STACK-HEADING);
  text-transform: uppercase;
  color: #555555;
}

.product__block--accordion .accordion__body.rte.body-medium ul li {
  list-style: none;
  position: relative;
  padding-left: 34px;
  margin-bottom: 8px;
  color: #555555;
}

.product__block--accordion .accordion__body.rte.body-medium ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  background: url(/cdn/shop/files/brain.svg?v=1760718269) no-repeat center;
  background-size: contain;
  transition: transform 0.25s ease;
  filter: invert(51%) sepia(88%) saturate(2470%) hue-rotate(-12deg) brightness(104%) contrast(101%);
}
/* =========================================================
   JJS CUSTOM — CONSTANT WOBBLE FOR BRAIN ICONS
   ========================================================= */
/* =========================================================
   JJS CUSTOM — NOTICEABLE WOBBLE FOR BRAIN ICONS
   ========================================================= */

@keyframes brainWobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-10deg) scale(1.06); }
  50% { transform: rotate(10deg) scale(1.06); }
  80% { transform: rotate(-7deg) scale(1.03); }
}

/* Apply continuous wobble */
.product__block--accordion .accordion__body.rte.body-medium ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  background: url(/cdn/shop/files/brain.svg?v=1760718269) no-repeat center;
  background-size: contain;
  filter: invert(51%) sepia(88%) saturate(2470%) hue-rotate(-12deg)
          brightness(104%) contrast(101%);
  animation: brainWobble 3s ease-in-out infinite;
  transform-origin: center;
}


.product__block--accordion
.accordion__body.rte.body-medium ul li:hover::before {
  animation: brainWobble 0.6s ease-in-out both;
}


.product__block--accordion .accordion__body.rte.body-medium ul li:hover::before {
  animation: brainWobble 0.6s ease-in-out;
}

/* accordian titles DESCRIPTION MORE INFO TOP PICKS  */
/* accordion titles — DESCRIPTION, MORE INFO, TOP PICKS */
.product__block--accordion summary.accordion__title,
.product-accordion.no-border summary.accordion__title,
.product__block.upsell-products .product-upsell__holder__title {
  color: #000;
  font-weight: var(--FONT-WEIGHT-BODY-BOLD);
  font-family: var(--FONT-STACK-HEADING);
  font-size: 18px;
  text-transform: uppercase;
}
/* =========================================================
   JJS CUSTOM STYLES — MORE INFO ACCORDION STRONG TAGS ONLY
   (Scoped to .product-accordion.no-border block)
   ========================================================= */

.product-accordion.no-border .accordion__body.rte.body-medium strong {
  font-weight: var(--FONT-WEIGHT-BODY-BOLD);
  font-family: var(--FONT-STACK-HEADING);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 2px;
}

/* =========================================================
   JJS CUSTOM — BRAIN ICON WOBBLE + MORE INFO MATCH
   ========================================================= */
.product-accordion.no-border .accordion__body.rte.body-medium strong {
  position: relative;
  display: inline-block;
  padding-left: 30px;
  font-weight: var(--FONT-WEIGHT-BODY-BOLD);
  font-family: var(--FONT-STACK-HEADING);
  text-transform: uppercase;
  color: #555;
}

/* Brain icon before each strong label (raised slightly) */
.product-accordion.no-border .accordion__body.rte.body-medium strong::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px; /* raised from 2px to -1px for perfect alignment */
  width: 22px;
  height: 22px;
  background: url(/cdn/shop/files/brain.svg?v=1760718269) no-repeat center;
  background-size: contain;
  filter: invert(51%) sepia(88%) saturate(2470%) hue-rotate(-12deg)
          brightness(104%) contrast(101%);
  animation: brainWobble 3s ease-in-out infinite;
  transform-origin: center;
}
/* jjs additional end */

/* targeting home page logos only background: */
#SectionColumns--template--26118120145235__section_columns_U3MyKK .wrapper--full-padded {
    background-color: #0077C8;
    padding: 70px;
    position: relative;
    border-radius: 20px;
    box-shadow: 0 12px 30px #0000002e;
}
/* h2  */
#SectionColumns--template--26118120145235__section_columns_U3MyKK .wrapper--full-padded .grid__heading {
  color: #fff;
}

#SectionColumns--template--26118120145235__section_columns_U3MyKK .wrapper--full-padded::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(//fatbraintoys.co.uk/cdn/shop/files/fbt-pattern-bright.png?v=1761081782);
    background-repeat: repeat;
    background-size: auto;
    background-position: center;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

#shopify-section-template--26118120145235__section_columns_U3MyKK .column__image--circle {
  transition: transform 0.15s ease-in-out;
  transform-origin: center;
}

#shopify-section-template--26118120145235__section_columns_U3MyKK .column__image--circle:hover {
  animation: wobble-once 0.5s ease-in-out;
}

/* CUSTOMER REVIEWS   */
/* === Review speech bubble background === */
/* === CSS-only speech bubble for review blocks === */
.review blockquote {
  position: relative;
  background:#fff; 
  border: 1px solid rgba(234, 39, 194, 0.08);  /* ultra-light pink, almost white */
  border-radius: 20px;
  padding: 20px;
  z-index: 1;
  box-shadow: #009CA6 5px 5px, #009CA6 10px 10px, #009CA6 15px 15px, #009CA6 20px 20px;
}


/* plip charms banner home page  */
@media only screen and (min-width: 500px) and (max-width: 749px) {
  #BrickSection--template--26118120145235__section_double_xTkE6b 
  .brick__block.brick__block--images,
  #BrickSection--template--26118120145235__section_double_xTkE6b 
  .five-fifty-height-hero {
    min-height: 550px !important;
  }
}