/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
/*!-----------------------------------------------------------------------------------
  Theme Name: Sellzy - Multipurpose eCommerce HTML Template
  Author: sellzy
  Description: Sellzy - Multipurpose eCommerce HTML Template
  Version: 1.0.0
-----------------------------------------------------------------------------------*/
/*! ************ TABLE OF CONTENTS ***************
tailwind css
menu css
preloader css
select css
404 css
breadcrumb css
slider css
accordion css
payment method css
comments css
widget css
product details css
table css
others css

----------------------------------------*/
/*!----------------------------------------
 Tailwind css
----------------------------------------*/
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-gray-100: #f9fafb;
    --color-gray-200: #f4f6f8;
    --color-gray-300: #dfe3e8;
    --color-gray-400: #c4cdd5;
    --color-gray-500: #919eab;
    --color-gray-800: #212b36;
    --color-gray-900: #161c24;
    --color-neutral-300: oklch(87% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-bounce: bounce 1.4s infinite ease-in-out both;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --font-urbanist: "Urbanist", sans-serif;
    --font-dm-sans: "DM Sans", sans-serif;
    --color-light-primary-text: #212529;
    --color-light-secondary-text: #495057;
    --color-light-disabled-text: #919eab;
    --color-dark-secondary-text: #919eab;
    --color-primary-lighter: #caf8e4;
    --color-primary-light: #5ed9ba;
    --color-primary: #088178;
    --color-primary-dark: #056d6e;
    --color-primary-darker: #04535c;
    --color-secondary: #3366ff;
    --color-secondary-dark: #1939b7;
    --color-info: #1890ff;
    --color-info-dark: #0c53b7;
    --color-info-darker: #04297a;
    --color-success-lighter: #e9fcd4;
    --color-success-light: #aaf27f;
    --color-success: #54d62c;
    --color-success-dark: #229a16;
    --color-warning-lighter: #fff7cd;
    --color-warning-light: #ffe16a;
    --color-warning: #ffc107;
    --color-warning-dark: #b78103;
    --color-error-lighter: #fcd1ca;
    --color-error-light: #ef6168;
    --color-error: #cb0233;
    --color-error-dark: #ae013c;
    --radius-5xl: 3rem;
    --animate-fadeInDown: fadeInDown 700ms ease-in-out 0s 1 normal none running;
    --animate-marquee: marquee-animation 20s linear infinite;
  }
}
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html,
  :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::-moz-placeholder {
    opacity: 1;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or
    (contain-intrinsic-size: 1px) {
    ::-moz-placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-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-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]),
  ::file-selector-button {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
  }
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\@container\/quick-view-product-details {
    container-type: inline-size;
    container-name: quick-view-product-details;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .-top-8 {
    top: calc(var(--spacing) * -8);
  }
  .-top-\[50px\] {
    top: calc(50px * -1);
  }
  .-top-\[60px\] {
    top: calc(60px * -1);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1\/2 {
    top: calc(1/2 * 100%);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-5 {
    top: calc(var(--spacing) * 5);
  }
  .top-6 {
    top: calc(var(--spacing) * 6);
  }
  .top-10 {
    top: calc(var(--spacing) * 10);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .top-\[-36px\] {
    top: -36px;
  }
  .top-\[-76px\] {
    top: -76px;
  }
  .top-\[11px\] {
    top: 11px;
  }
  .top-\[43px\] {
    top: 43px;
  }
  .top-\[85px\] {
    top: 85px;
  }
  .top-\[calc\(100\%\+10px\)\] {
    top: calc(100% + 10px);
  }
  .top-full {
    top: 100%;
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .right-\[15px\] {
    right: 15px;
  }
  .right-\[25px\] {
    right: 25px;
  }
  .right-\[30px\] {
    right: 30px;
  }
  .right-\[35px\] {
    right: 35px;
  }
  .right-\[65px\] {
    right: 65px;
  }
  .right-\[100px\] {
    right: 100px;
  }
  .right-\[105px\] {
    right: 105px;
  }
  .right-\[165px\] {
    right: 165px;
  }
  .right-\[405px\] {
    right: 405px;
  }
  .right-auto {
    right: auto;
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-\[85px\] {
    bottom: 85px;
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-1\/2 {
    left: calc(1/2 * 100%);
  }
  .left-6 {
    left: calc(var(--spacing) * 6);
  }
  .left-12 {
    left: calc(var(--spacing) * 12);
  }
  .left-\[14px\] {
    left: 14px;
  }
  .left-\[48px\] {
    left: 48px;
  }
  .left-auto {
    left: auto;
  }
  .left-full {
    left: 100%;
  }
  .z-1 {
    z-index: 1;
  }
  .z-5 {
    z-index: 5;
  }
  .z-9 {
    z-index: 9;
  }
  .z-10 {
    z-index: 10;
  }
  .z-16 {
    z-index: 16;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-60 {
    z-index: 60;
  }
  .z-80 {
    z-index: 80;
  }
  .z-90 {
    z-index: 90;
  }
  .z-91 {
    z-index: 91;
  }
  .z-99 {
    z-index: 99;
  }
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
  .col-span-1 {
    grid-column: span 1 / span 1;
  }
  .col-span-6 {
    grid-column: span 6 / span 6;
  }
  .col-span-12 {
    grid-column: span 12 / span 12;
  }
  .col-start-1 {
    grid-column-start: 1;
  }
  .col-start-2 {
    grid-column-start: 2;
  }
  .col-start-3 {
    grid-column-start: 3;
  }
  .col-end-11 {
    grid-column-end: 11;
  }
  .col-end-12 {
    grid-column-end: 12;
  }
  .col-end-13 {
    grid-column-end: 13;
  }
  .row-start-1 {
    grid-row-start: 1;
  }
  .row-start-2 {
    grid-row-start: 2;
  }
  .row-start-auto {
    grid-row-start: auto;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .-m-2\.5 {
    margin: calc(var(--spacing) * -2.5);
  }
  .-m-3 {
    margin: calc(var(--spacing) * -3);
  }
  .container {
    margin-inline: auto;
    padding-inline: 1rem;
    @media (width >= 80rem) {
      max-width: 1632px;
    }
    @media (width >= 96rem) {
      padding-inline: 0;
    }
  }
  .-mx-1\.5 {
    margin-inline: calc(var(--spacing) * -1.5);
  }
  .-mx-2\.5 {
    margin-inline: calc(var(--spacing) * -2.5);
  }
  .-mx-3 {
    margin-inline: calc(var(--spacing) * -3);
  }
  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }
  .mx-1\.5 {
    margin-inline: calc(var(--spacing) * 1.5);
  }
  .mx-2\.5 {
    margin-inline: calc(var(--spacing) * 2.5);
  }
  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }
  .-mt-px {
    margin-top: -1px;
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-\[2px\] {
    margin-top: 2px;
  }
  .mr-\[19px\] {
    margin-right: 19px;
  }
  .-mb-\[100px\] {
    margin-bottom: calc(100px * -1);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .mb-\[18px\] {
    margin-bottom: 18px;
  }
  .mb-\[27px\] {
    margin-bottom: 27px;
  }
  .mb-\[70px\] {
    margin-bottom: 70px;
  }
  .ml-0\.5 {
    margin-left: calc(var(--spacing) * 0.5);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-auto {
    margin-left: auto;
  }
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .line-clamp-6 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .flex\! {
    display: flex !important;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }
  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }
  .size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }
  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }
  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }
  .size-\[64px\] {
    width: 64px;
    height: 64px;
  }
  .size-\[70px\] {
    width: 70px;
    height: 70px;
  }
  .size-\[72px\] {
    width: 72px;
    height: 72px;
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-4\.5 {
    height: calc(var(--spacing) * 4.5);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-36 {
    height: calc(var(--spacing) * 36);
  }
  .h-60 {
    height: calc(var(--spacing) * 60);
  }
  .h-\[15px\] {
    height: 15px;
  }
  .h-\[60px\] {
    height: 60px;
  }
  .h-\[86px\] {
    height: 86px;
  }
  .h-\[88px\] {
    height: 88px;
  }
  .h-\[100px\] {
    height: 100px;
  }
  .h-\[102px\] {
    height: 102px;
  }
  .h-\[120px\] {
    height: 120px;
  }
  .h-\[128px\] {
    height: 128px;
  }
  .h-\[144px\] {
    height: 144px;
  }
  .h-\[150px\] {
    height: 150px;
  }
  .h-\[194px\] {
    height: 194px;
  }
  .h-\[200px\] {
    height: 200px;
  }
  .h-\[220px\] {
    height: 220px;
  }
  .h-\[250px\] {
    height: 250px;
  }
  .h-\[300px\] {
    height: 300px;
  }
  .h-\[338px\] {
    height: 338px;
  }
  .h-\[358px\] {
    height: 358px;
  }
  .h-\[380px\] {
    height: 380px;
  }
  .h-\[400px\] {
    height: 400px;
  }
  .h-\[447px\] {
    height: 447px;
  }
  .h-\[460px\] {
    height: 460px;
  }
  .h-\[470px\]\! {
    height: 470px !important;
  }
  .h-\[500px\]\! {
    height: 500px !important;
  }
  .h-\[520px\]\! {
    height: 520px !important;
  }
  .h-\[528px\] {
    height: 528px;
  }
  .h-\[550px\] {
    height: 550px;
  }
  .h-\[600px\] {
    height: 600px;
  }
  .h-\[760px\] {
    height: 760px;
  }
  .h-\[calc\(100\%-60px\)\] {
    height: calc(100% - 60px);
  }
  .h-\[calc\(100\%-100px\)\] {
    height: calc(100% - 100px);
  }
  .h-\[calc\(100\%-250px\)\] {
    height: calc(100% - 250px);
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .h-screen {
    height: 100vh;
  }
  .max-h-\[170px\] {
    max-height: 170px;
  }
  .max-h-\[289px\] {
    max-height: 289px;
  }
  .max-h-\[290px\] {
    max-height: 290px;
  }
  .max-h-\[300px\] {
    max-height: 300px;
  }
  .max-h-\[400px\] {
    max-height: 400px;
  }
  .max-h-\[500px\] {
    max-height: 500px;
  }
  .max-h-\[688px\] {
    max-height: 688px;
  }
  .max-h-\[800px\] {
    max-height: 800px;
  }
  .max-h-\[calc\(100\%-70px\)\] {
    max-height: calc(100% - 70px);
  }
  .min-h-\[90px\] {
    min-height: 90px;
  }
  .min-h-\[414px\] {
    min-height: 414px;
  }
  .min-h-\[432px\] {
    min-height: 432px;
  }
  .min-h-\[520px\] {
    min-height: 520px;
  }
  .min-h-\[532px\] {
    min-height: 532px;
  }
  .min-h-\[570px\] {
    min-height: 570px;
  }
  .min-h-\[586px\] {
    min-height: 586px;
  }
  .min-h-\[844px\] {
    min-height: 844px;
  }
  .w-1\/2 {
    width: calc(1/2 * 100%);
  }
  .w-1\/3 {
    width: calc(1/3 * 100%);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-\[15px\] {
    width: 15px;
  }
  .w-\[45\%\] {
    width: 45%;
  }
  .w-\[47\%\] {
    width: 47%;
  }
  .w-\[55px\] {
    width: 55px;
  }
  .w-\[60px\] {
    width: 60px;
  }
  .w-\[90px\] {
    width: 90px;
  }
  .w-\[95\%\] {
    width: 95%;
  }
  .w-\[96\%\] {
    width: 96%;
  }
  .w-\[100px\] {
    width: 100px;
  }
  .w-\[102px\] {
    width: 102px;
  }
  .w-\[120px\] {
    width: 120px;
  }
  .w-\[128px\] {
    width: 128px;
  }
  .w-\[144px\] {
    width: 144px;
  }
  .w-\[150px\] {
    width: 150px;
  }
  .w-\[180px\] {
    width: 180px;
  }
  .w-\[250px\] {
    width: 250px;
  }
  .w-\[338px\] {
    width: 338px;
  }
  .w-\[350px\] {
    width: 350px;
  }
  .w-\[390px\] {
    width: 390px;
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: -moz-fit-content;
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-full\! {
    width: 100% !important;
  }
  .max-w-\[88px\] {
    max-width: 88px;
  }
  .max-w-\[100px\] {
    max-width: 100px;
  }
  .max-w-\[108px\] {
    max-width: 108px;
  }
  .max-w-\[120px\] {
    max-width: 120px;
  }
  .max-w-\[126px\] {
    max-width: 126px;
  }
  .max-w-\[147px\] {
    max-width: 147px;
  }
  .max-w-\[185px\] {
    max-width: 185px;
  }
  .max-w-\[250px\] {
    max-width: 250px;
  }
  .max-w-\[300px\] {
    max-width: 300px;
  }
  .max-w-\[345px\] {
    max-width: 345px;
  }
  .max-w-\[356px\] {
    max-width: 356px;
  }
  .max-w-\[368px\] {
    max-width: 368px;
  }
  .max-w-\[390px\] {
    max-width: 390px;
  }
  .max-w-\[452px\] {
    max-width: 452px;
  }
  .max-w-\[480px\] {
    max-width: 480px;
  }
  .max-w-\[500px\] {
    max-width: 500px;
  }
  .max-w-\[509px\] {
    max-width: 509px;
  }
  .max-w-\[512px\] {
    max-width: 512px;
  }
  .max-w-\[528px\] {
    max-width: 528px;
  }
  .max-w-\[540px\] {
    max-width: 540px;
  }
  .max-w-\[549px\] {
    max-width: 549px;
  }
  .max-w-\[550px\] {
    max-width: 550px;
  }
  .max-w-\[552px\] {
    max-width: 552px;
  }
  .max-w-\[566px\] {
    max-width: 566px;
  }
  .max-w-\[600px\] {
    max-width: 600px;
  }
  .max-w-\[642px\] {
    max-width: 642px;
  }
  .max-w-\[657px\] {
    max-width: 657px;
  }
  .max-w-\[670px\] {
    max-width: 670px;
  }
  .max-w-\[932px\] {
    max-width: 932px;
  }
  .max-w-\[950px\] {
    max-width: 950px;
  }
  .max-w-\[1101px\] {
    max-width: 1101px;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .min-w-21 {
    min-width: calc(var(--spacing) * 21);
  }
  .min-w-\[100px\] {
    min-width: 100px;
  }
  .min-w-\[566px\] {
    min-width: 566px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-1\! {
    flex: 1 !important;
  }
  .flex-none {
    flex: none;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .origin-top {
    transform-origin: top;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-4 {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-4 {
    --tw-translate-y: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-0 {
    --tw-scale-x: 0%;
    --tw-scale-y: 0%;
    --tw-scale-z: 0%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .-rotate-180 {
    rotate: calc(180deg * -1);
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .rotate-\[-40deg\] {
    rotate: -40deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-marquee {
    animation: var(--animate-marquee);
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .\[appearance\:textfield\] {
    -webkit-appearance: textfield;
       -moz-appearance: textfield;
            appearance: textfield;
  }
  .appearance-none {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-0 {
    -moz-column-gap: calc(var(--spacing) * 0);
         column-gap: calc(var(--spacing) * 0);
  }
  .gap-x-1 {
    -moz-column-gap: calc(var(--spacing) * 1);
         column-gap: calc(var(--spacing) * 1);
  }
  .gap-x-1\.5 {
    -moz-column-gap: calc(var(--spacing) * 1.5);
         column-gap: calc(var(--spacing) * 1.5);
  }
  .gap-x-2 {
    -moz-column-gap: calc(var(--spacing) * 2);
         column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-2\.5 {
    -moz-column-gap: calc(var(--spacing) * 2.5);
         column-gap: calc(var(--spacing) * 2.5);
  }
  .gap-x-3 {
    -moz-column-gap: calc(var(--spacing) * 3);
         column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    -moz-column-gap: calc(var(--spacing) * 4);
         column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-5 {
    -moz-column-gap: calc(var(--spacing) * 5);
         column-gap: calc(var(--spacing) * 5);
  }
  .gap-x-6 {
    -moz-column-gap: calc(var(--spacing) * 6);
         column-gap: calc(var(--spacing) * 6);
  }
  .gap-x-8 {
    -moz-column-gap: calc(var(--spacing) * 8);
         column-gap: calc(var(--spacing) * 8);
  }
  .gap-x-10 {
    -moz-column-gap: calc(var(--spacing) * 10);
         column-gap: calc(var(--spacing) * 10);
  }
  .gap-x-15 {
    -moz-column-gap: calc(var(--spacing) * 15);
         column-gap: calc(var(--spacing) * 15);
  }
  .gap-x-\[7px\] {
    -moz-column-gap: 7px;
         column-gap: 7px;
  }
  .gap-x-\[10px\] {
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
  .gap-x-\[18px\] {
    -moz-column-gap: 18px;
         column-gap: 18px;
  }
  .gap-x-\[19px\] {
    -moz-column-gap: 19px;
         column-gap: 19px;
  }
  .gap-x-\[25px\] {
    -moz-column-gap: 25px;
         column-gap: 25px;
  }
  .gap-x-\[30px\] {
    -moz-column-gap: 30px;
         column-gap: 30px;
  }
  .gap-x-\[54px\] {
    -moz-column-gap: 54px;
         column-gap: 54px;
  }
  .gap-x-px {
    -moz-column-gap: 1px;
         column-gap: 1px;
  }
  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * 0.5);
  }
  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }
  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-2\.5 {
    row-gap: calc(var(--spacing) * 2.5);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
  .gap-y-5 {
    row-gap: calc(var(--spacing) * 5);
  }
  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }
  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }
  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }
  .gap-y-12 {
    row-gap: calc(var(--spacing) * 12);
  }
  .gap-y-\[6px\] {
    row-gap: 6px;
  }
  .gap-y-\[15px\] {
    row-gap: 15px;
  }
  .gap-y-\[22px\] {
    row-gap: 22px;
  }
  .gap-y-\[25px\] {
    row-gap: 25px;
  }
  .divide-x {
    :where(& > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }
  }
  .divide-x-0 {
    :where(& > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(0px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-\[rgba\(145\,158\,171\,0\.24\)\] {
    :where(& > :not(:last-child)) {
      border-color: rgba(145,158,171,0.24);
    }
  }
  .divide-gray-300 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-300);
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-x-scroll {
    overflow-x: scroll;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-4xl {
    border-radius: var(--radius-4xl);
  }
  .rounded-5xl {
    border-radius: var(--radius-5xl);
  }
  .rounded-\[20px\] {
    border-radius: 20px;
  }
  .rounded-\[30px\] {
    border-radius: 30px;
  }
  .rounded-\[32px\] {
    border-radius: 32px;
  }
  .rounded-\[50px\] {
    border-radius: 50px;
  }
  .rounded-\[55px\] {
    border-radius: 55px;
  }
  .rounded-\[60px\] {
    border-radius: 60px;
  }
  .rounded-\[80px\] {
    border-radius: 80px;
  }
  .rounded-\[90px\] {
    border-radius: 90px;
  }
  .rounded-\[100px\] {
    border-radius: 100px;
  }
  .rounded-\[100px\]\! {
    border-radius: 100px !important;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-none {
    border-radius: 0;
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-t-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
  }
  .rounded-t-3xl {
    border-top-left-radius: var(--radius-3xl);
    border-top-right-radius: var(--radius-3xl);
  }
  .rounded-l-lg {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .rounded-l-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .rounded-tl-2xl {
    border-top-left-radius: var(--radius-2xl);
  }
  .rounded-tl-none\! {
    border-top-left-radius: 0 !important;
  }
  .rounded-tl-sm {
    border-top-left-radius: var(--radius-sm);
  }
  .rounded-r-3xl {
    border-top-right-radius: var(--radius-3xl);
    border-bottom-right-radius: var(--radius-3xl);
  }
  .rounded-r-\[100px\] {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
  }
  .rounded-r-lg {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .rounded-tr-2xl {
    border-top-right-radius: var(--radius-2xl);
  }
  .rounded-tr-sm {
    border-top-right-radius: var(--radius-sm);
  }
  .rounded-b-2xl {
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
  }
  .rounded-br-2xl {
    border-bottom-right-radius: var(--radius-2xl);
  }
  .rounded-br-sm {
    border-bottom-right-radius: var(--radius-sm);
  }
  .rounded-bl-2xl {
    border-bottom-left-radius: var(--radius-2xl);
  }
  .rounded-bl-none\! {
    border-bottom-left-radius: 0 !important;
  }
  .rounded-bl-sm {
    border-bottom-left-radius: var(--radius-sm);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-\[3px\] {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  .border-x {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
  }
  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-r-0 {
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-0 {
    border-left-style: var(--tw-border-style);
    border-left-width: 0px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-none\! {
    --tw-border-style: none !important;
    border-style: none !important;
  }
  .border-\[\#161C24\] {
    border-color: #161C24;
  }
  .border-\[\#919EAB3D\] {
    border-color: #919EAB3D;
  }
  .border-\[rgba\(145\,158\,171\,0\.24\)\] {
    border-color: rgba(145,158,171,0.24);
  }
  .border-\[text-light-primary-text\] {
    border-color: text-light-primary-text;
  }
  .border-error {
    border-color: var(--color-error);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-gray-500\/24 {
    border-color: color-mix(in srgb, #919eab 24%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gray-500) 24%, transparent);
    }
  }
  .border-primary {
    border-color: var(--color-primary);
  }
  .border-primary-dark {
    border-color: var(--color-primary-dark);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-white {
    border-color: var(--color-white);
  }
  .border-b-\[rgba\(145\,158\,171\,0\.24\)\] {
    border-bottom-color: rgba(145,158,171,0.24);
  }
  .border-b-gray-300 {
    border-bottom-color: var(--color-gray-300);
  }
  .bg-\[\#00AB5514\] {
    background-color: #00AB5514;
  }
  .bg-\[\#5ED9BA\] {
    background-color: #5ED9BA;
  }
  .bg-\[\#8EBDD1\] {
    background-color: #8EBDD1;
  }
  .bg-\[\#9EE872\] {
    background-color: #9EE872;
  }
  .bg-\[\#74CAFF\] {
    background-color: #74CAFF;
  }
  .bg-\[\#84A9FF\] {
    background-color: #84A9FF;
  }
  .bg-\[\#92BDF5\] {
    background-color: #92BDF5;
  }
  .bg-\[\#161C247A\] {
    background-color: #161C247A;
  }
  .bg-\[\#919EAB14\] {
    background-color: #919EAB14;
  }
  .bg-\[\#A0E2E0\] {
    background-color: #A0E2E0;
  }
  .bg-\[\#A4F7CC\] {
    background-color: #A4F7CC;
  }
  .bg-\[\#AAF27F\] {
    background-color: #AAF27F;
  }
  .bg-\[\#C0ECFF\] {
    background-color: #C0ECFF;
  }
  .bg-\[\#C0F2DC\] {
    background-color: #C0F2DC;
  }
  .bg-\[\#D0AEFF\] {
    background-color: #D0AEFF;
  }
  .bg-\[\#D3F3FF\] {
    background-color: #D3F3FF;
  }
  .bg-\[\#D5FFFC\] {
    background-color: #D5FFFC;
  }
  .bg-\[\#DBFFF0\] {
    background-color: #DBFFF0;
  }
  .bg-\[\#E2FFFC\] {
    background-color: #E2FFFC;
  }
  .bg-\[\#E5F6FF\] {
    background-color: #E5F6FF;
  }
  .bg-\[\#E6F9FF\] {
    background-color: #E6F9FF;
  }
  .bg-\[\#E6FFDB\] {
    background-color: #E6FFDB;
  }
  .bg-\[\#EDEDED\] {
    background-color: #EDEDED;
  }
  .bg-\[\#F0F0F0\] {
    background-color: #F0F0F0;
  }
  .bg-\[\#F4F3F5\] {
    background-color: #F4F3F5;
  }
  .bg-\[\#F4F5F6\] {
    background-color: #F4F5F6;
  }
  .bg-\[\#F4F6F8\] {
    background-color: #F4F6F8;
  }
  .bg-\[\#FF4842\]\/12 {
    background-color: color-mix(in oklab, #FF4842 12%, transparent);
  }
  .bg-\[\#FFC091\] {
    background-color: #FFC091;
  }
  .bg-\[\#FFCFD1\] {
    background-color: #FFCFD1;
  }
  .bg-\[\#FFD6EF\] {
    background-color: #FFD6EF;
  }
  .bg-\[\#FFE0F9\] {
    background-color: #FFE0F9;
  }
  .bg-\[\#FFE3D9\] {
    background-color: #FFE3D9;
  }
  .bg-\[\#FFE4DA\] {
    background-color: #FFE4DA;
  }
  .bg-\[\#FFE9D7\] {
    background-color: #FFE9D7;
  }
  .bg-\[\#FFE16A\] {
    background-color: #FFE16A;
  }
  .bg-\[\#FFE700\] {
    background-color: #FFE700;
  }
  .bg-\[\#FFEB69\] {
    background-color: #FFEB69;
  }
  .bg-\[\#FFEFF6\] {
    background-color: #FFEFF6;
  }
  .bg-\[\#FFF0F9\] {
    background-color: #FFF0F9;
  }
  .bg-\[\#FFF1F0\] {
    background-color: #FFF1F0;
  }
  .bg-\[\#FFF5FB\] {
    background-color: #FFF5FB;
  }
  .bg-\[\#FFF8CC\] {
    background-color: #FFF8CC;
  }
  .bg-\[\#FFF9D3\] {
    background-color: #FFF9D3;
  }
  .bg-\[rgba\(0\,171\,85\,0\.08\)\] {
    background-color: rgba(0,171,85,0.08);
  }
  .bg-\[rgba\(24\,144\,255\,0\.16\)\] {
    background-color: rgba(24,144,255,0.16);
  }
  .bg-\[rgba\(84\,214\,44\,0\.16\)\] {
    background-color: rgba(84,214,44,0.16);
  }
  .bg-\[rgba\(145\,158\,171\,0\.08\)\] {
    background-color: rgba(145,158,171,0.08);
  }
  .bg-\[rgba\(145\,158\,171\,0\.16\)\] {
    background-color: rgba(145,158,171,0.16);
  }
  .bg-\[rgba\(145\,158\,171\,0\.24\)\] {
    background-color: rgba(145,158,171,0.24);
  }
  .bg-\[rgba\(145\,158\,171\,0\.32\)\] {
    background-color: rgba(145,158,171,0.32);
  }
  .bg-\[rgba\(255\,72\,66\,0\.08\)\] {
    background-color: rgba(255,72,66,0.08);
  }
  .bg-\[rgba\(255\,72\,66\,0\.16\)\] {
    background-color: rgba(255,72,66,0.16);
  }
  .bg-\[rgba\(255\,193\,7\,0\.16\)\] {
    background-color: rgba(255,193,7,0.16);
  }
  .bg-\[rgba\(255\,235\,105\,1\)\] {
    background-color: rgba(255,235,105,1);
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-black\/20 {
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }
  .bg-error {
    background-color: var(--color-error);
  }
  .bg-error-dark {
    background-color: var(--color-error-dark);
  }
  .bg-error-light {
    background-color: var(--color-error-light);
  }
  .bg-error-lighter {
    background-color: var(--color-error-lighter);
  }
  .bg-error\/8 {
    background-color: color-mix(in srgb, #cb0233 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-error) 8%, transparent);
    }
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }
  .bg-info {
    background-color: var(--color-info);
  }
  .bg-info-darker {
    background-color: var(--color-info-darker);
  }
  .bg-primary {
    background-color: var(--color-primary);
  }
  .bg-primary-dark {
    background-color: var(--color-primary-dark);
  }
  .bg-primary-darker {
    background-color: var(--color-primary-darker);
  }
  .bg-primary-light {
    background-color: var(--color-primary-light);
  }
  .bg-primary-lighter {
    background-color: var(--color-primary-lighter);
  }
  .bg-primary\/8 {
    background-color: color-mix(in srgb, #088178 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary) 8%, transparent);
    }
  }
  .bg-success-light {
    background-color: var(--color-success-light);
  }
  .bg-success-lighter {
    background-color: var(--color-success-lighter);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-warning {
    background-color: var(--color-warning);
  }
  .bg-warning-light {
    background-color: var(--color-warning-light);
  }
  .bg-warning-lighter {
    background-color: var(--color-warning-lighter);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-\[url\(\'\.\.\/images\/bottom-border\.png\'\)\] {
    background-image: url('../images/bottom-border.png');
  }
  .bg-\[url\(\'\.\.\/images\/home-4\/black-dress-woman\.png\'\)\] {
    background-image: url('../images/home-4/black-dress-woman.png');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-bg-1\.png\'\)\] {
    background-image: url('../images/home-5/promo-bg-1.png');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-bg-2\.jpg\'\)\] {
    background-image: url('../images/home-5/promo-bg-2.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-bg-3\.jpg\'\)\] {
    background-image: url('../images/home-5/promo-bg-3.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-bg-4\.png\'\)\] {
    background-image: url('../images/home-5/promo-bg-4.png');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-grid-1\.jpg\'\)\] {
    background-image: url('../images/home-5/promo-grid-1.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-grid-2\.jpg\'\)\] {
    background-image: url('../images/home-5/promo-grid-2.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/home-5\/promo-grid-3\.jpg\'\)\] {
    background-image: url('../images/home-5/promo-grid-3.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/product-details\/product-details-9\.jpg\'\)\] {
    background-image: url('../images/product-details/product-details-9.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/product-details\/product-details-10\.jpg\'\)\] {
    background-image: url('../images/product-details/product-details-10.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/product-details\/product-details-11\.jpg\'\)\] {
    background-image: url('../images/product-details/product-details-11.png');
  }
  .bg-\[url\(\'\.\.\/images\/product-details\/product-details-12\.jpg\'\)\] {
    background-image: url('../images/product-details/product-details-12.jpg');
  }
  .bg-\[url\(\'\.\.\/images\/product-details\/product-details-13\.png\'\)\] {
    background-image: url('../images/product-details/product-details-13.png');
  }
  .bg-\[url\(\'\.\.\/images\/star-icon\.png\'\)\] {
    background-image: url('../images/star-icon.png');
  }
  .bg-\[url\(\'\/assets\/images\/home-2\/apply-facewash\.jpg\'\)\] {
    background-image: url('../images/home-2/apply-facewash.jpg');
  }
  .bg-\[url\(\'\/assets\/images\/home-3\/tomato-ketchup-bg\.png\'\)\] {
    background-image: url('../images/home-3/tomato-ketchup-bg.png');
  }
  .bg-\[url\(\.\.\/images\/home-2\/apply-makeup-1\.jpg\)\] {
    background-image: url(../images/home-2/apply-makeup-1.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/apply-makeup-2\.jpg\)\] {
    background-image: url(../images/home-2/apply-makeup-2.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/cosmetic-bg\.jpg\)\] {
    background-image: url(../images/home-2/cosmetic-bg.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/female\.jpg\)\] {
    background-image: url(../images/home-2/female.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/hero-promo-1\.png\)\] {
    background-image: url(../images/home-2/hero-promo-1.png);
  }
  .bg-\[url\(\.\.\/images\/home-2\/hero-promo-2\.png\)\] {
    background-image: url(../images/home-2/hero-promo-2.png);
  }
  .bg-\[url\(\.\.\/images\/home-2\/promo-bg-1\.jpg\)\] {
    background-image: url(../images/home-2/promo-bg-1.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/promo-bg-2\.jpg\)\] {
    background-image: url(../images/home-2/promo-bg-2.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/promo-bg-3\.jpg\)\] {
    background-image: url(../images/home-2/promo-bg-3.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-2\/promo-bg-4\.jpg\)\] {
    background-image: url(../images/home-2/promo-bg-4.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-3\/corn-can-bg\.png\)\] {
    background-image: url(../images/home-3/corn-can-bg.png);
  }
  .bg-\[url\(\.\.\/images\/home-3\/hot-sauce-bg\.jpg\)\] {
    background-image: url(../images/home-3/hot-sauce-bg.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-3\/mango-juice-bg\.png\)\] {
    background-image: url(../images/home-3/mango-juice-bg.png);
  }
  .bg-\[url\(\.\.\/images\/home-3\/tomato-ketchup-bg\.png\)\] {
    background-image: url(../images/home-3/tomato-ketchup-bg.png);
  }
  .bg-\[url\(\.\.\/images\/home-4\/kid-with-skateboard\.jpg\)\] {
    background-image: url(../images/home-4/kid-with-skateboard.jpg);
  }
  .bg-\[url\(\.\.\/images\/home-4\/man-woman\.png\)\] {
    background-image: url(../images/home-4/man-woman.png);
  }
  .bg-\[url\(\.\.\/images\/home-5\/countdown-bg\.png\)\] {
    background-image: url(../images/home-5/countdown-bg.png);
  }
  .bg-\[url\(\/assets\/images\/home-2\/promo-bg-3\.jpg\)\] {
    background-image: url(../images/home-2/promo-bg-3.jpg);
  }
  .bg-\[url\(\/assets\/images\/home-4\/2-women-red-dress\.png\)\] {
    background-image: url(../images/home-4/2-women-red-dress.png);
  }
  .bg-\[url\(\/assets\/images\/home-4\/promo-card-2\.png\)\] {
    background-image: url(../images/home-4/promo-card-2.png);
  }
  .bg-\[url\(\/assets\/images\/home-4\/promo-card-3\.png\)\] {
    background-image: url(../images/home-4/promo-card-3.png);
  }
  .bg-cover {
    background-size: cover;
  }
  .bg-bottom {
    background-position: bottom;
  }
  .bg-center {
    background-position: center;
  }
  .bg-left {
    background-position: left;
  }
  .bg-position-\[0_-18px\] {
    background-position: 0 -18px;
  }
  .bg-position-\[0_0\] {
    background-position: 0 0;
  }
  .bg-right {
    background-position: right;
  }
  .bg-top {
    background-position: top;
  }
  .bg-no-repeat {
    background-repeat: no-repeat;
  }
  .bg-repeat-x {
    background-repeat: repeat-x;
  }
  .object-cover {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .object-top {
    -o-object-position: top;
       object-position: top;
  }
  .p-0\! {
    padding: calc(var(--spacing) * 0) !important;
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .p-\[34px\] {
    padding: 34px;
  }
  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-5\.5 {
    padding-inline: calc(var(--spacing) * 5.5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-6\.5 {
    padding-inline: calc(var(--spacing) * 6.5);
  }
  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }
  .px-11 {
    padding-inline: calc(var(--spacing) * 11);
  }
  .px-15 {
    padding-inline: calc(var(--spacing) * 15);
  }
  .px-\[9px\] {
    padding-inline: 9px;
  }
  .px-\[13px\] {
    padding-inline: 13px;
  }
  .px-\[15px\] {
    padding-inline: 15px;
  }
  .px-\[17px\] {
    padding-inline: 17px;
  }
  .px-\[19px\] {
    padding-inline: 19px;
  }
  .px-\[21px\] {
    padding-inline: 21px;
  }
  .px-\[22px\] {
    padding-inline: 22px;
  }
  .px-\[25px\] {
    padding-inline: 25px;
  }
  .px-\[29px\] {
    padding-inline: 29px;
  }
  .px-\[32\.5px\] {
    padding-inline: 32.5px;
  }
  .px-\[35px\] {
    padding-inline: 35px;
  }
  .px-\[38px\] {
    padding-inline: 38px;
  }
  .px-\[51px\] {
    padding-inline: 51px;
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-5\.5 {
    padding-block: calc(var(--spacing) * 5.5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-\[3px\] {
    padding-block: 3px;
  }
  .py-\[5px\] {
    padding-block: 5px;
  }
  .py-\[7px\] {
    padding-block: 7px;
  }
  .py-\[9px\] {
    padding-block: 9px;
  }
  .py-\[11px\] {
    padding-block: 11px;
  }
  .py-\[15px\] {
    padding-block: 15px;
  }
  .py-\[18px\] {
    padding-block: 18px;
  }
  .py-\[29px\] {
    padding-block: 29px;
  }
  .py-\[31px\] {
    padding-block: 31px;
  }
  .py-\[33px\] {
    padding-block: 33px;
  }
  .py-\[37px\] {
    padding-block: 37px;
  }
  .py-\[70px\] {
    padding-block: 70px;
  }
  .py-\[78px\] {
    padding-block: 78px;
  }
  .py-\[120px\] {
    padding-block: 120px;
  }
  .py-px {
    padding-block: 1px;
  }
  .ps-3\.5 {
    padding-inline-start: calc(var(--spacing) * 3.5);
  }
  .ps-4 {
    padding-inline-start: calc(var(--spacing) * 4);
  }
  .pe-6 {
    padding-inline-end: calc(var(--spacing) * 6);
  }
  .pe-24 {
    padding-inline-end: calc(var(--spacing) * 24);
  }
  .pt-0\.5 {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-9 {
    padding-top: calc(var(--spacing) * 9);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }
  .pt-40 {
    padding-top: calc(var(--spacing) * 40);
  }
  .pt-\[13px\] {
    padding-top: 13px;
  }
  .pt-\[21px\] {
    padding-top: 21px;
  }
  .pt-\[22px\] {
    padding-top: 22px;
  }
  .pt-\[40px\] {
    padding-top: 40px;
  }
  .pt-\[42px\] {
    padding-top: 42px;
  }
  .pt-\[62px\] {
    padding-top: 62px;
  }
  .pt-\[70px\] {
    padding-top: 70px;
  }
  .pt-\[92px\] {
    padding-top: 92px;
  }
  .pr-0 {
    padding-right: calc(var(--spacing) * 0);
  }
  .pr-0\! {
    padding-right: calc(var(--spacing) * 0) !important;
  }
  .pr-1\.5 {
    padding-right: calc(var(--spacing) * 1.5);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }
  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }
  .pr-8\.5 {
    padding-right: calc(var(--spacing) * 8.5);
  }
  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }
  .pr-24 {
    padding-right: calc(var(--spacing) * 24);
  }
  .pr-\[19px\] {
    padding-right: 19px;
  }
  .pr-\[30px\] {
    padding-right: 30px;
  }
  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }
  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * 0.5);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-9 {
    padding-bottom: calc(var(--spacing) * 9);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pb-15 {
    padding-bottom: calc(var(--spacing) * 15);
  }
  .pb-\[5px\] {
    padding-bottom: 5px;
  }
  .pb-\[7px\] {
    padding-bottom: 7px;
  }
  .pb-\[22px\] {
    padding-bottom: 22px;
  }
  .pb-\[27px\] {
    padding-bottom: 27px;
  }
  .pb-\[50px\] {
    padding-bottom: 50px;
  }
  .pb-\[70px\] {
    padding-bottom: 70px;
  }
  .pb-\[74px\] {
    padding-bottom: 74px;
  }
  .pb-\[90px\] {
    padding-bottom: 90px;
  }
  .pb-\[100px\] {
    padding-bottom: 100px;
  }
  .pb-px {
    padding-bottom: 1px;
  }
  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }
  .pl-0\! {
    padding-left: calc(var(--spacing) * 0) !important;
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-3\.5 {
    padding-left: calc(var(--spacing) * 3.5);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .pl-8\.5 {
    padding-left: calc(var(--spacing) * 8.5);
  }
  .pl-11 {
    padding-left: calc(var(--spacing) * 11);
  }
  .pl-\[30px\] {
    padding-left: 30px;
  }
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-bottom {
    vertical-align: bottom;
  }
  .font-dm-sans {
    font-family: var(--font-dm-sans);
  }
  .font-urbanist {
    font-family: var(--font-urbanist);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-sm\! {
    font-size: var(--text-sm) !important;
    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[16px\] {
    font-size: 16px;
  }
  .text-\[18px\] {
    font-size: 18px;
  }
  .text-\[20px\] {
    font-size: 20px;
  }
  .text-\[22px\] {
    font-size: 22px;
  }
  .text-\[32px\] {
    font-size: 32px;
  }
  .text-\[86px\] {
    font-size: 86px;
  }
  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .leading-4\.5 {
    --tw-leading: calc(var(--spacing) * 4.5);
    line-height: calc(var(--spacing) * 4.5);
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-5\.5 {
    --tw-leading: calc(var(--spacing) * 5.5);
    line-height: calc(var(--spacing) * 5.5);
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }
  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }
  .leading-9 {
    --tw-leading: calc(var(--spacing) * 9);
    line-height: calc(var(--spacing) * 9);
  }
  .leading-\[10px\] {
    --tw-leading: 10px;
    line-height: 10px;
  }
  .leading-\[18px\] {
    --tw-leading: 18px;
    line-height: 18px;
  }
  .leading-\[22px\] {
    --tw-leading: 22px;
    line-height: 22px;
  }
  .leading-\[22px\]\! {
    --tw-leading: 22px !important;
    line-height: 22px !important;
  }
  .leading-\[26px\] {
    --tw-leading: 26px;
    line-height: 26px;
  }
  .leading-\[30px\] {
    --tw-leading: 30px;
    line-height: 30px;
  }
  .leading-\[48px\] {
    --tw-leading: 48px;
    line-height: 48px;
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-normal\! {
    --tw-font-weight: var(--font-weight-normal) !important;
    font-weight: var(--font-weight-normal) !important;
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-\[\#919EABCC\] {
    color: #919EABCC;
  }
  .text-\[rgba\(145\,158\,171\,0\.8\)\] {
    color: rgba(145,158,171,0.8);
  }
  .text-black {
    color: var(--color-black);
  }
  .text-dark-secondary-text {
    color: var(--color-dark-secondary-text) !important;
  }
  .text-error {
    color: var(--color-error);
  }
  .text-error-dark {
    color: var(--color-error-dark);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-info {
    color: var(--color-info);
  }
  .text-info-dark {
    color: var(--color-info-dark);
  }
  .text-light-disabled-text {
    color: var(--color-light-disabled-text);
  }
  .text-light-primary-text {
    color: var(--color-light-primary-text);
  }
  .text-light-primary-text\! {
    color: var(--color-light-primary-text) !important;
  }
  .text-light-secondary-text {
    color: var(--color-light-secondary-text);
  }
  .text-primary {
    color: var(--color-primary);
  }
  .text-primary-dark {
    color: var(--color-primary-dark);
  }
  .text-primary-darker {
    color: var(--color-primary-darker);
  }
  .text-primary-lighter {
    color: var(--color-primary-lighter);
  }
  .text-secondary {
    color: var(--color-secondary);
  }
  .text-success {
    color: var(--color-success);
  }
  .text-success-dark {
    color: var(--color-success-dark);
  }
  .text-warning-dark {
    color: var(--color-warning-dark);
  }
  .text-warning-lighter {
    color: var(--color-warning-lighter);
  }
  .text-white {
    color: var(--color-white);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .underline {
    text-decoration-line: underline;
  }
  .placeholder-transparent {
    &::-moz-placeholder {
      color: transparent;
    }
    &::placeholder {
      color: transparent;
    }
  }
  .opacity-0 {
    opacity: 0%;
  }
  .bg-blend-overlay {
    background-blend-mode: overlay;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-dark-z-24 {
    --tw-shadow: 0px 24px 48px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-light-z-8 {
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-light-z-12 {
    --tw-shadow: 0px 12px 24px -4px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-light-z-24 {
    --tw-shadow: 0px 24px 48px 0px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-gray-300 {
    --tw-ring-color: var(--color-gray-300);
  }
  .ring-primary {
    --tw-ring-color: var(--color-primary);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    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,);
  }
  .invert {
    --tw-invert: invert(100%);
    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,);
  }
  .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, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-250 {
    --tw-duration: 250ms;
    transition-duration: 250ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-400 {
    --tw-duration: 400ms;
    transition-duration: 400ms;
  }
  .ease-\[cubic-bezier\(0\.02\,0\.01\,0\.47\,1\)\] {
    --tw-ease: cubic-bezier(0.02,0.01,0.47,1);
    transition-timing-function: cubic-bezier(0.02,0.01,0.47,1);
  }
  .ease-\[cubic-bezier\(0\.645\,0\.045\,0\.355\,1\)\] {
    --tw-ease: cubic-bezier(0.645,0.045,0.355,1);
    transition-timing-function: cubic-bezier(0.645,0.045,0.355,1);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .group-hover\:visible {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        visibility: visible;
      }
    }
  }
  .group-hover\:bottom-3 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        bottom: calc(var(--spacing) * 3);
      }
    }
  }
  .group-hover\:translate-x-0 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:translate-y-0 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:scale-110 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:-rotate-3 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        rotate: calc(3deg * -1);
      }
    }
  }
  .group-hover\:rotate-0 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        rotate: 0deg;
      }
    }
  }
  .group-hover\:border-primary {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
  .group-hover\:bg-\[\#919EAB\]\/8 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #919EAB 8%, transparent);
      }
    }
  }
  .group-hover\:bg-\[rgba\(0\,171\,85\,0\.08\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: rgba(0,171,85,0.08);
      }
    }
  }
  .group-hover\:bg-primary {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-primary);
      }
    }
  }
  .group-hover\:bg-primary-lighter {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-primary-lighter);
      }
    }
  }
  .group-hover\:font-semibold {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
      }
    }
  }
  .group-hover\:text-primary {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .group-hover\:text-white {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\/item\:visible {
    &:is(:where(.group\/item):hover *) {
      @media (hover: hover) {
        visibility: visible;
      }
    }
  }
  .group-hover\/item\:translate-x-0 {
    &:is(:where(.group\/item):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\/item\:bg-\[\#00AB55\]\/8 {
    &:is(:where(.group\/item):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #00AB55 8%, transparent);
      }
    }
  }
  .group-hover\/item\:bg-\[rgba\(0\,171\,85\,0\.08\)\] {
    &:is(:where(.group\/item):hover *) {
      @media (hover: hover) {
        background-color: rgba(0,171,85,0.08);
      }
    }
  }
  .group-hover\/item\:text-primary {
    &:is(:where(.group\/item):hover *) {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .group-hover\/item\:opacity-100 {
    &:is(:where(.group\/item):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\/sub\:text-primary {
    &:is(:where(.group\/sub):hover *) {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .group-has-\[input\:checked\]\:group-hover\:bg-\[\#00AB55\]\/8 {
    &:is(:where(.group):has(*:is(input:checked)) *) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: color-mix(in oklab, #00AB55 8%, transparent);
        }
      }
    }
  }
  .peer-checked\:scale-100 {
    &:is(:where(.peer):checked ~ *) {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .peer-checked\:opacity-100 {
    &:is(:where(.peer):checked ~ *) {
      opacity: 100%;
    }
  }
  .peer-placeholder-shown\:top-1\/2 {
    &:is(:where(.peer):-moz-placeholder ~ *) {
      top: calc(1/2 * 100%);
    }
    &:is(:where(.peer):placeholder-shown ~ *) {
      top: calc(1/2 * 100%);
    }
  }
  .peer-placeholder-shown\:top-6 {
    &:is(:where(.peer):-moz-placeholder ~ *) {
      top: calc(var(--spacing) * 6);
    }
    &:is(:where(.peer):placeholder-shown ~ *) {
      top: calc(var(--spacing) * 6);
    }
  }
  .peer-placeholder-shown\:text-\[16px\] {
    &:is(:where(.peer):-moz-placeholder ~ *) {
      font-size: 16px;
    }
    &:is(:where(.peer):placeholder-shown ~ *) {
      font-size: 16px;
    }
  }
  .peer-placeholder-shown\:text-light-disabled-text {
    &:is(:where(.peer):-moz-placeholder ~ *) {
      color: var(--color-light-disabled-text);
    }
    &:is(:where(.peer):placeholder-shown ~ *) {
      color: var(--color-light-disabled-text);
    }
  }
  .peer-focus\:top-0 {
    &:is(:where(.peer):focus ~ *) {
      top: calc(var(--spacing) * 0);
    }
  }
  .peer-focus\:left-\[14px\] {
    &:is(:where(.peer):focus ~ *) {
      left: 14px;
    }
  }
  .peer-focus\:bg-white {
    &:is(:where(.peer):focus ~ *) {
      background-color: var(--color-white);
    }
  }
  .peer-focus\:px-1 {
    &:is(:where(.peer):focus ~ *) {
      padding-inline: calc(var(--spacing) * 1);
    }
  }
  .peer-focus\:text-\[12px\] {
    &:is(:where(.peer):focus ~ *) {
      font-size: 12px;
    }
  }
  .peer-focus\:text-light-disabled-text {
    &:is(:where(.peer):focus ~ *) {
      color: var(--color-light-disabled-text);
    }
  }
  .peer-\[\:not\(\:-moz-placeholder\)\]\:top-0 {
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      top: calc(var(--spacing) * 0);
    }
  }
  .peer-\[\:not\(\:placeholder-shown\)\]\:top-0 {
    &:is(:where(.peer):is(:not(:-moz-placeholder)) ~ *) {
      top: calc(var(--spacing) * 0);
    }
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      top: calc(var(--spacing) * 0);
    }
  }
  .peer-\[\:not\(\:-moz-placeholder\)\]\:left-\[14px\] {
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      left: 14px;
    }
  }
  .peer-\[\:not\(\:placeholder-shown\)\]\:left-\[14px\] {
    &:is(:where(.peer):is(:not(:-moz-placeholder)) ~ *) {
      left: 14px;
    }
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      left: 14px;
    }
  }
  .peer-\[\:not\(\:-moz-placeholder\)\]\:bg-white {
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      background-color: var(--color-white);
    }
  }
  .peer-\[\:not\(\:placeholder-shown\)\]\:bg-white {
    &:is(:where(.peer):is(:not(:-moz-placeholder)) ~ *) {
      background-color: var(--color-white);
    }
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      background-color: var(--color-white);
    }
  }
  .peer-\[\:not\(\:-moz-placeholder\)\]\:px-1 {
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      padding-inline: calc(var(--spacing) * 1);
    }
  }
  .peer-\[\:not\(\:placeholder-shown\)\]\:px-1 {
    &:is(:where(.peer):is(:not(:-moz-placeholder)) ~ *) {
      padding-inline: calc(var(--spacing) * 1);
    }
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      padding-inline: calc(var(--spacing) * 1);
    }
  }
  .peer-\[\:not\(\:-moz-placeholder\)\]\:text-\[12px\] {
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      font-size: 12px;
    }
  }
  .peer-\[\:not\(\:placeholder-shown\)\]\:text-\[12px\] {
    &:is(:where(.peer):is(:not(:-moz-placeholder)) ~ *) {
      font-size: 12px;
    }
    &:is(:where(.peer):is(:not(:placeholder-shown)) ~ *) {
      font-size: 12px;
    }
  }
  .before\:invisible {
    &::before {
      content: var(--tw-content);
      visibility: hidden;
    }
  }
  .before\:absolute {
    &::before {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .before\:inset-x-0 {
    &::before {
      content: var(--tw-content);
      inset-inline: calc(var(--spacing) * 0);
    }
  }
  .before\:top-0 {
    &::before {
      content: var(--tw-content);
      top: calc(var(--spacing) * 0);
    }
  }
  .before\:top-1\/2 {
    &::before {
      content: var(--tw-content);
      top: calc(1/2 * 100%);
    }
  }
  .before\:bottom-full {
    &::before {
      content: var(--tw-content);
      bottom: 100%;
    }
  }
  .before\:left-0 {
    &::before {
      content: var(--tw-content);
      left: calc(var(--spacing) * 0);
    }
  }
  .before\:left-1\/2 {
    &::before {
      content: var(--tw-content);
      left: calc(1/2 * 100%);
    }
  }
  .before\:left-\[calc\(50\%-8px\)\] {
    &::before {
      content: var(--tw-content);
      left: calc(50% - 8px);
    }
  }
  .before\:-z-1 {
    &::before {
      content: var(--tw-content);
      z-index: calc(1 * -1);
    }
  }
  .before\:-z-10 {
    &::before {
      content: var(--tw-content);
      z-index: calc(10 * -1);
    }
  }
  .before\:z-9 {
    &::before {
      content: var(--tw-content);
      z-index: 9;
    }
  }
  .before\:z-\[-1\] {
    &::before {
      content: var(--tw-content);
      z-index: -1;
    }
  }
  .before\:-mb-3\.5 {
    &::before {
      content: var(--tw-content);
      margin-bottom: calc(var(--spacing) * -3.5);
    }
  }
  .before\:h-\[64px\] {
    &::before {
      content: var(--tw-content);
      height: 64px;
    }
  }
  .before\:h-px {
    &::before {
      content: var(--tw-content);
      height: 1px;
    }
  }
  .before\:w-\[144px\] {
    &::before {
      content: var(--tw-content);
      width: 144px;
    }
  }
  .before\:w-full {
    &::before {
      content: var(--tw-content);
      width: 100%;
    }
  }
  .before\:-translate-x-1\/2 {
    &::before {
      content: var(--tw-content);
      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .before\:-translate-y-1\/2 {
    &::before {
      content: var(--tw-content);
      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .before\:-rotate-45 {
    &::before {
      content: var(--tw-content);
      rotate: calc(45deg * -1);
    }
  }
  .before\:border-8 {
    &::before {
      content: var(--tw-content);
      border-style: var(--tw-border-style);
      border-width: 8px;
    }
  }
  .before\:border-transparent {
    &::before {
      content: var(--tw-content);
      border-color: transparent;
    }
  }
  .before\:border-t-black {
    &::before {
      content: var(--tw-content);
      border-top-color: var(--color-black);
    }
  }
  .before\:bg-gray-300 {
    &::before {
      content: var(--tw-content);
      background-color: var(--color-gray-300);
    }
  }
  .before\:bg-neutral-300 {
    &::before {
      content: var(--tw-content);
      background-color: var(--color-neutral-300);
    }
  }
  .before\:bg-\[url\(\'\.\.\/images\/vendor-filter-top-shape\.png\'\)\] {
    &::before {
      content: var(--tw-content);
      background-image: url('../images/vendor-filter-top-shape.png');
    }
  }
  .before\:bg-no-repeat {
    &::before {
      content: var(--tw-content);
      background-repeat: no-repeat;
    }
  }
  .before\:opacity-0 {
    &::before {
      content: var(--tw-content);
      opacity: 0%;
    }
  }
  .before\:transition-all {
    &::before {
      content: var(--tw-content);
      transition-property: all;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .before\:transition-transform {
    &::before {
      content: var(--tw-content);
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .before\:duration-300 {
    &::before {
      content: var(--tw-content);
      --tw-duration: 300ms;
      transition-duration: 300ms;
    }
  }
  .after\:invisible {
    &::after {
      content: var(--tw-content);
      visibility: hidden;
    }
  }
  .after\:absolute {
    &::after {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .after\:inset-x-0 {
    &::after {
      content: var(--tw-content);
      inset-inline: calc(var(--spacing) * 0);
    }
  }
  .after\:start-3\.5 {
    &::after {
      content: var(--tw-content);
      inset-inline-start: calc(var(--spacing) * 3.5);
    }
  }
  .after\:top-0 {
    &::after {
      content: var(--tw-content);
      top: calc(var(--spacing) * 0);
    }
  }
  .after\:top-1\/2 {
    &::after {
      content: var(--tw-content);
      top: calc(1/2 * 100%);
    }
  }
  .after\:top-2 {
    &::after {
      content: var(--tw-content);
      top: calc(var(--spacing) * 2);
    }
  }
  .after\:right-0 {
    &::after {
      content: var(--tw-content);
      right: calc(var(--spacing) * 0);
    }
  }
  .after\:bottom-0 {
    &::after {
      content: var(--tw-content);
      bottom: calc(var(--spacing) * 0);
    }
  }
  .after\:bottom-full {
    &::after {
      content: var(--tw-content);
      bottom: 100%;
    }
  }
  .after\:left-1\/2 {
    &::after {
      content: var(--tw-content);
      left: calc(1/2 * 100%);
    }
  }
  .after\:left-full {
    &::after {
      content: var(--tw-content);
      left: 100%;
    }
  }
  .after\:-z-10 {
    &::after {
      content: var(--tw-content);
      z-index: calc(10 * -1);
    }
  }
  .after\:z-10 {
    &::after {
      content: var(--tw-content);
      z-index: 10;
    }
  }
  .after\:hidden {
    &::after {
      content: var(--tw-content);
      display: none;
    }
  }
  .after\:h-3 {
    &::after {
      content: var(--tw-content);
      height: calc(var(--spacing) * 3);
    }
  }
  .after\:h-6 {
    &::after {
      content: var(--tw-content);
      height: calc(var(--spacing) * 6);
    }
  }
  .after\:h-7\.5 {
    &::after {
      content: var(--tw-content);
      height: calc(var(--spacing) * 7.5);
    }
  }
  .after\:h-\[22px\] {
    &::after {
      content: var(--tw-content);
      height: 22px;
    }
  }
  .after\:h-full {
    &::after {
      content: var(--tw-content);
      height: 100%;
    }
  }
  .after\:h-px {
    &::after {
      content: var(--tw-content);
      height: 1px;
    }
  }
  .after\:w-1 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 1);
    }
  }
  .after\:w-px {
    &::after {
      content: var(--tw-content);
      width: 1px;
    }
  }
  .after\:-translate-x-1 {
    &::after {
      content: var(--tw-content);
      --tw-translate-x: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .after\:-translate-x-1\/2 {
    &::after {
      content: var(--tw-content);
      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .after\:-translate-y-1\/2 {
    &::after {
      content: var(--tw-content);
      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .after\:rotate-45 {
    &::after {
      content: var(--tw-content);
      rotate: 45deg;
    }
  }
  .after\:rounded-sm {
    &::after {
      content: var(--tw-content);
      border-radius: var(--radius-sm);
    }
  }
  .after\:bg-gray-300 {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-gray-300);
    }
  }
  .after\:bg-gray-800 {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-gray-800);
    }
  }
  .after\:bg-neutral-300 {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-neutral-300);
    }
  }
  .after\:bg-primary {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-primary);
    }
  }
  .after\:bg-primary-light {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-primary-light);
    }
  }
  .after\:bg-\[url\(\'\.\.\/images\/discount-primary-shape\.png\'\)\] {
    &::after {
      content: var(--tw-content);
      background-image: url('../images/discount-primary-shape.png');
    }
  }
  .after\:bg-\[url\(\'\.\.\/images\/discount-shape\.png\'\)\] {
    &::after {
      content: var(--tw-content);
      background-image: url('../images/discount-shape.png');
    }
  }
  .after\:bg-\[url\(\'\.\.\/images\/discount-warning-shape\.png\'\)\] {
    &::after {
      content: var(--tw-content);
      background-image: url('../images/discount-warning-shape.png');
    }
  }
  .after\:bg-contain {
    &::after {
      content: var(--tw-content);
      background-size: contain;
    }
  }
  .after\:bg-no-repeat {
    &::after {
      content: var(--tw-content);
      background-repeat: no-repeat;
    }
  }
  .after\:px-2 {
    &::after {
      content: var(--tw-content);
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .after\:py-\[3px\] {
    &::after {
      content: var(--tw-content);
      padding-block: 3px;
    }
  }
  .after\:text-xs {
    &::after {
      content: var(--tw-content);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }
  .after\:leading-\[18px\] {
    &::after {
      content: var(--tw-content);
      --tw-leading: 18px;
      line-height: 18px;
    }
  }
  .after\:whitespace-nowrap {
    &::after {
      content: var(--tw-content);
      white-space: nowrap;
    }
  }
  .after\:text-white {
    &::after {
      content: var(--tw-content);
      color: var(--color-white);
    }
  }
  .after\:opacity-0 {
    &::after {
      content: var(--tw-content);
      opacity: 0%;
    }
  }
  .after\:transition-all {
    &::after {
      content: var(--tw-content);
      transition-property: all;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .after\:transition-transform {
    &::after {
      content: var(--tw-content);
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .after\:duration-300 {
    &::after {
      content: var(--tw-content);
      --tw-duration: 300ms;
      transition-duration: 300ms;
    }
  }
  .after\:content-\[attr\(aria-label\)\] {
    &::after {
      --tw-content: attr(aria-label);
      content: var(--tw-content);
    }
  }
  .first\:pt-0 {
    &:first-child {
      padding-top: calc(var(--spacing) * 0);
    }
  }
  .last\:border-b-0 {
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .last\:pb-0 {
    &:last-child {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
  .last\:after\:hidden {
    &:last-child {
      &::after {
        content: var(--tw-content);
        display: none;
      }
    }
  }
  .checked\:border-none {
    &:checked {
      --tw-border-style: none;
      border-style: none;
    }
  }
  .checked\:border-primary {
    &:checked {
      border-color: var(--color-primary);
    }
  }
  .checked\:bg-primary {
    &:checked {
      background-color: var(--color-primary);
    }
  }
  .hover\:translate-y-3 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * 3);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:translate-y-\[-5px\] {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: -5px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:scale-\[1\.15\] {
    &:hover {
      @media (hover: hover) {
        scale: 1.15;
      }
    }
  }
  .hover\:transform {
    &:hover {
      @media (hover: hover) {
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
      }
    }
  }
  .hover\:border-primary {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
  .hover\:border-warning {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-warning);
      }
    }
  }
  .hover\:bg-\[\#00AB5514\] {
    &:hover {
      @media (hover: hover) {
        background-color: #00AB5514;
      }
    }
  }
  .hover\:bg-\[\#919EAB\]\/8 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #919EAB 8%, transparent);
      }
    }
  }
  .hover\:bg-\[rgba\(145\,158\,171\,0\.08\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: rgba(145,158,171,0.08);
      }
    }
  }
  .hover\:bg-gray-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .hover\:bg-primary {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-primary);
      }
    }
  }
  .hover\:bg-primary-darker {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-primary-darker);
      }
    }
  }
  .hover\:bg-white {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
  }
  .hover\:text-primary {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:transition-all {
    &:hover {
      @media (hover: hover) {
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
      }
    }
  }
  .hover\:duration-250 {
    &:hover {
      @media (hover: hover) {
        --tw-duration: 250ms;
        transition-duration: 250ms;
      }
    }
  }
  .hover\:ease-\[cubic-bezier\(0\.02\,0\.01\,0\.47\,1\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-ease: cubic-bezier(0.02,0.01,0.47,1);
        transition-timing-function: cubic-bezier(0.02,0.01,0.47,1);
      }
    }
  }
  .hover\:before\:visible {
    &:hover {
      @media (hover: hover) {
        &::before {
          content: var(--tw-content);
          visibility: visible;
        }
      }
    }
  }
  .hover\:before\:-translate-y-2\.5 {
    &:hover {
      @media (hover: hover) {
        &::before {
          content: var(--tw-content);
          --tw-translate-y: calc(var(--spacing) * -2.5);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
  .hover\:before\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        &::before {
          content: var(--tw-content);
          opacity: 100%;
        }
      }
    }
  }
  .hover\:after\:visible {
    &:hover {
      @media (hover: hover) {
        &::after {
          content: var(--tw-content);
          visibility: visible;
        }
      }
    }
  }
  .hover\:after\:-translate-y-2\.5 {
    &:hover {
      @media (hover: hover) {
        &::after {
          content: var(--tw-content);
          --tw-translate-y: calc(var(--spacing) * -2.5);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
  .hover\:after\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        &::after {
          content: var(--tw-content);
          opacity: 100%;
        }
      }
    }
  }
  .focus\:placeholder-transparent {
    &:focus {
      &::-moz-placeholder {
        color: transparent;
      }
      &::placeholder {
        color: transparent;
      }
    }
  }
  .focus\:ring-light-primary-text {
    &:focus {
      --tw-ring-color: var(--color-light-primary-text);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .has-\[input\:checked\]\:hover\:bg-\[\#00AB55\]\/8 {
    &:has(*:is(input:checked)) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in oklab, #00AB55 8%, transparent);
        }
      }
    }
  }
  .has-\[input\:checked\]\:hover\:bg-primary\/8 {
    &:has(*:is(input:checked)) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #088178 8%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-primary) 8%, transparent);
          }
        }
      }
    }
  }
  .data-\[state\=close\]\:invisible {
    &[data-state="close"] {
      visibility: hidden;
    }
  }
  .data-\[state\=close\]\:-translate-x-\[200px\] {
    &[data-state="close"] {
      --tw-translate-x: calc(200px * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-\[state\=close\]\:translate-x-\[200px\] {
    &[data-state="close"] {
      --tw-translate-x: 200px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-\[state\=close\]\:translate-y-4 {
    &[data-state="close"] {
      --tw-translate-y: calc(var(--spacing) * 4);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-\[state\=close\]\:opacity-0 {
    &[data-state="close"] {
      opacity: 0%;
    }
  }
  .data-\[state\=open\]\:visible {
    &[data-state="open"] {
      visibility: visible;
    }
  }
  .data-\[state\=open\]\:translate-x-0 {
    &[data-state="open"] {
      --tw-translate-x: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-\[state\=open\]\:translate-y-0 {
    &[data-state="open"] {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-\[state\=open\]\:opacity-100 {
    &[data-state="open"] {
      opacity: 100%;
    }
  }
  .sm\:mb-10 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 10);
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:size-6 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 6);
      height: calc(var(--spacing) * 6);
    }
  }
  .sm\:size-20 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 20);
      height: calc(var(--spacing) * 20);
    }
  }
  .sm\:h-15 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 15);
    }
  }
  .sm\:h-\[102px\] {
    @media (width >= 40rem) {
      height: 102px;
    }
  }
  .sm\:w-15 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 15);
    }
  }
  .sm\:w-\[102px\] {
    @media (width >= 40rem) {
      width: 102px;
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:flex-nowrap {
    @media (width >= 40rem) {
      flex-wrap: nowrap;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:gap-0 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 0);
    }
  }
  .sm\:gap-x-4 {
    @media (width >= 40rem) {
      -moz-column-gap: calc(var(--spacing) * 4);
           column-gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:gap-x-5 {
    @media (width >= 40rem) {
      -moz-column-gap: calc(var(--spacing) * 5);
           column-gap: calc(var(--spacing) * 5);
    }
  }
  .sm\:gap-y-0 {
    @media (width >= 40rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .sm\:rounded-5xl {
    @media (width >= 40rem) {
      border-radius: var(--radius-5xl);
    }
  }
  .sm\:px-0 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .sm\:px-4 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .sm\:px-\[34\.5px\] {
    @media (width >= 40rem) {
      padding-inline: 34.5px;
    }
  }
  .sm\:py-10 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
  .sm\:py-\[70px\] {
    @media (width >= 40rem) {
      padding-block: 70px;
    }
  }
  .sm\:pr-2\.5 {
    @media (width >= 40rem) {
      padding-right: calc(var(--spacing) * 2.5);
    }
  }
  .sm\:pr-28 {
    @media (width >= 40rem) {
      padding-right: calc(var(--spacing) * 28);
    }
  }
  .sm\:pl-4 {
    @media (width >= 40rem) {
      padding-left: calc(var(--spacing) * 4);
    }
  }
  .sm\:text-2xl {
    @media (width >= 40rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .sm\:text-base {
    @media (width >= 40rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .sm\:text-sm {
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .sm\:text-xl {
    @media (width >= 40rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .sm\:text-\[32px\] {
    @media (width >= 40rem) {
      font-size: 32px;
    }
  }
  .sm\:leading-\[22px\] {
    @media (width >= 40rem) {
      --tw-leading: 22px;
      line-height: 22px;
    }
  }
  .md\:relative {
    @media (width >= 48rem) {
      position: relative;
    }
  }
  .md\:top-10 {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * 10);
    }
  }
  .md\:top-\[41px\] {
    @media (width >= 48rem) {
      top: 41px;
    }
  }
  .md\:top-\[45px\] {
    @media (width >= 48rem) {
      top: 45px;
    }
  }
  .md\:top-\[85px\] {
    @media (width >= 48rem) {
      top: 85px;
    }
  }
  .md\:top-\[95px\] {
    @media (width >= 48rem) {
      top: 95px;
    }
  }
  .md\:right-8 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * 8);
    }
  }
  .md\:right-60 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * 60);
    }
  }
  .md\:right-\[30px\] {
    @media (width >= 48rem) {
      right: 30px;
    }
  }
  .md\:right-\[100px\] {
    @media (width >= 48rem) {
      right: 100px;
    }
  }
  .md\:right-\[150px\] {
    @media (width >= 48rem) {
      right: 150px;
    }
  }
  .md\:right-\[160px\] {
    @media (width >= 48rem) {
      right: 160px;
    }
  }
  .md\:right-\[180px\] {
    @media (width >= 48rem) {
      right: 180px;
    }
  }
  .md\:right-\[200px\] {
    @media (width >= 48rem) {
      right: 200px;
    }
  }
  .md\:right-\[215px\] {
    @media (width >= 48rem) {
      right: 215px;
    }
  }
  .md\:right-\[265px\] {
    @media (width >= 48rem) {
      right: 265px;
    }
  }
  .md\:right-\[300px\] {
    @media (width >= 48rem) {
      right: 300px;
    }
  }
  .md\:right-\[380px\] {
    @media (width >= 48rem) {
      right: 380px;
    }
  }
  .md\:right-\[405px\] {
    @media (width >= 48rem) {
      right: 405px;
    }
  }
  .md\:bottom-8 {
    @media (width >= 48rem) {
      bottom: calc(var(--spacing) * 8);
    }
  }
  .md\:order-1 {
    @media (width >= 48rem) {
      order: 1;
    }
  }
  .md\:order-2 {
    @media (width >= 48rem) {
      order: 2;
    }
  }
  .md\:col-span-1 {
    @media (width >= 48rem) {
      grid-column: span 1 / span 1;
    }
  }
  .md\:col-span-4 {
    @media (width >= 48rem) {
      grid-column: span 4 / span 4;
    }
  }
  .md\:col-span-6 {
    @media (width >= 48rem) {
      grid-column: span 6 / span 6;
    }
  }
  .md\:col-span-12 {
    @media (width >= 48rem) {
      grid-column: span 12 / span 12;
    }
  }
  .md\:col-start-2 {
    @media (width >= 48rem) {
      grid-column-start: 2;
    }
  }
  .md\:col-end-12 {
    @media (width >= 48rem) {
      grid-column-end: 12;
    }
  }
  .md\:row-start-1 {
    @media (width >= 48rem) {
      grid-row-start: 1;
    }
  }
  .md\:-mx-3 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * -3);
    }
  }
  .md\:mt-0 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .md\:mb-0 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .md\:mb-1 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 1);
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:inline-flex {
    @media (width >= 48rem) {
      display: inline-flex;
    }
  }
  .md\:size-10 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 10);
      height: calc(var(--spacing) * 10);
    }
  }
  .md\:size-32 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 32);
      height: calc(var(--spacing) * 32);
    }
  }
  .md\:size-\[100px\] {
    @media (width >= 48rem) {
      width: 100px;
      height: 100px;
    }
  }
  .md\:h-\[120px\] {
    @media (width >= 48rem) {
      height: 120px;
    }
  }
  .md\:h-\[180px\] {
    @media (width >= 48rem) {
      height: 180px;
    }
  }
  .md\:h-\[290px\] {
    @media (width >= 48rem) {
      height: 290px;
    }
  }
  .md\:h-\[600px\]\! {
    @media (width >= 48rem) {
      height: 600px !important;
    }
  }
  .md\:h-\[702px\] {
    @media (width >= 48rem) {
      height: 702px;
    }
  }
  .md\:w-1\/2 {
    @media (width >= 48rem) {
      width: calc(1/2 * 100%);
    }
  }
  .md\:w-1\/3 {
    @media (width >= 48rem) {
      width: calc(1/3 * 100%);
    }
  }
  .md\:w-\[120px\] {
    @media (width >= 48rem) {
      width: 120px;
    }
  }
  .md\:w-\[150px\] {
    @media (width >= 48rem) {
      width: 150px;
    }
  }
  .md\:w-\[180px\] {
    @media (width >= 48rem) {
      width: 180px;
    }
  }
  .md\:w-\[255px\] {
    @media (width >= 48rem) {
      width: 255px;
    }
  }
  .md\:w-\[390px\] {
    @media (width >= 48rem) {
      width: 390px;
    }
  }
  .md\:w-\[400px\] {
    @media (width >= 48rem) {
      width: 400px;
    }
  }
  .md\:w-\[408px\] {
    @media (width >= 48rem) {
      width: 408px;
    }
  }
  .md\:w-\[460px\] {
    @media (width >= 48rem) {
      width: 460px;
    }
  }
  .md\:w-\[734px\] {
    @media (width >= 48rem) {
      width: 734px;
    }
  }
  .md\:w-auto {
    @media (width >= 48rem) {
      width: auto;
    }
  }
  .md\:max-w-80 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 80);
    }
  }
  .md\:max-w-\[380px\] {
    @media (width >= 48rem) {
      max-width: 380px;
    }
  }
  .md\:max-w-\[420px\] {
    @media (width >= 48rem) {
      max-width: 420px;
    }
  }
  .md\:min-w-\[140px\] {
    @media (width >= 48rem) {
      min-width: 140px;
    }
  }
  .md\:-translate-y-1\/2 {
    @media (width >= 48rem) {
      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:flex-nowrap {
    @media (width >= 48rem) {
      flex-wrap: nowrap;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:items-start {
    @media (width >= 48rem) {
      align-items: flex-start;
    }
  }
  .md\:justify-between {
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .md\:justify-end {
    @media (width >= 48rem) {
      justify-content: flex-end;
    }
  }
  .md\:justify-start {
    @media (width >= 48rem) {
      justify-content: flex-start;
    }
  }
  .md\:gap-4 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .md\:gap-10 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .md\:gap-x-2\.5 {
    @media (width >= 48rem) {
      -moz-column-gap: calc(var(--spacing) * 2.5);
           column-gap: calc(var(--spacing) * 2.5);
    }
  }
  .md\:gap-x-4 {
    @media (width >= 48rem) {
      -moz-column-gap: calc(var(--spacing) * 4);
           column-gap: calc(var(--spacing) * 4);
    }
  }
  .md\:gap-x-6 {
    @media (width >= 48rem) {
      -moz-column-gap: calc(var(--spacing) * 6);
           column-gap: calc(var(--spacing) * 6);
    }
  }
  .md\:gap-x-10 {
    @media (width >= 48rem) {
      -moz-column-gap: calc(var(--spacing) * 10);
           column-gap: calc(var(--spacing) * 10);
    }
  }
  .md\:gap-x-12 {
    @media (width >= 48rem) {
      -moz-column-gap: calc(var(--spacing) * 12);
           column-gap: calc(var(--spacing) * 12);
    }
  }
  .md\:gap-y-0 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .md\:gap-y-6 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 6);
    }
  }
  .md\:divide-x {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
      }
    }
  }
  .md\:divide-y-0 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(0px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
      }
    }
  }
  .md\:divide-gray-300 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        border-color: var(--color-gray-300);
      }
    }
  }
  .md\:rounded-3xl {
    @media (width >= 48rem) {
      border-radius: var(--radius-3xl);
    }
  }
  .md\:border {
    @media (width >= 48rem) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .md\:border-l {
    @media (width >= 48rem) {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }
  .md\:border-none {
    @media (width >= 48rem) {
      --tw-border-style: none;
      border-style: none;
    }
  }
  .md\:border-gray-300 {
    @media (width >= 48rem) {
      border-color: var(--color-gray-300);
    }
  }
  .md\:bg-transparent {
    @media (width >= 48rem) {
      background-color: transparent;
    }
  }
  .md\:bg-white {
    @media (width >= 48rem) {
      background-color: var(--color-white);
    }
  }
  .md\:bg-\[url\(\'\.\.\/images\/banner-horizontal-filter\/banner-1\.png\'\)\] {
    @media (width >= 48rem) {
      background-image: url('../images/banner-horizontal-filter/banner-1.png');
    }
  }
  .md\:bg-\[url\(\'\.\.\/images\/banner-horizontal-filter\/banner-2\.png\'\)\] {
    @media (width >= 48rem) {
      background-image: url('../images/banner-horizontal-filter/banner-2.png');
    }
  }
  .md\:bg-\[url\(\'\.\.\/images\/banner-horizontal-filter\/banner-3\.png\'\)\] {
    @media (width >= 48rem) {
      background-image: url('../images/banner-horizontal-filter/banner-3.png');
    }
  }
  .md\:bg-\[url\(\'\.\.\/images\/banner-horizontal-filter\/banner-4\.png\'\)\] {
    @media (width >= 48rem) {
      background-image: url('../images/banner-horizontal-filter/banner-4.png');
    }
  }
  .md\:bg-\[url\(\.\.\/images\/banner-left-sidebar\/banner-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/banner-left-sidebar/banner-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/banner-left-sidebar\/banner-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/banner-left-sidebar/banner-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/banner-left-sidebar\/banner-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/banner-left-sidebar/banner-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/full-banner\/banner-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/full-banner/banner-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/full-banner\/banner-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/full-banner/banner-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/full-banner\/banner-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/full-banner/banner-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/full-banner\/banner-4\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/full-banner/banner-4.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/full-banner\/banner-5\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/full-banner/banner-5.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-1\/hero-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-1/hero-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-1\/hero-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-1/hero-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-1\/hero-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-1/hero-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-1\/hero-4\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-1/hero-4.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-2\/hero-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-2/hero-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-2\/hero-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-2/hero-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-2\/hero-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-2/hero-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-2\/hero-4\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-2/hero-4.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-2\/hero-5\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-2/hero-5.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-3\/hero-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-3/hero-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-3\/hero-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-3/hero-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-3\/hero-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-3/hero-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-3\/hero-4\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-3/hero-4.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-3\/hero-5\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-3/hero-5.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-4\/hero-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-4/hero-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-4\/hero-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-4/hero-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-4\/hero-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-4/hero-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-4\/hero-4\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-4/hero-4.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-4\/hero-5\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-4/hero-5.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-5\/hero-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-5/hero-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-5\/hero-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-5/hero-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-5\/hero-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-5/hero-3.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-5\/hero-4\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-5/hero-4.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/home-5\/hero-5\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/home-5/hero-5.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/top-banner-left-filter\/banner-1\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/top-banner-left-filter/banner-1.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/top-banner-left-filter\/banner-2\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/top-banner-left-filter/banner-2.png);
    }
  }
  .md\:bg-\[url\(\.\.\/images\/top-banner-left-filter\/banner-3\.png\)\] {
    @media (width >= 48rem) {
      background-image: url(../images/top-banner-left-filter/banner-3.png);
    }
  }
  .md\:p-5 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:px-0 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .md\:px-3 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .md\:px-4 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .md\:px-6 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:px-10 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .md\:px-\[22px\] {
    @media (width >= 48rem) {
      padding-inline: 22px;
    }
  }
  .md\:px-\[33px\] {
    @media (width >= 48rem) {
      padding-inline: 33px;
    }
  }
  .md\:px-\[41px\] {
    @media (width >= 48rem) {
      padding-inline: 41px;
    }
  }
  .md\:px-\[42px\] {
    @media (width >= 48rem) {
      padding-inline: 42px;
    }
  }
  .md\:px-\[94px\] {
    @media (width >= 48rem) {
      padding-inline: 94px;
    }
  }
  .md\:px-\[100px\] {
    @media (width >= 48rem) {
      padding-inline: 100px;
    }
  }
  .md\:py-0 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 0);
    }
  }
  .md\:py-6 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .md\:pt-0 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 0);
    }
  }
  .md\:pt-6 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 6);
    }
  }
  .md\:pt-\[56px\] {
    @media (width >= 48rem) {
      padding-top: 56px;
    }
  }
  .md\:pr-3 {
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 3);
    }
  }
  .md\:pr-4 {
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 4);
    }
  }
  .md\:pb-0 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
  .md\:pb-4 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 4);
    }
  }
  .md\:pb-15 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 15);
    }
  }
  .md\:pl-0 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 0);
    }
  }
  .md\:pl-3 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 3);
    }
  }
  .md\:pl-4 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 4);
    }
  }
  .md\:pl-6 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 6);
    }
  }
  .md\:text-center {
    @media (width >= 48rem) {
      text-align: center;
    }
  }
  .md\:text-left {
    @media (width >= 48rem) {
      text-align: left;
    }
  }
  .md\:text-2xl {
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .md\:text-base {
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .md\:text-\[40px\] {
    @media (width >= 48rem) {
      font-size: 40px;
    }
  }
  .md\:leading-6 {
    @media (width >= 48rem) {
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
    }
  }
  .md\:leading-\[26px\] {
    @media (width >= 48rem) {
      --tw-leading: 26px;
      line-height: 26px;
    }
  }
  .md\:after\:absolute {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .md\:after\:top-1\/2 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        top: calc(1/2 * 100%);
      }
    }
  }
  .md\:after\:right-0 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        right: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:after\:h-3 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        height: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:after\:h-4 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        height: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:after\:h-5 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        height: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:after\:w-px {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        width: 1px;
      }
    }
  }
  .md\:after\:-translate-y-1\/2 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        --tw-translate-y: calc(calc(1/2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .md\:after\:bg-\[rgba\(145\,158\,171\,0\.24\)\] {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        background-color: rgba(145,158,171,0.24);
      }
    }
  }
  .md\:after\:bg-gray-300 {
    @media (width >= 48rem) {
      &::after {
        content: var(--tw-content);
        background-color: var(--color-gray-300);
      }
    }
  }
  .lg\:top-\[58px\] {
    @media (width >= 64rem) {
      top: 58px;
    }
  }
  .lg\:top-\[60px\] {
    @media (width >= 64rem) {
      top: 60px;
    }
  }
  .lg\:top-\[105px\] {
    @media (width >= 64rem) {
      top: 105px;
    }
  }
  .lg\:top-\[110px\] {
    @media (width >= 64rem) {
      top: 110px;
    }
  }
  .lg\:right-80 {
    @media (width >= 64rem) {
      right: calc(var(--spacing) * 80);
    }
  }
  .lg\:right-\[62px\] {
    @media (width >= 64rem) {
      right: 62px;
    }
  }
  .lg\:right-\[80px\] {
    @media (width >= 64rem) {
      right: 80px;
    }
  }
  .lg\:right-\[90px\] {
    @media (width >= 64rem) {
      right: 90px;
    }
  }
  .lg\:right-\[120px\] {
    @media (width >= 64rem) {
      right: 120px;
    }
  }
  .lg\:right-\[130px\] {
    @media (width >= 64rem) {
      right: 130px;
    }
  }
  .lg\:right-\[170px\] {
    @media (width >= 64rem) {
      right: 170px;
    }
  }
  .lg\:right-\[210px\] {
    @media (width >= 64rem) {
      right: 210px;
    }
  }
  .lg\:right-\[230px\] {
    @media (width >= 64rem) {
      right: 230px;
    }
  }
  .lg\:right-\[260px\] {
    @media (width >= 64rem) {
      right: 260px;
    }
  }
  .lg\:right-\[270px\] {
    @media (width >= 64rem) {
      right: 270px;
    }
  }
  .lg\:right-\[290px\] {
    @media (width >= 64rem) {
      right: 290px;
    }
  }
  .lg\:right-\[300px\] {
    @media (width >= 64rem) {
      right: 300px;
    }
  }
  .lg\:right-\[380px\] {
    @media (width >= 64rem) {
      right: 380px;
    }
  }
  .lg\:right-\[405px\] {
    @media (width >= 64rem) {
      right: 405px;
    }
  }
  .lg\:order-1 {
    @media (width >= 64rem) {
      order: 1;
    }
  }
  .lg\:order-2 {
    @media (width >= 64rem) {
      order: 2;
    }
  }
  .lg\:col-span-2 {
    @media (width >= 64rem) {
      grid-column: span 2 / span 2;
    }
  }
  .lg\:col-span-3 {
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .lg\:col-span-4 {
    @media (width >= 64rem) {
      grid-column: span 4 / span 4;
    }
  }
  .lg\:col-span-5 {
    @media (width >= 64rem) {
      grid-column: span 5 / span 5;
    }
  }
  .lg\:col-span-6 {
    @media (width >= 64rem) {
      grid-column: span 6 / span 6;
    }
  }
  .lg\:col-span-7 {
    @media (width >= 64rem) {
      grid-column: span 7 / span 7;
    }
  }
  .lg\:col-span-8 {
    @media (width >= 64rem) {
      grid-column: span 8 / span 8;
    }
  }
  .lg\:col-span-9 {
    @media (width >= 64rem) {
      grid-column: span 9 / span 9;
    }
  }
  .lg\:col-span-10 {
    @media (width >= 64rem) {
      grid-column: span 10 / span 10;
    }
  }
  .lg\:col-start-2 {
    @media (width >= 64rem) {
      grid-column-start: 2;
    }
  }
  .lg\:col-start-4 {
    @media (width >= 64rem) {
      grid-column-start: 4;
    }
  }
  .lg\:col-start-7 {
    @media (width >= 64rem) {
      grid-column-start: 7;
    }
  }
  .lg\:col-end-7 {
    @media (width >= 64rem) {
      grid-column-end: 7;
    }
  }
  .lg\:col-end-10 {
    @media (width >= 64rem) {
      grid-column-end: 10;
    }
  }
  .lg\:col-end-12 {
    @media (width >= 64rem) {
      grid-column-end: 12;
    }
  }
  .lg\:row-start-auto {
    @media (width >= 64rem) {
      grid-row-start: auto;
    }
  }
  .lg\:mx-10 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 10);
    }
  }
  .lg\:mt-0 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .lg\:-mb-\[103px\] {
    @media (width >= 64rem) {
      margin-bottom: calc(103px * -1);
    }
  }
  .lg\:mb-0 {
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .lg\:mb-\[53px\] {
    @media (width >= 64rem) {
      margin-bottom: 53px;
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:grid {
    @media (width >= 64rem) {
      display: grid;
    }
  }
  .lg\:table-cell {
    @media (width >= 64rem) {
      display: table-cell;
    }
  }
  .lg\:h-\[calc\(100\%-60px\)\] {
    @media (width >= 64rem) {
      height: calc(100% - 60px);
    }
  }
  .lg\:h-auto {
    @media (width >= 64rem) {
      height: auto;
    }
  }
  .lg\:h-full {
    @media (width >= 64rem) {
      height: 100%;
    }
  }
  .lg\:max-h-\[340px\] {
    @media (width >= 64rem) {
      max-height: 340px;
    }
  }
  .lg\:min-h-\[532px\] {
    @media (width >= 64rem) {
      min-height: 532px;
    }
  }
  .lg\:min-h-\[536px\] {
    @media (width >= 64rem) {
      min-height: 536px;
    }
  }
  .lg\:w-1\/2 {
    @media (width >= 64rem) {
      width: calc(1/2 * 100%);
    }
  }
  .lg\:w-5\/12 {
    @media (width >= 64rem) {
      width: calc(5/12 * 100%);
    }
  }
  .lg\:w-\[390px\] {
    @media (width >= 64rem) {
      width: 390px;
    }
  }
  .lg\:w-\[620px\] {
    @media (width >= 64rem) {
      width: 620px;
    }
  }
  .lg\:w-\[644px\] {
    @media (width >= 64rem) {
      width: 644px;
    }
  }
  .lg\:w-full {
    @media (width >= 64rem) {
      width: 100%;
    }
  }
  .lg\:max-w-40 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 40);
    }
  }
  .lg\:max-w-\[190px\] {
    @media (width >= 64rem) {
      max-width: 190px;
    }
  }
  .lg\:max-w-\[350px\] {
    @media (width >= 64rem) {
      max-width: 350px;
    }
  }
  .lg\:max-w-\[450px\] {
    @media (width >= 64rem) {
      max-width: 450px;
    }
  }
  .lg\:max-w-\[500px\] {
    @media (width >= 64rem) {
      max-width: 500px;
    }
  }
  .lg\:max-w-\[530px\] {
    @media (width >= 64rem) {
      max-width: 530px;
    }
  }
  .lg\:max-w-\[642px\] {
    @media (width >= 64rem) {
      max-width: 642px;
    }
  }
  .lg\:max-w-\[704px\] {
    @media (width >= 64rem) {
      max-width: 704px;
    }
  }
  .lg\:max-w-\[762px\] {
    @media (width >= 64rem) {
      max-width: 762px;
    }
  }
  .lg\:flex-1 {
    @media (width >= 64rem) {
      flex: 1;
    }
  }
  .lg\:flex-none {
    @media (width >= 64rem) {
      flex: none;
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-12 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .lg\:flex-col {
    @media (width >= 64rem) {
      flex-direction: column;
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:flex-nowrap {
    @media (width >= 64rem) {
      flex-wrap: nowrap;
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:items-start {
    @media (width >= 64rem) {
      align-items: flex-start;
    }
  }
  .lg\:justify-between {
    @media (width >= 64rem) {
      justify-content: space-between;
    }
  }
  .lg\:justify-end {
    @media (width >= 64rem) {
      justify-content: flex-end;
    }
  }
  .lg\:gap-12 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .lg\:gap-x-2\.5 {
    @media (width >= 64rem) {
      -moz-column-gap: calc(var(--spacing) * 2.5);
           column-gap: calc(var(--spacing) * 2.5);
    }
  }
  .lg\:gap-x-6 {
    @media (width >= 64rem) {
      -moz-column-gap: calc(var(--spacing) * 6);
           column-gap: calc(var(--spacing) * 6);
    }
  }
  .lg\:gap-x-10 {
    @media (width >= 64rem) {
      -moz-column-gap: calc(var(--spacing) * 10);
           column-gap: calc(var(--spacing) * 10);
    }
  }
  .lg\:gap-x-18 {
    @media (width >= 64rem) {
      -moz-column-gap: calc(var(--spacing) * 18);
           column-gap: calc(var(--spacing) * 18);
    }
  }
  .lg\:gap-x-\[70px\] {
    @media (width >= 64rem) {
      -moz-column-gap: 70px;
           column-gap: 70px;
    }
  }
  .lg\:gap-y-0 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .lg\:gap-y-3 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 3);
    }
  }
  .lg\:gap-y-6 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 6);
    }
  }
  .lg\:divide-x {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
      }
    }
  }
  .lg\:divide-x-0 {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(0px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
      }
    }
  }
  .lg\:overflow-x-visible {
    @media (width >= 64rem) {
      overflow-x: visible;
    }
  }
  .lg\:overflow-y-auto {
    @media (width >= 64rem) {
      overflow-y: auto;
    }
  }
  .lg\:rounded-\[164px\] {
    @media (width >= 64rem) {
      border-radius: 164px;
    }
  }
  .lg\:rounded-tr-\[164px\] {
    @media (width >= 64rem) {
      border-top-right-radius: 164px;
    }
  }
  .lg\:border-r {
    @media (width >= 64rem) {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }
  .lg\:border-b-0 {
    @media (width >= 64rem) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .lg\:bg-white {
    @media (width >= 64rem) {
      background-color: var(--color-white);
    }
  }
  .lg\:bg-center {
    @media (width >= 64rem) {
      background-position: center;
    }
  }
  .lg\:p-0 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 0);
    }
  }
  .lg\:p-8 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .lg\:p-10 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .lg\:p-\[60px\] {
    @media (width >= 64rem) {
      padding: 60px;
    }
  }
  .lg\:px-0 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .lg\:px-3 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .lg\:px-4 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .lg\:px-6 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .lg\:px-10 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .lg\:px-11 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 11);
    }
  }
  .lg\:px-\[66px\] {
    @media (width >= 64rem) {
      padding-inline: 66px;
    }
  }
  .lg\:px-\[160px\] {
    @media (width >= 64rem) {
      padding-inline: 160px;
    }
  }
  .lg\:py-8 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .lg\:py-20 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  .lg\:py-\[70px\] {
    @media (width >= 64rem) {
      padding-block: 70px;
    }
  }
  .lg\:pt-0 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 0);
    }
  }
  .lg\:pt-\[172px\] {
    @media (width >= 64rem) {
      padding-top: 172px;
    }
  }
  .lg\:pr-0 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 0);
    }
  }
  .lg\:pr-4 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 4);
    }
  }
  .lg\:pr-6 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 6);
    }
  }
  .lg\:pr-8 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 8);
    }
  }
  .lg\:pr-12 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 12);
    }
  }
  .lg\:pr-20 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 20);
    }
  }
  .lg\:pr-\[30px\] {
    @media (width >= 64rem) {
      padding-right: 30px;
    }
  }
  .lg\:pr-\[50px\] {
    @media (width >= 64rem) {
      padding-right: 50px;
    }
  }
  .lg\:pb-0 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
  .lg\:pb-6 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .lg\:pb-8 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 8);
    }
  }
  .lg\:pb-\[23px\] {
    @media (width >= 64rem) {
      padding-bottom: 23px;
    }
  }
  .lg\:pl-0 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 0);
    }
  }
  .lg\:pl-4 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 4);
    }
  }
  .lg\:pl-6 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 6);
    }
  }
  .lg\:pl-8 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 8);
    }
  }
  .lg\:pl-12 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 12);
    }
  }
  .lg\:pl-20 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 20);
    }
  }
  .lg\:pl-\[50px\] {
    @media (width >= 64rem) {
      padding-left: 50px;
    }
  }
  .lg\:pl-\[100px\] {
    @media (width >= 64rem) {
      padding-left: 100px;
    }
  }
  .lg\:text-center {
    @media (width >= 64rem) {
      text-align: center;
    }
  }
  .lg\:text-2xl {
    @media (width >= 64rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .lg\:text-xl {
    @media (width >= 64rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .lg\:leading-9 {
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 9);
      line-height: calc(var(--spacing) * 9);
    }
  }
  .lg\:leading-\[30px\] {
    @media (width >= 64rem) {
      --tw-leading: 30px;
      line-height: 30px;
    }
  }
  .lg\:before\:absolute {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .lg\:before\:top-full {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        top: 100%;
      }
    }
  }
  .lg\:before\:bottom-0 {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        bottom: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:before\:left-0 {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        left: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:before\:z-11 {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        z-index: 11;
      }
    }
  }
  .lg\:before\:h-12 {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        height: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:before\:h-full {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        height: 100%;
      }
    }
  }
  .lg\:before\:w-12 {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        width: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:before\:w-\[145px\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        width: 145px;
      }
    }
  }
  .lg\:before\:bg-\[\#9EE872\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-color: #9EE872;
      }
    }
  }
  .lg\:before\:bg-\[\#A0E2E0\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-color: #A0E2E0;
      }
    }
  }
  .lg\:before\:bg-\[\#FFD6EF\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-color: #FFD6EF;
      }
    }
  }
  .lg\:before\:bg-\[\#FFEB69\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-color: #FFEB69;
      }
    }
  }
  .lg\:before\:bg-\[url\(\'\.\.\/images\/home-2\/slider-left-shape-2\.png\'\)\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-image: url('../images/home-2/slider-left-shape-2.png');
      }
    }
  }
  .lg\:before\:bg-\[url\(\'\.\.\/images\/slider-left-shape\.png\'\)\] {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-image: url('../images/slider-left-shape.png');
      }
    }
  }
  .lg\:before\:bg-no-repeat {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-repeat: no-repeat;
      }
    }
  }
  .lg\:after\:absolute {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .lg\:after\:right-0 {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        right: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:after\:bottom-0 {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        bottom: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:after\:z-11 {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        z-index: 11;
      }
    }
  }
  .lg\:after\:hidden {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        display: none;
      }
    }
  }
  .lg\:after\:h-full {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        height: 100%;
      }
    }
  }
  .lg\:after\:w-\[145px\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        width: 145px;
      }
    }
  }
  .lg\:after\:bg-\[\#9EE872\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-color: #9EE872;
      }
    }
  }
  .lg\:after\:bg-\[\#92BDF5\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-color: #92BDF5;
      }
    }
  }
  .lg\:after\:bg-\[\#A0E2E0\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-color: #A0E2E0;
      }
    }
  }
  .lg\:after\:bg-\[\#FFD6EF\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-color: #FFD6EF;
      }
    }
  }
  .lg\:after\:bg-\[\#FFEB69\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-color: #FFEB69;
      }
    }
  }
  .lg\:after\:bg-\[url\(\'\.\.\/images\/slider-right-shape\.png\'\)\] {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-image: url('../images/slider-right-shape.png');
      }
    }
  }
  .lg\:after\:bg-no-repeat {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        background-repeat: no-repeat;
      }
    }
  }
  .xl\:top-\[22px\] {
    @media (width >= 80rem) {
      top: 22px;
    }
  }
  .xl\:top-\[30px\] {
    @media (width >= 80rem) {
      top: 30px;
    }
  }
  .xl\:top-\[170px\] {
    @media (width >= 80rem) {
      top: 170px;
    }
  }
  .xl\:right-\[22px\] {
    @media (width >= 80rem) {
      right: 22px;
    }
  }
  .xl\:right-\[23px\] {
    @media (width >= 80rem) {
      right: 23px;
    }
  }
  .xl\:right-\[300px\] {
    @media (width >= 80rem) {
      right: 300px;
    }
  }
  .xl\:order-1 {
    @media (width >= 80rem) {
      order: 1;
    }
  }
  .xl\:order-2 {
    @media (width >= 80rem) {
      order: 2;
    }
  }
  .xl\:col-span-1 {
    @media (width >= 80rem) {
      grid-column: span 1 / span 1;
    }
  }
  .xl\:col-span-2 {
    @media (width >= 80rem) {
      grid-column: span 2 / span 2;
    }
  }
  .xl\:col-span-3 {
    @media (width >= 80rem) {
      grid-column: span 3 / span 3;
    }
  }
  .xl\:col-span-4 {
    @media (width >= 80rem) {
      grid-column: span 4 / span 4;
    }
  }
  .xl\:col-span-5 {
    @media (width >= 80rem) {
      grid-column: span 5 / span 5;
    }
  }
  .xl\:col-span-6 {
    @media (width >= 80rem) {
      grid-column: span 6 / span 6;
    }
  }
  .xl\:col-span-7 {
    @media (width >= 80rem) {
      grid-column: span 7 / span 7;
    }
  }
  .xl\:col-span-8 {
    @media (width >= 80rem) {
      grid-column: span 8 / span 8;
    }
  }
  .xl\:col-span-9 {
    @media (width >= 80rem) {
      grid-column: span 9 / span 9;
    }
  }
  .xl\:col-start-3 {
    @media (width >= 80rem) {
      grid-column-start: 3;
    }
  }
  .xl\:col-start-4 {
    @media (width >= 80rem) {
      grid-column-start: 4;
    }
  }
  .xl\:col-end-10 {
    @media (width >= 80rem) {
      grid-column-end: 10;
    }
  }
  .xl\:col-end-11 {
    @media (width >= 80rem) {
      grid-column-end: 11;
    }
  }
  .xl\:col-end-12 {
    @media (width >= 80rem) {
      grid-column-end: 12;
    }
  }
  .xl\:row-start-1 {
    @media (width >= 80rem) {
      grid-row-start: 1;
    }
  }
  .xl\:mb-0 {
    @media (width >= 80rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .xl\:block {
    @media (width >= 80rem) {
      display: block;
    }
  }
  .xl\:flex {
    @media (width >= 80rem) {
      display: flex;
    }
  }
  .xl\:hidden {
    @media (width >= 80rem) {
      display: none;
    }
  }
  .xl\:h-\[220px\] {
    @media (width >= 80rem) {
      height: 220px;
    }
  }
  .xl\:h-\[274px\] {
    @media (width >= 80rem) {
      height: 274px;
    }
  }
  .xl\:h-\[688px\] {
    @media (width >= 80rem) {
      height: 688px;
    }
  }
  .xl\:h-\[calc\(100vh-52px\)\] {
    @media (width >= 80rem) {
      height: calc(100vh - 52px);
    }
  }
  .xl\:h-full {
    @media (width >= 80rem) {
      height: 100%;
    }
  }
  .xl\:max-h-\[361px\] {
    @media (width >= 80rem) {
      max-height: 361px;
    }
  }
  .xl\:w-\[100px\] {
    @media (width >= 80rem) {
      width: 100px;
    }
  }
  .xl\:w-\[114px\] {
    @media (width >= 80rem) {
      width: 114px;
    }
  }
  .xl\:w-auto {
    @media (width >= 80rem) {
      width: auto;
    }
  }
  .xl\:w-full {
    @media (width >= 80rem) {
      width: 100%;
    }
  }
  .xl\:max-w-\[306px\] {
    @media (width >= 80rem) {
      max-width: 306px;
    }
  }
  .xl\:max-w-\[551px\] {
    @media (width >= 80rem) {
      max-width: 551px;
    }
  }
  .xl\:max-w-\[600px\] {
    @media (width >= 80rem) {
      max-width: 600px;
    }
  }
  .xl\:max-w-\[1728px\] {
    @media (width >= 80rem) {
      max-width: 1728px;
    }
  }
  .xl\:flex-1 {
    @media (width >= 80rem) {
      flex: 1;
    }
  }
  .xl\:grid-cols-2 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-4 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-6 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-12 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .xl\:flex-col {
    @media (width >= 80rem) {
      flex-direction: column;
    }
  }
  .xl\:flex-row {
    @media (width >= 80rem) {
      flex-direction: row;
    }
  }
  .xl\:items-center {
    @media (width >= 80rem) {
      align-items: center;
    }
  }
  .xl\:justify-between {
    @media (width >= 80rem) {
      justify-content: space-between;
    }
  }
  .xl\:gap-x-0 {
    @media (width >= 80rem) {
      -moz-column-gap: calc(var(--spacing) * 0);
           column-gap: calc(var(--spacing) * 0);
    }
  }
  .xl\:gap-x-6 {
    @media (width >= 80rem) {
      -moz-column-gap: calc(var(--spacing) * 6);
           column-gap: calc(var(--spacing) * 6);
    }
  }
  .xl\:gap-x-10 {
    @media (width >= 80rem) {
      -moz-column-gap: calc(var(--spacing) * 10);
           column-gap: calc(var(--spacing) * 10);
    }
  }
  .xl\:gap-x-\[76px\] {
    @media (width >= 80rem) {
      -moz-column-gap: 76px;
           column-gap: 76px;
    }
  }
  .xl\:gap-y-0 {
    @media (width >= 80rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .xl\:gap-y-12 {
    @media (width >= 80rem) {
      row-gap: calc(var(--spacing) * 12);
    }
  }
  .xl\:divide-x {
    @media (width >= 80rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
      }
    }
  }
  .xl\:divide-y-0 {
    @media (width >= 80rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(0px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
      }
    }
  }
  .xl\:divide-gray-300 {
    @media (width >= 80rem) {
      :where(& > :not(:last-child)) {
        border-color: var(--color-gray-300);
      }
    }
  }
  .xl\:rounded-2xl {
    @media (width >= 80rem) {
      border-radius: var(--radius-2xl);
    }
  }
  .xl\:rounded-5xl {
    @media (width >= 80rem) {
      border-radius: var(--radius-5xl);
    }
  }
  .xl\:rounded-tl-\[22px\] {
    @media (width >= 80rem) {
      border-top-left-radius: 22px;
    }
  }
  .xl\:rounded-tr-5xl {
    @media (width >= 80rem) {
      border-top-right-radius: var(--radius-5xl);
    }
  }
  .xl\:rounded-tr-\[22px\] {
    @media (width >= 80rem) {
      border-top-right-radius: 22px;
    }
  }
  .xl\:rounded-br-5xl {
    @media (width >= 80rem) {
      border-bottom-right-radius: var(--radius-5xl);
    }
  }
  .xl\:rounded-bl-5xl {
    @media (width >= 80rem) {
      border-bottom-left-radius: var(--radius-5xl);
    }
  }
  .xl\:border-0 {
    @media (width >= 80rem) {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .xl\:object-left {
    @media (width >= 80rem) {
      -o-object-position: left;
         object-position: left;
    }
  }
  .xl\:object-top-left {
    @media (width >= 80rem) {
      -o-object-position: left top;
         object-position: left top;
    }
  }
  .xl\:px-0 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .xl\:px-2 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .xl\:px-\[114px\] {
    @media (width >= 80rem) {
      padding-inline: 114px;
    }
  }
  .xl\:py-0 {
    @media (width >= 80rem) {
      padding-block: calc(var(--spacing) * 0);
    }
  }
  .xl\:py-\[100px\] {
    @media (width >= 80rem) {
      padding-block: 100px;
    }
  }
  .xl\:pr-0 {
    @media (width >= 80rem) {
      padding-right: calc(var(--spacing) * 0);
    }
  }
  .xl\:pr-3 {
    @media (width >= 80rem) {
      padding-right: calc(var(--spacing) * 3);
    }
  }
  .xl\:pr-\[91px\] {
    @media (width >= 80rem) {
      padding-right: 91px;
    }
  }
  .xl\:pr-\[123px\] {
    @media (width >= 80rem) {
      padding-right: 123px;
    }
  }
  .xl\:pr-\[139px\] {
    @media (width >= 80rem) {
      padding-right: 139px;
    }
  }
  .xl\:pl-0 {
    @media (width >= 80rem) {
      padding-left: calc(var(--spacing) * 0);
    }
  }
  .xl\:pl-3 {
    @media (width >= 80rem) {
      padding-left: calc(var(--spacing) * 3);
    }
  }
  .xl\:pl-24 {
    @media (width >= 80rem) {
      padding-left: calc(var(--spacing) * 24);
    }
  }
  .xl\:pl-\[100px\] {
    @media (width >= 80rem) {
      padding-left: 100px;
    }
  }
  .xl\:pl-\[103px\] {
    @media (width >= 80rem) {
      padding-left: 103px;
    }
  }
  .xl\:pl-\[106px\] {
    @media (width >= 80rem) {
      padding-left: 106px;
    }
  }
  .xl\:pl-\[112px\] {
    @media (width >= 80rem) {
      padding-left: 112px;
    }
  }
  .xl\:pl-\[116px\] {
    @media (width >= 80rem) {
      padding-left: 116px;
    }
  }
  .xl\:pl-\[177px\] {
    @media (width >= 80rem) {
      padding-left: 177px;
    }
  }
  .xl\:text-left {
    @media (width >= 80rem) {
      text-align: left;
    }
  }
  .xl\:before\:absolute {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .xl\:before\:bottom-0 {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        bottom: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:before\:left-\[-23px\] {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        left: -23px;
      }
    }
  }
  .xl\:before\:z-11 {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        z-index: 11;
      }
    }
  }
  .xl\:before\:h-\[100px\] {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        height: 100px;
      }
    }
  }
  .xl\:before\:w-\[145px\] {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        width: 145px;
      }
    }
  }
  .xl\:before\:bg-\[url\(\'\.\.\/images\/footer-left-shape\.png\'\)\] {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        background-image: url('../images/footer-left-shape.png');
      }
    }
  }
  .xl\:before\:bg-no-repeat {
    @media (width >= 80rem) {
      &::before {
        content: var(--tw-content);
        background-repeat: no-repeat;
      }
    }
  }
  .xl\:after\:absolute {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .xl\:after\:right-\[-23px\] {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        right: -23px;
      }
    }
  }
  .xl\:after\:bottom-0 {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        bottom: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:after\:z-11 {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        z-index: 11;
      }
    }
  }
  .xl\:after\:block {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        display: block;
      }
    }
  }
  .xl\:after\:h-\[100px\] {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        height: 100px;
      }
    }
  }
  .xl\:after\:w-\[145px\] {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        width: 145px;
      }
    }
  }
  .xl\:after\:bg-\[url\(\'\.\.\/images\/footer-right-shape\.png\'\)\] {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        background-image: url('../images/footer-right-shape.png');
      }
    }
  }
  .xl\:after\:bg-no-repeat {
    @media (width >= 80rem) {
      &::after {
        content: var(--tw-content);
        background-repeat: no-repeat;
      }
    }
  }
  .\32 xl\:order-1 {
    @media (width >= 96rem) {
      order: 1;
    }
  }
  .\32 xl\:order-2 {
    @media (width >= 96rem) {
      order: 2;
    }
  }
  .\32 xl\:col-span-1 {
    @media (width >= 96rem) {
      grid-column: span 1 / span 1;
    }
  }
  .\32 xl\:col-span-2 {
    @media (width >= 96rem) {
      grid-column: span 2 / span 2;
    }
  }
  .\32 xl\:col-span-3 {
    @media (width >= 96rem) {
      grid-column: span 3 / span 3;
    }
  }
  .\32 xl\:col-start-5 {
    @media (width >= 96rem) {
      grid-column-start: 5;
    }
  }
  .\32 xl\:col-end-9 {
    @media (width >= 96rem) {
      grid-column-end: 9;
    }
  }
  .\32 xl\:flex {
    @media (width >= 96rem) {
      display: flex;
    }
  }
  .\32 xl\:hidden {
    @media (width >= 96rem) {
      display: none;
    }
  }
  .\32 xl\:max-w-\[340px\] {
    @media (width >= 96rem) {
      max-width: 340px;
    }
  }
  .\32 xl\:max-w-\[800px\] {
    @media (width >= 96rem) {
      max-width: 800px;
    }
  }
  .\32 xl\:grid-cols-3 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\32 xl\:grid-cols-5 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .\32 xl\:grid-cols-6 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .\32 xl\:flex-row {
    @media (width >= 96rem) {
      flex-direction: row;
    }
  }
  .\32 xl\:flex-nowrap {
    @media (width >= 96rem) {
      flex-wrap: nowrap;
    }
  }
  .\32 xl\:items-start {
    @media (width >= 96rem) {
      align-items: flex-start;
    }
  }
  .\@md\/quick-view-product-details\:flex-row {
    @container quick-view-product-details (width >= 28rem) {
      flex-direction: row;
    }
  }
  .\@md\/quick-view-product-details\:flex-nowrap {
    @container quick-view-product-details (width >= 28rem) {
      flex-wrap: nowrap;
    }
  }
  .\@md\/quick-view-product-details\:items-center {
    @container quick-view-product-details (width >= 28rem) {
      align-items: center;
    }
  }
  .\@md\/quick-view-product-details\:gap-y-0 {
    @container quick-view-product-details (width >= 28rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .\@md\/quick-view-product-details\:rounded-3xl {
    @container quick-view-product-details (width >= 28rem) {
      border-radius: var(--radius-3xl);
    }
  }
  .\@md\/quick-view-product-details\:border {
    @container quick-view-product-details (width >= 28rem) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .\@md\/quick-view-product-details\:border-gray-300 {
    @container quick-view-product-details (width >= 28rem) {
      border-color: var(--color-gray-300);
    }
  }
  .\@md\/quick-view-product-details\:p-6 {
    @container quick-view-product-details (width >= 28rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .\@md\/quick-view-product-details\:pr-3 {
    @container quick-view-product-details (width >= 28rem) {
      padding-right: calc(var(--spacing) * 3);
    }
  }
  .\@md\/quick-view-product-details\:pl-3 {
    @container quick-view-product-details (width >= 28rem) {
      padding-left: calc(var(--spacing) * 3);
    }
  }
  .\@md\/quick-view-product-details\:after\:absolute {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .\@md\/quick-view-product-details\:after\:top-1\/2 {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        top: calc(1/2 * 100%);
      }
    }
  }
  .\@md\/quick-view-product-details\:after\:right-0 {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        right: calc(var(--spacing) * 0);
      }
    }
  }
  .\@md\/quick-view-product-details\:after\:h-5 {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        height: calc(var(--spacing) * 5);
      }
    }
  }
  .\@md\/quick-view-product-details\:after\:w-px {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        width: 1px;
      }
    }
  }
  .\@md\/quick-view-product-details\:after\:-translate-y-1\/2 {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        --tw-translate-y: calc(calc(1/2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .\@md\/quick-view-product-details\:after\:bg-gray-300 {
    @container quick-view-product-details (width >= 28rem) {
      &::after {
        content: var(--tw-content);
        background-color: var(--color-gray-300);
      }
    }
  }
  .\[\&\:\:-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;
    }
  }
}
@layer base {
  body {
    scroll-behavior: smooth;
    background-color: var(--color-white);
    font-family: var(--font-dm-sans);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-light-secondary-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-urbanist);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-light-primary-text);
  }
  h1 {
    font-size: 40px;
    --tw-leading: 50px;
    line-height: 50px;
    @media (width >= 64rem) {
      font-size: 64px;
    }
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 20);
      line-height: calc(var(--spacing) * 20);
    }
  }
  h2 {
    font-size: 32px;
    --tw-leading: 42px;
    line-height: 42px;
    @media (width >= 64rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 16);
      line-height: calc(var(--spacing) * 16);
    }
  }
  h3 {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-leading: calc(var(--spacing) * 9);
    line-height: calc(var(--spacing) * 9);
    @media (width >= 64rem) {
      font-size: 32px;
    }
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 12);
      line-height: calc(var(--spacing) * 12);
    }
  }
  h4 {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-leading: 30px;
    line-height: 30px;
    @media (width >= 64rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 9);
      line-height: calc(var(--spacing) * 9);
    }
  }
  h5 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    @media (width >= 64rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    @media (width >= 64rem) {
      --tw-leading: 30px;
      line-height: 30px;
    }
  }
  h6 {
    font-size: 17px;
    --tw-leading: 26px;
    line-height: 26px;
    @media (width >= 64rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    @media (width >= 64rem) {
      --tw-leading: calc(var(--spacing) * 7);
      line-height: calc(var(--spacing) * 7);
    }
  }
  .btn i.hgi,
  a i.hgi {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  :where(h1, h2, h3, h4, h5, h6) a {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  button,
  a {
    cursor: pointer;
  }
}
@layer components {
  .btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-outline-style: none;
    outline-style: none;
    & svg {
      flex-shrink: 0;
    }
  }
  .btn-small {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 13px;
    --tw-leading: 22px;
    line-height: 22px;
    & svg {
      width: 18px;
      height: 18px;
    }
  }
  .btn-medium {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    & svg {
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
    }
  }
  .btn-large {
    padding-inline: 22px;
    padding-block: 11px;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: 26px;
    line-height: 26px;
    & svg {
      width: 22px;
      height: 22px;
    }
  }
  .btn-default {
    background-color: var(--color-gray-300);
    color: var(--color-gray-800);
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-400);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-default.outline {
    background-color: transparent;
    color: var(--color-light-primary-text);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(145,158,171,0.32);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(145,158,171,0.08);
      }
    }
  }
  .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    --tw-shadow: 0px 6px 15px 0px var(--tw-shadow-color, rgba(8, 129, 120, 0.16));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-primary-dark);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-primary.outline {
    background-color: transparent;
    color: var(--color-primary);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(0,171,85,0.48);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(0,171,85,0.08);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-primary);
      }
    }
  }
  .btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(51, 102, 255, 0.24));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-secondary);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-secondary-dark);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-secondary.outline {
    background-color: transparent;
    color: var(--color-secondary);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-secondary);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(51,102,255,0.08);
      }
    }
  }
  .btn-info {
    background-color: var(--color-info);
    color: var(--color-white);
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(24, 144, 255, 0.24));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-info-dark);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-info.outline {
    background-color: transparent;
    color: var(--color-info);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(24,144,255,0.48);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(24,144,255,0.08);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-info);
      }
    }
  }
  .btn-success {
    background-color: var(--color-success);
    color: var(--color-gray-800);
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(84, 214, 44, 0.24));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-success-dark);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-success.outline {
    background-color: transparent;
    color: var(--color-success);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(84,214,44,0.48);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(84,214,44,0.08);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-success);
      }
    }
  }
  .btn-warning {
    background-color: var(--color-warning);
    color: var(--color-gray-800);
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(255, 193, 7, 0.24));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-warning-dark);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-warning.outline {
    background-color: transparent;
    color: var(--color-warning);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(255,193,7,0.48);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(255,193,7,0.08);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-warning);
      }
    }
  }
  .btn-error {
    background-color: var(--color-error);
    color: var(--color-white);
    --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(255, 72, 66, 0.24));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-error-dark);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .btn-error.outline {
    background-color: transparent;
    color: var(--color-error);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(255,72,66,0.48);
    &:hover {
      @media (hover: hover) {
        background-color: rgba(255,72,66,0.08);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-error);
      }
    }
  }
  .btn-disabled {
    background-color: rgba(145,158,171,0.24);
    color: rgba(145,158,171,0.8);
  }
  .btn-disabled.outline {
    background-color: transparent;
    color: rgba(145,158,171,0.8);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(145,158,171,0.24);
  }
  .input-group {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background-color: transparent;
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(145,158,171,0.32);
    --tw-outline-style: none;
    outline-style: none;
    &:focus-within {
      --tw-ring-color: var(--color-light-primary-text);
    }
    &:has(>[data-align=inline-end]) {
      &>input {
        padding-right: calc(var(--spacing) * 2);
      }
    }
    &:has(>[data-align=inline-start]) {
      &>input {
        padding-left: calc(var(--spacing) * 2);
      }
    }
  }
  .input-group-addon[data-align="inline-end"] {
    order: 9999;
  }
  .input-group-addon[data-align="inline-start"] {
    order: -9999;
  }
  .form-control {
    width: 100%;
    background-color: transparent;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--color-light-primary-text);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    outline-style: none;
    &::-moz-placeholder {
      color: var(--color-light-disabled-text);
    }
    &::placeholder {
      color: var(--color-light-disabled-text);
    }
  }
  .input-group.medium {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
  }
  .input-group.small {
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2);
  }
  .scroll-to-top.hide {
    visibility: hidden;
    opacity: 0%;
  }
  .scroll-to-top.active {
    visibility: visible;
    opacity: 100%;
  }
}
/*!-----------------------------------------------------------------------------------
Menu Css
-------------------------------------------------------------------------------------*/
.mobile-menu > ul {
  display: flex;
  flex-direction: column;
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: rgba(145,158,171,0.21);
  }
  padding-inline: calc(var(--spacing) * 2);
}
.mobile-menu ul li {
  padding-block: calc(var(--spacing) * 2);
}
.mobile-menu ul li.has-sub-item {
  position: relative;
}
.mobile-menu ul li .submenu-button {
  position: absolute;
  top: calc(var(--spacing) * 0);
  right: calc(var(--spacing) * 0);
  display: inline-flex;
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mobile-menu ul li .submenu-button:not(.submenu-opened)::before {
  font-family: "hgi-stroke-rounded";
  font-size: 16px;
  line-height: 22px;
  color: #919eab;
  content: "㭚";
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}
.mobile-menu ul li .submenu-button.submenu-opened::after {
  font-family: "hgi-stroke-rounded";
  font-size: 16px;
  line-height: 22px;
  color: #919eab;
  content: "㭚";
  transform: rotate(-180deg);
  transition: transform 0.3s ease-in-out;
}
.mobile-menu ul li ul {
  display: none;
  flex-direction: column;
  padding-top: calc(var(--spacing) * 2);
  padding-left: calc(var(--spacing) * 2);
}
.mobile-menu ul li a {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: 22px;
  line-height: 22px;
}
.mobile-menu ul li a.active {
  color: var(--color-primary);
}
.main-menu > ul {
  display: none;
  align-items: center;
  justify-content: center;
  @media (width >= 80rem) {
    display: flex;
  }
}
.main-menu > ul > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: calc(var(--spacing) * 2);
       column-gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 6);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: calc(var(--spacing) * 6);
  line-height: calc(var(--spacing) * 6);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-light-primary-text);
  &:hover {
    @media (hover: hover) {
      color: var(--color-primary);
    }
  }
  @media (width >= 96rem) {
    padding-inline: calc(var(--spacing) * 6);
  }
}
.main-menu > ul > li:hover > a {
  color: var(--color-primary);
}
.main-menu > ul > li ul li:hover > a {
  color: var(--color-light-primary-text);
}
.main-menu ul li.has-sub-item {
  position: relative;
}
.main-menu ul li.has-sub-item:has(.mega-menu) {
  position: static;
}
.main-menu ul li.has-sub-item:hover > ul {
  visibility: visible;
  --tw-translate-y: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  opacity: 100%;
}
.main-menu ul li > ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: calc(var(--spacing) * 0);
  z-index: 50;
  width: 250px;
  --tw-translate-y: calc(var(--spacing) * 4);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding-block: calc(var(--spacing) * 3);
  opacity: 0%;
  --tw-shadow: 0px 24px 48px 0px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.main-menu ul li ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: 22px;
  line-height: 22px;
  &:hover {
    @media (hover: hover) {
      color: var(--color-primary);
    }
  }
}
.main-menu ul li ul li a i {
  rotate: 270deg;
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  color: var(--color-light-primary-text);
}
.main-menu ul li > .mega-menu ul li a {
  padding: calc(var(--spacing) * 0);
}
.main-menu ul li > .mega-menu {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: calc(1/2 * 100%);
  z-index: 50;
  width: 100%;
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  --tw-translate-y: calc(var(--spacing) * 4);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  opacity: 0%;
  --tw-shadow: 0px 12px 24px -4px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.main-menu ul li.has-sub-item:hover > .mega-menu {
  visibility: visible;
  --tw-translate-y: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  opacity: 100%;
}
.main-menu ul li ul li ul {
  top: calc(var(--spacing) * 0);
  left: 100%;
}
.main-menu ul li a.active {
  color: var(--color-primary);
}
/*!-----------------------------------------------------------------------------------
Preloader Css
-------------------------------------------------------------------------------------*/
.preloader {
  pointer-events: none;
  visibility: visible;
  position: fixed;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 999999;
  height: 100%;
  width: 100%;
  background-color: var(--color-white);
  opacity: 100%;
}
.preloader.loaded {
  visibility: hidden;
  opacity: 0%;
}
.preloader .pxl-loader-spinner {
  position: absolute;
  top: calc(1/2 * 100%);
  right: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  margin-inline: auto;
  width: 70px;
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  text-align: center;
}
.preloader .pxl-loader-spinner > div {
  display: inline-block;
  height: 18px;
  width: 18px;
  animation: var(--animate-bounce);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-primary);
}
.preloader .pxl-loader-spinner .pxl-loader-bounce1 {
  animation-delay: -0.32s;
}
.preloader .pxl-loader-spinner .pxl-loader-bounce2 {
  animation-delay: -0.16s;
}
/*!-----------------------------------------------------------------------------------
Custom Nice Select Css
-------------------------------------------------------------------------------------*/
.nice-select {
  display: flex !important;
  align-items: center !important;
  border-radius: 100px !important;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: color-mix(in oklab, #919EAB 32%, transparent) !important;
  padding: calc(var(--spacing) * 4) !important;
  padding-right: calc(var(--spacing) * 8) !important;
}
.nice-select.open {
  border-color: var(--color-black) !important;
}
.nice-select span.current {
  font-size: var(--text-base) !important;
  line-height: var(--tw-leading, var(--text-base--line-height)) !important;
  color: var(--color-light-disabled-text) !important;
}
.nice-select.changed span.current {
  color: var(--color-light-primary-text) !important;
}
.nice-select.open .list {
  z-index: 20 !important;
  margin-top: calc(var(--spacing) * 2.5) !important;
  width: 100% !important;
  min-width: 205px !important;
  border-radius: var(--radius-lg) !important;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: color-mix(in oklab, #919EAB 32%, transparent) !important;
  background-color: var(--color-white) !important;
  padding-block: calc(var(--spacing) * 2) !important;
  font-size: var(--text-base) !important;
  line-height: var(--tw-leading, var(--text-base--line-height)) !important;
  color: var(--color-light-primary-text) !important;
  --tw-shadow: 0px 24px 48px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}
.nice-select.open .list li {
  padding-inline: calc(var(--spacing) * 4) !important;
  color: var(--color-light-primary-text) !important;
}
.nice-select.open .list li:hover {
  background-color: transparent !important;
  color: var(--color-primary) !important;
}
.nice-select.open .list li.selected {
  background-color: transparent !important;
  color: var(--color-primary) !important;
}
.nice-select:before {
  font-family: "hgi-stroke-rounded";
  content: "㭚";
  pointer-events: none;
  position: absolute;
  top: calc(1/2 * 100%);
  right: calc(var(--spacing) * 2);
  z-index: 1;
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-leading: calc(var(--spacing) * 6);
  line-height: calc(var(--spacing) * 6);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.nice-select:after {
  display: none !important;
}
.nice-select.open:before {
  --tw-translate-y: calc(calc(1/2 * 100%) * -1) !important;
  translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  rotate: 180deg !important;
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.address-select {
  height: 56px !important;
  width: 100% !important;
  border-radius: 80px !important;
  padding-inline: calc(var(--spacing) * 3.5) !important;
  padding-block: calc(var(--spacing) * 4) !important;
}
.pack-select {
  height: 44px !important;
  border-radius: 80px !important;
  padding: calc(var(--spacing) * 4) !important;
  padding-right: calc(var(--spacing) * 11) !important;
}
.pack-select span.current {
  font-size: var(--text-base) !important;
  line-height: var(--tw-leading, var(--text-base--line-height)) !important;
  color: var(--color-light-disabled-text) !important;
}
.pack-select.bottom.open .list {
  top: calc(var(--spacing) * 0) !important;
  margin-top: calc(var(--spacing) * 0) !important;
  --tw-translate-y: calc(102% * -1) !important;
  translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.filter-select {
  width: 100% !important;
  border-radius: 80px !important;
}
.filter-select .list,
.quick-view-select .list {
  right: calc(var(--spacing) * 0) !important;
  left: auto !important;
}
.nice-select.open + .nice-select-label,
.nice-select.label.changed + .nice-select-label {
  top: calc(var(--spacing) * 0) !important;
  background-color: var(--color-white) !important;
  padding-inline: calc(var(--spacing) * 1) !important;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: 18px;
  line-height: 18px;
}
.nice-select.open.label span.current {
  visibility: visible !important;
  opacity: 100% !important;
}
.nice-select + .nice-select-label {
  position: absolute;
  top: calc(1/2 * 100%);
  left: 14px;
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  color: var(--color-light-disabled-text);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.nice-select.label span.current {
  visibility: hidden !important;
  opacity: 0% !important;
}
.nice-select.label.changed span.current {
  visibility: visible !important;
  opacity: 100% !important;
}
/*!-----------------------------------------------------------------------------------
404 Css
-------------------------------------------------------------------------------------*/
.notfound {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 70px;
}
.notfound .notfound-section {
  margin-inline: auto;
  max-width: 565px;
  text-align: center;
}
.notfound .notfound-section h2 {
  padding-top: calc(var(--spacing) * 10);
  padding-bottom: calc(var(--spacing) * 4);
}
.notfound .notfound-section p {
  margin-inline: auto;
  max-width: 392px;
  padding-bottom: calc(var(--spacing) * 6);
  color: var(--color-light-secondary-text);
}
/*!-----------------------------------------------------------------------------------
Breadcrumb Css
-------------------------------------------------------------------------------------*/
.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: calc(var(--spacing) * 4);
       column-gap: calc(var(--spacing) * 4);
  row-gap: calc(var(--spacing) * 2);
}
.breadcrumb ul li a {
  display: flex;
  align-items: center;
  -moz-column-gap: calc(var(--spacing) * 2);
       column-gap: calc(var(--spacing) * 2);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  color: var(--color-light-primary-text);
}
.breadcrumb li > span {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: 22px;
  line-height: 22px;
  color: var(--color-light-disabled-text);
}
/*!-----------------------------------------------------------------------------------
Slider Css
-------------------------------------------------------------------------------------*/
.home-one-hero-slider .slick-dots,
.home-four-hero-slider .slick-dots,
.home-five-hero-slider .slick-dots,
.banner-left-sidebar-slider .slick-dots {
  position: absolute;
  bottom: calc(var(--spacing) * 4);
  left: calc(1/2 * 100%);
  z-index: 11;
  display: flex;
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  justify-content: center;
  -moz-column-gap: calc(var(--spacing) * 4);
       column-gap: calc(var(--spacing) * 4);
  background-color: transparent;
}
.banner-category-hero-slider .slick-dots {
  position: absolute;
  bottom: calc(var(--spacing) * -12);
  left: calc(1/2 * 100%);
  z-index: 11;
  display: flex;
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  justify-content: center;
  -moz-column-gap: calc(var(--spacing) * 4);
       column-gap: calc(var(--spacing) * 4);
  background-color: transparent;
}
.home-one-hero-slider .slick-dots button,
.home-four-hero-slider .slick-dots button,
.home-five-hero-slider .slick-dots button,
.banner-left-sidebar-slider .slick-dots button,
.banner-category-hero-slider .slick-dots button {
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-gray-300);
  font-size: 0px;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.home-one-hero-slider .slick-dots .slick-active button,
.home-four-hero-slider .slick-dots .slick-active button,
.home-five-hero-slider .slick-dots .slick-active button,
.banner-left-sidebar-slider .slick-dots .slick-active button,
.banner-category-hero-slider .slick-dots .slick-active button {
  width: 78px;
  background-color: var(--color-primary);
}
.home-one-hero-slider-dots-shape,
.home-five-hero-slider-dots-shape,
.home-four-hero-slider-dots-shape {
  display: none;
  height: 61px;
  width: 332px;
  @media (width >= 64rem) {
    position: absolute;
  }
  @media (width >= 64rem) {
    bottom: calc(var(--spacing) * 0);
  }
  @media (width >= 64rem) {
    left: calc(1/2 * 100%);
  }
  @media (width >= 64rem) {
    z-index: 9;
  }
  @media (width >= 64rem) {
    display: block;
  }
  @media (width >= 64rem) {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  @media (width >= 64rem) {
    background-color: var(--color-white);
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      position: absolute;
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      top: calc(var(--spacing) * 0);
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      left: calc(var(--spacing) * 0);
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      z-index: 10;
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      height: 100%;
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      width: 86px;
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      background-image: url('../images/banner-left-shape.png');
    }
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      background-repeat: no-repeat;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      position: absolute;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      top: calc(var(--spacing) * 0);
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      right: calc(var(--spacing) * 0);
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      z-index: 10;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      height: 100%;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      width: 86px;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      background-image: url('../images/banner-right-shape.png');
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      background-repeat: no-repeat;
    }
  }
}
.home-one-hero-slider-dots-shape {
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      background-color: var(--color-primary-darker);
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-primary-darker);
    }
  }
}
.home-four-hero-slider-dots-shape {
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      background-color: #FFEB69;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      background-color: #FFEB69;
    }
  }
}
.home-five-hero-slider-dots-shape {
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      background-color: #8EBDD1;
    }
  }
  @media (width >= 64rem) {
    &::after {
      content: var(--tw-content);
      background-color: #8EBDD1;
    }
  }
}
.home-one-hot-deals-slider .slick-dots {
  margin-top: calc(var(--spacing) * 8);
  display: flex;
  width: 100%;
  padding-inline: calc(var(--spacing) * 4);
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing) * 0);
  }
}
.home-one-hot-deals-slider .slick-dots li {
  height: calc(var(--spacing) * 0.5);
  flex-grow: 1;
  background-color: var(--color-gray-300);
}
.home-one-hot-deals-slider .slick-dots li.slick-active {
  height: calc(var(--spacing) * 1.5);
  --tw-translate-y: calc(var(--spacing) * -0.5);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: 47px;
  background-color: var(--color-primary);
}
.home-one-hot-deals-slider .slick-dots li button {
  font-size: 0px;
}
.home-five-deal-of-the-day-slider .slick-dots {
  margin-top: calc(var(--spacing) * 8);
  display: flex;
  width: 100%;
  justify-content: center;
  -moz-column-gap: calc(var(--spacing) * 4);
       column-gap: calc(var(--spacing) * 4);
}
.home-five-deal-of-the-day-slider .slick-dots button {
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-gray-300);
  font-size: 0px;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.home-five-deal-of-the-day-slider .slick-dots .slick-active button {
  background-color: var(--color-primary);
}
.home-two-top-offer-slider-nav span {
  background-color: color-mix(in srgb, #fff 48%, transparent) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 48%, transparent) !important;
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-white) !important;
    }
  }
}
.home-two-top-offer-slider-nav span:hover i {
  color: var(--color-black) !important;
}
.best-selling-products-slider-nav .slider-btn,
.banner-left-sidebar-slider-nav .slider-btn,
.about-us-testimonial-slider-nav .slider-btn,
.product-details-big-slider-nav .slider-btn,
.product-details-big-slider-nav-2 .slider-btn {
  background-color: var(--color-white);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-primary);
    }
  }
}
.best-selling-products-slider-nav .slider-btn:hover i,
.home-one-category-slider-nav .slider-btn:hover i,
.home-one-hero-slider-nav .slider-btn:hover i,
.home-one-newly-launched-products-slider-nav .slider-btn:hover i,
.new-branded-products-nav .slider-btn:hover i,
.new-branded-products-multi-vendor-nav .slider-btn:hover i,
.banner-category-hero-slider-nav .slider-btn:hover i,
.banner-left-sidebar-slider-nav .slider-btn:hover i,
.about-us-testimonial-slider-nav .slider-btn:hover i,
.frequently-products-slider-nav .slider-btn:hover i,
.related-products-slider-4-nav .slider-btn:hover i,
.related-post-slider-nav .slider-btn:hover i,
.product-details-big-slider-nav .slider-btn:hover i,
.product-details-big-slider-nav-2 .slider-btn:hover i,
.related-products-slider-nav .slider-btn:hover i,
.home-two-category-slider-nav .slider-btn:hover i,
.home-two-category-promo-slider-nav .slider-btn:hover i,
.home-four-picks-slider-nav .slider-btn:hover i,
.premium-pack-nav .slider-btn:hover i,
.farm-fresh-grocery-nav .slider-btn:hover i {
  color: var(--color-white);
}
.home-one-category-slider-nav .slider-btn,
.home-one-hero-slider-nav .slider-btn,
.new-branded-products-nav .slider-btn,
.new-branded-products-multi-vendor-nav .slider-btn,
.frequently-products-slider-nav .slider-btn,
.related-products-slider-4-nav .slider-btn,
.related-post-slider-nav .slider-btn,
.related-products-slider-nav .slider-btn,
.home-two-category-slider-nav .slider-btn,
.home-two-category-promo-slider-nav .slider-btn,
.home-four-picks-slider-nav .slider-btn,
.premium-pack-nav .slider-btn,
.farm-fresh-grocery-nav .slider-btn {
  background-color: rgba(145,158,171,0.08);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-primary);
    }
  }
}
.home-one-hero-slider-nav .slider-btn i,
.home-four-hero-slider-nav .slider-btn i,
.home-five-hero-slider-nav .slider-btn i {
  color: var(--color-white);
}
.home-one-top-rate-slider-nav .slider-btn,
.home-one-top-items-slider-nav .slider-btn {
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
  background-color: rgba(255,255,255,0.48);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-white);
    }
  }
}
.home-one-newly-launched-products-slider-nav .slider-btn {
  background-color: color-mix(in srgb, #fff 48%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 48%, transparent);
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-primary);
    }
  }
}
.banner-category-hero-slider-nav .slider-btn {
  background-color: var(--color-white);
  --tw-shadow: 0px 24px 48px 0px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-primary);
    }
  }
}
.home-four-hero-slider-nav .slider-btn {
  background-color: var(--color-black);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-white);
    }
  }
}
.home-five-hero-slider-nav .slider-btn {
  background-color: rgba(145,158,171,0.08);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-white);
    }
  }
}
.home-four-hero-slider-nav .slider-btn:hover i,
.home-five-hero-slider-nav .slider-btn:hover i {
  color: var(--color-black);
}
.home-two-beauty-launched-product-nav .slider-btn,
.home-two-newly-launched-product-nav .slider-btn {
  background-color: color-mix(in srgb, #fff 48%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 48%, transparent);
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-white);
    }
  }
}
/*!-----------------------------------------------------------------------------------
Accordian Css
-------------------------------------------------------------------------------------*/
.accordion-item {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-300);
  padding-block: calc(var(--spacing) * 8);
}
.accordion-item:first-child {
  padding-top: calc(var(--spacing) * 0);
}
.accordion-item:last-child {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0px;
  padding-bottom: calc(var(--spacing) * 0);
}
.accordion-item .accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  -moz-column-gap: calc(var(--spacing) * 2);
       column-gap: calc(var(--spacing) * 2);
}
.accordion-item .accordion-header h4 {
  font-family: var(--font-dm-sans);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: calc(var(--spacing) * 6);
  line-height: calc(var(--spacing) * 6);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.accordion-item .accordion-header i {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  color: var(--color-light-primary-text);
}
.accordion-item .accordion-header.active i.hgi-minus-sign {
  display: inline-block;
}
.accordion-item .accordion-header i.hgi-minus-sign {
  display: none;
}
.accordion-item .accordion-header.active i.hgi-plus-sign {
  display: none;
}
.accordion-item .accordion-header i.hgi-plus-sign {
  display: inline-block;
}
.accordion-item .accordion-body {
  display: none;
  padding-top: calc(var(--spacing) * 4);
}
.accordion .accordion-item:first-child .accordion-body {
  display: block;
}
/*!-----------------------------------------------------------------------------------
Payment Method Css
-------------------------------------------------------------------------------------*/
.payment-method.selected {
  border-radius: 20px;
  border-color: var(--color-primary);
  background-color: var(--color-gray-100);
}
.payment-method {
  border-radius: 80px;
}
.payment-method .payment-content {
  display: none;
}
/*!-----------------------------------------------------------------------------------
Comments Css
-------------------------------------------------------------------------------------*/
.comment-list {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.comment-body {
  position: relative;
  margin-bottom: calc(var(--spacing) * 6);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-300);
}
.comment-meta {
  margin-bottom: calc(var(--spacing) * 1);
  display: flex;
  align-items: center;
  -moz-column-gap: calc(var(--spacing) * 4);
       column-gap: calc(var(--spacing) * 4);
}
.comment-reply {
  position: absolute;
  top: calc(var(--spacing) * 0);
  right: calc(var(--spacing) * 0);
}
.comment-reply-link {
  --tw-leading: 26px;
  line-height: 26px;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}
.comment-content {
  margin-bottom: calc(var(--spacing) * 6);
  padding-right: calc(var(--spacing) * 15);
  padding-left: calc(var(--spacing) * 16);
}
ol.comment-list li:last-child ol.children li:last-child .comment-body {
  margin-bottom: calc(var(--spacing) * 0);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0px;
}
ol.comment-list
  li:last-child
  ol.children
  li:last-child
  .comment-body
  .comment-content {
  margin-bottom: calc(var(--spacing) * 0);
}
.comments-area .nice-select {
  border-radius: 100px !important;
}
.comments-area .nice-select .list {
  right: calc(var(--spacing) * 0) !important;
  left: auto !important;
}
.comment-list ol.children {
  margin-left: calc(var(--spacing) * 7);
  @media (width >= 64rem) {
    margin-left: calc(var(--spacing) * 15);
  }
}
/*!-----------------------------------------------------------------------------------
Widget Css
-------------------------------------------------------------------------------------*/
.widget-rating a.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.widget-price-range .noUi-target {
  cursor: pointer;
  --tw-border-style: none;
  border-style: none;
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.widget-price-range .noUi-target:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.widget-price-range .noUi-horizontal {
  height: calc(var(--spacing) * 0.5) !important;
}
.widget-price-range .noUi-horizontal .noUi-handle {
  top: calc(var(--spacing) * -2);
  right: -15px;
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  &::before {
    content: var(--tw-content);
    display: none;
  }
  &::after {
    content: var(--tw-content);
    display: none;
  }
}
.widget-price-range .noUi-horizontal .noUi-handle:hover {
  background-color: var(--color-primary);
}
.widget-price-range .noUi-connect {
  background-color: var(--color-primary);
}
.widget-price-range .noUi-base {
  background-color: var(--color-gray-300);
}
.widget-price-range .noUi-handle.noUi-handle-upper {
  right: -2px;
}
.widget-color-picker button.active {
  width: 28px;
  height: 28px;
}
.widget-color-picker button {
  position: relative;
  &::before {
    content: var(--tw-content);
    display: none;
  }
  &::before {
    content: var(--tw-content);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  &::before {
    content: var(--tw-content);
    --tw-leading: 22px;
    line-height: 22px;
  }
  &::before {
    content: var(--tw-content);
    color: var(--color-white);
  }
  &::before {
    --tw-content: "䤈";
    content: var(--tw-content);
  }
}
.widget-color-picker button::before {
  font-family: "hgi-stroke-rounded";
}
.widget-color-picker button.active::before {
  display: block;
}
.widget-size-picker button.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.shop-filter-select .list {
  right: calc(var(--spacing) * 0) !important;
  left: auto !important;
}
/*!-----------------------------------------------------------------------------------
Product details Css
-------------------------------------------------------------------------------------*/
#product-details-tabs ul.filter-list {
  margin-bottom: calc(var(--spacing) * 10);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 4);
  --tw-border-style: none !important;
  border-style: none !important;
  background-color: transparent !important;
  padding: calc(var(--spacing) * 0) !important;
  --tw-font-weight: var(--font-weight-medium) !important;
  font-weight: var(--font-weight-medium) !important;
}
#product-details-tabs ul.filter-list li button {
  border-radius: 100px;
  padding: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-light-primary-text);
}
#product-details-tabs ul.filter-list li button.active {
  background-color: rgba(0,171,85,0.08);
  color: var(--color-primary);
}
#product-details-tabs .product-details-tab {
  border-radius: var(--radius-3xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  padding: calc(var(--spacing) * 0) !important;
}
#product-details-tabs .product-details-tab .product-details-tab-title {
  border-top-left-radius: var(--radius-3xl);
  border-top-right-radius: var(--radius-3xl);
  background-color: var(--color-gray-200);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
}
#product-details-tabs .product-details-tab .product-details-tab-content {
  padding: calc(var(--spacing) * 6);
}
#product-details-tabs
  .product-details-tab#description
  .product-details-tab-content
  ul,
