/* ==================================================================
   ORIENTAL / ISLAMIC GEOMETRIC DESIGN ACCENTS
   Subtle, elegant Middle Eastern-inspired decorative elements
   for Daheimglueck Shopfront

   Colors:
   Gold: #C49B63, #D4A853
   Deep warm: #8B4513, #6B3A2A
   Warm cream: #FFF8E1, #FFFDF5
   Accent red: #C62828 (sparingly)
   ================================================================== */

/* ── Color Palette ── */
:root {
  --dg-gold: #C49B63;
  --dg-gold-light: #D4A853;
  --dg-gold-dark: #A07D4F;
  --dg-gold-rgb: 196, 155, 99;
  --dg-gold-subtle: rgba(196, 155, 99, .12);
  --dg-gold-border: rgba(196, 155, 99, .35);
  --dg-warm-deep: #8B4513;
  --dg-warm-cream: #FFF8E1;
  --dg-oriental-red: #C62828;
}

/* ── Shimmer Animation ── */
@keyframes oriental-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Gold sweep for buttons ── */
@keyframes oriental-sweep {
  0% { left: -100%; }
  100% { left: 100%; }
}


/* ==================================================================
   1. SECTION TITLES - Decorative underline + ornamental accents
   ================================================================== */

.section-title {
  position: relative;
  padding-bottom: 18px;
}

/* Arabesque-inspired gradient underline */
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--dg-gold) 15%,
    var(--dg-gold-light) 35%,
    transparent 50%,
    var(--dg-gold-light) 65%,
    var(--dg-gold) 85%,
    transparent 100%
  );
  border-radius: 2px;
}

/* Small ornamental diamond before section title */
.section-title::before {
  content: '\25C7';
  display: block;
  font-size: 10px;
  color: var(--dg-gold);
  letter-spacing: 12px;
  margin-bottom: 8px;
  opacity: .55;
}

/* ── Sidebar section title ornament ── */
.sd-section-title::before {
  content: '\2726 ';
  color: var(--dg-gold);
  opacity: .45;
  font-size: 10px;
}

/* ── Listing sidebar section title underline ── */
.ls-section-title {
  position: relative;
}
.ls-section-title::after {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--dg-gold);
  margin-top: 4px;
  opacity: .4;
}


/* ==================================================================
   2. HERO SECTION - Subtle geometric overlay
   ================================================================== */

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .03;
  background-image:
    linear-gradient(30deg, var(--dg-gold) 12%, transparent 12.5%, transparent 87%, var(--dg-gold) 87.5%, var(--dg-gold)),
    linear-gradient(150deg, var(--dg-gold) 12%, transparent 12.5%, transparent 87%, var(--dg-gold) 87.5%, var(--dg-gold)),
    linear-gradient(30deg, var(--dg-gold) 12%, transparent 12.5%, transparent 87%, var(--dg-gold) 87.5%, var(--dg-gold)),
    linear-gradient(150deg, var(--dg-gold) 12%, transparent 12.5%, transparent 87%, var(--dg-gold) 87.5%, var(--dg-gold)),
    linear-gradient(60deg, rgba(196,155,99,.45) 25%, transparent 25.5%, transparent 75%, rgba(196,155,99,.45) 75%, rgba(196,155,99,.45)),
    linear-gradient(60deg, rgba(196,155,99,.45) 25%, transparent 25.5%, transparent 75%, rgba(196,155,99,.45) 75%, rgba(196,155,99,.45));
  background-size: 40px 70px;
  background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
}

/* Hero button: gold border accent on hover */
.hero-btn {
  border: 1px solid transparent;
  transition: all .3s ease;
}
.hero-btn:hover {
  border-color: var(--dg-gold) !important;
  box-shadow: 0 0 0 1px var(--dg-gold-border);
}


/* ==================================================================
   3. SUBTLE SECTION BACKGROUNDS - Islamic lattice pattern
   ================================================================== */

.section:nth-child(even) {
  position: relative;
}
.section:nth-child(even)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  opacity: .015;
  background-image:
    repeating-linear-gradient(0deg, var(--dg-gold) 0px, var(--dg-gold) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, var(--dg-gold) 0px, var(--dg-gold) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(45deg, transparent 0px, transparent 28px, var(--dg-gold) 28px, var(--dg-gold) 29px, transparent 29px, transparent 57px),
    repeating-linear-gradient(-45deg, transparent 0px, transparent 28px, var(--dg-gold) 28px, var(--dg-gold) 29px, transparent 29px, transparent 57px);
  z-index: 0;
}
.section:nth-child(even) > * {
  position: relative;
  z-index: 1;
}


/* ==================================================================
   4. PRODUCT CARD ENHANCEMENTS - Gold hover + corner ornaments
   ================================================================== */

.product-card {
  position: relative;
  transition: box-shadow .3s ease, border-color .3s ease;
  border: 1px solid transparent;
}
.product-card:hover {
  border-color: var(--dg-gold-border) !important;
  box-shadow: 0 4px 20px rgba(196, 155, 99, .1), var(--shadow-md);
}

/* Ornamental corner brackets on hover */
.product-card::before,
.product-card::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 3;
}
.product-card::before {
  top: 4px; left: 4px;
  border-top: 1.5px solid var(--dg-gold);
  border-left: 1.5px solid var(--dg-gold);
}
.product-card::after {
  bottom: 4px; right: 4px;
  border-bottom: 1.5px solid var(--dg-gold);
  border-right: 1.5px solid var(--dg-gold);
}
.product-card:hover::before,
.product-card:hover::after {
  opacity: .5;
}

