/* Custom styles for 4D Cosmetics */
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text);
}

/* Visually hidden until focused skip link for keyboard users */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--primary);
  color: var(--primary-contrast);
  transform: translateY(-100%);
  transition: transform .2s ease;
  z-index: 1000;
}

.skip-link:focus {
  transform: translateY(0);
}

.navbar-brand {
  font-family: var(--font-sans);
  font-weight: 700;
}

.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background-color: var(--primary); border-color: var(--primary); filter: brightness(.9); }
.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-danger { background-color: var(--danger); border-color: var(--danger); }
.btn-warning { background-color: var(--accent); border-color: var(--accent); }

footer {
  background: var(--surface);
  color: var(--text);
}
footer a {
  color: var(--primary);
  text-decoration: none;
}
footer a:hover { text-decoration: underline; }

.hero {
  position: relative;
  overflow: hidden;
  color: var(--primary-contrast);
  text-align: center;
}

/* Only apply a tall minimum height when explicitly requested */
.hero--full {
  min-height: 60vh;
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16/9;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 var(--space-4);
}

.hero .btn-outline-light {
  color: var(--primary-contrast);
  border-color: var(--primary-contrast);
}
.hero .btn-outline-light:hover {
  background: rgba(255,255,255,0.2);
}

.card .item_price {
  font-weight: bold;
}

.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.value-props i {
  font-size: 1.5rem;
}

.newsletter form input {
  min-width: 240px;
}

.simpleCart_quantity {
  display: inline-block;
}

.cart-bounce {
  animation: cart-bounce 0.4s ease;
}

