/* Interaction layer: preserves the approved v7 layout and palette. */
:root {--ease-ritual:cubic-bezier(.2,.65,.3,1)}
.skip-link {position:fixed;left:20px;top:12px;z-index:100;background:var(--card);color:var(--ink);padding:12px 18px;border:1px solid var(--ink);border-radius:12px;transform:translateY(-160%)}
.skip-link:focus {transform:none}
.no-script {padding:18px;text-align:center;background:var(--card)}
button:disabled {cursor:default}
button,a,summary,input,select { -webkit-tap-highlight-color:transparent }
:is(.nav a,.logo,.link,.shop-back,.cart-remove,.fgrid a[href],.shop-summary a) {transition:color .22s var(--ease-ritual),text-decoration-color .22s var(--ease-ritual)}
.nav a::before {content:"";position:absolute;left:4px;right:4px;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-ritual)}
.nav a:focus-visible::before {transform:scaleX(1)}
.cart,.burger,.filters button,.qty button {transition:background .22s var(--ease-ritual),color .22s var(--ease-ritual),border-color .22s var(--ease-ritual)}
.cart b {transition:background .22s var(--ease-ritual),color .22s var(--ease-ritual)}
.btn {--button-ground:var(--paper-2);--button-line:var(--ink)}
.btn.on-dark {--button-ground:var(--cocoa);--button-line:var(--cream)}
.btn.on-ember {--button-ground:var(--ember-deep);--button-line:var(--cream)}
.btn-fill {transition:background .22s var(--ease-ritual),box-shadow .22s var(--ease-ritual),transform .22s var(--ease-ritual)}
.btn-fill:active {transform:translateY(1px);box-shadow:none}
.package-shot {scale:1;transition:scale .7s var(--ease-ritual)}
.pcard,.catalog-product {transition:box-shadow .35s var(--ease-ritual),border-color .3s var(--ease-ritual)}
:is(.pcard,.catalog-product):focus-within {border-color:var(--ember-deep);box-shadow:0 8px 28px #6a39200e}
.sense .ico {transition:background .3s var(--ease-ritual),color .3s var(--ease-ritual),border-color .3s var(--ease-ritual)}
.sense .ico svg {transition:stroke .3s var(--ease-ritual)}
.badge-round {transition:rotate .6s var(--ease-ritual)}
.faq summary {transition:color .22s var(--ease-ritual)}
.faq summary i {transition:background .25s var(--ease-ritual),border-color .25s var(--ease-ritual)}
.faq summary i::before,.faq summary i::after {transition:background .25s var(--ease-ritual),transform .25s var(--ease-ritual)}
.toast {max-width:calc(100vw - 32px);width:max-content;text-align:center;pointer-events:none;box-shadow:0 8px 28px #21160f26}
.order-tools {display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.order-tool {min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper-2);font-size:14px;transition:background .2s ease,border-color .2s ease}
.order-preview {display:block;width:100%;min-height:190px;resize:vertical;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--card);font:400 14px/1.6 var(--sans);color:var(--ink);margin-top:12px}
.shop-confirmation {overflow-wrap:anywhere}
.shop-confirmation strong {display:block;margin-bottom:5px}
.fgrid a[aria-disabled="true"] {color:var(--cream-2)}
.contact-pending {font-size:14px;color:var(--cream-2);padding-block:6px}
.shop-form[aria-busy="true"] button[type="submit"] {opacity:.7;cursor:wait}
/* Correct pre-existing narrow-screen overflow in the approved About heading. */
@media(max-width:820px) {#about .ihero .display {font-size:clamp(43px,9vw,74px)!important}.nav a::before {display:none}}
@media(max-width:490px) {#checkout .shop-head .display {font-size:clamp(38px,10vw,48px)}}
@media(hover:hover) and (pointer:fine) {
  .nav a:hover::before {transform:scaleX(1)}
  :is(.logo,.link,.shop-back,.cart-remove,.fgrid a[href]):hover {color:var(--ember-deep)}
  #home .hdr :is(.logo,.nav a):hover,#home .hero-copy .link:hover {color:var(--honey)}
  .footer .fgrid a[href]:hover {color:var(--ember)}
  .cart:hover,.burger:hover {background:var(--ink);color:var(--cream)}
  .cart:hover b {background:var(--cream);color:var(--ink)}
  .burger:hover span {background:var(--cream);box-shadow:0 5px 0 var(--cream),0 -5px 0 var(--cream)}
  #home .hdr :is(.cart,.burger):hover {background:#ffe8ce14;border-color:var(--honey);color:var(--honey)}
  .filters button[aria-pressed="false"]:hover {background:var(--sand);border-color:var(--ember-deep)}
  .qty button:not(:disabled):hover {background:var(--paper-2);border-radius:50%}
  .prow.dark .qty button:not(:disabled):hover {background:var(--cocoa-2)}
  .btn:not(#home .hero-copy .btn):hover {box-shadow:0 3px 0 -1.5px var(--button-ground),0 3px 0 0 var(--button-line)}
  .btn-fill:not(.shop-primary):hover {transform:translateY(-2px);box-shadow:0 5px 12px #a84a1c22}
  :is(.pcard,.catalog-product):hover {border-color:var(--ember-deep);box-shadow:0 10px 28px #6a392012}
  :is(.pcard,.catalog-product):hover .package-shot {scale:1.035}
  .sense:hover .ico {background:var(--ember-deep);border-color:var(--ember-deep)}
  .sense:hover .ico svg {stroke:var(--cream)}
  .badge-round:hover {rotate:9deg}
  .faq summary:hover {color:var(--ember-deep)}
  .faq summary:hover i {background:var(--ink)}
  .faq summary:hover i::before,.faq summary:hover i::after {background:var(--cream)}
  .order-tool:hover {background:var(--sand);border-color:var(--ink)}
}
/* Floating glass navigation follows the full page, beyond the hero frame. */
.floating-header-space {height:92px}
.has-floating-header {scroll-padding-top:108px}
:is(#home,#catalog) .hdr.floating-header {
  --header-rgb:33,22,15;
  --header-line:255,232,206;
  --stage:#21160f;--light:#ffe8ce;--honey:#ffc28a;
  position:fixed;inset:16px 16px auto;z-index:40;
  width:auto;height:76px;margin:0;padding:0 28px;
  border:1px solid rgba(var(--header-line),.2);border-radius:22px;
  background:rgb(var(--header-rgb));color:var(--light);
  box-shadow:0 8px 28px #1c130e18,inset 0 1px 0 #ffffff14;
}
#catalog .hdr.floating-header {--header-rgb:236,225,206;--header-line:43,29,22;color:var(--ink)}
:is(#home,#catalog) .floating-header .logo {font-size:20px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :is(#home,#catalog) .hdr.floating-header {
    background:rgba(var(--header-rgb),.82);
    -webkit-backdrop-filter:blur(18px) saturate(125%);
    backdrop-filter:blur(18px) saturate(125%);
  }
}
@media (min-width:821px) and (max-width:1000px) {
  :is(#home,#catalog) .floating-header .nav {gap:22px}
}
@media (max-width:820px) {
  .floating-header-space {height:76px}
  .has-floating-header {scroll-padding-top:96px}
  :is(#home,#catalog) .hdr.floating-header {inset:10px 10px auto;height:68px;padding:0 16px;border-radius:18px}
  :is(#home,#catalog) .floating-header .logo {font-size:17px;gap:7px}
  :is(#home,#catalog) .floating-header .nav.open {
    top:calc(100% + 8px);left:0;right:0;max-height:calc(100dvh - 110px);overflow-y:auto;
    background:rgba(var(--header-rgb),.97);color:inherit;border-color:rgba(var(--header-line),.25);
    box-shadow:0 10px 26px #1c130e20;
  }
  #home .floating-header .nav.open a {border-bottom-color:#ffe8ce29}
}
@media (max-width:360px) {
  :is(#home,#catalog) .hdr.floating-header {padding-inline:12px}
  :is(#home,#catalog) .floating-header .logo {font-size:15px;gap:6px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto!important}
  *,*::before,*::after {animation:none!important;transition:none!important}
  :is(.pcard,.catalog-product) .package-shot {scale:1!important}
  .badge-round {rotate:0deg!important}
  .btn:hover,.btn-fill:hover,#home .hero-art .float-card:hover {transform:none!important}
}
