/* =============================================================================
   ASTRA DARK OVERRIDE  –  Astra Child Hossam
   Location: /wp-content/themes/astra-child-hossam/assets/css/astra-dark-override.css

   This file forces the dark theme onto ALL Astra page containers,
   fixes the My Account wider layout, and styles both shortcodes.

   01. Force dark on all Astra containers
   02. Force dark on Elementor containers
   03. My Account – wider logged-in layout
   04. Shortcode: [dark_featured_products]
   05. Shortcode: [dark_shop_grid]
   06. Shop Shortcode Sidebar / Filters
   07. Shop Shortcode Product Cards
   08. Shared Pagination
   09. Responsive
   ============================================================================= */

/* ─── COLOR PALETTE (matches the zip files) ─────────────────────────────────
   --c-bg:         #131313   (surface / background)
   --c-bg-dark:    #0E0E0E   (surface-container-lowest)
   --c-bg-low:     #1C1B1B   (surface-container-low)
   --c-bg-high:    #2A2A2A   (surface-container-high)
   --c-surface:    #201F1F   (surface-container)
   --c-surface-var:#353534   (surface-variant / surface-container-highest)
   --c-gold:       #F2CA50   (primary)
   --c-gold-dim:   #D4AF37   (primary-container)
   --c-muted:      #99907C   (outline)
   --c-text:       #E5E2E1   (on-surface / on-background)
   --c-text-muted: #D0C5AF   (on-surface-variant)
   --c-outline:    #4D4635   (outline-variant)
   ─────────────────────────────────────────────────────────────────────────── */

/* =============================================================================
   01. FORCE DARK ON ALL ASTRA CONTAINERS
   ============================================================================= */

/* Base body */
body,
body.dark-theme {
  background-color: #131313 !important;
  color: #E5E2E1 !important;
}

