/* iCode M3: full-width landing, blue accents and portrait mobile backgrounds. */
body.modern-commerce[data-view="home"] {
  --landing-gutter: clamp(24px, 5.8vw, 112px);
  --landing-white: #fff;
  --landing-ease: cubic-bezier(.22, .61, .36, 1);
  margin: 0;
  padding: 0;
}
.modern-commerce[data-view="home"] .topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1021;
  background: transparent;
  color: #ffffffc9;
  border-bottom: 1px solid #ffffff18;
}
.modern-commerce[data-view="home"] .topbar .inner { min-height: 36px; }
.modern-commerce[data-view="home"] .site-head {
  position: absolute;
  inset: 36px 0 auto;
  background: transparent;
  border-bottom: 1px solid #ffffff22;
  backdrop-filter: none;
  transition: background .3s, box-shadow .3s, top .3s, border-color .3s;
}
.modern-commerce[data-view="home"].landing-ready .site-head { position: fixed; }
.modern-commerce[data-view="home"] .head-main { padding-block: 19px; }
.modern-commerce[data-view="home"]:not(.landing-scrolled) .brand,
.modern-commerce[data-view="home"]:not(.landing-scrolled) .head-action {
  color: var(--landing-white);
}
.modern-commerce[data-view="home"]:not(.landing-scrolled) .brand small { color: #ffffffaa; }
.modern-commerce[data-view="home"]:not(.landing-scrolled) .brand img {
  background: #fff;
  padding: 5px;
  border-radius: 9px;
}
.modern-commerce[data-view="home"]:not(.landing-scrolled) .search-global input {
  color: var(--landing-white);
  background: #ffffff0f;
  border-color: #ffffff38;
}
.modern-commerce[data-view="home"]:not(.landing-scrolled) .search-global input::placeholder { color: #ffffffb5; }
.modern-commerce[data-view="home"]:not(.landing-scrolled) .search-global input:focus {
  background: #ffffff19;
  border-color: var(--mc-accent);
  box-shadow: 0 0 0 3px #4a6bff20;
}
.modern-commerce[data-view="home"]:not(.landing-scrolled) .search-global button,
.modern-commerce[data-view="home"]:not(.landing-scrolled) .login-action i { color: #fff; }
.modern-commerce[data-view="home"]:not(.landing-scrolled) .head-action { background: transparent; }
.modern-commerce[data-view="home"]:not(.landing-scrolled) .head-action:hover { background: #ffffff18; }
.modern-commerce[data-view="home"]:not(.landing-scrolled) .cart-action { border: 1px solid #ffffff38; }
.modern-commerce[data-view="home"]:not(.landing-scrolled) .nav-shell {
  background: transparent;
  border-top-color: #ffffff18;
}
.modern-commerce[data-view="home"]:not(.landing-scrolled) .nav-row a { color: #ffffffcf; }
.modern-commerce[data-view="home"]:not(.landing-scrolled) .nav-row a:hover {
  color: #fff;
  background: #ffffff14;
}
.modern-commerce[data-view="home"]:not(.landing-scrolled) .nav-row a.active { color: #fff; }
.modern-commerce[data-view="home"]:not(.landing-scrolled) .nav-row a.active::after { background: var(--mc-accent); }
.modern-commerce[data-view="home"]:not(.landing-scrolled) .nav-row .all-cats {
  background: #ffffff14 !important;
  border: 1px solid #ffffff2b;
}
.modern-commerce[data-view="home"].landing-scrolled .site-head {
  top: 0;
  background: #fffffff5;
  border-color: var(--mc-line);
  backdrop-filter: blur(18px);
  box-shadow: 0 5px 25px #17261b0b;
}
.modern-commerce[data-view="home"].landing-scrolled .head-main { padding-block: 12px; }
.modern-commerce[data-view="home"] .hero-zone { margin: 0; padding: 0; }
.modern-commerce[data-view="home"] .hero-layout { display: block; margin: 0; padding: 0; }
.modern-commerce[data-view="home"] .hero-stage.main-hero {
  --hero-duration: 6200ms;
  position: relative;
  width: 100%;
  height: auto;
  min-height: max(760px, 100svh, var(--hero-required-height, 0px));
  border-radius: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #172a28;
  isolation: isolate;
  touch-action: pan-y;
}
.modern-commerce[data-view="home"] .hero-track { inset: 0; }
.modern-commerce[data-view="home"] .hero-panel {
  opacity: 0;
  visibility: hidden;
  transition: opacity .85s ease, visibility .85s;
}
.modern-commerce[data-view="home"] .hero-panel.is-active { opacity: 1; visibility: visible; }
.modern-commerce[data-view="home"] .hero-slide {
  position: absolute;
  inset: 0;
  height: 100% !important;
  border-radius: 0;
  background: #172a28;
  overflow: hidden;
}
.modern-commerce[data-view="home"] .hero-slide .hero-picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
}
.modern-commerce[data-view="home"] .hero-panel.is-active .hero-slide .hero-picture img {
  animation: landing-image-drift 12s var(--landing-ease) both;
}
.modern-commerce[data-view="home"] .hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #071619bb 0, #07161935 27%, transparent 47%, #07161982 100%),
    linear-gradient(90deg, #071a1bea 0, #071a1bbf 28%, #071a1b52 58%, #071a1b12 100%);
}
.modern-commerce[data-view="home"] .hero-inner,
.modern-commerce[data-view="home"] .hero-footer {
  width: calc(100% - var(--landing-gutter) * 2) !important;
  max-width: var(--site-max) !important;
  margin-inline: auto;
}
.modern-commerce[data-view="home"] .hero-inner {
  position: relative;
  z-index: 2;
  min-height: max(760px, 100svh, var(--hero-required-height, 0px));
  display: flex;
  align-items: center;
  padding-block: 225px 145px;
}
.modern-commerce[data-view="home"] .hero-copy {
  position: relative;
  inset: auto;
  transform: none;
  width: min(60%, 790px);
  max-width: 790px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
  border-radius: 0;
  color: #fff;
  text-shadow: none;
}
.modern-commerce[data-view="home"] .hero-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #bac6ff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.7;
}
.modern-commerce[data-view="home"] .hero-copy .eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  flex: none;
  background: currentColor;
}
.modern-commerce[data-view="home"] .hero-copy .hero-heading {
  color: #fff;
  font-family: var(--mc-font);
  font-size: clamp(3.2rem, 5.4vw, 6.2rem);
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: 1.04;
  text-wrap: balance;
  overflow-wrap: anywhere;
  margin: 24px 0;
}
.modern-commerce[data-view="home"] .hero-copy p {
  color: #ffffffcf;
  max-width: 470px;
  margin: 0 0 32px;
  font-size: clamp(.9375rem, 1.04vw, 1.0625rem);
  line-height: 1.75;
}
.modern-commerce[data-view="home"] .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.modern-commerce[data-view="home"] .hero-copy .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-height: 52px;
  padding: 14px 23px;
  border-radius: 3px;
  border: 1px solid var(--mc-accent);
  background: var(--mc-accent);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  transition: background .2s, border-color .2s, transform .2s;
}
.modern-commerce[data-view="home"] .hero-copy .btn:hover { background: #3454d1; transform: translateY(-2px); }
.modern-commerce[data-view="home"] .hero-copy .hero-secondary {
  background: transparent;
  border-color: #ffffff65;
  color: #fff;
}
.modern-commerce[data-view="home"] .hero-copy .hero-secondary:hover { background: #ffffff14; border-color: #fff; }
.modern-commerce[data-view="home"] .hero-panel.is-active .hero-copy > * {
  animation: landing-copy-in .8s var(--landing-ease) both;
}
.modern-commerce[data-view="home"] .hero-panel.is-active .hero-copy .hero-heading { animation-delay: .08s; }
.modern-commerce[data-view="home"] .hero-panel.is-active .hero-copy p { animation-delay: .16s; }
.modern-commerce[data-view="home"] .hero-panel.is-active .hero-actions { animation-delay: .24s; }
.modern-commerce[data-view="home"] .hero-footer {
  position: absolute;
  z-index: 7;
  inset: auto 0 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  color: #fff;
}
.modern-commerce[data-view="home"] .hero-discover {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #ffffffca;
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.modern-commerce[data-view="home"] .hero-discover i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff4d;
  border-radius: 50%;
  font-size: .75rem;
  transition: transform .2s;
}
.modern-commerce[data-view="home"] .hero-discover:hover i { transform: translateY(3px); }
.modern-commerce[data-view="home"] .hero-controls { display: flex; align-items: center; gap: 24px; }
.modern-commerce[data-view="home"] .hero-count { display: flex; gap: 9px; align-items: baseline; font-size: .75rem; }
.modern-commerce[data-view="home"] .hero-count b { font-size: 1rem; font-weight: 600; }
.modern-commerce[data-view="home"] .hero-count span { color: #ffffff82; }
.modern-commerce[data-view="home"] .hero-pagination {
  position: static;
  display: flex;
  justify-content: flex-start;
  gap: 0;
}
.modern-commerce[data-view="home"] .hero-dot {
  position: relative;
  width: 22px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.modern-commerce[data-view="home"] .hero-dot::after {
  content: '';
  position: absolute;
  inset: 14px 8px;
  border-radius: 50%;
  background: #ffffff59;
  transition: background .2s, transform .2s;
}
.modern-commerce[data-view="home"] .hero-dot.is-active::after { background: var(--mc-accent); transform: scale(1.5); }
.modern-commerce[data-view="home"] .hero-control-buttons { display: flex; align-items: center; gap: 8px; }
.modern-commerce[data-view="home"] .hero-control-buttons > button {
  position: static;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #ffffff50;
  background: transparent;
  color: #fff;
  font-size: .75rem;
  transform: none;
  backdrop-filter: none;
  transition: background .2s;
}
.modern-commerce[data-view="home"] .hero-control-buttons > button:hover { background: #ffffff1c; }
.modern-commerce[data-view="home"] .hero-progress { position: absolute; inset: auto 0 0; height: 2px; z-index: 7; background: #ffffff20; }
.modern-commerce[data-view="home"] .hero-progress-fill { display: block; width: 100%; height: 100%; background: var(--mc-accent); transform: scaleX(0); transform-origin: left; }
.modern-commerce[data-view="home"] .hero-stage.is-running .hero-progress-fill { animation: landing-progress var(--hero-duration) linear forwards; }
.modern-commerce[data-view="home"] .hero-stage.is-resting .hero-slide .hero-picture img { animation-play-state: paused; }
.modern-commerce[data-view="home"] .hero-after { padding-top: 26px; scroll-margin-top: 24px; }
.modern-commerce[data-view="home"] .hero-after .side-promos { display: grid; grid-template: auto / repeat(2, minmax(0, 1fr)); gap: 18px; }
.modern-commerce[data-view="home"] .hero-after .side-promo { min-height: 0; height: auto; aspect-ratio: 5 / 2; }
.modern-commerce[data-view="home"] .hero-after .side-promo h3 { color: #fff; }
.modern-commerce[data-view="home"] .hero-after .side-promo .copy { max-width: 76%; }
.modern-commerce[data-view="home"] .hero-after .trust-strip { margin-top: 8px; }
.modern-commerce[data-view="home"] .hero-copy :focus-visible,
.modern-commerce[data-view="home"] .hero-footer :focus-visible { outline-color: var(--mc-accent); }
@keyframes landing-image-drift { from { transform: scale(1.045); } to { transform: scale(1); } }
@keyframes landing-copy-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes landing-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1050px) {
  .modern-commerce[data-view="home"] .hero-stage.main-hero,
  .modern-commerce[data-view="home"] .hero-inner { min-height: max(800px, 100svh, var(--hero-required-height, 0px)); }
  .modern-commerce[data-view="home"] .hero-inner { padding-block: 275px 140px; }
  .modern-commerce[data-view="home"] .hero-copy { width: min(75%, 700px); }
  .modern-commerce[data-view="home"] .hero-copy .hero-heading { font-size: clamp(3.2rem, 6.7vw, 5rem); }
  .modern-commerce[data-view="home"] .hero-controls { gap: 15px; }
  .modern-commerce[data-view="home"] .hero-discover span { display: none; }
}
@media (max-width: 768px) {
  .modern-commerce[data-view="home"] .site-head { top: 0; }
  .modern-commerce[data-view="home"] .head-main { padding-block: 15px; }
  .modern-commerce[data-view="home"] .hero-stage.main-hero,
  .modern-commerce[data-view="home"] .hero-inner { min-height: max(680px, calc(100svh - 65px), var(--hero-required-height, 0px)); }
  .modern-commerce[data-view="home"] .hero-inner { padding-block: 172px 130px; }
  .modern-commerce[data-view="home"] .hero-copy { width: min(100%, 560px); max-width: 560px; }
  .modern-commerce[data-view="home"] .hero-copy .hero-heading {
    font-size: clamp(2.75rem, 8.5vw, 4.25rem);
    line-height: 1.07;
    letter-spacing: -.055em;
    margin-block: 19px;
  }
  .modern-commerce[data-view="home"] .hero-copy .eyebrow { font-size: .625rem; letter-spacing: .16em; gap: 10px; }
  .modern-commerce[data-view="home"] .hero-copy .eyebrow::before { width: 23px; }
  .modern-commerce[data-view="home"] .hero-copy p { font-size: .9375rem; max-width: 340px; margin-bottom: 25px; }
  .modern-commerce[data-view="home"] .hero-copy .btn { min-height: 47px; padding: 12px 17px; gap: 16px; font-size: .75rem; }
  .modern-commerce[data-view="home"] .hero-actions { gap: 10px; }
  .modern-commerce[data-view="home"] .hero-slide .hero-picture img { object-position: var(--hero-focus, 72%) center; }
  .modern-commerce[data-view="home"] .hero-overlay {
    background: linear-gradient(180deg, #071619c4, #0716193b 30%, #07161917 65%, #071619af),
                linear-gradient(90deg, #071a1bc9, #071a1b92 55%, #071a1b3b);
  }
  .modern-commerce[data-view="home"] .hero-footer { bottom: 25px; gap: 12px; }
  .modern-commerce[data-view="home"] .hero-controls { justify-content: space-between; gap: 12px; flex: 1; min-width: 0; }
  .modern-commerce[data-view="home"] .hero-discover { display: none; }
  .modern-commerce[data-view="home"] .hero-count { gap: 6px; font-size: .6875rem; }
  .modern-commerce[data-view="home"] .hero-count b { font-size: .9375rem; }
  .modern-commerce[data-view="home"] .hero-pagination { min-width: 0; }
  .modern-commerce[data-view="home"] .hero-dot { width: 15px; height: 32px; min-width: 9px; flex-shrink: 1; }
  .modern-commerce[data-view="home"] .hero-dot::after { inset: 14px 5px; }
  .modern-commerce[data-view="home"] .hero-control-buttons { gap: 5px; }
  .modern-commerce[data-view="home"] .hero-control-buttons > button { width: 34px; height: 34px; font-size: .6875rem; }
  .modern-commerce[data-view="home"] .hero-after { padding-top: 18px; scroll-margin-top: 24px; }
  .modern-commerce[data-view="home"] .hero-after .side-promos { grid-template-columns: 1fr; gap: 12px; }
  .modern-commerce[data-view="home"] .hero-after .side-promo { min-height: 0; height: auto; }
  .modern-commerce[data-view="home"] .hero-after .side-promo .copy { max-width: 78%; }
}
@media (max-width: 380px) {
  .modern-commerce[data-view="home"] { --landing-gutter: 18px; }
  .modern-commerce[data-view="home"] .hero-copy .hero-heading { font-size: 2.55rem; }
  .modern-commerce[data-view="home"] .hero-controls { gap: 8px; }
  .modern-commerce[data-view="home"] .hero-dot { width: 12px; }
  .modern-commerce[data-view="home"] .hero-dot::after { inset-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.modern-commerce[data-view="home"]) { scroll-behavior: auto; }
  .modern-commerce[data-view="home"] .site-head,
  .modern-commerce[data-view="home"] .hero-panel,
  .modern-commerce[data-view="home"] .hero-copy .btn { transition: none; }
  .modern-commerce[data-view="home"] .hero-panel.is-active .hero-slide .hero-picture img,
  .modern-commerce[data-view="home"] .hero-panel.is-active .hero-copy > *,
  .modern-commerce[data-view="home"] .hero-stage.is-running .hero-progress-fill { animation: none; }
}

/* M3: art-directed portrait sources and a focal fallback for desktop-only uploads. */
.modern-commerce[data-view="home"] .hero-picture{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:0}
@media(max-width:768px){
 .modern-commerce[data-view="home"] .hero-picture.has-mobile img{object-position:center;transform:none!important;animation:none!important}
 .modern-commerce[data-view="home"] .hero-inner{align-items:flex-start;padding-block:172px 130px}
 .modern-commerce[data-view="home"] .hero-copy .hero-heading{font-size:clamp(2.25rem,7.8vw,3.45rem);line-height:1.09;letter-spacing:-.05em}
 .modern-commerce[data-view="home"] .hero-copy p{max-width:335px;line-height:1.6}
 .modern-commerce[data-view="home"] .hero-overlay{background:linear-gradient(180deg,#10192bcf,#10192b7a 35%,#10192b1f 69%,#10192ba6),linear-gradient(90deg,#10192b85,#10192b20)}
}