/* ============================================================================
   YOUNG OENDO — LANDING PAGE LOOK: "UGG-like editorial retail"
   ----------------------------------------------------------------------------
   Loaded ONLY from index.html (after yo-polish.css). Every rule is scoped to
   body.response-index, a body class that exists on index.html and nowhere else,
   so no other page in the repo can be affected by this file.

   WHY THIS FILE EXISTS / PROVENANCE OF THE VALUES
   Reference: https://www.ugg.com/ desktop landing, rendered 2026-09-22 and
   measured with getComputedStyle + pixel sampling of the full-page capture.
   Evidence lives in /mnt/storage/yoe-work/ugg/ (ref_ugg_d1440_full.png,
   ref_ugg_styles.json). Values taken from the live site, not invented:

     page base background ............ #ffffff   (html/body computed bg)
     warm cream band + footer ........ #f9f8f6   (crop of UGG footer band)
     ink / promo bar / borders ....... #000000   (promo bar 89% #000000)
     muted secondary text ............ #707070   (computed colour)
     field / fill grey ............... #f4f4f4   (computed search input bg)
     warm sand (from UGG imagery) .... #d0bca6   (tile photo sample)
     deep warm taupe (UGG imagery) ... #76675a   (tile photo sample)
     body font ....................... aktiv-grotesk, sans-serif, 15px/400, lh 1.5
     promobar ........................ 12px / 600 / #fff on #000
     nav + buttons ................... 14px / 600 / uppercase
     hero + section headlines ........ 32px / 700 / uppercase, lh 1.0
     secondary band headline ......... 20px / 600
     large section headline .......... 30px / 700 / uppercase
     small image captions ............ 12px / 600 / uppercase / underlined
     button .......................... #fff fill, 1px solid #000, radius 4px,
                                       height 50px, 14px/600 uppercase

   FONTS: UGG ships Aktiv Grotesk webfonts. This repo ships NO font binaries
   (the clone's @font-face sources 404), so this file deliberately declares a
   SYSTEM stack that lands on Helvetica Neue / Arial — the closest widely
   installed neo-grotesque to Aktiv Grotesk — and adds ZERO new requests.
   No @font-face here on purpose.

   NAMING TRAP (do not regress): recommendations.js hosts its .yo-hero-copy
   banner headline on the largest element matching
   '.swiper, [class*=banner], [class*=slider], [class*=hero]' whose top is
   within 1000px of the document top. The first .banner-box is that host now
   that the 3D orb hero is gone. Never give a section here a class containing
   hero/banner/slider, and never let the top block fall past 1000px.
   ========================================================================== */

/* ----------------------------------------------------------------  tokens */
body.response-index {
  --uh-ink: #000000;
  --uh-paper: #ffffff;
  --uh-cream: #f9f8f6;
  --uh-cream-2: #f4f1ec;
  --uh-fill: #f4f4f4;
  --uh-muted: #707070;
  --uh-sand: #d0bca6;
  --uh-taupe: #76675a;
  --uh-rule: #e6e3de;
  --uh-font: "Aktiv Grotesk", "Helvetica Neue", Helvetica, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Liberation Sans", sans-serif;
  --uh-gut: clamp(20px, 4.5vw, 80px);
}

body.response-index {
  background: var(--uh-paper) !important;
  color: var(--uh-ink);
  font-family: var(--uh-font) !important;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* the landing's own content column: UGG runs a very wide, near-full-bleed grid */
body.response-index .index-main,
body.response-index .yo-occ-widget,
body.response-index .yo-bs-widget,
body.response-index .title-section,
body.response-index .goods-recommend-box,
body.response-index .more-img-scroll-box {
  font-family: var(--uh-font);
}

body.response-index h1,
body.response-index h2,
body.response-index h3,
body.response-index h4,
body.response-index h5,
body.response-index h6 {
  font-family: var(--uh-font);
  font-weight: 700;
  color: var(--uh-ink);
}

/* kill the clone's blue-ish default link colour inside the landing column */
body.response-index .index-main a { color: inherit; }

/* ============================================================================
   1. PROMO BAR — thin black strip, centred 12px/600 white, minimal right side
   ========================================================================== */
body.response-index .top-bar {
  background: var(--uh-ink) !important;
  border: 0 !important;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
}
body.response-index .top-bar .marquee-box,
body.response-index .top-bar .marquee-box-wrapper,
body.response-index .top-bar .swiper-slide,
body.response-index .top-bar .swiper,
body.response-index .top-bar #js-marquee-box {
  background: transparent !important;
  height: auto !important;
}
body.response-index .top-bar .marquee-box,
body.response-index .top-bar .marquee-box p,
body.response-index .top-bar .f14 {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  line-height: 1.3;
  margin: 0 !important;
  padding: 11px 0 !important;
  text-align: center;
  font-family: var(--uh-font) !important;
}
body.response-index .top-bar .marquee-box a {
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-weight: 600 !important;
}
body.response-index .top-bar-right {
  position: absolute;
  right: var(--uh-gut);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}
