/*
Theme Name: Hello Commerce Child - Tierra Tagua
Template:   hello-commerce
Version:    1.0
Description: Thème enfant Hello Commerce pour tierratagua.com
Author:     Tierra Tagua
*/

/* ============================================================
   GLOBAL
   ============================================================ */

body {
    padding-top: 6px;
}

@media screen and (max-width: 767px) {
    .container {
        max-width: 500px;
    }
}

a.button {
    text-decoration: none !important;
}

.woocommerce-info .button {
    border-radius: 1500px !important;
    color: #fffbed !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.main-navigation ul li a {
    font-size: 14px;
}

.cart-block:nth-of-type(2) {
    margin-top: 3px;
}

nav#site-navigation a[href="#"] {
    cursor: default;
}

#banner_section {
    display: none;
}

/* Bouton "Boutique" dans le menu */
#menu-item-11968 a {
    border: 1px solid black;
    padding: 10px 14px !important;
    margin-left: 8px;
}

@media (max-width: 1025px) {
    #menu-item-11968 a {
        margin-top: 16px;
        margin-left: 0;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer-t .widget {
    margin: 0 0 10px;
}

#menu-footer {
    text-align: center;
}

@media screen and (min-width: 576px) {
    #menu-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
    }
}

/* Footer custom (bloc HTML widget) */
.footer-custom {
    font-size: 14px;
    padding: 20px;
    display: flex;
    justify-content: center;
    gap: 8%;
    flex-wrap: wrap;
}

.footer-custom > div {
    display: flex;
    flex-direction: column;
}

.footer-custom .button {
    margin-top: 8px !important;
    background-color: #fffbed !important;
    color: #333 !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    text-align: center;
    width: fit-content;
}

.footer-custom .button span {
    transform: translateX(-4px);
    transition: transform 0.2s ease-in-out;
}

.footer-custom .button:hover span {
    transform: translateX(-1px);
}

.footer-custom a:not(.button),
.footer-custom p {
    color: white !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 5px 0;
}

.footer-custom a:not(.button):hover {
    text-decoration: underline !important;
}

.footer-custom .dashicons {
    font-size: 18px;
    vertical-align: middle;
}

@media screen and (max-width: 768px) {
    .footer-custom {
        flex-direction: column-reverse;
        align-items: center;
        gap: 20px;
    }
    .footer-custom > div {
        align-items: center;
        text-align: center;
    }
}

/* ============================================================
   BANNIERE PROMO (gérée via widget HTML — CSS uniquement ici)
   NOTE : le HTML reste dans Apparence > Widgets
   Pour afficher : changer display:none en display:block dans le widget
   ============================================================ */

.promo-banner {
    display: none;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #517059;
    color: white;
    font-size: 1rem;
    padding: 6px 10px;
    z-index: 1000;
    overflow: hidden;
    white-space: nowrap;
}

.promo-banner .mobile {
    display: none;
}

@keyframes scroll-text-infinite {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media screen and (max-width: 1300px) {
    .promo-banner .mobile {
        display: inline-block;
    }
    .promo-banner .promo-text-wrapper {
        display: inline-block;
        padding-left: 20%;
        animation: scroll-text-infinite 24s linear infinite;
        text-align: left;
    }
    .promo-banner .promo-text {
        padding-right: 24px;
    }
}

/* ============================================================
   PAGE ACCUEIL
   ============================================================ */

#homepage .wp-block-button a {
    text-decoration: none;
    font-size: 16px;
}

#homepage #bouton_boutique a {
    background-color: #fffbed;
}

#homepage #bouton_tagua a {
    background-color: #7ca185;
    color: #fffbed;
}

#homepage .wp-block-button:hover a {
    background-color: #333333 !important;
    color: #fffbed;
}

#homepage #cat_display {
    gap: 3px;
}

#homepage #cat_display a {
    color: white;
}

#homepage .no-margin {
    margin: 0 !important;
}

.cat_bg .wp-block-cover {
    background-color: #7ca185 !important;
}

@media (min-width: 782px) {
    .cat_bg {
        flex-basis: auto !important;
        max-width: 30%;
    }
}

#homepage ul.products li.product {
    margin-bottom: 0;
}

#homepage #encadre {
    padding: 20px 30px !important;
    border: 1px solid #333333;
}

#homepage .depicter-section a {
    text-decoration: none;
}

#homepage .depicter-tag-item a {
    color: white !important;
}

#tagua_mosaique {
    align-items: center;
}

