/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.6
 Text Domain:  bricks
*/


/* ---------- 1. Helpers & brand token ---------- */
:root {
    --color-primary:     hsl(48 88% 52%);     /* #f0c519 */
    --btn-bg:            transparent;
    --btn-fg:            var(--color-primary);
    --btn-bg-hover:      var(--color-primary);
    --btn-fg-hover:      #ffffff;
    --btn-radius:        8px;
    --btn-pad-y:         .5em;
    --btn-pad-x:         1em;

    --golf-green-dark : hsl(142 71% 25%);
    --golf-green      : hsl(142 71% 45%);
    --golf-green-light: hsl(142 71% 60%);
    --golf-gold       : hsl(48  88% 52%);
    --thumb-tint      : hsl(142 71% 94%);
    --card-radius     : 16px;
    --card-shadow     : 0 10px 25px rgba(0,0,0,.08);
    --shadow-hover    : 0 14px 38px rgba(0,0,0,.12);

}
  
/* ===== GLOBAL TYPOGRAPHY ===== */
body, h1, h2, h3, p {
    font-family: 'Inter', sans-serif;
    color: #45463e;
    margin: 0;
    padding: 0;
  }
  
  /* ===== DAY SECTION DIVIDER ===== */
  .day-section-shape-divider {
    position: relative; /* Critical to position SVG absolutely inside it */
  }
  
  .day-section-shape-divider svg {
    position: absolute;
    top: -1px; /* Adjust as needed to eliminate small gaps */
    left: 0;
    width: 100%;
    height: 100px;
    display: block;
    shape-rendering: crispEdges;
    z-index: 10; /* Adjust if it overlaps incorrectly */
  }
  
  
  /* ===== SECTION DIVIDER LINE ===== */
  .section-divider {
    width: 100%;
    height: 1px;
    background-color: #737568;
    margin: 30px 0;
  }
  
  /* ===== SECTION HEADER ===== */
  .section-header {
    font-size: 2rem;
    color: #4d423e;
    margin-bottom: 20px;
  }
  
  /* ===== PHOTO GALLERY ===== */
  .photo-gallery {
    display: grid;
    gap: 15px;
  }
  
  @media (min-width: 768px) {
    .photo-gallery {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
  }
  
  /* ===== INTERACTIVE IMAGES ===== */
  .interactive-img {
    transition: transform 0.3s ease;
    cursor: pointer;
  }
  
  .interactive-img:hover,
  .interactive-img:active {
    transform: scale(1.04);
  }
  
  /* ===== CLICKABLE PHOTOS ===== */
  .clickable-photo {
    cursor: pointer;
  }
  
  /* ===== RESPONSIVE VIDEO ===== */
  .responsive-video video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
  }
  
  /* ===== TEXT BLOCK ===== */
  .text-block {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #45463e;
  }
  
  /* ===== PAGE-LOADER OVERLAY ===== */
  #page-loader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 2.0s ease, visibility 2.0s;
  }
  
  body.loaded #page-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  
  /* ===== DOT ANIMATION ===== */
  .loader-container {
    --uib-size: 40px;
    --uib-color: #203a3b;
    --uib-speed: 2.5s;
    position: relative;
    display: flex;
    width: var(--uib-size);
    height: var(--uib-size);
  }
  
  .loader-container .dot {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }
  
  .loader-container .dot::before {
    content: '';
    display: block;
    width: calc(var(--uib-size) * .22);
    height: calc(var(--uib-size) * .22);
    border-radius: 50%;
    background: var(--uib-color);
  }
  
  .loader-container .dot:nth-child(1) {
    animation: leapFrog var(--uib-speed) ease infinite;
  }
  
  .loader-container .dot:nth-child(2) {
    transform: translateX(calc(var(--uib-size)*.4));
    animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed)/-1.5) infinite;
  }
  
  .loader-container .dot:nth-child(3) {
    transform: translateX(calc(var(--uib-size)*.8));
    animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed)/-3) infinite;
  }
  
  @keyframes leapFrog {
    0%     { transform: translateX(0) rotate(0deg); }
    33.333%{ transform: translateX(0) rotate(180deg); }
    66.666%{ transform: translateX(calc(var(--uib-size)*-0.38)) rotate(180deg); }
    99.999%{ transform: translateX(calc(var(--uib-size)*-0.78)) rotate(180deg); }
    100%   { transform: translateX(0) rotate(0deg); }
  }
  
  /* Sticky CTA bar — hidden by default */
  #sticky-bar{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background:#ffffff;
    padding:1rem;
    text-align:center;
    box-shadow:0 -4px 10px rgba(0,0,0,.05);
  
    transform:translateY(100%);           /* off-canvas */
    transition:transform .3s ease-in-out; /* smooth slide */
  }
  
  /* Slide up once JS adds this class */
  #sticky-bar.is-visible{
    transform:translateY(0);
  }
  
  
  /* ---------- 3.  Universal utility button (.c-btn) ---------- */
  .c-btn,
  .c-btn:link,
  .c-btn:visited{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:0.5em;
    padding:var(--btn-pad-y) var(--btn-pad-x);
    font-weight:600;
    text-decoration:none;
    border:2px solid var(--btn-fg);
    border-radius:var(--btn-radius);
    background:var(--btn-bg);
    color:var(--btn-fg);
    transition:
      background-color .25s ease,
      color            .25s ease,
      border-color     .25s ease,
      transform        .20s ease;
    transform-origin:center;
  }
  .c-btn::after{
    content:"\2192";
    font-size:1em;
    opacity: 1;
    transition:opacity .2s ease,transform .2s ease;
  }
  .c-btn:hover:after,
  .c-btn:focus-visible:after{
    transform:translateX(5px);
  }





