@import url("layout/header.css?v=20260808-heart-hover");
@import url("layout/banner.css");
@import url("layout/footer.css?v=20260713-powered");
@import url("layout/loader.css");

@import url("views/homepage.css?v=20260728-storefront-guide");
@import url("views/products.css?v=20260728-filter-summary");
@import url("views/product-details.css?v=20260728-sticky-actions");
@import url("views/about-us.css");
@import url("views/blog.css");
@import url("views/blog-detail.css");
@import url("views/contact.css");
@import url("views/cart.css?v=20260728-payment-polish");
@import url("views/dashboard.css?v=20260728-soft-canvas");
@import url("views/account-operations.css");
@import url("views/search-result.css");

@import url("components/accordion.css");
@import url("components/buttons.css");
@import url("components/form.css");
@import url("components/product-box.css?v=20260728-card-meta");
@import url("components/blog-card.css");
@import url("components/marquee.css");
@import url("components/purchased-product.css?v=20260728-account-summary");
@import url("components/remaining-time.css");
@import url("components/account-form.css");
@import url("components/cookie-consent.css");
@import url("brand-presentation.css?v=20260808-footer-menu-order-row");

@font-face {
  font-family: "Axiforma";
  font-weight: 300;
  src: url("../fonts/Axiforma/Axiforma-Light.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Axiforma";
  font-weight: 400;
  src: url("../fonts/Axiforma/Axiforma-Regular.ttf") format("truetype"),
       url("../fonts/Axiforma/Axiforma-Book.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Axiforma";
  font-weight: 500;
  src: url("../fonts/Axiforma/Axiforma-Medium.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Axiforma";
  font-weight: 600;
  src: url("../fonts/Axiforma/Axiforma-SemiBold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Axiforma";
  font-weight: 800;
  src: url("../fonts/Axiforma/Axiforma-ExtraBold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Neulis Cursive";
  font-weight: 300;
  src: url("../fonts/NeulisCursive/Neulis Cursive Light.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Neulis Cursive";
  font-weight: 400;
  src: url("../fonts/NeulisCursive/Neulis Cursive Regular.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Neulis Cursive";
  font-weight: 500;
  src: url("../fonts/NeulisCursive/Neulis Cursive Medium.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Neulis Cursive";
  font-weight: 600;
  src: url("../fonts/NeulisCursive/Neulis Cursive Semi Bold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Neulis Cursive";
  font-weight: 700;
  src: url("../fonts/NeulisCursive/Neulis Cursive Bold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Neulis Cursive";
  font-weight: 900;
  src: url("../fonts/NeulisCursive/Neulis Cursive Black.otf") format("opentype");
  font-display: swap;
}

*, *::before, *::after, body, p, span, a, label, input, button, select, textarea {
  font-family: 'Axiforma', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .heading > h2, b, strong, th {
  font-family: 'Axiforma', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ============================================== */
/* ================== VARIABLES ================= */
/* ============================================== */

:root {
  color-scheme: only light;
  --container: 1320px;
  --content-spacing: 4rem 0;
  --sayra-ink: #2e4c5d;
  --sayra-ink-strong: #183b56;
  --sayra-ink-soft: #3b646e;
  --sayra-blue: #2bace2;
  --sayra-orange: #f15858;
  --sayra-green: #76b950;
  --sayra-purple: #78539e;
  --sayra-soft: #f7f7f7;
  --sayra-blue-soft: #e8f7fd;
  --eg-black: #000000;
  --eg-black-2: #183b56;
  --eg-black-3: #2e4c5d;
  --eg-white: #ffffff;
  --eg-white-2: #f7f7f7;
  --eg-white-3: #e8f7fd;
  --eg-white-4: #fcfcfc;
  --eg-white-5: #fafafa;
  --eg-white-6: #f3fafc;
  --eg-white-7: #f5f7fa;
  --eg-brown: #2e4c5d;
  --eg-brown-2: #2bace2;
  --eg-brown-3: #183b56;
  --eg-brown-4: #f15858;
  --eg-brown-5: #e8f7fd;
  --eg-brown-6: #d7eef8;
  --eg-brown-7: #3b646e;
  --eg-brown-8: #2f5566;
  --eg-brown-9: #cfe6ef;
  --eg-brown-10: #f3fafc;
  --eg-brown-11: #2e4c5d;
  --eg-red: #f15858;
  --eg-red-2: #e94949;
  --eg-red-3: #ffd9d9;
  --eg-green: #76b950;
  --eg-grey: #d9d9d9;
  --eg-grey-2: #c7c2bb;
  --eg-grey-3: #c4c4c4;
  --eg-grey-4: #e2e2e2;
  --eg-grey-5: #737373;
  --eg-blue-1: #2bace2;
  --eg-transparent: rgba(0, 0, 0, 0);
  --eg-transition: cubic-bezier(0, 0.29, 0.69, 0.99);
  --font-80: 5rem;
  --font-60: 3.75rem;
  --font-58: 3.625rem;
  --font-50: 3.125rem;
  --font-48: 3rem;
  --font-46: 2.875rem;
  --font-44: 2.75rem;
  --font-40: 2.5rem;
  --font-36: 2.25rem;
  --font-34: 2.125rem;
  --font-32: 2rem;
  --font-30: 1.875rem;
  --font-28: 1.75rem;
  --font-26: 1.625rem;
  --font-24: 1.5rem;
  --font-22: 1.375rem;
  --font-20: 1.25rem;
  --font-18: 1.125rem;
  --font-16: 1rem;
  --font-14: 0.875rem;
  --font-12: 0.75rem;
  --line-30: 1.875rem;
  --line-26: 1.625rem;
  --line-20: 1.25rem;
  --col-2: repeat(6, 1fr);
  --col-5: repeat(5, 1fr);
  --col-3: repeat(4, 1fr);
  --col-4: repeat(3, 1fr);
  --col-6: repeat(2, 1fr);
  --col-12: repeat(1, 1fr);
}

/* ============================================== */
/* ================== RESET CSS ================= */
/* ============================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  color: var(--sayra-ink);
  background: var(--eg-white);
}

main {
  overflow: hidden;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0;
  outline: none;
}

input[type="number"] {
  appearance: textfield;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}

figure {
  margin: 0;
  unicode-bidi: unset;
}

/* ============================================== */
/* ================== MAIN CSS ================== */
/* ============================================== */

.eg-container {
  padding: 0 1rem;
  max-width: var(--container);
  margin: 0 auto;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track-piece {
  background: var(--eg-white);
}

::-webkit-scrollbar-track {
  background: var(--eg-brown);
}

::-webkit-scrollbar-thumb {
  background: var(--eg-brown);
}

::-webkit-scrollbar-thumb:hover {
  opacity: 0.8;
}

.backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  max-width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  transition: background-color 0.3s cubic-bezier(0.7, 0, 0.2, 1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.backdrop.show {
  pointer-events: all;
  opacity: 1;
  visibility: visible;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-button-next,
.swiper-button-prev {
  width: 45px;
  height: 45px;
  transition: 0.3s;
}

.swiper-button-prev {
  left: -4rem;
  right: unset;
}

.swiper-button-next {
  right: -4rem;
  left: unset;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.5;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: unset;
  content: "";
  background-size: 45px 45px;
  background-repeat: no-repeat;
  width: 45px;
  height: 45px;
}

.swiper-button-prev:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 45 45' fill='none'%3E%3Ccircle cx='22' cy='22' r='22' transform='matrix(1 0 0 -1 0 44)' fill='%232BACE2'/%3E%3Cpath d='M30 21C30.5523 21 31 21.4477 31 22C31 22.5523 30.5523 23 30 23L30 21ZM13.2929 22.7071C12.9024 22.3166 12.9024 21.6834 13.2929 21.2929L19.6569 14.9289C20.0474 14.5384 20.6805 14.5384 21.0711 14.9289C21.4616 15.3195 21.4616 15.9526 21.0711 16.3431L15.4142 22L21.0711 27.6569C21.4616 28.0474 21.4616 28.6805 21.0711 29.0711C20.6805 29.4616 20.0474 29.4616 19.6569 29.0711L13.2929 22.7071ZM30 23L14 23L14 21L30 21L30 23Z' fill='white'/%3E%3C/svg%3E");
}

.swiper-button-next:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 45 45' fill='none'%3E%3Ccircle cx='22' cy='22' r='22' transform='rotate(-180 22 22)' fill='%232BACE2'/%3E%3Cpath d='M14 21C13.4477 21 13 21.4477 13 22C13 22.5523 13.4477 23 14 23L14 21ZM30.7071 22.7071C31.0976 22.3166 31.0976 21.6834 30.7071 21.2929L24.3431 14.9289C23.9526 14.5384 23.3195 14.5384 22.9289 14.9289C22.5384 15.3195 22.5384 15.9526 22.9289 16.3431L28.5858 22L22.9289 27.6569C22.5384 28.0474 22.5384 28.6805 22.9289 29.0711C23.3195 29.4616 23.9526 29.4616 24.3431 29.0711L30.7071 22.7071ZM14 23L30 23L30 21L14 21L14 23Z' fill='white'/%3E%3C/svg%3E");
}

.swiper-pagination {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: unset;
  top: unset;
  left: unset;
  margin-top: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: unset;
  top: unset;
  left: unset;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0;
}

.swiper-pagination > .swiper-pagination-bullet {
  background: transparent;
  width: 16px;
  height: 16px;
  opacity: 1;
  background-size: 200%;
  background-repeat: no-repeat;
  background-position: 100%;
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.swiper-pagination[data-color="white"] > .swiper-pagination-bullet {
  background-image: linear-gradient(90deg, var(--eg-white) 50%, transparent 50%);
  border: 1px solid var(--eg-white);
}

.swiper-pagination[data-color="brown"] > .swiper-pagination-bullet {
  background-image: linear-gradient(90deg, var(--eg-brown) 50%, transparent 50%);
  border: 1px solid var(--eg-brown);
}

.swiper-pagination > .swiper-pagination-bullet-active {
  background-position: 0%;
}

[data-observe="opacity"] {
  opacity: 0;
  transition: opacity 1s var(--eg-transition);
}

[data-observe="opacity"].revealed {
  opacity: 1;
}

[data-observe="blur"] {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  transition: filter 1s var(--eg-transition);
}

[data-observe="blur"].revealed {
  filter: blur(0);
  -webkit-filter: blur(0);
}

[data-observe="translate"] {
  transform: translateY(-25%);
  opacity: 0;
  transition: 0.45s var(--eg-transition);
}

[data-observe="translate"].revealed {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 1600px) {
  :root {
    --container: 1420px;
    --font-60: 3.375rem;
    --font-50: 2.75rem;
    --font-48: 2.625rem;
    --font-46: 2.5rem;
    --font-40: 2.25rem;
    --font-36: 2rem;
    --font-30: 1.75rem;
    --font-24: 1.375rem;
    --font-20: 1.125rem;
    --font-18: 1rem;
    --line-30: 1.75rem;
    --line-26: 1.5rem;
  }
}

@media (max-width: 1400px) {
  :root {
    --container: 1180px;
    --font-60: 3rem;
    --font-50: 2.375rem;
    --font-48: 2.25rem;
    --font-46: 2.125rem;
    --font-40: 2rem;
    --font-36: 1.75rem;
    --font-30: 1.625rem;
    --font-24: 1.25rem;
    --line-30: 1.625rem;
    --line-26: 1.375rem;
  }
}

@media (max-width: 1200px) {
  :root {
    --font-60: 2.625rem;
    --font-50: 2.125rem;
    --font-48: 2rem;
    --font-46: 1.875rem;
    --font-40: 1.75rem;
    --font-36: 1.625rem;
    --font-30: 1.5rem;
    --font-24: 1.125rem;
    --font-20: 1rem;
    --font-16: 0.875rem;
    --font-14: 0.75rem;
    --line-30: 1.5rem;
    --line-26: 1.25rem;
  }
}

@media (max-width: 992px) {
  :root {
    --font-60: 2.25rem;
    --font-50: 2rem;
    --font-48: 1.875rem;
    --font-46: 1.75rem;
    --font-40: 1.625rem;
    --font-36: 1.5rem;
    --font-30: 1.375rem;
    --line-30: 1.375rem;
    --line-26: 1.125rem;
    --content-spacing: 2rem 0;
  }
}

@media (max-width: 576px) {
  :root {
    --font-60: 2rem;
    --font-50: 1.875rem;
    --font-48: 1.75rem;
    --font-46: 1.625rem;
    --font-40: 1.5rem;
    --font-36: 1.375rem;
    --font-30: 1.25rem;
  }
  [data-observe="translate"] {
    transform: unset;
    opacity: 1;
  }

  [data-observe="translate"].revealed {
    transform: unset;
    opacity: 1;
  }
}

.alert-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 5px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 14px 32px rgba(24, 35, 42, 0.12);
  animation: alertToastIn 0.24s ease both;
}

.alert-box.success {
  background: rgb(0, 207, 110);
}

.alert-box.error {
  background: rgb(242, 61, 61);
}

.alert-box > .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-box > .icon > svg {
  fill: #fff;
}

.alert-box > p {
  color: #fff;
  font-weight: 500;
}

@keyframes alertToastIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Softer storefront canvas */
body,
main#eg-main {
  background: #f7fbfd;
}