/* Astra site wrappers */
#page,
.site,
#ast-page,
.hfeed { background-color: #131313 !important; }

/* All Astra content containers */
#content,
.site-content,
#ast-content-id,
.ast-content,
.ast-container,
.ast-site-content-maxwidth,
.ast-max-width-layout,
.ast-separate-container,
.ast-separate-container .site-content,
.ast-separate-container #primary,
.ast-page-builder-template .site-content,
.ast-full-width-layout .site-content,
.ast-no-sidebar,
#primary,
.site-primary,
.content-area,
main,
main#main,
main.site-main {
  background-color: #131313 !important;
  color: #E5E2E1 !important;
}

/* Astra article / post / page entry */
article,
.post,
.page,
.ast-article-post,
.ast-article-inner,
.entry,
.entry-content,
.post-content,
.page-content,
.ast-post-format- { background-color: transparent !important; color: #E5E2E1 !important; }

.ast-article-post,
.ast-article-post:last-child {
  border-bottom: 1px solid rgba(77,70,53,.2) !important;
}

/* Astra inner grid / layouts */
.ast-grid,
.ast-container-fluid,
.ast-row,
.ast-col { background-color: transparent !important; }

/* Astra Sidebar */
.secondary,
.widget-area,
.sidebar-primary,
#secondary { background-color: transparent !important; color: #E5E2E1 !important; }

/* Astra widgets */
.widget { background-color: transparent !important; color: #D0C5AF !important; }
.widget-title,
.widgettitle { font-family: 'Noto Serif', serif !important; color: #F2CA50 !important; font-size: 10px !important; letter-spacing: .3em !important; text-transform: uppercase !important; margin-bottom: 16px !important; }
.widget ul li { border-bottom: 1px solid rgba(77,70,53,.1) !important; }
.widget ul li a { color: #99907C !important; font-size: .85rem !important; transition: color .3s ease !important; }
.widget ul li a:hover { color: #F2CA50 !important; }

/* Astra page/post title */
.entry-title,
.page-title,
h1.page-title {
  font-family: 'Noto Serif', serif !important;
  color: #E5E2E1 !important;
}

/* Astra comment area */
.comment-area,
.comments-area,
#comments { background: transparent !important; color: #D0C5AF !important; }
.comment-body { background: rgba(53,53,52,.4) !important; border: 1px solid rgba(77,70,53,.2) !important; padding: 16px !important; }

/* Astra header (in case not using child header.php) */
.ast-primary-header-bar,
.site-header,
#masthead,
.ast-site-header-primary { background-color: rgba(19,19,19,.94) !important; border-bottom: 1px solid rgba(77,70,53,.2) !important; }
.ast-masthead-custom-menu-items,
.ast-site-identity a,
.ast-site-identity { color: #F2CA50 !important; }

/* Astra footer (in case not using child footer.php) */
.site-footer,
.ast-small-footer,
.ast-footer-1,
.ast-footer-2 { background-color: #0E0E0E !important; color: #99907C !important; }

/* Astra page header / banner */
.ast-breadcrumbs-wrapper,
.ast-page-header-content { background-color: #1C1B1B !important; }
.ast-breadcrumbs a { color: #99907C !important; }
.ast-breadcrumbs a:hover { color: #F2CA50 !important; }

/* Astra search form */
.search-form input[type="search"],
.ast-search-menu-icon .search-form input { background: #201F1F !important; border: 1px solid #4D4635 !important; color: #E5E2E1 !important; border-radius: 0 !important; }

/* Astra pagination */
.ast-pagination a,
.pagination a,
.nav-links a { color: #99907C !important; }
.ast-pagination .current,
.pagination .current { color: #F2CA50 !important; border-bottom: 1px solid #F2CA50 !important; }

/* General headings inside page content */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: #E5E2E1 !important;
  font-family: 'Noto Serif', serif !important;
}
.entry-content p,
.entry-content li { color: #D0C5AF !important; }
.entry-content a { color: #F2CA50 !important; }
.entry-content strong { color: #E5E2E1 !important; }
.entry-content hr { border-color: rgba(77,70,53,.3) !important; }
.entry-content table { background: transparent !important; border-color: rgba(77,70,53,.2) !important; }
.entry-content table th { background: rgba(53,53,52,.6) !important; color: #E5E2E1 !important; }
.entry-content table td { color: #D0C5AF !important; border-color: rgba(77,70,53,.15) !important; }

/* =============================================================================
   02. FORCE DARK ON ELEMENTOR CONTAINERS
   ============================================================================= */

/* Elementor section / column / container */
.elementor-section,
.elementor-column,
.elementor-widget-wrap,
.elementor-widget-container,
.e-con,
.e-con-inner,
.e-child,
.elementor-inner-section { background-color: transparent !important; }

/* Elementor typography overrides */
.elementor-heading-title { color: #E5E2E1 !important; }
.elementor-widget-text-editor,
.elementor-widget-text-editor p { color: #D0C5AF !important; }

/* Elementor divider */
.elementor-divider-separator { border-color: rgba(77,70,53,.3) !important; }

/* Elementor button */
.elementor-button { background: linear-gradient(135deg,#F2CA50 0%,#D4AF37 100%) !important; color: #1c1b1b !important; border-radius: 0 !important; }

/* Elementor form */
.elementor-form-fields-wrapper input,
.elementor-form-fields-wrapper textarea,
.elementor-form-fields-wrapper select {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #4D4635 !important;
  color: #E5E2E1 !important;
  border-radius: 0 !important;
}

/* =============================================================================
   03. MY ACCOUNT – WIDER LOGGED-IN LAYOUT
   ============================================================================= */

/* When logged in, show full-width account layout (not the narrow centered login panel) */
.logged-in .dark-account-page {
  align-items: flex-start !important;
  padding: 56px var(--px-lg, 48px) 80px !important;
  min-height: auto !important;
}

.logged-in .dark-account-container {
  max-width: var(--max-w, 1440px) !important;
  width: 100% !important;
}

/* Remove centered glass panel constraints for logged-in dashboard */
.logged-in .account-panel {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Hide the brand header (logo + "The Obsidian Atelier") when logged in */
.logged-in .account-brand-header { display: none !important; }

/* WooCommerce My Account layout – full width */
.logged-in .woocommerce-account .woocommerce {
  display: flex !important;
  gap: 40px !important;
  align-items: flex-start !important;
  width: 100% !important;
}

/* Nav column – fixed width */
.logged-in .woocommerce-account .woocommerce-MyAccount-navigation {
  width: 260px !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: calc(var(--bar-h, 40px) + var(--header-h, 80px) + 20px) !important;
}

/* Content column – fills remaining space */
.logged-in .woocommerce-account .woocommerce-MyAccount-content {
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Tablet responsive */
@media (max-width: 1023px) {
  .logged-in .dark-account-page { padding: 40px var(--px-md, 32px) 60px !important; }
  .logged-in .woocommerce-account .woocommerce { flex-direction: column !important; gap: 24px !important; }
  .logged-in .woocommerce-account .woocommerce-MyAccount-navigation { width: 100% !important; position: static !important; }
}

/* Mobile */
@media (max-width: 767px) {
  .logged-in .dark-account-page { padding: 32px var(--px-sm, 20px) 48px !important; }
}

/* =============================================================================
   04. SHORTCODE: [dark_featured_products]  (Document 21)
   ============================================================================= */
.dark-featured-products {
  padding: 80px 0;
  background: #131313;
}

.dark-fp__inner {
  max-width: var(--max-w, 1440px);
  margin: 0 auto;
  padding: 0 var(--px-lg, 48px);
}

/* Header row */
.dark-fp__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 56px;
  gap: 24px;
  flex-wrap: wrap;
}

.dark-fp__title {
  font-family: 'Noto Serif', serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: #E5E2E1;
  margin-bottom: 10px;
  letter-spacing: .03em;
}

.dark-fp__subtitle {
  font-family: 'Noto Serif', serif;
  font-style: italic;
  color: #D0C5AF;
  font-size: .95rem;
  margin: 0;
}

.dark-fp__view-all {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #F2CA50;
  border-bottom: 1px solid #F2CA50;
  padding-bottom: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .3s ease;
}
.dark-fp__view-all:hover { opacity: .7; color: #F2CA50; }

/* 4-column grid (responsive: 1 → 2 → 4) */
.dark-fp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 640px) { .dark-fp__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dark-fp__grid { grid-template-columns: repeat(4, 1fr); } }

/* Product card */
.dark-fp-card { }

/* Image wrap – 3:4 ratio with hover effects matching home.html */
.dark-fp-card__img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #1C1B1B;
  margin-bottom: 20px;
}

.dark-fp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  transition: mix-blend-mode .7s ease, transform .7s ease;
}

.dark-fp-card:hover .dark-fp-card__img {
  mix-blend-mode: normal;
  transform: scale(1.05);
}

/* Quick Buy overlay – slides up on hover */
.dark-fp-card__quick-buy {
  position: absolute;
  bottom: 16px; left: 16px; right: 16px;
  padding: 12px;
  background: rgba(53,53,52,.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(77,70,53,.2);
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #E5E2E1;
  text-align: center;
  text-decoration: none;
  display: block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
  cursor: pointer;
}
.dark-fp-card:hover .dark-fp-card__quick-buy {
  opacity: 1;
  transform: translateY(0);
}

/* Card text */
.dark-fp-card__name {
  font-family: 'Noto Serif', serif;
  font-size: 1.15rem;
  color: #E5E2E1;
  margin-bottom: 8px;
  letter-spacing: .03em;
}
.dark-fp-card__name a { color: inherit; transition: color .3s ease; }
.dark-fp-card__name a:hover { color: #F2CA50; }

.dark-fp-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.dark-fp-card__notes {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #99907C;
  margin: 0;
}

.dark-fp-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #F2CA50;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
}

.dark-fp-card__price {
  font-family: 'Manrope', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: #D4AF37;
  margin: 0;
}
.dark-fp-card__price .woocommerce-Price-amount { color: #D4AF37; }
.dark-fp-card__price ins { text-decoration: none; }
.dark-fp-card__price del { opacity: .5; font-size: .85em; margin-right: 6px; }

/* =============================================================================
   05. SHORTCODE: [dark_shop_grid]  (Document 22)
   ============================================================================= */
.dark-shop-sc {
  background: #131313;
}

/* Two-column layout: sidebar + main */
.dark-shop-sc--with-sidebar {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.dark-shop-sc--full .dark-shop-sc__main { width: 100%; }

/* Sidebar width */
.dark-shop-sc__sidebar { width: 280px; flex-shrink: 0; }

/* Main fills remaining space */
.dark-shop-sc__main { flex: 1; min-width: 0; }

/* Sort select */
.dark-sc-sort-select,
.dark-ordering-select {
  background: #201F1F !important;
  border: none !important;
  border-bottom: 1px solid #4D4635 !important;
  color: #E5E2E1 !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  padding: 8px 32px 8px 12px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  border-radius: 0 !important;
}

/* =============================================================================
   06. SHOP SHORTCODE SIDEBAR / FILTERS
   ============================================================================= */

/* Category filter tags (pill buttons matching shop.html scent notes) */
.dark-filter-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.dark-filter-tag {
  display: inline-block;
  padding: 6px 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #D0C5AF;
  border: 1px solid rgba(77,70,53,.4);
  text-decoration: none;
  transition: border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.dark-filter-tag:hover {
  border-color: #F2CA50;
  color: #F2CA50;
}
.dark-filter-tag.is-active {
  border-color: #F2CA50;
  color: #F2CA50;
  box-shadow: 0 0 10px rgba(242,202,80,.1);
}

/* Checkbox group */
.dark-filter-checks { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

.dark-filter-check {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
}

.dark-check-input {
  width: 14px; height: 14px;
  background: transparent !important;
  border: 1px solid #4D4635 !important;
  accent-color: #F2CA50;
  border-radius: 0 !important;
  flex-shrink: 0;
}

.dark-check-label {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(229,226,225,.7);
  transition: color .3s ease;
}

.dark-filter-check:hover .dark-check-label,
.dark-filter-check:has(.dark-check-input:checked) .dark-check-label { color: #F2CA50; }

/* =============================================================================
   07. SHOP SHORTCODE PRODUCT CARDS
   ============================================================================= */

/* Grid columns */
.dark-sc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.dark-sc-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.dark-sc-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.dark-sc-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1199px) {
  .dark-sc-grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
  .dark-sc-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .dark-sc-grid--cols-2,
  .dark-sc-grid--cols-3,
  .dark-sc-grid--cols-4 { grid-template-columns: 1fr; }
}

/* Product card */
.dark-sc-product-card {
  background: #1C1B1B;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background .7s ease;
}
.dark-sc-product-card:hover { background: #2A2A2A; }

/* Image */
.dark-sc-card__img-wrap {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #0E0E0E;
  position: relative;
  flex-shrink: 0;
}
.dark-sc-card__img-link { display: block; width: 100%; height: 100%; }
.dark-sc-card__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s ease;
}
.dark-sc-product-card:hover .dark-sc-card__img { transform: scale(1.05); }

/* Body */
.dark-sc-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }

.dark-sc-card__cat {
  font-family: 'Manrope', sans-serif; font-size: 9px;
  letter-spacing: .3em; text-transform: uppercase; color: #F2CA50;
  margin-bottom: 8px;
}
.dark-sc-card__cat a { color: inherit; }

/* Title + stars row */
.dark-sc-card__title-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}

.dark-sc-card__title {
  font-family: 'Noto Serif', serif; font-size: 1.1rem;
  letter-spacing: .03em; color: #E5E2E1;
  transition: color .3s ease; margin: 0; flex: 1;
}
.dark-sc-card__title a { color: inherit; }
.dark-sc-product-card:hover .dark-sc-card__title { color: #F2CA50; }

.dark-sc-card__stars { display: flex; align-items: center; color: #F2CA50; flex-shrink: 0; }

.dark-sc-card__notes {
  font-family: 'Manrope', sans-serif; font-size: .78rem;
  font-style: italic; color: #D0C5AF; margin-bottom: 16px; flex: 1;
}

/* Footer: price + add to cart */
.dark-sc-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
}

.dark-sc-card__price {
  font-family: 'Manrope', sans-serif; font-size: 1.05rem;
  font-weight: 600; color: #E5E2E1; letter-spacing: .03em;
}
.dark-sc-card__price ins { text-decoration: none; }
.dark-sc-card__price del { opacity: .5; font-size: .85em; margin-right: 6px; }
.dark-sc-card__price .woocommerce-Price-amount { color: #E5E2E1; }

/* No products */
.dark-no-products {
  padding: 60px 0; text-align: center;
  font-family: 'Noto Serif', serif; font-style: italic; color: #99907C;
}

/* =============================================================================
   08. SHARED PAGINATION
   ============================================================================= */
.dark-sc-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; margin-top: 56px;
}

.dark-page-nav {
  color: #99907C; display: flex; align-items: center;
  transition: color .3s ease;
}
.dark-page-nav:hover { color: #F2CA50; }
.dark-page-nav .material-symbols-outlined { font-size: 20px; }

.dark-page-numbers {
  display: flex; align-items: center; gap: 20px;
  font-family: 'Noto Serif', serif; font-size: .8rem; letter-spacing: .15em;
}

.dark-page-num {
  color: #99907C; transition: color .3s ease; text-decoration: none;
}
.dark-page-num:hover { color: #F2CA50; }
.dark-page-num.is-current {
  color: #F2CA50;
  border-bottom: 1px solid #F2CA50;
  padding-bottom: 2px;
}

.dark-page-ellipsis { color: #99907C; }

/* =============================================================================
   09. RESPONSIVE ADJUSTMENTS
   ============================================================================= */
@media (max-width: 1023px) {
  .dark-shop-sc--with-sidebar { flex-direction: column !important; }
  .dark-shop-sc__sidebar { width: 100% !important; }
  .dark-fp__inner { padding: 0 var(--px-md, 32px); }
}

@media (max-width: 767px) {
  .dark-featured-products { padding: 48px 0; }
  .dark-fp__inner { padding: 0 var(--px-sm, 20px); }
  .dark-fp__header { flex-direction: column; align-items: flex-start; gap: 16px; }
}