@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ===== 2. Typography ===== */
body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: #111;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ===== 1. Product cards ===== */

/* Hide product code */
.product-layout .caption .model { display: none !important; }

/* Remove fixed heights left by the theme */
.product-layout .caption {
  min-height: 0 !important;
}

/* Title: room for the wishlist heart, no big gap below */
.product-layout .caption > a {
  display: block;
  padding-right: 36px;
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 4px !important;
}
.product-layout .caption > a,
.product-layout .caption > a * {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em;
  /* color: #111 !important; */
}

/* Price: smaller, calmer */
.product-layout .caption .price {
  font-size: 15px !important;
  font-weight: 500 !important;
  margin: 6px 0 8px !important;
}

/* ===== 3. Announcement bar (scrolling) ===== */
.header-message-wrapper {
  background: #111 !important;
  color: #fff !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  padding: 14px 0 !important;
  height: auto !important;
  animation: sw-marquee-desktop 16s linear infinite;
}
@keyframes sw-marquee-desktop {
  from { text-indent: 100%; }
  to   { text-indent: -25%; }
}
@keyframes sw-marquee-mobile {
  from { text-indent: 100%; }
  to   { text-indent: -100%; }
}
@media (max-width: 767px) {
  .header-message-wrapper { animation-name: sw-marquee-mobile; animation-duration: 9s; }
}
@media (prefers-reduced-motion: reduce) {
  .header-message-wrapper { animation: none; text-indent: 0; text-align: center; }
}

/* ===== 4. Category title ===== */
h1.category-page-h1 {
  font-size: 22px !important;
}
@media (min-width: 992px) {
  h1.category-page-h1 {
    text-align: left !important;
    margin: 10px 0 24px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e2dc;
  }
}
/* ===== 5. Beige site background ===== */
body,
main.main-content,
#content.home-container {
  background: #e9e9dd !important;
}
/* ===== 6. Homepage section spacing ===== */
html body #content.home-container > * {
  margin-top: 0 !important;
  margin-bottom: 40px !important;
}
html body #content.home-container > *:last-child {
  margin-bottom: 0 !important;
}
@media (max-width: 767px) {
  html body #content.home-container > * {
    margin-bottom: 24px !important;
  }
}
/* ===== 7. Product grid fix ===== */

/* Modern grid: rows never break, whatever the card height */
html body .row.product-grid {
  display: flex !important;
  flex-wrap: wrap !important;
}
html body .row.product-grid::before,
html body .row.product-grid::after {
  display: none !important;
}
html body .row.product-grid > .product-layout {
  float: none !important;
}

/* Cards blend into the beige background */
html body .product-layout,
html body .product-layout > div,
html body .product-layout .caption {
  background: transparent !important;
  background-color: transparent !important;
}
/* ===== 8. Card details ===== */

/* Wishlist heart without white box */
html body .product-layout .addtowishist {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Title: no fixed height, small gap before price */
html body .product-layout .caption h4,
html body .product-layout .caption .name {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
}
html body .product-layout .caption .price {
  margin-top: 8px !important;
}
/* ===== 9. Homepage sections ===== */

/* Remove white background from homepage blocks (keeps images) */
html body #content.home-container .featured-products,
html body #content.home-container [class^="block-"],
html body #content.home-container .stl-section {
  background-color: transparent !important;
}

/* Best Sellers title: fits between the arrows */
html body .featured-products h3 {
  letter-spacing: 0.04em !important;
  padding: 0 70px !important;
}
@media (max-width: 767px) {
  html body .featured-products h3 {
    font-size: 26px !important;
    padding: 0 50px !important;
  }
}
/* ===== 10. Empty states (wishlist, cart, 404) ===== */
html body .not-found-container h1,
html body .not-found-container h2,
html body .not-found-container p,
html body .not-found-container h1 * {
  color: #111 !important;
}