/*!
Theme Name: PrecisionPharmacy
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.1
*/

/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/

html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[multiple],[size]:where(select:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

*, ::before, ::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:  ;
}

::backdrop {
  --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:  ;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.visible {
  visibility: visible;
}

.static {
  position: static;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.left-1\/2 {
  left: 50%;
}

.right-0 {
  right: 0px;
}

.right-0\.5 {
  right: 0.125rem;
}

.top-0 {
  top: 0px;
}

.top-0\.5 {
  top: 0.125rem;
}

.top-1\/2 {
  top: 50%;
}

.z-10 {
  z-index: 10;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-4 {
  margin-right: 1rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

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

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-auto {
  margin-top: auto;
}

.block {
  display: block;
}

.\!inline-block {
  display: inline-block !important;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-16 {
  height: 4rem;
}

.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.min-h-\[50vh\] {
  min-height: 50vh;
}

.\!w-12 {
  width: 3rem !important;
}

.\!w-16 {
  width: 4rem !important;
}

.w-16 {
  width: 4rem;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.min-w-full {
  min-width: 100%;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-screen-xl {
  max-width: 1280px;
}

.max-w-sm {
  max-width: 24rem;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow-\[2\] {
  flex-grow: 2;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-scale-x-100 {
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.\!justify-center {
  justify-content: center !important;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-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-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-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));
}

.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 1;
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-md {
  border-radius: 0.375rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-t {
  border-top-width: 1px;
}

.border-none {
  border-style: none;
}

.border-transparent {
  border-color: transparent;
}

.bg-emerald-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(110 231 183 / var(--tw-bg-opacity));
}

.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
}

.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.p-2 {
  padding: 0.5rem;
}

.p-4 {
  padding: 1rem;
}

.p-8 {
  padding: 2rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 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;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.\!text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

.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;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[28px\] {
  font-size: 28px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.not-italic {
  font-style: normal;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-\[23px\] {
  line-height: 23px;
}

.leading-\[24px\] {
  line-height: 24px;
}

.leading-\[48px\] {
  line-height: 48px;
}

.tracking-\[-0\.35px\] {
  letter-spacing: -0.35px;
}

.tracking-\[0\.01px\] {
  letter-spacing: 0.01px;
}

.tracking-\[0\.09px\] {
  letter-spacing: 0.09px;
}

.tracking-normal {
  letter-spacing: 0em;
}

.text-\[\#4ab866\] {
  --tw-text-opacity: 1;
  color: rgb(74 184 102 / var(--tw-text-opacity));
}

.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity));
}

.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity));
}

.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-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.underline {
  text-decoration-line: underline;
}

.no-underline {
  text-decoration-line: none;
}

.opacity-40 {
  opacity: 0.4;
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.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;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.\[appearance\:textfield\] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

/* Old files */

/*!
Theme Name: PrecisionPharmacy
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: precisionpharmacy
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

PrecisionPharmacy is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root {
  --page-max-width: 1250px;
  --container-side-padding: 4rem;
  --main-title-size: 4rem;
  --primary-lighter: #00996634;
  --primary-light: #009966;
  --primary: #008559;
  --primary-dark: #00724c;
  --primary-darker: #00724c;
  --text-grey: #777777;
  --line-gray: #e5e5e5;
}

/* General */

* {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: #404040;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

.site-main {
  display: flex;
  flex-direction: column;
  padding: 2rem var(--container-side-padding);
}

/* Header ------------------------------ */

.site-header {
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0px;
  z-index: 999;
  background: white;
}

.site-header > * {
  padding: 0 var(--container-side-padding);
}

#header-top {
  justify-content: space-between;
  padding: 1.5rem 0 1rem;
}

@media screen and (max-width: 800px) {
  #header-top {
    padding: 0.5rem 0 0.75rem;
  }
}

.nav-menu {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.nav-menu > li {
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: flex;
  transition: all 0.1s ease-out;
}

.nav-menu > li:has(i.open) {
  box-shadow: 0 4px 0 var(--primary-light) inset;
}

.nav-menu > li:hover {
  box-shadow: 0 4px 0 var(--primary-light) inset;
}

.nav-menu > li i {
  transition: all 0.2s ease-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.nav-menu > li i.open {
  transform: scaleY(-1);
}

.nav-menu > li.active {
  box-shadow: 0 4px 0 var(--primary-light) inset;
}

.nav-menu a {
  color: black;
  font-weight: 600;
  text-decoration: none;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-menu a :visited {
  color: black;
}

@media (max-width: 800px) {
  .nav-menu {
    display: none !important;
  }
}

#site-navigation {
  position: relative;
}

#mega-menu {
  background: white;
  position: absolute;
  width: 100%;
  max-width: var(--page-max-width);
  border-radius: 0 0 6px 6px;
  display: none;
  top: 100%;
  box-shadow: 0 3px 4px -1px rgba(46, 46, 46, 0.2);
}

#mega-menu .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 1rem;
  box-shadow: inset 0 7px 8px -10px rgb(0, 0, 0);
}

#mega-menu .grid .categories,
#mega-menu .grid .sub-categories {
  border-right: 1px solid silver;
  padding-right: 0.5rem;
}

#mega-menu .grid .sub-categories {
  padding-left: 0.5rem;
  display: none;
}

#mega-menu ul {
  margin: 0;
}

#mega-menu li {
  list-style: none;
}