.grass-products {
    display: grid;
    gap: 1.5rem;
    /* max-width: 1200px; */
    margin-inline: auto;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: stretch;
}

@media (max-width: 1024px) {
  .grass-products {
      grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
  .grass-products {
      grid-template-columns: 1fr;
    }
}

.grass-products .card-thumb > img {
    aspect-ratio: 5 / 3;
    object-fit: cover;
    border-radius: 8px;
    background: var(--thumb-tint);
}

.grass-products .product-card {
    padding: 1.6rem 1.6rem 2.1rem;
    border: 1px solid var(--golf-green-light);
    border-radius: var(--card-radius);
    flex-direction: column;
    justify-content: space-between;
    display: flex;
}

.card-cta {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  padding: 15px;
  color: #ffffff;
}

.card-cta .brxe-div {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.card-cta .brxe-div .brxe-button {
  width: fit-content;
}



  
  /* ─────────────────────────────────────────────
   TOKENS
   ─────────────────────────────────────────── */
/* :root{
    --golf-green-dark : hsl(142 71% 25%);
    --golf-green      : hsl(142 71% 45%);
    --golf-green-light: hsl(142 71% 60%);
    --golf-gold       : hsl(48  88% 52%);
    --thumb-tint      : hsl(142 71% 94%);
    --card-radius     : 16px;
    --card-shadow     : 0 10px 25px rgba(0,0,0,.08);
    --shadow-hover    : 0 14px 38px rgba(0,0,0,.12);
  } */
  
  /* ─────────────────────────────────────────────
     GRID – 3 → 2 → 1
     ─────────────────────────────────────────── */
  
  /* .products-grid{
    display:grid;
    gap:1.5rem;
    max-width:1200px;
    margin-inline:auto;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  } */
  
  /* ─────────────────────────────────────────────
     CARD
     ─────────────────────────────────────────── */
  .product-card{
    display:flex;
    flex-direction:column;
    gap:.6rem;                    
    background:#fff;
    border:2px solid var(--golf-green-light);
    border-radius:var(--card-radius);
    padding:1.6rem 1.6rem 2.1rem;
    box-shadow:var(--card-shadow);
    transition:transform .35s cubic-bezier(.25,.46,.45,.94),
               box-shadow .35s;
  }
  .product-card:hover{
    transform:translateY(-8px) scale(1.03);
    box-shadow:var(--shadow-hover);
  }
  
  /* ─────────────────────────────────────────────
     THUMBNAIL – 5 : 3  (≈ 20 % smaller)
     ─────────────────────────────────────────── */
.card-thumb{
    overflow:hidden;
    border-radius:var(--card-radius);
    aspect-ratio:5 / 3;              
    background:var(--thumb-tint);
  }
  .card-thumb img{
    width:100%; height:100%; object-fit:cover;
    transition:transform .5s ease;
  }
  .product-card:hover .card-thumb img{ transform:scale(1.18); }
  
  /* ─────────────────────────────────────────────
     TYPOGRAPHY
     ─────────────────────────────────────────── */
  .product-title{
    font:700 clamp(1.25rem,1vw + 1rem,1.45rem)/1.25 'Inter',sans-serif;
    color:var(--golf-green-dark);
    margin:0 0 .55rem;
  }
  .product-features{
    font:400 clamp(1rem,.25vw + .9rem,1.1rem)/1.55 'Inter',sans-serif;
    margin:0;
  }
  .product-features li{
    list-style:none;
    position:relative;
    padding-left:1.25rem;
    margin-bottom:.55rem;
  }
  .product-features li::before{
    content:'';
    position:absolute;
    top:.55em; left:0;
    width:.45rem; height:.45rem;
    background:var(--golf-gold);
    border-radius:50%;
  }
  
  /* ─────────────────────────────────────────────
     CTA BUTTON
     ─────────────────────────────────────────── */
  .cta{
    margin-top:auto;
    display:block;
    padding:.9rem 1.45rem;
    font:600 1rem/1 'Inter',sans-serif;
    text-align:center;
    color:#fff;
    background:var(--golf-green);
    border-radius:8px;
    transition:background .25s ease, transform .25s ease;
  }
  .product-card:hover .cta,
  .cta:hover,
  .cta:focus-visible{
    background:var(--golf-green-dark);
    transform:scale(1.03);
  }
  .cta:active{ transform:scale(.97); }
  .cta:focus-visible{
    outline:3px solid var(--golf-gold);
    outline-offset:2px;
  }
  


/* :root{
    --golf-green-dark : hsl(142 71% 20%);
    --golf-green-light: hsl(142 71% 45%);
    --golf-gold       : hsl(48  88% 52%);
    --card-radius     : 12px;
    --card-shadow     : 0 4px 18px rgba(0,0,0,.06);
  }
  
  .two-col{
    display:flex;
    flex-wrap:wrap;                 
    gap:3rem;
    align-items:flex-start;
  }
  
  .features{
    display:flex;
    flex-direction:column;
    gap:1.25rem;                   
    flex:1 1 320px;                 
  }
  
  .feature-box{
    display:flex;
    align-items:center;
    gap:1rem;
  
    background:#fff;
    padding:1.4rem 1.8rem;
    border-radius:var(--card-radius);
    box-shadow:var(--card-shadow);
    font:500 1rem/1.4 'Inter',sans-serif;
  }
  
  .feature-box::before{
    content:'';
    width:.75rem;
    height:.75rem;
    background:var(--golf-green-light);
    border-radius:50%;
    flex:0 0 .75rem;
  }
  
  .tgl-card{
    flex:1 1 340px;                
    background:#fff;
    padding:2rem 2.5rem;
    border-radius:var(--card-radius);
    border:2px solid hsla(142,71%,45%,.25);
    box-shadow:var(--card-shadow);
    text-align:center;
  }
  
  .tgl-card h3{
    font:700 1.5rem/1.2 'Inter',sans-serif;
    color:var(--golf-green-dark);
    margin-bottom:1rem;
  }
  
  .tgl-card p{
    font:400 1rem/1.5 'Inter',sans-serif;
    color:var(--golf-green-dark);
    max-width:46ch;
    margin-inline:auto 1.5rem auto;   
  }
  
  .tgl-card img{
    max-width:120px;
    height:auto;
    margin:1.5rem .75rem 0;
  }
  
  @media (max-width: 768px){
    .two-col{gap:2rem;}
    .tgl-card h3{font-size:1.3rem;}
    .feature-box{font-size:.95rem;}
  } */
  




  /* ───────────────────────────────────────────
   CARD SHELL
   ─────────────────────────────────────────── */
.od-card{
  position:relative;
  border-radius:1.75rem;                     /* ≈ rounded-3xl */
  background:linear-gradient(135deg,#f0fdf4e6 0%,#ecfdf5e6 100%);
  box-shadow:0 25px 50px -12px rgb(0 0 0 / .25); /* shadow-2xl */
  border:1px solid rgba(16,185,129,.5);      /* border-green-200/50 */
  overflow:hidden;
  perspective:1000px;

  /* animate only the bits we change */
  transition:
    transform .5s cubic-bezier(.25,.46,.45,.94),
    box-shadow .5s cubic-bezier(.25,.46,.45,.94);
}
.od-card:hover{
  transform:translateY(-.5rem) scale(1.05);  /* lift */
  box-shadow:0 30px 60px -15px rgba(0,0,0,.25); /* hover:shadow-3xl */
}

/* ─── overlay that fades in ─── */
.od-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%);
  backdrop-filter:blur(4px);                 /* backdrop-blur-sm */
  opacity:0;
  pointer-events:none;                       /* don't block hover */
  transition:opacity .5s ease;
}
.od-card:hover .od-overlay{ opacity:1; }

/* content wrapper */
.od-inner{ position:relative; z-index:10; }

/* ─── icon ─── */
.od-iconwrap{
  width:4rem; height:4rem;
  margin:0 auto 1.5rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  box-shadow:0 6px 15px rgba(0,0,0,.18);
  transition:transform .5s ease;
}
.od-card:hover .od-iconwrap{ transform:rotate(12deg); }
.od-iconwrap svg{ width:2rem; height:2rem; color:#fff; }

/* ─── heading & sub ─── */
.od-heading{
  font:700 1.5rem/1.3 'Inter',sans-serif;
  text-align:center;
  background:linear-gradient(90deg,#065f46,#047857);
  -webkit-background-clip:text; color:transparent;
  margin:0 0 1.5rem;
}
.od-sub{
  font:400 1rem/1.5 'Inter',sans-serif;
  text-align:center;
  color:#374151;
  margin:0 0 1.5rem;
}

/* ─── pricing table ─── */
.od-table{
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(4px);
  border:1px solid rgba(16,185,129,.3);
  border-radius:1rem;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
  padding:1.5rem;
  display:grid;
  gap:1rem;
}
.od-row{
  position:relative;                         /* keeps divider positioned */
  display:flex; justify-content:space-between; align-items:center;
  font:400 1rem/1.5 'Inter',sans-serif;
  transition:transform .3s ease;
}
.od-row span:last-child{
  font-weight:700;
  background:linear-gradient(90deg,#047857,#047857);
  -webkit-background-clip:text; color:transparent;
  font-size:1.125rem;
}
/* divider */
.od-row:not(:last-child)::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-.5rem;
  height:1px;
  background:linear-gradient(90deg,#6ee7b7,#6ee7b7,#6ee7b7);
  opacity:.6;
}

/* staggered zoom on hover */
.od-card:hover .od-row{ transform:scale(1.05); }
.od-row:nth-child(2){ transition-delay:.075s; }
.od-row:nth-child(3){ transition-delay:.15s; }

/* optional: equal-height tracks when used inside a grid */
.products-grid{ grid-auto-rows:1fr; }


/* ───────────────────────────────────────────
   IMAGE GRID CARD
   ─────────────────────────────────────────── */
/* ───────────────────────────────────────────
   IMAGE GRID CARD  (staggered)
   ─────────────────────────────────────────── */
.img-card{
  position:relative;
  padding:1.25rem;
  border-radius:1.75rem;                        /* same rounded-3xl */
  background:#fff;
  box-shadow:0 25px 50px -12px rgb(0 0 0 / .25);
  transition:
    transform .45s cubic-bezier(.25,.46,.45,.94),
    box-shadow .45s cubic-bezier(.25,.46,.45,.94);
}
.img-card:hover{
  transform:translateY(-.5rem) scale(1.05);
  box-shadow:0 30px 60px -15px rgba(0,0,0,.25);
}

/* two-column grid, equal width */
.img-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;                                     /* space between thumbs */
}

/* every thumbnail */
.img-thumb{
  width:100%;
  height:auto;                                  /* natural height */
  object-fit:cover;
  border-radius:.75rem;                         /* ≈ rounded-xl */
  display:block;
}

/* stagger only the right-column images (2nd & 4th) */
.img-thumb:nth-child(2),
.img-thumb:nth-child(4){
  margin-top:.85rem;                            /* tweak to taste */
}

/* =========================================================
   VIDEO CARD  (.vid-card)
   ========================================================= */
.vid-card{
  position:relative;
  padding:1.25rem;
  border-radius:1.75rem;                             /* same rounded-3xl */
  background:#fff;
  box-shadow:0 25px 50px -12px rgb(0 0 0 / .25);     /* shadow-2xl */
  overflow:hidden;
  transition:
    transform .45s cubic-bezier(.25,.46,.45,.94),
    box-shadow .45s cubic-bezier(.25,.46,.45,.94);
}
.vid-card:hover{
  transform:translateY(-.5rem) scale(1.05);
  box-shadow:0 30px 60px -15px rgb(0 0 0 /.25);
}

/* responsive 16:9 container */
.vid-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;        /* modern, no padding-hack needed */
  border-radius:.75rem;       /* ≈ rounded-xl */
  overflow:hidden;
}

/* make iframe fill its box */
.vid-frame iframe{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  border:0;
}