/* =========================================================
   v2.4.5 — Mobile Polish Pro
   ----------------------------------------------------------
   Visuaalsed täiustused mobiilsele vaatele:
   - Sujuvamad animatsioonid (drawer, kategooriate dropdown)
   - Korrastatud tüpograafia mobiilis (fluid scale via clamp)
   - Kompaktsem hero (rohkem ruumi sisule)
   - Tooteplaatide poleeritud paigutus
   - Selgemad CTA-nupud koos tap-feedback'iga
   - Korrastatud sektsioonide ruumiline rütm
   - Värsendatud üksiktoote vaade ja ostukorvi nupp
   - Sujuvamad scroll-übergangud
   ========================================================= */

@media (max-width: 900px) {
  /* ------------------------------------------------------- */
  /* 1. SUJUVAM DRAWER (bottom-sheet) animatsioon            */
  /* ------------------------------------------------------- */
  body.vlg-theme .vlg-nav {
    transition: transform .32s cubic-bezier(.32, .72, 0, 1),
                opacity .22s ease,
                visibility .32s !important;
    transform: translate3d(0, 100%, 0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    will-change: transform, opacity !important;
  }
  body.vlg-theme .vlg-nav.is-open {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.vlg-theme .vlg-mobile-backdrop {
    transition: opacity .26s ease, visibility .26s !important;
    opacity: 0 !important;
  }
  body.vlg-theme .vlg-mobile-backdrop:not([hidden]) {
    opacity: 1 !important;
  }

  /* Hamburger ikoon → X läbi animatsiooni */
  body.vlg-theme .vlg-mobile-toggle-icon {
    position: relative !important;
    display: inline-block !important;
    width: 22px !important;
    height: 18px !important;
  }
  body.vlg-theme .vlg-mobile-toggle-icon span {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 2.5px !important;
    border-radius: 999px !important;
    background: #071224 !important;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1),
                opacity .18s ease,
                top .28s cubic-bezier(.4, 0, .2, 1) !important;
  }
  body.vlg-theme .vlg-mobile-toggle-icon span:nth-child(1) { top: 2px !important; }
  body.vlg-theme .vlg-mobile-toggle-icon span:nth-child(2) { top: 8px !important; }
  body.vlg-theme .vlg-mobile-toggle-icon span:nth-child(3) { top: 14px !important; }

  body.vlg-theme .vlg-mobile-toggle.is-open .vlg-mobile-toggle-icon span:nth-child(1) {
    top: 8px !important;
    transform: rotate(45deg) !important;
  }
  body.vlg-theme .vlg-mobile-toggle.is-open .vlg-mobile-toggle-icon span:nth-child(2) {
    opacity: 0 !important;
  }
  body.vlg-theme .vlg-mobile-toggle.is-open .vlg-mobile-toggle-icon span:nth-child(3) {
    top: 8px !important;
    transform: rotate(-45deg) !important;
  }

  /* ------------------------------------------------------- */
  /* 2. KATEGOORIA DROPDOWN — sujuvam avamine               */
  /* ------------------------------------------------------- */
  body.vlg-theme .vlg-cat-tree .vlg-cat-submenu {
    transition: max-height .26s cubic-bezier(.32, .72, 0, 1),
                opacity .22s ease,
                margin .26s ease,
                padding .26s ease !important;
    overflow: hidden;
  }

  body.vlg-theme .vlg-cat-subtoggle {
    transition: transform .2s ease,
                background .18s ease,
                border-color .18s ease !important;
  }

  body.vlg-theme .vlg-cat-subtoggle span {
    transition: transform .26s cubic-bezier(.4, 0, .2, 1) !important;
    display: inline-block;
  }
  body.vlg-theme .vlg-cat-item.is-sub-open > .vlg-cat-row .vlg-cat-subtoggle span {
    transform: rotate(180deg);
  }

  /* ------------------------------------------------------- */
  /* 3. FLUID TÜPOGRAAFIA mobiilis                           */
  /* ------------------------------------------------------- */
  body.vlg-theme .vlg-hero h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.02em !important;
  }
  body.vlg-theme .vlg-hero p {
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.5 !important;
  }
  body.vlg-theme h2 {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    line-height: 1.18 !important;
    letter-spacing: -.01em !important;
  }
  body.vlg-theme .vlg-section-head h2 {
    margin-bottom: 4px !important;
  }

  /* ------------------------------------------------------- */
  /* 4. HERO — KOMPAKTSEM JA SELGEM                          */
  /* ------------------------------------------------------- */
  body.vlg-theme .vlg-hero {
    padding: 28px 18px 32px !important;
    border-radius: 22px !important;
    margin: 14px 0 !important;
  }
  body.vlg-theme .vlg-hero .vlg-kicker {
    font-size: 11.5px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
  }
  body.vlg-theme .vlg-hero-actions {
    gap: 8px !important;
    margin-top: 18px !important;
  }
  body.vlg-theme .vlg-hero-actions .vlg-btn-primary,
  body.vlg-theme .vlg-hero-actions .vlg-btn,
  body.vlg-theme .vlg-hero .vlg-btn {
    min-height: 50px !important;
    border-radius: 16px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    letter-spacing: -.005em !important;
  }

  /* ------------------------------------------------------- */
  /* 5. SEKTSIOONIDE RÜTM — ühtlane ruum                     */
  /* ------------------------------------------------------- */
  body.vlg-theme .vlg-section,
  body.vlg-theme .site-main > section,
  body.vlg-theme .vlg-home-section {
    margin: 28px 0 !important;
  }
  body.vlg-theme .vlg-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px !important;
  }
  body.vlg-theme .vlg-section-head h2 {
    margin: 0 !important;
  }

  /* ------------------------------------------------------- */
  /* 6. KATEGOORIAKAARDID avalehel — pildi-keskne            */
  /* ------------------------------------------------------- */
  body.vlg-theme .vlg-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body.vlg-theme .vlg-category-card {
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(219, 229, 241, .8) !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
  }
  body.vlg-theme .vlg-category-card:active {
    transform: scale(.98);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .03) !important;
  }
  body.vlg-theme .vlg-category-card img {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  body.vlg-theme .vlg-category-card > div {
    padding: 10px 12px 12px !important;
  }
  body.vlg-theme .vlg-category-card strong {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #071224 !important;
    overflow-wrap: anywhere !important;
  }
  body.vlg-theme .vlg-category-card small {
    display: block !important;
    font-size: 11.5px !important;
    color: #64748b !important;
    margin-top: 2px !important;
  }
  body.vlg-theme .vlg-category-card span {
    display: inline-block !important;
    margin-top: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--vlg-primary, #f28a00) !important;
  }

  /* ------------------------------------------------------- */
  /* 7. TOOTEPLAADID — selgem 2-veeruline paigutus           */
  /* ------------------------------------------------------- */
  body.vlg-theme ul.products,
  body.vlg-theme .vlg-products-grid,
  body.vlg-theme .vlg-shop-products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.vlg-theme ul.products li.product,
  body.vlg-theme .vlg-product-card {
    background: #fff !important;
    border: 1px solid rgba(219, 229, 241, .85) !important;
    border-radius: 18px !important;
    padding: 8px !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
  }
  body.vlg-theme ul.products li.product:active,
  body.vlg-theme .vlg-product-card:active {
    transform: scale(.985);
  }

  body.vlg-theme ul.products li.product img:first-of-type,
  body.vlg-theme .vlg-product-card img:first-of-type {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: contain !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 8px !important;
  }

  body.vlg-theme ul.products li.product .price,
  body.vlg-theme .vlg-product-card .price {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #071224 !important;
    margin: 4px 0 6px !important;
  }
  body.vlg-theme ul.products li.product del,
  body.vlg-theme .vlg-product-card del {
    color: #94a3b8 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    margin-right: 4px !important;
  }
  body.vlg-theme ul.products li.product ins,
  body.vlg-theme .vlg-product-card ins {
    color: var(--vlg-primary, #f28a00) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
  }

  /* Add to cart nupp — selgem CTA */
  body.vlg-theme ul.products li.product .button,
  body.vlg-theme .vlg-product-card .button,
  body.vlg-theme .vlg-product-card .add_to_cart_button {
    background: linear-gradient(135deg, var(--vlg-primary, #f28a00) 0%, #ff9a1a 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 12px rgba(242, 138, 0, .25) !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
  }
  body.vlg-theme ul.products li.product .button:active,
  body.vlg-theme .vlg-product-card .button:active,
  body.vlg-theme .vlg-product-card .add_to_cart_button:active {
    transform: scale(.97);
    box-shadow: 0 2px 8px rgba(242, 138, 0, .22) !important;
  }

  /* ------------------------------------------------------- */
  /* 8. ÜKSIKTOOTE LEHE OSTU-KASTI POLIISH                   */
  /* ------------------------------------------------------- */
  body.vlg-theme .vlg-product-buybox,
  body.vlg-theme #vlg-product-buybox {
    border-radius: 22px !important;
    padding: 18px 16px !important;
    background: linear-gradient(180deg, #fff 0%, #fffbf5 100%) !important;
    border: 1px solid rgba(254, 215, 170, .6) !important;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .07) !important;
  }
  body.vlg-theme .vlg-product-buybox .single_add_to_cart_button,
  body.vlg-theme #vlg-product-buybox .single_add_to_cart_button {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--vlg-primary, #f28a00) 0%, #ff9a1a 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(242, 138, 0, .35) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: -.005em !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
  }
  body.vlg-theme .vlg-product-buybox .single_add_to_cart_button:active,
  body.vlg-theme #vlg-product-buybox .single_add_to_cart_button:active {
    transform: scale(.98);
    box-shadow: 0 4px 14px rgba(242, 138, 0, .28) !important;
  }

  /* Quantity input + plus/minus mobiilis hästi haaratav */
  body.vlg-theme .quantity .qty,
  body.vlg-theme .vlg-qty-input {
    min-width: 52px !important;
    height: 48px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-align: center !important;
    border-radius: 12px !important;
  }
  body.vlg-theme .vlg-qty-btn,
  body.vlg-theme .quantity .plus,
  body.vlg-theme .quantity .minus {
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(242, 138, 0, .18) !important;
  }
  body.vlg-theme .vlg-qty-btn:active,
  body.vlg-theme .quantity .plus:active,
  body.vlg-theme .quantity .minus:active {
    transform: scale(.94);
  }

  /* ------------------------------------------------------- */
  /* 9. STICKY MOBILE BUYBAR — modernsem look                */
  /* ------------------------------------------------------- */
  body.vlg-theme .vlg-mobile-product-bar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    border-radius: 20px !important;
    padding: 10px 12px !important;
    background: rgba(255, 255, 255, .98) !important;
    backdrop-filter: blur(12px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(170%) !important;
    border: 1px solid rgba(219, 229, 241, .9) !important;
    box-shadow: 0 14px 40px rgba(7, 18, 36, .18) !important;
    z-index: 7500 !important;
    animation: vlg-buybar-slide-up .32s cubic-bezier(.32, .72, 0, 1) both;
  }
  @keyframes vlg-buybar-slide-up {
    from { transform: translateY(120%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  body.vlg-theme .vlg-mobile-product-bar__price {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
  }
  body.vlg-theme .vlg-mobile-product-bar__price span {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
  }
  body.vlg-theme .vlg-mobile-product-bar__price strong {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #071224 !important;
    margin-top: 1px !important;
  }
  body.vlg-theme .vlg-mobile-product-bar__button {
    min-height: 48px !important;
    padding: 0 22px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--vlg-primary, #f28a00) 0%, #ff9a1a 100%) !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    display: inline-grid !important;
    place-items: center !important;
    box-shadow: 0 6px 18px rgba(242, 138, 0, .35) !important;
    transition: transform .15s ease !important;
  }
  body.vlg-theme .vlg-mobile-product-bar__button:active {
    transform: scale(.97);
  }

  /* ------------------------------------------------------- */
  /* 10. JALUS — kompaktsem, akordion-stiilis sektsioonid    */
  /* ------------------------------------------------------- */
  body.vlg-theme .vlg-footer {
    padding: 24px var(--vlg-mobile-page-x, 14px) calc(20px + env(safe-area-inset-bottom)) !important;
  }
  body.vlg-theme .vlg-footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body.vlg-theme .vlg-footer-grid > div,
  body.vlg-theme .vlg-footer-grid > section,
  body.vlg-theme .vlg-footer-col {
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
  }
  body.vlg-theme .vlg-footer h3,
  body.vlg-theme .vlg-footer-col h3,
  body.vlg-theme .vlg-footer-col strong {
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin: 0 0 8px !important;
  }
  body.vlg-theme .vlg-footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  body.vlg-theme .vlg-footer a {
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  body.vlg-theme .vlg-footer-bottom {
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    opacity: .85 !important;
  }

  /* ------------------------------------------------------- */
  /* 11. NUPPUDE ÜLDINE POLISH (kõik primaarsed CTAd)        */
  /* ------------------------------------------------------- */
  body.vlg-theme .vlg-btn,
  body.vlg-theme .vlg-btn-primary,
  body.vlg-theme .button.alt,
  body.vlg-theme .wp-element-button {
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
  }
  body.vlg-theme .vlg-btn:active,
  body.vlg-theme .vlg-btn-primary:active,
  body.vlg-theme .button:active {
    transform: scale(.97);
    filter: brightness(.97);
  }

  /* ------------------------------------------------------- */
  /* 12. SCROLL-JÄRGNE FADE-IN sektsioonidele                */
  /* ------------------------------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    body.vlg-theme .vlg-section,
    body.vlg-theme .vlg-home-section,
    body.vlg-theme .vlg-hero {
      animation: vlg-fade-up .5s cubic-bezier(.32, .72, 0, 1) both;
      animation-delay: 60ms;
    }
    @keyframes vlg-fade-up {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }

  /* ------------------------------------------------------- */
  /* 13. USALDUSRIBA mobiilis — kompaktsem horisontaalne     */
  /* ------------------------------------------------------- */
  body.vlg-theme .vlg-trust-grid,
  body.vlg-theme .vlg-trust-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  body.vlg-theme .vlg-trust-grid > div,
  body.vlg-theme .vlg-trust-bar > div {
    padding: 12px 10px !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid rgba(219, 229, 241, .85) !important;
    text-align: center !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #071224 !important;
  }

  /* ------------------------------------------------------- */
  /* 14. Mini-cart drawer mobiilis — täisekraanile           */
  /* ------------------------------------------------------- */
  body.vlg-theme .vlg-mini-cart-drawer.is-open,
  body.vlg-theme .vlg-mini-cart.is-open {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
}

/* Väiksematele ekraanidele veel täiendav optimeerimine */
@media (max-width: 430px) {
  body.vlg-theme .vlg-section,
  body.vlg-theme .vlg-home-section {
    margin: 22px 0 !important;
  }
  body.vlg-theme .vlg-hero {
    padding: 24px 16px 28px !important;
  }
  body.vlg-theme .vlg-category-grid {
    gap: 8px !important;
  }
  body.vlg-theme ul.products,
  body.vlg-theme .vlg-products-grid {
    gap: 8px !important;
  }
}

/* Kui kasutaja eelistab vähendatud animatsioone, austa seda */
@media (prefers-reduced-motion: reduce) {
  body.vlg-theme .vlg-nav,
  body.vlg-theme .vlg-mobile-backdrop,
  body.vlg-theme .vlg-mobile-toggle-icon span,
  body.vlg-theme .vlg-cat-tree .vlg-cat-submenu,
  body.vlg-theme .vlg-cat-subtoggle span {
    transition: none !important;
  }
  body.vlg-theme .vlg-mobile-product-bar {
    animation: none !important;
  }
}