#mega-menu .sub-menu li:not(:last-child),
#mega-menu .sub-sub-menu li:not(:last-child) {
  margin-bottom: 0.2rem;
}

#mega-menu .sub-menu a,
#mega-menu .sub-sub-menu a {
  display: flex;
  padding: 1rem;
  text-decoration: none;
  color: black;
  font-weight: 600;
  border-radius: 4px;
  width: 100%;
  justify-content: space-between;
}

#mega-menu .sub-menu a:hover,
#mega-menu .sub-sub-menu a:hover {
  background: rgb(228, 228, 228);
}

#mega-menu .sub-menu .selected a,
#mega-menu .sub-sub-menu .selected a {
  background: rgb(228, 228, 228);
}

.custom-logo {
  max-width: 200px;
  display: flex;
}

#user-nav {
  display: flex;
  gap: 1.4rem;
}

#user-nav .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 0.825rem;
}

.mobile-menu {
  border-radius: 4px;
  cursor: pointer;
}

.mobile-menu:hover {
  background: rgb(242, 242, 242);
}

.mobile-menu .ph-list-bold {
  color: black;
  font-size: 1.75rem;
}

#header-gphc {
  width: 100px;
  max-width: 100%;
}

@media screen and (max-width: 800px) {
  #header-gphc {
    width: 4rem;
  }
}

#header-GPhc-num {
  font-size: 0.6rem;
  bottom: 6%;
  right: 18%;
  color: black;
  position: absolute;
  margin: 0;
}

@media screen and (max-width: 800px) {
  #header-GPhc-num {
    font-size: 0.35rem;
  }
}

.search-bar {
  padding-bottom: 0.5rem;
}

.dgwt-wcas-search-input {
  border-radius: 6px !important;
}

.dgwt-wcas-search-wrapp {
  min-width: 0 !important;
}

/* Mobile side nav */

/* The side navigation menu */

