/* ==========================================================================
   MemoryC — Black Friday layer for template_new_wide
   Active only when <body> has class "blackfriday" ($_blackfriday_wide flag).
   Same hooks as css/halloween.css; see that file's header for where each lives.
     .bf-promo / .bf-countdown         tailwind/header/blackfriday_promo.html
     .bf-deals-title / .bf-nl-title    added at runtime by js/blackfriday.js
   ========================================================================== */

body.blackfriday {
  --bf-ink: #0B0B0C;
  --bf-coal: #1E1E22;
  --bf-line: #34343A;
  --bf-gold: #FFC629;
  --bf-red: #E3262E;
  --bf-paper: #F5F5F2;
}

/* ---- 1. Promo strip with countdown --------------------------------------- */
body.blackfriday .bf-promo {
  background: var(--bf-ink);
  color: var(--bf-paper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  padding: 8px 16px;
  font-size: 14px;
  text-align: center;
}
body.blackfriday .bf-promo-title {
  position: relative;
  overflow: hidden;
  font-family: "Anton", Impact, sans-serif;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bf-gold);
}
body.blackfriday .bf-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--bf-gold);
}
body.blackfriday .bf-countdown:empty { display: none; }
body.blackfriday .bf-promo a {
  background: var(--bf-gold);
  color: var(--bf-ink);
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
body.blackfriday .bf-promo a:hover { filter: brightness(1.08); }

/* ---- 2. Trust bar: gold on black, lightning bolt icons ------------------- */
body.blackfriday .tw-border-bg-neutral-400.tw-justify-between.tw-text-neutral-600 {
  background: var(--bf-coal) !important;
  border-color: var(--bf-coal) !important;
  color: var(--bf-paper) !important;
  padding: 8px 12px !important;
}
body.blackfriday .tw-border-bg-neutral-400.tw-justify-between.tw-text-neutral-600 b { color: var(--bf-gold); }
body.blackfriday .tw-border-bg-neutral-400.tw-justify-between.tw-text-neutral-600 a { color: var(--bf-paper) !important; }
body.blackfriday .tw-border-bg-neutral-400.tw-justify-between.tw-text-neutral-600 > div::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 18px;
  margin-right: 6px;
  vertical-align: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M12 1L2 14h7l-2 9 11-14h-7z' fill='%23FFC629'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- 3. Logo: little hanging SALE tag ------------------------------------ */
body.blackfriday #logoLineSection a[href="/"] { position: relative; }
body.blackfriday #logoLineSection a[href="/"]::before {
  content: "";
  position: absolute;
  left: -14px;
  top: -12px;
  width: 40px;
  height: 22px;
  transform: rotate(-16deg);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 32'%3E%3Cpath d='M12 2h44a2 2 0 012 2v24a2 2 0 01-2 2H12L2 16z' fill='%230B0B0C'/%3E%3Ccircle cx='11' cy='16' r='2.5' fill='%23FFC629'/%3E%3Ctext x='35' y='22' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='15' font-weight='700' fill='%23FFC629'%3ESALE%3C/text%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- 3b. Main menu bar (react_src/logoLineV2.js) ------------------------- */
body.blackfriday div:has(> [data-cy="menuNavbar"]) { background: var(--bf-ink) !important; }
body.blackfriday [data-cy="menuNavbar"] button.tw-bg-sky-600 {
  background: var(--bf-ink) !important;
  color: var(--bf-paper) !important;
  border-right-color: var(--bf-line) !important;
}
body.blackfriday [data-cy="menuNavbar"] hr.tw-bg-sky-600 { background: var(--bf-ink) !important; }
body.blackfriday [data-cy="menuNavbar"] button.tw-bg-orange-400 {
  background: var(--bf-gold) !important;
  color: var(--bf-ink) !important;
}
/* hovered or open category */
body.blackfriday [data-cy="menuNavbar"] button:hover,
body.blackfriday [data-cy="menuNavbar"] button.tw-bg-sky-100 {
  background: var(--bf-coal) !important;
  color: var(--bf-gold) !important;
}

/* ---- 3c. Header row: cart box, search button ----------------------------- */
body.blackfriday #logoLineSection .tw-bg-sky-600.tw-rounded-r-md { background: var(--bf-ink) !important; }
body.blackfriday #logoLineSection button.tw-bg-orange-400 {
  background: var(--bf-gold) !important;
  color: var(--bf-ink) !important;
}
body.blackfriday #logoLineSection button.tw-bg-orange-400:hover { filter: brightness(1.08); }

