/* =====================================================================
   Pecan & Petal  .  Single Product (PDP) slice
   UrbanStems-style product page for the hcf-flowers child theme.

   RULES OBSERVED
   .  Brand colors ONLY via the central theme layer variables
     (--pnp-bronze, --pnp-bronze-dark, --pnp-peach, --pnp-coral, --pnp-ink)
     defined in mu-plugins/zzz-pnp-overrides.php. No palette hex is hardcoded
     here so the operator can retune color in one place.
   .  Everything targets REAL WooCommerce / Storefront class names, plus the
     existing custom option classes (.hcf-pdp-options / .hcf-field /
     .hcf-addons / .hcf-addon) emitted by hcf_pdp_options() in functions.php.
   .  Layout / structure only. The delivery-date, gift-message and add-on
     fields are RESTYLED, never removed. Checkout logic and payment methods
     are untouched (this file is CSS only).

   Neutral structural tokens below (card / line / muted / shadow) are plain
   greys and translucent blacks, NOT brand palette. They are collected here
   so surface treatment is also tweakable in one place, and are deliberately
   kept separate from the retunable brand palette.
   ===================================================================== */

.single-product {
  --pnp-pdp-card: #ffffff;                 /* neutral surface, not brand */
  --pnp-pdp-line: rgba(0, 0, 0, .10);      /* hairline / border */
  --pnp-pdp-line-soft: rgba(0, 0, 0, .06);
  --pnp-pdp-muted: #8a827a;                /* warm grey secondary text */
  --pnp-pdp-shadow: 0 6px 24px rgba(0, 0, 0, .08);
  --pnp-pdp-shadow-sm: 0 2px 10px rgba(0, 0, 0, .06);
  --pnp-pdp-serif: "Fraunces", Georgia, serif;
  --pnp-pdp-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =====================================================================
   1. TWO-COLUMN LAYOUT
   Convert Storefront's floated gallery/summary into a robust grid:
   gallery = left column, summary = right column, and every other direct
   child (tabs, upsells, related, clears) spans the full width.
   ===================================================================== */
.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.single-product div.product::before,
.single-product div.product::after { content: none; }        /* drop the float clearfix */

.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .summary {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  min-width: 0;                                               /* allow grid track to shrink */
}

/* Everything that is not the gallery or the buy box runs full-bleed below. */
.single-product div.product > *:not(.woocommerce-product-gallery):not(.summary) {
  grid-column: 1 / -1;
}

/* Sticky buy box on desktop (pure CSS; no logic touched). */
.single-product div.product > .summary {
  position: sticky;
  top: 1.5rem;
}

/* =====================================================================
   2. GALLERY  (thumbnails left, large main image)
   WooCommerce flexslider markup: figure.woocommerce-product-gallery__wrapper
   for the main slide, ol.flex-control-thumbs for the thumbnail nav,
   a.woocommerce-product-gallery__trigger for the zoom control.
   ===================================================================== */
.single-product .woocommerce-product-gallery {
  position: relative;
  display: flex;
  flex-direction: row-reverse;   /* thumbs (last in DOM) render on the LEFT */
  align-items: flex-start;
  gap: .75rem;
  max-width: 100%;
}
.single-product .woocommerce-product-gallery > figure.woocommerce-product-gallery__wrapper {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* Main slide */
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a { display: block; }
.single-product .woocommerce-product-gallery__image img {
  border-radius: 10px;
  box-shadow: var(--pnp-pdp-shadow);
}

/* Thumbnail rail: force flexslider's floated grid into a tidy vertical column */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
  flex: 0 0 78px;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  list-style: none;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
  width: 100% !important;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--pnp-pdp-line);
  opacity: .55;
  cursor: pointer;
  transition: opacity .18s ease, box-shadow .18s ease;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: .85; }
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--pnp-bronze);   /* active ring in brand bronze */
}

/* Zoom trigger */
.single-product .woocommerce-product-gallery__trigger {
  top: .85rem;
  right: .85rem;
  background: var(--pnp-pdp-card);
  border-radius: 50%;
  box-shadow: var(--pnp-pdp-shadow-sm);
}

/* =====================================================================
   3. SUMMARY  (title, price, rating, short description)
   ===================================================================== */
.single-product .summary.entry-summary { font-family: var(--pnp-pdp-sans); }

.single-product .summary .product_title.entry-title {
  font-family: var(--pnp-pdp-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--pnp-ink);
  margin: 0 0 .55rem;
}

