@import url("https://fonts.cdnfonts.com/css/gagalin");
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  overflow: hidden;
}

.body-content-wrapper {
  height: 100vh;
  overflow-y: auto;
}

/* Add this class to your existing style.css file */
body.no-scroll {
  overflow: hidden;
}

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

.homepage,
.page-template-default:has(.block) {
  background-color: var(--Blue-1_Med);
}

.homepage .site-header {
  background-color: transparent;
}

/* Archive Page Styles */
.page-header {
  display: inline-block;
  margin-bottom: 2rem;
  transform: rotate(-4deg);
}

/* The main page title, e.g., "News" */
.page-header__title {
  color: var(--Blue_Dark);
  margin-bottom: 1rem;
}

/* The subtitle, e.g., "Our take on stuff" */
.page-header__subtitle {
  font-family: var(--font-family-subtitle);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  color: var(--Blue_Dark);
  margin: 0;
}

/**
 * Article Card Component
 */
.article-card {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  position: relative;
}

.article-card__image-wrapper {
  flex-shrink: 0;
  width: 160px;
  min-height: 146px;
}

.article-card__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Placeholder styles */
.article-card__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  text-align: center;
  align-content: center;
}

.article-card__content {
  flex-grow: 1;
  padding: 1rem 1.5rem 1rem 0;
  /* TOP | RIGHT | BOTTOM | LEFT */
}

.article-card__title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.article-card__excerpt {
  font-size: 16px;
  color: var(--Gray_Light);
  margin-block-end: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* Space between avatar and text */
  line-height: normal;
}

.article-card__author-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* Makes the avatar circular */
}

.article-card__meta-text {
  font-size: 13px;
}

.article-card__author-name {
  display: block;
  font-weight: 600;
}

.article-card__meta-details {
  color: var(--Gray_Mid);
}

.card-link {
  text-decoration: none;
  color: inherit;
}

.card-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  /* This pseudo-element sits on top of everything in the card */
  background-color: transparent;
}

@media (max-width: 768px) {
  .article-card {
    flex-direction: column;
  }
  .article-card:not(.article-card--vertical) {
    gap: 0;
  }
  .article-card__image-wrapper {
    width: 100%;
    height: 220px;
  }
  .article-card__content {
    padding: 1.5rem 1.5rem 1.5rem 0px;
    /* Apply equal padding on all sides on mobile */
  }
}
.news-grid__item,
.stories-grid__item {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #000;
}

/* Remove border and margin from the last item in a list for clean spacing */
.news-grid__item:last-of-type,
.stories-grid__item:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-block-end: 3rem;
}

/* Single Page styles */
.single-stories,
.single-news {
  background-color: var(--White);
}

.breadcrumbs {
  padding: 1.5rem 0;
  font-family: var(--font-family-small);
  font-weight: var(--font-weight-small);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-small);
}

.breadcrumbs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  /* Allows wrapping on smaller screens */
  align-items: center;
  gap: 0.5rem;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
}

/* Add the separator (e.g., '>') before each item except the first one */
.breadcrumbs__item:not(:first-child)::before {
  content: ">";
  margin-right: 0.5rem;
  color: var(--Black);
}

.breadcrumbs__item a {
  color: var(--Black);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs__item a:hover {
  color: var(--Gray_Mid);
}

/* Style the current page item differently to show it's not a link */
.breadcrumbs__item[aria-current=page] {
  color: var(--Gray_Mid);
  font-weight: var(--font-weight-small);
}

.article-hero + .article-content {
  margin-top: 2.5rem;
}

/* The hero image itself */
.article-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* The main title below the image */
.article-hero__title {
  color: var(--Blue_Dark);
}

.article-hero__title + .article-hero__image-wrapper {
  margin-top: 4rem;
}

.article-meta-bar {
  margin-top: 2.5rem;
}

.article-body img {
  width: 100%;
}

.post-meta-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-paragraph);
  color: var(--Blue_Mid);
  font-weight: var(--font-weight-paragraph);
  margin-bottom: 1.5rem;
  line-height: var(--line-height-paragraph);
  flex-wrap: wrap;
}

.separator-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--Blue_Mid);
}

.author-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

/**
 * Live Search Bar Component
 */
.search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 0.6rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-bar:focus-within {
  outline: none;
  border-color: var(--Blue_Dark);
  box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

.search-bar__input {
  flex-grow: 1;
  border: none;
  background-color: transparent;
  padding: 0;
  font-size: var(--font-size-paragraph);
  color: var(--Black);
  font-weight: var(--font-weight-paragraph);
  line-height: var(--line-height-paragraph);
}

.search-bar__input:focus {
  outline: none;
}

.search-bar__input::-moz-placeholder {
  color: var(--Gray_Mid);
  font-weight: var(--font-weight-paragraph);
  line-height: var(--line-height-paragraph);
  opacity: 1;
}

.search-bar__input::placeholder {
  color: var(--Gray_Mid);
  font-weight: var(--font-weight-paragraph);
  line-height: var(--line-height-paragraph);
  opacity: 1;
}

.search-bar__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--Gray_Mid);
}

.live-search-wrapper {
  margin-left: auto;
  margin-right: auto;
}

.photo-grid {
  display: flex;
  gap: 1rem;
  /* Space between the large and small columns */
}

.photo-grid__large,
.photo-grid__small-column {
  flex: 1;
}

.photo-grid__large img,
.photo-grid__small img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  /* Ensures images fill their container without distortion */
  /* border-radius: 8px; */
}

.photo-grid__small-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/**
 * ========================================================================
 * Block: Featured Posts Slider
 * ========================================================================
 */
.featured-slider-block {
  color: var(--White);
  background-color: var(--Blue_Dark);
}

.featured-slider-block__headline {
  margin: 0 0 2rem 0 !important;
}

.featured-slider-block__slider {
  padding: 2rem 0 2rem 0;
  margin: -2rem 0 -2rem;
}

.featured-slider-block__footer {
  margin-top: 3rem;
}

@media (max-width: 525px) {
  .featured-slider-block__footer .btn--outline {
    width: 100%;
  }
}
/**
 * ========================================================================
 * Component: Article Card Modifier (Updated Design)
 * ========================================================================
 */
.article-card--vertical {
  flex-direction: column;
  background-color: var(--Black);
  height: 100%;
  color: var(--White);
  padding: 24px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.article-card--vertical .article-card__image-wrapper {
  width: 100%;
  height: 180px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  overflow: hidden;
}

.article-card--vertical .article-card__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.article-card--vertical .article-card__content {
  padding: 0;
  flex-grow: 1;
  /* This is important to push the footer down */
}

.article-card--vertical .article-card__author-byline {
  font-weight: var(--font-weight-small);
  color: var(--Gray_Light);
  display: block;
  font-size: var(--font-size-small);
  margin-block-end: 4px;
}

.article-card--vertical .article-card__title {
  font-weight: 600;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.article-card--vertical:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
  box-shadow: 0px 0px 12px 4px rgba(0, 0, 0, 0.4);
}

.article-card--vertical .article-card__excerpt {
  color: var(--Gray_Light);
  font-size: var(--font-size-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  line-height: var(--line-height-paragraph);
  font-weight: var(--font-weight-paragraph);
  margin-bottom: 0px;
  margin-right: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-card--vertical .article-card__footer {
  padding: 0 1.5rem 1.5rem 0;
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 0;
}

/**
 * ========================================================================
 * Block: Post List
 * ========================================================================
 */
.post-list-block {
  background-color: var(--Blue_Light);
  color: var(--Blue_Dark);
}

.post-list-block__content {
  flex: 1;
  flex-shrink: 0;
  margin-block-end: 2rem;
}

.post-list-block__headline {
  margin: 0;
}

.post-list-block__subheading {
  font-family: var(--font-family-subtitle);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  margin: 1rem 0 0 0;
}

.post-list-block__posts {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}

.post-list-block__footer {
  margin-top: 2rem;
  text-align: center;
}

/**
 * ========================================================================
 * Component: Post Row
 * ========================================================================
 */
.post-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1rem;
  background-color: #fff;
  transition: all 0.2s ease-in-out;
}

@media (max-width: 560px) {
  .post-row {
    flex-direction: column;
    /* Stack items vertically on small screens */
  }
  .post-row .post-row__image-wrapper {
    width: 100%;
    min-height: 150px;
    /* Ensures the image has a minimum height */
  }
}
.post-row:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.post-row__image-wrapper {
  width: 200px;
  height: 164px;
  flex-shrink: 0;
  min-height: 113px;
  background-color: rgba(128, 128, 128, 0.1803921569);
}

.post-row__image {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.post-row__content {
  flex-grow: 1;
  line-height: normal;
}

.post-row__author-byline {
  font-family: var(--font-family-small);
  font-weight: var(--font-weight-small);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-small);
  color: var(--Black);
  display: block;
  margin-bottom: 4px;
}

.post-row__excerpt {
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: var(--Black);
}

.post-row__title {
  margin: 0 0 0.5rem 0;
  font-family: var(--font-family-subtitle);
  font-weight: var(--font-weight-subtitle);
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  color: var(--Blue_Dark);
}

.post-row__title a {
  color: var(--Blue_Dark);
  text-decoration: none;
}

.post-row__actions {
  color: #ff6746;
  transition: transform 0.2s ease-in-out;
  align-self: end;
}

.post-row:hover .post-row__actions {
  transform: translateX(5px);
}

/**
 * Responsive Styles
 */
@media (max-width: 992px) {
  .post-list-block__content {
    max-width: 100%;
  }
}
/**
 * ========================================================================
 * Component: Link Modifier
 * ========================================================================
 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.link-arrow--orange {
  color: #dd6b20;
  /* Orange color from screenshot */
}

.link-arrow--orange:hover {
  color: #f56565;
  /* A slightly brighter orange on hover */
}

/**
 * ========================================================================
 * Block: Newsletter Signup
 * ========================================================================
 */
.newsletter-block {
  position: relative;
  background-size: cover;
  background-position: center center;
  color: var(--White);
  min-height: 38rem;
  align-content: end;
}
@media (max-width: 992px) {
  .newsletter-block {
    min-height: 35rem;
  }
}
@media (max-width: 576px) {
  .newsletter-block {
    min-height: 30rem;
  }
}

.newsletter-block__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* A subtle gradient overlay */
  background: linear-gradient(rgba(18, 24, 39, 0.17), rgba(18, 24, 39, 0));
  z-index: 1;
}

.newsletter-block__container {
  position: relative;
  z-index: 2;
}

.newsletter-block__content {
  max-width: 600px;
  text-align: left;
  /* margin: 0 auto; */
}

.newsletter-block__headline {
  margin: 0;
}

.newsletter-block__subheading {
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  margin: 1.5rem 0;
}

.newsletter-block__form-wrapper {
  margin-top: 2rem;
}

/**
 * ========================================================================
 * Component: Newsletter Form
 * This CSS is designed to style the forms generated by most plugins.
 * ========================================================================
 */
.newsletter-form {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
}

/* Target the input fields within the form */
.newsletter-form input[type=email],
.newsletter-form input[type=text] {
  flex-grow: 1;
  border: none;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  background-color: #fff;
}