/* Subtle gold glow on price on hover */
.product-card:hover .price-current {
  text-shadow: 0 0 8px rgba(var(--dg-gold-rgb), .12);
}


/* ==================================================================
   5. CATEGORY CIRCLES - Gold ring on hover
   ================================================================== */

.cm-cat-circle-img {
  transition: border-color .3s ease, box-shadow .3s ease !important;
}
.cm-cat-circle:hover .cm-cat-circle-img {
  border-color: var(--dg-gold) !important;
  box-shadow: 0 0 0 2px var(--dg-gold-subtle), 0 2px 8px rgba(196, 155, 99, .15);
}


/* ==================================================================
   6. NAVIGATION - Gold hover accents
   ================================================================== */

.main-nav a:hover,
.cm-nav a:hover,
.cm-nav-item > a:hover {
  color: var(--dg-gold) !important;
}
.cm-nav-active {
  border-bottom-color: var(--dg-gold) !important;
}

/* Mobile nav: gold icon accents */
.mobile-nav-section-title .mn-icon {
  stroke: var(--dg-gold) !important;
}

/* Mega dropdown: gold top border */
.mega-dropdown {
  border-top: 2px solid var(--dg-gold) !important;
}


/* ==================================================================
   7. BUTTON REFINEMENTS - Gold shimmer sweep on hover
   ================================================================== */

.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(196, 155, 99, .12) 35%,
    rgba(212, 168, 83, .22) 50%,
    rgba(196, 155, 99, .12) 65%,
    transparent 100%
  );
  transition: left .5s ease;
  pointer-events: none;
  z-index: 1;
}
.btn-primary:hover::before {
  left: 100%;
}
.btn-primary:hover {
  box-shadow: 0 0 0 1px var(--dg-gold-border), 0 2px 8px rgba(196, 155, 99, .18);
}

/* Subtle gold line on top of buttons on hover */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--dg-gold-rgb), .4) 30%,
    rgba(var(--dg-gold-rgb), .6) 50%,
    rgba(var(--dg-gold-rgb), .4) 70%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity .3s ease;
}
.btn-primary:hover::after {
  opacity: 1;
}


/* ==================================================================
   8. FOOTER - Geometric pattern border + gold accents
   ================================================================== */

.site-footer {
  border-top: none !important;
  position: relative;
}

/* Geometric repeating pattern at top of footer */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 6px,
    var(--dg-gold) 6px,
    var(--dg-gold) 8px,
    transparent 8px,
    transparent 14px,
    var(--dg-gold-dark) 14px,
    var(--dg-gold-dark) 16px,
    transparent 16px,
    transparent 22px,
    var(--dg-gold) 22px,
    var(--dg-gold) 26px,
    transparent 26px,
    transparent 32px
  );
  opacity: .35;
}

/* Footer column title: gold underline */
.footer-col-title::after {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--dg-gold), transparent);
  margin-top: 6px;
  opacity: .45;
}

/* Footer certs: subtle warm background glow */
.footer-certs {
  position: relative;
}
.footer-certs::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(196,155,99,.03) 0%, transparent 50%, rgba(196,155,99,.03) 100%);
  pointer-events: none;
}


/* ==================================================================
   9. TOP BAR - Subtle gold shimmer line
   ================================================================== */

.usp-bar,
.cm-top-bar {
  position: relative;
}
.usp-bar::after,
.cm-top-bar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--dg-gold) 20%,
    var(--dg-gold-light) 50%,
    var(--dg-gold) 80%,
    transparent 100%
  );
  opacity: .25;
  pointer-events: none;
}

/* Header bottom accent line */
/* position:relative removed — sticky works with ::after */
.site-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--dg-gold) 20%,
    var(--dg-gold-dark) 50%,
    var(--dg-gold) 80%,
    transparent 100%
  );
  opacity: .25;
  z-index: 10;
}


/* ==================================================================
   10. ORNAMENTAL DIVIDERS (hr elements)
   ================================================================== */

hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--dg-gold-border) 15%,
    var(--dg-gold) 50%,
    var(--dg-gold-border) 85%,
    transparent 100%
  );
  margin: 32px auto;
  max-width: 200px;
  opacity: .45;
}


/* ==================================================================
   11. ADDITIONAL SUBTLE ACCENTS
   ================================================================== */

/* Breadcrumb separator gold accent */
.breadcrumb-sep,
.breadcrumb li + li::before {
  color: var(--dg-gold) !important;
  opacity: .45;
}

/* Pagination active indicator */
.pagination .active::after,
.pagination .current::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--dg-gold);
  border-radius: 1px;
  opacity: .45;
}
.pagination .active,
.pagination .current {
  position: relative;
}

/* Cart/checkout summary: warm gold top line */
.cart-summary::before,
.checkout-summary::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dg-gold), transparent);
  opacity: .25;
}
.cart-summary,
.checkout-summary {
  position: relative;
}


/* ==================================================================
   12. RESPONSIVE - Graceful degradation
   ================================================================== */

@media (max-width: 768px) {
  .hero::before { opacity: .02; }
  .section-title::before { display: none; }
  .product-card::before,
  .product-card::after { width: 10px; height: 10px; }
  .site-footer::before { height: 2px; opacity: .25; }
  .site-header::after { height: 1px; opacity: .2; }
}

@media (max-width: 480px) {
  .product-card::before,
  .product-card::after { display: none; }
  .cm-top-bar::after,
  .usp-bar::after { display: none; }
  .site-footer::before { display: none; }
}