/* /assets/css/components/banner-carousel-common.css */
/*
 * Shared by every banner card style (standard, shop, lottery, mystery) in
 * every theme. Cards opt in through data attributes set by banner_card()
 * (includes/banners.php): data-bnr-card on the card, data-bnr-text and
 * data-bnr-media on its two halves, data-bnr-title on the headline.
 * --bnr-accent and --bnr-image come from the banner itself, and --bnr-ar is
 * its picture's width / height when known. A banner's slide is a size
 * container, so a theme can size against the card's width with cqw.
 * --bnr-room is how wide the product layout's picture may be (36cqw). A theme
 * whose cards are always dark sets --bnr-text and --bnr-text-soft on them.
 */

/* Content decides the height, so a long headline wraps instead of being cut,
   and every slide stretches to the tallest so a carousel's cards line up. */
.banner-carousel-swiper .swiper-slide { height: auto !important; display: flex !important; }
.banner-carousel-swiper .swiper-slide > * { flex: 1 1 auto; min-width: 0; }
.swiper-slide:has(> [data-bnr-card], [data-bnr-card]) { container-type: inline-size; }
[data-bnr-card] { height: 100% !important; min-height: 172px; }
@media (min-width: 640px)  { [data-bnr-card] { min-height: 200px; } }
@media (min-width: 1024px) { [data-bnr-card] { min-height: 224px; } }
[data-bnr-card][data-bnr-compact] { min-height: 0; }

/* With the height free, a percentage max-height on the image no longer
   resolves, so the image is capped here instead of growing the card. */
[data-bnr-card] [data-bnr-media] img { max-height: 8.5rem !important; }
@media (min-width: 640px)  { [data-bnr-card] [data-bnr-media] img { max-height: 10.5rem !important; } }
@media (min-width: 1024px) { [data-bnr-card] [data-bnr-media] img { max-height: 12rem !important; } }

/* On phones a row of text and button puts the button under the text. */
[data-bnr-row] { gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
@media (max-width: 639px) {
  [data-bnr-row] { flex-wrap: wrap; align-content: center; row-gap: .75rem; }
  [data-bnr-row] > * { max-width: 100% !important; }
}

[data-bnr-card] [data-bnr-title] {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  /* A long word breaks with a hyphen where the page's language allows
     (<html lang>), not at any letter. */
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
[data-bnr-card] [data-bnr-label] { color: var(--bnr-accent) !important; }
/* Headline and subtitle take their direction from their own text, so an
   English name keeps its inch mark after the number on an Arabic page. They
   still align to the page's side: with plaintext, start would follow the text. */
[data-bnr-card] :is([data-bnr-title], .bnr-sub) { unicode-bidi: plaintext; text-align: left; }
[dir="rtl"] [data-bnr-card] :is([data-bnr-title], .bnr-sub) { text-align: right; }

/* Subtitle and the live line */
.bnr-sub { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--bnr-text-soft, var(--ink-soft)); overflow-wrap: anywhere; }
.bnr-live { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: .1rem 0 0; font-size: .8rem; color: var(--bnr-text-soft, var(--ink-soft)); }
.bnr-stat { font-weight: 600; color: var(--bnr-text, var(--ink)); overflow-wrap: anywhere; }
.bnr-coin { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; }
.bnr-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-weight: 700; font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--bnr-accent);
  background: color-mix(in srgb, var(--bnr-accent) 14%, transparent);
}
.bnr-chip::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
/* Only the dot pulses: a fading chip with ticking digits looks like flicker. */
.bnr-chip.is-urgent { color: #b91c1c; background: #fee2e2; }
.bnr-chip.is-urgent::before { animation: bnr-pulse 1.6s ease-in-out infinite; }
.bnr-chip.is-ended { color: var(--ink-soft); background: color-mix(in srgb, var(--ink-soft) 14%, transparent); }
.bnr-chip.is-ended::before { display: none; }
@keyframes bnr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Both image layouts turn the card dark and show the image with the text
   over its darker side. Cover: a photo or artwork fills the card. Product: a
   cut-out image sits on the right on a spotlight of the banner's colour, no
   wider than --bnr-room, so a wide picture shrinks instead of running under
   the text. The cover's shade stays deep across the whole text column (60%
   of the card) before it fades. */