.sidenav {
  height: 100%;
  /* 100% Full-height */
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  /* Stay in place */
  z-index: 9999;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  right: 0;
  background-color: rgb(255, 255, 255);
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding: 4rem 0;
  /* Place content 60px from the top */
  transition: 0.2s;
  /* 0.5 second transition effect to slide in the sidenav */
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* The navigation menu links */

.sidenav a {
  padding: 8px 32px 8px 32px;
  text-decoration: none;
  font-size: 1.2rem;
  color: #818181;
  display: block;
  transition: 0.2s;
  white-space: nowrap;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.sidenav a .cart-count {
  top: 0;
  right: 0;
}

/* When you mouse over the navigation links, change their color */

.sidenav a:hover {
  color: #1d1d1d;
}

/* Position and style the close button (top right corner) */

.sidenav .closebtn {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 7px;
  font-size: 36px;
}

#mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

/* Mobile side nav END */

.site-header-cart {
  list-style: none;
}

.site-header-cart a {
  text-decoration: none;
}

.site-header-cart ul {
  list-style: none;
  border-bottom: 1px solid var(--line-gray);
}

.site-header-cart .cart-contents {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-header-cart .widget_shopping_cart {
  width: -moz-fit-content !important;
  width: fit-content !important;
  background: white;
  border-radius: 4px;
}

.site-header-cart:hover .widget_shopping_cart, .site-header-cart.active .widget_shopping_cart {
  right: 0 !important;
  left: unset !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.site-header-cart .cart_list {
  width: 300px;
  max-height: 500px;
  overflow: auto;
}

.site-header-cart .mini_cart_item {
  display: flex;
  padding: 1rem;
  border-bottom: 1px solid rgb(232, 232, 232);
}

.site-header-cart .mini_cart_item a {
  display: flex;
  flex-direction: column;
}

.site-header-cart .mini_cart_item a:first-child {
  width: 100px;
}

.site-header-cart .mini_cart_item .attachment-woocommerce_thumbnail {
  width: 100px;
  max-width: -moz-fit-content;
  max-width: fit-content;
  border: 1px solid rgb(232, 232, 232);
  border-radius: 4px;
}

.site-header-cart .mini_cart_item .cart-details {
  margin-left: 1rem;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.site-header-cart .mini_cart_item .cart-details .quantity {
  font-weight: 600;
}

.site-header-cart .mini_cart_item .remove_from_cart_button {
  margin-left: 10px;
  padding: 7px;
  height: -moz-fit-content;
  height: fit-content;
  font-weight: bold;
}

.site-header-cart .mini_cart_item .remove_from_cart_button:hover {
  background: var(--primary-lighter);
  border-radius: 6px;
  color: white;
}

.site-header-cart .mini_cart_item .woocommerce-tabs .quantity {
  white-space: nowrap;
  font-weight: 400;
}

.site-header-cart .woocommerce-mini-cart__total {
  padding: 0 1rem;
  margin: 1rem 0;
  margin-left: auto;
}

.site-header-cart .woocommerce-mini-cart__buttons a {
  padding: 10px 10px;
  font-weight: 600;
  color: var(--primary);
  border-radius: 5px;
  width: 100%;
  text-align: center;
}

.site-header-cart .woocommerce-mini-cart__buttons a.checkout {
  background: var(--primary);
  color: white;
}

.site-header-cart .woocommerce-mini-cart__buttons a:hover {
  background: var(--primary-dark);
  color: white;
}

.site-header-cart .woocommerce-mini-cart__buttons a:nth-child(2) {
  margin-left: 1rem;
}

.site-header-cart .woocommerce-mini-cart__empty-message {
  padding: 1rem;
  margin: 0;
  white-space: nowrap;
}

.cart-count {
  color: white;
  padding: 2px 5px;
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 12px;
}

.cart-count .count-text {
  position: relative;
  z-index: 2;
  color: white;
  font-weight: 600;
}

.cart-count::after {
  z-index: 1;
  content: "";
  padding: 10px;
  border-radius: 50px;
  background: var(--primary);
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border: 2px solid white;
}

/* --------------------------------------- */

/* Buttons ------------------------------- */

.btn-red.link,
.woocommerce-MyAccount-content button[type=submit] {
  text-decoration: none;
  background: var(--primary);
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  display: inline-block;
  border: none;
  width: -moz-fit-content;
  width: fit-content;
}

.btn-red.link:hover,
.woocommerce-MyAccount-content button[type=submit]:hover {
  background: var(--primary-dark);
  cursor: pointer;
}

.btn-red.link:focus,
.woocommerce-MyAccount-content button[type=submit]:focus {
  background: var(--primary-dark);
}

.wc-proceed-to-checkout {
  display: flex;
  flex-direction: column;
}

/* -------------------------------------------- */

/* Front Page */

.container.advantages {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

#advantages-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: auto;
  gap: 1rem;
}

.advantage {
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#categories-grid {
  max-height: 400px;
  height: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.container.partners {
  margin: 6rem auto;
}

#category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1rem;
}

@media screen and (max-width: 800px) {
  #category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.category-card {
  display: flex;
  position: relative;
  background: var(--primary);
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-radius: 4px;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  cursor: pointer;
}

.category-card h3 {
  font-weight: 500;
  color: white;
  text-align: center;
}

.category-card img {
  width: 100px;
  height: 100px;
  -o-object-fit: contain;
  object-fit: contain;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 800px) {
  .category-card img {
    height: 80px;
    width: 80px;
  }

  .category-card h3 {
    font-size: 1rem;
  }
}

#categories-load-more {
  border: none;
  color: var(primary);
  font-weight: 500;
  background: none;
  align-self: center;
  padding: 0.75rem 0.5rem;
  color: var(--primary-light);
  border-radius: 4px;
  cursor: pointer;
}

#categories-load-more:hover {
  background: #f5f5f5;
}

/* Front Page End */

/* Wooocmmerce -------------------------------- */

.woocommerce-breadcrumb {
  margin: 0 0 2rem;
}

.woocommerce-info *,
.woocommerce-message *,
.woocommerce-noreviews *,
.woocommerce-error * {
  color: white;
}

.comment-form-rating {
  margin-top: 1rem;
}

#primary-menu {
  position: relative;
}

#primary-menu > li:hover {
  box-shadow: inset 0px 4px 0px 0px var(--primary);
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9;
}

.sub-category {
  display: flex;
  background: silver;
  height: 100%;
  padding: 1rem;
  width: 100%;
  border: 1px solid black;
}

#category-1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  grid-auto-flow: row;
  grid-template-areas: "top top side" "bot-1 bot-2 side";
}

#category-1 .top {
  grid-area: top;
}

#category-1 .bot-1 {
  grid-area: bot-1;
}

#category-1 .bot-2 {
  grid-area: bot-2;
}

#category-1 .side {
  grid-area: side;
}

#category-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  grid-auto-flow: row;
  grid-template-areas: "top-long top-long top-short" "bot-short bot-long bot-long";
}

#category-2 .top-long {
  grid-area: top-long;
}

#category-2 .top-short {
  grid-area: top-short;
}

#category-2 .bot-short {
  grid-area: bot-short;
}

#category-2 .bot-long {
  grid-area: bot-long;
}

#category-1,
#category-2 {
  height: 100%;
}

#category-1 > a,
#category-2 > a {
  background: var(--primary);
  display: flex;
  border-radius: 4px;
  padding: 1rem;
  align-items: flex-end;
  color: white;
  font-weight: 600;
  transition: all 0.1s ease-in-out;
}

#category-1 > a:hover,
#category-2 > a:hover {
  box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.33);
  transform: translateY(-3px);
  cursor: pointer;
}

/* Product View ------------------------------- */

#product .woocommerce .clearfix {
  display: flex;
  flex-direction: column;
}

.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce div.product div.summary {
  width: 100%;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: 10%;
}

.product_title.entry-title {
  margin-bottom: 1rem;
}

.product_meta {
  display: none;
}

.product {
  display: flex;
  flex-direction: column;
}

