/* Offline interaction layer. The site's original compiled CSS is preserved verbatim.
   All motion now lives in animations.js — anything that set transitions or
   transforms on animated elements was removed so GSAP owns those properties. */
.offline-toast{position:fixed;z-index:2147483647;right:18px;bottom:18px;background:#f2e6cc;color:#0d0b08;border-radius:4px;padding:14px 18px;font:16px/1.1 PeperoncinoSans,Impact,sans-serif;text-transform:uppercase;transform:translateY(30px);opacity:0;transition:.25s}
.offline-toast.show{transform:none;opacity:1}

/* Drawers are positioned by the original stylesheet and revealed by GSAP;
   keep them non-interactive until their timeline opens them. */
[data-menu],[data-cart]{pointer-events:none}
[data-menu].is-open,[data-cart].is-open{pointer-events:auto}

/* The empty-cart state should lead with its message, without product artwork. */
[data-cart-content] div:has(>img[alt="empty bottle"]){display:none!important}

/* Keep Cole's face anchored while the portrait scrubs through its frame. */
img[src="/offline-assets/cole-kitchen.webp"]{object-position:50% 0}

/* Portrait assets in the About rail must not stretch their square card. */
div:has(>img[src="/offline-assets/pinche-gavacho-bottles-kitchen.webp"]),
div:has(>img[src="/offline-assets/put-on-anything-gavacho-tacos.webp"]){
  aspect-ratio:1;
  min-height:0;
  overflow:hidden;
}
img[src="/offline-assets/pinche-gavacho-bottles-kitchen.webp"],
img[src="/offline-assets/put-on-anything-gavacho-tacos.webp"]{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}

/* About page: replace the product card rail with the split buy-pack feature. */
.pg-about-pack-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:.75rem;
  width:100%;
  margin-top:var(--spacing-30,7.5rem);
  padding:0 .75rem;
}
.pg-about-pack-media,
.pg-about-pack-panel{
  min-height:min(56rem,calc(100svh - 1.5rem));
  overflow:hidden;
  border-radius:.75rem;
}
.pg-about-pack-media img,
.pg-about-pack-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.pg-about-pack-media img{object-position:50% 50%}
.pg-about-pack-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:3rem;
  padding:3.25rem 3rem 2.25rem;
  background:#211c15;
  color:var(--color-foreground);
}
.pg-about-pack-panel::before{
  content:"";
  position:absolute;
  inset:.75rem;
  z-index:0;
  pointer-events:none;
  border:1px dashed color-mix(in oklab,var(--color-foreground) 35%,transparent);
  border-radius:.65rem;
}
.pg-about-pack-copy,
.pg-about-pack-art{
  position:relative;
  z-index:1;
}
.pg-about-pack-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  text-transform:uppercase;
}
.pg-about-pack-kicker{
  margin:0 0 1.6rem;
  color:color-mix(in oklab,var(--color-foreground) 55%,transparent);
  font-family:var(--font-serif);
  font-size:clamp(2.5rem,4vw,4.8rem);
  line-height:.85;
}
.pg-about-pack-copy h2{
  margin:0;
  font-family:var(--font-serif);
  font-size:clamp(4.25rem,7vw,8rem);
  font-weight:400;
  line-height:.82;
  letter-spacing:0;
}
.pg-about-pack-subtitle{
  margin:.9rem 0 2.7rem;
  font-family:var(--font-serif);
  font-size:clamp(1.75rem,2.4vw,3rem);
  line-height:.9;
}
.pg-about-pack-options{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2.5rem;
  margin-bottom:3rem;
  font-family:var(--font-serif);
  font-size:clamp(1.4rem,1.9vw,2.25rem);
  line-height:1;
}
.pg-about-pack-options button{
  position:relative;
  border:0;
  padding:0;
  background:transparent;
  color:color-mix(in oklab,var(--color-foreground) 52%,transparent);
  font:inherit;
  line-height:inherit;
  text-transform:uppercase;
  cursor:pointer;
}
.pg-about-pack-options .is-selected{
  color:var(--color-foreground);
}
/* The shop selector rings its chosen pack with a hand-drawn ellipse; this one
   approximated it with `border-radius:999px` plus a 5deg tilt, which reads as a
   geometric pill rather than the same mark. Use the real artwork — the identical
   path the shop page inlines, lifted to /offline-assets/pack-ellipse.svg so it is
   fetched once and cached instead of repeated inline. Driven as a mask so it
   still takes its colour from `currentColor`, as the inline SVG does.

   The padding used to sit on `.is-selected` alone, so choosing a pack resized
   that button and shoved its neighbour sideways. The ring is drawn outside the
   label now, so both buttons keep the same box and nothing shifts. */
