/* Pork & Pistons — frozen storefront polish
   Header and hero geometry live here only. Keep this file as the single source
   of truth so refreshes never flash an older configuration. */

html,body{max-width:100%!important;overflow-x:hidden!important}
@supports (overflow:clip){html,body{overflow-x:clip!important}}

/* Frozen hero */
#accueil.hero{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  background:#13110f!important;
  overflow:hidden!important;
}
#accueil.hero picture{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:calc(100svh - var(--header-h))!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
#accueil.hero .hero-image{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  margin:0!important;
  object-fit:cover!important;
  object-position:center calc(30% + 20px)!important;
  background:#13110f!important;
}

/* Frozen header geometry */
.brand-logo{width:164px!important}
@media(max-width:1220px){.brand-logo{width:146px!important}}

@media(min-width:1001px){
  header .wrap{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0 24px!important;
    display:block!important;
    position:relative!important;
  }
  .brand-link{
    position:absolute!important;
    left:54px!important;
    top:0!important;
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    transform:none!important;
    z-index:3!important;
  }
  .brand-logo{
    position:relative!important;
    left:auto!important;
    top:42px!important;
  }
  .top-nav{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:min(700px,48vw)!important;
    max-width:700px!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(5,max-content)!important;
    align-items:center!important;
    justify-content:space-between!important;
    column-gap:12px!important;
    gap:12px!important;
    z-index:2!important;
  }
  .top-nav .nav-link{
    justify-self:center!important;
    text-align:center!important;
    padding-left:0!important;
    padding-right:0!important;
    white-space:nowrap!important;
  }
  .language-switcher{
    position:absolute!important;
    right:58px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:204px!important;
    height:65px!important;
    flex-basis:204px!important;
    margin:0!important;
    z-index:3!important;
  }
}

@media(min-width:1001px) and (max-width:1220px){
  header .wrap{padding:0 20px!important}
  .brand-link{left:40px!important}
  .top-nav{
    width:min(560px,50vw)!important;
    max-width:560px!important;
    column-gap:8px!important;
    gap:8px!important;
  }
  .top-nav .nav-link{
    font-size:10.5px!important;
    letter-spacing:.02em!important;
  }
  .language-switcher{
    right:40px!important;
    width:182px!important;
    height:59px!important;
    flex-basis:182px!important;
  }
}

@media(max-width:1000px){
  .language-switcher{width:176px!important;height:57px!important;flex-basis:176px!important;transform:none!important}
}

@media(max-width:850px){
  header .wrap{
    width:100%!important;
    max-width:none!important;
    padding:0 14px!important;
    display:grid!important;
    grid-template-columns:42px 1fr auto!important;
    align-items:center!important;
    gap:8px!important;
  }
  .pp-menu-toggle{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    margin:0!important;
    width:36px!important;
    height:32px!important;
    border-radius:9px!important;
    z-index:145!important;
  }
  .brand-link{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:start!important;
    display:block!important;
    position:relative!important;
    left:auto!important;
    top:auto!important;
    height:auto!important;
    z-index:140!important;
  }
  .brand-logo{
    position:static!important;
    display:block!important;
    width:132px!important;
    max-height:76px!important;
    object-fit:contain!important;
  }
  .language-switcher{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    position:relative!important;
    right:auto!important;
    top:auto!important;
    width:172px!important;
    height:56px!important;
    flex-basis:172px!important;
    margin:0!important;
    transform:none!important;
    z-index:145!important;
  }
}

@media(max-width:600px){
  header .wrap{
    padding:0 10px!important;
    grid-template-columns:38px 1fr auto!important;
    gap:6px!important;
  }
  .pp-menu-toggle{width:34px!important;height:31px!important}
  .brand-logo{width:106px!important;max-height:66px!important}
  #accueil.hero picture{height:calc(100svh - var(--header-h))!important}
  #accueil.hero .hero-image{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important}
  .language-switcher{width:152px!important;height:51px!important;flex-basis:152px!important;transform:none!important}
}
@media(max-width:420px){
  .language-switcher{width:138px!important;height:47px!important;flex-basis:138px!important}
}

/* One-piece biker language selector artwork with three invisible click zones */
.language-switcher{
  padding:0!important;
  gap:0!important;
  background:url('/pork-pistons-language-selector.webp') center/contain no-repeat!important;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.42));
}
.language-switcher::before{display:none!important;content:none!important}
.language-switcher .lang-chip{
  position:absolute!important;
  top:23%!important;
  height:64%!important;
  width:27%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  box-shadow:none!important;
  clip-path:inset(0 round 9px)!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  cursor:pointer!important;
  transform:none!important;
  filter:none!important;
  z-index:3!important;
  outline:none!important;
}
.language-switcher .lang-chip[data-lang="fr"]{left:2.7%!important}
.language-switcher .lang-chip[data-lang="en"]{left:36.5%!important}
.language-switcher .lang-chip[data-lang="lo"]{left:70.3%!important}
.language-switcher .lang-chip::before,.language-switcher .lang-chip::after{display:none!important;content:none!important}
.language-switcher .lang-chip:hover{background:rgba(255,255,255,.025)!important}
.language-switcher .lang-chip:focus-visible{outline:1px solid rgba(211,58,79,.65)!important;outline-offset:-4px!important}
.language-switcher .lang-chip.active{background:rgba(181,34,54,.045)!important}

