html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body {
    font-family: 'Inter', sans-serif;
}

.font-orbitron {
    font-family: 'Orbitron', sans-serif;
}

/* Page container (complements Tailwind container) */
.site-container { max-width: 1240px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }

/* Glassmorphism for Navbar */
#main-header.scrolled {
    background-color: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Header/logo */
#main-header { background: linear-gradient(180deg, rgba(6,10,14,0.3), rgba(3,6,10,0.15)); }
#main-header a { color: #e6eef9; }
#main-header .font-orbitron a { letter-spacing: .06em; }

/* Reveal helper */
.reveal {
    will-change: transform, opacity;
    opacity: 0;
    transform: translateY(12px);
}

/* Product card styles */
.product-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius: 12px;
    padding: 12px;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms;
    transform-origin: center center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.product-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.product-card .product-image {
    border-radius: 8px;
    overflow: hidden;
}

/* Product badges and pricing */
.product-card .badge {
    position: absolute; top: 12px; right: 12px; z-index: 30;
    background: linear-gradient(90deg,#06b6d4,#2dd4bf); color: #04263a; font-weight: 700;
    padding: 6px 10px; border-radius: 999px; font-size: 12px; box-shadow: 0 6px 16px rgba(2,6,23,0.45);
}
.product-card .badge.out { background: linear-gradient(90deg,#ef4444,#f97316); color: #fff; }

.product-card .price { margin-top: .5rem; font-weight: 700; color: #e6f9ff; }
.product-card .price .old { text-decoration: line-through; color: rgba(255,255,255,0.35); font-weight: 600; margin-right: .5rem; }

/* Hover actions */
.product-card { position: relative; overflow: visible; }
.product-card .actions { position: absolute; inset: auto 12px 12px 12px; display:flex; gap:8px; justify-content:space-between; opacity:0; transform: translateY(8px); transition: all .22s ease; }
.product-card:hover .actions { opacity: 1; transform: translateY(0); }
.product-card .actions a { padding: .5rem .8rem; border-radius: 10px; background: rgba(255,255,255,0.04); color: #e6f9ff; font-weight:600; }

.product-card .meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Swiper slide tweaks */
.featured-swiper .swiper-slide { display: flex; }
.featured-swiper .product-card { width: 100%; }
.swiper-button-prev, .swiper-button-next { color: #e6f9ff; }
.swiper-pagination-bullet { background: rgba(255,255,255,0.16); }
.swiper-pagination-bullet-active { background: #06b6d4; }

/* Hero Three canvas container */
#hero-three {
    width: 100%;
    height: 420px;
    position: relative;
    overflow: hidden;
}
#hero-three canvas { width:100%; height:100%; display:block; }

/* Fullscreen hero */
#hero-three-fullscreen {
    width: 100%;
    height: 88vh;
    min-height: 620px;
    position: relative;
    overflow: hidden;
}
#hero-three-fullscreen canvas { width:100%; height:100%; display:block; }

/* Reduced motion: simple static fallback and disable transitions */
@media (prefers-reduced-motion: reduce) {
    .reveal { transition: none !important; transform: none !important; opacity: 1 !important; }
    .product-card { transition: none !important; transform: none !important; }
}

/* Small visual tweaks */
.hero-overlay-gradient {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
    background: linear-gradient(180deg, rgba(3,7,18,0.12) 0%, rgba(1,10,16,0.18) 70%);
}

/* Buttons — base size bumped up for comfortable tap targets */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border-radius: 999px;
    padding: .8rem 1.5rem;
    font-size: .9375rem;   /* 15px */
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.btn-primary {
    background: linear-gradient(90deg,#2dd4bf,#06b6d4);
    color: #04263a;
    box-shadow: 0 10px 30px rgba(6,182,212,0.12);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(6,182,212,0.2); }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #e6eef9; }
.btn-ghost:hover { background: rgba(255,255,255,0.06); }

/* Global button size upgrade — catches every inline Tailwind-styled button/link
   across product cards, wishlist, compare, search-results, blog, etc.
   Uses :is() to keep specificity low so individual overrides still win. */
:is(a, button):is(
    [class*="px-4"][class*="py-2"],
    [class*="px-5"][class*="py-2"],
    [class*="px-4"][class*="py-3"]
):not([class*="nav-"]):not([class*="admin-"]):not([class*="block"]):not(input) {
    padding-top:    .65rem  !important;
    padding-bottom: .65rem  !important;
    padding-left:   1.25rem !important;
    padding-right:  1.25rem !important;
    font-size:      .9rem   !important;
    min-height:     2.6rem;
}

/* Public-facing standalone action buttons get a slightly bigger boost */
.product-card .actions a,
.product-card .actions button {
    padding: .55rem 1rem !important;
    font-size: .85rem !important;
}


/* Search suggestions */
#search-suggestions { max-height: 360px; overflow: auto; scrollbar-width: thin; border-radius: 10px; }
#search-suggestions a img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
#search-suggestions .sugg-meta { font-size: 13px; color: #cfeff6; }

/* Cards and panels */
.panel { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius: 14px; padding: 18px; border: 1px solid rgba(255,255,255,0.03); }

/* Footer tweaks */
footer { background: linear-gradient(180deg,#030406,#051017); }

/* Utility spacing */
.section-pad { padding-top: 5rem; padding-bottom: 5rem; }

/* Accessibility focus styles */
a:focus, button:focus, input:focus { outline: 3px solid rgba(2,132,199,0.18); outline-offset: 2px; }
/* Glass‑morphism utility used by preview/download buttons */
.btn-glass {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.24);
  transition: background 0.3s, transform 0.2s;
}
.btn-glass:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

/* ─── Kaito background dissolve fix ────────────────────────────────────────────
   The [data-works-bg] images are fixed-position panels whose opacity is toggled
   by Kaito's JS. Previously the easing came from GSAP animating over the reel
   scroll range (400-600vh). Now that the reel is collapsed we restore the
   soft dissolve entirely through CSS transition so it works regardless of GSAP.
   Using the same easing-2 curve Kaito defines: cubic-bezier(.33,0,.03,.99)     */
[data-works-bg] {
    transition: opacity 0.9s cubic-bezier(0.33, 0, 0.03, 0.99);
}
/* Cross-fades between active/inactive service images also get the dissolve */
[data-service-image] img,
[data-service-image] picture {
    transition: opacity 0.7s cubic-bezier(0.33, 0, 0.03, 0.99);
}

/* Mobile Menu Button visibility override */
#mobile-menu-btn, [data-header-open] {
    display: flex !important;
}
@media (min-width: 1024px) {
    #mobile-menu-btn, [data-header-open] {
        display: none !important;
    }
}