/* Scoped shop utilities (no Tailwind build required) */
.ucl-shop-root {
  --background: #fafbff;
  --foreground: #1a1a2e;
  --card: #ffffff;
  --primary: #3939E6;
  --primary-foreground: #ffffff;
  --primary-soft: color-mix(in srgb, #3939E6 14%, white);
  --primary-glow: #7E33CC;
  --muted: #f0f2f8;
  --muted-foreground: #5c5c7a;
  --tint-blue: color-mix(in srgb, #3939E6 12%, white);
  --tint-mint: color-mix(in srgb, #00D170 12%, white);
  --destructive: #FF4340;
  --border: #e4e6ef;
  font-family: system-ui, Tahoma, sans-serif;
  background: var(--background);
  color: var(--foreground);
  min-height: 100vh;
  line-height: 1.55;
}
.ucl-shop-root * { box-sizing: border-box; border-color: var(--border); }
.ucl-shop-root a { color: inherit; text-decoration: none; }
.ucl-shop-root button, .ucl-shop-root input { font: inherit; }
.ucl-shop-root .min-h-screen { min-height: 100vh; }
.ucl-shop-root .bg-background { background: var(--background); }
.ucl-shop-root .bg-card { background: var(--card); }
.ucl-shop-root .bg-muted { background: var(--muted); }
.ucl-shop-root .bg-primary { background: var(--primary); }
.ucl-shop-root .bg-primary-soft { background: var(--primary-soft); }
.ucl-shop-root .bg-tint-blue { background: var(--tint-blue); }
.ucl-shop-root .bg-tint-mint { background: var(--tint-mint); }
.ucl-shop-root .text-primary { color: var(--primary); }
.ucl-shop-root .text-primary-foreground { color: var(--primary-foreground); }
.ucl-shop-root .text-muted-foreground { color: var(--muted-foreground); }
.ucl-shop-root .text-destructive { color: var(--destructive); }
.ucl-shop-root .border { border: 1px solid var(--border); }
.ucl-shop-root .border-b { border-bottom: 1px solid var(--border); }
.ucl-shop-root .border-t { border-top: 1px solid var(--border); }
.ucl-shop-root .border-dashed { border-style: dashed; }
.ucl-shop-root .divide-y > * + * { border-top: 1px solid var(--border); }
.ucl-shop-root .rounded-full { border-radius: 9999px; }
.ucl-shop-root .rounded-xl { border-radius: 0.75rem; }
.ucl-shop-root .rounded-2xl { border-radius: 1rem; }
.ucl-shop-root .rounded-3xl { border-radius: 1.5rem; }
.ucl-shop-root .rounded-lg { border-radius: 0.5rem; }
.ucl-shop-root .rounded-\[2rem\] { border-radius: 2rem; }
.ucl-shop-root .sticky { position: sticky; }
.ucl-shop-root .fixed { position: fixed; }
.ucl-shop-root .absolute { position: absolute; }
.ucl-shop-root .relative { position: relative; }
.ucl-shop-root .inset-0 { inset: 0; }
.ucl-shop-root .inset-x-0 { left: 0; right: 0; }
.ucl-shop-root .top-0 { top: 0; }
.ucl-shop-root .bottom-0 { bottom: 0; }
.ucl-shop-root .z-40 { z-index: 40; }
.ucl-shop-root .flex { display: flex; }
.ucl-shop-root .grid { display: grid; }
.ucl-shop-root .hidden { display: none; }
.ucl-shop-root .block { display: block; }
.ucl-shop-root .inline-block { display: inline-block; }
.ucl-shop-root .inline-flex { display: inline-flex; }
.ucl-shop-root .flex-1 { flex: 1; }
.ucl-shop-root .flex-col { flex-direction: column; }
.ucl-shop-root .items-center { align-items: center; }
.ucl-shop-root .items-start { align-items: flex-start; }
.ucl-shop-root .items-end { align-items: flex-end; }
.ucl-shop-root .justify-center { justify-content: center; }
.ucl-shop-root .justify-between { justify-content: space-between; }
.ucl-shop-root .gap-1 { gap: 0.25rem; }
.ucl-shop-root .gap-2 { gap: 0.5rem; }
.ucl-shop-root .gap-3 { gap: 0.75rem; }
.ucl-shop-root .gap-4 { gap: 1rem; }
.ucl-shop-root .gap-6 { gap: 1.5rem; }
.ucl-shop-root .gap-8 { gap: 2rem; }
.ucl-shop-root .gap-10 { gap: 2.5rem; }
.ucl-shop-root .space-y-3 > * + * { margin-top: 0.75rem; }
.ucl-shop-root .space-y-4 > * + * { margin-top: 1rem; }
.ucl-shop-root .space-y-16 > * + * { margin-top: 4rem; }
.ucl-shop-root .mx-auto { margin-left: auto; margin-right: auto; }
.ucl-shop-root .mt-1 { margin-top: 0.25rem; }
.ucl-shop-root .mt-2 { margin-top: 0.5rem; }
.ucl-shop-root .mt-3 { margin-top: 0.75rem; }
.ucl-shop-root .mt-4 { margin-top: 1rem; }
.ucl-shop-root .mt-5 { margin-top: 1.25rem; }
.ucl-shop-root .mt-6 { margin-top: 1.5rem; }
.ucl-shop-root .mt-8 { margin-top: 2rem; }
.ucl-shop-root .mt-10 { margin-top: 2.5rem; }
.ucl-shop-root .mt-14 { margin-top: 3.5rem; }
.ucl-shop-root .mb-6 { margin-bottom: 1.5rem; }
.ucl-shop-root .mb-10 { margin-bottom: 2.5rem; }
.ucl-shop-root .-mt-2 { margin-top: -0.5rem; }
.ucl-shop-root .p-4 { padding: 1rem; }
.ucl-shop-root .p-5 { padding: 1.25rem; }
.ucl-shop-root .p-6 { padding: 1.5rem; }
.ucl-shop-root .p-10 { padding: 2.5rem; }
.ucl-shop-root .p-16 { padding: 4rem; }
.ucl-shop-root .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.ucl-shop-root .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.ucl-shop-root .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.ucl-shop-root .px-8 { padding-left: 2rem; padding-right: 2rem; }
.ucl-shop-root .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.ucl-shop-root .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.ucl-shop-root .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.ucl-shop-root .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.ucl-shop-root .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.ucl-shop-root .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.ucl-shop-root .pt-3 { padding-top: 0.75rem; }
.ucl-shop-root .pt-4 { padding-top: 1rem; }
.ucl-shop-root .pt-5 { padding-top: 1.25rem; }
.ucl-shop-root .pt-10 { padding-top: 2.5rem; }
.ucl-shop-root .pb-2 { padding-bottom: 0.5rem; }
.ucl-shop-root .pb-6 { padding-bottom: 1.5rem; }
.ucl-shop-root .pb-28 { padding-bottom: 7rem; }
.ucl-shop-root .h-3\.5 { height: 0.875rem; }
.ucl-shop-root .h-4 { height: 1rem; }
.ucl-shop-root .h-5 { height: 1.25rem; }
.ucl-shop-root .h-6 { height: 1.5rem; }
.ucl-shop-root .h-7 { height: 1.75rem; }
.ucl-shop-root .h-8 { height: 2rem; }
.ucl-shop-root .h-9 { height: 2.25rem; }
.ucl-shop-root .h-10 { height: 2.5rem; }
.ucl-shop-root .h-11 { height: 2.75rem; }
.ucl-shop-root .h-12 { height: 3rem; }
.ucl-shop-root .h-14 { height: 3.5rem; }
.ucl-shop-root .h-16 { height: 4rem; }
.ucl-shop-root .h-24 { height: 6rem; }
.ucl-shop-root .h-28 { height: 7rem; }
.ucl-shop-root .h-32 { height: 8rem; }
.ucl-shop-root .h-36 { height: 9rem; }
.ucl-shop-root .h-40 { height: 10rem; }
.ucl-shop-root .h-64 { height: 16rem; }
.ucl-shop-root .h-96 { height: 24rem; }
.ucl-shop-root .h-full { height: 100%; }
.ucl-shop-root .w-3\.5 { width: 0.875rem; }
.ucl-shop-root .w-4 { width: 1rem; }
.ucl-shop-root .w-6 { width: 1.5rem; }
.ucl-shop-root .w-8 { width: 2rem; }
.ucl-shop-root .w-9 { width: 2.25rem; }
.ucl-shop-root .w-10 { width: 2.5rem; }
.ucl-shop-root .w-20 { width: 5rem; }
.ucl-shop-root .w-24 { width: 6rem; }
.ucl-shop-root .w-28 { width: 7rem; }
.ucl-shop-root .w-full { width: 100%; }
.ucl-shop-root .min-w-0 { min-width: 0; }
.ucl-shop-root .min-w-5 { min-width: 1.25rem; }
.ucl-shop-root .max-w-lg { max-width: 32rem; }
.ucl-shop-root .max-w-xl { max-width: 36rem; }
.ucl-shop-root .max-w-2xl { max-width: 42rem; }
.ucl-shop-root .max-w-3xl { max-width: 48rem; }
.ucl-shop-root .max-w-5xl { max-width: 64rem; }
.ucl-shop-root .max-w-6xl { max-width: 72rem; }
.ucl-shop-root .max-w-sm { max-width: 24rem; }
.ucl-shop-root .shrink-0 { flex-shrink: 0; }
.ucl-shop-root .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ucl-shop-root .overflow-hidden { overflow: hidden; }
.ucl-shop-root .overflow-x-auto { overflow-x: auto; }
.ucl-shop-root .object-cover { object-fit: cover; }
.ucl-shop-root .aspect-\[3\/4\] { aspect-ratio: 3/4; }
.ucl-shop-root .text-center { text-align: center; }
.ucl-shop-root .text-right { text-align: right; }
.ucl-shop-root .text-xs { font-size: 0.75rem; }
.ucl-shop-root .text-sm { font-size: 0.875rem; }
.ucl-shop-root .text-lg { font-size: 1.125rem; }
.ucl-shop-root .text-xl { font-size: 1.25rem; }
.ucl-shop-root .text-2xl { font-size: 1.5rem; }
.ucl-shop-root .text-3xl { font-size: 1.875rem; }
.ucl-shop-root .text-4xl { font-size: 2.25rem; }
.ucl-shop-root .text-\[10px\] { font-size: 10px; }
.ucl-shop-root .text-\[11px\] { font-size: 11px; }
.ucl-shop-root .font-bold { font-weight: 700; }
.ucl-shop-root .font-medium { font-weight: 500; }
.ucl-shop-root .leading-relaxed { line-height: 1.625; }
.ucl-shop-root .tracking-widest { letter-spacing: 0.1em; }
.ucl-shop-root .tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.ucl-shop-root .tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.ucl-shop-root .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ucl-shop-root .opacity-70 { opacity: 0.7; }
.ucl-shop-root .opacity-80 { opacity: 0.8; }
.ucl-shop-root .opacity-90 { opacity: 0.9; }
.ucl-shop-root .shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.ucl-shop-root .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }
.ucl-shop-root .shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); }
.ucl-shop-root .shadow-primary\/20 { box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--primary) 20%, transparent); }
.ucl-shop-root .backdrop-blur-md { backdrop-filter: blur(12px); }
.ucl-shop-root .backdrop-blur-lg { backdrop-filter: blur(16px); }
.ucl-shop-root .bg-background\/70 { background: color-mix(in oklch, var(--background) 70%, transparent); }
.ucl-shop-root .bg-background\/85 { background: color-mix(in oklch, var(--background) 85%, transparent); }
.ucl-shop-root .bg-gradient-to-br {
  background-image: linear-gradient(
    to bottom right,
    var(--tw-gradient-from, var(--primary)),
    var(--tw-gradient-via, var(--tw-gradient-to, var(--primary-glow))),
    var(--tw-gradient-to, var(--primary-soft))
  );
}
.ucl-shop-root .from-primary { --tw-gradient-from: var(--primary); }
.ucl-shop-root .via-primary-glow { --tw-gradient-to: var(--primary-glow); }
.ucl-shop-root .to-primary-soft { --tw-gradient-to: var(--primary-soft); }
.ucl-shop-root .from-primary-soft { --tw-gradient-from: var(--primary-soft); }
.ucl-shop-root .via-background { --tw-gradient-via: var(--background); }
.ucl-shop-root .to-tint-blue { --tw-gradient-to: var(--tint-blue); }
.ucl-shop-root .translate-x-1 { transform: translateX(0.25rem); }
.ucl-shop-root .translate-x-2 { transform: translateX(0.5rem); }
.ucl-shop-root .translate-y-1 { transform: translateY(0.25rem); }
.ucl-shop-root .translate-y-2 { transform: translateY(0.5rem); }
.ucl-shop-root .-translate-y-0\.5:hover { transform: translateY(-0.125rem); }
.ucl-shop-root .-translate-y-1 { transform: translateY(-0.25rem); }
.ucl-shop-root .group:hover .group-hover\:-translate-y-1 { transform: translateY(-0.25rem); }
.ucl-shop-root .group:hover .group-hover\:-translate-x-1 { transform: translateX(-0.25rem); }
.ucl-shop-root .group:hover .group-hover\:scale-\[1\.02\] { transform: scale(1.02); }
.ucl-shop-root .group:hover .group-hover\:rotate-90 { transform: rotate(90deg); }
.ucl-shop-root .group:hover .group-hover\:gap-2 { gap: 0.5rem; }
.ucl-shop-root .transition { transition: all 0.2s; }
.ucl-shop-root .transition-all { transition: all 0.2s; }
.ucl-shop-root .transition-transform { transition: transform 0.2s; }
.ucl-shop-root .hover\:bg-muted:hover { background: var(--muted); }
.ucl-shop-root .hover\:text-foreground:hover { color: var(--foreground); }
.ucl-shop-root .hover\:text-primary:hover { color: var(--primary); }
.ucl-shop-root .hover\:underline:hover { text-decoration: underline; }
.ucl-shop-root .hover\:border-primary\/40:hover { border-color: color-mix(in oklch, var(--primary) 40%, var(--border)); }
.ucl-shop-root .hover\:border-primary:hover { border-color: var(--primary); }
.ucl-shop-root .hover\:opacity-90:hover { opacity: 0.9; }
.ucl-shop-root .hover\:text-destructive:hover { color: var(--destructive); }
.ucl-shop-root .focus\:border-primary:focus { border-color: var(--primary); }
.ucl-shop-root .focus\:outline-none:focus { outline: none; }
.ucl-shop-root .disabled\:opacity-50:disabled { opacity: 0.5; }
.ucl-shop-root .snap-x { scroll-snap-type: x mandatory; }
.ucl-shop-root .snap-start { scroll-snap-align: start; }
.ucl-shop-root .list-none { list-style: none; }
.ucl-shop-root .underline { text-decoration: underline; }
.ucl-shop-root .cursor-pointer { cursor: pointer; }
.ucl-shop-root .group { position: relative; }
.ucl-shop-root .space-y-16 > * + * { margin-top: 4rem; }
.ucl-shop-root .space-y-3 > * + * { margin-top: 0.75rem; }
.ucl-shop-root .scroll-mt-24 { scroll-margin-top: 6rem; }
.ucl-shop-root .mb-8 { margin-bottom: 2rem; }
.ucl-shop-root .mb-5 { margin-bottom: 1.25rem; }
.ucl-shop-root .-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; }
.ucl-shop-root .-mt-2 { margin-top: -0.5rem; }
.ucl-shop-root .-mr-3 { margin-right: -0.75rem; }
.ucl-shop-root .-ml-4 { margin-left: -1rem; }
.ucl-shop-root .pr-3 { padding-right: 0.75rem; }
.ucl-shop-root .md\:pr-4 { }
.ucl-shop-root .md\:-mr-4 { }
.ucl-shop-root .md\:p-10 { }
.ucl-shop-root .md\:p-5 { }
.ucl-shop-root .md\:gap-8 { }
.ucl-shop-root .md\:w-56 { }
.ucl-shop-root .md\:flex-col { }
.ucl-shop-root .md\:flex-none { }
.ucl-shop-root .md\:text-base { }
.ucl-shop-root .h-96 { height: 24rem; }
.ucl-shop-root .w-72 { width: 18rem; }
.ucl-shop-root .h-px { height: 1px; }
.ucl-shop-root .grow-0 { flex-grow: 0; }
.ucl-shop-root .basis-full { flex-basis: 100%; }
.ucl-shop-root .font-semibold { font-weight: 600; }
.ucl-shop-root .opacity-60 { opacity: 0.6; }
.ucl-shop-root .opacity-80 { opacity: 0.8; }
.ucl-shop-root .snap-mandatory { scroll-snap-type: x mandatory; }
.ucl-shop-root .border-dashed { border-style: dashed; }
.ucl-shop-root .max-w-md { max-width: 28rem; }
.ucl-shop-root .max-w-lg { max-width: 32rem; }
.ucl-shop-root .gap-1\.5 { gap: 0.375rem; }
.ucl-shop-root .gap-5 { gap: 1.25rem; }
.ucl-shop-root .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.ucl-shop-root .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.ucl-shop-root .px-4 { padding-left: 1rem; padding-right: 1rem; }
.ucl-shop-root .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.ucl-shop-root .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.ucl-shop-root .h-9 { height: 2.25rem; }
.ucl-shop-root .h-11 { height: 2.75rem; }
.ucl-shop-root .w-6 { width: 1.5rem; }
.ucl-shop-root .top-24 { top: 6rem; }
.ucl-shop-root .top-3 { top: 0.75rem; }
.ucl-shop-root .left-3 { left: 0.75rem; }
.ucl-shop-root .gap-x-6 { column-gap: 1.5rem; }
.ucl-shop-root .gap-y-10 { row-gap: 2.5rem; }
.ucl-shop-root .-rotate-12 { transform: rotate(-12deg); }
.ucl-shop-root .rotate-6 { transform: rotate(6deg); }
.ucl-shop-root .bg-white\/15 { background: rgb(255 255 255 / 0.15); }
.ucl-shop-root .bg-white\/70 { background: rgb(255 255 255 / 0.7); }
.ucl-shop-root .bg-white\/80 { background: rgb(255 255 255 / 0.8); }
.ucl-shop-root .hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem); }
.ucl-shop-root .group-hover\:bg-white:hover,
.ucl-shop-root .group:hover .group-hover\:bg-white { background: #fff; }
.ucl-shop-root .group-hover\:text-primary:hover,
.ucl-shop-root .group:hover .group-hover\:text-primary { color: var(--primary); }
.ucl-shop-root .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ucl-shop-root .sm\:grid-cols-2 { }
.ucl-shop-root .sm\:grid-cols-3 { }
.ucl-shop-root .sm\:flex-row { }
@media (min-width: 640px) {
  .ucl-shop-root .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .ucl-shop-root .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .ucl-shop-root .sm\:flex-row { flex-direction: row; }
  .ucl-shop-root .sm\:w-\[45\%\] { width: 45%; }
  .ucl-shop-root .sm\:basis-1\/2 { flex-basis: 50%; }
  .ucl-shop-root .sm\:basis-\[55\%\] { flex-basis: 55%; }
}
@media (min-width: 768px) {
  .ucl-shop-root .md\:flex { display: flex; }
  .ucl-shop-root .md\:flex-col { flex-direction: column; }
  .ucl-shop-root .md\:flex-none { flex: none; }
  .ucl-shop-root .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .ucl-shop-root .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .ucl-shop-root .md\:grid-cols-\[1fr_320px\] { grid-template-columns: 1fr 320px; }
  .ucl-shop-root .md\:grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; }
  .ucl-shop-root .md\:text-3xl { font-size: 1.875rem; }
  .ucl-shop-root .md\:text-4xl { font-size: 2.25rem; }
  .ucl-shop-root .md\:text-5xl { font-size: 3rem; }
  .ucl-shop-root .md\:text-base { font-size: 1rem; }
  .ucl-shop-root .md\:h-80 { height: 20rem; }
  .ucl-shop-root .md\:p-10 { padding: 2.5rem; }
  .ucl-shop-root .md\:p-5 { padding: 1.25rem; }
  .ucl-shop-root .md\:gap-8 { gap: 2rem; }
  .ucl-shop-root .md\:w-56 { width: 14rem; }
  .ucl-shop-root .md\:-mr-4 { margin-right: -1rem; }
  .ucl-shop-root .md\:pr-4 { padding-right: 1rem; }
  .ucl-shop-root .md\:basis-\[45\%\] { flex-basis: 45%; }
}
@media (min-width: 1024px) {
  .ucl-shop-root .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .ucl-shop-root .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .ucl-shop-root .lg\:w-\[32\%\] { width: 32%; }
  .ucl-shop-root .lg\:basis-1\/3 { flex-basis: 33.333333%; }
  .ucl-shop-root .lg\:basis-\[38\%\] { flex-basis: 38%; }
}
@media (min-width: 1280px) {
  .ucl-shop-root .xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.ucl-shop-root .basis-\[85\%\] { flex-basis: 85%; }

/* تم فروشگاه — هم‌تراز با shop-delight-boutique + پالت hex */

.ucl-shop-root {
  --color-green: #00D170;
  --color-blue: #3939E6;
  --color-purple: #7E33CC;
  --color-magenta: #D9004F;
  --color-red: #FF4340;
  --color-yellow: #FFBB00;

  --background: #fafbff;
  --foreground: #1a1a2e;
  --card: #ffffff;
  --primary: #3939E6;
  --primary-foreground: #ffffff;
  --primary-soft: color-mix(in srgb, #3939E6 14%, white);
  --primary-glow: #7E33CC;
  --muted: #f0f2f8;
  --muted-foreground: #5c5c7a;
  --tint-blue: color-mix(in srgb, #3939E6 12%, white);
  --tint-mint: color-mix(in srgb, #00D170 12%, white);
  --tint-pink: color-mix(in srgb, #D9004F 10%, white);
  --destructive: #FF4340;
  --border: #e4e6ef;
  --radius: 0.625rem;
}

/* گرادیان هیرو */
.ucl-shop-root .via-background {
  --tw-gradient-via: var(--background);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}

.ucl-shop-root .bg-gradient-to-br.from-primary-soft.via-background.to-tint-blue,
.ucl-shop-root .from-primary-soft.via-background.to-tint-blue {
  --tw-gradient-from: var(--primary-soft);
  --tw-gradient-via: var(--background);
  --tw-gradient-to: var(--tint-blue);
  background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to));
}

/* پنل کاروسل هیرو */
#ucl-shop-root .ucl-hero-carousel-panel {
  background: color-mix(in srgb, var(--card) 60%, transparent);
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
}

/* اسکرول کارت‌ها */
#ucl-shop-root .ucl-card-scroll {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 35%, transparent) transparent;
}

#ucl-shop-root .ucl-card-scroll::-webkit-scrollbar {
  height: 6px;
}