body.response-index .top-bar-right .title,
body.response-index .top-bar-right span,
body.response-index .top-bar-right a,
body.response-index .top-bar-right i,
body.response-index .top-bar-right .f14 {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: var(--uh-font) !important;
}
body.response-index .top-bar-right svg path { fill: #fff; }
body.response-index .top-bar-right .hover-pop-box {
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  border-radius: 2px;
}
body.response-index .top-bar-right .hover-pop-box a,
body.response-index .top-bar-right .hover-pop-box i,
body.response-index .top-bar-right .hover-pop-box span { color: var(--uh-ink) !important; }

/* ============================================================================
   2. HEADER — white, minimal: logo left, uppercase nav, grey search, icons
   ========================================================================== */
body.response-index .header-container-pageHeader,
body.response-index #js-header-container {
  background: var(--uh-paper) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  font-family: var(--uh-font) !important;
}
body.response-index .header-container-pageHeader .head-logo img,
body.response-index #js-header-container .head-logo img { filter: grayscale(1); }

/* search field: UGG = flat grey fill, 4px radius, no heavy outline */
body.response-index .header-container-pageHeader input,
body.response-index .header-container-pageHeader .search-input,
body.response-index .header-container-pageHeader .head-search input {
  background: var(--uh-fill) !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: var(--uh-ink) !important;
  font-size: 14px !important;
  font-family: var(--uh-font) !important;
  height: 40px;
}
body.response-index .header-container-pageHeader input::placeholder { color: var(--uh-muted); }

/* header utility labels (account / wishlist / cart) */
body.response-index .header-container-pageHeader .right-box a,
body.response-index .header-container-pageHeader .right-box span,
body.response-index .header-container-pageHeader .cart-num,
body.response-index .header-container-pageHeader .min-cart-box { color: var(--uh-ink) !important; }
body.response-index .header-container-pageHeader svg path { fill: var(--uh-ink); }

/* ---- the desktop nav row: UGG runs it on white, uppercase, small, centred */
body.response-index .head-menu,
body.response-index #js-menu,
body.response-index .head-menu-inner {
  background: var(--uh-paper) !important;
  border-bottom: 1px solid var(--uh-rule) !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.response-index #js-menu .menu-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 38px);
  width: auto !important;
  margin: 0 auto;
}
body.response-index #js-menu .menu-item { width: auto !important; flex: 0 0 auto; }
body.response-index #js-menu .menu-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--uh-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-decoration: none;
  padding: 16px 2px !important;
  line-height: 1;
  font-family: var(--uh-font) !important;
}
body.response-index #js-menu .menu-link svg,
body.response-index #js-menu .menu-link .yo-caret { width: 14px; height: 14px; }
body.response-index #js-menu .menu-link:hover,
body.response-index #js-menu .menu-item.yo-active > .menu-link {
  color: var(--uh-ink) !important;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
body.response-index #js-menu .yo-caret path,
body.response-index #js-menu .yo-caret { fill: var(--uh-ink) !important; }
body.response-index #yo-menu-panel {
  border: 1px solid var(--uh-rule) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .10) !important;
}

/* ============================================================================
   3. THE HERO — full-bleed editorial image, minimal left-aligned overlaid text
      (this is the clone's first .banner-box; recommendations.js hosts the
      .yo-hero-copy headline on it — the only permitted host, so it stays)
   ========================================================================== */
