/* ============================================================================
   Core theme — Announcement bar.

   A compact strip above the header. Every rule is scoped under
   .storly-announce; configuration arrives as data-* attributes and custom
   properties on the root, so the Builder can restyle it live without
   re-rendering markup.

   Height is deliberately driven by padding + line-height rather than a fixed
   value, so it adapts to typography and translation without clipping.
   ============================================================================ */

.storly-announce {
  /* Written by section.php and the Builder */
  /* Global-derived; core-dna.css maps this to --core-primary. */
  --ann-bg: var(--core-primary);
  --ann-fg: #fff;
  --ann-link: #fff;
  --ann-link-hover: #fff;
  --ann-link-weight: 600;
  --ann-em: #fff;
  --ann-em-weight: 700;
  --ann-border-color: #fff;
  --ann-border-width: 1px;
  --ann-icon-color: #fff;
  --ann-control: #fff;
  --ann-control-opacity: .62;
  --ann-weight: 500;
  --ann-tracking: .01em;
  --ann-icon: 14px;

  /* The merchant's values arrive as *-set and are consumed here, so each
     breakpoint can still adapt them. Writing --ann-py/--ann-px inline would
     outrank every media query below. */
  --ann-size-set: 13px;
  --ann-py-set: 11px;
  --ann-px-set: 24px;
  --ann-size: var(--ann-size-set);
  --ann-py: var(--ann-py-set);
  --ann-px: var(--ann-px-set);

  /* Space reserved at both edges so centred text stays centred when the close
     button is present. Symmetric on purpose — pinning the button on one side
     only would pull the message off centre. */
  --ann-reserve: 0px;

  position: relative;
  z-index: 130;
  background: var(--ann-bg);
  color: var(--ann-fg);
  font-family: var(--font);
}

.storly-announce *,
.storly-announce *::before,
.storly-announce *::after { box-sizing: border-box; }

.storly-announce[data-dismissible="1"] { --ann-reserve: 34px; }
.storly-announce[data-bg-style="gradient"] { background: var(--ann-gradient, var(--ann-bg)); }
.storly-announce[data-border="1"] {
  border-bottom: var(--ann-border-width) solid color-mix(in srgb, var(--ann-border-color) 14%, transparent);
}
.storly-announce[data-sticky="stick"] { position: sticky; top: 0; }

.storly-announce__inner {
  position: relative;
  display: flex;
  width: 100%;
  max-width: var(--ann-max, var(--container-max, 1360px));
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-inline: auto;
  padding-block: var(--ann-py);
  padding-inline: calc(var(--ann-px) + var(--ann-reserve));
}
.storly-announce[data-align="start"] .storly-announce__inner { justify-content: flex-start; }
.storly-announce[data-container="narrow"] { --ann-max: 1040px; }
.storly-announce[data-container="wide"]   { --ann-max: 1520px; }
.storly-announce[data-container="full"]   { --ann-max: none; }

/* --------------------------------------------------------------- messages

   All messages share one grid cell, so the bar is as tall as the tallest
   message and rotating between them cannot shift the page. */

.storly-announce__viewport { min-width: 0; }

.storly-announce__list {
  display: grid;
  grid-template-areas: "message";
  margin: 0;
  padding: 0;
  list-style: none;
}

.storly-announce__item {
  grid-area: message;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease, cubic-bezier(.4, 0, .2, 1));
}
.storly-announce__item.is-active { opacity: 1; pointer-events: auto; }
.storly-announce[data-align="start"] .storly-announce__item { justify-content: flex-start; }

.storly-announce[data-transition="slide"] .storly-announce__item {
  transform: translateY(6px);
  transition: opacity 320ms var(--ease, cubic-bezier(.4, 0, .2, 1)),
              transform 320ms var(--ease, cubic-bezier(.4, 0, .2, 1));
}
.storly-announce[data-transition="slide"] .storly-announce__item.is-active { transform: translateY(0); }

.storly-announce__body {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 9px;
  color: inherit;
  font-size: var(--ann-size);
  font-weight: var(--ann-weight);
  letter-spacing: var(--ann-tracking);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
.storly-announce[data-align="start"] .storly-announce__body { justify-content: flex-start; text-align: start; }
.storly-announce[data-uppercase="1"] .storly-announce__body { text-transform: uppercase; }

/* Long and translated strings wrap rather than being cut with an ellipsis. */
.storly-announce__text { min-width: 0; }
.storly-announce__em { color: var(--ann-em); font-weight: var(--ann-em-weight); }

.storly-announce__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--ann-icon-color);
  font-size: var(--ann-icon);
  line-height: 1;
}
.storly-announce__icon svg { width: var(--ann-icon); height: var(--ann-icon); }

