/* ---------------------- */
/*  RUXWOOD-STYLE THEME   */
/* ---------------------- */

/* 1. General Typography */
body, h1, h2, h3, h4, h5, h6, p {
  font-family: 'Georgia', serif;  /* Or add a custom font in Design > Fonts */
  letter-spacing: 0.02em;
  color: #1C1C1C; /* Onyx black */
}

h1, h2 {
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 0.05em;
}

a {
  text-decoration: none;
  color: #1C1C1C;
  transition: color 0.3s ease;
}

a:hover {
  color: #D6CBAF; /* Muted tan hover effect */
}

/* 2. Background and Color Palette */
body {
  background-color: #F8F8F6; /* Soft off-white background */
}

/* 3. Header/Nav Hover Effects */
.header-actions-action--cart:hover .icon--cart {
  background-color: #f0f0f0;
  fill: #333;
  stroke: #333;
  transform: translateY(-3px);
}

/* 4. Custom Cart Icon Image */
.header .header-actions-action--cart svg {
  stroke: transparent !important;
}

.header .header-actions-action--cart {
  background-image: url('https://your-image-link.com/cart-icon.png'); /* Replace with your own icon */
  background-size: 22px 24px;
  background-repeat: no-repeat;
  background-position: center;
}

/* 5. Hide Cart When Empty */
.header-actions-action--cart .cart-quantity-zero {
  display: none;
}

/* 6. Rename Cart Page Title */
.cart-title {
  visibility: hidden;
}

.cart-title::before {
  content: "Your Cart";
  visibility: visible;
  display: block;
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #1C1C1C;
}

/* 7. Cart Page Aesthetic */
#cart {
  background-color: #F8F8F6;
  padding: 40px 0;
}

#cart.Cart {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  max-width: 900px;
  margin: 50px auto;
}

/* 8. Cart Container Styling */
.cart-container {
  background: #FAFAFA;
  border-radius: 12px;
  padding: 1.5rem;
}

/* 9. Cart Row Product Styling */
.cart-row-img {
  border-radius: 12px;
  object-fit: cover;
}

.cart-row-title {
  font-family: 'Georgia', serif !important;
  color: #333333 !important;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}

/* 10. Button Styling */
.sqs-block-button-element--small,
.sqs-block-button-element--medium,
.sqs-block-button-element--large {
  background-color: #1C1C1C;
  color: #F8F8F6;
  padding: 12px 24px;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.3s ease;
}

.sqs-block-button-element:hover {
  background-color: #D6CBAF;
  color: #1C1C1C;
}

/* 11. Responsive Image Grid (Optional) */
.sqs-gallery-design-grid .slide {
  border-radius: 10px;
  overflow: hidden;
}