/*
Theme Name: Ubuyes
Theme URI: https://ubuyes.com
Author: Ubuyes
Description: Official Ubuyes theme for a multi-brand department store. Built around the desire color scale (Wine, Desire, Blush, Yes Gold, Ivory) and compatible with WooCommerce.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ubuyes
Tags: e-commerce, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ===================================================================
   BRAND TOKENS
=================================================================== */
:root{
  --ink:#1C1418;
  --surface:#241A1E;
  --wine:#3D0E1F;
  --desire:#E8213F;
  --coral:#FF6F61;
  --gold:#F5B942;
  --ivory:#FBF4EA;
  --paper:#FFFFFF;
  --text:#241A1E;
  --text-muted:#7A6467;
  --border:#EAD9D3;
  --t1:#F6DCDD;
  --t2:#FBE3DA;
  --t3:#FBEBC9;
  --t4:#EADCE0;
  --t5:#F0E4DA;

  --font-display:'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body:'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-mono:'Space Mono', 'Courier New', monospace;

  --radius:12px;
  --container:1240px;
}

/* ===================================================================
   BASE
=================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ background:var(--ivory); }
body{
  margin:0;
  background:var(--ivory);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.1;
  margin:0 0 .6em;
  text-wrap:balance;
}
p{ margin:0 0 1.2em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--desire); color:var(--ivory); }
:focus-visible{ outline:2px solid var(--desire); outline-offset:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--ivory); padding:.8em 1.2em; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

.container{ max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); }
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted);
}

/* ===================================================================
   WORDMARK
=================================================================== */
.wordmark{
  display:inline-flex; align-items:baseline; font-family:var(--font-display); font-weight:800;
  font-size:1.6rem; letter-spacing:-.01em; line-height:1;
}
.wordmark .u{ color:var(--ivory); }
.wordmark .buy{ color:var(--desire); }
.wordmark .es{ color:var(--gold); }
.site-branding .custom-logo{ max-height:44px; width:auto; }

/* ===================================================================
   HEADER
=================================================================== */
.site-header{
  background:linear-gradient(120deg, var(--wine), var(--desire) 130%);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1rem clamp(1.25rem,4vw,2.5rem);
}
.site-branding a{ display:inline-flex; align-items:center; }

.primary-nav ul{ display:flex; gap:1.75rem; align-items:center; flex-wrap:wrap; }
.primary-nav a{
  font-size:.92rem; font-weight:500; color:var(--ivory); opacity:.9;
}
.primary-nav a:hover{ opacity:1; }
.primary-nav .current-menu-item > a{ opacity:1; border-bottom:2px solid var(--gold); padding-bottom:2px; }

.header-actions{ display:flex; align-items:center; gap:1rem; }
.cart-contents{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink);
  background:var(--gold); padding:.5rem .9rem; border-radius:100px; font-weight:700;
}
.menu-toggle{
  display:none; background:none; border:1px solid rgba(251,244,234,.4); color:var(--ivory);
  border-radius:8px; padding:.5rem .7rem; font-size:1.1rem; cursor:pointer;
}

@media (max-width:860px){
  .menu-toggle{ display:inline-flex; }
  .primary-nav{
    display:none; width:100%; order:3;
    padding:0 clamp(1.25rem,4vw,2.5rem) 1rem;
  }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:.9rem; }
  .header-inner{ flex-wrap:wrap; }
}

/* ===================================================================
   BUTTONS
=================================================================== */
.btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-Button {
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
  background:var(--gold); color:var(--ink) !important;
  padding:.85em 1.7em; border-radius:100px; border:none;
  cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover{
  background:#f7c766; transform:translateY(-1px);
}
.btn-ghost{
  background:transparent; border:1px solid var(--border); color:var(--text) !important;
}
.btn-ghost:hover{ background:var(--paper); }
.woocommerce a.added_to_cart{ margin-left:.75em; font-size:.85rem; text-decoration:underline; }

/* ===================================================================
   HOMEPAGE — HERO (Catalog Rank)
=================================================================== */
.hero{ background:var(--paper); padding:clamp(2.5rem,6vw,4rem) 0; }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ font-size:clamp(2.1rem,4.6vw,3.2rem); margin-top:.4rem; }
.hero p.lede{ color:var(--text-muted); max-width:34rem; font-size:1.05rem; }
.hero-actions{ display:flex; gap:1rem; margin-top:1.5rem; flex-wrap:wrap; }
.hero-visual{
  aspect-ratio:4/3; border-radius:var(--radius);
  background:linear-gradient(150deg, var(--wine), var(--desire) 60%, var(--coral));
  position:relative; overflow:hidden;
}
.hero-visual .tag{
  position:absolute; left:1.25rem; bottom:1.25rem; background:var(--ivory); color:var(--ink);
  font-family:var(--font-mono); font-size:.72rem; padding:.5rem .8rem; border-radius:8px; font-weight:700;
}
.trust-row{ display:flex; gap:2rem; flex-wrap:wrap; margin-top:2.25rem; padding-top:1.75rem; border-top:1px solid var(--border); }
.trust-row li{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:var(--text-muted); }
.trust-row b{ color:var(--text); }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--desire); display:inline-block; }