@keyframes cart-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.pagination .page-link {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Header styles */
.site-header{
  position: static;
  top:auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.nav-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
}
.nav-links a{
  margin: 0 var(--space-3);
  font-size: var(--font-size-300);
  color: var(--text);
  padding: var(--space-2) 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav-links a:hover{ color: var(--primary); }
.nav-actions{ display:flex; align-items:center; }
.search-form input{
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  width: 180px;
}
.cart-link{
  margin-left: var(--space-4);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.cart-count{
  position: absolute;
  top: -6px;
  right: -10px;
  background: var(--primary);
  color: var(--primary-contrast);
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
}

@media (max-width:1024px){
  .js .nav-links{ display:none; }
  .js .search-form{ display:none; }
}

.nav-toggle{
  display:none;
  background:none;
  border:none;
  width:44px;
  height:44px;
  padding:0;
  margin-right:var(--space-3);
}
.nav-toggle:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.nav-toggle .bar{
  display:block;
  width:24px;
  height:2px;
  margin:4px auto;
  background:var(--text);
  transition:background .2s;
}
.nav-toggle[aria-expanded="true"] .bar{
  background:var(--primary);
}
@media (max-width:1024px){
  .js .nav-toggle{ display:flex; align-items:center; justify-content:center; }
}
@media (min-width:1025px){
  .nav-toggle{ display:none; }
}

.drawer-overlay{
  position:fixed;
  inset:0;
  background:var(--text);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s;
  z-index:900;
}
.drawer-overlay.open{
  opacity:.4;
  visibility:visible;
}

.mobile-drawer{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:80vw;
  max-width:320px;
  background:var(--surface);
  border-right:1px solid var(--border);
  box-shadow:var(--shadow-md);
  padding:var(--space-4);
  transform:translateX(-100%);
  transition:transform .3s ease;
  z-index:950;
  display:flex;
  flex-direction:column;
}
.mobile-drawer.open{
  transform:translateX(0);
}
.mobile-drawer a{
  display:block;
  padding:var(--space-3) 0;
  color:var(--text);
}
.mobile-drawer a:hover,
.mobile-drawer a:focus{
  color:var(--primary);
}
.drawer-close{
  align-self:flex-end;
  background:none;
  border:none;
  color:var(--text);
  font-size:var(--font-size-300);
  min-width:44px;
  min-height:44px;
  margin-bottom:var(--space-4);
}
.drawer-close:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.drawer-search{
  margin-bottom:var(--space-4);
}
.drawer-search input{
  width:100%;
}
.mobile-drawer .cart-link{
  margin-left:0;
  margin-bottom:var(--space-4);
}
.drawer-secondary{
  border-top:1px solid var(--border);
  margin-top:var(--space-4);
  padding-top:var(--space-4);
}
body.drawer-open{
  overflow:hidden;
}
@media (prefers-reduced-motion: reduce){
  .drawer-overlay,
  .mobile-drawer{
    transition:none;
  }
}

/* Product grid and card styles */
.product-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-4);
}
@media (max-width:400px){
  .product-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:768px){
  .product-grid{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1024px){
  .product-grid{grid-template-columns:repeat(4,1fr);}
}
.product-card{display:flex;}
.product-card .card{width:100%;display:flex;flex-direction:column;}
.product-card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--surface);}
.product-card .brand,.product-card .variant{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.price-block{display:flex;align-items:center;gap:var(--space-2);flex-wrap:nowrap;}
.price-compare{text-decoration:line-through;color:var(--muted);font-size:var(--font-size-200);}
.price-discount{color:var(--danger);font-size:var(--font-size-200);}
.rating{color:var(--accent);font-size:var(--font-size-200);line-height:1;}

/* Variant swatches */
.variant-swatch{
  width:44px;
  height:44px;
  border:1px solid var(--border);
  border-radius:50%;
  cursor:pointer;
  display:inline-block;
}
.variant-swatch.selected{outline:2px solid var(--primary);}
.variant-swatch:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.variant-swatch[disabled]{opacity:.4;cursor:not-allowed;}

/* Site search autocomplete */
.search-form{position:relative;}
.search-results{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:1000;
  background:var(--surface);
  border:1px solid var(--border);
  max-height:80vh;
  overflow-y:auto;
}
.search-option{padding:var(--space-2);cursor:pointer;}
.search-option.active,.search-option:hover{background:var(--bg-muted);}

/* Mobile add-to-cart bar */
.mobile-atc{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:var(--space-3) var(--space-4);
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:var(--shadow-sm);
}
/* Enhanced search focus */
.search-form input:focus{
  outline:2px solid var(--primary);
  outline-offset:2px;
}


/* Ensure in-page anchors don't hide under sticky header */
[id]{ scroll-margin-top: 80px; }

/* cart header refinements */
.bnz-header{ position:sticky; top:0; z-index:30; background:var(--on-brand); }
.annc{ position:relative; }

.whatsapp-fab{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:30; }
@media(max-width:480px){ .whatsapp-fab{ bottom:80px; } }


/* === Palette wiring (Color Usage Guide) === */
.btn-primary{
  background:var(--brand); color:var(--on-brand);
  border:1px solid var(--brand);
}
.btn-primary:hover{ background:var(--brand-600); border-color:var(--brand-600); }
.btn-primary:active{ background:var(--brand-600); filter:saturate(1.05); }

.btn-outline{
  background:var(--on-brand); color:var(--brand);
  border:1px solid var(--brand);
}
.btn-outline:hover{ color:var(--on-brand); background:var(--brand); }

.btn-danger{
  background:var(--danger); color:var(--on-brand); border-color:var(--danger);
}
.btn-danger:hover{ filter:brightness(.95); }

/* Links */
a{ color:var(--text); text-underline-offset:2px; }
a:hover{ color:var(--brand-600); }

/* Tabs/Chips */
.tab-chip{
  color:var(--text); background:var(--on-brand); border:1px solid var(--border); border-radius:999px;
}
.tab-chip:hover{ background:var(--brand-50); border-color:var(--brand); }
.tab-chip.is-active{
  color:var(--text);
  background:var(--brand-50);
  border-color:var(--brand);
}

/* Form focus */
input,select,textarea{ border:1px solid var(--border); }
input:focus,select:focus,textarea:focus{
  outline:0; border-color:var(--brand-600);
  box-shadow:0 0 0 .2rem color-mix(in srgb, var(--brand-600) 28%, transparent);
}

/* Badges */
.badge-brand{ background:var(--brand-50); color:var(--brand-600); border:1px solid var(--brand); }
.badge-success{ background:color-mix(in srgb,var(--success) 12%, var(--on-brand)); color:var(--success); }
.badge-danger{ background:color-mix(in srgb,var(--danger) 12%, var(--on-brand)); color:var(--danger); }

/* Cards/Headers */
.card{ background:var(--on-brand); border:1px solid var(--border); }
.card .accent-bar{ height:2px; background:var(--brand); }

/* Cart specifics */
.cart-price{ color:var(--text); font-weight:700; }
.cart-remove{ color:var(--danger); }

/* Ensure anchors don't hide under sticky header */
[id]{ scroll-margin-top: 80px; }

.badge-sale{ background:var(--danger); color:var(--on-brand); }

.badge-new{ background:var(--brand); color:var(--on-brand); }

.badge-hot{ background:var(--warning); color:var(--on-brand); }

.badge-exclusive{ background:var(--info); color:var(--on-brand); }

/* [Guard] Secondary/Ghost and Badges expected already from previous step */

/* Reviews */
.reviews{ margin:28px 0; }
.reviews__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.review{ border:1px solid var(--border); border-radius:var(--radius); padding:16px; background:var(--surface); }
.review blockquote{ margin:8px 0 4px; }
.review small{ color:var(--muted); }