/**
 * Accessibility layer — loaded last so it wins on equal specificity.
 *
 * Everything here is cross-cutting: focus indication, motion, the skip link
 * and the screen-reader utility. Component sheets keep their own focus styles
 * where they already had one; this fills in everything else.
 */

/* ---------------------------------------------------------------- focus --
 * One ring for the whole site. #FF2E6E clears 3:1 against both the dark page
 * (5.65:1 on #0A0410) and the cream polaroid surfaces (3.33:1 on #FFF6E4),
 * so the same colour works wherever a control lands. The 3px offset keeps it
 * readable on a pink button, because the gap shows the page behind it.
 */
:focus-visible{
  outline:3px solid #FF2E6E;
  outline-offset:3px;
}

/* Fields that trade the outline for a border/background change still need a
   ring — the border alone is not a reliable indicator at 1px. */
.lh-field input:focus-visible,.lh-field textarea:focus-visible,
.lh-field select:focus-visible,
.lh-woo input:focus-visible,.lh-woo select:focus-visible,.lh-woo textarea:focus-visible,
.zip input:focus-visible,
.pdp-woo-form .quantity input:focus-visible{
  outline:3px solid #FF2E6E;
  outline-offset:2px;
}

/* The skip target takes focus programmatically; a ring around the whole page
   would be noise. */
#main:focus{outline:none;}

/* Older engines that do not know :focus-visible fall back to :focus rather
   than to nothing at all. */
@supports not selector(:focus-visible){
  a:focus,button:focus,input:focus,select:focus,textarea:focus,[tabindex]:focus{
    outline:3px solid #FF2E6E;outline-offset:3px;
  }
}

/* ------------------------------------------------------------ skip link --
 * It was parked at left:-9999px and jumped to 0 on focus with no styling of
 * its own. Now it lands over the ticker as a legible pill.
 */
