/* =========================================================
   MØDE — Shop all, in the style of the ONE store's home page:
   per category a full-width photo slideshow (name + Shop now),
   then "Latest …" with View all and a swipeable product row.
   ========================================================= */

.ed { --ed-ease: cubic-bezier(.26, .54, .32, 1); }
.ed + .ed { margin-top: 6px; }
.ed:last-child { margin-bottom: 0; }

/* ---------- Banner slideshow ---------- */
.ed-hero { position: relative; overflow: hidden; background: #f4f3f0; height: min(125vw, calc(100svh - 64px)); touch-action: pan-y; user-select: none; }
.ed-slides { position: absolute; inset: 0; }
.ed-slide { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; display: block; overflow: hidden; opacity: 0; visibility: hidden; }
.ed-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.ed-img { position: absolute; inset: 0; display: block; }
.ed-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; }
.ed-hero::after { content: none; }

/* Desktop: two photos side by side per slide */
@media (min-width: 900px) {
  .ed-hero { height: min(88vh, 860px); }
  .ed-slide { width: 50%; }
  .ed-slide.is-right { left: 50%; }
  .ed-slide.is-solo { width: 100%; }
  .ed-slide.is-solo .ed-img img { object-fit: contain; background: #f4f3f0; }
}

/* Caption: category name rises out of a mask, Shop now fades in */
.ed-caption { position: absolute; left: 0; right: 0; bottom: 56px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; pointer-events: none; }
.ed-caption a { pointer-events: auto; }
.ed-name { display: inline-block; font-size: clamp(20px, 3vw, 34px); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #fff; line-height: 1.05; background: none; padding: 4px 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .45); }
.ed-shop {
  display: inline-block; padding: 11px 22px; border: 1px solid #0b0b0b; color: #0b0b0b; background: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-decoration: none;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; position: relative; overflow: hidden;
  transition: background-color .3s, color .3s;
}
.ed-shop:hover { background: rgba(11, 11, 11, .75); color: #fff; }

/* Dots */
.ed-dots { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 3; display: flex; justify-content: center; gap: 10px; }
.ed-dot { width: 8px; height: 8px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: rgba(11, 11, 11, .25); cursor: pointer; transition: background-color .3s, transform .3s; }
.ed-dot.is-active { background: #0b0b0b; transform: scale(1.25); }
.ed-dot:focus-visible { outline: 2px solid #0b0b0b; outline-offset: 3px; }

/* ---------- "Latest …" + product row ---------- */
.ed-latest { padding: 56px 0 72px; text-align: center; }
.ed-title { margin: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.ed-view {
  display: inline-block; margin-top: 16px; padding: 8px 16px; border: 1px solid var(--line, #2a2a2a);
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--text-2, #cfcfcb);
  transition: border-color .3s, color .3s;
}
.ed-view:hover { border-color: var(--text, #f3f3f1); color: var(--text, #f3f3f1); }

ul.products.ed-row {
  display: flex; gap: 16px; margin: 36px 0 0; padding: 0 max(16px, calc((100vw - 1200px) / 2)) 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  grid-template-columns: none;
}
ul.products.ed-row::-webkit-scrollbar { display: none; }
ul.products.ed-row.is-few { justify-content: center; }
ul.products.ed-row > li.product { flex: 0 0 clamp(150px, 42vw, 280px); scroll-snap-align: start; text-align: center; }
ul.products.ed-row li.product a.woocommerce-LoopProduct-link { gap: 6px; align-items: center; }
ul.products.ed-row .mode-img-wrap { width: 100%; margin-bottom: 10px; }
ul.products.ed-row .woocommerce-loop-product__title { font-size: 12px; font-weight: 400; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
ul.products.ed-row .loop-sub { font-size: 12px; }
ul.products.ed-row .loop-sizes { display: none; }
ul.products.ed-row .price { font-size: 12px; }
@media (min-width: 900px) { ul.products.ed-row { gap: 24px; } }

/* ---------- Motion ---------- */
@keyframes ed-rise { from { transform: translateY(120%); } to { transform: none; } }
@keyframes ed-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ed-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes ed-in-right { from { opacity: 0; transform: translateX(200px); } to { opacity: 1; transform: none; } }
@keyframes ed-out-left { from { opacity: 1; transform: none; visibility: visible; } to { opacity: 0; transform: translateX(-200px); visibility: visible; } }
@keyframes ed-in-left { from { opacity: 0; transform: translateX(-200px); } to { opacity: 1; transform: none; } }
@keyframes ed-out-right { from { opacity: 1; transform: none; visibility: visible; } to { opacity: 0; transform: translateX(200px); visibility: visible; } }
@keyframes ed-card { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

.ed-js .ed-hero:not(.is-live) .ed-slide.is-active .ed-img { opacity: 0; }
.ed-js .ed-hero:not(.is-live) .ed-name { transform: translateY(120%); }
.ed-js .ed-hero:not(.is-live) .ed-shop { opacity: 0; }

/* First appearance: photo fades in while zooming out, name rises, button fades */
.ed-hero.is-live .ed-slide.is-active .ed-img { animation: ed-fade 1.2s var(--ed-ease) both; }
.ed-hero.is-live .ed-slide.is-active .ed-img img { animation: ed-kenburns 6.5s var(--ed-ease) both; }
.ed-hero.is-live .ed-name { animation: ed-rise .8s var(--ed-ease) .3s both; }
.ed-hero.is-live .ed-shop { animation: ed-fade 1.6s ease 1s both; }

/* Slide changes (ONE: slide in 200px + fade, previous slides out the other way) */
.ed-hero.is-live .ed-slide.is-active.is-next .ed-img { animation: ed-in-right .7s var(--ed-ease) both; }
.ed-hero.is-live .ed-slide.is-active.is-prev .ed-img { animation: ed-in-left .7s var(--ed-ease) both; }
.ed-hero.is-live .ed-slide.is-leaving { visibility: visible; opacity: 1; z-index: 0; }
.ed-hero.is-live .ed-slide.is-leaving.is-next .ed-img { animation: ed-out-left .5s ease-in both; }
.ed-hero.is-live .ed-slide.is-leaving.is-prev .ed-img { animation: ed-out-right .5s ease-in both; }
.ed-hero.is-live.is-changing .ed-name { animation: ed-rise .7s var(--ed-ease) .15s both; }

/* "Latest …" block: heading rises, View all fades, cards lift in one after another */
.ed-js .ed-latest .ed-title-in { display: inline-block; transform: translateY(120%); }
.ed-js .ed-latest .ed-view { opacity: 0; }
.ed-js .ed-latest .ed-row > li { opacity: 0; }
.ed-latest.is-in .ed-title-in { animation: ed-rise .8s var(--ed-ease) forwards; }
.ed-latest.is-in .ed-view { animation: ed-fade 1s ease .45s forwards; }
.ed-latest.is-in .ed-row > li { animation: ed-card 1s cubic-bezier(.165, .84, .44, 1) calc(.35s + var(--i, 0) * .12s) forwards; }
.ed-row .mode-img-wrap img:not(.mode-hover-img) { animation: none !important; opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .ed-hero .ed-img, .ed-hero .ed-img img, .ed-name, .ed-shop, .ed-title-in, .ed-view, .ed-row > li { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ed-slide.is-leaving { visibility: hidden !important; }
}

/* Product photos now sit on white: give the card frame the same tone */
ul.products.ed-row .mode-img-wrap { background: #f4f3f0; }

/* Shop all / Men / Women line above the banners */
.wc-wrap--crumbs { padding-top: 20px; padding-bottom: 16px; }
.wc-wrap--crumbs .woocommerce-breadcrumb { margin: 0; }

/* Campaign photo: first slide of each category, full width and edge to edge (no blur, no bars).
   Desktop shows the landscape crop, phones the full portrait photo. */
.ed-img--campaign { background: #0b0b0b; }
.ed-img--campaign picture { display: block; width: 100%; height: 100%; }
.ed-img--campaign .ed-fg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 900px) {
  .ed-slide.is-wide { width: 100%; left: 0; }
  .ed-img--campaign .ed-fg { object-position: 50% 12%; }
}