/* =========================================
   PRODUCT PAGE (product-* classes only)
   - Centered layout like example
   - Bright inner parchment panel
   - Left big image + scrollable thumbs
   - Right product info
========================================= */

/* Outer area: shows your site background on both sides */
.product-page{
  padding: 2.25rem 1rem;       /* space around the inner panel */
}

/* BLUE Centered inner content panel */
.product-panel{
  max-width: 1200px;
  margin: 0 auto;              /* centers panel */
  padding: 1.25rem;

  display: grid;
  grid-template-columns: 1fr;  /* mobile stack */
  gap: 2.2rem;

  /* BRIGHT parchment panel */
  background:
    linear-gradient(
      180deg,
      rgba(200,220,255,.90),
      rgba(170,190,230,.90)
    );

  border: 1px solid rgba(80, 55, 25, 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);
}

/* Desktop: two columns like your screenshot */
@media (min-width: 900px){
  .product-panel{
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.2rem;
    padding: 1.9rem;
    align-items: start;
  }
}


/* GREEN Centered inner content panel */
.topset-pages{
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem;

  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;

  /* Botanical parchment */
  background:
    linear-gradient(
      180deg,
      rgba(214,228,222,.96),
      rgba(186,205,198,.96)
    );

  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);
}

/* Desktop / wide screens: restore 2 columns */
@media (min-width: 900px){
  .topset-panel{
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.2rem;
    padding: 1.9rem;
    align-items: start;
  }
}


/* this is the magic */
.product-alert{
  grid-column: 1 / -1;  /* span full inner content width */
}

/* optional styling */
.product-alert{
  margin-bottom: 0;
  text-align: center;
  font-size: 1.5rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(180,200,230,0.55);
  background:
    /* faint rim light */
    linear-gradient(180deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.06) 30%,
      rgba(0,0,0,.00) 55%),
    /* softened night glass */
    linear-gradient(180deg,
      rgba(32,45,70,.70),
      rgba(22,34,56,.78));

  border-radius:14px;

  box-shadow:
    0 10px 26px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.20);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: rgba(240,248,255,.95);
}



/* =========================
   LEFT: PRODUCT image + thumbs
   Botanical-style frame, blue product palette
========================= */

.product-media{
  min-width: 0;
}

/* Main product figure frame */
.product-media-main{
  display: block;
  width: min(100%, 600px);
  padding: 0;
  border: 1px solid rgba(80, 55, 25, 0.28);
  background: #dbe6ee;
  margin: 1.75rem 0;
  text-align: center;
  box-sizing: border-box;
  border-radius: 14px;
}

/* Main image */
.product-media-main-img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(24, 42, 66, 0.92);
  border-radius: 14px 14px 0 0;
}

/* If the main image is wrapped in a button */
.product-media-main .photo-trigger{
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
}

.photo-trigger img{
  transition: transform .75s ease, filter 500ms ease;
  cursor: pointer;
}

.photo-trigger:hover img{
  transform: scale(1.02);
  filter: brightness(1.1);
}

/* Caption */
.product-media-main figcaption,
.product-media-main-caption{
  margin-top: 0.4rem;
  padding: .5rem;
  font-size: 1.1rem;
  color: #35506b;
  text-align: center;
  font-family: "IMFellSC", serif;
}

/* Thumbnails row (scrollable) */
.product-media-thumbs{
  margin-top: 0.95rem;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 92px;
  gap: 0.6rem;

  overflow-x: auto;
  padding-bottom: 0.35rem;

  scrollbar-width: thin;
}

/* WebKit scrollbar styling */
.product-media-thumbs::-webkit-scrollbar{
  height: 10px;
}
.product-media-thumbs::-webkit-scrollbar-thumb{
  background: rgba(40, 28, 16, 0.22);
  border-radius: 999px;
}
.product-media-thumbs::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.45);
  border-radius: 999px;
}

/* Thumb button */
.product-media-thumb{
  appearance: none;
  border: 1px solid rgba(80, 55, 25, 0.22);
  background: rgba(219,230,238,0.88);
  border-radius: 12px;
  padding: 0.35rem;

  cursor: pointer;
  line-height: 0;

  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.product-media-thumb img{
  width: 100%;
  height: 64px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(63,59,50,0.45);
}

.product-media-thumb:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,0.18);
}

.product-media-thumb:focus-visible{
  outline: 3px solid rgba(40, 90, 160, 0.55);
  outline-offset: 2px;
}

/* Active thumb state */
.product-media-thumb.is-active{
  border-color: rgba(40, 90, 160, 0.55);
  box-shadow: 0 12px 22px rgba(0,0,0,0.18);
}

/* =========================
   RIGHT: product info
========================= */

.product-info{
  min-width: 0;
}

.product-title{
  margin: 1.75rem 0;
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  letter-spacing: 0.2px;
  color: rgba(10, 26, 46, 0.92);
}

.product-subtitle{
  margin: 0.25rem 0 0;
  font-size: 1.05rem;
  opacity: 0.88;
  color: rgba(10, 26, 46, 0.92);
}

.product-aliases{
  margin: 0.6rem 0 0;
  font-size: 0.98rem;
  opacity: 0.82;
  line-height: 1.35;
  color: rgba(10, 26, 46, 0.92);
}

.product-price{
  margin: 0.9rem 0 0;
  font-size: 2rem;
  font-weight: 750;
  color: rgba(10, 26, 46, 0.92);
}

/* PayPal / purchase area */
.product-buy{
  margin-top: 1.2rem;
  padding: 1rem;

  background:
    /* faint rim light */
    linear-gradient(180deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.06) 30%,
      rgba(0,0,0,.00) 55%),
    /* softened night glass */
    linear-gradient(180deg,
      rgba(32,45,70,.70),
      rgba(22,34,56,.78));

  border:1px solid rgba(165,200,255,.20);
  border-radius:14px;

  box-shadow:
    0 10px 26px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.20);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: rgba(240,248,255,.95);
}





