/*
 * HS Black Friday design. Every rule is scoped to html.hs-bf, a class that exists only while the
 * design is active (admin: Extensions > Modules > HS Black Friday), so the normal design is untouched.
 */
html.hs-bf {
  --bf-black: #0b0b0c;
  --bf-panel: #18181b;
  --bf-line: #2a2a2f;
  --bf-yellow: #ffd60a;
  --bf-red: #f0283c;
  --bf-white: #ffffff;
}

/* ---------- top bar ---------- */

html.hs-bf .hs-bf-bar {
  position: relative;
  z-index: 60;
  background: var(--bf-black);
  color: var(--bf-white);
  font-size: 14px;
  line-height: 1.3;
  border-bottom: 3px solid var(--bf-yellow);
}

html.hs-bf .hs-bf-bar-link,
html.hs-bf .hs-bf-bar-link:visited {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  min-height: 46px;
  padding: 7px 16px;
  color: var(--bf-white);
  text-decoration: none;
}

html.hs-bf .hs-bf-bar-link:hover .hs-bf-bar-cta { color: var(--bf-yellow); }

html.hs-bf .hs-bf-tag {
  display: inline-block;
  padding: 4px 9px 3px;
  background: var(--bf-yellow);
  color: var(--bf-black);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 3px;
  white-space: nowrap;
}

html.hs-bf .hs-bf-bar-sub { font-weight: 600; }

html.hs-bf .hs-bf-bar-cta {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--bf-yellow);
  text-underline-offset: 4px;
  white-space: nowrap;
}

html.hs-bf .hs-bf-preview-note {
  display: block;
  padding: 3px 10px;
  background: var(--bf-yellow);
  color: var(--bf-black);
  font-size: 12px;
  text-align: center;
}

html.hs-bf .hs-bf-preview-note a { color: var(--bf-black); text-decoration: underline; }

/* ---------- countdowns ---------- */

html.hs-bf .hs-bf-timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

html.hs-bf .hs-bf-timer-label { margin-right: 3px; opacity: .8; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

html.hs-bf .hs-bf-unit {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 3px 6px;
  background: var(--bf-panel);
  border: 1px solid var(--bf-line);
  border-radius: 4px;
}

html.hs-bf .hs-bf-unit b {
  min-width: 1.3em;
  color: var(--bf-yellow);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

html.hs-bf .hs-bf-unit i { font-style: normal; font-size: 11px; opacity: .75; }

html.hs-bf .hs-bf-no-days .hs-bf-unit:first-of-type { display: none; }
html.hs-bf .hs-bf-timer.hs-bf-ended { display: none; }

/* ---------- header ---------- */

/* the full-width coral strip behind the top menu is header.header-compact::before */
html.hs-bf .header .top-bar,
html.hs-bf header.header-compact::before {
  background: var(--bf-black) !important;
}

html.hs-bf .header .top-bar a,
html.hs-bf .header .top-bar .links-text,
html.hs-bf .header .top-bar .fa,
html.hs-bf .header .top-bar i {
  color: var(--bf-white) !important;
}

html.hs-bf div.main-menu.main-menu-3 > .j-menu > li.hs-bf-menu-item > a,
html.hs-bf .main-menu > .j-menu > li.hs-bf-menu-item > a {
  background: var(--bf-black) !important;
  color: var(--bf-yellow) !important;
  font-weight: 800;
  letter-spacing: .04em;
}

html.hs-bf .main-menu > .j-menu > li.hs-bf-menu-item > a .links-text { color: var(--bf-yellow) !important; }

/* ---------- home banner ---------- */

/* The Black Friday banner (written by the server right after the header) takes the place of the home slider
   ("Reduceri de toamnă"); the slider is back when the design is off or the banner is missing */
html.hs-bf .hs-bf-hero ~ .top-row .grid-row:has(.module-master_slider) {
  display: none !important;
}

/* the next row's top wave was drawn over the slider; it would cut into the banner */
html.hs-bf .hs-bf-hero ~ .top-row .grid-row:has(.module-master_slider) ~ .grid-row svg.wave-top {
  display: none !important;
}

html.hs-bf .hs-bf-hero {
  position: relative;
  margin: 0 0 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 30%, rgba(255, 214, 10, .22), transparent 45%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 14px, transparent 14px 28px),
    var(--bf-black);
  color: var(--bf-white);
  border-bottom: 4px solid var(--bf-yellow);
}

/* On the desktop home Journal3 pulls the content under the header (".desktop.route-common-home header
   { margin-bottom: -60px }", option "Top bar over"); --hs-bf-over is that height, so the banner starts below the header.
   Same selector as the theme, so it applies from the first paint. */
html.hs-bf.desktop.route-common-home .site-wrapper > header + .hs-bf-hero {
  margin-top: var(--hs-bf-over, 0px);
}

html.hs-bf .hs-bf-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 44px 24px;
}