#ucl-shop-root .ucl-card-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 9999px;
}

/* کاروسل */
#ucl-shop-root .ucl-carousel-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--primary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

#ucl-shop-root .ucl-carousel-btn:hover:not(:disabled) {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

#ucl-shop-root .ucl-carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

#ucl-shop-root .ucl-carousel-btn.static {
  position: static;
  transform: none;
  width: 2.25rem;
  height: 2.25rem;
}

/* کاروسل هیرو */
#ucl-shop-root .ucl-embla-track {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0 0.5rem;
  margin-right: -0.75rem;
  padding-right: 0.75rem;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x;
}

#ucl-shop-root .ucl-embla-track--dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

#ucl-shop-root .ucl-embla-track::-webkit-scrollbar {
  display: none;
}

#ucl-shop-root .ucl-embla-slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 0;
  padding-right: 0.75rem;
}

#ucl-shop-root .ucl-embla-slide.ucl-slide--package {
  width: 100%;
}

#ucl-shop-root .ucl-embla-slide.ucl-slide--card {
  width: 85%;
}

#ucl-shop-root .ucl-embla-slide.ucl-slide--physical {
  width: 100%;
}

@media (min-width: 640px) {
  #ucl-shop-root .ucl-embla-slide.ucl-slide--package { width: 50%; }
  #ucl-shop-root .ucl-embla-slide.ucl-slide--card { width: 55%; }
  #ucl-shop-root .ucl-embla-slide.ucl-slide--physical { width: 50%; }
}

