/* ==========================================================================
   MemoryC — Halloween layer for template_new_wide
   Active only when <body> has class "halloween" ($_halloween_wide flag).

   Hooks used (from the current templates):
     .hw-promo                         tailwind/header/halloween_promo.html
     trust bar                         tailwind/header/differentiators_text.html
     #logoLineSection a[href="/"]      logo link rendered by react_src/logoLineV2.js
     #homepageSlides                   homepage banner slider (tailwind/index/main.html)
     category tiles                    tailwind/index/main.html (110px category images)
     .forCartImageItem                 product cards (tailwind/products/carousel*.html)
     #footerNlSubscribeForm            footer newsletter (tailwind/footer/links.html)
     .hw-deals-title / .hw-spider / .hw-bat   added at runtime by js/halloween.js
   ========================================================================== */

body.halloween {
  --hw-ink: #16131A;
  --hw-pumpkin: #F07A1A;
  --hw-purple: #6B3FA0;
  --hw-bone: #FFF8EE;
}

/* ---- 1. Promo strip ---------------------------------------------------- */
body.halloween .hw-promo {
  background: var(--hw-ink);
  color: var(--hw-bone);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 8px 16px;
  font-size: 14px;
  text-align: center;
}
body.halloween .hw-promo-title {
  font-family: "Creepster", cursive;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--hw-pumpkin);
}
body.halloween .hw-promo a {
  background: var(--hw-pumpkin);
  color: var(--hw-ink);
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

/* ---- 2. Trust bar: orange on black, pumpkin icons ---------------------- */
body.halloween .tw-border-bg-neutral-400.tw-justify-between.tw-text-neutral-600 {
  background: var(--hw-ink) !important;
  border-color: var(--hw-ink) !important;
  color: var(--hw-bone) !important;
  padding: 8px 12px !important;
}
body.halloween .tw-border-bg-neutral-400.tw-justify-between.tw-text-neutral-600 b { color: var(--hw-pumpkin); }
body.halloween .tw-border-bg-neutral-400.tw-justify-between.tw-text-neutral-600 a { color: var(--hw-bone) !important; }
body.halloween .tw-border-bg-neutral-400.tw-justify-between.tw-text-neutral-600 > div::before {
  content: "";
  display: inline-block;
  width: 18px;
  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 24 24'%3E%3Cpath d='M12 6c-5 0-9 3-9 7.5S7 21 12 21s9-3 9-7.5S17 6 12 6z' fill='%23F07A1A'/%3E%3Cpath d='M12 6V3.6c0-.9.6-1.6 1.6-1.6' fill='none' stroke='%237FB04A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- 3. Logo: witch hat ------------------------------------------------- */
body.halloween #logoLineSection a[href="/"] { position: relative; }
body.halloween #logoLineSection a[href="/"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: -16px;
  width: 36px;
  height: 30px;
  transform: rotate(-18deg);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M24 2L36 30H12z' fill='%2316131A'/%3E%3Cpath d='M14 26h20l1 4H13z' fill='%236B3FA0'/%3E%3Cellipse cx='24' cy='31' rx='22' ry='5' fill='%2316131A'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- 3b. Main menu bar (react_src/logoLineV2.js) ---------------------------- */
body.halloween div:has(> [data-cy="menuNavbar"]) { background: var(--hw-ink) !important; }
body.halloween [data-cy="menuNavbar"] button.tw-bg-sky-600 {
  background: var(--hw-ink) !important;
  color: var(--hw-bone) !important;
  border-right-color: #3A3342 !important;
}
body.halloween [data-cy="menuNavbar"] hr.tw-bg-sky-600 { background: var(--hw-ink) !important; }
body.halloween [data-cy="menuNavbar"] button.tw-bg-orange-400 {
  background: var(--hw-pumpkin) !important;
  color: var(--hw-ink) !important;
}
/* hovered or open category */
body.halloween [data-cy="menuNavbar"] button:hover,
body.halloween [data-cy="menuNavbar"] button.tw-bg-sky-100 {
  background: var(--hw-purple) !important;
  color: #fff !important;
}

/* ---- 3c. Header row: cart box, search button ------------------------------- */
body.halloween #logoLineSection .tw-bg-sky-600.tw-rounded-r-md { background: var(--hw-purple) !important; }
body.halloween #logoLineSection button.tw-bg-orange-400 { background: var(--hw-pumpkin) !important; }
body.halloween #logoLineSection button.tw-bg-orange-400:hover { filter: brightness(1.1); }

/* ---- 3d. Mobile: hamburger + header icons, slide-out menu ------------------- */
body.halloween #logoLineSection .tw-text-sky-600 { color: var(--hw-ink) !important; }
/* slide-out drawer (rendered in a portal, so not inside #logoLineSection) */
body.halloween .tw-max-w-xs.tw-shadow-xl.tw-overflow-y-auto .tw-bg-sky-600 { background: var(--hw-ink) !important; }
body.halloween .tw-max-w-xs.tw-shadow-xl.tw-overflow-y-auto .tw-text-sky-600 { color: var(--hw-purple) !important; }
body.halloween .tw-max-w-xs.tw-shadow-xl.tw-overflow-y-auto a:hover { color: var(--hw-pumpkin) !important; }

/* ---- 4. Banner slider: cobweb corner ------------------------------------ */
body.halloween #homepageSlides { position: relative; }
body.halloween #homepageSlides::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  z-index: 20;
  opacity: .85;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.7));
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23FFF8EE' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M0 0L120 0M0 0L111 46M0 0L85 85M0 0L46 111M0 0L0 120'/%3E%3Cpath d='M30 0L25 9L19 19L9 25L0 30'/%3E%3Cpath d='M60 0L52 19L39 39L19 52L0 60'/%3E%3Cpath d='M92 0L80 30L60 60L30 80L0 92'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- 5. Homepage category tiles: orange glow + peeking ghost ------------ */
body.halloween .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.halloween .lg\:tw-grid-cols-7 > div:has(> a > img[width="110"])::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 70px;
  width: 30px;
  height: 34px;
  opacity: 0;
  transform: translateY(30px);
  transition: transform .25s, opacity .25s;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44'%3E%3Cpath d='M20 2C10 2 4 10 4 20v22l5-4 5 4 6-4 6 4 5-4 5 4V20C36 10 30 2 20 2z' fill='%23fff' stroke='%2316131A' stroke-width='2'/%3E%3Ccircle cx='15' cy='18' r='2.5' fill='%2316131A'/%3E%3Ccircle cx='25' cy='18' r='2.5' fill='%2316131A'/%3E%3Cellipse cx='20' cy='27' rx='3' ry='4' fill='%2316131A'/%3E%3C/svg%3E") no-repeat center / contain;
}
body.halloween .lg\:tw-grid-cols-7 > div:has(> a > img[width="110"]):hover {
  box-shadow: 0 0 0 2px var(--hw-pumpkin), 0 8px 24px rgba(240,122,26,.4);
  transform: translateY(-3px);
}
body.halloween .lg\:tw-grid-cols-7 > div:has(> a > img[width="110"]):hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ---- 6. Deals: heading, pumpkin badges, BUY buttons --------------------- */
body.halloween .hw-deals-title {
  font-family: "Creepster", cursive;
  letter-spacing: 1px;
}
body.halloween .forCartImageItem span.tw-absolute.tw-bg-red-600 {
  width: 70px;
  height: 62px;
  padding: 10px 0 0 !important;
  box-sizing: border-box;
  color: var(--hw-ink) !important;
  font-size: 12px !important;
  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 66'%3E%3Cpath d='M37 12C17 12 3 24 3 39s14 26 34 26 34-11 34-26S57 12 37 12z' fill='%23F07A1A'/%3E%3Cpath d='M37 12V5c0-2 2-4 5-4' fill='none' stroke='%237FB04A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
body.halloween .forCartImageItem .productBuyForm button.tw-bg-orange-400 {
  background: var(--hw-ink) !important;
  color: var(--hw-pumpkin) !important;
}
body.halloween .forCartImageItem .productBuyForm button.tw-bg-orange-400:hover { filter: brightness(1.2); }

/* ---- 6b. Category pages: pumpkin discount ribbon, all BUY buttons ------- */
body.halloween [data-test="productBookmark"] > div.tw-bg-red-600 {
  width: 84px !important;
  height: 75px !important;
  padding: 16px 8px 0 !important;
  box-sizing: border-box;
  justify-content: center;
  border: 0 !important;
  color: var(--hw-ink) !important;
  font-size: 11px !important;
  line-height: 1.15;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 66'%3E%3Cpath d='M37 12C17 12 3 24 3 39s14 26 34 26 34-11 34-26S57 12 37 12z' fill='%23F07A1A'/%3E%3Cpath d='M37 12V5c0-2 2-4 5-4' fill='none' stroke='%237FB04A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
/* the folded ribbon tail */
body.halloween [data-test="productBookmark"] > div.tw-overflow-hidden { display: none !important; }

body.halloween button[data-cy="buyButton"].tw-bg-orange-400 {
  background: var(--hw-ink) !important;
  color: var(--hw-pumpkin) !important;
}
body.halloween button[data-cy="buyButton"].tw-bg-orange-400:hover { filter: brightness(1.2); }

/* ---- 6c. Product details page --------------------------------------------- */
/* Old template (products/details.html): BUY is a sprite image on a transparent-text input.
   Swap the sprite for a black/orange SVG of the same size; value and behaviour unchanged. */
body.halloween .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='%2316131A'/%3E%3Cg fill='none' stroke='%23F07A1A' 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='%23F07A1A'%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.halloween .buySectionWrapper form input[type=submit]:not(.disabledBuyButton):hover { filter: brightness(1.25); }
body.halloween #productTopSection .discountTxt,
body.halloween .categoryProduct .right .discountTxt {
  background: var(--hw-purple);
  border-color: var(--hw-purple);
}
/* New Tailwind template (tailwind/products/product_buybox.html), for when it goes live */
body.halloween form.productBuyForm input[type=submit].tw-bg-orange-400 {
  background: var(--hw-ink) !important;
  color: var(--hw-pumpkin) !important;
}
body.halloween #discountTxt.tw-bg-fuchsia-900 { background: var(--hw-purple) !important; }

/* ---- 7. Footer newsletter bar ------------------------------------------- */
body.halloween .tw-bg-neutral-400:has(#footerNlSubscribeForm) {
  background: var(--hw-purple) !important;
}
body.halloween #footerNlSubscribeForm button {
  background: var(--hw-pumpkin) !important;
  color: var(--hw-ink) !important;
}

/* ---- 7b. Footer links panel: dark, light text ---------------------------- */
body.halloween #links {
  background: var(--hw-ink) !important;
  border-color: var(--hw-ink) !important;
  color: #B9B0C2 !important;
}
body.halloween #links [class*="tw-text-neutral"] { color: #E9E1D3 !important; }
body.halloween #links b { color: var(--hw-bone) !important; }
body.halloween #links a:hover { color: var(--hw-pumpkin) !important; }
body.halloween #links * { border-color: #3A3342 !important; }