.single-product .summary .price { margin: 0 0 .55rem; }
.single-product .summary .price,
.single-product .summary .price .woocommerce-Price-amount {
  font-family: var(--pnp-pdp-sans);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--pnp-ink);
}
.single-product .summary .price del,
.single-product .summary .price del .woocommerce-Price-amount {
  color: var(--pnp-pdp-muted);
  font-weight: 500;
  font-size: 1.1rem;
  margin-right: .5rem;
}
.single-product .summary .price ins { text-decoration: none; background: transparent; }
.single-product .summary .price ins .woocommerce-Price-amount { color: var(--pnp-coral); }  /* sale spark */

/* Rating row: star-rating color comes from the central layer (bronze). */
.single-product .summary .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.15rem;
}
.single-product .summary .woocommerce-product-rating .star-rating { margin: 0; font-size: 1rem; }
.single-product .summary .woocommerce-review-link {
  color: var(--pnp-pdp-muted);
  font-size: .85rem;
  text-decoration: none;
}
.single-product .summary .woocommerce-review-link:hover { color: var(--pnp-bronze); }

/* Short description */
.single-product .summary .woocommerce-product-details__short-description {
  color: var(--pnp-ink);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--pnp-pdp-line);
}
.single-product .summary .woocommerce-product-details__short-description p { margin: 0 0 .6rem; }
.single-product .summary .woocommerce-product-details__short-description :last-child { margin-bottom: 0; }

/* =====================================================================
   4. ADD-TO-CART FORM  + EXISTING OPTIONS
   form.cart holds, in order: .hcf-pdp-options (delivery date, gift
   message, add-ons), .quantity, and .single_add_to_cart_button.
   Flex the form so options sit full-width and quantity + button share a row.
   ===================================================================== */
.single-product .summary form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .75rem;
  margin: 0;
}
.single-product .summary form.cart .hcf-pdp-options { flex: 1 1 100%; }
.single-product .summary form.cart .quantity { flex: 0 0 auto; margin: 0; }
.single-product .summary form.cart .single_add_to_cart_button { flex: 1 1 auto; }
.single-product .summary form.cart .pnp-pdp-assure { flex: 1 1 100%; }

/* ---- existing option fields, restyled cleanly (NOT removed) ---- */
.single-product .hcf-pdp-options {
  margin: 0;
  max-width: none;
}
.single-product .hcf-field { margin: 0 0 1rem; }
.single-product .hcf-field label {
  display: block;
  font-family: var(--pnp-pdp-sans);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pnp-ink);
  margin: 0 0 .4rem;
}
.single-product .hcf-field label span {          /* the "(optional)" hint */
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--pnp-pdp-muted);
}
.single-product .hcf-field input[type="date"],
.single-product .hcf-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--pnp-pdp-line);
  border-radius: 10px;
  background: var(--pnp-pdp-card);
  padding: .7rem .9rem;
  font-family: var(--pnp-pdp-sans);
  font-size: .95rem;
  color: var(--pnp-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.single-product .hcf-field textarea { resize: vertical; min-height: 84px; }
.single-product .hcf-field input[type="date"]:focus,
.single-product .hcf-field textarea:focus {
  outline: none;
  border-color: var(--pnp-bronze);
  box-shadow: inset 0 0 0 1px var(--pnp-bronze);   /* crisp brand focus, no rgba hardcode */
}

/* Add-ons ("Make it extra special") */
.single-product .hcf-addons {
  border: 1px solid var(--pnp-pdp-line);
  border-radius: 12px;
  background: var(--pnp-pdp-card);
  padding: .9rem 1.05rem;
  margin: 0;
}
.single-product .hcf-addons-title {
  display: block;
  font-family: var(--pnp-pdp-sans);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pnp-ink);
  margin: 0 0 .55rem;
}
.single-product .hcf-addon {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  padding: .55rem 0;
  font-family: var(--pnp-pdp-sans);
  font-size: .95rem;
  color: var(--pnp-ink);
  cursor: pointer;
  border-top: 1px solid var(--pnp-pdp-line-soft);
}
.single-product .hcf-addon:first-of-type { border-top: 0; padding-top: 0; }
.single-product .hcf-addon input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--pnp-bronze);   /* corrects the stale teal accent from style.css */
}
.single-product .hcf-addon > span { flex: 1 1 auto; }
.single-product .hcf-addon b {
  margin-left: auto;
  font-weight: 700;
  color: var(--pnp-bronze);          /* central layer also enforces this; kept explicit */
}

/* Quantity stepper */
.single-product .summary form.cart .quantity .qty {
  width: 76px;
  min-height: 52px;
  text-align: center;
  border: 1px solid var(--pnp-pdp-line);
  border-radius: 3px;                 /* matches the squared UrbanStems buttons */
  background: var(--pnp-pdp-card);
  font-family: var(--pnp-pdp-sans);
  font-size: 1rem;
  color: var(--pnp-ink);
}

/* Primary add-to-cart button: color/radius/uppercase come from the central
   + urbanstems layers. Here we only size it for the buy box. */
