/* =========================================================
   GGC Product Cards — Stable Baseline
   UI only. Pricing logic comes from the Tiered Pricing plugin.
   ========================================================= */

:root{
  --ggc-neon:#39ff14;
  --ggc-neon-600:#2de20f;
  --ggc-gold:#d4af37;
  --surface:#0d0d0d;
  --line:#2a2a2a;
  --radius:14px;
}

/* =========================================================
   1) WOOCOMMERCE GRID RESET + RESPONSIVE COLUMNS
   - Replaces Woo float grid with CSS grid
   - Prevents legacy clearfix from stealing cells
   ========================================================= */

body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after{
  content:none !important;
  display:none !important;
}

body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product{
  width:auto !important;
  float:none !important;
  margin:0 !important;
  min-width:0; /* Safari/grid shrink safety */
}

body.woocommerce ul.products,
body.woocommerce-page ul.products{
  display:grid !important;
  gap:16px !important;
  list-style:none;
  padding-left:0;
  margin:0;
}

@media (min-width:1000px){
  body.woocommerce ul.products,
  body.woocommerce-page ul.products{
    grid-template-columns: repeat(4, minmax(220px,1fr)) !important;
  }
}

@media (min-width:640px) and (max-width:999px){
  body.woocommerce ul.products,
  body.woocommerce-page ul.products{
    grid-template-columns: repeat(3, minmax(200px,1fr)) !important;
  }
}

@media (max-width:639px){
  body.woocommerce ul.products,
  body.woocommerce-page ul.products{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap:14px !important;
  }
}

/* Catalog controls spacing */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  margin-bottom:14px;
}

/* Mobile gutters so cards do not touch screen edges */
@media (max-width:640px){
  .site-main,
  .site-content,
  .content-area,
  .woocommerce .site-main,
  .woocommerce .content-area{
    padding-left:14px;
    padding-right:14px;
  }
}

/* =========================================================
   2) CARD SHELL
   ========================================================= */

.ggc-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .15s, border-color .15s;
  min-width:0; /* Safari shrink safety */
}

.ggc-card:hover{
  transform:translateY(-2px);
  border-color:var(--ggc-neon);
}

/* Product image area
   - Contain keeps full image visible
   - min-height prevents text from creeping upward on Safari */
.ggc-card__img{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:3 / 2;
  background:#fff;
  padding:10px;

  position:relative;
  flex:0 0 auto;
  overflow:hidden;
  min-height:170px;
}

.ggc-card__img img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  object-fit:contain !important;
  display:block !important;
}

/* Card body grows so lower controls can align at the bottom */
.ggc-card__body{
  padding:12px 12px 14px;
  text-align:center;
  color:var(--ggc-neon);
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-width:0;

  position:relative;
  z-index:2;
}

.ggc-card__title{
  color:var(--ggc-gold);
  font-weight:900;
  font-size:.98rem;
  line-height:1.22;
  display:block;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;

  position:relative;
  z-index:2;
}

/* Out of stock state */
.ggc-card.is-oos{
  opacity:.65;
}

.ggc-card.is-oos .ggc-card__body{
  justify-content:center;
}

.ggc-oos{
  margin-top:6px;
  padding:8px 10px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.22);
  color:#b7ffb1;
  font-weight:900;
  text-transform:uppercase;
  font-size:.85rem;
}

/* =========================================================
   3) SHARED PRICE + CTA STYLES
   ========================================================= */

.ggc-price{
  font-weight:900;
  color:var(--ggc-gold);
  font-size:1.05rem;
  margin-top:2px;
}

.ggc-atc{
  width:100%;
  border:0;
  border-radius:14px;
  background:var(--ggc-neon);
  color:#000;
  font-weight:1000;
  cursor:pointer;
  padding:10px 12px;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.1;
}

.ggc-atc:hover{
  background:var(--ggc-neon-600);
}

/* Flower CTA should sit at the bottom of the card */
.ggc-atc--flower{
  margin-top:auto;
  padding:8px 12px;   /* was effectively taller before via base .ggc-atc */
  min-height:40px;    /* slightly shorter than current feel */
  max-width:92%;      /* optional: makes it feel a bit less oversized */
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
   4) NON-FLOWER PRODUCT CARD LAYOUT
   ========================================================= */

.ggc-center{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  margin-top:auto; /* pushes non-flower controls downward */
}

/* Quantity row:
   minus | add button | plus */
.ggc-qtybar{
  width:100%;
  max-width:340px;
  margin:0 auto;
  margin-top:auto;

  display:grid;
  grid-template-columns:44px minmax(0, 1fr) 44px;
  grid-template-areas:
    "minus button plus"
    "viewcart viewcart viewcart";
  gap:10px;
  align-items:center;
}

/* Lock the intended controls into the first row */
.ggc-qbtn--minus{ grid-area: minus; }
.ggc-atc--qty{ grid-area: button; }
.ggc-qbtn--plus{ grid-area: plus; }

/* When Woo injects "View cart", force it onto its own row underneath */
.ggc-qtybar .added_to_cart,
.ggc-qtybar .wc-forward{
  grid-area: viewcart;
  display:block;
  width:100%;
  text-align:center;
  margin:2px 0 0;
  color:var(--ggc-neon);
  font-weight:800;
  text-decoration:none;
}