/* Target the submit button */
.newsletter-form button,
.newsletter-form input[type=submit] {
  border: none;
  background-color: #f56565;
  /* Orange color */
  color: #fff;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.newsletter-form button:hover,
.newsletter-form input[type=submit]:hover {
  background-color: #e53e3e;
  /* Darker orange */
}

/**
 * Responsive Styles
 */
@media (max-width: 576px) {
  .newsletter-form {
    flex-direction: column;
    gap: 0.5rem;
    background-color: transparent;
  }
  .newsletter-form input[type=email],
  .newsletter-form button,
  .newsletter-form input[type=submit] {
    width: 100%;
  }
}
/**
 * ========================================================================
 * Component: Newsletter Form (Ninja Forms Specific)
 * This CSS is designed to precisely style the form generated by Ninja Forms.
 * ========================================================================
 */
/* Hide unnecessary Ninja Forms elements like the form title, field labels, and error wrappers */
.newsletter-block .nf-form-title,
.newsletter-block .nf-field-label,
.newsletter-block .nf-error-wrap {
  display: none !important;
}

.newsletter-block nf-fields-wrap {
  display: flex;
}

.newsletter-block nf-fields-wrap nf-field:has(input[type=email]) {
  width: 100%;
}

/* This is the main container that holds the email field and the submit button */
.newsletter-block .nf-fields-wrap {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  /* Reset default padding that might come from the plugin */
  padding: 0;
}

/* Reset default styling on the individual field containers */
.newsletter-block .nf-field-container {
  margin-bottom: 0;
  border: none;
  padding: 0;
}

/* Target the wrapper for the email field to make it grow */
.newsletter-block .nf-field-container.email-container {
  flex-grow: 1;
}

/* Style the actual email input field */
.newsletter-block .nf-field-container.email-container input[type=email] {
  width: 100%;
  height: 100%;
  /* Ensure it fills the vertical space */
  border: none;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  background-color: #fff;
}

/* Target the wrapper for the submit button to prevent it from shrinking */
.newsletter-block .nf-field-container.submit-container {
  flex-shrink: 0;
}

/* Style the actual submit button */
.newsletter-block .nf-field-container.submit-container input[type=submit] {
  width: 100%;
  height: 100%;
  /* Ensure it fills the vertical space */
  border: none;
  background-color: var(--CTA);
  /* Orange color from screenshot */
  color: #fff;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.newsletter-block .nf-field-container.submit-container input[type=submit]:hover {
  background-color: #e53e3e;
  /* Darker orange on hover */
}

/**
 * Responsive Styles for Ninja Forms
 */
@media (max-width: 576px) {
  /* Change the layout to vertical on small screens */
  .newsletter-block .nf-fields-wrap {
    flex-direction: column;
    gap: 0.5rem;
    /* Add space between the stacked elements */
    background-color: transparent;
    overflow: visible;
    /* Allow fields to have their own border-radius */
  }
}
.newsletter-block__form-wrapper .nf-form-title,
.newsletter-block__form-wrapper .nf-field-label,
.newsletter-block__form-wrapper .nf-error-wrap {
  display: none !important;
}

.newsletter-block__form-wrapper nf-fields-wrap {
  display: flex;
}

.newsletter-block__form-wrapper nf-fields-wrap nf-field:has(input[type=email]) {
  width: 100%;
}

/* This is the main container that holds the email field and the submit button */
.newsletter-block__form-wrapper .nf-fields-wrap {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  /* Reset default padding that might come from the plugin */
  padding: 0;
}

/* Reset default styling on the individual field containers */
.newsletter-block__form-wrapper .nf-field-container {
  margin-bottom: 0;
  border: none;
  padding: 0;
}

/* Target the wrapper for the email field to make it grow */
.newsletter-block__form-wrapper .nf-field-container.email-container {
  flex-grow: 1;
}

/* Style the actual email input field */
.newsletter-block__form-wrapper .nf-field-container.email-container input[type=email] {
  width: 100%;
  height: 100%;
  /* Ensure it fills the vertical space */
  border: none;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  background-color: #fff;
}

/* Target the wrapper for the submit button to prevent it from shrinking */
.newsletter-block__form-wrapper .nf-field-container.submit-container {
  flex-shrink: 0;
}

/* Style the actual submit button */
.newsletter-block__form-wrapper .nf-field-container.submit-container input[type=submit] {
  width: 100%;
  height: 100%;
  /* Ensure it fills the vertical space */
  border: none;
  background-color: var(--CTA);
  /* Orange color from screenshot */
  color: #fff;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  line-height: normal;
}

.newsletter-block__form-wrapper .nf-field-container.submit-container input[type=submit]:hover {
  background-color: #e53e3e;
  /* Darker orange on hover */
}

/**
 * Responsive Styles for Ninja Forms
 */
@media (max-width: 576px) {
  /* Change the layout to vertical on small screens */
  .newsletter-block__form-wrapper .nf-fields-wrap {
    flex-direction: column;
    gap: 0.5rem;
    /* Add space between the stacked elements */
    background-color: transparent;
    overflow: visible;
    /* Allow fields to have their own border-radius */
  }
}
/**
 * ========================================================================
 * Site Header
 * ========================================================================
 */
.stories-archive,
.news-archive {
  margin-top: 3rem;
}

.nf-form-fields-required {
  display: none !important;
  /* Hide the "required" text */
}

.article-card__placeholder-icon {
  width: 70px;
  height: auto;
  opacity: 0.2;
}

.article-h1 {
  color: var(--Blue_Dark);
}

/**
 * ========================================================================
 * Block: Contact Info
 * ========================================================================
 */
.contact-info-block__header {
  position: relative;
  background-size: cover;
  background-position: center;
  text-align: center;
  color: #fff;
  background-color: var(--Blue_Dark);
}

.contact-info-block__header-content {
  position: relative;
  z-index: 2;
}

.contact-info-block__headline {
  color: #f56565;
  text-transform: uppercase;
  font-size: 40px;
}

.contact-info-block__headline::after {
  content: "......";
  display: block;
  letter-spacing: 4px;
  color: #fff;
  font-size: 1.5rem;
  margin-top: 0.5rem;
}

.contact-info-block__cards-section {
  padding: 5rem 0;
}

.contact-info-block__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

/**
 * ========================================================================
 * Component: Contact Card
 * ========================================================================
 */
.contact-card {
  text-align: center;
}

.contact-card__icon i {
  font-size: 40px;
  /* Use font-size to control the size of font icons */
  color: #f56565;
  /* The orange color from your design */
  margin-bottom: 1.5rem;
  display: inline-block;
  /* Ensures margin is applied correctly */
}

.contact-card__info {
  margin-top: 1.5rem;
  color: var(--CTA);
}

/**
 * Responsive Styles
 */
@media (max-width: 992px) {
  .contact-info-block__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .contact-info-block__grid {
    grid-template-columns: 1fr;
    /* Stack to a single column */
  }
}
/**
 * ========================================================================
 * Block: Table of Contents Page
 * ========================================================================
 */
.toc-block__container {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  /* Aligns items to the top */
}

/* --- Left Column: Navigation --- */
.toc-block__nav-wrapper {
  width: 160px;
  flex-shrink: 0;
}
@media (min-width: 993px) {
  .toc-block__nav-wrapper {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

.toc-block__nav {
  position: sticky;
  /* The magic! */
  top: 2rem;
  /* Space from the top of the viewport */
}

.toc-block__nav-title {
  margin-bottom: 1rem;
  margin-top: 0.83em;
  font-size: 26px;
}

.toc-block__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 20px;
  font-weight: 600;
  color: var(--Gray_Mid);
}

.toc-block__nav-list a {
  text-decoration: none;
  color: var(--Gray_Mid);
  transition: all 0.2s ease;
}

/* The active link style */
.toc-block__nav-list a.is-active {
  color: var(--Black);
}

/* --- Right Column: Content --- */
.toc-block__content {
  flex-grow: 1;
}
@media (min-width: 993px) {
  .toc-block__content {
    border-left: 1px solid var(--Gray_Mid);
    padding-left: 3rem;
  }
}

.toc-block__section:not(:last-child) {
  margin-bottom: 3rem;
}

.toc-block__section-title {
  margin-bottom: 1.5rem;
  font-size: 26px;
}

.toc-block__section-content p {
  margin-bottom: 1.5rem;
}

/* Style for the highlighted text block */
.toc-block__section-content blockquote {
  background-color: var(--Blue_Light);
  /* Light blue background */
  border-left: 4px solid var(--Blue_Dark);
  /* Blue left border */
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}

.toc-block__section-content blockquote p {
  margin-bottom: 0;
}

/**
 * Responsive Styles
 */
@media (max-width: 992px) {
  .toc-block__container {
    flex-direction: column;
    /* Stack columns vertically */
  }
  .toc-block__nav-wrapper {
    width: 100%;
  }
  .toc-block__nav {
    border-bottom: 1px solid var(--Gray_Mid);
    padding-bottom: 2rem;
  }
}
.text-center {
  text-align: center;
}

.margin-top-1rem {
  margin-top: 1rem;
}

.promo-block {
  background-color: var(--White);
  color: var(--Black);
  overflow: hidden;
}
.promo-block .promo-block__container {
  display: flex;
  gap: 4rem;
  margin-top: 2rem;
}
@media (max-width: 991px) {
  .promo-block .promo-block__container {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }
}
.promo-block .promo-block__container .promo-block__content {
  max-width: 400px;
  flex-shrink: 0;
}
.promo-block .promo-block__container .promo-block__content .promo-block__description {
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  font-weight: var(--font-weight-paragraph);
}
@media (max-width: 991px) {
  .promo-block .promo-block__container .promo-block__content .promo-block__cta-area {
    display: none;
  }
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__cta-area {
  display: none;
}
@media (max-width: 991px) {
  .promo-block .promo-block__container .promo-block__image-wrapper .promo-block__cta-area {
    display: block;
  }
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper {
  flex-grow: 1;
  min-width: 0;
  position: relative;
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .overlay-shadow {
  background: linear-gradient(270deg, #eae9e6 0%, rgba(234, 233, 230, 0) 100%);
  position: absolute;
  top: -1rem;
  right: -1rem;
  bottom: -1rem;
  width: 100px;
  z-index: 1;
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .promo-block__img-wrapper {
  position: relative;
  /* For absolute positioning of the image */
  overflow: hidden;
  /* Ensures images don't overflow */
  display: flex;
  flex-wrap: nowrap;
  gap: 100px;
}
@media (max-width: 576px) {
  .promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .promo-block__img-wrapper {
    gap: 24px;
  }
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .promo-block__img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: -14.22px 7.11px 21.32px 0px rgba(0, 0, 0, 0.3490196078);
  max-height: 560px;
}
@media (max-width: 576px) {
  .promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .promo-block__img-wrapper img {
    width: 75%;
  }
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .promo-block__img-wrapper .promo-block__slider {
  padding: 1rem;
  margin: -1rem;
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .promo-block__img-wrapper .promo-block__slide img {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  box-shadow: -28.43px 28.43px 56.86px 0px rgba(255, 255, 255, 0.2) inset;
  box-shadow: -14.22px 7.11px 21.32px 0px rgba(0, 0, 0, 0.3490196078);
}
.promo-block .promo-block__super-heading {
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  font-weight: var(--font-weight-subtitle);
  display: block;
  margin-bottom: 0.5rem;
}
.promo-block .promo-block__headline {
  font-size: 144px !important;
  line-height: 0.8 !important;
}
@media (max-width: 991px) {
  .promo-block .promo-block__headline {
    font-size: 96px !important;
  }
}
@media (max-width: 480px) {
  .promo-block .promo-block__headline {
    font-size: var(--font-size-title) !important;
  }
}
.promo-block .promo-block__cta-area {
  margin-top: 2rem;
  max-width: 400px;
}
.promo-block .promo-block__pre-button-text {
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  font-weight: var(--font-weight-subtitle);
  margin-top: 2rem;
}

/**
 * ========================================================================
 * Block: Promo (Grid Variant)
 * ========================================================================
 */
.promo-grid-wrapper {
  overflow: hidden;
}
.promo-grid-wrapper .promo-grid {
  display: grid;
  /* Creates a 3x3 grid */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  position: relative;
  /**
  * Responsive Styles for Promo Grid
  */
}
@media (max-width: 576px) {
  .promo-grid-wrapper .promo-grid {
    /* You could stack them to a single column, but a 2-column grid of images
    often still looks great on mobile. We'll keep it 2-column for now. */
  }
  .promo-grid-wrapper .promo-grid .promo-grid {
    gap: 1rem;
    margin-block-end: 3rem;
  }
}
.promo-grid-wrapper .promo-grid .overlay-shadow {
  background: linear-gradient(270deg, #eae9e6 0%, rgba(234, 233, 230, 0) 100%);
  position: absolute;
  top: -1rem;
  right: -1rem;
  bottom: -1rem;
  width: 100px;
  z-index: 1;
}
.promo-grid-wrapper .promo-grid .promo-grid__item {
  max-height: 230px;
  width: 100%;
  min-width: 260px;
}
.promo-grid-wrapper .promo-grid .promo-grid__item img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Ensures images are not distorted */
  border-radius: 8px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* WooCommerce */
/**
 * ========================================================================
 * WooCommerce: Archive & Product Grid
 * ========================================================================
 */
/* The main grid container for all products */
.products {
  display: grid;
  /* Creates a responsive grid that fits as many columns as possible */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem 2rem;
  /* row-gap and column-gap */
  margin-top: 4rem;
  margin-bottom: 4rem;
}

/**
 * ========================================================================
 * Component: Product Tease Card (Modern Style)
 * ========================================================================
 */
/**
 * ========================================================================
 * Component: Product Tease Card (Modern Style with "Push Up" Hover Effect)
 * ========================================================================
 */
.product-tease {
  position: relative;
  /* Crucial for positioning the hover element */
  overflow: hidden;
  /* This is key: it will hide the button initially */
  border-radius: 8px;
  background-color: #f8f9fa;
  /* A very light grey background */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-tease:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* --- Image Section --- */
.product-tease__image-wrapper {
  overflow: hidden;
}

.product-tease__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}

.product-tease:hover .product-tease__image {
  transform: scale(1.05);
}

/* --- Content Section --- */
/* This section will now slide up on hover */
.product-tease__content {
  padding: 1.25rem;
  background-color: #f8f9fa;
  /* Match the card background */
  position: relative;
  /* To ensure it sits on top of the actions */
  z-index: 2;
  transition: transform 0.3s ease;
  /* Animate the slide */
}

.product-tease__title {
  font-size: 1.2rem;
  font-weight: 400;
  margin: 4px 0;
}

.product-tease__title a {
  text-decoration: none;
  color: var(--color-text-dark);
}

.product-tease__price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark-blue);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.product-tease__price .price {
  margin: 0;
  display: flex;
  gap: 8px;
  flex-direction: row-reverse;
  justify-content: start;
}
.product-tease__price .price del .woocommerce-Price-amount.amount {
  font-weight: 400;
  color: var(--Gray_Mid);
}
.product-tease__price .price ins {
  text-decoration: none;
}
.product-tease__price .product-tease__discount {
  font-weight: 400;
  color: var(--Warning);
}

.product-card__brand {
  margin: 0px;
}

/* --- The "Add to Cart" Actions --- */
/* This section is now positioned absolutely, just below the content */
/* --- The Hover Interaction --- */
/* When hovering the card, slide the content up by the height of the actions area */
/* Styling the WooCommerce 'Add to Cart' button */
.product-tease .button.add_to_cart_button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 1rem;
  background-color: var(--color-dark-blue);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}

.product-tease .button.add_to_cart_button:hover {
  background-color: var(--color-primary-blue);
}

/**
 * ========================================================================
 * WooCommerce: Pagination
 * ========================================================================
 */
.woocommerce-pagination {
  text-align: center;
}

.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  list-style: none;
  padding: 0;
  gap: 0.5rem;
  border-radius: 5px;
  border: 1px solid var(--color-border);
}

.woocommerce-pagination .page-numbers li {
  margin: 0;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--color-text-dark);
}

.woocommerce-pagination .page-numbers .current {
  background-color: var(--color-dark-blue);
  color: #fff;
  font-weight: 700;
}

.product-hero {
  position: relative;
}
@media only screen and (orientation: landscape) and (min-width: 947px) {
  .product-hero {
    display: flex;
    justify-content: flex-end;
  }
}

.product-gallery--layout-a {
  width: 100%;
  height: var(--fs-block-height);
  display: block;
}
@media (min-width: 769px) {
  .product-gallery--layout-a .flex-viewport {
    height: calc(100vh - 74px) !important;
  }
}
.product-gallery--layout-a .woocommerce-product-gallery__image,
.product-gallery--layout-a .woocommerce-product-gallery__wrapper,
.product-gallery--layout-a img,
.product-gallery--layout-a a {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (orientation: landscape) and (min-width: 769px) {
  .product-gallery--layout-a {
    align-self: flex-start;
    height: auto;
    width: 40vw;
    float: left;
    position: relative;
  }
}
.product-gallery--layout-a .flex-control-nav {
  list-style: none;
  padding: 0 0 0 1rem;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.75rem;
}
@media (max-width: 946px) {
  .product-gallery--layout-a .flex-control-nav {
    margin-top: 8px;
  }
}
@media (min-width: 947px) {
  .product-gallery--layout-a .flex-control-nav {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 14px;
  }
}
.product-gallery--layout-a .flex-control-nav li {
  border: 1px solid var(--color-border);
  border-radius: 5px;
  overflow: hidden;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.product-gallery--layout-a .flex-control-nav li:hover {
  opacity: 1;
}
.product-gallery--layout-a .flex-control-nav li img.flex-active {
  box-shadow: 0 0 0 2px var(--color-primary-blue);
  opacity: 1;
}
.product-gallery--layout-a .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  color: var(--color-dark-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.product-gallery--layout-a .woocommerce-product-gallery__trigger img {
  display: none !important;
}
.product-gallery--layout-a .woocommerce-product-gallery__trigger > span {
  display: none;
}
.product-gallery--layout-a .woocommerce-product-gallery__trigger::before {
  content: none;
}
.product-gallery--layout-a .woocommerce-product-gallery__trigger:hover {
  background-color: #fff;
  transform: scale(1.1);
}

.product-summary {
  padding: 1rem;
  padding-block-start: 1rem !important;
}
@media only screen and (orientation: landscape) and (min-width: 947px) {
  .product-summary {
    width: 60vw;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
  }
}

.product-summary .product_title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.product-summary .price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-dark-blue);
  margin-bottom: 1rem;
}
.product-summary .price ins {
  text-decoration: none;
}
.product-summary .price ins .woocommerce-Price-amount.amount {
  display: block;
  margin-top: 0.5rem;
}

.purchase-panel {
  background-color: transparent;
  border: none;
  padding: 0;
  margin-bottom: 2rem;
}

.product-summary .cart {
  display: flex;
  margin-top: 1.5rem;
  gap: 1rem;
}

/* Style the quantity input field */
.product-summary .quantity .qty {
  width: 70px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  color: var(--color-text-dark);
  padding: 0.5rem;
}

.product-summary .quantity .qty:focus {
  outline: none;
  border-color: #805AD5;
}

.product-summary .single_add_to_cart_button {
  width: auto;
  padding: 1rem;
  background-color: #805AD5;
  color: #fff;
  border: 2px solid #805AD5;
  border-radius: 8px !important;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.product-summary .single_add_to_cart_button:hover {
  background-color: #6B46C1;
  border-color: #6B46C1;
}

.purchase-panel .variations_form {
  display: flex;
  flex-direction: column;
  margin-top: 0px;
}

.purchase-panel .label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

.purchase-panel .value .variable-item-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-details-tabs {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}

.product-details-tabs__nav {
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
}

.product-details-tabs__nav a {
  padding-bottom: 1rem;
  text-decoration: none;
  color: var(--color-text-light);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.product-details-tabs__nav a.is-active {
  color: var(--color-dark-blue);
  border-bottom-color: var(--color-dark-blue);
}

.product-details-tabs__pane {
  display: none;
  line-height: 1.7;
}

.product-details-tabs__pane.is-active {
  display: block;
}

/* --- Section 3: Related Products --- */
@media (min-width: 946px) {
  .related-products-section {
    margin-top: 4rem;
  }
}

.related-products-section__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 2.5rem);
}

/* --- Responsive Styles --- */
@media (max-width: 992px) {
  .product-hero {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
/**
 * ========================================================================
 * WooCommerce: Sticky Product Gallery (Robust Version)
 * ========================================================================
 */
/*
 * --- THIS IS THE KEY FIX ---
 * We target the body tag, which WooCommerce automatically gives a '.single-product' class.
 * We then force the main content containers to allow overflow, which is required for
 * position: sticky to work correctly.
 */
.single-product body,
.single-product #content,
.single-product .content-wrapper {
  overflow: visible;
}

.single-product .site-header {
  position: sticky;
  top: 0;
  background-color: #fff;
}

/* This targets the entire left column (the gallery) on larger screens */
.product-hero .product-gallery--layout-a {
  position: sticky;
  top: 74px;
}

/**
 * Responsive: On smaller screens, we disable the sticky behavior.
 */
@media (max-width: 992px) {
  .product-hero .product-gallery--layout-a {
    position: static;
  }
}
/**
 * ========================================================================
 * WooCommerce: Styling for "Back In Stock Notifier" Plugin
 * ========================================================================
 */
/* --- 1. The Main Form Container --- */
/* This is the wrapper the plugin adds to the product page */
.cwginstock-subscribe-form {
  display: inline-block;
}
.cwginstock-subscribe-form .panel {
  border: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0px !important;
  box-shadow: none !important;
}
.cwginstock-subscribe-form .panel .panel-heading {
  display: none;
}
.cwginstock-subscribe-form .panel .panel-body {
  padding: 0;
}
.cwginstock-subscribe-form .panel .panel-body .row {
  margin: 0;
}
.cwginstock-subscribe-form .panel .panel-body .row .col-md-12 {
  padding: 0px;
}
@media (max-width: 375px) {
  .cwginstock-subscribe-form .panel .panel-body .row .col-md-12 {
    display: flex;
  }
}
.cwginstock-subscribe-form .panel .panel-body input[type=email],
.cwginstock-subscribe-form .panel .panel-body .cwginstock-panel-body input[type=text],
.cwginstock-subscribe-form .panel .panel-body .form-group {
  margin-bottom: 0;
}
.cwginstock-subscribe-form .panel .panel-body .cwgstock_email,
.cwginstock-subscribe-form .panel .panel-body .cwgstock_button {
  border-radius: 0 !important;
  font-size: 1rem !important;
  padding: 0.75rem 1rem !important;
}
.cwginstock-subscribe-form .panel .panel-body .cwgstock_button {
  border-color: var(--Blue_Dark);
  cursor: pointer;
  background-color: var(--Blue_Dark);
  margin-left: -12px;
  border-style: solid;
  width: auto;
  border-width: 1px;
}
.cwginstock-subscribe-form .panel .panel-body .cwgstock_email {
  border-width: 1px !important;
}
.cwginstock-subscribe-form .center-block {
  display: inline-block !important;
}
.cwginstock-subscribe-form .blockOverlay {
  opacity: 0 !important;
}

.variations tbody tr {
  display: flex;
  flex-direction: column;
}
.variations tbody tr:not(:last-child) {
  margin-bottom: 1rem;
}
.variations .reset_variations {
  margin-inline-start: 1rem;
  text-decoration: none;
  color: var(--Blue_Dark);
  display: none !important;
}

.quantity {
  display: inline-block;
}

.stock.in-stock {
  margin-top: 0px;
}

.cfvsw-label-none table.variations tr th.label label .cfvsw-selected-label {
  font-size: inherit;
  font-weight: inherit;
}

/**
 * ========================================================================
 * WooCommerce: Product Filters Toolbar & Dropdown
 * ========================================================================
 */
.filters-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.filters-toolbar .live-search-wrapper {
  flex-grow: 1;
  max-width: 400px;
}

/* --- The Dropdown Wrapper --- */
.filters-dropdown-wrapper {
  position: relative;
}

/* The "Filters" Button */
.filters-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
}

/* The Dropdown Panel */
.filters-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: 300px;
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  z-index: 50;
  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease-in-out;
}

.filters-dropdown.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filters-dropdown__header {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.filters-dropdown__title {
  font-weight: 600;
}

.filters-dropdown__body {
  padding: 0 2rem 20px;
}

.price-slider-filter__display {
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin-top: 1rem;
  text-align: center;
}

.filters-dropdown__footer {
  padding: 1rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filters-button--primary {
  background-color: var(--Blue_Dark);
  color: #fff;
  border-radius: 5px;
  padding: 0.6rem 1.2rem;
  border: none;
  cursor: pointer;
}

.filters-button--secondary {
  background: none;
  border: none;
  color: var(--color-text-light);
  font-weight: 600;
  cursor: pointer;
}

/* noUiSlider Styles (remain the same) */
/* ... */
/**
 * ========================================================================
 * WooCommerce: Breadcrumbs
 * ========================================================================
 */
.shop-breadcrumbs {
  /* Adds space between the header and the filters */
  /* Center the breadcrumb trail */
}

.woocommerce-breadcrumb {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: var(--color-text-light);
}

/* Style the links within the breadcrumb */
.woocommerce-breadcrumb a {
  text-decoration: none;
  color: var(--color-text-light);
  transition: color 0.2s ease;
}

.woocommerce-breadcrumb a:hover {
  color: var(--Blue_Dark);
  text-decoration: underline;
}

/* Style the separator (e.g., '/') */
.woocommerce-breadcrumb .delimiter {
  margin: 0 0.5em;
}

/* Style the current page text (which is not a link) */
.woocommerce-breadcrumb > *:last-child {
  color: var(--color-text-dark);
  font-weight: 500;
}

/**
 * ========================================================================
 * WooCommerce: The "App-Like" My Account Page
 * ========================================================================
 */
/* --- Main Layout --- */
.woocommerce-account .entry-content .woocommerce {
  display: grid;
  grid-template-columns: 250px 1fr;
  /* Sidebar and Content Pane */
  align-items: flex-start;
  gap: 3rem;
}

/* --- 1. The Navigation Sidebar (Left Column) --- */
.woocommerce-MyAccount-navigation {
  background-color: #f8f9fa;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.woocommerce-MyAccount-navigation ul li {
  margin: 0;
}

.woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  text-decoration: none;
  font-weight: 600;
  color: var(--color-text-light);
  border-radius: 5px;
  transition: all 0.2s ease;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background-color: #e9ecef;
  color: var(--Blue_Dark);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  background-color: var(--Blue_Dark);
  color: #fff;
}

/* --- 2. The Content Pane (Right Column) --- */
.woocommerce-MyAccount-content {
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 2.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.woocommerce-MyAccount-content h3 {
  /* Section titles */
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* --- 3. The New Dashboard Styles --- */
.dashboard-section {
  margin-bottom: 2.5rem;
}

.dashboard-section__title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.recent-order-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.recent-order-card__header {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background-color: #f8f9fa;
  border-bottom: 1px solid var(--color-border);
}

.recent-order-card__number {
  font-weight: 700;
}

.recent-order-card__status {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.status-processing {
  background-color: #ffc107;
  color: #333;
}

.status-completed {
  background-color: #28a745;
  color: #fff;
}

.status-on-hold {
  background-color: #17a2b8;
  color: #fff;
}

.recent-order-card__body {
  padding: 1rem;
  display: flex;
  gap: 2rem;
}

.recent-order-card__detail .label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.recent-order-card__detail .value {
  font-weight: 600;
}

.recent-order-card__footer {
  padding: 0 1rem 1rem;
  text-align: right;
}

.dashboard-quick-links {
  display: flex;
  gap: 1rem;
}

/* --- 4. Responsive Styles --- */
@media (max-width: 992px) {
  .woocommerce-account .entry-content .woocommerce {
    grid-template-columns: 1fr;
    /* Stack on tablet and below */
  }
}
.woocommerce-MyAccount-content .woocommerce-notices-wrapper + p {
  margin-top: 0;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
  float: unset;
  width: 100%;
}

.woocommerce-account .addresses .title .edit {
  float: unset;
}

/**
 * ========================================================================
 * WooCommerce: The "Focused Auth Panel" My Account Page
 * ========================================================================
 */
/* --- Main Page Container --- */
.woocommerce-account .entry-content {
  max-width: 550px;
  /* A narrower container for a focused form */
  margin: 4rem auto;
}

/* --- 1. The New Tab Navigation --- */
.account-tabs__nav {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2.5rem;
}

.account-tabs__link {
  flex: 1;
  text-align: center;
  padding: 1rem;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text-light);
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.account-tabs__link.is-active {
  color: var(--color-dark-blue);
  border-bottom-color: var(--color-dark-blue);
}

/* --- 2. The Form Container --- */
/* This is the #customer_login div */
.woocommerce-account .u-columns.col2-set {
  display: block;
  /* Override the default columns */
  margin: 0;
}

/* Style each form column */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
  width: 100%;
}

.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
  display: none;
  /* Hide the default "Login" / "Register" titles */
}

/* --- 3. Styling the Form Elements --- */
.woocommerce-account .form-row {
  margin-bottom: 1.5rem;
}

.woocommerce-account .input-text {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
}

.woocommerce-account .button {
  padding: 0.8rem 1.5rem;
  background-color: var(--Blue_Dark) !important;
  color: #fff !important;
  border-radius: 5px;
  font-size: 1.1rem;
  font-weight: 600;
}
.woocommerce-account .button:not(:last-child), .woocommerce-account .button:not(:only-child) {
  margin-right: 4px !important;
}

.woocommerce-account .button:hover {
  background-color: var(--color-primary-blue);
}

/* --- 4. The Footer Links --- */
.woocommerce-account .lost_password {
  text-align: center;
  margin-top: 1.5rem;
}

.account-form-switcher {
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.account-form-switcher a {
  font-weight: 600;
  text-decoration: none;
  color: var(--color-primary-blue);
}

/**
 * ========================================================================
 * WooCommerce: The "Premium Form Panels" My Account UI
 * ========================================================================
 */
/* --- 1. The Main Layout --- */
/* We create a clean background and center the content */
.woocommerce-account.logged-out .entry-content {
  max-width: 1000px;
  margin: 4rem auto;
}

/* The container for both form panels, using a responsive grid */
.woocommerce-account .u-columns.col2-set {
  gap: 3rem;
  display: flex;
  flex-direction: column;
  margin: auto;
}
.woocommerce-account .u-columns.col2-set .woocommerce-Address + .woocommerce-Address {
  margin-top: 2rem;
}

/* --- 2. The Form Panels (The Cards) --- */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
  width: 100%;
  /* Override default widths */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  border-top: 4px solid var(--Blue_Dark);
  /* The brand accent */
  padding: 12px;
}

/* --- 3. Typography & Hierarchy --- */
.woocommerce-account h2 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 2rem;
  color: var(--color-dark-blue);
}

/* --- 4. Polished Form Elements --- */
.woocommerce-account .form-row {
  margin-bottom: 1.5rem;
}

.woocommerce-account label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text-dark);
}

.woocommerce-account .input-text {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  background-color: #f8f9fa;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  transition: all 0.2s ease;
}

.woocommerce-account .input-text:focus {
  outline: none;
  border-color: var(--color-primary-blue);
  box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
  background-color: #fff;
}

/* --- 5. Buttons and Links --- */
.woocommerce-account .button {
  padding: 0.9rem 1.5rem;
  background-color: var(--color-dark-blue);
  color: #fff !important;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.woocommerce-account .button:hover {
  background-color: var(--color-primary-blue);
}

.woocommerce-account .lost_password {
  margin-top: 1.5rem;
}

.woocommerce-account .woocommerce-form-login__rememberme {
  display: block;
  margin-bottom: 1.5rem;
}

/* --- 6. Responsive Design --- */
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border: 0px;
  margin: 0;
}

.woocommerce-ResetPassword {
  width: 100%;
  /* Override default widths */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  border-top: 4px solid var(--Blue_Dark);
  /* The brand accent */
  padding: 24px;
  max-width: 560px;
  margin: auto;
}
.woocommerce-ResetPassword .woocommerce-form-row {
  width: 100% !important;
}

/* Root Variables */
:root {
  /* Colors */
  --Deep_Green: #3d5234;
  --Success: #07840f;
  --Warning: #ff8e3d;
  --CTA: #ff6746;
  --Black: #1c2036;
  --Blue-1_Dark: #AED1E6;
  --Blue-2_Dark: #292F4A;
  --Blue_Dark: #1c297e;
  --Blue-1_Med: #C7DBE6;
  --Blue-2_Mid: #3F4970;
  --Blue_Mid: #444d84;
  --Blue_Light: #b8e4ea;
  --Blue-1_Light: #E4F1F8;
  --Blue-2_Light: #3F5289;
  --Gray_Dark: #626265;
  --Gray_Mid: #939399;
  --Gray_Light: #cfd1d3;
  --Gray_3: #6E6E6C;
  --White: #eae9e6;
  /* Font-Family */
  --font-poppins: "Poppins", sans-serif;
  --font-anton: "Anton", sans-serif;
  --font-gagalin: 'Gagalin', sans-serif;
  /* Text Style: Small */
  --font-family-small: var(--font-poppins);
  --font-weight-small: 400;
  --font-size-small: 10px;
  --line-height-small: 14px;
  --letter-spacing-small: 0%;
  /* Text Style: Subtitle */
  --font-family-subtitle: var(--font-poppins);
  --font-weight-subtitle: 400;
  --letter-spacing-subtitle: 0%;
  --font-size-subtitle: clamp(0.625rem, 0.34rem + 1.43vw, 1.625rem);
  --line-height-subtitle: clamp(0.938rem, 0.63rem + 1.52vw, 2rem);
  /* Text Style: Subtitle+Button */
  --font-family-subtitle-button: var(--font-poppins);
  --font-weight-subtitle-button: 600;
  --letter-spacing-subtitle-button: 0%;
  --font-size-subtitle-button: clamp(1rem, 0.93rem + 0.36vw, 1.25rem);
  --line-height-subtitle-button: clamp(1.375rem, 1.3rem + 0.36vw, 1.625rem);
  /* Text Style: Paragraph */
  --font-family-paragraph: var(--font-poppins);
  --font-weight-paragraph: 400;
  --letter-spacing-paragraph: 0%;
  --font-size-paragraph: 12px;
  --line-height-paragraph: 18px;
  /* Text Style: Title */
  --font-family-title: var(--font-gagalin);
  --font-weight-title: 400;
  --font-size-title: 32px;
  --line-height-title: 32px;
  --letter-spacing-title: 0;
  /* Button */
  --font-family-btn: var(--font-poppins);
  --font-weight-btn: 500;
  --letter-spacing-btn: 0%;
  --border-radius-btn: 20px;
  --font-size-btn: 12px;
  --line-height-btn: 20px;
  --padding-btn: 10px 20px;
  /* Label */
  --font-family-label: var(--font-poppins);
  --font-weight-label: 400;
  --letter-spacing-label: 0%;
  --padding-label: 4px 12px;
  --border-radius-label: 12px;
  --font-size-label: clamp(0.625rem, 0.52rem + 0.54vw, 1rem);
  --line-height-label: clamp(0.938rem, 0.74rem + 0.98vw, 1.625rem);
  /* For cards is V3 design */
  --card-height-fluid: clamp(18.5rem, 15.21rem + 16.43vw, 30rem);
  /* Boxshadow */
  --D-Lightcard: 0px 5px 16px 0px #292F4A1F;
  --D-DarkCard: 0px 5px 16px 0px #292F4A80;
}

@media (min-width: 576px) {
  :root {
    /* Text Style: Small (Desktop) */
    --font-size-small: 13px;
    --line-height-small: 18px;
    /* Text Style: Subtitle (Desktop) */
    --font-size-subtitle: 26px;
    --line-height-subtitle: 32px;
    /* Text Style: Subtitle+Button (Desktop) */
    --font-size-subtitle-button: 20px;
    --line-height-subtitle-button: 26px;
    /* Text Style: Paragraph (Desktop) */
    --font-size-paragraph: 16px;
    --line-height-paragraph: 24px;
    /* Text Style: Title (Desktop) */
    --font-size-title: 52px;
    --line-height-title: 52px;
    /* Button Desktop */
    --font-size-btn: 16px;
    --line-height-btn: 28px;
    --padding-btn: 6px 24px;
    --border-radius-btn: 29px;
    /* Label */
    --font-size-label: 16px;
    --line-height-label: 26px;
    --padding-label: 4px 16px;
    --border-radius-label: 18px;
  }
}
/* ------------------------------------------- */
/*           Example Usage (No Change)         */
/* ------------------------------------------- */
.small-text-style {
  font-family: var(--font-family-small);
  font-weight: var(--font-weight-small);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-small);
}

.subtitle-text-style {
  font-family: var(--font-family-subtitle);
  font-weight: var(--font-weight-subtitle);
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
}

.subtitle-button-text-style {
  font-family: var(--font-family-subtitle-button);
  font-weight: var(--font-weight-subtitle-button);
  font-size: var(--font-size-subtitle-button);
  line-height: var(--line-height-subtitle-button);
  letter-spacing: var(--letter-spacing-subtitle-button);
}

.paragraph-text-style {
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
}

.title-text-style {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title);
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
  margin: 0;
  display: inline-block;
}

.btn {
  font-family: var(--font-family-btn);
  font-weight: var(--font-weight-btn);
  font-size: var(--font-size-btn);
  line-height: var(--line-height-btn);
  letter-spacing: var(--letter-spacing-btn);
  border-radius: var(--border-radius-btn);
  border: 0px;
  text-decoration: none;
  color: var(--Blue-2_Dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  padding: var(--padding-btn);
  background-color: var(--CTA);
  color: var(--White);
}
.btn-primary:hover {
  background-color: #DD6451;
}

.btn-secondary {
  padding: var(--padding-btn);
  background-color: var(--Blue-2_Light);
  color: var(--White);
}
.btn-secondary:hover {
  background-color: var(--Blue-2_Dark);
}

.btn-light {
  padding: var(--padding-btn);
  color: var(--Blue-2_Light);
  background-color: var(--White);
}
.btn-light:hover {
  color: var(--Blue-2_Dark);
}

.label {
  font-family: var(--font-family-label);
  font-weight: var(--font-weight-label);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-label);
  padding: var(--padding-label);
  background-color: var(--Blue-1_Dark);
  color: var(--Blue-2_Dark);
  border-radius: var(--border-radius-label);
}

.container {
  max-width: 1280px;
}

.container-sm {
  max-width: 790px;
}

.is-theme--light h2,
.is-theme--light h3,
.is-theme--light p {
  color: var(--Blue-2_Light) !important;
}

/* Blocks Common Styles */
.block {
  padding: 2rem 0 3rem;
}
@media (min-width: 769px) {
  .block {
    padding: 5rem 0;
  }
}
.block.is-theme--dark h2,
.block.is-theme--dark h3,
.block.is-theme--dark p {
  color: var(--Blue_Light) !important;
}
.block.is-theme--dark .btn-link {
  color: var(--CTA);
}

.bg-light-blue {
  background-color: var(--Blue-1_Med);
}

.bg-dark-blue {
  background-color: var(--Blue-2_Mid);
}

.bg-white {
  background-color: var(--White);
}

.btn--outline {
  border: 1px solid var(--Blue-2_Light);
  color: var(--Blue-2_Light);
  background-color: transparent;
  padding: var(--padding-btn);
}
.btn--outline:hover {
  background-color: var(--Blue-1_Light);
  color: var(--Blue-2_Light);
  border: 1px solid var(--Blue-2_Light);
}
.btn--outline:hover svg {
  fill: currentcolor;
}

.btn--outline-dark {
  border: 1px solid var(--Blue_Dark);
  color: var(--Blue_Dark);
  background-color: transparent;
  padding: var(--padding-btn);
}
.btn--outline-dark:hover {
  background-color: var(--Blue_Dark);
  color: #fff;
}
@media (max-width: 560px) {
  .btn--outline-dark {
    width: 100%;
  }
}

.btn--small {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  background: var(--color-dark-blue);
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
}

.site-header {
  padding: 1rem 0;
  position: relative;
  z-index: 11;
  background: transparent;
  min-height: 82px;
  align-content: center;
}
.site-header .site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-header .site-header__inner .site-branding .site-logo {
  display: block;
  height: 36px !important;
  width: 100%;
  max-width: 160px;
}
@media (max-width: 768px) {
  .site-header .site-header__inner .site-branding .logo-desktop {
    display: none;
  }
}
.site-header .site-header__inner .site-branding .logo-mobile {
  display: none;
}
@media (max-width: 768px) {
  .site-header .site-header__inner .site-branding .logo-mobile {
    display: block;
    max-height: 40px;
  }
}
.site-header .site-header__inner .site-header__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.site-header .site-header__inner .site-header__actions .nav-inline .nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  /* Space between menu items */
  margin: 0;
}
.site-header .site-header__inner .site-header__actions .nav-inline .nav-menu .nav-item a {
  font-family: var(--font-family-btn);
  font-weight: var(--font-weight-btn);
  font-size: var(--font-size-btn);
  line-height: var(--line-height-btn);
  letter-spacing: var(--letter-spacing-btn);
  border-radius: var(--border-radius-btn);
  border: 0px;
  text-decoration: none;
  color: var(--Blue-2_Dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--Blue-2_Light);
}
.site-header .site-header__inner .site-header__actions .nav-inline .nav-menu .nav-item a:hover {
  color: var(--Blue_Dark);
}
@media (max-width: 768px) {
  .site-header .site-header__inner .site-header__actions .nav-inline {
    display: none;
  }
}
.site-header .site-header__inner .site-header__actions .drawer-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  color: var(--Blue-2_Light);
}
.site-header .site-header__inner .site-header__actions .drawer-toggle .icon-close {
  display: none;
}
.site-header .site-header__inner .site-header__actions .drawer-toggle.drawer-is-open .icon-hamburger {
  display: none;
}
.site-header .site-header__inner .site-header__actions .drawer-toggle.drawer-is-open .icon-close {
  display: block;
}

.menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 90%;
  height: 100vh;
  background-color: var(--Blue_Dark);
  color: #fff;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
.menu-drawer .menu-drawer__inner {
  padding: 1rem !important;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.menu-drawer .menu-drawer__inner::-webkit-scrollbar {
  display: none;
}
.menu-drawer .menu-drawer__inner .menu-wrapper {
  flex-grow: 1;
}
.menu-drawer .menu-drawer__inner .menu-wrapper .nav-mobile {
  display: none;
  padding: 0px;
}
@media (max-width: 768px) {
  .menu-drawer .menu-drawer__inner .menu-wrapper .nav-mobile {
    display: block !important;
  }
  .menu-drawer .menu-drawer__inner .menu-wrapper .nav-mobile .nav-menu {
    gap: 0px !important;
  }
}

.drawer-is-open.menu-drawer {
  transform: translateX(0);
}
.drawer-is-open.menu-drawer-backdrop {
  opacity: 1;
  visibility: visible;
}

.menu-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Pending start */
/* --- Drawer Menu (Primary) --- */
.nav-drawer .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nav-drawer .menu-item a {
  text-decoration: none;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: normal;
}

.nav-drawer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-drawer.nav-main .nav-item {
  margin: 1rem 0;
  width: 100%;
}

/**
 * ========================================================================
 * Drawer: Login/Logout Button
 * ========================================================================
 */
.drawer-button {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  /* Visual Styling */
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* A semi-transparent white border */
  border-radius: 5px;
  /* Text Styling */
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.drawer-button:hover {
  background-color: #2a3897;
  color: var(--color-dark-blue);
  /* Your theme's dark blue color */
}

.drawer-extra-content {
  /* Create space between the menu and this section */
  margin-top: 1rem;
  padding-top: 1rem;
  /* A subtle line to visually separate the sections */
  border-top: 1px solid #fff;
}

/* --- Styling for the example social links --- */
/* We add a modifier class to style them for the drawer context */
.social-links--drawer {
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.social-links--drawer .social-links__link {
  /* Make the icons smaller for the drawer */
  width: 36px;
  height: 36px;
  border-color: transparent;
}

.social-links--drawer .social-links__link:hover {
  color: var(--Blue_Dark);
}

.social-links--drawer .social-links__link img {
  /* Adjust size if needed */
  width: 24px;
  height: 24px;
}

/**
 * ========================================================================
 * Drawer: User Welcome Panel
 * ========================================================================
 */
.drawer-user-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Create space below this panel */
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  /* A subtle line to separate it from the main menu */
  border-bottom: 1px solid #fff;
}

.drawer-user-panel__greeting {
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.drawer-user-panel__greeting .user-name {
  font-weight: 700;
  color: #fff;
}

.drawer-user-panel__settings-link {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

.drawer-user-panel__settings-link:hover {
  color: #fff;
}

.drawer-user-panel__orders-link {
  text-decoration: none;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: normal;
}

.nav-drawer-tertiary {
  /* Create space between this menu and the social links below it */
  margin-bottom: 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  /* A subtle line to visually separate the sections */
  border-top: 1px solid #fff;
}
.nav-drawer-tertiary .nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-drawer-tertiary .nav-menu .menu-item:not(:last-child) {
  margin-block-end: 1rem;
}

.nav-drawer-tertiary .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* A smaller gap than the primary menu */
}

.nav-drawer-tertiary .menu-item a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  /* Slightly less prominent than the primary menu */
  font-size: 1.2rem;
  /* A smaller font size */
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-drawer-tertiary .menu-item a:hover {
  color: #fff;
}

/* Pending End */
/**
 * ========================================================================
 * Site Footer
 * ========================================================================
 */
#footer {
  background-color: #1a2049;
  color: #fff;
  padding: 3rem 0;
}
@media (max-width: 992px) {
  #footer {
    padding: 2rem 0;
  }
}
#footer .site-footer__grid .site-footer__column {
  font-size: 0.9rem;
}
#footer .site-footer__grid .site-footer__column .site-branding {
  display: block;
  margin-block-end: 1rem;
}
#footer .site-footer__grid .site-footer__column .site-footer__title {
  font-weight: 400;
  font-size: 14px;
  color: #a0aec0;
}
#footer .site-footer__grid .site-footer__column .social-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
#footer .site-footer__grid .site-footer__column .social-links .social-links__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #4a5568;
  color: #fff;
  transition: all 0.2s ease;
}
#footer .site-footer__grid .site-footer__column .social-links .social-links__link:hover {
  background-color: #fff;
  color: #1a2049;
  border-color: #fff;
}
#footer .site-footer__grid .site-footer__column .social-links .social-links__link svg {
  width: 20px;
  height: 20px;
}
#footer .site-footer__grid .site-footer__column .social-links .social-links__link img {
  height: 60%;
  width: 100%;
}
#footer .site-footer__grid .site-footer__column .footer-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#footer .site-footer__grid .site-footer__column .footer-menu ul .menu-item {
  min-width: 33%;
}
#footer .site-footer__grid .site-footer__column .footer-menu ul .menu-item a {
  color: #CFD1D3;
  text-decoration: none;
  transition: all 0.2s ease;
  align-content: center;
}
#footer .site-footer__grid .site-footer__column .footer-menu ul .menu-item a:hover {
  text-decoration: underline;
}