/* Newsletter label in the display font (class added by js/halloween.js) */
body.halloween .hw-nl-title {
  font-family: "Creepster", cursive;
  font-size: 20px !important;
  letter-spacing: 1px;
  line-height: 1;
}

/* ---- 8. Footer spider (hangs from "Company Info") ----------------------- */
body.halloween .hw-spider { position: relative; }
body.halloween .hw-spider::after {
  content: "";
  position: absolute;
  left: calc(100% + 14px);
  top: -40px;
  width: 30px;
  height: 68px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 90'%3E%3Cline x1='20' y1='0' x2='20' y2='62' stroke='%23B9B0C2' stroke-width='1'/%3E%3Cpath d='M14 66l-9-6-3 4M14 70H3M14 74l-9 6-2 4M26 66l9-6 3 4M26 70h11M26 74l9 6 2 4' stroke='%23E9E1D3' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='20' cy='71' rx='7' ry='8' fill='%23E9E1D3'/%3E%3Ccircle cx='20' cy='62' r='4.5' fill='%23E9E1D3'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- 9. Flying bat (element added by js/halloween.js) ------------------- */
body.halloween .hw-bat {
  position: absolute;
  top: 180px;
  left: 0;
  width: 70px;
  height: 33px;
  z-index: 60;
  pointer-events: none;
  transform: translateX(-160px);
}

/* ---- Motion: only when the visitor hasn't asked for less ---------------- */
@media (prefers-reduced-motion: no-preference) {
  body.halloween .hw-bat { animation: hw-batfly 9s ease-in-out 1s 1 both; }
  body.halloween .hw-spider::after { animation: hw-bob 3.5s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  body.halloween .hw-bat { display: none; }
}
@keyframes hw-batfly {
  0%   { transform: translate(-160px, 40px) scale(.8); }
  50%  { transform: translate(55vw, -20px) scale(1); }
  100% { transform: translate(110vw, 30px) scale(.8); }
}
@keyframes hw-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(12px); }
}