/* =========================================================
   Pinklitter v105 Mobile Foundation
   Covers: global header, burger menu, home, shop, product,
   cart, checkout, blog, about, contact.
   ========================================================= */

@media (max-width: 782px){

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

  body{
    --plx-mobile-x:16px;
    --plx-mobile-header:72px;
  }

  /* ------------------------------
     Mobile header: Cart-style
  ------------------------------ */
  .announcement-bar{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  .site-header,
  .site-header.scrolled{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:200 !important;
    height:var(--plx-mobile-header) !important;
    min-height:var(--plx-mobile-header) !important;
    padding:0 var(--plx-mobile-x) !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .header-inner{
    height:var(--plx-mobile-header) !important;
    min-height:var(--plx-mobile-header) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  .header-logo{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    flex:0 1 auto !important;
  }

  .header-logo-image,
  .custom-logo{
    width:auto !important;
    height:auto !important;
    max-width:132px !important;
    max-height:40px !important;
    object-fit:contain !important;
  }

  .header-nav,
  .header-nav-wrap,
  .desktop-nav,
  .main-navigation{
    display:none !important;
  }

  .header-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    flex:0 0 auto !important;
  }

  .header-action-btn,
  .mobile-menu-btn,
  .cart-trigger,
  .theme-toggle-btn{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    background:#ffffff !important;
    background-color:#ffffff !important;
    border:1px solid rgba(6,19,38,.10) !important;
    color:#061326 !important;
    -webkit-text-fill-color:#061326 !important;
    box-shadow:0 12px 28px rgba(6,19,38,.08) !important;
    transform:none !important;
    padding:0 !important;
    margin:0 !important;
    transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
  }

  .header-action-btn svg,
  .mobile-menu-btn svg,
  .cart-trigger svg,
  .theme-toggle-btn svg,
  .header-action-btn svg *,
  .mobile-menu-btn svg *,
  .cart-trigger svg *,
  .theme-toggle-btn svg *{
    color:#061326 !important;
    stroke:#061326 !important;
  }

  .header-action-btn:hover,
  .mobile-menu-btn:hover,
  .cart-trigger:hover,
  .theme-toggle-btn:hover{
    background:#b93055 !important;
    border-color:#b93055 !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    transform:none !important;
    translate:none !important;
    box-shadow:0 14px 32px rgba(185,48,85,.18) !important;
  }

  .header-action-btn:hover svg,
  .mobile-menu-btn:hover svg,
  .cart-trigger:hover svg,
  .theme-toggle-btn:hover svg,
  .header-action-btn:hover svg *,
  .mobile-menu-btn:hover svg *,
  .cart-trigger:hover svg *,
  .theme-toggle-btn:hover svg *{
    color:#ffffff !important;
    stroke:#ffffff !important;
  }

  .cart-count,
  .cart-badge,
  .header-cart-count{
    background:#ff4b8c !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }

  /* ------------------------------
     Burger menu unified
  ------------------------------ */
  .mobile-menu{
    position:fixed !important;
    inset:0 !important;
    z-index:10040 !important;
    display:block !important;
    width:100vw !important;
    height:100dvh !important;
    padding:0 !important;
    margin:0 !important;
    background:rgba(6,19,38,.38) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .2s ease, visibility .2s ease !important;
    backdrop-filter:blur(4px) !important;
    -webkit-backdrop-filter:blur(4px) !important;
  }

  .mobile-menu.open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .mobile-menu-panel{
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    left:auto !important;
    bottom:auto !important;
    width:min(350px, calc(100vw - 20px)) !important;
    max-width:min(350px, calc(100vw - 20px)) !important;
    height:auto !important;
    max-height:calc(100dvh - 20px) !important;
    overflow-y:auto !important;
    padding:12px !important;
    margin:0 !important;
    background:#ffffff !important;
    color:#061326 !important;
    border:1px solid rgba(6,19,38,.10) !important;
    border-radius:22px !important;
    box-shadow:0 28px 70px rgba(6,19,38,.24) !important;
    transform:translateX(calc(100% + 24px)) !important;
    transition:transform .25s cubic-bezier(.22,.61,.36,1) !important;
  }

  .mobile-menu.open .mobile-menu-panel{
    transform:translateX(0) !important;
  }

  .mobile-menu-topbar{
    display:grid !important;
    grid-template-columns:1fr auto auto !important;
    align-items:center !important;
    gap:.55rem !important;
    padding:0 0 .55rem !important;
    margin:0 0 .55rem !important;
    border-bottom:1px solid rgba(6,19,38,.08) !important;
  }

  .mobile-menu-topbar::before{
    content:"Menu" !important;
    display:block !important;
    color:#061326 !important;
    font-family:Archivo,Arial,sans-serif !important;
    font-size:.95rem !important;
    font-weight:800 !important;
    line-height:1 !important;
  }

  .mobile-menu-close{
    position:static !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    background:#061326 !important;
    color:#ffffff !important;
    border:0 !important;
    padding:0 !important;
    margin:0 !important;
    box-shadow:none !important;
  }

  .mobile-menu-close svg,
  .mobile-menu-close svg *{
    color:#ffffff !important;
    stroke:#ffffff !important;
  }

  .mobile-menu-links{
    width:100% !important;
    display:grid !important;
    gap:.36rem !important;
    padding:0 !important;
    margin:0 !important;
  }

  .mobile-menu .mobile-menu-link,
  .mobile-menu .mobile-menu-link-parent,
  .mobile-menu .mobile-sub-menu-link,
  .mobile-menu .mobile-sub-menu-heading-link{
    width:100% !important;
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    color:#061326 !important;
    -webkit-text-fill-color:#061326 !important;
    text-decoration:none !important;
    font-family:Archivo,Arial,sans-serif !important;
    font-size:.9rem !important;
    font-weight:800 !important;
    line-height:1.08 !important;
    letter-spacing:.02em !important;
    text-transform:none !important;
    padding:.86rem .92rem !important;
    margin:0 !important;
    background:#ffffff !important;
    border:1px solid rgba(6,19,38,.09) !important;
    border-radius:16px !important;
    box-shadow:none !important;
  }

  .mobile-sub-menu,
  .mobile-sub-menu.open{
    display:grid !important;
    gap:.32rem !important;
    width:100% !important;
    padding:.28rem 0 .12rem .72rem !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .mobile-menu-social,
  .mobile-menu-socials,
  .mobile-menu .social-links,
  .mobile-menu .social-menu{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:.5rem !important;
    flex-wrap:wrap !important;
    width:100% !important;
    padding:.75rem 0 0 !important;
    margin:.65rem 0 0 !important;
    border-top:1px solid rgba(6,19,38,.08) !important;
  }

  .mobile-menu-social a,
  .mobile-menu-socials a,
  .mobile-menu .social-links a,
  .mobile-menu .social-menu a{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:10px !important;
    background:#f7f8fb !important;
    border:1px solid rgba(6,19,38,.08) !important;
    color:#061326 !important;
    -webkit-text-fill-color:#061326 !important;
    font-family:Archivo,Arial,sans-serif !important;
    font-size:.78rem !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-decoration:none !important;
  }

  .mobile-menu-panel,
  .mobile-menu-panel *{
    text-shadow:none !important;
  }

  /* ------------------------------
     Global page spacing
  ------------------------------ */
  .hero-section,
  .shop-hero,
  .single-product-shell,
  .cart-checkout-hero,
  .about-hero,
  .blog-hero,
  .contact-hero{
    padding-top:calc(var(--plx-mobile-header) + 26px) !important;
  }

  .products-section,
  .promo-section,
  .categories-section,
  .bestsellers-section,
  .testimonials-section,
  .shop-archive-section,
  .single-product-shell,
  .cart-checkout-shell,
  .about-shell,
  .blog-shell,
  .contact-shell{
    padding-left:var(--plx-mobile-x) !important;
    padding-right:var(--plx-mobile-x) !important;
  }

  /* ------------------------------
     Home
  ------------------------------ */
  .hero-section{
    min-height:auto !important;
    padding-left:var(--plx-mobile-x) !important;
    padding-right:var(--plx-mobile-x) !important;
  }

  .hero-title,
  .hero-headline{
    font-size:clamp(2.6rem,14vw,5.2rem) !important;
    line-height:.94 !important;
    max-width:100% !important;
  }

  .hero-sub,
  .hero-subtitle{
    font-size:1rem !important;
    line-height:1.6 !important;
    max-width:92vw !important;
  }

  .hero-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:.85rem !important;
  }

  .hero-actions .button,
  .hero-actions a{
    width:auto !important;
    max-width:100% !important;
  }

  /* ------------------------------
     Shop / Categories
  ------------------------------ */
  .shop-archive-section{
    padding-top:calc(var(--plx-mobile-header) + 18px) !important;
  }

  .shop-toolbar--utility,
  .shop-filter-controls,
  .pawlux-shop-controls,
  .shop-filter-row{
    position:static !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding:14px !important;
    border-radius:22px !important;
  }

  .shop-toolbar-search,
  .shop-toolbar-search .woocommerce-product-search,
  .shop-toolbar-search .search-field{
    width:100% !important;
  }

  .category-tabs,
  .shop-category-tabs,
  .pawlux-category-tabs{
    display:flex !important;
    gap:10px !important;
    overflow-x:auto !important;
    padding-bottom:4px !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .category-tabs a,
  .shop-category-tabs a,
  .pawlux-category-tabs a,
  .shop-category-tab{
    flex:0 0 auto !important;
    min-width:max-content !important;
    scroll-snap-align:start !important;
  }

  .products,
  .woocommerce ul.products,
  .shop-products-grid{
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
  }

  /* ------------------------------
     Single product
  ------------------------------ */
  .single-product-layout,
  .single-product-main,
  .single-product-grid,
  .product-detail-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .single-product-title,
  .product_title{
    font-size:clamp(2rem,10vw,3.2rem) !important;
    line-height:1.06 !important;
  }

  .single-product-gallery,
  .single-product-summary,
  .single-product-info-card{
    width:100% !important;
    max-width:100% !important;
  }

  /* ------------------------------
     Cart
  ------------------------------ */
  .cart-page-shell .woocommerce,
  body.woocommerce-cart .cart-page-shell .woocommerce{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .cart-page-shell form.woocommerce-cart-form,
  .cart-page-shell .cart-collaterals{
    grid-column:1 !important;
    grid-row:auto !important;
    width:100% !important;
  }

  body.woocommerce-cart table.shop_table.cart{
    display:block !important;
    width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body.woocommerce-cart table.shop_table.cart tbody,
  body.woocommerce-cart table.shop_table.cart thead{
    min-width:720px !important;
  }

  body.woocommerce-cart table.shop_table.cart td.actions .coupon,
  body.woocommerce-cart .woocommerce-cart-form__contents td.actions .coupon{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  body.woocommerce-cart table.shop_table.cart td.actions input[name="coupon_code"],
  body.woocommerce-cart table.shop_table.cart td.actions .button{
    width:100% !important;
  }

  /* ------------------------------
     Checkout
  ------------------------------ */
  .checkout-page-shell .woocommerce form.checkout,
  body.woocommerce-checkout .woocommerce form.checkout{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .checkout-page-shell .woocommerce .col2-set,
  .checkout-page-shell .woocommerce #order_review,
  .checkout-page-shell .woocommerce .woocommerce-checkout-review-order{
    grid-column:1 !important;
    grid-row:auto !important;
    width:100% !important;
  }

  body.woocommerce-checkout .checkout-page-shell .woocommerce .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .checkout-page-shell .woocommerce .woocommerce-shipping-fields__field-wrapper,
  body.woocommerce-checkout .checkout-page-shell .woocommerce .woocommerce-additional-fields__field-wrapper{
    grid-template-columns:1fr !important;
    padding:18px !important;
  }

  .checkout-page-shell .woocommerce #order_review_heading::after,
  body.woocommerce-checkout .woocommerce #order_review_heading::after{
    width:180px !important;
  }

  /* ------------------------------
     About / Blog / Contact
  ------------------------------ */
  .about-hero,
  .blog-hero,
  .contact-hero{
    padding-left:var(--plx-mobile-x) !important;
    padding-right:var(--plx-mobile-x) !important;
    padding-bottom:34px !important;
  }

  .about-grid,
  .blog-grid,
  .contact-grid,
  .contact-faq-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .about-title,
  .blog-title,
  .contact-title{
    font-size:clamp(2.3rem,11vw,3.9rem) !important;
    line-height:1 !important;
  }

  .about-card,
  .blog-card,
  .contact-card{
    border-radius:22px !important;
    padding:18px !important;
  }

  .blog-card-content{
    padding:18px !important;
  }

  .contact-page-content input[type="submit"],
  .contact-page-content button,
  .contact-page-content .button,
  .contact-page-content .wpcf7-submit{
    width:100% !important;
  }

  /* Footer */
  .site-footer,
  .footer-content{
    padding-left:var(--plx-mobile-x) !important;
    padding-right:var(--plx-mobile-x) !important;
  }

  .footer-grid,
  .footer-columns{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:26px !important;
  }
}

@media (max-width: 480px){
  .header-logo-image,
  .custom-logo{
    max-width:118px !important;
    max-height:36px !important;
  }

  .header-actions{
    gap:6px !important;
  }

  .header-action-btn,
  .mobile-menu-btn,
  .cart-trigger,
  .theme-toggle-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }

  .products,
  .woocommerce ul.products,
  .shop-products-grid{
    grid-template-columns:1fr !important;
  }

  .mobile-menu-panel{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    top:8px !important;
    right:8px !important;
    border-radius:20px !important;
  }
}



/* =========================================================
   Pinklitter v106 Mobile refinements
   Requested:
   1) keep only cart + burger outside; move other actions into burger visually
   2) show full hero image
   3) Cat/Dog side-by-side
   4) Hero buttons side-by-side
   5) Carousel allows vertical page scrolling
   6) Category boxes 2 columns x 3 rows
   ========================================================= */

@media (max-width:782px){

  /* 1) Header actions: outside only cart + burger */
  .header-actions{
    gap:6px !important;
  }

  .header-actions .header-action-btn,
  .header-actions .theme-toggle-btn,
  .header-actions .search-trigger,
  .header-actions .search-toggle,
  .header-actions .account-trigger,
  .header-actions .account-link,
  .header-actions .user-trigger,
  .header-actions .wishlist-trigger{
    display:none !important;
  }

  .header-actions .cart-trigger,
  .header-actions .cart-link,
  .header-actions .header-cart,
  .header-actions .mobile-menu-btn,
  .header-actions .menu-toggle,
  .header-actions .hamburger{
    display:inline-flex !important;
  }

  .header-actions .cart-trigger,
  .header-actions .cart-link,
  .header-actions .header-cart,
  .header-actions .mobile-menu-btn{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
  }

  .header-actions .cart-trigger,
  .header-actions .cart-link,
  .header-actions .header-cart{
    margin-right:2px !important;
  }

  .header-actions .mobile-menu-btn{
    margin-left:0 !important;
  }

  /* Make hidden header actions available as clean controls inside burger when theme renders them there */
  .mobile-menu-panel .header-action-btn,
  .mobile-menu-panel .theme-toggle-btn,
  .mobile-menu-panel .search-trigger,
  .mobile-menu-panel .search-toggle,
  .mobile-menu-panel .account-trigger,
  .mobile-menu-panel .account-link,
  .mobile-menu-panel .user-trigger{
    display:inline-flex !important;
  }

  /* 2) Hero image: show full image instead of crop where possible */
  .hero-section,
  .home-hero,
  .front-hero,
  .plx-hero{
    min-height:auto !important;
    height:auto !important;
    overflow:visible !important;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-position:center top !important;
  }

  .hero-bg,
  .hero-background,
  .hero-media,
  .hero-image,
  .hero-visual,
  .hero-section picture,
  .hero-section img,
  .home-hero picture,
  .home-hero img{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .hero-bg img,
  .hero-background img,
  .hero-media img,
  .hero-image img,
  .hero-visual img,
  .hero-section > img,
  .home-hero > img{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center top !important;
  }

  /* If the hero is background-only, give it enough height to display whole composition on mobile */
  .hero-section{
    padding-bottom:36px !important;
  }

  /* 3) CAT / DOG cards side-by-side */
  .pet-cards,
  .pet-card-grid,
  .pet-switcher,
  .pet-selector,
  .pet-type-grid,
  .home-pet-grid,
  .plx-pet-grid,
  .pet-choice-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
    align-items:stretch !important;
  }

  .pet-cards > *,
  .pet-card-grid > *,
  .pet-switcher > *,
  .pet-selector > *,
  .pet-type-grid > *,
  .home-pet-grid > *,
  .plx-pet-grid > *,
  .pet-choice-grid > *{
    width:100% !important;
    min-width:0 !important;
  }

  /* 4) Hero CTAs side-by-side */
  .hero-actions,
  .hero-buttons,
  .hero-cta-row,
  .home-hero-actions,
  .plx-hero-actions{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
    width:100% !important;
  }

  .hero-actions .button,
  .hero-actions a,
  .hero-buttons .button,
  .hero-buttons a,
  .hero-cta-row .button,
  .hero-cta-row a,
  .home-hero-actions .button,
  .home-hero-actions a,
  .plx-hero-actions .button,
  .plx-hero-actions a{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    padding-left:12px !important;
    padding-right:12px !important;
    text-align:center !important;
    white-space:nowrap !important;
    font-size:.78rem !important;
  }

  /* 5) Carousels: allow vertical page pan; still allow horizontal swipe */
  .swiper,
  .swiper-wrapper,
  .swiper-slide,
  .splide,
  .splide__track,
  .splide__list,
  .splide__slide,
  .carousel,
  .product-carousel,
  .categories-carousel,
  .bestsellers-carousel,
  .marquee,
  .marquee-track,
  .plx-carousel,
  .plx-carousel-track{
    touch-action:pan-y pinch-zoom !important;
  }

  .swiper,
  .splide__track,
  .carousel,
  .product-carousel,
  .categories-carousel,
  .bestsellers-carousel,
  .plx-carousel{
    overscroll-behavior-x:contain !important;
    overscroll-behavior-y:auto !important;
  }

  /* 6) Category boxes: 2 columns x 3 rows */
  .categories-grid,
  .category-grid,
  .home-categories-grid,
  .plx-categories-grid,
  .category-cards,
  .shop-categories,
  .category-tiles,
  .categories-section .cards-grid,
  .categories-section .grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .categories-grid > *,
  .category-grid > *,
  .home-categories-grid > *,
  .plx-categories-grid > *,
  .category-cards > *,
  .shop-categories > *,
  .category-tiles > *,
  .categories-section .cards-grid > *,
  .categories-section .grid > *{
    width:100% !important;
    min-width:0 !important;
  }

  .category-card,
  .category-tile,
  .categories-section .card{
    min-height:120px !important;
    border-radius:20px !important;
  }
}

@media (max-width:420px){
  .hero-actions,
  .hero-buttons,
  .hero-cta-row,
  .home-hero-actions,
  .plx-hero-actions{
    gap:8px !important;
  }

  .hero-actions .button,
  .hero-actions a,
  .hero-buttons .button,
  .hero-buttons a,
  .hero-cta-row .button,
  .hero-cta-row a{
    font-size:.72rem !important;
    letter-spacing:.03em !important;
  }
}



/* =========================================================
   Pinklitter v107 Mobile REAL home fixes
   Uses the actual home classes: plx-hero, plx-pet-cards, plx-category-grid.
   ========================================================= */

@media (max-width: 782px){

  /* 1) Header: outside only cart + burger, close together */
  .site-header .header-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    width:auto !important;
    flex:0 0 auto !important;
  }

  .site-header .header-actions > button.header-action-btn:not(.cart-btn),
  .site-header .header-actions > a.header-action-btn:not(.cart-btn):not([href*="cart"]),
  .site-header .header-actions > .theme-toggle-btn,
  .site-header .header-actions > button[aria-label="Search"],
  .site-header .header-actions > button[aria-label="Account"]{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    min-width:0 !important;
    height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  .site-header .header-actions > .cart-btn,
  .site-header .header-actions > a.cart-btn,
  .site-header .header-actions > .mobile-menu-btn,
  .site-header .header-actions > button.mobile-menu-btn{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    padding:0 !important;
    margin:0 !important;
  }

  .site-header .header-actions > .cart-btn{
    margin-right:1px !important;
  }

  /* Keep theme toggle in burger topbar, not outside */
  .mobile-menu-panel .theme-toggle-btn,
  .mobile-menu-panel .theme-toggle-btn-mobile{
    display:inline-flex !important;
    visibility:visible !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
  }

  /* 2) Home hero: stack image so the whole image shows on mobile */
  body.home .plx-hero{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    padding:calc(var(--plx-mobile-header) + 14px) 16px 30px !important;
    overflow:visible !important;
    background:#ffffff !important;
    isolation:auto !important;
  }

  body.home .plx-hero::after{
    display:none !important;
  }

  body.home .plx-hero-media{
    position:relative !important;
    inset:auto !important;
    z-index:1 !important;
    order:1 !important;
    display:block !important;
    width:calc(100% + 32px) !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 -16px 16px !important;
    overflow:hidden !important;
    border-radius:0 0 24px 24px !important;
    background:#ffffff !important;
  }

  body.home .plx-hero-media img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center top !important;
    border-radius:0 !important;
    transform:none !important;
    filter:none !important;
  }

  body.home .plx-hero-copy{
    position:relative !important;
    z-index:2 !important;
    order:2 !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  body.home .plx-hero h1{
    font-size:clamp(2.35rem,12vw,3.75rem) !important;
    line-height:.98 !important;
    margin-bottom:14px !important;
  }

  body.home .plx-hero p{
    font-size:.94rem !important;
    line-height:1.55 !important;
    margin-bottom:16px !important;
    max-width:100% !important;
  }

  /* 4) Hero buttons side-by-side, with breathing room and no overflow */
  body.home .plx-hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    width:100% !important;
    align-items:stretch !important;
  }

  body.home .plx-hero-actions .plx-btn,
  body.home .plx-hero-actions a{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:48px !important;
    padding:0 10px !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    font-size:.72rem !important;
    line-height:1.15 !important;
    letter-spacing:.035em !important;
    border-radius:999px !important;
  }

  /* 3) CAT / DOG cards side-by-side using actual class */
  body.home .plx-pet-cards{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
    align-items:stretch !important;
  }

  body.home .plx-pet-card{
    width:100% !important;
    min-width:0 !important;
    min-height:210px !important;
    height:auto !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }

  body.home .plx-pet-card-copy{
    max-width:100% !important;
    width:100% !important;
    padding:14px !important;
    z-index:2 !important;
  }

  body.home .plx-pet-card-copy h2{
    font-size:clamp(1.05rem,5vw,1.45rem) !important;
    line-height:1.02 !important;
    max-width:100% !important;
  }

  body.home .plx-pet-card-copy p{
    display:none !important;
  }

  body.home .plx-pet-card-copy span,
  body.home .plx-pet-card-cta{
    font-size:.66rem !important;
  }

  body.home .plx-pet-card img,
  body.home .plx-pet-card video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  /* 5) Carousel / horizontal sections: do not trap vertical scrolling */
  body.home .plx-product-row,
  body.home .plx-promo-track,
  body.home .plx-benefits-strip,
  body.home .plx-product-card,
  body.home .swiper,
  body.home .swiper-wrapper,
  body.home .swiper-slide,
  body.home .splide,
  body.home .splide__track,
  body.home .splide__list,
  body.home .splide__slide,
  body.home .carousel,
  body.home .product-carousel,
  body.home .bestsellers-carousel{
    touch-action:pan-y !important;
    overscroll-behavior-y:auto !important;
  }

  body.home .plx-product-row{
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x proximity !important;
  }

  /* 6) Category boxes: actual class, exactly two columns */
  body.home .plx-category-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
  }

  body.home .plx-category-card{
    width:100% !important;
    min-width:0 !important;
    min-height:190px !important;
    height:auto !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }

  body.home .plx-category-content{
    width:100% !important;
    max-width:100% !important;
    padding:14px !important;
  }

  body.home .plx-category-content h3{
    font-size:.95rem !important;
    line-height:1.1 !important;
    margin-bottom:6px !important;
  }

  body.home .plx-category-content p{
    display:none !important;
  }

  body.home .plx-category-icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    margin-bottom:8px !important;
  }

  body.home .plx-category-cta,
  body.home .plx-category-content strong{
    font-size:.66rem !important;
  }
}

@media (max-width:420px){
  body.home .plx-hero-actions{
    gap:10px !important;
  }

  body.home .plx-hero-actions .plx-btn,
  body.home .plx-hero-actions a{
    font-size:.68rem !important;
    padding:0 8px !important;
  }

  body.home .plx-pet-card{
    min-height:185px !important;
  }

  body.home .plx-category-card{
    min-height:170px !important;
  }
}



/* =========================================================
   Pinklitter v109 Mobile repair after v108
   - Header: outside only Basket + Burger, no overlap
   - Hero: content overlays image again
   - Carousel: do not trap vertical scroll
   - Categories: restore clean 2-column grid
   ========================================================= */

@media (max-width:782px){

  /* 1) HEADER ICONS: only Basket + Burger outside */
  body .site-header .header-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    width:auto !important;
    flex:0 0 auto !important;
    overflow:visible !important;
  }

  body .site-header .header-actions > .theme-toggle-btn,
  body .site-header .header-actions > button[aria-label="Search"],
  body .site-header .header-actions > button[aria-label="Account"],
  body .site-header .header-actions > button.header-action-btn:not(.cart-btn),
  body .site-header .header-actions > a.header-action-btn:not(.cart-btn):not([href*="cart"]){
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }

  body .site-header .header-actions > .cart-btn,
  body .site-header .header-actions > a.cart-btn,
  body .site-header .header-actions > .mobile-menu-btn,
  body .site-header .header-actions > button.mobile-menu-btn{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:999px !important;
    flex:0 0 40px !important;
  }

  body .site-header .header-actions > .cart-btn{
    margin-right:2px !important;
  }

  body .site-header .header-actions > .mobile-menu-btn{
    margin-left:0 !important;
  }

  body .site-header .header-logo-image,
  body .site-header .custom-logo{
    max-width:118px !important;
    max-height:36px !important;
  }

  /* HERO: overlay text on top of visible image, not below */
  body.home .plx-hero{
    position:relative !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
    min-height:100svh !important;
    height:auto !important;
    max-height:none !important;
    padding:calc(var(--plx-mobile-header,72px) + 16px) 16px 28px !important;
    overflow:hidden !important;
    background:#ffffff !important;
    isolation:isolate !important;
  }

  body.home .plx-hero-media{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    order:initial !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }

  body.home .plx-hero-media img{
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    object-fit:contain !important;
    object-position:center top !important;
    border-radius:0 !important;
    transform:none !important;
    filter:none !important;
  }

  body.home .plx-hero-media::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.16) 48%, rgba(255,255,255,.76) 100%) !important;
    pointer-events:none !important;
  }

  body.home .plx-hero-copy{
    position:relative !important;
    z-index:2 !important;
    order:initial !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  body.home .plx-hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    width:100% !important;
  }

  body.home .plx-hero-actions .plx-btn,
  body.home .plx-hero-actions a{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:48px !important;
    padding:0 8px !important;
    font-size:.66rem !important;
    line-height:1.12 !important;
    letter-spacing:.02em !important;
    white-space:normal !important;
    text-align:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  /* CAT / DOG side-by-side using actual classes */
  body.home .plx-pet-cards-section .plx-pet-cards,
  body.home .plx-pet-cards{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    align-items:stretch !important;
  }

  body.home .plx-pet-card{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:200px !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }

  body.home .plx-pet-card-copy{
    width:100% !important;
    max-width:100% !important;
    padding:13px !important;
  }

  body.home .plx-pet-card-copy p{
    display:none !important;
  }

  /* 3) CAROUSEL: allow vertical page scroll. */
  body.home .plx-product-row,
  body.home .plx-product-row *,
  body.home .plx-product-card,
  body.home .swiper,
  body.home .swiper *,
  body.home .splide,
  body.home .splide *,
  body.home .carousel,
  body.home .carousel *,
  body.home .product-carousel,
  body.home .product-carousel *,
  body.home .bestsellers-carousel,
  body.home .bestsellers-carousel *,
  body.home [class*="carousel"],
  body.home [class*="carousel"] *{
    touch-action:auto !important;
    overscroll-behavior:auto !important;
  }

  /* 4) Categories: restore clean 2-column grid */
  body.home .plx-category-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  body.home .plx-category-card{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:190px !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }

  body.home .plx-category-content{
    width:100% !important;
    max-width:100% !important;
    padding:14px !important;
  }

  body.home .plx-category-content p{
    display:none !important;
  }
}