[data-bnr-layout="cover"] {
  background:
    linear-gradient(90deg, rgba(12, 12, 18, .9) 0%, rgba(12, 12, 18, .78) 45%, rgba(12, 12, 18, .6) 62%, rgba(12, 12, 18, .15) 85%, rgba(12, 12, 18, 0) 100%),
    var(--bnr-image) center / cover no-repeat,
    #0c0c12 !important;
}
[data-bnr-layout="product"] {
  background:
    linear-gradient(90deg, rgba(12, 12, 18, .92) 0%, rgba(12, 12, 18, .7) 42%, rgba(12, 12, 18, 0) 66%),
    var(--bnr-image) right 6% center / auto min(78%, calc(var(--bnr-room, 36cqw) / var(--bnr-ar, 1))) no-repeat,
    radial-gradient(circle at 80% 55%, color-mix(in srgb, var(--bnr-accent) 45%, transparent) 0%, transparent 42%),
    linear-gradient(135deg, #1b1b25 0%, #0c0c12 100%) !important;
}
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text]:not([data-bnr-row]) { max-width: 60%; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-media],
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-deco] { display: none !important; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] { position: relative; z-index: 1; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] [data-bnr-title],
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .bnr-stat { color: #fff !important; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .bnr-sub,
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .bnr-live,
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .ed-status { color: rgba(255, 255, 255, .82) !important; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-label],
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .ed-eyebrow:not([data-bnr-label]) { color: color-mix(in srgb, var(--bnr-accent) 55%, #fff) !important; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .bnr-chip:not(.is-urgent) { background: rgba(255, 255, 255, .16); color: #fff; }

/* Right-to-left: the text column sits on the right, so the dark side, the
   product and its spotlight swap sides. Phones stack them, which needs no flip. */
@media (min-width: 640px) {
  [dir="rtl"] [data-bnr-layout="cover"] {
    background:
      linear-gradient(270deg, rgba(12, 12, 18, .9) 0%, rgba(12, 12, 18, .78) 45%, rgba(12, 12, 18, .6) 62%, rgba(12, 12, 18, .15) 85%, rgba(12, 12, 18, 0) 100%),
      var(--bnr-image) center / cover no-repeat,
      #0c0c12 !important;
  }
  [dir="rtl"] [data-bnr-layout="product"] {
    background:
      linear-gradient(270deg, rgba(12, 12, 18, .92) 0%, rgba(12, 12, 18, .7) 42%, rgba(12, 12, 18, 0) 66%),
      var(--bnr-image) left 6% center / auto min(78%, calc(var(--bnr-room, 36cqw) / var(--bnr-ar, 1))) no-repeat,
      radial-gradient(circle at 20% 55%, color-mix(in srgb, var(--bnr-accent) 45%, transparent) 0%, transparent 42%),
      linear-gradient(225deg, #1b1b25 0%, #0c0c12 100%) !important;
  }
}

/* One rhythm for the text column in every style: label, headline, meta and
   button evenly spaced and centred in the card's height. The lottery ticket's
   row lays out its own text and button side by side, so it keeps its own. */
[data-bnr-card] [data-bnr-text]:not([data-bnr-row]) {
  display: flex !important; flex-direction: column; justify-content: center;
  gap: .5rem !important; padding-top: 1.25rem; padding-bottom: 1.25rem;
}
[data-bnr-card] [data-bnr-text]:not([data-bnr-row]) > * { margin-top: 0 !important; margin-bottom: 0 !important; }
[data-bnr-card] [data-bnr-text]:not([data-bnr-row]) > :last-child:not(:first-child) { margin-top: .25rem !important; }
[data-bnr-card] [data-bnr-label] { line-height: 1.2; }
[data-bnr-card] [data-bnr-title] { line-height: 1.15 !important; }
[data-bnr-card] .bnr-live { margin: 0; }

/* Phones: the text needs the card's full width, so the image moves to a band
   across the top, shown in full, and fades into the dark the text sits on.
   It is contained, not cropped, since a banner's own lettering is often in
   the image; a theme sets --bnr-phone-size (cover, 100% auto, …) to change that. */
@media (max-width: 639px) {
  [data-bnr-layout="cover"] {
    background:
      linear-gradient(180deg, rgba(12, 12, 18, 0) 0, rgba(12, 12, 18, .15) 5rem, rgba(12, 12, 18, .92) 8.5rem, #0c0c12 10rem),
      var(--bnr-image) center top / var(--bnr-phone-size, contain) no-repeat,
      #0c0c12 !important;
  }
  [data-bnr-layout="product"] {
    background:
      linear-gradient(180deg, rgba(12, 12, 18, 0) 0, rgba(12, 12, 18, 0) 6.5rem, rgba(12, 12, 18, .9) 8.75rem, #0c0c12 10rem),
      var(--bnr-image) center 1rem / auto 6.5rem no-repeat,
      radial-gradient(circle at 50% 4.25rem, color-mix(in srgb, var(--bnr-accent) 50%, transparent) 0, transparent 6.5rem),
      linear-gradient(135deg, #1b1b25 0%, #0c0c12 100%) !important;
  }
  :is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] {
    max-width: 100% !important;
    padding-top: 8.25rem !important;
    justify-content: flex-end !important;
  }
  [data-bnr-card] [data-bnr-text]:not([data-bnr-row]) { gap: .4rem !important; }
}

/* Pagination: the active dot becomes a bar that fills until the next slide. */
.banner-carousel-swiper .swiper-pagination-bullet { transition: width .3s ease; }
.banner-carousel-swiper.bnr-progress .swiper-pagination-bullet-active {
  width: 1.75rem; border-radius: 999px; opacity: 1;
  background: linear-gradient(90deg, var(--theme-600, #4f46e5) calc(var(--bnr-progress, 0) * 100%), color-mix(in srgb, var(--ink-soft) 30%, transparent) 0) !important;
}

[dir="rtl"] .banner-carousel-swiper.bnr-progress .swiper-pagination-bullet-active {
  background: linear-gradient(270deg, var(--theme-600, #4f46e5) calc(var(--bnr-progress, 0) * 100%), color-mix(in srgb, var(--ink-soft) 30%, transparent) 0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .bnr-chip.is-urgent::before { animation: none; }
}

/* /assets/css/components/banner-carousel-mystery.css */
  .banner-carousel-swiper,
  .banner-carousel-swiper .swiper-wrapper,
  .banner-carousel-swiper .swiper-slide { height: auto !important; }

  .bpc-mystery-card {
    position: relative;
    display: flex;
    overflow: hidden;
    height: 172px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 4px;
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  }
  @media (min-width: 640px)  { .bpc-mystery-card { height: 200px; } }
  @media (min-width: 1024px) { .bpc-mystery-card { height: 224px; } }

  html.dark .bpc-mystery-card { background: var(--paper-2); }

  .bpc-mystery-card::before {
    content: ''; position: absolute; top: -1px; left: 14%; right: 14%;
    height: 2px; background: var(--ink); border-radius: 0 0 2px 2px; z-index: 10;
  }

  .bpc-mystery-card:hover {
    border-color: var(--ink);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px -8px rgba(0,0,0,0.14);
  }

  .bpc-mystery-strip { width: 3px; flex-shrink: 0; align-self: stretch; }

  .bpc-mystery-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    gap: 0.4rem;
  }
  @media (min-width: 640px) { .bpc-mystery-body { padding: 1.5rem 1.75rem; } }

  .bpc-mystery-headline {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-variation-settings: 'opsz' 144, 'SOFT' 0;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.025em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: clamp(1.05rem, 2.4vw, 1.6rem);
    color: var(--ink);
    margin: 0;
  }

  .bpc-mystery-image-col {
    flex-shrink: 0;
    width: clamp(140px, 38%, 240px);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-2);
    border-left: 1px solid var(--rule);
  }
  html.dark .bpc-mystery-image-col { background: var(--paper); }

  .bpc-mystery-wash { position: absolute; inset: 0; pointer-events: none; opacity: 0.09; }

  .bpc-mystery-hero {
    position: relative; z-index: 1;
    width: 80%; height: 86%;
    object-fit: contain; object-position: center;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.20));
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    display: block;
  }
  .bpc-mystery-card:hover .bpc-mystery-hero { transform: scale(1.06) translateY(-4px); }

  .banner-carousel-swiper { padding-bottom: 0 !important; }
  .banner-carousel-swiper.has-pagination { padding-bottom: 30px !important; }
  .banner-carousel-swiper .swiper-pagination { bottom: 4px !important; }
  .banner-carousel-swiper .swiper-pagination-bullet {
    width: 6px; height: 6px;
    background: var(--rule); opacity: 1;
    transition: all 0.3s ease;
  }
  .banner-carousel-swiper .swiper-pagination-bullet-active { width: 22px; border-radius: 3px; background: var(--ink); }

/* /assets/themes/prism/assets/css/components/banner_carousel-mystery.css */
/* Prism box-style banners (components/banner_carousel.php, the box
   branch): the same white card as the standard style, the box on a soft
   round well washed with its tone (the accent's deepest step for a
   promotion, slate for a featured box). Shared frame in skin/home.css. */
html body .psm-bnr.bpc-mystery-card { height: auto; min-height: 196px; }
@media (min-width: 640px) { html body .psm-bnr.bpc-mystery-card { min-height: 220px; } }
html body .psm-bnr .bpc-mystery-body { padding: 1.6rem 1.6rem; }
@media (min-width: 640px) { html body .psm-bnr .bpc-mystery-body { padding: 2rem 2.4rem; } }
html body .psm-bnr .bpc-mystery-headline { -webkit-line-clamp: unset; overflow: visible; display: block; font-size: clamp(1.4rem, 2.7vw, 2rem); color: var(--ink); }
html body .psm-bnr .bpc-mystery-image-col {
  background:
    radial-gradient(closest-side, var(--paper-2) 0 58%, var(--paper-3) 59% 100%, transparent 100.5%) center / min(86%, 200px) min(86%, 200px) no-repeat,
    radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--psm-tone, var(--psm-accent)) 16%, transparent), transparent 75%),
    var(--paper-2) !important;
  border-inline-start: 0;
}
html body .psm-bnr .bpc-mystery-wash { opacity: 0 !important; }
html body .psm-bnr .bpc-mystery-hero { position: relative; z-index: 1; max-height: 60%; max-width: 58%; object-fit: contain; }

/* /assets/css/components/load-more.css */
/* "Load more" under a storefront grid (includes/load-more.php). The button
   is the theme's own .ed-btn-secondary; the rest takes the theme's tokens. */
.px-more { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin: 1.5rem auto 2.5rem; padding: 0 1rem; text-align: center; scroll-margin-top: 45vh; }
.px-more[hidden] { display: none; }
.px-more-status { margin: 0; font-size: 14px; color: var(--ink-soft, #475569); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.px-more-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; min-width: 12rem; max-width: 100%; padding: .65rem 1.5rem; font-weight: 600; text-decoration: none; white-space: normal; cursor: pointer; }
.px-more-btn.is-loading, .px-more-btn[aria-disabled="true"] { cursor: progress; opacity: .75; }
.px-more-btn.is-loading::before { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: px-more-spin .8s linear infinite; }
@keyframes px-more-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .px-more-btn.is-loading::before { animation: none; border-right-color: currentColor; opacity: .5; } }
.px-more-error { margin: 0; max-width: 32rem; padding: .6rem .9rem; border-radius: 10px; font-size: 14px; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
html.dark .px-more-error { color: #fecaca; background: rgb(127 29 29 / .35); border-color: rgb(248 113 113 / .45); }
.px-more-error[hidden] { display: none; }
/* Ink, not the accent: an accent shade reads under 4.5:1 on some themes' paper; the underline marks it as a link. */
.px-more-earlier { font-size: 14px; font-weight: 600; color: var(--ink, inherit); text-decoration: underline; text-underline-offset: 3px; }
.px-more-earlier:empty { display: none; }
.px-more-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.px-more-top { margin: 0 0 1rem; text-align: center; }
/* A card focused whole after "Load more" (load-more.js) shows the ring
   focus-ring.css draws, which it otherwise leaves off script-only targets:
   the reader has to see where the new cards start. */
:root [data-px-more-grid] > [tabindex="-1"]:focus-visible:not(#px-focus-off) {
  outline: 2px solid var(--px-focus-ring, var(--ink, #15131a)) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--px-focus-halo, var(--paper, #ffffff)) !important;
}