/* ═══════════════════════════════════════════════════════════════
   CLOTYA THEME LAYER — Arden's Print
   Layout/system from KLBTheme Clotya; brand color from logo:
   Primary #FBB62F (HSL 40° 96% 58%)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --color-background: #ffffff;
  --color-background-light: #fafafa;
  --color-text: #000000;
  --color-text-desc: #75767c;

  /* Brand gold — logo #FBB62F */
  --color-primary: #FBB62F;
  --color-primary-hover: #E09A12;
  --color-primary-deep: #C4860E;
  --color-primary-pale: #FEF6E0;
  --color-primary-ink: #1A1A1A; /* text on gold — better contrast than white */

  --color-success: #47b486;
  --color-success-dark: #287c58;
  --color-success-light: #c9e3d8;
  --color-warning: #FBB62F;
  --color-warning-light: #FEF6E0;
  --color-danger: #f4344f;
  --color-info: #aeb9be;
  --color-border: #dee0ea;
  --color-form-border: #ddd;
  --color-form-active: #8f8f8f;
  --color-form-placeholder: #75767c;

  --color-dark: #000000;
  --color-dark-2: #1a1a1a;
  --color-dark-3: #2a2a2a;
  --color-accent: #FBB62F;
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-text-secondary: #75767c;
  --color-green: #FBB62F;
  --gold: #FBB62F;
  --gold-h: #E09A12;
  --gold-pale: #FEF6E0;
  --gold-glow: rgba(251, 182, 47, 0.18);
  --dark: #000000;
  --dark2: #1a1a1a;
  --dark3: #2a2a2a;
  --offwhite: #fafafa;
  --border: #dee0ea;

  --font-primary: "Jost", sans-serif;
  --font-secondary: "Jost", sans-serif;
  --font-head: "Jost", sans-serif;
  --font-body: "Jost", sans-serif;
  --bs-font-sans-serif: "Jost", sans-serif;
  --bs-body-font-family: "Jost", sans-serif;

  --size-site-width: 1290px;
  --size-form-height: 42px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}

/* ── Base ── */
body {
  font-family: var(--font-body) !important;
  color: var(--color-text);
  background: var(--color-background);
}
input, select, textarea, button, optgroup { font-family: inherit; }

h1, h2, h3, h4, h5, h6,
.fw-bold, .fw-700, .fw-600, .nav-link-main, .btn, button {
  font-family: var(--font-head) !important;
}

.site-container {
  max-width: var(--size-site-width) !important;
}

/* ── Global CTA (gold + dark ink for contrast) ── */
.cus-btn,
.btn-gold {
  background: var(--color-primary) !important;
  color: var(--color-primary-ink) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-primary) !important;
  font-weight: 700;
  border: none;
  box-shadow: none !important;
}
.cus-btn:hover,
.btn-gold:hover {
  background: var(--color-primary-hover) !important;
  color: var(--color-primary-ink) !important;
  transform: none;
}
.btn-primary-custom {
  background: #000 !important;
  color: #fff !important;
  border-radius: var(--radius-md) !important;
}
.btn-primary-custom:hover {
  background: var(--color-primary) !important;
  color: var(--color-primary-ink) !important;
}

.bg-color-primary { background: var(--color-primary) !important; }

/* ══════════════════════════════════════════
   HEADER — Clotya-style clean commerce nav
══════════════════════════════════════════ */
.main-navbar {
  box-shadow: none !important;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-primary) !important;
}

