/* =========================================
   GREEN PLANT INFO (single column clone of product panel)
   - SAME styling
   - SAME colors
   - NO columns ever
========================================= */

/* Outer wrapper (same spacing behavior) */
.green-plant-info{
  padding: 2.25rem 1rem;
}

/* Inner panel — EXACT SAME LOOK as product-panel */
.green-plant-info-panel{
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem;
position:relative;
  display: block; /* 🔥 force single column always */

  /* SAME parchment / green glass */
  background:
    linear-gradient(
      180deg,
      rgba(214,228,222,.90),
      rgba(186,205,198,.90)
    );

  border: 1px solid rgba(70, 85, 70, 0.18);
  border-radius: 18px;

  box-shadow:
    0 28px 70px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

.green-plant-info-panel::after{
  content: "";
  position: absolute;

  /* 🌿 inset distance (adjust this number to taste) */
  top: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;

  /* 🌿 your green theme line */
  border: 1px solid rgba(43, 59, 43, 0.28);

  /* 🌿 rounded botanical frame */
  border-radius: 14px;

  /* 🌿 subtle aged inner glow */
  box-shadow:
    inset 0 0 0 1px rgba(214,228,222,0.35),
    inset 0 0 10px rgba(70, 85, 70, 0.08);

  pointer-events: none;
}

/* Ensure EVERYTHING stacks */
.green-plant-info-panel > *{
  width: 100%;
}

/* Alert banner stays full width */
.green-plant-info-panel .product-alert{
  margin-bottom: 1.25rem;
}

/* Optional readable width for text */
.green-plant-info-panel .product-info{
  max-width: 900px;
}

/* Keep media styled the same */
.green-plant-info-panel .product-media-main{
  margin-left: 0;
}

/* 🔥 HARD OVERRIDE — kills any grid behavior from media queries */
@media (min-width: 900px){
  .green-plant-info-panel{
    display: block !important;
    grid-template-columns: none !important;
  }
}

/* =========================================
   GREEN PLANT INFO
   single-column info page
   same green/parchment family as product pages
========================================= */



/* =========================================
   ARTICLE / READING WIDTH
========================================= */

.green-plant-info-panel article{
  max-width: 920px;
  margin: 2rem;
  color: rgba(14, 34, 24, 0.92);
}

.green-plant-info-panel section{
  display: block;
}

.green-plant-info-panel p{
  margin: 0 0 1.1rem;
  font-size: 1.04rem;
  line-height: 1.72;
  color: rgba(14, 34, 24, 0.92);
}

.green-plant-info-panel strong{
  color: rgba(14, 34, 24, 0.96);
}

/* =========================================
   PAGE HEADER
========================================= */

.green-plant-info-panel .page-header{
  margin: 0 0 1.6rem;
}

.green-plant-info-panel .page-header h1,
.green-plant-info-panel #pageTitle{
  margin: 2rem;
  margin-bottom: 3rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  text-align: center;
  letter-spacing: 0.2px;
  color: rgba(14, 34, 24, 0.94);
}

/* =========================================
   HEADINGS
========================================= */

.green-plant-info-panel h2{
  margin: 0 0 1rem;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.18;
  color: rgba(14, 34, 24, 0.94);
}

.green-plant-info-panel h3{
  margin: 1.2rem 0 0.55rem;
  font-size: 1.14rem;
  line-height: 1.3;
  color: rgba(20, 45, 28, 0.92);
}

/* =========================================
   DIVIDER
========================================= */

.green-plant-info-panel .botanical-divider{
  border: 0;
  height: 1px;
  margin: 1.8rem 0 1.8rem;

  background: linear-gradient(
    to right,
    transparent,
    rgba(90,110,90,.55),
    transparent
  );
}

/* =========================================
   FIGURES
========================================= */

.green-plant-info-panel .botanical-figure,
.green-plant-info-panel .botanical-figure-large{
  display: block;
  width: min(100%, 600px);
  margin: 1.2rem 0 1.5rem;
  padding: 0;

  border: 1px solid rgba(70, 85, 70, 0.28);
  border-radius: 14px;
  background: #dfe5df;

  box-sizing: border-box;
  overflow: hidden;
}

.green-plant-info-panel .botanical-figure-large{
  width: min(100%, 720px);
}

.green-plant-info-panel .botanical-figure img,
.green-plant-info-panel .botanical-figure-large img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(14, 34, 24, 0.92);
  border-radius: 14px 14px 0 0;
}

/* =========================================
   PHOTO BUTTON
========================================= */

