/* Custom CSS theme */
@charset "UTF-8";
/* ================================
   Ecwid Custom Storefront Styling
   Yard Goat Images – Updated Sept 2 2025
   ================================ */
/* -------------------------------
   SORT BY CONTROL
---------------------------------*/
/* Container highlight */
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid__sort {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  background: #fce4c5 !important;
  /* warm highlight */
  border: 2px solid #b5651d !important;
  /* themed border */
  border-radius: 10px !important;
  padding: 6px 12px !important;
  margin: 8px 0 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Visible label text inside the select */
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid__sort .form-control__select-text {
  text-transform: uppercase !important;
  color: indianred !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
}

/* Hover/focus color tweak */
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid__sort:hover .form-control__select-text {
  color: #b5651d !important;
}

/* -------------------------------
   GENERAL BUTTONS
---------------------------------*/
html#ecwid_html body#ecwid_body .ec-size .ec-store button,
html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control__button,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ecwid-btn {
  background-color: #9f3b3f !important;
  /* bold red-brown */
  border: none !important;
  border-radius: 6px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Hover / focus states */
html#ecwid_html body#ecwid_body .ec-size .ec-store button:hover,
html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control__button:hover,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ecwid-btn:hover {
  background-color: #b5651d !important;
  transform: translateY(-1px);
}

html#ecwid_html body#ecwid_body .ec-size .ec-store button:active,
html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control__button:active,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ecwid-btn:active {
  background-color: #7e8611 !important;
  /* earthy green accent */
  transform: translateY(1px);
}

/* -------------------------------
   ADD TO BAG SPECIFIC
---------------------------------*/
html#ecwid_html body#ecwid_body .ec-size .ec-store .ecwid-productBrowser-cart-addToBagButton,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ecwid-btn--primary {
  font-size: 1.05rem !important;
  padding: 12px 18px !important;
}

/* -------------------------------
   CHECKOUT BUTTONS
---------------------------------*/
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart-checkoutButton,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart-checkoutButton * {
  background-color: #9f3b3f !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  padding: 14px 22px !important;
  border-radius: 8px !important;
}

/* Hover state for checkout */
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart-checkoutButton:hover {
  background-color: #b5651d !important;
}

/* -------------------------------
   MOBILE RESPONSIVENESS
---------------------------------*/
@media (max-width: 768px) {
  /* Sort control full width on mobile */
  html#ecwid_html body#ecwid_body .ec-size .ec-store .grid__sort {
    width: 100% !important;
    justify-content: space-between !important;
  }
  html#ecwid_html body#ecwid_body .ec-size .ec-store .grid__sort .form-control__select-text {
    font-size: 1rem !important;
  }
  /* Buttons larger for thumbs */
  html#ecwid_html body#ecwid_body .ec-size .ec-store button,
html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control__button {
    width: 100% !important;
    padding: 14px !important;
  }
}