/* Shared interaction layer, including controls rendered after page load. */
:root{--ui-speed:160ms;--ui-ease:cubic-bezier(.2,.7,.2,1);--ui-hover:#e1e8dc;--ui-press:#d4dfce;--ui-danger:#793d30}
body :is(button,a[href],summary,input,select,textarea){transition:background-color var(--ui-speed) var(--ui-ease),color var(--ui-speed) var(--ui-ease),border-color var(--ui-speed) var(--ui-ease),opacity var(--ui-speed) var(--ui-ease),outline-color var(--ui-speed) var(--ui-ease),filter var(--ui-speed) var(--ui-ease),translate var(--ui-speed) var(--ui-ease),scale 100ms var(--ui-ease);touch-action:manipulation}
:where(button,a[href],summary){-webkit-tap-highlight-color:transparent}
:where(button,a[href],summary) .icon,:where(summary) svg,.menu-toggle span{transition:transform var(--ui-speed) var(--ui-ease)}
:where(button,a[href],summary):focus-visible{outline:3px solid var(--accent);outline-offset:4px}
:where(input,select,textarea):focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-color:var(--green)}
select{cursor:pointer}

/* Solid actions retain a distinct light label; outlined actions keep dark ink. */
.button:hover:not(:disabled){transform:none}
.button:not(.button-outline):not(:disabled):active{background:#173c2a;color:var(--white)}
.button.button-outline:not(:disabled):active{background:var(--ui-press);color:var(--ink)}

/* Press feedback works with both mouse and touch, without layout movement. */
button:not(:disabled):not([aria-disabled=true]):active,a.button:active{scale:.98;filter:brightness(.92)}
a[href]:not(.button):active,summary:active{filter:brightness(.8);text-decoration:underline;text-underline-offset:5px}
:is(.filter-list,.hero-tabs,.choice-chips,.gift-step-nav) button:not(:disabled):active,
:is(.gift-preset,.finder-option):not(:disabled):active,.pack-options button:not(:disabled):active{border-color:var(--green)}
:is(.quantity,.gallery-caption) button:not(:disabled):active,.dialog-close:active,.menu-toggle:active{background:var(--ui-press)}
.text-link:not(:disabled):active,.compare-add:not(:disabled):active,.tray-clear:active{color:var(--green);text-decoration:underline;text-underline-offset:5px}
.reset-gift:active,[data-reset-confirm]:active{background:var(--ui-danger)!important;color:var(--white)!important}

/* Selected options remain visibly selected even when the pointer moves away. */
:is(.gift-preset,.finder-option,.pack-options button,.choice-chips button)[aria-pressed=true]{outline:2px solid var(--green);outline-offset:-2px}
:is(.gift-preset,.finder-option,.pack-options button,.choice-chips button)[aria-pressed=true]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.detail-thumbs button[aria-pressed=true]{border-color:var(--green)}
.compare-add[aria-pressed=true]{text-decoration:underline;text-underline-offset:5px}
.desktop-nav a[aria-current=location]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu-toggle[aria-expanded=true]{background:var(--choice);border-radius:var(--radius)}
:is(.faq-list,.craft-details) summary>span{transition:transform var(--ui-speed) var(--ui-ease)}
:is(.faq-list details,.craft-details)[open]>summary{color:var(--green);font-weight:500}
:is(.faq-list details,.craft-details)[open]>summary>span{transform:rotate(45deg)}
.release-history details[open]>summary{color:var(--green)}

@media(hover:hover) and (pointer:fine){
  /* Every enabled button has a fallback feedback, including future controls. */
  button:not(:disabled):not([aria-disabled=true]):hover{filter:brightness(.96)}
  .button:not(:disabled):hover{translate:0 -2px}
  .button:not(.button-outline):not(:disabled):hover{background:#173c2a;color:var(--white)}
  .button.button-outline:not(:disabled):hover{background:var(--ui-hover);border-color:var(--green);color:var(--ink)}
  :is(.button,.text-link,.tea-card-bottom button):not(:disabled):hover .icon{transform:translateX(3px)}
  :is(.text-link,.tea-card-bottom button,.compare-add,.tray-clear):not(:disabled):hover{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
  a[href]:where(:not(.button):not(.brand)):hover{color:var(--green);text-decoration:underline;text-underline-offset:6px}
  .desktop-nav a:hover{background:var(--choice);border-radius:4px}
  .mobile-menu a:hover,.gift-mobile-summary:hover{background:var(--ui-hover)}
  .brand:hover{opacity:.8}
  .site-footer a.text-link:hover{color:var(--white)}
  #compare-chips button:hover{background:#f2e5df;color:var(--ui-danger)}
  .announcement a:hover,.site-footer a:hover{color:var(--white);text-decoration:underline;text-underline-offset:5px}
  .intent-strip>a:hover{background:var(--choice);border-radius:var(--radius);text-decoration:none}
  .intent-strip>a:hover strong{text-decoration:underline;text-underline-offset:5px}
  :is(.filter-list,.hero-tabs,.choice-chips,.gift-step-nav) button:not(:disabled):hover{background:var(--ui-hover);color:var(--ink);border-color:var(--green)}
  :is(.filter-list,.hero-tabs,.gift-step-nav) button:is([aria-pressed=true],[aria-current=step]):hover{background:#173c2a;color:var(--white)}
  :is(.gift-preset,.finder-option):not(:disabled):hover,.pack-options button:hover{background:var(--ui-hover);border-color:var(--green);translate:0 -2px}
  :is(.quantity,.gallery-caption) button:not(:disabled):hover,.dialog-close:hover,.menu-toggle:hover{background:var(--ui-hover);color:var(--ink)}
  .dialog-close:hover .icon{transform:rotate(90deg)}
  .hero-location>a:hover{background:var(--choice);border-radius:50%}
  .tea-image-button:hover .image-open{background:var(--green);color:var(--white)}
  .tea-image-button:hover .image-open .icon{transform:translate(2px,-2px)}
  .detail-thumbs button:hover{border-color:var(--green)}
  .gallery-tile:hover img{transform:scale(1.015)}
  .gallery-tile:hover strong{color:var(--green);text-decoration:underline;text-underline-offset:5px}
  .reset-gift:hover{background:#f2e5df;color:var(--ui-danger);text-decoration:underline;text-underline-offset:5px}
  [data-reset-confirm]:hover{background:var(--ui-danger)!important;color:var(--white)!important}
  summary:hover{background:var(--choice);color:var(--green);border-radius:4px}
  :where(input,select,textarea):not(:disabled):hover{border-color:var(--green)}
}
.gallery-tile img{transition:transform 240ms var(--ui-ease)}
.image-open{transition:background-color var(--ui-speed),color var(--ui-speed)}

button:not(:disabled):not([aria-disabled=true]):active,a.button:active{translate:0 0;filter:brightness(.9)}
.text-link:disabled{color:#666d64;background:#e5e7e0}

/* Focus is visible within the clipped quantity group and thumbnail frame. */
.quantity button:focus-visible,.detail-thumbs button:focus-visible{outline-offset:-3px}
button:disabled,button[aria-disabled=true]{cursor:not-allowed;translate:none!important;scale:1!important;filter:none!important;text-decoration:none!important}
button[aria-busy=true]{cursor:progress;outline:2px dashed var(--green);outline-offset:3px}
button[aria-busy=true]:active{scale:1}

/* Touch feedback ends on release, instead of leaving mouse hover effects stuck. */
@media(hover:none){
  .button:hover:not(:disabled){transform:none}
  .tea-image-button:hover img{transform:none}
  .tea-image-button:active img{transform:scale(1.02)}
  .intent-strip>*:hover>span:last-child{transform:none}
}
@media(prefers-reduced-motion:reduce){
  :where(button,a[href],summary,input,select,textarea){transition:none!important;translate:none!important;scale:1!important}
  :where(button,a[href],summary) .icon,.gallery-tile img,.tea-image-button img{transition:none!important;transform:none!important}
}