/*
Theme Name:   Tienda del mando
Theme URI:    https://tiendadelmando.es
Description:  Child theme claro (crema) de Storefront para Tienda del mando. Recambios de mando a distancia, España.
Author:       Tienda del mando
Author URI:   https://tiendadelmando.es
Template:     storefront
Version:      1.0.0
Text Domain:  vitto-storefront
*/

:root {
  --cream: #F7F3EB;
  --cream-2: #EFE8DC;
  --sand: #E6DCC8;
  --paper: #FFFcf6;
  --ink: #1F1B16;
  --ink-soft: #5C5348;
  --ink-mute: #8A7F72;
  --line: #DDD4C4;
  --amber: #C4842A;
  --amber-hover: #A86E22;
}

html { background: var(--cream); }

body,
body.custom-background,
.storefront-full-width-content,
.site {
  background-color: var(--cream) !important;
  color: var(--ink);
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
}

h1, h2, h3, h4, .site-title, .widget-title,
.woocommerce-loop-product__title,
.entry-title {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  color: var(--ink) !important;
  letter-spacing: -0.02em;
}

.site-header,
.storefront-primary-navigation,
.main-navigation,
#masthead {
  background: var(--cream) !important;
  border-bottom: 1px solid var(--line);
  color: var(--ink) !important;
}

.site-header a,
.main-navigation ul li a,
.storefront-primary-navigation a {
  color: var(--ink) !important;
}

.site-branding img,
.custom-logo-link img,
.custom-logo {
  max-height: 56px;
  width: auto;
}

.site-title a { color: var(--ink) !important; font-weight: 600; }

.button,
button.button,
input[type="submit"],
.widget-area .widget a.button,
.added_to_cart,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 600;
  text-shadow: none !important;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--amber-hover) !important;
  border-color: var(--amber-hover) !important;
  color: #fff !important;
}

.site-footer,
.site-info,
.footer-widgets {
  background: var(--cream-2) !important;
  color: var(--ink-soft) !important;
  border-top: 1px solid var(--line);
}

.site-footer a { color: var(--ink) !important; }
.site-info { text-align: left; }

.storefront-handheld-footer-bar { background: var(--cream-2) !important; }

ul.products li.product,
.site-main ul.products li.product {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.75rem 0.75rem 1rem !important;
  overflow: hidden;
}

ul.products li.product .price,
.single-product .price {
  color: var(--ink) !important;
  font-weight: 600;
}

.woocommerce-Price-amount { color: var(--ink); }

.site-content,
.content-area,
.hentry,
.woocommerce-tabs,
.woocommerce-Tabs-panel,
.cart-collaterals .cart_totals,
.woocommerce-checkout #payment,
form.checkout,
.woocommerce-cart-form {
  background: transparent;
  color: var(--ink);
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  background: var(--paper);
  color: var(--ink);
  border-top-color: var(--amber);
}

a { color: var(--ink); }
a:hover { color: var(--amber); }

.vitto-hero {
  padding: 2.2rem 0 0.5rem;
}
.vitto-hero .col-full { max-width: 72rem; }
.vitto-catalog { padding: 0.5rem 0 3rem; }
.vitto-catalog h2 {
  font-size: 1.6rem;
  margin: 0 0 1rem;
}
.vitto-header-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  margin-left: 0.75rem;
  color: var(--ink) !important;
  white-space: nowrap;
}
.vitto-header-wa:hover { color: var(--amber) !important; }
.vitto-legal-bar {
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 0.5rem 0 1.25rem;
  line-height: 1.5;
}
.vitto-disclaimer {
  font-size: 0.82rem;
  color: var(--ink-mute);
}

/* Storefront sometimes injects a dark store notice */
.woocommerce-store-notice { background: var(--cream-2) !important; color: var(--ink) !important; }

/* Remove Storefront homepage extra if any */
.page-template-template-homepage .site-main { padding-top: 1rem; }