/* Shopaale design system
   Source of truth: website/DESIGN.md
   This file is intentionally small and composable so legacy page behavior can stay intact. */

:root {
  --ds-ink: #000000;
  --ds-night: #000000;
  --ds-night-elevated: #0a0a0a;
  --ds-light: #ffffff;
  --ds-cream: #fbfbf5;
  --ds-aloe: #c1fbd4;
  --ds-pistachio: #d4f9e0;
  --ds-shade-30: #d4d4d8;
  --ds-shade-40: #a1a1aa;
  --ds-shade-50: #71717a;
  --ds-hairline: #e4e4e7;
  --ds-radius-sm: 5px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 20px;
  --ds-radius-pill: 9999px;
  --ds-shadow-paper: 0 1px 1px rgba(0,0,0,.04), 0 2px 2px rgba(0,0,0,.04), 0 4px 4px rgba(0,0,0,.04), 0 8px 8px rgba(0,0,0,.04);
  --ds-content: min(1440px, calc(100% - 48px));
}

html {
  background: var(--ds-cream);
  scroll-behavior: smooth;
}

body {
  background: var(--ds-cream);
  color: var(--ds-ink);
  font-family: Inter, "Inter Variable", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 420;
  line-height: 1.5;
  font-feature-settings: "ss03";
  -webkit-font-smoothing: antialiased;
}

body, body * { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 {
  color: var(--ds-ink);
  font-family: "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: "ss03";
  letter-spacing: 0;
}

h1 { font-size: clamp(48px, 6vw, 70px); font-weight: 330; line-height: 1; }
h2 { font-size: clamp(36px, 4.5vw, 55px); font-weight: 330; line-height: 1.16; }
h3 { font-size: 28px; font-weight: 500; line-height: 1.28; }
h4 { font-size: 20px; font-weight: 500; line-height: 1.4; }
p { color: inherit; }
a { color: inherit; }

/* The design system has one button geometry: the pill. */
.btn,
.button,
.k_flex_button,
.checkout-btn,
.add-to-cart,
#toggleCategoriesBtn,
.m-btn a,
.arrow-button,
.global-site-footer__locale-button,
button[data-action="primary"] {
  min-height: 44px;
  border-radius: var(--ds-radius-pill) !important;
  border: 1px solid var(--ds-ink);
  background: var(--ds-ink);
  color: var(--ds-light);
  padding: 12px 24px;
  font-family: Inter, "Inter Variable", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 420;
  line-height: 1;
  letter-spacing: 0;
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}

.btn:hover,
.button:hover,
.k_flex_button:hover,
.checkout-btn:hover,
.add-to-cart:hover,
#toggleCategoriesBtn:hover,
.m-btn a:hover,
.arrow-button:hover {
  background: #3f3f46;
  color: var(--ds-light);
  transform: translateY(-1px);
}

.arrow-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px !important;
  min-width: 44px;
}

input,
select,
textarea,
.search_bar,
.search-input {
  font: 420 16px/1.5 Inter, "Inter Variable", Helvetica, Arial, sans-serif;
}

input,
select,
textarea,
.search_bar {
  border: 1px solid var(--ds-hairline);
  border-radius: var(--ds-radius-md);
  background: var(--ds-light);
  color: var(--ds-ink);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--ds-aloe);
  outline-offset: 1px;
  border-color: var(--ds-ink);
}

.header,
.header_sections,
.search_bar_contain {
  background: var(--ds-light) !important;
  border-color: var(--ds-hairline) !important;
}

.header {
  border-bottom: 1px solid var(--ds-hairline);
  position: sticky;
  top: 0;
  z-index: 900;
}

.header_section { min-height: 76px; width: min(1440px, calc(100% - 48px)); padding: 16px 0 !important; }
.logo_container img { max-height: 42px; width: auto; object-fit: contain; }
.icon-top { gap: 18px !important; }
.icon-top .icons { color: var(--ds-ink); }
.icon-top .icon-label { font-size: 12px; font-weight: 500; letter-spacing: .28px; }

.top_main_cate,
.cate_box_group {
  width: var(--ds-content) !important;
  max-width: 1440px;
  margin: 0 auto !important;
  padding: 16px 0 !important;
  gap: 10px !important;
  background: transparent;
}

.top_main_cate { border-bottom: 1px solid var(--ds-hairline); }
.main_catebox {
  min-height: 40px !important;
  height: auto !important;
  border: 1px solid var(--ds-hairline) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-light) !important;
  color: var(--ds-ink) !important;
  padding: 5px 14px !important;
}
.main_catebox.active { background: var(--ds-ink) !important; border-color: var(--ds-ink) !important; }
.main_catebox p { color: inherit !important; font-size: 13px !important; font-weight: 500 !important; }
.main_catebox img { width: 28px !important; height: 28px !important; border-radius: 50% !important; }

