/*
 Theme Name:  Brais Child
 Template:    blocksy
 Text Domain: brais-child
 Version:     1.1.0
 Description: Tema hijo tienda (Woo + Blocksy) alineado con braisggarcia.com (paper/stone)
*/

/* =========================================================
   TOKENS (WEB PRINCIPAL / PAPER)
   ========================================================= */
:root{
  --bg:#fbfbfa;
  --paper:#ffffff;
  --fg:#141414;
  --muted:#6a6a6a;
  --border:rgba(20,20,20,.14);

  /* Botón editorial */
  --accent:#141414;
  --accent-hover:#2a2a2a;

  --radius:16px;
  --radius-lg:20px;
  --shadow:0 10px 30px rgba(0,0,0,.06);

  /* ancho tipo tu web */
  --wrap:1100px;

  /* Forzar headings Blocksy si usa vars */
  --heading-1-color: var(--fg);
  --heading-2-color: var(--fg);
  --heading-3-color: var(--fg);
  --heading-4-color: var(--fg);
}

/* =========================================================
   BASE + FONDO (adiós cosmos violeta)
   ========================================================= */
html, body { background: var(--bg); }

body, .site, .site-content, .woocommerce-page{
  background: transparent;
  color: var(--fg);
}

body, .woocommerce, input, textarea, select{
  font-family:"IBM Plex Serif", Georgia, "Times New Roman", serif;
  color: var(--fg);
}

