html[data-theme="studio-commerce"][data-surface="storefront"] {
  --sc-bg: #F4F1EA;
  --sc-surface: #FFFFFF;
  --sc-text: #151515;
  --sc-muted: #6E6A63;
  --sc-primary: #FF5A36;
  --sc-secondary: #1D4ED8;
  --sc-soft: #FFE5DC;
  --sc-border: #D8D3CA;
  --sc-success: #16835B;
  --sc-warning: #D97706;
  --sc-error: #C93C37;
  --sc-shadow: 0 18px 50px rgba(21, 21, 21, 0.10);
  --sc-shadow-soft: 0 8px 24px rgba(21, 21, 21, 0.07);
  --sc-radius-sm: 8px;
  --sc-radius: 14px;
  --sc-radius-lg: 24px;
  --background: 42 31% 94%;
  --foreground: 0 0% 8%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 8%;
  --primary: 11 100% 61%;
  --primary-foreground: 0 0% 100%;
  --secondary: 221 83% 53%;
  --secondary-foreground: 0 0% 100%;
  --muted: 35 18% 87%;
  --muted-foreground: 35 6% 41%;
  --border: 36 17% 82%;
  --input: 36 17% 82%;
  --ring: 11 100% 61%;
  --radius: 14px;
  --base-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --heading-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="studio-commerce"][data-surface="storefront"],
html[data-theme="studio-commerce"][data-surface="storefront"] body {
  min-width: 320px;
  max-width: 100%;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(255, 229, 220, 0.42), rgba(244, 241, 234, 0) 320px),
    var(--sc-bg);
  color: var(--sc-text);
  font-family: var(--base-font-family);
  text-rendering: geometricPrecision;
}

html[data-theme="studio-commerce"][data-surface="storefront"] * {
  letter-spacing: 0;
}

html[data-theme="studio-commerce"][data-surface="storefront"] *:focus-visible {
  outline: 3px solid rgba(255, 90, 54, 0.34);
  outline-offset: 3px;
}

html[data-theme="studio-commerce"][data-surface="storefront"] img {
  object-fit: contain;
}

html[data-theme="studio-commerce"][data-surface="storefront"] .container,
html[data-theme="studio-commerce"][data-surface="storefront"] main > div,
html[data-theme="studio-commerce"][data-surface="storefront"] main > section {
  max-width: min(1440px, calc(100vw - 32px));
}

html[data-theme="studio-commerce"][data-surface="storefront"] main {
  isolation: isolate;
}

html[data-theme="studio-commerce"][data-surface="storefront"] h1,
html[data-theme="studio-commerce"][data-surface="storefront"] h2,
html[data-theme="studio-commerce"][data-surface="storefront"] h3 {
  color: var(--sc-text);
  font-family: var(--heading-font-family);
  font-weight: 720;
  line-height: 0.98;
}

html[data-theme="studio-commerce"][data-surface="storefront"] h1 {
  font-size: clamp(2.4rem, 6vw, 5.8rem);
}

html[data-theme="studio-commerce"][data-surface="storefront"] h2 {
  font-size: clamp(1.8rem, 4vw, 3.5rem);
}

html[data-theme="studio-commerce"][data-surface="storefront"] p,
html[data-theme="studio-commerce"][data-surface="storefront"] li {
  color: inherit;
  line-height: 1.68;
}

html[data-theme="studio-commerce"][data-surface="storefront"] a {
  text-underline-offset: 0.24em;
}

html[data-theme="studio-commerce"][data-surface="storefront"] button,
html[data-theme="studio-commerce"][data-surface="storefront"] [role="button"],
html[data-theme="studio-commerce"][data-surface="storefront"] input,
html[data-theme="studio-commerce"][data-surface="storefront"] select,
html[data-theme="studio-commerce"][data-surface="storefront"] textarea {
  min-height: 44px;
}

