/** Shopify CDN: Minification failed

Line 312:16 Unexpected "{"
Line 312:25 Expected ":"
Line 321:16 Unexpected "{"
Line 321:25 Expected ":"

**/
/* 
// =============================================================================
// Bradley Trade
// =============================================================================
//
// IMPORTANT DISCLAIMER
// Shopify is notifying shop owners about the need to convert scss files to css files.
// Please use only CSS to style the layout.
//
// =============================================================================
*/

/* 
// =============================================================================
// Navigation Bar
// =============================================================================
*/

.main-menu .list-menu {
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center the content horizontally */
  gap: 20px; /* Add spacing between menu items */
  overflow: visible; /* Ensure content can overflow */
  white-space: nowrap; /* Prevent wrapping */
}

/* 
// =============================================================================
// Slideshow - General Styles
// =============================================================================
*/

.slideshow {
  height: 90vh; /* Full viewport height */
  width: 100%; /* Full width */
  justify-content: left; /* Center horizontally */
  align-items: left; /* Center vertically */
}

/* Child content box (slide-content) */
.slide-content {
  width: 850px !important; /* Limit width for better readability */
  text-align: left; /* Center text */
  padding: 25px 30px; /* Top and bottom padding for content */
}

/* Slideshow internal elements */
.slick-list,
.slick-track,
.slick-slide {
  height: 100%;
}

.slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Adaptive height images */
.slideshow .adaptive_height {
  height: 100vh;
}

.slideshow .adaptive_height img {
  object-fit: cover;
}

/* Gradient overlay */
.slideshow .slick-slide:before {
  content: ""; 
  position: absolute; 
  bottom: 0; /* Start from the bottom */
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); /* Gradient from bottom to transparent */
  z-index: 1; /* Ensure overlay is below content */
  pointer-events: none; /* Allow interactions with content */
}


/* 
// =============================================================================
// Responsive Styles for Navigation and Slideshow
// =============================================================================
*/

@media (min-width: 1025px) {
  .header-navigation .header-logo {
    max-width: 200px !important;
  }

  .site-nav-list {
    white-space: normal;
  }

  /* Default styles for larger desktop screens */
  .slide-heading {
    font-size: 72px !important;
    line-height: 68px !important;
    color: #ffffff;
    font-style: normal;
    margin-bottom: 27px; /* Use margin-bottom instead of custom property */
    text-align: left; /* Center the heading */
    font-weight: 600; /* Semi-bold style */
  }

  .slide-text {
    text-align: left;
  }
}

/* Tablet view (landscape and portrait) */
@media (max-width: 1024px) {
  .slide-heading {
    font-size: 62px !important; /* Smaller font size for tablet */
    line-height: 48px; /* Adjust line height for spacing */
    margin-bottom: 20px;
    text-align: left; /* Keep it centered */
  }
}

/* Smaller tablets (7-inch devices) */
@media (max-width: 768px) {
  .slide-heading {
    font-size: 36px !important; /* Smaller font for smaller tablets */
    line-height: 42px;
    margin-bottom: 15px;
    text-align: left;
  }

  .slide-content {
    width: 400px !important; /* Limit width for better readability */
    text-align: left; /* Center text */
    padding: 25px 30px; /* Top and bottom padding for content */
  }
}

/* 
// =============================================================================
// Custom Image Banner
// =============================================================================
*/

.customImageBanner-item {
  position: relative; /* Ensure pseudo-elements are positioned relative to the container */
  overflow: hidden; /* Keep the overlay within the bounds of the image */
}

.customImageBanner-item img {
  width: 100%;
  height: auto;
  display: block; /* Ensure the image takes full width */
}

/* Gradient overlay for custom image banners */
.customImageBanner-item::after {
  content: ""; /* Add the gradient overlay */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); /* Fade gradient */
  opacity: 0; /* Hide overlay initially */
  transition: opacity 0.3s ease-in-out; /* Smooth fade effect */
  z-index: 1; /* Ensure overlay appears below the text */
}

.customImageBanner-item:hover::after {
  opacity: 1; /* Show overlay on hover */
}

/* Content box for custom image banners */
.customImageBanner-item .content {
  position: absolute;
  bottom: 10%; /* Position content near the bottom */
  left: 10%; /* Add some padding to the left */
  width: 80%; /* Adjust width as needed */
  color: #fff; /* Text color for readability */
  z-index: 2 !important; /* Ensure content is above the overlay */
  opacity: 1; /* Ensure title and button are always visible */
  visibility: visible; /* Ensure title and button are visible */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Description text styles */
.customImageBanner-item .content .des {
  opacity: 0; /* Start fully transparent */
  visibility: hidden; /* Hide visually but keep the layout intact */
  transform: translateY(10px); /* Slightly move it down */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  display: none; /* Hide the element entirely */
}

.customImageBanner-item:hover .content .des {
  display: block; /* Show the element */
  animation: fadeInEffect 0.3s ease-in-out; /* Apply fade-in animation */
  opacity: 1; /* Make it fully visible */
  visibility: visible; /* Make it visible */
  transform: translateY(0); /* Move back to its original position */
}

/* Keyframes for fade-in effect */
@keyframes fadeInEffect {
  from {
    opacity: 0;
    transform: translateY(10px); /* Start slightly below */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* Move to original position */
  }
}


/* 
// =============================================================================
// Custom Colours and Typography
// =============================================================================
*/

.page-header {
    color: #13348f;
}

.contact-title {
    color: #13348f;
}

.icon .svg  {
    fill: #13348f !important;
}


/* 
// =============================================================================
// Gallery Images
// =============================================================================
*/

.imgGallery-item .img-box {
    position: relative;
    width: 100%; /* Full width */
    padding-top: 100%; /* Force 1:1 aspect ratio (square) */
    overflow: hidden; /* Crop the overflowing content */
}

.imgGallery-item .img-box a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.imgGallery-item .img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image is cropped to square */
}

/* 
// =============================================================================
// Lookbook Internal  Images
// =============================================================================
*/

/* Target only the images in the specified container and force 1:1 cropping */
.container-1770 .lookbook-image-item .img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4; /* Force 1:1 ratio directly */
    overflow: hidden;
    padding: 0 !important; /* Remove any inline padding */
}

.container-1770 .lookbook-image-item .img-box a {
    display: block;
    width: 100%;
    height: 100%;
}

.container-1770 .lookbook-image-item .img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Force cropping without distortion */
}

/* 
// =============================================================================
// Video
// =============================================================================
*/

.section-block-{{ section.id }} .fluid-width-video-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0 !important;
}

.section-block-{{ section.id }} .fluid-width-video-wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 120vh;
  width: 213.33vh; /* 120vh * 16 / 9 to match 16:9 */
  min-width: 100vw;
  min-height: 100vh;
  border: 0;
  pointer-events: none;
}


/* 
// =============================================================================
// 'Newsletter'
// =============================================================================
*/

.field__input {
  background-color: #f6f6f6;
  border: 1px solid #f6f6f6;
  color: #424242;
  font-size: 16px;
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
}

#interest-select.field__input {
  width: 100%;
  background-color: #f6f6f6;
  border: 1px solid #f6f6f6;
  color: #424242;
  font-size: 16px;
  padding: 15px;
  box-sizing: border-box;
  appearance: none;
}

.newsletter-form select {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 10px;
  box-sizing: border-box;
  margin-right: 0px !important;
}