body.response-index .index-main > .banner-box:first-of-type {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  height: clamp(480px, 52vw, 720px) !important;
  overflow: hidden;
  background: var(--uh-cream-2);
}
body.response-index .index-main > .banner-box:first-of-type .swiper,
body.response-index .index-main > .banner-box:first-of-type .swiper-wrapper,
body.response-index .index-main > .banner-box:first-of-type .slide-item {
  height: 100% !important;
}
body.response-index .index-main > .banner-box:first-of-type .slide-item .img-box {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
body.response-index .index-main > .banner-box:first-of-type .slide-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* the overlaid copy: boxless, left, UGG's exact type scale */
body.response-index .banner-box .yo-hero-copy {
  position: absolute;
  inset: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 var(--uh-gut);
  pointer-events: none;
  z-index: 5;
  /* a soft cream veil on the text side so black type reads on any slide —
     a fade, not a box; UGG's own hero type sits on black over its light slide */
  background: linear-gradient(90deg,
      rgba(249, 248, 246, .90) 0%,
      rgba(249, 248, 246, .68) 26%,
      rgba(249, 248, 246, .18) 42%,
      rgba(249, 248, 246, 0) 52%);
}
body.response-index .banner-box .yo-hero-copy h1 {
  font-family: var(--uh-font) !important;
  font-size: clamp(26px, 2.3vw, 32px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  color: var(--uh-ink) !important;
  text-shadow: none !important;
  margin: 0 0 10px !important;
  max-width: 22ch;
}
body.response-index .banner-box .yo-hero-copy p {
  font-family: var(--uh-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--uh-ink) !important;
  text-shadow: none !important;
  margin: 0 0 26px !important;
  max-width: 38ch;
}
body.response-index .banner-box .yo-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* screen-reader-only brand heading inside the hero block */
body.response-index .yo-sr-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* the store's own payment line, carried over from the retired 3D hero */
body.response-index .banner-box .yo-pay-note {
  position: absolute;
  left: var(--uh-gut);
  bottom: 18px;
  margin: 0 !important;
  z-index: 6;
  pointer-events: none;
  font-family: var(--uh-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--uh-ink) !important;
}

/* UGG's button: white fill, 1px black border, 4px radius, 50px, uppercase */
body.response-index .yo-b,
body.response-index .yo-f-news button.btn-join,
body.response-index .yo-f-news .btn-main {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  height: 50px !important;
  padding: 0 26px !important;
  font-family: var(--uh-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 1px solid var(--uh-ink) !important;
  border-radius: 4px !important;
  background: var(--uh-paper) !important;
  color: var(--uh-ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: background .18s ease, color .18s ease;
}
body.response-index .yo-b:hover,
body.response-index .yo-b-solid:hover,
body.response-index .yo-b-ghost:hover {
  background: var(--uh-ink) !important;
  color: var(--uh-paper) !important;
}
body.response-index .yo-b-ghost { background: var(--uh-paper) !important; color: var(--uh-ink) !important; }

/* the clone's own per-slide floating text boxes: UGG shows none — hide them */
body.response-index .banner-box .float-box { display: none !important; }
body.response-index .banner-box .swiper-button-prev,
body.response-index .banner-box .swiper-button-next { opacity: .55; }
body.response-index .banner-box .swiper-button-prev:hover,
body.response-index .banner-box .swiper-button-next:hover { opacity: 1; }
body.response-index .banner-box .swiper-pagination-bullet { background: var(--uh-ink); opacity: .28; }
body.response-index .banner-box .swiper-pagination-bullet-active { opacity: 1; }

/* ============================================================================
   4. TRUST LINE (injected) — thin uppercase rule row on cream, UGG-quiet
   ========================================================================== */
body.response-index .yo-trust-strip {
  background: var(--uh-cream) !important;
  color: var(--uh-ink) !important;
  border-bottom: 1px solid var(--uh-rule);
  padding: 16px var(--uh-gut) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  justify-content: center;
  gap: 12px 40px;
}
body.response-index .yo-trust-strip span { opacity: 1 !important; color: var(--uh-ink); }

/* ============================================================================
   5. SECTION HEADINGS — thin uppercase, generous vertical whitespace
   ========================================================================== */
body.response-index .title-section {
  margin: 0 !important;
  padding: clamp(56px, 6vw, 96px) var(--uh-gut) 0 !important;
  max-width: 100% !important;
  background: var(--uh-paper);
}
body.response-index .title-section header { text-align: center; }
body.response-index .title-section h5 {
  font-family: var(--uh-font) !important;
  font-size: clamp(22px, 2.1vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase;
  color: var(--uh-ink) !important;
  margin: 0 !important;
  line-height: 1.1;
}

/* ============================================================================
   6. PRODUCT / CATEGORY BANDS — image-dominant, no borders, no radius,
      small uppercase labels, plain-text price, subtle "Shop" affordance.
      Image slots are fixed-aspect boxes so replacement cream-backdrop shots
      can be dropped straight in without re-laying-out anything.
   ========================================================================== */

/* ---- shared: every product/tile image slot ------------------------------- */
body.response-index .yo-bs-img,
body.response-index .yo-bs-img img,
body.response-index .yo-mh-card > div:first-child img,
body.response-index .more-img-scroll-box .img-box,
body.response-index .more-img-scroll-box .img-box img {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.response-index .yo-bs-img,
body.response-index .more-img-scroll-box .img-box > img,
body.response-index .yo-mh-card > div:first-child {
  background: var(--uh-cream-2);
}

/* ---- 6a. Shop by Occasion (inline <style> in index.html, overridden here) - */
body.response-index .yo-occ-widget {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: clamp(56px, 6vw, 96px) var(--uh-gut) 0 !important;
}
body.response-index .yo-occ-widget h5 {
  font-size: clamp(22px, 2.1vw, 30px) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .01em !important;
  text-align: center;
  margin: 0 0 10px !important;
}
body.response-index .yo-occ-widget .yosub {
  text-align: center;
  color: var(--uh-muted) !important;
  font-size: 15px !important;
  margin: 0 auto 44px !important;
  max-width: 62ch;
}
body.response-index .yo-occ-grid { gap: 0 !important; border-top: 1px solid var(--uh-rule); }
body.response-index .yo-occ-col {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 34px 32px 34px 0 !important;
}
body.response-index .yo-occ-col + .yo-occ-col { padding-left: 32px !important; border-left: 1px solid var(--uh-rule) !important; }
body.response-index .yo-occ-col h6 {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--uh-ink) !important;
  margin: 0 0 16px !important;
}
body.response-index .yo-occ-col a {
  border-top: 0 !important;
  padding: 7px 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--uh-ink) !important;
}
body.response-index .yo-occ-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
body.response-index .yo-occ-col a i { color: var(--uh-muted) !important; }

/* ---- 6b. Best Sellers ---------------------------------------------------- */
body.response-index .yo-bs-widget {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: clamp(56px, 6vw, 88px) var(--uh-gut) 0 !important;
}
body.response-index .yo-bs-widget h5 {
  font-size: clamp(22px, 2.1vw, 30px) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .01em !important;
  text-align: center;
  margin: 0 0 10px !important;
}
body.response-index .yo-bs-sub {
  text-align: center;
  color: var(--uh-muted) !important;
  font-size: 15px !important;
  margin: 0 auto 44px !important;
  max-width: 62ch;
}
body.response-index .yo-bs-grid { gap: 40px 24px !important; }
body.response-index .yo-bs-card { display: flex; flex-direction: column; }
body.response-index .yo-bs-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
body.response-index .yo-bs-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
body.response-index .yo-bs-img:hover img { transform: scale(1.02) !important; }
body.response-index .yo-bs-staff { background: var(--uh-muted) !important; }
body.response-index .yo-bs-badge {
  background: var(--uh-ink) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  padding: 4px 9px !important;
}
body.response-index .yo-bs-name {
  margin: 14px 0 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  color: var(--uh-ink) !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  min-height: 0 !important;
}
body.response-index .yo-bs-name:hover { text-decoration: underline !important; text-underline-offset: 4px; }
body.response-index .yo-bs-price {
  margin-top: 6px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--uh-ink) !important;
}
body.response-index .yo-bs-units { font-size: 12px !important; color: var(--uh-muted) !important; margin-top: 4px !important; }

/* ---- 6c. Must-Have Selections (.goods-recommend-box → .yo-mh-card) ------- */
body.response-index .goods-recommend-box,
body.response-index .more-img-scroll-box {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(36px, 4vw, 56px) var(--uh-gut) 0;
  background: var(--uh-paper);
  box-sizing: border-box;
}
body.response-index .goods-recommend-box .yo-mh-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 40px 24px !important;
  margin: 0 !important;
}
body.response-index .goods-recommend-box .yo-mh-card {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  border: 0 !important;
  background: transparent !important;
}
body.response-index .goods-recommend-box .yo-mh-card > div:first-child {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  width: 100%;
}
body.response-index .goods-recommend-box .yo-mh-card > div:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
body.response-index .goods-recommend-box .yo-mh-card > div:last-child > div:first-child {
  margin-top: 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  color: var(--uh-ink) !important;
  line-height: 1.4 !important;
}
body.response-index .goods-recommend-box .yo-mh-card > div:last-child > div:last-child {
  margin-top: 6px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--uh-ink) !important;
}
/* the subtle "Shop" affordance UGG uses under a caption */
body.response-index .goods-recommend-box .yo-mh-card > div:last-child::after,
body.response-index .more-img-scroll-box .float-box a::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background: var(--uh-ink);
  margin-top: 10px;
  opacity: .5;
}
body.response-index .goods-recommend-box .yo-mh-card:hover > div:last-child > div:first-child,
body.response-index .more-img-scroll-box .float-box a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- 6d. Category tiles (.more-img-scroll-box) --------------------------- */
body.response-index .more-img-scroll-box .swiper-slide.slide-item,
body.response-index .more-img-scroll-box .item-box { background: transparent !important; }
body.response-index .more-img-scroll-box .img-box {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden;
  background: var(--uh-cream-2) !important;
}
body.response-index .more-img-scroll-box .img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
body.response-index .more-img-scroll-box .float-box {
  position: static !important;
  background: transparent !important;
  padding: 14px 0 0 !important;
  text-align: left !important;
}
body.response-index .more-img-scroll-box .float-box a {
  display: inline-block;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  color: var(--uh-ink) !important;
  text-decoration: none !important;
}