html[data-theme="studio-commerce"][data-surface="storefront"] button,
html[data-theme="studio-commerce"][data-surface="storefront"] a[class*="bg-primary"],
html[data-theme="studio-commerce"][data-surface="storefront"] .bg-primary {
  border-radius: var(--sc-radius-sm);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

html[data-theme="studio-commerce"][data-surface="storefront"] button:hover,
html[data-theme="studio-commerce"][data-surface="storefront"] a[class*="bg-primary"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(255, 90, 54, 0.18);
}

html[data-theme="studio-commerce"][data-surface="storefront"] button:active {
  transform: translateY(0);
}

html[data-theme="studio-commerce"][data-surface="storefront"] input,
html[data-theme="studio-commerce"][data-surface="storefront"] select,
html[data-theme="studio-commerce"][data-surface="storefront"] textarea {
  border-color: var(--sc-border) !important;
  border-radius: var(--sc-radius-sm) !important;
  background: #fff !important;
  color: var(--sc-text) !important;
}

html[data-theme="studio-commerce"][data-surface="storefront"] input:focus,
html[data-theme="studio-commerce"][data-surface="storefront"] select:focus,
html[data-theme="studio-commerce"][data-surface="storefront"] textarea:focus {
  border-color: var(--sc-primary) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 54, 0.14) !important;
}

html[data-theme="studio-commerce"][data-surface="storefront"] header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid rgba(216, 211, 202, 0.9) !important;
  background: rgba(244, 241, 234, 0.94) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}

html[data-theme="studio-commerce"][data-surface="storefront"] header:before {
  content: "Studio Commerce - fast UAE delivery, secure checkout, easy support";
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(21, 21, 21, 0.08);
  background: var(--sc-text);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

html[data-theme="studio-commerce"][data-surface="storefront"] header > * {
  max-width: 1440px;
  margin-inline: auto;
}

html[data-theme="studio-commerce"][data-surface="storefront"] header a,
html[data-theme="studio-commerce"][data-surface="storefront"] header button {
  border-radius: 999px;
}

html[data-theme="studio-commerce"][data-surface="storefront"] header nav {
  gap: clamp(14px, 2.5vw, 34px) !important;
}

html[data-theme="studio-commerce"][data-surface="storefront"] footer {
  margin-top: clamp(48px, 8vw, 110px);
  border-top: 1px solid var(--sc-border);
  background: #151515 !important;
  color: #F4F1EA !important;
}

html[data-theme="studio-commerce"][data-surface="storefront"] footer a,
html[data-theme="studio-commerce"][data-surface="storefront"] footer p,
html[data-theme="studio-commerce"][data-surface="storefront"] footer h2,
html[data-theme="studio-commerce"][data-surface="storefront"] footer h3 {
  color: inherit !important;
}

html[data-theme="studio-commerce"][data-surface="storefront"] footer a:hover {
  color: var(--sc-primary) !important;
}

html[data-theme="studio-commerce"][data-surface="storefront"] .product-card-container,
html[data-theme="studio-commerce"][data-surface="storefront"] [class*="product-card"],
html[data-theme="studio-commerce"][data-surface="storefront"] article {
  border-color: var(--sc-border) !important;
}

html[data-theme="studio-commerce"][data-surface="storefront"] .product-card-container,
html[data-theme="studio-commerce"][data-surface="storefront"] [class*="product-card-container"] {
  overflow: hidden;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  background: var(--sc-surface) !important;
  box-shadow: var(--sc-shadow-soft) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

html[data-theme="studio-commerce"][data-surface="storefront"] .product-card-container:hover,
html[data-theme="studio-commerce"][data-surface="storefront"] [class*="product-card-container"]:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 90, 54, 0.46) !important;
  box-shadow: var(--sc-shadow) !important;
}

html[data-theme="studio-commerce"][data-surface="storefront"] .product-card-hover-zoom {
  background:
    linear-gradient(135deg, rgba(255, 229, 220, 0.64), rgba(255, 255, 255, 0.88)),
    #fff;
}

html[data-theme="studio-commerce"][data-surface="storefront"] .product-card-hover-zoom img {
  transition: transform 300ms ease;
}

html[data-theme="studio-commerce"][data-surface="storefront"] .product-card-container:hover .product-card-hover-zoom img {
  transform: scale(1.055);
}

html[data-theme="studio-commerce"][data-sc-route="home"][data-surface="storefront"] main > .container:first-child,
html[data-theme="studio-commerce"][data-sc-route="home"][data-surface="storefront"] main > div:first-child {
  padding-top: clamp(32px, 6vw, 82px) !important;
}

html[data-theme="studio-commerce"][data-sc-route="home"][data-surface="storefront"] main > div:first-child > section:first-child,
html[data-theme="studio-commerce"][data-sc-route="home"][data-surface="storefront"] main section:first-of-type {
  overflow: hidden;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-lg) !important;
  background:
    linear-gradient(120deg, rgba(255, 90, 54, 0.14), rgba(29, 78, 216, 0.07)),
    var(--sc-surface) !important;
  box-shadow: var(--sc-shadow);
}