.cate_box_group { overflow-x: auto; scrollbar-width: none; }
.cate_box_group::-webkit-scrollbar { display: none; }
.cate_box { min-width: 96px !important; width: 96px !important; }
.cate_box img { width: 88px !important; height: 88px !important; border-radius: var(--ds-radius-xl) !important; object-fit: cover; }
.cate_box p { display: block !important; margin-top: 8px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ds-ink) !important; }

.slider-container,
.mid-banner,
.shopaale-hero-intro {
  width: var(--ds-content);
  max-width: 1440px;
  margin: 32px auto 0 !important;
}

.slider-container .card,
.mid-banner .card {
  overflow: hidden;
  border-radius: var(--ds-radius-xl) !important;
  background: var(--ds-night) !important;
  box-shadow: none !important;
}
.slider-container img,
.mid-banner img { display: block; width: 100%; aspect-ratio: 2.5 / 1; object-fit: cover; }

.shopaale-hero-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 32px;
  align-items: end;
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--ds-hairline);
}
.shopaale-hero-intro__eyebrow {
  margin: 0 0 16px;
  color: var(--ds-shade-50);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .72px;
  line-height: 1.2;
  text-transform: uppercase;
}
.shopaale-hero-intro h1 { max-width: 760px; margin: 0; letter-spacing: 2.4px; }
.shopaale-hero-intro__copy { max-width: 390px; margin: 0 0 8px; color: var(--ds-shade-60); font-size: 18px; line-height: 1.56; }
.shopaale-hero-intro__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.shopaale-hero-intro__actions a { display: inline-flex; align-items: center; text-decoration: none; }
.shopaale-hero-intro__actions .is-outline { background: var(--ds-light); color: var(--ds-ink); }

