/**
 * awan-theme-cream.css
 * Cream/Parchment theme overrides — loaded last.
 * Cleans up any remaining dark values missed by the bulk swap.
 *
 * Palette:
 *   --awan-bg:          var(--awan-bg)
 *   --awan-surface:     var(--awan-surface)
 *   --awan-border:      var(--awan-border)
 *   --awan-text:        var(--awan-text)
 *   --awan-text-muted:  var(--awan-text-muted)
 *   --awan-accent:      var(--awan-accent)
 *   --awan-accent-hover:var(--awan-accent-hover)
 *   --awan-text-on-accent: var(--awan-bg)
 */

/* ── Global resets ─────────────────────────────────────────── */
html, body {
  background-color: var(--awan-text-on-accent) !important;
  color: var(--awan-text) !important;
  /* v197: prevent horizontal scroll caused by hero's 100vw break-out.
     `clip` (not `hidden`) so position:sticky on the hero video still works. */
  overflow-x: clip;
  max-width: 100%;
}

/* ── Navbar / header ───────────────────────────────────────── */
header,
.navbar,
.site-header,
.header,
.main-header,
nav {
  background-color: var(--awan-text-on-accent) !important;
  border-bottom-color: var(--awan-border) !important;
  color: var(--awan-text) !important;
}

/* ── Footer ────────────────────────────────────────────────── */
/* Awan footer is dark — only apply cream to non-awan footers */
footer:not(.awan-footer),
.footer:not(.awan-footer),
.site-footer:not(.awan-footer) {
  background-color: var(--awan-surface) !important;
  border-top-color: var(--awan-border) !important;
  color: var(--awan-text) !important;
}

/* ── Sections / page backgrounds ───────────────────────────── */
section,
.section,
.page-content,
.page-wrapper,
main {
  background-color: transparent !important;
}

/* ── Cards / surfaces ──────────────────────────────────────── */
.card,
.product-card,
.apd-tab-content,
.apd-tab-panel,
.apd-section,
.reviews-section,
.faq-section,
.apd-sticky-bar {
  background-color: var(--awan-surface);
  border-color: var(--awan-border);
  color: var(--awan-text);
}

/* ── Product page specific ─────────────────────────────────── */
.awan-product-page {
  background-color: var(--awan-text-on-accent);
  color: var(--awan-text);
}

/* Kill Zid's top padding on the page wrapper when product page is present */
body:has(.awan-product-page) .page-content,
body:has(.awan-product-page) .main-content,
body:has(.awan-product-page) main,
body:has(.awan-product-page) [class*="page-content"],
body:has(.awan-product-page) [class*="main-content"] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.apd-hero {
  background-color: var(--awan-text-on-accent);
}

/* Gallery */
.apd-gallery-main,
.apd-gallery-track {
  background: var(--awan-surface);
  border-color: var(--awan-border);
}

.apd-gallery-thumb {
  background: var(--awan-surface);
  border-color: var(--awan-border);
}
.apd-gallery-thumb.active,
.apd-gallery-thumb:hover {
  border-color: var(--awan-accent) !important;
}
.apd-gallery-thumb img {
  background: var(--awan-surface);
}

/* Thumb shimmer — light skeleton */
.apd-gallery-thumb img {
  background: linear-gradient(90deg, var(--awan-surface) 25%, var(--awan-bg) 50%, var(--awan-surface) 75%);
}
.apd-gallery-thumb img.apd-img-loaded {
  background: none;
  animation: none;
}

/* Gallery arrows */
.apd-gallery-arrow {
  background: rgba(233,230,215,0.85);
  border-color: var(--awan-border);
  color: var(--awan-text);
}
.apd-gallery-arrow:hover {
  background: var(--awan-bg) !important;
}

/* Gallery dots */
.apd-gallery-dot {
  background: var(--awan-border);
}
.apd-gallery-dot.active {
  background: var(--awan-accent);
}

/* ── Product info panel ─────────────────────────────────────── */
.apd-details,
.apd-info-col {
  background: var(--awan-bg);
  color: var(--awan-text);
}

.apd-name { color: var(--awan-text); }
.apd-category { color: var(--awan-text-muted); }
.apd-price { color: var(--awan-text); }
.apd-price-main { color: var(--awan-text); }
.apd-price-old { color: var(--awan-text-muted); }
.apd-rating-count { color: var(--awan-text-muted); }
.apd-scarcity { color: var(--awan-text-muted); }
.apd-tag { background: var(--awan-surface); border-color: var(--awan-border); color: var(--awan-text-muted); }

