/* Encabezado; solo la marca queda fija */
.top-in { min-height: 64px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; line-height: 1; }
.brand .wm { display: grid; gap: 1px; font-family: var(--display); }
.brand .wm b { font-weight: 800; font-size: 26px; line-height: 0.86; letter-spacing: 0; white-space: nowrap; }
.secs-bar { min-height: 44px; }
.secs { max-width: 1120px; margin: 0 auto; display: flex; overflow-x: auto; scrollbar-width: none; }
.secs::-webkit-scrollbar { display: none; }
.secs a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--muted); font-weight: 600; font-size: 15px; text-decoration: none; background: linear-gradient(var(--ink), var(--ink)) center bottom / 0 3px no-repeat; }
@media (hover: hover) { .secs a:hover { color: var(--ink); } }
.secs a[aria-current="page"] { color: var(--ink); background-size: calc(100% - 24px) 3px; }
@media (max-width: 339px) { .brand .wm b { font-size: 21px; } }
@media (min-width: 760px) { .brand .wm b { font-size: 30px; } .secs a { padding: 0 18px; } .secs a[aria-current="page"] { background-size: calc(100% - 36px) 3px; } }

/* Línea "for Struktura Group" (también en el pie) y botón My Rewards */
.brand .logo { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.brand .for { font-style: normal; font-family: var(--display); font-weight: 700; font-size: 10px; line-height: 1.05; letter-spacing: 0.03em; text-transform: none; color: var(--btn); width: min-content; opacity: 0; animation: forFlash 10s steps(1, end) infinite; }
@keyframes forFlash { 0%, 100% { opacity: 0; } 6%, 30% { opacity: 1; } 36% { opacity: 0; } }
.struk-line { display: flex; align-items: center; gap: 12px; color: var(--btn); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; }
.struk-line img { width: 64px; height: 64px; border-radius: 14px; flex: none; }
.rw { width: auto; min-width: 48px; padding: 0 8px; border: 1.5px solid var(--btn); color: var(--btn); font-size: 12px; font-weight: 700; line-height: 1.05; letter-spacing: 0.02em; text-align: center; animation: rwGlow 2.6s ease-in-out infinite; }
@keyframes rwGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 201, 51, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 201, 51, 0.35); } }
@media (prefers-reduced-motion: reduce) { .rw { animation-timing-function: steps(1, end); } }
@media (min-width: 760px) { .rw { padding: 0 12px; gap: 4px; font-size: 14px; } .brand .for { width: auto; white-space: nowrap; font-size: 13px; } }
@media (max-width: 420px) {
  .top-in { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .tools-r { gap: 0; }
  .brand { gap: 6px; min-height: 44px; }
  .brand .wm b { font-size: 20px; }
  .brand .for { font-size: 9px; }
  .brand .logo { width: 26px; height: 26px; }
  .tools-r .cart-btn:not(.rw) { width: 44px; }
  .rw { padding: 0 5px; font-size: 11px; }
}
@media (max-width: 359px) { .brand .wm b { font-size: 16px; } .brand .for { font-size: 8px; } .brand .logo { width: 22px; height: 22px; } }
/* Con "Mis pedidos" visible hay menos espacio: primero se compacta, luego se quita el logo y al final la letra roja */
@media (max-width: 420px) {
  .top:has(#ordersBtn:not([hidden])) .brand { gap: 4px; }
  .top:has(#ordersBtn:not([hidden])) .brand .wm b { font-size: 18px; }
  .top:has(#ordersBtn:not([hidden])) .brand .logo { width: 22px; height: 22px; }
  .top:has(#ordersBtn:not([hidden])) .rw { padding: 0 3px; }
}
@media (max-width: 375px) { .top:has(#ordersBtn:not([hidden])) .brand .logo { display: none; } }
@media (max-width: 359px) { .top:has(#ordersBtn:not([hidden])) .brand .for { display: none; } }
@media (max-width: 339px) { .brand .wm b { font-size: 16px; } .brand .for { display: none; } .cart-btn:not(.rw) { width: 44px; } }