.product #main-to-cart-button,
.product #wc-stripe-payment-request-wrapper,
.product #wc-stripe-payment-request-button-separator {
  max-width: 250px;
}

@media screen and (max-width: 800px) {
  .product #main-to-cart-button,
  .product #wc-stripe-payment-request-wrapper,
  .product #wc-stripe-payment-request-button-separator {
    max-width: 100%;
  }
}

.product img.wp-post-image {
  -o-object-fit: contain;
  object-fit: contain;
  height: 100%;
  max-height: 600px;
}

.single-product .woocommerce-product-rating {
  margin-bottom: 1rem;
}

.single-product .sale .price {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.75rem;
}

.single-product .sale .woocommerce-variation-price .price {
  flex-direction: row;
}

.single-product select {
  padding: 10px;
  border-radius: 4px;
}

.single-product .reset_variations {
  margin-left: 1rem;
}

.entry-summary {
  display: flex;
  flex-direction: column;
}

.woocommerce-tabs {
  border-radius: 4px;
  margin: 3rem 0;
}

.woocommerce-tabs .tabs {
  display: flex;
  border-radius: 4px 4px 0 0;
}

@media screen and (max-width: 800px) {
  .woocommerce-tabs .tabs {
    flex-direction: column;
  }
}

.woocommerce-tabs .tabs li.active {
  border-radius: 4px 4px 0 0;
  background: rgb(232, 232, 232);
}

.woocommerce-tabs .tabs li a {
  padding: 1rem !important;
  font-weight: 600;
  color: black;
  text-decoration: none;
}

.woocommerce-tabs .tabs li a:hover {
  border-radius: 4px 4px 0 0;
  color: black;
  background: rgb(232, 232, 232);
}

.woocommerce-tabs .woocommerce-Tabs-panel {
  padding: 2rem 1.5rem;
  border: 1px solid var(--line-gray);
  margin: 0;
  border-radius: 0 0 4px 4px;
}

.woocommerce-tabs .woocommerce-Tabs-panel button,
.woocommerce-tabs .woocommerce-Tabs-panel input[type=submit] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 0;
  cursor: pointer;
  color: white;
  font-weight: 600;
  background: var(--primary);
  border: none;
  width: 100%;
  max-width: 150px;
  font-size: 14px;
  border-radius: 3px;
  text-decoration: none;
}

.woocommerce-tabs .woocommerce-Tabs-panel button:hover,
.woocommerce-tabs .woocommerce-Tabs-panel input[type=submit]:hover {
  background: var(--primary-dark);
}

.woocommerce-tabs .woocommerce-Tabs-panel table {
  max-width: 300px;
}

.onsale {
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-weight: 600;
  color: white;
  background: var(--primary-dark);
  padding: 0.75rem;
  z-index: 9;
  border-radius: 4px;
}

#wc-stripe-payment-request-button-separator {
  margin: 1rem 0 !important;
}

.flex-control-nav.flex-control-thumbs li:not(:last-child) {
  margin-right: 1%;
}

.woocommerce-variation-price {
  display: none;
}

#quantity-wrapper {
  border: 1px solid var(--line-gray);
  border-radius: 4px;
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  /* Chrome, Safari, Edge, Opera */
  /* Firefox */
}

#quantity-wrapper:focus {
  outline: black;
}

#quantity-wrapper button {
  display: flex;
  padding: 10px;
  background: white;
  border-radius: 4px;
  border: none;
  transition: all 0.1s;
  cursor: pointer;
}

#quantity-wrapper button:hover {
  background: black;
}

#quantity-wrapper button:active {
  background: black;
  scale: 0.95;
}

#quantity-wrapper button i {
  color: silver;
}

#quantity-wrapper input {
  width: 2.4rem;
  border: none;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 1.2rem;
}

#quantity-wrapper input::-webkit-outer-spin-button,
#quantity-wrapper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#quantity-wrapper input[type=number] {
  --moz-appearance: textfield;
}

#commentform label {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.product-top {
  gap: 2rem;
}

.shop_attributes p {
  margin: 0;
}

