/* ============================================================
   Gourmet Shop Style v1.0
   Tienda · Categorías · Etiquetas · Búsqueda
   ============================================================ */

:root {
    --gss-accent:       #8B6914;
    --gss-accent-rgb:   139,105,20;
    --gss-cream:        #faf6ee;
    --gss-cream-dark:   #f0e8d6;
    --gss-brown:        #3d2b1f;
    --gss-brown-mid:    #6b4c35;
    --gss-border:       #e8dfc8;
    --gss-border-mid:   #d9c8a8;
    --gss-gold:         #c8a84b;
    --gss-shadow:       rgba(61,43,31,.10);
    --gss-font-d:       'Playfair Display',Georgia,serif;
    --gss-font-sys:     -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --gss-radius:       6px;
    --gss-ease:         0.25s ease;
}

/* ── Fondo página ── */
.woocommerce,
.woocommerce-page {
    background: #fff;
}

/* ── Breadcrumb: oculto ── */
.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb {
    display: none !important;
}

/* ── Cabecera de archivo (título + descripción) ── */
.woocommerce-products-header {
    padding: 36px 0 20px !important;
    border-bottom: 1px solid var(--gss-border) !important;
    margin-bottom: 32px !important;
}
.woocommerce-products-header__title,
h1.woocommerce-products-header__title,
.woocommerce-archive-description h1,
.woocommerce .page-title {
    font-family: var(--gss-font-sys) !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: var(--gss-brown) !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}
.woocommerce-archive-description p,
.term-description p {
    font-family: var(--gss-font-sys) !important;
    font-size: .92rem !important;
    color: var(--gss-brown-mid) !important;
    line-height: 1.7 !important;
    max-width: 680px !important;
    margin: 0 !important;
}

/* ── Barra de herramientas: resultados + ordenar ── */
.woocommerce-result-count {
    font-family: var(--gss-font-sys) !important;
    font-size: .82rem !important;
    color: var(--gss-brown-mid) !important;
    margin: 0 !important;
}
.woocommerce-ordering {
    margin: 0 !important;
}
.woocommerce-ordering select {
    font-family: var(--gss-font-sys) !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--gss-radius) !important;
    padding: 10px 36px 10px 16px !important;
    background-color: var(--gss-accent) !important;
    cursor: pointer !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}
.woocommerce-ordering select:focus {
    box-shadow: 0 0 0 2px rgba(var(--gss-accent-rgb),.35) !important;
}
.woocommerce-ordering select option {
    background: #fff !important;
    color: var(--gss-brown) !important;
}

/* ── Grid de productos ── */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    clear: both !important;
}
@media(max-width:1100px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media(max-width:720px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* ── Tarjeta de producto ── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: #fff !important;
    border: 1px solid var(--gss-border) !important;
    border-radius: var(--gss-radius) !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    transition: box-shadow var(--gss-ease), transform var(--gss-ease) !important;
    position: relative !important;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    box-shadow: 0 8px 28px var(--gss-shadow) !important;
    transform: translateY(-4px) !important;
}

/* ── Imagen ── */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link {
    display: block !important;
    text-decoration: none !important;
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
    width: 100% !important;
    height: 210px !important;
    object-fit: contain !important;
    display: block !important;
    background: #fff !important;
    padding: 20px !important;
    border-bottom: 1px solid var(--gss-border) !important;
    margin: 0 !important;
    transition: transform var(--gss-ease) !important;
    box-sizing: border-box !important;
}
.woocommerce ul.products li.product:hover a img {
    transform: scale(1.04) !important;
}

/* ── Etiqueta de categoría ── */
.gss-loop-cat {
    display: block;
    font-family: var(--gss-font-sys);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gss-accent);
    padding: 12px 16px 0;
}