.ggc-qbtn{
  width:38px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:#111;
  color:var(--ggc-neon);
  font-weight:1000;
  font-size:1.2rem;
  cursor:pointer;
}

.ggc-qbtn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

/* Two-line Add to Cart button for narrow layouts */
.ggc-atc--qty{
  height:44px;
  min-width:0;
  padding:6px 10px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  line-height:1.05;
  overflow:hidden;
}

.ggc-atc__line1{
  font-size:.92rem;
}

.ggc-atc__line2{
  font-size:.72rem;
  font-weight:900;
  opacity:.9;
}

/* =========================================================
   5) FLOWER TIER SELECTOR
   - Dynamic 1 / 2 / 3 button layouts
   ========================================================= */

.ggc-tiers{
  display:grid;
  gap:10px;
  margin:2px 0 2px;
  justify-content:center; /* keeps 1–2 tier layouts centered */
}

/* 3 tiers: fill width more naturally */
.ggc-tiers--3{
  grid-template-columns: repeat(3, minmax(0,1fr));
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}

/* 2 tiers: keep compact on desktop */
.ggc-tiers--2{
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width:250px;
  margin-left:auto;
  margin-right:auto;
}

/* 1 tier: fixed-ish centered width */
.ggc-tiers--1{
  grid-template-columns: minmax(0, 160px);
}

.ggc-tier{
  border:1px solid var(--ggc-neon);
  background:transparent;
  color:var(--ggc-neon);
  border-radius:12px;
  padding:8px 6px;
  cursor:pointer;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  aspect-ratio:1 / 1;
  min-height:56px;
  overflow:hidden; /* prevents any text from escaping the pill */
}

.ggc-tier.is-active,
.ggc-tier:hover{
  background:var(--ggc-neon);
  color:#000;
}

.ggc-tier__price,
.ggc-tier__label{
  display:block;
  width:100%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ggc-tier__price{
  font-weight:1000;
  font-size:.86rem;
  line-height:1.05;
}

.ggc-tier__label{
  font-weight:900;
  font-size:.72rem;
  line-height:1.1;
  opacity:.95;
  padding-bottom:1px; /* prevents the “g” from clipping */
}

/* Single-tier flower card:
   use this when only one valid weight exists so the UI behaves more like a simple product */
.ggc-flower-single{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  margin:.15rem 0 .35rem;
}

.ggc-flower-single .ggc-price{
  margin:0;
}

.ggc-flower-single__label{
  color:#b7ffb1;
  font-weight:800;
  font-size:.82rem;
  line-height:1.1;
}

/* =========================================================
   6) GLOBAL MOBILE TIGHTENING
   - Applies to all phones
   ========================================================= */

@media (max-width:639px){
  .ggc-card__title{
    font-size:.92rem;
    line-height:1.14;
  }

  .ggc-price{
    font-size:1rem;
    line-height:1.1;
  }

  .ggc-atc--qty{
    padding:4px 8px;
    min-height:42px;
  }

  .ggc-atc__line1{
    font-size:.8rem;
    line-height:1;
  }

  .ggc-atc__line2{
    font-size:.64rem;
    line-height:1;
  }
}

/* Very small phones:
   reduce the side quantity buttons to give the center CTA more breathing room */
@media (max-width:420px){
  .ggc-qtybar{
    grid-template-columns:34px minmax(0, 1fr) 34px;
    grid-template-areas:
      "minus button plus"
      "viewcart viewcart viewcart";
    gap:6px;
  }

  .ggc-qbtn{
    width:34px;
    height:40px;
    font-size:1rem;
  }

  .ggc-atc--qty{
    min-height:40px;
    padding:4px 8px;
  }
}
}

/* Extremely narrow phones:
   hide the second line in the add-to-cart button */
@media (max-width:360px){
  .ggc-atc__line2{
    display:none;
  }

  .ggc-atc__line1{
    font-size:.88rem;
  }
}

/* =========================================================
   7) SAFARI / IPHONE STABILITY PATCH
   - These are targeted compatibility overrides, not primary layout rules
   ========================================================= */

/* iPhone Safari only:
   stop Safari from autoscaling product-card text unpredictably */
@supports (-webkit-touch-callout: none) {
  html{
    -webkit-text-size-adjust:80%;
  }

  .ggc-card__img{
    aspect-ratio:auto;
    height:190px;
  }

  @media (max-width:639px){
    .ggc-card__img{
      height:160px;
    }

    .ggc-card__body{
      padding:10px 10px 12px;
      gap:8px;
    }

    .ggc-card__title{
      font-size:.94rem;
      line-height:1.18;
    }
  }
}

.ggc-tier.is-disabled{
  opacity:.35;
  cursor:not-allowed;
  pointer-events:none;
}

/* Keep flower controls grouped and anchored lower in the card */
.ggc-card__body[data-ggc-flower]{
  display:flex;
  flex-direction:column;
}

/* Push the tier selector down when title is short */
.ggc-card__body[data-ggc-flower] .ggc-tiers,
.ggc-card__body[data-ggc-flower] .ggc-flower-single{
  margin-top:auto;
}

/* Keep the Add to Cart button tucked close to the tier block */
.ggc-card__body[data-ggc-flower] .ggc-atc--flower{
  margin-top:8px; /* tweak 6px–10px to taste */
}