/**
 * Footer Copyright
 */
.site-footer__copyright {
  font-size: 0.875rem;
  color: #a0aec0;
}
@media (max-width: 576px) {
  .site-footer__copyright {
    font-size: 11px;
  }
}

/**
 * Responsive Footer
 */
@media (max-width: 992px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
  .site-footer__grid .text-center {
    text-align: left !important;
  }
  .site-footer__grid .footer-menu {
    justify-content: flex-start;
  }
}

.company-info {
  color: #CFD1D3;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2.5rem;
  padding-bottom: 2rem;
}

/**
 * Responsive Footer
 */
@media (max-width: 768px) {
  /* On tablets and below, switch to a single column */
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
  .site-footer__grid .text-center {
    text-align: left !important;
  }
  .site-footer__grid .footer-menu,
  .site-footer__grid .footer-menu-wrapper {
    justify-content: flex-start;
  }
}
.footer-menu-wrapper {
  display: flex;
  justify-content: center;
}

/* Footer Styles */
#footer {
  /* Newsletter Form Styles */
}
#footer .footer-newsletter-form .tnp-subscription {
  margin: 0px;
}
#footer .footer-newsletter-form .tnp-subscription form {
  display: flex;
  align-items: center;
  width: 100%;
}
#footer .footer-newsletter-form .tnp-subscription form .tnp-field {
  margin-block-end: 0px;
}
#footer .footer-newsletter-form .tnp-subscription form .tnp-field label {
  display: none;
}
#footer .footer-newsletter-form .tnp-subscription form .tnp-field .tnp-email {
  width: 100%;
  background-color: transparent;
  padding: 0.75rem 1rem;
  border: 1px solid #626265;
  color: #939399;
  height: 40px;
}
#footer .footer-newsletter-form .tnp-subscription form .tnp-field .tnp-email:focus-visible {
  outline: 0;
  outline-offset: 0;
}
#footer .footer-newsletter-form .tnp-subscription form .tnp-field .tnp-submit {
  height: 40px;
  background-color: #444d84;
}
#footer .footer-newsletter-form .tnp-subscription form .tnp-field .tnp-submit:hover {
  cursor: pointer;
}
#footer .footer-newsletter-form .tnp-subscription form .tnp-field.tnp-field-email {
  width: 100%;
}

