/* EXTERNAL */
@import "./cookieConsent.css";

/* OBJECTS */
@import "../components/objects/accordionItem.css";
@import "../components/objects/button.css";
@import "../components/objects/callout.css";
@import "../components/objects/checkbox.css";
@import "../components/objects/dialog.css";
@import "../components/objects/divider.css";
@import "../components/objects/dropdown.css";
@import "../components/objects/floatingActionButton.css";
@import "../components/objects/input.css";
@import "../components/objects/notification.css";
@import "../components/objects/pagination.css";
@import "../components/objects/radio.css";
@import "../components/objects/select.css";
@import "../components/objects/textarea.css";
@import "../components/objects/tooltip.css";

/* PLACEHOLDERS */
@import "../components/placeholders/accountTableRowPlaceholder.css";
@import "../components/placeholders/placeholder.css";
@import "../components/placeholders/productCardPlaceholder.css";
@import "../components/placeholders/reviewItemPlaceholder.css";

/* COMPONENTS */
@import "../components/accountDeleteDialog.css";
@import "../components/accountNavigation.css";
@import "../components/accountTable.css";
@import "../components/accountTableHeader.css";
@import "../components/accountTableRow.css";
@import "../components/accountTableRowSpacer.css";
@import "../components/antiPiracyWarningBox.css";
@import "../components/antiPiracyWarningModal.css";
@import "../components/appInstallBanner.css";
@import "../components/badgeCounter.css";
@import "../components/breadcrumbs.css";
@import "../components/buttonGroup.css";
@import "../components/card.css";
@import "../components/cartItem.css";
@import "../components/cartList.css";
@import "../components/cartPopup.css";
@import "../components/cartPopupTrigger.css";
@import "../components/detailsCard.css";
@import "../components/downloadsTable.css";
@import "../components/emptyState.css";
@import "../components/fileDownload.css";
@import "../components/filterTag.css";
@import "../components/form.css";
@import "../components/formField.css";
@import "../components/header.css";
@import "../components/headerCategories.css";
@import "../components/highlightSlider.css";
@import "../components/icon.css";
@import "../components/languageDropdown.css";
@import "../components/layout.css";
@import "../components/loader.css";
@import "../components/loginPopup.css";
@import "../components/loginPopupTrigger.css";
@import "../components/mainSection.css";
@import "../components/manageSubscriptionsForm.css";
@import "../components/manufacturerItem.css";
@import "../components/newsletterSignupBanner.css";
@import "../components/orderCard.css";
@import "../components/orderProduct.css";
@import "../components/orderProductList.css";
@import "../components/orderSummaryPrices.css";
@import "../components/pageLegal.css";
@import "../components/pageLink.css";
@import "../components/pageSidebarLayout.css";
@import "../components/passwordChangeForm.css";
@import "../components/passwordInput.css";
@import "../components/paymentMethod.css";
@import "../components/productAddReviewDialog.css";
@import "../components/productAddReviewDialogSuccess.css";
@import "../components/productBadge.css";
@import "../components/productCurrencyList.css";
@import "../components/productInfoCard.css";
@import "../components/productInfoHeader.css";
@import "../components/productInfoSale.css";
@import "../components/productListSection.css";
@import "../components/productOffer.css";
@import "../components/productReview.css";
@import "../components/productReviewSummaryCard.css";
@import "../components/productSaleTimeBlock.css";
@import "../components/productsSliderCard.css";
@import "../components/productShareCard.css";
@import "../components/productSupportDropdown.css";
@import "../components/productTabsSection.css";
@import "../components/profileCard.css";
@import "../components/radioPanel.css";
@import "../components/ratingBars.css";
@import "../components/ratingStars.css";
@import "../components/reviewItem.css";
@import "../components/searchInput.css";
@import "../components/searchTableEmptyMessage.css";
@import "../components/searchTableInput.css";
@import "../components/sectionFilter.css";
@import "../components/sectionTabs.css";
@import "../components/selectDropdown.css";
@import "../components/singleBanner.css";
@import "../components/ticketCreateDialog.css";
@import "../components/ticketCreateDialogSuccess.css";
@import "../components/topManufacturersCard.css";
@import "../components/voucherRedeemDialog.css";
@import "../components/voucherSendDialog.css";
@import "../components/slideshow.css";
@import "../components/userMenu.css";
@import "../components/userMenuTrigger.css";

