/* Custom CSS */


/* ==========================================================================
   LlobregatWeb Brand Palette & Logo Typography Overrides
   Logo Colors: Teal (#047389), Yellow (#f5c500), Red (#d93b2b), Blue (#020bfe)
   ========================================================================== */

:root {
  --primary-color: #047389 !important;
  --secondary-color: #f5c500 !important;
  --brand-teal: #047389 !important;
  --brand-yellow: #f5c500 !important;
  --brand-red: #d93b2b !important;
  --brand-blue: #020bfe !important;
}

/* Header Logo + "LlobregatWeb" Brand Text */
.header-logo .elementor-widget-container a,
.elementor-widget-ava-site-logo a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}

.header-logo .elementor-widget-container a img,
.elementor-widget-ava-site-logo a img {
    height: 38px !important;
    width: auto !important;
    max-height: 48px !important;
}

.header-logo .elementor-widget-container a::after,
.elementor-widget-ava-site-logo a::after {
    content: "LlobregatWeb";
    font-family: 'Playfair Display', 'Inter', system-ui, sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #047389 !important;
    letter-spacing: -0.5px !important;
    line-height: 1 !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

/* Brand Palette Highlights */
.btn-primary, .button-primary, .elementor-button {
    background-color: #047389 !important;
    border-color: #047389 !important;
    color: #ffffff !important;
}

.btn-primary:hover, .button-primary:hover, .elementor-button:hover {
    background-color: #035c6d !important;
    border-color: #035c6d !important;
}

.discount-percentage, .badge-sale, .discount-badge {
    background-color: #d93b2b !important;
    color: #ffffff !important;
}

.product-price, .price-sale {
    color: #d93b2b !important;
}






/* ==========================================================================
   HEADER FIXES: Clean Transparent Header Buttons + Coherent Spacing Layout
   ========================================================================== */

/* 1. Reset Header Action Buttons (Iniciar sesión, Wishlist, Carrito) to Transparent */
.site-header .elementor-widget-ava-sign-in .elementor-button,
.site-header .elementor-widget-ava-wishlist .elementor-button,
.site-header .elementor-widget-ava-shopping-cart .elementor-button,
.site-header .elementor-button.btn-canvas,
.site-header .elementor-button.elementor-cart__toggle,
.header-logo + .elementor-widget .elementor-button {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #021523 !important;
}

.site-header .elementor-widget-ava-sign-in .elementor-button:hover,
.site-header .elementor-widget-ava-wishlist .elementor-button:hover,
.site-header .elementor-widget-ava-shopping-cart .elementor-button:hover {
    background-color: transparent !important;
    background: transparent !important;
    color: #047389 !important;
}

.site-header .elementor-widget-ava-sign-in .icon-ava,
.site-header .elementor-widget-ava-wishlist .icon-ava,
.site-header .elementor-widget-ava-shopping-cart .icon-ava,
.site-header .elementor-widget-ava-sign-in i,
.site-header .elementor-widget-ava-wishlist i,
.site-header .elementor-widget-ava-shopping-cart i,
.site-header .elementor-button.btn-canvas i,
.site-header .elementor-button.elementor-cart__toggle i {
    color: #021523 !important;
}

.site-header .elementor-widget-ava-sign-in:hover i,
.site-header .elementor-widget-ava-wishlist:hover i,
.site-header .elementor-widget-ava-shopping-cart:hover i {
    color: #047389 !important;
}

/* 2. Logo & Brand Title Compact Layout */
.header-logo .elementor-widget-container a,
.elementor-widget-ava-site-logo a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}

.header-logo .elementor-widget-container a img,
.elementor-widget-ava-site-logo a img {
    height: 32px !important;
    width: auto !important;
    max-height: 36px !important;
    display: inline-block !important;
}

.header-logo .elementor-widget-container a::after,
.elementor-widget-ava-site-logo a::after {
    content: "LlobregatWeb";
    font-family: 'Playfair Display', 'Inter', system-ui, sans-serif !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #047389 !important;
    letter-spacing: -0.3px !important;
    line-height: 1 !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

/* 3. Force Logo & Searchbar onto 1 Single Line in Header Column with Balanced Spacing */
.elementor-widget-ava-site-logo,
.elementor-widget-ava-search {
    display: inline-block !important;
    vertical-align: middle !important;
}

.elementor-widget-ava-site-logo {
    max-width: 250px !important;
    margin-right: 50px !important;
}

.elementor-widget-ava-search {
    max-width: 900px !important;
    width: calc(100% - 310px) !important;
}