/* XiaomiGlobal / HamiShop Pro 2.27.0
 * Final desktop + responsive alignment pass.
 */

html, body { max-width: 100%; overflow-x: hidden; }
body img { max-width: 100%; }

/* Main hero: compact copy at bottom-right, CTA at bottom-left. */
body .hsp-fresh-hero-content {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  pointer-events: none !important;
}
body .hsp-fresh-hero-copy {
  position: absolute !important;
  right: clamp(24px, 5.5vw, 92px) !important;
  left: auto !important;
  bottom: clamp(20px, 2.4vw, 34px) !important;
  width: auto !important;
  min-width: 230px !important;
  max-width: min(520px, calc(100% - 300px)) !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 4px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  overflow: hidden !important;
  border-radius: 19px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.11) !important;
  pointer-events: auto !important;
}
body .hsp-fresh-hero-copy span,
body .hsp-fresh-hero-copy small { display: none !important; }
body .hsp-fresh-hero-copy strong,
body .hsp-fresh-hero-copy h1 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(13px, .95vw, 16px) !important;
  line-height: 30px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -.02em !important;
}
body .hsp-fresh-hero-copy > .hsp-hero-product-name {
  display: block !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #0f172a !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 30px !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
}
body .hsp-fresh-hero-button {
  position: absolute !important;
  left: clamp(24px, 5.5vw, 92px) !important;
  right: auto !important;
  bottom: clamp(22px, 2.5vw, 36px) !important;
  min-height: 34px !important;
  padding: 0 17px !important;
  font-size: 11px !important;
  pointer-events: auto !important;
}

/* Mega menu: make all three product rows fill the same vertical area as categories. */
@media (min-width: 1181px) {
  .site-header.hsp-fashion-menu-header .hsp-dept-main { align-items: stretch !important; }
  .site-header.hsp-fashion-menu-header .hsp-top-rated-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  .site-header.hsp-fashion-menu-header .hsp-dept-mega .hsp-top-rated-grid {
    height: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(92px, 1fr)) !important;
    gap: 12px !important;
  }
  .site-header.hsp-fashion-menu-header .hsp-dept-mega .hsp-top-rated-item {
    min-height: 92px !important;
    height: 100% !important;
    grid-template-columns: 66px minmax(0, 1fr) !important;
    grid-template-rows: minmax(34px, auto) 24px !important;
    padding: 11px 12px !important;
    gap: 6px 11px !important;
  }
  .site-header.hsp-fashion-menu-header .hsp-dept-mega .hsp-top-rated-item > span:first-child,
  .site-header.hsp-fashion-menu-header .hsp-dept-mega .hsp-top-rated-item img,
  .site-header.hsp-fashion-menu-header .hsp-dept-mega .hsp-top-rated-item .woocommerce-placeholder {
    width: 62px !important;
    height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
  }
  .site-header.hsp-fashion-menu-header .hsp-dept-mega .hsp-top-rated-item b {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  .site-header.hsp-fashion-menu-header .hsp-dept-mega .hsp-top-rated-item em {
    min-height: 22px !important;
    height: 22px !important;
    max-width: 112px !important;
    padding-inline: 9px !important;
    font-size: 9.5px !important;
    line-height: 22px !important;
  }
}