.single-product .summary form.cart .single_add_to_cart_button {
  min-width: 180px;
  padding-top: 1.05em !important;
  padding-bottom: 1.05em !important;
}

/* Optional reassurance strip (rendered by pnp-pdp.php after the button) */
.single-product .pnp-pdp-assure {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1.4rem;
  margin: .35rem 0 0;
  padding: 0;
  font-family: var(--pnp-pdp-sans);
  font-size: .82rem;
  color: var(--pnp-pdp-muted);
}
.single-product .pnp-pdp-assure li { display: flex; align-items: center; gap: .45rem; }
.single-product .pnp-pdp-assure li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pnp-bronze);
  display: inline-block;
}

/* Product meta (SKU / categories / tags) */
.single-product .summary .product_meta {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pnp-pdp-line);
  font-family: var(--pnp-pdp-sans);
  font-size: .82rem;
  color: var(--pnp-pdp-muted);
}
.single-product .summary .product_meta > span { display: block; margin-bottom: .3rem; }
.single-product .summary .product_meta a { color: var(--pnp-bronze); text-decoration: none; }
.single-product .summary .product_meta a:hover { text-decoration: underline; }

/* =====================================================================
   5. TABS  (Description / Additional information / Reviews)
   Restyle WooCommerce's rounded pill tabs into clean underline tabs.
   ===================================================================== */
.single-product .woocommerce-tabs { margin-top: clamp(2.5rem, 5vw, 4rem); }
.single-product .woocommerce-tabs ul.tabs {
  margin: 0 0 1.75rem;
  padding: 0;
  text-align: left;
  border-bottom: 1px solid var(--pnp-pdp-line);
}
.single-product .woocommerce-tabs ul.tabs::before { border: 0; }   /* remove Woo's own baseline */
.single-product .woocommerce-tabs ul.tabs li {
  display: inline-block;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 1.75rem 0 0;
  padding: 0 0 .8rem;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none; }  /* Woo's curved corners */
.single-product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0;
  font-family: var(--pnp-pdp-sans);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pnp-pdp-muted);
}
.single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--pnp-ink); }
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--pnp-ink); }
.single-product .woocommerce-tabs ul.tabs li.active {
  box-shadow: inset 0 -2px 0 0 var(--pnp-bronze);   /* active underline in brand bronze */
}

.single-product .woocommerce-tabs .panel { margin: 0; padding: 0; }
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
  font-family: var(--pnp-pdp-sans);
  color: var(--pnp-ink);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 72ch;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel > h2 {
  font-family: var(--pnp-pdp-serif);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--pnp-ink);
  margin: 0 0 1rem;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel p { margin: 0 0 1rem; }
.single-product .woocommerce-tabs .woocommerce-Tabs-panel :last-child { margin-bottom: 0; }

/* =====================================================================
   6. REVIEWS
   ===================================================================== */
.single-product #reviews #comments > h2 {
  font-family: var(--pnp-pdp-serif);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--pnp-ink);
  margin: 0 0 1.25rem;
}
.single-product #reviews ol.commentlist {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.single-product #reviews ol.commentlist li.review,
.single-product #reviews ol.commentlist li.comment {
  margin: 0 0 1rem;
  padding: 0;
}
.single-product #reviews ol.commentlist li .comment_container {
  background: var(--pnp-pdp-card);
  border: 1px solid var(--pnp-pdp-line);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  box-shadow: var(--pnp-pdp-shadow-sm);
}
.single-product #reviews .comment-text .meta { font-family: var(--pnp-pdp-sans); color: var(--pnp-pdp-muted); font-size: .85rem; }
.single-product #reviews .comment-text .woocommerce-review__author { color: var(--pnp-ink); font-weight: 700; }
.single-product #reviews .comment-text .star-rating { margin: .1rem 0 .5rem; }   /* bronze via central layer */

/* Review form */
.single-product #review_form_wrapper #reply-title,
.single-product #review_form_wrapper .comment-reply-title {
  font-family: var(--pnp-pdp-serif);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--pnp-ink);
}
.single-product #review_form_wrapper #respond p { font-family: var(--pnp-pdp-sans); }
.single-product #review_form_wrapper #respond input[type="text"],
.single-product #review_form_wrapper #respond input[type="email"],
.single-product #review_form_wrapper #respond textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--pnp-pdp-line);
  border-radius: 10px;
  background: var(--pnp-pdp-card);
  padding: .7rem .9rem;
  font-family: var(--pnp-pdp-sans);
  font-size: .95rem;
  color: var(--pnp-ink);
}
.single-product #review_form_wrapper #respond input:focus,
.single-product #review_form_wrapper #respond textarea:focus {
  outline: none;
  border-color: var(--pnp-bronze);
  box-shadow: inset 0 0 0 1px var(--pnp-bronze);
}
.single-product #reviews p.stars a { color: var(--pnp-bronze); }