/* Viewers badge */
.apd-viewers {
  background: var(--awan-surface);
  border-color: var(--awan-border);
  color: var(--awan-text-muted);
}

/* ── Options / variant selectors ────────────────────────────── */
.apd-option-group,
.apd-option-label {
  color: var(--awan-text);
}

.apd-option-btn,
.apd-color-swatch,
.apd-size-btn {
  background: var(--awan-bg);
  border-color: var(--awan-border);
  color: var(--awan-text);
}
.apd-option-btn:hover,
.apd-size-btn:hover {
  border-color: var(--awan-accent) !important;
  color: var(--awan-accent) !important;
}
.apd-option-btn.active,
.apd-size-btn.active {
  background: var(--awan-accent);
  border-color: var(--awan-accent);
  color: var(--awan-text-on-accent);
}

/* ── Bundles (below gallery) ────────────────────────────────── */
.apd-bundles-title,
.apd-bundle-label,
.apd-bundle-sub {
  color: var(--awan-text);
}
.apd-bundle {
  background: var(--awan-bg);
  border-color: var(--awan-border);
  color: var(--awan-text);
}
.apd-bundle:hover {
  border-color: var(--awan-accent) !important;
}
.apd-bundle--active {
  background: rgba(190,84,46,0.08);
  border-color: var(--awan-accent);
}
.apd-bundle-price { color: var(--awan-accent); }
.apd-bundle-save {
  /* background: var(--awan-accent); */
  color: #00773c;
}
.apd-bundle-popular-tag {
  background: var(--awan-accent);
  color: var(--awan-text-on-accent);
}

/* ── Quantity stepper ───────────────────────────────────────── */
.apd-qty,
.apd-qty-btn,
.apd-qty-input {
  background: var(--awan-bg);
  border-color: var(--awan-border);
  color: var(--awan-text);
}
.apd-qty-btn:hover {
  background: var(--awan-surface) !important;
}

/* ── Glass pill overlay (new v111) ──────────────────────────── */
.apd-pill-trigger {
  background: rgba(13,15,14,0.55);
  border-color: rgba(13,15,14,0.2);
  color: var(--awan-text-on-accent);
}
.apd-pill-trigger:hover {
  background: rgba(13,15,14,0.72) !important;
}
/* Panel stays dark glass — it overlays the gallery which has imagery */
.apd-pill-panel {
  background: rgba(13,15,14,0.78);
  border-color: rgba(233,230,215,0.12);
  color: var(--awan-text-on-accent);
}

/* ── Add to cart button ─────────────────────────────────────── */
/* Removed in v196: the base + :hover rules above used [class*="add-to-cart"]
   which matched containers as well as buttons, painting an accent background
   that bled through on hover. Let the template's own classes handle it. */

/* ── Sticky bar ─────────────────────────────────────────────── */
.apd-sticky-bar,
.sticky-atc {
  background: var(--awan-bg) !important;
  border-top-color: var(--awan-border) !important;
  box-shadow: 0 -2px 12px rgba(13,15,14,0.08) !important;
  color: var(--awan-text) !important;
}

/* ── Tabs ───────────────────────────────────────────────────── */
.apd-tabs-wrap,
.apd-tabs-nav {
  background: var(--awan-bg);
  border-color: var(--awan-border);
}
.apd-tab-btn {
  color: var(--awan-text-muted);
  border-bottom-color: transparent;
}
.apd-tab-btn.active,
.apd-tab-btn:hover {
  color: var(--awan-text) !important;
  border-bottom-color: var(--awan-accent) !important;
}
.apd-tabs-content {
  background: var(--awan-bg);
  color: var(--awan-text);
}

/* ── Trust badges / features strip ─────────────────────────── */
.apd-trust,
.apd-trust-item,
.apd-features-strip,
.apd-feature-item {
  background: transparent;
  color: var(--awan-text-muted);
}
.apd-trust-icon,
.apd-feature-icon {
  color: var(--awan-accent);
}

/* ── Reviews ────────────────────────────────────────────────── */
.apd-review-card,
.review-card {
  background: var(--awan-surface);
  border-color: var(--awan-border);
}
.apd-review-name,
.review-name { color: var(--awan-text); }
.apd-review-text,
.review-text { color: var(--awan-text-muted); }
.apd-review-date,
.review-date { color: var(--awan-text-muted); }
.star, .star-filled, [class*="star"] { color: var(--awan-accent); }