/* Slider Version 1 */
.slider-version-1 .swiper-container {
  position: relative;
}
.slider-version-1 .swiper-slide {
  height: auto;
  width: 228px;
  min-height: 300px;
  margin-right: 12px;
}
@media (min-width: 576px) {
  .slider-version-1 .swiper-slide {
    width: 337px;
    min-height: 380px;
    margin-right: 32px;
  }
}
.slider-version-1 .swiper-slide:last-child {
  margin-right: 0;
}
.slider-version-1 .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 100px;
  border-top-left-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(28, 32, 54, 0.7019607843);
  width: 48px;
  height: 96px;
  color: var(--CTA);
  right: 0;
}
@media screen and (max-width: 768px) {
  .slider-version-1 .swiper-button-next {
    width: 40px;
    height: 80px;
  }
}
@media screen and (max-width: 576px) {
  .slider-version-1 .swiper-button-next {
    width: 32px;
    height: 64px;
  }
}
.slider-version-1 .swiper-button-next::after {
  font-size: 27px;
  font-weight: 900;
  margin-right: -12px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .slider-version-1 .swiper-button-next::after {
    font-size: 24px;
  }
}
@media screen and (max-width: 576px) {
  .slider-version-1 .swiper-button-next::after {
    font-size: 21px;
  }
}
.slider-version-1 .swiper-button-next:hover {
  background-color: var(--Black);
}
.slider-version-1 .swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(28, 32, 54, 0.7019607843);
  width: 48px;
  height: 96px;
  color: var(--CTA);
  left: 0;
}
@media screen and (max-width: 768px) {
  .slider-version-1 .swiper-button-prev {
    width: 40px;
    height: 80px;
  }
}
@media screen and (max-width: 576px) {
  .slider-version-1 .swiper-button-prev {
    width: 32px;
    height: 64px;
  }
}
.slider-version-1 .swiper-button-prev::after {
  font-size: 27px;
  font-weight: 900;
  margin-left: -12px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .slider-version-1 .swiper-button-prev::after {
    font-size: 24px;
  }
}
@media screen and (max-width: 576px) {
  .slider-version-1 .swiper-button-prev::after {
    font-size: 21px;
  }
}
.slider-version-1 .swiper-button-prev:hover {
  background-color: var(--Black);
}
.slider-version-1 .swiper-button-disabled {
  /* Use opacity and pointer-events for a smooth fade and to prevent clicks */
  opacity: 0;
  pointer-events: none;
  cursor: default;
  display: none;
}

