/*
Theme Name: Storefront Roverini
Template: storefront
Description: Tema de marca para Roverini — alacenas vintage y muebles exclusivos, años 50.
Version: 1.0.0
*/

:root{
    --rv-cream:      #f6efe4;
    --rv-cream-2:    #efe4d2;
    --rv-ink:        #2c2521;
    --rv-teal:       #24504a;
    --rv-teal-dark:  #163531;
    --rv-terracotta: #c1522e;
    --rv-mustard:    #d9a441;
    --rv-line:       rgba(44,37,33,.12);
}

/* ---------- Base ---------- */
body{
    background: var(--rv-cream);
    color: var(--rv-ink);
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
h1,h2,h3,h4,
.site-title,
.storefront-product-section .section-title{
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--rv-teal-dark);
}
a{ color: var(--rv-teal); }
a:hover{ color: var(--rv-terracotta); }

/* ---------- Header ---------- */
#masthead{
    background: var(--rv-cream);
    border-bottom: 1px solid var(--rv-line);
}
.site-branding .site-title a{
    font-size: 1.9rem;
    letter-spacing: .02em;
}
.site-branding .site-description{
    font-family: "Public Sans", sans-serif;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .68rem;
    color: var(--rv-terracotta);
}
.main-navigation ul li a{
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rv-ink);
}
.site-header-cart .cart-contents{
    background: var(--rv-teal);
    border-radius: 999px;
    padding: .5em 1.1em;
    color: #fff !important;
}
.site-header-cart .cart-contents:hover{ background: var(--rv-terracotta); }

/* ---------- Hero (front page) ---------- */
.rv-hero{
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--rv-teal) 0%, var(--rv-teal-dark) 100%);
    color: var(--rv-cream);
    padding: 6rem 1.5rem 8rem;
    text-align: center;
}
.rv-hero::before{
    content: "";
    position: absolute;
    inset: auto -10% -60% -10%;
    height: 70%;
    border-radius: 50%;
    background: var(--rv-mustard);
    opacity: .16;
    transform: rotate(-6deg);
}
.rv-hero-eyebrow{
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .72rem;
    color: var(--rv-mustard);
    margin-bottom: 1.2rem;
}
.rv-hero h1{
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.05;
    max-width: 16ch;
    margin: 0 auto .9rem;
}
.rv-hero p{
    max-width: 46ch;
    margin: 0 auto 2.2rem;
    font-size: 1.1rem;
    color: var(--rv-cream-2);
}
.rv-cta{
    display: inline-block;
    background: var(--rv-terracotta);
    color: #fff;
    padding: .9em 2.2em;
    border-radius: 999px;
    text-decoration: none;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    white-space: nowrap;
    box-shadow: none;
    transition: transform .18s ease, background .18s ease;
}
.rv-cta:hover{
    background: #a83f1f;
    transform: translateY(-2px);
    color: #fff;
}
.rv-cta.rv-cta-dark{
    background: var(--rv-teal-dark);
    color: #fff !important;
}
.rv-cta.rv-cta-dark:hover{ background: var(--rv-terracotta); }

/* curved "cabinet" motif divider */
.rv-curve{
    display: block;
    width: 100%;
    height: 60px;
    margin-top: -1px;
}

/* ---------- Story / pillars section ---------- */
.rv-section{ padding: 5rem 1.5rem; max-width: 1100px; margin: 0 auto; }
.rv-pillars{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    text-align: center;
}
.rv-pillar h3{ font-size: 1.15rem; margin-bottom: .5rem; }
.rv-pillar p{ color: rgba(44,37,33,.72); font-size: .95rem; line-height: 1.6; }
.rv-pillar .rv-num{
    display: inline-flex; align-items:center; justify-content:center;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--rv-cream-2); color: var(--rv-terracotta);
    font-family: "Fraunces", serif; font-weight: 600; margin-bottom: 1rem;
}

/* ---------- Buttons / WooCommerce ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.storefront-primary-navigation .button{
    background-color: var(--rv-terracotta);
    color: #fff;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .78rem;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{
    background-color: var(--rv-teal-dark);
}
.woocommerce ul.products li.product .price{ color: var(--rv-teal-dark); font-weight: 600; }
.woocommerce span.onsale{ background: var(--rv-mustard); color: var(--rv-ink); }

/* ---------- Footer ---------- */
#colophon{ background: var(--rv-teal-dark); color: var(--rv-cream-2); }
#colophon a{ color: var(--rv-mustard); }
#colophon .site-info{ color: rgba(246,239,228,.6); }

/* ==========================================================================
   Motion — scroll reveal (progressive enhancement)
   No JS / reduced motion: content is visible from the start.
   ========================================================================== */
.rv-reveal{
    opacity: 1;
    transform: none;
}
html.js .rv-reveal{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);
    transition-delay: var(--rv-delay, 0s);
}
html.js .rv-reveal.rv-in{
    opacity: 1;
    transform: none;
}
html.js .rv-reveal-1{ --rv-delay: .09s; }
html.js .rv-reveal-2{ --rv-delay: .18s; }
html.js .rv-reveal-3{ --rv-delay: .27s; }

