/* Standalone pages (/tarjeta, /cuenta) inside the storefront's chrome: the
   page is an open storefront panel, without the panel's opening motion. */
.sf-panel-nav>:is(.sf-page-back,.sf-page-jump){display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 0;background:transparent;font:11px/1.4 var(--sf-mono);text-transform:uppercase;letter-spacing:.025em}
.sf-panel.sf-page{animation:none}
.sf-standalone :is(.sf-header,.sf-aside) :is(button,a):focus-visible{outline:2px solid var(--sf-red);outline-offset:4px}
/* The card keeps its own two-column composition inside the panel. */
.sf-page .loyalty-page{max-width:none;min-height:0;margin:0;background:transparent}
@media(hover:hover){.sf-panel-nav>:is(.sf-page-back,.sf-page-jump):hover{text-decoration:underline;text-underline-offset:5px}}
@media(min-width:701px){
 .sf-panel-nav>:is(.sf-page-back,.sf-page-jump){min-height:0;padding:0 0 24px;font:10px 'IBM Plex Mono',monospace;letter-spacing:.04em}
 /* A short page still fills the window, like the home grid. */
 .sf-standalone{display:flex;flex-direction:column;min-height:100dvh}
 .sf-standalone>.sf-layout{flex:1}
 .sf-standalone .sf-home{display:flex;flex-direction:column}
 .sf-standalone .sf-page{flex:1}
}
@media(max-width:700px){
 .sf-panel.sf-page{position:relative;inset:auto;z-index:auto;flex:1;width:100%;margin:0;height:auto;max-height:none;min-height:0}
 .sf-panel-nav>:is(.sf-page-back,.sf-page-jump){padding:0;min-height:36px;font:11px/1.4 var(--sf-mono);letter-spacing:0}
}