/* Slider Version 2 */
.slider-version-2 .swiper-slide {
  text-align: center;
  height: auto;
  min-height: 252px;
  width: 168px;
  margin-right: 16px;
}
@media (min-width: 576px) {
  .slider-version-2 .swiper-slide {
    width: 256px;
    min-height: 384px;
    margin-right: 32px;
  }
}
.slider-version-2 .swiper-slide:last-child {
  margin-right: 0;
}
.slider-version-2 .swiper {
  margin: -12px;
  padding: 12px;
}
@media (max-width: 575px) {
  .slider-version-2 .swiper {
    margin: 0 -12px;
    padding: 1rem 12px;
  }
}

.swiper-container .swiper-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block: 8px 0;
}
@media (min-width: 576px) {
  .swiper-container .swiper-actions {
    margin-block: 28px 0;
  }
}
.swiper-container .swiper-actions:has(> .swiper-navigation:only-child) {
  justify-content: flex-end;
}
.swiper-container .swiper-actions .swiper-pagination {
  width: 100%;
  position: static;
  text-align: center;
  display: flex;
  justify-content: center;
}
@media (min-width: 526px) {
  .swiper-container .swiper-actions .swiper-pagination {
    justify-content: left;
  }
}
.swiper-container .swiper-actions .swiper-pagination .swiper-pagination-bullet {
  background-color: var(--White);
  opacity: 1;
  transition: opacity 0.3s ease;
  height: 12px;
  width: 12px;
  display: none;
}
.swiper-container .swiper-actions .swiper-pagination .swiper-pagination-bullet:has(+ .swiper-pagination-bullet-active) {
  display: block;
}
.swiper-container .swiper-actions .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--Blue-2_Light);
  display: block;
}
.swiper-container .swiper-actions .swiper-pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet {
  display: block;
}
.swiper-container .swiper-actions .swiper-pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet + .swiper-pagination-bullet {
  display: block;
}
.swiper-container .swiper-actions .swiper-navigation {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.swiper-container .swiper-actions .swiper-navigation .swiper-button-prev,
.swiper-container .swiper-actions .swiper-navigation .swiper-button-next {
  position: static;
  width: 40px;
  height: 40px;
  margin-top: 0;
  background-color: #fff;
  border-radius: 50%;
  color: var(--Blue-2_Light);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.swiper-container .swiper-actions .swiper-navigation .swiper-button-prev:after,
.swiper-container .swiper-actions .swiper-navigation .swiper-button-next:after {
  content: "";
}
@media (max-width: 525px) {
  .swiper-container .swiper-actions .swiper-navigation {
    display: none;
  }
}

#reviews.woocommerce-Reviews .woocommerce-Reviews-title {
  display: none;
}
#reviews.woocommerce-Reviews .cr-summaryBox-wrap {
  background-color: transparent;
}
@media (max-width: 525px) {
  #reviews.woocommerce-Reviews .cr-summaryBox-wrap {
    flex-direction: column;
  }
  #reviews.woocommerce-Reviews .cr-summaryBox-wrap .cr-overall-rating-wrap {
    width: 100%;
    flex: 0 0 100%;
  }
  #reviews.woocommerce-Reviews .cr-summaryBox-wrap .ivole-summaryBox.cr-noAjax {
    width: 100%;
    flex: 0 0 100%;
  }
  #reviews.woocommerce-Reviews .cr-summaryBox-wrap .ivole-summaryBox.cr-noAjax .cr-histogramTable {
    max-width: 100%;
  }
}
@media (min-width: 526px) {
  #reviews.woocommerce-Reviews .cr-summaryBox-wrap .cr-overall-rating-wrap {
    width: 35%;
    flex: 0 0 35%;
  }
  #reviews.woocommerce-Reviews .cr-summaryBox-wrap .ivole-summaryBox.cr-noAjax {
    width: 65%;
    flex: 0 0 65%;
  }
  #reviews.woocommerce-Reviews .cr-summaryBox-wrap .ivole-summaryBox.cr-noAjax .cr-histogramTable {
    max-width: 100%;
  }
}
#reviews.woocommerce-Reviews .comment-text .description {
  float: left;
  padding-right: 6rem;
  max-width: 100%;
  word-wrap: break-word;
}
#reviews.woocommerce-Reviews .comment-text .cr-comment-images.cr-comment-videos {
  float: left;
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}
#reviews.woocommerce-Reviews #review_form_wrapper #review_form .comment-form .comment-form-rating .stars a {
  color: #ffbc00;
}
#reviews.woocommerce-Reviews #review_form_wrapper #review_form .comment-form label {
  display: block;
}

/* The main container for the icon, used for positioning the badge */
.header-cart-icon {
  position: relative;
  color: var(--color-text-dark);
  display: block;
  /* Ensures proper positioning */
}

.header-cart-icon:hover {
  color: var(--color-primary-blue);
}

/* The badge itself */
.cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  /* Visual Styling */
  background-color: #F56565;
  /* A bright, attention-grabbing color */
  color: #fff;
  border-radius: 50%;
  /* Makes it a perfect circle */
  /* Sizing and Text */
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  /* Aligns text vertically */
  text-align: center;
  /* Animation for a nice "pop" effect if you add items */
  transform: scale(1);
  transition: transform 0.2s ease-in-out;
}