/* ---- 3d. Mobile: hamburger + header icons, slide-out menu ---------------- */
body.blackfriday #logoLineSection .tw-text-sky-600 { color: var(--bf-ink) !important; }
body.blackfriday .tw-max-w-xs.tw-shadow-xl.tw-overflow-y-auto .tw-bg-sky-600 { background: var(--bf-ink) !important; }
body.blackfriday .tw-max-w-xs.tw-shadow-xl.tw-overflow-y-auto .tw-text-sky-600 { color: var(--bf-ink) !important; }
body.blackfriday .tw-max-w-xs.tw-shadow-xl.tw-overflow-y-auto a:hover { color: var(--bf-red) !important; }

/* ---- 4. Banner slider: "BLACK FRIDAY" corner ribbon ---------------------- */
body.blackfriday #homepageSlides { position: relative; overflow: hidden; }
body.blackfriday #homepageSlides::before {
  content: "BLACK FRIDAY";
  position: absolute;
  top: 22px;
  left: -46px;
  width: 190px;
  padding: 5px 0;
  z-index: 20;
  transform: rotate(-45deg);
  background: var(--bf-gold);
  color: var(--bf-ink);
  font-family: "Anton", Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  pointer-events: none;
}

/* ---- 5. Homepage category tiles: gold glow + % tag slides up ------------- */
body.blackfriday .lg\:tw-grid-cols-7 > div:has(> a > img[width="110"]) {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  padding-top: 6px;
  transition: box-shadow .2s, transform .2s;
}
body.blackfriday .lg\:tw-grid-cols-7 > div:has(> a > img[width="110"])::after {
  content: "%";
  position: absolute;
  right: 10px;
  top: 72px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bf-ink);
  color: var(--bf-gold);
  font: 700 16px/30px Arial, Helvetica, sans-serif;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: transform .25s, opacity .25s;
  pointer-events: none;
}
body.blackfriday .lg\:tw-grid-cols-7 > div:has(> a > img[width="110"]):hover {
  box-shadow: 0 0 0 2px var(--bf-ink), 0 8px 24px rgba(255,198,41,.55);
  transform: translateY(-3px);
}
body.blackfriday .lg\:tw-grid-cols-7 > div:has(> a > img[width="110"]):hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ---- 6. Deals: heading, starburst badges, BUY buttons -------------------- */
body.blackfriday .bf-deals-title {
  font-family: "Anton", Impact, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
}
body.blackfriday .forCartImageItem span.tw-absolute.tw-bg-red-600 {
  width: 66px;
  height: 66px;
  padding: 0 8px !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bf-gold) !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.1 !important;
  text-align: center;
  z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 74'%3E%3Cpath d='M37.0 1.0L42.7 8.6L50.8 3.7L53.1 12.9L62.5 11.5L61.1 20.9L70.3 23.2L65.4 31.3L73.0 37.0L65.4 42.7L70.3 50.8L61.1 53.1L62.5 62.5L53.1 61.1L50.8 70.3L42.7 65.4L37.0 73.0L31.3 65.4L23.2 70.3L20.9 61.1L11.5 62.5L12.9 53.1L3.7 50.8L8.6 42.7L1.0 37.0L8.6 31.3L3.7 23.2L12.9 20.9L11.5 11.5L20.9 12.9L23.2 3.7L31.3 8.6z' fill='%230B0B0C'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
body.blackfriday .forCartImageItem .productBuyForm button.tw-bg-orange-400 {
  background: var(--bf-ink) !important;
  color: var(--bf-gold) !important;
}
body.blackfriday .forCartImageItem .productBuyForm button.tw-bg-orange-400:hover { background: var(--bf-coal) !important; }

