/* Party Pack storefront header — seamless first impression and restrained sticky elevation.
   Final CSS layer, scoped to the customer header; does not affect admin or the 3D scene. */
#app .top.pp-storefront-header{
  --pp-header-surface:#fff;
  --pp-header-ink:#2c232a;
  --pp-header-rose:#994282;
  position:sticky;
  top:0;
  z-index:20;
  display:grid;
  grid-template-columns:minmax(126px,1fr) auto minmax(240px,1fr);
  align-items:center;
  gap:clamp(16px,1.9vw,32px);
  width:100%;
  height:74px;
  min-width:0;
  /* Align the brand and tools with editorial storefront page gutters. */
  padding:0 clamp(26px,4.3vw,74px);
  background:var(--pp-header-surface);
  color:var(--pp-header-ink);
  border:0;
  border-bottom:1px solid rgba(111,85,105,.065);
  box-shadow:none;
  transition:background-color .2s ease,box-shadow .2s ease,border-color .2s ease;
}
/* The opening 3D canvas is placed on this precise pastel backdrop. */
body:has(.pp-scroll-story) #app .top.pp-storefront-header{
  --pp-header-surface:#f2eff1;
}
#app .top.pp-storefront-header.pp-header--scrolled{
  border-bottom-color:rgba(91,55,81,.11);
  box-shadow:0 9px 24px rgba(67,34,58,.065);
}
#app .top.pp-storefront-header>a[aria-label="Party Pack home"]{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
}
#app .top.pp-storefront-header .logo{
  display:block;
  width:auto;
  height:59px;
  max-width:120px;
  object-fit:contain;
  object-position:left center;
  /* The original raster asset has a white matte; multiply removes the seam
     against both the pale hero and the white catalogue without recolouring art. */
  mix-blend-mode:multiply;
}
#app .top.pp-storefront-header .topnav{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,2vw,33px);
  min-width:0;
}
#app .top.pp-storefront-header .topnav a{
  position:relative;
  flex:none;
  padding:11px 0;
  color:#332830;
  font:600 11.5px/1.25 'Outfit',Inter,'Segoe UI',Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.075em;
  white-space:nowrap;
  transition:color .18s ease;
}
#app .top.pp-storefront-header .topnav a::after{
  content:"";
  position:absolute;
  bottom:5px;
  left:0;
  right:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .18s ease;
}
#app .top.pp-storefront-header .topnav a:hover,
#app .top.pp-storefront-header .topnav a.active,
#app .top.pp-storefront-header .topnav a:focus-visible{
  color:#934f81;
}
#app .top.pp-storefront-header .topnav a:hover::after,
#app .top.pp-storefront-header .topnav a.active::after,
#app .top.pp-storefront-header .topnav a:focus-visible::after{
  transform:scaleX(1);
}
#app .top.pp-storefront-header .nav-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
  white-space:nowrap;
}
/* The selected code is its own label: omit the redundant visible DISPLAY.
   Keep the native select so keyboard, touch and screen-reader interaction remain intact. */
#app .top.pp-storefront-header .currency-control{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-width:0;
  margin:0;
  padding:0;
  cursor:pointer;
}
#app .top.pp-storefront-header .currency-title{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
#app .top.pp-storefront-header .currency-control::after{
  content:"";
  position:absolute;
  right:15px;
  top:calc(50% - 4px);
  width:6px;
  height:6px;
  border-right:1.5px solid #695463;
  border-bottom:1.5px solid #695463;
  transform:rotate(45deg);
  pointer-events:none;
}
#app .top.pp-storefront-header .currency-control select{
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
  width:89px;
  min-width:89px;
  max-width:89px;
  height:38px;
  min-height:38px;
  margin:0;
  padding:0 27px 0 13px;
  border:1px solid rgba(110,75,101,.19);
  border-radius:9px;
  background:rgba(255,255,255,.9);
  color:#30242d;
  font:600 12px/1 'Outfit',Inter,'Segoe UI',Arial,sans-serif;
  letter-spacing:.015em;
  cursor:pointer;
  box-shadow:none;
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease;
}
#app .top.pp-storefront-header .currency-control select:hover{
  border-color:#a04588;
  background:#fff;
}
#app .top.pp-storefront-header .currency-control select:focus-visible{
  outline:2px solid #9c4384;
  outline-offset:3px;
  border-color:#916786;
  background:#fff;
}
#app .top.pp-storefront-header .nav-actions>.iconbtn[data-action="cart"]{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  min-width:42px;
  padding:7px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#30232d;
}
#app .top.pp-storefront-header .nav-actions>.iconbtn[data-action="cart"] svg{
  display:block;
  width:22px;
  height:22px;
}
#app .top.pp-storefront-header .nav-actions>.iconbtn[data-action="cart"]:hover{
  background:rgba(149,64,127,.09);
}
#app .top.pp-storefront-header .counter{
  position:absolute;
  top:0;
  right:0;
  display:grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:50px;
  background:#943f7d;
  color:white;
  font:700 10px/1 'Outfit',sans-serif;
  border:2px solid var(--pp-header-surface);
}
#app .top.pp-storefront-header .nav-actions>a.btn.small{
  display:inline-flex;
  flex:none;
  align-items:center;
  justify-content:center;
  height:40px;
  min-height:40px;
  /* The review/admin shortcut is utility navigation, not a competing CTA. */
  padding:0 4px;
  border:1px solid transparent;
  border-radius:5px;
  background:transparent;
  color:#735e6e;
  font:600 10.5px/1 'Outfit',sans-serif;
  letter-spacing:.015em;
  box-shadow:none;
  transition:background-color .18s ease,border-color .18s ease;
  transform:none;
}
#app .top.pp-storefront-header .nav-actions>a.btn.small:hover{
  background:transparent;
  border-color:transparent;
  color:#82296a;
  text-decoration:underline;
  text-underline-offset:4px;
  filter:none;
  transform:none;
}
#app .top.pp-storefront-header .mobile-nav{display:none}

