/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *


*/
@font-face {
  font-family: 'Graphik';
  src: url(/assets/fonts/graphik/graphik-regular-web-c7082d25f64535de0c880797e4bc11152068f288bca526596a88c23a1e4f3990.woff2) format("woff2"), url(/assets/fonts/graphik/graphik-regular-web-aaa16f3783b8c10187beebf9d50da9d43d4cd7bcd056f34096e4e7149d61557c.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik Medium';
  src: url(/assets/fonts/graphik/graphik-medium-web-6b8bedb9e668f9999472b0ae51bda3f1b66885ec82cf38b66c958ab4f241416d.woff2) format("woff2"), url(/assets/fonts/graphik/graphik-medium-web-e136444947e6077440ceeef67ab143afd9276a58aeea90279cc0ceee6e155de1.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik Semibold';
  src: url(/graphik/graphik-semibold-web.woff2) format("woff2"), url(/graphik/graphik-semibold-web.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BradFordLL';
  src: url(/assets/fonts/bradford/bradford-ll-web-regular-6fcc315011bee97f8a42ba2e22300e53544d760bc82027157cf7435549ab2699.woff2) format("woff2"), url(/assets/fonts/bradford/bradford-ll-web-regular-be2f48866f815a08f8df27f89d27e68b519dd508b4f7961979b764ac27a8fbb6.woff) format("woff");
  font-display: swap;
}

@font-face {
  font-family: 'BradFordLL Medium';
  src: url(/assets/fonts/bradford/bradford-ll-web-medium-6d0bc64de1d0ead9f18bea9c35f6f5257326eeda2d28e4fe082e48306db0caf8.woff2) format("woff2"), url(/assets/fonts/bradford/bradford-ll-web-medium-e771c4a6a4ba65b90afd0a9ca7475462fa553f5f607d6b40cc69cea78d925c93.woff) format("woff");
  font-display: swap;
}

@font-face {
  font-family: 'BradfordLL Book';
  src: url(/assets/fonts/bradford/bradford-ll-web-book-4bc5719b087b2ba94e9a5a6783c5b663af1b274afec68421f5b383eb3bc12f46.woff) format("woff2"), url(/assets/fonts/bradford/bradford-ll-web-book-4bc5719b087b2ba94e9a5a6783c5b663af1b274afec68421f5b383eb3bc12f46.woff) format("woff");
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Light';
  src: url(/assets/fonts/roboto/Roboto-Light-f9fa74579e22ed6f4f54e7a2e89883b0f6db5779bb7961e04eb60741bf3b730b.ttf) format("ttf");
}

/* line 3, app/assets/stylesheets/screen.scss */
.chab-bcol {
  background-color: #ffffff;
}

/* line 7, app/assets/stylesheets/screen.scss */
h1.checkout-title {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 400;
  font-size: 44px;
  color: #000000;
}

/* line 14, app/assets/stylesheets/screen.scss */
.checkout-sub-title {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 400;
  font-size: 30px;
  color: #000000;
}

/* line 21, app/assets/stylesheets/screen.scss */
.taxon-title {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 400;
  font-size: 44px;
  color: #000000;
}

/* line 28, app/assets/stylesheets/screen.scss */
.taxon-subtitle {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 400;
  font-size: 26px;
  color: #000000;
}

/* line 35, app/assets/stylesheets/screen.scss */
.taxon-text {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 300;
  font-size: 22px;
  color: #000000;
}

/* line 42, app/assets/stylesheets/screen.scss */
.home-page-header-text {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 400;
  font-size: 44px;
  color: #000000;
}

/* line 49, app/assets/stylesheets/screen.scss */
.home-page-sub-header-text {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 400;
  font-size: 28px;
  color: #000000;
}

/* line 56, app/assets/stylesheets/screen.scss */
.home-page-text {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 300;
  font-size: 24px;
  color: #000000;
}

/* line 63, app/assets/stylesheets/screen.scss */
.product-alternatives-text {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 400;
  font-size: 40px;
  color: #000000;
}

/* used in the square containers where products are displayed on homepage
.info {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 300;
}









/* Add these at the end of your existing app/assets/builds/tailwind.css file */
/* line 86, app/assets/stylesheets/screen.scss */
.p-8 {
  /* For the main overlay container's padding */
  padding: 2rem;
  /* 2rem is typically p-8 in Tailwind */
}

/* line 90, app/assets/stylesheets/screen.scss */
.custom-bg-opacity {
  --tw-bg-opacity: 0.75;
  /* Tailwind uses CSS variables for opacity */
  /* Assuming bg-black provides: background-color: rgb(0 0 0 / var(--tw-bg-opacity)); */
  /* If bg-black is just background-color: #000; then this won't work directly.
     A simpler manual approach for bg-opacity: */
  background-color: rgba(0, 0, 0, 0.15);
  /* If bg-black is also present, this might need to override it or bg-black removed from HTML */
}

/* If you keep bg-black in HTML and want to use the CSS variable method (more robust if bg-black is complex): */
/* Ensure your .bg-black rule looks something like this (it probably does if generated by Tailwind):
.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
Then you only need to add:
.custom-bg-opacity { --tw-bg-opacity: 0.75; }
For the div that has both .bg-black and .custom-bg-opacity, the 0.75 opacity will be used.
*/
/* line 110, app/assets/stylesheets/screen.scss */
.custom-rounded {
  border-radius: 0.5rem;
  /* .rounded-lg */
}

/* line 114, app/assets/stylesheets/screen.scss */
.custom-shadow {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  /* shadow-xl */
}

/* line 118, app/assets/stylesheets/screen.scss */
.max-w-3xl-custom {
  max-width: 48rem;
  /* 3xl */
}

/* line 122, app/assets/stylesheets/screen.scss */
.custom-h1-text {
  font-size: 2.75rem;
  /* close to text-3xl or text-4xl */
  line-height: 1.2rem;
  font-weight: 700;
  /* bold */
  color: #383535;
}

/* line 129, app/assets/stylesheets/screen.scss */
.video-overlay-title {
  font-family: "Helvetica Neue", Helvetica;
  font-size: 2.75rem;
  /* close to text-3xl or text-4xl */
  line-height: 1.2rem;
  font-weight: 700;
  /* bold */
  color: #fffff;
}

/* line 137, app/assets/stylesheets/screen.scss */
.video-overlay-text {
  font-family: "Helvetica Neue", Helvetica;
  font-size: 1.5rem;
  /* close to text-3xl or text-4xl */
  line-height: 1.2rem;
  font-weight: 500;
  /* bold */
  color: #fffff;
}

/* line 145, app/assets/stylesheets/screen.scss */
.video-overlay-spacer-top {
  flex-grow: 2.5;
}

/* line 149, app/assets/stylesheets/screen.scss */
.video-overlay-spacer-bottom {
  flex-grow: 0.5;
}

/* line 153, app/assets/stylesheets/screen.scss */
.custom-hero-height {
  height: 66vh;
}

/* line 157, app/assets/stylesheets/screen.scss */
.custom-hero-height > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 163, app/assets/stylesheets/screen.scss */
.custom-hero-height-shorter {
  height: 50vh;
}

/* line 167, app/assets/stylesheets/screen.scss */
.custom-hero-height-shorter > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 173, app/assets/stylesheets/screen.scss */
.mb-4 {
  /* Margin bottom */
  margin-bottom: 1rem;
}

/* line 177, app/assets/stylesheets/screen.scss */
.custom-leading-tight {
  /* For h1 */
  line-height: 1.25;
}

/* line 181, app/assets/stylesheets/screen.scss */
.custom-p-text {
  font-size: 1.125rem;
  /* close to text-lg */
  line-height: 1.75rem;
}

/* line 186, app/assets/stylesheets/screen.scss */
.custom-leading-relaxed {
  /* For p */
  line-height: 1.625;
}

/* line 190, app/assets/stylesheets/screen.scss */
.custom-desktop-one-third {
  width: 100%;
}

/* line 194, app/assets/stylesheets/screen.scss */
.custom-desktop-two-thirds {
  width: 100%;
}

/* line 198, app/assets/stylesheets/screen.scss */
.black-line {
  width: 100%;
  height: 1px;
  background-color: black;
  border: none;
}

/* line 205, app/assets/stylesheets/screen.scss */
.custom-anthracite-button {
  display: inline-block;
  /* Allows padding, margins, etc. */
  background-color: #2D3748;
  /* Anthracite Grey - Tailwind's gray-800 equivalent */
  color: #FFFFFF;
  /* White text */
  font-weight: 600;
  /* Corresponds to font-semibold */
  padding-top: 0.5rem;
  /* 8px - equivalent to py-2 */
  padding-bottom: 0.5rem;
  /* 8px - equivalent to py-2 */
  padding-left: 1rem;
  /* 16px - equivalent to px-4 */
  padding-right: 1rem;
  /* 16px - equivalent to px-4 */
  border-radius: 0.5rem;
  /* Rounded corners - equivalent to rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  /* Shadow - equivalent to shadow-md */
  text-decoration: none;
  /* Removes underline from the link */
  transition: background-color 0.15s ease-in-out;
  /* Smooth hover transition */
}

/* line 220, app/assets/stylesheets/screen.scss */
.custom-anthracite-button:hover {
  background-color: #1A202C;
  /* Darker Anthracite/Black - Tailwind's gray-900 equivalent */
  color: #FFFFFF;
  /* Ensure text remains white on hover */
}

/* Optional: Focus state for accessibility */
/* line 226, app/assets/stylesheets/screen.scss */
.custom-anthracite-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.5);
  /* Example focus ring, adjust color as needed */
}

/* Ensure .text-center and .text-white are already in your tailwind.css from previous work, or add: */
/* line 233, app/assets/stylesheets/screen.scss */
.text-center {
  text-align: center;
}

/* line 234, app/assets/stylesheets/screen.scss */
.text-white {
  color: #fff;
}

@media (min-width: 601px) {
  /* line 237, app/assets/stylesheets/screen.scss */
  .custom-hero-height {
    height: 100vh;
  }
  /* line 240, app/assets/stylesheets/screen.scss */
  .custom-hero-height-shorter {
    height: 50vh;
  }
  /* line 243, app/assets/stylesheets/screen.scss */
  .custom-desktop-one-third {
    width: 33.3333333%;
  }
  /* line 246, app/assets/stylesheets/screen.scss */
  .custom-desktop-two-thirds {
    width: 66.6666666%;
  }
  /* line 250, app/assets/stylesheets/screen.scss */
  .desktop-margin-right-for-gap {
    margin-right: 50px;
  }
  /* line 254, app/assets/stylesheets/screen.scss */
  .desktop-margin-left-for-gap {
    margin-left: 50px;
  }
  /* line 258, app/assets/stylesheets/screen.scss */
  .desktop-margin-right-for-long-gap {
    margin-right: 100px;
  }
  /* line 262, app/assets/stylesheets/screen.scss */
  .desktop-margin-left-for-long-gap {
    margin-left: 80px;
  }
  /* line 266, app/assets/stylesheets/screen.scss */
  .desktop-big-margin-right-for-gap {
    margin-right: 80px;
  }
  /* line 270, app/assets/stylesheets/screen.scss */
  .desktop-big-margin-left-for-gap {
    margin-left: 200px;
  }
}

@media (max-width: 600px) {
  /* line 276, app/assets/stylesheets/screen.scss */
  .home-page-header-text {
    font-size: 34px;
  }
  /* line 277, app/assets/stylesheets/screen.scss */
  .taxon-title {
    font-size: 34px;
  }
  /* line 278, app/assets/stylesheets/screen.scss */
  .product-alternatives-text {
    font-size: 28px;
  }
  /* line 279, app/assets/stylesheets/screen.scss */
  .video-overlay-title {
    font-size: 1.2rem;
  }
  /* line 280, app/assets/stylesheets/screen.scss */
  .video-overlay-text {
    font-size: 1rem;
  }
  /* line 281, app/assets/stylesheets/screen.scss */
  .home-page-sub-header-text {
    font-size: 26px;
  }
  /* line 282, app/assets/stylesheets/screen.scss */
  .mobile-margin-left-for-gap {
    margin-left: 32px;
  }
  /* line 283, app/assets/stylesheets/screen.scss */
  .mobile-margin-right-for-gap {
    margin-right: 32px;
  }
}

@media (orientation: landscape) and (max-height: 767px) {
  /* line 288, app/assets/stylesheets/screen.scss */
  .video-overlay-spacer-top {
    flex-grow: 0;
  }
  /* line 291, app/assets/stylesheets/screen.scss */
  .video-overlay-spacer-bottom {
    flex-grow: 1.5;
  }
}
/*
Placeholder manifest file.
the installer will append this file to the app vendored assets here: 'vendor/assets/stylesheets/spree/frontend/all.css'
*/

.solidus-stripe-payment {
  padding: 1em 0;
}

[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *
 * spree/frontend/all points to the
 * `vendor/assets/stylesheets/spree/frontend/all.css` file generated by
 * `solidus:install`. See `setup_assets` at
 * https://github.com/solidusio/solidus/blob/main/core/lib/generators/solidus/install/install_generator.rb

 *


*/