/* VARIABLES */
:root {
  /* Font Weight */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* Font Size */
  --font-size-base: 16px;
  --font-size-xs: 10px;
  --font-size-small: 12px;
  --font-size-medium: 14px;
  --font-size-large: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;
  /* Font Leading */
  --font-line-height-base: 18px;
  --font-line-height-xs: 12px;
  --font-line-height-small: 16px;
  --font-line-height-medium: 20px;
  --font-line-height-large: 22px;
  --font-line-height-xl: 30px;
  --font-line-height-xxl: 36px;
  /* Font Tracking */
  --font-letter-spacing-tighter: -0.04em;
  --font-letter-spacing-tight: -0.02em;
  --font-letter-spacing-normal: 0;
  /* Colors */
  --color-transparent: #00000000;
  --color-background: #f7f8fa;
  --color-white: #ffffff;
  --color-hsl-red: 0 79% 63%;
  --color-red1: #e03e3e;
  --color-red: #eb5757;
  --color-red-background: #faf0f0;
  --color-hsl-orange: 28 87% 62%;
  --color-orange: #f2994a;
  --color-orange-background: #faf5f0;
  --color-yellow: #f2c94c;
  /* Gray Hue */
  --color-gray1: #1f2933;
  --color-gray2: #3c464f;
  --color-gray3: #727a82;
  --color-gray4: #b2b7bd;
  --color-gray5: #d9dde0;
  --color-gray6: #ebedf0;
  /* Green Hue */
  --color-hsl-green: 146 64% 36%;
  --color-green1: #219653;
  --color-green2: #27ae60;
  --color-green3: #6fcf97;
  --color-green-background: #f0faf4;
  /* Blue Hue */
  --color-hsl-blue: 203 100% 31%;
  --color-blue1: #00629f;
  --color-blue2: #3f90e0;
  --color-blue3: #57a6f5;
  --color-blue-background: #f0f6fa;
  /* Purple Hue */
  --color-purple1: #9b51e0;
  --color-purple2: #bb6bd9;
  /* Shadows */
  --shadow-base: 0 8px 20px #1f293314;
  /* Transition */
  --transition-duration: 160ms;
  /* Elements */
  --container-padding-inline-md: 20px;
  --container-padding-inline-lg: 40px;
  --container-width-md: 1280px;
  --container-width-lg: 1440px;
  --gutter-size: 20px;
  --header-categories-height: 48px;
  --header-height-desktop: 60px;
  --header-height-mobile: 104px;
  --product-top-bar-height: 64px;
  --table-row-spacer-height: 12px;
  /* Anti-piracy warning box */
  /* We have specific colors fot this because it is a custom design */
  --color-anti-piracy-warning-box-background: #0345A014;
  --color-anti-piracy-warning-box-border: #DCDCF9;
}

/* RESET */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *)) {
  all: unset;
  display: revert;
  outline: revert;
}

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

a,
button {
  cursor: pointer;
}

a:has(> p),
button {
  white-space: nowrap;
}

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

img {
  max-width: 100%;
}

/* BASE STYLES */
html,
body {
  overflow-x: clip;
}

body {
  position: relative;
  min-width: 320px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
    "Helvetica Neue", sans-serif;
  background-color: var(--color-background);
  color: var(--color-gray1);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-medium);
  display: flex;
  flex-direction: column;
}

h1,
.h1 {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-xxl);
}

h2,
.h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-xl);
}

h3,
.h3 {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-large);
}

h4,
.h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-base);
}

h5,
.h5 {
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-medium);
}

h6,
.h6 {
  text-transform: uppercase;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-small);
}

strong,
b {
  font-weight: var(--font-weight-semibold);
}

small {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-small);
}

/* INTERACTION STYLES */
html.is-scroll-disabled {
  overflow-y: hidden;
}

body.is-scroll-disabled {
  height: 100%;
}

.is-overlay {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-gray1);
  opacity: 0.2;
}

/* UTILITY STYLES */
.u-relative {
  position: relative;
}

.u-absolute {
  position: absolute;
}

.u-bottom-0 {
  bottom: 0;
}

.u-col-span-1 {
  grid-column: span 1;
}

.u-col-span-4 {
  grid-column: span 4;
}

.u-col-span-8 {
  grid-column: span 8;
}

.u-col-span-12 {
  grid-column: span 12;
}

.u-component-container {
  container-type: inline-size;
}

.u-flex {
  display: flex;
}

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

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

.u-gap-3 {
  gap: 12px;
}

.u-gap-5 {
  gap: 20px;
}

.u-gap-8 {
  gap: 32px;
}

.u-grid {
  display: grid;
}

.u-grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.u-hidden {
  display: none;
}

.u-inline-flex {
  display: inline-flex;
}

.u-self-start {
  align-self: start;
}

.u-text-light {
  color: var(--color-gray3);
}

@media (min-width: 768px) {
  .md\:u-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:u-col-span-4 {
    grid-column: span 4;
  }

  .lg\:u-col-span-8 {
    grid-column: span 8;
  }
}

/* ANIMATION STYLES */
@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-in-from-top {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(0%);
  }
}

@keyframes slide-in-from-bottom {
  from {
    transform: translateY(20px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-in-from-right {
  from {
    transform: translateX(20px);
  }

  to {
    transform: translateX(0);
  }
}

.scale-animation {
  animation: scale-animation 1s;
}

@keyframes scale-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

/* RAW TEXT STYLES */
.u-raw a,
.u-raw a > span {
  color: var(--color-blue1) !important;
  text-decoration: underline transparent;
  transition: text-decoration-color var(--transition-duration);
}

.u-raw a:hover {
  text-decoration-color: var(--color-blue1);
}

.u-raw b {
  font-weight: bold;
}

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

.u-raw i {
  font-style: italic;
}

.u-raw li {
  display: list-item;
  text-align: match-parent;
}

.u-raw p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.u-raw u {
  text-decoration: underline;
}

.u-raw ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 40px;
}

.u-raw [align="center"] {
  text-align: center;
}

.u-color-green {
  color: var(--color-green1);
}

.u-color-orange {
  color: var(--color-orange);
}

.u-color-red {
  color: var(--color-red);
}

.u-separator {
  width: calc(100% + 50px);
  height: 1px;
  margin-left: -25px;
  background-color: var(--color-gray4);
}

/* POLYFILLS */
[inert],
[inert] * {
  pointer-events: none;
  cursor: default;
  user-select: none;
  -moz-user-focus: ignore;
}