@media (min-width: 768px) {
  #ucl-shop-root .ucl-embla-slide.ucl-slide--card { width: 45%; }
}

@media (min-width: 1024px) {
  #ucl-shop-root .ucl-embla-slide.ucl-slide--package { width: 33.333%; }
  #ucl-shop-root .ucl-embla-slide.ucl-slide--card { width: 38%; }
  #ucl-shop-root .ucl-embla-slide.ucl-slide--physical { width: 33.333%; }
}

@media (min-width: 768px) {
  #ucl-shop-root .ucl-embla-track {
    margin-right: -1rem;
    padding-right: 1rem;
    gap: 1rem;
  }
  #ucl-shop-root .ucl-embla-slide { padding-right: 1rem; }
}

.ucl-shop-root .hover\:bg-primary-glow:hover {
  background: var(--primary-glow);
}

.ucl-shop-root .bg-tint-pink {
  background: var(--tint-pink);
}

.ucl-shop-root .text-primary-foreground\/70 {
  color: color-mix(in srgb, var(--primary-foreground) 70%, transparent);
}

.ucl-shop-root .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;
}

/**
 * جداسازی فروشگاه از استایل قالب وردپرس / ووکامرس
 * با specificity بالا (#ucl-shop-root)
 */

#ucl-shop-root.ucl-shop-root {
  isolation: isolate;
  position: relative;
  z-index: 1;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: system-ui, Tahoma, sans-serif !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  line-height: 1.55 !important;
  box-sizing: border-box;
}

