/* utility classes */
body.single-product-category :is(h2, h3, h4){
	margin-top: 0px;
	margin-bottom: 0px;	
	margin-block-start: 0rem;
	margin-block-end: 0rem;
}

body [type=button]:focus, 
body [type=button]:hover, 
body [type=submit]:focus, 
body [type=submit]:hover, 
body button:focus, 
body button:hover {
    background-color: #af2623;
    color: #ffffff;
    text-decoration: none;
}

*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}
* > p:last-child {
    margin-bottom: 0px;
}
img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}
.max-height-sm {
	max-height: 200px;
	overflow: auto;
}
/* Typography */
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-xs    { font-size: 0.75rem; line-height: 1rem; }
.text-sm    { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl    { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl   { font-size: 1.5rem; line-height: 2rem; }
.text-3xl   { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl   { font-size: 2.25rem; line-height: 2.5rem; }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.text-center   { text-align: center; }
.line-through  { text-decoration-line: line-through; }

/* Body text */
.body-text, .body-text-medium {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: normal;
    font-family: var(--theme-font-1);
}
.body-text-medium { font-weight: 500; }

/* Color Text */
.text-gray-500    { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); }
.text-gray-600    { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity)); }
.text-gray-700    { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); }
.text-gray-900    { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); }
.text-green-600   { --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity)); }
.text-green-800   { --tw-text-opacity: 1; color: rgb(22 101 52 / var(--tw-text-opacity)); }
.text-yellow-400  { --tw-text-opacity: 1; color: rgb(250 204 21 / var(--tw-text-opacity)); }
.text-blue-800 {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-primary     { --tw-text-opacity: 1; color: rgb(175 38 35 / var(--tw-text-opacity)); }
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Spacing: Padding & Margin */
.px-1   { padding-left: 0.25rem; padding-right: 0.25rem; }
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-4   { padding-top: 1rem; padding-bottom: 1rem; }
.py-6   { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8   { padding-top: 2rem; padding-bottom: 2rem; }
.pt-8 { padding-top: 2rem; }

.mb-2   { margin-bottom: 0.5rem; }
.mb-4   { margin-bottom: 1rem; }
.mb-8   { margin-bottom: 2rem; }
.mb-6 {
    margin-bottom: 1.5rem;
}
.mb-8 {
    margin-bottom: 2rem;
}
.mx-auto { margin-left: auto; margin-right: auto; }

.p-4 {
    padding: 1rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-6 {
    padding: 1.5rem;
}
.mr-2 {
    margin-right: 0.5rem;
}

.inline {
    display: inline;
}

/* Flex, Grid, Layout */
.flex         { display: flex; }
.items-center { align-items: center; }
.grid         { display: grid; }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gap-4        { gap: 1rem; }
.gap-8 {
    gap: 2rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(0.25rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(1rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(1rem * var(--tw-space-x-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

/* Sizing */
.h-8 { height: 2rem; }
.w-8 { width: 2rem; }
.full-width { width: 100%; }
.w-full {
    width: 100%;
}
/* Utility layout */
.padding {
    padding-left: 16px;
    padding-right: 16px;
}
.block-container {
/*     max-width: 1320px; */
    max-width: 1504px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Background & Border */
.bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(175 38 35 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}
.bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.rounded-full {
    border-radius: 9999px;
}

.hover\:bg-gray-100:hover, button.hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
button.hover\:bg-gray-100:hover {
    color: #af2623;
}
.border-primary {
    --tw-border-opacity: 1;
    border-color: rgb(175 38 35 / var(--tw-border-opacity));
}
.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-blue-200 {
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border {
    border-width: 1px;
}
.rounded-lg {
    border-radius: 0.5rem;
}
.borderless {
	border: 0px;
}
.border-b {
    border-bottom-width: 1px;
    border-style: solid;
}
.border-b-2 {
    border-bottom-width: 2px;
    border-style: solid;
}
.border-t {
    border-top-width: 1px;
}
.rounded-lg {
    border-radius: 0.5rem;
}
.rounded-2xl {
    border-radius: 1rem;
}
/* Misc */
.fill-current { fill: currentColor; }

.top-4 {
    top: 1rem;
}

body .sticky {
    position: sticky;
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.nowrap {
	white-space: nowrap;
}
.justify-between {
    justify-content: space-between;
}
.items-center {
    align-items: center;
}
.gap-4 {
    gap: 1rem;
}
.justify-between {
    justify-content: space-between;
}
.items-start {
    align-items: flex-start;
}
.flex-1 {
    flex: 1 1 0%;
}
.flex-col {
    flex-direction: column;
}
.hidden {
    display: none;
}
@media (min-width: 640px) {
    .sm\:items-center {
        align-items: center;
    }
}
@media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction: row;
    }
}
@media (min-width: 1024px) {
    .lg\:flex-row {
        flex-direction: row;
    }
}
@media (min-width: 1024px) {
    .lg\:hidden {
        display: none;
    }
}
@media (min-width: 1024px) {
    .lg\:block {
        display: block;
    }
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}