/**
 * ========================================================================
 * Page: 404 Error
 * ========================================================================
 */
.error-404-block {
  background-color: #1a2049;
  /* Dark blue background */
  color: #fff;
  padding: 6rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 150px);
  /* Adjust 150px to be your header/footer height */
}

.error-404-block__container {
  position: relative;
  z-index: 2;
}

/* The giant "404" in the background */
.error-404-block__code {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  font-family: var(--font-display);
  font-size: clamp(15rem, 40vw, 25rem);
  /* Hugely responsive font size */
  font-weight: 700;
  color: rgba(255, 255, 255, 0.05);
  /* Very transparent */
  z-index: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* Prevents text selection */
}

.error-404-block__headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.error-404-block__subheading {
  font-size: 1.1rem;
  color: #a0aec0;
  /* Lighter grey */
  max-width: 500px;
  margin: 0 auto 2.5rem auto;
}

.error-404-block__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.wc-block-components-checkout-place-order-button {
  background-color: var(--Blue_Dark);
  color: var(--White);
  transition: background-color 0.3s ease-in-out;
}
.wc-block-components-checkout-place-order-button:hover {
  background-color: color-mix(in srgb, var(--Blue_Dark), transparent 10%);
}

.woocommerce-column--shipping-address {
  margin-block-start: 2em;
}

.campaign-highlight-block {
  position: relative;
}
.campaign-highlight-block .campaign-highlight-block__container {
  display: flex;
  gap: 24px;
}
@media (min-width: 992px) {
  .campaign-highlight-block .campaign-highlight-block__container {
    justify-content: space-between;
  }
}
@media (max-width: 425px) {
  .campaign-highlight-block .campaign-highlight-block__container {
    gap: 0;
  }
}
@media (max-width: 991px) {
  .campaign-highlight-block .campaign-highlight-block__container {
    flex-direction: column;
  }
}
@media (min-width: 992px) {
  .campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__content {
    width: 100%;
    max-width: 35%;
  }
}
.campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__content .campaign-highlight-block__label {
  margin-block-end: 8px;
}
@media (min-width: 576px) {
  .campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__content .campaign-highlight-block__label {
    margin-block-end: 28px;
  }
}
.campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__content .campaign-highlight-block__headline {
  color: var(--Blue-2_Light);
}
.campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__content .campaign-highlight-block__description {
  color: var(--Blue-2_Light);
  margin-block-start: 8px;
  margin-block-end: 24px;
}
@media (min-width: 576px) {
  .campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__content .campaign-highlight-block__description {
    margin-block: 28px;
  }
}
.campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  row-gap: 1rem;
  flex-wrap: wrap;
  margin-block-start: 12px;
}
@media (min-width: 576px) {
  .campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__actions {
    margin-block-end: 28px;
  }
}
.campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__actions.desktop {
  display: none;
}
@media (min-width: 576px) {
  .campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__actions.desktop {
    display: block;
  }
}
@media (min-width: 576px) {
  .campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__actions.mobile {
    display: none;
  }
}
@media (max-width: 576px) {
  .campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__actions.mobile {
    margin-block-start: 24px;
  }
}
.campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__actions.mobile .btn {
  display: block;
  width: 100%;
}
@media (min-width: 992px) {
  .campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__slider-wrapper {
    width: 60%;
  }
}
.campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__slider-wrapper .swiper-wrapper .swiper-slide .campaign-card {
  border: 10px solid #fff;
  border-radius: 15.12px;
  display: block;
  background-color: #fff;
  height: 100%;
  box-shadow: var(--D-Lightcard);
}
@media (min-width: 576px) {
  .campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__slider-wrapper .swiper-wrapper .swiper-slide .campaign-card {
    border-radius: 20px;
  }
}
.campaign-highlight-block .campaign-highlight-block__container .campaign-highlight-block__slider-wrapper .swiper-wrapper .swiper-slide .campaign-card .campaign-card__image {
  width: 100%;
  border-radius: 6px;
  height: 100%;
}

.product-highlight-block {
  position: relative;
  background-size: cover;
  background-position: center;
}
.product-highlight-block__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.product-highlight-block .product-highlight-block__container {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}
@media (max-width: 991px) {
  .product-highlight-block .product-highlight-block__container {
    flex-direction: column;
  }
}
@media (min-width: 992px) {
  .product-highlight-block .product-highlight-block__container .product-highlight-block__content {
    width: 100%;
    max-width: 42%;
  }
}
.product-highlight-block .product-highlight-block__container .product-highlight-block__content .product-highlight-block__headline {
  color: var(--Blue_Dark);
}
.product-highlight-block .product-highlight-block__container .product-highlight-block__content .product-highlight-block__headline + .product-highlight-block__subheading {
  margin-block: 1rem 0;
}
.product-highlight-block .product-highlight-block__container .product-highlight-block__content .product-highlight-block__subheading {
  font-weight: 600;
  color: var(--Blue_Dark);
}
.product-highlight-block .product-highlight-block__container .product-highlight-block__content .product-highlight-block__subheading + .product-highlight-block__description {
  margin-block-start: 1rem;
}
.product-highlight-block .product-highlight-block__container .product-highlight-block__content .product-highlight-block__description {
  margin-block-start: 2rem;
}
.product-highlight-block .product-highlight-block__container .product-highlight-block__content .product-highlight-block__actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  row-gap: 1rem;
  flex-wrap: wrap;
  margin-block-start: 2rem;
}
@media (min-width: 769px) {
  .product-highlight-block .product-highlight-block__container .product-highlight-block__content .product-highlight-block__actions {
    margin-block-end: 3rem;
  }
}
.product-highlight-block .product-highlight-block__container .product-highlight-block__slider-wrapper {
  width: 100%;
}
@media (min-width: 991px) {
  .product-highlight-block .product-highlight-block__container .product-highlight-block__slider-wrapper {
    max-width: 42%;
  }
}
.product-highlight-block .product-highlight-block__container .product-highlight-block__slider-wrapper .product-card__image {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 100%;
}

.wrapper > .product-highlight-block {
  position: relative;
}

.coupon-display,
.inventory-status {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--Black);
  overflow: hidden;
  flex-wrap: wrap;
}

.coupon-display__badge,
.inventory-status__count {
  background-color: var(--Black);
  color: var(--White);
  padding: 8.5px 1.25em;
  font-weight: bold;
}
@media (max-width: 575px) {
  .coupon-display__badge,
  .inventory-status__count {
    width: 100%;
  }
}

.coupon-display__code,
.inventory-status__tag {
  background-color: var(--Blue_Mid);
  color: var(--White);
  padding: 0.608em 1.25em;
  font-size: 14px;
}
@media (max-width: 575px) {
  .coupon-display__code,
  .inventory-status__tag {
    width: 100%;
  }
}

.coupon-display + .inventory-status {
  margin-block-start: 1rem;
}

.hero-block {
  background-color: var(--Blue_Light);
  position: relative;
}
.hero-block .hero-block__container {
  display: flex;
  align-items: flex-end;
  gap: 3rem;
}
@media (max-width: 992px) {
  .hero-block .hero-block__container {
    flex-direction: column;
    gap: 2rem;
  }
}
.hero-block .hero-block__container {
  /* --- Left Column: Content --- */
}
.hero-block .hero-block__container .hero-block__content {
  flex: 1;
  min-width: 45%;
}
@media (max-width: 992px) {
  .hero-block .hero-block__container .hero-block__content {
    width: 100%;
  }
}
.hero-block .hero-block__container .hero-block__content {
  /* Ensures content has enough space */
}
.hero-block .hero-block__container .hero-block__content .hero-block__headline {
  margin: 0 0 1.5rem 0;
  white-space: pre-wrap;
  color: var(--Blue_Dark);
}
.hero-block .hero-block__container .hero-block__content .hero-block__description {
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  margin-bottom: 0px;
  font-weight: var(--font-weight-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
}
.hero-block .hero-block__container .hero-block__content .hero-block__scroll-indicator {
  position: absolute;
  bottom: 24px;
}
@media (max-width: 768px) {
  .hero-block .hero-block__container .hero-block__content .hero-block__scroll-indicator {
    display: none;
  }
}
.hero-block .hero-block__container {
  /* --- Right Column: Image Gallery --- */
}
.hero-block .hero-block__container .hero-block__gallery {
  flex: 1;
}
.hero-block .hero-block__container .hero-block__gallery .hero-block__scroll-indicator {
  display: none;
}
@media (max-width: 768px) {
  .hero-block .hero-block__container .hero-block__gallery .hero-block__scroll-indicator {
    display: block;
    margin-block: 1rem -2rem;
  }
}

.post-grid-block {
  color: var(--White);
  background-color: var(--Black);
}
@media (max-width: 992px) {
  .post-grid-block .post-grid-block {
    position: relative;
  }
}
.post-grid-block .post-grid-block__container {
  display: flex;
  gap: 3rem;
}
@media (max-width: 992px) {
  .post-grid-block .post-grid-block__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
}
.post-grid-block .post-grid-block__container .post-grid-block__content {
  flex: 1;
  max-width: 350px;
  flex-shrink: 0;
}
@media (max-width: 992px) {
  .post-grid-block .post-grid-block__container .post-grid-block__content {
    margin-bottom: 0px;
    max-width: 100%;
  }
}
.post-grid-block .post-grid-block__container .post-grid-block__content .post-grid-block__headline {
  margin: 0 0 1.5rem 0 !important;
}
.post-grid-block .post-grid-block__container .post-grid-block__content .post-grid-block__subheading {
  font-family: var(--font-family-subtitle);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  color: var(--White);
  margin: 0 0 1.5rem 0;
}
.post-grid-block .post-grid-block__container .post-grid-block__content .post-grid-block__description {
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-paragraph);
  font-weight: var(--font-weight-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  color: var(--Gray_Mid);
}
@media (max-width: 768px) {
  .post-grid-block .post-grid-block__container .post-grid-block__content .post-grid-block__link {
    display: none;
  }
}
.post-grid-block .post-grid-block__container .post-grid-block__posts-wrapper {
  flex-grow: 1;
  min-width: 0;
  width: 100%;
}
.post-grid-block .post-grid-block__container .post-grid-block__posts-wrapper .post-grid-block__slider {
  padding: 2rem 0 2rem 0;
  margin: -2rem 0 -2rem;
}
.post-grid-block .post-grid-block__container .post-grid-block__posts-wrapper .post-grid-block__link {
  display: none;
}
@media (max-width: 768px) {
  .post-grid-block .post-grid-block__container .post-grid-block__posts-wrapper .post-grid-block__link {
    display: block;
    margin-block: 2rem -1rem;
  }
}
.post-grid-block .post-grid-block__container .post-grid-block__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  text-decoration: none;
  transition: color 0.2s ease;
  font-family: var(--font-family-subtitle-button);
  font-size: var(--font-size-subtitle-button);
  font-weight: var(--font-weight-subtitle-button);
  line-height: var(--line-height-subtitle-button);
  letter-spacing: var(--letter-spacing-subtitle-button);
  color: var(--CTA);
}
.post-grid-block .post-grid-block__container .post-grid-block__link:hover {
  color: #ff2f00;
}
.post-grid-block .post-grid-block__container .article-card--vertical {
  background: var(--Blue_Dark);
}