html.hs-bf .hs-bf-hero-kicker {
  margin: 0 0 6px;
  color: var(--bf-yellow);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

html.hs-bf .hs-bf-hero-title {
  margin: 0;
  color: var(--bf-white);
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

html.hs-bf .hs-bf-hero-sub {
  max-width: 560px;
  margin: 14px 0 22px;
  color: #e7e7ea;
  font-size: clamp(16px, 1.8vw, 21px);
}

html.hs-bf .hs-bf-hero-cta,
html.hs-bf .hs-bf-hero-cta:visited {
  display: inline-block;
  padding: 14px 26px;
  background: var(--bf-yellow);
  color: var(--bf-black);
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 4px;
  transition: transform .15s ease, box-shadow .15s ease;
}

html.hs-bf .hs-bf-hero-cta:hover {
  color: var(--bf-black);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 214, 10, .35);
}

html.hs-bf .hs-bf-hero-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

html.hs-bf .hs-bf-hero-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 170px;
  background: var(--bf-red);
  color: var(--bf-white);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(240, 40, 60, .25);
  transform: rotate(-8deg);
}

html.hs-bf .hs-bf-hero-badge span { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
html.hs-bf .hs-bf-hero-badge b { font-size: 52px; font-weight: 900; line-height: 1; }

html.hs-bf .hs-bf-timer-big { gap: 8px; }
html.hs-bf .hs-bf-timer-big .hs-bf-unit { flex-direction: column; align-items: center; min-width: 64px; padding: 8px 6px; }
html.hs-bf .hs-bf-timer-big .hs-bf-unit b { font-size: 30px; line-height: 1.1; }
html.hs-bf .hs-bf-timer-big .hs-bf-unit i { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- product cards ---------- */

/* Label groups (absolutely placed over the product image) are left out until hs_blackfriday.js has given the discount labels
   their Black Friday look (.hs-bf-labels): a label that first appears is not a layout shift, a label that changes size is.
   If the script cannot load, its onerror adds html.hs-bf-nojs and the labels show in the theme style. */
html.hs-bf:not(.hs-bf-nojs) .product-labels:not(.hs-bf-labels) {
  display: none;
}

html.hs-bf .product-labels .product-label.hs-bf-discount { display: flex !important; }

html.hs-bf .product-labels .product-label.hs-bf-discount > b {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  white-space: nowrap;
  padding: 5px 8px 6px;
  background: var(--bf-black) !important;
  color: var(--bf-yellow) !important;
  border-radius: 4px !important;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

html.hs-bf .product-labels .product-label.hs-bf-discount > b::before {
  content: attr(data-hs-bf);
  margin-bottom: 3px;
  color: var(--bf-white);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

html.hs-bf .product-thumb .price-new,
html.hs-bf .product-info .product-price-new {
  color: var(--bf-red) !important;
  font-weight: 800 !important;
}

html.hs-bf .product-thumb .price-old { color: #8a8f99; }

html.hs-bf .product-thumb .btn-cart,
html.hs-bf .product-thumb .btn-cart:visited,
html.hs-bf .product-info .button-group-page .btn-cart {
  background: var(--bf-black) !important;
  color: var(--bf-white) !important;
  border-color: var(--bf-black) !important;
}

html.hs-bf .product-thumb .btn-cart:hover,
html.hs-bf .product-info .button-group-page .btn-cart:hover {
  background: var(--bf-yellow) !important;
  color: var(--bf-black) !important;
}

html.hs-bf .product-thumb .btn-cart .btn-text,
html.hs-bf .product-info .button-group-page .btn-cart .btn-text { color: inherit !important; }

/* ---------- product page strip (special price) ---------- */

html.hs-bf .hs-bf-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--bf-black);
  color: var(--bf-white);
  border-left: 4px solid var(--bf-yellow);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}

html.hs-bf .hs-bf-timer-small .hs-bf-unit { padding: 2px 5px; }

/* ---------- small screens ---------- */

@media (max-width: 767px) {
  html.hs-bf .hs-bf-bar-link { gap: 6px 10px; padding: 6px 10px; }
  html.hs-bf .hs-bf-bar-sub { display: none; }
  html.hs-bf .hs-bf-timer-label { display: none; }
  html.hs-bf .hs-bf-hero-inner { gap: 18px; padding: 24px 18px 26px; }
  html.hs-bf .hs-bf-hero-sub { margin: 10px 0 16px; }
  html.hs-bf .hs-bf-hero-side { width: 100%; flex-direction: row; justify-content: flex-start; }
  /* the subtitle already says "-40%"; keep the banner short on phones */
  html.hs-bf .hs-bf-hero-badge { display: none; }
  html.hs-bf .hs-bf-timer-big .hs-bf-unit { min-width: 54px; }
  html.hs-bf .hs-bf-timer-big .hs-bf-unit b { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html.hs-bf .hs-bf-hero-cta { transition: none; }
}