/* =========================================================
   Pinklitter v110 Mobile hero compact overlay + carousel vertical scroll
   ========================================================= */

@media (max-width:782px){

  /* HERO: full image stays visible, text is compact and placed ON image */
  body.home .plx-hero{
    position:relative !important;
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    padding:var(--plx-mobile-header,72px) 0 0 !important;
    margin:0 !important;
    overflow:hidden !important;
    background:#ffffff !important;
    isolation:isolate !important;
  }

  body.home .plx-hero-media{
    position:relative !important;
    inset:auto !important;
    z-index:1 !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    background:#ffffff !important;
  }

  body.home .plx-hero-media::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 45%, rgba(255,255,255,.62) 100%) !important;
    pointer-events:none !important;
    z-index:1 !important;
  }

  body.home .plx-hero-media img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center top !important;
    border-radius:0 !important;
    transform:none !important;
    filter:none !important;
  }

  body.home .plx-hero-copy{
    position:absolute !important;
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    z-index:3 !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  body.home .plx-kicker{
    padding:.26rem .48rem !important;
    margin:0 0 .38rem !important;
    font-size:.52rem !important;
    line-height:1 !important;
    letter-spacing:.02em !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.76) !important;
    color:#d92162 !important;
  }

  body.home .plx-hero h1{
    font-size:clamp(1.28rem, 6.2vw, 2rem) !important;
    line-height:.95 !important;
    letter-spacing:-.045em !important;
    margin:0 0 .36rem !important;
    max-width:82% !important;
    color:#061b52 !important;
  }

  body.home .plx-hero p{
    display:block !important;
    max-width:86% !important;
    margin:0 0 .52rem !important;
    color:#24324b !important;
    font-size:clamp(.58rem, 2.8vw, .74rem) !important;
    line-height:1.28 !important;
  }

  body.home .plx-hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
    width:min(100%, 320px) !important;
    max-width:100% !important;
    align-items:stretch !important;
  }

  body.home .plx-hero-actions .plx-btn,
  body.home .plx-hero-actions a{
    min-height:34px !important;
    height:34px !important;
    width:100% !important;
    min-width:0 !important;
    padding:0 6px !important;
    border-radius:999px !important;
    font-size:.52rem !important;
    line-height:1.05 !important;
    letter-spacing:.015em !important;
    white-space:normal !important;
    text-align:center !important;
    justify-content:center !important;
    gap:.28rem !important;
    overflow:hidden !important;
  }

  /* CAROUSELS: default to vertical scroll when swiping up/down over carousel */
  body.home .plx-product-row,
  body.home .plx-product-row *,
  body.home .plx-product-card,
  body.home .swiper,
  body.home .swiper *,
  body.home .splide,
  body.home .splide *,
  body.home .carousel,
  body.home .carousel *,
  body.home .product-carousel,
  body.home .product-carousel *,
  body.home .bestsellers-carousel,
  body.home .bestsellers-carousel *,
  body.home [class*="carousel"],
  body.home [class*="carousel"] *{
    touch-action:pan-y !important;
    overscroll-behavior:auto !important;
  }
}