.navbar-promo-bar {
  background: #000 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: "Jost", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  letter-spacing: 0 !important;
  padding: 12px 0 !important;
}
.navbar-promo-bar a {
  color: #fff !important;
  font-family: inherit;
  font-weight: 500 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.navbar-promo-bar a:hover { color: var(--color-primary) !important; }
.navbar-promo-bar strong { color: #fff; font-weight: 500; }

.header-search-dropdown {
  border-radius: 0 !important;
  border-color: var(--color-border) !important;
}
.header-search-dropdown .sr-item:hover,
.header-search-dropdown .sr-item.active {
  background: var(--color-primary-pale) !important;
}
.header-search-dropdown .sr-price,
.header-search-dropdown .sr-footer a {
  color: var(--color-primary) !important;
}

/* Nav row — Clotya uses light bar + black links */
.navbar-nav-row {
  background: #fff !important;
  border-bottom: 1px solid var(--color-border);
}
.nav-link-main {
  color: #000 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase;
  padding: 14px 16px !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}
.nav-link-main:hover,
.nav-link-main.active-nav {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
  background: transparent !important;
}

/* Contact CTA — keep dark pill (overrides transparent nav links above) */
.nav-item-wrap.nav-contact .nav-link-main {
  color: #fff !important;
  background: #1c1d1f !important;
  border-bottom: none !important;
  padding: 9px 18px !important;
  font-weight: 700 !important;
}
.nav-item-wrap.nav-contact .nav-link-main:hover,
.nav-item-wrap.nav-contact .nav-link-main.active-nav {
  color: #111 !important;
  background: #FBB62F !important;
  border-bottom: none !important;
}
.nav-item-wrap.nav-contact .nav-link-main i {
  color: #FBB62F !important;
}
.nav-item-wrap.nav-contact .nav-link-main:hover i,
.nav-item-wrap.nav-contact .nav-link-main.active-nav i {
  color: #111 !important;
}
.nav-link-main .nav-chevron { color: #999 !important; }
.nav-item-wrap:hover .nav-link-main .nav-chevron,
.nav-item-wrap.open .nav-link-main .nav-chevron {
  color: var(--color-primary) !important;
}

.mega-panel,
.shop-mega-panel,
.nav-dropdown {
  border-top: 2px solid var(--color-primary) !important;
  border-radius: 0 !important;
}
.mega-card:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 6px 20px rgba(251, 182, 47, 0.12) !important;
}
.mega-card-arrow,
a.mega-group-title:hover,
.mega-child-list li a:hover,
.shop-mega-viewall:hover,
.nav-dropdown a:hover,
.user-dropdown-menu a:hover,
.user-dropdown-menu button:hover,
.mob-nav-link:hover,
.mob-nav-link.active-nav,
.mob-sub-link:hover,
.mob-sub-more {
  color: var(--color-primary) !important;
}
.mega-child-list li a:hover { background: var(--color-primary-pale) !important; }
.nav-dropdown a:hover,
.user-dropdown-menu a:hover,
.user-dropdown-menu button:hover,
.mob-nav-link:hover,
.mob-sub-link:hover {
  background: var(--color-primary-pale) !important;
}
.badge-easy { background: var(--color-primary-pale) !important; color: var(--color-primary) !important; }
.mega-card-img-placeholder {
  background: linear-gradient(135deg, var(--color-primary-pale), #fff) !important;
  color: var(--color-primary) !important;
}
.shop-mega-panel a:focus-visible {
  outline-color: var(--color-primary) !important;
}

.mob-nav-link[aria-expanded="true"] .mob-chevron { color: var(--color-primary) !important; }

/* ══════════════════════════════════════════
   CART DRAWER
══════════════════════════════════════════ */
#sidebar-cart .fa-shopping-bag { color: var(--color-primary) !important; }
#cartTotal,
#sidebar-cart a[href*="checkout"] {
  color: #fff;
}
#cartTotal { color: var(--color-primary) !important; }

/* ══════════════════════════════════════════
   PRODUCT CARDS — Clotya thumbnail style
══════════════════════════════════════════ */
.product-card-item {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.product-card-item:hover {
  box-shadow: none !important;
}
.product-card-image-wrap {
  background: var(--color-background-light) !important;
  margin-bottom: 12px;
}
.card-action-overlay {
  background: rgba(255, 255, 255, 0.92) !important;
  border-top: none !important;
  box-shadow: none !important;
}
.card-action-btn {
  text-transform: uppercase;
  font-weight: 600 !important;
  letter-spacing: 0.8px;
  font-size: 12px !important;
  color: #000 !important;
}
.card-action-btn:hover {
  background: var(--color-primary) !important;
  color: var(--color-primary-ink) !important;
}
.sale-badge {
  background: var(--color-primary) !important;
  color: var(--color-primary-ink) !important;
  left: 10px !important;
  top: 10px !important;
  transform: none !important;
  padding: 4px 10px !important;
  border-radius: 0 !important;
  font-weight: 700;
}
.wishlist-btn:hover,
.wishlist-btn.active,
.wishlist-btn[data-wishlisted="true"] i {
  color: var(--color-primary) !important;
}
.price-value { color: #000 !important; font-weight: 600 !important; }
.product-card-brand-name {
  color: var(--color-text-desc) !important;
  font-weight: 500 !important;
}
.product-card-title-link:hover { color: var(--color-primary) !important; }

/* ══════════════════════════════════════════
   HOME — Clotya fashion commerce tone
══════════════════════════════════════════ */
.home-hero {
  background: var(--color-background-light) !important;
  background-image: none !important;
}
.home-hero::after { display: none !important; }

.hero-headline { color: #000 !important; letter-spacing: -0.5px !important; }
.hero-headline .gold-word { color: var(--color-primary) !important; }

.hero-subheadline {
  color: var(--color-text-desc) !important;
  font-family: var(--font-primary) !important;
}

.hero-badge {
  background: var(--color-primary-pale) !important;
  border-color: rgba(251, 182, 47, 0.35) !important;
  color: var(--color-primary) !important;
  border-radius: 0 !important;
}
.hero-badge .badge-dot { background: var(--color-primary) !important; }

.hero-chip {
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  color: #000 !important;
  border-radius: 0 !important;
}
.hero-chip i { color: var(--color-primary) !important; }
.hero-chip:hover {
  background: var(--color-primary-pale) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.btn-dark-outline {
  color: #000 !important;
  border-color: #000 !important;
  border-radius: 0 !important;
}
.home-hero .btn-dark-outline {
  color: #000 !important;
  border-color: #000 !important;
}
.home-hero .btn-dark-outline:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: var(--color-primary-pale) !important;
}
.btn-gold,
.btn-dark-solid {
  border-radius: 0 !important;
}

.sec-eyebrow {
  color: var(--color-primary) !important;
  font-family: var(--font-primary) !important;
}
.sec-title { font-weight: 500 !important; }
.sec-sub {
  color: var(--color-text-desc) !important;
  font-family: var(--font-primary) !important;
}

.cat-tile { border-radius: 0 !important; overflow: hidden; }
.cat-tile-label { font-family: var(--font-primary); font-weight: 500; }

/* ══════════════════════════════════════════
   SHOP
══════════════════════════════════════════ */
.shop-page { background: #fff !important; }
/* Page banner — light grey gradient to match the shop filter header */
.page-banner {
  position: relative;
  overflow: hidden;
  padding: 38px 0 32px !important;
  background: linear-gradient(135deg, #f8f8f9 0%, #ececee 100%) !important;
  border-bottom: 1px solid var(--color-border);
}
.page-banner::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -4%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,175,28,0.18) 0%, rgba(251,175,28,0) 65%);
  pointer-events: none;
}
.page-banner::after {
  display: block !important;
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(28,29,31,0.07) 1px, transparent 1px) !important;
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 45%, #000 100%);
  pointer-events: none;
}
.page-banner .banner-content { position: relative; z-index: 1; }
.page-banner h1,
.page-banner h1.text-white {
  color: #1c1d1f !important;
  font-family: 'Jost', sans-serif;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin-bottom: 12px !important;
}
.page-banner h1::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 10px;
  border-radius: 3px;
  background: #FBAF1C;
}
.page-banner nav { font-size: 13px; }
.page-banner .breadcrumb-item a { color: #75767c !important; transition: color 0.2s; }
.page-banner .breadcrumb-item a:hover { color: #E09A12 !important; }
.page-banner .breadcrumb-item.active { color: #1c1d1f; font-weight: 500; }
.page-banner .breadcrumb-separator { color: #c4c5ca; }
.breadcrumb-item a { color: var(--color-primary) !important; }

.shop-sidebar {
  border-radius: 0 !important;
  border-color: var(--color-border) !important;
  box-shadow: none !important;
}
.sidebar-header {
  background: linear-gradient(135deg, #f8f8f9 0%, #ececee 100%) !important;
  border-bottom: 1px solid var(--color-border);
}
.sidebar-header h6 i,
.filter-section-title .title-left i { color: var(--color-primary) !important; }
.filter-section-title .active-badge {
  background: var(--color-primary) !important;
}

/* ══════════════════════════════════════════
   AUTH / MISC
══════════════════════════════════════════ */
.navbar a:hover { color: var(--color-primary) !important; }
.navbar .nav-link.active-page { color: var(--color-primary) !important; }

.back-to-top {
  background: var(--color-primary) !important;
  border-radius: 0 !important;
}

/* Form focus */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(251, 182, 47, 0.12) !important;
}