/* Shop + Socials buttons in the top bar of every page.
   Filled colors + an icon + a soft shine that sweeps across every few seconds so they get noticed. */
.tb-wrap{display:inline-flex;align-items:center;gap:8px}
.tb{position:relative;overflow:hidden;isolation:isolate;display:inline-flex!important;align-items:center;gap:7px;min-height:42px;padding:0 17px;border-radius:999px;
  font:600 13.5px/1 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.02em;text-transform:none;white-space:nowrap;text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,filter .25s ease}
.tb svg{width:17px;height:17px;flex:none}
/* !important: the home page's nav link color would otherwise win */
.tb-shop{background:#9c4a5a;color:#fffaf6!important;box-shadow:0 10px 24px -12px rgba(156,74,90,.95)}
.tb-soc{background:linear-gradient(135deg,#e2c08a,#b98d4f);color:#3a221c!important;box-shadow:0 10px 24px -12px rgba(185,141,79,.95)}
.tb::after{content:"";position:absolute;z-index:-1;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:tbShine 5s ease-in-out infinite}
.tb-soc::after{animation-delay:.4s}
.tb-shop .dot{width:7px;height:7px;border-radius:50%;background:#fffaf6;animation:tbPulse 2.4s ease-out infinite}
@keyframes tbShine{0%,64%{left:-70%}84%,100%{left:135%}}
@keyframes tbPulse{0%{box-shadow:0 0 0 0 rgba(255,250,246,.7)}70%,100%{box-shadow:0 0 0 7px rgba(255,250,246,0)}}
@media (hover:hover) and (pointer:fine){ .tb:hover{transform:translateY(-2px);filter:brightness(1.06)} .tb-shop:hover{box-shadow:0 14px 28px -12px rgba(156,74,90,1)} .tb-soc:hover{box-shadow:0 14px 28px -12px rgba(185,141,79,1)} }
.tb:active{transform:scale(.96)}
.tb:focus-visible{outline:2px solid #3a221c;outline-offset:3px}
.tb[aria-current]{box-shadow:0 0 0 2px #fffaf6,0 0 0 3.5px currentColor}
.tb-shop[aria-current]{box-shadow:0 0 0 2px #fffaf6,0 0 0 3.5px #9c4a5a}
.tb-soc[aria-current]{box-shadow:0 0 0 2px #fffaf6,0 0 0 3.5px #b98d4f}
@media (max-width:640px){
  .tb-wrap{gap:6px}
  .tb{min-height:40px;padding:0 12px;font-size:13px;gap:6px}
  .tb svg{width:15px;height:15px}
}
@media (max-width:359px){ .tb svg{display:none} .tb{padding:0 11px} }
/* Socials menu */
.tb-pop{position:fixed;z-index:1000;padding:6px;border-radius:20px;background:#fffaf6;box-shadow:0 24px 60px -20px rgba(58,34,28,.55),0 0 0 1px rgba(58,34,28,.1);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:#3a221c;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.7,.2,1)}
.tb-pop[hidden]{display:none!important}
.tb-pop.on{opacity:1;transform:none}
.tb-pop a{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 10px;border-radius:14px;color:#3a221c;text-decoration:none;transition:background .2s}
.tb-pop a:hover,.tb-pop a:focus-visible{background:#f6e6e0;outline:none}
.tb-pop .ic{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:#3a221c;color:#fffaf6}
.tb-pop a:nth-child(1) .ic{background:linear-gradient(135deg,#c97884,#9c4a5a)}
.tb-pop a:nth-child(3) .ic{background:linear-gradient(135deg,#e2c08a,#b98d4f);color:#3a221c}
.tb-pop .ic svg{width:19px;height:19px}
.tb-pop .tx{flex:1;min-width:0;line-height:1.25}
.tb-pop b{display:block;font-weight:600;font-size:15px}
.tb-pop small{display:block;font-size:12.5px;color:#8a6a60;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-pop .ar{color:#8a6a60;font-size:14px}
.tb-pop .all{justify-content:center;min-height:46px;margin-top:4px;border-top:1px solid rgba(58,34,28,.1);border-radius:0 0 14px 14px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){ .tb::after,.tb-shop .dot{animation:none} .tb-pop{transition:none} }