/* Premium blackened steel header */
header{
  background:
    radial-gradient(circle at 12% 24%,rgba(255,255,255,.055) 0 1px,transparent 1.8px),
    radial-gradient(circle at 68% 70%,rgba(255,255,255,.03) 0 1px,transparent 1.7px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.008) 0 1px,rgba(0,0,0,.018) 1px 3px),
    linear-gradient(180deg,#242321 0%,#171614 18%,#0f0f0e 56%,#171614 82%,#24211e 100%)!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 5px 0 #080807,
    inset 0 7px 0 rgba(126,118,108,.45),
    inset 0 9px 0 #1d1b18,
    inset 0 -2px 0 rgba(255,255,255,.12),
    inset 0 -5px 0 #080706,
    inset 0 -7px 0 rgba(105,98,90,.42),
    inset 0 -9px 0 #1b1917,
    0 10px 28px rgba(0,0,0,.42)!important;
}
header::before,header::after{display:none!important;content:none!important}
header .wrap::before,header .wrap::after{
  content:'';
  position:absolute;
  left:8px;
  right:8px;
  height:3px;
  pointer-events:none;
  z-index:1;
  border-radius:999px;
}
header .wrap::before{
  top:10px;
  background:linear-gradient(180deg,#8e877f 0%,#4d4842 42%,#171513 48%,#6b655e 68%,#2a2724 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.12),0 2px 5px rgba(0,0,0,.55);
  opacity:.78;
}
header .wrap::after{
  bottom:10px;
  background:linear-gradient(180deg,#2a2724 0%,#6b655e 32%,#171513 52%,#4d4842 58%,#8e877f 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.08),0 -2px 5px rgba(0,0,0,.5);
  opacity:.72;
}
.top-nav .nav-link{text-shadow:0 1px 0 #000,0 0 5px rgba(255,255,255,.025)}

/* Products */
.products-screen{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 13% 18%,rgba(125,31,46,.045),transparent 24%),
    radial-gradient(circle at 88% 78%,rgba(80,54,36,.045),transparent 26%),
    linear-gradient(145deg,#f5eee6 0%,#eee3d7 48%,#f8f1ea 100%)!important;
}
.products-screen::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.55;
  background-image:url('/pork-pistons-butcher-paper-pattern.webp');
  background-repeat:repeat;
  background-size:820px auto;
  background-position:center top;
  filter:saturate(.82) contrast(.98);
}
.products-screen::after{display:none!important;content:none!important}
#produits .card{
  border-color:#d9cabc!important;
  box-shadow:0 9px 22px rgba(55,34,22,.07),inset 0 1px rgba(255,255,255,.8)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(252,248,243,.96))!important;
}
#produits .card:hover{box-shadow:0 18px 36px rgba(55,34,22,.12),0 0 0 1px rgba(125,31,46,.04)!important}
#produits .filters{position:relative}
#produits .filter-btn{box-shadow:inset 0 1px rgba(255,255,255,.55)}

/* Jagged rock/asphalt transition between location copy and moving road */
.location-copy{position:relative;z-index:3;overflow:visible!important}
.location-copy::after{
  content:'';
  position:absolute;
  z-index:20;
  top:0;
  right:-24px;
  width:38px;
  height:100%;
  pointer-events:none;
  background:linear-gradient(90deg,#171412 0%,#211b18 42%,rgba(30,25,22,.86) 70%,rgba(30,25,22,0) 100%);
  clip-path:polygon(0 0,56% 0,76% 4%,48% 9%,82% 15%,55% 21%,88% 28%,51% 34%,76% 41%,47% 48%,91% 55%,54% 62%,80% 69%,46% 76%,86% 83%,52% 90%,73% 96%,58% 100%,0 100%);
  filter:drop-shadow(6px 0 7px rgba(0,0,0,.28));
}
.ride-scene.road-animated{box-shadow:inset 18px 0 24px rgba(18,15,13,.11)}

@media(max-width:850px){
  .location-copy::after{
    top:auto;
    left:0;
    right:0;
    bottom:-20px;
    width:100%;
    height:34px;
    background:linear-gradient(180deg,#171412 0%,#211b18 42%,rgba(30,25,22,.83) 70%,rgba(30,25,22,0) 100%);
    clip-path:polygon(0 0,100% 0,100% 55%,95% 73%,89% 48%,83% 82%,76% 52%,69% 88%,62% 56%,55% 78%,48% 49%,41% 85%,34% 55%,27% 80%,20% 47%,13% 76%,7% 52%,0 68%);
    filter:drop-shadow(0 6px 7px rgba(0,0,0,.25));
  }
  .ride-scene.road-animated{box-shadow:inset 0 16px 24px rgba(18,15,13,.1)}
}
@media(max-width:600px){.products-screen::before{opacity:.46;background-size:650px auto}}