/* ---- category strip ---- */
.section{ padding:clamp(2.75rem,6vw,4.5rem) 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem;
  margin-bottom:1.75rem; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(1.4rem,3vw,1.9rem); }
.section-head .btn-row{ display:flex; gap:.5rem; }

.cat-strip{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; }
.cat-pill{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.6rem; width:110px; text-align:center; }
.cat-circle{
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--ink); overflow:hidden;
}
.cat-circle img{ width:100%; height:100%; object-fit:cover; }
.cat-pill span:last-child{ font-size:.82rem; font-weight:600; }

/* ---- trust ticker ---- */
.ticker{ background:var(--ivory); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.ticker .container{ display:flex; gap:2.5rem; flex-wrap:wrap; padding:.85rem clamp(1.25rem,4vw,2.5rem); font-size:.82rem; color:var(--text-muted); }
.ticker .dot{ background:var(--gold); margin-right:.5rem; }

/* ---- ranked product carousel ---- */
.arrow-btn{ width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--paper); cursor:pointer; font-size:1rem; }
.rank-row{ display:flex; gap:1.1rem; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x mandatory; scroll-behavior:smooth; }
.rank-card{
  scroll-snap-align:start; flex:0 0 260px; background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem; position:relative;
}
.rank-badge{
  position:absolute; top:.9rem; left:.9rem; background:var(--ink); color:var(--gold); font-family:var(--font-mono);
  font-size:.68rem; font-weight:700; padding:.3rem .6rem; border-radius:100px; z-index:1;
}
.rank-thumb{
  aspect-ratio:1/1; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:.9rem;
  font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:rgba(28,20,24,.28); overflow:hidden;
}
.rank-thumb img{ width:100%; height:100%; object-fit:cover; }
.rank-cat{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; color:var(--text-muted); letter-spacing:.05em; }
.rank-name{ font-family:var(--font-body); font-weight:700; font-size:.98rem; margin:.3rem 0 .4rem; }
.rating{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text-muted); margin-bottom:.6rem; }
.rating .star-rating{ color:var(--gold); }
.price-row{ display:flex; align-items:baseline; gap:.5rem; font-family:var(--font-mono); margin-bottom:.7rem; }
.price-row .amount{ color:var(--desire); font-weight:700; }
.price-row del{ color:var(--text-muted); opacity:.7; font-weight:400; }
.price-row ins{ text-decoration:none; }
.perks{ list-style:none; margin:0 0 .9rem; padding:0; font-size:.76rem; color:var(--text-muted); }
.perks li::before{ content:"\2713  "; color:var(--desire); }
.rank-card .button{ width:100%; padding:.65em 1em; font-size:.85rem; text-align:center; }

/* ---- standards ---- */
.standards{ background:var(--surface); color:var(--ivory); border-radius:var(--radius); padding:clamp(2rem,5vw,3rem); }
.standards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1.75rem; }
@media (max-width:760px){ .standards-grid{ grid-template-columns:1fr 1fr; } }
.standard-item{ display:flex; align-items:flex-start; gap:.9rem; }
.standard-item .ico{ width:38px; height:38px; border-radius:9px; background:var(--gold); color:var(--ink); display:flex; align-items:center; justify-content:center; flex:none; font-weight:700; }
.standard-item h3{ font-size:.95rem; margin-bottom:.15rem; }
.standard-item p{ font-size:.82rem; color:rgba(251,244,234,.7); margin:0; }