/* قالب اغلب روی .entry-content محدودیت می‌گذارد */
.entry-content #ucl-shop-root.ucl-shop-root,
.site-main #ucl-shop-root.ucl-shop-root,
.woocommerce #ucl-shop-root.ucl-shop-root {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#ucl-shop-root.ucl-shop-root *,
#ucl-shop-root.ucl-shop-root *::before,
#ucl-shop-root.ucl-shop-root *::after {
  box-sizing: border-box;
}

#ucl-shop-root.ucl-shop-root :is(h1, h2, h3, h4, h5, h6) {
  font-family: inherit !important;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

#ucl-shop-root.ucl-shop-root p {
  margin: 0;
}

#ucl-shop-root.ucl-shop-root a,
#ucl-shop-root.ucl-shop-root a:hover,
#ucl-shop-root.ucl-shop-root a:focus {
  color: inherit;
  text-decoration: none;
  box-shadow: none;
}

#ucl-shop-root.ucl-shop-root button,
#ucl-shop-root.ucl-shop-root input,
#ucl-shop-root.ucl-shop-root select,
#ucl-shop-root.ucl-shop-root textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  margin: 0;
  appearance: none;
}

#ucl-shop-root.ucl-shop-root button {
  cursor: pointer;
}

/* دکمه‌های دارای کلاس استایل فروشگاه */
#ucl-shop-root.ucl-shop-root button.rounded-full,
#ucl-shop-root.ucl-shop-root button.rounded-2xl,
#ucl-shop-root.ucl-shop-root button.border {
  border-style: solid;
}

