/* Pork & Pistons — premium storefront finish */
:root{
  --pp-oxblood:#7f1f2e;
  --pp-oxblood-deep:#541520;
  --pp-brass:#b8915e;
  --pp-ink:#171513;
  --pp-steel:#262320;
  --pp-paper:#f7f0e8;
  --pp-line:rgba(69,49,36,.20);
}

/* Contact: large, restrained brand mark in the background. */
#contact.contact-screen{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 18%,rgba(127,31,46,.065),transparent 28%),
    radial-gradient(circle at 84% 70%,rgba(81,56,38,.07),transparent 28%),
    linear-gradient(145deg,#f1e6db 0%,#eadbcd 52%,#f4ece4 100%)!important;
}
#contact.contact-screen::before{
  content:"";
  position:absolute;
  z-index:0;
  right:-8vw;
  bottom:-18%;
  width:min(760px,68vw);
  aspect-ratio:1;
  background:url('/pork-pistons-logo.webp') center/contain no-repeat;
  opacity:.075;
  filter:grayscale(.18) sepia(.12) contrast(1.06);
  transform:rotate(-5deg);
  transform-origin:center;
  pointer-events:none;
}
#contact .screen-inner,#contact footer{position:relative;z-index:1}

/* Product cards: warm workshop paper + precise metal/oxblood detailing. */
#produits .card{
  overflow:hidden;
  border:1px solid rgba(73,51,37,.18)!important;
  border-radius:16px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,244,238,.97)),
    repeating-linear-gradient(135deg,rgba(73,51,37,.018) 0 1px,transparent 1px 8px)!important;
  box-shadow:
    0 10px 25px rgba(44,29,20,.075),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(89,61,42,.045)!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
#produits .card::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,transparent 0%,rgba(184,145,94,.72) 18%,rgba(127,31,46,.92) 50%,rgba(184,145,94,.72) 82%,transparent 100%);
  opacity:.82;
  pointer-events:none;
}
#produits .card:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(104,71,48,.30)!important;
  box-shadow:
    0 22px 42px rgba(44,29,20,.14),
    0 6px 14px rgba(127,31,46,.055),
    inset 0 1px 0 rgba(255,255,255,.96)!important;
}
#produits .card h3{
  letter-spacing:-.018em;
  color:#251b17;
}
#produits .card .price{
  display:inline-flex;
  align-items:center;
  width:max-content;
  color:var(--pp-oxblood)!important;
  font-weight:900!important;
  letter-spacing:.01em;
}
#produits .card .price::before{
  content:"";
  width:18px;
  height:1px;
  margin-right:8px;
  background:linear-gradient(90deg,var(--pp-brass),var(--pp-oxblood));
}

/* Lao category row: one clean line, with no scrollbar/underline artifact. */
html[lang="lo"] #produits .products-head{
  align-items:flex-start;
  flex-direction:column;
  gap:18px;
}
html[lang="lo"] #produits .filters{
  width:100%;
  display:flex;
  flex-wrap:nowrap!important;
  justify-content:center!important;
  align-items:center;
  gap:8px;
  padding:2px 2px 7px;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  overflow:visible;
}
html[lang="lo"] #produits .filters::before,
html[lang="lo"] #produits .filters::after{content:none!important;display:none!important}
html[lang="lo"] #produits .filter-btn{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:14px!important;
  line-height:1.35;
  padding:10px 16px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.72),0 2px 5px rgba(52,34,24,.045)!important;
}
html[lang="lo"] #produits .filter-btn.active{
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 3px 7px rgba(91,24,35,.16)!important;
}

/* Story frames: less generic, more crafted workshop panel. */
#histoire .step{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(221,196,161,.12)!important;
  border-radius:13px!important;
  background:
    radial-gradient(circle at 92% 12%,rgba(184,145,94,.07),transparent 26%),
    linear-gradient(145deg,rgba(255,255,255,.047),rgba(255,255,255,.018))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.12);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
#histoire .step::before{
  content:"";
  position:absolute;
  left:0;top:14px;bottom:14px;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--pp-brass),var(--pp-oxblood),transparent);
  opacity:.78;
}
#histoire .step:hover{
  transform:translateX(3px);
  border-color:rgba(221,196,161,.22)!important;
}

/* Contact card: blackened steel rather than a flat black box. */
#contact .contact-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(205,172,126,.22);
  border-radius:16px!important;
  background:
    radial-gradient(circle at 86% 12%,rgba(184,145,94,.09),transparent 25%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    linear-gradient(160deg,#292522 0%,#171513 48%,#211d1a 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 24px 55px rgba(48,29,18,.20)!important;
}
#contact .contact-card::before{
  content:"";
  position:absolute;
  left:28px;right:28px;top:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--pp-brass),var(--pp-oxblood),var(--pp-brass),transparent);
  opacity:.82;
}
#contact .contact-item{
  border-top:0!important;
  border:1px solid rgba(83,59,43,.13);
  border-left:3px solid rgba(127,31,46,.72);
  border-radius:10px;
  padding:14px 16px!important;
  background:rgba(255,255,255,.34);
  box-shadow:inset 0 1px rgba(255,255,255,.55);
}
#contact .contact-item strong{color:var(--pp-oxblood)!important}