h1,h2,h3,.woocommerce-loop-product__title,.product_title,
.ct-heading, .ct-title, .wp-block-heading{
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing:-.02em;
  color: var(--fg) !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

a{ color: var(--fg); }
a:hover{ opacity:.85; }

/* Fondo “paper/stone” */
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1200px 500px at 50% -120px, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(#fbfbfa, #f3f2ef);
}

/* =========================================================
   HEADER / FOOTER (Blocksy)
   ========================================================= */
.ct-header, header#masthead{
  background: rgba(255,255,255,.82);
  color: var(--fg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ct-header a{ color: var(--fg); }
.ct-header a:hover{ opacity:.8; }
.ct-header [data-row]{ background:transparent; box-shadow:none; border-bottom:0; }

.ct-footer, .site-footer{
  background: transparent;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.ct-footer a, .site-footer a{ color: var(--fg); }
.ct-footer a:hover, .site-footer a:hover{ opacity:.85; }
.ct-footer-copyright, .site-info{ color: var(--muted); }

/* =========================================================
   CONTAINER / RITMO (centrado como tu web)
   ========================================================= */
.ct-container,
.site-main .ct-container,
.site-main,
.content-area{
  max-width: var(--wrap);
}

.ct-content, .ct-main, .site-content, .site-main, .content-area, .entry-content{
  background: transparent;
}

.woocommerce .site-main{
  padding-top: clamp(12px,3vw,28px);
}

/* =========================================================
   QUITAR PAGE HERO / TITULOS EXTRAS (Woo)
   ========================================================= */
.post-type-archive-product .ct-page-hero,
.tax-product_cat .ct-page-hero,
.tax-product_tag .ct-page-hero,
.woocommerce-account .ct-page-hero,
.woocommerce-cart .ct-page-hero,
.woocommerce-checkout .ct-page-hero,
.post-type-archive-product .page-title-area,
.tax-product_cat .page-title-area,
.tax-product_tag .page-title-area,
.woocommerce-account .page-title-area,
.woocommerce-cart .page-title-area,
.woocommerce-checkout .page-title-area,
.woocommerce-products-header,
.woocommerce-products-header__title,
.page-title, .ct-page-title, .ct-breadcrumbs{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Blocksy a veces mete un primer container vacío */
.woocommerce .site-main > .ct-container:first-child{
  margin-top: 0 !important;
}

/* =========================================================
   FORMULARIOS / INPUTS
   ========================================================= */
input, select, textarea, .select2-container .select2-selection{
  background: rgba(255,255,255,.9);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

input::placeholder, textarea::placeholder{
  color: rgba(20,20,20,.45);
}

label, .form-row label, .woocommerce form .form-row label, fieldset legend,
.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-checkbox-text{
  color: var(--muted);
  opacity: 1 !important;
}

/* Campo inválido */
.woocommerce form .form-row .woocommerce-invalid input{
  border-color: #ef4444 !important;
}

/* =========================================================
   BOTONES (editorial)
   ========================================================= */
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, opacity .2s ease;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  transform: translateY(-1px);
  opacity: .92;
}

/* =========================================================
   LISTADO DE PRODUCTOS
   ========================================================= */
.woocommerce ul.products{
  gap: 16px;
}

.woocommerce ul.products li.product{
  padding: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.woocommerce ul.products li.product a img{
  border-radius: 14px;
  background: rgba(255,255,255,.6);
  padding: 8px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  color: var(--fg);
  font-family:"Space Grotesk";
  font-weight: 700;
  font-size: 16px;
  margin-top: 10px;
}

.woocommerce ul.products li.product .price{
  color: var(--muted);
  font-weight: 600;
}

.woocommerce .woocommerce-ordering select{
  background: rgba(255,255,255,.85);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* =========================================================
   PRODUCTO INDIVIDUAL
   ========================================================= */
.single-product .product{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(16px,3vw,28px);
  box-shadow: var(--shadow);
}

.single-product .product_title{
  color: var(--fg);
  font-family:"Space Grotesk";
  font-weight: 800;
}

.single-product .summary .price{
  color: var(--muted);
  font-size: 1.15rem;
}

.single-product .quantity .qty{
  background: rgba(255,255,255,.9);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.woocommerce-tabs .tabs li a{
  color: var(--fg);
  opacity: .85;
}
.woocommerce-tabs .tabs li.active a{
  opacity: 1;
}
.woocommerce-tabs .panel{
  color: var(--fg);
  opacity: .9;
  background: transparent;
}

/* =========================================================
   CARRITO / CHECKOUT (LEGACY)
   ========================================================= */
.woocommerce table.shop_table{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.woocommerce-cart .cart_totals{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button{
  background: var(--accent);
  border-radius: 14px;
  font-weight: 800;
}

/* Notices */
.woocommerce-error, .woocommerce-info, .woocommerce-message{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* =========================================================
   CART/checkout blocks (wc-block-*)
   ========================================================= */
.wc-block-cart, .wc-block-checkout{
  color: var(--fg);
}

.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.wc-block-components-text-input input,
.wc-block-components-select select{
  background: rgba(255,255,255,.9);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* =========================================================
   MI CUENTA
   ========================================================= */
.woocommerce-MyAccount-navigation ul li a{
  color: var(--fg);
  opacity: .85;
}
.woocommerce-MyAccount-navigation ul li.is-active a{
  opacity: 1;
  font-weight: 800;
}

/* =========================================================
   PREVENTA BANNER (adaptado a paper)
   ========================================================= */
.preventa-banner{
  position:relative;
  z-index:20;
  background:
    radial-gradient(1200px 500px at 50% -120px, rgba(0,0,0,.06), transparent 60%),
    rgba(255,255,255,.85);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.preventa-banner__inner{
  max-width: var(--wrap);
  margin:0 auto;
  padding: clamp(12px,2.4vw,18px) clamp(14px,3vw,24px);
  display:grid;
  grid-auto-flow:column;
  align-items:center;
  gap:14px;
}
.preventa-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  background: var(--fg);
  box-shadow: 0 0 0 6px rgba(0,0,0,.06);
}
.preventa-banner strong{
  color: var(--fg);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:800;
  font-family:"Space Grotesk";
  white-space:nowrap;
}
.preventa-text{ color: var(--muted); }
.preventa-cta{
  margin-left:auto;
  background: var(--fg);
  color:#fff;
  text-decoration:none;
  border:1px solid var(--fg);
  border-radius:14px;
  padding:8px 14px;
  font-weight:700;
}
.preventa-cta:hover{
  transform: translateY(-1px);
  opacity:.92;
}
.preventa-close{
  background:transparent;
  color: var(--fg);
  border:1px solid var(--border);
  border-radius:10px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.preventa-close:hover{
  opacity:.85;
}
@media (max-width:760px){
  .preventa-banner__inner{
    grid-auto-flow:row;
    justify-items:start;
  }
  .preventa-cta{ margin-left:0; }
}

/* =========================================================
   FIX: “Arreglo listado visible” (si ocultabas el container)
   ========================================================= */
.post-type-archive-product .site-main > .ct-container:first-of-type,
.tax-product_cat .site-main > .ct-container:first-of-type,
.tax-product_tag .site-main > .ct-container:first-of-type{
  display:block !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  background: transparent !important;
}

/* =========================================================
   ICONO AMAZON (solo external products) — NO tocar add-to-cart normal
   ========================================================= */
/* External product button en listado */
.product_type_external a.button{
  position: relative;
  padding-left: 44px;
}
.product_type_external a.button::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:20px;
  height:20px;
  transform: translateY(-50%);
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'>\
    <path d='M22 18c0-5 3-8 10-8s10 3 10 8c0 3-1 5-3 6 3 1 5 4 5 7 0 6-5 10-12 10S20 37 20 31c0-3 2-6 5-7-2-1-3-3-3-6z' fill='%23ffffff' opacity='.9'/>\
    <path d='M12 44c9 6 31 6 40 0' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'/>\
    <path d='M42 46l7-2-2 7' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/>\
  </svg>");
}

/* =========================================================
   RESPONSIVE MICRO
   ========================================================= */
@media (max-width: 600px){
  .woocommerce ul.products li.product{
    padding: 12px;
  }
}