html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    /* Mobile tap responsiveness — eliminates 300ms tap delay */
    a, button, input[type="button"], input[type="submit"], [role="button"], [onclick] { touch-action: manipulation; }
    /* Prevent iOS auto-zoom on input focus (font must be ≥16px) */
    input, select, textarea { font-size: 16px; }
    .reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }
    .reveal-left { opacity:0; transform:translateX(-28px); transition:opacity .65s ease,transform .65s ease; }
    .reveal-left.visible { opacity:1; transform:translateX(0); }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
    @keyframes blob { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%} 50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%} }
    @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    @keyframes pulse-ring { 0%{transform:scale(1);opacity:.8} 70%{transform:scale(1.25);opacity:0} 100%{transform:scale(1.25);opacity:0} }
    .float  { animation:float 3s ease-in-out infinite; }
    .float2 { animation:float 3s ease-in-out 1.4s infinite; }
    .float3 { animation:float 3s ease-in-out 0.7s infinite; }
    .blob  { animation:blob 7s ease-in-out infinite; }
    .blob2 { animation:blob 7s ease-in-out 3.5s infinite; }
    .marquee-track { animation:marquee 22s linear infinite; display:flex; width:max-content; }
    .hero-bg { background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 55%,#3b82f6 100%); }
    .nav-blur { backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
    .cat-card { transition:transform .3s ease,box-shadow .3s ease; }
    .cat-card:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(30,64,175,.15); }
    .prod-card { transition:transform .3s ease,box-shadow .3s ease; }
    .prod-card:hover { transform:translateY(-6px); box-shadow:0 16px 36px rgba(30,64,175,.12); }
    .prod-card .cart-btn-hover { opacity:0; transform:translateY(8px); transition:opacity .28s ease,transform .28s ease; }
    .prod-card:hover .cart-btn-hover { opacity:1; transform:translateY(0); }
    @media (hover: none) { .prod-card .cart-btn-hover { opacity:1; transform:translateY(0); } }
    ::-webkit-scrollbar { width:5px; }
    ::-webkit-scrollbar-track { background:#f0f4ff; }
    ::-webkit-scrollbar-thumb { background:#3b82f6; border-radius:4px; }
    .dots { background-image:radial-gradient(circle,currentColor 1px,transparent 1px); background-size:28px 28px; }
    @keyframes fadeInView     { from{opacity:0;transform:translateY(14px)}  to{opacity:1;transform:translateY(0)} }
    @keyframes fadeInViewBack { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
    @keyframes fadeOutView    { to{opacity:0;transform:translateY(8px)} }
    @keyframes fadeOutViewBack{ to{opacity:0;transform:translateY(-6px)} }
    @keyframes bloomIn        { 0%{opacity:0;transform:scale(.96) translateY(10px);filter:blur(7px)} 55%{filter:blur(0)} 100%{opacity:1;transform:scale(1) translateY(0)} }
    @keyframes bloomOut       { to{opacity:0;transform:scale(1.04);filter:blur(6px)} }
    @keyframes cardPop        { 0%{opacity:0;transform:scale(.86) translateY(22px)} 62%{transform:scale(1.04) translateY(-3px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
    @keyframes iconBounce     { 0%{opacity:0;transform:scale(.35) rotate(-22deg)} 62%{transform:scale(1.2) rotate(7deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }
    @keyframes titleReveal    { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
    /* Pagination */
    .pag-btn { min-width:40px; height:40px; padding:0 12px; border-radius:12px; background:#fff; color:#1e3a8a; font-weight:700; font-size:14px; border:1px solid #dbeafe; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all .18s ease; -webkit-tap-highlight-color:transparent; }
    .pag-btn:hover:not(:disabled) { background:#eff6ff; border-color:#93c5fd; transform:translateY(-1px); box-shadow:0 4px 12px -4px rgba(30,58,138,.25); }
    .pag-btn:disabled { opacity:.35; cursor:not-allowed; }
    .pag-btn.pag-active { background:#1d4ed8; color:#fff; border-color:#1d4ed8; box-shadow:0 6px 14px -4px rgba(29,78,216,.5); }
    .pag-btn.pag-active:hover { background:#1e40af; transform:translateY(-1px); }
    .pag-ellipsis { color:#93c5fd; font-weight:700; padding:0 4px; user-select:none; }
    .view { display:none; }
    .view.active      { display:block; animation:var(--view-anim,fadeInView) .42s cubic-bezier(.22,1,.36,1) both; }
    .view.view-leaving{ display:block !important; animation:var(--view-out-anim,fadeOutView) .22s ease forwards; pointer-events:none; }
    #view-category.active #cat-icon-wrap { animation:iconBounce .58s cubic-bezier(.34,1.56,.64,1) .22s both; }
    #view-category.active #cat-sub       { animation:titleReveal .38s cubic-bezier(.22,1,.36,1) .1s both; }
    #view-category.active #cat-title     { animation:titleReveal .42s cubic-bezier(.22,1,.36,1) .16s both; }
    #view-category.active #cat-desc      { animation:titleReveal .38s cubic-bezier(.22,1,.36,1) .24s both; }
    #toast { transition:opacity .3s,transform .3s; }
    #back-to-top { transition:opacity .35s,transform .35s; }
    .qty-btn { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; cursor:pointer; transition:background .2s; user-select:none; -webkit-tap-highlight-color:transparent; }
    @media (hover: none) { .qty-btn { width:44px; height:44px; font-size:20px; } }
    .wa-pulse::before { content:''; position:absolute; inset:0; border-radius:50%; background:rgba(37,211,102,.5); animation:pulse-ring 1.8s ease-out infinite; }

    /* ── Card gallery carousel ──────────────────────────────── */
    .card-main-img { transition: opacity 0.13s ease; display: block; }
    .card-nav-btn {
      position:absolute; top:50%; translate:0 -50%; z-index:10;
      width:26px; height:26px; border-radius:50%;
      background:rgba(255,255,255,.88); color:#1e40af;
      display:flex; align-items:center; justify-content:center;
      border:none; cursor:pointer;
      opacity:0; transition:opacity .2s, background .2s;
      box-shadow:0 1px 4px rgba(0,0,0,.18);
    }
    .card-gallery:hover .card-nav-btn { opacity:1; }
    @media (hover:none) { .card-nav-btn { opacity:1 !important; background:rgba(255,255,255,.78); width:32px; height:32px; } }
    .card-nav-l { left:5px; }
    .card-nav-r { right:5px; }
    .card-dot {
      display:inline-block; width:5px; height:5px; border-radius:50%;
      background:rgba(30,64,175,.22); transition:background .2s, transform .2s;
    }
    .card-dot-active { background:#1d4ed8; transform:scale(1.45); }
    .card-expand { opacity:0; transition:opacity .2s; }
    .card-gallery:hover .card-expand { opacity:1; }
    @media (hover:none) { .card-expand { opacity:1 !important; } }

    /* ── Lightbox ────────────────────────────────────────────── */
    @keyframes lbFade { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }
    .lb-fade { animation:lbFade .22s ease both; }
    .lb-nav-btn {
      position:absolute; top:50%; translate:0 -50%;
      width:48px; height:48px; border-radius:50%;
      background:rgba(255,255,255,.12); color:#fff;
      display:flex; align-items:center; justify-content:center;
      font-size:18px; cursor:pointer; transition:background .2s;
      border:1px solid rgba(255,255,255,.18);
      -webkit-tap-highlight-color:transparent;
    }
    .lb-nav-btn:hover { background:rgba(255,255,255,.28); }
    .lb-close-btn {
      width:44px; height:44px; border-radius:50%;
      background:rgba(255,255,255,.15); color:#fff;
      display:flex; align-items:center; justify-content:center;
      font-size:18px; border:1px solid rgba(255,255,255,.2);
      transition:background .2s; -webkit-tap-highlight-color:transparent;
    }
    .lb-close-btn:hover { background:rgba(255,255,255,.3); }
    .lb-dot {
      flex-shrink:0; width:52px; height:52px; border-radius:10px;
      overflow:hidden; border:2px solid transparent;
      transition:border-color .18s, transform .18s;
      background:#1e293b;
    }
    .lb-dot img { width:100%; height:100%; object-fit:contain; padding:3px; }
    .lb-dot-active { border-color:#3b82f6; transform:scale(1.08); }
    .lb-dot:not(.lb-dot-active):hover { border-color:#60a5fa; }

    /* Inline SVG brand icons: same size/alignment as Font Awesome glyphs */
    .fab-svg { height:1em; width:auto; fill:currentColor; display:inline-block; vertical-align:-0.125em; overflow:visible; }

    /* Cart order form — big, simple tap targets */
    .of-label { display:block; font-size:13px; font-weight:800; color:#1e3a8a; margin-bottom:6px; }
    .of-input { display:block; width:100%; font-size:16px; line-height:1.4; padding:12px 14px; border:1.5px solid #dbeafe; border-radius:12px; background:#fff; color:#1f2937; resize:vertical; transition:border-color .15s, box-shadow .15s; }
    .of-input:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.2); }
    .of-input.of-invalid { border-color:#ef4444; background:#fef2f2; }
    .of-opt { width:100%; min-height:50px; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border:2px solid #dbeafe; border-radius:12px; background:#fff; color:#1e3a8a; font-weight:800; font-size:15px; cursor:pointer; transition:background .15s, border-color .15s, color .15s; -webkit-tap-highlight-color:transparent; }
    .of-opt:hover:not(:disabled) { border-color:#93c5fd; background:#eff6ff; }
    .of-opt[aria-checked="true"] { background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
    .of-opt[aria-checked="true"]::after { content:'✓'; font-weight:900; margin-left:2px; }
    .of-opt:disabled { opacity:.4; cursor:not-allowed; }
    .of-invalid-group .of-opt:not([aria-checked="true"]):not(:disabled) { border-color:#fca5a5; background:#fef2f2; }
    .of-err { font-size:13px; font-weight:700; color:#dc2626; margin-top:6px; }