/* Three promotional cards below the hero: rebuilt without transforms. */
body .hsp-feature-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}
body .hsp-feature-card {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 78px minmax(260px, 1fr) !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 430px !important;
  padding: 18px 18px 52px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #fff !important;
  border: 1px solid #e7eaf0 !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.06) !important;
}
body .hsp-feature-card::before,
body .hsp-feature-card::after { content: none !important; display: none !important; }
body .hsp-feature-card .hsp-banner-copy {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 78px !important;
  padding: 0 4px !important;
  overflow: hidden !important;
  text-align: right !important;
  z-index: 2 !important;
}
body .hsp-feature-card .hsp-banner-copy span {
  display: block !important;
  margin: 0 0 4px !important;
  font-size: 9px !important;
}
body .hsp-feature-card .hsp-banner-copy strong {
  display: block !important;
  max-width: 100% !important;
  font-size: clamp(13px, .95vw, 15px) !important;
  line-height: 1.55 !important;
}
body .hsp-feature-card .hsp-banner-copy small {
  display: block !important;
  max-width: 100% !important;
  margin-top: 4px !important;
  font-size: 9.5px !important;
  line-height: 1.55 !important;
}
body .hsp-feature-card .hsp-banner-media {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 260px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
body .hsp-feature-card .hsp-banner-media img {
  position: static !important;
  display: block !important;
  width: 90% !important;
  height: 90% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 90% !important;
  max-height: 90% !important;
  margin: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
}
/* The saved banner files contain large white margins. Zoom each composition
 * inside its clipped media viewport so the PRODUCT—not the whitespace—fills
 * most of the card. The viewport and card both remain overflow-safe. */
body .hsp-feature-card:nth-child(1) .hsp-banner-media img {
  transform: scale(1.9) !important;
  transform-origin: center center !important;
}
body .hsp-feature-card:nth-child(2) .hsp-banner-media img {
  transform: scale(1.7) !important;
  transform-origin: center center !important;
}
body .hsp-feature-card:nth-child(3) .hsp-banner-media img {
  transform: scale(1.58) !important;
  transform-origin: center center !important;
}
body .hsp-feature-card .hsp-banner-cta {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  z-index: 4 !important;
}

/* Global typography safety: prevent long labels from breaking their containers. */
.hsp-department-menu a, .hsp-department-menu button,
.hsp-section-headline, .hsp-banner-copy, .woocommerce-loop-product__title {
  overflow-wrap: anywhere;
}
.hsp-section-headline h2 { font-size: clamp(24px, 2.6vw, 38px) !important; line-height: 1.45 !important; }

@media (max-width: 1180px) {
  body .hsp-fresh-hero-copy {
    right: 18px !important;
    width: auto !important;
    min-width: 210px !important;
    max-width: calc(100% - 170px) !important;
  }
  body .hsp-fresh-hero-button { left: 18px !important; }
}

@media (max-width: 760px) {
  body .hsp-fresh-hero-copy {
    right: 12px !important;
    left: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 3px 12px !important;
  }
  body .hsp-fresh-hero-copy span,
  body .hsp-fresh-hero-copy small { display: none !important; }
  body .hsp-fresh-hero-copy strong,
  body .hsp-fresh-hero-copy h1 {
    max-width: calc(100% - 104px) !important;
    font-size: clamp(12px, 3.6vw, 14px) !important;
    line-height: 30px !important;
  }
  body .hsp-fresh-hero-copy > .hsp-hero-product-name {
    width: 100% !important;
    height: 30px !important;
    font-size: 12px !important;
    line-height: 30px !important;
    text-align: center !important;
  }
  body .hsp-fresh-hero-button {
    left: 20px !important;
    bottom: 20px !important;
    min-height: 31px !important;
    padding-inline: 12px !important;
    font-size: 10px !important;
  }
  body .hsp-feature-card-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  body .hsp-feature-card { grid-template-rows: 72px minmax(235px, 1fr) !important; min-height: 385px !important; padding: 16px 16px 50px !important; }
  body .hsp-feature-card .hsp-banner-copy { position: static !important; width: 100% !important; padding: 0 2px !important; }
  body .hsp-feature-card .hsp-banner-copy strong { font-size: 15px !important; }
  body .hsp-feature-card .hsp-banner-copy small { font-size: 10px !important; }
  body .hsp-feature-card .hsp-banner-media { position: relative !important; inset: auto !important; width: 100% !important; min-height: 235px !important; }
  body .hsp-feature-card .hsp-banner-media img { width: 90% !important; height: 90% !important; max-width: 90% !important; max-height: 90% !important; }
  body .hsp-feature-card:nth-child(1) .hsp-banner-media img { transform: scale(1.65) !important; }
  body .hsp-feature-card:nth-child(2) .hsp-banner-media img { transform: scale(1.5) !important; }
  body .hsp-feature-card:nth-child(3) .hsp-banner-media img { transform: scale(1.42) !important; }
  .hsp-section-headline h2 { font-size: clamp(21px, 7vw, 29px) !important; }
}

/* 2.32.0 — Final image-only three-banner layout.
 * The anchor itself is the banner and its configured destination is the click target.
 */
body .hsp-feature-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}
body .hsp-feature-card.hsp-feature-card--image-only {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #e7eaf0 !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.06) !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
body .hsp-feature-card.hsp-feature-card--image-only::before,
body .hsp-feature-card.hsp-feature-card--image-only::after {
  content: none !important;
  display: none !important;
}
body .hsp-feature-card.hsp-feature-card--image-only > img.hsp-feature-card-image {
  position: absolute !important;
  inset: 5% !important;
  display: block !important;
  width: 90% !important;
  height: 90% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 90% !important;
  max-height: 90% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
}
@media (max-width: 900px) {
  body .hsp-feature-card-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  body .hsp-feature-card.hsp-feature-card--image-only { aspect-ratio: 16 / 9 !important; border-radius: 18px !important; }
}

/* 2.39.0 — desktop homepage visual audit and spacing normalization. */
@media (min-width: 1201px) {
  body .hsp-product-carousel-section .hsp-product-carousel-viewport ul.products li.product,
  body .hsp-product-carousel-section .hsp-product-carousel-viewport .woocommerce ul.products li.product,
  body .hsp-product-carousel-section .hsp-product-carousel-viewport .woocommerce-page ul.products li.product {
    flex: 0 0 calc((100vw - 212px) / 4) !important;
    width: calc((100vw - 212px) / 4) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}
body .hsp-product-carousel-section .hsp-product-carousel-viewport {
  max-width: 100% !important;
  overflow: hidden !important;
}
body .hsp-product-carousel-section .hsp-section-headline h2,
body .hsp-weekly-deal-head h2,
body .hsp-hotspot-headline h2 {
  font-size: clamp(27px, 2.4vw, 40px) !important;
  line-height: 1.35 !important;
}
body .hsp-weekly-deal-image img {
  width: 90% !important;
  height: 90% !important;
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  transform: none !important;
}
body .hsp-hotspot-showcase-section {
  padding-top: 34px !important;
}
body .hsp-hotspot-showcase-section .hsp-hotspot-headline {
  margin-bottom: 8px !important;
}
body.home .hsp-hotspot-showcase-section .hsp-hotspot-stage,
body .hsp-hotspot-showcase-section .hsp-hotspot-stage {
  min-height: 280px !important;
  height: 280px !important;
  max-height: 280px !important;
  overflow: visible !important;
}
body.home .hsp-hotspot-showcase-section .hsp-hotspot-product-link,
body .hsp-hotspot-showcase-section .hsp-hotspot-product-link {
  min-height: 180px !important;
  height: 190px !important;
}
body.home .hsp-hotspot-showcase-section .hsp-hotspot-product-image,
body .hsp-hotspot-showcase-section .hsp-hotspot-product-image {
  width: 100% !important;
  height: 190px !important;
  max-height: 190px !important;
  object-fit: contain !important;
}
body .hsp-milana-expand-grid {
  min-height: 350px !important;
  height: 350px !important;
  max-height: 350px !important;
  gap: 16px !important;
}
body .hsp-milana-expand-card,
body .hsp-milana-expand-card:first-child,
body .hsp-milana-expand-grid:hover .hsp-milana-expand-card {
  min-height: 350px !important;
  height: 350px !important;
  max-height: 350px !important;
}
body .hsp-milana-expand-link {
  min-height: 350px !important;
  height: 350px !important;
  max-height: 350px !important;
}
body .hsp-milana-expand-media {
  inset: 16px 16px 76px !important;
  transform: scale(.82) !important;
}
body .hsp-milana-expand-card:hover .hsp-milana-expand-media,
body .hsp-milana-expand-card:focus-within .hsp-milana-expand-media {
  transform: scale(.88) !important;
}
body .hsp-milana-expand-content strong {
  font-size: clamp(20px, 1.65vw, 28px) !important;
}
@media (max-width: 991px) {
  body.home .hsp-hotspot-showcase-section .hsp-hotspot-stage,
  body .hsp-hotspot-showcase-section .hsp-hotspot-stage {
    height: auto !important;
    max-height: none !important;
    min-height: 520px !important;
  }
  body .hsp-milana-expand-grid { height: auto !important; max-height: none !important; }
}

/* 2.36.0 — isolated all-product slider; no legacy banner/card rules apply. */
body .xg-all-products-slider {
  width: 100%;
  padding: 30px 0 42px;
  overflow: hidden;
  background: #fff;
}
body .xg-products-slider-shell { position: relative; }
body .xg-products-slider-viewport {
  width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  direction: ltr !important;
}
body .xg-products-slider-viewport::-webkit-scrollbar { display: none; }
body .xg-products-slider-viewport.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
body .xg-products-slider-track {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch;
  gap: 22px;
  width: auto !important;
  min-width: 100%;
  padding: 2px;
  transform: none !important;
  direction: ltr !important;
}
body a.xg-products-slider-card {
  position: relative;
  display: block !important;
  flex: 0 0 calc((100% - 44px) / 3) !important;
  width: auto !important;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  scroll-snap-align: none;
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}
body a.xg-products-slider-card > img.xg-products-slider-image {
  position: absolute !important;
  inset: 5% !important;
  display: block !important;
  width: 90% !important;
  height: 90% !important;
  max-width: 90% !important;
  max-height: 90% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  pointer-events: none !important;
}
body .xg-products-slider-button {
  position: absolute;
  z-index: 20;
  top: 50%;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 10px 28px rgba(15,23,42,.16);
  font-size: 30px;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
}
body .xg-products-slider-prev { right: -18px; }
body .xg-products-slider-next { left: -18px; }
body .xg-products-slider-button:hover { background: #0f172a; color: #fff; }
@media (max-width: 900px) {
  body .xg-all-products-slider { padding: 20px 0 30px; }
  body .xg-products-slider-track { gap: 14px; }
  body a.xg-products-slider-card {
    flex-basis: min(84vw, 520px) !important;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }
  body .xg-products-slider-button { width: 40px; height: 40px; font-size: 25px; }
  body .xg-products-slider-prev { right: 4px; }
  body .xg-products-slider-next { left: 4px; }
}

/* 2.35.0 — All-products WooCommerce carousel. */
body .hsp-product-carousel-shell {
  position: relative;
  width: 100%;
}
body .hsp-product-carousel-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
}
body .hsp-product-carousel-viewport::-webkit-scrollbar { display: none; }
body .hsp-product-carousel-viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
body .hsp-feature-card-grid.hsp-product-carousel-track {
  display: flex !important;
  gap: 22px !important;
  width: auto !important;
  min-width: 100% !important;
  padding: 2px !important;
}
body .hsp-product-carousel-card {
  flex: 0 0 calc((100% - 44px) / 3) !important;
  scroll-snap-align: start;
}
body .hsp-product-carousel-nav {
  position: absolute;
  z-index: 8;
  top: 50%;
  width: 46px;
  height: 46px;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 10px 28px rgba(15,23,42,.14);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}
body .hsp-product-carousel-prev { right: -18px; }
body .hsp-product-carousel-next { left: -18px; }
body .hsp-product-carousel-nav:hover { background: #0f172a; color: #fff; }
@media (max-width: 900px) {
  body .hsp-feature-card-grid.hsp-product-carousel-track {
    gap: 14px !important;
  }
  body .hsp-product-carousel-card { flex-basis: min(84vw, 520px) !important; }
  body .hsp-product-carousel-nav { width: 40px; height: 40px; font-size: 25px; }
  body .hsp-product-carousel-prev { right: 4px; }
  body .hsp-product-carousel-next { left: 4px; }
}