/* ---- 6e. The two mid-page full-bleed banners: image only, no overlay ----- */
body.response-index .index-main > .banner-box:not(:first-of-type) {
  position: relative;
  /* these two bands ship as near-empty wide strips (native 1400x114 and
     1400x342). A big forced height only manufactures dead space, so they stay
     thin editorial bands until real artwork replaces them. */
  height: clamp(150px, 17vw, 240px) !important;
  overflow: hidden;
  margin: 0 !important;
  background: var(--uh-cream-2);
}
body.response-index .index-main > .banner-box:not(:first-of-type) .swiper,
body.response-index .index-main > .banner-box:not(:first-of-type) .swiper-wrapper,
body.response-index .index-main > .banner-box:not(:first-of-type) .slide-item,
body.response-index .index-main > .banner-box:not(:first-of-type) .img-box { height: 100% !important; }
body.response-index .index-main > .banner-box:not(:first-of-type) .img-box { display: block; }
body.response-index .index-main > .banner-box:not(:first-of-type) img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block;
}

/* ---- 6f. footer scroll-to-top strip ------------------------------------- */
body.response-index .footer-scroll-to-top {
  background: var(--uh-cream) !important;
  border-top: 1px solid var(--uh-rule) !important;
  color: var(--uh-ink) !important;
  padding: 26px var(--uh-gut) !important;
  text-align: right;
}
body.response-index .footer-scroll-to-top a,
body.response-index .footer-scroll-to-top span { color: var(--uh-ink) !important; font-size: 12px !important; letter-spacing: .12em; text-transform: uppercase; }

