/* JC Flash Deals: Black Friday display. Mobile first; matches the shop's pills and cards. */
.jc-fd-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mfn-product-badges .jc-fd-badges .onsale,
.jc-fd-badges .onsale { position: static !important; margin: 0 !important; float: none !important; }
.jc-fd-badges .onsale.jc-fd-save--card { height: auto !important; min-height: 0 !important; line-height: 1 !important; font-size: 9px !important; letter-spacing: .04em !important; padding: 4px 7px !important; border-radius: 99px !important; }
.jc-fd-badges .onsale.jc-fd-save--card::before { display: none !important; }
.jc-fd-badges .jc-fd-left { background: #c8361f !important; color: #fff !important; border-color: #c8361f !important; }
.jc-fd-badges .jc-fd-left::before { display: none !important; }
.jc-fd-badges .jc-fd-left.is-hidden { display: none !important; }
.jc-fd-badges .jc-fd-exp { background: #fff !important; color: #111 !important; border: 1px solid rgba(17,17,17,.12) !important; text-transform: none !important; letter-spacing: 0 !important; }
.jc-fd-badges .jc-fd-exp::before { display: none !important; }

.jc-fd-loop, .jc-fd-single { display: block; }
.jc-fd-loop { width: 100%; flex-basis: 100%; }
.jc-fd-loop.is-moved { padding: 0 0 4px; }
.jc-fd-single.is-moved { width: 100%; max-width: 520px; margin: 4px 0 14px; }
/* "Units left" bar: track + fill + short label on one line */
.jc-fd-bar { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.jc-fd-meter { position: relative; display: block; flex: 1 1 auto; min-width: 0; height: 6px; border-radius: 99px; background: #f3e3df; overflow: hidden; }
.jc-fd-meter i { position: relative; display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff7a45, #c8361f); transition: width .5s ease; overflow: hidden; }
.jc-fd-meter i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: jcfdshine 2.6s ease-in-out infinite; }
@keyframes jcfdshine { 60%, 100% { transform: translateX(100%); } }
.jc-fd-left-long { flex: 0 0 auto; display: block; font-size: 11.5px; line-height: 1; color: #c8361f; font-weight: 750; white-space: nowrap; letter-spacing: 0; }
.jc-fd-bar.is-low .jc-fd-left-long { animation: jcfdpulse 1.4s ease-in-out infinite; }
@keyframes jcfdpulse { 50% { opacity: .55; } }
.jc-fd-loop .jc-fd-bar { margin-top: 2px; }
.jc-fd-soldout .jc-fd-left-long, .jc-fd-soldout .jc-fd-clock { color: #111; animation: none; }

.jc-fd-omni { display: block; font-size: 12px; line-height: 1.4; color: rgba(17,17,17,.62); font-weight: 400; margin-top: 6px; }
.jc-fd-box { display: block; background: #111; color: #fff; border-radius: 14px; padding: 14px 16px; margin: 14px 0 10px; }
.jc-fd-box__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; font-size: 13px; font-weight: 650; line-height: 1.35; }
.jc-fd-box .jc-fd-clock { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 750; }
.jc-fd-box .jc-fd-clock.is-urgent { color: #ff7a5c; }
.jc-fd-box .jc-fd-bar { margin-top: 12px; }
.jc-fd-box .jc-fd-meter { background: rgba(255,255,255,.16); }
.jc-fd-box .jc-fd-meter i { background: linear-gradient(90deg, #ff9a6b, #ff5a3c); }
.jc-fd-box .jc-fd-left-long { color: #ffb4a4; font-size: 12.5px; }
.jc-fd-expiry { display: flex; gap: 10px; align-items: flex-start; background: #fff7e8; border: 1px solid #f1d29a; border-radius: 14px; padding: 11px 13px; font-size: 13px; line-height: 1.45; font-weight: 400; color: #111; margin: 0 0 6px; }
.jc-fd-expiry__ic { flex: 0 0 auto; display: inline-flex; color: #a35d00; margin-top: 1px; }
.jc-fd-expiry__ic svg { width: 18px; height: 18px; }
.jc-fd-expiry b { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.jc-fd-expiry small { display: block; font-size: 12px; color: rgba(17,17,17,.68); margin-top: 2px; }

/* Black Friday page: compact banner */
.jc-fd-preview-bar { background: #c8361f; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .03em; border-radius: 10px; padding: 7px 12px; margin: 0 0 10px; }
.jc-fd-hero { display: grid; grid-template-columns: 1fr; gap: 8px; background: #111; color: #fff; border-radius: 12px; padding: 10px 12px; margin: 0 0 8px; }
.jc-fd-hero__k { font-size: 9.5px; letter-spacing: .12em; font-weight: 750; color: rgba(255,255,255,.65); }
.jc-fd-hero h2 { font-weight: 700; font-size: 16px; line-height: 1.2; margin: 2px 0 2px; color: #fff; }
.jc-fd-hero p { margin: 0; color: rgba(255,255,255,.72); font-size: 11.5px; line-height: 1.4; }
.jc-fd-hero__label { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 4px; font-weight: 650; }
.jc-fd-cd { display: flex; gap: 5px; }
.jc-fd-cd div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 5px 2px 4px; text-align: center; }
.jc-fd-cd b { display: block; margin: 0; font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; color: #fff; }
.jc-fd-cd small { display: block; margin: 0; font-size: 8.5px; line-height: 1; letter-spacing: .05em; color: rgba(255,255,255,.6); text-transform: uppercase; }
.jc-fd-cd.is-urgent b { color: #ff7a5c; }
.jc-fd-weeks { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; scrollbar-width: none; }
.jc-fd-week { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(17,17,17,.12); border-radius: 10px; padding: 6px 3px; text-align: center; background: #fff; }
.jc-fd-week b { display: block; font-size: 11.5px; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-fd-week small { display: block; font-size: 10.5px; color: rgba(17,17,17,.6); }
.jc-fd-week.is-now { background: #111; border-color: #111; }
.jc-fd-week.is-now b, .jc-fd-week.is-now small { color: #fff; }
.jc-fd-week.is-done { opacity: .5; }
.jc-fd-week.is-locked { position: relative; background: #f5f5f3; border-style: dashed; border-color: rgba(17,17,17,.2); }
.jc-fd-week.is-locked b { color: rgba(17,17,17,.62); } .jc-fd-week.is-locked small { color: rgba(17,17,17,.5); }
.jc-fd-week__lock { display: flex; justify-content: center; margin-bottom: 2px; font-style: normal; }
.jc-fd-week__lock svg { width: 16px; height: 16px; overflow: visible; }
.jc-fd-lock.is-closed { transform-origin: 50% 90%; animation: jcfdshake 3.2s ease-in-out infinite; }
.jc-fd-week:nth-child(3) .jc-fd-lock.is-closed { animation-delay: .5s; }
.jc-fd-week:nth-child(4) .jc-fd-lock.is-closed { animation-delay: 1s; }
@keyframes jcfdshake { 0%, 78%, 100% { transform: rotate(0); } 82% { transform: rotate(-12deg); } 86% { transform: rotate(10deg); } 90% { transform: rotate(-6deg); } 94% { transform: rotate(3deg); } }
.jc-fd-lock.is-open .jc-fd-lock__shackle { transform-box: fill-box; transform-origin: 0% 100%; animation: jcfdopen 2.4s ease-in-out infinite; }
@keyframes jcfdopen { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.5px) rotate(-10deg); } }
.jc-fd-week.is-now .jc-fd-lock__shackle { stroke: #d9d9d9; }
@media (prefers-reduced-motion: reduce) { .jc-fd-lock, .jc-fd-lock__shackle, .jc-fd-meter i::after, .jc-fd-bar.is-low .jc-fd-left-long { animation: none !important; } }
.jc-fd-week.is-done small { text-decoration: line-through; }
.jc-fd-teaser { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-radius: 12px; background: #f5f5f3; padding: 10px 14px; margin: 0 0 14px; }
.jc-fd-teaser b { font-size: 14px; } .jc-fd-teaser p { margin: 2px 0 0; color: rgba(17,17,17,.62); font-size: 12px; }
.jc-fd-teaser .jc-fd-clock { font-variant-numeric: tabular-nums; font-weight: 750; font-size: 17px; }
/* Main menu + burger menu item */
.jc-fd-menu-item > a { color: #c8361f !important; gap: 7px; }
.jc-fd-menu-item > a::after { content: ''; order: -1; width: 7px; height: 7px; border-radius: 50%; background: #c8361f; flex: 0 0 auto; animation: jcfdblink 1.2s infinite; }
.jc-site-header__drawer-menu > li.jc-fd-menu-item > a { justify-content: flex-start; gap: 10px; background: #111 !important; border-color: #111 !important; color: #fff !important; }
.jc-site-header__drawer-menu > li.jc-fd-menu-item > a::after { background: #ff5a3c; width: 8px; height: 8px; }

/* Slider tile */
/* The icon is a wide logo: fill the tile's width instead of a small square. */
.jc-cat-step.jc-fd-tile .jc-cat-step__icon img.jc-cat-step__image { width: 100% !important; max-width: 150px !important; height: auto !important; max-height: none !important; aspect-ratio: 188 / 102; object-fit: contain; padding: 0 2px; box-sizing: border-box; }
.jc-cat-step.jc-fd-tile .jc-cat-step__step { border-color: #111; color: #111; }
.jc-cat-step.jc-fd-tile.is-live .jc-cat-step__step { background: #c8361f; border-color: #c8361f; color: #fff; gap: 6px; }
.jc-cat-step.jc-fd-tile.is-live .jc-cat-step__step::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: jcfdblink 1.2s infinite; }
@keyframes jcfdblink { 50% { opacity: .25; } }
.jc-cat-step.jc-fd-tile.is-soon .jc-cat-step__step { background: #111; border-color: #111; color: #fff; font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
  .jc-fd-hero { grid-template-columns: 1.5fr 1fr; align-items: center; padding: 12px 18px; gap: 16px; }
  .jc-fd-hero h2 { font-size: 19px; }
  .jc-fd-cd b { font-size: 17px; }
  .jc-fd-week { padding: 7px 8px; } .jc-fd-week b { font-size: 12.5px; }
  .jc-fd-teaser { flex-direction: row; justify-content: space-between; align-items: center; }
  .jc-fd-box__top { flex-wrap: nowrap; }
}
@media (max-width: 767px) {
  .jc-fd-badges { gap: 5px; }
  .jc-fd-left-long { font-size: 10.5px; }
  .jc-fd-box__top { flex-direction: column; align-items: flex-start; }
  .jc-fd-box .jc-fd-clock { font-size: 26px; }
}