/* Shared premium controls. No faux leather/chrome: subtle bevel, oxblood and aged brass. */
#produits .filter-btn,
.contact-btn,
.hero-cta,
.pp-add,
.pp-submit{
  border-radius:10px!important;
  letter-spacing:.015em;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease!important;
}
#produits .filter-btn{
  border:1px solid rgba(81,58,43,.18)!important;
  background:linear-gradient(180deg,#f3e9de 0%,#e5d7ca 100%)!important;
  color:#4a382f!important;
  box-shadow:inset 0 1px rgba(255,255,255,.72),0 3px 8px rgba(52,34,24,.05)!important;
}
#produits .filter-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(127,31,46,.34)!important;
}
#produits .filter-btn.active{
  color:#fff!important;
  border-color:#9f3040!important;
  background:linear-gradient(180deg,#8f2939 0%,#641923 100%)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 6px 14px rgba(91,24,35,.20)!important;
}
.contact-btn.primary,
.hero-cta,
.pp-add,
.pp-submit{
  color:#fff!important;
  border:1px solid rgba(211,170,116,.28)!important;
  background:linear-gradient(180deg,#922a3b 0%,#681923 100%)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.16),
    inset 0 -1px rgba(37,8,12,.55),
    0 8px 17px rgba(89,21,32,.18)!important;
}
.contact-btn.primary:hover,
.hero-cta:hover,
.pp-add:hover:not(:disabled),
.pp-submit:hover:not(:disabled){
  transform:translateY(-2px)!important;
  filter:brightness(1.04);
  box-shadow:
    inset 0 1px rgba(255,255,255,.18),
    0 11px 23px rgba(89,21,32,.25)!important;
}
.contact-btn.secondary{
  border:1px solid rgba(197,166,126,.34)!important;
  color:#f3e7d9!important;
  background:linear-gradient(180deg,#2e2a27,#1c1917)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 7px 14px rgba(0,0,0,.18);
}
.contact-btn.secondary:hover{transform:translateY(-2px);border-color:rgba(216,182,136,.52)!important}

/* Floating cart must be transparent from the very first paint. */
.pp-cart-fab{
  border:0!important;
  background:transparent!important;
  background-color:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:visible!important;
  letter-spacing:0!important;
}
.pp-cart-fab::before,.pp-cart-fab::after{content:none!important;display:none!important}
.pp-cart-fab img{background:transparent!important;border:0!important;box-shadow:none!important}

/* Checkout surfaces follow the same design language. */
.pp-drawer-card{
  border-left:1px solid rgba(97,68,48,.16)!important;
  background:
    radial-gradient(circle at 90% 7%,rgba(127,31,46,.055),transparent 23%),
    linear-gradient(160deg,#f7efe7 0%,#eee1d4 100%)!important;
}
.pp-cart-row{
  border-bottom:1px solid rgba(93,65,47,.14)!important;
}
.pp-checkout input,.pp-checkout textarea,.pp-checkout select{
  border:1px solid rgba(83,59,43,.22)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:inset 0 1px 2px rgba(54,36,25,.035)!important;
}
.pp-checkout input:focus,.pp-checkout textarea:focus,.pp-checkout select:focus{
  outline:none!important;
  border-color:rgba(127,31,46,.55)!important;
  box-shadow:0 0 0 3px rgba(127,31,46,.08)!important;
}
.pp-proof-wrap{
  border:1px dashed rgba(127,31,46,.28)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.52)!important;
}

/* Finer location/contact separators. */
.location-fact{
  border-top:1px solid rgba(236,215,189,.15)!important;
}
.location-fact strong{letter-spacing:.025em}

@media(max-width:850px){
  #contact.contact-screen::before{width:min(650px,92vw);right:-28vw;bottom:-8%;opacity:.06}
  #contact .contact-card{border-radius:14px!important}
  html[lang="lo"] #produits .filters{
    justify-content:flex-start!important;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  html[lang="lo"] #produits .filters::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
}
@media(max-width:600px){
  #contact.contact-screen::before{width:115vw;right:-48vw;bottom:1%;opacity:.052}
  #produits .card{border-radius:14px!important}
  #contact .contact-item{grid-template-columns:92px 1fr!important;padding:12px 13px!important}
  .contact-btn{width:100%}
  html[lang="lo"] #produits .filter-btn{font-size:13px!important;padding:9px 13px!important}
}