/* ============================================================================
   7. THE INJECTED CONTENT BANDS (recommendations.js) — UGG rhythm:
      thin uppercase heading, generous whitespace, rules instead of boxes
   ========================================================================== */
body.response-index .yo-band {
  background: var(--uh-paper) !important;
  padding: clamp(64px, 7vw, 110px) var(--uh-gut) !important;
  max-width: 100% !important;
  border: 0 !important;
}
body.response-index .yo-band h2 {
  font-family: var(--uh-font) !important;
  font-size: clamp(22px, 2.1vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase;
  color: var(--uh-ink) !important;
  text-align: center;
  margin: 0 0 12px !important;
}
body.response-index .yo-band-sub {
  color: var(--uh-muted) !important;
  font-size: 15px !important;
  text-align: center;
  max-width: 64ch;
  margin: 0 auto 52px !important;
}
body.response-index .yo-band > *:not(.yo-band-sub):not(h2) { max-width: 1320px; margin-left: auto; margin-right: auto; }

/* why band: rule-separated cells, no borders on the boxes */
body.response-index .yo-why-grid { gap: 0 !important; border-top: 1px solid var(--uh-rule); }
body.response-index .yo-why-cell { border: 0 !important; padding: 34px 30px 34px 0 !important; background: transparent !important; }
body.response-index .yo-why-cell + .yo-why-cell { padding-left: 30px !important; border-left: 1px solid var(--uh-rule) !important; }
body.response-index .yo-why-cell h3 {
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .14em !important;
  text-transform: uppercase; margin: 12px 0 8px !important;
}
body.response-index .yo-why-cell p { font-size: 15px !important; color: var(--uh-muted) !important; line-height: 1.6 !important; margin: 0 !important; }
body.response-index .yo-tick { color: var(--uh-ink) !important; font-size: 18px !important; }

/* care band: borderless image cards */
body.response-index .yo-care-grid { gap: 24px !important; }
body.response-index .yo-care-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--uh-cream) !important;
  padding: 34px 28px !important;
  text-decoration: none !important;
}
body.response-index .yo-care-card:hover { background: var(--uh-cream-2) !important; }
body.response-index .yo-care-card span {
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .14em !important;
  text-transform: uppercase; color: var(--uh-muted) !important;
}
body.response-index .yo-care-card strong { display: block; margin: 12px 0 16px; font-size: 20px !important; font-weight: 600 !important; color: var(--uh-ink); line-height: 1.25; text-transform: none; }
body.response-index .yo-care-card em { font-style: normal; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--uh-ink); text-decoration: underline; text-underline-offset: 4px; }

/* reviews band */
body.response-index .yo-review-empty {
  border: 0 !important;
  background: var(--uh-cream) !important;
  padding: 40px !important;
  text-align: center;
}
body.response-index .yo-review-empty p { font-size: 15px !important; line-height: 1.7 !important; color: var(--uh-muted) !important; max-width: 68ch; margin: 0 auto 14px; }
body.response-index .yo-review-empty p strong { color: var(--uh-ink) !important; font-weight: 700; }
body.response-index .yo-review-empty .yo-b { margin-top: 14px; }

