/* =========================================================
   SAI GRAPHIC DESIGNS — 10/10 FOUNDATION
   Sprint 1: shared visual system, accessibility and mobile polish.
========================================================= */
:root{--sai-primary:var(--primary,#10b981);--sai-primary-dark:#059669;--sai-accent:#ffc400;--sai-ink:var(--dark,#111827);--sai-copy:var(--dark-muted,#4b5563);--sai-border:var(--border,#e5e7eb);--sai-surface:#fff;--sai-soft:#f8fafc;--sai-radius-sm:12px;--sai-radius:18px;--sai-radius-lg:26px;--sai-shadow-sm:0 10px 28px rgba(17,24,39,.07);--sai-shadow:0 22px 58px rgba(17,24,39,.11);--sai-focus:0 0 0 4px rgba(16,185,129,.16)}
.sai-account-action{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 15px;overflow:hidden;border:1px solid rgba(255,255,255,.78);border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(209,250,229,.46));box-shadow:0 8px 20px rgba(5,150,105,.12),inset 0 1px 0 rgba(255,255,255,.92);color:#065f46!important;font-size:.9rem;font-weight:800;text-decoration:none;backdrop-filter:blur(15px) saturate(145%);-webkit-backdrop-filter:blur(15px) saturate(145%);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.sai-account-action::before{content:"";position:absolute;z-index:-1;inset:1px;border-radius:12px;background:linear-gradient(115deg,rgba(255,255,255,.85),rgba(255,255,255,.08) 38%,rgba(110,231,183,.32) 100%);pointer-events:none}.sai-account-action::after{content:"";position:absolute;top:-85%;left:-42%;width:46%;height:260%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transition:left .48s ease;pointer-events:none}.sai-account-action:hover{transform:translateY(-2px);border-color:rgba(16,185,129,.5);box-shadow:0 13px 26px rgba(5,150,105,.2),inset 0 1px 0 rgba(255,255,255,.96)}.sai-account-action:hover::after{left:112%}.sai-account-action:active{transform:translateY(0) scale(.98)}.sai-account-action>span{position:relative;z-index:1}.sai-account-action>span:first-child{font-size:1.05rem;filter:drop-shadow(0 1px 1px rgba(255,255,255,.7))}
html{scroll-behavior:smooth;scroll-padding-top:88px}body{overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}img,svg,video{max-width:100%}:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:3px solid rgba(16,185,129,.45)!important;outline-offset:3px!important}:where(button,.btn,.btn-primary,.btn-secondary,.primary-btn,.secondary-btn,.hero-btn,.cta-button,.submit-btn,.add-service-btn,.add-to-cart,.add-cart-btn,.preview-btn,.view-btn,.cart-checkout,.checkout-btn){min-height:44px;border-radius:12px}.site-header,header.header,body>header{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.nav-link{border-radius:10px;transition:color .2s ease,background-color .2s ease,transform .2s ease}.nav-link:hover{transform:translateY(-1px)}:where(.service-card,.product-card,.feature-card,.value-card,.stat-card,.testimonial-card,.contact-info-card,.contact-form-card,.info-card,.about-card){border-radius:var(--sai-radius)!important;border-color:var(--sai-border)!important}:where(.service-card,.product-card,.feature-card,.value-card,.testimonial-card){transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s ease,border-color .24s ease!important}:where(.service-card,.product-card,.feature-card,.value-card,.testimonial-card):hover{transform:translateY(-5px);box-shadow:var(--sai-shadow)!important}:where(.hero-content h1,.page-hero h1,.shop-hero h1,.customizer-hero h1,.contact-hero h1,.about-hero h1){text-wrap:balance;letter-spacing:-.045em;line-height:1.06}:where(.section-title,.section-header h2){text-wrap:balance;letter-spacing:-.035em;line-height:1.12}:where(.hero-content p,.page-hero p,.section-description,.section-header p){text-wrap:pretty}:where(.btn-primary,.primary-btn,.cta-button,.submit-btn,.cart-checkout,.checkout-btn){box-shadow:0 10px 24px rgba(16,185,129,.18)}:where(.btn-primary,.primary-btn,.cta-button,.submit-btn,.cart-checkout,.checkout-btn):hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 30px rgba(16,185,129,.24)}:where(button,a,input,textarea,select){-webkit-tap-highlight-color:transparent}:where(input,textarea,select,.form-control){min-height:44px;border-radius:var(--sai-radius-sm)!important}:where(input,textarea,select,.form-control):focus{box-shadow:var(--sai-focus)!important}textarea{min-height:130px;resize:vertical}.shop-filters,#shopFilters{gap:9px!important}.shop-filter{min-height:44px!important;border-radius:999px!important}.product-card{overflow:hidden}.product-preview img{display:block;width:100%;height:100%;object-fit:cover}.cart-drawer{max-width:100vw}.cart-close,.cart-remove,.cart-icon-btn{min-width:44px;min-height:44px}.faq-question{min-height:52px}.site-footer a,footer a{text-underline-offset:3px}
@media(max-width:900px){html{scroll-padding-top:76px}:where(.header-container,.nav-container){min-height:72px}:where(.hero,.hero-section,.page-hero,.shop-hero,.customizer-hero,.contact-hero,.about-hero){min-height:auto!important}.shop-filters,#shopFilters{justify-content:flex-start!important;flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:4px 2px 8px!important;scroll-snap-type:inline proximity}.shop-filters::-webkit-scrollbar,#shopFilters::-webkit-scrollbar{display:none}.shop-filter{flex:0 0 auto;scroll-snap-align:start}}
@media(max-width:640px){:where(.hero,.hero-section,.page-hero,.shop-hero,.customizer-hero,.contact-hero,.about-hero){padding-top:44px!important;padding-bottom:44px!important}:where(.hero-content h1,.page-hero h1,.shop-hero h1,.customizer-hero h1,.contact-hero h1,.about-hero h1){font-size:clamp(2rem,10vw,3rem)!important}:where(.service-card,.product-card,.feature-card,.value-card,.testimonial-card,.contact-info-card,.contact-form-card){border-radius:15px!important}.cart-drawer{width:min(100%,430px)!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media(max-width:780px){.sai-account-action{min-width:44px;padding:0 12px}.sai-account-action .sai-account-label{display:none}.sai-account-action .sai-account-icon{margin:0}.nav-actions{gap:8px!important}}

/* Mobile quick-ball navigation trigger */
@media(max-width:768px){.mobile-menu-btn.sai-quick-menu-ball{position:fixed!important;top:86px!important;right:14px!important;width:54px!important;height:54px!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border:2px solid rgba(126,209,178,.9)!important;border-radius:50%!important;background:linear-gradient(145deg,#0f2a3c,#2f6f86)!important;color:#fff!important;font-size:25px!important;line-height:1!important;box-shadow:0 12px 28px rgba(15,42,60,.28),inset 0 1px 0 rgba(255,255,255,.25)!important;z-index:100006!important;transition:transform .2s ease,box-shadow .2s ease!important}.mobile-menu-btn.sai-quick-menu-ball:active{transform:scale(.92)!important}.mobile-menu-btn.sai-quick-menu-ball[aria-expanded="true"]{background:linear-gradient(145deg,#2f6f86,#0f2a3c)!important;box-shadow:0 14px 32px rgba(47,111,134,.36),0 0 0 5px rgba(126,209,178,.2)!important}}

@keyframes sai-quick-ball-icon{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.12) rotate(8deg)}}
@media(max-width:768px){.mobile-menu-btn.sai-quick-menu-ball{font-size:0!important}.mobile-menu-btn.sai-quick-menu-ball::before{content:"☰";display:block;color:#fff;font-size:25px;line-height:1;animation:sai-quick-ball-icon 1.8s ease-in-out infinite}.mobile-menu-btn.sai-quick-menu-ball[aria-expanded="true"]::before{content:"✕";animation:none;font-size:22px}}

/* Keep the menu icon visible inside the quick ball. */
@media(max-width:768px){.mobile-menu-btn.sai-quick-menu-ball::before{content:"☰"!important;position:relative!important;z-index:2!important;display:grid!important;place-items:center!important;width:100%!important;height:100%!important;opacity:1!important;visibility:visible!important;color:#fff!important;font-family:Arial,sans-serif!important;font-size:15px!important;font-weight:900!important;letter-spacing:-1px!important;text-shadow:0 1px 2px rgba(0,0,0,.22)!important}.mobile-menu-btn.sai-quick-menu-ball::after{content:none!important}.mobile-menu-btn.sai-quick-menu-ball[aria-expanded="true"]::before{content:"✕"!important;font-size:22px!important;letter-spacing:0!important}}

/* Refined quick-ball: clean, readable and aligned with the mobile header. */
@media(max-width:768px){.mobile-menu-btn.sai-quick-menu-ball{top:84px!important;right:14px!important;width:50px!important;height:50px!important;border:1px solid rgba(126,209,178,.95)!important;background:rgba(255,255,255,.96)!important;color:#0f2a3c!important;box-shadow:0 10px 24px rgba(15,42,60,.16),inset 0 1px 0 #fff!important}.mobile-menu-btn.sai-quick-menu-ball::before{content:"☰"!important;color:#0f2a3c!important;font-size:24px!important;font-weight:800!important;letter-spacing:0!important;text-shadow:none!important;animation:none!important}.mobile-menu-btn.sai-quick-menu-ball::after{content:none!important;display:none!important;background:none!important;box-shadow:none!important}.mobile-menu-btn.sai-quick-menu-ball[aria-expanded="true"]{background:#0f2a3c!important;border-color:#0f2a3c!important;box-shadow:0 12px 28px rgba(15,42,60,.26)!important}.mobile-menu-btn.sai-quick-menu-ball[aria-expanded="true"]::before{content:"✕"!important;color:#fff!important;font-size:21px!important}}

/* Use the real button label: prevents pseudo-icon conflicts and removes stray dots. */
@media(max-width:768px){.mobile-menu-btn.sai-quick-menu-ball{font-size:24px!important;font-weight:800!important;line-height:1!important;text-align:center!important}.mobile-menu-btn.sai-quick-menu-ball::before,.mobile-menu-btn.sai-quick-menu-ball::after{content:none!important;display:none!important;animation:none!important;background:none!important;box-shadow:none!important}.mobile-menu-btn.sai-quick-menu-ball[aria-expanded="true"]{color:#fff!important}.mobile-menu-btn.sai-quick-menu-ball[aria-expanded="true"]::before,.mobile-menu-btn.sai-quick-menu-ball[aria-expanded="true"]::after{content:none!important;display:none!important}}