/* ---- 6b. Category pages: starburst discount ribbon, all BUY buttons ------ */
body.blackfriday [data-test="productBookmark"] > div.tw-bg-red-600 {
  width: 78px !important;
  height: 78px !important;
  padding: 0 10px !important;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0 !important;
  color: var(--bf-gold) !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1.15;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 74'%3E%3Cpath d='M37.0 1.0L42.7 8.6L50.8 3.7L53.1 12.9L62.5 11.5L61.1 20.9L70.3 23.2L65.4 31.3L73.0 37.0L65.4 42.7L70.3 50.8L61.1 53.1L62.5 62.5L53.1 61.1L50.8 70.3L42.7 65.4L37.0 73.0L31.3 65.4L23.2 70.3L20.9 61.1L11.5 62.5L12.9 53.1L3.7 50.8L8.6 42.7L1.0 37.0L8.6 31.3L3.7 23.2L12.9 20.9L11.5 11.5L20.9 12.9L23.2 3.7L31.3 8.6z' fill='%230B0B0C'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
/* the folded ribbon tail */
body.blackfriday [data-test="productBookmark"] > div.tw-overflow-hidden { display: none !important; }

body.blackfriday button[data-cy="buyButton"].tw-bg-orange-400 {
  background: var(--bf-ink) !important;
  color: var(--bf-gold) !important;
}
body.blackfriday button[data-cy="buyButton"].tw-bg-orange-400:hover { background: var(--bf-coal) !important; }

/* ---- 6c. Product details page -------------------------------------------- */
/* Old template (products/details.html): BUY is a sprite on a transparent-text input. */
body.blackfriday .buySectionWrapper form input[type=submit]:not(.disabledBuyButton) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60' preserveAspectRatio='none'%3E%3Crect width='160' height='60' rx='10' fill='%230B0B0C'/%3E%3Cg fill='none' stroke='%23FFC629' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 20h5l4 18h17l4-13H37'/%3E%3Ccircle cx='41' cy='43' r='2.2'/%3E%3Ccircle cx='54' cy='43' r='2.2'/%3E%3C/g%3E%3Ctext x='72' y='40' font-family='Arial,Helvetica,sans-serif' font-size='27' font-weight='700' fill='%23FFC629'%3EBUY%3C/text%3E%3C/svg%3E") !important;
  background-color: transparent !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
body.blackfriday .buySectionWrapper form input[type=submit]:not(.disabledBuyButton):hover { filter: brightness(1.25); }
body.blackfriday #productTopSection .discountTxt,
body.blackfriday .categoryProduct .right .discountTxt {
  background: var(--bf-red);
  border-color: var(--bf-red);
}
/* New Tailwind template (tailwind/products/product_buybox.html), for when it goes live */
body.blackfriday form.productBuyForm input[type=submit].tw-bg-orange-400 {
  background: var(--bf-ink) !important;
  color: var(--bf-gold) !important;
}
body.blackfriday #discountTxt.tw-bg-fuchsia-900 { background: var(--bf-red) !important; }

/* ---- 7. Footer newsletter bar: red, black button ------------------------- */
body.blackfriday .tw-bg-neutral-400:has(#footerNlSubscribeForm) {
  background: var(--bf-red) !important;
  color: #fff !important;
}
body.blackfriday #footerNlSubscribeForm button {
  background: var(--bf-ink) !important;
  color: var(--bf-gold) !important;
}

/* ---- 7b. Footer links panel: dark, light text ---------------------------- */
body.blackfriday #links {
  background: var(--bf-ink) !important;
  border-color: var(--bf-ink) !important;
  color: #A9A9AE !important;
}
body.blackfriday #links [class*="tw-text-neutral"] { color: #E4E4E0 !important; }
body.blackfriday #links b { color: var(--bf-paper) !important; }
body.blackfriday #links a:hover { color: var(--bf-gold) !important; }
body.blackfriday #links * { border-color: var(--bf-line) !important; }

/* Newsletter label in the display font (class added by js/blackfriday.js) */
body.blackfriday .bf-nl-title {
  font-family: "Anton", Impact, sans-serif;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
}

/* ---- 8. Motion: light sweep across the promo title ----------------------- */
body.blackfriday .bf-promo-title::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  body.blackfriday .bf-promo-title::after { animation: bf-shine 5s ease-in-out 1.5s infinite; }
}
@keyframes bf-shine {
  0%   { left: -60%; opacity: 1; }
  25%  { left: 130%; opacity: 1; }
  26%, 100% { left: 130%; opacity: 0; }
}