/*
  Overrides and additions on top of template_int/assets/css/style.css.
  Keep this file small: anything that belongs to the template itself
  should be changed in style.css (or its source .scss), not here.
*/

/* Text fallback used while no logo image is uploaded in Site settings */
.main__logo--text,
.offcanvas__logo_text,
.footer__logo--text {
    font-family: var(--josefin-sans);
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}
.main__logo--text {
    font-size: 2.2rem;
}
.offcanvas__logo_text {
    font-size: 2rem;
}
.footer__logo--text {
    font-size: 2rem;
    display: inline-block;
}

/* Language switcher (partials/language_switcher.html) rendered inside the header */
.header__account--lang .language-switcher {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.6rem;
}
.language-switcher button {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--primary-color);
    font-size: 1.2rem;
    font-family: var(--open-sans);
    line-height: 1;
    padding: 0.5rem 0.8rem;
    border-radius: 3px;
    cursor: pointer;
    transition: var(--transition);
}
.language-switcher button:hover {
    border-color: var(--primary-color);
}
.language-switcher button[aria-current="true"] {
    background: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

/* Same switcher, styled for the mobile offcanvas menu */
.offcanvas__language--switcher__wrap {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color2);
}
.offcanvas__language--switcher__wrap .language-switcher {
    display: flex;
    gap: 0.8rem;
}
.offcanvas__language--switcher__wrap .language-switcher button {
    flex: 1;
    text-align: center;
    padding: 0.8rem;
}

/* Footer social link fallback for platforms without a dedicated icon (e.g. TikTok, Other) */
.social__shear--list__label {
    font-family: var(--open-sans);
    font-size: 1.3rem;
    color: var(--secondary-color);
    line-height: 1;
}

/* Home page: hero slider backgrounds are set inline per slide (see
   home/index.html) since each slide points to a different real photo. */

/* Home page: quick-link cards to the site's real sections */
.home-links__card {
    display: block;
    height: 100%;
    padding: 2.5rem 2rem;
    text-align: center;
    background: var(--white-color);
    border: 1px solid var(--border-color2);
    border-radius: 10px;
    transition: var(--transition);
}
.home-links__card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}
.home-links__card--title {
    margin-bottom: 1rem;
    font-size: 2rem;
    color: var(--primary-color);
}
.home-links__card--desc {
    margin-bottom: 1.5rem;
    color: var(--text-gray-color);
    font-family: var(--open-sans);
}

/* Shop page: category filter pills (flat list, no images — the template's
   sidebar category widget expects subcategory thumbnails we don't have) */
.shop-categories {
    margin-bottom: 3rem;
}
.shop-categories__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.shop-categories__link {
    display: inline-block;
    padding: 0.6rem 1.6rem;
    border: 1px solid var(--border-color2);
    border-radius: 30px;
    font-family: var(--open-sans);
    font-size: 1.4rem;
    color: var(--primary-color);
    transition: var(--transition);
}
.shop-categories__link:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}
.shop-categories__link.active {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-color);
}

/* Shop page: real product count (replaces the template's fake
   "Showing 1-9 of 21 results") */
.shop-results__count {
    margin-bottom: 2rem;
    font-family: var(--open-sans);
    color: var(--text-gray-color);
}

/* Shop page: product cards without a photo yet */
.product__items--noimage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
    color: var(--light-color);
}
.product__items--noimage svg {
    width: 25%;
    height: 25%;
}

/* Shop page: the template hides the Add-to-cart button until :hover on
   anything wider than a phone, which makes it unreachable on tablets and
   other touch screens. Make it a normal, always-visible button instead. */
.product__items--action__cart--btn {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    cursor: pointer;
}
.product__items--action__cart--btn:disabled {
    background: var(--light-color);
    cursor: not-allowed;
    pointer-events: none;
}
.add__to--cart__text {
    display: inline !important;
}
.product__items--cart__form {
    margin-top: 0.5rem;
}
.product__items--unavailable {
    margin-top: 0.5rem;
    font-family: var(--open-sans);
    color: var(--text-gray-color);
}

/* Shop page: empty state */
.shop-empty {
    padding: 4rem 0;
    text-align: center;
    font-family: var(--open-sans);
    color: var(--text-gray-color);
}

/* ============================================================
   Brand color: header bar and footer use a dark maroon instead
   of white/light gray. The mobile offcanvas menu is a separate
   white panel and is intentionally left untouched.
   ============================================================ */
:root {
    --brand-dark: #3F1B1B;
}

/* Header bar (both the normal top state and the fixed "sticky" state
   that appears once you scroll — see the .header__sticky.sticky rule
   in style.css, which this overrides). */
.header__section .main__header {
    background-color: var(--brand-dark);
}
.header__sticky.sticky {
    background: var(--brand-dark);
}
.header__section .main__logo--text {
    color: var(--white-color);
}
.header__section .header__menu--link {
    color: var(--white-color);
}
.header__section .header__account--btn {
    color: var(--white-color);
}
.header__section .offcanvas__header--menu__open--btn {
    color: var(--white-color);
}
.header__account--lang .language-switcher button {
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--white-color);
}
.header__account--lang .language-switcher button:hover {
    border-color: var(--white-color);
}
.header__account--lang .language-switcher button[aria-current="true"] {
    background: var(--white-color);
    color: var(--brand-dark);
    border-color: var(--white-color);
}

/* Footer. footer-bg.webp (a light brick + botanical texture) is kept but
   multiplied under the brand color instead of dropped, so it still reads
   as a subtle texture rather than flat color. */
.footer__section.footer__bg {
    background-color: var(--brand-dark);
    background-blend-mode: multiply;
}
.footer__section .footer__logo--text {
    color: var(--white-color);
}
.footer__section .footer__widget--title {
    color: var(--white-color);
}
.footer__section .footer__widget--desc {
    color: rgba(255, 255, 255, 0.75);
}
.footer__section .footer__widget--menu__text {
    color: rgba(255, 255, 255, 0.75);
}
.footer__section .footer__widget--menu__text:hover {
    color: var(--white-color);
}
.footer__section .social__shear--list__icon:hover {
    color: var(--white-color);
}
.footer__section .main__footer {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}
.footer__section .copyright__content {
    color: rgba(255, 255, 255, 0.6);
}
.footer__section .copyright__content--link {
    color: var(--white-color);
}

/* ============================================================
   Sticky footer: on a short page (few/no products, etc.) the
   footer used to end wherever the content ended, leaving the
   body's own white background exposed below it down to the
   viewport edge. Push it to the bottom instead.
   ============================================================ */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1 0 auto;
}

/* Inner-page breadcrumb banner (Tienda, and future inner pages).
   breadcrumb-bg.webp turned out to be the template's own unfilled
   placeholder graphic (a gray box literally reading "1920 x 300"),
   not a usable texture -- use the brand color instead. */
.breadcrumb__bg {
    background: var(--brand-dark);
}

/* Logo: the brand mark (static/img/logo.png, uploaded via Django admin
   as SiteSettings.logo) is drawn in solid white, made for the dark
   header/footer. The mobile offcanvas menu panel is white, so the
   same white-on-transparent logo would be invisible there -- invert
   it to render dark on that one light background instead. */
.offcanvas__logo img {
    filter: invert(1);
}