/*
Theme Name: Dolce Marê
Theme URI: https://dolcemareaccesorios.com
Author: Arketipo Studio
Author URI: https://arketipostudio.com
Description: Theme custom para Dolce Marê — Perfumería & Accesorios. Diseño editorial minimalista integrado con WooCommerce.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: dolce-mare
*/

:root{
  --negro:#111111;
  --hueso:#FAF8F4;
  --piedra:#D8D3C8;
  --piedra-osc:#B7B0A0;
  --gris:#8A8580;
}
*{box-sizing:border-box;}
body{
  background:var(--hueso);
  color:var(--negro);
  font-family:'Jost', sans-serif;
  font-weight:300;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,.display{
  font-family:'Bodoni Moda', serif;
  font-weight:500;
  letter-spacing:0.01em;
}
.tracked{
  letter-spacing:0.28em;
  text-transform:uppercase;
  font-size:11px;
}
.contenedor{ max-width:1440px; margin:0 auto; padding:0 5vw; }

/* ---- barra superior de aviso (envío / promo) ---- */
.top-bar{
  background:var(--negro);
  color:var(--hueso);
  text-align:center;
  padding:9px 16px;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.trust-strip{
  display:flex;
  justify-content:center;
  gap:10px;
  padding:8px 16px;
  background:#F1EEE7;
  color:var(--gris);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  flex-wrap:wrap;
}
.trust-strip .dot{ color:var(--piedra-osc); }

/* ---- header ---- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 5vw;
  border-bottom:1px solid var(--piedra);
  flex-wrap:wrap;
  gap:16px;
}
.site-header .branding{ display:flex; flex-direction:column; }
.site-header .branding a{ text-decoration:none; color:var(--negro); }
.logo-word{ font-family:'Bodoni Moda', serif; font-size:26px; letter-spacing:0.02em; }
.logo-sub{
  display:block;
  font-family:'Jost',sans-serif;
  font-size:9px;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--gris);
  margin-top:2px;
}
.custom-logo-link{ display:inline-block; }
.custom-logo{ max-height:70px; width:auto; }
.logo-sub--under-image{
  font-family:'Jost',sans-serif;
  font-size:9px;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--gris);
  margin-top:6px;
  text-align:center;
}
.site-header nav ul{
  display:flex;
  gap:34px;
  list-style:none;
  margin:0; padding:0;
}
.site-header nav a{
  text-decoration:none;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.site-header nav a:hover{ border-color:var(--negro); }
.header-icons{
  display:flex;
  gap:22px;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  align-items:center;
}
.header-icons a{ text-decoration:none; }

/* ---- hero (home) ---- */
.hero{
  padding:110px 5vw 90px;
  text-align:center;
  border-bottom:1px solid var(--piedra);
}
.hero .eyebrow{ display:block; margin-bottom:22px; color:var(--gris); }
.hero h1{
  font-size:clamp(40px, 6vw, 78px);
  line-height:1.05;
  max-width:900px;
  margin:0 auto;
}
.hero p{
  max-width:480px;
  margin:26px auto 0;
  font-size:15px;
  line-height:1.8;
  color:#4a4a4a;
}
.flor{ display:inline-block; margin-top:34px; font-size:20px; letter-spacing:0.4em; color:var(--piedra-osc); }

/* ---- secciones generales ---- */
.section{ padding:80px 5vw; border-bottom:1px solid var(--piedra); }
.section-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:44px;
  flex-wrap:wrap;
  gap:12px;
}
.section-title h2{ font-size:30px; }
.section-title .count{ color:var(--gris); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; }

/* ---- categorías (home) ---- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1px;
  background:var(--piedra);
  border:1px solid var(--piedra);
}
.cat-card{
  background:var(--hueso);
  padding:34px 18px 26px;
  text-align:center;
  text-decoration:none;
  color:var(--negro);
  display:block;
}
.cat-card .n{
  font-family:'Bodoni Moda',serif;
  font-style:italic;
  font-size:13px;
  color:var(--piedra-osc);
  display:block;
  margin-bottom:14px;
}
.cat-card h3{ font-size:15px; letter-spacing:0.08em; text-transform:uppercase; font-weight:500; }
.cat-card .cantidad{ display:block; margin-top:10px; font-size:11px; color:var(--gris); letter-spacing:0.1em; }

/* variante con foto de fondo */
.cat-card--foto{
  min-height:260px;
  background-size:cover;
  background-position:center;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  padding-bottom:26px;
}
.cat-card--foto .cat-card__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,17,17,0) 40%, rgba(17,17,17,0.55) 100%);
}
.cat-card--foto .n,
.cat-card--foto h3,
.cat-card--foto .cantidad{
  position:relative; z-index:1;
  color:var(--hueso);
}
.cat-card--foto .n{ color:rgba(250,248,244,0.75); }
.cat-card--foto .cantidad{ color:rgba(250,248,244,0.75); }