@media (prefers-reduced-motion: reduce){
    html.js .rv-reveal{ opacity: 1; transform: none; transition: none; }
}

/* ---------- CTA section (front page) ---------- */
.rv-cta-section{ text-align: center; padding-top: 0; }
.rv-cta-lead{
    max-width: 52ch;
    margin: .8rem auto 1.6rem;
    color: rgba(44,37,33,.75);
}
.rv-section-title{ text-align: center; margin-bottom: 2.5rem; font-size: 2rem; }

/* ==========================================================================
   Product cards — shop loop
   ========================================================================== */
.woocommerce ul.products{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2.25rem;
}
.woocommerce ul.products li.product{
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link{
    display: block;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(44,37,33,.06), 0 12px 28px -18px rgba(44,37,33,.35);
    transition: transform .35s cubic-bezier(.16,.8,.3,1), box-shadow .35s cubic-bezier(.16,.8,.3,1);
}
.woocommerce ul.products li.product .woocommerce-loop-product__link:hover{
    transform: translateY(-6px);
    box-shadow: 0 1px 2px rgba(44,37,33,.08), 0 24px 40px -20px rgba(44,37,33,.42);
}
.woocommerce ul.products li.product .woocommerce-loop-product__link{ position: relative; }
.woocommerce ul.products li.product img{
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 65%;
    transform: scale(1.18);
    transform-origin: center 65%;
    background: linear-gradient(160deg, var(--rv-cream-2), var(--rv-cream));
    filter: sepia(.08) saturate(1.12) brightness(1.03) contrast(1.03);
    transition: transform .6s cubic-bezier(.16,.8,.3,1), filter .6s ease;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link:hover img{
    transform: scale(1.24);
}
.woocommerce ul.products li.product .woocommerce-loop-product__link::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 -2.5rem 3rem -2rem rgba(44,37,33,.16);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-family: "Fraunces", serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--rv-teal-dark);
    padding: 1.1rem 1.2rem 0;
    margin: 0;
}
.woocommerce ul.products li.product .price{
    padding: .35rem 1.2rem 1.3rem;
    display: block;
    font-size: 1rem;
}
.woocommerce ul.products li.product .button{
    margin: 0 1.2rem 1.3rem;
    width: calc(100% - 2.4rem);
    text-align: center;
}

/* "Muestra" badge on placeholder test products — floats over the image, top-left */
.rv-badge-muestra{
    position: absolute;
    top: .9rem;
    left: .9rem;
    z-index: 2;
    display: inline-block;
    background: var(--rv-mustard);
    color: var(--rv-ink);
    font-family: "Public Sans", sans-serif;
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .35em .75em;
    border-radius: 999px;
    box-shadow: 0 4px 10px -4px rgba(44,37,33,.4);
}
.woocommerce div.product .rv-badge-muestra{
    position: static;
    display: inline-block;
    margin-bottom: .8rem;
    box-shadow: none;
}

/* Add-to-cart micro-feedback */
.add_to_cart_button{ position: relative; transition: background .18s ease, transform .12s ease; }
.add_to_cart_button.rv-adding{ opacity: .7; transform: scale(.98); }
.add_to_cart_button.rv-added{
    background-color: var(--rv-teal-dark) !important;
}
.add_to_cart_button.rv-added::after{
    content: "✓ Añadido";
}
.add_to_cart_button.rv-added{ font-size: 0; }
.add_to_cart_button.rv-added::after{ font-size: .78rem; }

/* ---------- Featured products (front page) ---------- */
.rv-featured{ max-width: 1200px; }
.rv-featured-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
}
.rv-featured-card{
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(44,37,33,.06), 0 12px 28px -18px rgba(44,37,33,.35);
    transition: transform .35s cubic-bezier(.16,.8,.3,1), box-shadow .35s cubic-bezier(.16,.8,.3,1);
}
.rv-featured-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 1px 2px rgba(44,37,33,.08), 0 24px 40px -20px rgba(44,37,33,.42);
    color: inherit;
}
.rv-featured-media{
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: linear-gradient(160deg, var(--rv-cream-2), var(--rv-cream));
}
.rv-featured-media::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 -2.5rem 3rem -2rem rgba(44,37,33,.16);
}
.rv-featured-media img{
    width: 100%; height: 100%; object-fit: cover;
    object-position: center 65%;
    transform: scale(1.18);
    transform-origin: center 65%;
    filter: sepia(.08) saturate(1.12) brightness(1.03) contrast(1.03);
    transition: transform .6s cubic-bezier(.16,.8,.3,1);
}
.rv-featured-card:hover .rv-featured-media img{ transform: scale(1.24); }
.rv-featured-name{
    display: block;
    font-family: "Fraunces", serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--rv-teal-dark);
    padding: 1.1rem 1.2rem 0;
}
.rv-featured-price{
    display: block;
    padding: .35rem 1.2rem 1.3rem;
    color: var(--rv-terracotta);
    font-weight: 600;
}

/* ---------- Small interaction polish sitewide ---------- */
.main-navigation ul li a,
.site-header-cart .cart-contents,
#colophon a{
    transition: color .18s ease, background .18s ease;
}