.promo-block {
  background-color: var(--White);
  color: var(--Black);
  overflow: hidden;
}
.promo-block .promo-block__container {
  display: flex;
  gap: 4rem;
  margin-top: 2rem;
}
@media (max-width: 991px) {
  .promo-block .promo-block__container {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }
}
.promo-block .promo-block__container .promo-block__content {
  max-width: 400px;
  flex-shrink: 0;
}
.promo-block .promo-block__container .promo-block__content .promo-block__description {
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  font-weight: var(--font-weight-paragraph);
}
@media (max-width: 991px) {
  .promo-block .promo-block__container .promo-block__content .promo-block__cta-area {
    display: none;
  }
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__cta-area {
  display: none;
}
@media (max-width: 991px) {
  .promo-block .promo-block__container .promo-block__image-wrapper .promo-block__cta-area {
    display: block;
  }
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper {
  flex-grow: 1;
  min-width: 0;
  position: relative;
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .overlay-shadow {
  background: linear-gradient(270deg, #eae9e6 0%, rgba(234, 233, 230, 0) 100%);
  position: absolute;
  top: -1rem;
  right: -1rem;
  bottom: -1rem;
  width: 100px;
  z-index: 1;
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .promo-block__img-wrapper {
  position: relative;
  /* For absolute positioning of the image */
  overflow: hidden;
  /* Ensures images don't overflow */
  display: flex;
  flex-wrap: nowrap;
  gap: 100px;
}
@media (max-width: 576px) {
  .promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .promo-block__img-wrapper {
    gap: 24px;
  }
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .promo-block__img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: -14.22px 7.11px 21.32px 0px rgba(0, 0, 0, 0.3490196078);
  max-height: 560px;
}
@media (max-width: 576px) {
  .promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .promo-block__img-wrapper img {
    width: 75%;
  }
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .promo-block__img-wrapper .promo-block__slider {
  padding: 1rem;
  margin: -1rem;
}
.promo-block .promo-block__container .promo-block__image-wrapper .promo-block__slider-wrapper .promo-block__img-wrapper .promo-block__slide img {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  box-shadow: -28.43px 28.43px 56.86px 0px rgba(255, 255, 255, 0.2) inset;
  box-shadow: -14.22px 7.11px 21.32px 0px rgba(0, 0, 0, 0.3490196078);
}
.promo-block .promo-block__super-heading {
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  font-weight: var(--font-weight-subtitle);
  display: block;
  margin-bottom: 0.5rem;
}
.promo-block .promo-block__headline {
  font-size: 144px !important;
  line-height: 0.8 !important;
}
@media (max-width: 991px) {
  .promo-block .promo-block__headline {
    font-size: 96px !important;
  }
}
@media (max-width: 480px) {
  .promo-block .promo-block__headline {
    font-size: var(--font-size-title) !important;
  }
}
.promo-block .promo-block__cta-area {
  margin-top: 2rem;
  max-width: 400px;
}
.promo-block .promo-block__pre-button-text {
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  font-weight: var(--font-weight-subtitle);
  margin-top: 2rem;
}

/**
 * ========================================================================
 * Block: Promo (Grid Variant)
 * ========================================================================
 */
.promo-grid-wrapper {
  overflow: hidden;
}
.promo-grid-wrapper .promo-grid {
  display: grid;
  /* Creates a 3x3 grid */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  position: relative;
  /**
  * Responsive Styles for Promo Grid
  */
}
@media (max-width: 576px) {
  .promo-grid-wrapper .promo-grid {
    /* You could stack them to a single column, but a 2-column grid of images
    often still looks great on mobile. We'll keep it 2-column for now. */
  }
  .promo-grid-wrapper .promo-grid .promo-grid {
    gap: 1rem;
    margin-block-end: 3rem;
  }
}
.promo-grid-wrapper .promo-grid .overlay-shadow {
  background: linear-gradient(270deg, #eae9e6 0%, rgba(234, 233, 230, 0) 100%);
  position: absolute;
  top: -1rem;
  right: -1rem;
  bottom: -1rem;
  width: 100px;
  z-index: 1;
}
.promo-grid-wrapper .promo-grid .promo-grid__item {
  max-height: 230px;
  width: 100%;
  min-width: 260px;
}
.promo-grid-wrapper .promo-grid .promo-grid__item img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Ensures images are not distorted */
  border-radius: 8px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.video-reviews-block {
  background-color: inherit;
  color: var(--Blue-2_Light);
}
.video-reviews-block .video-reviews-block__headline {
  margin-block-end: 8px;
}
@media (min-width: 576px) {
  .video-reviews-block .video-reviews-block__headline {
    margin-block-end: 28px;
  }
}
.video-reviews-block .video-reviews-block__headline + .video-reviews-grid {
  margin-top: 3rem;
}
.video-reviews-block .video-reviews-block__description {
  margin-block-end: 24px;
}
@media (min-width: 576px) {
  .video-reviews-block .video-reviews-block__description {
    margin-block-end: 28px;
  }
}
.video-reviews-block .video-review-card {
  height: 100%;
  width: 100%;
}
.video-reviews-block .video-review-card .video-review-item {
  border: 5px solid #fff;
  border-radius: 15.12px;
  display: block;
  background-color: #fff;
  height: 100%;
  box-shadow: var(--D-Lightcard);
  height: auto;
  height: 252px;
  width: 168px;
}
@media (min-width: 576px) {
  .video-reviews-block .video-review-card .video-review-item {
    width: 256px;
    height: 384px;
    border-width: 10px;
  }
}
@media (min-width: 576px) {
  .video-reviews-block .video-review-card .video-review-item {
    border-radius: 20px;
  }
}
.video-reviews-block .video-review-card .video-review-item .video-embed-wrapper {
  width: 100%;
  border-radius: 6px;
  height: 100%;
}

.video-reviews-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
@media (max-width: 991px) {
  .video-reviews-grid {
    justify-content: center;
  }
}

.video-review-item,
.video-embed-wrapper {
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--White);
  height: 100%;
}
.video-review-item video,
.video-review-item iframe,
.video-embed-wrapper video,
.video-embed-wrapper iframe {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-review-item {
  position: relative;
  background-color: var(--White);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  box-shadow: var(--D-Lightcard);
}
.video-review-item video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 70px;
  height: 70px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.video-play-button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
.video-play-button svg {
  width: 30px;
  height: 30px;
  transform: translateX(3px);
}

.video-review-item.is-playing .video-play-button {
  display: none;
}

.video-review-item__footer {
  padding-top: 8px;
  font-family: var(--font-poppins);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
}
.video-review-item__footer .creator-name {
  margin: 0;
  letter-spacing: 0%;
  color: var(--White);
}
.video-review-item__footer .creator-handle {
  color: var(--Gray_3);
  letter-spacing: 0%;
  margin: 0;
}

.hero-campaign-slider-block {
  background-color: var(--Blue-1_Med);
  overflow: hidden;
  padding: 12px;
}
@media (min-width: 769px) {
  .hero-campaign-slider-block {
    padding: 32px 12px 1rem;
  }
}
.hero-campaign-slider-block .hero-campaign-slider__container {
  margin-inline: -12px;
}
.hero-campaign-slider-block .swiper-wrapper {
  /* Apply styles to the PARENT if it has exactly 2 children */
}
@media (min-width: 1510px) {
  .hero-campaign-slider-block .swiper-wrapper:has(> :nth-child(2):last-child) {
    justify-content: center;
  }
}
.hero-campaign-slider-block .swiper-slide {
  height: 370px;
  width: 264px;
  margin-right: 16px;
}
@media (min-width: 526px) and (max-width: 991px) {
  .hero-campaign-slider-block .swiper-slide {
    width: 60%;
    margin-right: 16px;
    height: 480px;
  }
}
.hero-campaign-slider-block .swiper-slide {
  /* Tablet Breakpoint (Matches 768px in your code) */
}
@media (min-width: 992px) {
  .hero-campaign-slider-block .swiper-slide {
    width: 720px;
    margin-right: 32px;
    height: 480px;
  }
}
.hero-campaign-slider-block .swiper-slide:last-child {
  margin-right: 0;
}
.hero-campaign-slider-block .swiper-slide .slide-card {
  display: grid;
  gap: 1rem;
  align-items: flex-end;
  border-radius: 16px;
  padding: 24px;
  grid-template-columns: 1fr;
  height: 100%;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
  background-color: #35488A;
  background-repeat: no-repeat;
  background-image: var(--bg-mobile, none);
}
@media (min-width: 576px) {
  .hero-campaign-slider-block .swiper-slide .slide-card {
    background-image: var(--bg-desktop, none);
  }
}
@media (min-width: 768px) {
  .hero-campaign-slider-block .swiper-slide .slide-card {
    align-items: center;
  }
}
@media (min-width: 992px) {
  .hero-campaign-slider-block .swiper-slide .slide-card {
    border-radius: 36px;
    padding: 55px;
  }
}
.hero-campaign-slider-block .swiper-slide .slide-card .slide-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  grid-row: 1;
  grid-column: 1;
}
.hero-campaign-slider-block .swiper-slide .slide-card .slide-card__content .slide-card__tag {
  display: inline-block;
  margin-bottom: 8px;
}
@media (min-width: 576px) {
  .hero-campaign-slider-block .swiper-slide .slide-card .slide-card__content .slide-card__tag {
    margin-block-end: 20px;
  }
}
.hero-campaign-slider-block .swiper-slide .slide-card .slide-card__content .slide-card__headline {
  margin: 0 0 8px 0;
  transform: none;
}
@media (min-width: 576px) {
  .hero-campaign-slider-block .swiper-slide .slide-card .slide-card__content .slide-card__headline {
    margin-block-end: 20px;
  }
}
.hero-campaign-slider-block .swiper-slide .slide-card .slide-card__content .slide-card__description {
  margin-block-end: 8px;
}
@media (min-width: 1024px) {
  .hero-campaign-slider-block .swiper-slide .slide-card .slide-card__content .slide-card__description {
    max-width: 450px;
  }
}
@media (min-width: 576px) {
  .hero-campaign-slider-block .swiper-slide .slide-card .slide-card__content .slide-card__description {
    margin-block-end: 20px;
  }
}
.hero-campaign-slider-block .swiper-slide .slide-card .slide-card__content span.btn {
  cursor: inherit;
}

.slide-card__image-wrapper {
  display: none;
}
@media (min-width: 1024px) {
  .slide-card__image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: 1;
    grid-column: 2;
  }
}
.slide-card__image-wrapper img {
  max-width: 100%;
  height: auto;
}

.category-grid-block {
  padding: 2rem 0;
}
@media (min-width: 769px) {
  .category-grid-block {
    padding: 3rem 0;
  }
}
.category-grid-block .category-grid {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  gap: 12px 30px;
  margin: auto;
  justify-content: center;
}
@media (min-width: 576px) {
  .category-grid-block .category-grid {
    gap: 12px 40px;
    grid-template-columns: repeat(3, 140px);
  }
}
@media (min-width: 1120px) {
  .category-grid-block .category-grid {
    grid-template-columns: repeat(6, 140px);
  }
}
.category-grid-block .category-grid .category-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.category-grid-block .category-grid .category-grid-item:hover {
  transform: translateY(-5px);
}
.category-grid-block .category-grid .category-grid-item .category-grid-item__image-wrapper {
  background-color: var(--Blue-2_Dark);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 60px;
}
@media (min-width: 576px) {
  .category-grid-block .category-grid .category-grid-item .category-grid-item__image-wrapper {
    width: 140px;
    height: 120px;
    border-radius: 16px;
  }
}
.category-grid-block .category-grid .category-grid-item .category-grid-item__image-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.category-grid-block .category-grid .category-grid-item .category-grid-item__label {
  font-size: clamp(0.75rem, 0.75rem + 0.375rem * (100vw - 20rem) / 70, 1.125rem);
  line-height: clamp(1.125rem, 1.125rem + 0.875rem * (100vw - 20rem) / 70, 2rem);
  font-weight: 400;
  color: var(--Blue-2_Dark);
  text-align: center;
}

.featured-category-block {
  background-color: var(--Blue-2_Mid);
}
.featured-category-block .featured-category__container {
  display: flex;
  gap: 4rem;
  justify-content: space-between;
}
@media (max-width: 991px) {
  .featured-category-block .featured-category__container {
    flex-direction: column;
    gap: 2rem;
  }
}
@media (max-width: 575px) {
  .featured-category-block .featured-category__container {
    gap: 0px;
  }
}
.featured-category-block .featured-category__container .featured-category__content {
  max-width: 500px;
  flex-shrink: 0;
  color: var(--White);
}
.featured-category-block .featured-category__container .featured-category__content .featured-category-block__label {
  margin-block-end: 8px;
}
.featured-category-block .featured-category__container .featured-category__content .featured-category-block__label .label {
  background-color: var(--Blue-2_Light);
  color: var(--White);
}
@media (min-width: 576px) {
  .featured-category-block .featured-category__container .featured-category__content .featured-category-block__label {
    margin-block-end: 28px;
  }
}
.featured-category-block .featured-category__container .featured-category__content .featured-category__description {
  margin-block-start: 8px;
}
@media (min-width: 576px) {
  .featured-category-block .featured-category__container .featured-category__content .featured-category__description {
    margin-block-start: 28px;
  }
}
.featured-category-block .featured-category__container .featured-category__content .featured-category__cta-area {
  margin-block-start: 8px;
}
@media (min-width: 576px) {
  .featured-category-block .featured-category__container .featured-category__content .featured-category__cta-area {
    margin-block-start: 28px;
  }
}
.featured-category-block .featured-category__container .featured-category__content .featured-category__pre-button-text {
  margin-block: 8px 24px;
}
@media (min-width: 576px) {
  .featured-category-block .featured-category__container .featured-category__content .featured-category__pre-button-text {
    margin-block-start: 28px;
  }
}
.featured-category-block .featured-category__container .featured-category-block__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-block-start: 24px;
}
@media (min-width: 576px) {
  .featured-category-block .featured-category__container .featured-category-block__actions {
    margin-block-start: 28px;
  }
}
.featured-category-block .featured-category__container .featured-category-block__actions.desktop {
  display: none;
}
@media (min-width: 576px) {
  .featured-category-block .featured-category__container .featured-category-block__actions.desktop {
    display: flex;
  }
}
@media (min-width: 576px) {
  .featured-category-block .featured-category__container .featured-category-block__actions.mobile {
    display: none;
  }
}
@media (max-width: 575px) {
  .featured-category-block .featured-category__container .featured-category-block__actions.mobile {
    margin-block-start: 24px;
  }
}
.featured-category-block .featured-category__container .featured-category-block__actions.mobile .btn {
  display: block;
  width: 48%;
}
.featured-category-block .featured-category__container .featured-category-block__actions.mobile .btn:only-child {
  width: 100%;
}
@media (max-width: 575px) {
  .featured-category-block .featured-category__container .featured-category-grid {
    margin-block-start: 24px;
  }
}
.featured-category-block .featured-category__container .featured-category-grid {
  display: flex;
}
@media (max-width: 576px) {
  .featured-category-block .featured-category__container .featured-category-grid {
    margin-block-start: 0;
  }
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--4,
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--9 {
  display: grid;
  gap: 3px;
  margin: auto;
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--4 .featured-category-grid__image-link,
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--9 .featured-category-grid__image-link {
  display: block;
  overflow: hidden;
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--4 .featured-category-grid__image-link img,
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--9 .featured-category-grid__image-link img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--4 .featured-category-grid__image-link:hover img,
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--9 .featured-category-grid__image-link:hover img {
  transform: scale(1.05);
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--4 {
  display: grid;
  grid-template-columns: repeat(2, 128px);
  grid-template-rows: repeat(2, 128px);
  gap: 16px;
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 576px) {
  .featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--4 {
    grid-template-columns: repeat(2, 240px);
    grid-template-rows: repeat(2, 240px);
    gap: 32px;
  }
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--4 .featured-category-grid__more-link {
  background-color: var(--Blue-2_Dark);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 128px;
  height: 128px;
  border-radius: 12px;
}
@media (min-width: 576px) {
  .featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--4 .featured-category-grid__more-link {
    width: 240px;
    height: 240px;
    border-radius: 20px;
  }
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--4 .featured-category-grid__image-link {
  width: 128px;
  height: 128px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
@media (min-width: 576px) {
  .featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--4 .featured-category-grid__image-link {
    width: 240px;
    height: 240px;
    border-radius: 20px;
  }
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--4 .featured-category-grid__image-link img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--9 {
  grid-template-columns: repeat(3, 88.67px);
  grid-template-rows: repeat(3, 112px);
  background-color: var(--Blue-2_Mid);
  border-radius: 36px;
  overflow: hidden;
}
@media (min-width: 576px) {
  .featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--9 {
    grid-template-columns: repeat(3, 133px);
    grid-template-rows: repeat(3, 168px);
  }
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--9 .featured-category-grid__image-link {
  border-radius: 0px;
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--9 .featured-category-grid__image-link {
  width: 88.67px;
  height: 112px;
}
@media (min-width: 576px) {
  .featured-category-block .featured-category__container .featured-category-grid .featured-category-grid--9 .featured-category-grid__image-link {
    width: 133px;
    height: 168px;
  }
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid__image-link {
  box-shadow: var(--D-DarkCard);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--Blue-2_Dark);
}
@media (min-width: 992px) {
  .featured-category-block .featured-category__container .featured-category-grid .featured-category-grid__image-link {
    width: 100%;
    max-width: 240px;
    border-radius: 20px;
  }
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid__image-link img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid__more-link {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--Blue_Mid);
  text-decoration: none;
  color: var(--White);
  transition: all 0.2s ease;
  padding-block: 3rem;
  box-shadow: var(--D-DarkCard);
  border-radius: 12px;
  background-color: var(--Blue-2_Dark);
}
@media (min-width: 992px) {
  .featured-category-block .featured-category__container .featured-category-grid .featured-category-grid__more-link {
    width: 100%;
    max-width: 240px;
    border-radius: 20px;
  }
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid__more-link:hover {
  background-color: var(--Blue-2_Mid);
  color: #fff;
}
.featured-category-block .featured-category__container .featured-category-grid .featured-category-grid__more-link .count-label {
  margin-inline-start: 4px;
}

/**
 * ========================================================================
 * Block: Image Hero
 * ========================================================================
 */
.image-hero-block {
  position: relative;
  background-size: cover;
  background-position: center center;
  color: var(--White);
}
.image-hero-block .image-hero-block__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 24, 39, 0.7);
  /* Dark overlay */
  z-index: 1;
}
.image-hero-block .image-hero-block__container {
  position: relative;
  /* To appear above the overlay */
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 50vh;
}
.image-hero-block .image-hero-block__container .image-hero-block__content {
  flex-basis: 50%;
  padding-right: 2rem;
}
@media (max-width: 992px) {
  .image-hero-block .image-hero-block__container .image-hero-block__content {
    flex-basis: 100%;
    padding-right: 0;
  }
}
.image-hero-block .image-hero-block__container .image-hero-block__content .image-hero-block__label {
  margin-block-end: 16px;
}
@media (min-width: 992px) {
  .image-hero-block .image-hero-block__container .image-hero-block__content .image-hero-block__label {
    margin-block-end: 28px;
  }
}
.image-hero-block .image-hero-block__container .image-hero-block__content .image-hero-block__label .label {
  background-color: var(--Blue-2_Light);
  color: var(--White);
}
.image-hero-block .image-hero-block__container .image-hero-block__content .image-hero-block__logo {
  width: 100%;
  max-width: 144px;
  margin-block-end: 16px;
}
@media (min-width: 992px) {
  .image-hero-block .image-hero-block__container .image-hero-block__content .image-hero-block__logo {
    margin-block-end: 28px;
  }
}
@media (max-width: 992px) {
  .image-hero-block .image-hero-block__container .image-hero-block__content .image-hero-block__logo {
    margin-left: auto;
    margin-right: auto;
  }
}
.image-hero-block .image-hero-block__container .image-hero-block__content .image-hero-block__description {
  margin-block-start: 16px;
}
@media (min-width: 992px) {
  .image-hero-block .image-hero-block__container .image-hero-block__content .image-hero-block__description {
    margin-block-start: 28px;
  }
}
.image-hero-block .image-hero-block__container .image-hero-block__content .image-hero-block__actions {
  margin-block-start: 16px;
}
@media (min-width: 992px) {
  .image-hero-block .image-hero-block__container .image-hero-block__content .image-hero-block__actions {
    margin-block-start: 28px;
  }
}
.image-hero-block .image-hero-block__container .image-hero-block__empty-column {
  flex-basis: 50%;
}
@media (max-width: 992px) {
  .image-hero-block .image-hero-block__container .image-hero-block__empty-column {
    display: none;
  }
}

.spacer-block {
  width: 100%;
  display: block;
  height: var(--spacer-height-mobile, 40px);
}
@media (min-width: 768px) {
  .spacer-block {
    height: var(--spacer-height-desktop, 80px);
  }
}

.universal-block {
  position: relative;
  padding: 4rem 0;
  background-size: cover;
  background-position: center;
  background-image: var(--bg-mobile, none);
}
@media (min-width: 1024px) {
  .universal-block {
    background-image: var(--bg-desktop, none);
  }
}
.universal-block__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.universal-block__container {
  position: relative;
  z-index: 2;
}
@media (min-width: 992px) {
  .universal-block__container {
    flex-direction: row;
  }
  .universal-block__container .universal-block__content {
    width: 37%;
  }
}
@media (max-width: 575px) {
  .universal-block__container {
    gap: 0px;
  }
}
.universal-block__container .universal-block__content .universal-block__label,
.universal-block__container .universal-block__content .universal-block__headline,
.universal-block__container .universal-block__content .universal-block__subheading,
.universal-block__container .universal-block__content .universal-block__description {
  margin-block-end: 8px;
}
@media (min-width: 576px) {
  .universal-block__container .universal-block__content .universal-block__label,
  .universal-block__container .universal-block__content .universal-block__headline,
  .universal-block__container .universal-block__content .universal-block__subheading,
  .universal-block__container .universal-block__content .universal-block__description {
    margin-block-end: 28px;
  }
}
.universal-block__container .campaign-card {
  border: 10px solid #fff;
  border-radius: 15.12px;
  display: block;
  background-color: #fff;
  height: 100%;
  box-shadow: var(--D-Lightcard);
}
@media (min-width: 576px) {
  .universal-block__container .campaign-card {
    border-radius: 20px;
  }
}
.universal-block__container .campaign-card .campaign-card__image {
  width: 100%;
  border-radius: 6px;
  height: 100%;
}
.universal-block.layout-1_col .universal-block__container {
  grid-template-columns: 1fr;
}
.universal-block.layout-1_col .universal-block__actions-wrapper {
  align-items: center;
}
.universal-block.layout-2_col .universal-block__container {
  grid-template-columns: 1fr;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.universal-block.layout-2_col .universal-block__container .universal-block__media {
  width: 100%;
}
@media (min-width: 992px) {
  .universal-block.layout-2_col .universal-block__container {
    grid-template-columns: 1fr 1fr;
    flex-direction: row;
    gap: 96px;
  }
  .universal-block.layout-2_col .universal-block__container .universal-block__media {
    width: 63%;
  }
}
@media (max-width: 575px) {
  .universal-block .universal-block__media {
    margin-block-start: 24px;
  }
}
.universal-block__actions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
@media (min-width: 576px) {
  .universal-block__actions-wrapper {
    gap: 28px;
  }
}
.universal-block__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
@media (min-width: 576px) {
  .universal-block__buttons {
    margin-block-end: 28px;
  }
}
.universal-block__buttons.desktop {
  display: none;
}
@media (min-width: 576px) {
  .universal-block__buttons.desktop {
    display: flex;
  }
}
@media (min-width: 576px) {
  .universal-block__buttons.mobile {
    display: none;
  }
}
@media (max-width: 576px) {
  .universal-block__buttons.mobile {
    margin-block-start: 24px;
  }
}
.universal-block__buttons.mobile .btn {
  justify-content: center;
}
.universal-block__buttons.mobile > :first-child:nth-last-child(odd), .universal-block__buttons.mobile > :first-child:nth-last-child(odd) ~ * {
  width: 100%;
}
.universal-block__buttons.mobile {
  /* Same logic for EVEN total */
}
.universal-block__buttons.mobile > :first-child:nth-last-child(even), .universal-block__buttons.mobile > :first-child:nth-last-child(even) ~ * {
  width: 48%;
}
.universal-block__single-image {
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.universal-block .featured-category-grid {
  display: flex;
}
@media (max-width: 991px) {
  .universal-block .featured-category-grid {
    margin-block-start: 16px;
  }
}
.universal-block .featured-category-grid .featured-category-grid--4,
.universal-block .featured-category-grid .featured-category-grid--9 {
  display: grid;
  gap: 3px;
  margin: auto;
}
.universal-block .featured-category-grid .featured-category-grid--4 .featured-category-grid__image-link,
.universal-block .featured-category-grid .featured-category-grid--9 .featured-category-grid__image-link {
  display: block;
  overflow: hidden;
}
.universal-block .featured-category-grid .featured-category-grid--4 .featured-category-grid__image-link img,
.universal-block .featured-category-grid .featured-category-grid--9 .featured-category-grid__image-link img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}
.universal-block .featured-category-grid .featured-category-grid--4 .featured-category-grid__image-link:hover img,
.universal-block .featured-category-grid .featured-category-grid--9 .featured-category-grid__image-link:hover img {
  transform: scale(1.05);
}
.universal-block .featured-category-grid .featured-category-grid--4 {
  display: grid;
  grid-template-columns: repeat(2, 128px);
  grid-template-rows: repeat(2, 128px);
  gap: 16px;
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 576px) {
  .universal-block .featured-category-grid .featured-category-grid--4 {
    grid-template-columns: repeat(2, 240px);
    grid-template-rows: repeat(2, 240px);
    gap: 32px;
  }
}
.universal-block .featured-category-grid .featured-category-grid--4 .featured-category-grid__more-link {
  background-color: var(--Blue-2_Dark);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 128px;
  height: 128px;
  border-radius: 12px;
}
@media (min-width: 576px) {
  .universal-block .featured-category-grid .featured-category-grid--4 .featured-category-grid__more-link {
    width: 240px;
    height: 240px;
    border-radius: 20px;
  }
}
.universal-block .featured-category-grid .featured-category-grid--4 .featured-category-grid__image-link {
  width: 128px;
  height: 128px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
@media (min-width: 576px) {
  .universal-block .featured-category-grid .featured-category-grid--4 .featured-category-grid__image-link {
    width: 240px;
    height: 240px;
    border-radius: 20px;
  }
}
.universal-block .featured-category-grid .featured-category-grid--4 .featured-category-grid__image-link img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.universal-block .featured-category-grid .featured-category-grid--9 {
  grid-template-columns: repeat(3, 88.67px);
  grid-template-rows: repeat(3, 112px);
  background-color: var(--Blue-2_Mid);
  border-radius: 36px;
  overflow: hidden;
}
@media (min-width: 576px) {
  .universal-block .featured-category-grid .featured-category-grid--9 {
    grid-template-columns: repeat(3, 133px);
    grid-template-rows: repeat(3, 168px);
  }
}
.universal-block .featured-category-grid .featured-category-grid--9 .featured-category-grid__image-link {
  border-radius: 0px;
}
.universal-block .featured-category-grid .featured-category-grid--9 .featured-category-grid__image-link {
  width: 88.67px;
  height: 112px;
}
@media (min-width: 576px) {
  .universal-block .featured-category-grid .featured-category-grid--9 .featured-category-grid__image-link {
    width: 133px;
    height: 168px;
  }
}
.universal-block .featured-category-grid .featured-category-grid__image-link {
  box-shadow: var(--D-DarkCard);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--Blue-2_Dark);
}
@media (min-width: 992px) {
  .universal-block .featured-category-grid .featured-category-grid__image-link {
    width: 100%;
    max-width: 240px;
    border-radius: 20px;
  }
}
.universal-block .featured-category-grid .featured-category-grid__image-link img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
.universal-block .featured-category-grid .featured-category-grid__more-link {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--Blue_Mid);
  text-decoration: none;
  color: var(--White);
  transition: all 0.2s ease;
  padding-block: 3rem;
  box-shadow: var(--D-DarkCard);
  border-radius: 12px;
  background-color: var(--Blue-2_Dark);
}
@media (min-width: 992px) {
  .universal-block .featured-category-grid .featured-category-grid__more-link {
    width: 100%;
    max-width: 240px;
    border-radius: 20px;
  }
}
.universal-block .featured-category-grid .featured-category-grid__more-link:hover {
  background-color: var(--Blue-2_Mid);
  color: #fff;
}
.universal-block .featured-category-grid .featured-category-grid__more-link .count-label {
  margin-inline-start: 4px;
}

.universal-image-slider {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.universal-image-slider img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 4/3;
}

.category-description-wrapper {
  margin-block: 1rem 2rem;
}
.category-description-wrapper .category-description-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.category-description-wrapper .category-description-content.is-clamped {
  -webkit-line-clamp: 3;
  /* The number of lines to show */
}
.category-description-wrapper .see-more-less {
  cursor: pointer;
  color: #0073aa;
  /* Example color */
  text-decoration: underline;
  display: none;
  /* Hidden by default, shown with JS if needed */
}

.top-promo-bar .top-promo-bar__inner {
  align-content: center;
  min-height: 38px;
}
.top-promo-bar .top-promo-bar__inner p {
  margin-block: 0px;
  text-align: center;
  font-weight: 600;
}