.budget_friendly,
.discount,
.trend_container,
.brand_wrapper,
.product_wrapper,
.product-relative,
.shopby_trend_title,
.product-section,
.product_section {
  width: var(--ds-content);
  max-width: 1440px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.budget_friendly {
  margin-top: 64px !important;
  padding: 32px !important;
  border-radius: var(--ds-radius-lg) !important;
  background: var(--ds-pistachio) !important;
}
.budget_title h3,
.shopby_trend_title h4 { margin: 0 0 20px !important; font-size: 28px !important; font-weight: 330 !important; }
.discount-container,
.trend_container,
.brand_section,
.shopby_trend,
.product_section { gap: 16px !important; }
.discount-card,
.trend_box,
.brand_box,
.product,
.product_card1,
.custom-card,
.shop2 {
  border: 1px solid var(--ds-hairline) !important;
  border-radius: var(--ds-radius-lg) !important;
  background: var(--ds-light) !important;
  box-shadow: var(--ds-shadow-paper) !important;
}
.discount-card,
.trend_box { padding: 24px !important; }
.trend_box { min-height: 180px; }
.trend_box h5 { color: var(--ds-shade-50); font-size: 12px; letter-spacing: .72px; }
.trend_box h3 { margin: 4px 0; font-size: 28px; font-weight: 330; }
.brand_box { overflow: hidden; }
.brand_box img { display: block; width: 100%; height: 132px; object-fit: cover; }
.brand_box p { margin: 12px 14px 16px; font-size: 14px; font-weight: 500; }

.shopby_trend_title { margin-top: 64px !important; }
.shopby_trend img { border-radius: var(--ds-radius-lg) !important; }

.product { overflow: hidden; }
.product-img { background: var(--ds-cream); }
.product-img img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.product_info { padding: 16px !important; }
.product_info p { margin: 0 0 10px !important; color: var(--ds-ink); font-size: 14px; line-height: 1.4; }
.new-pricebpcs,
.price-container h3 { color: var(--ds-ink) !important; font-weight: 550 !important; }

.global-site-footer {
  margin-top: 96px !important;
  padding: 64px 0 0 !important;
  background: var(--ds-night) !important;
  color: var(--ds-light) !important;
}
.global-site-footer__grid { width: var(--ds-content); margin: 0 auto; padding: 0 0 32px !important; }
.global-site-footer h2,
.global-site-footer h3,
.global-site-footer p,
.global-site-footer strong { color: var(--ds-light) !important; }
.global-site-footer__links li a,
.global-site-footer__contact p { color: #9dabad !important; }
.global-site-footer__copyright { border-top: 1px solid #1e2c31; padding: 20px 0 !important; }

@media (max-width: 767px) {
  :root { --ds-content: calc(100% - 32px); }
  body { background: var(--ds-cream); }
  .header_section { width: calc(100% - 32px); min-height: 64px; }
  .shopaale-hero-intro { grid-template-columns: 1fr; gap: 8px; padding: 40px 0 32px; margin-top: 0 !important; }
  .shopaale-hero-intro h1 { font-size: clamp(42px, 13vw, 60px); letter-spacing: 1px; }
  .shopaale-hero-intro__copy { font-size: 16px; }
  .slider-container, .mid-banner { margin-top: 24px !important; }
  .slider-container img, .mid-banner img { aspect-ratio: 1.35 / 1; }
  .budget_friendly { margin-top: 48px !important; padding: 24px 16px !important; }
  .budget_title h3, .shopby_trend_title h4 { font-size: 24px !important; }
  .discount-container, .trend_container, .brand_section, .product_section { overflow-x: auto; grid-auto-columns: minmax(220px, 78vw); }
  .product { min-width: 0; }
  .global-site-footer { margin-top: 64px !important; padding-top: 48px !important; }
  .global-site-footer__grid { width: calc(100% - 32px); }
}

@media (min-width: 768px) {
  .product_section { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .top-category-shortcuts { display: none !important; }
}

@media (max-width: 767px) {
  body {
    padding-top: 0 !important;
    padding-bottom: 78px !important;
  }

  .header_sections {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    height: 60px !important;
    padding: 0 16px !important;
    background: var(--ds-light) !important;
    border-bottom: 1px solid var(--ds-hairline) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .03) !important;
  }

  .header_sections .svg_menuicon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 44px;
    margin: 0 !important;
  }

  .header_sections .svg_menuicon svg {
    width: 22px;
    height: 22px;
  }

  .header_sections .svg_menuicon svg path {
    stroke: var(--ds-ink);
  }

  .header_sections .logo_container {
    display: flex !important;
    align-items: center;
    min-width: 0;
  }

  .header_sections .logo_container img {
    width: auto !important;
    height: 32px !important;
    max-width: 138px;
    object-fit: contain;
  }

  .header_sections .mobile-extra-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin-left: auto;
  }

  .header_sections .mobile-header-action {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0 !important;
    background: transparent;
    color: var(--ds-ink);
  }

  .header_sections .mobile-header-action:hover {
    background: transparent;
    color: var(--ds-ink);
    transform: none;
  }

  .header_sections .mobile-header-cart-badge {
    position: absolute;
    top: 4px;
    right: 0;
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
    border-radius: 50%;
    background: var(--ds-aloe);
    color: var(--ds-ink);
    font-size: 10px;
    font-weight: 550;
    line-height: 16px;
    text-align: center;
  }

  .header_sections > .icon-top {
    display: none !important;
  }

  .search_bar_contain {
    display: block !important;
    top: 60px !important;
    height: 52px !important;
    padding: 8px 16px !important;
    background: var(--ds-light) !important;
    border-bottom: 1px solid var(--ds-hairline) !important;
  }

  .search_bar_contain .search_bar {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    gap: 8px !important;
    border: 1px solid var(--ds-hairline) !important;
    border-radius: var(--ds-radius-pill) !important;
    background: var(--ds-cream) !important;
  }

  .search_bar_contain .search_bar .search-bar-icon {
    order: 9 !important;
    width: 17px !important;
    height: 17px !important;
    margin-left: auto !important;
  }

  .search_bar_contain .search_bar .search-bar-icon path {
    fill: var(--ds-ink);
  }

  .search_bar_contain .search_bar input {
    color: var(--ds-ink) !important;
    font-size: 13px !important;
  }

  .search_bar_contain .search_bar input::placeholder {
    color: var(--ds-shade-50) !important;
  }

  .top_main_cate {
    top: 112px !important;
    z-index: 998 !important;
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 8px 16px !important;
    gap: 8px !important;
    background: var(--ds-light) !important;
    border-bottom: 1px solid var(--ds-hairline) !important;
  }

  .main_catebox {
    height: 36px !important;
    min-height: 36px !important;
    padding: 4px 12px !important;
    border: 1px solid var(--ds-hairline) !important;
    border-radius: var(--ds-radius-pill) !important;
    background: var(--ds-light) !important;
    color: var(--ds-ink) !important;
  }

  .main_catebox.active {
    background: var(--ds-ink) !important;
    border-color: var(--ds-ink) !important;
    color: var(--ds-light) !important;
  }

  .main_catebox img {
    width: 24px !important;
    height: 24px !important;
  }

  .main_catebox p {
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  .cate_box_group {
    top: 164px !important;
    z-index: 997 !important;
    width: 100% !important;
    min-height: 82px !important;
    height: 82px !important;
    padding: 8px 16px !important;
    gap: 18px !important;
    background: var(--ds-light) !important;
    border-bottom: 1px solid var(--ds-hairline) !important;
  }

  .cate_box {
    min-width: 70px !important;
    width: 70px !important;
  }

  .cate_box img {
    width: 46px !important;
    height: 46px !important;
    border-radius: var(--ds-radius-md) !important;
  }

  .cate_box p {
    width: 70px !important;
    min-height: 24px;
    margin-top: 4px !important;
    color: var(--ds-ink) !important;
    font-size: 11px !important;
    line-height: 12px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

}