/*
Theme Name: Enfold Child
Template: enfold
Version: 1.0
Description: Child theme for Enfold
Author: Alessio
*/
/* ============================================
   Katreen Store — Reusable Background Patterns
   ============================================

   Drop any of these classes on any section.
   Pair with .pattern-card on the inner white box
   for a matching shadow lift.

   Example:
   <section class="pattern-pinstripes">
     <div class="pattern-card"> ... </div>
   </section>
   ============================================ */


/* ─── Shared: disable Enfold's color overlay ─── */

.pattern-pinstripes > .av-section-color-overlay-wrap > .av-section-color-overlay,
.pattern-diamonds > .av-section-color-overlay-wrap > .av-section-color-overlay,
.pattern-dots > .av-section-color-overlay-wrap > .av-section-color-overlay,
.pattern-circles > .av-section-color-overlay-wrap > .av-section-color-overlay,
.pattern-honeycomb > .av-section-color-overlay-wrap > .av-section-color-overlay,
.pattern-crosshatch > .av-section-color-overlay-wrap > .av-section-color-overlay {
  background-color: transparent !important;
  opacity: 0 !important;
}


/* ─── Card lift (optional, for the white inner box) ─── */

.pattern-card {
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}


/* ─── Diagonal Pinstripes ─── */

.pattern-pinstripes {
  background-color: #ececec !important;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 24px,
    rgba(0, 0, 0, 0.04) 24px,
    rgba(0, 0, 0, 0.04) 25px
  ) !important;
}


/* ─── Diamond Grid ─── */

.pattern-diamonds {
  background-color: #ececec !important;
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.03) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.03) 75%) !important;
  background-size: 40px 40px !important;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0 !important;
}


/* ─── Dot Matrix ─── */

.pattern-dots {
  background-color: #ececec !important;
  background-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.2) 1px,
    transparent 1px
  ) !important;
  background-size: 24px 24px !important;
}


/* ─── Overlapping Circles ─── */

.pattern-circles {
  background-color: #ececec !important;
  background-image:
    radial-gradient(circle at 20% 50%,  rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.04) 40%, transparent 40%),
    radial-gradient(circle at 80% 30%,  rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.03) 35%, transparent 35%),
    radial-gradient(circle at 60% 80%,  rgba(0,0,0,0.035) 0%, rgba(0,0,0,0.035) 30%, transparent 30%) !important;
  background-size: 100% 100% !important;
}


/* ─── Honeycomb ─── */

.pattern-honeycomb {
  background-color: #ececec !important;
  background-image:
    linear-gradient(30deg,  rgba(0,0,0,0.035) 12%, transparent 12.5%, transparent 87%, rgba(0,0,0,0.035) 87.5%),
    linear-gradient(150deg, rgba(0,0,0,0.035) 12%, transparent 12.5%, transparent 87%, rgba(0,0,0,0.035) 87.5%),
    linear-gradient(30deg,  rgba(0,0,0,0.035) 12%, transparent 12.5%, transparent 87%, rgba(0,0,0,0.035) 87.5%),
    linear-gradient(150deg, rgba(0,0,0,0.035) 12%, transparent 12.5%, transparent 87%, rgba(0,0,0,0.035) 87.5%),
    linear-gradient(60deg,  rgba(0,0,0,0.025) 25%, transparent 25.5%, transparent 75%, rgba(0,0,0,0.025) 75%),
    linear-gradient(60deg,  rgba(0,0,0,0.025) 25%, transparent 25.5%, transparent 75%, rgba(0,0,0,0.025) 75%) !important;
  background-size: 56px 96px !important;
  background-position: 0 0, 0 0, 28px 48px, 28px 48px, 0 0, 28px 48px !important;
}


/* ─── Cross-Hatch Grid ─── */

.pattern-crosshatch {
  background-color: #ececec !important;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 30px,
      rgba(0, 0, 0, 0.03) 30px,
      rgba(0, 0, 0, 0.03) 31px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 30px,
      rgba(0, 0, 0, 0.03) 30px,
      rgba(0, 0, 0, 0.03) 31px
    ) !important;
}