/* ── FAQ accordion ──────────────────────────────────────────── */
.apd-faq-item,
.faq-item {
  background: var(--awan-bg);
  border-color: var(--awan-border);
}
.apd-faq-question,
.faq-question { color: var(--awan-text); }
.apd-faq-answer,
.faq-answer { color: var(--awan-text-muted); }
.apd-faq-icon { color: var(--awan-accent); }

/* ── Scroll animation section ───────────────────────────────── */
.scroll-animation,
.scroll-animation__sticky {
  background: transparent !important; /* canvas renders on page bg — no fill needed */
}
.scroll-animation__loading {
  background: var(--awan-text) !important;
}
/* Feature cards on dark canvas section — keep glass on dark */
.scroll-feature-card {
  background: rgba(233,230,215,0.92) !important;
  border-color: rgba(13,15,14,0.12) !important;
  box-shadow: 0 8px 32px rgba(13,15,14,0.2) !important;
}
.scroll-fc-title { color: var(--awan-text); }
.scroll-fc-desc { color: var(--awan-text-muted); }
.scroll-fc-category { color: var(--awan-text-muted); }
.scroll-fc-stat-label { color: var(--awan-text); }
.scroll-fc-stat-value { color: var(--awan-accent); }
.scroll-fc-brands-text { color: var(--awan-text); }
.scroll-fc-brands-title { color: var(--awan-accent); }

/* ── Lightbox ───────────────────────────────────────────────── */
.lightbox-overlay { background: rgba(13,15,14,0.92); }
.lightbox-close { color: var(--awan-text-on-accent); }

/* ── Inputs / forms ─────────────────────────────────────────── */
input, textarea, select {
  background: var(--awan-surface) !important;
  border-color: var(--awan-border) !important;
  color: var(--awan-text) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--awan-accent) !important;
  box-shadow: 0 0 0 3px rgba(190,84,46,0.12) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder {
  color: var(--awan-text-muted) !important;
}

/* ── Cart page ──────────────────────────────────────────────── */
.cart-page,
.cart-summary,
.cart-item {
  background: var(--awan-bg) !important;
  border-color: var(--awan-border) !important;
  color: var(--awan-text) !important;
}
.cart-total-label { color: var(--awan-text-muted); }
.cart-total-value { color: var(--awan-text); }
.checkout-btn {
  background: var(--awan-accent);
  color: var(--awan-text-on-accent);
  border-color: var(--awan-accent);
}
.checkout-btn:hover {
  background: var(--awan-accent-hover) !important;
}

/* ── Modals / drawers ───────────────────────────────────────── */
.modal,
.drawer,
.overlay-panel {
  background: var(--awan-bg) !important;
  border-color: var(--awan-border) !important;
  color: var(--awan-text) !important;
}
.modal-overlay { background: rgba(13,15,14,0.55) !important; }

/* ── Badges / pills ─────────────────────────────────────────── */
.badge-sale,
.badge-new,
.discount-badge {
  background: var(--awan-accent) !important;
  color: var(--awan-text-on-accent) !important;
}
.badge-out-of-stock {
  background: var(--awan-text-muted);
  color: var(--awan-text-on-accent);
}

/* ── Links ──────────────────────────────────────────────────── */
.apd-details a { color: var(--awan-accent) !important; }
.apd-details a:hover { color: var(--awan-accent-hover) !important; }

/* Exception: nav/header links */
header a,
nav a,
.navbar a {
  color: var(--awan-text) !important;
}
/* Footer links — cream on dark bg */
#footer.awan-footer a { color: rgba(233,230,215,0.6); }
#footer.awan-footer a:hover { color: var(--awan-accent) !important; }
#footer.awan-footer .awan-footer-social a { color: rgba(233,230,215,0.5); }
#footer.awan-footer .awan-footer-social a:hover { color: var(--awan-text-on-accent) !important; }
#footer.awan-footer .awan-footer-col h4,
#footer.awan-footer .awan-footer-contact-col h4 { color: rgba(233,230,215,0.35); }
#footer.awan-footer .awan-footer-col li a { color: rgba(233,230,215,0.65); }
#footer.awan-footer .awan-footer-col li a:hover { color: var(--awan-text-on-accent) !important; }
#footer.awan-footer .awan-footer-contact-link { color: rgba(233,230,215,0.55); }
#footer.awan-footer .awan-footer-contact-link:hover { color: var(--awan-text-on-accent) !important; }
#footer.awan-footer .awan-footer-tagline { color: rgba(233,230,215,0.35); }
#footer.awan-footer .awan-footer-copy { color: rgba(233,230,215,0.25); }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar-track { background: var(--awan-bg) !important; }
::-webkit-scrollbar-thumb { background: var(--awan-border) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--awan-text-muted) !important; }

