/* ============================================
   IAmGrace Theme — Main CSS
   Targeted overrides for PrestaShop Classic 8.x
   ============================================ */

/* -------- Layout container width -------- */
.container,
#wrapper .container,
#header .container,
.footer-container .container {
  max-width: var(--container-max);
}

/* -------- Body / Content -------- */
body { background-color: var(--color-bg); }

#wrapper {
  background-color: var(--color-bg);
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-2xl);
}

.page-header {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-primary);
}

.page-header h1 {
  font-size: var(--font-size-3xl);
  margin: 0;
}

/* -------- Top menu (ps_mainmenu) -------- */
#_desktop_top_menu .top-menu a[data-depth="0"] {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text);
  padding: var(--spacing-sm) var(--spacing-md);
}

#_desktop_top_menu .top-menu a[data-depth="0"]:hover,
#_desktop_top_menu .top-menu .sub-menu a:hover {
  color: var(--color-primary);
}

#_desktop_top_menu .sub-menu {
  border-top: 3px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* -------- Search bar -------- */
#search_widget form input[type="text"] {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-full);
  padding: var(--spacing-sm) var(--spacing-lg);
  transition: border-color var(--transition-fast);
}

#search_widget form input[type="text"]:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(196,154,40,0.15);
}

#search_widget form button[type="submit"] {
  color: var(--color-primary);
}

/* -------- Cart / Account icons -------- */
.blockcart .header,
.user-info a,
.language-selector,
.currency-selector {
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.blockcart .header:hover,
.user-info a:hover { color: var(--color-primary); }

.blockcart .cart-products-count {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  border-radius: var(--border-radius-full);
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* -------- Product card (Classic .product-miniature) -------- */
.product-miniature {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  transition: all var(--transition-normal);
  margin-bottom: var(--spacing-xl);
}

.product-miniature:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.product-miniature .thumbnail-container {
  background: var(--color-bg-soft);
}

.product-miniature .product-title a {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  letter-spacing: var(--letter-spacing-tight);
}

.product-miniature .product-title a:hover { color: var(--color-primary); }

.product-miniature .product-price-and-shipping .price,
.product-price,
.current-price .price {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.product-miniature .regular-price {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.product-miniature .discount {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
}

/* -------- Product detail page -------- */
.product-detail .product-name,
.product-detail h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-md);
}

.product-prices .current-price {
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.product-add-to-cart .add-to-cart {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--border-radius-md);
}

.product-add-to-cart .add-to-cart:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-gold);
}

/* -------- Forms & Inputs -------- */
.form-control {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: border-color var(--transition-fast);
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(196,154,40,0.15);
  outline: none;
}

label,
.form-control-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-wide);
}

/* -------- Buttons -------- */
.btn {
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  transition: all var(--transition-normal);
}

.btn-secondary,
.btn.btn-secondary {
  background-color: transparent;
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
}

.btn-secondary:hover {
  background-color: var(--color-secondary);
  color: var(--color-text-inverse);
}

/* -------- Breadcrumb -------- */
.breadcrumb {
  background: transparent;
  padding: var(--spacing-md) 0;
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
}

.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb .active { color: var(--color-text); }

/* -------- Featured products / Sliders -------- */
.featured-products .products-section-title,
.products-section-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  margin: var(--spacing-2xl) 0 var(--spacing-xl);
  color: var(--color-secondary);
}

.featured-products .products-section-title::after,
.products-section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--color-primary);
  margin: var(--spacing-md) auto 0;
}

/* -------- Newsletter (ps_emailsubscription) -------- */
.block_newsletter {
  background-color: var(--color-bg-soft);
  padding: var(--spacing-2xl) 0;
  border-top: 1px solid var(--color-border);
}

.block_newsletter form input[type="email"] {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
}

.block_newsletter form button {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  padding: var(--spacing-sm) var(--spacing-xl);
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
}

.block_newsletter form button:hover { background-color: var(--color-primary-dark); }

/* -------- Footer columns -------- */
.footer-container li a {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) 0;
  display: inline-block;
}

.footer-container .copyright,
#footer .copyright {
  background-color: rgba(0,0,0,0.4);
  text-align: center;
  padding: var(--spacing-md) 0;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  color: rgba(255,255,255,0.7);
}

/* -------- Cart page -------- */
.cart-summary {
  background-color: var(--color-bg-soft);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-xl);
  border: 1px solid var(--color-border);
}

.cart-summary .cart-summary-line .value {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.cart-summary .cart-total .value {
  color: var(--color-primary);
  font-size: var(--font-size-xl);
}

/* -------- Alerts -------- */
.alert-success { border-left: 4px solid var(--color-success); }
.alert-warning { border-left: 4px solid var(--color-warning); }
.alert-danger  { border-left: 4px solid var(--color-error); }
.alert-info    { border-left: 4px solid var(--color-info); }