.skeleton-rect {
  background-color: #e1e1e1;
  background-image: linear-gradient(to right, #e1e1e1, #f2f2f2, #e1e1e1);
  background-size: 200% 100%;
  border-radius: 5px;
  display: inline-block;
  height: 20px;
  margin-bottom: 10px;
  width: 100%;
  animation: shimmer 1s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* Product Page end */

/* Account Page */

.woocommerce-MyAccount-content h3 {
  margin-bottom: 0.5rem;
}

.woocommerce-MyAccount-content table.account-orders-table {
  width: 100%;
  background-color: #ffffff;
  border-collapse: collapse;
  border-width: 1px;
  border-color: #d6d6d6;
  border-style: solid;
  border-radius: 4px;
}

.woocommerce-MyAccount-content table.account-orders-table td,
.woocommerce-MyAccount-content table.account-orders-table th {
  border-width: 1px;
  border-color: #d6d6d6;
  border-style: solid;
  padding: 5px;
}

.woocommerce-MyAccount-content table.account-orders-table thead {
  background-color: var(--primary-dark);
}

.woocommerce-MyAccount-content table.account-orders-table thead * {
  color: white;
}

.woocommerce-MyAccount-content table.account-orders-table tr:nth-child(even) {
  background-color: #eeeeee;
}

.woocommerce-form,
.woocommerce-ResetPassword {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0px 0px 10px #ccc;
}

.woocommerce-form .form-row,
.woocommerce-ResetPassword .form-row {
  display: flex;
}

.woocommerce-form .form-row.utility,
.woocommerce-ResetPassword .form-row.utility {
  justify-content: space-between;
}

.woocommerce-form .woocommerce-form-row,
.woocommerce-ResetPassword .woocommerce-form-row {
  flex-direction: column;
  margin-bottom: 0.5rem;
  width: 100% !important;
}

.woocommerce-form .woocommerce-form-row label,
.woocommerce-ResetPassword .woocommerce-form-row label {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.woocommerce-form .woocommerce-form-row input:-webkit-autofill,
.woocommerce-form .woocommerce-form-row input:-webkit-autofill:hover,
.woocommerce-form .woocommerce-form-row input:-webkit-autofill:focus,
.woocommerce-form .woocommerce-form-row input:-webkit-autofill:active,
.woocommerce-ResetPassword .woocommerce-form-row input:-webkit-autofill,
.woocommerce-ResetPassword .woocommerce-form-row input:-webkit-autofill:hover,
.woocommerce-ResetPassword .woocommerce-form-row input:-webkit-autofill:focus,
.woocommerce-ResetPassword .woocommerce-form-row input:-webkit-autofill:active {
  -webkit-transition: background-color 9999s ease-in-out 0s;
  transition: background-color 9999s ease-in-out 0s;
}

.woocommerce-form .woocommerce-form-row input,
.woocommerce-ResetPassword .woocommerce-form-row input {
  padding: 5px 7px;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  background-color: white !important;
  border: 1px solid #d7d7d7;
  border-radius: 4px;
  box-shadow: none;
  color: #16110e;
  display: block;
  font-size: 1rem;
  max-width: unset;
  opacity: 1;
  padding: 12px 54px 12px 16px;
  width: 100%;
}

.woocommerce-form .woocommerce-form-row input:focus,
.woocommerce-ResetPassword .woocommerce-form-row input:focus {
  outline: unset;
  border-color: #16110e;
}

.woocommerce-form .woocommerce-button,
.woocommerce-form .woocommerce-Button,
.woocommerce-ResetPassword .woocommerce-button,
.woocommerce-ResetPassword .woocommerce-Button {
  width: 100%;
  background: var(--primary);
  color: white;
  border-radius: 4px;
  padding: 1rem;
  font-weight: 600;
  border: none;
}

.woocommerce-form .woocommerce-button:hover,
.woocommerce-form .woocommerce-Button:hover,
.woocommerce-ResetPassword .woocommerce-button:hover,
.woocommerce-ResetPassword .woocommerce-Button:hover {
  background: var(--primary-dark);
}

.woocommerce-form .woocommerce-button:active,
.woocommerce-form .woocommerce-Button:active,
.woocommerce-ResetPassword .woocommerce-button:active,
.woocommerce-ResetPassword .woocommerce-Button:active {
  background: var(--primary-darker);
}

.woocommerce-ResetPassword {
  display: flex;
  flex-direction: column;
}

/* Change the background color of the account page */

.woocommerce-account {
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* Style the account menu */

.woocommerce-MyAccount-navigation ul {
  display: flex;
  align-items: center;
  background-color: #fff;
  margin: 0;
  padding: 1px;
  border: 1px solid var(--line-gray);
  border-radius: 4px 4px 0 0;
  flex-wrap: wrap;
  border-bottom: none;
  gap: 2px;
}

.woocommerce-MyAccount-navigation ul li {
  list-style: none;
}

@media screen and (max-width: 400px) {
  .woocommerce-MyAccount-navigation ul {
    flex-direction: column;
  }

  .woocommerce-MyAccount-navigation ul li,
  .woocommerce-MyAccount-navigation ul li a {
    width: 100%;
  }
}

/* Style the account menu links to look like horizontal tabs */

.woocommerce-MyAccount-navigation a {
  display: inline-block;
  padding: 0.5em 1em;
  color: #555;
  font-size: 1.2em;
  text-decoration: none;
  text-align: center;
  border-radius: 3px;
}

/* Style the active menu link to look like a selected tab */

.woocommerce-MyAccount-navigation .is-active a {
  color: white;
  font-weight: 600;
  border-color: var(--primary);
  background: var(--primary);
}

/* Add hover effect to the tab */

.woocommerce-MyAccount-navigation a:hover {
  border-color: var(--primary);
  color: white;
  background: var(--primary);
}

/* Style the account content */

.woocommerce-MyAccount-content {
  padding: 2em;
  background-color: #fff;
  border: 1px solid var(--line-gray);
  border-radius: 0 0 4px 4px;
}

/* Style the form inputs */

.woocommerce-MyAccount-content input {
  padding: 0.5em;
  font-size: 1.2em;
  width: 100%;
}

table.shop_table.order_details {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2em;
}

table.shop_table.order_details thead th {
  text-transform: uppercase;
  font-weight: bold;
  background-color: #f2f2f2;
  padding: 10px 20px;
  text-align: left;
}

table.shop_table.order_details tbody td {
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
}

table.shop_table.order_details tfoot th {
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 20px;
  text-align: right;
}

table.shop_table.order_details tfoot td {
  padding: 10px 20px;
  border-top: 1px solid #ddd;
}

.woocommerce form .form-row-first,
.woocommerce-page form .form-row-first {
  float: left;
}

.woocommerce form .form-row-last,
.woocommerce-page form .form-row-last {
  float: right;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
  width: 47%;
  overflow: visible;
}

.woocommerce form .form-row-wide,
.woocommerce-page form .form-row-wide {
  clear: both;
}

.col2-set.addresses {
  display: flex;
  gap: 1rem;
}

@media screen and (max-width: 800px) {
  .col2-set.addresses {
    flex-direction: column;
  }
}

.woocommerce-Address {
  border: 1px solid var(--line-gray);
  padding: 1rem;
  border-radius: 2px;
}

.woocommerce-address-fields__field-wrapper p {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.edit-account fieldset {
  margin-bottom: 1rem;
}

/* Account Page End */

/* Products Grid ------------------------------ */

#filter-sidebar i {
  transition: all 0.2s ease-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

#filter-sidebar .rotate {
  transform: rotate(-180deg);
}

#filter-sidebar > div {
  /* border-top: 1px solid silver; */
  border-bottom: 1px solid var(--line-gray);
  /* padding: 1rem 0; */
}

#filter-sidebar .dropdown-content {
  display: none;
  font-size: 0.875rem;
}

#filter-sidebar .filter-dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  /* border: 1px solid silver; */
  border-radius: 4px;
  cursor: pointer;
}

.woocommerce-products-header {
  margin-bottom: 2rem;
}

ul.products {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
  row-gap: 2rem;
}

ul.products li {
  width: 100% !important;
  margin: 0 !important;
}

ul.products .onsale {
  position: absolute;
}

@media screen and (max-width: 1200px) {
  ul.products {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 900px) {
  ul.products {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 800px) {
  ul.products {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 580px) {
  ul.products {
    grid-template-columns: 1fr 1fr;
  }
}

.product-item {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(223, 223, 223);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.product-item:hover {
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.2);
}

.product-item > a {
  padding: 9px;
  text-decoration: none;
}

.product-item img {
  display: block;
  width: 100%;
  height: 100%;
  height: 210px;
  -o-object-fit: contain;
  object-fit: contain;
  border-radius: 6px;
}

@media screen and (max-width: 800px) {
  .product-item img {
    height: 150px;
  }
}

.product-item ins {
  background: none;
}

.product-item del {
  margin-left: 0.5rem;
  font-size: 0.75rem;
}

.product-item .amount-container {
  font-size: 1.125rem;
  margin: 0.5rem 0;
  font-weight: 600;
}

.added_to_cart.wc-forward {
  display: none;
}

.product-link-container {
  margin: 0.5rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1rem;
  height: 3rem;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.single_add_to_cart_button,
.add_to_cart_button,
.btn-red {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 0;
  cursor: pointer;
  color: white;
  font-weight: 600;
  background: var(--primary);
  border: none;
  width: 100%;
  font-size: 14px;
  border-radius: 3px;
  text-decoration: none;
}

.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.btn-red:hover {
  background: var(--primary-dark);
}

.single_add_to_cart_button svg,
.add_to_cart_button svg,
.btn-red svg {
  margin-left: 6px;
}

.single_add_to_cart_button img,
.add_to_cart_button img,
.btn-red img {
  box-shadow: unset;
}

.woocommerce-ordering .orderby {
  margin-left: auto;
  padding: 0.5rem;
  border-radius: 3px;
  max-width: 200px;
  width: 100%;
}

@media screen and (max-width: 800px) {
  .woocommerce-ordering {
    align-items: flex-end;
  }
}

.woocommerce-result-count {
  margin: 0;
}

.star-rating span {
  font-family: star;
}

.woocommerce-pagination {
  margin: 0 auto;
  margin-top: 2rem;
}

.woocommerce-pagination ul.page-numbers {
  margin: 0;
  display: flex;
  list-style: none;
  gap: 1rem;
  font-weight: bold;
}

.woocommerce-pagination ul.page-numbers li {
  display: flex;
}

.woocommerce-pagination ul.page-numbers .page-numbers {
  transition: all 0.2s;
  border-radius: 4px;
  color: var(--primary-dark);
  text-decoration: none;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.woocommerce-pagination a.page-numbers:hover {
  background: var(--primary-lighter);
}

.woocommerce-pagination a.page-numbers:active {
  scale: 0.95;
}

.woocommerce-pagination span.page-numbers.current {
  color: white;
  background: var(--primary);
}

/* Product swiper ------------------------- */

.swiper {
  width: 100%;
  height: 100%;
  padding: 2px;
}

.swiper-wrapper {
  align-items: center;
}

.swiper-overlay {
  display: none;
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
}

.swiper-pagination {
  display: none;
}

.swiper-pagination-bullet-active {
  background: var(--primary);
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.swiper-button-next {
  right: -45px;
}

.swiper-button-prev {
  left: -45px;
}

.swiper-button-prev,
.swiper-button-next {
  border: 1px solid var(--line-gray);
  border-radius: 50px;
  padding: 5px;
  height: auto !important;
  width: auto !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: all 0.1s ease-in-out;
  z-index: 8;
}

.swiper-button-prev i,
.swiper-button-next i {
  color: var(--primary);
}

.swiper-button-prev:after,
.swiper-button-next:after {
  content: unset;
}

.swiper-button-prev svg,
.swiper-button-next svg {
  height: 25px;
  width: 25px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: var(--primary);
}

.swiper-button-prev:hover i,
.swiper-button-next:hover i {
  color: white;
}

.swiper-button-prev:active,
.swiper-button-next:active {
  scale: 0.95;
  box-shadow: unset;
}

/* ---------------------------------- */

.site-footer {
  background: rgb(36, 36, 36);
}

.site-footer * {
  color: white;
}

/* Custom classes */

.main-title {
  line-height: var(--main-title-size);
  font-size: var(--main-title-size);
  font-weight: 400;
  line-height: 1;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.fill-gray-200 {
  fill: #e5e7eb;
}

/* Utilities */

.container {
  max-width: var(--page-max-width);
  width: 100%;
}

button.disabled {
  opacity: 0.7;
  pointer-events: none;
}

.flex {
  display: flex;
}

.flex-important {
  display: flex !important;
}

.desktop-flex {
  display: flex;
}

.desktop-col {
  flex-direction: column;
}

.responsive-align-start-end {
  align-items: flex-start;
}

.mobile-shrink {
  flex-shrink: 0;
  margin-right: 2rem;
}

@media screen and (max-width: 800px) {
  .mobile-w-full {
    width: 100% !important;
  }

  .mobile-shrink {
    flex-shrink: unset;
    margin: 0 0.5rem;
  }

  .mobile-align-center {
    align-items: center !important;
  }

  .mobile-justify-center {
    justify-content: center !important;
  }

  .responsive-align-start-end {
    align-items: flex-end !important;
  }

  .desktop-flex {
    display: block;
  }

  .mobile-col {
    flex-direction: column;
  }

  .desktop-col {
    flex-direction: row;
  }

  .mobile-flex-reverse {
    flex-direction: column-reverse;
  }
}

.col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

/* Spinner */

.spinner-overlay,
#spinner-overlay-product {
  display: none;
}

.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
}

.spinner.category {
  position: static;
  margin: 0;
  width: 2rem;
  height: 2rem;
  margin-top: 0.5rem;
}

.spinner .path {
  stroke: var(--primary-darker);
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

.pharmacist-required {
  position: relative;
}

.pharmacist-required:after {
  content: " ";
  position: absolute;
  bottom: 10%;
  right: 5%;
  width: 1.5rem;
  height: 1.5rem;
  background: url(./img/Pharmacy_Green_Cross.png) no-repeat center center;
  background-size: contain;
}

.pharmacist-required.large:after {
  bottom: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
}

/* Toast */

/* The snackbar - position it at the bottom and in the middle of the screen */

.snackbar {
  visibility: hidden;
  /* Hidden by default. Visible on click */
  min-width: 250px;
  /* Set a default minimum width */
  background-color: var(--primary);
  /* Black background color */
  color: #fff;
  /* White text color */
  text-align: center;
  /* Centered text */
  border-radius: 4px;
  /* Rounded borders */
  padding: 8px 16px;
  /* Padding */
  position: fixed;
  /* Sit on top of the screen */
  z-index: 1;
  /* Add a z-index if needed */
  left: 30px;
  /* Center the snackbar */
  bottom: 1%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  gap: 1rem;
}

@media screen and (max-width: 800px) {
  .snackbar {
    padding: 1rem;
  }
}

.snackbar.show {
  visibility: visible;
  /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
   However, delay the fade out process for 2.5 seconds */
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */

@keyframes fadein {
  from {
    left: 0;
    opacity: 0;
  }

  to {
    left: 30px;
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    left: 30px;
    opacity: 1;
  }

  to {
    left: 0;
    opacity: 0;
  }
}

.mobile-only {
  display: none;
}

.desktop-padding {
  padding-top: 5rem;
  padding-bottom: 3rem;
}

/* Media Queries */

@media (max-width: 800px) {
  :root {
    --container-side-padding: 2rem;
  }

  .mobileFont {
    font-size: 1rem;
  }

  .mobile-only {
    display: flex;
  }

  .desktop-only,
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }

  .custom-logo {
    max-width: 120px;
  }

  #advantages-title {
    margin-bottom: 2rem;
  }

  #advantages-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  #advantages-grid > div {
    align-items: center;
  }

  #categories-grid {
    grid-template-columns: 1fr;
    height: auto;
    max-height: 100%;
  }

  .desktop-padding {
    padding: 0;
  }

  .swiper-pagination {
    display: block;
    bottom: -2rem !important;
  }

  .main-title {
    font-size: 3rem;
  }

  #user-nav {
    gap: 1rem;
  }

  .product-top {
    gap: 0.5rem;
  }

  .container.advantages {
    margin-bottom: 3rem;
  }

  .container.partners {
    margin: 3rem auto 1rem;
  }

  .snackbar {
    width: 90%;
    left: 5%;
    /* Center the snackbar */
  }

  @keyframes fadein {
    from {
      left: 0;
      opacity: 0;
    }

    to {
      left: 5%;
      opacity: 1;
    }
  }

  @keyframes fadeout {
    from {
      left: 5%;
      opacity: 1;
    }

    to {
      left: 0;
      opacity: 0;
    }
  }
}

@media (max-width: 420px) {
  :root {
    --container-side-padding: 1rem;
  }
}

.entry-content,
.block-editor-block-list__layout {
  & h1 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  & h2 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  & h3 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  & p,
  & ul,
  & ol {
    & a {
      text-decoration-line: underline;
    }
    & a {
      &:hover {
        text-decoration-line: none;
      }
    }
  }
  & ol {
    & li {
      list-style-position: inside;
    }
    & li {
      list-style-type: decimal;
    }
  }
}

.form-row {
  margin-bottom: 1.5rem;
}

.form-row label {
  margin-bottom: 0.5rem;
  font-weight: 500;
  display: flex;
}

#billing_country_field,
#shipping_country_field {
  flex-direction: column;
  display: flex;
}

abbr.required {
  text-decoration-line: none;
}

input[type="text"],
input[type="email"],
textarea,
input[type="number"],
textarea.input-text,
.woocommerce-input-wrapper input,
.woocommerce-Input,
.wc-stripe-elements-field {
  width: 100%;
  border-radius: 0.25rem;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity)) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
input[type="number"]:focus,
textarea.input-text:focus,
.woocommerce-input-wrapper input:focus,
.woocommerce-Input:focus,
.wc-stripe-elements-field:focus {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity));
  --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-row.woocommerce-invalid input.input-text {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.woocommerce-invalid-required-field * {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.form-row.woocommerce-validated input.input-text {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.wc-stripe-elements-field {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

input[type="checkbox"],
input[type='radio'] {
  margin-right: 0.75rem;
  margin-top: 0.125rem;
  width: 1rem !important;
  flex-shrink: 0;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

input[type="checkbox"]:focus,
input[type='radio']:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity));
}

input[type="checkbox"]:not(:-moz-placeholder-shown):not(:focus):invalid, input[type='radio']:not(:-moz-placeholder-shown):not(:focus):invalid {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
}

input[type="checkbox"]:not(:placeholder-shown):not(:focus):invalid,
input[type='radio']:not(:placeholder-shown):not(:focus):invalid {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
}

input[type='radio'] {
  border-radius: 9999px;
}

input[type="checkbox"] {
  border-radius: 0.25rem;
}

.woocommerce-SavedPaymentMethods-saveNew {
  display: flex;
  align-items: center;
  & label {
    margin-bottom: 0px;
  }
}

/* Stripe - OR - divider */

#wc-stripe-payment-request-button-separator {
  text-transform: lowercase;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
.woocommerce-error {
  list-style-type: none;
}

.woocommerce-info > :not([hidden]) ~ :not([hidden]),
.woocommerce-message > :not([hidden]) ~ :not([hidden]),
.woocommerce-noreviews > :not([hidden]) ~ :not([hidden]),
.woocommerce-error > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
.woocommerce-error {
  border-radius: 0.25rem;
  padding: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

[x-cloak] {
  display: none !important;
}

.hover\:bg-emerald-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
}

.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.hover\:text-emerald-500:hover {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity));
}