/* ── Selection ──────────────────────────────────────────────── */
::selection {
  background: rgba(190,84,46,0.18) !important;
  color: var(--awan-text) !important;
}

/* ── Suppress any remaining dark backgrounds ────────────────── */
.dark,
[data-theme="dark"],
.bg-dark,
.bg-black {
  background-color: var(--awan-text-on-accent) !important;
  color: var(--awan-text) !important;
}

/* ── Nuclear overrides: beats Zid base styles.css ──────────── */
html { background-color: var(--awan-text-on-accent) !important; }
body, body * { box-sizing: border-box; }

/* Zid injects these class names on its wrapper elements */
.page-wrapper, .page-content, .main-content,
.vitrin-page, .index-page, .product-page,
.index-content, .index-content__section,
[class*="page-"], [class*="section-"] {
  background-color: inherit !important;
}

/* All sections default cream */
section:not(.scroll-animation):not(.scroll-animation__sticky) {
  background-color: var(--awan-text-on-accent) !important;
  color: var(--awan-text) !important;
}

/* Dark community / CTA sections — flip to cream with dark text */
[class*="community"], [class*="cta-dark"], [class*="dark-section"],
[class*="bg-dark"], [class*="bg-black"],
.section-dark, .cta-section, .community-section {
  background-color: var(--awan-surface) !important;
  color: var(--awan-text) !important;
}
[class*="community"] h1, [class*="community"] h2,
[class*="community"] h3, [class*="community"] p,
[class*="cta-dark"] h1, [class*="cta-dark"] h2,
[class*="cta-dark"] p {
  color: var(--awan-text) !important;
}
[class*="community"] button,
[class*="cta-dark"] button,
[class*="community"] a.btn,
[class*="cta-dark"] a.btn {
  background: var(--awan-accent) !important;
  color: var(--awan-text-on-accent) !important;
  border-color: var(--awan-accent) !important;
}

/* All CTA/primary buttons → burnt orange */
button[class*="primary"], button[class*="cta"], button[class*="buy"],
a[class*="primary"], a[class*="cta"], a[class*="buy"],
.btn-primary, .btn-cta, .buy-btn {
  background: var(--awan-accent) !important;
  color: var(--awan-text-on-accent) !important;
  border-color: var(--awan-accent) !important;
}
button[class*="primary"]:hover, .btn-primary:hover {
  background: var(--awan-accent-hover) !important;
}

/* Kill any pure white or pure black backgrounds */
*[style*="background:#fff"],
*[style*="background: #fff"],
*[style*="background-color:#fff"],
*[style*="background-color: #fff"],
*[style*="background:#ffffff"],
*[style*="background: #ffffff"] {
  background-color: var(--awan-text-on-accent) !important;
}
*[style*="background:#000"],
*[style*="background: #000"],
*[style*="background:#000000"],
*[style*="background:#171717"],
*[style*="background:#1a1a1a"],
*[style*="background:#0a0a0a"] {
  background-color: var(--awan-text) !important;
}

/* Logo and branded orange text */
[class*="logo"] [class*="brand"],
[class*="logo"] span,
.site-logo span,
.logo-text {
  color: var(--awan-accent) !important;
}

/* Price highlights */
[class*="price"], .price, [class*="Price"] {
  color: var(--awan-accent) !important;
}

/* Announcement bar — keep accent bg */
.awan-announcement-bar {
  background: var(--ann-bg, var(--awan-accent)) !important;
  color: var(--ann-color, var(--awan-bg)) !important;
}

/* Navigation links */
.main-header a, .main-header button,
nav a, .navbar a {
  color: var(--awan-text) !important;
}
.main-header a:hover, nav a:hover { color: var(--awan-accent) !important; }

/* Zid Vitrin base overrides */
.vitrin-container, .vitrin-section, .vitrin-row {
  background-color: transparent !important;
}