/* the little personal-shopper quiz: flat, uppercase, no fills */
body.response-index .yo-shopper { background: var(--uh-cream) !important; }
body.response-index .yo-shop-step h3 { font-size: 18px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .04em; text-align: center; }
body.response-index .yo-shop-opts { gap: 10px !important; justify-content: center; }
body.response-index .yo-shop-opts button {
  border: 1px solid var(--uh-ink) !important;
  border-radius: 4px !important;
  background: var(--uh-paper) !important;
  color: var(--uh-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  padding: 14px 20px !important;
  font-family: var(--uh-font) !important;
}
body.response-index .yo-shop-opts button:hover { background: var(--uh-ink) !important; color: var(--uh-paper) !important; }
body.response-index .yo-shop-dots i { background: var(--uh-rule) !important; }
body.response-index .yo-shop-dots i.on { background: var(--uh-ink) !important; }
body.response-index .yo-shop-reset {
  border: 0 !important; background: none !important; color: var(--uh-muted) !important;
  font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline;
  cursor: pointer; font-family: var(--uh-font) !important;
}
body.response-index .yo-shop-out { text-align: center; font-size: 15px !important; color: var(--uh-muted) !important; }
body.response-index .yo-shopper .yo-b-solid { margin: 0 auto; }

/* ============================================================================
   8. NEWSLETTER BAND — flat cream, UGG-quiet
   ========================================================================== */
body.response-index .yo-news-band {
  background: var(--uh-cream) !important;
  border-top: 1px solid var(--uh-rule) !important;
  padding: clamp(64px, 7vw, 104px) var(--uh-gut) !important;
}
body.response-index .yo-news-band h2 {
  font-family: var(--uh-font) !important;
  font-size: clamp(20px, 1.9vw, 26px) !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase;
  color: var(--uh-ink) !important;
  margin: 0 0 12px !important;
}
body.response-index .yo-news-band p { color: var(--uh-muted) !important; font-size: 15px !important; }
body.response-index .yo-news-band input[type=email] {
  background: var(--uh-paper) !important;
  border: 1px solid var(--uh-ink) !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  height: 50px !important;
  font-size: 15px !important;
  font-family: var(--uh-font) !important;
  color: var(--uh-ink) !important;
}
body.response-index .yo-news-band button {
  background: var(--uh-ink) !important;
  border: 1px solid var(--uh-ink) !important;
  border-radius: 0 !important;
  color: var(--uh-paper) !important;
  font-family: var(--uh-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  height: 50px !important;
  padding: 0 30px !important;
}
body.response-index .yo-news-band button:hover { background: #333 !important; }

/* ============================================================================
   9. FOOTER — UGG's warm off-white #f9f8f6 with black type.
      KEEPS the .yo-footer-dark class: recommendations.js uses
      closest('.yo-footer-dark') to exclude the footer from its hero-copy
      host search, so the class must stay even though it is no longer dark.
   ========================================================================== */
body.response-index .yo-footer-dark,
body.response-index footer.yo-footer {
  background: var(--uh-cream) !important;
  color: var(--uh-ink) !important;
  border-top: 1px solid var(--uh-rule) !important;
  font-family: var(--uh-font) !important;
}
body.response-index .yo-f-dark-top { border-bottom: 1px solid var(--uh-rule); padding-bottom: 44px; }
body.response-index .yo-f-dcol h2,
body.response-index .yo-f-dcol h4 {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--uh-ink) !important;
  margin: 0 0 18px !important;
}
body.response-index .yo-f-dlinks a,
body.response-index .yo-f-dcont,
body.response-index .yo-f-dcont a {
  color: var(--uh-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}
body.response-index .yo-f-dlinks a:hover,
body.response-index .yo-f-dcont a:hover { color: var(--uh-ink) !important; }
body.response-index .yo-f-dcont strong { color: var(--uh-ink) !important; }
body.response-index .yo-f-dsoc a { border: 1px solid var(--uh-rule) !important; color: var(--uh-ink) !important; }
body.response-index .yo-f-dsoc a:hover { background: var(--uh-ink) !important; color: var(--uh-cream) !important; border-color: var(--uh-ink) !important; }
body.response-index .yo-f-dsoc svg,
body.response-index .yo-f-dsoc img { filter: grayscale(1) !important; }
body.response-index .yo-f-dark-bottom { border-top: 1px solid var(--uh-rule) !important; }
body.response-index .yo-f-clabel { color: var(--uh-muted) !important; font-size: 12px !important; letter-spacing: .12em !important; text-transform: uppercase; }
body.response-index .yo-f-cpick > button { border: 1px solid var(--uh-ink) !important; color: var(--uh-ink) !important; border-radius: 4px !important; background: transparent !important; font-size: 13px !important; }
body.response-index .yo-f-cpick > button:hover { background: var(--uh-ink) !important; color: var(--uh-cream) !important; }
body.response-index .yo-f-cpick > button svg path { fill: currentColor; }
body.response-index .yo-f-dpays li { background: var(--uh-paper) !important; border: 1px solid var(--uh-rule); border-radius: 3px !important; }
body.response-index .yo-f-dark-bottom .yo-f-vat,
body.response-index .yo-f-copy { color: var(--uh-muted) !important; font-size: 12px !important; }
body.response-index .yo-footer-dark { margin-bottom: -60px !important; padding-bottom: 78px !important; }

/* ============================================================================
   10. WhatsApp float — quiet it down to UGG's restrained palette
   ========================================================================== */
body.response-index .yo-wa-float {
  background: var(--uh-ink) !important;
  border-radius: 4px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18) !important;
  font-family: var(--uh-font) !important;
}
body.response-index .yo-wa-float:hover { background: #1a1a1a !important; }
body.response-index .yo-wa-txt strong { font-weight: 600 !important; letter-spacing: .02em; }
body.response-index .yo-wa-txt em { font-style: normal; opacity: .7; font-size: 12px !important; }

/* ============================================================================
   11. MOBILE — UGG mobile: same rhythm, tighter gutters, 24px headline
   ========================================================================== */
@media (max-width: 900px) {
  body.response-index .index-main > .banner-box:first-of-type { height: clamp(420px, 116vw, 620px) !important; }
  body.response-index .banner-box .yo-hero-copy {
    justify-content: flex-end;
    padding: 0 20px 54px;
    background: linear-gradient(0deg,
        rgba(249, 248, 246, .97) 0%,
        rgba(249, 248, 246, .90) 42%,
        rgba(249, 248, 246, 0) 74%);
  }
  body.response-index .banner-box .yo-pay-note {
    left: 20px;
    right: 20px;
    bottom: 18px;
    font-size: 11px !important;
    letter-spacing: .1em;
  }
  body.response-index .banner-box .yo-hero-copy h1 { font-size: 24px !important; max-width: none; }
  body.response-index .banner-box .yo-hero-copy p { font-size: 14px !important; margin-bottom: 20px !important; }
  body.response-index .yo-b { min-width: 0; width: 100%; }
  body.response-index .yo-hero-btns { width: 100%; }
  body.response-index .goods-recommend-box .yo-mh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 14px !important; }
  body.response-index .yo-occ-grid { gap: 0 !important; }
  body.response-index .yo-occ-col + .yo-occ-col { border-left: 0 !important; border-top: 1px solid var(--uh-rule) !important; padding-left: 0 !important; }
  body.response-index .yo-why-cell + .yo-why-cell { border-left: 0 !important; border-top: 1px solid var(--uh-rule) !important; padding-left: 0 !important; }
  body.response-index .more-img-scroll-box .img-box { aspect-ratio: 3 / 4 !important; }
  body.response-index .index-main > .banner-box:not(:first-of-type) { height: 180px !important; }
  body.response-index .more-img-scroll-box,
  body.response-index .goods-recommend-box { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 640px) {
  body.response-index .yo-bs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 12px !important; }
  body.response-index .top-bar-right { display: none; }
  body.response-index .top-bar .marquee-box,
  body.response-index .top-bar .marquee-box p { font-size: 11px !important; padding: 10px 14px !important; }
}

/* ============================================================================
   PHASE 1 LIGHT-TOUCH (2026-10-04) — see CHANGES.md
   ========================================================================== */

/* hero: one clear call to action — the primary is filled, the second is a quiet text link */
body.response-index .banner-box .yo-hero-btns { align-items: center; gap: 22px; pointer-events: auto; }
body.response-index .banner-box .yo-b-solid { background: var(--uh-ink) !important; color: var(--uh-paper) !important; }
body.response-index .banner-box .yo-b-solid:hover { background: #2a2a2a !important; color: var(--uh-paper) !important; }
body.response-index .banner-box .yo-b-ghost,
body.response-index .banner-box .yo-b-ghost:hover {
  min-width: 0 !important;
  height: auto !important;
  padding: 4px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--uh-ink) !important;
  font-size: 13px !important;
}
body.response-index .banner-box .yo-b-ghost:hover { opacity: .65; }

/* product cards: Best Sellers matches Must-Have — square slot, image fills it.
   The <img> sits inside an inline <a>, so the link has to fill the slot first. */
body.response-index .yo-bs-img { aspect-ratio: 1 / 1 !important; }
body.response-index .yo-bs-img > a { display: block; width: 100%; height: 100%; }
body.response-index .yo-bs-img img,
body.response-index .goods-recommend-box .yo-mh-card > div:first-child img { transition: transform .35s ease !important; }
body.response-index .goods-recommend-box .yo-mh-card:hover > div:first-child img { transform: scale(1.02); }
body.response-index .yo-bs-name { display: block; margin-top: 14px; }

/* the thin strip under the category rail only ever carried the template's blank
   placeholder art and is too narrow (12:1) for a photo; hidden, markup kept */
body.response-index .banner-box[data-title="banner_f6"] { display: none !important; }
@media (max-width: 900px) {
  body.response-index .banner-box .yo-b-ghost { width: auto !important; align-self: center; margin-bottom: 26px; }
}
/* the lower banner now carries a real photo, so it gets real height */
body.response-index .index-main > .banner-box[data-title="banner_f7"] { height: clamp(260px, 36vw, 540px) !important; }

@media (max-width: 900px) {
  /* phones: the slot is too short to put copy over the shoe, so the photo keeps
     the hero height and the copy sits under it on cream */
  body.response-index .index-main > .banner-box:first-of-type { height: auto !important; }
  body.response-index .index-main > .banner-box:first-of-type .swiper { height: clamp(380px, 100vw, 560px) !important; }
  body.response-index .banner-box .yo-hero-copy {
    position: static;
    inset: auto;
    background: var(--uh-cream) !important;
    padding: 28px var(--uh-gut) 8px;
  }
  /* the payment line stays on the photo's bottom edge, on a cream label so it reads on any slide */
  body.response-index .banner-box .yo-pay-note {
    top: calc(clamp(380px, 100vw, 560px) - 44px);
    bottom: auto;
    background: var(--uh-cream);
    padding: 6px 10px;
    font-size: 11px !important;
  }
  body.response-index .index-main > .banner-box[data-title="banner_f7"] { height: 56vw !important; }
}

/* desktop hero as a split: copy on a solid cream panel at left, photo on the right.
   The stock shots are centred, so an overlay would always sit on the shoe. */
@media (min-width: 901px) {
  body.response-index .index-main > .banner-box:first-of-type { background: var(--uh-cream) !important; }
  body.response-index .index-main > .banner-box:first-of-type > .swiper {
    margin-left: 42% !important;
    width: 58% !important;
  }
  body.response-index .banner-box .yo-hero-copy {
    inset: 0 auto 0 0 !important;
    width: 42%;
    background: var(--uh-cream) !important;
  }
}

/* ============================================================================
   PHASE 2 — homepage bands added by js/home-phase2.js
   ========================================================================== */
/* 3. occasion picture cards */
body.response-index .yo-occ-widget { max-width: 1440px !important; padding: 0 var(--uh-gut) !important; margin: 72px auto 0 !important; }
body.response-index .yo-occ-widget h5 { text-align: center; }
body.response-index .yo-occ-sub { text-align: center; color: var(--uh-muted); margin: 0 auto 32px; max-width: 52ch; }
body.response-index .yo-occ-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body.response-index .yo-occ-card { display: flex; flex-direction: column; text-decoration: none; color: var(--uh-ink); }
body.response-index .yo-occ-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--uh-cream-2); }
body.response-index .yo-occ-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; display: block; }
body.response-index .yo-occ-card:hover .yo-occ-img img { transform: scale(1.03); }
body.response-index .yo-occ-card strong { margin-top: 14px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
body.response-index .yo-occ-card em { font-style: normal; font-size: 13px; color: var(--uh-muted); margin-top: 4px; }
body.response-index .yo-occ-also { text-align: center; margin: 26px 0 0; font-size: 14px; color: var(--uh-muted); }
body.response-index .yo-occ-also a { color: var(--uh-ink); text-decoration: underline; text-underline-offset: 3px; }

/* rails (best sellers, new arrivals, complete the look): a scrollable row of cards */
body.response-index .yo-rail { max-width: 1440px !important; padding: 0 var(--uh-gut) !important; margin: 72px auto 0 !important; }
body.response-index .yo-rail h5, body.response-index .yo-rail .yo-bs-sub { text-align: center; }
body.response-index .yo-rail .yo-bs-sub { margin: 0 auto 28px !important; max-width: 56ch; }
body.response-index .yo-rail .yo-bs-grid {
  display: grid !important; grid-auto-flow: column; grid-template-columns: none !important;
  grid-auto-columns: calc((100% - 3 * 24px) / 4); gap: 24px !important;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin;
}
body.response-index .yo-rail .yo-bs-card { scroll-snap-align: start; }
body.response-index .yo-rating { margin-top: 6px; font-size: 12.5px; color: var(--uh-muted); }
body.response-index .yo-rating b { color: var(--uh-ink); font-weight: 600; }
body.response-index .yo-stars { color: #b8892b; letter-spacing: 1px; }
body.response-index .yo-stars i { font-style: normal; color: #d9d4ca; }
body.response-index .yo-rail-more { text-align: center; margin: 22px 0 0; }
body.response-index .yo-rail-more a { color: var(--uh-ink); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* 8. reviews */
body.response-index .yo-rev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; }
body.response-index .yo-rev { margin: 0; padding: 28px; background: var(--uh-paper); border: 1px solid var(--uh-rule); display: flex; flex-direction: column; gap: 14px; }
body.response-index .yo-rev blockquote { margin: 0; font-size: 15px; line-height: 1.6; color: var(--uh-ink); }
body.response-index .yo-rev figcaption { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; margin-top: auto; }
body.response-index .yo-rev figcaption em { font-style: normal; color: var(--uh-muted); flex-basis: 100%; }
body.response-index .yo-verified { color: #2f6b3a; font-weight: 600; font-size: 12px; }

@media (max-width: 900px) {
  body.response-index .yo-occ-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.response-index .yo-rail .yo-bs-grid { grid-auto-columns: 46%; gap: 12px !important; }
  body.response-index .yo-rev-grid { grid-template-columns: 1fr; }
  body.response-index .yo-occ-widget, body.response-index .yo-rail { margin-top: 52px !important; }
}
/* shoe finder results */
body.response-index .yo-shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 720px; margin: 0 auto 24px; }
body.response-index .yo-shop-grid a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--uh-ink); font-size: 13px; text-align: left; }
body.response-index .yo-shop-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--uh-cream-2); }
body.response-index .yo-shop-grid em { font-style: normal; color: var(--uh-muted); }
@media (max-width: 600px) { body.response-index .yo-shop-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 11px; } }