@media all and (max-width: 768px) {
    #tagua_mosaique {
        display: block;
        margin-bottom: 20px;
    }
}

#tagua_mosaique p {
    margin: 0;
}

/* ============================================================
   HEADER DES PAGES WOOCOMMERCE
   ============================================================ */

.woocommerce-page .site-content > .page-header {
    padding: 72px 0;
}

.woocommerce-page .site-content > .page-header::before {
    background-color: #7ca185;
}

/* ============================================================
   PAGE BOUTIQUE
   ============================================================ */

.woocommerce-shop.rightsidebar .widget-area {
    float: left;
}

.woocommerce-shop.rightsidebar .content-area {
    float: right;
    padding-left: 60px;
    padding-right: 0;
}

@media screen and (max-width: 1024px) {
    .rightsidebar .content-area {
        padding-left: 0 !important;
    }
}

.widget-area .widget .wpc-filter-header .widget-title {
    font-family: "Bitter", serif;
    margin-bottom: 0;
    background: transparent;
    padding: 18px 0;
    font-weight: 800;
}

/* Pagination desktop */
.woocommerce nav.woocommerce-pagination ul li .prev {
    position: relative;
    margin-right: 24px;
}

.woocommerce nav.woocommerce-pagination ul li .next {
    position: relative;
    margin-left: 24px;
}

/* Pagination mobile — remplacée par bouton "charger plus" (snippet JS) */
@media (max-width: 768px) {
    .woocommerce-pagination {
        display: none !important;
    }
    #custom-load-more-wrapper {
        display: block;
        text-align: center;
        margin: 0;
    }
}

/* ============================================================
   PAGE PRODUIT
   ============================================================ */

table.variations tr th {
    padding: 0;
}

.woocommerce div.product .entry-summary .variations_form table.variations tr td select {
    color: black;
}

.woocommerce-variation-availability .stock {
    padding: 6px 12px;
    border-radius: 26px;
    background-color: #f4f1e7;
    width: fit-content;
    font-size: 13px !important;
    color: #767328 !important;
}

.variations select {
    font-size: 16px;
}

a.reset_variations {
    display: none !important;
}

.woocommerce-variation-description {
    border-radius: 10px;
    padding: 2px 12px;
    background: #f2f2f2;
    font-size: 15px;
}

.woocommerce div.product .entry-summary .variations_form table.variations tr {
    margin: 0;
}

.woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
}

#wqv-quick-view-content .wqv-product-info .single_add_to_cart_button.button:not(.components-button):not(.customize-partial-edit-shortcut-button) {
    height: 50px;
    line-height: 150%;
}

.woocommerce div.product .entry-summary .variations_form .single_variation_wrap .quantity {
    margin: 0 10px 0 0;
}

.woocommerce div.product .entry-summary .variations_form .single_variation_wrap .quantity input[type=number] {
    height: 50px;
    font-size: 16px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
    -webkit-appearance: inner-spin-button !important;
    margin: 0;
}

input[type=number] {
    -moz-appearance: number-input;
}

/* ============================================================
   PAGE MON COMPTE
   ============================================================ */

.woocommerce-MyAccount-content a.edit {
    margin: 12px 0;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: inherit !important;
    text-decoration: none;
    font-size: .7778em;
    font-weight: 600;
    letter-spacing: 1px;
    border: 2px solid black;
    background: transparent;
    border-radius: 0;
    text-transform: uppercase;
    padding: 12px 16px;
    color: black;
    transition: all linear .2s;
}

.woocommerce-MyAccount-content a.edit::before {
    content: "\f464";
    font-family: "Dashicons";
    font-size: 16px;
    line-height: 1;
}

.woocommerce-MyAccount-content a.edit:hover {
    background-color: black;
    color: #fff;
}

.woocommerce-MyAccount-content a.button {
    color: #fff !important;
}

/* ============================================================
   PAGE PANIER
   ============================================================ */

.woocommerce-cart-form a {
    text-decoration: none !important;
}

.woocommerce-cart #primary .page .entry-content table.shop_table td.actions {
    padding: 20px;
}

.woocommerce-cart #primary .page .entry-content table.shop_table td,
.woocommerce-cart #primary .page .entry-content table.shop_table th {
    padding: 8px;
}

/* ============================================================
   MESSAGES WOOCOMMERCE
   ============================================================ */

.woocommerce-info,
.woocommerce-message {
    border-top-color: var(--primary-color);
}

.woocommerce-info::before,
.woocommerce-message::before {
    color: var(--primary-color);
}