/* Input focus rings */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--awan-accent) !important;
  outline-offset: 0;
  border-color: var(--awan-accent) !important;
}

/* Checkboxes / radios */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: var(--awan-accent) !important;
}

/* Hero loading bar */
.scroll-animation__loading-fill {
  background: var(--awan-accent) !important;
}

/* Products grid section */
.products-section, .products-grid-section {
  background: var(--awan-bg) !important;
}
.product-card, [class*="product-card"] {
  background: var(--awan-surface) !important;
  border-color: var(--awan-border) !important;
  color: var(--awan-text) !important;
}

/* Category / blog cards */
.category-card, .blog-card {
  background: var(--awan-surface) !important;
  border-color: var(--awan-border) !important;
}

/* Breadcrumb */
.breadcrumb, [class*="breadcrumb"] {
  color: var(--awan-text-muted) !important;
  background: transparent !important;
}
[class*="breadcrumb"] a { color: var(--awan-text-muted) !important; }
[class*="breadcrumb"] a:hover { color: var(--awan-accent) !important; }

/* Toast / notifications */
.toast, .notification, [class*="toast"], [class*="notification"] {
  background: var(--awan-surface) !important;
  border-color: var(--awan-border) !important;
  color: var(--awan-text) !important;
}

/* Footer — dark override handled in footer.jinja directly */
#footer.awan-footer {
  background: var(--awan-footer-bg);
  color: rgba(233,230,215,0.7);
}

/* ── Header Component ──────────────────────────────────────────────────── */
.main-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  width: 100%;
  height: 5rem;
  padding-inline: 2rem 1.5rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--awan-bg);
  box-shadow: var(--awan-shadow);
}
.dark .main-header {
  background: var(--awan-bg);
  border-block-end: 1px solid var(--awan-border);
}
.main-header__start {
  display: flex;
  align-items: center;
}
.main-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.main-header__logo img {
  height: 2rem;
  width: auto;
  display: block;
}
.main-header__end {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: var(--awan-radius-pill);
  text-decoration: none;
  color: var(--awan-text);
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background var(--awan-transition);
  flex-shrink: 0;
}
.header-icon-btn:hover {
  background: var(--awan-surface);
}
.header-icon-btn:focus-visible {
  outline: 2px solid var(--awan-accent);
  outline-offset: 2px;
}
.header-cart-badge {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: -2px;
  background: var(--awan-accent);
  color: var(--awan-text-on-accent);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--awan-radius-pill);
  height: 1.1rem;
  width: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-cart-badge.is-hidden {
  display: none;
}
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  height: 2.5rem;
  min-width: 2.5rem;
  padding-inline: 0.5rem;
  border-radius: var(--awan-radius-pill);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--awan-text);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--awan-font);
  transition: background var(--awan-transition);
}
.lang-toggle:hover {
  background: var(--awan-surface);
}
.lang-toggle:focus-visible {
  outline: 2px solid var(--awan-accent);
  outline-offset: 2px;
}
.header-shop-btn {
  height: 2.5rem;
  padding-inline: 1.25rem;
  border-radius: var(--awan-radius-pill);
  border: 2px solid var(--awan-accent);
  background: var(--awan-accent);
  color: var(--awan-text-on-accent);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--awan-font);
  transition: background var(--awan-transition), border-color var(--awan-transition);
}
.header-shop-btn:hover {
  background: var(--awan-accent-hover);
  border-color: var(--awan-accent-hover);
}
.header-shop-btn:focus-visible {
  outline: 2px solid var(--awan-accent);
  outline-offset: 2px;
}
.header-spacer {
  height: 5rem;
}

/* ── Product Page Utilities ── */
.apd-btn-cart--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.apd-icon--hidden {
  display: none;
}

/* ── Focus States (Accessibility) ── */
.apd-btn-cart:focus-visible,
.apd-btn-buynow:focus-visible,
.apd-tab-btn:focus-visible,
.apd-pill-trigger:focus-visible,
.apd-pill-bundle:focus-visible,
.apd-gallery-thumb:focus-visible,
.apd-pill-qty-btn:focus-visible {
  outline: 2px solid var(--awan-accent);
  outline-offset: 2px;
}

/* ── Announcement Bar Link ── */
.awan-ann-link {
  color: inherit;
  text-decoration: none;
}
.awan-ann-link-text {
  text-decoration: underline;
  margin-inline-start: 0.5em;
}