.storly-announce__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* The bar is slim, but its call to action still has to be tappable. */
  min-height: 32px;
  flex: none;
  color: var(--ann-link);
  font-weight: var(--ann-link-weight);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ann-link) 45%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast, .16s) var(--ease, ease);
}
.storly-announce__link:hover { color: var(--ann-link-hover); text-decoration-color: currentColor; }
/* The bar stays slim; the link's touch area reaches past it to 44px. */
.storly-announce__link::after { position: absolute; inset: -6px -8px; content: ""; }
.storly-announce[data-underline="0"] .storly-announce__link { text-decoration: none; }
.storly-announce[data-underline="0"] .storly-announce__link:hover { text-decoration: underline; }

.storly-announce__body--link { text-decoration: none; }
.storly-announce__body--link:hover .storly-announce__text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.storly-announce :is(.storly-announce__link, .storly-announce__body--link):focus-visible,
.storly-announce :is(.storly-announce__nav, .storly-announce__close):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------- controls */

.storly-announce__nav,
.storly-announce__close {
  display: inline-grid;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ann-control);
  cursor: pointer;
  opacity: var(--ann-control-opacity);
  place-items: center;
  transition: opacity var(--dur-fast, .16s) var(--ease, ease);
}
.storly-announce__nav:hover,
.storly-announce__close:hover { opacity: 1; }

.storly-announce__nav { width: 30px; height: 22px; }
.storly-announce__nav svg { width: 15px; height: 15px; }
[dir="rtl"] .storly-announce__nav svg { transform: scaleX(-1); }

.storly-announce__close {
  position: absolute;
  inset-inline-end: 2px;
  inset-block-start: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
}
.storly-announce__close svg { width: 15px; height: 15px; }

.storly-announce[data-arrows="0"] .storly-announce__nav { display: none; }

/* -------------------------------------------------- dismissal & visibility */

.storly-announce.is-dismissed { display: none; }

/* Per-message device visibility. The rotation script skips anything hidden
   here, so a message limited to one breakpoint never leaves a blank bar. */
@media (max-width: 767px) {
  .storly-announce--no-mobile,
  .storly-announce__item.is-no-mobile { display: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .storly-announce--no-tablet,
  .storly-announce__item.is-no-tablet { display: none; }
}
@media (min-width: 1025px) {
  .storly-announce--no-desktop,
  .storly-announce__item.is-no-desktop { display: none; }
}

/* ------------------------------------------------------------ builder only */

.storly-announce--empty {
  background: var(--bg-s);
  color: var(--text-s);
}
.storly-announce__empty {
  margin: 0;
  padding: 14px 20px;
  font-size: 13px;
  text-align: center;
}

/* A bar that is scheduled off, or limited to another page, still renders in
   the Builder so it stays editable — marked, not hidden. */
.storly-announce--builder-hidden { opacity: .5; }
.storly-announce--builder-hidden .storly-announce__inner { filter: grayscale(1); }

/* Restoring a dismissed bar while editing. */
.storly-announce__restore {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: 0;
  background: var(--bg-s);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
}

/* ================================================================ tablet === */

@media (max-width: 1024px) {
  .storly-announce { --ann-px: min(var(--ann-px-set), 22px); }
}

/* ================================================================ mobile ===
   Icons are the first thing to go: the message matters more than decoration
   once the line starts wrapping. */

@media (max-width: 767px) {
  .storly-announce {
    --ann-px: min(var(--ann-px-set), 10px);
    --ann-py: calc(var(--ann-py-set) * .95);
    --ann-size: min(var(--ann-size-set), 12.5px);
  }

  /* Reserving space for the close button on both sides costs a whole line of
     text at this width. Reserve it only on the side the button is actually on;
     the small asymmetry is invisible next to the wrap it prevents. */
  .storly-announce__inner {
    padding-inline: var(--ann-px) calc(var(--ann-px) + var(--ann-reserve));
    gap: 4px;
  }
  .storly-announce__icon { display: none; }
  .storly-announce__body { gap: 3px 7px; }
  .storly-announce__nav { width: 26px; height: 20px; }
  .storly-announce__nav svg { width: 14px; height: 14px; }
  .storly-announce[data-dismissible="1"] { --ann-reserve: 26px; }
  .storly-announce__close { inset-inline-end: 0; width: 40px; height: 40px; }
}

@media (max-width: 380px) {
  .storly-announce { --ann-px: min(var(--ann-px-set), 8px); }
  .storly-announce__body { gap: 2px 6px; }
}

/* ========================================================= reduced motion === */

@media (prefers-reduced-motion: reduce) {
  .storly-announce__item,
  .storly-announce__link,
  .storly-announce__nav,
  .storly-announce__close { transition-duration: .01ms; }
  .storly-announce[data-transition="slide"] .storly-announce__item { transform: none; }
}