.pg-about-pack-options button::before{
  content:"";
  position:absolute;
  inset:-0.5em -1.05em;
  background-color:currentColor;
  -webkit-mask:url(/offline-assets/pack-ellipse.svg) center / 100% 100% no-repeat;
  mask:url(/offline-assets/pack-ellipse.svg) center / 100% 100% no-repeat;
  transform:scale(0);
  transition:transform .3s ease;
  pointer-events:none;
}
.pg-about-pack-options .is-selected::before{
  transform:scale(1);
}
@media (prefers-reduced-motion: reduce){
  .pg-about-pack-options button::before{transition:none}
}
.pg-about-pack-options button:focus-visible{
  border-radius:999px;
  outline:2px solid var(--color-foreground);
  outline-offset:4px;
}
.pg-about-pack-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:min(24rem,72%);
  min-height:5.8rem;
  border-radius:.75rem;
  background:var(--color-foreground);
  color:var(--color-background);
  font-family:var(--font-serif);
  font-size:clamp(1.35rem,1.6vw,1.9rem);
  line-height:1;
  text-decoration:none;
  text-transform:uppercase;
  transition:transform .2s ease,background-color .2s ease,color .2s ease;
}
.pg-about-pack-button:hover,
.pg-about-pack-button:focus-visible{
  transform:translateY(-2px);
  background:transparent;
  color:var(--color-foreground);
  outline:2px solid var(--color-foreground);
  outline-offset:3px;
}
.pg-about-pack-art{
  display:block;
  position:relative;
  aspect-ratio:1.85;
  overflow:hidden;
  border-radius:.75rem;
  background:#f15922;
  color:var(--color-foreground);
  text-decoration:none;
  text-transform:uppercase;
}
.pg-about-pack-art img{object-position:50% 48%}

@media (max-width:1023px){
  .pg-about-pack-section{
    grid-template-columns:1fr;
    margin-top:var(--spacing-20,5rem);
  }
  .pg-about-pack-media,
  .pg-about-pack-panel{
    min-height:auto;
  }
  .pg-about-pack-media{aspect-ratio:1}
  .pg-about-pack-panel{padding:2.5rem 1.5rem 1.5rem}
  .pg-about-pack-copy h2{font-size:clamp(3.6rem,16vw,6rem)}
  .pg-about-pack-kicker{font-size:clamp(2rem,10vw,3.4rem)}
  .pg-about-pack-subtitle{font-size:clamp(1.45rem,7vw,2.5rem)}
  .pg-about-pack-options{
    gap:1.5rem;
    margin-bottom:2rem;
  }
  .pg-about-pack-button{
    width:100%;
    min-height:4.8rem;
  }
  .pg-about-pack-art{aspect-ratio:1.15}
}

/* The hero now presents one signature sauce at every breakpoint. */
section[data-home-hero] [data-slider-arrow="true"]{display:none!important}

