/*
 * Product page utilities (generated).
 *
 * The copied SOLOS templates use Tailwind class names. These are the matching
 * rules from child-theme/dist/tailwind.css and eflow-core/style.css (in that
 * order, as SOLOS loaded them), scoped with :where(.single-product #main) so they cannot
 * affect anything else and keep their original specificity.
 * Regenerate rather than edit by hand.
 */

:where(.single-product #main), :where(.single-product #main) *, :where(.single-product #main) ::before, :where(.single-product #main) ::after {--tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;}
:where(.single-product #main) .container {width: 100%;}
@media (min-width: 400px) {
  :where(.single-product #main) .container {max-width: 400px;}
}
@media (min-width: 640px) {
  :where(.single-product #main) .container {max-width: 640px;}
}
@media (min-width: 768px) {
  :where(.single-product #main) .container {max-width: 768px;}
}
@media (min-width: 1024px) {
  :where(.single-product #main) .container {max-width: 1024px;
    padding-right: 30px;
    padding-left: 30px;}
}
@media (min-width: 1440px) {
  :where(.single-product #main) .container {max-width: 1440px;}
}
:where(.single-product #main) .absolute {position: absolute;}
:where(.single-product #main) .relative {position: relative;}
:where(.single-product #main) .inset-0 {inset: 0px;}
:where(.single-product #main) .left-4 {left: 1rem;}
:where(.single-product #main) .top-0 {top: 0px;}
:where(.single-product #main) .z-\[100\] {z-index: 100;}
:where(.single-product #main) .\!m-0 {margin: 0px !important;}
:where(.single-product #main) .mx-auto {margin-left: auto;
  margin-right: auto;}
:where(.single-product #main) .\!mt-4 {margin-top: 1rem !important;}
:where(.single-product #main) .mb-2 {margin-bottom: 0.5rem;}
:where(.single-product #main) .mb-4 {margin-bottom: 1rem;}
:where(.single-product #main) .mb-5 {margin-bottom: 1.25rem;}
:where(.single-product #main) .ml-1 {margin-left: 0.25rem;}
:where(.single-product #main) .ml-2 {margin-left: 0.5rem;}
:where(.single-product #main) .mr-0\.5 {margin-right: 0.125rem;}
:where(.single-product #main) .mt-0\.5 {margin-top: 0.125rem;}
:where(.single-product #main) .mt-1 {margin-top: 0.25rem;}
:where(.single-product #main) .mt-2 {margin-top: 0.5rem;}
:where(.single-product #main) .mt-4 {margin-top: 1rem;}
:where(.single-product #main) .mt-5 {margin-top: 1.25rem;}
:where(.single-product #main) .mt-px {margin-top: 1px;}
:where(.single-product #main) .block {display: block;}
:where(.single-product #main) .flex {display: flex;}
:where(.single-product #main) .hidden {display: none;}
:where(.single-product #main) .aspect-square {aspect-ratio: 1 / 1;}
:where(.single-product #main) .\!h-auto {height: auto !important;}
:where(.single-product #main) .h-0 {height: 0px;}
:where(.single-product #main) .h-10 {height: 2.5rem;}
:where(.single-product #main) .h-12 {height: 3rem;}
:where(.single-product #main) .h-4\/5 {height: 80%;}
:where(.single-product #main) .h-6 {height: 1.5rem;}
:where(.single-product #main) .h-\[70px\] {height: 70px;}
:where(.single-product #main) .max-h-\[100vw\] {max-height: 100vw;}
:where(.single-product #main) .max-h-\[4rem\] {max-height: 4rem;}
:where(.single-product #main) .\!w-auto {width: auto !important;}
:where(.single-product #main) .\!w-full {width: 100% !important;}
:where(.single-product #main) .w-0 {width: 0px;}
:where(.single-product #main) .w-1\/4 {width: 25%;}
:where(.single-product #main) .w-10 {width: 2.5rem;}
:where(.single-product #main) .w-12 {width: 3rem;}
:where(.single-product #main) .w-6 {width: 1.5rem;}
:where(.single-product #main) .w-\[70px\] {width: 70px;}
:where(.single-product #main) .w-full {width: 100%;}
:where(.single-product #main) .min-w-full {min-width: 100%;}
:where(.single-product #main) .max-w-\[100vw\] {max-width: 100vw;}
:where(.single-product #main) .flex-1 {flex: 1 1 0%;}
:where(.single-product #main) .flex-shrink-0 {flex-shrink: 0;}
:where(.single-product #main) .flex-grow {flex-grow: 1;}
@keyframes ping {75%, 100% {
    transform: scale(2);
    opacity: 0;
  }}
:where(.single-product #main) .cursor-pointer {cursor: pointer;}
:where(.single-product #main) .select-none {-webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;}
:where(.single-product #main) .grid-cols-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
:where(.single-product #main) .flex-col {flex-direction: column;}
:where(.single-product #main) .flex-col-reverse {flex-direction: column-reverse;}
:where(.single-product #main) .items-start {align-items: flex-start;}
:where(.single-product #main) .items-center {align-items: center;}
:where(.single-product #main) .items-stretch {align-items: stretch;}
:where(.single-product #main) .justify-start {justify-content: flex-start;}
:where(.single-product #main) .justify-center {justify-content: center;}
:where(.single-product #main) .gap-4 {gap: 1rem;}
:where(.single-product #main) .overflow-hidden {overflow: hidden;}
:where(.single-product #main) .rounded-sm {border-radius: 0.125rem;}
:where(.single-product #main) .border-t-2 {border-top-width: 2px;}
:where(.single-product #main) .border-none {border-style: none;}
:where(.single-product #main) .border-\[\#ff7800\] {--tw-border-opacity: 1;
  border-color: rgb(255 120 0 / var(--tw-border-opacity, 1));}
:where(.single-product #main) .\!bg-\[\#333333\] {--tw-bg-opacity: 1 !important;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1)) !important;}
:where(.single-product #main) .bg-cover {background-size: cover;}
:where(.single-product #main) .bg-center {background-position: center;}
:where(.single-product #main) .object-contain {-o-object-fit: contain;
     object-fit: contain;}
:where(.single-product #main) .object-cover {-o-object-fit: cover;
     object-fit: cover;}
:where(.single-product #main) .\!px-8 {padding-left: 2rem !important;
  padding-right: 2rem !important;}
:where(.single-product #main) .\!py-4 {padding-top: 1rem !important;
  padding-bottom: 1rem !important;}
:where(.single-product #main) .text-center {text-align: center;}
:where(.single-product #main) .text-4xl {font-size: 2.25rem;
  line-height: 2.5rem;}
:where(.single-product #main) .text-base {font-size: 1rem;
  line-height: 1.5rem;}
:where(.single-product #main) .text-lg {font-size: 1.125rem;
  line-height: 1.75rem;}
:where(.single-product #main) .text-xs {font-size: 0.75rem;
  line-height: 1rem;}
:where(.single-product #main) .font-bold {font-weight: 700;}
:where(.single-product #main) .font-medium {font-weight: 500;}
:where(.single-product #main) .text-white {--tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));}
:where(.single-product #main) .opacity-0 {opacity: 0;}
:where(.single-product #main) .opacity-70 {opacity: 0.7;}
:where(.single-product #main) .transition {transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;}
:where(.single-product #main) .transition-all {transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;}
:where(.single-product #main) .hover\:\!bg-\[\#171717\]:hover {--tw-bg-opacity: 1 !important;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1)) !important;}
:where(.single-product #main) .hover\:\!bg-\[\#333333\]:hover {--tw-bg-opacity: 1 !important;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1)) !important;}
:where(.single-product #main) .hover\:\!text-white:hover {--tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;}
@media (min-width: 640px) {
  :where(.single-product #main) .sm\:mb-0 {margin-bottom: 0px;}
  :where(.single-product #main) .sm\:mr-1 {margin-right: 0.25rem;}
  :where(.single-product #main) .sm\:mr-2 {margin-right: 0.5rem;}
  :where(.single-product #main) .sm\:h-12 {height: 3rem;}
  :where(.single-product #main) .sm\:h-\[100px\] {height: 100px;}
  :where(.single-product #main) .sm\:w-1\/4 {width: 25%;}
  :where(.single-product #main) .sm\:w-12 {width: 3rem;}
  :where(.single-product #main) .sm\:w-\[100px\] {width: 100px;}
  :where(.single-product #main) .sm\:flex-row {flex-direction: row;}
}
@media (min-width: 768px) {
  :where(.single-product #main) .md\:mr-3 {margin-right: 0.75rem;}
  :where(.single-product #main) .md\:mt-0 {margin-top: 0px;}
  :where(.single-product #main) .md\:grid {display: grid;}
  :where(.single-product #main) .md\:max-h-\[50vw\] {max-height: 50vw;}
}
@media (min-width: 1024px) {
  :where(.single-product #main) .lg\:max-h-\[30vw\] {max-height: 30vw;}
  :where(.single-product #main) .lg\:\!w-4\/5 {width: 80% !important;}
}
:where(.single-product #main) .container {width:100%}
@media (min-width:640px) {
  :where(.single-product #main) .container {max-width:640px}
}
@media (min-width:768px) {
  :where(.single-product #main) .container {max-width:768px}
}
@media (min-width:1024px) {
  :where(.single-product #main) .container {max-width:1024px}
}
@media (min-width:1280px) {
  :where(.single-product #main) .container {max-width:1280px}
}
@media (min-width:1536px) {
  :where(.single-product #main) .container {max-width:1536px}
}
:where(.single-product #main) .absolute {position:absolute}
:where(.single-product #main) .relative {position:relative}
:where(.single-product #main) .inset-0 {inset:0}
:where(.single-product #main) .top-0 {top:0}
:where(.single-product #main) .\!m-0 {margin:0!important}
:where(.single-product #main) .mx-auto {margin-left:auto;margin-right:auto}
:where(.single-product #main) .\!mt-4 {margin-top:1rem!important}
:where(.single-product #main) .mb-2 {margin-bottom:.5rem}
:where(.single-product #main) .mb-4 {margin-bottom:1rem}
:where(.single-product #main) .mb-5 {margin-bottom:1.25rem}
:where(.single-product #main) .ml-1 {margin-left:.25rem}
:where(.single-product #main) .ml-2 {margin-left:.5rem}
:where(.single-product #main) .mt-0\.5 {margin-top:.125rem}
:where(.single-product #main) .mt-1 {margin-top:.25rem}
:where(.single-product #main) .mt-2 {margin-top:.5rem}
:where(.single-product #main) .mt-4 {margin-top:1rem}
:where(.single-product #main) .mt-px {margin-top:1px}
:where(.single-product #main) .block {display:block}
:where(.single-product #main) .flex {display:flex}
:where(.single-product #main) .hidden {display:none}
:where(.single-product #main) .\!h-auto {height:auto!important}
:where(.single-product #main) .h-0 {height:0}
:where(.single-product #main) .h-10 {height:2.5rem}
:where(.single-product #main) .h-12 {height:3rem}
:where(.single-product #main) .h-4\/5 {height:80%}
:where(.single-product #main) .h-6 {height:1.5rem}
:where(.single-product #main) .h-\[70px\] {height:70px}
:where(.single-product #main) .\!w-auto {width:auto!important}
:where(.single-product #main) .\!w-full {width:100%!important}
:where(.single-product #main) .w-0 {width:0}
:where(.single-product #main) .w-10 {width:2.5rem}
:where(.single-product #main) .w-12 {width:3rem}
:where(.single-product #main) .w-6 {width:1.5rem}
:where(.single-product #main) .w-\[70px\] {width:70px}
:where(.single-product #main) .w-full {width:100%}
:where(.single-product #main) .min-w-full {min-width:100%}
:where(.single-product #main) .max-w-\[100vw\] {max-width:100vw}
:where(.single-product #main) .flex-1 {flex:1 1 0%}
:where(.single-product #main) .flex-2\/10 {flex:1 0 20%}
@keyframes ping {75%,to{opacity:0;transform:scale(2)}}
:where(.single-product #main) .cursor-pointer {cursor:pointer}
:where(.single-product #main) .select-none {-webkit-user-select:none;-moz-user-select:none;user-select:none}
:where(.single-product #main) .grid-cols-2 {grid-template-columns:repeat(2,minmax(0,1fr))}
:where(.single-product #main) .flex-col {flex-direction:column}
:where(.single-product #main) .items-start {align-items:flex-start}
:where(.single-product #main) .items-center {align-items:center}
:where(.single-product #main) .items-stretch {align-items:stretch}
:where(.single-product #main) .justify-start {justify-content:flex-start}
:where(.single-product #main) .justify-center {justify-content:center}
:where(.single-product #main) .gap-4 {gap:1rem}
:where(.single-product #main) .overflow-hidden {overflow:hidden}
:where(.single-product #main) .\!rounded-df {border-radius:0!important}
:where(.single-product #main) .rounded-df {border-radius:0}
:where(.single-product #main) .border-none {border-style:none}
:where(.single-product #main) .\!bg-success {background-color:var(--success-color)!important}
:where(.single-product #main) .object-contain {-o-object-fit:contain;object-fit:contain}
:where(.single-product #main) .object-cover {-o-object-fit:cover;object-fit:cover}
:where(.single-product #main) .text-center {text-align:center}
:where(.single-product #main) .text-base {font-size:1rem;line-height:1.5rem}
:where(.single-product #main) .text-lg {font-size:1.125rem;line-height:1.75rem}
:where(.single-product #main) .text-xs {font-size:.75rem;line-height:1rem}
:where(.single-product #main) .font-bold {font-weight:700}
:where(.single-product #main) .font-medium {font-weight:500}
:where(.single-product #main) .\!text-accent {color:var(--accent-color)!important}
:where(.single-product #main) .text-accent {color:var(--accent-color)}
:where(.single-product #main) .text-white {--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}
:where(.single-product #main) .opacity-0 {opacity:0}
:where(.single-product #main) .opacity-70 {opacity:.7}
:where(.single-product #main) .transition {transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}
:where(.single-product #main) .transition-all {transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}
:where(.single-product #main) .site-main {margin-bottom:2.617924em}
:where(.single-product #main) .screen-reader-text {clip:rect(1px,1px,1px,1px);word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
:where(.single-product #main) .screen-reader-text:focus {clip:auto!important;background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);display:block;font-weight:700;height:auto;left:0;line-height:normal;outline:none;padding:1em 1.618em;text-decoration:none;top:0;width:auto;z-index:100000}
:where(.single-product #main) .button {--tw-text-opacity:1;--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);background-color:var(--accent-color);border-color:transparent;border-radius:0;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:rgb(255 255 255/var(--tw-text-opacity,1));cursor:pointer;font-size:1rem;font-weight:500;line-height:1.5rem;line-height:1;padding:.5rem 1rem}
:where(.single-product #main) .button:hover {background-color:var(--accent-color-hover)}
:where(.single-product #main) .button:focus {--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--accent-color);--tw-ring-offset-width:2px;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);outline:2px solid transparent;outline-offset:2px}
:where(.single-product #main) .button:after {display:none}
:where(.single-product #main) .button:hover {color:#fff}
:where(.single-product #main) .button:disabled {cursor:default;opacity:.5!important}
:where(.single-product #main) .button:disabled:hover {opacity:.5!important}
:where(.single-product #main) .button:focus {box-shadow:none;outline:none}
:where(.single-product #main) .price {color:#43454b;display:block;font-size:.875rem;font-weight:300;line-height:1.25rem;margin:0}
@media (min-width:640px) {
  :where(.single-product #main) .price {font-size:1.125rem;line-height:1.75rem}
}
:where(.single-product #main) .related {margin-top:2rem;padding:1rem}
:where(.single-product #main) .variable-items-wrapper {display:flex;flex-wrap:wrap}
:where(.single-product #main) .variable-items-wrapper .variable-item {--tw-border-opacity:1;align-items:center;border:1px solid #aaa;border-color:rgb(209 213 219/var(--tw-border-opacity,1));border-radius:0;display:flex;height:40px;justify-content:center;margin-bottom:5px;margin-right:5px;min-width:50px;padding:0 .5rem}
:where(.single-product #main) .variable-items-wrapper .variable-item:hover {border-color:var(--accent-color)}
:where(.single-product #main) .variable-items-wrapper .variable-item:last-child {margin-right:0}
:where(.single-product #main) .up-sells {margin-top:3rem}
@media (max-width:768px) {
  :where(.single-product #main) .up-sells {padding:0 1rem}
}
:where(.single-product #main) .up-sells h2 {font-size:1.2rem;margin-bottom:1rem}
@media (min-width:640px) {
  :where(.single-product #main) .sm\:h-\[100px\] {height:100px}
  :where(.single-product #main) .sm\:w-\[100px\] {width:100px}
  :where(.single-product #main) .sm\:flex-row {flex-direction:row}
}
@media (min-width:768px) {
  :where(.single-product #main) .md\:mr-3 {margin-right:.75rem}
  :where(.single-product #main) .md\:grid {display:grid}
}