.hover\:text-emerald-700:hover {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2: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);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-emerald-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.peer:checked ~ .peer-checked\:font-medium {
  font-weight: 500;
}

@media (min-width: 640px) {
  .sm\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.25rem * var(--tw-space-x-reverse));
    margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 768px) {
  .md\:my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .md\:mt-10 {
    margin-top: 2.5rem;
  }

  .md\:max-w-md {
    max-width: 28rem;
  }

  .md\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .md\:pb-12 {
    padding-bottom: 3rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .lg\:my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .lg\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .lg\:mb-14 {
    margin-bottom: 3.5rem;
  }

  .lg\:ml-8 {
    margin-left: 2rem;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:w-fit {
    width: -moz-fit-content;
    width: fit-content;
  }

  .lg\:max-w-full {
    max-width: 100%;
  }

  .lg\:max-w-md {
    max-width: 28rem;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
    margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .lg\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.25rem * var(--tw-space-x-reverse));
    margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .lg\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
  }

  .lg\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .lg\:pl-14 {
    padding-left: 3.5rem;
  }

  .lg\:text-\[40px\] {
    font-size: 40px;
  }

  .lg\:tracking-\[-0\.5px\] {
    letter-spacing: -0.5px;
  }
}

@media (min-width: 1280px) {
  .xl\:mt-8 {
    margin-top: 2rem;
  }

  .xl\:space-x-20 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(5rem * var(--tw-space-x-reverse));
    margin-left: calc(5rem * calc(1 - var(--tw-space-x-reverse)));
  }
}

.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}