/* ==================================================================
   ASCORO - theme layer (loaded after style.css)
   Brand: green #294635 (Pantone 553 C) · gold #BD965C (465 C)
          taupe #A7A089 (7536 C) · ivory #F6F3EC
   Layout: ivory header with logo on the left, green menu bar,
   arched category cards, borderless product cards, square buttons.
   ================================================================== */
:root {
  --as-green:  var(--maroon, #294635);
  --as-gold:   var(--gold, #BD965C);
  --as-taupe:  #A7A089;
  --as-ivory:  #F6F3EC;
  --as-sand:   #EFEBE1;
  --as-ink:    #1E2B23;
  --as-serif:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --as-sans:   'Jost', 'Inter', system-ui, sans-serif;
  --charcoal:  #1E2B23;
}

/* ---------- Typography ---------- */
body { font-family: var(--as-sans); color: var(--as-ink); background: #fff; letter-spacing: .1px; }
h1, h2, h3, .section-header h2, .hero-content h1, .logo-text,
[style*="Playfair Display"] { font-family: var(--as-serif) !important; }
.section-header h2 { font-weight: 500 !important; font-size: clamp(30px, 4vw, 44px) !important; color: var(--as-green) !important; letter-spacing: .5px; }

/* ---------- Buttons: square, spaced capitals ---------- */
.btn { border-radius: 0 !important; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; font-size: 12.5px; padding: 14px 30px; }
.btn-primary { background: var(--as-green); color: #fff; }
.btn-primary:hover { background: #1c3326; box-shadow: none; transform: none; }
.btn-gold { background: var(--as-gold); color: #fff; }
.btn-gold:hover { background: #a9834c; box-shadow: none; transform: none; }
.btn-outline { border: 1px solid var(--as-green) !important; color: var(--as-green); }
.btn-outline:hover { background: var(--as-green); color: #fff; }

/* ---------- Top bar ---------- */
.site-topbar { background: var(--as-taupe) !important; height: 34px; }
.tb-item { color: #fff !important; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; font-size: 11px; }
.tb-item i { color: #fff !important; }
.tb-item::after { content: '·' !important; color: #fff !important; font-size: 16px !important; }

/* ---------- Header: logo LEFT · search CENTRE · icons RIGHT ---------- */
.site-header { background: var(--as-ivory) !important; border-bottom: none !important; box-shadow: none !important; }
.header-inner-new { grid-template-columns: auto 1fr auto !important; height: 92px !important; gap: 40px; max-width: 1280px !important; }
.header-center { order: -1; justify-content: flex-start !important; }
.header-left { justify-content: center; }
.header-search-form {
  width: 100%; max-width: 440px; min-width: 0 !important;
  background: transparent !important; border: none !important; border-bottom: 1px solid #cfc8b6 !important;
  border-radius: 0 !important; padding: 0 !important;
}
.header-search-form input { width: 100% !important; font-size: 14px !important; padding: 10px 6px !important; }
.header-search-form button { color: var(--as-green) !important; }
.icon-btn { color: var(--as-green) !important; font-size: 17px; }
.icon-btn:hover { background: var(--as-sand) !important; }
.icon-btn .badge { background: var(--as-gold) !important; }
.logo-text { color: var(--as-green) !important; font-weight: 500 !important; letter-spacing: 8px !important; }

/* Menu bar */
#catNav { background: var(--as-green) !important; border: none !important; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.cat-nav-item > a {
  font-family: var(--as-sans) !important; font-weight: 500 !important; letter-spacing: 2.2px !important;
  font-size: 11.5px !important; color: var(--as-ivory) !important; border-bottom-width: 1px !important;
}
.cat-nav-item > a:hover, .cat-nav-item > a.active { color: var(--as-gold) !important; border-bottom-color: var(--as-gold) !important; }
.cat-sub-dropdown { border-radius: 0 !important; border-top: 2px solid var(--as-gold) !important; }

/* Mobile header */
@media (max-width: 768px) {
  .header-inner-new { height: 64px !important; gap: 10px; grid-template-columns: 1fr auto !important; }
  .header-left { display: none !important; }
  .mobile-menu-bar { background: var(--as-green) !important; height: 46px !important; }
  .mobile-bar-logo { font-family: var(--as-sans) !important; font-weight: 500 !important; font-size: 12px !important;
                     letter-spacing: 3px; text-transform: uppercase; color: var(--as-ivory) !important; }
  .mobile-search-bar { background: var(--as-ivory) !important; }
}

/* ---------- Hero ---------- */
.hero { background: var(--as-green) !important; min-height: 640px !important; }
.hero-slide { min-height: 640px; }
.hero-dot { width: 26px !important; height: 2px !important; border-radius: 0 !important; background: rgba(255,255,255,.45) !important; }
.hero-dot.active { width: 46px !important; background: var(--as-gold) !important; }
.hero-arrow { border-radius: 0 !important; background: transparent !important; border: 1px solid rgba(255,255,255,.5) !important; }
.hero-arrow:hover { background: rgba(255,255,255,.12) !important; }
.hero-content h1 { font-weight: 500 !important; letter-spacing: 1px; }
@media (max-width: 1100px) { .hero, .hero-slide { min-height: 520px !important; } }
@media (max-width: 768px)  { .hero, .hero-slide { min-height: 0 !important; } }

/* ---------- Features: ivory band with thin dividers ---------- */
.features-strip { background: var(--as-ivory) !important; padding: 26px 0 !important; border-bottom: 1px solid #e4dfd2; }
.features-grid { gap: 0 !important; }
.feature-item { color: var(--as-ink) !important; padding: 6px 24px; border-right: 1px solid #ddd6c6; justify-content: center; }
.feature-item:last-child { border-right: none; }
.feature-icon { background: transparent !important; border: 1px solid var(--as-gold); border-radius: 50% !important; width: 46px !important; height: 46px !important; }
.feature-icon i { color: var(--as-gold) !important; font-size: 17px !important; }
.feature-item h4 { font-weight: 500 !important; letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px !important; color: var(--as-green); }
.feature-item p { color: #7d7869 !important; }
@media (max-width: 768px) {
  .feature-item { border-right: none; padding: 6px 4px; justify-content: flex-start; }
}

/* ---------- Section headings: eyebrow ornament ---------- */
.section { padding: 80px 0 !important; }
.section-header { margin-bottom: 44px !important; }
.section-header p { color: #8a8576 !important; font-size: 14px !important; letter-spacing: .3px; }
.section-header .divider {
  width: 120px !important; height: 12px !important; border-radius: 0 !important; margin: 16px auto 0 !important;
  background:
    linear-gradient(var(--as-gold), var(--as-gold)) left center / 48px 1px no-repeat,
    linear-gradient(var(--as-gold), var(--as-gold)) right center / 48px 1px no-repeat !important;
  position: relative;
}
.section-header .divider::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  background: var(--as-gold); transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------- Categories: arched cards, name below ---------- */
.cat-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important; gap: 28px 22px !important; }
.cat-card {
  border-radius: 200px 200px 0 0 !important; box-shadow: none !important; overflow: visible !important;
  aspect-ratio: auto !important; height: auto !important; background: transparent !important;
}
.cat-card:hover { transform: none !important; box-shadow: none !important; }
.cat-media {
  display: block; position: relative; border-radius: 200px 200px 0 0; overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--as-sand);
}
.cat-card { position: relative; }
.cat-card::after {                       /* thin arched frame around the image */
  content: ''; position: absolute; left: -7px; right: -7px; top: -7px;
  aspect-ratio: 3 / 4; height: auto; border: 1px solid #d9d1bd; border-bottom: none;
  border-radius: 210px 210px 0 0; pointer-events: none;
}
.cat-media img { transition: transform .6s ease !important; }
.cat-card:hover .cat-media img { transform: scale(1.06); }
.cat-media .cat-card-bg { position: absolute; inset: 0; background: var(--as-sand) !important; }
.cat-media .cat-card-bg i { color: var(--as-taupe) !important; }
.cat-overlay { position: static !important; background: none !important; padding: 16px 0 0 !important; text-align: center; display: block !important; }
.cat-name {
  color: var(--as-green) !important; font-family: var(--as-serif) !important; font-size: 19px !important;
  font-weight: 600 !important; letter-spacing: .5px !important; text-shadow: none !important;
}
@media (max-width: 600px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 14px !important; }
  .cat-name { font-size: 16px !important; }
}

/* ---------- Product cards: borderless, quiet ---------- */
.products-grid { gap: 36px 26px !important; }
.product-card { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; }
.product-card:hover { box-shadow: none !important; transform: none !important; }
.product-img { background: var(--as-sand) !important; border-radius: 0 !important; padding-top: 125% !important; }
.product-card:hover .product-img img { transform: scale(1.04) !important; }
.product-thumbs { display: none !important; }            /* cleaner cards, fewer images to load */
.product-info { padding: 14px 2px 0 !important; text-align: center; }
.product-cat { color: var(--as-taupe) !important; letter-spacing: 2px !important; font-size: 10.5px !important; }
.product-name { font-family: var(--as-serif) !important; font-size: 19px !important; font-weight: 600 !important; line-height: 1.25 !important; }
.product-name a { color: var(--as-ink) !important; }
.product-name a:hover { color: var(--as-green) !important; }
.product-price { justify-content: center; }
.price-current { color: var(--as-green) !important; font-weight: 600 !important; }
.price-disc { background: transparent !important; color: var(--as-gold) !important; border: 1px solid var(--as-gold); border-radius: 0 !important; }
.badge-new, .badge-sale { border-radius: 0 !important; letter-spacing: 1.5px; font-weight: 600 !important; }
.badge-new  { background: var(--as-green) !important; }
.badge-sale { background: var(--as-gold) !important; }
.wish-btn { border-radius: 50% !important; background: #fff !important; color: var(--as-green) !important; box-shadow: none !important; }
.wish-btn:hover { background: var(--as-green) !important; color: #fff !important; }
/* Quick add: full-width bar sliding up on hover */
.quick-add-btn {
  left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: 42px !important;
  border-radius: 0 !important; background: var(--as-green) !important; font-size: 0 !important;
}
.quick-add-btn::before { content: 'Add to Cart'; font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 500; }
.quick-add-btn i { font-size: 12px !important; margin-right: 8px; }
.quick-add-btn:hover { background: #1c3326 !important; transform: none !important; }
@media (hover: none) { .quick-add-btn { opacity: 1 !important; transform: none !important; height: 36px !important; } }
@media (max-width: 600px) {
  .products-grid { gap: 26px 12px !important; }
  .product-name { font-size: 16px !important; }
}

/* ---------- Offer band & newsletter ---------- */
section[style*="--footer-bg"], section[style*="var(--footer-bg)"] { background: var(--as-green) !important; }
section[style*="var(--footer-bg)"] h2 { font-weight: 500 !important; }
.newsletter-section { background: var(--as-sand) !important; }
.newsletter-section h3 { color: var(--as-green) !important; font-family: var(--as-serif) !important; font-weight: 500 !important; font-size: 34px !important; }
.newsletter-section p { color: #6f6a5c !important; }
.newsletter-section input { border-radius: 0 !important; border: 1px solid #cfc8b6 !important; background: #fff !important; }
.newsletter-section button { border-radius: 0 !important; background: var(--as-green) !important; color: #fff !important; letter-spacing: 2px; text-transform: uppercase; }

/* ---------- Footer ---------- */
.site-footer { background: var(--as-green) !important; }
.footer-heading { color: var(--as-gold) !important; letter-spacing: 2.5px !important; font-weight: 500 !important; }
.footer-links a { color: rgba(246,243,236,.85) !important; }
.footer-links a:hover { color: var(--as-gold) !important; }
.footer-logo-img { max-height: 42px; width: auto; display: block; margin-bottom: 10px; }

/* ---------- Product page ---------- */
.pd-main-img-wrap { border-radius: 0 !important; background: var(--as-sand) !important; }
.pd-thumb-item { border-radius: 0 !important; }
.pd-info h1 { font-weight: 500 !important; font-size: clamp(28px, 3.4vw, 40px) !important; color: var(--as-ink) !important; }
.pd-buy-btn { background: var(--as-gold) !important; }
.pd-cart-btn { background: var(--as-green) !important; }
.qty-control { border-radius: 0 !important; }

/* ---------- Small details ---------- */
::selection { background: var(--as-gold); color: #fff; }
.toast, #toast { border-radius: 0 !important; }

/* thin gold rule under the menu bar, separates it from green banners */
#catNav { border-bottom: 1px solid rgba(189,150,92,.55) !important; }

/* sale badge on the product photo: brand gold instead of red */
.pd-main-img-wrap span[style*="var(--red)"] { background: var(--as-gold) !important; border-radius: 0 !important; }
.pd-main-img-wrap span[style*="var(--gold)"] { background: var(--as-green) !important; border-radius: 0 !important; }
.page-banner { background: linear-gradient(135deg, #294635 0%, #1c3326 100%) !important; }
.page-banner h1 { font-weight: 500 !important; }

/* ---------- Slider text on the LEFT (lines up with the logo) ---------- */
.hero-slide > .container.hero-content,
.hero-slide .hero-content { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; text-align: left; }
.hero-content > * { max-width: 600px; margin-left: 0 !important; margin-right: auto !important; }
.hero-content > div[style*="display:flex"] { justify-content: flex-start !important; }
@media (min-width: 769px) {
  .hero-content { padding-left: 24px !important; padding-right: 24px !important; }
  /* soft shade on the left so text is readable on any banner photo */
  .hero-slide.has-text::after, .hero-slide:not(.has-img)::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(20,38,28,.72) 0%, rgba(20,38,28,.35) 45%, rgba(20,38,28,0) 75%);
  }
  .hero-content { z-index: 2; }
}