/* =====================================================================
   7. RELATED  +  UP-SELLS  =>  horizontal scroll-snap carousel
   Same card markup as the shop loop, so the hover-swap (pnp-hover-img)
   second image keeps working. Colors / title font inherit the central
   + urbanstems layers; this only changes layout + card radius.
   ===================================================================== */
.single-product .related.products,
.single-product .up-sells.products {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.single-product .related.products > h2,
.single-product .up-sells.products > h2 {
  font-family: var(--pnp-pdp-serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--pnp-ink);
  margin: 0 0 1.5rem;
}
.single-product .related.products ul.products,
.single-product .up-sells.products ul.products {
  display: flex !important;
  grid-template-columns: none !important;    /* defeat Woo's grid layout */
  gap: 1.25rem;
  margin: 0;
  padding: 0 .25rem 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--pnp-pdp-line) transparent;
}
.single-product .related.products ul.products li.product,
.single-product .up-sells.products ul.products li.product {
  flex: 0 0 clamp(210px, 42vw, 264px);
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  scroll-snap-align: start;
}
.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link,
.single-product .related.products ul.products li.product a.woocommerce-loop-product__link,
.single-product .up-sells.products ul.products li.product a.woocommerce-LoopProduct-link,
.single-product .up-sells.products ul.products li.product a.woocommerce-loop-product__link {
  border-radius: 10px;
  overflow: hidden;
}
.single-product .related.products ul.products li.product img,
.single-product .up-sells.products ul.products li.product img {
  border-radius: 10px;   /* brand card radius */
}
.single-product .related.products ul.products::-webkit-scrollbar,
.single-product .up-sells.products ul.products::-webkit-scrollbar { height: 6px; }
.single-product .related.products ul.products::-webkit-scrollbar-thumb,
.single-product .up-sells.products ul.products::-webkit-scrollbar-thumb {
  background: var(--pnp-pdp-line);
  border-radius: 3px;
}

/* =====================================================================
   8. MOBILE STICKY ADD-TO-CART BAR
   Markup emitted by pnp-pdp.php; shown by its JS once the real
   add-to-cart button scrolls out of view. Its button clicks the REAL
   .single_add_to_cart_button, so all fields and checkout logic are intact.
   Hidden entirely on desktop.
   ===================================================================== */
.pnp-pdp-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--pnp-pdp-card);
  border-top: 1px solid var(--pnp-pdp-line);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .08);
}
.pnp-pdp-stickybar.is-visible { display: flex; }
.pnp-pdp-stickybar .pnp-sb-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pnp-pdp-stickybar .pnp-sb-name {
  font-family: var(--pnp-pdp-serif);
  font-weight: 600;
  font-size: .95rem;
  color: var(--pnp-ink);
  max-width: 46vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pnp-pdp-stickybar .pnp-sb-price,
.pnp-pdp-stickybar .pnp-sb-price .woocommerce-Price-amount {
  font-family: var(--pnp-pdp-sans);
  font-weight: 700;
  font-size: .95rem;
  color: var(--pnp-ink);
}
.pnp-pdp-stickybar .pnp-sb-price del .woocommerce-Price-amount { color: var(--pnp-pdp-muted); font-weight: 500; }
.pnp-pdp-stickybar .pnp-sb-price ins { text-decoration: none; }
.pnp-pdp-stickybar .pnp-sb-price ins .woocommerce-Price-amount { color: var(--pnp-coral); }
.pnp-pdp-stickybar .pnp-sb-add {
  margin-left: auto;
  flex: 0 0 auto;
  border: 0;
  border-radius: 3px;
  background: var(--pnp-bronze);      /* dark bronze band, white text */
  color: #fff;
  font-family: var(--pnp-pdp-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  padding: .85rem 1.4rem;
  cursor: pointer;
  transition: background .15s ease;
}
.pnp-pdp-stickybar .pnp-sb-add:hover { background: var(--pnp-bronze-dark); }

/* =====================================================================
   9. RESPONSIVE
   ===================================================================== */
@media (max-width: 860px) {
  .single-product div.product {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .single-product div.product > .summary { position: static; top: auto; }

  /* Gallery: thumbnails drop below the main image on narrow screens. */
  .single-product .woocommerce-product-gallery { flex-direction: column; }
  .single-product .woocommerce-product-gallery .flex-control-thumbs {
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: auto;
    width: 100%;
    gap: .5rem;
  }
  .single-product .woocommerce-product-gallery .flex-control-thumbs li { width: 64px !important; }
}

/* Never show the mobile bar on desktop, regardless of the JS class. */
@media (min-width: 861px) {
  .pnp-pdp-stickybar { display: none !important; }
}