html[data-theme="studio-commerce"][data-sc-route="home"][data-surface="storefront"] main section:first-of-type h1,
html[data-theme="studio-commerce"][data-sc-route="home"][data-surface="storefront"] main section:first-of-type h2 {
  max-width: 11ch;
  font-size: clamp(2.8rem, 7vw, 6.8rem) !important;
}

html[data-theme="studio-commerce"][data-sc-route="home"][data-surface="storefront"] main section {
  margin-block: clamp(28px, 5vw, 76px);
}

html[data-theme="studio-commerce"][data-sc-route="home"][data-surface="storefront"] main section h2 {
  margin-bottom: clamp(18px, 2.6vw, 34px);
}

html[data-theme="studio-commerce"][data-sc-route="listing"][data-surface="storefront"] main .container,
html[data-theme="studio-commerce"][data-sc-route="content"][data-surface="storefront"] main .container {
  padding-top: clamp(28px, 5vw, 72px) !important;
}

html[data-theme="studio-commerce"][data-sc-route="listing"][data-surface="storefront"] main .container > div:first-child,
html[data-theme="studio-commerce"][data-sc-route="content"][data-surface="storefront"] main .container > div:first-child {
  border-radius: var(--sc-radius-lg);
}

html[data-theme="studio-commerce"][data-sc-route="listing"][data-surface="storefront"] main .grid {
  gap: clamp(14px, 2vw, 28px) !important;
}

html[data-theme="studio-commerce"][data-sc-route="listing"][data-surface="storefront"] main aside,
html[data-theme="studio-commerce"][data-sc-route="listing"][data-surface="storefront"] main [class*="sticky"] {
  border-radius: var(--sc-radius) !important;
}

html[data-theme="studio-commerce"][data-sc-route="product-detail"][data-surface="storefront"] main .container {
  padding-top: clamp(26px, 5vw, 70px) !important;
}

html[data-theme="studio-commerce"][data-sc-route="product-detail"][data-surface="storefront"] main .container > .grid,
html[data-theme="studio-commerce"][data-sc-route="product-detail"][data-surface="storefront"] main .container > div > .grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.9fr) !important;
  gap: clamp(28px, 5vw, 76px) !important;
  align-items: start !important;
}

html[data-theme="studio-commerce"][data-sc-route="product-detail"][data-surface="storefront"] main .container > .grid > :first-child,
html[data-theme="studio-commerce"][data-sc-route="product-detail"][data-surface="storefront"] main .container > div > .grid > :first-child {
  border-radius: var(--sc-radius-lg);
}

html[data-theme="studio-commerce"][data-sc-route="product-detail"][data-surface="storefront"] main .container > .grid > :last-child,
html[data-theme="studio-commerce"][data-sc-route="product-detail"][data-surface="storefront"] main .container > div > .grid > :last-child {
  position: sticky;
  top: 112px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--sc-shadow-soft);
}

html[data-theme="studio-commerce"][data-sc-route="product-detail"][data-surface="storefront"] main img {
  border-radius: var(--sc-radius) !important;
}

html[data-theme="studio-commerce"][data-sc-route="cart"][data-surface="storefront"] main .container,
html[data-theme="studio-commerce"][data-sc-route="checkout"][data-surface="storefront"] main .container,
html[data-theme="studio-commerce"][data-sc-route="order-confirmation"][data-surface="storefront"] main .container {
  padding-top: clamp(28px, 5vw, 74px) !important;
}

html[data-theme="studio-commerce"][data-sc-route="cart"][data-surface="storefront"] main .container > .grid,
html[data-theme="studio-commerce"][data-sc-route="cart"][data-surface="storefront"] main .container .grid.lg\:grid-cols-3 {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
  gap: clamp(24px, 4vw, 60px) !important;
}

html[data-theme="studio-commerce"][data-sc-route="checkout"][data-surface="storefront"] main .container > .grid,
html[data-theme="studio-commerce"][data-sc-route="checkout"][data-surface="storefront"] main .container .grid.lg\:grid-cols-2 {
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.7fr) !important;
  gap: clamp(24px, 4vw, 58px) !important;
  align-items: start;
}