/* ===================================================================
   PRODUCT GRID (WooCommerce archive/shop + fallback)
=================================================================== */
.ubuyes-product-grid, .woocommerce ul.products{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:1.25rem !important;
  margin:0 !important; padding:0 !important;
}
@media (max-width:900px){ .ubuyes-product-grid, .woocommerce ul.products{ grid-template-columns:repeat(2,1fr) !important; } }
.woocommerce ul.products li.product, .product-card{
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
  padding:.9rem .9rem 1.1rem; width:auto !important; margin:0 !important; float:none !important;
  position:relative; transition:box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover, .product-card:hover{
  box-shadow:0 14px 30px rgba(28,20,24,.1); transform:translateY(-2px);
}
.woocommerce ul.products li.product img{ border-radius:8px; margin-bottom:.9rem; aspect-ratio:1/1; object-fit:cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title, .product-card h3{
  font-family:var(--font-body); font-weight:600; font-size:.98rem; color:var(--text); margin-bottom:.3rem;
}
.woocommerce ul.products li.product .price, .product-card .price{
  font-family:var(--font-mono); color:var(--desire); font-weight:700; font-variant-numeric:tabular-nums;
}
.woocommerce ul.products li.product .price del{ color:var(--text-muted); opacity:.7; font-weight:400; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce span.onsale{
  background:var(--gold) !important; color:var(--ink) !important; font-family:var(--font-mono) !important;
  font-weight:700 !important; font-size:.7rem !important; text-transform:uppercase;
  min-height:auto !important; min-width:auto !important; padding:.35em .7em !important;
  border-radius:100px !important; top:.9rem !important; left:.9rem !important; line-height:1 !important;
}
.woocommerce .star-rating{ color:var(--gold); }
.woocommerce .star-rating::before{ color:var(--border); }

/* single product */
.woocommerce div.product .product_title{ font-size:clamp(1.6rem,3vw,2.1rem); }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--desire); font-family:var(--font-mono); font-size:1.4rem; }
.woocommerce-product-details__short-description{ color:var(--text-muted); }
.woocommerce nav.woocommerce-breadcrumb{ font-size:.85rem; color:var(--text-muted); margin-bottom:1.5rem; }
.woocommerce nav.woocommerce-breadcrumb a{ color:var(--text-muted); text-decoration:underline; }

/* notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews{
  background:var(--paper) !important; border:1px solid var(--border) !important;
  border-left:4px solid var(--coral) !important; border-radius:8px !important;
  color:var(--text) !important; padding:1rem 1.25rem !important; list-style:none !important;
}
.woocommerce-error{ border-left-color:var(--desire) !important; }

/* cart / checkout tables */
.woocommerce table.shop_table{ border-color:var(--border); border-radius:var(--radius); overflow:hidden; }
.woocommerce table.shop_table th{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.woocommerce-checkout #payment{ background:var(--paper) !important; border-radius:var(--radius); }

/* ===================================================================
   CONTENT / PAGES
=================================================================== */
.content-area{ padding:clamp(2.5rem,5vw,4rem) 0; }
.entry-title{ font-size:clamp(1.8rem,4vw,2.6rem); }
.entry-content{ max-width:42rem; color:var(--text); }
.entry-content a{ text-decoration:underline; text-decoration-color:var(--coral); }
.entry-meta{ font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); margin-bottom:1rem; }

.search-form{ display:flex; gap:.6rem; max-width:28rem; }
.search-form input[type="search"]{
  flex:1; padding:.8rem 1rem; border:1px solid var(--border); border-radius:100px; background:var(--paper);
  font-family:var(--font-body);
}
.search-form button{ border:none; }

.error-404{ text-align:left; padding:4rem 0; }
.error-404 .wordmark{ font-size:3rem; margin-bottom:1rem; }
.error-404 .wordmark .u{ color:var(--ink); }

/* ===================================================================
   FOOTER
=================================================================== */
.site-footer{ background:var(--ink); color:var(--ivory); margin-top:3rem; }
.footer-widgets{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
  padding:clamp(2.5rem,5vw,3.5rem) 0 2rem;
  border-bottom:1px solid rgba(251,244,234,.12);
}
@media (max-width:860px){ .footer-widgets{ grid-template-columns:repeat(2,1fr); } }
.footer-widgets h2, .footer-widgets .widgettitle{
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gold); margin-bottom:1rem;
}
.footer-widgets ul li{ margin-bottom:.5rem; }
.footer-widgets a{ color:rgba(251,244,234,.75); font-size:.92rem; }
.footer-widgets a:hover{ color:var(--ivory); }

.footer-base{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1.5rem 0;
}
.footer-base .wordmark{ font-size:1.2rem; }
.footer-base .fnote{ font-family:var(--font-mono); font-size:.72rem; color:rgba(251,244,234,.55); }

/* ===================================================================
   UTILITIES
=================================================================== */
.screen-reader-text{
  position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden;
}