/* =========================================================
   Pinklitter v117 Mobile Safe Header Only
   Scope: mobile header + burger menu only.
   Does NOT touch home hero, desktop, shop, cart, product grids, or carousel.
   ========================================================= */

@media (max-width: 767px){

  html,
  body{
    overflow-x:hidden !important;
  }

  /* Header: transparent like Cart, with safe compact sizing */
  .site-header,
  .site-header.scrolled{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:200 !important;
    min-height:72px !important;
    height:72px !important;
    padding:0 14px !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{
    min-height:72px !important;
    height:72px !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{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:132px !important;
    max-height:40px !important;
    object-fit:contain !important;
  }

  /* Hide desktop nav on mobile */
  .header-nav,
  .header-nav-wrap,
  .desktop-nav,
  .main-navigation{
    display:none !important;
  }

  /* Outside icons: keep Cart + Burger only */
  .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;
  }

  .header-actions > .theme-toggle-btn,
  .header-actions > button[aria-label="Search"],
  .header-actions > button[aria-label="Account"],
  .header-actions > button.header-action-btn:not(.cart-btn),
  .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;
  }

  .header-actions > .cart-btn,
  .header-actions > a.cart-btn,
  .header-actions > .mobile-menu-btn,
  .header-actions > button.mobile-menu-btn{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center !important;
    justify-content:center !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:999px !important;
    flex:0 0 42px !important;
    background:#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;
  }

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

  .header-actions > .cart-btn svg,
  .header-actions > .cart-btn svg *,
  .header-actions > .mobile-menu-btn svg,
  .header-actions > .mobile-menu-btn svg *{
    color:#061326 !important;
    stroke:#061326 !important;
  }

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

  /* Header icon hover/tap */
  .header-actions > .cart-btn:hover,
  .header-actions > .mobile-menu-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-actions > .cart-btn:hover svg,
  .header-actions > .cart-btn:hover svg *,
  .header-actions > .mobile-menu-btn:hover svg,
  .header-actions > .mobile-menu-btn:hover svg *{
    color:#ffffff !important;
    stroke:#ffffff !important;
  }

  /* Burger menu panel: same clean style used on Cart */
  .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-topbar .theme-toggle-btn,
  .mobile-menu-topbar .theme-toggle-btn-mobile{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    border-radius:999px !important;
    background:#ffffff !important;
    border:1px solid rgba(6,19,38,.10) !important;
    color:#061326 !important;
    box-shadow:none !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-menu .mobile-menu-link:hover,
  .mobile-menu .mobile-menu-link-parent:hover,
  .mobile-menu .mobile-sub-menu-link:hover,
  .mobile-menu .mobile-sub-menu-heading-link:hover{
    background:#fff3f7 !important;
    border-color:rgba(255,75,140,.22) !important;
    color:#d93d71 !important;
    -webkit-text-fill-color:#d93d71 !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-sub-menu .mobile-sub-menu-link,
  .mobile-sub-menu .mobile-sub-menu-heading-link{
    min-height:40px !important;
    padding:.72rem .82rem !important;
    font-size:.84rem !important;
    font-weight:800 !important;
    border-radius:14px !important;
  }

  /* Social shortcuts in burger */
  .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;
  }
}



/* =========================================================
   Pinklitter v118 Mobile Home Hero + Header spacing
   Scope: mobile only.
   ========================================================= */
@media (max-width: 767px){

  /* Bring cart closer to burger */
  .header-actions{
    gap:4px !important;
  }

  .header-actions > .cart-btn{
    margin-right:0 !important;
  }

  .header-actions > .cart-btn,
  .header-actions > a.cart-btn,
  .header-actions > .mobile-menu-btn,
  .header-actions > button.mobile-menu-btn{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    flex-basis:40px !important;
  }

  /* Home hero: show full image instead of cropping */
  body.home .plx-hero{
    position:relative !important;
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    background:#ffffff !important;
    isolation:isolate !important;
  }

  body.home .plx-hero::after{
    display:none !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;
    line-height:0 !important;
    overflow:hidden !important;
    border-radius:0 !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;
    object-fit:contain !important;
    object-position:center top !important;
    transform:none !important;
    filter:none !important;
    border-radius:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* light readability layer at the bottom */
  body.home .plx-hero-media::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    pointer-events:none !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 48%, rgba(255,255,255,.58) 100%) !important;
  }

  /* Put hero text on the image, in a short left column away from cat face */
  body.home .plx-hero-copy{
    position:absolute !important;
    z-index:5 !important;
    left:18px !important;
    right:auto !important;
    bottom:18px !important;
    width:52% !important;
    max-width:52% !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  body.home .plx-kicker{
    display:inline-flex !important;
    max-width:100% !important;
    padding:.20rem .38rem !important;
    margin:0 0 .34rem !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.82) !important;
    color:#d92162 !important;
    font-size:.42rem !important;
    line-height:1 !important;
    letter-spacing:.01em !important;
    white-space:normal !important;
  }

  body.home .plx-hero h1{
    max-width:100% !important;
    margin:0 0 .34rem !important;
    color:#061b52 !important;
    font-size:clamp(.98rem, 4.4vw, 1.46rem) !important;
    line-height:1.05 !important;
    letter-spacing:-.03em !important;
    text-shadow:none !important;
    text-wrap:balance !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  body.home .plx-hero p{
    display:block !important;
    max-width:100% !important;
    margin:0 0 .58rem !important;
    color:#24324b !important;
    font-size:clamp(.50rem, 2.1vw, .70rem) !important;
    line-height:1.38 !important;
    text-shadow:none !important;
  }

  /* Hero buttons: smaller and side-by-side like desktop */
  body.home .plx-hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !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;
    max-width:100% !important;
    padding:0 6px !important;
    justify-content:center !important;
    text-align:center !important;
    border-radius:999px !important;
    font-size:.44rem !important;
    line-height:1.05 !important;
    letter-spacing:.01em !important;
    white-space:normal !important;
    gap:.16rem !important;
    overflow:hidden !important;
  }
}

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

  body.home .plx-kicker{
    font-size:.35rem !important;
    padding:.16rem .30rem !important;
    margin-bottom:.26rem !important;
  }

  body.home .plx-hero h1{
    font-size:clamp(.84rem, 4.55vw, 1.22rem) !important;
    line-height:1.06 !important;
    margin-bottom:.28rem !important;
  }

  body.home .plx-hero p{
    font-size:.44rem !important;
    line-height:1.34 !important;
    margin-bottom:.44rem !important;
  }

  body.home .plx-hero-actions{
    gap:6px !important;
  }

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