html[data-theme="studio-commerce"][data-sc-route="cart"][data-surface="storefront"] main .container .grid > :last-child,
html[data-theme="studio-commerce"][data-sc-route="checkout"][data-surface="storefront"] main .container .grid > :last-child {
  position: sticky;
  top: 112px;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-lg) !important;
  background: var(--sc-surface) !important;
  box-shadow: var(--sc-shadow) !important;
}

html[data-theme="studio-commerce"][data-sc-route="cart"][data-surface="storefront"] main .divide-y > *,
html[data-theme="studio-commerce"][data-sc-route="checkout"][data-surface="storefront"] form > *,
html[data-theme="studio-commerce"][data-sc-route="account"][data-surface="storefront"] main .container > div {
  border-color: var(--sc-border) !important;
}

html[data-theme="studio-commerce"][data-sc-route="order-confirmation"][data-surface="storefront"] main .container > div,
html[data-theme="studio-commerce"][data-sc-route="account"][data-surface="storefront"] main .container {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  background: var(--sc-surface);
  box-shadow: var(--sc-shadow-soft);
}

html[data-theme="studio-commerce"][data-surface="storefront"] [role="dialog"],
html[data-theme="studio-commerce"][data-surface="storefront"] [data-radix-popper-content-wrapper] > * {
  border-color: var(--sc-border) !important;
  border-radius: var(--sc-radius-lg) !important;
  box-shadow: var(--sc-shadow) !important;
}

html[data-theme="studio-commerce"][data-surface="storefront"] [class*="toast"],
html[data-theme="studio-commerce"][data-surface="storefront"] [data-sonner-toast] {
  border-radius: var(--sc-radius) !important;
  border-color: var(--sc-border) !important;
  background: var(--sc-surface) !important;
  color: var(--sc-text) !important;
}

@media (max-width: 1023px) {
  html[data-theme="studio-commerce"][data-surface="storefront"] .container,
  html[data-theme="studio-commerce"][data-surface="storefront"] main > div,
  html[data-theme="studio-commerce"][data-surface="storefront"] main > section {
    max-width: calc(100vw - 24px);
  }

  html[data-theme="studio-commerce"][data-sc-route="product-detail"][data-surface="storefront"] main .container > .grid,
  html[data-theme="studio-commerce"][data-sc-route="product-detail"][data-surface="storefront"] main .container > div > .grid,
  html[data-theme="studio-commerce"][data-sc-route="cart"][data-surface="storefront"] main .container > .grid,
  html[data-theme="studio-commerce"][data-sc-route="cart"][data-surface="storefront"] main .container .grid.lg\:grid-cols-3,
  html[data-theme="studio-commerce"][data-sc-route="checkout"][data-surface="storefront"] main .container > .grid,
  html[data-theme="studio-commerce"][data-sc-route="checkout"][data-surface="storefront"] main .container .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  html[data-theme="studio-commerce"][data-sc-route="product-detail"][data-surface="storefront"] main .container > .grid > :last-child,
  html[data-theme="studio-commerce"][data-sc-route="product-detail"][data-surface="storefront"] main .container > div > .grid > :last-child,
  html[data-theme="studio-commerce"][data-sc-route="cart"][data-surface="storefront"] main .container .grid > :last-child,
  html[data-theme="studio-commerce"][data-sc-route="checkout"][data-surface="storefront"] main .container .grid > :last-child {
    position: static;
  }

  html[data-theme="studio-commerce"][data-surface="storefront"] header:before {
    min-height: 28px;
    padding-inline: 12px;
    font-size: 11px;
    text-align: center;
  }
}

@media (max-width: 640px) {
  html[data-theme="studio-commerce"][data-surface="storefront"] .container,
  html[data-theme="studio-commerce"][data-surface="storefront"] main > div,
  html[data-theme="studio-commerce"][data-surface="storefront"] main > section {
    max-width: calc(100vw - 20px);
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html[data-theme="studio-commerce"][data-surface="storefront"] h1 {
    font-size: clamp(2.1rem, 12vw, 3.5rem);
  }

  html[data-theme="studio-commerce"][data-surface="storefront"] h2 {
    font-size: clamp(1.55rem, 8vw, 2.4rem);
  }

  html[data-theme="studio-commerce"][data-sc-route="listing"][data-surface="storefront"] main .grid {
    gap: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="studio-commerce"][data-surface="storefront"] *,
  html[data-theme="studio-commerce"][data-surface="storefront"] *:before,
  html[data-theme="studio-commerce"][data-surface="storefront"] *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}