/* ---- grid de productos (shop / archive / relacionados) ---- */
ul.products{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:44px 28px !important;
  list-style:none;
  margin:0; padding:0;
}
ul.products li.product{
  text-align:left;
}
ul.products li.product img{
  aspect-ratio:4/5;
  object-fit:cover;
  border:1px solid var(--piedra);
  margin-bottom:16px;
}
ul.products li.product .woocommerce-loop-category__title,
ul.products li.product .woocommerce-loop-product__title{
  font-size:16px;
  font-weight:500;
  font-family:'Jost',sans-serif;
  letter-spacing:0.01em;
  margin:0 0 8px;
}
ul.products li.product .price{
  font-family:'Bodoni Moda', serif;
  font-style:italic;
  font-size:16px;
  color:var(--negro);
}
ul.products li.product .price del{ color:var(--gris); opacity:0.7; }
ul.products li.product .price ins{ text-decoration:none; }
ul.products li.product .button{
  margin-top:12px;
  display:inline-block;
  background:none;
  border:1px solid var(--negro);
  color:var(--negro) !important;
  padding:10px 18px;
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  text-decoration:none;
}
ul.products li.product .button:hover{ background:var(--negro); color:var(--hueso) !important; }

/* feedback visual al agregar al carrito (AJAX nativo de WooCommerce) */
ul.products li.product .button.loading{ opacity:0.5; position:relative; }
ul.products li.product a.added_to_cart{
  display:block;
  margin-top:8px;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:underline;
  color:var(--negro);
}
a.cart-contents{ text-decoration:none; }
.woocommerce-pagination ul{ display:flex; gap:14px; list-style:none; padding:0; margin:60px 0 0; justify-content:center;}
.woocommerce-pagination a, .woocommerce-pagination span{
  font-size:12px; text-decoration:none; padding:6px 10px; letter-spacing:0.08em;
}

/* filtros de categoría */
.filtros{ display:flex; gap:26px; margin-bottom:50px; flex-wrap:wrap; }
.filtros a{
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gris);
  padding-bottom:6px; border-bottom:1px solid transparent; text-decoration:none;
}
.filtros a.activo, .filtros a:hover{ color:var(--negro); border-color:var(--negro); }

/* ---- página de producto individual ---- */
.woocommerce div.product{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  padding:80px 5vw 100px;
  align-items:start;
}
.woocommerce div.product .woocommerce-product-gallery{ width:100% !important; }
.woocommerce div.product .woocommerce-product-gallery img{ border:1px solid var(--piedra); }
.woocommerce div.product .product_title{ font-size:32px; margin-bottom:16px; line-height:1.15; }
.woocommerce div.product p.price{
  font-family:'Bodoni Moda',serif; font-style:italic; font-size:24px; margin-bottom:28px; display:block; color:var(--negro);
}
.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:13px; line-height:1.9; color:#4a4a4a; margin-bottom:20px;
}
.woocommerce div.product form.cart .button{
  margin-top:12px; width:100%; padding:17px; background:var(--negro); color:var(--hueso);
  border:none; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; cursor:pointer;
}
.woocommerce div.product .quantity input{ border:1px solid var(--piedra); padding:14px; font-family:'Jost',sans-serif; width:70px; }
.woocommerce-tabs{ grid-column:1 / -1; margin-top:30px; border-top:1px solid var(--piedra); padding-top:30px; }
.woocommerce-tabs ul.tabs{ list-style:none; display:flex; gap:30px; padding:0; margin-bottom:24px; }
.woocommerce-tabs ul.tabs li a{ text-decoration:none; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; }
.related.products{ padding:80px 5vw; border-top:1px solid var(--piedra); }
.related.products > h2{ font-size:30px; margin-bottom:44px; }

/* ---- carrito / checkout: dejar respirar, misma tipografía ---- */
.woocommerce-cart table.cart, .woocommerce-checkout table.shop_table{
  width:100%; border-collapse:collapse; font-size:13px;
}
.woocommerce-cart table.cart th, .woocommerce-checkout table.shop_table th{
  text-align:left; text-transform:uppercase; letter-spacing:0.1em; font-size:10px; color:var(--gris);
  border-bottom:1px solid var(--piedra); padding:12px 8px;
}
.woocommerce-cart table.cart td, .woocommerce-checkout table.shop_table td{
  border-bottom:1px solid var(--piedra); padding:16px 8px;
}
.woocommerce #payment div.payment_box, .woocommerce-checkout #payment div.payment_box{ background:#F1EEE7; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit{
  background:var(--negro); color:var(--hueso); border:none; border-radius:0;
  padding:14px 26px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background:#333; color:var(--hueso); }

/* ---- footer ---- */
.site-footer{
  border-top:1px solid var(--piedra);
  padding:50px 5vw;
  text-align:center;
  color:var(--gris);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

/* ---- responsive ---- */
@media (max-width:900px){
  .site-header nav{ display:none; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  ul.products{ grid-template-columns:repeat(2,1fr) !important; }
  .woocommerce div.product{ grid-template-columns:1fr; gap:36px; }
}