/* Keep the desktop composition balanced even on narrow laptop viewports. */
@media(max-width:1130px) and (min-width:981px){
  #app .top.pp-storefront-header{gap:15px;padding-inline:22px;grid-template-columns:minmax(92px,1fr) auto minmax(225px,1fr)}
  #app .top.pp-storefront-header .topnav{gap:14px}
  #app .top.pp-storefront-header .topnav a{font-size:10px;letter-spacing:.04em}
  #app .top.pp-storefront-header .nav-actions{gap:7px}
  #app .top.pp-storefront-header .currency-title{clip-path:inset(50%)}
}
/* Tablet/phone: brand, currency, basket and accessible menu stay on one line. */
@media(max-width:980px){
  #app .top.pp-storefront-header{
    display:flex;
    justify-content:space-between;
    gap:12px;
    height:70px;
    padding:0 19px;
  }
  #app .top.pp-storefront-header .logo{height:52px;max-width:100px}
  #app .top.pp-storefront-header .topnav{display:none}
  #app .top.pp-storefront-header .nav-actions{
    order:2;
    margin-left:auto;
    flex:0 0 auto;
    gap:9px;
  }
  #app .top.pp-storefront-header .currency-title{clip-path:inset(50%)}
  #app .top.pp-storefront-header .currency-control select{
    width:85px;
    min-width:85px;
    max-width:85px;
    height:40px;
    min-height:40px;
    padding:0 27px 0 10px;
  }
  #app .top.pp-storefront-header .currency-control::after{right:14px}
  #app .top.pp-storefront-header .nav-actions>a.btn.small{display:none}
  #app .top.pp-storefront-header .mobile-nav{
    position:relative;
    display:block;
    order:3;
    margin-left:0;
    flex:none;
    z-index:2;
  }
  #app .top.pp-storefront-header .mobile-nav summary{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    list-style:none;
    border:1px solid rgba(134,95,124,.19);
    border-radius:11px;
    background:#fff;
    color:#31232d;
    font-size:22px;
    cursor:pointer;
  }
  #app .top.pp-storefront-header .mobile-nav summary::-webkit-details-marker{display:none}
  #app .top.pp-storefront-header .mobile-nav[open] summary{border-color:#a36a93;background:#f9f5f8}
  #app .top.pp-storefront-header .mobile-nav summary:focus-visible{outline:2px solid #82296a;outline-offset:3px}
  #app .top.pp-storefront-header .mobile-nav nav{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    z-index:3;
    width:min(310px,calc(100vw - 30px));
    padding:9px;
    border:1px solid #e5e1e4;
    border-radius:13px;
    background:#fffafb;
    box-shadow:0 16px 36px rgba(45,22,39,.17);
  }
  #app .top.pp-storefront-header .mobile-nav nav a{
    display:block;
    padding:12px 14px;
    border-radius:7px;
    color:#382b35;
    font-size:13px;
  }
  #app .top.pp-storefront-header .mobile-nav nav a:hover,
  #app .top.pp-storefront-header .mobile-nav nav a:focus-visible{
    background:#f5f3f4;
  }
}
@media(max-width:380px){
  #app .top.pp-storefront-header{height:64px;padding:0 12px;gap:6px}
  #app .top.pp-storefront-header .logo{height:46px;max-width:82px}
  #app .top.pp-storefront-header .nav-actions{gap:5px}
  #app .top.pp-storefront-header .currency-control select{width:76px;min-width:76px;max-width:76px;height:38px;min-height:38px;padding:0 23px 0 8px;font-size:11px}
  #app .top.pp-storefront-header .currency-control::after{right:11px}
  #app .top.pp-storefront-header .nav-actions>.iconbtn[data-action="cart"]{width:38px;height:40px;min-width:38px}
  #app .top.pp-storefront-header .mobile-nav summary{width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
  #app .top.pp-storefront-header,
  #app .top.pp-storefront-header .topnav a,
  #app .top.pp-storefront-header .topnav a::after,
  #app .top.pp-storefront-header .nav-actions>a.btn.small,
  #app .top.pp-storefront-header .currency-control select{transition:none}
}