/* Supporting hero bottles: the original centre bottle remains the largest layer. */
.pg-hero-bottle-field{position:absolute;inset:-4% 0 -8%;z-index:8;overflow:visible;pointer-events:none}
.pg-hero-float-bottle{position:absolute;height:auto;opacity:var(--pg-bottle-opacity,.8);transform:rotate(var(--pg-bottle-rotation));transform-origin:50% 50%;will-change:transform,opacity;filter:drop-shadow(0 22px 19px rgba(13,11,8,.2))}
.pg-hero-float-bottle__drift,.pg-hero-float-bottle img{display:block;width:100%;height:auto}
.pg-hero-float-bottle__drift{will-change:transform}
.pg-hero-float-accent{position:absolute;height:auto;opacity:var(--pg-accent-opacity,.72);transform:rotate(var(--pg-accent-rotation));transform-origin:50% 50%;will-change:transform,opacity;filter:drop-shadow(0 10px 10px rgba(13,11,8,.18))}
.pg-hero-float-accent img{display:block;width:100%;height:auto}

@media (max-width:1023px){
  .pg-hero-bottle-field{inset:0 -3% -5%}
  .pg-hero-float-bottle[data-hero-float-bottle="1"]{left:5%!important;top:51%!important;width:56px!important}
  .pg-hero-float-bottle[data-hero-float-bottle="2"]{left:auto!important;right:3%!important;top:20%!important;width:31px!important}
  .pg-hero-float-accent[data-hero-float-accent="1"]{left:7%!important;top:4%!important;width:64px!important}
  .pg-hero-float-accent[data-hero-float-accent="2"]{left:2%!important;top:77%!important;width:38px!important}
  .pg-hero-float-accent[data-hero-float-accent="3"]{left:auto!important;right:24%!important;top:71%!important;width:34px!important}
  .pg-hero-float-accent[data-hero-float-accent="4"]{left:auto!important;right:4%!important;top:64%!important;width:54px!important}
}

@media (max-width:639px){
  .pg-hero-bottle-field{inset:2% -5% -4%}
  .pg-hero-float-bottle[data-hero-float-bottle="1"]{left:2%!important;top:53%!important;width:38px!important}
  .pg-hero-float-bottle[data-hero-float-bottle="2"]{right:3%!important;top:18%!important;width:23px!important}
  .pg-hero-float-accent[data-hero-float-accent="2"],
  .pg-hero-float-accent[data-hero-float-accent="3"]{display:none}
  .pg-hero-float-accent[data-hero-float-accent="1"]{left:7%!important;top:5%!important;width:36px!important}
  .pg-hero-float-accent[data-hero-float-accent="4"]{right:13%!important;top:48%!important;width:23px!important}
}

@media (prefers-reduced-motion:reduce){
  .pg-hero-float-bottle,.pg-hero-float-accent{will-change:auto}
  .pg-hero-float-bottle__drift{will-change:auto}
}

body[data-shop-page="true"] section:has(>[class*="w-col-8"] [aria-label="Every bottle of Pinche Gavacho is made with real ingredients, big attitude, and zero patience for bland food."]){
  display:none!important;
}
body[data-shop-page="true"] section[data-shop-details-repositioned="true"],
body[data-shop-page="true"] section[data-shop-details-repositioned="true"]>.mt-12{
  margin-top:0!important;
}
.pg-bundle-shop-now{
  position:relative;
  z-index:20;
  display:inline-flex;
  min-width:18rem;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  align-self:center;
  padding:1.1rem 2rem;
  border:2px solid var(--color-foreground);
  border-radius:.75rem;
  background:var(--color-foreground);
  color:var(--color-background);
  font-family:var(--font-serif);
  font-size:var(--text-xl);
  font-weight:400;
  line-height:var(--text-xl--line-height);
  letter-spacing:var(--text-xl--letter-spacing);
  text-transform:uppercase;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.pg-bundle-shop-now:hover,
.pg-bundle-shop-now:focus-visible{
  background:transparent;
  color:var(--color-foreground);
  transform:translateY(-2px);
}
.pg-bundle-shop-now:focus-visible{
  outline:3px solid var(--color-foreground);
  outline-offset:3px;
}
[data-pack-option]:focus-visible{
  border-radius:999px;
  outline:2px solid var(--color-foreground);
  outline-offset:4px;
}
@media (max-width:639px){
  .pg-bundle-shop-now{
    width:100%;
    min-width:0;
    padding:.95rem 1.25rem;
  }
}