/* guestnav.css (GL-GUESTNAV, hand-written, NOT generated): the guest notice band, the guest tile placeholder, the guest PDP login button
   and the Login-as-Customer admin bar (cards 7d540e, a6d49f, 68e658). Tokens only, square corners from --s-radius, fluid widths.
   Loaded after the bundles by devir_ported_page. UNLAYERED on purpose: the generated bundles are unlayered, so a layered rule would lose to
   pdp.css ".pdp-bar__price .devir-login-cta a" (small underlined link, navy text) no matter the specificity. */
  /* One notice per page: the full sentence, once. Tiles below carry only the short placeholder. */
  .devir-guest-band { background: var(--s-surface-tint); border-block-end: var(--s-rule-w) solid var(--s-rule); }
  .devir-guest-band__in { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-sp-4); row-gap: var(--s-sp-1); width: min(100% - 2 * var(--s-gutter), var(--s-wrap)); margin-inline: auto; padding-block: var(--s-sp-2); }
  .devir-guest-band__text { margin: 0; font: var(--t-small); color: var(--s-text-muted); }
  .devir-guest-band__link { display: inline-flex; align-items: center; min-height: var(--s-target); font: var(--t-small); font-weight: 600; color: var(--s-text); text-decoration: underline; text-underline-offset: var(--p-4); }
  .devir-guest-band__link:hover { text-decoration-color: var(--s-accent); text-decoration-thickness: var(--s-rule-w-2); }

  /* Tile placeholder: quiet, one short line, never a link (the band and the product page carry the action). */
  .devir-login-cta--tile { margin: 0; }
  .devir-guest-price { font: var(--t-small); color: var(--s-text-muted); white-space: normal; }

  /* Guest PDP: a real primary button, 48 px tall (--c-btn-h, 44 px target floor), square 2 px, at every width. */
  .pdp-bar__price .devir-login-cta--pdp { margin: 0; }
  .pdp-bar__price .devir-login-cta--pdp a.dv-btn { font: var(--t-button); color: var(--c-btn-fg); text-decoration: none; min-height: max(var(--c-btn-h), var(--s-target)); padding-inline: var(--c-btn-pad); }
  /* Desktop: the bar sits below the first screen, so for a guest it stays pinned to the bottom edge until its own place scrolls into view. */
  @media (min-width: 768px) { .pdp-bar.is-guest { position: sticky; inset-block-end: 0; z-index: 30; } }
  @media (max-width: 767px) {
    .pdp-bar.is-guest .pdp-bar__in { justify-content: stretch; }
    .pdp-bar.is-guest .pdp-bar__price, .pdp-bar.is-guest .devir-login-cta--pdp { flex: 1 1 auto; width: 100%; }
    .pdp-bar.is-guest .pdp-bar__price .devir-login-cta--pdp a.dv-btn { display: flex; width: 100%; background: var(--c-btn-inverse-bg); color: var(--c-btn-inverse-fg); border-color: var(--c-btn-inverse-bg); }
  }

  /* Login as Customer bar (Magento_LoginAsCustomerFrontendUi): navy, square, fluid, in the page flow above the header so it never covers it. */
  .lac-notification-sticky { position: relative; z-index: 1; }
  .lac-notification { background: var(--s-surface-navy); color: var(--s-text-on-dark); font: var(--t-small); border-block-end: var(--s-rule-w-2) solid var(--s-accent); border-radius: 0; }
  .lac-notification .top-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-sp-1) var(--s-sp-4); width: min(100% - 2 * var(--s-gutter), var(--s-wrap)); margin-inline: auto; padding-block: var(--s-sp-1); }
  .lac-notification .lac-notification-text { flex: 1 1 16rem; min-width: 0; margin: 0; padding: 0; overflow-wrap: anywhere; }
  .lac-notification .lac-notification-text strong { font-weight: 600; }
  .lac-notification .lac-notification-links { flex: 0 0 auto; margin: 0; padding: 0; }
  .lac-notification .lac-notification-links a { display: inline-flex; align-items: center; min-height: var(--s-target); padding-inline: var(--s-sp-2); font: var(--t-small); font-weight: 600; color: var(--s-text-on-dark); text-decoration: underline; text-underline-offset: var(--p-4); border-radius: 0; }
  .lac-notification .lac-notification-links a:hover { text-decoration-color: var(--s-accent); text-decoration-thickness: var(--s-rule-w-2); }
  .lac-notification :focus-visible { outline: var(--s-ring-w) solid var(--s-focus-on-dark); outline-offset: var(--p-2); }

/* The skip link hides with translateY(-120%) from the header's own top edge, which only works while the header is the first thing on the page.
   With the Login as Customer bar above it, the link slid into view over the bar. Clip it away until it takes focus instead. */
.dv-chrome .dv-skip:not(:focus-visible) { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; }

/* The bar is printed hidden and shown by lac-notice.js only while an admin session is attached. */
.lac-notification[hidden] { display: none; }