.custom-list-style {
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--spacing) * 6);
}
#product-details-tabs
  .product-details-tab#description
  .product-details-tab-content
  ul
  li,
.custom-list-style li {
  position: relative;
  padding-left: calc(var(--spacing) * 10);
  &::before {
    content: var(--tw-content);
    position: absolute;
  }
  &::before {
    content: var(--tw-content);
    top: calc(var(--spacing) * 0);
  }
  &::before {
    content: var(--tw-content);
    left: calc(var(--spacing) * 0);
  }
  &::before {
    content: var(--tw-content);
    display: inline-flex;
  }
  &::before {
    content: var(--tw-content);
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  &::before {
    content: var(--tw-content);
    align-items: center;
  }
  &::before {
    content: var(--tw-content);
    justify-content: center;
  }
  &::before {
    content: var(--tw-content);
    border-radius: calc(infinity * 1px);
  }
  &::before {
    content: var(--tw-content);
    background-color: var(--color-primary);
  }
  &::before {
    content: var(--tw-content);
    color: var(--color-white);
  }
  &::before {
    --tw-content: "䤈";
    content: var(--tw-content);
  }
}
#product-details-tabs
  .product-details-tab#description
  .product-details-tab-content
  ul
  li::before,
.custom-list-style li::before {
  font-family: "hgi-stroke-rounded";
}
#product-details-tabs .comment-list-title .nice-select .list {
  right: calc(var(--spacing) * 0) !important;
  left: auto !important;
}
#product-details-tabs .comment-list .comment-body,
#product-details-accordion .comment-list .comment-body,
#quick-view-product-details-accordion .comment-list .comment-body {
  padding-bottom: calc(var(--spacing) * 6);
}
.height-range-slider-section .noUi-target,
.weight-range-slider-section .noUi-target {
  height: calc(var(--spacing) * 2) !important;
  cursor: pointer;
  --tw-border-style: none;
  border-style: none;
  background-color: var(--color-gray-200) !important;
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.height-range-slider-section .noUi-target:focus,
.weight-range-slider-section .noUi-target:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.height-range-slider-section .noUi-horizontal .noUi-handle,
.weight-range-slider-section .noUi-horizontal .noUi-handle {
  top: calc(var(--spacing) * -1);
  right: -15px;
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-primary);
  background-color: var(--color-white);
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  &::before {
    content: var(--tw-content);
    display: none;
  }
  &::after {
    content: var(--tw-content);
    display: none;
  }
}
.height-range-slider-section .noUi-connect,
.weight-range-slider-section .noUi-connect {
  background-color: var(--color-primary);
}
#product-details-accordion .accordion-item,
#quick-view-product-details-accordion .accordion-item {
  margin-bottom: calc(var(--spacing) * 6);
  --tw-border-style: none;
  border-style: none;
  padding-block: calc(var(--spacing) * 0);
  &:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }
}
#product-details-accordion .accordion-item .accordion-header,
#quick-view-product-details-accordion .accordion-item .accordion-header {
  cursor: pointer;
  border-radius: var(--radius-2xl);
  background-color: var(--color-gray-200);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
}
#product-details-accordion .accordion-item .accordion-header.active,
#quick-view-product-details-accordion .accordion-item .accordion-header.active {
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
#product-details-accordion .accordion-item .accordion-header i,
#quick-view-product-details-accordion .accordion-item .accordion-header i {
  rotate: calc(90deg * -1);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
