.text-body-med {
  font-size: 1.25rem;
  line-height: 120%;
}

.align-bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.width-75 {
  width: 75%;
}

.force-vertical-center {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.force-text-black {
  color: rgb(0, 0, 0);
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html,
  body {
    @apply box-border max-w-full antialiased scroll-smooth bg-sand;
    @apply dark:bg-black dark:text-sand;
  }
}

@layer components {
  .wrapper {
    @apply my-0 mx-auto py-0 px-5;
    @apply md:px-6 md:max-w-screen-2xl 2xl:px-0;
  }

  .wrapper-mobile-fullwidth {
    @apply my-0 mx-auto py-0 px-0;
    @apply lg:px-[30px] md:max-w-screen-2xl 2xl:px-0;
  }

  .grid-container {
    @apply grid grid-cols-4 gap-4;
    @apply md:grid-cols-12 md:gap-7;
  }

  .button-primary {
    @apply w-fit py-3 px-7 rounded-full text-body-sm font-sans-md tracking-wider leading-none uppercase whitespace-nowrap transition-colors duration-200 bg-red-500 text-white hover:bg-red-700;
  }

  .categories-menu ul {
    @apply flex flex-col lg:flex-row justify-center p-0 space-y-8 lg:space-y-0 lg:space-x-4 xl:space-x-6 font-medium text-body lg:items-center;
  }

  .categories-menu ul li.current a {
    @apply text-primary;
  }

  /* Inputs */
  .text-input input {
    @apply relative flex items-center justify-start border border-gray-mid rounded px-4 py-3 placeholder:text-gray-500 text-black w-full;
    @apply hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-1 focus:ring-black/20 focus:border-gray-400;
    @apply dark:bg-gray-800 dark:border-gray-600 dark:text-sand dark:placeholder:text-gray-400 dark:focus:ring-white/30;
  }

  .text-input label {
    @apply text-body-sm font-normal mb-1;
  }

  .select-input {
    @apply flex flex-col gap-y-0.5 text-black;
  }

  .select-input select {
    @apply border-gray-mid rounded px-4 py-3 w-full cursor-pointer text-black;
    @apply hover:border-gray-400 focus:outline-none focus:ring focus:ring-black/20 focus:border-gray-400;
    @apply dark:bg-gray-800 dark:border-gray-600 dark:text-sand dark:placeholder:text-gray-400;
  }

  .checkbox-input {
    @apply flex items-center gap-x-2
  }
  
  input[type=checkbox] {
    @apply text-black rounded dark:checked:invert;
  }

  [type=radio] {
    @apply w-5 h-5 text-black border-gray-300 border-2 checked:border-black dark:checked:invert;
  }

  input[type=search] {
    border-width: 0;
  }

  input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M8.99956 7.93906L12.7121 4.22656L13.7726 5.28706L10.0601 8.99956L13.7726 12.7121L12.7121 13.7726L8.99956 10.0601L5.28706 13.7726L4.22656 12.7121L7.93906 8.99956L4.22656 5.28706L5.28706 4.22656L8.99956 7.93906Z' fill='%23737373'/%3E%3C/svg%3E");
    cursor: pointer;
  }

  /* Theme switcher component */
  .theme-switcher {
    @apply relative flex items-center w-14 h-7 py-0.5 px-2 rounded-full border border-black bg-black;
    @apply after:bg-sand after:content-[''] after:rounded-full after:h-[22px] after:w-[22px] after:transition-all after:translate-x-[120%];
    @apply dark:bg-sand;
    @apply peer-focus:outline-none;
  }

  /* Flash Messages */
  .flash {
    @apply rounded p-3 text-center text-body-sm w-fit h-fit mx-auto md:text-body md:p-4;
    @apply mx-[25px] 2xl:mx-auto;
  }

  .flash.notice,
  .flash.success {
    @apply text-white bg-black dark:text-black dark:bg-white;
  }

  .flash.error,
  .flash.registration_error {
    @apply text-white bg-red-600;
  }

  .checkout .text-input {
    @apply flex flex-col gap-y-1;
  }

  .checkout-header__steps > ol {
    @apply flex;
  }

  .checkout-header__steps > ol > li {
    @apply flex items-center text-body-xs font-sans-md text-gray-500 dark:text-sand last:after:hidden;
  }

  .checkout-header__steps > ol > li::after {
    @apply content-[""] inline-flex w-5 h-5 items-center bg-contain bg-no-repeat bg-center contrast-0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8.11476 8.00005L6.22876 6.11472L7.17143 5.17139L10.0001 8.00005L7.17143 10.8287L6.22876 9.88539L8.11476 8.00005Z' fill='currentColor'/%3E%3C/svg%3E");
  }

  .checkout-header__steps > ol > li:last-child::after {
    content: '';
  }

  .checkout-header__steps > ol > li.current,
  .checkout-header__steps > ol > li.current-first {
    @apply text-red-500;
  }

  /* Badges */

  .badge {
    @apply rounded-full px-3 py-0.5 leading-tight text-center inline-block font-semibold text-body-xs;
  }

  .badge.badge-complete,
  .badge.badge-shipped {
    @apply bg-seafoam text-black;
  }

  .badge.badge-pending,
  .badge.badge-returned {
    @apply bg-yellow text-black;
  }
}

@layer utilities {
  .overflow-x-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .overflow-x-scroll::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .login-or-guest > .grid-container {
    @apply grid-cols-none;
  }
}
@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: '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;
}
@import url("https://rsms.me/inter/inter.css");
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
 * 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.
 *


*/
/*
Placeholder manifest file.
the installer will append this file to the app vendored assets here: 'vendor/assets/stylesheets/spree/frontend/all.css'
*/

#paypal_commerce_platform_overlay{
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100;
}
/*
 * 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

 *


*/
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */