:root {
    --led-primary: var(--accent);
    --led-glow-soft: rgba(74, 183, 195, .16);
    --led-glow-medium: rgba(74, 183, 195, .28);
    --motion-duration-fast: 280ms;
    --motion-duration: 520ms;
    --motion-duration-slow: 680ms;
    --motion-ease: cubic-bezier(.22, .61, .36, 1);
}

body { overflow-x: clip; }

/* Tabler icon sizing */
.ti { flex: 0 0 auto; color: currentColor; line-height: 1; }
.icon-xs { font-size: 14px; }
.icon-sm { font-size: 18px; }
.icon-md { font-size: 23px; }
.icon-lg { font-size: 31px; }

/* Uniform buttons and focus treatment */
.button,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-icon {
    transition: color var(--motion-duration-fast) ease,
        background-color var(--motion-duration-fast) ease,
        border-color var(--motion-duration-fast) ease,
        box-shadow var(--motion-duration-fast) ease,
        transform var(--motion-duration-fast) var(--motion-ease);
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-primary:hover { box-shadow: 0 11px 26px rgba(30, 55, 103, .24), 0 0 20px var(--led-glow-soft); }
.button .button-arrow { transition: transform var(--motion-duration-fast) var(--motion-ease); }
.button:hover .button-arrow,
.add-to-cart-button:hover .button-arrow { transform: translateX(3px); }
.text-link .ti { margin-left: 7px; color: var(--accent-dark); transition: transform 220ms var(--motion-ease); }
.text-link:hover .ti { transform: translateX(4px); }
.button:focus-visible,
.btn-icon:focus-visible,
.icon-button:focus-visible,
.add-button:focus-visible { outline: 3px solid var(--led-primary); outline-offset: 3px; }

/* Reusable reveal system */
html.motion-ready .reveal,
html.motion-ready .reveal-up,
html.motion-ready .reveal-left,
html.motion-ready .reveal-right,
html.motion-ready .reveal-scale {
    opacity: 0;
    transition: opacity var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration) var(--motion-ease);
    transition-delay: calc(var(--stagger-index, 0) * 65ms);
}
html.motion-ready .reveal,
html.motion-ready .reveal-up { transform: translate3d(0, 20px, 0); }
html.motion-ready .reveal-left { transform: translate3d(-22px, 0, 0); }
html.motion-ready .reveal-right { transform: translate3d(0, 20px, 0); }
html.motion-ready .reveal-scale { transform: scale(.985); }
html.motion-ready .is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Header and LED navigation */
.site-header {
    transition: background-color var(--motion-duration-fast) ease,
        box-shadow var(--motion-duration-fast) ease,
        backdrop-filter var(--motion-duration-fast) ease;
}
.header-main,
.nav-track { transition: min-height var(--motion-duration-fast) var(--motion-ease), height var(--motion-duration-fast) var(--motion-ease); }
.site-header.is-scrolled {
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 30px rgba(16, 33, 63, .08);
    backdrop-filter: blur(14px) saturate(135%);
}
.site-header.is-scrolled .header-main { min-height: 70px; }
.site-header.is-scrolled .nav-track { height: 42px; }
.header-promise > .ti,
.header-contact > .ti { color: var(--primary-600); }
.nav-track a {
    position: relative;
    isolation: isolate;
}
.nav-track a::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: #9cecf1;
    box-shadow: 0 0 8px rgba(156, 236, 241, .62);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 300ms var(--motion-ease);
}
.nav-track a:hover::after,
.nav-track a:focus-visible::after { transform: scaleX(1); }
.nav-track a.active::after { opacity: .65; transform: scaleX(.72); }
.nav-track a:focus-visible { outline-color: #9cecf1; outline-offset: -4px; }
.menu-toggle { color: var(--primary-900); }
.drawer-support a { display: inline-flex; align-items: center; gap: 6px; }

/* Reusable light accent */
.led-hover { position: relative; isolation: isolate; }
.led-hover::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 16%;
    right: 16%;
    bottom: -1px;
    height: 1px;
    border-radius: 999px;
    background: var(--led-primary);
    box-shadow: 0 0 9px var(--led-glow-medium);
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity var(--motion-duration-fast) ease, transform var(--motion-duration-fast) var(--motion-ease);
}
.led-hover:hover::after,
.led-hover:focus-visible::after { opacity: .75; transform: scaleX(1); }

/* Hero sequence and restrained parallax */
.hero { position: relative; isolation: isolate; --hero-bg-y: 0px; --hero-stage-y: 0px; }
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -80px -10% 35%;
    background: radial-gradient(circle at 72% 46%, var(--led-glow-medium), transparent 34%);
    transform: translate3d(0, var(--hero-bg-y), 0);
    will-change: transform;
}
.hero-stage {
    transform: translate3d(0, var(--hero-stage-y), 0);
    transition: opacity var(--motion-duration-slow) var(--motion-ease),
        transform 80ms linear;
    will-change: transform;
}
.hero-facts > div > .ti { color: #72cad2; }
html.motion-ready .hero-copy .hero-sequence,
html.motion-ready .hero:not(.hero-ready) .hero-stage.hero-sequence {
    opacity: 0;
}
html.motion-ready .hero-copy .hero-sequence {
    transform: translate3d(0, 14px, 0);
}
html.motion-ready .hero.hero-ready .hero-copy .hero-sequence {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 520ms var(--motion-ease), transform 520ms var(--motion-ease);
    transition-delay: calc(var(--hero-index, 0) * 85ms);
}
html.motion-ready .hero.hero-ready .hero-stage.hero-sequence {
    opacity: 1;
    transition-delay: calc(var(--hero-index, 0) * 75ms);
}

/* Categories and product cards */
.category-card::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 42%;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--led-primary), transparent);
    opacity: .38;
    transform: scaleX(.62);
    transform-origin: left;
    transition: opacity 350ms ease, transform 350ms var(--motion-ease);
}
.category-card:hover::before { opacity: .78; transform: scaleX(1); }
.category-icon::before,
.category-icon::after { content: none; }
.category-icon .ti {
    position: static;
    border: 0;
    color: var(--primary-700);
    font-size: 32px;
    transition: color 300ms ease, transform 300ms var(--motion-ease), filter 300ms ease;
}
.category-card:hover .category-icon .ti { color: var(--accent-dark); transform: scale(1.03); filter: drop-shadow(0 0 8px var(--led-glow-medium)); }
.category-arrow { position: absolute; top: 15px; right: 15px; color: #9da7b4; transition: color 250ms ease, transform 250ms var(--motion-ease); }
.category-card:hover .category-arrow { color: var(--accent-dark); transform: translate3d(2px, -2px, 0); }

.product-card { position: relative; }
.product-card::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: -45%;
    width: 42%;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, #8de5eb, transparent);
    box-shadow: 0 0 9px var(--led-glow-medium);
    opacity: 0;
    pointer-events: none;
}
@media (hover: hover) {
    .product-card:hover::before { animation: led-card-sweep 540ms var(--motion-ease) both; }
    .product-card:hover .product-photo { transform: scale(1.025); }
}
@keyframes led-card-sweep {
    0% { left: -45%; opacity: 0; }
    16% { opacity: .85; }
    100% { left: 103%; opacity: 0; }
}
.product-card .product-photo { transition: transform 350ms var(--motion-ease); }
.product-badge { transition: color 300ms ease, box-shadow 300ms ease; }
.product-card:hover .product-badge { color: var(--accent-dark); box-shadow: 0 4px 16px var(--led-glow-soft); }
.add-button { display: grid; place-items: center; transition: background-color 260ms ease, box-shadow 260ms ease, transform 260ms var(--motion-ease); }
.add-button:hover { box-shadow: 0 7px 18px rgba(30, 55, 103, .2), 0 0 14px var(--led-glow-soft); transform: translateY(-1px); }
.add-button:active { transform: translateY(0); }
.process-icon > .ti {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    color: var(--primary-600);
    transform: none;
}
.trust-item > .ti { color: #7dd1d8; }
.support-card > .ti { color: var(--accent-dark); }

/* Product detail feedback */
.gallery-thumb { transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--motion-ease); }
.marketplace-gallery .gallery-thumb:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(16, 33, 63, .09); }
.marketplace-gallery .gallery-thumb.active { box-shadow: 0 0 0 2px rgba(74, 183, 195, .15), 0 0 18px var(--led-glow-soft); }
.gallery-image-swap { animation: gallery-crossfade 260ms var(--motion-ease); }
@keyframes gallery-crossfade {
    0% { opacity: .28; transform: translate3d(0, 3px, 0) scale(.992); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.variant-options span { transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--motion-ease); }
.variant-options label:hover span { border-color: #aebfd6; transform: translateY(-1px); }
.variant-options input:focus-visible + span { outline: 3px solid var(--led-primary); outline-offset: 2px; }
.variant-options input:checked + span { box-shadow: 0 0 0 1px var(--primary-700), 0 0 16px var(--led-glow-soft); }
.price-updated { animation: price-change 260ms var(--motion-ease); }
@keyframes price-change {
    0% { opacity: .25; transform: translate3d(0, 4px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
.add-to-cart-button.is-added { color: var(--white); background: var(--success); box-shadow: 0 9px 22px rgba(35, 134, 54, .2); }

/* Cart, checkout and confirmation */
.cart-link.cart-updated b { animation: cart-badge-premium 360ms var(--motion-ease); }
@keyframes cart-badge-premium { 50% { transform: scale(1.15); } }
.cart-item { transition: opacity 240ms ease, transform 240ms var(--motion-ease); }
.text-button { display: inline-flex; align-items: center; gap: 5px; }
.cart-empty > .ti,
.empty-state > .ti { color: var(--primary-500); font-size: 44px; }
.cart-item-actions label button { display: inline-flex; align-items: center; gap: 4px; }
.checkout-form,
.order-summary { transition-delay: 0ms; }
.checkout-form legend { display: inline-flex; align-items: center; gap: 7px; }
.checkout-form input,
.checkout-form textarea,
.checkout-form select {
    transition: border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
.checkout-form input:focus,
.checkout-form textarea:focus,
.checkout-form select:focus {
    border-color: var(--primary-500);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-100), 0 0 14px var(--led-glow-soft);
}
.check-control input { transition: transform 180ms var(--motion-ease); }
.check-control input:checked { transform: scale(1.04); }
.payment-placeholder > .ti,
.embedded-checkout-heading > .ti,
.stripe-payment-card > .ti { color: var(--primary-600); }
.confirmation-icon { animation: confirmation-check 480ms var(--motion-ease) both; }
.confirmation-folio { animation: confirmation-folio 520ms 100ms var(--motion-ease) both; }
@keyframes confirmation-check {
    from { opacity: 0; transform: scale(.8); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes confirmation-folio {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.next-step > .ti { color: var(--primary-600); }

/* Footer and floating WhatsApp */
.footer-column a { transition: color 220ms ease, transform 220ms var(--motion-ease), text-decoration-color 220ms ease; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.footer-column a:hover { text-decoration-color: currentColor; transform: translateY(-1px); }
.footer-contact a,
.footer-contact > span { display: flex; align-items: center; gap: 7px; }
.footer-contact a:hover .ti { color: var(--led-primary); filter: drop-shadow(0 0 5px var(--led-glow-medium)); transform: translateY(-2px); }
.footer-contact .ti { transition: color 220ms ease, filter 220ms ease, transform 220ms var(--motion-ease); }
.whatsapp-float {
    position: fixed;
    z-index: 140;
    right: max(24px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    color: #fff;
    background: #25d366;
    box-shadow: 0 11px 28px rgba(20, 104, 53, .24);
    transition: transform var(--motion-duration-fast) var(--motion-ease), box-shadow var(--motion-duration-fast) ease, filter var(--motion-duration-fast) ease;
}
.whatsapp-float span {
    position: absolute;
    right: calc(100% + 12px);
    width: max-content;
    max-width: 230px;
    padding: 8px 11px;
    border-radius: 7px;
    color: var(--white);
    background: var(--primary-900);
    box-shadow: var(--shadow);
    font-size: 10px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(6px, 0, 0);
    transition: opacity 220ms ease, transform 220ms var(--motion-ease);
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 32px rgba(20, 104, 53, .3), 0 0 18px rgba(37, 211, 102, .25); }
.whatsapp-float:hover span,
.whatsapp-float:focus-visible span { opacity: 1; transform: translate3d(0, 0, 0); }

/* Mobile restraint */
@media (max-width: 900px) {
    .site-header.is-scrolled .header-main { min-height: 60px; }
    .hero::before { transform: none; }
    .hero-stage { transform: none; will-change: auto; }
    .mobile-drawer { transition-duration: 280ms; transition-timing-function: var(--motion-ease); }
    .drawer-backdrop { transition: opacity 240ms ease; }
    .whatsapp-float {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));
        width: 50px;
        height: 50px;
    }
    .whatsapp-float span { display: none; }
}

@media (max-width: 650px) {
    html.motion-ready .reveal-left,
    html.motion-ready .reveal-right { transform: translate3d(0, 14px, 0); }
    .category-card:hover,
    .product-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal,
    .reveal-up,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .hero-sequence,
    .confirmation-icon,
    .confirmation-folio {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    .hero::before,
    .hero-stage { transform: none !important; will-change: auto; }
    .product-card::before { display: none; }
    .gallery-image-swap,
    .price-updated,
    .cart-link.cart-updated b { animation: none !important; }
    .whatsapp-float:hover,
    .whatsapp-float:focus-visible { transform: none; }
}