/* ── Nombre del producto ── */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce-page ul.products li.product h2 {
    font-family: var(--gss-font-sys) !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    color: var(--gss-brown) !important;
    line-height: 1.35 !important;
    padding: 6px 16px 4px !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

/* ── Precio ── */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    font-family: var(--gss-font-d) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--gss-brown) !important;
    padding: 4px 16px 0 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1.3 !important;
}
.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
    color: var(--gss-accent) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}
.woocommerce ul.products li.product .price del {
    font-size: .85rem !important;
    opacity: .5 !important;
}
.woocommerce ul.products li.product .price .woocommerce-Price-amount bdi,
.woocommerce-page ul.products li.product .price .woocommerce-Price-amount bdi {
    color: inherit !important;
}

/* ── Botones ── */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button,
.woocommerce ul.products li.product .added_to_cart {
    font-family: var(--gss-font-sys) !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    background: var(--gss-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--gss-radius) !important;
    padding: 10px 16px !important;
    margin: 12px 16px 16px !important;
    display: inline-block !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background var(--gss-ease) !important;
    align-self: flex-start !important;
    box-shadow: 0 2px 8px rgba(var(--gss-accent-rgb),.25) !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
    background: var(--gss-brown) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ── Badge oferta ── */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
    background: var(--gss-accent) !important;
    color: #fff !important;
    font-family: var(--gss-font-sys) !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    padding: 4px 10px !important;
    min-height: auto !important;
    line-height: 1.4 !important;
    top: 10px !important;
    left: 10px !important;
    margin: 0 !important;
}

/* ── Paginación ── */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination {
    margin-top: 48px !important;
    text-align: center !important;
}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-page nav.woocommerce-pagination ul {
    border: none !important;
    display: inline-flex !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce-page nav.woocommerce-pagination ul li a,
.woocommerce-page nav.woocommerce-pagination ul li span {
    font-family: var(--gss-font-sys) !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: var(--gss-brown-mid) !important;
    border: 1px solid var(--gss-border-mid) !important;
    border-radius: var(--gss-radius) !important;
    padding: 8px 14px !important;
    min-width: 38px !important;
    text-align: center !important;
    display: block !important;
    background: #fff !important;
    transition: all var(--gss-ease) !important;
    text-decoration: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--gss-cream-dark) !important;
    border-color: var(--gss-accent) !important;
    color: var(--gss-brown) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--gss-accent) !important;
    border-color: var(--gss-accent) !important;
    color: #fff !important;
}

/* ── Fix: primer hueco vacío en el grid ── */
.woocommerce ul.products li.product:first-child,
.woocommerce-page ul.products li.product:first-child {
    grid-column: 1 !important;
}
/* Forzar que todos empiecen desde auto */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    grid-column: auto !important;
}

/* ── Barra toolbar: espacio entre resultados y ordenar ── */
.woocommerce .woocommerce-products-header + .woocommerce-notices-wrapper + form,
.woocommerce-page .woocommerce-ordering,
.woocommerce .woocommerce-ordering {
    margin-left: auto !important;
}
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
    margin-right: auto !important;
}

/* ── "Llegará en breve" para productos sin precio/agotados ── */
.woocommerce ul.products li.product .pg-coming-soon,
.woocommerce-page ul.products li.product .pg-coming-soon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--gss-font-sys) !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--gss-brown-mid) !important;
    background: var(--gss-cream-dark) !important;
    border: 1px solid var(--gss-border-mid) !important;
    border-radius: var(--gss-radius) !important;
    padding: 8px 14px !important;
    margin: 12px 16px 16px !important;
}
.woocommerce ul.products li.product .pg-coming-soon .pg-out-badge,
.woocommerce-page ul.products li.product .pg-coming-soon .pg-out-badge {
    background: var(--gss-brown) !important;
    color: #fff !important;
    font-size: .6rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
}

/* ── Fix hueco vacío: reset cualquier posicionamiento del tema ── */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none !important;
    content: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    grid-column: auto !important;
    grid-row: auto !important;
}