@media (max-width:420px){
  body.home .plx-hero-copy{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
  }

  body.home .plx-hero h1{
    max-width:84% !important;
    font-size:clamp(1.18rem, 6vw, 1.72rem) !important;
  }

  body.home .plx-hero p{
    max-width:88% !important;
    font-size:.56rem !important;
  }

  body.home .plx-hero-actions{
    gap:8px !important;
    width:min(100%, 292px) !important;
  }

  body.home .plx-hero-actions .plx-btn,
  body.home .plx-hero-actions a{
    min-height:32px !important;
    height:32px !important;
    font-size:.49rem !important;
    padding:0 5px !important;
  }
}



/* =========================================================
   Pinklitter v111 Mobile hero scale + no top white gap
   ========================================================= */

@media (max-width:782px){

  body.home .plx-hero{
    padding:0 !important;
    margin:0 !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    background:#ffffff !important;
    overflow:hidden !important;
    position:relative !important;
    display:block !important;
  }

  body.home .plx-hero-media{
    position:relative !important;
    inset:auto !important;
    z-index:1 !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    background:#ffffff !important;
  }

  body.home .plx-hero-media::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 45%, rgba(255,255,255,.62) 100%) !important;
    pointer-events:none !important;
  }

  body.home .plx-hero-media img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center top !important;
    border-radius:0 !important;
    transform:none !important;
    filter:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.home .plx-hero-copy{
    position:absolute !important;
    z-index:4 !important;
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    width:auto !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  body.home .plx-kicker{
    padding:.18rem .34rem !important;
    margin:0 0 .25rem !important;
    font-size:.42rem !important;
    line-height:1 !important;
    letter-spacing:.01em !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.76) !important;
    color:#d92162 !important;
  }

  body.home .plx-hero h1{
    font-size:clamp(.94rem, 4.6vw, 1.42rem) !important;
    line-height:.94 !important;
    letter-spacing:-.035em !important;
    margin:0 0 .23rem !important;
    max-width:72% !important;
    color:#061b52 !important;
  }

  body.home .plx-hero p{
    display:block !important;
    max-width:76% !important;
    margin:0 0 .34rem !important;
    color:#24324b !important;
    font-size:clamp(.44rem, 2.15vw, .58rem) !important;
    line-height:1.18 !important;
  }

  body.home .plx-hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    width:min(70%, 230px) !important;
    max-width:70% !important;
    align-items:stretch !important;
  }

  body.home .plx-hero-actions .plx-btn,
  body.home .plx-hero-actions a{
    min-height:25px !important;
    height:25px !important;
    width:100% !important;
    min-width:0 !important;
    padding:0 4px !important;
    border-radius:999px !important;
    font-size:.38rem !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    gap:.18rem !important;
    white-space:nowrap !important;
    text-align:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  body.home .site-header{
    top:0 !important;
  }

  body.home .plx-product-row,
  body.home .plx-product-row *,
  body.home .plx-product-card,
  body.home .swiper,
  body.home .swiper *,
  body.home .splide,
  body.home .splide *,
  body.home .carousel,
  body.home .carousel *,
  body.home .product-carousel,
  body.home .product-carousel *,
  body.home .bestsellers-carousel,
  body.home .bestsellers-carousel *,
  body.home [class*="carousel"],
  body.home [class*="carousel"] *,
  body.home [class*="slider"],
  body.home [class*="slider"] *,
  body.home [class*="marquee"],
  body.home [class*="marquee"] *{
    touch-action:none !important;
    overscroll-behavior:auto !important;
  }
}

@media (max-width:420px){
  body.home .plx-hero-copy{
    left:9px !important;
    right:9px !important;
    bottom:9px !important;
  }

  body.home .plx-hero h1{
    font-size:clamp(.86rem, 4.35vw, 1.25rem) !important;
    max-width:72% !important;
  }

  body.home .plx-hero p{
    font-size:.42rem !important;
    max-width:74% !important;
  }

  body.home .plx-hero-actions{
    width:min(68%, 210px) !important;
    max-width:68% !important;
    gap:5px !important;
  }

  body.home .plx-hero-actions .plx-btn,
  body.home .plx-hero-actions a{
    min-height:23px !important;
    height:23px !important;
    font-size:.34rem !important;
    padding:0 5px !important;
  }
}