#ucl-shop-root.ucl-shop-root ul,
#ucl-shop-root.ucl-shop-root ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

#ucl-shop-root.ucl-shop-root img,
#ucl-shop-root.ucl-shop-root svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

#ucl-shop-root.ucl-shop-root table {
  border-collapse: collapse;
}

/* کلاس‌های چیدمان — اولویت بالاتر از قالب */
#ucl-shop-root.ucl-shop-root .flex {
  display: flex !important;
}

#ucl-shop-root.ucl-shop-root .inline-flex {
  display: inline-flex !important;
}

#ucl-shop-root.ucl-shop-root .grid {
  display: grid !important;
}

#ucl-shop-root.ucl-shop-root .hidden {
  display: none !important;
}

#ucl-shop-root.ucl-shop-root .block {
  display: block !important;
}

#ucl-shop-root.ucl-shop-root .inline-block {
  display: inline-block !important;
}

#ucl-shop-root.ucl-shop-root .flex-col {
  flex-direction: column !important;
}

#ucl-shop-root.ucl-shop-root .flex-1 {
  flex: 1 1 0% !important;
}

#ucl-shop-root.ucl-shop-root .shrink-0 {
  flex-shrink: 0 !important;
}

#ucl-shop-root.ucl-shop-root .items-center {
  align-items: center !important;
}