/* ── Toolbar: espacio entre contador y selector ── */
.woocommerce .woocommerce-products-header,
.woocommerce-page .woocommerce-products-header {
    margin-bottom: 0 !important;
}
form.woocommerce-ordering {
    margin-bottom: 0 !important;
}

/* ── "Llegará en breve" ── */
.gss-coming-soon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: var(--gss-font-sys) !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    color: var(--gss-brown-mid) !important;
    background: var(--gss-cream-dark) !important;
    border: 1px solid var(--gss-border-mid) !important;
    border-radius: var(--gss-radius) !important;
    padding: 9px 14px !important;
    margin: 12px 16px 16px !important;
    cursor: default !important;
}
.gss-out-badge {
    background: var(--gss-brown) !important;
    color: #fff !important;
    font-size: .58rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* ── Toolbar: selector encima de la línea, bien alineado ── */
.woocommerce .woocommerce-products-header ~ .woocommerce-notices-wrapper,
.woocommerce-page .woocommerce-notices-wrapper {
    clear: both;
}
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count,
.woocommerce form.woocommerce-ordering,
.woocommerce-page form.woocommerce-ordering {
    float: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-bottom: 0 !important;
}

/* Contenedor toolbar como flexbox */
.woocommerce .woocommerce-products-header + * + form,
.woocommerce-page .woocommerce-products-header + * + form {
    float: none !important;
}

/* El truco definitivo: la barra antes de los productos */
.woocommerce .woocommerce-notices-wrapper + form.woocommerce-ordering,
.woocommerce-page .woocommerce-notices-wrapper + form.woocommerce-ordering {
    float: none !important;
}

/* Forzar la barra al contexto correcto con flex */
.woocommerce .woocommerce-loop-product__link ~ form,
.woocommerce-loop-product__link {
    clear: none !important;
}

/* Asegurar que el toolbar quede por encima del grid */
.woocommerce .woocommerce-result-count {
    line-height: 38px !important;
}
.woocommerce form.woocommerce-ordering,
.woocommerce-page form.woocommerce-ordering {
    position: relative !important;
    z-index: 10 !important;
    float: right !important;
    clear: none !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* El grid empieza DESPUÉS del toolbar */
.woocommerce ul.products,
.woocommerce-page ul.products {
    clear: both !important;
    margin-top: 8px !important;
}

/* ── Toolbar: fix posición selector sobre el grid ── */
/* result-count y ordering son hermanos directos de main, sin wrapper.
   Los tratamos como flex items creando un contexto sobre ellos */

p.woocommerce-result-count {
    display: block !important;
    float: left !important;
    width: auto !important;
    line-height: 42px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    clear: none !important;
}

form.woocommerce-ordering {
    float: right !important;
    clear: none !important;
    margin: 0 0 16px 0 !important;
    position: static !important;
    z-index: auto !important;
}

/* El grid siempre arranca después — clearfix */
ul.products.columns-4,
ul.products.columns-3,
ul.products.columns-2,
ul.products {
    clear: both !important;
}

/* Separador visual entre toolbar y grid */
p.woocommerce-result-count + form.woocommerce-ordering + ul.products,
.woocommerce-notices-wrapper + p.woocommerce-result-count {
    margin-top: 0 !important;
}

/* ── Toolbar reposicionado por JS ── */
.gss-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    clear: both !important;
    width: 100% !important;
}
.gss-toolbar p.woocommerce-result-count {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}
.gss-toolbar form.woocommerce-ordering {
    float: none !important;
    margin: 0 !important;
}

/* Ocultar los elementos en su posición original hasta que JS los mueva */
/* (ya que JS los mueve antes de que se pinten, esto es solo seguridad) */
p.woocommerce-result-count,
form.woocommerce-ordering {
    float: none !important;
    clear: none !important;
}

ul.products {
    clear: both !important;
    margin-top: 0 !important;
}