/* A single decorative scene for the site's dark page introductions. */
body.maycep-storefront {
  --maycep-hero-shade: linear-gradient(90deg, #262626 19%, rgb(38 38 38 / 96%) 34%, rgb(38 38 38 / 24%) 70%, transparent);
  --maycep-hero-art-position: right -12px center;
  --maycep-hero-art-size: clamp(355px, 64%, 680px) auto;
  --maycep-hero-glow-end: 71%;
  --maycep-hero-glow: radial-gradient(ellipse at right, #492a34, #262626 var(--maycep-hero-glow-end));
  --maycep-hero-background:
    var(--maycep-hero-shade), url("./hero-electronics.svg"), var(--maycep-hero-glow);
}

body.maycep-storefront.woocommerce-account.logged-in {
  --maycep-hero-shade: linear-gradient(90deg, #D55F00 19%, rgb(213 0 0 / 96%) 34%, rgb(213 0 0 / 24%) 70%, transparent);
  --maycep-hero-glow: radial-gradient(ellipse at right, #F27A1A, #D55F00 var(--maycep-hero-glow-end));
}

html body.maycep-storefront #main-content :is(
  .yc-cp-hero--compact, .yc-about-intro, .yc-blog-hero, .yc-ot-hero-copy, .yc-contact-hero
),
html body.maycep-storefront.yc-taksit-apply-active #main-content .drna-page .drna-hero,
html body.maycep-storefront.woocommerce-account.logged-in #main-content .yc-flow-heading {
  background-color: #262626;
  background-image: var(--maycep-hero-background);
  background-repeat: no-repeat;
  background-position: center, var(--maycep-hero-art-position), center;
  background-size: 100% 100%, var(--maycep-hero-art-size), 100% 100%;
}

html body.maycep-storefront #main-content :is(.yc-cp-hero--compact, .yc-about-intro, .yc-contact-hero) {
  text-align: start;
}

html body.maycep-storefront #main-content :is(.yc-cp-hero--compact, .yc-contact-hero) p {
  max-inline-size: 52ch;
  margin-inline: 0;
}

html body.maycep-storefront.woocommerce-account.logged-in #main-content .yc-flow-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  min-block-size: 198px;
  padding-block: clamp(22px, 3vw, 32px);
  background-color: var(--yc-primary, #F27A1A);
  background-blend-mode: normal, screen, normal;
  text-align: start;
}

html body.maycep-storefront.woocommerce-account.logged-in #main-content .yc-flow-heading .yc-eyebrow {
  color: #fff;
}

html body.maycep-storefront.woocommerce-account.logged-in #main-content .yc-flow-heading h1 {
  margin-block: 2px 6px;
  font-size: clamp(27px, 3.3vw, 38px);
  line-height: 1.12;
}

html body.maycep-storefront.woocommerce-account.logged-in #main-content .yc-flow-heading > div {
  max-inline-size: 50ch;
}

html body.maycep-storefront.woocommerce-account.logged-in #main-content .yc-flow-heading > a {
  align-self: flex-start;
  border-color: rgb(255 255 255 / 74%);
  background-color: #B65100;
}

html body.maycep-storefront.woocommerce-account.logged-in #main-content .yc-flow-heading > a:is(:hover, :focus-visible) {
  border-color: #fff;
  background-color: #A54900;
}

@media (max-width: 720px) {
  body.maycep-storefront {
    --maycep-hero-shade: linear-gradient(90deg, #262626 6%, rgb(38 38 38 / 96%) 32%, rgb(38 38 38 / 78%) 78%, rgb(38 38 38 / 66%));
    --maycep-hero-art-position: right -62px center;
    --maycep-hero-art-size: clamp(325px, 94%, 460px) auto;
    --maycep-hero-glow-end: 83%;
  }

  body.maycep-storefront.woocommerce-account.logged-in {
    --maycep-hero-shade: linear-gradient(90deg, #CE5C00 6%, rgb(206 0 0 / 97%) 32%, rgb(206 0 0 / 84%) 78%, rgb(206 0 0 / 72%));
  }
}

@media (forced-colors: active) {
  body.maycep-storefront {
    --maycep-hero-background: none;
  }
}