.skip{
  position:fixed;left:8px;top:-100px;z-index:2000;
  padding:12px 20px;border-radius:0 0 12px 12px;
  background:#FF2E6E;color:#fff;text-decoration:none;
  font-family:"Anton","Bebas Neue",Impact,sans-serif;
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  transition:top .18s ease;
}
.skip:focus,.skip:focus-visible{left:8px;top:0;outline:3px solid #FFF3D6;outline-offset:2px;}

/* ----------------------------------------------------------- reduced motion --
 * The component sheets each switch off their own animations, which has meant
 * remembering to add a rule every time one is written. This is the backstop:
 * anything that moves, anywhere, stops. Kept to 0.01ms rather than `none` so
 * animationend/transitionend handlers still fire and nothing hangs waiting.
 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto !important;}
}

/* --------------------------------------------------------------- utility --
 * Text for assistive technology only. Not display:none, which would hide it
 * from screen readers too.
 */
.lh-sr{
  position:absolute !important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ------------------------------------------------- carousel pause button --
 * Sits at the end of the hero's drink picker. Sized 30px so it is a real tap
 * target, and outlined rather than filled so it reads as a control, not a
 * seventh flavour.
 */
.pausebtn{
  display:inline-grid;place-items:center;
  width:30px;height:30px;padding:0;margin-left:2px;
  border:1.5px solid rgba(255,243,214,.5);border-radius:50%;
  background:rgba(255,243,214,.07);color:#FFF3D6;
  cursor:pointer;transition:border-color .2s ease,background .2s ease;
}
.pausebtn:hover{border-color:#FFF3D6;background:rgba(255,243,214,.16);}
.pausebtn svg{width:15px;height:15px;fill:currentColor;display:block;}
.pausebtn .pb-p{display:none;}
.pausebtn.is-paused .pb-a,.pausebtn.is-paused .pb-b{display:none;}
.pausebtn.is-paused .pb-p{display:block;}
.lh-neon .pausebtn{border-color:rgba(62,214,214,.55);color:var(--n-teal);
  background:rgba(62,214,214,.10);}
.lh-neon .pausebtn:hover{border-color:var(--n-teal);background:rgba(62,214,214,.22);}

/* --------------------------------------------------- ticker stop button --
 * Same idea as the picker's, parked at the right end of the gradient strip.
 * The fade behind it keeps the words from sliding under the glyph.
 */
.ticker{position:relative;}
.tickstop{
  position:absolute;right:0;top:0;bottom:0;z-index:2;
  display:grid;place-items:center;justify-items:end;
  width:64px;padding:0 12px 0 0;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(90deg,rgba(255,138,61,0),#FF8A3D 46%);
}
.tickstop svg{width:18px;height:18px;fill:currentColor;display:block;
  border-radius:50%;background:rgba(0,0,0,.24);padding:3px;box-sizing:content-box;}
.tickstop .pb-p{display:none;}
.tickstop.is-paused .pb-a,.tickstop.is-paused .pb-b{display:none;}
.tickstop.is-paused .pb-p{display:block;}
.tickstop:focus-visible{outline:3px solid #FFF3D6;outline-offset:-4px;}
.ticker.is-held .tt{animation-play-state:paused;}
/* Pointer users get the same thing without hunting for the button. Scoped to
   .tt rather than .ticker so hovering the button itself does not fight the
   click that is meant to start it again. */
@media (hover:hover){.tt:hover{animation-play-state:paused;}}
@media (prefers-reduced-motion:reduce){.tickstop{display:none;}}

/* Shipping-restriction notices above the cart and checkout blocks.
   The block templates do not fire the classic notice hooks, so these are
   rendered by the theme rather than by wc_print_notice. */
.lh-neon .lh-shipnote{
  margin:0 0 18px;padding:14px 18px;border-radius:12px;
  background:rgba(255,246,228,.07);border:1px solid rgba(255,246,228,.28);
  color:#FFF6E4;font-size:15px;line-height:1.5;
}
.lh-neon .lh-shipnote a{color:#FFF6E4;text-decoration:underline;font-weight:700}
.lh-neon .lh-shipnote-stop{
  background:rgba(255,46,110,.12);border-color:#FF2E6E;
}

/* WooCommerce block notices. They ship light-on-white, which on this site
   reads as a browser error rather than as part of the page. */
.lh-neon .wc-block-components-notice-banner{
  background:rgba(255,246,228,.07);border:1px solid rgba(255,246,228,.3);
  border-radius:12px;color:#FFF6E4;
}
.lh-neon .wc-block-components-notice-banner > svg{fill:#FFF6E4}
.lh-neon .wc-block-components-notice-banner.is-error{
  background:rgba(255,46,110,.12);border-color:#FF2E6E;
}
.lh-neon .wc-block-components-notice-banner.is-error > svg{fill:#FF2E6E}
.lh-neon .wc-block-components-notice-banner.is-success{
  background:rgba(120,255,200,.1);border-color:rgba(120,255,200,.55);
}
.lh-neon .wc-block-components-notice-banner a{color:#FFF6E4;font-weight:700}
.lh-neon .wc-block-components-notice-banner .wc-block-components-button__text{color:#FFF6E4}

/* Back to cart. Woo's block checkout is a one-way door without it. */
.lh-neon .lh-backtocart{margin:0 0 18px;font-size:15px}
.lh-neon .lh-backtocart a{
  color:var(--n-mist,#CFC6DE);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
}
.lh-neon .lh-backtocart a::before{content:"\2190";font-size:18px;line-height:1}
.lh-neon .lh-backtocart a:hover{color:#FFF6E4;text-decoration:underline}

/* Woo's own tick glyph sits on top of the first word. The theme already
   marks these notices with an accent bar, so the glyph is redundant. */
.lh-neon .pdp-woo-form .woocommerce-message::before,
.lh-neon .pdp .woocommerce-notices-wrapper .woocommerce-message::before,
.lh-neon .lh-woo .woocommerce-message::before,
.lh-neon .pdp-woo-form .woocommerce-info::before,
.lh-neon .lh-woo .woocommerce-info::before,
.lh-neon .pdp-woo-form .woocommerce-error::before,
.lh-neon .lh-woo .woocommerce-error::before{display:none!important}

/* The empty cart. The whole inner block is replaced in PHP; this styles it. */
.lh-neon .lh-emptycart{
  text-align:center;max-width:620px;margin:0 auto;
  padding-block:clamp(48px,9vw,110px);
}
.lh-neon .lh-emptycart h2{
  font-family:var(--n-head,inherit);color:#FFF6E4;
  font-size:clamp(30px,5vw,52px);line-height:1.05;letter-spacing:.02em;
  margin:0 0 20px;
}
.lh-neon .lh-emptycart p{
  color:var(--n-mist,#CFC6DE);font-size:17px;line-height:1.6;
  margin:0 auto;max-width:44ch;
}
.lh-neon .lh-emptycart p.lh-emptycart-cta{margin-top:clamp(56px,7vw,96px)}

/* The tier reset, in the footer of every page for an 18-tier visitor. */
.lh-neon .ftier{display:block;margin-top:10px}
.lh-neon .ftier-btn{
  background:none;border:0;padding:0;margin-left:6px;cursor:pointer;
  font:inherit;color:#FFF6E4;text-decoration:underline;text-underline-offset:3px;
}
.lh-neon .ftier-btn:hover{color:var(--n-pink,#FF2E6E)}

/* Two cans and two cards, not four. Woo's grids keep their four columns and
   leave the pair hugging the left edge, so the 18 tier centres them. */
body.lh-tier-18 .canrow{grid-template-columns:repeat(2,auto);justify-content:center;gap:40px}
body.lh-tier-18 .findgrid{
  grid-template-columns:repeat(2,minmax(0,280px));justify-content:center;
}
@media(max-width:520px){
  body.lh-tier-18 .canrow{gap:26px}
  body.lh-tier-18 .findgrid{grid-template-columns:minmax(0,280px)}
}