/* =============================================================================
   GLOBAL VARIABLES per Graff (Layout only)
   ========================================================================== */
.graff-section,
.graff-section-inverted {
  --graff-gold: #a08b65;
  --graff-black: #000000;
  --graff-white: #ffffff;
  --graff-border: 1px solid #000;
  --transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}


/* =============================================================================
   GRAFF SECTION Layout Styles
   ========================================================================== */
.graff-section {
  display: flex;
  flex-direction: row;             /* text on left, image on right */
  height: 100vh;
  max-height: 900px;
  background: var(--graff-white);
  position: relative;
}

.graff-section .graff-text-container {
  flex: 0 0 40%;
  padding: 2.5rem 5% 2.5rem 5%; /* left padding larger */
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}
.graff-section .graff-image-container {
  flex: 0 0 60%;
  position: relative;
  overflow: hidden;
}
.graff-section .graff-image-container::before {
  content: '';
  position: absolute;
  top: 5%; bottom: 5%; left: 0;
  width: 15px;
  background: var(--graff-white);
  z-index: 2;
}
.graff-section .graff-image-container img {
  width: 100%;
  height: 100%;
  padding: 5%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Inverted variant: image left, text right */
.graff-section-inverted {
  display: flex;
  flex-direction: row-reverse;      /* reversed order */
  height: 100vh;
  max-height: 900px;
  background: var(--graff-white);
  position: relative;
}
.graff-section-inverted .graff-text-container-right {
  flex: 0 0 40%;
  padding: 2.5rem 15% 2.5rem 5%;  /* right padding larger */
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}
.graff-section-inverted .graff-image-container-left {
  flex: 0 0 60%;
  position: relative;
  overflow: hidden;
}
.graff-section-inverted .graff-image-container-left::before {
  content: '';
  position: absolute;
  top: 5%; bottom: 5%; right: 0;
  width: 15px;
  background: var(--graff-white);
  z-index: 2;
}
.graff-section-inverted .graff-image-container-left img {
  width: 100%;
  height: 100%;
  padding: 5%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hide default Shopkeeper headers on category pages */
.tax-product_cat .page-header,
.tax-product_cat .woocommerce-products-header {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .graff-section,
  .graff-section-inverted { max-height: 700px; }
  .graff-text-container,
  .graff-text-container-right { flex: 0 0 45%; padding: 0 6%; }
  .graff-image-container,
  .graff-image-container-left { flex: 0 0 55%; }
}
@media (max-width: 768px) {
  .graff-section,
  .graff-section-inverted {
    flex-direction: column;
    height: auto;
    max-height: none;
  }
  /* Default section text padding */
  .graff-text-container {
    flex: 1 1 auto;
    width: 100%;
    padding: 50px 8% 60px;
    order: 2;
  }
  /* Inverted section text padding (kept same below image) */
  .graff-text-container-right {
    flex: 1 1 auto;
    width: 100%;
    padding: 40px 6% 50px;
    order: 2;
  }
  .graff-image-container,
  .graff-image-container-left {
    flex: 1 1 auto;
    width: 100%;
    height: 65vw;
    min-height: 350px;
    order: 1;
  }
  .graff-image-container::before,
  .graff-image-container-left::before { display: none; }
  .graff-image-container::after,
  .graff-image-container-left::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8%; right: 8%;
    height: 15px;
    background: var(--graff-white);
  }

  /* Limit image height on small screens to avoid over-stretching */
  .graff-image-container img,
  .graff-image-container-left img {
    max-height: 60vh;
    height: auto;
  }
}

@media (max-width: 480px) {
  .graff-text-container,
  .graff-text-container-right { padding: 40px 6% 50px; }

  /* Limit image height on small screens to avoid over-stretching */
  .graff-image-container img,
  .graff-image-container-left img {
    max-height: 60vh;
    height: auto;
  }
} (max-width: 480px) {
  .graff-text-container,
  .graff-text-container-right { padding: 40px 6% 50px; }

  /* Limit image height on small screens to avoid over-stretching */
  .graff-image-container img,
  .graff-image-container-left img {
    max-height: 60vh;
    height: auto;
  }
}