.green-plant-info-panel .photo-trigger{
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.green-plant-info-panel .photo-trigger img{
  transition: transform .75s ease, filter 500ms ease;
}

.green-plant-info-panel .photo-trigger:hover img{
  transform: scale(1.02);
  filter: brightness(1.08);
}

.green-plant-info-panel .photo-trigger:focus-visible{
  outline: 3px solid rgba(120,170,140,.45);
  outline-offset: 3px;
  border-radius: 14px;
}

/* =========================================
   FIGCAPTION
========================================= */

.green-plant-info-panel figcaption{
  margin: 0;
  padding: .65rem .8rem .8rem;
  font-size: 1rem;
  line-height: 1.45;
  color: #465546;
  text-align: center;
  font-family: "IMFellSC", serif;
}

/* =========================================
   LISTS
========================================= */

.green-plant-info-panel ul,
.green-plant-info-panel ol{
  margin: 0 0 1.2rem 1.2rem;
  padding: 0;
  color: rgba(14, 34, 24, 0.92);
}

.green-plant-info-panel li{
  margin: 0 0 0.45rem;
  line-height: 1.6;
}

/* Your HTML has <strong> directly inside <ul>,
   which is not ideal HTML, but this helps it look intentional */
.green-plant-info-panel ul > strong{
  display: block;
  margin: 1rem 0 0.45rem -1.2rem;
  font-size: 1rem;
  color: rgba(20,45,28,.95);
}

.green-plant-info-panel ul > strong:first-child{
  margin-top: 0;
}

/* =========================================
   LINKS
========================================= */

.green-plant-info-panel a{
  color: rgba(20, 70, 45, 0.95);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.green-plant-info-panel a:hover{
  color: rgba(14, 34, 24, 0.96);
}

/* =========================================
   SPACING TUNING
========================================= */

.green-plant-info-panel h2 + p,
.green-plant-info-panel h3 + p{
  margin-top: 0;
}

.green-plant-info-panel p:last-child,
.green-plant-info-panel ul:last-child,
.green-plant-info-panel ol:last-child{
  margin-bottom: 0;
}

/* =========================================
   BACK TO PRODUCTS BUTTON
========================================= */
/* TOP button inside plant catalog info panel */
.plant-catalog-info .plant-catalog-nav-btn{
  display: inline-block;
  margin: 1.6rem 0 0.6rem 0;
  align-self: flex-start;
}

/* button */
.plant-catalog-nav-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
position: relative;
  padding: 0.65rem 1.2rem;

  font-family: "IMFellSC", serif;
  font-size: 1rem;
  letter-spacing: 0.2px;

  border-radius: 12px;

  border: 1px solid rgba(90,110,90,.35);

  background:
    radial-gradient(140% 180% at 30% 25%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(120% 170% at 85% 85%, rgba(170,210,180,.25), transparent 65%),
    linear-gradient(
      180deg,
      rgba(210,225,215,.65),
      rgba(170,195,180,.75)
    );

  color: rgba(20,45,28,.92);

  text-decoration: none;

  box-shadow:
    0 6px 14px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.5);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

/* hover — gentle lift */
.plant-catalog-nav-btn:hover{
  transform: translateY(-1.5px);

  box-shadow:
    0 10px 22px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.6);

  filter: brightness(1.04);
}

/* active */
.plant-catalog-nav-btn:active{
  transform: translateY(0);

  box-shadow:
    0 4px 10px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.4);
}

/* focus accessibility */
.plant-catalog-nav-btn:focus-visible{
  outline: 3px solid rgba(120,170,140,.45);
  outline-offset: 3px;
}

.plant-catalog-nav-bottom::before{
  content:"";
  display:block;
  width:80%;
  height:1px;
  margin:0 auto 1rem;

  background: linear-gradient(
    to right,
    transparent,
    rgba(90,110,90,.55),
    transparent
  );
}

.plant-catalog-nav-btn::after{
  content:"";
  position:absolute;

  /* 🌿 inset from button edge */
  top: 0.35rem;
  right: 0.35rem;
  bottom: 0.35rem;
  left: 0.35rem;

  border: 1px solid rgba(70,85,70,.28);
  border-radius: 9px; /* slightly smaller than 12px */

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18);

  pointer-events:none;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 699px){
  .green-plant-info{
    padding: 1.25rem .75rem;
  }

  .green-plant-info-panel{
    padding: 1rem;
    border-radius: 16px;
  }

  .green-plant-info-panel article{
    max-width: 100%;
  }

  .green-plant-info-panel p{
    font-size: 1rem;
    line-height: 1.66;
  }

  .green-plant-info-panel .botanical-divider{
    margin: 1.45rem 0;
  }
}

/* =========================================
   TABLET / DESKTOP
========================================= */

@media (min-width: 700px){
  .green-plant-info-panel{
    padding: 1.45rem;
  }
}

@media (min-width: 900px){
  .green-plant-info-panel{
    padding: 1.9rem;
  }
}