:root:root{--border-interactive:rgb(var(--primary-900));--fg-interactive:rgb(var(--primary-900));--fg-interactive-hover:rgb(var(--primary-900));--bg-interactive:rgb(var(--primary-900));--borders-interactive-with-active:0px 0px 0px 1px rgb(var(--primary-900)),0px 0px 0px 4px rgb(var(--primary-900)/0.2);--borders-interactive-with-focus:0px 1px 2px 0px rgb(var(--primary-900)/0.5),0px 0px 0px 1px rgb(var(--primary-900)),0px 0px 0px 2px rgb(255 255 255),0px 0px 0px 4px rgb(var(--primary-900)/0.6);--borders-interactive-with-shadow:0px 1px 2px 0px rgb(var(--primary-900)/0.5),0px 0px 0px 1px rgb(var(--primary-900));--details-contrast-on-bg-interactive:0px 1px 2px 0px rgb(var(--primary-900)/0.6)}
/* !important is required because the Tailwind JIT generates an           */:root:root input,:root:root label,:root:root select,:root:root textarea{font-family:var(--font-sans)!important}:root{--color-primary:var(--primary-900);--color-primary-hover:var(--primary-800)}[dir=rtl] .font-display{font-family:var(--font-cairo,"Cairo",sans-serif)}.text-large-semi,h1.font-black.text-gray-900,h3.font-black.text-gray-900{font-family:var(--font-display)}@media (hover:hover) and (pointer:fine){.group\/card:hover .product-card-hover-image{opacity:1}}