.product-buy-slot form{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
}



.product-buy-slot label{
  flex:1;
}


.product-buy-note{
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  opacity: 0.9;
  color: rgba(240,248,255,.95);
  
}

.product-buy-slot{
  display: grid;
  gap: 0.65rem;
}

/* optional helper button styling if you need it */
.product-buy-btn{
  display:block;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  position:relative;
  overflow:hidden;   /* critical */
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size:1.05rem;
  font-weight:650;
  cursor:pointer;
  height:48px;
  padding:0 1.1rem;

  border-radius:10px;


  /* palette */
--ice-a: rgba(244, 248, 255, 0.38);
--ice-b: rgba(205, 224, 248, 0.48);



  border:1px solid rgba(120,175,255,.85); /* bright but not electric */

  background:
    radial-gradient(140% 180% at 30% 25%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(120% 170% at 85% 85%, rgba(170,210,255,.45), transparent 65%),
    linear-gradient(
      180deg,
      rgba(205,225,250,.85),
      rgba(150,185,235,.95)
    );

  color:#0b1c33;


  text-decoration:none;

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

  box-shadow:0 4px 10px rgba(0,0,0,.10);
}

/* slow gentle lift */
.product-buy-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
  filter:brightness(1.03);
}

.product-buy-btn:active{
  transform:translateY(0);
  box-shadow:0 3px 6px rgba(0,0,0,.12);
}

.product-buy-btn::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255,255,255,.55),
      rgba(255,255,255,.18) 25%,
      transparent 55%
    );

  opacity:0;
  transition:opacity .45s ease;
}

.product-buy-btn:hover::before{
  opacity:.55;
}



.topsets-qty-select{

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  min-width:220px;
  width:100%;
  height:48px;
  padding:0 2.6rem 0 .95rem;

  font-family: Arial, Helvetica, sans-serif;
  font-size:.85rem;
  font-weight:400;


  border-radius:10px;
   border:1px solid rgba(140,185,245,.55); /* bright but not electric */

  /* SAME palette */
  --ice-a: rgba(180,210,250,.26);
  --ice-b: rgba(135,175,228,.36);

background:
  radial-gradient(140% 180% at 25% 20%, rgba(255,255,255,.28), transparent 60%),
  radial-gradient(120% 200% at 80% 85%, rgba(175,205,245,.28), transparent 70%),
  linear-gradient(
    180deg,
    rgba(175,195,225,.72),
    rgba(135,160,200,.82)
  );



  color: rgba(12, 28, 52, .95);



  cursor:pointer;

  transition:filter .25s ease, box-shadow .25s ease;

  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

/* subtle response — NOT a lift */
.topsets-qty-select:hover{
  filter:brightness(1.025);
}

.topsets-qty-select:focus{
  outline:none;
  box-shadow:
    0 0 0 1px rgba(135,175,228,.25),
    0 4px 10px rgba(0,0,0,.08);
}


.product-buy-subnote{
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
  opacity: 0.78;
  color: rgba(10, 26, 46, 0.92);
}

/* Growing info dropdown */
.product-grow{
  margin-top: 1.4rem;
  border: 1px solid rgba(80, 55, 25, 0.16);
  background: rgba(255,255,255,0.34);
  border-radius: 14px;
  padding: 0.2rem 0.85rem;
  color: rgba(10, 26, 46, 0.92);
}


.product-grow > summary{
  cursor: pointer;
  padding: 0.7rem 0.2rem;
  font-weight: 700;
}

.product-grow-body{
  padding: 0.2rem 0.2rem 0.85rem;
  color: rgba(10, 26, 46, 0.92);
}

.product-grow-body ul{
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  color: rgba(10, 26, 46, 0.92);
}

/* Description text */
.product-description{
  margin-top: 1.1rem;
  line-height: 1.65;
  font-size: 1.02rem;
  color: rgba(10, 26, 46, 0.92);
}

.product-chip{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:.35rem .7rem;

  border-radius:10px;

  font-size:.95rem;
  text-decoration:none;

  /* slightly darker border */
  border:1px solid rgba(120,150,195,.55);

  /* slightly darker glass */
  background:
    radial-gradient(140% 180% at 25% 20%, rgba(200,220,245,.18), transparent 60%),
    radial-gradient(120% 200% at 80% 85%, rgba(120,165,225,.16), transparent 70%),
    linear-gradient(
      180deg,
      rgba(170,190,220,.55),
      rgba(145,165,200,.65)
    );

  color:rgba(20,40,70,.92);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;

}

.product-chip:hover{
  background:
    linear-gradient(
      180deg,
      rgba(180,200,230,.65),
      rgba(155,175,210,.75)
    );

  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.product-chip-group{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:.6rem;
}

/* =========================================
   BACK TO PRODUCTS BUTTON
========================================= */
/* TOP button inside product panel */
.product-panel .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(80, 55, 25, 0.22);

  background:
    radial-gradient(140% 180% at 30% 25%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(120% 170% at 85% 85%, rgba(170,190,230,.25), transparent 65%),
    linear-gradient(
      180deg,
      rgba(200,220,255,.65),
      rgba(170,190,230,.75)
    );

  color: rgba(28,40,65,.95);

  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(170,190,230,.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(80, 55, 25, 0.45),
    transparent
  );
}

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

  top: 0.35rem;
  right: 0.35rem;
  bottom: 0.35rem;
  left: 0.35rem;

  border: 1px solid rgba(80, 55, 25, 0.28);
  border-radius: 9px;

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

  pointer-events:none;
}