#product-details-accordion .accordion-item .accordion-header.active i,
#quick-view-product-details-accordion .accordion-item .accordion-header.active i {
  rotate: 0deg;
}
#product-details-accordion .accordion-item .accordion-body,
#quick-view-product-details-accordion .accordion-item .accordion-body {
  border-bottom-right-radius: var(--radius-2xl);
  border-bottom-left-radius: var(--radius-2xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-top-style: var(--tw-border-style);
  border-top-width: 0px;
  border-color: var(--color-gray-300);
  padding: calc(var(--spacing) * 6);
}
/*!-----------------------------------------------------------------------------------
Table css
-------------------------------------------------------------------------------------*/
.wishlist-table,
.cart-items-table,
.compare-table,
.order-history-table {
  border-collapse: collapse;
  --tw-border-spacing-x: calc(var(--spacing) * 0);
  --tw-border-spacing-y: calc(var(--spacing) * 0);
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
  border-style: var(--tw-border-style);
  border-width: 0px;
}
.wishlist-table thead {
  border-style: var(--tw-border-style);
  border-width: 0px;
}
.wishlist-table th {
  display: none;
  @media (width >= 64rem) {
    display: table-cell;
  }
}
.wishlist-table td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  &::before {
    --tw-content: attr(data-title) ':';
    content: var(--tw-content);
  }
  @media (width >= 64rem) {
    display: table-cell;
  }
  @media (width >= 64rem) {
    &::before {
      content: var(--tw-content);
      display: none;
    }
  }
}
.wishlist-table tbody tr,
.cart-items-table tbody tr,
.compare-table tbody tr {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-bottom-color: var(--color-gray-300);
  &:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
}
.compare-table tbody tr td {
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
  border-right-color: var(--color-gray-300);
  &:last-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
  }
}
/*!-----------------------------------------------------------------------------------
Others css
-------------------------------------------------------------------------------------*/
.tab-pane,
.faq-tab-pane {
  display: none;
  opacity: 0%;
}
.tab-pane.active,
.faq-tab-pane.active {
  display: block;
  opacity: 100%;
}
.tab-pane.fade,
.faq-tab-pane.fade {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 150ms;
  transition-duration: 150ms;
  --tw-ease: linear;
  transition-timing-function: linear;
}
#dropdownMenu.active {
  visibility: visible;
  --tw-translate-y: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  opacity: 100%;
}
#dropdownMenu.hide {
  visibility: hidden;
  --tw-translate-y: calc(var(--spacing) * 4);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  opacity: 0%;
}
.filter-dropdown-menu.active {
  visibility: visible;
  --tw-translate-y: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  opacity: 100%;
}
.filter-dropdown-menu.hide {
  visibility: hidden;
  --tw-translate-y: calc(var(--spacing) * 4);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  opacity: 0%;
}
.faq-filter button.active {
  background-color: #00AB5514;
  color: var(--color-primary);
}
.sticky-header.sticky-top {
  position: fixed;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 50;
  width: 100%;
  animation: var(--animate-fadeInDown);
  border-top-style: var(--tw-border-style) !important;
  border-top-width: 0px !important;
  background-color: var(--color-white);
  --tw-shadow: 0px 24px 48px 0px var(--tw-shadow-color, rgba(145, 158, 171, 0.12));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.scrollbar-offset {
  padding-right: 15px;
}
.blog-pagination li a.active,
.comment-pagination li a.active {
  cursor: pointer;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-primary);
  background-color: rgba(0,171,85,0.08);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.my-account-menu li button.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.footer-bottom-nav a.active {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.footer-bottom-nav a.active i {
  color: var(--color-primary) !important;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@property --tw-border-spacing-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-spacing-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@keyframes bounce {
  0%,
      100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}
@keyframes marquee-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes bounce {
  0%,
    80%,
    100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-x-reverse: 0;
      --tw-border-style: solid;
      --tw-divide-y-reverse: 0;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
    }
  }
}


/* ==========================================================================
   CONSOLIDATED COMPONENT STYLES
   ========================================================================== */

/* --- Start: src/app/features/blog/blog.component.scss (app-blog) --- */
.blog-page {
  padding-bottom: 3rem;
}

.blog-page__breadcrumb-band {
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  padding: 1.25rem 0 1.5rem;
  border-bottom: 1px solid rgba(145, 158, 171, 0.16);
  background: linear-gradient(180deg, rgba(255, 193, 7, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
}

@media (min-width: 768px) {
  .blog-page__breadcrumb-band {
    margin-top: 2rem;
    margin-bottom: 3rem;
    padding: 1.5rem 0 1.75rem;
  }
}
.blog-page__body {
  padding-bottom: 2rem;
}

.blog-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--light-secondary-text, #637381);
}

.blog-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--light-primary-text, #212b36);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-breadcrumb__link:hover {
  color: var(--color-primary, #00ab55);
}

.blog-breadcrumb__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: rgba(0, 171, 85, 0.1);
  color: var(--color-primary, #00ab55);
  font-size: 1.125rem;
  line-height: 1;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.blog-breadcrumb__link:hover .blog-breadcrumb__icon {
  background: rgba(0, 171, 85, 0.16);
  transform: translateY(-1px);
}

.blog-breadcrumb__separator {
  display: inline-flex;
  align-items: center;
  color: rgba(145, 158, 171, 0.72);
  font-size: 1rem;
  line-height: 1;
}

.blog-breadcrumb__item--current span {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  background: rgba(255, 193, 7, 0.16);
  color: var(--color-warning-dark, #b78103);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.blog-pagination-item button.active {
  background: var(--color-primary, #00ab55);
  border-color: var(--color-primary, #00ab55);
  color: #fff;
  font-weight: 600;
}

.blog-pagination-inactive {
  color: var(--light-primary-text, #212b36);
  background: #fff;
  border-color: #dfe3e8;
}

.blog-pagination-inactive:hover {
  color: var(--color-primary, #00ab55);
  border-color: var(--color-primary, #00ab55);
  background: rgba(0, 171, 85, 0.08);
}

/* --- End: src/app/features/blog/blog.component.scss --- */

/* --- Start: src/app/features/blog-detail/blog-detail.component.scss (app-blog-detail) --- */
.blog-detail-page .blog-detail-article {
  overflow: visible;
}

.blog-detail-page .blog-detail-header {
  margin-bottom: 1.75rem;
}

.blog-detail-page .blog-detail-category {
  display: inline-flex;
  margin-bottom: 0.875rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-weight: 600;
  color: var(--color-warning-dark, #b78103);
  background: rgba(255, 193, 7, 0.16);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.blog-detail-page .blog-detail-category:hover {
  color: var(--color-primary, #00ab55);
  background: rgba(0, 171, 85, 0.12);
}

.blog-detail-page .blog-detail-title {
  margin: 0 0 1rem;
  font-family: var(--font-urbanist, 'Urbanist', sans-serif);
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--color-light-primary-text, #212b36);
}

.blog-detail-page .blog-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.blog-detail-page .blog-detail-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-light-secondary-text, #637381);
}

.blog-detail-page .blog-detail-meta__item .hgi {
  font-size: 1.25rem;
  line-height: 1;
}

.blog-detail-page .blog-detail-hero {
  margin-bottom: 2rem;
  width: 100%;
  height: 16rem;
  overflow: hidden;
  border-radius: 1.5rem;
  background-color: #f4f6f8;
}

@media (min-width: 640px) {
  .blog-detail-page .blog-detail-hero {
    height: 21rem;
  }
}

@media (min-width: 1024px) {
  .blog-detail-page .blog-detail-hero {
    height: 28rem;
  }
}

.blog-detail-page .blog-detail-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-detail-page .blog-detail-excerpt {
  margin: 0 0 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-light-secondary-text, #637381);
}

.blog-detail-page .blog-details-content {
  margin-bottom: 2.5rem;
}

.blog-detail-page .blog-details-action {
  margin-top: 2rem;
}

.blog-detail-content :where(p, ul, ol) {
  margin-bottom: 1rem;
  line-height: 1.75;
  color: var(--color-light-secondary-text, #637381);
}

.blog-detail-content :where(h2, h3, h4, h5, h6) {
  margin: 1.5rem 0 0.75rem;
  color: var(--color-light-primary-text, #212b36);
  font-weight: 700;
}

.blog-detail-content :where(img) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  margin: 1.25rem 0;
}

.blog-detail-content :where(blockquote) {
  margin: 1.5rem 0;
  padding: 1.5rem 1.25rem;
  border-radius: 1rem;
  background: rgba(255, 235, 105, 0.55);
  font-weight: 600;
  color: var(--color-light-primary-text, #212b36);
}

.blog-detail-content :where(hr) {
  margin: 1.5rem 0;
  border-color: rgba(145, 158, 171, 0.24);
}

/* --- End: src/app/features/blog-detail/blog-detail.component.scss --- */

/* --- Start: src/app/features/category-detail/category-detail.component.scss (app-category-detail) --- */
.category-detail-state {
  min-height: 32rem;
  padding-bottom: 5.625rem;
}

.category-detail-state__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32rem;
  padding: 3rem 1rem;
}

.category-detail-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin: 2rem auto;
  padding: 2rem 2.5rem;
  border-radius: 1.25rem;
  background: linear-gradient(145deg, color-mix(in oklab, var(--color-primary, #088178) 6%, #fff), #fff 55%, color-mix(in oklab, var(--color-primary, #088178) 4%, #fffaf5));
  box-shadow: 0 12px 40px rgba(8, 129, 120, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.category-detail-loader__visual {
  position: relative;
  width: 5rem;
  height: 5rem;
}

.category-detail-loader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.category-detail-loader__ring--outer {
  border-top-color: var(--color-primary, #088178);
  border-right-color: color-mix(in oklab, var(--color-primary, #088178) 35%, transparent);
  animation: category-detail-spin 1.1s linear infinite;
}

.category-detail-loader__ring--inner {
  inset: 0.65rem;
  border-bottom-color: color-mix(in oklab, var(--color-primary, #088178) 70%, #fff);
  border-left-color: color-mix(in oklab, var(--color-primary, #088178) 20%, transparent);
  animation: category-detail-spin-reverse 0.85s linear infinite;
}

.category-detail-loader__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #088178);
  font-size: 1.5rem;
  animation: category-detail-pulse 1.6s ease-in-out infinite;
}

.category-detail-loader__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: var(--color-light-primary-text, #212b36);
  letter-spacing: 0.01em;
}

.category-detail-loader__dots {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.category-detail-loader__dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-primary, #088178);
  opacity: 0.35;
  animation: category-detail-dot 1.2s ease-in-out infinite;
}
.category-detail-loader__dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.category-detail-loader__dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes category-detail-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes category-detail-spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes category-detail-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@keyframes category-detail-dot {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-0.35rem);
    opacity: 1;
  }
}

/* --- Start: src/app/features/breed-detail/breed-detail.component --- */
.breed-detail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24rem;
  padding: 2rem 0 3rem;
}

.breed-detail-empty--filtered {
  min-height: 16rem;
  padding: 0 0 3rem;
}

.breed-detail-empty__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 2.75rem 2rem;
  text-align: center;
  border-radius: 1.5rem;
  border: 1px solid color-mix(in oklab, var(--color-primary, #088178) 14%, #dfe3e8);
  background: linear-gradient(
    160deg,
    color-mix(in oklab, var(--color-primary, #088178) 7%, #fff) 0%,
    #fff 48%,
    color-mix(in oklab, var(--color-primary, #088178) 5%, #fffaf5) 100%
  );
  box-shadow:
    0 16px 48px rgba(8, 129, 120, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.breed-detail-empty__card--compact {
  max-width: 28rem;
  padding: 2.25rem 1.75rem;
}

.breed-detail-empty__visual {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: 1.25rem;
}

.breed-detail-empty__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.breed-detail-empty__ring--outer {
  border-top-color: color-mix(in oklab, var(--color-primary, #088178) 55%, transparent);
  border-right-color: color-mix(in oklab, var(--color-primary, #088178) 18%, transparent);
}

.breed-detail-empty__ring--inner {
  inset: 0.7rem;
  border-bottom-color: color-mix(in oklab, var(--color-primary, #088178) 35%, transparent);
  border-left-color: color-mix(in oklab, var(--color-primary, #088178) 12%, transparent);
}

.breed-detail-empty__icon,
.breed-detail-empty__icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #088178);
}

.breed-detail-empty__icon {
  position: absolute;
  inset: 0;
  font-size: 1.75rem;
}

.breed-detail-empty__icon-badge {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-primary, #088178) 10%, #fff);
  font-size: 1.5rem;
}

.breed-detail-empty__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary, #088178);
}

.breed-detail-empty__title {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--color-light-primary-text, #212b36);
}

.breed-detail-empty__title--sm {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.breed-detail-empty__text {
  margin: 0;
  max-width: 26rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-light-secondary-text, #637381);
}

.breed-detail-empty__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.breed-detail-empty__btn {
  min-width: 11rem;
}

.breed-detail-empty__card--compact .breed-detail-empty__text {
  margin-bottom: 1.25rem;
}
/* --- End: src/app/features/breed-detail/breed-detail.component --- */

.category-products-toolbar {
  position: relative;
  z-index: 30;
}

/* Storefront list page — başlık, kayıt sayısı, filtre sıralama */
.storefront-list-page__heading {
  position: relative;
  margin: 0 0 1.75rem;
  padding: 1.125rem 1.25rem 1.25rem 1.375rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: linear-gradient(
    128deg,
    color-mix(in oklab, var(--color-primary-lighter) 38%, #fff) 0%,
    #fff 54%,
    color-mix(in oklab, var(--color-primary) 5%, #fff) 100%
  );
  border: 1px solid color-mix(in oklab, var(--color-primary) 14%, #dee2e6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 14px 32px -20px color-mix(in oklab, var(--color-primary) 50%, transparent);
  overflow: hidden;
  isolation: isolate;
}

.storefront-list-page__heading::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    var(--color-primary-light) 0%,
    var(--color-primary) 50%,
    var(--color-primary-dark) 100%
  );
  border-radius: 1rem 0 0 1rem;
}

.storefront-list-page__heading-content {
  position: relative;
  z-index: 1;
  padding-left: 0.625rem;
}

.storefront-list-page__eyebrow {
  margin: 0 0 0.3rem;
  font-family: var(--font-dm-sans), var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.storefront-list-page__title {
  margin: 0;
  font-family: var(--font-urbanist);
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-light-primary-text);
}

.storefront-list-page__accent-line {
  display: block;
  margin-top: 0.75rem;
  width: 3.5rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 72%,
    transparent 100%
  );
}

.storefront-list-page__heading-count {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  border: 1px solid color-mix(in oklab, var(--color-primary) 18%, #dfe3e8);
  border-radius: 5rem;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-primary) 7%, #fff) 0%,
    #fff 55%,
    color-mix(in oklab, var(--color-primary) 4%, #fff) 100%
  );
  box-shadow: 0 4px 14px rgba(8, 129, 120, 0.07);
}

.storefront-list-page__heading-count-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-primary) 12%, #fff);
  color: var(--color-primary);
  font-size: 1rem;
}

.storefront-list-page__heading-count-text {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.2rem;
  margin: 0;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--color-light-secondary-text);
}

.storefront-list-page__heading-count-range,
.storefront-list-page__heading-count-total {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

.storefront-list-page__heading-count-divider {
  font-weight: 500;
  color: color-mix(in oklab, #637381 70%, transparent);
}

.storefront-list-page__heading-count-suffix {
  font-weight: 500;
  color: var(--color-light-primary-text);
}

.storefront-list-page {
  --storefront-filter-control-height: calc((var(--spacing) * 2 * 2) + 1.5rem);
}

.storefront-list-page .category-products-grid {
  margin-top: 0;
}

.storefront-list-filter-sort__field.form-floating {
  position: relative;
  display: block;
  height: var(--storefront-filter-control-height);
  border-radius: 100px;
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) rgba(145, 158, 171, 0.32);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition: box-shadow 0.15s ease;
}

.storefront-list-filter-sort__field.form-floating:focus-within {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--color-light-primary-text);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.storefront-list-filter-sort__field.form-floating > .storefront-list-filter-sort__select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0.8125rem 2.25rem 0.125rem 1rem;
  border: 0;
  border-radius: 100px;
  background-color: transparent;
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: 500;
  color: var(--color-light-primary-text);
  cursor: pointer;
  box-shadow: none;
  appearance: none;
  transition: color 0.2s ease;
}

.storefront-list-filter-sort__field.form-floating > .storefront-list-filter-sort__select:hover,
.storefront-list-filter-sort__field.form-floating > .storefront-list-filter-sort__select:focus {
  outline: none;
  border: 0;
  box-shadow: none;
}

.storefront-list-filter-sort__field.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  padding: 0.3rem 1rem 0;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transform: scale(0.65) translateY(0.05rem) translateX(0.28rem);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-light-secondary-text);
}

.storefront-list-filter-sort__icon {
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 1rem;
  z-index: 2;
  transform: translateY(-50%);
  color: var(--color-light-primary-text);
}

@media (min-width: 1024px) {
  .storefront-list-page__heading {
    margin-bottom: 2rem;
    min-height: 5.25rem;
    padding: 1.25rem 1.5rem 1.375rem 1.5rem;
  }

  .storefront-list-page__heading-count {
    display: inline-flex;
  }
}

.category-results-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.5rem 1.125rem 0.5rem 0.625rem;
  border: 1px solid color-mix(in oklab, var(--color-primary, #088178) 18%, #dfe3e8);
  border-radius: 5rem;
  background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary, #088178) 7%, #fff) 0%, #fff 55%, color-mix(in oklab, var(--color-primary, #088178) 4%, #fffaf8) 100%);
  box-shadow: 0 4px 14px rgba(8, 129, 120, 0.07);
}

.category-results-summary__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-primary, #088178) 12%, #fff);
  color: var(--color-primary, #088178);
  font-size: 1.125rem;
}

.category-results-summary__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.4rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-light-secondary-text, #637381);
}

.category-results-summary__text--empty {
  color: var(--color-light-secondary-text, #637381);
  font-weight: 500;
}

.category-results-summary__range,
.category-results-summary__total {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-primary, #088178);
  letter-spacing: -0.01em;
}

.category-results-summary__divider {
  font-weight: 500;
  color: color-mix(in oklab, #637381 70%, transparent);
}

.category-results-summary__label {
  font-weight: 500;
  color: var(--color-light-primary-text, #212b36);
}

.category-sort-field {
  position: relative;
  z-index: 40;
  min-width: 210px;
}

.category-sort-label {
  display: block;
  margin-bottom: 0.375rem;
  padding-left: 0.875rem;
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--color-light-secondary-text, #637381);
}

.category-sort-control {
  position: relative;
}

.category-sort-select {
  appearance: none;
  width: 100%;
  min-width: 210px;
  height: 3rem;
  padding: 0 2.75rem 0 1.25rem;
  border: 1px solid color-mix(in oklab, #919eab 32%, transparent);
  border-radius: 5rem;
  background-color: #fff;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: var(--color-light-primary-text, #212b36);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(145, 158, 171, 0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.category-sort-select:hover {
  border-color: color-mix(in oklab, #919eab 48%, transparent);
}
.category-sort-select:focus {
  outline: none;
  border-color: #212b36;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.category-sort-icon {
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--color-light-primary-text, #212b36);
}

.category-products-grid {
  position: relative;
  z-index: 1;
}

.category-products-grid__item {
  animation: category-detail-fade-in 0.35s ease-out both;
}

@keyframes category-detail-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.measurement-unit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.measurement-unit-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid color-mix(in oklab, #919eab 38%, transparent);
  border-radius: 0.875rem;
  background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
  color: var(--color-light-primary-text, #212b36);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.measurement-unit-chip:hover {
  border-color: color-mix(in oklab, var(--color-primary, #088178) 45%, #dfe3e8);
  box-shadow: 0 6px 18px rgba(8, 129, 120, 0.1);
  transform: translateY(-1px);
}
.measurement-unit-chip.is-selected {
  border-color: var(--color-primary, #088178);
  background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary, #088178) 14%, #fff), color-mix(in oklab, var(--color-primary, #088178) 8%, #fff));
  box-shadow: 0 8px 20px rgba(8, 129, 120, 0.16);
  color: var(--color-primary, #088178);
}

.measurement-unit-chip__label {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.measurement-unit-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: color-mix(in oklab, #919eab 14%, #fff);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  color: var(--color-light-secondary-text, #637381);
}
.measurement-unit-chip.is-selected .measurement-unit-chip__count {
  background: color-mix(in oklab, var(--color-primary, #088178) 18%, #fff);
  color: var(--color-primary, #088178);
}

.unit-value-range {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.unit-value-range__labels,
.unit-value-range__bounds {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.unit-value-range__value {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-weight: 700;
  color: var(--color-primary, #088178);
}

.unit-value-range__bounds {
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--color-light-secondary-text, #637381);
}

.unit-value-range__slider {
  position: relative;
  height: 2rem;
}

.unit-value-range__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0.375rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #dfe3e8;
  overflow: hidden;
}

.unit-value-range__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--color-primary, #088178);
}

.unit-value-range__input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  appearance: none;
  pointer-events: none;
  background: transparent;
}
.unit-value-range__input::-webkit-slider-thumb {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--color-primary, #088178);
  box-shadow: 0 2px 8px rgba(8, 129, 120, 0.35);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.15s ease;
}
.unit-value-range__input::-moz-range-thumb {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--color-primary, #088178);
  box-shadow: 0 2px 8px rgba(8, 129, 120, 0.35);
  cursor: pointer;
  pointer-events: auto;
}
.unit-value-range__input::-webkit-slider-runnable-track {
  appearance: none;
  background: transparent;
}
.unit-value-range__input::-moz-range-track {
  background: transparent;
  border: 0;
}
.unit-value-range__input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid color-mix(in oklab, var(--color-primary, #088178) 35%, #fff);
  outline-offset: 2px;
}

.unit-value-range__input--max {
  z-index: 2;
}

.unit-value-range__input--min {
  z-index: 3;
}

.category-pagination__nav,
.category-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border: 1px solid color-mix(in oklab, #919eab 32%, transparent);
  border-radius: 50px;
  background: #fff;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-light-primary-text, #212b36);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.category-pagination__nav:hover:not(:disabled),
.category-pagination__page:hover:not(:disabled) {
  border-color: var(--color-primary, #088178);
  color: var(--color-primary, #088178);
  background: color-mix(in oklab, var(--color-primary, #088178) 8%, #fff);
}
.category-pagination__nav:disabled,
.category-pagination__page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.category-pagination__nav.active,
.category-pagination__page.active {
  border-color: var(--color-primary, #088178);
  background: color-mix(in oklab, var(--color-primary, #088178) 8%, #fff);
  font-weight: 600;
  color: var(--color-primary, #088178);
}

/* --- End: src/app/features/category-detail/category-detail.component.scss --- */

/* --- Start: storefront-list-page-skeleton --- */
.storefront-list-page--skeleton {
  min-height: 42rem;
}

.storefront-page-skeleton {
  min-height: 42rem;
}

.storefront-page-skeleton--blog-list,
.storefront-page-skeleton--blog-detail,
.storefront-page-skeleton--sss-list,
.storefront-page-skeleton--sss-detail {
  min-height: 38rem;
}

.storefront-page-skeleton--product-detail {
  min-height: 36rem;
}

.storefront-page-skeleton--cms-text {
  min-height: 28rem;
}

.storefront-skeleton-block {
  border-radius: 0.75rem;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--color-gray-300, #dfe3e8) 55%, #fff) 0%,
    color-mix(in oklab, var(--color-gray-200, #f4f6f8) 80%, #fff) 50%,
    color-mix(in oklab, var(--color-gray-300, #dfe3e8) 55%, #fff) 100%
  );
  background-size: 200% 100%;
  animation: storefront-skeleton-shimmer 1.35s ease-in-out infinite;
}

.storefront-skeleton-text {
  display: inline-block;
  min-width: 6rem;
  color: transparent;
  border-radius: 0.375rem;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--color-gray-300, #dfe3e8) 55%, #fff) 0%,
    color-mix(in oklab, var(--color-gray-200, #f4f6f8) 80%, #fff) 50%,
    color-mix(in oklab, var(--color-gray-300, #dfe3e8) 55%, #fff) 100%
  );
  background-size: 200% 100%;
  animation: storefront-skeleton-shimmer 1.35s ease-in-out infinite;
}

.storefront-skeleton-block--title {
  width: 5.5rem;
  height: 1.25rem;
}

.storefront-skeleton-block--breadcrumb-label {
  width: 4.75rem;
  height: 1rem;
  border-radius: 0.375rem;
}

.storefront-skeleton-block--breadcrumb-path {
  display: inline-block;
  width: 8.5rem;
  height: 1rem;
  border-radius: 0.375rem;
}

.storefront-skeleton-block--search,
.storefront-skeleton-block--select {
  width: 100%;
  height: 2.75rem;
  border-radius: 100px;
}

.storefront-skeleton-block--line {
  width: 100%;
  height: 1rem;
}

.storefront-skeleton-block--line.storefront-skeleton-block--short {
  width: 72%;
}

.storefront-skeleton-block--page-title {
  width: min(16rem, 70vw);
  height: 2rem;
  border-radius: 0.5rem;
}

.storefront-skeleton-block--count {
  width: 6.5rem;
  height: 2.5rem;
  border-radius: 100px;
  flex-shrink: 0;
}

.storefront-skeleton-block--image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0.75rem;
}

.storefront-skeleton-block--price {
  width: 45%;
  height: 1.25rem;
}

.storefront-skeleton-block--button {
  width: 100%;
  height: 2.75rem;
  border-radius: 100px;
}

.storefront-list-page__heading--skeleton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.storefront-product-card-skeleton {
  background: #fff;
}

.storefront-skeleton-block--blog-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 1rem;
}

.storefront-skeleton-block--chip {
  width: 6rem;
  height: 1.5rem;
  border-radius: 999px;
}

.storefront-skeleton-block--cms-eyebrow {
  width: 7rem;
  height: 1rem;
}

.storefront-skeleton-block--cms-title {
  width: min(24rem, 80vw);
  height: 2.25rem;
  border-radius: 0.5rem;
}

.storefront-skeleton-block--sss-index {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.storefront-skeleton-block--sss-arrow {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

.storefront-skeleton-sss-row {
  background: #fff;
}

.storefront-skeleton-block--product-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
}

.storefront-skeleton-block--product-title {
  width: 85%;
  height: 2rem;
}

.storefront-skeleton-block--price-box {
  width: 100%;
  height: 5rem;
  border-radius: 1rem;
}

.storefront-skeleton-block--combo-box {
  width: 100%;
  height: 4rem;
  border-radius: 1rem;
}

.storefront-skeleton-block--qty {
  width: 7rem;
  height: 2.75rem;
  border-radius: 100px;
}

.storefront-skeleton-block--cart-btn {
  height: 2.75rem;
  border-radius: 100px;
}

.product-detail-skeleton-gallery {
  border-radius: 1rem;
  overflow: hidden;
  background: #f4f3f5;
}

@keyframes storefront-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* --- End: storefront-list-page-skeleton --- */

/* --- Start: src/app/features/cms-detail/cms-detail.component.scss (app-cms-detail) --- */
@charset "UTF-8";
/* Sellzy about.html — CMS detay içerik tipografisi */
.cms-detail-state {
  min-height: 50vh;
  display: flex;
  align-items: center;
}

.cms-detail-state__inner {
  width: 100%;
  padding: 3rem 0;
}

.cms-detail-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cms-detail-loader__visual {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
}

.cms-detail-loader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}

.cms-detail-loader__ring--outer {
  border-top-color: var(--color-primary, #f9a826);
  animation: cms-spin 1s linear infinite;
}

.cms-detail-loader__ring--inner {
  inset: 0.5rem;
  border-right-color: rgba(249, 168, 38, 0.35);
  animation: cms-spin 1.4s linear infinite reverse;
}

.cms-detail-loader__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--color-primary, #f9a826);
}

.cms-detail-loader__text {
  font-weight: 600;
  color: var(--color-light-secondary-text, #637381);
}

.cms-detail-loader__dots {
  display: flex;
  gap: 0.35rem;
}
.cms-detail-loader__dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-primary, #f9a826);
  animation: cms-bounce 1.2s ease-in-out infinite;
}
.cms-detail-loader__dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.cms-detail-loader__dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes cms-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes cms-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.45;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
app-cms-detail {
  display: block;
}

.cms-about-intro {
  position: relative;
}

.cms-about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.3rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;
  background: rgba(0, 171, 85, 0.08);
}
.cms-about-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--color-primary, #00ab55);
}

.cms-about-title {
  position: relative;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cms-about-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 0.85rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--color-primary, #00ab55), #ffd60a);
}

.cms-about-editable {
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--color-light-secondary-text, #637381);
}
.cms-about-editable > :where(*):first-child {
  margin-top: 0;
}
.cms-about-editable :where(h2, h3, h4, h5, h6) {
  color: var(--color-light-primary-text, #1c252e);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: 2.25rem;
  margin-bottom: 0.875rem;
}
.cms-about-editable :where(h2) {
  font-size: 1.75rem;
}
.cms-about-editable :where(h3) {
  font-size: 1.5rem;
}
.cms-about-editable :where(h4) {
  font-size: 1.25rem;
}
.cms-about-editable :where(h5) {
  font-size: 1.125rem;
}
.cms-about-editable :where(p) {
  margin-bottom: 1.25rem;
}
.cms-about-editable > :where(p):first-of-type {
  font-size: 1.1875rem;
  line-height: 1.8;
  color: var(--color-light-primary-text, #1c252e);
  font-weight: 500;
}
.cms-about-editable > :where(p):first-of-type::first-letter {
  float: left;
  margin: 0.35rem 0.85rem 0 0;
  font-size: 3.6rem;
  line-height: 0.78;
  font-weight: 700;
  color: var(--color-primary, #00ab55);
}
.cms-about-editable :where(a) {
  color: var(--color-primary, #00ab55);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}
.cms-about-editable :where(a):hover {
  color: var(--color-primary-darker, #007d3f);
}
.cms-about-editable :where(strong, b) {
  color: var(--color-light-primary-text, #1c252e);
  font-weight: 700;
}
.cms-about-editable :where(ul, ol) {
  margin: 0 0 1.25rem;
  padding-left: 0;
  list-style: none;
}
.cms-about-editable :where(ul) > li,
.cms-about-editable :where(ol) > li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.625rem;
}
.cms-about-editable :where(ul) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--color-primary, #00ab55);
  transform: translateY(-50%);
}
.cms-about-editable :where(ol) {
  counter-reset: cms-ol;
}
.cms-about-editable :where(ol) > li {
  counter-increment: cms-ol;
}
.cms-about-editable :where(ol) > li::before {
  content: counter(cms-ol);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary, #00ab55);
  border-radius: 9999px;
}
.cms-about-editable :where(blockquote) {
  margin: 1.75rem 0;
  padding: 1.25rem 1.75rem;
  border-left: 4px solid var(--color-primary, #00ab55);
  background: rgba(0, 171, 85, 0.05);
  border-radius: 0 1rem 1rem 0;
  font-size: 1.125rem;
  font-style: italic;
  color: var(--color-light-primary-text, #1c252e);
}
.cms-about-editable :where(blockquote) p:last-child {
  margin-bottom: 0;
}
.cms-about-editable :where(img) {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  margin: 1.5rem 0;
  box-shadow: 0 12px 32px rgba(28, 37, 46, 0.08);
}
.cms-about-editable :where(hr) {
  border: 0;
  height: 1px;
  margin: 2.25rem 0;
  background: var(--color-gray-300, #e5e7eb);
}

.about-stats-band {
  padding: 1.25rem;
  background: linear-gradient(135deg, #fff4d6 0%, #ffefc0 100%);
  border: 1px solid #f5e6b8;
  border-radius: 1.5rem;
  box-shadow: 0 16px 40px rgba(245, 158, 11, 0.1);
}
@media (min-width: 1024px) {
  .about-stats-band {
    padding: 1.75rem;
    border-radius: 2rem;
  }
}

.about-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .about-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .about-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.about-stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(245, 230, 184, 0.9);
  border-radius: 1.25rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.about-stats-item:hover {
  transform: translateY(-4px);
  border-color: #f5d76e;
  box-shadow: 0 14px 28px rgba(28, 37, 46, 0.08);
}

.about-stats-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  border-radius: 9999px;
  background: linear-gradient(145deg, #ffe8a3 0%, #ffd76a 100%);
  color: var(--color-light-primary-text, #1c252e);
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.about-stats-item__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  margin-bottom: 0.35rem;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-light-primary-text, #1c252e);
}

.about-stats-item__suffix {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--color-primary, #00ab55);
}

.about-stats-item__label {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-light-secondary-text, #637381);
}

.about-quality-section {
  background-color: #fff4d6;
  border-radius: 2rem;
  overflow: hidden;
}
@media (min-width: 1280px) {
  .about-quality-section {
    border-radius: 2.5rem;
    max-width: 1728px;
    margin-left: auto;
    margin-right: auto;
  }
}

.about-quality-header {
  background-color: #fff4d6;
}
@media (min-width: 1024px) {
  .about-quality-header::before, .about-quality-header::after {
    background-color: #fff4d6;
  }
}

.about-quality-cards {
  background-color: #fff4d6;
}

.about-delivery-section {
  background-color: #fff4d6;
  border: 1px solid #f5e6b8;
  border-radius: 2rem;
  padding: 2rem 1.5rem;
}
@media (min-width: 1024px) {
  .about-delivery-section {
    padding: 3rem 2.5rem;
    border-radius: 2.5rem;
  }
}

.about-testimonials-section {
  background-color: #fff4d6;
  border-radius: 2rem;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
@media (min-width: 1024px) {
  .about-testimonials-section {
    margin-bottom: 1.75rem;
  }
}
@media (min-width: 1280px) {
  .about-testimonials-section {
    border-radius: 2.5rem;
    max-width: 1728px;
    margin-left: auto;
    margin-right: auto;
  }
}

.about-testimonials-header {
  background-color: #fff4d6;
}

.about-testimonials-cards {
  background-color: #fff4d6;
}

/* --- End: src/app/features/cms-detail/cms-detail.component.scss --- */

/* --- Start: src/app/features/home/home.component.css (app-home) --- */
app-home {

  display: block;

}



.storefront-home {
  display: block;
  background-color: #ffffff;
}

.home-hero-frame {
  border-radius: 1.5rem;
  border: 1px solid rgba(243, 146, 0, 0.2);
  background-color: #fffaf5;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 10px 24px -6px rgba(243, 146, 0, 0.16),
    0 20px 40px -12px rgba(15, 23, 42, 0.08);
  isolation: isolate;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.home-hero-frame--slider {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: #fffaf5;
}

.home-hero-frame--slider:hover {
  border-color: rgba(243, 146, 0, 0.38);
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.06),
    0 16px 32px -4px rgba(243, 146, 0, 0.22),
    0 28px 52px -10px rgba(15, 23, 42, 0.1);
}

.home-hero-frame--promo {
  border-color: rgba(243, 146, 0, 0.14);
  background-color: #fff;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 8px 18px -4px rgba(243, 146, 0, 0.12);
}

.home-hero-frame--promo:hover {
  border-color: rgba(243, 146, 0, 0.28);
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.05),
    0 12px 24px -4px rgba(243, 146, 0, 0.18);
}

.home-five-hero-slider {
  overflow: hidden;
  height: 100%;
}

.home-five-hero-slider .slick-list,
.home-five-hero-slider .slick-track,
.home-five-hero-slider .slick-slide {
  border-radius: inherit;
  height: 100%;
}

.home-five-hero-slider__slide {
  line-height: 0;
  height: 100%;
}

.home-five-hero-slider__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}



.home-five-hero-slider-nav .slider-btn {
  pointer-events: auto;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}



@media (min-width: 1280px) {

  .home-hero-grid__main,

  .home-hero-grid__side {

    align-self: start;

  }



  .home-hero-promo-stack--synced {

    display: grid;

    grid-template-rows: 1fr 1fr;

    min-height: 0;

    overflow: hidden;

  }



  .home-hero-promo-stack--synced .home-hero-promo {

    min-height: 0;

    height: 100%;

    overflow: hidden;

  }



  .home-hero-promo-stack--synced .home-hero-promo__image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

  }

}



.home-hero-promo {
  position: relative;
  isolation: isolate;
  line-height: 0;
  aspect-ratio: 16 / 9;
}

.home-hero-promo__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}



.home-hero-promo__content {

  position: absolute;

  inset: 0;

  z-index: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.home-trust__grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1.25rem;

}



@media (min-width: 768px) {

  .home-trust__grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



@media (min-width: 1280px) {

  .home-trust__grid {

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 1.5rem;

  }

}



.home-trust__card {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  height: 100%;

  padding: 1.75rem 1.35rem;

  border-radius: 1.25rem;

  border: 1px solid rgba(243, 146, 0, 0.16);

  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);

  box-shadow:

    0 2px 4px rgba(15, 23, 42, 0.04),

    0 10px 24px -8px rgba(243, 146, 0, 0.12);

  transition:

    transform 0.25s ease,

    border-color 0.25s ease,

    box-shadow 0.25s ease;

}



.home-trust__card:hover {

  transform: translateY(-4px);

  border-color: rgba(243, 146, 0, 0.32);

  box-shadow:

    0 6px 12px rgba(15, 23, 42, 0.06),

    0 18px 36px -10px rgba(243, 146, 0, 0.2);

}



.home-trust__icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 3.75rem;

  height: 3.75rem;

  margin-bottom: 1rem;

  border-radius: 999px;

  background: linear-gradient(145deg, #ffef9e 0%, #ffd24d 100%);

  color: var(--color-light-primary-text);

  box-shadow: 0 8px 20px rgba(240, 181, 0, 0.22);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.home-trust__card:hover .home-trust__icon {

  transform: scale(1.06);

  box-shadow: 0 10px 24px rgba(240, 181, 0, 0.3);

}



.home-trust__icon i {

  font-size: 1.75rem;

  line-height: 1;

}



.home-trust__title {

  margin: 0 0 0.5rem;

  font-size: 1.0625rem;

  font-weight: 700;

  line-height: 1.35;

  color: var(--color-light-primary-text);

}



.home-trust__text {

  margin: 0;

  max-width: 16rem;

  font-size: 0.9375rem;

  line-height: 1.55;

  color: var(--color-light-secondary-text);

}



.homepage-products-header__title {

  margin: 0;

}



.homepage-category-tabs-shell {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  width: 100%;

  min-width: 0;

}



.homepage-category-tabs-arrow {

  display: inline-flex;

  flex-shrink: 0;

  align-items: center;

  justify-content: center;

  width: 3rem;

  height: 3rem;

  padding: 0;

  border: 0;

  border-radius: 999px;

  background-color: rgba(145, 158, 171, 0.08);

  color: var(--color-light-primary-text);

  cursor: pointer;

  transition: background-color 0.3s ease, color 0.3s ease;

}



.homepage-category-tabs-arrow:hover {

  background-color: var(--color-primary);

  color: #fff;

}



.homepage-category-tabs-arrow i {

  font-size: 1.375rem;

  line-height: 1;

}



.homepage-category-tabs {

  display: flex;

  flex: 1 1 auto;

  flex-wrap: nowrap;

  gap: 1rem;

  min-width: 0;

  max-width: 100%;

  overflow-x: auto;

  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  -ms-overflow-style: none;

  touch-action: pan-x;

  cursor: grab;

  user-select: none;

  scroll-snap-type: x proximity;

}



.homepage-category-tabs.is-dragging {

  cursor: grabbing;

  scroll-snap-type: none;

}



.homepage-category-tabs::-webkit-scrollbar {

  display: none;

}



.homepage-category-tabs .btn {

  scroll-snap-align: start;

  touch-action: manipulation;

  cursor: pointer;

  user-select: none;

}



@media (min-width: 1280px) {

  .homepage-category-tabs-shell {

    flex: 1 1 auto;

    max-width: min(72rem, calc(100% - 11rem));

    margin-left: auto;

  }

}



.home-popular-brands-slider-nav {

  display: none;

  align-items: center;

  justify-content: flex-end;

  gap: 1.5rem;

  min-width: 6.5rem;

}



@media (min-width: 768px) {

  .home-popular-brands-slider-nav {

    display: flex;

  }

}



.home-popular-brands-slider-nav .slider-btn {

  background-color: rgba(145, 158, 171, 0.08);

}



.home-popular-brands-slider-nav .slider-btn:hover {

  background-color: var(--color-primary);

}



.home-popular-brands-slider-nav .slider-btn:hover i {

  color: #fff;

}



/* ========== SSS (Sıkça Sorulan Sorular) ========== */

.home-sss-hero__banner {
  position: relative;
  overflow: hidden;
  padding: 2.25rem 1.5rem 1.75rem;
  border-radius: 1.5rem;
  text-align: center;
  background: linear-gradient(135deg, #f5b800 0%, #f39200 55%, #e87d00 100%);
  box-shadow:
    0 4px 12px rgba(243, 146, 0, 0.22),
    0 18px 40px -12px rgba(232, 125, 0, 0.35);
}

.home-sss-hero__banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 88% 80%, rgba(255, 255, 255, 0.14) 0%, transparent 38%);
  pointer-events: none;
}

.home-sss-hero__title {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.home-sss-hero__subtitle {
  position: relative;
  margin: 0.625rem auto 1.5rem;
  max-width: 28rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.home-sss-hero__search {
  position: relative;
  max-width: 32rem;
  margin-bottom: 0;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  transition: box-shadow 0.25s ease;
}

.home-sss-hero__search:focus-within {
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.12),
    0 0 0 3px rgba(255, 255, 255, 0.45);
}

.home-sss-state {
  margin: 0;
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-light-secondary-text);
}

.home-sss-state--inline {
  padding: 1.5rem 1rem;
}

.home-sss-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(145, 158, 171, 0.08);
}

.home-sss-tab {
  flex: 1 1 auto;
  min-width: fit-content;
  padding: 0.7rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-light-secondary-text);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}

.home-sss-tab:hover {
  color: var(--color-light-primary-text);
  background: rgba(255, 255, 255, 0.65);
}

.home-sss-tab--active {
  color: #b35f00;
  background: #fff;
  box-shadow: 0 4px 14px rgba(243, 146, 0, 0.18);
}

.home-sss-tab--active:hover {
  color: #b35f00;
  background: #fff;
}

.home-sss-panel {
  padding: 0.35rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(243, 146, 0, 0.14);
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 12px 28px -10px rgba(243, 146, 0, 0.12);
}

.home-sss-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem;
}

.home-sss-accordion__item {
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(145, 158, 171, 0.16);
  background: #fff;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.home-sss-accordion__item:hover {
  border-color: rgba(243, 146, 0, 0.28);
}

.home-sss-accordion__item--open {
  border-color: rgba(243, 146, 0, 0.38);
  box-shadow: 0 6px 18px -8px rgba(243, 146, 0, 0.28);
}

.home-sss-accordion__header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 1rem 1.125rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s ease;
}

.home-sss-accordion__header:hover {
  background: rgba(243, 146, 0, 0.04);
}

.home-sss-accordion__item--open .home-sss-accordion__header {
  background: rgba(243, 146, 0, 0.06);
}

.home-sss-accordion__index {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffef9e 0%, #ffd24d 100%);
  color: #8a4f00;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

.home-sss-accordion__question {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-light-primary-text);
}

.home-sss-accordion__toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(145, 158, 171, 0.1);
  color: var(--color-light-primary-text);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.home-sss-accordion__toggle i {
  font-size: 1.125rem;
  line-height: 1;
}

.home-sss-accordion__toggle .hgi-minus-sign {
  display: none;
}

.home-sss-accordion__toggle .hgi-plus-sign {
  display: inline-block;
}

.home-sss-accordion__item--open .home-sss-accordion__toggle {
  background: var(--color-primary);
  color: #fff;
  transform: rotate(0deg);
}

.home-sss-accordion__item--open .home-sss-accordion__toggle .hgi-minus-sign {
  display: inline-block;
}

.home-sss-accordion__item--open .home-sss-accordion__toggle .hgi-plus-sign {
  display: none;
}

.home-sss-accordion__body {
  padding: 0 1.125rem 1.125rem 3.875rem;
  animation: home-sss-fade-in 0.28s ease;
}

.home-sss-accordion__body p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-light-secondary-text);
}

@keyframes home-sss-fade-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .home-sss-hero__banner {
    padding: 2.75rem 2rem 2rem;
  }

  .home-sss-tab {
    flex: 0 1 auto;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
  }

  .home-sss-accordion__header {
    padding: 1.125rem 1.25rem;
  }

  .home-sss-accordion__body {
    padding: 0 1.25rem 1.25rem 4.125rem;
  }
}

@media (max-width: 639px) {
  .home-sss-tabs {
    border-radius: 1rem;
    justify-content: stretch;
  }

  .home-sss-tab {
    flex: 1 1 calc(50% - 0.35rem);
    min-width: calc(50% - 0.35rem);
    font-size: 0.75rem;
    padding: 0.65rem 0.75rem;
  }

  .home-sss-accordion__body {
    padding-left: 1.125rem;
    padding-top: 0.25rem;
  }
}

.sss-sidebar-all--active {
  text-decoration: underline;
}

.sss-accordion-list__category {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary, #00ab55);
  text-decoration: none;
}

.sss-accordion-list__category:hover {
  text-decoration: underline;
}

.sss-accordion-list__detail-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary, #00ab55);
  text-decoration: none;
}

.sss-accordion-list__detail-link:hover {
  text-decoration: underline;
}

.sss-accordion-list__header-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.sss-detail-article {
  max-width: 100%;
}

.sss-detail-content {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--light-primary-text, #212b36);
}


.contact-page__content {
  min-height: 12rem;
}

.contact-page__intro {
  margin-bottom: 2rem;
}

.contact-page__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--light-primary-text, #212b36);
}

.contact-page__lead {
  margin: 0;
  max-width: 42rem;
  color: var(--light-secondary-text, #637381);
  line-height: 1.7;
}

.contact-page__grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .contact-page__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 2rem;
    align-items: start;
  }
}

.contact-page__panel {
  border: 1px solid rgba(145, 158, 171, 0.22);
  border-radius: 1.25rem;
  background: #fff;
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .contact-page__panel {
    padding: 1.75rem;
  }
}

.contact-page__panel-title {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--light-primary-text, #212b36);
}

.contact-page__feedback {
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.contact-page__feedback--success {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.contact-page__feedback--error {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.contact-page__form {
  display: grid;
  gap: 1rem;
}

.contact-page__field {
  display: grid;
  gap: 0.45rem;
}

.contact-page__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--light-primary-text, #212b36);
}

.contact-page__input,
.contact-page__textarea {
  width: 100%;
  border: 1px solid rgba(145, 158, 171, 0.35);
  border-radius: 0.875rem;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--light-primary-text, #212b36);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-page__input:focus,
.contact-page__textarea:focus {
  outline: none;
  border-color: rgba(0, 184, 217, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 184, 217, 0.12);
}

.contact-page__textarea {
  resize: vertical;
  min-height: 9rem;
}

.contact-page__submit {
  width: 100%;
  border-radius: 999px;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.contact-page__info-list {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.contact-page__info-item {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.contact-page__info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: rgba(0, 184, 217, 0.1);
  color: #0088a8;
  flex-shrink: 0;
}

.contact-page__info-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--light-secondary-text, #637381);
  margin-bottom: 0.15rem;
}

.contact-page__info-item a {
  color: var(--light-primary-text, #212b36);
  text-decoration: none;
}

.contact-page__info-item a:hover {
  color: #0088a8;
}

.contact-page__info-item p {
  margin: 0;
  line-height: 1.6;
}

.contact-page__loading {
  margin: 0;
  color: var(--light-secondary-text, #637381);
}

.contact-page__branches-title {
  margin: 0 0 0.875rem;
  font-size: 1rem;
  font-weight: 700;
}

.contact-page__branch-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.contact-page__branch-tab {
  border: 1px solid rgba(145, 158, 171, 0.35);
  background: #fff;
  color: var(--light-primary-text, #212b36);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.contact-page__branch-tab--active {
  border-color: rgba(0, 184, 217, 0.55);
  background: rgba(0, 184, 217, 0.1);
  color: #0088a8;
}

.contact-page__branch-card {
  display: grid;
  gap: 1rem;
}

.contact-page__branch-meta {
  display: grid;
  gap: 0.5rem;
}

.contact-page__branch-address,
.contact-page__branch-phone {
  margin: 0;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  line-height: 1.6;
  color: var(--light-secondary-text, #637381);
}

.contact-page__branch-phone a,
.contact-page__branch-link {
  color: #0088a8;
  text-decoration: none;
  font-weight: 600;
}

.contact-page__branch-link {
  display: inline-flex;
  width: fit-content;
}

.contact-page__map-wrap {
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(145, 158, 171, 0.22);
  background: #f4f6f8;
}

.contact-page__map {
  display: block;
  width: 100%;
  min-height: 280px;
  border: 0;
}

.contact-page__map-hint {
  margin: 0;
  font-size: 0.875rem;
  color: var(--light-secondary-text, #637381);
}

.storefront-submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.storefront-submit-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 28, 36, 0.42);
  backdrop-filter: blur(4px);
}

.storefront-submit-overlay__card {
  position: relative;
  width: min(100%, 22rem);
  border-radius: 1.5rem;
  background: linear-gradient(180deg, #fffef8 0%, #fff9e8 100%);
  border: 1px solid rgba(255, 193, 7, 0.35);
  box-shadow: 0 24px 60px rgba(22, 28, 36, 0.18);
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
  animation: storefront-submit-overlay-pop 0.35s ease;
}

.storefront-submit-overlay__mascot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.storefront-submit-overlay__face {
  font-size: 2.4rem;
  line-height: 1;
  animation: storefront-submit-overlay-bounce 1.1s ease-in-out infinite;
}

.storefront-submit-overlay__paw {
  font-size: 1.2rem;
  opacity: 0.85;
}

.storefront-submit-overlay__paw--1 {
  animation: storefront-submit-overlay-paw-left 1.1s ease-in-out infinite;
}

.storefront-submit-overlay__paw--2 {
  animation: storefront-submit-overlay-paw-right 1.1s ease-in-out infinite;
}

.storefront-submit-overlay__spinner {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 3px solid rgba(255, 193, 7, 0.25);
  border-top-color: #f0b500;
  animation: storefront-submit-overlay-spin 0.85s linear infinite;
}

.storefront-submit-overlay__title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #212b36;
}

.storefront-submit-overlay__hint {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #637381;
}

@keyframes storefront-submit-overlay-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes storefront-submit-overlay-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes storefront-submit-overlay-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes storefront-submit-overlay-paw-left {
  0%,
  100% {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(-4px) rotate(8deg);
  }
}

@keyframes storefront-submit-overlay-paw-right {
  0%,
  100% {
    transform: translateY(0) rotate(8deg);
  }
  50% {
    transform: translateY(-4px) rotate(-8deg);
  }
}

.product-detail-page__content {
  min-height: 12rem;
}

.product-detail-layout {
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .product-detail-layout {
    column-gap: 1.75rem;
    row-gap: 1.25rem;
  }

  .product-detail-gallery-wrap {
    padding-right: 0.15rem;
  }

  .product-detail-info-wrap {
    padding-left: 0.15rem;
  }
}

@media (min-width: 1280px) {
  .product-detail-layout {
    column-gap: 2rem;
  }
}

.product-detail-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(145, 158, 171, 0.18);
}

.product-detail-meta-row__spacer {
  flex: 1 1 auto;
}

.product-detail-brand__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 184, 217, 0.22);
  background: linear-gradient(135deg, rgba(0, 184, 217, 0.1) 0%, rgba(0, 184, 217, 0.04) 100%);
  color: #0088a8;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.product-detail-brand__badge:hover {
  border-color: rgba(0, 184, 217, 0.45);
  background: rgba(0, 184, 217, 0.14);
  color: #006f89;
}

.product-detail-brand__badge--static {
  cursor: default;
}

.product-detail-brand__badge i {
  font-size: 0.95rem;
  line-height: 1;
}

.product-detail-brand__badge span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-detail-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  line-height: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
}

.product-detail-stock__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  flex: none;
}

.product-detail-stock--in {
  color: #118d57;
  border-color: rgba(17, 141, 87, 0.22);
  background: rgba(17, 141, 87, 0.08);
}

.product-detail-stock--in .product-detail-stock__dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.product-detail-stock--out {
  color: #b42318;
  border-color: rgba(180, 35, 24, 0.22);
  background: rgba(180, 35, 24, 0.08);
}

.product-detail-stock--out .product-detail-stock__dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.product-detail-stock i {
  font-size: 1rem;
  line-height: 1;
}

.product-detail-extra {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(145, 158, 171, 0.18);
  border-radius: 0.85rem;
  background: #fafbfc;
}

.product-detail-extra__block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.product-detail-extra__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.product-detail-extra__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: rgba(33, 43, 54, 0.06);
  color: var(--color-light-primary-text, #212b36);
  font-size: 0.95rem;
}

.product-detail-extra__head-title {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-light-secondary-text, #637381);
}

.product-detail-extra__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-detail-extra__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(145, 158, 171, 0.2);
  background: #fff;
  color: var(--color-light-primary-text, #212b36);
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-weight: 500;
}

.product-detail-extra__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(145, 158, 171, 0.22);
}

.product-detail-extra__spec {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid rgba(145, 158, 171, 0.16);
}

.product-detail-extra__spec-label {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-light-secondary-text, #637381);
}

.product-detail-extra__spec-value {
  font-size: 0.875rem;
  line-height: 1.35rem;
  font-weight: 600;
  color: var(--color-light-primary-text, #212b36);
}

.product-detail-tabs-section {
  margin-top: 2.5rem;
}

#product-details-tabs.product-detail-tabs ul.filter-list {
  margin-bottom: 1.5rem !important;
  gap: 0.75rem !important;
}

#product-details-tabs.product-detail-tabs ul.filter-list li button {
  min-width: 8.5rem;
  padding: 0.7rem 1.4rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.25rem !important;
  font-weight: 600 !important;
  border: 1px solid rgba(145, 158, 171, 0.3) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #637381 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#product-details-tabs.product-detail-tabs ul.filter-list li button:hover:not(.active) {
  color: #212b36 !important;
  border-color: rgba(145, 158, 171, 0.45) !important;
  background: #fafbfc !important;
}

#product-details-tabs.product-detail-tabs ul.filter-list li button.active {
  background: #ffeb69 !important;
  border-color: #f4d03f !important;
  color: #212b36 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(244, 208, 63, 0.35);
}

.product-detail-tabs__count {
  font-weight: 600;
}

#product-details-tabs .product-details-tab.product-detail-reviews {
  overflow: hidden;
}

.product-detail-reviews__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(145, 158, 171, 0.24);
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

.product-detail-reviews__summary {
  min-width: 0;
  flex: 1 1 auto;
}

.product-detail-reviews__score {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem 0.875rem;
}

.product-detail-reviews__score-value {
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 700;
  color: #212b36;
}

.product-detail-reviews__score-count {
  font-size: 0.875rem;
  color: #637381;
}

.product-detail-reviews__summary-empty {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #637381;
}

.product-detail-reviews__head-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #212b36;
}

.product-detail-reviews__summary-empty i {
  font-size: 1.125rem;
  color: #919eab;
}

.product-detail-reviews__write-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid rgba(8, 129, 120, 0.35);
  border-radius: 999px;
  background: #ffffff;
  color: #088178;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-detail-reviews__write-btn:hover {
  background: rgba(8, 129, 120, 0.06);
  border-color: #088178;
  box-shadow: 0 2px 8px rgba(8, 129, 120, 0.12);
}

.product-detail-reviews__stars {
  width: 90px;
  height: 18px;
  background-repeat: repeat-x;
  background-position: 0 0;
}

.product-detail-reviews__stars--bg {
  background-image: url('../images/star-icon.png');
  overflow: hidden;
}

.product-detail-reviews__stars--fill {
  background-image: url('../images/star-icon.png');
  background-position: 0 -18px;
  max-width: 100%;
}

.product-detail-reviews__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.5rem 2rem;
}

.product-detail-reviews__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: rgba(255, 235, 105, 0.35);
  color: #b78103;
  font-size: 1.5rem;
}

.product-detail-reviews__empty-title {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #212b36;
}

.product-detail-reviews__empty-text {
  margin: 0 0 1.25rem;
  max-width: 26rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #637381;
}

.product-detail-reviews__empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: none;
  border-radius: 999px;
  background: #ffeb69;
  color: #212b36;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(244, 208, 63, 0.35);
}

.product-detail-reviews__empty-btn:hover {
  background: #ffe94d;
}

.product-detail-reviews__list {
  margin: 0;
  padding: 1.25rem 1.5rem 0.5rem;
  list-style: none;
}

.product-detail-reviews__list > li {
  margin: 0;
}

.product-detail-reviews__list > li + li {
  margin-top: 0;
}

.product-detail-review {
  padding: 1rem 0 1.25rem;
  border-bottom: 1px solid rgba(145, 158, 171, 0.2);
}

.product-detail-reviews__list > li:last-child .product-detail-review {
  border-bottom: none;
  padding-bottom: 0.5rem;
}

.product-detail-review__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.product-detail-review__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.product-detail-review__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(8, 129, 120, 0.1);
  border: 1px solid rgba(8, 129, 120, 0.18);
  font-size: 0.875rem;
  font-weight: 700;
  color: #088178;
}

.product-detail-review__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #212b36;
}

.product-detail-review__date {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: #919eab;
}

.product-detail-review__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.product-detail-review__rating-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #212b36;
}

.product-detail-review__title {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #212b36;
}

.product-detail-review__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #454f5b;
  white-space: pre-line;
}

.product-detail-reviews__form {
  margin: 0;
  padding: 1.5rem;
  border-top: 1px solid rgba(145, 158, 171, 0.24);
  background: #fafbfc;
}

.product-detail-reviews__form-head h5 {
  margin: 0 0 0.375rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #212b36;
}

.product-detail-reviews__form-head p {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #637381;
}

.product-review-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-review-form__rating-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem 0.75rem;
}

.product-review-form__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #212b36;
}

.product-review-form__rating-value {
  font-size: 0.875rem;
  color: #637381;
}

.product-review-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.product-review-form__field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #637381;
}

.product-review-form__input,
.product-review-form__textarea {
  width: 100%;
  border: 1px solid rgba(145, 158, 171, 0.45);
  border-radius: 1rem;
  background: #ffffff;
  color: #212b36;
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-review-form__input {
  border-radius: 999px;
}

.product-review-form__input:focus,
.product-review-form__textarea:focus {
  border-color: #088178;
  box-shadow: 0 0 0 3px rgba(8, 129, 120, 0.12);
}

.product-review-form__textarea {
  resize: vertical;
  min-height: 7rem;
}

.product-review-form__message {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.product-review-form__message--error {
  color: #ff5630;
}

.product-review-form__message--success {
  color: #088178;
}

.product-review-form__actions {
  display: flex;
  justify-content: flex-start;
}

.product-review-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.5rem;
  border: none;
  border-radius: 999px;
  background: #088178;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.product-review-form__submit:hover:not(:disabled) {
  background: #066a63;
}

.product-review-form__submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.product-review-form__stars {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.product-review-form__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #c4cdd5;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.product-review-form__star:hover,
.product-review-form__star--active {
  color: #f4b400;
  background: rgba(244, 180, 0, 0.12);
}

.product-review-form__star i {
  font-size: 1.25rem;
  line-height: 1;
}

.product-detail-free-order {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 235, 105, 0.28);
  border: 1px solid rgba(244, 208, 63, 0.55);
  color: #5c4813;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.product-detail-free-order i {
  font-size: 1.125rem;
  margin-top: 0.125rem;
}

.product-detail-combos {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(145, 158, 171, 0.28);
  border-radius: 1rem;
  background: #fafbfc;
}

.product-detail-combos__title {
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #212b36;
}

.product-detail-combos__hint {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: #637381;
}

.product-detail-combos__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-detail-combos__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  border: 1px solid rgba(145, 158, 171, 0.22);
  background: #ffffff;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.product-detail-combos__item:hover {
  border-color: rgba(8, 129, 120, 0.35);
  background: #f8fcfb;
}

.product-detail-combos__item--selected {
  border-color: rgba(8, 129, 120, 0.5);
  background: #f3fbf9;
}

.product-detail-combos__item--free.product-detail-combos__item--selected {
  border-color: rgba(8, 129, 120, 0.55);
}

.product-detail-combos__check {
  position: relative;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.product-detail-combos__check-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.product-detail-combos__check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1.5px solid #c4cdd5;
  border-radius: 999px;
  background: #fff;
  color: transparent;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.product-detail-combos__check-mark i {
  font-size: 0.8125rem;
  line-height: 1;
}

.product-detail-combos__item:hover .product-detail-combos__check-mark {
  border-color: #088178;
}

.product-detail-combos__check-input:checked + .product-detail-combos__check-mark {
  border-color: #088178;
  background: #088178;
  color: #fff;
}

.product-detail-combos__check-input:focus-visible + .product-detail-combos__check-mark {
  box-shadow: 0 0 0 3px rgba(8, 129, 120, 0.18);
}

.product-detail-combos__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.875rem;
  color: #454f5b;
}

.product-detail-combos__text strong {
  color: #212b36;
  line-height: 1.35;
}

.product-detail-combos__detail {
  font-size: 0.8125rem;
  color: #637381;
  line-height: 1.35;
}

.product-detail-combos__price {
  font-size: 0.875rem;
  font-weight: 700;
  color: #088178;
  white-space: nowrap;
}

.product-detail-combos__price--free {
  font-size: 0.9375rem;
}

.product-detail-mama-points {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(8, 129, 120, 0.22);
  border-radius: 1rem;
  background: linear-gradient(180deg, #f3fbf9 0%, #ffffff 100%);
}

.product-detail-mama-points__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(8, 129, 120, 0.12);
  color: #088178;
  font-size: 1.125rem;
}

.product-detail-mama-points__content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.product-detail-mama-points__content strong {
  font-size: 0.9375rem;
  line-height: 1.35;
  color: #065f58;
}

.product-detail-mama-points__content span {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #637381;
}

.product-detail-cart__hint--success {
  color: #088178;
}

.product-detail-cart {
  padding-top: 1.25rem;
  margin-top: 0.25rem;
  border-top: 1px dashed rgba(145, 158, 171, 0.28);
}

.product-detail-cart__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.product-detail-cart__summary-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #637381;
}

.product-detail-cart__summary-value {
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: #212b36;
}

.product-detail-unit-hint {
  margin: -0.25rem 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.35rem;
  color: #637381;
}

.product-detail-cart__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}

.product-detail-cart__col {
  min-width: 0;
}

.product-detail-cart__col--qty,
.product-detail-cart__col--action {
  display: flex;
  align-items: center;
}

.product-detail-cart__btn {
  width: 100%;
  flex: 1 1 auto;
  min-height: 3rem;
  height: 3rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 600;
  box-shadow: none;
}

.product-detail-cart__btn i {
  font-size: 1.25rem;
  line-height: 1;
}

.product-detail-cart__hint {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--color-light-secondary-text, #637381);
}

.product-detail-qty__control {
  display: grid;
  grid-template-columns: 2.25rem 1fr 2.25rem;
  align-items: center;
  width: 100%;
  height: 3rem;
  padding: 0 0.35rem;
  border: 1px solid rgba(145, 158, 171, 0.72);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.product-detail-qty__control--disabled {
  opacity: 0.55;
  box-shadow: none;
}

.product-detail-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-light-primary-text, #212b36);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.product-detail-qty__btn:hover:not(:disabled) {
  color: var(--color-primary, #00ab55);
  background: rgba(0, 171, 85, 0.08);
}

.product-detail-qty__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.product-detail-qty__btn i {
  font-size: 1rem;
  line-height: 1;
}

.product-detail-qty__input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: var(--color-light-primary-text, #212b36);
  appearance: textfield;
  -moz-appearance: textfield;
}

.product-detail-qty__input:focus {
  outline: none;
}

.product-detail-qty__input::-webkit-outer-spin-button,
.product-detail-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (max-width: 575.98px) {
  .product-detail-extra__specs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .product-detail-meta-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .product-detail-stock {
    margin-left: auto;
  }
}

@media (min-width: 1024px) {
  .product-detail-layout {
    align-items: stretch;
  }

  .product-detail-gallery-wrap,
  .product-detail-info-wrap {
    height: 100%;
    min-height: 0;
  }

  .product-detail-gallery-wrap {
    display: flex;
    flex-direction: column;
  }

  .product-detail-gallery {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
  }

  .product-detail-gallery__main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
  }

  .product-detail-gallery__stage {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
  }

  .product-detail-gallery__thumbs {
    align-self: stretch;
    max-height: none;
    height: auto;
  }
}

.product-detail-gallery-wrap {
  width: 100%;
}

.product-detail-gallery {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}

.product-detail-gallery__main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.product-detail-gallery__stage {
  position: relative;
  width: 100%;
  height: 380px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 1px solid rgba(145, 158, 171, 0.24);
  border-radius: 0.85rem;
  background: #fff;
  overflow: hidden;
}

.product-detail-gallery__badges {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Ana kampanya — sağ üst köşe çapraz ribbon */
.product-detail-gallery__badge--hero {
  position: absolute;
  top: 0;
  right: 0;
  width: 7.5rem;
  height: 7.5rem;
  overflow: hidden;
}

.product-detail-gallery__badge--hero .product-detail-gallery__badge-text {
  position: absolute;
  top: 1.35rem;
  right: -2.25rem;
  width: 10.25rem;
  padding: 0.45rem 0;
  transform: rotate(45deg);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #fdba74 0%, #f97316 48%, #ea580c 100%);
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.45);
}

.product-detail-gallery__badge--hero .product-detail-gallery__badge-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 50%);
  pointer-events: none;
}

.product-detail-gallery__badge--hero.product-detail-gallery__badge--combo .product-detail-gallery__badge-text {
  color: #fff;
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 50%, #c2410c 100%);
  box-shadow: 0 4px 16px rgba(194, 65, 12, 0.45);
}

.product-detail-gallery__badge--hero.product-detail-gallery__badge--combo .product-detail-gallery__badge-text::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 55%);
}

/* Ek kampanyalar — sağ kenarda küçük etiketler */
.product-detail-gallery__badge--extra {
  position: absolute;
  top: calc(5.25rem + (var(--badge-offset, 1) - 1) * 2rem);
  right: 0.75rem;
}

.product-detail-gallery__badge--extra .product-detail-gallery__badge-text {
  display: inline-flex;
  align-items: center;
  max-width: 9rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 5px 16px rgba(234, 88, 12, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.product-detail-gallery__badge--extra.product-detail-gallery__badge--combo .product-detail-gallery__badge-text {
  color: #fff;
  background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 5px 16px rgba(194, 65, 12, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.product-detail-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.product-detail-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 72px;
  flex: 0 0 72px;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.product-detail-gallery__thumb {
  width: 72px;
  height: 72px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  border: 2px solid rgba(145, 158, 171, 0.24);
  border-radius: 0.55rem;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-detail-gallery__thumb:hover {
  border-color: rgba(37, 99, 235, 0.45);
}

.product-detail-gallery__thumb--active {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
}

.product-detail-gallery__thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.product-detail-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(145, 158, 171, 0.28);
  border-radius: 999px;
  background: #fff;
  color: var(--color-light-primary-text, #212b36);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
  transform: translateY(-50%);
  cursor: pointer;
}

.product-detail-gallery__nav--prev {
  left: 0.75rem;
}

.product-detail-gallery__nav--next {
  right: 0.75rem;
}

@media (max-width: 1023.98px) {
  .product-detail-gallery {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .product-detail-gallery__main {
    width: 100%;
  }

  .product-detail-gallery__stage {
    width: 100%;
    height: 320px;
  }

  .product-detail-gallery__badge--hero {
    width: 6.25rem;
    height: 6.25rem;
  }

  .product-detail-gallery__badge--hero .product-detail-gallery__badge-text {
    top: 1.1rem;
    right: -2.1rem;
    width: 9rem;
    font-size: 0.75rem;
  }

  .product-detail-gallery__badge--extra {
    top: calc(4.5rem + (var(--badge-offset, 1) - 1) * 1.75rem);
    right: 0.5rem;
  }

  .product-detail-gallery__thumbs {
    flex-direction: row;
    width: 100%;
    flex: none;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.15rem;
  }
}

.product-price-picker {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-price-picker__card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 2px solid rgba(145, 158, 171, 0.32);
  border-radius: 0.75rem;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.product-price-picker__card:hover {
  border-color: rgba(37, 99, 235, 0.45);
}

.product-price-picker__card--selected {
  border-color: #2563eb;
  background: #f8fbff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.product-price-picker__card--guest.product-price-picker__card--selected {
  background: #fff;
}

.product-price-picker__card--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.product-price-picker__card--disabled:hover {
  border-color: rgba(145, 158, 171, 0.32);
}

.product-price-picker__disabled-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: rgba(99, 115, 129, 0.95);
}

.product-price-picker__radio {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  accent-color: #2563eb;
  cursor: pointer;
}

.product-price-picker__body {
  flex: 1;
  min-width: 0;
}

.product-price-picker__header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.product-price-picker__header--simple {
  margin-bottom: 0.5rem;
}

.product-price-picker__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  font-size: 1.1rem;
}

.product-price-picker__header-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.35rem;
}

.product-price-picker__title {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: var(--color-light-primary-text, #212b36);
}

.product-price-picker__subtitle {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-light-secondary-text, #637381);
}

.product-price-picker__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.product-price-picker__old {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-light-disabled-text, #919eab);
  text-decoration: line-through;
}

.product-price-picker__price {
  font-size: 1.75rem;
  line-height: 2.125rem;
  font-weight: 700;
  color: #c2410c;
}

.product-price-picker__price-note,
.product-price-picker__compare-note {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: var(--color-light-secondary-text, #637381);
}

.product-price-picker__savings {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  line-height: 1.35rem;
  font-weight: 500;
  color: #c2410c;
}

.product-price-picker__unit-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--color-light-secondary-text, #637381);
}

.product-price-picker__divider {
  margin: 0.85rem 0;
  border: 0;
  border-top: 1px solid rgba(145, 158, 171, 0.24);
}

.product-price-picker__compare {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.product-price-picker__compare-price {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: var(--color-light-primary-text, #212b36);
}

.product-price-picker__benefits {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.product-price-picker__benefits li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-light-secondary-text, #637381);
}

.product-price-picker__benefits i {
  font-size: 1rem;
  line-height: 1;
  color: #2563eb;
}

.product-price-picker__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.product-price-picker__meta--muted {
  color: var(--color-light-secondary-text, #637381);
}

.product-price-picker__meta-save {
  color: #c2410c;
  font-weight: 600;
}

.product-price-picker__meta-sep {
  color: var(--color-light-disabled-text, #919eab);
}

.product-price-picker__meta-old {
  color: var(--color-light-disabled-text, #919eab);
  text-decoration: line-through;
}


/* --- End: src/app/features/home/home.component.css --- */

/* --- Start: src/app/layout/storefront-breed-selector-menu/storefront-breed-selector-menu.component.css (app-storefront-breed-selector-menu) --- */
.storefront-breed-selector-panel {
  width: max-content;
  max-width: min(76rem, calc(100vw - 2rem));
  background-color: var(--color-white);
  border: 1px solid rgba(145, 158, 171, 0.2);
  border-top: 0;
}

.storefront-breed-selector-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1rem 0;
  border-bottom: 1px solid rgba(145, 158, 171, 0.24);
}

.storefront-breed-selector-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--color-light-primary-text);
  font-size: 0.875rem;
  line-height: 1.375rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0.5rem 0.5rem 0 0;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.storefront-breed-selector-tab:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-lighter);
}

.storefront-breed-selector-tab--active {
  color: #000;
  border-bottom-color: var(--color-primary);
  background-color: var(--color-primary-lighter);
}

.storefront-breed-selector-tab-icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--color-primary-lighter);
  overflow: hidden;
  flex-shrink: 0;
}

.storefront-breed-selector-mega {
  padding: 1rem 1.25rem 1.25rem;
  overflow-x: auto;
}

.storefront-breed-selector-grid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  column-gap: 2.5rem;
  row-gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1536px) {
  .storefront-breed-selector-grid {
    grid-template-columns: repeat(5, max-content);
    column-gap: 2.75rem;
  }
}

.storefront-breed-selector-grid > li {
  min-width: 0;
}

.storefront-breed-selector-link {
  display: block;
  padding: 0.4375rem 0;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-light-primary-text);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.storefront-breed-selector-link:hover {
  color: var(--color-primary);
}

.storefront-breed-selector-empty {
  margin: 0;
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-light-secondary-text);
}

.storefront-breed-selector-empty--panel {
  padding: 1.25rem;
}

.storefront-breed-selector-panel--modal {
  position: relative;
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 0;
}

.storefront-breed-selector-panel--modal .storefront-breed-selector-tabs {
  flex-wrap: wrap;
  padding-top: 3rem;
}

.storefront-breed-selector-panel--modal .storefront-breed-selector-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
}

.storefront-breed-selector-panel--modal .storefront-breed-selector-link {
  white-space: normal;
}

@media (min-width: 480px) {
  .storefront-breed-selector-panel--modal .storefront-breed-selector-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- End: src/app/layout/storefront-breed-selector-menu/storefront-breed-selector-menu.component.css --- */

/* --- Start: src/app/layout/storefront-catalog-nav-menu/storefront-catalog-nav-menu.component.css (app-storefront-catalog-nav-menu) --- */
app-storefront-catalog-nav-menu {
  display: contents;
}

app-storefront-catalog-nav-menu li.has-sub-item {
  position: relative;
}

app-storefront-catalog-nav-menu .storefront-nav-item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-inline: 0.35rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--color-light-primary-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

app-storefront-catalog-nav-menu .storefront-nav-item-link:hover {
  background-color: rgba(0, 171, 85, 0.07);
  color: var(--color-primary);
}

app-storefront-catalog-nav-menu .storefront-nav-item-label {
  flex: 1;
  min-width: 0;
}

app-storefront-catalog-nav-menu .storefront-nav-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  background-color: rgba(145, 158, 171, 0.1);
  transition: background-color 0.2s ease, color 0.2s ease;
}

app-storefront-catalog-nav-menu .storefront-nav-item-icon i {
  font-size: 0.875rem;
  line-height: 1;
  color: var(--color-light-secondary-text);
  rotate: none;
  transform: none;
}

app-storefront-catalog-nav-menu .storefront-nav-item-link:hover .storefront-nav-item-icon {
  background-color: rgba(0, 171, 85, 0.12);
}

app-storefront-catalog-nav-menu .storefront-nav-item-link:hover .storefront-nav-item-icon i {
  color: var(--color-primary);
}

app-storefront-catalog-nav-menu .storefront-nav-empty span {
  display: block;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  color: var(--color-light-secondary-text);
}

app-storefront-catalog-nav-menu ul.storefront-nav-dropdown {
  min-width: 13.5rem;
  border: 1px solid rgba(145, 158, 171, 0.16);
  border-radius: 0.75rem;
  padding-block: 0.5rem;
  background-color: var(--color-white);
  box-shadow:
    0 12px 28px rgba(145, 158, 171, 0.14),
    0 2px 8px rgba(145, 158, 171, 0.08);
}

/* --- End: src/app/layout/storefront-catalog-nav-menu/storefront-catalog-nav-menu.component.css --- */

/* --- Start: src/app/layout/storefront-cms-menu/storefront-cms-menu.component.css (app-storefront-cms-menu) --- */
app-storefront-cms-menu {
  display: contents;
}

/* Root links are not direct ul > li children (host sits between), so main-nav styles do not pierce here. */
li > a.storefront-nav-root-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 6);
  font-size: var(--text-base);
  line-height: calc(var(--spacing) * 6);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

li > a.storefront-nav-root-link > span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

@media (width >= 96rem) {
  li > a.storefront-nav-root-link {
    padding-inline: calc(var(--spacing) * 6);
  }
}

/* --- End: src/app/layout/storefront-cms-menu/storefront-cms-menu.component.css --- */

/* --- Start: src/app/layout/storefront-contact-fab/storefront-contact-fab.component.css (app-storefront-contact-fab) --- */
.storefront-contact-fab {
  position: fixed;
  left: 1.55rem;
  bottom: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.storefront-contact-fab__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 0;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.storefront-contact-fab__btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  color: #fff;
}

.storefront-contact-fab__btn--whatsapp {
  background-color: #25d366;
}

.storefront-contact-fab__btn--telegram {
  background-color: #229ed9;
}

.storefront-contact-fab__btn--advisor {
  position: relative;
  width: 3.65rem;
  height: 3.65rem;
  overflow: visible;
  background: linear-gradient(145deg, #ffc107 0%, #f59e0b 55%, #ea580c 100%);
  animation: advisor-call-wiggle 2.8s ease-in-out infinite;
}

.storefront-contact-fab__btn--advisor:hover {
  animation-play-state: paused;
}

.storefront-contact-fab__advisor-icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  line-height: 1;
  color: #1f2937;
}

.storefront-contact-fab__advisor-badge {
  position: absolute;
  top: -0.95rem;
  left: 99%;
  z-index: 3;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: #595e69;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.storefront-contact-fab__advisor-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(245, 158, 11, 0.75);
  pointer-events: none;
}

.storefront-contact-fab__advisor-ring--1 {
  animation: advisor-ring-pulse 2s ease-out infinite;
}

.storefront-contact-fab__advisor-ring--2 {
  animation: advisor-ring-pulse 2s ease-out infinite 0.65s;
}

.storefront-advisor-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(22, 28, 36, 0.62);
  backdrop-filter: blur(4px);
}

.storefront-advisor-modal__dialog {
  position: relative;
  width: min(100%, 72rem);
  max-height: min(92vh, 56rem);
  overflow: auto;
  border-radius: 1.35rem;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.storefront-advisor-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.82);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.storefront-advisor-modal__close:hover {
  background: rgba(17, 24, 39, 0.95);
  transform: scale(1.05);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes advisor-ring-pulse {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }

  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

@keyframes advisor-call-wiggle {
  0%,
  72%,
  100% {
    transform: rotate(0deg);
  }

  74% {
    transform: rotate(-10deg);
  }

  76% {
    transform: rotate(10deg);
  }

  78% {
    transform: rotate(-8deg);
  }

  80% {
    transform: rotate(8deg);
  }

  82% {
    transform: rotate(-5deg);
  }

  84% {
    transform: rotate(5deg);
  }

  86% {
    transform: rotate(0deg);
  }
}

@media (max-width: 767px) {
  .storefront-contact-fab {
    left: 0.875rem;
    right: auto;
    bottom: 10rem;
  }

  .storefront-contact-fab__btn {
    width: 3rem;
    height: 3rem;
  }

  .storefront-contact-fab__btn--advisor {
    display: none;
  }

  .storefront-advisor-modal {
    padding: 0.5rem;
  }

  .storefront-advisor-modal__dialog {
    max-height: 94vh;
    border-radius: 1rem;
  }
}

/* --- End: src/app/layout/storefront-contact-fab/storefront-contact-fab.component.css --- */

/* --- Start: src/app/layout/storefront-footer/storefront-footer.component.scss (app-storefront-footer) --- */
app-storefront-footer {
  display: block;
}

.storefront-footer-newsletter {
  margin-top: 1.25rem;
}
@media (min-width: 1024px) {
  .storefront-footer-newsletter {
    margin-top: 1.75rem;
  }
}

.storefront-footer-bio {
  font-size: 0.875rem;
  line-height: 1.375rem;
}
.storefront-footer-bio p {
  margin: 0 0 0.625rem;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.storefront-footer-bio p:last-child {
  margin-bottom: 0;
}
.storefront-footer-bio a {
  color: inherit;
  text-decoration: underline;
}

.storefront-footer-social {
  margin-top: 0.25rem;
}

.storefront-footer-social__link {
  background: rgba(0, 0, 0, 0.08);
}

.storefront-footer-social__link:hover {
  background: rgba(0, 0, 0, 0.14);
}

.storefront-footer-contact-icon {
  background: rgba(0, 0, 0, 0.08);
}

.storefront-footer-copyright {
  opacity: 0.92;
}

.storefront-footer-mobile-action {
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  color: #1f2937;
}

.storefront-footer-mobile-action__orb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  flex-shrink: 0;
  animation: storefront-advisor-wiggle 2.8s ease-in-out infinite;
}

.storefront-footer-mobile-action:active .storefront-footer-mobile-action__orb {
  animation-play-state: paused;
}

.storefront-footer-mobile-action__icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #fff3b0 0%, #ffd24d 52%, #f0b500 100%);
  color: #1f2937;
  font-size: 1.45rem;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(240, 181, 0, 0.32);
}

.storefront-footer-mobile-action__icon i {
  color: #1f2937;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.storefront-footer-mobile-action__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 213, 79, 0.85);
  pointer-events: none;
}

.storefront-footer-mobile-action__ring--1 {
  animation: storefront-advisor-ring-pulse 2s ease-out infinite;
}

.storefront-footer-mobile-action__ring--2 {
  animation: storefront-advisor-ring-pulse 2s ease-out infinite 0.65s;
}

.storefront-footer-mobile-action__label {
  margin-top: 0.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1f2937;
}

.storefront-breed-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(22, 28, 36, 0.62);
  backdrop-filter: blur(4px);
}

.storefront-breed-modal__dialog {
  position: relative;
  width: 100%;
  max-height: min(88vh, 40rem);
  overflow: auto;
  border-radius: 1.25rem 1.25rem 0 0;
  background: var(--color-white);
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.22);
}

.storefront-breed-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.82);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.storefront-breed-modal__close:hover {
  background: rgba(17, 24, 39, 0.95);
  transform: scale(1.05);
}

@keyframes storefront-advisor-ring-pulse {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}
@keyframes storefront-advisor-wiggle {
  0%, 72%, 100% {
    transform: rotate(0deg);
  }
  74% {
    transform: rotate(-10deg);
  }
  76% {
    transform: rotate(10deg);
  }
  78% {
    transform: rotate(-8deg);
  }
  80% {
    transform: rotate(8deg);
  }
  82% {
    transform: rotate(-5deg);
  }
  84% {
    transform: rotate(5deg);
  }
  86% {
    transform: rotate(0deg);
  }
}

/* --- End: src/app/layout/storefront-footer/storefront-footer.component.scss --- */

/* --- Start: src/app/layout/storefront-header/storefront-header.component.css (app-storefront-header) --- */
.storefront-header-middle-bar {
  display: none;
}

@media (min-width: 1280px) {
  .storefront-header-middle-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 600px) minmax(0, 1fr);
    align-items: center;
    column-gap: 2.5rem;
  }
}

@media (min-width: 1536px) {
  .storefront-header-middle-bar {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 800px) minmax(0, 1fr);
  }
}

.storefront-header-middle-start {
  justify-self: start;
  align-self: center;
  display: flex;
  align-items: center;
}

.storefront-header-middle-start .storefront-logo-slot--header-desktop .storefront-logo {
  top: 62%;
}

.storefront-header-middle-search {
  position: relative;
  justify-self: center;
  width: 100%;
}

.storefront-header-middle-end {
  justify-self: end;
}

.storefront-header-surface {
  background-color: var(--color-primary);
}

.storefront-header-surface .storefront-header-actions .text-light-primary-text,
.storefront-header-surface .storefront-header-actions .text-light-secondary-text {
  color: var(--color-black);
}

.storefront-header-surface .storefront-header-actions .hgi-arrow-down-01 {
  color: var(--color-black);
}

.storefront-header-surface .storefront-header-support,
.storefront-header-surface .storefront-header-support a {
  color: var(--color-black);
}

app-storefront-header  .storefront-header-surface .main-menu > ul > li > a,
app-storefront-header  .storefront-header-surface .main-menu ul li > a.storefront-nav-root-link {
  color: var(--color-black);
}

app-storefront-header  .storefront-header-surface .main-menu > ul > li:hover > a,
app-storefront-header  .storefront-header-surface .main-menu ul li:hover > a.storefront-nav-root-link {
  color: rgba(0, 0, 0, 0.72);
}

app-storefront-header  .storefront-header-surface .storefront-main-nav .storefront-nav-root-chevron {
  color: var(--color-black);
}

app-storefront-header  .storefront-header-surface .storefront-main-nav > ul > li:hover > .storefront-nav-root-link .storefront-nav-root-chevron,
app-storefront-header  .storefront-header-surface .storefront-main-nav ul li:hover > a.storefront-nav-root-link .storefront-nav-root-chevron {
  color: rgba(0, 0, 0, 0.72);
}

.storefront-header-surface .storefront-header-categories-btn.btn-primary {
  background-color: var(--color-black);
  color: var(--color-primary);
  border-color: var(--color-black);
}

.storefront-header-surface .storefront-header-categories-btn.btn-primary .hgi {
  color: var(--color-primary) !important;
}

.storefront-header-surface #sidebar-menu-btn {
  border-color: rgba(0, 0, 0, 0.22);
  background-color: rgba(0, 0, 0, 0.06);
}

.storefront-header-surface #sidebar-menu-btn svg path {
  stroke: var(--color-black);
}

/* --- End: src/app/layout/storefront-header/storefront-header.component.css --- */

/* --- Start: src/app/layout/storefront-header-main-nav/storefront-header-main-nav.component.css (app-storefront-header-main-nav) --- */
.storefront-main-nav > ul > li > a,
.storefront-main-nav > ul > li > .storefront-nav-root-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 6);
  font-size: var(--text-base);
  line-height: calc(var(--spacing) * 6);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

@media (width >= 96rem) {
  .storefront-main-nav > ul > li > a,
  .storefront-main-nav > ul > li > .storefront-nav-root-link {
    padding-inline: calc(var(--spacing) * 6);
  }
}

.storefront-main-nav .storefront-nav-root-link {
  gap: 0.35rem;
}

.storefront-main-nav .storefront-nav-root-chevron {
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-black);
  transition: color 0.2s ease, transform 0.2s ease;
  rotate: none;
  transform: none;
}

.storefront-main-nav .storefront-nav-root-chevron::after {
  display: none;
  content: none;
}

.storefront-main-nav > ul > li.has-sub-item > a > .hgi:not(.storefront-nav-root-chevron) {
  display: none;
}

.storefront-main-nav > ul > li:hover > .storefront-nav-root-link .storefront-nav-root-chevron,
.storefront-main-nav > ul > li:hover > a .storefront-nav-root-chevron,
.storefront-main-nav ul li:hover > a.storefront-nav-root-link .storefront-nav-root-chevron {
  color: inherit;
}

.storefront-main-nav .storefront-nav-dropdown {
  min-width: 13.5rem;
  border: 1px solid rgba(145, 158, 171, 0.16);
  border-radius: 0.75rem;
  padding-block: 0.5rem;
  background-color: var(--color-white);
  box-shadow:
    0 12px 28px rgba(145, 158, 171, 0.14),
    0 2px 8px rgba(145, 158, 171, 0.08);
  scrollbar-width: thin;
  scrollbar-color: rgba(145, 158, 171, 0.45) transparent;
}

.storefront-main-nav .storefront-nav-dropdown--scroll {
  max-height: min(78vh, 34rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.storefront-main-nav .storefront-nav-dropdown--scroll::-webkit-scrollbar {
  width: 6px;
}

.storefront-main-nav .storefront-nav-dropdown--scroll::-webkit-scrollbar-thumb {
  background-color: rgba(145, 158, 171, 0.42);
  border-radius: 999px;
}

.storefront-main-nav .storefront-nav-dropdown--scroll::-webkit-scrollbar-track {
  margin-block: 0.35rem;
  background: transparent;
}

.storefront-nav-root-split {
  display: inline-flex;
  align-items: center;
  column-gap: 0.35rem;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 6);
  font-size: var(--text-base);
  line-height: calc(var(--spacing) * 6);
  font-weight: var(--font-weight-semibold);
  color: inherit;
  text-decoration: none;
}

@media (width >= 96rem) {
  .storefront-nav-root-split {
    padding-inline: calc(var(--spacing) * 6);
  }
}

.storefront-nav-item--brands .storefront-nav-root-link--text-only {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  line-height: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}

.storefront-nav-item--brands .storefront-nav-root-link--text-only > span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.storefront-nav-root-chevron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  line-height: 1;
}

.storefront-nav-item--brands:hover .storefront-nav-root-split,
.storefront-nav-item--brands:hover .storefront-nav-root-link--text-only {
  color: var(--color-primary);
}

app-storefront-header .storefront-header-surface .storefront-nav-item--brands .storefront-nav-root-split,
app-storefront-header .storefront-header-surface .storefront-nav-item--brands .storefront-nav-root-link--text-only {
  color: var(--color-black);
}

app-storefront-header .storefront-header-surface .storefront-nav-item--brands:hover .storefront-nav-root-split,
app-storefront-header .storefront-header-surface .storefront-nav-item--brands:hover .storefront-nav-root-link--text-only {
  color: rgba(0, 0, 0, 0.72);
}

.storefront-nav-root-chevron-btn:hover .storefront-nav-root-chevron,
.storefront-nav-item--brands.is-dropdown-open .storefront-nav-root-chevron {
  color: var(--color-primary);
}

.storefront-nav-item--brands.is-dropdown-open .storefront-nav-root-chevron {
  transform: rotate(180deg);
}

.main-menu ul li.storefront-nav-item--brands:hover > ul {
  visibility: hidden;
  opacity: 0%;
}

.main-menu ul li.storefront-nav-item--brands.is-dropdown-open > ul,
.storefront-main-nav > ul > li.storefront-nav-item--brands.is-dropdown-open > .storefront-nav-dropdown {
  visibility: visible;
  opacity: 100%;
  --tw-translate-y: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

/* --- End: src/app/layout/storefront-header-main-nav/storefront-header-main-nav.component.css --- */

/* --- Start: src/app/layout/storefront-header-search/storefront-header-search.component.css (app-storefront-header-search) --- */
.search-input-container,
.storefront-header-search {
  position: relative;
  width: 100%;
}

.storefront-header-search-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  background-color: #fff;
  border-radius: 9999px;
  padding: 0.875rem 1.25rem;
  border: 1px solid #fff;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.08);
}

.storefront-header-search-field:focus-within {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.55),
    0 4px 14px rgba(16, 24, 40, 0.12);
}

.storefront-header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: #fff;
  color: #212529;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0;
}

.storefront-header-search-input::placeholder {
  color: #919eab;
  opacity: 1;
}

.storefront-header-search-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #637381;
  font-size: 1.25rem;
  line-height: 1;
}

.storefront-header-search--mobile .storefront-header-search-field {
  padding: 0.75rem 1rem;
}

.storefront-header-search--mobile .storefront-header-search-icon {
  font-size: 1.375rem;
}

.storefront-header-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 9;
  width: 100%;
  padding: 1rem;
  background-color: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 1.5rem;
  box-shadow: 0 12px 28px rgba(145, 158, 171, 0.18);
  transition:
    transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
    visibility 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.storefront-header-search-results[data-state='close'] {
  transform: translateY(1rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.storefront-header-search-results[data-state='open'] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.storefront-header-search-groups {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: min(70vh, 28rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(145, 158, 171, 0.45) transparent;
}

.storefront-header-search-group-title {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #637381;
}

.storefront-header-search-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #edf0f2;
}

.storefront-header-search-list li + li {
  border-top: 1px solid #edf0f2;
}

.storefront-header-search-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  color: #212529;
  text-decoration: none;
  transition: color 0.2s ease;
}

.storefront-header-search-item:hover {
  color: var(--color-primary);
}

.storefront-header-search-thumb {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f4f6f8;
}

.storefront-header-search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storefront-header-search-thumb--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(234, 88, 12, 0.12);
  color: var(--color-primary);
  font-size: 1.125rem;
}

.storefront-header-search-item-label {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.storefront-header-search-empty {
  margin: 0;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: #637381;
}

/* --- End: src/app/layout/storefront-header-search/storefront-header-search.component.css --- */

/* --- Start: src/app/layout/storefront-language/storefront-language.component.css (app-storefront-language) --- */
.storefront-language-flag {
  background-color: #f0f0f0;
}

.storefront-language-sidebar__toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(145, 158, 171, 0.24);
  border-radius: 1rem;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.storefront-language-sidebar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--color-warning-light, #fef3c7);
}

.storefront-language-sidebar__label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-light-primary-text, #212529);
}

.storefront-language-sidebar__chevron {
  transition: transform 0.2s ease;
}

.storefront-language-sidebar__chevron.is-open {
  transform: rotate(180deg);
}

.storefront-language-sidebar__list {
  margin: 0.5rem 0 0;
  padding: 0.25rem 0;
  list-style: none;
  border: 1px solid rgba(145, 158, 171, 0.16);
  border-radius: 0.75rem;
  overflow: hidden;
}

.storefront-language-sidebar__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--color-light-primary-text, #212529);
  text-decoration: none;
}

.storefront-language-sidebar__item:hover,
.storefront-language-sidebar__item.is-active {
  color: var(--color-primary, #ea580c);
  background: rgba(234, 88, 12, 0.06);
}

.storefront-language-sidebar__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  overflow: hidden;
}

.storefront-language-sidebar__loading {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-light-secondary-text, #637381);
}

/* --- End: src/app/layout/storefront-language/storefront-language.component.css --- */

/* --- Start: src/app/layout/storefront-layout/storefront-layout.component.css (app-storefront-layout) --- */
app-storefront-layout {
  display: block;
}

.storefront-boot-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: 2rem 1rem;
}

.storefront-boot-error__card {
  max-width: 28rem;
  padding: 2rem 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(243, 146, 0, 0.2);
  background: #fff;
  text-align: center;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.12);
}

.storefront-boot-error__card h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  color: var(--color-light-primary-text);
}

.storefront-boot-error__card p {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-light-secondary-text);
}

/* --- End: src/app/layout/storefront-layout/storefront-layout.component.css --- */

/* --- Start: src/app/shared/blog-post-grid/blog-post-grid.component.scss (app-blog-post-grid) --- */
.blog-pagination-item button.active {
  background: var(--color-primary, #00ab55);
  border-color: var(--color-primary, #00ab55);
  color: #fff;
  font-weight: 600;
}

.blog-pagination-inactive {
  color: var(--light-primary-text, #212b36);
  background: #fff;
  border-color: #dfe3e8;
}

.blog-pagination-inactive:hover {
  color: var(--color-primary, #00ab55);
  border-color: var(--color-primary, #00ab55);
  background: rgba(0, 171, 85, 0.08);
}

/* --- End: src/app/shared/blog-post-grid/blog-post-grid.component.scss --- */

/* --- Start: src/app/shared/blog-sidebar/blog-sidebar.component.scss (app-blog-sidebar) --- */
.category-scroll {
  scrollbar-width: thin;
}

.blog-sidebar-all--active {
  text-decoration: underline;
}

.blog-category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--light-primary-text, #212b36);
  font-size: 0.9375rem;
  line-height: 1.375rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.blog-category-link:hover {
  background: rgba(0, 171, 85, 0.08);
  color: var(--color-primary, #00ab55);
}

.blog-category-link--active {
  background: rgba(0, 171, 85, 0.12);
  color: var(--color-primary, #00ab55);
  font-weight: 600;
}

.blog-category-link__count {
  color: var(--light-secondary-text, #637381);
  font-size: 0.875rem;
}

.blog-category-link--active .blog-category-link__count {
  color: var(--color-primary, #00ab55);
}

.blog-tag {
  display: inline-flex;
  align-items: center;
  color: var(--light-primary-text, #212b36);
  background: #fff;
  border: 1px solid #dfe3e8;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.blog-tag:hover {
  color: var(--color-primary, #00ab55);
  border-color: var(--color-primary, #00ab55);
  background: rgba(0, 171, 85, 0.08);
}

.blog-tag--active {
  color: #fff;
  background: var(--color-primary, #00ab55);
  border-color: var(--color-primary, #00ab55);
  font-weight: 600;
}

/* --- End: src/app/shared/blog-sidebar/blog-sidebar.component.scss --- */

/* --- Start: src/app/shared/pet-food-advisor/pet-food-advisor-widget.component.scss (app-pet-food-advisor-widget) --- */
app-pet-food-advisor-widget {
  --pa-yellow: #f0b500;
  --pa-yellow-light: #ffd24d;
  --pa-yellow-lighter: #ffef9e;
  --pa-yellow-soft: #ffe88a;
  --pa-orange: #d48a00;
  --pa-orange-dark: #a67202;
  --pa-text: #000000;
  --pa-text-muted: #333333;
  --pa-text-soft: #4a4a4a;
  --pa-border: rgba(0, 0, 0, 0.12);
  --pa-border-strong: rgba(0, 0, 0, 0.22);
  --pa-shadow: rgba(183, 129, 3, 0.16);
}

.pet-advisor {
  margin-bottom: 70px;
  color: var(--pa-text);
}

.pet-advisor__shell {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  border: 1px solid rgba(230, 149, 0, 0.28);
  background: radial-gradient(circle at top right, rgba(255, 225, 106, 0.55), transparent 40%), linear-gradient(145deg, var(--pa-yellow-lighter) 0%, var(--pa-yellow-soft) 52%, var(--pa-yellow-light) 100%);
  box-shadow: 0 24px 60px var(--pa-shadow);
}

.pet-advisor__shell-glow {
  position: absolute;
  inset: auto -80px -120px auto;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 193, 7, 0.35), transparent 70%);
  pointer-events: none;
}

.pet-advisor__hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 2rem 1.25rem;
}

.pet-advisor__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: var(--pa-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pet-advisor__hero-copy h3 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.2;
  color: var(--pa-text);
}

.pet-advisor__hero-copy p {
  margin: 0;
  max-width: 38rem;
  color: var(--pa-text-muted);
}

.pet-advisor__hero-progress {
  min-width: 240px;
}

.pet-advisor__hero-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
  font-size: 0.875rem;
  color: var(--pa-text);
  font-weight: 600;
}

.pet-advisor__hero-progress-top strong {
  font-size: 1rem;
}

.pet-advisor__progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.pet-advisor__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pa-yellow), var(--pa-orange));
  transition: width 0.3s ease;
}

.pet-advisor__layout {
  display: grid;
  grid-template-columns: minmax(240px, 290px) minmax(0, 1fr);
  gap: 0;
  padding: 0 1.25rem 1.25rem;
}

.pet-advisor__layout--intro {
  grid-template-columns: minmax(0, 1fr);
}

.pet-advisor__layout--intro .pet-advisor__stage-card {
  width: 100%;
  min-width: 0;
}

.pet-advisor__layout--wide {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
}

.pet-advisor__rail {
  padding: 0.5rem 1rem 1.5rem 0.75rem;
}

.pet-advisor__rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pet-advisor__rail-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  padding: 0.8rem 0.9rem;
  border-radius: 1rem;
  opacity: 0.55;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.pet-advisor__rail-item--active,
.pet-advisor__rail-item--done {
  opacity: 1;
}

.pet-advisor__rail-item--active {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 24px var(--pa-shadow);
  transform: translateX(4px);
}

.pet-advisor__rail-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 2px solid var(--pa-border-strong);
  background: var(--pa-yellow-lighter);
  color: var(--pa-text);
  font-size: 0.875rem;
  font-weight: 700;
}

.pet-advisor__rail-item--active .pet-advisor__rail-marker {
  border-color: var(--pa-text);
  background: var(--pa-text);
  color: var(--pa-yellow);
}

.pet-advisor__rail-item--done .pet-advisor__rail-marker {
  border-color: var(--pa-orange);
  background: var(--pa-yellow);
  color: var(--pa-text);
}

.pet-advisor__rail-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.pet-advisor__rail-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pa-text);
}

.pet-advisor__rail-sub {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--pa-text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pet-advisor__stage-card {
  min-height: 420px;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--pa-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
}

.pet-advisor__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 2rem;
  align-items: center;
  padding: 2.25rem;
}

.pet-advisor__intro-preview {
  min-width: 0;
}

.pet-advisor__intro-preview-shell {
  position: relative;
  padding: 1.5rem 1.35rem 1.35rem;
  border-radius: 1.25rem;
  border: 1px dashed rgba(0, 0, 0, 0.16);
  background: rgba(255, 255, 255, 0.58);
}

.pet-advisor__intro-preview-tag {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pa-text-soft);
}

.pet-advisor__intro-preview-question {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pa-text);
}

.pet-advisor__intro-content {
  min-width: 0;
}

.pet-advisor__choice-card--preview {
  cursor: default;
  pointer-events: none;
  min-height: 6.25rem;
}

.pet-advisor__choice-card--preview:hover {
  transform: none;
  border-color: var(--pa-border);
  box-shadow: none;
  background: var(--pa-yellow-lighter);
}

.pet-advisor__choice-card--preview.pet-advisor__choice-card--active {
  border-color: var(--pa-text);
  background: var(--pa-yellow);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
}

.pet-advisor__intro-content h4 {
  margin: 0 0 0.65rem;
  font-size: 1.6rem;
  color: var(--pa-text);
}

.pet-advisor__intro-content p {
  margin: 0 0 1.25rem;
  color: var(--pa-text-muted);
}

.pet-advisor__intro-points {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.pet-advisor__intro-points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--pa-text);
  font-weight: 500;
}

.pet-advisor__intro-points i {
  color: var(--pa-orange-dark);
}

.pet-advisor__stage,
.pet-advisor__results {
  padding: 2rem;
}

.pet-advisor__stage-top {
  margin-bottom: 1.75rem;
}

.pet-advisor__stage-badge {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: var(--pa-text);
  font-size: 0.8125rem;
  font-weight: 700;
}

.pet-advisor__stage-badge--success {
  background: var(--pa-yellow);
}

.pet-advisor__stage-question {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.3;
  color: var(--pa-text);
}

.pet-advisor__stage-hint {
  margin: 0.65rem 0 0;
  color: var(--pa-text-soft);
}

.pet-advisor__stage-body {
  margin-bottom: 1.5rem;
}

.pet-advisor__choice-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.pet-advisor__choice-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.pet-advisor__choice-grid--multi {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.pet-advisor__choice-grid--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pet-advisor__choice-grid--triple .pet-advisor__choice-card--multi {
  padding: 0.8rem 0.95rem;
}

.pet-advisor__choice-grid--triple .pet-advisor__choice-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  font-size: 0.9rem;
}

.pet-advisor__choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 7.5rem;
  padding: 1.1rem;
  border: 2px solid var(--pa-border);
  border-radius: 1.2rem;
  background: var(--pa-yellow-lighter);
  color: var(--pa-text);
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pet-advisor__choice-card--multi {
  flex-direction: row;
  justify-content: flex-start;
  min-height: 3.75rem;
  text-align: left;
}

.pet-advisor__choice-card:hover {
  transform: translateY(-2px);
  border-color: var(--pa-orange);
  box-shadow: 0 12px 28px var(--pa-shadow);
  background: var(--pa-yellow-soft);
}

.pet-advisor__choice-card--active {
  border-color: var(--pa-text);
  background: var(--pa-yellow);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
}

.pet-advisor__choice-icon {
  font-size: 2rem;
  line-height: 1;
}

.pet-advisor__choice-label {
  font-weight: 700;
  color: var(--pa-text);
}

.pet-advisor__choice-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--pa-border-strong);
  border-radius: 0.4rem;
  background: #fff;
  color: var(--pa-text);
}

.pet-advisor__choice-card--active .pet-advisor__choice-check {
  border-color: var(--pa-text);
  background: var(--pa-text);
  color: var(--pa-yellow);
}

.pet-advisor__number-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.pet-advisor__age-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pet-advisor__age-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.pet-advisor__age-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pet-advisor__age-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pa-text-muted);
  text-align: center;
}

.pet-advisor__number-input--age {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.pet-advisor__results-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.25rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  color: var(--pa-text-soft);
  text-align: center;
  font-weight: 600;
}

.pet-advisor__error--results {
  grid-column: 1 / -1;
}

.pet-advisor__unknown-btn {
  min-width: 10rem;
  padding: 0.65rem 1.25rem;
  border: 2px solid #f0b500;
  border-radius: 999px;
  background: #fffef5;
  color: #1a1a1a;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pet-advisor__unknown-btn:hover {
  background: #fff8d6;
  border-color: #d48a00;
}

.pet-advisor__unknown-btn--active {
  background: linear-gradient(145deg, #ffef9e 0%, #ffd24d 100%);
  border-color: #1a1a1a;
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.08);
}

.pet-advisor__number-panel--disabled {
  opacity: 0.45;
  pointer-events: none;
}

.pet-advisor__number-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 420px;
  margin: 0 auto;
  padding: 1.5rem;
  border-radius: 1.5rem;
  background: var(--pa-yellow-lighter);
  border: 1px solid var(--pa-border);
}

.pet-advisor__number-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--pa-border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--pa-text);
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px var(--pa-shadow);
  transition: transform 0.2s ease, background 0.2s ease;
}

.pet-advisor__number-step:hover {
  transform: scale(1.05);
  background: var(--pa-yellow-soft);
}

.pet-advisor__number-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 140px;
}

.pet-advisor__number-input {
  width: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--pa-text);
  outline: none;
}

.pet-advisor__number-unit {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pa-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pet-advisor__error {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.9rem;
  background: #fff;
  border: 1px solid #f04438;
  color: #b42318;
  font-size: 0.9375rem;
  font-weight: 600;
}

.pet-advisor__stage-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pa-border);
}

.pet-advisor__stage-actions--results {
  margin-top: 1.5rem;
  border-top: none;
  justify-content: flex-start;
}

.pet-advisor__primary-btn,
.pet-advisor__ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pet-advisor__primary-btn {
  border: 2px solid var(--pa-text);
  background: var(--pa-text);
  color: var(--pa-yellow);
  padding: 0.85rem 1.5rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.pet-advisor__primary-btn:hover {
  transform: translateY(-1px);
  background: var(--pa-text-muted);
  border-color: var(--pa-text-muted);
}

.pet-advisor__ghost-btn {
  border: 2px solid var(--pa-text);
  background: transparent;
  color: var(--pa-text);
  padding: 0.85rem 1.2rem;
}

.pet-advisor__ghost-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.pet-advisor__results-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.35rem;
  border-radius: 1.2rem;
  background: var(--pa-yellow-soft);
  border: 1px solid var(--pa-border);
}

.pet-advisor__results-banner h4 {
  margin: 0 0 0.35rem;
  color: var(--pa-text);
}

.pet-advisor__results-banner p {
  margin: 0;
  color: var(--pa-text-muted);
}

.pet-advisor__products {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pet-advisor__product-cell {
  min-width: 0;
}

.pet-advisor__products--page {
  gap: 1.5rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.pet-advisor__products--page .pet-advisor__product-cell {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .pet-advisor__products--page .pet-advisor__product-cell {
    grid-column: span 6;
  }
}
@media (min-width: 1280px) {
  .pet-advisor__products--page .pet-advisor__product-cell {
    grid-column: span 3;
  }
}
@media (max-width: 991px) {
  .pet-advisor__layout,
  .pet-advisor__layout--wide {
    grid-template-columns: 1fr;
  }
  .pet-advisor__rail {
    padding: 0 0.5rem 0.75rem;
    overflow-x: auto;
  }
  .pet-advisor__rail-list {
    flex-direction: row;
    min-width: max-content;
  }
  .pet-advisor__rail-item {
    width: 180px;
  }
  .pet-advisor__rail-sub {
    display: none;
  }
  .pet-advisor__intro {
    grid-template-columns: 1fr;
  }
  .pet-advisor__intro-points li {
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .pet-advisor__hero {
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem 1.25rem 1rem;
  }
  .pet-advisor__layout {
    padding: 0 0.85rem 0.85rem;
  }
  .pet-advisor__stage,
  .pet-advisor__results,
  .pet-advisor__intro {
    padding: 1.35rem;
  }
  .pet-advisor__stage-actions {
    flex-direction: column-reverse;
  }
  .pet-advisor__primary-btn,
  .pet-advisor__ghost-btn {
    width: 100%;
  }
  .pet-advisor__results-banner {
    flex-direction: column;
  }
  .pet-advisor__choice-grid--triple {
    grid-template-columns: 1fr;
  }
  .pet-advisor__choice-grid--triple .pet-advisor__choice-label {
    white-space: normal;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  .pet-advisor__choice-grid--triple {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pet-advisor__choice-grid--triple .pet-advisor__choice-label {
    white-space: normal;
  }
}
app-pet-food-advisor-widget.pet-advisor-host--modal {
  display: block;
}

.pet-advisor--modal {
  margin-bottom: 0;
}

.pet-advisor--modal .pet-advisor__shell {
  border-radius: 1.35rem;
}

.pet-advisor--modal .pet-advisor__hero {
  padding: 1.35rem 1.35rem 1rem;
}

.pet-advisor--modal .pet-advisor__layout {
  padding-inline: 1.35rem;
  padding-bottom: 1.35rem;
}

.pet-advisor--modal .pet-advisor__layout--wide {
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
}

.pet-advisor--modal .pet-advisor__rail {
  padding-right: 0.5rem;
}

.pet-advisor--modal .pet-advisor__rail-title {
  font-size: 0.8125rem;
}

.pet-advisor--modal .pet-advisor__stage-card {
  min-width: 0;
  overflow: hidden;
}

.pet-advisor--modal .pet-advisor__products {
  gap: 0.875rem;
}

.pet-advisor--modal .pet-advisor__products  .product-card-1 {
  padding: 0.75rem;
}

.pet-advisor--modal .pet-advisor__products  .product-image-frame,
.pet-advisor--modal .pet-advisor__products  .product-image-link,
.pet-advisor--modal .pet-advisor__products  .product-image-media {
  height: 150px;
}

.pet-advisor--modal .pet-advisor__products  .product-name-clamp {
  min-height: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.35;
}

.pet-advisor--modal .pet-advisor__products  .btn-section {
  gap: 0.5rem;
}

.pet-advisor--modal .pet-advisor__products  .btn-section .btn {
  min-width: 0;
  padding-inline: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
}

.pet-advisor--modal .pet-advisor__products  .btn-section .btn span {
  white-space: nowrap;
}

.pet-advisor--modal .pet-advisor__products  .btn-section .size-11 {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .pet-advisor--modal .pet-advisor__products {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 991px) {
  .pet-advisor--modal .pet-advisor__layout--wide {
    grid-template-columns: 1fr;
  }
}

/* --- End: src/app/shared/pet-food-advisor/pet-food-advisor-widget.component.scss --- */

/* --- Start: src/app/shared/storefront-product-card/storefront-product-card.component.scss (app-storefront-product-card) --- */
.product-image-frame {
  height: 220px;
  background-color: #fff;
}

.product-image-link {
  display: block;
  width: 100%;
  height: 220px;
  background-color: #fff;
}

.product-image-link--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.product-image-media {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  object-position: center;
}

.product-image-media.product-image-placeholder {
  width: 92%;
  height: 92%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.product-name-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3rem;
}

.product-btn-actions .product-btn-action-item {
  border: 1px solid #ddd;
}

.product-unit-ribbon {
  position: absolute;
  top: 0.75rem;
  left: 0;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 1rem);
  padding: 0.2rem 0.55rem 0.2rem 0.65rem;
  background: var(--color-primary);
  color: var(--color-black);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.product-unit-ribbon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  border-style: solid;
  border-width: 0.825rem 0 0.825rem 0.4rem;
  border-color: transparent transparent transparent var(--color-primary);
}

.product-card-1 .product-content {
  min-width: 0;
}

.product-card-1 .btn-section {
  min-width: 0;
}

.product-card-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
}

@media (max-width: 767.98px) {
  .product-card-1 .btn-section {
    gap: 0.5rem;
  }

  .product-card-cart-btn {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
  }

  .product-card-cart-btn__label {
    display: none;
  }
}

.pet-advisor--modal app-storefront-product-card .btn-section {
  min-width: 0;
}

.pet-advisor--modal app-storefront-product-card .btn-section .btn {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

.pet-advisor--modal app-storefront-product-card .product-content {
  min-width: 0;
}

/* --- End: src/app/shared/storefront-product-card/storefront-product-card.component.scss --- */

.storefront-cart-checkbox {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #c4cdd5;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.storefront-cart-checkbox:checked {
  border-color: #088178;
  background-color: #088178;
  box-shadow: inset 0 0 0 3px #fff;
}

.storefront-cart-checkbox:focus-visible {
  outline: 2px solid rgba(8, 129, 120, 0.35);
  outline-offset: 2px;
}

.order-success-page {
  padding: 2.5rem 0 5rem;
  background:
    radial-gradient(circle at top right, rgba(255, 211, 77, 0.22), transparent 28%),
    radial-gradient(circle at bottom left, rgba(0, 184, 217, 0.12), transparent 32%),
    #f8fafb;
}

.order-success-page__container {
  display: flex;
  justify-content: center;
}

.order-success-card {
  width: min(100%, 40rem);
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 193, 7, 0.28);
  background: linear-gradient(180deg, #fffef8 0%, #fff9e8 55%, #ffffff 100%);
  box-shadow: 0 28px 70px rgba(22, 28, 36, 0.12);
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  animation: order-success-card-pop 0.45s ease;
}

@media (min-width: 768px) {
  .order-success-card {
    padding: 2.5rem 2.25rem 2rem;
  }
}

.order-success-card__celebration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.order-success-card__face {
  font-size: 3rem;
  line-height: 1;
  animation: order-success-bounce 1.15s ease-in-out infinite;
}

.order-success-card__mascot,
.order-success-card__paw,
.order-success-card__sparkle {
  font-size: 1.35rem;
  line-height: 1;
}

.order-success-card__paw--1 {
  animation: order-success-paw-left 1.15s ease-in-out infinite;
}

.order-success-card__paw--2 {
  animation: order-success-paw-right 1.15s ease-in-out infinite;
}

.order-success-card__sparkle--1,
.order-success-card__sparkle--2 {
  animation: order-success-sparkle 1.6s ease-in-out infinite;
}

.order-success-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.85rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 193, 7, 0.18);
  color: #9a6b00;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.order-success-card__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 800;
  color: #212b36;
}

.order-success-card__lead {
  margin: 0 auto 1.5rem;
  max-width: 32rem;
  color: #637381;
  line-height: 1.7;
  font-size: 1rem;
}

.order-success-card__order-no {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  padding: 1.1rem 1rem;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.82);
  border: 1px dashed rgba(255, 193, 7, 0.45);
}

.order-success-card__order-no-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9a6b00;
}

.order-success-card__order-no-value {
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  color: #212b36;
  letter-spacing: 0.04em;
}

.order-success-card__order-no-hint {
  font-size: 0.82rem;
  color: #919eab;
}

.order-success-card__summary {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(145, 158, 171, 0.18);
  text-align: left;
}

.order-success-card__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #637381;
  font-size: 0.94rem;
}

.order-success-card__summary-row strong {
  color: #212b36;
  font-weight: 700;
}

.order-success-card__summary-row--discount strong {
  color: #00875a;
}

.order-success-card__summary-row--total {
  padding-top: 0.65rem;
  border-top: 1px solid rgba(145, 158, 171, 0.18);
  font-size: 1rem;
}

.order-success-card__summary-row--total strong {
  color: #9a6b00;
  font-size: 1.1rem;
}

.order-success-card__note,
.order-success-card__guest-tip {
  margin: 0 0 1rem;
  color: #637381;
  line-height: 1.65;
  font-size: 0.92rem;
}

.order-success-card__guest-tip {
  padding: 0.85rem 1rem;
  border-radius: 0.95rem;
  background: rgba(0, 184, 217, 0.08);
  color: #006f89;
}

.order-success-card__actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

@media (min-width: 640px) {
  .order-success-card__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.order-success-card__btn {
  width: 100%;
  border-radius: 999px;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

@keyframes order-success-card-pop {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes order-success-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes order-success-paw-left {
  0%,
  100% {
    transform: translateY(0) rotate(-10deg);
  }
  50% {
    transform: translateY(-4px) rotate(8deg);
  }
}

@keyframes order-success-paw-right {
  0%,
  100% {
    transform: translateY(0) rotate(10deg);
  }
  50% {
    transform: translateY(-4px) rotate(-8deg);
  }
}

@keyframes order-success-sparkle {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* --- App shell --- */
app-root {
  display: block;
}

#app-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

#app-boot-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-boot-splash__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid #f3f4f6;
  border-top-color: #f39200;
  border-radius: 50%;
  animation: app-boot-spin 0.8s linear infinite;
}

@keyframes app-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Storefront shell chrome demo widths --- */
.storefront-rating-fill--80 {
  width: 80%;
}

.storefront-rating-fill--0 {
  width: 0%;
}

.storefront-progress-fill--70 {
  width: 70%;
}

/* --- SweetAlert sepete eklendi --- */
.storefront-cart-added-popup__message {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #212529;
}

.storefront-cart-added-popup__combo-note {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: #637381;
}

.storefront-language-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(2px);
}

.storefront-language-loader__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 12px 40px rgba(22, 28, 36, 0.12);
}