#ucl-shop-root.ucl-shop-root .items-start {
  align-items: flex-start !important;
}

#ucl-shop-root.ucl-shop-root .items-end {
  align-items: flex-end !important;
}

#ucl-shop-root.ucl-shop-root .justify-center {
  justify-content: center !important;
}

#ucl-shop-root.ucl-shop-root .justify-between {
  justify-content: space-between !important;
}

#ucl-shop-root.ucl-shop-root .relative {
  position: relative !important;
}

#ucl-shop-root.ucl-shop-root .absolute {
  position: absolute !important;
}

#ucl-shop-root.ucl-shop-root .fixed {
  position: fixed !important;
}

#ucl-shop-root.ucl-shop-root .sticky {
  position: sticky !important;
}

#ucl-shop-root.ucl-shop-root .w-full {
  width: 100% !important;
}

#ucl-shop-root.ucl-shop-root .min-w-0 {
  min-width: 0 !important;
}

#ucl-shop-root.ucl-shop-root .overflow-hidden {
  overflow: hidden !important;
}

#ucl-shop-root.ucl-shop-root .overflow-x-auto {
  overflow-x: auto !important;
}

#ucl-shop-root.ucl-shop-root .text-right {
  text-align: right !important;
}

#ucl-shop-root.ucl-shop-root .text-center {
  text-align: center !important;
}

/* دکمه‌های واقعی فروشگاه */
#ucl-shop-root.ucl-shop-root .bg-primary {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

#ucl-shop-root.ucl-shop-root .bg-card {
  background: var(--card) !important;
}

#ucl-shop-root.ucl-shop-root .border {
  border: 1px solid var(--border) !important;
}

#ucl-shop-root.ucl-shop-root .rounded-full {
  border-radius: 9999px !important;
}

#ucl-shop-root.ucl-shop-root .rounded-2xl {
  border-radius: 1rem !important;
}

#ucl-shop-root.ucl-shop-root .rounded-3xl {
  border-radius: 1.5rem !important;
}